@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght.woff2") format("woff2");
}

:root {
  --brand: #009fe3;
  --brand-dark: #007eb5;
  --ink: #173142;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --yc: 200px;
  --gap: 72px;
  --spine: calc(var(--yc) + var(--gap) / 2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: #0b1c28;
  color: #eef6fa;
  font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Time as light: each era is a little brighter than the last. */
.tone-1 { --bg: #0b1c28; --fg: #eef6fa; --muted: #9db4c1; --accent: #4cc3f0; --line: #2a4a5e; }
.tone-2 { --bg: #123146; --fg: #eef6fa; --muted: #a9c2d0; --accent: #5fcaf2; --line: #3a6079; }
.tone-3 { --bg: #1d5675; --fg: #ffffff; --muted: #c3dcea; --accent: #9be0fa; --line: #4d84a3; }
.tone-4 { --bg: #cfe9f6; --fg: #173142; --muted: #3f5a6a; --accent: #007eb5; --line: #8fbdd4; }
.tone-5 { --bg: #eaf6fc; --fg: #173142; --muted: #4a6473; --accent: #007eb5; --line: #b7d8e8; }
.tone-6 { --bg: #ffffff; --fg: #173142; --muted: #4a6473; --accent: #007eb5; --line: #cfe4ee; }

.hero, .chapter { background: var(--bg); color: var(--fg); }

.wrap { width: min(calc(100% - 64px), 1180px); margin-inline: auto; position: relative; }

/* Header */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 2.4vw, 32px) max(32px, calc((100% - 1180px) / 2));
  color: #eef6fa;
}
.brand {
  /* Header controls: change these three numbers to resize the drop and the name separately */
  --mark: clamp(46px, 4.5vw, 64px);
  --name: clamp(26px, 2.8vw, 40px);
  --gap: 14px;
  display: inline-flex; align-items: center; gap: var(--gap); text-decoration: none; font-weight: 650; letter-spacing: -.04em; color: #12aef0;
}
.brand img { width: var(--mark); height: var(--mark); flex: none; }
.brand span { font-size: var(--name); line-height: 1; }
.language-switch { font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; display: flex; gap: 8px; }
.language-switch a { text-decoration: none; opacity: .75; }
.language-switch a:hover { opacity: 1; }

/* Time rail (desktop only) */
.time-rail {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  background: rgba(11, 28, 40, .82); padding: 10px 0; border-radius: 10px;
}
.time-rail a {
  text-decoration: none; color: #fff; opacity: .6;
  padding: 2px 10px; border-right: 2px solid transparent;
}
.time-rail a.is-active { opacity: 1; border-right-color: #fff; }

/* Hero */
.hero { min-height: min(92vh, 760px); display: flex; align-items: center; padding: 184px 0 96px; }
.hero h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 5.6vw, 72px);
  line-height: 1.08; letter-spacing: -.01em; margin: 0 0 28px; max-width: 16em;
}
.hero-copy { font-size: clamp(18px, 2vw, 22px); color: var(--muted); max-width: 34em; margin: 0 0 36px; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.status { margin: 44px 0 0; font-size: 14px; color: var(--muted); max-width: 40em; border-left: 2px solid var(--line); padding-left: 14px; }

.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

.button {
  display: inline-block; padding: 14px 26px; border-radius: 999px; text-decoration: none;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 16px;
}
.button:hover { background: var(--brand-dark); }
.button.light { background: #fff; color: var(--brand-dark); }
.button.light:hover { background: #eaf6fc; }
.text-link { font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--accent); }

/* Chapters */
.chapter { padding: clamp(40px, 4.6vw, 64px) 0; }
.chapter .wrap { display: grid; grid-template-columns: var(--yc) 1fr; column-gap: var(--gap); }
.future .wrap::before { background: none; border-left: 2px dashed var(--line); width: 0; top: -1px; }
.chapter .wrap::before {
  content: ""; position: absolute; top: calc(-1 * clamp(40px, 4.6vw, 64px)); bottom: calc(-1 * clamp(40px, 4.6vw, 64px));
  left: var(--spine); width: 2px; background: var(--line);
}
.chapter .wrap::after {
  content: ""; position: absolute; left: calc(var(--spine) - 7px); top: 16px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 6px var(--bg);
}

.year {
  margin: 0; align-self: start; position: sticky; top: 96px; text-align: right;
  font-family: var(--serif); font-size: clamp(44px, 5vw, 64px); line-height: 1.05; font-weight: 500; color: var(--accent);
}
.year.text { font-size: 30px; line-height: 1.2; }
.year span { display: block; font-size: .55em; opacity: .7; }

.body { max-width: 40em; }
.body h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15; margin: 0 0 22px; letter-spacing: -.005em;
}
.body h3 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; color: var(--accent); }
.body p { margin: 0 0 18px; }
.dedication { font-family: var(--serif); font-style: italic; font-size: 1.3em; color: var(--accent); }
.small { font-size: 14px; color: var(--muted); }

.plain-list, .values, .who, .milestones, .status-grid, .steps { list-style: none; margin: 0 0 22px; padding: 0; }
.plain-list li { padding: 8px 0 8px 22px; position: relative; }
.plain-list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 2px; background: var(--accent); }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.values strong, .who strong { display: block; font-size: 17px; }
.values span, .who span { font-size: 15px; color: var(--muted); }
.values li { border-top: 2px solid var(--accent); padding-top: 12px; }

.milestones li { padding: 0 0 16px; }
.milestones strong { display: block; }
.supporter-logo.light { background: #fff; }
.supporter-logo.light img { width: 200px; }
.milestones .supporter-logo { display: block; width: max-content; margin: 12px 0 8px; }
.body > .supporter-logo { margin: 8px 0 0; }
.supporter-logo { display: inline-block; background: #0b1c28; border-radius: 10px; padding: 10px 16px; margin: 4px 0 32px; }
.supporter-logo img { display: block; width: 120px; height: auto; }

.team { display: grid; gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.team dl { margin: 0; }
.team dl div { padding: 8px 0; }
.team dt { font-weight: 700; }
.team dd { margin: 0; font-size: 15px; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; margin-bottom: 24px; max-width: 900px; }
.stats article { border-top: 2px solid var(--accent); padding-top: 12px; }
.stats strong { display: block; font-family: var(--serif); font-size: clamp(34px, 4vw, 48px); line-height: 1.1; font-weight: 500; }
.stats p { margin: 6px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.body:has(.stats) { max-width: 900px; }
.source-note { font-size: 13px; color: var(--muted); }
.source-note a { text-underline-offset: 3px; }

.who { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
.who li { border-top: 2px solid var(--accent); padding-top: 10px; }

.safety { margin: 34px 0; padding: 26px 28px; border-radius: 14px; background: #eaf6fc; }
.safety h3 { margin-bottom: 8px; font-size: 22px; letter-spacing: 0; text-transform: none; font-family: var(--serif); font-weight: 500; color: var(--ink); }
.safety p:last-child { margin: 0; font-size: 16px; }

.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.status-grid.two { grid-template-columns: repeat(2, 1fr); }
.status-grid span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.status-grid strong { display: block; font-size: 20px; font-family: var(--serif); font-weight: 500; }
.status-grid em { display: block; font-style: normal; font-size: 14px; color: var(--muted); line-height: 1.5; }

.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.steps span { font-family: var(--serif); color: var(--accent); font-size: 22px; }
.steps p { margin: 4px 0 0; font-size: 16px; color: var(--muted); }

/* Back to top */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 7; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand); color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--brand-dark); }

/* Final ask */
.ask { background: var(--brand-dark); color: #fff; padding: clamp(72px, 9vw, 120px) 0; text-align: center; }
.ask h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.1; margin: 0 auto 22px; max-width: 16em; }
.ask { text-align: left; }
.ask h2 { margin-inline: 0; max-width: 14em; }
.looking { list-style: none; margin: 8px 0 44px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; }
.looking li { border-top: 2px solid #9be0fa; padding-top: 12px; }
.looking strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; }
.looking span { display: block; margin-top: 6px; font-size: 16px; opacity: .9; line-height: 1.5; }
.ask .eyebrow { color: #cfeefb; }
.ask address { font-style: normal; display: grid; grid-template-columns: auto auto; grid-template-areas: "name btn" "role btn"; justify-content: start; align-items: center; column-gap: 40px; row-gap: 2px; }
.ask address strong { grid-area: name; font-size: 20px; align-self: end; }
.ask address span { grid-area: role; margin-bottom: 0; align-self: start; }
.ask address .button { grid-area: btn; }
.ask address span { opacity: .85; }

footer { background: #0b1c28; color: #9db4c1; text-align: center; padding: 32px 16px; font-size: 13px; }
footer p { margin: 2px 0; }

@media (max-width: 1240px) { .time-rail { display: none; } }

@media (max-width: 860px) {
  :root { --spine: 9px; }
  .wrap { width: calc(100% - 32px); }
  .site-header { padding: 16px; }
  .hero { min-height: 0; padding: 104px 0 56px; }
  .chapter { padding: 44px 0; }
  .chapter .wrap { display: block; padding-left: 34px; }
  .future .wrap::before { background: none; border-left: 2px dashed var(--line); width: 0; top: -1px; }
.chapter .wrap::before { top: -44px; bottom: -44px; }
  .chapter .wrap::after { left: 2px; top: 10px; }
  .year { position: static; text-align: left; font-size: 38px; margin-bottom: 8px; }
  .year.text { font-size: 30px; line-height: 1.2; }
.year span { display: inline; font-size: .6em; margin-left: 10px; }
  .year span::before { content: "– "; }
  .values, .stats, .who, .status-grid { grid-template-columns: 1fr 1fr; }
  .values { grid-template-columns: 1fr; }
  .safety { padding: 20px; }
  .looking { grid-template-columns: 1fr; }
  .ask address { column-gap: 20px; }
  .to-top { right: 14px; bottom: 14px; }
  .ask { padding: 64px 0; }
}

@media (max-width: 480px) {
  body { font-size: 17px; }
  .status-grid, .who, .stats { grid-template-columns: 1fr; }
  .hero-actions { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Trend chart */
.trend { margin: 0 0 32px; max-width: 900px; }
.trend figcaption { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.trend ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 14px; height: 240px; }
.trend li { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.trend i { display: block; width: 100%; height: calc(var(--v) / 853 * 78%); background: var(--accent); border-radius: 4px 4px 0 0; }
.trend .proj i { background: repeating-linear-gradient(135deg, var(--accent) 0 8px, #7fc3de 8px 16px); }
.trend b { order: -1; font-family: var(--serif); font-weight: 500; font-size: 20px; margin-bottom: 6px; }
.trend span { order: 2; font-size: 13px; color: var(--muted); margin-top: 8px; }

/* People, outside the timeline */
.people { background: #fff; color: var(--ink); padding: clamp(40px, 4.6vw, 64px) 0; border-top: 1px solid #cfe4ee; }
.people .eyebrow { color: var(--brand-dark); }
.people h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; margin: 0 0 32px; }
.people .team { grid-template-columns: 1fr 1fr; gap: 40px; border-top: 0; padding-top: 0; max-width: 900px; --accent: #007eb5; --muted: #4a6473; --line: #cfe4ee; }
.people h3 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; color: var(--brand-dark); }
@media (max-width: 860px) { .people .team { grid-template-columns: 1fr; gap: 24px; } .trend ol { gap: 8px; height: 200px; } .trend b { font-size: 15px; } }

.timeline { position: relative; }
.timeline .chapter { position: relative; z-index: 1; }
.pull { margin: 26px 0 4px; padding: 0 0 0 20px; border-left: 3px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; }
.ahead { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 14px; }
.ahead li { position: relative; padding-left: 28px; }
.ahead li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 12px; border: 2px dashed var(--accent); border-radius: 50%; }
.ahead strong { display: block; }
.ahead span { font-size: 15px; color: var(--muted); }

.chapter.future .wrap::before { background: none; width: 0; border-left: 2px dashed var(--line); top: -1px; }


/* Redrawn first sketch */
.sketch { margin: 28px 0 8px; max-width: 380px; }
.sketch svg { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .28); }
.sketch figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

.sketches { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; margin: 28px 0 8px; }
.sketches .sketch { margin: 0; flex: 1 1 260px; }
.sketches .menu-sketch { max-width: 340px; }

.notice { margin: 0 0 22px; font-size: 14.5px; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 14px; }

.hero-copy.first { margin-bottom: 22px; }


.sketch.combo svg { box-shadow: none; border-radius: 0; overflow: visible; }

.sketch.combo svg { box-shadow: none; border-radius: 0; overflow: visible; }

.sketch.combo { max-width: 360px; margin: 28px auto 8px; }
.sketch.combo figcaption { text-align: center; }
.sketch.combo svg { box-shadow: none; border-radius: 0; overflow: visible; }

/* Pinned phone: scroll drives the bar, the + and the five services (variables set by timeline.js) */
.phone-scroll { position: relative; height: 190vh; margin-bottom: 8px; }
.phone-pin { position: sticky; top: 4vh; display: flex; flex-direction: column; align-items: center; gap: 12px; perspective: 1400px; }
.phone-pin figcaption { max-width: 34em; margin: 0; }
.tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .15s ease-out; }
.tilt svg { display: block; height: min(74vh, 745px); width: auto; max-width: 100%; aspect-ratio: 430 / 890; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .35)); }
.scrollmode .a-bar { transform: translateY(calc(var(--bar, 0) * 80px)); opacity: calc(1 - var(--bar, 0)); }
.scrollmode .a-fab { transform: translateY(calc(var(--bar, 0) * 14px)); }
.scrollmode .a-dim { opacity: calc(var(--open, 0) * .9); }
.scrollmode .a-plus { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--open, 0) * 45deg)); }
.scrollmode .a-pulse { display: none; }
.scrollmode .svc { transform-box: fill-box; transform-origin: center; opacity: var(--s, 0); transform: translate(calc((1 - var(--s, 0)) * var(--dx)), calc((1 - var(--s, 0)) * var(--dy))) scale(calc(.3 + .7 * var(--s, 0))); }
@media (prefers-reduced-motion: reduce) {
  .phone-scroll { height: auto; }
  .phone-pin { position: static; height: auto; }
  .tilt { transform: none; }
  .tilt svg { height: auto; width: 100%; }
}

.team .since { display: block; font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 2px; }

/* Regulatory world map (black and white) */
.regmap { margin: 8px 0 20px; }
.regmap img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.regmap .big { font-size: 11px; letter-spacing: .08em; }
.regmap .small { font-size: 9px; font-weight: 600; }
.regmap .mono { font-family: ui-monospace, monospace; font-size: 7px; fill: #111; fill-opacity: .55; }
.regmap figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.regmap .k { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 1.5px solid #111; }
.regmap .k1 { background: #111; }
.regmap .k2 { background: #5c5c5c; }
.regmap .k3 { border-radius: 50%; background: radial-gradient(#111 0 35%, #fff 40%); }
.regmap .k4 { background: radial-gradient(#111 1.4px, #fff 1.6px) 0 0 / 5px 5px; }

/* Accessibility and phone */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: 8px; background: #fff; color: #0b1c28; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
a:focus-visible, button:focus-visible { outline: 3px solid #9be0fa; outline-offset: 3px; border-radius: 4px; }
.floating-contact { display: none; }
@media (max-width: 760px) {
  .floating-contact { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: block; padding: 12px 22px; border-radius: 999px; color: #fff; background: var(--brand-dark); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transition: opacity 160ms ease; }
  .floating-contact.is-hidden { opacity: 0; pointer-events: none; }
  .to-top { right: 16px; bottom: 76px; }
  footer { padding-bottom: 84px; }
}
.year span.sr { position: absolute; display: inline; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 1; font-size: inherit; }
.year span.sr::before { content: none; }

@media (max-width: 860px) { .site-header { padding: 16px; } .brand { --mark: 46px; --name: 26px; --gap: 12px; } }

/* Time as light: JS sets the --live-* colors, every chapter shares them so the page fades from night to day */
.tl-live [class*="tone-"] { --bg: var(--live-bg); --fg: var(--live-fg); --muted: var(--live-muted); --accent: var(--live-accent); --line: var(--live-line); }
.tl-live body { background: var(--live-bg); }

/* ===== Wow effects ===== */

/* Self-drawing spine: the glowing line grows with your scroll, dots light up when reached */
.timeline { position: relative; }
.spine-fill {
  position: absolute; top: 0; width: 2px; height: 0; z-index: 0; pointer-events: none;
  left: calc(50% - min(100% - 64px, 1180px) / 2 + var(--spine) - 1px);
  background: linear-gradient(var(--live-accent, #4cc3f0), #9be0fa);
  box-shadow: 0 0 14px 2px rgba(76, 195, 240, .55);
}
@media (max-width: 860px) { .spine-fill { left: calc(16px + var(--spine) - 1px); } }
.tl-live .timeline .chapter { background: transparent; }
.chapter .wrap::after { opacity: .32; transition: opacity .5s ease, box-shadow .5s ease; }
.chapter.reached .wrap::after { opacity: 1; box-shadow: 0 0 0 6px var(--bg), 0 0 20px var(--accent); }

/* Rolling year: one pinned year in the left margin (wide screens) */
.yr-rail { display: none; }
@media (min-width: 861px) {
  .tl-roll .yr-rail { display: block; position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; width: var(--yc); left: calc(50% - min(100% - 64px, 1180px) / 2); }
  .tl-roll .chapter .year { opacity: 0; pointer-events: none; }
  .yr-sticky { position: sticky; top: 110px; text-align: right; }
  .odo { display: inline-flex; height: 1em; overflow: hidden; font-family: var(--serif); font-size: clamp(44px, 5vw, 64px); line-height: 1; font-weight: 500; color: var(--live-accent, #4cc3f0); }
  .odo .col { height: 1em; overflow: hidden; }
  .odo .strip { display: flex; flex-direction: column; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
  .odo .strip i { font-style: normal; height: 1em; width: .6em; text-align: center; display: block; }
}
@media (prefers-reduced-motion: reduce) { .odo .strip { transition: none; } }

/* Counters and growing bars */
.js-count .trend i { height: 0; transition: height .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--k, 0) * .08s + .1s); }
.js-count .trend.in i { height: calc(var(--v) / 853 * 78%); }
@media (prefers-reduced-motion: reduce) { .js-count .trend i { transition: none; } }

/* Hero entrance: words rise from blur, a slow glow drifts behind */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; width: min(80vw, 720px); aspect-ratio: 1; border-radius: 50%; right: -4%; top: -2%;
  background: radial-gradient(circle, #1d5675 0, transparent 66%); opacity: .55; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 50%, transparent 92%); mask-image: linear-gradient(#000 50%, transparent 92%);
  animation: heroGlow 14s ease-in-out infinite alternate;
}
@keyframes heroGlow { from { transform: translate(-6%, -4%) scale(1); } to { transform: translate(6%, 5%) scale(1.15); } }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 .w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(18px); animation: wordRise 1s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * .11s + .15s); }
@keyframes wordRise { to { opacity: 1; filter: blur(0); transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .hero h1 .w { opacity: 1; filter: none; transform: none; animation: none; }
}

/* Text sliding in */
.js-reveal .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.js-reveal .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .rv { opacity: 1; transform: none; transition: none; } }

.map-img:not([src]) { visibility: hidden; }

/* Map that travels: injected inline, steps driven by classes p1 to p5 */
.map-holder { aspect-ratio: 544 / 214; border: 1px solid var(--line); background: #fbfbf9; }
.map-holder svg { display: block; width: 100%; height: auto; }
.map-holder.anim [data-s] { opacity: 0; transition: opacity .9s ease; }
.map-holder.anim .rm-draw { stroke-dashoffset: 1; transition: stroke-dashoffset 1.9s ease-in-out; }
.map-holder.anim.p1 [data-s="1"], .map-holder.anim.p2 :is([data-s="1"], [data-s="2"]),
.map-holder.anim.p3 :is([data-s="1"], [data-s="2"], [data-s="3"]), .map-holder.anim.p4 :is([data-s="1"], [data-s="2"], [data-s="3"]),
.map-holder.anim.p5 [data-s] { opacity: 1; }
.map-holder.anim.p4 .rm-draw, .map-holder.anim.p5 .rm-draw { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .map-holder.anim [data-s] { opacity: 1; transition: none; } .map-holder.anim .rm-draw { stroke-dashoffset: 0; transition: none; } }

/* Numbered list (1, 2, 3) */
.numbered { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: n; }
.numbered li { counter-increment: n; position: relative; padding: 8px 0 8px 42px; }
.numbered li::before { content: counter(n); position: absolute; left: 0; top: 9px; width: 28px; height: 28px; border-radius: 50%; border: 1.6px solid var(--accent); color: var(--accent); font-weight: 700; font-size: 14px; line-height: 1; display: grid; place-items: center; }
.trend p.small { font-size: 14px; font-weight: 400; margin-top: 18px; }
.regmap text { font-family: Inter, Arial, Helvetica, sans-serif; }