/* Homeowner Insights, LLC — Brand System v1.0 (2026-07-30), light-first.
   Paper ground, white cards, Deepwater ink, Harbor links and primary buttons.
   Dark grounds the hero and one band per page rhythm, plus footer, CTA, map band.
   Spark is the insight accent and NEVER carries text on a light ground.
   Token + contrast source of truth: Brand/homeowner-insights/brand-sheet.md.
   Component specs: Brand/homeowner-insights/ui-pattern-library.md. */

:root {
  /* Primary */
  --color-bg: #F2F6F7;            /* Paper */
  --color-surface: #FFFFFF;
  --color-ink: #041E42;           /* Deepwater */
  --color-accent: #005F61;        /* Harbor: links, labels, primary buttons */
  /* Secondary */
  --color-midnight: #001628;
  --color-paper: #F2F6F7;
  --color-shoal: #99D9D9;         /* dark grounds only */
  --color-highlight: #FA4616;     /* Spark: graphics + dark-ground eyebrows only */
  /* Tertiary / working set */
  --color-muted: #355464;         /* Seawall: secondary text on light */
  --color-dim: #597385;           /* Silt: muted captions */
  --color-channel: #68A2B9;       /* graphics and large numerals, never type on light */
  --color-flag: #E9072B;          /* the only red */
  /* Derived implementation tokens (documented in the brand sheet) */
  --color-accent-bright: #005F61;
  --color-accent-deep: #00494B;   /* Harbor hover */
  --color-tint: #E4EDF0;          /* light bands */
  --color-sand: #E4EDF0;
  --color-line: #D4E1E7;          /* light hairline */
  --color-rule: #EDF3F5;
  --dark-hairline: #153352;
  --dark-muted: #A9BFCB;
  --dark-dim: #87A0AE;
  --color-map-land: #041E42;
  --color-map-edge: #00101F;
  --radius: 16px;
  --radius-input: 12px;
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow: 0 1px 2px rgba(4, 30, 66, 0.04), 0 12px 32px rgba(4, 30, 66, 0.07);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-bg);
  font: 400 1.03125rem/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { display: block; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-deep); }
button, input, select, textarea { font: inherit; }
/* The focus ring is the one element never restyled per component (pattern 03). */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

.container { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--color-ink); color: var(--color-paper); font-weight: 600; border-radius: 999px; }
.skip-link:focus { top: 12px; }
.draft-bar { background: var(--color-tint); color: var(--color-ink); border-bottom: 1px solid var(--color-line); text-align: center; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; padding: 8px 20px; }
.notice-band { background: var(--color-sand); border-bottom: 1px solid var(--color-line); border-top: 2px solid var(--color-accent); }
.notice-band p { margin: 0; padding: 14px 0; color: var(--color-ink); font-size: 0.9375rem; line-height: 1.55; max-width: 90ch; }

/* ---------- Header: thin glass on light, hairline edge (pattern 09) ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 246, 247, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow 200ms ease;
}
.site-header.is-condensed { box-shadow: 0 1px 0 var(--color-line), 0 8px 24px rgba(4, 30, 66, 0.06); }
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--color-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; transition: min-height 200ms var(--ease-out); }
.site-header.is-condensed .header-inner { min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-ink); }
.logo-mark { flex: none; }
/* Wordmark: Source Serif 4 700, tight tracking, never wraps (brand sheet). */
.logo-word { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.022em; white-space: nowrap; color: inherit; }
.header-actions, .nav-list { display: flex; align-items: center; gap: 18px; }
.nav-list { margin: 0; padding: 0; list-style: none; }
.nav-list a { color: var(--color-ink); text-decoration: none; font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: color 160ms ease; }
.nav-list a[aria-current="page"] { color: var(--color-accent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .nav-list a:hover { color: var(--color-accent); }
}
.menu-button { display: none; min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--color-line); background: var(--color-surface); border-radius: 999px; color: var(--color-ink); font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: transform 90ms var(--ease-out); }
.menu-button:active { transform: scale(0.97); }

/* ---------- Buttons: four roles, weight earns movement (brand sheet) ----------
   Light/tools primary: Harbor fill, 1px lift, no sheen. Quiet: white + hairline,
   brightens only. Text links: underline wipe. Hover 160-180ms, press 90ms. */

.button {
  display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 0.9689rem; letter-spacing: 0; white-space: nowrap;
  cursor: pointer; transition: transform 170ms var(--ease-out), background-color 170ms ease, border-color 170ms ease, color 170ms ease, box-shadow 170ms ease;
}
.header-actions > .button { padding: 10px 20px; font-size: 0.9063rem; }
.button:active { transform: scale(0.97); transition-duration: 90ms; }
.button-primary { color: var(--color-paper); background: var(--color-accent); }
.button-primary:active { background: var(--color-accent-deep); }
@media (hover: hover) and (pointer: fine) {
  .button-primary:hover { color: var(--color-paper); background: var(--color-accent-deep); transform: translateY(-1px); }
}
.button-ghost { color: var(--color-ink); border-color: rgba(4, 30, 66, 0.22); background: var(--color-surface); }
@media (hover: hover) and (pointer: fine) {
  .button-ghost:hover { color: var(--color-ink); border-color: var(--color-ink); }
}
/* Dark-context quiet buttons: Paper text, Shoal-leaning hairline. */
.cta-panel .button-ghost, .section-dark .button-ghost, .site-footer .button-ghost { color: var(--color-paper); border-color: rgba(242, 246, 247, 0.4); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .cta-panel .button-ghost:hover { color: var(--color-paper); border-color: var(--color-paper); }
}
/* Dark/marketing primary: sheen sweep at 600ms plus a 2px lift. */
.cta-panel .button-primary { position: relative; overflow: hidden; }
.cta-panel .button-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(242, 246, 247, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (hover: hover) and (pointer: fine) {
  .cta-panel .button-primary:hover { transform: translateY(-2px); }
  .cta-panel .button-primary:hover::after { transform: translateX(120%); transition: transform 600ms ease; }
}

/* ---------- Hero: light, calm, one accent ---------- */

.hero { padding: clamp(64px, 9vw, 116px) 0 clamp(48px, 6vw, 80px); background: linear-gradient(180deg, var(--color-bg), var(--color-tint) 140%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr); gap: 64px; align-items: end; }
/* No figure and no aside: the copy takes the full width instead of leaving a
   0.7fr gutter empty (see renderHero in build.mjs). */
.hero-grid-full { grid-template-columns: 1fr; }
/* Eyebrows: mono small caps, Harbor on light (never Spark on light). */
.eyebrow { display: inline-block; color: var(--color-accent); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78125rem; font-weight: 600; }
.hero h1 {
  margin: 14px 0 20px; max-width: 780px;
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.375rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em;
}
.hero .lede { max-width: 640px; margin: 0; color: var(--color-muted); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-aside { padding: 26px 28px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); color: var(--color-muted); font-size: 0.9375rem; line-height: 1.55; }
.hero-aside strong { display: block; color: var(--color-ink); font-weight: 650; letter-spacing: -0.01em; margin-bottom: 8px; }
.breadcrumbs { margin: 0 0 18px; color: var(--color-dim); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); }

/* Entrance: felt, not seen. Opacity + 8px rise, short stagger. */
@supports (transition-behavior: allow-discrete) {
  .hero-grid > div > * , .hero-aside {
    transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
  }
  @starting-style {
    .hero-grid > div > *, .hero-aside { opacity: 0; transform: translateY(8px); }
  }
  .hero-grid > div > *:nth-child(2) { transition-delay: 50ms; }
  .hero-grid > div > *:nth-child(3) { transition-delay: 100ms; }
  .hero-grid > div > *:nth-child(4) { transition-delay: 150ms; }
  .hero-aside { transition-delay: 200ms; }
}

/* Scroll reveal (elevation pass): sections rise 8px as they enter. site.js adds
   .reveal-ready; reduced motion never adds it, so this is purely additive. */
.reveal { opacity: 1; transform: none; }
.reveal-ready .reveal { opacity: 0; transform: translateY(8px); transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Trust strip: mono tabular figures are the data signature ---------- */

.stats { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { min-height: 140px; padding: 30px 26px; border-right: 1px solid var(--color-line); }
.stat:first-child { border-left: 1px solid var(--color-line); }
.stat-value { color: var(--color-accent); font-family: var(--font-mono); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 8px; color: var(--color-muted); font-size: 0.875rem; line-height: 1.45; }

/* ---------- Sections: Paper / White / Mist rhythm ---------- */

.section { padding: clamp(64px, 8vw, 104px) 0; }
.section-white { background: var(--color-surface); }
.section-sand { background: var(--color-sand); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section h2 { margin: 12px 0 14px; font-family: var(--font-serif); font-size: 2rem; font-weight: 600; line-height: 1.12; letter-spacing: -0.024em; }
.section h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.32; letter-spacing: -0.01em; }
.section-intro { margin: 0; color: var(--color-muted); font-size: 1.0625rem; max-width: 68ch; }

/* ---------- Cards: hairlines over shadows ---------- */

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { padding: 28px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); transition: border-color 200ms ease, transform 200ms var(--ease-out); }
.section-white .card { background: var(--color-bg); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: rgba(4, 30, 66, 0.22); transform: translateY(-2px); }
}
.card h3 { margin: 0 0 10px; }
.card p { margin: 0; color: var(--color-muted); font-size: 0.9689rem; }
.card a { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 0.9375rem; }
.card-number { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.contact-card h3 a { text-decoration: none; }
.contact-card h3 a:hover { text-decoration: underline; }

/* ---------- Split ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr); gap: 56px; align-items: start; }
/* Split section with no aside: prose takes the full measure, no empty gutter. */
.split-full { grid-template-columns: 1fr; }
.prose p { max-width: 68ch; margin: 0 0 1.1em; color: var(--color-muted); font-size: 1.0625rem; }
.prose p:last-child { margin-bottom: 0; }
.aside { padding: 30px; background: var(--color-tint); border-radius: var(--radius); border: 1px solid rgba(0, 95, 97, 0.16); }
.section-sand .aside { background: var(--color-surface); }
.aside h3 { margin: 0 0 10px; }
.aside p { margin: 0; color: var(--color-muted); font-size: 0.9689rem; }
.aside a { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 0.9375rem; }

/* ---------- Steps ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { counter-increment: step; padding: 24px 22px 26px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
.section-white .step { background: var(--color-bg); }
.step::before { content: "0" counter(step); display: block; color: var(--color-accent); font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.step h3 { margin: 0 0 8px; font-size: 1.0625rem; }
.step p { margin: 0; color: var(--color-muted); font-size: 0.9063rem; }

/* ---------- Team / portrait placeholder ---------- */

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team-card { padding: 28px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); max-width: 420px; }
.portrait-placeholder { aspect-ratio: 4 / 3; display: grid; place-items: center; margin: 0 0 22px; border-radius: var(--radius-input); background: var(--color-tint); border: 1px dashed rgba(0, 95, 97, 0.4); color: var(--color-accent-deep); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
/* The real headshot, with the RS designation seal overlaid bottom-right. The
   seal file is white-ground, so it is clipped to a circle and given a hairline
   ring; the white ring doubles as separation from the photo behind it. */
.portrait { position: relative; margin: 0 0 22px; }
.portrait > img { display: block; width: 100%; height: auto; border-radius: var(--radius-input); }
/* img.portrait-seal outranks the .portrait > img rule above; a bare class would lose. */
.portrait > img.portrait-seal { position: absolute; right: 10px; bottom: 10px; width: clamp(72px, 26%, 108px); height: auto; border-radius: 50%; background: #FFFFFF; border: 3px solid #FFFFFF; box-shadow: 0 2px 10px rgba(4, 30, 66, 0.28); }
.team-card h3 { margin: 0; font-family: var(--font-serif); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; }
.role { color: var(--color-muted); font-size: 0.875rem; }
.credential { margin: 12px 0; color: var(--color-accent); font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.02em; }
.team-card p:last-child { margin: 0; color: var(--color-muted); font-size: 0.9689rem; }

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

.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-input); padding: 0 22px; transition: border-color 200ms ease; }
.section-white .faq details { background: var(--color-bg); }
.faq details[open] { border-color: rgba(0, 95, 97, 0.35); }
.faq summary { cursor: pointer; padding: 18px 30px 18px 0; font-weight: 600; font-size: 1rem; letter-spacing: -0.005em; list-style-position: outside; }
.faq details p { margin: 0 0 20px; color: var(--color-muted); max-width: 72ch; }
.faq details ol, .faq details ul { margin: 0 0 20px; padding-left: 24px; color: var(--color-muted); max-width: 72ch; }
.faq details ol li, .faq details ul li { margin-bottom: 6px; }
/* Opt-in full-width FAQ: cards span the container and the answers fill them,
   matching the stacked cards elsewhere on the page. */
.faq-wide, .faq-wide details p { max-width: none; }

/* ---------- CTA panel: Midnight punctuation, one Spark wash ---------- */

.cta-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; padding: clamp(32px, 5vw, 56px); border-radius: 20px; color: var(--color-paper); background: var(--color-midnight); }
.cta-panel::before { content: ""; position: absolute; top: -40%; right: -10%; width: 55%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(250, 70, 22, 0.14), transparent 70%); }
.cta-panel > * { position: relative; }
.cta-panel h2 { margin: 0 0 10px; color: var(--color-paper); }
.cta-panel p { margin: 0; color: var(--dark-muted); max-width: 62ch; }
.cta-panel a:not(.button) { color: var(--color-shoal); }
.cta-panel :focus-visible { outline-color: var(--color-shoal); }
.cta-buttons { display: flex; flex-direction: column; gap: 12px; min-width: 220px; }

/* ---------- Forms (pattern 05) ---------- */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 860px; }
.form-field { display: grid; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 0.875rem; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; border: 1px solid rgba(4, 30, 66, 0.18); border-radius: var(--radius-input);
  background: var(--color-surface); color: var(--color-ink); padding: 12px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 95, 97, 0.15); }
.form-field ::placeholder { color: rgba(89, 115, 133, 0.75); }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-note { max-width: 860px; margin-bottom: 24px; padding: 14px 18px; border-radius: var(--radius-input); background: var(--color-tint); border: 1px solid rgba(0, 95, 97, 0.16); font-size: 0.9375rem; }
.form-status { margin-top: 14px; color: var(--color-accent-deep); font-weight: 600; }
.field-help { color: var(--color-dim); font-size: 0.8125rem; line-height: 1.5; }
/* The visible attach button drives this input; hidden but still in the form so
   FormData carries the chosen files. display:none would also work but keeps the
   input reachable for the browser's own validation popups this way. */
.form-field input.file-input-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.form-field [data-file-button] { justify-self: start; white-space: normal; text-align: left; }
.file-list { margin: 0; padding: 0 0 0 2px; list-style: none; color: var(--color-muted); font-size: 0.875rem; }
.file-list li { padding: 2px 0; }

/* ---------- Footer: Midnight surface, Paper text, Shoal links ---------- */

.site-footer { position: relative; overflow: hidden; color: var(--dark-muted); background: var(--color-midnight); padding: 60px 0 26px; }
.site-footer::before { content: ""; position: absolute; top: -30%; left: -8%; width: 44%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(250, 70, 22, 0.10), transparent 70%); }
.site-footer .container { position: relative; }
.site-footer .brand { color: var(--color-paper); }
.site-footer :focus-visible { outline-color: var(--color-shoal); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 44px; }
.footer-brand p { max-width: 360px; font-size: 0.9375rem; }
.footer-contact a { color: var(--color-shoal); text-decoration: none; }
.footer-contact a:hover { color: var(--color-paper); }
.footer-title { color: var(--color-paper); font-weight: 650; font-size: 0.9375rem; margin-bottom: 12px; }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li { margin: 8px 0; }
.footer-links a { color: var(--dark-muted); text-decoration: none; font-size: 0.9375rem; transition: color 160ms ease; }
.footer-links a:hover { color: var(--color-shoal); }
.footer-bottom { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--dark-hairline); }
.footer-legal { margin: 0; font-size: 0.75rem; color: var(--dark-dim); }

/* ---------- Breakpoints ---------- */

@media (max-width: 980px) {
  .menu-button { display: inline-flex; align-items: center; justify-content: center; }
  .header-actions > .button { display: none; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 72px; padding: 14px 20px 22px; background: var(--color-bg); border-bottom: 1px solid var(--color-line); box-shadow: var(--shadow); }
  .site-nav[data-open="true"] { display: block; }
  .nav-list { align-items: stretch; flex-direction: column; gap: 0; }
  .nav-list a { display: block; padding: 12px; }
  .hero-grid, .split, .cta-panel { grid-template-columns: 1fr; }
  .hero-aside { max-width: 560px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 28px, 1120px); }
  .hero { padding-top: 56px; }
  .stats-grid, .card-grid, .team-grid, .steps, .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .stat, .stat:first-child { border-left: 0; border-right: 0; border-bottom: 1px solid var(--color-line); }
  .cta-buttons { min-width: 0; }
}

/* ---------- Reduced motion: remove the movement, never slow it ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .button:active, .menu-button:active { transform: none; }
  .button-primary:hover, .cta-panel .button-primary:hover { transform: none; }
  .cta-panel .button-primary::after { display: none; }
  .card:hover { transform: none; }
  .map-pulse { animation: none; }
  .curve-line { animation: none; stroke-dasharray: none; }
  .curve-marker { animation: none; opacity: 1; }
  @supports (transition-behavior: allow-discrete) {
    @starting-style {
      .hero-grid > div > *, .hero-aside { transform: none; }
    }
  }
}

/* ==========================================================================
   Illustration layer, richer anatomy, legal pages. Same v1.0 tokens.
   ========================================================================== */

/* ---------- Hero figure column ---------- */

.hero-aside-col { display: grid; gap: 16px; align-content: end; }
.scene-figure { margin: 0; }
.scene-figure svg { display: block; width: 100%; height: auto; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 14px 12px 10px; }
.scene-figure figcaption { margin-top: 8px; color: var(--color-dim); font-size: 0.8125rem; line-height: 1.5; }

/* The Funding Curve (the one decorative motion): draws left to right over the
   first 46% of a 5s cycle, holds, dips to 22%, redraws. Markers fade in as the
   line reaches them. Reduced motion holds the finished line (rules above). */
.curve-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: curve-draw 5s var(--ease-out) infinite; }
.curve-marker { opacity: 0; animation: curve-marker 5s ease infinite; }
@keyframes curve-draw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  46% { stroke-dashoffset: 0; opacity: 1; }
  84% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.22; }
}
@keyframes curve-marker {
  0%, 18% { opacity: 0; }
  32%, 84% { opacity: 1; }
  100% { opacity: 0.22; }
}

/* SVG text: sans mechanics, Seawall by default, Harbor for the accent label */
.art-label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; fill: var(--color-muted); letter-spacing: 0.02em; }
.art-label-accent { fill: var(--color-accent); }
.art-callout { font-family: var(--font-sans); font-size: 13px; font-weight: 600; fill: var(--color-ink); }

/* ---------- Process rail above the steps grid ---------- */

.process-rail { max-width: 760px; margin: 0 0 28px; }
.process-rail svg { display: block; width: 100%; height: auto; }

/* ---------- Illustrated cards ---------- */

.card-art { margin: -6px 0 14px; }
.card-art svg { display: block; width: 100%; max-width: 220px; height: auto; }
/* Role glyphs are 64x64 icons, not building line art: keep them icon-sized. */
.card-art-role svg { max-width: 64px; }
/* One card per row, full width. Declared after the 980px rule above so it holds
   at every width instead of snapping back to two columns on tablets. */
.card-grid-1 { grid-template-columns: 1fr; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Button-row sections: the labels are the whole content, so the buttons size to
   their text and wrap when the row runs out of room. The base .button sets
   white-space: nowrap, which is released below 640px so a long service name
   wraps inside its button instead of overflowing a narrow phone. */
.button-row { display: flex; flex-wrap: wrap; gap: 14px; }
.card-grid-4 .card { padding: 24px 22px; }
.card-grid-4 .card h3 { font-size: 1.0625rem; }
.card-grid-4 .card p { font-size: 0.9063rem; }

/* ---------- Comparison tables: scroll inside, never the page ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.9375rem; }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); }
.compare-table thead th { font-family: var(--font-serif); font-size: 1.0125rem; font-weight: 600; letter-spacing: -0.005em; background: var(--color-tint); }
.compare-table thead th.row-lead { background: transparent; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table th.row-lead { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.compare-table td { color: var(--color-muted); }
.table-note { max-width: 68ch; margin: 14px 2px 0; color: var(--color-dim); font-size: 0.875rem; }

/* ---------- Process diagram (CAI RSS procedure) ---------- */

/* Wide by nature, so it scrolls inside its own figure and never the page. */
.diagram-figure { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram-figure .art-rss { display: block; width: 100%; min-width: 620px; height: auto; }
/* Light default: Deepwater boxes, Paper type, the source diagram's hierarchy. */
.art-rss .rss-box { fill: var(--color-ink); stroke: none; }
.art-rss .rss-label { fill: var(--color-paper); font-family: var(--font-sans); font-size: 13px; font-weight: 650; letter-spacing: 0.01em; }
.art-rss .rss-chevron { fill: none; stroke: var(--color-highlight); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
/* Inside a Deepwater band the boxes invert to the dark glass spec instead. */
.section-dark .art-rss .rss-box { fill: rgba(242, 246, 247, 0.08); stroke: rgba(242, 246, 247, 0.22); stroke-width: 1; }

/* ---------- Checklists ---------- */

.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin: 0; padding: 0; list-style: none; max-width: 980px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-input); }
.section-white .checklist li { background: var(--color-bg); }
.checklist svg { flex: none; margin-top: 2px; }
.checklist strong { display: block; font-weight: 600; letter-spacing: -0.005em; }
.checklist p { margin: 4px 0 0; color: var(--color-muted); font-size: 0.9063rem; }
/* Opt-in single column: one full-width item per row, matching the stacked level
   cards. The 980px cap comes off too, so these run the full container width. */
.checklist-1 { grid-template-columns: 1fr; max-width: none; }

/* ---------- Sample-report preview ---------- */

.report-figure { margin: 0; max-width: 760px; }
.report-figure svg { display: block; width: 100%; height: auto; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 18px 14px; }
.section-white .report-figure svg { background: var(--color-bg); }
.report-figure figcaption { margin-top: 10px; color: var(--color-dim); font-size: 0.8125rem; }
.report-link { margin: 18px 0 0; font-weight: 600; }

/* ---------- City planning drivers ---------- */

.drivers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.drivers li { display: grid; gap: 10px; padding: 18px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-input); font-weight: 600; font-size: 0.9375rem; line-height: 1.4; letter-spacing: -0.005em; }
.section-white .drivers li { background: var(--color-bg); }
.driver-index { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

/* ---------- Photo placeholder slots (David's photography drops in here) ---------- */

.photo-slot { display: grid; place-content: center; gap: 6px; text-align: center; aspect-ratio: 16 / 9; max-width: 640px; margin-top: 22px; padding: 20px; background: var(--color-tint); border: 1px dashed rgba(0, 95, 97, 0.45); border-radius: var(--radius); }
.photo-slot-tag { color: var(--color-accent-deep); font-weight: 650; font-size: 0.9375rem; letter-spacing: -0.005em; }
.photo-slot-note { color: var(--color-dim); font-size: 0.8125rem; }

/* ---------- Statute last-reviewed band ---------- */

.review-band { background: var(--color-sand); border-top: 1px solid var(--color-line); }
.review-band p { margin: 0; padding: 14px 0; color: var(--color-muted); font-size: 0.875rem; max-width: 90ch; }

/* ---------- Legal prose pages ---------- */

.legal-prose { max-width: 780px; }
.legal-prose h3 { margin: 34px 0 10px; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.legal-prose p { color: var(--color-muted); max-width: 72ch; }
.legal-prose ul { margin: 0 0 16px; padding-left: 22px; color: var(--color-muted); max-width: 72ch; }
.legal-prose ul li { margin-bottom: 8px; }
.review-flag { display: inline-block; margin: 0 0 8px; padding: 10px 14px; background: var(--color-tint); border: 1px solid rgba(0, 95, 97, 0.3); border-radius: var(--radius-input); color: var(--color-accent-deep); font-size: 0.875rem; font-weight: 600; }

/* ---------- Blog: article pages and the post list ---------- */

.article-wrap { max-width: 720px; }
.article-byline { margin: 0 0 30px; padding-bottom: 18px; border-bottom: 1px solid var(--color-line); color: var(--color-muted); font-size: 0.875rem; font-weight: 600; }
.byline-dot { color: var(--color-accent); padding: 0 4px; }
.article-wrap h2 { margin: 40px 0 14px; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.22; letter-spacing: -0.015em; }
.article-wrap p { margin: 0 0 1.15em; color: var(--color-muted); font-size: 1.0625rem; line-height: 1.7; max-width: 68ch; }
.article-wrap ul { margin: 0 0 1.3em; padding-left: 22px; color: var(--color-muted); font-size: 1.0313rem; line-height: 1.65; }
.article-wrap li { margin: 6px 0; }
.article-wrap li::marker { color: var(--color-accent); }
.post-card h3 { line-height: 1.3; }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a:hover { color: var(--color-accent); }

/* ---------- Property-type grid ---------- */

.typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.typegrid li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-input); }
.section-white .typegrid li { background: var(--color-bg); }
.typegrid .art-glyph { flex: none; width: 52px; height: 52px; }
.typegrid strong { display: block; font-weight: 650; letter-spacing: -0.005em; }
.typegrid p { margin: 4px 0 0; color: var(--color-muted); font-size: 0.9063rem; line-height: 1.5; }

/* ---------- Hero lede blocks (intro + numbered questions + value line) ---------- */

.lede-blocks { max-width: 660px; color: var(--color-muted); font-size: clamp(1.0313rem, 1.5vw, 1.1875rem); line-height: 1.6; }
.lede-blocks p { margin: 0 0 12px; }
.lede-blocks p:last-child { margin: 14px 0 0; }
.lede-blocks ol { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: q; }
.lede-blocks ol li { counter-increment: q; position: relative; margin: 8px 0; padding-left: 34px; color: var(--color-ink); font-weight: 600; letter-spacing: -0.005em; }
.lede-blocks ol li::before { content: counter(q); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; display: grid; place-content: center; border-radius: 999px; background: var(--color-tint); color: var(--color-accent); font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Split real-photo figure ---------- */

.split-figure { margin: 22px 0 0; max-width: 640px; }
.split-figure img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-line); }
.split-figure figcaption { margin-top: 8px; color: var(--color-dim); font-size: 0.8125rem; }

/* ---------- Steps section button + FAQ answer button ---------- */

.steps-cta { margin: 26px 0 0; }
.faq-cta { margin: 0 0 20px; }

/* ---------- Mini tiles (compact who-we-serve teaser) ---------- */

.minitiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.minitile { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 92px; padding: 16px 18px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-input); font-weight: 650; letter-spacing: -0.005em; text-align: center; }
.section-white .minitile { background: var(--color-bg); }
.minitile .art-glyph { flex: none; width: 44px; height: 44px; }
.minitile-button { background: transparent; border: 0; padding: 0; }
.minitile-button .button { width: 100%; min-height: 92px; border-radius: var(--radius-input); font-size: 1.0625rem; }

/* ---------- Article figure and partner band ---------- */

.article-figure { margin: 0 0 30px; }
.article-figure img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-line); }
.partner-band { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 40px; align-items: center; }
.partner-badge img { width: 100%; height: auto; border-radius: var(--radius-input); border: 1px solid var(--color-line); background: #FFFFFF; padding: 12px; }
.badge-slot { display: grid; place-content: center; aspect-ratio: 2 / 1; padding: 18px; text-align: center; background: var(--color-tint); border: 1px dashed rgba(0, 95, 97, 0.45); border-radius: var(--radius-input); color: var(--color-accent-deep); font-size: 0.875rem; font-weight: 600; }
.partner-text h2 { margin: 10px 0 12px; }
.partner-text p { color: var(--color-muted); max-width: 62ch; }

/* ---------- Florida map: a Midnight punctuation band ---------- */

.map-section { position: relative; overflow: hidden; background: var(--color-midnight); }
.map-section::before { content: ""; position: absolute; top: -20%; right: -6%; width: 46%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(250, 70, 22, 0.10), transparent 70%); }
.map-section .container { position: relative; }
.map-section .section-head h2 { color: var(--color-paper); }
/* Eyebrows on dark grounds set in Spark (brand sheet). */
.map-section .eyebrow { color: var(--color-highlight); }
.map-section .section-intro { color: var(--dark-muted); }
.map-section :focus-visible { outline-color: var(--color-shoal); }
.map-stage { display: grid; justify-items: center; margin-top: 8px; }
.map-tilt { width: min(560px, 100%); }
.map-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.3)); }
.map-marker { cursor: pointer; }
.map-dot { fill: var(--color-paper); }
.map-pulse { fill: none; stroke: var(--color-paper); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: map-pulse 3.2s ease-out infinite; }
@keyframes map-pulse { 0% { transform: scale(1); opacity: 0.65; } 75% { transform: scale(2.3); opacity: 0; } 100% { transform: scale(2.3); opacity: 0; } }
.map-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; fill: var(--color-paper); text-anchor: middle; opacity: 0; paint-order: stroke; stroke: rgba(0, 16, 31, 0.9); stroke-width: 3px; transition: opacity 180ms ease; pointer-events: none; }
.map-marker:hover .map-label, .map-marker:focus .map-label { opacity: 1; }
.map-label-base { opacity: 0.75; font-size: 10.5px; }
.map-caption { margin: 20px 0 0; text-align: center; color: var(--dark-dim); font-size: 0.8125rem; max-width: 60ch; }

/* ---------- City scene cards (service-areas hub) ---------- */

.card-art-scene { margin: -4px 0 14px; }
.card-art-scene svg { display: block; width: 100%; height: auto; background: var(--color-tint); border: 1px solid var(--color-line); border-radius: var(--radius-input); padding: 8px 6px 4px; }

/* ---------- Honeypot: hidden from people, present for bots ---------- */

.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer legal links ---------- */

.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; justify-content: space-between; }
.footer-legal-links { display: flex; gap: 18px; }
.footer-legal-links a { color: var(--dark-dim); font-size: 0.75rem; text-decoration: none; }
.footer-legal-links a:hover { color: var(--color-shoal); }

/* ---------- Illustration + component breakpoints ---------- */

@media (max-width: 980px) {
  .card-grid-2, .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .drivers, .typegrid, .minitiles { grid-template-columns: repeat(2, 1fr); }
  .checklist { grid-template-columns: 1fr; }
  .hero-aside-col { max-width: 560px; }
}

@media (max-width: 640px) {
  .card-grid-2, .card-grid-4, .drivers, .typegrid, .minitiles { grid-template-columns: 1fr; }
  .compare-table { min-width: 640px; }
  .photo-slot { aspect-ratio: 4 / 3; }
  /* Full-width buttons that wrap their own label: a name like "Structural
     Integrity Reserve Studies" cannot sit on one line at this width. */
  .button-row { gap: 12px; }
  .button-row .button { width: 100%; white-space: normal; text-align: center; }
}

/* ==========================================================================
   COLOUR PRESENCE PASS (2026-07-31, DJ direction)
   The first light-first pass read washed out: Paper, white, and Mist sit within
   a few percent of each other, so the whole page was one flat surface and the
   brand navy only ever appeared as text. Same structure, same tokens, more of
   the top five doing real work: Deepwater grounds every hero and one band in
   each page rhythm, Harbor takes surface (table heads) instead of only links,
   Spark punctuates edges and eyebrows on dark, Shoal carries the dark grounds.
   Nothing below changes layout.
   ========================================================================== */

/* ---------- Hero: the brand navy, full bleed, on every page ---------- */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--color-ink) 0%, var(--color-midnight) 100%);
  color: var(--color-paper);
}
/* The one Spark wash this surface is allowed. */
.hero::before {
  content: ""; position: absolute; top: -32%; right: -8%; width: 54%; aspect-ratio: 1;
  pointer-events: none; background: radial-gradient(circle, rgba(250, 70, 22, 0.16), transparent 70%);
}
.hero > * { position: relative; }
.hero .eyebrow { color: var(--color-highlight); }
.hero h1 { color: var(--color-paper); }
.hero .lede, .hero .lede-blocks { color: var(--dark-muted); }
.hero .lede-blocks ol li { color: var(--color-paper); }
.hero .lede-blocks ol li::before { background: rgba(242, 246, 247, 0.10); color: var(--color-shoal); }
.hero .breadcrumbs { color: var(--dark-dim); }
.hero .breadcrumbs a:hover { color: var(--color-shoal); }
.hero .button-ghost { color: var(--color-paper); border-color: rgba(242, 246, 247, 0.42); background: transparent; }
.hero .scene-figure figcaption { color: var(--dark-dim); }
.hero :focus-visible { outline-color: var(--color-shoal); }
@media (hover: hover) and (pointer: fine) {
  .hero .button-ghost:hover { color: var(--color-paper); border-color: var(--color-paper); }
}

/* ---------- Trust strip: a Spark edge under the hero ---------- */

.stats { border-top: 3px solid var(--color-highlight); }

/* ---------- Dark section bands: Deepwater, one per page rhythm ---------- */

.section-dark { position: relative; overflow: hidden; background: var(--color-ink); color: var(--color-paper); }
.section-dark::before {
  content: ""; position: absolute; top: -28%; left: -6%; width: 46%; aspect-ratio: 1;
  pointer-events: none; background: radial-gradient(circle, rgba(250, 70, 22, 0.12), transparent 70%);
}
.section-dark .container { position: relative; }
.section-dark h2, .section-dark h3, .section-dark summary, .section-dark strong { color: var(--color-paper); }
.section-dark .eyebrow { color: var(--color-highlight); }
.section-dark p, .section-dark .section-intro, .section-dark li { color: var(--dark-muted); }
.section-dark a { color: var(--color-shoal); }
.section-dark .table-note, .section-dark figcaption { color: var(--dark-dim); }
.section-dark :focus-visible { outline-color: var(--color-shoal); }

/* Surfaces inside a dark band use the brand sheet's dark glass: 6% Paper tint,
   20% rim. Light figures (charts, report previews) stay light cards on purpose. */
.section-dark .card,
.section-dark .step,
.section-dark .checklist li,
.section-dark .typegrid li,
.section-dark .minitile,
.section-dark .drivers li,
.section-dark .faq details,
.section-dark .table-wrap,
.section-dark .aside,
.section-dark .form-note,
.section-dark .team-card {
  background: rgba(242, 246, 247, 0.06);
  border-color: rgba(242, 246, 247, 0.20);
}
.section-dark .faq details[open] { border-color: rgba(153, 217, 217, 0.45); }
/* Answers readable on the dark band (David, 2026-09-09): the base .faq details
   rules set the light-surface muted ink, which the dark surface must override. */
.section-dark .faq details p, .section-dark .faq details ol, .section-dark .faq details ul { color: var(--dark-muted); }
.section-dark .card-number,
.section-dark .driver-index,
.section-dark .credential,
.section-dark .step::before,
.section-dark li::marker { color: var(--color-shoal); }
.section-dark .compare-table thead th { background: rgba(242, 246, 247, 0.09); color: var(--color-paper); }
.section-dark .compare-table th, .section-dark .compare-table td { border-bottom-color: rgba(242, 246, 247, 0.16); }
.section-dark .compare-table td { color: var(--dark-muted); }
.section-dark .compare-table th.row-lead { color: var(--color-shoal); background: transparent; }
.section-dark .button-ghost { color: var(--color-paper); border-color: rgba(242, 246, 247, 0.42); background: transparent; }
.section-dark .portrait-placeholder, .section-dark .photo-slot, .section-dark .badge-slot {
  background: rgba(242, 246, 247, 0.06); border-color: rgba(153, 217, 217, 0.45); color: var(--color-shoal);
}
.section-dark .photo-slot-tag { color: var(--color-shoal); }
.section-dark .photo-slot-note { color: var(--dark-dim); }
.section-dark .review-flag { background: rgba(250, 70, 22, 0.14); border-color: rgba(250, 70, 22, 0.42); color: var(--color-paper); }
.section-dark .form-field label { color: var(--color-paper); }
.section-dark .form-field input, .section-dark .form-field select, .section-dark .form-field textarea {
  background: rgba(242, 246, 247, 0.06); border-color: rgba(242, 246, 247, 0.24); color: var(--color-paper);
}
.section-dark .form-field ::placeholder { color: var(--dark-dim); }
.section-dark .form-status { color: var(--color-shoal); }
@media (hover: hover) and (pointer: fine) {
  .section-dark .card:hover { border-color: rgba(153, 217, 217, 0.5); }
  .section-dark .button-ghost:hover { color: var(--color-paper); border-color: var(--color-paper); }
}

/* ---------- The aside: a navy card, not a whisper ---------- */

.aside, .section-sand .aside { background: var(--color-ink); border-color: var(--color-ink); color: var(--dark-muted); }
.aside h3 { color: var(--color-paper); }
.aside p { color: var(--dark-muted); }
.aside a { color: var(--color-shoal); }
.aside :focus-visible { outline-color: var(--color-shoal); }

/* ---------- Comparison tables: a Deepwater head row ---------- */

.compare-table thead th { background: var(--color-ink); color: var(--color-paper); }
.compare-table thead th.row-lead { background: var(--color-ink); color: var(--color-shoal); }

/* ---------- Process steps: a Harbor edge so the rail reads as a sequence ---------- */

.step { border-top: 3px solid var(--color-accent); }
.section-dark .step { border-top-color: var(--color-shoal); }

/* ---------- Statute band: Harbor edge instead of a hairline ---------- */

.review-band { border-top: 2px solid var(--color-accent); }

/* ---------- Every section head opens with a Spark rule ----------
   Spark as a graphic, never as type, so it reads on light and dark alike. It is
   what carries the accent through the long light stretches between dark bands. */

.section-head::before {
  content: ""; display: block; width: 44px; height: 3px; margin: 0 0 18px;
  border-radius: 2px; background: var(--color-highlight);
}