/* ══════════════════════════════════════════════════════════════
   GreenRock Petrochemical Ghana Ltd — gr-pch.com
   Brand tokens carried from PCH V6 brand system.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --navy:        #175087;
  --navy-deep:   #0B2A4A;
  --navy-night:  #08192E;
  --cyan:        #3CB3E2;
  --mid-blue:    #249AD6;
  --teal:        #3CB29E;
  --gold:        #E8B84A;
  --gold-deep:   #F4C542;
  --green:       #2E9E55;

  /* Neutrals */
  --ink:         #102124;
  --body:        #575756;
  --meta:        #8A94A6;
  --line:        #E3E8EF;
  --line-soft:   #EDF1F6;
  --paper:       #FFFFFF;
  --paper-warm:  #FBFCFE;

  /* Gradients */
  --grad-night:  linear-gradient(152deg, var(--navy-night) 0%, var(--navy-deep) 48%, var(--navy) 100%);
  --grad-accent: linear-gradient(90deg, var(--cyan) 0%, var(--mid-blue) 55%, var(--teal) 100%);
  --grad-btn:    linear-gradient(120deg, var(--cyan), var(--mid-blue));
  --grad-gold:   linear-gradient(120deg, var(--gold-deep), var(--gold));

  /* Type */
  --font: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.21,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  /* Layout */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1280px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--cyan); color: #fff; }

/* ── Preloader ─────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-night);
  transition: opacity .7s var(--ease), visibility .7s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.loader__mark { width: 64px; animation: loaderPulse 1.6s var(--ease) infinite; }
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.loader__bar {
  width: 180px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.loader__bar span {
  display: block; width: 0%; height: 100%;
  background: var(--grad-accent);
  transition: width .35s var(--ease);
}

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 18px 0;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
.nav.scrolled {
  padding: 10px 0;
  background: rgba(8,25,46,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 12px 40px rgba(0,0,0,.25);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: flex-start; gap: 24px;
}
.nav__links { margin-inline-start: auto; }
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__markwrap {
  position: relative; width: 40px; height: 40px; flex-shrink: 0;
  transition: transform .5s var(--ease);
}
.nav__brand:hover .nav__markwrap { transform: rotate(90deg); }
.nav__mark { position: absolute; inset: 0; width: 40px; height: 40px; transition: opacity .45s var(--ease); }
.nav__mark--light { opacity: 0; }
.nav.scrolled .nav__mark--light { opacity: 1; }
.nav.scrolled .nav__mark:not(.nav__mark--light) { opacity: 0; }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1.08; }
.nav__brand-line { color: #fff; font-weight: 600; font-size: 14.5px; letter-spacing: .015em; }
.nav__brand-sub { margin-top: 3px; color: var(--cyan); font-size: 8px; font-weight: 600; letter-spacing: .34em; }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }
.nav__links a {
  color: rgba(255,255,255,.82); font-size: 13.5px; font-weight: 500; letter-spacing: .02em;
  position: relative; padding: 4px 0; transition: color .3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--grad-accent); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  padding: 10px 22px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  transition: background .35s, border-color .35s, transform .35s var(--ease);
}
.nav__cta:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); }
/* Language switcher */
.lang { position: relative; flex-shrink: 0; }
.lang__btn {
  height: 42px; min-width: 103px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 14px;
  border: 1px solid transparent;
  background: var(--grad-btn);
  color: #fff;
  transition: box-shadow .35s var(--ease), color .35s, background .35s, transform .4s var(--ease);
}
.lang__btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.lang__code { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.lang__chev { width: 13px !important; height: 13px !important; opacity: .8; transition: transform .35s var(--ease); }
.lang.open .lang__chev { transform: rotate(180deg); }
.lang__btn:hover, .lang.open .lang__btn {
  color: #fff; box-shadow: 0 8px 28px rgba(60,179,226,.45);
}
.lang__menu {
  position: absolute; top: calc(100% + 14px); inset-inline-end: 0;
  min-width: 158px; padding: 8px;
  border-radius: 14px;
  background: rgba(8,25,46,.95);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .45s var(--ease), visibility .45s;
}
.lang.open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__menu li + li { margin-top: 2px; }
.lang__menu button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 13px; border-radius: 9px;
  text-align: start; font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.8);
  transition: background .3s, color .3s;
}
.lang__menu button img {
  width: 20px; height: 15px; flex-shrink: 0;
  border-radius: 3px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.lang__menu button span { margin-inline-end: auto; }
.lang__menu button:hover { background: rgba(60,179,226,.14); color: #fff; }
.lang__menu button.current { color: var(--cyan); font-weight: 600; }
.lang__menu button.current::after { content: "✓"; font-size: 12px; }
.lang__btn:focus-visible, .lang__menu button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.nav__burger { display: none; flex-direction: column; gap: 6px; padding: 8px; }
.nav__burger span { width: 26px; height: 2px; background: #fff; transition: transform .4s var(--ease), opacity .3s; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 190; display: flex; align-items: center; justify-content: center;
  background: var(--grad-night);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
.mnav.open { opacity: 1; visibility: visible; }
.mnav__links { display: flex; flex-direction: column; gap: 26px; text-align: center; }
.mnav__links a, .mnav__links button {
  color: #fff; font-size: clamp(26px, 7vw, 38px); font-weight: 600; letter-spacing: -.01em;
  opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.mnav.open .mnav__links a, .mnav.open .mnav__links button { opacity: 1; transform: none; }
.mnav.open .mnav__links > *:nth-child(2) { transition-delay: .06s; }
.mnav.open .mnav__links > *:nth-child(3) { transition-delay: .12s; }
.mnav.open .mnav__links > *:nth-child(4) { transition-delay: .18s; }
.mnav.open .mnav__links > *:nth-child(5) { transition-delay: .24s; }
.mnav.open .mnav__links > *:nth-child(6) { transition-delay: .3s; }

/* ── Shared ────────────────────────────────────────────────── */
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 22px;
}
.label::before { content: ""; width: 26px; height: 2px; background: var(--grad-accent); }
.label--light { color: var(--cyan); }
.section-title {
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  color: var(--ink); text-wrap: balance;
}
.section-title--light { color: #fff; }
.section-title em { font-style: normal; color: var(--teal); }
.section-sub {
  margin-top: 18px; max-width: 560px;
  color: var(--body); font-size: 16px; font-weight: 300;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .03em;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s;
  will-change: transform;
}
.btn--primary { background: var(--grad-btn); color: #fff; }
.btn--primary:hover { box-shadow: 0 14px 38px rgba(60,179,226,.42); }
.btn--ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
.btn--block { width: 100%; }

/* Reveal primitives (JS adds .in) */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-card { opacity: 0; transform: translateY(48px) scale(.985); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal-card.in { opacity: 1; transform: none; }
[data-split] .w, [data-split-lines] .l {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .14em; margin-bottom: -.14em; /* keep descenders (g, y, p) unclipped */
}
[data-split] .w > i, [data-split-lines] .l > i {
  display: inline-block; font-style: normal;
  transform: translateY(125%); transition: transform 1.1s var(--ease);
}
[data-split].in .w > i, [data-split-lines].in .l > i { transform: translateY(0); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  color: #fff; overflow: hidden;
  background: var(--navy-night);
}
.hero__media { position: absolute; inset: 0; }
.hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(60,179,226,.14), transparent 55%),
    linear-gradient(180deg, rgba(8,25,46,.62) 0%, rgba(8,25,46,.30) 42%, rgba(8,25,46,.78) 100%);
}
.hero__grain {
  position: absolute; inset: -100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
  pointer-events: none;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 10% { transform: translate(-5%,-8%); }
  30% { transform: translate(4%,-4%); } 50% { transform: translate(-6%,6%); }
  70% { transform: translate(6%,3%); } 90% { transform: translate(-3%,8%); }
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: 140px var(--gutter) 40px;
}
.hero__eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 26px;
}
.hero__title {
  font-size: clamp(42px, 7.4vw, 96px);
  font-weight: 700; line-height: 1.14; letter-spacing: -.028em;
  text-wrap: balance;
}
.hero__lede {
  margin-top: 30px; max-width: 560px;
  font-size: clamp(15.5px, 1.5vw, 18px); font-weight: 300; line-height: 1.7;
  color: rgba(255,255,255,.88);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.hero__foot {
  position: relative; z-index: 2;
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: 0 var(--gutter) 38px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.hero__scroll {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.hero__scroll i {
  width: 1px; height: 44px; background: rgba(255,255,255,.35);
  position: relative; overflow: hidden; display: block;
}
.hero__scroll i::after {
  content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: var(--cyan); animation: scrollDrip 1.9s var(--ease-io) infinite;
}
@keyframes scrollDrip { 0% { top: -50%; } 100% { top: 110%; } }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__chips span {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(8,25,46,.35);
  backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

/* ── Marquee ───────────────────────────────────────────────── */
.marquee {
  overflow: hidden; padding: 20px 0;
  background: var(--paper); border-bottom: 1px solid var(--line-soft);
}
.marquee__track {
  display: flex; align-items: center; gap: 34px; width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__track span {
  font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--navy); white-space: nowrap;
}
.marquee__track i { color: var(--teal); font-style: normal; font-size: 9px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Venture ───────────────────────────────────────────────── */
.venture { padding: clamp(90px, 12vw, 170px) 0; background: var(--paper); }
.venture__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.venture__statement {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 600; line-height: 1.24; letter-spacing: -.018em;
  max-width: 980px; color: var(--ink); text-wrap: balance;
}
.venture__grid {
  margin-top: clamp(50px, 6vw, 84px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.venture__grid--split {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 84px); align-items: center;
}
.venture__cards { display: flex; flex-direction: column; gap: 14px; }

/* Partnership viz (light band) */
.venture__viz { position: relative; }
.venture__africa { fill: #E9EEF4; }
/* RTL: whole svg is mirrored — counter-flip the continent so geography stays true */
html[dir="rtl"] .venture__africa { transform: scaleX(-1); transform-origin: center; transform-box: fill-box; }
.venture__svg { display: block; width: 100%; height: auto; overflow: visible; }
.vline {
  fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; opacity: .5;
  transition: opacity .4s, stroke-width .4s;
}
.vline--cyan { stroke: var(--cyan); }
.vline--teal { stroke: var(--teal); }
.vline--navy { stroke: var(--navy); }
.vline.is-hot { opacity: 1; stroke-width: 2.8; }
.vnode--cyan { fill: var(--cyan); }
.vnode--teal { fill: var(--teal); }
.vnode--navy { fill: var(--navy); }
.venture__hex {
  fill: rgba(255,255,255,.95); stroke: rgba(23,80,135,.35); stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 24px rgba(8,25,46,.28));
}
.venture__vring {
  fill: none; stroke: rgba(36,154,214,.4); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center;
  animation: ventureRing 4.4s var(--ease) infinite;
}
.venture__vring--2 { animation-delay: 2.2s; stroke: rgba(60,178,158,.35); }
@keyframes ventureRing {
  0%   { transform: scale(.82); opacity: .75; }
  100% { transform: scale(1.45); opacity: 0; }
}
.venture__orbit {
  fill: none; stroke: rgba(23,80,135,.28); stroke-width: 1;
  stroke-dasharray: 2 7; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center;
  animation: ventureOrbit 80s linear infinite;
}
@keyframes ventureOrbit { to { transform: rotate(360deg); } }
.vflow { fill: var(--mid-blue); opacity: 0; transition: opacity .8s var(--ease); }
.vflow.on { opacity: .85; }
.viz--static .vline { stroke-dashoffset: 0 !important; }
/* RTL: mirror the connector geometry, keep the logo mark upright */
html[dir="rtl"] .venture__svg { transform: scaleX(-1); }
html[dir="rtl"] .venture__svg image { transform: scaleX(-1); transform-origin: center; transform-box: fill-box; }
.venture__vizcap {
  margin-top: 18px; text-align: center;
  font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--meta);
}

/* Card corner link-out */

/* Stretched link: one anchor covers the whole card (clean a11y tree);
   the visible ↗ chip is drawn by its ::before + svg in the corner. */
.partner__out {
  position: absolute; inset: 0; border-radius: 18px;
  color: var(--meta);
}
.partner__out::before {
  content: ""; position: absolute; right: 14px; top: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  transition: border-color .35s, background .35s, transform .45s var(--ease), box-shadow .45s var(--ease);
}
.partner__out svg {
  position: absolute; right: 23.5px; top: 25.5px;
  width: 17px; height: 17px;
  transition: color .35s, transform .45s var(--ease);
}
.partner__out:hover::before, .partner__out:focus-visible::before {
  border-color: transparent; background: var(--grad-btn);
  transform: translate(2px, -2px);
  box-shadow: 0 10px 26px rgba(60,179,226,.4);
}
.partner__out:hover svg, .partner__out:focus-visible svg { color: #fff; transform: translate(2px, -2px); }
.partner__out:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.partner--teal .partner__out:hover::before, .partner--teal .partner__out:focus-visible::before { background: linear-gradient(120deg, var(--teal), var(--green)); box-shadow: 0 10px 26px rgba(60,178,158,.4); }
.partner--gold .partner__out:hover::before, .partner--gold .partner__out:focus-visible::before { background: linear-gradient(120deg, var(--navy), var(--mid-blue)); box-shadow: 0 10px 26px rgba(23,80,135,.35); }
.partner {
  position: relative; padding: 20px 22px 22px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--paper-warm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  overflow: hidden;
}
.partner::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.partner--teal::before { background: linear-gradient(90deg, var(--teal), var(--green)); }
.partner--gold::before { background: linear-gradient(90deg, var(--navy), var(--mid-blue)); }
.partner:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(10,30,51,.12); border-color: transparent; }
.partner:hover::before { transform: scaleX(1); }
.partner__tag {
  display: inline-block; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mid-blue);
}
.partner--teal .partner__tag { color: var(--teal); }
.partner--gold .partner__tag { color: var(--navy); }
.partner h3 { font-size: 24px; font-weight: 700; letter-spacing: -.012em; line-height: 1.22; }
.partner__loc { margin: 4px 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--meta); }
.partner p:last-of-type { font-size: 13.5px; font-weight: 300; color: var(--body); line-height: 1.65; }

/* ── Scale (dark) ──────────────────────────────────────────── */
.scale {
  position: relative; padding: clamp(90px, 12vw, 170px) 0;
  background: var(--grad-night); color: #fff; overflow: hidden;
}
.scale__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 420px at 82% 8%, rgba(60,179,226,.16), transparent 60%),
    radial-gradient(600px 400px at 6% 96%, rgba(60,178,158,.12), transparent 55%);
}
.scale__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.scale__grid {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.metric {
  padding: 34px 28px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  background: rgba(255,255,255,.04); backdrop-filter: blur(6px);
  transition: border-color .4s, background .4s, transform .5s var(--ease);
}
.metric:hover { border-color: rgba(60,179,226,.5); background: rgba(60,179,226,.07); transform: translateY(-6px); }
.metric__value {
  display: block; font-size: clamp(38px, 4vw, 56px); font-weight: 700; letter-spacing: -.03em;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metric__label { display: block; margin-top: 8px; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.66); }
.scale__note { margin-top: 42px; max-width: 640px; font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,.55); }

/* ── Platform — full-frame stacked slides ─────────────────── */
.platform { background: var(--paper); }
.platform__head {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(90px, 12vw, 170px) var(--gutter) clamp(60px, 8vw, 110px);
}
.slides { position: relative; }
.slide {
  position: sticky; top: 0;
  min-height: 100svh;
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden;
  box-shadow: 0 -30px 80px rgba(8,25,46,.25);
  /* Dwell: each pinned slide holds fully readable for ~a quarter
     viewport of scroll before the next slide pulls up over it */
  margin-bottom: clamp(140px, 26svh, 340px);
}
/* Slides 01–03 carry more copy after the 18.08 rewrite, so they get extra
   dwell — longer fully-readable hold before the next slide pulls up over
   them, which is what made the icon cards look clipped. The last slide is
   excluded: its dwell comes from .slides__tail below. */
.slide:not(:last-of-type) { margin-bottom: clamp(200px, 34svh, 440px); }
/* Last slide: dwell comes from the container tail below (a margin here
   would show as a bare gap once the stack scrolls out) */
.slide:last-of-type { margin-bottom: 0; }
.slides__tail { height: clamp(140px, 26svh, 340px); }
.slide--light { background: var(--paper-warm); color: var(--ink); }
.slide--dark { background: var(--grad-night); color: #fff; }
.slide--flip .slide__media { order: 2; }
.slide--flip .slide__body { order: 1; }
.slide__media { position: relative; height: 100%; min-height: 100svh; overflow: hidden; }
.slide__media img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
/* Square hub still cropped portrait: keep the plant towers focal,
   solar arrays in frame lower-right */
.slide__img--plant { object-position: 62% 50%; }
.slide__body {
  display: flex; align-items: center;
  padding: clamp(60px, 8vw, 120px) clamp(28px, 5vw, 90px);
}
.slide__content { max-width: 520px; margin: 0 auto; }
.slide__num {
  display: block;
  font-size: clamp(64px, 8vw, 110px); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(23,80,135,.3);
  margin-bottom: 22px;
}
.slide--dark .slide__num { -webkit-text-stroke-color: rgba(60,179,226,.45); }
.slide__title {
  font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1.16; letter-spacing: -.02em;
  margin-bottom: 22px; text-wrap: balance;
}
/* 14.5px matches .band__prose — David's reference, 18.08. Was
   clamp(15px, 1.4vw, 17px), which rendered 17px on a laptop and made the
   longer rewritten copy overflow the pinned slide. */
.slide__content > p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--body); }
/* David's paragraph divide (18.08) — the slide copy is two paragraphs but the
   global reset zeroes p margins, so they ran together as one block. */
.slide__content > p + p { margin-top: .85em; }
/* Emphasis inside slide prose. Currently unused — David's 18.08 bolding on
   slide 02 was withdrawn as a mistake. Kept because the sizing is right for
   this context: body copy is weight 300, so the browser default of 700 reads
   as a hard jump. If bold is ever wanted again, add <strong> to the string and
   switch that paragraph to data-i18n-html — data-i18n writes via textContent
   and silently strips tags on language switch. */
.slide__content > p strong { font-weight: 600; color: var(--ink); }
.slide--dark .slide__content > p strong { color: #fff; }
.slide--dark .slide__content > p { color: rgba(255,255,255,.8); }
.slide__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.slide__tags li {
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--navy);
  transition: background .3s, border-color .3s;
}
.slide__tags li:hover { background: #E6F4FB; border-color: var(--cyan); }
.slide--dark .slide__tags li {
  border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff;
}
.slide--dark .slide__tags li:hover { background: rgba(60,179,226,.14); border-color: var(--cyan); }

/* Slide fact cards — icon + label (replaces the tag chips) */
.slide__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 32px;
}
.slide__facts li {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: #fff;
  transition: transform .45s var(--ease), border-color .35s, background .35s, box-shadow .45s var(--ease);
}
.fact__icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid rgba(23,80,135,.22); background: rgba(23,80,135,.06);
  color: var(--navy);
}
.fact__icon svg { width: 22px; height: 22px; }
.fact__label { font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1.35; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .slide__facts li:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 12px 30px rgba(10,30,51,.1); }
}
/* Dark slides — blue glass to match the pcards */
.slide--dark .slide__facts li { border-color: rgba(60,179,226,.26); background: rgba(60,179,226,.07); }
.slide--dark .fact__icon { border-color: rgba(60,179,226,.32); background: rgba(60,179,226,.13); color: var(--cyan); }
.slide--dark .fact__label { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .slide--dark .slide__facts li:hover { border-color: rgba(60,179,226,.6); background: rgba(60,179,226,.11); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
}
@media (max-width: 760px) {
  .slide__facts { grid-template-columns: 1fr; gap: 10px; }
}
/* ── Short-viewport compaction (rebuilt 18.08 after the copy rewrite) ───────
   The slides are pinned with overflow:hidden, so anything taller than the
   pinned viewport is cut off rather than pushed — after David's longer copy
   that was taking ~170px off the icon cards on slide 04 at 1280×800.

   Two width-based sizings were the cause, both spending space on the axis
   that isn't the constraint. The larger by far is .slide__body padding at
   clamp(60px, 8vw, 120px) — 117px top and bottom on a 1459px-wide window,
   234px of a ~790px box given to air. Reclaiming it is enough on its own at
   laptop heights, so the type is left exactly as designed and the slide reads
   tighter rather than more spaced. Only below 720px does the type come down,
   and .slide__num is held as large as the space allows.

   Above 920px tall nothing here applies.

   TIER 1 — reclaim the padding, leave the type alone. */
@media (min-width: 761px) and (max-height: 920px) {
  .slide__body { padding-top: clamp(26px, 3.2svh, 56px); padding-bottom: clamp(26px, 3.2svh, 56px); }
  .slide__content > p { line-height: 1.62; }
  .slide__facts { margin-top: 20px; gap: 9px; }
  .slide__facts li { padding: 8px 12px; }
  .fact__icon { width: 34px; height: 34px; }
  .fact__icon svg { width: 19px; height: 19px; }
  .fact__label { font-size: 12.5px; }
}
/* TIER 2 — genuinely short (small laptops, tablet landscape). Prose is already
   at its 14.5px base, so this only tightens spacing and eases the number down;
   headings keep their designed size. */
@media (min-width: 761px) and (max-height: 720px) {
  .slide__body { padding-top: 18px; padding-bottom: 18px; }
  .slide__num { font-size: clamp(46px, 8.5svh, 92px); margin-bottom: 6px; }
  .slide__title { margin-bottom: 16px; }
  .slide__content > p { line-height: 1.5; }
  .slide__content > p + p { margin-top: .55em; }
  .slide__facts { margin-top: 12px; gap: 6px; }
  .slide__facts li { padding: 6px 10px; }
  .fact__icon { width: 28px; height: 28px; }
  .fact__icon svg { width: 16px; height: 16px; }
  .fact__label { font-size: 11.5px; }
}

/* ── Impact — green industrial platform (dark) ─────────────── */
.impact {
  position: relative; padding: clamp(90px, 12vw, 170px) 0;
  background: var(--grad-night); color: #fff; overflow: hidden;
}
.impact__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 420px at 82% 8%, rgba(60,179,226,.16), transparent 60%),
    radial-gradient(600px 400px at 6% 96%, rgba(60,178,158,.12), transparent 55%);
}
.impact__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.impact .section-sub { color: rgba(255,255,255,.72); }

.impact__diagram {
  position: relative; margin-top: clamp(48px, 6vw, 84px);
  display: grid; grid-template-columns: minmax(0, 1fr) 1.1fr minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px); align-items: center;
}

/* Connector layer (drawn by js/platform.js, desktop only) */
.impact__links {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.impact__links path {
  fill: none; stroke: rgba(60,179,226,.32); stroke-width: 2;
  transition: stroke .4s, opacity .4s;
}
.impact__links path.is-hot { stroke: rgba(60,179,226,.7); }
.impact__links .impact-dot { fill: #4CD97B; opacity: .85; } /* green travelling dots — breaks the triple-blue (David) */

.impact__col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }

.impact__chip {
  align-self: flex-start;
  padding: 0; border: 0; background: none; box-shadow: none;
  font-size: 18px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #fff;
}
/* Development Outcomes heading — same size and colour as the others */
.impact__chip--green { color: #fff; }

/* Hub */
.impact__hub {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(24px, 3vw, 44px) 0;
}
.impact__core {
  position: relative;
  width: clamp(220px, 21vw, 280px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.impact__rings { position: absolute; inset: 0; pointer-events: none; }
.impact__rings i {
  position: absolute; inset: 9%; border-radius: 50%;
  border: 1px solid rgba(60,179,226,.4);
  animation: impactRing 4.5s var(--ease) infinite;
}
.impact__rings i:nth-child(2) { animation-delay: 1.5s; border-color: rgba(60,178,158,.35); }
.impact__rings i:nth-child(3) { animation-delay: 3s; border-color: rgba(36,154,214,.35); }
@keyframes impactRing {
  0%   { transform: scale(.96); opacity: .55; }
  100% { transform: scale(1.5); opacity: 0; }
}
.impact__orbit {
  position: absolute; inset: -7%; width: 114%; height: 114%;
  pointer-events: none;
  animation: impactOrbit 70s linear infinite;
}
@keyframes impactOrbit { to { transform: rotate(360deg); } }
.impact__medallion {
  position: relative; width: 82%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}
.impact__medallion img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.impact__medallion::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 46px rgba(8,25,46,.55);
}
.impact__caption {
  margin-top: 34px; text-align: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* Cards */
.pcard {
  position: relative; z-index: 1;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s, background .4s, box-shadow .5s var(--ease);
}
.pcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.pcard--green { border-color: rgba(60,178,158,.22); background: rgba(60,178,158,.05); }
.pcard--green::before { background: linear-gradient(90deg, var(--teal), var(--green)); }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover {
    transform: translateY(-6px);
    border-color: rgba(60,179,226,.5); background: rgba(60,179,226,.07);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
  }
  .pcard:hover::before { transform: scaleX(1); }
  .pcard--green:hover { border-color: rgba(60,178,158,.55); background: rgba(60,178,158,.09); }
}
.pcard__head {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 22px 20px; text-align: left;
}
.pcard__head:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: 16px; }
.pcard__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid rgba(60,179,226,.28); background: rgba(60,179,226,.12);
  color: var(--cyan);
}
.pcard__icon svg { width: 24px; height: 24px; }
.pcard--green .pcard__icon {
  border-color: rgba(60,178,158,.32); background: rgba(46,158,85,.14);
  color: var(--teal);
}
.pcard__text { flex: 1 1 auto; min-width: 0; }
.pcard__title { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; color: #fff; }
.pcard__sum { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.68); }
.pcard__toggle {
  flex: 0 0 auto; align-self: flex-start; margin-top: 2px;
  position: relative; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  transition: transform .45s var(--ease), border-color .3s;
}
.pcard__toggle::before, .pcard__toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: rgba(255,255,255,.72);
  transform: translate(-50%, -50%);
}
.pcard__toggle::before { width: 10px; height: 1.5px; }
.pcard__toggle::after { width: 1.5px; height: 10px; transition: transform .4s var(--ease), opacity .3s; }
.pcard__head[aria-expanded="true"] .pcard__toggle { transform: rotate(90deg); border-color: var(--cyan); }
.pcard__head[aria-expanded="true"] .pcard__toggle::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.pcard__detail { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.pcard__detail p {
  padding: 0 46px 22px 80px;
  font-size: 13px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.62);
}

/* Outcomes row */
.impact__outcomes {
  grid-column: 1 / -1; position: relative; z-index: 1;
  margin-top: clamp(12px, 2vw, 24px);
  display: flex; flex-direction: column; gap: 18px;
}
.impact__outcomes .impact__chip { align-self: center; }
.impact__outgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Outcomes cards: summaries sit on two lines max with even spacing */
.impact__outgrid .pcard__head { padding: 20px 16px; gap: 13px; }
.impact__outgrid .pcard__icon { width: 40px; height: 40px; }
.impact__outgrid .pcard__sum { font-size: 12px; margin-right: -34px; } /* summaries flow under the toggle column: two lines max */
/* Foundation/Impact columns: same two-line discipline */
.impact__col .pcard__sum { margin-right: -34px; }
@media (min-width: 1021px) and (max-width: 1320px) {
  .impact__col .pcard__sum { font-size: 12.5px; margin-right: -42px; }
}

/* ── Reach — Ghana serving West Africa (dark) ──────────────── */
.reach {
  position: relative; padding: clamp(90px, 12vw, 170px) 0;
  background: var(--navy-night); color: #fff; overflow: hidden;
}
.reach__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 480px at 18% 14%, rgba(60,179,226,.14), transparent 58%),
    radial-gradient(620px 420px at 88% 82%, rgba(60,178,158,.10), transparent 55%);
}
.reach__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.reach .section-sub { color: rgba(255,255,255,.72); }
.reach__grid {
  margin-top: clamp(44px, 6vw, 76px);
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
.reach__points {
  display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px);
  align-self: start; margin-top: clamp(20px, 3.5vw, 56px);
}
.reach__point {
  display: flex; align-items: flex-start; gap: 18px;
  cursor: default;
  transition: transform .5s var(--ease);
}
.reach__icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid rgba(60,178,158,.32); background: rgba(60,178,158,.12);
  color: var(--teal);
  transition: border-color .45s var(--ease), background .45s var(--ease),
              box-shadow .45s var(--ease), color .45s var(--ease);
}
.reach__icon svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) {
  .reach__point:hover { transform: translateX(6px); }
  .reach__point:hover .reach__icon {
    border-color: rgba(123,224,195,.75);
    background: rgba(60,178,158,.2);
    color: #7BE0C3;
    box-shadow: 0 0 26px rgba(60,178,158,.4), 0 0 60px rgba(60,178,158,.16);
  }
}
.reach__point h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: #fff; }
.reach__point p { margin-top: 5px; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.68); }
.reach__map { position: relative; }
.reach__svg { display: block; width: 100%; height: auto; overflow: visible; }
.reach__svg text {
  font-family: var(--font); font-size: 17px; font-weight: 600;
  letter-spacing: 1.5px; fill: #CFE3F5;
  paint-order: stroke; stroke: rgba(8,25,46,.55); stroke-width: 3px;
}
.reach-arc {
  fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round;
  opacity: .8; stroke-dasharray: 1;
}
/* Ghana beacon — a navy overlay of the Ghana shape pulses like a
   heartbeat, so the green beneath reads light → dark (CEO request).
   Cheap: opacity-only on a small filter-free inline path. */
.reach__ghana {
  fill: var(--navy-night); pointer-events: none;
  animation: ghBeat 4.6s ease-in-out infinite;
}
@keyframes ghBeat {
  0%   { opacity: .42; }
  50%  { opacity: 0; }
  100% { opacity: .42; }
}
.reach-node circle {
  fill: #F0A63C; /* warm gold-orange per David's mock — read clearly against navy + cyan arcs */
  transform-box: fill-box; transform-origin: center;
  transition: fill .3s;
}
.reach-node circle.reach-node__hit { fill: none; pointer-events: all; cursor: pointer; }
.reach-node text { opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.reach-node:hover text { opacity: 1; }
/* Green flare on arrival — same green family as Ghana itself
   (one-shot, added by reach.js as each arc lands) */
.reach-node.landed circle:not(.reach-node__hit) { animation: reachLand 1s var(--ease) 1; }
@keyframes reachLand {
  0%   { fill: #F0A63C; transform: scale(1); filter: none; }
  35%  { fill: #4CD97B; transform: scale(1.9); filter: drop-shadow(0 0 8px rgba(76,217,123,.85)); }
  100% { fill: #F0A63C; transform: scale(1); filter: none; }
}
/* Green pulse while hovered (name revealed) */
.reach-node:hover circle:not(.reach-node__hit) {
  fill: #4CD97B;
  animation: reachHover 1.3s ease-in-out infinite;
}
@keyframes reachHover {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 3px rgba(76,217,123,.55)); }
  50%      { transform: scale(1.55); filter: drop-shadow(0 0 9px rgba(76,217,123,.9)); }
}
.reach__hubdot { fill: #7BE0C3; }
.reach__hublabel { font-size: 17.5px; font-weight: 700; letter-spacing: 2.5px; fill: #7BE0C3; }
.reach__ring {
  fill: none; stroke: rgba(123,224,195,.5); stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center;
  animation: reachRing 3.4s var(--ease) infinite;
}
.reach__ring--2 { animation-delay: 1.7s; }
@keyframes reachRing {
  0%   { transform: scale(.55); opacity: .85; }
  100% { transform: scale(2.6); opacity: 0; }
}
.reach-pulse { fill: #9ADCF5; opacity: 0; transition: opacity .9s var(--ease); }
.reach--live .reach-pulse.on { opacity: .9; }
.reach--static .reach-arc { stroke-dashoffset: 0 !important; }
.reach--static .reach-node { opacity: 1 !important; }

/* ── Band ──────────────────────────────────────────────────── */
.band { position: relative; height: clamp(380px, 60vh, 640px); overflow: hidden; }
.band__media { position: absolute; inset: 0; }
.band__media img {
  position: relative; top: -10%;
  width: 100%; height: 120%; object-fit: cover; object-position: center 68%;
  will-change: transform;
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,25,46,.32), rgba(8,25,46,.55));
}
.band__text {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(36px, 6vw, 70px);
  max-width: min(var(--maxw), 100%); margin: 0 auto; padding: 0 var(--gutter);
}
.band__caption {
  color: #fff; font-size: clamp(22px, 3vw, 36px); font-weight: 600; line-height: 1.25; letter-spacing: -.015em;
}
.band__prose {
  margin-top: 16px; max-width: 640px;
  color: rgba(255,255,255,.86); font-size: 14.5px; font-weight: 300; line-height: 1.7;
  text-shadow: 0 1px 12px rgba(8,25,46,.4);
}
.band__caption .l { display: inline-block; }

/* ── Pathway ───────────────────────────────────────────────── */
.pathway { padding: clamp(90px, 12vw, 160px) 0; background: var(--paper); }
.pathway__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.pathway__steps {
  margin-top: clamp(46px, 6vw, 70px);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  counter-reset: step;
}
.pathway__steps li {
  position: relative; padding: 30px 18px 0 0;
  border-top: 2px solid var(--line);
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .8s var(--ease), border-color .6s;
}
.pathway__steps li.in { opacity: 1; transform: none; }
.pathway__steps li::before {
  content: ""; position: absolute; top: -7px; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line);
  transition: background .5s, border-color .5s, box-shadow .5s;
}
.pathway__steps li.done { border-top-color: var(--teal); }
.pathway__steps li.done::before { background: var(--teal); border-color: var(--teal); }
.pathway__steps li.now { border-top-color: var(--cyan); }
.pathway__steps li.now::before {
  background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 0 6px rgba(60,179,226,.22);
  animation: nowPulse 2.2s var(--ease) infinite;
}
@keyframes nowPulse {
  0%,100% { box-shadow: 0 0 0 5px rgba(60,179,226,.20); }
  50%     { box-shadow: 0 0 0 10px rgba(60,179,226,.06); }
}

/* ── Animated progress (JS adds .pathway--anim, then .go in view) ──
   The bar sweeps left → right through the completed steps; each dot
   glows as the bar passes it; the current dot pulses once, then
   settles to a steady halo. */
.pathway--anim li.done, .pathway--anim li.now { border-top-color: var(--line); }
.pathway--anim li.done::before, .pathway--anim li.now::before {
  background: var(--paper); border-color: var(--line);
  box-shadow: none; animation: none;
}
.pathway--anim li.done::after {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 100%; height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: left center;
}
.pathway--anim.go li:nth-child(1)::after { animation: pwFill .6s var(--ease-io) forwards .15s; }
.pathway--anim.go li:nth-child(2)::after { animation: pwFill .6s var(--ease-io) forwards .72s; }
@keyframes pwFill { to { transform: scaleX(1); } }
.pathway--anim.go li:nth-child(1)::before { animation: pwDotOn .7s var(--ease) forwards .1s; }
.pathway--anim.go li:nth-child(2)::before { animation: pwDotOn .7s var(--ease) forwards .72s; }
@keyframes pwDotOn {
  0%   { background: var(--paper); border-color: var(--line); box-shadow: 0 0 0 0 rgba(60,178,158,0); }
  45%  { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 9px rgba(60,178,158,.28); }
  100% { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 0 rgba(60,178,158,0); }
}
.pathway--anim.go li.now::before { animation: pwNowArrive 1.2s var(--ease) forwards 1.32s; }
@keyframes pwNowArrive {
  0%   { background: var(--paper); border-color: var(--line); box-shadow: 0 0 0 0 rgba(60,179,226,0); }
  30%  { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 14px rgba(60,179,226,.32); }
  62%  { box-shadow: 0 0 0 3px rgba(60,179,226,.1); }
  100% { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(60,179,226,.2); }
}
.pathway__steps span {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink); line-height: 1.4;
}
.pathway__steps li.now span { color: var(--mid-blue); }
.pathway__note { margin-top: 52px; max-width: 760px; font-size: 13.5px; font-weight: 300; color: var(--meta); }

/* ── Quote ─────────────────────────────────────────────────── */
.quote {
  padding: clamp(100px, 14vw, 190px) var(--gutter);
  max-width: 1000px; margin: 0 auto; text-align: center;
}
.quote__text {
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 500; line-height: 1.35; letter-spacing: -.015em; color: var(--ink);
  text-wrap: balance;
}
.quote__text .qw { opacity: .16; transition: opacity .45s var(--ease); }
.quote__text .qw.lit { opacity: 1; }
.quote__cite {
  display: block; margin-top: 34px;
  font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--meta);
}

/* ── Press ─────────────────────────────────────────────────── */
.press {
  position: relative; padding: clamp(90px, 12vw, 160px) 0;
  background: var(--grad-night); color: #fff; overflow: hidden;
}
.press::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(720px 460px at 14% 10%, rgba(60,179,226,.14), transparent 58%);
  pointer-events: none;
}
.press__inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.press__sub { margin-top: 18px; max-width: 480px; font-size: 15.5px; font-weight: 300; color: rgba(255,255,255,.75); }
.press__actions { margin-top: 34px; }
.press__card {
  display: flex; flex-direction: column; gap: 20px;
  padding: 40px 36px 34px;
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  transition: transform .5s var(--ease), border-color .4s, background .4s, box-shadow .5s var(--ease);
}
.press__card:hover {
  transform: translateY(-8px);
  border-color: rgba(60,179,226,.55);
  background: rgba(255,255,255,.08);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.press__card-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal);
}
.press__card-title { font-size: 19px; font-weight: 600; line-height: 1.42; color: #fff; }
.press__card-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan);
}
.press__card-cta i { font-style: normal; transition: transform .35s var(--ease); }
.press__card:hover .press__card-cta i { transform: translateX(6px); }

/* ── Footer ────────────────────────────────────────────────── */
.footer { background: var(--navy-night); color: #fff; padding: clamp(60px, 8vw, 100px) 0 0; border-top: 1px solid rgba(255,255,255,.08); }
.footer__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 60px;
  display: grid; grid-template-columns: 1fr 2.4fr; gap: clamp(32px, 4vw, 72px);
}
.footer__brand { display: flex; gap: 16px; align-items: flex-start; }
.footer__mark { width: 52px; }
.footer__name { display: block; font-weight: 600; font-size: 17px; line-height: 1.12; }
.footer__sub { display: block; margin-top: 4px; color: var(--cyan); font-size: 9px; font-weight: 600; letter-spacing: .34em; }
.footer__cols { display: grid; grid-template-columns: 1.3fr 1fr .85fr; gap: 28px; }
.footer__label {
  display: block; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan);
}
.footer__cols p { font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,.72); line-height: 1.8; }
.footer__cols a { color: rgba(255,255,255,.85); transition: color .3s; }
.footer__cols a:hover { color: var(--cyan); }
.footer__links { display: flex; flex-direction: column; gap: 4px; }
.footer__links a, .footer__links button { text-align: left; font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,.72); transition: color .3s; padding: 0; }
.footer__links a:hover, .footer__links button:hover { color: var(--cyan); }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px var(--gutter);
  max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,.45);
}

/* ── Contact modal ─────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; visibility: hidden; }
.modal.open { visibility: visible; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8,25,46,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .5s var(--ease);
}
.modal.open .modal__backdrop { opacity: 1; }
.modal__panel {
  position: relative; width: min(940px, 100%); max-height: min(92svh, 780px); overflow: auto;
  border-radius: 22px; background: #fff;
  box-shadow: 0 40px 120px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(46px) scale(.97);
  transition: opacity .55s var(--ease), transform .6s var(--ease);
}
.modal.open .modal__panel { opacity: 1; transform: none; }
.modal__close {
  position: absolute; top: 16px; right: 18px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 22px; line-height: 1; color: var(--meta);
  background: var(--paper-warm); border: 1px solid var(--line);
  transition: transform .35s var(--ease), color .3s, border-color .3s;
}
.modal__close:hover { transform: rotate(90deg); color: var(--ink); border-color: var(--meta); }
.modal__grid { display: grid; grid-template-columns: 1fr 1.15fr; }
.modal__info {
  padding: clamp(32px, 4vw, 48px);
  background: var(--grad-night); color: #fff;
  border-radius: 22px 0 0 22px;
  display: flex; flex-direction: column;
}
.modal__mark { width: 46px; margin-bottom: 26px; }
.modal__info h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.modal__sub { margin-top: 10px; font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,.7); }
.modal__rows { margin-top: 34px; display: flex; flex-direction: column; gap: 20px; }
.modal__rows span {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 4px;
}
.modal__rows a { font-size: 14.5px; font-weight: 500; color: #fff; transition: color .3s; }
.modal__rows a:hover { color: var(--cyan); }
.modal__rows p { font-size: 13px; font-weight: 300; color: rgba(255,255,255,.78); line-height: 1.7; }
.modal__form { padding: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; gap: 18px; }
.hp { position: absolute; left: -9999px; }
.field label {
  display: block; margin-bottom: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
}
.field input, .field textarea {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--paper-warm);
  transition: border-color .3s, box-shadow .3s, background .3s;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(60,179,226,.14); background: #fff;
}
.modal__note { font-size: 11.5px; color: var(--meta); text-align: center; }

/* ── Press-release viewer modal ────────────────────────────── */
.pv { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: clamp(10px, 2vw, 28px); visibility: hidden; }
.pv.open { visibility: visible; }
.pv__backdrop {
  position: absolute; inset: 0;
  background: rgba(8,25,46,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .5s var(--ease);
}
.pv.open .pv__backdrop { opacity: 1; }
.pv__panel {
  position: relative; width: min(1000px, 100%); height: min(92svh, 900px);
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: var(--navy-deep);
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(46px) scale(.97);
  transition: opacity .55s var(--ease), transform .6s var(--ease);
}
.pv.open .pv__panel { opacity: 1; transform: none; }
.pv__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 13px 16px;
  background: var(--navy-night);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--cyan), var(--mid-blue), var(--teal)) 1;
}
.pv__title { display: flex; align-items: center; gap: 11px; color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.pv__title img { width: 24px; }
.pv__tools { display: flex; align-items: center; gap: 8px; }
.pvbtn {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  min-width: 34px; height: 34px; padding: 0 11px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 15px; font-weight: 700;
  transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.pvbtn:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.pvbtn--fit { font-size: 11px; letter-spacing: .06em; }
.pv__zoom {
  min-width: 46px; text-align: center; flex-shrink: 0;
  color: rgba(255,255,255,.75); font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.pvbtn--dl { background: var(--grad-btn); border-color: transparent; font-size: 12px; letter-spacing: .06em; }
.pvbtn--dl:hover { box-shadow: 0 8px 24px rgba(60,179,226,.45); }
.pv__close { font-size: 20px; }
.pv__close:hover { transform: rotate(90deg); }
.pv__stage {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; cursor: grab;
  padding: clamp(18px, 3vw, 40px);
  background:
    radial-gradient(800px 480px at 70% -5%, rgba(60,179,226,.08), transparent 55%),
    var(--navy-deep);
  box-shadow: inset 0 2px 18px rgba(0,0,0,.25);
}
.pv__stage.dragging { cursor: grabbing; user-select: none; }
.pv__loading {
  position: absolute; inset: 62px 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
  pointer-events: none;
  transition: opacity .5s var(--ease), visibility .5s;
}
.pv__loading img { width: 40px; animation: loaderPulse 1.6s var(--ease) infinite; }
.pv__loading.done { opacity: 0; visibility: hidden; }
.pv__pages {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  width: max-content; min-width: 100%; margin: 0 auto;
}
.pv__pages canvas {
  height: auto !important; flex-shrink: 0;
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(20px);
  animation: pvPageIn .8s var(--ease) forwards;
}
@keyframes pvPageIn { to { opacity: 1; transform: none; } }
.pv__fallback { color: rgba(255,255,255,.8); text-align: center; font-size: 14px; padding: 60px 20px; }
.pv__fallback a { color: var(--cyan); font-weight: 600; }

/* ── Cookie notice ─────────────────────────────────────────── */
.cookies {
  position: fixed; inset-inline-start: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px);
  z-index: 260;
  display: flex; align-items: center; gap: 18px;
  max-width: min(430px, calc(100vw - 28px));
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(8,25,46,.92);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.cookies.show { opacity: 1; transform: none; }
.cookies p { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.82); }
.cookies strong { font-weight: 600; color: #fff; }
.cookies__btn {
  flex: 0 0 auto;
  padding: 9px 18px; border-radius: 999px;
  background: var(--grad-btn); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cookies__btn:hover { box-shadow: 0 8px 24px rgba(60,179,226,.45); }
.cookies__btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .venture__grid { grid-template-columns: 1fr; max-width: 620px; }
  .venture__viz { display: none; }
  .scale__grid { grid-template-columns: repeat(2, 1fr); }
  .slide { position: relative; grid-template-columns: 1fr; min-height: 0; margin-bottom: 0; }
  .slides__tail { display: none; }
  .slide__media { height: min(52svh, 460px); min-height: 0; order: 0 !important; }
  .slide__body { order: 1 !important; padding: 46px var(--gutter) 64px; }
  .impact__diagram { grid-template-columns: 1fr; max-width: 620px; }
  .impact__links { display: none; }
  .impact__hub { order: -1; padding: 0 0 14px; }
  .impact__core { width: 200px; }
  .impact__outgrid { grid-template-columns: 1fr; }
  .pcard__detail p { padding-left: 20px; }
  .reach__grid { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
  .reach__map { order: -1; }
  .press__inner { grid-template-columns: 1fr; }
  .pathway__steps { grid-template-columns: repeat(3, 1fr); gap: 26px 18px; }
  .footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav__links { display: none; }
  .lang { margin-inline-start: auto; }
  .nav__burger { display: flex; }
  .nav__brand-name { font-size: 13.5px; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 24px; }
  .scale__grid { grid-template-columns: 1fr; }
  .pathway__steps { grid-template-columns: repeat(2, 1fr); }
  .modal__grid { grid-template-columns: 1fr; }
  .modal__info { border-radius: 22px 22px 0 0; }
  .footer__cols { grid-template-columns: 1fr; }
}

/* ── Integrated complex flow diagram (light band, in #platform) ── */
.complex {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter) clamp(70px, 9vw, 120px);
}
.complex__viz { position: relative; }
.complex__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Flow lines — drawn on entry by js/complex.js */
.cxline {
  fill: none; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; opacity: 1;
  transition: opacity .4s, stroke-width .4s;
}
.cxline.is-hot { stroke-width: 4; }
/* Solid white halo beneath the yellow routes — the earlier
   colour-core-on-white treatment, now in a single yellow */
.cxhalo {
  fill: none; stroke: rgba(255,255,255,.92); stroke-width: 6.5;
  stroke-linecap: round; stroke-dasharray: 1;
}
/* Yellow routes on white outlines — read on any surface, and the
   blue chips carry the naming */
.cxline--feed, .cxline--elec, .cxline--co2, .cxline--nacn, .cxline--value { stroke: #1E63E8; }

/* Flow label chips — bold, colour-coded, sized to text by js/complex.js */
.cxchip__bg {
  fill: rgba(255,255,255,.96); stroke-width: 1.8;
  filter: drop-shadow(0 5px 14px rgba(10,30,51,.18));
}
.cxchip__text {
  font-family: var(--font); font-size: 13px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.cxchip--elec .cxchip__bg, .cxchip--co2 .cxchip__bg,
.cxchip--nacn .cxchip__bg, .cxchip--value .cxchip__bg {
  fill: #1E63E8; stroke: rgba(255,255,255,.88);
}
.cxchip--elec .cxchip__text, .cxchip--co2 .cxchip__text,
.cxchip--nacn .cxchip__text, .cxchip--value .cxchip__text { fill: #fff; }
.cxchip--nacn .cxchip__text { text-transform: none; letter-spacing: .05em; } /* keep NaCN's chemical casing */

/* Leader lines + feature dots */
.cxleader {
  fill: none; stroke: rgba(23,80,135,.5); stroke-width: 1.5;
  transition: stroke .35s;
}
.cxdot {
  fill: var(--cyan); stroke: #fff; stroke-width: 2;
}

/* Callout cards over the render */
.scallout { cursor: pointer; outline: none; }
.scallout__bg {
  fill: #ffffff; stroke: var(--line); stroke-width: 1.4;
  filter: drop-shadow(0 10px 28px rgba(10,30,51,.22));
  transition: stroke .35s, filter .45s;
}
.scallout__tile {
  fill: rgba(60,179,226,.1); stroke: rgba(36,154,214,.35); stroke-width: 1.2;
  transition: fill .35s, stroke .35s;
}
.scallout__icon { color: var(--navy); transition: color .35s; overflow: visible; }
.scallout__name {
  font-family: var(--font); font-size: 16px; font-weight: 700;
  letter-spacing: -.01em; fill: var(--ink);
}
.scallout__sub {
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  letter-spacing: .02em; fill: var(--body);
}
.scallout__pill {
  font-family: var(--font); font-size: 13.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; fill: var(--navy);
}
.scallout:hover .scallout__bg, .scallout:focus-visible .scallout__bg {
  stroke: var(--cyan);
  filter: drop-shadow(0 12px 30px rgba(60,179,226,.35));
}
.scallout:hover .scallout__tile, .scallout:focus-visible .scallout__tile {
  fill: rgba(60,179,226,.12); stroke: rgba(60,179,226,.4);
}
.scallout:hover .scallout__icon, .scallout:focus-visible .scallout__icon { color: var(--mid-blue); }
.scallout:hover .cxleader, .scallout:focus-visible .cxleader { stroke: var(--cyan); }
.scallout:focus-visible .scallout__bg { stroke-width: 2.2; }

/* ── Uniform professional blue callouts per David's reference ── */
.scallout--solar .scallout__bg, .scallout--chem .scallout__bg,
.scallout--greenh .scallout__bg, .scallout--gold .scallout__bg {
  fill: url(#cxGradChem); stroke: rgba(255,255,255,.85);
}
.scallout--solar .scallout__tile, .scallout--chem .scallout__tile,
.scallout--greenh .scallout__tile, .scallout--gold .scallout__tile {
  fill: rgba(255,255,255,.18); stroke: rgba(255,255,255,.45);
}
.scallout--solar .scallout__icon, .scallout--chem .scallout__icon,
.scallout--greenh .scallout__icon, .scallout--gold .scallout__icon { color: #fff; }
.scallout--solar .scallout__name, .scallout--chem .scallout__name,
.scallout--greenh .scallout__name, .scallout--gold .scallout__name { fill: #fff; }
.scallout--solar .scallout__sub, .scallout--chem .scallout__sub,
.scallout--greenh .scallout__sub, .scallout--gold .scallout__sub { fill: rgba(255,255,255,.88); }
/* Leaders: steel blue; endpoint dots: warm gold-orange (per mock) */
.scallout--solar .cxleader, .scallout--chem .cxleader,
.scallout--greenh .cxleader, .scallout--gold .cxleader,
.scallout--feed .cxleader { stroke: #4478D9; stroke-width: 1.8; }
.scallout--solar .cxdot, .scallout--chem .cxdot,
.scallout--greenh .cxdot, .scallout--gold .cxdot,
.scallout--feed .cxdot { fill: #fff; stroke: #1E63E8; stroke-width: 2.5; }
/* Feed pill: same blue as the callouts */
.scallout--feed .scallout__bg { fill: url(#cxGradChem); stroke: rgba(255,255,255,.85); }
.scallout--feed .scallout__pill { fill: #fff; }
/* Hover: brighten and lift, white ring stays */
.scallout--solar:hover .scallout__bg, .scallout--chem:hover .scallout__bg,
.scallout--greenh:hover .scallout__bg, .scallout--gold:hover .scallout__bg,
.scallout--solar:focus-visible .scallout__bg, .scallout--chem:focus-visible .scallout__bg,
.scallout--greenh:focus-visible .scallout__bg, .scallout--gold:focus-visible .scallout__bg {
  stroke: #fff;
  filter: drop-shadow(0 14px 34px rgba(10,30,51,.4)) brightness(1.08);
}
.scallout--solar:hover .scallout__tile, .scallout--chem:hover .scallout__tile,
.scallout--greenh:hover .scallout__tile, .scallout--gold:hover .scallout__tile {
  fill: rgba(255,255,255,.28); stroke: rgba(255,255,255,.6);
}
.scallout--solar:hover .scallout__icon, .scallout--chem:hover .scallout__icon,
.scallout--greenh:hover .scallout__icon, .scallout--gold:hover .scallout__icon { color: #fff; }


/* Travelling dots */
.cxflow { opacity: 0; stroke: #fff; stroke-width: 1.8; transition: opacity .8s var(--ease); }
.cxflow.on { opacity: 1; }
.cxflow--feed, .cxflow--elec, .cxflow--co2, .cxflow--nacn, .cxflow--value { fill: #F0A63C; } /* warm supply dots pop on the blue routes */
.viz--static .cxline, .viz--static .cxhalo, .viz--static .cxleader { stroke-dashoffset: 0 !important; }
.viz--static .scallout, .viz--static .complex__flowlabels { opacity: 1 !important; }

/* Caption + hint */
.complex__cap {
  margin-top: 26px; text-align: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--meta);
}
.complex__hint {
  margin-top: 10px; text-align: center;
  font-size: 12.5px; font-weight: 500; color: var(--mid-blue);
}
.complex__hint::after { content: " ↓"; }

/* Compact chain — narrow viewports only */
.complex__chain { display: none; }
.complex__mobilemap { display: none; }
/* Swap to the mobile map on narrow viewports — and on ALL touch/tablet
   devices up to 1366px (incl. iPad Pro landscape): tablet system font
   scaling can inflate SVG callout text after layout, clipping the cards. */
@media (max-width: 1020px), (max-width: 1366px) and (pointer: coarse) {
  .complex__viz { display: none; }
  .complex__mobilemap {
    display: block; position: relative;
    margin: 0 auto 26px; max-width: 560px;
  }
  .complex__mobileimg { display: block; width: 100%; height: auto; border-radius: 14px; }
  .mpin {
    position: absolute; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px; white-space: nowrap;
    background: #1E63E8; border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 4px 14px rgba(6, 20, 46, .38);
    font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff;
    z-index: 2; transition: transform .25s var(--ease), box-shadow .25s;
  }
  .mpin:active { transform: translate(-50%, -50%) scale(.95); }
  .mpin i {
    width: 6px; height: 6px; border-radius: 50%; background: #fff; flex: 0 0 auto;
  }
  .mmap__lines {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none; overflow: visible;
  }
  .mmap__lines path {
    fill: none; stroke: rgba(46, 111, 232, .5); stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .mmap__lines .mmap__dot {
    stroke: #1E63E8; stroke-width: 6; stroke-linecap: round;
  }
  .mchip {
    position: absolute;
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
    background: #1E63E8; border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 3px 10px rgba(6, 20, 46, .3);
    font-size: 9px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #fff; z-index: 1;
  }
  .mchip--nacn { text-transform: none; letter-spacing: .02em; }
  .complex__chain {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    max-width: 480px; margin: 0 auto;
  }
  .chainlink {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--line); border-radius: 16px;
    background: var(--paper-warm);
    transition: border-color .35s, box-shadow .45s var(--ease), transform .45s var(--ease);
  }
  .chainlink:hover, .chainlink:focus-visible {
    border-color: var(--cyan); transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(10,30,51,.1);
  }
  .chainlink__icon {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    border: 1px solid rgba(23,80,135,.22); background: rgba(23,80,135,.06);
    color: var(--navy);
  }
  .chainlink__icon svg { width: 24px; height: 24px; }
  .chainlink__text { display: flex; flex-direction: column; min-width: 0; }
  .chainlink__text strong { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
  .chainlink__text em { margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--meta); }
  .chainflow {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0 6px 41px;
  }
  .chainflow i {
    width: 1px; height: 26px; background: var(--line);
    position: relative; overflow: hidden; display: block;
  }
  .chainflow i::after {
    content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
    background: var(--cyan); animation: scrollDrip 1.9s var(--ease-io) infinite;
  }
  .chainflow span {
    font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--mid-blue);
  }
  .chainflow span[data-i18n="cx.f3"] { text-transform: none; } /* keep NaCN casing */
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal-card, .pathway__steps li { opacity: 1 !important; transform: none !important; }
  [data-split] .w > i, [data-split-lines] .l > i { transform: none !important; }
  .quote__text .qw { opacity: 1 !important; }
  .reach__pulses { display: none; }
  .reach-arc { stroke-dashoffset: 0 !important; }
  .reach-node { opacity: 1 !important; }
  .reach__ghana { display: none; }
  .venture__flows { display: none; }
  .vline { stroke-dashoffset: 0 !important; }
  .complex__flows { display: none; }
  .cxline, .cxhalo, .cxleader { stroke-dashoffset: 0 !important; }
  .scallout, .complex__flowlabels { opacity: 1 !important; }
}

/* Very narrow phones: pins only — the chain below already names every flow */
@media (max-width: 480px) {
  .mchip, .mmap__lines { display: none; }
}