/* Hallmark · macrostructure: Marquee Hero (site-wide token lock: The Emerald Room)
 * theme: custom · vibe: "emerald jewel box, antique gold, evening dessert escape"
 * paper: oklch(17% 0.02 165) · accent: oklch(72% 0.13 90)
 * display: Cormorant Garamond (roman) · body: Switzer · outlier: Geist Mono (location/hours captions only)
 * axes: dark / roman-serif / chromatic-amber-gold · studied: no · context: inferred
 * contrast: pass (40-41) · nav: N5 floating pill · footer: Ft5 statement · slop: pass (42-45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50-57) · pre-emit critique: P5 H5 E5 S5 R5 V5
 */

:root {
  /* Palette — deep emerald-black papers, warm cream ink, antique gold accent */
  --color-paper:       oklch(17% 0.02 165);
  --color-paper-2:     oklch(22% 0.03 165);
  --color-paper-3:     oklch(28% 0.04 165);
  --color-ink:         oklch(94% 0.015 90);
  --color-ink-2:       oklch(74% 0.02 120);
  --color-rule:        oklch(34% 0.03 165);
  --color-muted:       oklch(60% 0.02 130);
  --color-accent:      oklch(72% 0.13 90);
  --color-accent-ink:  oklch(18% 0.03 160);
  --color-focus:       oklch(78% 0.16 90);
  --color-glow:        oklch(40% 0.06 150);

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Switzer", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Scale — major third 1.25 */
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-4xl:  3.8147rem;
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(2.25rem, 4vw + 0.75rem, 4rem);

  /* Spacing — 4pt */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* Depth */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;

  --rule-hair: 1px;
  --radius: 0.75rem;
  --radius-pill: 999px;
  --banner-height: 4.5rem;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 350;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient emerald atmosphere: two fixed radial blooms, low chroma, no animation */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 82% 8%, oklch(30% 0.055 160 / 0.55), transparent 70%),
    radial-gradient(30rem 26rem at 8% 88%, oklch(26% 0.05 150 / 0.5), transparent 70%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: var(--color-accent); text-decoration-color: oklch(72% 0.13 90 / 0.4); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--color-accent); }
img { display: block; max-width: 100%; height: auto; }
::selection { background: oklch(72% 0.13 90 / 0.28); color: var(--color-ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: inherit;
}

.wrap {
  width: min(100% - clamp(2rem, 6vw, 6rem), 76rem);
  margin-inline: auto;
}

/* Mono caption register — location/hours only */
.mono {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ============ Nav — N5 floating pill ============ */
.nav {
  position: fixed;
  inset-inline: 0;
  top: var(--space-md);
  z-index: var(--z-sticky);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg);
  background: oklch(20% 0.025 165 / 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  line-height: 1;
  max-width: calc(100% - 2rem);
}
.nav__wordmark {
  margin-inline-end: auto; 
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.nav__link {
  color: var(--color-ink-2);
  text-decoration: none;
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
  padding-block: var(--space-2xs);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-accent); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .nav__cta:hover { transform: translateY(-1px); background: var(--color-focus); } }
.nav__cta:active { transform: translateY(1px); }
.nav__sheet-toggle { display: none; }
.nav__sheet { display: none; }
@media (max-width: 52rem) {
  .nav__links { display: none; }
  .nav__sheet-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    background: none; border: none; cursor: pointer;
    color: var(--color-ink); border-radius: var(--radius-pill);
    flex: 0 0 auto;
  }
  .nav__sheet {
    position: absolute; top: calc(100% + var(--space-xs)); inset-inline: 0;
    display: none;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: oklch(20% 0.025 165 / 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius);
  }
  .nav__sheet.is-open { display: flex; }
  .nav__pill {
    position: relative;
    flex-wrap: nowrap;
    border-radius: 1.5rem;
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
    gap: var(--space-sm);
  }
}

@media (max-width: 30rem) {
  .nav__cta-num { display: none; }
  .nav__cta { padding-inline: var(--space-sm); }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  border: var(--rule-hair) solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn--solid { background: var(--color-accent); color: var(--color-accent-ink); }
@media (hover: hover) { .btn--solid:hover { background: var(--color-focus); transform: translateY(-1.5px); } }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
@media (hover: hover) { .btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-1.5px); } }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ============ HERO — Marquee Hero, left-biased ============ */
.hero {
  position: relative;
  min-height: min(52rem, 100svh);
  display: grid;
  align-items: end;
  padding-top: calc(var(--banner-height) + var(--space-3xl));
  padding-bottom: var(--space-2xl);
  isolation: isolate;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-2xl);
  align-items: end;
}
.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.hero__kicker .mono { color: var(--color-accent); }
.hero__kicker::before {
  content: "";
  width: 2.5rem; height: var(--rule-hair);
  background: var(--color-accent);
}
.hero__title {
  font-size: var(--text-display);
  font-weight: 500;
  max-width: 12ch;
}
.hero__title .gold { color: var(--color-accent); }
.hero__lede {
  margin-top: var(--space-lg);
  max-width: 46ch;
  font-size: var(--text-md);
  font-weight: 350;
  color: var(--color-ink-2);
  line-height: 1.55;
}
.hero__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.hero__proof {
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.hero__stars { color: var(--color-accent); letter-spacing: 0.1em; font-size: var(--text-sm); }

/* Hero photo stack — native 3:4 portraits, right column, overlapped with rotation */
.hero__media {
  position: relative;
  height: clamp(26rem, 44vw, 34rem);
}
.hero__photo {
  position: absolute;
  width: min(15rem, 46%);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  border: var(--rule-hair) solid var(--color-rule);
  box-shadow: 0 24px 48px oklch(10% 0.02 165 / 0.5);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo--a { right: 34%; bottom: 12%; transform: rotate(-5deg); z-index: 1; }
.hero__photo--b { right: 6%; bottom: 0; width: min(17rem, 52%); transform: rotate(3deg); z-index: 2; }
.hero__photo--c { right: 22%; top: 0; transform: rotate(7deg); z-index: 0; opacity: 0.9; }
.hero__photo figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
  background: linear-gradient(transparent, oklch(14% 0.02 165 / 0.85));
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Marquee — full-bleed, pauses on hover */
.marquee {
  position: relative;
  border-block: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-md);
  overflow: hidden;
  background: var(--color-paper-2);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__seq {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  padding-right: var(--space-2xl);
  list-style: none;
  margin: 0;
}
.marquee__seq li {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-ink-2);
  white-space: nowrap;
}
.marquee__seq li::after {
  content: "◆";
  font-size: var(--text-xs);
  color: var(--color-accent);
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
  .marquee__seq:nth-child(n+2) { display: none; }
}

/* ============ Sections ============ */
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section__head { margin-bottom: var(--space-2xl); max-width: 58ch; }
.section__title { font-size: var(--text-3xl); }
.section__intro { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-md); max-width: 56ch; }
.rule { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: 0; }

/* ============ Signatures — asymmetric editorial grid ============ */
.sig {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}
.sig__feature {
  grid-column: 1 / span 5;
  position: relative;
}
.sig__feature .frame { aspect-ratio: 3 / 4; }
.sig__feature-text { margin-top: var(--space-md); max-width: 40ch; }
.sig__list {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.sig__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.sig__item:last-child { border-bottom: 0; padding-bottom: 0; }
.sig__thumb {
  width: 5.5rem;
  aspect-ratio: 3 / 4;
  border-radius: calc(var(--radius) / 2);
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule);
}
.sig__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sig__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.sig__desc { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }

/* Photo frame — aspect preserved */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: linear-gradient(transparent, oklch(14% 0.02 165 / 0.88));
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* ============ Story band — bleed colour shift ============ */
.storyband {
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule);
}
.storyband__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.storyband__quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  max-width: 24ch;
}
.storyband__body { color: var(--color-ink-2); margin-top: var(--space-md); max-width: 52ch; }
.storyband__media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.storyband__media .frame { aspect-ratio: 3 / 4; }
.storyband__media .frame:first-child { transform: translateY(var(--space-xl)); }

/* ============ Reviews — quotes, one wide + column ============ */
.reviews { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg); }
.review {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-paper-2);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.review--wide { grid-column: 1 / span 7; }
.review--tall-a { grid-column: 8 / span 5; }
.review--b { grid-column: 1 / span 4; }
.review--c { grid-column: 5 / span 4; }
.review--d { grid-column: 9 / span 4; }
.review__stars { color: var(--color-accent); letter-spacing: 0.12em; }
.review__text {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink);
}
.review--wide .review__text { font-size: var(--text-lg); }
.review__who { color: var(--color-muted); font-size: var(--text-sm); margin-top: auto; }

/* ============ Visit / hours panel ============ */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: stretch;
}
.visit__card {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-paper-2);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.visit__rows { display: flex; flex-direction: column; gap: var(--space-sm); }
.visit__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
}
.visit__row:last-child { border-bottom: 0; }
.visit__row dt { color: var(--color-muted); }
.visit__row dd { margin: 0; color: var(--color-ink); font-variant-numeric: tabular-nums; text-align: right; }
.visit__note { color: var(--color-muted); font-size: var(--text-sm); }
/* Map panel — stylized address block (external embed blocked in some environments) */
.visit__locs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-md);
}
.visit__loc {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-paper-2);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.visit__loc .mono { color: var(--color-accent); }
.visit__loc-name { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
.visit__loc-addr { color: var(--color-ink-2); font-size: var(--text-sm); }
.visit__loc-note { color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-2xs); }

.visit__map {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule);
  min-height: 24rem;
  background:
    radial-gradient(20rem 16rem at 78% 22%, oklch(34% 0.07 155 / 0.7), transparent 70%),
    radial-gradient(16rem 14rem at 18% 82%, oklch(30% 0.05 150 / 0.6), transparent 70%),
    var(--color-paper-3);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-xl);
}
.visit__map-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.visit__map-pin {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--color-accent);
  display: grid; place-items: center;
}
.visit__map-pin::after { content: ""; width: 0.75rem; height: 0.75rem; background: var(--color-accent-ink); border-radius: 50%; }
.visit__map-addr { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--color-ink); max-width: 18ch; }
.visit__map-sub { color: var(--color-muted); font-size: var(--text-sm); }

/* Badges */
.badges { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.badge {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  white-space: nowrap;
}

/* ============ Footer — Ft5 statement ============ */
.footer {
  border-top: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  padding-block: var(--space-3xl) var(--space-xl);
}
.footer__statement {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  max-width: 22ch;
  line-height: 1.25;
}
.footer__grid {
  margin-top: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.footer__link { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.footer__link:hover { color: var(--color-accent); }
.footer__fine { margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-xs); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); }

/* Mobile sticky call bar */
.callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  background: oklch(20% 0.025 165 / 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.callbar .btn { flex: 1; }
@media (max-width: 52rem) { .callbar { display: flex; } body { padding-bottom: 4.5rem; } }

/* ============ Responsive ============ */
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-top: calc(var(--banner-height) + var(--space-2xl)); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__media { height: clamp(20rem, 72vw, 26rem); }
  .hero__photo--a { right: 40%; }
  .sig__feature { grid-column: 1 / -1; max-width: 26rem; }
  .sig__list { grid-column: 1 / -1; }
  .storyband__grid { grid-template-columns: minmax(0, 1fr); }
  .storyband__media .frame:first-child { transform: none; }
  .review--wide, .review--tall-a, .review--b, .review--c, .review--d { grid-column: 1 / -1; }
  .visit { grid-template-columns: minmax(0, 1fr); }
  .visit__map { min-height: 18rem; }
  .section { padding-block: var(--space-2xl); }
}

/* Reveal — one orchestrated entrance, hero only */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: revealReduced 150ms linear forwards; }
  @keyframes revealReduced { to { opacity: 1; transform: none; } }
}