/* ============ Tokens (all colour lives here; HSL channels) ============ */
:root{
  --navy-950: 205 83% 8%;   /* page */
  --navy-900: 203 76% 11%;  /* bands */
  --navy-850: 203 70% 14%;  /* raised UI snippet */
  --line:     203 52% 21%;  /* hairlines */
  --line-soft:203 52% 16%;
  --field:    203 34% 36%;  /* input borders: 3:1 against the page */
  --bone:     199 33% 94%;  /* primary text */
  --mist:     201 24% 79%;  /* secondary text: 11:1 on the page, 10:1 on bands (06/11, Matt: easier on the eyes) */
  --teal:     174 66% 51%;  /* teal-cyan: emphasis on dark */
  --teal-deep:182 72% 30%;
  --lime:     73 79% 58%;   /* lime: the one action colour */
  --lime-hi:  72 84% 68%;
  --on-lime:  205 83% 8%;

  --fs-body:  1.125rem;     /* 18px desktop; 19px on phones (below) */
  --fs-small: 1rem;         /* captions, labels, meta: never under 16px */
  --fs-lead:  clamp(1.1875rem, 1.5vw, 1.3125rem);
  --f-sans: "Alpino", "Segoe UI", sans-serif;
  --f-tech: "Pilcrow Rounded", "Alpino", sans-serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --wrap: 1200px; --gutter: clamp(20px, 5vw, 40px);
  --r-sm: 6px; --r-md: 10px; --r-pill: 999px;

  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-fast: 160ms; --dur-base: 240ms; --dur-reveal: 560ms;
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:76px}
a,button,summary,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:hsl(var(--navy-950));color:hsl(var(--bone));font-family:var(--f-sans);font-size:var(--fs-body);line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
[hidden]{display:none !important}
a{color:inherit}
:is(button,[role=button],a[href],summary,label[for],select){cursor:pointer}
:focus-visible{outline:2px solid hsl(var(--teal));outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--s2);top:-100px;z-index:100;background:hsl(var(--lime));color:hsl(var(--on-lime));padding:12px 16px;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.skip:focus{top:var(--s2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.icon{width:20px;height:20px;fill:currentColor;flex:none}

h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.6rem, 5.6vw, 4.9rem);line-height:1.1;letter-spacing:-.035em}
h2{font-size:clamp(2rem, 3.6vw, 3.1rem);line-height:1.14;letter-spacing:-.03em}
h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
.lead{font-size:var(--fs-lead);line-height:1.55;color:hsl(var(--mist));max-width:36em}
.muted{color:hsl(var(--mist))}
.accent{color:hsl(var(--teal))}
section{position:relative}
.sec{padding:var(--s8) 0}
.band{background:hsl(var(--navy-900));border-block:1px solid hsl(var(--line-soft))}
.head{display:grid;gap:var(--s2);max-width:760px;margin-bottom:var(--s6)}

/* ============ Buttons ============
   Mechanic ported from Uiverse "Send" button by adamgiebl (uiverse.io/adamgiebl/smart-moth-68, MIT):
   label and icon share one lane; on hover the icon travels forward inside its reserved slot.
   Re-tokened: lime fill, no scale, colour + icon travel only. */
.btn{--bg:hsl(var(--lime));--fg:hsl(var(--on-lime));display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 22px;border-radius:var(--r-pill);background:var(--bg);color:var(--fg);font:700 1rem/1 var(--f-sans);letter-spacing:-.005em;text-decoration:none;border:1px solid transparent;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);white-space:nowrap}
.btn .lane{position:relative;width:20px;height:20px;overflow:hidden;flex:none}
.btn .lane .icon{position:absolute;inset:0;transition:transform var(--dur-base) var(--ease-out)}
.btn .lane .icon + .icon{transform:translateX(-24px)}
.btn:hover{--bg:hsl(var(--lime-hi))}
.btn:hover .lane .icon:first-child,.btn:focus-visible .lane .icon:first-child{transform:translateX(24px)}
.btn:hover .lane .icon + .icon,.btn:focus-visible .lane .icon + .icon{transform:translateX(0)}
.btn--ghost{--bg:transparent;--fg:hsl(var(--bone));border-color:hsl(var(--line))}
.btn--ghost:hover{--bg:hsl(var(--navy-850));border-color:hsl(var(--teal-deep))}
.btn--sm{min-height:44px;padding:0 14px 0 18px;font-size:var(--fs-small)}
@media (prefers-reduced-motion: reduce){.btn .lane .icon{transition:none}}

/* ============ Nav ============ */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;background:hsl(var(--navy-950));border-bottom:1px solid transparent;transition:border-color var(--dur-base) var(--ease-out)}
.nav.scrolled{border-bottom-color:hsl(var(--line-soft))}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:76px}
.logo{display:flex;align-items:center;min-height:44px;flex:none;line-height:0;text-decoration:none}
.logo img{height:30px;width:auto}
.foot .logo img{height:34px}
.nav__links{display:flex;align-items:center;gap:var(--s4);list-style:none;margin:0;padding:0}
.nav__links a:not(.btn){text-decoration:none;color:hsl(var(--mist));font-size:var(--fs-small);padding:12px 0;transition:color var(--dur-fast) var(--ease-out)}
.nav__links a:not(.btn):hover{color:hsl(var(--bone))}
.nav__toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-sm);background:transparent;border:1px solid hsl(var(--line));color:hsl(var(--bone))}
.nav__toggle .icon--x{display:none}
@media (max-width: 900px){
  .nav__toggle{display:inline-flex}
  .nav__links{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;padding:var(--s2) var(--gutter) var(--s4);background:hsl(var(--navy-950));border-bottom:1px solid hsl(var(--line));display:none}
  .nav__links a:not(.btn){display:block;padding:14px 0;font-size:1.1rem;color:hsl(var(--bone));border-bottom:1px solid hsl(var(--line-soft))}
  .nav__links li:last-child{margin-top:var(--s3)}
  .nav__links .btn{width:100%;justify-content:center}
  .nav.open .nav__links{display:flex}
  .nav.open .icon--list{display:none}
  .nav.open .icon--x{display:block}
}

/* ============ Depth (06/11, Matt + GrayStoke): two soft glows on the page and a faint lattice cut at the K's stroke angle.
   The lattice is a mask over a token colour, so no colour lives in the data URI. ============ */
body{background:radial-gradient(1100px 620px at 78% -180px, hsl(var(--teal) / .09), transparent 62%),radial-gradient(900px 520px at -10% 420px, hsl(var(--teal-deep) / .10), transparent 65%),hsl(var(--navy-950));background-repeat:no-repeat}
/* Sections are translucent so the fixed page graphic shows through while the content scrolls (Matt, 06/11 13:30). */
.band{background:linear-gradient(180deg, hsl(var(--navy-900) / .78), hsl(var(--navy-900) / .6) 70%, hsl(var(--navy-900) / .78))}
.geo{position:absolute;inset:0;z-index:-2;pointer-events:none;background:hsl(var(--teal) / .09);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96'%3E%3Cpath d='M0 96 60 0M60 96 120 0' stroke='black' fill='none'/%3E%3C/svg%3E"),radial-gradient(ellipse 70% 80% at 80% 30%, black, transparent 72%);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96'%3E%3Cpath d='M0 96 60 0M60 96 120 0' stroke='black' fill='none'/%3E%3C/svg%3E"),radial-gradient(ellipse 70% 80% at 80% 30%, black, transparent 72%);
  -webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat}
.close .geo{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96'%3E%3Cpath d='M0 96 60 0M60 96 120 0' stroke='black' fill='none'/%3E%3C/svg%3E"),radial-gradient(ellipse 60% 90% at 70% 60%, black, transparent 70%);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96'%3E%3Cpath d='M0 96 60 0M60 96 120 0' stroke='black' fill='none'/%3E%3C/svg%3E"),radial-gradient(ellipse 60% 90% at 70% 60%, black, transparent 70%)}
.close::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(700px 380px at 64% 55%, hsl(var(--teal) / .08), transparent 70%)}
@media (max-width: 700px){.geo{-webkit-mask-size:96px 77px,100% 100%;mask-size:96px 77px,100% 100%}}

/* ============ Hero: signal paths are the section background ============ */
.hero{min-height:min(92vh, 900px);display:flex;align-items:center;padding:calc(76px + var(--s7)) 0 var(--s7);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__bg svg{overflow:visible;position:absolute;left:max(56%, 760px);top:50%;width:min(820px, 60vw);height:auto;transform:translateY(-46%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 30%);mask-image:linear-gradient(90deg,transparent 0%,black 30%)}
.hero__bg .p{fill:none;stroke:hsl(var(--teal) / .22);stroke-width:1.2;vector-effect:non-scaling-stroke}
.hero__bg .p--strong{stroke:hsl(var(--teal) / .5)}
.hero__bg .pulse{fill:none;stroke:hsl(var(--lime));stroke-width:2;stroke-linecap:round;stroke-dasharray:90 1200;stroke-dashoffset:90;opacity:0}
/* Continuous loop on every lane: pathLength=1000 so one keyframe set fits all paths; --t (4.6 to 6.9s) and negative --d desync the lanes. Peak opacity .5, no flashing. */
.js .hero__bg .pulse{animation:pulse-run var(--t,6s) cubic-bezier(.4,0,.3,1) var(--d,0s) infinite,pulse-fade var(--t,6s) linear var(--d,0s) infinite}
.js .paused .pulse,.js .paused .ring,.js .paused.steps::after,.js .paused .step__n::after{animation-play-state:paused}
.hero__bg .node{fill:hsl(var(--lime))}
.hero__bg .ring{fill:none;stroke:hsl(var(--lime) / .5);stroke-width:1.2;vector-effect:non-scaling-stroke;transform-origin:center;transform-box:fill-box}
.js .hero__bg .ring{animation:ring 6s ease-out -1.5s infinite}
@keyframes pulse-run{0%{stroke-dashoffset:90}82%,100%{stroke-dashoffset:-1000}}
@keyframes pulse-fade{0%{opacity:0}14%,66%{opacity:.5}82%,100%{opacity:0}}
@keyframes ring{0%,50%{transform:scale(1);opacity:0}58%{opacity:.4}80%,100%{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion: reduce){.js .hero__bg .pulse,.js .hero__bg .ring,.js .steps::after,.js .step__n::after{animation:none !important}.hero__bg .pulse{opacity:0}.steps::after,.step__n::after{opacity:0}}
.hero__copy{display:grid;gap:var(--s3);max-width:900px}
.hero h1 span{display:block}
.hero__copy .lead{max-width:34em}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
@media (max-width: 700px){
  .hero{min-height:auto;padding:calc(76px + var(--s6)) 0 calc(48vw + var(--s4))}
  /* lanes become the hero's base, full width as in the banner: all lanes enter from the left edge, meet at 64% and leave as one line on the right */
  .hero:not(.hero--page) .hero__bg .p{stroke:hsl(var(--teal) / .34)}
  .hero:not(.hero--page) .hero__bg .p--strong{stroke:hsl(var(--teal) / .6)}
  .hero__bg .pulse{stroke-width:4.5}
  .hero:not(.hero--page) .hero__bg .node{r:13px}
  .hero__bg svg{left:0;right:0;top:auto;bottom:-6vw;width:100%;transform:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 38%),linear-gradient(180deg,transparent 0%,black 30%,black 72%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,black 38%),linear-gradient(180deg,transparent 0%,black 30%,black 72%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
}

/* ============ Problem ============ */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7)}
.split__lead{display:grid;gap:var(--s3);align-content:start;position:sticky;top:120px}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid hsl(var(--line))}
.rows li{display:grid;gap:var(--s1);padding:var(--s4) 0;border-bottom:1px solid hsl(var(--line))}
.rows h3{font-size:1.2rem}
@media (max-width: 900px){.split{grid-template-columns:1fr;gap:var(--s5)}.split__lead{position:static}}

/* ============ Systems: 2x2 with hairline cross, no card fills ============ */
.systems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid hsl(var(--line))}
.sys{display:grid;gap:var(--s2);align-content:start;padding:var(--s5) var(--s5) var(--s5) 0;border-bottom:1px solid hsl(var(--line))}
.sys:nth-child(even){padding:var(--s5) 0 var(--s5) var(--s5);border-left:1px solid hsl(var(--line))}
.sys__top{display:flex;align-items:center;gap:12px;color:hsl(var(--teal));font-size:var(--fs-small);font-weight:500}
.sys__top .icon{width:24px;height:24px}
.sys :is(h2,h3){font-size:clamp(1.35rem, 2vw, 1.6rem)}
.sys p{color:hsl(var(--mist));max-width:30em}
@media (max-width: 760px){.systems{grid-template-columns:1fr}.sys,.sys:nth-child(even){padding:var(--s4) 0;border-left:0}}

/* ============ Offer ============ */
.offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.offer__col{display:grid;gap:var(--s2);align-content:start;padding-right:var(--s6)}
.offer__col + .offer__col{padding:0 0 0 var(--s6);border-left:1px solid hsl(var(--line))}
.offer__col h3{font-size:clamp(1.5rem, 2.4vw, 2rem);letter-spacing:-.02em}
.offer__col p{color:hsl(var(--mist));max-width:28em}
.textlink{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s2);min-height:44px;color:hsl(var(--teal));font-weight:500;text-decoration:none;width:max-content}
.textlink .icon{transition:transform var(--dur-base) var(--ease-out)}
.textlink:hover .icon{transform:translateX(4px)}
@media (prefers-reduced-motion: reduce){.textlink .icon{transition:none}}
@media (max-width: 760px){.offer{grid-template-columns:1fr;gap:var(--s5)}.offer__col{padding:0}.offer__col + .offer__col{padding:var(--s5) 0 0;border-left:0;border-top:1px solid hsl(var(--line))}}

/* ============ How it works: a real sequence, so numbered ============ */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:hsl(var(--line))}
.step{display:grid;gap:var(--s2);align-content:start;position:relative}
.step__n{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:hsl(var(--navy-950));border:1px solid hsl(var(--teal-deep));color:hsl(var(--teal));font:600 1rem/1 var(--f-tech);margin-bottom:var(--s2)}
.step:first-child .step__n{border-color:hsl(var(--lime));color:hsl(var(--lime))}
/* Same lime pulse on the connector, looping. --T is the cycle; each marker glows (opacity only) when the pulse centre passes it. */
.steps{--T:7s;clip-path:inset(-60px -40px -60px -40px)}
/* Layers (Matt, 06/11): connector and pulse sit behind the markers, whose solid fill covers them. The clip leaves room on both sides for the marker glow (it was cut on the left edge). */
.steps::before,.steps::after{z-index:0}
.step{z-index:1}
.steps::after{content:"";position:absolute;left:0;top:19px;width:16%;height:1px;opacity:0;background:linear-gradient(90deg,transparent,hsl(var(--lime) / .55) 70%,hsl(var(--lime) / .8));transform:translateX(-100%)}
.js .steps::after{animation:steps-run var(--T) linear infinite}
.step__n::after{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 1px hsl(var(--lime) / .55),0 0 16px 2px hsl(var(--lime) / .3);opacity:0;pointer-events:none}
.js .step__n::after{animation:step-glow var(--T) ease-in-out infinite}
.step:nth-child(1) .step__n::after{animation-delay:calc(var(--T) * -.037)}
.step:nth-child(2) .step__n::after{animation-delay:calc(var(--T) * .187)}
.step:nth-child(3) .step__n::after{animation-delay:calc(var(--T) * .411)}
@keyframes steps-run{0%{transform:translateX(-100%);opacity:0}6%{opacity:1}68%{opacity:1}75%,100%{transform:translateX(625%);opacity:0}}
@keyframes steps-run-v{0%{transform:translateY(-100%);opacity:0}6%{opacity:1}68%{opacity:1}75%,100%{transform:translateY(625%);opacity:0}}
@keyframes step-glow{0%,3%{opacity:0}10%{opacity:.8}17%,100%{opacity:0}}
.step p{color:hsl(var(--mist))}
@media (max-width: 760px){.steps{grid-template-columns:1fr;gap:var(--s4);padding-left:56px}.steps::before{left:19px;right:auto;top:0;bottom:0;width:1px;height:auto}.step__n{position:absolute;left:-56px;top:-4px;margin:0}.steps::after{left:19px;top:0;width:1px;height:16%}.step:nth-child(1) .step__n::after{animation-delay:0s}.step:nth-child(2) .step__n::after{animation-delay:calc(var(--T) * .247)}.step:nth-child(3) .step__n::after{animation-delay:calc(var(--T) * .493)}.js .steps::after{animation-name:steps-run-v;background:linear-gradient(180deg,transparent,hsl(var(--lime) / .55) 70%,hsl(var(--lime) / .8))}}

/* ============ Assessment (lead magnet) ============ */
.assess{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s7);align-items:start}
.assess__lead{display:grid;gap:var(--s3)}
.gets{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s2)}
.gets li{display:flex;gap:12px;align-items:flex-start;color:hsl(var(--bone))}
.gets .icon{color:hsl(var(--lime));margin-top:3px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s3)}
.field{display:grid;gap:var(--s1)}
.field--full{grid-column:1 / -1}
.field label{font-size:var(--fs-small);font-weight:500}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid hsl(var(--field));background:hsl(var(--navy-950));color:hsl(var(--bone));font:400 1rem/1.4 var(--f-sans);transition:border-color var(--dur-fast) var(--ease-out)}
.field textarea{min-height:120px;resize:vertical}
.field option{background:hsl(var(--navy-950));color:hsl(var(--bone))}
.field [aria-invalid=true]{border-color:hsl(var(--lime))}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,hsl(var(--mist)) 50%),linear-gradient(135deg,hsl(var(--mist)) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:hsl(var(--mist))}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid hsl(var(--teal));outline-offset:1px;border-color:hsl(var(--teal-deep))}
.field input::placeholder,.field textarea::placeholder{color:hsl(var(--mist) / .8)}
.form__foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.form__hint{font-size:var(--fs-small);color:hsl(var(--mist));max-width:26em}
.form__status{grid-column:1 / -1;font-size:var(--fs-small);color:hsl(var(--teal));min-height:1.5em}
@media (max-width: 900px){.assess{grid-template-columns:1fr;gap:var(--s5)}}
@media (max-width: 560px){.form{grid-template-columns:1fr}.form .btn{width:100%;justify-content:center}}

/* ============ FAQ ============ */
.faq{max-width:860px;border-top:1px solid hsl(var(--line))}
.faq details{border-bottom:1px solid hsl(var(--line))}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;min-height:44px;font-size:1.15rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{color:hsl(var(--teal));transition:transform var(--dur-base) var(--ease-out)}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq summary:hover{color:hsl(var(--teal))}
.faq details p{padding:0 var(--s6) var(--s3) 0;color:hsl(var(--mist));max-width:42em}
@media (prefers-reduced-motion: reduce){.faq summary .icon{transition:none}}
@media (max-width: 560px){.faq details p{padding-right:0}}

/* ============ Contact / close ============ */
.close{padding:var(--s8) 0;overflow:hidden;isolation:isolate}
.close .hero__bg svg{opacity:.8}
.close__in{display:grid;gap:var(--s3)}
.close__in > *{max-width:820px}
.close h2{font-size:clamp(2.2rem, 4.6vw, 4rem)}
.close__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.close__mail{font-size:1rem;color:hsl(var(--mist))}
.close__mail a{display:inline-block;padding:12px 0;color:hsl(var(--bone));text-underline-offset:4px;text-decoration-color:hsl(var(--teal-deep))}
.close__mail a:hover{text-decoration-color:hsl(var(--teal))}

/* ============ Footer ============ */
.foot{border-top:1px solid hsl(var(--line-soft));padding:var(--s5) 0 var(--s4)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.foot nav ul{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);list-style:none;margin:0;padding:0}
.foot nav a{display:inline-block;padding:10px 0;color:hsl(var(--mist));text-decoration:none;font-size:var(--fs-small)}
.foot nav a:hover{color:hsl(var(--bone))}
.foot small{display:block;width:100%;color:hsl(var(--mist));font-size:var(--fs-small);margin-top:var(--s3)}

/* ============ Reveal (JS-gated; content visible without JS) ============ */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .rv.on{opacity:1;transform:none}
.js .rv-d1{transition-delay:80ms}.js .rv-d2{transition-delay:160ms}.js .rv-d3{transition-delay:240ms}
@media (prefers-reduced-motion: reduce){.js .rv{opacity:1;transform:none;transition:none}}
@media (max-width: 700px){.sec,.close{padding:var(--s7) 0}.head{margin-bottom:var(--s5)}}
@media (max-width: 700px){.close{padding-bottom:calc(44vw + var(--s4))}}
@media (max-width: 700px){:root{--fs-body:1.1875rem;--fs-small:1.0625rem;--fs-lead:1.25rem}body{line-height:1.65}h3{font-size:1.4rem}.logo img{height:26px}}

/* ============ Fixed page background (Matt, 06/11 13:43): only the diagonal lattice is fixed, behind every section of every page ============
   The converging lanes (node and pulse) stay in the header/hero and scroll away with it; the closing section has its own local lanes.
   Reduced motion: the lattice scrolls with the page. */
.hero__bg > .geo{position:fixed;inset:0 auto auto 0;width:100%;height:100lvh}
.close .geo{display:none}
@media (prefers-reduced-motion: reduce){.hero__bg > .geo{position:absolute;inset:0;width:auto;height:auto}}


/* ============ Linked system cards (home + system index) ============ */
a.sys{text-decoration:none;color:inherit}
a.sys :is(h2,h3){transition:color var(--dur-fast) var(--ease-out)}
a.sys:hover :is(h2,h3){color:hsl(var(--teal))}
.sys__more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:var(--s2);color:hsl(var(--teal));font-weight:500}
.sys__more .icon{transition:transform var(--dur-base) var(--ease-out)}
a.sys:hover .sys__more .icon{transform:translateX(4px)}
@media (prefers-reduced-motion: reduce){.sys__more .icon{transition:none}}

/* ============ Case index: hairline rows, the metric leads (no card fills) ============ */
.cases{list-style:none;margin:0;padding:0;border-top:1px solid hsl(var(--line))}
.case{border-bottom:1px solid hsl(var(--line))}
.case a{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,5fr) 48px;gap:var(--s4);align-items:center;padding:var(--s4) 0;text-decoration:none;color:inherit}
.case a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:hsl(var(--teal));transform:scaleX(0);transform-origin:left;transition:transform var(--dur-reveal) var(--ease-out)}
.case a:hover::after,.case a:focus-visible::after{transform:scaleX(1)}
.case__n{display:grid;gap:6px}
.case__n b{font:600 clamp(2.3rem, 3.6vw, 3.1rem)/1 var(--f-tech);color:hsl(var(--teal));letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.case__n span{font-size:var(--fs-small);color:hsl(var(--mist))}
.case__who{display:grid;gap:4px}
.case__who :is(h2,h3){font-size:clamp(1.2rem, 1.7vw, 1.4rem);transition:color var(--dur-fast) var(--ease-out)}
.case__who span{font-size:var(--fs-small);color:hsl(var(--mist))}
.case__ctx{color:hsl(var(--mist));max-width:34em}
.case__go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid hsl(var(--line));color:hsl(var(--bone));transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.case__go .icon{transition:transform var(--dur-base) var(--ease-out)}
.case a:hover :is(h2,h3){color:hsl(var(--teal))}
.case a:hover .case__go{border-color:hsl(var(--teal));color:hsl(var(--teal))}
.case a:hover .case__go .icon{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){.case a::after,.case__go .icon{transition:none}}
.cases__foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;margin-top:var(--s5)}
@media (max-width: 900px){
  .case a{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"n go" "who who" "ctx ctx";gap:var(--s2) var(--s3)}
  .case__n{grid-area:n}.case__who{grid-area:who}.case__ctx{grid-area:ctx}.case__go{grid-area:go;align-self:start}
}

/* ============ Inner pages: header carries the same lanes as the home hero ============ */
.hero--page{min-height:auto;align-items:flex-end;padding:calc(76px + var(--s6)) 0 var(--s6)}
.hero--page .hero__bg svg{opacity:.75}
.hero--page .hero__copy{gap:var(--s3);max-width:920px}
.hero--page h1{font-size:clamp(2.3rem, 4.6vw, 4.1rem)}
.crumb{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:hsl(var(--mist));text-decoration:none;font-size:var(--fs-small);width:max-content}
.crumb:hover{color:hsl(var(--bone))}
.crumb .icon{width:18px;height:18px;transition:transform var(--dur-base) var(--ease-out)}
.crumb:hover .icon{transform:translateX(-3px)}
@media (prefers-reduced-motion: reduce){.crumb .icon{transition:none}}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:1rem}
.kicker b{font-weight:500;color:hsl(var(--teal))}
.kicker span{color:hsl(var(--mist))}
.kicker .icon{width:22px;height:22px;color:hsl(var(--teal))}
@media (max-width: 700px){.hero--page{padding:calc(76px + var(--s5)) 0 var(--s5)}.hero--page .hero__bg svg{display:none}}

/* Stat row: hairline on top, the number in the tech face, like the PDFs */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3) var(--s4);margin-top:var(--s2);max-width:980px}
.stat{display:grid;gap:10px;align-content:start;border-top:1px solid hsl(var(--teal-deep));padding-top:var(--s2)}
.stat b{font:600 clamp(2.2rem, 3.4vw, 2.9rem)/1 var(--f-tech);color:hsl(var(--teal));letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat span{font-size:var(--fs-small);color:hsl(var(--mist));line-height:1.4}
@media (max-width: 560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============ Case study body: facts rail + reading column ============ */
.cs{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s7);align-items:start}
.rail{position:sticky;top:112px;display:grid;gap:var(--s4)}
.facts{margin:0;display:grid;gap:var(--s3)}
.facts div{display:grid;gap:6px;border-top:1px solid hsl(var(--line));padding-top:var(--s2)}
.facts dt{font-size:var(--fs-small);color:hsl(var(--mist))}
.facts dd{margin:0;display:grid;gap:2px}
.facts dd a{color:hsl(var(--teal));text-underline-offset:4px;text-decoration-color:hsl(var(--teal-deep));display:inline-block;padding:10px 0;margin:-10px 0}
.facts dd a:hover{text-decoration-color:hsl(var(--teal))}
.rail__cta{display:grid;gap:var(--s2);justify-items:start}
.prose{max-width:44em;min-width:0}
.prose > * + *{margin-top:var(--s2)}
.prose h2{display:flex;align-items:center;gap:var(--s2);font-size:clamp(1.45rem, 2.2vw, 1.85rem);letter-spacing:-.02em;margin-top:var(--s6)}
.prose h2:first-child{margin-top:0}
.prose h2::after{content:"";flex:1;min-width:var(--s4);height:1px;background:hsl(var(--line))}
.prose p{color:hsl(var(--bone) / .88)}
.prose .pull{font-size:clamp(1.35rem, 2.2vw, 1.8rem);line-height:1.3;letter-spacing:-.015em;color:hsl(var(--bone));margin-top:var(--s3)}
.ticks{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:22px;color:hsl(var(--bone) / .92)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:1px;background:hsl(var(--teal))}
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4);margin-top:var(--s4) !important}
.pairs > div{display:grid;gap:6px;align-content:start;border-top:1px solid hsl(var(--line));padding-top:var(--s2)}
.pairs h3{font-size:1.1rem;line-height:1.3}
.pairs p{color:hsl(var(--mist));font-size:var(--fs-small)}
.pairs .no{font:600 1.15rem/1 var(--f-tech);color:hsl(var(--teal))}
.pairs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cap{font-size:var(--fs-small);color:hsl(var(--mist));margin-top:var(--s5) !important}
.cap + .pairs{margin-top:var(--s2) !important}
.fig{margin:var(--s4) 0 0}
.fig img{width:100%;height:auto;border-radius:var(--r-md);border:1px solid hsl(var(--line));background:hsl(var(--navy-850))}
.fig figcaption{margin-top:10px;font-size:var(--fs-small);color:hsl(var(--mist))}
.figrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s4) !important}
.figrow .fig{margin:0}
.result{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);align-items:center;margin-top:var(--s6) !important;padding:var(--s4) 0;border-block:1px solid hsl(var(--teal-deep))}
.result b{display:block;font:600 clamp(1.9rem, 3vw, 2.5rem)/1 var(--f-tech);color:hsl(var(--teal));letter-spacing:-.01em}
.result small{display:block;margin-top:8px;font-size:var(--fs-small);color:hsl(var(--mist))}
.result p{color:hsl(var(--bone))}
@media (max-width: 900px){.cs{grid-template-columns:1fr;gap:var(--s5)}.rail{position:static}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 760px){.pairs,.pairs--3,.figrow{grid-template-columns:1fr}.result{grid-template-columns:1fr}}
.hero--page + .sec{padding-top:var(--s6)}
@media (max-width: 700px){.hero--page + .sec{padding-top:var(--s5)}}

/* ============ System pages ============ */
.flow{list-style:none;margin:0;padding:0;border-top:1px solid hsl(var(--line));counter-reset:flow}
.flow li{counter-increment:flow;display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s1) var(--s3);padding:var(--s4) 0;border-bottom:1px solid hsl(var(--line))}
.flow li::before{content:counter(flow, decimal-leading-zero);grid-row:span 2;font:600 1.15rem/1.4 var(--f-tech);color:hsl(var(--teal))}
.flow h3{font-size:1.2rem}
.flow p{color:hsl(var(--mist));max-width:40em}
.gets--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s4);margin-top:0}
.for__lead{font-size:clamp(1.2rem, 1.8vw, 1.5rem);line-height:1.4;letter-spacing:-.01em;max-width:30em}
@media (max-width: 760px){.gets--2{grid-template-columns:1fr}.flow li{grid-template-columns:44px minmax(0,1fr)}}
.others{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid hsl(var(--line))}
.others li + li{border-left:1px solid hsl(var(--line))}
.others a{display:grid;gap:var(--s1);padding:var(--s4) var(--s4) var(--s4) 0;text-decoration:none;color:inherit}
.others li + li a{padding-left:var(--s4)}
.others a span{display:flex;align-items:center;gap:10px;color:hsl(var(--teal));font-size:var(--fs-small)}
.others a b{font-weight:500;font-size:1.2rem;letter-spacing:-.01em;transition:color var(--dur-fast) var(--ease-out)}
.others a:hover b{color:hsl(var(--teal))}
@media (max-width: 760px){.others{grid-template-columns:1fr}.others li + li{border-left:0;border-top:1px solid hsl(var(--line))}.others a,.others li + li a{padding:var(--s3) 0}}
.nav__links a[aria-current=page]{color:hsl(var(--bone))}
.foot nav a[aria-current=page]{color:hsl(var(--bone))}