*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --orange: #FF6F00; --teal: #39A591; --yellow: #FFD439;
  --blue: #3180FF;   --red: #F44336;  --green: #00C853;
  --bg: #001028;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Inter', sans-serif;
  --display: 'Inter', sans-serif;
}
.new-scene {
  position: relative;
  isolation: isolate;
  --host-header-offset: 0px;
  --scene-vh: 100vh;
  --fixed-top: 0px;
  --fixed-height: 100vh;
  --fixed-bottom-gap: 0px;
  --fixed-left: 0px;
  --fixed-width: 100vw;
}
html, body { height: 100%; }
html {
  scroll-snap-type: y mandatory;
  /* NO scroll-behavior:smooth — it competes with snap and causes stuck scrolling */
  overscroll-behavior-y: none;
}
body {
  background: var(--bg); color: #fff;
  font-family: var(--sans);
  overflow-x: hidden;
}

/* Subtle film grain */
.new-scene::after {
  content: '';
  position: fixed;
  top: var(--fixed-top);
  left: var(--fixed-left);
  width: var(--fixed-width);
  height: var(--fixed-height);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 999; opacity: 0.06;
}
body[data-scene-host-visible="0"] .new-scene::after { opacity: 0; }

/* GLOBE CANVAS */
#globe-canvas {
  position: fixed; top: var(--fixed-top); left: var(--fixed-left);
  width: var(--fixed-width); height: var(--fixed-height);
  z-index: 1; pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: none;
}

#globe-alert-layer {
  position: fixed;
  top: var(--fixed-top);
  left: var(--fixed-left);
  width: var(--fixed-width);
  height: var(--fixed-height);
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

/* jam-overlay canvas sits above globe but below scroll content */
#jam-overlay {
  position: fixed !important;
  top: var(--fixed-top) !important;
  left: var(--fixed-left) !important;
  width: var(--fixed-width) !important;
  height: var(--fixed-height) !important;
  z-index: 2;
}

/* Map wrapper — fixed full screen, shown for map scenes */
#map-wrapper {
  position: fixed; top: var(--fixed-top); left: var(--fixed-left);
  width: var(--fixed-width); height: var(--fixed-height);
  z-index: 3; pointer-events: none;
  transition: opacity 0.8s ease;
  opacity: 0;
}
#cv-oil-routes {
  position: fixed !important;
  top: var(--fixed-top) !important;
  left: var(--fixed-left) !important;
  width: var(--fixed-width) !important;
  height: var(--fixed-height) !important;
}
#map-leaflet { width: 100%; height: 100%; background: #001028; }

/* DARK SATELLITE MAP — natural satellite colors, darkened to match Windward platform */
#map-leaflet .satellite-tiles {
  filter: brightness(0.55) contrast(1.25) saturate(0.70);
  transition: filter 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-scene="1"] #map-leaflet .satellite-tiles {
  filter: brightness(0.52) contrast(1.30) saturate(0.65);
}
body[data-scene="5"] #map-leaflet .satellite-tiles {
  filter: brightness(0.88) contrast(1.15) saturate(0.60);
}
body[data-scene="4"] #map-leaflet .satellite-tiles {
  filter: brightness(0.65) contrast(1.2) saturate(0.75);
}
body[data-scene="7"] #map-leaflet .satellite-tiles {
  filter: brightness(0.38) contrast(1.30) saturate(0.55) hue-rotate(195deg);
}
body[data-scene="2"] #map-leaflet .satellite-tiles {
  filter: brightness(0.40) contrast(1.35) saturate(0.60);
}
body[data-scene="3"] #map-leaflet .satellite-tiles {
  filter: brightness(0.40) contrast(1.35) saturate(0.60);
}
body[data-scene="6"] #map-leaflet .satellite-tiles {
  filter: brightness(0.48) contrast(1.35) saturate(0.60);
}
body[data-scene="8"] #map-leaflet .satellite-tiles {
  filter: brightness(0.52) contrast(1.25) saturate(0.55);
}
@keyframes m8hz-ring {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 0.70; }
  100% { transform: translate(-50%,-50%) scale(3.2); opacity: 0; }
}
.m8hz-ring {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #F44336;
  animation: m8hz-ring 2.4s ease-out infinite;
  pointer-events: none;
}
.m8hz-ring:nth-child(2) { animation-delay: 0.8s; }
.m8hz-ring:nth-child(3) { animation-delay: 1.6s; }
#map-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,1,6,0.45) 100%);
  z-index: 500;
}
/* Extra dark vignette on scene 1 so cards read clearly against map */
body[data-scene="1"] #map-overlay {
  background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,1,6,0.30) 0%, rgba(0,1,6,0.70) 100%);
}
.leaflet-container { background: #001028 !important; }

/* Custom crisp city labels — vector div icons, sharp at any zoom */
.city-label-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.city-lbl {
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 0 6px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,0.9), 1px 1px 0 rgba(0,0,0,1);
  pointer-events: none; user-select: none;
}
.city-lbl b {
  font-weight: 700; color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,1), 0 0 14px rgba(0,0,0,0.9), 1px 1px 0 rgba(0,0,0,1);
}
.city-dot {
  width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

/* Custom Leaflet tooltip (used for pulse markers) */
.map-label-tt {
  background: rgba(0,5,18,0.9) !important;
  border: 0.5px solid rgba(255,255,255,0.12) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  color: #fff !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}
.map-label-tt::before { display: none !important; }

/* Pulse marker CSS */
@keyframes leafletPulse {
  0%   { opacity: 0.9; r: 6px; }
  70%  { opacity: 0.2; r: 18px; }
  100% { opacity: 0; r: 20px; }
}
/* Cape route line animation */
@keyframes capeDash {
  to { stroke-dashoffset: -40; }
}
.cape-route-line {
  animation: capeDash 1.4s linear infinite;
}

/* Leaflet container bg — primary rule is in map CSS block above */

/* Scroll container must be above everything */
#scroll-container {
  position: relative;
  z-index: 10;
}

/* WW LOGO */
.ww-logo { display: none; }

/* TOP-RIGHT CTA */
.top-cta { display: none; }

/* TOP NAV BAR — empty placeholder for client's own menu */
#top-bar {
  position: fixed; top: var(--fixed-top); left: var(--fixed-left); right: auto;
  width: var(--fixed-width);
  height: 64px; z-index: 200;
  background: transparent;
}

/* NO right-side progress dots */
.prog-track { display: none !important; }
.prog-dot   { display: none !important; }

/* BOTTOM TOUR NAV */
#tour-nav {
  position: fixed;
  bottom: calc(var(--fixed-bottom-gap) + 28px);
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center;
  background: rgba(0,4,16,0.94); backdrop-filter: blur(24px) saturate(1.4);
  border: 0.5px solid rgba(255,255,255,0.12); border-radius: 40px;
  padding: 8px 12px 8px 18px; z-index: 1000;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(0,0,0,0.2);
}
#top-bar,
.ww-logo,
.top-cta,
#tour-nav,
#tour-nav * {
  pointer-events: auto;
}
.tour-chapter {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; color: var(--orange);
  background: rgba(255,111,0,0.12);
  border: 0.5px solid rgba(255,111,0,0.25);
  border-radius: 20px; padding: 4px 10px;
  white-space: nowrap;
}
.tour-scene-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  white-space: nowrap;
}
.tour-scene-label strong { color: rgba(255,255,255,0.7); font-weight: 500; }
.tour-pips { display: flex; gap: 6px; align-items: center; }
.tour-pip {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.15); cursor: pointer;
  transition: all 0.3s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tour-pip.active { background: var(--orange); transform: scale(1.4); }
.tour-next {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 7px 16px;
  background: rgba(255,111,0,0.1);
  border: 1px solid rgba(255,111,0,0.3); color: var(--orange);
  border-radius: 30px; cursor: pointer; transition: all 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tour-next:hover { background: rgba(255,111,0,0.2); }

/* SCENES */
.scene {
  height: auto; min-height: var(--scene-vh);
  display: flex; align-items: center; justify-content: center;
  position: relative; padding: 60px 64px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: visible;
  scroll-margin-top: var(--host-header-offset);
}
#scene-0 {
  align-items: flex-end; justify-content: flex-start;
  padding-bottom: 80px; padding-left: 60px;
}
#scene-1 { justify-content: center; align-items: flex-start; padding: 100px 48px 56px; }

/* Invisible snap-point injected by JS for tall scenes */
.snap-pt {
  scroll-snap-align: start;
  scroll-margin-top: var(--host-header-offset);
  position: absolute;
  left: 0; width: 100%;
  height: 0;
  pointer-events: none;
  display: none;  /* hidden until JS measures overflow and enables it */
}
#scene-2 { justify-content: flex-end;   padding-right: 64px; align-items: center; }
#scene-3 { justify-content: flex-start; padding-left:  64px; align-items: center; }
#scene-4 { justify-content: flex-end; padding-right: 64px; align-items: center; }
#scene-5 { justify-content: flex-start; padding-left: 64px; align-items: center; }
#scene-6 {
  justify-content: flex-end;
  padding-right: 64px;
}
#scene-7 {
  justify-content: flex-start; padding-left: 64px; align-items: center;
  overflow: hidden;
  /* background handled by ::before for animated drift */
}
#scene-7::before {
  content: '';
  position: absolute;
  inset: -3%;          /* oversized so edges don't show during drift */
  z-index: 0;
  background-image: url('/wp-content/uploads/2026/04/vessels_aerial.jpg');
  background-size: cover;
  background-position: 40% center;
  animation: oceanDrift 20s ease-in-out infinite;
  will-change: transform;
}
@keyframes oceanDrift {
  0%   { transform: translate(0px,   0px)   scale(1.00); }
  18%  { transform: translate(-7px,  4px)   scale(1.01); }
  40%  { transform: translate(-4px,  8px)   scale(1.01); }
  62%  { transform: translate( 6px,  5px)   scale(1.01); }
  82%  { transform: translate( 4px, -3px)   scale(1.00); }
  100% { transform: translate(0px,   0px)   scale(1.00); }
}
#scene-8 { justify-content: flex-end;   padding-right:  64px; align-items: center; }
#scene-9 { justify-content: flex-start; padding-left: 64px; align-items: center; }

/* PANEL */
.panel {
  position: relative; overflow: hidden;
  background: rgba(0, 14, 36, 0.65);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px; padding: 32px 36px;
  max-width: 480px; width: 100%;
  opacity: 0; transform: translateX(-64px) scale(0.96); filter: blur(6px);
  transition: opacity 1.0s cubic-bezier(0.22,1,0.36,1), transform 1.0s cubic-bezier(0.22,1,0.36,1), filter 0.85s ease, box-shadow 0.4s ease;
  box-shadow: 0 24px 64px rgba(0,0,0,0.60);
}
.panel.from-right { transform: translateX(64px) scale(0.96); filter: blur(6px); }
.panel.from-left  { transform: translateX(-64px) scale(0.96); filter: blur(6px); }
.panel.visible { opacity: 1; transform: translateX(0) scale(1) !important; filter: blur(0) !important; box-shadow: 0 24px 64px rgba(0,0,0,0.60); }

/* ── ENHANCED GLASS — all risk sections (panels 2–8) ────────────────────────
   Consistent frosted glass with warm orange left accent matching Hormuz card.
   backdrop-filter: same across all panels for visual consistency.          */
#panel-2, #panel-3, #panel-4, #panel-5, #panel-6, #panel-7, #panel-8 {
  background: linear-gradient(
    155deg,
    rgba(30, 14, 4, 0.55) 0%,
    rgba(6,  18, 48, 0.50) 40%,
    rgba(2,  10, 28, 0.60) 100%
  );
  backdrop-filter: blur(40px) saturate(1.9) brightness(1.06);
  -webkit-backdrop-filter: blur(40px) saturate(1.9) brightness(1.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.65),
    inset 0 0 0 0.5px rgba(255,255,255,0.04);
}
/* Top-edge catch-light — simulates light hitting glass rim */
#panel-2::before, #panel-3::before, #panel-4::before, #panel-5::before,
#panel-6::before, #panel-7::before, #panel-8::before {
  content: '';
  position: absolute;
  top: 0; left: 4%; right: 4%; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.28) 25%,
    rgba(255,255,255,0.20) 75%,
    transparent 100%
  );
  border-radius: 0;
  pointer-events: none;
  z-index: 2;
}

/* Scene 6: compact padding */
#scene-6 .panel {
  padding: 28px 36px;
}

/* Staggered panel child reveal */
.panel > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.panel > *:nth-child(1) { transition-delay: 0.1s; }
.panel > *:nth-child(2) { transition-delay: 0.2s; }
.panel > *:nth-child(3) { transition-delay: 0.3s; }
.panel > *:nth-child(4) { transition-delay: 0.4s; }
.panel > *:nth-child(5) { transition-delay: 0.5s; }
.panel > *:nth-child(6) { transition-delay: 0.55s; }
.panel > *:nth-child(7) { transition-delay: 0.6s; }
.panel > *:nth-child(8) { transition-delay: 0.65s; }
.panel > *:nth-child(9) { transition-delay: 0.7s; }
.panel.visible > * { opacity: 1; transform: translateY(0); }

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   WINDWARD DESIGN SYSTEM — Typography & Color Rules
   в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
   COLORS:
     Section accent  в†’ eyebrow + panel title ONLY
     #F44336 (red)   в†’ negative change values (в€’ prefix)
     #FF6F00 (orange)в†’ positive change values (+ prefix)
     rgba(255,255,255,0.85) в†’ all neutral stat numbers
     rgba(255,255,255,0.58) в†’ body copy, descriptions
     rgba(255,255,255,0.38) в†’ labels, metadata
     rgba(255,255,255,0.18) в†’ captions, source lines, borders

   TYPOGRAPHY SCALE:
     L1  Hero title:       Inter 800  clamp(52–110px)
     L2  Panel title:      Inter 800  clamp(26–48px)   -0.03em
     L3  Stat number:      Inter 700  clamp(20–32px)   -0.02em
     L4  Body copy:        Inter 400  14px              1.65lh
     L5  Route primary:    Inter 500  13px              1.55lh
     L6  Route secondary:  Inter 400  12px              1.5lh   0.38 opacity
     L7  Label / eyebrow:  Mono 500   10px              0.22em  uppercase
     L8  Stat label:       Mono 400   9px               0.12em  0.38 opacity
     L9  Caption / source: Mono 400   8px               0.12em  0.20 opacity
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* PANEL EYEBROW — L7 */
.panel-risk-num {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.28); margin-bottom: 6px;
}
.panel-eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
  opacity: 1;
}
.panel-eyebrow::after { content:''; flex:1; height:0.5px; background:rgba(255,255,255,0.08); }

/* PANEL TITLE — L2 */
.panel-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 700; line-height: 0.98;
  letter-spacing: -0.03em; margin-bottom: 18px;
  color: var(--orange);
}

/* PANEL BODY — L4 */
.panel-body {
  font-family: var(--sans); font-size: 13.5px; font-weight: 400;
  color: rgba(255,255,255,0.70); line-height: 1.70; margin-bottom: 20px;
}
.panel-body strong { color: rgba(255,255,255,0.92); font-weight: 600; }

/* STATS — L3 numbers, L8 labels */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; margin-top: 22px; }
.stat-item { min-width: 0; }
.stat-num {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 700;
  line-height: 1.0; letter-spacing: -0.03em; margin-bottom: 7px;
  color: rgba(255,255,255,0.85);
}
.stat-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); line-height: 1.55;
}

/* DIVIDER — no bottom margin; spacing to next element comes from that element's own top margin/padding */
.divider { height: 0.5px; background: rgba(255,255,255,0.08); margin: 22px 0 0 0; }

/* ROUTE LIST — L5 primary, L6 secondary */
.route-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 0; border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
/* First route-item directly after a divider gets full 22px top gap, matching stat-row rhythm */
.divider + .route-item { padding-top: 22px; }
.route-item:last-child { border-bottom: none; }
.route-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.route-name {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 3px;
}
.route-desc {
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  color: rgba(255,255,255,0.60); line-height: 1.58;
}

/* BADGES */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* HERO */
.hero-content {
  max-width: 520px;
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}
.hero-content.visible { opacity: 1; transform: translateY(0); }

.hero-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
  font-weight: 500; color: var(--orange); text-transform: uppercase; margin-bottom: 24px;
  opacity: 1;
}
.hero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(52px, 8vw, 110px);
  font-weight: 700; line-height: 0.95; color: #fff;
  letter-spacing: -0.03em; margin-bottom: 32px;
}
.hero-title span { color: var(--orange); }
.hero-sub {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 40px;
}

.scroll-hint {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 400;
  letter-spacing: 0.15em; color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  animation: nudge 2s ease-in-out infinite;
}
.scroll-hint-line {
  width: 40px; height: 0.5px; background: rgba(255,255,255,0.2);
  position: relative; overflow: hidden;
}
.scroll-hint-line::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--orange); animation: slide-right 2s ease-in-out infinite;
}
@keyframes slide-right { 0%{left:-100%} 100%{left:100%} }
@keyframes nudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* GLOBAL IMPACT GRID (scene 1) */
.impact-inner { width: 100%; max-width: 1120px; overflow: visible; }
/* ── BY THE NUMBERS — section header ── */
.impact-header { text-align: center; margin-bottom: 32px; }
.impact-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.20em;
  color: var(--orange); text-transform: uppercase; margin-bottom: 14px;
}
.impact-title {
  font-family: var(--display);
  font-size: clamp(30px, 3.8vw, 52px); font-weight: 700;
  letter-spacing: -0.025em; line-height: 0.96; margin-bottom: 12px;
  color: #fff;
}
.impact-title span { color: var(--orange); }
.impact-subtitle {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55); text-transform: uppercase;
}
.scene4-hint {
	display: none;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  text-align: center; margin-bottom: 22px;
}

/* в”Ђв”Ђ GRID в”Ђв”Ђ */
.impact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* в”Ђв”Ђ RISK EDITORIAL LAYOUT (scene 1) в”Ђв”Ђ */
.risk-layout {
  width: 100%; max-width: 1320px;
  display: grid;
  grid-template-columns: 1fr 300px 1fr;
  gap: 24px;
  align-items: center;
}
.risk-col {
  display: flex; flex-direction: column; gap: 14px;
}
/* numbered risk card */
.risk-item {
  background: rgba(3,9,24,0.66);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: 0 2px 18px rgba(0,0,0,0.40);
  padding: 20px 22px 16px; position: relative; overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
              transform 0.5s cubic-bezier(0.25,1,0.5,1),
              background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.risk-item.visible { opacity: 1; transform: translateY(0); }
.risk-item.card-col-orange { background: rgba(255,111,0,0.10);  border-color: rgba(255,111,0,0.22); }
.risk-item.card-col-yellow { background: rgba(255,212,57,0.10); border-color: rgba(255,212,57,0.22); }
.risk-item.card-col-teal   { background: rgba(57,165,145,0.10); border-color: rgba(57,165,145,0.22); }
.risk-item.card-col-red    { background: rgba(244,67,54,0.10);  border-color: rgba(244,67,54,0.22); }
.risk-item.card-col-orange:hover { background: rgba(255,111,0,0.22);  border-color: rgba(255,111,0,0.50);  box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 40px rgba(255,111,0,0.26);   transform: translateY(-3px); }
.risk-item.card-col-yellow:hover { background: rgba(255,212,57,0.21); border-color: rgba(255,212,57,0.50); box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 40px rgba(255,212,57,0.26); transform: translateY(-3px); }
.risk-item.card-col-teal:hover   { background: rgba(57,165,145,0.22); border-color: rgba(57,165,145,0.50); box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 40px rgba(57,165,145,0.26); transform: translateY(-3px); }
.risk-item.card-col-red:hover    { background: rgba(244,67,54,0.22);  border-color: rgba(244,67,54,0.50);  box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 40px rgba(244,67,54,0.26);  transform: translateY(-3px); }
.risk-item:hover .loc-tag { color: rgba(255,255,255,0.88); }
.risk-item:hover .impact-ey { color: rgba(255,255,255,0.80); }
.risk-item:hover .impact-desc { color: rgba(255,255,255,0.88); }
.risk-item:hover .impact-explore { color: rgba(255,255,255,0.80); }
.risk-item:hover .explore-arrow { transform: translateX(4px); }
.risk-num-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.22); margin-bottom: 10px;
}
.risk-item .impact-num {
  font-size: clamp(28px, 3.2vw, 44px);
  margin-bottom: 10px;
}
.risk-item.card-col-orange .impact-num { color: var(--orange); }
.risk-item.card-col-yellow .impact-num { color: var(--yellow); }
.risk-item.card-col-teal   .impact-num { color: var(--teal);   }
.risk-item.card-col-red    .impact-num { color: var(--red);    }
/* center copy box */
.risk-center {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0;
  background: rgba(3,9,24,0.60);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 36px 28px 30px;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 4px 40px rgba(0,0,0,0.50);
}
.risk-center-eyebrow {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em;
  color: var(--orange); text-transform: uppercase; margin-bottom: 16px;
}
.risk-center-title {
  font-family: var(--display);
  font-size: clamp(26px, 3.0vw, 44px); font-weight: 700;
  letter-spacing: -0.025em; line-height: 0.95; margin-bottom: 10px;
}
.risk-center-title span { color: var(--orange); }
.risk-center-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45); text-transform: uppercase; margin-bottom: 20px;
}
.risk-center-divider {
  width: 32px; height: 1px; background: rgba(255,255,255,0.12);
  margin: 0 auto 20px;
}
.risk-center-body {
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  color: rgba(255,255,255,0.50); line-height: 1.70; margin-bottom: 22px;
}
.risk-center-also {
  display: flex; flex-direction: column; gap: 6px; width: 100%; margin-bottom: 20px;
}
.risk-center-tag {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer; transition: background 0.2s;
}
.risk-center-tag:hover { background: rgba(255,255,255,0.09); }
.risk-center-tag-left {
  display: flex; align-items: center; gap: 8px;
}
.risk-center-tag-num {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.28);
}
.risk-center-tag-name {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55); text-transform: uppercase;
}
.risk-center-hint {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
}

/* в”Ђв”Ђ CARD BASE в”Ђв”Ђ */
.impact-card {
  background: rgba(3, 9, 24, 0.82);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 2px 18px rgba(0,0,0,0.40);
  padding: 22px 22px 18px; position: relative; overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(20px);
  transition:
    opacity 0.65s cubic-bezier(0.16,1,0.3,1),
    transform 0.5s cubic-bezier(0.25,1,0.5,1),
    background 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
.impact-card::after { content: none; }
.impact-card.visible { opacity: 1; transform: translateY(0); }

/* Rest state — dark base + color tint */
.card-col-orange { background: rgba(255,111,0,0.10);  border-color: rgba(255,111,0,0.22);  box-shadow: 0 2px 18px rgba(0,0,0,0.50), 0 0 20px rgba(255,111,0,0.08); }
.card-col-yellow { background: rgba(255,212,57,0.10); border-color: rgba(255,212,57,0.22); box-shadow: 0 2px 18px rgba(0,0,0,0.50), 0 0 20px rgba(255,212,57,0.08); }
.card-col-teal   { background: rgba(57,165,145,0.10); border-color: rgba(57,165,145,0.22); box-shadow: 0 2px 18px rgba(0,0,0,0.50), 0 0 20px rgba(57,165,145,0.08); }
.card-col-red    { background: rgba(244,67,54,0.10);  border-color: rgba(244,67,54,0.22);  box-shadow: 0 2px 18px rgba(0,0,0,0.50), 0 0 20px rgba(244,67,54,0.08); }
.card-col-blue   { background: rgba(49,128,255,0.10); border-color: rgba(49,128,255,0.22); box-shadow: 0 2px 18px rgba(0,0,0,0.50), 0 0 20px rgba(49,128,255,0.08); }
.card-col-white  { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); box-shadow: 0 2px 18px rgba(0,0,0,0.50), 0 0 20px rgba(255,255,255,0.04); }

/* Number in card's accent color at rest */
.card-col-orange .impact-num { color: var(--orange); }
.card-col-yellow .impact-num { color: var(--yellow); }
.card-col-teal   .impact-num { color: var(--teal);   }
.card-col-red    .impact-num { color: var(--red);    }
.card-col-blue   .impact-num { color: var(--blue);              }
.card-col-white  .impact-num { color: rgba(255,255,255,0.90);  }

/* в”Ђв”Ђ HOVER: deeper/darker shade of same color в”Ђв”Ђ */
.impact-card:hover {
  transform: translateY(-4px);
  z-index: 2;
}
.impact-card.card-col-orange:hover { background: rgba(255,111,0,0.22);  border-left-color: var(--orange); border-color: rgba(255,111,0,0.50);  box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 40px rgba(255,111,0,0.26); }
.impact-card.card-col-yellow:hover { background: rgba(255,212,57,0.21); border-left-color: var(--yellow); border-color: rgba(255,212,57,0.50); box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 40px rgba(255,212,57,0.26); }
.impact-card.card-col-teal:hover   { background: rgba(57,165,145,0.22); border-left-color: var(--teal);   border-color: rgba(57,165,145,0.50); box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 40px rgba(57,165,145,0.26); }
.impact-card.card-col-red:hover    { background: rgba(244,67,54,0.22);  border-left-color: var(--red);    border-color: rgba(244,67,54,0.50);  box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 40px rgba(244,67,54,0.26); }
.impact-card.card-col-blue:hover   { background: rgba(49,128,255,0.22);   border-left-color: var(--blue);            border-color: rgba(49,128,255,0.50);  box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 40px rgba(49,128,255,0.26); }
.impact-card.card-col-white:hover  { background: rgba(255,255,255,0.10);  border-left-color: rgba(255,255,255,0.90); border-color: rgba(255,255,255,0.28); box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 40px rgba(255,255,255,0.12); }

/* Dim non-hovered siblings */
.impact-card.card-dimmed {
  opacity: 0.28 !important;
  filter: saturate(0) brightness(0.65);
  transform: scale(0.982) translateY(0) !important;
}

/* ripple-wrap hidden */

/* в”Ђв”Ђ LOCATION TAG в”Ђв”Ђ */
.loc-tag {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  color: rgba(255,255,255,0.60);
  transition: color 0.35s ease;
}
.impact-card:hover .loc-tag { color: rgba(255,255,255,0.85); }
.loc-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.loc-dot.col-orange { background: var(--orange); box-shadow: 0 0 6px rgba(255,111,0,0.7); }
.loc-dot.col-yellow { background: var(--yellow); box-shadow: 0 0 6px rgba(255,212,57,0.7); }
.loc-dot.col-teal   { background: var(--teal);   box-shadow: 0 0 6px rgba(57,165,145,0.7); }
.loc-dot.col-red    { background: var(--red);    box-shadow: 0 0 6px rgba(244,67,54,0.7); }
.loc-dot.col-blue   { background: var(--blue);   box-shadow: 0 0 6px rgba(49,128,255,0.7); }
.loc-dot.col-white  { background: rgba(255,255,255,0.90); box-shadow: 0 0 6px rgba(255,255,255,0.5); }

/* в”Ђв”Ђ METRIC LABEL в”Ђв”Ђ */
.impact-ey {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
  margin-bottom: 6px; line-height: 1.5;
  transition: color 0.35s ease;
}
.impact-card:hover .impact-ey { color: rgba(255,255,255,0.80); }

/* в”Ђв”Ђ BIG NUMBER в”Ђв”Ђ */
.impact-num {
  font-family: var(--display); font-size: clamp(36px, 3.8vw, 56px); font-weight: 700;
  line-height: 0.90; letter-spacing: -0.03em; margin-bottom: 14px;
  display: block; color: rgba(255,255,255,0.90);
  transition: color 0.4s ease;
}

/* в”Ђв”Ђ DESCRIPTION в”Ђв”Ђ */
.impact-desc {
  font-family: var(--sans); font-size: 12.5px; font-weight: 400;
  color: rgba(255,255,255,0.70); line-height: 1.68;
  flex: 1;
  transition: color 0.35s ease;
}
.impact-card:hover .impact-desc { color: rgba(255,255,255,0.92); }

/* ── EXPLORE RISK — growing line left, text, chevron right after text ── */
.impact-explore {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.20em;
  text-transform: uppercase; color: rgba(255,255,255,0.30);
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px;
  transition: color 0.4s ease;
}
/* Line that grows from left */
.impact-explore::before {
  content: '';
  display: block; flex-shrink: 0;
  height: 1px; width: 20px;
  background: currentColor; opacity: 0.45;
  transition: width 0.45s cubic-bezier(0.25,1,0.5,1), opacity 0.4s ease;
}
.impact-explore::after { content: none; }
.impact-card:hover .impact-explore { color: rgba(255,255,255,0.80); }
.impact-card:hover .impact-explore::before { width: 38px; opacity: 0.85; }

/* Chevron sits right after text */
.explore-arrow {
  display: inline-flex; align-items: center;
  font-size: 15px; line-height: 1; font-weight: 300;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.25,1,0.5,1);
}
.impact-card:hover .explore-arrow { transform: translateX(4px); }

.source-line {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.22); margin-top: 32px;
}
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  padding: 4px 10px; border-radius: 3px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.badge-orange { background: rgba(255,255,255,0.05); color: var(--orange); border: 1px solid rgba(255,255,255,0.10); }
.badge-red    { background: rgba(255,255,255,0.05); color: var(--red);    border: 1px solid rgba(255,255,255,0.10); }
.badge-teal   { background: rgba(255,255,255,0.05); color: var(--teal);   border: 1px solid rgba(255,255,255,0.10); }
.badge-yellow { background: rgba(255,255,255,0.05); color: var(--yellow); border: 1px solid rgba(255,255,255,0.10); }
.badge-white  { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.10); }
.badge-blue   { background: rgba(255,255,255,0.05); color: var(--blue);   border: 1px solid rgba(255,255,255,0.10); }
.panel-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; margin-bottom: 4px; }

/* ── WINDWARD BRAND PANEL ACCENTS — unified orange glow across all scenes ── */
#panel-2 { box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 32px 80px rgba(0,0,0,0.70), 0 0 60px rgba(255,111,0,0.10); }
#panel-3 { box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 32px 80px rgba(0,0,0,0.70), 0 0 60px rgba(255,111,0,0.10); }
#panel-4 { box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 32px 80px rgba(0,0,0,0.70), 0 0 60px rgba(255,111,0,0.10); max-width: 520px; }
#panel-5 { box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 32px 80px rgba(0,0,0,0.70), 0 0 60px rgba(255,111,0,0.10); }
#panel-6 { box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 32px 80px rgba(0,0,0,0.70), 0 0 60px rgba(255,111,0,0.10); }
#panel-7 { box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 32px 80px rgba(0,0,0,0.70), 0 0 60px rgba(255,111,0,0.10); }
#panel-8 { box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 32px 80px rgba(0,0,0,0.70), 0 0 60px rgba(255,111,0,0.10); }


/* в”Ђв”Ђ VESSEL ALERT BADGES в”Ђв”Ђ */
.v-alert {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 9px;
  background: rgba(8, 14, 28, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244,67,54,0.55);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 16px rgba(244,67,54,0.18);
  white-space: nowrap;
  transform: translate(-50%, -120%);
}
.v-alert.visible { opacity: 1; }
.v-alert svg { flex-shrink: 0; }
.v-alert-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); line-height: 1.4;
}
.v-alert-name {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; line-height: 1.4;
}

/* в”Ђв”Ђ VESSEL HOVER TOOLTIP в”Ђв”Ђ */
#vessel-tooltip {
  position: fixed; pointer-events: none; z-index: 200;
  opacity: 0; transform: translateY(6px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: 268px;
  background: #080c14;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px; padding: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.85), 0 0 0 0.5px rgba(255,255,255,0.06);
  overflow: hidden;
}
#vessel-tooltip.visible { opacity: 1; transform: translateY(0) scale(1); }
#vtt-header {
  padding: 14px 16px 12px;
  background: rgba(4,8,20,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#vtt-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px; font-weight: 700; letter-spacing: 0.05em;
  color: #FFD439; line-height: 1.2; margin-bottom: 5px;
  text-transform: uppercase;
}
#vtt-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 400; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.72);
}
#vtt-risk {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; margin-top: 6px;
}
#vtt-img-wrap {
  width: 100%; height: 158px; overflow: hidden;
  background: #02050f; position: relative;
}
#vtt-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.25s ease;
}
#vtt-img.loaded { opacity: 1; }
#vtt-img-fallback {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 6px;
}
#vtt-img-fallback svg { opacity: 0.12; }
#vtt-img-fallback span {
  font-family: 'IBM Plex Mono', monospace; font-size: 8px;
  color: rgba(255,255,255,0.18); letter-spacing: 0.18em;
}
/* ── GEO LABELS + VESSEL DOTS — HIDDEN IN MAP SCENES ── */
/* geo-label / vdot project at wrong screen positions when Leaflet map is active */
.geo-label { display: none !important; }
.vdot { display: none !important; }
/* v-alert badges: visible in hero (scene-0) and CTA (scene-9) */
body:not([data-scene="9"]):not([data-scene="0"]):not([data-scene="4"]):not([data-scene="5"]) .v-alert { display: none !important; }

body:not([data-scene="4"]) .detention-badge { display: none !important; }
/* в”Ђв”Ђ VESSEL INTERDICTION CARDS в”Ђв”Ђ */
.ven-card {
  position: absolute; pointer-events: none; z-index: 0;
  background: rgba(4,8,20,0.90);
  border: 1px solid rgba(244,67,54,0.30);
  border-top: 2px solid #F44336;
  border-radius: 4px;
  width: 148px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.ven-card-img {
  width: 100%; height: 56px;
  object-fit: cover; object-position: center 60%;
  display: block;
}
.ven-card-body {
  padding: 5px 10px 6px;
}
.ven-card-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: #fff; letter-spacing: 0.04em;
  line-height: 1.3;
}
.ven-card-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: rgba(255,255,255,0.45);
  margin-top: 3px; letter-spacing: 0.05em;
}
/* в”Ђв”Ђ DETENTION BADGE (Venezuela scene) в”Ђв”Ђ */
.detention-badge {
  position: fixed;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  background: rgba(4, 10, 26, 0.55);
  backdrop-filter: blur(28px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.1);
  border-radius: 4px;
  border: 1px solid rgba(244,67,54,0.5);
  border-top: 1px solid rgba(244,67,54,0.8);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.65),
    0 0 0 0.5px rgba(244,67,54,0.4),
    0 0 24px rgba(244,67,54,0.25);
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 16px));
  opacity: 0;
  transition: opacity 0.15s ease;
}
.detention-badge.visible { opacity: 1; }
.detention-badge svg { flex-shrink: 0; }
.detention-badge-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px; font-weight: 300;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); line-height: 1.4;
  display: block;
}
.detention-badge-authority {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; line-height: 1.4;
  display: block;
}
/* CTA */
.cta-wrap {
  max-width: 560px;
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}
.cta-wrap.visible { opacity: 1; transform: translateY(0); }
.cta-headline {
  font-family: var(--display);
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 700; line-height: 0.97; color: #fff;
  letter-spacing: -0.03em; margin-bottom: 28px;
}
.cta-headline span { color: var(--orange); }
.cta-sub {
  font-family: var(--sans); font-size: 15px;
  color: rgba(255,255,255,0.5); line-height: 1.7;
  max-width: 420px; margin: 0 0 40px;
}
.cta-buttons { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
.btn-primary {
  display: inline-block; padding: 14px 32px;
  background: var(--orange); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; text-decoration: none;
  border-radius: 2px; transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: #FF8C00; transform: translateY(-1px); }
.btn-ghost {
  display: inline-block; padding: 14px 28px;
  border: 1px solid rgba(255,111,0,0.40);
  color: var(--orange);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-decoration: none; border-radius: 2px; text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-ghost:hover { border-color: rgba(255,111,0,0.70); background: rgba(255,111,0,0.08); color: var(--orange); }

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   TABLET LANDSCAPE (769px – 1100px): narrow desktop adjustments
   Panels narrower, scene padding tighter
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
@media (min-width: 769px) and (max-width: 1100px) {
  .scene { padding: 48px 40px; }
  #scene-2, #scene-4, #scene-6, #scene-8 { padding-right: 40px; }
  #scene-3, #scene-5, #scene-7, #scene-9 { padding-left: 40px; }
  .panel { max-width: 400px; padding: 26px 28px; }
  #panel-4 { max-width: 440px; }
  #panel-8 { max-width: 380px; }
  .panel-title { font-size: clamp(24px, 3.2vw, 40px); }
  .impact-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  #scene-1 { padding: 48px 36px 48px; }
}

/* RESPONSIVE */
/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   TABLET / MOBILE (≤768px): stacked layout
   Visualization fills top ~50vh (map/globe shows through),
   panel sits below — all content visible, no internal scroll.
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
@media (max-width: 768px) {

  /* Do NOT add scroll-behavior:smooth — it fights scroll-snap-type:mandatory
     and causes goToExpand scrollIntoView calls to snap back to the wrong stop. */

  /* Logo + top CTA */
  .ww-logo { top: 16px; left: 16px; }
  .ww-logo svg { height: 14px; }
  .top-cta { top: 12px; right: 12px; font-size: 9px; padding: 6px 11px; letter-spacing: 0.08em; gap: 4px; border-radius: 2px; }

  /* в”Ђв”Ђ BOTTOM-SHEET LAYOUT в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
     Map/canvas fills the full 100vh background.
     Panel is absolutely positioned above the tour nav.
     By default only ~120px peeks — tap to expand full panel.
     в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
  .scene {
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    height: var(--scene-vh) !important;
    min-height: var(--scene-vh) !important;
  }

  /* Kill spacers — panel positions itself via justify-content: flex-end */
  #scene-2::before, #scene-3::before, #scene-4::before,
  #scene-5::before, #scene-6::before, #scene-8::before {
    display: none !important;
    min-height: 0 !important;
  }
  /* Scene 7 ::before — re-enable ocean background on mobile */
  #scene-7 { overflow: hidden !important; }
  #scene-7::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: -3% !important;
    z-index: 0 !important;
    min-height: 0 !important;
    background-image: url('/wp-content/uploads/2026/04/vessels_aerial.jpg') !important;
    background-size: cover !important;
    background-position: 60% center !important;
    animation: oceanDrift 20s ease-in-out infinite !important;
  }

  /* Hero — full-height, content bottom-left */
  #scene-0 {
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 20px 180px !important;
    min-height: var(--scene-vh);
  }
  .hero-content { max-width: 100%; }
  .hero-title { font-size: clamp(42px, 11vw, 68px) !important; line-height: 0.94 !important; margin-bottom: 20px !important; }
  .hero-title span { display: block !important; }
  .hero-eyebrow { font-size: 11px !important; margin-bottom: 14px !important; }
  .scroll-hint { font-size: 9px !important; gap: 8px !important; }

  /* By the Numbers — vertically centred, generous spacing */
  #scene-1 {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 80px 0 !important;
    overflow: visible !important;
    min-height: var(--scene-vh) !important;
    height: var(--scene-vh) !important;
  }
  .impact-inner { width: 100%; padding: 0; }
  .impact-header {
    margin-bottom: 26px !important;
    padding: 0 20px !important;
  }
  .impact-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 10px !important;
  }
  .impact-title {
    font-size: clamp(28px, 7.5vw, 42px) !important;
    line-height: 0.95 !important;
    margin-bottom: 10px !important;
  }
  .impact-subtitle {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }
  .scene4-hint {
		display: block;
    font-size: 9px !important;
    padding: 0 20px !important;
    margin-top: 6px !important;
    margin-bottom: 16px !important;
    opacity: 0.65 !important;
		color: #fff !important;
  }

	.scene4-hint span {
		display: none;
	}

  /* Carousel: horizontal scroll, full breathing room */
  .impact-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    /* Claim horizontal axis so page snap doesn't intercept sideways swipes */
    touch-action: pan-x !important;
    gap: 16px !important;
    padding: 0 20px 20px !important;
    scrollbar-width: none !important;
    scroll-padding-left: 20px;
  }
  .impact-grid::-webkit-scrollbar { display: none; }

  /* Each card: 82% wide, 16px radius to match panels */
  .impact-card {
    flex: 0 0 82% !important;
    width: 82% !important;
    scroll-snap-align: start !important;
    padding: 28px 22px 24px !important;
    border-radius: 16px !important;
  }
  /* Touch devices: suppress the desktop hover lift so cards don't jump up on tap */
  .impact-card:hover,
  .impact-card.visible:hover { transform: translateY(0) !important; }
  .loc-tag { font-size: 9px !important; margin-bottom: 12px !important; }
  .impact-ey { font-size: 9px !important; margin-bottom: 10px !important; opacity: 0.65; }
  .impact-num { font-size: clamp(38px, 10vw, 56px) !important; margin-bottom: 14px !important; line-height: 0.95 !important; }
  .impact-desc { font-size: 12.5px !important; line-height: 1.7 !important; }
  .impact-explore { font-size: 9px !important; letter-spacing: 0.15em !important; margin-top: 22px !important; }

	.impact-explore {
		display: none !important;
	}

  /* Scene-4 overflow */
  #scene-4 { overflow: visible !important; }

  /* Vessel interdiction cards — 10% smaller on mobile only */
  .ven-card { width: 133px !important; }
  .ven-card-img { height: 65px !important; }

  /* CTA scene — full-height, content bottom-left */
  #scene-9 {
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 20px 96px !important;
    min-height: var(--scene-vh);
  }

  /* в”Ђв”Ђ PANEL: fixed bottom-sheet в†’ center в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
     All states use top:50% as anchor so only transform changes —
     enabling smooth animation between every state.

     Hidden  в†’ translateY(200%)           off-screen below
     Peek    в†’ translateY(calc(50vh-180px)) 120px above tour nav
     Center  в†’ translateY(-50%)           centered in viewport
     в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
  .panel,
  .panel.visible,
  .panel.from-left,
  .panel.from-right,
  .panel.from-left.visible,
  .panel.from-right.visible,
  .panel.from-left:not(.visible),
  .panel.from-right:not(.visible) {
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 20px 28px !important;
    max-height: 72vh !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    box-shadow:
      0 -20px 50px rgba(0,0,0,0.40),
      0 24px 60px rgba(0,0,0,0.50),
      inset 0 1px 0 rgba(255,255,255,0.16) !important;
    /* Hidden: off-screen below */
    transform: translateY(200%) !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: none !important;
    transition: transform 0.48s cubic-bezier(0.32, 0.72, 0, 1) !important;
    z-index: 20 !important;
  }

  /* Drag handle pill — shown in peek, hidden when centered.
     position:relative overrides the ID rules (#panel-X::before position:absolute)
     so the handle flows inside the panel flex container. */
  .panel::before,
  #panel-2::before, #panel-3::before, #panel-4::before, #panel-5::before,
  #panel-6::before, #panel-7::before, #panel-8::before {
    content: '' !important;
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 36px !important;
    height: 4px !important;
    background: rgba(255,255,255,0.20) !important;
    border-radius: 2px !important;
    margin: 0 auto 16px !important;
    flex-shrink: 0;
    transition: opacity 0.3s ease !important;
    z-index: auto !important;
  }
  .panel.m-active.m-expanded::before,
  #panel-2.m-active.m-expanded::before, #panel-3.m-active.m-expanded::before,
  #panel-4.m-active.m-expanded::before, #panel-5.m-active.m-expanded::before,
  #panel-6.m-active.m-expanded::before, #panel-7.m-active.m-expanded::before,
  #panel-8.m-active.m-expanded::before { opacity: 0 !important; }

  /* Kill fade-mask gradient */
  .panel::after { display: none !important; }

  /* 100vh snap stop inserted after each risk scene — second stop expands panel */
  .m-expand-snap {
    height: var(--scene-vh);
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    pointer-events: none;
    display: block;
    flex-shrink: 0;
    scroll-margin-top: var(--host-header-offset);
  }

  /* Peek: panel visible at bottom (10% higher than before) */
  .panel.m-active,
  .panel.m-active.visible,
  .panel.m-active.from-left,
  .panel.m-active.from-right,
  .panel.m-active.from-left.visible,
  .panel.m-active.from-right.visible {
    transform: translateY(calc(40vh - 180px)) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  /* Centered: full box in screen center, no internal scroll.
     Selector list covers every from-left/from-right Г— visible combo so
     that (0,5,0) always beats the peek rule at (0,4,0). */
  .panel.m-active.m-expanded,
  .panel.m-active.m-expanded.visible,
  .panel.m-active.m-expanded.from-left,
  .panel.m-active.m-expanded.from-right,
  .panel.m-active.m-expanded.from-left.visible,
  .panel.m-active.m-expanded.from-right.visible {
    transform: translateY(-50%) !important;
    overflow: hidden !important;
    max-height: 88vh !important;
    cursor: default !important;
  }

  /* panel-8 (Oil Markets) has more content — allow taller height + inner scroll */
  #panel-8.m-active.m-expanded,
  #panel-8.m-active.m-expanded.visible,
  #panel-8.m-active.m-expanded.from-right,
  #panel-8.m-active.m-expanded.from-right.visible {
    max-height: 94vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Scene scrolled past: panel exits upward instead of falling back down.
     Override the entry ease-out (fast-start/slow-end) with an ease-in-out so
     the panel starts gently, accelerates through the middle, and sweeps off screen
     smoothly rather than lurching. Duration slightly longer than entry (0.65s vs 0.48s)
     so the upward motion is clearly visible before the panel exits the screen edge. */
  .panel.m-past,
  .panel.m-past.visible,
  .panel.m-past.from-left,
  .panel.m-past.from-right,
  .panel.m-past.from-left.visible,
  .panel.m-past.from-right.visible {
    transform: translateY(-200%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.65s cubic-bezier(0.4, 0.1, 0.6, 0.9) !important;
  }

  /* в”Ђв”Ђ TYPOGRAPHY в”Ђв”Ђ */
  .panel-eyebrow {
    font-size: 9px !important; letter-spacing: 0.18em !important;
    margin-bottom: 16px !important; opacity: 0.7;
  }
  .panel-title {
    font-size: clamp(23px, 5.8vw, 34px) !important;
    line-height: 1.0 !important; margin-bottom: 10px !important;
  }
  .panel-body {
    font-size: 13px !important; line-height: 1.62 !important;
    margin-bottom: 12px !important;
  }

  /* в”Ђв”Ђ STATS: 3 columns, single row, compact в”Ђв”Ђ */
  .divider { margin: 12px 0 0 0 !important; }
  .stat-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px 10px !important; margin-top: 12px !important;
  }
  .stat-num {
    font-size: clamp(18px, 4.2vw, 24px) !important;
    line-height: 1.0 !important; margin-bottom: 4px !important;
  }
  .stat-label { font-size: 8px !important; line-height: 1.42 !important; }

  /* в”Ђв”Ђ BULLET LIST в”Ђв”Ђ */
  .route-item { padding: 7px 0 !important; gap: 10px !important; }
  .divider + .route-item { padding-top: 12px !important; }
  .route-dot { width: 5px !important; height: 5px !important; margin-top: 5px !important; }
  .route-name { font-size: 12px !important; line-height: 1.52 !important; }
  .route-desc { font-size: 11px !important; line-height: 1.48 !important; }

  /* в”Ђв”Ђ FOOTER в”Ђв”Ђ */
  .source-line { font-size: 7.5px !important; margin-top: 14px !important; letter-spacing: 0.14em !important; }
  .badges { gap: 5px !important; flex-wrap: wrap; margin-top: 2px !important; }
  .badge { font-size: 8.5px !important; padding: 4px 9px !important; border-radius: 6px !important; }

  /* в”Ђв”Ђ CTA SCENE в”Ђв”Ђ */
  .cta-wrap { max-width: 100%; }
  .cta-headline {
    font-size: clamp(34px, 9.5vw, 58px) !important;
    line-height: 0.98 !important; margin-bottom: 16px !important;
  }
  .cta-sub { font-size: 14px !important; max-width: 100% !important; margin: 0 0 26px !important; line-height: 1.65 !important; }
  .cta-buttons { flex-direction: column !important; gap: 10px !important; }
  .btn-primary { padding: 14px 28px !important; font-size: 13px !important; border-radius: 2px !important; text-align: center; }
  .btn-ghost   { padding: 13px 22px !important; font-size: 10px !important; border-radius: 2px !important; text-align: center; }

  /* ── TOUR NAV — restore desktop pill on mobile ── */
  #tour-nav {
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    transform: translateX(-50%) !important;
    bottom: calc(var(--fixed-bottom-gap) + 20px) !important;
    border-radius: 40px !important;
    padding: 6px 10px 6px 14px !important;
    gap: 10px !important;
    align-items: center !important;
    align-self: stretch !important;
    overflow: visible !important;
  }
  .tour-chapter {
    font-size: 10px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    border: 0.5px solid rgba(255,111,0,0.25) !important;
    background: rgba(255,111,0,0.12) !important;
  }
  .tour-scene-label {
    font-size: 9px !important;
    letter-spacing: 0.13em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 110px !important;
    flex: 0 1 auto !important;
    padding: 0 !important;
    display: block !important;
  }
  .tour-pips { display: flex !important; gap: 5px !important; }
  .tour-pip  { display: block !important; }
  .tour-next {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    padding: 7px 14px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255,111,0,0.3) !important;
    background: rgba(255,111,0,0.1) !important;
    color: var(--orange) !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .tour-next:active { background: rgba(255,111,0,0.22) !important; }

  /* в”Ђв”Ђ V-ALERT BADGES в”Ђв”Ђ */
  .v-alert { padding: 6px 10px 6px 8px !important; gap: 6px !important; border-radius: 10px !important; }
  .v-alert-label { font-size: 9.5px !important; }
  .v-alert-name  { font-size: 8.5px !important; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   SMALL MOBILE (≤480px): tighter everything
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
@media (max-width: 480px) {
  .ww-logo svg { height: 13px; }
  .top-cta { font-size: 9px; padding: 6px 10px; }

  #scene-0 { padding: 0 16px 180px !important; }
  .hero-title { font-size: clamp(38px, 11vw, 58px) !important; }

  #scene-1 { padding: 70px 0 !important; min-height: var(--scene-vh) !important; height: var(--scene-vh) !important; }
  .impact-header { margin-bottom: 22px !important; }
  .impact-grid { gap: 10px !important; padding: 0 14px 12px !important; }
  /* Slightly wider cards on small phones — more content visible */
  .impact-card { flex: 0 0 86% !important; width: 86% !important; padding: 18px 16px 14px !important; border-radius: 16px !important; }
  .impact-num { font-size: clamp(34px, 9vw, 48px) !important; }

  /* Panel: bottom-sheet tighter on small phones */
  .panel {
    left: 10px !important;
    right: 10px !important;
    padding: 12px 16px 24px !important;
    max-height: 74vh !important;
    border-radius: 16px !important;
  }
  .panel-eyebrow { font-size: 9px !important; margin-bottom: 13px !important; }
  .panel-title { font-size: clamp(22px, 5.2vw, 28px) !important; margin-bottom: 8px !important; }
  .panel-body { font-size: 13px !important; line-height: 1.60 !important; margin-bottom: 10px !important; }
  .stat-num { font-size: clamp(17px, 3.8vw, 22px) !important; }
  .stat-label { font-size: 8px !important; line-height: 1.40 !important; }
  .route-name { font-size: 12px !important; }
  .route-desc { font-size: 11px !important; }

  .cta-headline { font-size: clamp(30px, 9.5vw, 48px) !important; }
  .cta-sub { font-size: 13px !important; }
  .btn-primary, .btn-ghost { width: 100% !important; justify-content: center !important; }
}

/* Scene canvas backgrounds */
.scene-cv {
  position: absolute; top:0; left:0; width:100%; height:100%;
  z-index: 0; pointer-events: none; display: block;
}

/* в”Ђв”Ђ SCENE CANVAS REVEAL SYSTEM в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
   All scene-associated canvases start hidden (opacity 0) and reveal
   with a smooth ease when their scene becomes active (.sc-on class).
   Elements drawn inside the canvas keep their geo-fixed positions —
   only visibility transitions, never movement.
   в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
canvas.scene-cv,
canvas#jam-overlay,
canvas#jam-scene-cv,
canvas#cv-flags-card,
canvas#cv-flags-s6 {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
canvas.scene-cv.sc-on,
canvas#jam-overlay.sc-on,
canvas#jam-scene-cv.sc-on,
canvas#cv-flags-card.sc-on,
canvas#cv-flags-s6.sc-on {
  opacity: 1;
}

/* Leaflet panes — dissolve between scene layers */
.leaflet-marker-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane {
  transition: opacity 0.45s ease;
}

/* Map wrapper — smooth show/hide between globe ↔ map */
#map-wrapper {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Globe visible ONLY on scenes 0 and 9 — data-scene driven, instant hide on exit */
body[data-scene="0"] #globe-canvas,
body[data-scene="9"] #globe-canvas {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}

/* ── SCENE 7 — ocean background removed, uses Leaflet map ── */

/* Scan-line vignette over map — removed */
#map-wrapper::after { display: none; }

/* card-click-hint removed — Explore Risk ↓ is now in .impact-explore only */

/* Parallax wrapper - panels get subtle depth shift */
.panel { will-change: transform, opacity, filter; }

/* Glitch animation for GPS/shadow scenes */
@keyframes glitchShift {
  0%,100% { clip-path: inset(0 0 90% 0); transform: translateX(-4px); }
  25%      { clip-path: inset(25% 0 50% 0); transform: translateX(4px); }
  50%      { clip-path: inset(55% 0 20% 0); transform: translateX(-2px); }
  75%      { clip-path: inset(80% 0 5% 0);  transform: translateX(2px); }
}

/* Pulse ring */
@keyframes cPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Radar sweep */
@keyframes radarSpin { to { transform: rotate(360deg); } }

/* Cape dash */

.custom-img picture > img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: inline-block;
	vertical-align: top;
}

.c-footer {
	position: relative;
	z-index: 150;
	scroll-snap-align: end;
	scroll-snap-stop: always;
}