/* ===== Style I: the full homepage in style H (C2 on top, D3 inside) =====
   I = H, with: no stickers in the left column (only on the 3D scenes, sparingly); a few wall tiles a little brighter, some
   of them breathing (never near text); and every section of the page, each with its own scene in the same world: the
   continuous scroll story is hero roof -> twelve blocks -> Rubik's cube -> three stages -> vault -> the cases -> the roof
   over more blocks -> the mark -> a prompt. Contact form (inline validation, mailto) and the LED / ASCII ONEROOF footer.
   H's notes follow. ===== Style H: C2 on top, D3 inside =====
   C2's takeover (the stock corporate page, torn and wiped by an acid scan), its wall of mark tiles and its pixel stickers,
   over D3's page: D3's left column exactly (mono headings that decode in, [01] labels with a dash rule, the then/now bar
   and list, the case list, the HUD readout) and D3's real-time ASCII 3D world, with D3's depth, lighting and contrast.
   ?mat=ascii is the default; ?mat=dots draws the same world (and the wall, the stickers) as square LED dots.
   In 01 the twelve role blocks are the twelve edge pieces of a Rubik's cube: they fly in, corners and centres fill in,
   three face turns solve it, and the solved top face lights in the accent.
   Greyscale + ONE accent, acid green #C6FF3D: the live parts of the world (data streams, the active block, a turning
   layer, the solved face, the scan, glints, points in flight), stickers, the takeover, cursors, focus and hover. Never
   body text, never a fill behind text. Reading text never moves and nothing draws behind it. */
@font-face{font-family:"Geist";src:url(/assets/fonts/Geist-normal-300-700.woff2?v=f49f83ef) format("woff2");font-weight:300 700;font-style:normal;font-display:block}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/JetBrainsMono-normal-300-700.woff2?v=e7277e71) format("woff2");font-weight:300 700;font-style:normal;font-display:block}
:root{
  --bg:#050505;--fg:#EDEDED;--fg2:#ABABAB;--mute:#7E7E7E;--dim:#3A3A3A;--faint:#1F1F1F;--line:#1C1C1C;--hi:#FFFFFF;--ink:#050505;
  --lime:#C6FF3D;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:56px;--max:1400px;--nav:68px;--px:4px;--sk:1;
  color-scheme:dark;
}
*{box-sizing:border-box;font-feature-settings:"calt" 0,"liga" 0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 12px)}
body{margin:0;background:transparent;color:var(--fg);font:400 16px/1.72 var(--mono);letter-spacing:-.01em;font-variant-ligatures:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:12px;z-index:300;background:var(--fg);color:var(--bg);font:500 14px/1 var(--mono);padding:12px 16px;opacity:0;pointer-events:none}
.skip:focus{opacity:1;pointer-events:auto}
html.mat-dots .a-only,html.mat-ascii .d-only{display:none}
.src-only{display:none!important}

/* the panel: the wall (30 fps at most), the world (60 fps) and the stickers stuck on it, all fixed behind the page;
   D3's faint scanlines and vignette over them (never over text) */
.wall,.stage{position:fixed;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.crt{position:fixed;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,rgba(0,0,0,0) 1px 3px),radial-gradient(130% 100% at 62% 48%,rgba(0,0,0,0) 52%,rgba(0,0,0,.6) 100%)}
.stk-layer{position:fixed;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.pw-patch{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
/* the intro: the old corporate page over the hero, then torn into the panel (drawn by the script) */
.tk{position:fixed;left:0;top:var(--nav);width:100%;height:calc(100vh - var(--nav));z-index:40;pointer-events:none;display:none}
html.intro .tk{display:block;background:#E8EDF3}
html.intro .hero-txt,html.intro .hud,html.intro .hsw{clip-path:inset(0 0 100% 0)}
/* failsafe: if the script never ends the intro, the copy shows anyway */
html.intro:not(.still) .hero-txt,html.intro:not(.still) .hud,html.intro:not(.still) .hsw{animation:introCopy 0s 6s forwards}
html.intro:not(.still) .tk{animation:introPage 0s 6s forwards}
@keyframes introCopy{to{clip-path:none}}
@keyframes introPage{to{visibility:hidden}}
main{position:relative;z-index:1}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* D3's mono labels; the block cursor in the accent (a live part) */
.term{font-size:12.5px;font-weight:400;line-height:1.6;letter-spacing:.02em;color:var(--mute)}
.cur{display:inline-block;width:.62em;height:1.15em;vertical-align:-.22em;margin-left:.4em;background:var(--lime);animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
html.still .cur{animation:none}

/* ---------- nav ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--bg)}
html.mat-dots .top::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--px);pointer-events:none;
  background:conic-gradient(var(--bg) 25%,transparent 0 50%,var(--bg) 0 75%,transparent 0) 0 0/calc(var(--px) * 2) calc(var(--px) * 2)}
.nav{position:relative;z-index:1;height:var(--nav);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
/* style M: the logo is the mark alone (the owner: "remove the spikes, just the whole pixelated logo"): 16 x 16 pixel art at
   2 px = 32 px, crispEdges (build.py draws it, one path per diagonal). Idle: once every 8 s an acid glint sweeps across the
   mark, top left to bottom right (each diagonal lit 80 ms, 30 ms apart). Hover / focus: the mark goes acid at once and
   ONEROOF scrambles and resolves. Reduced motion and stills: no glint, no scramble. */
.logo{display:inline-flex;align-items:center;gap:12px;justify-self:start;font:600 13px/1 var(--mono);letter-spacing:.18em;color:var(--fg)}
.px-logo{display:block;flex:none;overflow:visible}
.px-logo .lg-d{fill:currentColor;animation:lgGlint 8s steps(1,end) infinite;animation-delay:calc(1.6s + var(--i) * 30ms)}
@keyframes lgGlint{0%{fill:var(--lime)}1%{fill:currentColor}}
.logo:hover .lg-d,.logo:focus-visible .lg-d{fill:var(--lime);animation:none}
html.still .px-logo .lg-d{animation:none}
/* style L: nav links. A lime block cursor (the eyebrow's) sits before the link you point at or focus and slides between
   links in 6 pixel steps (180 ms); the label goes white and scrambles through glyphs, resolving left to right (240 ms).
   It hides when the pointer and focus leave the row. Reduced motion: the cursor jumps, nothing scrambles. */
.links{position:relative;display:flex;gap:32px;font:400 13px/1 var(--mono);color:var(--fg2)}
.links a{position:relative;padding:8px 0}
.links a:hover,.links a:focus-visible{color:var(--fg)}
.links a:focus-visible{outline:0}
.ncur{position:absolute;left:0;top:50%;width:8px;height:14px;margin-top:-7px;background:var(--lime);opacity:0;pointer-events:none;
  transition:transform .18s steps(6,end);will-change:transform}
.links.nc-on .ncur{opacity:1}
.links.nc-jump .ncur{transition:none}
.links.nc-rest .ncur{animation:blink 1.06s steps(1) .5s infinite}
.nav-end{justify-self:end;display:flex;align-items:center;gap:10px}
.dash{position:relative;z-index:1;height:12px;overflow:hidden;white-space:nowrap;font:400 11px/12px var(--mono);letter-spacing:0;color:var(--faint);user-select:none;-webkit-user-select:none}
.dash{background:linear-gradient(to right,transparent 1px,#1B1B1B 2px,#1B1B1B 4.5px,transparent 5.5px) 0 6px/6.6px 1px repeat-x}   /* style Q (joiner): the rule's 11 px dashes are drawn, not typed (Lighthouse counted them as small text): JetBrains Mono's '-' at 11 px, its stroke as rendered (#1B1B1B, x 1.5 to 5, every 6.6 px, row 6) */
/* style M: buttons (the owner: "I want cooler hover, like active state for buttons"). One language for "Talk to us" (nav and
   hero), "Send message", "See our work" and "Read the case":
   - hover / keyboard focus on a solid button: it lifts off the page in 3 pixel steps (120 ms) onto a stepped white
     extrusion, acid dissolves in over it pixel by pixel (a dither, left first, 8 frames in 180 ms: data-px 1..8, masks made
     by the script), the label glitch-shifts twice with an acid / white ghost (180 ms) and the arrow nudges.
   - pressed: it sinks flat (1 px below rest) with a pixel inset shadow, and an acid pixel ring flashes out of it (220 ms).
   - the text actions ("See our work", "Read the case"): an acid block wipes in behind the label in 6 pixel columns, the
     label goes ink and glitch-shifts, the arrow nudges; pressed, the block sinks 1 px and flashes white.
   Reduced motion: the end states only (lifted and acid; the block), no glitch, no flash. */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 20px;background:var(--fg);color:var(--bg);border:0;font:600 14px/1 var(--mono);letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  --lf:3px;transition:transform .12s steps(3,end),box-shadow .12s steps(3,end)}
.btn::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;background:var(--lime);opacity:0;pointer-events:none;
  -webkit-mask-position:0 50%;mask-position:0 50%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:var(--dmw,224px) var(--dmh,56px);mask-size:var(--dmw,224px) var(--dmh,56px)}
.btn[data-px]::before{opacity:1}
.btn[data-px="1"]::before{-webkit-mask-image:var(--dm1);mask-image:var(--dm1)}.btn[data-px="2"]::before{-webkit-mask-image:var(--dm2);mask-image:var(--dm2)}
.btn[data-px="3"]::before{-webkit-mask-image:var(--dm3);mask-image:var(--dm3)}.btn[data-px="4"]::before{-webkit-mask-image:var(--dm4);mask-image:var(--dm4)}
.btn[data-px="5"]::before{-webkit-mask-image:var(--dm5);mask-image:var(--dm5)}.btn[data-px="6"]::before{-webkit-mask-image:var(--dm6);mask-image:var(--dm6)}
.btn[data-px="7"]::before{-webkit-mask-image:var(--dm7);mask-image:var(--dm7)}
.btn:hover,.btn:focus-visible{transform:translate(calc(var(--lf) * -1),calc(var(--lf) * -1));
  box-shadow:1px 1px 0 #EDEDED,2px 2px 0 #EDEDED,3px 3px 0 #EDEDED,4px 4px 0 #050505}
.btn.sm{height:36px;padding:0 14px;font-size:13px;--lf:2px}
.btn.sm:hover,.btn.sm:focus-visible{box-shadow:1px 1px 0 #EDEDED,2px 2px 0 #EDEDED,3px 3px 0 #050505}
.btn:active,.btn.prs{transform:translate(1px,1px);box-shadow:inset 2px 2px 0 rgba(5,5,5,.42),inset -1px -1px 0 rgba(255,255,255,.5);transition:none}
.btn::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;opacity:0}
.btn.fl::after{animation:btnFl .22s steps(4,end) forwards}
@keyframes btnFl{0%{opacity:1;box-shadow:0 0 0 2px var(--lime);left:-2px;top:-2px;right:-2px;bottom:-2px}
  50%{opacity:1;box-shadow:0 0 0 2px var(--lime);left:-6px;top:-6px;right:-6px;bottom:-6px}
  100%{opacity:0;box-shadow:0 0 0 2px var(--lime);left:-10px;top:-10px;right:-10px;bottom:-10px}}
.btn:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
.bl{display:inline-block}
.gl .bl{animation:btnGl .18s steps(1,end)}
@keyframes btnGl{0%{transform:translateX(-3px);text-shadow:3px 0 0 var(--lime),-2px 0 0 #FFFFFF}
  30%{transform:translateX(2px);text-shadow:-3px 0 0 var(--lime),2px 0 0 #FFFFFF}
  60%{transform:translateX(-1px);text-shadow:2px 0 0 var(--lime)}100%{transform:none;text-shadow:none}}
.ar{display:inline-block;transition:transform .15s steps(3,end)}
.btn:hover .ar,.btn:focus-visible .ar,.alt:hover .ar,.alt:focus-visible .ar,.case:hover .more .ar,.case:focus-visible .more .ar,.case.hv .more .ar,.case.on .more .ar{transform:translateX(.6em)}
.menu-btn{display:none;height:36px;padding:0 4px 0 12px;white-space:nowrap;background:transparent;border:0;font:400 13px/1 var(--mono);color:var(--fg);cursor:pointer}
.menu{display:none}
html.menu-open .menu{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:8px var(--pad) 28px}
.menu a{display:flex;gap:14px;align-items:baseline;padding:11px 0;font:400 20px/1.3 var(--mono);color:var(--fg)}
.menu a span{font-size:12px;color:var(--mute)}

/* ---------- shared: D3's labels and headings ---------- */
.label{display:flex;align-items:center;gap:14px;margin-bottom:26px;white-space:nowrap;overflow:hidden}
.label b{color:var(--fg);font-weight:600}
.label .rl{flex:1;min-width:24px;overflow:hidden;color:var(--dim);letter-spacing:0}
h2{font:600 clamp(30px,3vw,50px)/1.06 var(--mono);letter-spacing:-.055em;text-wrap:balance}
.gh{position:relative}
.go{display:block}
.gb{position:absolute;left:0;top:0;width:100%;height:100%;display:block;visibility:hidden;pointer-events:none;text-shadow:-2px 0 0 var(--lime)}
.gb::after{content:"";position:absolute;left:var(--gx,0);width:var(--gw,40%);top:var(--gt,0);height:2px;background:var(--lime)}
.anchor{position:relative;height:100%;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
html.dragging,html.dragging .anchor{cursor:grabbing}
.split{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);column-gap:40px}

/* stickers (M's merch die-cuts; style N: BESIDE the objects): vector die-cuts drawn by the script (a thick paper-white border
   round a rounded shape, the body, the art, a gloss band, an optional peeled corner) with a soft drop shadow; each one sits
   just off its object's silhouette, follows it and stays flat-on (STK_SET in the script) */
.stk{position:absolute;left:0;top:0;display:block;pointer-events:none;font-style:normal;width:calc(var(--c,0) * var(--p) * var(--sk));height:calc(var(--h,0) * var(--p) * var(--sk));
  transform-origin:50% 50%;filter:drop-shadow(0 calc(var(--p) * var(--sk) * .5) calc(var(--p) * var(--sk) * .5) rgba(0,0,0,.6)) drop-shadow(0 calc(var(--p) * var(--sk) * 1.4) calc(var(--p) * var(--sk) * 2) rgba(0,0,0,.42))}
.stk svg{display:block;width:100%;height:100%;overflow:visible}
.stk.s3{opacity:0;will-change:transform,opacity}

/* ---------- hero (D3) ---------- */
.hero{position:relative;height:calc(100vh - var(--nav) - 12px);height:calc(100svh - var(--nav) - 12px);min-height:560px}
.hero .split{height:100%;align-items:center}
.hero-txt{padding-bottom:3vh}
.eyebrow{margin-bottom:26px;color:var(--fg2)}
.eyebrow .pr{color:var(--mute);margin-right:.6em}
h1{font:600 clamp(38px,4.2vw,68px)/1.02 var(--mono);letter-spacing:-.06em;text-wrap:balance}
.sub{margin-top:28px;font-size:16.5px;line-height:1.75;color:var(--fg2);max-width:33em}
.cta{margin-top:38px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.alt{display:inline-flex;align-items:center;gap:12px;font:600 14px/1 var(--mono);color:var(--fg);padding:10px 0}
.u{text-decoration:underline;text-decoration-color:var(--dim);text-decoration-thickness:1px;text-underline-offset:8px}
.case.on .u{text-decoration-color:var(--lime)}
/* style M: "See our work" and a case's "Read the case": an acid block wipes in behind label and arrow in 6 pixel columns
   (150 ms), the label goes ink and glitch-shifts (.gl), the arrow nudges; pressed: the block sinks 1 px and flashes white
   (.fl, 160 ms). Keyboard focus shows the same block (it is the focus indicator). */
.alt,.case .more{position:relative;isolation:isolate;transition:color 0s .03s}
.alt::before,.case .more::before{content:"";position:absolute;left:-10px;right:-10px;top:2px;bottom:2px;z-index:-1;background:var(--lime);pointer-events:none;
  clip-path:inset(0 100% 0 0);transition:clip-path .15s steps(6,end)}
.case .more::before{top:-5px;bottom:-5px}
.alt:hover,.alt:focus-visible,.cases .case:hover .more,.cases .case:focus-visible .more,.cases .case.hv .more{color:var(--ink)}
.alt:hover::before,.alt:focus-visible::before,.case:hover .more::before,.case:focus-visible .more::before,.case.hv .more::before{clip-path:inset(0 0 0 0)}
.alt:hover .u,.alt:focus-visible .u,.case:hover .u,.case:focus-visible .u,.case.hv .u{text-decoration-color:transparent}
.alt:active::before,.alt.prs::before{transform:translateY(1px);box-shadow:inset 2px 2px 0 rgba(5,5,5,.3)}
.alt:active,.alt.prs{transform:translateY(1px)}
.alt.fl::before,.case.fl .more::before{animation:altFl .16s steps(2,end)}
@keyframes altFl{0%{background:#FFFFFF}100%{background:#FFFFFF}}
.alt:focus-visible{outline:0}
/* the HUD readout (D3's), and the material switch where D3 had its scene switch */
.hud{position:fixed;z-index:2;right:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));bottom:16px;display:flex;gap:26px;white-space:nowrap;pointer-events:none;color:#686868}
.hud b{font-weight:400;color:var(--fg2)}
.hsw{position:absolute;left:0;right:0;bottom:18px;z-index:3;pointer-events:none}
.hsw-in{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;pointer-events:auto}
.hsw .pr{color:#7A7A7A;margin-right:8px}   /* style Q (joiner): was #5E5E5E (3.1:1); 4.75:1 on --bg */
.hsw button{pointer-events:auto;background:transparent;border:0;padding:6px 8px;font:400 12.5px/1 var(--mono);letter-spacing:.02em;color:var(--mute);cursor:pointer;white-space:nowrap}   /* style Q (joiner): was #6A6A6A (3.8:1); --mute 5.0:1 */
.hsw button:hover{color:var(--fg)}
.hsw button[aria-pressed=true]{color:var(--fg)}
.hsw button[aria-pressed=true]::before{content:"[";margin-right:.3em;color:var(--fg2)}
.hsw button[aria-pressed=true]::after{content:"]";margin-left:.3em;color:var(--fg2)}
.hsw button:focus-visible{outline:1px solid var(--lime);outline-offset:2px}
/* the material chips, a review aid: > mat ascii dots (style M: the hero 1 2 3 chips are gone) */
.hsw-g{display:inline-flex;align-items:center;gap:0;white-space:nowrap}
.hsw-g+.hsw-g::before{content:"·";color:#3A3A3A;margin:0 12px 0 8px}
.hsw-g button{padding:6px 6px}
#contact .split>.col{grid-column:1;grid-row:1} #contact .split>.anchor{grid-column:2;grid-row:1}

/* ---------- style M: every section from 01 to contact is pinned (desktop): the section is taller than the screen, its
   .pin (copy + scene window) sticks under the nav while you scroll through it (ST.pq in the script is the pin progress).
   Style N (the owner: "people can scroll too fast ... they wouldn't see the whole animation"): lock and play on entry. The
   page holds on arrival and the script drives the scroll through the pin by itself (the pin is the play's track: the copy
   and the scene stay put, the story plays), so the pins are short now. Pin lengths (section height - one screen): 01 60vh,
   02 60vh, 03 50vh, 04 120vh (40vh a case), 05 50vh, 06 50vh, contact 50vh. A pin whose copy is taller than the screen sticks
   with its bottom on the screen's bottom instead (the script sets its top), so nothing is ever cut off. ---------- */
.ap{position:relative;height:160vh}
.pin{position:sticky;top:var(--nav);min-height:calc(100vh - var(--nav));min-height:calc(100svh - var(--nav));align-items:center}
.pin>.anchor{height:calc(100vh - var(--nav));height:calc(100svh - var(--nav));align-self:end}
#fintech{height:150vh} #services{height:150vh} #why{height:150vh} #contact{height:150vh}
.col{min-width:0;position:relative}
.lede{margin-top:24px;font-size:15.5px;line-height:1.78;color:var(--fg2);max-width:37em}
.bar{margin-top:30px;display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--mute);cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;white-space:nowrap;padding:6px 0}
.bar .tk2{color:var(--fg);letter-spacing:0}
.bar .tk2 i{font-style:normal;color:var(--dim)}
.bar .tk2 em{font-style:normal;color:var(--lime)}
.tn{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;max-width:40em}
.tn h3{font:600 12.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;color:var(--fg2);transition:color .35s}
.tn li{display:flex;gap:.7em;font-size:14.5px;line-height:1.8;color:var(--fg2);transition:color .35s}
.tn li::before{flex:none}
.then li::before{content:"-"}
.now li::before{content:"+"}
.ap[data-ph=then] .then h3,.ap[data-ph=then] .then li,.ap[data-ph=now] .now h3,.ap[data-ph=now] .now li{color:var(--fg)}
.ap[data-ph=then] .now h3,.ap[data-ph=then] .now li,.ap[data-ph=now] .then h3,.ap[data-ph=now] .then li{color:var(--mute)}

/* ---------- 02 how we work: pinned; the maze is solved one stretch per step, the one you read lights ---------- */
.hw{position:relative;height:160vh}
.steps{margin-top:30px;max-width:40em;counter-reset:st}
.step{display:grid;grid-template-columns:3.2em minmax(0,1fr);column-gap:8px;padding:14px 0 15px;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .ix{font-size:12.5px;line-height:27px;color:var(--dim);transition:color .3s}
.step p{font-size:15px;line-height:1.7;color:var(--mute);transition:color .3s}
.step b{display:block;font:600 21px/27px var(--mono);letter-spacing:-.045em;color:var(--fg2);margin-bottom:4px;transition:color .3s}
.hw[data-step="0"] .step[data-step="0"] :is(.ix,b),.hw[data-step="1"] .step[data-step="1"] :is(.ix,b),.hw[data-step="2"] .step[data-step="2"] :is(.ix,b){color:var(--fg)}
.hw[data-step="0"] .step[data-step="0"] p,.hw[data-step="1"] .step[data-step="1"] p,.hw[data-step="2"] .step[data-step="2"] p{color:var(--fg2)}

/* ---------- 03, 05, 06, contact: pinned like 01 (style M; before, only the scene's window stuck while the copy scrolled) ---------- */
.sec{position:relative}
.sec .col{align-self:center;padding:28px 0}
.ls{margin-top:26px;max-width:40em}
.ls li{display:flex;gap:.8em;font-size:14.5px;line-height:1.85;color:var(--fg)}
.ls li::before{content:"+";flex:none;color:var(--mute)}
.rows{margin-top:24px;max-width:40em}
.rw{display:grid;grid-template-columns:3.2em minmax(0,1fr);column-gap:8px;padding:13px 0 14px;border-bottom:1px solid var(--line)}
.rw .ix{font-size:12.5px;line-height:26px;color:var(--mute)}
.rw b{display:block;font:600 19px/26px var(--mono);letter-spacing:-.04em;color:var(--fg);margin-bottom:3px}
.rw p{font-size:15px;line-height:1.7;color:var(--fg2)}
.rows.top{border-top:1px solid var(--line)}
/* style O (the owner, on N's 05: "the items are nested under too many nested items"): one flat list of six equal rows, in the
   order of the six columns (the four services, then People and Growing businesses with their one-liners); copy unchanged.
   01-06 count the columns left to right; pointing at a row lights its column (svlLight in the script). */
.svl{margin-top:28px;max-width:40em;border-top:1px solid var(--line)}
.svl li{display:grid;grid-template-columns:2.4em minmax(0,1fr);align-items:start;padding:10px 0 11px;border-bottom:1px solid var(--line)}
.svl .ix{font:400 12.5px/23px var(--mono);letter-spacing:.02em;color:var(--mute);transition:color .15s}
.svl p{font-size:14px;line-height:23px;color:var(--fg2)}
.svl b{font:600 15.5px/23px var(--mono);letter-spacing:-.03em;color:var(--fg)}
.svl .ds{display:block;margin-top:1px;line-height:1.6}
.svl li.on .ix{color:var(--lime)}
@media (min-width:861px) and (max-height:760px){ .svl{margin-top:18px} .svl li{padding:5px 0 6px} .svl .ds{margin-top:0;font-size:13px;line-height:19px} }   /* short windows: the pinned column still fits under the nav */
@media (min-width:861px) and (max-height:660px){ .svl{margin-top:14px} .svl li{padding:3px 0 4px} }

/* contact (v26's form, in D3's mono) */
.ct .sub{margin-top:22px}
.form{margin-top:34px;max-width:36em;display:flex;flex-direction:column;gap:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}
.f label{display:block;margin-bottom:6px;font-size:12.5px;letter-spacing:.02em;color:var(--fg2)}
.f input,.f textarea{display:block;width:100%;margin:0;background:transparent;border:0;border-bottom:1px solid var(--mute);border-radius:0;color:var(--fg);font:400 16px/1.5 var(--mono);padding:6px 0 8px;caret-color:var(--lime);-webkit-appearance:none;appearance:none}
.f textarea{resize:none;overflow:hidden;min-height:3.6em}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--fg);box-shadow:0 2px 0 var(--fg)}
.f:focus-within label{color:var(--fg)}
.f [aria-invalid="true"]{border-bottom-color:var(--fg)}
.f input:-webkit-autofill{-webkit-text-fill-color:var(--fg);box-shadow:0 0 0 60px var(--bg) inset}
.err{margin-top:8px;font-size:12.5px;line-height:1.5;letter-spacing:.02em;color:var(--fg)}
.err::before{content:"! ";color:var(--lime)}
.err[hidden]{display:none}
.form .btn{align-self:flex-start}
.status{font-size:14px;line-height:1.6;color:var(--fg)}
.status:empty{display:none}
.status span{display:block;color:var(--fg2)}
.direct{margin-top:30px;display:flex;flex-wrap:wrap;gap:6px 28px;font-size:14px;color:var(--fg2)}
.direct a:hover{color:var(--fg)}
.direct .u{text-underline-offset:6px}

/* footer: the LED / ASCII ONEROOF board (footer.js), then one line of links */
.ft{position:relative;z-index:1;padding:96px 0 0}
.led{position:relative;width:100%;aspect-ratio:42/8.4}
.led canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.ft-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:40px;padding:22px 0 30px;border-top:1px solid var(--line)}
.ft-nav{display:flex;gap:28px;font-size:13px;color:var(--fg2)}
.ft-nav a:hover{color:var(--fg)}
.ft .term{color:var(--mute)}
.hud{transition:opacity .25s}
.hud.off{opacity:0}

/* ---------- 04 work: pinned; one big object for the case you hover, focus or scroll to ---------- */
.wk{position:relative;height:220vh}
.cases{margin-top:30px;max-width:40em}
.case{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;column-gap:8px;padding:16px 0 18px;border-top:1px solid var(--line);color:var(--mute);outline-offset:6px}
.case-row:last-child .case{border-bottom:1px solid var(--line)}
.case .ix{font-size:12.5px;line-height:28px;color:var(--dim)}
.case h3{font:600 24px/28px var(--mono);letter-spacing:-.045em;color:var(--fg2);transition:color .25s}
.case .tag{font-size:12.5px;line-height:28px;white-space:nowrap}
.case .ln{grid-column:2/4;margin-top:6px;font-size:15px;line-height:1.65;color:var(--mute);transition:color .25s}
.case .more{grid-column:2/4;margin-top:12px;display:inline-flex;align-items:center;gap:10px;font:600 13.5px/1 var(--mono);color:var(--fg2);padding:4px 0;width:max-content}
/* style L: the case row, in the nav's language. Hover / focus: the row steps 10 px right (4 steps, 160 ms), a lime block bar
   grows down its left edge (6 steps, 240 ms), a pixel underline draws along its foot (16 steps, 260 ms), the name and
   number go acid and the name scrambles and resolves, "open ./case" types in, and the 3D object jumps (ST.hover / focus,
   window.__caseHover). Reduced motion: the same highlight, static. */
.case{position:relative;transition:transform .16s steps(4,end)}
.case::before{content:"";position:absolute;left:-16px;top:12px;bottom:14px;width:4px;background:var(--lime);clip-path:inset(0 0 100% 0);transition:clip-path .24s steps(6,end)}
.case::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:repeating-linear-gradient(90deg,var(--lime) 0 2px,transparent 2px 4px);clip-path:inset(0 100% 0 0);transition:clip-path .26s steps(16,end)}
.case .cmd{position:absolute;right:0;bottom:19px;font:500 12.5px/1 var(--mono);color:var(--lime);white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.case .cmd i{display:inline-block;width:.55em;height:1em;margin-left:2px;background:var(--lime);vertical-align:-.15em;animation:cmdcur 1s steps(1) infinite}
@keyframes cmdcur{50%{opacity:0}}
.case:hover,.case:focus-visible,.case.hv{transform:translateX(10px)}
.case:hover::before,.case:focus-visible::before,.case.hv::before{clip-path:inset(0 0 0 0)}
.case:hover::after,.case:focus-visible::after,.case.hv::after{clip-path:inset(0 0 0 0)}
.case:hover .cmd,.case:focus-visible .cmd,.case.hv .cmd{opacity:1}
.cases .case:hover h3,.cases .case:focus-visible h3,.cases .case.hv h3,.cases .case:hover .ix,.cases .case:focus-visible .ix,.cases .case.hv .ix{color:var(--lime)}
.case:focus-visible{outline:0}
.case:active,.case.prs{transform:translate(10px,2px);transition:none}
.case.fl::before{animation:caseFl .2s steps(2,end)}
@keyframes caseFl{0%{width:10px;left:-22px}100%{width:4px;left:-16px}}
@media (prefers-reduced-motion:reduce){.case,.case::before,.case::after{transition:none}.case:hover,.case:focus-visible,.case.hv,.case:active{transform:none}.case .cmd i{animation:none}
  .ncur,.btn,.ar,.alt::before,.case .more::before{transition:none}.links.nc-rest .ncur,.px-logo .lg-d,.gl .bl,.btn.fl::after,.alt.fl::before,.case.fl .more::before,.case.fl::before{animation:none}}
.case.on h3,.case.on .more{color:var(--fg)}
.case.on .ln{color:var(--fg2)}
.case.on .ix{color:var(--fg)}
.win{display:none}

/* ---------- responsive (D3's) ---------- */
@media (max-width:1100px){ :root{--pad:40px} .links{gap:22px} .split{column-gap:28px} }
@media (max-width:860px){
  :root{--pad:20px;--nav:60px;--px:3px;--sk:.62}
  .nav{grid-template-columns:1fr auto}
  .links{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .split{display:block}
  .hero{height:auto;min-height:0;padding-top:36px}
  .hero-txt{padding-bottom:0}
  h1{font-size:clamp(34px,10vw,46px)}
  .eyebrow{margin-bottom:20px}
  .sub{font-size:15.5px;margin-top:20px}
  .cta{margin-top:28px;gap:18px}
  .cta .btn{width:100%;justify-content:space-between}
  .hero .anchor{height:min(96vw,380px);margin-top:14px}
  .hud{display:none}
  .hsw{position:static;margin-top:6px}
  .hsw-in{gap:2px;margin-left:-6px}
  .hsw button{padding:8px 6px;font-size:12px}
  .ap,.wk,.hw,.sec,#fintech,#services,#why,#contact{height:auto}
  .ap,.wk,.hw{padding:64px 0 36px}
  .sec{padding:64px 0 36px}
  .pin>.anchor{align-self:stretch}
  .sec .anchor{position:relative;top:0;align-self:stretch;height:min(96vw,380px);margin:4px 0 6px}
  .col>*{order:6}
  .col>.label{order:1} .col>h2{order:2} .col>.lede{order:3} .pin>.anchor,.sec .split>.anchor{order:4}
  .sec .split{display:flex;flex-direction:column}
  .svl{margin-top:24px} .svl li{grid-template-columns:2.2em minmax(0,1fr);padding:9px 0 10px} .svl .ix{font-size:12px} .svl b{font-size:15px}
  .frow{grid-template-columns:1fr;gap:24px}
  .form .btn{align-self:stretch;justify-content:space-between}
  .ft{padding-top:56px}
  .ft-row{flex-direction:column;align-items:flex-start}
  .pin{position:static;height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch}
  .ap .bar{align-self:flex-start}
  .col{display:contents}
  .ap .label{order:1} .ap h2{order:2} .ap .lede{order:3} .ap .anchor{order:4;height:min(118vw,460px);margin-top:10px} .ap .bar{order:5;margin-top:4px} .ap .tn{order:6}
  .hw .anchor{height:min(100vw,400px);margin-top:10px}
  .tn{column-gap:18px}
  .tn li{font-size:14px}
  .wk .pin>.anchor{display:none}
  .win{display:block;height:min(84vw,330px);margin-top:8px}
  .cases{margin-top:16px}
  .case{grid-template-columns:2.4em minmax(0,1fr) auto;border-top:0;padding-top:4px}
  .case-row:last-child .case{border-bottom:0}
  .case h3{font-size:22px}
}
@media (prefers-contrast:more){ :root{--fg2:#C4C4C4;--mute:#ABABAB} }
@media (forced-colors:active){ .stage,.wall,.crt,.tk,.stk-layer,.stk{display:none} }

/* ================= style Q: shared additions ================= */
/* phones: each scene window has its own canvas (the engine draws the object into the window you look at, the others keep
   their last frame) and its own stickers */
.acv{display:none}
html.nm .acv{display:block;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;will-change:transform}
html.nm .anchor .stk{z-index:1}
/* the review bar's draft-copy list (a review aid; lines from the page's `draft`) */
.draft-ls{position:absolute;left:var(--pad);bottom:calc(100% + 6px);z-index:4;max-width:min(44em,calc(100vw - 2 * var(--pad)));max-height:46vh;overflow:auto;
  padding:12px 16px;background:var(--bg);border:1px solid #2A2A2A;color:var(--fg2);pointer-events:auto}
.draft-ls[hidden]{display:none}
.draft-ls p{color:var(--mute);margin-bottom:6px}
.draft-ls ol{list-style:decimal;padding-left:1.6em}
.draft-ls li{margin:3px 0}
html.show-draft [data-draft]{outline:1px dashed var(--mute);outline-offset:4px}
@media (max-width:860px){ .draft-ls{position:static;margin:8px var(--pad) 0} }

/* ---------- style Q: the inner pages' template (RULES.md). Same language as the home: a pinned section is .sec.pq (desktop:
   150vh, its .pin sticks under the nav while ST.pq plays; phones: flow), a plain flow section is .flow ---------- */
.sec.pq{height:150vh}
.sec.pq.pq-l{height:180vh}                                         /* a longer play (more than one stop) */
.flow{position:relative;z-index:1;padding:96px 0 40px}
.phero .eyebrow{margin-bottom:22px}
.back{display:inline-flex;align-items:center;gap:10px;font:600 13.5px/1 var(--mono);color:var(--fg2);padding:8px 0}
.back .ar{transition:transform .15s steps(3,end)}
.back:hover,.back:focus-visible{color:var(--fg)}
.back:hover .ar,.back:focus-visible .ar{transform:translateX(-.5em)}
.tags{margin-top:18px;color:var(--fg2)}
.tags span+span::before{content:"\00b7";margin:0 .6em;color:var(--mute)}
.pts{margin-top:24px;max-width:40em}
.pts li{display:flex;gap:.8em;font-size:15px;line-height:1.75;color:var(--fg);padding:3px 0}
.pts li::before{content:"+";flex:none;color:var(--mute)}
.vgrid{margin-top:34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.vf{margin:0;border:1px solid #2A2A2A;background:var(--bg)}
.vf img,.vf canvas{display:block;width:100%;height:auto}
.vf-ph{aspect-ratio:16/10;display:flex;align-items:flex-end;padding:14px 16px;background:repeating-linear-gradient(180deg,#0D0D0D 0 1px,transparent 1px 6px)}
.vf figcaption{padding:10px 14px 12px;border-top:1px solid #2A2A2A;font-size:12.5px;line-height:1.6;color:var(--mute)}
.nx-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.nx-case{display:inline-flex;flex-direction:column;gap:6px;color:var(--fg)}
.nx-case .nx-name{font:600 clamp(30px,3vw,50px)/1.06 var(--mono);letter-spacing:-.055em}
.nx-case .ar{display:inline-block;margin-left:.3em;transition:transform .15s steps(3,end)}
.nx-case:hover .ar,.nx-case:focus-visible .ar{transform:translateX(.4em)}
.nx-case:hover .nx-name,.nx-case:focus-visible .nx-name{color:var(--hi)}
.prose{max-width:40em}
.prose h2{margin:44px 0 14px;font-size:clamp(22px,2vw,30px)}
.prose p,.prose li{font-size:15px;line-height:1.78;color:var(--fg2)}
.prose p+p{margin-top:12px}
.prose ul{margin-top:10px}
.prose li{display:flex;gap:.8em}
.prose li::before{content:"+";flex:none;color:var(--mute)}
.prose a{text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:5px;color:var(--fg)}
.links-big{margin-top:30px;display:flex;flex-wrap:wrap;gap:20px 32px}
@media (max-width:860px){
  .sec.pq,.sec.pq.pq-l{height:auto}
  .flow{padding:64px 0 28px}
  .vgrid{grid-template-columns:1fr;gap:18px}
  .nx-in{flex-direction:column;align-items:flex-start}
  .nx-in .btn{width:100%;justify-content:space-between}
}

/* inner pages: body copy at 16 px or more (the home keeps P's sizes: see the foundation handoff) */
body:not([data-page="home"]) :is(.lede,.sub,.pts li,.rw p,.prose p,.prose li){font-size:16px}
/* tap targets: 44 px on phones (the boxes grow, the looks stay: centred, same type) */
@media (max-width:860px){
  .logo,.back,.alt,.nx-case{min-height:44px}
  .btn.sm,.menu-btn{height:44px}
  .ft-nav{gap:8px 18px;flex-wrap:wrap}
  .ft-nav a,.direct a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .hsw button{min-height:44px;min-width:44px}
}

/* case pages: pull line above Talk to us (Q3) */
.nx-cta{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.nx-pull{margin:0;font-size:16px;line-height:1.6;color:var(--fg2);text-align:right;max-width:24em}
@media (max-width:860px){ .nx-cta{align-items:stretch;width:100%} .nx-pull{text-align:left} }