/* ═══════════════════════════════════════════════════════════════
   LIVE OMAN — Cinematic One-Scroll
   Structure & scroll order per schematic — not final visual design
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink: #0e0a08;
  --ink-2: #171008;
  --paper: #f3ecdd;
  --stone: #d9c8a9;
  --gold: #36B48F;
  --gold-soft: #66C9AB;
  --burgundy: #4a1420;
  --burgundy-deep: #2c0b13;
  --nav-h: 88px;
  --font-display: "Kanit", system-ui, sans-serif;
  --font-body: "Kanit", system-ui, sans-serif;

  /* Glassmorphism (warm-tinted to the palette) */
  --glass-bg: linear-gradient(155deg, rgba(243, 236, 221, .14), rgba(243, 236, 221, .05) 55%, rgba(54, 180, 143, .06));
  --glass-border: rgba(243, 236, 221, .22);
  --glass-blur: blur(18px) saturate(1.35);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .22);
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, .38);
  --radius-lg: 22px;
  --radius-md: 16px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

/* Lenis smooth-scroll housekeeping (per Lenis docs) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

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

a { color: inherit; }

/* ── Persistent nav ─────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-left: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left));
  padding-right: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right));
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
  background: rgba(13, 6, 15, .92);
}
.nav.is-scrolled,
body.nav-open .nav {
  background: rgba(13, 6, 15, .92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom-color: rgba(245, 249, 250, .1);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06), 0 12px 40px rgba(0, 0, 0, .3);
}
.nav__brand {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  text-decoration: none;
  margin-right: auto;
}
.nav__crest { color: #36B48F; font-size: 1.1rem; }
.nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.nav__crest-note {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(243, 236, 221, .55);
}
.nav__links { display: flex; gap: 2.2rem; }
.nav__links a {
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  transition: color .25s;
}
.nav__links a:hover { color: #36B48F; }
.nav__cta {
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .55rem 1.2rem;
  border: 1px solid rgba(245, 249, 250, .85);
  color: #36B48F;
  font-weight: 600;
  border-radius: 999px;
  transition: background .25s, color .25s;
}
.nav__cta:hover { background: #36B48F; border-color: #36B48F; color: #0d060f; }
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.nav__burger span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: var(--paper);
  transition: transform .3s ease, top .3s ease;
}
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 26px; }
body.nav-open .nav__burger span:first-child { top: 22px; transform: rotate(45deg); }
body.nav-open .nav__burger span:last-child { top: 22px; transform: rotate(-45deg); }

/* ── Camera rail ────────────────────────────────────────────── */
.rail {
  position: fixed;
  left: clamp(.6rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.rail__label {
  writing-mode: vertical-rl;
  font-size: .58rem;
  letter-spacing: .3em;
  color: rgba(243, 236, 221, .4);
  text-transform: uppercase;
}
.rail__dots {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.rail__dots li { position: relative; }
.rail__dots li::before {
  content: "";
  display: block;
  width: 1px;
  height: 26px;
  background: rgba(243, 236, 221, .22);
  margin: 0 auto;
}
.rail__dots li:first-child::before { display: none; }
.rail__dots a {
  display: block;
  width: 11px;
  height: 11px;
  margin: 0 auto;
  border: 1.5px solid rgba(243, 236, 221, .5);
  border-radius: 50%;
  background: transparent;
  transition: background .3s, border-color .3s, transform .3s;
}
.rail__dots a.is-active {
  background: #36B48F;
  border-color: #36B48F;
  transform: scale(1.25);
}

/* ── Film journey (sticky scrubbed video behind scenes 1–2) ── */
.journey { position: relative; }
.film {
  position: sticky;
  top: 0;
  /* dvh, not svh: svh is the collapsed-browser-chrome height, so the
     moment the phone's address bar hid mid-scroll every film stopped
     ~70px short of the screen edge (a black band under the picture).
     dvh tracks the live viewport; pre-dvh browsers keep the vh line. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 0;
  contain: strict;
}
.film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.film__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14,10,8,.45) 0%, rgba(14,10,8,0) 30%, rgba(14,10,8,0) 55%, rgba(14,10,8,.75) 100%);
  pointer-events: none;
}
/* A sticky element still occupies its own screen of flow, which pushed the
   hero a whole screen below the film's first frame. Cancelling that height
   lets the copy sit on frame one. The cities journeys keep their establishing
   screens — a beat of pure flight before each city's text arrives. London now
   gets a half-screen establishing beat before its card and a matching exit beat
   after it, so the 120-frame Oxford Street film plays longer without losing
   the handoff to Register. (Must mirror the .film height units.) */
#journey > .film { margin-bottom: -100vh; margin-bottom: -100dvh; }
#london > .film { margin-bottom: -50vh; margin-bottom: -50dvh; }
/* Empty scroll length so each film caption can hold on its own frame */
.film-beat { height: 100vh; height: 100svh; }
.film-beat--half { height: 50vh; height: 50svh; }

/* ── Film captions ──────────────────────────────────────────────
   Children of the pinned film, so they hold one fixed spot in frame
   while the scroll scrubs past. Sizes are measured off the frame
   comps: 5.3vw with ~.095em tracking. JS drives opacity only —
   nothing moves, so each line sits exactly where it was placed. */
.film__captions {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.film-caption {
  position: absolute;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  /* Fraunces' opsz axis: the comps were set with the text cut, and letting
     opsz track a ~80px font-size swaps in the display cut, which is ~11%
     narrower per unit height — the line then no longer fills its mark. */
  font-optical-sizing: none;
  font-size: 6.29vw;
  letter-spacing: normal;
  color: #fff;
  text-shadow: 0 2px 44px rgba(14, 10, 8, .5);
  white-space: nowrap;
  opacity: 0;
  will-change: opacity;
}
/* t≈3.97s — the portrait; two lines, right-aligned, low in frame */
.film-caption--future {
  right: 6.29%;
  bottom: 7.13%;
  text-align: right;
  line-height: 1.304;
}
/* t≈7.37s — the eye; one line starting at the pupil, running out to
   the frame edge, sitting on the pupil's centre line (a hair above the
   frame's, hence the nudge) */
.film-caption--moment {
  right: .81%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  transform: translateY(-2.05%);
  line-height: 1.2;
}

/* Scroll-driven blackout layer — JS ramps its opacity over the last
   stretch of a journey so the film dissolves to dark, no sharp cut. */
.film__fade {
  position: absolute;
  inset: 0;
  background: #0a0705;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* Touch path: the film is an image sequence on a canvas (scroll-scrubbed);
   the <video> stays in the markup as a no-JS/poster fallback only. */
.film--canvas video { display: none; }
.journey-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Scenes (generic) ───────────────────────────────────────── */
.scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scene--solid { background: var(--ink-2); }
.scene__inner {
  width: min(1100px, 90vw);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 2rem) 0 6rem;
}
/* Copy that rides the films is white with a soft dark bloom — gold text
   vanished into the bright frames (sky, sand) while scrolling. Gold stays
   for accents only: borders, rails, buttons, links. */
.scene__kicker,
.eyebrow {
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 18px rgba(14, 10, 8, .65);
  margin-bottom: 1.1rem;
}
.scene__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 2.2rem;
  text-shadow: 0 2px 30px rgba(14, 10, 8, .6);
}
.scene__title--big { font-size: clamp(2.6rem, 6.5vw, 5rem); }
.scene__note {
  max-width: 56ch;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 16px rgba(14, 10, 8, .6);
  margin-top: 1.6rem;
}
.scene__lead {
  max-width: 58ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 16px rgba(14, 10, 8, .6);
  margin: -1rem 0 2rem;
}
.scene__lead .text-accent { color: #36B48F; }
.city .scene__lead, .city-scene .scene__lead { margin: 1.8rem 0 0; }
.status-line {
  margin-top: 1rem;
  font-size: .92rem;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 16px rgba(14, 10, 8, .6);
  border-left: 2px solid var(--gold);
  padding-left: .9rem;
  max-width: 60ch;
}
.status-line strong { color: #fff; font-weight: 600; }
.fineprint {
  font-size: .75rem;
  color: rgba(243, 236, 221, .45);
  margin-top: 1.4rem;
}
/* ── Hero ───────────────────────────────────────────────────────
   Layout: copy + CTAs sit in a narrow left column, the display
   headline is anchored to the bottom edge and runs wide.        */
.hero { justify-content: flex-end; }
.hero__content {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 7.7vw, 7rem) clamp(1.6rem, 9.8vh, 7rem);
}
/* Display headline — sits last in the flow, hard against the bottom.
   Fraunces' opsz axis makes the hairlines thin at this size. */
.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-optical-sizing: none;
  font-size: clamp(2.6rem, 7.48vw, 10rem);
  line-height: .9;
  letter-spacing: .017em;
  /* pure white, not the warm paper of body copy — as in the frame comps */
  color: #fff;
  margin: clamp(2rem, 6vh, 4rem) 0 0;
  text-shadow: 0 4px 60px rgba(14, 10, 8, .5);
}
.hero__title em { font-style: italic; }
.hero__sub {
  /* em, not ch or vw: holds the comp's six-line break pattern at every
     width. 16.5em, not the comp's ~348px — Inter runs narrower than the
     face the comp was set in, so matching px would drop a line. */
  max-width: 16.5em;
  font-size: clamp(1.02rem, 1.55vw, 1.35rem);
  line-height: 1.45;
  color: rgba(243, 236, 221, .92);
  margin-bottom: .9rem;
  text-shadow: 0 1px 24px rgba(14, 10, 8, .65);
}
.hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
/* Hero pills are plain .btn--ghost — the same glass recipe as the
   tiles, dev strips and consent row, so the pair reads as one system.
   (A custom milky fill here used to wash out over bright frames.) */
.hero__scrollhint {
  position: absolute;
  bottom: calc(1.6rem + env(safe-area-inset-bottom));
  right: max(clamp(1.4rem, 8vw, 7rem), env(safe-area-inset-right));
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(243, 236, 221, .5);
  animation: hint-pulse 2.6s ease-in-out infinite;
}
@keyframes hint-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.hero__scrollhint-arrow {
  display: inline-block;
  margin-left: .35rem;
  animation: arrow-bob 2.6s ease-in-out infinite;
}
@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-size: .88rem;
  letter-spacing: .05em;
  padding: .85rem 1.9rem;
  border-radius: 999px;
  transition: transform .25s, background .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: transparent; border: 1px solid rgba(245, 249, 250, .85); color: #36B48F; font-weight: 600; }
.btn--solid:hover { background: #36B48F; border-color: #36B48F; color: #0d060f; }
.btn--ghost {
  border: 1px solid rgba(245, 249, 250, .85);
  color: #36B48F;
  font-weight: 600;
  background: transparent;
}
.btn--ghost:hover { background: #36B48F; border-color: #36B48F; color: #0d060f; }

/* ── Opportunity proof tiles ────────────────────────────────── */
/* Title up top, tiles pinned low: the space between them keeps the
   film's globe frame clearly visible behind the scene. */
.opportunity .scene__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 2.5rem;
}
/* Proof cards ride a horizontal rail (same pattern as .city-stories):
   native side-scroll + snap, so it still reads with JS off. */
.proof-railwrap { position: relative; margin-top: 1rem; }
.proof-grid {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 30%);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  /* Room for the hover scale + soft shadow so the overflow box never
     clips them into hard seams. */
  padding: 14px 2px 20px;
  scrollbar-width: none;
}
.proof-grid::-webkit-scrollbar { display: none; }
.proof-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.proof-grid.is-dragging .proof-tile { transition: none; }
/* Edge fades sit ABOVE the cards as gradient strips (masks would break the
   tiles' backdrop-filter and, on phones, cover the snapped card). */
.proof-railwrap::before,
.proof-railwrap::after {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity .3s ease;
}
.proof-railwrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(10, 7, 5, .6) 0%, rgba(10, 7, 5, 0) 100%);
}
.proof-railwrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(10, 7, 5, .6) 0%, rgba(10, 7, 5, 0) 100%);
}
.proof-railwrap.is-at-start::before { opacity: 0; }
.proof-railwrap.is-at-end::after { opacity: 0; }
.proof-tile {
  scroll-snap-align: start;
  min-width: 0;
  height: 100%;
  background: linear-gradient(rgba(14, 10, 8, .42), rgba(14, 10, 8, .42)), var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1);
  -webkit-backdrop-filter: blur(18px) saturate(1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 1.6rem 1.4rem;

  display: flex;
  flex-direction: column;
  gap: .45rem;
  will-change: transform;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .45s ease;
}
.proof-tile:hover {
  transform: scale(1.018);
  border-color: rgba(102, 201, 171, .45);
}

.proof-tile__icon {
  display: block;
  color: var(--gold);
  margin-bottom: .7rem;
}
.proof-tile__icon svg { width: 46px; height: 46px; display: block; }
.proof-tile strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: #fff;
  text-shadow: 0 1px 14px rgba(14, 10, 8, .5);
}
.proof-tile span { font-size: .85rem; color: rgba(255, 255, 255, .72); }

/* Rail arrows — minimal gold chevrons on translucent dark discs */
.proof-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(14, 10, 8, .55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--gold-soft);
  cursor: pointer;
  z-index: 4;
  transition: opacity .3s ease, border-color .3s ease, background .3s ease;
}
.proof-nav svg { width: 20px; height: 20px; }
.proof-nav:hover { border-color: rgba(102, 201, 171, .5); background: rgba(14, 10, 8, .75); }
.proof-nav--prev { left: -18px; }
.proof-nav--next { right: -18px; }
.proof-nav[disabled] { opacity: .25; pointer-events: none; }
@media (pointer: coarse) {
  .proof-nav { display: none; }
}


/* ── Stats ──────────────────────────────────────────────────── */
.stat-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.2rem 2.6rem;
}
.stat { display: flex; flex-direction: column; gap: .15rem; }
.stat strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  color: #fff;
  text-shadow: 0 1px 20px rgba(14, 10, 8, .65);
  white-space: nowrap;
}
.stat span {
  font-size: .82rem;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 14px rgba(14, 10, 8, .6);
  letter-spacing: .04em;
}
.stat__arrow { font-size: 1.6rem; color: #36B48F; align-self: center; }
.stat-row--stats { margin-top: .6rem; }

/* ── City scenes (sticky scrubbed film + floating content) ──── */
.city-scene { min-height: 150vh; background: none; }
.city-scene .scene__inner { padding-bottom: 4rem; }
.city-scene .dev-strip { margin-bottom: 1.4rem; }

/* Per-city text placement, keyed to where each film frame has open
   space (schematic mocks 2026-07-26): SHC + Jabal read on the right,
   A'Thuraya centred over the valley floor. */
.city-scene--right .scene__inner {
  width: min(560px, 46vw);
  margin-left: auto;
  margin-right: clamp(1.4rem, 7vw, 7rem);
}
.city-scene--right .scene__title--big { font-size: clamp(2.4rem, 4.8vw, 4rem); }
.city-scene--left .scene__inner {
  width: min(560px, 46vw);
  margin-right: auto;
  margin-left: clamp(1.4rem, 7vw, 7rem);
}
.city-scene--left .scene__title--big { font-size: clamp(2.4rem, 4.8vw, 4rem); }
.city-scene--center .scene__inner { text-align: center; }
.city-scene--center .stat-row { justify-content: center; }
.city-scene--center .scene__lead { margin-left: auto; margin-right: auto; }
.city-scene--center .status-line {
  border-left: 0;
  padding-left: 0;
  margin-left: auto;
  margin-right: auto;
}
/* City brand logo — white lockup crowning each city column. PNGs are
   pre-baked white (the old brightness/invert filter chain flashed black
   mid-reveal on some GPUs); the drop-shadow gives the same soft dark
   bloom the copy carries over the bright films. */
.city-logo {
  display: block;
  height: clamp(3.6rem, 6vw, 5.4rem);
  width: auto;
  max-width: 100%;
  margin: 0 0 1.5rem;
  filter: drop-shadow(0 2px 18px rgba(14, 10, 8, .55));
}
.city-scene--center .city-logo { margin-left: auto; margin-right: auto; }

/* ── Developer strip (floats at bottom of viewport) ───────────
   Items centre-aligned; the text links stand in as wordmarks until
   MoHUP delivers the developer logo files. */
.dev-strip {
  position: sticky;
  bottom: 1.4rem;
  width: min(1100px, 92vw);
  margin: auto auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .7rem 1.4rem;
  padding: .9rem 1.4rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.dev-strip__label {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(14, 10, 8, .5);
}
.dev-strip__sub, .dev-strip__tbc { font-size: .8rem; color: rgba(243, 236, 221, .6); }
.dev-link {
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(54, 180, 143, .5);
  padding-bottom: 1px;
  transition: color .25s, border-color .25s;
}
.dev-link:hover { color: #36B48F; border-color: var(--gold-soft); }

/* ── London ─────────────────────────────────────────────────── */
/* No solid background — the content sits directly on the Oxford
   Street storefront film, which the scrim keeps legible. */
.film__scrim--london {
  background: linear-gradient(180deg, rgba(44,11,19,.6) 0%, rgba(44,11,19,.3) 40%, rgba(28,7,13,.92) 100%);
}
/* Cities flight ends on a fast, motion-blurred push into the resort —
   a black gradient rising from the bottom keeps that readable and
   seats the developer strips (mock 2026-07-26). */
#cities .film__scrim, #cities-2 .film__scrim, #cities-3 .film__scrim {
  background:
    linear-gradient(180deg, rgba(14,10,8,.45) 0%, rgba(14,10,8,0) 28%, rgba(14,10,8,0) 52%, rgba(10,7,5,.95) 100%);
}
/* City copy sits over bright façades — a black gradient rising from the
   text's edge of the frame keeps it legible: SHC + Jabal read on the right,
   A'Thuraya on the left. Desktop only: below 900px the city columns
   collapse to full-width centred text. */
@media (min-width: 901px) {
  #cities .film__scrim, #cities-3 .film__scrim {
    background:
      linear-gradient(270deg, rgba(10,7,5,.62) 0%, rgba(10,7,5,.34) 30%, rgba(10,7,5,0) 58%),
      linear-gradient(180deg, rgba(14,10,8,.45) 0%, rgba(14,10,8,0) 28%, rgba(14,10,8,0) 52%, rgba(10,7,5,.95) 100%);
  }
  #cities-2 .film__scrim {
    background:
      linear-gradient(90deg, rgba(10,7,5,.62) 0%, rgba(10,7,5,.34) 30%, rgba(10,7,5,0) 58%),
      linear-gradient(180deg, rgba(14,10,8,.45) 0%, rgba(14,10,8,0) 28%, rgba(14,10,8,0) 52%, rgba(10,7,5,.95) 100%);
  }
}
.dev-directory {
  margin-top: 3rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  background: linear-gradient(rgba(14, 10, 8, .42), rgba(14, 10, 8, .42)), var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1);
  -webkit-backdrop-filter: blur(18px) saturate(1);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.dev-directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 2rem;
  margin-top: 1rem;
}

/* ── London action cards ────────────────────────────────────── */
.ldn-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin: 2.4rem 0;
}
.ldn-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.4rem;
  background: linear-gradient(rgba(14, 10, 8, .42), rgba(14, 10, 8, .42)), var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1);
  -webkit-backdrop-filter: blur(18px) saturate(1);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transition: transform .35s ease, border-color .35s ease;
}
.ldn-card:hover {
  transform: translateY(-4px);
  border-color: rgba(102, 201, 171, .45);
}
.ldn-card strong { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: #fff; text-shadow: 0 1px 14px rgba(14, 10, 8, .5); }
.ldn-card span { font-size: .85rem; color: rgba(255, 255, 255, .72); }

.london .hero__ctas .btn {
  font-size: 1.05rem;
  padding: 1.15rem 2.6rem;
}

/* ── Register (the gate) ────────────────────────────────────── */
.register {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(54, 180, 143, .12), transparent 60%),
    linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-deep) 100%);
}
.register__inner { max-width: 760px; }
.gate {
  margin-top: 1rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  padding: 2rem clamp(1.4rem, 4vw, 2.2rem);
}
.gate__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 1.2rem;
  margin-bottom: 1.4rem;
}
.gate label { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.gate__label {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.gate__label .opt {
  font-style: normal;
  text-transform: none;
  letter-spacing: .03em;
  font-size: .72rem;
  color: rgba(255, 255, 255, .45);
  margin-left: .35rem;
}
.gate input, .gate select {
  font: inherit;
  width: 100%;
  min-width: 0;
  color: var(--paper);
  background: rgba(14, 10, 8, .5);
  border: 1px solid rgba(54, 180, 143, .5);
  border-radius: 10px;
  padding: .9rem 1rem;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.gate input::placeholder { color: rgba(243, 236, 221, .45); }
.gate select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2336B48F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 L6 7.5 L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 12px 12px;
}
.gate select.is-placeholder { color: rgba(243, 236, 221, .45); }
.gate select option { color: #1a1a1a; background: #fff; }
.gate input:focus, .gate select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(54, 180, 143, .18); }
.gate input.is-valid { border-color: rgba(140, 200, 140, .6); }
/* Phone reads as ONE control: the code select and the number share a
   border, split by a hairline; the focus ring lives on the container. */
.gate__phone {
  display: flex;
  background: rgba(14, 10, 8, .45);
  border: 1px solid rgba(54, 180, 143, .5);
  border-radius: 10px;
  transition: border-color .25s, box-shadow .25s;
}
.gate__phone:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(54, 180, 143, .18); }
.gate__phone select,
.gate__phone input {
  background: transparent;
  border: none;
  box-shadow: none;
}
.gate__phone select {
  flex: 0 0 auto;
  width: 7.2rem;
  border-radius: 10px 0 0 10px;
  border-right: 1px solid rgba(54, 180, 143, .4);
  padding-right: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2336B48F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 L6 7.5 L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 12px 12px;
}
.gate__phone select:focus, .gate__phone input:focus { border-color: transparent; box-shadow: none; }
.gate__phone select:focus { border-right-color: rgba(54, 180, 143, .4); }
.gate__phone input { flex: 1; min-width: 0; border-radius: 0 10px 10px 0; }
.gate__phone input.is-valid { border: none; }
/* Beats `.gate label` on specificity — row layout, sentence case */
.gate label.gate__consent {
  flex-direction: row;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1.6rem;
  padding: .9rem 1.1rem;
  font-size: .88rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(243, 236, 221, .92);
  cursor: pointer;
  background: rgba(14, 10, 8, .35);
  border: 1px solid rgba(54, 180, 143, .32);
  border-radius: 10px;
  transition: border-color .25s;
}
.gate label.gate__consent:hover { border-color: rgba(54, 180, 143, .45); }
.gate__consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: .1rem 0 0;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  background: rgba(14, 10, 8, .4);
  border: 1.5px solid rgba(54, 180, 143, .55);
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.gate__consent input::before {
  content: "";
  width: .7rem;
  height: .7rem;
  transform: scale(0);
  transition: transform .15s ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--ink);
}
.gate__consent input:checked { background: var(--gold); border-color: var(--gold); }
.gate__consent input:checked::before { transform: scale(1); }
.gate__consent input:focus-visible { box-shadow: 0 0 0 3px rgba(54, 180, 143, .25); }
.gate__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
}
.gate__submit {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  padding: .95rem 2.2rem;
  border: none;
  cursor: pointer;
}
.gate__submit:disabled {
  background: rgba(243, 236, 221, .14);
  color: rgba(243, 236, 221, .45);
  cursor: not-allowed;
}
.gate__submit:disabled:hover { transform: none; }
.gate__submit:not(:disabled) .gate__lock { display: none; }
.gate__hint { flex: 1; min-width: 220px; margin: 0; font-size: .78rem; color: rgba(243, 236, 221, .55); }
.gate__hint.is-success { color: #9fd6a4; }

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 2.4rem max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right))
           calc(2.4rem + env(safe-area-inset-bottom))
           max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left));
  background: #0a0705;
  border-top: 1px solid rgba(54, 180, 143, .18);
  font-size: .85rem;
  color: rgba(243, 236, 221, .7);
}
.footer__left { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.6rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__links a { text-decoration: none; color: rgba(243, 236, 221, .6); transition: color .25s; }
.footer__links a:hover { color: #36B48F; }
.footer__right { text-align: right; }
.footer__signoff { font-size: .78rem; color: rgba(243, 236, 221, .55); margin-bottom: .3rem; }
.footer__brand { font-family: var(--font-display); font-style: italic; color: #fff; }

/* ── Reveal defaults (JS animates in) ───────────────────────── */
/* Keep every opacity-animated text block on its own compositor layer —
   when the layer drops at opacity 1 the glyph anti-aliasing flips and
   the text visibly shimmers while scrolling. */
[data-reveal], [data-tile] { will-change: opacity; }
.city-scene .scene__inner, .city-scene .dev-strip { will-change: opacity; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Full 18px blur on a dozen glass cards is the #1 jank source
     on phone GPUs — halve it; the look survives. */
  :root { --glass-blur: blur(9px) saturate(1.25); }

  .nav__links {
    position: fixed;
    top: calc(var(--nav-h) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(13, 6, 15, .96);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(245, 249, 250, .1);
    padding: .5rem clamp(1rem, 4vw, 3rem) calc(1rem + env(safe-area-inset-bottom));
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  body.nav-open .nav__links {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__links a {
    display: block;
    padding: .9rem 0;
    font-size: .95rem;
    border-bottom: 1px solid rgba(243, 236, 221, .08);
  }
  .nav__links a:last-child { border-bottom: none; }
  .nav__burger { display: block; }
  .rail { display: none; }

  /* "21 Sep – 4 Oct 2026"-style stats must wrap on narrow screens */
  .stat strong { white-space: normal; }

  /* 3-up tiles don't fit below ~900px */
  .proof-grid { grid-auto-columns: minmax(240px, 46%); }

  /* Phones: the per-city art-direction columns collapse to full width —
     a 46vw column on a 390px screen is a 180px strip that clips the
     city titles and stacks every stat on its own row. */
  .city-scene--right .scene__inner, .city-scene--left .scene__inner {
    width: min(1100px, 90vw);
    margin-left: auto;
    margin-right: auto;
  }
  .city-scene--right .scene__title--big, .city-scene--left .scene__title--big { font-size: clamp(2.6rem, 6.5vw, 5rem); }
}
@media (max-width: 640px) {
  /* Narrow phones: brand + MOHUP note + REGISTER + burger overflow the
     nav bar and push the burger off-screen — tighten and drop the note. */
  .nav { gap: .8rem; }
  .nav__crest-note { display: none; }
  .nav__cta { padding: .5rem .9rem; font-size: .76rem; }

  .hero__content { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  /* Let the headline break to two lines rather than shrink to fit */
  .hero__title {
    font-size: clamp(2.6rem, 13vw, 4.4rem);
    line-height: .95;
    text-wrap: balance;
    margin-top: clamp(1.6rem, 5vh, 2.4rem);
  }
  .hero__sub { max-width: none; margin-bottom: 1.6rem; }
  /* Would sit on top of the bottom-anchored headline */
  .hero__scrollhint { display: none; }
  .hero__ctas .btn { flex: 1 1 100%; text-align: center; }
  .dev-strip { bottom: calc(.8rem + env(safe-area-inset-bottom)); }
  /* Phones: the city copy is taller than the screen, so it slid UNDER
     the strip pinned to the viewport bottom (Jabal's status line was
     hidden behind the glass). In flow, the strip closes the scene
     instead — margin: auto still seats it at the section's end. */
  .city-scene .dev-strip { position: static; }
  /* The eye caption ran flush into the screen edge at phone widths */
  .film-caption--moment { right: 2.5%; }
  .stat-row { gap: 1rem 1.8rem; }
  .proof-grid { grid-auto-columns: minmax(240px, 80vw); scroll-padding-left: 2px; }
  /* A card is ~80vw wide here, so any edge overlay covers card content.
     The peek of the next card is the scroll affordance — no dark bands. */
  .proof-railwrap::before, .proof-railwrap::after { display: none; }

  .gate { padding: 1.8rem 1.3rem; }
  .gate__fields { grid-template-columns: 1fr; gap: 1.4rem; }
  .gate__phone select { width: 7.2rem; }
  .scene__inner { width: min(1100px, 92vw); padding-bottom: 4rem; }
}

/* No hover state on touch — avoids the "sticky hover" tap glitch */
@media (hover: none) {
  .btn:hover, .proof-tile:hover, .ldn-card:hover { transform: none; }
}

/* Touch GPUs: live backdrop blur composited over a scrubbing video is
   the last big jank source — every glass surface forces a per-frame
   readback of the moving picture behind it. Swap the glass for a
   deeper plain fill (borders, highlights and shadows stay, so the
   card language survives); mouse machines keep the real blur. */
@media (pointer: coarse) {
  :root {
    --glass-blur: blur(12px) saturate(1.3);
    --glass-bg: linear-gradient(155deg, rgba(26, 19, 13, .38), rgba(26, 19, 13, .26) 55%, rgba(38, 28, 16, .30));
  }
  /* Without its blur the scrolled nav's 55% tint reads thin over
     bright frames — deepen the fill to carry legibility alone. */
  .nav.is-scrolled,
  body.nav-open .nav { background: rgba(13, 6, 15, .92); }

  /* Tall tablet viewports: space-between spread title / lead / tiles
     apart, floating the lead mid-globe. Keep title+lead as one block;
     only the tiles hold the bottom (the globe still reads between). */
  .opportunity .scene__inner { justify-content: flex-start; }
  .opportunity .proof-railwrap { margin-top: auto; }
  /* Same reason as the width media query: a card fills the viewport, so
     any edge fade reads as a dark band over content. */
  .proof-railwrap::before, .proof-railwrap::after { display: none; }
}

/* Landscape phones: same under-the-strip overlap as portrait — the
   copy fills the short viewport, so the strip must sit in flow. */
@media (pointer: coarse) and (max-height: 500px) {
  .city-scene .dev-strip { position: static; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__scrollhint, .hero__scrollhint-arrow { animation: none; }
}

/* ── City video story rail (bottom of each city scene) ──────── */
.city-stories {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(420px, 32vw);
  gap: clamp(20px, 2vw, 36px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scroll-snap-type: x proximity;
  padding: 0 clamp(24px, 4vw, 64px) 18px;
  margin-top: auto;
  position: relative;
  z-index: 3;
  pointer-events: auto;
  scrollbar-width: none;
}
.city-stories::-webkit-scrollbar { display: none; }
.city-stories.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.city-stories.is-dragging .story-card { transition: none; }
.story-card {
  scroll-snap-align: center;
  min-width: 0;
  opacity: 1;
  transform: none;
}
.story-card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.06);
  object-fit: cover;
  object-position: center;
  box-shadow: 0 14px 38px rgb(0 0 0 / 0.45);
}
/* Images fade in on first appearance instead of popping (JS adds the
   classes; without JS images stay visible). */
img.img-fade { opacity: 0; transition: opacity .9s ease; }
img.img-fade.is-shown { opacity: 1; }
.story-card__content { padding: 12px 4px 0; }
.story-card__content p {
  margin: 0 0 6px;
  color: rgb(255 255 255 / 0.92);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.story-card__content h3 {
  margin: 0;
  color: rgb(255 255 255 / 0.85);
  font-size: clamp(15px, 1.1vw, 19px);
  font-weight: 500;
  line-height: 1.35;
}
.story-card__content span {
  display: block;
  margin-top: 6px;
  color: rgb(255 255 255 / 0.55);
  font-size: 13px;
  line-height: 1.4;
}
@media (max-width: 860px) {
  .city-stories { grid-auto-columns: minmax(300px, 78vw); }
  .story-card { opacity: 1; transform: none; }
}

/* ── City of interest: custom multi-select ──────────────────── */
.gate__multi { position: relative; min-width: 0; }
.gate__multi-trigger {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  color: var(--paper);
  background: rgba(14, 10, 8, .5);
  border: 1px solid rgba(54, 180, 143, .5);
  border-radius: 10px;
  padding: .9rem 2.6rem .9rem 1rem;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2336B48F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 L6 7.5 L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 12px 12px;
}
.gate__multi-trigger:focus-visible,
.gate__multi.is-open .gate__multi-trigger { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(54, 180, 143, .18); }
.gate__multi-trigger.is-placeholder { color: rgba(243, 236, 221, .45); }
.gate__multi-value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate__multi-panel {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  z-index: 60;
  padding: .35rem;
  background: #2c0b13;
  border: 1px solid rgba(54, 180, 143, .5);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.gate__multi-panel[hidden] { display: none; }
.gate label.gate__multi-opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .7rem;
  padding: .55rem .6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .92rem;
  color: rgba(255, 255, 255, .9);
  transition: background .2s;
}
.gate label.gate__multi-opt:hover { background: rgba(54, 180, 143, .12); }
.gate__multi-opt input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  background: rgba(14, 10, 8, .4);
  border: 1.5px solid rgba(54, 180, 143, .55);
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.gate__multi-opt input::before {
  content: "";
  width: .62rem;
  height: .62rem;
  transform: scale(0);
  transition: transform .15s ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--ink);
}
.gate__multi-opt input:checked { background: var(--gold); border-color: var(--gold); }
.gate__multi-opt input:checked::before { transform: scale(1); }
.gate__multi-opt input:focus-visible { box-shadow: 0 0 0 3px rgba(54, 180, 143, .25); }


/* ── Livability ─────────────────────────────────────────────── */
.livability {
  background: none;
}
.liv-rail { grid-auto-columns: minmax(320px, 38%); }
.liv-tile {
  justify-content: flex-start;
  padding: 2rem 1.9rem;
  gap: .7rem;
}
.liv-tile__kicker {
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.liv-tile__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  color: #fff;
}
.liv-tile__standfirst {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}
.liv-tile__detail {
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .65);
}
@media (max-width: 640px) {
  .liv-rail { grid-auto-columns: minmax(240px, 80vw); }
  .liv-tile { padding: 1.6rem 1.4rem; }
}

/* ── Venue — Future Stores map (closing card) ─────────────── */
.venue {
  background: linear-gradient(180deg, var(--burgundy-deep) 0%, #0a0705 100%);
}
.venue__inner { max-width: 860px; }
.venue__map {
  margin: 1.4rem 0 1.6rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a0705;
}
.venue__map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  filter: invert(92%) hue-rotate(180deg) grayscale(.15) contrast(.9);
}
.venue__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
}
.venue__fineprint {
  font-size: .82rem;
  color: rgba(243, 236, 221, .6);
}
@media (max-width: 640px) {
  .venue__map iframe { height: 320px; }
  .venue__cta { flex-direction: column; align-items: flex-start; }
}

/* ── Fixed brand mark ───────────────────────────────────────── */
.brand-logo {
  position: fixed;
  top: 11px;
  left: 22px;
  height: 66px;
  width: auto;
  z-index: 200;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 640px) {
  .brand-logo { height: 46px; top: 13px; left: 16px; }
}

/* ── Brand palette override — Register + Venue sections only ── */
#register, #venue {
  --brand-purple: #5eb291;
  --brand-purple-soft: #82C8AC;
  --brand-green: #36B48F;
  --brand-off-white: #F5F9FA;
  --brand-ink: #150a19;
  --brand-ink-deep: #0d060f;
}
#register {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(94, 178, 145, .35), transparent 60%),
    linear-gradient(180deg, #10281f 0%, var(--brand-ink) 100%);
}
#venue {
  background: linear-gradient(180deg, var(--brand-ink) 0%, var(--brand-ink-deep) 100%);
}
#register .eyebrow, #venue .eyebrow { color: var(--brand-green); }

/* Form panel */
#register .gate {
  background: linear-gradient(155deg, rgba(130, 200, 172, .16), rgba(94, 178, 145, .07) 55%, rgba(94, 178, 145, .1));
  border-color: rgba(130, 200, 172, .32);
}
#register .gate input,
#register .gate select,
#register .gate__multi-trigger,
#register .gate__phone {
  background-color: rgba(21, 10, 25, .55);
  border-color: rgba(130, 200, 172, .5);
}
#register .gate label.gate__consent {
  background: rgba(21, 10, 25, .4);
  border-color: rgba(130, 200, 172, .34);
}
#register .gate label.gate__consent:hover { border-color: rgba(130, 200, 172, .5); }
#register .gate input:focus,
#register .gate select:focus,
#register .gate__phone:focus-within,
#register .gate__multi-trigger:focus-visible,
#register .gate__multi.is-open .gate__multi-trigger {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(54, 180, 143, .2);
}
#register .gate__phone select { border-right-color: rgba(130, 200, 172, .4); }
#register .gate__phone select:focus { border-right-color: rgba(130, 200, 172, .4); }
#register .gate input.is-valid { border-color: rgba(54, 180, 143, .6); }
#register .gate__consent input,
#register .gate__multi-opt input {
  background: rgba(21, 10, 25, .45);
  border-color: rgba(130, 200, 172, .55);
}
#register .gate__consent input:checked,
#register .gate__multi-opt input:checked {
  background: var(--brand-green);
  border-color: var(--brand-green);
}
#register .gate__consent input:checked::before,
#register .gate__multi-opt input:checked::before { background: var(--brand-ink-deep); }
#register .gate__consent input:focus-visible,
#register .gate__multi-opt input:focus-visible { box-shadow: 0 0 0 3px rgba(54, 180, 143, .28); }
#register .gate__multi-panel {
  background: #0e231b;
  border-color: rgba(130, 200, 172, .5);
}
#register .gate label.gate__multi-opt:hover { background: rgba(130, 200, 172, .18); }
#register .gate__hint.is-success { color: var(--brand-green); }

/* Buttons */
#register .gate__submit:not(:disabled),
#venue .btn--solid {
  background: transparent;
  border: 1px solid rgba(245, 249, 250, .85);
  color: var(--brand-green);
}
#register .gate__submit:not(:disabled):hover,
#venue .btn--solid:hover { background: var(--brand-green); border-color: var(--brand-green); color: var(--brand-ink-deep); }
#register .gate__submit:disabled {
  background: rgba(245, 249, 250, .12);
  color: rgba(245, 249, 250, .42);
}

/* Venue */
#venue .venue__map { border-color: rgba(130, 200, 172, .3); background: var(--brand-ink-deep); }
#register .gate select,
#register .gate__multi-trigger {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2382C8AC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 L6 7.5 L9 4.5'/%3E%3C/svg%3E");
}