/* v4 (2026-10-23): rebuilt from the Figma "Home, training-first" frame. Raleway display over Archivo text. */
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-Variable.woff2") format("woff2"), url("fonts/Archivo-Variable.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("fonts/Raleway-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #151e27;          /* canvas */
  --panel: #1d2834;        /* surface */
  --cream: #f4ebdc;        /* cream-100 */
  --paper: #fffdf8;        /* cream-50: cards and the intake form */
  --orange: #e06b27;       /* action */
  --orange-hover: #ee9b68; /* action-hover */
  --on-orange: #151e27;    /* on-action, 5.05:1 */
  --chip-border: #7e8b98;  /* slate-300: option rows, 3:1+ on paper */
  --field-border: #4e5d65; /* light text-muted: input edges on paper */
  --bg: var(--ink);
  --text: var(--cream);
  --muted: #a7b6c2;        /* text-muted-dark: 8.1:1 on canvas, 7.2:1 on surface */
  --line: #3d4348;         /* rule-dark: decorative rules only */
  --kicker: #ee9b68;       /* orange-300: kickers, numbers, source links */
  --em: #e06b27;           /* display emphasis, large text only (4.48:1 on surface) */
  --focus: #ee9b68;
  --action-edge: var(--orange);
  --display: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4.5vw, 64px);
  --ease: cubic-bezier(.22, .78, .28, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eee7d9;
  --panel: #f7f1e6;
  --text: #17232c;
  --muted: #4e5d65;
  --line: #ccc6bc;
  --kicker: #aa431a;
  --em: #aa431a;
  --focus: #aa431a;
  --action-edge: #2e3e50;  /* orange fill is 2.71:1 on the light canvas */
  --chip-border: #2e3e50;  /* control edges: slate-500, 8.88:1 on the light canvas */
}
/* Cream bands keep the same values in both themes. */
.band-cream { --chip-border: #7e8b98; --bg: var(--cream); --text: var(--ink); --muted: #4e5d65; --line: #ccc6bc; --kicker: #aa431a; --em: #aa431a; --focus: #aa431a; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.6; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--orange); color: var(--on-orange); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: 8px; z-index: 100; background: var(--orange); color: var(--on-orange); padding: 12px 16px; font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }

.wrap { max-width: 1440px; margin: 0 auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); } /* clears the notch in landscape (viewport-fit=cover) */
html { scroll-padding-top: 81px; } /* sticky header height, so anchors land below it */
.band { background: var(--bg); color: var(--text); }
.band > .wrap { display: flex; flex-direction: column; gap: var(--gap, 28px); padding-block: 112px; }
.band-panel { --bg: var(--panel); }
.band-rule { border-top: 1px solid var(--line); }
:root[data-theme="light"] .band + .band { border-top: 1px solid var(--line); } /* light grounds are 1.04 to 1.09:1 apart */

/* ---------- Type ---------- */
h1, h2, .h3, .h4 { font-family: var(--display); }
h1 { max-width: 700px; font-size: clamp(2.75rem, 4vw + 1.25rem, 4.5rem); font-weight: 200; line-height: 1.05; letter-spacing: -.035em; }
h2 { max-width: 560px; font-size: clamp(2.375rem, 3vw + 1rem, 3.5rem); font-weight: 200; line-height: 1.05; letter-spacing: -.025em; }
.h3 { font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem); font-weight: 300; line-height: 1.2; letter-spacing: -.015em; }
.h4 { font-size: 1.375rem; font-weight: 300; line-height: 1.2; letter-spacing: -.015em; }
h1, h2, .h3, .h4, .q { text-wrap: balance; }
p, li { text-wrap: pretty; }
.em { color: var(--em); }
.analog { display: block; text-wrap: balance; color: var(--kicker); }
.kicker, .label { font: 800 12px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
/* Orange marks where a section or a step begins; every other label stays muted. */
.kicker, .label.num, .step .label { color: var(--kicker); }
.kicker { display: flex; align-items: center; gap: 16px; }
.kicker i { flex: 1; min-width: 16px; height: 1px; background: var(--line); }
.kicker span:last-child { white-space: nowrap; }
.lede { flex: 0 1 500px; display: flex; flex-direction: column; gap: 16px; }
.lede p, .large { font-size: 20px; line-height: 1.5; color: var(--muted); }
.strong, .lede .strong { font-weight: 600; color: var(--text); }
.small { font-size: 14px; line-height: 1.6; color: var(--muted); }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.num { padding-top: 16px; background: linear-gradient(var(--orange), var(--orange)) 0 0 / 18px 2px no-repeat; transition: background-size var(--duration) var(--ease); }
.steps li:hover .num { background-size: 100% 2px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 48px; padding: 0 24px; font: 600 15px/1.3 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration-fast) var(--ease); }
.btn:active { box-shadow: inset 0 0 0 2px currentColor; }
.btn-primary { background: var(--orange); border-color: var(--action-edge); color: var(--on-orange); }
.btn-primary:hover { background: var(--orange-hover); }
.btn-ghost { border-color: var(--chip-border); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- Header ---------- */
.logo { display: block; width: 150px; height: auto; }
.logo-light { display: none; }
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: inline; }
.site-nav { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 28px; padding-block: 16px; }
.brand-home { margin-right: auto; text-decoration: none; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: color var(--duration) var(--ease); }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--duration) var(--ease); }
.nav-links a:hover { color: var(--kicker); }
.nav-links a:hover::after, .nav-links a.is-current::after { transform: scaleX(1); }
.nav-menu { display: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--chip-border); background: none; font: 600 14px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.theme-toggle { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.theme-ready .theme-toggle { display: inline-grid; }
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ---------- Hero ---------- */
.hero > .wrap { flex-direction: row; align-items: flex-end; gap: 80px; padding-block: 48px 80px; }
.hero-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-copy .large { max-width: 560px; }
.ctas { display: flex; flex-wrap: wrap; gap: 24px; }
.hero-sun { flex: 0 0 560px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.6; color: var(--muted); }
/* Spot illustrations: same hand as the hero sun. 2px outlines, 1.1px hatching, text color. */
.art { display: block; height: auto; color: var(--text); }
.art * { vector-effect: non-scaling-stroke; }
.art .hatch { stroke-width: 1.1; }
.art-envelope { width: 168px; margin-bottom: 8px; }
.hero-sun figcaption { font: 300 clamp(1.5rem, 1vw + 1.1rem, 1.875rem)/1.2 var(--display); letter-spacing: -.015em; color: var(--text); text-align: center; }
.sun { display: block; width: 100%; height: auto; color: var(--text); } /* line drawing in the text color: cream on dark, ink on light */
.depth { transform: translate(calc(var(--px, 0) * var(--d) * -1px), calc(var(--py, 0) * var(--d) * -.3px)); } /* pointer parallax, set by JS */

/* ---------- Trust strip ---------- */
.trust { border-block: 1px solid var(--line); }
.trust ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust li { display: grid; grid-template-columns: 14px 1fr; align-items: start; align-content: start; padding-right: 16px; column-gap: 14px; padding-block: 22px; font-weight: 600; line-height: 1.6; }
.trust .tick { margin-top: 5px; }
.trust small { grid-column: 2; font-size: 14px; font-weight: 400; color: var(--muted); }
.tick { position: relative; flex: none; width: 14px; height: 14px; border: 2px solid var(--orange); }
.tick::after { content: ""; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; background: var(--orange); }

/* ---------- Training ---------- */
.training { --gap: 60px; }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
.offer { display: flex; flex-direction: column; gap: 16px; padding: 40px 36px; }
.offer:first-child { border-top: 3px solid var(--orange); padding-top: 37px; }
.offer + .offer { border-left: 1px solid var(--line); }
/* Hover draws the orange top rule the first offer and the cards keep at rest. */
.offer + .offer, .cards li { box-shadow: inset 0 3px 0 transparent; transition: box-shadow var(--duration) var(--ease); }
.offer + .offer:hover { box-shadow: inset 0 3px 0 var(--orange); }
.cards li:hover { box-shadow: inset 0 2px 0 var(--orange); }
.offer > p:not([class]) { flex: 1; max-width: 65ch; color: var(--muted); } /* pins both format blocks to the same line */
.format { display: flex; flex-direction: column; gap: 8px; }
.format ul { display: flex; flex-direction: column; gap: 6px; }
.training .large { max-width: 640px; }

/* ---------- How it works ---------- */
.how { --gap: 40px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 56px; border-left: 1px solid var(--line); }
.steps li { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 0 28px 8px; border-right: 1px solid var(--line); }
/* The method is a cycle: a bracket runs from step 04 back to step 01. */
.steps::before { content: ""; position: absolute; top: 14px; left: 37px; right: calc(25% - 37px); height: 14px; border: 1px solid var(--orange); border-bottom: 0; }
.steps-wrap { position: relative; }
.steps-cycle { position: absolute; top: 6px; left: 50%; z-index: 1; transform: translateX(-50%); padding: 0 10px; background: var(--paper); font: 800 12px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--kicker); white-space: nowrap; }
.steps li:first-child::before { content: ""; position: absolute; top: -28px; left: 33px; border: 4px solid transparent; border-top: 6px solid var(--orange); border-bottom: 0; }
/* Handoff: who leads the work at each step. Illustrative, no numbers. */
.handoff { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.handoff-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: end; }
.handoff-bars span { display: flex; flex-direction: column; height: 88px; }
.handoff-bars i:first-child { background: var(--orange); flex: var(--us); }
.handoff-bars i:last-child { background: #507290; flex: var(--team); }
.handoff-axis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font: 600 12px/1.3 var(--body); color: var(--muted); }
.handoff-axis span:last-child { color: var(--kicker); }
.handoff figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.key { display: inline-flex; align-items: center; gap: 8px; }
.key::before { content: ""; width: 10px; height: 10px; background: var(--c); }
/* Illustrative session: three mock documents, drawn with rules only. */
.session { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 10px; margin: 4px 0 8px; }
.session-arrow { padding-top: 34px; font: 300 22px/1 var(--display); color: var(--kicker); }
.doc-wrap { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--text); }
.doc { position: relative; display: flex; flex-direction: column; gap: 7px; height: 92px; padding: 12px 10px; background: var(--paper); }
.doc i { height: 4px; background: #ccc6bc; }
.doc i:nth-child(2) { width: 82%; } .doc i:nth-child(3) { width: 90%; } .doc i:nth-child(4) { width: 64%; }
.doc i.flag { background: #f8d7c4; box-shadow: -6px 0 0 #aa431a; margin-left: 6px; }
.doc i.ok { background: #4e5d65; }
.doc b { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: var(--orange); }
.doc b::after { content: ""; position: absolute; left: 5px; top: 3px; width: 5px; height: 9px; border: solid #151e27; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.note-label { display: flex; justify-content: space-between; gap: 12px; }
.note-label span:last-child { color: var(--muted); }
.steps .num { padding-top: 18px; }
.steps .h3 { font-size: 1.625rem; }
.steps p:last-child { font-size: 16px; line-height: 1.6; color: var(--muted); }

.text-link { width: fit-content; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--kicker); text-underline-offset: 3px; }

/* ---------- Field-guide plate (prototype, How it works) ---------- */
.plate { display: flex; flex-direction: column; gap: 44px; padding: 52px 44px 28px; background: var(--paper); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -9px; }
.plate-fig { display: flex; flex-direction: column; gap: 18px; padding-top: 32px; border-top: 1px solid var(--line); }
.art-session { width: 100%; min-width: 560px; max-width: 720px; margin: 0 auto; } /* labels stay legible; between 621 and about 700px the figure scrolls sideways */
.art-session-stack { display: none; width: 100%; max-width: 300px; margin: 0 auto; }
@media (max-width: 620px) { .art-session { display: none; } .art-session-stack { display: block; } } /* phones get the same three documents, stacked */
.plate-fig { overflow-x: auto; }
.art .mark { stroke: var(--orange); }
.art .leader { stroke-width: .75; }
.art text { stroke: none; fill: currentColor; font-family: var(--body); }
/* Drawing labels use the label style: 12px, 800, .16em, muted. */
.art .fieldmark, .art .figno { font-size: 12px; font-weight: 800; letter-spacing: .16em; fill: var(--muted); }
.art-postmark .fieldmark:has(textPath) { font-size: 9.5px; } /* the ring text is fitted to a fixed path length */
.art .postmark-ad { font: 300 17px var(--display); }
.plate-fig figcaption, .plate .footnote { max-width: 560px; margin: 0 auto; font-size: 16px; line-height: 1.6; color: var(--muted); }
.plate-fig figcaption .label, .plate .footnote .label { margin-right: 8px; }
.plate-title { display: flex; align-items: center; gap: 18px; font: 800 12px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.plate-title::before, .plate-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 620px) { .plate { padding: 36px 20px 20px; outline-offset: -6px; } }

/* ---------- Why now ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 12px; padding: 36px 28px; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-num { font: 200 clamp(3.5rem, 4vw + 1.5rem, 5rem)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.stat .small, .stat .cite { max-width: 320px; }
.stat .cite { font-size: 12px; line-height: 1.6; color: var(--muted); }
.art-thermo { width: 100%; max-width: 320px; }
.therm-fill { transform-box: fill-box; transform-origin: 0 50%; }
.reveal .therm-fill { transform: scaleX(0); transition: transform 900ms var(--ease) 200ms; }
.reveal .in .therm-fill { transform: none; }
.stat a { margin-top: auto; width: fit-content; font-size: 14px; font-weight: 800; line-height: 1.6; color: var(--kicker); text-underline-offset: 3px; }
.stat a:hover { text-decoration-thickness: 2px; }

/* ---------- Commitments ---------- */
.commitments { --gap: 64px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.cards li { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-right: 1px solid var(--line); }
.cards li:last-child { border-right: 0; }
.cards .small, .principles .small { color: var(--muted); }
.principles .small { max-width: 65ch; }
.stat .small, .principles .small { font-size: 16px; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 64px; padding-top: 64px; border-top: 1px solid var(--line); }
.principles > div { display: flex; flex-direction: column; gap: 20px; }
.principles .h3 { font-size: 1.875rem; }
.standard { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Contact ---------- */
.intake { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line); }
.step { min-width: 0; margin: 0; padding: 28px; border: 0; }
.step + .step { border-left: 1px solid var(--line); }
.step > * + * { margin-top: 10px; }
.step legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.step legend + * { clear: both; }
.step .q { font: 300 24px/1.2 var(--display); letter-spacing: -.015em; }
.step-hint { padding-top: 6px; }
.opt { transition: border-color var(--duration) var(--ease), background var(--duration-fast) var(--ease); display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--chip-border); font-size: 14px; line-height: 1.6; cursor: pointer; transition: border-color var(--duration) var(--ease); }
.opt:hover { border-color: var(--field-border); }
.opt:active { background: var(--cream); }
.opt:has(input:checked) { border-color: var(--orange); }
.opt input { appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--field-border); background: var(--paper); cursor: pointer; }
.opt input[type="radio"] { border-radius: 50%; }
.opt input:checked { border-color: var(--orange); background: var(--orange); box-shadow: inset 0 0 0 3px var(--paper); }
.opt input:focus-visible { outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; line-height: 1.6; }
.field input, .field textarea { width: 100%; min-height: 44px; padding: 10px 14px; background: #fff; border: 1px solid var(--field-border); border-radius: 0; font-size: 16px; }
.field textarea { height: 84px; resize: vertical; }
.step-03 > .field + .field { margin-top: 10px; }
.step-03 .btn { margin-top: 10px; }
.form-note { font-size: 14px; line-height: 1.6; color: var(--muted); }
/* What happens next: three steps on one rule. */
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.next li { position: relative; display: flex; gap: 10px; padding: 18px 24px 0 0; font-size: 16px; line-height: 1.6; }
.next li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--orange); }
.form-status { font-size: 14px; font-weight: 600; line-height: 1.6; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--em); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
/* Footer opens on the brand ribbon: orange, dusty blue, cream. */
.horizon { display: flex; flex-direction: column; gap: 2px; }
.horizon i { display: block; height: 7px; background: var(--orange); }
.horizon i:nth-child(2) { height: 3px; background: #507290; }
.horizon i:nth-child(3) { height: 2px; background: var(--cream); }
:root[data-theme="light"] .horizon i:nth-child(3) { background: #2e3e50; }
.foot-main { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 64px; padding-block: 64px 48px; }
.foot-brand { display: flex; flex-direction: column; gap: 24px; }
.foot-copy { max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.foot-copy .h4 { color: var(--kicker); }
.foot-copy .small { max-width: 65ch; }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col ul { display: flex; flex-direction: column; gap: 2px; }
.foot-col a, .foot-legal a { display: inline-flex; align-items: center; min-height: 32px; font-size: 16px; text-decoration: none; text-underline-offset: 3px; transition: color var(--duration) var(--ease); }
.foot-col a:hover, .foot-legal a:hover { color: var(--kicker); text-decoration: underline; }
.foot-legal { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 16px 24px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--muted); }
.foot-legal a { font-size: 14px; }

/* ---------- Work teams practice on ---------- */
.tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border-block: 1px solid var(--line); }
.tasks-head { margin-top: 24px; }
.tasks-head + .tasks { margin-top: calc(16px - var(--gap, 28px)); } /* sit under the label, not a full band gap away */
.tasks li { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; }
.tasks li + li { border-left: 1px solid var(--line); }
.tasks .art { width: 96px; margin-bottom: 4px; }
.tasks .small { color: var(--muted); }
@media (max-width: 900px) {
  .tasks { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .tasks li { padding-inline: 0; }
  .tasks li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* 1181 to 1320px: narrow the sun so the h1 holds 3 to 4 lines and the CTAs stay on one row. Must precede the 1180px block. */
@media (max-width: 1320px) { .hero > .wrap { gap: 48px; } .hero-sun { flex-basis: 520px; } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav-menu { display: inline-flex; align-items: center; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 6px var(--gutter) 14px; background: var(--bg); border-bottom: 1px solid var(--chip-border); }
  .site-nav.is-open .nav-links { display: flex; }
  .nav-links a { border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: 0; }
  .hero > .wrap { flex-direction: column; align-items: stretch; gap: 48px; }
  .hero-sun { flex-basis: auto; width: min(520px, 100%); margin-inline: auto; }
}
@media (max-width: 900px) {
  .band > .wrap { padding-block: 72px; }
  .head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .lede { flex-basis: auto; }
  .trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust li { padding-block: 14px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .offers, .stats, .principles, .intake { grid-template-columns: minmax(0, 1fr); }
  .offer + .offer { border-left: 0; border-top: 1px solid var(--line); }
  .stat { padding-left: 0; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards li, .cards li:nth-child(3) { border-right: 1px solid var(--line); }
  .cards li:nth-child(2n) { border-right: 0; }
  .principles { gap: 40px; padding-top: 48px; }
  .step + .step { border-left: 0; border-top: 1px solid var(--line); }
  .steps { padding-top: 24px; }
  .steps::before, .steps-cycle, .steps li:first-child::before { display: none; }
  .next { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .next li { padding: 14px 0 0 0; border-top: 1px solid var(--line); margin-top: 12px; }
  .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-block: 48px 40px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .site-nav .btn { display: none; }
  #contact .mail-art { display: none; }
  #contact .head { gap: 24px; }
  #contact .next li { padding-top: 8px; margin-top: 8px; }
  .steps, .cards { grid-template-columns: minmax(0, 1fr); }
  .cards li { border-right: 0; border-bottom: 1px solid var(--line); padding-inline: 0; }
  .cards li:last-child { border-bottom: 0; }
  .cards li:nth-child(3) { border-right: 0; }
  .steps { border-left: 0; }
  .steps li { border-right: 0; padding-inline: 0; }
  .offer { padding: 32px 24px; }
  .offer:first-child { padding-top: 29px; }
  .step { padding: 24px 20px; }
  .ctas .btn { width: 100%; }
}
/* Signature motion: the sun rises once on load, 800ms in all. Bands draw in sequence, then the disc clears the horizon. */
@media (prefers-reduced-motion: no-preference) {
  .sun-rise { animation: sun-rise 650ms var(--ease) 150ms both; }
  .sun-band { transform-box: fill-box; transform-origin: 0 50%; animation: band-in 400ms var(--ease) calc(var(--i) * 80ms) both; }
}
@keyframes sun-rise { from { transform: translateY(240px); } }
@keyframes band-in { from { transform: scaleX(0); } }

/* Section reveals (JS adds .reveal only when motion is allowed): kicker first, then the rest as one group, once. */
.reveal .band:not(.hero) > .wrap > * { opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--ease) 80ms, transform 400ms var(--ease) 80ms; }
.reveal .band:not(.hero) > .wrap > .kicker { transition-delay: 0ms; }
.reveal .band.in > .wrap > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { --duration-fast: 0ms; --duration: 0ms; }
}

/* ---------- Our story page (Figma "About us") ---------- */
.story-intro > .wrap { padding-block: 48px 80px; }
.story-intro .lede { flex-basis: 440px; }
.founders > .wrap { flex-direction: row; gap: 56px; padding-block: 72px; }
.founder { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.founder p:last-child { color: var(--muted); }
.f-1 { border-top: 20px solid var(--orange); padding-top: 28px; }
.f-2 { border-top: 8px solid #507290; padding-top: 40px; }
.f-3 { border-top: 4px solid var(--cream); padding-top: 44px; }
:root[data-theme="light"] .f-3 { border-top-color: #2e3e50; }
.founder-stat { font: 200 48px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.story-close > .wrap { padding-block: 72px 112px; }
.close-row { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.close-row .h3 { max-width: none; font-size: 1.875rem; }
@media (max-width: 900px) {
  .founders > .wrap { flex-direction: column; gap: 48px; }
  .close-row { flex-direction: column; align-items: flex-start; }
  .story-intro > .wrap { padding-top: 72px; }
  .story-intro .lede { flex-basis: auto; }
}

/* ---------- Field-guide illustrations: placement ---------- */
.head-art { flex: 0 1 560px; display: flex; flex-direction: column; gap: 32px; }
@media (max-width: 900px) { .head-art { flex-basis: auto; } }
.art-toolbox { width: 100%; max-width: 300px; }
#why-now .head { align-items: flex-start; }
.cards .art { width: 64px; margin-bottom: 4px; }
.mail-art { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 8px; }
.mail-art .art-envelope { margin: 0; }
@media (max-width: 620px) { .mail-art { display: none; } } /* decorative; lets the form start higher on phones */
.art-postmark { width: 128px; }
.founder .art { width: 150px; margin-bottom: 4px; }
/* Every kicker's rule carries a small sun on its horizon. */
.kicker i { position: relative; }
.kicker i::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 14px; height: 7px; border: 1px solid currentColor; border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--bg); transform: translateX(-50%); }
.plate .kicker i::after, .plate-section .kicker i::after { background: var(--bg); }
.page-404 .wrap { align-items: flex-start; padding-block: 96px 112px; }
.page-404 .kicker { align-self: stretch; }
.art-bench { width: 100%; max-width: 420px; }

/* ---------- Privacy page ---------- */
.policy { display: flex; flex-direction: column; gap: 16px; max-width: 65ch; }
.policy h2 { margin-top: var(--gap, 28px); }
.policy ul { display: flex; flex-direction: column; gap: 6px; padding-left: 1.25em; list-style: disc; }

/* ---------- Pre-call form (/start, start.js) ----------
   The contact form's paper panel, one screen at a time. Same fields and option rows; the stepper adds only layout,
   a progress rule, and the hard-stop note. */
.precall > .wrap { padding-block: 48px 112px; }
.stepper { display: block; width: 100%; max-width: 800px; }
.stepper [hidden] { display: none !important; }
.pc-progress { display: flex; flex-direction: column; gap: 10px; padding: 24px 40px 0; }
.pc-meter { height: 2px; background: var(--line); }
.pc-meter i { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--duration) var(--ease); }
.pc-screen { display: flex; flex-direction: column; gap: 28px; padding: 32px 40px 40px; }
.pc-screen h1:focus { outline: none; } /* focus moves here on each step so screen readers start at the question; it is not a control */
.pc-screen h1:not(.h3) { font-size: clamp(2.375rem, 3vw + 1rem, 3.5rem); }
.stepper .step { padding: 0; }
.stepper .step legend { margin-bottom: 14px; }
.stepper .q-help { margin-top: -4px; }
.q-block .field { margin-top: 14px; }
.q-sub { font-size: 14px; font-weight: 600; line-height: 1.6; }
.stepper [data-other] .field { margin-top: 14px; }
.pc-who { font-size: 16px; }
.pc-fields { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.pc-fields .small { margin-top: -4px; }
.link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--kicker); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { text-decoration-thickness: 2px; }
/* Tool details: one row per tool, the two questions side by side. */
.pc-tool { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.pc-tool .h4 { grid-column: 1 / -1; }
.pc-tool.is-single { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
.stepper .btn-ghost { background: transparent; } /* buttons, not links, here: drop the browser fill */
.pc-choice { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-choice .btn[aria-pressed="true"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.pc-group { display: flex; flex-direction: column; gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.pc-group .q-block + .q-block { padding-top: 28px; border-top: 1px solid var(--line); }
/* The hard-stop note: a word, not a color, carries it. Flat, cream ground, orange edge. */
.pc-note { margin-top: 18px; padding: 16px 20px; background: var(--cream); border-left: 3px solid var(--orange); font-size: 16px; line-height: 1.6; }
.pc-review { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pc-review-group { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.pc-review dl { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.pc-review dt { font-size: 14px; line-height: 1.6; color: var(--muted); }
.pc-review dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pc-review .link-btn { flex: none; margin-top: -8px; } /* still 44px tall; the negative margin lines its text up with the first row */
.pc-nav { display: flex; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.pc-nav .btn-primary:only-child { margin-left: auto; }
.stepper > .form-status { padding: 0 40px 32px; margin-top: -16px; }
@media (max-width: 620px) {
  .precall > .wrap { padding-block: 32px 72px; }
  .pc-progress { padding: 20px 20px 0; }
  .pc-screen { padding: 24px 20px 28px; }
  .stepper > .form-status { padding: 0 20px 24px; }
  .pc-tool { grid-template-columns: minmax(0, 1fr); }
  .pc-nav .btn { flex: 1; }
}