/* ============================================================
   JDT Capital Group — jdtcapital.com
   Design system: "Ledger / Dossier"
   Ink navy + warm paper + brass. Editorial serif over grotesk.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Ink */
  --ink:        #0C1520;
  --ink-2:      #14273A;
  --ink-3:      #1E3A55;
  --ink-soft:   rgba(245, 241, 232, 0.68);
  --ink-faint:  rgba(245, 241, 232, 0.40);

  /* Paper */
  --paper:      #F5F1E8;
  --paper-2:    #EDE7DA;
  --paper-3:    #E1D9C7;
  --paper-soft: rgba(12, 21, 32, 0.66);
  --paper-faint:rgba(12, 21, 32, 0.40);

  /* Accent */
  --brass:      #B8823A;
  --brass-lt:   #D7A863;
  --brass-dk:   #8E6226;
  --verdigris:  #2E6B58;
  --rust:       #A4462B;

  /* Rules */
  --rule-dark:  rgba(12, 21, 32, 0.16);
  --rule-light: rgba(245, 241, 232, 0.18);

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Metrics */
  /* --measure is the content cap; colour bands and photography always run the
     full viewport behind it (PLH pattern). --measure-prose keeps long-form
     reading columns from stretching to the full 1720 on a wide monitor. */
  --measure: 1720px;
  --measure-prose: 1040px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
/* <picture> is a transparent wrapper — without this the img inside a .shot
   box resolves height:100% against the picture, not the aspect-ratio box. */
picture { display: contents; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Grain overlay — atmosphere, not texture-for-its-own-sake */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/* ---------- 3. Typography ---------- */
.display {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.t-hero   { font-size: clamp(2.9rem, 7.2vw, 5.75rem); }
.t-h2     { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.t-h3     { font-size: clamp(1.45rem, 2.4vw, 2.05rem); }
.t-lede   { font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.55; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.eyebrow--plain::before { display: none; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- 4. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Chrome and full-bleed bands ignore the content cap and run to the viewport
   edge, so the nav sits at the corners and stat/figure bands touch both sides. */
.wrap--full { max-width: none; }
.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Anchor targets must clear the sticky header, or every nav click lands
   with the section heading hidden underneath it. */
:where(section, div)[id] { scroll-margin-top: 5.5rem; }

.zone-dark  { background: var(--ink);   color: var(--paper); }
.zone-dark-2{ background: var(--ink-2); color: var(--paper); }
.zone-paper { background: var(--paper); color: var(--ink); }
.zone-paper-2 { background: var(--paper-2); color: var(--ink); }
.zone-dark .eyebrow, .zone-dark-2 .eyebrow { color: var(--brass-lt); }
.zone-paper .eyebrow, .zone-paper-2 .eyebrow { color: var(--brass-dk); }

/* Centred over the full content width (PLH pattern). At 1720 a left-aligned
   62ch head left the whole right half of every section empty. */
.section-head {
  display: grid;
  gap: 1.15rem;
  justify-items: center;
  text-align: center;
  max-width: 74ch;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head p { color: inherit; opacity: 0.72; }
/* Two-column sections keep their head as the left column — centring it there
   would break the pairing with the grid beside it. */
.coverage .section-head {
  justify-items: start;
  text-align: left;
  margin-inline: 0;
  max-width: 46ch;
}

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--brass);
  --btn-fg: #FFF9EF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { --btn-bg: var(--brass-dk); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 3px; }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border-color: currentColor; }
.btn--ghost:hover { --btn-bg: currentColor; transform: translateY(-2px); }
.zone-dark .btn--ghost:hover, .zone-dark-2 .btn--ghost:hover { color: var(--ink); }
.zone-paper .btn--ghost:hover, .zone-paper-2 .btn--ghost:hover { color: var(--paper); }
.btn--lg { padding: 1.2rem 2.25rem; font-size: 0.82rem; }
.btn--block { width: 100%; }

.link-arrow {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.link-arrow:hover { gap: 1.1rem; color: var(--brass); }

/* ---------- 6. Header ---------- */
.utility {
  background: var(--ink);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
}
.utility .wrap {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 2.35rem;
  flex-wrap: wrap;
}
.utility a { color: var(--brass-lt); text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility__note { display: none; }
@media (min-width: 720px) { .utility__note { display: block; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 241, 232, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-dark);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 12px 40px -24px rgba(12, 21, 32, 0.5); }
.site-header .wrap {
  max-width: none;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.75rem;
}

.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; margin-right: auto; flex: none; }

/* Jamari's real lockup. Two artwork colourways ship — the dark one for the
   paper header, the light one for the ink footer — and each context hides the
   other, so the mark never sits in a white box on a dark ground. */
.brand__logo { display: block; height: 2.5rem; width: auto; }
.brand__logo--light { display: none; }
.zone-dark .brand__logo--dark,
.site-footer .brand__logo--dark,
.lp__bar .brand__logo--dark { display: none; }
.zone-dark .brand__logo--light,
.site-footer .brand__logo--light,
.lp__bar .brand__logo--light { display: block; }

.brand__name { font-family: var(--display); font-weight: 700; font-size: 1.16rem; letter-spacing: -0.015em; line-height: 1.05; }
.brand__sub { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-faint); }

.nav { display: none; gap: clamp(1rem, 2vw, 1.9rem); align-items: center; }
@media (min-width: 1000px) { .nav { display: flex; } }
.nav a {
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-block: 0.4rem;
  position: relative;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--brass-dk); }

.header-cta { display: none; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }

.burger {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  cursor: pointer;
  flex: none;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s; }
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--rule-dark);
  background: var(--paper);
  padding-block: 1rem 1.75rem;
}
.mobile-nav.is-open { display: block; }
@media (min-width: 1000px) { .mobile-nav.is-open { display: none; } }
.mobile-nav a {
  display: block;
  padding: 0.85rem 0;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  border-bottom: 1px solid var(--rule-dark);
}
.mobile-nav .btn { margin-top: 1.5rem; }

/* ---------- 7. Hero ---------- */
/* PLH pattern: light hero, centred copy, render below fading into the page.
   Light ground means the -soft/-faint tokens flip from paper-on-ink to
   ink-on-paper throughout this section. */
.hero {
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) 0;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(184, 130, 58, 0.10), transparent 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(46, 107, 88, 0.07), transparent 60%);
  pointer-events: none;
}
/* Copy block first, then the render full-bleed beneath it — nothing overlaid.
   PLH's render was made on a white backdrop so it dissolves into the page;
   Whitmore has a hard-edged blue sky, so the mask does that job instead. */
.hero__figure {
  position: relative;
  z-index: 1;
  margin: clamp(1rem, 2vw, 1.75rem) 0 0;
}
.hero__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.3 / 1;
  object-fit: cover;
  object-position: center 62%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.65) 12%, #000 30%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.65) 12%, #000 30%);
}
.hero__credit {
  margin: 0;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem) 0.9rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
  text-align: right;
}

/* --- Light-ground overrides: the hero's inherited tokens assume dark --- */
/* The two-column rule below still applies to .hero__grid's other use in the
   About section; the hero's own copy is now a single centred column. */
.hero > .hero__grid { grid-template-columns: 1fr; justify-items: center; }
/* Hero type runs a tier smaller than the global scale — the render is the
   subject here, so the copy introduces it rather than competing with it. */
.hero .hero__copy { max-width: 58rem; justify-items: center; gap: 0.95rem; }
/* Still a tier under the global .t-hero so the render stays the subject, but
   it has to clear .t-h2 (3.6rem) — at the old 3.15rem cap every section
   heading on the page outranked the h1 once the heads went full-width. */
.hero .t-hero { font-size: clamp(2.2rem, 5.2vw, 4.35rem); }
.hero .eyebrow { justify-content: center; color: var(--brass-dk); }
.hero h1 em { color: var(--brass); }
/* .hero-scoped so it outranks the base .hero__lede rule further down the file */
.hero .hero__lede {
  color: var(--paper-soft);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  max-width: 56ch;
  margin-inline: auto;
}
.hero__cta { margin: 0.15rem 0 0; }
.hero .hero__proof { justify-content: center; }
.hero .proof-chip { color: var(--paper-soft); }
.hero .proof-chip svg { color: var(--brass); }

@media (max-width: 640px) {
  .hero__media { aspect-ratio: 3 / 2; }
  .hero__credit { text-align: left; }
}

/* --- Lead-capture section (form lifted out of the hero) --- */
/* The card alone is 33rem wide; centred in a 1720 ink band it read as
   marooned. Copy on the left, card on the right — the band now carries
   weight across its whole width. */
.offer-section { background: var(--ink); color: var(--paper); }
.offer-section__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  justify-items: center;
}
@media (min-width: 1000px) {
  .offer-section__grid { grid-template-columns: 1.02fr 0.98fr; justify-items: stretch; }
  .offer-section .hero__aside { justify-self: end; }
}
.offer-section .hero__aside { width: 100%; max-width: 37rem; }
.offer-section .eyebrow { color: var(--brass-lt); }

.offer-intro { display: grid; gap: 1.3rem; align-content: center; max-width: 34rem; }
.offer-intro__lede { color: var(--ink-soft); }
.offer-intro__points { display: grid; gap: 0.9rem; padding-top: 0.75rem; }
.offer-intro__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-light);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Echoes the .eyebrow rule rather than introducing a new icon vocabulary */
.offer-intro__points li::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1px;
  margin-top: 0.62em;
  background: var(--brass-lt);
  opacity: 0.75;
}
.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.06fr 0.94fr; gap: clamp(3rem, 5vw, 5rem); } }

.hero__copy { display: grid; gap: 1.6rem; }
.hero h1 { max-width: 15ch; }
.hero h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 8, "WONK" 1;
  color: var(--brass-lt);
}
.hero__lede { color: var(--ink-soft); max-width: 46ch; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  padding-top: 0.5rem;
}
.proof-chip {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft);
}
.proof-chip svg { width: 14px; height: 14px; color: var(--brass-lt); flex: none; }

.hero__aside { display: grid; gap: 1.25rem; }

/* ---------- 8. Offer form ---------- */
.offer-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  position: relative;
}
.offer-card__head {
  padding: 1.5rem clamp(1.35rem, 3vw, 2rem) 1.25rem;
  border-bottom: 1px solid var(--rule-dark);
  background: var(--paper-2);
}
.offer-card__title { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.015em; }
.offer-card__sub { font-size: 0.86rem; color: var(--paper-soft); margin-top: 0.3rem; }
.offer-card__body { padding: clamp(1.35rem, 3vw, 2rem); }

.steps { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.steps__pip { flex: 1; height: 3px; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.steps__pip::after {
  content: ""; display: block; height: 100%; width: 0;
  background: var(--brass);
  transition: width 0.5s var(--ease);
}
.steps__pip.is-done::after, .steps__pip.is-active::after { width: 100%; }

.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.field > label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper-soft);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  background: #FFFDF8;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  /* 16px is the floor: iOS Safari zooms the whole page into any focused
     field set smaller than that, and every field here was 15.68px. */
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(184, 130, 58, 0.16);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--rust); }
.field__error { font-size: 0.78rem; color: var(--rust); min-height: 0; }
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }

.form-step { display: none; }
.form-step.is-active { display: block; animation: stepIn 0.45s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.form-foot {
  margin-top: 0.5rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--paper-faint);
  text-align: center;
}
.form-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Shown only when the final submit fails. Their details are already on the
   server from the step posts, but we never tell them it went through when it
   did not. */
.form-error {
  margin-top: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(196, 97, 79, 0.5);
  border-radius: 6px;
  background: rgba(196, 97, 79, 0.12);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--paper);
  text-align: center;
}
.form-error[hidden] { display: none; }
.form-back {
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--paper-soft);
  padding: 0.75rem 0 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-back:hover { color: var(--brass-dk); }

.form-success { display: none; text-align: center; padding: 1rem 0 0.5rem; }
.form-success.is-shown { display: block; animation: stepIn 0.5s var(--ease) both; }
.form-success__mark {
  width: 3.25rem; height: 3.25rem; margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--verdigris);
  color: #FFF9EF;
}
.form-success h3 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; margin-bottom: 0.5rem; }
.form-success p { color: var(--paper-soft); font-size: 0.92rem; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 9. Stats ---------- */
.stats {
  border-block: 1px solid var(--rule-light);
  background: var(--ink-2);
  color: var(--paper);
}
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
}
@media (min-width: 860px) { .stat { border-bottom: none; } .stat:last-child { border-right: none; } }
@media (max-width: 859px) { .stat:nth-child(2n) { border-right: none; } .stat:nth-last-child(-n+2) { border-bottom: none; } }
.stat__val {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brass-lt);
  display: flex; align-items: baseline; gap: 0.1em;
}
.stat__suffix { font-size: 0.45em; letter-spacing: 0; }
.stat__label {
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.75rem;
}

/* ---------- 10. Process ---------- */
.process { display: grid; gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
@media (min-width: 760px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .process { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--paper);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: 0.9rem;
  align-content: start;
  position: relative;
  transition: background 0.35s var(--ease);
}
.step:hover { background: #FFFDF8; }
.step__n {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--brass-dk);
}
.step h3 { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.015em; }
.step p { font-size: 0.94rem; color: var(--paper-soft); }
.step__meta {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass-dk);
  padding-top: 0.35rem;
  border-top: 1px solid var(--rule-dark);
  margin-top: 0.35rem;
}

/* ---------- 11. Media placeholders ---------- */
/* Aspect-ratio boxes reserve space at parse time — no layout shift when
   real photography replaces them. (website-build-pitfalls #1) */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(12,21,32,0.045) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--paper-3), var(--paper-2));
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
}
.ph--wide { aspect-ratio: 16 / 9; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--square { aspect-ratio: 1; }
.ph--dark {
  background:
    repeating-linear-gradient(135deg, rgba(245,241,232,0.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border-color: var(--rule-light);
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  text-align: center;
  padding: 0.5rem 1rem;
  line-height: 1.6;
}
.ph--dark .ph__tag { color: var(--ink-faint); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* Real photography in a card/gallery frame. The wrapper's aspect-ratio
   reserves the box at parse time and width/height on the <img> keeps the
   intrinsic ratio known, so nothing reflows as bytes arrive.
   (website-build-pitfalls #1) */
.shot { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-3); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot--wide   { aspect-ratio: 16 / 10; }
.shot--photo  { aspect-ratio: 3 / 2; }
.shot--square { aspect-ratio: 1; }

/* ---------- 12a. Before / after ----------
   Two modes, chosen per project by `pairMode` in projects.js.

   `slide` (default) — the draggable wipe, the real-estate convention.
   It only reads as one continuous transformation when both frames were
   shot from the same camera position. Most of JDT's befores are portrait
   phone walkthroughs (0.75) and the afters are landscape MLS shots (1.50)
   taken from somewhere else on the lot, so each side gets an
   `object-position` (data: `pairFocus`) to recentre the subject inside the
   shared 3:2 box, and any project can drop back to `static`.

   `static` — two labelled frames side by side. Compares honestly at any
   aspect, which is the safer read when the framings don't register. */
.pair { display: grid; gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
@media (min-width: 720px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair__side { position: relative; background: var(--paper); }
.pair__frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); }
.pair__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pair__tag, .ba__tag {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.65rem; border-radius: var(--radius);
  background: rgba(12, 21, 32, 0.86); color: var(--paper);
}
.pair__side--after .pair__tag, .ba__tag--after { background: var(--verdigris); }
.ba__tag--after { left: auto; right: 0.85rem; }
.pair__cap {
  padding: 0.85rem 1rem;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--paper-faint);
}

/* ---------- 12b. Before / after — the wipe ----------
   Everything visible is painted from one custom property, --ba-pos, so the
   clip, the divider and the grip can never disagree. Registering it with
   @property is what lets the one-time invite nudge animate; browsers
   without @property still get a working slider, just no tween.
   `inherits: true` is load-bearing — the clip and the divider are children
   of .ba and read the value off it. */
@property --ba-pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

.ba {
  --ba-pos: 50%;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  background: var(--paper-3);
  user-select: none; -webkit-user-select: none;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__layer--after  { z-index: 1; }
.ba__layer--before { z-index: 2; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
/* Tween the property on .ba itself; the clip and the divider inherit it and
   follow along. Only while nudging — a transition during a drag lags the
   divider behind the cursor. */
.ba.is-nudging { transition: --ba-pos 0.7s var(--ease); }

/* The divider. Paper line over an ink hairline so it holds against both a
   bright sky and a dark roof. */
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos);
  width: 2px; margin-left: -1px; z-index: 3;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(12, 21, 32, 0.30);
  pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.85rem; height: 2.85rem; border-radius: 50%;
  background: var(--brass); border: 2px solid var(--paper);
  box-shadow: 0 6px 20px rgba(12, 21, 32, 0.38);
}
.ba__grip::before, .ba__grip::after {
  content: ""; position: absolute; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid var(--paper); border-right: 2px solid var(--paper);
}
.ba__grip::before { left: 0.72rem; transform: translateY(-50%) rotate(-135deg); }
.ba__grip::after  { right: 0.72rem; transform: translateY(-50%) rotate(45deg); }

/* The real control. A native range gives us pointer drag, touch drag,
   click-to-jump, arrow-key stepping and screen-reader semantics for free —
   all of which a hand-rolled pointermove handler has to reimplement and
   usually gets wrong on touch. It sits invisible over the whole frame.
   touch-action: pan-y so a vertical swipe still scrolls the page. */
.ba__range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; opacity: 0;
  cursor: ew-resize; touch-action: pan-y;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 1px; }
.ba__range::-moz-range-thumb { width: 1px; height: 1px; border: 0; }
.ba__range:focus { outline: none; }
.ba__range:focus-visible ~ .ba__handle .ba__grip {
  outline: 3px solid var(--brass-lt); outline-offset: 3px;
}

.ba__hint {
  position: absolute; left: 50%; bottom: 0.95rem; z-index: 3;
  transform: translateX(-50%); pointer-events: none;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.4rem 0.75rem; border-radius: 999px;
  background: rgba(12, 21, 32, 0.72); color: var(--paper);
  transition: opacity 0.45s var(--ease);
}
.ba.is-touched .ba__hint { opacity: 0; }

.ba__caps { display: flex; justify-content: space-between; gap: 1rem; }
.ba__caps .pair__cap { padding-left: 0; padding-right: 0; }
.ba__caps .pair__cap:last-child { text-align: right; }

/* ---------- 12c. Large photo galleries ----------
   30–40 tiles per project. Tiles are real <button>s so the lightbox is
   keyboard-reachable; the button chrome is reset to nothing. */
.gallery { display: grid; gap: clamp(0.5rem, 1.2vw, 0.85rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery__tile {
  appearance: none; -webkit-appearance: none;
  padding: 0; margin: 0; border: 0; background: none;
  display: block; width: 100%; cursor: zoom-in;
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
}
.gallery__tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.gallery__tile:hover img { transform: scale(1.05); filter: brightness(1.04); }
.gallery__tile:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.gallery__tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,21,32,0.22), transparent 42%);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.gallery__tile:hover::after { opacity: 1; }

/* Section band that introduces each phase of a project's photography */
.phase-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.1rem;
  padding-bottom: 0.9rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem);
  border-bottom: 1px solid var(--rule-dark);
}
.phase-head h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -0.015em; }
.phase-head__count {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-dk);
}
.phase-head__note { font-size: 0.88rem; color: var(--paper-soft); margin-left: auto; max-width: 44ch; }

/* ---------- 12d. Category chips on cards ---------- */
.pf-card__kind {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.6rem; border-radius: var(--radius);
  background: rgba(245, 241, 232, 0.92); color: var(--ink);
}

/* ---------- 13. Portfolio ---------- */
.pf-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
@media (min-width: 700px)  { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pf-grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* The portfolio page paginates six at a time, so past the 1300 mark three-up
   fills the wider measure as two clean rows instead of two-up's stretched three. */
@media (min-width: 1300px) { .pf-grid { grid-template-columns: repeat(3, 1fr); } }

.pf-card { display: grid; gap: 1.1rem; text-decoration: none; }
.pf-card__media { position: relative; overflow: hidden; border-radius: var(--radius); }
.pf-card__media .ph { transition: transform 0.7s var(--ease); }
.pf-card:hover .pf-card__media .ph { transform: scale(1.045); }
.pf-card__status {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  z-index: 2;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
}
.pf-card__status[data-status="sold"]        { background: var(--verdigris); }
.pf-card__status[data-status="renovated"]   { background: var(--brass-dk); }
.pf-card__status[data-status="contract"]    { background: var(--ink-3); }
.pf-card__status[data-status="building"]    { background: var(--ink-3); }
.pf-card__status[data-status="inprogress"]  { background: var(--rust); }

/* ---------- Portrait (About) ---------- */
/* The headshot source tops out at 1003w. Left uncapped it would fill a ~765px
   grid column at the new 1720 measure and upscale on any 2x display, so the
   figure is capped and the copy column takes the extra width instead. */
@media (min-width: 1000px) {
  #about .hero__grid { grid-template-columns: 1.18fr 0.82fr; }
}
#about .portrait { max-width: 31rem; margin-inline: auto; }

.portrait {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  background: var(--ink-2);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,21,32,0.55), transparent 45%);
  pointer-events: none;
}
.portrait__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.25rem;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--paper);
}

/* ---------- Closing photos (real, unquoted) ---------- */
.closings { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 720px) { .closings { grid-template-columns: repeat(2, 1fr); } }
.closing { display: grid; gap: 0.9rem; }
.closing__cap {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--paper-faint);
}
.pf-card__body { display: grid; gap: 0.55rem; }
.pf-card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  transition: color 0.3s var(--ease);
}
.pf-card:hover .pf-card__title { color: var(--brass-dk); }
.pf-card__loc {
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--paper-faint);
}
.pf-card__specs {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem;
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--paper-soft);
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule-dark);
}
.pf-card__cta {
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--brass-dk);
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: gap 0.3s var(--ease);
}
.pf-card:hover .pf-card__cta { gap: 1rem; }

/* Cards inherit zone colouring — the same card renders on paper and on ink */
.zone-dark .pf-card__loc,   .zone-dark-2 .pf-card__loc   { color: var(--ink-faint); }
.zone-dark .pf-card__specs, .zone-dark-2 .pf-card__specs { color: var(--ink-soft); border-top-color: var(--rule-light); }
.zone-dark .pf-card__cta,   .zone-dark-2 .pf-card__cta   { color: var(--brass-lt); }
.zone-dark .pf-card:hover .pf-card__title,
.zone-dark-2 .pf-card:hover .pf-card__title { color: var(--brass-lt); }
.zone-dark .link-arrow:hover, .zone-dark-2 .link-arrow:hover { color: var(--brass-lt); }

.pf-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.pf-filter {
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  background: transparent;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pf-filter:hover { border-color: var(--brass); color: var(--brass-dk); }
.pf-filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.pager { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pager button {
  min-width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.pager button:hover:not(:disabled) { background: var(--paper-3); }
.pager button[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager button:disabled { opacity: 0.32; cursor: not-allowed; }

/* ---------- 14. Comparison table ---------- */
.compare { border: 1px solid var(--rule-light); border-radius: var(--radius); overflow: hidden; }
.compare__row { display: grid; grid-template-columns: 1.35fr 1fr 1fr; }
.compare__row + .compare__row { border-top: 1px solid var(--rule-light); }
.compare__cell {
  padding: clamp(0.9rem, 2vw, 1.35rem) clamp(0.75rem, 2vw, 1.5rem);
  font-size: 0.92rem;
  display: flex; align-items: center; gap: 0.55rem;
}
.compare__cell + .compare__cell { border-left: 1px solid var(--rule-light); }
.compare__row--head .compare__cell {
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  background: rgba(245, 241, 232, 0.05);
  font-weight: 500;
}
.compare__col-us { background: rgba(184, 130, 58, 0.09); }
.compare__row--head .compare__col-us { background: rgba(184, 130, 58, 0.18); color: var(--brass-lt); }
.compare__cell svg { width: 15px; height: 15px; flex: none; }
.compare__yes { color: var(--brass-lt); }
.compare__no  { color: rgba(245, 241, 232, 0.38); }
.compare__label { font-weight: 500; }
@media (max-width: 640px) {
  .compare__row { grid-template-columns: 1.2fr 0.9fr 0.9fr; }
  .compare__cell { font-size: 0.82rem; padding: 0.8rem 0.6rem; }
}

/* ---------- 15. Situations ---------- */
.sit-grid { display: grid; gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
@media (min-width: 620px)  { .sit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .sit-grid { grid-template-columns: repeat(3, 1fr); } }
.sit {
  background: var(--paper-2);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  display: grid; gap: 0.6rem; align-content: start;
  transition: background 0.3s var(--ease);
}
.sit:hover { background: var(--paper); }
.sit h3 { font-family: var(--display); font-weight: 600; font-size: 1.12rem; }
.sit p { font-size: 0.89rem; color: var(--paper-soft); }
.sit__icon { width: 22px; height: 22px; color: var(--brass-dk); }

/* ---------- 16. Cost-of-waiting calculator ---------- */
.calc { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 960px) { .calc { grid-template-columns: 1fr 1fr; } }
.calc__panel {
  background: var(--ink-2);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.calc__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.calc__label output { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--brass-lt); letter-spacing: -0.02em; }
.calc__range { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.calc__range::-webkit-slider-runnable-track { height: 3px; background: rgba(245,241,232,0.22); border-radius: 2px; }
.calc__range::-moz-range-track { height: 3px; background: rgba(245,241,232,0.22); border-radius: 2px; }
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.35rem; height: 1.35rem; margin-top: -0.6rem;
  background: var(--brass); border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.7);
}
.calc__range::-moz-range-thumb {
  width: 1.35rem; height: 1.35rem;
  background: var(--brass); border: 2px solid var(--paper);
  border-radius: 50%;
}
.calc__range:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 6px; }
.calc__out { display: grid; gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); margin-top: 1.75rem; }
@media (min-width: 480px) { .calc__out { grid-template-columns: repeat(3, 1fr); } }
.calc__cell { background: var(--ink); padding: 1.15rem 1rem; text-align: center; }
.calc__cell b {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em;
  color: var(--paper);
}
.calc__cell span {
  font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
  display: block; margin-top: 0.4rem;
}
.calc__note { font-size: 0.76rem; color: var(--ink-faint); margin-top: 1.1rem; line-height: 1.55; }
.calc__breakdown { display: grid; gap: 0.85rem; }
.calc__item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 1rem; align-items: baseline;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule-light);
}
.calc__item b { font-family: var(--mono); font-size: 0.95rem; color: var(--brass-lt); }
.calc__item span { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- 17. Testimonials ---------- */
.quotes { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  background: var(--paper);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.15rem);
  display: grid; gap: 1.1rem; align-content: start;
}
.quote__stars { display: flex; gap: 0.15rem; color: var(--brass); }
.quote__stars svg { width: 15px; height: 15px; }
.quote blockquote { font-family: var(--display); font-size: 1.08rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }
.quote__by { display: flex; align-items: center; gap: 0.8rem; padding-top: 0.35rem; border-top: 1px solid var(--rule-dark); }
.quote__av {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.72rem;
  flex: none;
}
.quote__name { font-weight: 600; font-size: 0.92rem; }
.quote__meta { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--paper-faint); }

/* ---------- 18. Coverage ---------- */
.coverage { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .coverage { grid-template-columns: 0.95fr 1.05fr; } }
/* Fixed column counts, not auto-fill — at the 1720 measure auto-fill produced
   five tracks for eight counties and left a bare grid cell showing through. */
.county-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
@media (min-width: 620px) { .county-grid { grid-template-columns: repeat(4, 1fr); } }
.county {
  background: var(--paper);
  padding: 1.1rem 1.15rem;
  display: grid; gap: 0.25rem;
  transition: background 0.3s var(--ease);
}
.county:hover { background: var(--paper-2); }
.county b { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.county span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--paper-faint); text-transform: uppercase; }

/* ---------- 19. FAQ ---------- */
.faq { border-top: 1px solid var(--rule-dark); max-width: var(--measure-prose); margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--rule-dark); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(1.15rem, 2.4vw, 1.6rem) 3rem clamp(1.15rem, 2.4vw, 1.6rem) 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  letter-spacing: -0.012em;
  position: relative;
  transition: color 0.25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass-dk); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem; top: 50%;
  width: 13px; height: 13px;
  transform: translateY(-50%);
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transition: transform 0.35s var(--ease);
  color: var(--brass-dk);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq__a { padding: 0 3rem 1.6rem 0; color: var(--paper-soft); max-width: 68ch; animation: stepIn 0.4s var(--ease) both; }

/* ---------- 20. Final CTA ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 50% 0%, rgba(184,130,58,0.22), transparent 62%);
}
.cta-band__inner { position: relative; text-align: center; display: grid; gap: 1.6rem; justify-items: center; }
.cta-band h2 { max-width: 18ch; }
.cta-band p { max-width: 52ch; color: var(--ink-soft); }
/* The eyebrow is a <p>, so the 52ch reading cap above was breaking its single
   line of mono onto two. It is a label, not prose. */
.cta-band .eyebrow { max-width: none; color: var(--brass-lt); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; padding-top: 0.5rem; }

/* ---------- 21. Footer ---------- */
.site-footer { background: var(--ink); color: var(--ink-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; border-top: 1px solid var(--rule-light); }
.footer-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 780px)  { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; } }
.site-footer .brand__name { color: var(--paper); }
.site-footer .brand__mark { background: var(--paper); color: var(--ink); }
.site-footer .brand__sub { color: var(--ink-faint); }
.footer-col h4 {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-lt);
  margin-bottom: 1.1rem;
}
.footer-col li + li { margin-top: 0.6rem; }
.footer-col a { text-decoration: none; font-size: 0.92rem; transition: color 0.25s var(--ease); }
.footer-col a:hover { color: var(--brass-lt); }
.footer-blurb { font-size: 0.92rem; max-width: 40ch; margin-top: 1.15rem; line-height: 1.65; }
.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-light);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.footer-bottom a { color: inherit; }
.footer-legal { max-width: 78ch; font-size: 0.72rem; line-height: 1.65; color: rgba(245,241,232,0.30); margin-top: 1.25rem; }

/* ---------- 22. Sticky mobile call bar ---------- */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  border-top: 1px solid var(--rule-light);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease);
}
.callbar.is-shown { transform: none; }
@media (min-width: 780px) { .callbar { display: none; } }
.callbar a {
  padding: 1rem 0.75rem;
  text-align: center;
  text-decoration: none;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper);
}
.callbar a + a { background: var(--brass); color: #FFF9EF; }

/* ---------- 23. Demo notice (remove for production) ---------- */
.demo-note {
  background: var(--brass-dk);
  color: #FFF6E8;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
}
.demo-note .wrap { display: flex; align-items: center; gap: 1rem; min-height: 2.2rem; justify-content: space-between; }
.demo-note button { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.25rem 0.4rem; }
.demo-note[hidden] { display: none; }

/* ---------- 24. Reveal on scroll ----------
   Scoped to .js (set by an inline script in <head>). If JavaScript fails
   or is blocked, nothing is ever hidden — a lead-capture page must not be
   able to render blank. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: 0.48s; }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: 0.56s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- 25. Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute; left: 0.5rem; top: -4rem;
  z-index: 1000;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono); font-size: 0.75rem;
  text-decoration: none;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 0.5rem; }
.stack { display: grid; }
.stack-sm { gap: 0.75rem; }
.stack-md { gap: 1.35rem; }
.stack-lg { gap: 2.25rem; }
.text-center { text-align: center; }

/* ---------- 26. Mobile ----------
   Measured on the live site at 390×844 (2026-08-26) before any of this:
   no horizontal overflow, but a horizontal nav drawer, a call bar with
   nothing under it, 23 tap targets under 40px, chrome eating 128px of the
   viewport, and a fixed grain layer + backdrop blur compositing the whole
   page on every scroll. Desktop is untouched by everything below. */

/* The drawer. `.site-header .wrap` is a flex row for the brand/nav/burger
   line — and .mobile-nav's own .wrap is a descendant of .site-header, so it
   inherited the row and laid the five links out side by side, clipping the
   last one. Same specificity, later rule wins. */
.mobile-nav .wrap { display: block; min-height: 0; }
.mobile-nav a { min-height: 2.75rem; display: flex; align-items: center; }
/* The burger's three bars are grid rows; with the default stretch they sat
   14px apart across the 44px button, so the open-state ±5.5px translate
   never met in the middle and the icon read as a chevron. Pack the rows. */
.burger { align-content: center; }

/* Hit areas that don't move the type: the underline stays on the text and
   the pseudo-element takes the tap. */
.link-arrow { position: relative; }
.link-arrow::before { content: ""; position: absolute; inset: -0.6rem -0.35rem; }

@media (max-width: 779px), (hover: none) {
  /* Scroll cost. A fixed, full-viewport, mix-blend-mode layer forces the
     compositor to re-blend the whole page every frame; backdrop-filter does
     the same for the header strip. Neither is visible enough on a phone to
     pay that. */
  body::after { display: none; }
  .site-header {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: rgba(245, 241, 232, 0.98);
  }
  .offer-card { box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.6); }
}

@media (max-width: 779px) {
  /* Chrome budget: sticky header 77px → 64px; anchor offset follows it. */
  .site-header .wrap { min-height: 4rem; }
  .brand__logo { height: 2.15rem; }
  :where(section, div)[id] { scroll-margin-top: 4.5rem; }

  /* The call bar is fixed and 51px tall; give the page that much room at
     the bottom so the footer's legal row and the last CTA aren't under it.
     env() is 0 outside a notched iPhone in Safari and harmless elsewhere. */
  .site-footer { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
  .callbar a {
    font-size: 0.78rem;
    padding: 0.95rem 0.75rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
  }

  /* Tap targets to 44px without changing the type. */
  .utility .wrap { min-height: 2.75rem; }
  .utility a { display: inline-block; padding: 0.7rem 0.25rem; }
  .demo-note button { width: 2.5rem; height: 2.5rem; margin-right: -0.5rem; }
  .footer-col li + li { margin-top: 0.1rem; }
  .footer-col a { display: inline-block; padding: 0.55rem 0; }
  .footer-bottom a { display: inline-block; padding: 0.7rem 0; }
  .pf-filter { min-height: 2.75rem; padding-inline: 1rem; }
  .form-back { min-height: 2.75rem; padding: 0.85rem 0.5rem 0.5rem; }
  .calc__range { height: 2.75rem; }

  /* Legibility floor. The mono labels are set at 9.6–11px for desktop
     restraint; on a phone in daylight the smallest of them go to ~11.5px. */
  .eyebrow, .stat__label, .pf-card__loc, .pf-filter, .pf-card__cta { font-size: 0.72rem; }
  .proof-chip, .offer-intro__points li { font-size: 0.78rem; }
  .field > label { font-size: 0.74rem; }
  .pf-card__kind, .pf-card__status, .pair__tag, .ba__tag { font-size: 0.68rem; }
  .ba__hint { font-size: 0.66rem; }
  .hero__credit, .county span, .calc__cell span, .pair__cap, .closing__cap, .portrait__cap { font-size: 0.7rem; }
  .demo-note, .footer-bottom, .quote__meta, .step__meta, .phase-head__count { font-size: 0.72rem; }
  .footer-legal, .calc__note, .form-foot { font-size: 0.78rem; }
}

@media (max-width: 640px) {
  /* Twelve sections at a 72px minimum made the home page 16,000px tall at
     390 wide. A tighter rhythm on phones; desktop keeps the clamp. */
  .section { padding-block: 3.75rem; }
  .section--tight { padding-block: 2.75rem; }

  /* The comparison table: three columns at 390px wrapped "✕ Required to
     compete" onto three ragged lines because the icon and text sat in one
     non-wrapping flex line. Let them wrap as a unit. */
  .compare__row { grid-template-columns: 1.15fr 1fr 1fr; }
  .compare__cell { flex-wrap: wrap; align-items: flex-start; gap: 0.3rem 0.4rem; line-height: 1.35; }
  .compare__cell svg { margin-top: 0.2rem; }
}