/* ============================================================
   WEBSTREAX — The Voyage
   ============================================================ */
:root {
  --bg: #02010a;
  --ink: #eaf2ff;
  --dim: #bac6e2;
  --cyan: #5eeaff;
  --violet: #8a6cff;
  --magenta: #ff5edb;
  --card: rgba(10, 12, 34, 0.55);
  --line: rgba(138, 108, 255, 0.25);
  --font-d: 'Unbounded', sans-serif;
  --font-b: 'Space Grotesk', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Native scrollbar hidden on the voyage: it cuts a grey strip through the full-bleed
   canvas, and the #voyage rail already shows progress. HIDDEN, NOT DISABLED — wheel,
   trackpad, touch, keyboard, scrollbar-drag-free dragging and programmatic scrolling
   all still work. This also supersedes scrollbar-gutter: no scrollbar means no gutter,
   so the mobile-menu scroll lock can no longer shift the fixed header sideways. */
html {
  scroll-behavior: auto; scrollbar-width: none; -ms-overflow-style: none;
  /* belt-and-braces against sideways scroll. `clip` is preferred over `hidden` because
     hidden makes the element a scroll container; the home page has no sticky elements so
     the hidden fallback is safe here. body{overflow-x:hidden} alone does NOT work —
     overflow propagates from the ROOT element. */
  overflow-x: hidden;
  overflow-x: clip;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--violet); color: #fff; }

/* ---------- canvas + atmosphere ---------- */
#webgl {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0;
}
#vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(1, 0, 8, 0.55) 100%);
}
#warp-flash {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(94,234,255,0.9), rgba(138,108,255,0.5) 45%, transparent 75%);
  opacity: 0;
}

/* ---------- preloader ----------
   SAFETY: this overlay is opaque and covers everything, so it must NEVER be able to
   trap the page. Three independent guards, because the JS that normally dismisses it
   lives inside the engine module — which fails outright when the CDN is blocked, WebGL
   is unavailable (Lockdown Mode, GPU blocklist), or import maps are unsupported:
     1. hidden by default; only `html.js` turns it on, so no-JS users never see it
     2. a pure-CSS bail-out that force-hides it after 8s with no script involved
     3. an inline classic script in index.html that clears it on error/timeout        */
#preloader { display: none; }
html.js #preloader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s;
  animation: preloader-bail 8s step-end forwards;
}
@keyframes preloader-bail { to { opacity: 0; visibility: hidden; pointer-events: none; } }
html.js #preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
/* if the engine never booted, un-hide the content the reveal animations were holding */
html.boot-failed .reveal { opacity: 1 !important; transform: none !important; }
html.boot-failed .hero-title .line span { transform: none !important; }
.pre-inner { text-align: center; }
.pre-logo { animation: pre-pulse 1.6s ease-in-out infinite; }
@keyframes pre-pulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } }
.pre-bar {
  width: 180px; height: 2px; margin: 26px auto 14px;
  background: rgba(138,108,255,0.2); border-radius: 2px; overflow: hidden;
}
.pre-fill {
  width: 0%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transition: width 0.3s ease;
}
.pre-line { color: var(--dim); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- nav ---------- */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 56px);
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
#nav.scrolled {
  background: rgba(2, 1, 10, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink);
}
.nav-word {
  font-family: var(--font-d); font-weight: 700; font-size: 15px;
  letter-spacing: 0.22em;
  background: linear-gradient(90deg, var(--ink), #b9c8ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-links { display: flex; gap: clamp(16px, 2.6vw, 38px); }
.nav-links a {
  color: var(--dim); text-decoration: none; font-size: 14px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; min-height: 44px; /* was an 18px tap target */
  transition: color 0.25s;
  position: relative;
  text-shadow: 0 1px 6px rgba(2,1,10,0.85); /* legible over the raw canvas before nav gets a bg */
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--font-b); font-weight: 600; letter-spacing: 0.06em;
  border-radius: 999px; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s;
  will-change: transform;
}
.btn-primary {
  padding: 16px 34px; color: #04030f; font-size: 15px;
  background: linear-gradient(100deg, var(--cyan), var(--violet) 60%, var(--magenta));
  box-shadow: 0 0 24px rgba(94, 234, 255, 0.35), 0 0 60px rgba(138, 108, 255, 0.25);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 34px rgba(94,234,255,0.55), 0 0 90px rgba(138,108,255,0.4); }
.btn-ghost {
  padding: 15px 32px; color: var(--ink); font-size: 15px;
  border: 1px solid var(--line); background: rgba(10,12,34,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 0 24px rgba(94,234,255,0.2); }
.btn-small {
  padding: 10px 22px; font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); background: rgba(10,12,34,0.4);
}
.btn-small:hover { border-color: var(--cyan); box-shadow: 0 0 18px rgba(94,234,255,0.25); }

/* ---------- voyage progress ---------- */
#voyage {
  position: fixed; right: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%);
  z-index: 40; height: 34vh; pointer-events: none;
}
.voyage-track {
  width: 2px; height: 100%; margin: 0 auto; position: relative;
  background: linear-gradient(180deg, rgba(94,234,255,0.5), rgba(138,108,255,0.25), rgba(255,94,219,0.15));
  border-radius: 2px;
}
.voyage-ship {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -50%) rotate(180deg);
  color: var(--cyan); font-size: 11px;
  text-shadow: 0 0 8px var(--cyan);
}

/* ---------- layout primitives ---------- */
#content { position: relative; z-index: 10; }
.panel { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12vh clamp(20px, 5vw, 72px); position: relative; }
.panel-half { min-height: 70vh; min-height: 70svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10vh clamp(20px, 5vw, 72px); text-align: center; }
.block { max-width: 980px; width: 100%; }
.block-center { text-align: center; margin: 0 auto; }

.eyebrow {
  color: var(--cyan); font-size: 13px; font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase; margin-bottom: 22px;
  text-shadow: 0 0 14px rgba(2,1,10,0.95), 0 2px 6px rgba(2,1,10,0.9);
}
/* The hero eyebrow is the page <h1> (the wordmark below it is decorative). Neutralise the
   UA h1 box and type so the tag swap is purely semantic. The size/weight are RESTATED, not
   inherited: h1.eyebrow outranks .eyebrow, so a blanket `font: inherit` here would wipe
   out .eyebrow's own 13px/700 and blow the line up to body size. */
h1.eyebrow { margin: 0 0 22px; font-family: var(--font-b); font-size: 13px; font-weight: 700; }
/* strong two-layer shadow so headings read over the bright/bloomed 3D center */
.h2, .h1b, .hero-title { text-shadow: 0 0 22px rgba(2,1,10,0.9), 0 2px 10px rgba(2,1,10,0.85); }
.h2 {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(30px, 5.2vw, 62px); line-height: 1.12; margin-bottom: 28px;
}
.h1b {
  font-family: var(--font-d); font-weight: 900;
  font-size: clamp(38px, 7vw, 92px); line-height: 1.05; margin-bottom: 26px;
}
.body {
  color: var(--dim); font-weight: 500;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.75;
  max-width: 680px; margin: 0 auto 18px;
  text-shadow: 0 0 16px rgba(2,1,10,0.95), 0 2px 8px rgba(2,1,10,0.85);
}
.body a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(94,234,255,0.45); }
.body a:hover { border-bottom-color: var(--cyan); }
.grad {
  background: linear-gradient(95deg, var(--cyan), var(--violet) 55%, var(--magenta));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* CRITICAL: never text-shadow background-clip:text. The gradient is painted as the
     element BACKGROUND, and backgrounds paint before text shadows — so an inherited
     text-shadow lands ON TOP of the gradient and greys the letters into a dark smudge.
     drop-shadow() works off the rendered alpha instead, so it sits behind the glyph. */
  text-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(2, 1, 10, 0.95)) drop-shadow(0 0 20px rgba(2, 1, 10, 0.8));
}

/* ---------- hero ---------- */
#hero { text-align: center; padding-top: max(12vh, 96px); }
.hero-inner { position: relative; }
.hero-title {
  font-family: var(--font-d); font-weight: 900;
  font-size: clamp(44px, 9.5vw, 132px); line-height: 1.02;
  letter-spacing: 0.01em; margin: 10px 0 30px;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line span { display: inline-block; will-change: transform; }
.hero-sub {
  color: #cdd8f2; font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px); line-height: 1.7; margin-bottom: 40px;
  text-shadow: 0 0 16px rgba(2,1,10,0.95), 0 2px 8px rgba(2,1,10,0.85);
}
.hero-cta { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  color: var(--dim); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  /* decorative only — without this it overlaps and swallows taps on the hero CTAs
     on any short viewport (landscape phones, iPad mini landscape, 1280x720 laptops) */
  pointer-events: none;
}
/* short viewports: the hint collides with the buttons, so drop it entirely */
@media (max-height: 820px) { .scroll-hint { display: none; } }
.hint-line {
  width: 1px; height: 52px; display: block;
  background: linear-gradient(180deg, transparent, var(--cyan));
  animation: hint 2s ease-in-out infinite;
}
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- services ---------- */
.services-head { text-align: center; }
.svc {
  min-height: 92vh;
  display: flex; align-items: center;
  padding: 6vh clamp(20px, 7vw, 110px);
}
.svc[data-side="right"] { justify-content: flex-end; }
.svc[data-side="left"] { justify-content: flex-start; }
.svc-card {
  max-width: 460px; width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 34px 36px 38px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 0 40px rgba(138,108,255,0.05);
  position: relative; overflow: hidden;
}
.svc-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(94,234,255,0.08), transparent 45%);
}
.svc-num {
  font-family: var(--font-d); font-weight: 700; font-size: 13px;
  color: var(--violet); letter-spacing: 0.3em;
}
.svc-cap {
  margin: 14px 0 6px; color: var(--cyan); font-size: 12px;
  letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85;
}
.svc-card h3 {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px); margin: 4px 0 14px;
}
.svc-card p { color: var(--dim); font-weight: 500; font-size: 17px; line-height: 1.7; }
.svc-link {
  /* these are the ONLY route from the 3D home into the service pages — they were an
     18px-tall tap target. inline-flex + min-height gives a real 44px hit area without
     changing how they look. */
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 8px; margin-right: 22px;
  color: var(--cyan); text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  transition: transform 0.2s ease;
}
.svc-link:active { text-decoration: underline; }
.svc-link:last-of-type { margin-right: 0; }
.svc-link + .svc-link { color: #b9a8ff; } /* sibling link — related service */
.svc-link:hover { transform: translateX(4px); text-decoration: underline; }

/* ---------- warp ---------- */
#warp .warp-line {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(17px, 2.5vw, 28px); color: #d5def5; letter-spacing: 0.12em;
  text-shadow: 0 0 18px rgba(2,1,10,0.95), 0 2px 8px rgba(2,1,10,0.85);
}


/* ---------- stats ---------- */
.stats-grid {
  /* minmax(0,1fr), not 1fr: the default `min-width:auto` floor lets the big stat numbers
     force columns wider than their share and spill the grid past the viewport at 320px */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 30px;
}
.stat {
  padding: 34px 18px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.stat-n {
  display: block; font-family: var(--font-d); font-weight: 900;
  font-size: clamp(34px, 4.4vw, 58px);
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-l { display: block; margin-top: 12px; color: var(--dim); font-weight: 600; font-size: 13.5px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- process ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 40px; }
.step {
  border: 1px solid var(--line); border-radius: 20px; padding: 32px 30px;
  background: var(--card); backdrop-filter: blur(10px);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.step:hover { transform: translateY(-6px); border-color: rgba(94,234,255,0.5); box-shadow: 0 18px 50px rgba(94,234,255,0.08); }
.step-n { font-family: var(--font-d); font-size: 12px; font-weight: 700; color: var(--magenta); letter-spacing: 0.3em; }
.step h3 { font-family: var(--font-d); font-size: 22px; margin: 14px 0 10px; }
.step p { color: var(--dim); font-weight: 500; font-size: 16px; line-height: 1.7; }

/* ---------- contact ---------- */
.contact-line {
  margin-top: 30px; color: #cdd8f2; font-weight: 600; font-size: 17px; letter-spacing: 0.08em;
  text-shadow: 0 0 16px rgba(2,1,10,0.95), 0 2px 8px rgba(2,1,10,0.85);
}
.contact-line a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(94,234,255,0.5); }
.contact-line a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.contact-addr {
  margin-top: 18px; font-style: normal;
  color: var(--dim); font-weight: 500; font-size: 15px; line-height: 1.7;
  text-shadow: 0 0 16px rgba(2,1,10,0.95), 0 2px 8px rgba(2,1,10,0.85);
}

/* ---------- ground truth blocks ----------
   Static, always-visible facts sitting between the last panel and the footer. No .reveal,
   no ScrollTrigger, no opacity gating — this content must survive a dead engine. */
#ground {
  position: relative; z-index: 10;
  padding: 8vh clamp(20px, 5vw, 72px) 0;
}
.ground-grid {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px; align-items: start;
}
.ground-card {
  border: 1px solid var(--line); border-radius: 20px; padding: 32px 30px;
  background: var(--card);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ground-h {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.28; margin-bottom: 18px;
  text-shadow: 0 0 18px rgba(2,1,10,0.9), 0 2px 8px rgba(2,1,10,0.85);
}
.ground-p {
  color: var(--dim); font-weight: 500; font-size: 15.5px; line-height: 1.75;
  margin-bottom: 15px;
}
.ground-p:last-child { margin-bottom: 0; }
.ground-p a, .ground-dl dd a {
  color: var(--cyan); text-decoration: none;
  border-bottom: 1px solid rgba(94,234,255,0.45);
}
.ground-p a:hover, .ground-dl dd a:hover { border-bottom-color: var(--cyan); }
.ground-dl { margin-bottom: 18px; }
.ground-row {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 4px 18px;
  padding: 10px 0; border-top: 1px solid rgba(138, 108, 255, 0.16);
}
.ground-row:first-child { border-top: 0; padding-top: 0; }
.ground-dl dt {
  color: var(--cyan); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding-top: 3px;
}
.ground-dl dd { color: var(--dim); font-size: 15px; font-weight: 500; line-height: 1.6; }

/* ---------- footer ---------- */
#footer {
  position: relative; z-index: 10;
  padding: 60px clamp(20px, 5vw, 72px) 40px;
  background: linear-gradient(180deg, transparent, rgba(2,1,10,0.85));
}
.foot-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-links a { color: var(--dim); text-decoration: none; font-size: 14px; transition: color 0.25s; }
.foot-links a:hover { color: var(--cyan); }
.foot-blurb { margin-top: 30px; color: var(--dim); font-weight: 500; font-size: 15px; max-width: 600px; line-height: 1.7; }
.foot-fine { margin-top: 22px; color: rgba(186,198,226,0.75); font-size: 13px; font-weight: 500; }

/* ---------- reveal defaults (JS animates in) ----------
   Scoped to html.js so text stays visible for crawlers /
   users without JavaScript — never invisible content. */
html.js .reveal { opacity: 0; transform: translateY(36px); }
html.js .hero-title .line span { transform: translateY(110%); }

/* EXCEPTION — #hero is above the fold and holds the page <h1>, the positioning line and
   the only two CTAs. It must be READABLE AT FIRST PAINT, before (and even without) the
   engine module: never opacity 0. It starts 14px low instead, and heroIn() tweens only
   that offset away, so the entrance still reads as deliberate with no flash of hidden
   content. Keep this in sync with heroIn() in js/main.js — if you change the 14px here,
   change the tween there. */
html.js #hero .reveal { opacity: 1; transform: translateY(14px); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-title .line span, .svc-card { opacity: 1 !important; transform: none !important; }
  .hint-line, .pre-logo { animation: none; }
}

/* ---------- keyboard focus (a11y) ---------- */
.btn:focus-visible, .nav-links a:focus-visible, .svc-link:focus-visible, .nav-logo:focus-visible,
#nav-burger:focus-visible, #mobile-menu a:focus-visible, .foot-links a:focus-visible,
.ground-card a:focus-visible, .body a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- skip link ----------
   z-index sits above the preloader (100) so it is reachable even mid-boot. Moved
   off-screen with transform rather than display:none / visibility:hidden — both of
   those drop it out of the tab order, which is the one thing it must never leave. */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  transform: translateY(calc(-100% - 24px));
  padding: 12px 22px; border-radius: 999px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 24px rgba(94, 234, 255, 0.3);
  font-family: var(--font-b); font-weight: 600; font-size: 14px; letter-spacing: 0.06em;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--cyan); outline-offset: 3px; }
/* the skip target is only focusable to receive the jump — never ring it */
#content:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ---------- mobile nav ---------- */
#nav-burger {
  display: none;
  background: rgba(2, 1, 10, 0.4);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 13px 10px;
  flex-direction: column;
  justify-content: space-between;
}
#nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
#nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-burger.open span:nth-child(2) { opacity: 0; }
#nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#mobile-menu {
  position: fixed;
  inset: 0; /* full-height overlay — a partial panel collided with the hero CTA underneath */
  z-index: 49;
  padding: 92px 28px 30px;
  background: rgba(2, 1, 10, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
#mobile-menu[hidden] { display: none; }
/* :not(.btn) matters — an ID selector otherwise outranks .btn-primary and paints the
   CTA's dark label near-white on its bright gradient, making it all but invisible */
#mobile-menu a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  padding: 13px 4px;
  text-shadow: 0 1px 8px rgba(2, 1, 10, 0.8);
}
#mobile-menu .btn { text-align: center; margin-top: 14px; font-family: var(--font-b); font-size: 15px; }
@media (max-height: 480px) {
  #mobile-menu { padding-top: 76px; padding-bottom: 20px; }
  #mobile-menu a { font-size: 17px; padding: 9px 4px; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .btn-small { display: none; }
  #nav-burger { display: flex; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .steps { grid-template-columns: 1fr; }
  .svc { justify-content: center !important; min-height: 78vh; min-height: 78svh; }
  .svc-card { max-width: 100%; }
  #voyage { display: none; }
  .br-d { display: none; }
  .ground-grid { grid-template-columns: 1fr; gap: 18px; }
  .ground-card { padding: 28px 24px; }
}
@media (max-width: 520px) {
  /* the 148px label column squeezes the values to a two-word ribbon at 320px */
  .ground-row { grid-template-columns: 1fr; gap: 3px; }
  .ground-dl dt { padding-top: 0; }
}