/* ============================================================
   CHALLENGER HOUSE — drafting-sheet design system
   Aesthetic: architectural blueprint on cream drafting paper.
   Serif (Bodoni Moda) for headings & quotes, mono (IBM Plex Mono)
   for everything technical — body, labels, chrome.
   ============================================================ */

:root{
  --paper:        #F0ECE1;
  --paper-2:      #EAE5D6;              /* alternate panels */
  --ink:          #1C1A16;
  --ink-soft:     #4C4840;              /* de-emphasised copy */
  --line:         rgba(28,26,22,.6);    /* strong rules */
  --line-mid:     rgba(28,26,22,.28);
  --line-soft:    rgba(28,26,22,.14);
  --grid:         rgba(28,26,22,.025);
  --accent:       #A05E1D;              /* burnt orange, drafted down for paper */
  --accent-deep:  #7E4A15;              /* small text / links, contrast-safe */
  --accent-soft:  rgba(160,94,29,.09);
  --accent-line:  rgba(160,94,29,.45);

  --serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --mono:  "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1280px;
  --wrap-narrow: 820px;
}

*{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ transition:none !important; animation:none !important }
}

body{
  font-family:var(--mono);
  font-size:14px;
  line-height:1.75;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--accent-deep) }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

::selection{ background:var(--accent); color:var(--paper) }

img{ max-width:100%; display:block }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px }
.wrap-narrow{ max-width:var(--wrap-narrow); margin:0 auto; padding:0 32px }

/* ---------- type ---------- */

h1,h2,h3,.serif{ font-family:var(--serif); font-weight:600; letter-spacing:-.01em }

h1{
  font-size:clamp(38px, 5vw, 68px);
  line-height:1.06;
  font-weight:600;
}
h1 em, h2 em{
  font-style:italic;
  color:var(--accent);
  font-weight:500;
}
h2{
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.12;
}
h3{ font-size:22px; line-height:1.25 }

/* Prose measure: cap at ~70ch. Without this, .wrap (1280px) let paragraphs
   run to ~174 chars/line at 1440. */
p.lead{ font-size:15.5px; line-height:1.8; max-width:70ch }
p.body, .body{ font-size:14px; color:var(--ink); max-width:72ch }
.soft{ color:var(--ink-soft) }
strong{ font-weight:600 }

.label{
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
}

/* zone label — "ZONE 01 / PURPOSE".
   font-family is explicit so this renders identically on <p> or <h2>; some
   sections use it as the real section heading to keep the document outline
   valid (no h1 -> h3 skips). */
.zone{
  display:inline-block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
  margin-bottom:34px;
}

/* readtime, derisk lines, captions */
.fineprint{ font-size:12.5px; color:var(--ink-soft); letter-spacing:.04em; max-width:74ch }
.center .fineprint{ margin-inline:auto }

/* ---------- header ---------- */

.site-head{ padding-top:28px }
.head-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:22px;
}

.mark{ text-decoration:none; color:var(--ink); display:block; margin-top:6px }
.mark-box{
  position:relative;
  width:52px; height:52px;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:26px; font-weight:700; font-style:italic;
}
/* registration crosshairs */
.mark-box::before, .mark-box::after{
  content:""; position:absolute; background:var(--line-mid);
}
.mark-box::before{ left:-12px; right:-12px; top:50%; height:1px }
.mark-box::after{ top:-12px; bottom:-12px; left:50%; width:1px }

.wordmark{ text-align:right }
.wordmark a{
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:.92;
  letter-spacing:.01em;
  color:var(--ink);
  text-decoration:none;
  display:block;
  text-transform:uppercase;
}
.word-sub{
  margin-top:10px;
  font-size:10px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* nav strip */
.site-nav{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; flex-wrap:wrap;
  gap:4px 26px;
  padding:12px 0;
  position:sticky; top:0; z-index:50;
  background:var(--paper);
}
.site-nav a{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); font-weight:500;
  /* 44px min touch target (was 22px tall) */
  display:inline-flex; align-items:center; min-height:44px;
}
.site-nav a:hover{ color:var(--accent-deep) }
.site-nav a[aria-current="page"]{
  color:var(--accent-deep);
  border-bottom:1px solid var(--accent);
}
.site-nav .nav-cta{
  margin-left:auto;
  border:1px solid var(--ink);
  padding:6px 14px;
  background:var(--ink); color:var(--paper);
}
.site-nav .nav-cta:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:var(--paper) }

/* ---------- vertical edge index ---------- */
.edge-index{
  position:fixed; left:14px; bottom:32px; z-index:40;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-soft);
  pointer-events:none;
}
.coords{
  position:fixed; right:16px; bottom:12px; z-index:40;
  font-size:9.5px; letter-spacing:.14em; color:var(--ink-soft);
  pointer-events:none;
}
@media (max-width:1420px){ .edge-index{ display:none } }
@media (max-width:820px){ .coords{ display:none } }

/* ---------- sections & rules ---------- */

section{ padding:72px 0 }
section.tight{ padding:44px 0 }

/* ruled divider with page marker: —————————— P.01 */
.rule{
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.rule::before{ content:""; flex:1; height:1px; background:var(--line) }
.rule .pno{ font-size:10px; letter-spacing:.18em }

.hr{ border:none; height:1px; background:var(--line-soft); margin:56px 0 }

/* ---------- buttons ---------- */

.btn-bar{
  display:block; width:100%;
  background:var(--ink); color:var(--paper);
  text-align:center; text-decoration:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  padding:18px 20px;
  border:1px solid var(--ink);
  transition:background .15s ease;
}
.btn-bar:hover{ background:var(--accent-deep); border-color:var(--accent-deep) }

.btn-outline{
  display:inline-block;
  border:1px solid var(--ink); color:var(--ink);
  text-decoration:none;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  padding:13px 26px;
  background:transparent;
  transition:background .15s ease, color .15s ease;
}
.btn-outline:hover{ background:var(--ink); color:var(--paper) }

.think-link{
  font-size:12px; letter-spacing:.08em;
  color:var(--accent-deep); text-decoration:none;
  border-bottom:1px solid var(--accent-line);
  padding-bottom:2px;
}
.think-link:hover{ border-bottom-color:var(--accent-deep) }

/* ---------- panels & drawings ---------- */

.panel{
  border:1px solid var(--line);
  background:var(--paper);
  padding:30px 32px;
}
.panel-hatch{
  background-image:repeating-linear-gradient(45deg, transparent 0 7px, rgba(28,26,22,.045) 7px 8px);
}
.panel-accent{
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
}
.panel-dashed{ border:1px dashed var(--accent-line) }

.fig-cap{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-align:right; margin-top:10px;
}

.drawing{ padding:26px }
.drawing svg{ width:100%; height:auto; display:block; color:var(--ink) }

/* accent left-border callout (house-line, bottomrow, challenge) */
.house-line{
  border-left:2px solid var(--accent);
  padding:6px 0 6px 26px;
  font-family:var(--serif); font-size:clamp(20px,2.4vw,28px);
  line-height:1.4; font-style:italic; font-weight:500;
}
.callout-left{
  border-left:2px solid var(--accent);
  padding:4px 0 4px 22px;
}

/* ---------- quotes ---------- */

.bigquote{ position:relative; padding-top:8px }
.bigquote blockquote{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(21px, 2.6vw, 30px); line-height:1.5;
}
.bigquote blockquote::before{ content:"\201C" }
.bigquote blockquote::after{ content:"\201D" }
.bigquote cite{
  display:block; margin-top:26px;
  font-family:var(--mono); font-style:normal;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.bigquote cite b{ color:var(--accent-deep) }

.smallquote{
  border:1px solid var(--line-mid);
  padding:24px 26px;
  background:var(--paper);
}
.smallquote blockquote{
  font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.55; font-weight:500;
}
.smallquote cite{
  display:block; margin-top:14px; font-style:normal;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- column grids with ruled tops ---------- */

.sheet-grid{ display:grid; gap:40px }
.sheet-grid.c2{ grid-template-columns:repeat(2, 1fr) }
.sheet-grid.c3{ grid-template-columns:repeat(3, 1fr) }
.sheet-grid.c4{ grid-template-columns:repeat(4, 1fr) }

.sheet{ min-width:0 }
.sheet .rule{ margin-bottom:16px }
.sheet h3{ margin-bottom:12px }
.sheet h3 .no{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  color:var(--accent-deep); display:block; margin-bottom:8px; font-style:normal;
}
.sheet p{ font-size:13px; color:var(--ink-soft); line-height:1.75 }

@media (max-width:1020px){
  .sheet-grid.c4{ grid-template-columns:repeat(2,1fr) }
  .sheet-grid.c3{ grid-template-columns:1fr }
}
@media (max-width:680px){
  .sheet-grid.c2, .sheet-grid.c4{ grid-template-columns:1fr }
}

/* ---------- lists ---------- */

.tribe-list{ list-style:none; counter-reset:tribe }
.tribe-list li{
  counter-increment:tribe;
  display:grid; grid-template-columns:64px 1fr; gap:22px;
  padding:26px 0;
  border-top:1px solid var(--line-soft);
  font-size:14.5px; line-height:1.8;
}
.tribe-list li:last-child{ border-bottom:1px solid var(--line-soft) }
.tribe-list li span{ display:block; max-width:74ch }
.tribe-list li::before{
  content:"P." counter(tribe, decimal-leading-zero);
  font-size:11px; letter-spacing:.16em; color:var(--accent-deep);
  padding-top:5px;
}

.deliv{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 48px }
.deliv li{
  padding:20px 0 20px 26px;
  border-top:1px solid var(--line-soft);
  position:relative;
  font-size:13.5px; line-height:1.75; color:var(--ink-soft);
}
.deliv li strong{ color:var(--ink) }
.deliv li::before{
  content:"→"; position:absolute; left:0; top:20px; color:var(--accent-deep);
}
@media (max-width:820px){ .deliv{ grid-template-columns:1fr } }

/* ---------- chips / tags ---------- */

.chip{
  display:inline-block;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--accent-line);
  color:var(--accent-deep);
  padding:4px 10px;
}
.chips{ display:flex; flex-wrap:wrap; gap:10px }

/* ---------- offer cards ---------- */

.offers{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
.offer{
  border:1px solid var(--line);
  background:var(--paper);
  padding:0;
  display:flex; flex-direction:column;
}
.offer-head{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line-soft);
  padding:12px 24px;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.offer-body{ padding:26px 24px 30px; flex:1; display:flex; flex-direction:column; gap:14px }
.offer h3{ font-size:24px }
.offer .price{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep) }
.offer p{ font-size:13px; color:var(--ink-soft); flex:1 }
.offer.flagship{
  outline:1px solid var(--line);
  outline-offset:4px;
  background:linear-gradient(180deg, var(--accent-soft), transparent 45%);
}
.offer.flagship .offer-head{ color:var(--accent-deep); border-bottom-color:var(--accent-line) }
@media (max-width:960px){ .offers{ grid-template-columns:1fr } }

/* ---------- hero signpost (scroll cue down to the proof quote) ---------- */

.signpost{
  display:block; text-decoration:none; color:inherit;
  border-top:1px solid var(--line);
  margin-top:34px; padding-top:18px;
  max-width:52ch;
}
.signpost .sp-label{
  display:block;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:8px;
}
.signpost .arrow{ margin-right:6px }
.signpost p{ font-size:13px; color:var(--ink-soft) }
.signpost:hover .sp-label{ color:var(--ink) }
.signpost:hover p{ color:var(--ink) }

/* ---------- the suite: house / floors / doors ---------- */

.doctrine{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(19px,2.2vw,26px);
  border-left:2px solid var(--accent);
  padding:4px 0 4px 22px;
  margin-bottom:40px;
}

.house{ border-top:1px solid var(--line) }

.floor{ border-bottom:1px solid var(--line-soft); padding:26px 0 34px }
.floor:last-child{ border-bottom:none }
.floor-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  margin-bottom:22px;
}
.f-name{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
}
.f-time{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}

.doors{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)) }
.door{
  border:1px solid var(--line-mid);
  background:var(--paper);
  padding:22px 22px 24px;
  display:flex; flex-direction:column; gap:10px;
}
.door.open{
  border-color:var(--accent-line);
  background:linear-gradient(180deg, var(--accent-soft), transparent 60%);
}
.d-badge{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft);
  padding-bottom:8px;
}
.door.open .d-badge{ color:var(--accent-deep); border-bottom-color:var(--accent-line) }
.door h3{ font-size:22px }
.d-sub{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep) }
/* max-width: the foundation door spans the full grid, so its prose would
   otherwise run to ~150ch. Narrow doors are unaffected. */
.door p{ font-size:13px; color:var(--ink-soft); max-width:72ch }
.door p strong{ color:var(--ink) }
.door > a{ margin-top:auto; align-self:flex-start }

.foundation{
  border:1px solid var(--line);
  background-image:repeating-linear-gradient(45deg, transparent 0 7px, rgba(28,26,22,.045) 7px 8px);
  padding:28px 30px;
  margin-top:30px;
}
.foundation p{ font-size:13.5px; color:var(--ink-soft); max-width:74ch }
.foundation p strong{ color:var(--ink) }
.foundation p + p{ margin-top:14px }
.fcta{
  margin-top:22px; padding-top:22px;
  border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.free-note{ font-size:12px; color:var(--ink-soft); flex:1; min-width:240px; max-width:60ch }

/* ---------- stamp ---------- */

.stamp{
  display:inline-block;
  /* accent-deep, not accent: #A05E1D is 4.32:1 on paper and fails AA at this size */
  border:2px solid var(--accent-deep);
  color:var(--accent-deep);
  font-size:12px; letter-spacing:.26em; text-transform:uppercase; font-weight:600;
  padding:12px 20px;
  transform:rotate(-6deg);
  /* no opacity: it blended the ink toward the paper and pushed contrast under AA.
     The noise mask alone carries the worn-stamp texture. */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 .35'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 .35'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- tables ---------- */

table{ width:100%; border-collapse:collapse; font-size:13px }
th{
  text-align:left; font-weight:500;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  padding:10px 14px;
}
td{
  border-bottom:1px solid var(--line-soft);
  padding:12px 14px; vertical-align:top;
}
td.after{ color:var(--accent-deep); font-weight:500 }
tr td:first-child, tr th:first-child{ padding-left:0 }

.table-scroll{ overflow-x:auto }

/* ---------- FAQ ---------- */

details{
  border-top:1px solid var(--line-soft);
}
details:last-of-type{ border-bottom:1px solid var(--line-soft) }
summary{
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:22px 0;
  font-family:var(--serif); font-size:19px; font-weight:600;
}
summary::-webkit-details-marker{ display:none }
summary::after{
  content:"+"; font-family:var(--mono); font-size:16px; color:var(--accent-deep); flex-shrink:0;
}
details[open] summary::after{ content:"\2212" }
details .answer{ padding:0 0 26px; max-width:70ch; color:var(--ink-soft); font-size:13.5px }

/* ---------- calculator ---------- */

.calc{
  border:1px solid var(--line);
  background:var(--paper);
}
.calc-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 26px;
  border-bottom:1px solid var(--line);
  background-image:repeating-linear-gradient(45deg, transparent 0 7px, rgba(28,26,22,.045) 7px 8px);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
.calc-head .live{ color:var(--accent-deep) }
.calc-body{ padding:30px 26px }
.calc h3{ margin-bottom:24px }

.calc-row{ margin-bottom:24px }
.calc-row label{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:10px;
}
.calc-row output{ font-size:13px; color:var(--ink); font-weight:600; letter-spacing:0 }

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  /* 44px min touch target; the track stays 1px and centres inside it */
  width:100%; height:44px; background:transparent; cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:1px; background:var(--line);
}
input[type="range"]::-moz-range-track{ height:1px; background:var(--line) }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; margin-top:-7px;
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:50%;
}
input[type="range"]::-moz-range-thumb{
  width:13px; height:13px;
  background:var(--paper); border:1.5px solid var(--ink); border-radius:50%;
}

.calc-result{
  border-top:1px solid var(--line);
  margin-top:8px; padding-top:26px;
}
.calc-result .big{
  font-family:var(--serif);
  font-size:clamp(40px, 5vw, 60px);
  font-weight:700;
  color:var(--accent);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.calc-result .r-label{ margin-top:10px; font-size:12px; color:var(--ink-soft) }
.hardlines{ margin-top:22px; display:grid; gap:14px }
.hardlines p{ font-size:13px; color:var(--ink-soft); border-top:1px solid var(--line-soft); padding-top:14px }
.hardlines p b, .hardlines p .acc{ color:var(--accent-deep) }

/* ---------- faces / builders ---------- */

.face{
  border:1px solid var(--line);
  padding:34px 30px;
  background:var(--paper);
}
.face img{
  width:120px; height:120px; border-radius:50%;
  object-fit:cover;
  border:1px solid var(--accent-line);
  outline:1px solid var(--line-mid); outline-offset:5px;
  filter:grayscale(1) contrast(1.05) sepia(.12);
  margin-bottom:22px;
}
.face h3{ font-size:26px }
.face .role{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-deep); margin:8px 0 16px;
}
.face p{ font-size:13px; color:var(--ink-soft) }
.face .challenge{
  margin-top:18px;
  border-left:2px solid var(--accent);
  padding:2px 0 2px 16px;
  font-size:12.5px; color:var(--ink);
}
.face .links{ margin-top:18px; display:flex; flex-wrap:wrap; gap:18px }

/* ---------- logo wall ---------- */

.logos{
  display:flex; flex-wrap:wrap; gap:12px 14px;
}
.logos span{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-mid);
  padding:7px 14px; color:var(--ink-soft);
  background:var(--paper);
}

/* ---------- legend footer ---------- */

footer{ padding:80px 0 60px }
.legend{
  border:1px solid var(--line);
  padding:22px 26px;
  max-width:480px;
  background:var(--paper);
}
.legend .legend-title{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  border-bottom:1px solid var(--line-mid);
  display:inline-block; padding-bottom:4px; margin-bottom:14px;
}
.legend dl{
  display:grid; grid-template-columns:auto 1fr; gap:6px 24px;
  font-size:11.5px;
}
.legend dt{ color:var(--ink-soft) }
.legend dd{ text-align:right }
.legend .legend-note{
  margin-top:14px; font-size:11.5px; letter-spacing:.06em; color:var(--ink-soft);
  border-top:1px solid var(--line-soft); padding-top:10px;
}

.foot-grid{
  display:grid; grid-template-columns:1fr auto; gap:48px; align-items:end;
  margin-top:56px;
}
.foot-sig .sig-name{
  font-family:var(--serif); font-weight:700; font-size:20px;
}
.foot-sig p{ font-size:12px; color:var(--ink-soft); margin-top:8px; max-width:44ch }
.foot-links{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:22px }
.foot-links a{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  /* 44px min touch target */
  display:inline-flex; align-items:center; min-height:44px;
  border-bottom:1px solid var(--line-mid);
}
.foot-links a:hover{ color:var(--accent-deep) }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr } }

/* ---------- hero ---------- */

.hero{ padding:64px 0 80px }
.hero-grid{
  display:grid; grid-template-columns:minmax(380px, 5fr) 6fr;
  grid-template-rows:auto auto;
  column-gap:64px; row-gap:28px; align-items:start;
}
.hero-title{ grid-column:1; grid-row:1; margin:0 }
.hero-copy{ grid-column:1; grid-row:2 }
/* Image spans both rows so it fills the full height of the hero content
   (headline + copy). The svg is absolutely positioned so it takes its
   height from the text column rather than inflating the grid itself. */
.hero-media{ grid-column:2; grid-row:1 / -1; position:relative; align-self:stretch; min-width:0 }
.hero-media svg{ position:absolute; inset:0; width:100%; height:100% }
.hero-media .fig-cap{ position:absolute; top:100%; right:0; margin-top:10px }
@media (max-width:1020px){
  .hero-grid{ grid-template-columns:1fr; grid-template-rows:none; row-gap:0 }
  .hero-title, .hero-copy, .hero-media{ grid-column:auto; grid-row:auto }
  .hero-title{ margin:0 0 28px }
  .hero-copy{ margin-bottom:40px }
  .hero-media{ position:static; align-self:auto }
  .hero-media svg{ position:static; height:auto }
  .hero-media .fig-cap{ position:static; margin-top:10px }
}
.hero .sub{ font-size:15px; margin-bottom:18px }
.hero .pain{ font-size:12.5px; color:var(--ink-soft); max-width:52ch; margin-bottom:26px }
.hero .btn-bar{ margin:26px 0 12px }

/* ---------- misc ---------- */

/* Skip link — the pages run to ~14,000px behind a sticky nav. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; text-decoration:none;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.skip-link:focus{ left:0 }

/* Visually hidden but available to screen readers. Used for section headings
   that the visual design carries by layout alone, so the document outline
   stays valid (no h1 -> h3 skips). */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.center{ text-align:center }
.compound{
  font-family:var(--serif); font-size:clamp(22px,3vw,32px); font-weight:600; line-height:1.35;
}
.compound em{ color:var(--accent); font-weight:500 }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr } }

.stack > * + *{ margin-top:20px }

.mt-1{ margin-top:16px } .mt-2{ margin-top:28px } .mt-3{ margin-top:44px } .mt-4{ margin-top:64px }
.mb-1{ margin-bottom:16px } .mb-2{ margin-bottom:28px } .mb-3{ margin-bottom:44px }

@media (max-width:680px){
  .wrap,.wrap-narrow{ padding:0 20px }
  section{ padding:52px 0 }
  .head-top{ flex-direction:row }
  .site-nav{ gap:4px 18px }
  .site-nav .nav-cta{ margin-left:0; margin-top:6px }
}

/* Mobile nav: 44px touch targets push the wrapped nav to ~172px. Sticky, that
   permanently ate ~21% of a 812px viewport. Static costs it once, at the top. */
@media (max-width:820px){
  .site-nav{ position:static }
}