/* Safe Haven · resident site mockup 2026-09-22
   CI: Ivory, Gold, Pine, Charcoal (brand/visual-style-guide.md, brand/brand-guide.html).
   Readability for older eyes wins every conflict: body 18-20px, no text under 15px, AA contrast.

   z-index scale
   1  opening visual layers        4  opening caption and controls
   2  opening scrims               50 site header
   3  opening title                60 mobile menu
*/

:root {
  --night: #1E1D1A;
  --night-2: #282723;
  --charcoal: #3A3934;
  --ivory: #F2F1EC;
  --ivory-bright: #F6F4EE;
  --stone: #E5E0D1;
  --pine: #2D5B59;
  --pine-deep: #244B49;
  --gold-deep: #926F39;
  --gold: #A6895F;
  --gold-light: #BA925F;
  --muted: #6C643F;
  --clay: #7E4A36;
  --ivory-dim: rgba(242, 241, 236, 0.8);
  --dawn: #E4CBA5;
  --first-light: #F1E6D6;
  --golden: #F0E2C8;

  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-body: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-numeral: Italiana, "Cormorant Garamond", Georgia, serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --strip-h: 34px;
  --nav-h: 72px;
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
  --col-gap: clamp(20px, 3vw, 48px);
  --body-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.25rem);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--f-body);
  font-size: var(--body-size);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
section[id], footer[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
/* keeps a focused field from sliding under the fixed header (WCAG 2.4.11) */
html { scroll-padding-top: calc(var(--nav-h) + 16px); }

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

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ivory); color: var(--charcoal); padding: 12px 18px; border-radius: 2px;
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* Focus: pine on light grounds, ivory on dark grounds, always 3px */
:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; border-radius: 2px; }
.theme-dark :focus-visible, .site-header[data-theme="dark"] :focus-visible,
.site-header[data-theme="cinema"] :focus-visible, .introduce :focus-visible,
.opening :focus-visible, .site-footer :focus-visible,
.mobile-menu :focus-visible, .skip-link:focus-visible { outline-color: var(--ivory); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- type roles ---------- */
.h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: var(--pine);
  text-wrap: balance;
  padding-bottom: 0.06em;
}
.theme-dark .h2 { color: var(--ivory); }
.h2 em, .statement__line em { font-style: italic; }
.lede {
  font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.4rem);
  line-height: 1.55;
  max-width: 40em;
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--gold-deep);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.numeral { font-family: var(--f-numeral); font-weight: 400; letter-spacing: 0.02em; }
.caption { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; color: var(--muted); line-height: 1.45; }
.theme-dark .caption { color: var(--ivory-dim); }
.small-print { font-size: 1.125rem; color: var(--muted); line-height: 1.55; }
.theme-dark .small-print { color: var(--ivory-dim); }

/* ---------- buttons ---------- */
/* Shape rule: buttons and inputs 2px, the AI label is a pill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  font-family: var(--f-body); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border-radius: 2px; border: 1px solid transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--pine { background: var(--pine); color: var(--ivory); }
.btn--ivory { background: var(--ivory); color: var(--night); }
.btn--line-light { background: rgba(22, 21, 19, 0.45); color: var(--ivory); border-color: rgba(242, 241, 236, 0.7); }
@media (hover: hover) and (pointer: fine) {
  .btn--pine:hover { background: var(--pine-deep); }
  .btn--ivory:hover { background: var(--dawn); }
  .btn--line-light:hover { background: var(--ivory); color: var(--night); border-color: var(--ivory); }
}

/* ---------- AI label (KI_LABEL_KIT, Safe Haven variant) ---------- */
.ai-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  /* no backdrop-filter: a blurred backdrop over the moving camera makes Chrome on macOS
     flash black boxes. A solid ground carries the contrast just as well. */
  background: rgba(46, 45, 41, 0.88);
  color: var(--ivory);
  font-family: var(--f-body); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em;
  white-space: nowrap;
}
.ai-pill svg { flex: none; width: 15px; height: 15px; }
.plate .ai-pill { position: absolute; left: 14px; bottom: 14px; z-index: 1; pointer-events: none; }

/* ---------- header: preview strip + nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transform: translateY(0);
  transition: transform 300ms var(--ease-out);
}
.site-header.is-scrolled { transform: translateY(calc(-1 * var(--strip-h))); }
.preview-strip {
  height: var(--strip-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--clay); color: var(--ivory);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.04em;
}
.nav {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
  padding-inline: var(--gutter);
  color: var(--ivory);
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.site-header[data-theme="cinema"] .nav { background: linear-gradient(to bottom, rgba(22, 21, 19, 0.55), rgba(22, 21, 19, 0)); }
.site-header[data-theme="dark"] .nav {
  background: rgba(30, 29, 26, 0.97);
}
.site-header[data-theme="light"] .nav {
  background: rgba(242, 241, 236, 0.97);
  color: var(--charcoal);
  box-shadow: 0 1px 0 var(--stone);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; min-height: 44px; margin-right: auto;
  transition: opacity 400ms ease, visibility 400ms ease;
}
.brand img { width: 34px; height: auto; }
.brand__word {
  font-family: var(--f-numeral); font-size: 1.25rem; letter-spacing: 0.3em; text-transform: uppercase;
  padding-left: 0.3em; line-height: 1;
}
.site-header[data-theme="light"] .brand__word { color: var(--gold-deep); }
.site-header[data-theme="dark"] .brand__word, .site-header[data-theme="cinema"] .brand__word { color: var(--gold-light); }
.mobile-menu .brand { margin-right: 0; }

.nav__links { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); list-style: none; }
.nav__links a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 78%; background-repeat: no-repeat;
  transition: background-size 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { background-size: 100% 1px; } }
.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__investor {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.motion-switch {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer;
  font-size: 1rem; font-weight: 500;
}
.motion-switch__track {
  position: relative; width: 38px; height: 22px; border-radius: 999px;
  border: 1.5px solid currentColor; opacity: 0.9;
}
.motion-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%;
  background: currentColor; transition: transform 200ms var(--ease-out);
}
.motion-switch[aria-checked="true"] .motion-switch__track::after { transform: translateX(16px); }
.motion-switch__state { min-width: 2.2em; text-align: left; }

.nav .btn { min-height: 46px; padding: 0 20px; font-size: 1rem; }
.site-header[data-theme="light"] .nav .btn { background: var(--pine); color: var(--ivory); border-color: var(--pine); }
.site-header:not([data-theme="light"]) .nav .btn { background: transparent; color: var(--ivory); border-color: rgba(242, 241, 236, 0.75); }
@media (hover: hover) and (pointer: fine) {
  .site-header:not([data-theme="light"]) .nav .btn:hover { background: var(--ivory); color: var(--night); }
  .site-header[data-theme="light"] .nav .btn:hover { background: var(--pine-deep); }
}

.menu-btn {
  display: none; min-height: 46px; min-width: 46px; padding: 0 16px;
  background: none; border: 1px solid currentColor; border-radius: 2px; cursor: pointer;
  font-size: 1rem; font-weight: 500;
}

/* Mobile and tablet navigation */
@media (max-width: 1180px) {
  .nav__links, .nav__actions .motion-switch, .nav__actions .btn, .nav__investor { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
}
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--night); color: var(--ivory);
  display: flex; flex-direction: column;
  padding: 20px var(--gutter) 40px;
  overflow-y: auto;
}
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.mobile-menu ul { list-style: none; margin-top: 28px; display: grid; gap: 4px; }
.mobile-menu li a {
  display: flex; align-items: center; min-height: 56px;
  font-family: var(--f-display); font-size: 2rem; text-decoration: none;
}
.mobile-menu__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 20px; justify-items: start; }

/* ---------- opening ---------- */
.opening {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 520px;
  background: var(--night);
  color: var(--ivory);
  overflow: hidden;
}
.op-stage { position: absolute; inset: 0; overflow: hidden; }
.op-visual { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #0B0E16; }
.op-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block; opacity: 0; pointer-events: none;
}
.opening.is-canvas-ready .op-canvas { opacity: 1; }
/* Once the bitmap-backed canvas has its first complete frame, the nine moving image layers
   leave the render tree. The two original Safe Haven marks remain ordinary DOM images. */
.opening.is-canvas-ready .op-frame,
.opening.is-canvas-ready .op-night,
.opening.is-canvas-ready .op-bloom { display: none !important; }

/* Camera layers. Size and transform come from site.js (master pixels to screen). */
.op-layer {
  position: absolute; left: 0; top: 0;
  max-width: none; transform-origin: 0 0;
  backface-visibility: hidden;
}
.motion-on .op-layer { will-change: transform, opacity; }
.op-frame--detail { opacity: 0; }
/* The real mark on the lit plaster. The plaster tone is baked into the file, so no blend mode. */
.op-night { opacity: 0; }
.op-bloom { opacity: 0; }
/* The photographic reflections stay registered to the lanterns. Only a faint independent
   ripple texture moves over them, so the water breathes without the lights sliding sideways. */
/* no blend mode here on purpose: a blended group would be recomposited every frame */
.op-water { opacity: 0.56; pointer-events: none; }
.op-water__strip { position: absolute; left: 0; width: 100%; overflow: hidden; }
.op-water__slice {
  position: absolute; left: 0; width: 100%;
  background-image: url("../img/op/water.png");
  background-image: image-set(url("../img/op/water.webp") type("image/webp"), url("../img/op/water.png") type("image/png"));
  background-size: 100% 100%; background-repeat: no-repeat;
  transform: none;
}
.op-water > .op-water__strip::after {
  content: "";
  position: absolute; inset: -2px -3%;
  opacity: var(--ripple-opacity, 0.12);
  background: repeating-linear-gradient(176deg,
    rgba(228, 229, 218, 0) 0 5px,
    rgba(228, 229, 218, 0.32) 6px,
    rgba(8, 18, 27, 0.36) 7px,
    rgba(228, 229, 218, 0) 9px 14px);
  background-size: 118% 22px;
  animation: op-ripple var(--ripple-duration, 7s) ease-in-out var(--ripple-delay, 0s) infinite alternate;
  will-change: transform, background-position;
}
@keyframes op-ripple {
  0% { transform: translate3d(calc(-1 * var(--ripple-x, 0.25%)), 0, 0) scaleX(1.001); background-position: 0 0; }
  37% { transform: translate3d(calc(var(--ripple-x, 0.25%) * 0.24), 0.35px, 0) scaleX(1.004); background-position: 5px 3px; }
  68% { transform: translate3d(calc(var(--ripple-x, 0.25%) * -0.16), -0.2px, 0) scaleX(0.999); background-position: -3px 6px; }
  100% { transform: translate3d(var(--ripple-x, 0.25%), 0.15px, 0) scaleX(1.002); background-position: 8px 9px; }
}
/* Small light glints stay still; moving them independently makes lantern reflections slide. */
.op-glint { pointer-events: none; }
.op-glint__set { position: absolute; inset: 0; opacity: 0.12; }
.op-glint__set--a .op-water__slice {
  background-image: url("../img/op/glint-a.png");
  background-image: image-set(url("../img/op/glint-a.webp") type("image/webp"), url("../img/op/glint-a.png") type("image/png"));
}
.op-glint__set--b .op-water__slice {
  background-image: url("../img/op/glint-b.png");
  background-image: image-set(url("../img/op/glint-b.webp") type("image/webp"), url("../img/op/glint-b.png") type("image/png"));
}
.opening.is-paused .op-water > .op-water__strip::after { animation-play-state: paused; }
/* Static film grain: hides the smoothness of the renders, does not move. */
.op-grain {
  position: absolute; inset: 0; pointer-events: none;
  background: url("../img/op/grain.webp") repeat; background-size: 200px 200px;
  opacity: 0.05;
}
.op-shade {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(ellipse 70% 62% at 50% 40%, rgba(22, 21, 19, 0.74) 0%, rgba(22, 21, 19, 0.95) 72%),
    rgba(22, 21, 19, 0.2);
}
.op-lamp {
  position: absolute; left: 0; top: 0; width: 200px; height: 200px; border-radius: 50%;
  transform-origin: 0 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(214, 172, 112, 0.42) 0%, rgba(186, 146, 95, 0.16) 38%, rgba(186, 146, 95, 0) 70%);
}
.op-scrim { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.op-scrim--bottom { bottom: 0; height: 36%; background: linear-gradient(to top, rgba(22, 21, 19, 0.72), rgba(22, 21, 19, 0)); }

.op-title {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--strip-h) + var(--nav-h) + 8px) var(--gutter) clamp(84px, 14vh, 140px);
  pointer-events: none;
}
.op-mark-slot {
  position: static;
  width: clamp(150px, min(30svh, 46vw), 330px);
  aspect-ratio: 546 / 503;
  margin-bottom: clamp(14px, 2.6vh, 30px);
}
.op-mark { width: 100%; height: auto; max-width: none; }
.motion-on .op-mark { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
.op-wordmark {
  font-family: var(--f-numeral); font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.25rem);
  letter-spacing: 0.32em; padding-left: 0.32em;
  text-transform: uppercase; line-height: 1.05;
  color: var(--gold-light);
}
.op-line {
  margin: clamp(12px, 2vh, 22px) 0 0;
  max-width: 24em;
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem); line-height: 1.2;
  color: var(--ivory);
  text-wrap: balance;
}
.op-cta { margin-top: clamp(20px, 3.6vh, 36px); pointer-events: auto; }
.motion-on .op-wordmark, .motion-on .op-line, .motion-on .op-cta { opacity: 0; }

.op-caption {
  position: absolute; left: var(--gutter); bottom: 26px; z-index: 4;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 0.9375rem; font-weight: 500; color: var(--ivory);
  max-width: calc(100% - 2 * var(--gutter) - 120px);
}
.op-controls { position: absolute; right: var(--gutter); bottom: 18px; z-index: 4; display: flex; gap: 10px; }
.op-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 16px;
  border-radius: 2px; border: 1px solid rgba(242, 241, 236, 0.6);
  background: rgba(22, 21, 19, 0.66); color: var(--ivory);
  font-size: 1rem; font-weight: 500; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.op-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .op-btn:hover { background: rgba(22, 21, 19, 0.7); } }
.op-btn__glyph { display: inline-block; width: 10px; height: 12px; position: relative; }
.op-btn__glyph::before, .op-btn__glyph::after {
  content: ""; position: absolute; top: 0; width: 3px; height: 12px; background: currentColor; border-radius: 1px;
}
.op-btn__glyph::before { left: 1px; } .op-btn__glyph::after { right: 1px; }
.op-sound__glyph { width: 20px; height: 20px; flex: none; }
.opening.is-paused .op-btn__glyph::before { left: 1px; width: 0; height: 0; border-radius: 0; background: none;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; }
.opening.is-paused .op-btn__glyph::after { display: none; }

.op-walk {
  position: absolute; left: 50%; bottom: clamp(88px, 15vh, 150px); z-index: 4;
  transform: translateX(-50%);
  min-height: 56px; padding: 0 34px; font-size: 1.125rem; letter-spacing: 0.04em;
}
.op-walk:active { transform: translateX(-50%) scale(0.97); }
/* a focused control is always fully visible, even while it is fading in or out */
.op-cta:focus-visible, .op-walk:focus-visible { opacity: 1 !important; visibility: visible !important; }
html:not(.motion-on) .op-walk, html:not(.motion-on) .op-pause { display: none; }

/* Static opening: no JS, motion off, or reduced motion. The end frame of the camera travel,
   the lit wall, dimmed, with the real mark above the title. */
html:not(.motion-on) .op-layer { display: none; }
html:not(.motion-on) .op-canvas { display: none; }
html:not(.motion-on) .op-visual { background: #0B0E16 url("../img/op/f2-solid.jpg") 50% 40% / cover no-repeat; }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  html:not(.motion-on) .op-visual {
    background-image: image-set(url("../img/op/f2-solid.avif") type("image/avif"), url("../img/op/f2-solid.webp") type("image/webp"), url("../img/op/f2-solid.jpg") type("image/jpeg"));
  }
}
html:not(.motion-on) .op-shade { opacity: 1; }
html:not(.motion-on) .op-lamp { display: none; }
html:not(.motion-on) .op-mark-slot { position: relative; }
html:not(.motion-on) .op-mark-slot::before {
  content: ""; position: absolute; inset: -45%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 172, 112, 0.36) 0%, rgba(186, 146, 95, 0.12) 40%, rgba(186, 146, 95, 0) 68%);
}

/* ---------- statement (night, then dawn) ---------- */
.theme-dark { background: var(--night); color: var(--ivory); }
.statement { padding: clamp(96px, 18vh, 200px) 0 clamp(72px, 12vh, 140px); text-align: center; }
.statement__line {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2.9rem, 1.6rem + 5.4vw, 6.6rem);
  line-height: 1.06; letter-spacing: 0;
  max-width: 13em; margin: 0 auto;
  text-wrap: balance; padding-bottom: 0.08em;
}
.statement__line em { color: var(--gold-light); }
.statement__body { max-width: 36em; margin: clamp(28px, 5vh, 48px) auto 0; color: var(--ivory-dim); }
.statement__body p:first-child { color: var(--ivory); }
.ai-note {
  display: flex; gap: 12px; align-items: flex-start; justify-content: center;
  max-width: 44em; margin: clamp(36px, 6vh, 64px) auto 0; text-align: left;
  font-size: 1.125rem; color: var(--ivory-dim); line-height: 1.55;
}
.ai-note .ai-pill { flex: none; margin-top: 2px; }

/* the passage between night and day: long enough to feel the light change, short enough not to read as the end of the page */
.band { height: 24vh; min-height: 170px; }
.band--dawn-a { background: linear-gradient(to bottom, var(--night), #2F3438 55%, #6E6760); }
.band--dawn-b { background: linear-gradient(to bottom, #6E6760, #C9AE8F 45%, var(--dawn) 70%, var(--ivory)); }
.band--dusk-a { background: linear-gradient(to bottom, var(--ivory), var(--dawn) 40%, #C39A72 100%); }
.band--dusk-b { background: linear-gradient(to bottom, #C39A72, #6B4F3E 45%, #2E2A25 80%, var(--night)); }
@supports (background: linear-gradient(in oklab, red, blue)) {
  .band--dawn-a { background: linear-gradient(in oklab to bottom, var(--night), #2F3438 55%, #6E6760); }
  .band--dawn-b { background: linear-gradient(in oklab to bottom, #6E6760, #C9AE8F 45%, var(--dawn) 70%, var(--ivory)); }
  .band--dusk-a { background: linear-gradient(in oklab to bottom, var(--ivory), var(--dawn) 40%, #C39A72 100%); }
  .band--dusk-b { background: linear-gradient(in oklab to bottom, #C39A72, #6B4F3E 45%, #2E2A25 80%, var(--night)); }
}

/* ---------- plates (images with caption and AI label) ---------- */
.plate { margin: 0; }
.plate__frame { position: relative; overflow: hidden; background: var(--stone); }
.theme-dark .plate__frame { background: var(--night-2); }
.plate__frame img { width: 100%; height: 100%; object-fit: cover; }
.plate figcaption { margin-top: 12px; }
.plate--bleed figcaption { padding-inline: var(--gutter); }

/* ---------- a day ---------- */
/* The day as light: the ground warms from first light (06:40) through the bright morning
   to the gold of 18:30, then the dusk band takes it into the night. Static, it only moves
   because the page does. Every stop keeps muted text at 4.5:1 or more. */
.day {
  background: linear-gradient(to bottom, var(--first-light) 0%, var(--ivory-bright) 24%, var(--ivory) 55%, var(--golden) 82%, var(--golden) 100%);
}
@supports (background: linear-gradient(in oklab, red, blue)) {
  .day { background: linear-gradient(in oklab to bottom, var(--first-light) 0%, var(--ivory-bright) 24%, var(--ivory) 55%, var(--golden) 82%, var(--golden) 100%); }
}
.band--into-day { background: linear-gradient(to bottom, #6E6760, #C9AE8F 45%, var(--dawn) 70%, var(--first-light)); }
.band--dusk-a { background: linear-gradient(to bottom, var(--golden), var(--dawn) 40%, #C39A72 100%); }
@supports (background: linear-gradient(in oklab, red, blue)) {
  .band--into-day { background: linear-gradient(in oklab to bottom, #6E6760, #C9AE8F 45%, var(--dawn) 70%, var(--first-light)); }
  .band--dusk-a { background: linear-gradient(in oklab to bottom, var(--golden), var(--dawn) 40%, #C39A72 100%); }
}
.day.day--night { background: var(--night); }
.day__head { padding-block: clamp(24px, 4vh, 48px) clamp(24px, 6vh, 64px); }
.day__head .lede { margin-top: 20px; color: var(--charcoal); }

.chapter { padding-block: clamp(56px, 11vh, 140px); }
.chapter__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap); row-gap: 28px; align-items: start;
}
.chapter__text { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 9vh); }
.chapter__media { grid-column: 6 / -1; }
.chapter--flip .chapter__media { grid-column: 1 / span 6; grid-row: 1; }
.chapter--flip .chapter__text { grid-column: 8 / -1; grid-row: 1; }
.chapter--center .chapter__media { grid-column: 3 / span 8; grid-row: 1; }
.chapter--center .chapter__text {
  grid-column: 3 / span 8; grid-row: 2; position: static;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--col-gap);
}
.chapter--center .chapter__text .chapter__body { grid-column: 2; grid-row: 1 / span 2; align-self: end; }

.time {
  display: block;
  font-family: var(--f-numeral); font-weight: 400;
  font-size: clamp(4.2rem, 2.4rem + 6vw, 8.6rem);
  line-height: 0.92; letter-spacing: 0.01em;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.theme-dark .time { color: var(--gold-light); }
.chapter__title {
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.8rem); line-height: 1.1;
  color: var(--pine); text-wrap: balance;
}
.theme-dark .chapter__title { color: var(--ivory); }
.chapter__body { margin-top: 18px; max-width: 30em; }
.theme-dark .chapter__body { color: var(--ivory-dim); }

.ratio-5-4 { aspect-ratio: 5 / 4; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-21-9 { aspect-ratio: 21 / 9; }

.chapter--wide { padding-bottom: clamp(40px, 8vh, 100px); }
.chapter--wide .plate__frame { aspect-ratio: 21 / 9; }
.chapter--wide .chapter__grid { margin-top: clamp(36px, 6vh, 64px); }
.chapter--wide .chapter__text { grid-column: 1 / span 5; position: static; }
.chapter--wide .chapter__body { grid-column: 7 / -1; align-self: end; margin-top: 0; }

.night-run { background: var(--night); color: var(--ivory); }

/* ---------- the circle ---------- */
.circle__image .plate__frame { aspect-ratio: 16 / 7; }
.circle__body { padding-block: clamp(56px, 10vh, 120px) clamp(80px, 14vh, 160px); }
.circle__intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap); row-gap: 40px; align-items: end;
}
.circle__intro-text { grid-column: 1 / span 6; max-width: 46rem; }
.circle__couple { grid-column: 8 / -1; }
.circle__couple .plate__frame { aspect-ratio: 4 / 5; }
.circle__intro .lede { margin-top: 24px; color: var(--ivory); }
@media (max-width: 900px) {
  .circle__intro-text, .circle__couple { grid-column: 1 / -1; }
  .circle__couple { max-width: 520px; }
}
.circle__cols {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(48px, 8vh, 88px);
}
.col-title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.3rem); line-height: 1.15;
}
.steps { list-style: none; margin-top: 28px; display: grid; gap: 26px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 18px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--f-display); font-weight: 500; font-size: 2.6rem; line-height: 1; color: var(--gold-light);
  font-variant-numeric: lining-nums;
}
.steps strong { font-weight: 600; color: var(--ivory); display: block; }
.steps span { color: var(--ivory-dim); }
.promises { list-style: none; margin-top: 28px; display: grid; gap: 18px; }
.promises li { padding-left: 22px; position: relative; color: var(--ivory-dim); }
.promises li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--gold-light);
}

/* ---------- residences ---------- */
.community { background: var(--ivory); padding-block: clamp(40px, 8vh, 96px) clamp(84px, 14vh, 168px); }
.community__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.community__head > .eyebrow, .community__head > .h2 { grid-column: 1 / span 6; }
.community__intro { grid-column: 7 / -1; grid-row: 1 / span 2; }
.community__intro p:last-child { margin-bottom: 0; }
.community__aerial { margin-top: clamp(48px, 8vh, 88px); }
.community__aerial .plate__frame { aspect-ratio: 16 / 8; }
.community__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px); margin-top: clamp(38px, 6vh, 64px);
}
.community-fact { border-top: 1px solid var(--gold); padding-top: 18px; }
.community-fact strong {
  display: block; font-family: var(--f-display); font-size: clamp(2.5rem, 2rem + 1.8vw, 4rem);
  font-weight: 500; line-height: 1; color: var(--pine); font-variant-numeric: lining-nums;
}
.community-fact span { display: block; margin-top: 10px; max-width: 22em; }
.community__model {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(36px, 6vw, 88px);
  align-items: center; margin-top: clamp(80px, 14vh, 150px);
}
.community__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3.2rem); line-height: 1.08;
  color: var(--pine); text-wrap: balance;
}
.community__model-copy > p:not(.eyebrow) { margin-top: 24px; }
.site-plan { border: 1px solid var(--stone); background: var(--ivory-bright); padding: clamp(18px, 3vw, 34px); }
.site-plan__title { margin: 0 0 18px; font-size: 1.125rem; font-weight: 600; }
.site-plan__canvas {
  position: relative; min-height: 500px; overflow: hidden;
  background:
    linear-gradient(164deg, rgba(45,91,89,0.09), transparent 36%),
    repeating-linear-gradient(100deg, transparent 0 38px, rgba(166,137,95,0.07) 39px 40px),
    var(--first-light);
  border: 1px solid var(--stone);
}
.site-plan__canvas::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 26%; bottom: 20%;
  border: 2px dotted rgba(45,91,89,0.36); border-radius: 48% 42% 46% 40%; transform: rotate(-3deg);
}
.site-plan__coast {
  position: absolute; inset: 0 0 auto 0; z-index: 1; height: 16%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #73999a, #9eb8b4); color: #172e2d;
  font-family: var(--f-display); font-size: 1.35rem; font-style: italic;
}
.site-plan__block {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 10px; border: 1px solid rgba(45,91,89,0.45); background: rgba(242,241,236,0.96);
  color: var(--charcoal); font-size: 0.9375rem; font-weight: 600; line-height: 1.25; text-align: center;
  box-shadow: 0 8px 26px rgba(58,57,52,0.08);
}
.site-plan__block--homes-a { left: 8%; top: 23%; width: 31%; height: 17%; }
.site-plan__block--homes-b { right: 7%; top: 23%; width: 32%; height: 17%; }
.site-plan__block--homes-c { left: 14%; top: 63%; width: 36%; height: 16%; }
.site-plan__block--centre { left: 36%; top: 42%; width: 31%; height: 17%; background: var(--pine); color: var(--ivory); border-color: var(--pine); }
.site-plan__block--care { right: 7%; top: 51%; width: 25%; height: 14%; border-color: var(--gold-deep); }
.site-plan__block--low { right: 7%; top: 71%; width: 32%; height: 13%; }
.site-plan__block--service { left: 5%; bottom: 3%; width: 42%; height: 11%; background: #d9d3c4; }
.site-plan__route { position: absolute; z-index: 3; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.site-plan__route--resident { left: 51%; top: 34%; transform: rotate(-7deg); }
.site-plan__route--service { left: 49%; bottom: 7%; padding-left: 62px; }
.site-plan__route--service::before { content: ""; position: absolute; left: 0; top: 50%; width: 52px; border-top: 2px dashed var(--clay); }
.community__places {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px);
  align-items: end; margin-top: clamp(90px, 15vh, 170px);
}
.community__places-head { grid-column: 1 / span 5; align-self: start; }
.community-card--wide { grid-column: 1 / span 7; }
.community-card { grid-column: 8 / -1; }
.community-card .plate__frame { aspect-ratio: 3 / 2; }
.community-card figcaption strong { color: var(--charcoal); }

.residences { background: var(--ivory); padding-block: clamp(40px, 8vh, 96px) clamp(80px, 14vh, 160px); }
.residences .lede { margin-top: 22px; }
/* a residence can be a second home first and the first home later */
.residences__note { max-width: 40em; margin-top: 18px; color: var(--muted); }
.residences__image { margin-top: clamp(40px, 7vh, 72px); }
.residences__image .plate__frame { aspect-ratio: 16 / 8; }
.plans {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(56px, 9vh, 96px);
}
.plan { display: flex; flex-direction: column; border-top: 1px solid var(--gold); padding-top: 22px; }
@supports (grid-template-rows: subgrid) {
  .plans { grid-auto-rows: auto; row-gap: 0; }
  .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; margin-bottom: clamp(28px, 3vw, 44px); }
  .plan__price { margin-top: 0; align-self: end; }
}
.plan__num { font-family: var(--f-numeral); font-size: 2.5rem; line-height: 1; color: var(--gold-deep); }
.plan__name { margin-top: 10px; font-family: var(--f-display); font-weight: 500; font-size: 2.1rem; line-height: 1.1; color: var(--pine); }
.plan__meta { margin-top: 6px; font-size: 1.125rem; font-weight: 500; color: var(--charcoal); }
.plan__drawing { margin: 22px 0 18px; background: var(--ivory-bright); padding: 10px 0; }
/* labels inside the plan stay at 15 px or more: the drawing never shrinks below 264 px */
.plan__drawing svg { display: block; width: 100%; max-width: 340px; min-width: 264px; height: auto; margin-inline: auto; }
.plan__text { font-size: 1.125rem; line-height: 1.55; }
.plan__price { margin-top: auto; padding-top: 14px; font-family: var(--f-display); font-weight: 500; font-size: 1.8rem; line-height: 1.2; color: var(--charcoal); font-variant-numeric: lining-nums; }
.plan__price small { font-family: var(--f-body); font-size: 1rem; font-weight: 500; color: var(--muted); margin-right: 6px; }
.plans-note { margin-top: 36px; }

/* floor plan drawing */
.fp .w { fill: none; stroke: var(--pine); stroke-width: 1.5; stroke-linecap: square; }
.fp .p { fill: none; stroke: var(--pine); stroke-width: 0.8; stroke-linecap: square; }
.fp .g { fill: none; stroke: var(--pine); stroke-width: 0.45; }
.fp .f { fill: none; stroke: var(--gold-deep); stroke-width: 0.5; }
.fp .d { fill: none; stroke: var(--gold-deep); stroke-width: 0.6; stroke-dasharray: 2 1.6; }
.fp text { font-family: var(--f-body); font-size: 7.4px; font-weight: 500; fill: var(--muted); text-anchor: middle; dominant-baseline: middle; }
.motion-on .fp .w, .motion-on .fp .p, .motion-on .fp .g, .motion-on .fp .f { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion-on .fp .d, .motion-on .fp text { opacity: 0; }
.motion-on .plan.is-in .fp .w, .motion-on .plan.is-in .fp .p,
.motion-on .plan.is-in .fp .g, .motion-on .plan.is-in .fp .f { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-in-out); }
.motion-on .plan.is-in .fp .p { transition-delay: 350ms; }
.motion-on .plan.is-in .fp .g, .motion-on .plan.is-in .fp .f { transition-delay: 700ms; }
.motion-on .plan.is-in .fp .d, .motion-on .plan.is-in .fp text { opacity: 1; transition: opacity 600ms ease 1200ms; }

/* ---------- care ---------- */
.care { background: var(--ivory-bright); padding-block: clamp(80px, 14vh, 160px); }
.care__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; }
.care__media { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 6vh); }
.care__media .plate__frame { aspect-ratio: 4 / 5; }
.care__text { grid-column: 7 / -1; }
.care__text .lede { margin-top: 22px; }
.levels { list-style: none; margin-top: clamp(36px, 6vh, 56px); display: grid; gap: 30px; }
.level { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); column-gap: 24px; row-gap: 4px; padding-top: 22px; border-top: 1px solid var(--stone); }
.level__tag { font-size: 1rem; font-weight: 600; color: var(--pine); letter-spacing: 0.01em; }
.level__name { font-family: var(--f-display); font-size: 1.8rem; line-height: 1.1; color: var(--charcoal); grid-column: 1; }
.level__text { grid-column: 2; grid-row: 1 / span 2; }
.care__facts { margin-top: clamp(36px, 6vh, 56px); display: grid; gap: 14px; }
.care__price { font-family: var(--f-display); font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem); line-height: 1.25; color: var(--charcoal); font-variant-numeric: lining-nums; }
.care__price strong { font-weight: 600; color: var(--pine); }
.care__place {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 34px;
  align-items: center; margin-top: clamp(72px, 12vh, 140px);
}
.care__place-media { grid-column: 1 / span 7; }
.care__place-media .plate__frame { aspect-ratio: 3 / 2; }
.care__place-copy { grid-column: 9 / -1; }
.care__place-copy > p { margin-top: 22px; }

/* ---------- membership ---------- */
.membership { background: var(--ivory); padding-block: clamp(80px, 14vh, 160px); }
.membership__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; }
.membership__head { grid-column: 1 / span 6; }
.fee { margin-top: clamp(36px, 6vh, 60px); }
.fee__amount {
  display: block; font-family: var(--f-display); font-weight: 500;
  font-size: clamp(4.2rem, 2.6rem + 4.6vw, 7.2rem); line-height: 0.95; color: var(--gold-deep);
  font-variant-numeric: lining-nums; letter-spacing: -0.005em;
}
.fee__unit { display: block; margin-top: 14px; font-size: 1.125rem; font-weight: 500; }
.fee__note { margin-top: 8px; }
.membership__lists { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.list-title { font-family: var(--f-display); font-weight: 500; font-size: 1.85rem; line-height: 1.15; color: var(--pine); padding-bottom: 14px; border-bottom: 1px solid var(--gold); }
.plain-list { list-style: none; margin-top: 18px; display: grid; gap: 14px; }
.plain-list li { line-height: 1.45; }
.membership__foot { grid-column: 7 / -1; }

/* ---------- where ---------- */
.where { background: var(--ivory); padding-top: clamp(40px, 8vh, 100px); padding-bottom: clamp(80px, 14vh, 160px); }
.where__head { text-align: center; }
.where__sub { margin-top: 10px; font-family: var(--f-display); font-style: italic; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); color: var(--charcoal); line-height: 1.2; padding-bottom: 0.08em; }
.where__intro { max-width: 38em; margin: 28px auto 0; text-align: left; }
.where__image { margin-top: clamp(40px, 7vh, 72px); }
.where__image .plate__frame { aspect-ratio: 21 / 9; }
.criteria { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(48px, 8vh, 80px); }
.criteria li { border-top: 1px solid var(--gold); padding-top: 18px; }
.criteria strong { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.75rem; line-height: 1.15; color: var(--pine); }
.criteria span { display: block; margin-top: 8px; }
.where__close { margin-top: clamp(40px, 6vh, 64px); font-weight: 500; }

/* ---------- introduce ---------- */
.introduce { background: var(--pine); color: var(--ivory); padding-block: clamp(80px, 14vh, 160px); }
.introduce .h2 { color: var(--ivory); }
.introduce__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; align-items: start; }
.introduce__text { grid-column: 1 / span 5; }
.introduce__text p { margin-top: 24px; }
.introduce__form { grid-column: 7 / -1; }
.preview-notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--clay); color: var(--ivory);
  padding: 14px 18px; border-radius: 2px; margin-bottom: 28px;
  font-size: 1.125rem; font-weight: 500; line-height: 1.5;
}
.field { display: grid; gap: 8px; margin-bottom: 22px; align-content: start; }
.field label { font-size: 1.125rem; font-weight: 600; }
.field .hint { font-size: 1.125rem; color: var(--ivory-dim); margin-top: -2px; }
.field input, .field textarea {
  width: 100%; min-height: 54px; padding: 12px 16px;
  background: var(--ivory-bright); color: var(--charcoal);
  border: 1.5px solid var(--ivory-bright); border-radius: 2px;
  font-size: 1.125rem; line-height: 1.4;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--dawn); outline-offset: 2px; }
.field.has-error input, .field.has-error textarea { border-color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); }
.field .error { display: none; font-size: 1.125rem; font-weight: 500; background: var(--ivory-bright); color: var(--clay); padding: 8px 12px; border-radius: 2px; }
.field.has-error .error { display: block; }
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.consent { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; margin: 6px 0 26px; font-size: 1.125rem; line-height: 1.55; color: var(--ivory); cursor: pointer; }
.consent input { width: 24px; height: 24px; margin: 3px 0 0; accent-color: var(--dawn); cursor: pointer; }
.consent.has-error { outline: 2px solid var(--dawn); outline-offset: 8px; border-radius: 2px; }
.form-status {
  margin-top: 22px; padding: 16px 18px; border-radius: 2px;
  background: var(--ivory-bright); color: var(--charcoal); font-weight: 500; line-height: 1.5;
}

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: var(--ivory); padding-block: clamp(64px, 10vh, 112px) 40px; }
.footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.footer__brand { display: flex; align-items: center; gap: 16px; }
.footer__brand img { width: 56px; height: auto; }
.footer__brand span { font-family: var(--f-numeral); font-size: 1.6rem; letter-spacing: 0.3em; padding-left: 0.3em; color: var(--gold-light); text-transform: uppercase; }
.footer__tag { margin-top: 20px; color: var(--ivory-dim); max-width: 26em; }
.footer__nav { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; }
.footer__nav a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.footer__legal { margin-top: clamp(48px, 8vh, 80px); padding-top: 28px; border-top: 1px solid rgba(242, 241, 236, 0.18); display: grid; gap: 12px; font-size: 1.125rem; color: var(--ivory-dim); line-height: 1.6; }
.footer__legal p { margin: 0; }
.footer__imprint { color: var(--ivory); }

/* ---------- reveals (motion on only) ---------- */
.motion-on .reveal { opacity: 0; transform: translateY(18px); }
.motion-on .reveal.is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.motion-on .reveal-img .plate__frame img { transform: scale(1.06); }
.motion-on .reveal-img .plate__frame { clip-path: inset(7% 0 0 0); }
.motion-on .reveal-img.is-in .plate__frame { clip-path: inset(0 0 0 0); transition: clip-path 1200ms var(--ease-out); }
.motion-on .reveal-img.is-in .plate__frame img { transform: none; transition: transform 1600ms var(--ease-out); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .membership__head, .membership__lists, .membership__foot { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .community__head > .eyebrow, .community__head > .h2, .community__intro { grid-column: 1 / -1; grid-row: auto; }
  .community__intro { margin-top: 24px; }
  .community__aerial .plate__frame { aspect-ratio: 4 / 3; }
  .community__model { grid-template-columns: minmax(0, 1fr); }
  .community__places-head, .community-card--wide, .community-card { grid-column: 1 / -1; }
  .community-card { max-width: 720px; }
  .chapter__text, .chapter--flip .chapter__text, .chapter--center .chapter__text,
  .chapter--wide .chapter__text, .chapter__media, .chapter--flip .chapter__media, .chapter--center .chapter__media {
    grid-column: 1 / -1; grid-row: auto; position: static;
  }
  .chapter--center .chapter__text { display: block; }
  .chapter--wide .chapter__body { grid-column: 1 / -1; margin-top: 18px; }
  .chapter--wide .plate__frame, .where__image .plate__frame { aspect-ratio: 4 / 3; }
  .circle__image .plate__frame { aspect-ratio: 4 / 3; }
  .residences__image .plate__frame { aspect-ratio: 4 / 3; }
  .circle__cols { grid-template-columns: minmax(0, 1fr); }
  .care__media, .care__text { grid-column: 1 / -1; position: static; }
  .care__media { max-width: 520px; }
  .care__place-media, .care__place-copy { grid-column: 1 / -1; }
  .introduce__text, .introduce__form { grid-column: 1 / -1; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .band { height: 26vh; min-height: 160px; }
}
@media (max-width: 640px) {
  :root { --nav-h: 64px; --strip-h: 32px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .criteria { grid-template-columns: minmax(0, 1fr); }
  .community__facts { grid-template-columns: minmax(0, 1fr); }
  .site-plan { padding: 12px; }
  .site-plan__canvas { min-height: 590px; }
  .site-plan__block { font-size: 0.8125rem; padding: 8px 5px; }
  .site-plan__block--homes-a { left: 5%; width: 43%; }
  .site-plan__block--homes-b { right: 5%; width: 43%; }
  .site-plan__block--homes-c { left: 5%; top: 61%; width: 44%; }
  .site-plan__block--centre { left: 28%; top: 42%; width: 44%; }
  .site-plan__block--care { right: 5%; top: 62%; width: 42%; }
  .site-plan__block--low { right: 5%; top: 77%; width: 42%; }
  .site-plan__block--service { left: 5%; bottom: 3%; width: 48%; }
  .site-plan__route--resident { display: none; }
  .site-plan__route--service { left: 54%; bottom: 6%; padding-left: 0; width: 40%; }
  .site-plan__route--service::before { display: none; }
  .membership__lists { grid-template-columns: minmax(0, 1fr); }
  .two-up { grid-template-columns: minmax(0, 1fr); }
  .level { grid-template-columns: minmax(0, 1fr); }
  .level__text { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .brand__word { font-size: 1.05rem; letter-spacing: 0.24em; }
  .brand img { width: 28px; }
  .op-caption { bottom: 22px; max-width: calc(100% - 2 * var(--gutter) - 104px); }
  .op-caption .op-caption__text { display: none; }
  .op-controls { gap: 7px; }
  .op-btn { min-height: 44px; padding-inline: 11px; gap: 7px; font-size: 0.875rem; }
  .op-walk { bottom: clamp(96px, 16vh, 140px); }
  .ai-note { flex-direction: column; align-items: center; text-align: center; }
  .footer__nav { grid-template-columns: minmax(0, 1fr); }
}

/* Reduced motion from the system: no transforms, no drift, instant reveals. */
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
  .btn:active, .op-btn:active { transform: none; }
  .op-walk:active { transform: translateX(-50%); }
}
html.motion-off .site-header { transition: none; }
html.motion-off .btn:active, html.motion-off .op-btn:active { transform: none; }