/* ==========================================================================
   TABLET 768 - 1024
   ========================================================================== */
@media (max-width: 1024px) {
  /* Nav collapses to burger at tablet — 7 links overflow below ~900px */
  .hl-nav-links {
    display: none;
  }
  .hl-burger {
    display: flex;
  }

  .hl-hero-text {
    width: 55%;
    padding: 56px 40px 48px;
  }
  .hl-srv {
    grid-template-columns: 120px 1fr 240px 40px;
    gap: 24px;
  }
  .hl-clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hl-selected-scroll {
    grid-template-columns: repeat(2, 1fr);
  }
  .hl-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* ==========================================================================
   MOBILE < 768
   ========================================================================== */
@media (max-width: 767px) {
  .hl-mast-h {
    font-size: 32px;
  }
  .hl-mast-name {
    font-size: 12px;
  }

  .hl-hero {
    min-height: 100vh;
    height: 100vh;
    max-height: none;
    position: relative;
  }
  .hl-hero-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .hl-hero-img > img,
  .hl-hero-img > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% center;
  }
  /* Soft fade at the bottom to keep text readable on the image */
  .hl-hero-img::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(to bottom, rgba(247,249,251,0) 0%, rgba(247,249,251,0.85) 60%, rgba(247,249,251,0.96) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .hl-hero-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    padding: 0 24px 32px;
    display: block;
    z-index: 2;
  }
  .hl-hero-text-top {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    gap: 14px;
  }
  .hl-hero-text-top .hl-eyebrow  { display: none; }
  .hl-hero-mark {
    position: absolute;
    top: 14vh;
    right: 6vw;
    height: clamp(160px, 40vw, 220px);
    width: auto;
    margin: 0;
    z-index: 3;
  }
  .hl-headline {
    font-size: clamp(34px, 9.5vw, 48px);
    letter-spacing: -1px;
    line-height: 1.02;
  }
  .hl-sub {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 0;
    max-width: 100%;
  }
  .hl-hero-img-credit {
    bottom: auto;
    top: 16px;
    z-index: 2;
  }
  .hl-sub {
    margin-bottom: 32px;
  }
  .hl-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .hl-cta,
  .hl-cta-ghost {
    text-align: center;
  }

  .hl-sticker {
    width: 110px;
    height: 110px;
    right: 16px;
    bottom: 16px;
  }
  .hl-sticker-mark { font-size: 16px; }
  .hl-sticker-yr { font-size: 16px; }
  .hl-sticker-eye { font-size: 8px; }

  .hl-services {
    padding: 64px var(--padding-x);
  }
  .hl-services-title {
    margin-bottom: 40px;
  }
  .hl-srv {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 0;
  }
  .hl-srv:hover,
  .hl-srv:focus-visible {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
  }
  .hl-srv-arrow {
    text-align: left;
  }

  .hl-quote {
    padding: 80px 24px;
  }
  .hl-quote::before {
    font-size: 320px;
    right: -40px;
    bottom: -80px;
    opacity: 0.5;
  }

  .hl-clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hl-cli {
    padding: 24px 12px;
    font-size: 13px;
  }

  .hl-foot-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hl-selected {
    padding: 56px var(--padding-x) 48px;
  }
  .hl-selected-scroll {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hl-pillars { padding: 64px var(--padding-x); }
  .hl-faq { padding: 64px var(--padding-x); }
  .hl-faq-head { margin-bottom: 32px; }
  .hl-talk { padding: 72px var(--padding-x); }
  .hl-talk .hl-rule { margin: 32px 0 40px; }
  .hl-talk-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Talk headline must wrap on mobile */
  .hl-talk-headline {
    white-space: normal;
    font-size: clamp(32px, 11vw, 56px);
  }

  /* Studio body stacks (narrative + stats) */
  .hl-studio-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hl-studio-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Packaging moodboard collapses 12-col positioning to single column */
  .hl-pack-grid {
    grid-template-columns: 1fr !important;
    gap: 48px 0 !important;
  }
  .hl-pack-card,
  .hl-pack-card[data-pos="1"],
  .hl-pack-card[data-pos="2"],
  .hl-pack-card[data-pos="3"],
  .hl-pack-card[data-pos="4"],
  .hl-pack-card[data-pos="5"],
  .hl-pack-card[data-pos="6"],
  .hl-pack-card[data-pos="7"],
  .hl-pack-card[data-pos="8"],
  .hl-pack-card[data-pos="9"],
  .hl-pack-card[data-pos="10"],
  .hl-pack-card[data-pos="11"],
  .hl-pack-card[data-pos="12"],
  .hl-pack-card[data-pos="13"],
  .hl-pack-card[data-pos="14"],
  .hl-pack-card[data-pos="15"],
  .hl-pack-card[data-pos="16"],
  .hl-pack-card[data-pos="17"],
  .hl-pack-card[data-pos="18"],
  .hl-pack-card[data-pos="19"],
  .hl-pack-card[data-pos="20"] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    margin-top: 0 !important;
    align-self: auto !important;
  }

  /* Packaging intro stacks */
  .hl-pack-intro {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hl-pack-hero {
    padding: 64px var(--padding-x) 48px;
  }
  .hl-pack-grid-section {
    padding: 32px var(--padding-x) 80px;
  }
  .hl-pillars-head { margin-bottom: 40px; }
  .hl-pillars-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hl-content-hero { padding: 64px var(--padding-x) 48px; }
  .hl-content-grid-section { padding: 48px var(--padding-x); }
  .hl-content-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hl-studio {
    padding: 64px var(--padding-x);
  }
  .hl-studio-head {
    margin-bottom: 48px;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hl-studio-portrait img {
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
  }
  .hl-studio-split {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 56px;
    margin-bottom: 48px;
  }
  .hl-studio-stats { grid-template-columns: 1fr 1fr; }
  .hl-studio-principles {
    grid-template-columns: 1fr 1fr;
  }
  .hl-h-l1 {
    padding-left: 2.5em;
  }
  .hl-h-l3 {
    padding-left: 0.8em;
  }
  .hl-foot-h {
    height: 80px;
  }
  .hl-foot-bottom {
    flex-direction: column;
    gap: 8px;
  }
}