/* ═══════════════════════════════════════════════════════════════
   WACKT — MOBILE LAYOUT   (load AFTER v4 + v7-champagne)
   Animations live in wackt-fx.css. This file is layout only.
   RULE: every section fits ONE phone screen and snaps.
   ═══════════════════════════════════════════════════════════════ */

html,body{max-width:100%;overflow-x:clip;}
@media (hover:none),(pointer:coarse){ #cursor{display:none!important;} }

/* ── smaller stats EVERYWHERE (desktop too — they were dominant) ── */
.stats-bar{margin-top:30px;}
.stat{padding:20px 14px;}
.stat-num{font-size:clamp(1.4rem,2.4vw,2rem);}
.stat-label{font-size:.56rem;letter-spacing:.22em;opacity:.6;}
.svc-icon img{max-width:38px;max-height:38px;}

@media (max-width:900px){

/* ═══ 1 · SNAP: one finger-swipe per section ═══════════════════ */
body.is-home{scroll-snap-type:y proximity;}
main > section,.proj-group{scroll-snap-align:start;scroll-snap-stop:always;}
main > section{min-height:100svh;display:flex;flex-direction:column;justify-content:center;}
/* CTA is the last section before the footer — it must NOT claim a full
   screen or lock scroll-snap-stop, or the footer becomes unreachable by
   swipe (this was the "can't scroll past the CTA card" bug). */
.cta{min-height:auto!important;scroll-snap-align:none!important;scroll-snap-stop:normal!important;}
.hero{min-height:100svh;}
#projects{scroll-snap-align:none;min-height:0;display:block;padding:0;}

/* ═══ 2 · TYPE + MARGINS ══════════════════════════════════════ */
.container{padding-left:22px;padding-right:22px;}
.section-padding{padding:44px 0;}
.section-head{margin-bottom:20px;}
.section-head .label{font-size:.54rem;letter-spacing:.28em;}
.section-head .title{font-size:clamp(1.4rem,6.2vw,1.85rem);line-height:1.12;}
.section-head p{font-size:.84rem;line-height:1.6;}

.burger{width:44px;height:44px;padding:9px;margin-right:-9px;}
.header-logo{display:inline-flex;align-items:center;min-height:44px;}
body.nav-open{overflow:hidden;}
#mobile-nav{gap:0;padding:0 9%;justify-content:center;}
#mobile-nav a{width:100%;display:flex;align-items:baseline;gap:15px;padding:17px 0;
  font-size:clamp(1.4rem,7vw,1.9rem);color:var(--ivory);border-bottom:1px solid var(--hairline);}
#mobile-nav a:first-child{border-top:1px solid var(--hairline);}
#mobile-nav a::before{content:attr(data-n);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.2em;color:var(--blue);}

.hero-content{padding-top:calc(env(safe-area-inset-top,0px) + 88px);}
.hero-eyebrow{font-size:.54rem;letter-spacing:.22em;margin-bottom:16px;}
.hero-title{font-size:clamp(2.2rem,11.5vw,3.6rem);}
.hero-sub{margin-top:18px;font-size:.88rem;}
.hero-cta{margin-top:24px;gap:10px;}
.hero-cta .btn{padding:12px 20px;font-size:.74rem;min-height:44px;}
.hero-scroll{display:none;}

/* ═══ 3 · PROJECT PANELS ══════════════════════════════════════ */
.proj-snap{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;}
.proj-group{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:visible;border-top:none;isolation:isolate;}
.proj-group-body{grid-template-rows:1fr!important;}
/* ── THE SWIPE FIX ──────────────────────────────────────────
   .proj-group-body is display:grid (v4's height-animation trick).
   Grid AND flex items default to min-width:auto, which refuses to
   shrink below their content's intrinsic width. So the single grid
   column measured ALL the cards laid end-to-end and simply grew
   wider than the screen. overflow-x:auto then had nothing to
   scroll — the rail wasn't overflowing its parent, the parent had
   expanded to fit it. Cards past the first sat off-screen with no
   way to reach them. min-width:0 lets the track collapse back to
   the viewport so the rail actually overflows, and scrolls. */
.proj-group-body{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;}
.g-clip{overflow:visible!important;overflow-x:visible!important;min-width:0!important;}
.proj-group-body > .g-clip{overflow:visible!important;}
.proj-group{min-width:0!important;}
.proj-grid{min-width:0!important;max-width:100vw;}
.proj-group-head .g-toggle,.proj-group-head .g-count{display:none;}

.proj-group-head{display:block;padding:0 22px 16px;cursor:default;position:relative;z-index:4;}
.proj-group-head .g-left{display:flex;flex-direction:column;align-items:flex-start;gap:9px;}
.proj-group-head .g-num{font-size:.64rem;letter-spacing:.3em;color:var(--blue);
  opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s var(--ease-luxe);}
.proj-group-head .g-name{font-size:clamp(1.9rem,9vw,2.7rem);line-height:1.02;letter-spacing:-.035em;
  opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease-luxe) .08s,transform .75s var(--ease-luxe) .08s;}
.proj-group.inview .g-num,.proj-group.inview .g-name{opacity:1;transform:translateY(0);}

.panel-meta{display:flex;align-items:center;gap:11px;padding:0 22px 14px;position:relative;z-index:4;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivory-40);opacity:0;transform:translateY(11px);
  transition:opacity .7s ease .2s,transform .7s var(--ease-luxe) .2s;}
.proj-group.inview .panel-meta{opacity:1;transform:translateY(0);}
.panel-meta .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--hairline-strong),transparent);}

.proj-grid{display:flex!important;grid-template-columns:none;gap:14px;padding:4px 22px 0;
  touch-action:pan-x pan-y;
  overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;z-index:4;}
.proj-grid::-webkit-scrollbar{display:none;}
.proj-grid::after{content:'';flex:0 0 22px;}
/* ensure the rail isn't clipped by any ancestor */
.proj-grid{-webkit-overflow-scrolling:touch;overflow-x:auto!important;}
.proj-card{flex:0 0 80vw;max-width:340px;scroll-snap-align:center;
  opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s var(--ease-luxe),box-shadow .4s,border-color .4s;}
.proj-group.inview .proj-card{opacity:1;transform:translateY(0);}
.proj-group.inview .proj-card:nth-child(1){transition-delay:.9s}
.proj-group.inview .proj-card:nth-child(2){transition-delay:.98s}
.proj-group.inview .proj-card:nth-child(3){transition-delay:1.06s}
.proj-group.inview .proj-card:nth-child(4){transition-delay:1.14s}
/* cloned carousel cards: no stagger, always visible */
.proj-card[data-clone]{transition-delay:0s!important;}
.proj-group.inview .proj-card[data-clone]{opacity:1;transform:none;}
.proj-card:hover{transform:translateY(0);}
.proj-thumb{aspect-ratio:16/10;}
.proj-info{padding:14px 16px 17px;}
.proj-info h4{font-size:1rem;}
.proj-info p{font-size:.77rem;}
.proj-cat{font-size:.6rem;letter-spacing:.18em;}
.proj-view{width:36px;height:36px;bottom:12px;right:12px;}

.swipe-cue{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);left:0;right:0;
  z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.53rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ivory-40);pointer-events:none;opacity:0;transition:opacity .6s ease 1.4s;}
.proj-group.inview .swipe-cue{opacity:1;}
.swipe-cue .ar{width:1px;height:22px;background:linear-gradient(var(--blue),transparent);
  animation:cueDrop 1.9s ease-in-out infinite;}
@keyframes cueDrop{0%,100%{transform:scaleY(.35);opacity:.3}50%{transform:scaleY(1);opacity:1}}
.proj-group:last-of-type .swipe-cue{display:none;}

/* ═══ 4 · CLIENTS — colour, no hover, dense ═══════════════════ */
.clients{padding:0;}
.marquee{padding:16px 0;}
.marquee::before,.marquee::after{width:8%;}
.marquee-track{animation-duration:24s;}
.logo-chip{height:40px;padding:0 15px;opacity:1;filter:none!important;}
.logo-chip img{max-height:28px;max-width:88px;filter:none!important;opacity:1;}
.logo-chip.lc-dark img{max-height:23px;}
.logo-chip.text-chip{font-size:.64rem;letter-spacing:.1em;white-space:nowrap;}
.marquee-track.row2{animation-duration:34s;animation-direction:reverse;}
.stats-bar{margin-top:18px;display:flex;flex-direction:row;border-radius:12px;}
.stat{flex:1;padding:11px 6px;text-align:center;}
.stat-num{font-size:1rem;display:block;}
.stat-label{font-size:.44rem;letter-spacing:.14em;display:block;margin-top:2px;opacity:.55;}
.pillars{gap:12px;margin-top:18px;}
.pillar{padding:14px 16px;}
.pillar h4{font-size:.84rem;}
.pillar p{font-size:.76rem;line-height:1.55;}

/* ═══ 5 · SERVICES — 8 tiles, one screen, tap to expand ═══════ */
#services .services-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.svc-card{padding:12px;display:flex;flex-direction:column;gap:7px;
  cursor:pointer;position:relative;min-height:0;}
.svc-top{display:flex;align-items:center;gap:9px;}
.svc-card .svc-icon{margin:0;}
.svc-card .svc-icon img{max-width:26px;max-height:26px;}
.svc-card h4{font-size:.76rem;line-height:1.25;margin:0;letter-spacing:-.01em;}
.svc-card p{font-size:.72rem;line-height:1.5;margin:0;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease-luxe),opacity .3s ease,margin .45s;}
.svc-card.open p{max-height:170px;opacity:.75;margin-top:2px;}
.svc-card::after{content:'+';position:absolute;top:10px;right:11px;
  font-size:.85rem;color:var(--blue);opacity:.5;transition:transform .35s;}
.svc-card.open::after{transform:rotate(45deg);opacity:1;}

/* ═══ 6 · CAPABILITIES — one column, full-width expandable ═══ */
.cap-grid{display:flex;flex-direction:column;gap:7px;}
.cap-col{padding:0;cursor:pointer;position:relative;overflow:hidden;}
.cap-col h4{font-size:.82rem;line-height:1.3;margin:0;padding:14px 40px 14px 15px;
  display:flex;align-items:center;gap:10px;}
.cap-col h4::before{content:'';width:14px;height:1px;background:var(--blue);flex-shrink:0;
  transition:width .35s var(--ease-luxe);}
.cap-col.open h4::before{width:24px;}
.cap-col ul{max-height:0;overflow:hidden;opacity:0;margin:0;padding:0 15px;
  transition:max-height .45s var(--ease-luxe),opacity .3s ease,padding .45s;}
.cap-col.open ul{max-height:240px;opacity:1;padding:0 15px 14px 39px;}
.cap-col li{font-size:.73rem;line-height:1.6;padding-left:11px;}
.cap-col::after{content:'+';position:absolute;top:13px;right:15px;
  font-size:.95rem;color:var(--blue);opacity:.55;transition:transform .35s;}
.cap-col.open::after{transform:rotate(45deg);opacity:1;}

/* ═══ 7 · SOLUTIONS — one screen per tab ══════════════════════ */
#solutions .tabs-nav{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:4px;margin-bottom:16px;}
#solutions .tabs-nav::-webkit-scrollbar{display:none;}
.tab-btn{flex:0 0 auto;padding:9px 14px;font-size:.68rem;white-space:nowrap;min-height:40px;}
.tab-grid{display:flex;flex-direction:column;gap:14px;}
.tab-text h3{font-size:1rem;line-height:1.3;margin-bottom:7px;}
.tab-text p{font-size:.78rem;line-height:1.55;margin-bottom:10px;}
.tab-features{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;}
.tab-features li{font-size:.7rem;line-height:1.4;padding-left:11px;}
.stack{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.stack-tile{padding:9px 5px;gap:5px;}
.stack-tile img{max-width:24px;max-height:24px;}
.stack-tile span{font-size:.53rem;letter-spacing:.05em;line-height:1.2;}

/* ═══ 8 · ABOUT — smaller headings, expandable M/V ═══════════ */
#about-us .section-head .title{font-size:clamp(1.35rem,6vw,1.7rem);}
.about-intro{font-size:.86rem!important;line-height:1.65!important;font-weight:400!important;
  color:rgba(11,12,16,.62)!important;margin-bottom:22px!important;}
.about-intro em{font-style:italic;font-weight:500;color:var(--blue,#AC945F);}
#about-us h3{font-size:.92rem;}
.mv-grid{display:flex;flex-direction:column;gap:7px;}
.mv-card{padding:0;cursor:pointer;position:relative;overflow:hidden;}
.mv-card h3{font-size:.85rem;margin:0;padding:13px 40px 13px 15px;
  display:flex;align-items:center;gap:10px;}
.mv-card h3::before{content:'';width:14px;height:1px;background:var(--blue);flex-shrink:0;
  transition:width .35s var(--ease-luxe);}
.mv-card.open h3::before{width:24px;}
.mv-card p{font-size:.75rem;line-height:1.7;margin:0;padding:0 15px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease-luxe),opacity .3s ease,padding .45s;}
.mv-card.open p{max-height:280px;opacity:1;padding:0 15px 14px 39px;}
.mv-card::after{content:'+';position:absolute;top:12px;right:15px;
  font-size:.95rem;color:var(--blue);opacity:.55;transition:transform .35s;}
.mv-card.open::after{transform:rotate(45deg);opacity:1;}

.values-row{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:14px;
  border:1px solid var(--hairline);border-radius:12px;overflow:hidden;}
.value{padding:11px 12px;display:flex;align-items:flex-start;gap:8px;
  border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.value:nth-child(2n){border-right:none;}
.value:nth-child(n+3){border-bottom:none;}
.value span:first-child{font-family:var(--mono);font-size:.55rem;color:var(--blue);
  letter-spacing:.12em;flex-shrink:0;}
.value span:last-child{font-size:.68rem;line-height:1.4;}
.team-teaser{margin-top:14px;padding:13px 15px;}
.team-teaser h3{font-size:.88rem;}
.team-teaser p{font-size:.73rem;line-height:1.6;}

/* ═══ 9 · CTA + FOOTER ════════════════════════════════════════ */
.cta{padding:64px 0;}
.cta h2{font-size:clamp(1.8rem,8.5vw,2.6rem);}
.cta p{font-size:.86rem;}
.footer-links a,.footer-legal a{display:inline-block;padding:9px 0;}
.footer-legal a{padding:9px 6px;}

/* ═══ 10 · PROJECT PAGES ══════════════════════════════════════ */
.pj-hero,.project-hero{min-height:72svh;padding-bottom:38px;}
.pj-hero::before,.project-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:190px;z-index:2;
  background:linear-gradient(rgba(6,6,8,.78),rgba(6,6,8,.42) 55%,transparent);
  pointer-events:none;}
.pj-hero .container,.project-hero-content{position:relative;z-index:5;
  padding-top:calc(env(safe-area-inset-top,0px) + 104px);}
.pj-title,.project-title{font-size:clamp(1.9rem,9vw,2.9rem);line-height:1.04;}
.pj-tag,.project-tag{font-size:.53rem;letter-spacing:.2em;padding:5px 10px;}
.pj-tags,.project-meta-top{gap:7px;margin-bottom:14px;}
.pj-meta,.meta-row{grid-template-columns:1fr!important;margin:30px 0!important;}
.pj-meta > div,.meta-row .meta-item{border-right:none!important;
  border-bottom:1px solid rgba(255,255,255,.07);padding:15px 18px!important;}
.pj-meta > div:last-child,.meta-row .meta-item:last-child{border-bottom:none;}
.meta-label{font-size:.55rem;letter-spacing:.2em;margin-bottom:5px;}
.meta-value{font-size:.85rem;line-height:1.45;}
.pj-lead,.lead-block .big{font-size:clamp(1.05rem,5vw,1.35rem);line-height:1.4;margin-bottom:26px;}
.lead-block .sub,.pj-text p{font-size:.87rem;line-height:1.7;}
.films-grid,.tvc-campaign-grid{grid-template-columns:1fr!important;gap:30px!important;}
.film-item.full-width{grid-template-columns:1fr!important;}
.audio-player{padding:14px 16px;gap:12px;}
.audio-title{font-size:.7rem;letter-spacing:.14em;}
.waveform{height:28px;}
.audio-play-btn{width:38px;height:38px;}
.project-close-btn{bottom:calc(env(safe-area-inset-bottom,0px) + 16px)!important;
  right:16px!important;top:auto!important;}
}

@media (max-width:380px){
  .svc-card h4,.cap-col h4{font-size:.71rem;}
  .logo-chip{height:36px;padding:0 12px;}
  .logo-chip img{max-height:24px;max-width:76px;}
  .stack-tile span{font-size:.48rem;}
  .proj-card{flex-basis:84vw;}
}

/* ── no-JS safety ── */
html:not(.fx-ready) .svc-card p,
html:not(.fx-ready) .cap-col ul,
html:not(.fx-ready) .mv-card p{max-height:none;opacity:1;}
html:not(.fx-ready) .proj-card,
html:not(.fx-ready) .proj-group-head .g-name,
html:not(.fx-ready) .proj-group-head .g-num,
html:not(.fx-ready) .panel-meta{opacity:1!important;transform:none!important;}

@media (prefers-reduced-motion:reduce){ body.is-home{scroll-snap-type:none;} }


/* ═══ 11 · MOBILE SMOOTHNESS ══════════════════════════════
   Panel reveals were compositing on the CPU, which stutters on
   mid-range Android when a whole section slides in. Promoting
   just the moving layers keeps the shift at 60fps. */
@media (max-width:900px){
  .panel-rev,.panel-amb,
  .rev-slate,.rev-curtain .cur,.rev-curtain .pelmet,
  .rev-atelier,.rev-live{
    will-change:transform,opacity;
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    transform:translateZ(0);
  }
  /* once a panel has finished revealing, drop the hint so we don't
     hold GPU memory for every section at once */
  .proj-group:not(.inview) .panel-rev{will-change:auto;}

  .proj-grid{scroll-behavior:smooth;}
  .proj-card{will-change:transform;}

  /* momentum feel on the rail */
  .proj-grid{-webkit-overflow-scrolling:touch;overscroll-behavior-x:auto;}
}

/* ═══ 12 · INDUSTRY & ECOSYSTEM ═══════════════════════════ */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:16px;overflow:hidden;margin-top:34px;}
.ind-card{background:var(--void);padding:30px 26px;display:flex;flex-direction:column;gap:11px;
  transition:background .4s var(--ease-luxe);}
.ind-card:hover{background:rgba(172,148,95,.05);}
.ind-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;color:var(--blue);font-weight:700;}
.ind-card h4{font-size:1.02rem;letter-spacing:-.01em;line-height:1.3;}
.ind-card p{font-size:.85rem;line-height:1.7;color:var(--ivory-60);}
@media (max-width:1024px){ .ind-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:900px){
  .ind-grid{grid-template-columns:1fr;border-radius:12px;margin-top:18px;}
  .ind-card{padding:16px 16px;gap:7px;}
  .ind-card h4{font-size:.86rem;}
  .ind-card p{font-size:.76rem;line-height:1.6;}
  .ind-k{font-size:.54rem;}
}