/* Cadre — pitch site. Design law: DESIGN.md v0.3 (Sarvam-derived: pure neutrals, green scale, Switzer) */
@import url('../fonts/fonts.css');
:root{
/* ---- neutrals: Sarvam's pure untinted greys ---- */
--ink:#1F1F1F; --graphite:#3D3D3D; --slate:#666666; --hairline:#E6E6E6;
--mist:#F0F0F0; --paper:#F5F5F5; --surface:#FFFFFF;
/* ---- green scale · Rev 17: matched to the brand lime, anchored on the supplied logo
vector (Untitled-2-06/07.svg .cls-2 = #8DC343). This settles the old four-way
discrepancy (#82BE3C / #83C040 / #8BC541 were all approximations of it).
900 is darkened past the old lime system's #496D21 (6.01) so green text holds
>= 6:1 on white, paper and the 50 wash alike. ---- */
--green-50:#EEF6E2; /* washes, seam gradient, callout grounds ink on it 14.85 */
--green-200:#CFE6A9; /* light fills ink on it 12.20 */
--green-400:#A6D46A; /* CTA hover ink on it 9.61 */
--green-500:#8DC343; /* surfaces, CTA fills, text on ink ink on it 7.86 */
--green-900:#3F651A; /* ALL green text + strokes 6.80 on white, 6.24 on paper */
--primary:var(--green-500);
--resolve:var(--green-900);
--resolve-wash:var(--green-50);
--grad-green:linear-gradient(180deg,var(--green-900) 0%,var(--green-500) 100%);
/* ---- tension: Sarvam's terracotta, sibling of the green ---- */
--tension:#C43D2B; --tension-wash:#FAEBE7;
/* ---- actor identity (option D only). Parties are ACTORS, not states, so a hue
per party costs red/green nothing and finally tells you whose evidence is
whose. Same shape as the green family: tint for surfaces, 900 for strokes. ---- */
--purple-200:#D6C9EC; --purple-900:#4A3570; /* Party A — 10.32:1 on white */
--amber-200:#F2DFA8; --amber-900:#7A5510; /* Party B — 6.70:1 on white */
--seam:#959697;
--font-display:"Switzer",ui-sans-serif,system-ui,sans-serif;
--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
--max:1200px;
--sect:clamp(104px,11vw,168px);
--sect-sm:clamp(64px,7vw,96px);
--ease:cubic-bezier(.22,1,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-in:cubic-bezier(.55,0,1,.45);
--spring:cubic-bezier(.34,1.56,.64,1);
--t-micro:140ms; --t-small:240ms; --t-med:400ms;
--dur:400ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
/* Lenis (README) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
body{
background:var(--surface); color:var(--ink);
font-family:var(--font-display); font-size:18px; font-weight:400; line-height:1.6;
-webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--primary);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.label{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.label.on-dark{color:rgba(255,255,255,.62)}
.mono{font-family:var(--font-mono);letter-spacing:.02em}
hr.rule{border:0;border-top:1px solid var(--hairline)}
/* ---------- nav ---------- */
.nav{
position:fixed;inset:0 0 auto 0;z-index:40;height:64px;
display:flex;align-items:center;
color:var(--ink);
transition:background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease), transform .32s var(--ease);
}
.nav.hidden{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav.on-dark{color:#F4F5F4}
.nav.scrolled{background:color-mix(in srgb, var(--surface) 88%, transparent);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--hairline);color:var(--ink)}
.nav a{text-decoration:none}
.nav .links{display:flex;gap:28px;align-items:center;font-size:15px;font-weight:500}
.nav .links a:not(.btn){opacity:.85;padding:10px 0;min-height:44px;display:inline-flex;align-items:center;
transition:opacity var(--t-micro) var(--ease-out)}
.nav .links a:hover{opacity:1}
.brand{display:flex;align-items:center;gap:2px;font-weight:500;font-size:19px;letter-spacing:.01em}
.btn{
display:inline-flex;align-items:center;gap:8px;justify-content:center;
font-size:15px;font-weight:500;font-family:inherit;line-height:1;
padding:14px 22px;border-radius:4px;border:1px solid transparent;cursor:pointer;
text-decoration:none;
transition:background var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out),
border-color var(--t-micro) var(--ease-out),transform var(--t-micro) var(--ease-out);
}
.btn:active{transform:scale(.975)}
.btn .ar{display:inline-block;transition:transform var(--t-micro) var(--ease-out)}
.btn:hover .ar{transform:translateX(3px)}
.btn-filled{background:var(--primary);color:var(--ink)}
.btn-filled:hover{background:var(--green-400)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn-ghost:hover{background:color-mix(in srgb, currentColor 8%, transparent)}
.nav .btn{padding:11px 18px;min-height:44px;font-size:14.5px;
border-color:color-mix(in srgb, currentColor 38%, transparent)}
.nav .btn:hover{border-color:currentColor;background:color-mix(in srgb, currentColor 10%, transparent)}
/* ---------- film ---------- */
.film-driver{position:relative;height:620vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#6E7873}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.05;z-index:3;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
animation:grain 7s steps(8) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:2;
background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(10,14,12,.26) 100%)}
.seamfade{position:absolute;inset:auto 0 0 0;height:34vh;z-index:4;pointer-events:none;opacity:0;
background:linear-gradient(to bottom, transparent, var(--surface))}
/* beats */
.beat{position:absolute;z-index:5;opacity:0;pointer-events:none;max-width:620px}
.beat.hero > *{position:relative}
.beat.hero{left:50%;transform:translateX(-50%);top:0;height:100svh;padding-top:64px;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:auto;text-align:center;
width:min(900px,calc(100vw - 64px));max-width:none}
/* Two full sentences: at 78px the first alone overflows a line, so the authored
lands mid-block and it sets as three ragged lines that push the CTAs down. */
.beat.hero h1{font-size:clamp(32px,4.4vw,56px);font-weight:500;line-height:1.04;letter-spacing:-.03em;color:#fff;text-shadow:0 1px 30px rgba(10,14,12,.25)}
.beat.hero .sub{margin-top:22px;font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:rgba(255,255,255,.92);max-width:32em;margin-inline:auto}
.beat.hero .cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.beat.hero .btn-ghost{color:#fff}
/* No card, no patch. Legibility comes from a layered halo on the glyphs themselves:
one tight shadow for edge definition, two wide soft ones for separation from the
footage. The film is high-key with white envelopes crossing the text, so the type
is white — dark ink cannot survive the printer stack inside this column. */
.beat.mid{left:max(32px,calc(50vw - 600px));top:36vh;max-width:600px}
.beat.mid p{font-size:clamp(24px,3vw,38px);font-weight:600;letter-spacing:-.02em;line-height:1.18;
color:#fff;
text-shadow:0 1px 2px rgba(8,11,10,.62),
0 2px 14px rgba(8,11,10,.55),
0 6px 44px rgba(8,11,10,.42)}
.beat.mid p .dim{color:rgba(255,255,255,.72)}
.heroscrim{position:absolute;inset:0;z-index:4;pointer-events:none;
background:radial-gradient(120% 85% at 50% 40%, rgba(13,17,15,.60) 0%, rgba(13,17,15,.40) 45%, rgba(13,17,15,.10) 100%)}
.beat.finale{left:max(32px,calc(50vw - 600px));top:26vh;max-width:600px}
.beat.finale h2{font-size:clamp(32px,3.8vw,50px);font-weight:600;letter-spacing:-.025em;line-height:1.08;
color:#fff;text-shadow:0 1px 2px rgba(8,11,10,.62),0 2px 14px rgba(8,11,10,.55),0 6px 44px rgba(8,11,10,.42)}
.beat.finale p{margin-top:14px;font-size:19px;font-weight:500;max-width:26em;color:#fff;
text-shadow:0 1px 2px rgba(8,11,10,.78),
0 2px 10px rgba(8,11,10,.66),
0 4px 30px rgba(8,11,10,.55)}
.beat.finale .mono{display:inline-block;margin-top:18px;font-size:13px;color:#fff;
border:1px solid rgba(255,255,255,.55);border-radius:2px;padding:6px 10px;
text-shadow:0 1px 8px rgba(8,11,10,.6)}
/* day counter + chapter readout */
.counter{position:absolute;top:84px;right:32px;z-index:6;font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;
color:#fff;background:rgba(16,20,18,.38);backdrop-filter:blur(6px);padding:8px 12px;border-radius:2px;opacity:0}
.counter.res{color:var(--primary);background:rgba(20,34,8,.6)}
.scrollhint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;font-weight:500}
.scrollhint::after{content:"";display:block;margin:8px auto 0;width:1px;height:26px;background:linear-gradient(#fff,transparent);animation:drop 1.6s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* loader */
.loader{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#6E7873;transition:opacity .5s var(--ease)}
.loader.done{opacity:0;pointer-events:none}
.loader .brand{color:#fff;font-size:24px}
.loader .track{width:180px;height:2px;background:rgba(255,255,255,.25)}
.loader .track i{display:block;height:100%;width:0;background:#fff;transition:width .2s}
/* ---------- landing zone (film -> content) ---------- */
/* Q1 — the grey band is gone. #seamfade (see .seamfade) already fades the film
stage to --surface by p=1, so starting this at --seam produced white -> grey ->
white: a seam fading FROM a colour that had already left the screen. The 26vh of
breathing room stays; only the grey goes. --seam itself is still used by three
isometric plaque rules. */
/* Rev 20 · the seam band is retired: the statement stage now begins the instant the film releases,
and its own background carries the green swell. */
.landing{height:0;background:none}
/* ---------- the statement (scroll word reveal) ----------
Words rest at --slate and light to --ink as the block crosses the viewport.
Both ends of the existing text ramp: --slate #666 is 5.74:1, documented in
DESIGN.md as the lightest text this system permits, so the un-revealed state
is WCAG-legal. That is where the usual version of this effect fails — it parks
text at ~0.25 opacity, which measures about 1.9:1.
Colour is toggled by class, never tweened: scrubbing colour rewrites every
computed colour each frame and repaints the whole paragraph continuously.
The class toggle touches one or two spans per crossing and lets CSS interpolate.
.w is inline-block ONLY because the per-line rise needs a transform, and an
inline box cannot transform. That is also why this section carries the .vh
screen-reader mitigation, injected by JS in statementInit(). */
/* Rev 14 — the space above was ~4x the space below: .landing already gives 26vh of
air, then --sect added a full section's worth on top, so the text read as having
sunk rather than as being placed. Now the band centres its own content, so the
balance is structural instead of two padding values having to agree. */
/* Rev 18 · S1: the band is a driver (height set by JS ≈ 1.9 viewports) with a sticky
full-viewport stage. Words light against driver progress, finish ~72% through, hold, release. */
.statement-sec{position:relative}
.block.statement-sec{padding:0} /* beats .block (declared later): the stage begins at the section top */
.statement-sec .wrap{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:flex-start;
justify-content:center;padding:calc(64px + 30vh) 32px 0;box-sizing:border-box}
.st-eyebrow{text-align:center;margin-bottom:14px}
/* The closing line is a separate beat, not a continuation. It stays inside the same
paragraph — a block span, so the split still walks it and copy-paste still yields
the break — but it gets air so it stops reading as a run-on. */
.statement .st-close{display:block;margin-top:.04em}
/* "today." lands in green as the penultimate word lights (Rev 16b timing); underline removed Rev 18 */
.statement-sec.drawn .statement .w.w-key{color:var(--green-900)}
/* Q2 — centred, and the measure fixed. It was 17em at 42px, carrying ~35 characters
a line: well under the 45-75 band, which is what produced six choppy lines.
Centring makes a narrow measure worse, not better — a ragged left edge gives the
eye no anchor for the return sweep, and that cost compounds past ~4 lines. So the
size steps down and the measure widens together, landing at 3-4 lines, and the
line-height opens up because centred text needs the extra air. */
.statement{font-size:clamp(40px,5.4vw,76px);font-weight:500;letter-spacing:-.03em;
line-height:1.08;max-width:14em;margin:0 auto;text-align:center;color:var(--slate)}
/* No-JS and reduced motion never see a split, so they get the final state
directly off the paragraph — a structural fallback, not a declared one. */
.statement .w{display:inline-block;color:var(--slate);opacity:0;transform:translateY(14px);
transition:color var(--t-small) var(--ease),
opacity var(--t-med) var(--ease),
transform var(--t-med) var(--ease)}
.statement .w.up{opacity:1;transform:none}
.statement .w.lit{color:var(--ink)}
/* one frame of transition suppression when the sweep jumps (?jump=, anchor, relayout) */
.statement-sec.no-t .w{transition:none}
html.rm .statement,html.no-js .statement{color:var(--ink)}
html.rm .statement-sec,html.no-js .statement-sec{height:auto!important}
html.rm .statement-sec .wrap,html.no-js .statement-sec .wrap{position:static;height:auto;padding:var(--sect-sm) 32px}
html.rm .statement .w-key,html.no-js .statement .w-key{color:var(--green-900)}
html.rm .statement .w,html.no-js .statement .w{opacity:1;transform:none;color:inherit}
@media (max-width:640px){
/* Centring only earns its keep while the line count is low. At 360px the viewport
caps the measure at ~26 characters, which pushes this to 7 lines — and a ragged
left edge over 7 lines costs more than the centring gains. So it goes back to
left-aligned, where every line start is anchored. */
/* Desktop matches h2.head exactly, as asked. Below 640 the viewport caps the
measure, and holding 30px there gives 9 lines at ~20 chars each — well under the
45-75 band. So the mobile end eases to 26px; the desktop step is untouched. */
/* Rev 23: centred on mobile too, vertically in the area below the nav */
.statement{text-align:center;margin:0 auto;max-width:none;line-height:1.12;font-size:36px}
.statement-sec .wrap{align-items:center;padding:64px 20px 0}
/* Rev 18: inline on small screens so the sentence wraps naturally (no orphaned "of") */
.statement .st-close{display:inline;margin:0}
}
/* ---------- THE DOCUMENT JOURNEY (Option B, horizontal conveyor) ---------- */
.station .ghost{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--slate);margin-bottom:20px}
.station .ghost::after{content:" / 06";color:var(--hairline)}
.station.on .st-copy{opacity:1;transform:none}
.station .ghost{opacity:.35;transition:opacity .5s var(--ease)}
.station.on .ghost{opacity:1}
@keyframes bob{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 8px))}}
.sig{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;
stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.1s var(--ease)}
.sig.s2{transition-delay:.45s}
.sigtags .mono{font-size:8.5px;letter-spacing:.1em;color:var(--slate);opacity:0;transition:opacity .5s var(--ease) .9s}
html.rm .station, html.no-js html.rm .st-copy, html.no-js .st-copy{opacity:1;transform:none}
html.rm .station .ghost, html.no-js .station .ghost{opacity:1}
@media (max-width:900px){
.station .ghost{opacity:1}
.st-copy{opacity:1;transform:none}}
.platform{background:var(--surface);border:1px solid var(--hairline);border-radius:8px;overflow:hidden;box-shadow:0 18px 44px rgba(22,25,27,.07)}
.p-top .q.open{color:var(--tension)}
.lyr{position:absolute;inset:0;padding:34px 40px;display:flex;flex-direction:column;justify-content:center;gap:20px;
opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.lyr.on{opacity:1;transform:none}
.p-note.res{color:var(--graphite)}
.tl{display:block;height:8px;border-radius:2px;background:var(--mist);margin:12px 0}
.docflow .side{display:flex;flex-direction:column;gap:10px}
.docflow .side.b{align-items:flex-end}
.lyr.on .side.a .chip{transform:translateX(10px)}
.lyr.on .side.b .chip{transform:translateX(-10px)}
.arb{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:8px;padding:16px 12px 14px;
width:112px;text-align:center;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.arb i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 auto;border-radius:50%;
background:var(--mist);font-style:normal;font-family:var(--font-mono);font-size:12px;color:var(--graphite)}
.arb b{display:block;font-size:12.5px;font-weight:500;margin-top:9px;white-space:nowrap}
.arb .mono{display:block;font-size:9.5px;color:var(--slate);margin-top:3px;letter-spacing:.06em}
.arb .picks{position:absolute;top:-11px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.arb .picks em{font-style:normal;font-family:var(--font-mono);font-size:10px;width:20px;height:20px;border-radius:50%;
display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;
opacity:0;transform:scale(.4);transition:all .4s var(--ease)}
.arb .apptag{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%) scale(.8);font-size:8.5px;letter-spacing:.08em;
background:var(--resolve);color:#fff;border-radius:2px;padding:3px 7px;opacity:0;transition:all .4s var(--ease) .5s}
.lyr.on .arb.pick{border-color:var(--resolve);box-shadow:0 0 0 1px var(--resolve)}
.lyr.on .arb.pick .picks em{opacity:1;transform:scale(1)}
.lyr.on .arb.pick .picks .pb{transition-delay:.25s}
.lyr.on .arb.pick .apptag{opacity:1;transform:translateX(-50%) scale(1)}
.hearing{background:var(--surface);border:1px solid var(--hairline);border-radius:8px;padding:26px;max-width:460px;margin:0 auto;width:100%;text-align:center}
.hz{font-size:11px;letter-spacing:.1em;color:var(--slate)}
.pt{font-size:13px;font-weight:500;background:var(--mist);border-radius:4px;padding:14px 18px}
.pt.arbp{background:var(--resolve-wash);color:var(--resolve)}
.seal{position:absolute;right:26px;bottom:20px;width:74px;height:74px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--resolve);color:#fff;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
box-shadow:0 0 0 3px var(--resolve-wash);
opacity:0;transform:scale(1.7) rotate(-14deg);transition:all .45s var(--spring) .35s}
.lyr.on .seal{opacity:1;transform:scale(1) rotate(-8deg)}
/* reduced-motion / no-JS: show final state, rail fully lit */
html.rm .p-view .lyr, html.no-js .p-view .lyr{display:none}
html.rm .p-view .l5, html.no-js .p-view .l5{display:flex;opacity:1;transform:none;position:static}
html.rm .p-view, html.no-js .p-view{height:auto}
html.rm .seal, html.no-js .seal{opacity:1;transform:scale(1) rotate(-8deg)}
/* ---------- fork diagram (comparison, drawn on enter) ---------- */
.fork{margin-top:var(--sect-sm);background:var(--paper);border:1px solid var(--hairline);border-radius:8px;padding:32px 20px 16px;overflow-x:auto}
.fork svg{min-width:760px}
@media (max-width:900px){.fork svg{min-width:720px} .fork{scrollbar-width:none;mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)} .fork::-webkit-scrollbar{display:none}}
.fp{fill:none;stroke-width:2;stroke-linecap:round}
.fp.trunk{stroke:var(--ink)}
.fp.court{stroke:var(--tension)}
.fp.cadre{stroke:var(--resolve);stroke-width:3}
.fnodes.court circle{fill:var(--tension)}
.fnodes.cadre circle{fill:var(--resolve)}
.fend{fill:var(--resolve)}
.fring{fill:none;stroke:var(--resolve);stroke-width:1.5;opacity:.42}
.flabels text{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;fill:var(--slate);text-anchor:middle}
.flabels.start text{text-anchor:start;fill:var(--graphite)}
.flabels .day{fill:var(--tension)}
.flabels .day.res{fill:var(--resolve);font-size:12.5px}
.flabels .day.still{text-anchor:end}
.fork .fnodes circle,.fork .flabels text,.fork .fend,.fork .fring,.fork .fring2{opacity:1}
.fork.armed .fnodes circle,.fork.armed .flabels.court text,.fork.armed .flabels.cadre text,
.fork.armed .fend,.fork.armed .fring,.fork.armed .fring2,.fork.armed .fgap{opacity:0}
/* the gap between the two endings — the actual argument */
.fgap rect{fill:var(--resolve-wash);opacity:.5}
.fgap .drop{stroke:var(--resolve);stroke-width:1;stroke-dasharray:3 5;opacity:.45}
.fgap .brk{stroke:var(--resolve);stroke-width:1.5;fill:none}
.fgap .gaplabel{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;fill:var(--resolve);text-anchor:middle}
.fgap .gapsub{font-family:var(--font-display);font-size:13px;fill:var(--slate);text-anchor:middle}
.fgap{transition:opacity .5s var(--ease-out)}
.fp.courttail{stroke:url(#courtFade);stroke-width:2}
.fring2{fill:none;stroke:var(--resolve);stroke-width:1;opacity:.18}
/* ---------- content sections ---------- */
section.block{padding:var(--sect) 0}
section.block.tight{padding:var(--sect-sm) 0}
.eyebrow{display:block;margin-bottom:14px}
h2.head{font-size:clamp(30px,3.6vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.12;max-width:20em}
.deck{margin-top:16px;font-size:clamp(18px,1.8vw,22px);line-height:1.55;letter-spacing:-.01em;color:var(--graphite);max-width:58ch}
/* comparison */
.compare{margin-top:56px}
.lane{padding:26px 0;border-top:1px solid var(--hairline)}
.lane .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.lane .who{font-size:15px;font-weight:500}
.lane .who .mono{font-size:12.5px;color:var(--slate);margin-left:10px;font-weight:400}
.lane .days{font-family:var(--font-mono);font-size:13px}
.lane.court .days{color:var(--tension)}
.lane.cadre .days{color:var(--resolve)}
.lane .track{margin-top:14px;height:10px;background:var(--mist);border-radius:2px;overflow:hidden}
.lane .track i{display:block;height:100%;width:0;border-radius:2px}
.lane.court .track i{background:var(--tension)}
.lane.cadre .track i{background:var(--resolve)}
.lane .steps{margin-top:10px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--slate);text-transform:uppercase}
.ctable td.dim{color:var(--graphite)}
.ctable .res{color:var(--resolve)}
.ctable .ten{color:var(--tension)}
.fn{margin-top:18px;font-size:13.5px;color:var(--slate)}
/* trust block */
.band{background:var(--paper)}
.callout.res{background:var(--resolve-wash);border-left-color:var(--resolve)}
.callout .mono{font-size:12.5px;color:var(--resolve)}
/* reveals */
.rv{opacity:0;transform:translateY(16px)}
html.rm .rv, html.no-js .rv{opacity:1;transform:none}
/* ---------- reduced-motion & no-JS ---------- */
html.rm .film-driver, html.no-js .film-driver{height:auto}
html.rm .stage, html.no-js .stage{position:relative;height:auto;min-height:70vh}
html.rm .stage canvas, html.no-js .stage canvas{display:none}
html.rm .beat, html.no-js .beat{position:static;opacity:1;max-width:none;pointer-events:auto;padding:26px 32px;transform:none!important}
html.rm .beat.hero h1, html.no-js .beat.hero h1{color:var(--ink);text-shadow:none}
html.rm .beat.hero .sub, html.no-js .beat.hero .sub{color:var(--graphite)}
html.rm .beat.hero .btn-ghost, html.no-js .beat.hero .btn-ghost{color:var(--ink)}
html.rm .beat.mid p, html.no-js .beat.mid p{color:var(--ink);text-shadow:none;font-size:24px;font-weight:500}
html.rm .beat.mid, html.no-js .beat.mid{max-width:none}
html.rm .beat.finale h2, html.no-js .beat.finale h2{color:var(--ink);text-shadow:none}
html.rm .beat.finale p, html.no-js .beat.finale p{color:var(--graphite);text-shadow:none}
html.rm .beat.finale .mono, html.no-js .beat.finale .mono{color:var(--resolve);border-color:var(--resolve);text-shadow:none}
html.rm .heroscrim, html.no-js .heroscrim{display:none}
html.rm .stage .film-static, html.no-js .stage .film-static{display:block}
html.rm .counter, html.no-js .counter,
html.rm .scrollhint, html.no-js .scrollhint, html.rm .loader, html.no-js .loader,
html.rm .grain, html.no-js .grain, html.rm .vignette, html.no-js .vignette,
html.rm .seamfade, html.no-js .seamfade{display:none}
html.rm .landing, html.no-js .landing{height:0;background:none}
html.rm .stage, html.no-js .stage{background:var(--paper)}
.film-static{display:none}
.film-static img{width:100%;height:auto;border-radius:0}
html.js .film-static{display:none}
@media (prefers-reduced-motion:reduce){ /* belt & braces: JS also sets html.rm */
.scrollhint::after{animation:none}
.grain{animation:none}
}
/* ---------- responsive ---------- */
@media (max-width:900px){
.panel.open{grid-template-columns:1fr}
.p-view{height:360px}
.lyr{padding:20px}
.panelgrid{flex-wrap:wrap}
.arb{width:calc(33% - 12px)}
}
@media (max-width:768px){
body{font-size:17px}
.wrap{padding:0 20px}
section.block{padding:72px 0}
.nav .links a:not(.btn){display:none}
.beat.hero{left:50%;right:auto;width:calc(100vw - 40px)}
.beat.mid{left:20px;right:20px;top:34vh}
.beat.finale{left:20px;right:20px;top:26vh}
.counter{right:20px;top:76px}
.ctable{font-size:14.5px}
.ctable th,.ctable td{padding:12px 10px 12px 0}
.panel{padding:24px}
.stat{padding-right:20px}
}
/* ---------- brand logo images ---------- */
.brand{gap:0;min-height:44px}
.brand .logo{height:32px;width:auto}
.nav .logo-white{display:none}
.nav.on-dark:not(.scrolled) .logo-ink{display:none}
.nav.on-dark:not(.scrolled) .logo-white{display:block}
.loader .logo{height:96px;width:auto}
.p-top .logo{height:26px;width:auto}
footer .logo{height:72px;width:auto;margin-bottom:14px}
/* ---------- comparison matrix (Mellow-style) ---------- */
.matrix{margin-top:var(--sect-sm);font-size:15px}
.mx-head,.mx-row{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1.1fr 1.1fr 1.3fr;gap:12px;align-items:center}
.mx-head{padding:0 28px 14px}
.mx-head span{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.mx-row{padding:24px 28px;border-radius:8px}
.mx-row.hero{background:var(--resolve);color:#fff;box-shadow:0 14px 34px rgba(47,93,58,.22);position:relative;z-index:1}
.mx-row.hero b{font-weight:500}
.mx-row.hero sup{opacity:.7}
.mx-row.hero .mx-lead img{height:30px;width:auto}
.mx-row:not(.hero){color:var(--slate);border-bottom:1px solid var(--hairline)}
.mx-row:not(.hero) .mx-lead{font-weight:500;color:var(--graphite)}
@media (max-width:900px){
/* Rev 23: side-by-side comparison. Two columns (CADRE | court), five aligned rows,
each cell carries its criterion label so every line is a direct pair. */
.mx-head{display:none}
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.mx-row{display:grid;grid-template-columns:1fr;grid-template-rows:56px repeat(5,minmax(0,1fr));gap:0;padding:16px 14px;font-size:14.5px;line-height:1.35;align-items:start}
.mx-row .mx-lead{display:flex;align-items:center;min-height:0;font-size:15px}
.mx-row.hero .mx-lead img{height:22px}
.mx-row [data-c]{padding:10px 0;border-top:1px solid rgba(255,255,255,.18)}
.mx-row:not(.hero) [data-c]{border-top-color:var(--hairline)}
.mx-row [data-c]::before{content:attr(data-c);display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:3px}
.mx-row:not(.hero){border-bottom:0;background:var(--paper);border:1px solid var(--hairline);border-radius:8px}
}
/* ---------- numbers band (Xizt-style) ---------- */
/* Q3 — de-boxed. Separation is carried by space and alignment, not by rules.
Removing the borders also deletes the three border-reset overrides the 2-column
reflow needed at 768px, and with them a whole class of breakpoint bug. */
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;margin-top:var(--sect-sm)}
.nb-item{padding:0}
.nb-v{font-size:clamp(36px,4.2vw,64px);font-weight:500;letter-spacing:-.03em;line-height:1;white-space:nowrap;color:var(--green-900)}
.nb-v i{font-style:normal;letter-spacing:-.02em}
.nb-v .rupee{font-size:.62em;vertical-align:.14em;margin-right:2px}
.nb-v .nb-pre{font-size:.42em;letter-spacing:.02em;vertical-align:.26em;margin-right:6px;color:var(--slate)}
.nb-v .nb-lt{font-size:.62em;vertical-align:.14em;margin-right:2px;color:var(--green-900)}
.nb-v em{font-style:normal;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;color:var(--slate);margin-left:6px}
.nb-l{margin-top:10px;line-height:1.45}
@media (max-width:900px){
.numbers{grid-template-columns:1fr 1fr;gap:28px 24px}
}
.mq-head{max-width:64ch;margin:0 auto;text-align:center}
.mq-head .head{max-width:none;margin:0 auto}
.mq-head .mq-copy{margin-left:auto;margin-right:auto}
.mq-copy{margin-top:16px;font-size:16px;line-height:1.6;color:var(--graphite);max-width:58ch}
.marquee{margin-top:var(--sect-sm);overflow:hidden;position:relative;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 36s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-16.6667%)}}
.mq-set{display:flex;align-items:center;gap:clamp(64px,7vw,104px);padding-right:clamp(64px,7vw,104px)}
.mq-set img{height:34px;width:auto;filter:grayscale(1);opacity:.62;transition:filter var(--t-small) var(--ease-out),opacity var(--t-small) var(--ease-out)}
.mq-set img:hover{filter:none;opacity:1}
html.rm .mq-track, html.no-js .mq-track{animation:none;flex-wrap:wrap;width:auto;gap:32px}
html.rm .mq-set[aria-hidden], html.no-js .mq-set[aria-hidden]{display:none}
html.rm .marquee, html.no-js .marquee{-webkit-mask-image:none;mask-image:none;padding:0 32px;max-width:var(--max);margin-left:auto;margin-right:auto}
.marquee .mq-set{flex-wrap:nowrap}
/* ---------- the sealed band (closing CTA) ---------- */
/* ═══════════ GRADIENTS (Rev 13 master) ═══════════
Two rules keep this Cadre and not a SaaS dashboard:
1. Single-hue VALUE ramps only, never hue-to-hue. A green sliding into a teal
reads as decoration; a green darkening reads as light falling on it.
2. Never under text that must hold AA. Each ramp keeps its measured ratio at the
DARKEST end, so the worst case still passes.
The stat row deliberately has NO gradient — a wash there painted a white patch on
a band that already had a ground. */
/* the primary CTA — the most-seen green surface on the page.
Ramp lightens at the top, so ink sits on the lightest part. */
.btn-filled{background:linear-gradient(180deg,
color-mix(in srgb,var(--green-500) 92%,#fff) 0%,
var(--green-500) 55%,
color-mix(in srgb,var(--green-500) 86%,var(--green-900)) 100%)}
.btn-filled:hover{background:linear-gradient(180deg,
var(--green-500) 0%,
color-mix(in srgb,var(--green-500) 88%,var(--green-900)) 100%)}
/* the alternate band — large surface, so the ramp is very shallow.
The hairlines still carry the structure. */
.band{background:var(--surface)} /* Rev 20: flat, gradient removed */
/* the statement — a whisper, so the film's dark exit resolves into green
rather than into flat white */
/* picks up exactly where .landing left off, so the two read as one swell
instead of banding where white meets tint a second time */
.statement-sec{background:linear-gradient(180deg,
var(--surface) 0%, color-mix(in srgb,var(--green-50) 60%,var(--surface)) 18%, var(--surface) 62%)}
/* the closing band — deepen the existing radial with the master green */
.sealband{background:
radial-gradient(70% 60% at 92% 6%, color-mix(in srgb,var(--green-500) 30%,transparent) 0%, transparent 68%),
radial-gradient(120% 90% at 15% 0%, #1F1F1F 0%, #141414 60%)}
.sealband{position:relative;padding:var(--sect) 0;background:var(--ink);color:#F5F5F5;overflow:hidden}
/* Restored after the Rev 12 strip. These were deleted because they carried the `sb-`
prefix, which I had assumed meant "storyboard" — but the sealband reused those class
names, so removing the storyboard took the clause section's layout with it.
Renamed `cl-` so that collision cannot happen again. */
.cl-bg{position:absolute;inset:0;background:url('../../film/frames/f_0301.jpg') center 38%/cover no-repeat;
opacity:.16;filter:saturate(.6)}
.cl-in{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
.cl-copy .label{color:#9BA6A0}
.cl-copy h2{margin-top:20px;font-size:clamp(36px,4.4vw,60px);font-weight:500;letter-spacing:-.025em;line-height:1.06;color:#fff}
.cl-copy .deck{color:#B9C2BD;margin-top:20px;max-width:30em}
.sealband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,transparent 30%,transparent 70%,var(--ink) 100%);pointer-events:none}
.sealband .cta-row{margin-top:40px}
.btn-resolve{background:var(--primary);color:var(--ink)}
.btn-resolve:hover{background:var(--green-400)}
.sealband .btn-ghost{color:#F5F5F5}
.clausecard{position:relative;background:var(--surface);color:var(--graphite);border-radius:8px;padding:30px 32px 76px;
box-shadow:0 30px 70px rgba(0,0,0,.4);transform:rotate(-1.2deg);
animation:bob2 5s var(--ease) 3}
@keyframes bob2{0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(-1.2deg) translateY(-9px)}}
.cc-title{display:block;font-size:11px;letter-spacing:.12em;color:var(--slate);margin-bottom:14px}
.cc-text{font-size:12.5px;line-height:1.7;letter-spacing:.01em}
.clausecard button{position:absolute;left:32px;bottom:24px;font:500 12.5px/1 var(--font-display);letter-spacing:.05em;
color:var(--ink);background:var(--primary);border:0;border-radius:4px;padding:15px 18px;min-height:44px;cursor:pointer;transition:background .25s var(--ease)}
.clausecard button:hover{background:var(--green-400)}
.clausecard button.ok{background:var(--primary)}
.ccseal{position:absolute;right:24px;bottom:20px;width:70px;height:70px;border-radius:50%;
display:flex;align-items:center;justify-content:center;background:var(--resolve);color:#fff;
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;box-shadow:0 0 0 3px var(--resolve-wash);
transform:rotate(-8deg)}
.ccseal.stamp{animation:stampin .45s var(--spring)}
@keyframes stampin{0%{transform:scale(1.8) rotate(-14deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:1}}
@media (max-width:900px){
.cl-in{grid-template-columns:1fr;gap:48px}
.sealband{padding:84px 0 96px}}
html.rm .clausecard, html.no-js .clausecard{animation:none;transform:none}
/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:0.85fr 1.15fr;gap:72px;align-items:start}
.faq-head .head{max-width:12em}
.faq-list details{border-top:1px solid var(--hairline)}
.faq-list details:last-child{border-bottom:1px solid var(--hairline)}
.faq-list summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;min-height:44px;
font-size:18px;font-weight:500;letter-spacing:-.01em;transition:color var(--t-micro) var(--ease-out)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--resolve)}
.faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;
margin-top:-7px;pointer-events:none;
background:
linear-gradient(var(--resolve),var(--resolve)) center/14px 1.5px no-repeat,
linear-gradient(var(--resolve),var(--resolve)) center/1.5px 14px no-repeat;
transition:transform var(--t-small) var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(135deg)}
.faq-list .fa{padding:0 56px 28px 0;font-size:16px;line-height:1.7;color:var(--slate);max-width:68ch}
@media (max-width:900px){
.faq-wrap{grid-template-columns:1fr;gap:32px}
.faq-list summary{font-size:16.5px;padding-right:36px}
}
/* ---------- footer (product-grade) ---------- */
footer{background:var(--paper);border-top:1px solid var(--hairline);padding:var(--sect-sm) 0 40px;margin-top:0}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:56px;align-items:start}
.ft-label{display:block;margin-bottom:14px}
.ft-col{padding-top:6px}
.ft-brand .logo{height:72px;width:auto}
.mx-lead .logo{height:22px;width:auto}
.ft-desc{margin-top:20px;font-size:15px;line-height:1.6;color:var(--slate);max-width:32ch}
.ft-contact{list-style:none;margin-top:0;display:flex;flex-direction:column;gap:4px;
font-size:14.5px;line-height:1.5;color:var(--slate)}
.ft-contact a{display:inline-block;padding:5px 0;min-height:24px;text-decoration:none;transition:color var(--t-micro) var(--ease-out)}
.ft-contact a:hover{color:var(--ink)}
.ft-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ft-links a{display:inline-block;padding:8px 0;min-height:24px;font-size:15px;line-height:1.45;color:var(--graphite);
text-decoration:none;transition:color var(--t-micro) var(--ease-out)}
.ft-links a:hover{color:var(--ink)}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
border-top:1px solid var(--hairline);padding-top:26px;font-size:13.5px;color:var(--slate)}
.ft-reg{font-size:12px;letter-spacing:.04em}
@media (max-width:900px){
.ft-top{grid-template-columns:1fr;gap:32px;padding-bottom:40px}
.ft-brand .logo{height:48px}
.ft-links a,.ft-contact a{padding:11px 0}
}
/* ---------- reduced-motion: global kill switch (skill-prescribed) ---------- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* skip link — keyboard users */
.skiplink{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--ink);color:#fff;
padding:12px 18px;border-radius:4px;font-size:14px;font-weight:500;text-decoration:none}
.skiplink:focus{left:32px}
/* ---------- wordmark (Option B: marks quieted, green the single accent) ---------- */
.wm{font-weight:500;font-size:22px;letter-spacing:-.035em;line-height:1;display:inline-flex;align-items:center;color:inherit}
.wm .q{font-style:normal;font-size:.62em;line-height:0;position:relative;top:-.16em;letter-spacing:0}
.wm .q.o{color:var(--slate);margin-right:.04em}
.wm .q.c{color:var(--green-900);margin-left:.04em}
.wm-lg{font-size:34px}
.nav.on-dark:not(.scrolled) .wm .q.o{color:rgba(255,255,255,.6)}
.nav.on-dark:not(.scrolled) .wm .q.c{color:var(--green-500)}
.loader .wm .q.o{color:rgba(255,255,255,.6)}
.loader .wm .q.c{color:var(--green-500)}
.loader .wm{color:#fff}
.mx-row.hero .wm{color:#fff}
.mx-row.hero .wm .q.o{color:rgba(255,255,255,.6)}
.mx-row.hero .wm .q.c{color:var(--green-500)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- arbitrators (dark stage, photo cards) ---------- */
.arbs{position:relative;padding:var(--sect) 0 0;color:#fff;overflow:hidden;background:#141414;
background-image:radial-gradient(120% 90% at 15% 0%, #1F1F1F 0%, #141414 60%),
radial-gradient(70% 60% at 95% 8%, rgba(73,109,33,.30) 0%, transparent 70%)}
.arb-top{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:end;padding-bottom:var(--sect-sm)}
.arb-lede h2{margin-top:22px;font-size:clamp(34px,4.6vw,62px);font-weight:500;line-height:1.02;letter-spacing:-.03em}
.arb-note p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.72);max-width:46ch}
.arb-note p+p{margin-top:16px}
.arb-note em{font-style:italic;color:#fff}
.btn-onfill{margin-top:28px;background:var(--green-500);color:var(--ink)}
.btn-onfill:hover{background:var(--green-400)}
.marquee.cards{margin-top:0;padding-bottom:var(--sect)}
.marquee.cards .mq-set{gap:20px;padding-right:20px;align-items:stretch}
.arbcard{flex:0 0 268px;border-radius:8px;overflow:hidden;position:relative;background:#1A1A1A;
border:1px solid rgba(255,255,255,.10);transition:border-color var(--t-small) var(--ease-out)}
.arbcard img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.04);
transition:filter var(--t-med) var(--ease-out)}
.arbcard:hover{border-color:rgba(131,192,64,.5)}
.arbcard:hover img{filter:grayscale(0) contrast(1)}
.ac-txt{position:absolute;inset:auto 0 0 0;padding:22px 20px 18px;
background:linear-gradient(180deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.86) 42%,rgba(20,20,20,.96) 100%)}
.ac-txt b{display:block;font-size:18px;font-weight:500;letter-spacing:-.01em}
.ac-txt span{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.68)}
@media (max-width:900px){
.arb-top{grid-template-columns:1fr;gap:32px;align-items:start}
.arbcard{flex-basis:224px}
}
html.rm .marquee.cards .mq-track, html.no-js .marquee.cards .mq-track{flex-wrap:wrap;gap:20px;justify-content:center}
/* ---------- testimonials (person-forward) ---------- */
.v-head{max-width:62ch;margin:0 auto;text-align:center}
.v-head .head{max-width:none;margin:0 auto}
.v-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:var(--sect-sm)}
.vcard{display:flex;flex-direction:column;justify-content:space-between;
border:1px solid var(--hairline);border-radius:8px;padding:38px 36px 30px;background:var(--surface);
transition:border-color var(--t-small) var(--ease-out),box-shadow var(--t-small) var(--ease-out)}
.vcard:hover{border-color:#CFCFCF;box-shadow:0 14px 36px rgba(31,31,31,.07)}
.vcard blockquote p{font-size:19.5px;line-height:1.55;letter-spacing:-.012em;color:var(--ink)}
.vcard blockquote p::before{content:"\201C";color:var(--tension);font-family:Georgia,serif;
font-size:1.6em;line-height:0;vertical-align:-.16em;margin-right:.06em}
.vcard figcaption{display:flex;align-items:center;gap:15px;margin-top:32px;
padding-top:24px;border-top:1px solid var(--hairline)}
.vcard figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px}
.vc-who b{display:block;font-size:15.5px;font-weight:500;color:var(--ink)}
.vc-who em{display:block;margin-top:3px;font-style:normal;font-size:13.5px;color:var(--slate)}
@media (max-width:900px){
.v-grid{grid-template-columns:1fr;gap:18px}
.vcard{padding:30px 26px 24px}
.vcard blockquote p{font-size:18px}
}
/* nav secondary — text only, no border */
.nav-login{font-size:15px;font-weight:500;opacity:.85;padding:10px 0;min-height:44px;
display:inline-flex;align-items:center;transition:opacity var(--t-micro) var(--ease-out)}
.nav-login:hover{opacity:1}
/* testimonial attribution — name leads */
.vc-who b{display:block;font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.vc-who em{display:block;margin-top:2px;font-style:normal;font-size:13.5px;color:var(--slate)}
.vc-who .vc-org{margin-top:1px;font-size:13px;color:var(--slate);opacity:.85}
@keyframes sbpulse{0%,100%{scale:1.06}50%{scale:1.18}}
/* ══════════════ 01B-D · THE ISOMETRIC WORLD (option D) ══════════════ */
.iso-driver{position:relative}
.iso-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--surface);
display:grid;grid-template-rows:auto 1fr}
.iso-head{padding:clamp(72px,8vh,96px) 0 0}
.iso-head .head{max-width:16em}
.iso-wrap{--iso-t:clamp(46px,6vh,72px);--iso-b:clamp(10px,2.5vh,32px);
position:relative;display:grid;min-height:0}
#isoscene{position:absolute;top:var(--iso-t);left:0;right:0;margin:0 auto;width:100%;
height:calc(100% - var(--iso-t) - var(--iso-b));max-width:min(1180px,94vw);overflow:visible}
.iso-eyerow{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.iso-step{font-size:11px;letter-spacing:.08em;color:var(--slate);flex:none}
/* ---- the world: one hue, six values; green is accent only ---- */
.ground{fill:var(--paper)}
.gl{stroke:var(--hairline);stroke-width:1;opacity:.55}
.shadow{fill:#1F1F1F;opacity:.055}
.f-t{fill:#FFFFFF} .f-l{fill:#E8E8E8} .f-r{fill:#D2D2D2}
.hub .f-t{fill:#FFFFFF} .hub .f-l{fill:#EDEDED} .hub .f-r{fill:#DCDCDC}
.hub-roof{fill:#F7F7F7}
.vent-top{fill:#FAFAFA;stroke:#1F1F1F;stroke-width:.9;vector-effect:non-scaling-stroke}
.glass{fill:#C4CBC0;opacity:.55}
.vent .f-t{fill:#F0F0F0} .vent .f-l{fill:#DFDFDF} .vent .f-r{fill:#CCCCCC}
/* ---- tinted glass: translucent faces, stroked in the family's 900 ---- */
.office .solid polygon,.figure .solid polygon,.crate polygon{fill-opacity:.82}
#partyA .figure .f-t,#partyA .legs .f-t,#partyA .torso .f-t,#partyA .head .f-t,#partyA .crate .f-t,.oA .twr .f-t,.oA .cap .f-t{fill:var(--purple-200)}
#partyA .figure .f-l,#partyA .crate .f-l,.oA .twr .f-l,.oA .cap .f-l{fill:#BFAEDD}
#partyA .figure .f-r,#partyA .crate .f-r,.oA .twr .f-r,.oA .cap .f-r{fill:#A895CE}
#partyB .figure .f-t,#partyB .legs .f-t,#partyB .torso .f-t,#partyB .head .f-t,#partyB .crate .f-t,.oB .twr .f-t,.oB .cap .f-t{fill:var(--amber-200)}
#partyB .figure .f-l,#partyB .crate .f-l,.oB .twr .f-l,.oB .cap .f-l{fill:#E5CB86}
#partyB .figure .f-r,#partyB .crate .f-r,.oB .twr .f-r,.oB .cap .f-r{fill:#D4B76A}
#partyA .solid polygon,.oA .solid polygon{stroke:var(--purple-900);stroke-width:1}
#partyB .solid polygon,.oB .solid polygon{stroke:var(--amber-900);stroke-width:1}
.figure .head .f-t{fill-opacity:1}
/* windows: dark voids by default, lit in sequence at beat 6 */
.win{fill:#6E6E7A;fill-opacity:.5;stroke:none}
.oA .win{fill:var(--purple-900)} .oB .win{fill:var(--amber-900)}
.rec .f-t{fill:#FFFFFF} .rec .f-l{fill:#E4EFD9} .rec .f-r{fill:#D3E5C1}
.arb .f-t{fill:#4A4A4A} .arb .f-l{fill:#333333} .arb .f-r{fill:#242424}
.solid polygon{stroke:#1F1F1F;stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hub polygon{stroke-width:1.1}
.rec polygon{stroke:var(--green-900);stroke-width:1.1}
.link{stroke:var(--green-900);stroke-width:2.5;stroke-linecap:round;
transition:stroke var(--t-small) var(--ease)}
.iso-driver.split .link{stroke:var(--tension)}
.doc{fill:#FFFFFF;stroke:#1F1F1F;stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dwrap,.arbg{opacity:0}
.clause-rule{stroke:#B4B4B4;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.clause-mark{stroke:var(--green-900);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.award-doc{fill:#FFFFFF;stroke:#1F1F1F;stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.seal{fill:var(--green-500);stroke:var(--green-900);stroke-width:1.6}
.seal-ring{fill:none;stroke:var(--green-900);stroke-width:1.2;opacity:.38}
.tether{stroke:var(--green-900);stroke-width:1.2;stroke-dasharray:3 4;opacity:.5}
.award-rule{stroke:#B4B4B4;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.award{opacity:0}
/* ---- plaques: anchored to real SVG elements by JS, never to a percentage ---- */
.plaque{position:absolute;left:0;top:0;transform:translate(-50%,-100%);opacity:0;
transition:opacity var(--t-small) var(--ease);pointer-events:none;will-change:transform}
.plaque em{font-style:normal;display:block;background:var(--ink);color:#fff;
padding:7px 12px;border-radius:4px;font:500 11.5px/1 var(--font-display);
letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.plaque::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;
background:var(--ink);opacity:.45}
.plaque.on{opacity:1}
.plaque.res em{background:var(--green-900)}
.plaque.res::after{background:var(--green-900)}
.plaque.ten em{background:var(--tension)}
.plaque.ten::after{background:var(--tension)}
/* "business continues" reads as a quiet running state, not a headline */
#bzA em,#bzB em{background:var(--surface);color:var(--slate);border:1px solid var(--hairline);
font-size:10px;letter-spacing:.08em}
#bzA::after,#bzB::after{background:var(--seam)}
.iso-head .head{transition:opacity var(--t-small) var(--ease)}
.iso-sub{margin-top:14px;max-width:34em;font-size:clamp(16px,1.5vw,19px);line-height:1.5;
letter-spacing:-.01em;color:var(--graphite);transition:opacity var(--t-small) var(--ease)}
.iso-head.swap .head,.iso-head.swap .iso-sub{opacity:0}
/* ---- fallback (reduced motion / no JS) ---- */
.iso-fallback{display:none;list-style:none;counter-reset:iso;margin:24px auto 0;padding:0}
.iso-fallback li{counter-increment:iso;padding:22px 0 22px 64px;border-top:1px solid var(--hairline);
position:relative;font-size:16px;color:var(--graphite);max-width:720px}
.iso-fallback li::before{content:"0" counter(iso);position:absolute;left:0;top:24px;
font-family:var(--font-mono);font-size:12px;color:var(--slate);letter-spacing:.06em}
.iso-fallback li b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}
html.rm .iso-driver,html.no-js .iso-driver{height:auto!important}
html.rm .iso-stage,html.no-js .iso-stage{position:static;height:auto;overflow:visible;padding:72px 0 48px;display:block}
html.rm .iso-head,html.no-js .iso-head{padding:0 0 8px}
html.rm .iso-wrap,html.no-js .iso-wrap{display:none}
html.rm .iso-fallback,html.no-js .iso-fallback{display:block}
@media (max-width:900px){
.iso-head{padding-top:84px}
.plaque em{font-size:9.5px;padding:5px 8px}
.plaque::after{height:10px}
#bzA em,#bzB em{font-size:8.5px}
.iso-sub{font-size:15px;margin-top:10px}
/* the small frame cannot carry detail labels without collisions */
#dlA,#dlB,#flUp,#flDn,#pqC,#pqR{display:none}
}
/* option D · beat 6 — "their work won't stop" is carried by continuing motion,
never by dimming the parties (dimming reads as "they went away"). */
/* a company still trading reads better as lit windows than as bobbing crates */
.iso-driver.working .win{animation:isolit 3.4s steps(1,end) infinite}
.iso-driver.working .oB .win{animation-delay:1.7s}
.iso-driver.working .win:nth-of-type(3n){animation-delay:.85s}
.iso-driver.working .win:nth-of-type(4n){animation-delay:2.4s}
@keyframes isolit{0%,100%{fill-opacity:.5}40%{fill-opacity:.95}70%{fill-opacity:.5}}
/* document names, flow direction, and the outcome */
.plaque.doclab em{background:var(--surface);border:1px solid var(--hairline);font-size:9.5px;
letter-spacing:.06em;text-transform:none}
#dlA em{color:var(--purple-900)} #dlB em{color:var(--amber-900)}
.plaque.doclab::after{background:var(--seam)}
#flUp{margin-left:-58px}
#flDn{margin-left:58px}
.plaque.flow em{background:none;color:var(--slate);font-size:9.5px;padding:0;letter-spacing:.08em}
.plaque.flow::after{display:none}
/* Both sides receive the award and both read Resolved. Process-led, no winner or loser (client rule, Rev 15). */
.plaque.outcome em{font-size:12px;font-weight:600;letter-spacing:.08em;padding:6px 12px}
.plaque.outcome em{background:var(--green-900);color:#fff}
.plaque.outcome::after{background:var(--green-900)}
/* ---------- 03 · the platform: four features, sticky list + swapped art (Rev 15) ---------- */
.feat-driver{position:relative;background:var(--surface)}
.feat-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.feat-stage .wrap{width:100%}
.feat-head{max-width:34em}
.feat-head .head{max-width:24em}
.feat-list{list-style:none;position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:72px;
margin-top:clamp(36px,4vw,56px);min-height:min(56vh,520px)}
/* progress rule: fills top→bottom with scroll progress (--fp 0..1). transform-only, portable */
.feat-list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--green-900);
transform:scaleY(var(--fp,0));transform-origin:top center;pointer-events:none}
.feat{grid-column:1;padding:18px 0 18px 22px;border-left:1px solid var(--hairline);
transition:border-color var(--t-med) var(--ease)}
.feat h3{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.018em;line-height:1.2;color:var(--slate);opacity:.7;
transition:color var(--t-med) var(--ease),opacity var(--t-med) var(--ease)}
.feat p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--slate);max-width:32ch;
display:grid;grid-template-rows:0fr;opacity:0;transition:opacity var(--t-med) var(--ease),grid-template-rows var(--t-med) var(--ease)}
.feat p>span{min-height:0;overflow:hidden}
.feat-n{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.08em;color:var(--slate);opacity:.6}
.feat.active{border-left-color:var(--green-900)}
.feat.active h3{color:var(--ink);opacity:1}
.feat.active p{opacity:1;grid-template-rows:1fr}
.feat-fig{position:absolute;inset:0;left:calc(50% + 72px);margin:0;display:flex;align-items:center;justify-content:center;
opacity:0;transform:translateY(10px);pointer-events:none;
transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.feat.active .feat-fig{opacity:1;transform:none}
.feat-fig img{max-width:min(100%,380px);max-height:min(40vh,380px);width:auto;height:auto}
/* static fallbacks: reduced motion, no JS, narrow — everything stacked, art under its text */
html.rm .feat-driver,html.no-js .feat-driver{height:auto!important}
html.rm .feat-stage,html.no-js .feat-stage{position:static;height:auto;overflow:visible;padding:var(--sect) 0}
html.rm .feat-list,html.no-js .feat-list{display:block;min-height:0}
html.rm .feat,html.no-js .feat{margin-bottom:40px}
html.rm .feat h3,html.no-js .feat h3{color:var(--ink);opacity:1}
html.rm .feat p,html.no-js .feat p{opacity:1;grid-template-rows:1fr}
html.rm .feat-list::before,html.no-js .feat-list::before{display:none}
html.rm .feat-fig,html.no-js .feat-fig{position:static;opacity:1;transform:none;justify-content:flex-start;margin-top:18px}
@media (max-width:900px){
/* Rev 22: same sticky engine on mobile, single column: head, shared art slot, list */
.feat-stage .wrap{padding-top:64px}
.feat-head .head{font-size:clamp(28px,7vw,36px)}
.feat-list{display:block;min-height:0;margin-top:20px;padding-top:196px}
.feat{padding:12px 0 12px 18px}
.feat h3{font-size:clamp(19px,5.2vw,22px)}
.feat p{font-size:15px;margin-top:6px}
.feat-fig{inset:auto;left:0;right:0;top:0;height:180px;margin:0}
.feat-list::before{top:196px}
.feat-fig img{max-width:min(42vw,180px);max-height:180px}
}
}
/* ---------- 06B · contact (Rev 15) ---------- */
.contact-sec{background:var(--paper);border-top:1px solid var(--hairline)}
.contact-in{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}
.contact-art{display:block;margin-top:40px;max-width:420px;width:100%;height:auto}
.contact-form{display:flex;flex-direction:column;gap:18px;background:var(--surface);border:1px solid var(--hairline);padding:32px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cf-field{display:flex;flex-direction:column;gap:6px}
.cf-field span{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.cf-field input,.cf-field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
border:1px solid var(--hairline);border-radius:0;padding:12px 14px;width:100%;transition:border-color var(--t-small) var(--ease)}
.cf-field textarea{resize:vertical;min-height:110px}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--green-900);box-shadow:0 0 0 3px var(--green-50)}
.cf-submit{align-self:flex-start;margin-top:6px}
.cf-note{font-size:12px;color:var(--slate)}
@media (max-width:900px){
.contact-in{grid-template-columns:1fr;gap:40px}
.cf-row{grid-template-columns:1fr}
.contact-art{max-width:320px}
.contact-form{padding:24px}
}
/* ---------- Rev 18 · H1: heading word-rise. Per-word masks (not per-line) so
headings and
reflow stay safe. Padding/negative margin keeps descenders inside the mask at rest. ---------- */
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.hwi{display:inline-block;will-change:transform}
/* ---------- Rev 19 · #platform on a dark ground, like the brochure's back page ---------- */
.feat-driver{background:#141414;color:#F5F5F5}
.feat-driver .eyebrow{color:var(--green-500)}
.feat-driver .head{color:#fff}
.feat h3{color:rgba(255,255,255,.72)}
.feat.active h3{color:#fff}
.feat p{color:#B9C2BD}
.feat{border-left-color:rgba(255,255,255,.14)}
.feat.active{border-left-color:var(--green-500)}
.feat-list::before{background:var(--green-500)}
html.rm .feat h3,html.no-js .feat h3{color:#fff}