/* Ventus Optera design system: components.
 * Values come from css/tokens.css (generated from tokens.json). This file holds
 * no hex and no raw size a token already names. Rules: DESIGN-SYSTEM.md.
 * Load order: tokens.css, then ds.css, then any page CSS.
 */

/* Fonts, self-hosted from /fonts (SIL Open Font License, fonts/OFL.txt), so
 * first paint waits on no third-party stylesheet. Latin only, and trimmed to
 * the axes the tokens use: Archivo wdth 100-125 and wght 400-900 (the boosted
 * cap), Source Serif 4 wght 400-800 with optical size. Pages preload Archivo,
 * the face of every heading. */
@font-face { font-family: Archivo; src: url(/fonts/archivo-latin.woff2) format("woff2"); font-weight: 400 900; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(/fonts/source-serif-4-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-latin-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-latin-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible { outline-color: var(--sail); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--ink); color: var(--white); font-family: var(--type-button-family); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--space-4); }

/* ---------- Layout ---------- */
.wrap { max-width: calc(var(--space-content) + 2 * var(--space-gutter)); margin: 0 auto; padding: 0 var(--space-gutter); }
.section { padding: var(--space-section) 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-stack); }
.grid-2, .grid-3 { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: center; }
.measure { max-width: var(--space-measure); }
.on-ink { background: var(--ink); color: var(--sail); }
.on-orange { background: var(--orange); color: var(--ink); }

/* ---------- Weight follows the ground ----------
 * Ink on an orange fill, and orange type on ink, read thinner than they
 * measure. Every weight in this file is its base plus --wb, capped at
 * --weight-max, so where ink meets orange everything draws one step heavier
 * at every size: a 13px eyebrow 500 to 600, a button 700 to 800, a heading
 * 800 to 900, body text 400 to 500. Headings keep their 112% stretch.
 * A page rule that sets its own font-weight uses the same calc.
 */
:root { --wb: 0; }
.on-orange, .btn-primary, .status-active, .on-ink .eyebrow { --wb: var(--weight-boost); }
.on-orange .btn-primary { --wb: 0; }
.on-orange { font-weight: min(var(--weight-max), calc(400 + var(--wb))); }

/* ---------- Type ---------- */
.t-display, .t-h1, .t-h2, .t-h3, h1, h2, h3 {
  font-family: var(--font-display);
  font-stretch: var(--stretch-heading);
  font-weight: min(var(--weight-max), calc(800 + var(--wb)));
  letter-spacing: -.01em;
}
/* Headings break into even lines instead of leaving one word alone on the
 * last; paragraphs avoid a one-word last line. */
h1, h2, h3, .t-display, .t-h1, .t-h2, .t-h3, .band-title { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
.t-display, h1 { font-size: var(--type-display-size); line-height: var(--type-display-line); }
.t-h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); }
.t-h2, h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); }
.t-h3, h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); }
.lead { font-size: var(--type-lead-size); line-height: var(--type-lead-line); color: var(--muted); max-width: 900px; }
.on-ink .lead, .on-ink .muted { color: var(--muted-dark); }
.small { font-size: var(--type-small-size); line-height: var(--type-small-line); }
.muted { color: var(--muted); }
.eyebrow {
  font-family: var(--font-mono);
  font-weight: min(var(--weight-max), calc(var(--type-eyebrow-weight) + var(--wb)));
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ember);
}
.on-ink .eyebrow { color: var(--orange); }
.on-orange .eyebrow { color: var(--ink); }
.figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Links ---------- */
a { color: inherit; }
.link {
  font-family: var(--font-ui);
  font-weight: min(var(--weight-max), calc(700 + var(--wb)));
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color var(--dur-fast);
}
.link:hover { color: var(--ember-deep); }
.on-ink .link { color: var(--sail); text-decoration-color: var(--orange); }
.on-ink .link:hover { color: var(--orange); }

/* ---------- Go arrow ----------
 * Anything that takes you somewhere says so. Primary buttons, standalone links
 * (.link-go), card feet, door links and .go labels carry one arrow, drawn from
 * a mask in currentColor, that moves 4px toward the destination on hover. It
 * sits on an empty ::after, so screen readers skip it. Links inside a sentence
 * stay plain .link.
 */
:root { --go-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M8 3l5 5-5 5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E"); }
.btn-primary::after, .link-go::after, a.card .card-foot::after, .card-door .link::after, .go::after {
  content: ""; flex: none; display: inline-block; width: .78em; height: .78em; margin-left: .4em; vertical-align: -.04em;
  background: currentColor;
  -webkit-mask: var(--go-arrow) center / contain no-repeat; mask: var(--go-arrow) center / contain no-repeat;
  transition: transform var(--dur-base);
}
.btn-primary::after { margin-left: 0; }
.btn-primary:hover::after, .link-go:hover::after, a.card:hover .card-foot::after, a.card-door:hover .link::after, a:hover .go::after, a:focus-visible .go::after { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: 0 28px;
  font-family: var(--font-ui);
  font-weight: min(var(--weight-max), calc(var(--type-button-weight) + var(--wb)));
  font-size: var(--type-button-size);
  line-height: var(--type-button-line);
  text-decoration: none;
  border: var(--border-control) solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color var(--dur-base), color var(--dur-base), border-color var(--dur-base), transform var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange); color: var(--ink); }
.btn-primary:hover { background: var(--orange-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--sail); }
.on-ink .btn-ghost { color: var(--sail); border-color: var(--sail); }
.on-ink .btn-ghost:hover { background: var(--sail); color: var(--ink); }
.on-orange .btn-primary { background: var(--ink); color: var(--sail); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: var(--type-nav-size); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- Header ---------- */
/* Sticky, so "Start a conversation" stays one tap away on every screen. */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: var(--border-hairline) solid var(--line-light); background: var(--cream); min-height: 89px; }
html { scroll-padding-top: 104px; }
.site-header .nav-toggle { display: none; }
.site-header .wrap { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.site-header .brand img { height: 32px; width: auto; }
.nav { display: flex; align-items: center; gap: 36px; }
.nav a:not(.btn) {
  font-family: var(--font-ui); font-weight: min(var(--weight-max), calc(var(--type-nav-weight) + var(--wb))); font-size: var(--type-nav-size);
  text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent;
}
.nav a:not(.btn) { transition: color var(--dur-fast), border-color var(--dur-fast); }
.nav a:not(.btn):hover { color: var(--ember-deep); border-bottom-color: var(--ember); }
.nav a[aria-current="page"] { font-weight: min(var(--weight-max), calc(700 + var(--wb))); border-bottom-color: var(--orange); }

/* ---------- Page hero ---------- */
.hero { padding: var(--space-section) 0 calc(var(--space-section) - 8px); }
.hero .stack { gap: 26px; }
.hero-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.photo.portrait img, .hero-split .photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.hero h1 { max-width: 1180px; }
.crumb { font-family: var(--font-mono); font-size: var(--type-eyebrow-size); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; color: var(--muted); display: flex; gap: 10px; }
.crumb a { text-decoration: none; }

/* ---------- Home hero ----------
 * The photo of a working session, on an orange block, with the before and
 * after of one real piece of client work pinned over it: the scraps a
 * contract used to live in, and the page it lives on now. */
.hero-home { padding-bottom: var(--space-section); }
.hero-home h1 { font-size: clamp(44px, 4.6vw, var(--type-h1-size)); line-height: var(--type-h1-line); }
.hero-note { font-family: var(--font-ui); font-size: var(--type-nav-size); }
.hero-stage { position: relative; margin-right: var(--space-5); margin-bottom: var(--space-5); }
.hero-photo { position: relative; margin: 0; }
.hero-photo::before { content: ""; position: absolute; inset: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5); background: var(--orange); }
.hero-photo img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 25%; }
.hero-before { position: absolute; top: 9%; left: calc(-1 * var(--space-8)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.hero-before .eyebrow { background: var(--cream); padding: 2px 8px; }
.scrap {
  display: flex; flex-direction: column; gap: 2px; max-width: 250px;
  padding: 10px 14px; background: var(--ink); color: var(--sail);
  border: var(--border-hairline) dashed var(--muted-dark);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.3;
}
.scrap:nth-of-type(1) { transform: rotate(-2deg); }
.scrap:nth-of-type(2) { transform: rotate(1.5deg) translateX(var(--space-6)); }
.scrap:nth-of-type(3) { transform: rotate(-1deg) translateX(var(--space-3)); }
.scrap-src { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--type-tag-tracking); text-transform: uppercase; color: var(--muted-dark); }
.hero-after {
  position: absolute; left: calc(-1 * var(--space-7)); bottom: var(--space-7); width: min(320px, 85%);
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: 20px 22px; background: var(--white); color: var(--text); text-decoration: none;
  border: var(--border-control) solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transition: box-shadow var(--dur-base), transform var(--dur-base);
}
.hero-after:hover, .hero-after:focus-visible { box-shadow: 9px 9px 0 var(--ink); transform: translate(-3px, -3px); }
.hero-card-title { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: min(var(--weight-max), calc(800 + var(--wb))); font-size: 22px; line-height: 1.15; }
.hero-card-foot { font-family: var(--font-ui); font-weight: min(var(--weight-max), calc(700 + var(--wb))); font-size: 16px; color: var(--ember); }

/* ---------- Page hero with an aside ----------
 * Subpages set the headline beside one thing that shows the page's offer at
 * a glance: a proof card (.hero-proof) linking to the work it describes, a
 * fact panel (.hero-panel) or a jump panel (.hero-jump). Stacks under 900px. */
.hero-page > .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); align-items: end; }
.hero-page .btn-row { margin-top: var(--space-2); }
.hero-proof {
  display: flex; flex-direction: column; margin: 0 var(--space-2) var(--space-2) 0;
  background: var(--white); color: var(--text); text-decoration: none;
  border: var(--border-control) solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transition: box-shadow var(--dur-base), transform var(--dur-base);
}
.hero-proof:hover, .hero-proof:focus-visible { box-shadow: 9px 9px 0 var(--ink); transform: translate(-3px, -3px); }
.hero-proof.on-ink { background: var(--ink); color: var(--sail); border-color: var(--ink); box-shadow: 6px 6px 0 var(--orange); }
.hero-proof.on-ink:hover, .hero-proof.on-ink:focus-visible { box-shadow: 9px 9px 0 var(--orange); }
.hero-proof-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); border-bottom: var(--border-control) solid var(--ink); }
.hero-proof-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-proof-thumb.center img { object-position: center; }
.hero-proof-body { display: flex; flex-direction: column; gap: var(--space-2); padding: 20px 22px 22px; }
.hero-proof.on-ink .hero-card-foot { color: var(--orange); }
.hero-proof .tile-mark { width: 40px; margin-bottom: var(--space-2); }
.hero-panel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-top: var(--border-rule) solid var(--orange); }
.hero-facts { margin: 0; }
.hero-facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--line-dark); }
.hero-facts > div:last-child { border-bottom: 0; }
.hero-facts dt { font-family: var(--font-mono); font-size: var(--type-tag-size); letter-spacing: var(--type-tag-tracking); text-transform: uppercase; color: var(--muted-dark); padding-top: 3px; }
.hero-facts dd { margin: 0; font-family: var(--font-ui); font-weight: min(var(--weight-max), calc(600 + var(--wb))); font-size: 17px; line-height: 1.35; }
.hero-jump { display: flex; flex-direction: column; }
.hero-jump a {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  padding: var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--line-dark);
  font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: min(var(--weight-max), calc(800 + var(--wb))); font-size: 22px; line-height: 1.15;
  color: var(--sail); text-decoration: none; transition: color var(--dur-fast);
}
.hero-jump a:last-child { border-bottom: 0; }
.hero-jump a:hover, .hero-jump a:focus-visible { color: var(--orange); }
.hero-jump .n { font-family: var(--font-mono); font-size: var(--type-eyebrow-size); letter-spacing: var(--type-eyebrow-tracking); color: var(--orange); font-stretch: 100%; }

/* ---------- Symptom router ----------
 * The buyer's own words, each a door to the fix. At rest a tile looks like the
 * mess (a dashed scrap); under the pointer it turns into the finished thing. */
.symptoms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.symptom {
  display: flex; flex-direction: column; gap: var(--space-3); min-height: 230px;
  padding: var(--space-6); background: transparent; color: var(--text); text-decoration: none;
  border: var(--border-control) dashed var(--muted);
  transition: background-color var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.symptom:hover, .symptom:focus-visible { background: var(--white); border-style: solid; border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: translate(-3px, -3px); }
.symptom:active { box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px, -1px); }
.symptom-src { font-family: var(--font-mono); font-size: var(--type-tag-size); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; color: var(--muted); }
.symptom-quote { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: min(var(--weight-max), calc(800 + var(--wb))); font-size: 24px; line-height: 1.2; }
.symptom-fix { margin-top: auto; padding-top: var(--space-3); border-top: var(--border-hairline) solid var(--line-light); font-family: var(--font-ui); font-weight: min(var(--weight-max), calc(700 + var(--wb))); font-size: 16px; color: var(--ember); }
.symptom:hover .symptom-fix { color: var(--ember-deep); }

/* ---------- Stat tiles ----------
 * A figure from voice.md section 6, what it measured, and where it happened.
 * Each tile links to the project it came from. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--border-rule) solid var(--ink); }
.stat {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-5);
  color: var(--text); text-decoration: none; border-right: var(--border-hairline) solid var(--line-light);
  transition: background-color var(--dur-base);
}
.stat:last-child { border-right: 0; }
.stat:hover, .stat:focus-visible { background: var(--white); }
.stat-n { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: min(var(--weight-max), calc(800 + var(--wb))); font-size: var(--type-display-size); line-height: 1; letter-spacing: -.02em; }
.stat:hover .stat-n { color: var(--ember); }
.stat-t { font-size: var(--type-small-size); line-height: var(--type-small-line); }
.stat-foot { margin-top: auto; font-family: var(--font-mono); font-size: var(--type-tag-size); letter-spacing: var(--type-tag-tracking); text-transform: uppercase; color: var(--muted); }

/* ---------- Phone action bar ----------
 * Under 900px the header's button folds behind "Menu", so once the hero has
 * scrolled away js/main.js shows this bar. It hides again wherever the page's
 * own closing buttons or a form are on screen, and on /contact and /schedule. */
.phone-cta { display: none; }
@media (max-width: 900px) {
  .phone-cta {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2);
    padding: var(--space-2) var(--space-gutter) calc(var(--space-2) + env(safe-area-inset-bottom));
    background: var(--cream); border-top: var(--border-hairline) solid var(--line-light);
    transform: translateY(110%); transition: transform var(--dur-slow);
  }
  .phone-cta.is-shown { transform: none; }
  .phone-cta .btn { min-height: 48px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: var(--border-hairline) solid var(--line-light);
  border-radius: var(--radius-card);
  --card-pad: 36px;
  padding: var(--card-pad);
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: var(--text);
}
/* A card that goes somewhere lifts off the page onto a hard ink edge, the
 * square-cut version of a shadow, and settles back when pressed. A card with
 * no destination is a <div> and does none of this. */
a.card { transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); }
a.card:hover, a.card:focus-visible { border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: translate(-3px, -3px); }
a.card:active { box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px, -1px); }
a.card.on-ink:hover, a.card.on-ink:focus-visible { box-shadow: 6px 6px 0 var(--orange); }
a.card .card-foot { transition: color var(--dur-fast); }
a.card:hover .card-foot { color: var(--ember-deep); }
a.card.on-ink:hover .card-foot { color: var(--orange); }
.card-thumb { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 6px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); border-bottom: var(--border-hairline) solid var(--line-light); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform var(--dur-base); }
.card-thumb.center img { object-position: center; }
a.card:hover .card-thumb img { transform: scale(1.02); }
/* Show the whole image (game HUD, minimap): letterbox instead of cropping. */
.card-thumb.full img { object-fit: contain; object-position: center; }
a.card:hover .card-thumb.full img { transform: none; }
.photo { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.photo img { width: 100%; height: auto; }
.photo-pair .photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.photo figcaption { font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.card .card-foot { margin-top: auto; padding-top: 14px; border-top: var(--border-hairline) solid var(--line-light); font-family: var(--font-ui); font-weight: min(var(--weight-max), calc(700 + var(--wb))); font-size: 16px; }
.card.on-ink { background: var(--ink); border-color: var(--ink); color: var(--sail); }
.card.on-orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.card-door { padding: 48px; }

/* ---------- Tags and status ---------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  font-family: var(--font-mono); font-size: var(--type-tag-size); letter-spacing: var(--type-tag-tracking);
  color: var(--muted); border: var(--border-hairline) solid var(--line-light); border-radius: var(--radius-chip);
  padding: 5px 10px; line-height: 1.4;
}
.on-ink .tag { color: var(--muted-dark); border-color: var(--line-dark); }
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--type-tag-size); letter-spacing: var(--type-tag-tracking); text-transform: uppercase;
  padding: 3px 8px; border: var(--border-control) solid currentColor; border-radius: var(--radius-chip);
}
.status-success { color: var(--success); }
.status-danger { color: var(--danger); }
.status-neutral { color: var(--muted); }
.status-active { color: var(--ink); background: var(--orange); border-color: var(--orange); }

/* ---------- Fact strip ---------- */
.facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: var(--border-hairline) solid var(--line-light); border-left: 0; }
.facts > div { padding: 24px 28px; border-left: var(--border-hairline) solid var(--line-light); display: flex; flex-direction: column; gap: var(--space-2); }
.facts dd, .facts .value { margin: 0; font-family: var(--font-ui); font-weight: min(var(--weight-max), calc(600 + var(--wb))); font-size: 18px; line-height: 1.35; }

/* ---------- Bands ---------- */
.band { padding: 80px 0; }
.band .wrap { display: flex; align-items: center; gap: 56px; }
.band .band-mark { width: 120px; flex: none; }
.band-title { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: min(var(--weight-max), calc(800 + var(--wb))); font-size: 52px; line-height: 1.05; letter-spacing: -.01em; }
.cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.cta .btn-row { flex-direction: column; min-width: 280px; }

/* ---------- Media ---------- */
.media { border: var(--border-hairline) solid var(--line-light); background: var(--sail); overflow: hidden; }
.media img { width: 100%; height: auto; }
.media-logo { aspect-ratio: 16 / 9; background: var(--white); display: flex; align-items: center; justify-content: center; }
.media-logo img { width: auto; max-width: 46%; max-height: 62%; }
figcaption { font-family: var(--font-mono); font-size: var(--type-tag-size); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: var(--space-3); }
.pull { border-top: var(--border-rule) solid var(--orange); border-bottom: var(--border-hairline) solid var(--line-light); padding: 40px 0; font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: min(var(--weight-max), calc(800 + var(--wb))); font-size: 44px; line-height: 1.12; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-family: var(--font-ui); font-weight: min(var(--weight-max), calc(700 + var(--wb))); font-size: 16px; }
.field label .opt { font-weight: min(var(--weight-max), calc(500 + var(--wb))); color: var(--muted); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 18px; color: var(--text);
  min-height: 52px; padding: 12px 16px;
  background: var(--white); border: var(--border-control) solid var(--ink); border-radius: var(--radius-input);
  transition: box-shadow var(--dur-fast);
}
.field textarea { min-height: 180px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field .hint { font-size: 15px; color: var(--muted); }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: var(--danger); }
.field .error { font-family: var(--font-ui); font-size: 15px; font-weight: min(var(--weight-max), calc(600 + var(--wb))); color: var(--danger); }
.form-panel { background: var(--sail); border: var(--border-hairline) solid var(--line-light); padding: 48px; display: flex; flex-direction: column; gap: var(--space-5); }
.notice { padding: 20px 24px; border: var(--border-control) solid currentColor; background: var(--white); font-family: var(--font-ui); }
.notice-success { color: var(--success); }
.notice-danger { color: var(--danger); }
.notice > * { color: var(--text); }

/* ---------- Tables (VentusOS and any data on the site) ---------- */
.table { width: 100%; border-collapse: collapse; background: var(--white); border: var(--border-hairline) solid var(--line-light); font-family: var(--font-ui); font-size: var(--type-app-body-size); }
.table th { text-align: left; font-family: var(--font-mono); font-weight: min(var(--weight-max), calc(500 + var(--wb))); font-size: var(--type-app-label-size); letter-spacing: var(--type-app-label-tracking); text-transform: uppercase; color: var(--muted); background: var(--sail); padding: 12px 16px; border-bottom: var(--border-hairline) solid var(--line-light); }
.table td { padding: 14px 16px; border-bottom: var(--border-hairline) solid var(--line-light); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table tbody tr:hover td { background: var(--cream); }

/* ---------- Site sections ---------- */
.bg-sail { background: var(--sail); }
.section-head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-7); max-width: 900px; }
.section + .section.bg-sail, .section.bg-sail + .section { border-top: var(--border-hairline) solid var(--line-light); }
.num-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-hairline) solid var(--line-light); }
.num-list > li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6) 0; border-bottom: var(--border-hairline) solid var(--line-light); }
.num-list .n { font-family: var(--font-mono); font-size: var(--type-eyebrow-size); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; color: var(--ember); padding-top: 10px; }
.num-list h3 { margin-bottom: var(--space-2); }
.logo-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--border-hairline) solid var(--line-light); border-left: var(--border-hairline) solid var(--line-light); }
.logo-row > div { background: var(--white); aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; border-right: var(--border-hairline) solid var(--line-light); border-bottom: var(--border-hairline) solid var(--line-light); padding: var(--space-5); }
.logo-row img { max-width: 80%; }
.card .t-h3, .card h3 { font-size: 26px; }
.card p { font-size: var(--type-small-size); line-height: var(--type-small-line); }
.card-door .t-h2 { max-width: 16ch; }
.card-door p { font-size: var(--type-body-size); line-height: var(--type-body-line); }

/* ---------- Long-form reading (case studies, articles, policies) ---------- */
.prose { max-width: var(--space-measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); margin-top: 2em; }
.prose h3 { font-family: var(--font-ui); font-stretch: var(--stretch-ui); font-weight: min(var(--weight-max), calc(700 + var(--wb))); font-size: 22px; line-height: 1.3; letter-spacing: 0; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose a:not(.btn) { font-weight: min(var(--weight-max), calc(600 + var(--wb))); text-decoration-color: var(--ember); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose a:not(.btn):hover { color: var(--ember-deep); }
.prose blockquote { margin: 0; border-left: var(--border-rule) solid var(--orange); padding-left: var(--space-5); }
.prose figure { margin-top: 2em; margin-bottom: 2em; }
.prose .card h3 { margin-top: 0; }
.prose .grid-3 .card { padding: var(--space-5); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--type-small-size); }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: var(--border-hairline) solid var(--line-light); vertical-align: top; }
.prose th { font-family: var(--font-mono); font-weight: min(var(--weight-max), calc(500 + var(--wb))); font-size: var(--type-tag-size); letter-spacing: var(--type-tag-tracking); text-transform: uppercase; color: var(--muted); }

/* ---------- Page with a side index (service pages) ---------- */
.with-aside { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.service-sidebar { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); font-family: var(--font-ui); }
.service-sidebar .eyebrow { text-decoration: none; }
.aside-group { display: flex; flex-direction: column; border-top: var(--border-hairline) solid var(--line-light); padding-top: var(--space-3); }
.aside-label { font-family: var(--font-mono); font-size: var(--type-tag-size); letter-spacing: var(--type-tag-tracking); text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-2); }
.aside-group a { font-size: 16px; font-weight: min(var(--weight-max), calc(600 + var(--wb))); text-decoration: none; padding: 8px 0 8px 12px; border-left: var(--border-rule) solid transparent; transition: color var(--dur-fast); }
.aside-group a:hover { color: var(--ember-deep); }
.aside-group a[aria-current="page"] { font-weight: min(var(--weight-max), calc(700 + var(--wb))); border-left-color: var(--orange); }

/* ---------- Visibility helpers for scripted states ---------- */
[hidden] { display: none !important; }

/* ---------- Footer ---------- */
.site-footer { padding: 72px 0 40px; }
.site-footer .top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-7); flex-wrap: wrap; }
.site-footer .brand img { height: 56px; width: auto; }
.site-footer .cols { display: flex; gap: 72px; flex-wrap: wrap; }
.site-footer .col { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer .col a { font-family: var(--font-ui); font-weight: min(var(--weight-max), calc(600 + var(--wb))); font-size: 16px; text-decoration: none; color: var(--sail); }
.site-footer .col a:hover { color: var(--orange); }
.site-footer .base { margin-top: 56px; border-top: var(--border-hairline) solid var(--line-dark); padding-top: 24px; display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--type-eyebrow-size); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; color: var(--muted-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :root { --space-gutter: 40px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .with-aside { grid-template-columns: 1fr; gap: var(--space-7); }
  .service-sidebar { position: static; order: 2; }
  .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .symptoms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: var(--border-hairline) solid var(--line-light); }
  .hero-before { left: calc(-1 * var(--space-5)); }
  .hero-after { left: calc(-1 * var(--space-5)); }
}
@media (max-width: 900px) {
  .site-header { position: relative; }
  .site-header .wrap { min-height: 72px; }
  .site-header .brand img { height: 28px; }
  .site-header .nav-toggle { display: inline-flex; }
  .site-header .nav-toggle ~ .nav { display: none; }
  .site-header.nav-open .nav-toggle ~ .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
    background: var(--cream); border-bottom: var(--border-hairline) solid var(--line-light);
    padding: var(--space-2) var(--space-gutter) var(--space-5);
  }
  .site-header.nav-open .nav a:not(.btn) { padding: 14px 0; border-bottom: var(--border-hairline) solid var(--line-light); font-size: 18px; }
  .site-header.nav-open .nav a[aria-current="page"] { border-bottom: var(--border-rule) solid var(--orange); }
  .site-header.nav-open .nav .btn { margin-top: var(--space-5); }
  .split, .cta .wrap { grid-template-columns: 1fr; display: grid; gap: var(--space-6); }
  html { scroll-padding-top: 88px; }
  .hero-stage { max-width: 560px; margin-top: var(--space-5); }
  .hero-before { left: auto; right: calc(-1 * var(--space-2)); top: var(--space-5); align-items: flex-end; }
  .hero-after { left: auto; right: 0; bottom: calc(-1 * var(--space-5)); }
  .hero-page > .wrap { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero-page .hero-proof, .hero-page .hero-panel, .hero-page .hero-jump-panel { max-width: 560px; }
}
@media (max-width: 640px) {
  :root { --space-gutter: var(--space-gutter-sm); --space-section: var(--space-section-sm); }
  body { font-size: 18px; }
  .t-display, h1 { font-size: 44px; }
  .t-h1 { font-size: 38px; }
  .t-h2, h2 { font-size: 34px; }
  .t-h3, h3 { font-size: 24px; }
  .lead { font-size: 20px; }
  .band-title { font-size: 34px; }
  .band .wrap { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .band .band-mark { width: 72px; }
  .pull { font-size: 30px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .facts { grid-auto-flow: row; border-left: var(--border-hairline) solid var(--line-light); }
  .facts > div { border-left: 0; border-top: var(--border-hairline) solid var(--line-light); }
  .card, .form-panel { padding: 24px; }
  .card { --card-pad: 24px; }
  .num-list > li { grid-template-columns: 1fr; gap: var(--space-2); }
  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card .t-h3, .card h3 { font-size: 22px; }
  .card-door { padding: 28px; }
  .prose h2 { font-size: 24px; }
  .hero-stage { margin-right: var(--space-4); margin-bottom: var(--space-8); }
  .hero-photo::before { inset: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4); }
  .hero-photo img { aspect-ratio: 1 / 1; }
  .hero-before { display: none; }
  .hero-after { position: relative; right: auto; bottom: auto; width: auto; margin: calc(-1 * var(--space-7)) var(--space-4) 0 calc(-1 * var(--space-2)); }
  .symptoms { grid-template-columns: 1fr; gap: var(--space-4); }
  .symptom { min-height: 0; padding: var(--space-5); }
  .symptom-quote { font-size: 21px; }
  .stat { padding: var(--space-5) var(--space-4); }
  .stat-n { font-size: 44px; }
  .hero-panel { padding: var(--space-5); }
  .hero-facts > div { grid-template-columns: 92px minmax(0, 1fr); }
  .hero-jump a { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  a.card:hover, a.card:focus-visible, a.card:active, .symptom:hover, .symptom:focus-visible, .symptom:active,
  .hero-after:hover, .hero-after:focus-visible, .hero-proof:hover, .hero-proof:focus-visible, .btn:active { transform: none; }
  .btn-primary:hover::after, .link-go:hover::after, a.card:hover .card-foot::after, a.card-door:hover .link::after, a:hover .go::after { transform: none; }
}