/* steer26 · one stylesheet, one token set. Graphite and warm off-white, with neon kept for motion. */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/chakra-petch-500.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/chakra-petch-600.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/chakra-petch-700.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-var.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-mono-latin-var.woff2) format('woff2')}

:root{
 --bg:#0c0d0f;--bg1:#121416;--bg2:#171a1d;--bg3:#1d2125;
 --ink:#f2efe9;--txt:#c8c5bd;--mute:#8e8c86;
 --cy:#e6e0d2;--mg:#d2557a;--am:#c9a24d;
 --cy-a:rgba(242,239,233,.08);--cy-b:rgba(242,239,233,.28);--mg-a:rgba(210,85,122,.14);
 --rule:rgba(242,239,233,.10);--rule2:rgba(242,239,233,.20);
 --f-d:'Chakra Petch','Arial Narrow',system-ui,sans-serif;
 --f-b:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
 --f-m:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 --wrap:1160px;--pad:32px;--hdr:64px;
 --ease:cubic-bezier(.2,.7,.2,1);
 --cut:12px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--txt);font:400 16px/1.6 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--f-d);color:var(--ink);font-weight:700;margin:0;letter-spacing:-.005em}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--cy);color:var(--bg);padding:10px 14px;font:600 13px var(--f-m)}
.skip:focus{top:12px}
.wrap{max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}

/* grain + CRT vignette (the hero photo sits above both) */
body::before{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;background:url(/assets/fx/grain.png) 0 0/160px 160px;opacity:.06}
body::after{content:"";position:fixed;inset:0;z-index:41;pointer-events:none;background:radial-gradient(ellipse 120% 95% at 50% 45%,transparent 62%,rgba(0,0,0,.42) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;height:var(--hdr);background:rgba(12,13,15,.82);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid var(--rule)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--cy) 30%,var(--mg) 70%,transparent);opacity:.55}
.nav{display:flex;align-items:center;justify-content:space-between;height:100%;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:700 17px/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase}
.brand-mk{display:grid;place-items:center;width:34px;height:34px;font:700 13px/1 var(--f-d);color:var(--bg);background:var(--cy);clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);box-shadow:4px 0 0 var(--mg)}
.links{display:flex;align-items:center;gap:4px}
.links a{position:relative;text-decoration:none;font:500 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--txt);padding:10px 10px}
.links a b{font-weight:500;color:var(--am);margin-right:6px;font-size:10px}
.links a:not(.btn):hover,.links a[aria-current]{color:var(--cy)}
.links a:not(.btn)::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:1px;background:var(--cy);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.links a:not(.btn):hover::after,.links a[aria-current]::after{transform:scaleX(1)}
.links .btn{margin-left:10px}
.menu{display:none;appearance:none;background:none;border:1px solid var(--rule2);width:44px;height:40px;padding:0;cursor:pointer;position:relative}
.menu i{position:absolute;left:12px;right:12px;height:2px;background:var(--cy);transition:transform .3s var(--ease)}
.menu i:first-of-type{top:14px}.menu i:last-of-type{bottom:14px;background:var(--mg)}
.menu[aria-expanded=true] i:first-of-type{transform:translateY(5px) rotate(45deg)}
.menu[aria-expanded=true] i:last-of-type{transform:translateY(-5px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font:600 13px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));transition:transform .2s var(--ease),opacity .2s}
.btn-p{background:var(--cy);color:var(--bg)}
.btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-110%);transition:transform .6s var(--ease)}
.btn-p:hover::after{transform:translateX(110%)}
.btn-p:hover{transform:translate(-2px,-2px)}
.btn-g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule2)}
.btn-g:hover{color:var(--cy);box-shadow:inset 0 0 0 1px var(--cy)}
.btn-sm{min-height:38px;padding:0 16px;font-size:11.5px;--cut:9px}
.links .btn-p{color:var(--bg)}
.lnk{font:500 12px/1.4 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--cy);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.lnk:hover{color:var(--ink)}

/* ---------- HUD primitives ---------- */
.hud{font:500 11px/1.4 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--am)}
.boot{font:500 12px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--am);margin:0 0 18px;display:flex;align-items:center;gap:10px;min-height:14px}
.boot::before{content:"";width:8px;height:8px;background:var(--am);box-shadow:0 0 10px var(--am)}
.boot .cur{display:inline-block;width:8px;height:13px;background:var(--cy);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chip{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 var(--f-m);letter-spacing:.08em;color:var(--ink);padding:9px 12px;border:1px solid var(--rule2);background:rgba(23,26,29,.7)}
.chip::before{content:"";width:6px;height:6px;background:var(--cy)}

/* ---------- section frame ---------- */
.sec{position:relative;padding:88px 0;border-top:1px solid var(--rule)}
.sec-h{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 48px;align-items:end;margin:0 0 40px}
.sec-h h2{font-size:clamp(30px,3.8vw,50px);line-height:1;text-transform:uppercase;letter-spacing:.005em}
.sec-h h2 em{font-style:normal;color:var(--cy)}
.sec-h .lead{margin:0;font-size:16.5px;line-height:1.6;color:var(--txt);max-width:46ch}
.sec-h .boot{grid-column:1/-1;margin:0}
.trace{position:absolute;left:0;right:0;top:-1px;height:44px;pointer-events:none;overflow:visible}
.trace svg{width:100%;height:44px;overflow:visible}
.trace .ln{fill:none;stroke:var(--cy);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.7}
.trace .tk{fill:none;stroke:var(--rule2);stroke-width:1;vector-effect:non-scaling-stroke}
.trace .nd{fill:var(--bg);stroke:var(--cy);stroke-width:1.2;vector-effect:non-scaling-stroke}
.trace .lab{position:absolute;top:12px;font:500 10px/1 var(--f-m);letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.trace .lab.l{left:var(--pad)}.trace .lab.r{right:var(--pad);color:var(--cy)}

/* ---------- rail (desktop data path) ---------- */
.rail{position:fixed;left:22px;top:calc(var(--hdr) + 40px);bottom:40px;width:12px;z-index:30;pointer-events:none;display:none}
.rail::before{content:"";position:absolute;left:5px;top:22px;bottom:22px;width:1px;background:var(--rule2)}
.rail .fill{position:absolute;left:5px;top:22px;bottom:22px;width:1px;background:linear-gradient(var(--cy),var(--mg));transform-origin:top;transform:scaleY(0)}
.rail .end{position:absolute;left:-2px;font:500 9px/1 var(--f-m);letter-spacing:.16em;color:var(--mute);writing-mode:vertical-rl;transform:rotate(180deg)}
.rail .end.t{top:-46px}.rail .end.b{bottom:-46px;color:var(--cy)}
.rail ol{list-style:none;margin:0;padding:0;position:absolute;left:0;top:22px;bottom:22px;display:flex;flex-direction:column;justify-content:space-between}
.rail li{width:11px;height:11px;border:1px solid var(--rule2);background:var(--bg);position:relative}
.rail li::after{content:"";position:absolute;inset:2px;background:var(--cy);opacity:0;transition:opacity .4s}
.rail li.on::after{opacity:1}
@media (min-width:1300px){.rail{display:block}}

/* ---------- hero ---------- */
.hero{position:relative;padding:40px 0 0;overflow:hidden;min-height:calc(100svh - var(--hdr))}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(ellipse 50% 60% at 78% 40%,rgba(210,85,122,.12),transparent 70%),
 radial-gradient(ellipse 40% 50% at 15% 80%,rgba(242,239,233,.08),transparent 70%),
 linear-gradient(rgba(242,239,233,.05) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,rgba(242,239,233,.05) 1px,transparent 1px) 0 0/48px 48px}
.hero-lines{position:absolute;left:-60px;top:20px;width:720px;height:720px;opacity:.5;pointer-events:none}
.hero-lines .c{fill:none;stroke:rgba(242,239,233,.16);stroke-width:1;vector-effect:non-scaling-stroke}
.hero-lines .d{fill:none;stroke:rgba(201,162,77,.22);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.hero-copy{position:relative;z-index:2;padding:20px 0 40px}
.kicker{font:500 13px/1.5 var(--f-m);letter-spacing:.06em;color:var(--cy);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:1px;background:var(--cy)}
.hero h1{font-size:clamp(42px,6.2vw,88px);line-height:.92;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 26px}
.hero h1 .l1{display:block}
.hero h1 .l2{display:block;color:var(--cy);position:relative}
.gl{position:relative;display:inline-block}
.gl::before,.gl::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none;opacity:0}
.gl::before{color:var(--mg);clip-path:inset(0 0 55% 0)}
.gl::after{color:var(--ink);clip-path:inset(60% 0 0 0)}
.lead{font-size:18px;line-height:1.6;color:var(--txt);max-width:54ch;margin:0 0 30px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 30px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}

/* photo: full brightness, no overlay. HUD lives behind it or outside its box */
.hero-fig{position:relative;z-index:45;margin:0;align-self:end;justify-self:end;width:min(100%,560px)}
.hud-bar{display:flex;justify-content:space-between;gap:12px;font:500 10.5px/1.4 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:0 2px 10px}
.hud-bar b{font-weight:500;color:var(--am)}
.hud-bar .ok{color:var(--cy)}
.hud-bar.bot{padding:10px 2px 0}
.frame{position:relative;background:var(--bg1);aspect-ratio:1254/1234;box-shadow:inset 0 0 0 1px rgba(242,239,233,.22)}
.frame::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(242,239,233,.07) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(242,239,233,.07) 1px,transparent 1px) 0 0/32px 32px,radial-gradient(circle at 50% 30%,rgba(210,85,122,.22),transparent 60%)}
.ret{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ret .r{fill:none;stroke:var(--cy);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ret .r2{fill:none;stroke:var(--mg);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.8}
.ret .r3{fill:none;stroke:rgba(201,162,77,.7);stroke-width:1;vector-effect:non-scaling-stroke}
.scan{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;opacity:0}
.scan::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--cy);box-shadow:0 0 18px 3px rgba(242,239,233,.7)}
.me,.me img{position:absolute;inset:0;width:100%;height:100%}
.me img{object-fit:contain;object-position:50% 100%}
.brk{position:absolute;width:26px;height:26px;border:0 solid var(--cy)}
.brk.tl{left:-10px;top:-10px;border-width:2px 0 0 2px}
.brk.tr{right:-10px;top:-10px;border-width:2px 2px 0 0}
.brk.bl{left:-10px;bottom:-10px;border-width:0 0 2px 2px;border-color:var(--mg)}
.brk.br{right:-10px;bottom:-10px;border-width:0 2px 2px 0;border-color:var(--mg)}
.side{position:absolute;top:18%;bottom:18%;width:8px;display:flex;flex-direction:column;justify-content:space-between}
.side.l{left:-22px}.side.r{right:-22px}
.side i{display:block;height:1px;background:var(--rule2)}
.side i:nth-child(3n){background:var(--cy);width:140%}
.hero-fig figcaption{position:absolute;left:-1px;bottom:44px;transform:translateX(-62%);font:700 14px/1.2 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--bg);border:1px solid var(--cy);padding:10px 14px;display:flex;flex-direction:column;gap:4px;z-index:3}
.hero-fig figcaption span{font:500 10px/1 var(--f-m);letter-spacing:.16em;color:var(--am)}

/* job → Xero data path under the hero */
.flow{position:relative;margin:40px auto 0;padding:22px var(--pad) 28px;border-top:1px solid var(--rule)}
.flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
.flow svg{position:absolute;left:calc(var(--pad) + 8.33%);right:calc(var(--pad) + 8.33%);top:30px;width:calc(100% - var(--pad)*2 - 16.66%);height:12px;overflow:visible}
.flow .p{fill:none;stroke:var(--cy);stroke-width:1.2;vector-effect:non-scaling-stroke}
.flow .p2{fill:none;stroke:var(--mg);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke;opacity:.7}
.flow li{text-align:center;position:relative;font:500 10.5px/1.3 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.flow li::before{content:"";display:block;width:14px;height:14px;margin:0 auto 12px;background:var(--bg);border:1px solid var(--cy);transform:rotate(45deg);position:relative;z-index:1}
.flow li b{display:block;font:700 15px/1.2 var(--f-d);letter-spacing:.06em;color:var(--ink);margin:0 0 2px}
.flow .tag{position:absolute;right:var(--pad);top:-9px;background:var(--bg);padding:0 8px;font:500 10px/18px var(--f-m);letter-spacing:.16em;color:var(--am)}

/* ---------- cards (shared) ---------- */
.card{position:relative;background:linear-gradient(180deg,rgba(26,29,33,.92),rgba(16,18,20,.92));border:1px solid var(--rule);padding:26px 24px 24px;transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-3px)}
.edge{position:absolute;inset:-1px;pointer-events:none}
.edge b{position:absolute;background:var(--cy);box-shadow:0 0 10px var(--cy);transition:transform .45s var(--ease)}
.edge b:nth-child(1){left:0;top:0;width:100%;height:1px;transform:scaleX(0);transform-origin:left}
.edge b:nth-child(2){right:0;top:0;width:1px;height:100%;transform:scaleY(0);transform-origin:top;transition-delay:.1s}
.edge b:nth-child(3){right:0;bottom:0;width:100%;height:1px;transform:scaleX(0);transform-origin:right;transition-delay:.2s;background:var(--mg);box-shadow:0 0 10px var(--mg)}
.edge b:nth-child(4){left:0;bottom:0;width:1px;height:100%;transform:scaleY(0);transform-origin:bottom;transition-delay:.3s;background:var(--mg);box-shadow:0 0 10px var(--mg)}
:is(.card,.w22-case,.w22-shot):hover>.edge b,:is(.card,.w22-case,.w22-shot):focus-within>.edge b{transform:none}
:is(.card,.w22-case):hover h3{animation:gl .38s steps(2) 1}
@keyframes gl{0%{transform:translate(0);text-shadow:-2px 0 var(--mg),2px 0 var(--cy)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px);text-shadow:2px 0 var(--mg),-2px 0 var(--cy)}75%{transform:translate(-1px,0)}100%{transform:none;text-shadow:none}}
.card .n{font:500 11px/1 var(--f-m);letter-spacing:.16em;color:var(--am);display:flex;justify-content:space-between;margin:0 0 18px}
.card .n i{font-style:normal;color:var(--mute)}
.card h3{font-size:21px;line-height:1.15;margin:0 0 10px;text-transform:uppercase;letter-spacing:.02em}
.card p{font-size:15px;line-height:1.55;margin:0 0 14px}
.card .tools{font:500 11px/1.6 var(--f-m);letter-spacing:.04em;color:var(--mute);margin:0 0 16px}
.card .ex{font:500 11px/1.5 var(--f-m);color:var(--mg);margin:-6px 0 14px}
.card .lnk{margin-top:auto}

/* services */
.svc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.svc .card{grid-column:span 2;display:flex;flex-direction:column}
.svc .card:nth-child(4),.svc .card:nth-child(5){grid-column:span 3}
.svc .card:first-child{background:linear-gradient(160deg,rgba(242,239,233,.1),rgba(16,18,20,.92) 55%);border-color:var(--cy-b)}
.price{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.8fr));margin:16px 0 0;border:1px solid var(--rule2);background:rgba(16,18,20,.85)}
.price>div{padding:22px 24px;border-left:1px solid var(--rule)}
.price>div:first-child{border-left:0;background:linear-gradient(90deg,rgba(201,162,77,.1),transparent)}
.price .k{font:500 10.5px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--am);margin:0 0 10px}
.price .v{font:700 30px/1 var(--f-d);color:var(--ink);margin:0 0 8px;letter-spacing:.01em}
.price .v small{font:500 11px var(--f-m);letter-spacing:.1em;color:var(--mute);margin-left:6px;text-transform:uppercase}
.price p{font-size:13.5px;line-height:1.5;margin:0;color:var(--txt)}
.pk{margin:12px 0 0;border:1px solid var(--rule)}
.pk>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;font:500 12px/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.pk>summary::-webkit-details-marker{display:none}
.pk>summary::after{content:"+";color:var(--cy);font-size:18px}
.pk[open]>summary::after{content:"−"}
.pk>summary:hover{color:var(--cy)}
.pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.pk-grid article{padding:20px;border-left:1px solid var(--rule)}
.pk-grid article:first-child{border-left:0}
.pk-grid .full{grid-column:1/-1;border-left:0;border-bottom:1px solid var(--rule)}
.pk-grid h3{font-size:17px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px}
.pk-grid .pr{font:700 22px/1 var(--f-d);color:var(--cy);margin:0 0 12px}
.pk-grid .pr small{font:500 10.5px var(--f-m);color:var(--mute);letter-spacing:.12em;text-transform:uppercase;margin-right:6px}
.pk-grid p{font-size:13.5px;line-height:1.55}
.pk-grid .lim{color:var(--mute);font-size:12.5px}
.pk-grid .ex{font:500 11px/1.5 var(--f-m);color:var(--mg);margin:0}
.ticks{list-style:none;margin:0 0 12px;padding:0}
.ticks li{position:relative;padding:6px 0 6px 18px;border-top:1px solid var(--rule);font-size:13.5px;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:1px;background:var(--cy)}

/* monthly */
.care{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.care .card{padding-top:22px}
.care .ico{width:44px;height:44px;margin:0 0 18px}
.care .ico .s{fill:none;stroke:var(--cy);stroke-width:1.3;vector-effect:non-scaling-stroke}
.care .ico .s2{fill:none;stroke:var(--mg);stroke-width:1.3;vector-effect:non-scaling-stroke}
.note-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;margin:18px 0 0;font:500 11.5px/1.5 var(--f-m);letter-spacing:.06em;color:var(--mute)}
.note-line b{color:var(--mg);font-weight:500}

/* work grid */
.wk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wk .card{padding:0;display:flex;flex-direction:column;overflow:hidden}
.wk .th{display:block;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--bg2)}
.wk .th img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .7s var(--ease)}
.wk .card:hover .th img{transform:scale(1.04)}
.wk .bd{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.wk .meta{display:flex;justify-content:space-between;gap:10px;font:500 10.5px/1.4 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.wk .meta b{color:var(--am);font-weight:500}
.wk h3{font-size:18px;line-height:1.2;text-transform:none;letter-spacing:.01em;margin:0 0 8px}
.wk h3 a{text-decoration:none}
.wk h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.wk p{font-size:14px;line-height:1.5;color:var(--txt);margin:0 0 14px}
.wk .foot{margin-top:auto;display:flex;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--rule);font:500 10.5px/1.4 var(--f-m);letter-spacing:.06em;color:var(--mute)}
.wk .foot span:last-child{color:var(--cy)}
.wk .card.new .th{position:relative}
.wk .flag{position:absolute;z-index:2;left:12px;top:12px;font:600 10px/1 var(--f-m);letter-spacing:.14em;color:var(--bg);background:var(--am);padding:6px 8px}
.wk-more{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:18px 0 0;font:500 11.5px/1.5 var(--f-m);letter-spacing:.08em;color:var(--mute)}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:0;right:0;top:21px;height:1px;background:linear-gradient(90deg,var(--cy),var(--mg))}
.steps li{position:relative;padding:0 24px 0 0}
.steps .k{display:grid;place-items:center;width:42px;height:42px;background:var(--bg);border:1px solid var(--cy);font:700 15px/1 var(--f-d);color:var(--cy);margin:0 0 22px;position:relative}
.steps li:last-child .k{border-color:var(--mg);color:var(--mg)}
.steps h3{font-size:20px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px}
.steps p{font-size:15px;line-height:1.55;margin:0;max-width:30ch}
.path-note{margin:40px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 30px;padding:18px 22px;border:1px solid var(--rule2);background:rgba(16,18,20,.8)}
.path-note p{margin:0;font:500 13px/1.5 var(--f-m);letter-spacing:.04em;color:var(--ink)}
.path-note b{color:var(--am);font-weight:500}

/* about */
.about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.about figure{margin:0;position:relative}
.about figure img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 20%;background:var(--bg1)}
.about figure::before,.about figure::after{content:"";position:absolute;width:22px;height:22px;border:0 solid var(--cy)}
.about figure::before{left:-8px;top:-8px;border-width:2px 0 0 2px}
.about figure::after{right:-8px;bottom:30px;border-width:0 2px 2px 0;border-color:var(--mg)}
.about figcaption{font:500 10.5px/1 var(--f-m);letter-spacing:.16em;color:var(--am);padding:12px 0 0}
.about .txt p{font-size:16.5px;line-height:1.65;max-width:62ch}
.about .txt p.big{font:600 clamp(20px,2.1vw,26px)/1.3 var(--f-d);color:var(--ink);letter-spacing:.01em;max-width:34ch}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:26px 0 0;border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule)}
.facts div{padding:16px 16px 16px 0}
.facts div+div{padding-left:16px;border-left:1px solid var(--rule)}
.facts dt{font:500 10px/1.3 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.facts dd{margin:0;font:600 15px/1.3 var(--f-d);color:var(--ink);letter-spacing:.02em}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.contact .hud{margin:0 0 14px}
.signals{list-style:none;margin:0;padding:0;counter-reset:c}
.signals li{counter-increment:c;display:grid;grid-template-columns:40px minmax(0,1fr);padding:10px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.45}
.signals li::before{content:counter(c,decimal-leading-zero);font:500 11px/1.9 var(--f-m);color:var(--mg)}
.cta-box{position:relative;padding:40px;border:1px solid var(--cy-b);background:linear-gradient(140deg,rgba(242,239,233,.09),rgba(210,85,122,.07) 60%,rgba(16,18,20,.9));clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.cta-box h2{font-size:clamp(28px,3.4vw,44px);line-height:1.02;text-transform:uppercase;margin:0 0 16px}
.cta-box p{font-size:15.5px;max-width:52ch;margin:0 0 26px}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--rule);padding:0 0 36px;background:var(--bg)}
.eot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:14px 0;margin:0 0 30px;border-bottom:1px solid var(--rule);font:500 10.5px/1.4 var(--f-m);letter-spacing:.18em;color:var(--mute);text-transform:uppercase}
.eot span:first-child{color:var(--mg)}
.eot .ok{color:var(--cy)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:40px}
.ftr p{font-size:14px;line-height:1.6;margin:14px 0 0;max-width:44ch}
.ftr .lab{font:500 10.5px/1 var(--f-m);letter-spacing:.16em;color:var(--am);text-transform:uppercase;margin:0 0 14px}
.ftr nav a{display:block;text-decoration:none;font-size:14px;padding:4px 0;color:var(--txt)}
.ftr nav a:hover{color:var(--cy)}
.ftr .small{font:500 11px/1.5 var(--f-m);color:var(--mute);letter-spacing:.06em;margin-top:18px}

/* ---------- motion (only when JS runs) ---------- */
.js [data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-rv].is-in{opacity:1;transform:none}
.js [data-rv="2"]{transition-delay:.08s}.js [data-rv="3"]{transition-delay:.16s}.js [data-rv="4"]{transition-delay:.24s}.js [data-rv="5"]{transition-delay:.32s}.js [data-rv="6"]{transition-delay:.4s}
.js .draw .ln,.js .draw .p,.js .draw .r,.js .draw .r2,.js .draw .r3{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1)}
.js .draw.is-in .ln,.js .draw.is-in .p,.js .draw.is-in .r,.js .draw.is-in .r2,.js .draw.is-in .r3{stroke-dashoffset:0}
.js .draw .nd,.js .draw .tk{opacity:0;transition:opacity .5s .9s}
.js .draw.is-in .nd,.js .draw.is-in .tk{opacity:1}
.js .flow li{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .flow.is-in li{opacity:1;transform:none}
.js .flow.is-in li:nth-child(2){transition-delay:.15s}.js .flow.is-in li:nth-child(3){transition-delay:.3s}.js .flow.is-in li:nth-child(4){transition-delay:.45s}.js .flow.is-in li:nth-child(5){transition-delay:.6s}.js .flow.is-in li:nth-child(6){transition-delay:.75s}
/* hero intro: reticle draws, one scan pass, short RGB split */
.js .hero .ret .r{transition-duration:1.4s}.js .hero .ret .r2{transition-delay:.35s}.js .hero .ret .r3{transition-delay:.6s}
.js .hero .brk{opacity:0;transform:scale(1.6);transition:opacity .4s .5s,transform .5s .5s var(--ease)}
.js .hero.on .brk{opacity:1;transform:none}
.js .hero .hud-bar{opacity:0;transition:opacity .4s .9s}
.js .hero.on .hud-bar{opacity:1}
.js .hero.on .scan{animation:scan 1.5s .35s cubic-bezier(.5,0,.5,1) 1 both}
@keyframes scan{0%{opacity:1;transform:translateY(0)}92%{opacity:1}100%{opacity:0;transform:translateY(100%)}}
.js .hero.on @keyframes rgb{0%{opacity:1;transform:translateX(-4px)}20%{transform:translateX(5px)}40%{transform:translate(-2px,2px)}60%{transform:translateX(3px)}80%{opacity:1;transform:none}100%{opacity:0}}
.js .hero.on .gl::before{animation:glt .9s .2s steps(1) 1}
.js .hero.on .gl::after{animation:glb .9s .2s steps(1) 1}
@keyframes glt{0%{opacity:1;transform:translateX(-5px)}25%{transform:translateX(4px)}50%{transform:translateX(-2px)}75%{transform:translateX(2px)}100%{opacity:0}}
@keyframes glb{0%{opacity:1;transform:translateX(5px)}25%{transform:translateX(-4px)}50%{transform:translateX(3px)}75%{transform:translateX(-1px)}100%{opacity:0}}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:up .5s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:.04s}.hero-copy>:nth-child(3){animation-delay:.08s}.hero-copy>:nth-child(4){animation-delay:.12s}.hero-copy>:nth-child(5){animation-delay:.16s}.hero-copy>:nth-child(6){animation-delay:.2s}

/* ================= work pages (w22 markup, restyled) ================= */
.w22{position:relative}
.w22-wrap{max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.w22-crumbs{font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:30px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.w22-crumbs a{text-decoration:none;color:var(--txt)}
.w22-crumbs a:hover{color:var(--cy)}
.w22-kicker{font:500 11.5px/1.4 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 20px}
.w22-kicker b{color:var(--am);font-weight:500}
.w22 h1{font-size:clamp(34px,4.8vw,60px);line-height:.98;text-transform:uppercase;margin:0 0 22px;max-width:20ch;letter-spacing:-.005em}
.w22-dek{font-size:clamp(16.5px,1.5vw,19px);line-height:1.55;max-width:60ch;margin:0;color:var(--txt)}
.w22-cover,.w22-whead{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px;padding:56px 0 34px;position:relative}
.w22-whead{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
.w22-cover::before,.w22-whead::before{content:"";position:absolute;inset:20px -40px 0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(242,239,233,.05) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(242,239,233,.05) 1px,transparent 1px) 0 0/48px 48px,radial-gradient(ellipse 50% 70% at 85% 40%,rgba(210,85,122,.1),transparent 70%);-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.w22-facts{margin:6px 0 0;align-self:start;border:1px solid var(--rule2);background:rgba(16,18,20,.85);padding:6px 18px;position:relative}
.w22-facts::before{content:"";position:absolute;left:-1px;top:-1px;width:18px;height:18px;border:0 solid var(--cy);border-width:2px 0 0 2px}
.w22-facts div{padding:12px 0;border-bottom:1px solid var(--rule)}
.w22-facts div:last-child{border-bottom:0}
.w22-facts dt{font:500 10px/1.3 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 5px}
.w22-facts dd{margin:0;color:var(--ink);font-size:14.5px;line-height:1.45}
.w22-facts dd a{color:var(--cy);text-decoration:none}
.w22-facts .fee dd{font:700 24px/1.1 var(--f-d);color:var(--cy)}
.w22-ruler{display:block;width:100%;height:22px;color:var(--cy)}
.w22-ruler .sk{fill:none;stroke:rgba(242,239,233,.45);stroke-width:1;vector-effect:non-scaling-stroke}
.w22-note{font:500 11.5px/1.5 var(--f-m);letter-spacing:.05em;color:var(--mute);margin:14px 0 0;padding-left:14px;border-left:2px solid var(--mg)}
.w22-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:60px;padding:48px 0 16px}
.w22-toc{position:sticky;top:calc(var(--hdr) + 24px);align-self:start;font:500 11px/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase}
.w22-toc p{color:var(--am);margin:0 0 12px}
.w22-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.w22-toc li a{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--txt);position:relative}
.w22-toc li a span{color:var(--mute)}
.w22-toc li a:hover,.w22-toc li a[aria-current]{color:var(--cy)}
.w22-toc li a[aria-current] span{color:var(--mg)}
.w22-toc li a[aria-current]::before{content:"";position:absolute;left:-14px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--cy)}
.w22-toc .w22-btn{margin-top:20px}
.w22-sec{position:relative;padding:0 0 56px;margin:0 0 48px;border-bottom:1px solid var(--rule)}
.w22-sec:last-child{border-bottom:0}
.w22 h2{font-size:clamp(26px,3vw,38px);line-height:1.02;text-transform:uppercase;margin:0 0 24px;display:flex;align-items:baseline;gap:16px}
.w22 h2 .n{font:500 12px/1 var(--f-m);letter-spacing:.16em;color:var(--am)}
.w22 h2 .n::after{content:" //";color:var(--mute)}
.w22-p{font-size:16px;line-height:1.7;max-width:68ch;margin:0 0 16px}
.w22-p a{color:var(--cy)}
.w22-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.w22-h3{font:500 11px/1.3 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--am);margin:26px 0 12px}
.w22-list{list-style:none;margin:0;padding:0;counter-reset:w}
.w22-list li{counter-increment:w;display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px;padding:11px 0;border-top:1px solid var(--rule);line-height:1.55;font-size:15px}
.w22-list li::before{content:counter(w,decimal-leading-zero);font:500 11px/1.9 var(--f-m);color:var(--cy)}
.w22-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.w22-steps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:18px;border:1px solid var(--rule);background:rgba(16,18,20,.7)}
.w22-steps .k{font:700 26px/1 var(--f-d);color:var(--cy)}
.w22-steps h3{font-size:17px;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;margin:0 0 6px}
.w22-steps p{margin:0;line-height:1.55;font-size:14.5px}
.w22-ex{margin:30px 0 0;padding:0}
.w22-ex>figcaption,.w22-cap{font:500 11px/1.5 var(--f-m);letter-spacing:.06em;color:var(--mute);margin:0 0 12px;display:flex;gap:10px;flex-wrap:wrap}
.w22-ex>figcaption b,.w22-cap b{color:var(--am);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.w22-src{font:400 11px/1.5 var(--f-m);color:var(--mute);margin:10px 0 0}
.w22-panel{position:relative;border:1px solid var(--rule);background:rgba(16,18,20,.75);padding:16px 18px}
.w22-panel::before{content:"";position:absolute;left:-1px;top:-1px;width:40px;height:2px;background:var(--cy)}
.w22-tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.w22-tbl th,.w22-tbl td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--rule)}
.w22-tbl thead th{font:500 10px/1.3 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--rule2)}
.w22-tbl tbody th{font-weight:600;color:var(--ink);width:28%}
.w22-tbl td.r,.w22-tbl th.r{text-align:right;font-family:var(--f-m);font-size:13px}
.w22-tbl tr:hover td,.w22-tbl tr:hover th{background:rgba(242,239,233,.035)}
.w22-tbl tr:last-child td,.w22-tbl tr:last-child th{border-bottom:0}
.w22-tbl .st{font:500 10px/1 var(--f-m);letter-spacing:.12em;padding:4px 7px;border:1px solid currentColor;color:var(--cy);white-space:nowrap}
.w22-tbl .st-fail{color:var(--mg)}.w22-tbl .st-info,.w22-tbl .st-blocked{color:var(--am)}
.w22-tbl tr.w22-excl th,.w22-tbl tr.w22-excl td{color:var(--mg);border-top:1px solid var(--rule2)}
.w22-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.w22-fee{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:30px 0 0;padding:22px 24px;border:1px solid var(--cy-b);background:linear-gradient(90deg,rgba(242,239,233,.08),transparent)}
.w22-fee .lab{display:block;font:500 11px/1.5 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.w22-fee .val{font:700 clamp(26px,3vw,38px)/1 var(--f-d);color:var(--ink);margin:0}
.w22-fee .val em{font-style:normal;color:var(--cy)}
.w22-fee p{margin:0;font-size:14px;color:var(--txt);line-height:1.6;max-width:72ch}
.w22-svg{display:block;width:100%;height:auto;overflow:visible}
.w22-svg .ink{fill:none;stroke:var(--ink);stroke-width:1;opacity:.8;vector-effect:non-scaling-stroke}
.w22-svg .sk{fill:none;stroke:var(--am);stroke-width:.8;opacity:.55;vector-effect:non-scaling-stroke}
.w22-svg .sk.d{stroke-dasharray:3 4}
.w22-svg .acc{fill:none;stroke:var(--cy);stroke-width:1.3;vector-effect:non-scaling-stroke}
.w22 svg .bar{fill:rgba(244,244,247,.12);stroke:var(--rule2);stroke-width:1;vector-effect:non-scaling-stroke}
.w22 svg .bar.on{fill:rgba(242,239,233,.25);stroke:var(--cy)}
.w22 svg .sk{fill:none;stroke:rgba(201,162,77,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.w22 svg .sk.d{stroke-dasharray:3 4}
.w22-svg text{font-family:var(--f-m);font-size:11px;letter-spacing:.06em;fill:var(--txt)}
.w22-svg text.t{fill:var(--ink);font-size:12px;letter-spacing:.12em}
.w22-svg text.s{fill:var(--mute);font-size:10.5px}
.w22-svg text.a{fill:var(--am);font-family:var(--f-d);font-size:13px;letter-spacing:.04em}
.w22-svg text.v{fill:var(--ink);font-size:12px}
.w22-svg .node{fill:var(--bg);stroke:var(--ink);stroke-width:1}
.w22-svg .node.on{stroke:var(--cy)}
.w22-svg .dot{fill:var(--am)}
.w22-svg .dot.on{fill:var(--cy)}
.w22-blue .w22-panel{background:linear-gradient(rgba(242,239,233,.045) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(242,239,233,.045) 1px,transparent 1px) 0 0/24px 24px,rgba(16,18,20,.85)}
.w22-fh{display:block}.w22-fv{display:none;max-width:420px;margin:0 auto}
.w22-vol{display:grid;gap:2px}
.w22-vrow{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr) 92px;gap:18px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule)}
.w22-vrow:last-child{border-bottom:0}
.w22-vrow .lab{font-size:14px}
.w22-vrow .num{font:500 15px/1 var(--f-m);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.w22-vbar{display:block;width:100%;height:14px;overflow:visible}
.w22-gantt{display:block;width:100%;min-width:140px;height:14px}
.w22-gcol{width:24%;min-width:150px}
.w22-mono{font-family:var(--f-m);font-size:12.5px;white-space:nowrap}
.w22-ms{min-width:760px}
.w22-more summary{cursor:pointer;font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:16px 0 4px;list-style:none}
.w22-more summary::-webkit-details-marker{display:none}
.w22-more summary::before{content:"+ ";color:var(--cy)}
.w22-more[open] summary::before{content:"− "}
.w22-k{color:var(--cy)!important}
.w22-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px;margin:24px 0 0}
.w22-shot{position:relative;margin:0}
.w22-shot>a{display:block;border:1px solid var(--rule);background:var(--bg2);overflow:hidden}
.w22-shot img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.w22-shot>a:hover img{transform:scale(1.02)}
.w22-shot .w22-cap{margin:12px 0 0}
.w22-shot .edge{bottom:auto;height:auto}
.w22-files a{color:var(--cy);text-decoration:none;border-bottom:1px solid var(--cy-b)}
.w22-files a:hover{color:var(--ink)}
.w22-sample{font-size:15.5px;line-height:1.65;color:var(--ink);margin:0 0 6px;max-width:70ch}
.w22-files td:first-child,.w22-files th:first-child{width:30%;overflow-wrap:anywhere}
.w22-files td:last-child,.w22-files th:last-child{white-space:nowrap;text-align:right}
.w22-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;font:600 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--bg)!important;background:var(--cy);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:transform .2s var(--ease)}
.w22-btn:hover{transform:translate(-2px,-2px)}
.w22-btn.w22-btn.ghost:hover{color:var(--cy)!important;box-shadow:inset 0 0 0 1px var(--cy)}
.w22-cta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;padding:40px;margin:24px 0 0;border:1px solid var(--cy-b);background:linear-gradient(140deg,rgba(242,239,233,.08),rgba(210,85,122,.06) 60%,rgba(16,18,20,.9));clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.w22-cta h2{margin:0 0 12px;display:block}
.w22-cta p{margin:0;line-height:1.6;max-width:56ch}
.w22-cta .go{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.w22-next{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:28px 0 72px}
.w22-next a{display:block;text-decoration:none;padding:18px 20px;border:1px solid var(--rule)}
.w22-next a:hover{border-color:var(--cy-b)}
.w22-next a span{display:block;font:500 10.5px/1.3 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--am);margin:0 0 8px}
.w22-next a b{font:600 18px/1.25 var(--f-d);color:var(--ink)}
.w22-next a:hover b{color:var(--cy)}
.w22-next a.nx{text-align:right}
/* /work/ gallery */
.w22-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);position:sticky;top:var(--hdr);z-index:20;background:rgba(12,13,15,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.w22-tabs .lab{font:500 10.5px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--am);padding:0 10px 0 0;align-self:center}
.w22-tabs button{appearance:none;background:transparent;border:1px solid var(--rule2);color:var(--txt);font:500 11.5px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;padding:11px 14px;cursor:pointer;transition:color .2s,border-color .2s}
.w22-tabs button:hover{color:var(--cy);border-color:var(--cy-b)}
.w22-tabs button[aria-pressed=true]{color:var(--bg);background:var(--cy);border-color:var(--cy)}
.w22-gh{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:44px 0 18px;padding:0 0 14px;border-bottom:1px solid var(--rule2)}
.w22-gh h2,.w22-gh h3{margin:0;font-size:clamp(22px,2.4vw,30px);text-transform:uppercase}
.w22-gh p{margin:0;font:500 11px/1.4 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.w22-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.w22-case{position:relative;display:flex;flex-direction:column;border:1px solid var(--rule);background:linear-gradient(180deg,rgba(26,29,33,.92),rgba(16,18,20,.92));transition:transform .35s var(--ease)}
.w22-case:hover{transform:translateY(-3px)}
.w22-case>div{display:flex;flex-direction:column;flex:1;padding:0 20px}
.w22-case .th{display:block;aspect-ratio:16/9;overflow:hidden;margin:0 -20px 16px;border-bottom:1px solid var(--rule);background:var(--bg2)}
.w22-case .th img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .7s var(--ease)}
.w22-case:hover .th img{transform:scale(1.04)}
.w22-case .meta{font:500 10.5px/1.5 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between;gap:12px;margin:0 0 10px}
.w22-case .meta b{color:var(--am);font-weight:500}
.w22-case h3{font-size:18px;line-height:1.2;margin:0 0 8px;letter-spacing:.01em}
.w22-case h3 a{text-decoration:none}
.w22-case h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.w22-case p{margin:0 0 14px;line-height:1.5;font-size:14px}
.w22-case .foot{display:flex;justify-content:space-between;gap:12px;margin:0 20px;padding:12px 0 16px;border-top:1px solid var(--rule);font:500 10.5px/1.4 var(--f-m);letter-spacing:.06em;color:var(--mute)}
.w22-case .foot span:last-child{color:var(--cy)}
.w22-none{padding:30px 0;color:var(--mute);font:500 12px/1.5 var(--f-m)}
.w22 [hidden]{display:none!important}
/* work page motion */
.js .w22-rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .w22-rv.is-in{opacity:1;transform:none}
.js .w22-rv.d1{transition-delay:70ms}.js .w22-rv.d2{transition-delay:140ms}.js .w22-rv.d3{transition-delay:210ms}.js .w22-rv.d4{transition-delay:280ms}
.js .w22-draw .ink,.js .w22-draw .sk,.js .w22-draw .acc{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.5,0,.2,1)}
.js .w22-draw.is-in .ink,.js .w22-draw.is-in .sk,.js .w22-draw.is-in .acc{stroke-dashoffset:0}
.js .w22-draw.is-in .sk.d{transition:none;stroke-dasharray:3 4}
.js .w22-draw .fade{opacity:0;transition:opacity .6s .9s}
.js .w22-draw.is-in .fade{opacity:1}
.js .w22-draw .bar{transform:scaleX(0);transform-box:fill-box;transform-origin:left;transition:transform 1.1s var(--ease)}
.js .w22-draw.is-in .bar{transform:none}
/* 404 */
.nf{padding:120px 0 140px}
.nf h1{font-size:clamp(40px,6vw,80px);text-transform:uppercase;line-height:.95;margin:0 0 20px}

/* ---------- responsive ---------- */
/* ---- compact pass (steer24: ~one viewport per section) ---- */
.sec{padding:66px 0 60px}
.sec-h{margin:0 0 28px;gap:14px 48px}
.sec-h h2{font-size:clamp(28px,3.4vw,44px)}
.hero{padding:22px 0 0;min-height:0}
.hero h1{font-size:clamp(40px,5.5vw,78px);margin:0 0 20px}
.hero-copy{padding:8px 0 24px}
.hero-grid{align-items:center}
.hero-fig{align-self:center;width:min(100%,540px,calc(100svh - 250px));min-width:min(100%,400px)}
.svc{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.svc .card,.svc .card:nth-child(4),.svc .card:nth-child(5){grid-column:span 1;padding:20px 18px 18px}
.svc .card h3{font-size:17px}
.svc .card p{font-size:14px;line-height:1.5}
.svc .card .tools{font-size:10.5px}
.price>div{padding:18px 22px}
.price .v{font-size:26px}
.care .card{padding:20px 22px 18px}
.care .ico{width:34px;height:34px;margin:0 0 12px}
.care .card h3{font-size:18px}
.care .ticks li{padding-top:5px;padding-bottom:5px}
.wk .th{aspect-ratio:16/8}
.wk .bd{padding:16px 18px 16px}
.wk p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wk h3{font-size:17px}
.about{grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:48px}
.about .txt p{font-size:16px;line-height:1.6}
.ftr .eot{max-width:none;margin:0 0 30px;font-size:10.5px}
.ftr .eot span{font:inherit}
@media (max-width:1180px){
 .svc{grid-template-columns:repeat(6,minmax(0,1fr))}
 .svc .card{grid-column:span 2}
 .svc .card:nth-child(4),.svc .card:nth-child(5){grid-column:span 3}
}
@media (max-width:1100px){
 .links a{padding:10px 7px;letter-spacing:.08em}.links a b{display:none}
}
@media (max-width:1020px){
 .sec{padding:72px 0}
 .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px}
 .hero h1{font-size:clamp(40px,6.4vw,64px)}
 .hero-fig figcaption{display:none}
 .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
 .svc .card,.svc .card:nth-child(4),.svc .card:nth-child(5){grid-column:span 1}
 .svc .card:first-child{grid-column:1/-1}
 .wk,.w22-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
 .care{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .about,.contact{gap:36px}
 .w22-body{grid-template-columns:minmax(0,1fr)}.w22-toc{display:none}
 .w22-cover,.w22-whead{grid-template-columns:minmax(0,1fr);gap:26px}
 .w22-cta{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (max-width:900px){
 .menu{display:block}
 .links{position:fixed;left:0;right:0;top:var(--hdr);flex-direction:column;align-items:stretch;gap:0;padding:12px var(--pad) 24px;background:rgba(12,13,15,.97);border-bottom:1px solid var(--cy-b);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s}
 .links.open{opacity:1;transform:none;visibility:visible;transition:opacity .25s,transform .25s var(--ease)}
 .links a{padding:15px 0;border-bottom:1px solid var(--rule);font-size:13px}.links a b{display:inline}
 .links a:not(.btn)::after{display:none}
 .links .btn{margin:16px 0 0}
 .hero{min-height:0}
 .hero-grid{grid-template-columns:minmax(0,1fr);gap:8px}
 .hero-copy{display:contents}
 .hero-grid>*,.hero-copy>*{grid-column:1}
 .hero-copy>.boot{order:1}.hero-copy>.kicker{order:2}.hero-copy>h1{order:3}
 .hero-fig{order:4;justify-self:center;width:min(100%,520px);margin:6px 0 26px}
 .hero-copy>.lead{order:5}.hero-copy>.cta-row{order:6}.hero-copy>.chips{order:7;margin-bottom:8px}
 .hero h1{font-size:clamp(40px,10.5vw,72px);margin-bottom:14px}
 .flow ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 0}
 .flow svg{display:none}
 .sec-h{grid-template-columns:minmax(0,1fr)}
 .care{grid-template-columns:minmax(0,1fr)}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0}
 .steps::before{display:none}
 .about,.contact{grid-template-columns:minmax(0,1fr)}
 .about figure{max-width:280px}
 .price{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .price>div:first-child{grid-column:1/-1}
 .price>div:nth-child(2){border-left:0}
 .price>div:nth-child(n+2){border-top:1px solid var(--rule)}
 .pk-grid{grid-template-columns:minmax(0,1fr)}
 .pk-grid article{border-left:0;border-top:1px solid var(--rule)}
 .pk-grid article:first-child{border-top:0}
 .ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .ftr-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:720px){
 :root{--pad:20px;--hdr:58px}
 body{font-size:15.5px}
 .sec{padding:60px 0}
 .sec-h{margin-bottom:28px}
 .lead{font-size:16.5px;margin-bottom:22px}
 .cta-row{flex-direction:column;align-items:stretch}
 .cta-row .btn{width:100%}
 .chip{font-size:10.5px;padding:8px 10px}
 .hud-bar{font-size:9px;letter-spacing:.1em}
 .brk.tl,.brk.bl{left:-6px}.brk.tr,.brk.br{right:-6px}
 .side{display:none}
 .svc,.wk,.w22-cases,.w22-shots,.w22-cols,.w22-steps{grid-template-columns:minmax(0,1fr)}
 .card{padding:22px 20px}
 .steps{grid-template-columns:minmax(0,1fr);gap:24px}
 .steps li{display:grid;grid-template-columns:56px minmax(0,1fr);padding:0}
 .steps .k{margin:0}
 .steps p{max-width:none}
 .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .facts div:nth-child(3){padding-left:0;border-left:0}
 .facts div:nth-child(n+3){border-top:1px solid var(--rule)}
 .cta-box{padding:28px 22px}
 .w22-cta{padding:28px 22px}
 .ftr-grid{grid-template-columns:minmax(0,1fr)}
 .w22-wrap{padding:0 var(--pad)}
 .w22-cover{padding:36px 0 26px}
 .w22-next{grid-template-columns:minmax(0,1fr)}.w22-next a.nx{text-align:left}
 .w22-tbl{font-size:13.5px}.w22-tbl tbody th{width:auto}
 .w22-fh{display:none}.w22-fv{display:block}
 .w22-vrow{grid-template-columns:minmax(0,1fr) 80px;gap:6px 12px}.w22-vrow .w22-vbar{grid-column:1/-1;grid-row:2}
 .w22-gh{flex-direction:column;align-items:flex-start;gap:6px}
 .w22-tabs{gap:6px;padding:12px 0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
 .w22-tabs .lab{display:none}
 .w22-tabs button{flex:0 0 auto;padding:10px 12px;font-size:10.5px}
 .w22-steps li{grid-template-columns:40px minmax(0,1fr)}
}
@media (hover:none){:is(.card,.w22-case):hover h3{animation:none}.card:hover,.w22-case:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .js [data-rv],.js .w22-rv,.hero-copy>*,.js .flow li,.js .hero .hud-bar,.js .hero .brk,.js .draw .nd,.js .draw .tk,.js .w22-draw .fade{opacity:1!important;transform:none!important}
 .js .draw .ln,.js .draw .p,.js .draw .r,.js .draw .r2,.js .draw .r3,.js .w22-draw .ink,.js .w22-draw .sk,.js .w22-draw .acc{stroke-dashoffset:0!important}
 .js .w22-draw .bar{transform:none!important}
 .scan{display:none}
 .boot .cur{display:none}
}
/* compact pass 2 */
@media (min-width:1021px){.wk p{-webkit-line-clamp:2}.sec{padding:60px 0 54px}.about figure{max-width:300px}}
.w22-wrap>*,.w22-body>*,.w22-body>div>*,.w22-cols>*,.w22-sec>*{min-width:0;max-width:100%}
main.w22{overflow-x:clip}
@media (max-width:720px){.w22-cover::before,.w22-whead::before{left:-20px;right:-20px}}
/* photo stays clear of any overlay: caption is for screen readers; the HUD bar carries the name */
.hero-fig figcaption{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;padding:0;border:0;transform:none}

/* ---------- steer25 ---------- */
picture:not(.me){display:contents}
/* data path: equal nodes, light loops enquiry > payment > books */
.flow li b{animation:nodeb 7s linear infinite;animation-delay:calc(var(--d,0)*1s - .5s)}
.flow li::before{animation:nodel 7s linear infinite;animation-delay:calc(var(--d,0)*1s - .5s)}
.flow li:nth-child(2){--d:1}.flow li:nth-child(3){--d:2}.flow li:nth-child(4){--d:3}.flow li:nth-child(5){--d:4}.flow li:nth-child(6){--d:5}
@keyframes nodel{0%,15%{background:var(--cy);box-shadow:0 0 14px var(--cy)}22%,100%{background:var(--bg);box-shadow:none}}
@keyframes nodeb{0%,15%{color:var(--cy)}22%,100%{color:var(--ink)}}
.flow ol::after{content:"";position:absolute;left:8.333%;right:8.333%;top:10px;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--cy) 50%,transparent) no-repeat 0 0/14% 100%;animation:pulse 7s linear infinite;filter:drop-shadow(0 0 4px var(--cy))}
@keyframes pulse{0%{background-position:-8% 0}71%,100%{background-position:108% 0}}
@media (max-width:1020px){.flow ol::after{display:none}}
.rail .end.b{color:var(--mute)}
@media (prefers-reduced-motion:reduce){.flow ol::after{display:none}.hero-copy>*{animation:none!important}}

/* batch1: new work-sample pages */
.w22-shots.one{grid-template-columns:minmax(0,1fr)}
.w22-bare{margin:0 0 22px}
.w22-excl-line{color:var(--mg)}
.w22-case-page .w22-tbl td{overflow-wrap:break-word}
.w22-case-page .w22-bare .w22-tbl td.r,.w22-case-page .w22-bare .w22-tbl th.r{white-space:nowrap}
.w22-files td:first-child{white-space:nowrap}
@media (max-width:720px){.w22-files td:first-child{white-space:normal;overflow-wrap:anywhere}}

/* ================================================================
   steer26 · graphite + warm off-white, hairline rules, material grain.
   Neon (--neon / --neon-m) is kept for animation and HUD accents only.
   ================================================================ */
:root{--neon:#00f0ff;--neon-m:#ff2bd6;--em:#a9a59b;--steel:rgba(242,239,233,.1)}

/* ---- material: brushed steel + film grain sit BEHIND content ---- */
html{background:var(--bg)}
body{background:transparent;overflow-x:clip}
body::before{z-index:-1;background:url(/assets/fx/steel.webp) 0 0/512px 512px;opacity:.7}
body::after{z-index:-1;background:url(/assets/fx/grain.png) 0 0/160px 160px;opacity:.06}
html::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 120% 100% at 50% 40%,transparent 58%,rgba(0,0,0,.45) 100%)}
.ftr{background:transparent}

/* ---- header: hairline + scroll progress ---- */
.hdr{background:rgba(12,13,15,.86)}
.hdr::after{height:2px;bottom:-1px;opacity:1;background:var(--neon);box-shadow:0 0 10px rgba(0,240,255,.55);transform:scaleX(var(--sp,0));transform-origin:left}
.brand-mk{box-shadow:3px 0 0 var(--am);background:var(--cy)}
.menu i{background:var(--cy)}.menu i:last-of-type{background:var(--am)}
.links a:not(.btn):hover,.links a[aria-current]{color:var(--neon)}
.links a:not(.btn)::after{background:var(--neon)}
.links a b{color:var(--am)}

/* ---- type & colour (static accents are bone / brass; neon only on motion) ---- */
.sec-h h2 em,.hero h1 .l2{color:var(--em)}
.sec-h .lead{padding-bottom:.32em}
.kicker{color:var(--txt)}
.kicker::before{background:var(--am)}
.lnk:hover,.w22-crumbs a:hover,.ftr nav a:hover,.w22-toc li a:hover,.w22-toc li a[aria-current],.w22-tabs button:hover,.w22-next a:hover b,.w22-files a:hover,.w22-btn.ghost:hover,.btn-g:hover{color:var(--neon)!important}
.btn-g:hover,.w22-btn.ghost:hover{border-color:var(--neon)!important}
.card .n i,.eot .ok,.hud-bar .ok{color:var(--mute)}
.eot .ok{color:var(--neon)}
.hud-bar .ok{color:var(--neon)}
.eot span:first-child{color:var(--am)}
.boot .cur{background:var(--neon);box-shadow:0 0 8px var(--neon)}
.boot::before{box-shadow:none}
.rail .fill{background:var(--neon);box-shadow:0 0 8px rgba(0,240,255,.5)}
.rail li::after{background:var(--neon)}
.chip::before{background:var(--am)}
:focus-visible{outline-color:var(--neon)}

/* ---- buttons: refined, no clipped inset shadow (fixes the stray edge) ---- */
.btn-g{clip-path:none;box-shadow:none;border:1px solid var(--rule2);color:var(--ink);background:rgba(242,239,233,.02)}
.btn-p{background:var(--ink);color:#0c0d0f}
.btn-p::after{background:linear-gradient(100deg,transparent 30%,rgba(0,240,255,.5) 50%,transparent 70%)}
.btn-p:hover{transform:translate(-2px,-2px)}
.w22-btn{background:var(--ink);color:#0c0d0f!important}
.w22-btn.ghost{clip-path:none;box-shadow:none;border:1px solid var(--rule2);background:rgba(242,239,233,.02);color:var(--ink)!important}
.links .btn-p{color:#0c0d0f}
.w22-tabs button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#0c0d0f}
.skip{background:var(--ink);color:#0c0d0f}

/* ---- surfaces: graphite, hairlines, no blue ---- */
.hero-bg{background:radial-gradient(ellipse 60% 70% at 78% 38%,rgba(242,239,233,.06),transparent 70%),linear-gradient(rgba(242,239,233,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(242,239,233,.035) 1px,transparent 1px) 0 0/48px 48px;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.frame{background:radial-gradient(ellipse 70% 55% at 50% 36%,rgba(242,239,233,.12),transparent 72%),url(/assets/fx/steel.webp) 0 0/512px 512px,var(--bg1);box-shadow:inset 0 0 0 1px var(--rule2)}
.frame::before{background:linear-gradient(rgba(242,239,233,.05) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(242,239,233,.05) 1px,transparent 1px) 0 0/32px 32px}
.svc .card:first-child{background:linear-gradient(160deg,rgba(242,239,233,.07),rgba(16,18,20,.92) 55%);border-color:var(--rule2)}
.cta-box,.w22-cta{background:linear-gradient(140deg,rgba(242,239,233,.06),rgba(16,18,20,.92) 70%);border-color:var(--rule2)}
.w22-cover::before,.w22-whead::before{background:linear-gradient(rgba(242,239,233,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(242,239,233,.035) 1px,transparent 1px) 0 0/48px 48px}
.w22-blue .w22-panel{background:linear-gradient(rgba(242,239,233,.035) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(242,239,233,.035) 1px,transparent 1px) 0 0/24px 24px,rgba(16,18,20,.85)}
.w22-tabs{background:rgba(12,13,15,.92)}
.w22-fee{background:linear-gradient(90deg,rgba(242,239,233,.06),transparent);border-color:var(--rule2)}
.w22-panel::before{background:var(--am)}
.w22-facts::before{border-color:var(--am)}
.about figure::before{border-color:var(--am)}.about figure::after{border-color:var(--rule2)}
.brk{border-color:var(--rule2)}.brk.bl,.brk.br{border-color:var(--rule2)}
.w22-ruler .sk{stroke:rgba(242,239,233,.3)}
.w22-tbl tr:hover td,.w22-tbl tr:hover th{background:rgba(242,239,233,.03)}
.edge b:nth-child(1),.edge b:nth-child(2){background:var(--neon);box-shadow:0 0 10px var(--neon)}
.edge b:nth-child(3),.edge b:nth-child(4){background:var(--neon-m);box-shadow:0 0 10px var(--neon-m)}
.steps::before{background:linear-gradient(90deg,var(--rule2),var(--rule2))}
.steps .k{border-color:var(--rule2);color:var(--ink)}.steps li:last-child .k{border-color:var(--am);color:var(--am)}
.care .ico .s{stroke:var(--ink)}.care .ico .s2{stroke:var(--am)}
.w22 svg .bar.on{fill:rgba(242,239,233,.2);stroke:var(--ink)}
.w22-svg .acc{stroke:var(--ink)}
.w22-svg .node.on{stroke:var(--ink)}.w22-svg .dot.on{fill:var(--ink)}
.ret{display:none}
@media (min-width:1300px){.rail{display:block}}

/* ---- ghost numeral per section (hairline outline, blueprint feel) ---- */
.sec[data-n]::after{content:attr(data-n);position:absolute;right:calc(var(--pad) - 6px);top:46px;font:700 clamp(110px,15vw,210px)/.8 var(--f-d);color:transparent;-webkit-text-stroke:1px rgba(242,239,233,.08);pointer-events:none;z-index:0;letter-spacing:-.02em}
.sec>.wrap{position:relative;z-index:1}
@media (max-width:720px){.sec[data-n]::after{font-size:96px;top:34px}}

/* ---- hero: HUD frame at the edges, reticle never on the face ---- */
.hero-fig{z-index:3}
.hero-lines{opacity:.9}
.hero-lines .c{stroke:rgba(242,239,233,.09)}
.hero-lines .d{stroke:rgba(201,162,77,.22)}
.hero-lines .rot{fill:none;stroke:rgba(0,240,255,.45);stroke-width:1.2;stroke-dasharray:2 16;transform-origin:300px 320px;vector-effect:non-scaling-stroke}
.hero-lines .rot2{fill:none;stroke:rgba(242,239,233,.2);stroke-width:1;stroke-dasharray:40 90 10 90;transform-origin:300px 320px;vector-effect:non-scaling-stroke}
.live .hero-lines .rot,.hero.live .hero-lines .rot{animation:spin 90s linear infinite}
.hero.live .hero-lines .rot2{animation:spin 140s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hf{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hf *{fill:none;vector-effect:non-scaling-stroke}
.hf .pm{stroke:rgba(242,239,233,.45);stroke-width:1}
.hf .tk{stroke:var(--neon);stroke-width:1.2}
.hf .xh{stroke:rgba(0,240,255,.9);stroke-width:1.3}
.hf .dl{stroke:rgba(201,162,77,.8);stroke-width:1}
.js .hf .pm,.js .hf .tk,.js .hf .xh,.js .hf .dl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.6,0,.2,1)}
.js .hero.on .hf .pm,.js .hero.on .hf .tk,.js .hero.on .hf .xh,.js .hero.on .hf .dl{stroke-dashoffset:0}
.js .hero.on .hf .tk{transition-delay:.35s}.js .hero.on .hf .xh{transition-delay:.55s}.js .hero.on .hf .dl{transition-delay:.7s}
.hero.done .hf .pm{stroke:rgba(242,239,233,.28)}
.hero.done .hf .tk,.hero.done .hf .xh{stroke:rgba(0,240,255,.5);transition:stroke 1.2s}
.hf-dial{position:absolute;right:-34px;top:-34px;width:96px;height:96px;overflow:visible;pointer-events:none}
.hf-dial circle{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.hf-dial .a{stroke:rgba(0,240,255,.55);stroke-dasharray:3 9;transform-origin:48px 48px}
.hf-dial .b{stroke:rgba(242,239,233,.25);stroke-dasharray:30 20;transform-origin:48px 48px}
.hero.live .hf-dial .a{animation:spin 18s linear infinite}
.hero.live .hf-dial .b{animation:spin 26s linear infinite reverse}
.hf-dial .c{stroke:rgba(201,162,77,.8)}
.scan{opacity:0}
.scan::before{background:var(--neon);height:1px;box-shadow:0 0 14px 2px rgba(0,240,255,.55)}
.hero.live.done .scan{animation:scan2 7s 1s linear infinite both}
@keyframes scan2{0%{opacity:0;transform:translateY(0)}6%{opacity:.9}44%{opacity:.9}50%{opacity:0;transform:translateY(100%)}100%{opacity:0;transform:translateY(100%)}}
.rgbg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(-7px 0 0 var(--neon)) drop-shadow(7px 0 0 var(--neon-m));opacity:0;pointer-events:none}
.js .hero.on .rgbg{animation:rgb .7s .1s steps(1) 1 both}
.js .hero .me{opacity:0;transition:opacity .35s .12s}
.js .hero.on .me{opacity:1}
.hero-fig .hud-bar b{color:var(--am)}
.hud-bar [data-boot]{min-width:12ch}
.hero h1 .l2{color:var(--em)}
.gl::before{color:var(--neon-m)}
.gl::after{color:var(--neon)}
.js .hero.on .gl::before{animation:glt .9s .2s steps(1) 1}
.js .hero.on .gl::after{animation:glb .9s .2s steps(1) 1}
.gl.bz::before{animation:glt .42s steps(1) 1!important}
.gl.bz::after{animation:glb .42s steps(1) 1!important}
.dec{position:relative}
.dec[data-scr]::after{content:attr(data-scr);position:absolute;left:0;top:0;width:100%;color:var(--neon);white-space:nowrap;overflow:hidden;pointer-events:none}
.dec.run{color:transparent!important}
.dec.run>*{color:transparent!important}
.gl.dec.run::before,.gl.dec.run::after{opacity:0}
.gl.dec[data-scr]::after{clip-path:none;opacity:1}
.gl.dec.run::after{opacity:1}
.brand-mk.bz{animation:gl .4s steps(2) 1}

/* ---- data path: neon packet, counts in nodes ---- */
@keyframes nodel{0%,15%{background:var(--neon);box-shadow:0 0 14px var(--neon)}22%,100%{background:var(--bg);box-shadow:none}}
@keyframes nodeb{0%,15%{color:var(--neon)}22%,100%{color:var(--ink)}}
.flow .p{stroke:rgba(242,239,233,.5)}.flow .p2{stroke:var(--am);opacity:.8}
.flow li::before{border-color:var(--rule2);background:var(--bg)}
.flow ol::after{background:linear-gradient(90deg,transparent,var(--neon) 50%,transparent) no-repeat 0 0/14% 100%;filter:drop-shadow(0 0 4px var(--neon));animation:none}
.flow.live ol::after{animation:pulse 7s linear infinite}
.flow li b,.flow li::before{animation:none}
.flow.live li b{animation:nodeb 7s linear infinite;animation-delay:calc(var(--d,0)*1s - .5s)}
.flow.live li::before{animation:nodel 7s linear infinite;animation-delay:calc(var(--d,0)*1s - .5s)}
.flow li span{display:inline-block;white-space:nowrap}
.flow .tag{color:var(--am)}

/* ---- section trace: neon draw, then cools to hairline ---- */
.trace .ln{stroke:var(--neon);opacity:.9}
.trace .lab.r{color:var(--neon)}
.trace .tk{stroke:rgba(242,239,233,.28)}

/* ---- schematic interludes (stroke-drawn linework, scroll storytelling) ---- */
.ilu{position:relative;border-top:1px solid var(--rule);padding:28px 0 26px;overflow-x:clip}
.ilu-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.ilu-fig{height:260px;position:relative}
.sc{--p:1;display:block;width:100%;height:100%;overflow:visible}
.sc *{fill:none;vector-effect:non-scaling-stroke}
.sc path,.sc circle{stroke-linecap:butt;stroke-linejoin:round}
.sc .ln,.sc .cn,.sc .ft,.sc .dm{stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--p) - var(--s,0))*6,1))}
.sc .ln{stroke:var(--neon);stroke-width:1.25}
.sc .cn{stroke:rgba(242,239,233,.5);stroke-width:1}
.sc .ft{stroke:rgba(0,240,255,.6);stroke-width:1}
.sc .dm{stroke:var(--am);stroke-width:1}
.sc .f{stroke:rgba(242,239,233,.4);stroke-width:1;stroke-dasharray:3 5;opacity:clamp(0,(var(--p) - var(--s,0))*6,1)}
.sc text{fill:var(--mute);font:500 10px var(--f-m);letter-spacing:.14em;stroke:none;opacity:clamp(0,(var(--p) - var(--s,0))*6,1)}
.sc text.dmt{fill:var(--am)}
.sc .s0{--s:0}.sc .s1{--s:.07}.sc .s2{--s:.14}.sc .s3{--s:.21}.sc .s4{--s:.28}.sc .s5{--s:.35}.sc .s6{--s:.42}.sc .s7{--s:.49}.sc .s8{--s:.56}
.sc .spin{transform-box:fill-box;transform-origin:center}
.sc.live .spin.a{animation:spin 60s linear infinite}
.sc.live .spin.b{animation:spin 50s linear infinite reverse}
.sc.done .ln{stroke:rgba(242,239,233,.72);transition:stroke 1.4s}
.sc.done .ft{stroke:rgba(0,240,255,.4);transition:stroke 1.4s}
.sc.done .hlt{stroke:var(--neon)}
.ilu-ro{font:500 11px/1.5 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);min-width:0}
.ilu-ro .fig{color:var(--am);margin:0 0 14px;display:flex;justify-content:space-between;gap:12px}
.ilu-ro dl{margin:0;border-top:1px solid var(--rule2)}
.ilu-ro dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule)}
.ilu-ro dt{margin:0}
.ilu-ro dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ilu-ro dd i{font-style:normal;color:var(--neon)}
.ilu-ro .bar{display:block;height:2px;margin:16px 0 0;background:var(--rule2);position:relative;overflow:hidden}
.ilu-ro .bar::after{content:"";position:absolute;inset:0;background:var(--neon);transform:scaleX(var(--p,1));transform-origin:left}
@media (max-width:900px){.ilu-in{grid-template-columns:minmax(0,1fr);gap:18px}.ilu-fig{height:200px}}
@media (max-width:720px){.ilu{padding:20px 0 18px}.ilu-fig{height:170px}}

/* ---- cards: circuit-trace draw-in, HUD cursor, scan sweep ---- */
.card,.w22-case,.w22-shot{--ct:0}
.ct{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.ct path{fill:none;stroke:var(--neon);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) var(--cd,0s),opacity 1.4s 1.5s}
.ct circle{fill:var(--neon);opacity:0;transition:opacity .3s 1.4s}
.is-in>.ct path{stroke-dashoffset:0;opacity:.28}
.is-in>.ct circle{opacity:.9}
.card:hover>.ct path,.w22-case:hover>.ct path{opacity:.8;transition:opacity .3s}
.hx{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .2s}
.hx::before,.hx::after{content:"";position:absolute;background:var(--neon)}
.hx::before{left:-9px;top:0;width:18px;height:1px}.hx::after{left:0;top:-9px;width:1px;height:18px}
.hx b{position:absolute;left:12px;top:8px;font:500 9.5px/1 var(--f-m);letter-spacing:.12em;color:var(--neon);white-space:nowrap;font-weight:500}
:is(.card,.w22-case,.w22-shot):hover>.hx{opacity:1}
.th{position:relative}
.th::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--neon);box-shadow:0 0 12px 1px rgba(0,240,255,.6);opacity:0;transform:translateY(0);pointer-events:none}
.card:hover .th::after,.w22-case:hover .th::after{animation:scanth 1s linear 1 both}
@keyframes scanth{0%{opacity:1;transform:translateY(0)}95%{opacity:1}100%{opacity:0;transform:translateY(220px)}}
.w22-shot>a{position:relative}
.w22-shot>a::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--neon);box-shadow:0 0 12px 1px rgba(0,240,255,.6);opacity:0;pointer-events:none}
.w22-shot:hover>a::after{animation:scanth 1.2s linear 1 both}

/* ---- headings: scan line draws across on reveal ---- */
.sec-h h2,.w22 h2{position:relative}
.sec-h h2::after,.w22-sec>h2::after{content:"";position:absolute;left:0;bottom:-10px;height:1px;width:100%;background:linear-gradient(90deg,var(--neon),rgba(0,240,255,0));transform:scaleX(0);transform-origin:left;opacity:0}
.sec-h h2.is-in::after,.w22-sec>h2.is-in::after{animation:hl 1.3s .15s var(--ease) 1 both}
@keyframes hl{0%{transform:scaleX(0);opacity:1}60%{opacity:1}100%{transform:scaleX(1);opacity:0}}
.w22 h2{flex-wrap:wrap}

/* ---- /work/ + sample pages ---- */
.w22-case .meta span,.wk .meta span{white-space:nowrap}
.w22-case .meta,.wk .meta{flex-wrap:wrap;gap:4px 12px}
.w22-case .foot span:last-child,.wk .foot span:last-child{white-space:nowrap;color:var(--ink)}
.w22-case .foot,.wk .foot{align-items:flex-start}
.w22-case .th img,.wk .th img{background:var(--bg2)}
.w22-case .foot span:last-child{color:var(--ink)}
.w22-gh{align-items:baseline}
.w22-gh p{white-space:normal}
.w22-kicker b{color:var(--am)}
.w22-p a,.w22-files a,.w22-facts dd a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(242,239,233,.3);text-underline-offset:3px}
.w22-facts .fee dd{color:var(--ink)}
.w22-k{color:var(--ink)!important}
.w22-list li::before{color:var(--am)}
.w22-steps .k{color:var(--am)}
.w22-tbl .st{color:var(--ink)}
.w22-tbl .st-fail{color:var(--mg)}.w22-tbl .st-info,.w22-tbl .st-blocked{color:var(--am)}
.w22-tbl .nw{white-space:nowrap}
.w22-tbl td,.w22-tbl th{padding-right:18px}
.w22-sw{position:relative}
.w22-sw>.w22-scroll{scrollbar-color:rgba(242,239,233,.3) transparent}
.w22-sw::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:46px;background:linear-gradient(90deg,transparent,rgba(12,13,15,.94));pointer-events:none;opacity:0;transition:opacity .25s}
.w22-sc{position:absolute;right:10px;bottom:8px;z-index:2;font:500 10px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--am);background:rgba(12,13,15,.9);padding:5px 7px;border:1px solid var(--rule2);opacity:0;pointer-events:none;transition:opacity .25s}
.w22-sw.ov::after,.w22-sw.ov .w22-sc{opacity:1}
.w22-sw.ov.end::after,.w22-sw.ov.end .w22-sc{opacity:0}
@media (max-width:720px){html:not(.js) .w22-sw::after,html:not(.js) .w22-sc{opacity:1}}
.w22-group>.w22-gh h2{text-transform:uppercase}
.js .w22-panel::before{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.js .w22-rv.is-in .w22-panel::before,.js .w22-panel.is-in::before,.js .is-in .w22-panel::before{transform:none}
.w22-case-page .w22-cols>div{min-width:0}

/* ---- mobile ---- */
@media (max-width:900px){
 .links{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--rule2);box-shadow:0 24px 40px rgba(0,0,0,.6)}
}
@media (max-width:720px){
 .price{grid-template-columns:minmax(0,1fr)}
 .price>div:nth-child(n+2){border-left:0;border-top:1px solid var(--rule)}
 .price .v{white-space:nowrap}
 .flow li{font-size:10px}
 .w22-tbl td,.w22-tbl th{padding-right:14px}
}
.price .v{white-space:nowrap}
.hero-copy .gl{white-space:normal}

/* ---- motion off: static final state, nothing hidden ---- */
@media (prefers-reduced-motion:reduce){
 .sc *,.sc{--p:1}
 .sc .ln,.sc .cn,.sc .ft,.sc .dm,.ct path,.hf .pm,.hf .tk,.hf .xh,.hf .dl{stroke-dashoffset:0!important}
 .sc text,.sc .f{opacity:1!important}
 .ct circle{opacity:.9!important}.ct path{opacity:.28!important}
 .js .hero .me{opacity:1!important}
 .hero.done .scan,.rgbg,.hx,.th::after,.w22-shot>a::after{display:none}
 .js .w22-panel::before{transform:none!important}
 .hdr::after{transform:scaleX(0)}
 .dec[data-scr]::after{display:none}.dec.run{color:inherit!important}.dec.run>*{color:inherit!important}
 .flow ol::after{display:none}
 .sec-h h2::after,.w22-sec>h2::after{display:none}
}

/* contact: direct lines + mailto form (steer26) */
.cta-box .cdir{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--rule)}
.cta-box .cdir li{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule)}
.cta-box .cdir span{font:500 10.5px/1.4 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--am)}
.cta-box .cdir a{color:var(--ink);text-decoration:none;font-size:15.5px;overflow-wrap:anywhere;border-bottom:1px solid var(--rule2);justify-self:start;transition:color .2s,border-color .2s}
.cta-box .cdir a:hover{color:var(--neon);border-color:var(--neon)}
.cta-box .cdir .nw{white-space:nowrap}
.cform{margin:30px 0 0;display:grid;gap:18px}
.cform .hud{margin:0}
.cform .fld{display:grid;gap:7px;min-width:0}
.cform label{font:500 10.5px/1.4 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--txt)}
.cform label i{font-style:normal;color:var(--mute);letter-spacing:.1em;text-transform:none}
.cform input,.cform textarea{width:100%;box-sizing:border-box;font:400 16px/1.5 var(--f-b);color:var(--ink);background:rgba(12,13,15,.7);border:1px solid var(--rule2);border-radius:0;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.cform textarea{min-height:130px;resize:vertical}
.cform input::placeholder,.cform textarea::placeholder{color:var(--mute)}
.cform input:hover,.cform textarea:hover{border-color:rgba(242,239,233,.4)}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-color:var(--neon);box-shadow:0 0 0 4px rgba(0,240,255,.12)}
.cform .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.cform .act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.cform .act button{cursor:pointer;font:inherit}
.cform .note{margin:0;font:500 11px/1.5 var(--f-m);letter-spacing:.06em;color:var(--mute);max-width:none}
.cform .stat{margin:0;min-height:1.5em;font-size:14px;color:var(--txt);max-width:none}
.cform .stat.bad{color:var(--mg)}
.cta-box .cf-nojs{margin:26px 0 0}
.js .cf-nojs{display:none}
html:not(.js) .cform{display:none}
@media (max-width:720px){.cform .row2{grid-template-columns:minmax(0,1fr)}.cta-box .cdir li{grid-template-columns:minmax(0,1fr);gap:4px}}
.ftr-c{margin:18px 0 0}
.ftr-c a{display:block;text-decoration:none;font-size:14px;padding:4px 0;color:var(--txt);overflow-wrap:anywhere}
.ftr-c a:hover{color:var(--neon)}