/* ============================================================
   Partners4U — "Precision Atlas"
   Brand: navy #284272 · teal #6BAEB4 · green #96B957
   ============================================================ */

:root {
  --ink:        #070E1A;
  --ink-2:      #0B1626;
  --ink-3:      #122238;
  --ivory:      #F6F4EF;
  --ivory-2:    #EEEBE3;
  --white:      #FFFFFF;

  --navy:       #284272;
  --navy-deep:  #1B2E52;
  --navy-lift:  #3A5C93;
  --teal:       #6BAEB4;
  --teal-soft:  #9BCBCF;
  --teal-deep:  #3E7F86;
  --green:      #96B957;

  --on-dark:      #EDEFF2;
  --on-dark-soft: #A9B7C9;
  --on-dark-faint:#7E92AC;
  --on-light:      #16233A;
  --on-light-soft: #4A5A72;
  --on-light-faint:#7A8798;

  --line-dark:  rgba(255,255,255,0.09);
  --line-light: rgba(12,22,38,0.10);

  --glass:      linear-gradient(158deg, rgba(255,255,255,0.062), rgba(255,255,255,0.016));
  --glass-line: rgba(255,255,255,0.11);
  --glass-lit:  rgba(155,203,207,0.34);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --r1: 8px;  --r2: 14px;  --r3: 22px;  --r4: 30px;

  --sh-1: 0 1px 2px rgba(9,16,28,0.05), 0 10px 30px rgba(9,16,28,0.055);
  --sh-2: 0 30px 70px rgba(9,16,28,0.13), 0 2px 6px rgba(9,16,28,0.05);
  --sh-d: 0 34px 90px rgba(0,0,0,0.46);

  --wrap: 1280px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--on-light);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.018em;
  margin: 0 0 0.55em;
  font-optical-sizing: auto;
}

h1 { font-size: clamp(2.7rem, 6vw, 5.3rem); }
h2 { font-size: clamp(2rem, 4vw, 3.35rem); }
h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; }

p { margin: 0 0 1.1em; }
a { color: inherit; }

::selection { background: var(--teal); color: var(--ink); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 3px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 44px; }
.measure { max-width: 62ch; }

section { padding: 132px 0; position: relative; }

/* Hairline seam between a light section and the dark one below it */
.edge-top::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107,174,180,0.34), transparent);
}

/* ============ SHARED BITS ============ */
.pill, .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--navy);
  padding: 8px 16px 8px 14px;
  border: 1px solid rgba(40,66,114,0.20);
  border-radius: 100px;
  background: rgba(40,66,114,0.045);
  margin-bottom: 30px;
  line-height: 1;
}
.pill::before, .eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.75; flex: none;
}
.dark .pill, .dark .eyebrow, .hero .pill {
  color: #C3E0E3;
  border-color: rgba(155,203,207,0.30);
  background: rgba(107,174,180,0.10);
}
.pill .live { display: none; }
.hero-brow::before { display: none; }
.hero-brow .live {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex: none;
  box-shadow: 0 0 0 0 rgba(150,185,87,0.55);
}
html.js-anim .live { animation: livePing 2.6s ease-out infinite; }
@keyframes livePing {
  0%   { box-shadow: 0 0 0 0 rgba(150,185,87,0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(150,185,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(150,185,87,0); }
}

.dark { background: var(--ink); color: var(--on-dark); }
.dark h1, .dark h2 { color: var(--white); }
.dark p { color: var(--on-dark-soft); }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.36rem);
  line-height: 1.55; color: var(--on-light-soft); font-weight: 350;
}
.dark .lede { color: var(--on-dark-soft); }

.say {
  font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.4; color: var(--white); font-style: italic;
  border-left: 2px solid var(--teal); padding-left: 24px; margin-top: 34px;
}

/* Word-by-word heading reveal */
.ttl .wd { display: inline-block; overflow: hidden; vertical-align: bottom; }
.ttl .wd > i { display: inline-block; font-style: inherit; }
html.js-anim .ttl.armed .wd > i { transform: translateY(105%); opacity: 0; }
html.js-anim .ttl.armed.in-view .wd > i {
  transform: none; opacity: 1;
  transition: transform 0.95s var(--ease), opacity 0.95s var(--ease);
  transition-delay: calc(var(--w) * 0.045s);
}

/* ============ SCROLL PROGRESS ============ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  pointer-events: none; background: transparent;
}
.scroll-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--navy-lift), var(--teal) 60%, var(--green));
  box-shadow: 0 0 14px rgba(107,174,180,0.6);
}

/* ============ HEADER ============ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.55s var(--ease), border-color 0.55s var(--ease);
  border-bottom: 1px solid transparent;
}
/* No backdrop-filter on the fixed header: it would be re-blurred against
   fresh content on every single scroll frame. A near-opaque bar reads the
   same and costs nothing. */
.site-header.scrolled {
  background: rgba(7, 14, 26, 0.94);
  border-bottom-color: var(--line-dark);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  height: 96px; transition: height 0.55s var(--ease);
}
.site-header.scrolled .nav-row { height: 74px; }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img {
  height: 32px; width: auto; display: block; opacity: 0.95;
  transition: opacity 0.35s, transform 0.55s var(--ease);
}
.brand:hover .logo-img { opacity: 1; transform: translateY(-1px); }
/* the wordmark is navy on transparent — lift it so it reads on the dark ground */
.site-header .logo-img, .site-footer .logo-img { filter: brightness(1.95) saturate(1.06); }
.site-header.scrolled .logo-img { height: 27px; }

.primary-nav ul { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.primary-nav a {
  display: block; position: relative;
  font-size: 0.84rem; font-weight: 450; letter-spacing: 0.005em;
  color: var(--on-dark-soft); text-decoration: none;
  padding: 9px 15px; border-radius: 100px;
  transition: color 0.3s;
}
.primary-nav a::before {
  content: ""; position: absolute; inset: 0; border-radius: 100px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.07);
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.primary-nav a span { position: relative; }
.primary-nav a:hover { color: var(--white); }
.primary-nav a:hover::before { opacity: 1; transform: none; }

.nav-cta {
  position: relative; overflow: hidden;
  font-size: 0.82rem; font-weight: 500; color: var(--white); text-decoration: none;
  padding: 12px 24px; border: 1px solid rgba(255,255,255,0.26); border-radius: 100px;
  white-space: nowrap; background: rgba(255,255,255,0.03);
  transition: background 0.4s var(--ease), border-color 0.4s, color 0.4s, transform 0.35s var(--ease);
}
.nav-cta span { position: relative; z-index: 2; }
.nav-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--white); transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.nav-cta:hover { color: var(--ink); border-color: var(--white); }
.nav-cta:hover::before { transform: none; }

.menu-toggle {
  display: none; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 100px; width: 46px; height: 46px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; padding: 0;
}
.mt-bar {
  display: block; width: 17px; height: 1.4px; background: var(--white); border-radius: 2px;
  transition: transform 0.45s var(--ease), opacity 0.3s;
}
.menu-toggle[aria-expanded="true"] .mt-bar:first-child { transform: translateY(3.2px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .mt-bar:last-child  { transform: translateY(-3.2px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  background: var(--ink); color: var(--on-dark);
  padding: 210px 0 120px; position: relative; overflow: hidden;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(1100px 720px at 74% 34%, rgba(40,66,114,0.62), transparent 70%),
    radial-gradient(760px 540px at 14% 92%, rgba(107,174,180,0.13), transparent 66%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(11,22,38,0.85));
}
.hero .wrap { position: relative; z-index: 3; }

.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* will-change lets the browser cache each blurred orb as a texture and simply
   move it, instead of re-running a 96px blur every frame. */
.orb { position: absolute; border-radius: 50%; filter: blur(96px); opacity: 0.52; will-change: transform; }
.orb-a { width: 820px; height: 820px; background: rgba(40,66,114,0.8);  top: -20%; right: -12%; }
.orb-b { width: 640px; height: 640px; background: rgba(107,174,180,0.22); bottom: -24%; left: -8%; }
.orb-c { width: 470px; height: 470px; background: rgba(150,185,87,0.11);  top: 44%; left: 44%; }
html.js-anim .orb-a { animation: drift1 26s ease-in-out infinite alternate; }
html.js-anim .orb-b { animation: drift2 32s ease-in-out infinite alternate; }
html.js-anim .orb-c { animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate3d(-90px, 70px, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(110px, -60px, 0) scale(1.08); } }
@keyframes drift3 { to { transform: translate3d(-70px, -90px, 0) scale(1.16); } }

.grid-veil {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(closest-side at 50% 42%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 42%, #000 30%, transparent 100%);
}
.beam {
  position: absolute; top: -30%; left: 30%; width: 46%; height: 160%;
  background: linear-gradient(100deg, transparent, rgba(155,203,207,0.055) 45%, transparent 70%);
  transform: rotate(14deg);
}
html.js-anim .beam { animation: beamSlide 17s ease-in-out infinite alternate; will-change: transform; }
@keyframes beamSlide { to { transform: rotate(14deg) translateX(26%); opacity: 0.55; } }

/* inset:0 and no blend mode — an oversized `mix-blend-mode` layer forces the
   whole hero (drifting orbs included) to be re-composited behind it. */
.noise {
  position: absolute; inset: 0; opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.hero-inner { position: relative; z-index: 3; }
.hero-title { color: var(--white); margin-bottom: 40px; max-width: 17ch; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-title .ln-i { display: block; }
.hero-title em {
  font-style: italic;
  background: linear-gradient(96deg, var(--teal-soft), var(--green) 88%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--teal-soft);
}
html.js-anim .hero-title .ln-i { transform: translateY(112%); animation: lineUp 1.2s var(--ease) forwards; }
html.js-anim .hero-title .ln:nth-child(1) .ln-i { animation-delay: 0.16s; }
html.js-anim .hero-title .ln:nth-child(2) .ln-i { animation-delay: 0.29s; }
html.js-anim .hero-title .ln:nth-child(3) .ln-i { animation-delay: 0.42s; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero-sub {
  font-size: 1.17rem; line-height: 1.62; color: var(--on-dark-soft);
  max-width: 52ch; margin-bottom: 46px; font-weight: 350;
}
.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
html.js-anim .hero-brow, html.js-anim .hero-sub,
html.js-anim .hero-actions, html.js-anim .hud {
  opacity: 0; animation: fadeUp 1.05s var(--ease) forwards;
}
html.js-anim .hero-brow    { animation-delay: 0.06s; }
html.js-anim .hero-sub     { animation-delay: 0.64s; }
html.js-anim .hero-actions { animation-delay: 0.78s; }
html.js-anim .hud          { animation-delay: 0.94s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.92rem; font-weight: 500; text-decoration: none;
  padding: 18px 34px; border-radius: 100px; position: relative; overflow: hidden;
  will-change: transform;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
              background 0.4s, color 0.4s, border-color 0.4s;
}
.btn > * { position: relative; z-index: 2; }
.btn::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 42%;
  left: -60%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  transition: left 0.75s var(--ease);
}
.btn:hover::after { left: 130%; }

.btn-solid {
  background: linear-gradient(140deg, var(--teal-soft), var(--teal) 62%, var(--teal-deep));
  color: #06131A; box-shadow: 0 8px 34px rgba(107,174,180,0.26);
}
.btn-solid:hover { transform: translateY(-3px); box-shadow: 0 20px 52px rgba(107,174,180,0.42); }
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.22); color: var(--white);
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); transform: translateY(-3px); border-color: rgba(255,255,255,0.4); }
.btn .arw { transition: transform 0.5s var(--ease); }
.btn:hover .arw { transform: translateX(6px); }

/* ============ HERO HUD PANEL ============ */
.hud {
  margin-top: 74px; max-width: 900px;
  border: 1px solid var(--glass-line); border-radius: var(--r3);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--sh-d), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden; position: relative;
}
.hud::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(155,203,207,0.14), transparent 70%);
  opacity: 0; transition: opacity 0.5s;
}
.hud:hover::before { opacity: 1; }
.hud-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 15px 24px; border-bottom: 1px solid var(--line-dark);
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.hud-t { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark); }
.hud-t .live { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.hud-c { color: var(--on-dark-faint); }
.hud-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.hud-cell {
  padding: 26px 24px 24px; border-right: 1px solid var(--line-dark);
  position: relative; transition: background 0.45s var(--ease);
}
.hud-cell:last-child { border-right: none; }
.hud-cell:hover { background: rgba(255,255,255,0.03); }
.hud-k {
  display: block; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: 12px;
}
.hud-v {
  display: block; font-family: var(--serif); font-size: 2.05rem; line-height: 1;
  color: var(--white); letter-spacing: -0.02em; margin-bottom: 16px; font-variant-numeric: tabular-nums;
}
.bars { display: flex; align-items: flex-end; gap: 4px; height: 22px; }
.bars i {
  flex: 1; border-radius: 2px; background: linear-gradient(var(--teal), rgba(107,174,180,0.25));
  height: calc(var(--h) * 100%); transform-origin: bottom; opacity: 0.75;
}
html.js-anim .bars i { animation: barGrow 1.1s var(--ease) backwards; }
.bars i:nth-child(1) { animation-delay: 1.0s; }
.bars i:nth-child(2) { animation-delay: 1.06s; }
.bars i:nth-child(3) { animation-delay: 1.12s; }
.bars i:nth-child(4) { animation-delay: 1.18s; }
.bars i:nth-child(5) { animation-delay: 1.24s; }
.bars i:nth-child(6) { animation-delay: 1.30s; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.scroll-cue {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 4; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.cue-line { width: 1px; height: 54px; background: linear-gradient(var(--teal), transparent); position: relative; overflow: hidden; }
html.js-anim .cue-line::after {
  content: ""; position: absolute; top: -54px; left: 0; width: 1px; height: 54px;
  background: linear-gradient(transparent, var(--white));
  animation: cueRun 2.4s ease-in-out infinite;
}
@keyframes cueRun { 0% { transform: translateY(0); } 60%,100% { transform: translateY(108px); } }
.cue-txt { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.3em; color: var(--on-dark-faint); }

/* ============ CAPABILITY STRIP ============ */
.strip {
  background: var(--ink-2);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 30px 0; overflow: hidden; position: relative;
}
/* Edge fades are painted over the strip. A mask on .strip itself would punch
   through its own background and show the page behind it. */
.strip::before, .strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 13%; z-index: 2; pointer-events: none;
}
.strip::before { left: 0;  background: linear-gradient(90deg, var(--ink-2), rgba(11,22,38,0)); }
.strip::after  { right: 0; background: linear-gradient(270deg, var(--ink-2), rgba(11,22,38,0)); }
.strip-inner {
  display: flex; align-items: center;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--on-dark-faint); white-space: nowrap; width: max-content;
}
html.js-anim .strip-inner { animation: slide 52s linear infinite; will-change: transform; }
.strip:hover .strip-inner { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.strip-inner span { display: inline-flex; align-items: center; gap: 54px; padding-right: 54px; }
.strip-inner span::after { content: "◆"; color: var(--teal); font-size: 0.54rem; opacity: 0.55; }

/* ============================================================
   THE ATLAS — scroll-driven map
   ============================================================ */
.atlas { padding: 0; overflow: visible; background: var(--ink); }
.atlas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 900px at 68% 45%, rgba(40,66,114,0.35), transparent 70%);
}
.atlas-rail { position: relative; z-index: 1; }
.atlas-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 64px; align-items: stretch; }
.atlas-steps { padding: 10vh 0 16vh; position: relative; padding-left: 52px; }
.atlas-step {
  min-height: 66vh; display: flex; flex-direction: column; justify-content: center;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease);
}
.step-n {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 22px; display: inline-flex; align-items: center; gap: 10px;
}
.atlas-step h2 { font-size: clamp(2.1rem, 3.7vw, 3.4rem); color: var(--white); margin-bottom: 22px; }
.atlas-step p { font-size: 1.06rem; line-height: 1.62; color: var(--on-dark-soft); max-width: 46ch; margin: 0; }

.atlas-progress {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px; z-index: 3;
}
.pg { width: 2px; height: 38px; background: rgba(255,255,255,0.13); position: relative; overflow: hidden; border-radius: 2px; }
.pg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--teal-soft), var(--teal));
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.75s var(--ease);
}
.pg.done::after { transform: scaleY(1); }

.atlas-visual { position: relative; height: 100%; }
.atlas-sticky {
  position: sticky; top: 74px; height: calc(100vh - 74px);
  display: flex; align-items: center; justify-content: center;
  padding: 14px 0;
}

/* ---- Desktop: text and map pinned together, advancing in lockstep ----
   Without this, the map sticks while the text scrolls continuously past it —
   the two are on independent clocks, so which text paragraph is on screen
   and which map stage is showing can drift apart. Instead: pin the whole
   grid (both columns) for one viewport-height of scroll per stage, and drive
   both the active text block and the map's stage class from the SAME
   scroll-progress number, so they can never disagree. Only one text block is
   visible at a time; scrolling into the next stage's band swaps it instantly
   rather than scrolling it into place — this is deliberate, not a bug. */
@media (min-width: 1081px) {
  /* 60vh of track per stage: the pin needs one viewport of that for itself,
     so five stages share (5 x 60 - 100) = 200vh of actual scrolling, i.e.
     40vh per stage. */
  html.js-anim .atlas-rail { height: calc(5 * 60vh); }
  html.js-anim .atlas-grid {
    position: sticky; top: 0; height: 100vh;
    padding-top: 74px; padding-bottom: 28px; box-sizing: border-box;
  }
  /* Every link in the chain needs a definite height, or the map falls back to
     its own aspect-ratio height (taller than the viewport) and spills out of
     the pinned area. min-height:0 stops the grid items from refusing to
     shrink below their content. */
  html.js-anim .atlas-steps,
  html.js-anim .atlas-visual { height: 100%; min-height: 0; }
  html.js-anim .atlas-sticky { position: static; height: 100%; min-height: 0; padding: 0; }
  html.js-anim .atlas-step {
    /* left offset repeats .atlas-steps' padding-left on purpose: an absolutely
       positioned child resolves inset against the padding box, so inset:0
       would sit on top of the progress rail instead of beside it. */
    position: absolute; inset: 0 0 0 52px;
    opacity: 0; pointer-events: none;
    /* --shift is written per scroll frame, so no transition on transform:
       it should track the scroll, not lag behind it. */
    transform: translateY(var(--shift, 0px));
    transition: opacity 0.4s var(--ease);
  }
  html.js-anim .atlas-step.active { opacity: 1; pointer-events: auto; }

  /* The rail fills continuously with the scroll rather than snapping a
     segment at a time, so it reads as the same motion as the text. */
  .atlas-progress.continuous .pg::after {
    transform: scaleY(var(--fill, 0));
    transition: transform 0.12s linear;
  }
}

.map-frame {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.corner {
  position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 1px solid rgba(155,203,207,0.34);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
html.js-anim .corner { opacity: 0; }
.corner.tl { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.corner.tr { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.corner.bl { bottom: 0; left: 0;  border-right: 0; border-top: 0;    }
.corner.br { bottom: 0; right: 0; border-left: 0;  border-top: 0;    }
html.js-anim .corner.tl { transform: translate(8px, 8px); }
html.js-anim .corner.tr { transform: translate(-8px, 8px); }
html.js-anim .corner.bl { transform: translate(8px, -8px); }
html.js-anim .corner.br { transform: translate(-8px, -8px); }
html.js-anim .map-frame.lit .corner { opacity: 1; transform: none; }

.map-stage {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
/* The atmospheric glow behind the map is a plain gradient, NOT a CSS filter on
   the SVG. A drop-shadow here would force the browser to re-rasterise all ~1700
   dots and re-blur them on every frame the radar sweep moves. */
.map-stage::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 53%; width: 90%; height: 76%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(40,66,114,0.55), rgba(40,66,114,0.16) 55%, transparent 78%);
}
.euromap {
  position: relative; z-index: 1;
  /* clip at the viewBox: the radar sweep and outer rings deliberately
     overrun it so they can cover the corners */
  width: 100%; height: 100%; display: block; overflow: hidden;
}

/* --- map layers --- */
.euromap .graticule path { fill: none; stroke: rgba(255,255,255,0.035); stroke-width: 1; }
.euromap .dt  { fill: #2B4372; transition: fill 1s var(--ease), opacity 0.85s var(--ease); }
.euromap .dx  { fill: #16233B; }
.euromap .de  { fill: #2B4372; }

.euromap .ring {
  fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0.17;
  stroke-dasharray: 2 8; transform-origin: 320px 467.9px;
  transition: opacity 1s var(--ease), transform 1.3s var(--ease);
  transition-delay: calc(var(--i) * 0.13s);
}
html.js-anim .euromap .ring { opacity: 0; transform: scale(0.25); }
html.js-anim .euromap.s2 .rings,
html.js-anim .euromap.s3 .rings,
html.js-anim .euromap.s4 .rings { animation: spin 110s linear infinite; transform-origin: 320px 467.9px; }
@keyframes spin { to { transform: rotate(360deg); } }

.euromap .sweep { transition: opacity 1.4s var(--ease); }
html.js-anim .euromap .sweep { opacity: 0; }
.euromap .sweep-rot { transform-origin: 320px 467.9px; will-change: transform; }
html.js-anim .euromap .sweep-rot { animation: spin 18s linear infinite; }
.euromap .sw { fill: url(#p4uSweep); }
.euromap .sw1 { opacity: 0.55; }
.euromap .sw2 { opacity: 0.30; }
.euromap .sw3 { opacity: 0.16; }
.euromap .sw-edge { stroke: var(--teal-soft); stroke-width: 1; opacity: 0.35; }

.euromap .arc {
  fill: none; stroke: var(--teal); stroke-width: 1.2;
  stroke-linecap: round; opacity: 0.72;
  stroke-dasharray: 900; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s var(--ease), opacity 0.9s var(--ease);
  transition-delay: calc(var(--i) * 0.1s);
}
.euromap .arc.a1 { stroke: var(--teal-soft); stroke-width: 1.3; opacity: 0.8; }
.euromap .arc.a2 { stroke: var(--navy-lift); stroke-width: 0.9; opacity: 0.5; }
html.js-anim .euromap .arc { stroke-dashoffset: 900; }

/* The travelling pulses fake their glow with a wide translucent disc rather
   than an SVG filter — feGaussianBlur would be re-evaluated every frame. */
.euromap .pulse { transition: opacity 0.8s ease; }
.euromap .pulse .pw { fill: var(--teal-soft); opacity: 0.16; }
.euromap .pulse .pc { fill: #EAF7F8; }
html.js-anim .euromap .pulse { opacity: 0; }

.euromap .nd { transition: opacity 0.8s var(--ease); transition-delay: calc(var(--i) * 0.085s); }
html.js-anim .euromap .nd { opacity: 0; }
.euromap .nd-dot  { fill: var(--white); }
.euromap .nd-dot2 { fill: var(--teal-soft); opacity: 0.72; }
.euromap .nd-ring { fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0.55; }
.euromap .nd-pulse { fill: none; stroke: var(--teal-soft); stroke-width: 1; opacity: 0; transform-origin: center; }
html.js-anim .euromap.s4 .nd-pulse { animation: ndPing 3.2s ease-out infinite; animation-delay: calc(var(--i) * 0.22s); }
@keyframes ndPing {
  0%   { opacity: 0.6; transform: scale(0.6); }
  70%  { opacity: 0;   transform: scale(2.6); }
  100% { opacity: 0;   transform: scale(2.6); }
}
.euromap .nd text {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.15em; fill: var(--on-dark-soft);
}

.euromap .hub { transition: opacity 1s var(--ease); }
html.js-anim .euromap .hub { opacity: 0; }
.euromap .hub-halo { fill: var(--teal); opacity: 0.1; transform-origin: 320px 467.9px; }
html.js-anim .euromap.s1 .hub-halo, html.js-anim .euromap.s2 .hub-halo,
html.js-anim .euromap.s3 .hub-halo, html.js-anim .euromap.s4 .hub-halo {
  animation: halo 4s ease-in-out infinite;
}
@keyframes halo { 0%,100% { opacity: 0.1; transform: scale(1); } 50% { opacity: 0.24; transform: scale(1.2); } }
.euromap .hub-tick { transform-origin: 320px 467.9px; }
html.js-anim .euromap .hub-tick { animation: spinR 26s linear infinite; }
@keyframes spinR { to { transform: rotate(-360deg); } }
.euromap .hub-tickring {
  fill: none; stroke: var(--teal-soft); stroke-width: 1;
  stroke-dasharray: 1.5 7; opacity: 0.6;
}
.euromap .hub-ring { fill: none; stroke: var(--teal); stroke-width: 1.3; opacity: 0.7; }
.euromap .hub-core { fill: var(--teal-soft); }
.euromap .hub-cross line { stroke: var(--teal); stroke-width: 1; opacity: 0.5; }
.euromap .hub-label {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.24em; fill: var(--white); text-anchor: middle;
}
.euromap .hub-sub {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.26em;
  fill: var(--teal); text-anchor: middle; opacity: 0.85;
}

/* --- map HUD readout --- */
.map-hud {
  position: absolute; left: 0; top: 34px; width: 244px;
  border: 1px solid var(--glass-line); border-radius: var(--r2);
  background: linear-gradient(158deg, rgba(19,32,52,0.94), rgba(11,22,38,0.94));
  /* solid, not a backdrop-filter: this panel sits over the animating map */
  padding: 16px 18px 14px;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
html.js-anim .map-hud { opacity: 0; transform: translateY(12px); }
html.js-anim .map-hud.on { opacity: 1; transform: none; }
.mh-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 5px 0;
}
.mh-k { color: var(--on-dark-faint); }
.mh-v { color: var(--on-dark); }
.mh-v b { color: var(--teal); font-weight: 500; font-size: 0.86rem; }
.mh-bar { height: 2px; background: rgba(255,255,255,0.11); border-radius: 2px; margin-top: 11px; overflow: hidden; }
.mh-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--navy-lift), var(--teal));
  transition: width 0.9s var(--ease);
}

/* --- staged reveal: opt-in once JS confirms it can drive the stages --- */
html.js-anim .euromap .dt { opacity: 0; }
html.js-anim .euromap.s0 .dt, html.js-anim .euromap.s1 .dt,
html.js-anim .euromap.s2 .dt, html.js-anim .euromap.s3 .dt,
html.js-anim .euromap.s4 .dt { opacity: 1; }

html.js-anim .euromap.s1 .de, html.js-anim .euromap.s2 .de,
html.js-anim .euromap.s3 .de, html.js-anim .euromap.s4 .de { fill: var(--teal); }

html.js-anim .euromap.s1 .hub, html.js-anim .euromap.s2 .hub,
html.js-anim .euromap.s3 .hub, html.js-anim .euromap.s4 .hub { opacity: 1; }

html.js-anim .euromap.s2 .ring, html.js-anim .euromap.s3 .ring,
html.js-anim .euromap.s4 .ring { opacity: 0.17; transform: scale(1); }

html.js-anim .euromap.s2 .sweep, html.js-anim .euromap.s3 .sweep,
html.js-anim .euromap.s4 .sweep { opacity: 1; }

html.js-anim .euromap.s3 .arc, html.js-anim .euromap.s4 .arc { stroke-dashoffset: 0; }
html.js-anim .euromap.s3 .pulse, html.js-anim .euromap.s4 .pulse { opacity: 1; }
html.js-anim .euromap.s4 .nd { opacity: 1; }

/* map breathes with each stage */
html.js-anim .euromap {
  transition: transform 1.6s var(--ease), filter 1.6s var(--ease);
  transform-origin: 320px 467.9px;
}
html.js-anim .euromap.s0 { transform: scale(0.93); }
html.js-anim .euromap.s1 { transform: scale(1.06); }
html.js-anim .euromap.s2 { transform: scale(1.02); }
html.js-anim .euromap.s3 { transform: scale(0.99); }
html.js-anim .euromap.s4 { transform: scale(0.96); }

/* ============ STATS ============ */
/* Two across, not four: these cards live in the narrow right-hand column of a
   split, which tops out around 650px — four columns leave ~100px of usable
   width per card and "€4.47T" alone needs more than that. */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 76px;
}
.stat {
  position: relative; overflow: hidden;
  padding: 30px 26px 28px; border-radius: var(--r2);
  border: 1px solid var(--line-light); background: rgba(255,255,255,0.62);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.4s;
}
.stat:hover { transform: translateY(-5px); box-shadow: var(--sh-1); border-color: rgba(40,66,114,0.24); }
.dark .stat { background: var(--glass); border-color: var(--glass-line); }
.stat-num {
  font-family: var(--serif); font-size: clamp(2rem, 2.7vw, 2.9rem);
  line-height: 1; color: var(--navy); display: block; margin-bottom: 14px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em;
  /* figures must never break mid-number */
  white-space: nowrap;
}
.dark .stat-num { color: var(--teal); }
.stat-label { font-size: 0.86rem; color: var(--on-light-soft); line-height: 1.45; }
.dark .stat-label { color: var(--on-dark-soft); }
.footnote { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--on-light-faint); margin-top: 26px; }
.dark .footnote { color: var(--on-dark-faint); }

/* ============ SPLIT ============ */
.split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 90px; align-items: start; }
.split-sticky { position: sticky; top: 130px; }

/* ============ ROUTES TABLE ============ */
.table-card {
  margin-top: 62px; border: 1px solid var(--line-light); border-radius: var(--r3);
  background: var(--white); box-shadow: var(--sh-1); overflow: hidden;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.routes { border-collapse: collapse; width: 100%; min-width: 900px; }
table.routes th, table.routes td { padding: 24px 24px; text-align: left; vertical-align: top; }
table.routes thead th {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 400; color: var(--on-light-faint);
  border-bottom: 1px solid var(--line-light); padding: 26px 24px 16px;
}
table.routes thead th.us { padding-top: 20px; }
.us-tag {
  display: inline-block; font-weight: 500; color: var(--white);
  background: linear-gradient(140deg, var(--navy-lift), var(--navy)); padding: 7px 14px;
  border-radius: 100px; letter-spacing: 0.14em;
  box-shadow: 0 6px 18px rgba(40,66,114,0.28);
}
table.routes tbody th {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
  color: var(--on-light); width: 210px; border-bottom: 1px solid var(--line-light);
}
table.routes tbody td {
  font-size: 0.9rem; color: var(--on-light-soft);
  border-bottom: 1px solid var(--line-light); transition: background 0.3s;
}
table.routes tbody tr:last-child th, table.routes tbody tr:last-child td { border-bottom: none; }
table.routes td.us {
  background: linear-gradient(180deg, rgba(40,66,114,0.055), rgba(107,174,180,0.05));
  color: var(--on-light); font-weight: 450; box-shadow: inset 2px 0 0 var(--navy);
}
table.routes tbody tr:hover td:not(.us) { background: rgba(12,22,38,0.022); }
table.routes tbody tr:hover td.us { background: linear-gradient(180deg, rgba(40,66,114,0.1), rgba(107,174,180,0.09)); }

/* ============ COST ============ */
.cost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 66px; }
.cost-cell {
  position: relative; overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r3);
  padding: 38px 34px 36px;
  transition: transform 0.55s var(--ease), border-color 0.45s, background 0.45s;
}
.cost-cell:hover { transform: translateY(-5px); border-color: var(--glass-lit); }
.cost-k {
  display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: 20px;
}
.cost-num {
  font-family: var(--serif); font-size: clamp(2.1rem, 3.1vw, 2.9rem);
  color: var(--teal); display: block; margin-bottom: 18px; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em;
}
.cost-cell p { font-size: 0.88rem; color: var(--on-dark-soft); margin: 0; line-height: 1.6; }

.pull {
  margin-top: 66px; padding-top: 42px; border-top: 1px solid var(--line-dark);
  font-family: var(--serif); font-size: clamp(1.4rem, 2.3vw, 2rem);
  line-height: 1.35; color: var(--white); max-width: 32ch;
}
.pull em { font-style: italic; color: var(--teal-soft); }

/* ============ SERVICES ============ */
.svc-list { list-style: none; margin: 62px 0 0; padding: 0; }
.svc {
  position: relative;
  display: grid; grid-template-columns: 56px 1fr 1.25fr 30px; gap: 30px; align-items: baseline;
  padding: 30px 20px; border-top: 1px solid var(--line-light);
  border-radius: var(--r2);
  transition: background 0.5s var(--ease), transform 0.5s var(--ease);
}
.svc:last-child { border-bottom: 1px solid var(--line-light); }
.svc::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--navy), var(--teal));
  transition: width 0.7s var(--ease);
}
.svc:hover { background: rgba(255,255,255,0.7); transform: translateX(8px); }
.svc:hover::before { width: 100%; }
.svc-idx { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--on-light-faint); }
.svc-name { font-family: var(--serif); font-size: 1.42rem; line-height: 1.2; color: var(--on-light); }
.svc-desc { font-size: 0.91rem; color: var(--on-light-soft); margin: 0; }
.svc-arw {
  justify-self: end; color: var(--navy); opacity: 0; transform: translateX(-8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.svc:hover .svc-arw { opacity: 1; transform: none; }

/* ============ TEAM ============ */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 66px; }
/* odd headcount: the last card spans the row instead of sitting alone in one half */
.team-grid .person:last-child:nth-child(odd) { grid-column: 1 / -1; }
.person {
  position: relative; overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r3);
  padding: 36px 34px 34px;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease), border-color 0.45s, box-shadow 0.6s var(--ease);
}
.person:hover { border-color: var(--glass-lit); box-shadow: var(--sh-d); }
.person-top { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
/* The monogram sits underneath the photo and shows through if the image is
   missing or still loading — no broken-image box, no empty hole. */
.mono-badge {
  position: relative; overflow: hidden;
  flex: none; width: 78px; height: 78px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.06em;
  color: #BEDDE0;
  background: linear-gradient(150deg, rgba(107,174,180,0.16), rgba(40,66,114,0.28));
  border: 1px solid rgba(155,203,207,0.24);
  transition: transform 0.6s var(--ease), border-color 0.4s, box-shadow 0.5s var(--ease);
}
.mono-badge > i { font-style: normal; }
/* The four portraits were shot in different places — grey studio, blue studio,
   woodland, white wall. A shared graded treatment makes them read as one set;
   hover returns the original colour. */
.mono-badge img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; display: block;
  filter: grayscale(100%) contrast(1.04) brightness(1.14);
  transition: filter 0.65s var(--ease), transform 0.9s var(--ease);
}
.mono-badge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(155deg, rgba(107,174,180,0.30), rgba(40,66,114,0.55));
  mix-blend-mode: color; opacity: 0.72;
  transition: opacity 0.65s var(--ease);
  pointer-events: none;
}
.person:hover .mono-badge {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}
.person:hover .mono-badge img { filter: none; transform: scale(1.05); }
.person:hover .mono-badge::after { opacity: 0; }
.person-name { font-family: var(--serif); font-size: 1.5rem; color: var(--white); line-height: 1.15; margin-bottom: 7px; }
.person-role {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--teal); line-height: 1.5; display: block;
}
.person p { font-size: 0.91rem; color: var(--on-dark-soft); margin: 0; }

.creds { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cred-block {
  position: relative; overflow: hidden;
  padding: 34px 34px 30px; border-radius: var(--r3);
  border: 1px solid var(--line-dark); background: rgba(255,255,255,0.02);
  transition: border-color 0.45s, background 0.45s;
}
.cred-block:hover { border-color: var(--glass-lit); background: rgba(255,255,255,0.035); }
.cred-block h3 {
  font-family: var(--mono); font-weight: 400; font-size: 0.68rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px;
}
.cred-block p { font-size: 0.93rem; color: var(--on-dark-soft); margin: 0; }

/* ============ MODELS ============ */
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 66px; }
.model {
  position: relative; overflow: hidden;
  padding: 38px 32px 40px; background: var(--white);
  border: 1px solid var(--line-light); border-radius: var(--r3);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.4s;
}
.model::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--teal));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.model:hover { transform: translateY(-7px); box-shadow: var(--sh-2); border-color: rgba(40,66,114,0.2); }
.model:hover::after { transform: scaleX(1); }
.model.featured { border-color: rgba(40,66,114,0.26); box-shadow: var(--sh-1); }
.model.featured::after { transform: scaleX(1); }
.model-idx { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; color: var(--on-light-faint); display: block; margin-bottom: 24px; }
.model h3 { font-family: var(--serif); font-size: 1.58rem; font-weight: 400; margin-bottom: 14px; }
.model p { font-size: 0.91rem; color: var(--on-light-soft); margin: 0 0 22px; }
.ticks { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line-light); }
.ticks li {
  position: relative; padding-left: 26px; font-size: 0.86rem;
  color: var(--on-light-soft); margin-bottom: 10px;
}
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 12px; height: 7px; border-left: 1.6px solid var(--teal-deep); border-bottom: 1.6px solid var(--teal-deep);
  transform: rotate(-45deg);
}

/* ============ PHASES ============ */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 70px; }
.phase {
  position: relative; overflow: hidden;
  padding: 34px 30px 32px; border-radius: var(--r3);
  border: 1px solid var(--line-dark); background: rgba(255,255,255,0.018);
  transition: border-color 0.45s, background 0.45s, transform 0.55s var(--ease);
}
.phase:hover { border-color: var(--glass-lit); background: rgba(255,255,255,0.035); transform: translateY(-4px); }
.phase::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--teal), transparent);
  transition: width 1.2s var(--ease);
}
.phase.in-view::before { width: 100%; }
.phase-n {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--teal); display: block; margin-bottom: 20px;
}
.phase h3 { font-family: var(--serif); font-size: 1.38rem; font-weight: 400; color: var(--white); margin-bottom: 12px; }
.phase p { font-size: 0.89rem; color: var(--on-dark-soft); margin: 0; }

/* ============ CONTACT ============ */
.contact { background: var(--ivory-2); padding: 140px 0; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: start; }
.contact h2 { max-width: 16ch; }
.btn-dark { background: linear-gradient(140deg, var(--navy-lift), var(--navy) 70%); color: var(--white); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(40,66,114,0.3); }
.cdl { border-top: 1px solid var(--line-light); padding-top: 26px; margin-top: 6px; }
.cdl dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-light-faint); margin-bottom: 6px; }
.cdl dd { margin: 0 0 24px; font-size: 0.98rem; }
.cdl dd:last-child { margin-bottom: 0; }
.cdl dd a { color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(40,66,114,0.3); transition: border-color 0.3s; }
.cdl dd a:hover { border-bottom-color: var(--navy); }

/* ============ CONTACT FORM ============ */
.form-card {
  background: var(--white); border: 1px solid var(--line-light);
  border-radius: var(--r3); padding: 38px 36px; box-shadow: var(--sh-1);
}
.f-row { margin-bottom: 20px; }
.f-row label {
  display: block; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-light-faint); margin-bottom: 9px;
}
.f-row input, .f-row textarea {
  width: 100%; font-family: var(--sans); font-size: 0.97rem; color: var(--on-light);
  background: var(--ivory); border: 1px solid var(--line-light); border-radius: var(--r1);
  padding: 14px 16px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.f-row textarea { resize: vertical; min-height: 116px; line-height: 1.55; }
.f-row input::placeholder, .f-row textarea::placeholder { color: var(--on-light-faint); }
.f-row input:focus, .f-row textarea:focus {
  outline: none; background: var(--white); border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(40,66,114,0.12);
}
.f-row input.invalid, .f-row textarea.invalid { border-color: #B4402A; background: rgba(180,64,42,0.04); }

.f-consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.83rem; color: var(--on-light-soft); line-height: 1.5;
  margin: 4px 0 26px; cursor: pointer;
}
.f-consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--navy); flex-shrink: 0; cursor: pointer; }
.f-consent a { color: var(--navy); }
.f-consent.invalid span { color: #B4402A; }

.f-submit { width: 100%; justify-content: center; border: none; cursor: pointer; font-family: var(--sans); }
.f-submit[disabled] { opacity: 0.6; cursor: default; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.f-status {
  font-size: 0.87rem; margin: 16px 0 0; padding: 0;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s var(--ease), opacity 0.4s var(--ease);
}
.f-status.show { max-height: 220px; opacity: 1; }
.f-status.ok { color: #2F6B4F; }
.f-status.err { color: #B4402A; }

/* ============ FOOTER ============ */
.site-footer { background: var(--ink); padding: 70px 0 46px; position: relative; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107,174,180,0.3), transparent);
}
.foot-top {
  display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
  padding-bottom: 34px; margin-bottom: 26px; border-bottom: 1px solid var(--line-dark);
}
.foot-top .logo-img { height: 30px; opacity: 0.8; }
.foot-line { margin: 0; font-size: 0.92rem; color: var(--on-dark-soft); max-width: 44ch; }
.foot-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.foot-links { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.foot-links a { color: var(--on-dark-faint); font-size: 0.83rem; text-decoration: none; transition: color 0.3s; }
.foot-links a:hover { color: var(--teal); }
.foot-copy { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--on-dark-faint); }

/* ============ OFF-SCREEN ANIMATION PARKING ============
   Looping decoration (drifting orbs, the marquee, the radar sweep and the
   spinning hub) keeps repainting even when it is scrolled far out of view.
   JS marks each scope .off-screen and everything inside it stops. */
.off-screen, .off-screen *, .off-screen *::before, .off-screen *::after {
  animation-play-state: paused !important;
}

/* ============ SPOTLIGHT (cursor-follow sheen) ============ */
[data-spot] { position: relative; }
[data-spot]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(320px 220px at var(--mx, 50%) var(--my, 50%), rgba(155,203,207,0.13), transparent 68%);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.dark [data-spot]::after, .atlas [data-spot]::after { }
[data-spot]:hover::after { opacity: 1; }
.stat[data-spot]::after, .model[data-spot]::after {
  background: radial-gradient(320px 220px at var(--mx, 50%) var(--my, 50%), rgba(40,66,114,0.09), transparent 68%);
}

/* ============ REVEAL ============ */
.reveal { opacity: 1; transform: none; }
.reveal.armed { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.armed.in-view { opacity: 1; transform: none; }
.reveal.armed.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.reveal.armed.in-view.stagger > * { opacity: 1; transform: none; }
.reveal.armed.in-view.stagger > *:nth-child(1) { transition-delay: 0.06s; }
.reveal.armed.in-view.stagger > *:nth-child(2) { transition-delay: 0.15s; }
.reveal.armed.in-view.stagger > *:nth-child(3) { transition-delay: 0.24s; }
.reveal.armed.in-view.stagger > *:nth-child(4) { transition-delay: 0.33s; }
.reveal.armed.in-view.stagger > *:nth-child(5) { transition-delay: 0.42s; }
.reveal.armed.in-view.stagger > *:nth-child(6) { transition-delay: 0.51s; }
.reveal.armed.in-view.stagger > *:nth-child(7) { transition-delay: 0.60s; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px) {
  .hud-grid { grid-template-columns: repeat(2, 1fr); }
  .hud-cell:nth-child(2n) { border-right: none; }
  .hud-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
}

@media (max-width: 1080px) {
  .atlas-grid { grid-template-columns: 1fr; gap: 0; }
  /* No pinned map here. It plays its sequence once as it comes into view
     (see script.js) and then scrolls away, so the text below gets the whole
     screen instead of the third that was left under a stuck map. */
  .atlas-steps { padding: 8px 0 0; padding-left: 0; }
  .atlas-step {
    min-height: 0; padding: 30px 0;
    opacity: 1; transform: none; filter: none;
  }
  .atlas-progress { display: none; }
  .atlas-visual { order: -1; height: auto; position: static; }
  .atlas-sticky { position: static; height: auto; padding: 8px 0 20px; }
  /* stack the readout under the map instead of beside it */
  .map-frame { height: auto; flex-direction: column; align-items: stretch; }
  .map-stage { width: 100%; height: auto; }
  .euromap { height: auto; max-height: 56vh; }
  html.js-anim .euromap { transform: none !important; }
  .map-hud { position: static; width: 100%; margin-top: 12px; padding: 10px 14px 9px; }
  .map-hud .mh-row { padding: 3px 0; }
  /* The map is drawn at roughly half scale here, so type set in viewBox units
     lands around 5px on screen. Scale it back up to stay readable. */
  .euromap .nd text { font-size: 19px; letter-spacing: 0.1em; }
  .euromap .hub-label { font-size: 22px; letter-spacing: 0.2em; }
  .euromap .nd-dot { r: 5; }
  .euromap .nd-ring { r: 11; stroke-width: 1.6; }
  .euromap .nd-dot2 { r: 3.4; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split-sticky { position: static; }
  .team-grid, .models, .phases, .creds { grid-template-columns: 1fr; }
  .cost-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .svc { grid-template-columns: 40px 1fr 24px; }
  .svc-desc { grid-column: 2 / 4; }
}

@media (max-width: 860px) {
  .wrap { padding: 0 22px; }
  section { padding: 92px 0; }
  .hero { min-height: 0; padding: 150px 0 90px; }
  .scroll-cue { display: none; }
  .primary-nav { display: none; }
  .menu-toggle { display: flex; }
  .nav-cta { padding: 10px 16px; font-size: 0.76rem; }
  .hud { margin-top: 50px; }
  .hud-c { display: none; }
  .btn { padding: 16px 28px; }
  .primary-nav.open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(7,14,26,0.97); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line-dark); padding: 14px 22px 26px;
  }
  .primary-nav.open ul { flex-direction: column; gap: 0; }
  .primary-nav.open a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line-dark); font-size: 0.95rem; border-radius: 0; }
  .primary-nav.open a::before { display: none; }
}

@media (max-width: 620px) {
  /* keep the eyebrow on one line rather than wrapping around its dot */
  .pill, .eyebrow { font-size: 0.58rem; letter-spacing: 0.12em; padding: 7px 13px 7px 11px; gap: 8px; }
  .stat-grid { grid-template-columns: 1fr; }
  .hud-grid { grid-template-columns: 1fr; }
  .hud-cell { border-right: none; border-bottom: 1px solid var(--line-dark); }
  .hud-cell:last-child { border-bottom: none; }
  .person { padding: 28px 24px; }
  .person-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .contact { padding: 90px 0; }
  .form-card { padding: 28px 22px; }
  .svc { padding: 26px 12px; }
  .foot-row { flex-direction: column; align-items: flex-start; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal.armed { opacity: 1 !important; transform: none !important; filter: none !important; }
  .euromap .dt, .euromap .hub, .euromap .nd, .euromap .ring, .euromap .sweep { opacity: 1 !important; transform: none !important; }
  .euromap .arc { stroke-dashoffset: 0 !important; }
  .euromap .de { fill: var(--teal) !important; }
  .atlas-step { opacity: 1 !important; filter: none !important; }
  .map-hud { opacity: 1 !important; transform: none !important; }
  html.js-anim .euromap { transform: none !important; }
  html.js-anim .hero-title .ln-i { transform: none !important; }
  .corner { opacity: 1 !important; transform: none !important; }
}

/* ============ IGNITION WAVE (radial dot stagger from Germany) ============ */
html.js-anim .euromap .w0 { transition-delay: 0.00s, 0.00s; }
html.js-anim .euromap .w1 { transition-delay: 0.04s, 0.04s; }
html.js-anim .euromap .w2 { transition-delay: 0.09s, 0.09s; }
html.js-anim .euromap .w3 { transition-delay: 0.14s, 0.14s; }
html.js-anim .euromap .w4 { transition-delay: 0.18s, 0.18s; }
html.js-anim .euromap .w5 { transition-delay: 0.22s, 0.22s; }
html.js-anim .euromap .w6 { transition-delay: 0.27s, 0.27s; }
html.js-anim .euromap .w7 { transition-delay: 0.32s, 0.32s; }
html.js-anim .euromap .w8 { transition-delay: 0.36s, 0.36s; }
html.js-anim .euromap .w9 { transition-delay: 0.40s, 0.40s; }
html.js-anim .euromap .w10 { transition-delay: 0.45s, 0.45s; }
html.js-anim .euromap .w11 { transition-delay: 0.49s, 0.49s; }
html.js-anim .euromap .w12 { transition-delay: 0.54s, 0.54s; }
html.js-anim .euromap .w13 { transition-delay: 0.58s, 0.58s; }
html.js-anim .euromap .w14 { transition-delay: 0.63s, 0.63s; }
html.js-anim .euromap .w15 { transition-delay: 0.67s, 0.67s; }
html.js-anim .euromap .w16 { transition-delay: 0.72s, 0.72s; }
html.js-anim .euromap .w17 { transition-delay: 0.77s, 0.77s; }
html.js-anim .euromap .w18 { transition-delay: 0.81s, 0.81s; }
html.js-anim .euromap .w19 { transition-delay: 0.85s, 0.85s; }
html.js-anim .euromap .w20 { transition-delay: 0.90s, 0.90s; }
html.js-anim .euromap .w21 { transition-delay: 0.94s, 0.94s; }
html.js-anim .euromap .w22 { transition-delay: 0.99s, 0.99s; }
html.js-anim .euromap .w23 { transition-delay: 1.03s, 1.03s; }
html.js-anim .euromap .w24 { transition-delay: 1.08s, 1.08s; }
html.js-anim .euromap .w25 { transition-delay: 1.12s, 1.12s; }
html.js-anim .euromap .w26 { transition-delay: 1.17s, 1.17s; }