/* Generated by build.py. Edit src/styles.css, not this file.
   Colour tokens are emitted from brand/palette.py, where every pair below is
   verified against WCAG 2.1 contrast requirements at build time.

   The site is light only. The on-dark tokens exist because the mission band,
   the closing call to action, and the footer sit on navy, not because there
   is a dark mode. */

:root {
  --navy: #0D1B3D;
  --teal: #14B8A6;
  --paper: #F5FAF9;
  --surface: #FDFEFE;
  --sink: #E8F3F0;
  --mint: #D7F2EB;
  --line: #D4DFDC;
  --ink: #0D1B3D;
  --body: #434E65;
  --muted: #616A7C;
  --teal-ink: #1C7668;
  --teal-ui: #1B9683;
  --line-strong: #7D8886;
  --navy-deep: #0C162C;
  --navy-surface: #1A253D;
  --navy-raised: #27344E;
  --navy-line: #384258;
  --ink-on-dark: #F1F9F7;
  --body-on-dark: #C2C8D4;
  --muted-on-dark: #878E9B;
  --teal-on-dark: #289E8A;
  --line-on-dark: #606671;
  --danger-bg: #FFE7E4;
  --danger: #B64340;
  --success-bg: #DDF6E1;
  --success: #2E7743;
  --focus: #0D1B3D;
  --focus-on-dark: #F1F9F7;
  --ink-on-light: #0D1B3D;
  --body-on-light: #434E65;
  --muted-on-light: #616A7C;
  --teal-on-light: #1C7668;
  color-scheme: light;
}

/* ==========================================================================
   A&A Legacy Care Services
   Design system. No framework, no preprocessor, no build step beyond the
   token block that build.py prepends from brand/palette.py.

   Direction: warm clinical. The brand mark is a classical serif wordmark over
   a teal heart, so the page pairs a modern serif for display with a neutral
   grotesque for everything that has to be read carefully. Restrained motion,
   generous type, high contrast. The audience is older adults and their adult
   children, so nothing here is small, thin, or low contrast.

   Every colour comes from a token verified in brand/palette.py. Do not
   introduce a raw hex value in this file.
   ========================================================================== */

/* --------------------------------------------------------------- typefaces */
/* Self-hosted so no third party sees a visitor's IP, and so the CSP does not
   need to allow an external font host. */

@font-face {
  font-family: 'Newsreader';
  src: url('../assets/fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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: 'Newsreader';
  src: url('../assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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: 'Geist';
  src: url('../assets/fonts/geist-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------- scales */

:root {
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;

  /* Fluid type. Body starts at 17px because a large share of this audience is
     reading on a phone at arm's length. */
  --step--2: clamp(0.76rem, 0.74rem + 0.10vw, 0.82rem);
  --step--1: clamp(0.88rem, 0.85rem + 0.14vw, 0.96rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.16vw, 1.14rem);
  --step-1: clamp(1.22rem, 1.16rem + 0.30vw, 1.42rem);
  --step-2: clamp(1.44rem, 1.33rem + 0.55vw, 1.80rem);
  --step-3: clamp(1.72rem, 1.52rem + 0.98vw, 2.30rem);
  --step-4: clamp(2.05rem, 1.72rem + 1.62vw, 2.95rem);
  --step-5: clamp(2.42rem, 1.90rem + 2.55vw, 3.80rem);
  --step-6: clamp(2.75rem, 1.98rem + 3.75vw, 4.75rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* One radius system, applied everywhere. Interactive controls are pills,
     containers are 16px, inputs are 10px. Documented so it stays consistent. */
  --r-pill: 999px;
  --r-card: 16px;
  --r-input: 10px;
  --r-chip: 8px;

  --wrap: 78rem;
  --wrap-narrow: 46rem;
  --measure: 68ch;

  --shadow-1: 0 1px 2px oklch(0.34 0.075 264 / 0.05),
    0 2px 8px oklch(0.34 0.075 264 / 0.04);
  --shadow-2: 0 2px 4px oklch(0.34 0.075 264 / 0.05),
    0 12px 28px oklch(0.34 0.075 264 / 0.07);
  --shadow-3: 0 4px 8px oklch(0.34 0.075 264 / 0.06),
    0 24px 56px oklch(0.34 0.075 264 / 0.10);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;

  --header-h: 4.5rem;
}

/* --------------------------------------------------------------- base reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

/* <picture> generates no box of its own, so wrapping an <img> in one to add a
   WebP source does not disturb any layout the img was already participating
   in: flex items, auto margins, and grid placement all still apply to the img. */
picture { display: contents; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  /* 1.12 rather than 1 so italic descenders in display type never clip. */
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-ink); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }

strong, b { font-weight: 600; color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

ul, ol { padding-left: 1.25em; margin: 0 0 var(--sp-4); }
li { margin-bottom: var(--sp-2); max-width: var(--measure); }

/* Focus. Two rings: the brand navy plus a paper-coloured offset, so the
   indicator stays visible even when it lands on a card edge, a teal chip, or
   an image. Never remove this. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 6px var(--paper);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--teal); color: var(--navy); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 100;
  transform: translateY(-200%);
  background: var(--navy); color: var(--surface);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  font-weight: 600; text-decoration: none;
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--surface); }

/* ------------------------------------------------------------------ layout */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.band-sink { background: var(--sink); }
.band-mint { background: var(--mint); }
.band-dark {
  background: var(--navy-deep);
  color: var(--body-on-dark);
  --ink: var(--ink-on-dark);
  --body: var(--body-on-dark);
  --muted: var(--muted-on-dark);
  --teal-ink: var(--teal-on-dark);
  --line: var(--line-on-dark);
  --line-strong: var(--line-on-dark);
  --surface: var(--navy-surface);
  --paper: var(--navy-deep);
  --focus: var(--focus-on-dark);
}

.center { text-align: center; }
.center p, .center .lead { margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-4); }

/* Section heading block. Stacked, never a big-headline-left plus
   small-paragraph-right split. */
.head { max-width: 46rem; margin-bottom: var(--sp-7); }
.head--center { margin-inline: auto; text-align: center; }
.head p { margin-inline: auto; }

.kicker {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-ink); margin: 0 0 var(--sp-3);
}

.lead {
  font-size: var(--step-1); line-height: 1.55; color: var(--body);
  max-width: 42rem;
}

/* ------------------------------------------------------------------ header */

.header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(from var(--paper) l c h / 0.88);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
@supports not (background: oklch(from white l c h / 0.5)) {
  .header { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.header__inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex: none; margin-right: auto; }
.brand img { width: 190px; height: auto; }
.brand:focus-visible { border-radius: 6px; }
@media (max-width: 24rem) { .brand img { width: 150px; } }

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a, .nav button {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  color: var(--ink); text-decoration: none; background: none; border: 0;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap; line-height: 1.4;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav a:hover, .nav button:hover { background: var(--sink); color: var(--ink); }
.nav a[aria-current='page'] { color: var(--teal-ink); font-weight: 600; }
.nav a[aria-current='page']::after {
  content: ''; display: block; height: 2px; margin-top: 2px;
  background: var(--teal-ui); border-radius: 2px;
}

/* Disclosure menu for the secondary pages. Nav stays on one line at desktop. */
.menu { position: relative; }
.menu__btn { display: inline-flex; align-items: center; gap: var(--sp-1); }
.menu__btn svg { width: 1em; height: 1em; transition: transform var(--dur-2) var(--ease); }
.menu__btn[aria-expanded='true'] svg { transform: rotate(180deg); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 15rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-3);
  padding: var(--sp-2); display: grid; gap: 2px;
}
.menu__panel[hidden] { display: none; }
.menu__panel a {
  display: block; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-chip);
  font-size: var(--step--1); width: 100%;
}
.menu__panel a:hover { background: var(--sink); }

.header__cta { flex: none; margin-left: var(--sp-2); }
/* Scoped to .header so it outranks the .btn display rule further down the
   file. Without the extra specificity the burger shows at desktop width. */
.header .nav-toggle { display: none; }

@media (max-width: 60rem) {
  .header__inner { gap: var(--sp-3); }
  .header .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2); padding: var(--sp-3) var(--sp-5) var(--sp-5);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav a, .nav button {
    font-size: var(--step-0); padding: var(--sp-4);
    border-radius: var(--r-input); width: 100%; text-align: left; justify-content: space-between;
  }
  .nav a[aria-current='page']::after { display: none; }
  .nav a[aria-current='page'] { background: var(--mint); }
  .menu { position: static; }
  .menu__panel {
    position: static; box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; margin: var(--sp-1) 0 var(--sp-2) var(--sp-4); padding: 0;
  }
  /* Scoped to .header for the same reason as .nav-toggle: it has to outrank
     the .btn display rule that appears later in this file. */
  .header .header__cta { display: none; }
  .header .nav .nav__cta { display: inline-flex; }
}
@media (min-width: 60.0625rem) { .header .nav .nav__cta { display: none; } }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--sans); font-size: var(--step-0); font-weight: 600;
  line-height: 1.2; text-decoration: none; white-space: nowrap;
  padding: 0.85em 1.6em; border-radius: var(--r-pill); border: 2px solid transparent;
  cursor: pointer; transition: background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--navy); color: var(--surface); box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--navy-surface); color: var(--surface); box-shadow: var(--shadow-2); }

.btn--accent { background: var(--teal); color: var(--navy); }
.btn--accent:hover { background: var(--teal-ui); color: var(--surface); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--sink); color: var(--ink); border-color: var(--ink); }

.btn--on-dark { background: var(--ink-on-dark); color: var(--navy-deep); }
.btn--on-dark:hover { background: var(--teal); color: var(--navy); }

.btn--ghost-on-dark { background: transparent; color: var(--ink-on-dark); border-color: var(--line-on-dark); }
.btn--ghost-on-dark:hover { background: var(--navy-surface); color: var(--ink-on-dark); border-color: var(--ink-on-dark); }

.btn--lg { font-size: var(--step-1); padding: 0.9em 1.9em; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row--center { justify-content: center; }

/* A phone number is the primary conversion on a care site, so it gets a
   dedicated treatment rather than being a plain link. */
.tel-lg {
  font-family: var(--serif); font-size: var(--step-2); font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: var(--sp-3);
}
.tel-lg:hover { color: var(--teal-ink); }
.tel-lg svg { width: 0.8em; height: 0.8em; color: var(--teal-ui); }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative; overflow: hidden;
  padding-top: clamp(2.5rem, 1rem + 5vw, 5rem);
  padding-bottom: clamp(3rem, 1.5rem + 6vw, 6rem);
  text-align: center;
}
/* Abstract brand field, not a photograph and not a fake screenshot. Two soft
   colour pools echoing the mark's teal heart inside a navy house. */
.hero__glow {
  position: absolute; inset: -30% -10% auto; height: 130%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 40% at 50% 22%, oklch(0.86 0.075 179 / 0.55), transparent 70%),
    radial-gradient(38% 34% at 18% 12%, oklch(0.90 0.045 179 / 0.45), transparent 72%),
    radial-gradient(40% 36% at 84% 16%, oklch(0.88 0.035 264 / 0.42), transparent 72%);
}
.hero > .wrap { position: relative; z-index: 1; }

.hero__mark { width: clamp(76px, 12vw, 112px); height: auto; margin: 0 auto var(--sp-5); }
.hero h1 { font-size: var(--step-6); margin-bottom: var(--sp-5); }
.hero h1 em {
  font-style: italic; color: var(--teal-ink);
  /* Descender room for the italic g and y. */
  line-height: 1.14; padding-bottom: 0.06em; display: inline-block;
}
.hero__lead {
  font-size: var(--step-1); line-height: 1.55; color: var(--body);
  max-width: 34rem; margin: 0 auto var(--sp-6);
}
.hero .btn-row { margin-bottom: var(--sp-5); }
.hero__note { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* The hero photograph, below the call to action rather than behind the type,
   so nothing has to fight a background image for contrast. */
.hero__figure { margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.hero__figure img {
  width: 100%; border-radius: var(--r-card);
  box-shadow: var(--shadow-3);
}

/* Trust row sits below the hero, never inside it. */
.trust {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: var(--sp-6);
}
.trust__item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.trust__item svg { width: 1.75rem; height: 1.75rem; color: var(--teal-ui); }
.trust__item strong { display: block; font-size: var(--step-0); color: var(--ink); line-height: 1.35; margin-bottom: 0.15em; }
.trust__item span { font-size: var(--step--1); color: var(--muted); }
@media (min-width: 52.0625rem) { .trust { gap: var(--sp-7); padding-block: var(--sp-7); } }
@media (max-width: 52rem) { .trust { grid-template-columns: 1fr; gap: var(--sp-5); } }

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

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.card h3 { margin: 0; }
.card p { margin: 0; }
.card__icon {
  width: 3rem; height: 3rem; border-radius: var(--r-chip);
  display: grid; place-items: center; background: var(--mint); color: var(--teal-ink);
  margin-bottom: var(--sp-2);
}
.card__icon svg { width: 1.6rem; height: 1.6rem; }
.band-dark .card { background: var(--navy-surface); border-color: var(--navy-line); }
.band-dark .card__icon { background: var(--navy-raised); color: var(--teal-on-dark); }

/* Photo cards. The image runs to the card edge and the text sits below it, so
   the photograph does the work the icon used to. */
.card--photo { padding: 0; gap: 0; overflow: hidden; }
.card--photo .card__photo { width: 100%; height: auto; object-fit: cover; }
.card--photo .card__body {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}

/* Standalone photograph in a content column. */
.figure-wide {
  width: 100%; border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
}

/* Service grid. Five services, five cells, no filler tile. The first cell
   spans two columns on wide screens so the grid has rhythm. */
.bento { display: grid; gap: var(--sp-4); grid-template-columns: repeat(6, 1fr); }
.bento > * { grid-column: span 2; }
.bento > :nth-child(1) { grid-column: span 3; }
.bento > :nth-child(2) { grid-column: span 3; }
.bento__feature {
  background: var(--navy-deep); color: var(--body-on-dark); border-color: var(--navy-deep);
}
.bento__feature h3 { color: var(--ink-on-dark); }
.bento__feature .card__icon { background: var(--navy-raised); color: var(--teal-on-dark); }
.bento__tint { background: var(--mint); border-color: transparent; }
.bento__tint .card__icon { background: var(--surface); }
@media (max-width: 62rem) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > *, .bento > :nth-child(1), .bento > :nth-child(2) { grid-column: span 1; }
}
@media (max-width: 40rem) {
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: span 1; }
}

/* --------------------------------------------------------------- how it works
   Three moves, labelled by the verb rather than by "Step 1 of 3". */

.steps { display: grid; gap: var(--sp-6); grid-template-columns: repeat(3, 1fr); counter-reset: step; }
/* 3.5rem clears the 2.5rem numbered disc plus a rem of breathing room. Any
   less and the disc sits on top of the heading. */
.steps__item { position: relative; padding-top: 3.5rem; }
.steps__item::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--navy); color: var(--surface);
  font-family: var(--sans); font-size: var(--step--1); font-weight: 600;
}
.steps__item::after {
  content: ''; position: absolute; top: 1.25rem; left: 3rem; right: -1rem;
  height: 1px; background: var(--line);
}
.steps__item:last-child::after { display: none; }
.steps h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
@media (max-width: 52rem) {
  .steps { grid-template-columns: 1fr; gap: var(--sp-5); }
  .steps__item { padding-top: 0; padding-left: 3.75rem; }
  .steps__item::after { top: 3rem; left: 1.25rem; right: auto; bottom: -1.5rem; width: 1px; height: auto; }
}

/* -------------------------------------------------------------------- split */

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; grid-template-columns: 1fr 1fr; }
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 56rem) { .split, .split--wide-left { grid-template-columns: 1fr; } }

/* Checklist. Used for the caregiver screening list, which is the most
   persuasive content on the site because it is all verifiable. */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.checks li { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--sp-3); margin: 0; max-width: none; }
.checks svg { width: 1.6rem; height: 1.6rem; color: var(--teal-ink); margin-top: 0.1em; }
.checks strong { display: block; color: var(--ink); }
.checks span { color: var(--body); font-size: var(--step--1); }
.band-dark .checks svg { color: var(--teal-on-dark); }

/* Two columns on wide screens. A single centred column of eight items in a
   1400px window is the thing that makes a desktop page read like a phone. */
@media (min-width: 56rem) {
  .checks--2col { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-7); }
}

/* -------------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--mint); color: var(--navy);
  border-radius: var(--r-chip); padding: var(--sp-2) var(--sp-4);
  font-size: var(--step--1); font-weight: 500; margin: 0; max-width: none;
}
.chip svg { width: 1.1em; height: 1.1em; color: var(--teal-ink); }
.band-dark .chip { background: var(--navy-raised); color: var(--ink-on-dark); }
.band-dark .chip svg { color: var(--teal-on-dark); }

/* -------------------------------------------------------------------- quote */

.quote {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--sp-6); margin: 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.quote__mark { width: 2rem; height: 2rem; color: var(--teal-ui); }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.quote figcaption { font-size: var(--step--1); color: var(--muted); margin-top: auto; }
.quote figcaption b { display: block; color: var(--ink); font-size: var(--step-0); font-weight: 600; }

/* The mission statement, set as the one genuinely large piece of display type
   on the page. It is the client's own wording, so it gets the room. */
.mission {
  font-family: var(--serif); font-size: var(--step-3); line-height: 1.3;
  font-weight: 400; color: var(--ink-on-dark);
  margin: var(--sp-4) auto 0; max-width: 34ch; text-wrap: balance;
}

/* ------------------------------------------------------------------ lantern
   The only glass on the site, and the one place that earns it: the plate sits
   on a photograph, so the blur has something real to act on. Frosted glass
   over a flat colour is just a paler rectangle with extra paint cost.

   The plate crosses the lower third of the picture on purpose. These are
   photographs of people and the faces are the whole reason they are here, so
   it sits over the scrubs and leaves the faces alone.

   Text sits either side of the picture rather than on top of it, so none of
   the reading depends on what a photograph happens to be doing behind it. */

/* The aside is shorter than the form beside it, and .split centres by default,
   which floats it into the middle of the column and leaves a hole at the top.
   On a page this tall, top-aligned is the only alignment that reads. */
.contact-grid { align-items: start; }

.lantern { overflow: hidden; }

.lantern__grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  grid-template-columns: 1fr minmax(0, 1.9fr) 1fr;
  align-items: center;
}

/* Below the three-column threshold the picture leads and the two columns of
   text fall in under it, which is the order the content wants anyway. */
@media (max-width: 66rem) {
  .lantern__grid { grid-template-columns: 1fr; max-width: 42rem; margin-inline: auto; }
  .lantern__stage { order: -1; }
}

.lantern__stage {
  position: relative;
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-3);
}

/* Cropped taller than the source 16:9 so there is room for the plate under
   the faces rather than across them, and held off the top so the crop takes
   the heads rather than the ceiling. */
.lantern__stage > picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: inherit;
}

/* A floor under the plate, so the frost has a consistent value beneath it
   rather than whatever the photograph happens to be doing down there. */
.lantern__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(to top,
    oklch(0.18 0.045 264 / 0.5), oklch(0.18 0.045 264 / 0));
  pointer-events: none;
}

.lantern__plate {
  position: absolute;
  inset: auto var(--sp-4) var(--sp-4) var(--sp-4);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 0.5rem + 1.5vw, 1.6rem);
  padding: var(--sp-4) var(--sp-5);
  border-radius: calc(var(--r-card) - 4px);
  border: 1px solid oklch(1 0 0 / 0.5);
  background: oklch(0.94 0.03 179 / 0.72);
  box-shadow: 0 10px 30px oklch(0.18 0.045 264 / 0.3),
              inset 0 1px 0 oklch(1 0 0 / 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);

  /* The plate is a light surface inside a dark band, so it has to put the
     light-background text colours back. Without this the copy on it inherits
     the on-dark ramp and turns pale grey on pale mint. */
  color: var(--body-on-light);
  --ink: var(--ink-on-light);
  --body: var(--body-on-light);
  --muted: var(--muted-on-light);
  --teal-ink: var(--teal-on-light);
}

/* Where the browser cannot blur, the plate becomes an opaque mint card. Not a
   downgrade worth apologising for: the words stay exactly as readable, which
   is the part that matters. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .lantern__plate { background: oklch(0.94 0.03 179 / 0.97); }
}

.lantern__logo {
  width: clamp(5.5rem, 4rem + 7vw, 10.5rem);
  height: auto;
  flex: 0 0 auto;
  display: block;
}

.lantern__rule {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  background: oklch(0.18 0.045 264 / 0.18);
}

.lantern__tagline {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--ink-on-light);
  margin: 0;
  text-wrap: balance;
}

/* The plate stays horizontal at every width. Stacking it made it tall enough
   to cover the faces, which is the one thing the photograph is here for. A
   squarer crop below the same threshold buys back the height it needs. */
@media (max-width: 40rem) {
  .lantern__stage > picture img { aspect-ratio: 5 / 4; object-position: 50% 14%; }
  .lantern__plate {
    inset: auto var(--sp-3) var(--sp-3) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
  }
  .lantern__tagline { font-size: var(--step-0); }
}

.lantern__side > * + * { margin-top: var(--sp-4); }
.lantern__side h2 { font-size: var(--step-2); margin: 0; }
.lantern__side p { margin: 0; max-width: 34ch; }
.lantern__side--end { text-align: left; }

/* The right column mirrors the left in position, not in alignment. Ragged-left
   is measurably slower to read, and this site is read by people in their
   seventies and eighties, so only the heading and the button take the mirror. */
@media (min-width: 66.0625rem) {
  .lantern__side--end { text-align: left; }
  .lantern__side--end h2 { text-align: right; }
  .lantern__side--end p { margin-left: auto; }
  .lantern__side--end .btn-row { justify-content: flex-end; }
}

.lantern__quote {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--ink-on-dark);
  max-width: 26ch;
}

/* The plate lifts a little as the section arrives. One movement, on the one
   element the section is built around, rather than a fade on everything. */
@media (prefers-reduced-motion: no-preference) {
  .lantern__stage { transition: transform var(--dur-3) var(--ease); }
  .lantern__stage:hover { transform: translateY(-4px); }
}

/* ------------------------------------------------------------------ notices */

.notice {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-4);
  background: var(--sink); border: 1px solid var(--line);
  border-left: 4px solid var(--teal-ui);
  border-radius: var(--r-input); padding: var(--sp-5);
}
.notice svg { width: 1.5rem; height: 1.5rem; color: var(--teal-ink); }
/* The notice heading is an h2 for correct document structure, so it has to
   opt out of the .prose h2 rule that adds a top rule and heavy spacing. */
.notice h2 {
  font-size: var(--step-1); margin: 0 0 var(--sp-2);
  border-top: 0; padding-top: 0;
}
.notice p:last-child { margin-bottom: 0; }
.notice--warn { background: var(--danger-bg); border-left-color: var(--danger); }
.notice--warn svg { color: var(--danger); }

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

.faq { display: grid; gap: var(--sp-3); }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sp-5) var(--sp-6);
  font-family: var(--serif); font-size: var(--step-1); font-weight: 500; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 0.7rem; height: 0.7rem;
  border-right: 2px solid var(--teal-ink); border-bottom: 2px solid var(--teal-ink);
  transform: rotate(45deg); transition: transform var(--dur-2) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { background: var(--sink); }
.faq__body { padding: 0 var(--sp-6) var(--sp-5); }
.faq__body p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- forms */

.form { display: grid; gap: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 44rem) { .form-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--sp-2); }
.field > label { font-weight: 600; color: var(--ink); font-size: var(--step--1); }
.field .req { color: var(--danger); margin-left: 0.15em; }
.field .help { font-size: var(--step--1); color: var(--muted); margin: 0; }

.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: var(--step-0); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-input); padding: 0.75em 0.9em; width: 100%;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
/* One SVG chevron rather than two clipped gradients. The gradient trick lands
   on different subpixels depending on the field width, so adjacent selects
   ended up with visibly different arrows. */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%230D1B3D'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-position: right 0.9rem center;
  background-size: 1.1rem 1.1rem;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'], .field select[aria-invalid='true'] {
  border-color: var(--danger); border-width: 2px;
}
/* Error text. Scoped to .err rather than .field .err, because the consent and
   certification errors sit outside a .field wrapper: the checkbox lives in
   .choice and its error is the next sibling. Scoping this to .field left those
   two permanently visible with an unsized icon filling the column. */
.err {
  display: none; font-size: var(--step--1); color: var(--danger); font-weight: 500;
  align-items: center; gap: var(--sp-2); margin: 0;
}
.err svg { width: 1.1em; height: 1.1em; flex: none; }
.field[data-invalid] .err { display: flex; }

.choice { display: flex; gap: var(--sp-3); align-items: flex-start; }
.choice input { width: 1.25rem; height: 1.25rem; margin: 0.2em 0 0; flex: none; accent-color: var(--navy); }
.choice label { font-size: var(--step--1); color: var(--body); font-weight: 400; }

fieldset { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-5); margin: 0; }
legend { font-weight: 600; color: var(--ink); padding-inline: var(--sp-2); font-size: var(--step-0); }

/* A long application reads better as titled sections than as one wall of
   inputs, and a fieldset per section gives screen readers the same grouping
   sighted users get from the rule and the heading. */
.form-section {
  border: 0; padding: 0; margin: 0;
  display: grid; gap: var(--sp-5);
  padding-top: var(--sp-7); margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.form-section > legend {
  font-family: var(--serif); font-size: var(--step-2); font-weight: 500;
  color: var(--ink); padding: 0; float: left; width: 100%;
  margin-bottom: var(--sp-2); line-height: 1.2;
}
.form-section > legend + * { clear: both; }
.form-section__hint {
  font-size: var(--step--1); color: var(--muted); margin: 0 0 var(--sp-2);
}

/* Checkbox and radio groups. Two columns on desktop so a long availability
   list does not become a scroll. */
.choice-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 44rem) { .choice-grid { grid-template-columns: 1fr; } }
.choice-grid .choice {
  border: 1px solid var(--line); border-radius: var(--r-input);
  padding: var(--sp-3) var(--sp-4); background: var(--surface);
  align-items: center;
}
.choice-grid .choice:hover { border-color: var(--ink); }
.choice-grid .choice label { font-size: var(--step-0); color: var(--ink); }

/* File input. The native control is kept and styled rather than replaced by a
   div, so keyboard and screen reader behaviour stay intact. */
.field input[type='file'] {
  padding: var(--sp-3); background: var(--sink); cursor: pointer;
  border-style: dashed; border-width: 2px;
}
.field input[type='file']::file-selector-button {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--navy); color: var(--surface);
  border: 0; border-radius: var(--r-pill);
  padding: 0.5em 1.1em; margin-right: var(--sp-4);
}
.field input[type='file']:hover { border-color: var(--ink); }

.form__status { display: none; }
.form__status[data-state] { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-input); }
.form__status[data-state='ok'] { background: var(--success-bg); color: var(--success); }
.form__status[data-state='err'] { background: var(--danger-bg); color: var(--danger); }
.form__status[data-state='busy'] { background: var(--sink); color: var(--body); }
.form__status[data-state='busy'] svg { opacity: 0.55; }
.form__status svg { width: 1.5rem; height: 1.5rem; }
.form__status b { display: block; color: inherit; }

/* ------------------------------------------------------------------ funnel
   The five-step application. Every rule here is scoped to .is-funnel, which
   JavaScript adds, so the no-script version stays a plain long form. */

.is-funnel .form-section {
  border-top: 0; padding-top: 0; margin-top: 0;
}
/* A step holding two sections still gets a divider between them. */
.is-funnel .form-section:not([data-first-in-step]) {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-7);
  margin-top: var(--sp-6);
}
.is-funnel .form-section[hidden] { display: none; }

.funnel__progress { margin-bottom: var(--sp-6); }
.funnel__count {
  font-size: var(--step--1); font-weight: 600; color: var(--ink);
  margin: 0 0 var(--sp-3);
}

.funnel__bar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--sp-2); list-style: none; padding: 0; margin: 0;
}
.funnel__bar li {
  margin: 0; max-width: none;
  border-top: 4px solid var(--line);
  padding-top: var(--sp-2);
  font-size: var(--step--2); color: var(--muted);
  line-height: 1.3;
}
.funnel__bar li.is-done { border-top-color: var(--teal-ui); color: var(--body); }
.funnel__bar li.is-current { border-top-color: var(--navy); color: var(--ink); font-weight: 600; }

/* On a phone the step names do not fit, so the bar becomes a plain progress
   meter and the count above it carries the words. */
@media (max-width: 44rem) {
  .funnel__bar li span { display: none; }
  .funnel__bar li { padding-top: 0; }
}

.funnel__nav {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.funnel__nav [hidden] { display: none; }
.funnel__nav .btn { flex: 1 1 12rem; }

/* The real submit lives in the last fieldset and is revealed there, so the
   nav row holds only Back and Continue. */
.is-funnel button[type="submit"][hidden] { display: none; }

/* Nested field groups: shift preferences, certifications, and the two yes/no
   questions. A real fieldset so assistive technology gets the same grouping a
   sighted reader gets from the heading, but stripped of the default chrome. */
.group { border: 0; padding: 0; margin: 0; }
.group__legend {
  font-size: var(--step--1); font-weight: 600; color: var(--ink);
  padding: 0; margin-bottom: var(--sp-2); float: left; width: 100%;
}
.group__legend + * { clear: both; }
.group .form-section__hint { margin: 0 0 var(--sp-3); clear: both; }

.choice-grid--tight { grid-template-columns: repeat(2, minmax(0, 12rem)); }

/* Radios share the checkbox treatment so a yes/no question does not look like
   a different species of control from the one above it. */
.choice input[type='radio'] {
  width: 1.25rem; height: 1.25rem; margin: 0.15em 0 0; flex: none;
  accent-color: var(--navy);
}

/* Conditional field. Hidden only once JavaScript has decided it is not
   relevant; with no script it stays visible, because an extra optional
   question is a much smaller problem than one nobody can reach. */
[data-conditional][hidden] { display: none; }

/* Turnstile. The widget sits inside the form so its hidden response input is
   picked up by new FormData(form) with no extra code. In interaction-only mode
   most visitors never see it, so it collapses to nothing rather than leaving a
   permanent gap above the button. */
.cf-turnstile:not(:empty) { margin-bottom: var(--sp-2); }

/* -------------------------------------------------------------------- prose
   Legal, policy, and blog pages. Narrow measure, clear hierarchy, real
   spacing between sections so a long document stays navigable. */

.prose { max-width: var(--wrap-narrow); }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-6); }
.prose ul, .prose ol { margin-bottom: var(--sp-5); }
.prose li { margin-bottom: var(--sp-3); }
.prose > p, .prose li { color: var(--body); }
.prose .cite { font-size: var(--step--1); color: var(--muted); font-style: normal; }

.toc { background: var(--sink); border-radius: var(--r-card); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-7); }
.toc h2 { font-size: var(--step-1); margin: 0 0 var(--sp-3); border: 0; padding: 0; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: var(--sp-2); }

/* Interior page masthead. A band with a rule under it, not the opening of an
   article. See page_head() in kit.py for what this replaced and why. */
.page-head {
  background: var(--sink);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.25rem);
}

.page-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(2rem, 1rem + 4vw, 4rem);
  row-gap: var(--sp-4);
  align-items: start;
}

.page-head .crumb { grid-column: 1 / -1; margin-bottom: 0; }
.page-head h1 { font-size: var(--step-4); margin: 0; text-wrap: balance; }
.page-head__aside > * + * { margin-top: var(--sp-4); }
.page-head .lead { margin-bottom: 0; }

/* One column before the headline and the lede start fighting for width. The
   lede then reads as a subtitle again, which is the correct fallback. */
@media (max-width: 56rem) {
  .page-head__grid { grid-template-columns: 1fr; }
  .page-head__aside { padding-bottom: 0; }
}

.crumb { font-size: var(--step--1); color: var(--muted); margin-bottom: var(--sp-4); }
.crumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.crumb li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.crumb li + li::before { content: '/'; color: var(--line-strong); }

.updated { font-size: var(--step--1); color: var(--muted); margin-top: var(--sp-6); }

/* -------------------------------------------------------------------- table */

.table-scroll { overflow-x: auto; margin-bottom: var(--sp-5); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 600; background: var(--sink); }
caption { text-align: left; color: var(--muted); font-size: var(--step--1); padding-bottom: var(--sp-3); }

/* ------------------------------------------------------------------ cta band */

.cta-band { background: var(--navy-deep); color: var(--body-on-dark); text-align: center; }
.cta-band h2 { color: var(--ink-on-dark); }
.cta-band p { color: var(--body-on-dark); margin-inline: auto; }

/* ------------------------------------------------------------------- footer */

.footer { background: var(--navy-deep); color: var(--body-on-dark); padding-block: var(--sp-8) var(--sp-6); }
.footer a { color: var(--body-on-dark); }
.footer a:hover { color: var(--ink-on-dark); }
/* Links sitting inside a run of prose keep their underline, because colour
   alone is not a sufficient distinction (WCAG 1.4.1). Links in a nav list are
   already distinguishable by position, so those drop it. */
.footer ul a, .footer__legal nav a { text-decoration: none; }
.footer ul a:hover, .footer__legal nav a:hover { text-decoration: underline; }
.footer__grid { display: grid; gap: var(--sp-7); grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer__brand img { width: 210px; margin-bottom: var(--sp-4); }
.footer h2 {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-on-dark);
  margin-bottom: var(--sp-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.footer li { margin: 0; font-size: var(--step--1); }
.footer__legal {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--navy-line);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: space-between;
  font-size: var(--step--2); color: var(--muted-on-dark);
}
.footer__legal p { margin: 0; max-width: none; }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.footer__disclaimer { font-size: var(--step--2); color: var(--muted-on-dark); max-width: 60ch; margin-top: var(--sp-5); }
@media (max-width: 62rem) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* --------------------------------------------------------------- test fill
   The local-only fill bar. JavaScript refuses to create this anywhere but
   localhost, so these rules never match on a deployed page. Styled to look
   like tooling rather than part of the site, so it can never be mistaken for
   something a visitor is meant to use. */

.testfill {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  max-width: calc(100vw - 2rem);
  background: var(--navy-deep); color: var(--ink-on-dark);
  border: 1px solid var(--navy-line); border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-3);
  font-size: var(--step--2);
}
.testfill__tag {
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  color: var(--teal-on-dark);
}
.testfill__btn {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--ink-on-dark); color: var(--navy-deep);
  border: 0; border-radius: var(--r-pill);
  padding: 0.45em 1em;
}
.testfill__btn:hover { background: var(--teal); }
.testfill__note { color: var(--muted-on-dark); }

@media print { .testfill { display: none !important; } }

/* --------------------------------------------------------------- animation
   Entrance fades and hover transitions only. Nothing loops, nothing hijacks
   the scroll, nothing moves while it is being read. The default state is
   visible, so a failed script never hides content from anyone. */

.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(1rem);
    transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .card { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
}

/* WCAG 2.1 SC 2.3.3. Anyone who has asked their operating system for less
   motion gets a completely static page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ utility */

.hide { display: none !important; }
@media (max-width: 40rem) { .hide-sm { display: none !important; } }

/* --------------------------------------------------------------------- print */

@media print {
  .header, .footer, .cta-band, .skip-link, .hero__glow { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  a[href^='#']::after, a[href^='tel']::after { content: ''; }
  .card, .quote, .notice { border: 1px solid #999; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}