/* ============================================================
   FIR TREE HOUSE — DESIGN SYSTEM
   Warm home × exceptional care × thoughtful technology
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Palette — warm white, soft forest green, natural wood, restrained amber */
  --cream:        #F8F3EA;
  --cream-bright: #FCF9F3;
  --cream-deep:   #F0E8D9;
  --linen:        #EFE4D2;   /* the warmest light surface: wood-adjacent sections */
  --fir:          #183F32;
  --fir-deep:     #102B22;
  --fir-soft:     #24503F;
  --moss:         #A8B39B;
  --moss-soft:    #C6CDBB;
  --amber:        #D89A48;   /* buttons, rules, marks — never small text on cream */
  --amber-soft:   #E8B36A;
  --amber-ink:    #8A5716;   /* amber for text on light backgrounds: 5.4:1 on cream */
  --amber-glow:   rgba(216, 154, 72, 0.35);
  --oak:          #C9A57C;   /* natural wood */
  --oak-light:    #E2CBA7;
  --walnut:       #6B4A30;
  --espresso:     #2B2620;

  --ink:          var(--fir);
  --ink-soft:     rgba(24, 63, 50, 0.82);
  --ink-faint:    rgba(24, 63, 50, 0.80);
  --line:         rgba(107, 74, 48, 0.18);   /* warm, wood-tinted rules */
  --line-soft:    rgba(107, 74, 48, 0.10);
  --cream-ink-soft: rgba(246, 242, 233, 0.75);
  --cream-line:   rgba(246, 242, 233, 0.18);

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;

  /* Space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 8.5rem;

  --container: 76rem;
  --container-wide: 88rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.15, 1);
  --dur-slow: 1.1s;
  --dur-med: 0.7s;
  --dur-fast: 0.35s;

  --radius-soft: 0.375rem;
  --radius-organic: 62% 38% 46% 54% / 55% 48% 52% 45%;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection { background: var(--amber); color: var(--fir); }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--fir);
  color: var(--cream);
  text-decoration: none;
  border-radius: var(--radius-soft);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 480;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.display-1 {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  line-height: 1.06;
}
.display-2 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.1;
}
.display-3 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 38em;
}

.prose p { max-width: 42em; }
.prose p + p { margin-top: 1.1em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--amber);
}
.on-dark .eyebrow { color: var(--cream-ink-soft); }

.serif-i { font-family: var(--font-display); font-style: italic; font-weight: 420; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }

.section { padding-block: clamp(6rem, 13vw, 11rem); }
.section--tight { padding-block: clamp(4rem, 8vw, 7rem); }

.on-dark {
  background: var(--fir);
  color: var(--cream);
}
.on-dark .lead { color: var(--cream-ink-soft); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}

/* Prevent min-content grid blowout on narrow screens */
.grid-2 > *, .dining__grid > *, .feature-row > *,
.way__grid > *, .statement__body > * { min-width: 0; }
@media (max-width: 47.9375rem) {
  .grid-2 { grid-template-columns: 1fr; }
}

.hr-line {
  border: none;
  border-top: 1px solid var(--line-soft);
}

/* ---------- Buttons & Links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 100px;
  border: 1px solid transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  min-height: 48px;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--fir);
  color: var(--cream);
}
.btn--primary:hover {
  background: var(--fir-soft);
  box-shadow: 0 10px 30px -12px rgba(24, 63, 50, 0.5);
}
.on-dark .btn--primary,
.btn--cream {
  background: var(--cream);
  color: var(--fir);
}
.on-dark .btn--primary:hover,
.btn--cream:hover {
  background: var(--cream-bright);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.4);
}

.btn--amber {
  background: var(--amber);
  color: var(--fir);
}
.btn--amber:hover {
  background: var(--amber-soft);
  box-shadow: 0 10px 30px -12px var(--amber-glow);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--fir); background: rgba(24, 63, 50, 0.04); }
.on-dark .btn--ghost {
  border-color: var(--cream-line);
  color: var(--cream);
}
.on-dark .btn--ghost:hover { border-color: var(--cream); background: rgba(246, 242, 233, 0.07); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding-bottom: 2px;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.text-link:hover::after { transform: scaleX(1); }
.text-link .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.text-link:hover .arrow { transform: translateX(4px); }
.on-dark .text-link { color: var(--cream); }

/* Amber pulse dot */
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--amber);
  opacity: 0;
  animation: pulse-ring 3s var(--ease-soft) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.5); opacity: 0.9; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Photo treatments ---------- */
.photo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(168, 179, 155, 0.55), transparent 60%),
    radial-gradient(110% 100% at 85% 90%, rgba(216, 154, 72, 0.18), transparent 55%),
    linear-gradient(160deg, #DCD9C8 0%, #B9C2AC 55%, #93A188 100%);
  background-size: cover;
  background-position: center;
}
.photo::after { /* soft grain */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.photo.has-img::after { display: none; } /* grain is for empty placeholders only */
.photo > .photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo--zoom .photo__img,
.photo--zoom.photo { will-change: transform; }

.photo__tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cream);
  background: rgba(24, 63, 50, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(246, 242, 233, 0.2);
  border-radius: 100px;
}

.photo--organic { border-radius: var(--radius-organic); }
.photo--arch { border-radius: 300px 300px var(--radius-soft) var(--radius-soft); }
.photo--soft { border-radius: 0.75rem; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition:
    background-color var(--dur-med) var(--ease-soft),
    box-shadow var(--dur-med) var(--ease-soft),
    transform var(--dur-med) var(--ease-soft);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 1.4rem var(--gutter);
  transition: padding var(--dur-med) var(--ease-soft);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--cream);
  transition: color var(--dur-med) var(--ease-soft);
}
.nav__logo svg { width: 34px; height: 34px; transition: width var(--dur-med) var(--ease-soft), height var(--dur-med) var(--ease-soft); }
.nav__logo-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 520;
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.nav__logo-text small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 2px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}
.nav__link {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--cream);
  border-radius: 100px;
  position: relative;
  transition: color var(--dur-med) var(--ease-soft), background-color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0.2rem;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--amber);
  transform: translateX(-50%) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: translateX(-50%) scale(1); }

.nav__cta { flex-shrink: 0; }
.nav__cta .btn { padding: 0.7rem 1.4rem; }

/* Scrolled state: floating bar */
.nav.is-scrolled {
  background: rgba(246, 242, 233, 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line-soft), 0 12px 32px -18px rgba(24, 63, 50, 0.25);
}
.nav.is-scrolled .nav__inner { padding-block: 0.7rem; }
.nav.is-scrolled .nav__logo { color: var(--fir); }
.nav.is-scrolled .nav__logo svg { width: 28px; height: 28px; }
.nav.is-scrolled .nav__link { color: var(--fir); }
.nav.is-scrolled .nav__link:hover { background: rgba(24, 63, 50, 0.05); }
.nav--solid .nav__logo,
.nav--solid .nav__link { color: var(--fir); }

.nav.is-hidden { transform: translateY(-110%); }

/* Mobile nav */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 50%;
}
.nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__burger { color: var(--cream); transition: color var(--dur-med) var(--ease-soft); }
.nav__burger[aria-expanded="true"] { color: var(--cream); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav.is-scrolled .nav__burger, .nav--solid .nav__burger { color: var(--fir); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--fir);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-soft), visibility 0s linear var(--dur-med);
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-med) var(--ease-soft);
}
.mobile-menu__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mobile-menu__links a {
  display: block;
  padding: 0.55rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  text-decoration: none;
  color: var(--cream);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__links a {
  opacity: 1;
  transform: none;
}
.mobile-menu__footer {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: var(--text-sm);
  color: var(--cream-ink-soft);
}
.mobile-menu__footer a { color: var(--cream); }

body.menu-locked { overflow: hidden; }
body.menu-locked .nav {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.menu-locked .nav .nav__logo,
body.menu-locked .nav .nav__burger { color: var(--cream); }

@media (max-width: 63.9375rem) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  isolation: isolate;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media .photo { position: absolute; inset: 0; }
.hero::before { /* cinematic gradient */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(16, 43, 34, 0.45) 0%, rgba(16, 43, 34, 0.05) 32%, rgba(16, 43, 34, 0.1) 55%, rgba(16, 43, 34, 0.78) 100%);
}
.hero__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem);
}
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.1rem;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(246, 242, 233, 0.25);
  border-radius: 100px;
  background: rgba(16, 43, 34, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__title {
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  font-weight: 440;
  line-height: 1.04;
  max-width: 11em;
  margin-bottom: var(--space-3);
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--amber-soft);
}
.hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--cream-ink-soft);
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.hero__scroll {
  position: absolute;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-ink-soft);
  writing-mode: vertical-rl;
  text-decoration: none;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 52px;
  background: linear-gradient(var(--cream), transparent);
  animation: scroll-hint 2.6s var(--ease-soft) infinite;
}
@keyframes scroll-hint {
  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; }
}
@media (max-width: 47.9375rem) {
  .hero__scroll { display: none; }
  .hero__actions .btn { width: 100%; }
}

/* ============================================================
   STATEMENT (scroll-revealed sentence)
   ============================================================ */
.statement {
  background: var(--cream);
}
.statement__text {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 440;
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 21em;
}
.statement__text .w {
  color: rgba(24, 63, 50, 0.16);
  transition: color 0.6s var(--ease-soft);
}
.statement__text .w.is-lit { color: var(--fir); }
.statement__text .w.accent.is-lit { color: var(--amber-ink); font-style: italic; }
.statement__body {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 6rem);
}
.statement__values {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-content: flex-start;
}
.value-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink-soft);
}
.value-chip::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--amber);
}
@media (max-width: 47.9375rem) {
  .statement__body { grid-template-columns: 1fr; }
}

/* ============================================================
   THE FIR TREE WAY
   ============================================================ */
.way { background: var(--fir); color: var(--cream); position: relative; overflow: clip; }
.way::before { /* soft ambient light */
  content: "";
  position: absolute;
  width: 60vw; height: 60vw;
  top: -20vw; right: -20vw;
  background: radial-gradient(circle, rgba(168, 179, 155, 0.12), transparent 65%);
  pointer-events: none;
}
.way__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 7rem);
}
.way__sticky {
  position: sticky;
  top: clamp(5rem, 14vh, 8rem);
  align-self: start;
}
.way__items { list-style: none; display: flex; flex-direction: column; }
.way-item {
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
  border-top: 1px solid var(--cream-line);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  opacity: 0.45;
  transition: opacity 0.6s var(--ease-soft);
}
.way-item.is-active { opacity: 1; }
.way-item__num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--amber);
  padding-top: 0.4rem;
  position: relative;
}
.way-item__num::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2.2rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 var(--amber-glow);
  opacity: 0;
  transition: opacity 0.6s var(--ease-soft);
}
.way-item.is-active .way-item__num::after {
  opacity: 1;
  animation: glow 2.6s var(--ease-soft) infinite;
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--amber-glow); }
  50% { box-shadow: 0 0 14px 4px var(--amber-glow); }
}
.way-item h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin-bottom: 0.5rem;
}
.way-item p {
  color: var(--cream-ink-soft);
  max-width: 34em;
}
@media (max-width: 47.9375rem) {
  .way__grid { grid-template-columns: 1fr; }
  .way__sticky { position: static; margin-bottom: var(--space-2); }
  .way-item { grid-template-columns: 2.2rem 1fr; opacity: 1; }
}

/* ============================================================
   SMART CARE VISUAL (line-art house + amber nodes)
   ============================================================ */
.constellation { background: var(--cream); position: relative; }
.constellation__stage {
  position: relative;
  max-width: 58rem;
  margin-inline: auto;
}
.constellation svg { width: 100%; height: auto; }
.constellation .draw {
  stroke: var(--fir);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.constellation .thread {
  stroke: var(--amber);
  fill: none;
  stroke-width: 1;
  opacity: 0.65;
}
.constellation .node-dot {
  fill: var(--amber);
}
.constellation .node-halo {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1;
  opacity: 0.4;
}
.constellation .node-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--ink-soft);
}
.constellation .centre-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  fill: var(--fir);
}
.constellation__caption {
  text-align: center;
  margin-top: var(--space-3);
  color: var(--ink-faint);
  font-size: var(--text-sm);
  max-width: 34em;
  margin-inline: auto;
}

/* ---------- Line-art vignettes (same language as the constellation) ---------- */
.sketch { display: block; height: auto; }
.sketch .draw {
  stroke: var(--fir);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.sketch .thread {
  stroke: var(--amber);
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
.sketch .node-dot { fill: var(--amber); }
.sketch .node-halo { fill: none; stroke: var(--amber); stroke-width: 1; opacity: 0.4; }
.on-dark .sketch .draw { stroke: var(--cream); opacity: 0.9; }

/* ============================================================
   CARE FINDER
   ============================================================ */
.finder {
  background: var(--cream-bright);
  border-block: 1px solid var(--line-soft);
}
.finder__panel {
  max-width: 46rem;
  margin-inline: auto;
  margin-top: var(--space-4);
  min-height: 21rem;
}
.finder__progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-4);
}
.finder__progress-step {
  flex: 1;
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.finder__progress-step::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.finder__progress-step.is-done::after { transform: scaleX(1); }
.finder__step { display: none; }
.finder__step.is-active { display: block; animation: finder-in 0.55s var(--ease-out); }
@keyframes finder-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.finder__question {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: var(--space-3);
}
.finder__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.finder__option {
  padding: 0.9rem 1.6rem;
  font-size: var(--text-base);
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--cream);
  transition: all var(--dur-fast) var(--ease-out);
  min-height: 48px;
}
.finder__option:hover {
  border-color: var(--amber);
  background: rgba(216, 154, 72, 0.08);
  transform: translateY(-2px);
}
.finder__option.is-selected {
  border-color: var(--fir);
  background: var(--fir);
  color: var(--cream);
}
.finder__back {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.finder__back:hover { color: var(--fir); }
.finder__result-note {
  margin: var(--space-3) 0 var(--space-4);
  color: var(--ink-soft);
  max-width: 36em;
}
.finder__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
}
.finder__tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  background: rgba(216, 154, 72, 0.14);
  color: var(--espresso);
  border: 1px solid rgba(216, 154, 72, 0.35);
}
.finder__disclaimer {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  max-width: 40em;
}

/* ============================================================
   CARE SERVICES — stacked sticky panels
   ============================================================ */
.services { background: var(--cream); }
.services__stack { display: flex; flex-direction: column; }
.service-panel {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--cream);
  border-top: 1px solid var(--line-soft);
}
.service-panel:nth-child(2) { background: var(--cream-bright); }
.service-panel:nth-child(3) { background: var(--cream-deep); }
.service-panel__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: clamp(5rem, 12vh, 7rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.service-panel:nth-child(even) .service-panel__media { order: 2; }
.service-panel__media { position: relative; }
.service-panel__media .photo {
  aspect-ratio: 4 / 4.6;
  max-height: 66vh;
}
.service-panel__num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--amber);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  display: block;
}
.service-panel h3 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-bottom: var(--space-2);
}
.service-panel p { color: var(--ink-soft); max-width: 34em; margin-bottom: var(--space-3); }
.service-panel__points {
  list-style: none;
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
}
.service-panel__points li {
  padding: 0.8rem 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.service-panel__points li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  transform: translateY(-2px);
}
@media (max-width: 47.9375rem) {
  .service-panel { position: static; min-height: 0; }
  .service-panel__inner { grid-template-columns: 1fr; padding-block: var(--space-5); }
  .service-panel:nth-child(even) .service-panel__media { order: 0; }
  .service-panel__media .photo { aspect-ratio: 16 / 10; }
}

/* ============================================================
   LIFE AT FIR TREE — horizontal gallery
   ============================================================ */
.life { background: var(--cream-bright); border-block: 1px solid var(--line-soft); overflow: clip; }
.life__head { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.life__track-wrap {
  margin-top: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.life__track-wrap::-webkit-scrollbar { display: none; }
.life__track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  width: max-content;
}
.life-card {
  position: relative;
  width: clamp(15rem, 26vw, 21rem);
  flex-shrink: 0;
  scroll-snap-align: center;
}
.life-card .photo {
  aspect-ratio: 3 / 4;
  border-radius: 0.6rem;
}
.life-card__label {
  margin-top: 0.9rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: var(--text-sm);
}
.life-card__label .idx {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--amber);
  font-size: var(--text-xs);
}
/* Controls: a clear hint, arrow buttons and a progress bar, so it is
   obvious there is more to see to the right. */
.life__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: var(--space-4);
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.life__hint {
  margin: 0;
  line-height: 1.4;
  color: var(--walnut);
  font-size: var(--text-sm);
  font-weight: 600;
}
.life__hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .life__hint-touch { display: none; }
  .life__hint-mouse { display: inline; }
}
.life__hint-arrow {
  display: inline-block;
  vertical-align: middle;
  width: 2.4rem; height: 1rem;
  margin-left: 0.6rem;
  fill: none; stroke: var(--amber-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  animation: life-arrow 1.8s var(--ease-soft) infinite;
}
@keyframes life-arrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
.life.is-seen-end .life__hint-arrow { animation: none; }
.life__buttons { display: flex; gap: 0.6rem; flex-shrink: 0; }
.life__btn {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--oak);
  background: var(--cream-bright);
  color: var(--fir);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.life__btn svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.life__btn:hover:not(:disabled) { background: var(--amber); border-color: var(--amber); transform: translateY(-1px); }
.life__btn:disabled { opacity: 0.4; cursor: default; }
.life__track-wrap { margin-top: var(--space-3); cursor: grab; }
.life__track-wrap.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.life__track-wrap.is-nudging { scroll-snap-type: none; }
.life__track-wrap.is-dragging .life-card { pointer-events: none; }
/* Fade the edge that still has more behind it */
.life__track-wrap {
  --fade-l: 0px; --fade-r: 5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.life__track-wrap.is-scrolled { --fade-l: 3rem; }
.life__track-wrap.is-end { --fade-r: 0px; }
.life__progress {
  position: relative;
  height: 4px;
  margin-top: var(--space-4);
  margin-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.life__progress-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 30%;
  border-radius: 4px;
  background: var(--oak);
  transform-origin: left;
}
@media (max-width: 47.9375rem) {
  .life-card { width: 70vw; }
  .life__hint { font-size: var(--text-xs); }
  .life__btn { width: 2.9rem; height: 2.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .life__hint-arrow { animation: none; }
}

/* ============================================================
   DINING
   ============================================================ */
.dining { background: var(--cream); }
.dining__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.dining__media .photo { aspect-ratio: 3 / 2; }
.dining__media { position: sticky; top: 6rem; }

.menu-card {
  border: 1px solid var(--line);
  background: var(--cream-bright);
  border-radius: 0.75rem;
  overflow: hidden;
}
.menu-card__head {
  padding: 1.4rem 1.6rem 0;
}
.menu-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
}
.menu-card__date { font-family: var(--font-body); font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; }
.menu-tabs {
  display: flex;
  gap: 0.25rem;
  margin-top: 1.2rem;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tab {
  padding: 0.7rem 1rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-faint);
  white-space: nowrap;
  position: relative;
  min-height: 44px;
}
.menu-tab::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: -1px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.menu-tab[aria-selected="true"] { color: var(--fir); }
.menu-tab[aria-selected="true"]::after { transform: scaleX(1); }
.menu-panel { padding: 1.4rem 1.6rem 1.6rem; }
.menu-panel[hidden] { display: none; }
.menu-item { padding: 0.9rem 0; border-bottom: 1px solid var(--line-soft); }
.menu-item:last-child { border-bottom: none; }
.menu-item__name { font-weight: 600; font-size: var(--text-base); }
.menu-item__desc { font-size: var(--text-sm); color: var(--ink-soft); margin-top: 0.15rem; }
.menu-card__note {
  padding: 1rem 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
@media (max-width: 47.9375rem) {
  .dining__grid { grid-template-columns: 1fr; }
  .dining__media { position: static; }
  .dining__media .photo { aspect-ratio: 16 / 10; }
  .menu-card__title { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}

/* ============================================================
   EXPLORE THE HOME
   ============================================================ */
.explore { background: var(--cream-bright); border-block: 1px solid var(--line-soft); }
.explore__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--space-5);
}
/* Framed tiles: photo at native 3:2, caption in its own bar below —
   nothing overlaps the image, and small sources are never over-stretched. */
.explore-tile {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--cream-bright);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.explore-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(24, 63, 50, 0.35);
}
.explore-tile .photo { border-radius: 0; aspect-ratio: 3 / 2; }
.explore-tile__label {
  margin-top: 0;
  padding: 0.85rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--text-sm);
  border-top: 1px solid var(--line-soft);
}
.explore-tile__label strong { font-weight: 600; }
.explore-tile__label span { color: var(--ink-faint); font-size: var(--text-xs); }
.explore-tile--a, .explore-tile--b, .explore-tile--c, .explore-tile--d { grid-column: span 6; }
.explore__tour {
  margin-top: var(--space-5);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: clamp(1.8rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(168, 179, 155, 0.18), transparent 60%),
    var(--cream);
}
@media (max-width: 47.9375rem) {
  .explore-tile--a, .explore-tile--b, .explore-tile--c, .explore-tile--d { grid-column: span 12; }
}

/* ============================================================
   ASK FIR TREE (concierge)
   ============================================================ */
.concierge { background: var(--fir); color: var(--cream); position: relative; overflow: clip; }
.concierge::after {
  content: "";
  position: absolute;
  width: 50vw; height: 50vw;
  bottom: -25vw; left: -15vw;
  background: radial-gradient(circle, rgba(216, 154, 72, 0.07), transparent 65%);
  pointer-events: none;
}
.concierge__panel {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin-inline: auto;
  margin-top: var(--space-4);
}
.concierge__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
  justify-content: center;
}
.concierge__chip {
  padding: 0.6rem 1.15rem;
  font-size: var(--text-sm);
  border: 1px solid var(--cream-line);
  border-radius: 100px;
  color: var(--cream-ink-soft);
  transition: all var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.concierge__chip:hover {
  border-color: var(--amber);
  color: var(--cream);
  background: rgba(216, 154, 72, 0.1);
}
.concierge__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--cream-line);
  border-radius: 100px;
  padding: 0.4rem 0.5rem 0.4rem 1.4rem;
  background: rgba(16, 43, 34, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.concierge__field:focus-within { border-color: var(--amber); }
.concierge__input {
  flex: 1;
  background: none;
  border: none;
  color: var(--cream);
  font: inherit;
  font-size: var(--text-base);
  min-height: 44px;
}
.concierge__input::placeholder { color: rgba(246, 242, 233, 0.7); }
.concierge__input:focus { outline: none; }
.concierge__send {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--fir);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.concierge__send:hover { transform: scale(1.06); background: var(--amber-soft); }
.concierge__answer {
  margin-top: var(--space-3);
  padding: 1.5rem 1.75rem;
  border-left: 2px solid var(--amber);
  background: rgba(246, 242, 233, 0.05);
  border-radius: 0 0.6rem 0.6rem 0;
  min-height: 4rem;
  display: none;
}
.concierge__answer.is-visible { display: block; animation: finder-in 0.5s var(--ease-out); }
.concierge__answer-q {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.concierge__answer-text { color: var(--cream-ink-soft); max-width: 40em; }
.concierge__answer-text a { color: var(--cream); }
.concierge__note {
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(246, 242, 233, 0.75);
  max-width: 38em;
  margin-inline: auto;
}
.concierge__handoff { max-width: 40rem; margin-inline: auto; }
.concierge-form .form-consent { color: var(--cream-ink-soft); }
.concierge-form .form-field label { color: var(--cream); }

.typing-caret {
  display: inline-block;
  width: 1px; height: 1em;
  background: var(--amber);
  vertical-align: -0.15em;
  margin-left: 2px;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ============================================================
   FAMILY STORIES
   ============================================================ */
.stories { background: var(--cream); position: relative; }
.stories__mark {
  font-family: var(--font-display);
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: 0.6;
  color: var(--amber);
  opacity: 0.85;
  user-select: none;
}
.stories__viewport { position: relative; min-height: 17rem; }
.story {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft), visibility 0s linear 0.8s;
}
.story.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.8s var(--ease-soft) 0.15s, transform 0.8s var(--ease-soft) 0.15s;
}
.story blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 440;
  line-height: 1.3;
  max-width: 24em;
}
.story figcaption {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.story figcaption::before {
  content: "";
  width: 2.4rem; height: 1px;
  background: var(--amber);
}
.stories__nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: var(--space-4);
}
.stories__dots { display: flex; gap: 0.5rem; }
.stories__dot {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.stories__dot::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.stories__dot[aria-selected="true"]::after {
  background: var(--amber);
  transform: scale(1.3);
}
.stories__arrows { display: flex; gap: 0.5rem; margin-left: auto; }
.stories__arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.stories__arrow:hover { border-color: var(--fir); background: rgba(24, 63, 50, 0.04); }

/* ============================================================
   HUMAN + TECHNOLOGY (cinematic)
   ============================================================ */
.cinematic {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  color: var(--cream);
  isolation: isolate;
  overflow: hidden;
}
.cinematic__media { position: absolute; inset: 0; z-index: -2; }
.cinematic__media .photo { position: absolute; inset: 0; }
.cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(16, 43, 34, 0.82) 15%, rgba(16, 43, 34, 0.35) 60%, rgba(16, 43, 34, 0.15) 100%);
}
.cinematic__title {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.1;
  max-width: 14em;
  margin-bottom: var(--space-3);
}
.cinematic__title .line { display: block; }
.cinematic__title .line em { color: var(--amber-soft); font-style: italic; }
.cinematic p { max-width: 36em; color: var(--cream-ink-soft); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta { background: var(--cream); text-align: center; }
.final-cta__title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  max-width: 16em;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}
.final-cta__contact {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.final-cta__contact a {
  color: var(--fir);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
}
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--space-4);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--fir-deep, #102B22);
  background-color: #102B22;
  color: var(--cream);
  padding-top: clamp(5rem, 10vw, 8.5rem);
  overflow: clip;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: var(--space-6);
}
.footer h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 242, 233, 0.75);
  margin-bottom: 1.2rem;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer a {
  color: var(--cream-ink-soft);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--dur-fast);
}
.footer a:hover { color: var(--amber-soft); }
.footer__brand p {
  color: var(--cream-ink-soft);
  font-size: var(--text-sm);
  max-width: 24em;
  margin-top: 1rem;
}
.footer__contact-lines { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--text-sm); }
.footer__contact-lines a { font-weight: 500; color: var(--cream); }
.footer__meta {
  border-top: 1px solid var(--cream-line);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--text-xs);
  color: rgba(246, 242, 233, 0.68);
}
.footer__meta a { font-size: inherit; }
@media (max-width: 63.9375rem) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 47.9375rem) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero {
  position: relative;
  padding-top: clamp(9rem, 22vh, 13rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  background: var(--fir);
  color: var(--cream);
  isolation: isolate;
  overflow: hidden;
}
.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 43, 34, 0.72), rgba(16, 43, 34, 0.88));
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media .photo { position: absolute; inset: 0; }
.page-hero .lead { color: var(--cream-ink-soft); }
.page-hero__crumb {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 242, 233, 0.55);
  margin-bottom: var(--space-3);
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.page-hero__crumb a { color: inherit; text-decoration: none; }
.page-hero__crumb a:hover { color: var(--cream); }
.page-hero__crumb span { color: var(--amber-soft); }

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.feature-row--flip .feature-row__media { order: 2; }
.feature-row__media .photo { aspect-ratio: 4 / 4.4; }
.feature-row h2, .feature-row h3 { margin-bottom: var(--space-2); }
.feature-row p { color: var(--ink-soft); margin-bottom: var(--space-2); max-width: 36em; }
@media (max-width: 47.9375rem) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row--flip .feature-row__media { order: 0; }
  .feature-row__media .photo { aspect-ratio: 16 / 10; }
}

.fact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-block: 1px solid var(--line-soft);
}
.fact {
  padding: clamp(2rem, 4vw, 3.25rem) 1.5rem;
  text-align: center;
}
.fact__value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--fir);
}
.fact__label { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.4rem; }


.numbered-list { list-style: none; counter-reset: nl; }
.numbered-list > li {
  counter-increment: nl;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  padding: clamp(2.2rem, 4.5vw, 3.4rem) 0;
  border-top: 1px solid var(--line-soft);
}
.on-dark .numbered-list > li { border-top-color: var(--cream-line); }
.numbered-list > li::before {
  content: "0" counter(nl);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--amber);
  font-size: var(--text-lg);
  padding-top: 0.2rem;
}
.numbered-list h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0.5rem; }
.numbered-list p { color: var(--ink-soft); max-width: 38em; }
.on-dark .numbered-list p { color: var(--cream-ink-soft); }
@media (max-width: 47.9375rem) {
  .numbered-list > li { grid-template-columns: 2.6rem 1fr; gap: 1rem; }
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.45rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: var(--text-sm);
  font-weight: 600;
}
.form-field .optional { color: var(--ink-faint); font-weight: 400; }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  color: var(--ink);
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: var(--cream-bright);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  min-height: 48px;
  width: 100%;
}
.form-field textarea { min-height: 8.5rem; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(216, 154, 72, 0.22);
}
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select { border-color: #A94438; }
.form-error {
  font-size: var(--text-xs);
  color: #A94438;
  display: none;
}
.form-field.has-error .form-error { display: block; }
.form-consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.form-consent input {
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--fir);
  flex-shrink: 0;
}
.form-status {
  grid-column: 1 / -1;
  display: none;
  padding: 1.1rem 1.4rem;
  border-radius: 0.6rem;
  font-size: var(--text-sm);
}
.form-status.is-visible { display: block; animation: finder-in 0.4s var(--ease-out); }
.form-status--success { background: rgba(24, 63, 50, 0.07); border: 1px solid rgba(24, 63, 50, 0.2); color: var(--fir); }
.form-status--error { background: rgba(169, 68, 56, 0.08); border: 1px solid rgba(169, 68, 56, 0.3); color: #8C382E; }
.btn .spinner {
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: none;
  animation: spin 0.8s linear infinite;
}
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 47.9375rem) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOTION / REVEALS
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-inview { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="left"].is-inview,
[data-reveal="right"].is-inview { transform: none; }

[data-reveal="mask"] {
  transform: none;
  opacity: 1;
  clip-path: inset(8% 6% 8% 6% round 4px);
  transition: clip-path 1.3s var(--ease-soft);
}
[data-reveal="mask"].is-inview { clip-path: inset(0 0 0 0 round 0); }

.words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
  transition-delay: calc(var(--wi) * 70ms);
}
.words.is-inview .w { opacity: 1; transform: none; }

/* Native-aspect photo: for 600×400-source photography — shown at 3:2
   and capped in size so it is never stretched into graininess. */
.photo.photo--32 {
  aspect-ratio: 3 / 2;
  max-height: none;
  border-radius: 0.75rem;
  max-width: 34rem;
  margin-inline: auto;
}

/* ---------- 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;
    transition-delay: 0s !important;
  }
  [data-reveal], .words .w { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .statement__text .w { color: var(--fir) !important; }
}

/* ============================================================
   WARM PASS — 2026-09-30
   The site read as dark: a forest hero and four deep-green bands.
   This layer keeps the design system and re-tunes it toward warm
   white, soft green and natural wood. It is deliberately appended
   so every change is in one place and easy to review or unpick.
   ============================================================ */

/* ---------- Wood: a surface, used sparingly ---------- */
/* Warm oak with a faint grain drawn in CSS — no image, no download. */
.wood {
  background-color: var(--oak);
  background-image:
    repeating-linear-gradient(90deg, rgba(107, 74, 48, 0.07) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 29px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(107, 74, 48, 0.10));
  color: var(--fir-deep);
}
.wood-rule { height: 6px; background: var(--oak); position: relative; }
.wood-rule::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(107, 74, 48, 0.12) 0 1px, transparent 1px 9px);
}

/* ---------- Small text in amber becomes readable amber ---------- */
.service-panel__num,
.life-card__label .idx,
.numbered-list > li::before,
.way-item__num,
.concierge__answer-q { color: var(--amber-ink); }
.on-dark .numbered-list > li::before { color: var(--amber-soft); }

/* ---------- Hero: the woodland path, with white text kept legible ---------- */
/* The photo stays natural; a quiet shade sits only where the words are. */
.hero { min-height: min(100svh, 56rem); }
.hero::before {
  background:
    radial-gradient(90% 70% at 18% 88%, rgba(14, 30, 22, 0.62), transparent 72%),
    linear-gradient(180deg, rgba(14, 30, 22, 0.55) 0%, rgba(14, 30, 22, 0.1) 22%, rgba(14, 30, 22, 0.12) 50%, rgba(14, 30, 22, 0.72) 100%);
}
.hero__status {
  border-color: rgba(248, 243, 234, 0.35);
  background: rgba(14, 30, 22, 0.45);
}
.hero__title { text-shadow: 0 2px 24px rgba(10, 22, 16, 0.55); }
.hero__sub { color: #FBF7EF; text-shadow: 0 1px 10px rgba(10, 22, 16, 0.6); }
.hero .btn--ghost { border-color: rgba(248, 243, 234, 0.6); background: rgba(14, 30, 22, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero .btn--ghost:hover { background: rgba(14, 30, 22, 0.5); border-color: var(--cream); }
@media (max-width: 47.9375rem) {
  .hero { min-height: 92svh; }
  .hero__media .photo { background-position: 40% 50%; }
}

/* ---------- The Fir Tree Way: from deep green to warm linen ---------- */
.way {
  background: var(--linen);
  color: var(--ink);
  border-top: 6px solid var(--oak);
}
.way::before { background: radial-gradient(circle, rgba(201, 165, 124, 0.28), transparent 65%); }
.way .eyebrow { color: var(--ink-faint); }
.way .lead { color: var(--ink-soft); }
.way .text-link { color: var(--ink); }
.way-item { border-top-color: var(--line); opacity: 0.55; }
.way-item.is-active { opacity: 1; }
.way-item p { color: var(--ink-soft); }
.way-item__num::after { background: var(--amber); }
@media (max-width: 47.9375rem) { .way-item { opacity: 1; } }

/* ---------- Ask Fir Tree: from deep green to bright cream ---------- */
.concierge {
  background: var(--cream-bright);
  color: var(--ink);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.concierge::after { background: radial-gradient(circle, rgba(216, 154, 72, 0.12), transparent 65%); }
.concierge .eyebrow { color: var(--ink-faint); }
.concierge .lead { color: var(--ink-soft); }
.concierge__chip {
  border-color: var(--line);
  color: var(--ink-soft);
  background: var(--cream);
}
.concierge__chip:hover { border-color: var(--amber); color: var(--ink); background: rgba(216, 154, 72, 0.12); }
.concierge__field {
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 8px 28px -18px rgba(24, 63, 50, 0.35);
}
.concierge__input { color: var(--ink); }
.concierge__input::placeholder { color: var(--ink-faint); }
.concierge__answer { background: var(--cream); border-left-color: var(--amber); }
.concierge__answer-text { color: var(--ink-soft); }
.concierge__answer-text a { color: var(--fir); }
.concierge__note { color: var(--ink-faint); }
.concierge-form .form-consent { color: var(--ink-soft); }
.concierge-form .form-field label { color: var(--ink); }
.concierge .btn--primary { background: var(--fir); color: var(--cream); }
.concierge .btn--primary:hover { background: var(--fir-soft); }
.concierge .btn--ghost { border-color: var(--line); color: var(--ink); }
.concierge .btn--ghost:hover { border-color: var(--fir); background: rgba(24, 63, 50, 0.04); }
.concierge .text-link { color: var(--ink); }

/* ---------- People-first band: warm photo, gentle walnut overlay ---------- */
.cinematic { min-height: min(80svh, 44rem); }
.cinematic::before {
  background: linear-gradient(100deg, rgba(43, 38, 32, 0.80) 10%, rgba(43, 38, 32, 0.45) 55%, rgba(43, 38, 32, 0.18) 100%);
}

/* ---------- Footer: keep the deep green, add a wood edge ---------- */
.footer { border-top: 6px solid var(--oak); }

/* ---------- Dining menu card: a wooden menu board ---------- */
.menu-card,
.dining__menu {
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--oak-light) inset, 0 18px 40px -28px rgba(107, 74, 48, 0.35);
}

/* ---------- Cards and rules: warmer, softer ---------- */
.service-panel,
.life-card,
.explore-tile,
.finder__card,
.form-card,
.info-card {
  border-color: var(--line-soft);
}

/* ---------- Focus: one visible ring everywhere, for keyboard users ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { border-radius: 100px; }
.on-dark a:focus-visible,
.on-dark button:focus-visible,
.footer a:focus-visible { outline-color: var(--amber-soft); }

/* ---------- Tap targets: 44px minimum on touch screens ---------- */
/* Text links keep their look; the hit area grows around them. */
@media (pointer: coarse) {
  .text-link,
  .footer a,
  .page-hero__crumb a,
  .footer__contact a,
  .cta-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.3rem;
    margin-block: -0.3rem;
  }
  .footer ul { gap: 0.2rem; }
}


/* ---------- Inner page headers: let the photo through ---------- */
/* 72–88% green over every photo made each page open in near-darkness. A
   lighter, warmer wash keeps the heading readable and the photo visible. */
.page-hero--photo::before {
  background:
    radial-gradient(80% 75% at 20% 60%, rgba(20, 28, 20, 0.45), transparent 75%),
    linear-gradient(180deg, rgba(20, 28, 20, 0.62) 0%, rgba(20, 28, 20, 0.30) 30%, rgba(20, 28, 20, 0.32) 55%, rgba(16, 43, 34, 0.74) 100%);
}
.page-hero h1 { text-shadow: 0 2px 22px rgba(16, 43, 34, 0.5); }
.page-hero .lead { color: rgba(248, 243, 234, 0.92); text-shadow: 0 1px 12px rgba(16, 43, 34, 0.45); }
.page-hero__crumb { text-shadow: 0 1px 8px rgba(16, 43, 34, 0.5); }

/* ---------- In-page anchors land below the fixed navigation ---------- */
[id] { scroll-margin-top: 5.5rem; }


/* ============================================================
   CALM PASS — 2026-09-30
   The home's own photos are 1200px phone-camera shots that turn grainy
   when shown big, so they are kept to modest frames and never zoomed.
   Sharp stock landscapes carry the big moments: every page header is a
   calm landscape, and every feature photo shares one frame.
   ============================================================ */

/* ---------- The home's own photos: small, sharp, never zoomed ---------- */
.photo.photo--own {
  max-width: min(100%, 24rem);
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  max-height: none;
  border-radius: 0.75rem;
}
.photo--own.photo--arch { aspect-ratio: 4 / 4.6; max-width: min(100%, 19rem); border-radius: 300px 300px var(--radius-soft) var(--radius-soft); }
.photo--own.photo--organic { aspect-ratio: 1 / 1; max-width: min(100%, 20rem); border-radius: var(--radius-organic); }
.explore-tile .photo.photo--own { max-width: none; border-radius: 0; }

/* Explore grids: more, smaller tiles instead of two big ones per row */
.explore__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.explore__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.explore-tile--a, .explore-tile--b, .explore-tile--c, .explore-tile--d { grid-column: auto; }
.explore__grid--3 { max-width: 60rem; }
.explore-tile__label { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
@media (max-width: 63.9375rem) {
  .explore__grid, .explore__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.9375rem) {
  .explore-tile--a, .explore-tile--b, .explore-tile--c, .explore-tile--d { grid-column: auto; }
  .explore-tile__label { flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.8rem; }
}


/* ---------- One frame for every feature photo ---------- */
/* Care panels, feature rows and dining all use the same portrait frame, so
   the site reads as one piece rather than a mix of arches, blobs and odd
   small rectangles. The home's own photos use the same frame, at a size
   their 1200px sources handle well. */
.feature-row__media .photo[class],
.service-panel__media .photo[class] {
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 4 / 5;
  max-height: none;
  margin-inline: auto;
  border-radius: 1.25rem;
  box-shadow: 0 22px 44px -30px rgba(43, 38, 32, 0.5);
}
.dining__media .photo[class] {
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  border-radius: 1.25rem;
  box-shadow: 0 22px 44px -30px rgba(43, 38, 32, 0.5);
}
/* Menu tabs swap this photo: a short, soft fade */
.dining__media .photo { transition: opacity 0.22s ease; }
.dining__media .photo.is-changing { opacity: 0.25; }
@media (max-width: 63.9375rem) {
  .dining__media .photo[class] { aspect-ratio: 3 / 2; max-width: 40rem; }
  /* One column: put the photo directly above the menu, so choosing a meal
     visibly changes the picture right next to the tabs. */
  .dining__grid { row-gap: 0; }
  .dining__grid > div:not(.dining__media) { display: contents; }
  .dining__media { order: 1; margin-bottom: var(--space-3); }
  .dining__grid .menu-card { order: 2; }
  .dining__grid .menu-card ~ * { order: 3; }
}
@media (max-width: 47.9375rem) {
  .feature-row__media .photo[class],
  .service-panel__media .photo[class] { aspect-ratio: 4 / 3; max-width: none; }
}

.page-hero--photo .page-hero__crumb { color: rgba(248, 243, 234, 0.9); }

/* ============================================================
   GLASS & MOTION PASS — 2026-09-30
   One card language and one motion language for the whole site:
   warm frosted glass (never cold or grey), a single radius and shadow,
   and slow, soft movement. Everything here switches off for visitors
   who ask their device for reduced motion.
   ============================================================ */
:root {
  --radius-card: 1.25rem;
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-calm: 1.1s;
  /* warm glass on cream */
  --glass: rgba(252, 249, 243, 0.66);
  --glass-strong: rgba(252, 249, 243, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-blur: blur(18px) saturate(1.35);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 18px 44px -30px rgba(74, 52, 34, 0.45);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 28px 56px -30px rgba(74, 52, 34, 0.55);
  /* smoky glass over photos */
  --glass-dark: rgba(22, 30, 22, 0.3);
  --glass-dark-edge: rgba(255, 250, 240, 0.24);
}

/* ---------- Page arrival: a soft fade, never a flash ---------- */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
main { animation: page-in 0.7s var(--ease-calm) both; }

/* ---------- One reveal: rise, settle and come into focus ---------- */
[data-reveal] {
  transform: translateY(22px);
  filter: blur(4px);
  transition:
    opacity var(--dur-calm) var(--ease-calm),
    transform var(--dur-calm) var(--ease-calm),
    filter var(--dur-calm) var(--ease-calm);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-inview { transform: none; filter: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="mask"] { filter: none; transition: clip-path 1.4s var(--ease-calm); }
/* photos settle gently as their frame opens */
[data-reveal="mask"] > .photo { transform: scale(1.06); transition: transform 1.8s var(--ease-calm); }
[data-reveal="mask"].is-inview > .photo { transform: none; }
.words .w { transition-duration: 0.9s; transition-timing-function: var(--ease-calm); }

/* ---------- Warm glass cards: one radius, one edge, one shadow ---------- */
.menu-card,
.finder__panel,
.explore-tile,
.explore__tour,
.fact-strip,
.grid-2 > div > .form-grid,
.grid-2 > .form-grid {
  position: relative;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
}
.finder__panel { padding: clamp(1.5rem, 4vw, 2.75rem); }
.grid-2 > div > .form-grid,
.grid-2 > .form-grid { padding: clamp(1.4rem, 3.5vw, 2.5rem); }
.fact-strip { overflow: hidden; }
.fact + .fact { border-left: 1px solid var(--line-soft); }
.explore__tour { background: var(--glass); }
.form-field input,
.form-field select,
.form-field textarea { background: rgba(255, 255, 255, 0.72); }

/* a soft sheen that follows the pointer across a card (set by main.js) */
.menu-card::after,
.finder__panel::after,
.explore-tile::after,
.explore__tour::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 244, 222, 0.55), transparent 45%);
  transition: opacity 0.6s var(--ease-calm);
}
.menu-card:hover::after,
.finder__panel:hover::after,
.explore-tile:hover::after,
.explore__tour:hover::after { opacity: 1; }

/* cards lift slowly, never jump */
.explore-tile { transition: transform 0.7s var(--ease-calm), box-shadow 0.7s var(--ease-calm); }
.explore-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.explore-tile .photo { transition: transform 1.4s var(--ease-calm); }
.explore-tile:hover .photo { transform: scale(1.03); }
.explore-tile__label { background: transparent; }

/* every framed photo shares the card radius */
.life-card .photo { border-radius: 1rem; }
.life-card .photo { transition: transform 1.2s var(--ease-calm), box-shadow 1.2s var(--ease-calm); }
.life-card:hover .photo { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

/* ---------- Buttons: a slow warm light passes over on hover ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition-duration: 0.5s; transition-timing-function: var(--ease-calm); }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 228, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 1.1s var(--ease-calm);
}
.btn:hover::after { transform: translateX(120%); }

/* ---------- Navigation: warm glass once you scroll ---------- */
.nav.is-scrolled {
  background: rgba(250, 246, 238, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 0 var(--line-soft), 0 14px 36px -24px rgba(74, 52, 34, 0.4);
}
.mobile-menu {
  background: rgba(20, 44, 34, 0.86);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
          backdrop-filter: blur(22px) saturate(1.2);
}

/* ---------- Smoky glass over photographs ---------- */
.hero__status,
.page-hero__crumb {
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-edge);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.page-hero__crumb {
  display: inline-flex;
  padding: 0.45rem 1rem;
  border-radius: 100px;
}
.hero .btn--ghost,
.page-hero .btn--ghost {
  background: var(--glass-dark);
  border-color: var(--glass-dark-edge);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
}

/* the "People first" band: text on a smoky glass card */
.cinematic .container > * { max-width: 40rem; }
.cinematic .container {
  position: relative;
}
.cinematic__glass {
  max-width: 40rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius-card);
  background: rgba(20, 30, 22, 0.34);
  border: 1px solid var(--glass-dark-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
          backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 30px 60px -36px rgba(0, 0, 0, 0.6);
}
.cinematic__glass .cinematic__title { font-size: clamp(2rem, 4.2vw, 3.4rem); }

/* the hero's facts bar: key details on glass, low on the photo */
.hero__facts {
  position: absolute;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: clamp(3rem, 8vh, 6rem);
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-card);
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
          backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 24px 50px -30px rgba(0, 0, 0, 0.55);
  color: var(--cream);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__facts li { padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: 0.15rem; }
.hero__facts li + li { border-left: 1px solid var(--glass-dark-edge); }
.hero__facts strong { font-family: var(--font-display); font-weight: 480; font-size: 1.35rem; line-height: 1.1; }
.hero__facts span { font-size: var(--text-xs); letter-spacing: 0.04em; color: rgba(251, 247, 239, 0.86); }
.hero__facts a { color: inherit; text-decoration: none; }
.hero__facts a:hover strong { color: var(--amber-soft); }
.hero__scroll { display: none; }
/* Narrower screens: the bar sits under the buttons instead of beside them */
@media (max-width: 74.9375rem) {
  .hero { flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .hero__inner { padding-bottom: var(--space-3); }
  .hero__facts {
    position: static;
    align-self: flex-start;
    margin: 0 0 clamp(2rem, 6vh, 3.5rem) max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
  }
}
@media (max-width: 47.9375rem) {
  .hero__facts {
    align-self: stretch;
    margin-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero__facts li { padding: 0.75rem 0.9rem; }
  .hero__facts li:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--glass-dark-edge); }
  .hero__facts li:last-child a { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .hero__facts strong { font-size: 1rem; }
  .hero__facts span { font-size: 0.72rem; line-height: 1.3; }
}

/* sunlight drifting slowly through the trees */
.hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(38% 42% at 70% 18%, rgba(255, 226, 170, 0.28), transparent 70%);
  mix-blend-mode: soft-light;
  animation: sun-drift 28s ease-in-out infinite alternate;
}
@keyframes sun-drift {
  from { transform: translate3d(-4%, -2%, 0); opacity: 0.7; }
  to   { transform: translate3d(5%, 3%, 0);  opacity: 1; }
}

/* ---------- Life gallery controls and story arrows join the glass family ---------- */
.life__btn,
.stories__arrow {
  background: var(--glass-strong);
  border-color: var(--glass-edge);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}

/* ---------- Reduced motion: calm means still ---------- */
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  .hero::after { animation: none; }
  [data-reveal] { filter: none !important; }
  [data-reveal="mask"] > .photo { transform: none !important; }
  .btn::after { display: none; }
}
@media (hover: none) {
  .menu-card::after, .finder__panel::after, .explore-tile::after, .explore__tour::after { display: none; }
}
.hero__facts a { display: flex; flex-direction: column; gap: 0.15rem; }
/* the dining photo both settles on reveal and fades between meals */
.dining__media > .photo { transition: transform 1.8s var(--ease-calm), opacity 0.22s ease; }

/* Single-column layouts: nothing stays pinned, so nothing slides under a card */
@media (max-width: 47.9375rem) {
  .grid-2 > [style*="sticky"],
  .feature-row > [style*="sticky"] { position: static !important; }
}
/* The hero always leaves room for the navigation above its words */
.hero { padding-top: 6.5rem; }

/* ============================================================
   CALMER MOTION — 2026-09-30
   Soft everywhere (tuned a little quicker after review): gentle fades, short travel, light
   blur, and gentle loops. (Homepage headings and line drawings are also
   calmed in main.js: they fade in whole instead of animating piece by piece.)
   ============================================================ */
:root {
  --dur-calm: 1.35s;
  --ease-calm: cubic-bezier(0.25, 0.46, 0.3, 1);
}
main { animation-duration: 0.9s; }

[data-reveal] { transform: translateY(12px); filter: blur(2px); }
[data-reveal="fade"] { transform: none; }
[data-reveal].is-inview { transform: none; filter: none; }
[data-reveal="mask"] { filter: none; transition: clip-path 1.75s var(--ease-calm); clip-path: inset(4% 3% 4% 3% round 1.25rem); }
[data-reveal="mask"].is-inview { clip-path: inset(0 0 0 0 round 0); }
[data-reveal="mask"] > .photo { transform: scale(1.03); transition: transform 2.2s var(--ease-calm); }
.dining__media > .photo { transition: transform 2.2s var(--ease-calm), opacity 0.32s ease; }
.dining__media .photo.is-changing { opacity: 0.35; }

.words .w {
  transform: translateY(0.3em);
  transition-duration: 1.05s;
  transition-delay: calc(var(--wi) * 90ms);
}

/* loops: slower, and the swipe hint settles after a few beats */
.pulse-dot::after { animation-duration: 4s; }
.way-item.is-active .way-item__num::after { animation-duration: 3.6s; }
.life__hint-arrow { animation-duration: 2.4s; animation-iteration-count: 4; }
.hero::after { animation-duration: 38s; opacity: 0.8; }
@keyframes sun-drift {
  from { transform: translate3d(-2%, -1%, 0); opacity: 0.55; }
  to   { transform: translate3d(3%, 2%, 0);  opacity: 0.8; }
}

/* hover: slower, smaller */
.btn::after { transition-duration: 1.4s; background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 228, 0.3) 50%, transparent 62%); }
.explore-tile { transition-duration: 0.8s; }
.explore-tile:hover { transform: translateY(-3px); }
.explore-tile:hover .photo { transform: scale(1.02); }
.life-card:hover .photo { transform: translateY(-2px); }
.menu-card::after, .finder__panel::after, .explore-tile::after, .explore__tour::after {
  background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 244, 222, 0.35), transparent 45%);
  transition-duration: 0.8s;
}

/* small pop-ins (care finder steps, answers, form messages) ease in gently */
.finder__step.is-active,
.concierge__answer.is-visible,
.form-status.is-visible { animation-duration: 0.7s; animation-timing-function: var(--ease-calm); }

/* ============================================================
   CALMER HOMEPAGE — 2026-09-30
   Fewer sections, more variety of rhythm: care as three cards side by
   side, and family stories on a quiet landscape with a glass card.
   ============================================================ */

/* ---------- Care: three cards ---------- */
.care-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.care-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.8s var(--ease-calm), box-shadow 0.8s var(--ease-calm);
}
.care-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.care-card__photo { aspect-ratio: 4 / 3; border-radius: 0; transition: transform 1.3s var(--ease-calm); }
.care-card:hover .care-card__photo { transform: scale(1.02); }
.care-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); flex: 1; }
.care-card__num { font-family: var(--font-display); font-style: italic; color: var(--amber-ink); font-size: var(--text-sm); }
.care-card h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; }
.care-card p { color: var(--ink-soft); font-size: var(--text-sm); }
.care-card__link { margin-top: auto; padding-top: 0.5rem; }
/* the whole card is the link's hit area */
.care-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.care-cards__more { margin-top: var(--space-4); text-align: center; color: var(--ink-soft); font-size: var(--text-sm); }
.care-cards__more a { color: var(--fir); font-weight: 600; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.services { padding-bottom: clamp(4rem, 9vw, 7rem); }
@media (max-width: 63.9375rem) {
  .care-cards { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
}

/* ---------- Family stories on a landscape ---------- */
.stories--band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--cream);
  background: var(--fir-deep);
  padding-block: clamp(5rem, 12vw, 9rem);
}
.stories__media { position: absolute; inset: 0; z-index: -2; }
.stories__media .photo { position: absolute; inset: 0; }
.stories--band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 28, 20, 0.35), rgba(20, 28, 20, 0.5));
}
.stories__glass {
  max-width: 44rem;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  border-radius: var(--radius-card);
  background: rgba(20, 30, 22, 0.36);
  border: 1px solid var(--glass-dark-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
          backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 30px 60px -36px rgba(0, 0, 0, 0.6);
}
.stories--band .eyebrow { color: var(--cream-ink-soft); }
.stories--band .stories__mark { color: var(--amber-soft); }
.stories--band .story blockquote { color: var(--cream); }
.stories--band .story figcaption { color: rgba(248, 243, 234, 0.85); }
.stories--band .stories__dot::after { background: rgba(248, 243, 234, 0.4); }
.stories--band .stories__dot[aria-selected="true"]::after { background: var(--amber-soft); }
.stories--band .stories__arrow { color: var(--fir); }
.stories__source { margin-top: var(--space-3); font-size: var(--text-sm); color: rgba(248, 243, 234, 0.8); }
.stories--band .story blockquote { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }

/* ============================================================
   INNER PAGES — 2026-09-30
   Each page gets its own shape instead of the same alternating rows.
   ============================================================ */

/* ---------- Care: a tabbed guide to the five kinds of care ---------- */
.care-guide { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.care-guide.is-ready { grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.care-guide:not(.is-ready) .care-guide__tabs { display: none; }
.care-guide__panels { display: grid; gap: 2rem; }
.care-guide__tabs { display: flex; flex-direction: column; gap: 0.35rem; position: sticky; top: 7rem; }
.care-guide__tab {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  padding: 0.95rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.6s var(--ease-calm), border-color 0.6s var(--ease-calm), box-shadow 0.6s var(--ease-calm), color 0.6s var(--ease-calm);
}
.care-guide__tab:hover { background: rgba(255, 255, 255, 0.45); color: var(--fir); }
.care-guide__tab[aria-selected="true"] {
  background: var(--glass);
  border-color: var(--glass-edge);
  box-shadow: var(--shadow-soft);
  color: var(--fir);
  font-weight: 600;
}
.care-guide__num { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--amber-ink); font-size: var(--text-sm); }
.care-guide__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
}
.care-guide__panel.is-shown { animation: care-panel-in 0.7s var(--ease-calm) both; }
@keyframes care-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.care-guide__photo .photo[class] { width: 100%; max-width: 22rem; aspect-ratio: 4 / 5; margin-inline: auto; border-radius: 1rem; }
.care-guide__kicker { font-family: var(--font-display); font-style: italic; color: var(--amber-ink); margin-bottom: 0.6rem; }
.care-guide__title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; margin-bottom: 1rem; }
.care-guide__text p { color: var(--ink-soft); margin-bottom: 1.25rem; max-width: 36em; }
@media (max-width: 63.9375rem) {
  .care-guide.is-ready { grid-template-columns: 13rem minmax(0, 1fr); }
  .care-guide__panel { grid-template-columns: 1fr; }
  .care-guide__photo .photo[class] { aspect-ratio: 3 / 2; max-width: none; }
}
@media (max-width: 47.9375rem) {
  .care-guide.is-ready { grid-template-columns: 1fr; gap: 1.25rem; }
  .care-guide__tabs {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.4rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter) 0.5rem;
    scrollbar-width: none;
  }
  .care-guide__tabs::-webkit-scrollbar { display: none; }
  .care-guide__tab { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 0.7rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .care-guide__panel.is-shown { animation: none; } }

/* ---------- Care detail pages: points as a 2×2 set of glass cards ---------- */
.point-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.point-card {
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--glass-edge);
  border-radius: 1.1rem;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
}
.point-card h3 { font-size: var(--text-lg); margin-bottom: 0.45rem; }
.point-card p { color: var(--ink-soft); font-size: var(--text-sm); }
@media (max-width: 63.9375rem) { .point-cards { grid-template-columns: 1fr; } }

/* ---------- "Other kinds of care" strip ---------- */
.other-care { background: var(--linen); border-block: 1px solid var(--line-soft); }
.other-care__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1rem; }
.other-care__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 2.6rem 1.1rem 1.2rem;
  border: 1px solid var(--glass-edge);
  border-radius: 1rem;
  background: var(--glass-strong);
  box-shadow: var(--shadow-soft);
  color: var(--fir);
  text-decoration: none;
  transition: transform 0.7s var(--ease-calm), box-shadow 0.7s var(--ease-calm);
}
.other-care__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.other-care__name { font-weight: 600; }
.other-care__line { font-size: var(--text-xs); color: var(--ink-soft); }
.other-care__link .arrow { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--amber-ink); transition: transform 0.9s var(--ease-calm); }
.other-care__link:hover .arrow { transform: translate(3px, -50%); }
@media (max-width: 63.9375rem) { .other-care__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 29.9375rem) { .other-care__links { grid-template-columns: 1fr; } }

/* ---------- Our Home: garden and facilities side by side ---------- */
.pair-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(1rem, 4vw, 3rem); }
.pair-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.pair-card__photo .photo[class] { aspect-ratio: 3 / 2; border-radius: 0; max-width: none; }
.pair-card__body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.pair-card__title { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; margin: 0.4rem 0 0.9rem; }
.pair-card__body p { color: var(--ink-soft); margin-bottom: 1rem; }
@media (max-width: 47.9375rem) { .pair-cards { grid-template-columns: 1fr; } }

/* ---------- Smart Care: six principles as light glass cards ---------- */
.principles-section { background: var(--linen); border-block: 1px solid var(--line-soft); }
.principle-cards {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  counter-reset: principle;
}
.principle-cards > li {
  counter-increment: principle;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  background: var(--glass-strong);
  box-shadow: var(--shadow-soft);
}
.principle-cards > li::before {
  content: "0" counter(principle);
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--amber-ink);
  margin-bottom: 0.8rem;
}
.principle-cards h3 { font-size: var(--text-xl); margin-bottom: 0.5rem; color: var(--fir); }
.principle-cards p { color: var(--ink-soft); font-size: var(--text-sm); }
@media (max-width: 63.9375rem) { .principle-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.9375rem) { .principle-cards { grid-template-columns: 1fr; } }

/* ---------- Official CQC widget: its own calm band under the hero ----------
   The widget is CQC's own markup and styles (loaded from cqc.org.uk) and is
   left exactly as delivered. Only the band and the soft frame are ours. */
.cqc-band {
  background: var(--linen);
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.cqc-band__inner {
  max-width: 64rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.cqc-band__title { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; margin: 0.4rem 0 0.9rem; }
.cqc-band__text p:not(.eyebrow) { color: var(--ink-soft); max-width: 34em; }
.cqc-band__widget {
  justify-self: end;
  padding: 0.6rem;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.cqc-band__fallback { display: block; padding: 1rem; color: var(--fir); font-weight: 600; }
@media (max-width: 47.9375rem) {
  .cqc-band__inner { grid-template-columns: 1fr; }
  .cqc-band__widget { justify-self: center; }
}
.care-guide__panel[hidden] { display: none; }

/* ============================================================
   QUIETER, MORE HUMAN — 2026-09-30
   Fewer effects, more room. Cards on cream are plain warm paper (glass
   is kept only where words sit on a photograph), the attention-seeking
   tricks are gone, and the page breathes. The "heartbeat" is the home's
   own day: a live greeting, today's office hours and the meal for the
   time of day (see main.js).
   ============================================================ */
:root {
  --glass: #FCF9F3;
  --glass-strong: #FFFDF8;
  --glass-edge: rgba(107, 74, 48, 0.14);
  --glass-blur: none;
  --shadow-soft: 0 10px 30px -26px rgba(74, 52, 34, 0.4);
  --shadow-lift: 0 16px 36px -26px rgba(74, 52, 34, 0.45);
}

/* no pointer sheen, no shimmer, no drifting light, no blur-in */
.menu-card::after, .finder__panel::after, .explore-tile::after, .explore__tour::after { display: none; }
.btn::after { display: none; }
.hero::after { display: none; }
[data-reveal] { filter: none; transform: translateY(10px); }
[data-reveal="fade"], [data-reveal="mask"] { transform: none; }
[data-reveal].is-inview { transform: none; }
.pulse-dot::after { animation: none; display: none; }

/* hover: a gentle lift is enough */
.care-card:hover, .explore-tile:hover { transform: translateY(-2px); }
.care-card:hover .care-card__photo, .explore-tile:hover .photo { transform: none; }

/* hero: just the words, room to breathe */
.hero__status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber-soft);
  flex-shrink: 0;
}
.hero__status { text-transform: none; letter-spacing: 0.01em; font-size: var(--text-sm); font-weight: 500; }
.hero__title { max-width: 12em; margin-bottom: var(--space-3); }
.hero__sub { margin-bottom: var(--space-5); }
.hero__inner { padding-bottom: clamp(4rem, 11vh, 7.5rem); }

/* more space between and inside sections */
.section { padding-block: clamp(7rem, 14vw, 12rem); }
.services { padding-bottom: clamp(6rem, 12vw, 10rem); }
.care-cards { gap: clamp(1.5rem, 3vw, 2.75rem); }
.care-card__body { padding: clamp(1.5rem, 3vw, 2.25rem); gap: 0.75rem; }
.statement__body { margin-top: var(--space-6); }
.lead { max-width: 34em; }
.life__track { gap: clamp(1.75rem, 3.5vw, 3rem); }

/* today's office hours, by the phone number */
.office-now {
  margin: var(--space-4) auto 0;
  font-size: var(--text-sm);
  color: var(--walnut);
}
.office-now a { color: var(--fir); font-weight: 600; }

/* ---------- Homepage hero: the words on a glass card, like the stories band ---------- */
.hero__glass {
  max-width: 46rem;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  border-radius: var(--radius-card);
  background: rgba(20, 30, 22, 0.36);
  border: 1px solid var(--glass-dark-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
          backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 30px 60px -36px rgba(0, 0, 0, 0.6);
}
.hero__glass .hero__title { font-size: clamp(2.5rem, 5.4vw, 4.6rem); margin-bottom: var(--space-2); text-shadow: none; }
.hero__glass .hero__sub { margin-bottom: var(--space-4); text-shadow: none; }
.hero__glass .hero__status { background: rgba(255, 250, 240, 0.08); }
/* the card gives the words their own contrast, so the photo can stay brighter */
.hero::before {
  background: linear-gradient(180deg, rgba(14, 30, 22, 0.5) 0%, rgba(14, 30, 22, 0.08) 26%, rgba(14, 30, 22, 0.1) 60%, rgba(14, 30, 22, 0.45) 100%);
}
@media (max-width: 47.9375rem) {
  .hero__glass { padding: 1.5rem 1.25rem; }
}

/* ============================================================
   SERENE PASS — 2026-09-30
   ============================================================ */

/* ---------- Activities row: never catches a vertical scroll ----------
   No snapping (snapping grabbed the page while a finger was moving up),
   and touch-action tells the browser that up/down swipes belong to the
   page, only sideways ones to the row. */
.life__track-wrap {
  scroll-snap-type: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
.life-card { scroll-snap-align: none; }

/* ---------- Closing invitation on a calm landscape, with a glass box ----------
   Every page ends the same way as the family stories: a serene scene, and
   the invitation to visit on frosted glass. */
.final-cta--scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--cream);
  background: var(--fir-deep);
  text-align: center;
}
.final-cta__media { position: absolute; inset: 0; z-index: -2; }
.final-cta__media .photo { position: absolute; inset: 0; }
.final-cta--scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 28, 20, 0.35), rgba(20, 28, 20, 0.5));
}
.final-cta__glass {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  border-radius: var(--radius-card);
  background: rgba(20, 30, 22, 0.36);
  border: 1px solid var(--glass-dark-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
          backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 30px 60px -36px rgba(0, 0, 0, 0.6);
}
.final-cta--scene .eyebrow { color: var(--cream-ink-soft); }
.final-cta--scene .final-cta__title { color: var(--cream); }
.final-cta--scene .lead { color: rgba(248, 243, 234, 0.9); }
.final-cta--scene .final-cta__contact,
.final-cta--scene .office-now { color: rgba(248, 243, 234, 0.85); }
.final-cta--scene .final-cta__contact a,
.final-cta--scene .office-now a { color: var(--cream); border-bottom-color: var(--amber-soft); }
.final-cta--scene .btn--primary { background: var(--cream); color: var(--fir); }
.final-cta--scene .btn--primary:hover { background: #fff; }
.final-cta--scene .btn--ghost {
  color: var(--cream);
  border-color: rgba(248, 243, 234, 0.6);
  background: rgba(14, 30, 22, 0.35);
}
.final-cta--scene .btn--ghost:hover { border-color: var(--cream); background: rgba(14, 30, 22, 0.5); }
.final-cta--scene a:focus-visible, .final-cta--scene button:focus-visible { outline-color: var(--amber-soft); }

/* ---------- "Getting here" on a landscape (Contact, Book a Visit, Our Home) ---------- */
.scene-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--fir-deep);
}
.scene-band__media { position: absolute; inset: 0; z-index: -2; }
.scene-band__media .photo { position: absolute; inset: 0; }
.scene-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20, 28, 20, 0.55) 0%, rgba(20, 28, 20, 0.35) 60%, rgba(20, 28, 20, 0.3) 100%);
}
.scene-band__glass {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--radius-card);
  background: rgba(20, 30, 22, 0.36);
  border: 1px solid var(--glass-dark-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
          backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 30px 60px -36px rgba(0, 0, 0, 0.6);
}
.scene-band h2, .scene-band .display-2 { text-shadow: 0 2px 22px rgba(16, 43, 34, 0.5); }
.scene-band .lead { text-shadow: 0 1px 12px rgba(16, 43, 34, 0.45); }
.scene-band .btn--cream:focus-visible { outline-color: var(--amber-soft); }

/* ============================================================
   WARMER — 2026-09-30
   Every surface a touch warmer: creams lean towards ivory-peach, the
   green towards olive, and the amber a little rosier. Text colours are
   re-checked for contrast below.
   ============================================================ */
:root {
  --cream:        #FAF2E4;
  --cream-bright: #FDF8EE;
  --cream-deep:   #F3E6D1;
  --linen:        #F1E1C9;
  --fir:          #1E4233;
  --fir-deep:     #152E24;
  --fir-soft:     #2B5240;
  --amber:        #D99A4A;
  --amber-soft:   #EBB56C;
  --amber-ink:    #8A5514;
  --oak:          #CDA67A;
  --oak-light:    #E6CDA6;
  --walnut:       #6E4B2F;
  --ink-soft:     rgba(30, 66, 51, 0.84);
  --ink-faint:    rgba(30, 66, 51, 0.82);
  --line:         rgba(110, 75, 47, 0.2);
  --line-soft:    rgba(110, 75, 47, 0.11);
  --glass:        #FDF8EE;
  --glass-strong: #FFFBF3;
  --glass-edge:   rgba(110, 75, 47, 0.15);
  --shadow-soft:  0 10px 30px -26px rgba(90, 60, 35, 0.45);
  --shadow-lift:  0 16px 36px -26px rgba(90, 60, 35, 0.5);
}
body { background: var(--cream); }
/* the dark bands and the footer warm with the green */
.on-dark, .footer, .mobile-menu { background-color: var(--fir); }
.mobile-menu { background: rgba(30, 66, 51, 0.88); }
/* photo overlays: a warmer shade rather than a cold green-black */
.hero::before {
  background: linear-gradient(180deg, rgba(38, 32, 22, 0.5) 0%, rgba(38, 32, 22, 0.08) 26%, rgba(38, 32, 22, 0.1) 60%, rgba(38, 32, 22, 0.45) 100%);
}
.page-hero--photo::before {
  background:
    radial-gradient(80% 75% at 20% 60%, rgba(40, 32, 22, 0.45), transparent 75%),
    linear-gradient(180deg, rgba(40, 32, 22, 0.62) 0%, rgba(40, 32, 22, 0.3) 30%, rgba(40, 32, 22, 0.32) 55%, rgba(30, 50, 38, 0.74) 100%);
}
.stories--band::before,
.final-cta--scene::before { background: linear-gradient(180deg, rgba(40, 32, 22, 0.35), rgba(40, 32, 22, 0.5)); }
.scene-band::before { background: linear-gradient(100deg, rgba(40, 32, 22, 0.55) 0%, rgba(40, 32, 22, 0.35) 60%, rgba(40, 32, 22, 0.3) 100%); }
.hero__glass, .stories__glass, .final-cta__glass, .scene-band__glass, .cinematic__glass {
  background: rgba(44, 36, 26, 0.36);
  border-color: rgba(255, 244, 226, 0.26);
}

/* ============================================================
   LEGIBILITY — 2026-09-30
   White words over the trees were hard to read where sunlight showed
   through. The glass is now a deeper, more frosted tint, the top of the
   photo is shaded behind the menu, and headings carry a soft shadow.
   ============================================================ */
.hero__glass, .stories__glass, .final-cta__glass, .scene-band__glass, .cinematic__glass {
  background: rgba(40, 33, 24, 0.52);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
          backdrop-filter: blur(22px) saturate(1.1);
  border-color: rgba(255, 244, 226, 0.3);
}
.hero__glass .hero__title,
.stories__glass blockquote,
.final-cta__glass .final-cta__title,
.cinematic__glass .cinematic__title { text-shadow: 0 2px 18px rgba(20, 16, 10, 0.55); }
.hero__glass .hero__sub,
.final-cta__glass .lead,
.final-cta__glass .final-cta__contact,
.final-cta__glass .office-now,
.scene-band__glass p { color: #FDF8EE; text-shadow: 0 1px 8px rgba(20, 16, 10, 0.5); }
.hero__glass .hero__status { background: rgba(255, 250, 240, 0.12); border-color: rgba(255, 250, 240, 0.35); color: #FDF8EE; }
.hero__glass .hero__status-dot { background: var(--amber-soft); box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }
/* the menu sits on the bright top of the forest: shade it and lift the words */
.hero::before {
  background: linear-gradient(180deg, rgba(38, 32, 22, 0.66) 0%, rgba(38, 32, 22, 0.28) 18%, rgba(38, 32, 22, 0.1) 40%, rgba(38, 32, 22, 0.14) 65%, rgba(38, 32, 22, 0.5) 100%);
}
.page-hero--photo::before {
  background:
    radial-gradient(80% 75% at 20% 60%, rgba(40, 32, 22, 0.5), transparent 75%),
    linear-gradient(180deg, rgba(40, 32, 22, 0.7) 0%, rgba(40, 32, 22, 0.34) 30%, rgba(40, 32, 22, 0.34) 55%, rgba(30, 50, 38, 0.74) 100%);
}
.nav:not(.is-scrolled) .nav__link,
.nav:not(.is-scrolled) .nav__logo,
.nav:not(.is-scrolled) .nav__burger { text-shadow: 0 1px 10px rgba(20, 16, 10, 0.6); }
.nav:not(.is-scrolled) .nav__logo svg { filter: drop-shadow(0 1px 4px rgba(20, 16, 10, 0.5)); }
.page-hero h1, .page-hero .lead, .page-hero__crumb { text-shadow: 0 2px 16px rgba(20, 16, 10, 0.6); }
/* reveals only ever change opacity and position now, so track just those */
[data-reveal] { transition-property: opacity, transform; }
[data-reveal="mask"] { transition-property: clip-path; }

/* ---------- Phones: comfortable reading and tapping ---------- */
.nav__logo-text small { font-size: 0.68rem; }
@media (pointer: coarse) {
  .final-cta__contact a,
  .office-now a,
  .footer__legal a,
  .footer__bottom a,
  .form-consent a,
  .care-cards__more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .stories__dot { width: 44px; height: 44px; }
  .form-consent input[type="checkbox"],
  input[type="checkbox"] { width: 24px; height: 24px; }
  .form-consent { align-items: center; }
}

/* ============================================================
   OFFICIAL LOGO — 2026-09-30
   Header: the two gold trees from the home's logo beside the name.
   Footer and 404: the full logo, lettering in cream for dark green.
   ============================================================ */
.nav__logo-mark {
  height: 44px;
  width: auto;
  flex-shrink: 0;
  transition: height var(--dur-med) var(--ease-soft);
}
.nav:not(.is-scrolled) .nav__logo-mark { filter: drop-shadow(0 1px 4px rgba(20, 16, 10, 0.45)); }
.nav.is-scrolled .nav__logo-mark { height: 36px; }
.footer__logo-link { display: inline-block; margin-bottom: 1.25rem; }
.footer__logo { display: block; width: min(15rem, 80%); height: auto; }
@media (max-width: 47.9375rem) {
  .nav__logo-mark { height: 38px; }
  .nav.is-scrolled .nav__logo-mark { height: 32px; }
}

/* ============================================================
   LOGO MARK, ALONE — quiet brand touches
   ============================================================ */
.brand-mark {
  display: block;
  height: 46px; width: auto;
  margin: 0 auto 1.1rem;
  filter: drop-shadow(0 1px 6px rgba(20,16,10,0.35));
}
.brand-mark--left { margin: 0 0 1rem; height: 40px; }
.statement { position: relative; overflow: hidden; }
.statement > .container { position: relative; z-index: 1; }
@media (max-width: 47.9375rem) {
  .brand-mark { height: 38px; }
  }

.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.4rem, 12.5vw, 11.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-align: center;
  color: rgba(246, 242, 233, 0.07);
  white-space: nowrap;
  transform: translateY(0.22em);
  user-select: none;
}