:root {
  color-scheme: dark;
  --ink: #061514;
  --ink-soft: #0c211f;
  --paper: #f2f1e9;
  --paper-dim: #c8cec5;
  --ice: #8fe8df;
  --ice-bright: #d6fffa;
  --coral: #ff8066;
  --lime: #cbe86b;
  --violet: #c7adff;
  --line: rgba(230, 255, 249, 0.18);
  --line-light: rgba(6, 21, 20, 0.18);
  --max: 1440px;
  --sans: "Helvetica Neue", "Inter", Arial, sans-serif;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  overflow-x: hidden;
}

a { color: inherit; }
button, select { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px clamp(22px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; }
.brand-mark { width: 13px; height: 13px; border: 1px solid var(--ice); border-radius: 50%; box-shadow: inset 5px 0 0 var(--ice); }
.main-nav { display: flex; gap: clamp(18px, 3vw, 42px); }
.main-nav a { color: var(--paper-dim); text-decoration: none; transition: color .2s ease; }
.main-nav a:hover { color: var(--ice-bright); }
.data-stamp { justify-self: end; color: var(--ice); }

.hero {
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  --hero-scroll-shift: 0px;
  min-height: max(1120px, 108vh);
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  padding: 150px clamp(22px, 6vw, 96px) 100px;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}

.hero-backdrop {
  position: absolute;
  z-index: 0;
  inset: -5%;
  background: url("assets/lapland-winter-hero.jpg") center / cover no-repeat;
  filter: saturate(.88) contrast(1.04) brightness(.92);
  transform: translate3d(var(--hero-shift-x), calc(var(--hero-shift-y) + var(--hero-scroll-shift)), 0) scale(1.08);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  will-change: transform, filter;
  animation: hero-focus 12s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 77% 28%, rgba(89,224,216,.06), transparent 32%),
    linear-gradient(90deg, rgba(6,21,20,.88) 0%, rgba(6,21,20,.67) 45%, rgba(6,21,20,.2) 100%),
    linear-gradient(180deg, rgba(6,21,20,.16) 0%, rgba(6,21,20,.05) 48%, rgba(6,21,20,.84) 100%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 75%, transparent);
  animation: hero-grid-drift 20s linear infinite;
  pointer-events: none;
}

.hero-sky { position: absolute; z-index: 2; inset: 0; overflow: hidden; mix-blend-mode: screen; pointer-events: none; }
.hero-sky::before {
  content: "";
  position: absolute;
  width: 68%; height: 34%; right: -6%; top: 10%;
  background: linear-gradient(118deg, transparent 13%, rgba(105,255,239,.07) 38%, rgba(99,223,255,.22) 52%, rgba(157,255,224,.07) 67%, transparent 85%);
  filter: blur(26px);
  transform: skewY(-8deg) rotate(-4deg);
  animation: aurora-ribbon 10s ease-in-out infinite alternate;
}
.hero-sky::after {
  content: "";
  position: absolute;
  inset: -30% 0 0;
  background-image:
    radial-gradient(circle, rgba(235,255,253,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(190,238,255,.45) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.32) 0 1.5px, transparent 2px);
  background-position: 20px 30px, 70px 10px, 15px 80px;
  background-size: 145px 185px, 95px 135px, 225px 270px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  opacity: .26;
  animation: snow-drift 22s linear infinite;
}
.orb { position: absolute; border-radius: 50%; opacity: .65; will-change: transform, opacity; }
.orb-one {
  width: min(82vw, 1120px); height: min(36vw, 520px); right: -12%; top: 8%;
  background: radial-gradient(ellipse, rgba(143,232,223,.2), rgba(29,136,152,.09) 44%, transparent 72%);
  filter: blur(48px);
  animation: aurora-one 9s ease-in-out infinite alternate;
}
.orb-two {
  width: min(56vw, 760px); height: min(28vw, 380px); left: 18%; bottom: 4%;
  background: radial-gradient(ellipse, rgba(113,210,255,.14), rgba(74,93,186,.07) 46%, transparent 72%);
  filter: blur(58px);
  animation: aurora-two 13s ease-in-out infinite alternate;
}
.constellation {
  position: absolute; right: 8%; top: 20%; width: 460px; height: 540px;
  background-image: radial-gradient(circle, rgba(214,255,250,.9) 1px, transparent 1.8px);
  background-size: 71px 83px;
  transform: rotate(-8deg);
  opacity: .18;
  animation: stars-drift 28s linear infinite;
}

.hero-copy {
  position: relative;
  z-index: 4;
  max-width: 1060px;
  padding: clamp(55px, 7vh, 90px) 0 clamp(60px, 8vh, 100px);
}
.eyebrow, .kicker { margin: 0 0 24px; color: var(--ice); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
h1, h2 { margin: 0; font-weight: 500; letter-spacing: -.055em; line-height: .88; }
h1 { max-width: 1240px; font-size: clamp(54px, 7.2vw, 108px); line-height: .92; }
h1 em, h2 em { color: var(--ice); font-family: var(--serif); font-weight: 400; }
.hero-lead { max-width: 680px; margin: 46px 0 0; color: var(--paper-dim); font-size: clamp(18px, 2vw, 27px); line-height: 1.45; }

.hero-metrics {
  position: relative; z-index: 4;
  margin-top: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1050px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.hero-metrics::before { content: ""; position: absolute; top: -1px; left: -30%; width: 28%; height: 1px; background: linear-gradient(90deg, transparent, var(--ice-bright), transparent); animation: metric-scan 5.5s 2.4s ease-in-out infinite; }
.hero-metrics article { padding: 26px 34px 0 0; border-right: 1px solid var(--line); }
.hero-metrics article + article { padding-left: 34px; }
.hero-metrics strong { display: block; color: var(--ice-bright); font-size: clamp(34px, 4vw, 62px); font-weight: 400; letter-spacing: -.04em; }
.hero-metrics span { display: block; margin-top: 7px; color: var(--paper-dim); font-size: 13px; }
.scroll-cue { position: absolute; z-index: 4; right: 5vw; bottom: 90px; display: flex; align-items: center; gap: 18px; color: var(--paper-dim); text-decoration: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transform: rotate(90deg); transform-origin: right; animation: scroll-cue-pulse 2.8s ease-in-out infinite; }
.scroll-line { display: block; width: 82px; height: 1px; background: var(--ice); transform-origin: left; animation: scroll-line-breathe 2.8s ease-in-out infinite; }

.hero.hero-ready .eyebrow { animation: hero-reveal .8s .08s cubic-bezier(.22,.8,.22,1) both; }
.hero.hero-ready h1 { animation: hero-title-reveal 1.1s .2s cubic-bezier(.16,.9,.2,1) both; }
.hero.hero-ready h1 em {
  color: transparent;
  background: linear-gradient(105deg, #8fe8df 12%, #ecfffc 42%, #8fe8df 68%, #a8cfff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: title-ice-shimmer 7s 1.5s ease-in-out infinite;
}
.hero.hero-ready .hero-lead { animation: hero-reveal .9s .62s cubic-bezier(.22,.8,.22,1) both; }
.hero.hero-ready .hero-metrics { animation: hero-reveal .9s .88s cubic-bezier(.22,.8,.22,1) both; }
.hero.hero-ready .hero-metrics article { animation: metric-rise .75s cubic-bezier(.22,.8,.22,1) both; }
.hero.hero-ready .hero-metrics article:nth-child(1) { animation-delay: 1.02s; }
.hero.hero-ready .hero-metrics article:nth-child(2) { animation-delay: 1.16s; }
.hero.hero-ready .hero-metrics article:nth-child(3) { animation-delay: 1.3s; }

@keyframes hero-focus {
  from { filter: saturate(.84) contrast(1.03) brightness(.9); }
  to { filter: saturate(.96) contrast(1.07) brightness(.98); }
}
@keyframes hero-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 80px 40px, 40px 80px; }
}
@keyframes aurora-ribbon {
  0% { opacity: .38; transform: translate3d(-3%, 4%, 0) skewY(-8deg) rotate(-4deg) scaleX(.9); }
  55% { opacity: .82; }
  100% { opacity: .48; transform: translate3d(5%, -3%, 0) skewY(-4deg) rotate(1deg) scaleX(1.08); }
}
@keyframes aurora-one {
  from { opacity: .35; transform: translate3d(-5%, 2%, 0) scale(.92) rotate(-5deg); }
  to { opacity: .72; transform: translate3d(5%, -4%, 0) scale(1.08) rotate(3deg); }
}
@keyframes aurora-two {
  from { opacity: .25; transform: translate3d(-4%, 3%, 0) scale(.9); }
  to { opacity: .58; transform: translate3d(7%, -2%, 0) scale(1.12); }
}
@keyframes stars-drift {
  from { background-position: 0 0; transform: rotate(-8deg) translate3d(0,0,0); }
  to { background-position: 71px 83px; transform: rotate(-5deg) translate3d(-18px,24px,0); }
}
@keyframes snow-drift {
  from { background-position: 20px -155px, 70px -125px, 15px -240px; transform: translateX(0); }
  to { background-position: 68px 215px, 34px 275px, 90px 300px; transform: translateX(24px); }
}
@keyframes hero-reveal {
  from { opacity: 0; transform: translate3d(0,30px,0); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
}
@keyframes hero-title-reveal {
  from { opacity: 0; transform: translate3d(0,48px,0) scale(.985); filter: blur(12px); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}
@keyframes metric-rise {
  from { opacity: 0; transform: translate3d(0,24px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes metric-scan {
  0%, 18% { transform: translateX(0); opacity: 0; }
  28% { opacity: 1; }
  72% { opacity: 1; }
  82%, 100% { transform: translateX(470%); opacity: 0; }
}
@keyframes title-ice-shimmer {
  0%, 28% { background-position: 100% 50%; }
  58%, 100% { background-position: 0% 50%; }
}
@keyframes scroll-cue-pulse {
  0%, 100% { opacity: .52; }
  50% { opacity: 1; }
}
@keyframes scroll-line-breathe {
  0%, 100% { transform: scaleX(.42); }
  50% { transform: scaleX(1); }
}

.section-index { color: var(--ice); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.section-heading h2, .timeline-intro h2, .winter-copy h2, .business-heading h2, .closing-section h2 { font-size: clamp(48px, 7vw, 104px); }

.map-section { max-width: var(--max); margin: 0 auto; padding: 20px clamp(16px, 4vw, 64px) 150px; }
.section-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 8vw; align-items: end; padding: 0 clamp(6px, 2vw, 32px) 55px; }
.section-heading p:last-child { max-width: 530px; margin: 0 0 8px; color: var(--paper-dim); font-size: 18px; line-height: 1.55; }
.map-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px;
  padding: 18px 20px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.018);
}
.control-group { display: flex; align-items: center; gap: 8px; }
.control-label { margin-right: 5px; color: var(--paper-dim); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
select, .filter-button, .play-button {
  height: 38px; border: 1px solid rgba(214,255,250,.24); border-radius: 999px;
  background: transparent; color: var(--paper); padding: 0 15px; cursor: pointer;
  font-size: 12px; font-weight: 700;
}
select { min-width: 94px; appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--ice) 50%), linear-gradient(135deg, var(--ice) 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px; background-repeat: no-repeat; }
select option { color: var(--ink); background: var(--paper); }
.filter-button { color: var(--paper-dim); }
.filter-button:hover, .filter-button.is-active { color: var(--ink); background: var(--ice); border-color: var(--ice); }
.play-button { display: inline-flex; align-items: center; gap: 7px; color: var(--ice); }
.play-button:hover { border-color: var(--ice); }
.play-icon { font-size: 9px; }

.map-stage { position: relative; min-height: 620px; border-bottom: 1px solid var(--line); }
#flow-map { display: block; width: 100%; height: auto; min-height: 560px; overflow: visible; }
.world-country { fill: rgba(224,245,240,.06); stroke: rgba(224,245,240,.12); stroke-width: .55; }
.world-country.is-finland { fill: rgba(143,232,223,.2); }
.finland-region, .ranking-region { stroke: var(--ink); stroke-width: 1.8; cursor: pointer; transition: fill .55s ease, opacity .2s ease; }
.finland-region:hover, .ranking-region:hover { stroke: var(--ice-bright); stroke-width: 2.5; }
.flow-arc { fill: none; stroke: var(--coral); stroke-linecap: round; opacity: .62; pointer-events: none; }
.flow-origin { fill: var(--coral); stroke: var(--ink); stroke-width: 2; }
.origin-label { fill: var(--paper); font: 700 11px var(--sans); paint-order: stroke; stroke: var(--ink); stroke-width: 4px; stroke-linejoin: round; }
.map-label { fill: var(--paper-dim); font: 700 10px var(--sans); letter-spacing: .16em; }
.region-label { fill: var(--paper); font: 700 10px var(--sans); text-anchor: middle; paint-order: stroke; stroke: var(--ink); stroke-width: 3px; pointer-events: none; }
.map-tooltip, .chart-tooltip {
  position: absolute; z-index: 5; opacity: 0; pointer-events: none;
  min-width: 180px; padding: 13px 15px; border: 1px solid rgba(214,255,250,.28);
  background: rgba(6,21,20,.94); color: var(--paper); box-shadow: 0 18px 45px rgba(0,0,0,.3);
  font-size: 12px; line-height: 1.45; transform: translate(-50%, -110%);
  transition: opacity .15s ease;
}
.map-tooltip strong, .chart-tooltip strong { display: block; color: var(--ice-bright); font-size: 18px; font-weight: 500; }
.map-tooltip.is-visible, .chart-tooltip.is-visible { opacity: 1; }
.map-legend { position: absolute; left: 25px; bottom: 25px; display: flex; align-items: center; gap: 10px; color: var(--paper-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.legend-ramp { width: 130px; height: 6px; background: linear-gradient(90deg, #102d2a, var(--ice)); }
.map-summary { position: absolute; right: 28px; bottom: 24px; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; text-align: right; }
.map-summary span { color: var(--paper-dim); font-size: 11px; }
.map-summary span:first-child { grid-column: 1 / -1; }
.map-summary strong { color: var(--ice-bright); font-size: 30px; font-weight: 400; letter-spacing: -.04em; }
.method-note { margin: 14px 0 0; color: rgba(200,206,197,.68); font-size: 11px; line-height: 1.55; }

.rank-map-section { padding-top: 120px; }
.rank-map-stage {
  display: grid; grid-template-columns: minmax(350px, .82fr) minmax(500px, 1.18fr);
  min-height: 680px; border-bottom: 1px solid var(--line);
}
.origin-ranking-panel { padding: 28px 34px 28px 20px; border-right: 1px solid var(--line); }
.ranking-header {
  display: flex; justify-content: space-between; padding: 0 0 15px 48px;
  color: var(--paper-dim); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.origin-ranking-list { margin: 0; padding: 0; list-style: none; }
.origin-rank-button {
  position: relative; width: 100%; min-height: 52px; display: grid;
  min-width: 0; max-width: 100%; overflow: hidden;
  grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 0 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--paper); text-align: left; cursor: pointer;
}
.origin-rank-button::after {
  content: ""; position: absolute; left: 48px; bottom: -1px; width: var(--rank-width, 0%); height: 2px;
  background: var(--coral); transform-origin: left; transition: width .55s ease;
}
.origin-rank-button:hover, .origin-rank-button.is-selected { background: rgba(143,232,223,.055); }
.origin-rank-button.is-selected::after { height: 3px; background: var(--ice); }
.origin-rank-number { color: var(--paper-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.origin-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 700; white-space: nowrap; }
.origin-rank-value { color: var(--paper-dim); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.origin-rank-button.is-selected .origin-rank-name, .origin-rank-button.is-selected .origin-rank-value { color: var(--ice-bright); }
.ranking-map-panel { position: relative; min-width: 0; }
#ranking-map { display: block; width: 100%; height: 650px; }
.rank-map-legend { left: 28px; }
.rank-map-summary { right: 28px; }

.timeline-section { padding: 145px clamp(22px, 6vw, 96px); background: var(--paper); color: var(--ink); }
.timeline-section .section-index { color: #476c67; }
.timeline-intro { display: grid; grid-template-columns: 1.1fr .65fr; gap: 8vw; align-items: end; margin-top: 55px; }
.timeline-intro h2 em { color: #2a7770; }
.timeline-intro p { margin: 0 0 8px; font-size: 19px; line-height: 1.55; color: #38514e; }
.timeline-key { margin: 75px 0 8px; display: flex; gap: 28px; justify-content: flex-end; color: #47605d; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.timeline-key span { display: inline-flex; align-items: center; gap: 8px; }
.timeline-key i { display: inline-block; width: 28px; height: 3px; }
.key-total { background: #123b37; }
.key-foreign { background: var(--coral); }
.timeline-chart-wrap, .winter-chart-wrap { position: relative; }
#timeline-chart, #winter-chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: rgba(6,21,20,.12); stroke-width: 1; }
.chart-axis text { fill: #5f7370; font: 11px var(--sans); }
.chart-axis path, .chart-axis line { display: none; }
.timeline-area { fill: rgba(42,119,112,.1); }
.timeline-total { fill: none; stroke: #123b37; stroke-width: 4; }
.timeline-foreign { fill: none; stroke: var(--coral); stroke-width: 3; }
.pandemic-band { fill: rgba(255,128,102,.10); }
.annotation-line { stroke: #b14e3c; stroke-width: 1; stroke-dasharray: 4 4; }
.annotation-text { fill: #8f3f32; font: 700 11px var(--sans); letter-spacing: .08em; }
.hover-line { stroke: rgba(6,21,20,.3); stroke-width: 1; }
.hover-dot-total { fill: #123b37; }
.hover-dot-foreign { fill: var(--coral); }
.timeline-chart-wrap .chart-tooltip, .winter-chart-wrap .chart-tooltip { background: rgba(242,241,233,.98); color: var(--ink); border-color: rgba(6,21,20,.18); box-shadow: 0 18px 45px rgba(6,21,20,.18); }
.timeline-chart-wrap .chart-tooltip strong, .winter-chart-wrap .chart-tooltip strong { color: #184c47; }
.timeline-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 38px; background: var(--line-light); }
.timeline-facts article { background: var(--paper); padding: 28px 0; }
.timeline-facts article + article { padding-left: 38px; }
.timeline-facts span { display: block; color: #54706c; font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.timeline-facts strong { display: block; margin-top: 9px; font-size: 45px; font-weight: 400; letter-spacing: -.04em; }
.timeline-facts p { margin: 3px 0 0; color: #506663; font-size: 13px; }

.winter-section { max-width: var(--max); margin: 0 auto; padding: 160px clamp(22px, 6vw, 96px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: center; }
.winter-copy p:not(.kicker) { max-width: 510px; color: var(--paper-dim); font-size: 18px; line-height: 1.55; }
.winter-stat { margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; align-items: flex-start; gap: 22px; }
.winter-stat strong { color: var(--ice-bright); font-size: 54px; font-weight: 400; line-height: .9; letter-spacing: -.05em; }
.winter-stat span { max-width: 250px; color: var(--paper-dim); font-size: 12px; line-height: 1.45; }
.winter-chart-title { display: flex; justify-content: space-between; color: var(--paper-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.winter-grid { stroke: rgba(214,255,250,.12); }
.winter-axis text { fill: var(--paper-dim); font: 11px var(--sans); }
.winter-axis path, .winter-axis line { display: none; }
.winter-total { fill: none; stroke: rgba(214,255,250,.42); stroke-width: 2.5; }
.winter-foreign { fill: none; stroke: var(--ice); stroke-width: 4; }
.winter-dot { fill: var(--ice); stroke: var(--ink); stroke-width: 3; }
.winter-label { fill: var(--paper); font: 700 11px var(--sans); }

.business-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 165px clamp(22px, 6vw, 96px);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 18%, rgba(143,232,223,.13), transparent 28%),
    radial-gradient(circle at 10% 74%, rgba(199,173,255,.08), transparent 32%),
    linear-gradient(145deg, #0b1a18 0%, #102421 48%, #081614 100%);
}
.business-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(rgba(214,255,250,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,255,250,.035) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle at 65% 36%, black, transparent 76%);
  animation: business-grid-drift 26s linear infinite;
  pointer-events: none;
}
.business-section::after {
  content: "03";
  position: absolute;
  z-index: 0;
  right: -2vw;
  top: 54px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(214,255,250,.075);
  font-size: clamp(230px, 35vw, 560px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.1em;
  pointer-events: none;
}
.business-section > :not(.business-orbit) { position: relative; z-index: 2; }
.business-orbit {
  position: absolute;
  z-index: 1;
  right: clamp(-210px, -10vw, -70px);
  top: 30px;
  width: clamp(390px, 48vw, 690px);
  aspect-ratio: 1;
  border: 1px solid rgba(143,232,223,.12);
  border-radius: 50%;
  box-shadow: inset 0 0 80px rgba(143,232,223,.035), 0 0 90px rgba(143,232,223,.025);
  animation: business-orbit-spin 34s linear infinite;
  pointer-events: none;
}
.business-orbit::before,
.business-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(143,232,223,.1);
  border-radius: 50%;
}
.business-orbit::before { inset: 16%; border-style: dashed; }
.business-orbit::after { inset: 36%; box-shadow: 0 0 50px rgba(143,232,223,.09); }
.orbit-node {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #0b1a18;
  border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 0 6px rgba(143,232,223,.08), 0 0 28px rgba(143,232,223,.55);
  animation: orbit-node-pulse 3.4s ease-in-out infinite;
}
.orbit-node-one { left: 13%; top: 22%; }
.orbit-node-two { right: 4%; top: 46%; background: var(--coral); box-shadow: 0 0 0 6px rgba(255,128,102,.08), 0 0 28px rgba(255,128,102,.45); animation-delay: -.8s; }
.orbit-node-three { left: 31%; bottom: 2%; background: var(--lime); box-shadow: 0 0 0 6px rgba(203,232,107,.08), 0 0 28px rgba(203,232,107,.42); animation-delay: -1.6s; }
.orbit-node-four { left: 47%; top: 34%; background: var(--violet); box-shadow: 0 0 0 6px rgba(199,173,255,.08), 0 0 28px rgba(199,173,255,.45); animation-delay: -2.4s; }
.business-section .section-index { display: flex; align-items: center; gap: 18px; }
.business-section .section-index::after { content: ""; width: clamp(80px, 12vw, 180px); height: 1px; background: linear-gradient(90deg, var(--ice), transparent); }
.business-heading { display: grid; grid-template-columns: 1fr .55fr; gap: 8vw; align-items: end; margin: 55px 0 75px; }
.business-heading h2 { max-width: 980px; text-shadow: 0 14px 48px rgba(0,0,0,.28); }
.business-heading p { margin: 0; color: var(--paper-dim); font-size: 20px; line-height: 1.5; }
.business-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid rgba(214,255,250,.22); border-left: 1px solid rgba(214,255,250,.22); box-shadow: 0 40px 100px rgba(0,0,0,.18); }
.business-card {
  position: relative;
  min-height: 490px;
  padding: clamp(32px, 5vw, 70px);
  overflow: hidden;
  border-right: 1px solid rgba(214,255,250,.22);
  border-bottom: 1px solid rgba(214,255,250,.22);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  transition: background .45s ease, box-shadow .45s ease, border-color .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.business-card::before { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--card-accent); transform: scaleY(0); transform-origin: bottom; transition: transform .5s ease; }
.business-card::after { content: ""; position: absolute; width: 360px; height: 360px; right: -210px; bottom: -240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--card-accent) 24%, transparent), transparent 70%); opacity: 0; transform: scale(.72); transition: opacity .45s ease, transform .55s ease; pointer-events: none; }
.business-card:hover { z-index: 2; border-color: color-mix(in srgb, var(--card-accent) 55%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 9%, transparent), rgba(255,255,255,.018)); box-shadow: 0 32px 80px rgba(0,0,0,.28); }
.business-card:hover::before { transform: scaleY(1); }
.business-card:hover::after { opacity: 1; transform: scale(1); }
.business-card[data-accent="ice"] { --card-accent: var(--ice); }
.business-card[data-accent="coral"] { --card-accent: var(--coral); }
.business-card[data-accent="lime"] { --card-accent: var(--lime); }
.business-card[data-accent="violet"] { --card-accent: var(--violet); }
.card-number { position: absolute; right: 30px; top: 20px; color: rgba(242,241,233,.11); font-family: var(--serif); font-size: 74px; line-height: 1; letter-spacing: -.06em; transition: color .4s ease, transform .4s ease; }
.business-card:hover .card-number { color: color-mix(in srgb, var(--card-accent) 28%, transparent); transform: translate3d(-6px,6px,0); }
.card-audience { color: var(--card-accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.business-card h3 { max-width: 520px; margin: 60px 0 22px; font-family: var(--serif); font-size: clamp(28px, 3.2vw, 48px); line-height: 1; font-weight: 400; letter-spacing: -.03em; }
.business-card > p:not(.card-audience) { max-width: 500px; color: var(--paper-dim); line-height: 1.55; }
.business-card strong { display: flex; align-items: center; gap: 20px; margin-top: 45px; color: var(--card-accent); font-size: 42px; font-weight: 400; letter-spacing: -.04em; }
.business-card strong::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--card-accent), transparent); transform: scaleX(.22); transform-origin: left; opacity: .55; transition: transform .55s ease, opacity .55s ease; }
.business-card:hover strong::after { transform: scaleX(1); opacity: .95; }
.business-card strong + span { color: var(--paper-dim); font-size: 12px; }

@keyframes business-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 92px 46px, 46px 92px; }
}
@keyframes business-orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes orbit-node-pulse {
  0%, 100% { opacity: .5; transform: scale(.76); }
  50% { opacity: 1; transform: scale(1.18); }
}

.closing-section {
  min-height: 860px;
  padding: 150px clamp(22px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-image:
    linear-gradient(90deg, rgba(6,21,20,.9) 0%, rgba(6,21,20,.68) 48%, rgba(6,21,20,.2) 100%),
    linear-gradient(180deg, rgba(6,21,20,.14) 0%, rgba(6,21,20,.18) 52%, rgba(6,21,20,.7) 100%),
    url("assets/finland-tourism.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.closing-section h2 { max-width: 1200px; text-shadow: 0 5px 34px rgba(0,0,0,.55); }
.closing-section p:not(.kicker) { max-width: 680px; margin: 45px 0; color: var(--paper-dim); font-size: 20px; line-height: 1.55; }
.source-link { display: inline-flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--ice); color: var(--ice-bright); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .1em; }

.site-footer { display: grid; grid-template-columns: .65fr 1.5fr .4fr; gap: 40px; align-items: start; padding: 45px clamp(22px, 6vw, 96px); border-top: 1px solid var(--line); color: var(--paper-dim); font-size: 11px; line-height: 1.55; }
.site-footer div { display: flex; flex-direction: column; gap: 5px; color: var(--paper); font-weight: 700; letter-spacing: .1em; }
.site-footer p { margin: 0; }
.site-footer a { justify-self: end; text-decoration: none; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.business-card.reveal { transition: opacity .75s ease, transform .45s cubic-bezier(.2,.8,.2,1), background .45s ease, box-shadow .45s ease, border-color .45s ease; }
.business-card.reveal.is-visible:hover { transform: translateY(-8px); }

@media (max-width: 920px) {
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { display: none; }
  .data-stamp { grid-column: 2; }
  .hero { min-height: 1060px; }
  .section-heading, .timeline-intro, .winter-section, .business-heading { grid-template-columns: 1fr; }
  .map-stage { min-height: 500px; }
  #flow-map { min-height: 470px; }
  .timeline-intro p, .business-heading p { max-width: 650px; }
  .winter-copy { max-width: 680px; }
  .rank-map-stage { grid-template-columns: minmax(300px, .9fr) minmax(390px, 1.1fr); }
  .origin-ranking-panel { padding-right: 24px; }
  .site-footer { grid-template-columns: 1fr 1.5fr; }
  .site-footer a { grid-column: 2; justify-self: start; }
}

@media (max-width: 650px) {
  .site-header { padding: 20px; }
  .hero {
    min-height: 980px;
    padding: 130px 22px 70px;
  }
  .hero-backdrop { background-position: 72% center; }
  .hero::before {
    background:
      radial-gradient(circle at 74% 24%, rgba(89,224,216,.08), transparent 32%),
      linear-gradient(180deg, rgba(6,21,20,.5) 0%, rgba(6,21,20,.58) 52%, rgba(6,21,20,.92) 100%);
  }
  .hero-copy { padding: 42px 0 56px; }
  .hero::after { background-size: 44px 44px; }
  .hero-lead { font-size: 17px; }
  .hero-metrics { grid-template-columns: 1fr; margin-top: 55px; }
  .hero-metrics article, .hero-metrics article + article { border-right: 0; border-bottom: 1px solid var(--line); padding: 13px 0; display: grid; grid-template-columns: 125px 1fr; align-items: baseline; }
  .hero-metrics strong { font-size: 30px; }
  .scroll-cue { display: none; }
  .timeline-section, .winter-section, .business-section, .closing-section { padding-top: 100px; padding-bottom: 100px; }
  .business-orbit { width: 430px; right: -280px; top: 90px; opacity: .7; }
  .business-heading { margin-bottom: 58px; }
  .card-number { font-size: 60px; }
  .section-heading { padding-bottom: 35px; }
  .map-controls { align-items: flex-start; }
  .control-group { flex-wrap: wrap; }
  .season-control { order: 3; width: 100%; }
  .origin-control { margin-left: auto; }
  .season-control .control-label { width: 100%; }
  .filter-button { flex: 1 1 60px; padding: 0 9px; }
  .play-button { width: 100%; justify-content: center; }
  .map-stage { min-height: 640px; }
  #flow-map { min-height: 600px; }
  .map-summary { left: 18px; right: auto; bottom: 64px; text-align: left; }
  .map-legend { left: 18px; bottom: 22px; }
  .rank-map-section { padding-top: 90px; }
  .rank-map-stage { grid-template-columns: 1fr; }
  .origin-ranking-panel { padding: 22px 0 45px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ranking-header { padding-left: 42px; }
  .origin-rank-button { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .origin-rank-button::after { left: 42px; }
  .ranking-map-panel { min-height: 690px; }
  #ranking-map { height: 560px; }
  .rank-map-summary { left: 18px; right: auto; bottom: 64px; text-align: left; }
  .rank-map-legend { left: 18px; bottom: 22px; }
  .timeline-key { justify-content: flex-start; flex-wrap: wrap; margin-top: 48px; }
  .timeline-facts, .business-grid { grid-template-columns: 1fr; }
  .timeline-facts article + article { padding-left: 0; }
  .timeline-facts { background: transparent; }
  .timeline-facts article { border-top: 1px solid var(--line-light); }
  .business-card { min-height: 420px; }
  .winter-stat { flex-direction: column; }
  .business-grid { border-left: 0; }
  .business-card { border-left: 1px solid var(--line); }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer a { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-backdrop { transform: scale(1.05); }
  .hero.hero-ready h1 em { color: var(--ice); background: none; }
  .reveal { opacity: 1; transform: none; }
}