/* ══════════════════════════════════════════════════════════════════════════
   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-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; gap: clamp(0.6rem, 1.4vw, 1.35rem); margin-left: auto; }
.nav-link {
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink);
  padding-block: 0.35rem;
  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); }

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

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 44px; height: 44px;
  cursor: pointer;
  place-items: center;
}
.show-mobile { display: none; }
.nav-toggle-bar {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink-strong);
  margin-inline: auto;
  transition: transform var(--dur-1) var(--ease-out);
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 64rem) {
  .site-nav {
    position: fixed;
    inset: 0;
    top: 61px;
    background: var(--ivory-100);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-3) var(--gutter) var(--space-5);
    transform: translateX(100%);
    transition: transform 320ms var(--ease-out);
    overflow-y: auto;
  }
  .site-nav.is-open { transform: none; }
  .nav-link { font-size: 1.35rem; font-family: var(--font-display); padding-block: 0.9rem; border-bottom: 1px solid var(--line); width: 100%; }
  .show-mobile { display: grid; }
  .hide-mobile { display: none !important; }
}

/* ── 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; } }

/* 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") 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%; }

/* 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 .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 .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; }

/* 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__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; }

/* 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.72rem; 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;
}
.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(23rem, calc(100vw - 2rem));
  max-height: min(30rem, 72vh);
  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 {
  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: flex-start;
  padding: 0.9rem 1.1rem 0.75rem;
  background: var(--olive-600, #47503e); color: var(--ivory-100, #f7f3ea);
}
.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.15rem 0 0; font-size: 0.95rem; font-weight: 600; }
.chat__close {
  border: 0; background: none; color: rgba(247,243,234,0.85);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0.2rem;
}
.chat__log { padding: 0.9rem 1.1rem; overflow-y: auto; flex: 1; display: grid; gap: 0.7rem; align-content: start; min-height: 7rem; }
.chat__row { display: grid; gap: 0.45rem; justify-items: start; }
.chat__row--me { justify-items: end; }
.chat__msg { max-width: 88%; padding: 0.65rem 0.85rem; border-radius: 12px; font-size: 0.92rem; line-height: 1.5; }
.chat__msg--bot { background: var(--ivory-200, #efe9db); color: var(--ink-800, #24211a); 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__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1.1rem 0.7rem; }
.chat__chip {
  font: inherit; font-size: 0.75rem; cursor: pointer;
  padding: 0.4rem 0.8rem; 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; gap: 0.5rem; padding: 0.7rem 1.1rem 1.1rem; border-top: 1px solid var(--stone-300, #d8d0bf); }
.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 (prefers-reduced-motion: reduce) {
  .thanks { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   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;
  }
}