/* The Monument webfont this used to load 404s (db.onlinewebfonts.com returns an
   HTML error page), so every heading has always fallen back to Montserrat 800 -
   which is the look that got approved. The @font-face is removed so the browser
   stops making a failing request on every page load. Rendering is unchanged.
   To use real Monument, self-host a licensed copy and restore an @font-face here. */
:root{--orange:#CB8A46;--orange-l:#D9A56A;--orange-d:#8E5E2B;--dark:#0A0A0A;--dark2:#111;--light:#F2F0ED;--white:#FFF;--text:#141414;--muted:#6B6B6B;--muted-l:#A0A0A0;--muted-d:#8C8C8C;--display:'Monument','Montserrat',sans-serif;--body:'Montserrat',sans-serif;--ease:cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
/* NOTE: no overflow-x:hidden here. It computes to `overflow: hidden auto`, which
   turns <body> into a scroll container and silently disables position:sticky for
   every section, the whole stacking effect was dead because of this one word.
   Horizontal overflow is prevented at the source instead (see .sec-slide::after). */
body{font-family:var(--body);background:var(--dark);color:#fff;overflow-x:clip}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}

.loader{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--dark);display:flex;align-items:center;justify-content:center;flex-direction:column}
.loader-word{display:flex;align-items:baseline;gap:0;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.02em;text-transform:uppercase;user-select:none}
.ll{display:inline-block}
.ll-o{color:var(--orange)}
.ll-w{color:#fff}
.ld-r{font-size:.35em;line-height:0;position:relative;top:-1.8em;margin-left:1px;color:#fff}
.scroll-bar{position:fixed;top:0;left:0;height:2px;background:var(--orange);z-index:9998;width:0}

nav{position:fixed;top:0;left:0;right:0;z-index:300;padding:16px 36px;backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);background:linear-gradient(to bottom,rgba(10,10,10,.42),rgba(10,10,10,.12));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;transition:background .35s,backdrop-filter .35s,padding .35s,transform .4s cubic-bezier(.16,1,.3,1)}
nav.nav-hidden{transform:translateY(-100%)}
nav.s{background:rgba(10,10,10,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:12px 36px}
nav.nav-light{background:rgba(242,240,237,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:12px 36px}
nav.nav-light .n-links a{color:var(--muted)}
nav.nav-light .n-links a:hover{color:var(--text)}
nav.nav-light .logo-tudios{color:var(--text)}
nav.nav-light .logo-wcs,nav.nav-ov-light .logo-wcs,.ov-page-nav-light .logo-wcs,.menu-ov-logo .logo-wcs{color:var(--orange-d)}
nav.nav-light .n-cta{background:var(--text);color:#fff}
.n-logo{font-family:var(--display);font-weight:900;font-size:.85rem;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;line-height:1}
.logo-wcs{color:var(--orange)}
.logo-tudios{color:#fff;transition:color .35s}
.logo-r{color:#fff;font-size:.4em;font-weight:600;margin-left:1px;line-height:0;position:relative;top:-1.6em;flex-shrink:0;transition:color .35s}
nav.nav-light .logo-r,nav.nav-ov-light .logo-r,.ov-page-nav-light .logo-r{color:var(--text)}
.n-links{display:flex;gap:32px;list-style:none;justify-self:center}
.n-links a{font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .25s;position:relative}
.n-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--orange);transition:width .35s var(--ease)}
.n-links a:hover{color:#fff}.n-links a:hover::after{width:100%}
.n-cta{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);background:var(--orange);padding:9px 22px;border-radius:100px;transition:transform .3s var(--ease),background .3s}
.n-cta:hover{transform:scale(1.05);background:var(--orange-l)}

/* Nav states when overlays are open */
nav.nav-ov-light{background:rgba(242,240,237,.97)!important;backdrop-filter:blur(20px)!important}
nav.nav-ov-light .n-links a{color:var(--muted)!important}
nav.nav-ov-light .n-links a:hover,nav.nav-ov-light .n-links a.nav-active{color:var(--text)!important}
nav.nav-ov-light .n-links a.nav-active::after{width:100%;background:var(--orange)}
nav.nav-ov-light .logo-tudios{color:var(--text)}
nav.nav-ov-light .n-cta{background:var(--text);color:#fff}
nav.nav-ov-dark{background:rgba(10,10,10,.82)!important;backdrop-filter:blur(20px) saturate(1.15)!important;-webkit-backdrop-filter:blur(20px) saturate(1.15)!important}
nav.nav-ov-dark .n-links a.nav-active{color:#fff!important}
nav.nav-ov-dark .n-links a.nav-active::after{width:100%;background:var(--orange)}
.n-tog{display:flex;flex-direction:column;gap:4px;cursor:pointer;background:none;border:none;padding:8px;z-index:10;justify-self:end}
.n-tog span{display:block;width:20px;height:1.5px;background:#fff;transition:transform .3s,opacity .3s}
nav.nav-light .n-tog span,nav.nav-ov-light .n-tog span,.ov-page-nav-light .n-tog span{background:var(--text)}

/* Full-screen menu overlay */
.menu-overlay{position:fixed;top:0;left:0;right:0;height:75vh;z-index:9000;background:var(--light);display:flex;flex-direction:column;border-radius:0 0 20px 20px;box-shadow:0 20px 60px rgba(0,0,0,.15);transform:translateY(-100%);transition:transform .5s cubic-bezier(.76,0,.24,1)}
.menu-overlay.open{transform:translateY(0)}
.menu-ov-nav{position:relative;top:auto;left:auto;right:auto;z-index:auto;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:flex;align-items:center;justify-content:space-between;padding:16px 36px;flex-shrink:0;transform:none}
.menu-ov-close{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(20,20,20,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;transition:background .25s,border-color .25s,transform .25s}
.menu-ov-close:hover{background:var(--text);border-color:var(--text);transform:rotate(90deg)}
.menu-ov-close:hover svg{stroke:#fff}
.menu-ov-links{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 36px}
.menu-ov-link{display:block;padding:6px 0;text-decoration:none;color:var(--text);font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.5vw,3.4rem);letter-spacing:-.01em;line-height:1.2;text-align:center;text-transform:uppercase;transition:color .1s ease}
.menu-ov-link:hover{color:var(--orange)}
.menu-ov-footer{display:flex;align-items:flex-end;justify-content:space-between;padding:28px 36px;flex-shrink:0}
.menu-ov-email{font-size:.78rem;color:var(--muted);font-weight:500;transition:color .25s}
.menu-ov-email:hover{color:var(--text)}
.menu-ov-socials{display:flex;gap:16px;align-items:center}
.menu-ov-socials a{color:var(--muted);transition:color .15s;display:flex;align-items:center}
.menu-ov-socials a:hover{color:var(--text)}

.hero{position:sticky;top:0;height:100vh;min-height:580px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 36px clamp(88px,11vh,120px);overflow:hidden;z-index:1}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.35) 0%,rgba(10,10,10,.12) 35%,rgba(10,10,10,.55) 65%,rgba(10,10,10,.97) 100%);z-index:1}
.hero::before{content:'';position:absolute;inset:0;z-index:1;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}
.hero-bg-inner{width:100%;height:100%;background:linear-gradient(155deg,#0A0A0A 0%,#141414 45%,#0d0d0d 100%);position:relative}
.orb{position:absolute;border-radius:50%;animation:fo 14s ease-in-out infinite}
.o1{width:650px;height:650px;top:8%;right:-12%;background:radial-gradient(circle,rgba(203,138,70,.055) 0%,transparent 65%)}
.o2{width:380px;height:380px;bottom:12%;left:-5%;background:radial-gradient(circle,rgba(89,115,141,.035) 0%,transparent 65%);animation-delay:-5s;animation-direction:reverse}
@keyframes fo{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,12px)}}
.hero-c{position:relative;z-index:2;max-width:1440px;width:100%;margin:0 auto}
.hero-eye{font-size:.625rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:var(--orange);margin-bottom:26px;display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(14px);animation:fu .6s 1.9s var(--ease) forwards}
.hero-eye::before{content:'';width:28px;height:1px;background:var(--orange)}
.hero-h{font-family:var(--display);font-weight:800;font-size:clamp(2.15rem,8.6vw,6rem);line-height:1;letter-spacing:-.005em;text-transform:uppercase;margin-bottom:32px}
.hero-h .ln{display:block;overflow:hidden}
.hero-h .ln-i{display:block;opacity:0;transform:translateY(105%);animation:su .85s var(--ease) forwards}
.hero-h .ln:nth-child(1) .ln-i{animation-delay:1.8s}.hero-h .ln:nth-child(2) .ln-i{animation-delay:1.9s}.hero-h .ln:nth-child(3) .ln-i{animation-delay:2s}.hero-h .ln:nth-child(4) .ln-i{animation-delay:2.1s}
.ac{color:var(--orange)}
/* the accent is only legible on the dark ground; light sections get the darker one */
.sec-light .ac,.ov-sec-light .ac,#companiesOverlay .ac,#projectsOverlay .ac,#contactOverlay .ac{color:var(--orange-d)}
.hero-bot{display:flex;align-items:flex-end;justify-content:space-between;opacity:0;transform:translateY(14px);animation:fu .6s 2.3s var(--ease) forwards}
.hero-p{font-size:.82rem;font-weight:400;line-height:1.65;color:rgba(255,255,255,.45);max-width:360px}
.hero-sc{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:.5rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.hero-sc-line{width:1px;height:36px;background:linear-gradient(to bottom,var(--orange),transparent);animation:sp 2s ease-in-out infinite}
@keyframes su{to{opacity:1;transform:translateY(0)}}
@keyframes fu{to{opacity:1;transform:translateY(0)}}
@keyframes sp{0%,100%{opacity:.3}50%{opacity:1}}

.clients{background:var(--dark);padding:80px 36px;position:relative;z-index:2}
.clients .ctn{padding:0}
.cl-head{margin-bottom:28px}
.cl-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.cl-card{flex:0 0 calc((100% - 5*14px)/6);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.04);border-radius:14px;padding:44px 16px;display:flex;align-items:center;justify-content:center;transition:box-shadow .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.cl-card:hover{background:rgba(255,255,255,.07);border-color:rgba(203,138,70,.25);box-shadow:0 0 28px rgba(203,138,70,.1),0 0 8px rgba(203,138,70,.06)}
.cl-card-name{font-family:var(--display);font-weight:800;font-size:clamp(.52rem,.85vw,.72rem);text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.18);text-align:center;white-space:nowrap;transition:color .4s var(--ease)}
.cl-card:hover .cl-card-name{color:rgba(255,255,255,.35)}
.cl-logo{max-height:42px;max-width:80%;width:auto;height:auto;object-fit:contain;opacity:.55;filter:brightness(1.4);transition:opacity .4s var(--ease),filter .4s var(--ease)}
.cl-card:hover .cl-logo{opacity:.85;filter:brightness(1.6)}
/* Dark logos (on transparent bg) need inversion to appear white */
.cl-clone{display:none}
.cl-logo-blend{mix-blend-mode:lighten}
.cl-logo-dark{filter:invert(1) grayscale(1) brightness(1.3);opacity:.45}
.cl-card:hover .cl-logo-dark{opacity:.7;filter:invert(1) grayscale(1) brightness(1.5)}
/* Clients slide-out + scale entrance */
.cl-entrance{opacity:0;transform:translateY(-40px) scale(.92);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.cl-entrance.v{opacity:1;transform:translateY(0) scale(1)}
.tg{height:0}
.tg2{height:0}

/* ===== STACKING STICKY SECTIONS + CINEMATIC GLOW ===== */
.sec-dark,.sec-light{position:relative;z-index:1}
.sec-dark{background:var(--dark);color:#fff}
.sec-light{background:var(--light);color:var(--text)}
.sec-slide::after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;border-radius:28px 28px 0 0;pointer-events:none}
.sec-dark.sec-slide::after{background:var(--dark)}
.sec-light.sec-slide::after{background:var(--light)}

/* Sticky stacking starts at About - hero/clients/work scroll normally */
section.sec-slide{
  position:sticky;
  top:0;
  will-change:box-shadow;
  border-radius:28px 28px 0 0;
  transition:box-shadow .8s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -8px 30px rgba(0,0,0,.06);
  margin-bottom:45vh; /* extra scroll distance before the next section covers */
}
/* Last sticky section gets extra scroll room */
section.exp.sec-slide{margin-bottom:55vh}

/* Incrementing z-index so each section stacks on top of the last */
section.about{z-index:3}
section.svcs{z-index:4}
section.process{z-index:5}
section.exp{z-index:6}

/* Depth shadow when in view - cinematic layered depth */
.sec-slide.in-view{
  box-shadow:
    0 -100px 200px rgba(0,0,0,.28),
    0 -40px 80px rgba(0,0,0,.18),
    0 -10px 30px rgba(0,0,0,.1),
    0 -2px 0 rgba(203,138,70,.06);
}

/* Cinematic glow - injected .sec-glow element */
.sec-glow{
  position:absolute;
  top:0;left:0;right:0;
  height:200px;
  border-radius:28px 28px 0 0;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1);
}
.sec-slide.in-view .sec-glow{opacity:1}

/* Light section glow (appearing over dark) - warm orange light leak */
.sec-light .sec-glow{
  background:
    radial-gradient(ellipse 80% 50px at 50% 0%,rgba(203,138,70,.14) 0%,transparent 100%),
    radial-gradient(ellipse 40% 25px at 30% 0%,rgba(203,138,70,.06) 0%,transparent 100%),
    radial-gradient(ellipse 40% 25px at 70% 0%,rgba(203,138,70,.06) 0%,transparent 100%);
}

/* Dark section glow (appearing over light) - moody with warm accent */
.sec-dark .sec-glow{
  background:
    radial-gradient(ellipse 70% 45px at 50% 0%,rgba(203,138,70,.1) 0%,transparent 100%),
    radial-gradient(ellipse 35% 20px at 35% 0%,rgba(203,138,70,.04) 0%,transparent 100%),
    radial-gradient(ellipse 35% 20px at 65% 0%,rgba(203,138,70,.04) 0%,transparent 100%);
}

/* Inner glow line at top edge */
.sec-glow-line{
  position:absolute;
  top:0;left:8%;right:8%;
  height:1px;
  pointer-events:none;
  z-index:4;
  opacity:0;
  transition:opacity .9s .2s cubic-bezier(.16,1,.3,1);
}
.sec-slide.in-view .sec-glow-line{opacity:1}

.sec-light .sec-glow-line{
  background:linear-gradient(90deg,transparent 0%,rgba(203,138,70,.15) 15%,rgba(203,138,70,.4) 50%,rgba(203,138,70,.15) 85%,transparent 100%);
}
.sec-dark .sec-glow-line{
  background:linear-gradient(90deg,transparent 0%,rgba(203,138,70,.1) 15%,rgba(203,138,70,.28) 50%,rgba(203,138,70,.1) 85%,transparent 100%);
}

/* ===== CONTENT EXIT ANIMATIONS (applied by JS on scroll) ===== */
/* Base: all animated children get smooth transitions */
.sec-exit-el{
  transition:transform .15s linear,opacity .15s linear;
  will-change:transform,opacity;
}

/* Named exit directions - JS sets --exit-p (0→1 progress) */
.exit-up{transform:translateY(calc(var(--exit-p,0) * -80px)) scale(calc(1 - var(--exit-p,0) * .08));opacity:calc(1 - var(--exit-p,0))}
.exit-down{transform:translateY(calc(var(--exit-p,0) * 60px)) scale(calc(1 - var(--exit-p,0) * .06));opacity:calc(1 - var(--exit-p,0))}
.exit-left{transform:translateX(calc(var(--exit-p,0) * -120px)) rotate(calc(var(--exit-p,0) * -2deg));opacity:calc(1 - var(--exit-p,0))}
.exit-right{transform:translateX(calc(var(--exit-p,0) * 120px)) rotate(calc(var(--exit-p,0) * 2deg));opacity:calc(1 - var(--exit-p,0))}
.exit-scatter-1{transform:translate(calc(var(--exit-p,0) * -60px),calc(var(--exit-p,0) * -40px)) rotate(calc(var(--exit-p,0) * -3deg)) scale(calc(1 - var(--exit-p,0) * .15));opacity:calc(1 - var(--exit-p,0))}
.exit-scatter-2{transform:translate(calc(var(--exit-p,0) * 50px),calc(var(--exit-p,0) * -30px)) rotate(calc(var(--exit-p,0) * 2deg)) scale(calc(1 - var(--exit-p,0) * .12));opacity:calc(1 - var(--exit-p,0))}
.exit-scatter-3{transform:translate(calc(var(--exit-p,0) * -40px),calc(var(--exit-p,0) * 50px)) rotate(calc(var(--exit-p,0) * -1.5deg)) scale(calc(1 - var(--exit-p,0) * .1));opacity:calc(1 - var(--exit-p,0))}
.exit-scatter-4{transform:translate(calc(var(--exit-p,0) * 70px),calc(var(--exit-p,0) * 35px)) rotate(calc(var(--exit-p,0) * 3deg)) scale(calc(1 - var(--exit-p,0) * .12));opacity:calc(1 - var(--exit-p,0))}
.exit-sink{transform:translateY(calc(var(--exit-p,0) * 30px)) scale(calc(1 - var(--exit-p,0) * .2));opacity:calc(1 - var(--exit-p,0) * .9)}

/* Parallax transforms on outgoing section (applied by JS on scroll) */
.sec-slide.sec-receding{transform-origin:center top}

/* 3D perspective - NOTE: this must NOT live on <body>.
   `perspective` makes the element a containing block for its position:fixed
   descendants, which un-pinned the nav / lens blurs / scroll bar and laid the
   five closed .overlay panels out at the bottom of the page (doubling the
   document height). Perspective is now applied per-section inside main.js. */

/* Per-section glow variation for visual interest */
section.work .sec-glow{display:none}
/* keep the hairline: work slides over another dark section, so the top edge is
   the only thing that signals a new section has arrived */
section.work .sec-glow-line{left:0;right:0}
section.work.sec-slide{border-radius:0;box-shadow:none}
section.work.sec-slide::after{border-radius:0}
section.svcs .sec-glow{
  background:
    radial-gradient(ellipse 70% 55px at 45% 0%,rgba(203,138,70,.12) 0%,transparent 100%),
    radial-gradient(ellipse 50% 30px at 75% 0%,rgba(203,138,70,.07) 0%,transparent 100%);
}
section.process .sec-glow{
  background:
    radial-gradient(ellipse 90% 60px at 55% 0%,rgba(203,138,70,.15) 0%,transparent 100%),
    radial-gradient(ellipse 30% 20px at 20% 0%,rgba(203,138,70,.05) 0%,transparent 100%);
}
section.exp .sec-glow{
  background:
    radial-gradient(ellipse 60% 45px at 40% 0%,rgba(203,138,70,.1) 0%,transparent 100%),
    radial-gradient(ellipse 45% 35px at 70% 0%,rgba(203,138,70,.08) 0%,transparent 100%);
}

/* Lens blur overlays */
.lens-blur-top,.lens-blur-bottom{position:fixed;left:0;right:0;height:80px;z-index:90;pointer-events:none}
.lens-blur-top{top:0;background:linear-gradient(to bottom,rgba(10,10,10,.4),transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);mask-image:linear-gradient(to bottom,black 20%,transparent);-webkit-mask-image:linear-gradient(to bottom,black 20%,transparent)}
.lens-blur-bottom{bottom:0;background:linear-gradient(to top,rgba(10,10,10,.35),transparent);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);mask-image:linear-gradient(to top,black 20%,transparent);-webkit-mask-image:linear-gradient(to top,black 20%,transparent)}

.ctn{max-width:1240px;width:100%;margin:0 auto}
/* --muted is only legible on the light ground; dark sections take --muted-d */
.sec-dark .sl,.ov-sec-dark .sl,.exp .sl,.work .sl,.svcs .sl,.ft .sl,.hiring .sl{color:var(--muted-d)}
.sl{font-size:.625rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.sl::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange)}

/* WORK - stacked 2-col grid */
.work{background:var(--dark);padding:clamp(60px,8vh,100px) 36px clamp(100px,14vh,180px);color:#fff;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.wk-head{max-width:1240px;width:100%;margin:0 auto 60px}
.wk-h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,4.4rem);line-height:.92;letter-spacing:-.01em;text-transform:uppercase}

.wk-grid{max-width:1240px;width:100%;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:20px}
.wk-card{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.wk-card::after{content:'';position:absolute;inset:0;border-radius:14px;border:1.5px solid transparent;transition:border-color .4s var(--ease);pointer-events:none}
.wk-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgba(203,138,70,.2),0 0 0 1.5px rgba(203,138,70,.35)}
.wk-card:hover::after{border-color:rgba(203,138,70,.3)}
.wk-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.wk-card:hover img{transform:scale(1.05)}
.wk-card-info{position:absolute;bottom:0;left:0;right:0;padding:24px 28px;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.15) 60%,transparent 100%)}
.wk-card-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.wk-card-name{font-family:var(--display);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#fff}
.wk-card-tag{font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(255,255,255,.1);backdrop-filter:blur(10px);padding:5px 14px;border-radius:100px;white-space:nowrap}
.wk-featured{grid-row:span 2;aspect-ratio:auto;min-height:480px}
.wk-small{aspect-ratio:16/9}
.wk-cta{text-align:center;margin-top:56px;max-width:1240px;width:100%;margin-left:auto;margin-right:auto}
.btn-o-dark{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1.5px solid rgba(255,255,255,.15);padding:16px 48px;border-radius:100px;display:inline-flex;align-items:center;gap:10px;transition:all .3s var(--ease);background:transparent;cursor:pointer}
.btn-o-dark:hover{border-color:var(--orange);color:var(--orange)}

/* ABOUT */
.about{background:var(--light);padding:clamp(100px,14vh,180px) 36px;color:var(--text);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-bottom:60px}
.ab-h2{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.ab-h2 .mt{color:var(--muted-l)}
.ab-p{font-size:.85rem;line-height:1.7;color:var(--muted)}
.ab-p strong{color:var(--text);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:40px;border-top:1px solid rgba(20,20,20,.06);text-align:center}
.stats-seen-on{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:48px;margin-top:48px;border-top:1px solid rgba(20,20,20,.06)}
.stats-seen-label{font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.stats-seen-logos{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:56px;width:100%;max-width:620px}
.stats-seen-logo{height:28px;width:auto;opacity:.35;filter:brightness(0);transition:opacity .3s var(--ease)}
.stats-seen-logo:hover{opacity:.6}
.stats-seen-logos>:first-child{justify-self:end}
.stats-seen-logos>:last-child{justify-self:start}
.st-n{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.02em;text-transform:uppercase;line-height:1;margin-bottom:4px}
.st-l{font-size:.72rem;color:var(--muted)}

/* SERVICES - card grid with icons */
.svcs{background:var(--dark);color:#fff;padding:clamp(100px,14vh,180px) 36px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.svcs::before{content:'';position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}
.svcs-in{position:relative;z-index:1}
.svcs-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:48px}
.svcs-h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,4.4rem);line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
.proc-h2 .cnt{font-family:var(--body);font-size:.35em;font-weight:600;color:var(--muted);vertical-align:super;margin-left:5px;letter-spacing:.05em}
/* the services counter sits on the dark ground */
.svcs-h2 .cnt{font-family:var(--body);font-size:.35em;font-weight:600;color:var(--muted-d);vertical-align:super;margin-left:5px;letter-spacing:.05em}
.svcs-sub{max-width:320px;font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.5);padding-top:10px}

.svcs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:36px 28px;transition:border-color .35s,transform .35s var(--ease);position:relative;overflow:hidden}
.svc-card:hover{border-color:rgba(203,138,70,.25);transform:translateY(-4px)}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-icon{width:48px;height:48px;border-radius:12px;background:rgba(203,138,70,.08);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.svc-icon svg{stroke:var(--orange);width:22px;height:22px}
.svc-card-num{font-family:var(--body);font-size:.625rem;font-weight:600;letter-spacing:.15em;color:var(--orange);opacity:.6;margin-bottom:16px}
.svc-card-name{font-family:var(--display);font-weight:800;font-size:clamp(.85rem,1.4vw,1.1rem);text-transform:uppercase;letter-spacing:.03em;margin-bottom:12px}
.svc-card-desc{font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.48);margin-bottom:20px}
.svc-card-tags{display:flex;flex-wrap:wrap;gap:5px}
.svc-card-tag{font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);transition:border-color .3s,color .3s}
.svc-card:hover .svc-card-tag{border-color:rgba(203,138,70,.2);color:rgba(255,255,255,.5)}

/* PROCESS - LIGHT with horizontal tabs + collage */
.process{background:var(--light);color:var(--text);padding:clamp(100px,14vh,180px) 36px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.proc-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:48px}
.proc-h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,4.4rem);line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
.proc-sub{font-size:.82rem;color:var(--muted);max-width:320px;line-height:1.6;padding-top:10px}

/* PROCESS - editorial split: one persistent image, numbered index beside it */
.proc-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.proc-frame{position:relative;border-radius:14px;overflow:hidden;background:rgba(20,20,20,.06);aspect-ratio:4/3;min-height:280px}
.proc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.035);transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.proc-img.is-on{opacity:1;transform:none}
.proc-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.4),transparent 46%)}

.proc-stack{display:flex;flex-direction:column;justify-content:center;min-width:0}
.proc-row{display:block;width:100%;text-align:left;padding:18px 0;cursor:pointer;background:none;
  border:none;border-bottom:1px solid rgba(20,20,20,.1);font-family:inherit;color:inherit}
.proc-row:first-child{border-top:1px solid rgba(20,20,20,.1)}
.proc-row:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}
.proc-row-head{display:flex;align-items:baseline;gap:14px}
.proc-num{font-family:var(--display);font-size:.625rem;font-weight:800;color:var(--orange);opacity:.45;
  letter-spacing:.08em;transition:opacity .3s}
.proc-row.is-on .proc-num{opacity:1}
.proc-name{font-family:var(--display);font-weight:800;font-size:clamp(.95rem,1.7vw,1.25rem);
  text-transform:uppercase;letter-spacing:.02em;color:var(--muted);transition:color .35s var(--ease)}
.proc-row:hover .proc-name{color:var(--muted)}
.proc-row.is-on .proc-name{color:var(--text)}

/* collapse via grid-template-rows so it animates without a fixed height.
   min-height:0 is required, grid items default to min-height:auto and refuse to
   shrink to zero, which leaves the closed copy bleeding out below the row. */
.proc-body{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease)}
.proc-row.is-on .proc-body{grid-template-rows:1fr;opacity:1}
.proc-body-in{overflow:hidden;min-height:0}
.proc-desc{display:block;font-size:.83rem;line-height:1.75;color:var(--muted);margin-top:12px;max-width:46ch}
.proc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px;padding-bottom:4px}
.proc-tag-item{font-size:.625rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;border:1px solid rgba(20,20,20,.13);color:var(--muted);
  transition:border-color .3s,color .3s}
.proc-row.is-on .proc-tag-item{border-color:rgba(203,138,70,.3)}

/* EXPERIENCES / TESTIMONIALS - masonry collage */
.exp{background:var(--dark);color:#fff;padding:clamp(100px,14vh,180px) 36px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.exp-head{margin-bottom:48px}
.exp-h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,4.4rem);line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
.exp-grid{column-count:3;column-gap:16px;max-width:1240px;width:100%;margin:0 auto}
.exp-card{break-inside:avoid;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:28px 24px;margin-bottom:16px;display:flex;flex-direction:column}
.exp-card-stat{padding:32px 28px}
.exp-stat-top{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.exp-stat-num{font-family:var(--display);font-weight:800;font-size:3.2rem;line-height:.9;letter-spacing:-.03em}
.exp-stat-of{font-size:.9rem;color:var(--muted-l);font-weight:500;margin-top:8px}
.exp-stat-desc{font-size:.78rem;line-height:1.6;color:var(--muted-l);margin-top:12px}
.exp-stat-bot{padding-top:40px}
.exp-stat-brand{font-family:var(--display);font-weight:800;font-size:.75rem;letter-spacing:.02em;margin-bottom:8px}
.exp-stars{color:var(--orange);font-size:.7rem;letter-spacing:2px;margin-bottom:4px}
.exp-stat-trust{font-size:.68rem;color:var(--muted-l)}
.exp-rev-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.exp-rev-person{display:flex;align-items:center;gap:10px}
.exp-avatar{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;letter-spacing:.04em;flex-shrink:0}
.exp-rev-name{font-weight:700;font-size:.78rem}
.exp-rev-co{font-size:.65rem;color:var(--muted-l)}
.exp-stars-sm{color:var(--orange);font-size:.7rem;letter-spacing:2px}
.exp-rev-quote{font-size:clamp(.92rem,1.2vw,1.08rem);font-weight:600;line-height:1.45}
.exp-rev-big-quote{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:700;line-height:1.35}
.exp-card-spacer{height:28px}

/* LET'S TALK / CONTACT - dark card on light bg */
.talk{background:var(--light);padding:clamp(60px,8vh,100px) 36px clamp(100px,14vh,180px);min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:7}
.talk-card{background:var(--dark);border-radius:28px;padding:clamp(48px,6vw,80px) clamp(36px,5vw,72px);position:relative;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.15)}
.talk-card-rv{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),box-shadow .9s cubic-bezier(.22,1,.36,1)}
.talk-card-rv.v{opacity:1;transform:translateY(0) scale(1)}
.talk-card::before{content:'';position:absolute;inset:0;border-radius:28px;border:1px solid rgba(255,255,255,.04);pointer-events:none}
.talk-grid{display:grid;grid-template-columns:380px 1fr;gap:80px;align-items:center;position:relative;z-index:1}
.talk-form-wrap{position:relative}
.talk-form-card{background:#fff;border-radius:20px;padding:40px 32px;color:var(--text)}
.talk-form-brand{font-family:var(--display);font-weight:800;font-size:.75rem;letter-spacing:.02em;margin-bottom:16px}
.talk-form-h{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:28px}
.talk-label{display:block;font-size:.68rem;font-weight:600;margin-bottom:6px;margin-top:16px}
.talk-input{display:block;width:100%;padding:14px 16px;background:var(--light);border:none;border-radius:10px;font-family:var(--body);font-size:.82rem;color:var(--text);outline:none;transition:box-shadow .2s}
.talk-input:focus{box-shadow:0 0 0 2px var(--orange)}
.talk-input::placeholder{color:var(--muted-l)}
.talk-textarea{min-height:90px;resize:vertical}
.talk-submit{width:100%;margin-top:24px;padding:16px;background:var(--dark);color:#fff;border:none;border-radius:100px;font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.03em;cursor:pointer;transition:background .3s,transform .2s}
.talk-submit:hover{background:#333;transform:scale(1.02)}
.talk-form-legal{font-size:.66rem;color:var(--muted);margin-top:14px;line-height:1.5}
.talk-form-legal a{color:var(--text);font-weight:600;text-decoration:none}
.talk-right{padding-left:20px;color:#fff}
.talk-h2{font-family:var(--display);font-weight:800;font-size:clamp(3rem,7vw,6rem);line-height:.88;letter-spacing:-.02em;text-transform:none;margin-bottom:32px}
.talk-desc{font-size:clamp(.95rem,1.3vw,1.2rem);line-height:1.55;color:rgba(255,255,255,.45);margin-bottom:32px}
.talk-desc strong{color:rgba(255,255,255,.8)}
.talk-sep{height:1px;background:rgba(255,255,255,.06);margin-bottom:32px}
.talk-features{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.talk-feat{display:flex;gap:14px;align-items:flex-start}
.talk-feat-icon{width:28px;height:28px;flex-shrink:0;opacity:.45}
.talk-feat-icon svg{width:100%;height:100%;stroke:rgba(255,255,255,.6)}
.talk-feat-title{font-weight:700;font-size:.85rem;color:#fff;margin-bottom:6px}
.talk-feat-desc{font-size:.72rem;color:rgba(255,255,255,.55);line-height:1.5}
.talk-copy{color:rgba(255,255,255,.2);font-size:.65rem;margin-top:32px;padding-top:20px}

/* CONTACT PAGE OVERLAY - light, full-width layout */
.cp-header{margin-bottom:clamp(48px,6vw,72px);text-align:center}
.cp-heading{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5.5vw,5rem);line-height:.95;letter-spacing:-.02em;color:var(--text)}
.cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,100px);align-items:start;max-width:960px;width:100%;margin:0 auto}
.cp-subtitle{font-size:clamp(.92rem,1.2vw,1.1rem);line-height:1.65;color:var(--muted);margin-bottom:40px;max-width:380px}
.cp-person{display:flex;align-items:center;gap:14px}
.cp-avatar{width:48px;height:48px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.03em;flex-shrink:0}
.cp-person-info{display:flex;flex-direction:column;gap:2px}
.cp-person-name{font-weight:700;font-size:.82rem;color:var(--text)}
.cp-person-role{font-size:.68rem;color:var(--muted)}
.cp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.cp-field{display:flex;flex-direction:column}
.cp-label{font-size:.65rem;font-weight:600;letter-spacing:.04em;color:var(--text);margin-bottom:8px}
.cp-input{display:block;width:100%;padding:14px 0;background:transparent;border:none;border-bottom:1px solid rgba(20,20,20,.12);font-family:var(--body);font-size:.88rem;color:var(--text);outline:none;transition:border-color .3s}
.cp-input:focus{border-color:var(--orange)}
.cp-input::placeholder{color:var(--muted-l)}
.cp-textarea{display:block;width:100%;padding:14px 0;background:transparent;border:none;border-bottom:1px solid rgba(20,20,20,.12);font-family:var(--body);font-size:.88rem;color:var(--text);outline:none;resize:vertical;min-height:100px;transition:border-color .3s}
.cp-textarea:focus{border-color:var(--orange)}
.cp-textarea::placeholder{color:var(--muted-l)}
.cp-submit{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:16px 40px;background:var(--dark);color:#fff;border:none;border-radius:100px;font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.04em;cursor:pointer;transition:background .3s,transform .2s}
.cp-submit:hover{background:#222;transform:scale(1.03)}
.cp-submit-dot{width:6px;height:6px;border-radius:50%;background:var(--orange)}
.cp-legal{font-size:.66rem;font-size:.58rem;color:var(--muted);margin-top:16px;line-height:1.6}
.cp-legal a{color:var(--text);font-weight:600;text-decoration:none}
#contactOverlay{background:var(--light);color:var(--text);z-index:350}
#contactOverlay .ov-nav{display:none}
.cp-content{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 60px);padding-top:40px;padding-bottom:40px;box-sizing:border-box}

/* HIRING */
.hiring{background:var(--dark2);padding:64px 36px;border-top:1px solid rgba(255,255,255,.04);position:relative;z-index:8}
.hiring-inner{max-width:1240px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px}
.hiring-left{display:flex;align-items:center;gap:20px}
.hiring-badge{font-size:.625rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dark);background:var(--orange);padding:6px 14px;border-radius:100px;white-space:nowrap;animation:dp 2.5s ease-in-out infinite}
.hiring-text h3{font-family:var(--display);font-weight:800;font-size:clamp(1rem,2vw,1.4rem);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.hiring-text p{font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.5}
.btn-hiring{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1.5px solid rgba(255,255,255,.15);padding:11px 28px;border-radius:100px;transition:all .3s var(--ease);white-space:nowrap}
.btn-hiring:hover{border-color:var(--orange);color:var(--orange)}

/* FOOTER */
.ft{background:var(--dark);border-top:1px solid rgba(255,255,255,.035);padding:40px 36px 28px;position:relative;z-index:9}
.ft-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;max-width:1240px;width:100%;margin:0 auto}
.ft-logo{height:18px;margin-bottom:10px}.ft-logo img{height:100%;width:auto}
.ft-tag{font-size:.72rem;color:var(--muted-d);line-height:1.5}
.ft-title{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-bottom:14px}
.ft-ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ft-ul a{font-size:.78rem;color:rgba(255,255,255,.45);transition:color .25s}
.ft-ul a:hover{color:#fff}
.ft-ul .hl{color:var(--orange)}.ft-ul .hl:hover{color:var(--orange-l)}
.ft-soc{display:flex;gap:10px;margin-top:16px}
.ft-soc a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:border-color .25s,background .25s}
.ft-soc a:hover{border-color:var(--orange);background:rgba(203,138,70,.06)}
.ft-soc svg{width:13px;height:13px;fill:rgba(255,255,255,.45)}
.ft-bot{max-width:1240px;margin:28px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.035);display:flex;justify-content:space-between;align-items:center}
.ft-c{font-size:.625rem;color:var(--muted-d);letter-spacing:.03em}

/* OVERLAYS */
body.overlay-open{overflow:hidden;height:100vh;perspective:none}
body.overlay-open nav{z-index:400}
.overlay{position:fixed;inset:0;z-index:200;transform:translateY(100%);visibility:hidden;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  /* sheet motion: rounded leading edge and a soft shadow while it travels, square once it lands.
     Open rides a long expo-out so it decelerates into place; close is a quicker ease-in drop. */
  will-change:transform;backface-visibility:hidden;border-radius:28px 28px 0 0;box-shadow:0 -32px 96px rgba(0,0,0,.55);
  transition:transform .55s cubic-bezier(.64,0,.78,0),border-radius .2s,visibility 0s .55s}
.overlay.open{transform:translateY(0);visibility:visible;border-radius:0;
  transition:transform .9s cubic-bezier(.19,1,.22,1),border-radius .4s .5s,visibility 0s}
/* page dims underneath while a sheet is travelling, so the edge reads as depth rather than a hard cut */
#ovScrim{position:fixed;inset:0;z-index:199;background:#000;opacity:0;pointer-events:none;transition:opacity .7s cubic-bezier(.19,1,.22,1)}
body.overlay-open #ovScrim{opacity:.6}
/* sheet content settles in after the sheet itself, top block first */
.overlay:not(.client-ov) .ov-content > *{opacity:0;transform:translateY(28px);transition:none}
.overlay.open:not(.client-ov) .ov-content > *{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
.overlay.open:not(.client-ov) .ov-content > :nth-child(1){transition-delay:.26s}
.overlay.open:not(.client-ov) .ov-content > :nth-child(2){transition-delay:.34s}
.overlay.open:not(.client-ov) .ov-content > :nth-child(3){transition-delay:.42s}
.overlay.open:not(.client-ov) .ov-content > :nth-child(4){transition-delay:.5s}
.overlay.open:not(.client-ov) .ov-content > :nth-child(n+5){transition-delay:.58s}
.ov-nav{position:sticky;top:0;padding:16px 36px;display:flex;align-items:center;justify-content:space-between;z-index:10;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#projectsOverlay .ov-nav{display:none}
#crewOverlay,#companiesOverlay{z-index:350}
#clientOverlay{z-index:301}
.ov-logo{height:20px}.ov-logo img{height:100%;width:auto}
.ov-close{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(20,20,20,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;transition:background .25s,border-color .25s}
.ov-close:hover{background:var(--text);border-color:var(--text)}.ov-close:hover svg{stroke:#fff}
.ov-content{max-width:1240px;width:100%;margin:0 auto;padding:80px 36px 80px}

#projectsOverlay{background:var(--light);color:var(--text)}
#projectsOverlay .ov-nav{background:rgba(242,240,237,.95);padding:16px 36px}
#projectsOverlay .ov-nav .n-links a{color:var(--muted)}
#projectsOverlay .ov-nav .n-links a:hover{color:var(--text)}
#projectsOverlay .ov-nav .n-cta{background:var(--text);color:#fff}
#projectsOverlay .ov-close svg{stroke:var(--text)}
/* Client page next/prev nav */
.cli-nav-footer{display:flex;justify-content:space-between;align-items:center;padding:48px 0 0;margin-top:72px;border-top:1px solid rgba(255,255,255,.06)}
.cli-nav-btn{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.35);cursor:pointer;padding:14px 0;transition:color .3s var(--ease);background:none;border:none}
.cli-nav-btn:hover{color:var(--orange)}
.cli-nav-btn svg{transition:transform .3s var(--ease)}
.cli-nav-btn:hover svg{transform:translateX(4px)}
.cli-nav-btn.prev:hover svg{transform:translateX(-4px)}
.cli-nav-label{font-family:var(--body);font-weight:400;font-size:.6rem;letter-spacing:.05em;color:rgba(255,255,255,.2);margin-bottom:2px}
.po-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid rgba(20,20,20,.06)}
.po-h1{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5.5vw,4.8rem);line-height:.9;text-transform:uppercase;letter-spacing:-.02em}
.po-desc{font-size:.82rem;color:var(--muted);max-width:340px;line-height:1.65}
.wk-tag{font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);background:rgba(255,255,255,.1);backdrop-filter:blur(10px);padding:5px 14px;border-radius:100px;white-space:nowrap}
/* Morph tag → View pill on project cards */
.po-card .wk-tag{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;transition:background .4s var(--ease),color .4s var(--ease),width .4s var(--ease),padding .4s var(--ease)}
.po-card .wk-tag .tag-label{transition:opacity .25s var(--ease),transform .25s var(--ease);white-space:nowrap}
.po-card .wk-tag .tag-view{position:absolute;display:flex;align-items:center;justify-content:center;gap:5px;opacity:0;transform:translateY(5px);transition:opacity .3s .1s var(--ease),transform .3s .1s var(--ease);white-space:nowrap}
.po-card:hover .wk-tag{background:var(--orange);color:#fff;width:72px;padding:6px 0}
.po-card:hover .wk-tag .tag-label{opacity:0;transform:translateY(-5px)}
.po-card:hover .wk-tag .tag-view{opacity:1;transform:translateY(0)}
.po-filters{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap}
.po-filter{font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 22px;border-radius:100px;border:1.5px solid rgba(20,20,20,.08);background:transparent;cursor:pointer;transition:all .35s var(--ease);color:var(--muted);position:relative;overflow:hidden}
.po-filter::before{content:'';position:absolute;inset:0;background:var(--orange);border-radius:100px;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);z-index:-1}
.po-filter:hover{color:var(--text);border-color:rgba(20,20,20,.2)}
.po-filter.active{color:var(--dark);border-color:var(--orange)}
.po-filter.active::before{transform:scaleX(1)}
.po-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.po-card{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;background:#000;box-shadow:0 4px 24px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);opacity:0;transform:translateY(60px) scale(.96);transition:transform .9s var(--ease),box-shadow .55s var(--ease),opacity .8s var(--ease)}
.po-card::before{content:'';position:absolute;inset:0;border-radius:16px;border:1.5px solid rgba(20,20,20,.06);z-index:3;pointer-events:none;transition:border-color .4s var(--ease)}
.po-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 24px 64px rgba(203,138,70,.18),0 8px 24px rgba(0,0,0,.2),0 0 0 1.5px rgba(203,138,70,.25)}
.po-card:hover::before{border-color:rgba(203,138,70,.3)}
.po-card-img{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative}
.po-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s var(--ease);filter:brightness(.85) saturate(.95)}
.po-card:hover .po-card-img img{transform:scale(1.07);filter:brightness(.7) saturate(1.1)}
.po-card-ov{display:none}
.po-card-info{position:absolute;bottom:0;left:0;right:0;padding:20px 24px;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.2) 60%,transparent 100%);z-index:2;display:flex;align-items:flex-end;justify-content:space-between;transition:opacity .4s var(--ease)}
.po-card:hover .po-card-info{opacity:1}
.po-card-name{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:#fff}
/* Project card stagger entrance */
.po-card.po-visible{opacity:1;transform:translateY(0) scale(1)}
.po-card.po-fading{opacity:0;transform:translateY(-25px) scale(.96);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.po-card.po-hidden{display:none}

#crewOverlay{background:var(--light);color:var(--text)}
#crewOverlay .ov-nav{display:none}

/* Overlay page nav */
.ov-page-nav{position:sticky;top:0;z-index:100;padding:16px 36px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:transparent;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:color .35s}
.ov-page-nav-light{background:rgba(242,240,237,.6)}
.ov-page-nav-dark{background:rgba(10,10,10,.4)}
.ov-page-nav-dark .logo-tudios{color:#fff}
.ov-page-nav-dark .n-links a{color:rgba(255,255,255,.4)}
.ov-page-nav-dark .n-links a:hover,.ov-page-nav-dark .n-links a.active{color:#fff}
.ov-page-nav-dark .n-cta{background:#fff;color:var(--dark)}
.ov-page-nav-light .logo-tudios{color:var(--text)}
.ov-page-nav-light .n-links a{color:var(--muted)}
.ov-page-nav-light .n-links a:hover,.ov-page-nav-light .n-links a.active{color:var(--text)}
.ov-page-nav-light .n-cta{background:var(--text);color:#fff}

/* Overlay page sections - sticky stacking */
.ov-sec{position:relative;padding:100px 0}
.ov-sec .ctn{max-width:1240px;width:100%;margin:0 auto;padding:0 36px}
.ov-sec-dark{background:var(--dark);color:#fff}
.ov-sec-light{background:var(--light);color:var(--text)}
.ov-slide{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;border-radius:28px 28px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.06);margin-bottom:45vh;transition:box-shadow .8s cubic-bezier(.16,1,.3,1);will-change:box-shadow}
.ov-slide.in-view{box-shadow:0 -100px 200px rgba(0,0,0,.28),0 -40px 80px rgba(0,0,0,.18),0 -10px 30px rgba(0,0,0,.1),0 -2px 0 rgba(203,138,70,.06)}
.ov-slide.in-view .sec-glow{opacity:1}
.ov-slide.in-view .sec-glow-line{opacity:1}
.ov-sec-light .sec-glow{background:radial-gradient(ellipse 80% 50px at 50% 0%,rgba(203,138,70,.14) 0%,transparent 100%),radial-gradient(ellipse 40% 25px at 30% 0%,rgba(203,138,70,.06) 0%,transparent 100%),radial-gradient(ellipse 40% 25px at 70% 0%,rgba(203,138,70,.06) 0%,transparent 100%)}
.ov-sec-dark .sec-glow{background:radial-gradient(ellipse 70% 45px at 50% 0%,rgba(203,138,70,.1) 0%,transparent 100%),radial-gradient(ellipse 35% 20px at 35% 0%,rgba(203,138,70,.04) 0%,transparent 100%),radial-gradient(ellipse 35% 20px at 65% 0%,rgba(203,138,70,.04) 0%,transparent 100%)}
.ov-sec-light .sec-glow-line{background:linear-gradient(90deg,transparent 0%,rgba(203,138,70,.15) 15%,rgba(203,138,70,.4) 50%,rgba(203,138,70,.15) 85%,transparent 100%)}
.ov-sec-dark .sec-glow-line{background:linear-gradient(90deg,transparent 0%,rgba(203,138,70,.1) 15%,rgba(203,138,70,.28) 50%,rgba(203,138,70,.1) 85%,transparent 100%)}
.ov-slide.ov-receding{transform-origin:center top}
.ov-slide::after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;border-radius:28px 28px 0 0;pointer-events:none}
.ov-sec-dark.ov-slide::after{background:var(--dark)}
.ov-sec-light.ov-slide::after{background:var(--light)}
.ov-sec:nth-child(2){z-index:2}
.ov-sec:nth-child(3){z-index:3}
.ov-sec:nth-child(4){z-index:4}
.ov-sec:nth-child(5){z-index:5}
.ov-sec:nth-child(6){z-index:6}
.ov-sec:nth-child(7){z-index:7}
.ov-sec:nth-child(8){z-index:8}
.ov-sec:last-child{margin-bottom:0;min-height:auto}
.ov-sec:last-child .ctn{max-width:none;width:100%;padding:0 36px;flex:1;display:flex;flex-direction:column;justify-content:center}

/* Overlay footer */
.ov-ft{position:relative;z-index:1}

/* Crew - pill button */
.btn-p{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);background:var(--orange);border:none;border-radius:100px;padding:12px 24px;cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease)}
.btn-p:hover{background:var(--orange-l);transform:scale(1.04)}
.btn-p .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
.btn-p-dark{background:var(--text);color:#fff}
.btn-p-dark:hover{background:#333}
.btn-p-dark .dot{background:rgba(255,255,255,.4)}
.btn-p-light{background:var(--text);color:#fff}
.btn-p-light:hover{background:#333}

/* ═══ CREW PAGE - About Section ═══ */
.crew-about-sec{padding-top:120px;padding-bottom:20px}
.crew-about-h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,5rem);line-height:.88;text-transform:uppercase;letter-spacing:-.02em;color:var(--text);margin-bottom:14px}
.crew-about-sub{font-size:.82rem;line-height:1.7;color:var(--muted);max-width:540px;margin-bottom:64px;letter-spacing:.01em}
.crew-about-grid{margin-bottom:48px;max-width:680px;margin-left:auto;margin-right:auto}
.crew-about-desc{font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.6;color:var(--muted);margin-bottom:0}
.crew-about-desc strong{color:var(--text);font-weight:700}

/* Hero photo */
.crew-hero-photo{width:100%;border-radius:16px;overflow:hidden;max-height:520px;margin-bottom:0}
.crew-hero-photo img{width:100%;height:100%;object-fit:cover}

/* ═══ CREW PAGE - Branding + Photos Section ═══ */
.crew-brand-sec{padding-top:60px}
.crew-brand-grid{display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start;margin-bottom:60px}
.crew-brand-logo{font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:-.01em;margin-bottom:12px;color:var(--text)}
.crew-brand-tagline{font-size:.78rem;line-height:1.6;color:var(--muted);max-width:240px}
.crew-brand-desc{font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.55;color:var(--muted);margin-bottom:16px}
.crew-brand-desc strong{color:var(--text);font-weight:700}
.crew-brand-desc em{font-style:italic;color:rgba(0,0,0,.25);font-weight:400}
.crew-brand-body{font-size:.8rem;line-height:1.7;color:var(--muted);margin-bottom:28px}
.crew-photos-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-radius:14px;overflow:hidden}
.crew-photo-item{overflow:hidden;aspect-ratio:4/3}
.crew-photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.crew-photo-item:hover img{transform:scale(1.04)}

/* ═══ CREW PAGE - Team Section (white card on dark bg) ═══ */
.crew-team-sec{padding-top:60px;padding-bottom:60px}
.crew-team-card{background:#fff;border-radius:24px;padding:48px 40px;color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.15)}
.crew-team-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;align-items:stretch}

/* Info panel (left, inside white card) */
.crew-team-info-panel{display:flex;flex-direction:column}
.crew-team-brand-dark{font-family:var(--display);font-weight:800;font-size:.65rem;letter-spacing:.08em;margin-bottom:24px;color:var(--muted);text-transform:uppercase}
.crew-team-heading-dark{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);line-height:.92;margin-bottom:auto;color:var(--text);text-transform:uppercase;letter-spacing:-.02em}
.crew-team-heading-dark span{color:rgba(0,0,0,.18)}
.crew-team-cta-dark{margin-bottom:28px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06)}
.crew-team-cta-dark h3{font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;margin-top:20px;color:var(--text)}
.crew-team-cta-dark p{font-size:.72rem;line-height:1.6;color:var(--muted);margin-bottom:16px}
.crew-team-desc-dark{font-size:.78rem;line-height:1.65;color:var(--muted)}

/* 2x2 Photo grid (right) */
.crew-team-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.crew-photo-card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1.15;cursor:pointer;border:1px solid rgba(0,0,0,.06)}
.crew-photo-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.05) 40%,transparent 60%);pointer-events:none;transition:opacity .4s var(--ease)}
.crew-photo-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05);transition:transform .5s var(--ease)}
.crew-photo-card:hover img{transform:scale(1.04)}
.crew-photo-card:hover::after{opacity:.7}
.crew-pc-role{position:absolute;top:14px;right:14px;font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;z-index:1;background:rgba(0,0,0,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.crew-photo-card:hover .crew-pc-role{opacity:1;transform:translateY(0)}
.crew-pc-name{position:absolute;bottom:16px;left:16px;text-shadow:0 1px 12px rgba(0,0,0,.5);font-family:var(--body);font-weight:600;font-size:.85rem;color:#fff;z-index:1;letter-spacing:.01em}

/* ═══ CREW PAGE - Production Partner Section ═══ */
.crew-partner-sec{padding:100px 0}
.crew-split{display:grid;grid-template-columns:2fr 3fr;gap:48px;align-items:center;margin-bottom:48px}
.crew-split-text{padding-right:16px}
.crew-split-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;border-radius:12px;overflow:hidden;max-height:420px}
.crew-sg-img{overflow:hidden}
.crew-sg-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.crew-sg-img:hover img{transform:scale(1.04)}
.crew-sg-img.crew-sg-tall{grid-row:span 2}
.crew-about-lead{font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5;margin-bottom:20px}
.crew-about-lead em{font-style:italic;color:rgba(255,255,255,.3);font-weight:400}
.crew-about-lead strong{font-weight:700;color:#fff}
.crew-about-body{font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.3);margin-bottom:28px}

/* ═══ CREW PAGE - Light bg section title overrides ═══ */
.ov-sec-light .crew-section-title{color:var(--text)}
.ov-sec-light .crew-section-sub{color:rgba(0,0,0,.4)}

/* ═══ CREW PAGE - Kept legacy styles ═══ */
.crew-client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px;margin-top:24px}
.crew-cl-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:32px 20px;display:flex;align-items:center;justify-content:center;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.crew-cl-card:hover{border-color:rgba(203,138,70,.2);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.crew-cl-logo{max-height:28px;max-width:100px;width:auto;opacity:.35;filter:brightness(0);transition:opacity .3s var(--ease),filter .3s var(--ease)}
.crew-cl-card:hover .crew-cl-logo{opacity:.6}
.crew-seen-on-grid{grid-template-columns:repeat(3,1fr)}
.seen-on-logo{max-height:32px;max-width:120px}
.press-table{margin-top:24px}
.press-row{display:grid;grid-template-columns:1fr 200px 60px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(0,0,0,.08);text-decoration:none;color:var(--text);transition:background .2s var(--ease)}
a.press-row:hover{background:rgba(0,0,0,.02)}
.press-header{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.3);border-bottom:1px solid rgba(0,0,0,.12);padding:12px 0}
.press-col-title{font-size:.82rem;font-weight:600;padding-right:24px}
.press-col-source{font-size:.72rem;color:var(--orange-d);font-weight:600}
.press-col-year{font-family:var(--display);font-weight:800;font-size:.82rem;text-align:right}
.crew-section-title{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2.5vw,2rem);text-transform:uppercase;margin-bottom:8px}
.crew-section-sub{font-size:.82rem;color:rgba(255,255,255,.35);line-height:1.6;max-width:500px;margin-bottom:40px}

/* Crew last section - hiring + footer (no .ctn wrapper) */
#crewOverlay .ov-sec:last-child{padding:0;display:block}

@media(max-width:768px){
  .crew-about-grid{max-width:100%}
  .crew-brand-grid{grid-template-columns:1fr;gap:24px}
  .crew-photos-row{grid-template-columns:1fr}
  .crew-team-layout{grid-template-columns:1fr;gap:16px}
  .crew-team-grid{grid-template-columns:1fr 1fr}
  .crew-client-grid{grid-template-columns:repeat(2,1fr)}
  .press-row{grid-template-columns:1fr 100px 50px}.press-col-title{font-size:.72rem}.press-col-source{font-size:.68rem}
}

#companiesOverlay{background:var(--light);color:var(--text)}
#companiesOverlay .ov-nav{display:none}

/* Client project overlays */
.client-ov{background:var(--dark);color:#fff;z-index:210}
.client-ov{padding-top:72px}
/* Client page entrance animations */
.client-ov{background:var(--dark);color:#fff}
.client-ov .ov-content{padding-top:80px}
.cli-enter{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
.cli-enter.cli-in{opacity:1;transform:translateY(0)}

.cli-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);background:none;border:1px solid var(--orange);border-radius:100px;cursor:pointer;padding:8px 18px;margin-bottom:24px;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.cli-back:hover{color:#fff;background:var(--orange);border-color:var(--orange)}
.cli-back svg{transition:transform .3s var(--ease)}
.cli-back:hover svg{transform:translateX(-4px)}

/* Cover banner */
.cli-cover{position:relative;width:100%;aspect-ratio:2.2/1;border-radius:18px 18px 0 0;overflow:hidden;margin-bottom:0}
.cli-cover img{width:100%;height:100%;object-fit:cover}
.cli-cover-fade{position:absolute;bottom:0;left:0;width:100%;height:60%;background:linear-gradient(to top,var(--dark) 0%,var(--dark) 5%,transparent 100%);pointer-events:none}
/* Split hero */
.cli-hero{padding:40px 0 60px}
.cli-hero-split{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;padding-bottom:16px;margin-bottom:72px;border-bottom:1px solid rgba(255,255,255,.08)}
.cli-hero-left{padding-top:8px}
.cli-hero-right{display:flex;flex-direction:column;justify-content:center;padding-top:8px}
.cli-name{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,4rem);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:20px}
.cli-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0}
.cli-pill{font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 18px;border-radius:100px;border:1.5px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);background:transparent}
.cli-stats-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:16px;padding:24px 48px;margin-bottom:56px}
.cli-stats-card-label{font-size:.5rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.cli-stats-card-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange)}
.cli-stats-row{display:flex;justify-content:space-between;align-items:center}
.cli-stat{text-align:center;flex:1}
.cli-stat-div{width:1px;height:48px;background:rgba(203,138,70,.18);box-shadow:0 0 12px rgba(203,138,70,.35),0 0 4px rgba(203,138,70,.2);flex-shrink:0}
.cli-stat-num{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.6rem);color:#fff;margin-bottom:4px}
.cli-stat-label{font-size:.55rem;color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:.1em}
.cli-intro{font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.45);max-width:680px}
.cli-intro strong{color:rgba(255,255,255,.8)}
.cli-divider{height:1px;background:rgba(255,255,255,.06);margin:80px 0}
.cli-section-label{font-size:.5rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.cli-section-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange)}
.cli-proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cli-proj-card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cli-proj-card::after{content:'';position:absolute;inset:0;border-radius:14px;border:1.5px solid transparent;transition:border-color .4s var(--ease);pointer-events:none}
.cli-proj-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(203,138,70,.15),0 0 0 1.5px rgba(203,138,70,.3)}
.cli-proj-card:hover::after{border-color:rgba(203,138,70,.25)}
.cli-proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cli-proj-card:hover img{transform:scale(1.04)}
.cli-proj-info{position:absolute;bottom:0;left:0;right:0;padding:20px 24px;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 100%)}
.cli-proj-title{font-family:var(--display);font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.cli-proj-type{font-size:.5rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cli-proj-card.full{grid-column:span 2;aspect-ratio:21/9}
.cli-highlight{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:16px;padding:36px 32px;margin-top:48px}
.cli-highlight-quote{font-size:clamp(1rem,1.4vw,1.2rem);font-weight:600;line-height:1.5;color:rgba(255,255,255,.65);font-style:italic;margin-bottom:16px}
.cli-highlight-attr{font-size:.7rem;color:var(--orange);font-weight:700}
/* Rich project page elements */
.cli-video-wrap{position:relative;width:100%;border-radius:14px;overflow:hidden;margin-bottom:32px;background:#000;aspect-ratio:16/9;cursor:pointer;display:block;text-decoration:none}
.cli-video-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);opacity:.7}
.cli-video-wrap:hover img{transform:scale(1.04);opacity:.9}
.cli-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;background:rgba(203,138,70,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),background .3s}
.cli-video-wrap:hover .cli-video-play{transform:translate(-50%,-50%) scale(1.1);background:var(--orange)}
.cli-video-play svg{margin-left:3px}
.cli-video-wrap:has(.cli-vimeo-preview) .cli-video-play{opacity:0;transform:translate(-50%,-50%) scale(.8)}
.cli-video-wrap:has(.cli-vimeo-preview) img{opacity:.3}
/* Lightbox */
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.65);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.lightbox::before{content:'';position:absolute;top:50%;left:50%;width:1200px;height:800px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(201,155,80,.18) 0%,rgba(201,155,80,.08) 35%,rgba(201,155,80,.02) 55%,transparent 70%);pointer-events:none;z-index:0}
.lightbox.lb-open{opacity:1;pointer-events:auto}
.lb-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s;z-index:10}
.lb-close:hover{background:rgba(255,255,255,.15);transform:scale(1.1)}
.lb-content{width:90%;max-width:1100px;aspect-ratio:16/9;position:relative;transform:scale(.92);transition:transform .4s cubic-bezier(.22,1,.36,1);border-radius:14px;overflow:hidden;z-index:1;box-shadow:0 0 160px rgba(201,155,80,.12),0 0 60px rgba(201,155,80,.06),0 0 40px rgba(0,0,0,.5)}
.lb-content.lb-image{aspect-ratio:auto;max-height:85vh;max-width:1100px;width:auto;display:flex;align-items:center;justify-content:center}
.lightbox.lb-open .lb-content{transform:scale(1)}
.lb-content iframe{width:100%;height:100%;border:none;border-radius:14px}
.lb-content img{max-width:100%;max-height:85vh;width:auto;height:auto;border:none;object-fit:contain;border-radius:14px;display:block}
.cli-section-title{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2vw,1.6rem);text-transform:uppercase;letter-spacing:.02em;margin-bottom:12px}
.cli-section-text{font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.4);max-width:720px;margin-bottom:36px}
.cli-section-text strong{color:rgba(255,255,255,.7)}
.cli-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px}
.cli-video-grid .cli-video-wrap{margin-bottom:0}
.cli-bts-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:240px 240px;gap:16px;margin-bottom:16px}
.cli-bts-img{border-radius:14px;overflow:hidden;position:relative}
.cli-bts-img.bts-tall{grid-row:span 2}
.cli-bts-img.bts-wide{grid-column:span 2}
.cli-bts-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cli-bts-img:hover img{transform:scale(1.04)}
.cli-bts-img .bts-label{position:absolute;bottom:10px;left:12px;font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);backdrop-filter:blur(8px);padding:4px 12px;border-radius:100px;opacity:0;transition:opacity .3s}
.cli-bts-img:hover .bts-label{opacity:1}
/* Staggered editorial layout for campaign media */
.cli-stagger{display:flex;flex-direction:column;gap:80px;margin-bottom:40px}
.cli-stagger-row{display:flex;align-items:center;gap:48px}
.cli-stagger-row.row-right{flex-direction:row-reverse}
.cli-stagger-media{flex:0 0 58%;max-width:58%}
.cli-stagger-media .cli-video-wrap{margin-bottom:0}
.cli-stagger-media .cli-bts-img{border-radius:14px;overflow:hidden;aspect-ratio:16/10;position:relative}
.cli-stagger-media .cli-bts-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cli-stagger-media .cli-bts-img:hover img{transform:scale(1.04)}
.cli-stagger-aside{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.cli-stagger-aside .cli-bts-img{aspect-ratio:4/3;border-radius:14px;overflow:hidden;position:relative}
.cli-stagger-aside .bts-caption{font-size:.55rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-top:12px}
.cli-stagger-aside blockquote{font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.3);font-style:italic;border-left:2px solid var(--orange);padding-left:20px;margin:0}
.cli-stagger-aside blockquote strong{color:rgba(255,255,255,.55)}
.cli-stagger-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cli-stagger-pair .cli-video-wrap{margin-bottom:0}
.cli-stagger-pair .cli-bts-img{border-radius:14px;overflow:hidden;aspect-ratio:16/10;position:relative}
.cli-stagger-pair .cli-bts-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cli-stagger-pair .cli-bts-img:hover img{transform:scale(1.04)}
/* Editorial photo spread - overlapping images + bold title */
.cli-editorial{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:center;padding:48px 0;margin:40px 0}
.cli-editorial.ed-flip{grid-template-columns:1.6fr 1fr}
.cli-editorial.ed-flip .cli-ed-title{order:2}
.cli-editorial.ed-flip .cli-ed-photos{order:1}
.cli-ed-title h3{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);text-transform:uppercase;letter-spacing:-.01em;line-height:.95;color:#fff}
.cli-ed-title p{font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.35);margin-top:16px;max-width:360px}
.cli-ed-photos{position:relative;min-height:360px}
.cli-ed-photos .ed-img{position:absolute;border-radius:14px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.4);transition:transform .5s var(--ease)}
.cli-ed-photos .ed-img img{width:100%;height:100%;object-fit:cover;display:block}
.cli-ed-photos .ed-img:hover{transform:scale(1.03)!important;z-index:5}
.cli-ed-photos .ed-img.ed-1{width:52%;height:55%;top:0;right:5%;transform:rotate(3deg);z-index:2}
.cli-ed-photos .ed-img.ed-2{width:48%;height:55%;bottom:10px;left:0;transform:rotate(-4deg);z-index:3}
.cli-ed-photos .ed-img.ed-3{width:38%;top:8%;left:15%;transform:rotate(1deg);z-index:1}
.cli-impact{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:16px;padding:48px 40px;margin-top:56px;margin-bottom:0}
.cli-impact-label{font-size:.5rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.cli-impact-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange)}
.cli-impact-text{font-size:clamp(.92rem,1.2vw,1.08rem);line-height:1.65;color:rgba(255,255,255,.5)}
.cli-impact-text strong{color:rgba(255,255,255,.75)}
.cli-outcomes{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:16px;padding:36px 32px;margin-top:16px}
.cli-outcomes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px}
.cli-outcome-stat{text-align:center}
.cli-outcome-num{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.5vw,2.2rem);color:var(--orange);margin-bottom:4px}
.cli-outcome-label{font-size:.65rem;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.08em}

.co-h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,5rem);line-height:.88;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:8px}
.co-sub{font-size:.85rem;line-height:1.7;color:var(--muted);max-width:540px;margin-bottom:52px}
.co-sub strong{color:var(--text);font-weight:600}
.co-banner{font-size:.625rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--orange-d);margin-bottom:52px;display:flex;align-items:center;gap:8px}
.co-banner::before{content:'';width:28px;height:1.5px;background:var(--orange)}

.co-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:72px}
.co-card{background:var(--white);border-radius:12px;overflow:hidden;border:1px solid rgba(20,20,20,.04);transition:box-shadow .4s var(--ease),transform .35s var(--ease)}
.co-card:hover{box-shadow:0 20px 60px rgba(0,0,0,.06);transform:translateY(-4px)}
.co-card-inner{display:grid;grid-template-columns:1fr 1fr;min-height:320px}
.co-card-content{padding:40px 36px;display:flex;flex-direction:column;justify-content:center}
.co-card-visual{position:relative;overflow:hidden}
.co-card-visual-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.co-card-badge{font-size:.625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d);background:rgba(203,138,70,.1);padding:4px 12px;border-radius:100px;display:inline-flex;align-items:center;gap:5px;margin-bottom:18px}
.co-card-badge::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--orange)}
.co-card-name{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.5vw,2rem);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px}
.co-card-tagline{font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.co-card-desc{font-size:.82rem;line-height:1.65;color:var(--muted);margin-bottom:20px}
.co-card-link{font-size:.7rem;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);display:inline-flex;align-items:center;gap:6px;transition:color .25s}
.co-card-link:hover{color:var(--orange)}
.co-card-link svg{transition:transform .3s var(--ease)}
.co-card-link:hover svg{transform:translate(2px,-2px)}

@media(max-width:768px){.co-card-inner{grid-template-columns:1fr}.co-card-visual{min-height:200px}}
/* Legacy crew styles removed - new styles in crew page sections above */

.rv{opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.rv.v{opacity:1;transform:translateY(0)}
.rv.out{opacity:0;transform:translateY(-30px);transition:opacity .5s ease-out,transform .5s ease-out}
.rv-d1{transition-delay:.1s}
.rv-d2{transition-delay:.2s}
.rv-d3{transition-delay:.3s}
.rv-d4{transition-delay:.4s}
.rv-d5{transition-delay:.5s}
.rv-d6{transition-delay:.6s}
.rd1{transition-delay:.12s!important}.rd2{transition-delay:.22s!important}.rd3{transition-delay:.32s!important}

/* Period bounce */
.bounce-dot{display:inline-block;animation:none}
.bounce-dot.go{animation:pdot .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes pdot{0%{transform:translateY(0)}30%{transform:translateY(-8px)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}

/* Number scramble */
.st-n{font-variant-numeric:tabular-nums}
.rd1{transition-delay:.08s}.rd2{transition-delay:.16s}.rd3{transition-delay:.24s}

@media(max-width:1024px){.svcs-grid{grid-template-columns:1fr 1fr}.proc-tabs{grid-template-columns:1fr 1fr}.exp-grid{column-count:2}.talk-grid{grid-template-columns:1fr;gap:48px}.cp-grid{grid-template-columns:1fr;gap:40px}.cp-form-row{grid-template-columns:1fr}.cl-grid{grid-template-columns:repeat(3,1fr)}.cli-proj-card.full{aspect-ratio:16/9}.po-grid{gap:16px}}
@media(max-width:768px){
  nav,.ov-page-nav{padding:14px 24px}nav.s{padding:11px 24px}.n-links{display:none}
  .ov-page-nav .n-links{display:none}
  .menu-ov-nav{padding:14px 24px}.menu-ov-links{padding:0 18px}.menu-ov-footer{padding:20px 18px}
  .ov-sec .ctn{padding:0 24px}.ov-sec{padding:48px 0}.ov-slide{min-height:auto;display:block}
  .hero{padding:0 24px calc(84px + env(safe-area-inset-bottom))}.hero-bot{flex-direction:column;align-items:flex-start;gap:20px}.hero-sc{display:none}
  .work,.about,.process,.exp{padding-left:24px;padding-right:24px}
  .cli-hero-split{grid-template-columns:1fr;gap:24px}.cli-cover{aspect-ratio:16/9}.cli-proj-grid{grid-template-columns:1fr}.cli-proj-card.full{grid-column:span 1;aspect-ratio:16/10}.cli-pills{flex-wrap:wrap}.cli-stats-bar{flex-wrap:wrap;gap:24px}.cli-video-grid{grid-template-columns:1fr}.cli-bts-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.cli-bts-img.bts-tall{grid-row:span 1}.cli-bts-img.bts-wide{grid-column:span 2}.cli-editorial,.cli-editorial.ed-flip{grid-template-columns:1fr;gap:24px}.cli-ed-photos{min-height:300px}.cli-editorial.ed-flip .cli-ed-title{order:0}.cli-editorial.ed-flip .cli-ed-photos{order:0}
  .cli-stagger{gap:48px}.cli-stagger-row,.cli-stagger-row.row-right{flex-direction:column}.cli-stagger-media{flex:0 0 100%;max-width:100%}.cli-stagger-pair{grid-template-columns:1fr}
  .po-grid{grid-template-columns:1fr;gap:16px}.po-card{border-radius:12px}.wk-head,.po-head{flex-direction:column;gap:10px;align-items:flex-start}.wk-grid{grid-template-columns:1fr}.wk-featured{min-height:320px;grid-row:span 1}
  .ab-grid{grid-template-columns:1fr;gap:24px}.stats{grid-template-columns:repeat(3,1fr);gap:20px 10px}.stats-seen-logos{gap:24px}.stats-seen-logo{height:14px}
  .svcs{padding-left:24px;padding-right:24px}.svcs-head{flex-direction:column;gap:10px}
  .svcs-grid{grid-template-columns:1fr}
  .exp-grid{column-count:1}.talk-grid{grid-template-columns:1fr}.talk-right{padding-left:0}.talk-features{grid-template-columns:1fr}.talk-card{padding:32px 20px;border-radius:20px}.talk{padding-left:24px;padding-right:24px}.cp-grid{grid-template-columns:1fr;gap:32px}.cp-form-row{grid-template-columns:1fr}.cl-grid{grid-template-columns:repeat(2,1fr)}
  .proc-head{flex-direction:column;gap:8px;align-items:flex-start}
  .cta,.hiring{padding-left:24px;padding-right:24px}.hiring-inner{flex-direction:column;text-align:center}.hiring-left{flex-direction:column}
  .ft{padding:36px 18px 22px}.ft-grid{grid-template-columns:1fr;gap:24px}.ft-bot{flex-direction:column;gap:6px;text-align:center}
  .ov-content{padding:32px 18px 60px}.ov-nav{padding:14px 18px}
  .crew-about-h1{font-size:clamp(2rem,6vw,3.5rem)}
  .crew-team-card{padding:28px 20px}
  .crew-team-layout{grid-template-columns:1fr}
  .crew-team-grid{grid-template-columns:1fr 1fr}
  .crew-about-grid{max-width:100%}
  .crew-brand-grid{grid-template-columns:1fr}
  .crew-photos-row{grid-template-columns:1fr}
  .crew-split{grid-template-columns:1fr;gap:32px}.crew-split-text{padding-right:0}
  .crew-client-grid{grid-template-columns:repeat(2,1fr)}
  .press-row{grid-template-columns:1fr 100px 50px}.press-col-title{font-size:.72rem}.press-col-source{font-size:.68rem}
}



/* Form status line (lead capture) */
.form-status{min-height:1.2em;margin-top:12px;font-size:.75rem;font-weight:500;line-height:1.4}
.form-status-ok{color:var(--orange)}
.form-status-err{color:#e0644f}
.cp-content .form-status{margin-top:16px}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION, added 2026-09-04
   Everything below is additive; delete this block to revert.
   ═══════════════════════════════════════════════════════════════════ */

html{-webkit-text-size-adjust:100%}
*{-webkit-tap-highlight-color:rgba(203,138,70,.15)}

/* Viewport units that account for the mobile browser chrome.
   100vh on iOS is the LARGE viewport, so a 100vh hero is taller than the
   visible area whenever the URL bar is showing. svh is the honest one. */
@supports(height:100svh){
  .hero{height:100svh}
  .work,.about,.svcs,.process,.exp,.talk{min-height:100svh}
  .menu-overlay{height:75svh}
}

@media(max-width:768px){

  /* ── Trusted By ──
     .cl-grid is display:flex, so the grid-template-columns overrides in the
     1024/768 blocks above never applied, the cards stayed 6-across and
     collapsed to ~42px wide with 6px logos on a phone. */
  .clients .ctn{padding:0 18px}
  .cl-card{flex:0 0 calc((100% - 24px)/3);padding:15px 10px;border-radius:10px}
  /* Square marks (Vikings, Wild, Paddle North, TRIA) are height-constrained, so a
     24px cap left them filling ~36% of the card and reading as specks. */
  .cl-logo{max-height:34px;max-width:88%}
  .cl-head{margin-bottom:20px}

  /* Section bleed pushed the document 30px wider than the screen */
  .sec-slide::after,.ov-slide::after{left:0;right:0}

  /* Sticky hold. 45vh is ~380px of empty scroll on a phone, five times over. */
  section.sec-slide{margin-bottom:16vh}
  section.exp.sec-slide{margin-bottom:18vh}
  section.sec-slide,.ov-slide{border-radius:20px 20px 0 0}
  .sec-slide::after,.ov-slide::after{border-radius:20px 20px 0 0}

  /* Sticky shadows are cheap on desktop, expensive to repaint on a phone */
  .sec-slide.in-view{box-shadow:0 -20px 40px rgba(0,0,0,.22)}

  /* ── Forms ──
     iOS Safari zooms the whole page when a focused field is under 16px. */
  .talk-input,.talk-textarea,.cp-input,.cp-textarea{font-size:16px}
  .talk-textarea{min-height:120px}
  .talk-submit,.cp-submit{min-height:52px}
  .cp-submit{width:100%;justify-content:center}

  /* nav is a 3-column grid: logo | links | toggle. `.n-links` goes display:none
     on mobile, so the toggle became the 2nd grid item and landed in the middle
     column, the hamburger sat next to the logo instead of at the right edge.
     Pin it to the last column explicitly. */
  nav .n-tog,.ov-page-nav .n-tog{grid-column:3;justify-self:end}

  /* ── Tap targets (44px minimum) ── */
  .n-tog{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:10px;margin-right:-10px}
  .menu-ov-close{width:44px;height:44px}
  .ft-soc{gap:6px}
  .ft-soc a{width:44px;height:44px}
  .ft-soc svg{width:15px;height:15px}
  .menu-ov-socials{gap:8px}
  .menu-ov-socials a{width:44px;height:44px;justify-content:center}
  .menu-ov-email{display:inline-block;padding:12px 0;font-size:.85rem}
  .menu-ov-link{padding:10px 0}
  .ft-links a,.press-row{min-height:44px;display:flex;align-items:center}
  .press-row{display:grid}

  /* ── Legibility ── micro-labels were rendering at 7-9px */
  .sl,.hero-eye{letter-spacing:.22em}
  .exp-stars-sm{font-size:.75rem}
  .talk-label{font-size:.72rem}
  .talk-copy,.exp-rev-co{font-size:.72rem}

  /* Decorative orbs sized for a desktop canvas */
  .o1{width:340px;height:340px;right:-25%}
  .o2{width:220px;height:220px}

  /* Fixed blur overlays cost a full-screen composite every frame on mobile */
  .lens-blur-top,.lens-blur-bottom{backdrop-filter:none;-webkit-backdrop-filter:none;height:56px}
}

/* Respect the OS "reduce motion" setting */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-h .ln-i,.hero-eye,.hero-bot{opacity:1!important;transform:none!important}
  .rv,.cl-entrance,.cli-enter,.overlay .ov-content > *{opacity:1!important;transform:none!important}
  .overlay{border-radius:0!important;box-shadow:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE VERTICAL RHYTHM, added 2026-09-04
   One spacing scale for every section. Before this, section padding ran
   36 / 64 / 68 / 80 / 119px with no system, and each sticky section added a
   136px reveal margin on top of its own 119px padding, so consecutive
   content blocks sat 374px apart, roughly half a phone screen of nothing.
     section padding  72px
     heading > body   40px
     item gap         18px
     gutter           18px
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* Section padding - uniform top and bottom */
  .work,.about,.svcs,.process,.exp,.talk{padding-top:72px;padding-bottom:72px}
  .clients{padding:56px 0}
  .hiring{padding:56px 24px}
  .ft{padding:48px 18px 24px}
  .ov-sec{padding:72px 0}

  /* The sticky reveal gap. Sections stay sticky and still slide over one
     another, this only removes the empty hold between them. */
  section.sec-slide,.ov-slide{margin-bottom:34vh}
  section.exp.sec-slide{margin-bottom:34vh}

  /* Overlay pages get the same sticky stacking as the homepage.
     The older rule flattened them to min-height:auto/display:block, which
     left them sticky in name only. */
  .ov-slide{min-height:100svh;display:flex;flex-direction:column;justify-content:center}

  /* Heading block → content */
  .wk-head,.ab-grid,.svcs-head,.proc-head,.exp-head,.cl-head,.po-head{margin-bottom:40px}

  /* Item gaps */
  .svcs-grid,.wk-grid,.po-grid,.crew-photos-row,.talk-features{gap:18px}
  .cl-grid{gap:12px}
  .stats{gap:20px 10px;padding-top:32px}
  .st-n{font-size:1.7rem}.st-l{font-size:.68rem;line-height:1.35;max-width:9em;margin:0 auto}
  /* Why Choose Us must fit one phone screen (large viewport ~745px on iPhone) so it pins at 0 with air top and bottom */
  /* --ab-x grows only on screens taller than an iPhone (745px), so the section keeps
     fitting one screen there and opens up on taller phones and small tablets */
  .about{--ab-x:max(0px,calc((100svh - 745px) * .09));padding-top:calc(34px + var(--ab-x));padding-bottom:calc(34px + var(--ab-x))}
  .about .ab-grid{gap:calc(22px + var(--ab-x));margin-bottom:calc(25px + var(--ab-x))}
  .about .ab-h2{font-size:1.5rem}
  .about .ab-p{font-size:.86rem;line-height:1.5}
  .about .ab-p+.ab-p{margin-top:10px!important}
  .about .stats{padding-top:calc(22px + var(--ab-x))}
  .about .stats-seen-on{padding-top:22px;margin-top:22px;gap:12px}
  .ab-grid{gap:28px}

  /* Trailing rhythm - the last section before the footer shouldn't
     carry a full section's worth of padding into it */
  .talk{padding-bottom:56px}

  /* ── Tap targets missed in the first pass ──
     Footer nav is .ft-ul > li > a; these were rendering 80x15. */
  .ft-ul li a{display:inline-flex;align-items:center;min-height:44px}
  .ft-ul{margin-top:-8px}
  .ft-grid{gap:20px}
  .po-filter{min-height:44px}
  .co-card-link,.talk-form-legal a,.cp-legal a{display:inline-flex;align-items:center;min-height:36px}
  .btn-hiring,.btn-p{min-height:46px}
  nav .n-logo,.ov-page-nav .n-logo,.menu-ov-logo{padding:14px 0}
  .menu-ov-email{min-height:44px}
}

/* The scroll-driven exit animations translate content up to 120px sideways.
   That was invisible while body had overflow-x:hidden, which is also what was
   killing sticky. With sticky restored, those transforms became real horizontal
   scroll on a phone, so below desktop widths they exit vertically instead. */
@media(max-width:1024px){
  .exit-left,.exit-right{
    transform:translateY(calc(var(--exit-p,0) * -36px)) scale(calc(1 - var(--exit-p,0) * .04));
    opacity:calc(1 - var(--exit-p,0))
  }
  .exit-scatter-1,.exit-scatter-2,.exit-scatter-3,.exit-scatter-4{
    transform:translateY(calc(var(--exit-p,0) * -28px)) scale(calc(1 - var(--exit-p,0) * .08));
    opacity:calc(1 - var(--exit-p,0))
  }
}

/* Process cards step down the same way the services grid does */
@media(max-width:768px){.proc-sub{padding-top:0}}
.rv-d5{transition-delay:.5s}.rv-d6{transition-delay:.6s}.rv-d7{transition-delay:.7s}.rv-d8{transition-delay:.8s}

/* Process split: image on top, index beneath */
@media(max-width:900px){
  .proc-split{grid-template-columns:1fr;gap:26px;align-items:start}
  .proc-frame{aspect-ratio:auto;height:0;min-height:0;padding-top:75%;width:100%;align-self:start}
}
@media(max-width:768px){
  .proc-row{padding:15px 0}
  .proc-desc{font-size:.82rem;margin-top:10px}
  .proc-tags{margin-top:13px}
}

/* ═══════════════════════════════════════════════════════════════════
   CLIENT STRIP + RECENT PROJECTS, mobile polish
   The strip was a 2x3 block of small boxed marks with 56px of air above and
   below, sitting between two dark sections. It read as a gap, not a band, and
   scrolled by unnoticed. On phones it becomes one slow full-bleed marquee with
   no card chrome and larger marks, and the air around it is pulled in so the
   logos lead straight into the projects heading.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .clients{padding:38px 0 30px;overflow-x:clip}
  .clients .ctn{padding:0}
  .cl-head{padding:0 18px;margin-bottom:20px}

  /* .cl-entrance animates transform, which would fight the marquee - let the
     entrance fade only, and give transform to the animation. */
  .cl-grid.cl-entrance,.cl-grid.cl-entrance.v{transform:none;transition:opacity .9s var(--ease)}
  .cl-grid{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;
    animation:clMarquee 34s linear infinite;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .cl-clone{display:flex}
  .cl-card{flex:0 0 auto;background:none;border:none;border-radius:0;padding:0 18px;box-shadow:none}
  .cl-card:hover{background:none;border:none;box-shadow:none}
  .cl-logo{max-height:24px;max-width:110px;width:auto;opacity:.55}
  .cl-logo-dark{opacity:.5}
  @keyframes clMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* the strip now leads into the heading instead of floating away from it */
  .work{padding-top:64px}
  .wk-head{margin-bottom:26px}
}
/* a moving logo bar is exactly what reduced-motion is for - fall back to a
   swipeable row that still shows more than one screen of clients */
@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .cl-grid{animation:none;width:auto;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;padding:0 18px}
  .cl-card{scroll-snap-align:center}
  .cl-clone{display:none}
}

/* ═══ Mobile: card sections were hugging the 18px text gutter and running tall ═══ */
@media(max-width:768px){
  .wk-grid,.svcs-grid,.exp-grid{margin-left:6px;margin-right:6px}     /* 24px effective gutter */
  .wk-featured{min-height:250px}
  .wk-small{aspect-ratio:16/10}
  .svc-card{padding:28px 22px}
  .svc-icon{width:42px;height:42px;margin-bottom:18px}
  .svc-card-num{margin-bottom:12px}
  .svc-card-desc{margin-bottom:16px}
  .exp-card{padding:26px 22px}

  /* ═══ Footer: two columns instead of a 700px single stack ═══ */
  .ft{padding:44px 24px 20px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .ft-grid > div:first-child{grid-column:1 / -1}
  .ft-logo{height:26px;margin-bottom:12px}
  .ft-soc{margin-top:12px}
  .ft-title{margin-bottom:8px}
  .ft-ul{gap:0;margin-top:0}
  .ft-ul li a{min-height:38px;font-size:.82rem}
  .ft-bot{margin-top:24px;padding-top:14px;gap:4px}

  /* ═══ Client-page photo collages: no orphan cells ═══
     The 3-column desktop collage collapsed to 2 columns but kept its spans,
     so a "wide" item forced a new row and left an empty cell beside item 3. */
  .cli-bts-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-auto-flow:dense;gap:10px;margin-bottom:10px}
  .cli-bts-img,.cli-bts-img.bts-tall,.cli-bts-img.bts-wide{grid-row:span 1;grid-column:span 1;aspect-ratio:4/5}
  .cli-bts-img:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:16/10}
  .cli-bts-img img{width:100%;height:100%}
  .cli-stagger-pair{gap:10px}
  /* ═══ Editorial photo stack: keep the fan, give it room ═══
     At 300px tall the three cards sat on top of each other. The container now
     scales with width and the cards fan wider with less overlap. */
  .cli-ed-photos{min-height:0;aspect-ratio:1/1.02;margin:6px 0 0}
  .cli-ed-photos .ed-img.ed-1{width:62%;height:50%;top:0;right:0;transform:rotate(3deg)}
  .cli-ed-photos .ed-img.ed-2{width:60%;height:50%;bottom:0;left:0;transform:rotate(-4deg)}
  .cli-ed-photos .ed-img.ed-3{width:46%;height:40%;top:29%;left:27%;transform:rotate(1deg)}
  .cli-editorial,.cli-editorial.ed-flip{gap:18px}
  .cli-stagger{gap:36px}
}


/* ===== SERVICES: swipe deck on mobile =====
   One card per screen with the next one peeking, snap on swipe, dots beneath.
   Keeps the section to a single phone screen with real air around the card. */
.deck-nav{display:none}
@media(max-width:768px){
  .svcs{padding-top:56px;padding-bottom:56px}
  .svcs-head{margin-bottom:28px}
  .svcs-grid{display:flex;gap:12px;margin:0 -24px;padding:6px 24px 6px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:none}
  .svcs-grid::-webkit-scrollbar{display:none}
  /* the deck fills whatever height the section has left, so the cards run
     tall on a portrait screen instead of sitting as short boxes in empty space */
  .svcs-in{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .svcs-grid{flex:1 1 auto;align-items:stretch}
  .svc-card{flex:0 0 calc(100% - 40px);scroll-snap-align:start;padding:34px 26px 30px;display:flex;flex-direction:column;min-height:400px;
    transform:none!important;opacity:.55;transition:opacity .35s,border-color .35s}
  .svc-icon{width:48px;height:48px;margin-bottom:22px}
  .svc-card-name{font-size:1.15rem;margin-bottom:14px}
  .svc-card-desc{font-size:.86rem;line-height:1.65;color:rgba(255,255,255,.55)}
  .svc-card-tags{margin-top:auto;padding-top:22px}
  .svc-card.is-on{opacity:1;border-color:rgba(203,138,70,.28)}
  .svc-card.is-on::before{transform:scaleX(1)}
  .deck-nav{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding:0 2px}
  .deck-dots{display:flex;gap:6px}
  .deck-dot{appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;cursor:pointer;width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.16);transition:background .3s,width .3s}
  .deck-dot.is-on{background:var(--orange);width:28px}
  .deck-swipe{font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-d);display:flex;align-items:center;gap:6px}
  .deck-swipe::after{content:'';width:16px;height:1px;background:currentColor;opacity:.6}
}


/* ===== HIRING + FOOTER: mobile layout =====
   Hiring becomes a bordered card with a full-width primary CTA; the footer puts
   logo and socials on one row, nav links in two columns, and gives the email
   real weight instead of a half-empty second column. */
@media(max-width:768px){
  .hiring{padding:32px 24px}
  .hiring-inner{display:block;text-align:left;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:20px 20px 18px;position:relative;overflow:hidden}
  .hiring-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,var(--orange),rgba(203,138,70,0))}
  .hiring-left{display:block}
  .hiring-badge{display:inline-block;margin-bottom:12px;animation:none;font-size:.56rem;padding:4px 10px;letter-spacing:.14em}
  .hiring-text h3{font-size:1.1rem;line-height:1.05;letter-spacing:0;margin-bottom:6px}
  .hiring-text p{font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.5);max-width:36ch}
  .btn-hiring{display:inline-flex;width:auto;align-items:center;gap:8px;margin-top:16px;min-height:40px;padding:0 18px;font-size:.62rem;
    background:none;color:var(--orange-l);border:1px solid rgba(203,138,70,.4)}
  .btn-hiring:hover{border-color:var(--orange);color:var(--orange-l)}

  .ft{padding:40px 24px 22px}
  .ft-grid{grid-template-columns:1fr;gap:28px}
  .ft-grid > div:first-child{grid-column:auto;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px}
  .ft-logo{grid-column:1;grid-row:1;height:24px;margin:0}
  .ft-soc{grid-column:2;grid-row:1;margin:0;gap:8px}
  .ft-soc a{width:40px;height:40px}
  .ft-tag{grid-column:1 / -1;margin-top:12px;font-size:.78rem}
  .ft-title{margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.05)}
  .ft-grid > div:nth-child(2) .ft-ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .ft-ul li a{min-height:40px;font-size:.86rem;color:rgba(255,255,255,.62)}
  .ft-grid > div:nth-child(3) .ft-ul li:first-child a{font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:-.01em;min-height:44px}
  .ft-grid > div:nth-child(3) .ft-ul li:last-child a{min-height:34px}
  .ft-bot{margin-top:26px;padding-top:16px;gap:4px}
}


/* ===== RECENT PROJECTS: swipe deck on mobile (same pattern as Services) ===== */
@media(max-width:768px){
  .work{padding-top:48px;padding-bottom:48px}
  .wk-grid{display:flex;gap:12px;margin:0 -24px;padding:6px 24px 6px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
  .wk-grid::-webkit-scrollbar{display:none}
  /* the deck takes whatever height the section has left, so the section
     never centres a short deck inside a screen of dead space */
  .wk-grid{flex:1 1 auto;align-items:stretch}
  .wk-card,.wk-card.wk-featured,.wk-card.wk-small{flex:0 0 calc(100% - 40px);scroll-snap-align:start;aspect-ratio:auto;min-height:360px;height:auto;grid-row:auto;
    transform:none!important;box-shadow:none;opacity:.55;transition:opacity .35s}
  .wk-card.is-on{opacity:1}
  .wk-card.is-on::after{border-color:rgba(203,138,70,.35)}
  .wk-card-info{padding:18px 20px}
  .wk-card-row{flex-direction:column;align-items:flex-start;gap:10px}
  .wk-card-name{font-size:.9rem;line-height:1.15}
  .deck-nav-work{margin-top:18px}
  .wk-cta{margin-top:26px}
}


/* Overlays that keep the main fixed nav on top (their own .ov-nav is hidden)
   need to start below it on mobile, or the page title sits under the header. */
@media(max-width:768px){
  #projectsOverlay .ov-content,#companiesOverlay .ov-content,#contactOverlay .ov-content{padding-top:96px}
  .po-head{margin-bottom:28px;padding-bottom:22px}
}


/* ===== HOME REVEAL: cascade =====
   A revealed block's pieces settle in one after another (label, headline,
   sub copy), and card grids fan in card by card, so a section arriving on
   screen has a little life to it instead of fading in as one slab. */
.rv .stag > *,.rv.stag > *{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
.rv.v .stag > *,.rv.v.stag > *{opacity:1;transform:none}
.rv.v .stag > :nth-child(2),.rv.v.stag > :nth-child(2){transition-delay:.09s}
.rv.v .stag > :nth-child(3),.rv.v.stag > :nth-child(3){transition-delay:.18s}
.rv.v .stag > :nth-child(4),.rv.v.stag > :nth-child(4){transition-delay:.27s}
.rv.v .stag > :nth-child(n+5),.rv.v.stag > :nth-child(n+5){transition-delay:.36s}
/* nested stag (head wrapper + inner column): the inner column's own children carry the cascade */
.rv.stag > .stag{opacity:1;transform:none;transition:none}
/* headline gets a hair more travel than the label around it */
.rv .stag > h2,.rv.stag > h2{transform:translateY(30px)}
.rv.v .stag > h2,.rv.v.stag > h2{transform:none}
/* card grids: cards fan in with a small per-card delay (desktop and tablet;
   the phone decks manage their own opacity) */
@media(min-width:769px){
  .svcs-grid.rv .svc-card{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)}
  .svcs-grid.rv.v .svc-card{opacity:1;transform:none}
  .svcs-grid.rv.v .svc-card:nth-child(2){transition-delay:.12s}
  .svcs-grid.rv.v .svc-card:nth-child(3){transition-delay:.24s}
  .svcs-grid.rv.v .svc-card:hover{transform:translateY(-4px)}
}
/* process rows step in, then the frame fades in beside them */
.proc-split.rv .proc-frame{opacity:0;transform:scale(.97);transition:opacity 1.1s cubic-bezier(.19,1,.22,1) .15s,transform 1.1s cubic-bezier(.19,1,.22,1) .15s}
.proc-split.rv.v .proc-frame{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv .stag > *,.rv.stag > *,.svcs-grid.rv .svc-card,.proc-split.rv .proc-frame{opacity:1!important;transform:none!important;transition:none!important}
}


/* ===== TRUSTED BY inside Why Choose Us (replaces As Seen On) =====
   Same logo strip, restyled for the light section: no card chrome, marks
   knocked to charcoal. Desktop is one centred row; the phone keeps the marquee. */
.stats-trusted{gap:40px}
.cl-wrap{width:100%;overflow-x:clip}
/* logos sit on the light section as quiet charcoal marks on whisper-light tiles.
   grayscale + brightness keeps the tones inside the illustrated marks (Vikings,
   Wild) instead of flattening them to a silhouette. */
.about .cl-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:10px;width:100%}
.about .cl-card{flex:0 0 auto;min-width:150px;min-height:80px;background:rgba(20,20,20,.035);border:none;border-radius:12px;padding:18px 26px;box-shadow:0 0 0 rgba(20,20,20,0);
  transform-origin:center;will-change:transform;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s var(--ease),background .35s var(--ease)}
/* hover: the tile itself lifts, grows a touch and gives a little wiggle; the mark stays put */
.about .cl-card:hover{background:rgba(20,20,20,.05);border:none;transform:scale(1.06) rotate(-1.2deg);box-shadow:0 14px 28px rgba(20,20,20,.12),0 4px 10px rgba(20,20,20,.06);animation:clWiggle .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes clWiggle{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.07) rotate(1.6deg)}70%{transform:scale(1.06) rotate(-1.4deg)}100%{transform:scale(1.06) rotate(-1.2deg)}}
.about .cl-logo{max-height:34px;max-width:118px;width:auto;height:auto;opacity:.55;filter:grayscale(1) brightness(.42) contrast(1.15)}
.about .cl-logo-dark{filter:grayscale(1) brightness(.55) contrast(1.1);opacity:.55}
@media(prefers-reduced-motion:reduce){.about .cl-card:hover{animation:none;transform:none}}
@media(max-width:768px){
  /* the fade lives on the clipping wrapper, not the moving track, so it sits at
     the screen edges and the marks dissolve before they reach the outer stats */
  .about .cl-wrap{margin:0 -24px;width:calc(100% + 48px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
  .about .cl-grid{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;animation:clMarquee 34s linear infinite;-webkit-mask-image:none;mask-image:none}
  /* margin, not gap, so the -50% marquee loop lands exactly on one set */
  .about .cl-grid{gap:0;padding:0}
  .about .cl-clone{gap:0}
  .about .cl-card{margin-right:8px;min-width:112px;min-height:54px;padding:10px 16px;border-radius:9px;display:flex;align-items:center;justify-content:center}
  .about .cl-logo{max-height:24px;max-width:92px;opacity:.55}
  .about .cl-logo-dark{opacity:.55}
  .about .stats-trusted{padding-top:calc(18px + var(--ab-x));margin-top:calc(18px + var(--ab-x));gap:calc(18px + var(--ab-x))}
}
@media(prefers-reduced-motion:reduce){.about .cl-grid{animation:none;width:auto;overflow-x:auto;padding:0 18px}.about .cl-clone{display:none}}


/* ===== Client pages, Process, O-Line stats: mobile fixes (2026-09-29) ===== */
@media(max-width:768px){
  /* 1) client page: the sheet's own top padding plus the content padding stacked to
        ~150px under the header. One padding, sized to clear the fixed nav. */
  .client-ov{padding-top:0}
  .client-ov .ov-content{padding-top:88px}
  /* 2) series stats: four across was cramped; two by two with room to breathe */
  .cli-stats-card{padding:8px 20px;margin-bottom:40px}
  .cli-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .cli-stat{padding:18px 6px}
  .cli-stat:nth-child(1),.cli-stat:nth-child(5){border-right:1px solid rgba(203,138,70,.16)}
  .cli-stat:nth-child(n+5){border-top:1px solid rgba(203,138,70,.16)}
  .cli-stat-div{display:none}
  .cli-stat-num{font-size:1.9rem}
  .cli-stat-label{font-size:.6rem;letter-spacing:.12em}
  /* 3) Process fits one phone screen: thinner frame, no tag pills, tighter rows */
  .proc-frame{padding-top:56.25%}
  .proc-split{gap:18px}
  .proc-row{padding:12px 0}
  .proc-desc{font-size:.8rem;line-height:1.6;margin-top:8px}
  .proc-tags{display:none}
  .process{padding-top:48px;padding-bottom:48px}
  .process .proc-head{margin-bottom:22px}
}

/* phone hero: keep every headline line on one row and the eyebrow on one line */
@media(max-width:480px){
  .hero-h{font-size:2.15rem}
  .hero-eye{font-size:.56rem;letter-spacing:.16em;gap:10px;white-space:nowrap}
  .hero-eye::before{width:18px;flex:0 0 18px}
}


/* ===== HERO REEL =====
   Background video sits under the gradient/orbs layer. It is hidden until JS
   confirms assets/reel.mp4 exists on the server, so the hero works with or
   without the file. The scrim keeps the headline readable over footage. */
.hero-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;z-index:1;pointer-events:none;
  filter:saturate(.85) contrast(1.05)}
.hero-reel.is-live{opacity:1}
.hero-reel-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
  background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 45%,rgba(10,10,10,.35) 100%)}
.hero-reel.is-live + .hero-reel-scrim{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-reel{display:none}}
@media(max-width:768px){
  .hero-h{line-height:.96;margin-bottom:24px}
  .hero-eye{margin-bottom:18px}
}


/* ===== CREW PAGE: landing rebuild =====
   One left-aligned column: eyebrow, three-beat statement headline, intro,
   then a 21:9 photo band. The old centred paragraph and the duplicated
   'plug-in creative team' copy are gone. */
.crew-about-sec{padding-top:120px;padding-bottom:0}
.crew-lead{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:56px}
.crew-lead .sl{grid-column:1 / -1;margin-bottom:0}
.crew-about-h1{margin-bottom:0;line-height:.9;font-size:clamp(2.4rem,6vw,5rem)}
/* first beat smaller on one line, the orange payoff big on two */
.crew-h1-lead{display:block;font-size:.58em;line-height:1.05;margin-bottom:.12em;letter-spacing:-.01em}
.crew-lead .crew-about-desc{max-width:520px;padding-bottom:10px}
.crew-hero-photo{aspect-ratio:21/9;max-height:none}
.crew-brand-sec{padding-top:88px;padding-bottom:100px}
.crew-how-head{margin-bottom:44px}
.crew-how-head .crew-section-title{margin-bottom:0}
.crew-how-head .mt{color:var(--muted-l)}
.crew-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:0}
/* the three points ride on the photos: one image-led row instead of a thin text row over a photo row */
.crew-how{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:#111;border:none;padding:0}
.crew-how img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);filter:saturate(.9)}
.crew-how:hover img{transform:scale(1.04)}
.crew-how::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.9) 0%,rgba(8,8,8,.45) 42%,rgba(8,8,8,0) 70%);pointer-events:none}
.crew-how-txt{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 28px;z-index:1}
.crew-how-num{font-size:.625rem;font-weight:700;letter-spacing:.15em;color:var(--orange);margin-bottom:12px}
.crew-how-title{font-family:var(--display);font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-bottom:8px}
.crew-how-copy{font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.72);max-width:30ch}
.crew-how-cta{margin-top:40px}
/* press flows after the team card, so no 100vh slide, no 45vh stack margin,
   and the hiring block lands right under the table */
/* press is a full sticky slide again; margin-bottom:0 means it stays pinned
   exactly as long as the footer needs to ride up over it, no gap after */
.crew-press-sec{margin-bottom:0!important}
.crew-press-sec .crew-client-grid{margin-bottom:64px}
#crewOverlay > .ov-sec-dark:last-of-type{position:relative;z-index:40!important}
/* retainer slide: full dark section, open two-column layout, light text weights */
.crew-ret-sec{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.crew-ret{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,7vw,120px);align-items:start;position:relative}
.crew-ret::before{content:'';position:absolute;left:0;top:0;width:44px;height:2px;background:var(--orange)}
.crew-ret-left{padding-top:22px}
.crew-ret-h2{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4.6vw,4rem);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin-top:16px}
.crew-ret-right{padding-top:26px;max-width:640px}
.crew-ret-lead{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.35;color:#fff;margin-bottom:26px;letter-spacing:-.005em}
.crew-ret-body{font-size:.92rem;line-height:1.75;color:rgba(255,255,255,.58);margin-bottom:18px;font-weight:400}
.crew-ret-facts{list-style:none;display:flex;flex-wrap:nowrap;gap:8px;margin:10px 0 34px;padding:0}
.crew-ret-facts li{white-space:nowrap}
.crew-ret-facts li{font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:7px 13px}
@media(max-width:1024px){.crew-ret{grid-template-columns:1fr;gap:28px}.crew-ret-right{padding-top:0}}
@media(max-width:768px){.crew-ret-facts{flex-wrap:wrap}.crew-ret-sec{min-height:auto;padding:56px 0}.crew-ret-h2{font-size:2.1rem}.crew-ret-lead{font-size:1.15rem;margin-bottom:18px}.crew-ret-body{font-size:.88rem}.crew-ret-facts{margin-bottom:26px}}
@media(max-width:1024px){
  .crew-lead{grid-template-columns:1fr;gap:24px;align-items:start}
  .crew-how-grid{grid-template-columns:1fr;gap:12px}
  .crew-how{aspect-ratio:16/10}
}
@media(max-width:768px){
  .crew-about-sec{padding-top:96px}
  .crew-lead{margin-bottom:28px}
  .crew-about-h1{font-size:clamp(2rem,9vw,3.2rem)}
  .crew-hero-photo{aspect-ratio:4/3}
  .crew-brand-sec{padding-top:56px;padding-bottom:64px}
  .crew-how-head{margin-bottom:26px}
  .crew-how-grid{gap:10px}
  .crew-how{aspect-ratio:4/3}
  .crew-how-txt{padding:18px 18px 20px}
  .crew-how-cta{margin-top:26px}
  .crew-press-sec .crew-client-grid{margin-bottom:40px}
}

/* pin wrapper: sticky child holds for the padding, then leaves with the page */
.ov-pin-wrap{position:relative;z-index:30;background:var(--light)}
.ov-pin-wrap > .ov-slide{z-index:1}
.ov-hold{height:38vh}
@media(max-width:768px){.ov-hold{height:26vh}}

/* crew landing + how we work are sticky slides too; fit each to one screen */
.crew-about-sec.ov-slide{padding-top:110px;padding-bottom:60px;justify-content:flex-start}
.crew-about-sec .crew-lead{margin-bottom:34px}
.crew-about-sec .crew-hero-photo{aspect-ratio:auto;flex:1 1 auto;min-height:0;max-height:52vh}
.crew-brand-sec.ov-slide{padding-top:100px;padding-bottom:70px}
.crew-how-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px 40px;margin-bottom:34px}
.crew-how-head .sl{grid-column:1 / -1}
.crew-how-sub{font-size:.82rem;line-height:1.6;color:var(--muted);max-width:320px;padding-bottom:6px}
.crew-how{aspect-ratio:auto;height:clamp(300px,46vh,460px)}
@media(max-width:1024px){.crew-how-head{grid-template-columns:1fr;gap:12px}.crew-how{height:auto;aspect-ratio:16/10}}
@media(max-width:768px){
  .crew-about-sec.ov-slide,.crew-brand-sec.ov-slide{min-height:auto;display:block;padding-top:96px}
  .crew-about-sec .crew-hero-photo{aspect-ratio:4/3;max-height:none}
  .crew-how{aspect-ratio:4/3}
}


/* ===== CREW SCENE: About -> How We Work on one pinned screen ===== */
.crew-scene-wrap{position:relative;z-index:2;height:calc(100vh + 170vh + 145vh)} /* pin + scrub travel + hold while the next slide covers it (padding does not keep a sticky child pinned, height does) */
.crew-scene{margin-bottom:0!important;min-height:100vh;height:100vh;padding:0;display:block;overflow:hidden}
.crew-scene-in{position:relative;height:100%;padding-top:110px;padding-bottom:48px}
.crew-scene-layer{position:absolute;left:36px;right:36px;top:110px;bottom:48px;display:flex;flex-direction:column;justify-content:flex-start}
.crew-scene-about .crew-lead{margin-bottom:30px}
.crew-scene-about .crew-hero-photo{flex:1 1 auto;min-height:0;max-height:none;aspect-ratio:auto}
.crew-scene-how{opacity:0;pointer-events:none}
.crew-scene-how .crew-how-head{margin-bottom:28px}
.crew-scene-how .crew-how-grid{flex:1 1 auto;min-height:0}
.crew-scene-how .crew-how{height:auto;aspect-ratio:auto;min-height:0}
.crew-scene-layer .crew-lead,.crew-scene-layer .crew-hero-photo,.crew-scene-layer .crew-how-head,.crew-scene-layer .crew-how{will-change:transform,opacity}
/* each animated piece gets its transform/opacity from JS; no transitions so it tracks the scroll 1:1 */
.crew-scene .sl,.crew-scene .crew-about-h1,.crew-scene .crew-about-desc,.crew-scene .crew-hero-photo,
.crew-scene .crew-section-title,.crew-scene .crew-how-sub,.crew-scene .crew-how{transition:none}
@media(max-width:1024px){.crew-scene-layer{left:18px;right:18px}}
@media(prefers-reduced-motion:reduce){
  /* reduced motion: two plain stacked sections, no scene */
  .crew-scene-wrap{height:auto;padding-bottom:0}
  .crew-scene{height:auto;min-height:auto;overflow:visible;position:relative;padding:96px 0 48px}
  .crew-scene-in{height:auto;padding:0}
  .crew-scene-layer{position:static;display:block;opacity:1!important;transform:none!important;pointer-events:auto}
  .crew-scene-layer > *{opacity:1!important;transform:none!important}
  .crew-scene-about .crew-hero-photo{aspect-ratio:4/3;margin-bottom:56px}
  .crew-scene-how .crew-how{aspect-ratio:4/3}
}

/* about blurb set like the retainer copy: display statement, then muted body */
.crew-about-lead{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.35;color:var(--text);margin-bottom:16px;letter-spacing:-.005em}
.crew-about-body{font-size:.9rem;line-height:1.7;color:var(--muted)}
/* first slide on the page: no card edge or glow under the page nav */
.crew-scene.ov-slide{border-radius:0;box-shadow:none}
.crew-scene .sec-glow,.crew-scene .sec-glow-line{display:none}
.crew-scene-in{padding-top:118px}
.crew-scene-layer{top:118px}

/* headline and blurb start on the same line */
.crew-scene .crew-lead{align-items:start}
.crew-scene .crew-lead .crew-about-desc{padding-top:.2em;padding-bottom:0}

/* the scene is the only child of its wrapper, so the :last-child full-bleed rule was hitting it */
.crew-scene .ctn{max-width:1240px!important;width:100%;padding:0 36px;display:block}
.crew-scene-about .crew-hero-photo{flex:0 1 auto;max-height:50vh;aspect-ratio:21/9}
.crew-scene-how .crew-how-grid{flex:0 1 auto;height:min(54vh,520px)}

/* retainer slide starts inside the scene wrapper's hold, so it rides up over How We Work */
.crew-ret-sec{margin-top:-145vh}
@media(prefers-reduced-motion:reduce){.crew-ret-sec{margin-top:0}}

/* centre each layer's content in the space below the nav */
.crew-scene-layer{justify-content:center;top:90px;bottom:40px}
.crew-scene-in{padding-top:90px;padding-bottom:40px}

/* optical centre: the sticky page nav sits above the scene at the top of the page */
.crew-scene-layer{top:64px;bottom:104px}
.crew-scene-in{padding-top:64px;padding-bottom:104px}

.crew-scene-layer{top:44px;bottom:112px}
.crew-scene-in{padding-top:44px;padding-bottom:112px}
.crew-scene-about .crew-hero-photo{max-height:44vh}
.crew-scene-how .crew-how-grid{height:min(50vh,480px)}

/* the scene starts already pinned: tuck it under the page nav so the first 60px of
   scroll do not shove the About content up before the pin takes hold */
.crew-scene-wrap{margin-top:-61px}
.crew-scene-layer{top:100px;bottom:64px}
.crew-scene-in{padding-top:100px;padding-bottom:64px}
@media(prefers-reduced-motion:reduce){.crew-scene-wrap{margin-top:0}}


/* ===== HOME: PULL FOCUS (hero -> Recent Projects) =====
   The hero stays pinned. Recent Projects is pinned on top of it from the start
   with a transparent background, so the footage shows through both. Scroll
   through the track drives: hero copy out, footage racks out of focus and
   dims, projects heading and cards come up sharp out of the blur. The footage
   keeps playing under the grid at low level until the next section covers it. */
.hero-footage{position:absolute;inset:0;z-index:1;transform-origin:center;will-change:transform}
.hero-footage .hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05);opacity:.9}
.hero-reel.is-live ~ .hero-still,.hero-footage .hero-reel.is-live + .hero-still{opacity:0}
.hero-footage .hero-reel{z-index:1}
.hero-footage .hero-reel.is-live{z-index:2}
/* the out-of-focus twin: blurred once, statically; only its opacity animates */
.hero-blur{position:absolute;inset:-40px;z-index:2;opacity:0;will-change:opacity;overflow:hidden}
.hero-blur .hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) saturate(.7) brightness(.8);transform:scale(1.04)}
.hero-reel-scrim{z-index:3;opacity:1}
.hero-focus-scrim{position:absolute;inset:0;z-index:4;background:#0A0A0A;opacity:0;will-change:opacity;pointer-events:none}
.hero-bg-inner{z-index:0;position:relative}
.hero-c{z-index:5}
.hx{will-change:transform,opacity}
.home-scene-track{height:240vh;pointer-events:none}
/* Recent Projects rides on top of the pinned hero */
.work.sec-slide{margin-top:-100vh;background:transparent!important}
.work .wk-head,.work .wk-card,.work .wk-cta{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){
  .home-scene-track{display:none}
  .work.sec-slide{margin-top:0;background:var(--dark)!important}
  .hero-blur,.hero-focus-scrim{display:none}
  .hx,.work .wk-head,.work .wk-card,.work .wk-cta{opacity:1!important;transform:none!important}
}

/* desktop: Recent Projects is exactly one screen so it pins at the top on top of the footage */
@media(min-width:769px){
  .work.sec-slide{height:100vh;min-height:100vh;padding:92px 36px 52px;justify-content:center}
  .work .wk-head{margin-bottom:28px}
  .work .wk-grid{flex:0 1 auto;min-height:0;height:min(62vh,640px);grid-template-rows:1fr 1fr}
  .work .wk-card{min-height:0;height:100%}
  .work .wk-small{aspect-ratio:auto}
  .work .wk-featured{min-height:0}
  .work .wk-cta{margin-top:30px}
}

/* home scene: land on clean footage; copy is brought in by scroll (or the auto focus-in) */
@media(min-width:769px) and (prefers-reduced-motion:no-preference){
  .hx{opacity:0;will-change:transform,opacity,filter}
  .hero-footage{overflow:hidden;will-change:transform,opacity,border-radius}
  .hero-blur{display:none}
}


/* ===== HOME LANDING: cold open, grain, viewfinder, depth ===== */
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-drift{position:absolute;inset:0}
.hero-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
.hero-grain{position:absolute;inset:-8%;z-index:4;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px}
/* letterbox bars: closed on load, open once the loader is gone */
.hero-bars{position:absolute;inset:0;z-index:6;pointer-events:none}
.hero-bars i{position:absolute;left:0;right:0;height:22vh;background:#050505;transform-origin:top;display:block}
.hero-bars .bar-t{top:0;transform-origin:top}
.hero-bars .bar-b{bottom:0;transform-origin:bottom}
/* viewfinder chrome: only during the frame close */
.hero-vf{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.62rem;letter-spacing:.14em;color:rgba(255,255,255,.85);text-transform:uppercase}
.vf-c{position:absolute;width:30px;height:30px;border:1.5px solid rgba(255,255,255,.85)}
.vf-tl{top:24px;left:24px;border-right:0;border-bottom:0}
.vf-tr{top:24px;right:24px;border-left:0;border-bottom:0}
.vf-bl{bottom:24px;left:24px;border-right:0;border-top:0}
.vf-br{bottom:24px;right:24px;border-left:0;border-top:0}
.vf-tag{position:absolute;white-space:nowrap}
.vf-tag-tl{top:30px;left:70px}
.vf-tag-tr{top:30px;right:70px;display:flex;align-items:center;gap:8px}
.vf-tag-bl{bottom:30px;left:70px}
.vf-tag-br{bottom:30px;right:70px}
.vf-tc{font-weight:600;letter-spacing:.1em}
.vf-rec{width:8px;height:8px;border-radius:50%;background:#E5483F;box-shadow:0 0 10px rgba(229,72,63,.9);animation:vfBlink 1s steps(1) infinite}
@keyframes vfBlink{50%{opacity:.15}}
@media(min-width:769px) and (prefers-reduced-motion:no-preference){
  .hero-drift{transform:scale(1.18);animation:heroSettle 2.8s cubic-bezier(.16,1,.3,1) forwards,heroDrift 16s ease-in-out 2.8s infinite alternate}
  @keyframes heroSettle{to{transform:scale(1.04)}}
  @keyframes heroDrift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.09) translate(-1.2%,.8%)}}
  .hero-grain{animation:grain .5s steps(4) infinite}
  @keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(3%,2%)}}
  .hero-bars i{transform:scaleY(1);transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
  body.wcs-open .hero-bars i{transform:scaleY(0)}
}
@media(max-width:768px),(prefers-reduced-motion:reduce){.hero-bars,.hero-vf,.hero-grain{display:none}}

/* stage darkens under the frame, not over it, so the viewfinder chrome stays crisp */
.hero-focus-scrim{z-index:1}
.hero-footage{z-index:2}
.hero-blur{z-index:2}


/* ===== HOME LANDING: inset frame that grows to full bleed on scroll =====
   The reel lands sitting in a frame on the black stage (62% of the viewport),
   with the slate tags and a scroll cue under it. Scroll grows it out to full
   screen while the copy focuses in. Desktop only; mobile keeps the plain hero. */
.hero-land{position:absolute;left:0;right:0;top:var(--land-t,calc(81% + 18px));z-index:5;pointer-events:none;opacity:0;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.62rem;letter-spacing:.14em;color:rgba(255,255,255,.5);text-transform:uppercase;transition:opacity 1.2s ease .7s;display:none}
.hero-land .hl{position:absolute;top:0;white-space:nowrap}
.hero-land .hl-l{left:var(--land-l,19%)}
.hero-land .hl-r{right:var(--land-l,19%)}
.hero-land .hl-c{left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;letter-spacing:.2em}
.hero-land .hero-sc-line{display:block;width:1px;height:34px;background:linear-gradient(to bottom,rgba(255,255,255,.55),transparent)}
.hero-land .vf-tc{font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.7)}
@media(min-width:769px) and (prefers-reduced-motion:no-preference){
  .hero-land{display:block}
  body.wcs-open .hero-land{opacity:1}
  .hero-footage{transform:scale(.62);border-radius:6px}   /* landing state before the scene script takes over */
}


/* ===== HOW WE WORK: one card open at a time =====
   Desktop: the three cards sit in a row; the open one is wide and carries the
   title and copy, the others narrow down to the photo, the number and a plus.
   Hover or click opens a card. Tablet and phone keep the stacked cards. */
.crew-how .crew-how-num{position:absolute;top:24px;left:26px;z-index:2;margin:0}
.crew-how-copy-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .7s cubic-bezier(.19,1,.22,1),opacity .45s ease}
.crew-how-copy-in{min-height:0;overflow:hidden}
.crew-how-plus{display:none}
.crew-how:focus{outline:none}
.crew-how:focus-visible{box-shadow:0 0 0 2px var(--orange)}
@media(min-width:1025px){
  .crew-how-grid,.crew-scene-how .crew-how-grid{display:flex;gap:14px}
  .crew-how{flex:1 1 0;min-width:0;cursor:pointer;transition:flex .85s cubic-bezier(.19,1,.22,1)}
  .crew-how.is-open{flex:2.4 1 0;cursor:default}
  .crew-how:not(.is-open) .crew-how-copy-wrap{grid-template-rows:0fr;opacity:0}
  .crew-how:not(.is-open) img{filter:saturate(.6) brightness(.75)}
  .crew-how-plus{display:block;position:absolute;left:26px;bottom:28px;width:36px;height:36px;z-index:2;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease,background .3s}
  .crew-how-plus::before,.crew-how-plus::after{content:'';position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
  .crew-how-plus::before{width:14px;height:1.5px}
  .crew-how-plus::after{width:1.5px;height:14px}
  .crew-how:not(.is-open) .crew-how-plus{opacity:1;transform:none}
  .crew-how:not(.is-open):hover .crew-how-plus{background:rgba(255,255,255,.2)}
  .crew-how-copy{max-width:36ch}
}
@media(max-width:1024px){.crew-how-txt{padding-top:60px}}

/* ===== CREW PAGE CHROME: hairlines at the content edges and a scroll dial =====
   Sits above the crew sheet in the viewport, blended so it reads on the light
   and the dark slides alike. The dial is a tape of ticks that runs past a fixed
   marker as the page scrolls; the numbers mark where each section starts and
   scroll there when clicked. Desktop only. */
.crew-chrome{position:fixed;inset:0;z-index:351;pointer-events:none;opacity:0;transition:opacity .7s ease;mix-blend-mode:difference;color:#fff}
.crew-chrome.on{opacity:1}
.cc-line{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.11)}
.cc-line-l{left:max(36px,calc((100vw - 1240px) / 2 + 36px))}
.cc-line-r{right:max(36px,calc((100vw - 1240px) / 2 + 36px))}
.cc-line::before,.cc-line::after{content:'';position:absolute;left:-2px;width:5px;height:5px;background:rgba(255,255,255,.55)}
.cc-line::before{top:84px}
.cc-line::after{bottom:26px}
.cc-dial{position:absolute;right:12px;top:50%;width:52px;height:320px;transform:translateY(-50%);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 76%,transparent)}
.cc-tape{position:absolute;left:0;right:0;top:50%;height:1500px;will-change:transform;
  background:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.48) 0 1px,transparent 1px 12px) right top / 7px 100% no-repeat,
    repeating-linear-gradient(to bottom,rgba(255,255,255,.85) 0 1px,transparent 1px 60px) right top / 14px 100% no-repeat}
.cc-lab{position:absolute;right:22px;transform:translateY(-50%);font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.6rem;letter-spacing:.1em;color:rgba(255,255,255,.9);pointer-events:auto;cursor:pointer;padding:4px 2px;line-height:1}
.cc-lab:hover{color:#fff}
.cc-mark{position:absolute;right:0;top:50%;width:22px;height:2px;margin-top:-1px;background:#fff;display:block}
@media(max-width:1024px),(prefers-reduced-motion:reduce){.crew-chrome{display:none}}


/* ===== HOME: projects layer is pinned over the hero from the first pixel =====
   The scene track now sits after Recent Projects, so the section never slides
   up into the frame: it is already there, transparent, and only its content
   settles in once the frame has closed. The section's own backdrop lives on
   ::after (that was the opaque slab with the hairline), so clear that too. */
section.work{z-index:2}
@media(min-width:769px) and (prefers-reduced-motion:no-preference){
  .work.sec-slide::after{background:transparent}
  section.work.sec-slide{margin-bottom:0}
  .home-scene-track{margin-bottom:45vh}   /* the hold the section's own margin used to give before About slides in */
  section.work .sec-glow-line{display:none}
}
.hero-vf{display:none}


/* landing frame: orange accents. Hairline on the frame edge, reel name and timecode in orange */
.hero-land::before{content:'';position:absolute;left:var(--land-l,19%);right:var(--land-l,19%);bottom:18px;height:var(--land-h,62vh);border:1px solid rgba(203,138,70,.5);border-radius:6px;box-shadow:0 0 0 1px rgba(203,138,70,.08),0 0 40px rgba(203,138,70,.08);pointer-events:none}
.hero-land .hl-name{font-weight:600;color:var(--orange)}
.hero-land .vf-tc{color:var(--orange)}
.hero-land .hero-sc-line{background:linear-gradient(to bottom,rgba(203,138,70,.75),transparent)}


/* ===== PAGE CHROME v2: home + crew. Lines sit outside the content, plus a top and bottom rule =====
   Landing reel: the frame goes dimmed orange while the reel is on screen. */
.cc-line-l{left:max(20px,calc((100vw - 1240px) / 2 - 12px))}
.cc-line-r{right:max(20px,calc((100vw - 1240px) / 2 - 12px))}
.cc-line::before{top:82px}
.cc-line::after{bottom:24px}
.cc-hline{position:absolute;left:max(20px,calc((100vw - 1240px) / 2 - 12px));right:max(20px,calc((100vw - 1240px) / 2 - 12px));height:1px;background:rgba(255,255,255,.11)}
.cc-hline-t{top:84px}
.cc-hline-b{bottom:26px}
.cc-line,.cc-hline,.cc-line::before,.cc-line::after{transition:background-color .8s ease}
.crew-chrome.land .cc-line,.crew-chrome.land .cc-hline{background:rgba(203,138,70,.3)}
.crew-chrome.land .cc-line::before,.crew-chrome.land .cc-line::after{background:rgba(203,138,70,.75)}
.crew-chrome.land .cc-tape{filter:sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.95)}
.crew-chrome .cc-tape{transition:filter .8s ease}
@media(max-width:1300px){.cc-line-l,.cc-line-r,.cc-hline{display:none}}   /* no room for a frame outside the content on narrower desktops */


/* ===== HOW WE WORK cards: smoother open, glass text panel, round plus ===== */
@media(min-width:1025px){
  .crew-how{transition:flex-grow 1.1s cubic-bezier(.22,.61,.36,1);contain:layout paint;transform:translateZ(0)}
  .crew-how img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1),filter 1.1s ease}
  .crew-how:hover img{transform:scale(1.03)}
  .crew-how:not(.is-open) img{filter:saturate(.6) brightness(.72)}
  .crew-how.is-open img{filter:saturate(.95) brightness(.82)}       /* a touch dimmer under the text */
  .crew-how::after{transition:opacity .9s ease}
  .crew-how.is-open::after{opacity:.8}
  /* the text sits on a glass panel that fades in with the card */
  .crew-how-txt{padding:34px 30px 30px;background:linear-gradient(to top,rgba(10,10,10,.62),rgba(10,10,10,.34) 70%,rgba(10,10,10,0));backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);-webkit-mask-image:linear-gradient(to top,#000 78%,transparent);mask-image:linear-gradient(to top,#000 78%,transparent);transition:backdrop-filter .9s ease,-webkit-backdrop-filter .9s ease,opacity .9s ease;opacity:0}
  .crew-how.is-open .crew-how-txt{opacity:1;backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1)}
  .crew-how-copy-wrap{transition:grid-template-rows 1.1s cubic-bezier(.22,.61,.36,1),opacity .7s ease .15s}
  .crew-how:not(.is-open) .crew-how-copy-wrap{transition:grid-template-rows .9s cubic-bezier(.22,.61,.36,1),opacity .35s ease}
  .crew-how-copy{max-width:44ch;font-size:.86rem;line-height:1.6}
  /* plus: a thin ring, glass fill, turns orange on hover */
  .crew-how-plus{width:42px;height:42px;border-radius:50%;left:30px;bottom:30px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .5s ease,transform .9s cubic-bezier(.22,.61,.36,1),border-color .4s,background .4s}
  .crew-how-plus::before{width:12px;height:1px}
  .crew-how-plus::after{width:1px;height:12px}
  .crew-how-plus::before,.crew-how-plus::after{transition:transform .5s cubic-bezier(.22,.61,.36,1),background .3s}
  .crew-how:not(.is-open):hover .crew-how-plus{border-color:var(--orange);background:rgba(203,138,70,.18)}
  .crew-how:not(.is-open):hover .crew-how-plus::before,.crew-how:not(.is-open):hover .crew-how-plus::after{background:var(--orange)}
  .crew-how:not(.is-open):hover .crew-how-plus::before{transform:translate(-50%,-50%) rotate(90deg)}
  .crew-how:not(.is-open):hover .crew-how-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
}


/* ===== SECTION HAIRLINES: per section, in the page, not a fixed frame =====
   Each section carries its own pair of vertical hairlines just outside the
   content, with small marks top and bottom, in the section's own text colour
   at low opacity. They scroll and slide with the section, so nothing runs
   across into the next slide. The hero's set is dimmed orange with a top and
   bottom rule, and fades out as the landing frame grows. */
.crew-chrome .cc-line,.crew-chrome .cc-hline{display:none}
.sec-lines{position:absolute;inset:0;pointer-events:none;z-index:0}
.sec-lines i{position:absolute;display:block;background:currentColor;opacity:.085}
.sec-lines .l{left:max(20px,calc((100% - 1240px) / 2 - 12px));top:0;bottom:0;width:1px}
.sec-lines .r{right:max(20px,calc((100% - 1240px) / 2 - 12px));top:0;bottom:0;width:1px}
.sec-lines .l::before,.sec-lines .l::after,.sec-lines .r::before,.sec-lines .r::after{content:'';position:absolute;left:-2px;width:5px;height:5px;background:currentColor;opacity:.55}
.sec-lines .l::before,.sec-lines .r::before{top:38px}
.sec-lines .l::after,.sec-lines .r::after{bottom:38px}
.sec-lines .t,.sec-lines .b{display:none;left:max(20px,calc((100% - 1240px) / 2 - 12px));right:max(20px,calc((100% - 1240px) / 2 - 12px));height:1px}
.hero .sec-lines{color:var(--orange);will-change:opacity}
.hero .sec-lines i{opacity:.3}
.hero .sec-lines .t,.hero .sec-lines .b{display:block}
.hero .sec-lines .t{top:84px}
.hero .sec-lines .b{bottom:26px}
.hero .sec-lines .l::before,.hero .sec-lines .r::before{top:82px}
.hero .sec-lines .l::after,.hero .sec-lines .r::after{bottom:24px}
.hero .sec-lines .l::before,.hero .sec-lines .l::after,.hero .sec-lines .r::before,.hero .sec-lines .r::after{opacity:.9}
.sec-slide > .sec-lines,.ov-slide > .sec-lines{z-index:0}
@media(max-width:1300px){.sec-lines{display:none}}


/* ===== SECTION HAIRLINES v2: dead space only, and not every section =====
   Lines sit 64px outside the content column (so they only appear when there is
   real margin: 1440px and up), never on the busy slides. Hero: a pair far out in
   the stage, orange. Dark slides with room (Services, Experiences, the crew scene):
   a plain pair. Retainers and Press: a pair plus a rule along the bottom. */
.sec-lines .l{left:max(24px,calc((100% - 1240px) / 2 - 64px))}
.sec-lines .r{right:max(24px,calc((100% - 1240px) / 2 - 64px))}
.sec-lines .t,.sec-lines .b{left:max(24px,calc((100% - 1240px) / 2 - 64px));right:max(24px,calc((100% - 1240px) / 2 - 64px))}
.sec-lines.has-b .b{display:block;bottom:64px}
.sec-lines.has-b .l::after,.sec-lines.has-b .r::after{bottom:62px}
.hero .sec-lines .l{left:9%}
.hero .sec-lines .r{right:9%}
.hero .sec-lines .t,.hero .sec-lines .b{display:none}
.hero .sec-lines .l::before,.hero .sec-lines .r::before{top:15%}
.hero .sec-lines .l::after,.hero .sec-lines .r::after{bottom:15%}
.hero .sec-lines .l,.hero .sec-lines .r{top:15%;bottom:15%}
@media(max-width:1439px){.sec-lines{display:none}}


/* ===== HOW WE WORK cards v3: slower spline, title tab instead of a plus =====
   Closed cards show the card's title as a small mono label with a short orange
   rule, bottom left. The open moves on one long ease-in-out spline. */
.crew-how-tab{display:none}
@media(min-width:1025px){
  .crew-how,.crew-how img{transition-duration:1.4s;transition-timing-function:cubic-bezier(.45,.05,.15,1)}
  .crew-how img{transition:transform 1.4s cubic-bezier(.45,.05,.15,1),filter 1.2s ease}
  .crew-how-copy-wrap,.crew-how:not(.is-open) .crew-how-copy-wrap{transition:grid-template-rows 1.4s cubic-bezier(.45,.05,.15,1),opacity .8s ease .2s}
  .crew-how:not(.is-open) .crew-how-copy-wrap{transition:grid-template-rows 1.2s cubic-bezier(.45,.05,.15,1),opacity .4s ease}
  .crew-how-txt{transition:backdrop-filter 1.2s ease,-webkit-backdrop-filter 1.2s ease,opacity 1s ease}
  .crew-how-plus{display:none!important}
  .crew-how-tab{display:flex;align-items:center;gap:12px;position:absolute;left:28px;bottom:30px;z-index:2;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform 1s cubic-bezier(.45,.05,.15,1)}
  .crew-how-tab i{display:block;width:18px;height:1px;background:var(--orange);transition:width .8s cubic-bezier(.45,.05,.15,1)}
  .crew-how:not(.is-open) .crew-how-tab{opacity:1;transform:none;transition-delay:.35s}
  .crew-how:not(.is-open):hover .crew-how-tab i{width:30px}
}


/* retainers: a box around the copy, in the dead space above and below it. press: no lines */
.sec-lines.box .l,.sec-lines.box .r{top:17%;bottom:17%}
.sec-lines.box .t,.sec-lines.box .b{display:block}
.sec-lines.box .t{top:17%}
.sec-lines.box .b{bottom:17%}
.sec-lines.box .l::before,.sec-lines.box .r::before{top:-2px}
.sec-lines.box .l::after,.sec-lines.box .r::after{bottom:-2px}

/* slate line above the landing frame, top left */
.hero-land .hl-tl{left:var(--land-l,19%);top:auto;bottom:calc(var(--land-h,62vh) + 36px)}


/* ===== HOME DIAL: lives under the landing frame as the scroll cue, then slides in at the side at Recent Projects ===== */
#homeChrome .cc-dial{opacity:0;transform:translate(70px,-50%);transition:opacity .7s ease,transform 1.2s cubic-bezier(.45,.05,.15,1)}
#homeChrome.side .cc-dial{opacity:1;transform:translate(0,-50%)}
#homeChrome.land .cc-dial{opacity:1;left:50%;right:auto;top:var(--dial-t,80%);height:200px;transform:translate(-50%,0);transition:opacity .9s ease .6s}
#homeChrome .cc-scroll{display:none;position:absolute;left:50%;top:calc(var(--dial-t,80%) + 214px);transform:translateX(-50%);font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);opacity:0;transition:opacity .9s ease .6s}
#homeChrome.land .cc-scroll{display:block;opacity:1}
#homeChrome.land .cc-tape{filter:none}
#homeChrome.land .cc-lab{color:var(--orange)}
#homeChrome.land .cc-mark{background:var(--orange)}

/* landing hairlines: offset heights, left runs high, right runs low */
.hero .sec-lines .l{top:14%;bottom:46%}
.hero .sec-lines .r{top:46%;bottom:14%}
.hero .sec-lines .l::before,.hero .sec-lines .r::before{top:-2px}
.hero .sec-lines .l::after,.hero .sec-lines .r::after{bottom:-2px}

/* retainers: the box lines run edge to edge and cross at the corners */
.sec-lines.box .l,.sec-lines.box .r{top:0;bottom:0}
.sec-lines.box .t,.sec-lines.box .b{left:0;right:0}
.sec-lines.box .l::before,.sec-lines.box .r::before{top:calc(17% - 2px)}
.sec-lines.box .l::after,.sec-lines.box .r::after{bottom:calc(17% - 2px)}

/* landing: each vertical is crossed by a short horizontal, top left and bottom right, out in the stage */
.hero .sec-lines .l{top:8%;bottom:46%}
.hero .sec-lines .r{top:46%;bottom:8%}
.hero .sec-lines .t{display:block;top:12%;left:0;right:auto;width:19%}
.hero .sec-lines .b{display:block;bottom:12%;right:0;left:auto;width:19%}
.hero .sec-lines .l::before,.hero .sec-lines .l::after,.hero .sec-lines .r::before,.hero .sec-lines .r::after{display:none}


/* home dial: quick out as soon as the frame starts to grow, no jump while it fades */
#homeChrome .cc-dial{transition:opacity .3s ease}
#homeChrome:not(.side) .cc-dial{left:50%;right:auto;top:var(--dial-t,80%);height:200px;transform:translate(-50%,0)}
#homeChrome.land .cc-dial{opacity:1;transition:opacity .9s ease .6s}
#homeChrome.side .cc-dial{opacity:1;left:auto;right:12px;top:50%;height:320px;transform:translate(0,-50%);animation:dialIn 1.2s cubic-bezier(.45,.05,.15,1) both}
@keyframes dialIn{from{transform:translate(70px,-50%);opacity:0}to{transform:translate(0,-50%);opacity:1}}
#homeChrome .cc-scroll{transition:opacity .3s ease}
#homeChrome.land .cc-scroll{transition:opacity .9s ease .6s}


/* ===== LANDING: crop marks on the frame corners =====
   Eight hairlines run from the frame's corners out to the screen edges, with a
   gap at the corner so the slate lines stay clear. They ride the frame: pushed
   off screen as it grows, back in as it closes, gone when it dissolves. */
.hero-marks{position:absolute;inset:0;z-index:5;pointer-events:none;color:var(--orange);display:none;will-change:opacity}
.hero-marks .m{position:absolute;display:block;background:currentColor;opacity:.32}
.hero-marks .m-tl-h,.hero-marks .m-tr-h,.hero-marks .m-bl-h,.hero-marks .m-br-h{height:1px;width:max(0px,calc(var(--fl,0px) - 14px))}
.hero-marks .m-tl-h,.hero-marks .m-tr-h{top:var(--ft,0px)}
.hero-marks .m-bl-h,.hero-marks .m-br-h{top:calc(var(--ft,0px) + var(--fh,0px))}
.hero-marks .m-tl-h,.hero-marks .m-bl-h{left:0}
.hero-marks .m-tr-h,.hero-marks .m-br-h{right:0}
.hero-marks .m-tl-v,.hero-marks .m-tr-v,.hero-marks .m-bl-v,.hero-marks .m-br-v{width:1px}
.hero-marks .m-tl-v,.hero-marks .m-bl-v{left:var(--fl,0px)}
.hero-marks .m-tr-v,.hero-marks .m-br-v{left:calc(var(--fl,0px) + var(--fw,0px))}
.hero-marks .m-tl-v,.hero-marks .m-tr-v{top:0;height:max(0px,calc(var(--ft,0px) - 44px))}
.hero-marks .m-bl-v,.hero-marks .m-br-v{bottom:0;height:max(0px,calc(100% - var(--ft,0px) - var(--fh,0px) - 44px))}
@media(min-width:769px) and (prefers-reduced-motion:no-preference){.hero-marks{display:block}}
.hero > .sec-lines{display:none}

/* side dial shows once the landing copy is up */

/* corner squares on the frame */
.hero-marks .c{position:absolute;display:block;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--orange);opacity:.85}
.hero-marks .c-tl{left:var(--fl,0px);top:var(--ft,0px)}
.hero-marks .c-tr{left:calc(var(--fl,0px) + var(--fw,0px));top:var(--ft,0px)}
.hero-marks .c-bl{left:var(--fl,0px);top:calc(var(--ft,0px) + var(--fh,0px))}
.hero-marks .c-br{left:calc(var(--fl,0px) + var(--fw,0px));top:calc(var(--ft,0px) + var(--fh,0px))}

/* crew sheet: dark behind the slides, so a slide receding under the next one never shows a light edge */
#crewOverlay{background:var(--dark)}


/* ===== DIAL IS THE SCROLLBAR (desktop) =====
   Native scrollbars are hidden on the home page and the crew sheet; the dial
   can be grabbed and dragged to scroll. */
@media(min-width:1025px) and (prefers-reduced-motion:no-preference){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{display:none}
  #crewOverlay{scrollbar-width:none}
  #crewOverlay::-webkit-scrollbar{display:none}
}
.cc-dial{pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.crew-chrome.drag .cc-dial{cursor:grabbing}
.crew-chrome.drag .cc-lab{pointer-events:none}
.crew-chrome:not(.on) .cc-dial,#homeChrome:not(.side):not(.land) .cc-dial{pointer-events:none}

/* crop marks: on the close their outer ends travel in with the frame, so the lines draw into the point it vanishes at */
.hero-marks .m-tl-h,.hero-marks .m-tr-h,.hero-marks .m-bl-h,.hero-marks .m-br-h{width:max(0px,calc(var(--fl,0px) * (1 - var(--fe,0)) - 14px))}
.hero-marks .m-tl-h,.hero-marks .m-bl-h{left:calc(var(--fl,0px) * var(--fe,0))}
.hero-marks .m-tr-h,.hero-marks .m-br-h{right:calc(var(--fl,0px) * var(--fe,0))}
.hero-marks .m-tl-v,.hero-marks .m-tr-v{top:calc(var(--ft,0px) * var(--fe,0));height:max(0px,calc(var(--ft,0px) * (1 - var(--fe,0)) - 44px))}
.hero-marks .m-bl-v,.hero-marks .m-br-v{bottom:calc(var(--ft,0px) * var(--fe,0));height:max(0px,calc(var(--ft,0px) * (1 - var(--fe,0)) - 44px))}


/* ===== HEADER over footage: no hard band. The blur lives on a pseudo that runs
   past the bar and fades out, and the tint is a long gradient to nothing. The
   solid scrolled state (nav.s) is unchanged. */
nav:not(.s){background:linear-gradient(to bottom,rgba(10,10,10,.5) 0%,rgba(10,10,10,.22) 55%,rgba(10,10,10,0) 100%);backdrop-filter:none;-webkit-backdrop-filter:none}
nav::before{content:'';position:absolute;left:0;right:0;top:0;bottom:-44px;z-index:-1;pointer-events:none;backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%);opacity:1;transition:opacity .35s}
nav.s::before{opacity:0}

/* crop marks: dimmer; geometry now comes from the scene script per part */
.hero-marks .m{opacity:.18}
.hero-marks .c{opacity:.6}

/* slate text sits inside the rod lines, not on them */
.hero-land .hl-tl{left:calc(var(--land-l,19%) + 16px)}
.hero-land .hl-r{right:calc(var(--land-l,19%) + 16px)}

/* dial lives on the right from the landing; the scroll cue alone sits under the frame */
#homeChrome.land.side .cc-dial{left:auto;right:12px;top:50%;height:320px;transform:translate(0,-50%);animation:none;opacity:1;transition:opacity .6s ease}
#homeChrome.side .cc-dial{animation:none}
#homeChrome .cc-scroll{top:calc(var(--dial-t,80%) + 60px)}
#homeChrome.land .cc-scroll::before{content:'';position:absolute;left:50%;bottom:calc(100% + 10px);width:1px;height:34px;background:linear-gradient(to bottom,rgba(203,138,70,.75),transparent)}


/* ===== CREW PAGE: MOBILE PASS =====
   1. The site nav styling was leaking onto the sheet navs (they are <nav> too):
      scope the footage treatment to the page nav only. */
nav.ov-page-nav:not(.s),nav.menu-ov-nav:not(.s){background:transparent}
nav.ov-page-nav::before,nav.menu-ov-nav::before{display:none}
nav.ov-page-nav{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* 2. How We Work on phones and tablets: one column of photo cards, title and copy on
      a glass panel, number top left, no accordion. */
@media(max-width:1024px){
  .crew-scene-how .crew-how-grid,.crew-how-grid{display:grid;grid-template-columns:1fr;gap:12px;height:auto!important;flex:none}
  .crew-scene-how .crew-how,.crew-how{height:auto;aspect-ratio:4/3;min-height:0;cursor:default}
  .crew-how-txt{opacity:1;padding:20px 20px 22px;background:linear-gradient(to top,rgba(10,10,10,.72),rgba(10,10,10,.38) 70%,rgba(10,10,10,0));backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);-webkit-mask-image:linear-gradient(to top,#000 78%,transparent);mask-image:linear-gradient(to top,#000 78%,transparent)}
  .crew-how-copy-wrap{grid-template-rows:1fr;opacity:1}
  .crew-how img{filter:saturate(.9) brightness(.86)}
  .crew-how .crew-how-num{top:18px;left:20px}
  .crew-how-tab,.crew-how-plus{display:none!important}
  .crew-how-copy{max-width:none;font-size:.84rem}
}
@media(max-width:768px){
  .crew-how-title{font-size:1.05rem}
  .crew-scene-how .crew-how-head{margin-bottom:22px}
}

/* 3. Carry the rig over: corner squares and a slate on the About photo (phones only) */
.ph-rig{display:none}
@media(max-width:768px){
  .crew-hero-photo{position:relative;overflow:visible}
  .crew-hero-photo img{border-radius:10px}
  .ph-rig{display:block;position:absolute;inset:0;pointer-events:none}
  .ph-rig .r{position:absolute;width:5px;height:5px;background:var(--orange);opacity:.85}
  .ph-rig .r-tl{left:-3px;top:-3px}.ph-rig .r-tr{right:-3px;top:-3px}.ph-rig .r-bl{left:-3px;bottom:-3px}.ph-rig .r-br{right:-3px;bottom:-3px}
  .ph-rig .ph-slate{position:absolute;left:0;top:calc(100% + 10px);font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.58rem;letter-spacing:.14em;font-weight:600;color:var(--orange);text-transform:uppercase}
  .ph-rig .ph-slate em{font-style:normal;color:rgba(0,0,0,.35);margin:0 4px}
  .crew-scene-about .crew-hero-photo{margin-bottom:64px}
  /* retainer pills and press tiles breathe a little more */
  .crew-ret-sec .ctn{padding-top:8px}
  .crew-press-sec .cl-grid{grid-template-columns:1fr 1fr}
}

/* phones: the About slide starts under the sheet nav (the sheet itself is dark behind the slides) */
@media(max-width:768px),(prefers-reduced-motion:reduce){
  .crew-scene-wrap{margin-top:-72px}
  #crewOverlay .crew-scene.ov-sec{padding:124px 0 48px}
}
@media(max-width:768px){.crew-press-sec .cl-grid > :last-child:nth-child(odd){grid-column:1 / -1}}


/* ===== HOME LANDING ON PHONES: the same scene, portrait frame =====
   The reel sits in a 9:16 frame with the rig, grows to full screen as the copy
   focuses in, closes back down, and Recent Projects (one screen tall, a deck)
   settles in over the dark stage. */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .home-scene-track{display:block;height:200svh;margin-bottom:14svh}
  section.work.sec-slide{margin-top:-100svh;margin-bottom:0;height:100svh;min-height:100svh;padding:84px 24px 20px;justify-content:center;background:transparent!important}
  .work.sec-slide::after{background:transparent}
  section.work .sec-glow-line{display:none}
  .work .wk-head{margin-bottom:18px}
  .work .wk-grid{flex:0 0 auto;height:min(44svh,380px);align-items:stretch}
  .work .wk-card,.work .wk-card.wk-featured,.work .wk-card.wk-small{min-height:0;height:100%}
  .work .wk-cta{margin-top:18px}
  .hx{opacity:0;will-change:transform,opacity,filter}
  .hero-footage{overflow:hidden;will-change:transform,opacity;transform:scale(.78)}
  .hero-focus-scrim{display:block}
  .hero-marks{display:block}
  .hero-land{display:block;font-size:.56rem}
  body.wcs-open .hero-land{opacity:1}
  .hero-land .hl-tl{bottom:calc(var(--land-h,62vh) + 22px);left:calc(var(--land-l,10%) + 10px)}
  .hero-land .hl-r{right:calc(var(--land-l,10%) + 10px)}
  .hero-land::before{display:none}
  .hero-marks .m{opacity:.22}
}

/* ===== CREW ON PHONES: keep the sticky stack =====
   The About + How We Work slide pins by its bottom (tall sticky), the rest pin
   at the top as on desktop. Retainers fills a screen with the copy centred. */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .crew-scene{position:sticky;top:0}
  .crew-scene-wrap{z-index:2;margin-bottom:0}
  .crew-scene-wrap::after{content:'';display:block;height:70vh}   /* room inside the wrapper for the slide to hold while the next one covers it */
  .crew-ret-sec{margin-top:-70vh}   /* retainers rides up over the pinned slide */
  .crew-ret-sec{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:84px 0 40px}
}
/* phones: retainers fits one screen so it pins at the top like the others */
@media(max-width:768px){
  .crew-ret-sec{padding:72px 0 24px}
  .crew-ret-sec .ctn{padding-top:0}
  .crew-ret-h2{font-size:1.85rem;line-height:1.02;margin-bottom:12px}
  .crew-ret-lead{font-size:1rem;line-height:1.4;margin-bottom:12px}
  .crew-ret-body{font-size:.84rem;line-height:1.55;margin-bottom:10px}
  .crew-ret-facts{margin-bottom:18px;gap:6px}
  .crew-ret{gap:16px}
}

/* phones: the hero box and the frame geometry both use the large viewport, so nothing jumps when the toolbar collapses */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){.hero{height:100lvh}}

/* services: horizontal rules in the dead space above and below the cards, no verticals */
.svcs .sec-lines .l,.svcs .sec-lines .r{display:none}
.svcs .sec-lines .t,.svcs .sec-lines .b{display:block;left:0;right:0}
.svcs .sec-lines .t{top:88px}
.svcs .sec-lines .b{bottom:40px}
.svcs .sec-lines .t::before,.svcs .sec-lines .b::before,.svcs .sec-lines .t::after,.svcs .sec-lines .b::after{content:'';position:absolute;top:-2px;width:5px;height:5px;background:currentColor;opacity:.55}
.svcs .sec-lines .t::before,.svcs .sec-lines .b::before{left:max(24px,calc((100% - 1240px) / 2 - 64px))}
.svcs .sec-lines .t::after,.svcs .sec-lines .b::after{right:max(24px,calc((100% - 1240px) / 2 - 64px))}
/* crew landing photo: crop from higher so the heads stay in frame */
.crew-hero-photo img{object-position:50% 34%}

/* How We Work photos: portrait frames, keep the faces and the camera in the crop */
.crew-how:nth-child(1) img{object-position:50% 38%}
.crew-how:nth-child(2) img{object-position:60% 30%}

/* process: production photo is portrait, keep the subject and the rig in the landscape crop */
.proc-img[data-i="1"]{object-position:50% 56%}


/* ===== SERVICES: photo behind the cards, black and white, dim; hover a card and it crossfades ===== */
.svcs{position:relative;overflow:hidden}
.svcs-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--dark)}
.svcs-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.62);opacity:0;transform:scale(1.06);transition:opacity 1.2s cubic-bezier(.45,.05,.15,1),transform 7s linear;will-change:opacity,transform}
.svcs-bg-img.is-on{opacity:.26;transform:scale(1.0)}
.svcs-bg-vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,rgba(10,10,10,.15) 20%,rgba(10,10,10,.82) 100%),linear-gradient(to bottom,rgba(10,10,10,.85),rgba(10,10,10,0) 22%,rgba(10,10,10,0) 70%,rgba(10,10,10,.9))}
.svcs .sec-glow{display:none}
.svcs-in{position:relative;z-index:1}
.svc-card{background:rgba(14,14,14,.58);border-color:rgba(255,255,255,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.svc-card:hover{border-color:rgba(203,138,70,.35)}
.svcs-grid .svc-card.is-on{border-color:rgba(203,138,70,.3)}
/* cards: text sits on the same baselines across all three */
.svc-card{display:flex;flex-direction:column}
.svc-card-desc{flex:1 1 auto;margin-bottom:0}
.svc-card-tags{margin-top:20px}
@media(max-width:768px){.svcs-bg-img{filter:grayscale(1) contrast(1.05) brightness(.55)}.svcs-bg-img.is-on{opacity:.22}}
@media(prefers-reduced-motion:reduce){.svcs-bg-img{transition:opacity .4s ease;transform:none}}
.proc-img[data-i="0"]{object-position:50% 42%}


/* ===== PHONES: Recent Projects as full-bleed posters ===== */
.deck-count{display:none}
.svc-card-more{display:block}
.hl-swipe{display:none}
@media(max-width:768px){
  section.work.sec-slide{padding:76px 0 16px;justify-content:flex-start}
  .work .wk-head{padding:0 24px;margin-bottom:14px}
  .work .wk-head .sl{margin-bottom:6px}
  .work .wk-grid{margin:0;padding:0 24px;gap:10px;height:auto;flex:1 1 auto;min-height:0;scroll-padding-left:24px}
  .work .wk-card,.work .wk-card.wk-featured,.work .wk-card.wk-small{flex:0 0 80vw;height:100%;min-height:0;border-radius:18px;opacity:1;transform:scale(.96)!important;transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .4s}
  .work .wk-card.is-on{transform:scale(1)!important}
  .work .wk-card:not(.is-on) img{filter:brightness(.55) saturate(.7)}
  .work .wk-card img{transition:filter .6s}
  .work .wk-card-info{padding:22px 22px 24px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 55%,transparent 100%)}
  .work .wk-card-name{font-size:1.15rem;line-height:1.1}
  .work .deck-nav{padding:0 24px;margin-top:12px;display:flex;align-items:center;gap:14px}
  .work .deck-count{display:block;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.62rem;letter-spacing:.14em;color:var(--orange);margin-left:auto}
  .work .deck-swipe{margin-left:0}
  .work .wk-cta{margin-top:12px;padding:0 24px}
  .work .wk-cta .btn-o-dark{padding:12px 22px;font-size:.62rem;width:100%;justify-content:center}
}

/* ===== PHONES: Services as a photo ledger, one row open at a time ===== */
@media(max-width:768px){
  .svcs{padding-top:72px;padding-bottom:40px;justify-content:flex-start}
  .svcs-bg{display:none}
  .svcs-head{margin-bottom:18px}
  .svcs-in{display:block}
  .svcs-grid{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
  .svc-card{flex:none;min-height:0;padding:0;opacity:1;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#111;overflow:hidden;position:relative;display:block;cursor:pointer;backdrop-filter:none;-webkit-backdrop-filter:none}
  .svc-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5) contrast(1.05);opacity:.55;transition:opacity .8s ease,filter .8s ease,transform 1.2s cubic-bezier(.22,.61,.36,1);transform:scale(1.04)}
  .svc-card.is-open .svc-card-bg{opacity:.75;filter:grayscale(.35) brightness(.5) contrast(1.05);transform:scale(1)}
  .svc-card::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(10,10,10,.92) 0%,rgba(10,10,10,.6) 55%,rgba(10,10,10,.25) 100%);pointer-events:none}
  .svc-card.is-open::before{background:linear-gradient(to top,rgba(10,10,10,.94) 0%,rgba(10,10,10,.7) 50%,rgba(10,10,10,.3) 100%)}
  .svc-icon{display:none}
  .svc-card-head{position:relative;display:flex;align-items:center;gap:14px;padding:20px 20px}
  .svc-card-num{margin:0;font-size:.6rem}
  .svc-card-name{margin:0;font-size:1.05rem;flex:1 1 auto}
  .svc-card-tog{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.3);position:relative;flex:none;transition:border-color .4s,transform .6s cubic-bezier(.22,.61,.36,1)}
  .svc-card-tog::before,.svc-card-tog::after{content:'';position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
  .svc-card-tog::before{width:10px;height:1px}
  .svc-card-tog::after{width:1px;height:10px;transition:opacity .3s}
  .svc-card.is-open .svc-card-tog{border-color:var(--orange);transform:rotate(90deg)}
  .svc-card.is-open .svc-card-tog::after{opacity:0}
  .svc-card.is-open .svc-card-tog::before{background:var(--orange)}
  .svc-card-more{position:relative;display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.22,.61,.36,1)}
  .svc-card.is-open .svc-card-more{grid-template-rows:1fr}
  .svc-card-more-in{min-height:0;overflow:hidden}
  .svc-card-desc{padding:0 20px;font-size:.86rem;line-height:1.65;color:rgba(255,255,255,.72);margin:0 0 16px}
  .svc-card-tags{padding:0 20px 22px;margin:0}
  .svc-card.is-open .svc-card-head{padding-bottom:12px}
  .svc-card.is-open .svc-card-head{min-height:0}
  .svcs .deck-nav{display:none}
  .svc-card.is-on{border-color:rgba(255,255,255,.08)}
  .svc-card.is-open{border-color:rgba(203,138,70,.35)}
  /* the open row grows into a poster */
  .svc-card.is-open .svc-card-head{padding-top:clamp(120px,26svh,220px)}
  .svc-card .svc-card-head{transition:padding .8s cubic-bezier(.22,.61,.36,1)}
}

/* ===== PHONE LANDING: swipe cue under the frame ===== */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .hero-land .hl-swipe{display:flex;flex-direction:column;align-items:center;gap:10px;left:50%;top:calc(var(--land-t,80%) + 30px);transform:translateX(-50%);letter-spacing:.22em;color:rgba(255,255,255,.45)}
  .hero-land .hl-swipe i{display:block;width:1px;height:38px;position:relative;overflow:hidden;background:rgba(203,138,70,.18)}
  .hero-land .hl-swipe i::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:linear-gradient(to bottom,transparent,var(--orange),transparent);animation:swipeLine 2s cubic-bezier(.45,.05,.15,1) infinite}
  @keyframes swipeLine{0%{top:-100%}60%{top:100%}100%{top:100%}}
}
/* desktop: the phone ledger wrappers are invisible */
@media(min-width:769px){
  .svc-card-head{display:contents}
  .svc-card-tog,.svc-card-bg{display:none}
  .svc-card-more,.svc-card-more-in{display:contents}
}

/* How We Work: the scene stylesheet killed transitions on the cards (transition:none for scroll scrubbing);
   the scroll only drives transform and opacity, so the open can ease on its own property */
@media(min-width:1025px){
  .crew-scene .crew-how,.crew-how{transition:flex-grow 1.4s cubic-bezier(.45,.05,.15,1),border-color .4s!important}
  .crew-scene .crew-how img{transition:transform 1.4s cubic-bezier(.45,.05,.15,1),filter 1.2s ease}
}
.crew-how .crew-how-num{display:none}
/* services rules: away from the header line, in the open space above the heading and below the cards */
/* trusted by: the mark keeps its colour on hover, only the tile moves */
.about .cl-card:hover .cl-logo{opacity:.55;filter:grayscale(1) brightness(.42) contrast(1.15)}
.about .cl-card:hover .cl-logo-dark{opacity:.55;filter:grayscale(1) brightness(.55) contrast(1.1)}


/* retainers: dimmed photo behind the copy, black and white, vignetted to the dark */
.crew-ret-sec{overflow:hidden}
.crew-ret-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.crew-ret-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;filter:grayscale(1) contrast(1.05) brightness(.6);opacity:.2}
.crew-ret-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(110% 85% at 50% 50%,rgba(10,10,10,.1) 25%,rgba(10,10,10,.85) 100%),linear-gradient(to bottom,rgba(10,10,10,.8),rgba(10,10,10,0) 25%,rgba(10,10,10,0) 75%,rgba(10,10,10,.9))}
.crew-ret-sec > .ctn{position:relative;z-index:1}
.crew-ret-sec > .sec-lines{z-index:1}
@media(max-width:768px){.crew-ret-bg img{opacity:.16}}


/* ===== PHONES: one rhythm for every sticky section =====
   Top of content 96px below the section edge (room under the header line),
   48px clear at the bottom, 18px gutters, 20px between header and body. */
.svcs .sec-lines{display:none}
@media(max-width:768px){
  .work,.about,.svcs,.process,.exp,.talk{padding-top:96px;padding-bottom:48px}
  section.work.sec-slide{padding:96px 0 48px}
  .svcs{padding-top:96px;padding-bottom:48px}
  .process{padding-top:96px;padding-bottom:48px}
  .work .wk-head,.svcs-head,.ab-grid,.proc-head,.exp-head{margin-bottom:20px}
  /* recent projects: the deck shrinks to leave the rhythm intact */
  .work .wk-grid{max-height:calc(100svh - 96px - 48px - 150px)}
  .work .wk-card,.work .wk-card.wk-featured,.work .wk-card.wk-small{flex-basis:76vw}
  .work .deck-nav{margin-top:14px}
  .work .wk-cta{margin-top:14px}
  /* services ledger: a frosted band behind the title and copy of the open row */
  .svc-card.is-open .svc-card-head{padding-top:clamp(110px,24svh,200px)}
  .svc-card.is-open .svc-card-head,.svc-card.is-open .svc-card-more{background:rgba(12,12,12,.42);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
  .svc-card.is-open .svc-card-head{background:linear-gradient(to bottom,rgba(12,12,12,0),rgba(12,12,12,.42) 55%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
  .svc-card.is-open::before{background:linear-gradient(to top,rgba(10,10,10,.5) 0%,rgba(10,10,10,.2) 50%,rgba(10,10,10,.1) 100%)}
}

/* hiring card on phones: a mark on the right to balance the left-set copy */
.hiring-mark{display:none}
@media(max-width:768px){
  .hiring-inner{padding-right:116px}
  .hiring-mark{display:flex;flex-direction:column;align-items:center;gap:8px;position:absolute;right:22px;top:50%;transform:translateY(-50%);color:rgba(203,138,70,.55);pointer-events:none}
  .hiring-mark svg{width:56px;height:56px}
  .hiring-mark b{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.5rem;letter-spacing:.2em;line-height:1.5;text-align:center;color:rgba(255,255,255,.3);font-weight:600}
  .hiring-text p{max-width:none}
}
@media(max-width:400px){.hiring-inner{padding-right:96px}.hiring-mark{right:16px}.hiring-mark svg{width:46px;height:46px}}


/* services: no icons */
.svc-icon{display:none!important}

/* ===== CREW ON PHONES v2: About and How We Work as two sticky slides =====
   The scene wrapper is static on phones. The About layer becomes a pinned slide
   (light), and the How We Work layer rides up over it as its own slide, then the
   dark Retainers slide covers that. Cards in How We Work rise into place one by
   one as the slide comes up, driven by scroll (see CREW HOW MOBILE in main.js). */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .crew-scene-wrap{height:auto;margin-top:-72px;margin-bottom:0}
  .crew-scene-wrap::after{display:none}
  .crew-scene{position:static;height:auto;min-height:0;overflow:visible;padding:0;background:transparent;box-shadow:none}
  #crewOverlay .crew-scene.ov-sec{padding:0}
  .crew-scene .ctn{padding:0!important}
  .crew-scene-in{height:auto;padding:0}
  .crew-scene-layer{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:96px 24px 48px;pointer-events:auto;border-radius:20px 20px 0 0;box-sizing:border-box}
  .crew-scene-about{background:var(--light);z-index:1;margin-bottom:34vh}
  .crew-scene-how{background:var(--light);z-index:2;box-shadow:0 -20px 40px rgba(0,0,0,.22);margin-bottom:0}
  .crew-scene-layer > *{opacity:1;transform:none}
  .crew-scene-about .crew-hero-photo{aspect-ratio:4/3;margin-bottom:0;max-height:none;flex:none}
  .crew-ret-sec{margin-top:0}
  /* how we work cards: start low and dim, rise as the slide pins */
  .crew-scene-how .crew-how{opacity:0;transform:translate3d(0,56px,0) scale(.96);will-change:transform,opacity;transition:none}
  .crew-scene-how .crew-how-txt{opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
  .crew-scene-how .crew-how.is-in .crew-how-txt{opacity:1;transform:none}
}
/* retainers stays a sticky slide; the photo layer just needs a positioned parent, which sticky is */
.crew-ret-sec.ov-slide{position:sticky}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  /* how we work on phones: the three cards fit one screen as a snap deck, so the slide pins like the others */
  .crew-scene-how .crew-how-grid{display:flex;flex-direction:row;gap:10px;margin:0 -24px;padding:0 24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:24px;scrollbar-width:none;flex:1 1 auto;min-height:0;height:auto!important;max-height:calc(100svh - 96px - 48px - 150px)}
  .crew-scene-how .crew-how-grid::-webkit-scrollbar{display:none}
  .crew-scene-how .crew-how{flex:0 0 78vw;aspect-ratio:auto;height:100%;min-height:380px;scroll-snap-align:start}
  .crew-scene-how .crew-how-head{margin-bottom:20px}
  .crew-scene-how .crew-how-sub{font-size:.82rem}
}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  /* about fits one screen: tighter copy, photo takes what is left */
  .crew-scene-about{height:100svh;max-height:100svh;overflow:hidden}
  .crew-scene-about .crew-lead{margin-bottom:16px}
  .crew-scene-about .crew-about-h1{font-size:1.9rem;line-height:.98}
  .crew-scene-about .crew-about-lead{font-size:1rem;margin-bottom:10px}
  .crew-scene-about .crew-about-body{font-size:.84rem;line-height:1.55}
  .crew-scene-about .crew-hero-photo{aspect-ratio:auto;flex:1 1 auto;min-height:120px;margin-bottom:28px}
  .crew-scene-about .crew-hero-photo img{height:100%}
  /* how we work holds, then retainers slides over it */
  .crew-scene-how{height:100svh;max-height:100svh;margin-bottom:34vh}
  .crew-ret-sec{margin-top:0}
}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .crew-scene-how{margin-bottom:0}
  .crew-scene-in::after{content:'';display:block;height:34vh}   /* hold for the How slide inside its sticky container */
}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .crew-scene-in::after{height:100svh}
  .crew-ret-sec{margin-top:-100svh}   /* rides up over the held How slide */
}
@media(max-width:768px){
  .crew-ret-sec{padding:84px 0 24px}
  .crew-ret-h2{font-size:1.7rem}
  .crew-ret-lead{font-size:.95rem;margin-bottom:10px}
  .crew-ret-body{font-size:.82rem;line-height:1.5;margin-bottom:8px}
  .crew-ret-facts{gap:5px;margin-bottom:14px}
  .crew-ret-facts > *{font-size:.56rem;padding:5px 10px}
}


/* ===== LANDING SCROLL CUE: clear of the frame, same look on phones ===== */
#homeChrome .cc-scroll{top:calc(var(--dial-t,80%) + 50px)}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .hero-land .hl-swipe{top:calc(var(--land-t,80%) + 44px);gap:12px;letter-spacing:.22em;color:rgba(255,255,255,.5);font-size:.6rem}
  .hero-land .hl-swipe i{height:34px;background:rgba(203,138,70,.18)}
}

/* ===== CREW ON PHONES v3: About sits under the sheet nav in flow, no negative margin, no clipping on the sticky element ===== */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .crew-scene-wrap{margin-top:0}
  .crew-scene-about{overflow:visible;height:auto;min-height:100svh;max-height:none;padding-top:40px}
  .crew-scene-about .crew-hero-photo{flex:none;aspect-ratio:16/10;min-height:0;margin-bottom:0}
  .crew-scene-how{padding-top:72px}
  /* how we work: shorter cards */
  .crew-scene-how .crew-how-grid{max-height:min(52svh,440px)}
  .crew-scene-how .crew-how{min-height:300px}
  /* retainers: more room, nothing on the edges */
  .crew-ret-sec{padding:96px 0 40px}
  .crew-ret-sec .ctn{padding:0 24px}
  .crew-ret-sec .sl{margin-bottom:14px}
  .crew-ret-h2{font-size:1.75rem;margin-bottom:22px}
  .crew-ret-lead{font-size:1rem;line-height:1.45;margin-bottom:16px;max-width:30ch}
  .crew-ret-body{font-size:.84rem;line-height:1.6;margin-bottom:14px;max-width:40ch}
  .crew-ret-facts{margin:8px 0 26px;gap:8px}
  .crew-ret-facts > *{font-size:.58rem;padding:7px 12px}
}

/* process: the frame is a fixed 4:3 box no matter which row is open, and the block does not re-centre as rows change */
@media(min-width:1025px){
  .proc-split{align-items:start}
  .proc-frame{aspect-ratio:auto;height:0;min-height:0;padding-top:75%;width:100%;align-self:start}
  .proc-list,.proc-tabs{min-height:420px}
  .process{justify-content:flex-start;padding-top:clamp(120px,18vh,220px)}
}

/* ===== HOW WE WORK: faster and cheaper =====
   Only flex-grow animates on the card. The photo dim is an overlay fading in
   (no filter animation on a big image), the glass panel has a fixed blur and
   only fades, and the images are promoted to their own layers. */
@media(min-width:1025px){
  .crew-scene .crew-how,.crew-how{transition:flex-grow .95s cubic-bezier(.4,.05,.15,1),border-color .4s!important;contain:layout paint style}
  .crew-how img,.crew-scene .crew-how img{transition:transform .95s cubic-bezier(.4,.05,.15,1)!important;filter:saturate(.95)!important;will-change:transform;transform:translateZ(0)}
  .crew-how:hover img{transform:scale(1.02)}
  .crew-how .crew-how-dim{content:'';position:absolute;inset:0;background:#000;opacity:.42;pointer-events:none;transition:opacity .7s ease;z-index:0}
  .crew-how.is-open .crew-how-dim{opacity:.16}
  .crew-how-txt{backdrop-filter:blur(16px) saturate(1.1)!important;-webkit-backdrop-filter:blur(16px) saturate(1.1)!important;transition:opacity .55s ease!important;z-index:1}
  .crew-how.is-open .crew-how-txt{transition-delay:.12s!important}
  .crew-how-copy-wrap{transition:grid-template-rows .95s cubic-bezier(.4,.05,.15,1),opacity .5s ease .1s!important}
  .crew-how:not(.is-open) .crew-how-copy-wrap{transition:grid-template-rows .8s cubic-bezier(.4,.05,.15,1),opacity .25s ease!important}
  .crew-how-tab{transition:opacity .4s ease,transform .7s cubic-bezier(.4,.05,.15,1)!important}
  .crew-how::after{display:none}
}

/* phones: the active project card sits centred in the screen, the neighbours peek in on both sides */
@media(max-width:768px){
  .work .wk-grid{scroll-snap-type:x mandatory;scroll-padding-left:10vw;scroll-padding-right:10vw;padding-left:10vw;padding-right:10vw}
  .work .wk-card,.work .wk-card.wk-featured,.work .wk-card.wk-small{scroll-snap-align:center}
}


/* phones: 24px gutters site wide */
@media(max-width:768px){
  .work,.about,.svcs,.process,.exp,.talk,.hiring,.cta,.ft{padding-left:24px;padding-right:24px}
  .ov-sec .ctn,.ctn{padding-left:24px;padding-right:24px}
  .crew-scene-layer{padding-left:24px;padding-right:24px}
  .crew-ret-sec .ctn{padding:0 24px}
  nav,.ov-page-nav,.menu-ov-nav{padding-left:24px;padding-right:24px}
  .svcs-grid{margin:0;padding:0}
  .ft{padding-left:24px;padding-right:24px}
}

/* services ledger: photo stays clear, glass only under the copy, pills spaced */
@media(max-width:768px){
  .svc-card.is-open .svc-card-head{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-mask-image:none;mask-image:none;padding-bottom:14px}
  .svc-card.is-open .svc-card-more{background:linear-gradient(to bottom,rgba(12,12,12,.2),rgba(12,12,12,.62) 30%);backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05)}
  .svc-card.is-open::before{background:linear-gradient(to top,rgba(10,10,10,.45) 0%,rgba(10,10,10,.12) 45%,rgba(10,10,10,.05) 100%)}
  .svc-card-desc{padding:18px 22px 0;margin:0 0 18px}
  .svc-card-tags{padding:0 22px 24px;gap:8px;row-gap:10px}
  .svc-card-tag{padding:7px 14px;font-size:.58rem;letter-spacing:.12em}
  .svc-card-head{padding-left:22px;padding-right:22px}
}

/* ===== GUTTERS: tablets get 48px, phones 28px, and copy never runs to the edge ===== */
@media(max-width:1200px) and (min-width:769px){
  .work,.about,.svcs,.process,.exp,.talk,.hiring,.cta,.hero{padding-left:48px;padding-right:48px}
  .ov-sec .ctn,.crew-scene .ctn{padding-left:48px!important;padding-right:48px!important}
  .crew-scene-layer{left:48px;right:48px}
  nav,.ov-page-nav,.menu-ov-nav{padding-left:40px;padding-right:40px}
  .crew-ret{max-width:720px}
  .crew-ret-lead{max-width:30ch}
  .crew-ret-body{max-width:46ch}
}
@media(max-width:768px){
  .work,.about,.svcs,.process,.exp,.talk,.hiring,.cta,.ft{padding-left:28px;padding-right:28px}
  .ov-sec .ctn,.ctn{padding-left:28px;padding-right:28px}
  .crew-scene-layer{padding-left:28px;padding-right:28px}
  .crew-ret-sec .ctn{padding:0 28px}
  nav,.ov-page-nav,.menu-ov-nav{padding-left:28px;padding-right:28px}
  .work .wk-head,.work .deck-nav,.work .wk-cta{padding-left:28px;padding-right:28px}
  .work .wk-grid{padding-left:10vw;padding-right:10vw}
  .hero{padding-left:28px;padding-right:28px}
  .about .cl-wrap{margin:0 -28px;width:calc(100% + 56px)}
}


/* team on phones: lighter header, four tidy portraits in a 2x2 */
@media(max-width:768px){
  .crew-team-sec{padding:72px 0 40px}
  .crew-team-card{padding:22px 20px 20px}
  .crew-team-brand-dark{font-size:.6rem;margin-bottom:14px}
  .crew-team-heading-dark{font-size:1.6rem;line-height:1.02;margin-bottom:14px;padding-bottom:14px}
  .crew-team-desc-dark{font-size:.84rem;line-height:1.55;margin-bottom:18px;max-width:34ch}
  .crew-team-grid{grid-template-columns:1fr 1fr;gap:10px}
  .crew-photo-card{aspect-ratio:4/5;border-radius:12px}
  .crew-pc-name{font-size:.86rem}
  .crew-pc-role{font-size:.52rem}
}
/* services ledger photos: hold the middle of the frame, and pull the subject up above the glass when open */
@media(max-width:768px){
  .svc-card-bg{object-position:50% 50%}
  .svc-card.is-open .svc-card-bg{object-position:50% 38%}
  .svc-card:nth-child(1) .svc-card-bg{object-position:50% 55%}
  .svc-card:nth-child(1).is-open .svc-card-bg{object-position:50% 42%}
  .svc-card:nth-child(2) .svc-card-bg{object-position:50% 60%}
  .svc-card:nth-child(2).is-open .svc-card-bg{object-position:50% 48%}
  .svc-card:nth-child(3) .svc-card-bg{object-position:50% 58%}
  .svc-card:nth-child(3).is-open .svc-card-bg{object-position:50% 46%}
  .svc-card-bg{transition:opacity .8s ease,filter .8s ease,transform 1.2s cubic-bezier(.22,.61,.36,1),object-position 1s cubic-bezier(.22,.61,.36,1)}
}

/* as seen on: one row on phones */
@media(max-width:768px){
  .crew-press-sec .crew-seen-on-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .crew-press-sec .crew-seen-on-grid > :last-child:nth-child(odd){grid-column:auto}
  .crew-press-sec .crew-cl-card{min-height:70px;padding:14px 10px}
  .crew-press-sec .seen-on-logo{max-width:84px;max-height:22px}
}

/* phones: the sticky layers must only stick by their top. The desktop scene's bottom offset made
   Safari pull How We Work up over About (Chrome ignores it when the layer is a full screen tall) */
@media(max-width:768px){
}

/* ===== CREW ABOUT on phones: one full composed screen =====
   The slide starts under the sheet nav (no dark band above it), the copy sits at the top
   and the photo grows to fill the rest of the screen, with the slate under it. */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .crew-scene-wrap{margin-top:-72px}
  .crew-scene-about{min-height:100svh;height:auto;padding-top:128px;padding-bottom:56px;display:flex;flex-direction:column;border-radius:0}
  .crew-scene-about .crew-lead{flex:none;margin-bottom:28px}
  .crew-scene-about .crew-hero-photo{flex:1 1 auto;min-height:200px;max-height:none;aspect-ratio:auto;margin-bottom:0}
  .crew-scene-about .crew-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
  .crew-scene-how{padding-top:120px}
}

@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .crew-scene-about{padding-top:112px;padding-bottom:48px}
  .crew-scene-about .crew-lead{margin-bottom:24px}
  .crew-scene-about .crew-hero-photo{min-height:220px}
}


/* ===== CREW ON PHONES v4: the same scene as desktop =====
   One pinned screen. Scroll drives the About content out and the How We Work
   content in (CREW SCENE in main.js), then How We Work holds before Retainers
   rides up over it. Everything else from the earlier stacked phone layout is
   neutralised here. */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .crew-scene-wrap{height:calc(100svh + 150svh + 145svh)!important;margin-top:-72px;margin-bottom:0}
  .crew-scene-wrap::after,.crew-scene-in::after{content:none!important;display:none!important}
  .crew-scene{position:sticky!important;top:0;height:100svh;min-height:0;overflow:hidden;background:var(--light);border-radius:0;box-shadow:none}
  #crewOverlay .crew-scene.ov-sec{padding:0!important}
  .crew-scene .ctn{height:100%;padding:0!important;max-width:none!important}
  .crew-scene-in{position:relative;height:100%;padding:0!important}
  .crew-scene-layer{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:100px 28px 30px!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden!important}
  .crew-scene-how{opacity:0;pointer-events:none}
  /* about: copy at the top, the photo takes the rest */
  .crew-scene-about .crew-lead{flex:none;margin-bottom:22px}
  .crew-scene-about .crew-hero-photo{position:relative;flex:1 1 0!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;overflow:visible}
  .crew-scene-about .crew-hero-photo img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:50% 34%;border-radius:10px}
  /* how we work: heading, then the deck fills the rest */
  .crew-scene-how .crew-how-head{flex:none;margin-bottom:18px}
  .crew-scene-how .crew-how-grid{flex:1 1 0!important;min-height:0!important;max-height:none!important;height:auto!important}
  .crew-scene-how .crew-how{height:100%!important;min-height:0!important}
  .crew-scene-how .crew-how-txt{opacity:1!important;transform:none!important}
  /* how we work hangs before retainers rides up */
  .crew-ret-sec{margin-top:-100svh!important}
}
/* desktop: How We Work holds a beat longer before Retainers rides up */
@media(min-width:769px) and (prefers-reduced-motion:no-preference){.crew-ret-sec{margin-top:-108vh}}

/* hiring card on phones: no icon, the button sits on the right */
.hiring-mark{display:none!important}
@media(max-width:768px){
  .hiring-inner{display:grid!important;grid-template-columns:1fr auto;align-items:center;column-gap:18px;padding:22px 20px 22px!important}
  .hiring-inner .hiring-left{grid-column:1;grid-row:1}
  .hiring-inner .btn-hiring{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0!important;white-space:normal;text-align:center;max-width:112px;padding:12px 14px;line-height:1.35;font-size:.56rem;letter-spacing:.12em;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto}
}

/* Recent Projects holds on screen after it settles, before Why Choose Us slides over */
@media(min-width:769px) and (prefers-reduced-motion:no-preference){.home-scene-track{margin-bottom:95vh}}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){.home-scene-track{margin-bottom:70svh}}


/* services ledger: the photo fills only the header window, framed on the subject; the copy sits on solid glass below */
@media(max-width:768px){
  .svc-card::before{display:none}
  .svc-card-head{position:relative;overflow:hidden;isolation:isolate}
  .svc-card-head > .svc-card-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-2;object-fit:cover}
  .svc-card-head::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to right,rgba(10,10,10,.82),rgba(10,10,10,.4) 70%,rgba(10,10,10,.25));transition:background .8s ease}
  .svc-card.is-open .svc-card-head::after{background:linear-gradient(to top,rgba(10,10,10,.78) 0%,rgba(10,10,10,.12) 50%,rgba(10,10,10,0) 100%)}
  .svc-card.is-open .svc-card-more{background:rgba(16,16,16,.96);backdrop-filter:none;-webkit-backdrop-filter:none}
  /* where the content is in each frame */
  .svc-card:nth-child(1) .svc-card-bg,.svc-card:nth-child(1).is-open .svc-card-bg{object-position:46% 58%}
  .svc-card:nth-child(2) .svc-card-bg,.svc-card:nth-child(2).is-open .svc-card-bg{object-position:62% 74%}
  .svc-card:nth-child(3) .svc-card-bg,.svc-card:nth-child(3).is-open .svc-card-bg{object-position:50% 76%}
}

/* services on desktop: the selected card carries the accent, not whichever card the swipe deck thinks is centred */
@media(min-width:769px){
  .svcs-grid .svc-card.is-on{border-color:rgba(255,255,255,.07)}
  .svcs-grid .svc-card{cursor:pointer;transition:border-color .5s ease,background .5s ease,transform .35s var(--ease)}
  .svcs-grid .svc-card.is-sel{border-color:rgba(203,138,70,.45);background:rgba(20,20,20,.66)}
  .svcs-grid .svc-card:hover{border-color:rgba(203,138,70,.28)}
  .svcs-grid .svc-card.is-sel:hover{border-color:rgba(203,138,70,.55)}
}
@media(max-width:768px){
  .svc-card:hover,.svcs-grid .svc-card.is-sel:not(.is-open){border-color:rgba(255,255,255,.08)}
  .svc-card.is-open,.svc-card.is-open:hover{border-color:rgba(203,138,70,.35)}
  .svc-card-name{white-space:nowrap;font-size:1rem;letter-spacing:.02em}
  .svc-card-head{gap:12px}
}


/* ===== CREW ABOUT PHOTO: slow crossfade through the team ===== */
.crew-hero-photo{position:relative}
.crew-hero-photo .chp-alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity 1.8s cubic-bezier(.45,.05,.15,1),transform 7s linear;will-change:opacity,transform;border-radius:inherit}
.crew-hero-photo .chp-alt.is-on{opacity:1;transform:scale(1)}
.crew-hero-photo > img:first-child{transition:transform 7s linear}
.crew-hero-photo.base-on > img:first-child{transform:scale(1)}
.crew-hero-photo:not(.base-on) > img:first-child{transform:scale(1.05)}
.crew-hero-photo .chp-alt[src*="03"]{object-position:50% 28%}
.crew-hero-photo .chp-alt[src*="boat-monitor"]{object-position:50% 34%}
.crew-hero-photo .chp-alt[src*="01"]{object-position:50% 45%}
@media(prefers-reduced-motion:reduce){.crew-hero-photo .chp-alt{transition:opacity .6s ease;transform:none}}
/* in-house post card: the collage, framed on the middle panel */
.crew-how img[src*="post-collage"]{object-position:50% 50%}

/* about carousel crops: keep the action in the band */
.crew-hero-photo .chp-alt[src*="team-rink-wide"]{object-position:50% 66%}
.crew-hero-photo .chp-alt[src*="team-wild"]{object-position:50% 40%}
.crew-hero-photo .chp-alt[src*="team-donuts"]{object-position:50% 42%}
.crew-hero-photo .chp-alt[src*="team-boat"]{object-position:50% 50%}
.crew-hero-photo .chp-alt.is-under{opacity:1;transition:none}
/* process: centred again. The block can't shift now: the 4:3 frame is fixed and taller than the open list, so the section height never changes */
@media(min-width:1025px){
  .process{justify-content:center;padding-top:clamp(100px,14vh,180px);padding-bottom:clamp(100px,14vh,180px)}
  .proc-list,.proc-tabs{min-height:0}
}
@media(min-width:1025px){.proc-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}


/* ===== ABOUT CAROUSEL v2: wipe, no zoom ===== */
.crew-hero-photo{position:relative;overflow:hidden!important;border-radius:16px}
.crew-hero-photo > img.chp-layer{position:absolute!important;inset:0;width:100%;height:100%!important;object-fit:cover;opacity:1!important;transform:none!important;border-radius:0!important;
  transition:clip-path 1.25s cubic-bezier(.77,0,.18,1)!important;will-change:clip-path}
.crew-hero-photo > img.chp-layer:first-child{position:absolute!important}
@media(max-width:768px){.crew-hero-photo{border-radius:10px}.ph-rig{display:none!important}}
@media(prefers-reduced-motion:reduce){.crew-hero-photo > img.chp-layer{transition:none!important}}

/* how we work on phones: a shorter deck, the slide breathes */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .crew-scene-how{justify-content:center!important;padding-top:84px!important;padding-bottom:40px!important}
  .crew-scene-how .crew-how-grid{flex:none!important;height:min(54svh,440px)!important}
}


/* ===== PAGE TRANSITIONS v2 =====
   The sheet travels the whole way on one deliberate ease-in-out curve while the
   page behind dims; nothing inside is shown until it lands. Then the page's own
   content arrives: headline lifts in, copy follows, the photo wipes up. Closing
   is quick: content drops out first, then the sheet falls away. */
.overlay{transition:transform .6s cubic-bezier(.7,0,.84,0),border-radius .2s,visibility 0s .6s}
.overlay.open{transition:transform 1.05s cubic-bezier(.83,0,.17,1),border-radius .45s .7s,visibility 0s}
body.overlay-open #ovScrim{opacity:.72}
#ovScrim{transition:opacity .9s cubic-bezier(.65,0,.35,1)}
/* listing pages: content waits for the landing */
.overlay.open:not(.client-ov) .ov-content > *{transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1.1s cubic-bezier(.19,1,.22,1)}
.overlay.open:not(.ov-landed):not(.client-ov) .ov-content > *{opacity:0;transform:translateY(36px);transition:none}
.overlay.ov-landed:not(.client-ov) .ov-content > :nth-child(1){transition-delay:0s}
.overlay.ov-landed:not(.client-ov) .ov-content > :nth-child(2){transition-delay:.09s}
.overlay.ov-landed:not(.client-ov) .ov-content > :nth-child(3){transition-delay:.18s}
.overlay.ov-landed:not(.client-ov) .ov-content > :nth-child(4){transition-delay:.27s}
.overlay.ov-landed:not(.client-ov) .ov-content > :nth-child(n+5){transition-delay:.36s}
/* about page: nav, headline, copy, then the photo wipes up */
#crewOverlay .ov-page-nav,#crewOverlay .crew-scene-about .crew-lead,#crewOverlay .crew-scene-about .crew-hero-photo{transition:opacity .9s cubic-bezier(.19,1,.22,1),transform 1.1s cubic-bezier(.19,1,.22,1),clip-path 1.2s cubic-bezier(.77,0,.18,1)}
#crewOverlay:not(.ov-landed) .ov-page-nav{opacity:0;transform:translateY(-12px);transition:none}
#crewOverlay:not(.ov-landed) .crew-scene-about .crew-lead{opacity:0;transform:translateY(56px);transition:none}
#crewOverlay:not(.ov-landed) .crew-scene-about .crew-hero-photo{clip-path:inset(100% 0 0 0 round 16px);transition:none}
#crewOverlay.ov-landed .crew-scene-about .crew-hero-photo{clip-path:inset(0 0 0 0 round 16px);transition-delay:.18s}
#crewOverlay.ov-landed .crew-scene-about .crew-lead{transition-delay:.04s}
@media(prefers-reduced-motion:reduce){
  .overlay,.overlay.open{transition-duration:.01s}
  .overlay .ov-content > *,#crewOverlay .ov-page-nav,#crewOverlay .crew-lead,#crewOverlay .crew-hero-photo{opacity:1!important;transform:none!important;clip-path:none!important}
}
.crew-hero-photo > img.chp-layer{transition:clip-path 1s cubic-bezier(.77,0,.18,1)!important}

/* About holds longer before it animates out (the scene track is longer by the hold) */
.crew-scene-wrap{height:calc(100vh + 210vh + 145vh)}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){.crew-scene-wrap{height:calc(100svh + 190svh + 145svh)!important}}
/* the photo wipes in sooner on arrival so the carousel can start */
#crewOverlay.ov-landed .crew-scene-about .crew-hero-photo{transition-delay:.08s;transition-duration:.9s,1.1s,.95s}


/* ===== SERVICES ENTRANCE, fixed =====
   One transition list that carries the reveal (opacity + transform) and the
   selection states together, so neither overwrites the other. The cards drop
   their live backdrop blur (a blur re-rendering behind a moving card is what
   stuttered) for a solid tinted glass. */
@media(min-width:769px){
  .svcs-grid .svc-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(18,18,18,.78);
    transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1),border-color .5s ease,background .5s ease;will-change:opacity,transform}
  .svcs-grid .svc-card.is-sel{background:rgba(22,22,22,.86)}
  .svcs-grid.rv.v .svc-card:hover{transform:translateY(-4px);transition-delay:0s}
  .svcs-grid.rv.v .svc-card:nth-child(2){transition-delay:.12s,.12s,0s,0s}
  .svcs-grid.rv.v .svc-card:nth-child(3){transition-delay:.24s,.24s,0s,0s}
}
@media(min-width:769px) and (prefers-reduced-motion:no-preference){
  .svcs-grid.rv .svc-card{transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1),border-color .5s ease,background .5s ease}
  .svcs-grid.rv.v .svc-card:nth-child(2){transition-delay:.12s,.12s,0s,0s}
  .svcs-grid.rv.v .svc-card:nth-child(3){transition-delay:.24s,.24s,0s,0s}
}
.crew-hero-photo > img.chp-layer{transition:clip-path .8s cubic-bezier(.77,0,.18,1)!important}

/* ===== PHONES: single gutter, right-sized type (checked at 440px, iPhone 16 Pro Max) =====
   The section carries the 24px gutter; the .ctn inside adds nothing (it was doubling to 56px). */
@media(max-width:768px){
  .work,.about,.svcs,.process,.exp,.talk{padding-left:24px!important;padding-right:24px!important}
  .work .ctn,.about .ctn,.svcs .ctn,.process .ctn,.exp .ctn,.talk .ctn,.hero .ctn{padding-left:0!important;padding-right:0!important}
  section.work.sec-slide{padding-left:0!important;padding-right:0!important}
  .work .wk-head,.work .deck-nav,.work .wk-cta{padding-left:24px;padding-right:24px}

  /* services ledger: a shorter photo window on the open row */
  .svc-card.is-open .svc-card-head{padding-top:clamp(92px,19svh,150px)!important}
  .svc-card-desc{font-size:.84rem;line-height:1.6;padding:16px 20px 0}
  .svc-card-tags{padding:0 20px 20px}

  /* let's talk: the card goes nearly edge to edge and the form gets the width */
  .talk{padding-left:12px!important;padding-right:12px!important}
  .talk-card{padding:14px 14px 28px!important;border-radius:22px}
  .talk-form-card{padding:28px 20px 22px;border-radius:16px}
  .talk-form-h{font-size:1.45rem;margin-bottom:20px}
  .talk-input{font-size:16px}
  .talk-form-legal{line-height:1.5;margin-top:12px}
  .talk-form-legal a{display:inline}
  .talk-right{padding:30px 10px 0}
  .talk-h2{font-size:2.6rem;line-height:.95;margin-bottom:18px}
  .talk-h2 br{display:none}
  .talk-desc{font-size:.92rem;line-height:1.55}
  .talk-feat-t{font-size:.95rem}
  .talk-feat-d{font-size:.82rem}

  /* crew: as seen on tiles and the press table, tighter */
  .crew-press-sec .crew-cl-card{min-height:62px!important;padding:12px 8px!important;border-radius:12px}
  .crew-press-sec .seen-on-logo{max-width:78px;max-height:18px}
  .press-row{grid-template-columns:1fr 92px 44px!important;padding:14px 0;gap:10px}
  .press-col-title{font-size:.8rem!important;line-height:1.35}
  .press-col-source{font-size:.72rem!important;line-height:1.3}
  .press-col-year{font-size:.82rem}
}

/* services on phones: pills on one row, more air above and below the section */
@media(max-width:768px){
  .svcs{padding-top:128px!important;padding-bottom:96px!important}
  .svc-card-tags{flex-wrap:nowrap!important;gap:6px!important;padding:0 18px 20px!important}
  .svc-card-tag{white-space:nowrap;font-size:.52rem!important;letter-spacing:.1em!important;padding:6px 10px!important;flex:0 1 auto;min-width:0}
}
@media(max-width:768px) and (min-width:400px){.svc-card-tag{font-size:.58rem!important;padding:7px 12px!important}}

/* client pages: prev / next never collide. Each half takes its own column and long names wrap inside it */
.cli-nav-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.cli-nav-btn{min-width:0;max-width:100%;text-align:left}
.cli-nav-btn > div{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.cli-nav-btn:not(.prev){justify-self:end;text-align:right}
@media(max-width:768px){
  .cli-nav-footer{gap:12px;padding-top:32px;margin-top:48px}
  .cli-nav-btn{font-size:.62rem;letter-spacing:.06em;gap:8px;padding:10px 0;align-items:flex-start}
  .cli-nav-btn svg{flex:none;margin-top:14px}
  .cli-nav-label{font-size:.56rem;margin-bottom:4px}
}


/* ===== ABOUT PHOTO v3 =====
   1. The scroll scene drives the photo's opacity and transform directly; only the
      landing reveal (clip-path) may transition, or the photo trails the scroll.
   2. Carousel slots: transform-only wipe. */
#crewOverlay .crew-scene-about .crew-hero-photo{transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)!important;will-change:transform,opacity}
#crewOverlay:not(.ov-landed) .crew-scene-about .crew-hero-photo{transition:none!important}
.crew-hero-photo .chp-slot{position:absolute;inset:0;overflow:hidden;will-change:transform;transform:translate3d(100%,0,0);
  transition:transform .85s cubic-bezier(.77,0,.18,1);backface-visibility:hidden}
.crew-hero-photo .chp-slot > img.chp-img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover;opacity:1!important;
  border-radius:0!important;clip-path:none!important;will-change:transform;transform:translate3d(-100%,0,0);transition:transform .85s cubic-bezier(.77,0,.18,1)!important;backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){.crew-hero-photo .chp-slot,.crew-hero-photo .chp-slot > img.chp-img{transition:none!important}}
.crew-hero-photo .chp-img[src*="rink.webp"]{object-position:50% 34%}
.crew-hero-photo .chp-img[src*="bts-03"]{object-position:50% 28%}
.crew-hero-photo .chp-img[src*="team-rink-wide"]{object-position:50% 66%}
.crew-hero-photo .chp-img[src*="team-wild"]{object-position:50% 40%}
.crew-hero-photo .chp-img[src*="team-donuts"]{object-position:50% 42%}
.crew-hero-photo .chp-img[src*="team-boat"]{object-position:50% 50%}

/* ===== Project video cards: self-hosted thumbnails + centred play mark ===== */
.cli-video-wrap img{display:block;opacity:.78}
.cli-video-play{width:68px;height:68px;box-shadow:0 0 0 8px rgba(203,138,70,.16),0 12px 32px rgba(0,0,0,.35)}
.cli-video-play svg{margin:0;display:block;transform:translateX(1px)}
@media (max-width:600px){.cli-video-play{width:56px;height:56px;box-shadow:0 0 0 6px rgba(203,138,70,.16),0 10px 24px rgba(0,0,0,.35)}.cli-video-play svg{width:19px;height:19px}}

/* ===== Sticky exits: JS eases --exit-p every frame, so no CSS transition to fight it,
   and no rotation on text (rotated type re-rasterises and shimmers while moving) ===== */
.sec-exit-el{transition:none!important;backface-visibility:hidden}
.exit-left{transform:translate3d(calc(var(--exit-p,0) * -120px),0,0)}
.exit-right{transform:translate3d(calc(var(--exit-p,0) * 120px),0,0)}
@media(max-width:1024px){
  .exit-left,.exit-right{transform:translate3d(0,calc(var(--exit-p,0) * -36px),0) scale(calc(1 - var(--exit-p,0) * .04))}
}

/* ===== Crew About: taller carousel, block centred in the pinned screen ===== */
@media(min-width:769px){
  /* eyebrow sat ~80px above the headline; tighten it so the photo can take the room */
  .crew-scene-about .crew-lead{row-gap:30px;margin-bottom:28px}
  .crew-scene-about .crew-about-body{margin-bottom:0}
  .crew-scene-about .crew-hero-photo{aspect-ratio:auto;flex:1 1 auto;min-height:0;max-height:60vh}
  /* equal space above (under the 61px page nav) and below (viewport edge) */
  .crew-scene-layer{top:110px;bottom:50px}
  .crew-scene-in{padding-top:110px;padding-bottom:50px}
}

/* ===== PAGE TRANSITION: CROP CLOSE (view transition) =====
   Old page snapshot sits on top and is cropped away; the new page is live underneath
   at full size, so no black is ever shown. Sheets jump straight to their final place
   during the swap; the crop is the motion. */
html.wcs-vt .overlay,html.wcs-vt #ovScrim,html.wcs-vt #nv{transition:none!important}
html.wcs-vt::view-transition-group(root){animation:none}
html.wcs-vt::view-transition-image-pair(root){isolation:auto}
html.wcs-vt::view-transition-old(root){animation:wcsCropOld 1800ms linear both;z-index:2;mix-blend-mode:normal}
html.wcs-vt::view-transition-new(root){animation:wcsCropNew 1800ms both;z-index:1;mix-blend-mode:normal;transform-origin:50% 50%}
#wcsVtFx{position:fixed;inset:0;pointer-events:none;z-index:2147483000;view-transition-name:wcs-fx}
html.wcs-vt::view-transition-group(wcs-fx){animation:none;z-index:3}
html.wcs-vt::view-transition-old(wcs-fx){display:none}
html.wcs-vt::view-transition-new(wcs-fx){animation:none}
#wcsVtFx i{position:absolute;display:block}
#wcsVtFx .vr{background:#cb8a46;box-shadow:0 0 10px rgba(203,138,70,.45)}
#wcsVtFx .vr.h{height:1px;margin-top:-.5px}
#wcsVtFx .vr.v{width:1px;margin-left:-.5px}
#wcsVtFx .vc{width:10px;height:10px;margin:-5px 0 0 -5px;border:1px solid #cb8a46;box-sizing:border-box}
#wcsVtFx .vb{width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#cb8a46;box-shadow:0 0 24px rgba(203,138,70,.7)}
#wcsVtFx .vg{width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:1px solid #cb8a46;box-sizing:border-box}
@media(prefers-reduced-motion:reduce){#wcsVtFx{display:none}}

/* projects: the grid itself is just a holder; its cards cascade in on landing */
#projectsOverlay .ov-content > .po-grid{opacity:1!important;transform:none!important}
/* the about photo takes sideways swipes; vertical scrolling still passes through */
#crewOverlay .crew-hero-photo{touch-action:pan-y}

/* ===== Client pages: a polished sheet over Projects =====
   Up: the sheet rises on a long ease with rounded top corners that square off as it
   lands, while Projects eases back underneath. Back: the sheet slides down on a smooth
   in-out curve and Projects comes forward again. */
#clientOverlay{transition:transform .95s cubic-bezier(.65,0,.35,1),border-radius .3s,box-shadow .6s,visibility 0s .95s;box-shadow:0 -24px 80px rgba(0,0,0,.28)}
#clientOverlay.open{transition:transform 1.05s cubic-bezier(.83,0,.17,1),border-radius .45s .75s,box-shadow .6s .6s,visibility 0s;box-shadow:none}
#projectsOverlay{transform-origin:50% 0%}
#projectsOverlay.open{transition:transform 1.05s cubic-bezier(.83,0,.17,1),border-radius .6s,filter 1.05s cubic-bezier(.83,0,.17,1),visibility 0s}
#projectsOverlay.open.ov-behind{transform:translateY(-3vh);border-radius:0;filter:brightness(.84)}
html.wcs-vt #projectsOverlay{transition:none!important}
@media(prefers-reduced-motion:reduce){#projectsOverlay.open.ov-behind{transform:none;filter:none}}

/* ===== Why Choose Us on phones: tighter, and sat higher so the Trusted By cards
   clear Safari's bottom toolbar instead of riding the edge ===== */
@media(max-width:768px){
  /* centred in what's actually visible: the section is as tall as the screen without
     Safari's toolbar, so the extra bottom padding equals the strip the toolbar covers */
  section.about.sec-slide{padding-top:72px!important;padding-bottom:calc(72px + 100lvh - 100svh)!important}
  .about .ab-grid{margin-bottom:30px!important}
  .about .stats{padding-top:26px!important}
  .about .stats-trusted{margin-top:24px!important;padding-top:24px!important}
}

/* Why Choose Us (desktop): the copy column sits centred against the headline */
@media(min-width:769px){ .about .ab-grid{align-items:center} }
/* centre the copy on the headline itself: the eyebrow hangs above the headline out of flow */
@media(min-width:769px){
  .about .ab-grid > .rv.stag{position:relative}
  .about .ab-grid > .rv.stag > .sl{position:absolute;left:0;bottom:calc(100% + 16px);margin:0}
}

/* services: eyebrow, headline, line, then the cards one after another */
.svcs .svcs-head.v .svcs-sub{transition-delay:.16s}
.svcs-grid.rv.v .svc-card:nth-child(1){transition-delay:.26s,.26s,0s,0s!important}
.svcs-grid.rv.v .svc-card:nth-child(2){transition-delay:.38s,.38s,0s,0s!important}
.svcs-grid.rv.v .svc-card:nth-child(3){transition-delay:.5s,.5s,0s,0s!important}
.svcs-grid.rv.v .svc-card:hover{transition-delay:0s!important}

/* ===== About landing, refined =====
   Text and photo move on different axes. The words rise in line by line (eyebrow block
   fades, headline lines, then the two copy paragraphs), while the photo wipes in from the
   right, the same direction the carousel travels, so the photo reads as one system. */
#crewOverlay .crew-scene-about .crew-about-h1 .ac{display:block}
#crewOverlay .crew-scene-about .crew-lead{transform:none!important;transition:opacity .7s cubic-bezier(.19,1,.22,1)!important}
#crewOverlay:not(.ov-landed) .crew-scene-about .crew-lead{opacity:0;transition:none!important}
#crewOverlay .crew-scene-about .crew-about-h1 > span,
#crewOverlay .crew-scene-about .crew-about-desc > p{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);will-change:transform}
#crewOverlay:not(.ov-landed) .crew-scene-about .crew-about-h1 > span,
#crewOverlay:not(.ov-landed) .crew-scene-about .crew-about-desc > p{opacity:0;transform:translate3d(0,34px,0);transition:none}
#crewOverlay.ov-landed .crew-scene-about .crew-about-h1 > span:nth-child(2){transition-delay:.08s}
#crewOverlay.ov-landed .crew-scene-about .crew-about-desc > p:nth-child(1){transition-delay:.14s}
#crewOverlay.ov-landed .crew-scene-about .crew-about-desc > p:nth-child(2){transition-delay:.22s}
#crewOverlay .crew-scene-about .crew-hero-photo{transition:clip-path 1.15s cubic-bezier(.77,0,.18,1) .06s!important}
#crewOverlay:not(.ov-landed) .crew-scene-about .crew-hero-photo{clip-path:inset(0 0 0 100% round 16px)!important;transition:none!important}
#crewOverlay.ov-landed .crew-scene-about .crew-hero-photo{clip-path:inset(0 0 0 0 round 16px)}
@media(prefers-reduced-motion:reduce){
  #crewOverlay .crew-scene-about .crew-about-h1 > span,#crewOverlay .crew-scene-about .crew-about-desc > p{opacity:1!important;transform:none!important}
}

/* About photo: no clip-path entrance (Safari repaints it every frame); the first carousel
   slot slides in instead. Kept to a wide frame so it never goes near square. */
#crewOverlay .crew-scene-about .crew-hero-photo,
#crewOverlay:not(.ov-landed) .crew-scene-about .crew-hero-photo,
#crewOverlay.ov-landed .crew-scene-about .crew-hero-photo{clip-path:none!important;transition:none!important}
#crewOverlay .crew-scene-about .crew-hero-photo{background:transparent}
@media(min-width:769px){
  #crewOverlay .crew-scene-about{container-type:inline-size}
  #crewOverlay .crew-scene-about .crew-hero-photo{max-height:min(60vh, 50cqw)}
}
/* text: quicker, tighter stagger */
#crewOverlay .crew-scene-about .crew-about-h1 > span,
#crewOverlay .crew-scene-about .crew-about-desc > p{transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
#crewOverlay:not(.ov-landed) .crew-scene-about .crew-about-h1 > span,
#crewOverlay:not(.ov-landed) .crew-scene-about .crew-about-desc > p{transform:translate3d(0,26px,0)}
#crewOverlay.ov-landed .crew-scene-about .crew-about-h1 > span:nth-child(2){transition-delay:.06s}
#crewOverlay.ov-landed .crew-scene-about .crew-about-desc > p:nth-child(1){transition-delay:.1s}
#crewOverlay.ov-landed .crew-scene-about .crew-about-desc > p:nth-child(2){transition-delay:.16s}

/* the page header (logo, links, menu) is constant UI: it's in place on every page from the
   first frame of a page change, never fading in afterwards */
#crewOverlay .ov-page-nav,#crewOverlay:not(.ov-landed) .ov-page-nav{opacity:1!important;transform:none!important;transition:background .4s ease,color .4s ease,border-color .4s ease!important}

/* entrances begin moving on the very first frame after the crop: no initial delay on the
   first pieces, and fast-start curves so nothing sits blank */
#crewOverlay.ov-landed .crew-scene-about .crew-about-h1 > span:nth-child(1){transition-delay:0s}
#crewOverlay .crew-scene-about .crew-lead{transition:opacity .35s ease-out!important}
.overlay.ov-landed:not(.client-ov) .ov-content > :nth-child(1){transition-delay:0s!important}
.overlay.ov-landed:not(.client-ov) .ov-content > :nth-child(2){transition-delay:.06s!important}
.overlay.ov-landed:not(.client-ov) .ov-content > :nth-child(3){transition-delay:.12s!important}
.overlay.ov-landed:not(.client-ov) .ov-content > :nth-child(4){transition-delay:.18s!important}
.overlay.ov-landed:not(.client-ov) .ov-content > :nth-child(n+5){transition-delay:.24s!important}

/* ===== Desktop readability: Why Choose Us, About, How We Work sized up =====
   Bigger type everywhere on desktop, and on wide screens the content opens up from 1240px
   to 1440px so it stops reading as a small block in the middle of a big screen. */
@media(min-width:1025px){
  /* Why Choose Us */
  section.about .sl{font-size:12px}
  section.about .ab-h2{font-size:clamp(2.7rem,3.1vw,3.7rem)}
  section.about .ab-p{font-size:clamp(1rem,1.05vw,1.12rem);line-height:1.7}
  section.about .st-n{font-size:clamp(2.8rem,3.2vw,3.6rem)}
  section.about .st-l{font-size:.9rem;margin-top:4px}
  section.about .stats-seen-label{font-size:12px}
  section.about .cl-card{height:96px;min-width:170px}
  section.about .cl-card .cl-logo{transform:scale(1.15)}
  /* About landing */
  #crewOverlay .crew-scene .sl{font-size:12px}
  #crewOverlay .crew-scene-about .crew-about-h1{font-size:clamp(4.2rem,5vw,6.2rem)}
  #crewOverlay .crew-scene-about .crew-about-lead{font-size:clamp(1.4rem,1.5vw,1.75rem)}
  #crewOverlay .crew-scene-about .crew-about-body{font-size:clamp(1rem,1.02vw,1.1rem);line-height:1.7}
  /* How We Work */
  #crewOverlay .crew-scene-how .crew-section-title{font-size:clamp(2.1rem,2.05vw,2.6rem)}
  #crewOverlay .crew-scene-how .crew-how-head{grid-template-columns:minmax(0,1fr) 340px}   /* headline keeps its two lines */
  #crewOverlay .crew-scene-how .crew-how-sub{font-size:clamp(.98rem,1vw,1.08rem);max-width:340px;line-height:1.6}
  #crewOverlay .crew-scene-how .crew-how-title{font-size:clamp(1.3rem,1.4vw,1.6rem)}
  #crewOverlay .crew-scene-how .crew-how-copy{font-size:clamp(1rem,1vw,1.1rem);max-width:480px;line-height:1.65}
  #crewOverlay .crew-scene-how .crew-how-tab{font-size:12px}
  #crewOverlay .crew-scene-how .crew-how-grid{height:min(58vh,620px)}
}
@media(min-width:1500px){
  section.about .ctn{max-width:1440px}
  #crewOverlay .crew-scene .ctn{max-width:1440px!important}
}

/* header layer during a page change: no motion, above the crop and its rods */
html.wcs-vt::view-transition-group(wcs-nav){animation:none;z-index:4}
html.wcs-vt::view-transition-old(wcs-nav){display:none}
html.wcs-vt::view-transition-new(wcs-nav){animation:none}

/* side hairlines sit in the dead space: halfway between the screen edge and the content,
   now that the content opens up to 1440px on wide screens */
@media(min-width:1500px){
  .sec-lines .l{left:max(24px,calc((100% - 1368px) / 4))}
  .sec-lines .r{right:max(24px,calc((100% - 1368px) / 4))}
  .sec-lines .t,.sec-lines .b{left:max(24px,calc((100% - 1368px) / 4));right:max(24px,calc((100% - 1368px) / 4))}
  .sec-lines.box .t,.sec-lines.box .b{left:0;right:0}
}

/* ===== Desktop sizing, fluid =====
   One curve from a laptop (~1440-1512px: about 8% over the original sizes) to a wide monitor
   (~2000px: the large sizes). Replaces the fixed 1500px step, which hit laptops at full size. */
@media(min-width:1025px){
  section.about .sl,#crewOverlay .crew-scene .sl{font-size:11px}
  section.about .ab-h2{font-size:clamp(44px, calc(2.46vw + 8.8px), 60px)}
  section.about .ab-p{font-size:clamp(15px, calc(.41vw + 8.8px), 17.5px)}
  section.about .st-n{font-size:clamp(42px, calc(2.46vw + 6.8px), 58px)}
  section.about .st-l{font-size:clamp(13px, calc(.29vw + 8.6px), 14.5px)}
  section.about .stats-seen-label{font-size:11px}
  section.about .cl-card{height:clamp(80px, calc(1.64vw + 55px), 96px);min-width:0}
  section.about .cl-card .cl-logo{transform:scale(1.08)}
  #crewOverlay .crew-scene-about .crew-about-h1{font-size:clamp(76px, calc(3.28vw + 30.4px), 98px)}
  #crewOverlay .crew-scene-about .crew-about-lead{font-size:clamp(22px, calc(.82vw + 10.6px), 28px)}
  #crewOverlay .crew-scene-about .crew-about-body{font-size:clamp(15px, calc(.31vw + 10.8px), 17.5px)}
  #crewOverlay .crew-scene-how .crew-section-title{font-size:clamp(32px, calc(1.43vw + 12.4px), 42px)}
  #crewOverlay .crew-scene-how .crew-how-sub{font-size:clamp(14px, calc(.41vw + 8.3px), 17px)}
  #crewOverlay .crew-scene-how .crew-how-title{font-size:clamp(19px, calc(.82vw + 7.6px), 25px)}
  #crewOverlay .crew-scene-how .crew-how-copy{font-size:clamp(14.5px, calc(.41vw + 8.8px), 17.5px)}
  #crewOverlay .crew-scene-how .crew-how-tab{font-size:11px}
  #crewOverlay .crew-scene-how .crew-how-grid{height:min(54vh,600px)}
  /* the content column grows with the screen: 1240px on laptops up to 1440px around 2000px wide */
  section.about .ctn{max-width:clamp(1240px, 72vw, 1440px)}
  #crewOverlay .crew-scene .ctn{max-width:clamp(1240px, 72vw, 1440px)!important}
}
@media(min-width:1800px){
  section.about .sl,#crewOverlay .crew-scene .sl,section.about .stats-seen-label,#crewOverlay .crew-scene-how .crew-how-tab{font-size:12px}
}
/* hairlines follow the content column, halfway out into the dead space */
@media(min-width:1440px){
  .sec-lines .l{left:max(24px, calc((100% - clamp(1240px, 72vw, 1440px) + 72px) / 4))}
  .sec-lines .r{right:max(24px, calc((100% - clamp(1240px, 72vw, 1440px) + 72px) / 4))}
  .sec-lines .t,.sec-lines .b{left:max(24px, calc((100% - clamp(1240px, 72vw, 1440px) + 72px) / 4));right:max(24px, calc((100% - clamp(1240px, 72vw, 1440px) + 72px) / 4))}
  .sec-lines.box .t,.sec-lines.box .b{left:0;right:0}
}
@media(min-width:769px){ #crewOverlay .crew-scene-about .crew-hero-photo{max-height:min(50vh, 44cqw)} }

/* ===== Smoothness pass =====
   Nothing animates a filter any more: dimming is an overlay's opacity, black and white is
   baked into the image files, and blur panels fade with opacity instead of animating blur. */
.sec-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:60;border-radius:inherit}
.sec-receding,.ov-receding{will-change:transform}
.btn-o-dark,.btn-hiring{transition:color .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.po-filter{transition:color .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease)}
/* services background: grayscale now baked into the -bw files */
.svcs-bg-img{filter:none}
@media(max-width:768px){.svcs-bg-img{filter:none}.svcs-bg-img.is-on{opacity:.2}}
/* How We Work cards (tablet and desktop): static photo filter, open/closed dimming on the dim layer */
@media(min-width:769px){
  .crew-how img,.crew-scene .crew-how img,.crew-how:not(.is-open) img,.crew-how.is-open img{filter:saturate(.8) brightness(.9);transition:transform 1.4s cubic-bezier(.45,.05,.15,1)}
  .crew-how .crew-how-dim{position:absolute;inset:0;background:#000;opacity:.2;pointer-events:none;transition:opacity 1s ease;z-index:0}
  .crew-how.is-open .crew-how-dim{opacity:.09}
  .crew-how-txt{transition:opacity 1s ease!important;backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1)}
}
/* header: the blur itself never animates (Safari re-renders it every frame when it does) */
nav#nv{transition:background .35s ease,padding .35s ease,transform .4s cubic-bezier(.16,1,.3,1)!important}

/* ===== Header during a page change =====
   No bar, blur or shadow while the crop runs (the snapshot can't carry a backdrop blur, so a
   bar would pop in and snap back). Old and new headers crossfade mid crop; positions match. */
html.wcs-vt-hdr #nv,html.wcs-vt-hdr .ov-page-nav,html.wcs-vt-hdr .ov-nav{background:transparent!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border-color:transparent!important;transition:none!important}
html.wcs-vt-hdr #nv::before,html.wcs-vt-hdr #nv::after,html.wcs-vt-hdr .ov-page-nav::before,html.wcs-vt-hdr .ov-page-nav::after{display:none!important}
html.wcs-vt::view-transition-old(wcs-nav){display:block;animation-name:wcsNavOut;animation-fill-mode:both;animation-timing-function:linear}
html.wcs-vt::view-transition-new(wcs-nav){animation-name:wcsNavIn;animation-fill-mode:both;animation-timing-function:linear}
@keyframes wcsNavOut{0%,38%{opacity:1}62%,100%{opacity:0}}
@keyframes wcsNavIn{0%,38%{opacity:0}62%,100%{opacity:1}}

/* ===== Header never moves between pages =====
   1) Native scrollbars are hidden on every scrolling page (the side dial is the scroll cue), so
      the page width never changes when a page with a scrollbar swaps for one without.
   2) The main header keeps one padding in every state instead of tightening when scrolled. */
html,body,.overlay,#crewOverlay,#projectsOverlay,#companiesOverlay,#contactOverlay,#clientOverlay{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,.overlay::-webkit-scrollbar{display:none;width:0;height:0}
@media(min-width:769px){ nav#nv,nav#nv.s,nav#nv.nav-light,nav#nv.nav-ov-light,nav#nv.nav-ov-dark{padding:16px 36px} }
/* self-hosted spots in the lightbox match the vimeo frame */
.lb-content video{width:100%;height:100%;border:none;border-radius:14px;background:#000;object-fit:contain}
.cli-bts-img.bts-full{grid-column:1/-1;grid-row:span 2}
@media(max-width:768px){.cli-bts-img.bts-full{grid-column:1/-1;aspect-ratio:16/9}}
/* ===== The Association: season accordion + town index ===== */
.tas{container-type:inline-size;margin:8px 0}
.tas-row{display:flex;gap:10px;height:calc((100cqw - 252px) * .3375 + 44px);min-height:300px}
.tas-s{position:relative;flex:.001 1 96px;min-width:0;border-radius:18px;overflow:hidden;clip-path:inset(0 round 18px);isolation:isolate;background:#0d0d0d;border:1px solid rgba(255,255,255,.06);transition:flex-grow .85s cubic-bezier(.65,0,.2,1),border-color .4s}
.tas-s.open{flex-grow:1;border-color:rgba(255,255,255,.1)}
.tas-cover{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;color:#fff;cursor:pointer;text-align:left;font:inherit;transition:opacity .35s}
.tas-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.42) contrast(1.05);transition:filter .5s,transform 1s cubic-bezier(.2,.8,.2,1)}
.tas-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.35),rgba(8,8,8,.15) 40%,rgba(8,8,8,.85))}
.tas-cover:hover img{filter:grayscale(.4) brightness(.6);transform:scale(1.05)}
.tas-no{position:absolute;z-index:1;top:18px;left:0;right:0;text-align:center;font-size:1.55rem;font-weight:300;line-height:1;letter-spacing:.02em;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;transition:color .4s}
.tas-cover:hover .tas-no{color:var(--orange-l)}
.tas-vert{position:absolute;z-index:1;left:50%;bottom:20px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-size:.64rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#fff;display:flex;gap:16px;white-space:nowrap}
.tas-vert i{font-style:normal;color:var(--orange-l)}
.tas-bar{display:none}
.tas-s.open .tas-cover{opacity:0;pointer-events:none}
.tas-eb{font-size:.56rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--orange-l)}
.tas-body{position:absolute;inset:0;padding:22px;display:grid;grid-template-columns:minmax(0,1fr) 60%;gap:30px;align-items:center;opacity:0;pointer-events:none;transition:opacity .25s}
.tas-s.open .tas-body{opacity:1;pointer-events:auto;transition:opacity .55s .4s}
.tas-glow{position:absolute;inset:-25%;width:150%;height:150%;object-fit:cover;filter:blur(60px) saturate(1.3);opacity:.22;pointer-events:none;transition:opacity .6s}
.tas-list{position:relative;display:grid;align-content:center;padding-left:6px}
.tas-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08)}
.tas-ct{font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.tas-town{display:grid;grid-template-columns:30px 1fr auto;align-items:baseline;gap:10px;width:100%;padding:clamp(7px,1.1cqw,12px) 0;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.tas-town .k{font-size:.58rem;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.25);transition:color .25s}
.tas-town .n{font-size:clamp(1rem,2.1cqw,1.65rem);font-weight:900;letter-spacing:-.015em;text-transform:uppercase;line-height:1.05;color:rgba(255,255,255,.26);transition:color .3s,transform .4s cubic-bezier(.2,.8,.2,1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tas-town .t{font-size:.62rem;color:rgba(255,255,255,.28);white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .25s}
.tas-town:hover .n{color:rgba(255,255,255,.7)}
.tas-town.on .n{color:#fff;transform:translateX(4px)}
.tas-town.on .k,.tas-town.on .t{color:var(--orange-l)}
.tas-frame{position:relative;min-width:0}
.tas-link{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;clip-path:inset(0 round 12px);isolation:isolate;background:#000;box-shadow:0 24px 60px -20px rgba(0,0,0,.8)}
.tas-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform .8s cubic-bezier(.2,.8,.2,1)}
.tas-link:hover img{transform:scale(1.03)}
.tas-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--orange);display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tas-play svg{margin-left:3px}
.tas-link:hover .tas-play{transform:scale(1.08)}
@media(max-width:768px){
  .tas-row{flex-direction:column;height:auto;min-height:0;gap:10px}
  .tas-s,.tas-s.open{flex:none}
  .tas-cover{position:relative;display:block;height:76px}
  .tas-s.open .tas-cover{display:none}
  .tas-cover img{transform:none;filter:grayscale(1) brightness(.35)}
  .tas-cover::after{background:linear-gradient(90deg,rgba(8,8,8,.9) 35%,rgba(8,8,8,.4))}
  .tas-no,.tas-vert{display:none}
  .tas-bar{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:0 18px}
  .tas-bar .tas-eb{display:block;margin-bottom:6px}
  .tas-tw{display:block;font-size:.72rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tas-pl{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:1rem}
  .tas-body{position:relative;inset:auto;display:none;grid-template-columns:1fr;padding:14px;gap:16px;overflow:hidden}
  .tas-s.open .tas-body{display:grid;animation:tasIn .5s cubic-bezier(.2,.8,.2,1)}
  .tas-frame{order:-1}
  .tas-list{padding-left:0}
  .tas-town .n{font-size:1.15rem}
}
@keyframes tasIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== How We Work accordion: smooth on desktop =====
   The card widths animate, so everything inside is held at the open card's size: the photo
   never rescales and the copy never rewraps mid-move. No backdrop blur or filter rides the
   resize (both made Safari re-render every frame). */
@media(min-width:1025px){
  .crew-how-grid{container-type:inline-size}
  .crew-how img,.crew-scene .crew-how img,.crew-how:not(.is-open) img,.crew-how.is-open img{left:50%;right:auto;width:calc((100cqw - 28px) * 2.4 / 4.4);max-width:none;filter:none;transform:translateX(-50%)}
  .crew-how:hover img{transform:translateX(-50%) scale(1.03)}
  .crew-how .crew-how-dim{opacity:.3}
  .crew-how.is-open .crew-how-dim{opacity:.16}
  .crew-how-txt{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .crew-how-copy-in{width:calc((100cqw - 28px) * 2.4 / 4.4 - 52px)}
  .crew-how-plus{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.35)}
  .crew-how{will-change:flex-grow}
}
/* Trusted By: every logo sits in the same size chip */
@media(min-width:769px){
  section.about .cl-card{flex:0 0 clamp(166px, calc(2.6vw + 128px), 204px);width:clamp(166px, calc(2.6vw + 128px), 204px);min-width:0;padding-left:14px;padding-right:14px}
}
/* How We Work: a soft blur under the open card's copy, feathered up into the photo.
   It lives on its own layer and only fades in once the card has finished widening, so
   the resize itself never carries a backdrop blur. */
@media(min-width:1025px){
  .crew-how-txt::before{content:'';position:absolute;left:0;right:0;bottom:0;top:-56px;z-index:-1;pointer-events:none;
    backdrop-filter:blur(14px) saturate(1.05);-webkit-backdrop-filter:blur(14px) saturate(1.05);
    -webkit-mask-image:linear-gradient(to top,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,#000 55%,transparent 100%);
    opacity:0;transition:opacity .25s ease}
  .crew-how.is-open .crew-how-txt::before{opacity:1;transition:opacity .7s ease .95s}
}
/* phones: bigger About + How We Work headlines */
@media(max-width:768px){
  #crewOverlay .crew-scene-about .crew-about-h1{font-size:clamp(2.5rem,11.2vw,3.2rem);line-height:.92}
  #crewOverlay .crew-scene-about .crew-about-h1 .crew-h1-lead{font-size:.62em;line-height:1.05;display:block;margin-bottom:.12em}
  #crewOverlay .crew-scene-how .crew-section-title{font-size:clamp(1.55rem,6.6vw,1.95rem);line-height:1.04}
}

/* Team grid adapts to headcount: 2 across up to 4 people, 3 across from 5 on, and a short last row sits centered */
.crew-team-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.crew-team-grid>.crew-photo-card{grid-column:span 2}
.crew-team-grid>.crew-photo-card:nth-child(2n+1):last-child{grid-column:2/span 2}
@media(min-width:561px){
  .crew-team-grid:has(>:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr))}
  .crew-team-grid:has(>:nth-child(5))>.crew-photo-card:nth-child(n){grid-column:span 2}
  .crew-team-grid:has(>:nth-child(5))>.crew-photo-card:nth-child(3n+1):last-child{grid-column:3/span 2}
  .crew-team-grid:has(>:nth-child(5))>.crew-photo-card:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2}
}
.crew-photo-card img{object-position:50% 30%}
@media(max-width:1024px){
  .crew-team-layout{grid-template-columns:1fr;gap:28px}
  .crew-team-heading-dark{margin-bottom:16px}
  .crew-team-desc-dark{max-width:52ch}
}
@media(max-width:560px){
  .crew-team-layout{gap:20px}
  .crew-pc-name{left:12px;right:12px;bottom:12px;font-size:.8rem;line-height:1.2}
  .crew-pc-role{top:10px;right:10px}
}

/* Project page quotes (What They Said), picked per project in Reviews */
.cli-quotes{margin-top:56px}
.cli-quotes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.cli-quote{margin:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:34px 32px 28px;display:flex;flex-direction:column;gap:22px}
.cli-quote-mark{font-family:var(--display);font-weight:800;font-size:3.4rem;line-height:1;height:26px;color:var(--orange)}
.cli-quote-text{margin:0;flex:1;font-size:clamp(1rem,1.35vw,1.18rem);font-weight:600;line-height:1.5;color:rgba(255,255,255,.88);letter-spacing:-.005em}
.cli-quote-by{display:flex;align-items:center;gap:12px}
.cli-quote-name{display:block;font-weight:700;font-size:.8rem;color:#fff}
.cli-quote-co{display:block;margin-top:2px;font-size:.68rem;color:rgba(255,255,255,.45)}
.cli-quotes.one .cli-quote{padding:44px 44px 34px}
.cli-quotes.one .cli-quote-text{font-size:clamp(1.1rem,1.8vw,1.45rem);max-width:46ch}
@media(max-width:560px){.cli-quotes{margin-top:40px}.cli-quote,.cli-quotes.one .cli-quote{padding:28px 22px 22px;gap:18px}.cli-quote-mark{font-size:2.8rem;height:20px}}


/* ===== HOME: still landing (data-intro="still") =====
   The hero opens full bleed with the copy focusing in; scroll plays only the close.
   The track is the back half of the reel intro's track so the close keeps the same pace. */
body.home-still .home-scene-track{height:132vh}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){body.home-still .home-scene-track{height:110svh}}
body.home-still .hero-land{display:none}
/* hero photo carousel: stacked stills that cross-fade */
.hero-drift[data-os-list="hero"] .hero-still{transition:opacity 1.8s ease}
.hero-drift[data-os-list="hero"] .hero-still.hs-alt{opacity:0}
.hero-drift[data-os-list="hero"] .hero-still.hs-alt.hs-on{opacity:.9}
.hero-drift[data-os-list="hero"] .hero-still.hs-first:not(.hs-on){opacity:0}

/* project page title: a long name splits into the title and a smaller subtitle line (WCSR.title) */
.cli-name-sub{display:block;font-size:.4em;line-height:1.15;letter-spacing:.02em;margin-top:.55em;color:rgba(255,255,255,.45);font-weight:700}

/* Recent Projects: a project with a Vertical Cover swaps in its portrait art on phones (<picture> in WCSR.wkCard) */
.wk-card picture{display:contents}
/* phones: portrait art fills the card, anchored at the top (never cropped at the sides). The art itself runs long
   (One Winona's poster continues into ice that fades to dark) so the title sits on dark; short phones get a fade behind the title */
@media(max-width:768px){
  .wk-card.has-v{position:relative;overflow:hidden;background:#111}
  .wk-card.has-v{background:#151515}
  .wk-card.has-v img{position:relative;z-index:1;object-fit:cover;object-position:50% 0}
  .wk-card.has-v .wk-card-info{z-index:2;padding-top:56px;background:linear-gradient(to top,rgba(21,21,21,.96) 0%,rgba(21,21,21,.9) 45%,rgba(21,21,21,0) 100%)}
}

/* desktop Recent Projects: the featured card is a true 16:9 frame (2/3 of the row) with the two small cards stacked beside it,
   so wide covers show whole; the grid narrows on short screens so it always fits one screen */
@media(min-width:769px){
  .work .wk-grid{height:auto;max-width:min(1240px,calc((100vh - 330px) * 2.66));grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr}
  .work .wk-card.wk-featured{aspect-ratio:16/9;height:auto;min-height:0}
  .work .wk-card.wk-small{aspect-ratio:auto;height:auto;min-height:0}
}

/* >>> PostLaab page (source: os/postlaab.css, injected by os/pl_patch.py)
   One pinned scene drives everything from scroll (POSTLAAB SCENE in main.js): the wordmark hands off to a
   monitor that steps through Edit, Sound, Color, VFX and 3D. Scroll JS owns transform/opacity on the moving
   pieces, so none of them carry CSS transitions on those properties. */
#postlaabOverlay{z-index:301;background:#070707;color:#fff;scrollbar-width:none}
#postlaabOverlay::-webkit-scrollbar{display:none}
.pl-ov{--pl-g:clamp(24px,5vw,72px);--pl-line:rgba(255,255,255,.09);--pl-mute:rgba(255,255,255,.52)}

/* ---------- pinned scene ---------- */
.pl-scene{position:relative;height:720vh}
.pl-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 110%,rgba(203,138,70,.10),transparent 60%),#070707}
.pl-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.pl-hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pl-g);will-change:transform,opacity}
.pl-eye{font-size:.625rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.pl-eye::before,.pl-eye::after{content:'';width:28px;height:1px;background:var(--orange)}
.pl-word{font-family:var(--display);font-weight:800;font-size:clamp(3.2rem,14.2vw,15rem);line-height:.86;letter-spacing:-.02em;display:flex;overflow:hidden;padding:.04em 0}
.pl-word span{display:inline-block}
.pl-word span:nth-child(n+5){color:var(--orange)}
.pl-tag{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(.95rem,1.7vw,1.45rem);letter-spacing:.02em;margin-top:clamp(18px,2.4vw,30px)}
.pl-sub{max-width:560px;margin-top:14px;font-size:clamp(.9rem,1.1vw,1.02rem);line-height:1.65;color:var(--pl-mute)}
.pl-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.58rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--pl-mute)}
.pl-cue i{width:1px;height:38px;background:linear-gradient(var(--orange),transparent);transform-origin:top;animation:plCue 2.2s var(--ease) infinite}
@keyframes plCue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* entrance: keyed off ov-landed (the page transition has finished) */
.pl-eye,.pl-tag,.pl-sub,.pl-cue{opacity:0;transform:translateY(16px);transition:none}
.pl-word span{transform:translateY(105%);transition:none}
#postlaabOverlay.ov-landed .pl-word span{transform:none;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
#postlaabOverlay.ov-landed .pl-word span:nth-child(2){transition-delay:.04s}
#postlaabOverlay.ov-landed .pl-word span:nth-child(3){transition-delay:.08s}
#postlaabOverlay.ov-landed .pl-word span:nth-child(4){transition-delay:.12s}
#postlaabOverlay.ov-landed .pl-word span:nth-child(5){transition-delay:.16s}
#postlaabOverlay.ov-landed .pl-word span:nth-child(6){transition-delay:.20s}
#postlaabOverlay.ov-landed .pl-word span:nth-child(7){transition-delay:.24s}
#postlaabOverlay.ov-landed .pl-word span:nth-child(8){transition-delay:.28s}
#postlaabOverlay.ov-landed .pl-eye,#postlaabOverlay.ov-landed .pl-tag,#postlaabOverlay.ov-landed .pl-sub,#postlaabOverlay.ov-landed .pl-cue{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
#postlaabOverlay.ov-landed .pl-tag{transition-delay:.36s}
#postlaabOverlay.ov-landed .pl-sub{transition-delay:.46s}
#postlaabOverlay.ov-landed .pl-cue{transition-delay:.9s}

/* deck: chapter copy + monitor */
.pl-deck{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.8fr);align-items:center;gap:clamp(32px,4.5vw,80px);
  padding:92px var(--pl-g) 104px;max-width:1680px;margin:0 auto;opacity:0;pointer-events:none;will-change:transform,opacity}
.pl-deck.on{pointer-events:auto}
.pl-copy{position:relative;height:100%;min-height:260px}
.pl-ch{position:absolute;left:0;right:0;top:50%;opacity:0;will-change:transform,opacity}
.pl-num{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.72rem;letter-spacing:.14em;color:var(--orange);margin-bottom:18px}
.pl-num i{font-style:normal;color:var(--pl-mute)}
.pl-ch-t{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,5.6vw,5.6rem);line-height:.92;letter-spacing:-.015em}
.pl-ch-t b{color:var(--orange)}
.pl-ch-p{margin-top:22px;max-width:400px;font-size:clamp(.95rem,1.12vw,1.06rem);line-height:1.7;color:var(--pl-mute)}

.pl-mon{position:relative;border-radius:16px;background:#0e0e0e;box-shadow:0 0 0 1px var(--pl-line),0 40px 120px rgba(0,0,0,.55);overflow:hidden}
.pl-mon-bar,.pl-mon-foot{display:flex;align-items:center;gap:12px;height:38px;padding:0 16px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.66rem;letter-spacing:.08em;color:var(--pl-mute);text-transform:uppercase}
.pl-mon-bar{border-bottom:1px solid var(--pl-line)}
.pl-mon-foot{border-top:1px solid var(--pl-line);justify-content:space-between}
.pl-rec{width:7px;height:7px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.18);animation:plRec 1.6s steps(2,jump-none) infinite}
@keyframes plRec{50%{opacity:.25}}
.pl-file{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-tc{margin-left:auto;color:var(--orange);font-variant-numeric:tabular-nums}
.pl-screen{position:relative;aspect-ratio:16/9;background:#0a0a0a;overflow:hidden}
.pl-v{position:absolute;inset:0;opacity:0;will-change:opacity}

/* rail */
.pl-rail{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;gap:clamp(10px,1.6vw,22px);opacity:0;will-change:opacity}
.pl-rail div{width:clamp(48px,7vw,104px)}
.pl-rail b{display:block;font-size:.58rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--pl-mute);margin-bottom:8px;transition:color .3s}
.pl-rail div.on b{color:#fff}
.pl-rail i{display:block;height:2px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.pl-rail i::after{content:'';position:absolute;inset:0;background:var(--orange);transform:scaleX(var(--f,0));transform-origin:left}

/* --- Edit: timeline --- */
.pl-v-edit{background:#101010;display:flex;flex-direction:column}
.pl-ed-view{flex:0 0 46%;position:relative;border-bottom:1px solid var(--pl-line);display:flex;align-items:center;justify-content:center;background:#0b0b0b}
.pl-ed-frame{position:relative;height:84%;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#151515}
.pl-ed-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.pl-ed-frame img.on{opacity:1}
.pl-ed-tl{flex:1;position:relative;padding:10px 12px 10px 46px}
.pl-ed-ruler{position:absolute;left:46px;right:12px;top:6px;height:12px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 8%)}
.pl-ed-tracks{position:absolute;left:46px;right:12px;top:24px;bottom:10px;display:grid;grid-template-rows:repeat(5,1fr);gap:4px}
.pl-ed-tr{position:relative;background:rgba(255,255,255,.025);border-radius:3px}
.pl-ed-tr::before{content:attr(data-n);position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);font-family:ui-monospace,Menlo,monospace;font-size:.55rem;color:var(--pl-mute)}
.pl-clip{position:absolute;top:0;bottom:0;border-radius:3px;overflow:hidden;background:#2f4f7a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);will-change:transform,opacity;opacity:0}
.pl-clip.v{background-size:cover;background-position:center}
.pl-clip.v::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(35,70,120,.55),rgba(35,70,120,.25))}
.pl-clip.a{background:#1f5a40}
.pl-clip.a::after{content:'';position:absolute;inset:22% 4%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 3px);-webkit-mask:linear-gradient(90deg,#000 0 30%,rgba(0,0,0,.4) 45%,#000 60% 80%,rgba(0,0,0,.5));mask:linear-gradient(90deg,#000 0 30%,rgba(0,0,0,.4) 45%,#000 60% 80%,rgba(0,0,0,.5))}
.pl-clip.t{background:#7a4f8f}
.pl-clip span{position:absolute;left:6px;top:3px;z-index:1;font-family:ui-monospace,Menlo,monospace;font-size:.5rem;letter-spacing:.04em;color:rgba(255,255,255,.85);white-space:nowrap}
.pl-ph{position:absolute;top:18px;bottom:6px;left:46px;width:1px;background:var(--orange);will-change:transform;z-index:2}
.pl-ph::before{content:'';position:absolute;top:-6px;left:-5px;border:5px solid transparent;border-top:7px solid var(--orange)}

/* --- Sound: stems + meters --- */
.pl-v-sound{background:#0d0d0d;display:grid;grid-template-columns:1fr 54px;gap:14px;padding:18px 18px 16px}
.pl-st-rows{display:grid;grid-template-rows:repeat(3,1fr);gap:10px;min-height:0}
.pl-st{position:relative;border-radius:6px;background:rgba(255,255,255,.025);display:flex;align-items:center;gap:2px;padding:0 10px 0 48px}
.pl-st::before{content:attr(data-n);position:absolute;left:10px;top:50%;transform:translateY(-50%);font-family:ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.1em;color:var(--pl-mute)}
.pl-st i{flex:1;height:84%;border-radius:1px;background:var(--c,#fff);transform:scaleY(0);will-change:transform}
.pl-st:nth-child(1){--c:#e9e4dc}.pl-st:nth-child(2){--c:var(--orange)}.pl-st:nth-child(3){--c:#6aa5d8}
.pl-meter{display:grid;grid-template-columns:1fr 1fr;gap:5px;position:relative;padding-bottom:24px}
.pl-meter i{position:relative;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.pl-meter i::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#3fb56b 0 62%,#e6c14a 62% 84%,#e5484d 84%);transform:scaleY(var(--l,0));transform-origin:bottom}
.pl-lufs{position:absolute;left:-30px;right:0;bottom:0;text-align:right;font-family:ui-monospace,Menlo,monospace;font-size:.56rem;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- Color: log vs graded wipe + wheels --- */
.pl-v-color{background:#0b0b0b}
.pl-co-img{position:absolute;inset:0}
.pl-co-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-co-g img{filter:saturate(1.12) contrast(1.06)}
.pl-co-log{position:absolute;inset:0;overflow:hidden;will-change:transform}
.pl-co-log>div{position:absolute;inset:0;will-change:transform}
.pl-co-log img{filter:saturate(.32) contrast(.62) brightness(1.18) sepia(.06)}
.pl-co-line{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);will-change:transform}
.pl-co-line::before,.pl-co-line::after{position:absolute;top:14px;font-family:ui-monospace,Menlo,monospace;font-size:.56rem;letter-spacing:.12em;padding:4px 7px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;white-space:nowrap}
.pl-co-line::before{content:'GRADE';right:10px}
.pl-co-line::after{content:'LOG';left:10px}
.pl-wheels{position:absolute;left:14px;bottom:14px;display:flex;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(10,10,10,.72)}
.pl-wh{width:clamp(34px,4.6vw,58px);aspect-ratio:1;border-radius:50%;position:relative;
  background:conic-gradient(from 90deg,#e5484d,#e6c14a,#3fb56b,#3fb6c8,#4a6fe6,#b44ad8,#e5484d);-webkit-mask:radial-gradient(circle,transparent 0 55%,#000 56%);mask:radial-gradient(circle,transparent 0 55%,#000 56%)}
.pl-whw{position:relative}
.pl-whw b{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.pl-whw i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.4);will-change:transform}
.pl-whw em{display:block;margin-top:5px;text-align:center;font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:.48rem;letter-spacing:.12em;color:var(--pl-mute)}

/* --- VFX: comp layers --- */
.pl-v-vfx{background:radial-gradient(70% 70% at 50% 50%,#141414,#090909);perspective:1400px;perspective-origin:50% 40%}
.pl-fx-stack{position:absolute;left:50%;top:54%;width:56%;aspect-ratio:16/9;transform-style:preserve-3d;margin:0;transform:translate(-50%,-50%)}
.pl-fx-l{position:absolute;inset:0;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.16);will-change:transform,opacity;background:#111}
.pl-fx-l img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-fx-l.m img{filter:grayscale(1) contrast(3.2) brightness(1.25)}
.pl-fx-l.cg{background:transparent;box-shadow:0 0 0 1px rgba(203,138,70,.65)}
.pl-fx-l.cg svg{position:absolute;inset:0;width:100%;height:100%}
.pl-fx-l b{position:absolute;left:8px;top:7px;font-family:ui-monospace,Menlo,monospace;font-size:.5rem;letter-spacing:.14em;padding:3px 6px;border-radius:3px;background:rgba(0,0,0,.65);color:#fff;z-index:1}
.pl-fx-trk{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border:1px solid var(--orange);will-change:opacity}
.pl-fx-trk::before,.pl-fx-trk::after{content:'';position:absolute;background:var(--orange)}
.pl-fx-trk::before{left:50%;top:-5px;bottom:-5px;width:1px}
.pl-fx-trk::after{top:50%;left:-5px;right:-5px;height:1px}

/* --- 3D --- */
.pl-v-3d{background:radial-gradient(60% 60% at 50% 45%,#161310,#080808)}
.pl-v-3d canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---------- sections after the scene ---------- */
.pl-sec{position:relative;padding:clamp(90px,11vw,160px) 0;background:#070707}
.pl-wrap{max-width:1400px;margin:0 auto;padding:0 var(--pl-g)}
.pl-sl{font-size:.625rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pl-sl::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange)}
.pl-h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,5.2vw,4.8rem);line-height:.95;letter-spacing:-.01em}
.pl-h2 .mt,.pl-cta-h .mt{color:rgba(255,255,255,.38)}
.pl-p{font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.75;color:var(--pl-mute);max-width:560px}
.pl-rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.pl-rv.in{opacity:1;transform:none}
.pl-rv.in+.pl-rv.in{transition-delay:.1s}

.pl-work{padding-top:clamp(70px,8vw,120px);border-top:1px solid var(--pl-line)}
.pl-head{display:flex;flex-direction:column;margin-bottom:clamp(36px,4.5vw,64px)}
.pl-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(18px,2vw,30px) clamp(16px,2vw,28px);align-items:start}
.pl-card{display:block;cursor:pointer;opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.pl-card.in{opacity:1;transform:none}
/* 6 columns: featured takes 4 (two rows), the next two stack beside it, the rest run 3 across; a last row of 2 splits the width, a lone last card runs wide */
.pl-card{grid-column:span 2}
.pl-card:first-child{grid-column:span 4;grid-row:span 2}
.pl-card.pl-w3{grid-column:span 3}
.pl-card.pl-w6{grid-column:span 6}
.pl-card.pl-w6 .pl-card-img{aspect-ratio:21/9}
.pl-card-img{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111}
.pl-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease)}
.pl-card:hover .pl-card-img img{transform:scale(1.06)}
.pl-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.pl-card-go{position:absolute;right:16px;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;border-radius:17px;background:rgba(255,255,255,.12);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ease)}
.pl-card:hover .pl-card-go{opacity:1;transform:none}
.pl-card-meta{display:flex;align-items:baseline;gap:14px;padding:18px 2px 0}
.pl-card-n{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.7rem;color:var(--orange)}
.pl-card-name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:.01em}
.pl-card-tag{margin-left:auto;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pl-mute);white-space:nowrap}
.pl-card:not(:first-child) .pl-card-meta{flex-wrap:wrap;row-gap:6px}
.pl-card:not(:first-child) .pl-card-tag{margin-left:0;flex-basis:100%;padding-left:28px}

.pl-roof{background:#0b0b0b}
.pl-roof-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:start}
.pl-list{list-style:none;margin-top:38px;border-top:1px solid var(--pl-line)}
.pl-list li{display:grid;grid-template-columns:44px 120px 1fr;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--pl-line)}
.pl-list span{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.7rem;color:var(--orange)}
.pl-list b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.05rem}
.pl-list em{font-style:normal;font-size:.9rem;color:var(--pl-mute)}
.pl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.pl-chips span{height:32px;display:inline-flex;align-items:center;padding:0 14px;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8)}

.pl-cta{text-align:center}
.pl-cta .pl-wrap{display:flex;flex-direction:column;align-items:center}
.pl-cta .pl-sl::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange)}
.pl-cta-h{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,6vw,5.6rem);line-height:.95;letter-spacing:-.015em;max-width:1100px}
.pl-cta .pl-p{margin:24px auto 0}
.pl-btn{margin-top:36px;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 30px;border-radius:27px;background:var(--orange);color:#0a0a0a;font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;transition:transform .4s var(--ease),background .3s}
.pl-btn:hover{transform:scale(1.04);background:var(--orange-l)}

/* ---------- tablet ---------- */
@media(max-width:1100px){
  .pl-deck{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:28px;padding:92px var(--pl-g) 100px}
  .pl-copy{height:auto;min-height:0;display:grid}
  .pl-ch{position:relative;top:auto;grid-area:1/1}
  .pl-ch-t{font-size:clamp(2.2rem,7vw,3.6rem)}
  .pl-ch-p{margin-top:12px;max-width:620px}
  .pl-mon{max-width:900px;width:100%;justify-self:center}
  .pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-card,.pl-card.pl-w3,.pl-card.pl-w6{grid-column:auto}
  .pl-card.pl-w6 .pl-card-img{aspect-ratio:16/9}
  .pl-card:first-child{grid-column:1/-1;grid-row:auto}
}
/* ---------- phones ---------- */
@media(max-width:768px){
  .pl-ov{--pl-g:24px}
  .pl-scene{height:780vh}
  .pl-word{font-size:clamp(3rem,16.4vw,5.2rem)}
  .pl-sub{font-size:.92rem}
  .pl-deck{padding:84px 16px 84px;gap:22px}
  .pl-copy{padding:0 8px}
  .pl-num{margin-bottom:10px;font-size:.66rem}
  .pl-ch-t{font-size:2.4rem}
  .pl-ch-p{font-size:.92rem;line-height:1.6}
  .pl-mon{border-radius:12px}
  .pl-screen{aspect-ratio:4/3}
  .pl-mon-bar,.pl-mon-foot{height:30px;padding:0 11px;font-size:.56rem}
  .pl-res{display:none}
  .pl-rail{bottom:22px;gap:8px}
  .pl-rail div{width:54px}
  .pl-rail b{font-size:.5rem;letter-spacing:.16em}
  .pl-ed-tl{padding-left:34px}.pl-ed-ruler,.pl-ed-tracks,.pl-ph{left:34px}
  .pl-clip span{display:none}
  .pl-v-sound{grid-template-columns:1fr 34px;padding:10px;gap:8px}
  .pl-st{padding-left:34px;gap:1px}.pl-st::before{left:7px;font-size:.5rem}
  .pl-meter{padding-bottom:16px}.pl-lufs{font-size:.46rem}
  .pl-wheels{left:8px;bottom:8px;padding:6px 8px;gap:6px}
  .pl-whw em{display:none}
  .pl-fx-stack{width:70%}
  .pl-grid{grid-template-columns:1fr}
  .pl-card:first-child{grid-column:auto}
  .pl-card-meta{flex-wrap:wrap;gap:4px 12px}
  .pl-card-tag{margin-left:0;flex-basis:100%;padding-left:28px}
  .pl-card-go{display:none}
  .pl-roof-in{grid-template-columns:1fr}
  .pl-list li{grid-template-columns:36px 84px 1fr}
  .pl-list em{font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){.pl-cue i,.pl-rec{animation:none}}
/* <<< PostLaab page */