/* ============================================================
   MARINOX GROUP — ECOSYSTEM PAGE
   ecosystem.css

   Page-specific styles only. Global tokens (--void, --acc,
   --prose, --muted, --fd, --fb, --nav-h, --ease) come from
   styles.css. Cursor styles come from cursor.css. Nav and
   footer styles come from styles.css.
============================================================ */

:root {
  /* Page-specific tokens used by the Reef and the Schematic appendix.
     Venture colours (--c-mariix/marvex/oceion) and --heading are
     inherited from styles.css :root after Fix 6.1 / 6.5 consolidation. */
  --c-neutral: #8aabba;
  --c-gov:     #c8d8de;
}

/* ============================================================
   HEADINGS — local overrides (page uses italic-serif accents) */
.eco-hero h1,
.eco-reading h2,
.eco-structure-head h2,
.cta-band h2 {
  font-family: var(--fd);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.eco-hero h1 em,
.eco-reading h2 em,
.eco-structure-head h2 em,
.cta-band h2 em {
  color: var(--acc);
  font-style: italic;
  font-weight: 400;
}

/* ============================================================
   HERO
============================================================ */
.eco-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 4rem) 0 4rem;
  background: var(--void);
  overflow: hidden;
}
.eco-hero-glow {
  position: absolute;
  left: 50%; top: 60%;
  width: 1200px; height: 1200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(62,207,207,0.05) 0%, rgba(62,207,207,0) 60%);
  pointer-events: none;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.eco-hero-inner {
  position: relative;
  z-index: 2;
  /* Fix (post-launch testing): clearance for absolute .eco-scroll-cue
     so the hero subtitle's last line never collides with "The Reef". */
  padding-bottom: 7rem;
}
.eco-hero h1 {
  font-size: clamp(3rem, 7.2vw, 6.4rem);
  line-height: 0.98;
  margin: 1.75rem 0 2rem;
  max-width: 18ch;
}
.eco-hero-sub {
  font-family: var(--fb);
  font-size: 1.0625rem;          /* 17px — audit anchor */
  color: rgba(232, 240, 243, 0.82);  /* α 0.82 — audit anchor */
  max-width: 56ch;
  line-height: 1.75;
  margin-bottom: 3rem;
  font-weight: 300;
}
.eco-hero-sub em {
  font-style: italic;
  font-family: var(--fd);
  color: var(--acc);
  font-weight: 400;
}
.eyebrow {
  font-family: var(--fb);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acc);
  display: inline-block;
}

/* Scroll cue */
.eco-scroll-cue {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 2;
}
.eco-scroll-cue span {
  font-family: var(--fb);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 216, 222, 0.4);
}
.eco-scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--acc), transparent);
  animation: ecoScrollPulse 2.4s ease-in-out infinite;
}
@keyframes ecoScrollPulse {
  0%, 100% { opacity: 0.35; transform: scaleY(1); }
  50%       { opacity: 0.9;  transform: scaleY(1.2); }
}

/* ============================================================
   THE REEF — embedded canvas section
   100vh layout: padding-top reserves space for fixed nav,
   stage flexes, timeline pinned at bottom.
============================================================ */
.reef-section {
  position: relative;
  height: 100vh;
  min-height: 720px;
  background: var(--void);
  border-top: 1px solid rgba(62, 207, 207, 0.10);
  border-bottom: 1px solid rgba(62, 207, 207, 0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-h);
}
.reef-stage {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}
#reef-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1.4s var(--ease);
}

/* Continuum mark */
.continuum-mark-wrap {
  position: absolute;
  width: 96px; height: 96px;
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -50%);
  transition: width 0.6s var(--ease), height 0.6s var(--ease);
}
.continuum-mark-wrap.is-zoomed { width: 116px; height: 116px; }
.continuum-mark-wrap .cm-rotor {
  width: 100%; height: 100%;
  animation: cmRotorSpin var(--rot-speed, 90s) linear infinite;
}
.continuum-mark-wrap .cm-breather {
  width: 100%; height: 100%;
  animation: cmRotorBreath var(--breath-speed, 5.5s) ease-in-out infinite;
}
.continuum-mark-wrap .cm-breather svg {
  display: block;
  width: 100%;
  height: 100%;
}
.continuum-mark-wrap::after {
  content: '';
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 207, 207, 0.18), rgba(62, 207, 207, 0) 65%);
  z-index: -1;
  opacity: var(--glow-opacity, 0.6);
  transition: opacity 0.8s var(--ease);
}
@keyframes cmRotorSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes cmRotorBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.continuum-mark-wrap.reduced-motion .cm-rotor,
.continuum-mark-wrap.reduced-motion .cm-breather { animation: none; }

/* Continuum HEADER (above mark) */
.continuum-header {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  text-align: center;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.continuum-header.is-visible { opacity: 1; }
.continuum-header .name {
  font-family: var(--fd);
  font-size: 1.1rem;
  letter-spacing: 0.32em;
  color: rgba(232, 240, 243, 0.95);
  display: block;
  font-weight: 300;
}
.continuum-header .role {
  display: block;
  font-family: var(--fb);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  color: rgba(200, 216, 222, 0.55);
  margin-top: 0.4rem;
  text-transform: uppercase;
}

/* Continuum CAPTION (below diagram, in empty space) */
.continuum-caption {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  text-align: center;
  transform: translate(-50%, 0);
  width: min(560px, 80vw);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.continuum-caption.is-visible { opacity: 1; }
.continuum-caption .eyebrow {
  font-family: var(--fb);
  font-size: 0.5rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--acc);
  display: block;
  margin-bottom: 0.55rem;
  transition: color 0.4s var(--ease), opacity 0.3s;
}
.continuum-caption .text {
  font-family: var(--fb);
  font-size: 0.9rem;
  line-height: 1.55;
  font-weight: 300;
  color: rgba(232, 240, 243, 0.92);
  letter-spacing: 0.01em;
  transition: opacity 0.3s var(--ease);
}
.continuum-caption .text strong { font-weight: 400; color: #ffffff; }
.continuum-caption .text em {
  font-style: italic;
  font-family: var(--fd);
  color: var(--acc);
  font-weight: 400;
  font-size: 1.05em;
}
.continuum-caption::before {
  content: '';
  position: absolute;
  inset: -10px -20px;
  background: radial-gradient(ellipse at center, rgba(3, 8, 12, 0.85), rgba(3, 8, 12, 0) 75%);
  z-index: -1;
  pointer-events: none;
}

/* Closing reveal frame */
.continuum-reveal {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  text-align: center;
  transform: translate(-50%, 0);
  width: min(640px, 86vw);
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.continuum-reveal .reveal-text {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.45;
  color: rgba(232, 240, 243, 0.92);
  letter-spacing: 0.01em;
}
.continuum-reveal .reveal-text em {
  font-style: italic;
  color: var(--acc);
  font-weight: 400;
}
.reef-section[data-reveal="active"] .continuum-reveal { opacity: 1; }
.reef-section[data-reveal="active"] #reef-canvas {
  opacity: 0.18;
  transition: opacity 1.4s var(--ease);
}
.reef-section[data-reveal="active"] .continuum-caption {
  opacity: 0 !important;
  transition: opacity 1.4s var(--ease);
}
.reef-section[data-reveal="active"] .continuum-header { opacity: 1; }

/* Timeline strip */
.reef-timeline {
  flex: 0 0 auto;
  height: 132px;
  background: rgba(3, 8, 12, 0.92);
  border-top: 1px solid rgba(62, 207, 207, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4rem;
}
.reef-timeline-inner {
  position: relative;
  width: 100%;
  max-width: 920px;
  height: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.reef-timeline-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
}
.reef-timeline-headline {
  font-family: var(--fb);
  font-size: 0.5rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(200, 216, 222, 0.4);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.reef-timeline-replay {
  background: transparent;
  border: 1px solid rgba(200, 216, 222, 0.18);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(200, 216, 222, 0.5);
  padding: 0;
  transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.reef-timeline-replay:hover {
  color: var(--acc);
  border-color: rgba(62, 207, 207, 0.5);
  transform: rotate(-30deg);
}
.reef-timeline-replay svg { width: 11px; height: 11px; }

.reef-timeline-legend {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--fb);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: rgba(232, 240, 243, 0.78);
  white-space: nowrap;
}
.reef-tl-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.reef-tl-leg-glyph {
  width: 11px; height: 11px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-block;
}
.reef-tl-leg-glyph.op {
  background: var(--acc);
  box-shadow: 0 0 6px rgba(62, 207, 207, 0.5);
}
.reef-tl-leg-glyph.pt {
  background: transparent;
  border: 1.2px solid rgba(232, 240, 243, 0.7);
}
.reef-tl-leg-glyph.fu {
  background: transparent;
  border: 1.2px dashed rgba(232, 240, 243, 0.45);
}
.reef-tl-leg-item b { font-weight: 400; color: #e8f0f3; }
.reef-tl-leg-tally {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 300;
  color: rgba(200, 216, 222, 0.55);
  margin-left: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
}
.reef-tl-leg-divider {
  width: 1px; height: 16px;
  background: rgba(200, 216, 222, 0.18);
  margin: 0 0.4rem;
}

.reef-tl-track {
  position: relative;
  height: 1px;
  background: rgba(200, 216, 222, 0.18);
  margin: 0 4px;
}
.reef-tl-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(to right, var(--c-mariix), var(--c-marvex) 50%, var(--c-oceion));
  transition: width 0.18s linear;
}
.reef-tl-thumb {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  background: var(--acc);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px rgba(62, 207, 207, 0.16);
  transition: box-shadow 0.2s var(--ease), transform 0.18s linear;
  pointer-events: auto;
}
.reef-tl-thumb:hover { box-shadow: 0 0 0 8px rgba(62, 207, 207, 0.22); }
.reef-tl-thumb.is-dragging { box-shadow: 0 0 0 9px rgba(62, 207, 207, 0.28); }
.reef-tl-nodes {
  position: absolute;
  top: 50%; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}
.reef-tl-node {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(200, 216, 222, 0.45);
  pointer-events: auto;
  border: none;
  padding: 0;
  transition: background 0.3s var(--ease), transform 0.25s var(--ease);
}
.reef-tl-node:hover {
  transform: scale(1.4);
  background: var(--acc);
}
.reef-tl-labels {
  position: absolute;
  top: calc(50% + 18px);
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--fb);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 216, 222, 0.5);
  pointer-events: none;
}
.reef-tl-labels span {
  flex: 1;
  text-align: center;
  transition: color 0.3s var(--ease);
  pointer-events: auto;
}
.reef-tl-labels span:first-child { text-align: left; }
.reef-tl-labels span:last-child  { text-align: right; }
.reef-tl-labels span.is-near { color: rgba(232, 240, 243, 0.95); }

/* ============================================================
   READING — Statement stack
   The canvas describes the field. This section argues.
============================================================ */
.eco-reading {
  background: var(--void);
  padding: 9rem 0 9rem;
}
.eco-reading-head {
  text-align: center;
  margin-bottom: 6rem;
  padding: 0 2rem;
}
.eco-reading-head h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  margin-top: 1rem;
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}
.eco-reading-sub {
  font-family: var(--fb);
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(200, 216, 222, 0.6);
  margin-top: 1.25rem;
  letter-spacing: 0.02em;
}

.reading-statements {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
}

.reading-statement {
  position: relative;
  padding: 4rem 0 4rem 5.5rem;
  border-top: 1px solid rgba(200, 216, 222, 0.08);
}
.reading-statement:last-child { border-bottom: 1px solid rgba(200, 216, 222, 0.08); }

/* Era numeral — upright Cormorant, lining figures, in left margin */
.reading-statement .stmt-num {
  position: absolute;
  left: 0; top: 4rem;
  font-family: var(--fd);
  font-style: normal;
  font-weight: 300;
  font-size: 1.9rem;
  line-height: 1;
  color: rgba(62, 207, 207, 0.45);
  letter-spacing: 0.02em;
  font-feature-settings: "lnum" 1;
  user-select: none;
}

.reading-statement .stmt-eyebrow {
  font-family: var(--fb);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--acc);
  display: block;
  margin-bottom: 1.4rem;
}

/* The thesis line — large, italic, the heart of the section */
.reading-statement .stmt-line {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.25;
  color: rgba(232, 240, 243, 0.95);
  letter-spacing: -0.005em;
  margin: 0;
}
.reading-statement .stmt-line em {
  font-style: italic;
  color: var(--acc);
  font-weight: 400;
}
.reading-statement .stmt-line strong {
  font-weight: 400;
  color: #ffffff;
  font-style: italic;
}

/* Expanding paragraph (closed by default) */
.reading-statement .stmt-detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.6s var(--ease), opacity 0.5s var(--ease), margin-top 0.6s var(--ease);
  margin-top: 0;
}
.reading-statement.is-open .stmt-detail {
  max-height: 360px;
  opacity: 1;
  margin-top: 1.6rem;
}
.reading-statement .stmt-detail p {
  font-family: var(--fb);
  font-size: 1.0625rem;          /* 17px audit */
  font-weight: 300;
  line-height: 1.7;
  color: rgba(232, 240, 243, 0.82);  /* α 0.82 audit */
  letter-spacing: 0.005em;
  max-width: 60ch;
}

/* Read more / Close toggle */
.reading-toggle {
  margin-top: 1.4rem;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--fb);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200, 216, 222, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  transition: color 0.3s var(--ease);
}
.reading-toggle:hover { color: var(--acc); }
.reading-toggle .chev {
  display: inline-block;
  width: 9px; height: 9px;
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s var(--ease);
  margin-bottom: 3px;
}
.reading-statement.is-open .reading-toggle .chev {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}
.reading-toggle .label-open  { display: inline; }
.reading-toggle .label-close { display: none; }
.reading-statement.is-open .reading-toggle .label-open  { display: none; }
.reading-statement.is-open .reading-toggle .label-close { display: inline; }

/* Per-era accent */
.reading-statement--i .stmt-num   { color: rgba(62, 207, 207, 0.45); }
.reading-statement--ii .stmt-num  { color: rgba(212, 168, 50, 0.55); }
.reading-statement--ii .stmt-eyebrow { color: var(--c-marvex); }
.reading-statement--iii .stmt-num  { color: rgba(155, 111, 201, 0.55); }
.reading-statement--iii .stmt-eyebrow { color: var(--c-oceion); }

/* Force-coloured stripe between numeral and content (open state only) */
.reading-statement::before {
  content: '';
  position: absolute;
  left: 3.4rem; top: 4rem; bottom: 4rem;
  width: 1px;
  background: rgba(62, 207, 207, 0);
  transition: background 0.5s var(--ease), width 0.45s var(--ease);
}
.reading-statement--i.is-open::before   { background: var(--c-mariix); width: 2px; }
.reading-statement--ii.is-open::before  { background: var(--c-marvex); width: 2px; }
.reading-statement--iii.is-open::before { background: var(--c-oceion); width: 2px; }

/* ============================================================
   SCHEMATIC APPENDIX — band stack
============================================================ */
.eco-structure {
  background: var(--void);
  padding: 7rem 0 0;
  border-top: 1px solid rgba(62, 207, 207, 0.10);
}
.eco-structure-head {
  text-align: center;
  padding: 0 2rem 3rem;
}
.eco-structure-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  margin-top: 1rem;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}
.eco-structure-head p {
  font-family: var(--fb);
  font-size: 1.0625rem;
  color: rgba(232, 240, 243, 0.82);
  margin: 1.25rem auto 0;
  max-width: 56ch;
  line-height: 1.7;
  font-weight: 300;
}
.eco-structure-sep {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(62, 207, 207, 0.18) 50%, transparent);
}

.eld-bands {
  display: flex;
  flex-direction: column;
}
.eld-band {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 0 3rem;
  text-decoration: none;
  transition: background 0.35s var(--ease);
  border-top: 1px solid rgba(200, 216, 222, 0.06);
  min-height: 88px;
  position: relative;
  overflow: hidden;
  color: inherit;
}
.eld-band:last-child { border-bottom: 1px solid rgba(200, 216, 222, 0.06); }

.eld-band::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.45s var(--ease);
  z-index: 3;
  background: var(--layer-c);
}
.eld-band:hover::before,
.eld-band:focus-visible::before { transform: scaleY(1); }

.eld-band-main {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transform: translateX(0);
  transition: transform 0.45s var(--ease);
}
.eld-band:hover .eld-band-main,
.eld-band:focus-visible .eld-band-main { transform: translateX(12px); }

.eld-num {
  font-family: var(--fd);
  font-size: 1rem;
  font-style: italic;
  color: rgba(200, 216, 222, 0.45);
  letter-spacing: 0.05em;
  align-self: center;
  text-align: center;
  transition: color 0.35s, opacity 0.35s;
}
.eld-band:hover .eld-num { opacity: 1; color: var(--layer-c); }
.eld-label {
  font-family: var(--fd);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 400;
  color: var(--heading);
  letter-spacing: 0.01em;
  line-height: 1;
  transition: color 0.35s;
}
.eld-band:hover .eld-label { color: var(--layer-c); }
.eld-sub {
  font-family: var(--fb);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: rgba(200, 216, 222, 0.55);
  text-transform: uppercase;
  transition: color 0.35s;
}
.eld-band:hover .eld-sub { color: rgba(232, 240, 243, 0.85); }
.eld-venture {
  font-family: var(--fb);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.4em 0.85em;
  border: 1px solid;
  border-radius: 2rem;
  opacity: 0.7;
  transition: opacity 0.35s, transform 0.35s;
  white-space: nowrap;
  color: var(--layer-c);
  border-color: color-mix(in srgb, var(--layer-c) 35%, transparent);
}
.eld-band:hover .eld-venture { opacity: 1; }

.eld-band--community    { background: rgba(62, 207, 207, 0.018); --layer-c: var(--c-mariix); }
.eld-band--interface    { background: rgba(212, 168, 50, 0.018); --layer-c: var(--c-marvex); }
.eld-band--lifecycle    { background: rgba(155, 111, 201, 0.018); --layer-c: var(--c-oceion); }
.eld-band--partnerships { background: rgba(200, 216, 222, 0.015); --layer-c: var(--c-neutral); }
.eld-band--governance   { background: rgba(200, 216, 222, 0.010); --layer-c: var(--c-gov); }
.eld-band--community:hover    { background: rgba(62, 207, 207, 0.040); }
.eld-band--interface:hover    { background: rgba(212, 168, 50, 0.040); }
.eld-band--lifecycle:hover    { background: rgba(155, 111, 201, 0.040); }
.eld-band--partnerships:hover { background: rgba(200, 216, 222, 0.035); }
.eld-band--governance:hover   { background: rgba(200, 216, 222, 0.025); }

/* ============================================================
   CTA BAND
============================================================ */
.cta-band {
  position: relative;
  background: var(--void);
  border-top: 1px solid rgba(62, 207, 207, 0.10);
  padding: 8rem 0 9rem;
  text-align: center;
  overflow: hidden;
}
.cta-band-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(62, 207, 207, 0.05), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(155, 111, 201, 0.03), transparent 50%);
  pointer-events: none;
}
.cta-band-inner {
  position: relative;
  z-index: 2;
}
.cta-band h2 {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  line-height: 1.05;
  margin: 1rem 0 1.5rem;
}
.cta-band p {
  font-family: var(--fb);
  font-size: 1.0625rem;
  color: rgba(232, 240, 243, 0.82);
  font-weight: 300;
  max-width: 52ch;
  margin: 0 auto 2.75rem;
  line-height: 1.7;
}
.cta-band-btns {
  display: inline-flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.btn {
  font-family: var(--fb);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.1em 2.2em;
  border-radius: 2rem;
  border: 1px solid;
  display: inline-block;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn-primary {
  background: var(--acc);
  color: var(--void);
  border-color: var(--acc);
}
.btn-primary:hover {
  background: transparent;
  color: var(--acc);
}
.btn-ghost {
  color: var(--prose);
  border-color: rgba(200, 216, 222, 0.25);
}
.btn-ghost:hover {
  color: var(--acc);
  border-color: var(--acc);
}

/* ============================================================
   REVEAL ON SCROLL
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .eco-scroll-line { animation: none; }
  .continuum-mark-wrap .cm-rotor,
  .continuum-mark-wrap .cm-breather { animation: none; }
  .reef-tl-thumb,
  .reef-tl-fill { transition: none; }
  .reading-statement .stmt-detail {
    transition: max-height 0s, opacity 0s, margin-top 0s;
  }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .reef-section { min-height: 700px; }
  .reef-timeline { padding: 0 1.5rem; height: 150px; }
  .reef-tl-leg-item b { display: none; }
  .reef-tl-leg-divider { display: none; }
  .reef-tl-leg-tally { font-size: 0.7rem; }
  .reef-timeline-headline span { display: none; }
  .continuum-caption .text { font-size: 0.78rem; }
  .continuum-mark-wrap { width: 76px; height: 76px; }
  .eld-band {
    grid-template-columns: 40px 1fr auto;
    gap: 1.25rem;
    padding: 0 1.5rem;
    min-height: 78px;
  }
  .eld-label { font-size: 1.25rem; }
  .eld-sub { font-size: 0.6rem; letter-spacing: 0.1em; }
  .eld-venture { font-size: 0.55rem; padding: 0.35em 0.7em; }
}

@media (max-width: 760px) {
  .reading-statement {
    padding: 3rem 0 3rem 3.5rem;
  }
  .reading-statement .stmt-num {
    font-size: 1.45rem;
    top: 3rem;
  }
  .reading-statement::before {
    left: 2.3rem;
    top: 3rem;
    bottom: 3rem;
  }
}