/* ==========================================================================
   Azalea Estates of Fayetteville — Design System
   Warm & elegant, generous whitespace, hospitality-inspired.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ */
  /* Color palette — logo-aligned forest green primary, azalea rose 2ndry */
  /* All foreground/background pairs meet WCAG 2.1 AA (4.5:1 normal     */
  /* text, 3:1 large text & UI components). See docs at end of file.    */
  /* ------------------------------------------------------------------ */

  /* Warm neutrals */
  --c-cream: #faf6f1;
  --c-cream-2: #f3ede3;
  --c-sand: #ece3d4;
  --c-ink: #2a2623;          /* 14.3:1 on cream — body text */
  --c-ink-soft: #4a423c;     /* 9.4:1  on cream — secondary text */
  --c-muted: #685e55;        /* 5.6:1  on cream — tertiary text (was #7a6f65, ~4.6:1) */
  --c-line: #e1d7c8;         /* decorative only (<3:1, never for UI borders) */
  --c-border: #9a8e7f;       /* 3.1:1  on white — form inputs, interactive borders */
  --c-white: #ffffff;

  /* Primary — forest green from the logo (REQUIRED: #213b14) */
  --c-forest: #213b14;       /* 13.6:1 on white — primary brand */
  --c-forest-hover: #355d26; /* 7.2:1  on white — primary hover */
  --c-forest-soft: #c5d4bd;  /* for tints & light backgrounds */

  /* Secondary — azalea rose (brand-name tie-in) */
  --c-accent: #8a3a52;       /* 7.5:1  on cream — secondary accent */
  --c-accent-hover: #6f2c41; /* 10.1:1 on cream — accent hover */
  --c-accent-soft: #d89eab;  /* for eyebrows on dark heroes (6.2:1 on ink) */

  /* Other */
  --c-gold: #8a6a3c;         /* 5.1:1  on white — future accents (was #b08d5a, 3.2:1, AA-fail) */

  /* Type */
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radii + shadows */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 6px rgba(42, 38, 35, 0.06);
  --shadow: 0 10px 30px rgba(42, 38, 35, 0.08);
  --shadow-lg: 0 24px 60px rgba(42, 38, 35, 0.14);

  /* Layout */
  --container: 1200px;
  --container-narrow: 920px;

  /* Transitions */
  --tr: 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* prevent off-screen fixed/transformed elements from creating horizontal scroll */
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-cream);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Default: all inline text links get a subtle underline and lose it on hover. */
/* UI elements (buttons, nav, cards, icons, brand, skip link, breadcrumbs) */
/* explicitly opt out below. */
a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(138, 58, 82, 0.5);   /* softer than the ink color */
  transition: color var(--tr), text-decoration-color var(--tr);
}
a:hover,
a:focus-visible {
  color: var(--c-accent-hover);
  text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/*  UI / functional links — remove the default underline.                  */
/*  These are component links whose "affordance" comes from their styling  */
/*  (pill buttons, nav bar, card-wide anchors, icon anchors).              */
/* ---------------------------------------------------------------------- */
.btn,
.nav > a,
.brand,
.header-top a,
.announce-bar a,
.site-footer a,
.footer-socials a,
.footer-bottom a,
.crumbs a,
.related-card,
.related-card__cta,
.gallery-item,
.gallery-item a,
.skip-link,
.hero__video-toggle,
.lightbox__close,
.modal__close {
  text-decoration: none;
}
/* Preserve hover underlines where the component opts in */
.crumbs a:hover,
.footer-bottom a:hover,
.related-card:hover .related-card__cta {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4) 0;
  line-height: 1.15;
  text-wrap: pretty;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 500;
}
h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}
h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
}
h4 {
  font-size: 1.15rem;
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p {
  margin: 0 0 var(--space-4) 0;
  color: var(--c-ink-soft);
}
p.lead {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--c-ink);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.875rem; /* 14px — WCAG AA minimum for bold/uppercase text */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-accent);
  margin-bottom: var(--space-3);
  display: inline-block;
}

/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: var(--space-9) 0;
}
.section--cream {
  background: var(--c-cream-2);
}
.section--sand {
  background: var(--c-sand);
}
.section--ink {
  background: var(--c-forest);
  color: var(--c-cream);
}
.section--ink h2,
.section--ink h3 { color: var(--c-cream); }
.section--ink p { color: rgba(250, 246, 241, 0.85); }
/* Buttons inside section--ink: same inversion as CTA panel */
.section--ink .btn--primary {
  background: var(--c-cream);
  color: var(--c-forest);
  border-color: var(--c-cream);
}
.section--ink .btn--primary:hover {
  background: var(--c-white);
  color: var(--c-forest-hover);
  border-color: var(--c-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.section--ink .btn--primary:focus-visible,
.section--ink .btn--outline:focus-visible {
  outline-color: var(--c-cream);
}
.section--ink .btn--outline {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.75);
}
.section--ink .btn--outline:hover {
  background: var(--c-white);
  color: var(--c-forest);
  border-color: var(--c-white);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 50px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--tr);
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}
.btn--primary {
  /* Forest green primary — 13.6:1 contrast with white text (WCAG AAA) */
  background: var(--c-forest);
  color: var(--c-white);
}
.btn--primary:hover {
  background: var(--c-forest-hover);
  color: var(--c-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn--primary:focus-visible {
  outline: 3px solid var(--c-forest);
  outline-offset: 3px;
}
/* Optional secondary-style button using the azalea rose */
.btn--rose {
  background: var(--c-accent);
  color: var(--c-white);
}
.btn--rose:hover {
  background: var(--c-accent-hover);
  color: var(--c-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn--outline {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn--outline:hover {
  background: var(--c-forest);
  color: var(--c-white);
  border-color: var(--c-forest);
}
.btn--ghost {
  background: transparent;
  color: var(--c-accent);
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  position: relative;
}
.btn--ghost::after {
  content: "→";
  margin-left: 0.5rem;
  transition: transform var(--tr);
}
.btn--ghost:hover::after {
  transform: translateX(4px);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 210; /* must exceed nav-backdrop (199) so the nav drawer (z-200 within this context) paints above the backdrop */
  /* backdrop-filter moved to ::before so it doesn't create a containing
     block for position:fixed children (the mobile nav drawer). A filter or
     backdrop-filter on a parent traps fixed descendants inside it — using
     a pseudo-element sidesteps that CSS quirk while keeping the frosted
     glass look identical. */
  border-bottom: 1px solid rgba(225, 215, 200, 0.6);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 246, 241, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  z-index: -1;
  pointer-events: none;
}
.header-top {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-5);
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--c-muted);
  border-bottom: 1px solid rgba(225, 215, 200, 0.5);
}
.header-top a {
  color: var(--c-muted);
}
.header-top a:hover {
  color: var(--c-forest);
}
.header-top a:focus-visible {
  outline: 2px solid var(--c-forest);
  outline-offset: 3px;
  border-radius: 2px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  gap: var(--space-5);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--c-ink);
}
.brand:focus-visible {
  outline: 3px solid var(--c-forest);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Logo image wrapper — sized by height; width scales with intrinsic ratio */
.brand-logo {
  display: block;
  height: 60px;
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
}
@media (max-width: 960px) {
  .brand { padding: var(--space-2) 0; }
}
@media (max-width: 520px) {
  .brand-logo { height: 48px; }
  .brand { padding: var(--space-3) 0; }
}
/* Legacy brand mark / text kept for any page still using them */
.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}
.brand-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
/* `> a` (direct child) so these rules DON'T bleed into the CTA button */
/* nested inside `.nav-cta`. The .btn/.btn--primary rules own that link. */
.nav > a {
  color: var(--c-ink);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
}
.nav > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--c-forest);
  transition: width var(--tr);
}
.nav > a:hover::after,
.nav > a.active::after {
  width: 100%;
}
.nav > a:focus-visible {
  outline: 2px solid var(--c-forest);
  outline-offset: 4px;
  border-radius: 2px;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
/* Nav-sized variant of the primary button — more compact than hero CTAs. */
.nav-cta .btn {
  padding: 0.65rem 1.25rem;
  font-size: 0.88rem;
}

/* ── Hamburger button ────────────────────────────────────────────────────── */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-ink);
  border-radius: var(--radius-sm);
  transition: background var(--tr);
  flex-shrink: 0;
}
.menu-toggle:hover  { background: var(--c-cream-2); }
.menu-toggle:focus-visible { outline: 2px solid var(--c-forest); outline-offset: 2px; }

/* Three CSS bars that animate to an × */
.menu-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.menu-toggle__bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity   260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child  { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child   { transform: translateY(-7px) rotate(-45deg); }

/* ── Backdrop ────────────────────────────────────────────────────────────── */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 199;
  opacity: 0;
  transition: opacity 280ms ease;
}
.nav-backdrop.open { opacity: 1; }

/* ── Mobile-only drawer elements (hidden on desktop) ─────────────────────── */
.nav-drawer-head,
.nav-drawer-foot,
.nav-drawer-close { display: none; }

/* ── Mobile nav ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .header-top { display: none; }
  .header-inner { padding-left: var(--space-5); padding-right: var(--space-5); }
  .menu-toggle { display: inline-flex; }
  .nav-backdrop { display: block; pointer-events: none; }
  .nav-backdrop.open { pointer-events: auto; }

  /* Full-height right drawer */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;           /* right edge, full height */
    width: min(340px, 90vw);
    background: var(--c-white);
    flex-direction: column;
    padding: 0;
    gap: 0;
    align-items: stretch;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 200;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open {
    transform: translateX(0);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
  }

  /* Drawer header: logo + close button */
  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--c-line);
    background: var(--c-cream);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .nav-drawer-head .brand-logo { height: 38px; width: auto; }

  .nav-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--c-ink-soft);
    cursor: pointer;
    border-radius: 50%;
    transition: background var(--tr), color var(--tr);
  }
  .nav-drawer-close:hover  { background: var(--c-sand); color: var(--c-ink); }
  .nav-drawer-close:focus-visible { outline: 2px solid var(--c-forest); outline-offset: 2px; }

  /* Nav links */
  .nav > a {
    font-size: 1.1rem;
    font-weight: 500;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--c-line);
    color: var(--c-ink);
    display: flex;
    align-items: center;
    transition: background var(--tr), color var(--tr);
  }
  .nav > a:hover { background: var(--c-cream); color: var(--c-forest); }
  .nav > a.active { color: var(--c-forest); font-weight: 600; }
  .nav > a::after { display: none; } /* suppress underline animation */

  /* Desktop CTA hidden on mobile (mobile has its own footer CTA) */
  .nav-cta { display: none; }

  /* Drawer footer: phone + CTA */
  .nav-drawer-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    margin-top: auto;          /* push to bottom */
    border-top: 2px solid var(--c-line);
    background: var(--c-cream);
    flex-shrink: 0;
  }
  .nav-drawer-phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-forest);
    text-decoration: none;
  }
  .nav-drawer-phone:hover { color: var(--c-forest-hover); }
  .nav-drawer-foot .btn { width: 100%; justify-content: center; }
  .nav-drawer-util-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1) var(--space-2);
  }
  .nav-drawer-util {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--c-muted);
    text-decoration: none;
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius);
    background: var(--c-sand);
    transition: background var(--tr), color var(--tr);
  }
  .nav-drawer-util:hover { background: var(--c-line); color: var(--c-forest); }
}

/* ==========================================================================
   HERO — Split panel: solid colour left | video right
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-rows: 1fr;
  min-height: 88vh;
  max-height: 1000px;
  color: var(--c-white);
  overflow: hidden;
  align-items: stretch;
}

/* ── Left: solid colour panel ── */
.hero__panel {
  background: var(--c-forest);
  display: flex;
  align-items: center;
  padding: var(--space-9) var(--space-8);
  position: relative;
  z-index: 1;
  /* Extend rightward so the ::after diagonal bleeds into the video */
  overflow: visible;
}
/* Diagonal tooth that bleeds ~100px into the video column */
.hero__panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: -101px;
  width: 102px;
  height: 100%;
  background: var(--c-forest);
  /* Triangle: full-height on the left, tapers to 0 at top-right */
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}
.hero__inner {
  max-width: 540px;
  padding: var(--space-4) 0;
  position: relative;
  z-index: 1;
}
.hero h1 {
  color: var(--c-white);
  font-size: clamp(2.2rem, 3.8vw, 4rem);
  line-height: 1.08;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.hero .eyebrow {
  color: var(--c-cream);
}
.hero p.lead {
  color: var(--c-cream); /* #f5f0e8 — 11.48:1 on forest, fully opaque */
  font-size: 1.15rem;
  margin-bottom: var(--space-6);
  line-height: 1.65;
}
.hero__cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* Buttons on solid forest background */
.hero .btn--primary {
  background: var(--c-cream);
  color: var(--c-forest);
  border-color: var(--c-cream);
}
.hero .btn--primary:hover {
  background: var(--c-white);
  color: var(--c-forest-hover);
  border-color: var(--c-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.hero .btn--primary:focus-visible,
.hero .btn--outline:focus-visible {
  outline-color: var(--c-cream);
}
.hero .btn--outline {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.90); /* 11:1+ vs forest — passes non-text 3:1 */
}
.hero .btn--outline:hover {
  background: var(--c-white);
  color: var(--c-forest);
  border-color: var(--c-white);
}

/* ── Right: video panel ── */
.hero__media {
  position: relative;
  overflow: hidden;
  /* Stretch to fill the grid row — no min-height needed as .hero drives it */
  align-self: stretch;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero video pause/play toggle — WCAG 2.2.2 */
.hero__video-toggle {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
  background: rgba(33, 59, 20, 0.82);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--tr), transform var(--tr);
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__video-toggle:hover {
  background: var(--c-forest);
  transform: translateY(-1px);
}
.hero__video-toggle:focus-visible {
  outline: 3px solid var(--c-white);
  outline-offset: 2px;
}
.hero__video-toggle-icon {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
}
.hero__video-toggle .icon-play { display: none; }
.hero__video-toggle[data-paused="true"] .icon-pause { display: none; }
.hero__video-toggle[data-paused="true"] .icon-play { display: inline-block; }

/* Hero video expand/collapse toggle */
.hero__video-expand {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
  background: rgba(33, 59, 20, 0.82);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--tr), transform var(--tr);
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__video-expand:hover {
  background: var(--c-forest);
  transform: translateY(-1px);
}
.hero__video-expand:focus-visible {
  outline: 3px solid var(--c-white);
  outline-offset: 2px;
}
.hero__video-expand-icon {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
}
.hero__video-expand .icon-collapse { display: none; }
.hero__video-expand[aria-expanded="true"] .icon-expand { display: none; }
.hero__video-expand[aria-expanded="true"] .icon-collapse { display: inline-block; }

/* Expanded hero state */
.hero {
  transition: grid-template-columns 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Panel content fades out before the grid animates */
.hero__inner {
  transition: opacity 180ms ease, visibility 180ms ease;
}
.hero--fading .hero__inner {
  opacity: 0;
  visibility: hidden;
}
.hero.hero--expanded {
  grid-template-columns: 0fr 1fr;
}
.hero.hero--expanded .hero__panel {
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}
.hero.hero--expanded .hero__panel::after {
  display: none;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero__video { animation: none !important; }
}

/* ── Mobile: stack vertically ── */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: unset;
  }
  .hero__panel {
    overflow: hidden;
    padding: var(--space-7) var(--space-5) var(--space-6);
    justify-content: center;
    text-align: center;
  }
  .hero__panel::after { display: none; }
  .hero__inner {
    max-width: 600px;
  }
  .hero__cta {
    justify-content: center;
  }
  .hero__media {
    order: -1;
    min-height: 52vw;
    max-height: 420px;
  }
  .hero__video-toggle {
    bottom: var(--space-3);
    right: var(--space-3);
    font-size: 0.72rem;
    padding: 0.4rem 0.7rem;
  }
  .hero__video-toggle-label { display: none; }
  .hero__video-expand { display: none; }
}

/* Interior page hero — two-column split matching home hero pattern */
.page-hero {
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 340px;
  color: var(--c-white);
  overflow: hidden;
}
.page-hero.page-hero--locked {
  height: var(--locked-height);
}
/* Left: solid forest panel */
.page-hero__panel {
  background: var(--c-forest);
  display: flex;
  align-items: center;
  padding: var(--space-9) var(--space-8);
  position: relative;
  overflow: visible;
}
/* Diagonal tooth bleeding into the photo */
.page-hero__panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: -101px;
  width: 102px;
  height: 100%;
  background: var(--c-forest);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}
.page-hero__inner {
  max-width: 520px;
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  color: var(--c-white);
  margin-bottom: var(--space-2);
  text-wrap: pretty;
}
.page-hero .eyebrow {
  color: var(--c-cream);
}
.page-hero p {
  color: var(--c-cream);
  max-width: 480px;
  font-size: 1.05rem;
  line-height: 1.65;
  margin-top: var(--space-3);
  text-wrap: pretty;
}
.page-hero__cta {
  display: inline-block;
  margin-top: var(--space-5);
}
/* Right: photo panel */
.page-hero__media {
  position: relative;
  overflow: hidden;
}
.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Soft forest variant for subpages */
.page-hero--accent .page-hero__panel {
  background: var(--c-forest-soft);
  color: var(--c-ink);
}
.page-hero--accent .page-hero__panel::after {
  background: var(--c-forest-soft);
}
.page-hero--accent .page-hero__inner h1 {
  color: var(--c-ink);
}
.page-hero--accent .eyebrow {
  color: var(--c-forest);
}
.page-hero--accent p {
  color: var(--c-ink-soft);
}
.page-hero--accent .crumbs {
  color: var(--c-ink-soft);
  opacity: 1;
}
.page-hero--accent .crumbs a {
  color: var(--c-ink-soft);
}
.page-hero--accent .crumbs a:hover {
  color: var(--c-ink);
}

/* Page hero expand button */
.page-hero__expand {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
  background: rgba(33, 59, 20, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--tr), transform var(--tr);
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.page-hero__expand:hover {
  background: var(--c-forest);
  transform: translateY(-1px);
}
.page-hero__expand:focus-visible {
  outline: 3px solid var(--c-white);
  outline-offset: 2px;
}
.page-hero__expand-icon {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
}
.page-hero__expand .icon-collapse { display: none; }
.page-hero__expand[aria-expanded="true"] .icon-expand { display: none; }
.page-hero__expand[aria-expanded="true"] .icon-collapse { display: inline-block; }

/* Expanded page hero state */
.page-hero {
  transition: grid-template-columns 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.page-hero__inner {
  transition: opacity 180ms ease, visibility 180ms ease;
}
.page-hero--fading .page-hero__inner {
  opacity: 0;
  visibility: hidden;
}
.page-hero.page-hero--expanded {
  grid-template-columns: 0fr 1fr;
}
.page-hero.page-hero--expanded .page-hero__panel {
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}
.page-hero.page-hero--expanded .page-hero__panel::after {
  display: none;
}

/* Mobile: stack vertically */
@media (max-width: 860px) {
  .page-hero {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .page-hero__panel {
    padding: var(--space-6) var(--space-5) var(--space-5);
    justify-content: center;
    text-align: center;
    overflow: hidden;
  }
  .page-hero__panel::after { display: none; }
  .page-hero__inner { max-width: 600px; }
  .page-hero__media {
    min-height: 44vw;
    max-height: 320px;
  }
  .page-hero__expand { display: none; }
}

.crumbs {
  font-size: 0.85rem;
  color: var(--c-cream);
  margin-bottom: var(--space-4);
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.crumbs a { color: var(--c-cream); }
.crumbs a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { margin: 0 0.4rem; opacity: 0.65; }

/* ==========================================================================
   MARQUEE BAR
   ========================================================================== */
.stats-bar {
  background: var(--c-accent);
  color: var(--c-cream);
  padding: var(--space-6) 0;
}
.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  text-align: center;
}
.stats-bar__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.stats-bar__num {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--c-accent-soft);
  line-height: 1;
}
.stats-bar__label {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250, 246, 241, 0.85); /* 0.7 measured ~4.3:1 on --c-accent — below the 4.5:1
                                        AA minimum for normal-size text; 0.85 gives ~5.5:1 */
}
@media (max-width: 720px) {
  .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section-heading {
  max-width: 720px;
  margin: 0 auto var(--space-7) auto;
  text-align: center;
}
.section-heading h2 { margin-bottom: var(--space-3); }
.section-heading--left {
  margin-left: 0;
  text-align: left;
}

/* Intro split */
.intro-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.intro-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.intro-split__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.intro-split__media::before {
  content: "";
  position: absolute;
  inset: -20px -20px 40px 40px;
  border: 1.5px solid var(--c-accent);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.4;
}
.intro-split__body h2 { margin-bottom: var(--space-5); }
.signature {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
}
.signature__avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--c-sand);
  display: grid; place-items: center;
  color: var(--c-accent);
}
.signature__text {
  font-size: 0.9rem;
  color: var(--c-muted);
}
.signature__text strong { color: var(--c-ink); display: block; }
@media (max-width: 860px) {
  .intro-split { grid-template-columns: 1fr; }
  .intro-split__media { aspect-ratio: 4/3; }
}

/* Feature cards */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.feature-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--tr), box-shadow var(--tr);
  display: flex;
  flex-direction: column;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.feature-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;   /* anchors .feature-card__badge */
}
/* Icon badge — sits bottom-right of card media, same treatment as team-card__badge */
.feature-card__badge {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-forest-soft);
  color: var(--c-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.feature-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.feature-card:hover .feature-card__media img {
  transform: scale(1.06);
}
.feature-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.feature-card h3 {
  font-size: 1.4rem;
  margin-bottom: var(--space-3);
}
.feature-card__body p { flex: 1; }
.feature-card a.btn--ghost { margin-top: auto; }
.calendar-month-badge {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-5);
  background: var(--c-forest);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.calendar-btns {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}

@media (max-width: 960px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* Pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  counter-reset: pillar;
}
.pillar {
  padding: var(--space-5);
  background: var(--c-white);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  counter-increment: pillar;
  position: relative;
}
.pillar::before {
  content: "0" counter(pillar);
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--c-accent);
  opacity: 0.6;
  margin-bottom: var(--space-3);
  display: block;
}
.pillar h3 {
  font-size: 1.15rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--space-2);
}
.pillar p { font-size: 0.95rem; margin: 0; }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .pillars { grid-template-columns: 1fr; }
}

/* Amenity chips grid */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.amenity-chip {
  background: var(--c-white);
  padding: var(--space-5);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  border: 1px solid var(--c-line);
  transition: border-color var(--tr), transform var(--tr);
}
.amenity-chip:hover {
  border-color: var(--c-accent-soft);
  transform: translateY(-2px);
}
.amenity-chip__icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  color: var(--c-accent);
  display: grid; place-items: center;
  background: var(--c-cream-2);
  border-radius: 50%;
}
.amenity-chip__icon svg { width: 22px; height: 22px; }
/* Was <h4>; promoted to <h3> to fix a skipped heading level (h2 section
   heading straight to h4). Restates the font-family/weight the old bare
   `h4 {}` element rule used to supply, so the visual is unchanged. */
.amenity-chip h3 { margin: 0 0 0.25rem 0; font-family: var(--font-sans); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; text-transform: none; }
.amenity-chip p { margin: 0; font-size: 0.9rem; color: var(--c-muted); }

@media (max-width: 860px) {
  .amenities-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .amenities-grid { grid-template-columns: 1fr; }
}

/* Testimonial */
.testimonial {
  background: var(--c-sand);
  padding: var(--space-9) 0;
}
.testimonial__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.testimonial__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--c-ink);
  margin: 0 0 var(--space-5) 0;
  text-wrap: balance;
}
.testimonial__attribution {
  font-size: 0.95rem;
  color: var(--c-muted);
  letter-spacing: 0.04em;
}
.testimonial__attribution strong { color: var(--c-ink); }
.testimonial__mark {
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--c-accent);
  opacity: 0.4;
  margin-bottom: var(--space-3);
  display: block;
}

/* CTA Panel */
.cta-panel {
  background: linear-gradient(135deg, #192d10 0%, var(--c-forest) 100%);
  color: var(--c-cream);
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
}
.cta-panel::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 158, 171, 0.15), transparent 70%);
  top: -140px; right: -140px;
}
.cta-panel__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
  position: relative;
  z-index: 1;
}
.cta-panel h2 { color: var(--c-cream); margin-bottom: var(--space-3); }
.cta-panel p { color: rgba(250, 246, 241, 0.8); margin: 0; max-width: 600px; }
.cta-panel__btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* ── CTA panel: buttons on dark green gradient ───────────────────────────
   btn--primary inverts to cream (13.6:1 on dark green).
   btn--outline gets a stronger white border (0.75 → 4.5:1+ on forest). */
.cta-panel .btn--primary {
  background: var(--c-cream);
  color: var(--c-forest);
  border-color: var(--c-cream);
}
.cta-panel .btn--primary:hover {
  background: var(--c-white);
  color: var(--c-forest-hover);
  border-color: var(--c-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.cta-panel .btn--primary:focus-visible,
.cta-panel .btn--outline:focus-visible {
  outline-color: var(--c-cream);
}
.cta-panel .btn--outline {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.75);
}
.cta-panel .btn--outline:hover {
  background: var(--c-white);
  color: var(--c-forest);
  border-color: var(--c-white);
}
@media (max-width: 760px) {
  .cta-panel__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--c-forest-soft);   /* #c5d4bd — light sage green */
  color: var(--c-ink);
  padding: var(--space-9) 0 var(--space-5);
  font-size: 0.93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
/* Was <h4>; promoted to <h2>. <h3> would fix most pages (footer follows the
   page's last <h2>) but a few thin pages (e.g. /contact/thanks/, event RSVP
   pages) have only an <h1> before the footer, where <h3> would still skip a
   level. <h2> is always at most a one-level step down from <h1> and never
   an invalid *increase* after any deeper heading, so it works everywhere.
   Restates font-weight/text-transform the old bare `h4 {}` element rule
   used to supply, so the visual is unchanged. */
.site-footer h2 {
  color: var(--c-forest);             /* #213b14 — dark forest for column headings */
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  margin-bottom: var(--space-4);
}
.site-footer a { color: var(--c-forest); }
.site-footer a:hover { color: var(--c-forest-hover); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.footer-brand .brand-name { color: var(--c-forest); }
.footer-brand p { color: var(--c-ink-soft); margin: var(--space-4) 0 0; max-width: 320px; }
/* Footer logo: show natural logo colours on the light sage background. */
/* Remove the filter once you have a dedicated light-background logo variant. */
.brand-logo--on-dark {
  height: 54px;
  filter: none;
}
.footer-contact p { margin: 0 0 var(--space-2) 0; color: var(--c-ink-soft); }

.footer-socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.footer-socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(33, 59, 20, 0.3);  /* forest at low opacity */
  display: grid; place-items: center;
  color: var(--c-forest);
  transition: all var(--tr);
}
.footer-socials a:hover {
  background: var(--c-forest);
  border-color: var(--c-forest);
  color: var(--c-forest-soft);
}
.footer-socials svg { width: 18px; height: 18px; }

.footer-bottom {
  padding-top: var(--space-5);
  border-top: 1px solid rgba(33, 59, 20, 0.18);  /* forest at low opacity */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: var(--c-ink-soft);
}
.footer-bottom a { color: var(--c-forest); margin-left: var(--space-3); }
.footer-bottom a:hover { color: var(--c-forest-hover); }
.footer-cookie-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--space-3);
  color: var(--c-forest);
  font-size: 0.82rem;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
}
.footer-cookie-btn:hover {
  color: var(--c-forest-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom a { margin-left: 0; margin-right: var(--space-3); }
}

/* ==========================================================================
   PDF VIEWER MODAL
   Full-screen modal with PDF.js canvas rendering.
   Triggered by any element with data-pdf-url attribute.
   ========================================================================== */

.pdfv {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
}
.pdfv[hidden] { display: none; }

/* Constrained panel — full-screen on mobile, max 1024px on desktop */
.pdfv__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
}
@media (min-width: 768px) {
  .pdfv__panel {
    width: min(1024px, 92vw);
    height: min(90vh, 860px);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  }
}

/* ── Header bar ──────────────────────────────────────────────────────────── */
.pdfv__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  height: 52px;
  background: #2a2a2a;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.pdfv__title {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.pdfv__controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.pdfv__sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.15);
  margin: 0 var(--space-2);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.pdfv__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tr), color var(--tr);
  white-space: nowrap;
}
.pdfv__btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.pdfv__btn:focus-visible {
  outline: 2px solid var(--c-forest-soft);
  outline-offset: 2px;
}
.pdfv__btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.pdfv__zoom-label {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  min-width: 3.2em;
  text-align: center;
  padding: 0 4px;
  user-select: none;
}
/* Hide text labels on small screens */
@media (max-width: 560px) {
  .pdfv__btn-label { display: none; }
  .pdfv__btn       { padding: 6px 8px; }
  .pdfv__title     { font-size: 0.8rem; }
}

/* ── Scrollable stage ────────────────────────────────────────────────────── */
.pdfv__stage {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #404040;
  -webkit-overflow-scrolling: touch;
}
.pdfv__pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-4);
  min-height: 100%;
}

/* ── Individual page canvas ──────────────────────────────────────────────── */
.pdfv__page {
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  border-radius: 2px;
  overflow: hidden;
  max-width: 100%;
  line-height: 0;  /* removes gap below canvas */
}
.pdfv__page canvas {
  display: block;
  max-width: 100%;
  height: auto !important;  /* let width drive height on mobile */
}
@media (max-width: 640px) {
  .pdfv__page { width: 100%; }
  .pdfv__page canvas { width: 100% !important; }
}

/* ── Loading / error states ──────────────────────────────────────────────── */
.pdfv__msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 200px;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  text-align: center;
}
.pdfv__msg--err { color: rgba(255,180,180,0.9); }
.pdfv__msg a.btn--outline {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.3);
  margin-top: var(--space-2);
}
/* Loading spinner */
.pdfv__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--c-forest-soft);
  border-radius: 50%;
  animation: pdfv-spin 0.8s linear infinite;
}
@keyframes pdfv-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   VIRTUAL TOUR EMBED
   Responsive 16:9 iframe container — works on any screen size.
   ========================================================================== */
.virtual-tour {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--c-ink); /* dark placeholder while iframe loads */
}
.virtual-tour iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Minimum height so the tour isn't too small on very wide screens */
@media (min-width: 1400px) {
  .virtual-tour { aspect-ratio: 16 / 8; }
}
/* On small phones, give a slightly taller ratio for a better portrait experience */
@media (max-width: 480px) {
  .virtual-tour { aspect-ratio: 4 / 3; }
}
/* Square variant — used in split-layout contexts (e.g. contact page) */
.virtual-tour--square {
  aspect-ratio: 1 / 1;
}
@media (max-width: 480px) {
  .virtual-tour--square { aspect-ratio: 4 / 3; }
}
.virtual-tour__hint {
  margin-top: var(--space-3);
  text-align: center;
  font-size: 0.82rem;
  color: var(--c-muted);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
/* 3-column variant — used on single-subject galleries (e.g. food) */
.gallery-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
/* 2-column variant — used for room/space galleries (bigger, more immersive cells) */
.gallery-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
/* Suppress masonry span in 2-col and 3-col grids */
.gallery-grid--2 .gallery-item:nth-child(5n+1) {
  grid-row: auto;
  aspect-ratio: 1 / 1;
}
@media (max-width: 560px) {
  .gallery-grid--2 { grid-template-columns: 1fr; }
}
.gallery-item {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:nth-child(5n+1) { grid-row: span 2; aspect-ratio: 1/2; }
/* Lightbox-only: in the DOM for prev/next, invisible in the grid */
.gallery-item--lightbox-only {
  display: none;
}
/* Suppress masonry span in 3-col grids */
.gallery-grid--3 .gallery-item:nth-child(5n+1) {
  grid-row: auto;
  aspect-ratio: 1/1;
}

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-item:nth-child(5n+1) { aspect-ratio: 1/1; grid-row: auto; }
}
@media (max-width: 560px) {
  .gallery-grid,
  .gallery-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   LIGHTBOX — accessible photo viewer with prev/next, caption, focus-trap
   ========================================================================== */

/* Visually-hidden utility for sr-only live regions */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, 0.96);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: 72px var(--space-5) var(--space-5);
}
.lightbox.open { display: flex; }

/* ── Stage: image + caption footer ──────────────────────────────────────── */
.lightbox__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: calc(100vw - 200px);
}

/* Fixed-height frame — every image occupies the same vertical space
   so the caption never shifts position between photos. */
.lightbox__frame {
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  display: block;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
}
/* Lightbox zoom HUD */
.lightbox__zoom-hud {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  z-index: 10;
  pointer-events: auto;
}
.lightbox__zoom-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  background: rgba(20, 18, 16, 0.82);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.zoom-legend__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}
.zoom-legend__item svg {
  color: rgba(255, 255, 255, 0.92);
  flex-shrink: 0;
}
.lightbox__zoom-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(20, 18, 16, 0.88);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 3px 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox__zoom-hud .zoom-btn {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--c-white);
  cursor: pointer;
  transition: background var(--tr);
}
.lightbox__zoom-hud .zoom-btn:hover { background: rgba(255,255,255,0.15); }
.lightbox__zoom-hud .zoom-btn:focus-visible { outline: 2px solid var(--c-forest-soft); outline-offset: 2px; }
.lightbox__zoom-hud .zoom-level {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-white);
  min-width: 36px;
  text-align: center;
  letter-spacing: 0.02em;
}
.lightbox__img--zoomed { cursor: grab; }
.lightbox__img--dragging { cursor: grabbing !important; }
@media (max-width: 640px) {
  .lightbox__zoom-hud { display: none; }
}
.lightbox__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  margin-top: var(--space-3);
  /* Own dark backing so the legend stays readable even if the image
     bleeds behind it (zoom/pan) or the backdrop shows a bright photo. */
  background: rgba(20, 18, 16, 0.85);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.lightbox__caption {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
  text-wrap: pretty;
}
.lightbox__counter {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ── Close button ────────────────────────────────────────────────────────── */
.lightbox__close {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.22);
  color: var(--c-white);
  cursor: pointer;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr), border-color var(--tr);
  flex-shrink: 0;
}
.lightbox__close:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
}
.lightbox__close:focus-visible {
  outline: 3px solid var(--c-forest-soft);
  outline-offset: 3px;
}

/* ── Prev / Next buttons ─────────────────────────────────────────────────── */
.lightbox__prev,
.lightbox__next {
  flex-shrink: 0;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.22);
  color: var(--c-white);
  width: 56px; height: 56px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr), border-color var(--tr), transform var(--tr);
  /* Minimum 44×44 touch target — these are 56×56 */
}
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.45);
}
.lightbox__prev:active { transform: translateX(-2px); }
.lightbox__next:active { transform: translateX(2px); }
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible {
  outline: 3px solid var(--c-forest-soft);
  outline-offset: 3px;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Let the stage fill the full width; push buttons to the bottom */
  .lightbox.open {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 52px var(--space-3) 88px; /* bottom padding leaves room for the button row */
  }
  .lightbox__stage {
    flex: 1;
    max-width: 100%;
    min-height: 0;
  }
  .lightbox__frame {
    height: calc(100% - 72px); /* full stage height minus footer */
  }
  .lightbox__footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);
    margin-top: var(--space-3);
  }
  /* Pin prev/next to the bottom of the overlay, side by side */
  .lightbox__prev,
  .lightbox__next {
    position: absolute;
    bottom: 16px;
    width: 56px; height: 56px;
  }
  .lightbox__prev { left: calc(50% - 64px); }
  .lightbox__next { left: calc(50% + 8px); }
}

/* ==========================================================================
   FLOOR PLAN CARDS
   ========================================================================== */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.plan-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: left;
  transition: all var(--tr);
}
.plan-card:hover {
  border-color: var(--c-forest);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.plan-card__tag {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
}
.plan-card h3 {
  font-size: 1.6rem;
  margin: var(--space-3) 0 var(--space-2) 0;
}
.plan-card__specs {
  display: flex;
  gap: var(--space-5);
  font-size: 0.9rem;
  color: var(--c-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--c-line);
}
.plan-card__specs span strong { color: var(--c-ink); font-weight: 600; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 var(--space-4) 0; }
.plan-card li {
  font-size: 0.92rem;
  padding: 0.3rem 0 0.3rem 1.4rem;
  position: relative;
  color: var(--c-ink-soft);
}
.plan-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.75rem;
  width: 8px; height: 8px;
  border-left: 1.5px solid var(--c-accent);
  border-bottom: 1.5px solid var(--c-accent);
  transform: rotate(-45deg);
}
/* Plan card: flex column so margin-top:auto on actions pushes them to the bottom */
.plan-card {
  display: flex;
  flex-direction: column;
}

/* Floor plan thumbnail — full-bleed at card top, cream bg so the drawing reads clearly */
.plan-card__thumb {
  /* Break out of the card's padding on top and sides */
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  background: var(--c-cream);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  transition: background var(--tr);
}
.plan-card__thumb:hover {
  background: var(--c-cream-2);
}
.plan-card__thumb img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  object-fit: contain;
  /* Collapse the JPG's white background into the cream surface behind it */
  mix-blend-mode: multiply;
}

/* CTA card top zone — visual counterpart to the thumbnail area */
/* Featured (dark green) plan card — invert buttons same as cta-panel / section--ink */
.plan-card--featured .btn--primary {
  background: var(--c-cream);
  color: var(--c-forest);
  border-color: var(--c-cream);
}
.plan-card--featured .btn--primary:hover {
  background: var(--c-white);
  color: var(--c-forest-hover);
  border-color: var(--c-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.plan-card--featured .btn--primary:focus-visible {
  outline-color: var(--c-cream);
}

.plan-card__cta-top {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid rgba(197, 212, 189, 0.25);
  background: rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
  color: var(--c-forest-soft);
}

/* Actions row: CTA button + PDF link sit in the same flex column */
.plan-card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* PDF link — secondary to Request pricing, clearly labelled */
.plan-card__pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-forest);
  text-decoration: none;
  transition: color var(--tr);
}
.plan-card__pdf-link:hover {
  color: var(--c-forest-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plan-card__pdf-link:focus-visible {
  outline: 2px solid var(--c-forest);
  outline-offset: 3px;
  border-radius: 2px;
}
/* "PDF" badge — small pill to set format expectation before click */
.plan-card__pdf-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-white);
  background: var(--c-forest);
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.6;
}
.plan-card__pdf-link:hover .plan-card__pdf-label {
  background: var(--c-forest-hover);
}
@media (max-width: 860px) {
  .plans-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .plans-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
}
.contact-info {
  background: var(--c-cream-2);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  align-self: start;
}
.contact-info h3 { margin-bottom: var(--space-4); }
.info-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.info-row:last-child { border-bottom: none; }
.info-row__icon {
  color: var(--c-accent);
  width: 24px; height: 24px;
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.info-row__body strong { display: block; margin-bottom: 0.15rem; color: var(--c-ink); }
.info-row__body a, .info-row__body { color: var(--c-ink-soft); }

/* Form */
.form {
  display: grid;
  gap: var(--space-5);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--c-ink);
  background: var(--c-white);
  /* WCAG 2.1 AA: UI component borders need 3:1 against surrounding color */
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-forest);
  /* Focus indicator: 3:1 minimum per WCAG 2.2 success criterion 2.4.11 */
  box-shadow: 0 0 0 3px rgba(33, 59, 20, 0.28);
}
.form-field textarea { min-height: 150px; resize: vertical; font-family: inherit; }
.form-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--c-muted);
}
.form-consent input { margin-top: 0.2rem; }
.form .btn { justify-self: start; }

/* Fieldset wrapper for grouped checkbox/radio questions */
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.form-fieldset legend {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--space-3);
  display: block;
}
/* Grid of checkbox / radio options */
.form-check-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2) var(--space-4);
}
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  cursor: pointer;
  user-select: none;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--c-forest);
  cursor: pointer;
}
@media (max-width: 560px) {
  .form-check-group { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ACTIVEDEMAND EMBEDDED FORMS
   Theme overrides for the markup ActiveDEMAND injects on /contact/ and
   /schedule-a-tour/. The platform renders its own Bootstrap-style markup
   (.activedemand-input, .activedemand-select, .activedemand-label,
   .activedemand-button, .form-group, .form-control, .row, .col-*) AND ships
   an embedded <style> block whose selectors are scoped to the form's unique
   wrapper id (e.g. #Form_314131_0_f1864400 input { ... }). Those ID selectors
   have higher specificity (1,0,1) than plain classes, so to retheme the form
   from the site stylesheet we scope under the [id^="Form_"] wrapper to raise
   specificity and use !important on the handful of properties ActiveDEMAND
   hard-sets (border, radius, padding, font, colors, margins).

   Scoped under [id^="Form_"] so this only ever touches ActiveDEMAND embeds and
   never the site's native forms (RSVP, floor-plan modal, contact fallback).
   Mirrors the tokens in .form / .form-field above.
   ========================================================================== */
[id^="Form_"].activedemand,
[id^="Form_"] .activedemand,
.activedemand[id^="Form_"] * {
  box-sizing: border-box;
}

/* ActiveDEMAND paints the form wrapper (.row-body) solid white via its own
   #Form_* stylesheet. Keep the form transparent so it sits on the page's
   cream background like the native form did. */
[id^="Form_"] .row-body,
[id^="Form_"] .activedemand-paging-setup,
[id^="Form_"] .activedemand-page {
  background: transparent !important;
}

/* ActiveDEMAND nests several padded wrappers (outer .activedemand-wrapper,
   Bootstrap .container-fluid / .row gutters, .column-inner, .ad-form-field)
   that the native .form didn't have, so fields sat inset from the column edge.
   Zero them out so the form runs flush to the column like the native one,
   keeping only the .form-group vertical rhythm set above. */
[id^="Form_"].activedemand-wrapper,
[id^="Form_"] .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[id^="Form_"].activedemand-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Row is flex with equal columns. Native .form-row used a 1rem grid gap;
   ActiveDEMAND got its inter-column gutter from .column-inner padding, which
   we strip — so restore the gap on the flex row instead. */
[id^="Form_"] .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: var(--space-4);
}
[id^="Form_"] .column-inner,
[id^="Form_"] .ad-form-field {
  padding: 0 !important;
}
/* ActiveDEMAND adds a right margin on inputs; remove so they fill the cell */
[id^="Form_"] .activedemand-input,
[id^="Form_"] .activedemand-select,
[id^="Form_"] .form-control {
  margin-right: 0 !important;
}

/* Vertical rhythm between fields, matching .form's gap */
[id^="Form_"] .form-group {
  margin-bottom: var(--space-5) !important;
}
[id^="Form_"] .row {
  margin-left: 0;
  margin-right: 0;
}

/* Labels — match .form-field label */
[id^="Form_"] .activedemand-label,
[id^="Form_"] label {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 600;
  color: var(--c-ink);
  margin-top: 0 !important;
  margin-bottom: 0.4rem !important;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Text inputs, textareas, selects — match .form-field input/select/textarea */
[id^="Form_"] .form-control,
[id^="Form_"] .activedemand-input,
[id^="Form_"] .activedemand-select,
[id^="Form_"] input[type="text"],
[id^="Form_"] input[type="email"],
[id^="Form_"] input[type="tel"],
[id^="Form_"] input[type="number"],
[id^="Form_"] input[type="date"],
[id^="Form_"] textarea,
[id^="Form_"] select {
  width: 100%;
  padding: 0.85rem 1rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 0.98rem !important;
  line-height: 1.4;
  color: var(--c-ink);
  background-color: var(--c-white);
  border-width: 1.5px !important;
  border-style: solid !important;
  border-color: var(--c-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none;
  transition: border-color var(--tr), box-shadow var(--tr);
  -webkit-appearance: none;
  appearance: none;
}
[id^="Form_"] textarea,
[id^="Form_"] .activedemand-input[rows] {
  min-height: 150px;
  resize: vertical;
}

/* Native arrow for selects (appearance reset above removes it) */
[id^="Form_"] .activedemand-select,
[id^="Form_"] 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 fill='%23685e55' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem !important;
}

/* Focus state — match .form-field :focus ring */
[id^="Form_"] .form-control:focus,
[id^="Form_"] .activedemand-input:focus,
[id^="Form_"] .activedemand-select:focus,
[id^="Form_"] input:focus,
[id^="Form_"] textarea:focus,
[id^="Form_"] select:focus {
  outline: none;
  border-color: var(--c-forest) !important;
  box-shadow: 0 0 0 3px rgba(33, 59, 20, 0.28);
}

/* Placeholders */
[id^="Form_"] ::placeholder { color: var(--c-muted); opacity: 1; }

/* Checkboxes & radios — match .form-check inputs */
[id^="Form_"] input[type="checkbox"],
[id^="Form_"] input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  accent-color: var(--c-forest);
  cursor: pointer;
  border-radius: var(--radius-sm) !important;
  -webkit-appearance: auto;
  appearance: auto;
}
[id^="Form_"] .checkbox label,
[id^="Form_"] .activedemand-text-wrapper label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  font-size: 0.95rem !important;
  color: var(--c-ink-soft);
  cursor: pointer;
}

/* Submit button — match .btn.btn--primary look */
[id^="Form_"] .activedemand-button,
[id^="Form_"] button.btn,
[id^="Form_"] button[type="submit"],
[id^="Form_"] input[type="submit"],
[id^="Form_"] .ad-brand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  font-family: var(--font-sans) !important;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.95rem 1.8rem !important;
  color: var(--c-white) !important;
  background: var(--c-forest) !important;
  border: 1.5px solid var(--c-forest) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
[id^="Form_"] .activedemand-button:hover,
[id^="Form_"] button.btn:hover,
[id^="Form_"] button[type="submit"]:hover,
[id^="Form_"] input[type="submit"]:hover,
[id^="Form_"] .ad-brand-button:hover {
  background: var(--c-forest-hover) !important;
  border-color: var(--c-forest-hover) !important;
}
[id^="Form_"] .activedemand-button:focus-visible,
[id^="Form_"] button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(33, 59, 20, 0.28) !important;
}
[id^="Form_"] .activedemand-button-container,
[id^="Form_"] .cta-content-wrapper {
  margin-top: var(--space-3);
}

/* Validation / required markers in brand accent */
[id^="Form_"] .required,
[id^="Form_"] .activedemand-error,
[id^="Form_"] .error {
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   Context-specific placement for the ActiveDEMAND embeds
   The Floor Plan embed lives inside the inquiry modal; the RSVP embed lives
   inside the event hero form card. Both wrappers (.ad-embed-form) are already
   padded by their parent, so the embed should sit flush and inherit width.
   -------------------------------------------------------------------------- */
.ad-embed-form { position: relative; }
.ad-embed-form .activedemand-replace { display: block; }
/* Keep ActiveDEMAND's injected form in normal document flow inside the wrapper
   so it can't render on top of sibling controls (e.g. the modal Cancel button).
   ActiveDEMAND occasionally ships absolutely-positioned wrappers during load. */
.ad-embed-form [id^="Form_"] {
  position: static !important;
  float: none !important;
}

/* Floor Plan modal: the embed replaces the native form. The Cancel button now
   sits in its own single-action row beneath the embed (a sibling of the embed
   wrapper, so the injected form can never overlap it). */
.modal__actions--single {
  justify-content: flex-start;
  margin-top: var(--space-4);
}

/* RSVP card: .ersvp-form-card itself has no padding of its own — all of the
   card's inner inset comes from .ersvp-form's own padding (set above, and
   reduced at mobile below). A previous override zeroed .ersvp-form's
   left/right padding here on the assumption the card already provided it,
   which left the embedded form flush against the card edges with no side
   margin at all (worst on mobile). Removed — .ersvp-form's normal padding
   now applies to the embed too. Make the embed's submit button full-width
   like the native .ersvp-submit it replaces. */
.ersvp-form-card .ad-embed-form [id^="Form_"] .activedemand-button,
.ersvp-form-card .ad-embed-form [id^="Form_"] button[type="submit"],
.ersvp-form-card .ad-embed-form [id^="Form_"] input[type="submit"] {
  width: 100% !important;
}

/* ==========================================================================
   MISC
   ========================================================================== */
.hr-rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: var(--space-7) 0;
}

.prose {
  max-width: 720px;
  margin: 0 auto;
}
.prose p { font-size: 1.05rem; }
.prose h2, .prose h3 { margin-top: var(--space-7); }

/* Inline article images / infographics */
.prose figure {
  margin: var(--space-7) 0;
}
.prose figure img,
.prose > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 12px);
}
.prose figcaption {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  color: var(--c-muted);
  text-align: center;
}
/* Tall infographics: cap height so they don't overwhelm the column */
.prose figure--portrait img {
  max-width: 520px;
  margin: 0 auto;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0; margin: 0;
}
.tag-list li {
  padding: 0.4rem 0.9rem;
  background: var(--c-cream-2);
  color: var(--c-ink);
  border-radius: 999px;
  font-size: 0.85rem;
  border: 1px solid var(--c-line);
}

/* Closing gaps two-column layout — steps + flywheel */
.container .closing-gaps-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-7);
}
@media (max-width: 780px) {
  .container .closing-gaps-layout {
    grid-template-columns: 1fr;
  }
  .closing-gaps-flywheel {
    order: -1;
    max-width: 340px;
    margin: 0 auto;
  }
}
.closing-gaps-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Default: flywheel sits in normal grid flow */
.closing-gaps-flywheel {
  align-self: start;
}
.closing-gaps-flywheel svg {
  width: 100%;
  height: auto;
}
/* JS adds .is-sticky once the section scrolls into view;
   a ghost placeholder (.closing-gaps-flywheel-ghost) keeps the column width */
.closing-gaps-flywheel.is-sticky {
  position: fixed;
  top: 88px; /* below nav */
  z-index: 10;
  /* width is set inline by JS to match the column */
}
.closing-gaps-flywheel-ghost {
  /* invisible placeholder that holds the column width while flywheel is fixed */
  visibility: hidden;
  pointer-events: none;
}

/* Flywheel node default state */
.flywheel-node circle {
  transition: fill 0.25s ease, transform 0.25s ease;
  transform-origin: center;
  transform-box: fill-box;
}
.flywheel-node text {
  transition: fill 0.2s ease;
  pointer-events: none;
}

/* Active node — highlighted */
.flywheel-node.is-active circle {
  fill: #b08a3a;
  transform: scale(1.08);
}
.flywheel-node.is-active text {
  fill: #fff;
}

/* Step card hover/active state */
.step-card {
  cursor: default;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.step-card.is-active,
.step-card:hover {
  border-color: #b08a3a;
  box-shadow: 0 2px 12px rgba(176, 138, 58, 0.18);
}
.step-card.is-active .step-card__num,
.step-card:hover .step-card__num {
  background: #b08a3a;
}

/* Step cards — used on resident-centered-care page */
.step-card {
  display: flex;
  gap: var(--space-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.step-card__num {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-forest);
  color: var(--c-cream);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
}
.step-card__body h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--c-forest);
}
.step-card__body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--c-ink);
}

/* Scroll reveal (subtle) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Skip link — shown only on keyboard focus; forest bg + white text = 13.6:1 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--c-forest);
  color: var(--c-white);
  padding: 0.6rem 1.1rem;
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  color: var(--c-white);
  outline: 3px solid var(--c-cream);
  outline-offset: -5px;
}

/* ==========================================================================
   MODAL — Floor Plan Inquiry
   ========================================================================== */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  animation: modalFade 180ms ease-out;
}
@keyframes modalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 22, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - var(--space-6));
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7);
  overflow-y: auto;
  animation: modalRise 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes modalRise {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--c-border);
  background: var(--c-white);
  border-radius: 50%;
  color: var(--c-ink);
  cursor: pointer;
  transition: all var(--tr);
}
.modal__close:hover {
  background: var(--c-cream-2);
  border-color: var(--c-ink);
}
.modal__close:focus-visible {
  outline: 3px solid var(--c-forest);
  outline-offset: 2px;
}
.modal__header {
  margin-bottom: var(--space-5);
  padding-right: var(--space-6);
}
.modal__header h2 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin: var(--space-2) 0 var(--space-2);
  line-height: 1.2;
}
.modal__header h2 [data-plan-display-name] { color: var(--c-forest); }
.modal__sub {
  margin: 0;
  color: var(--c-muted);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.modal__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.form-req { color: var(--c-accent); font-weight: 700; }
/* Honeypot — visually hidden but still submittable if a bot fills it */
.form-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
/* Lock body scroll when modal is open (set by JS) */
body.modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .modal { padding: var(--space-3); align-items: stretch; }
  .modal__panel { padding: var(--space-6) var(--space-5); max-height: 100vh; border-radius: var(--radius); }
  .modal__actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   RELATED PAGES (internal linking block)
   ========================================================================== */
.related-pages {
  background: var(--c-cream-2);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  color: var(--c-ink);
  text-decoration: none;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.related-card:hover,
.related-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--c-forest);
  color: var(--c-ink);
}
.related-card:focus-visible {
  outline: 3px solid var(--c-forest);
  outline-offset: 3px;
}
.related-card__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.related-card h3 {
  font-size: 1.35rem;
  margin: 0.25rem 0 var(--space-2) 0;
  line-height: 1.2;
}
.related-card p {
  color: var(--c-ink-soft);
  margin: 0 0 var(--space-4) 0;
  font-size: 0.95rem;
  flex: 1;
}
.related-card__cta {
  color: var(--c-forest);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.related-card:hover .related-card__cta {
  color: var(--c-forest-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 860px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Team Cards
   ========================================================================== */
.feature-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .feature-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .feature-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .feature-grid--4 { grid-template-columns: 1fr; }
}

.team-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--tr), box-shadow var(--tr);
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
/* Photo fills the card top; badge icon sits in the corner as decor */
.team-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-cream); /* fallback while image loads */
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* favour faces */
  display: block;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.team-card:hover .team-card__photo img {
  transform: scale(1.04);
}
/* Small circular icon badge — thematic role indicator, purely decorative */
.team-card__badge {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-forest-soft);
  color: var(--c-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
}
.team-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.team-card__body h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-1);
  color: var(--c-ink);
}
.team-card__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-forest);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--space-3);
}
.team-card__tenure {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-forest);
  background: var(--c-forest-soft);
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}
.team-card__body p {
  font-size: 0.9rem;
  color: var(--c-muted);
  line-height: 1.65;
}

/* ==========================================================================
   Video Cards
   ========================================================================== */
.video-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
/* Thumbnail button replaces inline iframe */
.video-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
  border: none;
  padding: 0;
  cursor: pointer;
}
.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease, opacity 300ms ease;
}
.video-card__thumb:hover img { transform: scale(1.03); opacity: 0.85; }

/* Play button circle */
.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.video-card__play::before {
  content: "";
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  transition: transform 250ms ease, background 250ms ease;
}
.video-card__play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--c-forest);
  margin-left: 4px; /* optical centering */
}
.video-card__thumb:hover .video-card__play::before {
  transform: scale(1.1);
  background: #fff;
}

/* ── Video modal ─────────────────────────────────────────────────────────── */
.video-modal[hidden] { display: none; }
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  animation: modalFade 180ms ease-out;
}
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-modal__panel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  z-index: 1;
  animation: modalRise 240ms cubic-bezier(0.2,0.7,0.2,1);
}
.video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr);
}
.video-modal__close:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6); }
.video-modal__close:focus-visible { outline: 2px solid var(--c-forest-soft); outline-offset: 3px; }
.video-modal__stage {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.video-modal__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 640px) {
  .video-modal { padding: var(--space-3); }
  .video-modal__close { top: -40px; }
}

.video-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.video-card__body h3 {
  font-size: 1.2rem;
  margin-bottom: var(--space-2);
}
.video-card__body p {
  color: var(--c-muted);
  font-size: 0.95rem;
}
/* Hero (single featured) video — full width, centered */
.video-card--hero {
  max-width: 100%;
}
.video-card--hero .video-card__thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.video-card--hero .video-card__play::before {
  width: 80px;
  height: 80px;
}
.video-card--hero .video-card__play::after {
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 22px solid currentColor;
}
.video-card--hero .video-card__body {
  text-align: center;
  padding: var(--space-5) var(--space-6);
}
.video-card--hero .video-card__body h3 {
  font-size: 1.4rem;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 960px) {
  .videos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .videos-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   NAV DROPDOWN
   ========================================================================== */

/* Wrapper — sits in the flex nav row like a plain link */
.nav-dropdown {
  position: relative;
}

/* The trigger link — styled to match .nav > a */
.nav-dropdown__trigger {
  color: var(--c-ink);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tr);
}
/* Underline animation matching .nav > a::after */
.nav-dropdown__trigger::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--c-forest);
  transition: width var(--tr);
}
.nav-dropdown:hover .nav-dropdown__trigger::after,
.nav-dropdown__trigger.active::after {
  width: calc(100% - 16px); /* stop before the chevron */
}
.nav-dropdown__trigger:focus-visible {
  outline: 2px solid var(--c-forest);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Chevron rotates when open */
.nav-dropdown__chevron {
  transition: transform var(--tr);
  flex-shrink: 0;
  opacity: 0.6;
}
.nav-dropdown:hover .nav-dropdown__chevron,
.nav-dropdown:focus-within .nav-dropdown__chevron,
.nav-dropdown.open .nav-dropdown__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Panel — hidden until hover / focus-within / .open class */
.nav-dropdown__panel {
  display: none;
  position: absolute;
  top: 100%;              /* flush — no gap, so cursor never leaves .nav-dropdown */
  left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--c-line);
  z-index: 200;
  flex-direction: column;
  padding-top: var(--space-2);  /* visual space above first item */
  /* overflow: hidden removed — was clipping the caret */
}
/* Small caret pointing up */
.nav-dropdown__panel::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--c-white);
  border-left: 1px solid var(--c-line);
  border-top: 1px solid var(--c-line);
}
/* Open triggers: CSS hover + focus-within (keyboard), JS .open (click/touch) */
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel,
.nav-dropdown.open .nav-dropdown__panel {
  display: flex;
}
/* Panel links */
.nav-dropdown__panel a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  transition: background var(--tr), color var(--tr);
  white-space: nowrap;
}
.nav-dropdown__panel a + a {
  border-top: 1px solid var(--c-line);
}
.nav-dropdown__panel a:hover,
.nav-dropdown__panel a:focus-visible {
  background: var(--c-cream);
  color: var(--c-forest);
}
.nav-dropdown__panel a.active {
  color: var(--c-forest);
  font-weight: 600;
}
/* "All living options" footer link — slightly muted */
.nav-dropdown__all {
  color: var(--c-muted) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  background: var(--c-cream);
}
.nav-dropdown__all:hover {
  color: var(--c-forest) !important;
}

/* ── Mobile (hamburger drawer) ───────────────────────────────────────── */
@media (max-width: 960px) {
  /* Block-level wrapper so .open class applies correctly */
  .nav-dropdown {
    display: block;
    position: static;
  }

  /* Trigger: full-width tappable row with chevron */
  .nav-dropdown__trigger {
    font-size: 1.1rem;
    font-weight: 500;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--c-ink);
    background: transparent;
    cursor: pointer;
    transition: background var(--tr), color var(--tr);
  }
  .nav-dropdown__trigger:hover,
  .nav-dropdown.open .nav-dropdown__trigger {
    background: var(--c-cream);
    color: var(--c-forest);
  }
  .nav-dropdown__trigger::after { display: none; }

  /* Chevron: visible expand/collapse indicator */
  .nav-dropdown__chevron {
    display: block;
    flex-shrink: 0;
    transition: transform 250ms ease;
    opacity: 0.5;
  }
  .nav-dropdown.open .nav-dropdown__chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* Panel: smooth slide-down expand via max-height */
  .nav-dropdown__panel {
    display: block;
    position: static;
    transform: none;
    min-width: unset;
    background: var(--c-cream);
    box-shadow: none;
    border: none;
    overflow: hidden;
    padding-top: 0;
    max-height: 0;
    transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-dropdown.open .nav-dropdown__panel {
    max-height: 600px; /* large enough for any submenu */
    border-bottom: 1px solid var(--c-line);
  }
  .nav-dropdown__panel::before { display: none; }

  /* Submenu links — indented, generously tappable */
  .nav-dropdown__panel a {
    font-size: 1rem;
    font-weight: 500;
    padding: 14px var(--space-5) 14px calc(var(--space-5) + 16px);
    color: var(--c-ink-soft);
    border-top: none;
    border-bottom: 1px solid var(--c-line);
    white-space: normal;
    display: flex;
    align-items: center;
    transition: background var(--tr), color var(--tr);
  }
  .nav-dropdown__panel a:last-child { border-bottom: none; }
  .nav-dropdown__panel a:hover,
  .nav-dropdown__panel a:focus-visible { background: var(--c-sand); color: var(--c-forest); }
  .nav-dropdown__panel a.active { color: var(--c-forest); font-weight: 600; }

  .nav-dropdown__all {
    background: transparent !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    color: var(--c-muted) !important;
    border-top: 1px solid var(--c-line) !important;
  }
  .nav-dropdown__all:hover { color: var(--c-forest) !important; }
}

/* Home testimonials pair — stack on mobile */
@media (max-width: 700px) {
  .testimonials-pair { grid-template-columns: 1fr !important; }
}

/* Feature card icon variant (no photo) */
.feature-card__media--icon {
  aspect-ratio: 4/3;
  background: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-forest);
}

/* ==========================================================================
   Announcement Bar
   ========================================================================== */
.announce-bar {
  background: var(--c-forest);
  color: rgba(255,255,255,0.9);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.announce-bar__inner {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.announce-bar a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  color: inherit;
  text-decoration: none;
  flex: 1;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,0.15);
  transition: background var(--tr);
}
.announce-bar a:last-child { border-right: none; }
.announce-bar a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
@media (max-width: 860px) {
  .announce-bar__inner { flex-wrap: wrap; }
  .announce-bar a {
    flex: 1 1 50%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 0.75rem;
    padding: var(--space-2) var(--space-3);
  }
}
@media (max-width: 480px) {
  .announce-bar { display: none; }
}

/* Print */
@media print {
  .site-header, .site-footer, .cta-panel, .related-pages { display: none; }
}

/* ==========================================================================
   CAREERS PAGE
   ========================================================================== */

/* ── Intro action buttons ─────────────────────────────────────────────────── */
.careers-intro-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* ── Benefits grid ────────────────────────────────────────────────────────── */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (max-width: 1100px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .benefits-grid { grid-template-columns: 1fr; } }

.benefit-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--tr), transform var(--tr);
}
.benefit-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.benefit-card__icon {
  color: var(--c-forest);
  flex-shrink: 0;
}
.benefit-card h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--c-ink);
}
.benefit-card p {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.6;
}

/* ── Career path — vertical timeline ─────────────────────────────────────── */
.career-path {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-7);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.career-step {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0 var(--space-5);
  position: relative;
}

/* Vertical line running through the left column, skipping the bubble itself */
.career-step:not(:last-child) .career-step__num::after {
  content: "";
  position: absolute;
  top: 2.6rem;               /* start below the bubble                  */
  bottom: calc(-1 * var(--space-6)); /* extend down through the gap     */
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--c-forest-soft);
}

.career-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--c-forest);
  color: var(--c-cream);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;   /* needed for ::after line */
  z-index: 1;
}

.career-step__body {
  padding-bottom: var(--space-6);
}
.career-step:last-child .career-step__body {
  padding-bottom: 0;
}

.career-step__body h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--space-3);
  color: var(--c-ink);
  /* vertically align h3 with the bubble centre */
  padding-top: calc((2.6rem - 1.5rem) / 2);
  line-height: 1.3;
}
.career-step__body p {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.6;
}
.career-step__roles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.career-step__roles li {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-forest);
  padding-left: 1rem;
  position: relative;
}
.career-step__roles li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--c-gold);
  font-size: 0.75rem;
}

/* ── Job listing rows (careers index) ────────────────────────────────────── */
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-7);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-7);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  transition: background var(--tr);
}
.job-row:last-child { border-bottom: none; }
.job-row:hover { background: var(--c-cream); }
.job-row__info { flex: 1; min-width: 0; }
.job-row__title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  margin: var(--space-1) 0 var(--space-2);
  color: var(--c-ink);
}
.job-row__summary {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  margin: var(--space-2) 0 0;
  line-height: 1.55;
}
.job-card__perks {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.job-card__perks li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.88rem;
  color: var(--c-ink-soft);
  line-height: 1.45;
}
.job-card__perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-forest);
  font-weight: 700;
}
.job-row__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .job-row { flex-direction: column; align-items: flex-start; }
  .job-row__actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* ── Position detail page ─────────────────────────────────────────────────── */
/* Full-bleed photo hero with a dark scrim so the white heading/crumbs stay
   readable over any image (the default .page-hero is a two-column layout with
   a solid panel; this --slim variant overlays text directly on the photo). */
.page-hero--slim {
  display: block;
  position: relative;
  min-height: 0;
}
.page-hero--slim .page-hero__bg {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 0;
}
.page-hero--slim .page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Dark gradient scrim over the photo for contrast */
.page-hero--slim .page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 33, 12, 0.88) 0%, rgba(20, 33, 12, 0.78) 55%, rgba(20, 33, 12, 0.66) 100%);
}
.page-hero--slim > .container {
  position: relative;
  z-index: 1;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
/* Ensure hero text is light over the scrim */
.page-hero--slim h1 { color: var(--c-white); }
.page-hero--slim .eyebrow { color: var(--c-cream); }
.page-hero--slim .crumbs,
.page-hero--slim .crumbs span { color: rgba(250, 246, 241, 0.85); }
.page-hero--slim .crumbs a { color: var(--c-white); }
.page-hero--slim .crumbs a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }

.page-hero--slim .page-hero__bg { min-height: 280px; }
@media (max-width: 640px) { .page-hero--slim .page-hero__bg { min-height: 200px; } }

.position-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 1000px) { .position-layout { grid-template-columns: 1fr; } }

.position-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.position-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-ink-soft);
}
.position-detail h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-3);
  color: var(--c-ink);
  letter-spacing: 0.01em;
}
.position-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.position-list li {
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.55;
}
.position-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-forest);
  font-weight: 700;
  font-size: 0.82rem;
}
.position-cta-phone {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.position-cta-phone p { margin: 0; font-size: 0.92rem; color: var(--c-ink-soft); }

.position-form-wrap {
  position: sticky;
  top: calc(var(--space-6) + 80px); /* clears sticky header */
}
.position-form-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow);
}
.position-form-card .eyebrow { display: block; margin-bottom: var(--space-2); }
.position-form-card h2 {
  font-size: 1.5rem;
  margin: 0 0 var(--space-2);
}
.position-form-card > p {
  font-size: 0.9rem;
  color: var(--c-muted);
  margin: 0 0 var(--space-5);
}

.job-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.job-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.job-card__dept {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-forest);
  margin-bottom: var(--space-2);
}
.job-card__title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0;
  color: var(--c-ink);
  line-height: 1.25;
}
.job-card__badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  flex-shrink: 0;
  white-space: nowrap;
}
.job-card__badge--open {
  background: color-mix(in srgb, var(--c-forest) 12%, transparent);
  color: var(--c-forest);
}
.job-card__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.job-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-ink-soft);
}
.job-card p {
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  margin: 0;
}
.job-card h4 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: var(--space-2) 0 var(--space-2);
}
.job-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.job-card ul li {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  padding-left: 1.2rem;
  position: relative;
}
.job-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-forest);
  font-size: 0.8rem;
  font-weight: 700;
}
.job-card__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 640px) { .job-card__lists { grid-template-columns: 1fr; } }

.job-card__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
}
.jobs-note {
  margin-top: var(--space-7);
  text-align: center;
  font-size: 0.95rem;
  color: var(--c-ink-soft);
}
.jobs-note a {
  color: var(--c-forest);
  font-weight: 500;
}

/* ==========================================================================
   Cookie Consent Banner
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--c-ink);
  color: var(--c-cream);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.18);
  padding: var(--space-4) 0;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
.cookie-banner.is-visible {
  transform: translateY(0);
}
.cookie-banner__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  color: var(--c-cream);
}
.cookie-banner__text a {
  color: var(--c-accent-soft);
  text-decoration: underline;
}
.cookie-banner__text a:hover {
  color: #fff;
}
.cookie-banner__gpc-notice {
  flex-basis: 100%;
  margin: 0;
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--c-cream);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-left: 3px solid var(--c-accent-soft);
  border-radius: var(--radius);
}
.cookie-banner__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}
.cookie-banner__accept,
.cookie-banner__decline {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.cookie-banner__accept {
  background: #fff;
  color: var(--c-ink);
  border-color: #fff;
}
.cookie-banner__accept:hover {
  background: var(--c-cream);
  border-color: var(--c-cream);
}
.cookie-banner__decline {
  background: transparent;
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.3);
}
.cookie-banner__decline:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
/* Current selection indicator when re-opening preferences */
.cookie-banner__accept.is-active {
  background: var(--c-cream);
  border-color: var(--c-cream);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.cookie-banner__decline.is-active {
  color: #fff;
  border-color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.12);
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner__actions {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   WCAG 2.1 AA — Contrast Verification
   ==========================================================================
   Normal text (≥4.5:1) and UI components / large text / focus indicators
   (≥3:1) ratios for every foreground/background pair in use.

   Verified with WCAG 2.1 relative-luminance formula.

   TEXT PAIRS
   ----------------------------------------------------------------------------
   --c-ink       #2a2623 on --c-cream   #faf6f1  → 13.94 : 1  AAA
   --c-ink       #2a2623 on --c-white   #ffffff  → 15.00 : 1  AAA
   --c-ink-soft  #4a423c on --c-cream   #faf6f1  →  9.14 : 1  AAA
   --c-muted     #685e55 on --c-cream   #faf6f1  →  5.88 : 1  AA  (was 4.55, fixed)
   --c-muted     #685e55 on --c-white   #ffffff  →  6.32 : 1  AA
   --c-accent    #8a3a52 on --c-cream   #faf6f1  →  6.95 : 1  AA
   --c-forest    #213b14 on --c-cream   #faf6f1  → 11.48 : 1  AAA (logo green)
   --c-forest    #213b14 on --c-white   #ffffff  → 12.35 : 1  AAA
   --c-forest-hover #355d26 on white               →  7.65 : 1  AAA (hover state)

   REVERSE (light text on dark)
   ----------------------------------------------------------------------------
   --c-white     #ffffff on --c-forest  #213b14  → 12.35 : 1  AAA (primary CTA)
   --c-white     #ffffff on --c-accent  #8a3a52  →  7.48 : 1  AAA (btn--rose)
   --c-cream     #faf6f1 on #1f1c1a (footer bg)   → 15.75 : 1  AAA
   rgba(cream,0.78) on #1f1c1a                    →  9.98 : 1  AAA (footer body)
   rgba(cream,0.70) on #1f1c1a                    →  8.30 : 1  AAA (footer-bottom)
   rgba(cream,0.85) on #1f1c1a                    → 11.61 : 1  AAA (footer links)
   --c-cream #f5f0e8 on dark hero photo/overlay   → ~13.0 : 1  AAA (hero eyebrow)

   UI COMPONENTS (≥3:1 per WCAG 1.4.11)
   ----------------------------------------------------------------------------
   --c-border    #9a8e7f on --c-white   #ffffff  →  3.21 : 1  AA  (form inputs)
   --c-forest    #213b14 as focus outline on white/cream → 12+ : 1 AAA

   NOTE: --c-line #e1d7c8 is intentionally <3:1 and used ONLY for decorative
   dividers/section separators, not for UI component borders (per WCAG 1.4.11).
   ========================================================================== */

/* ==========================================================================
   "TRY IT, YOU'LL LIKE IT" TOAST
   Slides in from bottom-right for first-time visitors.
   Dismissed state is stored in localStorage so it only shows once.
   ========================================================================== */
.tryit-toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 900;
  width: 320px;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
  padding: var(--space-5);
  border-left: 4px solid var(--c-forest);

  /* Start off-screen below and transparent */
  transform: translateY(calc(100% + var(--space-6)));
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease;
  pointer-events: none;
}
.tryit-toast.tryit-toast--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.tryit-toast.tryit-toast--dismissing {
  transform: translateY(calc(100% + var(--space-6)));
  opacity: 0;
  pointer-events: none;
}
.tryit-toast__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  transition: background var(--tr), color var(--tr);
}
.tryit-toast__close:hover {
  background: var(--c-sand);
  color: var(--c-ink);
}
.tryit-toast__close:focus-visible {
  outline: 2px solid var(--c-forest);
  outline-offset: 2px;
}
.tryit-toast__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-forest);
  margin-bottom: var(--space-2);
}
.tryit-toast__heading {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
  padding-right: var(--space-4);
}
.tryit-toast__body {
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}
.tryit-toast__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tryit-toast__cta {
  text-align: center;
  justify-content: center;
}
.tryit-toast__phone {
  text-align: center;
  font-size: 0.82rem;
  color: var(--c-muted);
}

@media (max-width: 480px) {
  .tryit-toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    width: auto;
  }
}


/* ==========================================================================
   Guided Tour — WCAG 2.1 AA compliant
   Contrast audit (all pairs verified):
     Footer btn text  #213b14 on #c5d4bd  → 7.95:1  AA ✔
     Footer btn border #213b14 on #c5d4bd → 7.95:1  AA ✔ (3:1 UI min)
     Ribbon text #faf6f1 on #213b14       → 11.48:1 AA ✔
     Ribbon "Go" btn #faf6f1 on #8a3a52  → 6.95:1  AA ✔
     Ribbon dots/muted rgba verified ≥3:1 for UI components
     Focus rings: accent-soft on ribbon   → 5.53:1  AA ✔
   ========================================================================== */

/* ── Footer trigger button ───────────────────────────────────────────── */
/* Footer bg: #c5d4bd (forest-soft / light sage) */
.footer-tour-cta {
  border-top: 1px solid rgba(33,59,20,0.18);
  padding: var(--space-5) 0 var(--space-4);
  text-align: center;
}
.footer-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--c-accent);
  border: 2px solid var(--c-accent);
  color: var(--c-cream);               /* #faf6f1 on #8a3a52 → 6.95:1 AA ✔ */
  border-radius: 99px;
  padding: 11px 24px;
  font-size: 0.88rem;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.footer-tour-btn:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}
.footer-tour-btn:focus-visible {
  outline: 3px solid var(--c-accent);  /* 4.82:1 on footer bg AA ✔ */
  outline-offset: 3px;
}
.footer-tour-btn svg {
  flex-shrink: 0;
}

/* ── Tour ribbon (fixed bottom bar) ─────────────────────────────────── */
/* Ribbon bg: #213b14 (forest) */
.tour-ribbon {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--c-accent);         /* #8a3a52 */
  color: var(--c-cream);               /* #faf6f1 → 6.95:1 AA ✔ */
  box-shadow: 0 -4px 24px rgba(138,58,82,0.4);
  font-family: var(--font-sans);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-ribbon.is-visible {
  transform: translateY(0);
}
.tour-ribbon__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 12px 20px;
  max-width: 860px;
  margin: 0 auto;
}

/* Step dots — UI components need ≥3:1; active dot uses forest-soft (#c5d4bd)
   on forest bg (#213b14) → 7.95:1 ✔; inactive uses 40% opacity cream ≈4.6:1 ✔ */
.tour-ribbon__steps {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
  align-items: center;
}
.tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(250,246,241,0.40);  /* cream at 40% → ≈4.6:1 UI ✔ */
  transition: background 0.25s, transform 0.25s, width 0.2s;
}
.tour-dot.is-done {
  background: rgba(250,246,241,0.65);  /* cream at 65% → ≈7.5:1 ✔ */
}
.tour-dot.is-active {
  background: rgba(250,246,241,0.9);  /* cream high-alpha on accent → ~6.5:1 ✔ */
  width: 20px;
  border-radius: 99px;
}

/* Label + stop name */
.tour-ribbon__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.tour-ribbon__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(250,246,241,0.78);       /* cream 78% on accent → ≈5.4:1 ✔ */
  flex-shrink: 0;
  font-weight: 600;
}
.tour-ribbon__stop {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-cream);               /* #faf6f1 on #213b14 → 11.5:1 ✔ */
}

/* Controls */
.tour-ribbon__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tour-ribbon__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  font-family: var(--font-sans);
  border: none;
}
/* Prev / next: icon buttons — cream icon on semi-transparent bg */
.tour-ribbon__btn--prev,
.tour-ribbon__btn--next {
  width: 34px;
  height: 34px;
  background: rgba(250,246,241,0.12);
  color: var(--c-cream);               /* 11.5:1 ✔ */
  border: 1.5px solid rgba(250,246,241,0.25);
}
.tour-ribbon__btn--prev:hover,
.tour-ribbon__btn--next:hover {
  background: rgba(250,246,241,0.22);
}
.tour-ribbon__btn--prev:focus-visible,
.tour-ribbon__btn--next:focus-visible {
  outline: 2px solid var(--c-accent-soft); /* #d89eab on #213b14 → 5.53:1 ✔ */
  outline-offset: 2px;
}
.tour-ribbon__btn--prev:disabled,
.tour-ribbon__btn--next:disabled,
.tour-ribbon__btn--next[data-locked] {
  opacity: 1;
  background: rgba(0,0,0,0.25);
  color: rgba(250,246,241,0.3);
  border-color: rgba(250,246,241,0.1);
  cursor: not-allowed;
}
/* Stop counter label */
.tour-ribbon__counter {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-sans);
  color: rgba(250,246,241,0.78);       /* cream 78% on accent → ≈5.4:1 ✔ */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Exit button */
.tour-ribbon__exit {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--c-cream);               /* 11.5:1 ✔ */
  cursor: pointer;
  border-radius: 6px;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
  margin-left: 2px;
}
.tour-ribbon__exit:hover {
  opacity: 1;
  background: rgba(250,246,241,0.15);
}
.tour-ribbon__exit:focus-visible {
  outline: 2px solid var(--c-accent-soft);
  outline-offset: 2px;
  opacity: 1;
}

/* Progress bar at bottom of ribbon */
.tour-ribbon__progress {
  height: 3px;
  background: rgba(250,246,241,0.15);
  position: relative;
  overflow: hidden;
}
.tour-ribbon__progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--c-forest-soft);    /* #c5d4bd — decorative, on accent bg */
  transition: width 0.45s ease;
  width: var(--tour-progress, 0%);
}

/* ── On-page stop arrival hint with quiz ────────────────────────────── */
/* bg: #8a3a52 (accent), text: #faf6f1 → 6.95:1 ✔ */
.tour-stop-indicator {
  position: fixed;
  top: 88px;
  right: 20px;
  z-index: 990;
  background: var(--c-accent);
  color: var(--c-cream);
  border-radius: 14px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.45;
  box-shadow: 0 6px 28px rgba(138,58,82,0.45);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  width: 270px;
  overflow: hidden;
}
.tour-stop-indicator.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.tour-hint__header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 10px;
  background: rgba(0,0,0,0.18);
}
.tour-stop-indicator__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--c-cream);
  margin-top: 2px;
}
.tour-stop-indicator__text {
  flex: 1;
  min-width: 0;
}
.tour-stop-indicator__label {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(250,246,241,0.75);       /* cream 75% on accent → ≈5.2:1 ✔ */
  margin-bottom: 2px;
  font-weight: 700;
}
.tour-hint__name {
  font-size: 0.88rem;
  color: var(--c-cream);
  font-weight: 700;
}
.tour-hint__dismiss {
  background: none;
  border: none;
  color: rgba(250,246,241,0.55);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.15s;
}
.tour-hint__dismiss:hover,
.tour-hint__dismiss:focus-visible {
  color: var(--c-cream);
  outline: none;
}
.tour-hint__prompt {
  margin: 0;
  padding: 10px 14px 2px;
  font-size: 0.75rem;
  color: rgba(250,246,241,0.75);       /* cream 75% on accent → ≈5.2:1 ✔ */
}
.tour-hint__question {
  margin: 0;
  padding: 4px 14px 10px;
  font-size: 0.82rem;
  color: var(--c-cream);
  font-weight: 600;
  line-height: 1.4;
}
.tour-hint__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 14px 10px;
}
.tour-hint__choice {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(197,212,189,0.3);
  color: var(--c-cream);               /* 11.5:1 ✔ */
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.tour-hint__choice:hover:not(:disabled) {
  background: rgba(197,212,189,0.18);
  border-color: var(--c-forest-soft);
  transform: translateY(-1px);
}
.tour-hint__choice:focus-visible {
  outline: 2px solid var(--c-accent-soft);
  outline-offset: 2px;
}
.tour-hint__choice:disabled { cursor: default; }
.tour-hint__choice.is-correct {
  background: rgba(33,59,20,0.65);
  border-color: rgba(197,212,189,0.7);
  color: rgba(197,212,189,0.95);       /* forest-soft-ish on dark → legible */
  font-weight: 700;
}
.tour-hint__choice.is-wrong {
  background: rgba(138,58,82,0.35);
  border-color: var(--c-accent-soft);
  color: rgba(250,246,241,0.65);
}
.tour-hint__feedback {
  margin: 0;
  padding: 0 14px 12px;
  font-size: 0.78rem;
  min-height: 0;
  line-height: 1.45;
  transition: color 0.2s;
}
.tour-hint__feedback--correct {
  color: rgba(250,246,241,0.88);       /* cream 88% on accent → ≈6.1:1 ✔ */
  font-weight: 600;
}
.tour-hint__feedback--wrong {
  color: #f4a7b5;                      /* light pink — decorative/muted, not primary text */
}
.tour-stop-indicator.is-answered {
  box-shadow: 0 6px 32px rgba(138,58,82,0.55), 0 0 0 2px rgba(250,246,241,0.6);
}
/* ── Post-answer nav row ─────────────────────────────────────────────── */
.tour-hint__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 14px 14px;
  border-top: 1px solid rgba(197,212,189,0.18);
  margin-top: 4px;
  padding-top: 10px;
}
.tour-hint__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(197,212,189,0.3);
  color: var(--c-cream);               /* 11.5:1 ✔ */
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  line-height: 1;
}
.tour-hint__nav-btn:hover {
  background: rgba(197,212,189,0.2);
  border-color: var(--c-forest-soft);
  transform: translateY(-1px);
}
.tour-hint__nav-btn:focus-visible {
  outline: 2px solid var(--c-accent-soft);
  outline-offset: 2px;
}
.tour-hint__nav-btn--next,
.tour-hint__nav-btn--finish {
  background: var(--c-forest);         /* cream on forest → 11.5:1 ✔ */
  border-color: var(--c-forest);
  margin-left: auto;
}
.tour-hint__nav-btn--next:hover,
.tour-hint__nav-btn--finish:hover {
  background: var(--c-forest-hover);
  border-color: var(--c-forest-hover);
}

@media (max-width: 600px) {
  .tour-ribbon__inner {
    padding: 10px 14px;
    gap: var(--space-3);
  }
  .tour-ribbon__steps { display: none; }
  .tour-ribbon__label { display: none; }
  .tour-stop-indicator {
    top: auto;
    bottom: 72px;
    right: 12px;
    max-width: calc(100vw - 24px);
  }
}

/* ── Tour: quiz-nudge animations ─────────────────────────────────────── */
@keyframes tour-hint-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.tour-stop-indicator.is-shaking {
  animation: tour-hint-shake 0.4s ease;
}

@keyframes tour-choice-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(197,212,189,0.7); }
  50%  { box-shadow: 0 0 0 8px rgba(197,212,189,0); }
  100% { box-shadow: 0 0 0 0   rgba(197,212,189,0); }
}
.tour-hint__choice.is-pulsing {
  animation: tour-choice-pulse 0.6s ease 0s 3;
  border-color: var(--c-forest-soft);
  color: var(--c-cream);
  background: rgba(197,212,189,0.18);
}


/* ==========================================================================
   EVENTS SYSTEM
   Marketing events: listing page, individual RSVP pages, homepage spotlight.
   Designed for seniors and their families — large touch targets, clear type,
   high contrast, accessible throughout.
   ========================================================================== */

/* ── Type badge colors (event type indicator) ──────────────────────── */
.event-card__type-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  background: var(--c-forest-soft);
  color: var(--c-forest);
}
.event-card__type-badge--seminar   { background: #d4e3f5; color: #1a4a80; }
.event-card__type-badge--social    { background: #f5e4d4; color: #7a3b0d; }
.event-card__type-badge--health    { background: #d4f0e3; color: #145c3a; }
.event-card__type-badge--family    { background: #f0d4f5; color: #5c1480; }
.event-card__type-badge--open-house{ background: var(--c-forest-soft); color: var(--c-forest); }


/* ── EVENTS HERO (featured event — WCAG AA compliant split layout) ─── */
/* Cream-2 background with dark ink text. Photo decorative-only on right.
   #2a2623 (ink) on #f3ede3 (cream-2) → contrast 13.8:1 — WCAG AAA ✔   */
.events-hero {
  background: var(--c-cream-2);
  overflow: hidden;
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
}
/* Photo panel — right 38%, purely decorative, aria-hidden in HTML */
.events-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 38%;
  overflow: hidden;
}
.events-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Feathered left edge blends photo into cream-2 background */
.events-hero__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--c-cream-2) 0%, transparent 40%);
  z-index: 1;
  pointer-events: none;
}
/* Gradient variant — used instead of a photo when the only art is the flyer graphic */
.events-hero__photo--gradient {
  background-size: cover;
}
/* Content stays in the left 62% — never touches the photo */
.events-hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--space-9) 0;
  max-width: 660px;
}
.events-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* forest on cream-2 → contrast 11:1 — WCAG AA ✔ */
  color: var(--c-forest);
}
.events-hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  /* ink on cream-2 → contrast 13.8:1 — WCAG AAA ✔ */
  color: var(--c-ink);
  margin: var(--space-3) 0;
  line-height: 1.15;
}
.events-hero .lead {
  /* ink-soft on cream-2 → contrast 8.6:1 — WCAG AA ✔ */
  color: var(--c-ink-soft);
  font-size: 1.15rem;
  margin-bottom: var(--space-5);
}
.events-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.events-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* muted on cream-2 → contrast 5.2:1 — WCAG AA ✔ */
  color: var(--c-muted);
  font-size: 0.95rem;
}
.events-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
/* Hide decorative photo on mobile — full solid cream-2 */
@media (max-width: 900px) {
  .events-hero__photo { display: none; }
  .events-hero { min-height: auto; }
  .events-hero__inner { padding: var(--space-6) var(--space-5); }
}

/* ── Countdown (hero listing page) ────────────────────────────────── */
.events-countdown {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.events-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* forest bg for countdown tiles — cream numbers on forest: 11:1 ✔ */
  background: var(--c-forest);
  border: 1px solid var(--c-forest);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  min-width: 68px;
}
.events-countdown__num {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--c-cream);
  line-height: 1;
  letter-spacing: -0.02em;
}
.events-countdown__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* cream on forest → contrast 11:1 — WCAG AA ✔ */
  color: rgba(250,246,241,0.85);
  margin-top: var(--space-1);
}
.events-countdown__sep {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  /* forest on cream-2 — decorative separator */
  color: var(--c-forest);
  opacity: 0.40;
  margin-top: -8px;
}

/* ── EVENTS GRID (listing page) ────────────────────────────────────── */
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-8);
}
.section-intro {
  color: var(--c-muted);
  font-size: 1.05rem;
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--space-7);
}

/* ── Event Card ─────────────────────────────────────────────────────── */
.event-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--tr), transform var(--tr);
}
.event-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.event-card__img-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 3/2;
}
.event-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.event-card:hover .event-card__img {
  transform: scale(1.04);
}
.event-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.event-card__title {
  font-size: 1.35rem;
  margin: 0 0 var(--space-2);
  line-height: 1.25;
}
.event-card__title a {
  color: var(--c-forest);
  text-decoration: none;
}
.event-card__title a:hover {
  text-decoration: underline;
  color: var(--c-forest-hover);
}
.event-card__subtitle {
  color: var(--c-muted);
  font-size: 0.95rem;
  margin: 0 0 var(--space-4);
  line-height: 1.5;
}
.event-card__meta {
  border-top: 1px solid var(--c-line);
  padding-top: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.event-card__meta-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--c-ink-soft);
}
.event-card__meta-row svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--c-forest);
}
.event-card__meta-row--capacity {
  color: var(--c-accent);
  font-weight: 600;
}
.event-card__highlights {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.event-card__highlights li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.88rem;
  color: var(--c-ink-soft);
}
.event-card__highlights svg {
  color: var(--c-forest);
  flex-shrink: 0;
  margin-top: 2px;
}
.event-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ── EVENTS LOGISTICS 3-col grid ────────────────────────────────────── */
.events-logistics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
  align-items: start;
}
.events-logistics__col h2 {
  font-size: 1.4rem;
  margin-bottom: var(--space-4);
}
.events-logistics__col h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}
.events-logistics__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.events-access-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.events-access-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.95rem;
}
.events-access-list svg {
  flex-shrink: 0;
  color: var(--c-forest);
  margin-top: 2px;
}

/* ── PAST EVENTS GRID ───────────────────────────────────────────────── */
.events-past-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.events-past-card {
  background: var(--c-cream-2);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.events-past-card__type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
}
.events-past-card__title {
  font-size: 0.95rem;
  color: var(--c-ink);
}
.events-past-card__date {
  font-size: 0.85rem;
  color: var(--c-muted);
}
.events-past-card__flyer {
  align-self: flex-start;
  margin-top: var(--space-1);
}


/* ── ABOVE-THE-FOLD RSVP HERO — WCAG AA compliant ───────────────────── */
/* Cream-2 background. Left info col = dark ink text on cream-2 (13.8:1).
   Right form column has event photo behind the card (no text on photo).  */
.ersvp-hero {
  background: var(--c-cream-2);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
/* Photo clipped to right side — feathers into cream-2, no text on top */
.ersvp-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 520px;
  z-index: 0;
}
.ersvp-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Feather: hard cream-2 on left, transparent on right */
.ersvp-hero__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--c-cream-2) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}
/* Gradient variant — used instead of a photo when the only art is the flyer graphic */
.ersvp-hero__photo--gradient {
  background-size: cover;
}
.ersvp-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: var(--space-8);
  align-items: start;
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
  min-height: 100vh;
}

/* ── Info column — cream-2, dark ink text ───────────────────────────── */
.ersvp-hero__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-4);
  position: relative;
  z-index: 2;
}
/* Breadcrumb — dark on cream-2 */
.crumbs--light {
  font-size: 0.82rem;
  /* muted on cream-2 → contrast 5.2:1 — WCAG AA ✔ */
  color: var(--c-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  margin-bottom: var(--space-4);
}
.crumbs--light a { color: var(--c-forest); text-decoration: none; }
.crumbs--light a:hover { text-decoration: underline; }
.crumbs--light span { color: var(--c-muted); opacity: 0.6; }

.ersvp-hero__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* forest on cream-2 → contrast 11:1 — WCAG AA ✔ */
  color: var(--c-forest);
  border: 1px solid rgba(33,59,20,0.35);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: var(--space-4);
  width: fit-content;
}
.ersvp-hero__title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  /* ink on cream-2 → contrast 13.8:1 — WCAG AAA ✔ */
  color: var(--c-ink);
  margin: 0 0 var(--space-3);
  line-height: 1.12;
}
.ersvp-hero__subtitle {
  font-size: 1.1rem;
  /* ink-soft on cream-2 → contrast 8.6:1 — WCAG AA ✔ */
  color: var(--c-ink-soft);
  margin: 0 0 var(--space-5);
  max-width: 500px;
  line-height: 1.6;
}

/* Quick facts row */
.ersvp-hero__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.ersvp-hero__fact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1rem;
  /* ink-soft on cream-2 → contrast 8.6:1 — WCAG AA ✔ */
  color: var(--c-ink-soft);
  font-weight: 500;
}
.ersvp-hero__fact svg { color: var(--c-forest); flex-shrink: 0; }
.ersvp-hero__fact--deadline {
  /* accent on cream-2 → contrast 7.5:1 — WCAG AA ✔ */
  color: var(--c-accent);
  font-weight: 700;
}
.ersvp-hero__fact--deadline svg { color: var(--c-accent); }

/* Highlights */
.ersvp-hero__highlights {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ersvp-hero__highlights li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.95rem;
  /* muted on cream-2 → contrast 5.2:1 — WCAG AA ✔ */
  color: var(--c-ink-soft);
}
.ersvp-hero__highlights svg { color: var(--c-forest); flex-shrink: 0; margin-top: 2px; }

/* Countdown inside the info column — forest tiles for visual pop */
.ersvp-countdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ersvp-countdown__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* muted on cream-2 → contrast 5.2:1 — WCAG AA ✔ */
  color: var(--c-muted);
}
.ersvp-countdown__clock {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ersvp-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Forest tile — cream number on forest: 11:1 ✔ */
  background: var(--c-forest);
  border: 1px solid var(--c-forest);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  min-width: 62px;
}
.ersvp-countdown__unit strong {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--c-cream);
  line-height: 1;
  letter-spacing: -0.01em;
}
.ersvp-countdown__unit span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(250,246,241,0.85);
  margin-top: 4px;
}
.ersvp-countdown__sep {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--c-forest);
  opacity: 0.35;
  margin-bottom: 12px;
}

/* Flyer link — sits below the countdown, fills the leftover space beside the long RSVP form */
.ersvp-hero__flyer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-forest);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-forest);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ersvp-hero__flyer-link svg { flex-shrink: 0; }
.ersvp-hero__flyer-link:hover,
.ersvp-hero__flyer-link:focus-visible {
  background: var(--c-forest);
  color: var(--c-cream);
}

/* Flyer preview — thumbnail of the flyer's original artwork; opens the flyer modal */
.event-flyer-preview {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-white);
  text-decoration: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.event-flyer-preview:hover,
.event-flyer-preview:focus-visible {
  border-color: var(--c-forest);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.event-flyer-preview__thumb {
  flex-shrink: 0;
  width: 112px;
  aspect-ratio: 3/4;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.event-flyer-preview__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-flyer-preview__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.event-flyer-preview__body strong {
  font-size: 0.92rem;
  color: var(--c-ink);
}
.event-flyer-preview__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--c-muted);
}
.event-flyer-preview__hint svg { flex-shrink: 0; color: var(--c-forest); }

/* ── Form column ─────────────────────────────────────────────────────── */
.ersvp-hero__form-col {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.ersvp-form-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,0.28);
  overflow: hidden;
}
.ersvp-form-card__head {
  background: var(--c-forest);
  padding: var(--space-5) var(--space-6);
  border-bottom: 3px solid var(--c-accent);
}
.ersvp-form-card__head .eyebrow { color: var(--c-accent-soft); font-size: 0.72rem; }
.ersvp-form-card__head h2 {
  color: var(--c-cream);
  font-size: 1.5rem;
  margin: var(--space-2) 0 var(--space-2);
}
.ersvp-form-card__meta-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: rgba(250,246,241,0.75);
  margin: 0 0 var(--space-1);
}
.ersvp-form-card__meta-note--deadline {
  color: #f5c842;
}
.ersvp-form-card__meta-note--deadline strong { color: #fff; }

.ersvp-form {
  padding: var(--space-5) var(--space-6);
}
/* Tighten vertical spacing inside the RSVP form for above-fold fit */
.ersvp-form .form-field { margin-bottom: var(--space-3); }
.ersvp-form .form-row { gap: var(--space-3); margin-bottom: 0; }
.ersvp-form label { font-size: 0.88rem; margin-bottom: 4px; }
.ersvp-form input[type="text"],
.ersvp-form input[type="tel"],
.ersvp-form input[type="email"],
.ersvp-form select,
.ersvp-form textarea {
  padding: 9px 12px;
  font-size: 0.95rem;
}
.ersvp-form .form-check { font-size: 0.88rem; }

.ersvp-submit {
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
  gap: var(--space-2);
}
.ersvp-reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 0.78rem;
  color: var(--c-muted);
  margin-top: var(--space-2);
  text-align: center;
}
.ersvp-form-card__phone {
  border-top: 1px solid var(--c-line);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: var(--c-muted);
}
.ersvp-form-card__phone a {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-forest);
  text-decoration: none;
}
.ersvp-form-card__phone a:hover { text-decoration: underline; }

/* ── Below-fold two-column detail layout ───────────────────────────── */
.event-below-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-9);
  align-items: start;
}
.event-below-aside { display: flex; flex-direction: column; }
.event-aside-card {
  background: var(--c-cream-2);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.event-aside-card h3 { font-size: 1.1rem; margin-bottom: var(--space-3); }
.event-aside-card p { font-size: 0.92rem; color: var(--c-muted); margin-bottom: var(--space-3); }
.event-aside-card__phone {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--c-forest);
  text-decoration: none;
  margin-bottom: var(--space-2);
}
.event-aside-card__phone:hover { text-decoration: underline; }
.event-aside-card__hours {
  font-size: 0.82rem !important;
  line-height: 1.6;
}

/* Mobile-only image + CTA — hidden on desktop */
.ersvp-hero__mobile-photo,
.ersvp-hero__mobile-cta { display: none; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .ersvp-hero__grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: var(--space-5);
    padding-bottom: var(--space-6);
  }
  .ersvp-hero__form-col { padding-bottom: var(--space-6); }
  .ersvp-hero { min-height: auto; }
  .ersvp-hero__info { padding-top: 0; }
  /* Hide background photo — text legibility over image is poor at this width */
  .ersvp-hero__photo { display: none; }

  /* Show inline image and register CTA between subtitle and details */
  .ersvp-hero__mobile-photo {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16/9;
    margin: var(--space-5) 0;
  }
  .ersvp-hero__mobile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ersvp-hero__mobile-cta {
    display: inline-flex;
    margin-bottom: var(--space-6);
  }
}
@media (max-width: 600px) {
  .ersvp-hero__grid {
    padding-top: var(--space-4);
    gap: var(--space-5);
  }
}
@media (max-width: 900px) {
  .event-below-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .ersvp-countdown__unit { min-width: 52px; padding: var(--space-2) var(--space-3); }
  .ersvp-countdown__unit strong { font-size: 1.5rem; }
  .ersvp-form { padding: var(--space-4); }
  .ersvp-form-card__head { padding: var(--space-4); }
  /* Match the reduced side padding above — otherwise this bar sits with
     more horizontal inset (var(--space-6)) than the header/form above it. */
  .ersvp-form-card__phone { padding: var(--space-3) var(--space-4); }
}


/* ── EVENT INFOBAR ──────────────────────────────────────────────────── */
.event-infobar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  background: var(--c-cream-2);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.event-infobar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.event-infobar__item svg {
  color: var(--c-forest);
  flex-shrink: 0;
  margin-top: 2px;
}
.event-infobar__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  margin-bottom: 2px;
}
.event-infobar__value {
  display: block;
  font-size: 0.95rem;
  color: var(--c-ink);
  line-height: 1.35;
}


/* ── EVENT DESCRIPTION body copy ────────────────────────────────────── */
.event-description {
  margin-bottom: var(--space-7);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--c-ink-soft);
}
.event-description p { margin-bottom: var(--space-4); }
.event-description ul {
  padding-left: var(--space-5);
  margin-bottom: var(--space-4);
}
.event-description li {
  margin-bottom: var(--space-2);
}
.event-description strong { color: var(--c-ink); }


/* ── HIGHLIGHTS BOX ─────────────────────────────────────────────────── */
.event-highlights-box {
  background: var(--c-cream-2);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.event-highlights-box h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}
.event-highlights-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.event-highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.95rem;
}
.event-highlights-list svg {
  color: var(--c-forest);
  flex-shrink: 0;
  margin-top: 3px;
}


/* ── ADD TO CALENDAR BOX ────────────────────────────────────────────── */
.event-calendar-box {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);
  background: var(--c-white);
}
.event-calendar-box h2 {
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.event-calendar-box p {
  color: var(--c-muted);
  font-size: 0.92rem;
  margin-bottom: var(--space-4);
}
.event-calendar-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.event-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--tr), color var(--tr), background var(--tr);
  min-height: 44px;  /* accessible touch target */
}
.event-cal-btn:hover {
  border-color: var(--c-forest);
  color: var(--c-forest);
  background: rgba(33,59,20,0.04);
}


/* ── DIRECTIONS BOX ─────────────────────────────────────────────────── */
.event-directions-box {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.event-directions-box h3 {
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.event-directions-box address {
  font-style: normal;
  margin-bottom: var(--space-4);
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.event-directions-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.event-directions-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.88rem;
  color: var(--c-ink-soft);
}
.event-directions-list svg {
  color: var(--c-forest);
  flex-shrink: 0;
  margin-top: 2px;
}


/* ── EVENT FORM CARD (legacy — now replaced by ersvp-* above) ───────── */
.event-form-wrap {
  /* kept for any existing references; new layout uses .ersvp-form-card */
}
.event-form-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.event-form-card__head {
  background: var(--c-forest);
  color: var(--c-cream);
  padding: var(--space-6) var(--space-6) var(--space-5);
}
.event-form-card__head .eyebrow { color: var(--c-accent-soft); }
.event-form-card__head h2 {
  color: var(--c-cream);
  font-size: 1.6rem;
  margin: var(--space-2) 0 var(--space-3);
}
.event-form-card__head p {
  color: rgba(250,246,241,0.80);
  font-size: 0.9rem;
  margin: 0;
}
.event-form-card__head a { color: var(--c-cream); }
.event-form-card__capacity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--c-accent-soft);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.event-form-card > .form {
  padding: var(--space-6);
}
.event-form-card__reassurance {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--c-muted);
  margin-top: var(--space-3);
  text-align: center;
  justify-content: center;
}
.event-form-card__phone-alt {
  border-top: 1px solid var(--c-line);
  padding: var(--space-5) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.event-form-card__phone-alt p {
  font-size: 0.88rem;
  color: var(--c-muted);
  margin: 0;
}
.event-form-card__phone-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.3rem;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--c-forest);
  text-decoration: none;
}
.event-form-card__phone-link:hover { text-decoration: underline; }
.event-form-card__phone-alt span {
  font-size: 0.78rem;
  color: var(--c-muted);
}

/* ── Form section label ─────────────────────────────────────────────── */
.form-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  margin-top: var(--space-5);
}
.form-section-label:first-child { margin-top: 0; }

/* Inline radio layout for guest count */
.form-check-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Guest name fields slide in */
.event-guest-field[hidden] {
  display: none;
}
.event-guest-field {
  animation: guestFieldIn 0.2s ease;
}
@keyframes guestFieldIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RSVP THANKS PAGE ───────────────────────────────────────────────── */
/* Shared confirmation / thank-you page styles (used by all form thanks pages) */
.rsvp-thanks__icon,
.thanks__icon {
  display: flex;
  justify-content: center;
}
.rsvp-thanks__reminders,
.thanks__reminders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  max-width: 760px;
  margin: var(--space-7) auto 0;
  text-align: left;
}
.rsvp-thanks__reminder,
.thanks__reminder {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.rsvp-thanks__reminder svg,
.thanks__reminder svg {
  color: var(--c-forest);
  flex-shrink: 0;
  margin-top: 3px;
}
.rsvp-thanks__reminder div,
.thanks__reminder div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.92rem;
}
.rsvp-thanks__reminder strong,
.thanks__reminder strong { color: var(--c-ink); }
.rsvp-thanks__reminder span,
.thanks__reminder span { color: var(--c-muted); }
.rsvp-thanks__reminder a,
.thanks__reminder a { color: var(--c-forest); }

/* ── Entertainment type badge ───────────────────────────────────────── */
.event-card__type-badge--entertainment { background: #fde8c8; color: #7a4200; }

/* ── RSVP deadline row on card ──────────────────────────────────────── */
.event-card__meta-row--deadline {
  color: var(--c-accent);
  font-weight: 600;
}

/* ── Card actions row (RSVP + flyer) ────────────────────────────────── */
.event-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  flex-wrap: wrap;
}
.event-card__flyer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.82rem;
}

/* ── Infobar deadline item ──────────────────────────────────────────── */
.event-infobar__item--deadline .event-infobar__value {
  color: var(--c-accent);
}
.event-infobar__item--deadline svg {
  color: var(--c-accent);
}

/* ── Form card deadline notice ──────────────────────────────────────── */
.event-form-card__deadline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.88rem;
  color: #f5c842;
  margin-bottom: var(--space-3);
}
.event-form-card__deadline strong { color: #fff; }

/* btn--lg helper */
.btn--lg {
  padding: var(--space-4) var(--space-7);
  font-size: 1.05rem;
}
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: 0.85rem;
}

/* ── Homepage events spotlight strip ────────────────────────────────── */
.home-events-strip {
  background: var(--c-forest);
  padding: var(--space-6) 0;
}
.home-events-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.home-events-strip__eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-accent-soft);
  white-space: nowrap;
}
.home-events-strip__event {
  flex: 1;
  min-width: 0;
}
.home-events-strip__title {
  color: var(--c-cream);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-events-strip__meta {
  color: rgba(250,246,241,0.70);
  font-size: 0.85rem;
}
.home-events-strip__cta { white-space: nowrap; }

@media (max-width: 760px) {
  .events-hero__inner { padding: var(--space-5) var(--space-5); }
  .events-grid { grid-template-columns: 1fr; }
  .event-countdown-banner__inner { gap: var(--space-3); }
  .event-countdown-banner__unit strong { font-size: 1.3rem; }
  .event-layout { gap: var(--space-6); }
  .event-infobar { grid-template-columns: 1fr 1fr; }
  .home-events-strip__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Homepage Upcoming Events Section ──────────────────────────────── */
.home-events__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.home-events__header h2 {
  margin: var(--space-2) 0 0;
}
.home-events__all {
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.home-events__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-6);
}
.home-event-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--tr), transform var(--tr);
}
.home-event-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.home-event-card__img-wrap {
  aspect-ratio: 16/7;
  overflow: hidden;
}
.home-event-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.home-event-card:hover .home-event-card__img {
  transform: scale(1.04);
}
.home-event-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.home-event-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.home-event-card__date {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-forest);
  letter-spacing: 0.03em;
}
.home-event-card__deadline {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-accent);
  background: rgba(138,58,82,0.08);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}
.home-event-card__title {
  font-size: 1.35rem;
  color: var(--c-ink);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}
.home-event-card__subtitle {
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  margin: 0 0 var(--space-4);
  line-height: 1.5;
}
.home-event-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.home-event-card__facts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.875rem;
  color: var(--c-muted);
}
.home-event-card__facts svg {
  flex-shrink: 0;
  color: var(--c-forest);
}
.home-event-card__cta {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 680px) {
  .home-events__header { flex-direction: column; align-items: flex-start; }
  .home-events__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   RESOURCES
   Listing (/resources/), category archives (/resources/<category>/), and
   article detail (/resources/<category>/<slug>/). Uses the site tokens so it
   reads as a native part of the theme. Search is handled client-side in
   main.js (see "Resources search"); category filtering is real page links.
   ========================================================================== */

/* ── Shared: tag + meta ──────────────────────────────────────────────── */
.blog-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-forest);
  background: var(--c-forest-soft);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
}
a.blog-tag:hover { background: var(--c-forest); color: var(--c-white); }
.blog-tag--on-image {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--c-muted);
}
.blog-meta__author { font-weight: 600; color: var(--c-ink-soft); }
.blog-meta__role { font-weight: 400; color: var(--c-muted); }
.blog-meta__dot { color: var(--c-line); }
.blog-meta--hero { font-size: 0.92rem; margin-top: var(--space-4); }

/* ── Listing hero ────────────────────────────────────────────────────── */
.blog-hero {
  background: var(--c-forest);
  color: var(--c-cream);
  padding: var(--space-9) 0 var(--space-8);
}
.blog-hero__inner { max-width: 720px; }
.blog-hero .crumbs,
.blog-hero .crumbs a { color: rgba(250, 246, 241, 0.7); }
.blog-hero .eyebrow { color: var(--c-accent-soft); }
.blog-hero h1 { color: var(--c-cream); font-size: clamp(2rem, 5vw, 3rem); margin: var(--space-2) 0 var(--space-4); }
.blog-hero .lead { color: rgba(250, 246, 241, 0.88); font-size: 1.15rem; }

/* ── Category archive hero — shorter, since there's just a name + one-liner ── */
.blog-hero--compact { padding: var(--space-6) 0 var(--space-5); }
.blog-hero--compact h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: var(--space-2) 0 var(--space-3); }
.blog-hero--compact .lead { font-size: 1.05rem; }

/* ── Featured post ───────────────────────────────────────────────────── */
.blog-featured-section .eyebrow { display: block; margin-bottom: var(--space-4); }
.blog-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--tr), transform var(--tr);
}
.blog-featured:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.blog-featured__media { overflow: hidden; min-height: 280px; }
.blog-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.blog-featured:hover .blog-featured__media img { transform: scale(1.04); }
.blog-featured__body { padding: var(--space-7) var(--space-7) var(--space-7) 0; display: flex; flex-direction: column; gap: var(--space-3); align-self: center; }
.blog-featured__body h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 0; }
.blog-featured__excerpt { color: var(--c-ink-soft); font-size: 1.05rem; }
.blog-featured__cta { font-weight: 600; color: var(--c-forest); margin-top: var(--space-2); }

/* ── Controls: search + chips ────────────────────────────────────────── */
.blog-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin: var(--space-6) 0 var(--space-5);
}
.blog-search {
  position: relative;
  flex: 1 1 280px;
  max-width: 380px;
}
.blog-search__icon {
  position: absolute;
  left: 0.9rem; top: 50%; transform: translateY(-50%);
  color: var(--c-muted);
  display: grid; place-items: center;
  pointer-events: none;
}
.blog-search__input {
  width: 100%;
  padding: 0.8rem 2.4rem 0.8rem 2.6rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.blog-search__input:focus {
  outline: none;
  border-color: var(--c-forest);
  box-shadow: 0 0 0 3px rgba(33, 59, 20, 0.18);
}
.blog-search__clear {
  position: absolute;
  right: 0.7rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--c-cream-2); color: var(--c-ink-soft);
  cursor: pointer;
}
.blog-search__clear:hover { background: var(--c-sand); }

.blog-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.blog-chip {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all var(--tr);
}
.blog-chip:hover { border-color: var(--c-forest); color: var(--c-forest); }
.blog-chip.is-active {
  background: var(--c-forest);
  border-color: var(--c-forest);
  color: var(--c-white);
}
.blog-chip:focus-visible { outline: 3px solid var(--c-forest); outline-offset: 2px; }

.blog-result-count { font-size: 0.85rem; color: var(--c-muted); margin: 0 0 var(--space-4); min-height: 1.2em; }

/* ── Post grid + cards ───────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--tr), transform var(--tr);
}
.blog-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.blog-card[hidden] { display: none; }
.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.blog-card__title { font-size: 1.25rem; line-height: 1.25; margin: 0; }
.blog-card__title a { color: var(--c-ink); text-decoration: none; }
.blog-card__title a:hover { color: var(--c-forest); }
.blog-card__excerpt { color: var(--c-ink-soft); font-size: 0.95rem; flex: 1; }
.blog-card .blog-meta { margin-top: auto; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.blog-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--c-ink-soft);
}
.blog-empty p { margin: 0 0 var(--space-3); }

/* ── Post detail ─────────────────────────────────────────────────────── */
.blogpost-hero { background: var(--c-cream-2); padding: var(--space-8) 0 var(--space-6); }
/* Hero sits on a light tan bg, so override the default cream crumbs (invisible here) with dark ink. */
.blogpost-hero .crumbs { color: var(--c-ink-soft); opacity: 1; }
.blogpost-hero .crumbs a { color: var(--c-forest); }
.blogpost-hero .crumbs a:hover { color: var(--c-forest); text-decoration: underline; text-underline-offset: 3px; }
.blogpost-hero .crumbs span { color: var(--c-muted); opacity: 0.6; }
.blogpost-hero__inner { max-width: 760px; }
.blogpost-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.15; margin: var(--space-3) 0 var(--space-4); }
.blogpost-hero__excerpt { font-size: 1.2rem; color: var(--c-ink-soft); line-height: 1.5; }
.blogpost-hero .blog-tag { margin-bottom: var(--space-2); }

.blogpost-figure { margin: var(--space-4) auto var(--space-7); }
.blogpost-figure__frame {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.blogpost-figure img {
  width: 100%; height: auto; display: block;
  max-height: 560px; object-fit: cover;
}

.blogpost-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-7);
  align-items: start;
  max-width: 820px;
  padding-bottom: var(--space-8);
}
.blogpost-body { min-width: 0; }
.blogpost-body h2 { font-size: 1.6rem; margin-top: var(--space-7); }
.blogpost-body p, .blogpost-body li { font-size: 1.08rem; line-height: 1.75; color: var(--c-ink); }

.blogpost-author {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-line);
}
.blogpost-author__avatar {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-forest); color: var(--c-cream);
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600;
}
.blogpost-author strong { display: block; }
.blogpost-author__role { font-size: 0.85rem; color: var(--c-muted); }
.blogpost-author p { font-size: 0.95rem; color: var(--c-ink-soft); margin: var(--space-2) 0 0; }

/* Share rail — sticky on desktop, inline row on mobile */
.blogpost-share {
  position: sticky; top: var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.blogpost-share__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); }
.blogpost-share__btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1.5px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-white); color: var(--c-ink-soft);
  cursor: pointer;
  transition: all var(--tr);
  text-decoration: none;
}
.blogpost-share__btn:hover { border-color: var(--c-forest); color: var(--c-forest); transform: translateY(-2px); }
.blogpost-share__btn.is-copied { border-color: var(--c-forest); color: var(--c-forest); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured__media { min-height: 220px; aspect-ratio: 16 / 9; }
  .blog-featured__body { padding: var(--space-6); align-self: stretch; }
  .blogpost-layout { grid-template-columns: 1fr; }
  .blogpost-share {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--c-line);
  }
}
@media (max-width: 560px) {
  .blog-controls { flex-direction: column; align-items: stretch; }
  .blog-search { max-width: none; }
  .blog-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch; }
  .blog-chip { white-space: nowrap; }
}