/* ============================================================
   Nalandhoo — base styles
   Palette: ocean #0B2E40 · lagoon #2D6E7E · sand #C9B68A
            cream #F4EDE0 · gold #B8965E · charcoal #1A1A1A
   ============================================================ */

:root {
  --ocean: #0B2E40;
  --ocean-deep: #04111B;
  --lagoon: #2D6E7E;
  --lagoon-pale: #A8C9C5;
  --sand: #C9B68A;
  --cream: #F4EDE0;
  --gold: #B8965E;
  --charcoal: #1A1A1A;
  --muted: #5C5648;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease-emerge: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-tide: cubic-bezier(0.45, 0.05, 0.20, 0.95);

  --nav-h: 72px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }

/* ============================================================
   Site nav — sits over the hero, becomes solid on scroll
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  z-index: 100;
  transition: background-color 400ms var(--ease-emerge),
              backdrop-filter 400ms var(--ease-emerge),
              border-color 400ms var(--ease-emerge);
  border-bottom: 0.5px solid transparent;
}

.site-nav.is-scrolled {
  background: rgba(11, 46, 64, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: rgba(244, 237, 224, 0.08);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 500ms var(--ease-emerge), transform 500ms var(--ease-emerge);
}

.site-nav.is-scrolled .site-nav__brand {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-nav__mark {
  width: 28px;
  height: 36px;
}

.site-nav__wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--cream);
  text-transform: uppercase;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
}

.site-nav__links a {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 200ms var(--ease-emerge);
}

.site-nav__links a:hover { opacity: 1; }

.site-nav__cta {
  border: 0.5px solid var(--sand);
  padding: 10px 18px;
  color: var(--sand) !important;
  opacity: 1 !important;
  transition: background-color 200ms, color 200ms;
}

.site-nav__cta:hover {
  background: var(--sand);
  color: var(--ocean) !important;
}

@media (max-width: 680px) {
  .site-nav__links a:not(.site-nav__cta) { display: none; }
  .site-nav__wordmark { font-size: 18px; letter-spacing: 0.14em; }
}

/* ============================================================
   Hero — full-bleed video + emerging title + scroll-bound overlay
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--ocean-deep);
  color: var(--cream);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 1200ms var(--ease-tide);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(11, 46, 64, 0.55) 0%,
      rgba(11, 46, 64, 0.30) 30%,
      rgba(11, 46, 64, 0.30) 70%,
      rgba(11, 46, 64, 0.65) 100%),
    radial-gradient(ellipse at 70% 50%,
      rgba(11, 46, 64, 0.0) 0%,
      rgba(11, 46, 64, 0.45) 80%);
  pointer-events: none;
}

/* Splice mask — a black layer that pulses briefly across the seam in
   the source video (slow-mo → normal speed transition at ≈ 14.6s on a
   40.5s loop). Animation timed exactly to the video's 40.5s loop so
   the darkening happens at the same instant every cycle. */
.hero__splice-mask {
  position: absolute;
  inset: 0;
  background: rgba(4, 20, 28, 1);
  pointer-events: none;
  opacity: 0;
  animation: heroSpliceMask 40.5s linear infinite;
  /* Sync the mask to start at the same time the video starts.
     Both video.autoplay + animation start on first paint, so they're
     in lockstep. If they drift on long sessions, JS in hero.js can
     re-sync via animation-delay. */
}

@keyframes heroSpliceMask {
  /*  0% → 35.4%   = 0s  → 14.34s  : video runs slow-mo, mask invisible */
  /*  35.4% → 36.5% = 14.34s → 14.78s : mask fades IN to 90% (180ms)   */
  /*  36.5% → 37.0% = 14.78s → 14.98s : mask holds (200ms — covers the seam) */
  /*  37.0% → 38.0% = 14.98s → 15.39s : mask fades OUT (400ms)        */
  /*  38.0% → 100%  = 15.39s → 40.5s  : video runs normal, mask invisible */
  0%      { opacity: 0; }
  35.4%   { opacity: 0; }
  36.5%   { opacity: 0.9; }
  37.0%   { opacity: 0.9; }
  38.0%   { opacity: 0; }
  100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__splice-mask { animation: none; }
}

/* Brand mark overlay — registered to the right side of the hero.
   Outer holds position + JS-driven scroll fade.
   Inner runs the emergence animation untouched by JS. */
.hero__overlay-mark {
  position: absolute;
  top: 50%;
  right: clamp(40px, 7vw, 100px);
  transform: translate3d(0, -50%, 0);
  width: clamp(220px, 28vw, 380px);
  height: auto;
  z-index: 3;
  pointer-events: none;
}

.hero__overlay-mark-inner {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(8px);
  animation: emergeMark 2000ms 600ms var(--ease-emerge) forwards;
  will-change: opacity, transform, filter;
}

.hero__overlay-mark svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(0,0,0,0.25));
}

.overlay-mark__reef {
  fill: none;
  stroke: var(--cream);
  stroke-width: 0.6;
  opacity: 0.9;
  vector-effect: non-scaling-stroke;
}

.overlay-mark__land {
  fill: rgba(11, 46, 64, 0.7);
  stroke: var(--cream);
  stroke-width: 0.4;
  opacity: 0.95;
  vector-effect: non-scaling-stroke;
}

@keyframes emergeMark {
  0%   { opacity: 0; transform: scale(0.94); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1);    filter: blur(0); }
}

/* Title — left-aligned, stacked. The OUTER element holds scroll-bound transform
   (driven by JS). The INNER element runs the emergence animation. This decouples
   the two concerns so the JS scroll updates don't fight the CSS animation. */
.hero__title {
  position: absolute;
  left: clamp(24px, 6vw, 72px);
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 4;
  max-width: 56vw;
  /* Scroll-bound opacity is applied here by JS */
}

.hero__title-inner {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(8px);
  animation: emergeBreath 2000ms 500ms var(--ease-emerge) forwards;
  will-change: opacity, transform, filter;
}

.hero__title-line { line-height: 1; }
.hero__title-line span { display: inline-block; }

.hero__title-line--1 span {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 130px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cream);
}
.hero__title-line--1 { margin-bottom: 12px; }

.hero__title-line--2 span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 36px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--cream);
}
.hero__title-line--2 { margin-bottom: 6px; }

.hero__title-line--3 span {
  font-family: var(--font-sans);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sand);
}

/* Single smooth emergence — like a held breath releasing. No overshoot,
   no flicker. Each property has values at every keyframe so interpolation
   is stable. */
@keyframes emergeBreath {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    filter: blur(8px);
  }
  60% {
    opacity: 0.9;
    transform: translateY(4px) scale(0.997);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Survey mark — bottom-left GPS coordinates.
   Same outer/inner split: outer for JS scroll fade, inner for animation. */
.hero__survey {
  position: absolute;
  left: clamp(24px, 6vw, 72px);
  bottom: clamp(28px, 6vh, 56px);
  z-index: 5;
}

.hero__survey-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(12px);
  animation: emergeText 1400ms 1500ms var(--ease-emerge) forwards;
  will-change: opacity, transform;
}

.hero__survey-inner::before {
  content: "";
  display: block;
  width: 32px;
  height: 0.5px;
  background: var(--gold);
  margin-bottom: 6px;
}

.hero__survey-label {
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.6);
}

.hero__survey-coords {
  font-family: var(--font-sans);
  font-feature-settings: "tnum";
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--sand);
  font-weight: 400;
}

/* Scroll cue — bottom-right */
.hero__scroll-cue {
  position: absolute;
  right: clamp(24px, 6vw, 72px);
  bottom: clamp(28px, 6vh, 56px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: emergeText 1400ms 2000ms var(--ease-emerge) forwards;
}

/* ============================================================
   Hero — site particulars (Land / Lagoon / Total)
   Three stats centred along the bottom; JS cycles units Ha→m²→ft².
   ============================================================ */
.hero__particulars {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 7vh, 80px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: stretch;
  gap: 0;
  opacity: 0;
  animation: emergeText 1400ms 2400ms var(--ease-emerge) forwards;
  pointer-events: none;
}

.hero__particular {
  padding: 0 clamp(28px, 4vw, 56px);
  border-left: 0.5px solid rgba(244, 237, 224, 0.18);
  text-align: center;
  min-width: 200px;
}

.hero__particular:first-child { border-left: none; }

.hero__particular-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.55);
  margin-bottom: 14px;
}

.hero__particular-value {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--cream);
  line-height: 1;
}

.hero__particular-num {
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transition: opacity 300ms var(--ease-emerge);
}

.hero__particular-unit {
  font-size: clamp(14px, 1.4vw, 18px);
  font-style: normal;
  font-family: var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--gold);
  transition: opacity 300ms var(--ease-emerge);
  align-self: baseline;
}

.hero__particular-num.is-fading,
.hero__particular-unit.is-fading { opacity: 0; }

@media (max-width: 900px) {
  .hero__particulars {
    flex-direction: column;
    gap: 14px;
    bottom: clamp(72px, 10vh, 100px);
  }
  .hero__particular {
    border-left: none;
    border-top: 0.5px solid rgba(244, 237, 224, 0.18);
    padding: 12px 0;
    min-width: 0;
  }
  .hero__particular:first-child { border-top: none; padding-top: 0; }
}

@media (max-width: 540px) {
  .hero__particulars { display: none; }
}

.hero__scroll-cue span {
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.55);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hero__scroll-line {
  width: 0.5px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--sand) 30%, var(--sand) 70%, transparent);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, transparent, var(--cream));
  animation: scrollPulse 2400ms infinite var(--ease-tide);
}

@keyframes emergeText {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%   { top: -50%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Smaller screens — collapse the overlay mark + tighten title */
@media (max-width: 900px) {
  .hero__overlay-mark {
    width: clamp(160px, 32vw, 220px);
    right: clamp(20px, 4vw, 40px);
  }
  .hero__overlay-mark-inner { opacity: 0.55; }
  .hero__title