/* ============================================================
   OAK HILL ASSISTED LIVING COMMUNITY — Luxury Design System
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --green-950: #0E1812;
  --green-900: #142019;
  --green-850: #182620;
  --green-800: #1E3226;
  --green-700: #2A4433;
  --moss: #5A7060;
  --sage: #8FA392;

  --cream: #F5F0E6;
  --cream-2: #EDE4D2;
  --paper: #FAF7F0;
  --white: #FFFFFF;

  --gold: #AE8C55;
  --gold-strong: #97753E;
  --gold-light: #CBAE7E;
  --gold-pale: #E7DAB9;

  --ink: #1B211C;
  --ink-soft: #4E574F;
  --ink-faint: #79817A;

  --hairline: rgba(27, 33, 28, 0.14);
  --hairline-dark: rgba(245, 240, 230, 0.16);

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Jost", "Segoe UI", system-ui, sans-serif;

  --fs-hero: clamp(2.75rem, 6.4vw, 5.5rem);
  --fs-d1: clamp(2.35rem, 4.6vw, 3.9rem);
  --fs-d2: clamp(1.85rem, 3.2vw, 2.7rem);
  --fs-d3: clamp(1.4rem, 2.1vw, 1.7rem);

  --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);
  --section-pad: clamp(5.5rem, 10vw, 9.5rem);
  --header-h: 84px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* clip where supported: hidden makes body a scroll container, and then
     position: sticky (the About story photo) never sticks */
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--gold-pale); color: var(--green-900); }

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

/* ---------- Typography ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: inherit;
}

.hero-title { font-size: var(--fs-hero); font-weight: 500; }
.display-1 { font-size: var(--fs-d1); }
.display-2 { font-size: var(--fs-d2); }
.display-3 { font-size: var(--fs-d3); line-height: 1.25; }

.display em, .hero-title em, h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.section--dark .display em,
.section--dark h2 em { color: var(--gold-light); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-strong);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.section--dark .eyebrow { color: var(--gold-light); }


.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
}
.section--dark .lead { color: rgba(245, 240, 230, 0.78); }

.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }

.drop-cap::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 4.4em;
  float: left;
  line-height: 0.78;
  padding: 0.08em 0.14em 0 0;
  color: var(--gold-strong);
}

/* ---------- Layout ---------- */
.container { width: min(1240px, 92vw); margin-inline: auto; }
.container--wide { width: min(1400px, 94vw); margin-inline: auto; }
.container--narrow { width: min(760px, 92vw); margin-inline: auto; }

.section { padding-block: var(--section-pad); position: relative; }
.section--dark {
  background: var(--green-900);
  color: var(--cream);
}
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--tight { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

/* grain texture on dark surfaces */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.section-head { max-width: 720px; margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .display-2 + p,
.section-head .display-1 + p { margin-top: 1.25rem; }

.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.split--offset { align-items: start; }
/* let grid children shrink below their content's natural width —
   a nowrap button must never blow out the column */
.split > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2vw, 2rem); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); }

/* ---------- Ornaments ---------- */
.divider-leaf {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: clamp(2.5rem, 4vw, 4rem) auto;
  max-width: 420px;
}
.divider-leaf::before, .divider-leaf::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.section--dark .divider-leaf::before,
.section--dark .divider-leaf::after { background: var(--hairline-dark); }
.divider-leaf svg { width: 22px; height: 22px; stroke: var(--gold); flex: none; }

.icon {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  overflow: hidden;
  transition: color 0.45s var(--ease-luxe), border-color 0.45s var(--ease-luxe), background-color 0.45s var(--ease-luxe);
  isolation: isolate;
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s var(--ease-luxe);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }

.btn-gold { background: var(--gold); color: var(--green-950); border-color: var(--gold); }
.btn-gold::before { background: var(--cream); }
.btn-gold:hover { color: var(--green-950); border-color: var(--cream); }

.btn-dark { background: var(--green-900); color: var(--cream); border-color: var(--green-900); }
.btn-dark::before { background: var(--gold); }
.btn-dark:hover { color: var(--green-950); border-color: var(--gold); }

.btn-ghost { border-color: rgba(245, 240, 230, 0.45); color: var(--cream); }
.btn-ghost::before { background: var(--cream); }
.btn-ghost:hover { color: var(--green-950); border-color: var(--cream); }

.btn-ghost-dark { border-color: rgba(27, 33, 28, 0.35); color: var(--ink); }
.btn-ghost-dark::before { background: var(--green-900); }
.btn-ghost-dark:hover { color: var(--cream); border-color: var(--green-900); }

.btn-sm { padding: 0.78rem 1.5rem; font-size: 0.7rem; }
.btn-lg { padding: 1.25rem 2.75rem; }

.btn .arrow { width: 15px; height: 15px; stroke-width: 1.6; transition: transform 0.45s var(--ease-luxe); }
.btn:hover .arrow { transform: translateX(5px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-strong);
  padding-bottom: 0.35rem;
  position: relative;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  opacity: 0.5;
  transition: transform 0.5s var(--ease-luxe), opacity 0.5s;
}
.text-link:hover::after { transform: scaleX(1); opacity: 1; }
.text-link .arrow { width: 14px; height: 14px; transition: transform 0.45s var(--ease-luxe); }
.text-link:hover .arrow { transform: translateX(4px); }
.section--dark .text-link { color: var(--gold-light); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 50;
  transition: background-color 0.5s var(--ease-luxe), box-shadow 0.5s, border-color 0.5s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(14, 24, 18, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-dark);
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.site-header.scrolled .header-inner { height: 70px; }
.header-inner { transition: height 0.5s var(--ease-luxe); }

.brand { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--cream); }
.brand svg { width: 34px; height: 34px; stroke: var(--gold-light); flex: none; }
.brand-text {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.brand-sub {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* The wordmark ships as artwork, sized by height so the file's own aspect
   ratio governs. The drawn acorn lockup stays in the markup as a fallback:
   main.js reveals it if the logo file is missing, so the header and footer
   can never empty out. */
.brand-mark {
  display: block;
  height: clamp(46px, 4.4vw, 64px);
  width: auto;
  flex: none;
  /* When the header squeezes the brand (max-width: 100% on img), scale the
     artwork down proportionally instead of distorting it. */
  object-fit: contain;
  object-position: left center;
  transition: height 0.5s var(--ease-luxe);
}
.brand-lockup { display: none; align-items: center; gap: 0.8rem; }
.brand--fallback .brand-mark { display: none; }
.brand--fallback .brand-lockup { display: inline-flex; }
/* The cream mark reads on the dark green chrome; the green mark takes over
   wherever the brand sits on cream or white. */
.brand--on-light .brand-mark { content: url("../images/logo-oak-hill-green.png"); }
.site-header.scrolled .brand-mark { height: 50px; }
.footer-brand .brand-mark { height: 92px; }

.primary-nav { display: flex; flex-wrap: nowrap; gap: clamp(1rem, 1.9vw, 2.4rem); }
.primary-nav a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.85);
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.35s;
  /* each label reads as one line — flex would otherwise shrink the wider
     items ("Services & Amenities", "Find Your Fit") and break them in two */
  white-space: nowrap;
  flex: none;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-luxe);
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--cream); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions { display: flex; align-items: center; gap: 1.4rem; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--cream);
  transition: color 0.35s;
  white-space: nowrap;
  flex: none;
}
.header-phone svg { width: 16px; height: 16px; stroke: var(--gold-light); }
.header-phone:hover { color: var(--gold-light); }

/* Burger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  align-items: center;
  z-index: 90;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--cream);
  transition: transform 0.45s var(--ease-luxe), opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

/* ---------- Mobile / full nav overlay ---------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--green-950);
  color: var(--cream);
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--ease-luxe), visibility 0s 0.5s;
  overflow-y: auto;
}
.nav-overlay.open { visibility: visible; opacity: 1; transition: opacity 0.5s var(--ease-luxe); }
.nav-overlay-inner {
  width: min(1100px, 90vw);
  margin: auto;
  padding: 7rem 0 4rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
}
.nav-overlay-main a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--cream);
  transition: color 0.35s, transform 0.45s var(--ease-luxe);
}
.nav-overlay-main a:hover { color: var(--gold-light); transform: translateX(10px); }
.nav-overlay.open .stagger-in { opacity: 0; transform: translateY(26px); animation: riseIn 0.7s var(--ease-luxe) forwards; }
.nav-overlay-aside h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.2rem;
}
.nav-overlay-aside a {
  display: block;
  padding: 0.34rem 0;
  color: rgba(245, 240, 230, 0.8);
  transition: color 0.3s;
}
.nav-overlay-aside a:hover { color: var(--gold-light); }
.nav-overlay-aside .nav-contact { margin-top: 2.4rem; font-size: 0.95rem; line-height: 1.9; color: rgba(245, 240, 230, 0.7); }
.nav-overlay-aside .nav-contact a { display: inline; color: var(--cream); }

@keyframes riseIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  overflow: hidden;
  background: var(--green-950);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 18s var(--ease-luxe) forwards;
  transform-origin: center;
}
@keyframes kenburns {
  from { transform: scale(1.14); }
  to { transform: scale(1.02); }
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14,24,18,0.55) 0%, rgba(14,24,18,0.18) 35%, rgba(14,24,18,0.82) 100%),
    linear-gradient(100deg, rgba(14,24,18,0.74) 0%, rgba(14,24,18,0.34) 42%, rgba(14,24,18,0.02) 72%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(7rem, 17.5vh, 12.5rem);
  padding-top: calc(var(--header-h) + 3rem);
  width: min(1240px, 92vw);
  margin-inline: auto;
}
/* Small wide-tracked caps over sunlit foliage need help: the light gold, a
   little more weight, and a shadow that travels with the text so the line
   holds up wherever the photograph happens to be bright. */
.hero .eyebrow,
.page-hero .eyebrow {
  color: var(--gold-light);
  font-weight: 600;
  text-shadow:
    0 1px 2px rgba(14, 24, 18, 0.85),
    0 2px 10px rgba(14, 24, 18, 0.9),
    0 0 30px rgba(14, 24, 18, 0.75);
}
.hero-title { max-width: 15ch; }
.hero-sub {
  margin-top: 1.8rem;
  max-width: 52ch;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 300;
  color: rgba(245, 240, 230, 0.85);
}
.hero-actions { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* line-mask reveal for hero title */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.line-mask > span {
  display: block;
  transform: translateY(112%);
  animation: lineUp 1.1s var(--ease-luxe) forwards;
  animation-delay: var(--d, 0.1s);
}
@keyframes lineUp { to { transform: translateY(0); } }

.fade-up {
  opacity: 0;
  transform: translateY(26px);
  animation: riseIn 1s var(--ease-luxe) forwards;
  animation-delay: var(--d, 0.2s);
}

.hero-scroll {
  position: absolute;
  bottom: 2.4rem;
  right: clamp(1.5rem, 4vw, 4rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  color: rgba(245, 240, 230, 0.7);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, var(--gold-light), transparent);
  animation: scrollHint 2.2s var(--ease-luxe) infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative;
  min-height: clamp(420px, 62vh, 620px);
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  background: var(--green-950);
  overflow: hidden;
}
.page-hero .hero-media img { animation: kenburns 14s var(--ease-luxe) forwards; }
.page-hero .hero-content { padding-bottom: clamp(3rem, 6vh, 4.5rem); }
.page-hero-title { font-size: var(--fs-d1); max-width: 18ch; }

.breadcrumb {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.65);
  margin-bottom: 1.3rem;
}
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb span[aria-hidden] { opacity: 0.5; }

/* ---------- Media frames ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--green-800), var(--green-950));
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-luxe);
}
.media:hover img { transform: scale(1.045); }
.media--frame::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(245, 240, 230, 0.4);
  pointer-events: none;
}
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--square { aspect-ratio: 1; }

.media.media-fallback img { display: none; }
.media.media-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(174, 140, 85, 0.35), transparent 55%),
    linear-gradient(150deg, var(--green-700), var(--green-950));
}

.media-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(14, 24, 18, 0.72);
  backdrop-filter: blur(8px);
  color: var(--cream);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
}

.media-offset { position: relative; }
.media-offset::before {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  border: 1px solid var(--gold);
  opacity: 0.55;
  pointer-events: none;
  transition: inset 0.7s var(--ease-luxe);
}
.media-offset:hover::before { inset: 14px -14px -14px 14px; }

/* ---------- Stats band ---------- */
.stats-band { border-block: 1px solid var(--hairline-dark); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: clamp(2.4rem, 4vw, 3.6rem) 1.5rem;
  text-align: center;
  border-right: 1px solid var(--hairline-dark);
}
.stat:last-child { border-right: 0; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 500;
  /* lining figures: Cormorant's default old-style 1 reads as a capital I */
  font-variant-numeric: lining-nums;
  color: var(--gold-light);
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.1em;
}
.stat-number .suffix { font-size: 0.55em; }
.stat-label {
  margin-top: 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.65);
}
/* one plain-language line under each figure saying why it matters */
.stat-note {
  max-width: 24ch;
  margin: 0.75rem auto 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(245, 240, 230, 0.55);
}

/* ---------- Numbered editorial list ---------- */
.numbered-list { border-top: 1px solid var(--hairline); }
.section--dark .numbered-list { border-color: var(--hairline-dark); }
.numbered-item {
  display: grid;
  grid-template-columns: 110px 1fr 1.4fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3vw, 2.6rem) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.section--dark .numbered-item { border-color: var(--hairline-dark); }
.numbered-item .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold-strong);
}
.section--dark .numbered-item .num { color: var(--gold-light); }
.numbered-item h3 { font-size: var(--fs-d3); }
.numbered-item p { color: var(--ink-soft); }
.section--dark .numbered-item p { color: rgba(245, 240, 230, 0.72); }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: clamp(2rem, 3vw, 2.8rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform 0.6s var(--ease-luxe), box-shadow 0.6s var(--ease-luxe), border-color 0.6s;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -30px rgba(14, 24, 18, 0.35);
  border-color: rgba(174, 140, 85, 0.5);
}
.card .icon { width: 34px; height: 34px; stroke: var(--gold-strong); stroke-width: 1.2; }
/* lining figures: Cormorant's old-style "1997" reads "ı997" */
.card h3 { font-size: 1.45rem; font-variant-numeric: lining-nums; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }
.card .text-link { margin-top: auto; }

.card--dark { background: var(--green-850); border-color: var(--hairline-dark); color: var(--cream); }
.card--dark p { color: rgba(245, 240, 230, 0.72); }
.card--dark .icon { stroke: var(--gold-light); }

.card-media { margin: calc(clamp(2rem, 3vw, 2.8rem) * -1); margin-bottom: 0.6rem; }

/* Feature card w/ image on top */
.feature-card { border: 1px solid var(--hairline); background: var(--white); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.6s var(--ease-luxe), box-shadow 0.6s var(--ease-luxe); }
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(14,24,18,0.35); }
.feature-card .media { aspect-ratio: 4 / 3; }
.feature-card-body { padding: clamp(1.6rem, 2.5vw, 2.2rem); display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.feature-card-body h3 { font-size: 1.5rem; }
.feature-card-body p { color: var(--ink-soft); font-size: 0.97rem; }
.feature-card-body .text-link { margin-top: auto; padding-top: 0.8rem; }

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 1.05rem; }
.checklist li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  color: var(--ink-soft);
}
.section--dark .checklist li { color: rgba(245, 240, 230, 0.78); }
.checklist .icon {
  width: 20px; height: 20px;
  margin-top: 0.35rem;
  flex: none;
  stroke: var(--gold-strong);
}
.section--dark .checklist .icon { stroke: var(--gold-light); }
.checklist strong { color: var(--ink); font-weight: 500; }
.section--dark .checklist strong { color: var(--cream); }
.checklist--2col { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--hairline-dark);
  padding-block: 1.3rem;
  background: var(--green-950);
  color: var(--cream);
  position: relative;
}
.marquee-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: rgba(245, 240, 230, 0.8);
  white-space: nowrap;
}
.marquee-track span::after {
  content: "✦";
  font-size: 0.65rem;
  color: var(--gold);
  font-style: normal;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Testimonials ---------- */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.85s var(--ease-luxe); }
.carousel-slide { flex: 0 0 100%; padding-inline: 2px; }
blockquote.quote {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--gold);
  display: block;
  margin-bottom: 1.6rem;
}
/* sized for full-length family letters, which run to about 50 words */
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--cream);
}
.quote footer {
  margin-top: 2rem;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.carousel-nav {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.carousel-btn {
  width: 52px; height: 52px;
  border: 1px solid var(--hairline-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.carousel-btn:hover { background: var(--gold); color: var(--green-950); border-color: var(--gold); }
.carousel-btn .icon { width: 18px; height: 18px; }
.carousel-dots { display: flex; gap: 0.7rem; }
.carousel-dot {
  width: 26px; height: 2px;
  background: rgba(245, 240, 230, 0.25);
  transition: background-color 0.4s, width 0.4s var(--ease-luxe);
}
.carousel-dot.active { background: var(--gold); width: 44px; }

/* Kind Words: heading and award beside the letters, in one short row */
.kind-words {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.kind-words .carousel {
  padding-left: clamp(2.5rem, 5vw, 5rem);
  border-left: 1px solid var(--hairline-dark);
}
.kind-words blockquote.quote { max-width: none; text-align: left; }
.kind-words .quote-mark { font-size: 4.2rem; margin-bottom: 0.7rem; }
.kind-words .quote p { text-wrap: pretty; }
.kind-words .quote footer { margin-top: 1.4rem; }
.kind-words .carousel-nav { justify-content: flex-start; gap: 1.5rem; margin-top: 1.6rem; }
/* with room to spare, the arrows share the attribution's row */
@media (min-width: 1081px) {
  .kind-words .carousel-slide { display: flex; }
  .kind-words blockquote.quote { flex: 1; display: flex; flex-direction: column; }
  .kind-words .quote footer {
    margin-top: auto;
    padding-top: 1.4rem;
    min-height: calc(52px + 1.4rem);
    display: flex;
    align-items: center;
  }
  .kind-words .carousel-nav { position: absolute; right: 0; bottom: 0; margin: 0; }
}
@media (max-width: 900px) {
  .kind-words { grid-template-columns: 1fr; }
  .kind-words .carousel {
    padding: 2.5rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--hairline-dark);
  }
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background: var(--green-950);
  color: var(--cream);
  text-align: center;
  overflow: hidden;
}
.cta-band .display-1 { max-width: 18ch; margin-inline: auto; }
.cta-band .lead { max-width: 56ch; margin: 1.6rem auto 0; color: rgba(245, 240, 230, 0.78); }
.cta-band .hero-actions { justify-content: center; margin-top: 2.8rem; }
.cta-band-leaf {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 340px;
  height: 340px;
  opacity: 0.07;
  stroke: var(--gold-light);
  pointer-events: none;
}
.cta-phone {
  margin-top: 2.2rem;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: rgba(245, 240, 230, 0.7);
}
.cta-phone a {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  margin-left: 0.6rem;
  border-bottom: 1px solid rgba(203, 174, 126, 0.4);
  transition: border-color 0.35s;
}
.cta-phone a:hover { border-color: var(--gold-light); }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-950); color: rgba(245, 240, 230, 0.75); position: relative; }
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  padding-block: clamp(4rem, 7vw, 6rem) clamp(3rem, 5vw, 4rem);
  border-bottom: 1px solid var(--hairline-dark);
  align-items: end;
}
.footer-top .display-2 { color: var(--cream); max-width: 16ch; }
.newsletter-form { display: flex; border-bottom: 1px solid rgba(245, 240, 230, 0.35); }
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 1rem 0;
  color: var(--cream);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.newsletter-form input::placeholder { color: rgba(245, 240, 230, 0.45); }
.newsletter-form input:focus { outline: none; }
.newsletter-form button {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
  padding: 0 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.35s;
}
.newsletter-form button:hover { color: var(--cream); }
.newsletter-note { margin-top: 0.9rem; font-size: 0.78rem; color: rgba(245, 240, 230, 0.45); }

.footer-mid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.footer-brand .brand { margin-bottom: 1.4rem; }
.footer-brand p { font-size: 0.92rem; max-width: 34ch; color: rgba(245, 240, 230, 0.6); }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.3rem;
}
.footer-col a, .footer-col address {
  display: block;
  font-style: normal;
  padding: 0.3rem 0;
  font-size: 0.94rem;
  color: rgba(245, 240, 230, 0.72);
  transition: color 0.3s, transform 0.3s var(--ease-luxe);
}
.footer-col a:hover { color: var(--gold-light); transform: translateX(4px); }

.footer-bottom {
  border-top: 1px solid var(--hairline-dark);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: rgba(245, 240, 230, 0.5);
}
.footer-bottom .social { display: flex; gap: 1.2rem; }
.footer-bottom .social a { color: rgba(245, 240, 230, 0.6); transition: color 0.3s; }
.footer-bottom .social a:hover { color: var(--gold-light); }
.footer-bottom .social .icon { width: 18px; height: 18px; }
.footer-links { display: flex; gap: 1.6rem; }
.footer-links a:hover { color: var(--gold-light); }

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  visibility: hidden;
  pointer-events: none;
}
.modal.open { visibility: visible; pointer-events: auto; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 24, 18, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.5s var(--ease-luxe);
}
.modal.open .modal-backdrop { opacity: 1; }
.modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88vh, 780px);
  overflow-y: auto;
  background: var(--paper);
  padding: clamp(2.2rem, 4vw, 3.2rem);
  transform: translateY(40px) scale(0.98);
  opacity: 0;
  transition: transform 0.6s var(--ease-luxe), opacity 0.5s var(--ease-luxe);
  border-top: 3px solid var(--gold);
}
.modal.open .modal-panel { transform: translateY(0) scale(1); opacity: 1; }
.modal-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}
.modal-close:hover { background: var(--green-900); color: var(--cream); border-color: var(--green-900); }
.modal-close .icon { width: 16px; height: 16px; }
.modal-panel .display-3 { margin-bottom: 0.6rem; }
.modal-intro { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.8rem; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.5rem; }
.form-grid .full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section--dark .field label { color: rgba(245, 240, 230, 0.65); }
.field input, .field select, .field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(27, 33, 28, 0.3);
  padding: 0.7rem 0;
  font-size: 1rem;
  color: inherit;
  border-radius: 0;
  transition: border-color 0.4s;
  width: 100%;
}
.section--dark .field input,
.section--dark .field select,
.section--dark .field textarea { border-bottom-color: rgba(245, 240, 230, 0.3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23AE8C55' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.2rem center; padding-right: 1.6rem; cursor: pointer; }
.section--dark .field select option { color: var(--ink); }
.field textarea { resize: vertical; min-height: 96px; }

.check-pills { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.check-pill { position: relative; }
.check-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check-pill span {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border: 1px solid rgba(27, 33, 28, 0.3);
  border-radius: 100px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  transition: all 0.35s var(--ease-luxe);
  user-select: none;
}
.check-pill input:checked + span {
  background: var(--green-900);
  color: var(--cream);
  border-color: var(--green-900);
}
.check-pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.check-pill:hover span { border-color: var(--gold); }

.radio-row { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.radio-row label { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; color: var(--ink-soft); cursor: pointer; text-transform: none; letter-spacing: 0.02em; }
.radio-row input { accent-color: var(--gold-strong); width: 16px; height: 16px; }

.form-actions { margin-top: 2rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.form-note { font-size: 0.8rem; color: var(--ink-faint); }

/* honeypot — visually gone, present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* submission error */
.form-error {
  margin: 1.4rem 0 0;
  padding: 0.9rem 1.2rem;
  border: 1px solid rgba(163, 77, 63, 0.45);
  border-left: 3px solid #A34D3F;
  background: rgba(163, 77, 63, 0.07);
  color: #7E3B30;
  font-size: 0.92rem;
  line-height: 1.55;
}
.section--dark .form-error {
  background: rgba(163, 77, 63, 0.18);
  color: #E8B8AE;
}

/* sending state */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}
.btn.is-loading::after {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* form success state */
.form-success { display: none; text-align: center; padding: 2.5rem 1rem; }
form.submitted { display: none; }
form.submitted + .form-success { display: block; animation: riseIn 0.7s var(--ease-luxe) both; }
.success-ring {
  width: 84px; height: 84px;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  animation: ringPop 0.8s var(--ease-luxe) both 0.15s;
}
@keyframes ringPop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.success-ring .icon { width: 30px; height: 30px; stroke: var(--gold-strong); }
.success-ring .check-path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: drawCheck 0.7s var(--ease-luxe) forwards 0.5s;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* ---------- Multi-step form ---------- */
.steps-nav { display: flex; gap: 0; margin-bottom: 3rem; border: 1px solid var(--hairline); }
.step-tab {
  flex: 1;
  padding: 1.1rem 1rem;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-right: 1px solid var(--hairline);
  position: relative;
  transition: color 0.4s, background-color 0.4s;
}
.step-tab:last-child { border-right: 0; }
.step-tab .step-num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: inherit;
  margin-bottom: 0.2rem;
}
.step-tab.active { color: var(--green-900); background: var(--gold-pale); }
.step-tab.done { color: var(--gold-strong); }
.form-step { display: none; }
.form-step.active { display: block; animation: riseIn 0.6s var(--ease-luxe) both; }
.form-step h3 { font-size: var(--fs-d3); margin-bottom: 0.5rem; }
.form-step > p { color: var(--ink-soft); margin-bottom: 2rem; font-size: 0.95rem; }
.progress-line { height: 2px; background: var(--hairline); margin-bottom: 3rem; position: relative; overflow: hidden; }
.progress-line span {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0.33);
  transition: transform 0.7s var(--ease-luxe);
}

.fieldset-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.8rem;
  display: block;
}

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--hairline); }
.accordion-item { border-bottom: 1px solid var(--hairline); }
.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.7rem 0;
  text-align: left;
  transition: color 0.35s;
}
.accordion-trigger:hover { color: var(--gold-strong); }
.accordion-trigger h3 { font-size: 1.35rem; font-weight: 500; font-variant-numeric: lining-nums; }
.accordion-icon {
  flex: none;
  width: 40px; height: 40px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 0.55s var(--ease-luxe), background-color 0.4s, border-color 0.4s, color 0.4s;
  position: relative;
}
.accordion-icon::before, .accordion-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.55s var(--ease-luxe);
}
.accordion-icon::before { width: 14px; height: 1.5px; }
.accordion-icon::after { width: 1.5px; height: 14px; }
.accordion-item.open .accordion-icon { background: var(--green-900); border-color: var(--green-900); color: var(--gold-light); }
.accordion-item.open .accordion-icon::after { transform: rotate(90deg); }
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-luxe);
}
.accordion-body > div { overflow: hidden; }
.accordion-item.open .accordion-body { grid-template-rows: 1fr; }
.accordion-body p, .accordion-body ul { padding-bottom: 1.7rem; color: var(--ink-soft); max-width: 62ch; }
.accordion-body ul { display: grid; gap: 0.5rem; padding-left: 1.1rem; list-style: disc; }
.accordion-body a { color: var(--gold-strong); border-bottom: 1px solid rgba(174, 140, 85, 0.5); transition: border-color 0.3s; }
.accordion-body a:hover { border-bottom-color: currentColor; }

/* ---------- Story letter (About) ---------- */
.story { align-items: start; }
.story-letter { color: var(--ink-soft); }
.story-letter > * + * { margin-top: 1.25rem; }
/* the letter opens on a narrow "I": close the gap so it doesn't read "I n" */
.story-letter .drop-cap::first-letter { padding-right: 0.06em; }
.story-letter .story-creed {
  margin-top: 2rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: var(--fs-d3);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
}
.story-letter .story-sign {
  margin-top: 1.6rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
/* Two family photos beside the letter, in the order it tells them: the 1995
   groundbreaking, then Barnes's grandmother as a resident, laid over its
   corner like a print so the pair stays about as tall as the letter.
   Margins are % of the album's width: the first photo is 0.72 × 4/3 = 0.96
   of it tall, so -18% starts the second at 0.78, and its caption sits out of
   flow to the left of the second photo. */
.story-album { display: flow-root; }
.story-photo { position: relative; }
.story-photo:first-child { width: 72%; }
.story-photo:first-child figcaption {
  position: absolute;
  top: calc(100% + 24px + 1rem); /* below the gold frame */
  left: 0;
  width: 61%; /* 44% of the album: clear of the second photo */
}
.story-photo:nth-child(2) {
  z-index: 1;
  width: 54%;
  margin: -18% 0 0 auto;
}
.story-photo:nth-child(2) .media {
  box-shadow: 0 0 0 10px var(--paper), 0 28px 50px -24px rgba(14, 24, 18, 0.5);
}
.story-photo figcaption {
  margin-top: calc(10px + 1rem);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  font-variant-numeric: lining-nums; /* old-style "1995" reads "ı995" */
  line-height: 1.4;
  text-wrap: pretty;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .story-album { max-width: 560px; }
  /* the gold frame is hidden here, so the caption can come up */
  .story-photo:first-child figcaption { top: calc(100% + 1rem); }
}

/* ---------- Timeline (About) ---------- */
.timeline { position: relative; padding-left: clamp(2rem, 5vw, 4rem); }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), rgba(174, 140, 85, 0.15));
}
.timeline-item { position: relative; padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(clamp(2rem, 5vw, 4rem) * -1 + 2px);
  top: 10px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(174, 140, 85, 0.18);
}
.timeline-year {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gold-strong);
  display: block;
  margin-bottom: 0.4rem;
}
.timeline-item h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.timeline-item p { color: var(--ink-soft); max-width: 56ch; }
.section--dark .timeline-item p { color: rgba(245, 240, 230, 0.72); }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
.team-card {
  text-align: center;
  padding: clamp(2.2rem, 3vw, 3rem) 1.8rem;
  border: 1px solid var(--hairline);
  background: var(--white);
  transition: transform 0.6s var(--ease-luxe), box-shadow 0.6s var(--ease-luxe);
}
.team-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(14, 24, 18, 0.3); }
.team-monogram {
  width: 96px; height: 96px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--gold-strong);
  background: radial-gradient(circle at 30% 25%, rgba(174, 140, 85, 0.16), transparent 70%);
  position: relative;
}
.team-monogram::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(174, 140, 85, 0.3);
  border-radius: 50%;
}
.team-card h3 { font-size: 1.4rem; }
.team-role {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-strong);
  margin: 0.5rem 0 0.9rem;
}
.team-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Process steps (Pricing) ---------- */
.process { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
.process-step { position: relative; padding-top: 2rem; }
.process-step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  display: block;
  margin-bottom: 1.2rem;
}
.process-step::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 1px;
  background: var(--gold);
}
.process-step h3 { font-size: 1.35rem; margin-bottom: 0.7rem; }
.process-step p { font-size: 0.94rem; color: var(--ink-soft); }
.section--dark .process-step p { color: rgba(245, 240, 230, 0.72); }
.section--dark .process-step h3 { color: var(--cream); }

/* ---------- The Oak Hill Reserve (Find Your Fit) ---------- */
.reserve-copy { color: rgba(245, 240, 230, 0.78); }
.reserve-card {
  background: var(--green-850);
  border: 1px solid var(--hairline-dark);
  padding: clamp(2rem, 3.5vw, 3rem);
}
.reserve-lead {
  margin-bottom: 1.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-d3);
  line-height: 1.3;
  color: var(--cream);
}
.reserve-amount { color: var(--gold-light); font-variant-numeric: lining-nums; }
.reserve-card .checklist { gap: 0.95rem; }
.reserve-note {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline-dark);
  font-size: 0.92rem;
  color: rgba(245, 240, 230, 0.66);
}

/* ---------- Pricing cards ---------- */
/* minmax(0, …): a plain 1fr column can't shrink below its card's button label,
   so on tablets the row outgrew the page and the last card was cut off */
.price-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 2.5rem); align-items: stretch; }
.price-card {
  border: 1px solid var(--hairline);
  background: var(--white);
  padding: clamp(2.2rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
  transition: transform 0.6s var(--ease-luxe), box-shadow 0.6s var(--ease-luxe);
}
.price-card:hover { transform: translateY(-8px); box-shadow: 0 34px 70px -30px rgba(14, 24, 18, 0.35); }
.price-card--featured { background: var(--green-900); color: var(--cream); border-color: var(--green-900); }
.price-card--featured h3 { color: var(--cream); }
.price-card--featured p { color: rgba(245, 240, 230, 0.75); }
.price-tag {
  position: absolute;
  top: 0; right: clamp(1.5rem, 3vw, 2.4rem);
  transform: translateY(-50%);
  background: var(--gold);
  color: var(--green-950);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
}
.price-card h3 { font-size: 1.5rem; }
/* scoped to the card, or .price-card p out-ranks it and sets the figure at body size */
.price-card .price-amount {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.5vw, 3.1rem);
  /* lining figures: Cormorant's default old-style 1 reads as a capital I */
  font-variant-numeric: lining-nums;
  color: var(--green-900);
  line-height: 1;
  /* where the suffix can't fit beside the figure, it drops below it whole
     rather than strand its last word on a line of its own */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* the column gap stands in for the no-break space that opens the suffix
     (0.44em at its 0.35em size), which .per pulls back so a wrapped line starts flush */
  gap: 0.12em calc(0.35em * 0.44);
}
/* must follow the rule above, which it ties on specificity */
.price-card--featured .price-amount { color: var(--cream); }
.price-amount .per { font-size: 0.35em; font-family: var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-left: -0.44em; }
.price-card--featured .price-amount .per { color: rgba(245, 240, 230, 0.6); }
.price-card p { font-size: 0.94rem; color: var(--ink-soft); }
.price-card .checklist { font-size: 0.92rem; gap: 0.7rem; }
.price-card .btn { margin-top: auto; }
/* The button spans the card and centres its label, so slim side padding doesn't
   show. In a narrow card the label tightens, and as a last resort it wraps. */
.price-card { container-type: inline-size; }
.price-card .btn { padding-inline: 0.75rem; white-space: normal; text-align: center; text-wrap: balance; }
@container (max-width: 255px) {
  .price-card .btn { font-size: 0.72rem; letter-spacing: 0.12em; }
}

/* ---------- Rooms / halls ---------- */
.hall { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; padding-block: clamp(3rem, 5vw, 4.5rem); border-bottom: 1px solid var(--hairline); }
.hall:last-of-type { border-bottom: 0; }
.hall:nth-child(even) .hall-media { order: 2; }
.hall-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold-strong);
  display: block;
  margin-bottom: 0.6rem;
}
.hall h2 { font-size: var(--fs-d2); margin-bottom: 1rem; }
.hall-desc { color: var(--ink-soft); margin-bottom: 1.8rem; max-width: 50ch; }

.room-table { width: 100%; border-collapse: collapse; }
.room-table th {
  text-align: left;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 0 0.8rem;
  border-bottom: 1px solid var(--hairline);
}
.room-table td {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.97rem;
  color: var(--ink-soft);
}
.room-table td:first-child { color: var(--ink); font-weight: 500; }
.room-table tr:hover td { color: var(--ink); }
.hall-gallery { display: grid; gap: clamp(0.5rem, 1vw, 0.75rem); }
.hall-shot {
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.hall-shot img { pointer-events: none; }
.hall-shot:focus-visible { outline-offset: 3px; }
.hall-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(0.5rem, 1vw, 0.75rem); }
.hall-shot-count {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(14, 24, 18, 0.72);
  backdrop-filter: blur(8px);
  color: var(--cream);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  transition: background-color 0.35s var(--ease-luxe), color 0.35s var(--ease-luxe);
}
.hall-shot-count .icon { width: 12px; height: 12px; stroke: currentColor; }
.hall-shot--lead:hover .hall-shot-count { background: var(--gold); color: var(--green-950); }
@media (max-width: 640px) {
  .hall-thumbs--4 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}
.room-note { margin-top: 1.4rem; font-size: 0.85rem; color: var(--ink-faint); display: flex; gap: 0.6rem; align-items: flex-start; }
.room-note .icon { width: 17px; height: 17px; margin-top: 0.25rem; flex: none; stroke: var(--gold-strong); }

/* ---------- Residences & Pricing: rates ---------- */
/* the three starting prices under the introduction */
.rate-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  border-block: 1px solid var(--hairline);
}
.rate-summary > div { padding: clamp(1.4rem, 2.5vw, 2rem) 1rem; text-align: center; }
.rate-summary > div + div { border-left: 1px solid var(--hairline); }
.rate-summary dt {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rate-summary dd {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.4em;
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 2.8rem);
  font-weight: 500;
  line-height: 1;
  /* lining figures: Cormorant's default old-style 1 reads as a capital I */
  font-variant-numeric: lining-nums;
  color: var(--green-900);
}
.rate-from { font-family: var(--font-body); font-size: 0.3em; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.rate-summary-note { margin-top: 1.1rem; text-align: center; font-size: 0.9rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .rate-summary { grid-template-columns: 1fr; }
  .rate-summary > div + div { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* each hall's rates run the full width beneath its photos and description */
.hall .rate-wrap { grid-column: 1 / -1; order: 3; }
.rate-table thead th { line-height: 1.6; vertical-align: bottom; }
.rate-table th[scope="row"] {
  padding: 1rem 0.8rem 1rem 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
/* the same column widths in every hall, so the figures line up from table to table */
.rate-table:not(.rate-table--suites) thead th:nth-child(1) { width: 34%; }
.rate-table:not(.rate-table--suites) thead th:nth-child(2),
.rate-table:not(.rate-table--suites) thead th:nth-child(3) { width: 16%; }
.rate-table .num { text-align: right; }
.rate-table td.num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.rate-table td.rate-na { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--ink-faint); }
/* a room's name opens its floor plan */
.rate-room { border-bottom: 1px solid rgba(174, 140, 85, 0.5); transition: color 0.3s, border-color 0.3s; }
.rate-room:hover { color: var(--gold-strong); border-bottom-color: currentColor; }
.section--dark .room-table thead th { color: rgba(245, 240, 230, 0.55); border-bottom-color: var(--hairline-dark); }
.section--dark .room-table td,
.section--dark .rate-table th[scope="row"] { color: rgba(245, 240, 230, 0.78); border-bottom-color: var(--hairline-dark); }
.section--dark .rate-table th[scope="row"],
.section--dark .rate-table td.num,
.section--dark .room-table tr:hover td { color: var(--cream); }
.section--dark .rate-room:hover { color: var(--gold-light); }
/* phones: each room becomes a short card of labelled figures */
@media (max-width: 640px) {
  .rate-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rate-table tbody { display: block; }
  .rate-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  /* (tr > lifts these above the floor plan rules' nowrap on .room-table cells) */
  .room-table.rate-table tr > th[scope="row"],
  .room-table.rate-table tr > td { padding: 0; border: 0; text-align: left; white-space: normal; }
  .rate-table th[scope="row"] { grid-column: 1 / -1; font-size: 1.05rem; }
  .rate-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .section--dark .rate-table tr { border-bottom-color: var(--hairline-dark); }
  .section--dark .rate-table td::before { color: rgba(245, 240, 230, 0.55); }
}

/* the suites */
.suites-media { position: sticky; top: 7rem; }
.suites-copy { color: rgba(245, 240, 230, 0.78); }
.suite-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.2rem; margin-top: 2.2rem; }
.suite-notes h3 { font-size: 1.35rem; color: var(--cream); margin-bottom: 0.5rem; }
.suite-notes p { font-size: 0.94rem; color: rgba(245, 240, 230, 0.72); }
.rates-availability { margin-top: clamp(2.5rem, 4vw, 3.5rem); text-align: center; font-size: 0.9rem; color: rgba(245, 240, 230, 0.6); }
@media (max-width: 900px) { .suites-media { position: relative; top: 0; } }
@media (max-width: 640px) { .suite-notes { grid-template-columns: 1fr; } }

/* what the monthly rate leaves out */
.fee-list { border-top: 1px solid var(--hairline); }
.fee-list li {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) 1.6fr;
  gap: 0.35rem 1.5rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--hairline);
}
.fee-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.3; color: var(--ink); font-variant-numeric: lining-nums; }
.fee-detail { color: var(--ink-soft); font-size: 0.97rem; align-self: center; }
@media (max-width: 640px) { .fee-list li { grid-template-columns: 1fr; } }

/* ---------- Article cards (Resources) ---------- */
.article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--white);
  overflow: hidden;
  transition: transform 0.6s var(--ease-luxe), box-shadow 0.6s var(--ease-luxe);
}
.article-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(14, 24, 18, 0.35); }
.article-card .media { aspect-ratio: 16 / 10; }
.article-body { padding: clamp(1.6rem, 2.5vw, 2.2rem); display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.article-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.article-body h3 { font-size: 1.45rem; line-height: 1.25; }
.article-body h3 a { transition: color 0.3s; }
.article-body h3 a:hover { color: var(--gold-strong); }
.article-body p { font-size: 0.94rem; color: var(--ink-soft); }
.article-body .text-link { margin-top: auto; padding-top: 0.9rem; }

/* Journal post — a single measure of prose, nothing competing with it. */
.post { max-width: 68ch; margin-inline: auto; }
.post-meta {
  display: flex;
  gap: 1.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-strong);
  padding-bottom: 1.5rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--hairline);
}
.post-body { font-size: 1.06rem; line-height: 1.85; color: var(--ink-soft); }
.post-body > * + * { margin-top: 1.4rem; }
.post-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, 2.05rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 3rem;
}
.post-body h3 {
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2.4rem;
}
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body a { color: var(--gold-strong); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--gold); }
.post-body ul, .post-body ol { padding-left: 1.3rem; }
.post-body li + li { margin-top: 0.55rem; }
.post-body blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 1.6rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.post-body img { width: 100%; height: auto; }
.post-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 3.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  width: 100%;
}

/* ---------- Careers ---------- */
.job-list { border-top: 1px solid var(--hairline); }
.job-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.8rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 0.5s var(--ease-luxe);
}
.job-row:hover { padding-left: 1rem; }
.job-row h3 { font-size: 1.6rem; }
.job-row .job-meta { margin-top: 0.4rem; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

.benefit-tile {
  padding: clamp(1.8rem, 2.5vw, 2.4rem);
  border: 1px solid var(--hairline-dark);
  background: var(--green-850);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: background-color 0.5s, transform 0.6s var(--ease-luxe);
}
.benefit-tile:hover { background: var(--green-800); transform: translateY(-6px); }
.benefit-tile .icon { stroke: var(--gold-light); width: 30px; height: 30px; }
.benefit-tile h3 { font-size: 1.2rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.04em; }
.benefit-tile p { font-size: 0.9rem; color: rgba(245, 240, 230, 0.68); }

/* ---------- Contact ---------- */
.contact-info-list { display: grid; gap: 1.8rem; }
.contact-info-item { display: flex; gap: 1.3rem; align-items: flex-start; }
.contact-info-item .icon { width: 24px; height: 24px; stroke: var(--gold-light); margin-top: 0.3rem; flex: none; }
.contact-info-item h4 { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.35rem; }
.contact-info-item p, .contact-info-item a { color: rgba(245, 240, 230, 0.8); font-size: 1rem; }
.contact-info-item a:hover { color: var(--gold-light); }

.map-frame { border: 1px solid var(--hairline); padding: 10px; background: var(--white); }
.map-frame iframe { display: block; width: 100%; height: 420px; border: 0; filter: sepia(0.22) saturate(0.82); }

/* ---------- Sticky mobile CTA bar ---------- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  grid-template-columns: 1fr 1fr;
  transform: translateY(110%);
  transition: transform 0.55s var(--ease-luxe);
  box-shadow: 0 -12px 40px rgba(14, 24, 18, 0.3);
}
.sticky-bar.visible { transform: translateY(0); }
.sticky-bar a, .sticky-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sticky-bar .icon { width: 16px; height: 16px; }
.sticky-call { background: var(--green-900); color: var(--cream); }
.sticky-tour { background: var(--gold); color: var(--green-950); }

/* ---------- Reveal on scroll (hidden only when JS is active) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease-luxe), transform 1s var(--ease-luxe);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
.js [data-reveal].revealed { opacity: 1; transform: translateY(0); }
.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="left"].revealed, .js [data-reveal="right"].revealed { transform: translateX(0); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="scale"].revealed { transform: scale(1); }

/* stacked layouts: slide up instead of sideways so pre-reveal offsets
   can never poke past the viewport edge */
@media (max-width: 900px) {
  .js [data-reveal="left"], .js [data-reveal="right"] { transform: translateY(34px); }
  .js [data-reveal="left"].revealed, .js [data-reveal="right"].revealed { transform: translateY(0); }
}

/* draw-on-scroll svg */
.draw path, .draw line, .draw circle { transition: stroke-dashoffset 1.8s var(--ease-luxe) 0.2s; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 65;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--green-900);
  color: var(--gold-light);
  border: 1px solid rgba(203, 174, 126, 0.3);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.45s, transform 0.45s var(--ease-luxe), visibility 0.45s, background-color 0.35s;
}
.to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--gold); color: var(--green-950); }
.to-top .icon { width: 18px; height: 18px; }

/* ---------- Legal page ---------- */
.legal h2 { font-size: 1.6rem; margin: 2.8rem 0 0.9rem; }
.legal p, .legal li { color: var(--ink-soft); margin-bottom: 1rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; }

/* ---------- Utility ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }

/* ============================================================
   Responsive
   ============================================================ */
/* Between the burger breakpoint and full desktop the bar still carries five
   labels, the phone number and the CTA. Tighten the type to keep every item
   on one line rather than let flex wrap them. */
@media (max-width: 1366px) {
  .header-inner { gap: 1.1rem; }
  .brand { gap: 0.6rem; }
  .brand svg { width: 29px; height: 29px; }
  .brand-mark { height: 50px; }
  .site-header.scrolled .brand-mark { height: 44px; }
  .brand-text { font-size: 1.38rem; }
  .brand-sub { font-size: 0.48rem; letter-spacing: 0.2em; }
  .primary-nav { gap: clamp(0.7rem, 1.45vw, 1.5rem); }
  .primary-nav a { font-size: 0.71rem; letter-spacing: 0.07em; }
  .header-actions { gap: 0.85rem; }
  .header-phone { font-size: 0.75rem; letter-spacing: 0.01em; gap: 0.4rem; }
  .header-phone svg { width: 14px; height: 14px; }
  .header-actions .btn { padding: 0.9rem 1.25rem; font-size: 0.67rem; letter-spacing: 0.12em; }
}

@media (max-width: 1080px) {
  .primary-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-phone span { display: none; }
}

/* three rate cards across need about 1000px; narrower, they go two across */
@media (max-width: 1000px) {
  .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .split, .hall { grid-template-columns: 1fr; }
  .hall:nth-child(even) .hall-media { order: 0; }
  .grid-3, .grid-4, .team-grid, .process { grid-template-columns: 1fr 1fr; }
  .footer-top, .footer-mid { grid-template-columns: 1fr; }
  .footer-mid { gap: 2.5rem; grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-dark); }
  .numbered-item { grid-template-columns: 60px 1fr; }
  .numbered-item p { grid-column: 2; }
  .nav-overlay-inner { grid-template-columns: 1fr; gap: 3rem; padding: 6.5rem 0 5rem; }
  .checklist--2col { grid-template-columns: 1fr; }
  .media-offset::before { display: none; }
}

@media (max-width: 640px) {
  .grid-3, .grid-4, .team-grid, .price-cards, .process, .form-grid, .footer-mid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .sticky-bar { display: grid; }
  .to-top { display: none; }
  .hero-scroll { display: none; }
  .header-phone { display: none; }
  /* the sticky bar carries the tour CTA on phones — the header button
     would otherwise clip past the right edge */
  .header-actions .btn { display: none; }
  .header-inner { gap: 1rem; }
  .btn { white-space: normal; text-align: center; }
  .hero-actions .btn { width: 100%; }
  .steps-nav { flex-direction: column; }
  .step-tab { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .step-tab:last-child { border-bottom: 0; }
  .job-row { grid-template-columns: 1fr; gap: 1rem; }
  body { padding-bottom: 52px; }
}

/* ============================================================
   Skip link (a11y)
   ============================================================ */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--green-950);
  color: var(--cream);
  padding: 0.9rem 1.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  transition: top 0.3s var(--ease-luxe);
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   Team photos
   ============================================================ */
.team-photo {
  width: 128px;
  height: 128px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  padding: 5px;
  border: 1px solid var(--gold);
  position: relative;
}
.team-photo::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(174, 140, 85, 0.3);
  border-radius: 50%;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: saturate(0.92);
}

/* ============================================================
   Floor plans — tabbed viewer. The drawings are inline SVG made by
   _src/tools/floorplans/render.js; room labels are HTML on top.
   ============================================================ */
.plans { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.plans-bar {
  display: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap-reverse;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.js .plans-bar { display: flex; }
.plans-tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.plans-tabs::-webkit-scrollbar { display: none; }
.plans-panel { scroll-margin-top: 96px; }
.hall { scroll-margin-top: 2rem; }
.plans-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  text-align: left;
  padding: 0.85rem clamp(0.75rem, 1.4vw, 1.5rem) 1rem;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  transition: color 0.35s var(--ease-luxe), border-color 0.35s var(--ease-luxe);
}
.plans-tab:first-child { padding-left: 0; }
.plans-tab:hover { color: var(--ink); }
.plans-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.plans-tab:focus-visible { outline-offset: -2px; }
.plans-tab-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.2;
}
.plans-tab-meta {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.plans-tab[aria-selected="true"] .plans-tab-meta { color: var(--gold-strong); }

/* furniture on/off */
.plans-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.9rem auto;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.plans-toggle-track {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--cream-2);
  border: 1px solid var(--hairline);
  transition: background-color 0.3s var(--ease-luxe);
}
.plans-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(14, 24, 18, 0.3);
  transition: transform 0.3s var(--ease-luxe);
}
.plans-toggle[aria-pressed="true"] .plans-toggle-track { background: var(--gold); border-color: var(--gold); }
.plans-toggle[aria-pressed="true"] .plans-toggle-track::after { transform: translateX(16px); }
.plans.no-furniture .plan-furniture { display: none; }

.plans-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: clamp(1.25rem, 3.5vw, 3.25rem);
}
.plans-panel + .plans-panel { margin-top: 1.5rem; }
.js .plans-panel:not(.is-active) { display: none; }
.js .plans-panel.is-active { animation: planIn 0.5s var(--ease-luxe) both; }
@keyframes planIn { from { opacity: 0; transform: translateY(8px); } }
.plans-panel:focus-visible { outline-offset: -2px; }

.plans-stage { display: grid; place-items: center; min-width: 0; }
.plan-drawing {
  --plan-h: min(68vh, 620px);
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--plan-ar);
  width: min(100%, calc(var(--plan-h) * var(--plan-ar)));
}
.plan-drawing--tall { --plan-h: min(90vh, 820px); }
.plan-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.plan-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(7.5px, calc(var(--plan-label) * 0.92cqi), 11.5px);
  padding-left: 0.18em; /* balances the trailing letter-spacing */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
  pointer-events: none;
}
.plan-label--entry { color: var(--gold-strong); font-size: clamp(7px, calc(var(--plan-label) * 0.85cqi), 10.5px); }
/* very narrow drawings (320px phones): tighten the labels so they stay inside their rooms */
@container (max-width: 300px) {
  .plan-label { letter-spacing: 0.1em; padding-left: 0.1em; font-size: clamp(6.5px, calc(var(--plan-label) * 0.92cqi), 11.5px); }
  .plan-label--entry { font-size: clamp(6.5px, calc(var(--plan-label) * 0.85cqi), 10.5px); }
}

.plans-info { min-width: 0; }
.plans-info .hall-kicker { margin-bottom: 0.35rem; }
.plans-info .display-3 { font-size: var(--fs-d2); }
.plans-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  margin: 1.4rem 0 1.5rem;
  border-top: 1px solid var(--hairline);
}
.plans-facts div { padding: 0.95rem 0; border-bottom: 1px solid var(--hairline); }
.plans-facts dt {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.plans-facts dd { margin-top: 0.2rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.3; font-variant-numeric: lining-nums; }
.plans-desc { color: var(--ink-soft); max-width: 46ch; }
.plans-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.8rem; }
.plans-photos {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-strong);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
  transition: color 0.3s;
}
.plans-photos:hover { color: var(--ink); }
/* one room in two versions (the Homestead's half and full bath) */
.plans-variants { display: grid; gap: 0.9rem; max-width: 46ch; color: var(--ink-soft); }
.plans-variants strong { font-weight: 500; color: var(--ink); }
.plans-note { margin-top: 0.9rem; font-size: 0.85rem; font-style: italic; color: var(--ink-faint); }
/* a room whose drawing hasn't arrived yet */
.plan-pending {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.45rem;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 2rem;
  border: 1px dashed rgba(174, 140, 85, 0.6);
  background: var(--paper);
  text-align: center;
}
.plan-pending .icon { width: 40px; height: 40px; margin-bottom: 0.6rem; stroke: var(--gold-strong); stroke-width: 1; }
.plan-pending p { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; color: var(--ink); }
.plan-pending .plan-pending-sub { font-family: var(--font-body); font-size: 0.9rem; font-weight: 400; color: var(--ink-soft); }

/* room tables link each published size to its plan */
.room-table .room-plan { text-align: right; }
.room-table th:not(:last-child), .room-table td:not(:last-child) { padding-right: 0.8rem; }
.room-table td:not(:first-child), .room-plan-link { white-space: nowrap; }
.room-plan-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-strong);
  transition: color 0.3s, gap 0.3s var(--ease-luxe);
}
.room-plan-link .icon { width: 13px; height: 13px; }
.room-plan-link:hover { color: var(--ink); gap: 0.55rem; }

/* short landscape screens: size plans to the width and let the page scroll */
@media (max-height: 500px) and (orientation: landscape) {
  .plan-drawing, .plan-drawing--tall { --plan-h: 560px; }
}
/* narrow phones: the table's plan column becomes just an arrow (the link keeps its label) */
@media (max-width: 480px) {
  .room-plan-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .room-plan-link .icon { width: 18px; height: 18px; }
}
@media (max-width: 900px) {
  .plans-panel { grid-template-columns: 1fr; }
  .plan-drawing { --plan-h: min(62vh, 560px); }
  .plan-drawing--tall { --plan-h: min(86vh, 700px); }
  /* seven tabs don't fit across a tablet or phone: wrap them into chips, four to a row */
  .plans-bar { border-bottom: 0; flex-wrap: wrap; align-items: flex-end; }
  .plans-tabs { flex-wrap: wrap; gap: 0.45rem; overflow: visible; }
  .plans-tab,
  .plans-tab:first-child {
    flex: 1 1 22%;
    padding: 0.6rem 0.7rem 0.65rem;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.45);
  }
  .plans-tab[aria-selected="true"] { background: var(--white); border-color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
  .plans-tab-name { font-size: 1.05rem; }
  .plans-tab-meta { font-size: 0.58rem; letter-spacing: 0.16em; }
  .plans-toggle { margin: 0.3rem 0 0.2rem auto; }
}
@media (max-width: 640px) {
  /* three to a row on phones */
  .plans-tab,
  .plans-tab:first-child { flex-basis: 28%; }
  .plans-panel { padding: 1.1rem 1rem 1.6rem; }
  .plans-info { padding-inline: 0.25rem; }
}

/* ============================================================
   Community map (Services)
   ============================================================ */
/* the drawing keeps a readable size; narrower than that, it scrolls sideways */
.cmap-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: clamp(0.75rem, 2.4vw, 2rem);
  background: var(--cream);
  border: 1px solid var(--hairline);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-light) transparent;
}
.cmap-scroll:focus-visible { outline-offset: -2px; }
.section--cream .cmap-scroll { background: var(--paper); }
.cmap-svg { display: block; width: 100%; min-width: 1000px; height: auto; }
.cmap-room > rect, .cmap-room > polygon, .cmap-num { transition: fill 0.35s var(--ease-luxe), opacity 0.35s; }
.cmap.is-filtered .cmap-room:not(.is-match) > rect,
.cmap.is-filtered .cmap-room:not(.is-match) > polygon { fill: #F3EFE6; }
.cmap.is-filtered .cmap-room:not(.is-match) .cmap-num { fill: var(--ink-faint); opacity: 0.5; }
.cmap-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cmap-hint .icon { width: 16px; height: 16px; stroke: var(--gold-strong); }
.cmap.is-scrollable .cmap-hint { display: flex; }

.cmap-key { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.cmap-key-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.cmap-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0.8rem 1rem;
  text-align: left;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.5);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.cmap-chip:hover { border-color: var(--gold-light); background: var(--white); }
.cmap-chip[aria-pressed="true"] { border-color: var(--gold); background: var(--white); box-shadow: inset 0 -2px 0 var(--gold); }
.cmap-chip:focus-visible { outline-offset: 2px; }
.cmap-swatch {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(27, 42, 33, 0.35);
}
.cmap-chip .cmap-swatch { grid-row: span 2; }
.cmap-chip-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.2; color: var(--ink); }
.cmap-chip-meta { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.14em; line-height: 1.5; text-transform: uppercase; color: var(--ink-faint); }
.cmap-key-extras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.8rem;
  margin-top: 1.2rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cmap-key-extras li { display: inline-flex; align-items: center; gap: 0.55rem; }
.cmap-key-extras .cmap-swatch { width: 16px; height: 16px; }
.cmap-key-icon { width: 18px; height: 18px; }
.cmap-more { display: flex; width: fit-content; margin: 2rem auto 0; }
@media (max-width: 900px) {
  .cmap-key-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: compact chips, so the key and the map fit on one screen */
@media (max-width: 640px) {
  .cmap-hint { margin-top: 0.6rem; }
  .cmap-key { margin-top: 1rem; }
  .cmap-key-list { gap: 0.4rem; }
  .cmap-chip { column-gap: 0.6rem; padding: 0.55rem 0.65rem; }
  .cmap-chip .cmap-swatch { width: 18px; height: 18px; }
  .cmap-chip-name { font-size: 1rem; white-space: nowrap; }
  .cmap-chip-meta { font-size: 0.56rem; letter-spacing: 0.12em; }
  .cmap-chip-hall { display: none; }
  .cmap-key-extras { gap: 0.5rem 1.2rem; font-size: 0.6rem; letter-spacing: 0.14em; }
}
@media (max-width: 380px) {
  .cmap-chip { column-gap: 0.5rem; padding: 0.5rem; }
  .cmap-chip .cmap-swatch { width: 14px; height: 14px; }
  .cmap-chip-name { font-size: 0.94rem; }
}

/* ============================================================
   Award strip
   ============================================================ */
/* badge and gap shrink with the column; where the text still can't fit
   beside the badge, it drops below it rather than break mid-line */
.award-strip {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1rem, 1.8vw, 1.6rem);
}
.award-strip img {
  --badge: clamp(100px, 10.5vw, 150px);
  width: var(--badge);
  /* the PNG carries 12% clear margin; pull the ribbon's tip to the text edge */
  margin-left: calc(var(--badge) * -0.12);
  height: auto;
  flex: none;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}
.award-strip p {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(245, 240, 230, 0.62);
  text-align: left;
}
.award-strip > div { flex: 1 1 15rem; text-align: left; }
.award-link { margin-top: 0.9rem; }
/* the accolade itself carries the display face, at headline scale */
.award-strip strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-transform: none;
  color: var(--gold-light);
  margin: 0.15rem 0 0.25rem;
}

/* ============================================================
   Gallery
   ============================================================ */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.gallery-filter {
  padding: 0.62rem 1.4rem;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: all 0.4s var(--ease-luxe);
}
.gallery-filter:hover { border-color: var(--gold); color: var(--gold-strong); }
.gallery-filter.active {
  background: var(--green-900);
  border-color: var(--green-900);
  color: var(--cream);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  background: var(--green-850);
  display: block;
  width: 100%;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-luxe), opacity 0.5s;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 24, 18, 0.55), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item figcaption {
  position: absolute;
  left: 1.1rem;
  bottom: 0.9rem;
  z-index: 2;
  color: var(--cream);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s, transform 0.45s var(--ease-luxe);
  pointer-events: none;
}
.gallery-item:hover figcaption { opacity: 1; transform: translateY(0); }
.gallery-item.hidden { display: none; }

/* wide tiles for panoramic shots */
.gallery-item--wide { grid-column: span 2; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(10, 16, 12, 0.94);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--ease-luxe), visibility 0s 0.45s;
}
.lightbox.open { visibility: visible; opacity: 1; transition: opacity 0.45s var(--ease-luxe); }
.lightbox img {
  max-width: min(1400px, 92vw);
  max-height: 84vh;
  object-fit: contain;
  transform: scale(0.96);
  transition: transform 0.5s var(--ease-luxe);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.lightbox.open img { transform: scale(1); }
.lightbox-caption {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(245, 240, 230, 0.8);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  max-width: 90vw;
}
.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  border: 1px solid rgba(245, 240, 230, 0.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: background-color 0.35s, border-color 0.35s, color 0.35s;
  z-index: 2;
}
.lightbox-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.lightbox-btn .icon { width: 20px; height: 20px; }
.lightbox-btn[hidden] { display: none; }
.lb-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lightbox-prev { left: clamp(0.8rem, 3vw, 2.5rem); }
.lightbox-next { right: clamp(0.8rem, 3vw, 2.5rem); }
.lightbox-close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 50px; height: 50px;
  border: 1px solid rgba(245, 240, 230, 0.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: background-color 0.35s, border-color 0.35s, color 0.35s;
  z-index: 2;
}
.lightbox-close:hover { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.lightbox-counter {
  position: absolute;
  top: 2.1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(245, 240, 230, 0.55);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
}

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item--wide { grid-column: auto; }
  .lightbox-btn { display: none; }
}

/* ============================================================
   Find Your Fit — care & cost assessment
   ============================================================ */
.quiz-wrap {
  background: var(--green-950);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  position: relative;
}

.quiz-shell {
  width: min(880px, 92vw);
  margin-inline: auto;
  background: var(--paper);
  border-top: 3px solid var(--gold);
  padding: clamp(1.8rem, 4vw, 3.4rem);
  position: relative;
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.7);
}

/* ---- progress ---- */
.quiz-top { margin-bottom: clamp(2rem, 4vw, 3rem); }
.quiz-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.quiz-meta strong { color: var(--gold-strong); font-weight: 500; }
.quiz-progress {
  height: 2px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.quiz-progress > span {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.7s var(--ease-luxe);
}

/* ---- steps ---- */
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: quizIn 0.55s var(--ease-luxe) both; }
@keyframes quizIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz-q {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.quiz-q em { font-style: italic; color: var(--gold-strong); }
.quiz-hint {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ---- option cards ---- */
.quiz-options {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border: 0;
  padding: 0;
}
.quiz-options--2 { grid-template-columns: 1fr 1fr; }

.quiz-opt { position: relative; display: block; }
.quiz-opt input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.quiz-opt-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  border: 1px solid var(--hairline);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.35s var(--ease-luxe),
              background-color 0.35s var(--ease-luxe),
              transform 0.35s var(--ease-luxe),
              box-shadow 0.35s var(--ease-luxe);
}
.quiz-opt-box:hover {
  border-color: var(--gold);
  transform: translateX(4px);
  box-shadow: 0 14px 30px -22px rgba(14, 24, 18, 0.6);
}
.quiz-opt-label { font-size: 1.02rem; line-height: 1.4; }
.quiz-opt-sub {
  display: block;
  font-size: 0.83rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

/* selection indicator */
.quiz-opt-mark {
  flex: none;
  width: 22px; height: 22px;
  border: 1px solid rgba(27, 33, 28, 0.3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.3s, background-color 0.3s;
}
.quiz-opt-mark::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cream);
  transform: scale(0);
  transition: transform 0.35s var(--ease-luxe);
}
.quiz-opt--multi .quiz-opt-mark { border-radius: 3px; }
.quiz-opt--multi .quiz-opt-mark::after { border-radius: 1px; }

.quiz-opt input:checked + .quiz-opt-box {
  border-color: var(--green-900);
  background: var(--green-900);
  color: var(--cream);
}
.quiz-opt input:checked + .quiz-opt-box .quiz-opt-sub { color: rgba(245, 240, 230, 0.6); }
.quiz-opt input:checked + .quiz-opt-box .quiz-opt-mark {
  border-color: var(--gold-light);
  background: var(--gold);
}
.quiz-opt input:checked + .quiz-opt-box .quiz-opt-mark::after { transform: scale(1); }
.quiz-opt input:focus-visible + .quiz-opt-box {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---- step nav ---- */
.quiz-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.quiz-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.3s;
}
.quiz-back:hover { color: var(--green-900); }
.quiz-back .icon { width: 15px; height: 15px; }
.quiz-back[hidden] { visibility: hidden; display: inline-flex; }
.quiz-skip {
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quiz-skip:hover { color: var(--gold-strong); }

/* ---- result ---- */
.quiz-result { display: none; }
.quiz-result.active { display: block; animation: quizIn 0.7s var(--ease-luxe) both; }

.result-crest {
  width: 74px; height: 74px;
  margin-bottom: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(174, 140, 85, 0.2), transparent 70%);
  animation: ringPop 0.7s var(--ease-luxe) both 0.1s;
}
.result-crest .icon { width: 30px; height: 30px; stroke: var(--gold-strong); }

.result-band {
  margin: clamp(1.8rem, 3vw, 2.4rem) 0;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--green-900);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
}
.result-cell h4 {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
}
.result-cell p { font-size: 1.05rem; color: var(--cream); line-height: 1.45; }
.result-cell .result-sub { font-size: 0.86rem; color: rgba(245, 240, 230, 0.6); margin-top: 0.25rem; }
.result-price {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1;
  color: var(--cream);
}
.result-price .per {
  font-family: var(--font-body);
  font-size: 0.3em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.55);
  margin-left: 0.4rem;
}

.result-notes { display: grid; gap: 1.1rem; margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.result-note {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hairline);
}
.result-note:last-child { border-bottom: 0; padding-bottom: 0; }
.result-note .icon { width: 20px; height: 20px; flex: none; margin-top: 0.3rem; stroke: var(--gold-strong); }
.result-note strong { display: block; font-weight: 500; margin-bottom: 0.15rem; }
.result-note p { font-size: 0.95rem; color: var(--ink-soft); }

/* capture block */
.result-capture {
  background: var(--cream);
  border: 1px solid var(--hairline);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.result-capture .display-3 { margin-bottom: 0.5rem; }
.result-capture > p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.6rem; max-width: 54ch; }
.result-alt {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.result-alt a { color: var(--gold-strong); border-bottom: 1px solid rgba(174, 140, 85, 0.4); }
.result-alt a:hover { border-color: var(--gold-strong); }

.quiz-restart {
  display: block;
  margin: 1.8rem auto 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.5);
  transition: color 0.3s;
}
.quiz-restart:hover { color: var(--gold-light); }

/* homepage teaser */
.quiz-teaser {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  background: var(--green-900);
  color: var(--cream);
  padding: clamp(2.2rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.quiz-teaser .display-2 { color: var(--cream); }
.quiz-teaser p { color: rgba(245, 240, 230, 0.75); }
.quiz-teaser-steps {
  display: grid;
  gap: 0.9rem;
  font-size: 0.95rem;
  color: rgba(245, 240, 230, 0.8);
}
.quiz-teaser-steps li { display: flex; gap: 0.9rem; align-items: flex-start; }
.quiz-teaser-steps .n {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-light);
  flex: none;
  width: 1.4rem;
}

@media (max-width: 760px) {
  .quiz-options--2 { grid-template-columns: 1fr; }
  .result-band { grid-template-columns: 1fr; }
  .quiz-teaser { grid-template-columns: 1fr; }
  .quiz-actions { flex-direction: column-reverse; align-items: stretch; }
  .quiz-actions .btn { width: 100%; }
  .quiz-back { justify-content: center; }
}

/* ============================================================
   Finishing touches — motion & light
   ============================================================ */

/* pages enter like a lifted veil, and bow out on the way to the next */
.js body { animation: pageIn 0.55s var(--ease-luxe) both; }
@keyframes pageIn { from { opacity: 0; } }
.js body.page-leaving { opacity: 0; transition: opacity 0.2s ease; }

/* editorial curtain reveal — imagery unveils rather than fades */
.js [data-reveal] .media,
.js .media[data-reveal] {
  clip-path: inset(0 0 96% 0);
}
.js [data-reveal] .media img,
.js .media[data-reveal] img {
  transform: scale(1.12);
}
.js [data-reveal].revealed .media,
.js .media[data-reveal].revealed {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.25s var(--ease-luxe);
  transition-delay: var(--rd, 0s);
}
.js [data-reveal].revealed .media img,
.js .media[data-reveal].revealed img {
  transform: scale(1);
  transition: transform 1.7s var(--ease-luxe);
  transition-delay: var(--rd, 0s);
}
/* the hall photos are buttons: let their keyboard focus ring show outside the clip */
.js [data-reveal].revealed .hall-shot:focus-visible { clip-path: none; }

/* keep the hover zoom alive after the curtain has lifted */
.js [data-reveal].revealed .media:hover img,
.js .media[data-reveal].revealed:hover img {
  transform: scale(1.045);
  transition: transform 1.2s var(--ease-luxe);
  transition-delay: 0s;
}

/* a soft pass of light across buttons */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.34) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--ease-luxe);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }

/* The hero CTA is the one button nobody scrolls to find, so it announces
   itself: a slow sheen across the face and a soft gold bloom beneath.
   Hover hands control back to the standard sweep above. */
.hero-actions .btn-gold {
  animation: ctaBloom 4.2s var(--ease-luxe) infinite;
}
.hero-actions .btn-gold::after {
  animation: ctaSheen 4.2s var(--ease-luxe) infinite;
}
.hero-actions .btn-gold:hover { animation-play-state: paused; }
.hero-actions .btn-gold:hover::after { animation: none; }
@keyframes ctaBloom {
  0%, 100% { box-shadow: 0 0 0 0 rgba(203, 174, 126, 0); }
  50%      { box-shadow: 0 8px 34px -8px rgba(203, 174, 126, 0.75); }
}
@keyframes ctaSheen {
  0%        { transform: translateX(-130%); }
  45%, 100% { transform: translateX(130%); }
}

/* the acorn draws itself in (paths get their dash values from main.js) */
.brand svg.draw path { transition: stroke-dashoffset 1.6s var(--ease-luxe); }

/* footer signature */
.footer-tagline {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: 1.08rem !important;
  color: var(--gold-light) !important;
  margin-top: 1rem;
}

/* gallery: tiles cascade in when a filter is chosen */
.gallery-item.anim {
  animation: galleryIn 0.55s var(--ease-luxe) both;
  animation-delay: calc(var(--gi, 0) * 45ms);
}
@keyframes galleryIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
}
.lightbox img.lb-swap { animation: lbSwap 0.32s ease both; }
@keyframes lbSwap {
  from { opacity: 0; transform: scale(0.985); }
}

/* quiz options acknowledge the choice with a small, warm pop */
.quiz-opt input:checked + .quiz-opt-box { animation: optPop 0.4s var(--ease-luxe); }
@keyframes optPop {
  40% { transform: scale(1.015); }
}

/* leaves drift over the home hero — canvas painted by main.js */
.hero-ambience {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   Ask Oak Hill — the website guide (assets/js/chat.js)
   ============================================================ */
.ask-launcher {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 68;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.4rem 0.95rem 1.15rem;
  background: var(--green-900);
  color: var(--cream);
  border: 1px solid rgba(203, 174, 126, 0.4);
  border-radius: 100px;
  box-shadow: 0 14px 34px rgba(14, 24, 18, 0.3);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.35s, color 0.35s, bottom 0.55s var(--ease-luxe), opacity 0.3s, transform 0.4s var(--ease-luxe);
}
.ask-launcher .icon { width: 20px; height: 20px; color: var(--gold-light); transition: color 0.35s; }
.ask-launcher:hover { background: var(--gold); color: var(--green-950); }
.ask-launcher:hover .icon { color: var(--green-950); }
.ask.is-open .ask-launcher { opacity: 0; transform: scale(0.9); pointer-events: none; }

/* Back-to-top sits above the launcher instead of under it. */
.to-top { bottom: 6rem; }

.ask-panel {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 95;
  width: min(392px, calc(100vw - 3.2rem));
  height: min(640px, calc(100vh - var(--header-h) - 3.2rem));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-top: 3px solid var(--gold);
  box-shadow: 0 30px 80px rgba(14, 24, 18, 0.35), 0 2px 10px rgba(14, 24, 18, 0.12);
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.3s var(--ease-luxe), transform 0.45s var(--ease-luxe);
}
.ask-panel[hidden] { display: none; }
.ask.is-open .ask-panel { opacity: 1; transform: none; }
.ask-panel:focus { outline: none; }

.ask-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1rem 1rem 1.25rem;
  background: var(--green-900);
  color: var(--cream);
  flex: none;
}
.ask-mark {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(203, 174, 126, 0.4);
  border-radius: 50%;
  color: var(--gold-light);
  flex: none;
}
.ask-mark .icon { width: 20px; height: 20px; }
.ask-head-text { flex: 1; min-width: 0; }
.ask-title { font-size: 1.45rem; line-height: 1.1; }
.ask-sub {
  margin-top: 0.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.ask-close {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-dark);
  border-radius: 50%;
  color: var(--cream);
  flex: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.ask-close:hover { background: var(--gold); color: var(--green-950); border-color: var(--gold); }
.ask-close .icon { width: 16px; height: 16px; }

.ask-log {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.1rem 1.1rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ask-msg { max-width: 92%; font-size: 0.93rem; line-height: 1.6; }
.ask-msg p + p, .ask-msg ul + p, .ask-msg p + ul { margin-top: 0.55rem; }
.ask-msg--bot {
  align-self: flex-start;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.ask-msg--bot ul { display: grid; gap: 0.35rem; }
.ask-msg--bot li { position: relative; padding-left: 1rem; }
.ask-msg--bot li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.ask-msg--user {
  align-self: flex-end;
  padding: 0.65rem 0.95rem;
  background: var(--green-800);
  color: var(--cream);
}

.ask-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--hairline);
}
.ask-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-strong);
  text-align: left;
  transition: color 0.3s;
}
.ask-link::after { content: "\2192"; font-size: 0.95rem; letter-spacing: 0; transition: transform 0.35s var(--ease-luxe); }
.ask-link:hover { color: var(--green-900); }
.ask-link:hover::after { transform: translateX(4px); }
.ask-link--primary {
  margin: 0.25rem 0 0.2rem;
  padding: 0.7rem 1.1rem;
  background: var(--gold);
  color: var(--green-950);
}
.ask-link--primary:hover { background: var(--green-900); color: var(--cream); }

.ask-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ask-chip {
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(151, 117, 62, 0.45);
  border-radius: 100px;
  background: var(--paper);
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--green-900);
  text-align: left;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.ask-chip:hover { background: var(--green-900); border-color: var(--green-900); color: var(--cream); }
.ask-chip--quiet { border-style: dashed; color: var(--ink-soft); }

.ask-typing { align-self: flex-start; display: flex; gap: 5px; padding: 0.9rem 1rem; background: var(--white); border: 1px solid var(--hairline); }
.ask-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); animation: askDot 1s infinite ease-in-out; }
.ask-typing span:nth-child(2) { animation-delay: 0.15s; }
.ask-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes askDot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.ask-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.5rem;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  flex: none;
}
.ask-input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(27, 33, 28, 0.25);
  background: var(--white);
  font-size: 16px; /* 16px stops iOS zooming in on focus */
  line-height: 1.3;
}
.ask-input::placeholder { color: var(--ink-faint); }
.ask-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ask-send {
  width: 46px;
  display: grid;
  place-items: center;
  background: var(--green-900);
  color: var(--cream);
  flex: none;
  transition: background-color 0.3s, color 0.3s;
}
.ask-send:hover { background: var(--gold); color: var(--green-950); }
.ask-send .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.ask-foot {
  padding: 0 1rem 0.8rem;
  font-size: 0.72rem;
  color: var(--ink-faint);
  background: var(--paper);
  flex: none;
}
.ask-foot a { color: var(--gold-strong); white-space: nowrap; }

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

/* Phones: a round button above the sticky Call / Tour bar, and the
   panel opens full screen. */
@media (max-width: 640px) {
  .ask-launcher { right: 1rem; bottom: 1rem; width: 56px; height: 56px; padding: 0; justify-content: center; }
  .ask-launcher .icon { width: 24px; height: 24px; }
  .ask-launcher-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .sticky-bar.visible ~ .ask .ask-launcher { bottom: calc(52px + 0.9rem); }
  .ask-panel {
    inset: 0;
    width: auto;
    height: auto;
    border-top: 0;
    transform: translateY(32px);
  }
  .ask-head { padding-top: calc(1rem + env(safe-area-inset-top)); }
  .ask-foot { padding-bottom: calc(0.8rem + env(safe-area-inset-bottom)); }
  .ask-msg { max-width: 96%; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-media img, .page-hero .hero-media img { animation: none; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .line-mask > span { transform: none; animation: none; }
  .fade-up { opacity: 1; transform: none; animation: none; }
  .quiz-step.active, .quiz-result.active { animation: none; }
  .js body { animation: none; }
  .js [data-reveal] .media, .js .media[data-reveal] { clip-path: none; }
  .js [data-reveal] .media img, .js .media[data-reveal] img { transform: none; }
  .btn::after { display: none; }
  .hero-actions .btn-gold { animation: none; box-shadow: none; }
  .hero-ambience { display: none; }
}