/* 228.co redesign v6, DRAFT (2026-11-03). Spec §10: ../site-redesign-iteration-v4-2026-10-30.md. Brand: kit v0.2.
   A clean sheet for index.html (the policy pages keep v4.css). No white cards: type, hairlines and space carry the
   structure. Motion follows Stageshow: two curves, every movement has a cause, nothing loops, reduced motion is static. */
:root {
  /* v7 type system: seven sizes, two weights (400/600). Every font-size in this file uses one of these. */
  --t-1: 13px; --t-2: 15px; --t-3: 17px; --t-4: 20px;
  --t-5: clamp(26px, 2.6vw, 34px); --t-6: clamp(34px, 4.8vw, 64px); --t-7: clamp(40px, 7vw, 96px);
  --measure: 60ch;
  --blade: 32deg; /* the mark's blade angle, measured from the logo SVG (≈31.8°) */
  --oxblood: #5F1513; --oxblood-700: #4F0C0B;
  --ink: #07042E; --ink-500: #4C5375;
  --rule: rgba(7,4,46,.14); --rule-soft: rgba(7,4,46,.09);
  --cream: #FEE4D2; --paper: #F8F4F1; --sheet: #FBF8F5;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-travel: cubic-bezier(.45, 0, .1, 1);   /* moving between two places: tab indicator, sheets */
  --ease-arrive: cubic-bezier(.25, .8, .25, 1); /* arriving from nowhere: reveals, the stripe, rules drawing */
  --ease-ui: cubic-bezier(.2, .8, .2, 1);
  --dur-ui: .16s;
  --wrap: 1200px; --gutter: clamp(20px, 4vw, 40px);
  --space-section: clamp(88px, 10vw, 152px);
  --space-intro: clamp(40px, 5vw, 72px);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --head: 68px; --head-total: calc(var(--head) + var(--safe-t));
  /* Bottom nav: one height, one offset. Reserve = what the page keeps clear under the last content. */
  --nav-h: 56px; --nav-gap: 16px; --nav-reserve: calc(var(--nav-h) + var(--nav-gap) * 2);
  --glass: rgba(251,248,245,.88);
  --float-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 1px rgba(7,4,46,.08), 0 2px 4px rgba(7,4,46,.06), 0 10px 28px rgba(7,4,46,.12), 0 22px 48px -14px rgba(95,21,19,.22);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html.sheet-open { overflow: hidden; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.6; font-size: var(--t-3); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: calc(var(--nav-reserve) + var(--safe-b)); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--oxblood); text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
p, dd, dt { margin: 0; text-wrap: pretty; }
ul, ol, dl { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; border-radius: 6px; }
.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: -60px; z-index: 100; background: var(--oxblood); color: var(--cream); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; transition: top .2s; }
.skip:focus { top: 16px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
section[id], [id].anchor { scroll-margin-top: calc(var(--head-total) + 24px); scroll-margin-bottom: calc(var(--nav-reserve) + 24px); }
.nw { white-space: nowrap; }

/* ---------- Background: the brand gradient, answering pointer and scroll only (v6.js) ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--paper); pointer-events: none; }
.bg .f { position: absolute; will-change: transform; transform: translate3d(0, 0, 0); }
.bg .f i { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--c)) 0%, rgb(var(--c) / .97) 18%, rgb(var(--c) / .9) 32%, rgb(var(--c) / .78) 44%, rgb(var(--c) / .62) 54%, rgb(var(--c) / .46) 63%, rgb(var(--c) / .31) 71%, rgb(var(--c) / .19) 79%, rgb(var(--c) / .1) 86%, rgb(var(--c) / .04) 93%, rgb(var(--c) / 0) 100%); opacity: 0; transform: scale(.94); transition: opacity 1.4s var(--ease-arrive), transform 1.6s var(--ease-arrive); }
.bg.is-in .f i { opacity: var(--o); transform: scale(1); }
.bg .f1 { width: 72vw; height: 72vw; left: -14vw; top: -30vw; } .bg .f1 i { --c: 254 228 210; --o: 1; }
.bg .f2 { width: 46vw; height: 46vw; right: -10vw; top: 6vh; } .bg .f2 i { --c: 214 176 162; --o: .45; transition-delay: .12s; }
.bg .f3 { width: 40vw; height: 40vw; left: 30vw; top: 46vh; } .bg .f3 i { --c: 249 226 223; --o: 1; transition-delay: .24s; }
.bg .f4 { width: 22vw; height: 22vw; right: 4vw; bottom: -6vh; } .bg .f4 i { --c: 95 21 19; --o: .10; transition-delay: .36s; }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 42; padding-top: var(--safe-t); }
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 -1px 0 rgba(7,4,46,.08), 0 8px 24px -12px rgba(7,4,46,.14); opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility 0s linear .26s; }
.topbar.is-scrolled::before { opacity: 1; visibility: visible; transition: opacity .26s ease, visibility 0s; }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; visibility: hidden; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--head); }
.topbar .brand { border-radius: 8px; }
.topbar .brand img { width: 87px; height: 32px; }
.top-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 20px; border-radius: 999px; border: 1.5px solid var(--oxblood); color: var(--oxblood); background: rgba(255,255,255,.72); font: 600 var(--t-2)/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-ui); }
.top-cta::after { content: "→"; font-weight: 400; transition: transform .2s var(--ease-ui); }
.top-cta:hover { background: var(--oxblood); color: var(--cream); }
.top-cta:hover::after { transform: translateX(3px); }
.top-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
.top-cta:active { transform: scale(.98); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 var(--t-2)/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-ui); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--oxblood); color: var(--cream); box-shadow: 0 1px 2px rgba(95,21,19,.2), 0 8px 20px -8px rgba(95,21,19,.5); }
.btn-primary:hover { background: var(--oxblood-700); }
.btn-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-secondary { background: rgba(255,255,255,.6); color: var(--ink); border-color: rgba(7,4,46,.18); }
.btn-secondary:hover { color: var(--oxblood); border-color: rgba(95,21,19,.5); }
/* Quiet button (Explore more): text and a chevron, no fill; the chevron steps right on hover. */
.btn-quiet { background: transparent; color: var(--ink); border-color: rgba(7,4,46,.18); padding: 0 18px 0 22px; }
.btn-quiet .chev { width: 16px; height: 16px; transition: transform .2s var(--ease-ui); }
.btn-quiet:hover { color: var(--oxblood); border-color: rgba(95,21,19,.5); }
.btn-quiet:hover .chev { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Labels and section heads ---------- */
.label { font-size: var(--t-2); font-weight: 600; line-height: 1.4; color: var(--oxblood); letter-spacing: 0; }
.section { padding: var(--space-section) 0 0; }
.sec-head { position: relative; padding-top: 28px; max-width: 960px; }
.sec-head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); opacity: .9; transform-origin: left; }
.sec-head h2 { margin-top: 18px; font-size: var(--t-6); line-height: 1.04; letter-spacing: -0.035em; }
.sec-head .lede { margin-top: 24px; max-width: 46ch; font-size: var(--t-4); line-height: 1.5; color: var(--ink-500); }
.sec-head { margin-bottom: var(--space-intro); }
.sec-head { max-width: none; }
.sec-head > * { max-width: 960px; }

/* ---------- Hero ---------- */
.hero { min-height: calc(100svh - var(--head-total)); display: grid; align-items: center; text-align: center; padding: 40px 0 calc(var(--nav-reserve) + 8px); }
.hero h1 { font-size: var(--t-7); line-height: 1.0; letter-spacing: -0.045em; max-width: 12em; margin: 0 auto; }
/* The stripe: the mark's two blades, no box. Oxblood on Paper (the kit's cream stripe disappears on Paper);
   the back blade at 75% as in the kit. */
.stripe { width: clamp(72px, 7.6vw, 104px); margin: clamp(28px, 3.6vw, 44px) auto 0; }
.stripe svg { width: 100%; height: auto; overflow: visible; }
.stripe .blade { fill: var(--oxblood); transform-box: fill-box; }
.stripe .b1 { opacity: .75; }
.hero-btns { margin-top: clamp(32px, 4vw, 48px); }

/* ---------- Services: three offerings, each a pitch beside an index of rows ---------- */
.offering { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; padding: clamp(48px, 5.5vw, 80px) 0; position: relative; }
.offering + .offering::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule); }
.offering:first-child { padding-top: 0; }
.off-copy h3 { margin-top: 12px; font-size: var(--t-5); line-height: 1.12; letter-spacing: -0.025em; }
.off-sub { margin-top: 16px; font-size: var(--t-3); line-height: 1.55; color: var(--ink-500); }
.off-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Index rows (D1): a hairline, a title, its line. Used by Services and Labs. */
.rows { border: 0; }
.row { position: relative; display: grid; align-items: baseline; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 32px; padding: 22px 0 24px; }
.row::before, .row:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); transform-origin: left; }
.row::before { top: 0; }
.row:last-child::after { bottom: 0; }
.row dt { font-size: var(--t-3); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.row dd { font-size: var(--t-3); line-height: 1.55; color: var(--ink-500); }
.offering .row:first-child::before { background: var(--ink); opacity: .9; }
.rows-lg .row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(40px, 6vw, 96px); padding: 32px 0 36px; }
.rows-lg .row dt { font-size: var(--t-5); letter-spacing: -0.025em; line-height: 1.15; }
.rows-lg .row dd { font-size: var(--t-4); max-width: 44ch; }

/* ---------- Investments: typographic grid (D2), hairlines only ---------- */
.grid-block + .grid-block { margin-top: clamp(56px, 6vw, 88px); }
.group-title { font-size: var(--t-2); font-weight: 600; letter-spacing: 0; color: var(--oxblood); margin-bottom: 16px; }
.cols { position: relative; display: grid; }
.cols::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); opacity: .9; transform-origin: left; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col { position: relative; padding: 28px clamp(20px, 2.6vw, 40px) 8px; }
.col:first-child { padding-left: 0; }
.col + .col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--rule); transform-origin: top; }
.col h4 { font-size: var(--t-5); line-height: 1.15; letter-spacing: -0.02em; }
.col p { margin-top: 14px; font-size: var(--t-3); line-height: 1.55; color: var(--ink-500); max-width: 42ch; }
.cols-2 .col h4 { font-size: var(--t-5); letter-spacing: -0.025em; }
.cols-2 .col p { font-size: var(--t-3); }

/* SAFER: the page's one filled Oxblood surface. */
.safer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 32px; margin-top: clamp(56px, 6vw, 88px); padding: 28px clamp(24px, 3vw, 40px); border-radius: 16px; background: var(--oxblood); color: var(--cream); text-decoration: none; transition: background-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-ui); }
.safer:hover { background: var(--oxblood-700); }
.safer:active { transform: scale(.995); }
.safer:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 16px; }
.safer-name { font-size: var(--t-5); font-weight: 600; letter-spacing: -0.01em; }
.safer-text { font-size: var(--t-3); line-height: 1.5; color: rgba(254,228,210,.86); max-width: 60ch; }
.safer-go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-2); font-weight: 600; white-space: nowrap; }
.safer-go svg { width: 16px; height: 16px; transition: transform .2s var(--ease-ui); }
.safer:hover .safer-go svg { transform: translate(2px, -2px); }
.sec-cta { margin-top: 32px; display: flex; justify-content: flex-start; }

/* ---------- About ---------- */
.sec-head .about-lede { max-width: 40ch; color: var(--ink); font-size: var(--t-4); line-height: 1.45; }
.about-cols .col { margin: 0; font-size: var(--t-3); line-height: 1.55; color: var(--ink-500); padding-bottom: 0; max-width: none; }
.about-cols .col { max-width: none; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(20px, 2.6vw, 40px); margin-top: clamp(56px, 6vw, 88px); padding-top: 24px; border-top: 1px solid var(--rule); }
.facts dt { font-size: var(--t-2); font-weight: 600; color: var(--oxblood); }
.facts dd { margin-top: 8px; font-size: var(--t-2); line-height: 1.55; color: var(--ink-500); }

/* ---------- Closing and footer ---------- */
.closing { text-align: center; padding: var(--space-section) 0; }
.closing h2 { font-size: var(--t-6); letter-spacing: -0.035em; }
.closing p { margin: 20px auto 0; max-width: 56ch; color: var(--ink-500); font-size: var(--t-4); }
.closing .btn-row { margin-top: 36px; }
.footer { border-top: 1px solid var(--rule-soft); background: rgba(248,244,241,.85); }
.footer .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
.f-company { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--t-2); color: var(--ink-500); }
.f-company img { width: 81px; height: 30px; }
.f-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; font-size: var(--t-2); }
.f-legal a, .f-legal button { color: var(--ink-500); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 12px 6px; min-height: 44px; }
.f-legal a:hover, .f-legal button:hover, .f-legal a:focus-visible, .f-legal button:focus-visible { color: var(--oxblood); text-decoration: underline; }
.f-legal .sep { color: var(--ink-500); opacity: .6; }
.f-social { display: flex; justify-content: flex-end; gap: 4px; }
.f-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-500); transition: color .2s, background-color .2s; }
.f-social a:hover { color: var(--oxblood); background: rgba(95,21,19,.06); }
.f-social svg { width: 20px; height: 20px; }
.copyright { grid-column: 1 / -1; text-align: center; font-size: var(--t-1); color: var(--ink-500); margin-top: 8px; }
.closing, .footer { content-visibility: auto; contain-intrinsic-size: auto 300px; }

/* ---------- Bottom nav: tab pill + Command-K as one centered group ---------- */
.navbar { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-gap) + var(--safe-b)); z-index: 40; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 calc(8px + var(--safe-r)) 0 calc(8px + var(--safe-l)); pointer-events: none; }
.navbar > * { pointer-events: auto; }
.dock, .cmdk { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease-arrive), transform .5s var(--ease-arrive); }
.dock.is-in, .cmdk.is-in { opacity: 1; transform: none; }
.dock { display: flex; align-items: center; gap: 4px; height: var(--nav-h); padding: 6px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--float-shadow); min-width: 0; }
.dock .home { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.dock .home img { width: 36px; height: 36px; border-radius: 50%; transition: transform .2s var(--ease-ui); }
.dock .home:hover img { transform: scale(1.06); }
.dock .home:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 1px; border-radius: 50%; }
.divider { flex: none; width: 1px; height: 24px; background: rgba(7,4,46,.12); margin: 0 4px; }
.pill { display: flex; align-items: center; position: relative; min-width: 0; }
.pill .lw { position: relative; }
.pill .links { display: flex; gap: 2px; position: relative; list-style: none; }
.pill .ind { position: absolute; top: 0; left: 0; height: 44px; border-radius: 999px; background: var(--oxblood); opacity: 0; z-index: 0; transition: transform .4s var(--ease-travel), width .4s var(--ease-travel), opacity .2s ease; }
.pill .links a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: var(--t-2); font-weight: 400; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color .2s ease, background-color var(--dur-ui) ease; }
.pill .links a:hover { color: var(--oxblood); background: rgba(95,21,19,.07); }
.pill .links a:focus-visible { outline: 2px solid var(--oxblood); outline-offset: -2px; border-radius: 999px; }
.pill .links a[aria-current="true"] { color: var(--cream); background: transparent; }
.dock-cta { flex: none; height: 44px; min-height: 44px; padding: 0 18px; font-size: var(--t-2); margin-left: 2px; box-shadow: none; }
.cmdk { flex: none; width: var(--nav-h); height: var(--nav-h); padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--oxblood); background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--float-shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .4s var(--ease-arrive), transform .5s var(--ease-arrive), background-color .2s ease; }
.cmdk.is-in:hover { transform: translateY(-1px); background-color: rgba(255,255,255,.92); transition-duration: .4s, var(--dur-ui), .2s; }
.cmdk.is-in:active { transform: scale(.96); transition-duration: .4s, .1s, .2s; }
.cmdk:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 4px; border-radius: 50%; }
.cmdk-key { display: inline-flex; align-items: center; font: 400 var(--t-2)/1 var(--sans); white-space: nowrap; color: var(--oxblood); font-feature-settings: "kern", "case"; }
.cmdk-key .m { font-size: .8em; font-weight: 400; transform: translateY(.04em); opacity: .82; margin-right: -.03em; }
.cmdk-key .k { font-weight: 400; letter-spacing: .01em; }
.cmdk-key.is-ctrl { gap: 2px; }
.cmdk-key.is-ctrl .m { font-size: var(--t-1); font-weight: 400; letter-spacing: .02em; transform: none; margin-right: 0; opacity: .75; }
.cmdk-key.is-ctrl .k { font-size: var(--t-1); }
.cmdk::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.cmdk { position: relative; }
.cmdk.ping { animation: cmdk-press .36s var(--ease-ui); }
.cmdk.ping::before { animation: cmdk-ring .7s var(--ease-arrive); }
@keyframes cmdk-press { 35% { transform: scale(.96); } 100% { transform: none; } }
@keyframes cmdk-ring { from { box-shadow: 0 0 0 0 rgba(95,21,19,.22); } to { box-shadow: 0 0 0 12px rgba(95,21,19,0); } }

/* ---------- How It Works sheet ---------- */
dialog.sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
dialog.sheet::backdrop { background: rgba(7,4,46,.32); }
.sheet-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: calc(20px + var(--safe-t)) calc(clamp(24px, 4vw, 48px) + var(--safe-r)) calc(32px + var(--safe-b)) clamp(24px, 4vw, 48px); background: var(--sheet); box-shadow: -1px 0 0 rgba(7,4,46,.08), -32px 0 80px -24px rgba(7,4,46,.28); }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.sheet-close { flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ink-500); cursor: pointer; transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-ui); }
.sheet-close svg { width: 22px; height: 22px; }
.sheet-close:hover { background: rgba(7,4,46,.06); color: var(--ink); }
.sheet-close:active { transform: scale(.94); }
.sheet-close:focus-visible { outline-offset: 0; border-radius: 50%; }
.sheet h2 { margin-top: clamp(20px, 4vh, 40px); font-size: var(--t-5); line-height: 1.05; letter-spacing: -0.035em; }
.sheet h2:focus { outline: none; }
.sheet-sub { margin-top: 14px; font-size: var(--t-3); line-height: 1.5; color: var(--ink-500); max-width: 36ch; }
/* The steps: a plain sequence on one thread. Order is the reading order; no numbers. */
.seq { list-style: none; margin-top: 36px; }
.seq li { position: relative; padding: 0 0 32px 32px; }
.seq li:last-child { padding-bottom: 0; }
.seq li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--oxblood); }
.seq li:first-child::before { background: var(--oxblood); }
.seq li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: calc(.42em + 17px); bottom: 6px; width: 1px; background: rgba(95,21,19,.32); transform-origin: top; }
.seq h3 { font-size: var(--t-4); line-height: 1.3; letter-spacing: -0.015em; }
.seq p { margin-top: 8px; font-size: var(--t-3); line-height: 1.55; color: var(--ink-500); }
.sheet-foot { margin-top: auto; padding-top: 40px; }

/* ---------- Command-K box ---------- */
dialog.ask { width: min(680px, calc(100vw - 24px)); max-width: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
dialog.ask::backdrop { background: rgba(7,4,46,.34); }
.ask-box { position: relative; border-radius: 28px; padding: 18px 18px 14px 20px; background: linear-gradient(180deg, #FFFEFC 0%, #FBF7F3 100%); box-shadow: 0 0 0 1px rgba(95,21,19,.16), 0 2px 4px rgba(7,4,46,.06), 0 18px 40px -10px rgba(7,4,46,.22), 0 40px 120px -30px rgba(95,21,19,.5); transition: box-shadow .2s ease; }
.ask-box:focus-within { box-shadow: 0 0 0 2px rgba(95,21,19,.45), 0 2px 4px rgba(7,4,46,.06), 0 18px 40px -10px rgba(7,4,46,.22), 0 40px 120px -30px rgba(95,21,19,.5); }
.ask textarea { display: block; width: 100%; min-height: 64px; max-height: 40vh; padding: 10px 44px 8px 2px; border: 0; outline: 0; resize: none; overflow-y: auto; background: transparent; color: var(--ink); font: 400 clamp(19px, 2.2vw, 22px)/1.45 var(--sans); }
.ask textarea::placeholder { color: rgba(76,83,117,.55); }
.ask-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(7,4,46,.08); }
.ask-help { font-size: var(--t-1); line-height: 1.5; color: var(--ink-500); }
.ask-help > span[aria-hidden] { display: inline-block; margin: 0 8px 0 4px; }
.ask-help kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; font: 600 var(--t-1)/1.5 var(--sans); color: var(--ink); background: rgba(7,4,46,.05); box-shadow: inset 0 -1px 0 rgba(7,4,46,.12); }
.ask-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--oxblood); color: var(--cream); cursor: pointer; box-shadow: 0 6px 16px -6px rgba(95,21,19,.6); transition: background-color .2s ease, box-shadow .2s ease, transform var(--dur-ui) var(--ease-ui); }
.ask-send svg { width: 18px; height: 18px; }
.ask-send:hover:not(:disabled) { transform: translateY(-1px); background: var(--oxblood-700); }
.ask-send:active:not(:disabled) { transform: scale(.94); }
.ask-send:disabled { background: rgba(95,21,19,.22); box-shadow: none; cursor: default; }
.ask-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ask-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-500); font-size: var(--t-4); line-height: 1; cursor: pointer; }
.ask-close:hover { background: rgba(7,4,46,.06); color: var(--ink); }
.ask-close:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 0; }
.ask-box.shake { animation: ask-shake .32s ease; }
@keyframes ask-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* ---------- Consent banner and panel (text from Legal's draft) ---------- */
.cbanner { position: fixed; left: 50%; bottom: calc(var(--nav-reserve) + var(--safe-b)); transform: translateX(-50%); z-index: 45; width: min(680px, calc(100vw - 32px)); max-height: calc(100svh - var(--nav-reserve) - var(--head-total) - 16px); overflow: auto; padding: 22px 24px; border-radius: 20px; background: var(--paper); border: 1px solid rgba(7,4,46,.1); box-shadow: 0 16px 48px rgba(7,4,46,.16); }
.cbanner[hidden] { display: none; }
.cbanner h2 { font-size: var(--t-3); letter-spacing: 0; }
.cbanner p { margin-top: 8px; font-size: var(--t-2); color: var(--ink-500); }
.cbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.cbtns .btn { min-height: 44px; padding: 0 14px; font-size: var(--t-2); }
.btn-equal { background: var(--paper); color: var(--ink); border-color: rgba(7,4,46,.28); }
.btn-equal:hover { border-color: var(--oxblood); color: var(--oxblood); }
.bk { background: rgba(214,176,162,.35); color: var(--ink); border-radius: 4px; padding: 0 3px; font-size: .95em; }
.drafting { display: block; margin-top: 10px; font-size: var(--t-1); }
dialog.cpanel { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid rgba(7,4,46,.1); border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 64px rgba(7,4,46,.22); }
dialog.cpanel::backdrop { background: rgba(7,4,46,.35); }
.cp-inner { padding: 28px; overflow: auto; }
.cp-inner h2 { font-size: var(--t-4); }
.cp-inner > p { margin-top: 10px; font-size: var(--t-2); color: var(--ink-500); }
.cat { margin-top: 18px; padding: 18px 0 0; border-top: 1px solid rgba(7,4,46,.1); }
.cat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cat-head h3 { font-size: var(--t-2); letter-spacing: 0; }
.cat p { margin-top: 8px; font-size: var(--t-2); color: var(--ink-500); }
.always { font-size: var(--t-1); color: var(--oxblood); font-weight: 600; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(7,4,46,.22); transition: background-color .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease-ui); }
.switch input:checked + span { background: var(--oxblood); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.cp-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; font-size: var(--t-4); color: var(--ink-500); cursor: pointer; }
.cp-close:hover { background: rgba(7,4,46,.06); color: var(--ink); }

/* =====================================================================================================================
   Motion. Everything here is behind .motion (set only when reduced motion is off).
   ===================================================================================================================== */
/* Hero: the headline paints at once (it is the LCP). The stripe wipes in left to right, back blade then front blade
   sliding a touch further, on the arrival curve; then the buttons arrive. */
.motion .stripe { animation: stripe-wipe .8s var(--ease-arrive) .12s both; }
.motion .stripe .b1 { animation: blade-in .8s var(--ease-arrive) .12s both; }
.motion .stripe .b2 { animation: blade-in-2 .8s var(--ease-arrive) .2s both; }
@keyframes stripe-wipe { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -10% -10% 0); } }
@keyframes blade-in { from { transform: translateX(-14%); } }
@keyframes blade-in-2 { from { transform: translateX(-26%); } }
/* v7: the hero buttons are solid at first paint (the primary CTA never waits on motion). */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* Scroll reveals (v7 timing: 500 ms, 8 px; rules 600 ms): arrive once, whole, on the arrival curve. Rules draw from their start edge first (the cause),
   then the words settle; rows and columns follow each other 80 ms apart. */
.motion .reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-arrive), transform .5s var(--ease-arrive); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .reveal.rows, .motion .reveal.cols { opacity: 1; transform: none; }
.motion .sec-head.reveal::before { transform: scaleX(0); transition: transform .6s var(--ease-arrive); }
.motion .sec-head.reveal.in::before { transform: none; }
.motion .rows.reveal .row::before, .motion .rows.reveal .row:last-child::after { transform: scaleX(0); transition: transform .5s var(--ease-arrive) calc(var(--i, 0) * 80ms); }
.motion .rows.reveal .row > * { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-arrive) calc(var(--i, 0) * 80ms + 120ms), transform .5s var(--ease-arrive) calc(var(--i, 0) * 80ms + 120ms); }
.motion .rows.reveal.in .row::before, .motion .rows.reveal.in .row:last-child::after { transform: none; }
.motion .rows.reveal.in .row > * { opacity: 1; transform: none; }
.motion .cols.reveal::before { transform: scaleX(0); transition: transform .6s var(--ease-arrive); }
.motion .cols.reveal .col + .col::before { transform: scaleY(0); transition: transform .5s var(--ease-arrive) calc(var(--i, 0) * 80ms + 200ms); }
.motion .cols.reveal .col > *, .motion .cols.reveal p.col { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-arrive) calc(var(--i, 0) * 80ms + 160ms), transform .5s var(--ease-arrive) calc(var(--i, 0) * 80ms + 160ms); }
.motion .cols.reveal.in::before, .motion .cols.reveal.in .col + .col::before { transform: none; }
.motion .cols.reveal.in .col > *, .motion .cols.reveal.in p.col { opacity: 1; transform: none; }
.motion .about-cols.reveal p.col::before { transform: scaleY(0); }
.motion .about-cols.reveal.in p.col::before { transform: none; }
.motion .facts.reveal > div { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-arrive) calc(var(--i, 0) * 80ms), transform .5s var(--ease-arrive) calc(var(--i, 0) * 80ms); }
.motion .facts.reveal { opacity: 1; transform: none; }
.motion .facts.reveal.in > div { opacity: 1; transform: none; }

/* Sheet: the panel travels in from its edge (right on wide screens, bottom on phones) on the travel curve, driven by
   v6.js with the Web Animations API (520 ms in, 280 ms out); the backdrop fades with it; the steps arrive down their
   thread after the sheet lands. */
.motion dialog.sheet[open]::backdrop { animation: fade-in .3s ease both; }
.motion dialog.sheet[open] .seq li > * { animation: rise .6s var(--ease-arrive) both; animation-delay: calc(var(--i, 0) * 80ms + 280ms); }
.motion dialog.sheet[open] .seq li::before { animation: dot-in .4s var(--ease-arrive) both; animation-delay: calc(var(--i, 0) * 80ms + 260ms); }
.motion dialog.sheet[open] .seq li::after { animation: thread .7s var(--ease-arrive) both; animation-delay: calc(var(--i, 0) * 80ms + 360ms); }
.motion dialog.sheet[open] .sheet-foot { animation: rise .6s var(--ease-arrive) .5s both; }
.motion dialog.sheet.is-closing::backdrop { animation: fade-out .28s ease both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes dot-in { from { transform: scale(0); } }
@keyframes thread { from { transform: scaleY(0); } }

/* Command-K box: opens from just below with a touch of scale; closes the same way (v6.js holds it 170 ms). */
.motion dialog.ask[open] .ask-box { animation: ask-in .26s var(--ease-arrive) both; }
.motion dialog.ask[open]::backdrop { animation: fade-in .22s ease both; }
.motion dialog.ask.is-closing .ask-box { animation: ask-out .16s ease both; }
.motion dialog.ask.is-closing::backdrop { animation: fade-out .16s ease both; }
@keyframes ask-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes ask-out { to { opacity: 0; transform: translateY(6px) scale(.99); } }

/* =====================================================================================================================
   Responsive. One rule for the nav: width only (no height-based switch), so 600 portrait and 667 landscape agree.
   ===================================================================================================================== */
@media (max-width: 1023px) {
  /* Offerings stack: pitch, then rows, both on one measure so line lengths match (no 95-character lines). */
  .offering { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 720px; }
  .rows-lg .row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .footer .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .f-social { justify-content: center; }
}
/* 640-899: three columns get too narrow, so What We Bring and About become ruled rows (title beside its line). */
@media (max-width: 899px) {
  .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .cols-3 .col, .cols-3 .col:first-child { padding: 22px 0 24px; }
  .cols-3 .col:not(p) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 32px; align-items: baseline; }
  .cols-3 .col p { margin-top: 0; }
  .cols-3 .col + .col::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform-origin: left; }
  .motion .cols-3.reveal .col + .col::before { transform: scaleX(0); }
  .motion .cols-3.reveal.in .col + .col::before { transform: none; }
}
@media (max-width: 767px) {
  .cols-2, .cols-3, .facts { grid-template-columns: minmax(0, 1fr); }
  .col, .col:first-child { padding: 24px 0 28px; }
  .col + .col::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform-origin: left; }
  .motion .cols.reveal .col + .col::before { transform: scaleX(0); }
  .motion .cols.reveal.in .col + .col::before { transform: none; }
  .safer { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .facts { gap: 24px; }
}
@media (max-width: 639px) {
  :root { --head: 60px; --nav-h: 48px; --nav-gap: 10px; }
  .topbar .brand img { width: 76px; height: 28px; }
  .top-cta { min-height: 40px; padding: 0 14px 0 16px; font-size: var(--t-2); }
  /* Phone nav: one slim row. The tabs share the width; the mark and button step aside (top bar + page carry them). */
  .dock { flex: 1 1 auto; max-width: 420px; padding: 4px; }
  .dock .home, .dock .divider, .dock .dock-cta { display: none; }
  .pill, .pill .lw, .pill .links { width: 100%; }
  .pill .links { gap: 0; }
  .pill .links li { flex: 1 1 auto; }
  .pill .ind, .pill .links a { height: 40px; }
  .pill .links a { padding: 0 6px; font-size: var(--t-2); }
  .cmdk-key { font-size: var(--t-2); }
  .cmdk-key.is-ctrl .m { font-size: var(--t-1); } .cmdk-key.is-ctrl .k { font-size: var(--t-1); }
  .hero { padding-top: 24px; }
  .hero-btns { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
  .off-actions .btn { flex: 1 1 auto; }
  .row, .rows-lg .row, .cols-3 .col:not(p) { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .row, .rows-lg .row { padding: 18px 0 20px; }
  .cols-3 .col p { margin-top: 4px; }
  .rows-lg .row { padding: 24px 0 28px; }
  .off-sub, .sec-head .lede { font-size: var(--t-3); }
  .sec-head .about-lede { font-size: var(--t-4); }
  .about-cols .col, .about-cols .col:first-child { padding: 18px 0 20px; }
  .closing .btn-row { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
  .cbtns { grid-template-columns: 1fr; }
  .cbanner { padding: 18px 18px; }
  /* Sheet on phones: rises from the bottom, rounded top, leaves room to see the page behind. */
  .sheet-panel { top: auto; left: 0; width: 100%; max-height: calc(100svh - 48px - var(--safe-t)); border-radius: 24px 24px 0 0; padding: 12px 24px calc(24px + var(--safe-b)); box-shadow: 0 -1px 0 rgba(7,4,46,.08), 0 -24px 64px -24px rgba(7,4,46,.3); }
  .sheet h2 { margin-top: 12px; }
  .sheet-foot { padding-top: 32px; }
  .sheet-foot .btn { width: 100%; }
}
@media (max-width: 360px) {
  .pill .links a { padding: 0 4px; font-size: var(--t-1); }
  .hero h1 { font-size: var(--t-7); }
}
/* Short landscape phones: the top bar scrolls away with the page and the nav slims, so chrome stays under 15% of the height. */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --nav-h: 48px; --nav-gap: 8px; --head: 56px; }
  .topbar { position: relative; }
  section[id], [id].anchor { scroll-margin-top: 16px; }
  .dock { padding: 4px; }
  .dock .home { width: 40px; height: 40px; } .dock .home img { width: 32px; height: 32px; }
  .pill .ind, .pill .links a, .dock-cta { height: 40px; min-height: 40px; }
  .hero { min-height: 0; padding: 24px 0 calc(var(--nav-reserve) + 8px); }
  .hero h1 { font-size: var(--t-6); max-width: 22ch; }
  .stripe { width: 60px; margin-top: 18px; }
  .hero-btns { margin-top: 22px; }
  .sheet-panel { padding-top: 12px; }
  .sheet h2 { margin-top: 8px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .topbar::before, .dock, .cmdk { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dock, .cmdk { opacity: 1; transform: none; transition: none; }
  .bg .f i { transition: none; }
}

/* =====================================================================================================================
   v6.1 (2026-11-03): brand band, client logos, the intake form (sheet + start.html), and the first accessibility fix
   from the critique (focus never hides under the fixed bars: WCAG 2.4.11).
   ===================================================================================================================== */
html { scroll-padding-top: calc(var(--head-total) + 16px); scroll-padding-bottom: calc(var(--nav-reserve) + 16px); }

/* ---------- Brand band: the one-line definition, full bleed in Oxblood, right under the hero ---------- */
.band { background: var(--oxblood); color: var(--cream); padding: clamp(56px, 7vw, 104px) 0; }
.band-line { font-size: var(--t-6); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; max-width: 19ch; text-wrap: balance; }

/* ---------- PARKED (Ben, 2026-11-03): logo row is not on the page. ---------- */
.logos { padding: clamp(56px, 6vw, 96px) 0 0; --logo-base: 30px; --logo-ink: rgba(7,4,46,.80); --cols: 6; }
.logos-h { font-size: var(--t-2); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--ink-500); text-align: center; margin: 0 auto clamp(28px, 3.4vw, 44px); max-width: 40ch; }
.logo-list { list-style: none; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 3vw, 40px); align-items: center; justify-items: center; }
.logo { display: grid; place-items: center; height: calc(var(--logo-base) * 2); min-width: 0; width: 100%; }
.logo img { height: calc(var(--logo-base) * var(--m, 1)); width: auto; max-width: 100%; object-fit: contain; filter: brightness(0); opacity: .8; }
.logo.is-raw img { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: .85; }
.logo-mark { display: block; width: min(100%, calc(var(--logo-base) * var(--m, 1) * var(--r, 3))); aspect-ratio: var(--r, 3); background-color: var(--logo-ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.logo.is-placeholder .logo-mark, .logo.is-placeholder img { opacity: .5; }
.logo.is-placeholder .logo-mark { opacity: 1; background-color: rgba(76,83,117,.5); }
.logo-pause { display: flex; align-items: center; gap: 8px; margin: 12px auto 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-500); font: 400 var(--t-1)/1 var(--sans); cursor: pointer; }
.logo-pause[hidden] { display: none; }
.logo-pause::before { content: ""; width: 10px; height: 10px; background: currentColor; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.logo-pause[aria-pressed="true"]::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.logo-pause .lp-play, .logo-pause[aria-pressed="true"] .lp-pause { display: none; }
.logo-pause[aria-pressed="true"] .lp-play { display: inline; }
.logo-pause:hover { color: var(--ink); background: rgba(7,4,46,.05); }
/* Marquee (more than 8 logos, wide screens, motion allowed): two copies of the list travel as one strip. */
.logo-rail.is-marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.logo-rail.is-marquee .logo-list { display: flex; flex: none; gap: 0; animation: logos-travel var(--dur, 40s) linear infinite; }
.logo-rail.is-marquee .logo { width: auto; padding: 0 clamp(28px, 3.2vw, 48px); flex: none; }
.logo-rail.is-marquee .logo-mark { width: calc(var(--logo-base) * var(--m, 1) * var(--r, 3)); }
.logo-rail.is-marquee:hover .logo-list, .logo-rail.is-marquee:focus-within .logo-list, .logo-rail.is-paused .logo-list, .logo-rail.is-offscreen .logo-list { animation-play-state: paused; }
@keyframes logos-travel { to { transform: translateX(-100%); } }

/* ---------- Intake form (sheet on index.html, page on start.html) ---------- */
.intake .sheet-top { margin-bottom: 4px; }
.i-progress { height: 2px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.i-progress span { display: block; height: 100%; background: var(--oxblood); transform-origin: left; transform: scaleX(.5); transition: transform .4s var(--ease-travel); }
.intake .i-title, .start-page .i-title { margin-top: clamp(20px, 3.6vh, 36px); }
.i-step:focus, .i-title:focus { outline: none; }
/* Step 1: chips (native radios, so arrow keys and screen readers work as a group). */
.chips { border: 0; padding: 0; margin: 28px 0 0; min-width: 0; display: grid; gap: 8px; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.chip span { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 20px 0 18px; border-radius: 16px; border: 1px solid rgba(7,4,46,.2); background: rgba(255,255,255,.65); color: var(--ink); font-size: var(--t-2); font-weight: 400; line-height: 1.25; transition: border-color var(--dur-ui) ease, background-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-ui); }
.chip span::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(7,4,46,.35); transition: box-shadow .2s var(--ease-arrive), background-color .2s ease; }
.chip:hover span { border-color: rgba(95,21,19,.5); }
.chip input:active + span { transform: scale(.985); }
.chip input:checked + span { border-color: var(--oxblood); background: rgba(95,21,19,.06); color: var(--oxblood); }
.chip input:checked + span::before { background: var(--oxblood); box-shadow: inset 0 0 0 5px var(--oxblood), inset 0 0 0 9px var(--cream); }
.chip input:focus-visible + span { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.chips[aria-invalid="true"] .chip span { border-color: rgba(95,21,19,.55); }
.i-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.i-actions-1 { margin-top: 32px; }
/* Step 2: fields. 17 px text so iOS never zooms; 52 px tall; focus = Oxblood border + soft ring. */
.i-chosen { margin-top: 12px; font-size: var(--t-2); line-height: 1.5; color: var(--ink-500); }
.i-chosen strong { color: var(--ink); font-weight: 600; }
.i-link { display: inline; min-height: 24px; padding: 0; border: 0; background: none; color: var(--oxblood); font: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.i-link:hover { color: var(--oxblood-700); }
.i-field { margin-top: 20px; }
.i-field[hidden] { display: none; }
.i-field label { display: block; margin-bottom: 8px; font-size: var(--t-2); font-weight: 600; line-height: 1.4; }
.i-field .opt { font-weight: 400; color: var(--ink-500); }
.i-field input, .i-field select, .i-field textarea { display: block; width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid rgba(7,4,46,.22); border-radius: 12px; background: rgba(255,255,255,.75); color: var(--ink); font: 400 var(--t-3)/1.4 var(--sans); -webkit-appearance: none; appearance: none; transition: border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease; }
.i-field textarea { min-height: 104px; resize: vertical; }
.i-field select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%234C5375' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; }
.i-field input:hover, .i-field select:hover, .i-field textarea:hover { border-color: rgba(7,4,46,.36); }
.i-field input:focus, .i-field select:focus, .i-field textarea:focus { outline: none; border-color: var(--oxblood); box-shadow: 0 0 0 1px var(--oxblood), 0 0 0 5px rgba(95,21,19,.12); }
.i-field [aria-invalid="true"] { border-color: var(--oxblood); }
.i-field ::placeholder { color: rgba(76,83,117,.6); }
.i-hint { margin-top: 8px; font-size: var(--t-2); line-height: 1.45; color: var(--ink-500); }
.i-hint:empty { display: none; }
.i-err { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; font-size: var(--t-2); line-height: 1.45; font-weight: 400; color: var(--oxblood); }
.i-err[hidden] { display: none; }
.i-err::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--oxblood); color: var(--cream); font-size: var(--t-1); font-weight: 600; transform: translateY(2px); }
.i-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.i-summary { margin-top: 20px; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(95,21,19,.35); background: rgba(95,21,19,.05); font-size: var(--t-2); line-height: 1.5; }
.i-summary[hidden] { display: none; }
.i-summary:focus { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.i-summary ul { margin: 6px 0 0 18px; }
.i-summary a { color: var(--oxblood); font-weight: 400; }
.i-note { margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-size: var(--t-2); line-height: 1.5; background: rgba(7,4,46,.04); border: 1px solid var(--rule); }
.i-note.is-error { background: rgba(95,21,19,.05); border-color: rgba(95,21,19,.35); }
.i-note.is-warn { background: rgba(254,228,210,.6); border-color: rgba(95,21,19,.22); }
.i-note a { color: var(--oxblood); }
.i-fine { margin-top: 20px; font-size: var(--t-1); line-height: 1.5; color: var(--ink-500); }
.i-fine a { color: inherit; }
.i-send { min-width: 132px; }
.i-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.is-busy .i-spin { display: inline-block; }
.motion .is-busy .i-spin { animation: i-spin .8s linear infinite; }
@keyframes i-spin { to { transform: rotate(360deg); } }
.i-send[aria-disabled="true"] { cursor: progress; opacity: .86; }
/* Confirmation */
.i-check { width: 56px; height: 56px; margin-top: clamp(20px, 4vh, 40px); color: var(--oxblood); }
.i-done .i-title { font-size: var(--t-5); margin-top: 20px; }
.i-mock { display: inline-block; margin-top: 16px; padding: 6px 10px; border: 1px dashed rgba(7,4,46,.3); border-radius: 8px; font-size: var(--t-1); color: var(--ink-500); }
.i-mock[hidden] { display: none; }
.motion .i-done:not([hidden]) .i-check circle { stroke-dasharray: 164; animation: i-draw .6s var(--ease-arrive) both; }
.motion .i-done:not([hidden]) .i-check path { stroke-dasharray: 40; animation: i-draw .4s var(--ease-arrive) .32s both; }
@keyframes i-draw { from { stroke-dashoffset: var(--len, 164); } }
.motion .i-done:not([hidden]) .i-check path { --len: 40; }
/* start.html */
.page-start { padding-bottom: 0; background: var(--paper); }
.start-page { padding: clamp(32px, 6vw, 72px) 0 clamp(72px, 9vw, 120px); }
.start-page .wrap { max-width: 640px; }
.start-page h1, .start-page .i-title { font-size: var(--t-6); line-height: 1.05; letter-spacing: -0.035em; }
.start-page .i-progress { display: none; }
.start-sent[hidden], .start-error[hidden] { display: none; }
.start-sent h1 { margin-top: 20px; }
.start-sent h1:focus { outline: none; }
.start-error { margin-top: 20px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(95,21,19,.35); background: rgba(95,21,19,.05); }
html:not(.js) .start-page .i-step[hidden] { display: block; }
#sent:target, #error:target { display: block; }
#sent:target ~ .intake-form { display: none; }

@media (max-width: 767px) {
  .logos { --cols: 3; --logo-base: 26px; }
}
@media (max-width: 639px) {
  .logos { --logo-base: 24px; }
  .logo-list { gap: 20px 12px; }
  .band-line { max-width: 16ch; }
  .logo { height: calc(var(--logo-base) * 1.7); }
  .intake .i-actions .btn { flex: 1 1 100%; }
  .intake .i-actions .i-back { order: 2; }
}
@media (forced-colors: active) {
  .logo-mark { forced-color-adjust: none; background-color: CanvasText; }
  .i-progress span { forced-color-adjust: none; background: Highlight; }
  .chip input:checked + span { outline: 3px solid Highlight; }
  .chip span::before { forced-color-adjust: none; border: 1px solid CanvasText; }
  .band { border-block: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-rail .logo-list { animation: none !important; }
  .i-progress span { transition: none; }
}

/* =====================================================================================================================
   v7 (2026-11-03, plan Phases 2-4): above the fold, colour discipline, one grid, the blade system, phone pacing,
   touch Command-K, forced colours. Type tokens and motion timings were changed in place above.
   ===================================================================================================================== */
/* Measure: no running text wider than 60 characters. */
.off-sub, .sec-head .lede, .col p, .rows-lg .row dd, .closing p, .safer-text, .sheet-sub, .seq p { max-width: var(--measure); }
.row dd { max-width: var(--measure); }

/* Phase 3: a shorter hero, so the Oxblood band shows at the bottom of the first screen. */
.hero { min-height: min(calc(82svh - var(--head-total)), 860px); padding-bottom: clamp(56px, 8vh, 96px); }
/* Audience row: the four ways in, as quiet text pills under the headline. */
.aud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: clamp(20px, 2.6vw, 32px) auto 0; max-width: 720px; }
.aud a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); background: rgba(255,255,255,.45); color: var(--ink); font-size: var(--t-2); font-weight: 400; text-decoration: none; transition: border-color var(--dur-ui) ease, color var(--dur-ui) ease, background-color var(--dur-ui) ease; }
.aud a:hover { border-color: rgba(95,21,19,.45); color: var(--oxblood); background: rgba(255,255,255,.75); }
.aud a:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; border-radius: 999px; }
.hero .stripe { margin-top: clamp(24px, 3vw, 36px); }
.hero-btns { margin-top: clamp(24px, 3vw, 36px); }

/* Dock CTA steps aside while the hero buttons are on screen (v6.js toggles .cta-off), at every width. */
.dock-cta { max-width: 220px; overflow: hidden; transition: max-width .4s var(--ease-travel), opacity .2s ease, padding .4s var(--ease-travel), margin .4s var(--ease-travel); }
.dock.cta-off .dock-cta { max-width: 0; padding-left: 0; padding-right: 0; margin-left: 0; opacity: 0; pointer-events: none; }
.dock.cta-off .dock-cta + *, .dock .divider:last-of-type { transition: opacity .2s ease; }
.dock.cta-off .divider:last-of-type { opacity: 0; width: 0; margin: 0; }

/* Phase 4, colour discipline: filled Oxblood = the one primary in view, SAFER, the band. One heavy rule per section. */
.offering .row:first-child::before { background: var(--rule); opacity: 1; }
.cols::before { background: var(--rule); opacity: 1; }
.grid-block .cols::before { background: var(--rule); }

/* Phase 4, one 12-column grid: Who We Back splits on the same 5/12 line as Services and Labs. */
.cols-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 0; }

/* Phase 4, the blade system: one angle (the mark's, about 32°) used as the page's only diagonal.
   1. Every section rule starts with a short blade tick. 2. The band carries the two blades in Cream.
   3. The closing repeats the hero stripe, small, as a bookend. */
.sec-head::after { content: ""; position: absolute; top: -4px; left: 0; width: 22px; height: 9px; background: var(--oxblood); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.motion .sec-head.reveal::after { opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--ease-arrive), transform .6s var(--ease-arrive); }
.motion .sec-head.reveal.in::after { opacity: 1; transform: none; }
.sec-head::before { left: 28px; }
.band { position: relative; overflow: hidden; }
.band .wrap { position: relative; z-index: 1; }
.band-blades { position: absolute; top: 0; right: 0; bottom: 0; width: min(46vw, 620px); pointer-events: none; overflow: hidden; }
.band-blades svg { width: 100%; height: 100%; display: block; }
@media (max-width: 639px) { .band-blades { width: 64vw; } }
.band-blades .blade { fill: var(--cream); opacity: .09; }
.band-blades .b1 { opacity: .06; }
.stripe-sm { width: 56px; margin: 0 auto 28px; }
.motion .closing .reveal .stripe, .motion .closing .stripe { animation: none; }
.motion .closing .reveal:not(.in) .stripe { clip-path: inset(-10% 100% -10% 0); }
.motion .closing .reveal.in .stripe { clip-path: inset(-10% -10% -10% 0); transition: clip-path .8s var(--ease-arrive) .1s; }

/* Phase 4, phones: each offering's rows collapse to their titles; a tap opens one (v6.js adds the buttons). */

@media (max-width: 639px) {
  .offering .rows.is-collapsible .row { padding: 0; }
  .offering .rows.is-collapsible dt { display: block; }
  .row-btn { all: unset; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 12px 0; box-sizing: border-box; cursor: pointer; font-size: var(--t-3); font-weight: 600; line-height: 1.35; color: var(--ink); -webkit-tap-highlight-color: transparent; }
  .row-btn::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--ink-500); border-bottom: 1.5px solid var(--ink-500); transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease-travel); }
  .row-btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .row-btn:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; border-radius: 6px; }
  .offering .rows.is-collapsible dd { display: none; padding: 0 0 18px; }
  .offering .rows.is-collapsible .row.open dd { display: block; }
  .motion .offering .rows.is-collapsible .row.open dd { animation: rise .35s var(--ease-arrive) both; }
  .offering { padding: 40px 0; gap: 20px; }
  .aud { gap: 6px; }
  .aud a { padding: 0 12px; min-height: 40px; }
  .hero { min-height: calc(80svh - var(--head-total)); }
}
@media (max-width: 360px) {
  .hero h1 { font-size: var(--t-6); }
  .aud a { font-size: var(--t-1); padding: 0 10px; }
}

/* Phase 2, touch: no keyboard, so the circle reads "Ask" with an icon instead of ⌘K. */
.cmdk-ask { display: none; flex-direction: column; align-items: center; gap: 1px; font-size: var(--t-1); font-weight: 600; line-height: 1; color: inherit; }
.cmdk-ask svg { width: 16px; height: 16px; }
@media (hover: none) and (pointer: coarse) {
  .cmdk-key { display: none; }
  .cmdk-ask { display: inline-flex; }
}

/* Phase 2, forced colours (Windows High Contrast): rules, the tab indicator, buttons and the blade keep their shape. */
@media (forced-colors: active) {
  .sec-head::before, .row::before, .row:last-child::after, .cols::before, .col + .col::before, .seq li::after { forced-color-adjust: none; background: CanvasText; }
  .sec-head::after, .stripe .blade { forced-color-adjust: none; background: CanvasText; fill: CanvasText; }
  .pill .ind { forced-color-adjust: none; background: Highlight; }
  .pill .links a[aria-current="true"] { forced-color-adjust: none; color: HighlightText; }
  .btn, .top-cta, .aud a, .safer, .cmdk, .dock { border: 1px solid ButtonText; }
  .seq li::before { forced-color-adjust: none; box-shadow: inset 0 0 0 1.5px CanvasText; background: Canvas; }
  .band-blades { display: none; }
}

/* v7 intake: one-tap option groups (no dropdowns), required/optional marks, the optional note behind a link. */
.i-reqnote { margin-top: 10px; font-size: var(--t-1); color: var(--ink-500); }
.i-reqnote span, .req { color: var(--oxblood); font-weight: 600; }
.i-opts { border: 0; padding: 0; min-width: 0; margin-left: 0; margin-right: 0; }
.i-opts[hidden] { display: none; }
.i-opts legend { padding: 0; margin-bottom: 10px; font-size: var(--t-2); font-weight: 600; line-height: 1.4; color: var(--ink); }
.i-opts legend .opt { font-weight: 400; color: var(--ink-500); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip { position: relative; display: inline-flex; }
.opt-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.opt-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(7,4,46,.22); background: rgba(255,255,255,.7); color: var(--ink); font-size: var(--t-2); font-weight: 400; line-height: 1.25; transition: border-color var(--dur-ui) ease, background-color var(--dur-ui) ease, color var(--dur-ui) ease; }
.opt-chip:hover span { border-color: rgba(95,21,19,.5); }
.opt-chip input:checked + span { border-color: var(--oxblood); background: rgba(95,21,19,.07); color: var(--oxblood); box-shadow: inset 0 0 0 1px var(--oxblood); font-weight: 600; }
.opt-chip input:focus-visible + span { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.i-opts[aria-invalid="true"] .opt-chip span { border-color: rgba(95,21,19,.6); }
.i-addnote { margin-top: 18px; font-size: var(--t-2); }
.i-addnote[hidden] { display: none; }
.i-addnote .i-link { min-height: 44px; }
@media (forced-colors: active) {
  .opt-chip span { border: 1px solid ButtonText; }
  .opt-chip input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}
/* v7, landscape phones: no room for the audience row; the hero keeps its v6 compact rhythm so the buttons stay clear of the bar. */
@media (max-height: 480px) and (orientation: landscape) {
  .aud { display: none; }
  .hero { min-height: 0; padding: 24px 0 calc(var(--nav-reserve) + 8px); }
  .hero .stripe { margin-top: 18px; }
  .hero-btns { margin-top: 22px; }
}

/* ===================== v8 (2026-11-04) ===================== */
/* 1. Header CTA: a raised Paper pill with an Oxblood disc and a Cream arrow. Shadow, hairline and highlight; no glow. */
.top-cta { gap: 12px; min-height: 46px; padding: 0 6px 0 20px; border: 1px solid rgba(7,4,46,.12); color: var(--oxblood); background: linear-gradient(180deg, #FFFDFB 0%, #F5EEE9 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 1px rgba(7,4,46,.05), 0 10px 20px -12px rgba(95,21,19,.38); transition: box-shadow .2s var(--ease-ui), transform .2s var(--ease-ui), border-color .2s ease; }
.top-cta::after { content: none; }
.top-cta-disc { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--oxblood); color: var(--cream); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(7,4,46,.2); transition: background-color .2s ease; }
.top-cta-disc svg { width: 15px; height: 15px; transition: transform .2s var(--ease-ui); }
.top-cta:hover { background: linear-gradient(180deg, #FFFDFB 0%, #F5EEE9 100%); color: var(--oxblood); border-color: rgba(95,21,19,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 1px rgba(7,4,46,.06), 0 14px 26px -12px rgba(95,21,19,.45); }
.top-cta:hover .top-cta-disc { background: var(--oxblood-700, #4F0C0B); }
.top-cta:hover .top-cta-disc svg { transform: translateX(2px); }
.top-cta:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(7,4,46,.06), 0 4px 10px -6px rgba(95,21,19,.35); }
@media (max-width: 639px) { .top-cta { min-height: 42px; padding: 0 5px 0 15px; gap: 10px; } .top-cta-disc { width: 32px; height: 32px; } }
/* The hero and closing "Talk to Our Team" share the raised Paper surface. */
.hero-btns .btn-secondary, .closing .btn-secondary { color: var(--oxblood); border-color: rgba(7,4,46,.12); background: linear-gradient(180deg, #FFFDFB 0%, #F5EEE9 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 1px rgba(7,4,46,.05), 0 10px 20px -12px rgba(95,21,19,.38); transition: box-shadow .2s var(--ease-ui), transform .2s var(--ease-ui), border-color .2s ease; }
.hero-btns .btn-secondary:hover, .closing .btn-secondary:hover { border-color: rgba(95,21,19,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 1px rgba(7,4,46,.06), 0 14px 26px -12px rgba(95,21,19,.45); }
.hero-btns .btn-secondary:active, .closing .btn-secondary:active { transform: translateY(1px); }

/* 2. Audience row: one pressed-in Paper track; a raised puck with a blade tick slides to the hovered or focused link. */
.aud { position: relative; display: flex; flex-wrap: nowrap; justify-content: center; gap: 2px; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; padding: 4px; border-radius: 999px; background: rgba(240,232,226,.55); border: 1px solid rgba(7,4,46,.10); box-shadow: inset 0 1px 2px rgba(7,4,46,.08), inset 0 -1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(255,255,255,.85); }
.aud a { position: relative; z-index: 1; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); white-space: nowrap; transition: color .2s ease; }
.aud a:hover, .aud a:focus-visible { border: 0; background: transparent; color: var(--oxblood); }
.aud a:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 1px; }
.aud-puck { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 999px; z-index: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, #FFFEFD 0%, #FAF5F1 100%); box-shadow: inset 0 0 0 1px rgba(7,4,46,.07), inset 0 1px 0 #fff, 0 1px 1px rgba(7,4,46,.06), 0 6px 14px -6px rgba(7,4,46,.22); transition: transform .32s var(--ease-travel), width .32s var(--ease-travel), height .32s var(--ease-travel), opacity .2s ease; }
.aud-puck::before { content: ""; position: absolute; left: 7px; top: 50%; width: 7px; height: 4px; margin-top: -2px; background: var(--oxblood); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.aud.has-puck .aud-puck { opacity: 1; }
.aud.no-slide .aud-puck { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .aud-puck { transition: opacity .01s; } }
@media (max-width: 639px) {
  .aud { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 400px; border-radius: 26px; gap: 2px; }
  .aud a { justify-content: center; min-height: 44px; padding: 0 10px; }
}
@media (max-width: 360px) { .aud a { font-size: var(--t-1); padding: 0 6px; } }

/* 3. How It Works opens in place: a full secondary trigger with a +/- disc, and a Cream band under the offering. */
.btn-how { background: rgba(255,255,255,.55); color: var(--ink); border-color: rgba(7,4,46,.2); padding: 0 22px 0 16px; gap: 10px; }
.btn-how:hover { color: var(--oxblood); border-color: rgba(95,21,19,.5); }
.btn-how:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.btn-how .pm { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-how .pm::before, .btn-how .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; margin: -.75px 0 0 -4.5px; background: currentColor; border-radius: 1px; transition: transform .24s var(--ease-travel); }
.btn-how .pm::after { transform: rotate(90deg); }
.btn-how[aria-expanded="true"] { color: var(--oxblood); border-color: var(--oxblood); background: rgba(95,21,19,.06); }
.btn-how[aria-expanded="true"] .pm::after { transform: rotate(0deg); }
html:not(.js) .btn-how { display: none; }

.how { grid-column: 1 / -1; position: relative; padding: clamp(28px, 3.4vw, 44px) clamp(20px, 3vw, 44px) clamp(24px, 3vw, 36px); background: linear-gradient(180deg, rgba(254,228,210,.55) 0%, rgba(254,228,210,.2) 100%); border-top: 2px solid var(--oxblood); border-bottom: 1px solid var(--rule); }
.how[hidden] { display: none; }
.how::after { content: ""; position: absolute; top: -7px; left: 0; width: 22px; height: 9px; background: var(--oxblood); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.motion .how { opacity: 0; transform: translateY(8px); transition: opacity .24s var(--ease-arrive), transform .4s var(--ease-arrive); }
.motion .how.is-open { opacity: 1; transform: none; }
.how-h { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0; font-size: var(--t-2); font-weight: 600; line-height: 1.4; color: var(--oxblood); }
.how-for { font-weight: 400; color: var(--ink-500); }
.stages { --g: clamp(24px, 3.4vw, 56px); list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.stages li { position: relative; }
.stages .n { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--oxblood); color: var(--oxblood); font-size: var(--t-3); font-weight: 600; line-height: 1; }
.stages li.on .n { background: var(--oxblood); color: var(--cream); }
.stages h4 { margin: 18px 0 8px; font-size: var(--t-4); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.stages p { margin: 0; font-size: var(--t-2); line-height: 1.6; color: var(--ink-500); max-width: 40ch; }
.stages li:not(:last-child)::before, .stages li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 56px; right: calc(12px - var(--g)); height: 2px; border-radius: 1px; background: rgba(95,21,19,.18); }
.stages li:not(:last-child)::after { background: var(--oxblood); transform-origin: left center; transform: scaleX(0); }
.stages li.done:not(:last-child)::after { transform: scaleX(1); }
.motion .stages .n { transition: background-color .4s var(--ease-arrive), color .4s var(--ease-arrive); }
.motion .stages li:not(:last-child)::after { transition: transform calc(var(--dwell, 1000ms) - 400ms) var(--ease-travel); }
.motion .stages li h4, .motion .stages li p { transition: opacity .4s var(--ease-arrive); }
.motion .stages li:not(.on) h4, .motion .stages li:not(.on) p { opacity: .5; }
.how-note { margin: 28px 0 0; max-width: var(--measure); font-size: var(--t-1); line-height: 1.55; color: var(--ink-500); }
.how-foot { display: flex; justify-content: flex-end; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
@media (max-width: 639px) {
  .stages { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 22px; }
  .stages li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding-bottom: 22px; }
  .stages li:last-child { padding-bottom: 0; }
  .stages .n { grid-row: 1 / span 2; width: 36px; height: 36px; font-size: var(--t-2); }
  .stages h4 { margin: 6px 0 4px; font-size: var(--t-3); }
  .stages li:not(:last-child)::before, .stages li:not(:last-child)::after { top: 40px; bottom: 4px; left: 17px; right: auto; width: 2px; height: auto; }
  .stages li:not(:last-child)::after { transform-origin: center top; transform: scaleY(0); }
  .stages li.done:not(:last-child)::after { transform: scaleY(1); }
  .how { margin: 0 calc(-1 * var(--gutter, 0px)); }
  .how-foot .btn { flex: 1 1 auto; }
}
@media (forced-colors: active) {
  .aud { border: 1px solid ButtonText; }
  .aud-puck { forced-color-adjust: none; background: Highlight; opacity: .25; }
  .stages .n { forced-color-adjust: none; box-shadow: none; border: 1.5px solid CanvasText; background: Canvas; color: CanvasText; }
  .stages li::before, .stages li::after { forced-color-adjust: none; background: CanvasText !important; }
  .how { border-top-color: CanvasText; }
  .top-cta-disc { forced-color-adjust: none; background: ButtonText; color: ButtonFace; }
}
/* v8: 404 page */
.page-404 { padding-bottom: 0; }
.nf { min-height: 100svh; display: grid; align-items: center; padding: 120px 0 80px; }
.nf h1 { margin: 12px 0 0; font-size: var(--t-6); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.nf-sub { margin-top: 16px; font-size: var(--t-4); color: var(--ink-500); max-width: 46ch; }
.nf .btn-row { margin-top: 32px; justify-content: flex-start; }
/* v8: under reduced motion, nothing moves or resizes; colour and opacity changes stay. */
@media (prefers-reduced-motion: reduce) {
  .btn-how .pm::before, .btn-how .pm::after, .dock-cta, .pill .ind, .top-cta, .top-cta-disc svg, .aud-puck, .hero-btns .btn-secondary, .closing .btn-secondary { transition-property: opacity, color, background-color, border-color, box-shadow !important; }
  .top-cta:active, .hero-btns .btn-secondary:active, .closing .btn-secondary:active { transform: none; }
}