/* home.css — White Sand Salon homepage · Wave 3 "cinematic chapters".
 *
 * The homepage is composed as a sequence of full-viewport scenes — one idea per
 * screen — in the register of a luxury flagship: an enormous type manifesto, six
 * full-bleed editorial service chapters with parallax depth, a dark pull-quote
 * band, and a typographic closing. Black/white elegance, warm sand bands, gold
 * (#b4914c) hairlines, Montserrat display + body / Sacramento
 * script. Vast negative space; restrained, choreographed motion.
 *
 * Scoped under .home / .home-hero-wrap so this file is inert on every other page.
 * Entrance reveals: src/js/reveal.js. Continuous parallax: src/js/choreo.js. Both
 * degrade to fully-visible, still content under prefers-reduced-motion / no-JS.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Shared primitives (scoped)
   ───────────────────────────────────────────────────────────────────────────── */
.home {
  --edge: clamp(1.5rem, 6vw, 5rem); /* horizontal page gutter */
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}

.home .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--space-5);
}
.home .eyebrow--onDark {
  color: var(--gold-light);
}

/* Reveal system: elements start lowered + transparent, settle on .is-visible. */
.home [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.home [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Hero scroll cue (floats over the cinematic hero's lower edge)
   ───────────────────────────────────────────────────────────────────────────── */
.home-hero-wrap {
  position: relative;
  /* NO height contract here any more. The cinematic hero is a normal IN-FLOW
   * 100svh block again (hero.css v2 — it is never fixed and never removed), so
   * it gives this wrapper its height, exactly like the pre-"Descent" hero did.
   * An explicit min-height here would actively hurt: hero.css subtracts the
   * sticky header's height from the hero so it ends precisely at the fold, and
   * a 100svh min-height on the wrap would re-add that band as a strip of blank
   * page under the video — and drag the scroll cue down into it. */
}
.home-hero-wrap .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 34px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 6px;
  /* The cue now sits over live footage for the whole visit (v1 only had to
   * survive ~9s of overlay, and hero.js restyled it white while it did). Ink on
   * the mirror's bright bottom edge is unreadable, so it is white with a soft
   * shadow — the same treatment the v1 overlay applied, made permanent. */
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
  opacity: 0;
  animation: home-cue-in 0.9s var(--ease) 1.6s forwards;
}
.home-hero-wrap .scroll-cue__label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.home-hero-wrap .scroll-cue__chev {
  width: 15px;
  height: 15px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.94);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
  transform: rotate(45deg);
  animation: home-cue-bob 1.9s var(--ease) infinite;
}
/* Below the chat breakpoint the "CHAT WITH LORI" pill is fixed at
 * right:16px / bottom:18px and is wide enough to reach the horizontal centre of
 * a phone — where the cue sits. Lift the cue clear of it. (The cue used to be
 * destroyed with the v1 overlay long before anyone could notice the overlap;
 * now that the hero and the cue are permanent, they share the screen for good.) */
@media (max-width: 1023px) {
  .home-hero-wrap .scroll-cue {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
}
@keyframes home-cue-in {
  to {
    opacity: 1;
  }
}
@keyframes home-cue-bob {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
  }
  50% {
    transform: rotate(45deg) translate(3px, 3px);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Chapter 2 — Manifesto: near-full-viewport type statement
   ───────────────────────────────────────────────────────────────────────────── */
.home-manifesto {
  min-height: 90vh;
  min-height: 90svh;
  display: grid;
  place-items: center;
  padding: clamp(5rem, 14vh, 11rem) var(--edge);
  text-align: center;
  background: var(--paper);
}
.home-manifesto__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.home-manifesto__eyebrow {
  margin-bottom: var(--space-6);
}
.home-manifesto__h {
  margin: 0;
  font-weight: var(--fw-medium);
}
.home-manifesto__kicker {
  display: block;
  font-family: var(--script);
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 4.4vw, 2.9rem);
  line-height: 1;
  color: var(--gold-deep);
  margin-bottom: clamp(0.6rem, 2vw, 1.3rem);
}
.home-manifesto__display {
  display: block;
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  font-size: clamp(2.24rem, 7.98vw, 6.12rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
  font-feature-settings: "liga", "dlig";
}
/* Each word is its own reveal target — the line "composes in" word by word. */
.home-manifesto__display .word {
  display: inline-block;
}
.home-manifesto__note {
  margin: clamp(2rem, 5vw, 3.25rem) auto 0;
  max-width: 56ch;
  font-family: var(--serif);
  font-weight: var(--fw-regular);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.home-manifesto__note p {
  margin: 0;
}
.home-manifesto__sig {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.home-manifesto__signame {
  font-family: var(--script);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1;
  color: var(--ink);
}
.home-manifesto__sigrole {
  font-family: var(--sans);
  font-size: var(--fs-100);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Chapter 3 — Services as full-bleed editorial scenes
   ───────────────────────────────────────────────────────────────────────────── */
.home-chapters {
  display: block;
}

.chapter {
  position: relative;
  min-height: 86vh;
  min-height: 86svh;
  display: flex;
  align-items: flex-end;
  overflow: clip; /* contain parallax + oversized name; no horizontal scroll */
  isolation: isolate;
}

/* Full-bleed image scene ---------------------------------------------------- */
.chapter--img {
  background: var(--ocean-deep);
}
.chapter__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.chapter__img {
  position: absolute;
  left: 0;
  top: -14%;
  width: 100%;
  height: 128%; /* overhang gives the parallax translate room (no edge gap) */
  object-fit: cover;
  /* A touch brighter than the shared grade — the photography is the hero here and
     should breathe; the scrim (below) carries type legibility, not darkness. */
  filter: grayscale(0.12) saturate(0.98) contrast(1.04) brightness(1.05) sepia(0.05);
  transform: translate3d(0, 0, 0);
}
/* Filmic grain over the imagery — turns any softness into intentional grade. */
.chapter__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
}
/* Directional scrim anchors the type and lifts contrast on the text side. */
.chapter__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      to top,
      rgba(6, 23, 28, 0.6) 0%,
      rgba(6, 23, 28, 0.1) 38%,
      rgba(6, 23, 28, 0) 66%
    ),
    linear-gradient(
      to right,
      rgba(6, 23, 28, 0.42) 0%,
      rgba(6, 23, 28, 0) 50%
    );
}
.chapter--right .chapter__scrim {
  background: linear-gradient(
      to top,
      rgba(6, 23, 28, 0.6) 0%,
      rgba(6, 23, 28, 0.1) 38%,
      rgba(6, 23, 28, 0) 66%
    ),
    linear-gradient(
      to left,
      rgba(6, 23, 28, 0.42) 0%,
      rgba(6, 23, 28, 0) 50%
    );
}

/* Content block — giant name overlapping the frame edge, alternating sides. */
.chapter__content {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(2.75rem, 7vw, 6rem) var(--edge);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  color: var(--paper);
}
.chapter--right .chapter__content {
  align-items: flex-end;
  text-align: right;
}
.chapter__index {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--sans);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3em;
  color: var(--gold-light);
  margin-bottom: var(--space-5);
}
.chapter__index::after {
  content: "";
  width: clamp(28px, 6vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold-light), transparent);
}
.chapter--right .chapter__index {
  flex-direction: row-reverse;
}
.chapter--right .chapter__index::after {
  background: linear-gradient(270deg, var(--gold-light), transparent);
}
.chapter__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  font-size: clamp(2.0rem, 6.08vw, 4.32rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--paper);
  text-wrap: balance;
  /* the name reads as though it sits over the very edge of the frame */
  margin-left: -0.03em;
  text-shadow: 0 2px 40px rgba(6, 23, 28, 0.45);
}
.chapter--right .chapter__name {
  margin-left: 0;
  margin-right: -0.03em;
}
.chapter__whisper {
  margin: clamp(0.9rem, 2vw, 1.4rem) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(1.15rem, 2.3vw, 1.75rem);
  line-height: 1.35;
  color: rgba(250, 246, 238, 0.9);
  max-width: 26ch;
}
.chapter--right .chapter__whisper {
  margin-left: auto;
}
.chapter__explore {
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper);
}
.chapter__explore-label {
  transition: color var(--dur) var(--ease);
}
.chapter__explore-line {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold-light);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chapter--right .chapter__explore {
  align-items: flex-end;
}
.chapter--right .chapter__explore-line {
  transform-origin: right center;
}
@media (hover: hover) {
  .chapter__explore:hover .chapter__explore-label {
    color: var(--gold-light);
  }
  .chapter__explore:hover .chapter__explore-line {
    transform: scaleX(1.6);
  }
  /* a whisper of colour returns to the imagery as the scene is engaged */
  .chapter--img:hover .chapter__img {
    filter: var(--img-grade-hover);
  }
}
.chapter__img {
  transition: filter var(--dur-slow) var(--ease);
}
.chapter__explore:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 6px;
}

/* Typographic scene (Bridal) — cream palette-cleanser that breaks the cadence. */
.chapter--type {
  background: var(--sand);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.chapter--type::before {
  /* oversized ghost-script watermark of the category, barely there */
  content: "Bridal";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--script);
  font-size: clamp(9rem, 40vw, 28rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.chapter--type .chapter__content {
  z-index: 1;
  align-items: center;
  text-align: center;
  color: var(--ink);
}
.chapter--type .chapter__index {
  color: var(--gold-deep);
  flex-direction: row;
}
.chapter--type .chapter__index::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}
.chapter--type .chapter__name {
  color: var(--ink);
  margin: 0;
  text-shadow: none;
  font-style: italic;
}
.chapter--type .chapter__whisper {
  color: var(--ink-soft);
  margin-left: auto;
  margin-right: auto;
  font-style: normal;
}
.chapter--type .chapter__explore {
  color: var(--gold-deep);
  align-items: center;
}
.chapter--type .chapter__explore-line {
  background: var(--gold);
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Chapter 4 — Experience: dark, viewport-tall pull-quote band
   ───────────────────────────────────────────────────────────────────────────── */
.home-exp {
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  display: grid;
  place-items: center;
  padding: clamp(5rem, 12vw, 10rem) var(--edge);
  background: var(--ocean-deep);
  color: var(--sand);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.home-exp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.home-exp::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -35%;
  width: min(130%, 1100px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(180, 145, 76, 0.24), transparent 62%);
  z-index: -1;
  pointer-events: none;
}
.home-exp__inner {
  max-width: 900px;
  margin: 0 auto;
}
.home-exp__h {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: clamp(1.92rem, 4.86vw, 3.42rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--paper);
  text-wrap: balance;
}
.home-exp__body {
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  max-width: 620px;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: rgba(250, 246, 238, 0.82);
}
.home-exp__body p {
  margin: 0;
}
.home-exp__cta {
  margin-top: clamp(2rem, 5vw, 3.25rem);
}

/* Promo strip mount — must occupy zero space while hidden (Task 15 hydrates it). */
.home [data-promo-strip][hidden] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Chapter 6 — Visit: full-viewport typographic close
   ───────────────────────────────────────────────────────────────────────────── */
.home-visit {
  min-height: 90vh;
  min-height: 90svh;
  display: grid;
  place-items: center;
  padding: clamp(5rem, 11vw, 9rem) var(--edge);
  background: var(--paper);
}
.home-visit__grid {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
.home-visit__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  font-size: clamp(1.92rem, 4.56vw, 3.06rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.home-visit__lead {
  margin: var(--space-5) 0 var(--space-7);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 40ch;
}
.home-visit__nap {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.home-visit__addr {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 20ch;
}
.home-visit__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.home-visit__link {
  font-family: var(--sans);
  font-size: var(--fs-300);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  width: max-content;
  transition: color var(--dur-fast) var(--ease);
}
.home-visit__link:hover {
  color: var(--gold-deep);
}

/* Hours — an elegant dotted-leader column under a single gold hairline. */
.home-visit__hours {
  padding-top: var(--space-5);
  border-top: 2px solid var(--gold);
}
.home-visit__hours-h {
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--space-5);
}
.hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hours__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.hours__row:last-child {
  border-bottom: 0;
}
.hours__day {
  font-family: var(--serif);
  font-size: var(--fs-400);
  color: var(--ink);
  white-space: nowrap;
}
.hours__dots {
  flex: 1;
  height: 0;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-3px);
}
.hours__time {
  font-family: var(--sans);
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .chapter {
    align-items: center;
  }
  /* Alternating scene composition: text hugs one half, name overlaps the seam. */
  .chapter--left .chapter__content {
    align-items: flex-start;
    text-align: left;
    padding-right: 45%;
  }
  .chapter--right .chapter__content {
    align-items: flex-end;
    text-align: right;
    padding-left: 45%;
  }
  .chapter--type .chapter__content {
    align-items: center;
    text-align: center;
    padding-left: var(--edge);
    padding-right: var(--edge);
  }
  .home-visit__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(3rem, 8vw, 7rem);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reduced motion — content is always visible; no bob/glow/parallax motion
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .home [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .home-hero-wrap .scroll-cue,
  .home-hero-wrap .scroll-cue__chev {
    opacity: 1;
    animation: none;
  }
  .chapter__img {
    transform: none !important;
  }
}

/* No-JS / no-IntersectionObserver safety net: nothing stays invisible. */
.no-js .home [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Credentials band — quiet accreditation strip between manifesto and chapters. */
.home-creds {
  border-top: 1px solid color-mix(in srgb, var(--gold, #b4914c) 38%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold, #b4914c) 38%, transparent);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 6vw, 4rem);
  background: var(--paper, #fff);
}
.home-creds__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 72rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem clamp(1.6rem, 4vw, 3.4rem);
}
.home-creds__item {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink, #111) 74%, transparent);
  position: relative;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .home-creds__item { white-space: normal; text-align: center; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Restored live-site copy — manifesto flourish, New Guest Experience, extensions
   spotlight. Quiet, on-brand bands that carry entity-rich prose (AEO guard).
   ───────────────────────────────────────────────────────────────────────────── */
.home-manifesto__flourish {
  margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Extensions spotlight — slim centered editorial band. */
.home-ext {
  padding: clamp(3.5rem, 9vh, 6.5rem) var(--edge);
  background: var(--sand);
  text-align: center;
}
.home-ext__inner {
  max-width: 60rem;
  margin: 0 auto;
}
.home-ext__eyebrow {
  margin-bottom: var(--space-6);
}
.home-ext__body {
  font-family: var(--serif);
  font-weight: var(--fw-regular);
  font-size: clamp(1.12rem, 2.43vw, 1.66rem);
  line-height: 1.32;
  color: var(--ink);
  text-wrap: balance;
}
.home-ext__body p { margin: 0; }
.home-ext__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold, #b4914c) 60%, transparent);
  padding-bottom: 3px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.home-ext__link:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.home-ext__arrow { transition: transform 0.3s ease; }
.home-ext__link:hover .home-ext__arrow { transform: translateX(4px); }

/* New Guest Experience — numbered three-step sequence. */
.home-guest {
  padding: clamp(4rem, 11vh, 7.5rem) var(--edge);
  background: var(--paper);
  text-align: center;
}
.home-guest__inner { max-width: 72rem; margin: 0 auto; }
.home-guest__h {
  margin: var(--space-6) 0 clamp(2.2rem, 5vw, 3.4rem);
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  font-size: clamp(1.6rem, 4.18vw, 2.59rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.home-guest__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .home-guest__steps { grid-template-columns: repeat(3, 1fr); }
}
.home-guest__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}
.home-guest__num {
  font-family: var(--serif);
  font-size: clamp(1.76rem, 3.8vw, 2.16rem);
  line-height: 1;
  color: color-mix(in srgb, var(--gold, #b4914c) 78%, transparent);
}
.home-guest__title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  color: var(--ink);
}
.home-guest__sub {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.home-guest__cta { margin-top: clamp(2.4rem, 5vw, 3.4rem); }

@media (prefers-reduced-motion: reduce) {
  .home-ext [data-reveal],
  .home-guest [data-reveal] { opacity: 1; transform: none; }
}
.no-js .home-ext [data-reveal],
.no-js .home-guest [data-reveal] { opacity: 1; transform: none; }