/* =========================================================
   METAFURR MOBILE
   A phone-first layer: vertical 4K films, swipe carousels, pinned
   scroll moments, and only the words that matter.
   Loaded after site.css. Desktop is untouched.
   The media query must match MOBILE in site.js exactly.
   ========================================================= */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px) {

  :root{--gutter:20px;--nav-h:60px;--radius:20px}
  body{font-size:16px}
  .sec{padding:76px 0}
  .h-xl{font-size:clamp(40px,11vw,60px)}
  .h-lg{font-size:clamp(32px,9vw,46px);line-height:1}
  .h-md{font-size:clamp(28px,7.6vw,38px)}
  .kicker{font-size:11px;letter-spacing:.14em}
  .sec-head{gap:14px;margin-bottom:28px}
  .sec-head.split{grid-template-columns:minmax(0,1fr);gap:14px}
  /* fewer words: section intros go, headlines stay */
  .sec-head .lede,.enter-copy .lede,#global .lede,.contact-aside > p,.signal .hint,.pillar > p{display:none}

  /* ---------- navigation ---------- */
  .nav .wrap{gap:12px}
  .brand img{height:16px}
  .nav-cta .btn-primary{display:none}
  .menu-btn{width:42px;height:42px}
  .mobile-menu a.big{font-size:clamp(32px,9vw,44px)}

  /* ---------- sticky call to action ---------- */
  .m-cta{position:fixed;z-index:90;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translate(-50%,140%);display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;color:#fff;background:var(--grad);box-shadow:0 14px 40px -10px rgba(124,101,242,.8);transition:transform .6s var(--ease-out);white-space:nowrap}
  .m-cta svg{width:18px;height:18px}
  body.show-mcta .m-cta{transform:translate(-50%,0)}

  /* =========================================================
     HERO: vertical 4K film, captions low on screen
     ========================================================= */
  .hero{height:1100vh}
  .stage .scrim{background:linear-gradient(180deg,rgba(7,5,26,.55) 0%,rgba(7,5,26,0) 22%,rgba(7,5,26,0) 42%,rgba(7,5,26,.55) 66%,rgba(7,5,26,.92) 100%)}
  .stage .left-scrim{display:none}
  .band,.band.center{left:var(--gutter);right:var(--gutter);top:auto;bottom:calc(84px + env(safe-area-inset-bottom));transform:none;max-width:none;width:auto;text-align:left}
  .band::before,.band.center::before{inset:-40% -20px -30% -20px;background:linear-gradient(0deg,rgba(5,4,14,calc(var(--sa,.62)*1.1)) 30%,rgba(5,4,14,0) 100%)}
  .band .b-xl{font-size:clamp(40px,11.2vw,58px);line-height:.98}
  .band .b-lg{font-size:clamp(31px,8.6vw,44px);line-height:1.02}
  .band .b-kicker{margin-bottom:14px}
  .band .b-sub{display:none}
  .band.band-settle .b-sub{display:block;font-size:15.5px;margin-top:14px}
  .band .btn-row{margin-top:22px;gap:10px}
  .band .btn{min-height:48px;padding:0 20px;font-size:15px}
  .band.center .btn-row{justify-content:flex-start}
  .hero-hud{bottom:auto;top:calc(var(--nav-h) + 10px);left:var(--gutter);right:var(--gutter)}
  .hud-chapter{padding:7px 11px;font-size:10.5px}
  .hud-progress{width:56px}
  .cue{display:none}
  .ring{top:calc(var(--nav-h) + 10px);width:32px;height:32px}

  /* =========================================================
     DIAGNOSIS: tap tiles, instant answer
     ========================================================= */
  .diag{grid-template-columns:minmax(0,1fr);gap:18px}
  .symptoms{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sym{flex-direction:column;align-items:flex-start;gap:10px;padding:14px;min-height:118px;border-radius:16px}
  .sym:hover{transform:none}
  .sym .t{font-size:14.5px;line-height:1.3}
  .sym .tag{display:none}
  .signal{position:relative;top:auto;padding:18px;border-radius:18px}
  .signal-map{aspect-ratio:16/7;margin:10px -4px 4px}
  .meter{grid-template-columns:86px 1fr 34px;font-size:13px;gap:10px}
  .signal-read{margin-top:16px;padding-top:16px}
  .signal-read h3{font-size:22px}
  .signal-read p{font-size:14.5px;min-height:0}

  /* =========================================================
     ENTER METAFURR: full-bleed portrait card
     ========================================================= */
  .enter{padding-top:40px}
  .enter > .wrap{width:100%}
  .enter-hero{aspect-ratio:4/5;min-height:0;border-radius:0;display:block}
  .enter-hero img{position:absolute;inset:0;height:100%;aspect-ratio:auto;transform:none}
  .enter-hero::after{display:block;background:linear-gradient(0deg,rgba(7,5,26,.95) 0%,rgba(7,5,26,.55) 38%,rgba(7,5,26,0) 64%)}
  .enter-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:26px;padding:0;max-width:none}
  .enter-copy .h-lg{margin:12px 0 0}

  /* clarity: chips fly into three rows as you scroll (pinned) */
  .clarity{height:210vh;margin-top:0}
  .clarity-stage{position:sticky;top:0;height:100svh;padding:0;display:flex;flex-direction:column;justify-content:center}
  .clarity-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:18px}
  .clarity-head h3{font-size:clamp(26px,7vw,34px)}
  .clarity-board{height:auto;padding:16px;border-radius:18px}
  .clarity-board .cols{position:relative;grid-template-columns:minmax(0,1fr);gap:16px}
  .clarity-board .col{opacity:1;border-left:0;padding:0}
  .clarity-board .col h4{font-size:11px}
  .clarity-board .col ul{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
  .clarity-board .col ul li{padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(23,18,63,.85);font-size:13px;will-change:transform,opacity;transform:translate3d(var(--mx,0),var(--my,0),0) rotate(var(--mr,0deg));opacity:var(--mo,1)}
  .clarity-board .col-out{position:static;margin-top:10px;font-size:16px;opacity:var(--outA,1);transform:translateY(calc((1 - var(--outA,1))*10px))}
  .clarity-board .col-out span{display:inline;margin:0 8px 0 0}
  .piece,.clarity-board svg.links{display:none}

  /* =========================================================
     FRAMEWORK: pinned, one stage at a time, live dashboard
     ========================================================= */
  .framework{height:520vh}
  .fw-stage{position:sticky;top:0;height:100svh;padding:calc(var(--nav-h) + 6px) 0 18px;align-items:stretch}
  .fw-grid{grid-template-columns:minmax(0,1fr);gap:14px;align-content:center}
  .fw-head{margin-bottom:12px}
  .fw-head .h-md{max-width:none;margin-top:10px;font-size:clamp(26px,7vw,34px)}
  .fw-steps{padding-left:0;padding-top:14px;min-height:118px}
  .fw-rail{left:0;right:0;top:0;bottom:auto;width:auto;height:3px}
  .fw-rail i{transform-origin:left;transform:scaleX(var(--fp,0))}
  .fw-spark{display:none}
  .fw-step{display:none;padding:0}
  .fw-step.on{display:block;opacity:1;animation:pillarIn .6s var(--ease-out)}
  .fw-step h3{font-size:28px}
  .fw-step p,.fw-step.on p{max-height:none;opacity:1;margin-top:6px;font-size:15px}
  .dash{display:block;aspect-ratio:5/4;max-height:40svh;width:100%;margin:0 auto}
  .dash-view{inset:42px 0 0 0;padding:12px}

  /* =========================================================
     ENGINES
     ========================================================= */
  .engines{grid-template-columns:minmax(0,1fr);gap:22px}
  .engine-vis{max-width:320px}
  .tabs{width:100%}
  .tab{padding:9px 14px;font-size:13.5px}
  .pillar .p-kicker{margin:22px 0 10px}
  .pillar h3{font-size:clamp(28px,7.6vw,36px)}
  .caps{margin-top:18px}
  .caps li{font-size:13px;padding:7px 12px}
  .caps li:nth-child(n+7){display:none}

  /* =========================================================
     TRANSFORMATION: vertical before/after + swipe moments
     ========================================================= */
  .compare{aspect-ratio:3/4;border-radius:18px}
  .compare .knob{width:52px;height:52px;margin:-26px 0 0 -26px}
  .moments{display:flex;gap:12px;background:none;border:0;border-radius:0;overflow-x:auto;scroll-snap-type:x mandatory;margin:20px calc(var(--gutter) * -1) 0;padding:0 var(--gutter) 6px;scrollbar-width:none}
  .moments::-webkit-scrollbar{display:none}
  .moment{flex:0 0 72%;scroll-snap-align:start;border:1px solid var(--line-2);border-radius:16px;padding:20px 18px}
  .fineprint{font-size:12px}

  /* =========================================================
     WORK: swipe through real posters, reels play on their own
     ========================================================= */
  .marquee{padding:14px 0}
  .marquee img{height:50px}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter) * -1) 20px;padding:0 var(--gutter);scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{white-space:nowrap;padding:9px 15px;font-size:13.5px}
  .work-grid,.work-grid.full{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 10px;scrollbar-width:none}
  .work-grid::-webkit-scrollbar{display:none}
  .case{flex:0 0 80%;scroll-snap-align:center}
  .case:hover{transform:none}
  .case .frame{aspect-ratio:1080/1120}
  .case-info{padding:4px 18px 20px}
  .case-info h3,.work-grid.full .case-info h3{font-size:22px}
  .case .reel-badge{font-size:10px}
  p.swipe-hint{display:flex}

  /* case pop-up becomes a bottom sheet */
  .modal{padding:0;place-items:end stretch}
  .modal-card{width:100%;max-height:92svh;border-radius:24px 24px 0 0;grid-template-columns:minmax(0,1fr)}
  .modal-media{aspect-ratio:4/5;max-height:52svh;min-height:0}
  .modal-body{padding:22px 20px 34px}
  .modal-body h2{font-size:32px;margin:8px 0 14px}
  .story > div{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0}
  .story p{font-size:15px}

  /* =========================================================
     STORIES: full-screen vertical reel
     ========================================================= */
  .stories{grid-template-columns:minmax(0,1fr);gap:20px}
  .reel-stage{width:100%;max-width:440px;max-height:74svh;border-radius:22px}
  .story-copy h3{font-size:30px;margin:8px 0 4px}
  .story-copy .quote{font-size:18px;margin-top:14px}
  .story-copy .deliv{display:none}
  .story-nav{margin-top:20px}

  /* =========================================================
     LIFE: swipe gallery
     ========================================================= */
  .life{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 8px;scrollbar-width:none}
  .life::-webkit-scrollbar{display:none}
  .life figure,.life .a,.life .b,.life .c,.life .e{flex:0 0 78%;aspect-ratio:4/5;scroll-snap-align:center;grid-column:auto}
  .life .d{display:none}
  .life .e video{object-fit:cover}

  /* =========================================================
     GLOBAL
     ========================================================= */
  .globe{grid-template-columns:minmax(0,1fr);gap:8px}
  .net{aspect-ratio:16/12;margin:0 -10px 6px;order:-1}
  .markets{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}
  .markets div{padding:12px 14px}
  .markets b{font-size:16px}
  .markets span{font-size:12px}

  /* =========================================================
     BREW: vertical 4K coffee film
     ========================================================= */
  .brew,body[data-page="contact"] .brew{height:640vh}
  .brew-copy{top:calc(var(--nav-h) + 22px)}
  .brew-copy .h-lg{font-size:clamp(32px,8.8vw,44px)}
  .brew-cap{left:var(--gutter);right:var(--gutter);bottom:calc(84px + env(safe-area-inset-bottom));max-width:none;font-size:14.5px;padding:10px 14px}
  .brew-stage .scrim{background:linear-gradient(180deg,rgba(7,5,26,.85) 0%,rgba(7,5,26,0) 26%,rgba(7,5,26,0) 70%,rgba(7,5,26,.75) 100%)}

  /* =========================================================
     CONTACT: quick actions first, short form
     ========================================================= */
  .contact{margin-top:0;padding-top:20px}
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .contact-aside .h-md{max-width:none;margin:12px 0 0}
  .alt-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
  .alt{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .alt:hover{transform:none}
  .alt b{font-size:14px}
  .alt span span,.alt > span:last-child > span{display:none}
  .address{font-size:12.5px;margin-top:16px}
  .form-card{padding:20px;border-radius:22px}
  .form-card h3{font-size:24px}
  .fgrid{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:18px}
  .chip-opt span{font-size:13.5px;padding:9px 13px}
  textarea.input{min-height:100px}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .note{display:none}
  .btn-brew{width:100%}

  /* ---------- footer ---------- */
  .footer{padding:48px 0 calc(90px + env(safe-area-inset-bottom))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .foot-brand{grid-column:1/-1}
  .foot-grid > div:nth-child(3){display:none}
  .foot-bottom{margin-top:30px;font-size:12px}

  /* ---------- sub-pages ---------- */
  .page-hero{padding:calc(var(--nav-h) + 56px) 0 48px}
  .page-hero .lede{font-size:16px}
  .row{grid-template-columns:minmax(0,1fr);gap:8px;padding:24px 0}
  .row p{font-size:15px}
  .principles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 8px;gap:12px;scrollbar-width:none}
  .principles::-webkit-scrollbar{display:none}
  .principle{flex:0 0 80%;scroll-snap-align:start;padding:22px 20px}
  .pillar-block .grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .pillar-block h2{font-size:clamp(32px,8.6vw,44px)}
  .pillar-block .lede{font-size:16px}
  .svc{grid-template-columns:minmax(0,1fr)}
  .svc li{padding:14px 16px;font-size:14.5px}
  .cta-band{padding:30px 22px}
  .faq summary{font-size:18px;padding:18px 0}
  /* fewer words on the supporting pages too */
  .row > div:last-child > p{display:none}
  .row ul{margin-top:4px}
  .pillar-block .lede{display:none}
  .split-2 .rv > p.rv-i:not(.lede):not(.kicker){display:none}
  .faq details p{font-size:15px}
  .page-hero .h-xl{font-size:clamp(38px,10.6vw,56px)}
}

/* swipe hint (shown by JS only on phones) */
.swipe-hint{display:none;align-items:center;gap:8px;margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.swipe-hint i{width:28px;height:1px;background:var(--text-3);position:relative;overflow:hidden}
.swipe-hint i::after{content:"";position:absolute;inset:0;background:var(--cyan);transform:translateX(-100%);animation:hint 2.2s var(--ease-io) infinite}
@keyframes hint{to{transform:translateX(100%)}}
.m-cta{display:none}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px){.m-cta{display:inline-flex}}
@media (prefers-reduced-motion: reduce){
  .clarity,.framework,.brew{height:auto!important}
  .clarity-stage,.fw-stage{position:relative!important;height:auto!important}
  .fw-step{display:block!important}
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce), (orientation: portrait) and (max-width: 1024px) and (prefers-reduced-motion: reduce){
  .brew-stage .poster{background-image:url("../img/m/coffee-m-end.jpg")!important}
}