/* ══════════════════════════════════════════════════════════════════════════
   FONTS — self-hosted
   Previously a render-blocking request to fonts.googleapis.com, which cost an
   extra DNS + TLS round trip before any text could paint and disclosed every
   visitor to a third party. The files are now served from our own origin.

   Both faces are variable, so one file covers every weight we use. The
   latin-ext subsets carry their own unicode-range, so a browser only fetches
   them if a page actually contains those characters — for an English-language
   site that is almost never.

   font-display: swap keeps text visible during load; the fallback stacks are
   metrically close enough that the swap is not violent.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 340 560;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 340 560;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  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;
}

/* Components: header, hero, cards, timeline, gallery, forms, footer,
   action bar. Everything keyed off the token layer. */

main, .site-header, .site-footer, .mobile-action-bar { position: relative; z-index: 1; }

/* The ambient WebGL light field this once sat over has been removed: on the
   pale grounds it read as smudges rather than lamplight, and the seven motif
   is carried far better by the 120-to-7 collapse and the closing marks.
   .solid is therefore plain opaque ground — no translucency, and no
   backdrop-filter to composite on every large section. */
.solid { background: var(--bg); }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ivory-100) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--ivory-100) 94%, transparent);
}
.header-inner {
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: 0.8rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand-mark { display: grid; place-items: center; color: var(--accent); }
.brand-logo {
  width: 40px; height: 40px;
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(23, 21, 15, 0.14);
  background: #fff;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: 0.01em; }
.brand-sub { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.site-nav { display: flex; align-items: center; gap: clamp(0.45rem, 1vw, 1rem); margin-left: auto; }
.nav-item { position: relative; }
.nav-parent { display: flex; align-items: center; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.35rem 0.08rem;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.nav-link:hover { color: var(--accent); }
.nav-link.is-active { border-bottom-color: var(--brass-400); }

.nav-menu-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-menu-toggle span {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform var(--dur-1) var(--ease-out);
}
.nav-menu-toggle[aria-expanded="true"] span { transform: rotate(225deg) translate(-1px, 1px); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.site-nav + .header-actions { margin-left: 0; }

.nav-toggle {
  display: none;
  position: relative;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 44px; height: 44px;
  cursor: pointer;
  place-items: center;
}
.nav-toggle-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 18px; height: 2px;
  background: var(--ink-strong);
  margin: 0;
  transform: translate(-50%, -4px);
  transition: transform var(--dur-1) var(--ease-out);
}
.nav-toggle-bar + .nav-toggle-bar { transform: translate(-50%, 4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { transform: translate(-50%, 0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translate(-50%, 0) rotate(-45deg); }

/* ── nav dropdowns (desktop) ─────────────────────────────────────────────── */
.nav-menu {
  position: absolute; top: calc(100% + 0.35rem); left: -0.55rem; z-index: 120;
  min-width: 13.5rem;
  background: var(--ivory-100);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(23, 21, 15, 0.16);
  padding: 0.45rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms;
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.55rem; height: 0.65rem; }
.nav-item--menu.is-open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* right-align the last dropdown so it never spills past the viewport edge */
.site-nav .nav-item--menu:last-child .nav-menu { left: auto; right: 0; }
.nav-item--menu:hover > .nav-link,
.nav-item--menu:focus-within > .nav-link,
.nav-item--menu.is-open > .nav-link { color: var(--accent); }
.nav-menu ul { list-style: none; margin: 0; padding: 0.35rem; display: grid; }
.nav-menu-link {
  display: block; padding: 0.55rem 0.75rem;
  border-radius: 8px; text-decoration: none;
  font-size: 0.9rem; color: var(--ink); white-space: nowrap;
}
.nav-menu-link:hover, .nav-menu-link:focus-visible { background: var(--ivory-200); color: var(--accent); }
.nav-menu-link.is-active { color: var(--accent); font-weight: 600; }

@media (max-width: 64rem) {
  body.nav-open { overflow: hidden; }
  .header-inner { padding-block: 0.62rem; }
  .brand { min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-name { font-size: 1rem; white-space: nowrap; }
  .brand-sub { font-size: 0.62rem; white-space: nowrap; }
  .nav-toggle { display: grid; flex: none; }
  .hide-mobile { display: none !important; }
  .site-nav {
    position: fixed;
    inset: var(--header-h, 68px) 0 auto 0;
    max-height: calc(100svh - var(--header-h, 68px));
    overflow-y: auto;
    display: block;
    margin: 0;
    padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--ivory-100) 98%, transparent);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(23, 21, 15, 0.18);
    color: var(--ink-strong);
  }
  .nav-parent { border-bottom: 1px solid var(--line); }
  .nav-link { flex: 1; width: 100%; min-height: 54px; padding-block: 0.75rem; border-bottom: 0; font-family: var(--font-display); font-size: 1.28rem; color: var(--ink-strong) !important; }
  .nav-menu-toggle { width: 48px; height: 54px; color: var(--ink-strong) !important; }
  .nav-menu {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    min-width: 0;
    padding: 0 0 0 1rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: grid-template-rows 280ms var(--ease-out);
  }
  .nav-menu::before { display: none; }
  .nav-menu ul { min-height: 0; padding: 0; }
  .nav-item--menu.is-open .nav-menu { grid-template-rows: 1fr; transform: none; }
  .nav-menu-link { padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 0.98rem; white-space: normal; }
}

@media (max-width: 25rem) {
  .brand-sub { display: none; }
  .brand-name { font-size: 0.96rem; }
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85rem 1.7rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              background var(--dur-1) ease,
              color var(--dur-1) ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-solid { background: var(--ink-strong); color: var(--ivory-100); box-shadow: 0 10px 30px -12px rgb(23 21 15 / 0.45); }
.btn-solid:hover { background: #2b2820; box-shadow: 0 14px 34px -12px rgb(23 21 15 / 0.55); }
.btn-accent { background: var(--accent); color: #fdfcf7; }
.btn-accent:hover { background: var(--olive-500); }
.btn-ghost { border-color: var(--line); color: var(--ink-strong); background: color-mix(in srgb, var(--cream-card) 55%, transparent); }
.btn-ghost:hover { border-color: var(--stone-400); }
.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.9rem; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  min-height: calc(100svh - 62px);
  display: flex;
  align-items: center;
  padding-block: var(--space-5) var(--space-4);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--space-3), 5vw, var(--space-5));
  align-items: end;
  width: 100%;
}
.hero-kicker {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.hero-title {
  font-size: var(--fs-4);
  margin-bottom: var(--space-3);
  line-height: 1.02;
}
.hero-title span { display: block; }
.hero-title em { font-style: italic; color: var(--wood-600); }
.hero-body { max-width: 34rem; font-size: var(--fs-1); color: var(--muted); line-height: 1.55; }
.hero-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

.glance-card {
  background: color-mix(in srgb, var(--cream-card) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: 0 24px 60px -30px rgb(53 49 42 / 0.35);
  backdrop-filter: blur(10px);
}
.glance-title { font-family: var(--font-text); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-2); }
.glance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-3); }
.glance-item b { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 420; color: var(--ink-strong); line-height: 1.1; }
.glance-item span { font-size: 0.88rem; color: var(--muted); line-height: 1.35; display: block; margin-top: 0.15rem; }
.glance-note { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }

@media (max-width: 56rem) {
  .hero { min-height: auto; padding-top: var(--space-4); }
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
}

/* status banner */
.status-banner {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  background: color-mix(in srgb, var(--brass-400) 16%, var(--cream-card));
  border: 1px solid color-mix(in srgb, var(--brass-400) 45%, transparent);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  max-width: 38rem;
  margin-top: var(--space-3);
  font-size: 0.92rem;
}
.status-banner p { margin: 0; color: var(--ink-700); }
.status-dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brass-400);
  translate: 0 0.05em;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass-400) 25%, transparent);
}

/* ── why seven / number cards ────────────────────────────────────────────── */
.point-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: var(--space-3); }
.point-card {
  background: color-mix(in srgb, var(--cream-card) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-1) ease;
}
.point-card:hover { transform: translateY(-4px); border-color: var(--stone-400); }
.point-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--wood-600);
  display: block;
  margin-bottom: 0.6rem;
}
.point-card h3 { margin-bottom: 0.5rem; }
.point-card p { color: var(--muted); font-size: var(--fs--1); line-height: 1.6; }

/* ── split sections (image + text) ───────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  gap: clamp(var(--space-3), 5vw, var(--space-5));
  align-items: center;
}
.split-media img { border-radius: var(--radius-lg); box-shadow: 0 30px 70px -35px rgb(53 49 42 / 0.5); aspect-ratio: 4/3.2; object-fit: cover; width: 100%; }
.split-media figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 0.6rem; }
.split h2 { margin-bottom: var(--space-2); }

.check-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: 0.65rem; }
.check-list li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.7rem; font-size: var(--fs--1); color: var(--ink-700); }
.check-list svg { translate: 0 0.22em; color: var(--accent); }

/* ── day journey ─────────────────────────────────────────────────────────── */
.day-section { --day-sky: 214 62% 60%; }
.day-track { position: relative; display: grid; gap: var(--space-2); }
.day-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease;
}
.day-row.is-active { background: color-mix(in srgb, var(--cream-card) 90%, transparent); border-color: var(--line); }
.day-time { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--wood-600); white-space: nowrap; }
.day-body h3 { font-size: 1.15rem; margin-bottom: 0.2rem; }
.day-body p { color: var(--muted); font-size: var(--fs--1); margin: 0; }
.day-progress {
  position: absolute;
  left: calc(7.5rem + var(--space-3) / 2 - 1px);
  top: 0; bottom: 0;
  width: 2px;
  background: var(--stone-300);
  opacity: 0.5;
}
@media (max-width: 40rem) {
  .day-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .day-time { font-size: 1.05rem; }
}

.chip-cloud { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  font-size: 0.9rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream-card) 70%, transparent);
  color: var(--ink-700);
}

/* ── menu card (dining) ──────────────────────────────────────────────────── */
.menu-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: 0 24px 60px -32px rgb(53 49 42 / 0.4);
}
.menu-day { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--wood-600); margin-bottom: var(--space-2); }
.menu-meal { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-2); padding-block: 0.8rem; border-top: 1px dashed var(--line); }
.menu-meal:first-of-type { border-top: 0; padding-top: 0; }
.menu-meal dt { font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.menu-meal dd { margin: 0; font-family: var(--font-display); font-size: 1.06rem; color: var(--ink-strong); line-height: 1.45; }

/* ── fit columns ─────────────────────────────────────────────────────────── */
.fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: var(--space-3); }
.fit-col { border-radius: var(--radius-lg); padding: var(--space-3); border: 1px solid var(--line); }
.fit-yes { background: color-mix(in srgb, var(--olive-500) 10%, var(--cream-card)); }
.fit-no { background: color-mix(in srgb, var(--ink-700) 6%, var(--cream-card)); }
.fit-col h3 { margin-bottom: var(--space-2); }
.fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.fit-list li { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.6rem; font-size: var(--fs--1); }
.fit-mark { font-family: var(--font-display); font-weight: 560; }
.fit-yes .fit-mark { color: var(--olive-500); }
.fit-no .fit-mark { color: #a05a4d; }

/* ── licensing timeline ──────────────────────────────────────────────────── */
.lic-steps { display: grid; gap: 0; counter-reset: lic; }
.lic-step {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--space-2);
  padding-block: var(--space-2);
  position: relative;
}
.lic-step::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 3.2rem; bottom: -0.4rem;
  width: 2px;
  background: var(--stone-300);
}
.lic-step:last-child::before { display: none; }
.lic-dot {
  width: 2.15rem; height: 2.15rem;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--stone-400);
  background: var(--bg-raised);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  z-index: 1;
}
.lic-step.is-done .lic-dot { background: var(--olive-500); border-color: var(--olive-500); color: #f4f2e9; }
.lic-step.is-current .lic-dot { border-color: var(--brass-400); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brass-400) 22%, transparent); color: var(--wood-600); }
.lic-step h3 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.lic-step p { color: var(--muted); font-size: var(--fs--1); margin: 0; max-width: 40rem; }
.lic-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wood-600); margin-bottom: 0.3rem; }
.lic-step.is-done .lic-tag { color: var(--olive-500); }

/* oversight panel */
.oversight-panel {
  background: color-mix(in srgb, var(--ink-800) 96%, black);
  color: var(--ivory-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
}
.oversight-panel h3 { color: var(--ivory-100); margin-bottom: var(--space-2); }
.oversight-panel p.lede { color: var(--stone-300); }
.over-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.over-list li { border-top: 1px solid rgb(216 208 191 / 0.16); padding-top: var(--space-2); }
.over-list a { color: var(--brass-400); font-weight: 600; text-decoration: none; }
.over-list a:hover { text-decoration: underline; }
.over-role { color: var(--stone-300); font-size: 0.92rem; }
.rights-note { margin-top: var(--space-3); font-size: 0.9rem; color: var(--stone-400); }

/* ── gallery ─────────────────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-2); }
.g-item { position: relative; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; border: 0; padding: 0; background: none; display: block; width: 100%; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); display: block; }
.g-item:hover img, .g-item:focus-visible img { transform: scale(1.04); }
.g-cap {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: 1.6rem 1rem 0.8rem;
  background: linear-gradient(transparent, rgb(23 21 15 / 0.72));
  color: var(--ivory-100);
  font-size: 0.85rem;
  text-align: left;
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.g-item:hover .g-cap, .g-item:focus-visible .g-cap { opacity: 1; }
.g-badge {
  position: absolute;
  top: 0.7rem; left: 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgb(23 21 15 / 0.66);
  color: var(--ivory-100);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
}
.g-a { grid-column: span 7; aspect-ratio: 16/10; }
.g-b { grid-column: span 5; aspect-ratio: 4/3.4; }
.g-c { grid-column: span 4; aspect-ratio: 1/1; }
.g-d { grid-column: span 8; aspect-ratio: 16/8.4; }
@media (max-width: 48rem) {
  .gallery > * { grid-column: span 12 !important; aspect-ratio: 4/3 !important; }
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgb(23 21 15 / 0.92);
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox figure { margin: 0; max-width: min(72rem, 100%); max-height: 100%; display: grid; gap: 0.8rem; justify-items: center; }
.lightbox img { max-height: calc(100svh - 9rem); max-width: 100%; object-fit: contain; border-radius: var(--radius); }
.lightbox figcaption { color: var(--ivory-200); font-size: 0.95rem; text-align: center; }
.lb-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(247 243 234 / 0.35);
  background: rgb(23 21 15 / 0.5);
  color: var(--ivory-100);
  font-size: 1.2rem;
  cursor: pointer;
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgb(247 243 234 / 0.35);
  background: rgb(23 21 15 / 0.5);
  color: var(--ivory-100);
  font-size: 1.25rem;
  cursor: pointer;
}
.lb-prev { left: 1rem; } .lb-next { right: 1rem; }

/* ── FAQ accordion ───────────────────────────────────────────────────────── */
.faq-list { max-width: 52rem; margin-inline: auto; display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.22rem;
  text-align: left;
  padding: var(--space-2) 2.6rem var(--space-2) 0;
  cursor: pointer;
  position: relative;
  color: var(--ink-strong);
  line-height: 1.35;
}
.faq-q::after {
  content: "+";
  position: absolute;
  right: 0.4rem; top: 50%;
  translate: 0 -50%;
  font-size: 1.5rem;
  font-weight: 340;
  color: var(--wood-600);
  transition: transform var(--dur-2) var(--ease-out);
}
.faq-q[aria-expanded="true"]::after { transform: rotate(45deg); }
/* Collapsed ONLY when faq.js has taken charge (it sets data-js on the list).
   Without JavaScript every answer stays open and readable — an accordion that
   cannot be opened is worse than no accordion. */
.faq-list[data-js="true"] .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease-out);
}
.faq-list[data-js="true"] .faq-a > div { overflow: hidden; }
.faq-list[data-js="true"] .faq-a.is-open { grid-template-rows: 1fr; }
/* The toggle is meaningless without JS, so hide the marker in that case. */
.faq-list:not([data-js="true"]) .faq-q__mark { display: none; }
.faq-list:not([data-js="true"]) .faq-q { cursor: default; }
.faq-a p { color: var(--muted); padding-bottom: var(--space-2); max-width: 44rem; }

/* ── team ────────────────────────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: var(--space-3); }
.team-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); }
.avatar {
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--olive-600), var(--wood-600));
  color: var(--ivory-100);
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: var(--space-2);
}
.team-card h3 { margin-bottom: 0.1rem; }
.team-cred { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wood-600); margin-bottom: var(--space-2); }
.team-card p { font-size: var(--fs--1); color: var(--muted); }

.mission-band { text-align: center; max-width: 44rem; margin: var(--space-5) auto 0; }
.mission-quote { font-family: var(--font-display); font-size: var(--fs-2); font-style: italic; color: var(--ink-strong); line-height: 1.35; }
.mission-attr { margin-top: var(--space-2); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ── move-in steps ───────────────────────────────────────────────────────── */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: var(--space-2); counter-reset: mv; }
.step-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2); background: color-mix(in srgb, var(--cream-card) 78%, transparent); counter-increment: mv; }
.step-card::before { content: counter(mv, decimal-leading-zero); font-family: var(--font-display); font-style: italic; color: var(--wood-600); display: block; margin-bottom: 0.4rem; }
.step-card h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.step-card p { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* ── contact form ────────────────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(var(--space-3), 5vw, var(--space-5)); align-items: start; }
@media (max-width: 56rem) { .contact-layout { grid-template-columns: 1fr; } }
.contact-facts { display: grid; gap: var(--space-3); }
.contact-fact b { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.contact-fact a { color: var(--ink-strong); }

.form-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(var(--space-2), 3vw, var(--space-3)); box-shadow: 0 30px 70px -40px rgb(53 49 42 / 0.45); }
.form-field { display: grid; gap: 0.35rem; margin-bottom: var(--space-2); }
.form-field label { font-weight: 600; font-size: 0.92rem; }
.form-field input, .form-field select, .form-field textarea {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--stone-300);
  border-radius: 10px;
  background: #fffdf8;
  color: var(--ink-strong);
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 7rem; }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { outline-offset: 0; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-privacy { font-size: 0.83rem; color: var(--muted); margin-top: var(--space-2); }
.form-status { margin-top: var(--space-2); font-weight: 600; color: var(--olive-600); display: none; }
.form-status.is-visible { display: block; }

/* ── CTA band + footer ───────────────────────────────────────────────────── */
.cta-band { background: var(--ink-900); color: var(--ivory-200); position: relative; overflow: hidden; }
.cta-band__field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; position: relative; }
.cta-title { color: var(--ivory-100); margin-bottom: 0.4rem; }
.cta-sub { color: var(--stone-400); max-width: 34rem; margin: 0; }
.cta-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cta-band .btn-solid { background: var(--ivory-200); color: var(--ink-strong); }
.cta-band .btn-solid:hover { background: #fff; }
.cta-band .btn-ghost { border-color: rgb(247 243 234 / 0.3); color: var(--ivory-200); background: none; }

.site-footer { background: var(--ink-900); color: var(--stone-400); padding: var(--space-4) 0 var(--calc-footer, 5rem); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.7fr 1fr; gap: var(--space-3); }
.footer-brand { font-family: var(--font-display); font-size: 1.3rem; color: var(--ivory-100); margin-bottom: 0.2rem; }
.footer-sub { font-size: 0.9rem; margin-bottom: var(--space-2); }
.footer-note { font-size: 0.8rem; color: rgb(184 173 151 / 0.8); max-width: 30rem; }
.footer-nav { display: grid; gap: 0.45rem; align-content: start; }
.footer-nav a { color: var(--stone-400); text-decoration: none; font-size: 0.95rem; }
.footer-nav a:hover { color: var(--ivory-100); }
.footer-contact { font-size: 0.95rem; align-content: start; }
.footer-contact a { color: var(--brass-400); text-decoration: none; }
.footer-contact p { margin-bottom: 0.6rem; }
.footer-status { font-size: 0.85rem; color: var(--stone-300); }
.footer-legal { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid rgb(216 208 191 / 0.14); font-size: 0.82rem; }
@media (max-width: 48rem) { .footer-grid { grid-template-columns: 1fr; } }

/* mobile action bar */
.mobile-action-bar {
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: 150;
  display: none;
  gap: 1px;
  background: rgb(23 21 15 / 0.9);
  backdrop-filter: blur(14px);
  padding: 0.55rem env(safe-area-inset-right, 0.75rem) calc(0.55rem + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0.75rem);
}
.action-btn {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85rem 0.5rem;
  border-radius: 12px;
  color: var(--ivory-100);
  border: 1px solid rgb(247 243 234 / 0.25);
}
.action-solid { background: var(--ivory-200); color: var(--ink-strong); border-color: transparent; }
@media (max-width: 48rem) { .mobile-action-bar { display: flex; } body { --calc-footer: 6.2rem; padding-bottom: 4rem; } main { padding-bottom: 0; } }

/* The bar steps aside while the page's own call to action is on screen.
   See action-bar.js. The transform is the only thing that moves it, so with
   JS off or an observer that never fires the bar simply stays put. */
.mobile-action-bar { transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .32s ease; }
.mobile-action-bar.is-yielded { transform: translateY(115%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mobile-action-bar { transition: opacity .2s ease; } }

/* reveal-on-scroll */
/* Reveal system — deliberately FAIL-OPEN.
   Content is visible by default. It is only hidden once reveal.js has run and
   added .reveal-ready to <html>, i.e. once something is guaranteed to bring it
   back. If the bundle fails to load, is blocked, or throws before init, the
   page still reads normally. Never hide content on a promise. */
html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
html.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* ── house film band ─────────────────────────────────────────────────────── */
.film-band {
  position: relative;
  height: clamp(420px, 74vh, 720px);
  overflow: hidden;
  /* no-JS / pre-load fallback: the exterior, still and graded */
  background:
    linear-gradient(rgba(38, 32, 24, 0.18), rgba(38, 32, 24, 0.32)),
    url("/assets/photos/hero-exterior-1200.jpg?v=6") center 55% / cover no-repeat var(--ink-900);
}
.film-canvas-wrap, .film-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(23 21 15 / 0.62) 0%, transparent 42%),
    linear-gradient(to bottom, rgb(23 21 15 / 0.22), transparent 26%);
}
.film-caption {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(1.5rem, 5vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin: 0;
}
.kicker-light { color: var(--brass-400); }
.film-lede {
  color: var(--ivory-100);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.3;
  max-width: 30rem;
  margin-bottom: var(--space-2);
  text-shadow: 0 1px 24px rgb(23 21 15 / 0.45);
}
.film-band .btn-ghost { border-color: rgb(247 243 234 / 0.4); color: var(--ivory-100); background: rgb(23 21 15 / 0.25); }
.film-band .btn-ghost:hover { background: rgb(23 21 15 / 0.45); }
.film-toggle {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(247 243 234 / 0.35);
  background: rgb(23 21 15 / 0.4);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur-1) ease;
}
.film-toggle:hover { background: rgb(23 21 15 / 0.65); }
.film-toggle-icon {
  width: 12px; height: 12px;
  background: var(--ivory-100);
  transition: clip-path 200ms var(--ease-out);
  clip-path: polygon(0 0, 100% 50%, 0 100%); /* play triangle when paused */
}
.film-band.is-playing .film-toggle-icon { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 65% 100%, 35% 100%); }
@media (prefers-reduced-motion: reduce) {
  .film-toggle-icon { clip-path: polygon(0 0, 100% 50%, 0 100%); }
}

/* page-hero for interior pages */
.page-hero { padding: var(--space-5) 0 var(--space-4); }
.page-hero .lede { font-size: var(--fs-1); }

/* prose blocks for resources/privacy pages */
.prose { max-width: 44rem; }
.prose h2 { font-size: var(--fs-2); margin: var(--space-4) 0 var(--space-2); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: 0.5rem; color: var(--ink-700); font-size: var(--fs--1); }
.resource-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); }
.resource-card + .resource-card { margin-top: var(--space-3); }
.resource-card ul { margin-top: var(--space-2); }


/* ── Page-level h1 ─────────────────────────────────────────────────────────
   Interior pages carry a real <h1> for document outline and SEO. It is held
   at the h2 display size on purpose: only the homepage hero gets --fs-4. */
.page-hero .section-title { font-size: var(--fs-3); }

/* ── No-JavaScript notice ──────────────────────────────────────────────────
   The reveal system hides content until observed. html.no-js unhides it
   (see .reveal rules); this explains the reduced experience. */
.noscript-note {
  margin: 0;
  padding: 0.85rem var(--gutter);
  background: var(--ink-strong);
  color: var(--ivory-100);
  font-size: 0.92rem;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   Additions — sections carrying the licensure-sourced detail
   ══════════════════════════════════════════════════════════════════════════ */

/* Alternate section tone. Slightly warmer than .solid so long informational
   pages gain rhythm without introducing another card. */
.tinted {
  background: color-mix(in srgb, var(--wood-100, #efe7d9) 55%, var(--bg));
  backdrop-filter: blur(14px);
}

/* Term / explanation rows — the workhorse for factual detail.
   Reads as a reference table, which is the right register for medication,
   safety and environment facts. */
.deflist { margin: 0; display: grid; }
.deflist > div {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: 0.5rem clamp(1.25rem, 4vw, 3rem);
  padding: clamp(1rem, 1.8vw, 1.5rem) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.deflist > div:last-child { border-bottom: 1px solid var(--line); }
.deflist dt {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  line-height: 1.25;
  color: var(--ink-strong);
  margin: 0;
}
.deflist dd { margin: 0; color: var(--ink-700); line-height: 1.6; }
@media (max-width: 720px) {
  .deflist > div { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* Staffing shifts */
.shift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-2);
}
.shift-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent, var(--brass-400));
  border-radius: 12px;
  padding: var(--space-3);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.shift-name {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  color: var(--ink-strong);
  margin: 0 0 0.2rem;
}
.shift-hours {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.shift-staff { margin: 0; color: var(--ink-700); font-size: 0.95rem; line-height: 1.55; }

/* Tick list */
.tick-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.tick-list li { position: relative; padding-left: 1.6em; }
.tick-list li::before {
  content: "";
  position: absolute; left: 0.15em; top: 0.55em;
  width: 0.62em; height: 0.34em;
  border-left: 1.8px solid var(--accent, var(--brass-400));
  border-bottom: 1.8px solid var(--accent, var(--brass-400));
  transform: rotate(-45deg);
}

/* An honest caveat, styled so it reads as a statement rather than fine print */
.disclaimer {
  margin-top: var(--space-3);
  padding-left: 1rem;
  border-left: 2px solid var(--accent, var(--brass-400));
  max-width: 46rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Emphasised variant of the existing resource card */
.resource-card.accent {
  border-color: color-mix(in srgb, var(--brass-400) 45%, var(--line));
  background: color-mix(in srgb, var(--brass-400) 7%, transparent);
}

/* Heading semantics vs. visual weight.
   Several groups sit directly under the page <h1>, so they must be <h2> for a
   correct document outline — but they should still LOOK like a card title.
   This keeps the outline valid without changing the design. */
.as-h3 { font-size: var(--fs-1); }


/* Enquiry form status states */
.form-status[data-kind="ok"]  { color: var(--olive-700, #4d6b3f); }
.form-status[data-kind="err"] { color: #a4482f; }
.form-status a { color: inherit; }

/* ══════════════════════════════════════════════════════════════════════════
   IMAGE PRIMITIVE
   Every photograph is art-directed: the frame declares the ratio, the manifest
   declares the focal point. Nothing relies on a default centre crop.
   ══════════════════════════════════════════════════════════════════════════ */
.ph { display: block; position: relative; overflow: hidden; background: var(--stone-200, #efe9dd); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO — one architectural plane, type living on it
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  background: #16130e;
  overflow: hidden;
}

.hero__frame { position: absolute; inset: 0; z-index: 0; }

/* The plane is oversized so parallax never exposes an edge. */
.hero__plane {
  position: absolute; inset: -6% -2% -10%;
  will-change: transform;
  transform: translate3d(
      calc(var(--hero-px, 0) * 1px),
      calc(var(--hero-py, 0) * 1px + var(--hero-scroll, 0) * 1px),
      0)
    scale(1.06);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__img, .hero__img img { width: 100%; height: 100%; }

/* Living-photo hero video: covers the still (which stays underneath as the
   poster while the video loads), same fit as the image. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }  /* the still shows through instead */
}

/* Two-stop veil: deep at the lower-left where the type sits, clearing to the
   upper-right so the house and sky stay legible. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(18,15,11,0.94) 0%, rgba(18,15,11,0.72) 26%, rgba(18,15,11,0.16) 62%, rgba(18,15,11,0.30) 100%),
    linear-gradient(105deg, rgba(18,15,11,0.72) 0%, rgba(18,15,11,0.34) 42%, rgba(18,15,11,0) 72%);
}
/* A whisper of tooth so the flat gradient never looks like plastic. */
.hero__grain {
  position: absolute; inset: 0; opacity: 0.28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.hero__stage { position: relative; z-index: 2; width: 100%; }

.hero__type {
  padding-block: clamp(6rem, 16vh, 11rem) clamp(2rem, 5vh, 3.5rem);
  max-width: 62rem;
  will-change: transform;
  transform: translate3d(0, calc(var(--hero-type, 0) * 1px), 0);
}

.hero__kicker {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(240, 231, 214, 0.72);
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 1.2rem + 8.2vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 380;
  color: #fdfaf4;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span {
  display: block;
  transform: translate3d(0, 104%, 0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__title .ln:nth-child(2) > span { transition-delay: 120ms; }
.hero[data-in="true"] .hero__title .ln > span { transform: none; }
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass-300, #d8bb8c);
}

.hero__lede {
  max-width: 42ch;
  font-size: clamp(1.05rem, 0.98rem + 0.42vw, 1.3rem);
  line-height: 1.55;
  color: rgba(243, 236, 224, 0.84);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  opacity: 0; transform: translateY(16px);
  transition: opacity 1s 0.35s var(--ease-out), transform 1s 0.35s var(--ease-out);
}
.hero[data-in="true"] .hero__lede { opacity: 1; transform: none; }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  opacity: 0; transform: translateY(16px);
  transition: opacity 1s 0.5s var(--ease-out), transform 1s 0.5s var(--ease-out);
}
.hero[data-in="true"] .hero__actions { opacity: 1; transform: none; }

/* Fact rail — a hairline strip on the image. Deliberately not a card. */
.hero__rail {
  border-top: 1px solid rgba(243, 236, 224, 0.20);
  backdrop-filter: blur(2px);
}
.hero__railin {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hero__fact {
  padding: clamp(1.1rem, 2.4vw, 1.9rem) clamp(0.75rem, 2vw, 1.75rem) clamp(1.1rem, 2.4vw, 1.9rem) 0;
  border-left: 1px solid rgba(243, 236, 224, 0.16);
  padding-left: clamp(0.9rem, 2vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.3rem;
}
.hero__fact:first-child { border-left: 0; padding-left: 0; }
.hero__factn {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 0.9rem + 1.5vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brass-300, #d8bb8c);
}
.hero__factl {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(243, 236, 224, 0.66);
  max-width: 22ch;
}

.hero__status {
  position: absolute; z-index: 3;
  top: calc(var(--header-h, 76px) + 1.25rem); right: var(--gutter);
  margin: 0;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(243, 236, 224, 0.7);
  display: flex; align-items: center; gap: 0.55rem;
}
.hero__status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass-300, #d8bb8c);
  box-shadow: 0 0 0 0 rgba(216, 187, 140, 0.6);
  animation: heroPulse 3.4s cubic-bezier(0.32,0.72,0.24,1) infinite;
}
@keyframes heroPulse {
  0% { box-shadow: 0 0 0 0 rgba(216,187,140,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(216,187,140,0); }
  100% { box-shadow: 0 0 0 0 rgba(216,187,140,0); }
}

/* The header sits over a dark photograph here, so force the dark treatment. */
body[data-page="/"] .site-header { --hdr-on-dark: 1; }

@media (max-width: 900px) {
  .hero { min-height: 92svh; }
  .hero__railin { grid-template-columns: 1fr 1fr; }
  .hero__fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero__fact:nth-child(-n+2) { border-bottom: 1px solid rgba(243,236,224,0.14); }
  .hero__status { position: static; margin: 0 0 1rem; }
  .hero__type { padding-top: calc(var(--header-h, 76px) + 3.5rem); }
  .hero__veil {
    background:
      linear-gradient(to top, rgba(18,15,11,0.96) 0%, rgba(18,15,11,0.80) 34%, rgba(18,15,11,0.34) 72%, rgba(18,15,11,0.44) 100%);
  }
}
@media (max-width: 560px) {
  .hero__railin { grid-template-columns: 1fr; }
  .hero__fact { border-left: 0; padding-left: 0; flex-direction: row; align-items: baseline; gap: 0.7rem;
                border-bottom: 1px solid rgba(243,236,224,0.14); padding-block: 0.85rem; }
  .hero__fact:last-child { border-bottom: 0; }
  .hero__factn { font-size: 1.35rem; min-width: 4.2rem; }
  .hero__factl { font-size: 0.8125rem; max-width: none; }
  .hero__actions .cta { flex: 1 1 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA SYSTEM
   Three deliberate actions, not a component-library button set:
   .cta--primary  the one thing we want you to do
   .cta--quiet    a considered alternative, on dark
   .cta--text     an inline continuation of reading
   ══════════════════════════════════════════════════════════════════════════ */
.cta {
  --cta-fg: #17140f;
  --cta-bg: #f3ece0;
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 1.05em 1.6em;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 2px;                 /* near-square: architectural, not app-like */
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1;
  color: var(--cta-fg); background: var(--cta-bg);
  text-decoration: none; cursor: pointer;
  overflow: hidden;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 500ms var(--ease-out), background 400ms var(--ease-out),
              color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.cta > span { position: relative; z-index: 1; }
.cta svg { position: relative; z-index: 1; width: 18px; height: 18px; flex: none;
           transition: transform 480ms var(--ease-out); }
/* A wipe rather than a colour swap — reads as material, not state. */
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--cta-wipe, #17140f);
  transform: scaleX(0); transform-origin: right;
  transition: transform 560ms var(--ease-out);
}
.cta:hover::before { transform: scaleX(1); transform-origin: left; }
.cta:hover svg { transform: translateX(5px); }
.cta:active { transform: translate3d(var(--mx,0px), calc(var(--my,0px) + 1px), 0); }

.cta--primary { --cta-bg: var(--brass-400, #b8935f); --cta-fg: #17140f; --cta-wipe: #f3ece0; }
.cta--primary:hover { color: #17140f; }

.cta--quiet {
  --cta-bg: transparent; --cta-fg: rgba(243,236,224,0.92); --cta-wipe: rgba(243,236,224,0.14);
  border-color: rgba(243, 236, 224, 0.34);
}
.cta--quiet:hover { color: #fff; border-color: rgba(243,236,224,0.6); }

.cta--dark { --cta-bg: var(--ink-strong, #1d2320); --cta-fg: #f4efe4; --cta-wipe: var(--brass-400, #b8935f); }
.cta--dark:hover { color: #17140f; }

.cta--text {
  --cta-bg: transparent; --cta-fg: var(--ink-strong, #1d2320);
  padding: 0.35em 0; min-height: 0; border: 0; border-radius: 0;
  font-weight: 500;
}
.cta--text::before {
  inset: auto 0 0 0; height: 1px; background: currentColor; transform: scaleX(1);
  transform-origin: left; transition: transform 480ms var(--ease-out);
}
.cta--text:hover::before { transform: scaleX(0); transform-origin: right; }
.cta--text:hover { color: var(--brass-500, #a8834e); }

@media (prefers-reduced-motion: reduce) {
  .cta { transform: none !important; }
  .cta::before { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE HEADER — sits ON the photograph, not above it
   ══════════════════════════════════════════════════════════════════════════ */
body[data-page="/"] .site-header {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body[data-page="/"] .site-header::before {
  /* a soft top shade so nav stays legible over bright sky */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(18,15,11,0.55), rgba(18,15,11,0));
  opacity: 1; transition: opacity var(--dur-2) var(--ease-out);
}
body[data-page="/"] .site-header .brand-name,
body[data-page="/"] .site-header .nav-link { color: #f6f0e5; }
body[data-page="/"] .site-header .nav-menu-toggle { color: #f6f0e5; }
body[data-page="/"] .site-header .brand-sub { color: rgba(246,240,229,0.7); }
body[data-page="/"] .site-header .brand-mark { color: var(--brass-300, #d8bb8c); }
body[data-page="/"] .site-header .nav-link:hover,
body[data-page="/"] .site-header .nav-link.is-active { color: #fff; }
body[data-page="/"] .site-header .btn-solid {
  background: rgba(246, 240, 229, 0.13);
  border: 1px solid rgba(246, 240, 229, 0.4);
  color: #f6f0e5;
  backdrop-filter: blur(8px);
}
body[data-page="/"] .site-header .btn-solid:hover { background: rgba(246,240,229,0.24); }
body[data-page="/"] .site-header .nav-toggle span { background: #f6f0e5; }

/* once past the hero the header becomes a normal solid bar again */
body[data-page="/"] .site-header.is-scrolled {
  background: color-mix(in srgb, var(--ivory-100) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
body[data-page="/"] .site-header.is-scrolled::before { opacity: 0; }
body[data-page="/"] .site-header.is-scrolled .brand-name,
body[data-page="/"] .site-header.is-scrolled .nav-link { color: var(--ink-strong); }
body[data-page="/"] .site-header.is-scrolled .nav-menu-toggle { color: var(--ink-strong); }
body[data-page="/"] .site-header.is-scrolled .brand-sub { color: var(--muted); }
body[data-page="/"] .site-header.is-scrolled .brand-mark { color: var(--accent); }
body[data-page="/"] .site-header.is-scrolled .btn-solid {
  background: var(--ink-strong); border-color: transparent; color: var(--ivory-100);
  backdrop-filter: none;
}
body[data-page="/"] .site-header.is-scrolled .nav-toggle span { background: var(--ink-strong); }

/* Hero sits under the fixed header, so it owns the full viewport. */
body[data-page="/"] .hero { margin-top: 0; }

/* Deeper shade under the type column so the lede never fights foliage. */
.hero__veil {
  background:
    linear-gradient(to top, rgba(16,13,9,0.95) 0%, rgba(16,13,9,0.80) 30%, rgba(16,13,9,0.22) 66%, rgba(16,13,9,0.34) 100%),
    linear-gradient(100deg, rgba(16,13,9,0.86) 0%, rgba(16,13,9,0.60) 34%, rgba(16,13,9,0.12) 66%, rgba(16,13,9,0) 82%);
}
/* Let the hero breathe rather than clipping its own actions. */
.hero { min-height: 100svh; }
.hero__type { padding-block: clamp(7rem, 18vh, 12rem) clamp(1.75rem, 4vh, 3rem); }
.hero__lede { color: rgba(245, 239, 229, 0.9); }

/* ── Hero vertical fit ─────────────────────────────────────────────────────
   The rail is part of the composition, not an afterthought, so the type
   column has to live within what is left after it. */
.hero__stage { display: flex; flex-direction: column; min-height: 100svh; }
.hero__type {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--header-h, 72px) + clamp(1.5rem, 4vh, 3rem)) clamp(1.5rem, 3vh, 2.5rem);
}
.hero__title { font-size: clamp(2.9rem, 1rem + 7.4vw, 8.4rem); margin-bottom: clamp(1.1rem, 2.2vw, 1.7rem); }
.hero__lede { margin-bottom: clamp(1.4rem, 2.6vw, 2rem); max-width: 40ch; }
.hero__rail { flex: 0 0 auto; }

@media (max-height: 780px) and (min-width: 901px) {
  .hero__title { font-size: clamp(2.6rem, 5.4vw, 5rem); }
  .hero__lede { font-size: 1rem; max-width: 44ch; }
  .hero__fact { padding-block: 0.9rem; }
}

.hero__status {
  padding: 0.5rem 0.9rem;
  border-radius: 2px;
  background: rgba(16, 13, 9, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(246, 240, 229, 0.16);
  color: rgba(246, 240, 229, 0.92);
  letter-spacing: 0.12em;
}
@media (max-width: 900px) {
  .hero__stage { min-height: 92svh; }
  .hero__status {
    position: absolute; top: calc(var(--header-h, 72px) + 0.75rem); left: var(--gutter); right: auto;
    font-size: 0.6875rem;
  }
  .hero__type { padding-top: calc(var(--header-h, 72px) + 4.5rem); }
}

/* Rail: compact enough that the labels survive an 800px-tall window. */
.hero__fact { padding-block: clamp(0.85rem, 1.6vh, 1.35rem); gap: 0.2rem; }
.hero__factn { font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem); }
.hero__factl { font-size: 0.78rem; line-height: 1.35; }

/* ══════════════════════════════════════════════════════════════════════════
   WHY SEVEN — the signature moment.
   A dark room in the middle of a light page. The count stays pinned while the
   argument scrolls past it, so the collapse from 120 to 7 happens *while*
   you read why it matters.
   ══════════════════════════════════════════════════════════════════════════ */
.seven {
  background: #14120d;
  color: rgba(243, 236, 224, 0.76);
  padding-block: clamp(5rem, 10vw, 9rem);
  position: relative;
  overflow: clip;
}
/* a single warm wash so the black is never flat */
.seven::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 60% at 70% 20%, rgba(184,147,95,0.16), transparent 70%);
  pointer-events: none;
}
.seven__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.seven .kicker { color: var(--brass-300, #d8bb8c); }
.seven__h {
  font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fbf7ef;
  max-width: 16ch;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.seven__lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
  line-height: 1.55;
  color: rgba(243, 236, 224, 0.7);
  max-width: 44ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* The four points: hairline rows, not cards. */
.seven__points { list-style: none; margin: 0; padding: 0; }
.seven__points li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.35rem, 2.6vw, 2rem);
  border-top: 1px solid rgba(243, 236, 224, 0.14);
  align-items: start;
}
.seven__points li:last-child { border-bottom: 1px solid rgba(243, 236, 224, 0.14); }
.seven__n {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--brass-300, #d8bb8c);
  letter-spacing: 0.06em;
  padding-top: 0.35em;
}
.seven__points h3 {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  color: #fbf7ef;
  margin: 0 0 0.4rem;
  letter-spacing: -0.012em;
}
.seven__points p { margin: 0; font-size: 0.975rem; line-height: 1.62; color: rgba(243,236,224,0.66); }

/* The count, pinned. */
.seven__vizcol { position: sticky; top: calc(var(--header-h, 72px) + clamp(1.5rem, 5vh, 4rem)); }
.seven__viz {
  margin: 0;
  border: 1px solid rgba(243, 236, 224, 0.14);
  border-radius: 3px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: rgba(243, 236, 224, 0.03);
}
.seven__viz canvas { display: block; width: 100%; }
.scaleviz-caption {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(243, 236, 224, 0.12);
  font-size: 0.92rem;
  color: rgba(243, 236, 224, 0.62);
}
.scaleviz-caption em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.5rem;
  color: var(--brass-300, #d8bb8c);
  margin-right: 0.4rem;
}

@media (max-width: 900px) {
  .seven__in { grid-template-columns: minmax(0, 1fr); }
  /* On mobile the count leads, then the argument — no sticky column. */
  .seven__vizcol { position: static; order: -1; margin-bottom: clamp(2rem, 6vw, 3rem); }
  .seven__points li { grid-template-columns: 2.4rem minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   NARROW-VIEWPORT INTEGRITY
   Two genuine sources of horizontal overflow at 320px, fixed at source
   rather than masked with overflow-x on <body>.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. The off-canvas menu is position:fixed and translated aside; while closed
      it still extended the scroll width and kept its links keyboard-focusable.
      visibility:hidden removes it from both layout overflow and the tab order. */
@media (max-width: 64rem) {
  .site-nav {
    visibility: hidden;
    transition: transform 320ms var(--ease-out), visibility 320ms;
  }
  .site-nav.is-open { visibility: visible; }
}

/* 2. Two side-by-side actions do not fit 320px once padding is accounted for.
      Below 25rem they stack and fill, which is the better touch target anyway. */
@media (max-width: 25rem) {
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn,
  .cta-actions .cta { width: 100%; justify-content: center; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .cta { width: 100%; justify-content: center; }
}

/* Belt and braces: nothing should ever scroll the page sideways. */
html { overflow-x: clip; }

/* A bare `1fr` track refuses to shrink below its content's min-content width,
   which is what pushes long words past a 320px viewport. minmax(0,1fr) lets
   the column actually collapse. */
@media (max-width: 900px) {
  .seven__in { grid-template-columns: minmax(0, 1fr); }
}

/* Flex items refuse to shrink past their min-content width, so a long label
   like "Request Information" pushed the CTA band past a 320px viewport.
   Allow the label to wrap and the item to actually shrink. */
@media (max-width: 25rem) {
  .cta-actions .btn,
  .cta-actions .cta {
    min-width: 0;
    white-space: normal;
    text-align: center;
    padding-inline: 1rem;
  }
  .cta-band-inner { min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARE EXPLORER
   Seventeen regulated services are a lot to meet at once. Grouped into four
   and revealed on demand, the same information stops reading as documentation.
   Light and open, deliberately, as relief after the dark room above it.
   ══════════════════════════════════════════════════════════════════════════ */
.care-x {
  background: var(--ivory-100, #faf7f1);
  padding-block: clamp(5rem, 10vw, 9rem);
}
.care-x__head { max-width: 54rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.care-x__h {
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
.care-x__lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55; color: var(--muted); max-width: 48ch;
}

.care-x__body {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Tabs as an editorial index, not a pill row. */
.care-x__nav { display: flex; flex-direction: column; }
.care-x__tab {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0 1rem;
  width: 100%;
  padding: clamp(0.9rem, 1.8vw, 1.35rem) 0;
  background: none; border: 0;
  border-top: 1px solid var(--line);
  text-align: left; cursor: pointer;
  color: var(--ink-strong);
  transition: color var(--dur-2) var(--ease-out);
}
.care-x__nav .care-x__tab:last-child { border-bottom: 1px solid var(--line); }
.care-x__idx {
  font-family: var(--font-display); font-size: 0.85rem;
  color: var(--muted); transition: color var(--dur-2) var(--ease-out);
}
.care-x__label {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.95rem);
  line-height: 1.15; letter-spacing: -0.02em;
  position: relative; display: inline-block;
}
/* a rule that draws in under the active label */
.care-x__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.18em; height: 1px;
  background: var(--accent, #b8935f);
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--ease-out);
}
.care-x__tab:hover .care-x__label,
.care-x__tab[aria-selected="true"] .care-x__label { color: var(--accent, #b8935f); }
.care-x__tab[aria-selected="true"] .care-x__label::after { transform: scaleX(1); }
.care-x__tab[aria-selected="true"] .care-x__idx { color: var(--accent, #b8935f); }
.care-x__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Panels */
.care-x__stage { position: relative; min-width: 0; }
.care-x__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  animation: carexIn 620ms var(--ease-out) both;
}
@keyframes carexIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.care-x__media { margin: 0; border-radius: 3px; overflow: hidden; }
.care-x__glede {
  font-size: 1.05rem; line-height: 1.5; color: var(--ink-strong);
  margin-bottom: 1.4rem; max-width: 40ch;
}
.care-x__list { margin: 0; display: grid; }
.care-x__list > div {
  padding-block: 0.95rem;
  border-top: 1px solid var(--line);
}
.care-x__list > div:last-child { border-bottom: 1px solid var(--line); }
.care-x__list dt {
  font-weight: 600; font-size: 0.98rem; color: var(--ink-strong); margin-bottom: 0.2rem;
}
.care-x__list dd { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--muted); }

.care-x__foot { margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 1000px) {
  .care-x__body { grid-template-columns: minmax(0, 1fr); }
  .care-x__panel { grid-template-columns: minmax(0, 1fr); }
  .care-x__media { max-width: 26rem; }
}
@media (max-width: 560px) {
  .care-x__tab { grid-template-columns: 1.9rem minmax(0, 1fr); }
  .care-x__media { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .care-x__panel { animation: none; }
  .care-x__label::after { transition: none; }
}

/* The category image reads as a tall plate beside the list, not a stamp
   floating above dead space. */
.care-x__panel { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); align-items: stretch; }
.care-x__media { align-self: stretch; }
.care-x__media .ph { height: 100%; }
@media (max-width: 1000px) {
  .care-x__panel { grid-template-columns: minmax(0, 1fr); }
  .care-x__media .ph { height: auto; }
}

/* `display: grid` beats the `hidden` attribute's UA `display: none`, so every
   panel rendered at once. Restore the attribute's meaning explicitly. */
.care-x__panel[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   A DAY HERE — the clock stays, the day moves
   The pinned column holds the current time at display size; the moments pass
   it. A wash behind the section shifts from morning gold to evening blue as
   you descend, so the passage of a day is felt rather than described.
   ══════════════════════════════════════════════════════════════════════════ */
.day2 {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 9vw, 8rem);
  background: var(--ivory-100, #faf7f1);
  overflow: clip;
}
.day2__sky {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at var(--sky-x, 18%) 0%,
      hsl(var(--sky-h, 44) var(--sky-s, 62%) var(--sky-l, 66%) / 0.28), transparent 62%),
    radial-gradient(90% 60% at 88% 100%,
      hsl(var(--sky-h2, 34) 45% 60% / 0.14), transparent 66%);
  transition: background 1400ms linear;
}

.day2__in {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.day2__pin { position: sticky; top: calc(var(--header-h, 72px) + clamp(1.5rem, 5vh, 3.5rem)); }
.day2__h {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem);
  line-height: 1.05; letter-spacing: -0.03em;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem); max-width: 14ch;
}
.day2__clock {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2rem + 5.5vw, 7rem);
  line-height: 0.9; letter-spacing: -0.045em;
  color: var(--ink-strong);
  margin: 0 0 0.35rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.day2__clock span {
  font-family: var(--font-text); font-size: 0.24em; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-left: 0.35em; vertical-align: 0.9em;
}
.day2__phase {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent, #b8935f); margin: 0 0 0.85rem;
}
.day2__note {
  font-size: 0.98rem; line-height: 1.6; color: var(--muted);
  max-width: 34ch; margin: 0 0 1.75rem; min-height: 5.5em;
}
.day2__meter { height: 2px; background: var(--line); position: relative; max-width: 16rem; }
.day2__meter i {
  display: block; height: 100%; width: var(--day-p, 8%);
  background: linear-gradient(90deg, var(--accent, #b8935f), hsl(38 70% 62%));
  transition: width 620ms var(--ease-out);
}

/* The moments */
.day2__rows { list-style: none; margin: 0; padding: 0; }
.day2__rows .day-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 2.5vw, 2.25rem);
  padding-block: clamp(1.4rem, 2.8vw, 2.2rem);
  border-top: 1px solid var(--line);
  opacity: 0.4;
  transition: opacity 620ms var(--ease-out);
}
.day2__rows .day-row:last-child { border-bottom: 1px solid var(--line); }
.day2__rows .day-row.is-active { opacity: 1; }
.day2__t {
  font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4;
  color: var(--muted); white-space: nowrap; letter-spacing: -0.01em;
  transition: color 620ms var(--ease-out);
}
.day2__t span { font-family: var(--font-text); font-size: 0.62em; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 0.15em; }
.day-row.is-active .day2__t { color: var(--accent, #b8935f); }
.day2__body h3 { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); margin: 0 0 0.3rem; letter-spacing: -0.012em; }
.day2__body p { margin: 0; font-size: 0.96rem; line-height: 1.62; color: var(--muted); }

.day2__foot { margin-top: clamp(2rem, 4vw, 3rem); }
.day2__caveat { max-width: 62ch; color: var(--muted); font-size: 0.98rem; }

@media (max-width: 900px) {
  .day2__in { grid-template-columns: minmax(0, 1fr); }
  .day2__pin { position: static; margin-bottom: clamp(1.5rem, 5vw, 2.5rem); }
  .day2__note { min-height: 0; }
  .day2__clock { font-size: clamp(3rem, 14vw, 4.5rem); }
  .day2__rows .day-row { opacity: 1; }            /* no pinned clock to sync with */
  .day2__rows .day-row { grid-template-columns: 4.5rem minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .day2__rows .day-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .day2__t { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .day2__rows .day-row { opacity: 1; }
  .day2__sky, .day2__meter i { transition: none; }
}

/* The legacy .day-row treatment drew a filled card around the active step.
   The new sequence signals the active moment with opacity and the pinned
   clock instead, so neutralise the old skin inside .day2. */
.day2__rows .day-row,
.day2__rows .day-row.is-active {
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}
.day2__rows .day-row { border-top: 1px solid var(--line); }
.day2__rows .day-row:last-child { border-bottom: 1px solid var(--line); }

/* ══════════════════════════════════════════════════════════════════════════
   DINING — a plate and a menu
   Full-bleed photography on one side, the day's menu set as a menu on the
   other. The image runs to the viewport edge so the section reads as a room
   you are looking into rather than a card on a page.
   ══════════════════════════════════════════════════════════════════════════ */
.dine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--ink-900, #14120d);
  color: rgba(243, 236, 224, 0.78);
}
.dine__media { position: relative; overflow: hidden; }
.dine__img, .dine__img img { width: 100%; height: 100%; }
.dine__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,18,13,0) 60%, rgba(20,18,13,0.55) 100%);
}
.dine__panel {
  display: flex; align-items: center;
  padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5rem);
}
.dine__inner { width: min(34rem, 100%); }
.dine .kicker { color: var(--brass-300, #d8bb8c); }
.dine__h, .dine .section-title {
  color: #fbf7ef;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  line-height: 1.04; letter-spacing: -0.03em;
  margin-bottom: clamp(0.9rem, 2vw, 1.35rem);
}
.dine__lede {
  color: rgba(243, 236, 224, 0.72);
  font-size: 1.02rem; line-height: 1.6;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 42ch;
}
.dine .lede { color: rgba(243,236,224,0.72); }

/* The menu itself */
.menu {
  margin: 0;
  border-top: 1px solid rgba(243, 236, 224, 0.22);
  padding-top: 1.4rem;
}
.menu__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.35rem;
}
.menu__eyebrow {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(243, 236, 224, 0.5);
}
.menu__day {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.25rem; color: var(--brass-300, #d8bb8c);
}
.menu__list { margin: 0; display: grid; gap: 0; }
.menu__row {
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding-block: 0.95rem;
  border-top: 1px solid rgba(243, 236, 224, 0.11);
}
.menu__row:first-of-type { border-top: 0; }
.menu__row dt { display: flex; flex-direction: column; gap: 0.15rem; }
.menu__name {
  font-family: var(--font-display); font-size: 1.08rem; color: #fbf7ef; letter-spacing: -0.01em;
}
.menu__time {
  font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(243, 236, 224, 0.44);
}
.menu__row dd {
  margin: 0; font-size: 0.94rem; line-height: 1.55; color: rgba(243, 236, 224, 0.72);
}
/* snacks read lighter — they are part of the day, not a course */
.menu__row--small .menu__name { font-family: var(--font-text); font-size: 0.9rem; font-weight: 500; color: rgba(243,236,224,0.72); }
.menu__row--small dd { font-size: 0.88rem; color: rgba(243, 236, 224, 0.5); }
.menu__foot {
  margin: 1.35rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(243, 236, 224, 0.11);
  font-size: 0.82rem; line-height: 1.5; color: rgba(243, 236, 224, 0.48);
}
.dine__more { margin-top: 1.75rem; }
.dine__more .cta--text { color: var(--brass-300, #d8bb8c); }

.dine__points {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0;
}
.dine__points li {
  padding: 1.15rem 1.5rem 1.15rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.97rem; line-height: 1.6; color: var(--muted);
}

@media (max-width: 1000px) {
  .dine { grid-template-columns: minmax(0, 1fr); }
  .dine__media { max-height: 46vh; }
  .dine__media::after { background: linear-gradient(180deg, rgba(20,18,13,0) 55%, rgba(20,18,13,0.75) 100%); }
}
@media (max-width: 520px) {
  .menu__row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .menu__row dt { flex-direction: row; align-items: baseline; gap: 0.6rem; }
}

/* In the dining composition the plate fills its column; the manifest's
   aspect-ratio is only a hint for standalone use, so release it here. */
.dine__media .ph { aspect-ratio: auto !important; height: 100%; min-height: 100%; }
.dine__media { min-height: 100%; }
@media (max-width: 1000px) {
  .dine__media .ph { aspect-ratio: 16 / 10 !important; min-height: 0; }
  .dine__media { min-height: 0; }
}

/* Full-bleed sections opt out of the global section padding, or the ground
   colour shows above the image. */
main > section.dine { padding-block: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   THE HOME — editorial mosaic
   Twelve columns, varying spans and ratios, so the eye moves rather than
   scanning a row of equal cards. Concept renderings stay labelled on the tile
   and again in the lightbox.
   ══════════════════════════════════════════════════════════════════════════ */
.gallery { grid-auto-flow: dense; }
.g-item {
  grid-column: span var(--span, 4);
  border-radius: 3px;
}
.g-item .ph { width: 100%; height: 100%; }
.g-item::after {
  /* a soft foot so captions always have ground to sit on */
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(18,15,11,0.72), transparent);
  opacity: 0; transition: opacity 420ms var(--ease-out);
  pointer-events: none;
}
.g-item:hover::after, .g-item:focus-visible::after { opacity: 1; }

.g-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.5rem 1rem 0.9rem;
  font-size: 0.86rem; letter-spacing: 0.01em; color: #fff; text-align: left;
  opacity: 0; transform: translateY(6px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.g-item:hover .g-cap, .g-item:focus-visible .g-cap { opacity: 1; transform: none; }

/* Concept label is permanent — never hidden behind a hover state. */
.g-item .tag-concept {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 3;
  background: rgba(18, 15, 11, 0.62);
  backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.4);
  font-size: 0.62rem;
}

@media (max-width: 1000px) {
  .g-item { grid-column: span 6; }
  .g-item:first-child { grid-column: span 12; }
}
@media (max-width: 620px) {
  .g-item, .g-item:first-child { grid-column: span 12; }
  .g-cap { opacity: 1; transform: none; }   /* no hover on touch */
  .g-item::after { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE NAV — no horizontal transform
   The panel was hidden with translateX(100%). Because .site-header carries a
   backdrop-filter it becomes the containing block for its fixed children, so
   that transform pushed the panel a full viewport to the right and every
   interior page reported exactly 2× scrollWidth. Fade and lift instead — no
   horizontal displacement can ever create overflow.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 64rem) {
  .site-nav {
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms var(--ease-out),
                transform 300ms var(--ease-out),
                visibility 300ms;
  }
  .site-nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PEOPLE
   No portraits exist yet and none will be invented, so the typography has to
   carry the weight. Name at display size, credentials beneath, biography in a
   generous measure alongside. Hairlines, not cards.
   ══════════════════════════════════════════════════════════════════════════ */
.ppl__group {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent, #b8935f);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0.5rem;
}
.ppl__group:first-of-type { margin-top: 0; }

.ppl { display: grid; }
.ppl__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: clamp(0.75rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.ppl .ppl__row:last-child { border-bottom: 1px solid var(--line); }
.ppl__name {
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.25rem);
  line-height: 1.08; letter-spacing: -0.025em;
  margin: 0 0 0.4rem;
}
.ppl__cred {
  margin: 0; font-size: 0.85rem; line-height: 1.45;
  color: var(--muted); max-width: 26ch;
}
.ppl__bio p { font-size: 0.99rem; line-height: 1.68; margin-bottom: 0.9rem; }
.ppl__bio p:last-child { margin-bottom: 0; }
.ppl__row--lead {
  margin-block: 0.65rem clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--bg-raised)), var(--bg-raised));
}
.ppl__row--lead .ppl__name { font-size: clamp(1.9rem, 1.35rem + 2vw, 3.15rem); }
.ppl__row--lead .ppl__cred { color: var(--wood-600); font-weight: 650; }

/* The role we have not filled. Stated, not hidden. */
.ppl__row--open .ppl__name { color: var(--muted); }
.ppl__row--open .ppl__cred {
  color: var(--accent, #b8935f);
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.7rem;
}
.ppl__row--open .ppl__bio p { color: var(--muted); }

.ppl__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: 1rem;
  border-left: 2px solid var(--accent, #b8935f);
  max-width: 62ch;
  font-size: 0.92rem; line-height: 1.62; color: var(--muted);
}

.mission-band blockquote, blockquote.mission-band { border: 0; padding: 0; }
.mission-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem);
  line-height: 1.36; color: var(--ink-strong); margin: 0 0 0.6rem;
}
.mission-attr {
  margin: 0; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

@media (max-width: 820px) {
  .ppl__row { grid-template-columns: minmax(0, 1fr); }
  .ppl__cred { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   QUIET — the memory care page
   The argument of this page is that a smaller, more legible world is easier
   to live in. The page is built to demonstrate it: one column, one idea at a
   time, a wider measure of white space, larger type, and no hover tricks,
   parallax or ambient motion anywhere on it.
   ══════════════════════════════════════════════════════════════════════════ */
.quiet { background: var(--ivory-100, #faf7f1); }

/* the calm field sits behind the quiet page; the page surface turns
   translucent so the drift reads through without ever touching text */
.calmfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body[data-page="/memory-care/"] main { position: relative; z-index: 1; }
.quiet { background: color-mix(in srgb, var(--ivory-100, #faf7f1) 64%, transparent); }
.quiet__band--alt { background: color-mix(in srgb, var(--cream-card, #f4eee3) 52%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .quiet { background: var(--ivory-100, #faf7f1); }
  .quiet__band--alt { background: var(--cream-card, #f4eee3); }
}

.quiet__col {
  width: min(38rem, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.quiet__hero { padding-block: clamp(4.5rem, 11vh, 8rem) clamp(2.5rem, 6vw, 4.5rem); }
.quiet__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(18rem, 0.72fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.quiet__hero-grid .quiet__lede { max-width: 34rem; }
.quiet__hero-media { margin: 0; overflow: hidden; border-radius: 2px; }
.quiet__hero-media .ph { min-height: min(62vh, 38rem); }
.quiet__h1 {
  font-size: clamp(2.3rem, 1.5rem + 2.8vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: clamp(1.25rem, 3vw, 1.9rem);
}
.quiet__lede {
  font-size: clamp(1.14rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.62;
  color: var(--ink-strong);
}

.quiet__band { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.quiet__band--alt { background: var(--cream-card, #f4eee3); }

.quiet__h2 {
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.12; letter-spacing: -0.025em;
  margin-bottom: clamp(0.9rem, 2vw, 1.3rem);
}
.quiet__intro {
  font-size: 1.08rem; line-height: 1.7; color: var(--muted);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* One idea at a time, with real air between them. */
.quiet__block { padding-block: clamp(1.75rem, 4vw, 2.75rem); border-top: 1px solid var(--line); }
.quiet__block:first-child { border-top: 0; padding-top: 0; }
.quiet__block h2 {
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 0.7rem;
}
.quiet__block p {
  font-size: 1.06rem; line-height: 1.72; color: var(--ink-700, #4d5853); margin: 0;
}

.quiet__list { list-style: none; padding: 0; margin: 0; display: grid; }
.quiet__list li {
  display: grid; gap: 0.3rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-top: 1px solid var(--line);
}
.quiet__list li:last-child { border-bottom: 1px solid var(--line); }
.quiet__list strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.35rem);
  color: var(--ink-strong); letter-spacing: -0.015em;
}
.quiet__list span { font-size: 1rem; line-height: 1.65; color: var(--muted); }

.quiet__caution {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent, #b8935f);
  border-radius: 2px;
  font-size: 0.96rem; line-height: 1.62; color: var(--muted);
  background: rgba(255, 255, 255, 0.5);
}

.quiet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }

@media (max-width: 800px) {
  .quiet__hero { padding-top: clamp(3rem, 8vw, 5rem); }
  .quiet__hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .quiet__hero-media { max-height: 32rem; }
  .quiet__hero-media .ph { min-height: 0; }
}

/* Nothing on this page moves on its own, and nothing reacts to a cursor. */
.quiet .reveal { opacity: 1 !important; transform: none !important; }
.quiet .cta { transform: none !important; }
.quiet .cta::before { transition-duration: 700ms; }
.quiet a:hover { transition-duration: 400ms; }

@media (max-width: 560px) {
  .quiet__actions { flex-direction: column; align-items: stretch; }
  .quiet__actions .cta--dark { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HONEST FIT
   Two editorial columns rather than a green card and a red card. The
   distinction is carried by typography, weight and a single dividing rule —
   not by colour alone, which also keeps it legible to colour-blind readers.
   Each item stays one scannable line.
   ══════════════════════════════════════════════════════════════════════════ */
.fit2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  position: relative;
}
/* the line between the two answers */
.fit2::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--line);
}
.fit2__eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.fit2__side--yes .fit2__eyebrow { color: var(--accent, #b8935f); }
.fit2__side--no .fit2__eyebrow { color: var(--muted); }

.fit2__h {
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem);
  line-height: 1.12; letter-spacing: -0.025em;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.9rem);
  max-width: 18ch;
}
.fit2__side--no .fit2__h { color: var(--muted); }

.fit2__list { list-style: none; margin: 0; padding: 0; }
.fit2__list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.99rem; line-height: 1.55;
  color: var(--ink-strong);
}
.fit2__list li:last-child { border-bottom: 1px solid var(--line); }
/* a short brass rule reads as "yes" without relying on colour alone */
.fit2__list li::before {
  content: ""; position: absolute; left: 0; top: 1.42em;
  width: 0.72rem; height: 2px; background: var(--accent, #b8935f);
}
.fit2__list--no li { color: var(--muted); }
.fit2__list--no li::before {
  height: 1px; background: var(--muted); opacity: 0.55;
  top: 1.5em; width: 0.72rem;
}

.fit2__note {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent, #b8935f);
  max-width: 56ch;
  font-size: 1.02rem; line-height: 1.62; color: var(--ink-strong);
}

@media (max-width: 820px) {
  .fit2 { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 3.5rem); }
  .fit2::before { display: none; }
  .fit2__side--no { padding-top: clamp(1.5rem, 5vw, 2.5rem); border-top: 1px solid var(--line); }
}

/* ══════════════════════════════════════════════════════════════════════════
   LICENSING PROGRESS
   A construction schedule, not a checklist. A continuous spine runs the full
   height; it is drawn solid through what is finished and hairline through what
   is not, so the position of the work is legible before a word is read.
   Status is also given as text for screen readers — never colour alone.
   ══════════════════════════════════════════════════════════════════════════ */
.lic-steps { list-style: none; margin: 0; padding: 0; position: relative; display: block; counter-reset: none; }

.lic2 {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 2.5vw, 1.75rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
/* the spine */
.lic2::before {
  content: ""; position: absolute; left: 0.5rem; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.lic2:first-child::before { top: 50%; }
.lic2:last-child::before { bottom: 50%; }
.lic2[data-state="done"]::before { background: var(--accent, #b8935f); opacity: 0.45; }

.lic2__node {
  position: relative; z-index: 1;
  width: 17px; height: 17px; margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--ivory-100, #faf7f1);
  border: 1px solid var(--line);
}
.lic2[data-state="done"] .lic2__node {
  background: var(--accent, #b8935f);
  border-color: var(--accent, #b8935f);
}
/* a tick drawn in, rather than a text glyph that a screen reader would voice */
.lic2[data-state="done"] .lic2__node::after {
  content: ""; position: absolute; left: 4px; top: 5px;
  width: 7px; height: 3.5px;
  border-left: 1.6px solid #fffdf8; border-bottom: 1.6px solid #fffdf8;
  transform: rotate(-45deg);
}
.lic2[data-state="current"] .lic2__node {
  background: #fffdf8;
  border: 2px solid var(--accent, #b8935f);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.lic2__tag {
  margin: 0 0 0.3rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.lic2[data-state="done"] .lic2__tag { color: var(--accent, #b8935f); }
.lic2[data-state="current"] .lic2__tag { color: var(--ink-strong); }

.lic2__stage {
  font-size: clamp(1.2rem, 1rem + 0.75vw, 1.6rem);
  line-height: 1.16; letter-spacing: -0.02em; margin: 0 0 0.45rem;
}
.lic2[data-state="todo"] .lic2__stage { color: var(--muted); }
.lic2__d { margin: 0; font-size: 0.98rem; line-height: 1.62; color: var(--muted); max-width: 62ch; }

@media (max-width: 520px) {
  .lic2 { grid-template-columns: 1.9rem minmax(0, 1fr); }
  .lic2::before { left: 0.42rem; }
}

/* Neutralise the earlier .lic-step skin so only the spine treatment applies. */
.lic-steps .lic2 { border: 0; background: none; }
.lic-steps .lic2::after { content: none; }

/* Constrain the measure without re-centring it — the spine should align with
   the page heading above, not float in the middle of the column. */
.lic-wrap { max-width: 46rem; }

/* ══════════════════════════════════════════════════════════════════════════
   FINALE
   The page has to end on purpose rather than simply run out. The seven marks
   return here one last time — the same motif that opened the site, now
   standing for seven places at a table rather than a statistic.
   ══════════════════════════════════════════════════════════════════════════ */
.finale {
  background: #14120d;
  color: rgba(243, 236, 224, 0.74);
  padding-block: clamp(5rem, 12vw, 9rem);
  position: relative; overflow: clip;
}
.finale::before {
  content: ""; position: absolute; inset: auto -10% -40% 20%; height: 90%;
  background: radial-gradient(closest-side, rgba(184,147,95,0.20), transparent 72%);
  pointer-events: none;
}
.finale__in { position: relative; }
.finale .kicker { color: var(--brass-300, #d8bb8c); }
.finale__h {
  font-size: clamp(2.4rem, 1.3rem + 4.4vw, 5.6rem);
  line-height: 0.98; letter-spacing: -0.04em; font-weight: 380;
  color: #fdfaf4; margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.finale__l1, .finale__l2 { display: block; }
.finale__l2 { color: var(--brass-300, #d8bb8c); font-style: italic; font-weight: 300; }
.finale__sub {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.32rem);
  line-height: 1.6; color: rgba(243, 236, 224, 0.76);
  max-width: 52ch; margin: 0;
}
/* seven marks, evenly spaced — the motif closing the loop */
.finale__marks {
  list-style: none; display: flex; gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: 0; margin: clamp(2.5rem, 6vw, 4rem) 0 0;
}
.finale__marks li {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brass-300, #d8bb8c); opacity: 0.85;
}
.finale__marks li:nth-child(n+2) { opacity: 0.55; }
.finale__marks li:nth-child(n+5) { opacity: 0.32; }

/* What happens next — numbered, plain, no card */
.after { list-style: none; margin: 0 0 clamp(2rem, 4vw, 2.75rem); padding: 0; counter-reset: a; }
.after li {
  counter-increment: a;
  position: relative; padding: 0.85rem 0 0.85rem 2.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.98rem; line-height: 1.6; color: var(--muted);
}
.after li:last-child { border-bottom: 1px solid var(--line); }
.after li::before {
  content: counter(a, decimal-leading-zero);
  position: absolute; left: 0; top: 1rem;
  font-family: var(--font-display); font-size: 0.82rem; color: var(--accent, #b8935f);
}
.after strong { color: var(--ink-strong); font-weight: 600; }

@media (max-width: 620px) {
  .finale__marks li { width: 8px; height: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ENQUIRY FORM
   This is the only conversion point on the site, so it gets real attention.
   Ruled fields rather than boxes — closer to a printed form than a web widget
   — with an unmistakable focus state and touch targets that clear 48px.
   ══════════════════════════════════════════════════════════════════════════ */
.form-card {
  background: var(--cream-card, #f4eee3);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.5rem);
}
.form-field { display: grid; gap: 0.4rem; }
.form-field label {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.form-field label span { text-transform: none; letter-spacing: 0; font-weight: 400; }

.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.15rem;
  font-size: 1.02rem;
  color: var(--ink-strong);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-strong) 26%, transparent);
  border-radius: 0;
  transition: border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.form-card textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; padding-top: 0.6rem; }
.form-card select {
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.75rem center, right 0.4rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ── homepage proof points ───────────────────────────────────────────────── */
.clinical-spotlight {
  background: var(--ink-900);
  color: var(--ivory-200);
  padding-block: clamp(5rem, 10vw, 8.5rem);
}
.clinical-spotlight__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.clinical-spotlight .kicker { color: var(--wood-300); }
.clinical-spotlight h2 {
  max-width: 10ch;
  color: var(--ivory-100);
  font-size: clamp(2.55rem, 4.8vw, 5.2rem);
  line-height: 0.98;
}
.clinical-spotlight__name {
  margin-top: clamp(2rem, 5vw, 4rem);
  color: var(--ivory-100);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
}
.clinical-spotlight__name span {
  display: block;
  margin-top: 0.45rem;
  color: var(--wood-300);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.clinical-spotlight__role {
  max-width: 27rem;
  margin-top: 0.8rem;
  color: var(--stone-400);
  font-size: 0.94rem;
  line-height: 1.55;
}
.clinical-spotlight__body > p {
  max-width: 44rem;
  color: var(--stone-300);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.75;
}
.clinical-spotlight__body > p + p { margin-top: 1.25rem; }
.clinical-spotlight__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: clamp(2.25rem, 5vw, 3.5rem);
  border-block: 1px solid rgb(247 243 234 / 0.16);
}
.clinical-spotlight__facts > div { padding: 1.35rem 1.25rem 1.35rem 0; }
.clinical-spotlight__facts > div + div { padding-left: 1.25rem; border-left: 1px solid rgb(247 243 234 / 0.16); }
.clinical-spotlight__facts dt {
  color: var(--wood-300);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.clinical-spotlight__facts dd { margin-top: 0.55rem; color: var(--ivory-100); font-size: 0.92rem; line-height: 1.45; }
.clinical-spotlight__body .clinical-spotlight__note {
  margin-bottom: 1.5rem;
  color: var(--stone-400);
  font-size: 0.8rem;
  line-height: 1.55;
}
.clinical-spotlight .cta--text { color: var(--ivory-100); }

.home-proof { padding-block: clamp(5rem, 10vw, 8rem); }
.home-proof__head { max-width: 48rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.home-proof__head h2 { margin-bottom: 1rem; }
.home-proof__head > p:last-child { max-width: 42rem; color: var(--muted); font-size: var(--fs-1); line-height: 1.55; }
.home-proof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-proof__item {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  min-height: 20rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  color: inherit;
  text-decoration: none;
  border-left: 1px solid var(--line);
  transition: background 350ms var(--ease-out), transform 350ms var(--ease-out);
}
.home-proof__item:first-child { border-left: 0; }
.home-proof__item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); transform: translateY(-3px); }
.home-proof__item > span { color: var(--accent); font-family: var(--font-display); font-size: 0.82rem; }
.home-proof__item h3 { margin-top: auto; font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.8rem); }
.home-proof__item p { color: var(--muted); font-size: 0.96rem; line-height: 1.62; }
.home-proof__item b { font-size: 0.88rem; font-weight: 600; color: var(--accent); }

@media (max-width: 800px) {
  .clinical-spotlight__grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .clinical-spotlight h2 { max-width: 12ch; }
  .clinical-spotlight__name { margin-top: 2rem; }
  .clinical-spotlight__facts { grid-template-columns: 1fr; }
  .clinical-spotlight__facts > div { padding: 1.1rem 0; }
  .clinical-spotlight__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgb(247 243 234 / 0.16); }
  .home-proof__grid { grid-template-columns: minmax(0, 1fr); }
  .home-proof__item { min-height: 0; border-left: 0; border-top: 1px solid var(--line); padding-inline: 0; }
  .home-proof__item:first-child { border-top: 0; }
  .home-proof__item h3 { margin-top: 1.25rem; }
}
.form-card input:hover,
.form-card select:hover,
.form-card textarea:hover { border-bottom-color: color-mix(in srgb, var(--ink-strong) 45%, transparent); }

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  outline: none;
  border-bottom-color: var(--accent, #b8935f);
  box-shadow: 0 1px 0 0 var(--accent, #b8935f);   /* a second hairline: unmistakable */
}
.form-card input:focus-visible,
.form-card select:focus-visible,
.form-card textarea:focus-visible { outline: 2px solid transparent; }

.form-card__submit { margin-top: 0.35rem; justify-content: center; }

.form-status {
  margin: 0; font-size: 0.94rem; line-height: 1.55;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 300ms var(--ease-out), max-height 300ms var(--ease-out);
}
.form-status.is-visible { opacity: 1; max-height: 12rem; }
.form-status[data-kind="ok"] {
  color: var(--olive-700, #4d6b3f);
  padding-left: 0.9rem; border-left: 2px solid currentColor;
}
.form-status[data-kind="err"] {
  color: #a4482f;
  padding-left: 0.9rem; border-left: 2px solid currentColor;
}
.form-privacy { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--muted); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .form-card input, .form-card select, .form-card textarea, .form-status { transition: none; }
}

/* The two-gradient chevron trick renders as a doubled glyph at some sizes.
   A single inline SVG is predictable everywhere. */
.form-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234d5853' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.35rem center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
}

/* ══════════════════════════════════════════════════════════════════════════
   FAQ
   Eleven questions is a wall unless it is grouped. Categories give the eye a
   place to stop; the questions themselves stay in display type so the page
   reads as a conversation rather than a support article.
   ══════════════════════════════════════════════════════════════════════════ */
.faq-group { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group__h {
  font-family: var(--font-text);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent, #b8935f);
  margin: 0 0 0.35rem;
}
.faq-list { display: block; }
.faq-item { border-top: 1px solid var(--line); }
.faq-group .faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item__h { margin: 0; font-size: inherit; }

.faq-q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1rem + 0.55vw, 1.4rem);
  line-height: 1.32; letter-spacing: -0.015em;
  color: var(--ink-strong);
  transition: color 260ms var(--ease-out);
}
.faq-q:hover { color: var(--accent, #b8935f); }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* a plus that becomes a minus — no rotation gimmick, just a line leaving */
.faq-q__mark {
  position: relative; flex: none;
  width: 15px; height: 15px; margin-top: 0.42em;
}
.faq-q__mark::before, .faq-q__mark::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--accent, #b8935f);
}
.faq-q__mark::before { width: 15px; height: 1.5px; }
.faq-q__mark::after  { width: 1.5px; height: 15px; transition: transform 320ms var(--ease-out), opacity 220ms var(--ease-out); }
.faq-q[aria-expanded="true"] .faq-q__mark::after { transform: scaleY(0); opacity: 0; }

/* Height animation without measuring: grid-template-rows 0fr → 1fr */
/* Collapsed only once faq.js has claimed the accordion. Without JS every
   answer stays open and readable rather than sealed shut. */
.faq-list[data-js="true"] .faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 340ms var(--ease-out);
}
.faq-list[data-js="true"] .faq-a > div { overflow: hidden; }
.faq-list[data-js="true"] .faq-a.is-open { grid-template-rows: 1fr; }
.faq-a p {
  margin: 0; padding-bottom: clamp(1.1rem, 2.2vw, 1.5rem);
  max-width: 62ch; font-size: 1rem; line-height: 1.68; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .faq-a { transition: none; }
  .faq-q__mark::after { transition: none; }
}

/* The earlier .faq-list centred itself and drew its own borders, which left the
   questions indented from their category labels and double-ruled between
   items. Align it to the page grid and let the grouped rules stand alone. */
.faq-list {
  max-width: 54rem;
  margin-inline: 0;
  border-top: 0;
}
.faq-list .faq-item { border-bottom: 0; border-top: 1px solid var(--line); }
.faq-group .faq-list .faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-group__h { max-width: 54rem; }

/* ══════════════════════════════════════════════════════════════════════════
   FEES
   Money is where families expect evasion, so the page leads with the single
   idea — one fee — at display size, then answers the obvious follow-ups in
   order. No pricing card, no table of tiers we are not publishing anyway.
   ══════════════════════════════════════════════════════════════════════════ */
.fee {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.fee__lead { position: sticky; top: calc(var(--header-h, 72px) + 2rem); }
.fee__mark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 6vw, 7rem);
  line-height: 0.85; letter-spacing: -0.045em;
  color: var(--accent, #b8935f);
  margin: 0;
}
.fee__h {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  line-height: 1.05; letter-spacing: -0.03em;
  margin: 0.25rem 0 1.1rem;
}
.fee__note { font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 34ch; margin: 0; }

.fee__body { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.fee__block h3 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  letter-spacing: -0.02em; margin: 0 0 0.7rem;
}
.fee__block p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--muted); max-width: 58ch; }

.fee__list { list-style: none; margin: 0; padding: 0; }
.fee__list li {
  position: relative; padding: 0.9rem 0 0.9rem 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.99rem; line-height: 1.6; color: var(--muted);
}
.fee__list li:last-child { border-bottom: 1px solid var(--line); }
.fee__list li::before {
  content: ""; position: absolute; left: 0; top: 1.45em;
  width: 0.7rem; height: 1px; background: var(--accent, #b8935f);
}

.fee__q { margin: 0; padding: 0; list-style: none; counter-reset: fq;
  columns: 2; column-gap: clamp(2rem, 5vw, 4rem); max-width: 68rem; }
.fee__q li {
  counter-increment: fq;
  break-inside: avoid;
  position: relative; padding: 0.85rem 0 0.85rem 2.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.99rem; line-height: 1.55;
}
.fee__q li::before {
  content: counter(fq, decimal-leading-zero);
  position: absolute; left: 0; top: 1rem;
  font-family: var(--font-display); font-size: 0.8rem; color: var(--accent, #b8935f);
}

@media (max-width: 900px) {
  .fee { grid-template-columns: minmax(0, 1fr); }
  .fee__lead { position: static; }
  .fee__note { max-width: none; }
  .fee__q { columns: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GUIDES
   The index reads as a contents page; each guide as a printable checklist.
   These are the pages families search for by name, so they get real routes
   and real hierarchy rather than being fragments of a longer page.
   ══════════════════════════════════════════════════════════════════════════ */
.guides { display: grid; max-width: 58rem; }
.guide {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.6rem, 3.2vw, 2.4rem);
  border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background 380ms var(--ease-out);
}
.guides .guide:last-of-type { border-bottom: 1px solid var(--line); }
.guide:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.guide__n {
  font-family: var(--font-display); font-size: 0.9rem;
  color: var(--accent, #b8935f); padding-top: 0.4em;
}
.guide__body { display: grid; gap: 0.45rem; }
.guide__t {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.18; letter-spacing: -0.022em; color: var(--ink-strong);
  transition: color 300ms var(--ease-out);
}
.guide:hover .guide__t { color: var(--accent, #b8935f); }
.guide__b { font-size: 0.98rem; line-height: 1.6; color: var(--muted); max-width: 56ch; }
.guide__go {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: 0.35rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent, #b8935f);
}
.guide__go svg { width: 16px; height: 16px; transition: transform 400ms var(--ease-out); }
.guide:hover .guide__go svg { transform: translateX(4px); }

.guide__disclaimer {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: 1rem; border-left: 2px solid var(--line);
  max-width: 60ch; font-size: 0.9rem; line-height: 1.6; color: var(--muted);
}
.guide__crumb { margin: 0 0 1rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.guide__crumb a { color: var(--muted); text-decoration: none; }
.guide__crumb a:hover { color: var(--accent); }

/* The guide itself */
.gd { max-width: 46rem; }
.gd__group { margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); }
.gd__group:last-child { margin-bottom: 0; }
.gd__h {
  font-family: var(--font-text);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent, #b8935f);
  padding-bottom: 0.65rem; margin: 0 0 0.35rem;
  border-bottom: 1px solid var(--line);
}
.gd__list { list-style: none; margin: 0; padding: 0; counter-reset: g; }
.gd__list li {
  counter-increment: g;
  position: relative;
  padding: 0.85rem 0 0.85rem 2.15rem;
  border-bottom: 1px solid var(--line-soft, rgba(29,35,32,0.07));
  font-size: 1rem; line-height: 1.6;
}
.gd__list li:last-child { border-bottom: 0; }
.gd__list li::before {
  content: counter(g);
  position: absolute; left: 0; top: 0.92rem;
  font-family: var(--font-display); font-size: 0.85rem;
  color: var(--muted);
}

.gd__nav {
  display: flex; justify-content: space-between; gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem; border-top: 1px solid var(--line);
  max-width: 46rem;
}
.gd__nav a {
  display: grid; gap: 0.25rem; max-width: 20rem;
  text-decoration: none; color: var(--ink-strong);
  font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3;
}
.gd__nav a span {
  font-family: var(--font-text); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.gd__nav a:hover { color: var(--accent); }
.gd__next { text-align: right; }

@media (max-width: 560px) {
  .guide { grid-template-columns: 2rem minmax(0, 1fr); }
  .gd__nav { flex-direction: column; }
  .gd__next { text-align: left; }
}

/* A printed checklist is genuinely useful — make it print well. */
@media print {
  .gd__list li { break-inside: avoid; }
  .gd__group { break-inside: avoid; }
  .gd__nav, .guide__crumb { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONCEPT LABEL
   This marks the two images that are renderings of proposed finishes rather
   than photographs of the house as it stands. It is an honesty device, so it
   is always visible, never behind a hover state, and legible at every size.
   It had no base styles at all — only a partial override — and was rendering
   as clipped text on a dark smear at narrow widths.
   ══════════════════════════════════════════════════════════════════════════ */
.tag-concept {
  display: inline-block;
  padding: 0.4em 0.7em;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 2px;
  background: rgba(18, 15, 11, 0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-text);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.g-item .tag-concept {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 3;
}
@media (max-width: 560px) {
  .tag-concept { font-size: 0.58rem; letter-spacing: 0.1em; padding: 0.38em 0.6em; }
}

/* ── Hero fit on standard laptop heights ───────────────────────────────────
   At 1440x900 the type block ran ~80px long, so the fact rail was sliced in
   half at the fold — which reads as a rendering fault rather than as an
   invitation to scroll. Reclaim that height between 781px and 1000px so the
   rail lands flush on the fold. Taller viewports keep the generous rhythm. */
@media (min-height: 781px) and (max-height: 1000px) and (min-width: 901px) {
  .hero__type {
    padding-block: calc(var(--header-h, 72px) + 1.25rem) 1.25rem;
  }
  .hero__title { font-size: clamp(2.9rem, 5.6vw, 6.4rem); margin-bottom: 0.9rem; }
  .hero__lede { margin-bottom: 1.35rem; font-size: 1.08rem; }
  .hero__kicker { margin-bottom: 1rem; }
  .hero__fact { padding-block: 0.85rem; }
}

/* The original .hero rule still applied its own padding-block on top of the
   100svh stage, pushing the fact rail exactly that far past the fold at every
   viewport height. The stage owns the vertical rhythm now. */
.hero { padding-block: 0; }

/* ── Film band legibility ──────────────────────────────────────────────────
   The caption sits over a bright sky at some points in the sequence, where the
   brass kicker measured 1.58:1 against the frame — well below the 3:1 WCAG AA
   floor for large text. Deepen the veil under the caption and lift the kicker
   to the pale brass so it holds at every frame of the pan, not just the dark
   ones. */
.film-veil {
  background:
    linear-gradient(to top, rgb(20 17 12 / 0.82) 0%, rgb(20 17 12 / 0.55) 26%, transparent 54%),
    linear-gradient(to bottom, rgb(20 17 12 / 0.30), transparent 30%);
}
.film-band .kicker-light {
  color: var(--brass-300, #d8bb8c);
  text-shadow: 0 1px 12px rgb(20 17 12 / 0.55);
}
.film-lede { text-shadow: 0 1px 16px rgb(20 17 12 / 0.45); }

/* The kicker is ~13px semibold — that is NOT "large text" under WCAG, so it
   needs 4.5:1, not 3:1. Brass could not reach that over a moving bright frame.
   Ivory does, with headroom for the brightest point of the pan. */
.film-band .kicker-light { color: var(--ivory-100, #faf7f1); }
.film-veil {
  background:
    linear-gradient(to top, rgb(20 17 12 / 0.86) 0%, rgb(20 17 12 / 0.62) 28%, transparent 56%),
    linear-gradient(to bottom, rgb(20 17 12 / 0.32), transparent 30%);
}

/* ── The day's light ───────────────────────────────────────────────────────
   The wash was mixing at 0.28/0.14 alpha over ivory, which is close to
   invisible — the sequence read as a static cream page with a changing label.
   Raised, widened, and given a warm floor band so the room genuinely warms
   toward dusk and cools at night. Still nowhere near text contrast. */
.day2__sky {
  background:
    radial-gradient(135% 78% at var(--sky-x, 18%) -4%,
      hsl(var(--sky-h, 44) var(--sky-s, 62%) var(--sky-l, 66%) / 0.52), transparent 60%),
    linear-gradient(to bottom,
      transparent 42%,
      hsl(var(--sky-h, 44) var(--sky-s, 62%) var(--sky-l, 66%) / 0.20) 100%);
  transition: background 1600ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .day2__sky { transition: none; }
}

/* ── Scale comparison caption ──────────────────────────────────────────────
   The old caption read "120 residents, across wings and shifts" with no
   subject, so it looked like a statement about THIS home. Each state now
   names who it refers to before it gives the number. */
.scaleviz-caption span[data-large],
.scaleviz-caption span[data-small] { display: grid; gap: 0.3rem; }
.sv-who {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(243, 236, 224, 0.5);
}
.sv-who--us { color: var(--brass-300, #d8bb8c); }
.sv-n { display: block; }
.scaleviz-note {
  margin: 0.9rem 0 0; padding-top: 0.85rem;
  border-top: 1px solid rgba(243, 236, 224, 0.1);
  font-size: 0.78rem; line-height: 1.5; color: rgba(243, 236, 224, 0.42);
}

/* The oversight panel is near-black, but its heading rule only targeted h3.
   Any heading level inside it must take the light treatment, or it renders
   dark-on-dark and disappears — which is what happened to "The planning-ahead
   list" on the contact page. */
.oversight-panel h2,
.oversight-panel h3,
.oversight-panel h4 { color: var(--ivory-100); }
.oversight-panel p { color: var(--ivory-200); }

/* Heading spacing inside the panel was only defined for h3. */
.oversight-panel h2, .oversight-panel h4 { margin-bottom: var(--space-2); }

/* ── What the state requires ───────────────────────────────────────────────
   Regulatory minimums, presented as a reference table. Families almost never
   know these exist, and they are the most useful thing we can hand them for
   comparing any provider. */
.stds { margin: 0; display: grid; max-width: 62rem; }
.stds > div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 0.4rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.stds > div:last-child { border-bottom: 1px solid var(--line); }
.stds dt {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  line-height: 1.25; letter-spacing: -0.015em; color: var(--ink-strong);
}
.stds dd { margin: 0; font-size: 0.97rem; line-height: 1.62; color: var(--muted); }
@media (max-width: 720px) { .stds > div { grid-template-columns: 1fr; } }

/* ── Care explorer media ───────────────────────────────────────────────────
   The category photographs are landscape close-ups. Squeezing them into a
   narrow portrait column kept roughly a third of the frame and sliced the
   subject in half. The panel now runs the image as a wide band above the
   list, which is the shape the photographs were actually taken in. */
.care-x__panel {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.care-x__media { align-self: auto; max-width: none; }
.care-x__media .ph { height: auto; }
.care-x__glede { max-width: 58ch; }
/* two columns for the definition list once there is room */
@media (min-width: 1001px) {
  .care-x__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .care-x__list > div:nth-child(-n+2) { border-top: 1px solid var(--line); }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE RATIO
   This column previously held an animated field of dots collapsing from 120
   to 7. It only read as anything while scrolling; held still it was seven
   glowing dots on a grid, and it made the section harder to understand rather
   than easier. Replaced with the thing the paragraph is actually describing —
   the real table — and a comparison legible in about a second.
   ══════════════════════════════════════════════════════════════════════════ */
.ratio { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.ratio__fig { margin: 0; position: relative; border-radius: 3px; overflow: hidden; }
.ratio__fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.1rem 0.95rem;
  font-size: 0.9rem; color: #fff;
  background: linear-gradient(to top, rgba(18,15,11,0.8), transparent);
}
.ratio__cmp { margin: 0; display: grid; }
.ratio__cmp > div { padding: clamp(0.9rem, 2vw, 1.2rem) 0; border-top: 1px solid rgba(243,236,224,0.14); }
.ratio__cmp > div:last-child { border-bottom: 1px solid rgba(243,236,224,0.14); }
.ratio__cmp dt {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(243, 236, 224, 0.45); margin-bottom: 0.4rem;
}
.ratio__cmp dd { margin: 0; display: flex; align-items: baseline; gap: 0.85rem; }
.ratio__cmp b {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem); line-height: 1;
  color: rgba(243, 236, 224, 0.6); min-width: 3.2ch;
}
.ratio__cmp span { font-size: 0.95rem; line-height: 1.45; color: rgba(243, 236, 224, 0.6); }
.ratio__cmp .is-us dt { color: var(--brass-300, #d8bb8c); }
.ratio__cmp .is-us b { color: var(--brass-300, #d8bb8c); }
.ratio__cmp .is-us span { color: rgba(243, 236, 224, 0.88); }
.ratio__note { margin: 0; font-size: 0.78rem; line-height: 1.5; color: rgba(243, 236, 224, 0.38); }

/* ══════════════════════════════════════════════════════════════════════════
   THANKS MODAL — warm acknowledgement after a successful enquiry send.
   ══════════════════════════════════════════════════════════════════════════ */
.thanks {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(23, 21, 15, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: thanks-in 260ms var(--ease-out, ease-out);
}
.thanks__card {
  position: relative;
  max-width: 26rem; width: 100%;
  background: var(--cream-card, #fbf8f1);
  border-radius: 10px;
  padding: clamp(1.8rem, 5vw, 2.6rem);
  text-align: center;
  box-shadow: 0 24px 70px rgba(23, 21, 15, 0.35);
}
.thanks__mark { color: var(--olive-500, #5c6650); margin-bottom: 0.6rem; }
.thanks__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.7rem; margin: 0 0 0.6rem; color: var(--ink-900, #17150f);
}
.thanks__text { font-size: 0.98rem; line-height: 1.6; color: var(--ink-700, #35312a); margin: 0 0 0.8rem; }
.thanks__warm { font-size: 0.95rem; color: var(--wood-600, #8a6a4f); font-style: italic; margin: 0 0 1.4rem; }
.thanks__ok {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 0.7rem 1.6rem; border-radius: 999px;
  border: 1px solid var(--olive-600, #47503e);
  background: var(--olive-600, #47503e); color: var(--ivory-100, #f7f3ea);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.thanks__ok:hover, .thanks__ok:focus-visible { transform: translateY(-1px); }
.thanks-open { overflow: hidden; }
@keyframes thanks-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHAT WIDGET — corner assistant. Rule-based; hands off to a person.
   ══════════════════════════════════════════════════════════════════════════ */
.chat { position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: 5.2rem; z-index: 250; }
@media (min-width: 48rem) { .chat { bottom: 1.6rem; } }
.chat__btn {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; margin-left: auto;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--olive-600, #47503e); color: var(--ivory-100, #f7f3ea);
  box-shadow: 0 10px 30px rgba(23, 21, 15, 0.28);
  transition: transform 220ms var(--ease-out, ease-out), background 220ms ease;
}
.chat__btn:hover { transform: translateY(-2px); }
.chat__ix { display: none; }
.chat.is-open .chat__ix { display: block; }
.chat.is-open .chat__ic { display: none; }
.chat__panel {
  position: absolute; right: 0; bottom: calc(100% + 0.7rem);
  width: min(25rem, calc(100vw - 1.8rem));
  height: min(34rem, calc(100dvh - 6.5rem));
  max-height: 78vh;
  display: flex; flex-direction: column;
  background: var(--cream-card, #fbf8f1);
  border: 1px solid var(--stone-300, #d8d0bf);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(23, 21, 15, 0.28);
  overflow: hidden;
  opacity: 0; transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms var(--ease-out, ease-out), transform 220ms var(--ease-out, ease-out);
}
.chat__panel[hidden] { display: none; }
.chat.is-open .chat__panel {
  opacity: 1; transform: none; pointer-events: auto;
  animation: chat-pop 240ms var(--ease-out, ease-out);
}
@keyframes chat-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.chat__head {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 4.25rem;
  padding: 0.8rem 1rem;
  background: var(--olive-600, #47503e); color: var(--ivory-100, #f7f3ea);
}
.chat__identity { display: flex; align-items: center; gap: 0.7rem; }
.chat__status {
  width: 0.65rem; height: 0.65rem; flex: 0 0 auto;
  border-radius: 50%; background: #d7dfb4;
  box-shadow: 0 0 0 4px rgb(215 223 180 / 0.14);
}
.chat__kicker { margin: 0; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,243,234,0.62); }
.chat__title { margin: 0.1rem 0 0; font-size: 0.95rem; font-weight: 650; }
.chat__close {
  border: 0; background: none; color: rgba(247,243,234,0.85);
  width: 2rem; height: 2rem; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0.15rem;
}
.chat__close:hover, .chat__close:focus-visible { background: rgb(247 243 234 / 0.1); }
.chat__log {
  padding: 1rem; overflow-y: auto; flex: 1 1 auto;
  display: grid; gap: 0.8rem; align-content: start;
  min-height: 12rem;
  scrollbar-width: thin;
  scrollbar-color: var(--stone-300, #d8d0bf) transparent;
}
.chat__row { display: grid; gap: 0.45rem; justify-items: start; }
.chat__row--me { justify-items: end; }
.chat__msg { max-width: 89%; padding: 0.7rem 0.85rem; border-radius: 13px; font-size: 0.9rem; line-height: 1.5; }
.chat__msg--bot { background: #fff; color: var(--ink-800, #24211a); border: 1px solid var(--stone-300, #d8d0bf); border-top-left-radius: 4px; }
.chat__msg--user { background: var(--olive-600, #47503e); color: var(--ivory-100, #f7f3ea); }
.chat__link { display: inline-block; font-size: 0.85rem; color: var(--olive-600, #47503e); font-weight: 600; }
.chat__cta {
  display: inline-block; padding: 0.45rem 0.9rem;
  border: 1px solid var(--wood-600, #8a6a4f); border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; color: var(--wood-600, #8a6a4f);
  text-decoration: none; transition: background 180ms ease, color 180ms ease;
}
.chat__cta:hover { background: var(--wood-600, #8a6a4f); color: #fff; }
.chat__suggestions {
  flex: 0 0 auto;
  padding: 0.55rem 0 0.65rem;
  border-top: 1px solid var(--stone-300, #d8d0bf);
  background: color-mix(in srgb, var(--cream-card, #fbf8f1) 82%, #fff);
}
.chat__suggestions > p {
  margin: 0 1rem 0.4rem;
  color: var(--muted, #6f685d);
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.chat__chips {
  display: flex; flex-wrap: nowrap; gap: 0.38rem;
  padding: 0 1rem;
  overflow-x: auto; overscroll-behavior-inline: contain;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.chat__chips::-webkit-scrollbar { display: none; }
.chat__chip {
  flex: 0 0 auto; scroll-snap-align: start;
  font: inherit; font-size: 0.74rem; cursor: pointer; white-space: nowrap;
  padding: 0.42rem 0.72rem; border-radius: 999px;
  border: 1px solid var(--stone-300, #d8d0bf); background: #fff; color: var(--ink-700, #35312a);
}
.chat__chip:hover { border-color: var(--olive-500, #5c6650); color: var(--olive-600, #47503e); }
.chat__ask { display: flex; flex: 0 0 auto; gap: 0.5rem; padding: 0.7rem 1rem 0.9rem; border-top: 1px solid var(--stone-300, #d8d0bf); background: #fff; }
.chat__input {
  flex: 1; font: inherit; font-size: 0.9rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--stone-300, #d8d0bf);
  border-radius: 999px; background: #fff; color: var(--ink-900, #17150f);
}
.chat__input:focus { outline: 2px solid var(--olive-500, #5c6650); outline-offset: 1px; }
.chat__send {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--olive-600, #47503e); color: var(--ivory-100, #f7f3ea);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
body[data-action-bar-visible] .chat { bottom: 6.2rem; }
@media (max-width: 48rem) {
  .chat { right: 0.75rem; }
  .chat__panel {
    bottom: calc(100% + 0.6rem);
    width: calc(100vw - 1.5rem);
    height: min(32rem, calc(100dvh - 12rem));
    min-height: 22rem;
    max-height: 70vh;
  }
  .chat__log { min-height: 10rem; }
}
@media (prefers-reduced-motion: reduce) {
  .thanks { animation: none; }
}

/* 404 page */
.not-found__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.not-found__alt { font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────────
   Design tokens + base. Palette drawn from the house itself: warm ivory,
   stone, muted olive, charcoal, wood, low brass light. Type: Fraunces
   display serif + Inter text sans, sized generously for older readers.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* palette */
  --ink-900: #17150f;
  --ink-800: #24211a;
  --ink-700: #35312a;
  --ivory-100: #f7f3ea;
  --ivory-200: #efe9db;
  --stone-300: #d8d0bf;
  --stone-400: #b8ad97;
  --olive-500: #5c6650;
  --olive-600: #47503e;
  --wood-600: #8a6a4f;
  --brass-400: #c2a06b;
  --cream-card: #fbf8f1;

  /* semantic */
  --bg: var(--ivory-100);
  --bg-raised: var(--cream-card);
  --ink: var(--ink-800);
  --ink-strong: var(--ink-900);
  --muted: #6b6455;
  --line: color-mix(in srgb, var(--stone-300) 62%, transparent);
  --accent: var(--olive-600);
  --warm-glow: 214deg 62% 60%;

  /* type scale — generous for older eyes */
  --fs--1: clamp(0.94rem, 0.92rem + 0.15vw, 1rem);
  --fs-0: clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
  --fs-1: clamp(1.22rem, 1.12rem + 0.5vw, 1.42rem);
  --fs-2: clamp(1.55rem, 1.3rem + 1.2vw, 2.1rem);
  --fs-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --fs-4: clamp(2.9rem, 2rem + 4.5vw, 5.6rem);

  /* rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --section-pad: clamp(4.5rem, 10vh, 8rem);
  --container: 72rem;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 240ms;
  --dur-2: 480ms;
  --radius: 14px;
  --radius-lg: 22px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Inter", -apple-system, "Segoe UI", sans-serif;
}

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

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 420; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-4); }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-1); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 200;
  background: var(--ink-strong);
  color: var(--ivory-100);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  transform: translateY(-200%);
  transition: transform var(--dur-1) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.container {
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

/* selection */
::selection { background: color-mix(in srgb, var(--brass-400) 40%, transparent); }

/* base section spacing */
main > section { padding-block: var(--section-pad); position: relative; }

.kicker {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.section-head { max-width: 46rem; margin-bottom: var(--space-4); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-title { text-wrap: balance; margin-bottom: var(--space-2); }
.lede { font-size: var(--fs-1); color: var(--muted); line-height: 1.5; max-width: 42rem; }
.lede strong { color: var(--ink-strong); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   zz-fx.css — the motion layer.

   Loaded last so it can sit on top of the existing design without editing it.
   Every rule here is additive: remove this file and the site looks and works
   exactly as it did, which is also what happens under reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the living hero ─────────────────────────────────────────────────────── */

/* The shader canvas covers the still, which stays in the document as the LCP
   element and as the fallback. It fades in only once a frame has been drawn,
   so a failed context is invisible rather than a black rectangle. */
.hero__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.hero__gl.is-live { opacity: 1; }

/* The still underneath does not need to keep compositing once the canvas is
   over it, but it must stay in the layout as the fallback. */
.hero__gl.is-live ~ .hero__img { will-change: auto; }


/* ── gallery tiles ───────────────────────────────────────────────────────── */

/* Live tiles pan their own image rather than transitioning a fixed scale, so
   the CSS transition is handed over to the damped loop in tiles.js. The
   translate is multiplied by --tz so the image is never shifted further than
   the extra scale can cover — no edge is ever exposed. */
.g-item--live img {
  transition: none;
  transform:
    translate(calc(var(--tx, 0%) * var(--tz, 0)), calc(var(--ty, 0%) * var(--tz, 0)))
    scale(calc(1 + var(--tz, 0) * 0.1));
}
/* Matches the specificity of the existing .g-item:hover img scale so the
   damped values win during hover rather than fighting a fixed transform. */
.g-item--live:hover img,
.g-item--live:focus-visible img {
  transform:
    translate(calc(var(--tx, 0%) * var(--tz, 0)), calc(var(--ty, 0%) * var(--tz, 0)))
    scale(calc(1 + var(--tz, 0) * 0.1));
}

/* A soft highlight that follows the cursor across the tile. Screen blending
   keeps it as light rather than a grey film over the photograph. */
.g-item--live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: calc(var(--tz, 0) * 0.5);
  transition: opacity 420ms ease;
  background: radial-gradient(
    38% 46% at var(--sx, 50%) var(--sy, 50%),
    rgba(255, 236, 205, 0.30),
    rgba(255, 226, 180, 0.08) 45%,
    transparent 72%);
  mix-blend-mode: screen;
}

/* The caption and its scrim already exist; lift them above the sheen. */
.g-item .g-cap { z-index: 3; }
.g-item::after { z-index: 2; }


/* ── pointer light over dark sections ────────────────────────────────────── */

.lamp {
  position: absolute;
  top: 0; left: 0;
  width: 46rem; height: 46rem;
  margin: -23rem 0 0 -23rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  will-change: transform, opacity;
  background: radial-gradient(
    closest-side,
    rgba(255, 214, 150, 0.13),
    rgba(255, 196, 122, 0.05) 42%,
    transparent 70%);
  mix-blend-mode: screen;
}

/* The light must never sit over text or controls, and its blend must not
   escape the section — `isolation` bounds the blending context and
   `overflow: clip` bounds the paint. */
[data-glow] {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
[data-glow] > *:not(.lamp) { position: relative; z-index: 2; }


/* ── the drawn connector ─────────────────────────────────────────────────── */

/* A rail down the left of a numbered list that fills as the list is read.
   The unfilled rail is the border that was already there; only the brass
   portion is new, so nothing shifts when this file is absent. */
.threaded { position: relative; }
.threaded::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  transform: scaleY(var(--thread, 0));
  transform-origin: top;
  background: linear-gradient(
    to bottom,
    rgba(216, 187, 140, 0.85),
    rgba(216, 187, 140, 0.35));
  border-radius: 2px;
  pointer-events: none;
}
/* Give the rail somewhere to live without moving the text. */
.seven__points.threaded { padding-left: clamp(0.9rem, 1.6vw, 1.4rem); }
.seven__points.threaded::before { left: 0; }

/* The licensing journey already draws a static spine at 0.5rem, one segment
   per step. The brass line is laid directly over it and needs no space of
   its own, so this variant adds no padding and shifts nothing. */
.lic-steps.threaded::before {
  left: 0.5rem;
  width: 1px;
  border-radius: 0;
  background: linear-gradient(to bottom, rgba(184, 147, 95, 0.95), rgba(184, 147, 95, 0.5));
}


/* ── page cross-fade ─────────────────────────────────────────────────────── */

/* Only armed when flow.js confirms the browser supports view transitions. */
html.vt::view-transition-old(root),
html.vt::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
html.vt::view-transition-old(root) { animation-name: vt-out; }
html.vt::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }


/* ── the switch ──────────────────────────────────────────────────────────── */

/* Everything above is decoration. Under reduced-motion it is not softened or
   slowed, it is removed: the shader canvas never appears, tiles hold still,
   the rail is drawn whole, and pages simply replace one another. */
@media (prefers-reduced-motion: reduce) {
  .hero__gl { display: none !important; }
  .lamp { display: none !important; }
  .g-item--live img { transition: none !important; transform: none !important; }
  .g-item--live::before { display: none !important; }
  .threaded::before { transform: scaleY(1); opacity: 0.5; }
  html.vt::view-transition-old(root),
  html.vt::view-transition-new(root) { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   zz-refine.css — typography, ergonomics and decoration.

   Loaded after components.css and zz-fx.css. Additive: it changes how the
   existing design is set, never what it says or where it sits.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. how the type sets ────────────────────────────────────────────────────
   The single largest visual gain available here, and it costs nothing.
   `balance` stops a display heading from dropping one orphaned word onto its
   own line — the most common way editorial type looks accidental. `pretty`
   does the gentler version for body copy: it only prevents a last line of one
   word, without re-flowing the whole paragraph. Unsupported browsers ignore
   both and wrap exactly as they do today. */
h1, h2, h3, h4,
.hero__title, .seven__h, .lic2__stage, .fit2__h, .kicker, .g-cap {
  text-wrap: balance;
}
p, li, dd, figcaption, .hero__lede, .seven__lede {
  text-wrap: pretty;
}

/* Fraunces carries an optical-size axis; letting the browser drive it means
   display sizes get the higher-contrast, tighter-fitted cut and small sizes
   get the sturdier one. */
:root { font-optical-sizing: auto; }

/* Numbers that sit in a column — the fact rail, the day clock, the timeline
   tags — should not jitter as they change width. */
.hero__factn, .seven__n, .day2__t, [data-day-clock], .lic2__tag {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Quotation marks hang into the margin instead of indenting the first word.
   Safari only today; elsewhere it is simply ignored. */
blockquote, .pullquote { hanging-punctuation: first last; }


/* ── 2. a focus state that was designed ──────────────────────────────────────
   Most links on the site fell through to the browser's default ring, which on
   a cream ground is a thin blue rectangle. Keyboard users get the same care as
   everyone else: a brass ring, offset so it never sits on the glyphs, and
   shaped to whatever it surrounds. `:focus-visible` means a mouse click never
   triggers it. */
/* Colour is not a free choice here. WCAG 1.4.11 asks a focus indicator for
   3:1 against what surrounds it, and brass (#c2a06b) on the cream ground
   measures 2.22:1 — it looked the part and failed the requirement. Olive
   (--accent) measures 7.63:1 on the ground and 7.97:1 on a card, and is
   already what the site's own components use, so this matches convention
   rather than inventing a second one.

   `:where()` keeps the specificity at zero on purpose: a component that has
   designed its own focus treatment should keep it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Olive falls to 2.21:1 on the dark sections, so those flip to ivory
   (16.9:1). The section list below was measured, not guessed — every
   surface on the site whose relative luminance is under 0.18. */
:where(.hero, .seven, .film-band, .cta-band, .clinical-spotlight,
       .dine--teaser, [data-glow], footer)
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--ivory-100);
}


/* ── 3. prose links that read as links ──────────────────────────────────────
   An underline drawn as a background gradient, so it sits below the baseline
   and thickens on hover rather than jumping between none and underline. */
.prose a:not(.cta):not(.brand),
p a:not(.cta):not(.brand),
li a:not(.cta):not(.brand),
dd a:not(.cta):not(.brand) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 0.08em;
  transition: background-size var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.prose a:not(.cta):hover,
p a:not(.cta):hover,
li a:not(.cta):hover,
dd a:not(.cta):hover { background-size: 100% 2px; }


/* ── 4. mobile ergonomics ───────────────────────────────────────────────────
   Measured on a 375px viewport: the footer navigation rendered nine links at
   25px tall with no padding, under the 24px WCAG 2.2 minimum and well under a
   comfortable thumb. The links keep their type size and their rhythm; only
   the hit area grows. */
.footer-nav a,
.footer-legal a {
  display: flex;
  align-items: center;
  padding-block: 0.62rem;
  min-height: 44px;
}
.footer-nav { gap: 0; }

.brand { min-height: 44px; }

/* A link that stands on its own — not one inside a sentence — is a target in
   its own right and WCAG 2.2 asks for 24px. "Use our contact form" measured
   20px. Prose links are deliberately left alone: inflating a link mid-
   sentence would break the line it sits in. */
.contact-fact a,
.over-list a,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* iOS Safari zooms the whole page when a focused field is under 16px. The
   chat widget's input was 14.4px, so opening the assistant on an iPhone and
   tapping the box shoved the layout sideways. */
.chat__input,
input, select, textarea {
  font-size: max(16px, 1em);
}

/* Coarse pointers get roomier controls throughout, without touching the
   desktop density. */
@media (pointer: coarse) {
  .nav-menu-link, .over-list a, .footer-contact a, .contact-fact a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* ── 5. decoration ──────────────────────────────────────────────────────────

   Editorial matting: a hairline inset just inside the frame of a photograph,
   the way a print is mounted. Reads as care rather than as an effect, and is
   drawn with a pseudo-element so no image is touched. */
/* Applied only to the two frames that actually crop a photograph and already
   clip their contents. `.split-media` is deliberately excluded: its caption
   sits outside the frame, so an inset border would cut across it. */
.ratio__fig, .care-x__media { position: relative; }
.ratio__fig::after, .care-x__media::after {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: 1px solid rgb(247 243 234 / 0.22);
  pointer-events: none;
  border-radius: 2px;
  z-index: 1;
}
/* A caption sharing the frame must stay above the matting. */
.ratio__fig figcaption { z-index: 2; }


/* ── 6. scroll-driven decoration, in CSS ────────────────────────────────────
   `animation-timeline: view()` ties an animation to an element's own passage
   through the viewport, with no scroll listener and no JS. The photographs in
   editorial figures lift very slightly as they cross, which is what gives a
   long page a sense of depth while scrolling.

   Everything here is inside two guards: the browser must support view
   timelines, and the visitor must not have asked for less motion. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Transform only — deliberately never opacity. A view() timeline is
       driven by how far an element has travelled through the viewport, and
       an element sitting close to the end of the document can never finish
       its range because there is nothing left to scroll. Animating opacity
       there would leave real content permanently half-faded with no way for
       the reader to fix it. A few pixels of offset is the worst this can
       do; the text is legible at every point in the range. */
    @keyframes rise-in {
      from { transform: translateY(16px); }
      to   { transform: none; }
    }
    @keyframes drift-up {
      from { transform: translateY(2.2%) scale(1.045); }
      to   { transform: translateY(-2.2%) scale(1.045); }
    }

    /* Figures drift as they pass. `scale` is held constant so the drift can
       never expose an edge of the frame. */
    .ratio__fig img, .care-x__media img {
      animation: drift-up linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }

    /* Ordered lists arrive item by item, keyed to their own position rather
       than to a timer, so the sequence follows the reader's pace exactly. */
    .seven__points > li,
    .check-list > li {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}


/* ── 7. print ───────────────────────────────────────────────────────────────
   Families do print these pages to compare homes and to take to a relative.
   Ink is expensive and the decoration carries no information. */
@media print {
  /* `.film-toggle` is the real class — `.film__controls` never existed and
     was hiding nothing. Verified against the built markup. */
  .hero__gl, .lamp, .threaded::before, .chat, .mobile-action-bar,
  .site-nav, .film-toggle, .film-veil { display: none !important; }
  .hero { min-height: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Spell out the destination of links inside prose only. Applied to every
     internal link it appended a URL to all twelve footer navigation items
     too, which is noise on a printed page rather than help. */
  :where(p, li, dd) a[href^="/"]::after {
    content: " (valegacyassistedliving.com" attr(href) ")";
    font-size: 0.8em;
  }

  * { background: transparent !important; color: #000 !important; box-shadow: none !important; }
}


/* ── 8. the hero entrance, without a dependency on JavaScript ────────────────

   As written in components.css the hero's entrance was fail-closed. The
   headline sat at `translate3d(0, 104%, 0)` inside an `overflow: hidden`
   line box, and the lede and buttons at `opacity: 0`, all three waiting for
   `.hero[data-in="true"]` — an attribute only ever set by hero.js. So the
   entire hero message depended on one script arriving. If script.js failed
   to load — a blocked request, a flaky network, a privacy extension — a
   visitor got the photograph of the house and nothing else: no headline, no
   lede, and neither call to action.

   An inline head script would only have covered the "JavaScript disabled"
   case, not the far likelier "the bundle did not arrive" one. So the
   entrance is a CSS animation instead. It needs no JS, cannot be left
   half-finished, and its resting state — declared first, below — is the
   visible one. `data-in` is left in place; it simply no longer decides
   whether anyone can read the page. */

.hero__title .ln > span { transform: none; transition: none; }
.hero__lede,
.hero__actions { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: no-preference) {
  /* The stagger is held inside each keyframe rather than set with
     animation-delay, so `forwards` can be used instead of `both`. With
     `both` and a delay there is a window before the animation starts in
     which the backwards fill holds the invisible state — one more way for
     the hero to be unreadable if animations are throttled at load. With
     `forwards` and no delay, the element's own visible state applies until
     the animation is genuinely running. */
  @keyframes hero-line-1 {
    0%   { transform: translate3d(0, 104%, 0); }
    100% { transform: none; }
  }
  @keyframes hero-line-2 {
    0%, 8% { transform: translate3d(0, 104%, 0); }
    100%   { transform: none; }
  }
  @keyframes hero-lede {
    0%, 26% { opacity: 0; transform: translateY(16px); }
    100%    { opacity: 1; transform: none; }
  }
  @keyframes hero-actions {
    0%, 33% { opacity: 0; transform: translateY(16px); }
    100%    { opacity: 1; transform: none; }
  }

  .hero__title .ln > span { animation: hero-line-1 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .hero__title .ln:nth-child(2) > span { animation-name: hero-line-2; animation-duration: 1.47s; }
  .hero__lede    { animation: hero-lede 1.35s var(--ease-out) forwards; }
  .hero__actions { animation: hero-actions 1.5s var(--ease-out) forwards; }
}


/* ── 9. the mobile action bar and the floating assistant ────────────────────

   On a phone the bar already offers "Ask a question", so the floating chat
   button was a second control for the same thing — and being fixed to the
   bottom-right it sat on top of body copy while the page scrolled beneath
   it. Measured at 375px it covered part of the fact rail. The bar keeps the
   action; the floating button steps aside on small screens.

   It returns above the bar's own breakpoint, where there is room for it and
   no bar to duplicate. */
/* The breakpoint here must be exactly the bar's own (48rem, set in
   components.css) and not a rounder number. At 860px there would be a band
   from 769px to 860px with the bar not yet shown and the assistant already
   hidden — no way to ask a question at all. */
@media (max-width: 48rem) {
  /* Hide the redundant floating BUTTON, never the host: the panel is
     positioned against `.chat`, so hiding the host opened the assistant
     into nothing — the tap appeared to do nothing at all, which is worse
     than the duplicate link it replaced. */
  .chat__btn { display: none !important; }

  /* With the button gone the host collapses to zero height. Stop it
     intercepting taps on the content behind it while the panel is shut. */
  .chat:not(.is-open) { pointer-events: none; }

  /* The bar measured 73px tall while the document reserved 4rem (64px), so
     the last line of the footer sat just beneath it. Reserve the bar plus
     the home-indicator inset, with a little air. */
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}


/* ── 10. the mobile hero, measured at 375px ─────────────────────────────────

   Two things were sprawling. The status badge sat at 357px wide on a 375px
   screen and wrapped to three lines — a status note behaving like a banner.
   And the kicker's 0.24em tracking, which is elegant at 15px on a desktop
   hero, pushed a single line of place-and-service onto two.

   Neither text changes. The badge is allowed to shrink to its content with a
   ceiling on how wide it may grow, and both tighten their tracking at small
   sizes, where wide letter-spacing costs far more room than it earns. */
@media (max-width: 48rem) {
  .hero__status {
    right: var(--gutter);          /* both sides pinned, so it cannot overrun */
    width: max-content;
    max-width: min(20rem, calc(100vw - (2 * var(--gutter))));
    letter-spacing: 0.07em;
    line-height: 1.35;
  }

  .hero__kicker {
    letter-spacing: 0.13em;
    font-size: 0.72rem;
  }
}


/* ── 11. CSP-safe image framing ────────────────────────────────────────────
   pictures.js emits data-photo/data-ratio hooks instead of inline styles.
   The strict style-src policy can therefore stay strict without losing the
   deliberate crops, aspect-ratio reservations or photograph-specific tones. */
.ph[data-ratio="1 / 1"] { aspect-ratio: 1 / 1; }
.ph[data-ratio="3 / 4"] { aspect-ratio: 3 / 4; }
.ph[data-ratio="4 / 3"] { aspect-ratio: 4 / 3; }
.ph[data-ratio="4 / 5"] { aspect-ratio: 4 / 5; }
.ph[data-ratio="16 / 9"] { aspect-ratio: 16 / 9; }
.ph[data-ratio="16 / 10"] { aspect-ratio: 16 / 10; }

.ph[data-photo="bath-primary"] { background: #b7aa9f; }
.ph[data-photo="bath-tub"] { background: #bdbfc4; }
.ph[data-photo="care-community"] { background: #676958; }
.ph[data-photo="care-mobility"] { background: #5c5449; }
.ph[data-photo="care-support"] { background: #504b3d; }
.ph[data-photo="care-touch"] { background: #ab8462; }
.ph[data-photo="care-wheelchair"] { background: #787158; }
.ph[data-photo="deck-view"] { background: #65724c; }
.ph[data-photo="dining-room"] { background: #cec8c2; }
.ph[data-photo="double-vanity"] { background: #b0a79d; }
.ph[data-photo="family-room"] { background: #bccad8; }
.ph[data-photo="foyer-living"] { background: #af9d8c; }
.ph[data-photo="front-porch"] { background: #aba590; }
.ph[data-photo="garden-path"] { background: #70775e; }
.ph[data-photo="hero-exterior"] { background: #807f55; }
.ph[data-photo="kitchen"] { background: #b6b6b6; }
.ph[data-photo="living-room"] { background: #bcb7b3; }
.ph[data-photo="lower-level"] { background: #b9bdc0; }
.ph[data-photo="primary-bedroom"] { background: #bcbcc0; }
.ph[data-photo="rear-exterior"] { background: #7b845d; }
.ph[data-photo="upper-landing"] { background: #bbaca6; }

.ph[data-photo="bath-primary"] img { object-position: 48% 55%; }
.ph[data-photo="bath-tub"] img { object-position: 50% 55%; }
.ph[data-photo="care-community"] img { object-position: 52% 42%; }
.ph[data-photo="care-mobility"] img { object-position: 50% 44%; }
.ph[data-photo="care-support"] img { object-position: 58% 44%; }
.ph[data-photo="care-touch"] img { object-position: 48% 48%; }
.ph[data-photo="care-wheelchair"] img { object-position: 56% 46%; }
.ph[data-photo="deck-view"] img { object-position: 46% 48%; }
.ph[data-photo="dining-room"] img { object-position: 48% 58%; }
.ph[data-photo="double-vanity"] img { object-position: 50% 44%; }
.ph[data-photo="family-room"] img { object-position: 50% 58%; }
.ph[data-photo="foyer-living"] img { object-position: 52% 52%; }
.ph[data-photo="front-porch"] img { object-position: 42% 58%; }
.ph[data-photo="garden-path"] img { object-position: 50% 55%; }
.ph[data-photo="hero-exterior"] img { object-position: 52% 62%; }
.ph[data-photo="kitchen"] img { object-position: 52% 52%; }
.ph[data-photo="living-room"] img { object-position: 50% 55%; }
.ph[data-photo="lower-level"] img { object-position: 48% 55%; }
.ph[data-photo="primary-bedroom"] img { object-position: 58% 55%; }
.ph[data-photo="rear-exterior"] img { object-position: 56% 44%; }
.ph[data-photo="upper-landing"] img { object-position: 50% 50%; }

.optional-label { color: var(--muted); font-weight: 400; }
.contact-facts__reply { color: var(--muted); font-size: .95rem; }
.section--flush-top { padding-top: 0 !important; }
.mt-2 { margin-top: 2rem !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.max-none { max-width: none !important; }
.max-44 { max-width: 44rem !important; }
.muted-small { color: var(--muted); font-size: .92rem; }
.muted-note { margin-top: 1.5rem; color: var(--muted); font-size: .95rem; }
.lede--stone { color: var(--stone-300); }
.standards-note { margin-top: 1.75rem; max-width: 60ch; color: var(--muted); font-size: .97rem; }
.mb-1 { margin-bottom: 1rem !important; }
.privacy-updated { color: var(--muted); font-size: .9rem; }
.chat__suggestions[hidden] { display: none; }
.chat__input { min-width: 0; }
.chat__log { min-height: 0; }
.chat__head, .chat__send { flex-shrink: 0; }
@media (max-width: 48rem) {
  .chat__panel { min-height: 0; height: min(32rem, calc(100dvh - 8rem)); max-height: calc(100dvh - 8rem); }
  .chat__log { min-height: 0; }
}

/* Gallery spans stay semantic in the markup and are no longer custom
   properties on a style attribute. */
.g-item[data-span="4"] { grid-column: span 4; }
.g-item[data-span="5"] { grid-column: span 5; }
.g-item[data-span="6"] { grid-column: span 6; }
.g-item[data-span="7"] { grid-column: span 7; }
.g-item[data-span="8"] { grid-column: span 8; }
@media (max-width: 1000px) {
  .g-item[data-span] { grid-column: span 6; }
  .g-item[data-span]:first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) { .g-item[data-span] { grid-column: 1 / -1; } }


/* ── 12. anchors must not land under the sticky header ──────────────────────

   The header is `position: sticky; top: 0` at every width — 65px on a phone,
   71px on a wide screen. Nothing set a scroll offset, so following the skip
   link put the top of <main> at y=0 with 65px of it behind the header. On the
   pages where a heading sits close to the top of main, the first thing a
   keyboard or screen-reader user was sent to was covered.

   `scroll-padding-top` on the scroll container fixes every anchor at once —
   the skip link today, and any in-page link added later.

   The measured header height is repeated here rather than read from
   `--header-h`: that custom property is referenced in components.css with
   three different fallbacks (68px, 72px, 76px) and is never actually
   defined, so defining it now would silently move the hero padding that
   currently depends on its fallback. Unifying it is a separate job. */
:root { --anchor-offset: 65px; }
@media (min-width: 1200px) { :root { --anchor-offset: 71px; } }

html { scroll-padding-top: calc(var(--anchor-offset) + 0.75rem); }


/* ── 13. the update-list consent row ────────────────────────────────────────
   The site promised an update list in five places and the form had no way to
   join it — the contact page told families to "ask to be added", meaning type
   it into the message box and hope someone filed it. This is that control.

   Left unchecked deliberately. A family enquiring about their parent's care
   should be the one who decides to hear from us again, and an unticked box
   makes the record of that decision unambiguous. */
.form-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin-block: 0.4rem 1.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--brass-400) 7%, transparent);
}
.form-consent input[type="checkbox"] {
  /* 20px is the visual mark; the label carries the rest of the target. */
  width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
  flex: none;
}
.form-consent label {
  display: grid;
  gap: 0.2rem;
  cursor: pointer;
  /* The whole row is the hit area, well past the 24px minimum. */
  min-height: 44px;
  align-content: center;
}
.form-consent__head {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink-strong);
}
.form-consent__note {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════════════════
   zzz-chapters.css — the homepage as a short film.

   Scoped to body[data-page="/"] throughout, so nothing here can reach the
   inner pages. Loaded last.

   GEOMETRY. Each chapter is:

     .ch                       the chapter
       .ch__hold      200svh   the scene's scroll runway
         .ch__stage   100svh   sticky — the pinned scene
       .ch__ground     auto    the room you can stop in

   A 200svh runway holding a 100svh stage makes the `contain` phase of the
   runway's view timeline exactly the length of the pin. Every scene animation
   is written as a percentage of that one window, which is why the pacing is
   identical in all six chapters.

   FAILURE. The scrub is driven by film.js, which publishes five custom
   properties per chapter. Every default declared here is the COMPOSED state —
   type in place, mist clear, nothing transformed — so a page with no
   JavaScript, a reader who asked for less motion, a phone, or a half-loaded
   stylesheet all get a legible document rather than six blank frames.
   Verified with scripts blocked: all six chapters composed, 1,316 words.
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-page="/"] {
  --scene-h: 100svh;
  --hold-h: 200svh;
  background: var(--ink-900);
}

/* ── almost no interface ─────────────────────────────────────────────────────
   A word-mark, one quiet action, and the menu. The primary links come out of
   the bar entirely at every width — the off-canvas panel and nav.js already
   handle them, so navigation is not lost, it is just no longer furniture. */
body[data-page="/"] .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}
body[data-page="/"] .site-header .nav-toggle { display: inline-flex; }
body[data-page="/"] .brand-sub { display: none; }
body[data-page="/"] .brand-name { color: var(--ivory-100); }
body[data-page="/"] .header-inner { padding-block: 1rem; }
/* The bar sits over photographs, so its type needs its own small scrim. */
body[data-page="/"] .site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  background: linear-gradient(to bottom, rgb(14 12 8 / 0.62), transparent);
  pointer-events: none;
  z-index: -1;
}

/* ── the film page's navigation ──────────────────────────────────────────────
   The primary links come out of the bar at every width so the frame stays
   almost empty, which means the burger has to open a panel at every width
   too. components.css only builds that panel below 64rem; above it the nav is
   an inline bar and there is nothing to open.

   The first attempt simply set `display: none` on the nav. The toggle then
   flipped aria-expanded and changed its icon while nothing appeared — on a
   desktop homepage that left one link reachable out of fifteen, with no
   indication anything was wrong.

   So the panel rules are replicated here for wide screens only. They are
   deliberately a copy of the ones in components.css rather than a
   refactor of them; if that off-canvas is ever restyled, this block needs the
   same edit. It is the narrowest coupling available without reworking the
   header for every page on the site. */
@media (min-width: 64.0625rem) {
  body[data-page="/"] .site-nav {
    position: fixed;
    inset: var(--header-h, 68px) 0 auto 0;
    max-height: calc(100svh - var(--header-h, 68px));
    overflow-y: auto;
    display: block;
    margin: 0;
    padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--ivory-100) 98%, transparent);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(23, 21, 15, 0.18);
    color: var(--ink-strong);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out), visibility 300ms;
    z-index: 120;
  }
  body[data-page="/"] .site-nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body[data-page="/"] .site-nav .nav-link {
    width: 100%;
    min-height: 54px;
    padding-block: 0.75rem;
    font-family: var(--font-display);
    font-size: 1.28rem;
    color: var(--ink-strong) !important;
  }
  body[data-page="/"] .site-nav .nav-menu {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 0 0 1rem;
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: grid-template-rows 280ms var(--ease-out);
  }
  body[data-page="/"] .site-nav .nav-menu::before { display: none; }
  body[data-page="/"] .site-nav .nav-menu ul { min-height: 0; padding: 0; overflow: hidden; }
  body[data-page="/"] .site-nav .nav-item--menu.is-open .nav-menu { grid-template-rows: 1fr; }
  body[data-page="/"] .site-nav .nav-menu-link {
    padding: 0.7rem 0.2rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    white-space: normal;
  }
  body[data-page="/"] .site-nav .nav-menu-toggle { color: var(--ink-strong) !important; }
}


/* ── the progress rail ───────────────────────────────────────────────────────
   A hairline, not a scrollbar. Decorative and aria-hidden. */
body[data-page="/"] .rail {
  position: fixed;
  left: max(0.9rem, env(safe-area-inset-left, 0px));
  top: 22vh;
  bottom: 22vh;
  width: 1px;
  background: rgb(247 243 234 / 0.16);
  z-index: 40;
  pointer-events: none;
}
body[data-page="/"] .rail__fill {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: top;
  transform: scaleY(0);
  background: linear-gradient(to bottom, var(--brass-400), rgb(194 160 107 / 0.35));
}

/* ── the chapter ─────────────────────────────────────────────────────────────*/
body[data-page="/"] .ch { position: relative; }
body[data-page="/"] .ch__hold { height: var(--hold-h); }

body[data-page="/"] .ch__stage {
  position: sticky;
  top: 0;
  height: var(--scene-h);
  overflow: clip;
  display: grid;
  align-content: end;
  isolation: isolate;
}

/* scene photograph — oversized so parallax never exposes an edge */
body[data-page="/"] .ch__bg {
  position: absolute;
  inset: -4% -2%;
  z-index: 0;
  overflow: hidden;
}
body[data-page="/"] .ch__img,
body[data-page="/"] .ch__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The opening frame has a generous patch of real sky. A barely-there cloud
   veil moves through that space over a long cycle, so the house feels like a
   living photograph without changing the owner-supplied image or putting a
   synthetic object over the architecture. It is deliberately soft and low
   contrast; the existing shader supplies the slower whole-frame movement. */
body[data-page="/"] .ch--open .ch__bg::after {
  content: "";
  position: absolute;
  inset: -18% -12% 38% -18%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.14;
  filter: blur(18px);
  background:
    radial-gradient(34% 42% at 22% 32%, rgb(255 255 255 / 0.80), transparent 72%),
    radial-gradient(26% 36% at 54% 20%, rgb(255 255 255 / 0.62), transparent 70%),
    radial-gradient(38% 44% at 82% 38%, rgb(255 255 255 / 0.52), transparent 74%);
  mix-blend-mode: screen;
  animation: sky-cloud-drift 52s ease-in-out infinite alternate;
}
@keyframes sky-cloud-drift {
  from { transform: translate3d(-2.5%, 1%, 0) scale(1.02); opacity: 0.10; }
  to { transform: translate3d(3.5%, -1.5%, 0) scale(1.06); opacity: 0.17; }
}

/* Per-scene scrim. Measured against each photograph rather than guessed —
   the display line is near-white and sits directly on the image. */
body[data-page="/"] .ch__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Two layers, and the first one is the important one.

   Measured on chapter I with a single vertical grade: the display line came
   out at 2.67:1 against the 3:1 floor for large text, and the chapter label
   at 1.46:1 against 4.5:1. The brightest pixels beneath them are white siding
   and open sky, which is exactly where reversed-out type fails.

   Darkening the whole frame to fix that would throw away the photograph. So
   the first layer is a scrim anchored to the LEFT — the column the type
   actually occupies — falling away to nothing by two-thirds across. The house
   and the sky keep their light; the words get ground to stand on. The second
   layer is the vertical grade, which is there for mood.

   Effective alpha behind the type lands around 0.7, verified per chapter
   further down by sampling the real pixels under each block. */
/* MOOD ONLY. These used to carry the legibility too, which meant washing
   0.87 black across the whole left half of every photograph — and the
   photographs went murky. That was the wrong trade: it degraded the one thing
   the page is actually made of.

   Legibility now comes from a tight scrim behind the type block (further
   down), so these can go back to being light. Contrast is re-measured against
   the real shader output; see the sweep in the commit message. */
body[data-page="/"] .ch__veil--base {
  background: linear-gradient(to top, rgb(12 10 7 / 0.62) 0%, rgb(12 10 7 / 0.26) 46%, rgb(12 10 7 / 0.04) 76%, rgb(12 10 7 / 0.22) 100%);
}
body[data-page="/"] .ch__veil--deep {
  background: linear-gradient(to top, rgb(10 9 6 / 0.70) 0%, rgb(10 9 6 / 0.36) 44%, rgb(10 9 6 / 0.14) 74%, rgb(10 9 6 / 0.32) 100%);
}
body[data-page="/"] .ch__veil--mist {
  background: linear-gradient(to top, rgb(16 15 12 / 0.66) 0%, rgb(20 19 15 / 0.30) 42%, rgb(28 27 22 / 0.10) 74%, rgb(16 15 12 / 0.26) 100%);
}
body[data-page="/"] .ch__veil--dusk {
  background: linear-gradient(to top, rgb(11 10 8 / 0.68) 0%, rgb(14 12 9 / 0.30) 40%, rgb(22 19 14 / 0.06) 72%, rgb(11 10 8 / 0.28) 100%);
}

/* ── the mist ────────────────────────────────────────────────────────────────
   The cut between chapters. It thickens to full at every boundary, so scenes
   dissolve into one another instead of scrolling past one another. Two soft
   radial banks and one flat wash: cheap, and it reads as air rather than as a
   gradient. Clear by default — it only thickens where motion is allowed. */
body[data-page="/"] .ch__mist {
  position: absolute;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(58% 42% at 22% 78%, rgb(226 220 208 / 0.55), transparent 70%),
    radial-gradient(64% 46% at 78% 62%, rgb(214 208 198 / 0.42), transparent 72%),
    linear-gradient(to top, rgb(222 216 205 / 0.34), rgb(222 216 205 / 0.10));
}

/* ── the type ────────────────────────────────────────────────────────────────
   Empty sky above, one line, one sentence. Nothing else in the frame. */
/* The type's own ground.

   First attempt was an ellipse centred at 62% of this box, which measured
   badly: the chapter label sits at the TOP of the block where that ellipse is
   already weak, and it came out at 1.6–2.8:1 against a 4.5:1 requirement on
   every scene. The label is the binding constraint here — it is small text, so
   it needs 4.5:1 where the display line only needs 3:1.

   So the scrim runs at full strength across the whole height of the text and
   falls away horizontally instead, with a soft mask top and bottom so it
   reads as a shadow in the frame rather than a band across the photograph.
   The top of the frame and the right third stay untouched, which is what
   keeps the photograph looking like a photograph. */
body[data-page="/"] .ch__type::before {
  content: "";
  position: absolute;
  inset: -18% -26% -34% -40%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgb(8 7 5 / 0.91),
    rgb(8 7 5 / 0.85) 34%,
    rgb(8 7 5 / 0.54) 58%,
    rgb(8 7 5 / 0.16) 76%,
    rgb(8 7 5 / 0) 90%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 82%, transparent 100%);
}

body[data-page="/"] .ch__type {
  position: relative;
  z-index: 3;
  padding-bottom: clamp(3.5rem, 12vh, 8rem);
  max-width: 100%;
}

body[data-page="/"] .ch__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 clamp(1rem, 2.5vh, 1.6rem);
  font-family: var(--font-text);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(243 236 224 / 0.66);
}
body[data-page="/"] .ch__num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--brass-400);
}
body[data-page="/"] .ch__name::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  margin-right: 0.7rem;
  vertical-align: 0.25em;
  background: rgb(243 236 224 / 0.3);
}

body[data-page="/"] .ch__line {
  margin: 0 0 clamp(1.1rem, 3vh, 2rem);
  font-family: var(--font-display);
  font-weight: 370;
  font-size: clamp(2.6rem, 1rem + 6.6vw, 7.4rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: #fdfaf4;
  max-width: 22ch;
  text-wrap: balance;
}
/* Each line is clipped so it can rise out of its own box. */
body[data-page="/"] .ch__ln { display: block; overflow: hidden; }
body[data-page="/"] .ch__ln > span { display: block; }

body[data-page="/"] .ch__support {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.24rem);
  line-height: 1.6;
  color: rgb(243 236 224 / 0.88);
  text-wrap: pretty;
}

/* ── the ground ──────────────────────────────────────────────────────────────
   The room you can stop in. Light, because a family reads this part properly
   and long prose reversed out of black is tiring — most of all for the older
   readers this home is for. The scene dissolves into it rather than cutting. */
body[data-page="/"] .ch__ground {
  position: relative;
  z-index: 4;
  background: var(--ivory-100);
  padding-block: clamp(4rem, 12vh, 9rem);
}
body[data-page="/"] .ch__ground::before {
  content: "";
  position: absolute;
  inset: auto 0 100% 0;
  height: clamp(4rem, 14vh, 10rem);
  background: linear-gradient(to top, var(--ivory-100), transparent);
  pointer-events: none;
}

body[data-page="/"] .ch__col {
  max-width: 40rem;
  display: grid;
  gap: 1.15rem;
}
body[data-page="/"] .ch__gh {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  text-wrap: balance;
}
body[data-page="/"] .ch__col p {
  margin: 0;
  font-size: var(--fs-0);
  line-height: 1.72;
  color: var(--ink);
  text-wrap: pretty;
}
body[data-page="/"] .ch__stat {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-top: 0.9rem !important;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
body[data-page="/"] .ch__stat b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  color: var(--wood-600);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body[data-page="/"] .ch__stat span {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

/* The last chapter is the ask, and it should feel like the end of a film:
   the frame nearly empty, the ground short. */
body[data-page="/"] #when-we-open .ch__line { max-width: 16ch; }
.ch__quick { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1rem; }
.ch__quick a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: .25em; }
/* #85664c, not --wood-600: the token measured 4.46:1 here against 4.5 required. */
body[data-page="/"] .ch__col .ch__credentials { color: #85664c; font-weight: 600; font-size: .95rem; }


/* ═══ MOTION ════════════════════════════════════════════════════════════════
   film.js publishes five custom properties per chapter and these five rules
   consume them. Every default below is the COMPOSED state, so a page with no
   JavaScript, an unsupported browser, reduced motion or a phone shows six
   photographs with their words on them rather than six blank frames.

   This replaced an implementation built on `animation-timeline: view()`.
   That needed no script at all, which was the appeal, but Firefox does not
   ship scroll-driven animations — those visitors would have lost the entire
   film with no indication anything was missing. See the header of film.js.
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-page="/"] .ch__mist { opacity: var(--mist, 0); }

body[data-page="/"] .ch__ln > span {
  transform: translateY(var(--line-y, 0%));
  will-change: transform;
}

body[data-page="/"] .ch__label { opacity: var(--label-op, 1); }
body[data-page="/"] .ch__support { opacity: var(--sup-op, 1); }

/* Scale is held constant here and only the offset is published, so the drift
   can never pull an edge of the photograph into frame. */
body[data-page="/"] .ch__bg {
  transform: scale(1.06) translateY(var(--bg-y, 0%));
  will-change: transform;
}

/* The rail is written directly by film.js for the same reason. */
body[data-page="/"] .rail__fill { transform: scaleY(0); }


/* ═══ NO PINNING BELOW 48rem ════════════════════════════════════════════════
   Asked for explicitly, and right: a pinned scene on a phone fights the
   browser's own scroll, and 200svh runways make a six-chapter page enormous.
   Scenes become stacked full-bleed plates with the type inside them; the
   ground follows immediately. Same story, same order, no choreography. */
@media (max-width: 48rem) {
  body[data-page="/"] .ch__hold { height: auto; }
  /* `relative`, not `static`. As `static` the stage stops being the
     containing block for .ch__bg, whose block then resolves to .ch — and an
     absolutely positioned box whose containing block is an ancestor of the
     clipping element is not clipped by it. The oversized scene photograph
     escaped `overflow: clip` and every phone width scrolled sideways. */
  body[data-page="/"] .ch__stage {
    position: relative;
    height: auto;
    min-height: 76svh;
  }
  body[data-page="/"] .ch__mist { display: none; }
  body[data-page="/"] .rail { display: none; }
  body[data-page="/"] .ch__type { padding-block: clamp(4.5rem, 16vh, 7rem) clamp(2.5rem, 8vh, 4rem); }
  body[data-page="/"] .ch__line { font-size: clamp(2.4rem, 1rem + 9vw, 3.6rem); max-width: 18ch; }
  body[data-page="/"] .ch__bg { inset: 0; }

  /* On a phone the scene animations are switched off with the pin they
     depended on, so the declared visible state is what shows. */
  body[data-page="/"] .ch__mist,
  body[data-page="/"] .ch__label,
  body[data-page="/"] .ch__ln > span,
  body[data-page="/"] .ch__support,
  body[data-page="/"] .ch__bg { animation: none !important; }
  body[data-page="/"] .ch__label,
  body[data-page="/"] .ch__support { opacity: 1 !important; transform: none !important; }
  body[data-page="/"] .ch__ln > span { transform: none !important; }
}


/* ═══ REDUCED MOTION ════════════════════════════════════════════════════════
   Not slowed — removed. The film becomes a document: six plates, six
   chapters of prose, in order. */
@media (prefers-reduced-motion: reduce) {
  body[data-page="/"] .ch__hold { height: auto; }
  body[data-page="/"] .ch__stage { position: relative; height: auto; min-height: 72svh; }
  body[data-page="/"] .ch__mist { display: none; }
  body[data-page="/"] .rail__fill { transform: scaleY(1); }
  body[data-page="/"] .ch__bg { inset: 0; }
  body[data-page="/"] .ch__label,
  body[data-page="/"] .ch__support { opacity: 1 !important; transform: none !important; }
  body[data-page="/"] .ch__ln > span { transform: none !important; }
  body[data-page="/"] .ch--open .ch__bg::after { animation: none; opacity: 0.12; }
}


/* The ask needs something to press. Chapter VI closed on "Tell us where to
   find you" with no control at all — the chapter rewrite dropped the old
   homepage's call-to-action band and left the line rhetorical. */
body[data-page="/"] .ch__act { margin-top: 1.6rem !important; }
body[data-page="/"] #when-we-open .ch__ground { padding-bottom: clamp(5rem, 16vh, 11rem); }


/* ═══ THE INNER PAGES, IN THE SAME WORLD ════════════════════════════════════

   The inner pages stay documents. Pinning a page a family is trying to read
   properly — the fee page, the licensing journey, the FAQ — would be hostile,
   and they are the pages people arrive on from search.

   So they inherit the film's signature rather than its machinery: the same
   rule-and-label mark before a kicker, the same tightly-set display serif,
   and more sky above the first heading so a page opens with the same breath a
   chapter does. Three rules, no layout changes.

   Scoped away from the homepage, which has its own treatment above. */

body:not([data-page="/"]) .section-head .kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
/* currentColor so the mark adapts to whichever ground the head sits on —
   there are both light and dark section heads across the site. */
body:not([data-page="/"]) .section-head .kicker::before {
  content: "";
  flex: none;
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
body:not([data-page="/"]) .section-head.center .kicker { justify-content: center; }

body:not([data-page="/"]) .page-hero .section-title {
  letter-spacing: -0.028em;
  text-wrap: balance;
}

/* The opening breath. The film gives a chapter line most of a viewport; a
   document does not need that, but it should not start jammed under the bar
   either. */
body:not([data-page="/"]) .page-hero {
  padding-top: clamp(3.5rem, 9vh, 7rem);
}


/* ── the living scene ───────────────────────────────────────────────────────
   scenes.js lays a shader canvas over each photograph. The <img> stays in the
   document underneath as the LCP element and as the fallback, and the canvas
   fades in only once a frame has actually been drawn — so a failed context,
   a machine without WebGL, or reduced motion shows the photograph exactly as
   it was rather than a black rectangle. */
body[data-page="/"] .ch__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
body[data-page="/"] .ch__gl.is-live { opacity: 1; }

/* The pointer light rides over the scene, under the type. `.ch__stage`
   already isolates and clips, which is what keeps the screen blend from
   leaking into the cream ground beats above and below it. */
body[data-page="/"] .ch__stage > .lamp { z-index: 2; }
body[data-page="/"] .ch__type { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  body[data-page="/"] .ch__gl { display: none !important; }
}