/* ────────────────────────────────────────────────────────────────────────
   ALVA RESIDENCES, by SIKID
   Editorial architectural minimalism. Bone, ink, clay.
   ──────────────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────────
   Self-hosted fonts. TTFs in ./fonts/.
   font-display: swap renders bone-canvas system-font fallbacks first,
   then swaps in the real face once it loads. Variable fonts (Fraunces,
   Geist, GeistMono) cover the full weight range in a single file.
   ──────────────────────────────────────────────────────────────────────── */

/* Fraunces, variable serif (display + body italics) */
@font-face {
  font-family: 'Fraunces';
  src: url('./fonts/Fraunces-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('./fonts/Fraunces-Italic-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Geist, variable sans (body) */
@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Geist Mono, variable monospace (kickers, labels, numerals) */
@font-face {
  font-family: 'Geist Mono';
  src: url('./fonts/GeistMono-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Syne, four static weights (Alva wordmark + nav) */
@font-face {
  font-family: 'Syne';
  src: url('./fonts/Syne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('./fonts/Syne-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('./fonts/Syne-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('./fonts/Syne-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Questrial, single weight (Residences wordmark suffix) */
@font-face {
  font-family: 'Questrial';
  src: url('./fonts/Questrial-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── colour ── */
  --bone:        #F2EEE6;   /* warm off-white, primary canvas */
  --bone-2:      #E9E4D9;   /* soft secondary */
  --bone-3:      #DCD5C6;   /* divider, edge */
  --ink:         #14110D;   /* deep ink, primary text */
  --ink-2:       #3A3630;   /* secondary text */
  --ink-3:       #6E685D;   /* tertiary, captions */
  --ink-4:       #9C968A;   /* faintest */
  --clay:        #B25F3C;   /* single warm accent */
  --clay-deep:   #8A4527;   /* hover */
  --olive:       #6B6B40;   /* data accent #2 */
  --sky:         #6B7C82;   /* data accent #3 */

  /* ── type ── */
  --serif:  "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  --sans:   "Geist", "Söhne", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --mono:   "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --font-wordmark-alva:       "Syne", "Fraunces", serif;
  --font-wordmark-residences: "Questrial", "Geist", sans-serif;

  /* ── space ── */
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --max:          1440px;
  --section-pad:  clamp(5rem, 10vw, 9rem);

  /* ── motion ── */
  --ease:    cubic-bezier(.2, .65, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* paper grain */
  background-image:
    radial-gradient(1200px 800px at 80% -10%, rgba(178, 95, 60, .035), transparent 60%),
    radial-gradient(900px 700px at -10% 60%, rgba(107, 107, 64, .03), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* selection */
::selection { background: var(--clay); color: var(--bone); }

/* italic styling. Fraunces shines here */
em, i { font-style: italic; }
em { color: var(--clay-deep); }

/* ── ligature/anchor reset ── */
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--clay); }

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

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

ul, ol, dl { margin: 0; padding: 0; list-style: none; }

/* ── typography ── */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker i { font-style: normal; opacity: .55; }
.kicker--light { color: rgba(242, 238, 230, .8); }
.kicker--mute  { color: var(--ink-4); }

.display {
  font-family: var(--serif);
  font-weight: 350;
  font-style: normal;
  font-size: clamp(2.2rem, 5.4vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 96, "SOFT" 30;
}
.display em {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100;
  color: var(--ink);
  font-weight: 350;
}
.display--center { text-align: center; }

/* ────────────────────────────────────────────────────────────────────────
   Wordmark · Alva (Syne) + RESIDENCES (Questrial)
   ──────────────────────────────────────────────────────────────────────── */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.wordmark__alva {
  font-family: var(--font-wordmark-alva);
  font-weight: 500;
  letter-spacing: -.01em;
}
.wordmark__residences {
  font-family: var(--font-wordmark-residences);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* nav variant: just Alva, smaller */
.wordmark--nav .wordmark__alva {
  font-size: 22px;
  font-weight: 500;
  color: inherit;
}

/* SIKID brand-mark in footer (image) */
.brand-mark--xl {
  display: block;
  margin-bottom: 1.2rem;
}
.brand-mark__img {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}

/* ────────────────────────────────────────────────────────────────────────
   Navigation
   ──────────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem var(--gutter);
  transition: backdrop-filter .35s, background .35s;
}
.nav.is-stuck {
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  background: rgba(242, 238, 230, .82);
  border-bottom: 1px solid rgba(20, 17, 13, .07);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}

.nav__brand { color: var(--bone); transition: color .35s; }
.nav.is-stuck .nav__brand { color: var(--ink); }

.nav__menu {
  display: flex;
  gap: 1.8rem;
  justify-content: center;
}
.nav__menu a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(242, 238, 230, .85);
  position: relative;
  padding: .25rem 0;
}
.nav.is-stuck .nav__menu a { color: var(--ink-2); }
.nav__menu a::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__menu a:hover { color: var(--clay); }
.nav__menu a:hover::after { transform: scaleX(1); }

.nav__meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.lang {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 238, 230, .85);
  transition: color .35s;
}
.lang span { opacity: .45; }
.lang i { font-style: normal; opacity: .55; margin: 0 .25em; }
.nav.is-stuck .lang { color: var(--ink-2); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink);
  padding: .9em 1.4em;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.cta span { transition: transform .3s var(--ease); display: inline-block; }
.cta:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.cta:hover span { transform: translateX(4px); }

.cta--mini {
  padding: .65em 1.05em;
  color: var(--bone);
  border-color: rgba(242, 238, 230, .55);
  font-size: 11px;
}
.nav.is-stuck .cta--mini { color: var(--ink); border-color: var(--ink); }
.nav.is-stuck .cta--mini:hover { background: var(--ink); color: var(--bone); }
.cta--mini:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}

.cta--solid {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  align-self: flex-start;
  margin-top: .5rem;
}
.cta--solid:hover { background: var(--clay); border-color: var(--clay); color: var(--bone); }

.cta--ghost {
  border-color: var(--ink-3);
  color: var(--ink-2);
}
.cta--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }

/* ────────────────────────────────────────────────────────────────────────
   01 · Hero
   ──────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 7rem var(--gutter) 4rem;
  color: var(--bone);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__layer { position: absolute; inset: 0; }

.hero__layer--photo {
  background:
    linear-gradient(180deg, rgba(20,17,13,.45) 0%, rgba(20,17,13,.15) 35%, rgba(20,17,13,.7) 100%),
    url("./images/hero-aerial.jpg") center / cover no-repeat;
}

.hero__layer--grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .8;
}

.hero__layer--vignette {
  background: radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(20, 17, 13, .55) 100%);
}

.hero__chrome {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: contents;
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 2rem;
}

.hero__title {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  line-height: .9;
}

/* Hero wordmark: Alva (Syne 500) + RESIDENCES (Questrial widely tracked) */
.wordmark--hero .wordmark__alva {
  font-size: clamp(5rem, 17vw, 15rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--bone);
  line-height: .9;
}
.wordmark--hero .wordmark__residences {
  font-size: clamp(.95rem, 1.8vw, 1.5rem);
  letter-spacing: .42em;
  margin-top: 1.25rem;
  margin-left: .35em;
  color: rgba(242, 238, 230, .65);
  align-self: flex-start;
}

.hero__bottom {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: end;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

.hero__lede {
  font-family: var(--serif);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  max-width: 52ch;
  color: rgba(242, 238, 230, .92);
  font-variation-settings: "opsz" 14;
  margin: 0;
}
.hero__lede em {
  color: var(--bone);
  font-style: italic;
  font-weight: 400;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  border-top: 1px solid rgba(242,238,230,.25);
  padding-top: 1.25rem;
}
.hero__stats dl { margin: 0; }
.hero__stats dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242,238,230,.55);
  margin-bottom: .35rem;
}
.hero__stats dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 350;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 30;
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: rgba(242,238,230,.6);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero__scroll i { font-style: normal; }
.hero__scroll span {
  width: 1px;
  height: 32px;
  background: rgba(242,238,230,.6);
  position: relative;
  overflow: hidden;
}
.hero__scroll span::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clay);
  animation: scrollDot 2.4s var(--ease) infinite;
}
@keyframes scrollDot {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

/* ────────────────────────────────────────────────────────────────────────
   02 · Marquee
   ──────────────────────────────────────────────────────────────────────── */
.marquee {
  border-top: 1px solid var(--bone-3);
  border-bottom: 1px solid var(--bone-3);
  overflow: hidden;
  background: var(--bone);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  padding: 1.5rem 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 60, "SOFT" 100;
  color: var(--ink);
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee__track i {
  font-style: normal;
  color: var(--clay);
  font-size: 1.2em;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ────────────────────────────────────────────────────────────────────────
   Section shell
   ──────────────────────────────────────────────────────────────────────── */
.section {
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.section__head--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.section__lede {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* ────────────────────────────────────────────────────────────────────────
   03 · Vision
   ──────────────────────────────────────────────────────────────────────── */
.section--vision { padding-top: clamp(4rem, 8vw, 7rem); }

.vision__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.vision__statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 60, "SOFT" 30;
  max-width: 32ch;
}
.vision__statement em {
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "opsz" 60, "SOFT" 100;
}

.vision__notes {
  display: grid;
  gap: 1.5rem;
  padding-top: .8rem;
  border-top: 1px solid var(--bone-3);
}
.vision__notes > div {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bone-3);
}
.vision__notes > div:last-child { border-bottom: 0; }
.note__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: start;
  padding-top: .25rem;
}
.vision__notes p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 350;
  font-variation-settings: "opsz" 14;
  color: var(--ink);
}
.vision__notes p i { font-style: italic; color: var(--ink-3); }

/* Partner logos within Vision credits (SIKID, P20, Boardwalk) */
.note__logo {
  display: block;
  margin-bottom: .55rem;
  transition: opacity .25s var(--ease);
}
.note__logo:hover { opacity: .65; }
.note__logo img {
  display: block;
  height: auto;
  width: auto;
  max-height: 26px;
  max-width: 130px;
}
/* SIKID's mark is taller than the wordmark-only partners; give it a touch more height */
a.note__logo img,
.note__logo[aria-label="SIKID"] img { max-height: 38px; max-width: 140px; }

/* ────────────────────────────────────────────────────────────────────────
   04 · Gallery
   ──────────────────────────────────────────────────────────────────────── */
.section--gallery { padding-top: 0; }

.gallery__chips {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.chip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
  padding: .55em 1em;
  border: 1px solid var(--bone-3);
  border-radius: 999px;
  transition: all .25s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip.is-active {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.gallery {
  display: grid;
  gap: 1.5rem;
}

.gallery__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bone-2);
  overflow: hidden;
  border-radius: 2px;
}

.frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .65s var(--ease-out);
  pointer-events: none;
}
.frame.is-active { opacity: 1; pointer-events: auto; }

.frame__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease-out);
}
.frame.is-active .frame__media { transform: scale(1); }

/* gallery frames: photo backgrounds (cover) */
.frame__media--g2 { background: #2A2519 url("./images/ph-kitchen.png") center / cover no-repeat; }
.frame__media--g4 { background: #2A2519 url("./images/ph-living-ocean.jpg") center / cover no-repeat; }
.frame__media--g5 { background: #2A2519 url("./images/bathroom.png") center / cover no-repeat; }
.frame__media--g7 { background: #2A2519 url("./images/hero-aerial.jpg") center / cover no-repeat; }

/* floorplan frames: contain (so the whole plan is visible) on a light bg */
.frame__media--plan-g  { background: var(--bone-2) url("./images/plan-garden.webp")    center / contain no-repeat; }
.frame__media--plan-a  { background: var(--bone-2) url("./images/plan-type-a.webp")    center / contain no-repeat; }
.frame__media--plan-b  { background: var(--bone-2) url("./images/plan-type-b.webp")    center / contain no-repeat; }
.frame__media--plan-ph { background: var(--bone-2) url("./images/plan-penthouse.webp") center / contain no-repeat; }

/* gallery captions need a soft scrim so text reads on photos */
.frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(20,17,13,.7));
  pointer-events: none;
}
/* Floorplan frames sit on a light background. Drop the dark scrim,
   light-tinted caption pill so the title reads against the cream. */
.frame--plan { background: var(--bone-2); }
.frame--plan::after { content: none; }
.frame--plan figcaption { color: var(--ink-2); }
.frame--plan .frame__title { color: var(--ink); }

/* thumbnails: photo (cover) */
.thumb__media--g2 { background: url("./images/ph-kitchen.png") center / cover no-repeat; }
.thumb__media--g4 { background: url("./images/ph-living-ocean.jpg") center / cover no-repeat; }
.thumb__media--g5 { background: url("./images/bathroom.png") center / cover no-repeat; }
.thumb__media--g7 { background: url("./images/hero-aerial.jpg") center / cover no-repeat; }
/* thumbnails: floorplans (contain on light bg) */
.thumb__media--plan-g  { background: var(--bone-2) url("./images/plan-garden.webp")    center / contain no-repeat; }
.thumb__media--plan-a  { background: var(--bone-2) url("./images/plan-type-a.webp")    center / contain no-repeat; }
.thumb__media--plan-b  { background: var(--bone-2) url("./images/plan-type-b.webp")    center / contain no-repeat; }
.thumb__media--plan-ph { background: var(--bone-2) url("./images/plan-penthouse.webp") center / contain no-repeat; }

.frame figcaption {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  color: var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.frame__num { opacity: .7; }
.frame__title { text-transform: none; font-size: 13px; letter-spacing: 0; font-family: var(--serif); font-style: italic; }

/* controls */
.gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.ctrl {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bone-3);
  border-radius: 999px;
  color: var(--ink);
  transition: all .25s var(--ease);
}
.ctrl:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.gallery__count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-width: 80px;
  text-align: center;
}

.gallery__rail {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .6rem;
}
.thumb {
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  opacity: .55;
  transition: opacity .3s var(--ease);
}
.thumb:hover { opacity: .85; }
.thumb.is-active { opacity: 1; }
.thumb.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--clay);
}
.thumb__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* ────────────────────────────────────────────────────────────────────────
   05 · Materials
   ──────────────────────────────────────────────────────────────────────── */
.section--materials { padding-top: 0; }

.materials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.materials__copy {
  position: sticky;
  top: 100px;
}
.materials__copy .display { font-size: clamp(2rem, 4vw, 3.4rem); }
.materials__copy p {
  margin-top: 1.8rem;
  max-width: 50ch;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.65;
}

.material-list {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
}
.material-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--bone-3);
}
.material-list li:last-child { border-bottom: 1px solid var(--bone-3); }
.swatch {
  width: 56px;
  height: 56px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
/* real Alva palette swatches */
.swatch--offwhite {
  background: #E7E2D2;
  box-shadow: inset 0 0 0 1px rgba(20,17,13,.08);
}
.swatch--moscato {
  background:
    repeating-linear-gradient(92deg,
      #B5895A 0%, #A57848 3%, #B5895A 6%,
      #C49A6A 9%, #B5895A 12%, #9C6E40 15%, #B5895A 18%);
}
.swatch--deserto {
  background: #D8CCB0;
  background-image:
    radial-gradient(ellipse 40% 8% at 30% 35%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(ellipse 30% 6% at 70% 60%, rgba(255,255,255,.25), transparent 70%),
    linear-gradient(135deg, #DCD0B7 0%, #C5B89C 100%);
}
.swatch--matteblack {
  background: #1a1a1a;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 50%);
  box-shadow: inset 0 0 0 1px rgba(242,238,230,.06);
}
.swatch--pool {
  background:
    radial-gradient(circle at 30% 30%, #F2EEE6 0%, #E8E0CE 100%);
  background-image:
    radial-gradient(2px 2px at 25% 35%, #1a1a1a 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 65% 55%, #1a1a1a 50%, transparent 51%),
    radial-gradient(2px 2px at 50% 75%, #B25F3C 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 25%, #1a1a1a 50%, transparent 51%),
    linear-gradient(135deg, #F2EEE6 0%, #E8E0CE 100%);
}

.material-list strong {
  display: block;
  font-family: var(--serif);
  font-weight: 350;
  font-size: 1.1rem;
  font-variation-settings: "opsz" 14;
}
.material-list i {
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.materials__image {
  margin: 0;
  position: relative;
}
.materials__image .frame__media--m1 {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #D8CCB0 url("./images/ph-kitchen.png") center / cover no-repeat;
  border-radius: 2px;
  overflow: hidden;
}
.materials__image figcaption {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.materials__image figcaption i { font-style: italic; opacity: .6; text-transform: none; letter-spacing: 0; }

/* ────────────────────────────────────────────────────────────────────────
   06 · Floorplans
   ──────────────────────────────────────────────────────────────────────── */
.section--plans { padding-top: 0; }
.section--plans .section__head { align-items: center; text-align: center; }
.section--plans .kicker { align-self: center; }

.plans {
  display: grid;
  gap: 2.5rem;
}

.plans__rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bone-3);
  border-top: 1px solid var(--bone-3);
  border-bottom: 1px solid var(--bone-3);
}
.plan-tab {
  background: var(--bone);
  padding: 1.25rem 1.5rem;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: .15rem;
  transition: background .3s var(--ease), color .3s var(--ease);
  position: relative;
}
.plan-tab:hover { background: var(--bone-2); }
.plan-tab.is-active { background: var(--ink); color: var(--bone); }
.plan-tab.is-active::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 2px;
  background: var(--clay);
}
.plan-tab__letter {
  grid-row: span 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
  font-weight: 300;
  font-variation-settings: "opsz" 60, "SOFT" 100;
  align-self: center;
  color: var(--clay);
}
.plan-tab.is-active .plan-tab__letter { color: var(--clay); }
.plan-tab__name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  font-variation-settings: "opsz" 14;
  letter-spacing: -.005em;
}
.plan-tab__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan-tab.is-active .plan-tab__meta { color: rgba(242,238,230,.65); }

.plans__stage { position: relative; }

.plan {
  display: none;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.plan.is-active {
  display: grid;
  animation: planIn .6s var(--ease-out) both;
}
@keyframes planIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.plan__drawing {
  background: var(--bone-2);
  padding: 2rem;
  border-radius: 2px;
  color: var(--ink);
  position: relative;
}
/* Corner labels. Default to PLAN / 1:200 for placeholder drawings,
   and override per-plan via data attributes:
     data-plan-label="N1 — GARDEN UNIT"   (top-left, what the plan is)
     data-plan-count="1 of 1"             (top-right, how many of this typology) */
.plan__drawing::before {
  content: "PLAN";
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-3);
}
.plan__drawing[data-plan-label]::before { content: attr(data-plan-label); }
.plan__drawing::after {
  content: "1:200";
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-3);
}
.plan__drawing[data-plan-count]::after { content: attr(data-plan-count); }

.plan-svg { width: 100%; height: auto; }

/* Real (interior-only) architectural plan: the SVG carries the
   drawing + parcel hatch + compass; the parent carries the corner
   labels via data attributes. */
.plan__drawing--real {
  background: var(--bone);
  border: 1px solid var(--bone-3);
  overflow: hidden;
}
.plan-img {
  display: block;
  width: 100%;
  height: auto;
}

.plan__spec { padding-top: 1rem; }
.plan__title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bone-3);
}
.plan__letter {
  font-family: var(--serif);
  font-style: italic;
  font-size: 4rem;
  font-weight: 300;
  font-variation-settings: "opsz" 96, "SOFT" 100;
  color: var(--clay);
  line-height: .9;
}
.plan__title h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 350;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 60;
}

.plan__desc {
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 2rem 0;
  max-width: 42ch;
}

.spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 2rem 0;
  border-top: 1px solid var(--bone-3);
}
.spec > div {
  padding: .85rem 0;
  border-bottom: 1px solid var(--bone-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.spec > div:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid var(--bone-3); }
.spec > div:nth-child(even) { padding-left: 1.5rem; }
.spec dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spec dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  font-variation-settings: "opsz" 14;
}

/* ── View ladder (LVL 2 → Roof) ── */
.ladder {
  margin-top: 4rem;
  padding: 2rem 0;
  border-top: 1px solid var(--bone-3);
  border-bottom: 1px solid var(--bone-3);
  display: grid;
  gap: 1.5rem;
  text-align: center;
}
.ladder__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.ladder__list li {
  padding: .75rem 1rem;
  border-right: 1px solid var(--bone-3);
  display: grid;
  gap: .35rem;
}
.ladder__list li:last-child { border-right: 0; }
.ladder__list span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
}
.ladder__list i {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  font-variation-settings: "opsz" 14, "SOFT" 100;
}

/* ────────────────────────────────────────────────────────────────────────
   07 · Investment
   ──────────────────────────────────────────────────────────────────────── */
.section--invest {
  background: var(--ink);
  color: var(--bone);
  max-width: none;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section--invest .section__head { align-items: center; text-align: center; max-width: var(--max); margin: 0 auto 4rem; }
.section--invest .kicker { color: rgba(242,238,230,.55); }
.section--invest .display { color: var(--bone); }
.section--invest .display em { color: var(--clay); font-variation-settings: "opsz" 96, "SOFT" 100; }
.section--invest .section__lede { color: rgba(242,238,230,.7); }

.invest {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 5rem;
}
/* Grid items default to min-width: auto, which means a child wider than
   its allotted track (the .proforma__table at min-width: 640px, the area
   chart's SVG, etc.) pushes the whole section wider than the viewport
   on mobile. Forcing min-width: 0 lets each item shrink to its track,
   so .proforma__wrap's overflow-x: auto can do its job. */
.invest,
.invest > * { min-width: 0; }

/* ── Big-3 hero stats. Appreciation / Yield / Total Return ── */
.invest__hero {
  max-width: var(--max);
  margin: 0 auto 5rem;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(242,238,230,.18);
  border-bottom: 1px solid rgba(242,238,230,.18);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.big3 {
  display: grid;
  gap: .75rem;
  text-align: center;
}
.big3__lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242,238,230,.55);
}
.big3__num {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .9;
  color: var(--bone);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-feature-settings: "tnum", "lnum";
}
.big3__num i {
  font-style: italic;
  color: var(--clay);
  font-size: .42em;
  vertical-align: super;
  margin-left: .08em;
  font-variation-settings: "opsz" 60, "SOFT" 100;
  font-weight: 400;
}
.big3__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: rgba(242,238,230,.65);
  font-variation-settings: "opsz" 14, "SOFT" 100;
  max-width: 28ch;
  margin: 0 auto;
  line-height: 1.4;
}
.big3__div {
  font-family: var(--serif);
  color: var(--clay);
  opacity: .55;
  font-size: 1.5rem;
  align-self: center;
}

/* chart */
.chart {
  margin: 0;
  background: rgba(242,238,230,.04);
  border: 1px solid rgba(242,238,230,.12);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 2px;
}
.chart__head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.chart__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 350;
  font-variation-settings: "opsz" 30;
  color: var(--bone);
}

.chart__legend {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(242,238,230,.12);
}
.legend {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242,238,230,.7);
}
.legend__sw { width: 14px; height: 14px; display: inline-block; border-radius: 1px; }
.legend__sw--income { background: var(--clay); }
.legend__sw--carry  { background: var(--olive); }
.legend__sw--equity {
  background: transparent;
  border: 1.5px dashed rgba(242,238,230,.7);
  height: 12px;
  border-radius: 2px;
}
.legend__sw--ref {
  background: var(--ink);
  border: 1.5px solid var(--clay);
  border-radius: 50%;
  height: 14px;
  width: 14px;
}

/* ── Area chart ── */
.areachart {
  position: relative;
  width: 100%;
  aspect-ratio: 880 / 360;
}
.areachart__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* progressive draw-in */
.areachart__line {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: lineDraw 1.6s var(--ease-out) forwards;
  animation-delay: .2s;
}
.areachart__line--rent { animation-delay: .55s; }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }

.areachart__area {
  opacity: 0;
  animation: areaIn 1.4s var(--ease-out) forwards;
  animation-delay: .5s;
}
.areachart__area--rent { animation-delay: .85s; }
@keyframes areaIn { to { opacity: 1; } }

.areachart__ref {
  opacity: 0;
  animation: refIn .8s var(--ease-out) forwards;
  animation-delay: 1.4s;
}
.areachart__ref + .areachart__ref { animation-delay: 1.7s; }
@keyframes refIn { to { opacity: 1; } }

.chart__note {
  margin-top: 1.5rem;
  font-size: 12px;
  color: rgba(242,238,230,.5);
  line-height: 1.6;
  max-width: 70ch;
}
.chart__note i { color: var(--clay); font-style: italic; }

.paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(242,238,230,.18);
}
.path {
  padding: 2.5rem 2rem 2rem 0;
  border-right: 1px solid rgba(242,238,230,.18);
  position: relative;
}
.path:last-child { border-right: 0; padding-right: 0; }
.path:not(:first-child) { padding-left: 2rem; }
.path__num {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--clay);
  margin-bottom: 1rem;
}
.path h4 {
  margin: 0 0 1rem 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 350;
  font-variation-settings: "opsz" 60;
  color: var(--bone);
  letter-spacing: -.015em;
}
.path p {
  margin: 0;
  color: rgba(242,238,230,.7);
  line-height: 1.6;
}

/* ── Pre Sale 2 callout ── */
.callout {
  border-top: 1px solid rgba(178,95,60,.5);
  border-bottom: 1px solid rgba(178,95,60,.5);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  background:
    linear-gradient(180deg, rgba(178,95,60,.06), rgba(178,95,60,.02));
}
.callout__lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clay);
  white-space: nowrap;
  padding-top: .5rem;
}
.callout__body {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: rgba(242,238,230,.92);
  font-variation-settings: "opsz" 30, "SOFT" 30;
  font-weight: 350;
}
.callout__body em {
  font-style: italic;
  color: var(--bone);
  font-variation-settings: "opsz" 30, "SOFT" 100;
  font-weight: 400;
}

/* ── Pro-forma table ── */
.proforma {
  margin: 0;
  background: rgba(242,238,230,.04);
  border: 1px solid rgba(242,238,230,.12);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 2px;
}
.proforma__head {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(242,238,230,.12);
}
.proforma__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 350;
  font-variation-settings: "opsz" 30;
  color: var(--bone);
}

.proforma__assumptions,
.proforma__alt {
  margin-bottom: 1.5rem;
}
.proforma__assumptions summary,
.proforma__alt summary {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242,238,230,.6);
  cursor: pointer;
  padding: .75rem 0;
  border-bottom: 1px dashed rgba(242,238,230,.15);
  transition: color .25s var(--ease);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.proforma__assumptions summary::before,
.proforma__alt summary::before {
  content: "+";
  font-size: 14px;
  color: var(--clay);
  transition: transform .3s var(--ease);
  display: inline-block;
}
.proforma__assumptions[open] summary::before,
.proforma__alt[open] summary::before {
  transform: rotate(45deg);
}
.proforma__assumptions summary:hover,
.proforma__alt summary:hover {
  color: var(--bone);
}
.proforma__assumptions ul {
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.proforma__assumptions li {
  font-size: .9rem;
  color: rgba(242,238,230,.6);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}
.proforma__assumptions li::before {
  content: "·";
  color: var(--clay);
  position: absolute;
  left: 0;
}

.proforma__wrap {
  width: 100%;
  overflow-x: auto;
  margin: 1.5rem 0;
  -webkit-overflow-scrolling: touch;
}
.proforma__table {
  width: 100%;
  border-collapse: collapse;
  font-feature-settings: "tnum", "lnum";
  min-width: 640px;
}
.proforma__table th,
.proforma__table td {
  padding: .75rem 1rem;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(242,238,230,.85);
  border-bottom: 1px solid rgba(242,238,230,.08);
  white-space: nowrap;
}
.proforma__table thead th {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  font-variation-settings: "opsz" 14;
  color: var(--bone);
  text-align: right;
  border-bottom: 1px solid rgba(242,238,230,.2);
  padding-bottom: 1rem;
  text-transform: none;
  letter-spacing: 0;
}
.proforma__table thead th:first-child,
.proforma__table tbody th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242,238,230,.55);
  font-weight: 500;
}
.proforma__table thead th:first-child { color: rgba(242,238,230,.4); }
.proforma__sub th, .proforma__sub td {
  background: rgba(242,238,230,.03);
  font-weight: 500;
  color: var(--bone);
}
.proforma__total th, .proforma__total td {
  border-top: 1px solid rgba(242,238,230,.18);
  background: rgba(178,95,60,.06);
  color: var(--bone);
  font-weight: 500;
  font-size: 13px;
}
.proforma__yield th, .proforma__yield td {
  border-bottom: 0;
  color: var(--clay);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  font-variation-settings: "opsz" 30, "SOFT" 100;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.proforma__yield th { color: rgba(242,238,230,.7); font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

.proforma__table--small th,
.proforma__table--small td { font-size: 11px; padding: .55rem .75rem; }

.proforma__altnote {
  margin: .75rem 0 0;
  font-size: 12px;
  color: rgba(242,238,230,.5);
  font-style: italic;
}

/* Currency / period indicator under the pro-forma title. Small and quiet. */
.proforma__units {
  margin: .35rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: rgba(242, 238, 230, .55);
}

/* ── Appreciation note ── */
.appreciation {
  display: grid;
  gap: 1rem;
  text-align: center;
  max-width: 70ch;
  margin: 0 auto;
  padding: 2rem 0;
}
.appreciation .kicker { justify-self: center; color: var(--clay); }
.appreciation p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: rgba(242,238,230,.85);
  font-variation-settings: "opsz" 30, "SOFT" 30;
  font-weight: 350;
}
.appreciation em {
  font-style: italic;
  color: var(--bone);
  font-variation-settings: "opsz" 30, "SOFT" 100;
}

.disclosure {
  max-width: 80ch;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 11px;
  color: rgba(242,238,230,.4);
  line-height: 1.55;
  letter-spacing: 0;
}

/* ────────────────────────────────────────────────────────────────────────
   08 · Amenities
   ──────────────────────────────────────────────────────────────────────── */
.section--amen .section__head { align-items: center; text-align: center; }

.amen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--bone-3);
  border-left: 1px solid var(--bone-3);
}
.amen {
  padding: 2.5rem;
  border-right: 1px solid var(--bone-3);
  border-bottom: 1px solid var(--bone-3);
  transition: background .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.amen:hover { background: var(--bone-2); }
.amen::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.amen:hover::after { transform: scaleX(1); }

.amen__icon {
  width: 36px;
  height: 36px;
  color: var(--clay);
  margin-bottom: 1.5rem;
}
.amen h4 {
  margin: 0 0 .6rem 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 350;
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 30;
}
.amen p {
  margin: 0;
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 28ch;
}

.amen__more {
  margin: 2.5rem auto 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-3);
  font-variation-settings: "opsz" 14, "SOFT" 100;
  max-width: 50ch;
}

/* ────────────────────────────────────────────────────────────────────────
   09 · Place
   ──────────────────────────────────────────────────────────────────────── */
.place {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.place__copy .display { font-size: clamp(2rem, 4vw, 3.6rem); }
.place__copy p {
  margin: 1.8rem 0 2.5rem 0;
  max-width: 50ch;
  color: var(--ink-2);
  line-height: 1.65;
  font-size: 1.05rem;
}

.place__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--bone-3);
}
.place__meta > div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--bone-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.place__meta > div:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid var(--bone-3); }
.place__meta > div:nth-child(even) { padding-left: 1.5rem; }
.place__meta dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.place__meta dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  font-variation-settings: "opsz" 14;
}

.place__map { margin: 0; }
.map {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bone-2);
  border-radius: 2px;
}

/* ── Mapbox interactive map ──
   The container has a fixed aspect ratio so it occupies the same vertical
   slot as the static SVG fallback. JS lazy-loads Mapbox GL and renders inside. */
.map--mapbox {
  position: relative;
  height: auto;
  aspect-ratio: 480 / 520;
  overflow: hidden;
}
/* Fallback SVG sits absolutely inside the container until JS removes it.
   object-fit: contain so the SVG isn't cropped while we wait for Mapbox. */
.map__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bone-2);
}
.map--mapbox .mapboxgl-canvas { border-radius: 2px; outline: none; }

/* Tone-match Mapbox default controls to the editorial palette */
.map--mapbox .mapboxgl-ctrl-group {
  background: var(--bone);
  border: 1px solid var(--bone-3);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(20, 17, 13, .08);
  overflow: hidden;
}
.map--mapbox .mapboxgl-ctrl-group button {
  background: transparent;
  width: 32px;
  height: 32px;
}
.map--mapbox .mapboxgl-ctrl-group button + button {
  border-top: 1px solid var(--bone-3);
}
.map--mapbox .mapboxgl-ctrl-group button:hover { background: var(--bone-2); }
.map--mapbox .mapboxgl-ctrl-attrib {
  background: rgba(242, 238, 230, .85);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.map--mapbox .mapboxgl-ctrl-attrib a { color: var(--ink-2); }

/* Mapbox branding overrides.
   ─────────────────────────
   Mapbox free / pay-as-you-go ToS (section 2.5) requires the Mapbox logo
   and copyright attribution to remain visible. Hiding them is only ToS-
   compliant on Enterprise plans. The two rules below hide both. If you
   want to stay compliant, delete the two rules and the controls reappear. */
.map--mapbox .mapboxgl-ctrl-logo,
.map--mapbox .mapboxgl-ctrl-attrib { display: none; }

/* The cooperative-gestures overlay (the "use ctrl + scroll to zoom" hint
   that appears when a user scrolls over the map without modifier keys) */
.map--mapbox .mapboxgl-cooperative-gesture-screen {
  background: rgba(20, 17, 13, .35);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
}

/* ── Custom Alva marker (matches the SVG pin: concentric rings + dot + label) ── */
.alva-marker {
  position: relative;
  width: 0;
  height: 0;
  pointer-events: none;
}
.alva-marker__ring,
.alva-marker__dot,
.alva-marker__line,
.alva-marker__label {
  position: absolute;
  transform: translate(-50%, -50%);
}
.alva-marker__ring {
  border-radius: 50%;
  border: 1px solid var(--clay);
}
.alva-marker__ring--outer {
  width: 40px;
  height: 40px;
  opacity: .5;
}
.alva-marker__ring--inner {
  width: 24px;
  height: 24px;
  border-width: 1.2px;
}
.alva-marker__dot {
  width: 6px;
  height: 6px;
  background: var(--clay);
  border-radius: 50%;
}
.alva-marker__line {
  width: 1px;
  height: 18px;
  background: var(--clay);
  top: -22px;
  left: 0;
  transform: translateX(-50%);
}
.alva-marker__label {
  top: -42px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--clay);
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(242, 238, 230, .8);
}

/* ── Numbered landmark markers (matches place__index list) ── */
.landmark-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--bone);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform .2s var(--ease-out), background .2s var(--ease-out);
  box-shadow: 0 1px 3px rgba(20, 17, 13, .35);
}
.landmark-marker:hover {
  transform: scale(1.18);
  background: var(--clay);
}

/* Landmark popup (hover/tap label) */
.landmark-popup .mapboxgl-popup-content {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  padding: .35rem .7rem;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(20, 17, 13, .35);
}
/* Tip color: only the relevant border for each anchor side gets ink */
.landmark-popup.mapboxgl-popup-anchor-top    .mapboxgl-popup-tip { border-bottom-color: var(--ink); }
.landmark-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color:    var(--ink); }
.landmark-popup.mapboxgl-popup-anchor-left   .mapboxgl-popup-tip { border-right-color:  var(--ink); }
.landmark-popup.mapboxgl-popup-anchor-right  .mapboxgl-popup-tip { border-left-color:   var(--ink); }
.landmark-popup.mapboxgl-popup-anchor-top-left     .mapboxgl-popup-tip { border-bottom-color: var(--ink); }
.landmark-popup.mapboxgl-popup-anchor-top-right    .mapboxgl-popup-tip { border-bottom-color: var(--ink); }
.landmark-popup.mapboxgl-popup-anchor-bottom-left  .mapboxgl-popup-tip { border-top-color:    var(--ink); }
.landmark-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color:    var(--ink); }

.place__index {
  margin-top: 1.5rem;
  display: grid;
  gap: .75rem;
}
.place__index li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  align-items: baseline;
  padding: .25rem 0;
  border-bottom: 1px dotted var(--bone-3);
}
.place__index li span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--clay);
  letter-spacing: .12em;
}
.place__index li i {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .12em;
  font-style: normal;
}

/* ────────────────────────────────────────────────────────────────────────
   10 · Timeline
   ──────────────────────────────────────────────────────────────────────── */
.section--time .section__head { align-items: center; text-align: center; }

/* Two-column layout: timeline left, rain panel right */
.time-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.timeline {
  max-width: 100%;
  margin: 0;
  position: relative;
  padding-left: 2rem;
}
.timeline::before {
  content: "";
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: 6px;
  width: 1px;
  background: var(--bone-3);
}

.timeline__item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  position: relative;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--bone-3);
}
.timeline__item:last-child { border-bottom: 0; }

.timeline__date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: center;
}

.timeline__dot {
  position: absolute;
  left: -1.69rem;
  top: 2rem;
  width: 12px;
  height: 12px;
  background: var(--bone);
  border: 1px solid var(--ink-3);
  border-radius: 50%;
}
.timeline__item.is-done .timeline__dot { background: var(--ink); border-color: var(--ink); }
.timeline__item.is-current .timeline__dot {
  background: var(--clay);
  border-color: var(--clay);
  box-shadow: 0 0 0 6px rgba(178,95,60,.18);
}

.timeline__body h4 {
  margin: 0 0 .35rem 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  font-variation-settings: "opsz" 30;
  letter-spacing: -.01em;
}
.timeline__body h4 i {
  font-style: italic;
  color: var(--clay);
  font-size: .75em;
  margin-left: .5em;
  font-weight: 400;
  letter-spacing: .04em;
}
.timeline__body p {
  margin: 0;
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.55;
}

/* ── Rain panel (alongside timeline) ── */
.rain {
  position: sticky;
  top: 100px;
  background: var(--bone-2);
  border: 1px solid var(--bone-3);
  border-radius: 2px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.rain__head {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bone-3);
}
.rain__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 350;
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 30;
  color: var(--ink);
}
.rain__plot {
  position: relative;
  width: 100%;
  min-height: 220px;
  background: var(--bone);
  border-radius: 2px;
  padding: 1rem;
}
.rain__svg {
  width: 100%;
  height: auto;
  display: block;
  min-height: 200px;
  filter: contrast(1.05);
}
.rain__caption {
  margin: 1.25rem 0 0 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.55;
}

/* ────────────────────────────────────────────────────────────────────────
   11 · Contact
   ──────────────────────────────────────────────────────────────────────── */
.section--contact { padding-bottom: clamp(6rem, 10vw, 10rem); }

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.contact__copy .display { font-size: clamp(2rem, 4vw, 3.4rem); }
.contact__copy p {
  margin: 1.8rem 0 2.5rem 0;
  max-width: 48ch;
  color: var(--ink-2);
  line-height: 1.65;
  font-size: 1.05rem;
}

.contact__lines {
  display: grid;
  gap: 1rem;
  border-top: 1px solid var(--bone-3);
  padding-top: 1.5rem;
}
.contact__lines li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1rem;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-variation-settings: "opsz" 14;
}
.contact__lines li i {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-style: normal;
}
.contact__lines a {
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.contact__lines a:hover { border-bottom-color: var(--clay); }

.contact__form {
  display: grid;
  gap: 1.25rem;
  background: var(--bone-2);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 2px;
  border: 1px solid var(--bone-3);
}

.field { display: grid; gap: .5rem; }
.field label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-variation-settings: "opsz" 14;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-3);
  padding: .5rem 0;
  border-radius: 0;
  transition: border-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-bottom-color: var(--clay);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1 L 6 6 L 11 1' fill='none' stroke='%2314110D' stroke-width='1'/></svg>");
  background-repeat: no-repeat;
  background-position: right .5rem center;
}

.contact__small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 1rem;
}
.contact__small i { font-style: italic; opacity: .7; text-transform: none; letter-spacing: 0; }

/* ────────────────────────────────────────────────────────────────────────
   Footer
   ──────────────────────────────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: rgba(242,238,230,.7);
  padding: 5rem var(--gutter) 2rem;
}
.foot__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(242,238,230,.12);
}
.foot__col--brand p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 38ch;
  font-variation-settings: "opsz" 14;
  color: rgba(242,238,230,.7);
}
.foot__col--brand i { font-style: italic; color: var(--clay); }
.foot__col--brand a { color: var(--bone); border-bottom: 1px solid rgba(242,238,230,.3); }
.foot__col--brand .brand-mark { color: var(--bone); }
.foot__col--brand .brand-mark i { color: var(--clay); }

.foot__partners {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(242,238,230,.12);
}
.foot__partners ul { display: grid; gap: 1.25rem; }
.foot__partners li {
  font-family: var(--serif);
  font-size: .95rem;
  font-variation-settings: "opsz" 14;
  color: var(--bone);
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 1rem;
}
.foot__partners li i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242,238,230,.5);
}
.foot__partner {
  display: inline-block;
}
.foot__partner img {
  display: block;
  height: auto;
  width: auto;
  max-height: 28px;
  max-width: 140px;
  opacity: .9;
}

.foot__lab {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242,238,230,.4);
  margin-bottom: 1.25rem;
}
.foot__col ul { display: grid; gap: .6rem; }
.foot__col li {
  font-family: var(--serif);
  font-size: 1rem;
  font-variation-settings: "opsz" 14;
}
.foot__col li i { font-style: normal; opacity: .55; }

.foot__base {
  max-width: var(--max);
  margin: 2rem auto 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242,238,230,.4);
}
.foot__rule { color: var(--clay); opacity: .6; }

/* ────────────────────────────────────────────────────────────────────────
   Reveal animation
   ──────────────────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* hero stays visible */
.hero[data-reveal] {
  opacity: 1;
  transform: none;
}
.hero[data-reveal] > * {
  opacity: 0;
  transform: translateY(16px);
  animation: heroIn 1.4s var(--ease-out) forwards;
}
.hero[data-reveal] .hero__top   { animation-delay: .15s; }
.hero[data-reveal] .hero__title { animation-delay: .3s; }
.hero[data-reveal] .hero__bottom { animation-delay: .55s; }
.hero[data-reveal] .hero__scroll { animation-delay: 1s; animation-duration: 1.6s; }

@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

/* ────────────────────────────────────────────────────────────────────────
   Responsive
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav__menu { display: none; }
  .nav__inner { grid-template-columns: 1fr auto; }

  .hero__bottom { grid-template-columns: 1fr; gap: 2rem; }
  .hero__stats { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .hero__stats dd { font-size: 1.3rem; }

  .vision__grid { grid-template-columns: 1fr; gap: 3rem; }
  .vision__statement { font-size: 1.6rem; }

  .materials { grid-template-columns: 1fr; }
  .materials__copy { position: static; }

  .plans__rail { grid-template-columns: repeat(2, 1fr); }
  .plan { grid-template-columns: 1fr; }

  .invest__hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .big3__div { display: none; }
  .big3 { padding: 1.5rem 0; border-bottom: 1px solid rgba(242,238,230,.12); }
  .big3:last-of-type { border-bottom: 0; }

  .callout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .callout__lab { white-space: normal; padding-top: 0; }

  .wordmark--hero .wordmark__alva { font-size: clamp(4rem, 18vw, 9rem); }
  .wordmark--hero .wordmark__residences { font-size: clamp(.85rem, 2.4vw, 1.1rem); letter-spacing: .35em; }

  .paths { grid-template-columns: 1fr; }
  .path { border-right: 0; border-bottom: 1px solid rgba(242,238,230,.18); padding: 2rem 0; }
  .path:not(:first-child) { padding-left: 0; }

  .amen-grid { grid-template-columns: repeat(2, 1fr); }

  .place { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }

  .time-grid { grid-template-columns: 1fr; gap: 3rem; }
  .rain { position: static; }

  .ladder__list { grid-template-columns: repeat(5, 1fr); font-size: .85rem; }

  .foot__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .hero__top { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .hero__line { font-size: clamp(4rem, 22vw, 8rem); }
  .hero__line--sub { font-size: clamp(2rem, 12vw, 3.5rem); }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }

  .gallery__rail { grid-template-columns: repeat(4, 1fr); }
  .gallery__rail .thumb:nth-child(n+5) { display: none; }

  .plans__rail { grid-template-columns: 1fr; }
  .plan-tab { padding: 1rem; }

  .spec { grid-template-columns: 1fr; }
  .spec > div:nth-child(odd) { padding-right: 0; border-right: 0; }
  .spec > div:nth-child(even) { padding-left: 0; }

  .big3__num { font-size: clamp(2.8rem, 14vw, 4rem); }

  .amen-grid { grid-template-columns: 1fr; }

  .place__meta { grid-template-columns: 1fr; }
  .place__meta > div:nth-child(odd) { padding-right: 0; border-right: 0; }
  .place__meta > div:nth-child(even) { padding-left: 0; }

  .foot__inner { grid-template-columns: 1fr; }

  .timeline { padding-left: 1.5rem; }
  .timeline__item { grid-template-columns: 1fr; gap: .5rem; }
  .timeline__dot { left: -1.2rem; }

  .ladder__list { grid-template-columns: 1fr 1fr; font-size: .8rem; }
  .ladder__list li:nth-child(2n) { border-right: 0; }
  .ladder__list li:nth-child(odd):last-child { grid-column: span 2; border-right: 0; }

  /* Invest section: tighten chrome on small viewports so children don't
     fight the gutter. Section gutter ~20px each side leaves ~335px on
     a 375px phone; 1.25rem padding inside each panel preserves a
     usable content width. */
  .invest { gap: 3rem; }
  .chart { padding: 1.25rem; }
  .proforma { padding: 1.25rem; }
  .callout { padding: 1.5rem 1.25rem; }
  .chart__legend { gap: .5rem 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; }
  .chart__note { font-size: 11px; }
  .appreciation { padding: 1rem 0; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}