/* ============================================================
   TDNT · Triplet Data Networks & Telecommunications LTD
   v3 · "Signal Meets Systems" — brand identity 2026
   Boldonse (display) + Elms Sans (body, data and UI labels)
   Palette: Midnight Ink / Cloud White / Sage Mist / Cyan Signal /
            Cobalt Core / Ember Orange. Every other shade on the site
            is a mix of these (official tints, or Midnight and Cloud
            blended for neutrals); no outside colors.
   ============================================================ */

@font-face {
  font-family: "Elms Sans";
  src: url("assets/fonts/ElmsSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Elms Sans";
  src: url("assets/fonts/ElmsSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Boldonse";
  src: url("assets/fonts/Boldonse-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* metric-matched stand-ins, shown only until the real fonts arrive: same width and line
   metrics, so the swap does not re-wrap headings or move anything on the page */
@font-face {
  font-family: "Boldonse Fallback";
  src: local("Arial Black"), local("Arial-Black");
  font-weight: 400;
  size-adjust: 108.5%;
  ascent-override: 140.1%;
  descent-override: 36.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Elms Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  font-weight: 100 549;
  size-adjust: 107.6%;
  ascent-override: 92.9%;
  descent-override: 27.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Elms Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
  font-weight: 550 900;
  size-adjust: 105.4%;
  ascent-override: 94.9%;
  descent-override: 28.5%;
  line-gap-override: 0%;
}

:root {
  /* ── brand palette (raw) ── */
  --midnight: #0a081c;
  --cloud: #fffbfa;
  --sage: #ecf1e5;
  --cyan: #97e2e8;
  --cobalt: #003399;
  --ember: #e5582c;
  /* official 80% tints (brand guidelines, Color Scheme) used for hover states */
  --cobalt-bright: color-mix(in srgb, var(--cobalt) 80%, var(--cloud));
  --ember-bright: color-mix(in srgb, var(--ember) 80%, var(--cloud));

  /* ── neutrals: Midnight Ink and Cloud White blended, nothing else ── */
  --dark-elev: color-mix(in srgb, var(--cloud) 5%, var(--midnight));
  --dark-card: color-mix(in srgb, var(--cloud) 8%, var(--midnight));
  --dark-line: color-mix(in srgb, var(--cloud) 15%, var(--midnight));
  --dark-line-soft: color-mix(in srgb, var(--cloud) 8%, var(--midnight));
  --dark-dim: color-mix(in srgb, var(--cloud) 72%, var(--midnight));
  --dark-mute: color-mix(in srgb, var(--cloud) 46%, var(--midnight));
  --light-elev: color-mix(in srgb, var(--midnight) 4%, var(--cloud));
  --light-line: color-mix(in srgb, var(--midnight) 12%, var(--cloud));
  --light-line-soft: color-mix(in srgb, var(--midnight) 7%, var(--cloud));
  --light-dim: color-mix(in srgb, var(--midnight) 74%, var(--cloud));
  --light-mute: color-mix(in srgb, var(--midnight) 52%, var(--cloud));

  /* ── dark theme tokens (default: hero, ticker, footer, dark sections) ── */
  --bg: var(--midnight);
  --bg-elev: var(--dark-elev);
  --bg-card: var(--dark-card);
  --bg-deep: var(--midnight);
  --line: var(--dark-line);
  --line-soft: var(--dark-line-soft);
  --fg: var(--cloud);
  --fg-dim: var(--dark-dim);
  --fg-mute: var(--dark-mute);
  --accent: var(--ember);        /* primary accent on dark */
  --accent-bright: var(--ember-bright);
  --accent-soft: #e5582c22;
  --accent-faint: #e5582c0d;
  --accent-line: #e5582c55;
  --accent2: var(--cyan);        /* secondary/glow accent, dark surfaces only */
  --signal: var(--cyan);         /* info blue → cyan signal */
  --on-accent: var(--midnight);  /* text/icon color placed on top of --accent */
  --ok: var(--cyan);             /* live / healthy status */

  --display: "Boldonse", "Boldonse Fallback", system-ui, sans-serif;
  --sans: "Elms Sans", "Elms Sans Fallback", system-ui, sans-serif;
  /* data and UI labels: Elms Sans too (live numbers use .fig cells, see below) */
  --mono: "Elms Sans", "Elms Sans Fallback", system-ui, sans-serif;

  --maxw: 1480px;
  /* side gutter; on a notched phone held sideways it also clears the safe area */
  --pad-x: max(clamp(20px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

/* ── light theme tokens: applied per-section via .on-light ──
   Cobalt Core becomes the primary accent (it "fits best on lighter
   backgrounds" per brand guidance); Ember stays as the secondary/
   hover accent; Cyan Signal is withheld — it is a dark-surface-only
   accent per the identity guidelines.
   On pages marked .page-light (every page) the banner is the only dark
   section: every content section, CTA and footer after it takes these
   tokens too, without needing the class in the markup. */
.on-light,
.page-light :where(section.section, .cta, .sp-section, .sp-cta, .footer) {
  --bg: var(--cloud);
  --bg-elev: var(--light-elev);
  --bg-card: var(--cloud);
  --bg-deep: var(--midnight);
  --line: var(--light-line);
  --line-soft: var(--light-line-soft);
  --fg: var(--midnight);
  --fg-dim: var(--light-dim);
  --fg-mute: var(--light-mute);
  --ok: var(--cobalt);
  --accent: var(--cobalt);
  --accent-bright: var(--cobalt-bright);
  --accent-soft: #0033991a;
  --accent-faint: #0033990a;
  --accent-line: #00339955;
  --accent2: var(--ember);
  --signal: var(--cobalt);
  --on-accent: var(--cloud);
  color: var(--fg);
  background: var(--bg);
}
.on-sage,
.page-light .sp-section:nth-of-type(even),
.page-light footer.footer {
  --bg: var(--sage);
  --bg-elev: color-mix(in srgb, var(--midnight) 4%, var(--sage));
  --line-soft: color-mix(in srgb, var(--midnight) 7%, var(--sage));
}

/* service detail pages: alternate every other .sp-section (Overview /
   Use Cases / Related land light; Capabilities / Specs stay dark) —
   done structurally since all 8 service pages share identical markup */
.sp-section:nth-of-type(even) {
  --bg: var(--cloud);
  --bg-elev: var(--light-elev);
  --bg-card: var(--cloud);
  --line: var(--light-line);
  --line-soft: var(--light-line-soft);
  --fg: var(--midnight);
  --fg-dim: var(--light-dim);
  --fg-mute: var(--light-mute);
  --ok: var(--cobalt);
  --accent: var(--cobalt);
  --accent-bright: var(--cobalt-bright);
  --accent-soft: #0033991a;
  --accent-faint: #0033990a;
  --accent-line: #00339955;
  --accent2: var(--ember);
  --signal: var(--cobalt);
  --on-accent: var(--cloud);
  color: var(--fg);
  background: var(--bg);
}

/* ── dark inset "device" panels: stay dark regardless of section
   theme (the submark's screens/terminals/orbit visuals) ── */
.tx-stage,
.sec-terminal,
.sec-stack,
.sp-hero-visual,
.net-map,
.proc-detail {
  --bg: var(--midnight);
  --bg-elev: var(--dark-elev);
  --bg-card: var(--dark-card);
  --line: var(--dark-line);
  --line-soft: var(--dark-line-soft);
  --fg: var(--cloud);
  --fg-dim: var(--dark-dim);
  --fg-mute: var(--dark-mute);
  --accent: var(--ember);
  --accent-bright: var(--ember-bright);
  --accent-soft: #e5582c22;
  --accent-faint: #e5582c0d;
  --accent-line: #e5582c55;
  --accent2: var(--cyan);
  --signal: var(--cyan);
  --on-accent: var(--midnight);
  --ok: var(--cyan);
}

/* ── home page: the banner is the only dark section ──
   Every section after it runs the light tokens, and the inset
   "device" panels follow them instead of staying dark. */
.page-light :where(.on-light, section.section, .cta, .sp-section, .sp-cta, .footer) { --bg-deep: var(--bg-elev); }
.page-light :is(.tx-stage, .sec-terminal, .sec-stack, .net-map, .proc-detail) {
  --bg: var(--cloud);
  --bg-elev: var(--light-elev);
  --bg-card: var(--cloud);
  --bg-deep: var(--light-elev);
  --line: var(--light-line);
  --line-soft: var(--light-line-soft);
  --fg: var(--midnight);
  --fg-dim: var(--light-dim);
  --fg-mute: var(--light-mute);
  --accent: var(--cobalt);
  --accent-bright: var(--cobalt-bright);
  --accent-soft: #0033991a;
  --accent-faint: #0033990a;
  --accent-line: #00339955;
  --accent2: var(--ember);
  --signal: var(--cobalt);
  --on-accent: var(--cloud);
  --ok: var(--cobalt);
  /* read by service-visuals.js (plain color strings, used as SVG attributes) */
  --vis-fg: #0a081c;
  --vis-dim: rgba(10, 8, 28, 0.48);
  --vis-chip-a: #fffbfa;
  --vis-chip-b: #ecf1e5;
}
/* eSIM card becomes a Cobalt card with Cloud type */
.page-light .esim-card {
  --fg: var(--cloud);
  --fg-dim: rgba(255, 251, 250, 0.72);
  --fg-mute: rgba(255, 251, 250, 0.5);
  --line: rgba(255, 251, 250, 0.16);
  background: var(--cobalt);
  box-shadow:
    0 40px 80px -30px rgba(0, 51, 153, 0.45),
    inset 0 1px 0 rgba(255, 251, 250, 0.12);
}
/* nav turns light once the dark banner has scrolled away (home.js) */
.nav { transition: background-color 0.4s ease, border-color 0.4s ease; }
.nav.on-light .logo-mark path[fill="#fffbfa"] { fill: var(--cobalt); }
.nav.on-light .logo-mark path[fill="#97e2e8"] { fill: var(--ember); }
.page-light .footer .logo-mark path[fill="#fffbfa"] { fill: var(--cobalt); }
.page-light .footer .logo-mark path[fill="#97e2e8"] { fill: var(--ember); }

/* ── brand bleed · the submark's "expanded edge treatment" ──
   Per the identity guidelines: the submark's strokes can bleed
   off-page for bold, full-bleed brand applications. Used here as a
   recurring watermark that straddles section seams — always placed
   as a child of the section *below* a seam so it paints on top of
   the section above it, reading as a mark crossing the boundary. */
.brand-bleed {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: var(--bleed-size, 300px);
  aspect-ratio: 645.6 / 588.39;
  color: var(--bleed-color, var(--accent));
  opacity: var(--bleed-opacity, 0.1);
  filter: blur(var(--bleed-blur, 0px));
}
.brand-bleed svg { display: block; width: 100%; height: 100%; }
.brand-bleed--seam-l {
  top: -14%;
  left: clamp(-40px, -4vw, -10px);
  transform: rotate(-6deg);
}
.brand-bleed--seam-r {
  top: -12%;
  right: clamp(-40px, -4vw, -10px);
  transform: rotate(8deg) scaleX(-1);
}
.brand-bleed--corner {
  bottom: -12%;
  right: -6%;
  transform: rotate(-10deg);
}

/* ── smooth section-to-section fade, used at theme-change seams ── */
.section-fade-top {
  position: relative;
  isolation: isolate;
}
.section-fade-top::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto 0;
  height: clamp(90px, 14vw, 200px);
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.section-fade-top > .wrap { position: relative; z-index: 1; }

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* nothing may widen the page: the root clips sideways overflow for the viewport,
     body clips its own box so phones never zoom out or pan sideways.
     clip (not hidden) keeps sticky elements working. */
  overflow-x: hidden;
  overflow-x: clip;
  /* in-page links land below the fixed 68px nav, not under it */
  scroll-padding-top: 84px;
}
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
/* Elms Sans has proportional figures only: live readouts wrap each digit in
   .fig so a changing number keeps its width and never jitters. 1ch is the width
   of "0", the widest digit in both brand fonts (0.6em in Elms Sans, 1.08em in Boldonse).
   The negative margin is zero in Elms Sans and pulls Boldonse cells in, where only the
   oval "0" is that wide and the rest sit near 0.7em. */
.fig { display: inline-block; width: 1ch; margin-inline: calc((0.6em - 1ch) / 6); text-align: center; font-style: normal; }
body {
  overflow-x: clip;
  font-weight: 400;
  cursor: none;
}
@media (pointer: coarse) {
  body { cursor: auto; }
  #cursor-dot, #cursor-ring { display: none !important; }
}
/* touch screens: real finger targets, and form fields at 16px so iOS never zooms in on focus */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; padding: 0; }
input, textarea { font: inherit; cursor: none; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ───────── custom cursor ───────── */
#cursor-dot, #cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  top: 0; left: 0;
  border-radius: 50%;
  transform: translate3d(-100px, -100px, 0);
}
#cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  margin: -3px 0 0 -3px;
}
#cursor-ring {
  width: 28px;
  height: 28px;
  border: 1px solid var(--accent);
  margin: -14px 0 0 -14px;
  transition: width 0.2s, height 0.2s, margin 0.2s, background 0.2s, border-radius 0.2s;
}
.cursor-grow #cursor-ring {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: var(--accent-soft);
}
.cursor-text #cursor-ring {
  width: 4px;
  height: 22px;
  margin: -11px 0 0 -2px;
  border-radius: 1px;
  background: var(--accent);
}

/* ───────── layout primitives ───────── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  width: 100%;
}
.mono {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.tick {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.tick .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--accent);
}

/* ───────── nav ───────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  height: 68px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 15px;
}
.logo-mark { height: 24px; width: auto; display: block; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-links {
  display: flex;
  gap: 28px;
  justify-content: center;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--fg-dim);
}
.nav-links a { transition: color 0.2s; position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--fg); }
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.25s;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
}
.status-pill .blip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
  animation: blip 2s ease-in-out infinite;
}
@keyframes blip { 50% { opacity: 0.4; } }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-family: var(--mono);
  border: 1px solid var(--line);
  transition: all 0.2s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:hover { border-color: var(--fg-dim); background: var(--bg-elev); }
.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 500;
}
.btn-accent:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.btn .arrow { transition: transform 0.2s; display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }
.nav-burger { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 100px; border: 1px solid var(--line); }
@media (max-width: 980px) {
  .nav-links, .status-pill { display: none; }
  .nav-burger { display: inline-flex; }
}
/* the Contact button stands in for the Contact link; the link only shows in the phone menu,
   where the button is hidden */
.nav-links .nav-contact-link { display: none; }
@media (max-width: 560px) {
  .btn-cta-desktop { display: none; }
  .nav-links .nav-contact-link { display: revert; }
}

/* ───────── hero ───────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 68px;
  overflow: hidden;
  isolation: isolate;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 30% 45%, transparent 0%, rgba(10, 8, 28, 0.45) 100%),
    linear-gradient(180deg, transparent 60%, var(--bg) 100%);
}
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 251, 250, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 251, 250, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 75%);
}
.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - 68px);
  padding-top: clamp(36px, 7vh, 80px);
  padding-bottom: 56px;
}
.hero-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: clamp(40px, 8vh, 80px);
}
.hero-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  text-align: right;
  line-height: 1.75;
}
.hero-meta .key { color: var(--fg-mute); }
.hero-h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(48px, 9.4vw, 168px);
  line-height: 1.2;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 14ch;
}
.hero-h1 .accent-word {
  color: var(--accent);
  font-style: oblique -10deg;
  font-weight: 400;
}
.hero-h1 .stroke {
  color: transparent;
  -webkit-text-stroke: 1px var(--fg);
}
.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6vw, 80px);
  align-items: end;
}
.hero-sub {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 44ch;
}
.hero-sub strong { color: var(--fg); font-weight: 500; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero-actions-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-counter { font-family: var(--mono); font-size: 12px; color: var(--fg-mute); display: flex; gap: 28px; flex-wrap: wrap; }
.hero-counter strong { color: var(--fg); font-weight: 500; display: block; font-size: 22px; font-family: var(--display); letter-spacing: -0.02em; }
.scroll-cue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--fg-mute);
  display: flex; align-items: center; gap: 10px;
  z-index: 3;
}
.scroll-cue .line { width: 1px; height: 32px; background: linear-gradient(180deg, var(--fg-mute), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0%, 100% { transform: scaleY(1); transform-origin: top; } 50% { transform: scaleY(0.3); transform-origin: top; } }
@media (max-width: 720px) {
  .hero-top { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .hero-meta { text-align: left; display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 2px 20px; line-height: 1.6; }
  .hero-bottom { grid-template-columns: 1fr; gap: 28px; }
  .hero-content { padding-bottom: 40px; }
  .hero-counter { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 18px; }
  .hero-counter strong { font-size: 20px; }
  .hero-counter span { display: block; max-width: 12ch; line-height: 1.35; margin-top: 2px; }
  .scroll-cue { display: none; }
}

/* ───────── ticker ───────── */
.ticker {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  overflow: hidden;
  padding: 22px 0;
  position: relative;
}
.ticker-track {
  display: flex;
  gap: 56px;
  animation: tickerScroll 80s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.ticker-item {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ticker-item .glyph { color: var(--accent); font-size: 16px; line-height: 1; }
@keyframes tickerScroll { to { transform: translateX(-50%); } }

/* ───────── descent: orbit to ground (scroll-driven, src/descent-sunrise.js) ─────────
   The section is tall; the stage sticks for its whole length while the canvas
   camera falls from 48,000 km to Larnaca. Brand colors only, with alpha. */
.descent {
  position: relative;
  z-index: 1;
  height: 520vh;
  height: 520svh;
  background: var(--midnight);
}
.descent-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.descent-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* the WebGL relief under the 2D layer (src/descent-sunrise.js adds it when WebGL is available) */
.descent-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.descent-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 16vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 251, 250, 0), var(--cloud));
  opacity: 0;
  transition: opacity 0.8s ease;
}
.descent.is-landed .descent-stage::after { opacity: 1; }

.descent-hud {
  --dh-fg: var(--cloud);
  --dh-dim: rgba(255, 251, 250, 0.7);
  --dh-mute: rgba(255, 251, 250, 0.45);
  --dh-line: rgba(255, 251, 250, 0.18);
  --dh-accent: var(--ember);
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--dh-fg);
}
/* each zone flips to light type when the canvas behind it turns light */
.descent.lt-top :is(.dh-head, .dh-alt, .dh-scrim--top),
.descent.lt-cap :is(.dh-captions, .dh-scrim--cap),
.descent.lt-right :is(.dh-tape, .dh-telemetry) {
  --dh-fg: var(--midnight);
  --dh-dim: rgba(10, 8, 28, 0.72);
  --dh-mute: rgba(10, 8, 28, 0.48);
  --dh-line: rgba(10, 8, 28, 0.16);
  --dh-accent: var(--cobalt);
}
.descent-hud > * { color: var(--dh-fg); }
/* soft scrims keep the type readable over the scene, dark and light layers crossfade */
.dh-scrim { position: absolute; inset: 0; z-index: -1; }
.dh-scrim::before,
.dh-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 0.7s ease;
}
.dh-scrim::after { opacity: 0; }
.dh-scrim--top::before { background: radial-gradient(38% 34% at 0% 0%, rgba(10, 8, 28, 0.55), rgba(10, 8, 28, 0) 72%); }
.dh-scrim--top::after { background: radial-gradient(38% 34% at 0% 0%, rgba(255, 251, 250, 0.85), rgba(255, 251, 250, 0) 72%); }
.dh-scrim--cap::before { background: radial-gradient(55% 48% at 0% 100%, rgba(10, 8, 28, 0.72), rgba(10, 8, 28, 0) 72%); }
.dh-scrim--cap::after { background: radial-gradient(48% 40% at 0% 100%, rgba(255, 251, 250, 0.8), rgba(255, 251, 250, 0) 70%); }
.descent.lt-top .dh-scrim--top::before,
.descent.lt-cap .dh-scrim--cap::before { opacity: 0; }
.descent.lt-top .dh-scrim--top::after,
.descent.lt-cap .dh-scrim--cap::after { opacity: 1; }
.descent-hud :is(.dh-coords, .dh-label, .dh-readout, .dh-readout small, .dh-layer, .dh-cap-eyebrow, .dh-cap h2, .dh-cap h2 em, .dh-cap p, .dh-stop, .dh-telemetry span, .dh-telemetry strong) {
  transition: color 0.6s ease;
}
.descent-hud .tick { color: var(--dh-mute); transition: color 0.6s ease; }
.descent-hud .tick .dot { background: var(--dh-accent); box-shadow: 0 0 12px var(--dh-accent); transition: background 0.6s ease, box-shadow 0.6s ease; }

.dh-head {
  position: absolute;
  top: calc(68px + 26px);
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.dh-coords { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--dh-dim); font-variant-numeric: tabular-nums; }
.dh-alt { position: absolute; top: calc(68px + 70px); left: var(--pad-x); }
.dh-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dh-mute); }
.dh-readout {
  font-family: var(--mono);
  font-weight: 300;
  font-size: clamp(40px, 5.8vw, 92px);
  letter-spacing: -0.045em;
  line-height: 1;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dh-readout small { font-size: 0.3em; font-weight: 400; letter-spacing: 0.04em; margin-left: 0.4em; color: var(--dh-dim); }
.dh-layer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dh-accent);
}
.dh-layer::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* altimeter tape: fixed pointer, the scale slides past it */
.dh-tape {
  position: absolute;
  right: var(--pad-x);
  top: 46%;
  width: 190px;
  height: min(44vh, 440px);
  transform: translateY(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--midnight) 24%, var(--midnight) 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, var(--midnight) 24%, var(--midnight) 76%, transparent);
}
.dh-tape-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-right: 1px solid var(--dh-line);
  background: repeating-linear-gradient(to bottom, var(--dh-line) 0 1px, transparent 1px 15px) right top / 7px 100% no-repeat;
  will-change: transform;
  transition: border-color 0.6s ease;
}
.dh-stop {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dh-mute);
  white-space: nowrap;
}
.dh-stop b { font-weight: 500; color: var(--dh-dim); font-variant-numeric: tabular-nums; }
.dh-stop::after { content: ""; width: 14px; height: 1px; background: var(--dh-dim); }
.dh-tape-pointer {
  position: absolute;
  top: 50%;
  right: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, var(--dh-accent), transparent);
}
.dh-tape-pointer::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -5px;
  border: 5px solid transparent;
  border-right: 7px solid var(--dh-accent);
  border-left: 0;
}

/* chapter captions: all five are real text, scroll decides which one shows */
.dh-captions {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(36px, 9vh, 96px);
  width: min(600px, calc(100% - 2 * var(--pad-x)));
  height: 0;
}
.dh-cap { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; will-change: opacity, transform; }
.dh-cap-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dh-accent); }
.dh-cap h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.035em;
  margin: 14px 0;
  color: var(--dh-fg);
}
.dh-cap h2 em { font-style: oblique -10deg; color: var(--dh-accent); }
.dh-cap p { margin: 0; max-width: 44ch; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; color: var(--dh-dim); }

.dh-telemetry {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(36px, 9vh, 96px);
  display: grid;
  gap: 14px;
  justify-items: end;
  text-align: right;
  font-family: var(--mono);
}
.dh-telemetry span { display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dh-mute); }
.dh-telemetry strong { display: block; margin-top: 4px; font-weight: 400; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--dh-fg); }
.dh-progress { width: 190px; height: 1px; background: var(--dh-line); }
.dh-progress span { display: block; height: 100%; background: var(--dh-accent); transform-origin: left center; transform: scaleX(0); }

@media (max-width: 720px) {
  .descent { height: 440vh; height: 440svh; }
  .dh-tape, .dh-coords { display: none; }
  .dh-head { top: calc(68px + 16px); }
  .dh-alt { top: calc(68px + 46px); }
  .dh-captions { bottom: 28px; }
  .dh-telemetry { top: calc(68px + 52px); bottom: auto; }
  .dh-telemetry .dh-progress { width: 96px; }
  .dh-telemetry strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .descent { height: 340vh; height: 340svh; }
}

/* ───────── section base ───────── */
.section { padding: clamp(72px, 8vw, 112px) 0; position: relative; }
.section-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* every section label (and the CTA and footer labels) sits between two signal meters that hang
   from one top line: four bars 3px wide, 2px apart, the two tall ones in the accent. This one,
   in front, has the tallest bar first; the one after the label (further down) is its mirror */
.section-eyebrow::before, .cta-eyebrow::before, .fsig-kicker::before, .sp-section-head::before {
  content: "";
  flex: none;
  width: 18px;
  height: 13px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 3px 13px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 5px 0 / 3px 10px no-repeat,
    linear-gradient(var(--fg-mute), var(--fg-mute)) 10px 0 / 3px 7px no-repeat,
    linear-gradient(var(--fg-mute), var(--fg-mute)) 15px 0 / 3px 4px no-repeat;
}
.section-title {
  font-family: var(--display);
  /* sized so a title sits on two lines beside its intro, not four lines above an empty column */
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin: 18px 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.section-title em {
  font-style: oblique -10deg;
  font-weight: 400;
  color: var(--accent);
}
.section-intro {
  color: var(--fg-dim);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  max-width: 50ch;
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  margin-bottom: clamp(40px, 4.5vw, 64px);
  align-items: flex-end;
}
/* the intro ends on the title's last line */
.section-head .section-intro { margin: 0; }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; } }

/* ───────── transmission index (services) ───────── */
.tx {
  border-top: 1px solid var(--line);
  position: relative;
}
.tx-meta {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.tx-meta .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}
.tx-meta .live::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: blip 1.4s ease-in-out infinite;
}
.tx-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 640px;
}
.tx-channels {
  border-right: 1px solid var(--line);
}
.tx-row {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 2.3vw, 28px) clamp(8px, 1.5vw, 18px) clamp(20px, 2.3vw, 28px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  cursor: none;
  transition: background 0.3s, padding 0.3s;
  overflow: hidden;
}
.tx-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(.5,.0,.1,1);
}
.tx-row.is-active::before { transform: scaleY(1); }
.tx-row.is-active { background: var(--accent-faint); }
.tx-row:hover .tx-row-name { transform: translateX(8px); }
.tx-row-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
  padding-left: 14px;
}
.tx-row.is-active .tx-row-num { color: var(--accent); }
.tx-row-name {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: transform 0.3s;
}
.tx-row-name small {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
}
.tx-row-bars { display: inline-flex; gap: 2px; align-items: end; }
.tx-row-bars span {
  width: 3px;
  background: var(--fg-mute);
}
.tx-row-bars span:nth-child(1) { height: 4px; }
.tx-row-bars span:nth-child(2) { height: 7px; }
.tx-row-bars span:nth-child(3) { height: 10px; }
.tx-row-bars span:nth-child(4) { height: 13px; }
.tx-row-bars span:nth-child(5) { height: 16px; }
.tx-row.is-active .tx-row-bars span { background: var(--accent); }
.tx-row-arrow {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: all 0.3s;
}
.tx-row.is-active .tx-row-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: rotate(0deg);
}
.tx-stage {
  padding: clamp(28px, 3vw, 48px);
  background: var(--bg-deep);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 28px;
  position: relative;
  overflow: hidden;
}
.tx-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, var(--accent-soft), transparent 50%),
    linear-gradient(180deg, transparent 60%, var(--bg-deep) 100%);
  pointer-events: none;
}
.tx-stage-canvas {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.tx-stage-info { position: relative; z-index: 1; }
.tx-stage-info h3 {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  line-height: 1.2;
}
.tx-stage-info p {
  color: var(--fg-dim);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 48ch;
}
.tx-stage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tx-stage-tags li {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--fg-dim);
}
.tx-stage-readout {
  position: absolute;
  top: 24px; right: 24px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-mute);
  text-align: right;
  z-index: 2;
  line-height: 1.7;
}
.tx-stage-readout strong { color: var(--accent); font-weight: 500; }
/* the visual fills the stage width (service-visuals.js caps it inline at 480px) */
.tx-stage-canvas svg { width: 100%; max-width: 640px !important; height: auto; }
/* desktop: the stage is a screen-sized panel that stays in view beside the eight rows, so the
   visual is always on screen while you move down the list, with no dead space around it */
@media (min-width: 901px) {
  .tx-stage {
    position: sticky;
    top: 88px;
    align-self: start;
    height: min(740px, calc(100vh - 112px));
    height: min(740px, calc(100svh - 112px));
    min-height: 520px;
  }
}
@media (max-width: 900px) {
  .tx-grid { grid-template-columns: 1fr; min-height: 0; }
  .tx-channels { border-right: 0; border-bottom: 1px solid var(--line); }
  .tx-stage { min-height: 460px; grid-template-rows: auto 1fr auto; gap: 18px; }
  /* phones and tablets: the readout gets its own row above the visual instead of sitting on it */
  .tx-stage-readout { position: relative; top: auto; right: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; text-align: left; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .tx-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
  .tx-row-num { padding-left: 10px; }
  .tx-row-bars { display: none; }
  .tx-row-arrow { width: 36px; height: 36px; }
  .tx-stage { min-height: 400px; padding: 22px 18px; }
  .tx-stage-canvas { min-height: 200px; }
  .tx-meta { flex-wrap: wrap; gap: 6px 16px; }
}

/* ───────── network / live routing ───────── */
.net {
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}
.net-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-deep);
}
.net-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.net-map svg { display: block; width: 100%; height: 100%; }
.net-map-overlay {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.net-map-overlay strong { color: var(--accent); }
.net-node-card {
  position: absolute;
  background: var(--bg-deep);
  border: 1px solid var(--accent);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg);
  pointer-events: none;
  transform: translate(8px, -50%);
  white-space: nowrap;
  z-index: 4;
  border-radius: 3px;
}
.net-node-card strong { color: var(--accent); font-weight: 500; }
.net-node-card .row { display: flex; gap: 12px; justify-content: space-between; }
.net-node-card .row span:first-child { color: var(--fg-mute); }
.net-table {
  display: flex;
  flex-direction: column;
}
.net-table-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.net-table-head strong { color: var(--fg); font-weight: 500; }
.net-rows {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 40px;
  flex: 1;
  align-content: start;
}
.net-rows > div {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-dim);
  display: flex;
  align-items: center;
}
.net-rows .nr-time { color: var(--fg-mute); font-size: 10.5px; }
.net-rows .nr-dest { color: var(--fg); }
.net-rows .nr-status {
  color: var(--ok);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.1em;
}
.net-rows .nr-status.warn { color: var(--accent); }
.net-rows .nr-status.fail { color: var(--ember); }
@media (max-width: 900px) {
  .net-grid { grid-template-columns: 1fr; }
  .net-map { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ───────── metrics oscilloscope ───────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.metric {
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 14px;
  align-content: space-between;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}
.metric .lbl {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.metric .num {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}
.metric .num em { font-style: oblique -10deg; color: var(--accent); }
.metric .num .unit {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg-mute);
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: 0;
}
.metric .wave {
  display: block;
  width: 100%;
  height: 28px;
  opacity: 0.9;
}
/* an odd count leaves a short last row: the last cell stretches to close it */
@media (min-width: 901px) {
  .metric:last-child:nth-child(4n + 3) { grid-column: span 2; }
  .metric:last-child:nth-child(4n + 2) { grid-column: span 3; }
}
@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:last-child:nth-child(odd) { grid-column: span 2; }
}
/* phones: two narrow cells, so the figure scales with the cell ("99.999%" is the widest) */
@media (max-width: 560px) {
  .metric { padding: 18px 14px; min-height: 0; gap: 10px; }
  .metric .num { font-size: min(36px, calc((100vw - 2 * var(--pad-x)) / 2 / 6.2)); }
  .metric .num .unit { font-size: 12px; margin-left: 3px; }
  /* every label reserves two lines, so the figures line up across each row */
  .metric .lbl { font-size: 10px; letter-spacing: 0.12em; line-height: 1.35; min-height: 2.7em; }
}
@media (max-width: 360px) {
  .metric .lbl { letter-spacing: 0.06em; min-height: 4.05em; }  /* the narrowest phones wrap the longest label to three lines */
}

/* ───────── industries carousel ───────── */
.ind {
  position: relative;
  border-top: 1px solid var(--line);
}
/* the stage: the counter in its own column, a divider between it and the slides */
.ind-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  padding: clamp(40px, 6vw, 80px) 0;
  touch-action: pan-y;  /* sideways swipes change the slide, vertical ones still scroll the page */
}
.ind-counter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-right: clamp(24px, 4vw, 64px);
  font-family: var(--display);
  font-size: clamp(96px, 11vw, 176px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--accent);
}
.ind-counter .cnt-num { display: inline-block; min-width: 1.32em; line-height: 1; }  /* every number takes the same width, so nothing shifts */
.ind-counter .of {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 400;
  color: var(--fg-mute);
  letter-spacing: 0.14em;
}
.ind-content {
  display: grid;
  grid-template-rows: auto auto;
  align-content: space-between;
  gap: 36px;
  min-width: 0;
  padding-left: clamp(24px, 4vw, 64px);
  border-left: 1px solid var(--line);
}
/* every slide sits in the same grid cell, so the area is always as tall as the longest one */
.ind-slides { display: grid; }
.ind-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s, transform 0.4s, visibility 0s linear 0.4s;
}
.ind-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s 0.1s, transform 0.6s cubic-bezier(.2, .7, .2, 1) 0.1s;
}
.ind-slide h3 {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin: 0 0 24px;
  max-width: 16ch;
}
.ind-slide h3 em { font-style: oblique -10deg; font-weight: 400; color: var(--accent); }
.ind-slide p {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 56ch;
  margin: 0 0 28px;
}
.ind-slide ul {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ind-slide ul li {
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--fg-dim);
  letter-spacing: 0.05em;
}
.ind-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
/* indicators: a thin bar you can see, inside a 32px tall button you can actually hit.
   The fill is driven by src/home.js (--p, 0 to 1), so it pauses with the carousel. */
.ind-progress {
  flex: 1;
  display: flex;
  gap: 6px;
}
.ind-progress button {
  flex: 1;
  height: 32px;
  position: relative;
}
.ind-progress i {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  transition: background 0.2s, height 0.2s, margin 0.2s;
}
.ind-progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}
.ind-progress button:hover i, .ind-progress button:focus-visible i { background: var(--fg-mute); height: 5px; margin-top: -2.5px; }
.ind-stage.is-paused .ind-progress .is-active i::after { opacity: 0.55; }
.ind-arrows {
  display: inline-flex;
  gap: 8px;
}
.ind-arrows button {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.ind-arrows button:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 980px) {
  .ind .section-head { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* phones: the indicators get the full width on their own row (44px tall, no gaps between
     targets), the arrows sit underneath on the right */
  .ind-nav { flex-wrap: wrap; row-gap: 8px; padding-top: 14px; }
  .ind-progress { flex: 1 1 100%; gap: 0; }
  .ind-progress button { height: 44px; }
  .ind-progress i { left: 3px; right: 3px; }
  .ind-arrows { margin-left: auto; }
}
@media (max-width: 800px) {
  .ind-stage { grid-template-columns: 1fr; gap: 20px; padding: 24px 0 32px; }
  .ind-counter { flex-direction: row; align-items: flex-start; gap: 10px; padding-right: 0; font-size: clamp(72px, 22vw, 140px); }
  .ind-counter .of { margin-top: 0.6em; font-size: 13px; }
  .ind-content { padding-left: 0; border-left: 0; gap: 28px; }
  .ind-arrows button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ind-slide, .ind-slide.is-active { transform: none; transition: opacity 0.2s, visibility 0s; }
}

/* ───────── eSIM (3d card) ───────── */
.esim {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 85% 30%, rgba(229, 88, 44, 0.07), transparent 50%),
    var(--bg);
  border-top: 1px solid var(--line);
}
.esim-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.esim-copy h3 {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin: 18px 0 24px;
  text-wrap: balance;
}
.esim-copy h3 em { font-style: oblique -10deg; font-weight: 400; color: var(--accent); }
.esim-copy p { color: var(--fg-dim); font-size: 16px; line-height: 1.6; max-width: 50ch; }
.esim-bullets {
  margin: 32px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.esim-bullets li {
  background: var(--bg);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--fg);
  transition: background 0.2s;
}
.esim-bullets li:hover { background: var(--bg-elev); }
.esim-bullets li .ix {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.esim-bullets li span.s {
  display: block;
  color: var(--fg-dim);
  margin-top: 2px;
  font-size: 12.5px;
}
.esim-bullets li .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
  animation: blip 2s ease-in-out infinite;
}

/* eROAM, TDNT's own travel eSIM app: a linked proof card on the home page and the eSIM page.
   The mark is eROAM's own logo (assets/logos/eroam-logo.svg); the shadow follows its shape. */
.eroam-mark {
  flex: none;
  display: block;
  width: auto; height: 52px;
  filter: drop-shadow(0 6px 8px rgba(2, 121, 255, 0.22));
}
.eroam-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: -12px 0 28px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cobalt) 4%, var(--bg));
  color: var(--fg);
  transition: border-color 0.3s, transform 0.4s cubic-bezier(.2, .7, .2, 1), box-shadow 0.3s;
}
.eroam-card:hover { border-color: var(--cobalt); transform: translateY(-2px); box-shadow: 0 16px 32px -24px rgba(0, 51, 153, 0.5); }
.eroam-body { display: grid; gap: 3px; min-width: 0; }
.eroam-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }
.eroam-body strong { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: -0.01em; line-height: 1.42; }
.eroam-text { font-size: 13px; line-height: 1.5; color: var(--fg-dim); }
.eroam-go { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt); white-space: nowrap; }
.eroam-go .arrow { display: inline-block; transition: transform 0.25s; }
.eroam-card:hover .eroam-go .arrow { transform: translate(2px, -2px); }
@media (max-width: 560px) {
  .eroam-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
  .eroam-mark { width: auto; height: 44px; }
  .eroam-go { grid-column: 2; }
}
/* eSIM page: eROAM in production */
.sp-eroam {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: 8px;
}
.sp-eroam-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sp-eroam-brand b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; line-height: 1.3; }
.sp-eroam-brand small { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.sp-eroam-lede { margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--fg-dim); max-width: 58ch; }
.sp-eroam-steps {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.sp-eroam-steps li { display: grid; gap: 6px; padding: 14px; background: var(--bg); font-size: 13px; line-height: 1.4; color: var(--fg); }
.sp-eroam-steps li b { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.12em; color: var(--ember); }
.sp-eroam-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sp-eroam-facts > div {
  display: grid; gap: 6px; align-content: start;
  padding: 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
  transition: border-color 0.3s, transform 0.3s;
}
.sp-eroam-facts > div:hover { border-color: var(--cobalt); transform: translateY(-2px); }
.sp-eroam-facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.sp-eroam-facts dd { margin: 0; font-family: var(--display); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -0.02em; color: var(--cobalt); }
.sp-eroam-facts dd.sm { font-size: clamp(20px, 1.8vw, 24px); }
.sp-eroam-facts span { font-size: 12.5px; line-height: 1.5; color: var(--fg-dim); }
@media (max-width: 900px) { .sp-eroam { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .sp-eroam-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-eroam-facts dd { font-size: 24px; }
}
/* ePOC, TDNT's own AI-driven CPaaS: its wordmark (assets/logos/epoc-wordmark.svg) stands on its own, with no typed name beside it */
.epoc-mark { flex: none; display: block; width: 112px; height: 28px; }
@media (max-width: 560px) { .epoc-mark { width: 88px; height: 22px; } }

/* CPaaS page: ePOC in production, one framed showcase. Story on the left, the numbers on
   the right in cobalt, both light like every section after the banner; source noted once. */
.epoc-show {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cobalt) 3%, var(--bg));
  box-shadow: 0 30px 60px -48px rgba(0, 51, 153, 0.45);
}
.epoc-show-main { padding: clamp(24px, 3.6vw, 52px); }
.epoc-show-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.epoc-show-logo { display: block; width: 200px; height: 50px; }
.epoc-live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 100px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim);
}
.epoc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); animation: epocLive 2.4s ease-in-out infinite; }
@keyframes epocLive { 50% { opacity: 0.35; transform: scale(0.7); } }
.epoc-show-lede { margin: 0 0 34px; font-size: 15.5px; line-height: 1.7; color: var(--fg-dim); max-width: 56ch; }
.epoc-show-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.epoc-show-main > .epoc-show-label { margin-bottom: 16px; }
.epoc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.epoc-steps li { position: relative; padding-top: 24px; font-size: 13.5px; line-height: 1.45; color: var(--fg); }
.epoc-steps li::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--cobalt); background: var(--bg);
}
.epoc-steps li::after { content: ""; position: absolute; top: 5px; left: 17px; right: -6px; height: 1px; background: var(--line); }
.epoc-steps li:last-child::before { background: var(--cobalt); }
.epoc-steps li:last-child::after { display: none; }
.epoc-steps span { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ember); }
.epoc-show-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.epoc-show-stats {
  display: flex; flex-direction: column;
  padding: clamp(24px, 3.6vw, 52px);
  background: var(--bg);
  border-left: 1px solid var(--line);
}
.epoc-show-stats-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
/* echo of the pill and dot in ePOC's own logo */
.epoc-orbit {
  position: relative; display: block; width: 92px; height: 42px;
  border: 1.5px solid color-mix(in srgb, var(--cobalt) 35%, var(--cloud)); border-radius: 100px;
}
.epoc-orbit span {
  position: absolute; top: 50%; left: 7px; width: 25px; height: 25px; margin-top: -12.5px;
  border-radius: 50%; background: var(--cobalt);
  animation: epocOrbit 3.6s ease-in-out infinite alternate;
}
@keyframes epocOrbit { to { transform: translateX(52px); } }
.epoc-show-stats dl { margin: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.epoc-show-stats dl > div { padding: 22px 0; border-top: 1px solid var(--line); }
.epoc-show-stats dl > div:nth-child(odd) { padding-right: 20px; }
.epoc-show-stats dl > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.epoc-show-stats dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.epoc-show-stats dd { margin: 8px 0 0; font-family: var(--display); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.2; letter-spacing: -0.02em; color: var(--cobalt); }
.epoc-src { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-mute); }
@media (max-width: 960px) {
  .epoc-show { grid-template-columns: minmax(0, 1fr); }
  .epoc-show-stats { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .epoc-show-logo { width: 160px; height: 40px; }
  .epoc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .epoc-steps li:nth-child(2)::after { display: none; }
  .epoc-show-stats dd { font-size: 26px; }
  .epoc-show-cta .btn { flex: 1 1 auto; justify-content: center; }
}
/* IoT page: Tdoxy, TDNT's mobile proxy, reuses the same showcase with specs in place of numbers */
.tdoxy-brand { display: inline-flex; align-items: center; gap: 14px; }
/* the logo carries the name itself, so it stands alone as the card's title */
.tdoxy-mark { display: block; flex: none; width: auto; height: clamp(34px, 3vw, 44px); }
.tdoxy-uses { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tdoxy-uses li { padding: 7px 13px; border: 1px solid var(--line); border-radius: 100px; background: var(--bg); font-size: 12.5px; line-height: 1.4; color: var(--fg-dim); }
.epoc-show-stats.is-specs dd { font-family: var(--sans); font-weight: 500; font-size: 16.5px; line-height: 1.45; letter-spacing: 0; color: var(--fg); }
.epoc-show-stats dl > div.wide { grid-column: 1 / -1; padding-left: 0; padding-right: 0; border-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .epoc-live i, .epoc-orbit span { animation: none; }
}
/* AI and development: the in-house products, as linked proof cards */
.sp-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.sp-products .eroam-card { margin: 0; align-items: start; }
@media (max-width: 900px) { .sp-products { grid-template-columns: minmax(0, 1fr); } }

.esim-card-wrap {
  perspective: 1200px;
  display: flex;
  justify-content: center;
}
.esim-card {
  width: min(440px, 100%);
  aspect-ratio: 1.586 / 1;
  border-radius: 18px;
  position: relative;
  background:
    linear-gradient(135deg, var(--dark-card) 0%, var(--midnight) 100%);
  border: 1px solid var(--line);
  padding: clamp(20px, 2.5vw, 28px);
  overflow: hidden;
  box-shadow:
    0 40px 80px -30px rgba(10, 8, 28, 0.9),
    0 0 0 1px rgba(229, 88, 44, 0.05),
    inset 0 1px 0 rgba(255, 251, 250, 0.04);
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.esim-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 60%, rgba(229, 88, 44, 0.22), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255, 251, 250, 0.018) 0 2px, transparent 2px 18px);
  pointer-events: none;
}
.esim-card .gloss {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 30%), rgba(255, 251, 250, 0.06), transparent 40%);
  pointer-events: none;
  transition: opacity 0.3s;
}
/* an eSIM has no physical chip, so the card shows only the profile brand, top right */
.esim-card-row {
  display: flex; justify-content: flex-end; align-items: flex-start;
  position: relative; z-index: 2;
}
.esim-brand {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--fg-dim); text-align: right;
  transform: translateZ(30px);
}
.esim-brand strong {
  color: var(--fg); display: block; font-size: 15px;
  letter-spacing: 0.04em; margin-bottom: 2px;
  font-family: var(--display); font-weight: 400;
}
.esim-num {
  font-family: var(--mono);
  font-size: clamp(14px, 1.5vw, 19px);
  letter-spacing: 0.16em;
  color: var(--fg);
  position: relative; z-index: 2;
  align-self: center;
  transform: translateZ(40px);
}
.esim-footer {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  color: var(--fg-mute); letter-spacing: 0.12em;
  position: relative; z-index: 2;
  transform: translateZ(20px);
}
@media (max-width: 820px) {
  .esim-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .esim-bullets li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .esim-card { padding: 18px; border-radius: 14px; }
  .esim-num { font-size: clamp(12px, 3.8vw, 16px); letter-spacing: 0.1em; }
  .esim-footer { font-size: 10px; letter-spacing: 0.04em; gap: 8px; }
}

/* ───────── security terminal ───────── */
.sec {
  position: relative;
  border-top: 1px solid var(--line);
}
.sec-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.sec-terminal {
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 460px;
}
.sec-term-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px;
  color: var(--fg-mute); letter-spacing: 0.14em; text-transform: uppercase;
}
.sec-term-lights { display: inline-flex; gap: 6px; }
.sec-term-lights span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line);
}
.sec-term-lights span.r { background: rgba(229, 88, 44, 0.55); }
.sec-term-lights span.y { background: rgba(229, 88, 44, 0.25); }
.sec-term-lights span.g { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.sec-term-body {
  padding: 18px 20px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-dim);
  overflow: hidden;
  position: relative;
}
.sec-line {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  white-space: nowrap;
  overflow: hidden;
}
.sec-line .ts { color: var(--fg-mute); }
.sec-line .ok { color: var(--ok); }
.sec-line .warn { color: var(--accent); }
.sec-line .info { color: var(--signal); }
.sec-term-body::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--bg-deep));
  pointer-events: none;
}
.sec-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--line);
  gap: 1px;
}
.sec-feat {
  background: var(--bg);
  padding: 24px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.sec-feat .ico {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-line);
  color: var(--accent);
  border-radius: 6px;
  margin-bottom: 6px;
}
.sec-feat h5 {
  font-family: var(--display);
  font-size: 17px; font-weight: 500;
  margin: 0; letter-spacing: -0.01em;
}
.sec-feat p {
  margin: 0; font-size: 13px; color: var(--fg-dim); line-height: 1.55;
}
@media (max-width: 900px) {
  .sec-grid { grid-template-columns: 1fr; }
  .sec-terminal { border-right: 0; border-bottom: 1px solid var(--line); }
  .sec-stack { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; }
}
@media (max-width: 560px) {
  .sec-stack { padding: 20px 14px; }
  .sec-layer { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
  .sec-feat { padding: 20px 18px; }
}
@media (max-width: 540px) {
  .sec-features { grid-template-columns: 1fr; }
}

/* ───────── CTA ───────── */
.cta {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  overflow: hidden;
}
.cta-wave {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
}
.cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: clamp(72px, 8vw, 112px) var(--pad-x);
  text-align: center;
  align-items: center;
  justify-items: center;
}
.cta-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
/* after every label, the mirror image: shortest bar first, also hanging from the top line */
.section-eyebrow::after, .cta-eyebrow::after, .fsig-kicker::after, .sp-section-head::after {
  content: "";
  flex: none;
  width: 18px;
  height: 13px;
  background:
    linear-gradient(var(--fg-mute), var(--fg-mute)) 0 0 / 3px 4px no-repeat,
    linear-gradient(var(--fg-mute), var(--fg-mute)) 5px 0 / 3px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 10px 0 / 3px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 15px 0 / 3px 13px no-repeat;
}
.cta-title {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 112px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.cta-title em { font-style: oblique -10deg; font-weight: 400; color: var(--accent); }
.cta-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px;
  background: var(--bg-elev);
  width: min(480px, 100%);
}
.cta-form input {
  background: transparent;
  border: 0; outline: 0;
  color: var(--fg);
  font-family: var(--sans);
  padding: 0 18px;
  font-size: 14px;
  flex: 1;
  min-width: 0;
}
.cta-form input::placeholder { color: var(--fg-mute); }
.cta-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.14em;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-meta strong { color: var(--fg); font-weight: 500; }
@media (max-width: 480px) {
  /* phones: the email field and its button stack inside one rounded panel */
  .cta-inner { gap: 28px; }
  .cta-eyebrow { font-size: 10px; letter-spacing: 0.14em; gap: 10px; }
  .cta-title { font-size: min(40px, calc((100vw - 2 * var(--pad-x)) / 8.6)); }
  .cta-form { flex-direction: column; border-radius: 18px; padding: 8px; }
  .cta-form input { min-height: 46px; padding: 0 12px; }
  .cta-form .btn { justify-content: center; }
  .cta-meta { gap: 10px 20px; }
}

/* ───────── footer ───────── */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: clamp(56px, 7vw, 96px) 0 28px;
  position: relative;
  overflow: hidden;
}
.footer .wrap { position: relative; z-index: 1; }

/* ── footer sign-off (src/footer-sign.js): a full-bleed band at the top of every footer,
   in one of six versions set per page with data-fsig. The submark sits in .fsig-markbox,
   huge and cropped by the page edge; the SVG, node and loader versions all use that box. ── */
.fsig {
  --fsig-h: clamp(400px, 40vw, 600px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
  min-height: var(--fsig-h);
  margin: calc(-1 * clamp(56px, 7vw, 96px)) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}
.fsig-fallback { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--pad-x); font-family: var(--display); font-size: clamp(28px, 3.4vw, 54px); line-height: 1.2; letter-spacing: -0.035em; }
.fsig-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); pointer-events: none; }
.fsig-inner a, .fsig-inner button { pointer-events: auto; }
.fsig-canvas { position: absolute; inset: 0; z-index: 0; display: block; }
.fsig .tdl { --tdl-bg: transparent; --tdl-arm: var(--midnight); --tdl-dot: var(--ember); z-index: 0; }

/* the copy: kicker, tagline, live office clocks, and (bookend versions) a typed status */
.fsig-copy { max-width: min(620px, 48vw); padding-top: clamp(44px, 5vw, 84px); }
.fsig-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); }
.fsig-tag { margin: 18px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.2; letter-spacing: -0.035em; text-wrap: balance; }
.fsig-tag em { font-style: oblique -10deg; color: var(--accent); }
.fsig-clocks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.fsig-clocks b { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.fsig-live { display: inline-flex; align-items: center; gap: 8px; color: var(--ember); }
.fsig-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); animation: blip 1.6s ease-in-out infinite; }
/* the full line sits invisibly underneath the typed one, so the box has its final width from
   the start: typing always grows to the right, even when the line is right-aligned */
.fsig-status > * { grid-area: 1 / 1; }
.fsig-ghost { visibility: hidden; }
.fsig-status { display: inline-grid; justify-items: start; margin: 18px 0 0; min-height: 1.6em; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); }
.fsig-status b { color: var(--ember); font-weight: 500; }
.fsig-caret { display: inline-block; width: 7px; height: 13px; margin-left: 4px; vertical-align: -2px; background: var(--accent); animation: blip 1s steps(2, jump-none) infinite; }

/* centred versions: a footline along the bottom of the band */
.fsig-foot { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.fsig-foot b { color: var(--ember); font-weight: 500; }
.fsig-foot .fsig-status { margin: 0; text-align: right; }
.fsig--bookend .fsig-inner, .fsig--net .fsig-inner, .fsig--net-bookend .fsig-inner { position: absolute; inset: 0; max-width: none; }
.fsig--bookend .tdl { --tdl-size: clamp(130px, 18vw, 250px); }

/* the markbox: where the submark sits, huge and cropped by the right and top edges */
.fsig-markbox {
  position: absolute;
  z-index: 1;
  right: -9vw;
  top: calc(var(--fsig-h) * -0.14);
  height: calc(var(--fsig-h) * 1.12);
  aspect-ratio: 645.6 / 588.39;
}
.fsig--edge-bookend .tdl-mark {
  --tdl-size: calc(var(--fsig-h) * 1.12 * 645.6 / 588.39);
  inset: calc(var(--fsig-h) * -0.14) -9vw auto auto;
  margin: 0;
}

/* version 1: the SVG submark draws its outline, fills, then light runs through the arms */
.fsig-mark { display: block; width: 100%; height: 100%; overflow: visible; }
.fsig-arm { fill: var(--midnight); fill-opacity: 0; stroke: var(--cobalt); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fsig-arm.is-dot { fill: var(--ember); stroke: var(--ember); }
.fsig.is-in .fsig-arm { animation: fsigDraw 1.5s cubic-bezier(.6, 0, .2, 1) forwards, fsigFill 0.7s ease forwards; animation-delay: calc(var(--i) * 0.14s), calc(1.1s + var(--i) * 0.14s); }
@keyframes fsigDraw { to { stroke-dashoffset: 0; } }
@keyframes fsigFill { to { fill-opacity: 1; stroke-opacity: 0; } }
.fsig-pulse { fill: none; stroke: var(--ember); stroke-width: 44; stroke-linecap: round; stroke-dasharray: 170 1000; stroke-dashoffset: 170; opacity: 0; }
.fsig.is-in .fsig-pulse { animation: fsigPulse 3s cubic-bezier(.55, 0, .35, 1) infinite; animation-delay: calc(2.2s + var(--i) * 1s); }
@keyframes fsigPulse { 0% { stroke-dashoffset: 170; opacity: 0; } 8% { opacity: 0.9; } 82% { opacity: 0.9; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
.fsig-ring { fill: none; stroke: var(--ember); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fsig.is-in .fsig-ring { animation: fsigRing 3s cubic-bezier(.2, .6, .3, 1) infinite; animation-delay: 2.9s; }
@keyframes fsigRing { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.fsig-spot { opacity: 0; transition: opacity 0.4s; }
.fsig.is-ready:hover .fsig-spot { opacity: 1; }
/* off screen, the endless loops rest */
.fsig:not(.is-visible) :is(.fsig-pulse, .fsig-ring, .fsig-caret),
.fsig:not(.is-visible) .fsig-live::before { animation-play-state: paused; }

/* phones and small tablets: the copy first, then the mark in the flow, bleeding off the
   right and bottom edges; the centred versions get a shorter band */
@media (max-width: 820px) {
  .fsig { min-height: 0; }
  .fsig-copy { max-width: none; }
  .fsig-markbox { position: relative; right: auto; top: auto; width: 108vw; height: auto; margin: 36px 0 32px 14vw; }
  .fsig--edge-bookend .tdl-mark { --tdl-size: 108vw; inset: auto auto 32px 14vw; }
  .fsig--bookend, .fsig--net, .fsig--net-bookend { min-height: clamp(300px, 86vw, 440px); }
  .fsig-foot { flex-direction: column; align-items: flex-start; gap: 6px; bottom: 18px; }
  .fsig-foot .fsig-status { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .fsig.is-in .fsig-arm { animation: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
  .fsig.is-in .fsig-pulse, .fsig.is-in .fsig-ring { animation: none; }
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
.footer-col h6 {
  font-family: var(--mono);
  font-size: 11px; color: var(--fg-mute);
  margin: 0 0 18px;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 400;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col li { font-size: 14px; color: var(--fg-dim); transition: color 0.2s; }
.footer-col li:hover { color: var(--fg); }
.footer-blurb {
  font-size: 14px;
  color: var(--fg-dim);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0 0 18px;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--mono); font-size: 11px; color: var(--fg-mute);
  flex-wrap: wrap;
}
.footer-bottom-links { display: flex; gap: 24px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* touch screens: each footer link is a full 44px row to tap */
@media (pointer: coarse) {
  .footer-col ul { gap: 0; }
  .footer-col li a { display: block; padding: 11px 0; }
  .footer-col h6 { margin-bottom: 6px; }
}
/* phones: the blurb and contact run full width, Services and Company sit side by side */
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; margin-bottom: 40px; }
  .footer-grid > .footer-col:first-child, .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col li { font-size: 15px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-bottom-links { flex-wrap: wrap; gap: 10px 20px; }
}

/* ============================================================
   v3 ADDITIONS — Why TDNT · Coverage · Process · Security Layers
   Service detail pages · richer hover/interaction polish
   ============================================================ */

/* ── enhanced footer item hover ── */
.footer-col li {
  position: relative;
  padding-left: 0;
  transition: color 0.2s, padding-left 0.2s;
}
.footer-col li::before {
  content: "→";
  position: absolute;
  left: -16px;
  opacity: 0;
  color: var(--accent);
  transition: opacity 0.2s, transform 0.2s;
  transform: translateX(-4px);
}
.footer-col li:hover { padding-left: 18px; color: var(--fg); }
.footer-col li:hover::before { opacity: 1; transform: translateX(0); }

/* ── scroll reveal helper ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s, transform 0.8s cubic-bezier(.2,.6,.2,1);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ── enhance tx-row (services) hover ── */
.tx-row {
  position: relative;
}
.tx-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--accent-faint), transparent 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.tx-row:hover::after { opacity: 1; }
.tx-row-name { transition: transform 0.35s cubic-bezier(.2,.6,.2,1); }
.tx-row.is-active .tx-row-name { transform: translateX(10px); }
.tx-row-name small {
  transition: color 0.3s;
}
.tx-row.is-active .tx-row-name small { color: var(--accent); }

/* ── why TDNT ── */
.why {
  border-top: 1px solid var(--line);
  position: relative;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.why-cell {
  background: var(--bg);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 36px);
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  transition: background 0.35s;
}
.why-cell::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(.2,.6,.2,1);
}
.why-cell:hover { background: var(--bg-elev); }
.why-cell:hover::before { transform: scaleX(1); }
/* four rows per cell (icon, title, text, meta); where subgrid is supported the rows line up across
   each row of cells, so every title and paragraph starts at the same height */
.why-cell { grid-template-rows: auto auto 1fr auto; }
@supports (grid-template-rows: subgrid) {
  .why-cell { grid-row: span 4; grid-template-rows: subgrid; row-gap: 18px; }
}
.why-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.why-cell .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.18em;
  padding-top: 6px;
}
/* bespoke line icons: Cobalt line work, the Ember detail is the one idea each icon is about. They
   draw themselves in when the cell scrolls into view; on hover the tile turns Cobalt and the Ember
   detail moves (the packet runs the direct link, the stopwatch sweeps, the NOC light pulses) */
.why-ico {
  flex: none;
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: color-mix(in srgb, var(--cobalt) 5%, var(--cloud));
  border: 1px solid color-mix(in srgb, var(--cobalt) 14%, transparent);
  color: var(--cobalt);
  box-shadow: 0 12px 24px -18px rgba(0, 51, 153, 0.45);
  transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.5s cubic-bezier(.2, .7, .2, 1.3);
}
.why-ico svg { width: 52px; height: 52px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.why-ico .f { fill: currentColor; stroke: none; }
.why-ico .a { stroke: var(--ember); }
.why-ico .a.f { fill: var(--ember); stroke: none; }
.why-ico .ring { fill: none; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.why-ico .pkt { transform-box: fill-box; transform-origin: center; }
.why-ico .slice { transform-origin: 22px 23px; }
.why-cell:hover .why-ico {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: var(--cloud);
  transform: translateY(-3px) rotate(-3deg);
}
.why-ico .d { stroke-dasharray: 1; stroke-dashoffset: 0; }
.why-ico .dash { stroke-dasharray: 2.4 3; opacity: 0.6; }
.why-cell.reveal:not(.is-in) .why-ico .d { stroke-dashoffset: 1; }
.why-cell.reveal.is-in .why-ico .d { animation: whyDraw 1.1s cubic-bezier(.45, 0, .2, 1) 0.25s both; }
.why-cell.reveal.is-in .why-ico .a.d { animation-delay: 0.75s; }
.why-cell:hover .why-ico .pkt { animation: whyPacket 1.3s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.why-cell:hover .why-ico .slice { animation: whySweep 1.8s linear infinite; }
.why-cell:hover .why-ico .ring { animation: whyPing 1.4s ease-out infinite; }
@keyframes whyDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes whyPacket { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
@keyframes whySweep { to { transform: rotate(360deg); } }
@keyframes whyPing { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
@media (prefers-reduced-motion: reduce) {
  .why-cell.reveal.is-in .why-ico .d, .why-cell:hover .why-ico .pkt, .why-cell:hover .why-ico .slice, .why-cell:hover .why-ico .ring { animation: none; }
  .why-cell.reveal:not(.is-in) .why-ico .d { stroke-dashoffset: 0; }
  .why-ico { transition: background 0.35s, color 0.35s, border-color 0.35s; }
  .why-cell:hover .why-ico { transform: none; }
}
@media (max-width: 600px) { .why-ico { width: 64px; height: 64px; border-radius: 16px; } .why-ico svg { width: 44px; height: 44px; } }
.why-cell h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.why-cell h3 em { font-style: oblique -10deg; font-weight: 400; color: var(--accent); }
.why-cell p {
  font-size: 14px;
  color: var(--fg-dim);
  line-height: 1.55;
  margin: 0;
}
.why-cell .why-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.why-cell .why-meta::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--accent);
}
.why-cell .why-visual {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 90px;
  height: 90px;
  opacity: 0.45;
  color: var(--accent);
  transition: opacity 0.3s, transform 0.5s cubic-bezier(.2,.6,.2,1);
}
.why-cell:hover .why-visual {
  opacity: 1;
  transform: rotate(-6deg) scale(1.08);
}
@media (max-width: 980px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } }

/* ── coverage ── */
.cov {
  border-top: 1px solid var(--line);
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 90% 30%, rgba(229, 88, 44, 0.04), transparent),
    var(--bg);
}
.cov-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.cov-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.cov-row {
  border-bottom: 1px solid var(--line);
  padding: clamp(22px, 2.4vw, 32px) 0;
  display: grid;
  /* the name column fits the longest region ("Americas", about 5.4em of the name's size) */
  grid-template-columns: calc(clamp(34px, 5vw, 64px) * 5.7) minmax(0, 1fr) auto;
  /* no row gap: the folded tag list takes no space until the row opens */
  gap: 0 clamp(16px, 2vw, 40px);
  /* the figures start level with the top of the region name, not its baseline */
  align-items: start;
  position: relative;
  transition: padding-left 0.4s cubic-bezier(.2,.6,.2,1);
  cursor: none;
}
.cov-row::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  height: 1px;
  background: var(--accent);
  width: 0;
  transition: width 0.4s cubic-bezier(.2,.6,.2,1);
}
.cov-row:hover { padding-left: 44px; }
.cov-row:hover::before { width: 30px; }
.cov-row.is-other {
  opacity: 0.35;
  transition: opacity 0.3s;
}
.cov:hover .cov-row.is-other { opacity: 0.25; }
.cov-row-name {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-style: oblique -10deg;
  transition: color 0.3s;
}
.cov-row:hover .cov-row-name { color: var(--accent); }
.cov-row-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  line-height: 1.5;
}
.cov-row-meta strong {
  color: var(--fg);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 2px;
}
.cov-row-cta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cov-row-cta .arr {
  display: inline-block;
  transition: transform 0.3s;
}
.cov-row:hover .cov-row-cta { color: var(--accent); }
.cov-row:hover .cov-row-cta .arr { transform: translateX(6px); }
.cov-row-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(.2,.6,.2,1), opacity 0.4s, margin-top 0.3s;
}
.cov-row:hover .cov-row-tags,
.cov-row.is-open .cov-row-tags {
  max-height: 320px;
  margin-top: 20px;
  opacity: 1;
}
.cov-row-tags li {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--fg-dim);
  background: var(--bg);
  list-style: none;
}

/* the reach disc: the world as seen from Larnaca (azimuthal equidistant). Every point sits at its
   true bearing and distance from HQ, so each route out of Larnaca is a straight spoke; the rings
   are round-trip time over fibre. Drawn by home.js. */
.cov-map {
  position: sticky;
  top: 100px;
  margin: 0;
  display: grid;
  gap: 14px;
  padding: clamp(16px, 1.8vw, 24px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-elev);
}
.cov-map-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.cov-map-kicker { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cov-map-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); animation: blip 1.6s ease-in-out infinite; }
.cov-map-readout { display: grid; justify-items: end; gap: 4px; text-align: right; min-height: 2.9em; }
.cov-map-readout strong { font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; text-transform: none; color: var(--fg); }
.cov-map-readout span { color: var(--fg-dim); letter-spacing: 0.08em; }
.cov-map-stage { position: relative; aspect-ratio: 1 / 1; }
.cov-map-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cov-map-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.cov-map-key span { display: inline-flex; align-items: center; gap: 8px; }
.cov-map-key i { display: inline-block; flex: none; }
.cov-map-key .is-pop { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.cov-map-key .is-route { width: 16px; height: 1.5px; background: var(--ember); }
.cov-map-key .is-ring { width: 12px; height: 12px; border-radius: 50%; border: 1px dashed rgba(10, 8, 28, 0.35); }
@media (max-width: 900px) {
  .cov-grid { grid-template-columns: 1fr; }
  /* phones and tablets: the disc comes first, above the regions it explains */
  .cov-map { position: relative; top: auto; order: -1; width: 100%; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 420px) {
  .cov-map-head { flex-direction: column; gap: 10px; }
  .cov-map-readout { justify-items: start; text-align: left; }
}
/* phones: region name and EXPAND on one line, the figures full width below */
@media (max-width: 640px) {
  .cov-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; }
  .cov-row-meta { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
  .cov-row-tags { margin-top: 4px; }
}

/* ── route lifecycle (process) ── */
.proc {
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.proc-stage {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 44px);
  position: relative;
  overflow: hidden;
}
.proc-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at var(--gx, 50%) 50%, rgba(229, 88, 44, 0.08), transparent 60%);
  pointer-events: none;
  transition: background-position 0.6s;
}
.proc-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
  margin-bottom: 48px;
}
.proc-rail {
  position: absolute;
  top: 22px;
  left: 24px; right: 24px;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.proc-rail-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(.2,.6,.2,1);
}
.proc-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  cursor: none;
  transition: opacity 0.3s;
}
.proc-step .node {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-dim);
  position: relative;
  z-index: 1;
  transition: all 0.3s cubic-bezier(.2,.6,.2,1);
}
.proc-step.is-active .node,
.proc-step:hover .node {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: scale(1.12);
  box-shadow: 0 0 30px var(--accent-soft);
}
.proc-step.is-past .node {
  border-color: var(--accent-line);
  color: var(--accent);
}
.proc-step .nm {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.proc-step.is-active .nm,
.proc-step:hover .nm { color: var(--accent); }
.proc-step .ts {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-mute);
  letter-spacing: 0.08em;
}
.proc-detail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-deep);
  align-items: start;
  align-content: start;
  min-height: 200px;
}
.proc-detail h4 {
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
}
.proc-detail h4 em { font-style: oblique -10deg; color: var(--accent); }
.proc-detail .badge {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
.proc-detail p {
  color: var(--fg-dim);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 60ch;
}
.proc-detail .specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.proc-detail .specs li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.proc-detail .specs li:last-child { border-bottom: 0; }
.proc-detail .specs li .k { color: var(--fg-mute); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10.5px; }
.proc-detail .specs li .v { color: var(--fg); }
@media (max-width: 800px) {
  .proc-detail { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; }
}
@media (max-width: 560px) {
  .proc-stage { padding: 24px 14px; }
  .proc-steps { margin-bottom: 28px; }
  /* five steps stay on one row, so the nodes shrink to fit beside each other */
  .proc-step { gap: 8px; }
  .proc-step .node { width: 38px; height: 38px; font-size: 11px; }
  .proc-rail { top: 19px; }
  .proc-step .nm { font-size: 9.5px; letter-spacing: 0.04em; }
  .proc-step .ts { font-size: 9px; letter-spacing: 0.02em; }
  .proc-detail .specs li { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
}

/* ── security layers (replace terminal) ── */
.sec-stack {
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
  padding: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  min-height: 520px;
  position: relative;
  overflow: hidden;
}
.sec-stack-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sec-stack-head .blip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sec-stack-head .blip::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--ok);
  animation: blip 1.6s ease-in-out infinite;
}
.sec-layers {
  display: grid;
  gap: 6px;
  align-self: center;
  position: relative;
}
.sec-layer {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: 4px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 18px;
  align-items: center;
  cursor: none;
  transition: all 0.3s cubic-bezier(.2,.6,.2,1);
  overflow: hidden;
}
.sec-layer::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.4s;
}
.sec-layer.is-active::before { transform: scaleY(1); }
.sec-layer:hover,
.sec-layer.is-active {
  background: var(--bg-card);
  border-color: var(--accent-line);
  transform: translateX(4px);
}
.sec-layer .l-num {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
}
.sec-layer.is-active .l-num,
.sec-layer:hover .l-num { color: var(--accent); }
.sec-layer .l-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}
.sec-layer .l-proto {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.05em;
}
.sec-layer .l-bars {
  display: inline-flex; gap: 2px; align-items: end;
}
.sec-layer .l-bars span {
  width: 3px; background: var(--fg-mute);
  transition: background 0.3s;
}
.sec-layer .l-bars span:nth-child(1) { height: 6px; }
.sec-layer .l-bars span:nth-child(2) { height: 10px; }
.sec-layer .l-bars span:nth-child(3) { height: 14px; }
.sec-layer .l-bars span:nth-child(4) { height: 18px; }
.sec-layer.is-active .l-bars span,
.sec-layer:hover .l-bars span { background: var(--accent); }
.sec-stack-foot {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 6px;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  min-height: 56px;
}
.sec-stack-foot .lbl {
  color: var(--fg-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
}
.sec-stack-foot .desc {
  color: var(--fg);
  line-height: 1.5;
}

/* ── service detail "page" (overlay) ── */
.sp-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
}
.sp-overlay.is-open { display: block; animation: spIn 0.45s cubic-bezier(.2,.6,.2,1); }
@keyframes spIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
/* the page starts below the fixed nav (69px), and the service bar sticks just under it */
.sp-page { padding-top: 69px; }
.sp-top {
  position: sticky;
  top: 69px;
  z-index: 10;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 0;
}
.sp-top-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
}
.sp-back, .sp-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  transition: all 0.2s;
}
.sp-back:hover, .sp-close:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}
.sp-crumb {
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sp-crumb strong { color: var(--accent); font-weight: 500; }
.sp-hero {
  padding: clamp(32px, 4.5vw, 64px) 0 clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
}
.sp-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.sp-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--fg-mute);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
}
.sp-eyebrow .ch {
  padding: 4px 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  border-radius: 3px;
}
.sp-h1 {
  font-family: var(--display);
  /* sized so the longest word ("provisioned", "connectivity") fits its column whole, and the
     title sets in three or four lines beside the live panel, not five */
  font-size: clamp(42px, 6vw, 92px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.2;
  margin: 24px 0 24px;
  text-wrap: balance;
}
.sp-h1 em { font-style: oblique -10deg; font-weight: 400; color: var(--accent); }
.sp-lede {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 56ch;
  margin: 0 0 36px;
}
.sp-protos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.sp-protos li {
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--fg-dim);
}
.sp-hero-visual {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 42px clamp(18px, 2.6vw, 34px) clamp(18px, 2.4vw, 30px);
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  display: grid;
}
/* the visual fills the panel: the signal on top, live readouts and a trend line below */
.sp-hero-visual svg { display: block; width: 100%; height: 100%; min-height: 0; max-width: none; margin: 0; overflow: visible; }
.sp-hero-visual::before {
  content: attr(data-label);
  position: absolute;
  top: 16px; left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-mute);
  letter-spacing: 0.18em;
}
.sp-section {
  padding: clamp(48px, 7vw, 96px) 0;
  border-bottom: 1px solid var(--line);
}
.sp-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.sp-section h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 32px;
  max-width: 18ch;
}
.sp-section h2 em { font-style: oblique -10deg; color: var(--accent); }
.sp-prose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--fg-dim);
  max-width: 1100px;
}
.sp-prose p { margin: 0 0 16px; }
.sp-prose strong { color: var(--fg); font-weight: 500; }

/* overview: the story on the left, the service's own path on the right (a call, a message,
   a profile or a session, step by step, with a packet running the rail) */
.sp-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.sp-overview h2 { margin-bottom: 24px; }
.sp-overview .sp-prose { grid-template-columns: 1fr; max-width: 60ch; }
.sp-flow {
  margin: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}
.sp-flow figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sp-flow figcaption span:first-child { color: var(--accent); }
.sp-flow ol { position: relative; list-style: none; margin: 0; padding: 0; counter-reset: step; }
/* the rail from the first step marker to the last, and the packet that runs it. The two ends
   are measured by service-visuals.js (--flow-start, --flow-run), since steps vary in height.
   The packet starts and stops behind a marker: it emerges from the first, travels, comes to
   rest under the last and fades there, out of sight, before it starts again. */
.sp-flow ol::before {
  content: "";
  position: absolute;
  left: 14px;
  top: var(--flow-start, 30px);
  height: var(--flow-run, 0px);
  width: 1px;
  background: var(--line);
}
.sp-flow ol::after {
  content: "";
  position: absolute;
  left: 11px;
  top: calc(var(--flow-start, 30px) - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 4px rgba(229, 88, 44, 0.16);
  animation: sp-packet 5.2s cubic-bezier(.55, 0, .45, 1) infinite;
}
@keyframes sp-packet {
  0% { transform: translateY(0); opacity: 0; }
  6% { opacity: 1; }
  84% { transform: translateY(var(--flow-run, 0px)); opacity: 1; }
  96%, 100% { transform: translateY(var(--flow-run, 0px)); opacity: 0; }
}
.sp-flow li {
  counter-increment: step;
  position: relative;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.sp-flow li:last-child { border-bottom: 0; }
.sp-flow li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  position: relative;
  z-index: 1;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
}
.sp-flow li b { font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.42; color: var(--fg); }
.sp-flow li span { grid-column: 2 / -1; font-size: 13.5px; line-height: 1.55; color: var(--fg-dim); }
.sp-flow li i { grid-column: 3; grid-row: 1; align-self: center; font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--fg-mute); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .sp-flow ol::after { animation: none; opacity: 0; } }
.sp-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  counter-reset: cap;
}
.sp-cap {
  counter-increment: cap;
  position: relative;
  background: var(--bg);
  padding: 28px;
  display: grid;
  align-content: start;
  gap: 12px;
  transition: background 0.3s;
}
.sp-cap::after {
  content: counter(cap, decimal-leading-zero);
  position: absolute;
  top: 30px;
  right: 28px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}
.sp-cap:hover { background: var(--bg-elev); }
.sp-cap .ico {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  background: var(--accent-faint);
  color: var(--accent);
  transition: background 0.3s, color 0.3s;
}
.sp-cap .ico svg { width: 22px; height: 22px; }
/* one icon family: every glyph at the same weight, with rounded ends and joins */
.sp-cap .ico svg, .sp-cap .ico svg * { stroke-linecap: round; stroke-linejoin: round; }
.sp-cap .ico svg [stroke-width] { stroke-width: 1.5; }
.sp-cap:hover .ico { background: var(--accent); color: var(--on-accent, #fffbfa); }
.sp-cap h4 {
  font-family: var(--display);
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.sp-cap p {
  font-size: 13.5px;
  color: var(--fg-dim);
  line-height: 1.55;
  margin: 0;
}
.sp-use {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  counter-reset: use;
}
/* each use case carries its index as a large outlined numeral, clear of the text */
.sp-use-card::after {
  counter-increment: use;
  content: counter(use, decimal-leading-zero);
  position: absolute;
  right: 20px;
  bottom: 14px;
  font-family: var(--display);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent-line);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.3s;
}
.sp-use-card:hover::after { -webkit-text-stroke-color: var(--accent); }
.sp-use-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 120px 24px 24px;
  display: grid;
  gap: 12px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}
.sp-use-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
/* the outlined numeral carries the index, so the small "USE 01" label is not repeated */
.sp-use-card .ix { display: none; }
.sp-use-card h5 {
  font-family: var(--display);
  font-size: 19px; font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.sp-use-card p { margin: 0; font-size: 13.5px; color: var(--fg-dim); line-height: 1.55; }
.sp-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.sp-spec {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.sp-spec:nth-child(2n) { border-right: 0; }
.sp-spec:nth-last-child(-n+2) { border-bottom: 0; }
.sp-spec .k {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sp-spec .v {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.sp-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.sp-rel-card {
  background: var(--bg);
  padding: 24px;
  display: grid;
  gap: 10px;
  cursor: none;
  transition: background 0.3s;
}
.sp-rel-card:hover { background: var(--bg-elev); }
.sp-rel-card .num {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
  letter-spacing: 0.14em;
}
.sp-rel-card h6 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.02em;
}
.sp-rel-card .arrow-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-dim);
  margin-top: 4px;
}
.sp-rel-card .arrow-row .a { transition: transform 0.3s; }
.sp-rel-card:hover .arrow-row .a { transform: translateX(4px); color: var(--accent); }

.sp-cta {
  padding: clamp(56px, 8vw, 120px) 0;
  text-align: center;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
}
.sp-cta h3 {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin: 0 0 28px;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.sp-cta h3 em { font-style: oblique -10deg; color: var(--accent); }
.sp-cta .btns { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.sp-hero-grid > * { min-width: 0; }
.sp-eyebrow .ch { white-space: nowrap; }
@media (max-width: 900px) {
  .sp-hero-grid { grid-template-columns: 1fr; }
  .sp-cap-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-prose { grid-template-columns: 1fr; }
  .sp-overview { grid-template-columns: 1fr; }
  .sp-use { grid-template-columns: 1fr; }
  .sp-related { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* the service top bar: back and home only, the crumb repeats the page title */
  /* on phones the bar scrolls away with the page, so only the nav stays on screen */
  .sp-top { padding: 12px 0; position: relative; top: auto; }
  .sp-top-inner { grid-template-columns: auto auto; justify-content: space-between; gap: 12px; }
  .sp-crumb { display: none; }
  .sp-back, .sp-close { min-height: 40px; }
  .sp-eyebrow { align-items: flex-start; gap: 10px; line-height: 1.6; }
  .sp-hero-visual { aspect-ratio: auto; padding: 36px 14px 14px; }
  .sp-hero-visual svg { height: auto; }
}
@media (max-width: 560px) {
  .sp-cap-grid { grid-template-columns: 1fr; }
  .sp-cap { min-height: 0; padding: 22px 20px; }
  .sp-cap::after { top: 24px; right: 20px; }
  .sp-use-card { padding: 22px 76px 22px 20px; }
  .sp-use-card::after { font-size: 46px; right: 14px; bottom: 12px; }
  .sp-flow li { grid-template-columns: 29px minmax(0, 1fr); }
  .sp-flow li i { grid-column: 2; grid-row: auto; justify-self: start; }
  .sp-specs { grid-template-columns: 1fr; }
  .sp-spec { border-right: 0 !important; }
  .sp-spec:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .sp-rel-card { padding: 20px; }
  .sp-cta .btns { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .sp-cta .btns .btn { justify-content: center; }
}

/* ── industries visual ── */
.ind-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.5;
  z-index: 0;
}
.ind-visual svg { position: absolute; right: -10%; bottom: -10%; width: 60%; opacity: 0.4; }
.ind-content { z-index: 1; }

/* ── hover lift on btns ── */
.btn { will-change: transform; }
.btn:hover { transform: translateY(-1px); }
.btn-accent:hover { box-shadow: 0 12px 30px -10px rgba(229, 88, 44, 0.5); }

/* ── nav active state ── */
.nav-current { color: var(--fg) !important; }
.nav-current::after { width: 100% !important; }

/* ============================================================
   SCROLL REVEAL — enhanced with stagger support
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(.2,.6,.2,1), transform 0.75s cubic-bezier(.2,.6,.2,1);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.75s cubic-bezier(.2,.6,.2,1), transform 0.75s cubic-bezier(.2,.6,.2,1);
}
.reveal-left.is-in { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s cubic-bezier(.2,.6,.2,1), transform 0.7s cubic-bezier(.2,.6,.2,1);
}
.reveal-scale.is-in { opacity: 1; transform: scale(1); }

/* ── hero entrance animations ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-content .tick { animation: heroFadeUp 0.7s 0.1s cubic-bezier(.2,.6,.2,1) both; }
.hero-content .hero-meta { animation: heroFadeUp 0.7s 0.2s cubic-bezier(.2,.6,.2,1) both; }
.hero-content .hero-h1 { animation: heroFadeUp 0.85s 0.3s cubic-bezier(.2,.6,.2,1) both; }
.hero-content .hero-sub { animation: heroFadeUp 0.7s 0.55s cubic-bezier(.2,.6,.2,1) both; }
.hero-content .hero-actions-row { animation: heroFadeUp 0.7s 0.65s cubic-bezier(.2,.6,.2,1) both; }
.hero-content .hero-counter { animation: heroFadeUp 0.7s 0.75s cubic-bezier(.2,.6,.2,1) both; }
.hero-canvas { animation: heroFadeIn 1.2s 0.1s both; }
.scroll-cue { animation: heroFadeIn 1s 1.2s both; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ── about hero ── */
.ab-hero {
  position: relative;
  padding: 68px 0 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.ab-hero-grid-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,251,250,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,251,250,0.022) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 80%);
}
.ab-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding-top: clamp(40px, 8vh, 90px);
  padding-bottom: 64px;
  gap: clamp(48px, 9vh, 120px);
}
.ab-hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  animation: heroFadeUp 0.7s 0.15s cubic-bezier(.2,.6,.2,1) both;
}
.ab-hero-h1 {
  font-family: var(--display);
  font-size: clamp(52px, 9.5vw, 160px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.2;
  margin: 0;
  animation: heroFadeUp 0.9s 0.3s cubic-bezier(.2,.6,.2,1) both;
}
.ab-hero-h1 em { font-style: oblique -10deg; color: var(--accent); font-weight: 400; }
.ab-hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  animation: heroFadeUp 0.8s 0.55s cubic-bezier(.2,.6,.2,1) both;
}
.ab-hero-lede {
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 50ch;
  margin: 0;
}
.ab-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.ab-stat {
  background: var(--bg-elev);
  padding: 20px 18px;
  display: grid;
  gap: 6px;
}
.ab-stat strong {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.ab-stat span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ab-hero-bar {
  height: 2px;
  background: var(--line);
  position: relative;
  z-index: 1;
}
.ab-hero-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), transparent);
  width: 60%;
  animation: heroFadeIn 2s 1s both;
}
@media (max-width: 1180px) { .ab-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .ab-hero-bottom { grid-template-columns: 1fr; }
  .ab-hero-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── mission ── */
.ab-mission {
  border-top: 1px solid var(--line);
}
.ab-mission-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.ab-quote {
  font-family: var(--sans);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  color: var(--fg);
  border-left: 3px solid var(--accent);
  padding-left: 28px;
  margin: 0 0 40px;
  max-width: 48ch;
}
.ab-mission-pillars { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.ab-pillar {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 20px 20px;
  border-bottom: 1px solid var(--line);
  align-items: start;
  background: var(--bg);
  transition: background 0.3s;
}
.ab-pillar:last-child { border-bottom: 0; }
.ab-pillar:hover { background: var(--bg-elev); }
.ab-pillar-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-top: 3px;
}
.ab-pillar strong { font-size: 15px; font-weight: 500; display: block; margin-bottom: 6px; }
.ab-pillar p { margin: 0; font-size: 13.5px; color: var(--fg-dim); line-height: 1.55; }

.ab-cred-block {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  overflow: hidden;
}
.ab-cred-head {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.ab-cred-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ab-cred-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.5;
}
.ab-cred-list li:last-child { border-bottom: 0; }
.ab-cred-badge {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  background: var(--accent-faint);
  border: 1px solid var(--accent-line);
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 860px) { .ab-mission-grid { grid-template-columns: 1fr; } }

/* ── timeline ── */
.ab-timeline-section { border-top: 1px solid var(--line); }
.ab-timeline {
  position: relative;
  padding-left: clamp(24px, 4vw, 56px);
}
.ab-tl-rail {
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent), var(--line) 80%, transparent);
}
.ab-tl-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(32px, 4vw, 56px);
  position: relative;
}
.ab-tl-marker {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-top: 4px;
}
.ab-tl-year {
  font-family: var(--display);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--fg-dim);
  line-height: 1;
}
/* each year's dot sits on the rail at the far left, level with the year */
.ab-tl-dot {
  width: 11px; height: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--line);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line);
  margin: 0;
  position: absolute;
  top: 14px;
  left: calc(-1 * clamp(24px, 4vw, 56px) + 0.5px);
  transform: translateX(-50%);
}
.ab-tl-dot-active {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line), 0 0 16px var(--accent-soft);
  animation: blip 2s ease-in-out infinite;
}
.ab-tl-body { padding-top: 4px; }
.ab-tl-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ab-tl-tag::before { content: ""; width: 16px; height: 1px; background: var(--accent); }
.ab-tl-tag-live { color: var(--accent); }
.ab-tl-body h4 {
  font-family: var(--display);
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  max-width: 60ch;
  line-height: 1.3;
}
.ab-tl-body p {
  font-size: 14.5px;
  color: var(--fg-dim);
  line-height: 1.6;
  margin: 0;
  max-width: 64ch;
}
@media (max-width: 640px) {
  .ab-tl-item { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
}
/* phones: the year sits above its entry, and the dot moves onto the rail */
@media (max-width: 560px) {
  .ab-tl-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ab-tl-marker { align-items: flex-start; padding-top: 0; }
  .ab-tl-dot { top: 8px; }
}

/* ── values (reuses why-cell) ── */
.ab-values-section { border-top: 1px solid var(--line); }

/* ── engineering section ── */
.ab-eng-section { border-top: 1px solid var(--line); background: var(--bg-elev); }
.ab-eng-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.ab-eng-facts { display: grid; gap: 16px; margin-top: 36px; }
.ab-eng-fact {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.ab-ef-num {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--accent);
  line-height: 1;
}
.ab-ef-lbl {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.ab-eng-terminal {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-deep);
}
.ab-term-head {
  padding: 12px 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ab-term-body {
  padding: 18px 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--fg-dim);
  min-height: 320px;
  position: relative;
  overflow: hidden;
}
.ab-term-body::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: linear-gradient(180deg, transparent, var(--bg-deep));
  pointer-events: none;
}
.ab-term-line { display: grid; grid-template-columns: 74px 110px minmax(0, 1fr); gap: 10px; }
@media (max-width: 560px) {
  /* phones: timestamp and event on one line, the detail wraps beneath the event */
  .ab-term-body { padding: 16px 14px; font-size: 11px; line-height: 1.7; }
  .ab-term-line { grid-template-columns: 62px minmax(0, 1fr); column-gap: 8px; margin-bottom: 4px; }
  .ab-term-line > :nth-child(3) { grid-column: 2; overflow-wrap: anywhere; }
}
.ab-ts { color: var(--fg-mute); }
.ab-ok { color: var(--ok); }
.ab-warn { color: var(--accent); }
.ab-info { color: var(--signal); }
.ab-term-cursor {
  color: var(--accent);
  animation: blip 1s ease-in-out infinite;
  margin-top: 4px;
}
@media (max-width: 860px) { .ab-eng-grid { grid-template-columns: 1fr; } }

/* ── locations ── */
.ab-locations-section { border-top: 1px solid var(--line); }
.ab-locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
.ab-location-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}
.ab-location-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(.2,.6,.2,1);
}
.ab-location-card:hover::before { transform: scaleX(1); }
.ab-location-card:hover { border-color: var(--accent-line); }
.ab-loc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.ab-loc-id {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ab-loc-status {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ok);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ab-loc-status .blip {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  animation: blip 2s ease-in-out infinite;
}
.ab-loc-city {
  font-family: var(--display);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0 0 8px;
  font-style: oblique -10deg;
}
.ab-loc-country {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ab-loc-divider { height: 1px; background: var(--line); margin: 24px 0; }
.ab-loc-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ab-loc-facts li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ab-loc-facts li:last-child { border-bottom: 0; }
.ab-loc-facts li span { color: var(--fg-mute); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; padding-top: 1px; }
.ab-loc-facts li strong { color: var(--fg); font-weight: 500; }
.ab-loc-contact { margin-top: 20px; }
.ab-location-map {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-deep);
  overflow: hidden;
  position: relative;
}
.ab-map-label {
  position: absolute;
  top: 16px; left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 2;
}
.ab-map-svg { display: block; width: 100%; height: auto; aspect-ratio: 400/280; }
@keyframes abMapPulse { 0%, 100% { r: 12; opacity: 0.5; } 50% { r: 18; opacity: 0.2; } }
.ab-map-pulse { animation: abMapPulse 2.5s ease-in-out infinite; }
.ab-map-readout {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ab-map-readout strong { color: var(--accent); }
@media (max-width: 920px) { .ab-locations-grid { grid-template-columns: 1fr 1fr; } .ab-location-map { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ab-locations-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* ── contact hero ── */
.ct-hero {
  padding: calc(68px + clamp(48px, 8vh, 100px)) 0 clamp(48px, 7vw, 80px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 50% at 70% 30%, rgba(229, 88, 44,0.06), transparent),
    var(--bg);
  position: relative;
  overflow: hidden;
}
.ct-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,251,250,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,251,250,0.018) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, black 20%, transparent 75%);
  pointer-events: none;
}
.ct-hero-inner { position: relative; z-index: 1; }
.ct-hero-meta {
  margin-bottom: clamp(24px, 4vh, 48px);
  animation: heroFadeUp 0.7s 0.1s cubic-bezier(.2,.6,.2,1) both;
}
.ct-hero-h1 {
  font-family: var(--display);
  font-size: clamp(48px, 8.5vw, 148px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.2;
  margin: 0 0 clamp(24px, 3vw, 40px);
  max-width: 16ch;
  animation: heroFadeUp 0.9s 0.25s cubic-bezier(.2,.6,.2,1) both;
}
.ct-hero-h1 em { font-style: oblique -10deg; color: var(--accent); font-weight: 400; }
.ct-hero-sub {
  font-size: clamp(15px, 1.35vw, 19px);
  color: var(--fg-dim);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 clamp(32px, 4vw, 52px);
  animation: heroFadeUp 0.7s 0.45s cubic-bezier(.2,.6,.2,1) both;
}
.ct-hero-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: heroFadeUp 0.7s 0.6s cubic-bezier(.2,.6,.2,1) both;
}
.ct-channel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-elev);
  transition: all 0.25s;
  text-decoration: none;
}
.ct-channel:hover {
  border-color: var(--accent-line);
  background: var(--bg-card);
  transform: translateY(-2px);
}
.ct-channel-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ct-channel strong { display: block; font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.ct-channel span { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); }

/* ── main section ── */
.ct-main-section { border-top: 1px solid var(--line); }
.ct-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* ── form ── */
.ct-form-wrap {
  position: relative;
}
.ct-form-head { margin-bottom: 36px; }
.ct-form {
  display: grid;
  gap: 20px;
}
.ct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ct-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ct-field-full { grid-column: 1 / -1; }
.ct-field label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ct-req { color: var(--accent); }
.ct-main-grid > * { min-width: 0; }
.ct-field input,
.ct-field select,
.ct-field textarea {
  width: 100%;
  min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  resize: vertical;
  appearance: none;
  -webkit-appearance: none;
}
.ct-field select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23726e93' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
  border-color: var(--accent-line);
  background: var(--bg-card);
}
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: var(--fg-mute); }
.ct-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ct-gdpr {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  line-height: 1.6;
  margin: 0;
  max-width: 40ch;
}
.ct-submit { padding: 14px 26px; font-size: 14px; }
.ct-form-success {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--ok);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ok) 6%, transparent);
  margin-top: 8px;
}
/* the success note stays hidden until the form has been sent (display: flex above would beat the hidden attribute) */
.ct-form-success[hidden] { display: none; }
.ct-form-success strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--ok); }
.ct-form-success p { margin: 0; font-size: 13.5px; color: var(--fg-dim); }
.ct-form-success:focus { outline: none; }
.ct-form[hidden] { display: none; }

/* contact form: field errors, the CAPTCHA slot (empty unless Cloudflare needs a click) and the honeypot */
.ct-field .is-invalid { border-color: var(--ember); background-color: color-mix(in srgb, var(--ember) 5%, var(--bg-elev)); }
.ct-field .is-invalid:focus { border-color: var(--ember); }
.ct-form-error {
  margin: 0;
  padding: 12px 16px;
  border-left: 2px solid var(--ember);
  background: color-mix(in srgb, var(--ember) 7%, transparent);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg);
}
.ct-form-error[hidden] { display: none; }
/* out of the layout (no empty grid gap) until Turnstile asks the visitor to click */
.ct-captcha:not(.is-shown) { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.ct-submit[aria-busy="true"] { cursor: progress; opacity: 0.75; }
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ── sidebar ── */
.ct-sidebar { display: flex; flex-direction: column; gap: 20px; }
.ct-sla-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-deep);
}
.ct-sla-head {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.ct-sla-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
}
.ct-sla-list li {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  gap: 5px;
}
.ct-sla-list li:last-child { border-bottom: 0; }
.ct-sla-type { font-size: 13px; color: var(--fg); font-weight: 500; }
.ct-sla-time { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.08em; }
.ct-sla-bar {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  margin-top: 4px;
  overflow: hidden;
}
.ct-sla-bar div {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
  transition: width 1.2s cubic-bezier(.2,.6,.2,1);
}

.ct-dept-list {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-deep);
}
.ct-dept-head {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.ct-dept {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  transition: background 0.2s;
}
.ct-dept:last-child { border-bottom: 0; }
.ct-dept:hover { background: var(--bg-elev); }
.ct-dept strong { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 3px; }
.ct-dept span { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); }
.ct-dept-icon { font-size: 14px; flex-shrink: 0; }

.ct-uptime-badge {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  gap: 14px;
}
.ct-uptime-badge .blip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 12px var(--ok);
  animation: blip 2s ease-in-out infinite;
  flex-shrink: 0;
}
.ct-uptime-badge strong { display: block; font-size: 14px; margin-bottom: 3px; }
.ct-uptime-badge span { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); }
.ct-uptime-badge div { flex: 1; }
.ct-uptime-link {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.ct-uptime-link:hover { color: var(--accent); }

@media (max-width: 900px) {
  .ct-main-grid { grid-template-columns: 1fr; }
  .ct-form-row { grid-template-columns: 1fr; }
}

/* ── offices ── */
.ct-offices-section { border-top: 1px solid var(--line); }
.ct-offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
/* the cards share one height; each map fills what is left, so all three end level */
.ct-office-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-deep);
  transition: border-color 0.3s;
  display: flex;
  flex-direction: column;
}
.ct-office-card > .ct-office-badge { align-self: flex-start; }
.ct-office-card .ct-office-map-hint { margin-top: auto; }
.nowrap { white-space: nowrap; }
.ct-office-card:hover { border-color: var(--accent-line); }
.ct-office-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
  background: var(--accent-faint);
  border: 1px solid var(--accent-line);
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.14em;
  margin: 24px 24px 0;
}
.ct-office-badge-noc { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.ct-office-card h3 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.3;
  margin: 16px 24px 6px;
  font-style: oblique -10deg;
}
.ct-office-country {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 24px;
}
.ct-office-divider { height: 1px; background: var(--line); margin: 20px 0; }
.ct-office-details { padding: 0 24px; display: grid; gap: 0; }
.ct-od-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.ct-od-row:last-child { border-bottom: 0; }
.ct-od-row span { font-family: var(--mono); font-size: 10.5px; color: var(--fg-mute); text-transform: uppercase; letter-spacing: 0.1em; padding-top: 1px; }
.ct-od-row strong { font-weight: 500; color: var(--fg); }
.ct-office-map-hint { margin: 20px 0 0; border-top: 1px solid var(--line); }
.ct-mini-map { display: block; width: 100%; }
.ct-office-card-global { background: var(--bg-elev); }
@media (max-width: 860px) { .ct-offices-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ct-offices-grid { grid-template-columns: 1fr; } }

/* ── FAQ ── */
.ct-faq-section { border-top: 1px solid var(--line); }
.ct-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 5vw, 80px);
}
.ct-faq-item {
  border-bottom: 1px solid var(--line);
}
.ct-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font-family: var(--display);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-align: left;
  transition: color 0.2s;
}
.ct-faq-q:hover { color: var(--accent); }
.ct-faq-arrow {
  font-size: 20px;
  font-weight: 300;
  color: var(--fg-mute);
  transition: transform 0.35s cubic-bezier(.2,.6,.2,1), color 0.2s;
  flex-shrink: 0;
  line-height: 1;
  font-family: var(--mono);
}
.ct-faq-item.is-open .ct-faq-arrow { transform: rotate(45deg); color: var(--accent); }
.ct-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(.2,.6,.2,1), padding 0.35s;
}
.ct-faq-item.is-open .ct-faq-a { max-height: 360px; padding-bottom: 24px; }
.ct-faq-a p {
  margin: 0;
  font-size: 14.5px;
  color: var(--fg-dim);
  line-height: 1.65;
  max-width: 56ch;
}
@media (max-width: 820px) { .ct-faq-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MULTI-PAGE SYSTEM
   Shared pieces for the section pages (services, network,
   platform, industries). Each page then has its own layout
   vocabulary below, so the site is not one template repeated.
   ============================================================ */

/* ── nav: six destinations, and a real mobile sheet ── */
@media (max-width: 1240px) { .status-pill { display: none; } }
@media (max-width: 1120px) { .nav-links { gap: 20px; } }
@media (max-width: 980px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 68px);
    height: calc(100svh - 68px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 12px var(--pad-x) calc(40px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    font-family: var(--display);
    font-size: clamp(24px, 7vw, 40px);
    line-height: 1.2;
    color: var(--fg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--line-soft); letter-spacing: -0.02em; }
  .nav-links a::after { display: none; }
  .nav-burger { width: 44px; height: 44px; }
  /* the link list leaves the row to become the sheet, so the quote button and
     burger take the last column and sit against the right edge */
  .nav-inner { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .nav-cta { grid-column: 2; justify-self: end; gap: 10px; }
  .nav-open .nav-links { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease, transform 0.3s ease; }
  .nav-open .nav-current { color: var(--accent) !important; }
}
body.nav-open { overflow: hidden; }

/* ── Services and History dropdowns in the nav (toggled by nav-theme.js; hover/focus opens them on desktop) ── */
.nav-drop { position: relative; display: flex; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font: inherit;
  color: inherit;
  cursor: none;
  transition: color 0.2s;
}
.nav-drop-btn:hover, .nav-drop.is-open .nav-drop-btn { color: var(--fg); }
.nav-drop-chev { transition: transform 0.25s; }
.nav-drop.is-open .nav-drop-chev { transform: rotate(180deg); }
.nav-drop-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: var(--drop-left, 50%);
  width: 420px;
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 30px 60px -30px rgba(10, 8, 28, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--drop-x, -50%), -6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
  z-index: 60;
}
.nav-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }  /* hover bridge */
@media (min-width: 981px) {
  .nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel { opacity: 1; visibility: visible; transform: translate(var(--drop-x, -50%), 0); transition: opacity 0.2s, transform 0.2s; }
}
.nav-drop.is-open .nav-drop-panel { opacity: 1; visibility: visible; transform: translate(var(--drop-x, -50%), 0); transition: opacity 0.2s, transform 0.2s; }
/* Services: two columns, anchored to the left of its label so it never runs off screen */
.nav-drop-services { --drop-left: -22px; --drop-x: 0px; }
.nav-drop-services .nav-drop-panel { width: 600px; grid-template-columns: 1fr 1fr; }
.nav-drop-services .nav-drop-kicker, .nav-links .nav-drop-panel a.nav-drop-all { grid-column: 1 / -1; }
.nav-links .nav-drop-panel a.nav-drop-all { margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); border-radius: 10px 10px 0 0; }
.nav-drop-kicker { padding: 6px 12px 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.nav-links .nav-drop-panel a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--sans);
  transition: background 0.2s;
}
.nav-links .nav-drop-panel a::after { display: none; }
.nav-links .nav-drop-panel a:hover, .nav-links .nav-drop-panel a.nav-current { background: var(--bg-elev); }
.nav-drop-panel a i { grid-row: span 2; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 3px; }
.nav-drop-panel a b { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: -0.02em; color: var(--fg); }
.nav-drop-panel a span { font-size: 12.5px; color: var(--fg-mute); }
@media (max-width: 980px) {
  .nav-drop { display: block; border-bottom: 1px solid var(--line-soft); }
  .nav-drop-btn { width: 100%; justify-content: space-between; padding: 14px 0; font: inherit; letter-spacing: -0.02em; }
  .nav-drop-panel {
    position: static;
    width: auto;
    display: none;
    padding: 0 0 14px;
    border: 0;
    box-shadow: none;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-drop.is-open .nav-drop-panel { display: grid; transform: none; }
  .nav-drop-panel::before, .nav-drop-kicker { display: none; }
  .nav-links .nav-drop-panel a { border-bottom: 0; padding: 10px 0; }
  .nav-drop-panel a b { font-size: 18px; }
  .nav-drop-services .nav-drop-panel { width: auto; grid-template-columns: minmax(0, 1fr); }
  .nav-links .nav-drop-panel a.nav-drop-all { margin-bottom: 0; border-bottom: 0; }
}

/* ── animated logo: one copy per nav theme, crossfaded (assets made from tdnt-logo-animated.gif) ── */
.logo-anim { position: relative; display: block; width: 123px; height: 48px; flex: none; }
.logo-anim img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.4s ease; }
.logo-anim .on-light-only { opacity: 0; }
.nav.on-light .logo-anim .on-light-only { opacity: 1; }
.nav.on-light .logo-anim .on-dark-only { opacity: 0; }
@media (max-width: 560px) { .logo-anim { width: 103px; height: 40px; } }

.nav-burger path { transition: d 0.3s ease; }
.nav-open .nav-burger path { d: path("M2 1L12 9M2 9L12 1"); }

/* ── page banner: the one dark section on every section page ── */
.pg-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--midnight);
  color: var(--fg);
  padding: calc(68px + clamp(44px, 8vh, 96px)) 0 clamp(52px, 7vw, 100px);
}
.pg-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.pg-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.pg-kicker strong { color: var(--fg); font-weight: 500; }
.pg-h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 7.2vw, 124px);
  line-height: 1.2;
  letter-spacing: -0.045em;
  margin: 26px 0 0;
  text-wrap: balance;
}
.pg-h1 em { font-style: oblique -10deg; color: var(--accent); }
.pg-lede {
  margin: 26px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--fg-dim);
}
.pg-lede strong { color: var(--fg); font-weight: 500; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pg-crumbs {
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.pg-crumbs a:hover { color: var(--fg); }

/* ── page heading for light sections: number rail + title ── */
.pg-head {
  display: grid;
  grid-template-columns: minmax(64px, 120px) minmax(0, 1.3fr) minmax(240px, 0.8fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.pg-head-num {
  font-family: var(--display);
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  align-self: start;
}
.pg-head-title {
  font-family: var(--display);
  /* in step with the home page section titles, so a short title sets on one line */
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.2;
  letter-spacing: -0.035em;
  margin: 14px 0 0;
  text-wrap: balance;
}
.pg-head-title em { font-style: oblique -10deg; color: var(--accent); }
.pg-head-intro { margin: 0; color: var(--fg-dim); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; }
@media (max-width: 900px) {
  .pg-head { grid-template-columns: 1fr; align-items: start; }
  .pg-head-num { font-size: 40px; }
}

/* ── closing call to action, shared by section pages ── */
.pg-cta { text-align: left; }
.pg-cta-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.pg-cta h2 {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.2;
  letter-spacing: -0.045em;
  margin: 0;
  text-wrap: balance;
}
.pg-cta h2 em { font-style: oblique -10deg; color: var(--accent); }
.pg-cta p { color: var(--fg-dim); font-size: 16px; line-height: 1.6; margin: 0 0 22px; max-width: 40ch; }
.pg-cta-meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mute);
}
.pg-cta-meta a { color: var(--fg); display: inline-flex; align-items: center; min-height: 40px; }
.pg-cta-meta span { display: inline-flex; align-items: center; min-height: 40px; }
.pg-cta-meta a:hover { color: var(--accent); }
@media (max-width: 820px) { .pg-cta-inner { grid-template-columns: 1fr; } }

/* "go deeper" link that closes a home page section and opens its own page */
.sec-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 56px);
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: -0.02em;
  transition: color 0.25s, padding 0.3s;
}
.sec-more .arr { font-family: var(--sans); color: var(--accent); transition: transform 0.3s; }
.sec-more:hover { color: var(--accent); padding-left: 12px; }
.sec-more:hover .arr { transform: translateX(6px); }

/* light palette for the animated service visuals (read by service-visuals.js) */
.vis-light {
  --vis-fg: #0a081c;
  --vis-dim: rgba(10, 8, 28, 0.48);
  --vis-chip-a: #fffbfa;
  --vis-chip-b: #ecf1e5;
}

/* ============================================================
   PAGE · SERVICES  ("the switchboard")
   ============================================================ */
.svx-banner-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.svx-banner .pg-h1 { font-size: clamp(44px, 6.2vw, 104px); }
/* patch panel: one port per module */
.svx-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-elev), var(--midnight));
  padding: 18px;
  box-shadow: 0 40px 80px -40px rgba(10, 8, 28, 0.9);
}
.svx-panel > :not(.svx-loom) { position: relative; z-index: 1; }
/* the cable loom (pages.js): every patched port drops a cord behind the panel into one trunk */
.svx-loom { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.svx-cable {
  fill: none;
  stroke: var(--cyan);
  stroke-opacity: 0.42;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(.6, 0, .2, 1), stroke 0.3s, stroke-opacity 0.3s, stroke-width 0.3s;
}
.svx-cable.is-hot { stroke: var(--ember); stroke-opacity: 1; stroke-width: 2.6; }
.svx-panel.is-focus .svx-cable:not(.is-hot) { stroke-opacity: 0.12; }
.svx-pk { fill: var(--cyan); }
.svx-pk.is-hot { fill: var(--ember); }
.svx-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.svx-screws { display: flex; gap: 6px; }
.svx-screws i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-card); }
.svx-ports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.svx-port {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px 12px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  /* solid, so the cords read as running behind the ports */
  background: color-mix(in srgb, var(--cloud) 4%, var(--midnight));
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.svx-port:hover { border-color: var(--accent); background: color-mix(in srgb, var(--ember) 9%, var(--midnight)); transform: translateY(-2px); }
.svx-jack {
  height: 34px;
  border-radius: 6px;
  background: var(--midnight);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 6px 10px rgba(10, 8, 28, 0.9);
  position: relative;
}
.svx-jack::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 44%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--line);
}
/* the plug: slides into the jack when the port is patched */
.svx-jack::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 4px;
  width: 40%;
  height: 16px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 75%, var(--midnight)), color-mix(in srgb, var(--cyan) 30%, var(--midnight)));
  box-shadow: 0 0 12px -2px var(--cyan);
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: transform 0.45s cubic-bezier(.3, 1.4, .5, 1), opacity 0.25s, background 0.3s, box-shadow 0.3s;
}
.svx-port.is-patched .svx-jack::before { opacity: 1; transform: translate(-50%, 0); }
.svx-port.is-hot .svx-jack::before { background: linear-gradient(180deg, var(--ember), color-mix(in srgb, var(--ember) 40%, var(--midnight))); box-shadow: 0 0 14px -2px var(--ember); }
.svx-led {
  position: absolute;
  bottom: 15px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 251, 250, 0.14);
  transition: background 0.3s, box-shadow 0.3s;
}
.svx-port.is-patched .svx-led { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.svx-port.is-patched.is-tx .svx-led { background: var(--cloud); box-shadow: 0 0 14px var(--cyan); transition: none; }
.svx-port.is-hot .svx-led { background: var(--ember); box-shadow: 0 0 12px var(--ember); }
.svx-port-ch { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-mute); }
.svx-port-name { font-family: var(--display); font-size: 15px; letter-spacing: -0.02em; line-height: 1; }
.svx-panel-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 4px 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
}
.svx-panel-foot strong { color: var(--accent2); font-weight: 500; }
@media (max-width: 1020px) { .svx-banner-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .svx-ports { grid-template-columns: repeat(2, 1fr); } }

/* specimen grid: each module as a spec card with its live visual */
.svx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.svx-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 14px;
  padding: clamp(20px, 2vw, 28px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  transition: background 0.3s;
  scroll-margin-top: 96px;
}
.svx-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.2, .7, .2, 1);
}
.svx-card:hover { background: var(--bg-elev); }
.svx-card:hover::before { transform: scaleX(1); }
.svx-card-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--fg-mute); }
.svx-card-top .arr { font-size: 14px; color: var(--fg); transition: transform 0.25s; }
.svx-card:hover .svx-card-top .arr { transform: translate(3px, -3px); color: var(--accent); }
.svx-num {
  font-family: var(--display);
  font-size: clamp(56px, 5.4vw, 88px);
  /* the digits stand 1.19 em tall: a 1.22 line box holds them, so they clear the label above */
  line-height: 1.22;
  margin-top: 4px;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  transition: -webkit-text-stroke-color 0.3s;
}
.svx-card:hover .svx-num { -webkit-text-stroke-color: var(--accent); }
.svx-card h3 { font-family: var(--display); font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -0.03em; line-height: 1.2; margin: 0; }
.svx-card h3 small { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--fg-mute); }
.svx-card p { margin: 0; color: var(--fg-dim); font-size: 14px; line-height: 1.55; }
.svx-vis {
  height: 128px;
  border-radius: 8px;
  background: var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.svx-vis svg { max-width: 100% !important; height: 100%; }
.svx-specs { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.svx-specs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-mute);
}
.svx-specs li b { font-weight: 500; color: var(--fg); text-align: right; }
@media (max-width: 1180px) { .svx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .svx-grid { grid-template-columns: 1fr; } }

/* stack builder: pick a profile, see the modules it runs */
.svx-builder { display: grid; grid-template-columns: minmax(260px, 0.8fr) 1.6fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.svx-profiles { display: grid; gap: 8px; }
.svx-profile {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  transition: border-color 0.25s, background 0.25s;
}
.svx-profile:hover { border-color: var(--fg-mute); }
.svx-profile.is-active { border-color: var(--accent); background: var(--bg-card); box-shadow: 0 0 0 1px var(--accent) inset; }
.svx-profile .ix { font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 3px; }
.svx-profile b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: -0.02em; }
.svx-profile span.s { display: block; margin-top: 4px; font-size: 13px; color: var(--fg-dim); line-height: 1.45; }
.svx-stage {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-card);
  padding: clamp(20px, 3vw, 36px);
}
.svx-stage-head { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.svx-stage h3 { font-family: var(--display); font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.035em; line-height: 1.2; margin: 18px 0 10px; }
.svx-stage > p { margin: 0 0 26px; color: var(--fg-dim); max-width: 56ch; line-height: 1.55; }
.svx-layers { display: grid; gap: 8px; }
.svx-layer {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: var(--bg);
  transition: transform 0.45s cubic-bezier(.2, .7, .2, 1), opacity 0.45s;
}
.svx-layer.is-core { border-color: var(--accent-line); background: var(--accent-faint); }
.svx-layer .ch { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--fg-mute); }
.svx-layer .nm { font-family: var(--display); font-size: 17px; letter-spacing: -0.02em; }
.svx-layer .nm small { margin-left: 10px; font-family: var(--sans); font-size: 13px; color: var(--fg-dim); letter-spacing: 0; }
.svx-layer .role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--line); color: var(--fg-dim); }
.svx-layer.is-core .role { border-color: var(--accent); color: var(--accent); }
.svx-layer.is-in { animation: svxIn 0.5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes svxIn { from { opacity: 0; transform: translateY(10px); } }
.svx-stage-foot { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--mono); font-size: 12px; color: var(--fg-mute); }
.svx-stage-foot b { color: var(--fg); font-weight: 500; }
@media (max-width: 900px) {
  .svx-builder { grid-template-columns: 1fr; }
  .svx-layer { grid-template-columns: 1fr auto; }
  .svx-layer .ch { display: none; }
  /* the module's note sits under its name instead of wrapping around it */
  .svx-layer .nm small { display: block; margin: 4px 0 0; line-height: 1.45; }
}

/* one core: modules converge into a single contract */
.svx-core { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.svx-core-diagram { width: 100%; height: auto; display: block; overflow: visible; }
.svx-core-diagram .flow { stroke-dasharray: 3 7; animation: svxFlow 2.4s linear infinite; }
@keyframes svxFlow { to { stroke-dashoffset: -40; } }
.svx-included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.svx-included li { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); }
.svx-included li:nth-child(odd) { padding-right: 20px; border-right: 1px solid var(--line); }
.svx-included li:nth-child(even) { padding-left: 20px; }
.svx-included b { display: block; font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: -0.02em; margin-bottom: 6px; }
.svx-included span { font-size: 13.5px; color: var(--fg-dim); line-height: 1.5; }
@media (max-width: 980px) { .svx-core { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .svx-included { grid-template-columns: 1fr; } .svx-included li:nth-child(odd) { border-right: 0; padding-right: 0; } .svx-included li:nth-child(even) { padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { .svx-core-diagram .flow { animation: none; } .svx-cable, .svx-jack::before { transition: none; } }

/* ============================================================
   PAGE · NETWORK  ("the map")
   ============================================================ */
.nwk-banner { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: clamp(40px, 6vw, 72px); }
.nwk-map-bg { position: absolute; inset: 68px 0 0 0; z-index: -1; }
/* the globe (world-map.js): sideways drags turn it, vertical swipes still scroll the page */
.nwk-map-bg canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.nwk-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 8, 28, 0.8) 0%, rgba(10, 8, 28, 0.25) 38%, rgba(10, 8, 28, 0) 54%),
    linear-gradient(0deg, rgba(10, 8, 28, 0.9) 0%, rgba(10, 8, 28, 0) 30%);
}
.nwk-banner-inner { width: 100%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
/* the copy sits over the globe: its empty space lets a press through to the globe, so it can be
   dragged from anywhere on it, while the text, buttons and figures stay selectable and clickable */
.nwk-banner-inner, .nwk-banner-inner > div { pointer-events: none; }
.nwk-banner-inner > div > * { pointer-events: auto; }
.nwk-banner .pg-h1 { font-size: clamp(44px, 6.6vw, 112px); max-width: 11ch; }
.nwk-live { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.nwk-live div { padding: 16px 0 0; }
.nwk-live div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.nwk-live b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.03em; }
.nwk-live span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.nwk-legend {
  position: absolute;
  top: calc(68px + 24px);
  right: var(--pad-x);
  display: grid;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  pointer-events: none;
}
.nwk-legend span { display: flex; align-items: center; gap: 10px; }
.nwk-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.nwk-legend i.r { width: 18px; height: 2px; border-radius: 1px; background: var(--ember); }
.nwk-legend i.c { width: 18px; height: 2px; border-radius: 1px; background: var(--cyan); }
.nwk-legend .nwk-legend-hint { margin-top: 6px; color: var(--fg-mute); }
@media (max-width: 900px) {
  .nwk-banner-inner { grid-template-columns: 1fr; }
  .nwk-legend { display: none; }
  .nwk-banner { min-height: 0; padding-top: calc(68px + min(92vw, 520px)); }
  .nwk-map-bg { bottom: auto; height: min(100vw, 560px); }
  .nwk-banner::after { background: linear-gradient(0deg, var(--midnight) calc(100% - 68px - min(92vw, 520px)), rgba(10, 8, 28, 0) calc(100% - 68px - min(76vw, 420px))); }
}

/* region explorer */
.nwk-explorer { display: grid; grid-template-columns: 1.55fr 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg-card); }
.nwk-explorer-map { position: relative; min-height: 540px; border-right: 1px solid var(--line); background: var(--bg-elev); overflow: hidden; }
.nwk-explorer-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nwk-tabs { position: absolute; left: 16px; top: 16px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.nwk-tab {
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: all 0.2s;
}
.nwk-tab:hover { color: var(--fg); border-color: var(--fg-mute); }
@media (hover: none), (max-width: 900px) { .nwk-tab { min-height: 40px; padding: 10px 16px; } }
.nwk-tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.nwk-panel { padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 20px; align-content: start; }
.nwk-panel-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.nwk-panel h3 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.4vw, 56px); letter-spacing: -0.04em; line-height: 0.95; margin: 0; }
.nwk-panel p { margin: 0; color: var(--fg-dim); line-height: 1.6; font-size: 15px; }
.nwk-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nwk-stats div { padding: 14px 0; }
.nwk-stats div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.nwk-stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: -0.03em; color: var(--accent); }
.nwk-stats span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.nwk-pops { display: flex; flex-wrap: wrap; gap: 8px; }
.nwk-pops span { font-family: var(--mono); font-size: 11.5px; padding: 6px 10px; border-radius: 6px; background: var(--accent-faint); border: 1px solid var(--accent-line); color: var(--fg); }
.nwk-pops span b { color: var(--accent); font-weight: 500; margin-right: 6px; }
/* every country shows at once: no box that scrolls inside the page */
.nwk-countries { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.nwk-countries span.nwk-countries-more { border-style: dashed; color: var(--fg-mute); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 3px 9px; }
.nwk-countries span { font-size: 12.5px; color: var(--fg-dim); padding: 3px 6px 3px 9px; border: 1px solid var(--line-soft); border-radius: 100px; cursor: default; transition: all 0.2s; }
.nwk-countries span em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; margin-left: 6px; padding: 1px 5px; border-radius: 100px; background: var(--accent-faint); color: var(--accent); }
.nwk-countries span:hover, .nwk-countries span:focus-visible { border-color: var(--ember); color: var(--fg); outline: none; }
.nwk-countries span[data-country] { cursor: pointer; }
.nwk-countries span.is-tracing { border-color: var(--ember); background: rgba(229, 88, 44, 0.08); color: var(--fg); }
.nwk-pops span[data-hub] { cursor: default; transition: background 0.2s, border-color 0.2s; }
.nwk-pops span[data-hub]:hover, .nwk-pops span[data-hub]:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); outline: none; }
.nwk-pops span[data-hub]:hover b, .nwk-pops span[data-hub]:focus-visible b { color: inherit; }

/* the live trace: one row per hop, each lit as the packet reaches it */
.nwk-trace { padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.nwk-trace-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 18px; margin-bottom: 8px; }
.nwk-trace-total { font-family: var(--mono); font-size: 11.5px; line-height: 18px; letter-spacing: 0.06em; color: var(--ember); white-space: nowrap; }
/* room for three hops at all times: the panel never changes height while a trace runs, so the
   map beside it never resizes mid-trace */
.nwk-trace-hops { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; position: relative; min-height: 102px; }
.nwk-trace-hops li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
  opacity: 0.28;
  transition: opacity 0.35s ease-out;
}
.nwk-trace-hops li:first-child { border-top: 0; }
.nwk-trace-hops li.is-on { opacity: 1; }
.nwk-trace-hops li.is-wait { grid-template-columns: 1fr; opacity: 1; font-size: 13px; color: var(--fg-mute); }
.nwk-trace-hops b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--ember); }
.nwk-trace-hops span { font-size: 14px; color: var(--fg); min-width: 0; }
.nwk-trace-hops span em { font-style: normal; margin-left: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--fg-mute); }
.nwk-trace-hops i { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--fg-dim); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .nwk-trace-hops li { transition: none; } }
/* map tooltip (world-map.js) */
.wmap-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--midnight);
  color: var(--cloud);
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 12px 30px -12px rgba(10, 8, 28, 0.5);
}
.wmap-tip.is-on { opacity: 1; }
.wmap-tip b { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: -0.02em; }
.wmap-tip span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: rgba(255, 251, 250, 0.7); }
@media (max-width: 980px) { .nwk-explorer { grid-template-columns: 1fr; } .nwk-explorer-map { min-height: clamp(380px, 104vw, 480px); border-right: 0; border-bottom: 1px solid var(--line); } }

/* points of presence: a departures board */
.nwk-board { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg-card); }
.nwk-board-head, .nwk-board-row {
  display: grid;
  grid-template-columns: 150px 1.1fr 0.8fr 1.3fr 110px;
  gap: 16px;
  align-items: center;
  padding: 14px clamp(16px, 2vw, 28px);
}
.nwk-board-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.nwk-board-row { border-bottom: 1px solid var(--line-soft); transition: background 0.2s; }
.nwk-board-row:last-child { border-bottom: 0; }
.nwk-board-row:hover { background: var(--accent-faint); }
.nwk-flaps { display: flex; gap: 3px; }
.nwk-flaps span {
  width: 30px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--midnight);
  color: var(--cloud);
  font-family: var(--display);
  font-size: 17px;
  position: relative;
  overflow: hidden;
}
.nwk-flaps span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 251, 250, 0.16); }
.nwk-board-row.is-core .nwk-flaps span { background: var(--cobalt); }
.nwk-city { font-family: var(--display); font-size: 18px; letter-spacing: -0.02em; }
.nwk-board-row .rg, .nwk-board-row .rl { font-size: 14px; color: var(--fg-dim); }
.nwk-board-row .rl b { color: var(--fg); font-weight: 500; }
.nwk-state { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--accent); }
.nwk-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blip 2s ease-in-out infinite; }
@media (max-width: 860px) {
  .nwk-board-head { display: none; }
  .nwk-board-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
  .nwk-board-row .rg { display: none; }
  .nwk-board-row .rl { grid-column: 2 / 4; grid-row: 2; }
}
@media (max-width: 480px) {
  .nwk-board-row { column-gap: 12px; padding: 12px 14px; }
  .nwk-flaps span { width: 24px; height: 32px; font-size: 14px; }
  .nwk-city { font-size: 16px; }
  .nwk-board-row .rl { font-size: 13px; }
}

/* latency matrix */
.nwk-matrix-wrap { overflow-x: auto; }
.nwk-matrix { border-collapse: separate; border-spacing: 4px; margin: 0 auto; font-family: var(--mono); }
.nwk-matrix th { font-size: 10.5px; letter-spacing: 0.14em; color: var(--fg-mute); font-weight: 500; padding: 6px; }
.nwk-matrix tbody th { text-align: right; padding-right: 12px; }
.nwk-matrix td {
  width: clamp(54px, 7vw, 92px);
  height: clamp(44px, 5vw, 60px);
  text-align: center;
  font-size: 13px;
  border-radius: 8px;
  color: var(--fg);
  transition: transform 0.2s, box-shadow 0.2s;
}
.nwk-matrix td.is-dark { color: var(--cloud); }
.nwk-matrix td.is-self { background: transparent; color: var(--fg-mute); border: 1px dashed var(--line); }
.nwk-matrix td:not(.is-self):hover { transform: scale(1.08); box-shadow: 0 0 0 2px var(--ember); }
.nwk-matrix.is-hover td:not(.is-row):not(.is-col):not(.is-self) { opacity: 0.35; }
.nwk-matrix-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 22px; font-size: 13px; color: var(--fg-mute); line-height: 1.5; }
.nwk-scale { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; }
.nwk-scale i { width: 160px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(0, 51, 153, 0.08), var(--cobalt)); }

/* the network in figures */
.nwk-figures { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--fg); }
.nwk-figures div { padding: 22px 18px 0 0; }
.nwk-figures div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.nwk-figures b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.3vw, 56px); letter-spacing: -0.045em; line-height: 0.9; white-space: nowrap; }
.nwk-figures b em { font-style: normal; color: var(--accent); }
.nwk-figures span { display: block; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
@media (max-width: 980px) { .nwk-figures { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } .nwk-figures div:nth-child(odd) { border-left: 0; padding-left: 0; } }
/* phones: one figure per row, the number left and its label right */
@media (max-width: 520px) {
  .nwk-figures { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .nwk-figures div, .nwk-figures div + div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .nwk-figures b { font-size: clamp(28px, 9vw, 40px); }
  .nwk-figures span { margin-top: 0; text-align: right; max-width: 16ch; }
}

/* ============================================================
   PAGE · PLATFORM  ("the pipeline")
   ============================================================ */
.plt-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 251, 250, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 251, 250, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, transparent, var(--midnight) 30%, var(--midnight) 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--midnight) 30%, var(--midnight) 70%, transparent);
}
/* sized so the whole banner, the call trace included, fits a laptop screen */
.plt-banner .pg-h1 { max-width: 15ch; font-size: clamp(44px, 5.6vw, 92px); }
.plt-banner .pg-lede { max-width: 64ch; }
@media (min-width: 900px) and (max-height: 820px) {
  .plt-banner { padding-top: calc(68px + 28px); }
  .plt-banner .pg-h1 { font-size: clamp(44px, 4.6vw, 72px); margin-top: 18px; }
  .plt-banner .pg-lede { margin-top: 18px; }
}
.plt-scope {
  margin-top: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px clamp(16px, 2.4vw, 28px) 10px;
  background: rgba(255, 251, 250, 0.02);
}
.plt-scope-head { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.plt-scope-head b { color: var(--accent2); font-weight: 500; }
.plt-scope svg { display: block; width: 100%; height: auto; margin-top: 6px; }
.plt-scope .lane { stroke-dasharray: 2 6; animation: svxFlow 1.6s linear infinite; }

/* scroll story: a sticky pipeline next to six stages */
.plt-story { display: grid; grid-template-columns: minmax(260px, 0.75fr) 1.25fr; gap: clamp(28px, 6vw, 110px); align-items: start; }
.plt-rail { position: sticky; top: 108px; display: grid; grid-template-columns: 70px 1fr; gap: 26px; height: calc(100vh - 160px); height: calc(100svh - 160px); max-height: 640px; }
.plt-pipe { position: relative; }
.plt-pipe::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; transform: translateX(-50%); background: var(--line); }
.plt-pipe-fill { position: absolute; left: 50%; top: 8px; width: 2px; transform: translateX(-50%); background: var(--accent); height: 0; }
.plt-node {
  position: absolute;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg-mute);
  transition: all 0.35s;
}
.plt-node.is-past { border-color: var(--accent); color: var(--accent); }
.plt-node.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(1.12); }
.plt-packet { position: absolute; left: 50%; top: 8px; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 6px rgba(229, 88, 44, 0.16); }
.plt-readout { align-self: center; display: grid; gap: 10px; }
.plt-readout .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
/* the clock: a line tall enough for the font's capitals, so it never runs into the label above,
   and each digit at its own width (this face's 0 is half as wide again as the others, so equal
   cells left a hole after a 1) */
.plt-readout .t { font-family: var(--display); font-size: clamp(56px, 6vw, 104px); line-height: 1.34; letter-spacing: -0.05em; }
.plt-readout .t .fig { width: auto; margin-inline: 0; }
.plt-readout [data-plt-time] { display: inline-block; }
.plt-readout .t small { font-size: 0.32em; letter-spacing: 0; margin-left: 6px; color: var(--fg-mute); }
.plt-readout .nm { font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; color: var(--accent); }
.plt-steps { display: grid; }
.plt-step { min-height: 72vh; padding: 0 0 clamp(40px, 6vw, 80px); display: grid; align-content: center; gap: 18px; opacity: 0.32; transition: opacity 0.4s; }
.plt-step.is-active { opacity: 1; }
.plt-step .badge { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--accent); }
.plt-step h3 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.8vw, 60px); letter-spacing: -0.04em; line-height: 1.2; margin: 0; }
.plt-step h3 em { font-style: oblique -10deg; color: var(--accent); }
.plt-step p { margin: 0; max-width: 54ch; color: var(--fg-dim); font-size: 16px; line-height: 1.65; }
.plt-specs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); max-width: 620px; }
.plt-specs div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.plt-specs div:nth-child(even) { padding: 12px 0 12px 16px; border-left: 1px solid var(--line-soft); }
.plt-specs span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); }
.plt-specs b { font-weight: 500; text-align: right; }
@media (max-width: 900px) {
  .plt-story { grid-template-columns: 1fr; }
  /* the clock pinned under the nav: a soft shadow, so the stages read as sliding under it */
  .plt-rail { top: 68px; z-index: 2; height: auto; grid-template-columns: 1fr; padding: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 14px 18px -14px rgba(10, 8, 28, 0.28); }
  .plt-pipe { display: none; }
  .plt-readout { grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 16px; }
  .plt-readout .k { grid-column: 1 / -1; }
  .plt-readout .t { font-size: 40px; line-height: 1.22; }
  .plt-step { scroll-margin-top: 170px; }
  .plt-scope { overflow-x: auto; }
  .plt-scope svg { min-width: 720px; }
  .plt-step { min-height: 0; opacity: 1; padding: 36px 0; border-bottom: 1px solid var(--line); }
  .plt-specs { grid-template-columns: 1fr; }
  .plt-specs div:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* defence in depth: an exploded isometric stack */
.plt-depth { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.plt-iso { width: 100%; height: auto; display: block; overflow: visible; }
.plt-iso .plate { cursor: pointer; transition: transform 0.45s cubic-bezier(.2, .7, .2, 1); }
.plt-iso .plate .top { fill: var(--cloud); stroke: rgba(0, 51, 153, 0.45); stroke-width: 1; transition: fill 0.3s; }
.plt-iso .plate .l { fill: rgba(0, 51, 153, 0.16); }
.plt-iso .plate .r { fill: rgba(0, 51, 153, 0.3); }
.plt-iso .plate .tag { font-family: "Elms Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; fill: rgba(10, 8, 28, 0.55); transition: fill 0.3s; }
.plt-iso .plate.is-active { transform: translateX(-26px); }
.plt-iso .plate.is-active .top { fill: var(--cobalt); stroke: var(--cobalt); }
.plt-iso .plate.is-active .tag { fill: var(--ember); }
/* the packet that drops through the stack, and the flash on each plate it crosses */
.plt-iso .drop { stroke: rgba(229, 88, 44, 0.45); stroke-width: 1; stroke-dasharray: 2 5; }
.plt-iso .pkt { fill: var(--ember); filter: drop-shadow(0 0 6px rgba(229, 88, 44, 0.7)); pointer-events: none; }
.plt-iso .plate.is-hit:not(.is-active) .top { fill: color-mix(in srgb, var(--ember) 18%, var(--cloud)); stroke: var(--ember); }
.plt-layers { display: grid; align-content: start; border-top: 1px solid var(--line); }
.plt-layer { display: grid; grid-template-columns: 44px 1fr; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; transition: background 0.2s; }
.plt-layer .n { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); padding-top: 4px; }
.plt-layer b { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: -0.02em; }
.plt-layer b small { margin-left: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--fg-mute); }
.plt-layer p { grid-column: 2; margin: 0; max-height: 0; overflow: hidden; color: var(--fg-dim); font-size: 14px; line-height: 1.55; transition: max-height 0.4s ease, margin 0.4s ease; }
.plt-layer.is-active .n { color: var(--accent); }
.plt-layer.is-active b { color: var(--accent); }
.plt-layer.is-active p { max-height: var(--h, 120px); margin-top: 4px; }
@media (max-width: 900px) { .plt-depth { grid-template-columns: 1fr; } }

/* operations: escalation ladder and the SLA ledger */
.plt-ops { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.plt-ladder { display: grid; gap: 12px; counter-reset: rung; }
.plt-rung { position: relative; padding: 20px 22px 20px 72px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); }
.plt-rung:nth-child(2) { margin-left: 24px; }
.plt-rung:nth-child(3) { margin-left: 48px; }
.plt-rung::before { counter-increment: rung; content: "L" counter(rung); position: absolute; left: 20px; top: 20px; font-family: var(--display); font-size: 22px; color: var(--accent); }
.plt-rung b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: -0.02em; }
.plt-rung span { display: block; margin-top: 6px; font-size: 14px; color: var(--fg-dim); line-height: 1.55; }
.plt-rung em { display: inline-block; margin-top: 10px; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
.plt-ledger { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--fg); }
.plt-ledger li { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.plt-ledger .k { font-size: 15px; }
.plt-ledger .dots { flex: 1; border-bottom: 1px dotted var(--fg-mute); transform: translateY(-4px); opacity: 0.6; }
.plt-ledger .v { font-family: var(--display); font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.02em; color: var(--accent); white-space: nowrap; }
@media (max-width: 900px) { .plt-ops { grid-template-columns: 1fr; } .plt-rung:nth-child(n) { margin-left: 0; } }

/* standards: a periodic table of the stack */
.plt-table { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.plt-el {
  position: relative;
  aspect-ratio: 1 / 1.05;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
  display: grid;
  grid-template-rows: auto 1fr auto;
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.plt-el:hover { transform: translateY(-3px); border-color: var(--accent); }
.plt-el .no { font-family: var(--mono); font-size: 10px; color: var(--fg-mute); }
.plt-el .sym { align-self: center; font-family: var(--display); font-size: clamp(20px, 2.2vw, 32px); letter-spacing: -0.03em; line-height: 1; }
.plt-el .nm { font-size: 11.5px; color: var(--fg-dim); line-height: 1.35; }
.plt-el.g-sec { background: var(--accent-faint); }
.plt-el.g-sec .sym { color: var(--accent); }
.plt-el.g-tel .sym { color: var(--fg); }
.plt-el.g-ops .sym { color: var(--ember); }
.plt-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
.plt-legend span { display: inline-flex; align-items: center; gap: 8px; }
.plt-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line); }
.plt-legend i.s { background: var(--accent); border-color: var(--accent); }
.plt-legend i.t { background: var(--fg); border-color: var(--fg); }
.plt-legend i.o { background: var(--ember); border-color: var(--ember); }
@media (max-width: 980px) { .plt-table { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .plt-table { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .plt-scope .lane { animation: none; } }

/* ============================================================
   PAGE · INDUSTRIES  ("the verticals")
   ============================================================ */
.vrt-banner-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.vrt-banner .pg-h1 { font-size: clamp(44px, 6.4vw, 108px); }
/* the rotating word and its full stop travel together: the stop never wraps onto a line alone */
.vrt-rotor-end { white-space: nowrap; }
.vrt-rotor { display: inline-block; position: relative; color: var(--accent); font-style: oblique -10deg; }
.vrt-rotor-word { display: inline-block; }
/* src/pages.js holds the rotor at its widest word and slides the full stop in with a transform,
   so a word change never moves anything in the layout */
.vrt-rotor-dot { display: inline-block; }
.vrt-rotor-word.is-out { animation: vrtOut 0.35s cubic-bezier(.5, 0, .75, 0) both; }
.vrt-rotor-word.is-in { animation: vrtIn 0.5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vrtOut { to { opacity: 0; transform: translateY(-0.35em); } }
@keyframes vrtIn { from { opacity: 0; transform: translateY(0.35em); } }
.vrt-dial { width: 100%; max-width: 460px; justify-self: center; display: block; overflow: visible; }
.vrt-dial .wedge { fill: rgba(255, 251, 250, 0.03); stroke: rgba(255, 251, 250, 0.16); stroke-width: 1; transition: fill 0.5s, stroke 0.5s; }
.vrt-dial .wedge.is-active { fill: rgba(229, 88, 44, 0.22); stroke: var(--ember); }
.vrt-dial .lbl { font-family: "Elms Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; fill: rgba(255, 251, 250, 0.5); transition: fill 0.5s; }
.vrt-dial .lbl.is-active { fill: var(--cloud); }
/* the pointer swings to the active wedge; an outer orbit and a radar sweep keep the dial alive */
.vrt-dial .vrt-pointer, .vrt-dial .vrt-orbit, .vrt-dial .vrt-sweep { transform-box: view-box; transform-origin: 230px 230px; }
.vrt-dial .vrt-pointer { transition: transform 0.9s cubic-bezier(.65, 0, .25, 1); filter: drop-shadow(0 0 6px rgba(229, 88, 44, 0.6)); }
.vrt-dial .vrt-orbit { animation: vrtSpin 48s linear infinite; }
.vrt-dial .vrt-sweep { animation: vrtSpin 9s linear infinite; }
@keyframes vrtSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vrt-dial .vrt-orbit, .vrt-dial .vrt-sweep { animation: none; } .vrt-dial .vrt-pointer { transition: none; } }
.vrt-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.vrt-index a { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; padding: 7px 12px; border: 1px solid var(--line); border-radius: 100px; color: var(--fg-dim); transition: all 0.2s; }
.vrt-index a b { color: var(--accent); font-weight: 500; margin-right: 6px; }
.vrt-index a:hover, .vrt-index a.is-active { color: var(--fg); border-color: var(--accent); }
@media (hover: none), (max-width: 900px) { .vrt-index a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; } }
@media (max-width: 980px) { .vrt-banner-grid { grid-template-columns: minmax(0, 1fr); } .vrt-dial { max-width: 340px; } }

/* bento of verticals */
.vrt-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(260px, auto); gap: 12px; }
.vrt-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-card);
  scroll-margin-top: 96px;
  transition: border-color 0.3s, transform 0.3s;
}
.vrt-card:hover { border-color: var(--accent); transform: translateY(-3px); }
/* wide cards split in two: the story on the left, a figure and what is included on the right */
.vrt-card.is-wide { grid-column: span 2; grid-template-columns: 1.3fr 1fr; column-gap: clamp(20px, 2.4vw, 36px); align-items: stretch; }
.vrt-card-main { display: grid; align-content: start; gap: 14px; }
.vrt-card-side { display: grid; align-content: space-between; gap: 22px; padding-left: clamp(18px, 2vw, 30px); border-left: 1px solid var(--line); }
.vrt-card-side .vrt-stat { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.vrt-list { list-style: none; margin: 0; padding: 0; display: grid; }
.vrt-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-dim); }
.vrt-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.vrt-card.is-feature { background: var(--cobalt); border-color: var(--cobalt); color: var(--cloud); --fg: var(--cloud); --fg-dim: rgba(255, 251, 250, 0.74); --fg-mute: rgba(255, 251, 250, 0.55); --line: rgba(255, 251, 250, 0.24); --accent: var(--cloud); }
.vrt-card.is-feature:hover { border-color: var(--ember); }
.vrt-card.is-feature .vrt-mods a:hover { border-color: var(--ember); color: var(--cloud); background: rgba(229, 88, 44, 0.24); }
.vrt-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.vrt-card .no { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg-mute); }
.vrt-ico { width: 44px; height: 44px; color: var(--accent); }
.vrt-card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.03em; line-height: 1.12; }
.vrt-card.is-feature h3 { font-size: clamp(30px, 3vw, 46px); }
.vrt-card p { margin: 0; color: var(--fg-dim); font-size: 14.5px; line-height: 1.55; }
.vrt-card .need { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.vrt-stat { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; }
.vrt-stat b { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.6vw, 56px); letter-spacing: -0.04em; line-height: 1; }
.vrt-stat span { font-size: 13px; color: var(--fg-dim); line-height: 1.4; }
.vrt-mods { display: flex; flex-wrap: wrap; gap: 6px; }
.vrt-mods a { font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 100px; border: 1px solid var(--line); color: var(--fg); transition: all 0.2s; }
.vrt-mods a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 1100px) { .vrt-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .vrt-card.is-wide { grid-template-columns: 1fr; row-gap: 22px; }
  .vrt-card-side { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 620px) { .vrt-bento { grid-template-columns: 1fr; } .vrt-card.is-wide { grid-column: auto; } }

/* industry by module matrix */
.vrt-matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); }
.vrt-matrix { width: 100%; min-width: 760px; border-collapse: collapse; }
.vrt-matrix th, .vrt-matrix td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); text-align: center; }
.vrt-matrix thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); font-weight: 500; border-bottom: 1px solid var(--line); }
.vrt-matrix thead th a:hover { color: var(--accent); }
.vrt-matrix tbody th { text-align: left; font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; padding-left: 22px; }
.vrt-matrix tbody tr:last-child th, .vrt-matrix tbody tr:last-child td { border-bottom: 0; }
.vrt-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.vrt-dot.core { background: var(--accent); }
.vrt-dot.opt { border: 1.5px solid var(--accent); }
.vrt-matrix .is-hl { background: var(--accent-faint); }
/* phones: no sideways-scrolling table; each industry is its name and its modules as chips,
   core with a filled dot, add-on with a ring */
@media (max-width: 640px) {
  .vrt-matrix-wrap { overflow: visible; }
  .vrt-matrix { min-width: 0; }
  .vrt-matrix thead { display: none; }
  .vrt-matrix, .vrt-matrix tbody { display: block; }
  .vrt-matrix tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
  .vrt-matrix tbody tr:last-child { border-bottom: 0; }
  .vrt-matrix tbody th { display: block; width: 100%; padding: 0 0 6px; border: 0; white-space: normal; font-size: 18px; }
  .vrt-matrix td { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border: 1px solid var(--line); border-radius: 100px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--fg); }
  .vrt-matrix td:empty { display: none; }
  .vrt-matrix td::after { content: attr(data-label); }
  .vrt-matrix .vrt-dot { width: 9px; height: 9px; }
  .vrt-matrix .is-hl { background: none; }
}
.vrt-matrix-legend { display: flex; gap: 22px; margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
.vrt-matrix-legend span { display: inline-flex; align-items: center; gap: 8px; }

/* example flows as time-stamped timelines */
.vrt-flows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vrt-flow { border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 2.2vw, 30px); background: var(--bg-card); }
.vrt-flow-head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.vrt-flow-head b { color: var(--accent); font-weight: 500; }
.vrt-flow h3 { margin: 16px 0 22px; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.03em; line-height: 1.14; }
.vrt-flow ol { list-style: none; margin: 0; padding: 0; position: relative; }
.vrt-flow ol::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.vrt-flow li { position: relative; display: grid; grid-template-columns: 1fr; gap: 3px; padding: 0 0 18px 26px; }
.vrt-flow li::before { content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-card); border: 1.5px solid var(--accent); }
.vrt-flow li:last-child { padding-bottom: 0; }
.vrt-flow li:last-child::before { background: var(--accent); }
.vrt-flow time { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.vrt-flow li span { font-size: 14px; color: var(--fg-dim); line-height: 1.5; }
.vrt-flow li span b { color: var(--fg); font-weight: 500; }
@media (max-width: 1000px) { .vrt-flows { grid-template-columns: 1fr; } }

/* ============================================================
   HOME · 09 THE PEOPLE: on-call roster (.crew-*, driven by src/home-team.js)
   A viewfinder screen for one person beside a roster in the same
   language as the security stack. Desk tones: Leadership Midnight,
   SMS Cobalt, Voice Ember.
   ============================================================ */
.crew-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-card);
}
.crew-screen, .crew-row { --tone: var(--cobalt); }
.crew-screen.is-voice, .crew-row.is-voice { --tone: var(--ember); }
.crew-screen.is-lead, .crew-row.is-lead { --tone: var(--midnight); }

/* the screen */
.crew-screen {
  position: relative;
  min-height: clamp(560px, 46vw, 680px);
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--midnight) 9%, transparent) 1px, transparent 1.5px) 0 0 / 12px 12px,
    var(--bg-elev);
}
/* desk-tone disc behind the head, and a slow dashed signal ring around it (placed on the frame) */
.crew-frame::before, .crew-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 2%;
  width: 66%;
  aspect-ratio: 1;
  margin-left: -33%;
  border-radius: 50%;
  transition: background 0.6s, border-color 0.6s;
}
.crew-frame::before { background: color-mix(in srgb, var(--tone) 13%, transparent); }
.crew-frame::after {
  top: calc(2% - 30px);
  width: calc(66% + 60px);
  margin-left: calc(-33% - 30px);
  border: 1px dashed color-mix(in srgb, var(--tone) 32%, transparent);
  animation: crewSpin 60s linear infinite;
}
@keyframes crewSpin { to { transform: rotate(360deg); } }
.crew-hud {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.crew-hud b { font-weight: 500; color: var(--fg); }
.crew-hud-live { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-dim); }
.crew-hud-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--ember); animation: blip 1.6s ease-in-out infinite; }
.crew-big {
  position: absolute;
  z-index: -1;
  left: clamp(16px, 2.2vw, 28px);
  top: 54px;
  font-family: var(--display);
  font-size: clamp(120px, 15vw, 230px);
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.2px color-mix(in srgb, var(--tone) 34%, transparent);
  transition: -webkit-text-stroke-color 0.6s;
}
.crew-frame {
  position: absolute;
  z-index: 0;
  right: 3%;
  bottom: 0;
  height: 84%;
  max-width: 78%;
  aspect-ratio: 4 / 5;
}
.crew-frame i { position: absolute; width: 22px; height: 22px; border: 0 solid color-mix(in srgb, var(--tone) 55%, transparent); transition: border-color 0.6s; }
.crew-frame i:nth-of-type(1) { top: 2%; left: 4%; border-top-width: 1.5px; border-left-width: 1.5px; }
.crew-frame i:nth-of-type(2) { top: 2%; right: 4%; border-top-width: 1.5px; border-right-width: 1.5px; }
.crew-frame i:nth-of-type(3) { bottom: 6%; left: 4%; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.crew-frame i:nth-of-type(4) { bottom: 6%; right: 4%; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.crew-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transform-origin: 50% 100%;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2, .7, .2, 1);
}
.crew-img.is-on { opacity: 1; transform: none; }
.crew-img:not([src]) { display: none; }

/* the name card over the screen */
.crew-card {
  position: absolute;
  z-index: 3;
  left: clamp(16px, 2.2vw, 28px);
  bottom: clamp(16px, 2.2vw, 28px);
  width: min(330px, 52%);
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-card);
  box-shadow: 0 24px 48px -30px rgba(10, 8, 28, 0.45);
}
.crew-card.is-swap > * { animation: crewIn 0.5s cubic-bezier(.2, .7, .2, 1) both; }
.crew-card.is-swap > :nth-child(2) { animation-delay: 0.04s; }
.crew-card.is-swap > :nth-child(3) { animation-delay: 0.08s; }
.crew-card.is-swap > :nth-child(4) { animation-delay: 0.12s; }
@keyframes crewIn { from { opacity: 0; transform: translateY(6px); } }
.crew-card-desk { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tone); }
.crew-card-desk::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.crew-screen .crew-card-desk { color: var(--tone); }
.crew-name { margin: 10px 0 4px; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.14; letter-spacing: -0.03em; }
.crew-role { margin: 0 0 12px; font-size: 13.5px; color: var(--fg-dim); }
.crew-lines { display: grid; }
.crew-line { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 0; border-top: 1px dashed var(--line); }
.crew-line span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.crew-line b { font-weight: 500; font-size: 14px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s; }
.crew-line:hover b { color: var(--accent); }
.crew-profile { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
@media (pointer: coarse) { .crew-profile { min-height: 44px; } }
.crew-profile .arr { transition: transform 0.3s; }
.crew-profile:hover .arr { transform: translateX(5px); }

/* the roster */
.crew-roster { display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: clamp(22px, 2.6vw, 34px); }
.crew-roster-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.crew-roster-head b { font-weight: 500; color: var(--fg); }
.crew-roster-head .blip { display: inline-flex; align-items: center; gap: 8px; }
.crew-roster-head .blip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-mute); transition: background 0.3s, box-shadow 0.3s; }
.crew-grid.is-scanning .crew-roster-head .blip::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blip 1.6s ease-in-out infinite; }
.crew-list { display: grid; align-content: start; gap: 6px; }
.crew-group { display: flex; justify-content: space-between; padding: 10px 4px 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.crew-group:first-child { padding-top: 4px; }
.crew-row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 26px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-elev);
  text-align: left;
  color: var(--fg);
  overflow: hidden;
  transition: background 0.3s, border-color 0.3s, transform 0.3s cubic-bezier(.2, .6, .2, 1);
}
.crew-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone); transform: scaleY(0); transition: transform 0.4s; }
.crew-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tone); transform: scaleX(0); transform-origin: 0 50%; }
.crew-row.is-timing::after { animation: crewProgress var(--crew-dwell, 4600ms) linear forwards; }
@keyframes crewProgress { to { transform: scaleX(1); } }
.crew-row:hover, .crew-row.is-active { background: var(--bg-card); border-color: color-mix(in srgb, var(--tone) 38%, transparent); transform: translateX(4px); }
.crew-row.is-active::before { transform: scaleY(1); }
.crew-row:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.crew-row-ch { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--fg-mute); transition: color 0.3s; }
.crew-row.is-active .crew-row-ch, .crew-row:hover .crew-row-ch { color: var(--tone); }
.crew-row-face { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--tone) 12%, var(--sage)); box-shadow: 0 0 0 2px transparent; transition: box-shadow 0.3s; }
.crew-row-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.crew-row.is-active .crew-row-face { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--tone); }
.crew-row-txt { display: grid; gap: 1px; min-width: 0; }
.crew-row-txt b { font-family: var(--display); font-weight: 400; font-size: 14.5px; line-height: 1.25; letter-spacing: -0.01em; }
.crew-row-txt span { font-size: 12px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* role icon tile: SMS, Voice, CEO, Growth */
.crew-row-ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg-mute);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.crew-row.is-active .crew-row-ico, .crew-row:hover .crew-row-ico {
  color: var(--tone);
  border-color: color-mix(in srgb, var(--tone) 40%, transparent);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
}
/* leadership icons share the logo's Ember dot when their row is live */
.crew-row-ico .ico-fill, .crew-row-ico .ico-dot { fill: currentColor; transition: fill 0.3s; }
.crew-row.is-active .crew-row-ico .ico-dot, .crew-row:hover .crew-row-ico .ico-dot { fill: var(--ember); }
.crew-row-ico .ico-new { fill: var(--ember); }  /* the Director's new node stays lit, so the two marks never read as the same */

@media (max-width: 1100px) {
  .crew-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .crew-card { width: min(300px, 60%); }
}
@media (max-width: 900px) {
  .crew-grid { grid-template-columns: 1fr; }
  .crew-screen { min-height: 0; display: grid; border-right: 0; border-bottom: 1px solid var(--line); }
  .crew-frame { position: relative; right: auto; height: clamp(320px, 88vw, 460px); max-width: none; margin: 64px auto 0; }
  .crew-big { top: 46px; font-size: clamp(96px, 30vw, 160px); }
  .crew-card { position: relative; left: auto; bottom: auto; width: auto; margin: -24px 14px 14px; }
}
@media (max-width: 560px) {
  .crew-row { grid-template-columns: 22px 36px minmax(0, 1fr); gap: 10px; padding: 8px 10px; }
  .crew-row-face { width: 36px; height: 36px; }
  .crew-row { grid-template-columns: 22px 36px minmax(0, 1fr) 30px; }
  .crew-row-ico { width: 30px; height: 30px; }
  .crew-row-ico svg { width: 16px; height: 16px; }
  .crew-roster { padding: 16px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .crew-frame::after, .crew-hud-live::before { animation: none; }
  .crew-img { transition: opacity 0.2s; transform: none; }
  .crew-row, .crew-row::before { transition: none; }
  .crew-row:hover, .crew-row.is-active { transform: none; }
  .crew-card.is-swap > * { animation: none; }
}

/* ============================================================
   PAGE LOADER: the submark assembles (home page, src/loader.js)
   ============================================================ */
.tdl {
  --tdl-bg: var(--cloud);
  --tdl-arm: var(--midnight);
  --tdl-dot: var(--ember);
  --tdl-size: clamp(96px, 24vw, 156px);
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  background: var(--tdl-bg);
  /* if the script never runs, the screen still lifts */
  animation: tdlFailsafe 0.5s 12s forwards;
}
.tdl[data-tdl-theme="dark"] { --tdl-bg: var(--midnight); --tdl-arm: var(--ember); }
@media (prefers-color-scheme: dark) {
  .tdl[data-tdl-theme="auto"] { --tdl-bg: var(--midnight); --tdl-arm: var(--ember); }
}
.tdl.is-run { animation: none; }
.tdl.is-contained { position: absolute; z-index: auto; }
@keyframes tdlFailsafe { to { opacity: 0; visibility: hidden; } }

.tdl-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--tdl-size);
  height: calc(var(--tdl-size) * 588.39 / 645.6);
}
.tdl-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  will-change: transform, opacity;
}
.tdl-layer-dot { opacity: 1; will-change: auto; }
.tdl-arm { fill: var(--tdl-arm); }
.tdl-stop { stop-color: var(--tdl-arm); }
.tdl[data-tdl-fade="snap"] .tdl-beam { display: none; }
.tdl-dot { fill: var(--tdl-dot); opacity: 0; transform-box: fill-box; transform-origin: center; }
.tdl-ring {
  fill: none;
  stroke: var(--tdl-dot);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* While the loader is up the hero waits to make its entrance (scrolling is held in loader.js). */
html.tdl-hold .hero-content *,
html.tdl-hold .hero-canvas,
html.tdl-hold .scroll-cue { animation-play-state: paused; }

/* ============================================================
   PHONES, TABLETS AND TOUCH: the shared responsive rules
   Layout changes live beside each component; these are the
   cross-cutting ones: display type that always fits the screen,
   touch behaviour, and decoration that never widens the page.
   ============================================================ */

/* a long word may break before it ever pushes past the edge */
:where(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }

/* decorative marks bleed over the seams, never off the side of the page */
section.section { overflow-x: clip; }
/* phones: smaller, and placed inside the page edge rather than past it, so even a
   browser without overflow clip support can never scroll sideways to reach them */
@media (max-width: 640px) {
  .brand-bleed { width: calc(var(--bleed-size, 300px) * 0.55); opacity: calc(var(--bleed-opacity, 0.1) * 0.7); }
  .brand-bleed--seam-l { left: 6px; }
  .brand-bleed--seam-r { right: 6px; }
  .brand-bleed--corner { right: 6px; }
}

/* Display type on phones. Boldonse is a wide face, so each heading is sized from the
   width of its longest word (in em, measured): font-size = text width / that word.
   Above 560px the original clamps apply unchanged. */
@media (max-width: 560px) {
  .hero-h1, .ct-hero-h1 { font-size: min(48px, calc((100vw - 2 * var(--pad-x)) / 8.2)); }
  .ab-hero-h1 { font-size: min(52px, calc((100vw - 2 * var(--pad-x)) / 6.2)); }
  .sp-h1 { font-size: min(48px, calc((100vw - 2 * var(--pad-x)) / 6.9)); }
  .pg-h1,
  .svx-banner .pg-h1,
  .nwk-banner .pg-h1,
  .vrt-banner .pg-h1 { font-size: min(44px, calc((100vw - 2 * var(--pad-x)) / 7.4)); }
  .section-title { font-size: min(38px, calc((100vw - 2 * var(--pad-x)) / 7.5)); }
  .ind-slide h3 { font-size: min(40px, calc((100vw - 2 * var(--pad-x)) / 7.1)); }
  .esim-copy h3 { font-size: min(36px, calc((100vw - 2 * var(--pad-x)) / 7)); }
  .sp-cta h3 { font-size: min(36px, calc((100vw - 2 * var(--pad-x)) / 8)); }
  .pg-head-title { font-size: min(32px, calc((100vw - 2 * var(--pad-x)) / 7.7)); }
  .plt-step h3 { font-size: min(34px, calc((100vw - 2 * var(--pad-x)) / 8.3)); }
  .sp-section h2 { font-size: min(28px, calc((100vw - 2 * var(--pad-x)) / 8.1)); }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 36px; gap: 18px; }
}

/* Touch screens have no hover: a tap must not leave a card lifted, a row shifted
   or a list half open. Mouse and trackpad keep every hover effect. */
@media (hover: none) {
  .btn:hover, .btn:hover .arrow,
  .svx-port:hover, .plt-el:hover, .vrt-card:hover, .sp-use-card:hover, .ct-channel:hover,
  .hx-pager a:hover, .hxb-chip:hover { transform: none; }
  .btn-accent:hover { box-shadow: none; }
  .tx-row:hover .tx-row-name { transform: none; }
  .tx-row.is-active .tx-row-name { transform: translateX(6px); }
  .cov-row:hover { padding-left: 0; }
  .cov-row:hover::before { width: 0; }
  .cov-row:hover:not(.is-open) .cov-row-tags { max-height: 0; opacity: 0; }
  .cov-row:hover .cov-row-name { color: inherit; }
  .cov-row.is-open .cov-row-name, .cov-row.is-open .cov-row-cta { color: var(--accent); }
  .cov-row.is-open .cov-row-cta .arr { transform: rotate(90deg); }
  .footer-col li:hover { padding-left: 0; }
  .footer-col li:hover::before { opacity: 0; }
  .sec-more:hover { padding-left: 0; }
  .sec-layer:hover:not(.is-active), .crew-row:hover:not(.is-active) { transform: none; }
}

/* contact: the four direct channels as full-width rows on phones */
@media (max-width: 560px) {
  .ct-hero-channels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ct-channel { padding: 12px 16px; }
  .ct-faq-q { padding: 18px 0; }
}

/* network: a smaller latency grid on phones, so most of it fits before it scrolls */
@media (max-width: 560px) {
  .nwk-matrix { border-spacing: 3px; }
  .nwk-matrix td { width: 40px; height: 38px; font-size: 11.5px; border-radius: 6px; }
  .nwk-matrix th { font-size: 10.5px; padding: 4px; }
  .nwk-matrix tbody th { padding-right: 6px; }
}

/* phones held sideways: the hero is never taller than the screen allows */
@media (max-height: 520px) and (orientation: landscape) {
  .hero, .ab-hero { min-height: 0; }
  .hero-content { min-height: 0; padding-top: 28px; }
  .nwk-banner { min-height: 0; }
}

/* ── display leading ──
   Boldonse draws tall: capitals reach 1.19 em above the baseline and descenders 0.30 em below,
   so at a line height of 1.2 a "y" or "g" on one line runs into the capitals of the next. Every
   display heading that can wrap gets enough room for both. Last in the file so it wins over the
   per-component settings above; single-line figures (counters, big numbers) keep their own. */
:root { --lh-display: 1.42; }
.hero-h1, .dh-cap h2, .section-title, .tx-stage-info h3, .ind-slide h3, .esim-copy h3, .cta-title,
.fsig-fallback, .fsig-tag, .why-cell h3, .proc-detail h4, .cov-map-readout strong,
.sp-h1, .sp-section h2, .sp-cta h3, .sp-cap h4, .sp-use-card h5, .sp-rel-card h6,
.ab-hero-h1, .ab-tl-body h4, .ct-hero-h1, .pg-h1, .pg-head-title, .pg-cta h2,
.svx-card h3, .svx-stage h3, .plt-step h3, .vrt-card h3, .vrt-flow h3, .crew-name {
  line-height: var(--lh-display);
}

/* src/reserve.js lays every state of a swapping panel out once to find its tallest; nothing
   may animate while it does */
.is-measuring, .is-measuring * { transition: none !important; }