/* ================= SPACING SCALE =================
   4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128. Two fluid section rhythms are
   built from adjacent steps so they interpolate between real values rather than
   arbitrary ones. Section padding is symmetric by default: top always equals bottom. */
:root{
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --sec-y:clamp(var(--s-9),11vh,var(--s-10));
  --sec-y-sm:clamp(var(--s-8),8vh,var(--s-9));
  --gap-grid:clamp(var(--s-5),2.4vw,var(--s-6));
  --gap-split:clamp(var(--s-6),4.4vw,var(--s-9));
  --head-gap:clamp(var(--s-6),5vh,var(--s-7));
  --stack:var(--s-5);
}
/* Violet Tek v2 — cinematic dark language. Tokens from the VioletTek system; composition is new. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--ink);color:#fff;font-family:var(--font-body);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;color:inherit}
img{display:block;max-width:100%}
a{color:#fff;text-decoration:none;transition:color .18s ease,opacity .18s ease}
a:hover{color:var(--on-dark)}
::selection{background:var(--crimson);color:#fff}
:focus-visible{outline:2px solid var(--focus-blue);outline-offset:4px;border-radius:2px}
.skip{position:fixed;left:-9999px;top:0;background:var(--text-inverse);color:var(--ink);padding:12px 18px;z-index:999}
.skip:focus{left:16px;top:12px;color:var(--ink)}
/* shell */
.shell{width:min(1560px,100% - 112px);margin:0 auto}
.shell-n{width:min(1180px,100% - 112px);margin:0 auto}
.act{position:relative;padding:var(--sec-y) 0}
.act-t{padding-top:var(--sec-y-sm)}
.light{background:var(--paper);color:var(--ink)}
.stone{background:var(--soft-stone);color:var(--ink)}
.panel{background:var(--near-black)}
/* type */
.d1{font-family:var(--font-display);font-weight:700;font-size:clamp(50px,10.8vw,176px);line-height:.88;letter-spacing:-.052em}
.d2{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,6.1vw,102px);line-height:.95;letter-spacing:-.042em}
.d3{font-family:var(--font-display);font-weight:600;font-size:clamp(27px,3.1vw,50px);line-height:1.08;letter-spacing:-.028em}
.d4{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,1.5vw,25px);line-height:1.25;letter-spacing:-.012em}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);margin:0}
.mono-s{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:0}
.light .mono,.stone .mono{color:var(--muted-slate)}
.p-lg{font-size:clamp(17px,1.3vw,21px);line-height:1.5;color:var(--on-dark);text-wrap:pretty}
.p{font-size:16px;line-height:1.65;color:var(--on-dark);text-wrap:pretty}
.p-s{font-size:14px;line-height:1.6;color:var(--on-dark-muted);text-wrap:pretty}
.light .p-lg,.stone .p-lg{color:var(--slate)}.light .p,.stone .p{color:var(--slate)}.light .p-s,.stone .p-s{color:var(--muted-slate)}
.light a,.stone a{color:var(--ink)}.light a:hover,.stone a:hover{color:var(--slate)}
.measure{max-width:min(56ch,100%)}.measure-s{max-width:min(44ch,100%)}
/* rules */
.hr{height:1px;background:var(--dark-hairline);border:0;margin:0}
.light .hr,.stone .hr{background:var(--hairline)}
.motif{height:3px;border-radius:2px;background:var(--motif-gradient)}
/* header */
.nav{position:fixed;inset:0 0 auto;z-index:80;background:var(--ink);border-bottom:1px solid var(--dark-hairline)}
.nav-in{display:flex;align-items:center;gap:32px;padding:20px 0;transition:padding .35s ease}
.nav.small .nav-in{padding:13px 0}


.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-links a{font-size:13px;letter-spacing:.02em;color:var(--on-dark);white-space:nowrap;flex:none}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--text-inverse)}
.nav-links a.nav-cta{color:var(--text-inverse)}
.nav-links a.nav-cta:hover{color:var(--ink)}
.nav-cta{white-space:nowrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.28);border-radius:30px;padding:11px 20px;color:#fff;transition:background .18s ease,border-color .18s ease,color .18s ease}
.nav-cta:hover{background:var(--text-inverse);color:var(--ink);border-color:var(--text-inverse)}
.menu-btn{all:unset;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;display:none;align-items:center;gap:10px}
/* overlay menu */
/* overflow-y:auto is load-bearing, not cosmetic: the panel is hidden by sliding
   itself up (translateY(-101%)), so anything taller than the panel escapes its
   box and paints over the header at z-index 90 — a stray line of 96px display
   type across the logo. Clipping keeps the closed menu invisible at any link
   count, and lets the open one scroll instead of centring its first and last
   links out of reach. `safe center` keeps the centred look while it fits. */
.ov{position:fixed;inset:0;z-index:90;background:var(--ink);display:flex;flex-direction:column;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;transform:translateY(-101%);transition:transform .72s cubic-bezier(.76,0,.24,1)}
.ov.open{transform:none}
.ov-link{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,7.4vw,96px);line-height:1.02;letter-spacing:-.04em;color:#fff;display:flex;align-items:baseline;gap:20px}
.ov-link .idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--on-dark-muted);transform:translateY(-.6em)}
.ov-link:hover{color:var(--on-dark)}
/* fixed, not absolute: .ov is a scroll container, and its transform makes it the
   containing block for fixed descendants — so this stays pinned to the panel
   instead of scrolling out of reach with a long menu. */
.ov-close{all:unset;cursor:pointer;position:fixed;top:26px;right:56px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
/* blueprint columns */
/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,14vh,150px) 0 clamp(48px,8vh,88px);overflow:hidden}
.hero-meta{display:flex;gap:40px;flex-wrap:wrap;align-items:end}
/* motion primitives */
.mask{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.mask>span{display:block;transform:translateY(135%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.mask.in>span{transform:none}
.fu{opacity:0;transform:translateY(20px);transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
.fu.in{opacity:1;transform:none}
.fl{opacity:0;transition:opacity 1.1s ease}
.fl.in{opacity:1}
.scale-in{clip-path:inset(14% 14% 14% 14% round 20px);transition:clip-path 1.2s cubic-bezier(.16,1,.3,1)}
.scale-in.in{clip-path:inset(0 0 0 0 round 20px)}
html.reveal-off .mask>span{transform:none}
html.reveal-off .fu,html.reveal-off .fl{opacity:1;transform:none}
html.reveal-off .scale-in{clip-path:inset(0 0 0 0 round 20px)}
html[data-motion=system] .mask>span{transform:none}
html[data-motion=system] .fu,html[data-motion=system] .fl{opacity:1;transform:none;transition:none}
html[data-motion=system] .scale-in{clip-path:inset(0 0 0 0 round 20px)}
@media (prefers-reduced-motion:reduce){.mask>span{transform:none!important}.fu,.fl{opacity:1!important;transform:none!important}.scale-in{clip-path:inset(0 0 0 0 round 20px)!important}.mq-track{animation:none!important}}
/* marquee */
.mq{overflow:hidden;border-top:1px solid var(--dark-hairline);border-bottom:1px solid var(--dark-hairline);padding:20px 0}
.mq-track{display:flex;gap:56px;width:max-content;animation:mq 42s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:56px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}
.mq-item b{width:5px;height:5px;border-radius:50%;flex:none}
/* word reveal */
.wr{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.6vw,58px);line-height:1.16;letter-spacing:-.028em}
.wr span{transition:color .5s ease,opacity .5s ease}
/* sticky practice list */
.sticky-col{position:sticky;top:120px;align-self:start}
.pr-panel{border-top:1px solid var(--dark-hairline);padding:var(--sec-y-sm) 0}
.pr-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em}
.pr-index a{display:flex;gap:16px;align-items:baseline;padding:12px 0;color:var(--on-dark-muted);font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em;transition:color .3s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.pr-index a.on{color:#fff;transform:translateX(8px)}
/* pinned reel */
.reel{position:relative}
.reel-vp{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:64px}
.reel-track{display:flex;gap:clamp(24px,3vw,56px);padding:0 max(56px,calc((100vw - 1560px) / 2 + 56px));will-change:transform}
.reel-card{flex:none;width:clamp(280px,42vw,620px)}
.reel-fallback{display:grid;grid-template-columns:repeat(2,1fr);gap:56px}
.reel-bar{position:absolute;left:max(56px,calc((100vw - 1560px) / 2 + 56px));right:max(56px,calc((100vw - 1560px) / 2 + 56px));bottom:28px;height:1px;background:rgba(255,255,255,.14)}
.reel-bar i{display:block;height:1px;background:var(--motif-gradient)}
/* rows */
.row-lg{display:grid;grid-template-columns:88px 1.1fr 1.3fr;gap:var(--gap-grid);padding:var(--s-6) 0;border-top:1px solid var(--dark-hairline);align-items:baseline}
.light .row-lg,.stone .row-lg{border-color:var(--hairline)}
.row-blog{grid-template-columns:1.4fr 1fr 140px;align-items:center}
.row-case{grid-template-columns:56px 1fr 1.2fr}
.row-step{grid-template-columns:64px 1fr}
.row-lg:hover .d3{opacity:.62}
.row-lg .d3{transition:opacity .3s ease}
/* media */
.media{position:relative;overflow:hidden;border-radius:20px;background:var(--near-black)}
.light .media,.stone .media{background:var(--soft-stone)}
.note{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);margin-top:12px}
.note::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--yellow);flex:none}
.light .note,.stone .note{color:var(--muted-slate)}
/* buttons */
.link-u{display:inline-flex;align-items:center;gap:10px;font-size:14px;padding-bottom:4px;border-bottom:1px solid currentColor}
/* accordion */
.acc{border-top:1px solid var(--dark-hairline)}
.light .acc,.stone .acc{border-color:var(--hairline)}
.acc button{all:unset;cursor:pointer;display:flex;width:100%;gap:24px;align-items:baseline;padding:26px 0;font-family:var(--font-display);font-weight:600;font-size:clamp(17px,1.4vw,22px);letter-spacing:-.012em;color:inherit;transition:opacity .18s ease}
.acc button:hover{opacity:.6}
.acc .sg{margin-left:auto;font-family:var(--font-mono);font-size:14px;opacity:.55}
/* form */
.field{display:block;margin-bottom:var(--s-5)}
.field span{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:10px}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--dark-hairline);color:#fff;font-family:var(--font-body);font-size:17px;padding:12px 0;outline:none;transition:border-color .25s ease}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.26)}
.field input:focus,.field textarea:focus{border-color:var(--text-inverse)}
.field textarea{resize:vertical;line-height:1.6}
.field.err input,.field.err textarea{border-color:var(--crimson)}
.chip{all:unset;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border:1px solid rgba(255,255,255,.24);border-radius:30px;color:var(--on-dark);transition:all .18s ease}
.chip:hover{border-color:var(--text-inverse);color:var(--text-inverse)}
.chip.on{background:var(--text-inverse);color:var(--ink);border-color:var(--text-inverse)}
.light .chip,.stone .chip{border-color:var(--hairline);color:var(--slate)}
.light .chip.on,.stone .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* footer */
.ft{padding:var(--sec-y-sm) 0 var(--s-6);border-top:1px solid var(--dark-hairline)}
.ft a{color:var(--on-dark);font-size:14px}.ft a:hover{color:var(--text-inverse)}
/* utils */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-split)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-split)}
.split>*,.split-a>*,.g2>*,.g3>*,.g4>*,.row-lg>*{min-width:0}
.split-a{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gap-split)}
.row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1240px){.nav-links{display:none}.menu-btn{display:flex}.split,.split-a,.g2,.g3,.reel-fallback{grid-template-columns:1fr}.row-lg,.row-blog,.row-case,.row-step{grid-template-columns:1fr;gap:10px}.row-blog .tright{text-align:left!important}}
@media (max-width:640px){.shell,.shell-n{width:calc(100% - 44px)}.ov-close{right:22px}.g4{grid-template-columns:1fr}.reel-card{width:78vw}.reel-track{padding:0 22px}.reel-bar{left:22px;right:22px}}
.tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border:1px solid var(--dark-hairline);border-radius:30px;color:var(--on-dark)}

/* --- section surfaces: one clear identity per act --- */
.s-ink{background:var(--ink)}
.s-panel{background:var(--near-black)}
.s-navy{background:var(--deep-navy)}
.s-green{background:var(--deep-green)}
.s-crimson{background:var(--deep-crimson)}
.s-paper{background:var(--paper);color:var(--ink)}
.s-stone{background:var(--soft-stone);color:var(--ink)}
.s-panel,.s-navy,.s-green,.s-crimson{border-top:1px solid var(--dark-hairline)}
.s-paper,.s-stone{border-top:1px solid var(--hairline)}
/* section head: mono index, rule, title */
.shead{display:flex;align-items:baseline;gap:var(--s-5);padding-bottom:var(--s-5);margin-bottom:var(--head-gap);border-bottom:1px solid var(--dark-hairline)}
.light .shead,.s-paper .shead,.s-stone .shead{border-color:var(--hairline)}
.shead .sh-i{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.s-paper .shead .sh-i,.s-stone .shead .sh-i{color:var(--muted-slate)}
.shead .sh-l{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.shead .sh-r{flex:1;height:1px;background:currentColor;opacity:.18}
.s-navy .p,.s-green .p,.s-crimson .p{color:var(--on-navy)}
.s-navy .mono,.s-green .mono,.s-crimson .mono{color:rgba(255,255,255,.5)}

/* ---- boot sequence ---- */
.boot{position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .5s ease}
.boot-out{transform:translateY(-101%)}
.boot-quick{transition:opacity .38s ease}
.boot-quick.boot-out{transform:none;opacity:0}
.boot-in{display:flex;flex-direction:column;align-items:center;gap:26px}
.boot-mark{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,5vw,58px);letter-spacing:-.035em;color:var(--text-inverse);opacity:0;animation:bootIn .7s cubic-bezier(.16,1,.3,1) .1s forwards}
.boot-mark span{color:var(--on-dark-muted)}
.boot-bars{display:flex;gap:6px}
.boot-bars i{display:block;width:34px;height:2px;background:var(--c);transform:scaleX(0);transform-origin:left;animation:bootBar .55s cubic-bezier(.16,1,.3,1) forwards}
.boot-bars i:nth-child(1){animation-delay:.30s}.boot-bars i:nth-child(2){animation-delay:.40s}
.boot-bars i:nth-child(3){animation-delay:.50s}.boot-bars i:nth-child(4){animation-delay:.60s}
.boot-bars i:nth-child(5){animation-delay:.70s}
.boot-meta{position:absolute;margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);opacity:0;animation:bootIn .6s ease .45s forwards}
.boot-tl{top:28px;left:34px}.boot-br{bottom:28px;right:34px}
.boot-quick .boot-mark,.boot-quick .boot-meta{animation-duration:.3s;animation-delay:0s}
.boot-quick .boot-bars i{animation-duration:.3s;animation-delay:0s}
@keyframes bootIn{to{opacity:1}}
@keyframes bootBar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.boot-mark,.boot-meta{opacity:1;animation:none}.boot-bars i{transform:scaleX(1);animation:none}}
@media (max-width:640px){.boot-tl{left:22px}.boot-br{right:22px}.boot-bars i{width:26px}}

/* ---- image slot: designed empty state ----
   The slot's own dashed ring and caption are dimmed to near-nothing; the frame
   below carries the empty state instead. Chrome clears the moment a photo lands. */
.media image-slot{color:rgba(255,255,255,.22)}
.light .media image-slot,.s-paper .media image-slot,.s-stone .media image-slot{color:rgba(16,16,18,.26)}
.slot-chrome{position:absolute;inset:0;pointer-events:none;z-index:2;transition:opacity .4s ease}
.media:has(image-slot[data-filled]) .slot-chrome{opacity:0}
.slot-chrome .edge{position:absolute;inset:14px;border:1px solid rgba(255,255,255,.1)}
.light .slot-chrome .edge,.s-paper .slot-chrome .edge,.s-stone .slot-chrome .edge{border-color:rgba(16,16,18,.12)}
.slot-chrome .cnr{position:absolute;width:13px;height:13px;border:0 solid var(--c,rgba(255,255,255,.5))}
.slot-chrome .cnr.tl{top:14px;left:14px;border-top-width:2px;border-left-width:2px}
.slot-chrome .cnr.tr{top:14px;right:14px;border-top-width:2px;border-right-width:2px}
.slot-chrome .cnr.bl{bottom:14px;left:14px;border-bottom-width:2px;border-left-width:2px}
.slot-chrome .cnr.br{bottom:14px;right:14px;border-bottom-width:2px;border-right-width:2px}
.slot-chrome .tag-r{position:absolute;top:26px;right:28px;margin:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.light .slot-chrome .tag-r,.s-paper .slot-chrome .tag-r,.s-stone .slot-chrome .tag-r{color:var(--muted-slate)}
.slot-chrome .scan-track{position:absolute;inset:14px;overflow:hidden}
.slot-chrome .scan{position:absolute;left:0;right:0;top:0;height:1px;background:var(--c,rgba(255,255,255,.5));animation:slotScan 5.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes slotScan{0%{top:0;opacity:0}10%{opacity:.55}90%{opacity:.55}100%{top:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){.slot-chrome .scan{display:none}}
html[data-motion=system] .slot-chrome .scan{display:none}

/* ---- image slot hover ----
   Filled slots: the frame opens, the image settles closer, a petal rule draws
   across the base and a mono cue slides up. Empty slots: the chrome brightens
   and the corners step outward, so the drop target announces itself. */
.media{transition:border-radius .5s cubic-bezier(.16,1,.3,1)}
.media image-slot{transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease}
a:hover .media image-slot[data-filled],.media:hover image-slot[data-filled]{transform:scale(1.035)}
.slot-veil{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .45s ease}
.media:has(image-slot[data-filled]) .slot-veil{opacity:1}
.slot-veil .frame-in{position:absolute;inset:0;border:1px solid rgba(255,255,255,0);transition:inset .55s cubic-bezier(.16,1,.3,1),border-color .45s ease}
a:hover .slot-veil .frame-in,.media:hover .slot-veil .frame-in{inset:14px;border-color:rgba(255,255,255,.34)}
.slot-veil .rule{position:absolute;left:14px;right:14px;bottom:14px;height:2px;background:var(--c,var(--text-inverse));transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
a:hover .slot-veil .rule,.media:hover .slot-veil .rule{transform:scaleX(1)}
.slot-veil .cue{position:absolute;left:26px;bottom:26px;margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-inverse);opacity:0;transform:translateY(10px);transition:opacity .45s ease .08s,transform .55s cubic-bezier(.16,1,.3,1) .08s}
a:hover .slot-veil .cue,.media:hover .slot-veil .cue{opacity:1;transform:none}
.slot-veil .shade{position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .45s ease}
a:hover .slot-veil .shade,.media:hover .slot-veil .shade{opacity:.34}
/* empty state responds too */
.slot-chrome .cnr,.slot-chrome .edge{transition:inset .5s cubic-bezier(.16,1,.3,1),top .5s cubic-bezier(.16,1,.3,1),right .5s cubic-bezier(.16,1,.3,1),bottom .5s cubic-bezier(.16,1,.3,1),left .5s cubic-bezier(.16,1,.3,1),border-color .4s ease,opacity .4s ease}
a:hover .slot-chrome .edge,.media:hover .slot-chrome .edge{inset:8px;border-color:rgba(255,255,255,.22)}
a:hover .slot-chrome .cnr.tl,.media:hover .slot-chrome .cnr.tl{top:8px;left:8px}
a:hover .slot-chrome .cnr.tr,.media:hover .slot-chrome .cnr.tr{top:8px;right:8px}
a:hover .slot-chrome .cnr.bl,.media:hover .slot-chrome .cnr.bl{bottom:8px;left:8px}
a:hover .slot-chrome .cnr.br,.media:hover .slot-chrome .cnr.br{bottom:8px;right:8px}
a:hover .slot-chrome .tag-r,.media:hover .slot-chrome .tag-r{opacity:1}
@media (prefers-reduced-motion:reduce){
  .media image-slot,.slot-veil .frame-in,.slot-veil .rule,.slot-veil .cue,.slot-veil .shade,.slot-chrome .cnr,.slot-chrome .edge{transition:none}
  a:hover .media image-slot[data-filled],.media:hover image-slot[data-filled]{transform:none}
}
html[data-motion=system] .media image-slot[data-filled]{transform:none!important}

/* ---- signature act: the mark assembles ---- */
.mark-act{position:relative;height:420vh}
.mark-vp{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.mark-act[style*="height: auto"] .mark-vp{position:static;height:auto;padding:clamp(72px,10vh,140px) 0}
.mark-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,4vw,72px);align-items:center}
.mark-list{display:flex;flex-direction:column;gap:2px}
.mark-item{display:flex;align-items:baseline;gap:16px;padding:11px 0;color:rgba(255,255,255,.24);border-top:1px solid var(--dark-hairline);transition:color .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.mark-item.on{color:var(--text-inverse);transform:translateX(8px)}
.mark-item:hover{color:var(--c)}
.mark-i{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:inherit;opacity:.7}
.mark-n{font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.35vw,21px);letter-spacing:-.012em}
.mark-item.on .mark-i{color:var(--c);opacity:1}
.mark-stage{display:flex;align-items:center;justify-content:center}
.mark-svg{width:clamp(210px,26vw,430px);height:auto;overflow:visible}
.mark-svg path{opacity:0;transform:scale(.35) rotate(-16deg);transform-origin:50px 48px;transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.mark-svg path.on{opacity:1;transform:none}
.mark-say{justify-self:end;max-width:30ch}
.mark-h{margin-top:14px;font-size:clamp(21px,2.3vw,34px)}
@media (prefers-reduced-motion:reduce){.mark-act{height:auto}.mark-vp{position:static;height:auto;padding:72px 0}.mark-svg path{opacity:1;transform:none}}
html[data-motion=system] .mark-act{height:auto}
html[data-motion=system] .mark-vp{position:static;height:auto;padding:72px 0}
html[data-motion=system] .mark-svg path{opacity:1;transform:none}
@media (max-width:900px){.mark-act{height:auto}.mark-vp{position:static;height:auto;padding:64px 0}
  .mark-grid{grid-template-columns:1fr;gap:36px}.mark-say{justify-self:start}
  .mark-svg{width:min(260px,62vw)}.mark-svg path{opacity:1;transform:none}
  .mark-item,.mark-item.on{color:var(--text-inverse);transform:none}}

/* ---- focus states ---- */
:focus-visible{outline:2px solid var(--focus-blue);outline-offset:3px;border-radius:3px}
a:focus-visible,button:focus-visible,.chip:focus-visible,.nav-cta:focus-visible{outline:2px solid var(--focus-blue);outline-offset:4px}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus-blue);outline-offset:2px;border-color:var(--focus-blue)}
image-slot:focus-visible{outline:2px solid var(--focus-blue);outline-offset:4px}

/* ---- 404 ---- */
.nf{min-height:100svh;display:flex;align-items:center}
.nf-code{font-family:var(--font-display);font-weight:700;font-size:clamp(88px,22vw,300px);line-height:.82;letter-spacing:-.06em;color:var(--text-inverse)}
.nf-links{display:flex;flex-wrap:wrap;gap:0 40px}
.nf-links a{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-top:1px solid var(--dark-hairline);min-width:200px;flex:1}

/* ---- articles ---- */
.art-title{font-size:clamp(30px,4.6vw,68px);line-height:1.02}
.art-meta{display:flex;flex-wrap:wrap;gap:24px;margin-top:26px;padding-top:18px;border-top:1px solid var(--dark-hairline)}
.art-body{padding:clamp(48px,7vh,96px) 0 clamp(40px,6vh,80px)}
.art-grid{display:grid;grid-template-columns:210px 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.art-toc{position:sticky;top:104px}
.art-toc nav{display:flex;flex-direction:column}
.art-toc a{display:flex;gap:12px;align-items:baseline;padding:9px 0;font-size:13px;line-height:1.35;color:var(--on-dark-muted);border-top:1px solid var(--dark-hairline);transition:color .3s ease}
.art-toc a .mono{font-size:10px;opacity:.65}
.art-toc a:hover{color:var(--text-inverse)}
.art-toc a.on{color:var(--text-inverse)}
.art-toc a.on .mono{color:var(--c);opacity:1}
.art-lead{max-width:44ch;color:var(--text-inverse);padding-bottom:clamp(24px,4vh,44px);border-bottom:1px solid var(--dark-hairline)}
.art-sec{padding:clamp(30px,5vh,56px) 0;border-bottom:1px solid var(--dark-hairline)}
.art-h2{font-size:clamp(21px,2.4vw,34px);margin-bottom:18px;scroll-margin-top:110px}
.art-h3{margin:30px 0 12px;color:var(--text-inverse)}
.art-p{max-width:62ch;margin-bottom:16px}
.art-list{margin:4px 0 18px;padding:0 0 0 4px;list-style:none;max-width:62ch;display:flex;flex-direction:column;gap:12px}
.art-list li{position:relative;padding-left:26px}
.art-list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--on-dark-muted)}
.art-ol{counter-reset:n}
.art-ol li{counter-increment:n}
.art-ol li::before{content:counter(n,decimal-leading-zero);top:0;width:auto;height:auto;background:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--on-dark-muted)}
.art-note{margin:22px 0;padding:20px 22px;background:var(--ink);border-left:2px solid var(--yellow);border-radius:0 8px 8px 0;max-width:62ch}
.art-note .p{margin:0}
.art-quote{margin:28px 0;padding-left:22px;border-left:2px solid var(--text-inverse);font-size:clamp(18px,1.9vw,26px);line-height:1.3;color:var(--text-inverse);max-width:40ch}
.art-take{display:flex;flex-direction:column}
.art-take .p{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--dark-hairline);max-width:60ch}
.art-take .mono{flex:none;padding-top:3px}
.art-next{display:block;padding:24px 0;border-top:1px solid var(--dark-hairline);color:inherit;transition:opacity .25s ease}
.art-next:hover{opacity:.62;color:inherit}
@media (max-width:900px){.art-grid{grid-template-columns:1fr;gap:32px}.art-toc{position:static}.art-toc nav{max-height:none}}

.art-row{display:grid;grid-template-columns:1.25fr 1fr 150px;gap:var(--gap-grid);align-items:baseline;padding:var(--s-6) 0;border-top:1px solid var(--dark-hairline);color:inherit;transition:opacity .25s ease}
.art-row:hover{opacity:.62;color:inherit}
.art-row-c{text-align:right;display:flex;flex-direction:column;gap:8px}
@media (max-width:900px){.art-row{grid-template-columns:1fr;gap:12px}.art-row-c{text-align:left;flex-direction:row;gap:20px}}
.svc-rel{display:block;padding:16px 0;border-top:1px solid var(--dark-hairline);color:inherit;transition:opacity .25s ease}
.svc-rel:hover{opacity:.62;color:inherit}

/* ---- hero background plate ---- */
.hero.has-bg{position:relative;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:saturate(.85) contrast(1.05) brightness(.95)}
/* layered scrim: heavy at the base for the headline, light at the top for the header,
   and a left-weighted wash so the lead paragraph keeps its contrast */
.hero-scrim{pointer-events:none;position:absolute;inset:0;background:
  linear-gradient(to top,var(--ink) 0%,rgba(16,16,18,.8) 20%,rgba(16,16,18,.4) 52%,rgba(16,16,18,.22) 80%,rgba(16,16,18,.5) 100%),
  linear-gradient(to right,rgba(16,16,18,.76) 0%,rgba(16,16,18,.4) 44%,rgba(16,16,18,.06) 80%)}
.hero.has-bg .mono,.hero.has-bg .p-lg{text-shadow:0 1px 24px rgba(16,16,18,.55)}
@media (max-width:640px){.hero-bg img{object-position:56% 42%}
  .hero-scrim{background:linear-gradient(to top,var(--ink) 0%,rgba(16,16,18,.95) 34%,rgba(16,16,18,.78) 66%,rgba(16,16,18,.8) 100%)}}

/* Interior page heroes are much shorter than the homepage's full-viewport act,
   so the scrim needs tighter stops — otherwise the base gradient never resolves
   and the photograph reads as a grey wash behind the type. */
.page-hero.has-bg{position:relative;isolation:isolate}
.page-hero .hero-bg img{object-position:50% 46%;filter:saturate(.82) contrast(1.06) brightness(.92)}
.page-hero .hero-scrim{background:
  linear-gradient(to top,var(--ink) 0%,rgba(16,16,18,.72) 22%,rgba(16,16,18,.34) 55%,rgba(16,16,18,.2) 82%,rgba(16,16,18,.55) 100%),
  linear-gradient(to right,rgba(16,16,18,.8) 0%,rgba(16,16,18,.46) 40%,rgba(16,16,18,.04) 78%)}
.page-hero .mono,.page-hero .p-lg{text-shadow:0 1px 22px rgba(16,16,18,.6)}
@media (max-width:640px){.page-hero .hero-scrim{background:linear-gradient(to top,var(--ink) 0%,rgba(16,16,18,.96) 40%,rgba(16,16,18,.84) 72%,rgba(16,16,18,.86) 100%)}}

/* ---- QA pass: touch targets, focus, motion ---- */
@media (pointer:coarse){
  .nav-links a,.ov-link,.link-u,.art-row,.svc-rel{min-height:44px;display:inline-flex;align-items:center}
  .art-row,.svc-rel{display:grid}
  .acc button{min-height:48px}
  .rail{display:none}
}
/* focus must be visible on dark and light surfaces alike */
.light :focus-visible,.s-paper :focus-visible,.s-stone :focus-visible{outline-color:var(--ink)}
/* the hero plate is decorative: never announce it, never let it shift layout */
.hero-bg img{display:block}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .hero-bg img,.media image-slot{transform:none!important}
  *{scroll-behavior:auto!important}
}
/* print: the site is dark-on-dark, which wastes ink and reads badly */
@media print{
  .nav,.ov,.rail,.hero-bg,.slot-chrome,.slot-veil,.mq{display:none!important}
  body,.s-ink,.s-panel,.s-navy,.s-green,.s-crimson{background:#fff!important;color:#101012!important}
  .d1,.d2,.d3,.d4,h1,h2,h3{color:#101012!important}
  .p,.p-lg,.p-s,.mono{color:#3a3a42!important}
  a{color:#101012!important;text-decoration:underline}
  .act{padding:24px 0!important}
}

/* ---- 320px floor ---- */
@media (max-width:400px){
  .shell,.shell-n{width:calc(100% - 32px)}
  .d1{font-size:clamp(38px,11vw,50px);letter-spacing:-.03em}
  .d2{font-size:clamp(28px,8.4vw,38px);letter-spacing:-.025em}
  .d3{font-size:clamp(21px,6vw,27px)}
  .g4{grid-template-columns:1fr}
  .reel-card{width:84vw}
  .mono{font-size:11px;letter-spacing:.1em}
  .btn,.nav-cta{white-space:normal;text-align:center}
}
/* ultrawide: stop the measure running away past 1560 */
@media (min-width:2200px){
  .shell{width:min(1720px,100% - 160px)}
  .hero .d1{font-size:190px}
}

/* ---- back to top ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.to-top{position:fixed;left:24px;bottom:24px;z-index:75;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--text-inverse);color:var(--ink);border:1px solid var(--text-inverse);border-radius:var(--r-pill,999px);
  padding:12px 18px;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1),background .18s ease,color .18s ease,border-color .18s ease}
.to-top.in{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--on-dark);border-color:var(--on-dark)}
.to-top:active{background:var(--muted-slate);color:var(--text-inverse);border-color:var(--muted-slate)}
.to-top:focus-visible{outline:2px solid var(--focus-blue);outline-offset:4px}
.tt-arrow{font-size:13px;line-height:1}
@media (max-width:640px){.to-top{left:16px;bottom:16px;padding:11px 14px}.tt-label{display:none}}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s ease}}

/* ---- Violet AI ---- */
.ai-fab{position:fixed;right:24px;bottom:24px;z-index:76;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--text-inverse);color:var(--ink);border:1px solid var(--text-inverse);border-radius:var(--r-pill,999px);
  padding:13px 20px;cursor:pointer;transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1),background .18s ease}
.ai-fab:hover{background:var(--on-dark)}
.ai-fab:focus-visible{outline:2px solid var(--focus-blue);outline-offset:4px}
.ai-fab.hide{opacity:0;transform:translateY(8px) scale(.96);pointer-events:none}
.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.ai-panel{position:fixed;right:24px;bottom:24px;z-index:77;width:min(400px,calc(100vw - 32px));
  max-height:min(640px,calc(100vh - 48px));display:flex;flex-direction:column;
  background:var(--ink);border:1px solid var(--dark-hairline);border-radius:var(--r-lg,22px);overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.985);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.ai-panel.open{opacity:1;transform:none;pointer-events:auto}
.ai-head{display:flex;align-items:flex-start;gap:16px;padding:20px 20px 16px;border-bottom:1px solid var(--dark-hairline);flex:none}
.ai-sub{font-family:var(--font-body);font-size:12px;line-height:1.45;color:var(--on-dark-muted);margin:6px 0 0}
.ai-x{all:unset;cursor:pointer;margin-left:auto;color:var(--on-dark-muted);font-size:13px;padding:4px 6px;transition:color .18s ease}
.ai-x:hover{color:var(--text-inverse)}
.ai-x:focus-visible{outline:2px solid var(--focus-blue);outline-offset:2px}
.ai-log{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.ai-msg{font-size:14px;line-height:1.6;border-radius:14px;padding:13px 15px;max-width:88%}
.ai-msg p{margin:0}
.ai-from{background:var(--near-black);color:var(--on-dark);align-self:flex-start;border:1px solid var(--dark-hairline)}
.ai-mine{background:var(--text-inverse);color:var(--ink);align-self:flex-end}
.ai-starters{display:flex;flex-wrap:wrap;gap:8px}
.ai-chip{all:unset;cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--dark-hairline);border-radius:30px;padding:9px 13px;color:var(--on-dark);transition:all .18s ease}
.ai-chip:hover{border-color:var(--text-inverse);color:var(--text-inverse)}
.ai-chip:focus-visible{outline:2px solid var(--focus-blue);outline-offset:2px}
.ai-typing{display:flex;gap:5px;align-items:center;padding:15px}
.ai-typing i{width:5px;height:5px;border-radius:50%;background:var(--on-dark-muted);animation:aiPulse 1.2s infinite ease-in-out}
.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}
@keyframes aiPulse{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ai-err{font-size:13px;line-height:1.5;color:var(--crimson);margin:0}
.ai-form{display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--dark-hairline);flex:none}
.ai-form input{flex:1;min-width:0;background:transparent;border:1px solid var(--dark-hairline);border-radius:30px;
  color:var(--text-inverse);font-family:var(--font-body);font-size:14px;padding:11px 16px;outline:none;transition:border-color .2s ease}
.ai-form input::placeholder{color:rgba(255,255,255,.3)}
.ai-form input:focus{border-color:var(--text-inverse)}
.ai-form input:focus-visible{outline:2px solid var(--focus-blue);outline-offset:2px}
.ai-form button{all:unset;cursor:pointer;flex:none;width:42px;height:42px;border-radius:50%;background:var(--text-inverse);color:var(--ink);
  display:grid;place-items:center;font-size:15px;transition:background .18s ease,opacity .18s ease}
.ai-form button:hover{background:var(--on-dark)}
.ai-form button:disabled{opacity:.35;cursor:not-allowed}
.ai-form button:focus-visible{outline:2px solid var(--focus-blue);outline-offset:3px}
.ai-privacy{font-family:var(--font-body);font-size:11px;line-height:1.5;color:var(--on-dark-muted);margin:0;padding:0 16px 16px;flex:none}
.ai-privacy a{color:var(--on-dark);text-decoration:underline}
@media (max-width:640px){
  .ai-fab{right:16px;bottom:16px;padding:12px 16px}
  .ai-panel{right:8px;left:8px;bottom:8px;width:auto;max-height:calc(100vh - 16px);border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .ai-panel,.ai-fab{transition:opacity .2s ease}
  .ai-typing i{animation:none;opacity:.5}
  .ai-log{scroll-behavior:auto}
}
@media print{.to-top,.ai-fab,.ai-panel{display:none!important}}
.note-live{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);margin-top:12px}
.note-live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}
.note-live a{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.note-live a:hover{color:var(--text-inverse)}
.light .note-live,.s-paper .note-live,.s-stone .note-live{color:var(--muted-slate)}
.live-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--dark-hairline);border-radius:30px;padding:11px 18px;color:var(--on-dark);white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.live-btn:hover{background:var(--text-inverse);color:var(--ink);border-color:var(--text-inverse)}
.live-btn:focus-visible{outline:2px solid var(--focus-blue);outline-offset:3px}
.light .live-btn,.s-paper .live-btn,.s-stone .live-btn{border-color:var(--hairline);color:var(--slate)}
.light .live-btn:hover,.s-paper .live-btn:hover,.s-stone .live-btn:hover{background:var(--ink);color:var(--text-inverse);border-color:var(--ink)}

/* ---- products marketplace ---- */
.pbadge{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;border-radius:30px;padding:5px 11px;white-space:nowrap;flex:none}
.pbadge-soon{border-color:var(--dark-hairline);color:var(--on-dark-muted)}
.pcard-top{display:flex;align-items:center;gap:14px;justify-content:space-between}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.pcard{position:relative;padding:var(--s-5) 0 0;border-top:1px solid var(--dark-hairline);color:inherit;display:flex;flex-direction:column}
.pcard-rule{position:absolute;top:-1px;left:0;width:44px;height:2px}
.pcard-acts{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-top:auto;padding-top:var(--s-5)}
a.pcard{transition:opacity .25s ease}a.pcard:hover{opacity:.66;color:inherit}
.ccard{position:relative;display:block;padding:var(--s-5) 0 0;border-top:1px solid var(--dark-hairline);color:inherit;transition:opacity .25s ease}
.ccard:hover{opacity:.66;color:inherit}
.ccard-rule{position:absolute;top:-1px;left:0;width:44px;height:2px}
.ecard{display:block;padding:var(--s-5) 0 0;border-top:1px solid rgba(255,255,255,.24);color:inherit;transition:opacity .25s ease}
.ecard:hover{opacity:.7;color:inherit}
.psearch{position:relative;display:flex;align-items:center}
.psearch input{width:100%;background:transparent;border:1px solid var(--dark-hairline);border-radius:var(--r-pill,999px);color:var(--text-inverse);font-family:var(--font-body);font-size:clamp(15px,1.3vw,18px);padding:16px 52px 16px 24px;outline:none;transition:border-color .2s ease}
.psearch input::placeholder{color:rgba(255,255,255,.3)}
.psearch input:focus{border-color:var(--text-inverse)}
.psearch-x{all:unset;cursor:pointer;position:absolute;right:20px;color:var(--on-dark-muted);font-size:13px;padding:6px}
.psearch-x:hover{color:var(--text-inverse)}
.prow{display:grid;grid-template-columns:1.1fr 1.1fr .9fr 90px;gap:var(--gap-grid);align-items:center;padding:var(--s-5) 0;border-top:1px solid var(--dark-hairline);color:inherit;transition:opacity .25s ease}
.prow:hover{opacity:.66;color:inherit}
.prow-c{display:flex;gap:7px;flex-wrap:wrap}
.prow-d{text-align:right}
/* ecosystem chain */
.eco{display:flex;flex-direction:column;gap:0;max-width:760px}
.eco-step{position:relative;display:grid;grid-template-columns:52px 44px 1fr;gap:var(--s-5);align-items:start;padding:var(--s-5) 0;border-top:1px solid var(--dark-hairline)}
.eco-num{padding-top:3px}
.eco-bar{height:2px;margin-top:11px}
.eco-arrow{position:absolute;left:14px;bottom:-11px;font-size:13px;color:var(--on-dark-muted);line-height:1}
@media (max-width:1100px){.pgrid,.cgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.pgrid,.cgrid{grid-template-columns:1fr;gap:34px}
  .prow{grid-template-columns:1fr;gap:12px}.prow-d{text-align:left}}
@media (max-width:400px){.eco-step{grid-template-columns:40px 1fr}.eco-bar{display:none}}
.ft .g3{grid-template-columns:repeat(3,1fr)}
@media (min-width:1100px){.ft .split-a{grid-template-columns:.7fr 1.3fr}}

/* ---- enquiry flow ---- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.crumb{display:inline-flex;gap:8px;align-items:center;color:var(--on-dark-muted)}
.crumb a{color:var(--on-dark-muted)}
.crumb a:hover{color:var(--text-inverse)}
.crumb [aria-current]{color:var(--text-inverse)}
.crumb-sep{opacity:.4}
.sumcard{position:relative;border:1px solid var(--dark-hairline);border-radius:var(--r-lg,22px);padding:var(--s-6);background:var(--ink)}
.sumcard-rule{position:absolute;top:-1px;left:var(--s-6);width:44px;height:2px}
.actionset{border:0;padding:0;margin:0}
.actionset legend{margin-bottom:14px}
.fieldgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--gap-grid)}
.metabox{margin-top:28px;border:1px solid var(--dark-hairline);border-radius:14px;padding:18px 20px}
.metabox summary{cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}
.metabox summary:hover{color:var(--text-inverse)}
.metabox[open] summary{margin-bottom:16px}
.metarow{display:flex;justify-content:space-between;gap:20px;padding:7px 0;border-top:1px solid var(--dark-hairline);color:var(--on-dark-muted);word-break:break-all}
.metarow span:first-child{flex:none;color:var(--on-dark)}
/* cart */
.cartrow{display:grid;grid-template-columns:1fr auto auto;gap:var(--gap-grid);align-items:center;padding:var(--s-5) 0;border-top:1px solid var(--dark-hairline)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--dark-hairline);border-radius:30px;overflow:hidden;flex:none}
.qty button{all:unset;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;color:var(--on-dark);font-size:15px;transition:background .18s ease,color .18s ease}
.qty button:hover{background:var(--text-inverse);color:var(--ink)}
.qty button:focus-visible{outline:2px solid var(--focus-blue);outline-offset:-2px}
.qty input{width:44px;background:transparent;border:0;border-left:1px solid var(--dark-hairline);border-right:1px solid var(--dark-hairline);color:var(--text-inverse);font-family:var(--font-mono);font-size:13px;text-align:center;padding:11px 0;outline:none}
.cartrm{all:unset;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);transition:color .18s ease}
.cartrm:hover{color:var(--crimson)}
.cartrm:focus-visible{outline:2px solid var(--focus-blue);outline-offset:3px}
@media (max-width:900px){.fieldgrid{grid-template-columns:1fr}.cartrow{grid-template-columns:1fr;gap:14px;justify-items:start}}

/* ---- trusted by ---- */
.trust{padding:var(--s-7) 0}
.trust-h{margin-bottom:var(--s-6)}
.trust-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap-grid);align-items:start}
.trust-item{display:block;padding-top:var(--s-4);border-top:1px solid var(--dark-hairline);color:inherit;transition:border-color .25s ease}
.trust-item:hover{border-color:var(--text-inverse);color:inherit}
.trust-name{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.35vw,20px);letter-spacing:-.012em;line-height:1.2;color:var(--on-dark-muted);transition:color .25s ease}
.trust-item:hover .trust-name{color:var(--text-inverse)}
.trust-kind{display:block;margin-top:8px;font-size:10px}
@media (max-width:900px){.trust-row{grid-template-columns:repeat(2,1fr);gap:22px}}
@media (max-width:400px){.trust-row{grid-template-columns:1fr}}

/* ================= RESPONSIVE PASS =================
   Measured: hero ran 1.04–1.06x viewport height at 320–768, so the lead and
   CTA sat below the fold on every phone. The cause was 100svh min-height PLUS
   a 14vh top pad. Below 900px the hero is content-height with tighter padding
   and capped at the viewport, so the first screen resolves without scrolling. */
@media (max-width:900px){
  .hero{min-height:auto;max-height:none;padding:clamp(78px,11vh,104px) 0 clamp(30px,5vh,48px);justify-content:flex-start}
  .hero .split{margin-top:clamp(22px,4vh,40px)!important;gap:26px}
  .hero .row{gap:12px}
  .hero .btn,.hero .live-btn{flex:1 1 auto;justify-content:center;min-width:0}
  .act{padding:clamp(60px,9vh,88px) 0}
  .act-t{padding-top:clamp(48px,7vh,76px)}
  .page-hero{padding-bottom:clamp(28px,5vh,48px)!important}
}
/* Tablet band: 10.8vw put the hero headline at 83px on a 768 iPad, which
   crowded the measure. Give 641–1024 its own ramp rather than inheriting either
   the phone floor or the desktop curve. */
@media (min-width:641px) and (max-width:1024px){
  .d1{font-size:clamp(46px,7.6vw,74px);letter-spacing:-.04em}
  .d2{font-size:clamp(32px,5.4vw,54px)}
  .d3{font-size:clamp(23px,3.1vw,34px)}
  .shell,.shell-n{width:calc(100% - 72px)}
  .split,.split-a{gap:clamp(28px,4vw,48px)}
  .g4{grid-template-columns:repeat(2,1fr)}
}
/* Landscape phones: a 100svh hero on a 380px-tall viewport is unusable. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:76px 0 32px}
  .hero .d1{font-size:clamp(34px,7vw,52px)}
  .reel-vp{height:auto;position:static;padding:40px 0}
  .reel{height:auto!important}
  .reel-track{transform:none!important;flex-wrap:wrap;justify-content:center}
  .reel-card{width:min(320px,44vw)}
}
/* Large desktop: hold the measure rather than letting 1560px of shell stretch
   body copy past a comfortable line. */
@media (min-width:1600px){
  .shell{width:min(1560px,100% - 160px)}
  .p,.p-lg,.p-s{max-width:min(68ch,100%)}
}
@media (min-width:1920px){
  .shell{width:min(1660px,100% - 200px)}
  .d1{font-size:clamp(120px,9vw,182px)}
}
/* Ultrawide: centre the whole composition instead of spanning the panel. */
@media (min-width:2400px){
  .shell{width:1720px}
  .shell-n{width:1180px}
  .act{padding:clamp(120px,10vh,200px) 0}
}



/* Mobile spacing is set for the device rather than scaled down from desktop:
   a shorter section rhythm, but card and field gaps stay generous so stacked
   content never reads as one undifferentiated block. */
@media (max-width:900px){
  :root{--sec-y:clamp(var(--s-8),8vh,var(--s-9));--sec-y-sm:clamp(var(--s-7),6vh,var(--s-8));
        --gap-split:var(--s-6);--gap-grid:var(--s-6);--head-gap:var(--s-6)}
  .g2,.g3,.g4,.pgrid,.cgrid,.trust-row{gap:var(--s-6)}
  .row-lg,.art-row,.prow,.cartrow{padding:var(--s-5) 0}
}
@media (max-width:400px){
  :root{--sec-y:var(--s-8);--sec-y-sm:var(--s-7);--gap-grid:var(--s-5);--gap-split:var(--s-5)}
}

/* Sticky side columns are only meaningful in a two-column layout. Once
   .split-a collapses, a pinned column overlays the content beneath it.
   This MUST match the breakpoint where .split/.split-a collapse (1240px) —
   at 900px the two drifted apart and left 901-1240 broken. */
@media (max-width:1240px){
  .sticky-col{position:static!important;top:auto!important}
  .pr-index{margin-bottom:var(--s-6)}
  .pr-index a{padding:var(--s-3) 0}
  .pr-index a.on{transform:none}
  .pr-panel:first-of-type{border-top:0;padding-top:0}
}

/* ---- social ---- */
.ft-connect{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--gap-split);margin-top:var(--sec-y-sm);padding-top:var(--s-7);border-top:1px solid var(--dark-hairline)}
.ft-direct{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-5)}
.ft-direct a{font-size:14px}
.ft-follow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.ft-fw{display:flex;flex-direction:column;gap:var(--s-2);padding-top:var(--s-4);border-top:1px solid var(--dark-hairline);color:inherit;transition:border-color .18s ease}
.ft-fw:hover{border-color:var(--text-inverse);color:inherit}
.ft-fw-t{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--on-dark);transition:color .18s ease}
.ft-fw:hover .ft-fw-t{color:var(--text-inverse)}
/* contact page */
.cinfo{display:grid;gap:0}
.cinfo-row{display:grid;grid-template-columns:104px 1fr;gap:var(--s-4);padding:var(--s-4) 0;border-top:1px solid var(--dark-hairline);align-items:baseline}
.cinfo-row a{color:var(--text-inverse);border-bottom:1px solid rgba(255,255,255,.28);transition:border-color .18s ease}
.cinfo-row a:hover{border-color:var(--text-inverse)}
@media (max-width:1240px){.ft-connect{grid-template-columns:1fr;gap:var(--s-7)}}
@media (max-width:900px){.ft-follow{grid-template-columns:1fr;gap:var(--s-5)}}
@media (max-width:400px){.cinfo-row{grid-template-columns:1fr;gap:var(--s-1)}}

/* ---- social icon row ----
   One component, two sizes. Targets are 44px on coarse pointers regardless of
   glyph size, so the row stays thumb-friendly without looking oversized. */
.soc-row{--soc-size:18px;display:flex;align-items:center;gap:var(--s-2);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.soc-ico{--brand:var(--text-inverse);display:grid;place-items:center;width:calc(var(--soc-size) + 22px);height:calc(var(--soc-size) + 22px);
  border:1px solid var(--dark-hairline);border-radius:50%;color:var(--on-dark);font-size:var(--soc-size);
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.soc-ico svg{display:block;width:var(--soc-size);height:var(--soc-size)}
a.soc-ico:hover{color:var(--brand);border-color:var(--brand)}
a.soc-ico:focus-visible{outline:2px solid var(--focus-blue);outline-offset:3px}
.soc-ico.is-pending{color:rgba(255,255,255,.24);border-color:rgba(255,255,255,.1);cursor:default}
.light .soc-ico,.s-paper .soc-ico,.s-stone .soc-ico{border-color:var(--hairline);color:var(--slate)}
.light a.soc-ico:hover{color:var(--brand);border-color:var(--brand)}
.light .soc-ico{--brand:var(--ink)}
@media (pointer:coarse){.soc-ico{width:44px;height:44px}}
@media (max-width:400px){.soc-row{gap:6px}}

/* Announcement bar — rendered only when enabled in the CMS, inside the fixed
   header so the page never needs a layout offset. */
.announce{background:var(--vt-brand-primary,#FA7401);color:#101012}
.announce a{color:inherit;text-decoration:none;display:block}
.announce a:hover .announce-in{text-decoration:underline}
.announce-in{display:block;max-width:var(--shell-max,1440px);margin:0 auto;padding:7px 24px;
  font:500 12px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.02em;text-align:center}