/* Journey skin for the existing pages.
   Loaded last, it restyles the markup that is already there: same sections, same copy, the journey page's look.
   Black stage with a faint grid, heavy uppercase headings, outline section titles, a white panel for lists,
   square outlined buttons in the blue accent, and the journey-style top links instead of a bar. */
:root{--j-bg:#050506;--j-ink:#e6e6ec;--j-mut:#b4b5c0;--j-line:#2a2b33;--j-paper:#f1f1f4;--j-dark:#0b0b0e;--j-acc:#7d95ff;--j-warm:#ffb38a;
--j-big:"Arial Black","Helvetica Neue",Impact,Haettenschweiler,"Arial Narrow Bold",system-ui,sans-serif;
--j-txt:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif}
html{background:var(--j-bg)}
body{background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px,var(--j-bg)!important;color:var(--j-ink);font-family:var(--j-txt)}
.rail,.num{display:none!important}

/* ---- top links, journey style: no bar ---- */
nav:has(#nvb){position:absolute;top:0;left:0;right:0;height:auto;padding:18px 4vw 0;background:none;border:0;gap:12px}
nav:has(#nvb) .brand{font:800 11.5px/1 var(--j-txt);letter-spacing:.09em;text-transform:uppercase;min-height:44px}
nav:has(#nvb) .brand{gap:9px}
nav:has(#nvb) .brand img{display:block;width:24px;height:24px;border-radius:5px}
nav:has(#nvb) .brand::after{display:none}
nav:has(#nvb) .nl{flex:1;justify-content:space-around;gap:10px;font:800 11.5px/1 var(--j-txt)!important;letter-spacing:.09em;text-transform:uppercase;color:var(--j-ink)}
nav:has(#nvb) .nl a{min-height:44px;display:inline-flex;align-items:center;padding:0}
nav:has(#nvb) .nl a::before,nav:has(#nvb) .nl a::after{content:none}
nav:has(#nvb) .nl a:hover{text-decoration:underline;text-underline-offset:5px;color:#fff}
nav:has(#nvb) .pill{background:var(--j-bg);color:#fff;border:2px solid var(--j-acc);border-radius:10px;font:800 11.5px/1 var(--j-txt);letter-spacing:.09em;padding:12px 16px}
nav:has(#nvb) .pill:hover{background:var(--j-acc);color:#05060a}
#nvb{border:2px solid var(--j-ink);border-radius:10px;background:var(--j-bg)}
@media(max-width:820px){
#nvm{top:0;left:0;right:0;bottom:0;z-index:58;padding:86px 6vw 30px;background:var(--j-bg);border:0;overflow:auto}
#nvm a{padding:14px 0;border:0;border-bottom:1px solid var(--j-line);font:900 clamp(26px,8vw,40px)/1 var(--j-big);letter-spacing:-.03em;text-transform:uppercase;color:var(--j-ink)}
#nvm a::before{content:none!important}
#nvm a.go{margin:26px 0 0;padding:16px;border:2px solid var(--j-acc);border-radius:10px;background:var(--j-bg);color:#fff;font:800 12.5px/1 var(--j-txt);letter-spacing:.09em;text-align:center}}

/* ---- type ---- */
.t{font-family:var(--j-big);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;max-width:none!important}
h1.t{font-size:clamp(34px,6.7vw,104px);color:#d9d9e0}
h2.t{font-size:clamp(34px,6.4vw,104px);color:transparent;-webkit-text-stroke:1.5px var(--j-ink)}
.tag,.k,.hfoot{font:800 11.5px/1.5 var(--j-txt)!important;letter-spacing:.09em!important;text-transform:uppercase;color:var(--j-mut)!important}
.p{font:600 clamp(15px,1.4vw,18px)/1.6 var(--j-txt);color:var(--j-mut);max-width:52ch}
.hfoot a{color:var(--j-ink)}

/* ---- buttons ---- */
.btn{border:2px solid var(--j-acc);border-radius:10px;background:var(--j-bg);color:#fff;font:800 12px/1 var(--j-txt);letter-spacing:.09em;text-transform:uppercase;min-height:46px;padding:0 22px;display:inline-flex;align-items:center;box-shadow:none}
.btn:hover{background:var(--j-acc);color:#05060a;transform:none;box-shadow:none}
.btn.gh{border-color:var(--j-ink)}.btn.gh:hover{background:var(--j-ink)}

/* ---- the scrolling strips ---- */
.band{background:none!important;border-top:1px solid var(--j-line);border-bottom:1px solid var(--j-line);padding:16px 0}
.band .run,.band .run span{font-family:var(--j-big)!important;font-weight:900;font-size:clamp(20px,3.2vw,44px);letter-spacing:-.02em;text-transform:uppercase;color:transparent!important;-webkit-text-stroke:1.2px var(--j-ink)}

/* ---- cards in general: outlined, on the stage ---- */
.sc,.byd,.jt,.hi,.wc,.os,.hfl1-c{background:var(--j-bg)!important;border:1.5px solid var(--j-ink)!important;border-radius:clamp(16px,2vw,26px)!important;box-shadow:none!important}
.sc:hover,.byd:hover,.jt:hover,.wc:hover{border-color:var(--j-acc)!important;transform:none}
.sc h3,.wc h3{font:800 20px/1.25 var(--j-txt);color:var(--j-ink)}
.sc p,.wc p{color:var(--j-mut)}
.st,.fp,.wc .tab{font:800 10.5px/1.4 var(--j-txt)!important;letter-spacing:.09em;text-transform:uppercase}
.fp{color:var(--j-ink)}

/* ---- services: the white panel with a numbered list ---- */
#services{background:var(--j-paper);color:var(--j-dark);border-radius:clamp(20px,2.6vw,36px);margin:6vw 3vw;padding:clamp(34px,5.4vw,84px) 0}
#services h2.t{-webkit-text-stroke-color:var(--j-dark);text-align:center}
#services .k{color:#5b5c66!important;text-align:center}
#services .p{color:#33343c;margin-left:auto;margin-right:auto;text-align:center}
#services .sg{display:block;counter-reset:sv;margin-top:clamp(20px,3vw,44px)}
#services .sc{counter-increment:sv;display:grid;grid-template-columns:clamp(64px,9vw,130px) 1fr;column-gap:20px;align-items:start;padding:clamp(16px,2vw,26px) 0!important;background:none!important;border:0!important;border-bottom:1px solid #d3d3da!important;border-radius:0!important}
#services .sc::before{content:counter(sv,decimal-leading-zero);grid-row:1/5;font:900 clamp(34px,5vw,68px)/.9 var(--j-big);letter-spacing:-.04em;color:var(--j-dark)}
#services .sc>*{grid-column:2}
#services .sc h3{color:var(--j-dark);font-size:clamp(19px,1.8vw,24px)}
#services .sc p{color:#33343c;max-width:62ch}
#services .st{color:#5b5c66!important}
#services .fp{color:var(--j-dark);margin-top:8px}
#services .cta{justify-content:center}
#services .btn{background:var(--j-dark);border-color:var(--j-dark)}#services .btn:hover{background:var(--j-acc);color:var(--j-dark)}

/* ---- light sections become the journey white panel (their text was written for a light ground) ---- */
.sec.paper{background:var(--j-paper)!important;color:var(--j-dark)!important;border-radius:clamp(20px,2.6vw,36px);margin:6vw 3vw}
.sec.paper h2.t{-webkit-text-stroke-color:var(--j-dark)}
.sec.paper .k{color:#5b5c66!important;border-bottom-color:#d3d3da!important}
.sec.paper .p{color:#33343c}
.sec.paper .btn,.sec.paper .btn.gh{background:var(--j-dark);border-color:var(--j-dark);color:#fff!important}
.sec.paper .btn:hover,.sec.paper .btn.gh:hover{background:var(--j-acc);color:var(--j-dark)!important}
.wc{padding:clamp(18px,2.2vw,28px)}
.os{overflow:hidden}

/* ---- the blue booking box becomes the white "your move" panel ---- */
.book{background:var(--j-paper)!important;color:var(--j-dark)!important;border-radius:clamp(20px,2.6vw,36px)!important}
.book h3{font:900 clamp(28px,4.4vw,64px)/.92 var(--j-big);letter-spacing:-.035em;text-transform:uppercase;color:var(--j-dark)}
.book p{color:#33343c}.book .who{color:var(--j-dark)}
.book .btn{background:var(--j-dark);border-color:var(--j-dark);color:#fff}.book .btn:hover{background:var(--j-acc);color:var(--j-dark)}

/* ---- small things ---- */
.saved{font:800 13px/1.5 var(--j-txt);letter-spacing:.09em;text-transform:uppercase;color:var(--j-ink);margin-top:14px}
.saved b{color:var(--j-warm)}
.bydt,.jh{font-family:var(--j-txt);font-weight:800}

.wfoot,.fr{font-family:var(--j-txt)}
::selection{background:var(--j-acc);color:#05060a}
@media(prefers-reduced-motion:reduce){.btn,.pill{transition:none}}

/* fixes after the first pass */
@media(max-width:620px){.byd{flex-wrap:wrap;row-gap:10px}.byd>*{min-width:0}.bydg{white-space:normal!important;margin-left:0!important}}

/* ---- elements borrowed as ideas from the two reference projects, redrawn here ----
   1. each piece of work shown as a folder you can open (the desktop idea)
   2. small corner labels on a section, like a file header */
.wc{position:relative;padding-top:clamp(74px,7vw,96px)!important}
.wc::before{content:'';position:absolute;left:clamp(18px,2.2vw,28px);top:clamp(18px,2.2vw,26px);width:58px;height:42px;background:linear-gradient(180deg,#9db0ff,var(--j-acc) 55%,#5f78f0);border-radius:5px;clip-path:polygon(0 12%,6% 0,40% 0,48% 16%,100% 16%,100% 100%,0 100%)}
.wc::after{content:'open';position:absolute;right:clamp(18px,2.2vw,28px);top:clamp(24px,2.6vw,32px);padding:7px 11px;border:1.5px solid var(--j-acc);border-radius:8px;font:800 10.5px/1 var(--j-txt);letter-spacing:.09em;text-transform:uppercase;color:var(--j-acc)}
.wc:hover::after{background:var(--j-acc);color:#05060a}
.wc:hover::before{transform:translateY(-3px)}
.wc::before{transition:transform .25s}
#work .k,#flow .k,#ready .k{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;margin-bottom:22px;border-bottom:1px solid var(--j-line)}
#work .k::after{content:'04 folders';white-space:nowrap}#flow .k::after{content:'flagship';white-space:nowrap}#ready .k::after{content:'open to try';white-space:nowrap}
@media(prefers-reduced-motion:reduce){.wc::before{transition:none}}

/* ---- small screens ---- */
.btn{white-space:nowrap}
.t{overflow-wrap:normal;word-break:normal;hyphens:none}
@media(max-width:520px){h1.t,h2.t{font-size:clamp(24px,8.200vw,40px)}.btn{padding:0 16px;font-size:11px;letter-spacing:.06em}}
@media(max-width:360px){.cta{flex-direction:column;align-items:flex-start}}

/* ---- pages that were light all over (About, Contact): same dark stage as everything else ---- */
/* their styles read these variables, so flipping them here turns every element dark at once */
body.jlight{--paper:#050506;--paper2:#0c0d12;--txt:#e6e6ec;--txt2:#b4b5c0;--txt3:#9a9ba6;--rule:#3a3b44}
body.jlight .big,body.jlight h1{color:var(--j-ink)}
body.jlight .btn:not(.gh),body.jlight .go:not(#nvm .go){background:var(--j-ink);border-color:var(--j-ink);color:#05060a}
body.jlight input,body.jlight textarea,body.jlight select{background:#0c0d12;color:var(--j-ink);border:1px solid var(--line2);border-radius:10px}
body.jlight ::placeholder{color:#7b7c88}

.hi.lt{background:var(--j-bg)!important;border-color:var(--j-ink)!important}

/* ---- the product ring at the top of the home page ---- */
.ring{position:relative;height:clamp(250px,38vh,420px);margin:0 calc(50% - 50vw) 0;perspective:1300px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ring:active{cursor:grabbing}
.ring-in{position:absolute;left:50%;top:43%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-10deg) rotateZ(-5deg)}
.rc{position:absolute;width:clamp(100px,10.4vw,150px);aspect-ratio:5/7;left:calc(clamp(100px,10.4vw,150px)/-2);top:calc(clamp(100px,10.4vw,150px)*-.7);transform-style:preserve-3d;opacity:0;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .5s;transition-delay:calc(var(--i)*45ms)}
.ring.go .rc{opacity:1}
.rf,.rb{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.rf{display:flex;flex-direction:column;justify-content:space-between;padding:12px;background:radial-gradient(circle,rgba(0,0,0,.2) 1.1px,transparent 1.5px) 0 0/7px 7px,var(--c,#7d95ff);color:var(--k,#0b0b0e);border:1.5px solid rgba(255,255,255,.55)}
.rb{transform:rotateY(180deg);background:radial-gradient(circle,var(--c,#7d95ff) 1.3px,transparent 1.7px) 0 0/8px 8px,#0c0d12;border:1.5px solid var(--c,#7d95ff)}
.rf i{font:900 clamp(30px,3.6vw,52px)/.9 var(--j-big);font-style:normal;letter-spacing:-.05em;color:transparent;background:radial-gradient(circle,var(--k,#0b0b0e) 1.5px,transparent 1.9px) 0 0/5px 5px;-webkit-background-clip:text;background-clip:text}
.rf b{font:800 clamp(11.5px,1.05vw,15px)/1.15 var(--j-txt);letter-spacing:-.01em}
.rf small{display:block;margin-top:4px;font:800 8.5px/1.2 var(--j-txt);letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.rc:nth-child(4n+2){--c:#ffb38a}.rc:nth-child(4n+3){--c:#f1f1f4}.rc:nth-child(4n+4){--c:#1e3dff;--k:#fff}
.rc:hover .rf,.rc:focus-visible .rf{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.rtabs{display:flex;justify-content:center;gap:0;margin:6px calc(50% - 50vw) 34px;padding:0 4vw;border-bottom:1.5px solid var(--j-ink);overflow-x:auto;scrollbar-width:none}
.rtabs::-webkit-scrollbar{display:none}
.rtabs button{flex:none;min-height:40px;padding:0 22px;margin:0 -5px;border:0;background:var(--j-line);color:var(--j-ink);font:800 11px/1 var(--j-txt);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 100%,0 100%)}
.rtabs button[aria-selected="true"]{background:var(--j-ink);color:var(--j-bg)}
.rtabs button:hover{background:var(--j-acc);color:#05060a}
@media(max-width:760px){.ring{margin-top:70px;perspective:900px}.rtabs{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.rc{transition:none}}

/* nothing inside a section may push it wider than the screen (this was the cause of the sideways scroll on small phones) */
.sec>.wrap{min-width:0}
.og,.ogg,.oc{min-width:0;max-width:100%}
.ocp img{max-width:none}
main img,main canvas:not(.spine),main svg,main table{max-width:100%}

/* ---- old tokens, remapped ---- */
/* Every page was built on these variables. Pointing them at the journey palette converts the old colours everywhere at once. */
:root{--bg:#050506;--panel:#0c0d12;--raise:#17181c;--line:#2a2b33;--line2:#4a4b55;--ink2:#b4b5c0;--ink3:#9a9ba6;--sil:#e6e6ec;--s2:#c9c9d2;--s3:#9a9ba6;
--paper:#f1f1f4;--paper2:#fff;--rule:#d3d3da;--txt:#0b0b0e;--txt2:#33343c;--txt3:#5b5c66;--ultra:#7d95ff;--gold:#ffb38a;--emer:#7d95ff;--verm:#ffb38a}
canvas.spine{display:none!important}
*{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
h1,h2,.big{font-family:var(--j-big);font-weight:900;text-transform:uppercase;letter-spacing:-.035em}
h3,h4{font-family:var(--j-txt);font-weight:800}
.pill,.btn{border-radius:10px!important}

/* ---- where it comes from: two plain cards ---- */
.orgw{margin-top:30px;max-width:780px}
.orgw .k{margin-bottom:12px}
.org{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.org>div{display:flex;gap:16px;align-items:center;padding:14px;border:1.5px solid var(--j-ink);border-radius:18px;background:var(--j-bg)}
.org .plate{flex:none;display:grid;place-items:center;width:128px;height:74px;border-radius:10px;background:#0c0d12;border:1px solid var(--j-line)}
.org .plate.lt{background:#f7f3ec;border-color:#f7f3ec}
.org .plate img{height:34px;width:auto;max-width:none}.org .plate.lt img{height:54px}
.org p{margin:0;max-width:none}
.org q{display:block;font:800 15.5px/1.35 var(--j-txt);color:var(--j-ink);quotes:"\201C" "\201D"}
.org cite{display:block;margin-top:7px;font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-style:normal;color:var(--j-mut)}
@media(max-width:700px){.org{grid-template-columns:1fr}}

/* ---- the ring, now a mid-page section ---- */
.ringsec{padding:6vw 0 2vw!important}
.ringsec .ring{margin-top:0}
.ringsec .rtabs{margin-bottom:0}

/* ---- charts, shapes and motion ---- */
.sigg{display:grid;grid-template-columns:.9fr 1fr 1.25fr;gap:14px;margin-top:30px;align-items:stretch}
.sigg figure{margin:0;padding:22px;border:1.5px solid var(--j-ink);background:var(--j-bg);display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0}
.sg-a{border-radius:999px 999px 26px 26px}            /* an arch */
.sg-b{border-radius:26px 26px 26px 4px}               /* one square corner */
.sg-c{border-radius:4px 60px 26px 26px}               /* a swept corner */
.sigg figcaption{font:600 12px/1.9 var(--j-txt);color:var(--j-mut)}
.sigg figcaption b{display:block;font:800 15px/1.3 var(--j-txt);color:var(--j-ink);margin-bottom:4px}
.sigg figcaption span{display:block}.sigg figcaption i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:8px}
.sg-a svg{width:min(100%,210px);margin:6px auto 0;transform:rotate(-90deg)}
.sg-a .trk{fill:none;stroke:var(--j-line);stroke-width:13}
.sg-a .arc{fill:none;stroke-width:13}
.sg-a .mid,.sg-a .mid2{transform:rotate(90deg);transform-origin:60px 60px;text-anchor:middle;fill:var(--j-ink)}
.sg-a .mid{font:900 26px/1 var(--j-big)}.sg-a .mid2{font:800 6.5px/1 var(--j-txt);letter-spacing:.09em;text-transform:uppercase;fill:var(--j-mut)}
.bars{display:flex;align-items:flex-end;gap:10px;height:clamp(120px,14vw,170px);padding-top:6px;border-bottom:1.5px solid var(--j-ink)}
.bars i{flex:1;height:var(--h);background:var(--j-ink);border-radius:6px 6px 0 0;transform-origin:bottom}
.bars i.cut{background:var(--j-acc)}
.sg-c svg{width:100%;height:clamp(120px,14vw,170px);overflow:visible}
.sg-c .grid{stroke:var(--j-line);stroke-width:1;fill:none}
.sg-c .area{fill:rgba(125,149,255,.14)}
.sg-c .ln{fill:none;stroke:var(--j-acc);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;vector-effect:non-scaling-stroke}
.sg-c .dot{fill:var(--j-warm)}
/* each chart comes in its own way: the ring sweeps, the bars grow, the line draws */
.js-anim .sigg .arc{stroke-dasharray:0 264;transition:stroke-dasharray 1s cubic-bezier(.2,.7,.2,1) var(--d)}
.sigg.in .arc{stroke-dasharray:var(--len) 264}
.sigg:not(.in) .bars i{transform:scaleY(0)}
.sigg .bars i{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.sigg .bars i:nth-child(2){transition-delay:.07s}.sigg .bars i:nth-child(3){transition-delay:.14s}.sigg .bars i:nth-child(4){transition-delay:.3s}.sigg .bars i:nth-child(5){transition-delay:.37s}.sigg .bars i:nth-child(6){transition-delay:.44s}
.sigg:not(.in) .ln{stroke-dashoffset:1}.sigg .ln{transition:stroke-dashoffset 1.6s ease .2s}
.sigg:not(.in) .area,.sigg:not(.in) .dot{opacity:0}.sigg .area,.sigg .dot{transition:opacity .8s 1.2s}
.sigg.in .dot{animation:sgp 2.2s ease-in-out 2s infinite}
@keyframes sgp{50%{r:6.5}}
/* mixed corners so cards are not all the same shape */
#flow .sg .sc:nth-child(1){border-radius:26px 26px 26px 4px!important}#flow .sg .sc:nth-child(2){border-radius:26px 4px 26px 26px!important}
#flow .sg .sc:nth-child(3){border-radius:4px 26px 26px 26px!important}#flow .sg .sc:nth-child(4){border-radius:26px 26px 4px 26px!important}
.wc:nth-child(odd){border-radius:26px 26px 26px 4px!important}.wc:nth-child(even){border-radius:26px 4px 26px 26px!important}
.byd{border-radius:999px!important}
/* small leftovers from the old look */
.bydh,.hit{color:var(--j-ink)}
.hiph,.av{background:#17181c!important;box-shadow:none!important}
.wm{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:transparent!important;-webkit-text-stroke:1.3px var(--j-ink);font-family:var(--j-big)}
@media(max-width:900px){.sigg{grid-template-columns:1fr 1fr}.sg-c{grid-column:1/-1}}
@media(max-width:560px){.sigg{grid-template-columns:1fr}.sg-a{border-radius:26px}}
@media(prefers-reduced-motion:reduce){.sigg .arc,.sigg .bars i,.sigg .ln,.sigg .area,.sigg .dot{transition:none!important;animation:none!important}.sigg .arc{stroke-dasharray:var(--len) 264!important}.sigg .bars i{transform:none!important}.sigg .ln{stroke-dashoffset:0!important}.sigg .area,.sigg .dot{opacity:1!important}}

/* ---- premium type ---- */
@font-face{font-family:Geist;src:url(/fonts/geist.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{--j-big:Geist,"SF Pro Display","Segoe UI Variable Display","Helvetica Neue",Arial,sans-serif;--j-txt:Geist,"SF Pro Text","Segoe UI Variable Text","Helvetica Neue",Arial,sans-serif;--j-serif:"Instrument Serif",Georgia,"Times New Roman",serif}
body{font-family:var(--j-txt);font-weight:400;letter-spacing:-.005em}
.t,h1,h2,.big{font-family:var(--j-big);font-weight:600;text-transform:none;letter-spacing:-.045em;line-height:1.02}
h1.t{font-size:clamp(40px,5.3vw,86px);color:var(--j-ink)}
h2.t{font-size:clamp(32px,4.2vw,64px);color:var(--j-ink);-webkit-text-stroke:0}
#services h2.t,.sec.paper h2.t{color:var(--j-dark);-webkit-text-stroke:0}
#h1 .wd:nth-child(3),h2.t em,.t i.serif{font-family:var(--j-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--j-acc)}
h3,h4,.sc h3,.wc h3{font-family:var(--j-txt);font-weight:600;letter-spacing:-.02em}
.p{font-weight:400;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--j-mut)}
.tag,.k,.hfoot{font:500 12px/1.5 var(--j-txt)!important;letter-spacing:.08em!important}
.st,.fp,.wc .tab{font:500 11px/1.4 var(--j-txt)!important;letter-spacing:.08em}
.btn{font:600 14.5px/1 var(--j-txt);letter-spacing:-.005em;text-transform:none;border-width:1px;min-height:48px;padding:0 20px}
.btn:not(.gh){background:var(--j-ink);border-color:var(--j-ink);color:#05060a}
.btn:not(.gh):hover{background:var(--j-acc);border-color:var(--j-acc);color:#05060a}
.btn.gh{background:transparent;border-color:var(--line2);color:var(--j-ink)}.btn.gh:hover{background:transparent;border-color:var(--j-ink);color:var(--j-ink)}
#services .btn,.sec.paper .btn,.book .btn{background:var(--j-dark);border-color:var(--j-dark);color:#fff!important}
.band .run,.band .run span{font-family:var(--j-big)!important;font-weight:600;letter-spacing:-.03em;font-size:clamp(18px,2.4vw,34px)}
#services .sc::before{font:500 clamp(28px,3.6vw,52px)/1 var(--j-big);letter-spacing:-.04em;color:#9a9ba6}
.book h3{font:600 clamp(28px,3.6vw,54px)/1.02 var(--j-big);text-transform:none;letter-spacing:-.04em}
.org q{font:500 15.5px/1.4 var(--j-txt)}
.rf i{font-family:var(--j-big);font-weight:600}.rf b{font-weight:600}.rtabs button{font:500 12px/1 var(--j-txt);letter-spacing:.04em;text-transform:none}
.sigg figcaption b{font-weight:600}.sg-a .mid{font:600 26px/1 var(--j-big)}
.wm{font-family:var(--j-big);font-weight:600;-webkit-text-stroke:1px var(--j-line)!important}

/* the menu stays pinned, so it is reachable from anywhere on the page */
nav:has(#nvb){position:fixed;top:0;left:0;right:0;z-index:60;padding:10px 4vw;background:#050506;border-bottom:1px solid var(--j-line)}
nav:has(#nvb) .brand{font:600 16px/1 var(--j-txt);letter-spacing:-.02em;text-transform:none}
nav:has(#nvb) .nl{justify-content:center;gap:clamp(16px,2.6vw,38px);font:500 14px/1 var(--j-txt)!important;letter-spacing:-.005em;text-transform:none;color:var(--j-mut)}
nav:has(#nvb) .nl a:hover{color:var(--j-ink);text-decoration:none}
nav:has(#nvb) .pill{background:var(--j-ink);border:1px solid var(--j-ink);color:#05060a;font:600 13.5px/1 var(--j-txt);letter-spacing:-.005em;text-transform:none;padding:11px 15px}
nav:has(#nvb) .pill:hover{background:var(--j-acc);border-color:var(--j-acc)}
#nvb{border-width:1px;border-color:var(--line2)}
@media(max-width:820px){#nvm a{font:600 clamp(24px,7vw,34px)/1.1 var(--j-big);text-transform:none;letter-spacing:-.04em}#nvm a.go{font:600 15px/1 var(--j-txt);letter-spacing:0;background:var(--j-ink);border-color:var(--j-ink);color:#05060a}}

/* hero: copy on the left, the real product on the right */
main>.sec:first-child>.wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);column-gap:clamp(28px,4vw,64px);align-items:center}
main>.sec:first-child>.wrap>*{grid-column:1}
.heroshot{grid-column:2!important;grid-row:1/span 8;margin:0;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:#0c0d12;box-shadow:0 40px 90px -30px rgba(125,149,255,.35)}
.heroshot img{display:block;width:100%;height:auto}
.hs-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--j-line);font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--j-mut)}
.hs-bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}.hs-bar span{margin-left:10px}
.org{grid-template-columns:1fr}.orgw{max-width:460px}
@media(max-width:980px){main>.sec:first-child>.wrap{grid-template-columns:1fr}.heroshot{grid-column:1!important;grid-row:auto;margin-top:26px}}

.hfoot{gap:8px 22px!important;margin-top:22px}

/* ---- hero dashboard and the game console ---- */
.heroshot .sigg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:12px}
.heroshot .sigg figure{padding:14px;border:1px solid var(--j-line);border-radius:12px!important;gap:10px;background:#08090d}
.heroshot .sg-c{grid-column:1/-1}
.heroshot .sg-a svg{width:min(100%,128px);margin:0 auto}
.heroshot .bars{height:96px}.heroshot .sg-c svg{height:92px}
.heroshot .sigg figcaption{font-size:11.5px;line-height:1.7}.heroshot .sigg figcaption b{font-size:13.5px}
/* in the hero the charts play on load, not on scroll */
.heroshot .sigg .arc{stroke-dasharray:0 264;animation:hsArc 1.1s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--d)) forwards}
@keyframes hsArc{to{stroke-dasharray:var(--len) 264}}
.heroshot .sigg .bars i{transform:scaleY(0);animation:hsBar .8s cubic-bezier(.2,.8,.2,1) .7s forwards}
.heroshot .sigg .bars i:nth-child(2){animation-delay:.77s}.heroshot .sigg .bars i:nth-child(3){animation-delay:.84s}.heroshot .sigg .bars i:nth-child(4){animation-delay:1s}.heroshot .sigg .bars i:nth-child(5){animation-delay:1.07s}.heroshot .sigg .bars i:nth-child(6){animation-delay:1.14s}
@keyframes hsBar{to{transform:none}}
.heroshot .sigg .ln{stroke-dashoffset:1;animation:hsLn 1.6s ease .9s forwards}
@keyframes hsLn{to{stroke-dashoffset:0}}
.heroshot .sigg .area,.heroshot .sigg .dot{opacity:0;animation:hsIn .8s 2s forwards}
@keyframes hsIn{to{opacity:1}}
.playsec{padding:5vw 0 2vw!important}
.dev{max-width:780px;margin:18px auto 0;padding:16px 16px 20px;border-radius:30px 30px 44px 44px;background:linear-gradient(160deg,#efeee9,#cdccc6);box-shadow:inset 0 -7px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.7),0 34px 70px rgba(0,0,0,.65)}
.dev .scr{padding:9px;border-radius:18px;background:#17181c;box-shadow:inset 0 0 0 2px #2c2d34}
.dev canvas{display:block;width:100%;height:clamp(150px,18vw,210px);border-radius:10px;touch-action:manipulation;cursor:pointer;background:radial-gradient(60% 90% at 50% 100%,rgba(125,149,255,.18),transparent 70%),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/22px 22px,#08080b}
.dev .ctl{display:flex;align-items:center;gap:14px;padding:16px 12px 0}
.dev .dp{width:54px;height:54px;flex:none;background:#3d49e0;clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}
.dev .ctl span{margin-right:auto;font:700 10.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;color:#55565f;text-align:left}
.dev .ctl button{width:40px;height:40px;flex:none;border:0;border-radius:50%;background:#f5a623;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),0 3px 0 rgba(0,0,0,.25);cursor:pointer;font:800 11px/1 var(--j-txt);color:#5b3a00}
.dev .ctl button+button{margin-top:-16px;background:#3d49e0;color:#fff}
@media(prefers-reduced-motion:reduce){.heroshot .sigg .arc,.heroshot .sigg .bars i,.heroshot .sigg .ln,.heroshot .sigg .area,.heroshot .sigg .dot{animation:none!important}.heroshot .sigg .arc{stroke-dasharray:var(--len) 264!important}.heroshot .sigg .bars i{transform:none!important}.heroshot .sigg .ln{stroke-dashoffset:0!important}.heroshot .sigg .area,.heroshot .sigg .dot{opacity:1!important}}

/* ---- colours, menu, small fixes ---- */
:root{--ultra:#3d5cff;--gold:#ff8f3d;--emer:#00c26e;--verm:#ff4d6d;--j-acc:#3d5cff;--j-warm:#ff8f3d}
#h1 .wd:nth-child(3),h2.t em,.t i.serif{color:var(--j-warm)}
.btn:not(.gh):hover,nav:has(#nvb) .pill:hover{background:#fff;border-color:#fff;color:#05060a}
.heroshot{box-shadow:0 40px 90px -30px rgba(61,92,255,.4)}
.rc:nth-child(4n+1){--c:#7d95ff;--k:#0b0b0e}.rc:nth-child(4n+2){--c:#ffb38a;--k:#0b0b0e}.rc:nth-child(4n+3){--c:#f1f1f4;--k:#0b0b0e}.rc:nth-child(4n+4){--c:#1e3dff;--k:#fff}
.rtabs button:hover{background:var(--j-warm)}
.wc::before{background:linear-gradient(180deg,#6f88ff,#3d5cff)}.wc::after{border-color:var(--j-ink);color:var(--j-ink)}.wc:hover::after{background:var(--j-ink)}
.bars i.cut{background:var(--emer)}.sg-c .ln{stroke:var(--emer)}.sg-c .area{fill:rgba(0,194,110,.13)}.sg-c .dot{fill:var(--j-warm)}
::selection{background:var(--j-warm);color:#05060a}

/* menu: the journey page's bold caps, kept together, pinned */
nav:has(#nvb){padding:6px 4vw;background:var(--j-bg);border-bottom:0}
nav:has(#nvb) .brand{font:800 12px/1 var(--j-txt);letter-spacing:.1em;text-transform:uppercase}
nav:has(#nvb) .brand img{display:none}
nav:has(#nvb) .nl{flex:0 1 auto;margin-left:auto;justify-content:flex-end;gap:clamp(16px,2.2vw,32px);font:800 11.5px/1 var(--j-txt)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--j-ink)}
nav:has(#nvb) .nl a:hover{text-decoration:underline;text-underline-offset:5px}
nav:has(#nvb) .pill{margin-left:clamp(10px,1.6vw,22px);background:none;border:1.5px solid var(--j-ink);color:var(--j-ink);font:800 11.5px/1 var(--j-txt);letter-spacing:.1em;text-transform:uppercase;padding:11px 14px}

/* About: plain headline, no block behind it */
body.jlight .big,body.jlight .big *{background:none!important;box-shadow:none!important}
body.jlight .big{color:var(--j-ink)!important}

/* the cartoon avatar lives on the journey page only */
.hiph,.av,.ava,img[src*="memoji"],img[src*="/founder/heads/"],img[src*="aashish-head"]{display:none!important}

/* catch the leak */
.leaksec{padding:5vw 0 2vw!important}
.leakbox{margin-top:16px;border:1.5px solid var(--j-ink);border-radius:26px 26px 26px 4px;overflow:hidden;background:var(--j-bg)}
.leakbox header{display:flex;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--j-line);font:600 13.5px/1.3 var(--j-txt)}
.leakbox header span{font:500 12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--j-mut)}
#leak{display:block;width:100%;height:clamp(180px,22vw,260px);cursor:ew-resize;touch-action:none;outline:0}
#leak:focus-visible{box-shadow:inset 0 0 0 2px var(--j-acc)}

/* ---- round of fixes: contact card, centred menu, footers ---- */
/* the contact card was light with light text after the palette flip: make it a dark outlined card */
body.jlight .card{background:#0c0d12!important;background-image:none!important;color:var(--j-ink)!important;border:1.5px solid var(--j-ink)!important;border-radius:26px 26px 26px 4px!important;box-shadow:none!important}
body.jlight .card h2,body.jlight .card h3,body.jlight .card b,body.jlight .card strong{color:var(--j-ink)!important}
body.jlight .card p,body.jlight .card small,body.jlight .card span,body.jlight .card li{color:var(--j-mut)!important}
body.jlight .book,body.jlight a.book{background:var(--j-ink)!important;color:#05060a!important;border-radius:10px!important;box-shadow:none!important;font:600 15px/1 var(--j-txt)}
img[alt="Aashish Arora"]{display:none!important}
:root{--txt3:#4a4b55}
/* menu: name on the left, links in the centre, button on the right */
nav:has(#nvb) .nl{flex:1;margin:0;justify-content:center}
nav:has(#nvb) .pill{margin-left:0}
/* footers: one family, centred */
footer,.foot,.wfoot,.fr,.f{font-family:var(--j-txt)!important}
footer,.foot,.wfoot{text-align:center}
footer .fr,.wfoot .fr,.foot .fr,footer>div,.wfl{justify-content:center!important;text-align:center}
footer p,.foot p{margin-left:auto;margin-right:auto}

/* arcade link under the home game */
.leaksec .more{display:inline-block;margin-top:14px;font:600 13.5px/1 var(--j-txt);color:var(--j-ink);text-decoration:underline;text-underline-offset:4px}

/* no orange, no yellow: cobalt, periwinkle, green, teal, rose */
:root{--gold:#2dd4bf;--j-warm:#8ea2ff}
.rtabs button:hover{background:var(--j-ink);color:#05060a}
::selection{background:#3d5cff;color:#fff}

/* ---- Flow and Beyond: the last pieces still wearing the old look ---- */
main>section,section.sec,section.hero,.hero,.bg{background-image:none!important}
.bg{background-color:transparent!important}
.chip{box-shadow:none!important;border-radius:8px!important}
main article,.idc,.rt{background:var(--j-bg)!important;border:1.5px solid var(--line2)!important;border-radius:18px 18px 18px 4px!important;box-shadow:none!important}
main article:hover,.idc:hover,.rt:hover{border-color:var(--j-ink)!important}
main li[class]{background-color:transparent!important}
.lvsec a,.lvg a,#live a{background-color:transparent!important}


/* ---- colour and stickers ---- */
.stk{display:flex;flex-wrap:wrap;gap:10px 12px;margin:22px 0 8px}
.stk span{display:inline-block;padding:9px 14px;border-radius:8px;font:600 13.5px/1 var(--j-txt);letter-spacing:-.005em;color:#05060a;background:var(--c,#3d5cff);transform:rotate(var(--r,-2deg));transition:transform .25s cubic-bezier(.2,.8,.2,1);cursor:default}
.stk span:nth-child(5n+1){--c:#3d5cff;--r:-3deg;color:#fff}.stk span:nth-child(5n+2){--c:#00c26e;--r:2deg}.stk span:nth-child(5n+3){--c:#ff4d6d;--r:-1.5deg}.stk span:nth-child(5n+4){--c:#2dd4bf;--r:3deg}.stk span:nth-child(5n+5){--c:#e6e6ec;--r:-2.5deg}
.stk span:hover{transform:rotate(0) translateY(-5px) scale(1.06)}
@media(prefers-reduced-motion:reduce){.stk span{transition:none}}

/* What we build: each tile takes one colour, used on its label and a top edge */
.bento .b{border-top:3px solid var(--tc,#3d5cff)!important}
.bento .b:nth-child(4n+1){--tc:#3d5cff}.bento .b:nth-child(4n+2){--tc:#00c26e}.bento .b:nth-child(4n+3){--tc:#ff4d6d}.bento .b:nth-child(4n+4){--tc:#2dd4bf}
.bento .b .bt,.bento .b .lx{color:var(--tc)!important}

/* About: coloured numbers on the principles and the facts row */
body.jlight .pr:nth-of-type(4n+1) .n,body.jlight .f:nth-child(4n+1) .nm{color:#3d5cff!important}
body.jlight .pr:nth-of-type(4n+2) .n,body.jlight .f:nth-child(4n+2) .nm{color:#00c26e!important}
body.jlight .pr:nth-of-type(4n+3) .n,body.jlight .f:nth-child(4n+3) .nm{color:#ff4d6d!important}
body.jlight .pr:nth-of-type(4n+4) .n,body.jlight .f:nth-child(4n+4) .nm{color:#2dd4bf!important}
body.jlight .big em,body.jlight .big i{color:#3d5cff!important;font-family:var(--j-serif);font-style:italic;font-weight:400}

/* Contact: the three steps each get a colour, and the card a coloured edge */
.steps3 .st3{border-top:3px solid var(--tc,#3d5cff)!important;padding-top:14px}
.steps3 .st3:nth-child(1){--tc:#3d5cff}.steps3 .st3:nth-child(2){--tc:#00c26e}.steps3 .st3:nth-child(3){--tc:#ff4d6d}
.steps3 .st3>*:first-child{color:var(--tc)!important}
body.jlight .card{border-top:3px solid #3d5cff!important}
body.jlight .form{border-top:3px solid #2dd4bf!important}

/* ---- hero dashboard, second version ---- */
.dsh{display:grid;grid-template-columns:.92fr 1.08fr;gap:10px;padding:12px}
.dsh figure,.kp>div{margin:0;border:1px solid var(--j-line);border-radius:12px;background:#08090d;min-width:0}
.kp{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kp>div{position:relative;padding:12px 14px}
.kp b{display:block;font:600 clamp(18px,1.7vw,24px)/1.1 var(--j-big);letter-spacing:-.03em;color:var(--j-ink)}
.kp span{display:block;margin-top:3px;font:400 11.5px/1.3 var(--j-txt);color:var(--j-mut)}
.kp em{position:absolute;right:10px;top:10px;padding:3px 7px;border-radius:5px;font:600 9.5px/1.2 var(--j-txt);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#05060a;background:#3d5cff}
.kp>div:nth-child(1) em{color:#fff}.kp>div:nth-child(2) em{background:#00c26e}.kp>div:nth-child(3) em{background:#2dd4bf}
.dsh figure{padding:14px;display:flex;flex-direction:column;gap:10px}
.dsh figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:400 11px/1.4 var(--j-txt);color:var(--j-mut)}
.dsh figcaption b{flex:1 1 100%;font:600 13.5px/1.3 var(--j-txt);color:var(--j-ink)}
.dsh figcaption i,.dg p i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.dg svg{width:100%;max-width:230px;margin:0 auto;overflow:visible}
.gt,.ga{fill:none;stroke-width:11;stroke-linecap:butt}.gt{stroke:var(--j-line)}
.ga{stroke-dasharray:0 100;animation:gaIn 1s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--d)) forwards}
@keyframes gaIn{to{stroke-dasharray:var(--len) 100}}
.gn{font:600 22px/1 var(--j-big);fill:var(--j-ink);text-anchor:middle}.gl{font:500 5.5px/1 var(--j-txt);letter-spacing:.08em;text-transform:uppercase;fill:var(--j-mut);text-anchor:middle}
.dg p{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;font:400 11px/1.6 var(--j-txt);color:var(--j-mut)}
.wv{flex:1;display:flex;align-items:center;gap:2px;min-height:96px}
.wv i{flex:1;height:var(--h);background:#e6e6ec;border-radius:2px;transform:scaleY(0);animation:wvIn .7s cubic-bezier(.2,.8,.2,1) calc(.6s + var(--i)*22ms) forwards}
.wv i.af{background:#00c26e}
@keyframes wvIn{to{transform:none}}
.ds{grid-column:1/-1}
.ds svg{width:100%;height:92px;overflow:visible}
.sgd{stroke:var(--j-line);stroke-width:1;fill:none}
.sa{fill:rgba(61,92,255,.16);opacity:0;animation:hsIn .8s 2s forwards}
.sl{fill:none;stroke:#3d5cff;stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;animation:hsLn 1.6s ease .9s forwards}
@media(max-width:520px){.dsh{grid-template-columns:1fr}.kp{grid-template-columns:1fr 1fr}.kp>div:nth-child(3){grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.ga,.wv i,.sa,.sl{animation:none!important}.ga{stroke-dasharray:var(--len) 100!important}.wv i{transform:none!important}.sa{opacity:1!important}.sl{stroke-dashoffset:0!important}}

/* nothing may stay hidden: if a page's own scroll reveal never fires for a block, it appears anyway */
.rv{animation:rvfb .5s 2.8s forwards}
@keyframes rvfb{to{opacity:1;transform:none}}
/* work page: one paragraph sat a shade too dim */
.sec p,.wrap>p{color:var(--j-mut)}
.sec.paper p,#services p{color:#33343c}

/* ---- burn letter, picker ---- */
.burn{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:26px 0 34px;border-top:1px solid var(--line2)}
.burn>a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:18px 2px;border-bottom:1px solid var(--line2);color:var(--j-ink)}
.burn>a b{font:600 clamp(22px,2.6vw,34px)/1.1 var(--j-big);letter-spacing:-.035em}
.burn>a span{font:500 12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--j-mut);text-align:right}
.burn>a:nth-of-type(1):hover b{color:#3d5cff}.burn>a:nth-of-type(2):hover b{color:#00c26e}.burn>a:nth-of-type(3):hover b{color:#ff4d6d}.burn>a:nth-of-type(4):hover b{color:#2dd4bf}
@media(max-width:700px){.burn{grid-template-columns:1fr}}

.pick{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:34px 0 0}
.pick button{min-height:46px;padding:0 18px;border-radius:10px;border:1px solid var(--j-ink);background:var(--j-ink);color:#05060a;font:600 14.5px/1 var(--j-txt);cursor:pointer}
.pick button:hover{background:#fff}
.pick-w{display:inline-flex;align-items:center;min-height:46px;min-width:min(100%,300px);padding:0 16px;border:1.5px dashed var(--line2);border-radius:10px;font:500 15px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--j-mut)}
.pick-w.hit{border:1.5px solid #00c26e;color:var(--j-ink)}
.pick a{font:600 14.5px/1 var(--j-txt);color:var(--j-ink);text-decoration:underline;text-underline-offset:4px}

/* contrast */
.wc p{color:var(--j-mut)!important}

/* ---- ring centred, games on pages ---- */
.ring{height:calc(clamp(100px,10.4vw,150px)*2.5)!important}
.ring-in{top:47%!important}
.gmsec{padding:5vw 0 3vw!important}
.gmsec h2.t{margin-bottom:20px}
.gmsec [data-scratch]{max-width:720px}


/* ---- lighter, second version ---- */

/* ---- lighter, third version ---- */
/* the terminal block on the home page is retired (kept in the page so its shortcuts keep working) */
main>.os,.os{display:none!important}

/* ---- burn, fourth pass; work spin box ---- */

.pick{position:relative;margin:36px 0 0;padding:20px;border:1.5px solid var(--j-ink);border-radius:26px 26px 26px 4px;background:var(--j-bg)}
.pick::before{content:"Can't choose? Spin for one.";flex:1 1 100%;font:600 clamp(20px,2.2vw,28px)/1.1 var(--j-big);letter-spacing:-.03em;color:var(--j-ink)}
.pick-w{flex:1 1 260px;min-height:58px;font-size:17px}
.pick.spin{animation:pickc .5s linear infinite}
.pick.spin .pick-w{border-style:solid;border-color:currentColor;color:var(--j-ink)}
@keyframes pickc{0%{border-color:#3d5cff}25%{border-color:#00c26e}50%{border-color:#ff4d6d}75%{border-color:#2dd4bf}100%{border-color:#3d5cff}}
@media(prefers-reduced-motion:reduce){.pick.spin{animation:none}}

/* ---- burn v5; flow and beyond cards ---- */

/* Flow and Beyond: every repeated card takes the outlined, colour-edged card of the new look */
.idc,.rt,.w,.lvc,.wsc,.pc,.mod,.step,.plan{background:var(--j-bg)!important;border:1.5px solid var(--line2)!important;border-top:3px solid var(--tc,#3d5cff)!important;border-radius:20px 20px 20px 4px!important;box-shadow:none!important}
.idc:nth-child(4n+2),.rt:nth-child(4n+2),.w:nth-child(4n+2),.lvc:nth-child(4n+2),.wsc:nth-child(4n+2){--tc:#00c26e;border-radius:20px 4px 20px 20px!important}
.idc:nth-child(4n+3),.rt:nth-child(4n+3),.w:nth-child(4n+3),.lvc:nth-child(4n+3),.wsc:nth-child(4n+3){--tc:#ff4d6d}
.idc:nth-child(4n+4),.rt:nth-child(4n+4),.w:nth-child(4n+4),.lvc:nth-child(4n+4),.wsc:nth-child(4n+4){--tc:#2dd4bf;border-radius:4px 20px 20px 20px!important}

/* ---- one colour family per page ---- */
/* --a1 is the page colour, --a2 and --a3 are lighter steps of it, --a1t is the text colour that sits on --a1 */
:root{--a1:#3d5cff;--a2:#7d95ff;--a3:#c5d0ff;--a1t:#fff}
html[data-pg=work]{--a1:#2dd4bf;--a2:#7be7d9;--a3:#c2f5ee;--a1t:#05060a}
html[data-pg=build]{--a1:#00c26e;--a2:#5fe0a6;--a3:#bff3db;--a1t:#05060a}
html[data-pg=about]{--a1:#ff4d6d;--a2:#ff8fa3;--a3:#ffd0d8;--a1t:#05060a}
html[data-pg=contact]{--a1:#e6e6ec;--a2:#b4b5c0;--a3:#7b7c88;--a1t:#05060a}
html[data-pg=flow]{--a1:#00c26e;--a2:#5fe0a6;--a3:#bff3db;--a1t:#05060a}
html[data-pg=beyond]{--a1:#5cc8ff;--a2:#9bdcff;--a3:#d3efff;--a1t:#05060a}
html[data-pg=systems]{--a1:#2dd4bf;--a2:#7be7d9;--a3:#c2f5ee;--a1t:#05060a}
html[data-pg=diag]{--a1:#5cc8ff;--a2:#9bdcff;--a3:#d3efff;--a1t:#05060a}
:root{--ultra:var(--a1);--emer:var(--a2);--gold:var(--a3);--verm:var(--a2);--j-acc:var(--a1);--j-warm:var(--a2)}
.stk span:nth-child(n){--c:var(--a1);color:var(--a1t)}.stk span:nth-child(3n+2){--c:var(--a2);color:#05060a}.stk span:nth-child(3n+3){--c:var(--a3);color:#05060a}
.bento .b:nth-child(n){--tc:var(--a1)}.bento .b:nth-child(3n+2){--tc:var(--a2)}.bento .b:nth-child(3n+3){--tc:var(--a3)}
body.jlight .pr:nth-of-type(n) .n,body.jlight .f:nth-child(n) .nm{color:var(--a1)!important}
body.jlight .pr:nth-of-type(even) .n,body.jlight .f:nth-child(even) .nm{color:var(--a2)!important}
body.jlight .big em,body.jlight .big i{color:var(--a1)!important}
.steps3 .st3:nth-child(n){--tc:var(--a1)}.steps3 .st3:nth-child(2){--tc:var(--a2)}.steps3 .st3:nth-child(3){--tc:var(--a3)}
body.jlight .card{border-top-color:var(--a1)!important}body.jlight .form{border-top-color:var(--a2)!important}
.burn>a:nth-of-type(n):hover b{color:var(--a2)}
.idc:nth-child(n),.rt:nth-child(n),.w:nth-child(n),.lvc:nth-child(n),.wsc:nth-child(n){--tc:var(--a1)}
.idc:nth-child(3n+2),.rt:nth-child(3n+2),.w:nth-child(3n+2),.lvc:nth-child(3n+2),.wsc:nth-child(3n+2){--tc:var(--a2)}
.idc:nth-child(3n+3),.rt:nth-child(3n+3),.w:nth-child(3n+3),.lvc:nth-child(3n+3),.wsc:nth-child(3n+3){--tc:var(--a3)}
@keyframes pickc{0%,100%{border-color:var(--a1)}50%{border-color:var(--a3)}}
.pick-w.hit{border-color:var(--a1)}
.kp em,.kp>div:nth-child(n) em{background:var(--a1);color:var(--a1t)}.kp>div:nth-child(2) em{background:var(--a2);color:#05060a}.kp>div:nth-child(3) em{background:var(--a3);color:#05060a}
.wv i.af{background:var(--a1)}.sl{stroke:var(--a1)}
.rc:nth-child(4n+1){--c:#3d5cff;--k:#fff}.rc:nth-child(4n+2){--c:#7d95ff;--k:#0b0b0e}.rc:nth-child(4n+3){--c:#f1f1f4;--k:#0b0b0e}.rc:nth-child(4n+4){--c:#c5d0ff;--k:#0b0b0e}
::selection{background:var(--a1);color:var(--a1t)}

/* one black everywhere: sections that carried their own dark grey now sit on the page background */
section.sec,section.hero,main>section{background-color:transparent!important}
.vs,.mock.fx-dark{background-color:var(--j-bg)!important}

/* ---- page colour sets, second version ---- */
html[data-pg=home]{--a1:#3d5cff;--a2:#5cc8ff;--a3:#e6e6ec;--a1t:#fff}
html[data-pg=work]{--a1:#2dd4bf;--a2:#3d5cff;--a3:#e6e6ec;--a1t:#05060a}
html[data-pg=build]{--a1:#00c26e;--a2:#5cc8ff;--a3:#ff4d6d;--a1t:#05060a}
html[data-pg=about]{--a1:#ff4d6d;--a2:#e6e6ec;--a3:#3d5cff;--a1t:#05060a}
html[data-pg=contact]{--a1:#e6e6ec;--a2:#5cc8ff;--a3:#ff4d6d;--a1t:#05060a}
html[data-pg=flow]{--a1:#00c26e;--a2:#2dd4bf;--a3:#e6e6ec;--a1t:#05060a}
html[data-pg=beyond]{--a1:#5cc8ff;--a2:#ff4d6d;--a3:#2dd4bf;--a1t:#05060a}
html[data-pg=systems]{--a1:#2dd4bf;--a2:#00c26e;--a3:#3d5cff;--a1t:#05060a}
html[data-pg=diag]{--a1:#5cc8ff;--a2:#00c26e;--a3:#e6e6ec;--a1t:#05060a}
/* colour is for a few things only: small labels, the top edge of feature cards, one chart. Body text, borders and buttons stay neutral. */
.idc,.rt,.w,.lvc,.wsc,.pc,.mod,.step,.plan{border-top:1.5px solid var(--line2)!important}
.idc:nth-child(3n+1),.rt:nth-child(3n+1),.w:nth-child(3n+1){border-top:3px solid var(--tc)!important}
body.jlight .form{border-top-color:var(--line2)!important}
.stk span:nth-child(3n+2){--c:var(--a2);color:#05060a}.stk span:nth-child(3n+3){--c:var(--a3);color:#05060a}
html[data-pg=about] .stk span:nth-child(3n+3){color:#fff}
html[data-pg=build] .bento .b:nth-child(3n+3) .bt{color:var(--a3)!important}
/* one black everywhere: sections that carried their own dark grey now sit on the page background */
section.sec,section.hero,main>section{background-color:transparent!important}
.vs,.mock.fx-dark{background-color:var(--j-bg)!important}

/* ---- page colour sets, third version ---- */
html[data-pg=home]{--a1:#3d5cff;--a2:#5cc8ff;--a3:#e6e6ec;--a1t:#fff}
html[data-pg=work]{--a1:#2dd4bf;--a2:#e6e6ec;--a3:#3d5cff;--a1t:#05060a}
html[data-pg=build]{--a1:#00c26e;--a2:#2dd4bf;--a3:#e6e6ec;--a1t:#05060a}
html[data-pg=contact]{--a1:#e6e6ec;--a2:#5cc8ff;--a3:#3d5cff;--a1t:#05060a}
html[data-pg=flow]{--a1:#00c26e;--a2:#e6e6ec;--a3:#2dd4bf;--a1t:#05060a}
html[data-pg=beyond]{--a1:#5cc8ff;--a2:#e6e6ec;--a3:#3d5cff;--a1t:#05060a}
html[data-pg=systems]{--a1:#2dd4bf;--a2:#3d5cff;--a3:#e6e6ec;--a1t:#05060a}
html[data-pg=diag]{--a1:#5cc8ff;--a2:#e6e6ec;--a3:#00c26e;--a1t:#05060a}
html[data-pg=build] .bento .b:nth-child(3n+3) .bt{color:var(--a3)!important}
/* About keeps its own mix, as before */
html[data-pg=about]{--a1:#3d5cff;--a2:#00c26e;--a3:#ff4d6d;--a1t:#fff}
html[data-pg=about] .stk span:nth-child(5n+1){--c:#3d5cff;color:#fff}html[data-pg=about] .stk span:nth-child(5n+2){--c:#00c26e;color:#05060a}html[data-pg=about] .stk span:nth-child(5n+3){--c:#ff4d6d;color:#05060a}html[data-pg=about] .stk span:nth-child(5n+4){--c:#2dd4bf;color:#05060a}html[data-pg=about] .stk span:nth-child(5n+5){--c:#e6e6ec;color:#05060a}
html[data-pg=about] body.jlight .pr:nth-of-type(4n+1) .n,html[data-pg=about] body.jlight .f:nth-child(4n+1) .nm{color:#3d5cff!important}
html[data-pg=about] body.jlight .pr:nth-of-type(4n+2) .n,html[data-pg=about] body.jlight .f:nth-child(4n+2) .nm{color:#00c26e!important}
html[data-pg=about] body.jlight .pr:nth-of-type(4n+3) .n,html[data-pg=about] body.jlight .f:nth-child(4n+3) .nm{color:#ff4d6d!important}
html[data-pg=about] body.jlight .pr:nth-of-type(4n+4) .n,html[data-pg=about] body.jlight .f:nth-child(4n+4) .nm{color:#2dd4bf!important}

/* About headline: plain words; no boxes, no per-word accent */
body.jlight .big span{font-family:inherit!important;font-style:inherit!important;font-weight:inherit!important;color:inherit!important;border:0!important;outline:0!important;box-shadow:none!important;background:none!important}

/* What we build: the Founder HQ screenshot was full width; it is a card-sized thumbnail now */
.labx{display:flex;flex-wrap:wrap;gap:14px}
.labx .lx{flex:0 1 380px;max-width:380px}

/* ---- Flow and Beyond: last surfaces with the old tints ---- */
section#find.sec.leak::before,section.sec::before{background:none!important}
.hscrim{background:radial-gradient(900px 62% at 14% 78%,rgba(5,5,6,.9),rgba(5,5,6,0) 70%)!important}
footer.wfoot,footer{background-color:var(--j-bg)!important}
#lvList,.lgrid{background-color:transparent!important;border:1.5px solid var(--line2)!important;border-radius:20px 20px 20px 4px!important}
#lvList::before,.lgrid::before{background:none!important}
.demo,.fx-cf{background-color:var(--j-bg)!important}
/* cards that sit on a white panel must be light, with dark text */
.sec.paper .w,#services .w{background:#fff!important;border-color:#d3d3da!important;border-top-color:var(--j-dark)!important;color:var(--j-dark)!important}
.sec.paper .w *{color:var(--j-dark)!important}
.sec.paper .w p,.sec.paper .w small,.sec.paper .w em{color:#33343c!important}

/* ---- earlier colours back on build and the home chart ---- */
html[data-pg=build] .bento .b:nth-child(4n+1){--tc:#3d5cff}html[data-pg=build] .bento .b:nth-child(4n+2){--tc:#00c26e}html[data-pg=build] .bento .b:nth-child(4n+3){--tc:#ff4d6d}html[data-pg=build] .bento .b:nth-child(4n+4){--tc:#2dd4bf}
html[data-pg=build] .bento .b:nth-child(n) .bt,html[data-pg=build] .bento .b:nth-child(n) .lx{color:var(--tc)!important}
html[data-pg=home] .kp>div:nth-child(1) em{background:#3d5cff;color:#fff}html[data-pg=home] .kp>div:nth-child(2) em{background:#00c26e;color:#05060a}html[data-pg=home] .kp>div:nth-child(3) em{background:#2dd4bf;color:#05060a}
html[data-pg=home] .wv i.af{background:#00c26e}html[data-pg=home] .sl{stroke:#3d5cff}

/* the white panels keep their white (the "one black" rule above had cleared it) */
#services,section#services,.sec.paper,section.sec.paper{background-color:var(--j-paper)!important}

/* ---- page colour sets, fourth version ---- */
html[data-pg=home]{--a1:#3d5cff;--a2:#2dd4bf;--a3:#ffd84d;--a1t:#fff;--ultra:#3d5cff;--emer:#2dd4bf;--gold:#ffd84d;--verm:#ffd84d}
html[data-pg=work]{--a1:#2dd4bf;--a2:#ff4d6d;--a3:#ffd84d;--a1t:#05060a;--ultra:#2dd4bf;--emer:#ff4d6d;--gold:#ffd84d;--verm:#ffd84d}
html[data-pg=contact]{--a1:#5cc8ff;--a2:#ffd84d;--a3:#ff4d6d;--a1t:#05060a;--ultra:#5cc8ff;--emer:#ffd84d;--gold:#ff4d6d;--verm:#ff4d6d}
html[data-pg=flow]{--a1:#00c26e;--a2:#ffd84d;--a3:#5cc8ff;--a1t:#05060a;--ultra:#00c26e;--emer:#ffd84d;--gold:#5cc8ff;--verm:#5cc8ff}
html[data-pg=beyond]{--a1:#ff4d6d;--a2:#2dd4bf;--a3:#3d5cff;--a1t:#05060a;--ultra:#ff4d6d;--emer:#2dd4bf;--gold:#3d5cff;--verm:#3d5cff}
html[data-pg=systems]{--a1:#ffd84d;--a2:#3d5cff;--a3:#00c26e;--a1t:#05060a;--ultra:#ffd84d;--emer:#3d5cff;--gold:#00c26e;--verm:#00c26e}
html[data-pg=diag]{--a1:#5cc8ff;--a2:#2dd4bf;--a3:#ff4d6d;--a1t:#05060a;--ultra:#5cc8ff;--emer:#2dd4bf;--gold:#ff4d6d;--verm:#ff4d6d}
/* Flow keeps its meaning: green is money kept, rose is a leak */
html[data-pg=flow]{--ultra:#5cc8ff;--emer:#00c26e;--gold:#ffd84d;--verm:#ff4d6d}
/* feature cards show the page's three colours in turn on their top edge */
.idc:nth-child(n),.rt:nth-child(n),.w:nth-child(n),.lvc:nth-child(n),.wsc:nth-child(n){border-top:3px solid var(--tc)!important}
.sec.paper .w:nth-child(n),#services .w:nth-child(n){border-top-color:var(--tc)!important}
body.jlight .form{border-top-color:var(--a2)!important}
.steps3 .st3:nth-child(3){--tc:var(--a3)}
.burn>a:nth-of-type(1):hover b{color:var(--a1)}.burn>a:nth-of-type(2):hover b{color:var(--a2)}.burn>a:nth-of-type(3):hover b{color:var(--a3)}.burn>a:nth-of-type(4):hover b{color:var(--a1)}
@keyframes pickc{0%,100%{border-color:var(--a1)}33%{border-color:var(--a2)}66%{border-color:var(--a3)}}

/* ---- the journey page's menu, on every page ---- */
nav:has(#nvb){height:56px;padding:0 4vw}
nav:has(#nvb) .brand,nav:has(#nvb) .nl,nav:has(#nvb) .nl a,nav:has(#nvb) .pill{font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif!important;font-weight:800!important;font-size:11.5px!important;letter-spacing:.1em!important;text-transform:uppercase}
nav:has(#nvb) .nl{gap:clamp(14px,2.2vw,32px)}
nav:has(#nvb) .nl a.on,nav:has(#nvb) .nl a[aria-current]{text-decoration:underline;text-underline-offset:5px;color:var(--j-ink)}
nav:has(#nvb) .nl a.on::after{display:none!important}
nav:has(#nvb) .pill{border:1.5px solid var(--j-ink);border-radius:10px!important;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;background:none;color:var(--j-ink)}
nav:has(#nvb) .pill:hover{background:var(--j-ink);border-color:var(--j-ink);color:var(--j-bg)}
@media(max-width:820px){#nvm{padding-top:78px}#nvm a{font:900 clamp(26px,8vw,40px)/1 "Arial Black","Helvetica Neue",Impact,system-ui,sans-serif;letter-spacing:-.03em;text-transform:uppercase}#nvm a.go{font:800 12.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.1em;background:none;border:1.5px solid var(--j-ink);color:var(--j-ink)}}

/* ---- menu: logo mark, square bar everywhere ---- */
nav:has(#nvb){border-radius:0!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--j-bg)!important}
nav:has(#nvb) .brand{font-size:0!important;letter-spacing:0!important;gap:0}
nav:has(#nvb) .brand img{display:block!important;width:32px;height:32px;border-radius:7px}
nav:has(#nvb) .brand::after{content:none!important}
@media(max-width:820px){#nvm{border-radius:0!important;border:0!important}}

/* ---- Work page: new layout, same content ---- */
html[data-pg=work] .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;border-top:1.5px solid var(--j-ink)}
html[data-pg=work] .stats span{display:flex;flex-direction:column;gap:6px;padding:16px 14px 0 0;border:0!important;font:500 11.5px/1.3 var(--j-txt);letter-spacing:.08em;color:var(--j-mut)}
html[data-pg=work] .stats b{font:600 clamp(30px,4vw,56px)/1 var(--j-big);letter-spacing:-.04em;color:var(--j-ink)}
html[data-pg=work] .stats span:nth-child(1) b{color:var(--a1)}html[data-pg=work] .stats span:nth-child(2) b{color:var(--a2)}html[data-pg=work] .stats span:nth-child(3) b{color:var(--a3)}
html[data-pg=work] .fc{background:#0c0d12!important;background-image:none!important;border:1.5px solid var(--line2)!important;border-top:3px solid var(--c)!important;border-radius:22px 22px 22px 4px!important;box-shadow:none!important}
html[data-pg=work] .fc:nth-child(1){--c:var(--a1);--ct:var(--a1)}html[data-pg=work] .fc:nth-child(2){--c:var(--a2);--ct:var(--a2);border-radius:22px 4px 22px 22px!important}
html[data-pg=work] .fam{margin-top:72px}
html[data-pg=work] .fam:nth-of-type(1){--c:var(--a1);--ct:var(--a1)}html[data-pg=work] .fam:nth-of-type(2){--c:var(--a2);--ct:var(--a2)}html[data-pg=work] .fam:nth-of-type(3){--c:var(--a3);--ct:var(--a3)}
html[data-pg=work] .famh{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:6px 44px;align-items:end;border-top:1.5px solid var(--j-ink);padding-top:18px;margin-bottom:22px}
html[data-pg=work] .famh .famk{grid-column:1/-1}
html[data-pg=work] .famh h2{font-size:clamp(28px,3.4vw,50px);line-height:1.04}
html[data-pg=work] .fam .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
html[data-pg=work] .sy{background:#0c0d12!important;border:1.5px solid var(--line2)!important;border-top:3px solid var(--ct)!important;border-radius:22px 22px 22px 4px!important;box-shadow:none!important;padding:18px;min-height:268px;gap:8px;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s}
html[data-pg=work] .sy:nth-child(3n+2){border-radius:22px 4px 22px 22px!important}html[data-pg=work] .sy:nth-child(3n+3){border-radius:4px 22px 22px 22px!important}
html[data-pg=work] .sy:first-child{grid-column:span 2}
html[data-pg=work] .sy:hover{transform:translateY(-4px);border-color:var(--j-ink)!important;border-top-color:var(--ct)!important}
html[data-pg=work] .sy h3{font:600 clamp(19px,1.7vw,23px)/1.2 var(--j-txt);letter-spacing:-.02em}
html[data-pg=work] .sy .sf{margin-top:auto}
/* the small moving visual on each tile */
.viz{display:block;position:relative;height:78px;margin:4px 0 6px;border-radius:10px;background:#08090d;border:1px solid var(--j-line);overflow:hidden}
.viz svg{display:block;width:100%;height:100%}
.vz-l{fill:none;stroke:var(--ct);stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;animation:vzl 3.4s ease-in-out infinite}
@keyframes vzl{0%{stroke-dashoffset:1}60%,100%{stroke-dashoffset:0}}
.vz-b{display:flex;align-items:flex-end;gap:5px;height:100%;padding:12px}
.vz-b i{flex:1;height:var(--h);background:var(--ct);border-radius:3px 3px 0 0;transform-origin:bottom;animation:vzb 1.8s ease-in-out calc(var(--i)*.12s) infinite alternate}
@keyframes vzb{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.vz-gt,.vz-g{fill:none;stroke-width:9}.vz-gt{stroke:var(--j-line)}.vz-g{stroke:var(--ct);stroke-dasharray:0 100;animation:vzg 3s ease-in-out infinite alternate}
@keyframes vzg{to{stroke-dasharray:74 100}}
.vz-n::before{content:'';position:absolute;left:14%;right:14%;top:50%;height:1.5px;background:var(--line2)}
.vz-n i{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px;border-radius:4px;border:1.5px solid var(--j-mut);background:#08090d}
.vz-n i:nth-child(1){left:14%}.vz-n i:nth-child(2){left:50%}.vz-n i:nth-child(3){left:86%}
.vz-n b{position:absolute;top:50%;left:14%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--ct);animation:vzn 2.6s ease-in-out infinite}
@keyframes vzn{0%{left:14%}45%{left:50%}55%{left:50%}100%{left:86%}}
.vz-d{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;height:100%;padding:13px;align-content:center}
.vz-d i{aspect-ratio:1;border-radius:50%;background:var(--ct);opacity:.18;animation:vzd 2.4s linear calc(var(--i)*.07s) infinite}
@keyframes vzd{0%,20%,100%{opacity:.18}8%{opacity:1}}
.vz-t{display:grid;gap:8px;height:100%;padding:13px;align-content:center}
.vz-t i{display:block;height:8px;border-radius:4px;background:var(--line2);position:relative;margin-left:20px;width:var(--w)}
.vz-t i::before{content:'';position:absolute;left:-20px;top:-2px;width:12px;height:12px;border-radius:3px;border:1.5px solid var(--j-mut);animation:vzt 3.6s steps(1) calc(var(--i)*.8s) infinite}
@keyframes vzt{0%{background:transparent;border-color:var(--j-mut)}30%,100%{background:var(--ct);border-color:var(--ct)}}
@media(max-width:900px){html[data-pg=work] .fam .grid{grid-template-columns:1fr 1fr}html[data-pg=work] .famh{grid-template-columns:1fr}html[data-pg=work] .stats{grid-template-columns:1fr 1fr;row-gap:8px}}
@media(max-width:560px){html[data-pg=work] .fam .grid{grid-template-columns:1fr}html[data-pg=work] .sy:first-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.vz-l,.vz-b i,.vz-g,.vz-n b,.vz-d i,.vz-t i::before,html[data-pg=work] .sy{animation:none!important;transition:none}.vz-l{stroke-dashoffset:0}.vz-g{stroke-dasharray:74 100}.vz-d i{opacity:.6}}

/* ---- audit fixes ---- */
/* closing panels are filled with the page colour, so their text must be dark */
.close,.close h2,.close h3,.close p,.close a:not(.btn),.close span{color:#05060a!important}
.close .btn{background:#05060a!important;border-color:#05060a!important;color:#fff!important}
.bub.a{color:#05060a!important}
html[data-pg=build] .bento .b:nth-child(4n+1) .bt,html[data-pg=build] .bento .b:nth-child(4n+1) .lx{color:#7d95ff!important}
form button,button[type=submit],.ft{border-radius:10px!important}
html[data-pg=work] .fc .ft{border-radius:6px!important}

html[data-pg=work] .fam:nth-of-type(1) .sy{--ct:var(--a1)}html[data-pg=work] .fam:nth-of-type(2) .sy{--ct:var(--a2)}html[data-pg=work] .fam:nth-of-type(3) .sy{--ct:var(--a3)}
html[data-pg=work] .fc::before,html[data-pg=work] .fc::after{background:none!important}

/* two notes that sat too pale on white panels */
.book p{color:#33343c!important}
.fx-note{color:#5b5c66!important}
.fx-dark .fx-note{color:var(--j-mut)!important}

/* ---- round 7: ring centre, flow and beyond sections ---- */
.ringsec{padding:3vw 0 2vw!important;min-height:0!important;justify-content:flex-start!important}
.ringsec .k{margin-bottom:8px}
.ring{height:calc(clamp(100px,10.4vw,150px)*2.7)!important}
.ring-in{top:39%!important}

/* Flow: kicker lines, and the two "numbers" rows as framed blocks with giant numerals */
html[data-pg=flow] .lbl{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--j-line);font:500 12px/1.5 var(--j-txt)!important;letter-spacing:.08em!important;text-transform:uppercase}
html[data-pg=flow] #outputs .row{border:1.5px solid var(--line2);border-top:3px solid var(--a1);border-radius:26px 26px 26px 4px;padding:clamp(18px,2.6vw,34px);margin-top:26px;background:var(--j-bg);align-items:center}
html[data-pg=flow] #outputs .row:nth-of-type(even){border-top-color:var(--a2);border-radius:26px 4px 26px 26px}
html[data-pg=flow] #outputs .row:nth-of-type(even)>div:first-child{order:2}
html[data-pg=flow] #outputs .n{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
html[data-pg=flow] #outputs .n span{font:600 clamp(96px,13vw,210px)/.82 var(--j-big);letter-spacing:-.06em;color:var(--a1)}
html[data-pg=flow] #outputs .row:nth-of-type(even) .n span{color:var(--a2)}
html[data-pg=flow] #outputs .n small{font:500 clamp(16px,1.6vw,22px)/1.2 var(--j-txt);color:var(--j-mut);letter-spacing:-.01em}
html[data-pg=flow] #outputs h3{font-size:clamp(22px,2.2vw,30px)}
html[data-pg=flow] .mock{border:1px solid var(--j-line)!important;border-radius:16px!important;box-shadow:none!important}

/* Beyond: the eight rooms become a white panel with a numbered list, like the route on the journey page */
html[data-pg=beyond] #rooms{background-color:var(--j-paper)!important;border-radius:clamp(20px,2.6vw,36px);margin:6vw 3vw;padding:clamp(30px,5vw,72px) 0!important}
html[data-pg=beyond] #rooms,html[data-pg=beyond] #rooms h2,html[data-pg=beyond] #rooms h3,html[data-pg=beyond] #rooms a,html[data-pg=beyond] #rooms span,html[data-pg=beyond] #rooms li,html[data-pg=beyond] #rooms summary{color:var(--j-dark)!important}
html[data-pg=beyond] #rooms p,html[data-pg=beyond] #rooms .k{color:#33343c!important}
html[data-pg=beyond] #rooms .rgrid{grid-template-columns:1fr 1fr;gap:0 44px}
html[data-pg=beyond] #rooms .rt{background:none!important;border:0!important;border-bottom:1px solid #d3d3da!important;border-radius:0!important;padding:20px 0!important}
html[data-pg=beyond] #rooms .rt h3{display:grid;grid-template-columns:clamp(54px,6vw,84px) 1fr;align-items:baseline;font:600 clamp(18px,1.7vw,23px)/1.2 var(--j-txt)}
html[data-pg=beyond] #rooms .rt .rn{font:500 clamp(30px,3.6vw,52px)/1 var(--j-big);letter-spacing:-.04em;color:#9a9ba6!important}
html[data-pg=beyond] #rooms .rt p{padding-left:clamp(54px,6vw,84px)}
html[data-pg=beyond] .lgrid>li{background:transparent!important}
@media(max-width:800px){html[data-pg=beyond] #rooms .rgrid{grid-template-columns:1fr}}

/* ---- round 8: display font, home hero, work hero, flow pricing ---- */
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
:root{--j-big:"Bricolage Grotesque",Geist,"Segoe UI Variable Display","Helvetica Neue",Arial,sans-serif}
.t,h1,h2,.big,.book h3{font-family:var(--j-big);font-weight:700;letter-spacing:-.035em}
.stats b,.kp b,.rf i,.gn{font-family:var(--j-big)}

/* home hero: the headline runs the full width on two lines, then copy and the chart side by side */
html[data-pg=home] #tl,html[data-pg=home] #h1{grid-column:1/-1!important}
html[data-pg=home] #h1{font-size:clamp(44px,8.2vw,136px);font-weight:800;line-height:.96;letter-spacing:-.05em;margin:0 0 .22em;color:var(--j-ink)}
html[data-pg=home] #h1 .wd:nth-child(3){font-family:inherit;font-style:normal;font-weight:800;letter-spacing:inherit;display:inline-block;padding:0 .14em .04em;border-radius:.12em;background:var(--a1);color:var(--a1t);transform:rotate(-2deg)}
html[data-pg=home] #h1 .wd:nth-child(n+4){color:transparent;-webkit-text-stroke:1.5px var(--j-ink)}
@media(min-width:981px){html[data-pg=home] .heroshot{grid-row:3/span 6!important;align-self:start}}
@media(max-width:520px){html[data-pg=home] #h1 .wd:nth-child(n+4){-webkit-text-stroke-width:1px}}

/* work hero */
html[data-pg=work] main::before{display:none!important}
html[data-pg=work] h1{font-size:clamp(42px,7.4vw,120px);font-weight:800;line-height:.96;letter-spacing:-.05em;max-width:none}
html[data-pg=work] h1 em{display:block;font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--j-ink)}
html[data-pg=work] .pick-w{font:500 16px/1 var(--j-txt);letter-spacing:-.005em}
html[data-pg=work] .stats span{font:500 12px/1.3 var(--j-txt)}

/* Flow pricing: four even cards */
.sec.paper .who3,.sec.paper .who4{gap:12px!important;border-top:0!important;margin-top:22px}
.sec.paper .w,.sec.paper .w:nth-child(n){padding:22px!important;border:1px solid #d3d3da!important;border-top:3px solid var(--tc)!important;border-radius:18px!important;background:#fff!important}
@media(max-width:900px){.sec.paper .who3,.sec.paper .who4{grid-template-columns:1fr 1fr!important}}
@media(max-width:520px){.sec.paper .who3,.sec.paper .who4{grid-template-columns:1fr!important}}


/* ---- round 9: phone show-more, home headline break ---- */
.mx-btn{display:none}
@media(max-width:700px){
.mx:not(.mx-open)>.mx-extra{display:none!important}
.mx-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:14px 0 0;border:1px solid var(--line2);border-radius:10px;background:transparent;color:var(--j-ink);font:600 14.5px/1 var(--j-txt);cursor:pointer}
#services .mx-btn,.sec.paper .mx-btn,html[data-pg=beyond] #rooms .mx-btn{border-color:#0b0b0e;color:#0b0b0e}
}
/* home headline: the first three words on one line, the rest on the next */
html[data-pg=home] #h1{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.2em;row-gap:.04em}
html[data-pg=home] #h1::before{content:'';flex-basis:100%;height:0;order:1}
html[data-pg=home] #h1 .wd{order:0}
html[data-pg=home] #h1 .wd:nth-child(n+4){order:2}

/* ---- round 10: calmer, more refined heroes ---- */
/* Work: no outlined type (the strokes collided). A solid first line, the second in the serif italic used on About. */
html[data-pg=work] h1{font-size:clamp(40px,6.2vw,100px);font-weight:700;line-height:1;letter-spacing:-.035em}
html[data-pg=work] h1 em{display:block;margin-top:.04em;font-family:var(--j-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--a1);-webkit-text-stroke:0}
html[data-pg=work] .sub{max-width:60ch;font-size:clamp(16px,1.25vw,19px);line-height:1.6}
/* facts: quiet numbers, a short coloured rule above each */
html[data-pg=work] .stats{border-top:1px solid var(--line2);margin-top:40px}
html[data-pg=work] .stats span{position:relative;padding-top:24px}
html[data-pg=work] .stats span::before{content:'';position:absolute;left:0;top:-2px;width:34px;height:3px;background:var(--a1)}
html[data-pg=work] .stats span:nth-child(2)::before{background:var(--a2)}html[data-pg=work] .stats span:nth-child(3)::before{background:var(--a3)}html[data-pg=work] .stats span:nth-child(4)::before{background:var(--j-ink)}
html[data-pg=work] .stats b,html[data-pg=work] .stats span:nth-child(n) b{color:var(--j-ink);font-size:clamp(28px,3.2vw,46px);font-weight:600;letter-spacing:-.03em}
/* home: outlined words get room so their strokes do not run into each other */
html[data-pg=home] #h1{letter-spacing:-.04em}
html[data-pg=home] #h1 .wd:nth-child(n+4){letter-spacing:-.015em;font-weight:700}
/* items opened with "Show more" appear at once */
.mx-open>.mx-extra{opacity:1!important;transform:none!important;animation:none!important}

/* ring v2: no shared 3D context. Each card is transformed on its own (see the ring script on the home page),
   depth is z-index, and the visible face is picked by class, so Safari, Chrome and Firefox agree. */
.ring{perspective:none!important}
.ring-in{transform:none!important;transform-style:flat!important}
.rc{transform-style:flat!important;transition:opacity .5s!important;transition-delay:calc(var(--i)*30ms)!important;will-change:transform}
.rf,.rb{backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
.rb{transform:none!important}
.rc.bk .rf,.rc:not(.bk) .rb{visibility:hidden}

/* Beyond: the fixed 3D scene belongs to the hero, not behind the rest of the page */
body:not(.imm) #gl.past{opacity:0!important;transition:opacity .5s!important}

/* menu v3: the links sit on the centre of the page (not the centre of the gap between logo and button),
   and the logo mark is larger. Phones keep logo left, menu button right. */
nav:has(#nvb) .brand img{width:44px!important;height:44px!important;border-radius:10px!important;content:url(/img/knot-180.png)}
@media(min-width:821px){
nav:has(#nvb){display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:16px}
nav:has(#nvb) .brand{justify-self:start}
nav:has(#nvb) .nl{flex:none!important;margin:0!important;justify-self:center}
nav:has(#nvb) .pill{justify-self:end;margin:0!important}
}
/* menu v3, narrow desktop and tablet landscape (821 to 980px): tighter gaps so seven links, logo and button all fit */
@media(min-width:821px) and (max-width:980px){
nav:has(#nvb){padding-left:20px!important;padding-right:20px!important;column-gap:10px}
nav:has(#nvb) .nl{gap:10px!important}
nav:has(#nvb) .pill{padding:0 10px!important}
}

/* flow charts: no orange or amber. "Today" cards are rose, check cards are sky, on every page that draws the chart */
[class*="afx"]{--afx-verm:#ff4d6d;--afx-verm-ink:#ff8fa3;--afx-gold:#5cc8ff}
.afx-chk{border-color:rgba(92,200,255,.42)!important;background:rgba(92,200,255,.07)!important}
.afx-alert{border-color:rgba(255,77,109,.42)!important;background:rgba(255,77,109,.07)!important}
html[data-pg=flow] .leak{border-top-color:#ff4d6d!important}
/* light blue labels are unreadable on the white panels: use the dark ink there */
#pricing .lbl,.sec.paper .lbl,#services .lbl,#rooms .lbl{color:#33343c!important}
/* audit fixes, 12 Oct: faint text on the white panels, the About headline's struck-out words, equal contact cards */
#roomsCnt,#roomsCnt b{color:#33343c!important}
#services .fp span{color:#5b5c66!important}
html[data-pg=beyond] #rooms .rt .rn{color:#5b5c66!important}
body.jlight .big em{letter-spacing:0;text-decoration:none!important}
body.jlight .big em .w{text-decoration:line-through!important;text-decoration-thickness:.07em!important;text-decoration-color:#ff4d6d!important;margin-right:.14em}
body.jlight .big em .w:last-child{margin-right:0}
/* footers: one centred column on every page. Copyright line, contact line, then the tagline on its own row
   above an evenly spaced link row, the small print centred under it, and the ghost wordmark with open letters. */
.foot{display:flex!important;flex-direction:column;align-items:center;justify-content:center!important;gap:4px!important;text-align:center!important}
.foot>span,.wfoot .fr>span{display:block;width:100%;text-align:center!important}
.wfoot .fr{display:flex!important;flex-direction:column;align-items:center;gap:4px}
.wfoot .wfl{display:flex!important;flex-wrap:wrap;justify-content:center!important;align-items:center;gap:0 24px!important;margin-top:16px!important;font:500 13px/1.4 var(--j-txt)!important;letter-spacing:0!important}
.wfoot .wfl>span{flex:0 0 100%;text-align:center;margin:0 0 4px}
.wfoot .wfl b{margin:0!important;font:600 11.5px/1.5 var(--j-txt)!important;letter-spacing:.1em}
.wfoot .wfl a{min-width:0!important;padding:0!important}
.wfoot .legal{max-width:64ch!important;margin:16px auto 0!important;text-align:center!important}
.wfoot .wm{letter-spacing:.03em!important;font-size:clamp(80px,17vw,220px)!important}
/* contact: the two cards in the row are the same height */
html[data-pg=contact] .row,html[data-pg=contact] .grid2,html[data-pg=contact] .cols{align-items:stretch!important}
/* ghost wordmark: fill it with the page colour over the stroke so a variable font's inner contours do not show */
.wfoot .wm{color:var(--j-bg)!important;-webkit-text-fill-color:var(--j-bg)!important;paint-order:stroke fill;-webkit-text-stroke:2px var(--j-line)!important}
/* systems: the closing panel is the white paper panel used elsewhere, not a solid yellow block */
html[data-pg=systems] .close{background:var(--j-paper)!important;color:#0b0b0e!important;border:0!important}
html[data-pg=systems] .close h2{color:#0b0b0e!important}
html[data-pg=systems] .close p{color:#33343c!important}
html[data-pg=systems] .close .btn{background:#0b0b0e!important;color:#fff!important;border-color:#0b0b0e!important}
/* flow: the "possible duplicate" warning boxes use yellow, not amber */
.fx-mini,.fx-alert{border-color:rgba(255,216,77,.55)!important}

/* ---- 2026-10-14: Motion, the new branch, in the shared menu ----
   The "Motion" link is rose with a small "new" chip on every page that carries the menu, so a regular visitor notices it.
   Page colour set for /motion/ lives in /motion/motion.css. */
nav:has(#nvb) .nl a.nv-new,#nvm a.nv-new{color:#ff4d6d!important}
nav:has(#nvb) .nl a.nv-new::after,#nvm a.nv-new::after{content:'new';display:inline-block;position:static!important;transform:none!important;height:auto!important;width:auto!important;margin-left:6px;padding:3px 6px 2px;border-radius:5px;background:#ff4d6d!important;color:#fff;font:800 8.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;animation:none!important}
nav:has(#nvb) .nl a.nv-new::before{content:none!important}
#nvm a.nv-new::after{font-size:11px;padding:5px 8px 4px;border-radius:6px;vertical-align:middle;position:relative!important;top:-.25em}
@media(max-width:1000px){nav:has(#nvb) .nl{gap:clamp(10px,1.5vw,18px)!important}nav:has(#nvb) .nl a{font-size:10.5px!important}}
@media(max-width:900px){nav:has(#nvb) .nl{gap:8px!important}nav:has(#nvb) .nl a{font-size:10px!important}}

/* 15 Oct: no NEW badge */
a.nv-new::after,#nvm a.nv-new::after,.nvm a.nv-new::after{content:none!important;display:none!important}
/* 15 Oct: one underline on the current page link (the border drew a second line) */
.nl a.on{border-bottom:0!important;padding-bottom:0}