/* XHO Bacalar · page styles. The engine (scrollcraft.css) is the mechanism;
   everything here is this page's own markup. Two grounds, hard cuts:
   jungle (dark, default) and limestone (light, .g-lime). One accent hue,
   two lightnesses keyed to the ground. */

:root {
  --sc-canvas:      #0D1D18;
  --sc-surface:     #152a23;
  --sc-ink:         #EEF1EA;
  --sc-ink-soft:    #A9B9B0;
  --sc-accent:      #62D6CF;
  --sc-accent-ink:  #0B1A15;
  --sc-font-display: "Crimson Pro", "Minion Pro", Georgia, serif;
  --sc-font-text:    "Figtree", system-ui, sans-serif;
  --sc-shadow-color: 160 40% 4%;

  --brown: #5E4A34;
  --brown-ink: #F4EEE6;
  --lagoon: #3EC6C1;
  --bar-h: 64px;
}

.g-lime {
  --sc-canvas:     #F1F2EE;
  --sc-surface:    #E4E8E1;
  --sc-ink:        #10261F;
  --sc-ink-soft:   #4A6057;
  --sc-accent:     #0A7471;
  --sc-accent-ink: #F4F6F2;
  --sc-shadow-color: 150 18% 30%;
  --sc-edge: inset 0 1px 0 rgba(255,255,255,.7);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
.g-jungle { background: var(--sc-canvas); color: var(--sc-ink); }
.g-photo { background: #0D1D18; color: #EEF1EA; }

html { scroll-padding-top: var(--bar-h); }
body { font-feature-settings: "ss01" 0; }
img { height: auto; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .7rem 1rem; background: var(--sc-accent); color: var(--sc-accent-ink);
  border-radius: 999px; font-weight: 600; text-decoration: none;
  transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: translateY(5rem); }

/* ------------------------------------------------------------- type --- */
.t-h2 {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.45rem + 2.9vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
.t-h2 em, .t-h3 em { font-style: italic; }
.t-h3 {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.006em;
  margin: 0;
  text-wrap: balance;
}
.t-h4, .tag {
  font-family: var(--sc-font-text);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.tag { color: var(--sc-accent); }
.t-lede {
  font-size: clamp(1.06rem, 0.98rem + 0.38vw, 1.3rem);
  line-height: 1.5;
  max-width: 50ch;
  margin: 0;
  text-wrap: pretty;
}
.t-body {
  font-size: clamp(0.98rem, 0.95rem + 0.12vw, 1.06rem);
  line-height: 1.64;
  color: var(--sc-ink-soft);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}
.g-jungle .t-body, .g-photo .t-body { letter-spacing: 0.004em; }

/* Plan numbers, set exactly like the brown markers on the XHO masterplan. */
.cap__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.85em; height: 1.85em; padding: 0 .45em;
  margin-right: .6em; vertical-align: 0.12em;
  border-radius: 999px;
  background: var(--brown); color: var(--brown-ink);
  font-family: var(--sc-font-text); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- controls --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.8em 1.55em;
  border-radius: 999px; border: 0;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-text); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--sc-e1);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); box-shadow: var(--sc-e2); }
}
.btn--big { min-height: 56px; font-size: 1.05rem; padding-inline: 2em; }

/* --------------------------------------------------------------- bar --- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding-inline: var(--sc-gutter);
  color: #EEF1EA;
  transition: color 240ms var(--sc-ease-out);
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8,20,16,.62), rgba(8,20,16,0));
  transition: background-color 240ms var(--sc-ease-out), opacity 240ms var(--sc-ease-out);
}
.bar[data-ground="jungle"]::before { background: rgba(13,29,24,.94); box-shadow: 0 1px 0 rgba(238,241,234,.08); }
.bar[data-ground="lime"] { color: #10261F; }
.bar[data-ground="lime"]::before { background: rgba(241,242,238,.95); box-shadow: 0 1px 0 rgba(16,38,31,.1); }
.bar[data-ground="lime"] .btn--bar { background: #0A7471; color: #F4F6F2; }
.bar__mark { justify-self: start; display: inline-flex; padding: 6px 4px; color: inherit; }
.bar__xho { height: 30px; width: auto; color: inherit; }
.btn--bar { justify-self: end; min-height: 42px; padding: 0.55em 1.2em; font-size: 0.9rem; box-shadow: none; }

.bar__where { position: relative; justify-self: center; }
.where {
  display: inline-flex; align-items: center; gap: 0.7rem;
  min-height: 44px; padding: 4px 16px 4px 8px;
  background: transparent; color: inherit;
  border: 1px solid color-mix(in oklab, currentColor 26%, transparent);
  border-radius: 999px; cursor: pointer;
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .where:hover { border-color: color-mix(in oklab, currentColor 55%, transparent); }
}
.where__map { width: 68px; height: 36px; overflow: visible; }
.where__site { fill: color-mix(in oklab, currentColor 14%, transparent); stroke: currentColor; stroke-opacity: .6; stroke-width: .9; stroke-linejoin: round; }
.where__water { fill: var(--lagoon); opacity: .55; }
.where__dot { fill: #62D6CF; }
.bar[data-ground="lime"] .where__dot { fill: #0A7471; }
.where__ring { fill: none; stroke: #62D6CF; stroke-width: 1.2; opacity: .8; }
.bar[data-ground="lime"] .where__ring { stroke: #0A7471; }
.where__dot, .where__ring { transition: transform 700ms var(--sc-ease-out), opacity 300ms; }
.where__text { display: inline-flex; align-items: center; gap: .55rem; font-size: 0.86rem; font-weight: 500; white-space: nowrap; }
.where__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--brown); color: var(--brown-ink); font-size: 0.7rem; font-weight: 600;
}
.where__num:empty { display: none; }
.stops {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  min-width: 17rem; padding: .5rem;
  background: #F1F2EE; color: #10261F; border-radius: 14px;
  box-shadow: 0 2px 4px rgba(5,20,15,.18), 0 18px 40px -8px rgba(5,20,15,.38);
}
.stops ol { list-style: none; margin: 0; padding: 0; }
.stops a {
  display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem;
  border-radius: 10px; text-decoration: none; font-size: .95rem;
}
.stops a span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: var(--brown); color: var(--brown-ink); font-size: .68rem; font-weight: 600;
}
.stops a[aria-current="true"] { background: #E2E8E2; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .stops a:hover { background: #E7EBE6; } }

/* ------------------------------------------------- 1 · the water --- */
.hero__stage { background: #0D1D18; }
.hero__frame {
  --fw: max(100vw, calc(100svh * 1.7747));
  --fx: 0.5;
  position: absolute; top: 50%; left: 50%;
  width: var(--fw); aspect-ratio: 2560 / 1443;
  translate: calc(-50% - (var(--fx) - 0.5) * var(--fw)) -50%;
}
.hero__plane, .hero__plane img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block;
}
.hero__back {
  transform-origin: 52% 57%;
  transform: scale(calc(1.02 + var(--sc-p, 0) * 0.12));
  will-change: transform;
}
.hero__haze {
  position: absolute; inset: -6% -10% auto -10%; height: 42%;
  background: radial-gradient(42% 100% at 84% 0%, rgba(255,248,236,.42), rgba(255,248,236,0) 72%);
  opacity: calc(0.85 - var(--sc-p, 0) * 0.6);
  transform: translate3d(calc(var(--sc-p, 0) * -6%), 0, 0);
  pointer-events: none;
}
.hero__loop {
  position: absolute; left: 51.5%; top: 56.5%; width: 19.7%;
  translate: -50% -50%;
  color: #FFFFFF; overflow: visible;
  transform: scale(calc(1 + var(--sc-p, 0) * 0.17));
  filter: drop-shadow(0 6px 10px rgba(6,30,26,.22));
  will-change: transform;
}
.loop-trace {
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: loop-draw 1.9s 0.45s cubic-bezier(0.55, 0.05, 0.25, 1) forwards;
}
@keyframes loop-draw { to { stroke-dashoffset: 0; } }
.hero__near {
  transform-origin: 30% 100%;
  transform: translate3d(0, calc(var(--sc-p, 0) * 3%), 0) scale(calc(1 + var(--sc-p, 0) * 0.2));
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(88% 84% at 0% 10%, rgba(7,19,15,.88) 0%, rgba(7,19,15,.74) 40%, rgba(7,19,15,.38) 62%, rgba(7,19,15,0) 84%),
    radial-gradient(66% 62% at 0% 100%, rgba(7,19,15,.88) 0%, rgba(7,19,15,.62) 44%, rgba(7,19,15,0) 76%);
}
.hero__copy {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: clamp(5.5rem, 13.5vh, 9rem);
  max-width: 54rem; color: #F5F7F2;
}
.hero__title {
  width: fit-content;
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(2.7rem, 1.2rem + 4.3vw, 5.6rem);
  line-height: 0.98; letter-spacing: -0.012em;
  margin: 0; text-wrap: balance;
}
.hero__title em { font-style: italic; }
.hero__sub {
  margin: 1.3rem 0 1.9rem; max-width: 36ch;
  font-size: clamp(1.04rem, 0.97rem + 0.32vw, 1.24rem); line-height: 1.5;
  color: rgba(240,244,238,.92);
}
.hero__beat {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(3rem, 11vh, 7.5rem);
  max-width: 36rem; color: #F5F7F2;
}
.hero__beat-line {
  width: fit-content;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.8rem); line-height: 1; margin: 0;
}
.hero__beat-sub { margin: .9rem 0 0; max-width: 34ch; font-size: 1.05rem; line-height: 1.5; color: rgba(240,244,238,.92); }

/* ------------------------------------------- 2 · beneath the surface --- */
.lagoon__copy { max-width: 31rem; }
.lagoon__copy .t-h2 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.8rem); color: #F5F7F2; }
.lagoon__copy .t-body { color: rgba(238,242,236,.92); margin-top: 1rem; margin-left: auto; }
.lagoon__scrim { --sc-scrim-a: 90%; }

/* ---------------------------------------------------- 3 · the shore --- */
.shore__stage { display: flex; align-items: center; background: var(--sc-canvas); }
.rail { gap: clamp(1.25rem, 2.6vw, 2.75rem); padding: var(--bar-h) var(--sc-gutter) 0; align-items: center; }
.rail__lead { flex: 0 0 min(31rem, 82vw); padding-right: 1rem; }
.rail__lead .t-h2 { margin: .9rem 0 1.2rem; }
.rail__item { flex: 0 0 auto; width: 34vw; margin: 0; }
.rail__item--wide { width: 44vw; }
.rail__item--tall { width: 25vw; }
.rail__item--film { width: 40vw; }
.rail__item img, .rail__video {
  display: block; width: 100%; height: 56svh; object-fit: cover; max-width: none;
  background: var(--sc-surface);
}
.rail__item--tall img { height: 64svh; }
.rail__item figcaption { margin-top: .95rem; font-size: .93rem; line-height: 1.5; color: var(--sc-ink-soft); max-width: 40ch; }
.rail__item figcaption strong { color: var(--sc-ink); font-weight: 600; }
.rail__note { flex: 0 0 min(22rem, 78vw); padding-left: 1rem; }
.dash-list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.dash-list li { padding: .62rem 0; border-top: 1px solid var(--sc-hairline); font-size: .98rem; }


/* --------------------------------------------- 4 · above the trees --- */
.canopy { padding-top: calc(var(--sc-section) + var(--bar-h) * 0.5); }
.canopy__head {
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--sc-7); align-items: end;
  margin-bottom: var(--sc-8);
}
.plate__media { overflow: hidden; background: var(--sc-surface); }
.plate__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate--full .plate__media { aspect-ratio: 21 / 9; }
.plate--full .plate__media img { object-position: 50% 28%; }
.plate__cap { margin: 1rem 0 0; font-size: .96rem; line-height: 1.55; color: var(--sc-ink-soft); max-width: 62ch; }
.plate__cap strong { color: var(--sc-ink); font-weight: 600; }
.plates {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sc-6); margin-top: var(--sc-9);
}
.plate--a { grid-column: 1 / span 8; }
.plate--a .plate__media { aspect-ratio: 16 / 9.4; }
.plate--b { grid-column: 9 / span 4; margin-top: 12vw; }
.plate--b .plate__media { aspect-ratio: 4 / 5; }
.plate--b .plate__media img { object-position: 52% 50%; }
.plate--c { grid-column: 3 / span 8; margin-top: var(--sc-8); }
.plate--c .plate__media { aspect-ratio: 16 / 9; }
.canopy__hush {
  padding-block: var(--sc-10) 42vh; margin: 0;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.15;
  color: var(--sc-ink-soft); text-align: right;
}

/* ----------------------------------------- 5 · the whole plan (peak) --- */
.peak__stage { background: var(--sc-canvas); }
.plan-box { position: relative; aspect-ratio: 2800 / 1390; }
.plan-box__img, .plan-box__canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.peak__map {
  --top: calc(var(--bar-h) + 0.5rem);
  --room: calc(100svh - var(--bar-h) - 13.5rem);
  position: absolute; left: 50%; top: calc(var(--top) + var(--room) / 2);
  width: min(94vw, calc(var(--room) * 2.0144));
  translate: -50% -50%;
}
.peak__map .plan-box__img { opacity: calc(0.62 + var(--sc-p, 0) * 0.38); filter: saturate(calc(0.75 + var(--sc-p, 0) * 0.35)); }
.peak__copy {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter);
  bottom: clamp(1.25rem, 4.5vh, 2.75rem); height: 10.5rem;
}
.peak__line { position: absolute; inset: auto 0 0 0; }
.peak__kicker {
  margin: 0 0 .35rem; color: var(--sc-accent);
  font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
}
.peak__figs { display: flex; flex-wrap: wrap; gap: .3rem 3rem; align-items: baseline; margin: 0; }
.fig { display: inline-flex; align-items: baseline; gap: .7rem; font-size: 1.05rem; color: var(--sc-ink-soft); }
.fig__n {
  font-family: var(--sc-font-display); font-weight: 400; color: var(--sc-ink);
  font-size: clamp(3.2rem, 2rem + 4.4vw, 6.4rem); line-height: .9;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em;
}
.fig--soft .fig__n { color: var(--sc-accent); }
.peak__say {
  margin: 0; max-width: 34ch;
  font-family: var(--sc-font-display); font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.8rem); line-height: 1.12;
}

/* ------------------------------------------------ 6 · the villages --- */
.homes { padding-block: calc(var(--sc-section) + 1rem) var(--sc-section); }
.homes__intro { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sc-8); align-items: center; }
.homes__text .t-lede { margin-top: 1.3rem; }
.homes__village { margin: 0; }
.homes__village > .homes__village-in { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sc-surface); }
.homes__village-in img { position: absolute; inset: -60px 0; width: 100%; height: calc(100% + 120px); object-fit: cover; max-width: none; }
.homes__village figcaption, .house__media figcaption { margin-top: .7rem; font-size: .86rem; color: var(--sc-ink-soft); }
.houses { margin-top: var(--sc-10); }
.houses__tabs {
  display: flex; flex-wrap: wrap; gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin: var(--sc-5) 0 var(--sc-7); border-bottom: 1px solid var(--sc-hairline);
}
.houses__tabs [role="tab"] {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 1rem 0 1.05rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-family: var(--sc-font-display); font-size: clamp(1.4rem, 1.15rem + .9vw, 2rem); line-height: 1.05;
  color: var(--sc-ink-soft); text-align: left;
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.houses__tabs [role="tab"] span { display: block; margin-top: .3rem; font-family: var(--sc-font-text); font-size: .8rem; letter-spacing: .02em; }
.houses__tabs [role="tab"][aria-selected="true"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .houses__tabs [role="tab"]:hover { color: var(--sc-ink); } }
.house[hidden] { display: none !important; }
.house { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sc-7); align-items: start; }
.house:not([hidden]) { animation: house-in 520ms var(--sc-ease-out); }
@keyframes house-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.house__main { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.house__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-3); margin-top: var(--sc-3); }
.house__pair img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.specs { margin: var(--sc-6) 0 0; display: grid; gap: 0; }
.specs > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--sc-hairline); }
.specs dt { font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: .2rem; }
.specs dd { margin: 0; font-size: 1rem; line-height: 1.5; }
.process { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sc-7); margin-top: var(--sc-9); padding-top: var(--sc-7); border-top: 1px solid var(--sc-hairline); }
.process__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-5); }
.process__steps li { display: grid; grid-template-columns: 3.2rem 1fr; align-items: start; line-height: 1.55; color: var(--sc-ink-soft); }
.process__steps p { margin: 0; max-width: 52ch; }
.process__steps li strong { color: var(--sc-ink); font-weight: 600; }
.process__steps span { font-family: var(--sc-font-display); font-size: 2.2rem; line-height: .9; color: var(--sc-accent); }
.process__feat .t-body { margin-top: .9rem; }

/* --------------------------------------------------- 7 · the land --- */
.land { padding-block: var(--sc-section); }
.land__title { max-width: 17ch; }
.stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-5);
  margin: var(--sc-8) 0 var(--sc-9);
}
.stats > div { padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline-strong); }
.stats dt {
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(3rem, 2rem + 3.4vw, 5.4rem); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.stats dt small { font-size: .38em; margin-left: .12em; color: var(--sc-accent); font-family: var(--sc-font-text); font-weight: 500; letter-spacing: .02em; }
.stats dd { margin: .55rem 0 0; font-size: .95rem; line-height: 1.45; color: var(--sc-ink-soft); max-width: 17ch; }
.land__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-9); align-items: start; }
.land__col--b { margin-top: 10vw; }
.land__col .t-h3 { margin: var(--sc-6) 0 var(--sc-4); }
.land__col--b .t-h3 { margin-top: 0; }
.land__fig { margin: 0; overflow: hidden; background: var(--sc-surface); }
.land__fig img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.land__fig--tall img { aspect-ratio: 4 / 5; max-height: 78svh; }
.land__col--b .land__fig { margin-top: var(--sc-6); }
.infra { list-style: none; margin: 0; padding: 0; }
.infra li { padding: .9rem 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); line-height: 1.55; }
.infra strong { color: var(--sc-ink); font-weight: 600; }

/* ------------------------------------------------- 8 · the way in --- */
.wayin { padding-block: var(--sc-section); }
.wayin__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sc-9); align-items: start; }
.wayin__route .t-lede { margin-top: 1.2rem; }
.route { position: relative; margin-top: var(--sc-7); padding-left: 3rem; }
.route__line { position: absolute; left: 0; top: .55rem; bottom: 1.9rem; width: 24px; height: calc(100% - 2.45rem); overflow: visible; }
.route__line path {
  fill: none; stroke: var(--sc-accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p, 0) - 0.14) * 2.8, 1));
}
.route__stops { list-style: none; margin: 0; padding: 0; }
.route__stops li { position: relative; padding-bottom: 1.45rem; }
.route__stops li::before {
  content: ""; position: absolute; left: calc(-3rem + 12px - 6px); top: .5rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sc-canvas); border: 2px solid var(--sc-accent);
}
.route__stops strong { display: block; font-family: var(--sc-font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.2; }
.route__stops span { display: block; color: var(--sc-ink-soft); font-size: .94rem; }
.route__here strong { font-style: italic; }
.route__here::before { background: var(--sc-accent) !important; width: 18px !important; height: 18px !important; left: calc(-3rem + 12px - 9px) !important; top: .38rem !important; box-shadow: 0 0 0 5px color-mix(in oklab, var(--sc-accent) 18%, transparent); }
.wayin__note { margin-top: var(--sc-5); }
.wayin__road { padding-top: .6rem; }
.road { margin-top: var(--sc-6); }
.road__axis, .road__row { display: grid; grid-template-columns: 11.5rem 1fr; gap: 1.25rem; align-items: start; }
.road__years { position: relative; height: 1.6rem; border-bottom: 1px solid var(--sc-hairline-strong); }
.road__years b { position: absolute; left: calc(var(--t) * 100%); bottom: .35rem; font-weight: 600; font-size: .78rem; letter-spacing: .06em; color: var(--sc-ink-soft); }
.road__years b::after { content: ""; position: absolute; left: 0; bottom: -.4rem; height: .4rem; width: 1px; background: var(--sc-hairline-strong); }
.road__row { padding: .95rem 0 .75rem; border-bottom: 1px solid var(--sc-hairline); }
.road__row > span:first-child { font-weight: 500; font-size: .98rem; line-height: 1.3; }
.road__track { position: relative; min-height: 2.6rem; }
.road__track i {
  position: absolute; top: .25rem; height: 10px; border-radius: 999px;
  left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%);
  background: var(--sc-accent);
}
.road__track em {
  position: absolute; top: 1.15rem; left: calc(var(--a) * 100%);
  font-style: normal; font-size: .84rem; color: var(--sc-ink-soft); white-space: nowrap;
}
.road__row:nth-child(n+6) .road__track em { left: auto; right: calc((1 - var(--b)) * 100%); text-align: right; }
.road__note { margin: var(--sc-4) 0 0; font-size: .9rem; color: var(--sc-ink-soft); }

/* ------------------------------------------------ 9 · the details --- */
.office { padding-block: var(--sc-9) var(--sc-section); border-top: 1px solid var(--sc-hairline); }
.office__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sc-9); align-items: start; }
.team__groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-7) var(--sc-6); margin-top: var(--sc-7); }
.team__g { margin: 0; }
.team__g dt { font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); padding-bottom: .55rem; border-bottom: 1px solid var(--sc-hairline-strong); }
.team__g dd { margin: .95rem 0 0; color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.5; }
.team__g dd strong { display: block; color: var(--sc-ink); font-family: var(--sc-font-display); font-weight: 500; font-size: 1.28rem; line-height: 1.2; margin-bottom: .1rem; }
.dd { padding: var(--sc-6); background: var(--sc-surface); box-shadow: var(--sc-edge); }
.dd .t-body { margin-top: .9rem; }
.faq { margin-top: var(--sc-8); }
.faq .t-h3 { margin-bottom: var(--sc-4); }
.faq details { border-top: 1px solid var(--sc-hairline); }
.faq details:last-child { border-bottom: 1px solid var(--sc-hairline); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1rem 2.4rem 1rem 0; font-family: var(--sc-font-display); font-size: 1.24rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%; width: 12px; height: 12px; translate: 0 -50%;
  background:
    linear-gradient(var(--sc-accent), var(--sc-accent)) center / 12px 2px no-repeat,
    linear-gradient(var(--sc-accent), var(--sc-accent)) center / 2px 12px no-repeat;
  transition: transform 200ms var(--sc-ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.1rem; color: var(--sc-ink-soft); line-height: 1.6; max-width: 58ch; }

/* --------------------------------------------- 10 · your homesite --- */
.visit { padding-block: var(--sc-section) var(--sc-7); }
.visit__head .t-lede { margin-top: 1.1rem; }
.visit__grid { display: grid; grid-template-columns: minmax(0, 8.4fr) minmax(0, 3.6fr); gap: var(--sc-6); margin-top: var(--sc-7); align-items: start; }
.picker__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sc-4); }
.chip {
  min-height: 40px; padding: .4rem 1rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--sc-ink);
  border: 1px solid var(--sc-hairline-strong); font-size: .9rem; font-weight: 500;
  transition: background-color 150ms var(--sc-ease-out), border-color 150ms var(--sc-ease-out), color 150ms;
}
.chip[aria-pressed="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--sc-accent); } }
.picker__frame { position: relative; }
.picker__map .plan-box__img { opacity: .92; }
.picker__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.picker__hint { margin: .8rem 0 0; font-size: .88rem; color: var(--sc-ink-soft); }
.pk-amen circle { fill: var(--brown); stroke: rgba(244,238,230,.65); stroke-width: 1; }
.pk-amen text { fill: var(--brown-ink); font: 600 7.4px/1 Figtree, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.pk-lot { cursor: pointer; }
.pk-lot .dot { fill: #F4F6F1; stroke: rgba(6,22,17,.7); stroke-width: 1.3; transition: fill 150ms, opacity 200ms, r 200ms; }
.pk-lot .hit { fill: transparent; }
.pk-lot.is-dim { opacity: .18; }
.pk-lot.is-sel .dot { fill: #62D6CF; }
@media (hover: hover) and (pointer: fine) { .pk-lot:hover .dot { fill: #62D6CF; } }
.pk-loop { color: #FFFFFF; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(4,16,12,.45)); }
.pk-trace { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.pk-loop.is-drawing .pk-trace { animation: loop-draw 1.1s cubic-bezier(0.55, 0.05, 0.25, 1) forwards; }
.pk-tip { pointer-events: none; }
.pk-tip rect { fill: #F1F2EE; }
.pk-tip text { fill: #10261F; font: 600 11px/1 Figtree, sans-serif; dominant-baseline: central; }

.lot { position: sticky; top: calc(var(--bar-h) + 1rem); padding: var(--sc-6); background: var(--sc-surface); box-shadow: var(--sc-edge), var(--sc-e2); min-height: 12rem; }
.lot__empty { margin: 0; color: var(--sc-ink-soft); font-family: var(--sc-font-display); font-style: italic; font-size: 1.4rem; line-height: 1.3; }
.lot__title { margin: 0; font-family: var(--sc-font-display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); line-height: 1; }
.specs--dark { margin-top: var(--sc-5); }
.specs--dark > div { grid-template-columns: 1fr; gap: .25rem; }

.ask { margin-top: var(--sc-9); padding-top: var(--sc-7); border-top: 1px solid var(--sc-hairline-strong); }
.ask__title { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); }
.ask__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5) var(--sc-5); margin-top: var(--sc-6); }
.f { display: grid; gap: .35rem; }
.f > span { font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.f input, .f select {
  width: 100%; min-height: 48px; padding: .55rem 0;
  background: transparent; color: var(--sc-ink);
  border: 0; border-bottom: 1px solid var(--sc-hairline-strong); border-radius: 0;
  font-size: 1.04rem;
  transition: border-color 150ms var(--sc-ease-out);
}
.f select { appearance: none; padding-right: 1.6rem; background: linear-gradient(45deg, transparent 50%, var(--sc-accent) 50%) calc(100% - 9px) 52% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--sc-accent) 50%) calc(100% - 3px) 52% / 6px 6px no-repeat; }
.f select option { background: #0D1D18; color: #EEF1EA; }
.f input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.f input:focus, .f select:focus { border-bottom-color: var(--sc-accent); }
.f input:user-invalid { border-bottom-color: #F0A38B; }
.ask__send { margin: var(--sc-6) 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.ask__send legend { width: 100%; margin-bottom: .6rem; padding: 0; font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ask__send label { display: inline-flex; align-items: center; gap: .55rem; min-height: 40px; font-size: .98rem; cursor: pointer; }
.ask__send input { width: 1.1rem; height: 1.1rem; accent-color: var(--sc-accent); }
.ask__go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: var(--sc-6); }
.ask__call { color: var(--sc-ink); font-weight: 500; text-decoration-color: var(--sc-accent); }
.ask__note { margin: var(--sc-4) 0 0; font-size: .88rem; color: var(--sc-ink-soft); max-width: 60ch; }

.coda {
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem);
  margin: var(--sc-10) 0 0;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.4rem); line-height: 1;
}
.coda__loop { flex: none; width: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem); height: auto; color: var(--sc-accent); }
.foot {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sc-6); align-items: start;
  margin-top: var(--sc-7); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline);
  font-size: .9rem; color: var(--sc-ink-soft);
}
.foot__xho { width: 84px; height: auto; color: var(--sc-ink); }
.foot__addr { font-style: normal; line-height: 1.7; }
.foot__addr a, .foot__links a { color: var(--sc-ink); }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; text-align: right; }
.foot__links a { display: inline-block; padding: .15rem 0; }
.foot__small { grid-column: 1 / -1; margin: var(--sc-4) 0 0; font-size: .82rem; }

/* ------------------------------------------------------------ phone --- */
@media (max-width: 860px) {
  :root { --bar-h: 58px; }
  .bar { grid-template-columns: auto 1fr auto; gap: .6rem; padding-inline: 14px; }
  .bar__xho { height: 24px; }
  .bar__where { justify-self: stretch; display: flex; justify-content: center; min-width: 0; }
  .where { padding: 3px 12px 3px 6px; gap: .45rem; max-width: 100%; min-width: 0; }
  .where__map { width: 48px; height: 26px; flex: none; }
  .where__text { min-width: 0; font-size: .8rem; }
  .where__name { overflow: hidden; text-overflow: ellipsis; }
  .btn--bar { padding: .5em .95em; font-size: .84rem; min-height: 40px; }
  .stops { position: fixed; top: calc(var(--bar-h) + 6px); left: 14px; right: 14px; translate: none; min-width: 0; }

  .hero__frame { --fx: 0.53; }
  .hero__loop { width: 13.5%; left: 52.5%; top: 57%; }
  .hero__copy { top: calc(var(--bar-h) + 1.4rem); right: var(--sc-gutter); }
  .hero__title { font-size: clamp(2.35rem, 10vw, 3.2rem); }
  .hero__sub { margin: 1rem 0 1.4rem; font-size: 1.02rem; }
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(7,19,15,.86) 0%, rgba(7,19,15,.6) 34%, rgba(7,19,15,0) 58%),
      linear-gradient(to top, rgba(7,19,15,.82) 0%, rgba(7,19,15,.35) 26%, rgba(7,19,15,0) 46%);
  }
  .hero__beat { right: var(--sc-gutter); bottom: 2.4rem; }
  .hero__beat-line { font-size: 2.4rem; }

  .lagoon__copy .t-h2 { font-size: 2.3rem; }
  .lagoon__copy .t-body { margin-left: 0; }

  .shore__stage { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1.4rem; padding-top: calc(var(--bar-h) + 1.4rem); }
  .rail__note .t-h3 { font-size: 1.35rem; }
  .rail__note .dash-list { columns: 2; column-gap: 1rem; }
  .rail__note .dash-list li { break-inside: avoid; font-size: .86rem; padding: .45rem 0; }
  .shore__stage > .rail__lead { flex: none; padding: 0 var(--sc-gutter); }
  .shore__stage > .rail__lead .t-h2 { font-size: 2.1rem; margin: .5rem 0 .7rem; }
  .shore__stage > .rail__lead .t-body { font-size: .94rem; line-height: 1.5; }
  .rail { padding-top: 0; align-items: flex-start; }
  .rail__item, .rail__item--wide, .rail__item--tall, .rail__item--film { width: 80vw; }
  .rail__item img, .rail__video, .rail__item--tall img { height: 36svh; }
  .rail__item figcaption { font-size: .88rem; margin-top: .7rem; }

  .canopy__head { grid-template-columns: 1fr; gap: var(--sc-4); }
  .plate--full .plate__media { aspect-ratio: 4 / 3.4; }
  .plate--full .plate__media img { object-position: 50% 20%; }
  .plates { grid-template-columns: 1fr; row-gap: var(--sc-8); margin-top: var(--sc-8); }
  .plate--a, .plate--b, .plate--c { grid-column: 1; margin-top: 0; }
  .plate--b .plate__media { aspect-ratio: 4 / 4.4; }
  .canopy__hush { text-align: left; padding-bottom: 32vh; }

  .peak__map {
    --room: calc(100svh - var(--bar-h) - 13rem);
    width: min(var(--room), calc((100vw - 28px) * 2.0144));
    rotate: -90deg;
  }
  .peak__copy { height: 9.5rem; bottom: 1.1rem; }
  .fig__n { font-size: 3.1rem; }
  .peak__figs { gap: .2rem 1.6rem; }
  .fig { font-size: .95rem; gap: .5rem; }
  .peak__say { font-size: 1.55rem; }

  .homes__intro, .house, .process, .land__cols, .wayin__grid, .office__grid, .visit__grid { grid-template-columns: 1fr; }
  .homes__intro { gap: var(--sc-6); }
  .houses { margin-top: var(--sc-9); }
  .houses__tabs { gap: 0 1.4rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .houses__tabs [role="tab"] { flex: none; font-size: 1.35rem; }
  .house { gap: var(--sc-5); }
  .specs > div { grid-template-columns: 7rem 1fr; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: var(--sc-6); }
  .stats > div:last-child { grid-column: 1 / -1; }
  .land__col--b { margin-top: 0; }
  .land__cols { gap: var(--sc-8); }
  .road__axis, .road__row { grid-template-columns: 1fr; gap: .4rem; }
  .road__axis > span:first-child { display: none; }
  .road__row:nth-child(n+6) .road__track em { left: calc(var(--a) * 100%); right: auto; text-align: left; }
  .road__track em { white-space: normal; max-width: 70vw; }
  .team__groups { grid-template-columns: 1fr; }

  .picker__frame { aspect-ratio: 1390 / 2800; }
  .picker__map {
    position: absolute; left: 50%; top: 50%;
    width: calc(100% * 2.0144); /* the frame's height, since the map is turned a quarter */
    translate: -50% -50%; rotate: -90deg;
  }
  .lot { position: static; }
  .ask__grid { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .foot__links { text-align: left; }
}

/* ---------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero__back, .hero__near, .hero__loop, .hero__haze { transform: none !important; }
  .loop-trace, .pk-trace { animation: none !important; stroke-dashoffset: 0; }
  .route__line path { stroke-dashoffset: 0; }
  .house:not([hidden]) { animation: none; }
  .peak__map .plan-box__img { opacity: 1; filter: none; }
}

/* nav: the whole parcel lights up when the page is looking at the whole plan */
.where__map.is-whole .where__site { fill: color-mix(in oklab, #62D6CF 42%, transparent); stroke-opacity: 1; }
.bar[data-ground="lime"] .where__map.is-whole .where__site { fill: color-mix(in oklab, #0A7471 35%, transparent); }

/* amenity key under the picker */
.key { margin-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.key summary { cursor: pointer; padding: .8rem 0; font-weight: 600; font-size: .9rem; color: var(--sc-ink); }
.key__cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sc-5); padding-bottom: var(--sc-4); }
.key__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--sc-5); font-size: .88rem; color: var(--sc-ink-soft); }
.key__list--r { columns: 1; }
.key__list li { display: flex; gap: .6rem; align-items: baseline; padding: .2rem 0; break-inside: avoid; }
.key__list span { flex: none; display: inline-flex; justify-content: center; min-width: 1.7rem; padding: .05rem .3rem; border-radius: 999px; background: var(--brown); color: var(--brown-ink); font-size: .68rem; font-weight: 600; }
@media (max-width: 860px) { .key__cols { grid-template-columns: 1fr; } .key__list { columns: 1; } }

/* compact phones (360 wide, or short screens): keep the hero to two title lines
   and the shore heading clear of the bar */
@media (max-width: 380px) {
  .hero__title { font-size: 2.05rem; }
  .hero__sub { font-size: .95rem; margin: .8rem 0 1.1rem; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .shore__stage { gap: .9rem; padding-top: calc(var(--bar-h) + .8rem); }
  .shore__stage > .rail__lead .t-h2 { font-size: 1.8rem; }
  .shore__stage > .rail__lead .t-body { font-size: .88rem; line-height: 1.45; }
  .rail__item img, .rail__video, .rail__item--tall img { height: 28svh; }
  .hero__copy { top: calc(var(--bar-h) + .9rem); }
}

/* phones: the lagoon copy is taller than the engine's band covers on short screens */
@media (max-width: 860px) {
  .lagoon .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 86%, transparent) 30%,
      color-mix(in oklab, var(--sc-canvas) 52%, transparent) 52%,
      transparent 70%);
  }
}