/* Mobile & tablet overrides — loaded AFTER style.css on every page that shares the header.
   Kept as its own file so it never entangles with edits in style.css.

   Why it exists (2026-09-16): style.css collapses the header only at max-width:600px, so every
   viewport from 601 to ~1000px (tablets, phones in landscape, narrow desktop windows) got the full
   desktop nav wrapping onto three lines. And on real phones (≤430px) the "Menu +" burger was pushed
   off the right edge by the language control. The owner also asked for far less text on mobile. */

/* ---------- 1. The dead zone: tablet + phone get ONE collapsed header ---------- */
@media (max-width: 1000px) {
  .header nav:not(.is-open) { display: none; }
  .header nav.is-open {
    display: flex; flex-direction: column; margin: 0;
    position: absolute; top: 76px; left: 0; right: 0; z-index: 5;
    padding: 22px 24px; gap: 14px;
    background: #0d1720fa; border: 1px solid #bdd6e522; border-radius: 14px;
  }
  .header nav.is-open a, .header nav.is-open .mega-trigger { font-size: 17px; }
  .menu-button { display: inline-flex; align-items: center; flex: 0 0 auto; color: #fff; background: none; font-size: 12px; padding: 12px 0 12px 12px; }
  .header > .project-button { display: none; }
  .language-control { margin-left: auto; }

  /* Density: the pieces that read as clutter on a small screen. */
  .cinematic-hero .world-clocks { display: none; }
  .scroll-cue { display: none; }
  .section-heading { display: block; }
  .section-heading p { width: auto; max-width: 38ch; margin-top: 14px; }
}

/* ---------- 2. Phones: keep the headline, drop the paragraphs ---------- */
@media (max-width: 600px) {
  /* The service reel under the hero: at phone size its labels collide with the
     card illustrations, and the mega-menu + work grid already cover the same
     four services. Owner: "make this smaller or remove this on mobile". */
  .hero-previews.service-carousel { display: none; }
  .hero-pillar p { display: none; }               /* keep "Get noticed." — drop its sub-line */
  .hero-pillar strong { font-size: 30px; }
  .section-top span:last-child { display: none; } /* the second mono label, e.g. "THE NEXT THING…" */
  .section-heading p { display: none; }           /* section intro copy; the h2 carries it on a phone */
  .section-heading h2 { font-size: clamp(34px, 9.6vw, 44px); }
  .cinematic-hero .hero-title { margin: 30px 0 34px; }
  .agency-positioning { font-size: 26px; }
  .hero-positioning-row { margin-top: 16px; padding-top: 14px; }
}

/* ---------- 3. Narrow phones: make the header actually fit ---------- */
@media (max-width: 460px) {
  .header { gap: 8px; }
  .header .header-brand { gap: 8px; }
  .header-brand-mark { width: 30px; height: 30px; }
  .header-brand-name { font-size: 19px; letter-spacing: -1.1px; }
  #language-toggle { gap: 4px; padding: 6px 4px; }
  #language-toggle > span:last-child { display: none; }  /* the ⌄ chevron; the globe + "EN" is enough */
  .menu-button { font-size: 12px; padding-left: 8px; }
}