/* mobile.css : phone layer. Loaded last on every page. Desktop untouched. 20 Oct 2026 */
@media (max-width:760px){

  /* ---------- 1. type and rhythm tokens ---------- */
  :root{
    --fs-label:.8125rem;               /* 13px small caps labels */
    --fs-small:.9375rem;               /* 15px */
    --fs-body:1rem;                    /* 16px */
    --fs-lead:1.0625rem;
    --fs-h2:1.875rem;                  /* 30px, one H2 size */
    --sp-s:3rem; --sp-m:3.75rem; --sp-l:4.5rem;
  }
  html, body{ overflow-x:clip; }
  body{ -webkit-text-size-adjust:100%; }
  main p, section p, article p, main li, section li, article li{ line-height:1.6; }

  /* ---------- 2. header: slimmer ---------- */
  header.nav .nav-in{ height:64px !important; min-height:64px !important; }
  header.nav{ min-height:0 !important; }

  /* ---------- 3. one alignment: left ---------- */
  main, section, article, .scene, .sec, .phead,
  section :is(div,p,h1,h2,h3,h4,span,a,ol,ul,li,figure,figcaption,small,b,i,em,strong,label),
  article :is(div,p,h1,h2,h3,h4,span,a,ol,ul,li,figure,figcaption,small,b,i,em,strong){
    text-align:left !important;
  }
  section :is(h1,h2,h3,p,.said,.meta,.label,.lede),
  article :is(h1,h2,h3,p){
    margin-left:0 !important; margin-right:0 !important; max-width:none !important;
  }
  .center-narrow, .center-narrow-wrap .wrap{ margin-left:0 !important; max-width:none !important; }
  section .wrap :is(a.go,a.btn,.acts){ margin-left:0 !important; margin-right:auto !important; }
  /* keep these centred: testimonial carousel, short statements, buttons' own label */
  .ts-stage, .ts-stage *, .ts-nav, .statement, .statement *, .ab-quote, .ab-quote *,
  .btn, button, .ts-arrow{ text-align:center !important; }
  .ts-stage blockquote, .ts-stage blockquote *{ text-align:left !important; }

  /* ---------- 4. headings: one scale, full width ---------- */
  section h2, article h2, .sc-world .said, .sc-her h2, .bd-work-lead h2, .rw-head h2{
    font-size:var(--fs-h2) !important; line-height:1.12 !important; width:auto !important;
  }
  .sc-shell .said, .bd-sys-q{ font-size:1.375rem !important; line-height:1.3 !important; width:auto !important; max-width:none !important; }
  .wk-case h2, .wk-case h3{ max-width:none !important; width:auto !important; }

  /* ---------- 5. small text floor and contrast ---------- */
  .meta, .label, .who, .eyebrow, .kicker, small, .fine, .lux-caption,
  .sc-proof-row i, .sc-strip figcaption{ letter-spacing:.12em; }
  .lux-caption, .bd-sys-fig li i, .bd-sys-fig li em, .bd-sys-fig li small,
  .sc-shell .said, figcaption, .caption, .cap{
    color:#4a4a4a !important; opacity:1 !important;
  }
  .dark .lux-caption, .dark figcaption, .dark .caption, .dark .cap{ color:#c9c9c9 !important; }

  .phead .lux-caption{ font-size:1.125rem !important; line-height:1.5 !important; color:#3a3a3a !important; }

  /* ---------- 6. reveal on scroll: no half-faded text on phones ---------- */
  .rv, .reveal, .bd-sys-fig li, .sc-fits li, .bd-col, .sc-proof-row > div{
    opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;
  }

  /* image frames open instantly on phones, no grey half-states */
  .m2 :is(.bd-card,.sc-thesis-img,.sc-her-pf,.sc-shell-img,.sc-close-bg,.sc-strip figure,.rw-card .im){
    clip-path:none !important; opacity:1 !important; transition:none !important;
  }
  /* centred stacks become left stacks */
  :is(.sc-her-txt,.sc-shell-txt,.sc-world-head,.sc-thesis .wrap,.rw-head,.sc-fit .wrap,.sc-voice .wrap,.center-narrow,.sc-trio,.sc-trio > div,.sc-world-head > div){
    align-items:flex-start !important; justify-content:flex-start !important;
  }

  /* ---------- 7. homepage hero: headline on the first screen ---------- */
  .sc-hero-img{ --hh:clamp(250px,42vh,340px); width:100% !important; aspect-ratio:auto !important; height:var(--hh) !important; min-height:0 !important; background-position:center 18% !important; animation:none !important; opacity:1 !important; transform:none !important; }
  .sc-hero-cities{ top:calc(clamp(250px,42vh,340px) - 104px) !important; height:auto !important; bottom:auto !important; display:block !important; }
  .sc-hero-in{ padding-top:22px !important; }
  .sc-hero .who{ margin-bottom:10px !important; }
  .sc-hero h1.ml{ font-size:3.25rem !important; line-height:1.0 !important; margin-top:0 !important; }
  .sc-hero .acts{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; }
  .sc-hero .acts .btn.primary{ width:100% !important; justify-content:center; }
  .sc-hero .acts a.quiet{
    display:flex !important; align-items:center; justify-content:center; width:100% !important;
    min-height:50px; border:1px solid currentColor; text-align:center !important; text-decoration:none;
  }
  .sc-hero .acts a.quiet::after{ display:none !important; }

  /* ---------- 8. homepage proof numbers ---------- */
  .sc-proof-row{ row-gap:28px !important; }
  .sc-proof-row > div{ padding-top:16px !important; padding-bottom:0 !important; min-height:0 !important; }
  .sc-proof-row b{ font-size:2.125rem !important; line-height:1.05 !important; }
  .sc-proof-row i{ font-size:.75rem !important; margin-top:8px !important; }
  .sc-proof-row span{ font-size:.9375rem !important; }
  .sc-proof .wrap{ padding-bottom:0 !important; }

  /* ---------- 9. selected work lead ---------- */
  .bd-work-lead{ padding-top:var(--sp-s) !important; padding-bottom:22px !important; }
  .bd-work-lead h2.ml{ max-width:none !important; width:auto !important; }

  /* ---------- 10. logo rail: one visual height ---------- */
  .rail .track img{ height:40px !important; width:auto !important; max-width:120px !important; object-fit:contain; }

  /* ---------- 11. cities: one swipe row ---------- */
  .sc-strip{
    display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:10px !important; padding:0 22px 6px !important; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .sc-strip::-webkit-scrollbar{ display:none; }
  .sc-strip figure{ flex:0 0 72% !important; width:72% !important; height:200px !important; scroll-snap-align:start; margin:0 !important; }
  .sc-strip figure img{ width:100% !important; height:100% !important; object-fit:cover; }

  /* ---------- 12. tap targets ---------- */
  a.go, a.quiet, a.bd-link, .rw-more a, .ts-nav button,
  footer .fine-links a, .mvmenu-group a{
    min-height:44px; display:inline-flex !important; align-items:center;
  }
  .ft-cols a{ min-height:40px; display:flex !important; }

  /* ---------- 13. footer social row ---------- */
  footer .fine .fine-links, .footer .fine .fine-links{
    display:flex !important; flex-wrap:wrap !important; column-gap:18px !important; row-gap:0 !important; width:100% !important; max-width:100% !important;
  }
  footer .fine .fine-links a{ white-space:nowrap; }

  /* ---------- 14. menu: six links, one button, socials ---------- */
  .mvmenu-groups .mvmenu-group:not(:last-child){ display:none !important; }
  .mvmenu-groups .mvmenu-group:last-child{ display:flex !important; flex-wrap:wrap; column-gap:18px; padding-top:8px; }
  .mvmenu-groups .mvmenu-group:last-child b{ flex:0 0 100%; }
  .mvmenu-fine{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:14px !important; }
  .mvmenu-fine a[href="contact"]{
    display:flex !important; align-items:center; justify-content:center; min-height:52px;
    background:#f7f6f3; color:#121212 !important; letter-spacing:.16em; text-transform:uppercase; font-size:.8125rem;
  }

  /* ---------- 15. services tab bar ---------- */
  .svc-nav{ top:0 !important; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); }
  .svc-nav a{ white-space:nowrap; min-height:44px; display:inline-flex !important; align-items:center; }

  /* ---------- 16. about: portrait full width ---------- */
  .phead .split .portrait{ width:100% !important; max-width:none !important; aspect-ratio:4/5; height:auto !important; box-shadow:none !important; }

  /* ---------- 17. fold long blocks (mobile.js adds .mv-fold) ---------- */
  .mv-fold{ position:relative; max-height:var(--fold-h,900px); overflow:hidden; }
  .mv-fold::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:140px; pointer-events:none;
    background:linear-gradient(to bottom, transparent, var(--fold-bg,#f7f6f3));
  }
  .mv-fold-btn{
    display:flex; align-items:center; justify-content:center; width:calc(100% - 44px); margin:18px 22px 0;
    min-height:50px; border:1px solid currentColor; background:transparent; color:inherit;
    font:500 .8125rem/1 var(--sans, "Archivo", system-ui, sans-serif); letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  }

  /* ---------- 18. contact: form straight after the headline ---------- */
  body.pg-contact main, body.pg-contact .mv-contact-flow{ display:flex; flex-direction:column; }
}