/* Studio Grade website. Spine: Editorial Motion · Confident · white + Klein blue · Mona Sans wide · motif: the grade stamp */
:root{
  --paper:#FFFFFF; --paper-2:#F4F4F6; --surface:#FFFFFF;
  --ink-rgb:11 11 16; --ink:rgb(var(--ink-rgb));
  --ink-2:rgb(var(--ink-rgb)/.74); --ink-3:rgb(var(--ink-rgb)/.62); --ink-4:rgb(var(--ink-rgb)/.4);
  --hairline:rgb(var(--ink-rgb)/.1); --hairline-2:rgb(var(--ink-rgb)/.18);
  --blue:#2B2BF2; --blue-ink:#F2F2FF; --blue-2:#C9CAFF; --night:#0B0B10;
  --accent:var(--blue); --accent-ink:#fff; --focus:var(--blue);
  --font-display:"Mona Sans",ui-sans-serif,system-ui,sans-serif; --font-text:var(--font-display);
  --font-serif:var(--font-display); --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --margin:clamp(1rem,.4rem + 2vw,2rem); --gap:clamp(.875rem,.6rem + .6vw,1.25rem);
  --ease:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.76,0,.24,1);
  --head-h:64px;
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--ease)}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

html{scroll-padding-top:calc(var(--head-h) + 16px)}
body{font:400 17px/1.55 var(--font-text);font-stretch:100%;letter-spacing:-.006em;background:var(--paper);color:var(--ink)}
.wrap{padding-inline:var(--margin)}
img{background:var(--paper-2)}
code{font-family:var(--font-mono)}
.inline{font-size:.9em;background:var(--paper-2);padding:2px 7px;border-radius:5px}
.skip{position:absolute;left:var(--margin);top:-80px;z-index:200}.skip:focus{top:12px}

/* ---------- display type: wide grotesk, tight ---------- */
.hero-h,.page-h,.case-h,.sec-h,.statement-h,.install-h,.foot-big,.next-name,.w-name,.feat-name,.step-h,.cl-name,.st-name,.dir-table th[scope=row]{font-family:var(--font-display);font-stretch:116%;font-weight:620;text-wrap:balance}
.sec-h{font-size:clamp(2rem,1.1rem + 2.7vw,3.9rem);line-height:1.02;letter-spacing:-.04em;max-width:18ch}
.sec-p{font-size:clamp(1.0625rem,1rem + .25vw,1.25rem);line-height:1.5;color:var(--ink-2);max-width:46ch;margin-top:22px}
.kicker{display:flex;align-items:center;gap:10px;font:560 15px/1 var(--font-text);color:var(--ink-2);margin-bottom:22px}
.kicker::before{content:"";width:10px;height:10px;background:var(--blue);border-radius:2px;transform:rotate(-8deg)}
.kicker--light{color:rgb(255 255 255/.78)}.kicker--light::before{background:var(--blue-2)}
.link{display:inline-flex;gap:8px;font:600 16px/1 var(--font-text);color:var(--ink);text-decoration:none;padding:10px 0;border-bottom:1.5px solid currentColor;transition:color .2s var(--ease)}
.link:hover{color:var(--blue)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(2.5rem,1.5rem + 3vw,4.5rem)}

/* ---------- buttons: pill camp ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border:0;border-radius:999px;font:600 16px/1 var(--font-text);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .15s var(--ease)}
.btn--blue{background:var(--blue);color:#fff}.btn--blue:hover{background:#1E1EC9}
.btn--line{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);background:none}.btn--line:hover{background:var(--ink);color:#fff}
.btn:active,.cmd:active{transform:translateY(1px)}
.cmd{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 6px 0 22px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:500 14.5px/1 var(--font-mono);cursor:pointer;max-width:100%;transition:box-shadow .2s var(--ease)}
.cmd:hover{box-shadow:0 0 0 4px rgb(43 43 242/.22)}
.cmd code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-p{color:rgb(255 255 255/.55)}
.cmd-s{display:grid;place-items:center;height:38px;min-width:84px;padding:0 14px;border-radius:999px;background:rgb(255 255 255/.14);font:600 13px/1 var(--font-text)}
.cmd--big{height:64px;font-size:16.5px;padding-left:26px}.cmd--big .cmd-s{height:50px;min-width:96px}
.cmd--light{background:#fff;color:var(--blue)}.cmd--light .cmd-p{color:rgb(43 43 242/.55)}.cmd--light .cmd-s{background:rgb(43 43 242/.1)}

/* ---------- the grade stamp (motif) ---------- */
.stamp{display:inline-flex;flex-direction:column;gap:3px;padding:7px 11px 8px;border:2px solid var(--blue);border-radius:6px;color:var(--blue);transform:rotate(-3deg);font-family:var(--font-mono);line-height:1;white-space:nowrap;flex:none}
.stamp-k{font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.stamp-v{font-size:13px;font-weight:500}
.stamp--sm{padding:5px 8px 6px}.stamp--sm .stamp-v{font-size:12px}
.stamp--lg{padding:10px 14px 11px;border-width:2.5px}.stamp--lg .stamp-v{font-size:16px}
.js .stamp[data-press]{opacity:0}
.stamp.is-pressed{animation:press .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes press{0%{opacity:0;transform:scale(1.35) rotate(-10deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-3deg)}}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:100;height:var(--head-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 var(--margin);
  background:rgb(255 255 255/.86);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);view-transition-name:top;transition:box-shadow .25s var(--ease)}
.top.is-scrolled{box-shadow:0 1px 0 var(--hairline)}
.logo{display:inline-flex;white-space:nowrap;align-items:center;gap:10px;font:640 18px/1 var(--font-display);font-stretch:116%;letter-spacing:-.03em;color:inherit;text-decoration:none;justify-self:start;padding:10px 0}
.logo-mark{width:15px;height:15px;border-radius:3px;background:var(--blue);transform:rotate(-8deg);box-shadow:inset 0 0 0 3px var(--blue),inset 0 0 0 5px #fff}
.top-nav{display:flex;gap:30px}
.top-nav a{font:520 15.5px/1 var(--font-text);color:var(--ink-2);text-decoration:none;padding:12px 0;position:relative}
.top-nav a:hover,.top-nav a[aria-current]{color:var(--ink)}
.top-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--blue)}
.top-cta{justify-self:end;height:40px;padding:0 18px;font-size:15px}

/* ======================= HOME ======================= */
.hero{padding:clamp(5.5rem,2rem + 12vh,10rem) var(--margin) clamp(3rem,2rem + 4vh,4.5rem)}
.hero-h{font-size:clamp(3.2rem,.8rem + 8.6vw,10rem);line-height:.86;letter-spacing:-.055em;max-width:13ch}
.hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:clamp(2.5rem,1.5rem + 3vw,4.5rem);align-items:end}
.hero-sub{grid-column:1 / span 6;font-size:clamp(1.125rem,1rem + .35vw,1.375rem);line-height:1.45;color:var(--ink-2);max-width:42ch}
.hero-actions{grid-column:8 / -1;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

.reel{background:var(--blue);color:#fff;padding:clamp(2.5rem,1.5rem + 3vw,4rem) 0 clamp(2.5rem,1.5rem + 3vw,4rem);position:relative}
.reel-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:0 var(--margin) 28px;font-size:17px;color:var(--blue-ink)}
.reel-all{color:#fff;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;white-space:nowrap;padding:8px 0}
.reel-track{overflow:hidden;outline-offset:-4px}
.reel-list{list-style:none;margin:0;padding:0;display:flex;gap:20px;width:max-content;animation:reel 70s linear infinite}
.reel-track:hover .reel-list,.reel-track:focus-within .reel-list,.reel.is-paused .reel-list{animation-play-state:paused}
@keyframes reel{to{transform:translateX(calc(-50% - 10px))}}
.reel-item a{display:block;width:clamp(290px,30vw,520px);color:#fff;text-decoration:none}
.reel-frame{display:block;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgb(255 255 255/.2);aspect-ratio:16/10}
.reel-frame img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 1s var(--ease)}
.reel-item a:hover img{transform:scale(1.03)}
.reel-cap{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:15px;color:var(--blue-ink)}
.reel-cap b{font:620 19px/1.2 var(--font-display);font-stretch:116%;letter-spacing:-.02em;color:#fff}
.reel-pause{position:absolute;right:var(--margin);bottom:12px;background:none;border:0;color:var(--blue-ink);font:600 13px/1 var(--font-text);text-decoration:underline;text-underline-offset:4px;padding:8px 0;cursor:pointer}

.film{background:var(--night);color:#ECECF2;padding:clamp(4rem,2.5rem + 5vw,8rem) 0}
.film-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.film-h{margin:0;font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1;letter-spacing:-.045em;color:#fff}
.film-meta{margin:0;font:400 14px/1.4 var(--font-mono);color:rgb(236 236 242/.62)}
.film-frame{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgb(255 255 255/.14);background:#000;aspect-ratio:16/9}
.film-video{display:block;width:100%;height:100%;background:#000}
.statement{padding:clamp(7rem,4rem + 10vw,14rem) var(--margin) clamp(5rem,3rem + 6vw,9rem)}
.statement-k{font:560 15px/1 var(--font-text);color:var(--ink-2);margin-bottom:28px}
.statement-h{font-size:clamp(2.1rem,1rem + 3.5vw,4.9rem);line-height:1.03;letter-spacing:-.045em;max-width:23ch}

.feat{padding-bottom:clamp(6rem,3rem + 8vw,12rem)}
.feat-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2.5rem,1.5rem + 3vw,4rem) var(--gap)}
.feat-card{display:block;color:inherit;text-decoration:none}
.feat-card--0{grid-column:1 / -1}
.feat-card--1{grid-column:1 / span 7}
.feat-card--2{grid-column:9 / -1;margin-top:clamp(4rem,2rem + 8vw,10rem)}
.feat-frame{display:block;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--hairline)}
.feat-frame img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}
.feat-card--0 .feat-frame img{aspect-ratio:16/8}
.feat-card:hover .feat-frame img{transform:scale(1.02)}
.feat-meta{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.feat-name{font-size:clamp(1.75rem,1.2rem + 1.4vw,2.6rem);line-height:1;letter-spacing:-.04em}
.feat-kind{color:var(--ink-2);font-size:16px}
.feat-meta .stamp{margin-left:auto}
.feat-line{display:block;margin-top:10px;color:var(--ink-2);max-width:40ch}

.how{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-bottom:clamp(6rem,3rem + 8vw,12rem);align-items:start}
.how-left{grid-column:1 / span 5;position:sticky;top:calc(var(--head-h) + 40px)}
.how-left .link{margin-top:28px}
.spine-card{grid-column:7 / -1;margin:0;background:var(--night);color:#ECECF2;border-radius:14px;padding:clamp(1.25rem,.8rem + 1.4vw,2rem)}
.spine-card figcaption{display:flex;justify-content:space-between;font:400 12.5px/1 var(--font-mono);color:rgb(236 236 242/.62);padding-bottom:16px;border-bottom:1px solid rgb(236 236 242/.12);margin-bottom:6px}
.spine-card dl{margin:0}
.spine-card dl>div{padding:16px 0;border-bottom:1px solid rgb(236 236 242/.08)}
.spine-card dt{font:500 11.5px/1 var(--font-mono);letter-spacing:.1em;color:#A9A9FF;margin-bottom:8px}
.spine-card dd{margin:0;font-size:15.5px;line-height:1.5;color:rgb(236 236 242/.88);overflow-wrap:anywhere}

.audit-sec{background:var(--night);color:#fff;padding:clamp(6rem,3rem + 7vw,11rem) 0;--ink-2:rgb(255 255 255/.76)}
.audit-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
.audit-grid>div:first-child{grid-column:1 / span 5}
.term{grid-column:7 / -1;position:relative;background:#000;border-radius:12px;box-shadow:0 0 0 1px rgb(255 255 255/.14);min-height:380px}
.term-bar{display:flex;align-items:center;gap:7px;padding:14px 16px;border-bottom:1px solid rgb(255 255 255/.1);font:400 12.5px/1 var(--font-mono);color:rgb(255 255 255/.62)}
.term-bar i{width:10px;height:10px;border-radius:50%;background:rgb(255 255 255/.18)}.term-bar span{margin-left:10px}
.term-out{margin:0;padding:22px;font:400 13.5px/1.8 var(--font-mono);white-space:pre-wrap;color:rgb(255 255 255/.78);min-height:300px}
.ln-f{color:#FF8371}.ln-w{color:#F4C95D}.ln-p{color:#A6E88A}.ln-s{color:#fff;font-weight:500}
.term-stamp{position:absolute;right:22px;bottom:22px;color:#A9A9FF;border-color:#A9A9FF;opacity:0}
.term-stamp.is-pressed{opacity:1}
.term.is-fail .term-stamp{color:#FF8371;border-color:#FF8371}
.tabs{display:flex;gap:8px;margin-top:34px}
.tabs button{height:44px;padding:0 18px;border-radius:999px;border:0;background:rgb(255 255 255/.1);color:rgb(255 255 255/.82);font:560 15px/1 var(--font-text);cursor:pointer}
.tabs button[aria-selected="true"]{background:#fff;color:var(--night)}

.ev-teaser{padding:clamp(6rem,3rem + 8vw,12rem) var(--margin) clamp(4rem,2rem + 5vw,8rem)}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.num{border-top:1.5px solid var(--ink);padding-top:22px}
.num b{display:block;font:620 clamp(3.4rem,1rem + 5.4vw,7.4rem)/.9 var(--font-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.num small{font-size:.4em;letter-spacing:-.02em;margin-left:2px}
.num span{display:block;margin-top:18px;font-size:16px;line-height:1.45;color:var(--ink-2);max-width:26ch}

.install{padding:clamp(5rem,3rem + 6vw,10rem) var(--margin) clamp(6rem,3rem + 8vw,12rem);border-top:1px solid var(--hairline)}
.install-h{font-size:clamp(3.6rem,1rem + 10vw,12rem);line-height:.84;letter-spacing:-.06em}
.install-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;margin-top:clamp(2rem,1.2rem + 2vw,3.5rem)}
.install-row .sec-p{margin:0;max-width:40ch;font-size:16px}

/* ======================= PAGE HEADS ======================= */
.page-head{padding-top:clamp(5rem,2rem + 10vh,9rem);padding-bottom:clamp(3rem,2rem + 3vw,5rem)}
.page-h{font-size:clamp(5rem,1rem + 15vw,17rem);line-height:.8;letter-spacing:-.065em}
.page-sub{font-size:clamp(1.125rem,1rem + .4vw,1.4rem);line-height:1.45;color:var(--ink-2);max-width:52ch;margin-top:clamp(2rem,1.2rem + 2vw,3rem)}

/* ======================= WORK INDEX ======================= */
.filters{display:flex;gap:8px;margin-top:36px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:999px;border:0;box-shadow:inset 0 0 0 1.5px var(--hairline-2);background:none;color:var(--ink);font:560 15px/1 var(--font-text);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.chip-n{font:500 12.5px/1 var(--font-mono);opacity:.7}
.w-list{list-style:none;margin:0 0 clamp(5rem,3rem + 6vw,10rem);padding:0;border-bottom:1px solid var(--hairline)}
.w-row{border-top:1px solid var(--hairline)}
.w-row[hidden]{display:none}
.w-link{display:grid;grid-template-columns:3.5rem minmax(0,1fr) 12rem 16rem 11rem;align-items:center;gap:var(--gap);padding:clamp(1rem,.6rem + 1vw,1.6rem) var(--margin);color:inherit;text-decoration:none}
.w-no{font:500 13px/1 var(--font-mono);color:var(--ink-2);align-self:start;padding-top:1.1em}
.w-name{font-size:clamp(2.6rem,1rem + 5.4vw,7rem);line-height:.92;letter-spacing:-.055em;transition:transform .7s var(--ease),color .3s var(--ease)}
.w-kind,.w-reg{font-size:15px;color:var(--ink-2)}
.w-reg{display:flex;align-items:center;gap:9px}
.reg-dot{width:10px;height:10px;border-radius:2px;background:var(--acc);transform:rotate(-8deg);flex:none}
.w-thumb{border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--hairline);aspect-ratio:16/10}
.w-img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .9s var(--ease)}
.w-link:hover .w-name{transform:translateX(1vw)}
.w-link:hover .w-img{transform:scale(1.06)}
.w-list:has(.w-link:hover) .w-row:not(:hover) .w-name{color:var(--ink-3)}

/* ======================= CASE ======================= */
.case-head{padding-top:clamp(2.5rem,1.5rem + 4vh,4.5rem)}
.back{display:inline-flex;gap:8px;font:560 15px/1 var(--font-text);color:var(--ink-2);text-decoration:none;padding:12px 0}
.back:hover{color:var(--ink)}
.case-no{margin-top:clamp(2.5rem,1.5rem + 3vw,4rem);font:500 14px/1 var(--font-mono);color:var(--ink-2)}
.case-h{font-size:clamp(4rem,1rem + 11.5vw,13.5rem);line-height:.84;letter-spacing:-.065em;margin-top:18px}
.case-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:clamp(2rem,1.2rem + 2.5vw,3.5rem);align-items:start}
.case-brief{grid-column:1 / span 7;font-size:clamp(1.25rem,1rem + .8vw,1.75rem);line-height:1.35;letter-spacing:-.015em;max-width:34ch}
.case-facts{grid-column:9 / -1;margin:0;border-top:1.5px solid var(--ink)}
.case-facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--hairline);font-size:15.5px}
.case-facts dt{color:var(--ink-2)}.case-facts dd{margin:0;text-align:right;font-weight:560}
.case-hero{margin-top:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.case-frame{display:block;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--hairline)}
.case-frame img{width:100%;height:auto;display:block}
.case-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px}
.case-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-top:clamp(5rem,3rem + 5vw,8rem);align-items:start}
.case-side{grid-column:1 / span 3;position:sticky;top:calc(var(--head-h) + 32px)}
.side-h{font:620 26px/1.05 var(--font-display);font-stretch:116%;letter-spacing:-.03em}
.side-p{margin-top:10px;font-size:15px;color:var(--ink-2);max-width:28ch}
.spine{grid-column:5 / -1;margin:0;border-top:1.5px solid var(--ink)}
.spine>div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:var(--gap);padding:18px 0;border-bottom:1px solid var(--hairline)}
.spine dt{font:500 12px/1.6 var(--font-mono);letter-spacing:.08em;color:var(--blue)}
.spine dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.pal{grid-column:5 / -1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px}
.pal li{display:grid;gap:10px}
.pal-sw{display:block;width:clamp(96px,10vw,150px);aspect-ratio:4/3;border-radius:8px;box-shadow:inset 0 0 0 1px rgb(0 0 0/.08)}
.pal code{font-size:13px;color:var(--ink-2)}
.case-screens{padding-top:clamp(5rem,3rem + 5vw,8rem)}
.screens-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:24px}
.screens-head .side-p{margin:0;font-family:var(--font-mono);font-size:13px}
.strip{list-style:none;margin:0;padding:0 var(--margin) 10px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margin);scrollbar-width:none;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip.is-drag{cursor:grabbing;scroll-snap-type:none}
.strip li{flex:0 0 min(78vw,1040px);scroll-snap-align:start}
.strip img{width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 0 0 1px var(--hairline);pointer-events:none;user-select:none}
.case-mobile .phone{grid-column:5 / span 4;margin:0}
.phone img{width:100%;max-width:340px;height:auto;display:block;border-radius:30px;border:9px solid var(--night)}
.next{display:block;margin-top:clamp(6rem,3rem + 8vw,12rem);padding:clamp(4rem,2rem + 6vw,8rem) var(--margin);background:var(--night);color:#fff;text-decoration:none}
.next-k{display:block;font:560 15px/1 var(--font-text);color:#A9A9FF}
.next-name{display:block;font-size:clamp(4rem,1rem + 11vw,13rem);line-height:.84;letter-spacing:-.065em;margin-top:22px;transition:transform .8s var(--ease)}
.next-kind{display:block;margin-top:22px;color:rgb(255 255 255/.78)}
.next:hover .next-name{transform:translateX(1.4vw);color:#A9A9FF}
.next-name{transition:transform .8s var(--ease),color .3s var(--ease)}

/* ======================= METHOD ======================= */
.steps{list-style:none;margin:0;padding-bottom:clamp(5rem,3rem + 6vw,9rem)}
.step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding:clamp(1.75rem,1.2rem + 1.5vw,2.75rem) 0;border-top:1px solid var(--hairline);align-items:baseline}
.step:last-child{border-bottom:1px solid var(--hairline)}
.step-n{grid-column:1 / span 1;font:500 13px/1 var(--font-mono);color:var(--blue)}
.step-h{grid-column:2 / span 4;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.3rem);line-height:1.05;letter-spacing:-.035em}
.step p{grid-column:7 / -1;color:var(--ink-2);max-width:52ch}
.regs{background:var(--paper-2);padding:clamp(5rem,3rem + 6vw,9rem) 0}
.regs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(2.5rem,1.5rem + 3vw,4rem)}
.reg{margin:0}
.reg-art{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;display:grid;padding:24px;box-shadow:0 0 0 1px var(--hairline)}
.reg-art p{margin:0;max-width:16ch}
.reg--quiet .reg-art{background:#F7F6F2;place-items:center;text-align:center}
.reg--quiet .reg-art p{font:300 15px/1.4 var(--font-display);color:#16150F;letter-spacing:-.005em}
.reg--confident .reg-art{background:#fff;align-content:start}
.reg--confident .reg-art p{font:620 clamp(1.4rem,1rem + 1.2vw,2.2rem)/1 var(--font-display);font-stretch:116%;letter-spacing:-.045em}
.reg-band{position:absolute;left:0;right:0;bottom:0;height:38%;background:var(--blue)}
.reg--loud .reg-art{background:var(--blue);align-content:end;box-shadow:none}
.reg--loud .reg-art p{font:820 clamp(2rem,1.2rem + 2.2vw,3.4rem)/.86 var(--font-display);font-stretch:75%;text-transform:uppercase;color:#fff;letter-spacing:-.02em}
.reg figcaption{margin-top:16px;font-size:15.5px;color:var(--ink-2);max-width:40ch}
.reg figcaption b{display:block;color:var(--ink);font:620 20px/1.2 var(--font-display);font-stretch:116%;margin-bottom:6px}
.dirs{padding-top:clamp(6rem,3rem + 7vw,10rem)}
.dir-table{width:100%;border-collapse:collapse}
.dir-table thead th{font:500 13px/1 var(--font-mono);color:var(--ink-2);text-align:left;padding:0 0 14px;border-bottom:1.5px solid var(--ink)}
.dir-table td,.dir-table tbody th{padding:20px 16px 20px 0;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:baseline}
.dir-table td:first-child{font:500 13px/1 var(--font-mono);color:var(--blue);width:4rem}
.dir-table tbody th{font-size:clamp(1.3rem,1rem + .9vw,1.9rem);letter-spacing:-.03em;width:30%}
.dir-table td{color:var(--ink-2);font-size:15.5px}
.inside{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding:clamp(6rem,3rem + 7vw,10rem) var(--margin) clamp(6rem,3rem + 7vw,10rem);align-items:start}
.inside>div{grid-column:1 / span 5}.inside .cmd{margin-top:30px}
.tree{grid-column:7 / -1;margin:0;font:400 14px/1.85 var(--font-mono);background:var(--paper-2);border-radius:14px;padding:28px 30px;overflow-x:auto;color:var(--ink)}
.tree span{color:var(--ink-2)}

/* ======================= EVIDENCE ======================= */
.nums--big{padding-bottom:clamp(5rem,3rem + 6vw,9rem)}
.clusters{padding-bottom:clamp(5rem,3rem + 6vw,9rem)}
.cl-list{list-style:none;margin:clamp(2rem,1.5rem + 2vw,3rem) 0 0;padding:0;border-bottom:1px solid var(--hairline)}
.cl-list li{display:grid;grid-template-columns:3.5rem minmax(0,4fr) 7rem minmax(0,6fr);gap:var(--gap);padding:20px 0;border-top:1px solid var(--hairline);align-items:baseline}
.cl-n{font:500 13px/1 var(--font-mono);color:var(--blue)}
.cl-name{font-size:clamp(1.25rem,1rem + .8vw,1.75rem);letter-spacing:-.03em;line-height:1.1}
.cl-count{font:500 13.5px/1 var(--font-mono);color:var(--ink-2)}
.cl-find{color:var(--ink-2);font-size:15.5px}
.studios-sec{padding-bottom:clamp(4rem,2rem + 4vw,7rem)}
.studios{list-style:none;margin:clamp(2rem,1.5rem + 2vw,3rem) 0 0;padding:0;border-bottom:1px solid var(--hairline)}
.st-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:var(--gap);align-items:baseline;padding:16px var(--margin);border-top:1px solid var(--hairline);transition:background-color .35s var(--ease),color .35s var(--ease),padding .35s var(--ease)}
.st-row:hover{background:var(--bg);color:var(--fg);padding-block:28px}
.st-row:hover .st-client,.st-row:hover .st-find{color:inherit}
.st-name{font-size:clamp(1.6rem,1rem + 2vw,3rem);line-height:1;letter-spacing:-.045em}
.st-client{font-size:15px;color:var(--ink-2)}
.st-find{font:400 13.5px/1.45 var(--font-mono);color:var(--ink-2)}
.credits{padding-bottom:clamp(5rem,3rem + 5vw,8rem)}
.credits p{max-width:60ch;color:var(--ink-2)}

/* ======================= FOOTER (blue band) ======================= */
.foot{background:var(--blue);color:#fff;padding:clamp(4rem,2rem + 6vw,8rem) var(--margin) 32px;--ink-2:rgb(255 255 255/.82)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;padding-bottom:clamp(3rem,2rem + 3vw,5rem);border-bottom:1px solid rgb(255 255 255/.22)}
.foot-big{font-size:clamp(3rem,1rem + 7vw,8.6rem);line-height:.86;letter-spacing:-.06em}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:var(--gap);padding:36px 0;align-items:start}
.foot .logo{color:#fff}.foot .logo-mark{background:#fff;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--blue)}
.foot-p{margin-top:12px;font-size:15px;color:var(--ink-2);max-width:36ch}
.foot nav{display:grid;gap:4px}
.foot nav a{color:#fff;text-decoration:none;font:560 16px/1 var(--font-text);padding:8px 0;width:fit-content}
.foot nav a:hover{text-decoration:underline;text-underline-offset:4px}
.stamp--self{color:#fff;border-color:#fff}
.foot-fine{font-size:13px;color:var(--ink-2);padding-top:20px;border-top:1px solid rgb(255 255 255/.22)}
.foot-fine{max-width:none}.foot-fine>*{max-width:88ch}

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1100px){
  .w-link{grid-template-columns:3rem minmax(0,1fr) 11rem 9rem}.w-kind{display:none}
  .how-left,.spine-card,.audit-grid>div:first-child,.term,.inside>div,.tree{grid-column:1 / -1;position:static}
  .term{margin-top:32px;position:relative}.tree{margin-top:24px}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .case-side{grid-column:1 / -1;position:static;margin-bottom:12px}.spine,.pal,.case-mobile .phone{grid-column:1 / -1}
  .regs-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 760px){
  :root{--head-h:58px}
  .spine>div{grid-template-columns:1fr;gap:6px}
  .top-nav{gap:16px}.logo{font-size:16.5px}
  .term-out{padding-bottom:84px}
  .top{grid-template-columns:auto 1fr auto}.top-nav{gap:18px;justify-self:end}.top-nav a{font-size:14.5px}.top-cta{display:none}
  .hero-sub,.hero-actions{grid-column:1 / -1;justify-content:flex-start}
  .hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{justify-content:center}
  .cmd{width:100%;font-size:13px;padding-left:16px}.cmd code{flex:1;text-align:left}
  .reel-head{flex-direction:column;gap:12px}
  .feat-card--0,.feat-card--1,.feat-card--2{grid-column:1 / -1;margin-top:0}
  .w-link{grid-template-columns:2rem minmax(0,1fr) 5.5rem;row-gap:10px}.w-reg{grid-column:2 / -1;grid-row:2}.w-thumb{grid-row:1}
  .w-name{font-size:clamp(1.9rem,8.6vw,2.6rem);overflow-wrap:anywhere}
  .case-brief,.case-facts{grid-column:1 / -1}
  .case-cta{flex-direction:column;align-items:flex-start}
  .step-n,.step-h,.step p{grid-column:1 / -1}
  .regs-grid{grid-template-columns:1fr}
  .dir-table thead{display:none}.dir-table tr{display:grid;grid-template-columns:3rem 1fr;padding:16px 0;border-bottom:1px solid var(--hairline)}
  .dir-table td,.dir-table tbody th{border:0;padding:4px 0}.dir-table td:nth-child(3),.dir-table td:nth-child(4){grid-column:2}.dir-table tbody th{width:auto}
  .cl-list li{grid-template-columns:2.5rem 1fr;row-gap:6px}.cl-count,.cl-find{grid-column:2}
  .st-row{grid-template-columns:1fr;gap:6px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .strip li{flex-basis:86vw}
  .nums{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .reel-list{animation:none}.reel-track{overflow-x:auto}
  .stamp.is-pressed{animation:none;opacity:1}
}