:root{
  --void:#08080A;
  --raised:#0F0F12;
  --mist:#F4F2EE;
  --shell:#DED3CD;
  --dim:rgba(244,242,238,.52);
  --faint:rgba(244,242,238,.13);
  --gut:clamp(20px,4.4vw,72px);
  --maxw:1600px;
  --ease:cubic-bezier(.16,1,.3,1);
  --slide:cubic-bezier(.72,0,.16,1);
  --navh:74px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--void);scroll-behavior:auto}
body{
  background:var(--void);color:var(--mist);
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.55;font-weight:350;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.locked{overflow:hidden}
::selection{background:var(--mist);color:var(--void)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
a{color:inherit;text-decoration:none}
.h{font-weight:300;line-height:.98;letter-spacing:-.032em}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}

/* ---------- smooth scroll shell ---------- */
#scroll{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:2}
#inner{will-change:transform}
body.native-scroll #scroll{position:static;overflow:visible;height:auto}
body.native-scroll #inner{transform:none!important}
body.native-scroll{height:auto!important}

/* ---------- followspot ---------- */
#spot{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,32%),
    rgba(168,196,255,.07) 0%,rgba(255,214,170,.042) 34%,transparent 68%);
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:140;padding:0 var(--gut);
  transition:background .7s var(--ease),backdrop-filter .7s;
}
.nav.solid{background:rgba(8,8,10,.55);backdrop-filter:blur(18px)}
.nav.open{background:transparent;backdrop-filter:none}
.nav.open .pill{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.nav.open .menu-btn{color:var(--mist)}
.nav.open .bars i{background:var(--mist)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:var(--navh);gap:20px}
.logo{height:22px;width:auto;display:block}
.nav-right{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.pill{border:1px solid var(--faint);border-radius:100px;padding:9px 20px;font-size:14px;transition:background .55s var(--ease),border-color .55s var(--ease),color .55s var(--ease)}
.pill:hover{background:var(--mist);color:var(--void);border-color:var(--mist)}
.menu-btn{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;color:var(--mist);font-family:inherit;font-size:14px;padding:9px 4px}
.bars{position:relative;width:22px;height:9px;flex:none}
.bars i{position:absolute;left:0;height:1px;width:100%;background:var(--mist);transition:transform .6s var(--slide)}
.bars i:first-child{top:0}
.bars i:last-child{bottom:0}
.nav.open .bars i:first-child{transform:translateY(4px) rotate(45deg)}
.nav.open .bars i:last-child{transform:translateY(-4px) rotate(-45deg)}
.btn-label{position:relative;display:inline-block;min-width:44px;text-align:left;height:18px}
.btn-label span{position:absolute;left:0;top:50%;transform:translateY(-50%);transition:opacity .4s ease,transform .5s var(--ease)}
.btn-label .lb-close{opacity:0;transform:translateY(calc(-50% + 8px))}
.nav.open .btn-label .lb-menu{opacity:0;transform:translateY(calc(-50% - 8px))}
.nav.open .btn-label .lb-close{opacity:1;transform:translateY(-50%)}

/* ---------- right-hand scroll progress ---------- */
.srail{
  position:fixed;right:calc(var(--gut) - 1px);top:50%;transform:translateY(-50%);
  z-index:115;transition:opacity .6s var(--ease);mix-blend-mode:difference;
}
.srail.hide{opacity:0;pointer-events:none}
.sr-line{position:relative;width:1px;height:clamp(180px,26vh,280px);background:rgba(244,242,238,.14)}
.sr-fill{
  position:absolute;top:0;left:0;width:1px;height:100%;
  background:var(--mist);transform:scaleY(0);transform-origin:top center;
}
@media(max-width:1000px){.srail{display:none}}

/* ---------- V cursor ---------- */
body.vcursor,body.vcursor a,body.vcursor button{cursor:none}
#vcur{
  position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  transition:transform .35s var(--ease),opacity .4s ease;
  will-change:transform;opacity:0;mix-blend-mode:difference;
}
#vcur svg{width:100%;height:100%;display:block}
#vcur path{stroke:#fff;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.vcur-hot #vcur{transform:scale(1.55)}

/* ---------- frosted overlay menu ---------- */
.overlay{
  position:fixed;inset:0;z-index:125;
  background:rgba(10,10,13,.5);
  backdrop-filter:blur(30px) saturate(115%);
  -webkit-backdrop-filter:blur(30px) saturate(115%);
  transform:translateX(100%);visibility:hidden;
  transition:transform .95s var(--slide),visibility 0s linear .95s;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px var(--gut) 40px;
}
.overlay.open{transform:translateX(0);visibility:visible;transition:transform .95s var(--slide),visibility 0s}
.overlay::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.06),transparent 60%)}
.ov-nav{display:flex;flex-direction:column;gap:clamp(2px,1vw,10px);position:relative}
.ov-nav a{
  font-size:clamp(2.4rem,8vw,6.4rem);font-weight:300;letter-spacing:-.038em;line-height:1.02;
  opacity:0;transform:translateY(38px);color:var(--mist);width:max-content;max-width:100%;
  transition:opacity .8s var(--ease),transform .9s var(--ease),color .5s ease;
}
.overlay.open .ov-nav a{opacity:1;transform:none}
.overlay.open .ov-nav a:nth-child(1){transition-delay:.20s}
.overlay.open .ov-nav a:nth-child(2){transition-delay:.27s}
.overlay.open .ov-nav a:nth-child(3){transition-delay:.34s}
.overlay.open .ov-nav a:nth-child(4){transition-delay:.41s}
.overlay.open .ov-nav a:nth-child(5){transition-delay:.48s}
.ov-nav:hover a{color:rgba(244,242,238,.34)}
.ov-nav a:hover{color:var(--mist)}
.ov-foot{
  position:relative;margin-top:clamp(40px,8vh,90px);padding-top:26px;border-top:1px solid var(--faint);
  display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-end;
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s;
}
.overlay.open .ov-foot{opacity:1;transform:none}
.ov-foot a.line{font-size:clamp(1rem,1.6vw,1.35rem);font-weight:300;color:var(--mist)}
.ov-foot .socials{display:flex;gap:22px}
.ov-foot .socials a{font-size:13px;color:var(--dim);transition:color .4s ease}
.ov-foot .socials a:hover{color:var(--mist)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.6) 0%,rgba(8,8,10,0) 26%,rgba(8,8,10,0) 62%,rgba(8,8,10,.92) 100%)}
.scroll-cue{
  position:absolute;left:var(--gut);bottom:clamp(46px,7vh,72px);z-index:4;
  display:flex;align-items:center;gap:14px;opacity:0;animation:fade 1.2s var(--ease) 1.1s forwards;
}
@keyframes fade{to{opacity:1}}
.cue-rail{width:1px;height:48px;background:var(--faint);position:relative;overflow:hidden}
.cue-rail::after{content:"";position:absolute;top:-48px;left:0;width:1px;height:48px;background:var(--mist);animation:drop 2.8s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(0)}70%,100%{transform:translateY(96px)}}
@media(max-width:820px){.scroll-cue{display:none}}

/* ---------- statement ---------- */
.statement{padding:clamp(120px,22vh,260px) 0}
.statement p{font-size:clamp(1.6rem,3.9vw,3.4rem);font-weight:300;line-height:1.12;letter-spacing:-.028em;max-width:22ch}
.statement .muted{color:rgba(244,242,238,.34)}

/* ---------- work ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:34px}
.piece{display:block;position:relative;margin-bottom:clamp(60px,9vw,130px)}
.frame{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:16/9;background:var(--raised)}
.frame video,.frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1.6s var(--ease)}
.piece:hover .frame video,.piece:hover .frame img{transform:scale(1.06)}
.piece-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:22px}
.piece-meta h3{font-size:clamp(1.35rem,2.7vw,2.4rem);font-weight:300;letter-spacing:-.028em;line-height:1.05}
.piece-meta .eyebrow{white-space:nowrap;padding-bottom:6px}
.piece.narrow{max-width:min(64%,900px)}
.piece.narrow.right{margin-left:auto}
@media(max-width:860px){.piece.narrow{max-width:100%}.piece-meta{flex-direction:column;align-items:flex-start;gap:8px}}

/* ---------- creative engineers ---------- */
.ce{
  position:relative;overflow:hidden;background:var(--void);color:var(--mist);
  padding:clamp(80px,14vh,170px) 0 0;margin-top:clamp(20px,4vh,60px);
}
.ce-bg{position:absolute;inset:-10%;z-index:0;pointer-events:none}
.ce-bg video{
  width:100%;height:100%;object-fit:cover;
  filter:blur(52px) saturate(1.6) brightness(.78);
  transform:scale(1.25);
}
.ce-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 60% at 20% 30%,rgba(24,86,72,.35),transparent 70%),
    linear-gradient(180deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.42) 38%,rgba(8,8,10,.55) 72%,rgba(8,8,10,.92) 100%);
}
.ce-head,.panels{position:relative;z-index:2}
.ce-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:end}
.ce-head h2{
  font-size:clamp(2.5rem,7.6vw,7.2rem);font-weight:300;letter-spacing:-.026em;line-height:.94;
  text-transform:uppercase;max-width:10ch;margin-top:18px;
}
.ce-head p{
  font-size:clamp(16px,1.35vw,20px);color:var(--dim);max-width:38ch;padding-bottom:.6em;
}
.ce-head p b{color:var(--mist);font-weight:400}
@media(max-width:900px){.ce-head{grid-template-columns:1fr;gap:22px;align-items:start}}

.panels{
  display:flex;margin-top:clamp(44px,7vh,96px);
  height:clamp(320px,46svh,520px);
  border-top:1px solid rgba(244,242,238,.18);
}
.panel{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,2.2vw,34px);
  border-left:1px solid rgba(244,242,238,.18);
  transition:flex-grow 1.15s var(--ease);
}
.panel:first-child{border-left:0}
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,242,238,.09),rgba(244,242,238,.02) 55%,transparent);
  opacity:0;transition:opacity 1.1s var(--ease);
}
.panels:hover .panel{flex-grow:.92}
.panel:hover{flex-grow:1.55}
.panel:hover::before{opacity:1}
.p-num{
  position:absolute;top:clamp(18px,2vw,30px);left:clamp(20px,2.2vw,34px);
  font-size:10px;font-weight:500;letter-spacing:.2em;color:rgba(244,242,238,.42);
}
.panel h3{
  position:relative;font-size:clamp(1.35rem,2.2vw,2.05rem);font-weight:400;
  letter-spacing:-.028em;line-height:1.04;
}
.panel p{
  position:relative;margin-top:16px;font-size:15px;color:rgba(244,242,238,.62);
  max-width:30ch;transition:color .9s var(--ease);
}
.panel:hover p{color:rgba(244,242,238,.95)}
@media(max-width:900px){
  .panels{flex-direction:column;height:auto}
  .panel{border-left:0;border-top:1px solid rgba(244,242,238,.18);padding:46px clamp(20px,5vw,32px) 30px;min-height:0}
  .panel:first-child{border-top:0}
  .panels:hover .panel,.panel:hover{flex-grow:1}
}

/* ---------- reel ---------- */
.reel{position:relative;height:82svh;min-height:460px;overflow:hidden;margin:clamp(80px,14vh,180px) 0}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.9),rgba(8,8,10,.32) 40%,rgba(8,8,10,.9))}
.reel-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;z-index:3}
.reel-in h2{font-size:clamp(1.7rem,3.9vw,3.5rem);font-weight:300;letter-spacing:-.03em;max-width:22ch;line-height:1.08}

/* ---------- insights ---------- */
.ins-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,30px)}
.ins .thumb{aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--raised)}
.ins img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease)}
.ins:hover img{transform:scale(1.07)}
.ins h4{font-size:17px;font-weight:400;margin-top:18px;letter-spacing:-.01em}
.ins p{font-size:15px;color:var(--dim);margin-top:6px;max-width:34ch}
@media(max-width:1000px){.ins-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(max-width:560px){.ins-grid{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact{padding:clamp(120px,20vh,240px) 0 0}
.contact h2{font-size:clamp(2.4rem,7.4vw,7.2rem);font-weight:300;letter-spacing:-.038em;line-height:.98}
.mail{display:inline-block;margin-top:clamp(30px,5vw,58px);font-size:clamp(1.4rem,3.6vw,3rem);font-weight:300;letter-spacing:-.03em;position:relative;padding-bottom:8px}
.mail::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--faint);transition:background .6s var(--ease)}
.mail:hover::after{background:var(--mist)}
.tel{display:block;margin-top:18px;font-size:18px;color:var(--dim);transition:color .5s var(--ease)}
.tel:hover{color:var(--mist)}
footer{margin-top:clamp(80px,14vh,160px);padding:26px 0 34px;border-top:1px solid var(--faint);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.socials{display:flex;gap:26px}
.socials a{font-size:13px;color:var(--dim);transition:color .45s var(--ease)}
.socials a:hover{color:var(--mist)}
.fine{font-size:12.5px;color:rgba(244,242,238,.3)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .rv,.scroll-cue{opacity:1;transform:none;transition:none;animation:none}
  .cue-rail::after{animation:none}
  #spot{display:none}
  .overlay,.overlay.open{transition:opacity .2s linear,visibility 0s}
  .piece:hover .frame video,.piece:hover .frame img,.ins:hover img{transform:scale(1.02)}
}

/* ============ INNER PAGES ============ */

/* page masthead */
.mast{
  position:relative;padding:calc(var(--navh) + clamp(70px,14vh,150px)) 0 clamp(50px,8vh,90px);
  border-bottom:1px solid var(--faint);
}
.mast h1{
  font-size:clamp(2.6rem,8vw,7.4rem);font-weight:300;letter-spacing:-.026em;line-height:.94;
  text-transform:uppercase;
}
.mast .sub{margin-top:clamp(18px,3vh,32px);max-width:52ch;color:var(--dim);font-size:clamp(16px,1.3vw,19px)}
.mast .sub b{color:var(--mist);font-weight:400}

/* work index */
.grid-work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,44px);padding-top:clamp(40px,7vh,90px)}
.grid-work .piece{margin-bottom:clamp(20px,3vw,40px)}
.grid-work .piece.wide{grid-column:1 / -1}
@media(max-width:800px){.grid-work{grid-template-columns:1fr}.grid-work .piece.wide{grid-column:auto}}

/* project page */
.p-hero{position:relative;height:min(86svh,760px);min-height:420px;overflow:hidden;margin-top:0}
.p-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.7) 0%,rgba(8,8,10,.05) 34%,rgba(8,8,10,.85) 100%)}
.p-hero-in{position:absolute;left:0;right:0;bottom:clamp(40px,7vh,80px);z-index:3;padding:0 var(--gut)}
.p-hero-in h1{font-size:clamp(2.1rem,5.4vw,4.8rem);font-weight:300;letter-spacing:-.034em;line-height:1;max-width:16ch;margin-top:16px}

.facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,3vw,40px);
  padding:clamp(40px,7vh,84px) 0;border-bottom:1px solid var(--faint);
}
.facts div span{display:block;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,238,.4)}
.facts div p{margin-top:10px;font-size:16px}
@media(max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}

.p-lede{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(20px,5vw,80px);
  padding:clamp(60px,11vh,140px) 0;
}
.p-lede h2{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:300;letter-spacing:-.03em;line-height:1.1;max-width:14ch}
.p-lede p{color:var(--dim);font-size:clamp(16px,1.25vw,18px);max-width:58ch}
.p-lede p + p{margin-top:1.2em}
@media(max-width:860px){.p-lede{grid-template-columns:1fr;gap:22px}}

.media{position:relative;overflow:hidden;border-radius:3px;background:var(--raised);margin-bottom:clamp(18px,3vw,40px)}
.media video,.media img{width:100%;height:100%;object-fit:cover;display:block}
.media.tall{aspect-ratio:4/5}
.media.wide{aspect-ratio:16/9}
.media-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
@media(max-width:760px){.media-pair{grid-template-columns:1fr}}
.caption{font-size:13.5px;color:rgba(244,242,238,.42);margin:-16px 0 clamp(30px,5vw,54px)}

.pull{padding:clamp(70px,12vh,150px) 0;text-align:left}
.pull blockquote{font-size:clamp(1.5rem,3.6vw,3rem);font-weight:300;letter-spacing:-.03em;line-height:1.12;max-width:24ch}
.pull cite{display:block;margin-top:26px;font-style:normal;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,238,.42)}

.next{border-top:1px solid var(--faint);padding:clamp(40px,7vh,80px) 0 clamp(60px,10vh,120px);display:block}
.next span{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,238,.42)}
.next h3{font-size:clamp(1.8rem,4.6vw,4rem);font-weight:300;letter-spacing:-.034em;margin-top:14px;transition:opacity .5s var(--ease)}
.next:hover h3{opacity:.55}

/* about */
.two-col{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(20px,5vw,80px);padding:clamp(70px,12vh,150px) 0;border-bottom:1px solid var(--faint)}
.two-col h2{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:300;letter-spacing:-.03em;line-height:1.1;max-width:14ch}
.two-col p{color:var(--dim);font-size:clamp(16px,1.25vw,18px);max-width:58ch}
.two-col p + p{margin-top:1.2em}
.two-col b{color:var(--mist);font-weight:400}
@media(max-width:860px){.two-col{grid-template-columns:1fr;gap:20px}}

.clients{display:flex;flex-wrap:wrap;gap:10px 0;padding:clamp(50px,9vh,110px) 0}
.clients span{
  font-size:clamp(1.1rem,2.4vw,2rem);font-weight:300;letter-spacing:-.026em;color:rgba(244,242,238,.5);
  padding-right:clamp(18px,3vw,42px);transition:color .6s var(--ease);
}
.clients span:hover{color:var(--mist)}

/* insights index */
.ins-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px);padding-top:clamp(40px,7vh,90px)}
@media(max-width:900px){.ins-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media(max-width:560px){.ins-list{grid-template-columns:1fr}}

/* contact page */
.c-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);padding:clamp(60px,10vh,130px) 0}
.c-block{margin-bottom:clamp(34px,5vh,56px)}
.c-block .eyebrow{display:block;margin-bottom:12px}
.c-block a.big{font-size:clamp(1.3rem,3vw,2.4rem);font-weight:300;letter-spacing:-.03em;position:relative;padding-bottom:6px;display:inline-block}
.c-block a.big::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--faint);transition:background .6s var(--ease)}
.c-block a.big:hover::after{background:var(--mist)}
.c-block address{font-style:normal;color:var(--dim);font-size:17px;line-height:1.75}
.brief{border:1px solid var(--faint);padding:clamp(22px,3vw,40px)}
.brief ol{list-style:none;counter-reset:b;margin-top:18px;display:flex;flex-direction:column;gap:14px}
.brief li{counter-increment:b;display:flex;gap:16px;color:var(--dim);font-size:16px}
.brief li::before{content:"0" counter(b);font-size:10px;letter-spacing:.2em;color:rgba(244,242,238,.34);padding-top:5px}
@media(max-width:860px){.c-grid{grid-template-columns:1fr;gap:36px}}

/* work filters + empty plates */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding-top:clamp(30px,5vh,54px)}
.filt{
  font-family:inherit;font-size:13px;color:var(--dim);cursor:pointer;
  background:none;border:1px solid var(--faint);border-radius:100px;padding:9px 20px;
  transition:color .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.filt:hover{color:var(--mist);border-color:rgba(244,242,238,.32)}
.filt.on{background:var(--mist);color:var(--void);border-color:var(--mist)}
.piece.off{display:none}
.frame.empty{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#15161a 0%,#0b0c0e 52%,#191a1f 100%);
}
.frame.empty::after{
  content:attr(data-label);
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,242,238,.28);
}

/* project stat on tiles */
.pm-title{display:flex;flex-direction:column;gap:8px;min-width:0}
.piece-meta .eyebrow{padding-bottom:0}
.stat{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none;gap:4px}
.stat b{font-size:clamp(1.2rem,2vw,1.75rem);font-weight:300;letter-spacing:-.028em;line-height:1}
.stat span{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,238,.4);max-width:20ch}
@media(max-width:860px){.stat{align-items:flex-start;text-align:left;margin-top:10px}}

/* ---------- films ---------- */
.film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);padding-top:clamp(40px,7vh,90px)}
.film{display:block;cursor:pointer;border:0;padding:0;background:none;font-family:inherit;text-align:left;width:100%}
.film .frame{aspect-ratio:16/9;border-radius:3px;overflow:hidden;background:var(--raised);position:relative}
.film video{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.5s var(--ease)}
.film:hover video{transform:scale(1.07)}
.film .play{
  position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border:1px solid rgba(244,242,238,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,10,.28);backdrop-filter:blur(6px);
  opacity:0;transform:scale(.86);transition:opacity .6s var(--ease),transform .8s var(--ease);
}
.film:hover .play{opacity:1;transform:scale(1)}
.film .play::after{content:"";border-left:9px solid var(--mist);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.film h3{font-size:17px;font-weight:400;margin-top:16px;letter-spacing:-.012em}
.film .eyebrow{display:block;margin-top:6px}
.film .dur{float:right;color:rgba(244,242,238,.34)}
@media(max-width:900px){.film-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(max-width:560px){.film-grid{grid-template-columns:1fr}}

/* film player */
.player{
  position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,5vw,80px);
  background:rgba(6,6,8,.82);backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s linear .7s;
}
.player.open{opacity:1;visibility:visible;transition:opacity .7s var(--ease),visibility 0s}
.player video{width:100%;max-width:1400px;max-height:82vh;border-radius:3px;background:#000;
  transform:scale(.97);transition:transform .9s var(--ease)}
.player.open video{transform:scale(1)}
.player-close{
  position:absolute;top:clamp(18px,3vw,34px);right:clamp(18px,3vw,34px);
  background:none;border:0;cursor:pointer;color:var(--mist);font-family:inherit;font-size:14px;
  display:flex;align-items:center;gap:12px;padding:8px;
}
.player-close .x{position:relative;width:18px;height:18px;display:block}
.player-close .x::before,.player-close .x::after{
  content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--mist);
}
.player-close .x::before{transform:rotate(45deg)}
.player-close .x::after{transform:rotate(-45deg)}
.player-cap{position:absolute;left:clamp(20px,5vw,80px);bottom:clamp(18px,3vw,34px);color:var(--dim);font-size:13px}

/* ---------- masthead with blurred film ---------- */
.mast-film{position:relative;overflow:hidden;border-bottom:1px solid var(--faint)}
.mast-bg{position:absolute;inset:-12%;z-index:0;pointer-events:none}
.mast-bg video{width:100%;height:100%;object-fit:cover;filter:blur(58px) saturate(1.55) brightness(.82);transform:scale(1.3)}
.mast-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.9) 0%,rgba(8,8,10,.45) 42%,rgba(8,8,10,.82) 100%);
}
.mast-film .wrap{position:relative;z-index:2}
.mast-film.mast{padding-left:0;padding-right:0}

/* ---------- client marquee ---------- */
.mq{overflow:hidden;border-top:1px solid var(--faint);border-bottom:1px solid var(--faint);padding:clamp(16px,2.2vw,26px) 0}
.mq + .mq{border-top:0}
.mq-track{display:flex;width:max-content;animation:mqL 54s linear infinite}
.mq-track.rev{animation:mqR 62s linear infinite}
@keyframes mqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq span{
  font-size:clamp(1.5rem,3.8vw,3.1rem);font-weight:300;letter-spacing:-.03em;
  color:rgba(244,242,238,.38);white-space:nowrap;padding:0 clamp(20px,3vw,46px);
  transition:color .5s var(--ease);
}
.mq span:hover{color:var(--mist)}
.mq i{display:flex;align-items:center;color:rgba(244,242,238,.18);font-size:8px;font-style:normal}
.mq:hover .mq-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none;flex-wrap:wrap;width:100%}
}

/* ---------- hero film sharpening ---------- */
.hero video{
  transform:none;                 /* no upscale, so every pixel is native */
  filter:contrast(1.07) saturate(1.07) brightness(1.01);
}
.hero::after{                     /* fine grain hides compression banding and reads as sharper */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
.hero .veil{
  background:linear-gradient(180deg,rgba(8,8,10,.66) 0%,rgba(8,8,10,0) 24%,rgba(8,8,10,0) 64%,rgba(8,8,10,.94) 100%);
}
.reel video,.p-hero video{filter:contrast(1.05) saturate(1.05)}
@media(prefers-reduced-motion:reduce){.hero::after{opacity:.04}}

/* ---------- true unsharp mask on film ---------- */
.fx-defs{position:absolute;width:0;height:0;overflow:hidden}
.hero video{filter:url(#sharpen) contrast(1.06) saturate(1.06) brightness(1.01)}
.reel video,.p-hero video{filter:url(#sharpen-soft) contrast(1.04) saturate(1.05)}
.hero::after{opacity:.07}
/* convolve filters are expensive on small hardware, so drop back there */
@media(max-width:900px),(prefers-reduced-motion:reduce){
  .hero video{filter:contrast(1.07) saturate(1.07)}
  .reel video,.p-hero video{filter:contrast(1.05) saturate(1.05)}
}

/* ---------- frosted stat overlay on homepage tiles ---------- */
.piece .frame{position:relative}
.stat-ov{
  position:absolute;left:clamp(14px,1.6vw,26px);bottom:clamp(14px,1.6vw,26px);z-index:3;
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(16px,1.5vw,26px) clamp(18px,1.8vw,32px);
  background:rgba(10,11,14,.26);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid rgba(244,242,238,.16);
  border-radius:4px;
  transition:background .8s var(--ease),transform .9s var(--ease),border-color .8s var(--ease);
}
.stat-ov b{
  font-size:clamp(2.1rem,4.6vw,4.2rem);font-weight:300;letter-spacing:-.045em;line-height:.88;
  color:var(--mist);
}
.stat-ov span{
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,242,238,.68);max-width:22ch;line-height:1.5;
}
.piece:hover .stat-ov{
  background:rgba(10,11,14,.4);border-color:rgba(244,242,238,.3);
  transform:translateY(-5px);
}
@media(max-width:700px){
  .stat-ov{padding:13px 16px;gap:7px}
  .stat-ov b{font-size:1.8rem}
  .stat-ov span{font-size:9px;letter-spacing:.14em}
}

/* ---------- contact button, modernised ---------- */
.pill{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:11px;
  border-radius:11px;padding:11px 18px;
  font-size:14px;line-height:1;color:var(--mist);
  background:rgba(10,11,14,.3);
  backdrop-filter:blur(16px) saturate(135%);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  border:1px solid rgba(244,242,238,.18);
  transition:color .55s var(--ease),border-color .7s var(--ease),background .7s var(--ease);
}
.pill::before{                       /* light sweeps up from the base */
  content:"";position:absolute;inset:0;z-index:-1;background:var(--mist);
  transform:translateY(101%);transition:transform .75s var(--ease);
}
.pill::after{                        /* chevron that steps forward */
  content:"";width:6px;height:6px;flex:none;
  border-right:1px solid currentColor;border-top:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform .6s var(--ease),margin .6s var(--ease);
}
.pill:hover,.pill:focus-visible{color:var(--void);border-color:var(--mist);background:transparent}
.pill:hover::before,.pill:focus-visible::before{transform:translateY(0)}
.pill:hover::after,.pill:focus-visible::after{margin-left:4px;transform:rotate(45deg) scale(1.05)}
.pill:active{transform:translateY(1px)}

/* ---------- stats: bottom right, animating in ---------- */
.stat-ov{
  left:auto;right:clamp(14px,1.6vw,26px);
  align-items:flex-end;text-align:right;
  opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity 1s var(--ease) .3s,transform 1.15s var(--ease) .3s,
             background .8s var(--ease),border-color .8s var(--ease);
}
.piece.in .stat-ov{opacity:1;transform:none}
.piece:hover .stat-ov{
  background:rgba(10,11,14,.42);border-color:rgba(244,242,238,.32);
  transform:translateY(-5px);
}
.stat-ov span{text-align:right}
@media(prefers-reduced-motion:reduce){
  .stat-ov{opacity:1;transform:none;transition:none}
}

/* ---------- contact as a text link, not a button ---------- */
.pill{
  background:none;border:0;border-radius:0;padding:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  display:inline-flex;align-items:center;gap:0;
  font-size:14px;color:var(--mist);position:relative;overflow:visible;
  transition:color .5s var(--ease);
}
.pill::before{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .65s var(--ease);
}
.pill::after{content:none}
.pill:hover,.pill:focus-visible{color:var(--mist);background:none;border-color:transparent}
.pill:hover::before,.pill:focus-visible::before{transform:scaleX(1);transform-origin:0 50%}
.pill:active{transform:none}

/* ---------- stat panel: full bleed into the corner ---------- */
.stat-ov{
  right:0;bottom:0;left:auto;
  border:0;border-radius:5px 0 0 0;
  padding:clamp(22px,2.4vw,42px) clamp(24px,2.6vw,46px) clamp(20px,2.2vw,38px);
  gap:12px;
  background:rgba(10,11,14,.22);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  transform:translateY(30px);
  transition:opacity 1s var(--ease) .3s,transform 1.15s var(--ease) .3s,background .9s var(--ease);
}
.stat-ov b{font-size:clamp(2.4rem,5.4vw,5rem);letter-spacing:-.05em}
.stat-ov span{max-width:24ch;color:rgba(244,242,238,.72)}
.piece:hover .stat-ov{background:rgba(10,11,14,.36);transform:none}
@media(max-width:700px){
  .stat-ov{padding:16px 18px 14px;gap:8px}
  .stat-ov b{font-size:2rem}
}

/* ---------- case study results band ---------- */
.results{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(20px,4vw,60px);
  padding:clamp(50px,9vh,110px) 0;
  border-top:1px solid var(--faint);border-bottom:1px solid var(--faint);
}
.res b{
  display:block;font-size:clamp(2.6rem,6vw,5.4rem);font-weight:300;letter-spacing:-.05em;line-height:.86;
}
.res b i{font-style:normal;font-size:.42em;letter-spacing:-.02em;margin-left:.12em;color:rgba(244,242,238,.62)}
.res span{
  display:block;margin-top:16px;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(244,242,238,.44);max-width:24ch;line-height:1.6;
}
.res-label{padding-bottom:8px}

/* ---------- article ---------- */
.article{max-width:780px;margin:0 auto;padding:clamp(50px,9vh,110px) 0 clamp(40px,7vh,90px)}
.article p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.72;color:rgba(244,242,238,.76);margin-bottom:1.5em}
.article p.first{font-size:clamp(19px,1.6vw,23px);line-height:1.6;color:var(--mist)}
.article h2{
  font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:300;letter-spacing:-.028em;line-height:1.12;
  margin:clamp(44px,6vh,72px) 0 .7em;color:var(--mist);
}
.article blockquote{
  margin:clamp(40px,6vh,66px) 0;padding-left:clamp(20px,3vw,36px);
  border-left:1px solid rgba(244,242,238,.28);
  font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:300;letter-spacing:-.026em;line-height:1.24;color:var(--mist);
}
.article ul{list-style:none;margin:0 0 1.6em}
.article li{
  display:flex;gap:16px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.65;
  color:rgba(244,242,238,.76);margin-bottom:.9em;
}
.article li::before{content:"";flex:none;width:14px;height:1px;background:rgba(244,242,238,.4);margin-top:.85em}
.art-meta{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:26px}
.art-meta span{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,242,238,.4)}

/* ---------- project hero: film only, title beneath ---------- */
.p-hero .veil{
  background:linear-gradient(180deg,rgba(8,8,10,.62) 0%,rgba(8,8,10,0) 26%,rgba(8,8,10,0) 68%,rgba(8,8,10,.9) 100%);
}
.p-title{padding:clamp(44px,7vh,92px) 0 clamp(34px,5vh,64px);border-bottom:1px solid var(--faint)}
.p-title h1{
  font-size:clamp(2.1rem,5.4vw,4.8rem);font-weight:300;letter-spacing:-.034em;line-height:1;
  max-width:18ch;margin-top:18px;
}

/* ---------- hide the native scrollbar (the rail is the indicator) ---------- */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,#scroll::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- blurred still behind an article masthead ---------- */
.mast-bg img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(54px) saturate(1.5) brightness(.8);transform:scale(1.3);
}

/* ---------- insight article on warm taupe ---------- */
.article-shell{background:#E0D3CC;color:var(--void)}
.article-shell .article p{color:rgba(14,17,18,.74)}
.article-shell .article p.first{color:rgba(14,17,18,.95)}
.article-shell .article h2{color:var(--void)}
.article-shell .article blockquote{color:var(--void);border-left-color:rgba(14,17,18,.3)}
.article-shell .article li{color:rgba(14,17,18,.74)}
.article-shell .article li::before{background:rgba(14,17,18,.4)}
.article-shell ::selection{background:var(--void);color:#E0D3CC}

/* nav inverts while a light section sits behind it */
.nav .logo,.nav .menu-btn,.nav .bars i{transition:filter .5s var(--ease),color .5s var(--ease),background .5s var(--ease)}
body.nav-invert .nav .logo{filter:invert(1)}
body.nav-invert .nav.solid{background:rgba(224,211,204,.7)}
body.nav-invert .menu-btn{color:var(--void)}
body.nav-invert .bars i{background:var(--void)}
body.nav-invert.menu-open .nav .logo{filter:none}

/* ---------- no visible scrollbar ---------- */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- blurred still behind an article masthead ---------- */
.mast-bg img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(60px) saturate(1.45) brightness(.78);transform:scale(1.32);
}

/* ---------- light reading zone ---------- */
.light-zone{background:#E0D3CC;color:var(--void)}
.light-zone .article p{color:rgba(14,17,18,.76)}
.light-zone .article p.first{color:var(--void)}
.light-zone .article h2{color:var(--void)}
.light-zone .article blockquote{color:var(--void);border-left-color:rgba(14,17,18,.32)}
.light-zone .article li{color:rgba(14,17,18,.76)}
.light-zone .article li::before{background:rgba(14,17,18,.42)}
.light-zone .two-col{border-top:1px solid rgba(14,17,18,.18);border-bottom:0}
.light-zone .two-col h2,.light-zone a{color:var(--void)}
.light-zone .two-col p{color:rgba(14,17,18,.7)}
.light-zone .eyebrow{color:rgba(14,17,18,.5)}
.light-zone .pill{color:var(--void)}
.light-zone .pill::before{background:var(--void)}
.light-zone ::selection{background:var(--void);color:#E0D3CC}

/* nav inverts over any light zone */
.nav .logo,.nav .menu-btn,.nav .bars i{transition:filter .5s var(--ease),color .5s var(--ease),background .5s var(--ease)}
body.nav-invert .nav .logo{filter:invert(1)}
body.nav-invert .nav.solid{background:rgba(224,211,204,.66)}
body.nav-invert .menu-btn{color:var(--void)}
body.nav-invert .bars i{background:var(--void)}
body.nav-invert .nav.open .menu-btn{color:var(--mist)}
body.nav-invert .nav.open .bars i{background:var(--mist)}
body.nav-invert .nav.open .logo{filter:none}
.light-sec{color:var(--void)}

/* ---------- multi-stat frost panel ---------- */
.stat-ov.multi{gap:0;padding:clamp(16px,1.8vw,30px) clamp(20px,2.2vw,38px) clamp(14px,1.6vw,26px)}
.stat-ov .sr{display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding:clamp(10px,1.1vw,15px) 0}
.stat-ov .sr + .sr{border-top:1px solid rgba(244,242,238,.16)}
.stat-ov.multi b{font-size:clamp(1.5rem,2.9vw,2.7rem);letter-spacing:-.042em;line-height:.9}
.stat-ov.multi b i{font-style:normal;font-size:.44em;margin-left:.1em;color:rgba(244,242,238,.7)}
.stat-ov.multi span{font-size:9.5px;letter-spacing:.15em;max-width:22ch;line-height:1.45}
@media(max-width:700px){
  .stat-ov.multi{padding:12px 14px 10px}
  .stat-ov.multi b{font-size:1.3rem}
  .stat-ov .sr{padding:8px 0}
}

/* ---------- half-frosted panel over the film band ---------- */
.reel-in{
  position:absolute;left:0;top:0;bottom:0;right:auto;
  width:min(54%,820px);max-width:none;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(28px,4.4vw,72px);
  background:rgba(10,11,14,.24);
  backdrop-filter:blur(26px) saturate(135%);
  -webkit-backdrop-filter:blur(26px) saturate(135%);
  border-right:1px solid rgba(244,242,238,.16);
  z-index:3;
}
.reel .veil{
  background:linear-gradient(180deg,rgba(8,8,10,.7) 0%,rgba(8,8,10,.08) 30%,rgba(8,8,10,.1) 62%,rgba(8,8,10,.8) 100%);
}
.reel-in h2{max-width:18ch}
@media(max-width:820px){
  .reel-in{width:100%;border-right:0;background:rgba(10,11,14,.34);padding:0 var(--gut)}
}

/* ---------- stats: no frost, bigger type, corner scrim ---------- */
.piece .frame::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top left,rgba(8,8,10,.78) 0%,rgba(8,8,10,.34) 34%,transparent 62%);
  transition:opacity .9s var(--ease);
}
.stat-ov,.stat-ov.multi{
  background:none;border:0;border-radius:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:clamp(18px,2vw,36px) clamp(20px,2.2vw,40px);
  text-shadow:0 1px 30px rgba(0,0,0,.45);
}
.stat-ov .sr + .sr{border-top:1px solid rgba(244,242,238,.22)}
.stat-ov.multi b{font-size:clamp(1.9rem,3.9vw,3.6rem);letter-spacing:-.048em}
.stat-ov.multi span{font-size:10.5px;letter-spacing:.16em;color:rgba(244,242,238,.8)}
.stat-ov b{font-size:clamp(2.6rem,6vw,5.6rem)}
.piece:hover .stat-ov{background:none;transform:none}
@media(max-width:700px){
  .stat-ov,.stat-ov.multi{padding:14px 16px}
  .stat-ov.multi b{font-size:1.6rem}
}

/* breathing room above the client marquee */
.two-col + .mq{margin-top:clamp(30px,5vh,64px)}
.two-col h2{line-height:1.14;padding-bottom:.12em}

/* ---------- work grid: no gaps, bigger stats, no overlap ---------- */
.grid-work{grid-auto-flow:dense;align-items:start}
.piece-meta{align-items:flex-start;gap:clamp(16px,2.4vw,44px)}
.pm-title{flex:1 1 auto;min-width:0}
.piece-meta .eyebrow{white-space:normal;line-height:1.5}
.stat{flex:0 0 auto;max-width:38%}
.stat b{font-size:clamp(1.7rem,3.4vw,3rem);letter-spacing:-.042em}
.stat span{font-size:10px;letter-spacing:.15em;color:rgba(244,242,238,.46)}
@media(max-width:860px){.stat{max-width:100%}}

/* ---------- services block (dark version of the white layout) ---------- */
.services{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
  gap:clamp(24px,5vw,90px);padding:clamp(70px,12vh,150px) 0;
  border-bottom:1px solid var(--faint);
}
.svc-head{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-bottom:clamp(20px,3vh,34px)}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:clamp(4px,.7vw,9px)}
.svc-list li{
  font-size:clamp(15px,1.5vw,20px);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(244,242,238,.72);transition:color .5s var(--ease);
}
.svc-list li:hover{color:var(--mist)}
.services p{
  font-size:clamp(17px,1.75vw,25px);line-height:1.5;letter-spacing:-.016em;
  color:rgba(244,242,238,.88);max-width:34ch;
}
.btn-round{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:clamp(34px,6vh,64px);
  padding:clamp(16px,1.7vw,26px) clamp(30px,3vw,48px);
  border:1px solid rgba(244,242,238,.42);border-radius:999px;
  font-size:clamp(15px,1.3vw,17px);color:var(--mist);position:relative;overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease),border-color .6s var(--ease);
}
.btn-round::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mist);transform:translateY(101%);transition:transform .7s var(--ease)}
.btn-round:hover{color:var(--void);border-color:var(--mist)}
.btn-round:hover::before{transform:translateY(0)}
.btn-round .arw{
  width:9px;height:9px;flex:none;border-right:1px solid currentColor;border-top:1px solid currentColor;
  transform:rotate(-45deg);transition:transform .6s var(--ease),margin .6s var(--ease);
}
.btn-round:hover .arw{margin-left:5px;margin-bottom:4px}
@media(max-width:860px){.services{grid-template-columns:1fr;gap:26px}}

/* line under the principles panels */
.ce-foot{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,60px);
  flex-wrap:wrap;padding:clamp(40px,7vh,80px) 0 clamp(60px,10vh,120px);position:relative;z-index:2;
}
.ce-foot p{font-size:clamp(17px,1.8vw,24px);font-weight:300;letter-spacing:-.02em;color:var(--mist);max-width:34ch;line-height:1.35}
.ce-foot .btn-round{margin-top:0}

/* ---------- principles panels: simple hover, no resizing ---------- */
.panels:hover .panel,.panel:hover{flex-grow:1}
.panel::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--mist);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease);z-index:2;
}
.panel:hover::after{transform:scaleX(1)}
.panel:hover::before{opacity:.55;transform:scale(1.02)}
.panel h3,.panel p,.panel .p-num{transition:color .5s var(--ease),transform .6s var(--ease)}
.panel:hover h3{transform:translateY(-3px)}
.panel:hover p{color:rgba(244,242,238,.92);transform:translateY(-3px)}
.panel:hover .p-num{color:var(--mist)}
@media(max-width:900px){.panel::after{display:none}}

/* ---------- brands block spacing ---------- */
.brands .two-col{padding:clamp(60px,10vh,120px) 0 clamp(30px,5vh,54px);border-bottom:0}
.brands .two-col h2{max-width:13ch}
.two-col + .mq{margin-top:0}
.brands .mq{padding:clamp(12px,1.5vw,20px) 0}
.brands .mq:first-of-type{border-bottom:0}
.brands{padding-bottom:clamp(40px,7vh,90px)}

/* ---------- homepage stats: larger again ---------- */
.stat-ov.multi b{font-size:clamp(2.4rem,5vw,4.8rem);letter-spacing:-.052em}
.stat-ov.multi b i{font-size:.4em}
.stat-ov.multi span{font-size:11px;letter-spacing:.16em;color:rgba(244,242,238,.82);max-width:20ch}
.stat-ov .sr{padding:clamp(12px,1.4vw,20px) 0;gap:7px}
.stat-ov.multi{padding:clamp(20px,2.2vw,42px) clamp(22px,2.4vw,46px);max-width:64%}
.piece .frame::after{
  background:linear-gradient(to top left,rgba(8,8,10,.82) 0%,rgba(8,8,10,.4) 40%,transparent 68%);
}
@media(max-width:700px){
  .stat-ov.multi{max-width:78%;padding:14px 16px}
  .stat-ov.multi b{font-size:1.85rem}
  .stat-ov.multi span{font-size:9.5px}
}

/* ---------- enquiry form ---------- */
.cform{border:1px solid var(--faint);padding:clamp(24px,3vw,44px)}
.cform .eyebrow{display:block;margin-bottom:clamp(22px,3vh,34px)}
.f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.field{position:relative;margin-bottom:clamp(20px,2.6vw,30px)}
.field label{
  display:block;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,242,238,.42);margin-bottom:10px;transition:color .4s var(--ease);
}
.field input,.field textarea,.field select{
  width:100%;background:none;border:0;border-bottom:1px solid rgba(244,242,238,.22);
  color:var(--mist);font-family:inherit;font-size:16.5px;font-weight:350;
  padding:8px 0 12px;border-radius:0;
  transition:border-color .5s var(--ease);
}
.field textarea{resize:vertical;min-height:104px;line-height:1.55}
.field select{cursor:pointer}
.field select option{background:var(--void);color:var(--mist)}
.field input::placeholder,.field textarea::placeholder{color:rgba(244,242,238,.28)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--mist)}
.field:focus-within label{color:var(--mist)}
.cform .btn-round{margin-top:clamp(14px,2vh,24px)}
.f-note{margin-top:20px;font-size:12.5px;color:rgba(244,242,238,.36);line-height:1.6}
@media(max-width:620px){.f-row{grid-template-columns:1fr;gap:0}}

/* ---------- contact masthead on beige ---------- */
.contact-mast{
  background:#E0D3CC;color:var(--void);border-bottom:0;
  padding-left:0;padding-right:0;
}
.contact-mast > .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.contact-mast h1{color:var(--void)}
.contact-mast .eyebrow{color:rgba(14,17,18,.5)}
.contact-mast .sub{color:rgba(14,17,18,.68)}
.contact-mast .sub b{color:var(--void)}
.contact-mast ::selection{background:var(--void);color:#E0D3CC}

/* links inside the beige masthead copy */
.contact-mast .sub{max-width:60ch}
.contact-mast .sub a{
  color:var(--void);position:relative;padding-bottom:2px;
  border-bottom:1px solid rgba(14,17,18,.35);transition:border-color .5s var(--ease)
}
.contact-mast .sub a:hover{border-bottom-color:var(--void)}

/* ---------- oversized footer wordmark ---------- */
.flogo{
  flex:0 0 100%;order:-1;display:block;width:100%;height:auto;
  margin-bottom:clamp(26px,5vh,54px);opacity:.92;
}
footer{align-items:flex-end}
@media(max-width:700px){.flogo{margin-bottom:26px}}

/* client line on the next project link */
.next-client{
  display:block;margin-top:16px;font-style:normal;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,242,238,.44);transition:color .5s var(--ease);
}
.next:hover .next-client{color:rgba(244,242,238,.75)}

/* gentler, longer fade-ins */
.rv{
  opacity:0;transform:translateY(22px);
  transition:opacity 1.25s var(--ease),transform 1.35s var(--ease);
}
.rv.in{opacity:1;transform:none}
.panel.rv{transform:translateY(16px)}
.mq.rv,.film.rv,.ins.rv{transform:translateY(18px)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* lets talk intro line */
.talk-line{
  margin-top:clamp(18px,3vh,28px);max-width:42ch;
  font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.65;color:var(--dim);
}
.talk-line a{
  color:var(--mist);border-bottom:1px solid rgba(244,242,238,.3);padding-bottom:1px;
  transition:border-color .5s var(--ease);
}
.talk-line a:hover{border-bottom-color:var(--mist)}

/* larger nav wordmark */
.logo{height:clamp(26px,2.2vw,34px)}
.nav-row{height:clamp(78px,6vw,90px)}
.nav.solid .nav-row{height:clamp(66px,5vw,74px)}
.nav-row,.logo{transition:height .6s var(--ease)}

/* ---------- menu icon: LED grid that turns on open ---------- */
.grid4{
  width:19px;height:19px;flex:none;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;
  transition:transform .8s var(--slide);
}
.grid4 i{
  display:block;width:100%;height:100%;background:currentColor;border-radius:1px;
  transition:transform .7s var(--slide),opacity .5s var(--ease),border-radius .7s var(--ease);
}
.menu-btn:hover .grid4 i:nth-child(1){transform:translate(-1px,-1px)}
.menu-btn:hover .grid4 i:nth-child(2){transform:translate(1px,-1px)}
.menu-btn:hover .grid4 i:nth-child(3){transform:translate(-1px,1px)}
.menu-btn:hover .grid4 i:nth-child(4){transform:translate(1px,1px)}
.nav.open .grid4{transform:rotate(45deg)}
.nav.open .grid4 i{border-radius:50%;transform:scale(.62)}
.nav.open .grid4 i:nth-child(1),.nav.open .grid4 i:nth-child(4){opacity:.28}

/* ---------- polish ---------- */
body{opacity:0;transition:opacity .9s var(--ease)}
body.loaded{opacity:1}
:focus-visible{outline:1px solid rgba(244,242,238,.65);outline-offset:4px;border-radius:2px}
.light-sec :focus-visible,.contact-mast :focus-visible,.article-shell :focus-visible{outline-color:rgba(14,17,18,.6)}

/* ---------- menu icon: staggered rules ---------- */
.lines{position:relative;width:24px;height:14px;flex:none}
.lines i{
  position:absolute;right:0;height:1px;background:currentColor;transform-origin:100% 50%;
  transition:width .55s var(--ease),transform .7s var(--slide),opacity .35s var(--ease);
}
.lines i:nth-child(1){top:0;width:100%}
.lines i:nth-child(2){top:50%;width:64%}
.lines i:nth-child(3){bottom:0;width:84%}
.menu-btn:hover .lines i{width:100%}
.menu-btn:hover .lines i:nth-child(2){transition-delay:.06s}
.menu-btn:hover .lines i:nth-child(3){transition-delay:.12s}
.nav.open .lines i{width:100%;transition-delay:0s}
.nav.open .lines i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .lines i:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav.open .lines i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- nav hides on the way down, returns on the way up ---------- */
.nav{will-change:transform;transition:background .7s var(--ease),backdrop-filter .7s,transform .85s var(--ease)}
.nav.hide{transform:translateY(-115%)}
.nav.open{transform:none!important}

/* nav fades instead of sliding */
.nav{transition:background .7s var(--ease),backdrop-filter .7s,opacity .75s var(--ease),visibility 0s linear 0s}
.nav.hide{transform:none;opacity:0;visibility:hidden;transition:opacity .75s var(--ease),visibility 0s linear .75s}
.nav.open{opacity:1!important;visibility:visible!important}

/* slower return, quicker exit */
.nav{transition:background .7s var(--ease),backdrop-filter .7s,opacity 1.5s var(--ease),visibility 0s linear 0s}
.nav.hide{transform:none;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}

/* homepage stats, larger again + steady during count */
.stat-ov.multi b{font-size:clamp(2.8rem,5.8vw,5.6rem);letter-spacing:-.054em;font-variant-numeric:tabular-nums}
.stat-ov.multi span{font-size:11.5px;letter-spacing:.15em}
.stat-ov.multi{max-width:68%}
@media(max-width:700px){.stat-ov.multi b{font-size:2rem}.stat-ov.multi{max-width:80%}}

/* ---------- mobile: stats sized to the frame, hero framed whole ---------- */
@media(max-width:820px){
  .hero{background:var(--void)}
  .hero video{object-fit:contain;object-position:center center;transform:none}
  .hero .veil{background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,0) 26%,rgba(8,8,10,0) 62%,rgba(8,8,10,.9) 100%)}
}
@media(max-width:700px){
  .stat-ov,.stat-ov.multi{max-width:none;left:0;right:0;padding:14px 16px 13px}
  .stat-ov.multi b{font-size:clamp(1.15rem,5.4vw,1.55rem);letter-spacing:-.03em}
  .stat-ov.multi b i{font-size:.5em}
  .stat-ov.multi span{font-size:8.5px;letter-spacing:.12em;max-width:26ch;line-height:1.4}
  .stat-ov .sr{padding:7px 0;gap:4px}
  .stat-ov .sr:nth-child(n+4){display:none}
  .piece .frame::after{background:linear-gradient(to top,rgba(8,8,10,.86) 0%,rgba(8,8,10,.3) 42%,transparent 70%)}
}
@media(max-width:420px){
  .stat-ov.multi b{font-size:1.25rem}
  .stat-ov .sr:nth-child(n+3){display:none}
}

/* ---------- mobile: blurred fill behind the framed film ---------- */
@media(max-width:820px){
  .hero::before{
    content:"";position:absolute;inset:0;z-index:0;
    background-image:url("hero-poster.jpg");background-size:cover;background-position:center;
    filter:blur(38px) brightness(.4) saturate(1.2);transform:scale(1.2);
  }
  .hero video{position:relative;z-index:1;object-fit:contain}
  .hero .veil{z-index:2}
}

/* portrait hero fills the phone screen, so no blurred fill needed */
@media(max-width:820px){
  .hero::before{display:none}
  .hero video{object-fit:cover;object-position:center center}
  .hero .veil{background:linear-gradient(180deg,rgba(8,8,10,.6) 0%,rgba(8,8,10,0) 24%,rgba(8,8,10,0) 60%,rgba(8,8,10,.92) 100%)}
}

/* ---------- close the dead gaps on About ---------- */
.services{padding:clamp(52px,8vh,96px) 0 clamp(46px,7vh,80px)}
.services > div:first-child{align-self:start}
.two-col{padding:clamp(52px,8vh,96px) 0}
.ce{margin-top:0}
.brands .two-col{padding:clamp(48px,7vh,88px) 0 clamp(26px,4vh,44px)}
.brands{padding-bottom:clamp(30px,5vh,64px)}
.ce-foot{padding:clamp(34px,5vh,64px) 0 clamp(48px,8vh,96px)}

/* ---------- About on mobile ---------- */
@media(max-width:820px){
  .services{padding:44px 0 38px;gap:22px}
  .svc-list li{font-size:15px;letter-spacing:.08em}
  .services p{font-size:17px;max-width:none}
  .two-col{padding:40px 0;gap:16px}
  .two-col h2{font-size:clamp(1.4rem,6.4vw,2rem);max-width:none}
  .two-col p{font-size:16px}
  .ce-head h2{font-size:clamp(2.2rem,12vw,3.4rem)}
  .ce-head p{font-size:16px}
  .ce-foot{flex-direction:column;align-items:flex-start;gap:22px;padding:30px 0 46px}
  .ce-foot p{font-size:18px;max-width:none}
  .btn-round{padding:15px 26px;font-size:14px;margin-top:0}
  .mq span{font-size:clamp(1.15rem,7vw,1.7rem);padding:0 16px}
  .brands .two-col{padding:38px 0 22px}
  .mast h1{font-size:clamp(2.2rem,12vw,3.6rem)}
  .mast .sub{font-size:16px}
  .mast{padding:calc(var(--navh) + 60px) 0 44px}
}

/* fix: the blur-fill rule left the mobile video in normal flow, so it stopped filling the hero */
@media(max-width:820px){
  .hero video{
    position:absolute;inset:-1px;z-index:1;
    width:calc(100% + 2px);height:calc(100% + 2px);
    object-fit:cover;object-position:center center;
  }
}

/* framework line: button sits underneath */
.ce-foot{flex-direction:column;align-items:flex-start;gap:clamp(20px,3vh,32px)}
.ce-foot p{max-width:38ch}

/* keep the space, drop the rule */
.two-col{border-bottom:0}
.cap{border-top:0}

/* kill the seam where the blurred section meets black */
.ce-bg::after{
  background:
    radial-gradient(90% 60% at 20% 30%,rgba(24,86,72,.35),transparent 70%),
    linear-gradient(180deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.42) 38%,rgba(8,8,10,.6) 76%,rgba(8,8,10,1) 100%);
}
.ce{margin-bottom:-1px;padding-bottom:1px}
.ce-bg{inset:-12% -12% -1px}

/* ---------- brands: more air, no hover behaviour ---------- */
.two-col + .mq{margin-top:clamp(44px,7vh,88px)}
.brands .two-col{padding-bottom:0}
.mq span{transition:none}
.mq span:hover{color:rgba(244,242,238,.38)}
.mq:hover .mq-track{animation-play-state:running}

/* ---------- principles: align titles and copy across all four ---------- */
.panel h3{min-height:2.1em;display:flex;align-items:flex-end}
.panel p{min-height:4.9em}
@media(max-width:900px){
  .panel h3{min-height:0;display:block}
  .panel p{min-height:0}
}

/* ---------- FINAL: principles panels on mobile ---------- */
@media(max-width:900px){
  .panels{
    display:flex;flex-direction:column;height:auto;min-height:0;
    margin-top:34px;border-top:1px solid rgba(244,242,238,.18);
  }
  .panel{
    display:block;flex:0 0 auto;height:auto;min-height:0;
    padding:26px clamp(20px,5vw,32px) 30px;
    border-left:0;border-top:1px solid rgba(244,242,238,.18);
  }
  .panel:first-child{border-top:0}
  .panel .p-num{position:static;display:block;margin-bottom:10px}
  .panel h3{display:block;min-height:0;margin:0 0 10px;font-size:1.5rem;line-height:1.06}
  .panel p{min-height:0;margin-top:0;max-width:none;font-size:15.5px}
  .panel::after{display:none}
  .ce-foot{padding:30px clamp(20px,5vw,32px) 46px}
  .ce .wrap{padding-left:clamp(20px,5vw,32px);padding-right:clamp(20px,5vw,32px)}
}



/* ---------- homepage insights: desktop untouched, 2 x 2 with smaller images on mobile ---------- */
@media(max-width:860px){
  #insights .ins-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  #insights .ins .thumb{aspect-ratio:1/1}
  #insights .ins h4{margin-top:12px;font-size:14.5px;line-height:1.3}
  #insights .ins p{margin-top:5px;font-size:13px;max-width:none}
}
@media(max-width:520px){
  #insights .ins-grid{gap:14px}
  #insights .ins h4{font-size:13.5px}
  #insights .ins p{font-size:12.5px}
}

/* ---------- insight cards: rest dim, lift on hover ---------- */
.ins img{opacity:.5;transition:transform 1.4s var(--ease),opacity .8s var(--ease)}
.ins h4{color:rgba(244,242,238,.6);transition:color .7s var(--ease)}
.ins p{color:rgba(244,242,238,.34);transition:color .7s var(--ease)}
.ins:hover img{opacity:1}
.ins:hover h4{color:var(--mist)}
.ins:hover p{color:rgba(244,242,238,.62)}
/* dim the rest of the set while one is hovered */
.ins-grid:hover .ins:not(:hover) img,.ins-list:hover .ins:not(:hover) img{opacity:.32}
.ins-grid:hover .ins:not(:hover) h4,.ins-list:hover .ins:not(:hover) h4{color:rgba(244,242,238,.4)}
@media(hover:none){
  .ins img{opacity:.72}
  .ins h4{color:rgba(244,242,238,.82)}
  .ins p{color:rgba(244,242,238,.48)}
}

/* ---------- player: caption aligned to the film, larger ---------- */
.player-in{
  width:min(100%,1400px);display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(14px,1.6vw,22px);
}
.player video{width:100%;max-width:none;max-height:76vh}
.player-cap{
  position:static;left:auto;bottom:auto;
  font-size:clamp(1.05rem,2vw,1.6rem);font-weight:300;letter-spacing:-.024em;
  color:var(--mist);text-align:left;
}


/* ---------- embedded film player ---------- */
.player-embed{display:none;width:100%;aspect-ratio:16/9;max-height:76vh;background:#000;border-radius:3px;overflow:hidden}
.player-embed iframe{width:100%;height:100%;border:0;display:block}
.player.embed .player-embed{display:block}
.player.embed video{display:none}

/* film tiles that use a still rather than a loop */
.film .frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1.5s var(--ease),opacity .8s var(--ease)}
.film:hover .frame img{transform:scale(1.07)}
.film .frame{background:linear-gradient(140deg,#15161a 0%,#0b0c0e 52%,#191a1f 100%)}

/* films: breathing room before the footer, and a proper plate for tiles with no loop */
.film-grid{padding-bottom:clamp(60px,10vh,120px)}
.film .frame:empty,.film .frame{background:linear-gradient(140deg,#15161a 0%,#0b0c0e 52%,#191a1f 100%)}
.film .frame:not(:has(video)):not(:has(img))::after{
  content:"Film";position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,242,238,.3);
}
.film .frame:not(:has(video)):not(:has(img)) .play{opacity:.5}
.film:hover .frame:not(:has(video)):not(:has(img)) .play{opacity:1}
footer{margin-top:clamp(30px,5vh,60px)}

/* case study client line, a touch larger */
.p-title .eyebrow{font-size:12.5px;letter-spacing:.2em;color:rgba(244,242,238,.62)}
@media(max-width:700px){.p-title .eyebrow{font-size:11px;letter-spacing:.16em}}


/* menu button: icon only, so Contact sits beside it */
.btn-label{display:none}
.menu-btn{gap:0;padding:9px 2px}
.nav-right{gap:clamp(16px,2vw,28px)}

/* insight date */
.ins-date{
  display:block;margin-top:16px;
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,242,238,.38);transition:color .7s var(--ease);
}
.ins:hover .ins-date{color:rgba(244,242,238,.6)}
.ins h4{margin-top:8px}
@media(max-width:860px){#insights .ins-date{margin-top:10px;font-size:9px}}

/* --- Markdown-authored articles -------------------------------------------
   The static build hand-wrote the article markup; the CMS renders it from
   markdown, which differs in two ways that CSS has to absorb.

   1. Markdown wraps blockquote text in a <p>, so the .article p rules above
      would win and a pull quote would render as ordinary body copy.
   2. The opening paragraph was hand-marked .first. Authored markdown cannot
      carry a class, so select it structurally too. In the static markup this
      matches the same element .first already does, so nothing changes there. */
.article blockquote p{
  font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;margin:0;
}
.article > p:first-of-type{font-size:clamp(19px,1.6vw,23px);line-height:1.6;color:var(--mist)}
.article-shell .article > p:first-of-type{color:rgba(14,17,18,.95)}
.light-zone .article > p:first-of-type{color:var(--void)}