/* ━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --ink:    #050c15;
  --deep:   #091524;
  --chart:  #f2ead8;
  --ocean:  #0d3a54;
  --steel:  #1a5f7a;
  --gold:   #c8913a;
  --gold-l: #e8b870;
  --sand:   #d4b483;
  --fog:    #8fa8b8;
  --white:  #ffffff;

  /* Hero-only accent — see design.md "Why hybrid-refined". Duller/cooler
     than --gold on purpose; reserved for the hero's nameplate + scrub ring
     so the rest of the site's buttons/marquee stay on --gold unchanged. */
  --brass:   #b8894a;
  --brass-l: #d6a868;
  --salt:    #eff2f1;
  --scrim:   rgba(5,9,13,.55);

  --ff-d: 'Cormorant Garamond', Georgia, serif;
  --ff-c: 'Barlow Condensed', sans-serif;
  --ff-b: 'Barlow', sans-serif;

  --ease:  cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.77,0,.175,1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body { font-family: var(--ff-b); background: var(--ink); color: var(--white); overflow-x: hidden; }
/* The compass cursor hides the native pointer only when JS confirms it is
   actually running (body.cursor-on) — otherwise hybrid/touch devices and
   pages without the compass would be left with no visible cursor at all. */
body.cursor-on, body.cursor-on * { cursor: none !important; }
::selection { background: var(--gold); color: var(--ink); }

/* Keyboard focus — same gold language as hover states */
:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; border-radius: 4px; }

/* Skip link for keyboard/screen-reader users */
.skip-link { position: fixed; top: -60px; left: 1rem; z-index: 100000; background: var(--gold); color: var(--ink); font-family: var(--ff-c); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 12px 22px; border-radius: 0 0 12px 12px; transition: top .25s var(--ease); }
.skip-link:focus-visible { top: 0; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }

/* COMPASS CURSOR */
/* Parked at (0,0) until the first mousemove — keep it invisible until then
   or a gold arc peeks out of the page corner. */
#compass-cursor, #cursor-dot { opacity: 0; }
body.cursor-live #compass-cursor, body.cursor-live #cursor-dot { opacity: 1; }
#compass-cursor { position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none; width: 56px; height: 56px; transform: translate(-50%, -50%); transition: transform .05s linear; }
#compass-cursor svg { width: 100%; height: 100%; transition: transform .6s var(--ease); }
#compass-cursor .needle { transform-origin: 50% 50%; transition: transform .4s var(--ease); }
#cursor-dot { position: fixed; top: 0; left: 0; z-index: 99998; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); pointer-events: none; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(200,145,58,.8); mix-blend-mode: difference; }
body.hovering #compass-cursor { transform: translate(-50%,-50%) scale(1.5); }

/* PROGRESS BAR */
#bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9990; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--gold), var(--gold-l)); box-shadow: 0 0 12px rgba(200,145,58,.7); }

/* LOADER */

#loader { position: fixed; inset: 0; z-index: 9998; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; animation: loaderSafety .6s ease 9s forwards; }
/* Safety net: if main.js never runs (blocked/failed), the loader still gets
   out of the way instead of trapping the visitor on a 0% screen forever. */
@keyframes loaderSafety { to { opacity: 0; visibility: hidden; } }
.l-half { position: absolute; left: 0; right: 0; height: 50%; background: var(--ink); transition: transform 0.65s var(--ease2); }
.l-top { top: 0; }
.l-bot { bottom: 0; }
.l-half.exit-top { transform: translateY(-100%); }
.l-half.exit-bot { transform: translateY(100%); }

.l-ring-wrap { position: relative; width: 130px; height: 130px; display: grid; place-items: center; z-index: 1; }
.l-ring-spin { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--gold); border-right-color: rgba(200,145,58,.35); animation: spinLoader 1.4s linear infinite; }
.l-ring-slow { position: absolute; inset: 7px; border-radius: 50%; border: 1px solid transparent; border-bottom-color: rgba(200,145,58,.25); animation: spinLoader 2.6s linear infinite reverse; }
.l-logo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }

.l-pct-num { font-family: var(--ff-d); font-size: 2.4rem; font-weight: 700; color: var(--gold); line-height: 1; z-index: 1; }
.l-name { font-family: var(--ff-c); font-size: .58rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.2); z-index: 1; }

@keyframes spinLoader { to { transform: rotate(360deg); } }
.l-bar-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.06); }
.l-bar-fill { height: 100%; background: var(--gold); width: 0; transition: width .05s linear; }


/* HERO SCRUB RING — see HERO section below for the rest of the hero's CSS.
   (Kept as its own comment marker since the old scrollvid intro that used
   to live here has been folded into the hero itself.) */

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: 78px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; transition: height .4s var(--ease), background .4s, border-color .4s; border-bottom: 1px solid transparent; }
nav.dark { height: 64px; background: rgba(5,12,21,.95); backdrop-filter: blur(24px); border-color: rgba(200,145,58,.1); }
.logo { display: flex; align-items: center; transition: opacity .3s; }
.logo:hover { opacity: .9; }
.logo-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 22px 9px 11px;
  border: 1.8px solid rgba(200,145,58,.55);
  border-radius: 100px;
  background: rgba(200,145,58,.08);
  box-shadow: 0 0 18px rgba(200,145,58,.10);
  transition: all .4s var(--ease);}
.logo:hover .logo-pill { background: rgba(200,145,58,.13); border-color: var(--gold); box-shadow: 0 0 32px rgba(200,145,58,.18); }
.logo-name { font-family: var(--ff-d); font-size: 1.32rem; font-weight: 700; letter-spacing: .03em; color: var(--white); }
.logo-name em { font-style: normal; color: var(--gold); }
.logo-sub { font-family: var(--ff-c); font-size: .5rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(200,145,58,.5); margin-top: 2px; display: block; }
.nav-links { display: flex; gap: 2.4rem; list-style: none; }
.nav-links a { font-family: var(--ff-c); font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); position: relative; transition: color .3s; }
.nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 50%; right: 50%; height: 1px; background: var(--gold); transition: left .35s var(--ease), right .35s var(--ease); }
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { left: 0; right: 0; }
.nav-r { display: flex; align-items: center; gap: 1.5rem; }
.nav-pulse { display: flex; align-items: center; gap: 7px; font-family: var(--ff-c); font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 3s infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(200,145,58,.6); } 50%{ box-shadow:0 0 0 8px rgba(200,145,58,0); } }
.nav-btn { font-family: var(--ff-c); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 10px 24px; border-radius: 100px; box-shadow: 0 4px 20px rgba(200,145,58,.35); transition: all .3s var(--ease); }
.nav-btn:hover { background: var(--gold-l); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(200,145,58,.5); }
.ocean-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-height: 48px;
  border: 1px solid rgba(200,145,58,.32);
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(3, 28, 38, 0.85) 0%, rgba(1, 12, 17, 0.95) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.ocean-pill-canvas {
  display: none; /* replaced by video */
}
.ocean-pill-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}
.ocean-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 45%, rgba(5,12,21,.22));
}
.ocean-pill-links {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  min-height: 48px;
  padding: 0 10px;
}
.ocean-pill-links a {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: var(--ff-c);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  text-shadow: 0 1px 7px rgba(5,12,21,.65);
 
  transition: color .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.ocean-pill-links a:hover,
.ocean-pill-links a.active {
  color: var(--ink);
  background: rgba(232,184,112,.9);
  text-shadow: none;
}

/* ── MOBILE MENU (hamburger + full-screen drawer) ── */
.menu-toggle { display: none; position: relative; z-index: 620; width: 46px; height: 46px; border: 1px solid rgba(200,145,58,.4); border-radius: 50%; background: rgba(5,12,21,.55); backdrop-filter: blur(10px); align-items: center; justify-content: center; flex-direction: column; gap: 5px; transition: border-color .3s, background .3s; }
.menu-toggle span { display: block; width: 18px; height: 1.8px; background: var(--gold-l); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s, width .35s var(--ease); }
.menu-toggle:hover { border-color: var(--gold); background: rgba(200,145,58,.12); }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; width: 4px; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* While the drawer is open the nav must float above it (so the toggle stays
   reachable) and drop its scrolled-state backdrop so it reads as one layer. */
body.menu-open nav { z-index: 700; background: transparent; border-color: transparent; backdrop-filter: none; }

.drawer { position: fixed; inset: 0; z-index: 600; background: radial-gradient(120% 90% at 85% 8%, rgba(13,58,84,.55) 0%, transparent 55%), radial-gradient(100% 80% at 10% 100%, rgba(26,95,122,.35) 0%, transparent 60%), var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 90px 8vw 40px; visibility: hidden; opacity: 0; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
body.menu-open .drawer { visibility: visible; opacity: 1; transition: opacity .45s var(--ease); }
.drawer::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .04; background-image: linear-gradient(rgba(200,145,58,.9) 1px, transparent 1px), linear-gradient(90deg, rgba(200,145,58,.9) 1px, transparent 1px); background-size: 64px 64px; }
.drawer-rose { position: absolute; right: -110px; bottom: -110px; width: 380px; height: 380px; opacity: .25; pointer-events: none; }
.drawer-links { list-style: none; display: flex; flex-direction: column; position: relative; z-index: 1; }
.drawer-links li { border-bottom: 1px solid rgba(255,255,255,.07); opacity: 0; transform: translateY(26px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
body.menu-open .drawer-links li { opacity: 1; transform: none; }
body.menu-open .drawer-links li:nth-child(1) { transition-delay: .1s; }
body.menu-open .drawer-links li:nth-child(2) { transition-delay: .17s; }
body.menu-open .drawer-links li:nth-child(3) { transition-delay: .24s; }
body.menu-open .drawer-links li:nth-child(4) { transition-delay: .31s; }
body.menu-open .drawer-links li:nth-child(5) { transition-delay: .38s; }
.drawer-links a { display: flex; align-items: baseline; gap: 1.1rem; padding: 1.05rem 0; }
.drawer-links .dl-n { font-family: var(--ff-c); font-size: .68rem; font-weight: 600; letter-spacing: .2em; color: rgba(200,145,58,.55); width: 2rem; flex-shrink: 0; }
.drawer-links .dl-t { font-family: var(--ff-d); font-size: clamp(2rem, 8.5vw, 3rem); font-weight: 700; line-height: 1.05; color: var(--white); transition: color .3s, transform .35s var(--ease); }
.drawer-links a:hover .dl-t, .drawer-links a:focus-visible .dl-t { color: var(--gold-l); font-style: italic; transform: translateX(8px); }
.drawer-foot { position: relative; z-index: 1; margin-top: 2.4rem; display: flex; flex-direction: column; gap: .5rem; opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease) .48s, transform .55s var(--ease) .48s; }
body.menu-open .drawer-foot { opacity: 1; transform: none; }
.drawer-foot a { font-family: var(--ff-c); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); transition: color .3s; }
.drawer-foot a:hover { color: var(--gold); }
.drawer-foot .df-tag { font-family: var(--ff-c); font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(200,145,58,.45); }

/* HERO
   #hero is a tall (300vh / 200vh mobile) pinned wrapper — see design.md
   "Layout — the hero stage". #hero-stage sticks for that span while
   js/main.js's initScrollFrames() draws the scroll-matched frame from
   assets/frames/hero/ onto #hero-canvas. The inline background-image on
   #hero-stage (the poster frame) is the zero-JS / pre-load fallback: canvas
   paints over it once frames are ready, reduced-motion/lite mode just leave
   it showing underneath a hidden canvas. */
.hero { position: relative; height: 300vh; background: var(--ink); }
.hero-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: flex-end; background-size: cover; background-position: center; }
#hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.hero-stage::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(5,12,21,.1) 0%, var(--scrim) 65%, rgba(5,12,21,.97) 100%), linear-gradient(to right, rgba(5,12,21,.7) 0%, transparent 55%); }
.hero-stage::after { content: ''; position: absolute; inset: 0; z-index: 2; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#chart-canvas { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .55; }
.hero-inner { position: relative; z-index: 4; padding: 0 5vw 10vh; max-width: 1400px; margin: 0 auto; width: 100%; }
.section-marker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-c); font-size: .65rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 2rem; opacity: 0; transform: translateX(-20px); transition: all .8s var(--ease); }
.section-marker.show { opacity: 1; transform: none; }
.section-marker::before { content: ''; width: 38px; height: 1.5px; background: var(--gold); display: block; flex-shrink: 0; }

/* Signature: the transom nameplate — see design.md. A hairline frame (with
   corner "rivet" ticks) around the title, plus a small vessel-code line,
   styled like lettering welded onto a hull rather than a plain headline. */
.nameplate { position: relative; }
.np-code { font-family: var(--ff-c); font-size: .62rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--brass); margin-bottom: .95rem; opacity: 0; transform: translateY(8px); transition: all .8s var(--ease) .2s; }
.nameplate.show .np-code { opacity: 1; transform: none; }

.mega-title { font-family: var(--ff-d); font-size: clamp(5.5rem, 14vw, 15rem); font-weight: 700; line-height: .9; letter-spacing: -.01em; color: var(--salt); overflow: hidden; text-shadow: -1px -1px 0 rgba(5,9,13,.4), 1px 1px 0 rgba(214,168,104,.2); }
.mega-title .line { display: block; overflow: hidden; }
.mega-title .word { display: inline-block; transform: translateY(105%); opacity: 0; animation: wordReveal .9s var(--ease2) forwards; }
.mega-title .ln2 { padding-left: clamp(2rem, 9vw, 11rem); }
.mega-title .ln2 .word { color: var(--brass-l); font-style: italic; animation-delay: .18s; }
@keyframes wordReveal { to { transform: translateY(0); opacity: 1; } }
.hero-sub { font-family: var(--ff-b); font-size: clamp(1.125rem, 1.6vw, 1.25rem); font-weight: 300; color: rgba(255,255,255,.75); max-width: 440px; line-height: 2; margin-top: 2.5rem; opacity: 0; transform: translateY(24px); transition: all .9s 1.1s var(--ease); }
.hero-sub.show { opacity: 1; transform: none; }
.hero-sub strong { font-weight: 500; color: rgba(255,255,255,.95); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.8rem; opacity: 0; transform: translateY(24px); transition: all .9s 1.3s var(--ease); }
.hero-actions.show { opacity: 1; transform: none; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-c); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: none; border-radius: 100px; padding: 16px 38px; position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--bx,50%) var(--by,50%), rgba(255,255,255,.32) 0%, transparent 55%); opacity: 0; transition: opacity .4s; }
.btn-gold:hover { box-shadow: 0 18px 54px rgba(200,145,58,.55); }
.btn-gold:hover::before { opacity: 1; }
.btn-line { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.38); }
.btn-line:hover { border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.07); }
.hero-stats { position: absolute; bottom: 0; right: 0; z-index: 4; display: flex; background: rgba(5,12,21,.9); backdrop-filter: blur(28px); border-top: 1px solid rgba(200,145,58,.14); border-left: 1px solid rgba(200,145,58,.14); opacity: 0; transition: opacity .9s 1.5s var(--ease); }
.hero-stats.show { opacity: 1; }
.h-stat { padding: 1.6rem 2.2rem; border-right: 1px solid rgba(255,255,255,.05); text-align: center; transition: background .3s; cursor: default; }
.h-stat:last-child { border-right: none; }
.h-stat:hover { background: rgba(200,145,58,.06); }
.h-num { display: block; font-family: var(--ff-d); font-size: 2.4rem; font-weight: 700; color: var(--gold); line-height: 1; }
.h-lbl { display: block; font-family: var(--ff-c); font-size: .56rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 5px; }
.hero-scroll { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 1; transition: opacity .5s var(--ease); }
.hero-stage.scrolled .hero-scroll { opacity: 0; }
.scroll-label { font-family: var(--ff-c); font-size: .55rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.scroll-track { width: 1px; height: 60px; position: relative; overflow: hidden; }
.scroll-track::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.15); }
.scroll-track::after { content: ''; position: absolute; top: -100%; left: 0; right: 0; height: 100%; background: var(--gold); animation: scrollFall 2s 2.5s var(--ease) infinite; }
@keyframes scrollFall { 0%{ top:-100%; } 100%{ top:100%; } }

/* Compass-styled scrub progress ring — fills as the frame sequence advances */
.hero-ring { position: absolute; bottom: 2.6rem; left: 2.6rem; z-index: 4; width: 56px; height: 56px; opacity: 0; transition: opacity .4s var(--ease); }
.hero-stage.scrolled .hero-ring { opacity: 1; }
.hero-stage.ending .hero-ring { opacity: 0; }
.hero-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hero-ring .ring-track { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 2; }
.hero-ring .ring-fill { fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 125.66; stroke-dashoffset: 125.66; filter: drop-shadow(0 0 6px rgba(184,137,74,.6)); }
.hero-ring .ring-n { font-family: var(--ff-c); font-size: 9px; font-weight: 700; letter-spacing: .18em; fill: rgba(255,255,255,.55); transform: rotate(90deg); transform-origin: 22px 22px; }
@media (max-width: 760px) {
  .hero { height: 200vh; }
  .hero-ring { left: 1.4rem; bottom: 1.6rem; }
  /* The stats plate and scroll hint are both bottom-anchored; at
     narrow/short viewports they can collide. Drop the redundant scroll
     hint (the ring already signals progress) and shrink the stats plate so
     it doesn't span/overflow the full width. */
  .hero-scroll { display: none; }
  .h-stat { padding: 1rem .85rem; }
  .h-num { font-size: 1.5rem; }
  .h-lbl { font-size: .48rem; }
}

/* MARQUEE */
.marquee { background: var(--gold); padding: 13px 0; overflow: hidden; position: relative; z-index: 3; }
.marquee-track { display: flex; width: max-content; animation: marqueeRun 24s linear infinite; }
.m-item { font-family: var(--ff-c); font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding: 0 2.8rem; display: flex; align-items: center; gap: 2.8rem; white-space: nowrap; }
.m-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(5,12,21,.3); flex-shrink: 0; }
@keyframes marqueeRun { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* SHARED */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 5vw; }
.sec { padding: 120px 0; }
@media(max-width:900px) { .sec { padding: 80px 0; } }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-c); font-size: .66rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 1rem; }
.eyebrow::before { content: ''; width: 26px; height: 1.5px; background: var(--gold); display: block; flex-shrink: 0; }
.eyebrow.dark { color: var(--ocean); }
.eyebrow.light { color: rgba(200,145,58,.85); }
.h2 { font-family: var(--ff-d); font-size: clamp(2.6rem, 5.5vw, 5.2rem); font-weight: 700; line-height: 1.02; letter-spacing: -.015em; }
.h2 em { font-style: italic; }
.h2.on-light { color: var(--ink); }
.h2.on-light em { color: var(--ocean); }
.h2.on-dark { color: var(--white); }
.h2.on-dark em { color: var(--gold); }
.body-text { font-family: var(--ff-b); font-size: 1.07rem; font-weight: 300; line-height: 1.95; }
.body-text.on-light { color: rgba(5,12,21,.58); }
.body-text.on-dark { color: rgba(255,255,255,.65); }

/* SCROLL REVEAL */
[data-r] { opacity: 0; will-change: opacity, transform; }
[data-r="up"]    { transform: translateY(52px); }
[data-r="left"]  { transform: translateX(-52px); }
[data-r="right"] { transform: translateX(52px); }
[data-r="scale"] { transform: scale(.92) translateY(24px); }
[data-r="fade"]  { transform: none; }
[data-r].on { opacity: 1; transform: none; transition: opacity .95s var(--ease), transform .95s var(--ease); }

/* MISSION */
.sec-mission { background: var(--chart); color: var(--ink); position: relative; overflow: hidden; }
.sec-mission::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06; background-image: linear-gradient(rgba(9,21,36,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(9,21,36,.6) 1px, transparent 1px); background-size: 60px 60px; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.pillar-list { margin-top: 3rem; }
.pl { display: flex; gap: 1.6rem; padding: 1.7rem 0; border-bottom: 1px solid rgba(9,21,36,.1); align-items: flex-start; cursor: default; position: relative; transition: padding-left .35s var(--ease); }
.pl:first-child { border-top: 1px solid rgba(9,21,36,.1); }
.pl::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(200,145,58,.1), transparent); transition: width .4s var(--ease); }
.pl:hover { padding-left: 10px; }
.pl:hover::before { width: 100%; }
.pl-n { font-family: var(--ff-d); font-size: 1.9rem; font-weight: 700; color: rgba(9,21,36,.1); flex-shrink: 0; width: 36px; line-height: 1; transition: color .3s; }
.pl:hover .pl-n { color: var(--gold); }
.pl h4 { font-family: var(--ff-c); font-size: 1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ocean); margin-bottom: .35rem; }
.pl p { font-size: .97rem; font-weight: 300; color: rgba(9,21,36,.58); line-height: 1.82; margin: 0; }
.mission-card { background: var(--ocean); border-radius: 22px; padding: 3.5rem; color: var(--white); position: relative; overflow: hidden; box-shadow: 0 50px 100px rgba(9,21,36,.2); transition: transform .6s var(--ease), box-shadow .6s; transform-style: preserve-3d; }
.mission-card:hover { transform: translateY(-6px); box-shadow: 0 60px 120px rgba(9,21,36,.28); }
.mission-card::before { content: ''; position: absolute; top: -40%; right: -20%; width: 80%; height: 140%; background: radial-gradient(ellipse, rgba(200,145,58,.1) 0%, transparent 65%); pointer-events: none; }
.card-compass { position: absolute; bottom: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255,255,255,.05); pointer-events: none; }
.card-compass::before { content: ''; position: absolute; inset: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,.04); }
.card-compass::after { content: ''; position: absolute; inset: 40px; border-radius: 50%; border: 1px solid rgba(200,145,58,.06); }
.card-label { font-family: var(--ff-c); font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(200,145,58,.7); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 8px; }
.card-label::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
.mission-card h3 { font-family: var(--ff-d); font-size: 2.1rem; font-weight: 700; font-style: italic; line-height: 1.1; color: var(--white); margin-bottom: 1.1rem; }
.mission-card p { font-size: .85rem; font-weight: 300; color: rgba(255,255,255,.6); line-height: 1.85; }
.eu-badge { margin-top: 2rem; padding: 1.4rem 1.6rem; background: rgba(200,145,58,.08); border: 1px solid rgba(200,145,58,.2); border-radius: 12px; display: flex; align-items: center; gap: 1.2rem; }
.eu-flag { font-size: 2rem; flex-shrink: 0; }
.eu-badge h5 { font-family: var(--ff-c); font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: var(--white); margin-bottom: .2rem; }
.eu-badge p { font-size: .74rem; font-weight: 300; color: rgba(255,255,255,.5); margin: 0; }
.eu-id { font-family: 'Courier New', monospace; font-size: .68rem; font-weight: 700; color: var(--gold); letter-spacing: .08em; margin-top: .35rem; }

/* WAVE DIVIDERS */
.wave-div { display: block; overflow: hidden; line-height: 0; position: relative; z-index: 2; margin-bottom: -1px; }
.wave-div svg { display: block; width: 100%; }

/* UNITS */
.units-outer { height: 500vh; position: relative; background: var(--deep); }
.units-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.units-head { padding: 70px 5vw 40px; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; }
.units-progress { display: flex; align-items: center; gap: 1rem; padding-bottom: .35rem; }
.units-track-bar { width: 100px; height: 1px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.units-track-fill { position: absolute; inset-y: 0; left: 0; background: var(--gold); width: 0%; transition: width .08s linear; }
.units-hint { font-family: var(--ff-c); font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.28); }
.units-cards { flex: 1; display: flex; align-items: center; gap: 20px; padding: 0 5vw; will-change: transform; }
.u-card { flex-shrink: 0; width: clamp(300px, 34vw, 480px); height: 420px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 2.6rem 2.4rem; position: relative; overflow: hidden; cursor: default; transition: background .5s var(--ease), border-color .5s, transform .5s var(--ease); }
.u-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-l)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.u-card:hover { background: rgba(26,95,122,.3); border-color: rgba(200,145,58,.2); transform: translateY(-8px); }
.u-card:hover::after { transform: scaleX(1); }
.u-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(200,145,58,.09) 0%, transparent 70%); pointer-events: none; transform: translate(-50%,-50%); opacity: 0; transition: opacity .4s; }
.u-card:hover .u-glow { opacity: 1; }
.u-n { font-family: var(--ff-d); font-size: 3.4rem; font-weight: 700; color: rgba(200,145,58,.08); line-height: 1; margin-bottom: 1.3rem; transition: color .4s; }
.u-card:hover .u-n { color: rgba(200,145,58,.2); }
.u-icon { width: 42px; height: 42px; color: rgba(200,145,58,.55); margin-bottom: 1.1rem; transition: all .45s var(--ease); }
.u-card:hover .u-icon { color: var(--gold); transform: scale(1.1) rotate(-9deg); }
.u-card h3 { font-family: var(--ff-d); font-size: 1.7rem; font-weight: 700; color: var(--white); margin-bottom: .7rem; line-height: 1.1; }
.u-card p { font-size: .9rem; font-weight: 300; color: rgba(255,255,255,.64); line-height: 1.85; }
.u-tag { display: inline-block; margin-top: 1.4rem; font-family: var(--ff-c); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(200,145,58,.22); padding: 5px 14px; border-radius: 100px; opacity: 0; transform: translateY(8px); transition: all .45s var(--ease); }
.u-card:hover .u-tag { opacity: 1; transform: none; background: rgba(200,145,58,.07); }

/* HOW WE WORK */
.sec-how { background: var(--ink); }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,9vw,10rem); align-items: start; }
.how-list { margin-top: 2.8rem; }
.how-item { display: flex; gap: 1.6rem; padding: 1.8rem 0; border-bottom: 1px solid rgba(255,255,255,.06); align-items: flex-start; cursor: default; position: relative; transition: padding-left .35s var(--ease); }
.how-item:first-child { border-top: 1px solid rgba(255,255,255,.06); }
.how-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(200,145,58,.07), transparent); transition: width .4s var(--ease); }
.how-item:hover { padding-left: 12px; }
.how-item:hover::before { width: 100%; }
.how-sym { font-family: var(--ff-d); font-size: 2rem; font-weight: 300; color: rgba(200,145,58,.2); flex-shrink: 0; width: 34px; line-height: 1; transition: color .3s; }
.how-item:hover .how-sym { color: var(--gold); }
.how-item h4 { font-family: var(--ff-c); font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--white); margin-bottom: .4rem; }
.how-item p { font-size: .83rem; font-weight: 300; color: rgba(255,255,255,.64); line-height: 1.85; margin: 0; }
.net-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.net-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 1.8rem; position: relative; overflow: hidden; transition: all .4s var(--ease); cursor: default; }
.net-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-l)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.net-card:hover { background: rgba(26,95,122,.28); border-color: rgba(200,145,58,.2); transform: translateY(-5px); }
.net-card:hover::after { transform: scaleX(1); }
.net-icon { width: 32px; height: 32px; color: rgba(200,145,58,.5); margin-bottom: .9rem; transition: all .35s var(--ease); }
.net-card:hover .net-icon { color: var(--gold); transform: scale(1.1) rotate(-8deg); }
.net-card h5 { font-family: var(--ff-c); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--white); margin-bottom: .6rem; }
.net-card ul { list-style: none; }
.net-card li { font-size: .76rem; font-weight: 300; color: rgba(255,255,255,.6); padding: 3px 0; display: flex; align-items: center; gap: 7px; }
.net-card li::before { content: ','; color: var(--gold); flex-shrink: 0; }

/* NUMBERS */
.sec-nums { background: var(--ocean); position: relative; overflow: hidden; padding: 100px 0; }
.sec-nums::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80vmax; height: 80vmax; border-radius: 50%; background: radial-gradient(circle, rgba(5,12,21,.35) 0%, transparent 70%); pointer-events: none; }
.nums-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.07); margin-top: 4rem; position: relative; z-index: 1; }
.num-cell { background: var(--ocean); padding: 3.5rem 2.5rem; position: relative; overflow: hidden; cursor: default; transition: background .4s; }
.num-cell::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-l), transparent); transform: scaleX(0); transition: transform .5s var(--ease); }
.num-cell:hover { background: rgba(9,21,36,.4); }
.num-cell:hover::after { transform: scaleX(1); }
.num-val { display: block; font-family: var(--ff-d); font-size: clamp(2.8rem,5vw,4.5rem); font-weight: 700; color: var(--gold-l); line-height: 1; margin-bottom: .5rem; }
.num-lbl { font-family: var(--ff-c); font-size: .65rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); line-height: 1.6; }

/* BLUE ECONOMY OBSERVATORY — homepage teaser (#insights) + insights.html.
   See data-section.md for background. Stat tiles reuse .nums-grid/.num-cell/
   .num-val as-is (populated live by js/observatory.js); chart panels are
   dark "engraved chart" boxes so js/observatory.js's canvas colors (tuned
   for a dark ground) read correctly regardless of the section's own
   background. */

.obs-teaser { background: var(--chart); color: var(--ink); position: relative; overflow: hidden; }
.obs-teaser::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06; background-image: linear-gradient(rgba(9,21,36,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(9,21,36,.6) 1px, transparent 1px); background-size: 60px 60px; }
.obs-teaser-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.obs-teaser-link { color: var(--ink); border: 1px solid rgba(5,12,21,.28); flex-shrink: 0; }
.obs-teaser-link:hover { border-color: var(--ink); background: rgba(5,12,21,.06); }
.obs-teaser-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: stretch; }
.obs-teaser-stats.nums-grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; margin-top: 0; }
.obs-teaser-stats .num-cell { padding: 2rem 1.8rem; }
.obs-teaser-stats .num-val { font-size: clamp(2rem,3vw,2.6rem); }
.obs-teaser-chart { background: var(--ink); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(184,137,74,.22); display: flex; align-items: center; }
.obs-teaser-chart canvas { width: 100%; height: auto; display: block; }

/* insights.html — intro band */
.obs-hero { background: var(--ink); padding: 168px 0 70px; position: relative; }
.obs-hero p { max-width: 620px; }

/* insights.html — headline stat tiles: same look as homepage Numbers, plus
   a small delta tag under the label. Only 3 tiles here (vs. 4 on the
   homepage Numbers section), so the column count is overridden rather than
   inherited — repeat(4,1fr) would leave a visible empty 4th track. */
.obs-stats.sec-nums { padding-top: 70px; }
.obs-stats .nums-grid { grid-template-columns: repeat(3,1fr); }
.obs-delta { display: inline-block; margin-top: .8rem; font-family: var(--ff-c); font-size: .6rem; font-weight: 700; letter-spacing: .12em; color: var(--gold-l); }

/* insights.html — chart panels */
.obs-charts { padding-top: 90px; }
.obs-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.obs-chart-panel { background: var(--deep); border: 1px solid rgba(184,137,74,.2); border-radius: 16px; padding: 1.9rem 1.9rem 1.4rem; }
.obs-chart-panel h3 { font-family: var(--ff-c); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(239,242,241,.75); margin-bottom: 1.2rem; }
.obs-chart-panel canvas { width: 100%; height: auto; display: block; }
.obs-chart-note { margin-top: 1rem; font-size: .82rem; font-weight: 300; color: rgba(255,255,255,.5); line-height: 1.6; }

/* insights.html — Fleet Watch: live AIS map + six maritime chokepoints */
.obs-fleetwatch { padding-top: 30px; }
.fw-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.fw-livestats { display: flex; gap: 2.2rem; flex-shrink: 0; }
.fw-stat { text-align: right; }
.fw-stat-val { display: block; font-family: var(--ff-d); font-size: 2.2rem; font-weight: 700; color: var(--gold-l); line-height: 1; }
.fw-stat-val--sm { font-size: 1.15rem; }
.fw-stat-lbl { display: block; margin-top: .4rem; font-family: var(--ff-c); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }

.fw-map-wrap { position: relative; background: var(--deep); border: 1px solid rgba(184,137,74,.2); border-radius: 16px; overflow: hidden; }
.fw-map-wrap canvas { display: block; width: 100%; }
.fw-nodes { position: absolute; inset: 0; pointer-events: none; }
.fw-node { position: absolute; transform: translate(-50%,-50%); pointer-events: auto; display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 6px; cursor: pointer; }
.fw-node-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 0 4px rgba(232,184,112,.15); transition: all .25s var(--ease); flex-shrink: 0; }
.fw-node-dot--secondary { width: 6px; height: 6px; background: rgba(232,184,112,.55); box-shadow: 0 0 0 3px rgba(232,184,112,.1); }
.fw-node-label { font-family: var(--ff-c); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(239,242,241,.7); white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: all .25s var(--ease); text-shadow: 0 1px 6px rgba(5,9,13,.9); }
.fw-node:hover .fw-node-label, .fw-node:focus-visible .fw-node-label, .fw-node.active .fw-node-label { opacity: 1; transform: none; }
.fw-node:hover .fw-node-dot, .fw-node:focus-visible .fw-node-dot, .fw-node.active .fw-node-dot { background: var(--white); box-shadow: 0 0 0 6px rgba(232,184,112,.3); }
.fw-node:focus-visible { outline: none; }
.fw-hud { position: absolute; bottom: 14px; right: 16px; font-family: var(--ff-c); font-size: .62rem; letter-spacing: .1em; color: rgba(232,184,112,.75); opacity: 0; transition: opacity .2s; pointer-events: none; }
.fw-live-note { position: absolute; top: 14px; left: 16px; right: 16px; margin: 0; padding: 8px 14px; background: rgba(5,9,13,.85); border: 1px solid rgba(200,145,58,.3); border-radius: 8px; font-family: var(--ff-c); font-size: .64rem; letter-spacing: .04em; color: rgba(232,184,112,.85); }
.fw-legend { position: absolute; bottom: 14px; left: 16px; display: flex; gap: 14px; flex-wrap: wrap; pointer-events: none; }
.fw-legend-item { display: flex; align-items: center; gap: 6px; font-family: var(--ff-c); font-size: .56rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(239,242,241,.5); text-shadow: 0 1px 6px rgba(5,9,13,.9); }
.fw-legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 0 3px rgba(232,184,112,.18); flex-shrink: 0; }
.fw-legend-dot--secondary { width: 5px; height: 5px; background: rgba(232,184,112,.5); box-shadow: 0 0 0 2px rgba(232,184,112,.1); }
.fw-legend-line { width: 16px; height: 0; border-top: 1px dashed rgba(232,184,112,.6); display: inline-block; flex-shrink: 0; }
.fw-routes { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.fw-route-chip { font-family: var(--ff-c); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(239,242,241,.65); background: rgba(184,137,74,.08); border: 1px solid rgba(184,137,74,.25); border-radius: 999px; padding: .5rem 1.1rem; cursor: pointer; transition: all .2s var(--ease); }
.fw-route-chip:hover, .fw-route-chip:focus-visible { color: var(--white); border-color: rgba(232,184,112,.5); background: rgba(184,137,74,.16); outline: none; }
.fw-route-chip.active { color: var(--ink); background: var(--gold-l); border-color: var(--gold-l); }

.fw-detail { margin-top: 1.5rem; background: var(--deep); border: 1px solid rgba(184,137,74,.2); border-radius: 16px; padding: 1.8rem 2rem; min-height: 92px; }
.fw-detail-empty { font-size: .85rem; color: rgba(255,255,255,.4); font-style: italic; }
.fw-detail-tag { display: inline-block; margin-bottom: .7rem; font-family: var(--ff-c); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); }
.fw-detail h4 { font-family: var(--ff-d); font-size: 1.4rem; color: var(--white); margin-bottom: .6rem; }
.fw-detail p { font-size: .9rem; font-weight: 300; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: .8rem; }
.fw-detail-source { font-family: var(--ff-c); font-size: .64rem; letter-spacing: .06em; color: rgba(200,145,58,.7); }
.fw-detail-source:hover { color: var(--gold-l); }

/* insights.html — sourcing line */
.obs-source { padding: 2.5rem 0 4rem; border-top: 1px solid rgba(255,255,255,.06); margin-top: 3rem; }
.obs-source p { text-align: center; font-size: .74rem; color: rgba(255,255,255,.4); font-family: var(--ff-b); line-height: 1.8; }
.obs-source a { color: var(--gold-l); }
.obs-source code { font-family: monospace; font-size: .72em; color: rgba(255,255,255,.5); }

/* CTA */
.sec-cta { background: var(--deep); text-align: center; position: relative; overflow: hidden; }
.cta-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.c-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(200,145,58,.05); animation: ringExpand 10s linear infinite; }
.c-ring:nth-child(1){ width:20vmax;height:20vmax;animation-delay:0s }
.c-ring:nth-child(2){ width:38vmax;height:38vmax;animation-delay:2.5s }
.c-ring:nth-child(3){ width:58vmax;height:58vmax;animation-delay:5s }
.c-ring:nth-child(4){ width:78vmax;height:78vmax;animation-delay:7.5s }
@keyframes ringExpand { 0%{opacity:0;transform:scale(.75)} 15%{opacity:1} 85%{opacity:.2} 100%{opacity:0;transform:scale(1.1)} }
.cta-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
.cta-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; margin: 3.5rem auto; text-align: left; max-width: 1000px; }
.cta-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 2rem 1.8rem; cursor: default; position: relative; overflow: hidden; transition: all .45s var(--ease); }
.cta-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--cx,50%) var(--cy,50%), rgba(200,145,58,.1) 0%, transparent 60%); opacity: 0; transition: opacity .3s; }
.cta-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-l)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.cta-card:hover { background: rgba(255,255,255,.08); border-color: rgba(200,145,58,.3); transform: translateY(-8px); box-shadow: 0 26px 64px rgba(0,0,0,.4); }
.cta-card:hover::before { opacity: 1; }
.cta-card:hover::after { transform: scaleX(1); }
.cta-icon { width: 34px; height: 34px; color: var(--gold); margin-bottom: 1rem; transition: transform .4s var(--ease); }
.cta-card:hover .cta-icon { transform: scale(1.2) rotate(-10deg); }
.cta-card h5 { font-family: var(--ff-c); font-size: .86rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--white); margin-bottom: .4rem; line-height: 1.3; }
.cta-card p { font-size: .79rem; font-weight: 300; color: rgba(255,255,255,.6); line-height: 1.7; margin: 0; }
.cta-btns { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }

/* FOOTER */
footer { background: var(--ink); padding: 4.2rem 5vw 2.2rem; border-top: 1px solid rgba(255,255,255,.06); }
.ft-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto; padding-bottom: 2.6rem; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 1.6rem; }
.ft-logo { display: inline-flex; align-items: center; gap: 12px; border: 1.5px solid rgba(200,145,58,.3); border-radius: 100px; background: rgba(200,145,58,.05); padding: 8px 20px 8px 9px; margin-bottom: 1.2rem; transition: all .4s var(--ease); width: fit-content; }
.ft-logo:hover { background: rgba(200,145,58,.12); border-color: var(--gold); box-shadow: 0 0 32px rgba(200,145,58,.15); }
.ft-li { display: flex; align-items: center; flex-shrink: 0; }
.ft-ln { font-family: var(--ff-d); font-size: 1.15rem; font-weight: 700; color: var(--white); letter-spacing: .03em; }
.ft-ln em { font-style: normal; color: var(--gold); }
.ft-brand p { font-size: .8rem; font-weight: 300; color: rgba(255,255,255,.58); line-height: 1.85; max-width: 265px; }
.ft-soc { display: flex; gap: .7rem; margin-top: 1.4rem; }
.ft-s { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); display: grid; place-items: center; color: rgba(255,255,255,.35); font-family: var(--ff-c); font-size: .65rem; font-weight: 700; transition: all .3s var(--ease); }
.ft-s:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(200,145,58,.2); }
.ft-col h5 { font-family: var(--ff-c); font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--white); margin-bottom: 1.5rem; }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.ft-col a { font-size: .8rem; font-weight: 300; color: rgba(255,255,255,.56); display: inline-block; transition: color .3s, transform .3s; }
.ft-col a:hover { color: var(--gold); transform: translateX(5px); }
.ft-row { display: flex; gap: 9px; font-size: .8rem; font-weight: 300; color: rgba(255,255,255,.45); margin-bottom: .7rem; align-items: flex-start; }
.ft-row svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--gold); }
.ft-bottom { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-family: var(--ff-c); font-size: .64rem; letter-spacing: .07em; color: rgba(255,255,255,.2); }
.ft-links { display: flex; gap: 1.8rem; }
.ft-links a { color: rgba(255,255,255,.2); transition: color .3s; }
.ft-links a:hover { color: rgba(255,255,255,.6); }

/* BOAT BOTTON */
.boat-btn {
  position: fixed; bottom: 2.2rem; right: 2.2rem; z-index: 700;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #0d3a54 0%, #1a5f7a 100%);
  border: 1px solid rgba(200,145,58,.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .35s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  text-decoration: none;
}
.boat-btn:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(200,145,58,.7);
}
.boat-btn .badge {
  position: absolute; top: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #2ecc71; border: 2px solid #050c15;
  display: none;
}
.boat-btn.logged-in .badge { display: block; }
.boat-btn-tooltip {
  position: absolute; bottom: 100%; right: 0; margin-bottom: .6rem;
  background: #091524; border: 1px solid rgba(255,255,255,.1);
  color: #fff; font-family: 'Barlow Condensed', sans-serif;
  font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 6px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: all .25s;
}
.boat-btn:hover .boat-btn-tooltip { opacity: 1; }


/* RESPONSIVE */
@media(max-width:1100px){
  .mission-grid,.how-grid { grid-template-columns:1fr; gap:4rem; }
  .nums-grid { grid-template-columns:repeat(2,1fr); }
  .cta-grid { grid-template-columns:repeat(2,1fr); }
  .ft-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .obs-teaser-grid, .obs-chart-grid { grid-template-columns:1fr; }
  .nav-links { display:none; }
  nav { padding: 0 3vw; }
  .ocean-pill { display: none; }
  .menu-toggle { display: flex; }
}
@media(max-width:700px){
  nav { min-height: 70px; padding: 10px 4vw; gap: 8px; }
  nav.dark { min-height: 70px; }
  .logo-pill { padding-right: 12px; }
  .logo-text, .nav-pulse { display: none; }
  .nav-r { gap: .7rem; }
  .nav-btn { padding: 9px 15px; font-size: .68rem; }
  .nums-grid { grid-template-columns:1fr 1fr; }
  .cta-grid { grid-template-columns:1fr; }
  .ft-grid { grid-template-columns:1fr; }
  .ft-bottom { flex-direction:column; text-align:center; }
  .net-grid { grid-template-columns:1fr; }
  .obs-hero { padding-top: 130px; }
  .obs-stats .nums-grid { grid-template-columns: 1fr; }
  #compass-cursor, #cursor-dot { display:none; }
}

/* ── LITE MODE (Save-Data / 2G) — static seascape instead of videos ── */
body.lite .ocean-pill-video { display: none; }
/* Hero: skip the 160-frame sequence entirely, keep just the poster
   background-image already set inline on #hero-stage. */
body.lite #hero-canvas { display: none; }
body.lite .hero { height: 100svh; }
body.lite .hero-stage { position: relative; }

/* ── REDUCED MOTION — calm the ambient animation ── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .scroll-track::after, .c-ring, .pulse-dot, .l-ring-spin, .l-ring-slow { animation: none; }
  .c-ring { opacity: .35; }
  [data-r] { opacity: 1 !important; transform: none !important; }
  .mega-title .word { animation-duration: .01s; }
  .hero-sub, .hero-actions, .hero-stats, .section-marker { transition-duration: .01s; }
  /* No pinning, no frame scrub — static hero on the poster frame only. */
  .hero { height: 100svh; }
  .hero-stage { position: relative; }
  #hero-canvas, .hero-ring, .hero-scroll { display: none; }
  .nameplate .np-code { transition-duration: .01s; }
}