/* Doulos Impact Group: shared styles
   Layout idea: a warm letter on a kitchen table. Ivory paper, navy ink, gold
   only where hope shows up. Wide calm bands, one column of reading text.

   Brand colors come from the Brand Bible. They were matched by eye, so every
   color lives here as a variable: swap the hex once the logo file arrives. */
:root {
  /* Colors measured from Doulos Logo V2 (Oct 20, 2026). Brand Bible eyeballed
     values were navy #0B315C, teal #527F80, gold #C99A3A. */
  --navy: #072549;          /* Doulos Navy: trust, headers, buttons */
  --teal: #507C7D;          /* Compassion Teal: calm sections, Freddy accents */
  --teal-ink: #3D6566;      /* darker teal for text so it passes WCAG AA */
  --gold: #BD9545;          /* Legacy Gold: hope moments, used sparingly */
  --ivory: #F7F4EE;         /* Warm Ivory: page background */
  --slate: #354354;         /* body text */
  --sky: #E3EEF3;           /* soft sky blue, Freddy path */
  --paper: #FFFDF9;         /* cards and forms */
  --line: #DCD5C8;          /* hairlines, warm grey toward the ivory */
  --mist: #EEF3F1;          /* soft teal tint for calm bands */

  /* [OPEN ITEM: FONTS] */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --step--1: 0.9rem;
  --step-0: 1.125rem;       /* 18px body */
  --step-1: 1.35rem;
  --step-2: 1.7rem;
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);

  --radius: 10px;
  --measure: 38rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));

  /* path accents, overridden per section of the site */
  --accent: var(--gold);
  --accent-ink: var(--navy);
  --band: var(--mist);
  color-scheme: light;
}
/* Freddy path: teal, soft sky blue and ivory, navy as the link back to Doulos */
body.freddy { --accent: var(--teal); --accent-ink: var(--teal-ink); --band: var(--sky); }
/* Paula path: shared palette, softer emphasis. [OPEN ITEM: PAULA COLORS] */
body.paula { --accent: var(--gold); --accent-ink: var(--teal-ink); --band: #F1ECE2; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); /* room for the mobile bar */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.15;
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p, ul, ol { margin: 0; }
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
strong { color: var(--navy); }

.wrap {
  max-width: 72rem;
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.prose { max-width: var(--measure); display: grid; gap: 1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.center { text-align: center; margin-inline: auto; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--navy); color: var(--paper); padding: 0.75rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: calc(env(safe-area-inset-top, 0px) + 1rem); }

/* Draft markers stay visible on purpose until every item is resolved */
.todo {
  display: inline-block;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  background: #FFF4D6;
  color: #5A4300;
  border: 1px dashed #B88A1E;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
}
.draft-banner {
  background: #FFF4D6; color: #5A4300; border-bottom: 1px dashed #B88A1E;
  font-size: var(--step--1); padding-block: 0.6rem;
}

/* Header */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 10; background: var(--paper);
}
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding-block: 0.75rem;
}
.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.logo-mark { width: auto; height: 48px; flex: none; }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--navy); line-height: 1.1; }
.logo-text span { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-ink); }
.menu-toggle {
  font: inherit; font-weight: 600; color: var(--navy);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 44px; padding: 0 1rem; cursor: pointer;
}
.site-nav { flex-basis: 100%; }
.site-nav ul { list-style: none; padding: 0; display: grid; gap: 0.25rem; }
.site-nav a {
  display: flex; align-items: center; min-height: 44px; padding-inline: 0.5rem;
  text-decoration: none; font-weight: 600; color: var(--slate);
}
.site-nav a[aria-current="page"] { color: var(--navy); box-shadow: inset 3px 0 0 var(--gold); }
.js .site-nav { display: none; }
.js .site-nav.open { display: block; }
.header-cta { display: flex; align-items: center; gap: 0.9rem; order: 2; }
.header-cta .btn { display: none; }
.header-phone { font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; }
/* On small phones the sticky Call / Text bar carries the number */
@media (max-width: 440px) { .header-phone { display: none; } }
.menu-toggle { order: 3; }
.site-nav { order: 4; }
@media (min-width: 960px) {
  .menu-toggle { display: none; }
  .js .site-nav, .site-nav { display: block; flex-basis: 100%; border-top: 1px solid var(--line); }
  .site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
  .site-nav a { font-size: 1rem; padding-inline: 0.55rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold); }
  .header-cta .btn { display: inline-flex; }
  .header-cta { order: 2; }
  .site-nav { order: 3; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.6rem 1.4rem;
  border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 700; text-decoration: none; text-align: center; line-height: 1.2;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--navy); color: var(--paper); }
.btn-primary:hover { background: #051B37; }
.btn-secondary { background: var(--paper); color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--mist); }
.btn-gold { background: var(--gold); color: #1E1A10; }
.btn-gold:hover { background: #B88A2E; }
.btn-small { min-height: 44px; padding: 0.45rem 1.1rem; font-size: 0.95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Sections */
.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section > .wrap { display: grid; gap: 1.75rem; }
.band { background: var(--band); }
.band-navy { background: var(--navy); color: #E8EDF3; }
.band-navy h2, .band-navy h3, .band-navy strong { color: #fff; }
.band-navy a:not(.btn) { color: #fff; }
.eyebrow {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink);
}
.band-navy .eyebrow { color: var(--gold); }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: var(--measure); }

/* Hero */
.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); background: var(--paper); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.hero-copy { display: grid; gap: 1.25rem; min-width: 0; }
.hero .call-line { font-size: var(--step--1); }
.hero .call-line a { font-weight: 700; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.25fr 1fr; gap: 3rem; } }

/* Photo placeholders: replace with real, warm photos of Tom, the team and homes */
.photo {
  aspect-ratio: 4 / 3; max-width: 100%;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(201,154,58,.35), transparent 60%),
    linear-gradient(160deg, var(--mist), #D9E4E2 55%, #C8D6D3);
  display: grid; place-items: end start; padding: 1rem;
  border: 1px solid var(--line);
}
.photo .todo { max-width: 100%; white-space: normal; }
img.photo-img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(7,37,73,.10);
}
img.photo-img.landscape { aspect-ratio: 4 / 3; object-position: 50% 40%; }
.photo-portrait { aspect-ratio: 4 / 5; }

/* Path picker */
.paths { display: grid; gap: 1rem; }
@media (min-width: 800px) { .paths { grid-template-columns: repeat(3, 1fr); } }
.path-card {
  display: grid; gap: 0.75rem; align-content: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; text-decoration: none; color: var(--slate);
  border-top: 5px solid var(--accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.path-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(11,49,92,.10); }
.path-card.freddy { border-top-color: var(--teal); }
.path-card.paula { border-top-color: var(--gold); }
.path-card.house { border-top-color: var(--navy); }
.path-card .quote { font-family: var(--font-display); font-size: var(--step-1); color: var(--navy); line-height: 1.3; }
.path-card .go { font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* Lists of promises, steps and options */
.promises { list-style: none; padding: 0; display: grid; gap: 1rem; counter-reset: p; }
@media (min-width: 800px) { .promises { grid-template-columns: repeat(3, 1fr); } }
.promises li {
  counter-increment: p; background: var(--paper); border-radius: var(--radius);
  padding: 1.5rem; display: block; border: 1px solid var(--line); color: var(--slate);
}
.promises li::before {
  content: "Promise " counter(p); display: block; margin-bottom: 0.5rem; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-ink);
}
.band-navy .promises li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #E8EDF3; }
.band-navy .promises li::before { color: var(--gold); }

.steps { list-style: none; padding: 0; display: grid; gap: 1rem; counter-reset: s; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: s; display: grid; gap: 0.4rem; align-content: start; }
.steps li::before {
  content: counter(s); width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: var(--paper);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.steps h3 { font-size: 1.15rem; }

.cards { display: grid; gap: 1rem; }
@media (min-width: 760px) { .cards.two { grid-template-columns: repeat(2, 1fr); } .cards.three { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; display: grid; gap: 0.6rem; align-content: start; min-width: 0;
}
.card .label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-ink); }
.card.on-navy { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #E8EDF3; }
.card.first { border: 2px solid var(--teal); }

/* "They say / they need to hear" pairs */
.feelings { display: grid; gap: 0.75rem; }
.feeling { display: grid; gap: 0.25rem; padding: 1rem 1.25rem; background: var(--paper); border-radius: var(--radius); border: 1px solid var(--line); }
@media (min-width: 760px) { .feeling { grid-template-columns: 1fr 1.3fr; gap: 1.5rem; align-items: center; } }
.feeling .say { font-style: italic; color: var(--slate); }
.feeling .hear { font-weight: 600; color: var(--navy); }

/* Stories */
.story { display: grid; gap: 0.75rem; }
.story .where { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-ink); }
.story blockquote { margin: 0; font-family: var(--font-display); font-size: var(--step-1); color: var(--navy); line-height: 1.35; }

/* Metrics: real numbers only, from the Brand Bible */
.metrics { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 800px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metrics li { display: grid; gap: 0.2rem; border-top: 2px solid var(--gold); padding-top: 0.75rem; }
.metrics .num { font-family: var(--font-display); font-size: var(--step-3); color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.band-navy .metrics .num { color: #fff; }

/* Tom's signed note */
.note {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem); max-width: 44rem; display: grid; gap: 1rem;
  box-shadow: 0 1px 0 var(--line), 0 12px 30px rgba(53,67,84,.06);
}
.signature { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--navy); }

.callout {
  border-left: 4px solid var(--gold); padding: 0.25rem 0 0.25rem 1.25rem;
  font-family: var(--font-display); font-size: var(--step-1); color: var(--navy); line-height: 1.4;
  max-width: var(--measure);
}
.urgency { border-left-color: var(--teal); }

/* Compare table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
table.compare { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 1rem; }
.compare th, .compare td { padding: 0.9rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 600; }
.compare tbody th { color: var(--navy); width: 9rem; }
.compare tr:last-child > * { border-bottom: 0; }
.compare td.hl, .compare th.hl { background: rgba(201,154,58,.12); }
.compare thead th.hl { background: #23476F; }

/* Priority selector */
.priorities { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.priorities button {
  font: inherit; font-weight: 600; min-height: 44px; padding: 0.4rem 1.1rem;
  border-radius: 999px; border: 2px solid var(--navy); background: var(--paper); color: var(--navy); cursor: pointer;
}
.priorities button[aria-pressed="true"] { background: var(--navy); color: var(--paper); }
.priority-answer { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; max-width: var(--measure); }

/* FAQ accordion (works as plain <details> without JavaScript) */
.faq-group { display: grid; gap: 0.6rem; }
.faq-group h2 { font-size: var(--step-2); margin-top: 1rem; }
details.faq { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
details.faq summary {
  cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.25rem; min-height: 44px;
  font-weight: 700; color: var(--navy); position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--teal-ink); line-height: 1;
}
details.faq[open] summary::after { content: "\2212"; }
details.faq .answer { padding: 0 1.25rem 1.25rem; display: grid; gap: 0.75rem; max-width: 44rem; }

/* Contact form */
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }
form.doulos-form {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 2vw, 2rem); display: grid; gap: 1.25rem; min-width: 0;
}
.field { display: grid; gap: 0.35rem; }
.field label, fieldset legend { font-weight: 700; color: var(--navy); }
.field .hint { font-size: var(--step--1); }
input[type="text"], input[type="tel"], input[type="email"], textarea, select {
  font: inherit; color: var(--slate); background: #fff;
  border: 1.5px solid #9AA6B2; border-radius: 8px; min-height: 48px; padding: 0.6rem 0.8rem; width: 100%;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--navy); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.choice { display: flex; gap: 0.6rem; align-items: flex-start; min-height: 44px; padding-block: 0.3rem; }
.choice input { width: 1.3rem; height: 1.3rem; margin-top: 0.25rem; flex: none; accent-color: var(--navy); }
.consent { background: var(--mist); border-radius: 8px; padding: 1rem; font-size: 0.95rem; }
.error { color: #9B1C1C; font-weight: 600; font-size: 0.95rem; }
[aria-invalid="true"] { border-color: #9B1C1C !important; }
.form-status { padding: 1rem; border-radius: 8px; background: var(--mist); font-weight: 600; color: var(--navy); }
.form-legal { font-size: var(--step--1); }

/* Legal pages */
.legal .prose h2 { font-size: var(--step-2); margin-top: 1.25rem; }
.legal .prose h3 { margin-top: 0.5rem; }

/* Footer */
.site-footer { background: var(--navy); color: #D5DEE8; padding-block: 3rem 1.5rem; font-size: 1rem; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-tagline { font-family: var(--font-display); font-size: var(--step-2); color: #fff; line-height: 1.2; margin-bottom: 0.5rem; }
.footer-head { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.footer-nav ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1rem 1rem; }
.footer-nav a { display: inline-flex; min-height: 36px; align-items: center; }
.footer-contact p + p { margin-top: 0.75rem; }
.footer-legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18); font-size: 0.9rem; display: grid; gap: 0.5rem; }

/* Mobile Call / Text bar */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  padding: 0.6rem var(--gutter-r) calc(0.6rem + env(safe-area-inset-bottom, 0px)) var(--gutter);
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(11,49,92,.08);
}
@media (min-width: 900px) { .mobile-bar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
[id] { scroll-margin-top: 140px; }

/* Guide tables */
table.guide-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 1rem; }
table.guide-table th, table.guide-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.guide-table th { background: var(--navy); color: #fff; font-weight: 600; }
table.guide-table td:last-child[style*="right"], table.guide-table th[style*="right"] { text-align: right; }
.prose .table-wrap { margin-block: 1rem 1.25rem; }

/* Two-step contact form (only split when JavaScript runs) */
.form-progress, [data-next-step], [data-prev-step] { display: none; }
.js .form-progress { display: block; font-weight: 700; color: var(--teal-ink); margin: 0; }
.js [data-next-step] { display: inline-flex; justify-self: start; }
.js [data-prev-step] { display: inline; }
.form-step { display: grid; gap: 1.1rem; }
.form-step[hidden] { display: none; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--teal-ink); text-decoration: underline; cursor: pointer; justify-self: start; }

/* Free-guide checklists */
.checklist { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.checklist li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.checklist label { flex: 1 1 14rem; font-weight: 600; color: var(--navy); }
.checklist input, .step-done input { width: 1.35rem; height: 1.35rem; accent-color: var(--teal-ink); flex: none; }
.checklist input:checked + label { text-decoration: line-through; color: var(--teal-ink); }
.checklist-jump { font-size: var(--step--1); }
.checklist-progress { display: none; }
.js .checklist-progress { display: block; font-weight: 700; color: var(--teal-ink); }
.step-done { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0.6rem 0.9rem; border: 1px dashed var(--line); border-radius: 8px; font-weight: 600; }
.band-navy .step-done { border-color: rgba(255,255,255,.3); }

/* "Next step" pointer at the end of a page */
.next-step { padding-block: 1.5rem 2.5rem; }
.next-step a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.25rem 1rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; color: var(--navy); max-width: 40rem; }
.next-step a:hover, .next-step a:focus-visible { border-color: var(--teal); }
.next-label { grid-column: 1; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--teal-ink); font-weight: 700; }
.next-title { grid-column: 1; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.next-arrow { grid-column: 2; grid-row: 1 / span 2; font-size: 1.6rem; color: var(--gold); }

/* "Step 1 of 4" above each numbered step */
.steps h3::before { content: "Step " counter(s) " of 4"; display: block; font-family: var(--font-body, inherit); font-size: var(--step--1); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 0.15rem; }

/* Thank-you message after the lead form sends */
.form-thanks { display: grid; gap: 0.6rem; }
.form-thanks h2 { margin: 0; }