/* ==========================================================================
   VECTA CONNECT — ATLAS | DYNAMIC MARKET INTELLIGENCE
   Single-page site. Poppins only (self-hosted, OFL licence in assets/fonts).
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-regular-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/poppins-medium-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/poppins-semibold-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/poppins-bold-latin.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Primary palette */
  --graphite:      #020B14;  /* main background */
  --charcoal:      #061525;  /* secondary sections */
  --slate:         #0A1E31;  /* panels, elevated surfaces */
  --slate-hi:      #0F2840;  /* panel hover */
  --champagne:     #00E5F2;  /* brand accent, primary actions */
  --champagne-hi:  #66F2FF;
  --offwhite:      #F1F6FA;  /* primary type */
  --silver:        #A3B3C2;  /* supporting type */
  --silver-dim:    #758A9E;  /* tertiary type (AA on graphite) */

  /* Lines */
  --line:          rgba(241, 246, 250, 0.09);
  --line-strong:   rgba(241, 246, 250, 0.16);
  --line-gold:     rgba(0, 229, 242, 0.45);

  /* Supporting indicators — reserved for meaningful states only */
  --ind-green: #7FAE8E;
  --ind-amber: #D1A85A;
  --ind-red:   #FF6B7D;
  --ind-blue:  #7FB6FF;

  /* Type */
  --font: "Poppins", system-ui, sans-serif;
  --fs-body:   clamp(15px, 0.95vw + 8px, 17px);
  --fs-small:  14px;
  --fs-micro:  12px;
  --fs-lead:   clamp(17px, 0.7vw + 11px, 20px);
  --fs-h3:     clamp(17px, 0.4vw + 13px, 19px);
  --fs-h2:     clamp(30px, 2.6vw + 14px, 50px);
  --fs-h1:     clamp(26px, 1.8vw + 14px, 40px);
  --fs-atlas:  clamp(68px, 9vw + 20px, 156px);
  --fs-closing:clamp(40px, 5vw + 14px, 92px);

  /* Spacing */
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(88px, 10vw, 152px);
  --header-h: 72px;
  --radius: 2px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--graphite);
  color: var(--offwhite);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* every control inherits Poppins rather than the UA font */
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

::selection { background: rgba(0, 229, 242, .32); color: var(--offwhite); }

:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: none; }
:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
  border-radius: 1px;
}

.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--champagne); color: var(--graphite);
  font-weight: 500; font-size: var(--fs-small);
  padding: 10px 16px;
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn--primary { background: var(--champagne); color: #021018; }
.btn--primary { box-shadow: 0 0 0 rgba(0,229,242,0); transition: background-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease); }
.btn--primary:hover { background: var(--champagne-hi); box-shadow: 0 0 28px rgba(0,229,242,.45); }
.hero .btn--primary { box-shadow: 0 0 24px rgba(0,229,242,.3); }
.btn--arrow { gap: 12px; }
.btn__arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.btn--arrow:hover .btn__arrow { transform: translateX(3px); }
.btn--ghost { border-color: rgba(0,229,242,.45); color: var(--offwhite); }
.btn--ghost:hover { border-color: var(--champagne); color: var(--champagne-hi); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(2, 11, 20, 0);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(2, 11, 20, .92);
  border-bottom-color: var(--line);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background: rgba(2, 11, 20, .78); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
}
.site-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: flex-end; gap: 24px;
}


.site-nav { display: flex; align-items: center; gap: 36px; }
.site-nav__list { display: flex; gap: 32px; list-style: none; padding: 0; }
.site-nav__link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-weight: 500; font-size: 14px; letter-spacing: .02em;
  color: var(--silver);
  transition: color .2s var(--ease);
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--champagne);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav__link:hover { color: var(--offwhite); }
.site-nav__link[aria-current="true"] { color: var(--offwhite); }
.site-nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  align-items: center; gap: 12px;
  min-height: 44px; padding: 0 2px 0 12px;
  background: none; border: 0; cursor: pointer;
  font-weight: 500; font-size: 13px; letter-spacing: .08em;
  color: var(--offwhite);
}
.nav-toggle__icon { position: relative; width: 22px; height: 12px; }
.nav-toggle__icon span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle__icon span:first-child { top: 1px; }
.nav-toggle__icon span:last-child { top: 9px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child { top: 5px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  min-height: min(980px, 100svh);
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(60% 70% at 72% 50%, rgba(0,110,170,.22), rgba(0,110,170,0) 70%),
    var(--graphite);
  overflow: hidden;
  isolation: isolate;
}
/* readability scrim: solid behind the copy, clearing toward the visual */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,11,20,.96) 0%, rgba(2,11,20,.9) 26%, rgba(2,11,20,.55) 44%, rgba(2,11,20,0) 62%),
    linear-gradient(180deg, rgba(2,11,20,.85) 0%, rgba(2,11,20,0) 18%, rgba(2,11,20,0) 76%, var(--graphite) 100%);
}
.hero::after { /* thin base rule */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); z-index: 2;
}
.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(48px, 5vw, 80px) clamp(96px, 8vw, 128px);
}
.hero__copy { max-width: 620px; }

.brand-stack { display: flex; flex-direction: column; align-items: flex-start; }
.brand-stack__parent {
  font-weight: 500; font-size: 13px; letter-spacing: .34em; color: var(--silver);
  padding-left: .06em;
  display: inline-flex; align-items: center; gap: 14px;
}
.brand-stack__mark { width: 40px; height: auto; flex: none; fill: var(--champagne); filter: drop-shadow(0 0 6px rgba(0,229,242,.5)); }
.brand-stack__product {
  font-weight: 700; font-size: var(--fs-atlas); line-height: .92; letter-spacing: .1em;
  color: var(--offwhite);
  background: linear-gradient(176deg, #FFFFFF 30%, #9FB2C4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: .14em 0 .2em -.04em;
  margin-right: -.1em; /* trailing tracking */
}
.brand-stack__descriptor {
  font-weight: 500; font-size: 13px; letter-spacing: .34em; color: var(--champagne);
  text-shadow: 0 0 18px rgba(0,229,242,.35);
  padding-left: .06em;
}

.hero__title {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line-strong);
  max-width: 20em;
  font-weight: 600; font-size: var(--fs-h1); line-height: 1.18; letter-spacing: -.01em;
}
.hero__title { position: relative; }
.hero__title::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 2px; background: var(--champagne); box-shadow: 0 0 12px rgba(0,229,242,.7); }
.hero--horizon .hero__title::before { left: 50%; transform: translateX(-50%); }
.hero__title span { display: block; }
.accent { font-style: normal; color: var(--champagne); text-shadow: 0 0 24px rgba(0,229,242,.35); }
.hero__lead {
  margin-top: 20px;
  max-width: 34em;
  font-size: var(--fs-lead); line-height: 1.6; color: var(--silver);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* ---------- Hero visuals (three concepts) ---------- */
.hero__visual { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* Concept 1 — Global Lanes: flat dot-matrix map, whole world in view */
.world-map {
  position: absolute;
  width: 104vw; height: auto;
  left: 3vw;
  top: calc(52% - 104vw * .41375 * .5);
}
@media (min-width: 1024px) { .wm-port--west .wm-port__label { display: none; } }
.hero--lanes::before {
  background:
    linear-gradient(90deg, rgba(2,11,20,.97) 0%, rgba(2,11,20,.92) 34%, rgba(2,11,20,.5) 46%, rgba(2,11,20,0) 56%),
    linear-gradient(180deg, rgba(2,11,20,.85) 0%, rgba(2,11,20,0) 18%, rgba(2,11,20,0) 76%, var(--graphite) 100%);
}
.wm-grat { fill: none; stroke: rgba(241,246,250,.045); stroke-width: .8; }
.wm-land { fill: none; stroke: rgba(140,175,205,.36); stroke-width: 2.9; stroke-linecap: round; }
.wm-lane { fill: none; stroke: rgba(0,229,242,.5); stroke-width: 1.3; }
.wm-flow { fill: none; stroke: #B8FBFF; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 70; opacity: .9; }
.wm-air  { fill: none; stroke: rgba(127,182,255,.75); stroke-width: 1.2; stroke-dasharray: 3 5; }
.wm-vessel { fill: #E6FEFF; }
.wm-plane  { fill: #CFE6FF; }
.wm-port__ring { fill: none; stroke: var(--champagne); stroke-opacity: .6; stroke-width: 1; }
.wm-port__dot  { fill: var(--offwhite); }
.wm-port__label { fill: var(--offwhite); font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: .02em; paint-order: stroke; stroke: rgba(2,11,20,.85); stroke-width: 4px; }

/* Concept 2 — Cargo Globe: a turning dot globe on the right */
.hero--globe .hero__globe { left: auto; right: 0; width: 82vw; }
.hero--globe::before {
  background:
    linear-gradient(90deg, rgba(2,11,20,.95) 0%, rgba(2,11,20,.82) 30%, rgba(2,11,20,0) 50%),
    linear-gradient(180deg, rgba(2,11,20,.85) 0%, rgba(2,11,20,0) 16%, rgba(2,11,20,0) 82%, var(--graphite) 100%);
}

/* Concept 3 — Planet Horizon: centred copy above the rising limb of the Earth */
.hero--horizon .hero__copy { margin-inline: auto; max-width: 820px; text-align: center; }
.hero--horizon .brand-stack { align-items: center; }
.hero--horizon .brand-stack__product { margin-left: .1em; margin-right: 0; }
.hero--horizon .hero__title { margin-inline: auto; max-width: none; }
.hero--horizon .hero__lead { margin-inline: auto; max-width: 40em; }
.hero--horizon .hero__actions { justify-content: center; }
.hero--horizon { justify-content: flex-start; min-height: min(1080px, 100svh); }
.hero--horizon .hero__inner { padding-block: clamp(32px, 3vw, 48px) 0; }
.hero--horizon .brand-stack__product { font-size: clamp(60px, 5vw + 18px, 104px); }
.hero--horizon .hero__title { margin-top: clamp(22px, 2vw, 30px); padding-top: clamp(20px, 2vw, 28px); }
.hero--horizon .hero__lead { margin-top: 14px; }
.hero--horizon .hero__actions { margin-top: 28px; }
.hero--horizon::before {
  background:
    radial-gradient(52% 44% at 50% 40%, rgba(2,11,20,.92) 40%, rgba(2,11,20,0) 100%),
    linear-gradient(180deg, rgba(2,11,20,.85) 0%, rgba(2,11,20,0) 16%, rgba(2,11,20,0) 86%, var(--graphite) 100%);
}
.hero--horizon .legend__note { text-align: right; }
.globe { display: block; width: 100%; height: 100%; --horizon-top: .64; opacity: 0; transition: opacity 1.2s var(--ease); }
.globe.is-ready { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .wm-land  { animation: wm-in 1.6s var(--ease) both; }
  .wm-lanes, .wm-airs { animation: wm-in 1.4s var(--ease) .5s both; }
  .wm-flows, .wm-movers, .wm-ports { animation: wm-in 1.2s var(--ease) 1s both; }
  .wm-flow { animation: wm-flow 5s linear infinite; }
  .wm-flow--1 { animation-duration: 6.5s; }
  .wm-flow--2 { animation-duration: 8s; }
  .wm-air { animation: wm-air 3s linear infinite; }
}
@keyframes wm-in    { from { opacity: 0; } }
@keyframes wm-flow  { to { stroke-dashoffset: -160; } }
@keyframes wm-air   { to { stroke-dashoffset: -16; } }

.hero__legend {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 32px;
}
.legend { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.legend__item { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-micro); font-weight: 500; color: var(--silver); letter-spacing: .02em; }
.legend__key { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--champagne); }
.legend__key--air { border-top: 2px dashed var(--ind-blue); }
.legend__key--port { width: 9px; height: 9px; border: 1px solid var(--champagne); border-radius: 50%; position: relative; }
.legend__key--port::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--offwhite); }
.legend__note { font-size: var(--fs-micro); color: var(--silver-dim); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); position: relative; }
.section--charcoal { background: var(--charcoal); }
.section--charcoal + .section, .section + .section--charcoal { border-top: 1px solid var(--line); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head--solo { grid-template-columns: minmax(0, 1fr); }
.section-head--solo .section-title { max-width: 20em; }
.section-title {
  text-wrap: balance;
  font-weight: 600; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.02em;
  max-width: 14em;
}
.section-lead {
  font-size: var(--fs-lead); line-height: 1.65; color: var(--silver);
  max-width: 34em;
}

.icon {
  width: 30px; height: 30px;
  fill: none; stroke: var(--champagne); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon__dot { fill: var(--champagne); stroke: none; }

/* ---------- Intelligence overview panels ---------- */
.panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel {
  position: relative;
  padding: clamp(32px, 3.4vw, 48px) clamp(26px, 3vw, 44px) clamp(36px, 3.8vw, 52px);
  transition: background-color .3s var(--ease);
}
.panel + .panel { border-left: 1px solid var(--line); }
.panel::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px;
  background: var(--champagne);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.panel:hover { background: var(--slate-hi); }
.panel:hover::before { transform: scaleX(1); }
.panel__title { margin-top: 28px; font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
.panel__text { margin-top: 12px; color: var(--silver); max-width: 30em; }

/* ---------- Freight modes ---------- */
.modes__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.mode {
  display: flex; flex-direction: column;
  background: var(--charcoal);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.mode:hover { border-color: var(--line-gold); }
.mode-art {
  width: 100%; height: auto; display: block;
  aspect-ratio: 480 / 270;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 70% at 64% 66%, rgba(0,229,242,.16), rgba(0,229,242,0) 70%),
    linear-gradient(180deg, #071728, #0A1C2E);
  transition: filter .35s var(--ease);
}
.mode:hover .mode-art { filter: brightness(1.12); }
.mode__body { padding: 24px clamp(20px, 2vw, 28px) 30px; }
.mode__title { font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
.mode__text { margin-top: 10px; color: var(--silver); }

.ma-bg, .ma-glow { fill: none; }
.ma-sea { fill: #031220; }
.ma-waves { stroke: rgba(0,229,242,.28); stroke-width: 1; fill: none; }
.ma-hull { fill: #10253A; }
.ma-boot { fill: #0B3447; }
.ma-edge { fill: none; stroke: rgba(0,229,242,.6); stroke-width: 1; }
.ma-house { fill: #224460; }
.ma-window { fill: #A6F6FF; }
.ma-dots { fill: none; stroke: rgba(140,175,205,.28); stroke-width: 2.4; stroke-linecap: round; }
.ma-route { fill: none; stroke: var(--champagne); stroke-width: 1.4; stroke-dasharray: 5 6; }
.ma-route--ahead { stroke-opacity: .35; }
.ma-node { fill: var(--champagne); }
.ma-aircraft { fill: #234562; stroke: rgba(0,229,242,.65); stroke-width: 1.2; }
.ma-engine { fill: #10253A; stroke: rgba(0,229,242,.5); stroke-width: 1; }
.ma-ground { fill: #031220; }
.ma-lane { fill: none; stroke: rgba(0,229,242,.55); stroke-width: 2.4; }
.ma-box { fill: #1F4E72; }
.ma-corr { fill: none; stroke: rgba(0,0,0,.28); stroke-width: 1.4; }
.ma-chassis { fill: #0C1E30; }
.ma-cab { fill: var(--champagne); }
.mode-art--road .ma-window, .mode-art--rail .ma-window { fill: #0A1B2C; }
.ma-wheel { fill: #020A12; stroke: #234562; stroke-width: 1.5; }
.ma-hub { fill: #4B6C88; stroke: none; }
.ma-light { fill: #E6FEFF; }
.ma-speed { fill: none; stroke: rgba(241,246,250,.22); stroke-width: 1.4; stroke-linecap: round; }
.ma-sleepers { fill: none; stroke: #1B3851; stroke-width: 4; }
.ma-rail { fill: none; stroke: #5D7F9C; stroke-width: 1.2; }

@media (prefers-reduced-motion: no-preference) {
  .ma-waves { animation: ma-slide-480 16s linear infinite; }
  .ma-bob { animation: ma-bob 5s ease-in-out infinite; }
  .ma-route { animation: ma-dash 1.6s linear infinite; }
  .ma-lane { animation: ma-slide-60 .8s linear infinite; }
  .ma-sleepers { animation: ma-slide-18 .45s linear infinite; }
  .ma-truck, .ma-train { animation: ma-rumble .9s ease-in-out infinite; }
}
@keyframes ma-slide-480 { to { transform: translateX(-480px); } }
@keyframes ma-slide-60  { to { transform: translateX(-60px); } }
@keyframes ma-slide-18  { to { transform: translateX(-18px); } }
@keyframes ma-dash { to { stroke-dashoffset: -22; } }
@keyframes ma-bob { 50% { transform: translateY(-2px); } }
@keyframes ma-rumble { 50% { transform: translateY(-.6px); } }

/* ---------- Framework ---------- */
.voyage {
  --gap: clamp(20px, 3vw, 44px);
  --dock: calc((100% - 3 * var(--gap)) / 4 * 3 + 3 * var(--gap) - 72px);
  position: relative;
}
.stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--gap);
}
.voyage__ship {
  position: absolute; z-index: 2;
  top: 8px; left: var(--dock);
  width: 64px; height: auto;
}
.voyage__hull { fill: var(--champagne); }
.voyage__boxes { fill: #4B6C88; }
.voyage__house { fill: var(--offwhite); }
/* connecting line through the markers */
.stages::before {
  content: ""; position: absolute;
  left: 28px; right: 0; top: 28px; height: 1px;
  background: linear-gradient(90deg, var(--line-gold), var(--champagne) 92%, transparent);
  transform-origin: left;
}

/* Voyage sequence: the ship sails 01 → 04 and lights each stage as it passes.
   Without JS (no .js class) everything shows in its finished state. */
.js .voyage:not(.is-live) .stages::before { transform: scaleX(0); }
.js .voyage:not(.is-live) .voyage__ship { left: 0; opacity: 0; }
.js .voyage:not(.is-live) .stage__marker { border-color: var(--line); color: var(--silver-dim); background: var(--charcoal); }
.js .voyage:not(.is-live) .stage__title,
.js .voyage:not(.is-live) .stage__text { opacity: .35; }
.js .voyage .stage__title, .js .voyage .stage__text { transition: opacity .6s var(--ease); }
.voyage.is-live .stages::before { animation: vy-line 4.6s cubic-bezier(.45,.05,.35,1) both; }
.voyage.is-live .voyage__ship { animation: vy-sail 4.6s cubic-bezier(.45,.05,.35,1) both; }
.voyage.is-live .stage__marker { animation: vy-lit .6s var(--ease) both; }
.voyage.is-live .stage--final .stage__marker { animation-name: vy-lit-final; }
.voyage.is-live .stage:nth-child(1) .stage__marker { animation-delay: .1s; }
.voyage.is-live .stage:nth-child(2) .stage__marker { animation-delay: 1.5s; }
.voyage.is-live .stage:nth-child(3) .stage__marker { animation-delay: 3s; }
.voyage.is-live .stage:nth-child(4) .stage__marker { animation-delay: 4.4s; }
.voyage.is-live .stage:nth-child(1) :is(.stage__title, .stage__text) { transition-delay: .1s; }
.voyage.is-live .stage:nth-child(2) :is(.stage__title, .stage__text) { transition-delay: 1.5s; }
.voyage.is-live .stage:nth-child(3) :is(.stage__title, .stage__text) { transition-delay: 3s; }
.voyage.is-live .stage:nth-child(4) :is(.stage__title, .stage__text) { transition-delay: 4.4s; }
@keyframes vy-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vy-sail { from { left: 0; opacity: 0; } 8% { opacity: 1; } to { left: var(--dock); opacity: 1; } }
@keyframes vy-lit { from { border-color: var(--line); color: var(--silver-dim); background: var(--charcoal); } }
@keyframes vy-lit-final { from { border-color: var(--line); color: var(--silver-dim); background: var(--charcoal); } }
.stage { position: relative; padding-right: 8px; }
.stage__marker {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  background: var(--charcoal);
  font-weight: 500; font-size: 14px; letter-spacing: .06em; color: var(--champagne);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.stage--final .stage__marker { background: var(--champagne); color: #021018; border-color: var(--champagne); }
.stage:hover .stage__marker { border-color: var(--champagne); }
.stage__title {
  margin-top: 32px;
  font-weight: 600; font-size: 15px; letter-spacing: .26em;
  color: var(--offwhite);
}
.stage__text { margin-top: 12px; color: var(--silver); max-width: 22em; }

.framework__note {
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-weight: 500; font-size: var(--fs-body); color: var(--silver);
}

/* ---------- Capabilities ---------- */
.capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.capability {
  background: var(--charcoal);
  padding: clamp(30px, 3vw, 44px) clamp(24px, 2.8vw, 40px) clamp(34px, 3.4vw, 48px);
  transition: background-color .3s var(--ease);
}
.capability:hover { background: var(--slate); }
.capability .icon { stroke: var(--silver); transition: stroke .3s var(--ease); }
.capability:hover .icon { stroke: var(--champagne); }
.capability__title { margin-top: 26px; font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
.capability__text { margin-top: 10px; color: var(--silver); max-width: 28em; }

/* ---------- Methodology ---------- */
.methodology__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px clamp(40px, 7vw, 120px);
  align-items: start;
}
.methodology__statement {
  margin-top: 32px;
  padding-left: 24px;
  border-left: 1px solid var(--champagne);
  font-size: var(--fs-lead); line-height: 1.65; color: var(--offwhite);
  max-width: 30em;
}
.principles { margin: 0; }
.principle {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: 8px 32px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.principle:last-child { border-bottom: 1px solid var(--line); }
.principle__name {
  font-weight: 600; font-size: 14px; letter-spacing: .26em; color: var(--champagne);
  padding-top: 3px;
}
.principle__text { margin: 0; color: var(--offwhite); }
.methodology__notice {
  margin-top: 32px;
  font-size: var(--fs-small); line-height: 1.7; color: var(--silver-dim);
  max-width: 40em;
}

/* ---------- Closing ---------- */
.closing {
  --scene-h: clamp(300px, 40vw, 640px);
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--graphite) 0%, #051422 100%);
  border-top: 1px solid var(--line);
  padding-block: clamp(104px, 11vw, 168px) calc(var(--scene-h) * .8);
  text-align: center;
  isolation: isolate;
}
.closing__scene {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: var(--scene-h);
}
.port { width: 100%; height: 100%; display: block; }
.pc-skyline { fill: #0A1B2C; }
.pc-citylights { fill: #5FEAF7; opacity: .45; }
.pc-yard rect { opacity: .92; }
.pc-quay { fill: #041220; }
.pc-quay-edge { stroke: rgba(0,229,242,.35); stroke-width: 1; fill: none; }
.pc-quaylights { fill: #B8FBFF; }
.pc-steel { fill: #132B42; }
.pc-stay { fill: none; stroke: #1D3B56; stroke-width: 1.4; }
.pc-cable { fill: none; stroke: #3B5C78; stroke-width: 1; }
.pc-beacon { fill: #B8FBFF; }
.pc-hull { fill: #081A2B; }
.pc-boot { fill: #0A2C3E; }
.pc-sheer { fill: none; stroke: rgba(0,229,242,.55); stroke-width: 1.2; }
.pc-deckline { fill: none; stroke: rgba(0,229,242,.25); stroke-width: 1; }
.pc-house { fill: #1A364F; }
.pc-window { fill: #A6F6FF; }
.pc-ripples { fill: none; stroke: rgba(0,229,242,.2); stroke-width: 1; }

@media (prefers-reduced-motion: no-preference) {
  .pc-beacon { animation: pc-blink 2.6s steps(1) infinite; }
  .pc-crane:nth-child(2n) .pc-beacon { animation-delay: -1.3s; }
  .pc-load { animation: pc-hoist 10s ease-in-out infinite; }
  .pc-crane:nth-child(2) .pc-load { animation-delay: -3s; }
  .pc-crane:nth-child(4) .pc-load { animation-delay: -6s; }
  .pc-crane:nth-child(5) .pc-load { animation-delay: -8s; }
  .pc-ripples { animation: pc-drift 18s ease-in-out infinite alternate; }
  .pc-citylights circle:nth-child(3n) { animation: pc-twinkle 4s ease-in-out infinite; }
  .pc-citylights circle:nth-child(3n+1) { animation: pc-twinkle 5.5s ease-in-out -2s infinite; }
}
@keyframes pc-blink { 50% { opacity: .15; } }
@keyframes pc-hoist { 0%, 18% { transform: translateY(0); } 45%, 62% { transform: translateY(-42px); } 90%, 100% { transform: translateY(0); } }
@keyframes pc-drift { to { transform: translateX(-36px); } }
@keyframes pc-twinkle { 50% { opacity: .2; } }

.closing--page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; border-top: 0; padding-block: 96px; }
.closing__inner { display: flex; flex-direction: column; align-items: center; }
.closing__brand {
  display: inline-flex; align-items: center; gap: 16px;
  font-weight: 500; font-size: 13px; letter-spacing: .34em; color: var(--silver);
}
.closing__sep { width: 1px; height: 16px; background: var(--champagne); box-shadow: 0 0 8px rgba(0,229,242,.6); }
.closing__title {
  text-wrap: balance;
  margin-top: 28px;
  font-weight: 700; font-size: var(--fs-closing); line-height: 1.04; letter-spacing: -.025em;
  max-width: 15em;
}
.closing__lead {
  text-wrap: balance;
  margin: 24px 0 44px;
  font-size: var(--fs-lead); color: var(--silver); max-width: 32em;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--graphite);
  border-top: 1px solid var(--line);
  padding-block: clamp(64px, 7vw, 96px) 40px;
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.brand-stack--footer .brand-stack__parent,
.brand-stack--footer .brand-stack__descriptor { font-size: 11px; }
.brand-stack--footer .brand-stack__product { font-size: 40px; margin: .2em 0 .25em; }
.brand-stack--footer .brand-stack__mark { width: 30px; }
.brand-stack--footer .brand-stack__parent { gap: 10px; }
.site-footer__descriptor { margin-top: 24px; max-width: 30em; color: var(--silver); font-size: var(--fs-small); line-height: 1.7; }
.site-footer__nav { justify-self: end; }
.site-footer__nav ul { display: grid; gap: 6px; }
.site-footer__nav a {
  display: inline-block; padding: 6px 0;
  font-weight: 500; font-size: var(--fs-small); color: var(--silver);
  transition: color .2s var(--ease);
}
.site-footer__nav a:hover { color: var(--champagne-hi); }
.site-footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 64px;
  padding-top: 32px;
  align-items: start;
}
.site-footer__legal { font-size: var(--fs-micro); line-height: 1.75; color: var(--silver-dim); max-width: 72em; }
.site-footer__copy { font-size: var(--fs-micro); color: var(--silver-dim); white-space: nowrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet & below: collapsible navigation */
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 32px;
    background: var(--graphite);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
  }
  .site-header.is-open .site-nav {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
  }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list li + li { border-top: 1px solid var(--line); }
  .site-nav__link { display: flex; padding: 18px 0; font-size: 17px; color: var(--offwhite); }
  .site-nav__link::after { display: none; }
  .site-nav__link[aria-current="true"] { color: var(--champagne); }
  .site-nav__cta { margin-top: 20px; min-height: 50px; font-size: 15px; }

  .hero { min-height: 0; display: block; }
  .hero::before {
    background: linear-gradient(180deg, rgba(2,11,20,.85) 0%, rgba(2,11,20,0) 8%);
    bottom: auto; height: 100%;
  }
  .hero__inner { padding-block: 48px 8px; }
  .hero__visual { position: relative; inset: auto; }
  .hero__map { height: 66vw; }
  .hero__visual::before, .hero__visual::after {
    content: ""; position: absolute; left: 0; right: 0; height: 18%; z-index: 1; pointer-events: none;
  }
  .hero__visual::before { top: 0; background: linear-gradient(180deg, var(--graphite), rgba(2,11,20,0)); }
  .hero__visual::after  { bottom: 0; background: linear-gradient(0deg, var(--graphite), rgba(2,11,20,0)); }
  .world-map { width: 150vw; left: -25vw; top: calc(50% - 150vw * .41375 * .5); }
  .hero--globe .hero__globe { right: auto; width: 100%; height: min(100vw, 680px); }
  .hero--horizon .hero__inner { padding-block: 48px 8px; }
  .hero--horizon { min-height: 0; }
  .hero--horizon .hero__globe { height: 74vw; }
  .hero--horizon .globe { --horizon-top: .34; }
  .hero--horizon .legend__note { text-align: left; }
  .wm-port__label { font-size: 15px; }
  .hero__legend { position: relative; bottom: auto; padding-bottom: 40px; }

  .modes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .section-head { grid-template-columns: minmax(0, 1fr); }

  .panels { grid-template-columns: minmax(0, 1fr); }
  .panel + .panel { border-left: 0; border-top: 1px solid var(--line); }
  .panel { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; }
  .panel .icon { grid-row: span 2; margin-top: 2px; }
  .panel__title { margin-top: 0; }

  .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .methodology__grid { grid-template-columns: minmax(0, 1fr); }

  .site-footer__top { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Framework goes vertical below 860px */
@media (max-width: 859px) {
  .stages { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stages::before { display: none; }
  .stage:not(:last-child)::after {
    content: ""; position: absolute;
    left: 27px; top: 56px; bottom: 0; width: 1px;
    background: var(--line-gold);
  }
  .stage {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 24px;
    padding: 0 0 40px;
  }
  .stage:last-child { padding-bottom: 0; }
  .stage__marker { grid-row: span 2; }
  .voyage__ship { display: none; }
  .stage__title { margin-top: 15px; }
  .stage__text { margin-top: 8px; }
}

/* Mobile */
@media (max-width: 639px) {
  :root { --header-h: 64px; }
  .nav-toggle__label { display: none; }
  .nav-toggle { padding: 0 6px; min-width: 44px; justify-content: center; }

  .brand-stack__parent, .brand-stack__descriptor { font-size: 11px; letter-spacing: .26em; }
  .brand-stack__mark { width: 30px; }
  .brand-stack__parent { gap: 10px; }
  .brand-stack__product { letter-spacing: .08em; }
  .hero__inner { padding-block: 40px 56px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .world-map { width: 210vw; left: -55vw; top: calc(50% - 210vw * .41375 * .5); }
  .hero__map { height: 92vw; }
  .hero--horizon .hero__globe { height: 96vw; }
  .hero--horizon .hero__copy { text-align: left; }
  .hero--horizon .brand-stack { align-items: flex-start; }
  .hero--horizon .brand-stack__product { margin-left: -.04em; }
  .wm-port__label { font-size: 17px; }
  .wm-land { stroke-width: 3.2; }
  .hero__legend { flex-direction: column; align-items: flex-start; }
  .legend { gap: 10px 20px; }
  .modes__grid { grid-template-columns: minmax(0, 1fr); }
  .closing { --scene-h: 300px; padding-bottom: 250px; }

  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel .icon { grid-row: auto; }
  .panel__title { margin-top: 22px; }

  .capabilities { grid-template-columns: minmax(0, 1fr); }

  .principle { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .methodology__statement { padding-left: 18px; }

  .closing__brand { font-size: 11px; letter-spacing: .26em; gap: 12px; }
  .closing .btn { width: 100%; max-width: 360px; }

  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .site-footer__nav { justify-self: start; }
  .site-footer__bottom { grid-template-columns: minmax(0, 1fr); }
  .site-footer__copy { white-space: normal; }
}

/* Very narrow phones */
@media (max-width: 359px) {
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

@media print {
  .site-header, .hero__visual, .closing__scene, .mode-art { display: none; }
  body { background: #fff; color: #000; }
}