/* =================================================================
   TORO WILDLANDS — first local draft
   Cinematic Florida conservation experience.
   Atmosphere first. Motion second. Information third.
   ================================================================= */

/* ─── Reset / base ─────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #050709;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Body weight 400 (not 300) so any inherited sans-serif text is
     legible for older readers. Display headlines set their own weight. */
  font-weight: 400;
  line-height: 1.6;
  color: var(--paper);
  background: var(--bg-night);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.4s ease, color 0.4s ease;
}

a:hover {
  opacity: 0.65;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}


/* ─── Design tokens ────────────────────────────────────────────── */

:root {
  /* Pre-dawn / hero sky */
  --bg-night:        #07090c;
  --bg-deep:         #0c1419;
  --dawn-1:          #1a2434;
  --dawn-2:          #3d3540;
  --dawn-3:          #8c5d48;
  --dawn-4:          #d49775;
  --dawn-5:          #f2cea3;

  /* Everglades / land */
  --everglades-deep: #0a1812;
  --everglades:      #15281f;
  --everglades-mid:  #1f3a2c;
  --everglades-soft: #2d4838;

  /* Water */
  --water-dark:      #050d0a;
  --water-glint:     rgba(214, 224, 208, 0.10);

  /* Mist */
  --mist:            rgba(218, 224, 212, 0.32);
  --mist-warm:       rgba(232, 198, 166, 0.20);

  /* Panther — deepest tone */
  --panther:         #050403;

  /* Gulf / ocean */
  --gulf-deep:       #0e2128;
  --gulf:            #20424c;
  --gulf-light:      #4a6f7a;
  --gulf-pale:       #8aaab1;

  /* Warm / light surfaces */
  --paper:           #f3ecdf;
  --paper-dim:       #c8bea8;
  --paper-muted:     #8c8472;
  --sand:            #d4c5a9;
  /* Darkened from #b89b78 to a deep warm earth tone so eyebrows and
     tags on light (warm-paper) sections meet WCAG AA contrast. Icon
     uses on dark bg are explicitly switched to --sand below. */
  --sand-warm:       #6b5232;

  /* Ink (on light) */
  --ink:             #15170f;
  --ink-soft:        #3f4136;
  --ink-muted:       #6b6c5e;

  /* Type */
  --serif:           "Cormorant Garamond", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --sans:            "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --container:       min(1280px, 92vw);
  --container-narrow: min(820px, 88vw);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:       cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── Typography primitives ────────────────────────────────────── */

.display {
  font-family: var(--serif);
  /* 400 (regular) — 300 was hard to read at typical viewing distance,
     especially for older readers. Cormorant 400 still reads elegant. */
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 22ch;
}

.display em {
  font-style: italic;
  color: var(--ink-soft);
}

.display--light {
  color: var(--paper);
}

.display--light em {
  color: var(--paper-dim);
}

.lede {
  font-family: var(--serif);
  /* 500 (medium) for legibility over busy bg-videos. Size floor 1.18rem
     keeps it readable on mobile in bright outdoor environments;
     line-height eased to 1.65 for long-form comfort. */
  font-weight: 500;
  font-size: clamp(1.18rem, 1.45vw, 1.4rem);
  line-height: 1.65;
  color: var(--ink);
  max-width: 58ch;
  margin-top: 1.8rem;
}

.lede--light {
  color: var(--paper);
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  /* Bumped from 0.72rem to 0.82rem so small caps are legible for
     older readers. Letter-spacing eased slightly to compensate. */
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand-warm);
  margin-bottom: 1.6rem;
}

.eyebrow--light {
  color: var(--sand);
}

.bullets {
  margin-top: 2rem;
  list-style: none;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--ink);
}

.bullets li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 1.05rem;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6rem;
  height: 1px;
  background: var(--sand-warm);
}


/* ─── Navigation ───────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem clamp(1.5rem, 4vw, 3rem);
  color: var(--paper);
  transition: background 0.6s var(--ease-soft), backdrop-filter 0.6s var(--ease-soft),
              padding 0.6s var(--ease-soft), border-color 0.6s var(--ease-soft);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(7, 10, 12, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
  border-bottom-color: rgba(243, 236, 223, 0.08);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--paper);
}

.nav__brand-mark {
  display: inline-flex;
  /* Bright on dark hero bg — uses --sand instead of the now-darker
     --sand-warm so the brand mark stays visible. */
  color: var(--sand);
  transition: transform 1s var(--ease-out);
}

.nav__brand:hover .nav__brand-mark {
  transform: rotate(-12deg);
}

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  font-family: var(--sans);
  /* Bumped to 0.86rem / weight 500 so the nav reads clearly without
     looking heavy. Color also bumped from paper-dim to paper for
     better contrast against the dark hero. */
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}

.nav__right {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

/* The audio toggle matches the CTA pill's height, padding rhythm and type
   metrics exactly — same font-size, same letter-spacing, same border weight
   — so the two buttons read as a paired set in the nav, not as a stray
   icon next to the CTA. */
.nav__audio {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(243, 236, 223, 0.32);
  color: var(--paper-dim);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s var(--ease-soft),
              border-color 0.4s var(--ease-soft),
              color 0.4s var(--ease-soft);
}

.nav__audio:hover {
  background: rgba(243, 236, 223, 0.06);
  border-color: rgba(243, 236, 223, 0.55);
  color: var(--paper);
}

.nav__audio[aria-pressed="true"] {
  border-color: rgba(232, 168, 124, 0.7);
  color: var(--sand);
  background: rgba(232, 168, 124, 0.08);
}

.nav__audio[aria-pressed="true"]:hover {
  background: rgba(232, 168, 124, 0.14);
  border-color: rgba(232, 168, 124, 0.9);
}

.nav__audio-icon {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
  /* Optical alignment with the cap-height of the label text */
  margin-top: -1px;
}

.nav__audio-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.3s var(--ease-soft);
}

.nav__audio-label {
  display: inline-block;
  /* Pull the right edge in slightly so trailing letter-spacing doesn't
     visually push the button wider than the CTA */
  margin-right: -0.22em;
}

/* Off state: show muted icon (with slash through wave) */
.nav__audio[aria-pressed="false"] .nav__audio-icon-off {
  opacity: 1;
}
.nav__audio[aria-pressed="false"] .nav__audio-icon-on {
  opacity: 0;
}

/* On state: show active wave icon */
.nav__audio[aria-pressed="true"] .nav__audio-icon-on {
  opacity: 1;
}
.nav__audio[aria-pressed="true"] .nav__audio-icon-off {
  opacity: 0;
}

@media (max-width: 600px) {
  .nav__audio-label {
    display: none;
  }
  .nav__audio {
    padding: 0.55rem;
  }
}

.nav__cta {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 0.7rem 1.3rem;
  border: 1px solid rgba(243, 236, 223, 0.32);
  border-radius: 999px;
  transition: background 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft);
}

.nav__cta:hover {
  background: rgba(243, 236, 223, 0.08);
  border-color: rgba(243, 236, 223, 0.6);
  opacity: 1;
}

@media (max-width: 880px) {
  .nav__links {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HERO — Florida panther, Fakahatchee Strand, first light
   Real photograph + cinematic overlay stack.
   ═══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  max-height: 1100px;
  overflow: hidden;
  isolation: isolate;
  background: #06090a;
}

/* — LAYER 1 — Distant living environment, deep behind the panther —
   When the Sora panther clip is installed, this becomes a subtle halo
   behind it. Kept dim so it doesn't compete with the main subject. */
.hero__env {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.28;
  filter: brightness(0.40) contrast(1.05) saturate(0.6) hue-rotate(-8deg) blur(4px);
  pointer-events: none;
  transform: scale(1.06);
  animation: heroEnvDrift 60s ease-in-out infinite alternate;
}

@keyframes heroEnvDrift {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.10) translate3d(-1.5%, -1%, 0); }
}

/* — LAYER 2 — The panther photograph — sacred still subject — */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* The Sora panther covers the entire hero. Two identical videos are
   layered inside .hero__photo, offset by half their duration, with JS
   crossfading between them so the 11s loop seam is never visible.
   Both inherit the same light cinematic finish so the crossfade is
   purely opacity — no visible difference between A and B. */
.hero__photo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.92) contrast(1.05) saturate(1.02);
  z-index: 2;
  /* A breath-slow zoom for living cinematic presence on a looped clip. */
  transform-origin: center center;
  animation: heroPantherBreath 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
  transition: opacity 1.4s linear;
}

@keyframes heroPantherBreath {
  0%   { transform: scale(1.00); }
  100% { transform: scale(1.045); }
}

@media (max-width: 700px) {
  .hero__photo-video {
    object-position: 38% center;
  }
}

/* Crossfade pair: B starts hidden, swaps with A around loop boundaries.
   The 1.4s opacity transition fully covers the loop seam. */
.hero__photo[data-loop-pair] .hero__photo-video[data-pair-role="b"] {
  opacity: 0;
}
.hero__photo[data-loop-pair].is-fading .hero__photo-video[data-pair-role="a"] {
  opacity: 0;
}
.hero__photo[data-loop-pair].is-fading .hero__photo-video[data-pair-role="b"] {
  opacity: 1;
}

/* ── Generic dual-video pair wrapper for any section bg-video.
   Mirrors the positioning of .section__bg-video so existing
   section-specific classes (.section--mission__bg etc.) still attach
   their filter/opacity to this wrapper. The inner videos fill the
   wrapper and crossfade against each other. */
.section__bg-pair {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.section__bg-pair__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 1.4s linear;
  will-change: opacity;
}

.section__bg-pair .section__bg-pair__video[data-pair-role="b"] {
  opacity: 0;
}
.section__bg-pair.is-fading .section__bg-pair__video[data-pair-role="a"] {
  opacity: 0;
}
.section__bg-pair.is-fading .section__bg-pair__video[data-pair-role="b"] {
  opacity: 1;
}

.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
  /* Cinematic base grade applied directly to the photo */
  filter: brightness(0.62) contrast(1.18) saturate(0.92);
  transform-origin: 62% 55%;
  animation: heroKenBurns 34s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 1;
  /* Soft top-feather so the photo doesn't read as a hard rectangle against
     the distant env video below (which peeks through the dark text-veil). */
  mask-image:
    linear-gradient(to bottom,
                    transparent 0%,
                    rgba(0, 0, 0, 0.55) 8%,
                    #000 18%,
                    #000 100%);
  -webkit-mask-image:
    linear-gradient(to bottom,
                    transparent 0%,
                    rgba(0, 0, 0, 0.55) 8%,
                    #000 18%,
                    #000 100%);
}

/* Expanded ken-burns + a faint handheld tilt so the panther feels filmed,
   not photographed. Tiny rotation values (<= 0.12deg) read as camera presence,
   not as a tilted image. */
@keyframes heroKenBurns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0) rotate(0.05deg); }
  20%  { transform: scale(1.07) translate3d(-0.35%, -0.18%, 0) rotate(-0.04deg); }
  40%  { transform: scale(1.10) translate3d(-0.75%, -0.45%, 0) rotate(0.09deg); }
  60%  { transform: scale(1.13) translate3d(-1.1%, -0.72%, 0) rotate(-0.03deg); }
  80%  { transform: scale(1.15) translate3d(-1.45%, -0.95%, 0) rotate(0.07deg); }
  100% { transform: scale(1.18) translate3d(-1.85%, -1.25%, 0) rotate(-0.02deg); }
}

@media (max-width: 700px) {
  .hero__photo img {
    object-position: 60% 60%;
  }
}

/* — LAYER 3 — Drifting mist video, screen-blended onto the photograph — */
.hero__atmos {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  opacity: 0.58;
  mix-blend-mode: screen;
  filter: blur(2px) brightness(1.05) contrast(1.1);
  pointer-events: none;
  will-change: opacity, transform;
  animation: atmosFadeIn 6s var(--ease-out) 0.4s both;
}

@keyframes atmosFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 0.58; }
}

/* — LAYER 4 — Birds gliding in the sky band at top of frame — */
.hero__birds-video {
  position: absolute;
  top: -4%;
  left: -10%;
  right: -10%;
  width: 120%;
  height: 38%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  opacity: 0.65;
  mix-blend-mode: screen;
  filter: blur(0.5px) brightness(0.95) contrast(1.12);
  -webkit-mask-image:
    linear-gradient(to bottom,
                    #000 30%,
                    rgba(0, 0, 0, 0.6) 55%,
                    transparent 80%);
  mask-image:
    linear-gradient(to bottom,
                    #000 30%,
                    rgba(0, 0, 0, 0.6) 55%,
                    transparent 80%);
  pointer-events: none;
  animation: heroBirdsFade 9s var(--ease-out) 1.2s both;
}

@keyframes heroBirdsFade {
  0%   { opacity: 0; }
  100% { opacity: 0.65; }
}

/* — LAYER 5 — Sawgrass moving in the foreground band at bottom — */
.hero__grass-video {
  position: absolute;
  bottom: -2%;
  left: -8%;
  right: -8%;
  width: 116%;
  height: 38%;
  object-fit: cover;
  object-position: center 70%;
  z-index: 7;
  opacity: 0.78;
  mix-blend-mode: multiply;
  filter: brightness(0.62) contrast(1.08) saturate(0.92);
  -webkit-mask-image:
    linear-gradient(to top,
                    #000 20%,
                    rgba(0, 0, 0, 0.65) 50%,
                    transparent 88%);
  mask-image:
    linear-gradient(to top,
                    #000 20%,
                    rgba(0, 0, 0, 0.65) 50%,
                    transparent 88%);
  pointer-events: none;
  animation: heroGrassFade 9s var(--ease-out) 1.6s both;
}

@keyframes heroGrassFade {
  0%   { opacity: 0; }
  100% { opacity: 0.78; }
}

/* — LAYER 6 — Alligator partial reflection in foreground water — */
.hero__gator-video {
  position: absolute;
  bottom: 6%;
  right: -4%;
  width: 48%;
  height: 22%;
  object-fit: cover;
  object-position: center 60%;
  z-index: 7;
  opacity: 0.55;
  mix-blend-mode: multiply;
  filter: brightness(0.72) contrast(1.18) saturate(0.78) blur(1px);
  -webkit-mask-image:
    radial-gradient(ellipse 80% 100% at 70% 60%,
                    #000 20%,
                    rgba(0, 0, 0, 0.5) 55%,
                    transparent 90%);
  mask-image:
    radial-gradient(ellipse 80% 100% at 70% 60%,
                    #000 20%,
                    rgba(0, 0, 0, 0.5) 55%,
                    transparent 90%);
  border-radius: 12px;
  pointer-events: none;
  animation: heroBirdsFade 9s var(--ease-out) 2.4s both;
}

@media (max-width: 700px) {
  .hero__gator-video {
    width: 70%;
    height: 14%;
    bottom: 12%;
    right: -8%;
  }
}

/* — LAYER 8 — Sun rays / lens flare across the top — */
.hero__rays-video {
  position: absolute;
  top: -8%;
  left: -8%;
  right: -8%;
  width: 116%;
  height: 70%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 5;
  opacity: 0.48;
  mix-blend-mode: screen;
  filter: blur(1.5px) brightness(1.15) contrast(1.05) saturate(0.9);
  -webkit-mask-image:
    radial-gradient(ellipse 85% 60% at 70% 35%,
                    #000 5%,
                    rgba(0, 0, 0, 0.5) 45%,
                    transparent 80%);
  mask-image:
    radial-gradient(ellipse 85% 60% at 70% 35%,
                    #000 5%,
                    rgba(0, 0, 0, 0.5) 45%,
                    transparent 80%);
  pointer-events: none;
  animation: heroBirdsFade 12s var(--ease-out) 3.2s both;
}

/* — LAYER 9 — Depth-of-field foreground blur (near) — */
.hero__dof-near {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 25% at 18% 92%,
                    rgba(8, 14, 12, 0.55) 0%,
                    rgba(8, 14, 12, 0.0) 60%),
    radial-gradient(ellipse 35% 22% at 88% 95%,
                    rgba(8, 14, 12, 0.45) 0%,
                    rgba(8, 14, 12, 0.0) 60%);
  filter: blur(2px);
}

.hero__dof-far {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 30% at 50% 5%,
                    rgba(20, 30, 40, 0.45) 0%,
                    rgba(20, 30, 40, 0.0) 60%);
  filter: blur(4px);
}

/* — Subtle lens flare on the top-right (where the sun would be) — */
.hero__lens-flare {
  position: absolute;
  top: 12%;
  right: 18%;
  width: 320px;
  height: 320px;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(circle,
                    rgba(255, 220, 170, 0.32) 0%,
                    rgba(255, 200, 140, 0.18) 14%,
                    rgba(255, 180, 110, 0.06) 30%,
                    transparent 60%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: heroLensFlare 14s ease-in-out infinite alternate;
}

@keyframes heroLensFlare {
  0%   { opacity: 0.55; transform: translate(0, 0) scale(0.95); }
  100% { opacity: 0.85; transform: translate(-6px, 4px) scale(1.05); }
}

@media (max-width: 700px) {
  .hero__lens-flare {
    width: 220px;
    height: 220px;
    right: 8%;
    top: 16%;
  }
}

/* — Color grade pass 1 — light pre-dawn cool, very subtle.
   The Sora clip is already cinematically graded, so we just nudge. — */
.hero__grade--cool {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg,
                    rgba(18, 30, 42, 0.28) 0%,
                    rgba(22, 36, 44, 0.18) 30%,
                    rgba(28, 38, 36, 0.10) 55%,
                    rgba(20, 28, 24, 0.20) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* — Color grade pass 2 — warm dawn light kissing the lower right — */
.hero__grade--warm {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(ellipse 70% 60% at 70% 75%,
                    rgba(232, 168, 110, 0.22) 0%,
                    rgba(196, 130, 84, 0.10) 30%,
                    transparent 65%),
    radial-gradient(ellipse 40% 30% at 30% 90%,
                    rgba(168, 100, 72, 0.12) 0%,
                    transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: heroGradeBreathe 22s ease-in-out infinite alternate;
}

@keyframes heroGradeBreathe {
  0%   { opacity: 0.85; }
  100% { opacity: 1.0; }
}

/* — Color grade pass 3 — soft golden glow specular — */
.hero__grade--glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(ellipse 50% 40% at 75% 30%,
                    rgba(255, 220, 170, 0.22) 0%,
                    rgba(232, 168, 124, 0.10) 40%,
                    transparent 70%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* — Top text veil: darkens the upper portion so the wordmark reads cleanly — */
.hero__text-veil {
  position: absolute;
  inset: 0;
  z-index: 6;
  background:
    linear-gradient(180deg,
                    rgba(6, 9, 10, 0.85) 0%,
                    rgba(6, 9, 10, 0.55) 22%,
                    rgba(6, 9, 10, 0.18) 42%,
                    rgba(6, 9, 10, 0.0)  58%,
                    rgba(6, 9, 10, 0.0)  78%,
                    rgba(6, 9, 10, 0.55) 100%);
  pointer-events: none;
}

/* — Foot fog — a soft drifting fog band low in the frame — */
.hero__foot-fog {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 24%;
  z-index: 7;
  background:
    radial-gradient(ellipse 55% 80% at 25% 70%,
                    rgba(214, 218, 208, 0.18) 0%,
                    rgba(214, 218, 208, 0.06) 35%,
                    transparent 65%),
    radial-gradient(ellipse 60% 80% at 75% 60%,
                    rgba(232, 210, 190, 0.14) 0%,
                    rgba(232, 210, 190, 0.04) 35%,
                    transparent 65%);
  filter: blur(34px);
  opacity: 0.55;
  pointer-events: none;
  animation: heroFootFog 28s ease-in-out infinite alternate;
  will-change: transform;
}

/* — Horizon haze — opens the river-of-grass feel —
   The Sora clip has dense sawgrass clumps in the mid-back of the frame
   that can read as a tree line and close in the scene. Two localized
   fog pools sit over the back-left and back-right reed densities,
   blended toward white at screen mode so the vegetation recedes into
   atmospheric mist. A clear corridor through the center of the frame
   preserves the panther — she stays sharp; the marsh behind her opens. */
.hero__horizon-haze {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    /* Back-left reed haze */
    radial-gradient(ellipse 38% 28% at 14% 36%,
                    rgba(232, 228, 216, 0.72) 0%,
                    rgba(232, 228, 216, 0.42) 35%,
                    rgba(232, 228, 216, 0.18) 60%,
                    transparent 90%),
    /* Back-right reed haze (matches the tallest reed cluster in the clip) */
    radial-gradient(ellipse 42% 30% at 86% 38%,
                    rgba(232, 228, 216, 0.78) 0%,
                    rgba(232, 228, 216, 0.46) 35%,
                    rgba(232, 228, 216, 0.20) 60%,
                    transparent 90%),
    /* Distant horizon wash — softens the sky-to-reed transition without
       touching the panther's clear center zone */
    radial-gradient(ellipse 80% 16% at 50% 30%,
                    rgba(238, 232, 218, 0.32) 0%,
                    rgba(238, 232, 218, 0.16) 50%,
                    transparent 90%);
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: 1;
  animation: heroHorizonHaze 36s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes heroHorizonHaze {
  0%   { transform: translate3d(-1.2%, 0, 0); opacity: 0.85; }
  100% { transform: translate3d(1.2%, -0.4%, 0); opacity: 1.0; }
}

/* On portrait mobile the Sora clip is cropped tighter — the reed band
   shifts toward the right edge with the panther on the left, so the
   haze pools move with it. */
@media (max-width: 700px) {
  .hero__horizon-haze {
    background:
      radial-gradient(ellipse 50% 30% at 100% 32%,
                      rgba(232, 228, 216, 0.78) 0%,
                      rgba(232, 228, 216, 0.40) 40%,
                      transparent 85%),
      radial-gradient(ellipse 60% 18% at 50% 28%,
                      rgba(238, 232, 218, 0.32) 0%,
                      rgba(238, 232, 218, 0.14) 55%,
                      transparent 92%);
    filter: blur(16px);
  }
}

@keyframes heroFootFog {
  0%   { transform: translateX(-3%) translateY(0); opacity: 0.55; }
  100% { transform: translateX(3%) translateY(-6px); opacity: 0.85; }
}

/* — Vignette — heavy edge falloff focuses the eye centrally — */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 80% at 55% 55%,
                    transparent 38%,
                    rgba(4, 6, 8, 0.42) 72%,
                    rgba(4, 6, 8, 0.85) 100%);
}

/* — Film grain — true cinematic celluloid — */
.hero__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  animation: heroGrainShift 0.4s steps(3) infinite;
}

@keyframes heroGrainShift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-1%, 1%); }
  66%  { transform: translate(1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* — Hero copy — */
.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 18%;
  z-index: 20;
  text-align: center;
  padding: 0 1.5rem;
}

.hero__eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--sand);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85),
               0 0 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px);
  animation: heroFadeUp 2.2s var(--ease-out) 1.4s forwards;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 8.5vw, 8rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--paper);
  margin-top: 1.4rem;
  text-shadow:
    0 2px 40px rgba(0, 0, 0, 0.6),
    0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero__title-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
}

.hero__title-word:nth-child(1) {
  animation: heroTitleWord 2.6s var(--ease-out) 2.0s forwards;
  margin-right: 0.35em;
}

.hero__title-word:nth-child(2) {
  animation: heroTitleWord 2.6s var(--ease-out) 2.5s forwards;
}

@keyframes heroTitleWord {
  0%   { opacity: 0; transform: translateY(20px); filter: blur(8px); letter-spacing: 0.16em; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: 0.02em; }
}

.hero__subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  letter-spacing: 0.04em;
  color: var(--paper);
  margin-top: 1.6rem;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.85),
               0 0 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(10px);
  animation: heroFadeUp 2.6s var(--ease-out) 4.4s forwards;
}

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

/* — Scroll hint — */
.hero__scrollhint {
  position: absolute;
  left: 50%;
  bottom: 3rem;
  z-index: 20;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  opacity: 0;
  animation: heroFadeUp 2s var(--ease-out) 6.4s forwards;
}

/* — Photo credit (CC BY 2.0 attribution requirement) — */
.hero__credit {
  position: absolute;
  right: 1.5rem;
  bottom: 1.2rem;
  z-index: 20;
  max-width: 280px;
  font-family: var(--sans);
  font-size: 0.62rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: right;
  color: rgba(243, 236, 223, 0.5);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  opacity: 0;
  animation: heroFadeUp 2s var(--ease-out) 7s forwards;
}

.hero__credit a {
  color: rgba(243, 236, 223, 0.7);
  border-bottom: 1px solid rgba(243, 236, 223, 0.18);
  transition: color 0.4s ease, border-color 0.4s ease;
}

.hero__credit a:hover {
  color: var(--paper);
  border-color: rgba(243, 236, 223, 0.5);
  opacity: 1;
}

@media (max-width: 700px) {
  .hero__credit {
    bottom: 5.4rem;
    left: 1.2rem;
    right: 1.2rem;
    max-width: none;
    text-align: center;
  }
}

.hero__scrollhint-text {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.hero__scrollhint-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--sand), transparent);
  animation: scrollLine 2.6s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollLine {
  0%   { transform: scaleY(0.2); opacity: 0.3; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.2); opacity: 0.3; transform-origin: bottom; }
}


/* ═══════════════════════════════════════════════════════════════
   SECTIONS — shared
   ═══════════════════════════════════════════════════════════════ */

.section {
  position: relative;
  padding: clamp(6rem, 12vw, 11rem) 0;
  overflow: hidden;
  isolation: isolate;
}

/* ─── Shared section background video (depth plane) ───────────
   Each section that uses this gets a real video plane behind it
   for environmental depth. JS scroll parallax moves it slower
   than scroll so the viewer feels like they're traveling through
   distinct Florida environments, not reading flat panels.
*/
.section__bg-video {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.section__inner {
  width: var(--container);
  margin: 0 auto;
}

.section__inner--narrow {
  width: var(--container-narrow);
  margin: 0 auto;
  text-align: center;
}

.section__inner--narrow .display,
.section__inner--narrow .lede,
.section__inner--narrow .eyebrow {
  margin-left: auto;
  margin-right: auto;
}

.section__header {
  max-width: 720px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section__header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section__header--center .display,
.section__header--center .lede {
  margin-left: auto;
  margin-right: auto;
}

.section__divider {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--paper-muted));
  opacity: 0.4;
}

/* Reveal-on-scroll animation default state */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─── MISSION ─────────────────────────────────────────────────── */

.section--mission {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(232, 198, 166, 0.10), transparent 70%),
    linear-gradient(to bottom, #f5eedf 0%, #ebe2cf 100%);
  color: var(--ink);
  isolation: isolate;
}

/* Distant background plane: blurred forest texture pushed way back */
.section--mission__bg {
  z-index: 0;
  opacity: 0.62;
  /* Light treatment so the ibis stays sharp and the storm-coming sky
     reads true. No sepia/hue-rotate — the Sora clip is graded already
     and any tint would soften its sacred-watching mood. */
  filter: blur(2px) brightness(0.92) contrast(1.08) saturate(0.94);
}

/* Foreground glow: gentle warm wash, kept light so the ibis clip's
   storm-coming sky reads as drama instead of being lit warm. The
   bottom glow remains to keep section identity. */
.section--mission__glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(232, 198, 166, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(212, 184, 130, 0.28), transparent 65%);
  mix-blend-mode: screen;
}

.section--mission > .section__inner {
  position: relative;
  z-index: 3;
}

/* Localized warm-paper scrim behind the Mission text column so the
   display + lede sit on quiet air, not directly on the storm-sky
   animation. Soft, blurred, fades to transparent at the column edges
   — atmospheric, not UI. */
.section--mission .section__inner::before {
  content: "";
  position: absolute;
  inset: -2rem -3.5rem;
  background:
    radial-gradient(ellipse 70% 95% at 50% 50%,
                    rgba(245, 238, 223, 0.62) 0%,
                    rgba(245, 238, 223, 0.42) 35%,
                    rgba(245, 238, 223, 0.18) 65%,
                    rgba(245, 238, 223, 0.00) 92%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

.section--mission .display {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.85),
               0 0 24px rgba(245, 238, 223, 0.55);
}

.section--mission .lede {
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.8),
               0 0 16px rgba(245, 238, 223, 0.5);
}

.section--mission .eyebrow {
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.8);
}


/* ─── STORY / WHY WE BUILT THIS ───────────────────────────────
   The emotional spine of the site. Designed to read like a letter:
   warm paper, narrow column, intimate scale. The fog-and-sun-leaves
   backdrop suggests Florida memory drifting just beyond the page.
*/

.section--story {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(232, 198, 166, 0.20), transparent 70%),
    linear-gradient(to bottom, #faf4e9 0%, #f2e9d6 55%, #e8dcc1 100%);
  color: var(--ink);
  isolation: isolate;
  padding: clamp(7rem, 14vw, 13rem) 0;
}

.section--story__bg {
  z-index: 0;
  opacity: 0.62;
  /* Soft dreamy treatment that preserves flamingo pinks and foreground
     flowers — no sepia, no hue-rotate, very light blur. Lets the dawn
     palette of the Sora clip carry the section's nostalgia. */
  filter: blur(3px) brightness(0.95) contrast(1.05) saturate(1.0);
}

.section--story__glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 50% at 50% 25%, rgba(232, 196, 158, 0.32), transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(212, 184, 130, 0.16), transparent 65%);
  mix-blend-mode: screen;
}

.section--story > .section__inner {
  position: relative;
  z-index: 3;
}

.section--story__inner {
  width: min(720px, 88vw);
  margin: 0 auto;
  text-align: center;
}

.section--story .display {
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.85),
               0 0 24px rgba(245, 238, 223, 0.55);
}

.section--story .eyebrow {
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.8);
}

.story-letter {
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
  text-align: left;
  position: relative;
}

/* Warm-paper halo behind David's letter so the paragraphs read
   cleanly over the flamingo-dawn animation — soft elliptical fade
   to fully transparent at the edges so the animation continues to
   flow on both sides without a card boundary. */
.story-letter::before {
  content: "";
  position: absolute;
  inset: -2rem -3.5rem;
  background:
    radial-gradient(ellipse 70% 95% at 50% 50%,
                    rgba(245, 238, 223, 0.62) 0%,
                    rgba(245, 238, 223, 0.40) 35%,
                    rgba(245, 238, 223, 0.16) 65%,
                    rgba(245, 238, 223, 0.00) 92%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

.story-letter .lede {
  text-align: center;
  margin-bottom: 2.4rem;
  font-style: italic;
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.85),
               0 0 14px rgba(245, 238, 223, 0.55);
}

.story-letter__p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.12rem, 1.35vw, 1.24rem);
  line-height: 1.82;
  /* Slightly deeper than --ink so long-form reading is restful for the
     eye without changing the overall warm-paper palette. */
  color: #0e1009;
  margin-bottom: 2.15rem;
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.9),
               0 0 14px rgba(245, 238, 223, 0.55);
}

.story-letter__creed {
  margin: clamp(2.4rem, 4vw, 3.6rem) auto;
  padding: 1.6rem 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
  letter-spacing: 0.005em;
  border-top: 1px solid rgba(21, 23, 15, 0.32);
  border-bottom: 1px solid rgba(21, 23, 15, 0.32);
  max-width: 28ch;
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.85),
               0 0 20px rgba(245, 238, 223, 0.55);
}

.story-letter__signature {
  margin-top: 3rem;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.85),
               0 0 14px rgba(245, 238, 223, 0.5);
}

.story-letter__signoff {
  display: inline-block;
  font-style: italic;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.story-letter__location {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand-warm);
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.85);
}


/* ─── WHAT WE PROTECT ─────────────────────────────────────────── */

.section--protect {
  background: linear-gradient(to bottom, #e6dcc6 0%, #d2c8af 100%);
  color: var(--ink);
  isolation: isolate;
}

/* Section header (above the ecosystem stanzas) — the eyebrow / display /
   lede sit above the .ecosystem-list scrim, so they need their own
   subtle warm halos to read over the native-birds animation. */
.section--protect .display {
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.85),
               0 0 24px rgba(245, 238, 223, 0.55);
}

.section--protect .lede {
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.8),
               0 0 16px rgba(245, 238, 223, 0.5);
}

.section--protect .eyebrow {
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.8);
}

.section--protect__bg {
  z-index: 0;
  opacity: 0.60;
  /* No multiply blend — it would crush the pink flowers and grey out
     the heron. No sepia for the same reason. Light blur so the cards
     sit cleanly on top while birds + flowers remain readable. */
  filter: blur(4px) brightness(0.92) contrast(1.04) saturate(1.0);
}

.section--protect__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(235, 226, 207, 0.45), transparent 70%);
}

.section--protect > .section__inner {
  position: relative;
  z-index: 3;
}

/* ─── Ecosystem stanzas — replaces the protect-grid of video cards ──
   The section's Sora native-birds animation carries the visual weight;
   each ecosystem is a small typographic stanza in a centered narrow
   column with generous breathing space between items. Animation flows
   on both sides of the column. */
.ecosystem-list {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 5vw, 4.5rem);
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* Soft warm-paper "page" behind the entire stanza column. Lifts text
   off the busy bird/flower animation while keeping the animation
   visible flowing on both sides — fades to fully transparent at the
   horizontal edges so there's no card boundary. */
.ecosystem-list::before {
  content: "";
  position: absolute;
  inset: -2rem -4rem;
  background:
    radial-gradient(ellipse 65% 95% at 50% 50%,
                    rgba(245, 238, 223, 0.62) 0%,
                    rgba(245, 238, 223, 0.40) 35%,
                    rgba(245, 238, 223, 0.16) 65%,
                    rgba(245, 238, 223, 0.00) 92%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

.ecosystem-item {
  position: relative;
}

.ecosystem-item__tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--sand-warm);
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.85);
}

.ecosystem-item__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.9),
               0 0 22px rgba(245, 238, 223, 0.7);
}

.ecosystem-item__desc {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.18rem, 1.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 48ch;
  margin: 0 auto;
  text-shadow: 0 1px 2px rgba(245, 238, 223, 0.85),
               0 0 14px rgba(245, 238, 223, 0.55);
}

/* ─── WATERWAYS ────────────────────────────────────────────────── */

.section--waters {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #2c4a52 0%, transparent 70%),
    linear-gradient(to bottom, #0a1c22 0%, #031014 100%);
  color: var(--paper);
}

.section--waters__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.72;
  /* The Sora underwater scene is already richly graded — preserve the
     aquamarine. No hue-rotate. Light contrast bump keeps the sunlight
     rays cinematic without crushing the manatee against the coral. */
  filter: brightness(0.92) contrast(1.06) saturate(1.02);
  pointer-events: none;
}

.section--waters__grade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Subtle atmospheric overlay only — the underwater clip carries the
     palette. Just a softer top wash for text readability and a quiet
     bottom darken for the section's transition into the next. */
  background:
    linear-gradient(180deg,
                    rgba(14, 33, 40, 0.28) 0%,
                    rgba(14, 33, 40, 0.05) 35%,
                    rgba(14, 33, 40, 0.10) 65%,
                    rgba(6, 19, 24, 0.55) 100%);
}

.section--waters__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
}

.waters-shimmer {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 24px,
      rgba(138, 170, 177, 0.07) 25px,
      transparent 26px,
      transparent 50px
    );
  animation: waterRipple 18s ease-in-out infinite alternate;
}

.waters-shimmer--2 {
  animation-duration: 26s;
  opacity: 0.6;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 42px,
      rgba(138, 170, 177, 0.05) 43px,
      transparent 44px,
      transparent 86px
    );
}

.waters-shimmer--3 {
  animation-duration: 34s;
  animation-direction: reverse;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 60px,
      rgba(212, 197, 169, 0.04) 61px,
      transparent 62px,
      transparent 122px
    );
}

.section--waters .section__inner {
  position: relative;
  z-index: 1;
}

/* Localized dark scrim behind the Waterways text column so the body
   prose and statistic numbers read clearly over the bright underwater
   blues without crushing the section's aquamarine atmosphere. */
.section--waters .section__inner::before {
  content: "";
  position: absolute;
  inset: -2rem -3.5rem;
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%,
                    rgba(6, 16, 22, 0.58) 0%,
                    rgba(6, 16, 22, 0.40) 35%,
                    rgba(6, 16, 22, 0.18) 65%,
                    rgba(6, 16, 22, 0.00) 92%);
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
}

.section--waters .display {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
}

.waters-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: clamp(4rem, 7vw, 6rem);
  padding-top: 3rem;
  border-top: 1px solid rgba(243, 236, 223, 0.14);
}

.waters-stat {
  text-align: center;
}

.waters-stat__num {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 3.8rem);
  color: var(--paper);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.waters-stat__label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  margin-top: 0.6rem;
  display: block;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}


/* ─── WILDLIFE ─────────────────────────────────────────────────── */

.section--wildlife {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(232, 198, 166, 0.12), transparent 70%),
    linear-gradient(to bottom, #061318 0%, #0a1812 50%, #15281f 100%);
  color: var(--paper);
  isolation: isolate;
}

.section--wildlife__bg {
  z-index: 0;
  opacity: 0.62;
  /* The Sora neighbors tableau is already graded for golden-hour mist.
     Light treatment that preserves the warm marsh tones — no hue-rotate
     toward cool, no sepia. Slight brightness lift so the spoonbill's
     pink and the flamingos in the distance read clearly. */
  filter: blur(4px) brightness(0.95) contrast(1.06) saturate(1.0);
}

/* Wildlife section is dark; header eyebrow + lede need the lighter
   --sand accent and a dark text-shadow halo for legibility. */
.section--wildlife .eyebrow {
  color: var(--sand);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.section--wildlife .display {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7),
               0 0 28px rgba(0, 0, 0, 0.4);
}

.section--wildlife .lede {
  color: var(--paper);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}

.section--wildlife__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Warmer veil that frames the section without crushing the golden
     marsh palette underneath. Subtle dark wash at top and bottom for
     text readability, near-clear through the middle so the neighbors
     tableau breathes. */
  background:
    linear-gradient(to bottom,
                    rgba(6, 19, 24, 0.42) 0%,
                    rgba(6, 19, 24, 0.0) 28%,
                    rgba(6, 19, 24, 0.0) 72%,
                    rgba(18, 28, 22, 0.45) 100%);
}

.section--wildlife > .section__inner {
  position: relative;
  z-index: 3;
}

/* Localized dark scrim behind the Wildlife section header so the
   eyebrow + display + lede read cleanly over the bright neighbors
   tableau (spoonbill pink, flamingos in distance, sky). */
.section--wildlife .section__header::before {
  content: "";
  position: absolute;
  inset: -2rem -3.5rem;
  background:
    radial-gradient(ellipse 75% 90% at 50% 50%,
                    rgba(6, 16, 18, 0.55) 0%,
                    rgba(6, 16, 18, 0.38) 35%,
                    rgba(6, 16, 18, 0.18) 65%,
                    rgba(6, 16, 18, 0.00) 92%);
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
}

.section--wildlife .section__header {
  position: relative;
}

/* ─── Wildlife stanzas — replaces the wildlife-row of cards ───────
   Same pattern as ecosystem-list, but for the dark Wildlife section.
   The section's Sora "neighbors" tableau is the visual subject; each
   species reads as a documentary caption layered over it. */
.wildlife-list {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 5vw, 4.5rem);
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* Localized dark scrim behind the wildlife stanza column so each
   species name + meta + description reads on quiet air rather than
   on bright spoonbill / flamingo / marsh frames. */
.wildlife-list::before {
  content: "";
  position: absolute;
  inset: -2rem -3.5rem;
  background:
    radial-gradient(ellipse 70% 96% at 50% 50%,
                    rgba(6, 16, 18, 0.60) 0%,
                    rgba(6, 16, 18, 0.42) 35%,
                    rgba(6, 16, 18, 0.18) 65%,
                    rgba(6, 16, 18, 0.00) 92%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

.wildlife-item {
  position: relative;
}

.wildlife-item__meta {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.8rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.wildlife-item__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--paper);
  /* Wider gap between species name and description so the eye lands
     on the name first, then settles into the line below it. */
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75),
               0 0 32px rgba(0, 0, 0, 0.45);
}

.wildlife-item__desc {
  font-family: var(--serif);
  /* Slightly lighter weight than the name so the species name carries
     the primary read and the description supports it. */
  font-weight: 450;
  font-size: clamp(1.15rem, 1.4vw, 1.28rem);
  line-height: 1.62;
  /* Recedes one step from --paper (#f3ecdf) to a softer cream
     (#e8e0d0) — supports the name without competing with it. Still
     well above WCAG AA against the dark scrim behind it. */
  color: #e8e0d0;
  max-width: 46ch;
  margin: 0 auto;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}

/* ─── COMMUNITY ───────────────────────────────────────────────── */

.section--community {
  background:
    radial-gradient(ellipse 60% 40% at 10% 20%, rgba(180, 200, 160, 0.18), transparent 60%),
    linear-gradient(to bottom, #15281f 0%, #1a3027 50%, #ebe2cf 100%);
  color: var(--ink);
  isolation: isolate;
}

/* Background: distant Everglades plane, deeply tinted */
.section--community__bg {
  z-index: 0;
  opacity: 0.62;
  /* Sora stewards clip is already cinematically graded — light blur
     keeps the people readable, slight contrast lift preserves the
     golden-hour atmosphere without crushing skin tones or the marsh. */
  filter: blur(3px) brightness(0.95) contrast(1.05) saturate(1.0);
}

/* Single centered narrow column (Story-pattern). Heading and lede
   center; bullets stay left-aligned in a slightly narrower inner
   width so the dashes-and-text rhythm reads correctly. */
.section--community__inner {
  width: min(720px, 88vw);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 3;
}

/* Localized dark scrim behind the Community text column so the
   display + lede + bullets read clearly over the warm stewards
   animation without dimming the section's golden atmosphere. */
.section--community__inner::before {
  content: "";
  position: absolute;
  inset: -2.4rem -3.5rem;
  background:
    radial-gradient(ellipse 75% 92% at 50% 50%,
                    rgba(8, 18, 14, 0.68) 0%,
                    rgba(8, 18, 14, 0.46) 35%,
                    rgba(8, 18, 14, 0.20) 65%,
                    rgba(8, 18, 14, 0.00) 92%);
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
}

.section--community__inner .display,
.section--community__inner .lede,
.section--community__inner .eyebrow {
  margin-left: auto;
  margin-right: auto;
}

.section--community__inner .bullets {
  text-align: left;
  max-width: 480px;
  margin: 2.4rem auto 0;
  /* Slight text-shadow so the bullets read cleanly over the warmer
     mid-section areas of the stewards clip. */
}

.section--community__inner .bullets li {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.section--community__inner .display {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55),
               0 0 28px rgba(0, 0, 0, 0.25);
}

.section--community__inner .lede {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* Tint veil over the section so the gradient palette remains dominant */
.section--community__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
                    rgba(21, 40, 31, 0.42) 0%,
                    rgba(21, 40, 31, 0.0) 35%,
                    rgba(235, 226, 207, 0.0) 65%,
                    rgba(235, 226, 207, 0.45) 100%);
}

.section--community > .section__inner {
  position: relative;
  z-index: 3;
}

.section--community .display {
  color: var(--paper);
}

.section--community .lede,
.section--community .bullets {
  color: var(--paper);
}

.section--community .eyebrow {
  color: var(--sand);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.section--community .bullets li::before {
  background: var(--sand);
}

/* ─── RESTORATION ─────────────────────────────────────────────── */

.section--restoration {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 184, 130, 0.14), transparent 70%),
    linear-gradient(to bottom, #122520 0%, #081813 100%);
  color: var(--paper);
  isolation: isolate;
}

/* Background: Sora restoration scene — warm earth-toned, golden-hour
   marsh in the act of healing. No hue-rotate (would chill the warmth).
   Light blur keeps the wading bird and distant trees readable. */
.section--restoration__bg {
  z-index: 0;
  opacity: 0.66;
  filter: blur(2px) brightness(0.92) contrast(1.06) saturate(1.02);
}

.section--restoration__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Softer veil that lets the warm restoration scene breathe through
     the middle, with a top wash for the heading and a deeper bottom
     darken for the section transition. No multiply blend, no cold
     radial that was crushing the earth tones. */
  background:
    linear-gradient(180deg,
                    rgba(14, 33, 40, 0.42) 0%,
                    rgba(14, 33, 40, 0.08) 30%,
                    rgba(14, 33, 40, 0.10) 70%,
                    rgba(6, 19, 24, 0.65) 100%);
}

.section--restoration > .section__inner {
  position: relative;
  z-index: 3;
}

/* Localized dark scrim behind the Restoration content (header + steps)
   so the four steps read clearly over the warm restoration scene. */
.section--restoration .section__inner::before {
  content: "";
  position: absolute;
  inset: -2.4rem -3.5rem;
  background:
    radial-gradient(ellipse 78% 92% at 50% 50%,
                    rgba(8, 16, 20, 0.66) 0%,
                    rgba(8, 16, 20, 0.46) 35%,
                    rgba(8, 16, 20, 0.20) 65%,
                    rgba(8, 16, 20, 0.00) 92%);
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
}

/* Each numbered step gets a near-invisible card halo — soft radial
   darken bound to the step item itself, fading at the edges. Adds
   depth so the eye can register each step as its own unit without
   any visible card boundary. */
.restoration-steps li {
  position: relative;
}

.restoration-steps li::before {
  content: "";
  position: absolute;
  inset: -1.2rem -1.6rem;
  background:
    radial-gradient(ellipse 78% 95% at 50% 50%,
                    rgba(6, 12, 16, 0.42) 0%,
                    rgba(6, 12, 16, 0.20) 50%,
                    rgba(6, 12, 16, 0.00) 92%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

.restoration-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(2rem, 3vw, 3.5rem);
  counter-reset: step;
}

.restoration-steps li {
  position: relative;
  padding-top: 2rem;
  border-top: 1px solid rgba(243, 236, 223, 0.18);
}

.restoration-steps__num {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  color: var(--sand);
  display: block;
  margin-bottom: 1.2rem;
}

.restoration-steps h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--paper);
  margin-bottom: 0.8rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.restoration-steps p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--paper);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}


/* ─── GET INVOLVED ────────────────────────────────────────────── */

.section--involved {
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(232, 198, 166, 0.18), transparent 70%),
    linear-gradient(to bottom, #061318 0%, #f5eedf 100%);
  color: var(--ink);
  isolation: isolate;
}

/* Background: sunlight filtering through trees (real dappled motion) */
.section--involved__bg {
  z-index: 0;
  opacity: 0.66;
  /* Sora shoreline-cleanup clip is already cinematically graded — light
     treatment preserves the warm golden-hour sky and the cool ocean,
     keeps the volunteers identifiable. */
  filter: blur(3px) brightness(0.94) contrast(1.06) saturate(1.02);
}

/* Layered top-to-bottom tint veil so the warm gradient palette stays dominant */
.section--involved__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
                    rgba(6, 19, 24, 0.42) 0%,
                    rgba(6, 19, 24, 0.18) 28%,
                    rgba(245, 238, 223, 0.08) 60%,
                    rgba(245, 238, 223, 0.45) 100%);
}

.section--involved > .section__inner {
  position: relative;
  z-index: 3;
}

/* Localized dark scrim behind the Get Involved text column so the
   header + stanzas read clearly over the bright shoreline cleanup
   scene (sand, sky, water reflections vary in brightness). */
.section--involved .section__inner::before {
  content: "";
  position: absolute;
  inset: -2rem -3.5rem;
  background:
    radial-gradient(ellipse 75% 92% at 50% 50%,
                    rgba(8, 14, 18, 0.55) 0%,
                    rgba(8, 14, 18, 0.38) 35%,
                    rgba(8, 14, 18, 0.16) 65%,
                    rgba(8, 14, 18, 0.00) 92%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

.section--involved .display,
.section--involved .lede {
  color: var(--paper);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.70),
               0 0 28px rgba(0, 0, 0, 0.40);
}

.section--involved .lede {
  font-weight: 500;
}

.section--involved .eyebrow {
  color: var(--sand);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ─── Get Involved stanzas — replaces the 3-card grid ──────────────
   Same documentary-caption pattern used in Protect / Wildlife /
   Community. The shoreline-cleanup Sora clip behind these stays the
   visual subject; the three invitations read as small, quiet calls.
*/
.involved-list {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 5vw, 4.5rem);
  max-width: 600px;
  margin: clamp(3rem, 5vw, 4.5rem) auto 0;
  text-align: center;
}

.involved-item {
  position: relative;
}

.involved-item__tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.involved-item__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.95rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--paper);
  margin-bottom: 1rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.70),
               0 0 28px rgba(0, 0, 0, 0.40);
}

.involved-item__desc {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.4vw, 1.28rem);
  line-height: 1.62;
  color: var(--paper);
  max-width: 48ch;
  margin: 0 auto;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}

/* A quiet horizontal accent line below each stanza signals "this is an
   entry point" without resorting to a button. Sand-warm color matches
   the eyebrow tags above. */
.involved-item::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 1px;
  background: var(--sand);
  margin: 1.6rem auto 0;
  opacity: 0.55;
  transition: opacity 0.4s ease, width 0.4s ease;
}

.involved-item:hover::after {
  opacity: 0.9;
  width: 3.4rem;
}

.involved-item__link {
  color: var(--sand);
  font-weight: 500;
  border-bottom: 1px solid rgba(232, 198, 166, 0.55);
  padding-bottom: 0.02em;
  transition: color 0.4s ease, border-color 0.4s ease;
}

.involved-item__link:hover {
  color: var(--paper);
  border-color: rgba(243, 236, 223, 0.85);
}

/* ─── LETTERS FROM THE MARSH (portal) ──────────────────────────
   The reflective beat after Stewardship and before Vision. A quiet
   sacred pause in the documentary — the page where the journal
   sits. Dark gradient, narrow column, restrained typography. The
   <video> slot is currently inert (no <source>); CSS already
   handles the slot's positioning so a future Sora marsh clip can
   activate with zero further changes.

   Surrounding sections end / begin in warm cream (Get Involved
   bottom, Vision top), so this dark beat reads as a held breath —
   a pause before the long view. */

.section--letters {
  background:
    radial-gradient(ellipse 70% 45% at 50% 35%, rgba(120, 150, 130, 0.10), transparent 70%),
    linear-gradient(to bottom, #07090c 0%, #0a1812 55%, #0a120e 100%);
  color: var(--paper);
  text-align: center;
  isolation: isolate;
  padding: clamp(7rem, 13vw, 11rem) 0;
}

/* Background video slot — currently empty. When a Sora clip is
   approved, drop the file and add the <source> + data-lazy-video.
   Filter values are pre-tuned for the kind of slow marsh footage
   this section will likely receive. */
.section--letters__bg {
  z-index: 0;
  opacity: 0.62;
  filter: blur(3px) brightness(0.92) contrast(1.06) saturate(1.0);
}

/* Soft vertical veil — a touch darker at the top so the Get
   Involved warm cream cleanly resolves into this dark beat, and
   a faint warm hint at the bottom so the Vision section's cream
   top doesn't snap back too sharply. */
.section--letters__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
                    rgba(7, 9, 12, 0.55) 0%,
                    rgba(7, 9, 12, 0.18) 30%,
                    rgba(7, 9, 12, 0.05) 60%,
                    rgba(245, 238, 223, 0.04) 100%);
}

.section--letters > .section__inner {
  position: relative;
  z-index: 3;
}

/* Localized dark scrim behind the text column — already in place
   so when a future video activates, the typography stays clean
   over any frame of the loop. Same pattern as Vision / Involved. */
.section--letters .section__inner::before {
  content: "";
  position: absolute;
  inset: -2.2rem -3.5rem;
  background:
    radial-gradient(ellipse 75% 92% at 50% 50%,
                    rgba(7, 9, 12, 0.55) 0%,
                    rgba(7, 9, 12, 0.38) 35%,
                    rgba(7, 9, 12, 0.16) 65%,
                    rgba(7, 9, 12, 0.00) 92%);
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
}

.section--letters .display {
  font-style: italic;
  letter-spacing: -0.005em;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
}

.section--letters .display--light {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62),
               0 0 36px rgba(0, 0, 0, 0.30);
}

.section--letters .lede--light {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.section--letters .eyebrow--light {
  color: var(--sand);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.50);
}

/* Quiet portal link — a soft sand horizontal accent line like the
   Get Involved invitations. Not a button; a doorway. */
.letters-portal__cta {
  margin: clamp(2.2rem, 4vw, 3rem) auto 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
}

.letters-portal__link {
  color: var(--sand);
  border-bottom: 1px solid rgba(232, 198, 166, 0.55);
  padding-bottom: 0.35rem;
  transition: color 0.4s ease, border-color 0.4s ease,
              letter-spacing 0.5s ease;
}

.letters-portal__link:hover {
  color: var(--paper);
  border-color: rgba(243, 236, 223, 0.85);
  letter-spacing: 0.34em;
}


/* ─── FUTURE VISION ───────────────────────────────────────────── */

.section--vision {
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(180, 200, 160, 0.10), transparent 70%),
    linear-gradient(to bottom, #f5eedf 0%, #1a3027 60%, #0a1812 100%);
  color: var(--paper);
  text-align: center;
  isolation: isolate;
}

/* Background: distant mangrove canopy receding — the long view */
.section--vision__bg {
  z-index: 0;
  opacity: 0.66;
  /* Sora field-network clip is already cinematically graded — light
     treatment preserves the warm golden-hour scene, the volunteers'
     shirts and the native flower stay identifiable. No hue-rotate
     toward cool (would chill the warmth). */
  filter: blur(3px) brightness(0.94) contrast(1.06) saturate(1.02);
}

/* ── Readability refinement —
   The Vision Sora clip's warm middle band can wash out cream text
   in places. Rather than a hard overlay across the section (which
   would crush the dreamy atmosphere), drop a *soft radial darken*
   behind the text column only — fading to transparent at the edges
   so the animation breathes on the sides. Spotlight feel, not card.
*/
.section--vision .section__inner {
  position: relative;
}

.section--vision .section__inner::before {
  content: "";
  position: absolute;
  inset: -2.5rem -3.5rem;
  background:
    radial-gradient(ellipse 75% 80% at 50% 50%,
                    rgba(8, 14, 18, 0.55) 0%,
                    rgba(8, 14, 18, 0.38) 35%,
                    rgba(8, 14, 18, 0.18) 60%,
                    rgba(8, 14, 18, 0.00) 88%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}

/* Slightly deepened text shadows so the cream typography reads at
   first glance over any frame of the field-network clip. Colors are
   preserved (paper / paper-dim) — only the shadow weight changes. */
.section--vision .display--light {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65),
               0 0 36px rgba(0, 0, 0, 0.30);
}

.section--vision .lede--light {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.section--vision .eyebrow--light {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.50);
}

.section--vision .vision-fineprint {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.50);
}

/* Heavy palette veil to preserve the warm-to-cool vertical gradient */
.section--vision__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
                    rgba(245, 238, 223, 0.55) 0%,
                    rgba(245, 238, 223, 0.10) 22%,
                    rgba(26, 48, 39, 0.40) 60%,
                    rgba(10, 24, 18, 0.70) 100%);
}

.section--vision > .section__inner {
  position: relative;
  z-index: 3;
}

.section--vision .display,
.section--vision .lede,
.section--vision .eyebrow {
  color: var(--paper);
}

.section--vision .lede {
  color: var(--paper);
}

.vision-fineprint {
  font-style: italic;
  color: var(--paper) !important;
  margin-top: 2rem;
  font-size: clamp(1.08rem, 1.2vw, 1.18rem);
}


/* ─── CODA — closing frame between Vision and Footer ─────────────
   A held breath at the end of the documentary. Near-dark, narrow,
   restrained typography. Bottom transitions seamlessly into the
   footer's --bg-night so the page exhales rather than cuts.
*/
.coda {
  position: relative;
  /* Smooth fade from the dark wetland tone Vision ends on, into the
     deeper bg-night the footer sits on. No hard section seam. */
  background: linear-gradient(180deg,
                              #0a1812 0%,
                              #07090c 45%,
                              var(--bg-night) 100%);
  padding: clamp(8rem, 16vw, 12rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  isolation: isolate;
}

/* Slightly wider column so the second stanza's longer prose lines
   nest cleanly beneath the tight first-stanza verse. The first
   stanza still reads tight; the second wraps naturally inside the
   same column, like the next page of the same poem. */
.coda__inner {
  width: min(560px, 88vw);
  margin: 0 auto;
}

.coda__line {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.35rem, 1.7vw, 1.6rem);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--paper);
  margin: 0 0 0.5rem;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

/* The third line of stanza one — a small typographic fade that
   bridges into the dedication beneath. Used to be applied via
   :last-child; now an explicit class so the dedication can sit
   below it without disrupting the bridge. */
.coda__line--soft {
  color: var(--paper-dim);
}

/* Dedication — the second stanza of the Florida poem. Same italic
   serif voice, same color tier as the soft third line above; a
   touch smaller so the longer prose lines nest as a softer
   continuation rather than competing with the tight verse. A
   small breath of margin above the first dedication line creates
   the stanza separation — no border, no card, no flourish. */
.coda__line--dedication {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.55;
  color: var(--paper-dim);
  margin: 0 auto 0.6rem;
  max-width: 50ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.coda__line--dedication:first-of-type {
  margin-top: clamp(1.6rem, 3.5vw, 2.6rem);
}

/* Final line carries no bottom margin so the Coda exhales cleanly
   into the footer beneath. */
.coda__line:last-child {
  margin-bottom: 0;
}


/* ─── FOOTER ──────────────────────────────────────────────────── */

.footer {
  background: var(--bg-night);
  color: var(--paper);
  padding: clamp(4rem, 6vw, 6rem) 0 2rem;
  border-top: 1px solid rgba(243, 236, 223, 0.08);
}

.footer__inner {
  width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(243, 236, 223, 0.08);
}

@media (max-width: 800px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand,
  .footer__col--contact {
    grid-column: span 2;
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--paper);
}

.footer__mark {
  /* Bright on dark footer bg — uses --sand instead of the darkened
     --sand-warm so the mark stays visible. */
  color: var(--sand);
}

.footer__wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

.footer__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--paper);
  margin-top: 0.4rem;
}

.footer__col h4 {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.2rem;
}

.footer__col a {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--paper);
  margin-bottom: 0.55rem;
}

.footer__col--contact p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--paper);
  margin-bottom: 1rem;
}

.footer__email {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.12rem;
  color: var(--paper);
  border-bottom: 1px solid rgba(243, 236, 223, 0.32);
  padding-bottom: 0.05rem;
}

/* ── Kindred organizations — quiet outbound conservation links ── */
.footer__kindred {
  width: var(--container);
  margin: 2.4rem auto 0;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(243, 236, 223, 0.06);
  text-align: center;
}

.footer__kindred-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.4rem;
}

.footer__kindred-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.8rem;
}

.footer__kindred-list li {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--paper);
}

.footer__kindred-list a {
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: color 0.4s ease, border-color 0.4s ease;
}

.footer__kindred-list a:hover {
  color: var(--paper);
  border-color: rgba(243, 236, 223, 0.32);
  opacity: 1;
}

/* ── Colophon — transparency block. Quiet, sincere, restrained. ── */
.footer__colophon {
  width: min(700px, var(--container));
  margin: 2.4rem auto 0;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(243, 236, 223, 0.06);
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
}

.footer__colophon p {
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--paper);
  margin: 0 0 1.2rem;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

.footer__colophon p:last-of-type {
  margin-bottom: 0;
}

.footer__colophon-link {
  color: var(--paper);
  border-bottom: 1px dotted rgba(243, 236, 223, 0.40);
  cursor: default;
  transition: color 0.4s ease;
}

.footer__colophon-link--quiet {
  /* Toro Real LLC reference — a styled span, not a link target, since
     there's no public Toro Real site to point at. */
}

.footer__colophon-link:hover {
  color: var(--paper);
}

.footer__colophon-fineprint {
  margin-top: 0.8rem;
  font-size: 0.92rem !important;
  font-family: var(--sans) !important;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
}


.footer__bottom {
  width: var(--container);
  margin: 2.4rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(243, 236, 223, 0.08);
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  color: var(--paper);
}

@media (max-width: 700px) {
  .footer__bottom {
    flex-direction: column;
    gap: 0.4rem;
  }
}


/* ─── Two-tier brand wordmark (nav + footer) ────────────────────
   The registered name "Toro Wildlands Conservation Inc." reads as
   a quiet signature beneath the cinematic primary brand "Toro
   Wildlands." Style is the same pattern used for film-studio
   nameplates: a serif main mark with a small uppercase suffix
   sitting close beneath, letter-spaced, sand-colored. Keeps the
   nav and footer feeling like a documentary credit, not a
   corporate header. */

.nav__brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.nav__brand-text__primary {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

.nav__brand-text__suffix {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: 0.4rem;
  /* Soft glow so the suffix lifts off the cinematic hero footage. */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Footer mirror — same structural pattern, scaled to the footer
   wordmark's larger 1.5rem set. */
.footer__wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.footer__wordmark-primary {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

.footer__wordmark-suffix {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: 0.5rem;
}

/* Letters page header mirror — small enough that we keep the
   primary serif and let the suffix sit on a second line. */
.letters-home__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.letters-home__text-primary {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.letters-home__text-suffix {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: 0.3rem;
}


/* ─── Founding Leadership ──────────────────────────────────────
   Sits in the footer's organizational disclosure zone, between
   Kindred Work and the Colophon. Three quiet name pairs centered
   on a single row at desktop, stacked on mobile. No corporate
   table styling. Matches the kindred-orgs row's restraint. */
.footer__leadership {
  width: min(700px, var(--container));
  margin: 2.4rem auto 0;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(243, 236, 223, 0.06);
  text-align: center;
}

.footer__leadership-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.6rem;
}

.footer__leadership-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem 3.4rem;
}

.footer__leadership-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.footer__leadership-role {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sand);
}

.footer__leadership-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--paper);
  letter-spacing: 0.005em;
}

@media (max-width: 600px) {
  .footer__leadership-list {
    flex-direction: column;
    gap: 1.4rem;
  }
}


/* ─── Mobile readability — tighten scrim insets ────────────────
   Outside of desktop the centered text columns don't have horizontal
   breathing room for the scrims to extend by -3.5rem on each side
   without overflowing the viewport. Pull them inside the column edge
   so they remain anchored on the text, and reduce the blur so the
   halo doesn't visually crush the surrounding atmosphere on small
   screens. */
@media (max-width: 700px) {
  .ecosystem-list::before,
  .story-letter::before,
  .wildlife-list::before,
  .section--mission .section__inner::before,
  .section--waters .section__inner::before,
  .section--wildlife .section__header::before,
  .section--community__inner::before,
  .section--restoration .section__inner::before,
  .section--involved .section__inner::before,
  .section--vision .section__inner::before {
    inset: -1.4rem -1.2rem;
    filter: blur(28px);
  }

  /* Body paragraphs ease their line-length on small screens so the
     measure (~58ch) doesn't push past the screen edge. */
  .story-letter__p,
  .lede,
  .ecosystem-item__desc,
  .wildlife-item__desc,
  .involved-item__desc,
  .restoration-steps p {
    max-width: 92vw;
  }
}


/* ─── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .hero__photo img {
    transform: scale(1.04);
  }
  .hero__atmos,
  .hero__env,
  .hero__birds-video,
  .hero__rays-video,
  .hero__lens-flare,
  .hero__horizon-haze {
    opacity: 0;
  }
  .section__bg-video {
    display: none;
  }
  .hero__title-word {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .hero__eyebrow,
  .hero__subtitle,
  .hero__scrollhint,
  .hero__credit {
    opacity: 1;
    transform: translateX(-50%);
  }
  .hero__credit {
    transform: none;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}