/* ============================================================
   racecar — snap scroll system v10+
   ============================================================ */

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

html {
  /* proximity snap: snaps panels but allows free scroll through hero+intro */
  scroll-snap-type: y proximity;
  overflow-y: scroll;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #bec69e;
}

body {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  background: #bec69e;
  color: #111110;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a   { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

:root {
  --sage:    #bec69e;
  --yellow:  #d6d4a8;   /* pale desaturated yellow, same vibe as sage */
  --black:   #111110;
  --cream:   #f2f0e4;
  --M:       3vw;
  --Q:       25vw;
  /* City panels: one text size throughout */
  --city-sz: 13px;
  --lh:      1.6;
  --rule:    rgba(17,17,16,0.18);
  --rule-hv: rgba(17,17,16,0.55);
}

/* ── NOISE ────────────────────────────────────────────────── */
.noise {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 300px 300px; mix-blend-mode: multiply;
}

/* ── SCROLL SECTION (hero + intro) ───────────────────────── */
/*
  Hero is sticky (100vh, stays put while you scroll)
  Intro sits below hero (pushed by margin-top: 100vh)
  Total height: 200vh so user scrolls through both before snap begins
*/
.scroll-section {
  position: relative;
  height: 200vh;
  /* Snap does not apply here */
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/* ── PANEL BASE — snap, cities onwards ───────────────────── */
.panel {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--sage);
  /* Must sit above the fixed bg slideshow */
  z-index: 2;
}



/* Top-left label: Helvetica, small */
.panel-label {
  position: absolute;
  top: var(--M);
  left: var(--M);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--black);
  opacity: 0.45;
  line-height: 1.2;
  z-index: 10;
}

/* ── P1: HERO ─────────────────────────────────────────────── */
/*
  The background images are position:fixed — they never move.
  The hero section is 200vh tall so there's room to scroll the wordmark off.
  The wordmark sits at the bottom of the viewport and scrolls up naturally.
  The intro then scrolls up over the still-fixed images.
  After 200vh of free scroll, the snapped city panels begin.
*/
.hero {
  position: relative;
  height: 100vh;        /* exactly one screen — logo sits at bottom of viewport */
  width: 100%;
  background: transparent;
}

/* Background images: fixed to viewport, never move */
.hero__slides {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: none;
}

.hero__slide.active { opacity: 1; }

.hero__slide img,
.hero__vid {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* No gradient veil — clean cut videos, no fade */
.hero__slides::after { display: none; }

/* Wordmark: sticky at bottom of viewport, scrolls up as page scrolls */
.hero__wordmark {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 2.5vw 2.5vw 2.5vw;
}

.hero__logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: invert(1) brightness(0.9);
}

/* ── P2: INTRO — matches screenshot layout exactly ───────── */
/*
  Lead:    top of panel, Helvetica bold, very large, ~60% width
  Subhead: bottom-left, Helvetica bold, medium, flush left
  Body:    bottom-right, Roboto Mono small — same column as subhead but right half
  Large vertical air between lead and subhead/body
*/
.intro {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr 1fr;
  padding: 5vw var(--M) 5vw var(--M);
  background: transparent;
  border-top: none;
  gap: 0;
  /* Sits directly after the 200vh hero, scrolls over the fixed bg images */
  position: relative;
  height: 100vh;
  z-index: 2;  /* above fixed slides */
}

/* Lead: top-left, spans both columns, very large Helvetica bold */
.intro__lead {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(32px, 5vw, 76px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cream);
  max-width: calc(var(--Q) * 2.4);
  letter-spacing: -0.02em;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
}

/* Bottom row: subhead left col, body right col */
.intro__body {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4vw;
  align-items: end;
}

/* Subhead: Helvetica bold, bottom-left */
.intro__subhead {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--cream);
  letter-spacing: -0.01em;
  grid-column: 1;
}

/* Right wrapper: sits in col 2 of intro__body grid */
.intro__body-right {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 1.4em;
}

/* Body paragraphs: Roboto Mono small */
.intro__body-right p {
  font-family: 'Roboto Mono', monospace;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--cream);
  opacity: 0.75;
}

/* Meta: same but dimmer */
.intro__meta {
  font-family: 'Roboto Mono', monospace !important;
  font-size: clamp(10px, 0.85vw, 12px) !important;
  font-weight: 400 !important;
  color: var(--cream) !important;
  opacity: 0.45 !important;
  letter-spacing: 0.02em !important;
}

/* ── P3: MEDIA — no dots ──────────────────────────────────── */
.media-panel { background: var(--black); overflow: hidden; }

.media-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1s ease; z-index: 1;
}
.media-slide.active { opacity: 1; z-index: 2; }
.media-slide video,
.media-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── SEPARATOR PANELS ────────────────────────────────────── */
.sep-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--M);
  position: relative;
  height: 22vh;
  min-height: 120px;
}

.sep-panel--beige { background: #f0eed8; }
.sep-panel--sage  { background: var(--sage); }
.sep-panel--dark  { background: var(--black); }

.sep-panel__label { display: none; }

/* Word: top-left, left-aligned, no indent */
.sep-panel__word {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(22px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--black);
  margin-top: 0;
}

.sep-panel--dark .sep-panel__word {
  color: var(--cream);
}

/* Rule closing the bottom */
.sep-panel__rule {
  position: absolute;
  bottom: 0;
  left: var(--M);
  right: var(--M);
  height: 0;
  border-top: 1px solid rgba(17,17,16,0.18);
}

.sep-panel--dark .sep-panel__rule {
  border-top-color: rgba(242,240,228,0.15);
}

/* ── P4–7: CITY PANELS ────────────────────────────────────── */
/*
  Light background. Text left half. Image right half.
*/
.city-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-top: 1px solid var(--rule-hv);
  background: #f0eed8;   /* warm light — distinct from sage hero */
}

/* Label sits inside layout, absolute */
.city-panel .panel-label {
  z-index: 20;
  color: var(--black);
  opacity: 0.38;
}

.city-panel__layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* text left, image right */
  height: 100%;
  width: 100%;
}

/* Text col: LEFT */
.city-panel__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--M) * 3) var(--M) var(--M) var(--M);
  gap: 1.4vw;
  overflow: hidden;
  order: 1;
}

/* Image col: RIGHT */
.city-panel__img {
  overflow: hidden;
  border-left: 1px solid rgba(17,17,16,0.12);
  order: 2;   /* right */
}

.city-panel__img img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
}

.city-panel__name {
  font-family: 'Roboto Mono', monospace;
  font-size: clamp(28px, 4.5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--black);
}

.city-panel__desc {
  font-size: var(--city-sz);
  font-weight: 400;
  line-height: var(--lh);
  color: var(--black);
  opacity: 0.65;
  max-width: 38ch;
}

/* Info grid — 2 cols, all same size as body */
.city-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  margin-top: 0;
}

.cpg-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding-right: 12px;
}

.cpg-item:nth-child(even) { border-right: none; padding-left: 12px; padding-right: 0; }
.cpg-item:nth-last-child(-n+2) { border-bottom: none; }

.cpg-key {
  font-size: var(--city-sz);
  font-weight: 400;
  color: var(--black);
  opacity: 0.4;
  line-height: 1.3;
}

.cpg-val {
  font-size: var(--city-sz);
  font-weight: 500;
  color: var(--black);
  line-height: 1.3;
}

/* ── P8: PIPELINE ─────────────────────────────────────────── */
.pipeline-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-top: none;
}

/* Outer split: left text, right map */
.pipeline-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

/* Left col: lists on top, map below */
.pipeline-left {
  display: flex;
  flex-direction: column;
  padding: var(--M);
  border-right: 1px solid var(--rule);
  overflow: hidden;
}

/* Map sits at the bottom of the left col, takes remaining space */
.pipeline-map {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--sage);
  margin: var(--M) calc(var(--M) * -1) calc(var(--M) * -1); /* bleed to edges */
}

/* Right col: amenities only, full height */
.pipeline-right {
  display: flex;
  flex-direction: column;
  padding: var(--M);
  overflow: hidden;
}

/* Top row inside left col: the two list columns */
.pipeline-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  padding-top: 2vw;
  flex-shrink: 0;
}

.pipeline-col { border-right: none; padding: 0; }

.pipeline-col--half {
  padding-right: 4vw;
  border-right: 1px solid var(--rule);
}
.pipeline-col--half:last-child {
  border-right: none;
  padding-left: 4vw;
  padding-right: 0;
}

/* Amenities — vertical list in right col */
.pipeline-amenities {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pipeline-amenities__list {
  display: flex;
  flex-direction: column;
  margin-top: 0.8vw;
  flex: 1;
  border-top: 1px solid var(--rule);
}

.pipeline-amenities__list span {
  font-size: var(--city-sz);
  font-weight: 400;
  color: var(--black);
  opacity: 0.65;
  line-height: 1;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}

.pipeline-col__head {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  opacity: 0.4;
  display: block;
  margin-bottom: 1.8vw;
}

.pipeline-col__items { display: flex; flex-direction: column; gap: 0; }

.pipeline-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.pipeline-item:last-child { border-bottom: none; }

/* Reuse cpg-key / cpg-val sizing */
.pipeline-item .cpg-key { opacity: 0.7; }

/* ── P9: ACCESS — both cells dark ────────────────────────── */
.access-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-top: 1px solid var(--rule-hv);
}

.access-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

.access-cell {
  display: flex;
  flex-direction: column;
  gap: 2.5vw;
  padding: calc(var(--M) * 3.5) var(--M) var(--M);
}

/* Both dark */
.access-cell--dark {
  background: var(--black);
  color: var(--cream);
}

.access-cell--border {
  border-left: 1px solid rgba(242,240,228,0.12);
}

/* panel-label inside dark cell — override for readability */
.access-cell .panel-label {
  color: var(--cream);
  opacity: 0.45;
}

.access-cell__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.access-cell__type {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--cream);
  opacity: 0.45;
  text-transform: uppercase;
}

.access-cell__tag {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--cream);
  opacity: 0.35;
  line-height: 1.4;
}

.access-cell__price {
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.access-cell__lead {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--cream);
  opacity: 0.75;
}

.access-cell__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.access-cell__list li {
  font-size: var(--city-sz);
  font-weight: 400;
  line-height: 1.5;
  opacity: 0.65;
  padding-left: 16px;
  position: relative;
}
.access-cell__list li::before {
  content: '—'; position: absolute; left: 0;
  opacity: 0.4; font-size: 11px; top: 2px;
}

.access-cell__note {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.32;
  line-height: 1.6;
  margin-top: auto;
}

/* ── P10: CONTACT ─────────────────────────────────────────── */
.contact-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  background: var(--yellow);
}

.contact-panel__img {
  overflow: hidden;
  border-right: 1px solid var(--rule-hv);
  position: relative;
}

.contact-panel__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--M);
  gap: 1.4vw;
}

/* Interest type buttons */
.contact-interest {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--black);
  /* Match form row width exactly */
  width: 100%;
  max-width: 420px;
}

.contact-interest__btn {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--black);
  background: transparent;
  padding: 10px 0;
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--black);
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s;
  flex: 1;
  text-align: center;
}
.contact-interest__btn:last-child { border-right: none; }
.contact-interest__btn.active {
  background: var(--black);
  color: var(--cream);
  opacity: 1;
}
.contact-interest__btn:not(.active):hover { opacity: 0.75; }

/* Form row */
.contact-panel__form-row {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--black);
  max-width: 420px;
}

.contact-panel__input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--black);
  font-family: 'Roboto Mono', monospace;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 400;
  padding: 11px 12px;
  -webkit-appearance: none;
  min-width: 0;
}
.contact-panel__input::placeholder { color: rgba(17,17,16,0.3); }
.contact-panel__input--name {
  border-right: 1px solid rgba(17,17,16,0.2);
  flex: 0 0 30%;
}

.contact-panel__submit {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream);
  background: var(--black);
  padding: 11px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
  border: none;
}
.contact-panel__submit:hover { opacity: 0.75; }

.contact-panel__meta {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  color: var(--black);
  opacity: 0.58;
  line-height: 1.5;
  margin-top: 0;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3vw;
  padding: 18px var(--M);
  border-top: 1px solid rgba(17,17,16,0.25);
  background: var(--black);
  position: relative;
  z-index: 10;
  scroll-snap-align: none;
}

.site-footer span {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--cream);
  opacity: 0.38;
  white-space: nowrap;
}

/* Privacy notice — centre, slightly more prominent, wraps */
.site-footer__privacy {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--cream) !important;
  opacity: 0.28 !important;
  white-space: normal !important;
  text-align: center;
  line-height: 1.5;
  max-width: 520px;
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --M: 16px; --Q: 50vw; }
  html { scroll-snap-type: y proximity; }

  .intro__body { padding-left: 0; }
  .intro__lead { font-size: clamp(18px, 5.5vw, 28px); max-width: 100%; }

  .city-panel__layout { grid-template-columns: 1fr; grid-template-rows: 45vw 1fr; }
  .city-panel__img { border-right: none; border-bottom: 1px solid var(--rule-hv); }
  .city-panel__right { padding-top: 5vw; }
  .city-panel__name { font-size: clamp(28px, 9vw, 52px); }

  .pipeline-panel__grid { grid-template-columns: 1fr; overflow-y: auto; }
  .pipeline-col, .pipeline-col:nth-child(2), .pipeline-col:last-child {
    border-right: none; border-bottom: 1px solid var(--rule);
    padding: 0 0 3vw 0; margin-bottom: 3vw;
  }
  .pipeline-col:last-child { border-bottom: none; margin-bottom: 0; }

  .access-panel__grid { grid-template-columns: 1fr; overflow-y: auto; }
  .access-cell--border { border-left: none; border-top: 1px solid rgba(242,240,228,0.12); }

  .contact-panel { grid-template-columns: 1fr; }
  .contact-panel__img { height: 40vw; border-right: none; border-bottom: 1px solid var(--rule-hv); }
  .contact-panel__content { padding: 5vw var(--M); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  /* media panel removed */
}