/* =========================================================================
   Aangan — Kolhapur villa landing page
   Palette is sampled from the supplied renders so the UI and the imagery
   agree. Motion is deliberately slow; nothing should draw attention to
   itself except the floor plans.
   ========================================================================= */

:root {
  --terracotta: #B4633A;
  --clay:       #D9A277;
  --plaster:    #F4F1EC;
  --plaster-2:  #EAE5DC;
  --ink:        #23262B;
  --slate:      #3C4658;
  --sage:       #8A9480;
  --brass:      #A8813F;

  --muted:      #6E6A63;
  --hairline:   rgba(35, 38, 43, .14);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: 900ms;
  --med:  600ms;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 78rem;
}

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

html {
  /* Deliberately NOT `scroll-behavior: smooth`. The native smooth scroll is
     interrupted by layout shifts and by scroll anchoring, which made anchor
     links stop partway and never reach their target — fatal for a page whose
     whole job is the "Floor plans" CTA. main.js animates anchor jumps itself,
     recomputing the destination every frame so it always arrives. */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`: overflow-x:hidden forces overflow-y to `auto`, which
     turns body into a scroll container and can stop `position: sticky` from
     working on the hero. `clip` contains overflow without that side effect. */
  overflow-x: clip;
}

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

a { color: inherit; }

::selection { background: var(--clay); color: var(--ink); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--plaster);
  padding: .75rem 1.25rem; font-size: .875rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 46rem; }

.section { padding-block: clamp(5rem, 12vh, 9rem); position: relative; }
.section--flush { padding-block: 0 clamp(5rem, 12vh, 9rem); }
.section--quiet { background: var(--plaster); }
.section--dark { background: var(--slate); color: var(--plaster); }
.section--dark .eyebrow { color: var(--clay); }
.section--dark .body { color: rgba(244, 241, 236, .82); }

/* ---------- type ---------- */

.eyebrow {
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terracotta);
  margin: 0 0 1.25rem;
}

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.75rem, 7.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
}

.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 1.25rem;
}

.statement {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.35;
  font-weight: 300;
  margin: 0 0 2rem;
}
.statement em { font-style: italic; color: var(--terracotta); }

.lede {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  margin: 1rem 0 0;
  opacity: .9;
}

.body { color: var(--muted); margin: 0 0 1.25rem; max-width: 42rem; }

.link {
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(180, 99, 58, .35);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: border-color var(--med) var(--ease), color var(--med) var(--ease);
}
.link:hover { border-color: var(--terracotta); }
.link--light { color: var(--clay); border-bottom-color: rgba(217, 162, 119, .4); }
.link--light:hover { border-color: var(--clay); }

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.wordmark--sm { font-size: 1.1rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--plaster);
  background: var(--terracotta);
  border: 1px solid var(--terracotta);
  padding: 1rem 1.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--med) var(--ease), color var(--med) var(--ease),
              transform var(--med) var(--ease);
}
.btn {
  position: relative;
  isolation: isolate;
  /* Magnetism (--tx/--ty, set by main.js) and the hover lift compose here
     instead of overwriting one another. */
  transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) + var(--lift, 0px)), 0);
}
.btn:hover { background: #9C5330; border-color: #9C5330; --lift: -2px; }

/* A coal brightening wherever the cursor rests on it. */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(140px circle at var(--bx, 50%) var(--by, 50%),
              rgba(255, 214, 170, .40), transparent 65%);
  opacity: 0;
  transition: opacity 450ms var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { opacity: 1; }
.btn--sm { padding: .6rem 1.15rem; font-size: .6875rem; }
.btn--ghost {
  background: transparent; color: var(--clay); border-color: rgba(217, 162, 119, .45);
}
.btn--ghost:hover { background: rgba(217, 162, 119, .12); border-color: var(--clay); color: var(--clay); }

/* ---------- topbar ---------- */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: .85rem var(--gut);
  background: rgba(244, 241, 236, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform var(--slow) var(--ease), opacity var(--slow) var(--ease);
}
.topbar.is-visible { transform: none; opacity: 1; }

.topbar__mark { display: flex; align-items: baseline; gap: .7rem; text-decoration: none; }
.topbar__place {
  font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.topbar__nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem); }
.topbar__nav a {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--muted);
  transition: color var(--med) var(--ease);
}
.topbar__nav a:hover { color: var(--ink); }
.topbar__nav .btn { color: var(--plaster); }

@media (max-width: 46rem) {
  .topbar__nav a:not(.btn) { display: none; }
}

/* On the narrowest phones the wordmark and the CTA together are wider than
   the bar. The button must never be the thing that gets cut, so the mark
   gives up the locality line and some tracking instead. */
@media (max-width: 26rem) {
  .topbar { gap: .75rem; }
  .topbar__place { display: none; }
  .wordmark { font-size: 1.15rem; letter-spacing: .2em; }
  .topbar__nav .btn--sm { padding: .55rem .85rem; letter-spacing: .07em; }
}

/* =========================================================================
   1. HERO — sticky stage, scroll drives the video's currentTime
   ========================================================================= */

.hero { position: relative; }

/* Tall track gives the sticky stage something to scrub against. 24 seconds of
   film across roughly four screens of scrolling. */
.hero__track { height: 500vh; }

.hero__stage {
  position: sticky; top: 0;
  /* Must be `dvh`, not `svh`. `svh` is the SMALLEST viewport height — with the
     browser toolbar showing — so the moment the toolbar retracts on scroll the
     sticky stage is shorter than the screen and the next section slides into
     view beneath it. `dvh` tracks the live viewport, so the hero always fills
     it. `vh` first as the fallback for browsers without the newer units. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--ink);
}

.hero__media { position: absolute; inset: 0; }
.hero__media > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Still fallback: the day frame fades out to reveal the dusk frame beneath,
   driven by --hero-progress from main.js. */
.hero__still--dusk { z-index: 1; }
.hero__still--day  { z-index: 2; opacity: calc(1 - var(--hero-progress, 0)); }

/* When the video is running, the stills step aside entirely. */
.hero.has-video .hero__still { opacity: 0; }
.hero__video { z-index: 3; }

.hero__scrim {
  position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(to top, rgba(20, 22, 26, .82) 0%, rgba(20, 22, 26, .35) 38%, rgba(20, 22, 26, 0) 68%),
    linear-gradient(to right, rgba(20, 22, 26, .5) 0%, rgba(20, 22, 26, 0) 55%);
}

.hero__copy {
  position: relative; z-index: 5;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gut) clamp(4rem, 12vh, 7rem);
  color: var(--plaster);
}
/* The project name sits above the locality as a title card. It is the one
   place the mark is set large, so it carries wider tracking than the topbar
   version and steps back to a hairline weight against the display headline. */
.hero__wordmark {
  color: var(--plaster);
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  letter-spacing: .36em;
  margin: 0 0 .95rem;
  text-shadow: 0 1px 20px rgba(20, 22, 26, .45);
}
.hero__eyebrow { color: var(--clay); }

/* The three beats occupy the same space and cross-fade as you scroll. */
.hero__beats { position: relative; min-height: clamp(11rem, 24vh, 16rem); }
/* The beats share one box, so a symmetric cross-fade would print two
   headlines on top of each other. The outgoing line fades out first and the
   incoming one waits for it, giving a clean hand-off instead of a collision. */
.hero__beat {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
  pointer-events: none;
}
.hero__beat.is-active {
  opacity: 1;
  transform: none;
  transition-duration: 520ms;
  transition-delay: 360ms;
}
.hero__beat .lede { color: rgba(244, 241, 236, .9); }

.hero__cta {
  margin-top: .5rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  pointer-events: none;
}
.hero.is-late .hero__cta { opacity: 1; transform: none; pointer-events: auto; }

.hero__hint {
  position: absolute; z-index: 5; right: var(--gut); bottom: clamp(4rem, 12vh, 7rem);
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  color: rgba(244, 241, 236, .6);
  transition: opacity var(--slow) var(--ease);
}
.hero.is-late .hero__hint { opacity: 0; }
.hero__hint-line {
  width: 1px; height: 3.5rem;
  background: linear-gradient(to bottom, transparent, rgba(244, 241, 236, .7));
}
.hero__hint-text {
  font-size: .625rem; letter-spacing: .22em; text-transform: uppercase;
  writing-mode: vertical-rl;
}

@media (max-width: 46rem) {
  .hero__track { height: 380vh; }
  .hero__hint { display: none; }
}

/* =========================================================================
   2-3. Idea / arrival
   ========================================================================= */

.fullbleed { margin: 0; position: relative; }
.fullbleed img { width: 100%; height: clamp(24rem, 78vh, 44rem); object-fit: cover; }
.fullbleed__cap {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2rem, 5vh, 3.5rem) var(--gut) 0;
}
.fullbleed__cap .h2 { margin-bottom: 1rem; }

.facts { margin-top: clamp(3rem, 8vh, 5rem); }
.facts__grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin: 0;
}
.fact { background: var(--plaster); padding: 1.75rem 1.5rem; margin: 0; }
.fact dt {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .5rem;
}
.fact dd {
  margin: 0; font-family: var(--serif); font-size: 2rem; font-weight: 300; line-height: 1;
}

/* =========================================================================
   4. The stack teaser
   ========================================================================= */

.stack-section { background: var(--plaster-2); }

.stack {
  display: block; position: relative;
  margin-top: clamp(2rem, 5vh, 3rem);
  text-decoration: none; color: inherit;
  border-top: 1px solid var(--hairline);
}

/* The lift line, drawn continuously through all four levels. */
.stack__lift {
  position: absolute; left: clamp(3.5rem, 8vw, 6rem); top: 0; bottom: 4.5rem;
  width: 1px; background: var(--terracotta); opacity: .3;
}
.stack__lift::before, .stack__lift::after {
  content: ""; position: absolute; left: 50%; width: 7px; height: 7px;
  margin-left: -3px; border-radius: 50%; background: var(--terracotta);
}
.stack__lift::before { top: -3px; }
.stack__lift::after  { bottom: -3px; }

.stack__level {
  display: grid;
  grid-template-columns: clamp(3.5rem, 8vw, 6rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3.5vh, 2.25rem) 0;
  border-bottom: 1px solid var(--hairline);
  transition: background var(--med) var(--ease);
}
.stack:hover .stack__level { background: rgba(180, 99, 58, .03); }

.stack__num {
  font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 300; color: var(--terracotta); line-height: 1;
}
.stack__body { display: block; }
.stack__name {
  display: block; font-size: 1.0625rem; font-weight: 400; margin-bottom: .25rem;
}
.stack__desc { display: block; color: var(--muted); font-size: .9375rem; max-width: 44rem; }

.stack__cta {
  display: inline-flex; align-items: center; gap: .6em;
  margin-top: 1.75rem;
  font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terracotta);
}
.stack:hover .stack__cta span { transform: translateX(5px); }
.stack__cta span { display: inline-block; transition: transform var(--med) var(--ease); }

/* =========================================================================
   5. Floor plan explorer — the destination
   ========================================================================= */

.plans { background: var(--plaster); }
.plans__head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.plans__intro { max-width: 34rem; }

/* One real, verified figure — deliberately set large, because it is the
   number every buyer scrolls looking for. */
.plans__area {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  display: inline-block;
}
.plans__area dt {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .4rem;
}
.plans__area dd {
  margin: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1;
  color: var(--terracotta);
}
.plans__area dd span {
  font-family: var(--sans); font-size: .875rem; letter-spacing: .06em;
  color: var(--muted); margin-left: .35rem;
}

.fact__unit {
  font-family: var(--sans); font-size: .8125rem; letter-spacing: .05em;
  color: var(--muted); margin-left: .2rem;
}

.explorer {
  display: grid;
  grid-template-columns: minmax(12rem, 17rem) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* --- level rail --- */

.explorer__rail {
  position: sticky; top: 6rem;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hairline);
}

.level {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 1.15rem .5rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-left: 2px solid transparent;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--med) var(--ease), border-color var(--med) var(--ease),
              padding-left var(--med) var(--ease), background var(--med) var(--ease);
}
.level:hover { color: var(--ink); background: rgba(180, 99, 58, .04); }
/* The active bar is one sliding marker (see .explorer__marker), not a border
   that blinks from item to item. */
.level.is-active {
  color: var(--ink);
  padding-left: 1rem;
}

.level__num {
  font-family: var(--serif); font-size: 1.75rem; font-weight: 300; line-height: 1;
  color: var(--hairline);
  transition: color var(--med) var(--ease);
}
.level.is-active .level__num { color: var(--terracotta); }

.level__name { display: block; font-size: .9375rem; }
.level__short { display: none; }
.level__sub {
  display: block; font-size: .75rem; letter-spacing: .04em; color: var(--muted); opacity: .8;
}

/* --- stage --- */

.explorer__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--hairline);
}
.segmented__btn {
  background: none; border: 0; font: inherit;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  padding: .55rem 1.1rem;
  cursor: pointer;
  transition: background var(--med) var(--ease), color var(--med) var(--ease);
}
.segmented__btn + .segmented__btn { border-left: 1px solid var(--hairline); }
.segmented__btn.is-active { background: var(--ink); color: var(--plaster); }

.explorer__hint { margin: 0; font-size: .75rem; color: var(--muted); opacity: .75; }

.stage { position: relative; }
.stage__frame {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.stage__img {
  width: 100%; height: auto; display: block;
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.stage.is-swapping .stage__img { opacity: 0; transform: translateY(8px); }

.stage__spots { position: absolute; inset: 0; }
.stage.is-swapping .stage__spots { opacity: 0; }
.stage__spots { transition: opacity 250ms var(--ease); }

.spot {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.spot.is-in { opacity: 1; }

.spot__dot {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--terracotta);
  /* Tighter collar than before — the halo was reading heavier than the
     drawing it sits on. */
  box-shadow: 0 0 0 2.5px rgba(244, 241, 236, .85), 0 2px 6px rgba(35, 38, 43, .28);
  transition: transform var(--med) var(--ease), background var(--med) var(--ease);
}
.spot:hover .spot__dot, .spot:focus-visible .spot__dot { transform: scale(1.35); background: var(--ink); }

.spot__label {
  position: absolute; left: 50%; bottom: calc(100% + 11px);
  transform: translate(-50%, 5px);
  white-space: nowrap;
  background: var(--ink); color: var(--plaster);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .7rem;
  opacity: 0; pointer-events: none;
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.spot:hover .spot__label,
.spot:focus-visible .spot__label,
.spot.is-open .spot__label { opacity: 1; transform: translate(-50%, 0); }

/* Edge-aware labels (classes set in main.js from each marker's x/y).
   Without these a marker near a border pushes its label outside the frame —
   which is exactly what happened to the second-floor wardrobe on mobile. */
.spot--left  .spot__label { left: -6px; transform: translate(0, 5px); }
.spot--right .spot__label { left: auto; right: -6px; transform: translate(0, 5px); }

.spot--left:hover .spot__label,  .spot--left:focus-visible .spot__label,  .spot--left.is-open .spot__label,
.spot--right:hover .spot__label, .spot--right:focus-visible .spot__label, .spot--right.is-open .spot__label {
  transform: translate(0, 0);
}

/* Near the top there is no room above the dot, so the label drops below it. */
.spot--below .spot__label { bottom: auto; top: calc(100% + 11px); }

@media (max-width: 46rem) {
  .spot__label { font-size: .625rem; padding: .3rem .55rem; letter-spacing: .06em; }
}

/* --- level meta under the stage --- */

.levelmeta {
  margin-top: 1.5rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2rem;
  align-items: start;
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
}
.levelmeta__desc { margin: 0; color: var(--muted); max-width: 40rem; }
.levelmeta__rooms {
  margin: .75rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
}
.levelmeta__rooms li {
  font-size: .75rem; letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--hairline); padding: .25rem .6rem;
}
.levelmeta__area { text-align: right; }
.levelmeta__area dt {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .35rem;
}
.levelmeta__area dd {
  margin: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 300; white-space: nowrap;
}

.plans__foot { margin-top: clamp(2.5rem, 6vh, 4rem); font-size: .875rem; color: var(--muted); }

.noscript-plans figure { margin: 2rem 0; }
.noscript-plans figcaption { font-size: .875rem; color: var(--muted); margin-top: .5rem; }

@media (max-width: 60rem) {
  .explorer { grid-template-columns: 1fr; }
  .explorer__rail {
    /* relative (not static) so the sliding marker can position against it;
       top:auto cancels the desktop sticky offset. */
    position: relative;
    top: auto;
    flex-direction: row;
    overflow-x: auto;
    border-top: 0;
    border-bottom: 1px solid var(--hairline);
    -webkit-overflow-scrolling: touch;
  }
  /* All four levels must be visible at once — a rail that needs scrolling
     hides the fact that there are four floors to look at. */
  .level {
    grid-template-columns: 1fr;
    gap: .1rem;
    flex: 1 1 0;
    min-width: 0;
    border-bottom: 0;
    border-left: 0;
    border-top: 2px solid transparent;
    padding: .8rem .4rem;
    text-align: center;
  }
  .level.is-active { padding-left: .4rem; }
  .level__num { font-size: 1.1rem; }
  .level__full { display: none; }
  .level__short { display: inline; }
  .level__sub { display: none; }
  .levelmeta { grid-template-columns: 1fr; }
  .levelmeta__area { text-align: left; }
}

/* =========================================================================
   6-7. Commons / craft
   ========================================================================= */

.commons__grid, .craft__grid {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: clamp(2rem, 5vh, 3rem);
}
/* The pool aerial is the best image of the three — give it the full width as
   a banner, then the other two sit side by side beneath it. */
.commons__grid { grid-template-columns: repeat(2, 1fr); }

.card { margin: 0; }
.card img { width: 100%; height: 17rem; object-fit: cover; }
.card--tall { grid-column: 1 / -1; }
.card--tall img { height: clamp(20rem, 52vh, 30rem); }
.card figcaption { margin-top: .9rem; font-size: .875rem; color: var(--muted); }
.card__name { display: block; color: var(--ink); font-size: .9375rem; margin-bottom: .15rem; }

.craft__img { overflow: hidden; height: clamp(18rem, 40vh, 26rem); }
.craft__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
/* Frame each render on the material it is captioned with. The scale stays
   near 1 on purpose: these sources are 1400-1600px, and pushing them to 1.9x
   to fake a macro shot only produces a soft, obviously upscaled image. */
.craft__img--jaali  img { object-position: 58% 16%; transform: scale(1.22); }
.craft__img--timber img { object-position: 48% 6%;  transform: scale(1.22); }
.craft__img--clad   img { object-position: 44% 58%; transform: scale(1.22); }
.craft__item:hover .craft__img img { transform: scale(1.3); }
.craft__item { margin: 0; }
.craft__item figcaption { margin-top: .9rem; font-size: .875rem; color: var(--muted); }

@media (max-width: 46rem) {
  .card--tall { grid-column: span 1; }
  .card--tall img { height: 17rem; }
}

/* =========================================================================
   9. Enquire + footer
   ========================================================================= */

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

.enquire__meta { margin: 2rem 0; display: grid; gap: .85rem; }
.enquire__meta div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.enquire__meta dt {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay);
}
.enquire__meta dd { margin: 0; color: rgba(244, 241, 236, .9); font-size: .9375rem; }
.enquire__meta a { text-decoration: none; border-bottom: 1px solid rgba(217, 162, 119, .4); }

.form { display: grid; gap: 1.35rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 241, 236, .75);
}
.field .opt { text-transform: none; letter-spacing: 0; opacity: .6; }
.field input, .field textarea {
  font: inherit; font-size: 1rem;
  color: var(--plaster);
  background: rgba(244, 241, 236, .06);
  border: 1px solid rgba(244, 241, 236, .2);
  padding: .85rem 1rem;
  width: 100%;
  transition: border-color var(--med) var(--ease), background var(--med) var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--clay); background: rgba(244, 241, 236, .1);
}
.field textarea { resize: vertical; }
.field--invalid input, .field--invalid textarea { border-color: #E08B6A; }
.field__err { margin: 0; font-size: .8125rem; color: #E9A487; min-height: 0; }

.form .btn { justify-self: start; }
.form__status { margin: 0; font-size: .875rem; color: var(--clay); }

.footer { background: var(--ink); color: rgba(244, 241, 236, .55); padding-block: 3.5rem; }
.footer__inner { display: grid; gap: 1.25rem; }
.footer .wordmark { color: var(--plaster); }
.footer__legal { margin: 0; font-size: .8125rem; line-height: 1.7; max-width: 46rem; }

@media (max-width: 52rem) {
  .enquire__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Reveal on scroll
   ========================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================================
   Location map
   ========================================================================= */

.map-section { background: var(--plaster-2); }
.map__intro { max-width: 36rem; }

/* Map and panel side by side, matching the printed artwork. The whole section
   is sized to sit inside one screen so it reads as a single composition. */
.map-section { padding-block: clamp(1.5rem, 3.2vh, 3.5rem); }
/* Wider than the rest of the page: the panel sets the height, so giving the
   map more width lets it grow to match instead of sitting short beside it. */
.map-section > .wrap { max-width: 88rem; }

.map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

/* The key to fitting one screen: cap the map's WIDTH by the space available
   vertically. The image keeps its 1.3751 aspect, so height = width / 1.3751 —
   capping width at (available height x aspect) guarantees the height never
   exceeds it, without letterboxing that would misalign the route overlay. */
.map__stage { width: 100%; max-width: calc(72vh * 1.3514); margin-inline: auto; }

.map__stage { position: relative; }
.map__img { width: 100%; height: auto; display: block; }

/* Everything the map draws sits in one overlay that scales with the image. */
.map__routes, .map__pins { position: absolute; inset: 0; }
.map__routes { width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map__pins { pointer-events: none; }
.map__pins > * { pointer-events: auto; }

.map__routes, .map__pins { z-index: 2; }

.route {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  /* Set from the path's own length once it is in the DOM; 2000 is a safe
     upper bound for these routes so the dash covers the whole line. */
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: opacity 260ms var(--ease);
}
.route.is-on {
  opacity: 1;
  animation: route-draw 900ms var(--ease) forwards;
}
@keyframes route-draw { to { stroke-dashoffset: 0; } }

.route-origin {
  fill: none;
  stroke: var(--route-c, var(--terracotta));
  stroke-width: 2;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.map__stage.is-tracing .route-origin { opacity: .9; animation: origin-pulse 2.4s var(--ease) infinite; }
@keyframes origin-pulse {
  0%, 100% { r: 9; opacity: .9; }
  50%      { r: 15; opacity: .35; }
}

/* Hit areas sit over the icons already printed on the map. */
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%;
}
.map-pin__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--c);
  opacity: 0; transform: scale(.6);
  transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}
.map-pin:hover .map-pin__ring,
.map-pin:focus-visible .map-pin__ring,
.map-pin.is-on .map-pin__ring { opacity: 1; transform: scale(1); }

/* --- legend --- */

/* --- right-hand panel --- */

.map__panel { align-self: stretch; }
.map__panel .eyebrow { margin-bottom: .7rem; }
.map__title { font-size: clamp(1.35rem, 1.9vw, 1.8rem); margin-bottom: .4rem; line-height: 1.15; }
.map__hint {
  margin: 0 0 clamp(.5rem, 1.1vh, .8rem); font-size: .75rem; color: var(--muted); line-height: 1.45;
  padding-bottom: clamp(.45rem, 1vh, .7rem); border-bottom: 1px solid var(--hairline);
}

/* Type is deliberately small here: the whole list has to sit beside the map
   inside one screen, and a scrolling panel would split the composition. */
.map__legend { display: grid; gap: clamp(.3rem, .8vh, .6rem); align-content: start; }
.legend__group { }
.legend__cat {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--sans);
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--terracotta);
  margin: 0 0 clamp(.15rem, .4vh, .3rem);
}
.legend__cat::before {
  content: ""; width: 12px; height: 2px; background: var(--c); flex: none;
}
.legend__list { list-style: none; margin: 0; padding: 0; }

.legend__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; width: 100%;
  background: none; border: 0; font: inherit; text-align: left;
  padding: clamp(.02rem, .28vh, .13rem) .4rem clamp(.02rem, .28vh, .13rem) .5rem;
  border-left: 2px solid transparent;
  color: var(--ink); cursor: pointer;
  transition: background 350ms var(--ease), border-color 350ms var(--ease),
              padding-left 350ms var(--ease);
}
.legend__row:hover, .legend__row.is-on {
  background: rgba(255, 255, 255, .65);
  border-left-color: var(--c);
  padding-left: .75rem;
}
.legend__name { font-size: clamp(.7rem, 1.55vh, .78rem); line-height: 1.3; }
.legend__mins {
  font-size: clamp(.62rem, 1.35vh, .6875rem); color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- map key, reinstating what the cropped panel used to carry --- */

.map__key {
  list-style: none; margin: clamp(.5rem, 1.2vh, .8rem) 0 0; padding: clamp(.45rem, 1vh, .7rem) 0 0;
  border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .75rem;
  font-size: .625rem; letter-spacing: .04em; color: var(--muted);
}
.map__key li { display: flex; align-items: center; gap: .45rem; }
.key__swatch { width: 16px; height: 3px; flex: none; border-radius: 2px; }
.key__swatch--highway { background: #C4643C; height: 4px; }
.key__swatch--road    { background: #D8A98C; }
.key__swatch--other   { background: #E3C6AF; }
.key__swatch--rail    { background: repeating-linear-gradient(90deg, #9A9086 0 3px, transparent 3px 5px); }
.key__swatch--water   { background: #AFCBDD; height: 8px; border-radius: 1px; }

.map__foot { margin-top: clamp(.6rem, 1.4vh, 1.5rem); font-size: .78rem; color: var(--muted); }

@media (max-width: 62rem) {
  /* Too narrow to sit side by side and stay readable: stack, and let the map
     use its natural height again. */
  .map { grid-template-columns: 1fr; }
  .map__stage { max-width: 100%; }
  .map__panel { display: flex; flex-direction: column; }
  .map__title { order: -2; } .map__panel .eyebrow { order: -3; }
  .map__hint { order: -1; }
  .map__legend { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem; }
  .legend__name { font-size: .875rem; }
  .legend__mins { font-size: .75rem; }
  .legend__row { padding-block: .35rem; }
  .map__key { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }

  /* Bigger touch targets, and the ring is the only affordance on a phone. */
  .map-pin { width: 40px; height: 40px; }
  .route { stroke-width: 4.5; }
}

/* =========================================================================
   The people
   ========================================================================= */

.people { background: var(--plaster-2); }
.people__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 5vh, 3rem);
  align-items: start;
}
.note {
  margin: 0; padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--terracotta);
}
.note__text {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.45; font-weight: 300; margin: 0 0 1.5rem;
}
.note__text em { font-style: italic; color: var(--terracotta); }
.note__by { display: grid; gap: .15rem; }
.note__name { font-size: .9375rem; }
.note__role {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.people__sub {
  font-family: var(--sans); font-size: .6875rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 500; color: var(--muted);
  margin: 0 0 1rem;
}
.people__meta { margin: 1.5rem 0; display: grid; gap: .8rem; }
.people__meta div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
.people__meta dt {
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.people__meta dd { margin: 0; font-size: .9375rem; }
.people__meta a { text-decoration: none; border-bottom: 1px solid var(--hairline); }

@media (max-width: 52rem) { .people__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Assistant
   ========================================================================= */

.assist-launch {
  position: fixed; z-index: 115; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.25rem;
  background: var(--ink); color: var(--plaster);
  border: 1px solid var(--ink); border-radius: 999px;
  font: inherit; font-size: .8125rem; letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(35, 38, 43, .6);
  transition: background var(--med) var(--ease), transform var(--med) var(--ease);
}
.assist-launch:hover { background: var(--terracotta); border-color: var(--terracotta); transform: translateY(-2px); }
.assist-launch__icon { display: block; width: 18px; height: 18px; }
.assist-launch__icon svg { width: 100%; height: 100%; display: block; }
.assist-launch.is-open { opacity: 0; pointer-events: none; }

.assist {
  position: fixed; z-index: 116;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 2rem));
  display: flex; flex-direction: column;
  background: var(--plaster);
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 70px -20px rgba(35, 38, 43, .5);
}
/* `display: flex` above beats the browser default for [hidden], so without
   this the panel is permanently open. */
.assist[hidden] { display: none; }
.assist__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem; background: var(--ink); color: var(--plaster);
}
.assist__title { margin: 0; font-size: .9375rem; }
/* Never let this line be dropped — it is what keeps the widget honest. */
.assist__sub {
  margin: .1rem 0 0; font-size: .6875rem; letter-spacing: .08em;
  color: rgba(244, 241, 236, .65);
}
.assist__close {
  background: none; border: 0; color: inherit; font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: 0 .25rem;
}

.assist__log {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .75rem;
  font-size: .875rem; line-height: 1.6;
}
.assist__msg { max-width: 92%; }
.assist__msg p { margin: 0 0 .5rem; }
.assist__msg p:last-child { margin-bottom: 0; }
.assist__msg--bot {
  align-self: flex-start; background: #fff; border: 1px solid var(--hairline);
  padding: .7rem .85rem;
}
.assist__msg--user {
  align-self: flex-end; background: var(--terracotta); color: var(--plaster);
  padding: .55rem .85rem;
}
.assist__msg.is-typing { opacity: .5; letter-spacing: .2em; }
.assist__cta {
  display: inline-block; margin-top: .6rem;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta); text-decoration: none;
  border-bottom: 1px solid rgba(180, 99, 58, .4);
}

.assist__chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .75rem 1rem 1rem; border-top: 1px solid var(--hairline);
}
.assist__chip {
  background: none; border: 1px solid var(--hairline);
  font: inherit; font-size: .75rem; color: var(--ink);
  padding: .4rem .7rem; border-radius: 999px; cursor: pointer;
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease);
}
.assist__chip:hover { background: rgba(180, 99, 58, .08); border-color: var(--terracotta); }

@media (max-width: 46rem) {
  .assist-launch__label { display: none; }
  .assist-launch { padding: .9rem; }
  .assist { max-height: min(30rem, calc(100vh - 6rem)); }
}

/* =========================================================================
   MICRO-INTERACTIONS
   One idea applied consistently: lamplight. The hero's whole story is lamps
   coming on at dusk, so every hover, marker and accent behaves like warm
   light — it blooms, breathes, and falls through a screen. Nothing bounces
   or springs; the page should feel lit, not animated.
   Every pointer-driven effect is gated to fine pointers in main.js, and the
   reduced-motion block below switches all of it off.
   ========================================================================= */

/* ---- scroll progress: one brass hairline across the very top ---- */

.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: 2px; pointer-events: none;
}
.progress__bar {
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--terracotta), var(--brass) 60%, var(--clay));
  opacity: .85;
}

/* ---- paper grain, so the flat plaster has some tooth ---- */

body::after {
  content: ""; position: fixed; inset: 0; z-index: 130;
  pointer-events: none;
  opacity: .035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- lamplight through a jaali screen ----
   On the dark surfaces a warm light follows the cursor, and the screen
   pattern shows only where that light falls — which is exactly what the
   jaali on the building does after dark. */

.ember-surface {
  position: relative; overflow: hidden;
  --halo: 200px;              /* glow diameter — the one number to tune */
  --halo-screen: 120px;       /* the jaali pool, kept tighter than the glow */
}
.ember-surface > * { position: relative; z-index: 2; }

.ember-surface::before,
.ember-surface::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; opacity: 0; z-index: 1;
  transition: opacity 700ms var(--ease);
}

/* the light itself */
.ember-surface::after {
  background: radial-gradient(var(--halo) circle at var(--mx, 50%) var(--my, 50%),
              rgba(217, 162, 119, .30), rgba(217, 162, 119, .10) 45%, transparent 74%);
}

/* the screen it falls through */
.ember-surface::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='none' stroke='%23D9A277' stroke-width='1.1'%3E%3Cpath d='M23 3 L43 23 L23 43 L3 23 Z'/%3E%3Cpath d='M23 13 L33 23 L23 33 L13 23 Z'/%3E%3Cpath d='M0 0 L7 7 M46 0 L39 7 M0 46 L7 39 M46 46 L39 39'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 46px 46px;
  /* A tighter pool than the light itself, so the screen reads as a hint
     inside the glow rather than as a graphic laid over the section. */
  -webkit-mask-image: radial-gradient(var(--halo-screen) circle at var(--mx, 50%) var(--my, 50%), #000 8%, transparent 68%);
          mask-image: radial-gradient(var(--halo-screen) circle at var(--mx, 50%) var(--my, 50%), #000 8%, transparent 68%);
}
.ember-surface.is-lit::after { opacity: 1; }
.ember-surface.is-lit::before { opacity: .55; }

/* ---- the ember button: a coal that breathes ---- */

@keyframes ember-breathe {
  0%, 100% { box-shadow: 0 6px 22px -8px rgba(180, 99, 58, .45); }
  50%      { box-shadow: 0 10px 34px -8px rgba(180, 99, 58, .85); }
}
.btn--ember { animation: ember-breathe 5.5s var(--ease) infinite; }
.btn--ember:hover {
  animation-play-state: paused;
  box-shadow: 0 12px 38px -8px rgba(180, 99, 58, .9);
}

/* ---- eyebrow: a brass rule drawn out beside the label ---- */

.eyebrow { display: flex; align-items: center; gap: .9rem; }
.eyebrow::after {
  content: ""; flex: 0 0 3.5rem; height: 1px;
  background: currentColor; opacity: .45;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1100ms var(--ease) 220ms;
}
/* Two selectors on purpose: some eyebrows sit inside a .reveal, and some
   carry .reveal themselves. */
.reveal.is-in .eyebrow::after,
.eyebrow.reveal.is-in::after { transform: scaleX(1); }
.hero__eyebrow::after { transform: scaleX(1); }

/* ---- headings rise word by word out of a mask ---- */

.w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  /* room for descenders, which the mask would otherwise clip */
  padding-bottom: .12em; margin-bottom: -.12em;
}
.w__i {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease);
  transition-delay: calc(var(--i, 0) * 42ms);
}
.reveal.is-in .w__i { transform: none; }

/* ---- floor plan markers: embers, each breathing on its own clock ---- */

.spot__dot { position: relative; }
.spot__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: ember-ring var(--dur, 3.8s) var(--ease) var(--delay, 0s) infinite;
}
@keyframes ember-ring {
  0%        { box-shadow: 0 0 0 0 rgba(180, 99, 58, .45); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(180, 99, 58, 0); }
}
.spot:hover .spot__dot::after,
.spot.is-open .spot__dot::after { animation-play-state: paused; }

/* ---- the level rail's sliding brass marker ---- */

/* No `position` is set here on purpose. The rail is already `sticky` on
   desktop and `relative` in the narrow layout, both of which establish the
   containing block this marker needs — and re-declaring `relative` here would
   re-activate the desktop rule's `top: 6rem` and shove the rail down. */
.explorer__marker {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 2px; height: var(--marker-h, 0px);
  background: var(--terracotta);
  box-shadow: 0 0 10px -1px rgba(180, 99, 58, .8);
  transform: translateY(var(--marker-y, 0px));
  transition: transform 620ms var(--ease), height 620ms var(--ease);
}
.explorer__rail.is-horizontal .explorer__marker {
  width: var(--marker-w, 0px); height: 2px;
  transform: translateX(var(--marker-x, 0px));
  transition: transform 620ms var(--ease), width 620ms var(--ease);
}

/* ---- small courtesies ---- */

/* The image creeps in slowly on hover; the card crops it. */
.card { overflow: hidden; }
.card img { transition: transform 1.6s var(--ease); }
.card:hover img { transform: scale(1.04); }
.fact { transition: background 500ms var(--ease); }
.fact:hover { background: rgba(180, 99, 58, .05); }

/* =========================================================================
   Reduced motion — strip every transform and transition.
   main.js separately refuses to load the video in this mode.
   ========================================================================= */

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

  /* With no scroll to reveal them, all three beats are shown at once. The
     first stays the headline; the other two step down to a supporting size
     so the block reads as one statement rather than three competing ones. */
  .hero__beat { position: static; opacity: 1; transform: none; }
  .hero__beats { min-height: 0; display: grid; gap: 1.25rem; }
  .hero__beat:not(:first-child) .display { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
  .hero__beat:not(:first-child) .lede { font-size: 1rem; margin-top: .25rem; }
  .hero__cta { opacity: 1; transform: none; pointer-events: auto; }
  .hero__track { height: auto; }
  .hero__stage { position: static; height: auto; min-height: 100vh; }

  /* The copy is now full-height, so the bottom-weighted scrim no longer
     covers it. Use an even wash instead. */
  .hero__scrim { background: linear-gradient(to top, rgba(20, 22, 26, .88), rgba(20, 22, 26, .58)); }
  .hero__copy { padding-top: clamp(5rem, 14vh, 8rem); }
  .spot { opacity: 1; }
  .craft__img img { transform: none !important; }
  .craft__img { height: auto; }
  .craft__img img { height: auto; }

  /* Micro-interactions off. The words must be visible, not stuck under
     their mask, and nothing may pulse, breathe or follow the cursor. */
  .w { overflow: visible; }
  .w__i { transform: none !important; }
  .eyebrow::after { transform: scaleX(1) !important; }
  .btn--ember { animation: none; }
  .spot__dot::after { animation: none; content: none; }
  .ember-surface::before, .ember-surface::after { display: none; }
  body::after { display: none; }         /* grain is static, but keep it simple */
  .card:hover img { transform: none; }
  .progress__bar { transition: none; }
}