/* =========================================================
   Passionate Florida Care — Design Tokens
   Source of truth: docs/design-tokens.md
   ========================================================= */

:root {
  /* COLOR — docs/design-tokens.md §1 */
  --color-plum: #402E52;
  --color-plum-deep: #34253F; /* primary button hover */
  --color-purple: #6E4F87;
  --color-lavender: #ECE4F3;
  --color-warm-white: #FBF8F5;
  --color-ivory: #F4EEE5;
  --color-body-text: #2B2430;
  --color-muted-text: #5F5768;
  --color-blush: #E7B7B4;   /* decorative only — never text/icon/focus */
  --color-seafoam: #A9C7BB; /* decorative only — never text/icon/focus */
  --color-focus: #5B2E82;
  --color-success: #4F7A5E;
  --color-warning: #8C5A22;
  --color-error: #B14B44;

  /* TYPOGRAPHY — docs/design-tokens.md §2
     Fraunces + Public Sans, self-hosted as variable WOFF2 (see @font-face
     below and fonts/). Font-loading is no longer Pending — resolved
     2026-08-06, see docs/creative-decisions.md. */
  --font-headline: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-h1-size: 3.5rem;             --text-h1-size-mobile: 2.25rem;    --text-h1-line-height: 1.15;
  --text-h2-size: 2.5rem;             --text-h2-size-mobile: 1.75rem;    --text-h2-line-height: 1.2;
  --text-h3-size: 1.75rem;            --text-h3-size-mobile: 1.375rem;   --text-h3-line-height: 1.3;
  --text-h4-size: 1.375rem;           --text-h4-size-mobile: 1.125rem;   --text-h4-line-height: 1.35;
  --text-lead-size: 1.25rem;          --text-lead-size-mobile: 1.125rem; --text-lead-line-height: 1.6;
  --text-body-size: 1.125rem;         --text-body-size-mobile: 1.0625rem;--text-body-line-height: 1.7;
  --text-small-size: 0.9375rem;       --text-small-line-height: 1.6;
  --text-label-size: 0.8125rem;       --text-label-line-height: 1.4;
  --text-nav-size: 1rem;              --text-nav-line-height: 1.4;

  /* SPACING — docs/design-tokens.md §3 */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;
  --space-10: 144px; --space-11: 200px;

  /* LAYOUT — docs/design-tokens.md §4 */
  --width-max: 1600px;
  --width-reading: 680px;
  --width-editorial: 1200px;
  --pad-mobile: 20px;
  --pad-tablet: 40px;
  --pad-desktop: 72px;
  --pad-wide: clamp(72px, 8vw, 120px);

  /* CURVATURE — docs/design-tokens.md §5 */
  --radius-xs: 4px;  --radius-sm: 10px;
  --radius-md: 20px; --radius-lg: 40px; --radius-full: 999px;

  /* DEPTH — docs/design-tokens.md §6 */
  --border-hairline: 1px solid rgba(64,46,82,0.14);
  --shadow-soft: 0 1px 2px rgba(43,36,48,0.04), 0 8px 24px rgba(43,36,48,0.06);

  /* MOTION — docs/design-tokens.md §7
     --duration-signature intentionally does not exist: the Final Action
     photograph carries no animation (docs/creative-decisions.md, Signature
     moment, finalized 2026-08-06). */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-hover: 180ms;
  --duration-transition: 260ms;
  --duration-settle: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-hover: 1ms;
    --duration-transition: 1ms;
    --duration-settle: 1ms;
  }
}

/* =========================================================
   Fonts — self-hosted, official Fraunces & Public Sans variable
   fonts (SIL Open Font License 1.1, see fonts/*-OFL.txt).
   Sourced from the google/fonts repository, unmodified.
   ========================================================= */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   Reset / base
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

html {
  overflow-x: hidden;
}

body {
  background: var(--color-warm-white);
  color: var(--color-body-text);
  font-family: var(--font-body);
  font-size: var(--text-body-size-mobile);
  line-height: var(--text-body-line-height);
  overflow-x: hidden;
}

@media (min-width: 640px) {
  body { font-size: var(--text-body-size); }
}

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 400;
  color: var(--color-plum);
  margin: 0;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0; /* warm but composed, not the default quirky letterforms */
}

h1 { font-size: var(--text-h1-size-mobile); line-height: var(--text-h1-line-height); letter-spacing: -0.015em; }
h2 { font-size: var(--text-h2-size-mobile); line-height: var(--text-h2-line-height); letter-spacing: -0.01em; }
h3 { font-size: var(--text-h3-size-mobile); line-height: var(--text-h3-line-height); letter-spacing: -0.005em; font-weight: 500; }
h4 { font-size: var(--text-h4-size-mobile); line-height: var(--text-h4-line-height); font-weight: 500; }

@media (min-width: 1024px) {
  h1 { font-size: var(--text-h1-size); }
  h2 { font-size: var(--text-h2-size); }
  h3 { font-size: var(--text-h3-size); }
  h4 { font-size: var(--text-h4-size); }
}

/* Arrival — the page's one H1, given more editorial presence now that
   Fraunces is loaded. Targeted override, not a change to the shared
   --text-h1-size token (which nothing else on the page uses). */
.chapter--arrival h1 {
  font-size: clamp(2.5rem, 6vw + 1rem, 4.5rem);
  line-height: 1.08;
}
.chapter--arrival .lead {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
}

p { margin: 0; }

.lead {
  font-size: var(--text-lead-size-mobile);
  line-height: var(--text-lead-line-height);
  color: var(--color-body-text);
  max-width: 55ch;
}
@media (min-width: 1024px) { .lead { font-size: var(--text-lead-size); } }

.body-copy {
  max-width: 72ch;
  color: var(--color-body-text);
}

.small { font-size: var(--text-small-size); line-height: var(--text-small-line-height); color: var(--color-muted-text); }

.label {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line-height);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-text);
}

/* Focus — instant, always visible, never suppressed */
a, button {
  outline-offset: 2px;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--color-plum);
  color: var(--color-warm-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--duration-transition) var(--ease-standard);
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-4);
}

/* =========================================================
   Header / Navigation
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-warm-white);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-soft);
  border-bottom-color: rgba(64,46,82,0.08);
}

.site-header__inner {
  max-width: var(--width-max);
  margin: 0 auto;
  padding: var(--space-3) var(--pad-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
}

/* Header desktop-nav breakpoint: 1120px, not the site's usual 1024px.
   Measured empirically (docs/creative-decisions.md) — the desktop nav's
   own content (brand + links + call-link + Request Care) needs ~1031px
   minimum, which left zero margin at 1024px and caused real overflow/
   internal wrapping right at that width. Every rule below that switches
   between desktop nav and the mobile Menu button shares this one
   breakpoint intentionally — do not change one without the others. */
@media (min-width: 1120px) {
  .site-header__inner { padding: var(--space-3) var(--pad-desktop); min-height: 80px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}
.brand__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-lavender);
}
.brand__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%; /* isolates the mark, crops out the baked-in wordmark below it */
}
.brand__name {
  font-family: var(--font-headline);
  color: var(--color-plum);
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  display: none; /* reappears once there's room, see 480px breakpoint below */
}
@media (min-width: 480px) {
  .brand__name { display: block; font-size: 1.125rem; }
}
@media (min-width: 640px) {
  .brand__name { font-size: 1.25rem; }
}
@media (min-width: 1120px) {
  /* Desktop-only brand presence increase — mobile/tablet icon size (40px)
     is untouched per the mobile-QA-comes-later instruction. Shares the
     header's 1120px breakpoint (see .site-header__inner above) so the
     logo size change lines up with the nav-desktop/Menu switch instead
     of firing 96px earlier. */
  .brand__icon { width: 60px; height: 60px; }
  .brand__name { font-size: 1.5rem; }
}

/* Desktop nav */
.nav-desktop {
  display: none;
}
@media (min-width: 1120px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  .nav-desktop__links {
    display: flex;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-desktop__links a {
    font-size: var(--text-nav-size);
    line-height: var(--text-nav-line-height);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--color-plum);
    padding: var(--space-2) 0;
  }
  .nav-desktop__links a:hover {
    color: var(--color-purple);
    transition: color var(--duration-hover) var(--ease-standard);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.call-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--color-plum);
  font-weight: 500;
  font-size: var(--text-nav-size);
  white-space: nowrap;
}
.call-link__number { display: none; }
@media (min-width: 480px) {
  .call-link__number { display: inline; }
}
.call-link svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--text-nav-size);
  text-decoration: none;
  border: 1.5px solid var(--color-plum);
  cursor: pointer;
  transition: background var(--duration-hover) var(--ease-standard),
              color var(--duration-hover) var(--ease-standard);
}
.btn--primary {
  background: var(--color-plum);
  color: var(--color-warm-white);
  border-color: var(--color-plum);
}
.btn--primary:hover { background: var(--color-plum-deep); border-color: var(--color-plum-deep); }
.btn--secondary {
  background: transparent;
  color: var(--color-plum);
}
.btn--secondary:hover { background: var(--color-lavender); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.request-care-desktop { display: none; }
@media (min-width: 1120px) {
  .request-care-desktop { display: inline-flex; }
}

/* Mobile menu button */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1.5px solid var(--color-plum);
  border-radius: var(--radius-sm);
  color: var(--color-plum);
  font-weight: 500;
  cursor: pointer;
}
@media (min-width: 1120px) {
  .menu-toggle { display: none; }
}
.menu-toggle__chevron {
  width: 12px; height: 12px;
  transition: transform var(--duration-transition) var(--ease-standard);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__chevron {
  transform: rotate(180deg);
}

/* Mobile nav panel */
.nav-mobile {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-transition) var(--ease-standard);
  background: var(--color-ivory);
  border-top: var(--border-hairline);
}
.nav-mobile[data-open="true"] {
  max-height: 480px;
}
.nav-mobile__inner {
  padding: var(--space-5) var(--pad-mobile) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.nav-mobile .btn--primary { width: 100%; }
.nav-mobile__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-mobile__links a {
  display: block;
  padding: var(--space-3) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-plum);
  font-size: 1.0625rem;
  border-bottom: var(--border-hairline);
}
.nav-mobile__links li:last-child a { border-bottom: none; }

@media (min-width: 1120px) {
  .nav-mobile, .menu-toggle { display: none; }
  .header-actions .call-link { display: none; } /* the nav-desktop call-link covers this at desktop widths */
}

/* =========================================================
   Chapters — shared
   ========================================================= */

main { display: block; }

.chapter {
  display: grid;
  grid-template-columns: 1fr;
}

.chapter__content {
  padding: var(--space-8) var(--pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  justify-content: center;
}

.chapter__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-lavender);
}
.chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .chapter { grid-template-columns: 7fr 5fr; min-height: 82vh; align-items: stretch; }
  .chapter__content { padding: var(--space-9) var(--space-9); max-width: var(--width-reading); }
  .chapter__media { aspect-ratio: auto; }

  .chapter--arrival { grid-template-columns: 5fr 7fr; }
  .chapter--arrival .chapter__content { order: 1; }
  .chapter--arrival .chapter__media { order: 2; }

  .chapter--relief { grid-template-columns: 7fr 5fr; }
  .chapter--relief .chapter__media { order: 1; }
  .chapter--relief .chapter__content { order: 2; justify-self: end; }
}

/* Art-directed object-position per photograph (see report for rationale) */
.chapter--arrival .chapter__media img { object-position: 72% 55%; }
@media (min-width: 1024px) { .chapter--arrival .chapter__media img { object-position: 62% 50%; } }

.chapter--relief .chapter__media img { object-position: 30% 18%; }
@media (min-width: 1024px) { .chapter--relief .chapter__media img { object-position: 25% 28%; } }

/* =========================================================
   Understanding
   ========================================================= */

.understanding {
  padding: var(--space-9) var(--pad-mobile);
  max-width: var(--width-reading);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .understanding { padding: var(--space-10) var(--pad-desktop); gap: var(--space-10); }
}

.service-entry { display: flex; flex-direction: column; gap: var(--space-4); }

/* Editorial subheadings, not small tracked labels — these are the
   compositional focus of the chapter, not a form-field-style caption. */
.service-entry h3 {
  font-size: 1.625rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.005em;
}
@media (min-width: 1024px) {
  .service-entry h3 { font-size: 2rem; }
}

.service-entry p {
  font-size: 1.0625rem;
  line-height: var(--text-lead-line-height);
  max-width: 62ch;
}
@media (min-width: 1024px) {
  .service-entry p { font-size: 1.1875rem; }
}

.service-entry--respite {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.service-entry--respite .service-entry__media {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.service-entry--respite .service-entry__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 32% 48%;
}
@media (min-width: 1024px) {
  .service-entry--respite {
    grid-template-columns: 2fr 3fr;
    align-items: center;
    max-width: none;
    gap: var(--space-7);
    /* Breaks out of the reading column substantially further than before,
       so the photograph reads as a real editorial spread rather than a
       small inline image. Fixed values, not viewport-relative, so this
       stays safely within the page at every width from 1024px up —
       verified against the (1024-680)/2≈172px minimum gutter. */
    margin-left: -140px;
    margin-right: -110px;
  }
  .service-entry--respite .service-entry__media { order: 2; aspect-ratio: 3/2; min-height: 420px; }
  .service-entry--respite .service-entry__text { order: 1; }
  .service-entry--respite h3 { font-size: 2.125rem; }
}

.understanding__close {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* reduced from --space-4: qualifier sits closer to the closing statement */
  /* Pull the closing block up so it reads as this chapter's conclusion
     rather than a fourth, detached entry — Personal Support / Respite /
     Companion Care keep their original --space-8 (mobile) / --space-10
     (desktop) rhythm between each other; only this block's distance from
     Companion Care is reduced. */
  margin-top: calc(-1 * (var(--space-8) - var(--space-6)));
}
.understanding__close .lead { max-width: none; }
@media (min-width: 1024px) {
  .understanding__close { margin-top: calc(-1 * (var(--space-10) - var(--space-7))); }
}

/* Held-breath pause */
.pause {
  padding: var(--space-9) var(--pad-mobile);
  text-align: center;
}
.pause p {
  max-width: 40ch;
  margin: 0 auto;
  font-family: var(--font-headline);
  font-size: 1.25rem;
  color: var(--color-plum);
}
@media (min-width: 1024px) {
  /* Reduced from --space-11 (200px) to --space-10 (144px) — still a
     deliberate pause, but no longer reads as missing content.
     docs/design-tokens.md §3 updated to match. */
  .pause { padding: var(--space-10) var(--pad-desktop); }
}

/* =========================================================
   Trust
   ========================================================= */

.trust {
  background: var(--color-ivory);
  padding: var(--space-9) var(--pad-mobile);
}
.trust__inner {
  max-width: var(--width-reading);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .trust { padding: var(--space-10) var(--pad-desktop); }
}

/* The certification/approval fact is the core legitimacy claim — given
   its own line at lead size so it reads first and carries more weight
   than the supporting availability/counties lines. Typography only:
   no boxes, icons, or badge styling. */
.trust__fact {
  color: var(--color-plum);
  font-weight: 500;
}
.trust__availability { color: var(--color-body-text); }
.trust__counties-intro { color: var(--color-muted-text); margin-top: var(--space-2); }

.county-list {
  font-size: var(--text-label-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-text);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.county-list li:not(:last-child)::after {
  content: "\00B7";
  margin-left: var(--space-3);
  color: var(--color-purple);
}

.trust__link {
  color: var(--color-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  align-self: flex-start;
  /* Invisible tap-target expansion to 44px min-height — padding grows the
     hit area, the matching negative margin keeps the visual position and
     surrounding spacing exactly as before. */
  padding: 12px 0;
  margin: -12px 0;
}
.trust__link:hover { color: var(--color-purple); }

/* =========================================================
   Hope
   ========================================================= */

.hope {
  padding: var(--space-9) var(--pad-mobile);
  text-align: center;
  background: var(--color-warm-white);
}
.hope h2 {
  max-width: 22ch;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .hope { padding: var(--space-11) var(--pad-desktop); }
}

/* =========================================================
   Action — signature moment (static, no animation)
   ========================================================= */

/* Mobile note: this source photo is landscape (1536x1024) inside a
   portrait box. With object-fit: cover, the box height always binds
   (portrait box vs. landscape image), so the FULL image height is
   always shown regardless of object-position's Y value or the box's
   min-height — there is no way to crop the window/curtain band out
   vertically via CSS alone. Rather than fight that, the text panel is
   deliberately placed over the band where the window already sits
   (the image's own top portion), so that area does real work instead
   of being empty scroll-through space, and the family — which sits in
   the image's lower portion — stays fully unobstructed. */
.action {
  position: relative;
  min-height: 62vh;
}
.action__media {
  position: absolute;
  inset: 0;
}
.action__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 89% 50%; /* mobile: shifted right so all three family members are in frame, not just the first two */
}
.action__scrim {
  position: absolute;
  inset: 0;
  /* Top-anchored: covers the window/curtain band the text sits over,
     fades out well above where the family appears. */
  /* Stops sized for the worst case across 320–430px: the recap line can
     wrap to 4 lines at 320px, pushing it further down than at wider
     mobile widths, so the strong zone has to reach further than a single
     width would need. Verified against sampled photo pixel values, not
     assumed — see report. */
  background: linear-gradient(180deg, rgba(251,248,245,0.97) 0%, rgba(251,248,245,0.94) 58%, rgba(251,248,245,0) 86%);
}
.action__panel {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-start;
  padding: var(--space-6) var(--pad-mobile) var(--space-6);
}
.action__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 34ch;
}
@media (min-width: 1024px) {
  .action__content { gap: var(--space-4); }
}
.action__secondary a {
  color: var(--color-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}
.action__recap {
  /* muted-text doesn't have enough inherent contrast to survive sitting
     partly outside the scrim's strongest zone on mobile — body-text does.
     Desktop keeps muted-text since its scrim covers the full text column.
     Font-size trimmed slightly so it holds to 3 lines instead of 4 at
     320px, keeping its position consistent across mobile widths instead
     of needing the scrim to reach unevenly far on the narrowest phones. */
  color: var(--color-body-text);
  font-size: 0.8125rem;
  line-height: 1.45;
}
@media (min-width: 1024px) {
  .action__recap { color: var(--color-muted-text); line-height: var(--text-small-line-height); }
}

@media (min-width: 1024px) {
  .action, .action__panel { min-height: 88vh; }
  .action__media img { object-position: 66% 55%; } /* desktop: wider frame, include the window/lake view */
  /* Tightened from the previous 0/38/62 stops — the scrim now covers only
     as much as the text column actually needs (content sits within the
     first ~30% of the frame), letting more of the photograph breathe.
     Opacity kept at 0.97→0.93 under the text itself, so the previously
     verified plum/warm-white 11.5:1 contrast (design-tokens.md §11) is
     unaffected. */
  .action__scrim { background: linear-gradient(90deg, rgba(251,248,245,0.97) 0%, rgba(251,248,245,0.93) 28%, rgba(251,248,245,0) 46%); }
  .action__panel { align-items: center; padding: 0 var(--pad-desktop); }
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background: var(--color-ivory);
  padding: var(--space-8) var(--pad-mobile) var(--space-6);
}
.site-footer__inner {
  max-width: var(--width-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .site-footer { padding: var(--space-9) var(--pad-desktop) var(--space-6); }
  .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { text-decoration: none; color: var(--color-plum); }
.footer-col a:hover { color: var(--color-purple); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* Invisible tap-target expansion (44px min-height) for the footer's contact
   and page links, same padding/negative-margin trick as .trust__link — the
   brand/logo link is intentionally excluded, its own layout is unrelated. */
.footer-col > a:not(.brand),
.footer-links a {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}
.site-footer__bottom {
  border-top: var(--border-hairline);
  padding-top: var(--space-5);
  color: var(--color-muted-text);
  font-size: var(--text-small-size);
}

/* =========================================================
   Stub pages
   ========================================================= */

.stub {
  max-width: var(--width-reading);
  margin: 0 auto;
  padding: var(--space-9) var(--pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 1024px) { .stub { padding: var(--space-10) var(--pad-desktop); } }

/* =========================================================
   About page — editorial sections.
   Full-width bands with a centered reading-width inner column,
   alternating warm-white/ivory for section separation — the same
   "no cards, tone-shift instead of borders" pattern the homepage's
   Trust/Understanding sections already use. New classes only; nothing
   here touches .stub (still shared by the remaining stub pages) or any
   homepage-only selector.
   ========================================================= */

.about-hero,
.about-section {
  padding: var(--space-9) var(--pad-mobile);
  background: var(--color-warm-white);
}
.about-section--ivory { background: var(--color-ivory); }

.about-section__inner {
  max-width: var(--width-reading);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .about-hero, .about-section { padding: var(--space-10) var(--pad-desktop); }
}

/* Photography sections — "Care, the way we mean it." and "What dignity
   actually looks like." Mobile: stacks, text always first. Desktop: an
   asymmetric text+image split, reusing the same "no cards, edge-aware
   crop" language as the homepage's chapter photography. Dignity gets a
   wider outer container and a larger image share than Care, so it reads
   as the page's visual peak without either section touching the true
   viewport edge or using homepage-only classes.

   min-width: 0 on both grid children is required, not decorative: grid
   items default to min-width: auto, so on Dignity the aspect-ratio + 520px
   min-height media box was refusing to shrink into its 5fr track and
   overflowing into the text column at desktop widths. min-width: 0 lets
   the fr sizing actually win. */
.about-photo__inner {
  max-width: var(--width-editorial);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.about-photo__text { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.about-photo__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-lavender);
  min-width: 0;
  width: 100%;
}
.about-photo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero: intimate detail shot (hands). Gets more image share than Care
   (6fr:6fr vs Care's 5fr:7fr, both inside the same 1200px editorial
   container) since it's the page's opening moment and can carry some
   presence — but it stays well below Dignity's dominance on every axis:
   a smaller container (1200px editorial vs Dignity's 1600px max-width),
   a smaller absolute image width at every viewport, and no min-height
   floor. A square-ish box (mobile 1:1, desktop 4:3) is narrower than the
   source photo's own ~1.57:1 ratio, so height binds and object-position's
   X value trims the empty couch space on the left rather than cropping
   top-to-bottom — the hands+hint-of-face framing stays intact at every
   width. */
.about-photo--hero .about-photo__media { aspect-ratio: 1 / 1; }
.about-photo--hero .about-photo__media img { object-position: 68% 50%; }

/* Care: mobile crop favors the two people and the checkers board. */
.about-photo--care .about-photo__media img { object-position: 55% 45%; }

/* Dignity: a wider-than-tall box (not the default 4:5) means the box's
   width — not its height — becomes the binding dimension for
   object-fit: cover, which is what actually lets object-position crop
   the wheelchair's lower half out of frame instead of it always being
   fully shown regardless of position. */
.about-photo--dignity .about-photo__media { aspect-ratio: 4 / 3; }
.about-photo--dignity .about-photo__media img { object-position: 62% 38%; }

@media (min-width: 1024px) {
  .about-photo__inner {
    display: grid;
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: var(--space-8);
  }
  .about-photo__text { max-width: var(--width-reading); }

  /* Hero: even 6fr:6fr split inside the default 1200px editorial
     container — more image presence than Care's 5fr share, but still a
     smaller container and share than Dignity, so the size hierarchy
     across the page reads Hero < Care < Dignity in image weight. */
  .about-photo--hero .about-photo__inner { grid-template-columns: 6fr 6fr; }
  .about-photo--hero .about-photo__text { order: 1; }
  .about-photo--hero .about-photo__media { order: 2; aspect-ratio: 4/3; }
  .about-photo--hero .about-photo__media img { object-position: 68% 50%; }

  .about-photo--care .about-photo__text { order: 1; }
  .about-photo--care .about-photo__media { order: 2; aspect-ratio: 4/5; }
  .about-photo--care .about-photo__media img { object-position: 50% 42%; }

  /* Dignity: wider outer container, image takes the majority share,
     taller minimum height — deliberately more visual weight than Care.
     Media sits in column 1 (order: 1) so that column must be the larger
     one — 8fr 5fr, not 5fr 8fr — or the "majority share" would land on
     the text column instead of the image. */
  .about-photo--dignity .about-photo__inner {
    max-width: var(--width-max);
    grid-template-columns: 8fr 5fr;
    gap: var(--space-9);
  }
  .about-photo--dignity .about-photo__media { order: 1; aspect-ratio: 3/2; min-height: 520px; }
  .about-photo--dignity .about-photo__media img { object-position: 58% 40%; }
  .about-photo--dignity .about-photo__text { order: 2; }
}

/* How it starts — restrained editorial process, no photography, no cards.
   Mobile: numbered list stacked with hairline top rules. Desktop: the
   same list turned into a restrained horizontal progression, divided by
   hairline verticals instead of borders/backgrounds/icons. */
.about-process__inner {
  max-width: var(--width-editorial);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.about-process__intro { margin: 0; }
.about-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.about-process__step {
  padding: var(--space-5) 0;
  border-top: var(--border-hairline);
}
.about-process__step:last-child { border-bottom: var(--border-hairline); }
.about-process__number { display: block; margin-bottom: var(--space-2); }
.about-process__label { margin: 0 0 var(--space-2); }
.about-process__desc { margin: 0; color: var(--color-muted-text); max-width: 40ch; }

@media (min-width: 1024px) {
  .about-process__steps { flex-direction: row; gap: var(--space-7); }
  .about-process__step {
    flex: 1;
    min-width: 0;
    padding: 0 0 0 var(--space-6);
    border-top: none;
    border-left: var(--border-hairline);
  }
  .about-process__step:first-child { padding-left: 0; border-left: none; }
  .about-process__step:last-child { border-bottom: none; }
}

/* What to expect — three quiet reassurance statements. Deliberately not a
   card/badge treatment: plain stacked lines at lead size, sized and
   colored a step below .about-pull so the existing Held Breath line still
   reads as the concluding statement of the sequence, not just one more
   line among four. */
.about-reassurance__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.about-reassurance__list li {
  font-size: var(--text-lead-size-mobile);
  line-height: var(--text-lead-line-height);
  color: var(--color-body-text);
  font-weight: 500;
  max-width: 55ch;
}
@media (min-width: 1024px) {
  .about-reassurance__list li { font-size: var(--text-lead-size); }
}

/* Callback to the approved Held Breath line (docs/creative-decisions.md) —
   styled like the homepage's .pause treatment so the echo reads as
   intentional, not a coincidence. Now sits after the reassurance triplet
   as its concluding statement rather than standing alone. */
.about-pull {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-plum);
  margin-top: var(--space-3);
}

/* Facts — three restrained, labeled groups instead of one undifferentiated
   stack of facts. .label reuses the same eyebrow treatment as the footer's
   "Contact"/"Counties Served" labels — no new typographic component. The
   approved provider line (docs/creative-decisions.md) stays a single
   verbatim string, not split across lines, so its exact wording is never
   at risk of reading as two separate claims. */
.about-facts .about-section__inner { max-width: var(--width-reading); }
.about-facts__list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.about-facts__group { padding-top: var(--space-5); border-top: var(--border-hairline); }
.about-facts__group:first-child { padding-top: 0; border-top: none; }
.about-facts__group dt { margin: 0 0 var(--space-2); }
.about-facts__group dd { margin: 0; }
.about-facts__credential { color: var(--color-plum); font-weight: 500; }
.about-facts__hours { color: var(--color-body-text); }
.about-facts__counties { color: var(--color-muted-text); }

@media (min-width: 1024px) {
  .about-facts .about-section__inner { max-width: var(--width-editorial); }
  .about-facts__list { flex-direction: row; gap: var(--space-7); }
  .about-facts__group {
    flex: 1;
    min-width: 0;
    padding-top: 0;
    padding-left: var(--space-6);
    border-top: none;
    border-left: var(--border-hairline);
  }
  .about-facts__group:first-child { padding-left: 0; border-left: none; }
}

/* Closing chapter — the About story's resolution. Deliberately the one
   section on this page that breaks from the warm-white/ivory rhythm: a
   solid plum band (an existing token, not a new color) gives it more
   contrast and presence than a plain CTA line would, while staying built
   from the same buttons/type scale as the rest of the site rather than a
   bespoke marketing-banner treatment. Left-aligned, reading-width column —
   deliberately not centered, so it reads as an editorial closing chapter,
   not a hero-style banner. Contrast verified: lavender-on-plum 9.8:1,
   warm-white-on-plum 11.5:1 (docs/creative-decisions.md). */
.about-closing {
  background: var(--color-plum);
  color: var(--color-warm-white);
  padding: var(--space-8) var(--pad-mobile);
}
@media (min-width: 1024px) {
  .about-closing { padding: var(--space-10) var(--pad-desktop); }
}
.about-closing__inner {
  max-width: var(--width-reading);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.about-closing__inner h2 {
  /* h2's global rule sets its own color: var(--color-plum) directly on
     the element — a direct declaration always beats inheritance from an
     ancestor, so .about-closing's warm-white text color would not have
     reached this heading without repeating it here explicitly. */
  color: var(--color-warm-white);
  font-size: var(--text-h1-size-mobile);
  line-height: var(--text-h1-line-height);
  letter-spacing: -0.015em;
}
@media (min-width: 1024px) {
  .about-closing__inner h2 { font-size: var(--text-h1-size); }
}
.about-closing__lead {
  font-size: var(--text-lead-size-mobile);
  line-height: var(--text-lead-line-height);
  color: var(--color-lavender);
  max-width: 55ch;
}
@media (min-width: 1024px) { .about-closing__lead { font-size: var(--text-lead-size); } }

.about-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.btn--on-dark {
  background: var(--color-warm-white);
  color: var(--color-plum);
  border-color: var(--color-warm-white);
}
.btn--on-dark:hover { background: var(--color-lavender); border-color: var(--color-lavender); }
.btn--on-dark-outline {
  background: transparent;
  color: var(--color-warm-white);
  border-color: var(--color-warm-white);
}
.btn--on-dark-outline:hover { background: rgba(251, 248, 245, 0.12); }

.about-closing__link {
  color: var(--color-lavender);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  width: fit-content;
  padding: 12px 0;
  margin: var(--space-1) 0 -12px;
}
.about-closing__link:hover { color: var(--color-warm-white); }

/* The site-wide focus ring (--color-focus, a dark plum-purple) has only
   ~1.25:1 contrast against this section's plum background — effectively
   invisible for keyboard users. warm-white-on-plum is verified at 11.5:1
   (see .about-closing comment above), so it's used here instead. */
.about-closing :focus-visible {
  outline-color: var(--color-warm-white);
}

/* =========================================================
   Services page — editorial service journey.
   Same "no cards, tone-shift instead of borders" language as About:
   alternating warm-white/ivory backgrounds, hairline rules instead of
   card borders, typography-only (no new photography this pass — see
   docs/creative-decisions.md for the review that led to that decision).
   New classes only; nothing here touches .about-*, .stub, or any
   homepage-only selector.
   ========================================================= */

.services-hero,
.services-section,
.services-chapter {
  padding: var(--space-9) var(--pad-mobile);
  background: var(--color-warm-white);
}
.services-section--ivory { background: var(--color-ivory); }

.services-section__inner {
  max-width: var(--width-reading);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .services-hero, .services-section, .services-chapter {
    padding: var(--space-10) var(--pad-desktop);
  }
}

/* Hero — quiet jump-list beneath the lead, previewing the three chapters
   below without becoming a nav element or a card row. */
.services-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-2);
}
.services-hero__jump a {
  color: var(--color-muted-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--text-small-size);
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}
.services-hero__jump a:hover { color: var(--color-plum); }

/* Personal Support — asymmetric two-column at desktop: a large label
   column paired with a wider detail column, echoing the "photo+text"
   asymmetry used elsewhere on the site but built entirely from
   typography, since this page uses no new photography this pass. */
.services-chapter__inner {
  max-width: var(--width-editorial);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.services-chapter__label h2 { margin: 0; }
.services-chapter__body { display: flex; flex-direction: column; gap: var(--space-4); }

@media (min-width: 1024px) {
  .services-chapter__inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
  }
  .services-chapter__label { min-width: 0; }
  .services-chapter__body { min-width: 0; max-width: var(--width-reading); }
}

/* Personal Support's heading intentionally uses the same h2 scale as
   Respite Care's and Companion Care's — the asymmetric label/body column
   split already gives it visual distinctness without also inflating its
   type scale to h1 size, which read as heavier than the other two
   service names rather than just differently composed. */

/* Restrained, scannable detail line beneath the Personal Support prose —
   smaller, muted, and set off by a hairline so it reads as quick
   reference material (not a fourth paragraph, not a badge/pill/checklist). */
.services-chapter__detail {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}

/* Respite Care — quieter and narrower than Personal Support's two-column
   spread (it reuses .services-section__inner's 680px reading width
   rather than the wider editorial grid): a deliberate change of pace for
   the one chapter that's about the family caregiver's own exhaustion
   rather than a hands-on task list. */
.services-chapter--respite .services-section__inner { gap: var(--space-4); }
.services-chapter__pull {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-plum);
}

/* Companion Care — short vignette lines instead of a bulleted checklist;
   loose spacing gives each moment room rather than reading as a task
   list, and the italic headline face marks them as a different register
   from the surrounding body copy. */
.services-vignettes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.services-vignettes li {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-body-text);
  max-width: 55ch;
}

/* Decision support — plain stacked conditional statements: not a card
   grid, not a quiz. */
.services-compare__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.services-compare__list li {
  font-size: var(--text-lead-size-mobile);
  line-height: var(--text-lead-line-height);
  color: var(--color-body-text);
  font-weight: 500;
  max-width: 60ch;
}
@media (min-width: 1024px) {
  .services-compare__list li { font-size: var(--text-lead-size); }
}

/* Qualifier / availability — the required qualifier sits at full lead
   size and plum color, ahead of the three labeled facts, not tucked
   into fine print. Same three-group pattern as About's Facts section,
   rebuilt under services-* classes since about.html isn't touched this
   pass. */
.services-facts__qualifier { color: var(--color-plum); font-weight: 500; margin-top: var(--space-2); }
.services-facts__list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.services-facts__group { padding-top: var(--space-5); border-top: var(--border-hairline); }
.services-facts__group:first-child { padding-top: 0; border-top: none; }
.services-facts__group dt { margin: 0 0 var(--space-2); }
.services-facts__group dd { margin: 0; }
.services-facts__credential { color: var(--color-plum); font-weight: 500; font-size: var(--text-lead-size-mobile); }
@media (min-width: 1024px) { .services-facts__credential { font-size: var(--text-lead-size); } }
.services-facts__hours { color: var(--color-body-text); font-size: var(--text-body-size-mobile); }
@media (min-width: 1024px) { .services-facts__hours { font-size: var(--text-body-size); } }
.services-facts__counties { color: var(--color-muted-text); font-size: var(--text-small-size); }

@media (min-width: 1024px) {
  .services-facts .services-section__inner { max-width: var(--width-editorial); }
  .services-facts__list { flex-direction: row; gap: var(--space-7); }
  .services-facts__group {
    flex: 1;
    min-width: 0;
    padding-top: 0;
    padding-left: var(--space-6);
    border-top: none;
    border-left: var(--border-hairline);
  }
  .services-facts__group:first-child { padding-left: 0; border-left: none; }
}

/* Closing chapter — same visual treatment as About's closing (plum
   background, left-aligned reading column, warm-white/lavender text,
   on-dark button pair reused from the shared .btn--on-dark* variants)
   but its own classes and copy, since about.html is not touched this
   pass. Contrast figures carry over unchanged: lavender-on-plum 9.8:1,
   warm-white-on-plum 11.47:1 (verified during the About build). */
.services-closing {
  background: var(--color-plum);
  color: var(--color-warm-white);
  padding: var(--space-8) var(--pad-mobile);
}
@media (min-width: 1024px) {
  .services-closing { padding: var(--space-10) var(--pad-desktop); }
}
.services-closing__inner {
  max-width: var(--width-reading);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.services-closing__inner h2 {
  color: var(--color-warm-white);
  font-size: var(--text-h1-size-mobile);
  line-height: var(--text-h1-line-height);
  letter-spacing: -0.015em;
}
@media (min-width: 1024px) {
  .services-closing__inner h2 { font-size: var(--text-h1-size); }
}
.services-closing__lead {
  font-size: var(--text-lead-size-mobile);
  line-height: var(--text-lead-line-height);
  color: var(--color-lavender);
  max-width: 55ch;
}
@media (min-width: 1024px) { .services-closing__lead { font-size: var(--text-lead-size); } }

.services-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.services-closing__link {
  color: var(--color-lavender);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  width: fit-content;
  padding: 12px 0;
  margin: var(--space-1) 0 -12px;
}
.services-closing__link:hover { color: var(--color-warm-white); }

.services-closing :focus-visible {
  outline-color: var(--color-warm-white);
}

/* =========================================================
   Service Areas page — calm editorial geography, no map, no
   photography (see docs/creative-decisions.md for that review).
   Same "no cards, tone-shift instead of borders" language as About
   and Services: alternating warm-white/ivory backgrounds, hairline
   rules, typography carrying all the structure. New classes only;
   nothing here touches .about-*, .services-*, .stub, or any
   homepage-only selector.
   ========================================================= */

.areas-hero,
.areas-section {
  padding: var(--space-9) var(--pad-mobile);
  background: var(--color-warm-white);
}
.areas-section--ivory { background: var(--color-ivory); }

.areas-section__inner {
  max-width: var(--width-reading);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .areas-hero, .areas-section {
    padding: var(--space-10) var(--pad-desktop);
  }
}

/* Six-county index — a numbered editorial list, not cards. Every county
   gets identical markup/weight (equal in meaning); the two-column
   desktop layout is purely a wayfinding/scanning device, not a ranking. */
.areas-counties__inner {
  max-width: var(--width-editorial);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.areas-counties__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.areas-counties__item {
  padding: var(--space-5) 0;
  border-top: var(--border-hairline);
}
.areas-counties__item:last-child { border-bottom: var(--border-hairline); }
/* No descriptive note beneath each name by design (2026-08-07 revision)
   — the county name itself is the service-area fact, so name has no
   trailing margin: the item's own padding closes out the spacing
   symmetrically instead of leaving an orphaned half-gap where a note
   used to sit. */
.areas-counties__number { display: block; margin-bottom: var(--space-2); }
.areas-counties__name { margin: 0; }

@media (min-width: 1024px) {
  .areas-counties__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
  }
  .areas-counties__item { min-width: 0; }
}

/* Availability / provider context — qualifier at full lead size and
   plum color ahead of two labeled facts (Provider, Availability); no
   third "service area" group here since the whole page already covers
   that. Same pattern as About's and Services' Facts sections, rebuilt
   under areas-* classes since neither of those pages is touched here. */
.areas-facts__qualifier { color: var(--color-plum); font-weight: 500; margin-top: var(--space-2); }
.areas-facts__list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.areas-facts__group { padding-top: var(--space-5); border-top: var(--border-hairline); }
.areas-facts__group:first-child { padding-top: 0; border-top: none; }
.areas-facts__group dt { margin: 0 0 var(--space-2); }
.areas-facts__group dd { margin: 0; }
.areas-facts__credential { color: var(--color-plum); font-weight: 500; font-size: var(--text-lead-size-mobile); }
@media (min-width: 1024px) { .areas-facts__credential { font-size: var(--text-lead-size); } }
.areas-facts__hours { color: var(--color-body-text); font-size: var(--text-body-size-mobile); }
@media (min-width: 1024px) { .areas-facts__hours { font-size: var(--text-body-size); } }

@media (min-width: 1024px) {
  .areas-facts .areas-section__inner { max-width: var(--width-editorial); }
  .areas-facts__list { flex-direction: row; gap: var(--space-7); }
  .areas-facts__group {
    flex: 1;
    min-width: 0;
    padding-top: 0;
    padding-left: var(--space-6);
    border-top: none;
    border-left: var(--border-hairline);
  }
  .areas-facts__group:first-child { padding-left: 0; border-left: none; }
}

/* Closing chapter — same plum-band treatment as About's and Services'
   closing chapters, its own classes/copy since neither page is touched
   here. Contrast figures carry over unchanged: lavender-on-plum 9.8:1,
   warm-white-on-plum 11.47:1 (verified during the About build). */
.areas-closing {
  background: var(--color-plum);
  color: var(--color-warm-white);
  padding: var(--space-8) var(--pad-mobile);
}
@media (min-width: 1024px) {
  .areas-closing { padding: var(--space-10) var(--pad-desktop); }
}
.areas-closing__inner {
  max-width: var(--width-reading);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.areas-closing__inner h2 {
  color: var(--color-warm-white);
  font-size: var(--text-h1-size-mobile);
  line-height: var(--text-h1-line-height);
  letter-spacing: -0.015em;
}
@media (min-width: 1024px) {
  .areas-closing__inner h2 { font-size: var(--text-h1-size); }
}
.areas-closing__lead {
  font-size: var(--text-lead-size-mobile);
  line-height: var(--text-lead-line-height);
  color: var(--color-lavender);
  max-width: 55ch;
}
@media (min-width: 1024px) { .areas-closing__lead { font-size: var(--text-lead-size); } }

.areas-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.areas-closing__link {
  color: var(--color-lavender);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  width: fit-content;
  padding: 12px 0;
  margin: var(--space-1) 0 -12px;
}
.areas-closing__link:hover { color: var(--color-warm-white); }

.areas-closing :focus-visible {
  outline-color: var(--color-warm-white);
}

/* =========================================================
   Contact page — the calmest, lowest-friction page on the site.
   Deliberately ends quiet (no plum closing band, unlike About/Services/
   Service-Areas): the form itself is this page's conversion moment, so
   the closing section doesn't need to repeat that work. Single-column
   form throughout (no field grid) — reads as a conversation, not an
   intake dashboard. New classes only; nothing here touches .about-*,
   .services-*, .areas-*, .stub, or any homepage-only selector.
   ========================================================= */

.contact-hero,
.contact-section {
  padding: var(--space-9) var(--pad-mobile);
  background: var(--color-warm-white);
}
.contact-section--ivory { background: var(--color-ivory); }

.contact-section__inner {
  max-width: var(--width-reading);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .contact-hero, .contact-section {
    padding: var(--space-10) var(--pad-desktop);
  }
}

.contact-hero__call {
  color: var(--color-body-text);
}
.contact-hero__call a {
  color: var(--color-plum);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

/* --- Form ------------------------------------------------------------ */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-2);
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: none;
  padding: 0;
  margin: 0;
}
.contact-field > label,
.contact-field legend {
  font-weight: 500;
  color: var(--color-plum);
  padding: 0;
}
.contact-field__required {
  font-weight: 400;
  color: var(--color-muted-text);
  font-size: var(--text-small-size);
}
.contact-field__hint {
  margin: 0;
  font-size: var(--text-small-size);
  color: var(--color-muted-text);
}
.contact-field__privacy {
  margin: var(--space-2) 0 0;
  font-size: var(--text-small-size);
  color: var(--color-muted-text);
}

.contact-field input[type="text"],
.contact-field input[type="tel"],
.contact-field input[type="email"],
.contact-field select,
.contact-field textarea {
  font: inherit;
  font-size: var(--text-body-size-mobile);
  color: var(--color-body-text);
  background: var(--color-warm-white);
  border: 1.5px solid rgba(64, 46, 82, 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  width: 100%;
}
.contact-field textarea { min-height: 120px; resize: vertical; }
.contact-field select { appearance: auto; cursor: pointer; }

/* Radio groups (Who for / Service interest / Contact preference) — plain
   stacked options at every width, not a segmented control or button
   row, so tap targets stay predictable and nothing needs to wrap. */
.contact-field--radio {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.contact-radio-group label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  font-weight: 400;
  color: var(--color-body-text);
  cursor: pointer;
}
.contact-radio-group input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--color-plum);
}

.contact-field--consent label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-small-size);
  color: var(--color-body-text);
  cursor: pointer;
  padding: var(--space-2) 0;
}
.contact-field--consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-plum);
}

.contact-form__submit {
  width: 100%;
  align-self: flex-start;
}
@media (min-width: 480px) {
  .contact-form__submit { width: auto; }
}

.contact-form__status {
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-lavender);
  color: var(--color-plum);
  font-weight: 500;
}

/* --- What happens next (numbered steps, same restrained device as
   About's process section, rebuilt under contact-* classes) ---------- */

.contact-steps__inner {
  max-width: var(--width-editorial);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.contact-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.contact-steps__step {
  padding: var(--space-5) 0;
  border-top: var(--border-hairline);
}
.contact-steps__step:last-child { border-bottom: var(--border-hairline); }
.contact-steps__number { display: block; margin-bottom: var(--space-2); }
.contact-steps__label { margin: 0 0 var(--space-2); }
.contact-steps__desc { margin: 0; color: var(--color-muted-text); max-width: 40ch; }

@media (min-width: 1024px) {
  .contact-steps__list { flex-direction: row; gap: var(--space-7); }
  .contact-steps__step {
    flex: 1;
    min-width: 0;
    padding: 0 0 0 var(--space-6);
    border-top: none;
    border-left: var(--border-hairline);
  }
  .contact-steps__step:first-child { padding-left: 0; border-left: none; }
  .contact-steps__step:last-child { border-bottom: none; }
}

/* =========================================================
   Utility pages — Privacy Policy and Accessibility Statement.
   Shared by both since they were built together in the same pass;
   deliberately restrained: one continuous document, no chapter-paced
   section backgrounds, no cards, no photography. Reading-width column
   throughout for long-text comfort. New classes only; nothing here
   touches .about-*, .services-*, .areas-*, .contact-*, .stub, or any
   homepage-only selector.
   ========================================================= */

.doc-hero {
  padding: var(--space-7) var(--pad-mobile) var(--space-6);
  background: var(--color-warm-white);
}
.doc-section__inner {
  max-width: var(--width-reading);
  margin: 0 auto;
}
.doc-meta {
  margin-top: var(--space-3);
  font-size: var(--text-small-size);
  color: var(--color-muted-text);
}

.doc-toc {
  padding: var(--space-5) var(--pad-mobile);
  background: var(--color-warm-white);
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
}
.doc-toc__list {
  margin: var(--space-3) 0 0;
  padding: 0 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.doc-toc__list a {
  color: var(--color-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: block;
  padding: var(--space-2) 0;
}
.doc-toc__list a:hover { color: var(--color-purple); }

.doc-body {
  padding: var(--space-8) var(--pad-mobile) var(--space-9);
  background: var(--color-ivory);
}
.doc-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.doc-content section { display: flex; flex-direction: column; gap: var(--space-4); }
.doc-content section:not(:first-child) {
  padding-top: var(--space-7);
  border-top: var(--border-hairline);
}
.doc-content h2 { margin: 0; }

.doc-list {
  margin: 0;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-body-text);
}
.doc-list li { padding-left: var(--space-1); }

/* Important notices (privacy/emergency wording, template-review notice)
   — set off with a left rule and plum color rather than a bordered box,
   so they read as emphasis, not a card. */
.doc-callout {
  margin: 0;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-plum);
  color: var(--color-plum);
  font-weight: 500;
}

.doc-address {
  margin: var(--space-2) 0 0;
  color: var(--color-body-text);
  line-height: 1.9;
}
.doc-address a {
  color: var(--color-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 8px 0;
  margin: -8px 0;
}

@media (min-width: 1024px) {
  .doc-hero { padding: var(--space-9) var(--pad-desktop) var(--space-7); }
  .doc-toc { padding: var(--space-6) var(--pad-desktop); }
  .doc-body { padding: var(--space-9) var(--pad-desktop) var(--space-10); }
}

/* 404 page — reuses .doc-hero/.doc-section__inner (the same restrained
   utility-page container as Privacy/Accessibility); only the action row
   and quiet call line are new. No photography, single simple block. */
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.error-page__call {
  margin-top: var(--space-2);
  color: var(--color-body-text);
}
.error-page__call a {
  color: var(--color-plum);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

/* =========================================================
   Utility
   ========================================================= */

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