/* SITE WOW (2 Nov 2026): the case pages, the work wall's quick view and the home below THE TURN. Built by
   scripts/site27r/build.mjs from the vault's cases-2027-2026-11-02/cases.json; motion in assets/95/wow.js.
   Every pinned or hidden state waits for html.wow-js, so without the script, or with reduced motion, the page reads as
   written. Fonts: AX (Archivo Expanded 800) for headlines and numbers, BS (Big Shoulders 800, a caps and digits subset)
   for poster words, Switzer for text, Plex Mono for labels. No red, no orange; Ice stays the live dot and Book a call. */
@font-face{font-family:BS;src:url(/assets/95/bigshoulders-800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{--w-black:#0A0B0D;--w-mist:#1B1A19;--w-off:#F2F0EF;--w-bone:#E6E4DF;--w-ink:#1A1C20;--w-navy:#1F2634;--w-steel:#637882;--w-ease:cubic-bezier(.2,.7,.1,1);--w-pad:clamp(16px,4vw,48px);
  --w-noise: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* grain on brand surfaces: one layer, moved by transform only */
.wow-grain{position:absolute;inset:-60px;z-index:1;pointer-events:none;background-image:var(--w-noise);background-size:160px;opacity:.09;mix-blend-mode:overlay}
.wow-js .wow-grain{animation:wow-grain .9s steps(3) infinite}
@keyframes wow-grain{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-23px,17px,0)}66%{transform:translate3d(19px,-29px,0)}100%{transform:translate3d(-7px,11px,0)}}
.wow-paper{position:relative;isolation:isolate}
.wow-paper::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--w-noise);background-size:160px;opacity:.16;mix-blend-mode:multiply}

/* ---------------- the case page ---------------- */
body.wow{background:var(--w-black)}
.cs{position:relative;clip-path:inset(0);color:var(--w-off);background:var(--w-black);--dim:.18}
.cs-fix{position:fixed;inset:0;z-index:0;pointer-events:none}
.cs-frame{position:absolute;inset:0;overflow:hidden;background:var(--w-black)}
.cs-frame picture,.cs-frame img,.cs-frame video,.cs-blur picture,.cs-blur img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cs-frame video{opacity:0;transition:opacity .9s var(--w-ease)}
.cs-frame video.on{opacity:1}
.cs-blur{display:none;position:absolute;inset:-60px;overflow:hidden}
.cs-blur img{filter:blur(42px) saturate(1.1) brightness(.5);transform:scale(1.12)}
.cs-scrim{position:absolute;inset:0;background:var(--w-black);opacity:var(--dim);transition:opacity .9s var(--w-ease)}
.cs-scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(10 11 13 / .55),rgb(10 11 13 / 0) 58%)}
/* the hero's own foot: the headline, the line and the caption sit on it, so they keep AA over the brightest frame */
.cs-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgb(10 11 13 / .94) 0%,rgb(10 11 13 / .8) 34%,rgb(10 11 13 / .42) 60%,rgb(10 11 13 / 0) 82%)}
@media (min-width:900px){.cs-hero::before{background:linear-gradient(to top,rgb(10 11 13 / .94) 0%,rgb(10 11 13 / .84) 36%,rgb(10 11 13 / .45) 58%,rgb(10 11 13 / 0) 76%),linear-gradient(to right,rgb(10 11 13 / .55),rgb(10 11 13 / 0) 62%)}}
.cs[data-at="hero"] .cs-scrim{opacity:.12}
/* framed smaller over its own blurred poster: the films the facts flag as upscaled or vertical */
@media (min-width:700px){
  .cs[data-mode-d="inset"] .cs-blur{display:block}
  .cs[data-mode-d="inset"] .cs-frame{inset:auto;top:50%;right:clamp(24px,6vw,110px);transform:translateY(-50%);width:min(46vw,calc(72vh * var(--arn-d)),1100px);aspect-ratio:var(--ar-d);border-radius:3px;box-shadow:0 50px 140px rgb(0 0 0 / .55)}
  .cs[data-mode-d="inset"] .wrap{margin-left:var(--w-pad);margin-right:auto;max-width:min(50vw,820px)}
}
@media (max-width:699px){
  .cs[data-mode-p="inset"] .cs-blur{display:block}
  .cs[data-mode-p="inset"] .cs-frame{inset:auto;top:16svh;left:16px;right:16px;aspect-ratio:var(--ar-p);border-radius:3px;box-shadow:0 30px 80px rgb(0 0 0 / .5)}
}
.cs .wow-grain{z-index:2}
.cs > section{position:relative;z-index:3}
.cs-k{display:flex;align-items:center;gap:14px;font:500 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase;margin:0 0 clamp(22px,4vh,40px);color:var(--w-off)}
.cs-k::before{content:"";width:32px;height:1px;background:currentColor;opacity:.7}
/* small mono over a film: a dark tag behind it keeps 4.5 to 1 on any frame */
.cs-k,.cs-stamp,.cs-cap,.cs-svc-line,.cs-n-k,.cs-step-d{width:max-content;max-width:100%;padding:7px 11px;border-radius:2px;background:rgb(10 11 13 / .7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cs-k::before{display:none}
.cs-step-d{background:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}

/* the side index: which part you are in, and a way to jump */
.cs-ix{position:fixed;z-index:4;right:var(--w-pad);top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:2px;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.cs-ix a{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:32px;color:rgb(242 240 239 / .62);text-decoration:none;transition:color .3s}
.cs-ix a::after{content:"";width:14px;height:1px;background:currentColor;transition:width .4s var(--w-ease)}
.cs-ix a[aria-current],.cs-ix a:hover,.cs-ix a:focus-visible{color:var(--w-off)}
.cs-ix a[aria-current]::after{width:40px}
@media (min-width:1100px){.cs-ix{display:flex}.cs[data-at="hero"] .cs-ix{opacity:0}.cs-ix{transition:opacity .5s}}

/* hero: the film nearly bare, the headline at the foot */
.cs-hero{min-height:100svh;display:flex;align-items:flex-end;padding:0 0 clamp(44px,9vh,110px)}
.cs-hero .wrap{width:100%}
.cs-stamp{display:flex;align-items:center;gap:10px;margin:0;color:var(--w-off);letter-spacing:.16em;text-transform:uppercase}
.cs-hero h1{font:800 clamp(46px,8.4vw,168px)/.86 AX,sans-serif;letter-spacing:-.05em;text-transform:uppercase;margin:18px 0 20px;max-width:13ch;text-wrap:balance;color:var(--w-off)}
.cs-sub{font:500 clamp(19px,1.7vw,28px)/1.3 Switzer,sans-serif;letter-spacing:-.015em;margin:0 0 14px;max-width:34ch}
.cs-cap{margin:0;color:rgb(242 240 239 / .82);letter-spacing:.14em;text-transform:uppercase}
.cs-down{position:absolute;right:var(--w-pad);bottom:clamp(44px,9vh,110px);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--w-off);text-decoration:none;letter-spacing:.2em;text-transform:uppercase;font-size:12px;min-height:44px}
.cs-down i{width:1px;height:56px;background:linear-gradient(var(--w-off),transparent);transform-origin:top}
.wow-js .cs-down i{animation:wow-drop 2.2s var(--w-ease) infinite}
@keyframes wow-drop{0%{transform:scaleY(0)}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-width:699px){.cs-down{display:none}}

.cs-part{padding:clamp(90px,16vh,180px) 0}

/* SERVICE: the service words as a poster, one lit, its line under it */
.cs-svc{min-height:100svh;display:flex;align-items:center}
.cs-svc .wrap{width:100%}
.cs-svcw{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 .16em;font:800 clamp(92px,19vw,340px)/.8 BS,AX,sans-serif;letter-spacing:.005em}
.cs-svcw a{display:block;color:rgb(242 240 239 / .62);text-decoration:none;transition:color .4s var(--w-ease),transform .6s var(--w-ease)}
.cs-svcw a.on,.cs-svcw a:hover,.cs-svcw a:focus-visible{color:var(--w-off)}
.cs-plus{font-size:.36em;color:rgb(242 240 239 / .6)}
.cs-svc-line{margin:clamp(18px,3vh,30px) 0 0;color:var(--w-off);font-size:13px;letter-spacing:.16em;text-transform:uppercase;min-height:1.5em}
.cs-brief{margin:clamp(30px,6vh,64px) 0 0;max-width:28ch;font:500 clamp(23px,2.4vw,40px)/1.16 Switzer,sans-serif;letter-spacing:-.025em;text-wrap:balance}

/* WHAT WE DID: big lines that light as they pass the middle of the screen */
@media (min-width:900px){.cs-did .wrap{display:grid;grid-template-columns:minmax(180px,20%) 1fr;gap:4vw;align-items:start}.cs-did .cs-k{position:sticky;top:45vh}}
.cs-lines{list-style:none;margin:0;padding:0;display:grid;gap:clamp(30px,7vh,84px)}
.cs-lines li{font:600 clamp(29px,4.2vw,76px)/1.02 Switzer,sans-serif;letter-spacing:-.04em;max-width:19ch;text-wrap:balance;opacity:max(var(--lit,1),.55);transform:translate3d(calc((1 - var(--lit,1)) * -28px),0,0)}
.cs[data-mode-d="inset"] .cs-lines li{font-size:clamp(28px,3.2vw,56px)}
/* never a stacked list: from 900 px the lines step across the page, every other one set to the right */
@media (min-width:900px){.cs-lines li:nth-child(even){justify-self:end;text-align:right}.cs[data-mode-d="inset"] .cs-lines li:nth-child(even){justify-self:start;text-align:left;margin-left:12%}}

/* HOW WE GOT IT DONE: a real sequence, so it is numbered; pinned and sideways from 900 px */
.cs-how-head{display:flex;align-items:center;gap:24px}
.cs-how-head .cs-k{margin:0;flex:none}
.cs-how-bar{flex:1;height:1px;background:rgb(242 240 239 / .22);position:relative;max-width:520px}
.cs-how-bar i{position:absolute;inset:0;background:var(--w-off);transform-origin:left;transform:scaleX(var(--p,0))}
.cs-how-track{list-style:none;margin:clamp(30px,6vh,64px) 0 0;padding:0 var(--w-pad)}
.cs-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,56px);align-items:end;margin-bottom:clamp(40px,8vh,80px)}
.cs-step-n{font:800 clamp(120px,30vh,400px)/.74 BS,AX,sans-serif;color:transparent;-webkit-text-stroke:1.5px rgb(242 240 239 / .78)}
.cs-step-c{padding:clamp(22px,3vw,44px);background:rgb(10 11 13 / .68);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);border:1px solid rgb(242 240 239 / .14);border-radius:3px}
.cs-step-d{margin:0 0 14px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--w-off)}
.cs-step-t{margin:0;font:500 clamp(20px,1.9vw,32px)/1.28 Switzer,sans-serif;letter-spacing:-.015em;max-width:32ch}
@media (min-width:900px){
  .wow-js .cs-how{height:calc(100vh + (var(--n) - 1) * 65vh);padding:0}
  .wow-js .cs-how-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  .wow-js .cs-how-track{display:flex;gap:5vw;width:max-content;will-change:transform}
  .wow-js .cs-step{width:min(62vw,1000px);margin:0}
}
@media (max-width:899px){
  .cs-step{grid-template-columns:1fr;gap:0}
  .cs-step-n{font-size:clamp(110px,34vw,170px);margin-bottom:-.14em}
  .wow-js .cs-step{opacity:.35;transform:translateY(24px);transition:opacity .7s var(--w-ease),transform .9s var(--w-ease)}
  .wow-js .cs-step.on{opacity:1;transform:none}
}

/* THE NUMBERS: one per screen, huge, counting up; left, then right */
.cs-nums{padding-bottom:0}
.cs-n{min-height:86svh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--w-pad)}
.cs-n.r{align-items:flex-end;text-align:right}
.cs-n-v{margin:0;width:100%;font:800 clamp(120px,30vw,460px)/.8 AX,sans-serif;letter-spacing:-.065em;white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-n-v span{display:inline-block}
.cs-n-l{font:500 clamp(20px,2.1vw,36px)/1.2 Switzer,sans-serif;letter-spacing:-.02em;max-width:24ch;margin:clamp(14px,3vh,28px) 0 10px}
.cs-n-k{margin:0;color:rgb(242 240 239 / .8);letter-spacing:.16em;text-transform:uppercase}
.cs[data-mode-d="inset"] .cs-n{max-width:none}
@media (min-width:700px){.cs[data-mode-d="inset"] .cs-n{padding-right:calc(50vw + 40px)}.cs[data-mode-d="inset"] .cs-n.r{align-items:flex-start;text-align:left}}

/* the quote: bone, paper, the brand set huge tone on tone behind it */
.cs-quote{background:var(--w-bone);color:var(--w-ink);padding:clamp(100px,18vh,220px) 0;overflow:hidden}
.cs-quote::before{content:attr(data-brand);position:absolute;z-index:-1;left:-.04em;bottom:-.2em;font:800 clamp(160px,30vw,560px)/.8 BS,AX,sans-serif;color:#DCD9D3;white-space:nowrap;pointer-events:none}
.cs-quote figure{margin:0 auto}
.cs-quote blockquote{margin:0}
.cs-quote blockquote p{font:500 clamp(28px,3.7vw,66px)/1.1 Switzer,sans-serif;letter-spacing:-.035em;max-width:24ch;text-wrap:balance;margin:0}
.cs-quote figcaption{margin-top:clamp(24px,4vh,40px);letter-spacing:.18em;text-transform:uppercase;color:rgb(26 28 32 / .74)}

/* the end: the next case playing, and Book a call beside it */
.cs-end{display:grid;background:var(--w-black);color:var(--w-off)}
@media (min-width:900px){.cs-end{grid-template-columns:1.4fr 1fr;min-height:88vh}}
.cs-next{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:72svh;padding:var(--w-pad);padding-bottom:clamp(32px,6vh,64px);color:inherit;text-decoration:none;overflow:hidden;isolation:isolate}
.cs-next-m{position:absolute;inset:0;z-index:-1}
.cs-next-m picture,.cs-next-m img,.cs-next-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-next-m img{transition:transform 1.4s var(--w-ease)}
.cs-next-m video{opacity:0;transition:opacity .8s}
.cs-next-m video.on{opacity:1}
.cs-next-m::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(10 11 13 / .86),rgb(10 11 13 / .1) 62%)}
.cs-next:hover .cs-next-m img,.cs-next:focus-visible .cs-next-m img{transform:scale(1.04)}
.cs-next .mono{margin:0;letter-spacing:.2em;text-transform:uppercase}
.cs-next-t{margin:14px 0 0;font:800 clamp(40px,5.6vw,104px)/.88 AX,sans-serif;letter-spacing:-.05em;text-transform:uppercase;max-width:12ch}
.cs-next-t span{display:block;margin-top:16px;font:500 clamp(17px,1.4vw,22px)/1.3 Switzer,sans-serif;letter-spacing:0;text-transform:none;max-width:30ch}
.cs-book{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,8vw,120px) var(--w-pad);background:var(--w-mist);position:relative}
.cs-book h2{font:800 clamp(34px,4.2vw,76px)/.9 AX,sans-serif;letter-spacing:-.045em;text-transform:uppercase;margin:0 0 18px}
.cs-book > p{font:500 clamp(18px,1.4vw,22px)/1.4 Switzer,sans-serif;margin:0 0 28px;max-width:30ch;color:rgb(242 240 239 / .86)}
.cs-book .actions{margin:0}
.cs-credit{margin:36px 0 14px;color:rgb(242 240 239 / .72);letter-spacing:.12em;text-transform:uppercase}

/* ---------------- the wall: cursor label, the quick view's four parts ---------------- */
.wf-cur{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:flex;gap:12px;align-items:center;margin:20px 0 0 20px;padding:10px 14px;border-radius:999px;background:rgb(242 240 239 / .94);color:var(--w-ink);font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s;will-change:transform}
.wf-cur.on{opacity:1}
.wf-cur b{font-weight:500;color:rgb(26 28 32 / .66)}
.wf-cur b::before{content:"";display:inline-block;width:1px;height:10px;margin-right:12px;background:currentColor;vertical-align:-1px}
[data-cur]{cursor:none}
@media (hover:none){[data-cur]{cursor:pointer}}

.w95-qv{border:0;padding:0;margin:auto 0 0;width:100%;max-width:none;max-height:92svh;border-radius:16px 16px 0 0;background:var(--w-bone);color:var(--w-ink);overflow:hidden}
@media (min-width:900px){.w95-qv{margin:auto;width:min(1180px,92vw);max-height:90svh;border-radius:16px}}
.w95-qv::backdrop{background:rgb(10 11 13 / .72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.w95-qv .qv-bar{position:sticky;top:0;z-index:2;display:flex;gap:8px;padding:10px;background:var(--w-bone);border-bottom:1px solid rgb(26 28 32 / .14)}
.w95-qv .qv-bar button{appearance:none;height:44px;padding:0 16px;border-radius:999px;border:1px solid rgb(26 28 32 / .2);background:none;color:inherit;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.w95-qv .qv-x{margin-left:auto}
.w95-qv .qv-body{max-height:calc(92svh - 65px);overflow:auto;overscroll-behavior:contain}
.w95-qv .qv-hero{background:var(--w-black);aspect-ratio:16/9}
.w95-qv .qv-hero video{width:100%;height:100%;object-fit:cover;display:block}
.q4{padding:clamp(22px,4vw,52px);display:grid;gap:clamp(30px,4vw,52px)}
.q4 .kick{font:500 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px;color:rgb(26 28 32 / .72)}
.q4 > .kick{margin:0 0 -18px}
.q4 h2{font:800 clamp(30px,4.2vw,64px)/.9 AX,sans-serif;text-transform:uppercase;letter-spacing:-.045em;margin:0;max-width:16ch}
.q4 h3{margin:0 0 14px}
.q4-words{font:800 clamp(50px,6vw,100px)/.84 BS,AX,sans-serif;margin:0 0 16px}
.q4-words a{color:inherit;text-decoration:none}
.q4-words a:hover,.q4-words a:focus-visible{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.08em}
.q4-words span{color:rgb(26 28 32 / .5)}
.q4-brief{font:500 18px/1.45 Switzer,sans-serif;margin:0;max-width:40ch}
.q4-run{font:500 clamp(21px,2vw,30px)/1.28 Switzer,sans-serif;letter-spacing:-.02em;margin:0}
.q4-run i{font-style:normal;color:rgb(26 28 32 / .45)}
.q4-how ol{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
.q4-how li{counter-increment:s;display:grid;grid-template-columns:2.4rem 1fr;align-items:baseline;font:500 17px/1.5 Switzer,sans-serif}
.q4-how li::before{content:counter(s);font:800 34px/1 BS,AX,sans-serif}
.q4-row{display:grid;gap:18px}
.q4-row > div{border-top:1px solid rgb(26 28 32 / .16);padding-top:14px;overflow:hidden}
.q4-row b{display:block;width:max-content;font:800 clamp(40px,4.4vw,72px)/.9 AX,sans-serif;letter-spacing:-.055em;white-space:nowrap;font-variant-numeric:tabular-nums}
.q4-row span{display:block;margin-top:8px;font:500 15px/1.4 Switzer,sans-serif;color:rgb(26 28 32 / .74)}
.q4 .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.w95-qv .btn{display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:999px;border:1px solid currentColor;font:600 16px/1 Switzer,sans-serif;text-decoration:none;background:none;color:inherit;cursor:pointer}
.w95-qv .btn.blue{background:#B2D5E5;border-color:#B2D5E5;color:var(--w-ink)}
.w95-qv .prefer{flex-basis:100%;margin:6px 0 0;font:500 12px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:rgb(26 28 32 / .72)}
.w95-qv .prefer a{color:inherit}.w95-qv .prefer .copy{font:inherit;background:none;border:0;text-decoration:underline;cursor:pointer;color:inherit;min-height:32px}
@media (min-width:900px){
  .q4{grid-template-columns:repeat(12,minmax(0,1fr))}
  .q4 > .kick,.q4 > h2,.q4 .actions{grid-column:1/-1}
  .q4-svc{grid-column:1/6}.q4-did{grid-column:7/-1}.q4-how{grid-column:1/8}.q4-nums{grid-column:9/-1}
}

/* ---------------- the home below THE TURN ---------------- */
.fr95-btn.work{white-space:nowrap}
@media (max-width:420px){.fr95-btn.work{display:none}}
.w95{position:relative;overflow:clip}
/* a label that is also the section's heading (h2) keeps the label's face; the story's h2 rule would make it a headline */
.st .w95 h2.st-kick{font:500 12px/1.5 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;max-width:none;color:rgb(242 240 239 / .8)}
.st .w95-voices h2.st-kick{color:rgb(26 28 32 / .74)}
.w95 h2:not(.st-kick):not(.w95-made-h){font:800 clamp(38px,6vw,108px)/.88 AX,sans-serif;letter-spacing:-.05em;text-transform:uppercase;margin:0;max-width:14ch}

/* who we are: the statement lights word by word as you scroll */
.w95-who{background:var(--w-mist);color:var(--w-off);min-height:100svh;display:flex;align-items:center;padding:clamp(110px,20vh,220px) 0 clamp(80px,14vh,160px)}
.w95-who .st-wrap{position:relative;z-index:2;width:100%}
.w95-who-big{font:800 clamp(44px,7.6vw,156px)/.9 AX,sans-serif;letter-spacing:-.055em;text-transform:uppercase;margin:clamp(20px,4vh,40px) 0 clamp(52px,11vh,120px);max-width:13.5ch}
.w95-who-big .w{transition:color .5s var(--w-ease)}
.wow-js .w95-who-big .w{color:rgb(242 240 239 / .36)}
.wow-js .w95-who-big .w.on{color:var(--w-off)}
.w95-who-foot{display:grid;gap:24px;align-items:end}
@media (min-width:900px){.w95-who-foot{grid-template-columns:1.1fr 1fr;gap:6vw}}
.w95-who-l{font:500 clamp(22px,2.2vw,36px)/1.18 Switzer,sans-serif;letter-spacing:-.025em;margin:0;max-width:22ch}
.w95-who-r{margin:0;font-size:12px;line-height:2;letter-spacing:.14em;text-transform:uppercase;color:rgb(242 240 239 / .82)}
.w95-who-r .live{margin-right:8px}

/* MADE BY MUUS: the in house line over the work, the crafts in one line, each one cuts the film */
.w95-made{min-height:100svh;display:flex;align-items:flex-end;background:var(--w-black);color:var(--w-off);isolation:isolate}
.w95-made-bg{position:absolute;inset:0;z-index:-1}
.w95-made-f{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--w-ease)}
.w95-made-f.on{opacity:1}
.w95-made-f picture,.w95-made-f img,.w95-made-f video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.w95-made-f video{opacity:0;transition:opacity .6s}
.w95-made-f video.on{opacity:1}
.w95-made-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgb(10 11 13 / .95) 6%,rgb(10 11 13 / .8) 46%,rgb(10 11 13 / .38) 78%,rgb(10 11 13 / .25))}
.w95-made .wow-grain{z-index:2}
.w95-made-in{position:relative;z-index:3;width:100%;padding-top:16svh;padding-bottom:clamp(40px,8vh,96px)}
.w95-made-h,.st .w95-made-h{font:800 clamp(64px,min(9vw,17vh),196px)/.84 BS,AX,sans-serif;letter-spacing:.005em;margin:18px 0 clamp(22px,4vh,40px);max-width:14ch;color:var(--w-off)}
.w95-crafts{font:500 clamp(22px,2.4vw,42px)/1.32 Switzer,sans-serif;letter-spacing:-.02em;margin:0;max-width:32ch}
.w95-crafts > span{color:rgb(242 240 239 / .76)}
.w95-craft{appearance:none;border:0;background:none;color:rgb(242 240 239 / .78);font:inherit;letter-spacing:inherit;padding:.32em 0;margin:-.32em 0;cursor:pointer;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 86%;background-repeat:no-repeat;transition:color .3s,background-size .3s}
.w95-craft.on,.w95-craft:hover,.w95-craft:focus-visible{color:var(--w-off);background-size:100% 3px}
.w95-made-cap{margin:clamp(20px,4vh,34px) 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgb(242 240 239 / .82)}

/* the numbers: pinned, one giant number at a time */
.w95-nums{background:radial-gradient(120% 90% at 72% 28%,#2B3B48 0%,var(--w-navy) 46%,#0E1218 100%);color:var(--w-off)}
.w95-nums-pin{position:relative;overflow:hidden;padding:clamp(100px,16vh,180px) 0}
.wow-aura{position:absolute;inset:-25%;pointer-events:none;background:radial-gradient(34% 34% at calc(28% + var(--p,0) * 44%) 44%,rgb(99 120 130 / .5),transparent 70%);filter:blur(30px)}
.w95-nums .wow-grain{z-index:1}
.w95-nums-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px}
.w95-ticks{list-style:none;display:flex;gap:8px;margin:0;padding:0}
.w95-ticks li{width:30px;height:2px;background:rgb(242 240 239 / .24);transition:background .4s}
.w95-ticks li.on{background:var(--w-off)}
.w95-nums-stage{position:relative;z-index:2}
.w95-n{display:flex;flex-direction:column;justify-content:center;padding:clamp(50px,9vh,100px) var(--pad,var(--w-pad));color:var(--w-off);text-decoration:none}
.w95-n:nth-child(even){align-items:flex-end;text-align:right}
.w95-n b{display:block;width:100%;font:800 clamp(130px,33vw,640px)/.78 AX,sans-serif;letter-spacing:-.07em;white-space:nowrap;font-variant-numeric:tabular-nums}
.w95-n b span{display:inline-block}
.w95-n-l{font:500 clamp(22px,2.5vw,42px)/1.14 Switzer,sans-serif;letter-spacing:-.025em;max-width:22ch;margin-top:clamp(16px,3.4vh,34px)}
.w95-n-by{margin-top:14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgb(242 240 239 / .78)}
.w95-n:hover .w95-n-by,.w95-n:focus-visible .w95-n-by{color:var(--w-off);text-decoration:underline}
.wow-js .w95-nums{height:calc(var(--n) * 80svh + 100svh)}
.wow-js .w95-nums-pin{position:sticky;top:0;height:100svh;padding:0;display:flex;flex-direction:column}
.wow-js .w95-nums-head{position:absolute;top:calc(60px + 3vh);left:0;right:0}
.wow-js .w95-nums-stage{flex:1}
.wow-js .w95-n{position:absolute;inset:0;opacity:0;transform:translate3d(0,9vh,0);transition:opacity .55s var(--w-ease),transform .9s var(--w-ease);pointer-events:none}
.wow-js .w95-n.past{transform:translate3d(0,-9vh,0)}
.wow-js .w95-n.on{opacity:1;transform:none;pointer-events:auto}
/* FINAL QA 3 Nov item 17: on phones the pin is shorter and each number sits in the lower half, under the kicker, so when the pin
   lets go the last number leaves with the next section right behind it, never a screen of empty navy */
@media (max-width:699px){.wow-js .w95-nums{height:calc(var(--n) * 56svh + 100svh)}.wow-js .w95-n{justify-content:flex-end;padding-bottom:max(56px,9svh)}}

/* the work: the ten cases, films in view, filter by service */
.w95-work{background:var(--w-black);color:var(--w-off);padding:clamp(90px,16vh,180px) 0 clamp(70px,12vh,140px)}
.w95-work-head{display:grid;gap:22px;margin-bottom:clamp(30px,6vh,64px)}
.w95-work .wall-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.w95-work .wall-chips button{appearance:none;height:44px;padding:0 16px;border-radius:999px;border:1px solid rgb(242 240 239 / .24);background:none;color:inherit;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.w95-work .wall-chips button[aria-pressed="true"]{border-color:var(--w-off);box-shadow:inset 0 0 0 1px var(--w-off)}
.w95-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:26px 10px;padding:0 var(--pad,var(--w-pad));max-width:var(--max,1320px);margin:0 auto}
@media (min-width:900px){.w95-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 18px}}
.w95-grid .tile{display:block;min-width:0;color:inherit;text-decoration:none}
.w95-grid .tile[hidden]{display:none}
.w95-grid .media{position:relative;overflow:hidden;border-radius:4px;background:#15161A;aspect-ratio:4/5}
.w95-grid .media picture,.w95-grid .media img,.w95-grid .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.w95-grid .media img{transition:transform 1.2s var(--w-ease)}
.w95-grid .media video{opacity:0;transition:opacity .6s var(--w-ease)}
.w95-grid .media video.on{opacity:1}
.w95-grid .tile:hover .media img,.w95-grid .tile:focus-visible .media img{transform:scale(1.045)}
.w95-grid .t{font:700 clamp(17px,1.4vw,22px)/1.1 Switzer,sans-serif;letter-spacing:-.02em;margin-top:14px}
.w95-grid .m{font:500 12px/1.5 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgb(242 240 239 / .74);margin-top:4px}
.w95-grid .tile-n{font:500 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgb(242 240 239 / .74);margin-top:10px;padding-top:10px;border-top:1px solid rgb(242 240 239 / .16)}
.w95-grid .tile-n b{font:700 16px/1 Switzer,sans-serif;color:var(--w-off);margin-right:4px;letter-spacing:-.01em}
.w95-grid .tile.f{grid-column:1/-1}
.w95-grid .tile.f .t{font:800 clamp(28px,3.4vw,56px)/.92 AX,sans-serif;text-transform:uppercase;letter-spacing:-.045em;margin-top:18px}
@media (max-width:899px){.w95-grid .tile.f .media{aspect-ratio:4/5}}
@media (min-width:900px){.w95-grid .tile.f{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}.w95-grid .tile.f.r{grid-column:-3/-1}.w95-grid .tile.f .media{flex:1;aspect-ratio:auto;min-height:0}}
.w95-work-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(36px,7vh,72px)}
.w95-work-foot p{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgb(242 240 239 / .74)}

/* the five services as doors: hover or focus opens one and plays it; phones swipe through */
.w95-doors{background:var(--w-black);color:var(--w-off);padding:clamp(90px,16vh,180px) 0 0}
.w95-doors-head{margin-bottom:clamp(30px,6vh,60px)}
.w95-doors-row{display:flex;gap:3px;height:min(86svh,980px)}
.w95-door{position:relative;flex:1 1 0;min-width:0;overflow:hidden;color:inherit;text-decoration:none;isolation:isolate;transition:flex-grow .85s var(--w-ease)}
.w95-door.on{flex-grow:3.8}
.w95-door-m{position:absolute;inset:0;z-index:-1}
.w95-door-m picture,.w95-door-m img,.w95-door-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.w95-door-m img{filter:brightness(.62) saturate(.92);transition:filter .8s var(--w-ease),transform 1.4s var(--w-ease)}
.w95-door.on .w95-door-m img{filter:brightness(.8)}
.w95-door-m video{opacity:0;transition:opacity .7s}
.w95-door-m video.on{opacity:1}
.w95-door-m::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(10 11 13 / .88),rgb(10 11 13 / 0) 60%)}
.w95-door-name{position:absolute;left:clamp(10px,1.4vw,26px);bottom:clamp(18px,3.4vh,40px);font:800 clamp(54px,6.2vw,128px)/.8 BS,AX,sans-serif;letter-spacing:.01em;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.w95-door-c{position:absolute;left:calc(clamp(10px,1.4vw,26px) + clamp(54px,6.2vw,128px) * .95);right:clamp(16px,2vw,36px);bottom:clamp(18px,3.4vh,40px);display:grid;gap:14px;opacity:0;transform:translateY(14px);transition:opacity .5s var(--w-ease),transform .7s var(--w-ease)}
.w95-door.on .w95-door-c{opacity:1;transform:none;transition-delay:.25s}
.w95-door-l{font:500 clamp(20px,1.8vw,32px)/1.2 Switzer,sans-serif;letter-spacing:-.02em;max-width:22ch}
.w95-door-c .mono{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:899px){
  .w95-doors-row{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:0 var(--pad,var(--w-pad)) 6px;scrollbar-width:none}
  .w95-doors-row::-webkit-scrollbar{display:none}
  .w95-door,.w95-door.on{flex:0 0 80vw;height:68svh;scroll-snap-align:center;border-radius:4px}
  .w95-door-name{writing-mode:horizontal-tb;transform:none;left:18px;bottom:auto;top:18px;font-size:clamp(56px,17vw,84px)}
  .w95-door-c{left:18px;right:18px;opacity:1;transform:none}
  .w95-door-m img{filter:brightness(.72)}
}

/* voices: one at a time on bone, changed by a tap; the client wall under it */
.w95-voices{background:var(--w-bone);color:var(--w-ink);padding:clamp(100px,18vh,220px) 0}
.w95-voices .st-kick{color:rgb(26 28 32 / .74)}
.w95-voice-stage{display:grid;margin-top:clamp(18px,3vh,30px)}
.w95-voice{grid-area:1/1;margin:0}
.w95-voice[hidden]{display:none}
.wow-js .w95-voice.on{animation:wow-in .8s var(--w-ease)}
@keyframes wow-in{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.w95-voice blockquote{margin:0}
.w95-voice blockquote p{font:500 clamp(30px,4.3vw,78px)/1.06 Switzer,sans-serif;letter-spacing:-.04em;max-width:21ch;text-wrap:balance;margin:0}
.w95-voice figcaption{margin-top:clamp(22px,4vh,38px);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgb(26 28 32 / .76)}
.w95-voice figcaption a{color:var(--w-ink)}
.w95-voice-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(32px,6vh,64px)}
.w95-voice-tabs button{appearance:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgb(26 28 32 / .24);background:none;color:inherit;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.w95-voice-tabs button[aria-selected="true"]{background:var(--w-ink);border-color:var(--w-ink);color:var(--w-off)}
.w95-logos{margin-top:clamp(70px,13vh,150px);padding-top:28px;border-top:1px solid rgb(26 28 32 / .14)}
.w95-logos .st-btn{margin-top:28px}

/* reduced motion: still films (posters), no counting, no pins, every word lit */
@media (prefers-reduced-motion:reduce){.wow-grain{animation:none!important}.cs-lines li{opacity:1!important;transform:none!important}}

/* the story's own rule (.st section: overflow hidden and a padding) outranks a class: the new sections opt out of it here,
   or the numbers could not pin (a sticky child needs no hidden overflow on the way up) */
.st section.w95{overflow:clip;padding:0}
.st section.w95-who{padding:clamp(110px,20vh,220px) 0 clamp(80px,14vh,160px)}
.st section.w95-work{padding:clamp(90px,16vh,180px) 0 clamp(70px,12vh,140px)}
.st section.w95-doors{padding:clamp(90px,16vh,180px) 0 0}
.st section.w95-voices{padding:clamp(100px,18vh,220px) 0}
.st section.w95.tx95-on{overflow:clip}