/* Self-hosted fonts for the Threshold design (simplepage.ai).
   Archivo is served as static weights with font-stretch:125% because the
   variable "wdth" axis is not available as a static woff2 subset via the
   google-webfonts-helper API; threshold.css already sets font-stretch:125%
   and font-variation-settings:"wdth" 125 on .brand, so this keeps the same
   visual width where variable-font support exists and degrades to the
   nearest static weight elsewhere. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-stretch: 125%;
  font-display: swap;
  src: url("/fonts/ai/archivo-500.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-stretch: 125%;
  font-display: swap;
  src: url("/fonts/ai/archivo-600.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-stretch: 125%;
  font-display: swap;
  src: url("/fonts/ai/archivo-700.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-stretch: 125%;
  font-display: swap;
  src: url("/fonts/ai/archivo-800.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 900;
  font-stretch: 125%;
  font-display: swap;
  src: url("/fonts/ai/archivo-900.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ai/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ai/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ai/ibm-plex-mono-600.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/ai/public-sans-300.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ai/public-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ai/public-sans-500.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ai/public-sans-600.woff2") format("woff2");
}
/* ============================================================
   THE THRESHOLD — one line runs down the whole page, and the
   band the marker is standing in LIGHTS UP. The page ground
   itself never moves; a single illuminated section travels
   down with the reader.

   COLOUR MODEL
   --paper is constant. Each zone carries its own ground and
   text tokens which apply ONLY while it holds [data-lit] —
   set by JS on every element sharing that zone name, so
   nav+hero light as one band and close+footer as another.
   Nothing below hardcodes a ground-dependent colour: it reads
   --ground / --fg / --fg-soft / --fg-mute / --hair /
   --rule-off / --accent-on-ground.
   The drawn line is the exception — it spans every band at
   once, so it gets its own two-state pair (--line-off and
   --signal), verified >=3:1 against every ground on the page
   including the ink one.
   ============================================================ */

/* registered so the ground can be *transitioned*, not cut */
@property --ground            { syntax:"<color>"; inherits:true; initial-value:oklch(0.948 0.007 236); }
@property --fg                { syntax:"<color>"; inherits:true; initial-value:oklch(0.185 0.026 232); }
@property --fg-soft           { syntax:"<color>"; inherits:true; initial-value:oklch(0.335 0.024 232); }
@property --fg-mute           { syntax:"<color>"; inherits:true; initial-value:oklch(0.530 0.018 236); }
@property --hair              { syntax:"<color>"; inherits:true; initial-value:oklch(0.185 0.026 232 / 0.18); }
@property --rule-off          { syntax:"<color>"; inherits:true; initial-value:oklch(0.605 0.018 236); }
@property --accent-on-ground  { syntax:"<color>"; inherits:true; initial-value:oklch(0.525 0.212 27); }
@property --marker            { syntax:"<color>"; inherits:true; initial-value:oklch(0.505 0.205 27); }
@property --signal            { syntax:"<color>"; inherits:true; initial-value:oklch(0.505 0.205 27); }
@property --line-off          { syntax:"<color>"; inherits:true; initial-value:oklch(0.505 0.020 238); }

:root{
  /* ---- the page ground. constant. the bands move, not this ---- */
  --paper:      oklch(0.948 0.007 236);

  /* ---- fixed constants: these NEVER move with the zone ---- */
  --accent:     oklch(0.535 0.213 27);   /* solid CTA fill. never a ground. */
  --on-accent:  oklch(0.985 0.008 84);   /* text on a solid accent chip  */
  --plate-ink:  oklch(0.185 0.026 232);  /* letterbox behind photography */
  --on-plate:   oklch(0.938 0.005 232);  /* caption text on the plate    */

  /* ---- resting tokens: an unlit band, and everything that
     lives outside a band (skip link, the line's own box) ---- */
  --ground:oklch(0.948 0.007 236); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.512 0.019 238); --hair:oklch(0.185 0.026 232 / 0.19);
  --rule-off:oklch(0.590 0.019 238); --accent-on-ground:oklch(0.525 0.212 27);

  /* ---- the drawn line. It crosses every band at once, so it
     only ever has two states: light grounds, and the ink one. */
  --line-off:oklch(0.505 0.020 238);
  --signal:  oklch(0.505 0.205 27);
  --marker:  oklch(0.505 0.205 27);

  /* ---- pace of the band lighting ----
     Asymmetric on purpose. Colour arrives the moment you reach
     a section (fast, no delay); the section you are leaving
     lets go of its colour slowly behind you, so the two briefly
     overlap instead of snapping from one band to the next. */
  --zone-dur:   380ms;                       /* fading IN  */
  --zone-out:   900ms;                       /* fading OUT */
  --zone-lag:   0ms;
  --marker-dur: 300ms;
  --zone-ease:  cubic-bezier(.22,.61,.36,1); /* ease-out */

  /* geometry — the datum */
  --line-x: 26px;
  --pad: 20px;
  --rule: 2px;
  --line-end: 76px;
  --content-l: calc(var(--line-x) + 20px);

  --f-display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (min-width:640px){ :root{ --line-x:64px; --pad:32px; --content-l:calc(var(--line-x) + 28px); } }
@media (min-width:1000px){ :root{ --line-x:min(33vw,500px); --pad:44px; --line-end:96px; } }
@media (min-width:1440px){ :root{ --pad:56px; } }

/* ============================================================
   THE BAND TABLE — the single source of truth.
   A band is unlit until the marker enters it, then it takes
   its own ground and its own text tokens. Only ONE band is
   lit at a time, so each colour is judged against the
   constant --paper it sits in, not against its neighbours.
   Every value is oklch; the cool grounds are the 232 hue
   family, the two warm ones its low-chroma warm counterpart.
   Verified against their own ground: --fg ≥10:1,
   --fg-soft ≥7:1, --fg-mute ≥4.7:1, --rule-off ≥3.3:1,
   --accent-on-ground ≥4.1:1.
   ============================================================ */

/* the resting state of every band */
[data-zone]{
  --ground:var(--paper); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.512 0.019 238); --hair:oklch(0.185 0.026 232 / 0.19);
  --rule-off:oklch(0.590 0.019 238); --accent-on-ground:oklch(0.525 0.212 27);
  background:var(--ground); color:var(--fg);
  /* the SLOW half: this rule is the destination when a band
     goes dark again, so it governs the fade OUT */
  transition:
    --ground           var(--zone-out) var(--zone-ease),
    --fg               var(--zone-out) var(--zone-ease),
    --fg-soft          var(--zone-out) var(--zone-ease),
    --fg-mute          var(--zone-out) var(--zone-ease),
    --hair             var(--zone-out) var(--zone-ease),
    --rule-off         var(--zone-out) var(--zone-ease),
    --accent-on-ground var(--zone-out) var(--zone-ease);
}
/* the FAST half: destination when a band lights, so colour is
   already there by the time the section is under you */
[data-zone][data-lit]{
  transition:
    --ground           var(--zone-dur) var(--zone-ease),
    --fg               var(--zone-dur) var(--zone-ease),
    --fg-soft          var(--zone-dur) var(--zone-ease),
    --fg-mute          var(--zone-dur) var(--zone-ease),
    --hair             var(--zone-dur) var(--zone-ease),
    --rule-off         var(--zone-dur) var(--zone-ease),
    --accent-on-ground var(--zone-dur) var(--zone-ease);
}

/* 01 nav + hero — the page opens white and clean */
[data-zone="open"][data-lit]{
  --ground:oklch(0.988 0.003 232); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.530 0.018 236); --hair:oklch(0.185 0.026 232 / 0.18);
  --rule-off:oklch(0.605 0.018 236); --accent-on-ground:oklch(0.535 0.213 27);
}
/* 02 what crosses it — the first cool draught */
[data-zone="unease"][data-lit]{
  --ground:oklch(0.912 0.018 243); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.492 0.019 240); --hair:oklch(0.185 0.026 232 / 0.20);
  --rule-off:oklch(0.572 0.020 240); --accent-on-ground:oklch(0.520 0.210 27);
}
/* 03 the line, named */
[data-zone="boundary"][data-lit]{
  --ground:oklch(0.855 0.022 239); --fg:oklch(0.178 0.026 232); --fg-soft:oklch(0.322 0.024 232);
  --fg-mute:oklch(0.450 0.020 238); --hair:oklch(0.178 0.026 232 / 0.22);
  --rule-off:oklch(0.532 0.022 238); --accent-on-ground:oklch(0.495 0.203 27);
}
/* 04 what we do */
[data-zone="descent"][data-lit]{
  --ground:oklch(0.800 0.026 236); --fg:oklch(0.170 0.026 232); --fg-soft:oklch(0.305 0.024 232);
  --fg-mute:oklch(0.408 0.022 236); --hair:oklch(0.170 0.026 232 / 0.24);
  --rule-off:oklch(0.490 0.024 236); --accent-on-ground:oklch(0.465 0.190 27);
}
/* 05 inside / outside — the one band that goes dark */
[data-zone="ink"][data-lit]{
  --ground:oklch(0.185 0.026 232); --fg:oklch(0.972 0.004 232); --fg-soft:oklch(0.845 0.012 232);
  --fg-mute:oklch(0.690 0.014 232); --hair:oklch(0.972 0.004 232 / 0.20);
  --rule-off:oklch(0.560 0.018 232); --accent-on-ground:oklch(0.635 0.200 27);
}
/* 06 how it works */
[data-zone="proof"][data-lit]{
  --ground:oklch(0.875 0.014 234); --fg:oklch(0.180 0.026 232); --fg-soft:oklch(0.325 0.024 232);
  --fg-mute:oklch(0.462 0.020 236); --hair:oklch(0.180 0.026 232 / 0.22);
  --rule-off:oklch(0.545 0.021 236); --accent-on-ground:oklch(0.500 0.205 27);
}
/* 07 why us — back into clean daylight */
[data-zone="record"][data-lit]{
  --ground:oklch(0.985 0.004 230); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.530 0.018 234); --hair:oklch(0.185 0.026 232 / 0.18);
  --rule-off:oklch(0.600 0.019 234); --accent-on-ground:oklch(0.535 0.213 27);
}
/* 08 pricing — near-neutral cool grey. Almost no chroma, so it
   reads as paper stock rather than as a colour: the one band
   where the page should look like a document, not a mood. */
[data-zone="terms"][data-lit]{
  --ground:oklch(0.872 0.011 248); --fg:oklch(0.180 0.026 232); --fg-soft:oklch(0.325 0.024 232);
  --fg-mute:oklch(0.460 0.018 240); --hair:oklch(0.180 0.026 232 / 0.22);
  --rule-off:oklch(0.543 0.019 240); --accent-on-ground:oklch(0.500 0.205 27);
}
/* 09 close + footer — the same sea, lifted into daylight */
[data-zone="close"][data-lit]{
  --ground:oklch(0.930 0.022 216); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.502 0.020 224); --hair:oklch(0.185 0.026 232 / 0.20);
  --rule-off:oklch(0.582 0.020 224); --accent-on-ground:oklch(0.525 0.212 27);
}

/* the lit band's own number steps forward out of the margin */
[data-lit] .eyebrow, [data-lit] .datum p:first-child{ color:var(--fg); }

/* THE LINE. It crosses lit and unlit ground at once, so it
   carries only two states — and the marker takes the dark one
   a beat before the ink band lights under it. */
html[data-line="ink"], html[data-line="footer"]{
  --line-off:oklch(0.610 0.016 232); --signal:oklch(0.632 0.196 27);
}
html[data-line-next="ink"], html[data-line-next="footer"]{ --marker:oklch(0.632 0.196 27); }

*,*::before,*::after{ box-sizing:border-box; }
html{
  overflow-x:clip; -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  background:var(--paper);
  transition:
    --line-off var(--zone-dur) var(--zone-ease) var(--zone-lag),
    --signal   var(--zone-dur) var(--zone-ease) var(--zone-lag),
    --marker   var(--marker-dur) var(--zone-ease) 0ms;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  :root{ --zone-dur:0s; --zone-out:0s; --zone-lag:0s; --marker-dur:0s; }
}
body{
  margin:0; background:var(--paper); color:var(--fg);
  font-family:var(--f-body); font-weight:400;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.075rem); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{
  font-family:var(--f-display); font-weight:800; font-stretch:125%;
  font-variation-settings:"wdth" 125; letter-spacing:-0.018em; line-height:0.95;
  margin:0; text-wrap:balance; overflow-wrap:break-word;
}
p{ margin:0 0 1em; text-wrap:pretty; }
/* the webfont ships 300-600 only — never ask the browser for 700 */
b,strong{ font-weight:600; }
ul{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
:focus-visible{ outline:2px solid var(--accent-on-ground); outline-offset:3px; border-radius:1px; }

.mono{ font-family:var(--f-mono); font-size:1.6875rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:500; line-height:1.25; overflow-wrap:break-word; }
.mid{ color:var(--fg-mute); }
.skip{ position:absolute; left:0; top:-80px; background:var(--fg); color:var(--ground); padding:14px 18px; z-index:99; font-family:var(--f-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; transition:top .15s; }
.skip:focus{ top:0; }

/* ---------- the page + THE LINE -------------------------------- */
.page{ position:relative; --progress:1; }
.line{
  position:absolute; top:0; bottom:var(--line-end); left:var(--line-x);
  width:var(--rule); transform:translateX(-50%);
  background:var(--line-off); z-index:6; pointer-events:none;
}
.line__fill{
  position:absolute; inset:0; display:block; background:var(--signal);
  transform:scaleY(var(--progress)); transform-origin:top center;
}
.line__head{
  position:absolute; left:50%; top:calc(var(--progress) * 100%);
  width:11px; height:11px; margin:-5px 0 0 -5.5px; display:block;
  background:var(--marker);
}
.line__head::after{
  content:""; position:absolute; left:50%; top:50%; width:29px; height:29px;
  margin:-15px 0 0 -15px; border:1px solid var(--marker); opacity:0.35;
}

/* ---------- layout scaffolding --------------------------------- */
.wrap{ padding-left:var(--content-l); padding-right:var(--pad); }
section{ position:relative; }

@media (min-width:1000px){
  .wrap{ padding-left:var(--pad); }
  .split{ display:grid; grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); }
  .split > .out{ padding-right:26px; text-align:right; }
  .split > .in{ padding-left:34px; }
}
.out .mono{ display:block; }

/* an element whose left edge sits exactly ON the line */
.flush{ margin-left:calc(var(--line-x) - var(--content-l)); }
@media (min-width:1000px){ .flush{ margin-left:calc(var(--line-x) - var(--pad)); } }

/* ---------- nav ------------------------------------------------ */
.nav{ padding-top:22px; padding-bottom:22px; position:relative; }
.brand{ font-family:var(--f-display); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125;
  font-size:0.95rem; letter-spacing:0.02em; text-transform:uppercase; text-decoration:none; line-height:1;
  display:inline-flex; align-items:center; gap:0.36em; min-height:44px; }
.brand span{ color:var(--fg-mute); font-weight:600; }
.navlinks{ display:flex; flex-wrap:wrap; gap:4px 22px; align-items:center; margin-top:14px; }
.navlinks a{
  font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; color:var(--fg-soft); padding:11px 0; display:inline-block; min-height:44px; line-height:22px;
}
.navlinks a:hover{ color:var(--fg); box-shadow:inset 0 -1px 0 var(--fg); }
.navlinks a[aria-current]{ color:var(--fg); box-shadow:inset 0 -2px 0 var(--fg); }
.nav-cta{
  font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--fg); padding:12px 16px; min-height:44px; display:inline-flex;
  align-items:center; background:transparent; transition:background .18s, color .18s; margin-top:10px;
}
.nav-cta:hover{ background:var(--fg); color:var(--ground); }
@media (min-width:1000px){
  .nav{ padding-top:30px; padding-bottom:30px; }
  .nav-cta{ margin-top:0; margin-left:auto; }
  .nav .out{ padding-top:2px; }
  .navlinks{ margin-top:0; gap:0 26px; flex-wrap:nowrap; }
  .brand{ font-size:1.05rem; }
}

/* ---------- buttons -------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:14px; min-height:52px; padding:15px 24px;
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.13em; text-transform:uppercase; font-weight:500;
  text-decoration:none; background:var(--accent); color:var(--on-accent);
  box-shadow:0 1px 0 oklch(0.40 0.17 27), 0 10px 22px -12px oklch(0.30 0.12 27 / 0.85);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 2px 0 oklch(0.40 0.17 27), 0 16px 30px -14px oklch(0.30 0.12 27 / 0.9); }
.btn:active{ transform:translateY(1px); box-shadow:0 0 0 oklch(0.40 0.17 27); }
.btn .arw{ font-family:var(--f-mono); }
.btn--ink{ background:var(--fg); color:var(--ground); box-shadow:0 1px 0 oklch(0.10 0.02 232 / 0.55), 0 10px 22px -12px oklch(0.18 0.03 232 / 0.8); }
.btn--ink:hover{ box-shadow:0 2px 0 oklch(0.10 0.02 232 / 0.55), 0 16px 30px -14px oklch(0.18 0.03 232 / 0.85); }
.btn--ghost{
  background:transparent; color:var(--fg); border:1px solid var(--fg); box-shadow:none;
}
.btn--ghost:hover{ background:var(--fg); color:var(--ground); box-shadow:none; transform:none; }

/* ---------- plates (photography) -------------------------------- */
.plate{ position:relative; overflow:hidden; background:var(--plate-ink); isolation:isolate; }
.plate img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.22) brightness(1.02); }
.plate::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:oklch(0.30 0.045 232); mix-blend-mode:color; opacity:0.62;
}
.plate::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.plate figcaption{
  position:absolute; z-index:4; right:12px; bottom:12px; max-width:min(340px,72%);
  background:oklch(0.14 0.02 232 / 0.92); color:var(--on-plate); padding:9px 12px;
  font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.13em; text-transform:uppercase; line-height:1.5;
  box-shadow:0 8px 24px -14px oklch(0.10 0.02 232);
}
@media (min-width:1000px){ .plate figcaption{ right:22px; bottom:22px; font-size:0.6875rem; } }

/* ---------- hero ------------------------------------------------ */
.hero{ padding-top:clamp(30px,6vw,64px); }
.hero h1{ font-size:clamp(2.7rem,8.4vw,6.5rem); margin:16px 0 0; }
.hero h1 em{ font-style:normal; display:block; color:var(--fg-mute); }
.hero .deck{ max-width:46ch; margin-top:26px; font-size:clamp(1.05rem,0.98rem + 0.45vw,1.3rem); color:var(--fg-soft); line-height:1.5; }
/* generic two-button row — usable in ANY band, not just hero/close */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; }
.hero .cta-row{ margin-top:34px; }
.hero .datum{ margin-bottom:8px; }
.hero .datum p{ font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-mute); line-height:2.1; margin:0; transition:color var(--zone-dur) var(--zone-ease) var(--zone-lag); }
@media (min-width:1000px){
  .hero{ padding-top:clamp(48px,5vw,92px); }
  .hero .datum{ margin-bottom:0; }
  .hero .datum p{ line-height:2.3; }
}
.hero-plate{ height:clamp(230px,40vw,520px); margin-top:clamp(48px,6vw,88px); }

/* ---------- section furniture ----------------------------------- */
.sect{ padding-top:clamp(60px,8vw,120px); padding-bottom:clamp(56px,7vw,104px); }
.eyebrow{ color:var(--fg-mute); margin:0 0 18px; display:block; transition:color var(--zone-dur) var(--zone-ease) var(--zone-lag); }
@media (min-width:1000px){ .intro .out .eyebrow{ margin:10px 0 0; } }
.h2{ font-size:clamp(2rem,5.6vw,4rem); max-width:16ch; }
.lede{ max-width:52ch; margin-top:22px; font-size:clamp(1.02rem,0.98rem + 0.3vw,1.2rem); color:var(--fg-soft); }
/* annotation prose — mono, but sentence case so it can be read at length */
.note{ font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.005em; color:var(--fg-mute); line-height:1.75; }
.note::before{ content:"— "; }

/* ---------- 02 what crosses it today ---------------------------- */
.breach{
  position:absolute; left:var(--line-x); transform:translateX(-50%);
  top:0; bottom:0; width:6px; z-index:7; pointer-events:none;
  background:repeating-linear-gradient(to bottom, var(--ground) 0 11px, transparent 11px 25px);
}
.leaks{ margin-top:clamp(34px,5vw,60px); border-bottom:1px solid var(--hair); }
.leak{
  position:relative; padding:20px 0 22px; border-top:1px solid var(--hair);
  margin-left:calc(8px - var(--content-l)); padding-left:calc(var(--content-l) - 8px);
}
.leak__in{ display:block; font-size:clamp(1.02rem,0.97rem + 0.45vw,1.35rem); line-height:1.35; letter-spacing:-0.01em; max-width:34ch; }
.leak__out{
  display:block; margin-top:9px; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-mute);
}
@media (min-width:1000px){
  .leak{
    margin-left:0; padding-left:0;
    display:grid; grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr);
  }
  .leak__out{ grid-column:1; grid-row:1; margin-top:5px; padding-right:26px; text-align:right; align-self:start; }
  .leak__in{ grid-column:2; grid-row:1; padding-left:34px; max-width:40ch; }
}
.leak:hover .leak__out{ color:var(--fg-soft); }
.leaks-foot{ margin-top:26px; max-width:44ch; }
@media (min-width:1000px){ .leaks-foot{ max-width:calc(var(--line-x) - var(--pad) - 30px); } }

/* ---------- 03 the line, named ---------------------------------- */
.named .principle{ margin-top:26px; max-width:40ch; font-size:clamp(1.15rem,1rem + 0.8vw,1.6rem); line-height:1.36; letter-spacing:-0.012em; }
.named-plate{ height:clamp(190px,26vw,340px); margin-top:clamp(44px,5vw,72px); }
.sides{ display:grid; gap:0; margin-top:clamp(34px,4vw,54px); }
.side{ padding:18px 0; border-top:1px solid var(--hair); }
.side b{ display:block; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute); font-weight:500; margin-bottom:7px; }
.side span{ display:block; max-width:38ch; color:var(--fg-soft); }
@media (min-width:1000px){
  .sides{ grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); }
  .side--out{ padding-right:26px; text-align:right; }
  .side--out span{ margin-left:auto; }
  .side--in{ padding-left:34px; }
}

/* ---------- 04 what we do --------------------------------------- */
.prop{ position:relative; padding-top:clamp(40px,5vw,72px); }
.prop + .prop{ margin-top:clamp(40px,5vw,64px); }
.prop__num{ font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.16em; color:var(--fg-mute); }
.prop h3{ font-size:clamp(1.7rem,4.2vw,3rem); margin-top:12px; max-width:18ch; }
.prop p{ max-width:48ch; margin-top:18px; color:var(--fg-soft); }
.prop__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; margin-top:24px; }
.prop__price{ font-family:var(--f-mono); font-size:0.9rem; letter-spacing:0.06em; font-variant-numeric:tabular-nums; font-weight:600; }
.prop__link{
  font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; box-shadow:inset 0 -1px 0 var(--fg); padding:12px 0; min-height:44px; display:inline-flex; align-items:center; gap:9px;
}
.prop__link:hover{ box-shadow:inset 0 -2px 0 var(--accent-on-ground); }
.vault-plate{ height:clamp(300px,52vw,600px); margin-top:clamp(30px,4vw,44px); }
.vault-rail{ margin-top:26px; display:grid; gap:0; }
.vault-rail li{ padding:15px 0; border-top:1px solid var(--hair); display:flex; gap:16px; align-items:baseline; }
.vault-rail li:last-child{ border-bottom:1px solid var(--hair); }
.vault-rail i{ font-style:normal; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.12em; color:var(--fg-mute); flex:0 0 auto; }

/* ---------- 05 inside / outside ---------------------------------
   No local colour: this section simply happens to sit in the ink
   zone, so the whole viewport is ink while the marker is in it.  */
.io-grid{ margin-top:clamp(38px,5vw,64px); display:grid; gap:38px 0; }
.io-col h3{ font-size:clamp(1.05rem,2.4vw,1.35rem); letter-spacing:0.02em; }
.io-col .tag{ font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute); display:block; margin-bottom:10px; }
.io-col li{
  padding:15px 0; border-top:1px solid var(--hair); font-size:0.98rem; line-height:1.45;
}
.io-col li:last-child{ border-bottom:1px solid var(--hair); }
.io-col--out li{ color:var(--fg-soft); }
.io-col--out{ margin-left:calc(8px - var(--content-l)); padding-left:calc(var(--content-l) - 8px); }
.io-honest{ margin-top:clamp(34px,4vw,52px); max-width:52ch; color:var(--fg-soft); border-left:2px solid var(--accent-on-ground); padding-left:20px; }
@media (min-width:1000px){ .io-honest{ max-width:calc(var(--line-x) - var(--pad) - 30px); } }
@media (min-width:1000px){
  .io-grid{ grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); gap:0; }
  .io-col--out{ margin-left:0; padding-left:0; padding-right:26px; text-align:right; }
  .io-col--out .tag{ text-align:right; }
  .io-col--in{ padding-left:34px; }
}

/* ---------- 06 how it works (ticks) ------------------------------ */
.steps{ margin-top:clamp(30px,4vw,52px); }
.step{ position:relative; }
.step__body{
  position:relative; border-top:1px solid var(--hair); padding:26px 0 30px;
  margin-left:calc(var(--line-x) - var(--content-l)); padding-left:calc(var(--content-l) - var(--line-x));
}
/* the tick sits exactly where the row rule meets the line */
.step__tick{
  position:absolute; z-index:8; top:-1px; left:0;
  width:22px; height:2px; margin-left:-11px; background:var(--fg-soft);
  transition:width .45s ease, margin-left .45s ease, background .45s ease;
}
.step.is-on .step__tick{ width:44px; margin-left:-22px; background:var(--fg); }
.step__n{ display:block; font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.16em; color:var(--fg-mute); transition:color .35s ease; padding-bottom:9px; }
.step.is-on .step__n{ color:var(--fg); }
.step h3{ font-size:clamp(1.35rem,3.2vw,2.1rem); }
.step p{ margin-top:12px; max-width:46ch; color:var(--fg-soft); margin-bottom:0; }
@media (min-width:1000px){
  .step{ display:grid; grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); }
  .step__n{ padding:27px 26px 0 0; text-align:right; }
  .step__body{ margin-left:0; padding-left:34px; }
}
@media (prefers-reduced-motion:reduce){
  .step__tick, .step__n{ transition:none; }
}

/* ---------- 07 why us -------------------------------------------- */
.why{ margin-top:clamp(30px,4vw,52px); }
.why li{ display:grid; }
.why__in{ border-top:1px solid var(--hair); padding:22px 0 24px; margin-left:calc(var(--line-x) - var(--content-l)); padding-left:calc(var(--content-l) - var(--line-x)); }
.why li:last-child .why__in{ border-bottom:1px solid var(--hair); }
.why h3{ font-size:clamp(1.15rem,2.6vw,1.55rem); letter-spacing:-0.01em; }
.why p{ margin:10px 0 0; max-width:44ch; color:var(--fg-soft); font-size:0.98rem; }
.why__n{ font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; color:var(--fg-mute); display:block; margin-bottom:9px; }
@media (min-width:1000px){
  .why li{ grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); }
  .why__n{ padding-right:26px; text-align:right; padding-top:23px; margin:0; }
  .why__in{ margin-left:0; padding-left:34px; }
}
.arch-plate{ height:clamp(220px,34vw,420px); margin-top:clamp(44px,5vw,72px); }

/* ---------- 08 pricing ------------------------------------------- */
.ptable{ margin-top:clamp(34px,4vw,56px); border-top:2px solid var(--fg); }
.prow{ padding:24px 0; border-bottom:1px solid var(--hair); display:grid; gap:10px; }
.prow h3{ font-size:clamp(1.2rem,2.8vw,1.7rem); }
.prow p{ margin:0; color:var(--fg-soft); font-size:0.97rem; max-width:42ch; }
.prow .fig{
  font-family:var(--f-mono); font-size:clamp(1rem,2.4vw,1.35rem); font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:0.01em; white-space:nowrap;
}
.prow .fig small{ display:block; font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-mute); font-weight:500; margin-top:6px; }
@media (min-width:760px){
  .prow{ grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:34px; }
  .prow .fig{ text-align:right; grid-row:span 2; }
  .prow h3{ grid-column:1; }
  .prow p{ grid-column:1; }
  .prow .fig{ grid-column:2; grid-row:1 / span 2; }
}
.indicative{ margin-top:24px; max-width:50ch; }

/* ---------- 09 close --------------------------------------------- */
.close h2{ font-size:clamp(2.1rem,6vw,4.4rem); max-width:14ch; }
.close .lede{ max-width:46ch; }
.close .cta-row{ margin-top:32px; }

/* ---------- footer + terminus ------------------------------------ */
/* the footer is the one band that never changes: permanently
   black. Declared after the band table so it outranks the
   resting [data-zone] tokens, and there is no [data-lit] block
   for it, so nothing can light it. No border-top — the colour
   change is the divider. */
.foot{
  --ground:oklch(0.155 0.020 232); --fg:oklch(0.975 0.004 232); --fg-soft:oklch(0.855 0.010 232);
  --fg-mute:oklch(0.705 0.013 232); --hair:oklch(0.975 0.004 232 / 0.20);
  --rule-off:oklch(0.575 0.018 232); --accent-on-ground:oklch(0.645 0.200 27);
  padding-top:clamp(40px,5vw,64px);
}
.foot-grid{ display:grid; gap:30px; }
.foot h4{ font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute); margin:0 0 14px; font-weight:500; }
.foot a{ text-decoration:none; }
.foot-links li a{ display:inline-flex; align-items:center; min-height:44px; box-shadow:inset 0 -1px 0 transparent; font-size:0.95rem; }
.foot-links li a:hover{ box-shadow:inset 0 -1px 0 var(--fg); }
.foot address{ font-style:normal; color:var(--fg-soft); font-size:0.95rem; line-height:1.7; max-width:34ch; }
.foot address a{ display:inline-flex; align-items:center; min-height:44px; box-shadow:inset 0 -1px 0 var(--hair); }
.foot address a:hover{ box-shadow:inset 0 -1px 0 var(--fg); }
.credits{ margin-top:clamp(36px,4vw,56px); padding-bottom:26px; color:var(--fg-mute); font-size:0.6875rem; font-family:var(--f-mono); letter-spacing:0.08em; line-height:1.8; max-width:70ch; }
@media (min-width:760px){ .foot-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; } }
/* the credits sit in the margin, outside the line, and never cross it */
@media (min-width:1000px){ .credits{ max-width:calc(var(--line-x) - var(--pad) - 30px); } }

.terminus{ position:relative; height:var(--line-end); }
.terminus__bar{ position:absolute; left:0; right:0; top:0; height:2px; background:var(--fg); }
.terminus__stop{
  position:absolute; top:0; left:var(--line-x); width:16px; height:16px; margin:-7px 0 0 -8px; background:var(--accent-on-ground);
}
.terminus__label{
  position:absolute; top:22px; left:var(--line-x); margin-left:-8px;
  font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute);
}
@media (max-width:639px){ .terminus__label{ margin-left:14px; } }
/* ============================================================
   PAGE-LOCAL: the calculator's instrument panel.
   Nothing here invents a colour. Every value is a token from
   threshold.css, so the whole apparatus fades with its band
   exactly like the rest of the page.
   ============================================================ */

/* the reading column and the ledger in the margin */
.calc-grid{ display:grid; gap:clamp(38px,5vw,60px); margin-top:clamp(28px,4vw,46px); }
@media (min-width:1000px){
  .calc-grid{ grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); gap:0; }
  .calc-fields{ grid-column:2; grid-row:1; padding-left:34px; }
  /* the figures sit in the margin, hard against the line, and
     stay there while you work down the questions */
  .calc-out{
    grid-column:1; grid-row:1; padding-right:26px; text-align:right;
    position:sticky; top:26px; align-self:start;
  }
  /* figures ride the line right-aligned; the exposure note is
     prose, so it stays left-reading like every other note */
  .calc-out .res__risk{ text-align:left; }
}

/* ---- one question ------------------------------------------- */
.field{ border-top:1px solid var(--hair); padding:22px 0 26px; }
.field:last-of-type{ border-bottom:1px solid var(--hair); }
.field__n{ display:block; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:9px; }
.field__q{ display:block; font-family:var(--f-mono); font-size:0.86rem; line-height:1.5; letter-spacing:0.005em; color:var(--fg); max-width:42ch; }
.field .note{ display:block; margin:9px 0 0; max-width:46ch; }
.field__row{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }

/* ---- number entry: a rule, not a box ------------------------ */
.num{
  font-family:var(--f-mono); font-size:1.15rem; font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:0.02em; line-height:1.2; color:var(--fg); background:transparent;
  caret-color:var(--accent-on-ground);
  border:0; border-bottom:2px solid var(--rule-off); border-radius:0;
  width:8ch; min-width:0; min-height:44px; padding:10px 2px;
  appearance:textfield; -moz-appearance:textfield;
  transition:border-color .18s ease;
}
.num::-webkit-outer-spin-button,
.num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.num:hover{ border-bottom-color:var(--fg-soft); }
.num:focus{ border-bottom-color:var(--accent-on-ground); }
.unit{ font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-mute); }
.unit--pre{ font-size:1.05rem; letter-spacing:0; text-transform:none; color:var(--fg-soft); }

/* ---- the one slider ----------------------------------------- */
.field__slider{ display:flex; align-items:center; gap:18px; margin-top:8px; }
.range{
  appearance:none; -webkit-appearance:none; background:transparent;
  width:100%; min-width:0; height:44px; margin:0; padding:0; border:0;
}
.range::-webkit-slider-runnable-track{ height:2px; background:var(--rule-off); border:0; }
.range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; margin-top:-8px; background:var(--accent-on-ground); border:0; border-radius:0; }
.range::-moz-range-track{ height:2px; background:var(--rule-off); border:0; }
.range::-moz-range-thumb{ width:18px; height:18px; background:var(--accent-on-ground); border:0; border-radius:0; }
.range__val{
  font-family:var(--f-mono); font-size:1.15rem; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--accent-on-ground); flex:0 0 auto; min-width:4ch; text-align:right;
}

/* ---- the ledger --------------------------------------------- */
.res{ display:grid; gap:clamp(24px,3vw,32px); }
.res__k,.res__hd{ display:block; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute); margin:0 0 10px; }
.res__hd{ color:var(--fg); margin:0 0 clamp(20px,2.6vw,28px); }
.res__v{
  font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:0.01em;
  font-size:clamp(1.85rem,5.2vw,2.6rem); line-height:1.05; margin:0; overflow-wrap:break-word;
}
.res__v--accent{ color:var(--accent-on-ground); }
.res__u{ display:block; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-mute); font-weight:500; margin-top:9px; }
.res__sub{ margin:9px 0 0; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.005em; line-height:1.6; color:var(--fg-mute); font-variant-numeric:tabular-nums; }
.res__block{ border-top:1px solid var(--hair); padding-top:24px; }
.res__pay{ font-family:var(--f-mono); font-size:clamp(1.1rem,2.8vw,1.4rem); font-weight:600; font-variant-numeric:tabular-nums; margin:0; }
.res__risk{ border-top:2px solid var(--accent-on-ground); padding-top:17px; }
.res__risk b{ display:block; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:500; color:var(--fg); margin-bottom:9px; }
.res__risk p{ margin:0; font-size:0.95rem; line-height:1.5; color:var(--fg-soft); }

@media (prefers-reduced-motion:reduce){ .num{ transition:none; } }
/* ============================================================
   PAGE-LOCAL — the assessment instrument only.
   Ported from the static site's assessment.html page-local style
   block. Every value reads a Threshold token, so the instrument
   re-tints with whichever zone it is standing in.

   Adaptation from the static build: option selection there was a
   native radio + label. The ported engine drives selection via
   click delegation on button elements (assessment-option), so the
   opt-row/opt-in/opt families below style a <button> instead of a
   radio input. Same square hairline indicator, same "is-on" state,
   just toggled by a JS-applied class instead of :checked.
   ============================================================ */

.assess-form{ margin:0; }

/* ---- contained measure -----------------------------------------
   The .out/.in datum split leaves .in unconstrained on desktop
   (it can run past 800px once --line-x hits its 500px cap), which
   is why the notes field and step-nav used to sprawl to the far
   right. Cap the instrument's own .in columns to a reading measure
   so the whole step sits inside one scannable column; every
   ch-based max-width below (opts, legend, fields…) already fits
   inside it, so this only reins in the uncapped bits. ---------- */
.assess-form .in{ max-width:640px; }

/* tighter step padding than the generic .sect — this is the
   instrument, not a hero/close band, so it doesn't need the same
   breathing room; .sect itself stays untouched for the rest of
   the page. Lead capture carries .assessment-step too (it's wired
   into the same wizard flow — see threshold-assessment.js), so one
   selector covers both. Cut hard for round 2: the step should read
   as one dense card, not a page of sections. */
.assess-form .assessment-step{ padding-top:clamp(24px,3vw,40px); padding-bottom:clamp(20px,2.5vw,32px); }

/* pillar intro copy (h2/lede) sits directly above the questions
   block as two sibling .wrap.split divs — tighten .lede's own
   (otherwise site-wide) margin and .qs's margin-top together so
   the two blocks read as one continuous flow, not two sections
   with a gap between them. Scoped so the rest of the site's .lede
   usage (hero, other .sect pages) is untouched. */
.assess-form .assessment-step .lede{ margin-top:8px; }
.assess-form .assessment-step .res-summary{ margin-top:12px; }

/* ---- progress readout ---------------------------------------- */
.prog{ margin-top:clamp(12px,1.5vw,20px); max-width:52ch; }
.prog__row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 18px; margin-bottom:10px; }
.prog__k, .prog__v{ font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:500; }
.prog__k{ color:var(--fg-mute); }
.prog__v{ color:var(--fg); font-variant-numeric:tabular-nums; }
.prog__track{ display:block; height:3px; background:var(--hair); }
.prog__bar{ display:block; height:100%; width:0%; background:var(--accent-on-ground); transition:width .35s var(--zone-ease); }

/* ---- one question -------------------------------------------- */
.qs{ margin-top:clamp(8px,1.2vw,14px); }
.q{ min-width:0; margin:0; padding:12px 0 6px; border:0; border-top:1px solid var(--hair); }
.qs .q:last-of-type{ border-bottom:1px solid var(--hair); padding-bottom:12px; }
.q__legend{
  display:block; float:none; width:100%; margin:0 0 5px; padding:0; max-width:44ch;
  font-family:var(--f-mono); font-size:0.95rem; font-weight:500; letter-spacing:0.005em;
  line-height:1.55; color:var(--fg);
}
.q__n{
  display:block; margin-bottom:10px; font-size:0.625rem; letter-spacing:0.16em;
  text-transform:uppercase; font-weight:500; color:var(--fg-mute); font-variant-numeric:tabular-nums;
}
/* unanswered flag on goNext() — replaces the source's ring utility classes */
.q.is-unanswered{ box-shadow:inset 3px 0 0 var(--accent-on-ground); }

.opts{ margin:0; padding:0; list-style:none; max-width:44ch; }
.opt-row{ position:relative; border-top:1px solid var(--hair); }
.opt-row:first-child{ border-top:0; }
.opt{
  display:flex; align-items:center; gap:12px; width:100%; min-height:44px; margin:0; padding:11px 0;
  border:0; border-radius:0; background:transparent; cursor:pointer; text-align:left;
  font-family:var(--f-mono); font-size:0.82rem; letter-spacing:0.005em; line-height:1.5; color:var(--fg-soft);
}
.opt:hover{ color:var(--fg); }
.opt-row.is-on .opt{ color:var(--fg); }
/* square indicator — the page's own device is a straight line, so
   the control is a square hairline, never a pill or a disc */
.opt-in{
  flex:0 0 auto; display:block; width:16px; height:16px;
  border:1px solid var(--rule-off);
}
.opt-row.is-on .opt-in{ background:var(--accent-on-ground); border-color:var(--accent-on-ground); box-shadow:inset 0 0 0 3px var(--ground); }
.opt:focus-visible{ outline:2px solid var(--accent-on-ground); outline-offset:3px; }
.opt-row:has(.opt:focus-visible){ box-shadow:inset 3px 0 0 var(--accent-on-ground); }

/* ---- per-question notes ----------------------------------------
   Subordinate to the options above it — tied to the same 44ch
   measure instead of running the full contained width, smaller
   type, softer tone. Collapsed to a single-line affordance by
   default (round 2: the 40px default still read as "another box"
   under every question); it grows on focus so there's room to
   actually type once you commit to using it. --------------------- */
.notes{
  display:block; width:100%; max-width:44ch; margin-top:6px; min-height:26px; padding:5px 0; border:0;
  border-bottom:1px solid var(--rule-off); border-radius:0; background:transparent; color:var(--fg-soft);
  font-family:var(--f-body); font-size:0.82rem; line-height:1.4; resize:vertical;
  transition:min-height .18s ease;
}
.notes:hover{ border-bottom-color:var(--fg-soft); }
.notes:focus{ border-bottom-color:var(--accent-on-ground); min-height:64px; }
.notes::placeholder{ color:var(--fg-mute); }

/* ---- step navigation --------------------------------------------
   Grouped together at the end of the contained measure, not
   flushed to opposite ends of the (formerly unconstrained) .in
   column — Previous sits right beside Next so the pair reads as
   one control, reachable without crossing the page. Reused as-is
   for the lead-capture step's Previous + Submit pair. ------------ */
.step-nav{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:14px; margin-top:clamp(14px,2vw,22px); }
.step-nav .btn[disabled]{ opacity:0.4; pointer-events:none; }

/* ---- lead capture ----------------------------------------------
   Same tightened rhythm as the questions block above it (lead
   capture is now a wizard step in its own right — see
   threshold-assessment.js — so it gets the same density). -------- */
.fields{ display:grid; gap:18px; margin-top:clamp(14px,2vw,22px); max-width:64ch; }
@media (min-width:760px){ .fields{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; } }
.field-label{
  display:block; margin-bottom:6px; font-family:var(--f-mono); font-size:0.625rem;
  letter-spacing:0.16em; text-transform:uppercase; font-weight:500; color:var(--fg-mute);
}
.input{
  display:block; width:100%; min-height:44px; padding:10px 0; border:0; border-radius:0;
  border-bottom:1px solid var(--rule-off); background:transparent; color:var(--fg);
  font-family:var(--f-body); font-size:1rem; line-height:1.5;
}
.input:hover{ border-bottom-color:var(--fg-soft); }
.input:focus{ border-bottom-color:var(--accent-on-ground); }
.status{
  margin-top:18px; min-height:1.7em; max-width:52ch;
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.005em; line-height:1.7; color:var(--fg-mute);
}
.status.is-error{ color:var(--accent-on-ground); }
.status.is-ok{ color:var(--fg); }

/* ---- the result readout --------------------------------------- */
.score-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 26px; margin-top:10px; }
.score{
  font-family:var(--f-display); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125;
  font-size:clamp(3.2rem,11vw,6rem); line-height:0.9; letter-spacing:-0.022em;
  font-variant-numeric:tabular-nums; color:var(--accent-on-ground);
}
.score-band{ font-size:clamp(1.3rem,3.4vw,2.1rem); }
.meter{ display:block; height:6px; background:var(--hair); margin-top:24px; max-width:52ch; }
.meter__fill{ display:block; height:100%; width:0%; background:var(--accent-on-ground); transition:width .6s var(--zone-ease); }
.res-summary{ margin-top:24px; max-width:52ch; color:var(--fg-soft); font-size:clamp(1.02rem,0.98rem + 0.3vw,1.2rem); }
.pills{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:clamp(28px,4vw,44px); max-width:64ch; }
@media (min-width:760px){ .pills{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pill{ padding:16px 16px 16px 0; border-top:1px solid var(--hair); }
.pill__k{ display:block; margin-bottom:8px; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:500; color:var(--fg-mute); }
.pill__v{ display:block; font-family:var(--f-mono); font-size:1.3rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--accent-on-ground); }
.res__h3{ margin:clamp(30px,4vw,46px) 0 0; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:500; color:var(--fg-mute); }
.answers{ margin:14px 0 0; padding:0; list-style:none; max-width:64ch; }
.answer{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 22px; padding:13px 0; border-top:1px solid var(--hair); }
.answers .answer:last-child{ border-bottom:1px solid var(--hair); }
.answer__q{ flex:1 1 20ch; min-width:0; color:var(--fg-soft); font-size:0.95rem; line-height:1.45; }
.answer__a{ flex:0 1 auto; font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.005em; line-height:1.6; color:var(--fg); }
@media (min-width:640px){ .answer__a{ text-align:right; } }
.rec{ margin-top:clamp(28px,3vw,42px); max-width:52ch; padding-left:20px; border-left:2px solid var(--accent-on-ground); color:var(--fg-soft); }
.rec p{ margin:0 0 12px; }
.rec p:last-child{ margin-bottom:0; }

/* ---- show/hide utility (steps, progress, results) -------------- */
.hidden{ display:none; }

@media (prefers-reduced-motion:reduce){
  .prog__bar, .meter__fill{ transition:none; }
}
/* ============================================================
   PAGE-LOCAL — the enquiry form only.
   Ported from contact.html's page-local style block (.form/.frow/
   .field/.sel/.err/.hp/.form__foot/.formstatus/.form__legal).
   Every value is geometry or an existing token — no new colours.

   Adaptation from the static build: contact.html hand-rolled its
   own <form> markup. This one is rendered by Umbraco Forms' default
   theme (Views/Partials/Forms/Themes/default/*.cshtml, shipped
   compiled inside the Umbraco.Forms.Web package — Form.cshtml plus
   the FieldType.*.cshtml partials), which we don't override. So
   every rule below is duplicated onto the default theme's own
   classes (.umbraco-forms-*, plain input/select/textarea, the
   ASP.NET unobtrusive-validation .field-validation-* classes),
   scoped under .threshold-form — the wrapper aiFormSection.cshtml
   puts around <umb-forms-render>. Same hairline underline fields,
   square corners, no shadows, square focus rings either way.
   ============================================================ */

.form,
.threshold-form .umbraco-forms-form{ margin-top:clamp(28px,4vw,44px); max-width:58ch; }

.frow{ display:grid; gap:0; }
@media (min-width:760px){ .frow{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:34px; } }

/* Forms' default theme borrows Bootstrap-2-era grid class names
   (.row-fluid / .umbraco-forms-container.col-md-N) for its own
   layout. Neutralise that so our field spacing (below) is the only
   thing in charge — the Discovery call form uses a single column. */
.threshold-form .umbraco-forms-fieldset{ border:0; margin:0; padding:0; }
.threshold-form .row-fluid,
.threshold-form .umbraco-forms-container{ display:block; }

.field,
.threshold-form .umbraco-forms-container > div{ padding-top:26px; min-width:0; }

.field > label,
.threshold-form .umbraco-forms-label{
  display:block; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em;
  text-transform:uppercase; font-weight:500; color:var(--fg-mute); margin-bottom:8px;
}
.field > label .opt{ letter-spacing:0.08em; text-transform:none; }
.threshold-form .umbraco-forms-indicator{ letter-spacing:0.08em; }

.field input,
.field select,
.field textarea,
.threshold-form input.text,
.threshold-form textarea,
.threshold-form select{
  display:block; width:100%; min-height:48px; padding:12px 2px; margin:0;
  font-family:var(--f-body); font-size:1rem; line-height:1.4; color:var(--fg);
  background:transparent; border:0; border-bottom:1px solid var(--rule-off);
  border-radius:0; appearance:none; -webkit-appearance:none;
  transition:border-color .18s ease;
}
.field textarea,
.threshold-form textarea{ min-height:130px; resize:vertical; }
.field input::placeholder,
.field textarea::placeholder,
.threshold-form input::placeholder,
.threshold-form textarea::placeholder{ color:var(--fg-mute); opacity:1; }
.field input:hover,
.field select:hover,
.field textarea:hover,
.threshold-form input:hover,
.threshold-form select:hover,
.threshold-form textarea:hover{ border-bottom-color:var(--fg-soft); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.threshold-form input:focus-visible,
.threshold-form select:focus-visible,
.threshold-form textarea:focus-visible{
  outline:2px solid var(--accent-on-ground); outline-offset:2px; border-radius:0;
  border-bottom-color:var(--fg);
}
/* the OS paints the open list, so it needs the tokens spelled out */
.field select option,
.threshold-form select option{ background:var(--ground); color:var(--fg); }
.field [aria-invalid="true"],
.threshold-form [aria-invalid="true"]{ border-bottom-color:var(--accent-on-ground); border-bottom-width:2px; }

/* select chevron, drawn in type so it carries a token colour */
.sel{ display:block; position:relative; }
.sel select{ padding-right:26px; }
.sel::after{
  content:"▾"; position:absolute; right:2px; bottom:15px; pointer-events:none;
  font-family:var(--f-mono); font-size:0.75rem; line-height:1; color:var(--fg-mute);
}
/* the default theme doesn't wrap <select> in a .sel span, so the field
   wrapper itself carries the chevron for any field that holds a select */
.threshold-form .umbraco-forms-container > div:has(select){ position:relative; }
.threshold-form .umbraco-forms-container > div:has(select)::after{
  content:"▾"; position:absolute; right:2px; bottom:15px; pointer-events:none;
  font-family:var(--f-mono); font-size:0.75rem; line-height:1; color:var(--fg-mute);
}
.threshold-form select{ padding-right:26px; }

.err,
.threshold-form .field-validation-error{
  display:block; margin-top:8px; font-family:var(--f-mono); font-size:0.6875rem;
  letter-spacing:0.06em; line-height:1.5; color:var(--accent-on-ground);
}
.err:empty{ margin-top:0; }
/* ASP.NET's unobtrusive validation renders this span whether or not
   there's an error — hide it until it actually holds one */
.threshold-form .field-validation-valid{ display:none; }

/* honeypot — must stay in the DOM and stay unfilled.
   Forms' own honeypot is a differently-shaped trap (a hidden text
   field in an aria-hidden wrapper, not a checkbox), but the same
   rule name and the same job: keep it out of sight, not out of the DOM. */
.hp,
.threshold-form .umbraco-forms-hidden{ display:none; }

.form__foot,
.threshold-form .umbraco-forms-navigation{ margin-top:clamp(28px,4vw,40px); }
button.btn{ border:0; cursor:pointer; }
button.btn[disabled]{ opacity:0.62; cursor:default; }
/* Forms renders the submit as <input type="submit" class="btn primary">,
   not a <button> — .btn's own look (threshold.css) already applies,
   this just resets the input's native chrome */
.threshold-form input[type="submit"].btn{ border:0; cursor:pointer; font:inherit; }
.threshold-form input[type="submit"].btn[disabled]{ opacity:0.62; cursor:default; }

/* the live region stays rendered at all times — a region that is
   display:none when empty is not reliably announced when filled */
.formstatus{
  margin:18px 0 0; max-width:44ch; font-family:var(--f-mono); font-size:0.75rem;
  letter-spacing:0.05em; line-height:1.6; color:var(--fg-soft);
}
.formstatus:empty{ margin-top:0; }
.formstatus[data-state="error"]{ color:var(--accent-on-ground); }
.formstatus[data-state="ok"]{ color:var(--fg); }
/* Forms posts back and re-renders rather than showing a live status
   region — its equivalent is the post-submit thank-you message */
.threshold-form .umbraco-forms-submitmessage,
.threshold-form .umbraco-forms-submitmessage-html{
  display:block; margin:18px 0 0; max-width:44ch; font-family:var(--f-mono); font-size:0.75rem;
  letter-spacing:0.05em; line-height:1.6; color:var(--fg);
}

.form__legal{ margin-top:26px; max-width:48ch; }
/* ============================================================
   THE CONTACT DRAWER
   A panel that slides in from the right over a scrim. It sits
   OUTSIDE any [data-zone], so it inherits the resting :root
   tokens (ink on --paper) and never animates with the travelling
   band behind it — a still, daylight sheet over the moving page.
   Only geometry and existing tokens here; no new colours.
   ============================================================ */

/* lock the page behind the open drawer */
html.drawer-open, html.drawer-open body{ overflow:hidden; }

/* ---------- scrim ---------------------------------------------- */
.drawer-scrim{
  position:fixed; inset:0; z-index:200;
  background:oklch(0.185 0.026 232 / 0.46);
  opacity:0; pointer-events:none;
  transition:opacity 320ms var(--zone-ease, ease);
}
.drawer-scrim.is-open{ opacity:1; pointer-events:auto; }

/* ---------- panel ---------------------------------------------- */
.drawer{
  position:fixed; top:0; right:0; z-index:201;
  width:min(468px,100%); height:100%;
  background:var(--paper); color:var(--fg);
  border-left:1px solid var(--hair);
  box-shadow:-24px 0 60px -30px oklch(0.18 0.03 232 / 0.7);
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform 360ms var(--zone-ease, cubic-bezier(.22,.61,.36,1));
}
.drawer.is-open{ transform:translateX(0); }
@media (max-width:520px){ .drawer{ width:100%; } }

.drawer__inner{ padding:clamp(24px,5vw,40px) clamp(22px,5vw,40px) clamp(40px,7vw,64px); }

/* ---------- head ----------------------------------------------- */
.drawer__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.drawer__eyebrow{
  font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.16em;
  text-transform:uppercase; font-weight:500; color:var(--fg-mute); display:block; margin-bottom:12px;
}
.drawer__title{
  font-family:var(--f-display); font-weight:800; font-stretch:125%;
  font-variation-settings:"wdth" 125; letter-spacing:-0.018em; line-height:0.95;
  font-size:clamp(2rem,7vw,2.6rem); margin:0;
}
.drawer__close{
  flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--hair); color:var(--fg);
  font-family:var(--f-mono); font-size:1.5rem; line-height:1; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
}
.drawer__close:hover{ background:var(--fg); color:var(--paper); border-color:var(--fg); }

/* ---------- body ----------------------------------------------- */
.drawer__body{ margin-top:clamp(22px,4vw,32px); }
.drawer__intro{
  color:var(--fg-soft); font-size:1.02rem; line-height:1.55; max-width:42ch; margin:0 0 4px;
}

/* a mono section label, the drawer's recurring furniture */
.drawer__label{
  display:block; font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.16em;
  text-transform:uppercase; font-weight:500; color:var(--fg-mute);
}

/* ---------- submit a brief ------------------------------------- */
.drawer__brief{ margin-top:clamp(26px,5vw,38px); padding-top:clamp(26px,5vw,38px); border-top:1px solid var(--hair); }
.drawer__blurb{ color:var(--fg-soft); margin:12px 0 0; font-size:0.98rem; line-height:1.55; max-width:40ch; }
.drawer__brief-btn{ margin-top:20px; }
.drawer__brief-btn .arw{ transition:transform .16s ease; }
.drawer__brief-btn[aria-expanded="true"] .arw{ transform:rotate(90deg); }
.drawer__form{ margin-top:8px; }

/* the embedded Umbraco Form: let it fill the narrow panel */
.drawer__form .threshold-form .umbraco-forms-form,
.drawer__form .threshold-form .form{ max-width:none; margin-top:clamp(18px,3vw,26px); }

/* ---------- contact rows --------------------------------------- */
.drawer__direct{ margin-top:clamp(30px,5vw,42px); }
.drawer__direct .drawer__label{ margin-bottom:6px; }
.drawer__rows{ margin:0; padding:0; list-style:none; }
.drawer__row + .drawer__row{ border-top:1px solid var(--hair); }
.drawer__row a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 2px; text-decoration:none; color:var(--fg);
  transition:padding-left .18s var(--zone-ease, ease);
}
.drawer__row a:hover{ padding-left:8px; }
.drawer__row-title{ display:block; font-weight:600; font-size:1.05rem; line-height:1.2; }
.drawer__row-sub{ display:block; margin-top:3px; color:var(--fg-mute); font-size:0.9rem; line-height:1.35; }
.drawer__row-arw{
  flex:0 0 auto; font-family:var(--f-mono); color:var(--accent-on-ground); font-size:1rem;
  transition:transform .18s var(--zone-ease, ease);
}
.drawer__row a:hover .drawer__row-arw{ transform:translateX(4px); }

/* ---------- studio --------------------------------------------- */
.drawer__studio{ margin-top:clamp(30px,5vw,42px); padding-top:clamp(26px,5vw,36px); border-top:1px solid var(--hair); }
.drawer__org{ font-weight:600; margin:12px 0 6px; font-size:1.05rem; }
.drawer__address{ font-style:normal; color:var(--fg-soft); line-height:1.7; font-size:0.95rem; }
.drawer__address a{ color:var(--accent-on-ground); }

@media (prefers-reduced-motion:reduce){
  .drawer, .drawer-scrim, .drawer__row a, .drawer__row-arw, .drawer__brief-btn .arw{ transition:none; }
}