/* ============================================================
   Fourth Avenue Medical Billing — fourthavenuebilling.com
   Editorial layout system. White-dominant, hairline structure,
   serif display type against a restrained sans.

   COLOUR IS LOCKED. Every colour below is the existing approved
   value and must not be changed, re-mixed or re-assigned:
     navy #153b53 · blue #398bae · blue-ink #2c7396
     aqua #50a0d0 · aqua-soft #a8d2ea
     white #ffffff · ice #f3f9fc
     line #e4eef4 · line-strong #cfe0ea
     muted #4e6879 · muted-dim #5c7586
   ============================================================ */

/* ---------- 0. Display typeface ---------- */
/* Playfair Display, self-hosted from this site (no CDN, no cookies, no
   third-party request). SIL Open Font License 1.1 — see fonts/OFL.txt.
   Variable weight 400–900, latin subset, ~38 KB per style. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/playfair-display-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette — approved values, do not edit */
  --navy:        #153b53;
  --blue:        #398bae;
  --blue-ink:    #2c7396;
  --aqua:        #50a0d0;
  --aqua-soft:   #a8d2ea;

  --white:       #ffffff;
  --ice:         #f3f9fc;

  --line:        #e4eef4;
  --line-strong: #cfe0ea;

  --muted:       #4e6879;
  --muted-dim:   #5c7586;

  /* Type */
  --font-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
                Palatino, Georgia, "Times New Roman", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
                "Liberation Mono", monospace;

  /* Measure and rhythm */
  --shell: 1160px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(3.75rem, 7vw, 6.75rem);
  --hair: 1px solid var(--line);
  --hair-strong: 1px solid var(--line-strong);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Clears the sticky header — 10px padding + 72px logo + 10px padding + 1px
     border is 93px — plus a 27px breathing gap, so an anchor target (the
     consultation heading and its field labels in particular) never sits flush
     against or under the header. Kept in step with the logo height at each
     breakpoint below. */
  scroll-padding-top: 7.5rem;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; font-weight: 600; }

/* Selective italic emphasis inside a display line: the page's existing blue
   accent, used only at large sizes where it clears AA (3.83:1 on white,
   3.61:1 on ice, against a 3:1 threshold for large text). */
.accent {
  font-style: italic;
  color: var(--blue);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--ice {
  background: var(--ice);
  border-block: var(--hair);
  /* The pale bands open on a soft aqua hairline — the wave colour from the
     logo marking the change of ground, rather than a hard grey rule. */
  border-top-color: var(--aqua-soft);
}

/* ---------- 4. Type ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
/* A short aqua tick under every section label: the same mark each time, so the
   page has a rhythm instead of six unrelated headings. A rule, not a graphic. */
.eyebrow::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 0.4375rem;
  background: var(--aqua);
}

/* The rules that open a section, a list or the footer begin with a soft aqua
   segment. Same hairline weight, one intentional detail at the transition. */
.section-head,
.service-list,
.faq__list,
.site-footer { position: relative; }

.section-head::before,
.service-list::before,
.faq__list::before,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--aqua-soft);
}
.section-head::before { bottom: -1px; }
.service-list::before,
.faq__list::before,
.site-footer::before { top: -1px; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: end;
  gap: 1rem clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.75rem);
  border-bottom: var(--hair-strong);
}
.section-head .eyebrow { grid-column: 1; }
.section-head .section-title { grid-column: 1; }
.section-head .section-lede { grid-column: 2; }

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.25vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--navy);
  text-wrap: balance;
}

.section-lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 34ch;
}

.text-link {
  color: var(--blue-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: border-color 160ms ease, color 160ms ease;
}
.text-link:hover { color: var(--navy); border-bottom-color: var(--blue); }

/* ---------- 5. Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.25rem;
  border: var(--hair-strong);
  border-radius: 2px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.button svg { width: 14px; height: 14px; flex: none; }
.button:hover { background: var(--ice); border-color: var(--blue); }

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Opaque, not 96% white: content scrolling beneath a translucent header
     showed through as a faint duplicate of the heading, which reads as an
     overlap even when the anchor offset is correct. */
  background: var(--white);
  border-bottom: var(--hair);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.625rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--navy);
  flex: none;
}

.site-header .wordmark__logo {
  height: 72px;
  width: auto;
  display: block;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.nav__list a {
  font-size: 0.8125rem;
  letter-spacing: 0.045em;
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.nav__list a:hover { color: var(--navy); border-bottom-color: var(--blue); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 160ms ease;
}
.nav__cta svg { width: 13px; height: 13px; flex: none; }
.nav__cta:hover { border-bottom-color: var(--blue); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars i {
  display: block;
  width: 14px;
  height: 1px;
  background: currentColor;
}

/* ---------- 7. Hero ---------- */
.hero { padding-block: clamp(2.5rem, 5.5vw, 5rem) clamp(2.5rem, 6vw, 5.5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.hero__copy { max-width: 35rem; }

.hero__title {
  margin-top: 1.125rem;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6.1vw, 4.375rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.024em;
  color: var(--navy);
  text-wrap: balance;
}

/* Playfair's italic sits high in the line box; a touch of room keeps
   descenders and swashes clear of the paragraph beneath. */
.hero__title .accent { display: inline-block; padding-bottom: 0.06em; }

.hero__lead {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  max-width: 28ch;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.6;
  color: var(--muted);
}

.hero__actions {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.hero__meta {
  font-size: 0.8125rem;
  color: var(--muted-dim);
}

/* Editorial figure — a hairline data composition, not a card */
.hero__figure {
  margin: clamp(0.5rem, 1.5vw, 2rem) 0 0;
  padding-top: 1rem;
  border-top: var(--hair-strong);
}

.figure__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.figure__label { color: var(--blue-ink); }

.aging {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
}

.aging__row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 4.75rem;
  align-items: center;
  gap: 0.875rem;
}
.aging__bucket {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--navy);
}
.aging__track {
  position: relative;
  height: 7px;
  background: var(--ice);
  border-bottom: 1px solid var(--line-strong);
}
.aging__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--size, 50%);
  background: var(--aqua-soft);
}
.aging__bar--thin { background: var(--aqua); }
.aging__note {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--muted-dim);
  text-align: right;
}

.figure__foot {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 0.875rem;
  border-top: var(--hair);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 42ch;
}

/* ---------- 8. Process ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
.step {
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  border-left: var(--hair-strong);
}
.step:first-child { padding-left: 0; border-left: 0; }
.step:last-child { padding-right: 0; }

.step__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1;
  color: var(--blue);
}
.step__title {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy);
  text-wrap: balance;
}
.step__body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 9. Services ---------- */
.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.services__aside {
  position: sticky;
  top: 6.5rem;
}
.services__aside .section-title { margin-top: 1rem; }
.services__intro {
  margin-top: 1.25rem;
  max-width: 26ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

.service-list { border-top: var(--hair-strong); }

.service {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: var(--hair);
}
.service__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--blue);
  padding-top: 0.35rem;
}
.service__title {
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy);
  text-wrap: balance;
}
.service__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 10. About ---------- */
/* Two columns divided by a single aqua hairline, then four commitments under a
   thin rule. No cards, no fills: the division is one line of type and one rule. */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 0;
  align-items: start;
}

.about__intro { padding-right: clamp(1.75rem, 4vw, 3.5rem); }

.about__title {
  margin-top: 1.25rem;
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 3.6vw, 3.375rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-wrap: balance;
}

.about__lede {
  margin-top: 1.375rem;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

.about__statement {
  padding-left: clamp(1.75rem, 4vw, 3.5rem);
  border-left: 1px solid var(--aqua);
}

.about__quote {
  max-width: 32ch;
  font-family: var(--font-serif);
  font-size: clamp(1.4375rem, 2.1vw, 1.9375rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--navy);
  text-wrap: pretty;
}

.about__signature { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.about__signature-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
}
.about__signature-role {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.about__commitments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: var(--hair-strong);
}
.about__commitments li {
  display: flex;
  align-items: flex-start;
  gap: 0.6875rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--navy);
}
.about__commitments svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 0.3125rem;
  color: var(--blue);
}

/* ---------- 11. FAQ ---------- */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq__aside .section-title { margin-top: 1rem; }
.faq__aside-note {
  margin-top: 1.25rem;
  max-width: 24ch;
  font-size: 0.9375rem;
  color: var(--muted);
}

.faq__list { border-top: var(--hair-strong); }

.faq__item { border-bottom: var(--hair); }
.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.125rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy);
  transition: color 160ms ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1;
  color: var(--blue);
  flex: none;
  transition: color 160ms ease;
}
.faq__item[open] summary::after { content: "–"; color: var(--aqua); }
.faq__item summary:hover { color: var(--blue-ink); }

.faq__answer {
  padding: 0 2.5rem 1.375rem 0;
  max-width: 58ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- 12. Consultation ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}

.contact__intro { max-width: 26rem; }
.contact__intro .section-title { margin-top: 1rem; }
.contact__note {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.phi-notice {
  margin-top: 1.75rem;
  padding: 0.75rem 0 0.75rem clamp(0.875rem, 1.5vw, 1.125rem);
  border-left: 2px solid var(--aqua);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
}
.phi-notice strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}

.form-card {
  background: var(--white);
  border: var(--hair-strong);
  border-radius: 3px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.form-card__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy);
}
.form-card__hint {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted-dim);
}

.form { margin-top: 1.5rem; display: grid; gap: 1rem; }

/* Honeypot: present in the DOM for spam filters, invisible to people and to
   screen readers. Layout properties only — no colour is assigned here. */
.form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.field { display: grid; gap: 0.375rem; }
.field label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--navy);
}
.field label .optional { font-weight: 400; color: var(--muted-dim); }

.field input,
.field select {
  width: 100%;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.6875rem 0.75rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input::placeholder { color: var(--muted-dim); }
.field input:hover,
.field select:hover { border-color: var(--blue); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(57, 139, 174, 0.16);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #b2472f;
  background: #fdf7f7;
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 1.175rem, calc(100% - 0.7rem) 1.175rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.field__error { font-size: 0.75rem; color: #a8412b; }
.field__error:empty { display: none; }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.25rem;
}
.form__reassurance { font-size: 0.75rem; color: var(--muted-dim); }

.form-status {
  margin-top: 0.25rem;
  padding: 1rem 1.125rem;
  border: var(--hair-strong);
  border-radius: 2px;
  background: var(--ice);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--navy);
}
.form-status strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.form-status a { color: var(--blue-ink); }

/* ---------- 13. Footer ---------- */
.site-footer {
  background: var(--white);
  border-top: var(--hair-strong);
  color: var(--muted);
  font-size: 0.875rem;
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 0.9fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.site-footer .wordmark__logo {
  width: clamp(168px, 19vw, 220px);
  max-width: 100%;
  height: auto;
  display: block;
}
.site-footer__blurb {
  margin-top: 1rem;
  max-width: 30ch;
  line-height: 1.6;
}
.site-footer h3 {
  margin-bottom: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.site-footer li + li { margin-top: 0.4375rem; }
.site-footer a {
  color: var(--navy);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.site-footer a:hover { border-bottom-color: var(--line-strong); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.125rem 1.5rem;
  border-top: var(--hair);
  font-size: 0.75rem;
  color: var(--muted-dim);
}
.site-footer__bottom p { max-width: 62ch; }

/* ---------- 14. Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1024px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .section-head .section-lede { grid-column: 1; }
  .services__grid,
  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .services__aside { position: static; }
  .about__title { font-size: clamp(1.875rem, 3.9vw, 2.5rem); }
  .about__quote { font-size: clamp(1.25rem, 2.3vw, 1.5rem); }
}

@media (max-width: 900px) {
  /* Header is 79px here (58px logo + 20px padding + 1px border). */
  html { scroll-padding-top: 6.5rem; }
  .site-header .wordmark__logo { height: 58px; }

  .nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
  }
  .nav__list { flex-wrap: wrap; gap: 0.75rem 1.25rem; }

  html.js .site-header__inner { flex-wrap: wrap; }
  html.js .nav-toggle { display: inline-flex; }
  html.js .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem var(--gutter) 1.25rem;
    background: var(--white);
    border-bottom: var(--hair-strong);
  }
  html.js .nav[data-open="true"] { display: flex; }
  html.js .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  html.js .nav__list li { border-bottom: var(--hair); }
  html.js .nav__list a { display: block; padding: 0.875rem 0; font-size: 0.9375rem; }
  html.js .nav__cta { margin-top: 1rem; align-self: flex-start; }

  .hero__grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .hero__copy { max-width: 34rem; }
  .hero__figure { margin-top: 0; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .step { padding: 1.5rem 1.25rem 0 0; }
  .step:nth-child(odd) { padding-left: 0; border-left: 0; }
  .step:nth-child(even) { padding-right: 0; }
  .step:nth-child(n + 3) { border-top: var(--hair); margin-top: 1.5rem; }

  .services__grid,
  .faq__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .services__intro,
  .faq__aside-note,
  .contact__intro { max-width: 38rem; }

  .about__grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 2.75rem); }
  .about__intro { padding-right: 0; }
  /* The dividing line turns horizontal when the columns stack. */
  .about__statement {
    padding-left: 0;
    padding-top: clamp(1.75rem, 5vw, 2.5rem);
    border-left: 0;
    border-top: 1px solid var(--aqua);
  }
  .about__quote { max-width: 40ch; }

  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  :root { --section-y: clamp(2.75rem, 9vw, 4rem); }

  /* Header is 73px here (48px logo + 24px padding + 1px border), giving the
     lockup 12px of air above and below instead of sitting on the header edge. */
  html { scroll-padding-top: 6.25rem; }
  .site-header__inner { padding-block: 0.75rem; }
  .site-header .wordmark__logo { height: 48px; }
  .nav-toggle { padding: 0.4375rem 0.75rem; font-size: 0.6875rem; }

  /* Tightened so the hero ends well inside the first screen, with the next
     section already peeking in. */
  .hero { padding-block: 1.375rem 2rem; }
  .hero__title { font-size: clamp(2.125rem, 9.4vw, 2.75rem); margin-top: 0.75rem; }
  .hero__lead { margin-top: 0.875rem; font-size: 0.9375rem; max-width: 32ch; }
  .hero__actions { margin-top: 1.25rem; gap: 0.625rem 1rem; }
  .hero__actions .button { width: 100%; }
  .hero__meta { font-size: 0.75rem; }

  .hero__figure { padding-top: 0.75rem; }
  .figure__head { font-size: 0.625rem; }
  .aging { margin-top: 1rem; gap: 0.5rem; }
  .aging__row { grid-template-columns: 2.5rem minmax(0, 1fr) 4rem; gap: 0.5rem; }
  .aging__track { height: 5px; }
  .aging__bucket, .aging__note { font-size: 0.6875rem; }
  .figure__foot { margin-top: 1rem; padding-top: 0.625rem; font-size: 0.6875rem; }

  .steps { grid-template-columns: 1fr; }
  .step,
  .step:nth-child(odd),
  .step:nth-child(even) {
    padding: 1.125rem 0;
    border-left: 0;
    border-top: var(--hair);
    margin-top: 0;
  }
  .step:first-child { border-top: 0; padding-top: 0; }
  .step__num { font-size: 1.25rem; }
  .step__title { margin-top: 0.375rem; font-size: 1.0625rem; }

  .service {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    padding-block: 1.125rem;
  }
  .service__title { font-size: 1.0625rem; }
  .service__body { grid-column: 2; margin-top: 0.1875rem; font-size: 0.875rem; }

  .about__lede { font-size: 0.9375rem; }
  .about__commitments { grid-template-columns: 1fr; gap: 0.875rem; }

  .faq__item summary { font-size: 1rem; padding-block: 1rem; gap: 1rem; }
  .faq__answer { padding-right: 1rem; font-size: 0.875rem; }

  .form-card { padding: 1.125rem; }
  .field-row { grid-template-columns: 1fr; }
  .form__actions .button { width: 100%; }

  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom { font-size: 0.6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- 16. Print ---------- */
@media print {
  .site-header, .nav-toggle, .button, .hero__figure, .form-card { display: none; }
  body { background: #fff; }
  .section { padding-block: 1.25rem; }
}