/* ==========================================================================
   Milla Agency — mobile overrides (≤1024px, covers phones and tablets, and
   the same breakpoint as the hamburger menu). Loaded last on every page so
   it wins over earlier rules. Desktop (>1024px) is untouched.
   The looping-video marquee is the one exception: hidden only on phones
   (≤760px), kept visible on tablet. See the dedicated block below.
   ========================================================================== */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {

  /* 0. No double-tap zoom (pinch-to-zoom still works) */
  html, body, a, button { touch-action: manipulation; }

  /* 1. Arrow glyphs (↗ ↑) render as emoji on some phones — hide them */
  .arrow-icon,
  .feature-list--links strong::after { display: none !important; content: none !important; }

  /* 2. Intro animation is skipped on mobile (see inline script in index.html) */
  .intro-screen { display: none !important; }

  /* 3. Hero image centred on the model, zoomed out a little: the photo sits
        at the bottom at 84% of the hero height and fades into a wall-coloured
        backdrop at the top, so more of the scene is visible. */
  .hero { background: #ede9e8 !important; }
  .hero__image {
    top: auto !important;
    bottom: 0 !important;
    height: 84% !important;
    object-position: 53% top !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  }

  /* 3b. Top of the homepage: while the header sits over the hero, give it the
         same colour as the hero backdrop. Safari on iOS 26 tints the status-bar
         area from the sticky header, so the page now runs seamlessly up to the
         top of the screen instead of showing a hard band. */
  body:not(.subpage) .header:not(.is-scrolled):not(.is-light):not(.menu-open) { background: #ede9e8; }
  /* Safari 26 ignores theme-color and tints the status-bar strip from the page
     background, so the homepage's base background matches the hero too.
     Every section below the hero has its own background, so nothing else changes. */
  html:has(.hero), body:has(.hero) { background: #ede9e8 !important; }

  /* 4. Hero supporting copy ("At Milla, we get…") removed */
  .hero__support { display: none !important; }

  /* 5. Hero social icons: left aligned, dark rounded-square buttons, white icons */
  .hero__socials {
    left: var(--page-pad, 22px) !important;
    right: auto !important;
    justify-content: flex-start;
    gap: 10px !important;
  }
  .hero__socials a,
  .hero__socials a:hover {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px;
    background: #171b20;
    color: #fff !important;
    transform: none;
  }
  .hero__socials svg { width: 18px !important; height: 18px !important; }

  /* 6. Open menu: whole header (logo bar + menu) on solid white */
  .header.menu-open,
  .header.menu-open.is-scrolled,
  .header.menu-open.is-light,
  .header:has(.navigation.is-open),
  .header:has(.menu-toggle[aria-expanded="true"]) {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #171b20 !important;
    border-bottom-color: rgba(23, 27, 32, .1) !important;
    transform: none !important;
  }
  .header.menu-open .wordmark,
  .header:has(.navigation.is-open) .wordmark { filter: brightness(0); }
  .header.menu-open .menu-toggle,
  .header:has(.navigation.is-open) .menu-toggle { background: transparent !important; border-color: rgba(23, 27, 32, .45) !important; }
  .header.menu-open .menu-toggle span,
  .header:has(.navigation.is-open) .menu-toggle span { background: #171b20 !important; }
  .header.menu-open .navigation,
  .navigation.is-open { background: #fff !important; }

  /* 6b. Menu open/close: background switches instantly, no fade */
  .header.menu-open,
  .header:has(.navigation.is-open),
  .header.menu-instant,
  .header.menu-instant * { transition: none !important; }

  /* 9. Hero headline: one block, right aligned */
  /* one text block in the top-right of the hero, under the menu button */
  .hero h1.hero__title {
    top: 104px !important; /* just below the 70px header */
    bottom: auto !important;
    left: 22px !important;
    right: 22px !important;
    transform: none !important;
    gap: 0 !important;
    align-items: flex-end !important;
    text-align: right;
  }
  .hero h1.hero__title { font-size: clamp(26px, 7vw, 32px) !important; line-height: 1.04 !important; }
  /* "THEY CHOOSE" slightly smaller than the lines above */
  .hero__title-right { font-size: .88em !important; line-height: 1.04 !important; }
  /* 4 lines: WE BUILD ✱ / THE REASON / THEY CHOOSE / YOU */
  /* YOU matches "WE BUILD" / "THE REASON" (1 / .88 ≈ 1.136 of "THEY CHOOSE") */
  .hero .hero__you-word { display: block; font-size: 1.136em; line-height: 1.04; margin-top: 0; }
  /* ✱ removed from the headline on mobile */
  .hero .hero__star-wrap { display: none !important; }
  /* "THE REASON" in the blue accent */
  .hero .hero__reason-word { color: #5083B8 !important; }
  /* "YOU" in the same colour as the rest of the headline */
  .hero .hero__you-word,
  .site-ready .hero .hero__you-word { color: #171b20 !important; }
  .hero__title-left { align-items: flex-end; text-align: right; }
  .hero__line--build { margin-left: auto; margin-right: 0; }
  .hero__title-right { align-self: flex-end !important; text-align: right !important; }

  /* 10. Scroll cue: vertically centred on the right edge of the hero */
  .hero__scroll {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }

  /* 7. Metrics order: 50+ · 5 · ∞ · 200+ */
  .proof-points dl > div:nth-child(3) { order: 4; }
  .proof-points dl > div:nth-child(4) { order: 3; }

}

/* 8. Video marquee hidden on phones only — visible on tablet (761–1024px),
      where the marquee stays shown with its looping videos. */
@media (max-width: 760px) {
  .scroll-marquee { display: none !important; }
}

/* Hero headline, mobile-only line breaks:
   WE BUILD / THE REASON / THEY / CHOOSE / YOU  (hidden on desktop) */
.hero__title-mobile { display: none; }
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .hero__title-left,
  .hero__title-right { display: none !important; }
  .hero__title-mobile { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .hero__title-mobile .hero__line-inner { white-space: nowrap; }
  .hero__title-mobile .hero__line--small { font-size: 1em; }
  .hero__title-mobile .hero__reason-word { font-size: .88em; }
}

/* Metric borders after re-ordering — 4 columns (601–1024px) */
@media (min-width: 601px) and (max-width: 1024px), (min-width: 601px) and (hover: none) and (pointer: coarse) {
  .proof-points dl > div:nth-child(4) { border-right: 1px solid rgba(255, 255, 255, .34); padding-right: clamp(16px, 3vw, 38px); }
  .proof-points dl > div:nth-child(3) { border-right: 0; padding-right: 0; }
}

/* Metric borders after re-ordering — 2×2 grid (≤600px) */
@media (max-width: 600px) {
  /* left column: 50+ and ∞ */
  .proof-points dl > div:nth-child(4) { padding-left: 0; padding-right: 15px; border-right: 1px solid rgba(255, 255, 255, .34); }
  /* right column: 5 and 200+ */
  .proof-points dl > div:nth-child(3) { padding-left: 15px; padding-right: 0; border-right: 0; }
}