/* ---------------------------------------------------------------- colour themes
   Dark is the default. theme.js sets data-theme="light" or "dark" on <html> before the page
   paints: the visitor's saved choice first, otherwise the device setting.
   Screens and machines (site panel, Traka cabinet, support radar, IC chips, the mining strata card
   and the dusk band) keep the dark palette in both themes, like real hardware. */
:root,
:root[data-theme="light"] :is(.site, .traka__cab, .support__scope, .chip, .mining, .assess) {
  color-scheme: dark;
  color: var(--text);

  --bg: #0d0e10;
  --bg-rgb: 13, 14, 16;
  --bgfx-tile: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22 viewBox=%220 0 240 240%22 fill=%22none%22 stroke=%22%23d9b991%22 stroke-width=%221%22%3E%3Cpath d=%22M-10 48H70L96 74H150M240 132H186L160 158V250M94 250V206L120 180H206M-10 190H34L54 170H84M172-10V30L146 56H120M226-10V40%22/%3E%3Ccircle cx=%22150%22 cy=%2274%22 r=%222.5%22/%3E%3Ccircle cx=%22206%22 cy=%22180%22 r=%222.5%22/%3E%3Ccircle cx=%2284%22 cy=%22170%22 r=%222.5%22/%3E%3Ccircle cx=%22120%22 cy=%2256%22 r=%222.5%22/%3E%3Ccircle cx=%22226%22 cy=%2240%22 r=%222.5%22/%3E%3Ccircle cx=%2240%22 cy=%22110%22 r=%221.5%22/%3E%3Ccircle cx=%22200%22 cy=%22222%22 r=%221.5%22/%3E%3C/svg%3E"); --bgfx-tile-a: .17;
  --bgfx-glow-a: rgba(193, 39, 45, .22); --bgfx-glow-b: rgba(217, 185, 145, .14); --bgfx-contours-a: .85;
  --bg-2: #111215;
  --bg-foot: #0a0b0c;
  --panel: #16181b;
  --panel-2: #1c1e22;
  --ink: 236, 229, 218;            /* rgb of the line and wash colour */
  --line: rgba(var(--ink), .10);
  --line-2: rgba(var(--ink), .20);
  --line-3: rgba(var(--ink), .32);
  --wash: rgba(255, 255, 255, .02);

  --text: #efe9df;
  --text-2: #bdb5a9;
  --text-3: #8f887e;

  --red: #c1272d;
  --red-hi: #f0484e;
  --red-deep: #7d171b;
  --sand: #d9b991;
  --sand-rgb: 217, 185, 145;
  --sand-lt: #e6d3b7;

  --fog: #a9bcc6;
  --fog-rgb: 169, 188, 198;
  --fog-dim: rgba(169, 188, 198, .55);
  --fog-text: #90a3ad;
  --fog-grid: rgba(169, 188, 198, .07);
  --fog-grid-2: rgba(169, 188, 198, .13);
  --bp-bg: #10181c;
  --bp-ink: #cfdae0;
  --bp-strong: #eaf1f4;
  --consult-wash: rgba(16, 24, 28, .55);

  --band-bg: #111214;
  --board-a: #121316;
  --board-b: #0e0f11;
  --map-bg: #0b0c0e;
  --field-bg: #0b0c0e;
  --field-line: rgba(var(--ink), .20);
  --backdrop: rgba(6, 6, 7, .78);
  --err: #ff8a8e;
  --err-line: #ff6b70;

  --phosphor: #e7c48e;
  --focus: #f3cd9c;
}

/* Light: cool off-white and near-black, like the grey and black of the MTN shirt, with MTN red as
   the only accent. The sand accents of the dark theme turn red here; blueprints print in ink. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f0f1f2;
  --bg-rgb: 240, 241, 242;
  --bgfx-tile: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22 viewBox=%220 0 240 240%22 fill=%22none%22 stroke=%22%232a2c31%22 stroke-width=%221%22%3E%3Cpath d=%22M-10 48H70L96 74H150M240 132H186L160 158V250M94 250V206L120 180H206M-10 190H34L54 170H84M172-10V30L146 56H120M226-10V40%22/%3E%3Ccircle cx=%22150%22 cy=%2274%22 r=%222.5%22/%3E%3Ccircle cx=%22206%22 cy=%22180%22 r=%222.5%22/%3E%3Ccircle cx=%2284%22 cy=%22170%22 r=%222.5%22/%3E%3Ccircle cx=%22120%22 cy=%2256%22 r=%222.5%22/%3E%3Ccircle cx=%22226%22 cy=%2240%22 r=%222.5%22/%3E%3Ccircle cx=%2240%22 cy=%22110%22 r=%221.5%22/%3E%3Ccircle cx=%22200%22 cy=%22222%22 r=%221.5%22/%3E%3C/svg%3E"); --bgfx-tile-a: .14;
  --bgfx-glow-a: rgba(193, 39, 45, .10); --bgfx-glow-b: rgba(96, 100, 108, .16); --bgfx-contours-a: .75;
  --bg-2: #f8f8f9;
  --bg-foot: #e5e6e8;
  --panel: #fafafa;
  --panel-2: #e2e4e7;
  --ink: 20, 21, 24;
  --line: rgba(var(--ink), .12);
  --line-2: rgba(var(--ink), .22);
  --line-3: rgba(var(--ink), .36);
  --wash: rgba(255, 255, 255, .55);

  --text: #141518;
  --text-2: #464a50;
  --text-3: #5b5f66;

  --red-hi: #b3212a;
  --sand: #b3212a;
  --sand-rgb: 179, 33, 42;
  --sand-lt: #b3212a;

  --fog: #274657;
  --fog-rgb: 39, 70, 87;
  --fog-dim: rgba(39, 70, 87, .5);
  --fog-text: #3d5866;
  --fog-grid: rgba(39, 70, 87, .06);
  --fog-grid-2: rgba(39, 70, 87, .11);
  --bp-bg: #e7ecef;
  --bp-ink: #2b3f4a;
  --bp-strong: #0f222c;
  --consult-wash: rgba(39, 70, 87, .05);

  --band-bg: #e4e6e9;
  --board-a: #eceef0;
  --board-b: #e3e5e8;
  --map-bg: #e8eaec;
  --field-bg: #fcfcfd;
  --field-line: rgba(var(--ink), .5);
  --backdrop: rgba(20, 21, 24, .5);
  --err: #b0141c;
  --err-line: #c0262e;

  --phosphor: #b3212a;
  --focus: #141518;
}

/* ---------------------------------------------------------------- fonts
   Self-hosted (assets/fonts, SIL Open Font License, Latin subsets): Archivo as one variable font covering every
   weight and width the site uses, and Barlow Semi Condensed in the four weights of the labels. Nothing is fetched
   from a third party, and the pages render the same on the office network as on the internet. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 300 900; font-stretch: 62% 100%; font-display: swap; src: url("assets/fonts/archivo.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/barlow-semi-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/barlow-semi-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/barlow-semi-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/barlow-semi-condensed-700.woff2") format("woff2"); }
/* The brand face for the name on the landing page: one weight, declared for every weight and width so nothing is
   synthesised when the lockup asks for 900 / 62% (the sizes Archivo stands in at while it loads). */
@font-face { font-family: "Brunson"; font-style: normal; font-weight: 100 900; font-stretch: 50% 200%; font-display: swap; src: url("assets/fonts/brunson.woff2") format("woff2"); }
/* While those files load (and where a browser will not fetch them, e.g. a page opened from disk) text is set in the
   device's Arial, Roboto or Liberation Sans scaled to the same average width and line metrics as the real face for
   that weight and width, so little moves when the webfont arrives. The percentages come from the font metrics. */
@font-face { font-family: "Archivo Fallback"; font-weight: 300 500; font-stretch: 85% 100%; size-adjust: 98.6%; ascent-override: 89%; descent-override: 21.3%; line-gap-override: 0%; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Liberation Sans"), local("Helvetica"); }
@font-face { font-family: "Archivo Fallback"; font-weight: 600 900; font-stretch: 85% 100%; size-adjust: 96.5%; ascent-override: 91%; descent-override: 21.8%; line-gap-override: 0%; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Liberation Sans Bold"), local("Helvetica Bold"); }
@font-face { font-family: "Archivo Fallback"; font-weight: 600 900; font-stretch: 71% 84%; size-adjust: 81%; ascent-override: 108.4%; descent-override: 25.9%; line-gap-override: 0%; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Liberation Sans Bold"), local("Helvetica Bold"); }
@font-face { font-family: "Archivo Fallback"; font-weight: 600 900; font-stretch: 62% 70%; size-adjust: 73.8%; ascent-override: 119%; descent-override: 28.5%; line-gap-override: 0%; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Liberation Sans Bold"), local("Helvetica Bold"); }
@font-face { font-family: "Barlow Semi Condensed Fallback"; font-weight: 300 500; size-adjust: 87.8%; ascent-override: 113.9%; descent-override: 22.8%; line-gap-override: 0%; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Liberation Sans"), local("Helvetica"); }
@font-face { font-family: "Barlow Semi Condensed Fallback"; font-weight: 600 900; size-adjust: 85%; ascent-override: 117.6%; descent-override: 23.5%; line-gap-override: 0%; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Liberation Sans Bold"), local("Helvetica Bold"); }

:root {
  --sans: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* DIN-style label face: Bahnschrift where Windows has it installed, Barlow Semi Condensed (self-hosted) everywhere else */
  --din: "Bahnschrift", "Barlow Semi Condensed", "Barlow Semi Condensed Fallback", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --col-gap: clamp(12px, 2vw, 28px);
  --sec-pad: clamp(72px, 8.5vw, 124px);   /* the space above every section */
  --head-gap: clamp(30px, 4vw, 56px);     /* between a section heading and what follows */
  --head-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

@media (min-width: 1800px) {
  :root { --wrap: 1560px; }
  html { font-size: 106.25%; }
}


*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 12px);
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  isolation: isolate;   /* so the background layers (z-index -1 below) sit above the page colour */
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Behind the whole page, fixed: faint circuit traces toward the edges of the screen (the middle stays clear for
   reading) and two slow glows, red and sand, drifting. The contour bands and the wind behind the service cycle sit
   over this; the hero and the machines cover it. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background: var(--bgfx-tile) center / 240px 240px repeat; opacity: var(--bgfx-tile-a);
  -webkit-mask-image: radial-gradient(ellipse 52% 58% at 50% 46%, transparent 32%, #000 100%);
  mask-image: radial-gradient(ellipse 52% 58% at 50% 46%, transparent 32%, #000 100%);
}
body::after {
  inset: -14%;
  background: radial-gradient(720px 540px at 16% 26%, var(--bgfx-glow-a), transparent 70%), radial-gradient(860px 640px at 84% 76%, var(--bgfx-glow-b), transparent 70%);
  animation: bg-drift 52s ease-in-out infinite alternate;
}
@keyframes bg-drift { to { transform: translate(4%, 5%); } }
/* dune contours behind the sections about the country, its industries and the people */
.about::before, .industries::before, .careers::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* one tile repeated down the section (the drawing joins top to bottom), never scaled past 1600px wide: a tall phone
     section would otherwise rasterise it at a size that costs real memory */
  background: url("assets/contours.svg") center top / min(max(100%, 1200px), 1600px) auto repeat-y; opacity: var(--bgfx-contours-a);
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 30%, transparent 100%);
}
.industries::before { transform: scaleX(-1); }
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.05; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { padding: 0; }
.din { font-family: var(--din); font-stretch: semi-condensed; font-weight: 500; font-variant-numeric: tabular-nums; }
em { font-style: normal; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite .acc { stroke: var(--ico-acc, var(--red-hi)); }
.ico {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--lg { width: 1.6em; height: 1.6em; stroke-width: 1.4; }
.ico--xl { width: 2.4rem; height: 2.4rem; stroke-width: 1.25; }

a[href^="tel:"] { white-space: nowrap; }   /* a phone number never breaks across lines */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--red); color: #fff; padding: 10px 16px; text-decoration: none; font-weight: 600;
  transition: top .2s;
}
.skip:focus { top: 12px; }

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


.btn {
  --b-bg: transparent;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .85em 1.35em;
  font: 600 .95rem/1.1 var(--sans); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; background: none; color: var(--text);
  transition: color .2s, border-color .2s, transform .2s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--b-bg);
  clip-path: polygon(0 0, calc(100% - var(--cut, 12px)) 0, 100% var(--cut, 12px), 100% 100%, var(--cut, 12px) 100%, 0 calc(100% - var(--cut, 12px)));
  transition: background .2s, clip-path .32s var(--ease);
}
.btn .ico { transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.985); transition-duration: .2s, .2s, .1s; }   /* the give is on the press, instantly */
.btn--red { --b-bg: var(--red); color: #fff; }
.btn--red:hover { --b-bg: #d3333a; }
.btn--ghost { border-color: var(--line-2); background: var(--wash); }
.btn--ghost:hover { border-color: var(--sand); color: var(--sand-lt); }
.btn--sm { min-height: 40px; padding: .6em 1em; font-size: .875rem; }
.btn--lg { min-height: 56px; padding: 1em 1.6em; font-size: 1.02rem; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-2); background: var(--wash); color: var(--text);
  transition: border-color .2s, color .2s, background .2s;
}
.icon-btn:hover { border-color: var(--sand); color: var(--sand-lt); }
/* every control answers on pointer-down, not on release: a small, instant give, eased back on the way out */
.icon-btn { transition: border-color .2s, color .2s, background .2s, transform .2s var(--ease); }
.icon-btn:active, .menu-toggle:active, .theme-toggle:active, .slides__arrow:active { transform: scale(.94); transition: transform .1s ease-out; }
.octa__tab:active .octa__pad { transform: scale(.94); transition-duration: .1s; }
.integ__btn:active, .slot:active { transform: scale(.985); transition: transform .1s ease-out; }
.slides__dot:active::before { transform: scale(.8); transition-duration: .1s; }



.masthead {
  position: fixed; inset: 0 0 auto; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
}
.masthead.is-scrolled, .masthead.is-open {
  background: rgba(var(--bg-rgb), .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}
.masthead.is-open { border-bottom-color: var(--line); }
/* where the bar floats over content its lower edge is a soft fall-off of the page colour, not a drawn line */
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none;
  background: linear-gradient(rgba(var(--bg-rgb), .6), rgba(var(--bg-rgb), 0)); opacity: 0; transition: opacity .35s;
}
.masthead.is-scrolled::after { opacity: 1; }
.masthead__inner {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  height: var(--head-h); max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--text); flex: none; }
.brand__mark { width: 36px; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.brand__word { display: flex; flex-direction: column; line-height: .9; }
.brand__micro { font-weight: 900; font-stretch: 70%; font-size: 1.28rem; letter-spacing: .01em; text-transform: uppercase; }
.brand__nam { font-size: .58rem; font-weight: 600; letter-spacing: .56em; text-transform: uppercase; color: var(--text-2); margin-top: 4px; padding-left: .1em; }

.nav { margin-left: auto; position: relative; }
.nav__list { display: flex; align-items: center; gap: 2px; margin: 0; list-style: none; }
.nav__list a {
  position: relative; display: block; padding: 12px 10px;
  font-size: .88rem; font-weight: 500; color: var(--text-2); text-decoration: none;
  transition: color .2s;
}
.nav__list a:hover, .nav__list a[aria-current] { color: var(--text); }
.nav__trace { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nav__trace-path { fill: none; stroke: var(--red-hi); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.nav__trace-pad { fill: var(--bg); stroke: var(--red-hi); stroke-width: 1.5; opacity: 0; transition: opacity .3s .35s; }
.nav__trace.is-on .nav__trace-pad { opacity: 1; }
.nav__mobile-extra { display: none; }

.masthead__tel {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  color: var(--text); text-decoration: none; font-size: .92rem; font-weight: 500; padding: 8px 4px;
}
.masthead__tel .ico { color: var(--red-hi); }
.masthead__tel:hover .masthead__tel-num { color: var(--sand-lt); }
.masthead__cta, .masthead__support { flex: none; }
/* eight links, the phone, the theme switch and two buttons: on desktop the gaps tighten, and below 1280px the phone shows
   as an icon (the number is in its title and in the menu) */
@media (min-width: 1181px) {
  .masthead__inner { gap: clamp(12px, 1.3vw, 18px); }
  .nav__list a { padding-inline: 7px; white-space: nowrap; }
}
@media (min-width: 1181px) and (max-width: 1279px), (max-width: 900px) {
  .masthead__tel-num { display: none; }
  .masthead__tel { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--line-2); padding: 0; }
}
@media (max-width: 720px) { .masthead__support { display: none; } }   /* it is in the menu */
.masthead__support { gap: 7px; }
.masthead__support .ico { width: 17px; height: 17px; color: var(--red-hi); }

/* theme switch: the sun shows in dark mode (switch to light), the moon in light mode */
.theme-toggle { display: none; }
[data-theme] .theme-toggle--head { display: inline-grid; flex: none; }
.theme-toggle .ico { width: 20px; height: 20px; transition: transform .45s var(--ease); }
.theme-toggle:hover .ico { transform: rotate(-24deg); }
.theme-toggle__moon, :root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }
.theme-toggle--menu {
  align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid var(--line-2); background: none; color: var(--text); font: 600 .95rem var(--sans);
}
.theme-toggle--menu:hover { border-color: var(--sand); }
/* the switch reveals the new theme in a circle growing from the button (script.js animates it) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

.menu-toggle {
  display: none; align-items: center; gap: 10px; margin-left: auto;
  min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); background: none;
  font: semi-condensed 600 .95rem var(--din); letter-spacing: .01em;
}
.menu-toggle__bars { position: relative; width: 18px; height: 10px; }
.menu-toggle__bars span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { top: 8.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { top: 4.25px; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  /* on phones and tablets the header is always a solid bar pinned to the top */
  .masthead {
    background: rgba(var(--bg-rgb), .9);
    -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  }
  .masthead::after { opacity: 1; }
  .menu-toggle { display: inline-flex; }
  .masthead__tel { margin-left: 0; }
  .nav {
    /* explicit height, not bottom: 0: the masthead's backdrop blur makes it the containing block */
    position: fixed; left: 0; right: 0; top: var(--head-h);
    height: calc(100vh - var(--head-h)); height: calc(100dvh - var(--head-h));
    margin: 0; padding: 28px var(--gutter) 40px;
    background:
      repeating-linear-gradient(90deg, transparent 0 39px, rgba(var(--ink), .035) 39px 40px),
      var(--bg);
    overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list a {
    padding: 13px 0; font-size: clamp(1.5rem, 5.6vw, 2.3rem); font-weight: 800; font-stretch: 72%;
    text-transform: uppercase; color: var(--text); letter-spacing: .01em;
  }
  .nav__list a[aria-current] { color: var(--red-hi); }
  .nav__trace { display: none; }
  .nav__mobile-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
  .nav__mobile-tel { color: var(--text); text-decoration: none; font-size: 1.05rem; }
  .menu-toggle { order: 3; margin-left: 0; }
  .masthead__tel { order: 2; margin-left: auto; }
  .theme-toggle--head { order: 2; }
  .masthead__cta { order: 4; }
  .masthead__support { order: 5; }
}
@media (max-width: 720px) { .masthead { background: rgba(var(--bg-rgb), .97); -webkit-backdrop-filter: none; backdrop-filter: none; } }   /* phones: a solid bar, no blur to redo on every scrolled frame */
@media (max-width: 640px) {
  .masthead__cta, .masthead__support { display: none; }   /* both are in the menu */
  [data-theme] .theme-toggle--head { display: none; }
  [data-theme] .theme-toggle--menu { display: inline-flex; }
  .masthead__tel-num { display: none; }
  .masthead__tel { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--line-2); padding: 0; }
  .brand__mark { width: 32px; }
  .brand__micro { font-size: 1.12rem; }
}
body.nav-open { overflow: hidden; }


.section { position: relative; padding-top: var(--sec-pad); }
.sec-head { margin-bottom: var(--head-gap); }
.sec-head__title {
  max-width: 22ch; font-size: clamp(2.1rem, 4.2vw, 4rem); line-height: .98; font-weight: 850; font-stretch: 72%;
  letter-spacing: -.01em; text-wrap: balance;
}
.sec-head__intro { max-width: 62ch; margin: 18px 0 0; color: var(--text-2); font-size: 1.08rem; }


/* a faint patch of the landing page's wind behind the empty right of some section headings, from the top of the section
   down to the foot of the heading and faded out before what follows (script.js, only while on screen) */
.windhead { position: relative; isolation: isolate; }
.windhead__cv {
  position: absolute; top: calc(-1 * var(--sec-pad)); right: 0; z-index: -1; width: min(50%, 820px); height: calc(100% + var(--sec-pad));
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 62% 50%, #000 10%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 50% at 62% 50%, #000 10%, transparent 100%);
}
.windhead--wide .windhead__cv { width: min(66%, 1040px); -webkit-mask-image: radial-gradient(ellipse 62% 50% at 60% 50%, #000 12%, transparent 100%); mask-image: radial-gradient(ellipse 62% 50% at 60% 50%, #000 12%, transparent 100%); }
@media (max-width: 760px) { .windhead__cv { width: 72%; } }
.windhead + .svc { padding-top: 0; }

.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }


/* ---------------------------------------------------------------- hero
   Namibia in the pattern of the metal-strip sculpture on the office wall, finished like a modern transit map: flat
   ribbons of light with rounded bends rise out of one sand drift and end in LED lamps. MICRO TECH NAMIBIA is set
   beside it, NAMIBIA outlined, over knife-edge Namib dunes. The artwork is inline SVG from tools/fibre-art.py; the
   draw-in, the lamps and the intro surge are plain CSS, script.js fits the name and sends single light runs. */
.hero {
  /* the map: ribbons that brighten towards the lamps, LED lamps (core, ring, glow), the Swakopmund LED, light runs */
  --nam-st0: #fff4e8; --nam-st1: #f0e7da; --nam-st2: #a9a49c; --nam-core: #fff; --nam-ring: rgba(255, 240, 222, .5);
  --nam-glow-hot: #fff6ea; --nam-glow: #ffcf99; --nam-glow-o: .85; --nam-run: #ff5a60;
  --nam-hq: #f0484e; --nam-hq-o0: .75; --nam-hq-o1: .3;
  /* the wall: a warm wash around each lamp, a vignette, the sand drift at the root and its soft backlight */
  --wall-wash: #ffc47a; --wall-wash-o: .05; --vignette: rgba(4, 4, 5, .55);
  --drift0: #2f1813; --drift1: rgba(13, 14, 16, 0); --drift-crest: #ffb87a; --pool: #ffb45e; --pool-o: .14;
  /* the page dunes: shaded (s) and west-lit (l) faces, crest lines and the rim of the mid dune */
  --dune-far-s0: #181213; --dune-far-s1: #120f10; --dune-far-l0: #2a1a17; --dune-far-l1: #1b1414;
  --dune-mid-s0: #120e0e; --dune-mid-s1: #0e0d0e; --dune-mid-l0: #3d1e16; --dune-mid-l1: #1d1311;
  --dune-near-s0: #0e0e0f; --dune-near-s1: #0d0e10; --dune-near-l0: #151112; --dune-near-l1: #0f0e0f;
  --crest-far: rgba(255, 190, 140, .16); --crest-near: rgba(255, 200, 160, .09);
  --rim0: rgba(255, 176, 120, 0); --rim1: rgba(255, 176, 120, .42); --rim2: rgba(255, 176, 120, .12);
  position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; padding-top: var(--head-h);
  background: none;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(130% 95% at 42% 42%, transparent 58%, var(--vignette) 100%),
    linear-gradient(180deg, rgba(var(--bg-rgb), .75) 0, rgba(var(--bg-rgb), 0) calc(var(--head-h) + 48px)),
    radial-gradient(90% 70% at 88% 108%, var(--veil-glow), transparent 62%),
    var(--veil);
}
/* the wind field (script.js, the original landing background) runs behind everything: sand blowing in behind the
   sculpture, circuitry under the name as before; a light veil keeps the text clear, the dusk glow low on the right */
.hero { --veil-glow: rgba(193, 39, 45, .18); --veil: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 36%, rgba(var(--bg-rgb), .4) 50%, rgba(var(--bg-rgb), .5) 100%); }
@media (min-width: 900px) { .hero { --veil: linear-gradient(90deg, rgba(var(--bg-rgb), .2) 0%, rgba(var(--bg-rgb), .08) 38%, rgba(var(--bg-rgb), 0) 50%, rgba(var(--bg-rgb), .24) 100%); } }
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; }
.hero__dunes { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(140px, 27vh, 280px); z-index: -1; }
.dune__far-s0 { stop-color: var(--dune-far-s0); } .dune__far-s1 { stop-color: var(--dune-far-s1); }
.dune__far-l0 { stop-color: var(--dune-far-l0); } .dune__far-l1 { stop-color: var(--dune-far-l1); }
.dune__mid-s0 { stop-color: var(--dune-mid-s0); } .dune__mid-s1 { stop-color: var(--dune-mid-s1); }
.dune__mid-l0 { stop-color: var(--dune-mid-l0); } .dune__mid-l1 { stop-color: var(--dune-mid-l1); }
.dune__near-s0 { stop-color: var(--dune-near-s0); } .dune__near-s1 { stop-color: var(--dune-near-s1); }
.dune__near-l0 { stop-color: var(--dune-near-l0); } .dune__near-l1 { stop-color: var(--dune-near-l1); }
.dune__rim0 { stop-color: var(--rim0); } .dune__rim1 { stop-color: var(--rim1); } .dune__rim2 { stop-color: var(--rim2); }
.dune__crest { fill: none; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dune--far .dune__crest { stroke: var(--crest-far); }
.dune--mid .dune__crest { stroke: url(#dune-rim); stroke-width: 1.5; }
.dune--near .dune__crest { stroke: var(--crest-near); }
/* short desktops: the dunes move down instead of shrinking (shrinking under slice crops the far peaks flat) */
@media (min-width: 900px) { .hero__dunes { bottom: min(0px, calc((100vh - 900px) * .45)); bottom: min(0px, calc((100svh - 900px) * .45)); } }

.hero__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(20px, 4vh, 44px);
  align-items: center; padding-block: clamp(24px, 5vh, 64px) clamp(20px, 3.5vh, 44px);
}
.hero__map { grid-column: 1 / span 6; margin: 0; }
.nam { display: block; width: 100%; height: auto; max-height: calc(100svh - var(--head-h) - 150px); overflow: visible; }
/* the artwork is two svgs of the same size stacked in one cell: the still sculpture, and over it on its own layer the
   parts that move after the intro, so a light run never repaints the strips (see tools/fibre-art.py) */
.hero__map { display: grid; }
.hero__map > .nam { grid-area: 1 / 1; }
.nam--fx { will-change: transform; pointer-events: none; }
.hero__copy { grid-column: 7 / -1; }
/* The landing shows only the map, the name and the tagline: MICRO TECH in red, NAMIBIA in white (ink in the light
   theme). script.js fits each line to the column, so the three make one block (--fit-mt, --fit-tech, --fit-nam; the
   clamps are the no-JS sizes), and on desktop moves the name so the lamp at the end of the Caprivi bar points at MICRO.
   The red is a little brighter than MTN red on the dark page, so it keeps 3:1 contrast as large text. */
.hero { --hero-red: #e3363c; }
.hero__title { margin: 0; text-transform: uppercase; font-family: "Brunson", var(--sans); font-synthesis: none; font-weight: 900; font-stretch: 62%; line-height: .86; }
.hero__copy { translate: 0 var(--name-dy, 0px); }   /* the name and the tagline move together */
.hero__mt, .hero__tech, .hero__nam { display: block; width: fit-content; white-space: nowrap; margin-left: -.03em; }   /* optical left edge */
.hero__mt { font-size: var(--fit-mt, clamp(3.4rem, 10vw, 10rem)); letter-spacing: .005em; color: var(--hero-red); animation: rise .95s .1s cubic-bezier(.16, 1, .3, 1) both; }
.hero__tech { font-size: var(--fit-tech, clamp(4rem, 12vw, 12rem)); letter-spacing: .005em; color: var(--hero-red); animation: rise 1s .18s cubic-bezier(.16, 1, .3, 1) both; }
.hero__nam { font-size: var(--fit-nam, clamp(2.4rem, 6vw, 6rem)); letter-spacing: .02em; margin-top: .04em; color: var(--text); animation: rise 1.05s .26s cubic-bezier(.16, 1, .3, 1) both; }
/* The same fit estimated in CSS (the column width, the viewport height and the 320px cap, see initFitHero), so the
   name is laid out at close to its final size before the script measures it, and the first paint does not jump. */
@supports (font-size: 1cqw) and (height: 1svh) {
  .hero__copy { container-type: inline-size; }
  .hero__title { --fit-w: min(100cqw, 499px, calc((100svh - 273px) / 1.33)); }   /* Brunson: MICRO 208.5, TECH 161, NAMIBIA 294 per 100px */
  .hero__mt { font-size: var(--fit-mt, calc(var(--fit-w) * .4914)); }
  .hero__tech { font-size: var(--fit-tech, calc(var(--fit-w) * .641)); }
  .hero__nam { font-size: var(--fit-nam, calc(var(--fit-w) * .346)); }
  @media (max-width: 899px) { .hero__title { --fit-w: min(100cqw, 499px, calc(42svh / 1.33)); } }
  @media (max-width: 599px) { .hero__title { --fit-w: min(100cqw, 499px, calc(42svh / 1.38)); } }
}
.hero__tag {
  margin: clamp(14px, 2.2vh, 26px) 0 0; font-size: clamp(.74rem, 1.05vw, 1rem); font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; white-space: nowrap; color: var(--text-2); animation: fade-up .9s .55s var(--ease) both;
  text-shadow: 0 0 6px var(--bg), 0 0 14px var(--bg);   /* a soft halo, so a dune crest behind it never cuts through */
}
/* each line rises out of a slot at its baseline: whole letters, no fade; the side insets keep the outline uncut */
@keyframes rise { from { transform: translateY(104%); clip-path: inset(-12% -6% 104% -6%); } to { transform: none; clip-path: inset(-12% -6% -12% -6%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .hero__map { grid-column: 1 / -1; }
  .nam { width: auto; max-width: min(100%, 520px); max-height: min(40svh, calc(100svh - var(--head-h) - 400px)); }
  .hero__copy { grid-column: 1 / -1; }
  .hero__grid { row-gap: 22px; }
}
/* a phone on its side is too short to stack them: the map sits beside the name, both kept short */
@media (max-width: 899px) and (max-height: 520px) {
  .hero__map { grid-column: 1 / span 5; }
  .hero__copy { grid-column: 6 / -1; }
  .nam { max-width: 100%; max-height: calc(100svh - var(--head-h) - 48px); }
  .hero__grid { row-gap: 0; }
}
@media (max-width: 720px) { .hero__dunes { display: none; } }   /* on phones the sand drift at the root is the dune */
@media (min-width: 900px) { .nam { width: auto; max-width: 100%; margin-left: auto; } }   /* the art hugs the name */

/* Phones held upright: the sculpture large across the top and running off the right edge, its root coming down beside
   the name, which fills the lower half of the screen on the left. A soft halo in the page colour round the letters lets
   the strips pass behind the name cleanly, the way their own casings cut them out of the wind. The sizes follow the
   screen below the header: the art gets about two fifths of it, at most 116% of the width (--aw), and the name what is
   left (--nw: 0.492 is the art's height down to its lowest lamp per unit of width, 1.26 the name's height per unit
   of width, 75px the gaps and the tagline). The lines are sized here from Brunson's own proportions; script.js
   only trims each to the exact width of the title with a small factor (--trim-*), once per screen width, so a toolbar sliding in and out never refits
   them while the page scrolls. The lines
   rise in with a fade instead of out of a clipped slot, which keeps the halo and the motion on the compositor. */
@media (max-width: 720px) and (min-height: 521px) {
  .hero {
    --aw: min(116vw, (100vh - var(--head-h)) * .813);
    --nw: min(100vw - 2 * var(--gutter), (100vh - var(--head-h) - 75px - var(--aw) * .492) / 1.26);
    --veil: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 50%, rgba(var(--bg-rgb), .3) 100%);
    justify-content: flex-end;
  }
  @supports (height: 1svh) {
    .hero {
      --aw: min(116vw, (100svh - var(--head-h)) * .813);
      --nw: min(100vw - 2 * var(--gutter), (100svh - var(--head-h) - 75px - var(--aw) * .492) / 1.26);
    }
  }
  .hero__grid { display: block; padding-block: 0 26px; }
  .hero__map { position: absolute; z-index: 0; top: calc(var(--head-h) + 8px); right: calc(var(--aw) * -.224); width: var(--aw); }
  .nam { width: 100%; max-width: none; max-height: none; }
  .hero__copy { position: relative; z-index: 1; }
  .hero__title { width: var(--nw); }
  .hero__mt { font-size: calc((var(--nw) * .4832 - 1.2px) * var(--trim-mt, 1)); }
  .hero__tech { font-size: calc((var(--nw) * .627 - 1.2px) * var(--trim-tech, 1)); }
  .hero__nam { font-size: calc((var(--nw) * .3405 - .5px) * var(--trim-nam, 1)); }
  .hero__mt, .hero__tech, .hero__nam {
    animation-name: rise-in;
    text-shadow: 0 0 3px rgb(var(--bg-rgb)), 0 0 10px rgb(var(--bg-rgb)), 0 0 18px rgba(var(--bg-rgb), .85);
  }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(26%); } }

/* ---------------------------------------------------------------- intro: the second screen
   What the landing used to say: where and since when, the tagline, what MTN does, the two ways in, the four facts. */
.intro__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 80px); row-gap: 44px; align-items: center; }
/* the right column: the MTN logo as a neon sign (tools/fibre-art.py, build_logo), then the facts. When the section
   scrolls into view the tubes switch on with a flicker, cube first, then the outlined M and T and the whole of the
   landing's Namibia; afterwards the red outline flickers every few seconds with a breathing glow, a small red pulse runs up its Caprivi
   strip and the T flickers now and then (script.js adds .is-live only while the sign is on screen). Still with reduced motion; on a dark sign plate in the light theme. */
.intro__logo { display: flex; justify-content: flex-end; margin: 0 0 clamp(20px, 3vw, 32px); }
.neon {
  --neon-red: #ff3a44; --neon-red-core: #ffe3e4; --neon-white: #fff1e4; --neon-white-core: #fff;
  display: block; width: auto; max-width: 100%; height: clamp(270px, 30vw, 430px); overflow: visible;
}
.nt { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nt--g { stroke-width: 16; opacity: .13; }
.nt--m { stroke-width: 7; opacity: .4; }
.nt--c { stroke-width: 2.6; }
/* the outlined M and T: a little slimmer, so the two sides of each stroke stay apart */
:is(.neon__m, .neon__t) .nt--g { stroke-width: 11; opacity: .12; }
:is(.neon__m, .neon__t) .nt--m { stroke-width: 5; }
:is(.neon__m, .neon__t) .nt--c { stroke-width: 2.2; }
:is(.neon__cube, .neon__y) .nt { stroke: var(--neon-red); }
:is(.neon__cube, .neon__y) .nt--c { stroke: var(--neon-red-core); }
:is(.neon__m, .neon__t, .neon__map) .nt { stroke: var(--neon-white); }
:is(.neon__m, .neon__t, .neon__map) .nt--c { stroke: var(--neon-white-core); }
/* the little Namibia on the right face: fine tubes, so all eight strips stay apart */
.neon__map .nt--g { stroke-width: 6; opacity: .1; }
.neon__map .nt--m { stroke-width: 3; opacity: .3; }
.neon__map .nt--c { stroke-width: 1.3; }
.nt-pad--g { fill: none; stroke: var(--neon-white); stroke-width: 5; opacity: .22; }
.neon__hq-g { fill: var(--neon-red); opacity: .35; }
.neon__hq { fill: var(--neon-red-core); stroke: var(--neon-red); stroke-width: 1.6; }
.nt-pad--c { fill: var(--neon-white-core); }
.neon__w0 { stop-color: var(--neon-red); stop-opacity: .13; } .neon__w1 { stop-color: var(--neon-red); stop-opacity: 0; }
.neon__run { fill: none; stroke: var(--neon-red); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 9 200; stroke-dashoffset: 9; opacity: 0; }
:root[data-theme="light"] .neon { background: #121316; border-radius: 22px; padding: 16px; box-shadow: 0 24px 48px -28px rgba(20, 21, 24, .55); }
@media (prefers-reduced-motion: no-preference) {
  .intro__grid.is-in .neon__part { animation: neon-on 1.3s var(--nd, 0s) linear backwards; }
  .neon__cube { --nd: .35s; } .neon__y { --nd: .6s; } .neon__m { --nd: .95s; } .neon__t { --nd: 1.25s; } .neon__map { --nd: 1.55s; } .neon__pads { --nd: 1.8s; }
  .intro__grid.is-in .neon.is-live .neon__t { animation: neon-on 1.3s var(--nd) linear backwards, neon-blink 9s 6s linear infinite; }
  /* the red outline keeps flickering like a real sign, a quick double flash every few seconds, and its glow breathes */
  .intro__grid.is-in .neon.is-live :is(.neon__cube, .neon__y) { animation: neon-on 1.3s var(--nd) linear backwards, neon-flash 4.6s calc(var(--nd) + 2.4s) linear infinite; }
  .neon.is-live :is(.neon__cube, .neon__y) .nt--g { animation: neon-breathe 2.3s ease-in-out infinite alternate; }
  .neon.is-live .neon__run { animation: neon-run 5s 3.4s linear infinite; }
}
@keyframes neon-on { 0% { opacity: 0; } 8% { opacity: .9; } 11% { opacity: .1; } 18% { opacity: 1; } 21% { opacity: .25; } 30%, 100% { opacity: 1; } }
@keyframes neon-flash { 0%, 84%, 100% { opacity: 1; } 85% { opacity: .15; } 87% { opacity: 1; } 89.5% { opacity: .3; } 91% { opacity: 1; } }
@keyframes neon-breathe { from { opacity: .1; } to { opacity: .26; } }
@keyframes neon-blink { 0%, 95%, 100% { opacity: 1; } 95.6% { opacity: .3; } 96.2% { opacity: 1; } 96.8% { opacity: .5; } 97.4% { opacity: 1; } }
@keyframes neon-run { 0% { opacity: 0; stroke-dashoffset: 9; } 3% { opacity: 1; } 30% { opacity: 1; stroke-dashoffset: -100; } 33%, 100% { opacity: 0; stroke-dashoffset: -100; } }

/* Namibia in dots with the head office lit (tools/fibre-art.py, build_coverage), above the facts under the mission.
   When it scrolls into view the dots light up in a wave spreading out from Swakopmund; after that a softer wave
   ripples out every few seconds and rings pulse from the head office (script.js adds .is-live only while the map is on
   screen). Still with reduced motion. */
.about__map { display: flex; justify-content: flex-end; margin: 0 0 clamp(20px, 3vw, 32px); }
.cover { display: block; width: auto; max-width: 100%; height: clamp(240px, 27vw, 380px); overflow: visible; }
.cover__b { fill: none; stroke: rgba(var(--ink), .42); stroke-width: 8.4; stroke-linecap: round; }
.cover__hq-ring { fill: var(--bg); stroke: var(--red-hi); stroke-width: 2.6; }
.cover__hq-dot { fill: var(--red-hi); }
.cover__hq-wave { fill: none; stroke: var(--red-hi); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cover__lbl { font-family: var(--din); font-stretch: semi-condensed; font-weight: 600; font-size: 22px; fill: var(--text); text-anchor: end; }
.cover__lbl--sm { font-weight: 500; font-size: 17px; fill: var(--text-3); }
.cover__lbl--town { font-weight: 500; font-size: 17px; fill: var(--text-2); }
.cover__town-dot { fill: var(--red-hi); }
.cover__town-ring { fill: none; stroke: var(--red-hi); stroke-width: 1.4; opacity: .55; }
.cover__b1 { --cd: .09s; } .cover__b2 { --cd: .18s; } .cover__b3 { --cd: .27s; } .cover__b4 { --cd: .36s; } .cover__b5 { --cd: .45s; }
.cover__b6 { --cd: .54s; } .cover__b7 { --cd: .63s; } .cover__b8 { --cd: .72s; } .cover__b9 { --cd: .81s; }
.about__foot.is-in .cover__b { animation: cover-wave 1s calc(.5s + var(--cd, 0s)) ease-out backwards; }
@media (prefers-reduced-motion: no-preference) {
  .about__foot.is-in .cover.is-live .cover__b { animation: cover-wave 1s calc(.5s + var(--cd, 0s)) ease-out backwards, cover-ripple 5s calc(2.2s + var(--cd, 0s) * 2.2) linear infinite; }
  .cover.is-live .cover__hq-wave { animation: cover-sonar 2.6s ease-out infinite; }
  .cover.is-live .cover__hq-wave--2 { animation-delay: 1.3s; }
  .cover.is-live .cover__hq-dot { animation: cover-hq 2.6s ease-in-out infinite; }
}
@keyframes cover-ripple { 0%, 100% { stroke: rgba(var(--ink), .42); } 3% { stroke: var(--red-hi); } 12% { stroke: rgba(var(--ink), .42); } }   /* a narrow front, about three bands lit at once */
@keyframes cover-sonar { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes cover-hq { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes cover-wave { 0% { stroke: rgba(var(--ink), .08); } 35% { stroke: var(--red-hi); } 100% { stroke: rgba(var(--ink), .42); } }
.intro__kick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; font-size: .95rem; letter-spacing: .01em; color: var(--text-2); }
.intro__kick > span[aria-hidden] { color: var(--text-3); }
.intro__title { max-width: 24ch; margin: 0 0 clamp(26px, 3.4vw, 40px); font-size: clamp(1.9rem, 3.4vw, 3.3rem); line-height: 1.02; font-weight: 800; font-stretch: 75%; color: var(--text); text-wrap: balance; }
.intro__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* the red CTA's cut corners open a little on hover and close when pressed */
@media (hover: hover) { .intro .btn--red:hover { --cut: 15px; } }
.intro .btn--red:active { --cut: 8px; }
.intro .btn--red:active::before { transition-duration: .08s; }
@media (max-width: 900px) { .intro__grid { grid-template-columns: minmax(0, 1fr); } .intro__logo { justify-content: center; } .about__map { justify-content: center; padding-left: 70px; } }
@media (max-width: 520px) { .intro__actions .btn { flex: 1 1 100%; } }

/* the map: the wall piece's shapes finished like a modern transit map. Flat ribbons of light with rounded bends, each on
   a casing in the page colour that cuts it out of the wind field, brightening from the root up to an LED lamp at every
   end (a bright core in a ring, with a soft glow), and the Swakopmund LED */
.nam__strip { fill: none; stroke: url(#nam-st); stroke-width: 8; stroke-linejoin: round; stroke-linecap: butt; }
.nam__case { fill: none; stroke: rgb(var(--bg-rgb)); stroke-width: 16; stroke-linejoin: round; stroke-linecap: butt; }
.nam__st0 { stop-color: var(--nam-st0); } .nam__st1 { stop-color: var(--nam-st1); } .nam__st2 { stop-color: var(--nam-st2); }
.nam__p { fill: var(--nam-core); }
.nam__ring { fill: rgb(var(--bg-rgb)); stroke: var(--nam-ring); stroke-width: 2; }
.nam__gh { stop-color: var(--nam-glow-hot); } .nam__gw { stop-color: var(--nam-glow); }
.nam__b { r: 44px; }
/* --k (0..1) is set by script.js as the pointer nears a bulb */
.nam__b { opacity: calc(var(--nam-glow-o) * (.9 + var(--k, 0) * .1)); transform: scale(calc(1 + var(--k, 0) * .12)); transform-box: fill-box; transform-origin: center; transition: transform .45s var(--ease), opacity .45s; }
.nam__hq-dot { fill: var(--nam-hq); }
.nam__hq-mark { fill: rgb(var(--bg-rgb)); stroke: var(--nam-hq); stroke-width: 2.4; }
.nam__hq-glow { fill: url(#nam-r); transform-box: fill-box; transform-origin: center; }
.nam__r0 { stop-color: var(--nam-hq); stop-opacity: var(--nam-hq-o0); } .nam__r1 { stop-color: var(--nam-hq); stop-opacity: var(--nam-hq-o1); } .nam__r2 { stop-color: var(--nam-hq); stop-opacity: 0; }
/* the wall wash around each lamp, the sand drift at the root with its lit crest, the backlight behind the root */
.nam__w0 { stop-color: var(--wall-wash); stop-opacity: var(--wall-wash-o); }
.nam__wm { stop-color: var(--wall-wash); stop-opacity: calc(var(--wall-wash-o) * .4); }
.nam__w1 { stop-color: var(--wall-wash); stop-opacity: 0; }
.nam__dr0 { stop-color: var(--drift0); } .nam__dr1 { stop-color: var(--drift1); }
.nam__drift-crest { fill: none; stroke-width: 1.6; }
.nam__dc0 { stop-color: var(--drift-crest); stop-opacity: 0; } .nam__dc1 { stop-color: var(--drift-crest); }
.nam__pool0 { stop-color: var(--pool); stop-opacity: var(--pool-o); } .nam__pool1 { stop-color: var(--pool); stop-opacity: 0; }
/* light running up a strip inside the metal: a bright core and a soft halo, each one dash that travels the path.
   Hidden unless a run animation is playing, so without JavaScript they stay invisible after the surge */
.nam__run { opacity: 0; fill: none; stroke-linejoin: miter; stroke-miterlimit: 3; }
.nam__run-c { stroke: url(#nam-rc); stroke-width: 3; stroke-linecap: round; }
.nam__run-h { stroke: url(#nam-rh); stroke-width: 10; stroke-opacity: .32; stroke-linecap: round; }
.nam__rc0 { stop-color: var(--nam-run); } .nam__rc1 { stop-color: var(--nam-run); stop-opacity: 0; }
.nam__rh0 { stop-color: var(--nam-run); } .nam__rh1 { stop-color: var(--nam-run); stop-opacity: 0; }
/* phones: the art draws at about a third of its size, so the strips and rings get a little heavier */
@media (max-width: 600px) { .nam__strip { stroke-width: 9; } .nam__ring { stroke-width: 2.6; } }
@media (prefers-reduced-motion: no-preference) {
  /* backwards fill: hidden until their turn, then back to the plain styles (so the pointer can scale bulbs) */
  .nam__strip, .nam__case { stroke-dasharray: 1; animation: nam-draw var(--u) var(--d) cubic-bezier(.45, .05, .3, 1) backwards; }
  .nam__p, .nam__ring, .nam__hq { animation: nam-on-fade .5s var(--d) ease-out backwards; }
  .nam__wash circle { animation: nam-wash .9s var(--d) ease-out backwards; }
  /* the surge: once the last lamp is on, one pulse runs up all eight strips and flashes each bulb as it arrives */
  .nam__b { animation: nam-glow .9s calc(var(--d) + 60ms) ease-out backwards, nam-flash .7s var(--ra) cubic-bezier(.2, .7, .3, 1); }
  .nam__hq-glow { animation: nam-hq-flash .7s var(--surge-hq) cubic-bezier(.2, .7, .3, 1); }
  .nam__run { animation: nam-on var(--rt) var(--surge) linear; }
  .nam__run-c { animation: nam-run var(--rt) var(--surge) linear; }
  .nam__run-h { animation: nam-run-h var(--rt) var(--surge) linear; }
  /* idle (script.js adds .is-idle to the hero after the intro): the intro animations are dropped, so toggling reduced
     motion off again never replays them; .is-go on one run at a time (with --rt set) sends light up its strip, and
     .is-flash / .is-ping flash the bulb it reaches and the Swakopmund glow it passes */
  .is-idle :is(.nam__b, .nam__run, .nam__run-c, .nam__run-h, .nam__hq-glow, .nam__strip, .nam__case, .nam__p, .nam__ring, .nam__hq, .nam__wash circle) { animation: none; }
  .is-idle .nam__run.is-go { animation: nam-on var(--rt) linear; }
  .is-idle .nam__run.is-go .nam__run-c { animation: nam-run var(--rt) linear; }
  .is-idle .nam__run.is-go .nam__run-h { animation: nam-run-h var(--rt) linear; }
  .is-idle .nam__b.is-flash { animation: nam-flash .7s cubic-bezier(.2, .7, .3, 1); }
  .is-idle .nam__hq.is-ping .nam__hq-glow { animation: nam-hq-flash .7s cubic-bezier(.2, .7, .3, 1); }
}
@keyframes nam-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nam-on-fade { from { opacity: 0; } }
@keyframes nam-glow { 0% { opacity: 0; } 40% { opacity: var(--nam-glow-o); } 100% { opacity: calc(var(--nam-glow-o) * .9); } }
@keyframes nam-wash { from { opacity: 0; } }
/* no from or to: both ends are the element's own opacity and scale (a hovered bulb flashes from 1.12 and settles back) */
@keyframes nam-flash { 16% { opacity: calc(var(--nam-glow-o) * var(--flash-gain, 1)); transform: scale(calc(1.1 + var(--k, 0) * .12)); } }
/* the Swakopmund glow is already at full strength, so it flashes by spreading out once as the light passes */
@keyframes nam-hq-flash { 16% { transform: scale(1.8); } }
@keyframes nam-on { 0%, 100% { opacity: 1; } }
@keyframes nam-run { from { stroke-dashoffset: 34px; } to { stroke-dashoffset: calc(var(--len) * -1); } }
@keyframes nam-run-h { from { stroke-dashoffset: 42px; } to { stroke-dashoffset: calc(var(--len) * -1 + 8px); } }

/* fibre-art:timing */
.f0{--d:160ms;--u:1200ms} .f1{--d:80ms;--u:1200ms} .f2{--d:80ms;--u:1100ms} .f3{--d:0ms;--u:700ms} .f4{--d:0ms;--u:1100ms} .f5{--d:80ms;--u:1500ms} .f6{--d:80ms;--u:1000ms} .f7{--d:160ms;--u:1000ms} .f8{--d:1360ms;--u:300ms} .f9{--d:1280ms;--u:300ms} .f10{--d:1200ms;--u:300ms} .f11{--d:720ms;--u:300ms} .f12{--d:1120ms;--u:300ms} .f13{--d:1560ms;--u:300ms} .f14{--d:880ms;--u:300ms}
.nam-r1{--len:607px;--rt:583ms} .nam-a1{--ra:2492ms} .nam-r2{--len:594px;--rt:571ms} .nam-a2{--ra:2480ms} .nam-r3{--len:569.3px;--rt:548ms} .nam-a3{--ra:2458ms} .nam-r4{--len:351.8px;--rt:351ms} .nam-a4{--ra:2260ms} .nam-r5{--len:547px;--rt:528ms} .nam-a5{--ra:2437ms} .nam-r6{--len:747.1px;--rt:710ms} .nam-a6{--ra:2619ms} .nam-r7{--len:516.8px;--rt:501ms} .nam-a7{--ra:2410ms} .nam-r8{--len:498.9px;--rt:484ms} .nam-a8{--ra:2394ms} .hero{--surge:1940ms;--surge-hq:2274ms;--idle-at:3819ms}
/* /fibre-art:timing */

/* ---------------------------------------------------------------- 01 who we are
   The company as a line in the style of the hero map: a ribbon from 2008 to the head office in Swakopmund and on to
   every business area in Namibia, with an LED lamp at every stop. When it scrolls into view (initReveal adds .is-in)
   the ribbon draws itself, the lamps switch on as it passes and one red pulse runs through, once. Without JavaScript
   or with reduced motion it is simply there. Below it: the mission and the company facts. */
.route {
  --node: 22px; --rib: 6px; --top: 34px;
  --route-from: rgba(var(--ink), .2); --route-to: var(--text);
  --route-ring: rgba(255, 240, 222, .5); --route-core: #fff; --route-glow: rgba(255, 214, 170, .5);
  --route-hq-ring: var(--red-hi); --route-hq-core: var(--red-hi);
  position: relative; padding-top: var(--top); margin-bottom: clamp(64px, 8vw, 112px);
}
.route__track {
  position: absolute; top: calc(var(--top) + (var(--node) - var(--rib)) / 2); height: var(--rib);
  left: calc(var(--gutter) + var(--node) / 2); right: calc(var(--gutter) + 10px);
  border-radius: var(--rib) 0 0 var(--rib); background: linear-gradient(90deg, var(--route-from), var(--route-to));
  transform-origin: left center;
}
/* the arrowhead: the line carries on to every business area */
.route__track::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: 14px; height: 16px; transform: translateY(-50%);
  background: var(--route-to); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.route__pulse { position: absolute; inset: 0 -14px 0 0; overflow: hidden; border-radius: inherit; }
.route__pulse::before {
  content: ""; position: absolute; inset: -4px 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent calc(100% - 130px), rgba(255, 90, 96, .55) calc(100% - 30px), #ff5a60 calc(100% - 4px), transparent 100%);
}
.route__end { position: absolute; top: 0; right: var(--gutter); margin: 0; font-size: .86rem; font-weight: 600; letter-spacing: .01em; color: var(--red-hi); }
.route__stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); }
.route__stop { position: relative; padding-top: calc(var(--node) + 22px); }
.route__node {
  position: absolute; top: 0; left: 0; width: var(--node); height: var(--node); border-radius: 50%;
  background: var(--bg); border: 2px solid var(--route-ring); box-shadow: 0 0 16px var(--route-glow);
}
.route__node::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--route-core); }
.route__stop--hq .route__node { border-color: var(--route-hq-ring); box-shadow: 0 0 16px rgba(240, 72, 78, .45); }
.route__stop--hq .route__node::after { background: var(--route-hq-core); inset: 5px; }
.route__kick { margin: 0 0 8px; font-size: .86rem; letter-spacing: .01em; color: var(--text-3); }
.route__stop--hq .route__kick { color: var(--red-hi); }
.route__title { margin: 0 0 10px; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1; font-weight: 850; font-stretch: 72%; color: var(--text); }
.route__text { margin: 0; max-width: 36ch; font-size: .98rem; color: var(--text-2); text-wrap: pretty; }

/* the reveal: hidden states only with JavaScript, so the page is complete without it. The transitions only exist once
   it is revealed, so hiding (when script.js marks the page .js after the first paint) is instant and only the reveal
   animates. The line draws at a steady speed, like a train along the route, and each stop lights up as the line
   reaches it (the stops sit at 0, 26, 53 and 79% of the line). */
.route.is-in .route__track { transition: transform 1.5s linear .25s; }
.route.is-in :is(.route__node, .route__stop > *) { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.route.is-in .route__stop:nth-child(1) > * { transition-delay: .25s; }
.route.is-in .route__stop:nth-child(2) > * { transition-delay: .64s; }
.route.is-in .route__stop:nth-child(3) > * { transition-delay: 1.04s; }
.route.is-in .route__stop:nth-child(4) > * { transition-delay: 1.44s; }
.js .route:not(.is-in) .route__track { transform: scaleX(0); }
.js .route:not(.is-in) .route__node { opacity: .15; transform: scale(.55); }
.js .route:not(.is-in) .route__stop > :not(.route__node) { opacity: 0; transform: translateY(10px); }
.route.is-in .route__pulse::before { animation: route-pulse 1.5s 1.9s linear both; }
.route.is-in .route__node { animation: route-lamp .9s ease-out; }
.route.is-in .route__stop:nth-child(1) .route__node { animation-delay: 1.9s; }
.route.is-in .route__stop:nth-child(2) .route__node { animation-delay: 2.28s; }
.route.is-in .route__stop:nth-child(3) .route__node { animation-delay: 2.66s; }
.route.is-in .route__stop:nth-child(4) .route__node { animation: route-hq 1.1s 3.04s ease-out; }
@keyframes route-pulse { to { transform: translateX(8%); } }
/* reduced motion: drawn and lit from the start, like the rest of the page's reveals */
@media (prefers-reduced-motion: reduce) { .js .route:not(.is-in) :is(.route__track, .route__node, .route__stop > *) { opacity: 1; transform: none; } }
@keyframes route-lamp { 18% { box-shadow: 0 0 0 5px rgba(255, 90, 96, .25), 0 0 26px rgba(255, 90, 96, .7); } }
@keyframes route-hq { 18% { box-shadow: 0 0 0 7px rgba(240, 72, 78, .3), 0 0 34px rgba(240, 72, 78, .85); } }

/* phones and tablets: the line runs down the left, the stops stacked beside it */
@media (max-width: 900px) {
  .route { display: flex; flex-direction: column; padding-top: 0; }
  .route__stops { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .route__stop { padding: 0 0 0 calc(var(--node) + 20px); }
  .route__track {
    top: calc(var(--node) / 2); bottom: 28px; left: calc(var(--gutter) + (var(--node) - var(--rib)) / 2); right: auto;
    width: var(--rib); height: auto; border-radius: var(--rib) var(--rib) 0 0;
    background: linear-gradient(180deg, var(--route-from), var(--route-to)); transform-origin: center top;
  }
  .route__track::after { left: 50%; top: 100%; width: 16px; height: 14px; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .route__pulse { inset: 0 0 -14px 0; }
  .route__pulse::before { inset: 0 -4px; transform: translateY(-100%);
    background: linear-gradient(180deg, transparent calc(100% - 130px), rgba(255, 90, 96, .55) calc(100% - 30px), #ff5a60 calc(100% - 4px), transparent 100%); }
  .route__end { position: static; order: 2; margin-top: 30px; padding-left: calc(var(--node) + 20px); }
  .js .route:not(.is-in) .route__track { transform: scaleY(0); }
  @keyframes route-pulse { to { transform: translateY(8%); } }
}

.about__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 80px); row-gap: 40px; align-items: start; }
.about__mission { margin: 0; padding-top: 18px; border-top: 1px solid var(--line-2); }
.about__mission-lbl { margin: 0 0 14px; font-size: .88rem; font-weight: 600; letter-spacing: .01em; color: var(--red-hi); }
.about__mission-txt { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.95rem); line-height: 1.25; font-weight: 650; font-stretch: 88%; color: var(--text); text-wrap: pretty; }
.facts { margin: 0; border-top: 1px solid var(--line-2); }
.facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--din); font-stretch: semi-condensed; font-size: .92rem; color: var(--text-3); }
.facts dd { margin: 0; font-family: var(--din); font-stretch: semi-condensed; font-size: 1rem; font-weight: 500; color: var(--text); }
@media (max-width: 900px) { .about__foot { grid-template-columns: minmax(0, 1fr); } }


.offer__body { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
/* wind behind the cycle (windField, lazy), fading out all round so it sits in the page */
.offer__wind {
  position: absolute; left: -6%; top: -10%; width: 112%; height: 120%; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
}
@media (max-width: 899px) { .offer__wind { display: none; } }   /* the octagon covers it on a phone, and the sim is spared */
.octa { position: relative; width: 100%; max-width: min(600px, calc(100% - 300px)); aspect-ratio: 1; margin: 44px auto; }   /* room for the labels above 01 and below 05 */
.octa__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.octa__ring { fill: none; stroke-linejoin: round; }
.octa__ring--outer { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 7; }
.octa__ring--outer, .octa__ring--inner { transform-box: fill-box; transform-origin: center; }   /* turned by the scroll (initOcta) */
.octa__ring--track { stroke: var(--line-2); stroke-width: 2; }
.octa__ring--lit { stroke: var(--red); stroke-width: 3; stroke-dasharray: 0 8; transition: stroke-dasharray .9s var(--ease-io); }
.octa__ring--inner { stroke: var(--line); stroke-width: 1; fill: rgba(255, 255, 255, .012); }
.octa__spokes line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.octa__spokes line.is-on { stroke: var(--red-hi); stroke-dasharray: none; opacity: .7; }
.octa__packet { fill: var(--red-hi); filter: drop-shadow(0 0 8px rgba(240, 72, 78, .95)); }
.octa__core {
  position: absolute; inset: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.octa__core-num { font-size: clamp(3rem, 8vw, 6.2rem); font-weight: 700; line-height: 1; color: var(--red); letter-spacing: -.04em; }
.octa__core-lbl { margin-top: 10px; font-size: clamp(.9rem, 1.4vw, 1.12rem); font-weight: 700; font-stretch: 80%; text-transform: uppercase; letter-spacing: .04em; color: var(--text); max-width: 16ch; line-height: 1.15; }
.octa__core.is-swap .octa__core-num { animation: roll .55s var(--ease); }
.octa__core.is-swap .octa__core-lbl { animation: swap .5s var(--ease) .08s both; }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes roll { from { opacity: 0; transform: translateY(.4em); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

.octa__tab:nth-child(1) { --x: 50%; --y: 8%; }
.octa__tab:nth-child(2) { --x: 79.7%; --y: 20.3%; }
.octa__tab:nth-child(3) { --x: 92%; --y: 50%; }
.octa__tab:nth-child(4) { --x: 79.7%; --y: 79.7%; }
.octa__tab:nth-child(5) { --x: 50%; --y: 92%; }
.octa__tab:nth-child(6) { --x: 20.3%; --y: 79.7%; }
.octa__tab:nth-child(7) { --x: 8%; --y: 50%; }
.octa__tab:nth-child(8) { --x: 20.3%; --y: 20.3%; }
.octa__tab {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: block; padding: 0; border: 0; background: none; color: var(--text-2); z-index: 2;
}
.octa__pad {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--line-3); font-size: .9rem; font-weight: 700; color: var(--text-2);
  transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease), box-shadow .3s;
}
.octa__pad::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed var(--line-2); transition: border-color .3s; }
/* the next step charges as the trace is drawn to it (--charge 0..1 from the scroll), then lands with a pulse */
.octa__pad { box-shadow: 0 0 0 calc(var(--charge, 0) * 7px) rgba(240, 72, 78, .22), 0 0 calc(var(--charge, 0) * 24px) rgba(240, 72, 78, calc(var(--charge, 0) * .7)); }
.octa__tab:not([aria-selected="true"]) .octa__pad::after { border-color: color-mix(in srgb, var(--red-hi) calc(var(--charge, 0) * 100%), var(--line-2)); }
.octa__tab.is-hit .octa__pad { animation: octa-hit .65s var(--ease); }
@keyframes octa-hit { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 72, 78, .7); } 40% { transform: scale(1.24); } 100% { transform: scale(1); box-shadow: 0 0 0 22px rgba(240, 72, 78, 0); } }
.octa__lbl {
  position: absolute; top: 50%; transform: translateY(-50%); width: max-content; max-width: 170px;
  font-size: .92rem; font-weight: 600; line-height: 1.2; text-align: left; transition: color .3s; max-width: 140px;
}
.octa__tab[data-side="right"] .octa__lbl { left: calc(100% + 14px); }
.octa__tab[data-side="left"] .octa__lbl { right: calc(100% + 14px); text-align: right; }
.octa__tab:is([data-side="top"], [data-side="bottom"]) .octa__lbl { left: 50%; transform: translateX(-50%); text-align: center; max-width: 190px; }
.octa__tab[data-side="top"] .octa__lbl { top: auto; bottom: calc(100% + 10px); }
.octa__tab[data-side="bottom"] .octa__lbl { top: calc(100% + 10px); }
.octa__tab:hover .octa__pad { border-color: var(--sand); color: var(--text); transform: scale(1.06); }
.octa__tab:hover .octa__lbl { color: var(--text); }
.octa__tab[aria-selected="true"] .octa__pad { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(193, 39, 45, .18), 0 0 30px rgba(193, 39, 45, .45); }
.octa__tab[aria-selected="true"] .octa__pad::after { border-color: rgba(255, 255, 255, .45); }
.octa__tab[aria-selected="true"] .octa__lbl { color: var(--text); }
.octa__tab.is-done .octa__pad { border-color: var(--red-hi); color: var(--text); }
.octa__tab:focus-visible { outline: none; }
.octa__tab:focus-visible .octa__pad { outline: 2px solid var(--focus); outline-offset: 4px; }

.offer__panels { position: relative; display: grid; }   /* the steps stack in one cell, so the block keeps the height of the tallest */
.offer__panel { grid-area: 1 / 1; }
.offer__panel:focus { outline: none; }
.offer__panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 10px; }
.offer__panel[hidden] { display: block; visibility: hidden; }
.offer__panel:not([hidden]) > * { animation: fade-up .5s var(--ease) both; }   /* title, text, link: one after the other */
.offer__panel:not([hidden]) > :nth-child(2) { animation-delay: .08s; }
.offer__panel:not([hidden]) > :nth-child(3) { animation-delay: .16s; }
.offer__title { font-size: clamp(1.9rem, 3.2vw, 3rem); font-stretch: 72%; font-weight: 850; line-height: .98; margin-bottom: 18px; text-wrap: balance; }
.offer__panel p:not(.offer__count) { color: var(--text-2); font-size: 1.08rem; max-width: 46ch; }
.offer__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--sand-lt); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(var(--sand-rgb), .4); padding-bottom: 2px; }
.offer__more:hover { color: var(--text); border-color: var(--text); }
.offer__stepper { grid-row: 2; display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.offer__progress { flex: 1; height: 2px; background: var(--line-2); position: relative; overflow: hidden; }
.offer__progress span { position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(.125); transition: transform .6s var(--ease-io); }
html:not(.js) .offer__panels { display: block; }   /* without the script every step is readable, one under the other */
/* Scrolling through the cycle: where the block fits under the header, initOcta pins it (sticky) while the page scrolls
   one stage per step, then lets the section go; the ::after is the room it scrolls through (--travel, --pin-top). */
.offer.is-pinned::after { content: ""; display: block; height: var(--travel, 0px); }
.offer.is-pinned .offer__body { position: sticky; top: var(--pin-top, var(--head-h)); }
.offer.is-pinned .offer__progress span { transition-duration: .25s; }
.offer.is-pinned .octa__ring--lit { transition: none; }   /* drawn by the scroll, not eased */

@media (max-width: 1279px) {
  .offer__body { grid-template-columns: minmax(0, 1fr); }
  .offer__panels { width: 100%; max-width: 640px; margin-inline: auto; }   /* under the octagon, not off to one side */
  .octa { max-width: min(540px, calc(100% - 270px)); }
  .octa__lbl { max-width: 125px; font-size: .85rem; }
}
@media (max-width: 760px) {
  .octa { max-width: min(420px, 100% - 24px); margin-block: 0; }
  .octa__pad { width: 44px; height: 44px; font-size: .8rem; }
  .octa__lbl { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


.svc { padding-block: clamp(44px, 6vw, 88px); border-top: 1px solid var(--line); position: relative; }
.sec-head + .svc { padding-top: 0; }   /* the heading already leaves room */
.svc:last-child { padding-bottom: 0; }
.svc__title { font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 850; font-stretch: 70%; line-height: .95; margin-bottom: 22px; text-wrap: balance; max-width: 16ch; }
.svc__head--wide .svc__title { max-width: 24ch; }
.svc__lede { font-size: 1.1rem; color: var(--text); max-width: 56ch; }
.svc__head p:not(.svc__tag):not(.svc__lede):not(.svc__note) { color: var(--text-2); max-width: 56ch; }
.svc__note { font-size: .8rem; color: var(--sand); border-left: 2px solid var(--red); padding-left: 12px; letter-spacing: .02em; max-width: 52ch; }
.svc__facts { list-style: none; margin: 24px 0 0; display: grid; gap: 10px; }
.svc__facts li { position: relative; padding-left: 28px; color: var(--text-2); }
.svc__facts li::before { content: ""; position: absolute; left: 0; top: .72em; width: 16px; height: 1.5px; background: var(--red-hi); }
.svc__facts li::after { content: ""; position: absolute; left: 14px; top: calc(.72em - 3px); width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--red-hi); background: var(--bg); }


.svc--sales { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; border-top: 0; }
.slip { perspective: 1200px; }
.slip__paper {
  position: relative; max-width: 460px; margin-inline: auto; padding: 30px 28px 26px;
  background:
    radial-gradient(rgba(60, 40, 20, .06) 1px, transparent 1px) 0 0 / 5px 5px,
    linear-gradient(180deg, #efe5d4, #e3d5bf);
  color: #1d1812; font-size: .92rem; font-weight: 500; line-height: 1.45;
  transform: rotate(-1.6deg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 2px 0 rgba(255, 255, 255, .3) inset;
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) 0 0 / 14px 51% repeat-x, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 100% / 14px 51% repeat-x;
          mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) 0 0 / 14px 51% repeat-x, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 100% / 14px 51% repeat-x;
}
.slip__hd { display: flex; justify-content: space-between; gap: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .78rem; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1.5px dashed rgba(29, 24, 18, .45); }
.slip__rows { list-style: none; margin: 0 0 14px; }
.slip__rows li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px dotted rgba(29, 24, 18, .35); align-items: baseline; }
.slip__n { color: #8e1a1f; font-weight: 700; }
.slip__v { font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; text-align: right; }
.slip__cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0; }
.slip__cats span { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; text-align: center; }
.slip__cats .ico { --ico-acc: #b3232a; color: #1d1812; }
.slip__ft { display: flex; justify-content: space-between; align-items: center; margin: 0; padding-top: 12px; border-top: 1.5px dashed rgba(29, 24, 18, .45); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 700; }
.slip__barcode { width: 120px; height: 28px; background: repeating-linear-gradient(90deg, #1d1812 0 2px, transparent 2px 4px, #1d1812 4px 5px, transparent 5px 8px, #1d1812 8px 11px, transparent 11px 12px); }
.js .slip__paper { transform: rotate(-1.6deg) translateY(-24px); clip-path: inset(0 0 100% 0); transition: clip-path 1.6s var(--ease-io) .2s, transform 1.6s var(--ease-io) .2s; }
.js .is-in .slip__paper { transform: rotate(-1.6deg); clip-path: inset(-10% -10% -10% -10%); }


.svc--traka {
  border-top: 0; background:
    linear-gradient(180deg, rgba(193, 39, 45, .07), transparent 40%),
    var(--band-bg);
}
.svc--traka::before, .svc--traka::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(-45deg, var(--red) 0 14px, var(--band-bg) 14px 28px); opacity: .85;
}
.svc--traka::before { top: 0; }
.svc--traka::after { bottom: 0; }
.svc--traka__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }

.traka { max-width: 480px; width: 100%; margin-inline: auto; }
.traka__cab {
  position: relative; padding: 22px; border-radius: 6px;
  background: linear-gradient(160deg, #3a3d42 0%, #26282c 45%, #1c1e21 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 -2px 0 rgba(0, 0, 0, .4) inset, 0 40px 70px -30px rgba(0, 0, 0, .9);
  border: 1px solid #45484e;
}
.traka__cab::before { 
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
}
.traka__screen {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 72px;
  padding: 12px 14px; margin-bottom: 18px; border-radius: 3px;
  background: #0b0c0d; border: 1px solid #000; box-shadow: 0 0 0 3px #2e3035, 0 0 24px rgba(231, 196, 142, .06) inset;
  color: var(--phosphor); text-shadow: 0 0 8px rgba(231, 196, 142, .35);
}
.traka__state { font-size: .92rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.traka__sub { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #b9a07a; }
.traka[data-mode="locked"] .traka__screen { color: #ff8a8e; text-shadow: 0 0 10px rgba(240, 72, 78, .45); }
.traka[data-mode="locked"] .traka__sub { color: #e2a2a4; }
.traka__grp-lbl { font-size: .84rem; letter-spacing: .01em; color: #a8a49c; margin-bottom: 8px; }
.traka__slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 0 8px; min-height: 108px; border-radius: 3px; border: 1px solid #111;
  background: linear-gradient(#17181a, #1f2124); box-shadow: 0 2px 6px rgba(0, 0, 0, .5) inset; color: #d5d0c7;
}
.slot__hole { width: 10px; height: 10px; border-radius: 50%; background: #050505; box-shadow: 0 0 0 2px #3b3e43; flex: none; }
.slot__fob {
  width: 24px; height: 50px; border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, var(--sand) 0%, #b79566 100%);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .4) inset, 0 3px 6px rgba(0, 0, 0, .6);
  position: relative; transition: transform .45s var(--ease), opacity .45s;
}
.slot__fob::after { content: ""; position: absolute; left: 50%; top: 8px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.slot__id { font-size: .76rem; font-weight: 700; letter-spacing: .08em; font-family: var(--din); font-stretch: semi-condensed; }
.slot[aria-pressed="true"] .slot__fob { transform: translateY(-28px); opacity: 0; }
.slot[aria-pressed="true"] { background: linear-gradient(#240d0e, #1a0b0c); border-color: rgba(240, 72, 78, .6); }
.slot[aria-pressed="true"] .slot__hole { box-shadow: 0 0 0 2px var(--red-hi), 0 0 10px rgba(240, 72, 78, .7); }
.slot:hover { border-color: #6d7078; }
.traka__override {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 3px; background: #121315; border: 1px dashed #54575d;
}
.traka__lock { width: 26px; height: 26px; fill: none; stroke: var(--phosphor); stroke-width: 1.7; stroke-linecap: round; }
.traka__shackle { transform-origin: 16px 10px; transition: transform .45s var(--ease); transform: translateY(-2px) rotate(22deg); }
.traka__override[data-state="locked"] .traka__lock { stroke: var(--red-hi); }
.traka__override[data-state="locked"] .traka__shackle { transform: none; }
.traka__ovr-lbl { font-size: .9rem; letter-spacing: .01em; color: #cfcac1; }
.traka__ovr-state { font-size: .9rem; font-weight: 700; letter-spacing: .01em; color: var(--phosphor); }
.traka__override[data-state="locked"] .traka__ovr-state { color: var(--red-hi); }
.traka__site { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .85rem; letter-spacing: .01em; color: #a8a49c; }
.traka__bulb { width: 10px; height: 10px; border-radius: 50%; background: var(--phosphor); box-shadow: 0 0 12px rgba(231, 196, 142, .8); transition: background .3s, box-shadow .3s; }
.traka[data-mode="locked"] .traka__bulb { background: #3a3c40; box-shadow: none; }
.traka__controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.traka__caption { margin-top: 14px; font-size: .84rem; letter-spacing: .01em; color: var(--text-3); }


.svc--comms { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; }
.cats li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--line-2); min-width: 84px; }
.cats span { font-weight: 700; font-size: .9rem; letter-spacing: .02em; }
.cats small { font-size: .8rem; color: var(--text-2); }
.cats .is-hi { border-color: var(--red); background: rgba(193, 39, 45, .1); }
.quote-cta { margin-top: 22px; }
.foot__areas { margin-top: 10px; font-size: .9rem; color: var(--text-3); max-width: 34ch; }
.offer__quote { margin-top: 18px; }
.offer__panel .offer__more + .offer__quote { display: inline-flex; margin-left: 0; }
.quote-dlg { width: min(680px, calc(100vw - 24px)); }
.quote-dlg .job__head { padding-right: 56px; }
.quote-dlg .job__meta { max-width: 52ch; }
.form--quote .form__src { margin: 0 0 18px; }
/* the verse, between the map and the footer */
.verse { position: relative; margin-top: var(--sec-pad); padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.verse__inner { text-align: center; max-width: 760px; }
.verse__text { font-family: "Brunson", var(--sans); font-synthesis: none; text-transform: uppercase; font-weight: 700; font-stretch: 75%; font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: .02em; color: var(--text); margin: 0 0 18px; }
.verse__lord { color: var(--red-hi); }
.verse__ref { font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red-hi); margin: 0; }
.verse__ref::before, .verse__ref::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--line-2); vertical-align: middle; margin: 0 12px; }
.sec-head .quote-cta { margin-top: 18px; }
.mining__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.mining__actions .btn { margin-top: 0; }
.form__src { margin: -6px 0 18px; padding: 10px 14px; border-left: 3px solid var(--red); background: rgba(193, 39, 45, .08); font-size: .95rem; }

/* C · connected-site panel */
.site {
  position: relative; padding: clamp(12px, 2vw, 20px);
  border: 1px solid var(--line-2); background: #0a0b0c;
  box-shadow: 0 0 0 1px #000, 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.site::before, .site::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid rgba(231, 196, 142, .55); }
.site::before { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; }
.site::after { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; }
.site__screen {
  display: flex; flex-direction: column; gap: 4px; min-height: 70px; margin-bottom: 12px; padding: 12px 14px;
  background: #07080a; border: 1px solid #000; border-radius: 3px; box-shadow: 0 0 0 3px #1c1e22, 0 0 24px rgba(231, 196, 142, .05) inset;
  color: var(--phosphor); text-shadow: 0 0 8px rgba(231, 196, 142, .35);
}
.site__state { font-size: 1.05rem; font-weight: 700; }
.site__sub { font-size: .9rem; color: #c9b08a; line-height: 1.35; }
.site.is-down .site__screen { color: #ff8a8e; text-shadow: 0 0 10px rgba(240, 72, 78, .45); }
.site.is-down .site__sub { color: #e2a2a4; }
.site__map { position: relative; border: 1px solid var(--line); border-radius: 3px; background: #0d0f11; overflow: hidden; }
.site__svg { width: 100%; height: auto; }
.site__lbl {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  font-size: clamp(11px, 1.3vw, 13px); font-weight: 600; line-height: 1.1; color: var(--text-3); transition: color .4s;
}
.site__lbl--office { left: 31.7%; top: 34.4%; }
.site__lbl--workshop { left: 76.7%; top: 51%; }
.site__lbl--remote { left: 84.2%; top: 8.4%; }
.site__lbl--guest { left: 38%; top: 9.6%; transform: translate(0, -50%); }
.site__lbl--link { left: 60%; top: 17.6%; transform: translate(-50%, 0); }
.site__lbl--fibre { left: 30%; top: 84.6%; }
.site__lbl--gate { left: 46%; top: 94.4%; transform: translate(-100%, -50%); }
.site.on-office .site__lbl--office, .site.on-workshop .site__lbl--workshop, .site.on-remote .site__lbl--remote,
.site.on-guest .site__lbl--guest, .site.on-remote .site__lbl--link, .site.on-workshop .site__lbl--fibre, .site.on-cams .site__lbl--gate { color: var(--text); }

/* map drawing */
#site-dots circle { fill: rgba(var(--ink), .08); }
#site-hatch path { stroke: rgba(var(--ink), .22); stroke-width: 1; }
.s-ground { fill: url(#site-dots); }
.s-fence { fill: none; stroke: rgba(var(--ink), .22); stroke-width: 1.2; stroke-dasharray: 5 5; }
.s-gatepost { stroke: rgba(var(--ink), .5); stroke-width: 2; }
.s-zone { fill: rgba(var(--sand-rgb), .03); stroke: rgba(var(--sand-rgb), .3); stroke-dasharray: 4 4; }
.s-bld { fill: #111316; stroke: rgba(var(--ink), .3); stroke-width: 1.5; transition: fill .5s, stroke .5s; }
.site.on-office .b-office .s-bld, .site.on-workshop .b-workshop .s-bld, .site.on-remote .b-remote .s-bld { fill: #17191d; stroke: rgba(var(--ink), .6); }
.s-wall { stroke: rgba(var(--ink), .3); stroke-width: 1.5; }
.s-rack { fill: #0b0c0e; stroke: rgba(var(--ink), .45); }
.s-rack-u { stroke: rgba(var(--ink), .16); }
/* rack LEDs: dark when the server room is off, red alarm when any system is down, green when all is good */
.s-leds circle { fill: #34363a; transition: fill .3s; }
.site.sys-server .s-leds circle { fill: #ff3b44; filter: drop-shadow(0 0 2.5px rgba(255, 59, 68, .95)); animation: s-led-alarm .7s steps(2) infinite; }
.site.sys-server.all-ok .s-leds circle { fill: #3ee27f; filter: drop-shadow(0 0 2.5px rgba(62, 226, 127, .9)); animation: s-led-ok 1.4s steps(2) infinite; }
.site.sys-server .s-leds circle:nth-child(2n) { animation-delay: .35s; }
.site.sys-server .s-leds circle:nth-child(3n) { animation-delay: .7s; }
@keyframes s-led-alarm { 50% { fill: #4a1417; filter: none; } }
@keyframes s-led-ok { 50% { fill: #1c6b3e; } }
.s-tray { fill: rgba(var(--sand-rgb), .08); stroke: rgba(var(--sand-rgb), .45); transition: opacity .4s; }
.site.is-messy .s-tray { opacity: 0; }
.c-neat, .c-messy { transition: opacity .5s; }
.c-messy, .site.is-messy .c-neat { opacity: 0; }
.site.is-messy .c-messy { opacity: 1; }
.s-link { fill: none; stroke: rgba(var(--ink), .16); stroke-width: 1.6; stroke-linejoin: round; transition: stroke .4s; }
.site.on-office .l-office, .site.on-workshop .l-workshop, .site.on-remote .l-remote, .site.on-guest .l-guest { stroke: rgba(240, 72, 78, .85); }
.s-desk { fill: #1a1c20; stroke: rgba(var(--ink), .25); }
.mon, .s-phone { fill: #2e3034; transition: fill .4s; }
.site.on-office .b-office .mon, .site.on-workshop .b-workshop .mon, .site.on-remote .b-remote .mon { fill: var(--phosphor); }
.site.on-office .b-office .s-phone { fill: var(--sand); }
.s-machine { fill: url(#site-hatch); stroke: rgba(var(--ink), .28); }
.s-fibre-sheath { fill: none; stroke: #1c1e22; stroke-width: 7; stroke-linejoin: round; }
.s-fibre-core { fill: none; stroke: rgba(var(--ink), .16); stroke-width: 2; stroke-linejoin: round; transition: stroke .4s, filter .4s; }
/* live fibre glows like a neon tube: white core, cyan halo */
.site.on-workshop .s-fibre-core {
  stroke: #eafdff;
  filter: drop-shadow(0 0 1.5px #7ff4ff) drop-shadow(0 0 5px rgba(34, 225, 255, .85)) drop-shadow(0 0 12px rgba(34, 225, 255, .45));
  animation: s-neon 3.2s ease-in-out infinite;
}
@keyframes s-neon { 50% { stroke: #c9f8ff; } }
.site.on-workshop .site__lbl--fibre { color: #9ff3ff; }
.s-mast { fill: none; stroke: rgba(var(--ink), .55); stroke-width: 1.5; stroke-linejoin: round; }
.s-beam { fill: none; stroke: rgba(var(--ink), .14); stroke-width: 2; stroke-dasharray: 6 8; transition: stroke .4s; }
.site.on-remote .s-beam { stroke: var(--red-hi); animation: s-beam .9s linear infinite; }
@keyframes s-beam { to { stroke-dashoffset: -14; } }
.s-node circle { fill: #0d0f11; stroke: rgba(var(--ink), .4); stroke-width: 1.5; transition: stroke .4s, fill .4s; }
.site.on-guest .s-node circle { stroke: var(--red-hi); fill: #2a0f10; }
.s-arc { fill: none; stroke: rgba(var(--ink), .14); stroke-width: 1.4; stroke-linecap: round; transition: stroke .4s; }
.site.on-guest .s-arc { stroke: var(--sand); animation: s-arc 1.8s ease-in-out infinite; }
@keyframes s-arc { 50% { opacity: .35; } }
.s-dev circle { fill: rgba(var(--ink), .18); transition: fill .4s; }
.site.on-guest .s-dev circle { fill: var(--phosphor); }
.s-cone { fill: url(#cone-g); opacity: .08; transition: opacity .5s; }
.site.on-cams .s-cone { opacity: 1; }
/* camera heads patrol left to right on their mounts, pausing at each end; they freeze when CCTV is off */
.s-pan { animation: s-pan 7s cubic-bezier(.45, 0, .55, 1) infinite; animation-play-state: paused; }
.cam-2 .s-pan { animation-delay: -2.6s; animation-duration: 8s; }
.cam-3 .s-pan { animation-delay: -5.1s; animation-duration: 6.4s; }
.site.on-cams .s-pan { animation-play-state: running; }
@keyframes s-pan {
  0%, 14% { transform: rotate(-32deg); }
  50%, 64% { transform: rotate(32deg); }
  100% { transform: rotate(-32deg); }
}
.s-scan { fill: none; stroke: var(--red-hi); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0; transition: opacity .4s; }
.site.on-cams .s-scan { opacity: .85; animation: s-beam .9s linear infinite; }
.s-cam-mount { fill: #1c1e22; stroke: rgba(var(--ink), .55); stroke-width: 1.2; }
.s-cam-lens { stroke: rgba(var(--ink), .7); stroke-width: 1.6; stroke-linecap: round; }
.s-cam-body { fill: #2a2c30; stroke: rgba(var(--ink), .5); }
.s-cam-led { fill: #3a3c40; }
.site.on-cams .s-cam-led { fill: var(--red-hi); animation: blink 1.4s steps(1) infinite; }
.s-pkt { fill: #fff; filter: drop-shadow(0 0 3px rgba(240, 72, 78, 1)); }
.s-pkt--tail { filter: none; }
.s-pkt--fibre { fill: #f4feff; filter: drop-shadow(0 0 3px #22e1ff) drop-shadow(0 0 7px rgba(34, 225, 255, .9)); }
.s-pkt--fibre.s-pkt--tail { filter: none; fill: #bff6ff; }

/* switches */
.site__hint { margin: 14px 0 8px; font-size: .9rem; color: var(--text-2); }
.site__switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sw {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 54px; padding: 8px 12px; text-align: left; border: 1px solid var(--line-2); border-radius: 3px;
  background: #111316; color: var(--text-2); font: 500 .95rem/1.25 var(--sans);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .25s, color .25s, background .25s;
}
.sw:hover { border-color: var(--line-3); }
.sw__toggle { position: relative; width: 42px; height: 24px; border-radius: 12px; background: #2a2c30; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); transition: background .25s; }
.sw__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8f887e; transition: transform .25s var(--ease), background .25s; }
.sw[aria-checked="true"] { color: var(--text); border-color: rgba(240, 72, 78, .45); background: #16100f; }
.sw[aria-checked="true"] .sw__toggle { background: var(--red); }
.sw[aria-checked="true"] .sw__knob { transform: translateX(18px); background: #fff; }
.site__controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.site__caption { margin: 12px 0 0; font-size: .84rem; color: var(--text-3); }

@media (min-width: 1001px) { .svc--comms .svc__head { position: sticky; top: calc(var(--head-h) + 32px); } }
@media (max-width: 1000px) { .svc--comms { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .site { padding: 10px; margin-inline: calc(var(--gutter) * -.5); }
  .site__switches { grid-template-columns: minmax(0, 1fr); }
  .site__controls .btn { flex: 1 1 100%; }
  .site__state { font-size: 1rem; }
}

.svc--consult { background: linear-gradient(180deg, transparent, var(--consult-wash) 30%, transparent); }
/* consulting: a typical integrated site, the core switch at its centre. The badges and labels are HTML, so text stays
   crisp at any size; script.js places them, draws the links and runs packets along them. */
.integ { margin: 0 0 clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.integ__h { margin: 0 0 12px; font-size: .9rem; color: var(--text-2); }
.integ__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.integ__btn {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; padding: 12px 14px 12px 12px;
  text-align: left; color: inherit; font: inherit; background: none; border: 0; border-left: 2px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.integ__btn:hover, .integ__btn[aria-pressed="true"] { background: var(--wash); border-left-color: var(--red); }
.integ__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.integ__n { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border: 1.5px solid var(--red-hi); border-radius: 50%; color: var(--red-hi); font-family: var(--din); font-size: .82rem; font-weight: 700; }
.integ__btn[aria-pressed="true"] .integ__n { background: var(--red); border-color: var(--red); color: #fff; }
.integ__t strong { display: block; margin-bottom: 3px; font-weight: 700; }
.integ__t span { display: block; font-size: .92rem; line-height: 1.45; color: var(--text-2); }

/* the map: round badges placed by script.js (--x, --y, data-side for the label) on a fixed aspect ratio, with the
   links drawn under them as flat ribbons on casings in the page colour, like the Namibia map in the hero */
.integ__map { --strip: #d8d2c8; --casing: var(--bg); --d: 52px; --d-core: 70px; position: relative; }
.integ__stage { position: relative; aspect-ratio: var(--ar, 1000 / 600); }
.integ__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.integ__nodes { position: absolute; inset: 0; z-index: 1; list-style: none; margin: 0; padding: 0; }
.integ__node { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: var(--d); height: var(--d); translate: -50% -50%; transition: opacity .25s; }
.integ__node[data-node="core"] { width: var(--d-core); height: var(--d-core); }
.integ__badge {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--line-3); color: var(--text);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.integ__badge .ico { width: 44%; height: 44%; stroke-width: 1.5; }
.integ__node[data-node="core"] .integ__badge { border: 2px solid var(--red-hi); background: radial-gradient(circle, rgba(193, 39, 45, .28), var(--bg) 70%); box-shadow: 0 0 0 6px rgba(193, 39, 45, .12), 0 0 36px rgba(193, 39, 45, .35); }
.integ__node[data-node="core"] .integ__badge::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(240, 72, 78, .55); opacity: 0; }
.integ__lbl { position: absolute; width: max-content; max-width: min(140px, 31vw); font-size: .8rem; line-height: 1.3; color: var(--text-2); }
.integ__lbl strong { display: block; margin-bottom: 2px; font-size: .95rem; color: var(--text); }
.integ__node[data-side="r"] .integ__lbl { left: calc(100% + 14px); top: 50%; translate: 0 -50%; }
.integ__node[data-side="l"] .integ__lbl { right: calc(100% + 14px); top: 50%; translate: 0 -50%; text-align: right; }
.integ__node[data-side="b"] .integ__lbl { top: calc(100% + 12px); left: 50%; translate: -50% 0; text-align: center; }
.integ__node[data-side="bl"] .integ__lbl { top: calc(100% + 12px); left: 0; }
.integ__node[data-side="tr"] .integ__lbl { bottom: calc(100% + 12px); right: 0; text-align: right; }
.integ__map.is-focus .integ__node { opacity: .38; }
.integ__map.is-focus .integ__node.is-lit { opacity: 1; }
.integ__node.is-lit .integ__badge { border-color: var(--red-hi); box-shadow: 0 0 0 5px rgba(193, 39, 45, .16), 0 0 28px rgba(193, 39, 45, .45); }
.integ__case { fill: none; stroke: var(--casing); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.integ__strip { fill: none; stroke: var(--strip); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s, stroke .25s; }
.integ__strip--fibre { stroke: var(--red); }
.integ__strip--p2p { stroke-dasharray: 2 10; stroke-width: 5; }
.integ__wave { fill: none; stroke: var(--strip); stroke-width: 2; stroke-linecap: round; opacity: .8; transition: opacity .25s, stroke .25s; }
.integ__map.is-focus :is(.integ__strip, .integ__wave):not(.is-lit) { opacity: .22; }
.integ__map.is-focus .integ__strip.is-lit:not(.integ__strip--fibre), .integ__map.is-focus .integ__wave.is-lit { stroke: var(--red-hi); }
.integ__map.is-wires :is(.integ__strip:not(.integ__strip--fibre), .integ__wave) { stroke: var(--red-hi); }
.integ__pkt { fill: #fff6e2; }
@media (prefers-reduced-motion: no-preference) {
  .integ__map.is-live .integ__node[data-node="core"] .integ__badge::before { animation: core-ring 2.8s ease-out infinite; }
}
@keyframes core-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
.integ__key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; font-size: .82rem; color: var(--text-2); }
.integ__key-i { display: inline-flex; align-items: center; gap: 9px; }
.integ__key-i::before { content: ""; width: 26px; height: 5px; border-radius: 3px; background: var(--strip); }
.integ__key-i--fibre::before { background: var(--red); }
.integ__key-i--p2p::before { background: radial-gradient(circle, var(--strip) 2.4px, transparent 2.8px) 0 50% / 12px 5px repeat-x; }
.integ__cap { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--text-2); }
:root[data-theme="light"] .integ__map { --strip: #3a3d42; }
:root[data-theme="light"] .integ__pkt { fill: var(--red); }
@media (max-width: 1100px) {
  .integ { grid-template-columns: minmax(0, 1fr); }
  .integ__map { order: -1; }
  .integ__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}
@media (max-width: 700px) {
  .integ__list { grid-template-columns: minmax(0, 1fr); }
  .integ__map { --d: 48px; --d-core: 60px; }
  .integ__lbl { font-size: .76rem; }
  .integ__lbl strong { font-size: .9rem; }
}
.trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-bottom: clamp(40px, 6vw, 72px); }
.trio__col { padding-top: 22px; border-top: 2px solid var(--line-2); position: relative; }
.trio__col::before { content: ""; position: absolute; left: 0; top: -2px; width: 48px; height: 2px; background: var(--red); }
.trio__col h4 { font-size: 1.7rem; font-stretch: 74%; font-weight: 850; margin-bottom: 12px; }
.trio__col p:last-child { color: var(--text-2); margin: 0; }
.portfolio__h { font-size: .93rem; font-weight: 500; letter-spacing: .01em; color: var(--text-2); margin-bottom: 18px; }
.portfolio__grid { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.portfolio__grid li { display: flex; flex-direction: column; gap: 18px; padding: 22px 18px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 600; font-size: .95rem; line-height: 1.3; transition: background .3s; }
.portfolio__grid li:hover { background: rgba(193, 39, 45, .06); }
.portfolio__grid .ico { color: var(--sand); }

@media (max-width: 1100px) {
  .portfolio__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .svc--sales, .svc--traka__inner { grid-template-columns: minmax(0, 1fr); }
  .trio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .portfolio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traka__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slip__paper { padding: 26px 18px 22px; }
  .slip__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
}


/* support: a real technician next to the ways to reach us and how support is billed */
.support__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.support__scope {
  margin: 0; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--line-2); background: #0a0b0c;
  box-shadow: 0 0 0 1px #000, 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.support__scope-h { margin: 0 0 12px; font-size: .9rem; color: var(--text-2); }
.scope__cv { width: 100%; aspect-ratio: 1; }
.scope__legend { list-style: none; margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: .88rem; color: var(--text-2); }
.scope__legend li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.scope__legend span { display: inline-block; min-width: 3em; color: var(--phosphor); font-weight: 700; }
/* the six ring colours, matching RING in script.js */
.scope__legend .l-isp span { color: #f29696; } .scope__legend .l-net span { color: #f0be82; } .scope__legend .l-app span { color: #e8d68c; }
.scope__legend .l-srv span { color: #a5d6b6; } .scope__legend .l-hw span { color: #9ec9e2; } .scope__legend .l-ws span { color: #d9b991; }
.scope__legend li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.scope__legend .l-isp::before { color: #f29696; } .scope__legend .l-net::before { color: #f0be82; } .scope__legend .l-app::before { color: #e8d68c; }
.scope__legend .l-srv::before { color: #a5d6b6; } .scope__legend .l-hw::before { color: #9ec9e2; } .scope__legend .l-ws::before { color: #d9b991; }
.support__channels { list-style: none; margin: 0 0 clamp(28px, 4vw, 44px); border-top: 1px solid var(--line-2); }
.support__channels li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.support__channels .ico { color: var(--red-hi); margin-top: 6px; }
.support__channels strong { display: block; margin-bottom: 2px; font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 850; font-stretch: 74%; line-height: 1.05; color: var(--text); }
.support__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin: 0 0 clamp(28px, 4vw, 44px); }
.support__facts dt { margin-bottom: 4px; font-weight: 700; }
.support__facts dd { margin: 0; color: var(--text-2); }
.support__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line-2); background: var(--panel); }
.support__cta p { flex: 1 1 260px; margin: 0; }
@media (max-width: 900px) {
  .support__grid { grid-template-columns: minmax(0, 1fr); }
  .support__scope { max-width: 440px; }
}
@media (max-width: 600px) { .support__facts { grid-template-columns: minmax(0, 1fr); } }


.partners__body { display: grid; gap: clamp(28px, 4vw, 48px); }
.board {
  position: relative; padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 40px);
  border: 1px solid var(--line); background:
    radial-gradient(rgba(var(--sand-rgb), .06) 1px, transparent 1.2px) 0 0 / 14px 14px,
    linear-gradient(180deg, var(--board-a), var(--board-b));
}
.board__traces { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.board__traces .bt { fill: none; stroke: rgba(var(--sand-rgb), .16); stroke-width: 1.5; stroke-linejoin: round; transition: stroke .3s; }
.board__traces .bt.is-lit { stroke: var(--red-hi); }
.board__traces .bt-via { fill: var(--board-b); stroke: rgba(var(--sand-rgb), .3); stroke-width: 1.2; }
.board__traces .bt-pkt { fill: var(--red-hi); filter: drop-shadow(0 0 5px rgba(240, 72, 78, .9)); }
.board__chips { position: relative; z-index: 1; list-style: none; margin: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: clamp(28px, 4vw, 52px) clamp(12px, 2vw, 26px); }
.chip {
  position: relative; display: grid; place-items: center; aspect-ratio: 1.45; padding: 10px 8px;
  border-radius: 3px; border: 1px solid #2d3035; text-align: center;
  background: linear-gradient(160deg, #202226, #141517); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .05) inset;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.chip::before, .chip::after { 
  content: ""; position: absolute; left: 14%; right: 14%; height: 7px;
  background: repeating-linear-gradient(90deg, #77716a 0 3px, transparent 3px 9px);
}
.chip::before { top: -8px; }
.chip::after { bottom: -8px; }
.chip__ref { position: absolute; top: 5px; left: 7px; font-size: .58rem; color: var(--text-3); letter-spacing: .06em; }
.chip__name { font-weight: 800; font-stretch: 82%; font-size: clamp(.78rem, 1.15vw, 1rem); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); line-height: 1.1; transition: color .3s; }
.chip.is-lit { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 28px rgba(193, 39, 45, .35); transform: translateY(-2px); }
.chip.is-lit .chip__name { color: #fff; }
.chip--core { grid-column: 5; grid-row: 1; background: linear-gradient(160deg, #cf2d33, #9e1d22); border-color: #d9474c; }
.chip--core .chip__name { color: #fff; font-size: clamp(.72rem, 1.1vw, .95rem); font-weight: 900; font-stretch: 70%; letter-spacing: .06em; }
.chip--core .chip__ref { color: rgba(255, 255, 255, .7); }
.chip--core::before, .chip--core::after { background: repeating-linear-gradient(90deg, #c9b18c 0 3px, transparent 3px 9px); }

.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.pcard {
  position: relative; padding: 26px 24px 28px; border: 1px solid var(--line); background: var(--wash);
  transition: border-color .3s, background .3s, transform .3s var(--ease); outline-offset: 2px;
}
.pcard::before { content: ""; position: absolute; left: -1px; top: -1px; width: 28px; height: 28px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
.pcard:hover, .pcard:focus-visible, .pcard.is-active { border-color: var(--line-3); background: rgba(193, 39, 45, .05); }
.pcard__tag { font-weight: 600; font-size: .85rem; letter-spacing: .01em; color: var(--red-hi); margin-bottom: 12px; }
.pcard__h { font-size: 1.7rem; font-weight: 850; font-stretch: 74%; margin-bottom: 12px; }
.pcard p:last-child { color: var(--text-2); margin: 0; }
.pcard--also { background: repeating-linear-gradient(-45deg, rgba(var(--sand-rgb), .03) 0 10px, transparent 10px 20px); }
.pcard--also .pcard__h { font-size: 1.3rem; }
.pcard__list { list-style: none; margin: 0; display: grid; gap: 8px; }
.pcard__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pcard__list li::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--sand); transform: rotate(45deg); flex: none; }

@media (max-width: 1100px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .board__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .chip { aspect-ratio: 2.6; }
  .chip--core { grid-column: auto; grid-row: auto; }
  .board__traces { display: none; }
  .pcards { grid-template-columns: minmax(0, 1fr); }
}


.ind { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; align-items: start; }
.ind__list { grid-column: 1 / span 7; list-style: none; margin: 0; border-top: 1px solid var(--line); }
.ind__list li { border-bottom: 1px solid var(--line); }
.ind__list li { display: flex; align-items: baseline; gap: 18px; padding: 12px 0; }
.ind__list li.ind__mining { padding: 0; }
.ind__list li > a { position: relative; flex: 1; display: flex; align-items: baseline; gap: 18px; padding: 12px 0; text-decoration: none; }
.ind__w {
  font-size: clamp(1.9rem, 4.6vw, 4rem); font-weight: 850; font-stretch: 66%; text-transform: uppercase; line-height: .95; letter-spacing: -.005em;
  color: var(--text-2); transition: color .35s, transform .45s var(--ease);
}
.ind__list li:hover .ind__w { color: var(--text); transform: translateX(10px); }
.ind__mining .ind__w { color: var(--text); }
.ind__mining .ind__w::after { content: "."; color: var(--red); }
.ind__flag { margin-left: auto; align-self: center; font-size: .84rem; letter-spacing: .01em; color: #fff; background: var(--red); padding: 5px 8px; }
.ind__mining a:hover .ind__w, .ind__mining a:focus-visible .ind__w { transform: translateX(10px); }

.mining { grid-column: 8 / -1; position: sticky; top: calc(var(--head-h) + 24px); border: 1px solid var(--line-2); background: #120d0b; overflow: hidden; }
.mining__strata { height: 220px; position: relative; }
.mining__strata svg { width: 100%; height: 100%; }
.mining__dots circle { fill: rgba(29, 20, 14, .5); }
.mining__trace { fill: none; stroke: rgba(255, 244, 230, .55); stroke-width: 2; stroke-linejoin: round; }
.mining__node { fill: #120d0b; stroke: #fff4e6; stroke-width: 2; }
.mining__pulse { fill: var(--red-hi); filter: drop-shadow(0 0 6px rgba(240, 72, 78, .95)); }
.mining__body { padding: clamp(22px, 3vw, 36px); }
.mining__h { font-size: clamp(1.9rem, 3vw, 2.8rem); font-stretch: 70%; font-weight: 900; margin-bottom: 16px; }
.mining__quote { color: var(--text); font-size: 1.02rem; border-left: 2px solid var(--red); padding-left: 16px; }
.mining__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 24px; }
.mining__chips li { font-size: .85rem; letter-spacing: .01em; padding: 6px 10px; border: 1px solid rgba(var(--sand-rgb), .4); color: var(--sand-lt); }

@media (max-width: 1000px) {
  .ind__list, .mining { grid-column: 1 / -1; }
  .mining { position: relative; top: 0; }
}


.marquee { display: grid; gap: 14px; }
.marquee__ctrl { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.marquee__count { font-size: .9rem; letter-spacing: .01em; color: var(--text-2); }
.marquee__toggle .ico-play { display: none; }
.marquee__toggle[aria-pressed="true"] .ico-play { display: block; }
.marquee__toggle[aria-pressed="true"] .ico-pause { display: none; }
.marquee__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__inner { display: flex; width: max-content; animation: marquee var(--mq-dur, 70s) linear infinite; }
.marquee__row[data-dir="right"] .marquee__inner { animation-direction: reverse; }
.marquee__track { display: flex; gap: 14px; padding: 4px 14px 4px 0; margin: 0; list-style: none; flex: none; }
.marquee__track li {
  position: relative; display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 16px 22px 16px 18px; border: 1px solid var(--line-2); background: var(--wash);
  font-weight: 800; font-stretch: 78%; text-transform: uppercase; letter-spacing: .05em;
  font-size: clamp(.95rem, 1.5vw, 1.2rem); color: var(--text-2);
  transition: color .3s, border-color .3s;
}
.marquee__track li:hover { color: var(--text); border-color: var(--line-3); }
.marquee:hover .marquee__inner, .marquee:focus-within .marquee__inner, .marquee.is-paused .marquee__inner { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.no-marquee .marquee__row { -webkit-mask-image: none; mask-image: none; }
.no-marquee .marquee__inner { animation: none; width: auto; }
.no-marquee .marquee__track { flex-wrap: wrap; padding-inline: var(--gutter); max-width: var(--wrap); margin-inline: auto; }
.no-marquee .marquee__track[aria-hidden="true"] { display: none; }
.no-marquee .marquee__toggle { display: none; }


/* assessment: question left, a service health readout right (MTN red band with an ink panel in the light theme) */
.assess { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--sec-pad); background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.assess::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: .4; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.assess::after { content: ""; position: absolute; z-index: -1; right: -10%; top: 50%; width: 70%; aspect-ratio: 1; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(var(--sand-rgb), .07), transparent 70%); pointer-events: none; }
.assess__inner { padding-block: clamp(80px, 11vw, 140px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.assess__tag { margin: 0 0 22px; font-size: .93rem; letter-spacing: .01em; color: var(--sand-lt); }
.assess__title { font-size: clamp(3rem, 7vw, 7rem); font-weight: 900; font-stretch: 62%; line-height: .86; text-transform: uppercase; max-width: 11ch; margin-bottom: 36px; }
.assess__q { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.4; max-width: 34ch; color: var(--text); font-weight: 500; }
.assess__covers { list-style: none; margin: 26px 0 28px; padding: 22px 0 0; display: grid; gap: 12px; border-top: 1px solid var(--line); max-width: 34ch; }
.assess__covers li { position: relative; padding-left: 30px; color: var(--text-2); }
.assess__covers li::before { content: ""; position: absolute; left: 0; top: .72em; width: 16px; height: 1.5px; background: var(--red-hi); }
.assess__covers li::after { content: ""; position: absolute; left: 14px; top: calc(.72em - 3px); width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--red-hi); background: var(--bg); }
.assess__a { color: var(--sand-lt); font-weight: 600; font-size: 1.1rem; }
.assess__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.assess .btn--ghost { border-color: var(--line-2); background: transparent; }
/* the instrument */
.assess__panel { --ph: #0f1012; --pl: rgba(255, 255, 255, .07); --trace: rgba(var(--sand-rgb), .16); position: relative; margin: 0; min-width: 0; padding: clamp(20px, 2.6vw, 32px); background: radial-gradient(120% 60% at 50% 0%, rgba(var(--sand-rgb), .09), transparent 60%), var(--ph); border: 1px solid var(--line-2); box-shadow: 0 0 0 6px rgba(var(--bg-rgb), .6), 0 0 0 7px var(--line), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.assess__corner { position: absolute; width: 14px; height: 14px; border: 0 solid var(--red-hi); pointer-events: none; }
.assess__corner--tl { top: -8px; left: -8px; border-top-width: 1.5px; border-left-width: 1.5px; }
.assess__corner--tr { top: -8px; right: -8px; border-top-width: 1.5px; border-right-width: 1.5px; }
.assess__corner--bl { bottom: -8px; left: -8px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.assess__corner--br { bottom: -8px; right: -8px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.assess__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-bottom: 16px; }
.assess__name { color: var(--sand-lt); font-size: .86rem; letter-spacing: .1em; }
.assess__key { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.assess__key b { width: 16px; height: 2px; background: var(--sand); }
.assess__screen { position: relative; overflow: hidden; padding: clamp(12px, 1.6vw, 20px) clamp(8px, 1.2vw, 16px); background: #0a0b0c; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--pl), inset 0 14px 40px -20px rgba(var(--sand-rgb), .25); }
.assess__screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 24px 24px; }
.assess__map { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.assess__map use { fill: none; stroke: var(--text-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; --ico-acc: var(--text-3); transition: stroke .6s var(--ease); }
.assess__link { fill: none; stroke: var(--trace); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease), stroke .6s; }
.assess__pkt { fill: none; stroke: var(--sand-lt); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .05 .95; stroke-dashoffset: .05; opacity: 0; filter: drop-shadow(0 0 3px rgba(var(--sand-rgb), .8)); }
.assess__core-box { fill: #0a0b0c; stroke: var(--red-hi); stroke-width: 1.6; }
.assess__core use { stroke: var(--text); --ico-acc: var(--red-hi); }
.assess__cl { fill: var(--text-2); font-size: 13px; letter-spacing: .1em; font-kerning: none; text-transform: uppercase; }
.assess__badge { fill: #121316; stroke: rgba(255, 255, 255, .14); stroke-width: 1.4; transition: stroke .6s var(--ease), fill .6s; }
.assess__nl { fill: var(--text-3); font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: fill .6s; }
.assess__ns { fill: var(--sand); font-size: 14.5px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .6s; }
.assess__node { opacity: .35; transition: opacity .6s var(--ease); }
/* sequential light-up on reveal: link n draws, then node n lights */
.assess__inner.is-in .assess__link, html:not(.js) .assess__link { stroke-dashoffset: 0; stroke: rgba(var(--sand-rgb), .42); }
.assess__inner.is-in .assess__node, html:not(.js) .assess__node { opacity: 1; }
.assess__inner.is-in .assess__badge, html:not(.js) .assess__badge { stroke: rgba(var(--sand-rgb), .7); }
.assess__inner.is-in .assess__node use, html:not(.js) .assess__node use { stroke: var(--text); --ico-acc: var(--red-hi); }
.assess__inner.is-in .assess__nl, html:not(.js) .assess__nl { fill: var(--text); }
.assess__inner.is-in .assess__ns, html:not(.js) .assess__ns { opacity: 1; }
.assess__link:nth-child(2), .assess__node:nth-of-type(2) { --d: .25s; } .assess__link:nth-child(3), .assess__node:nth-of-type(3) { --d: .5s; }
.assess__link:nth-child(4), .assess__node:nth-of-type(4) { --d: .75s; } .assess__link:nth-child(5), .assess__node:nth-of-type(5) { --d: 1s; }
.assess__link:nth-child(6), .assess__node:nth-of-type(6) { --d: 1.25s; } .assess__link:nth-child(7), .assess__node:nth-of-type(7) { --d: 1.5s; }
.assess__link:nth-child(8), .assess__node:nth-of-type(8) { --d: 1.75s; } .assess__link:nth-child(9), .assess__node:nth-of-type(9) { --d: 2s; }
.assess__link:nth-child(10), .assess__node:nth-of-type(10) { --d: 2.25s; }
.assess__link { transition-delay: calc(.3s + var(--d, 0s)); }
.assess__node, .assess__node :is(.assess__badge, use, .assess__nl, .assess__ns) { transition-delay: calc(.9s + var(--d, 0s)); }
/* packets: one at a time per link, staggered, only while on screen */
.assess__panel.is-live .assess__pkt { opacity: 1; animation: assess-scan 5s linear infinite; }
.assess__pkt:nth-child(2) { animation-delay: -.5s; } .assess__pkt:nth-child(3) { animation-delay: -1s; } .assess__pkt:nth-child(4) { animation-delay: -1.5s; }
.assess__pkt:nth-child(5) { animation-delay: -2s; } .assess__pkt:nth-child(6) { animation-delay: -2.5s; } .assess__pkt:nth-child(7) { animation-delay: -3s; }
.assess__pkt:nth-child(8) { animation-delay: -3.5s; } .assess__pkt:nth-child(9) { animation-delay: -4s; } .assess__pkt:nth-child(10) { animation-delay: -4.5s; }
@keyframes assess-scan { 0% { stroke-dashoffset: .05; opacity: 0; } 4% { opacity: 1; } 36% { stroke-dashoffset: -.95; opacity: 1; } 40%, 100% { stroke-dashoffset: -.95; opacity: 0; } }
.assess__reqs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--pl); }
.assess__reqs li { padding: 9px 0 9px 18px; border-bottom: 1px solid var(--pl); position: relative; line-height: 1.3; }
.assess__reqs li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border: 1.5px solid var(--sand); border-radius: 50%; }
.assess__ln { display: block; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.assess__lr { display: block; font-size: .84rem; color: var(--text-2); }
.assess__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.assess__foot span:first-child { color: var(--sand-lt); }
@media (max-width: 960px) { .assess__inner { grid-template-columns: minmax(0, 1fr); } .assess__panel { max-width: 640px; } }
@media (max-width: 720px) { .assess__panel { padding: 14px; box-shadow: 0 0 0 4px rgba(var(--bg-rgb), .6), 0 0 0 5px var(--line); } .assess__screen { padding: 10px 4px; } .assess__reqs { grid-template-columns: minmax(0, 1fr); } .assess__nl { font-size: 21.5px; letter-spacing: .01em; transform: translateY(9px); } .assess__ns { display: none; } .assess__cl { font-size: 20px; } .assess__corner--tl, .assess__corner--bl { left: -6px; } .assess__corner--tr, .assess__corner--br { right: -6px; } }
@media (prefers-reduced-motion: reduce) { .assess__link, .assess__node, .assess__node :is(.assess__badge, use, .assess__nl, .assess__ns) { transition: none; } .assess__panel .assess__pkt, .assess__panel.is-live .assess__pkt { animation: none; opacity: 0; } }


/* photos of the work beside the heading, over the column of the open application below it: they cross-fade and ease
   in slowly while on screen (script.js adds .is-live and moves .is-on; the one fading out keeps .was-on underneath) */
.careers__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: end; margin-bottom: var(--head-gap); }
.careers__top .sec-head { grid-column: 1 / span 7; margin-bottom: 0; }
.careers__photo { grid-column: 9 / -1; margin: 0; }
/* The photos sit on one strip (initSlides): moved on by the clock, or thrown by hand, when the strip follows the
   pointer and lands with a spring. The controls sit over the lower edge on a dark material, in both themes. */
.slides { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--line-2); background: #15171a; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.slides.is-dragging { cursor: grabbing; }
.slides:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
:root:not([data-theme="light"]) .slides { filter: saturate(.86) brightness(.92); }   /* calmer on charcoal, so the sky shot does not flash */
.slides__track { display: flex; height: 100%; will-change: transform; }
.slide { flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }   /* each photo clips its own zoom, so no neighbour shows at an edge */
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transform-origin: 50% 45%; pointer-events: none; -webkit-user-drag: none; }
.slides__ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .42)); pointer-events: none; }
.slides__ui > * { pointer-events: auto; }
.slides__arrow {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  background: rgba(13, 14, 16, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .2s, transform .2s var(--ease), opacity .2s;
}
.slides__arrow:hover { border-color: #fff; }
.slides__arrow[disabled] { opacity: .35; pointer-events: none; }
.slides__arrow .ico { width: 16px; height: 16px; }
.slides__dots { display: flex; }
.slides__dot { display: grid; place-items: center; width: 26px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.slides__dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: transform .2s var(--ease), background .2s; }
.slides__dot[aria-current="true"]::before { background: var(--red-hi); transform: scale(1.4); }
.slides__dot:focus-visible { outline: none; }
.slides__dot:focus-visible::before { outline: 2px solid #fff; outline-offset: 3px; }
.careers__photo figcaption { margin-top: 12px; font-size: .84rem; letter-spacing: .01em; color: var(--text-2); }
.js .careers__photo.is-in { transition-delay: .15s; }
@media (prefers-reduced-motion: no-preference) {
  .slide.is-on img { animation: slide-ease 9s cubic-bezier(.25, .6, .35, 1) forwards paused; }
  .careers__photo.is-live .slide img { animation-play-state: running; }
}
@keyframes slide-ease { from { transform: scale(1.02); } to { transform: scale(1.09); } }
@media (max-width: 900px) {
  .careers__top .sec-head, .careers__photo { grid-column: 1 / -1; }
  .careers__photo { max-width: 520px; }
}

.careers__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: start; }
.careers__list { grid-column: 1 / span 8; display: grid; gap: 14px; }
.careers__open { grid-column: 9 / -1; padding: 28px 26px; border: 1px dashed var(--line-3); position: relative; }
.careers__open-h { font-size: 1.9rem; font-stretch: 72%; font-weight: 850; margin-bottom: 12px; }
.careers__open p { color: var(--text-2); }
.careers__status { padding: 26px; border: 1px solid var(--line); color: var(--text-2); font-size: .95rem; margin: 0; }
.careers__status a { color: var(--sand-lt); }
.vac {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: center;
  padding: 24px 26px; border: 1px solid var(--line-2); background: var(--wash);
  transition: border-color .3s, background .3s;
}
.vac:hover { border-color: var(--line-3); background: rgba(193, 39, 45, .04); }
.vac__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; letter-spacing: .01em; color: var(--text-2); margin: 0; }
.vac__meta span:first-child { color: var(--red-hi); }
.vac__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-stretch: 74%; font-weight: 850; }
.vac__sum { grid-column: 1 / 2; color: var(--text-2); margin: 0; }
.vac .btn { grid-column: 2; grid-row: 2 / span 2; }
@media (max-width: 900px) {
  .careers__list, .careers__open { grid-column: 1 / -1; }
  .vac { grid-template-columns: minmax(0, 1fr); }
  .vac .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}


.job {
  width: min(900px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  padding: 0; margin: auto; border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9); overflow: auto; overscroll-behavior: contain;
}
.job::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.job[open] { animation: fade-up .4s var(--ease); }
.job[open]::backdrop { animation: fade-in .4s var(--ease); }
/* and it leaves the way it came, down and out, the scrim with it (closeJob waits for this before closing) */
.job.is-closing { animation: fade-down .28s var(--ease) forwards; }
.job.is-closing::backdrop { animation: fade-out .28s var(--ease) forwards; }
@keyframes fade-down { to { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.job__inner { padding: clamp(22px, 4vw, 44px); }
.job__head { position: relative; padding-right: 110px; margin-bottom: 22px; }
.job__tag { font-weight: 600; font-size: .88rem; letter-spacing: .01em; color: var(--red-hi); margin-bottom: 10px; }
.job__title { font-size: clamp(1.9rem, 4vw, 3rem); font-stretch: 70%; font-weight: 900; line-height: .95; margin-bottom: 12px; }
.job__meta { font-size: .93rem; letter-spacing: .01em; color: var(--text-2); margin: 0; }
.job__tools { position: absolute; top: 0; right: 0; display: flex; gap: 8px; }
.job__desc { color: var(--text-2); border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 26px; }
.job__desc:empty { display: none; }
.job__desc h3 { font-size: .98rem; font-family: var(--din); font-stretch: semi-condensed; font-weight: 600; letter-spacing: .01em; color: var(--text); margin: 18px 0 10px; }
.job__desc ul { margin: 0 0 1em; padding-left: 1.2em; }
.job__desc li { margin-bottom: 4px; }


.contact__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; }
.contact__map { grid-column: 1 / span 6; position: sticky; top: calc(var(--head-h) + 20px); }
.contact__side { grid-column: 7 / -1; display: grid; gap: 24px; }
.map { position: relative; border: 1px solid var(--line); background:
  radial-gradient(ellipse at 20% 50%, rgba(var(--fog-rgb), .06), transparent 60%), var(--map-bg); }
.map__cv { width: 100%; aspect-ratio: 1 / 1.02; cursor: crosshair; touch-action: pan-y; }
.map__tip {
  position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 14px));
  padding: 6px 10px; background: rgba(var(--bg-rgb), .92); border: 1px solid var(--line-2); font-size: .9rem; letter-spacing: .01em; white-space: nowrap;
  transition: opacity .2s;
}
.map__tip.is-on { opacity: 1; }

.card-contact { font-style: normal; padding: 28px 26px; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(193, 39, 45, .08), transparent 55%); }
.card-contact__name { display: flex; align-items: center; gap: 10px; font-size: 1.6rem; font-weight: 850; font-stretch: 76%; margin-bottom: 16px; }
.card-contact__name .ico { color: var(--sand); }
.card-contact__list { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.card-contact__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; min-width: 0; }
.card-contact__list .ico { color: var(--red-hi); margin-top: .2em; }
.card-contact__list a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; text-decoration: none; overflow-wrap: anywhere; }
.card-contact__list a:hover { color: var(--sand-lt); text-decoration: underline; }
.card-contact__hours { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.card-contact__hours-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .9rem; font-weight: 600; color: var(--text-2); }
.card-contact__hours-h .ico { color: var(--red-hi); }
.hours { margin: 0; display: grid; gap: 6px; font-size: .95rem; }
.hours div { display: flex; justify-content: space-between; gap: 16px; }
.hours dt { color: var(--text-2); }
.hours dd { margin: 0; font-weight: 600; }

@media (max-width: 1000px) {
  .contact__map, .contact__side { grid-column: 1 / -1; }
  .contact__map { position: relative; top: 0; max-width: 640px; }
}
@media (max-width: 560px) { .card-contact__list { grid-template-columns: minmax(0, 1fr); } }

/* find us: Google Maps embed */
.findus { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(56px, 8vw, 96px); }
.findus__h { font-size: clamp(1.7rem, 3vw, 2.6rem); font-stretch: 72%; font-weight: 850; line-height: 1; margin-bottom: 14px; text-wrap: balance; }
.findus__txt { color: var(--text-2); }
.findus__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.findus__map { position: relative; padding: 8px; border: 1px solid var(--line-2); background: var(--wash); }
.findus__map::before, .findus__map::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--red); }
.findus__map::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.findus__map::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.findus__frame { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; background: var(--map-bg); }
/* night-time map in dark mode: inverted and turned back to the right hues, so red stays red */
:root:not([data-theme="light"]) .findus__frame { filter: invert(.9) hue-rotate(180deg) saturate(.75) brightness(.95); }
@media (max-width: 900px) {
  .findus { grid-template-columns: minmax(0, 1fr); }
  .findus__frame { aspect-ratio: 4 / 3; }
}


.form { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line-2); background: var(--bg-2); }
.form--apply { padding: 0; border: 0; background: none; }
.form__tag { font-weight: 600; font-size: .88rem; letter-spacing: .01em; color: var(--red-hi); margin-bottom: 18px; }
.form__h { margin-bottom: 20px; font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 850; font-stretch: 76%; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--text); letter-spacing: .01em; }
.field__hint { font-weight: 400; color: var(--text-3); font-size: .76rem; }
.req { color: var(--red-hi); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 0;
  background: var(--field-bg); color: var(--text); font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field select option { background: var(--panel); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sand); box-shadow: 0 0 0 3px rgba(var(--sand-rgb), .2); }
.field input[type="file"] { width: 100%; padding: 12px; border: 1px dashed var(--line-3); background: var(--field-bg); font-size: .9rem; color: var(--text-2); }
.field input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 1px solid var(--line-3); background: var(--panel-2); color: var(--text); font: 600 .82rem var(--sans); cursor: pointer; }
.field input[type="file"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.field--check { flex-direction: row; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.field--check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--red); flex: none; }
.field--check label { flex: 1; font-weight: 400; color: var(--text-2); font-size: .86rem; line-height: 1.5; min-width: 0; }
.field--check .field__err { width: 100%; }
.field--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field__err { margin: 0; min-height: 0; font-size: .8rem; color: var(--err); }
.field__err:empty { display: none; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--err-line); }
.form__legal { margin: 16px 0 0; font-size: .8rem; color: var(--text-3); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 20px; }
.form__status { margin: 0; font-size: .9rem; color: var(--text-2); flex: 1 1 240px; }
.form__status.is-ok { color: var(--sand-lt); }
.form__status.is-err { color: var(--err); }
.form__status a { color: var(--sand-lt); }
.form.is-sent .form__grid, .form.is-sent .form__legal { opacity: .45; pointer-events: none; }
@media (max-width: 600px) { .form__grid { grid-template-columns: minmax(0, 1fr); } }


.foot { position: relative; margin-top: var(--sec-pad); border-top: 1px solid var(--line); background: var(--bg-foot); }
.foot__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: 64px 40px; }
.brand--foot .brand__mark { width: 52px; }
.brand--foot .brand__micro { font-size: 1.7rem; }
.brand--foot .brand__nam { font-size: .7rem; }
.foot__tagline { margin: 18px 0 0; color: var(--text-2); max-width: 30ch; font-size: 1.05rem; }
.foot__nav ul { list-style: none; margin: 0; columns: 2; column-gap: 24px; }
.foot__nav li { margin-bottom: 8px; break-inside: avoid; }
.foot__nav a { color: var(--text-2); text-decoration: none; font-size: .95rem; }
.foot__nav a:hover { color: var(--text); }
.foot__contact p { margin: 0 0 8px; color: var(--text-2); font-size: .95rem; }
.foot__contact a { text-decoration: none; }
.foot__contact a:hover { color: var(--sand-lt); }
.foot__contact .btn { margin-top: 10px; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px 28px; border-top: 1px solid var(--line); font-size: .8rem; letter-spacing: .04em; color: var(--text-3); }
.foot__legal p { margin: 0; }
@media (max-width: 900px) { .foot__inner { grid-template-columns: minmax(0, 1fr); } }


/* ---------------------------------------------------------------- team page */
.team-page { padding-top: calc(var(--head-h) + clamp(40px, 7vw, 96px)); }
.team { display: grid; gap: clamp(44px, 6vw, 80px); }
.team__group-h { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; font-family: "Brunson", var(--sans); font-synthesis: none; text-transform: uppercase; font-weight: 800; font-stretch: 72%; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: .02em; line-height: 1; color: var(--text); }
.team__group-h::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.team__row { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); }
.team__row--lead { grid-template-columns: minmax(0, 1fr); width: min(100%, 400px); margin-inline: auto; }
.team__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) and (min-width: 761px) { .team__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* portraits and work photos cannot be dragged, opened or saved from the context menu: the image takes no pointer events, so the right-click lands on the card (a screenshot is always possible) */
.member__photo img, .slide img, .member__photo, .slide { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.member__photo img, .slide img { pointer-events: none; }
.member { position: relative; border: 1px solid var(--line-2); background: var(--wash); transition: border-color .3s, transform .35s var(--ease); }
.member::before { content: ""; position: absolute; z-index: 1; left: -1px; top: -1px; width: 26px; height: 26px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
.member:hover { border-color: var(--line-3); transform: translateY(-3px); }
.member__photo {
  position: relative; display: grid; place-items: end center; aspect-ratio: 4 / 5; overflow: hidden;
  background-color: var(--bp-bg);
  background-image: linear-gradient(var(--fog-grid) 1px, transparent 1px), linear-gradient(90deg, var(--fog-grid) 1px, transparent 1px);
  background-size: 16px 16px;
}
.member__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member__ph { width: 78%; height: auto; fill: none; stroke: var(--fog); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.member__soon { position: absolute; top: 12px; right: 14px; font-size: .8rem; color: var(--fog-text); }
.member__txt { padding: 16px 18px 20px; border-top: 1px solid var(--line); }
.member__role { margin: 0 0 6px; font-size: .92rem; font-weight: 600; color: var(--red-hi); }
.member__name { font-size: clamp(1.35rem, 2vw, 1.7rem); font-stretch: 74%; font-weight: 850; line-height: 1.05; }
.member--lead .member__name { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.team__join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: clamp(22px, 3vw, 34px); border: 1px dashed var(--line-3); }
.team__join-tag { margin: 0 0 8px; font-weight: 600; font-size: .88rem; color: var(--red-hi); }
.team__join-h { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); font-stretch: 72%; font-weight: 850; line-height: 1; }
.team__join-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) {
  /* phones: one person per row, photo beside the name */
  .team__row, .team__row--lead { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 12px; }
  .member { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .member--lead { grid-template-columns: 136px minmax(0, 1fr); }
  .member__txt { border-top: 0; border-left: 1px solid var(--line); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .member__soon { display: none; }
}


/* ---------------------------------------------------------------- light theme adjustments */
:root[data-theme="light"] .brand__mark { filter: drop-shadow(0 2px 5px rgba(20, 22, 26, .2)); }
/* the requisition slip is white till paper here, not kraft */
:root[data-theme="light"] .slip__paper {
  background: radial-gradient(rgba(20, 22, 26, .045) 1px, transparent 1px) 0 0 / 5px 5px, linear-gradient(180deg, #fcfcfc, #eceef0);
  box-shadow: 0 28px 50px -22px rgba(20, 22, 26, .38), 0 2px 0 rgba(255, 255, 255, .6) inset;
}
:root[data-theme="light"] .site { box-shadow: 0 0 0 1px #000, 0 40px 70px -40px rgba(20, 22, 26, .5); }
:root[data-theme="light"] .traka__cab { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 -2px 0 rgba(0, 0, 0, .4) inset, 0 40px 60px -30px rgba(20, 22, 26, .55); }
:root[data-theme="light"] .chip { box-shadow: 0 10px 18px -10px rgba(20, 22, 26, .5), 0 1px 0 rgba(255, 255, 255, .05) inset; }
:root[data-theme="light"] .board {
  background:
    radial-gradient(rgba(var(--ink), .1) 1px, transparent 1.2px) 0 0 / 14px 14px,
    linear-gradient(180deg, var(--board-a), var(--board-b));
}
:root[data-theme="light"] .board__traces .bt { stroke: rgba(var(--ink), .2); }
:root[data-theme="light"] .board__traces .bt.is-lit { stroke: var(--red-hi); }
:root[data-theme="light"] .board__traces .bt-via { stroke: rgba(var(--ink), .4); }
:root[data-theme="light"] .pcard--also { background: repeating-linear-gradient(-45deg, rgba(var(--ink), .03) 0 10px, transparent 10px 20px); }
/* mining card: grey rock strata with the red circuit, instead of brown earth */
:root[data-theme="light"] .mining { background: #121316; }
:root[data-theme="light"] .mining__node { fill: #121316; }
:root[data-theme="light"] #st1 stop:first-child { stop-color: #c9ccd1; } :root[data-theme="light"] #st1 stop:last-child { stop-color: #a9adb3; }
:root[data-theme="light"] #st2 stop:first-child { stop-color: #8a8f96; } :root[data-theme="light"] #st2 stop:last-child { stop-color: #6c7178; }
:root[data-theme="light"] #st3 stop:first-child { stop-color: #4d5157; } :root[data-theme="light"] #st3 stop:last-child { stop-color: #373a3f; }
:root[data-theme="light"] #st4 stop:first-child { stop-color: #25272b; } :root[data-theme="light"] #st4 stop:last-child { stop-color: #121316; }
:root[data-theme="light"] .mining__dots circle { fill: rgba(10, 11, 13, .45); }
:root[data-theme="light"] :is(.site, .traka__cab, .support__scope, .chip, .mining) {
  --phosphor: #e6edf2; --sand: #9aa2ab; --sand-rgb: 154, 162, 171; --sand-lt: #d3d9df;
}
:root[data-theme="light"] :is(.traka__screen, .site__screen) { text-shadow: 0 0 8px rgba(230, 237, 242, .3); box-shadow: 0 0 0 3px #2a2c30, inset 0 0 24px rgba(230, 237, 242, .04); }
:root[data-theme="light"] :is(.traka__sub, .site__sub) { color: #aeb6be; }
:root[data-theme="light"] .traka__bulb { box-shadow: 0 0 12px rgba(230, 237, 242, .7); }
:root[data-theme="light"] .site::before, :root[data-theme="light"] .site::after { border-color: rgba(230, 237, 242, .45); }
:root[data-theme="light"] .slot__fob { background: linear-gradient(180deg, #e2474d 0%, #a51f25 100%); }
:root[data-theme="light"] .support__scope { box-shadow: 0 0 0 1px #000, 0 40px 70px -40px rgba(20, 22, 26, .5); }
/* hero in daylight: the same object, cool steel on cool grey, solid red LEDs; red only on the lamps, the HQ dot and
   the light runs, never a pink haze or brown */
:root[data-theme="light"] .hero {
  --nam-st0: #16171a; --nam-st1: #2a2d33; --nam-st2: #7d828a; --nam-core: #c1272d; --nam-ring: #c1272d;
  --nam-glow-hot: #e0474d; --nam-glow: #c1272d; --nam-glow-o: .16; --flash-gain: 2.5; --nam-run: #c1272d;
  --nam-hq: #c1272d; --nam-hq-o0: .35; --nam-hq-o1: .12;
  --wall-wash: #ffffff; --wall-wash-o: .38; --vignette: rgba(240, 241, 242, 0); --veil-glow: rgba(240, 241, 242, 0);
  --drift0: #f9fafa; --drift1: rgba(240, 241, 242, 0); --drift-crest: rgba(20, 21, 24, .22);
  --dune-far-s0: #e7e9ec; --dune-far-s1: #eceef0; --dune-far-l0: #f7f8f9; --dune-far-l1: #eff0f2;
  --dune-mid-s0: #dde0e4; --dune-mid-s1: #e8eaed; --dune-mid-l0: #ffffff; --dune-mid-l1: #f2f3f5;
  --dune-near-s0: #e9ebee; --dune-near-s1: #f0f1f2; --dune-near-l0: #f5f6f7; --dune-near-l1: #f0f1f2;
  --crest-far: rgba(20, 21, 24, .10); --crest-near: rgba(20, 21, 24, .08);
  --rim0: rgba(20, 21, 24, 0); --rim1: rgba(20, 21, 24, .12); --rim2: rgba(20, 21, 24, .04);
}
:root[data-theme="light"] .nam__hq-dot { fill: #b3212a; }
:root[data-theme="light"] .hero { --hero-red: #c1272d; }
:root[data-theme="light"] .route { --route-ring: var(--red); --route-core: var(--red); --route-glow: rgba(193, 39, 45, .18); --route-hq-ring: var(--text); --route-hq-core: var(--red); }
:root[data-theme="light"] .nam__hq-mark { stroke: var(--text); }
:root[data-theme="light"] :is(.nam__pool, .nam__run-h) { display: none; }
:root[data-theme="light"] .assess {
  --ink: 255, 255, 255; --text: #fff; --text-2: #fbeeee; --sand: #fbf6f6; --sand-lt: #fbf6f6; --sand-rgb: 251, 246, 246;
  background: linear-gradient(180deg, #c1272d 0%, #b8232a 100%);
}
:root[data-theme="light"] .assess::before { opacity: .35; }
:root[data-theme="light"] .assess::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .14), transparent 70%); }
:root[data-theme="light"] .assess__covers { border-top-color: rgba(255, 255, 255, .28); }
:root[data-theme="light"] .assess__covers li::before { background: #fff; }
:root[data-theme="light"] .assess__covers li::after { border-color: #fff; background: #bd252c; }
:root[data-theme="light"] .assess__panel { --ph: #121316; --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .22); --text-3: #8a8d93; --sand: #e7c48e; --sand-lt: #efd3a6; --sand-rgb: 231, 196, 142; box-shadow: 0 0 0 6px rgba(0, 0, 0, .14), 0 40px 70px -30px rgba(60, 6, 10, .6); }
:root[data-theme="light"] .assess__corner { border-color: #fff; }
:root[data-theme="light"] :is(.assess__tag, .assess__a) { color: #fbf6f6; }
:root[data-theme="light"] .assess .btn--red { --b-bg: #fbf6f6; color: var(--red-deep); }
:root[data-theme="light"] .assess .btn--red:hover { --b-bg: #fff; }
:root[data-theme="light"] .assess .btn--ghost { border-color: rgba(251, 246, 246, .6); background: rgba(0, 0, 0, .1); color: #fbf6f6; }
:root[data-theme="light"] .job { box-shadow: 0 50px 100px -40px rgba(20, 22, 26, .5); }
:root[data-theme="light"] .map__tip { box-shadow: 0 6px 18px -8px rgba(20, 22, 26, .3); }


/* the 404 page: the brand, a big code and the way back */
.notfound { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 64px; }
.notfound .brand { align-self: flex-start; margin-bottom: clamp(48px, 10vh, 120px); }
.notfound__code { font-size: clamp(5rem, 18vw, 12rem); font-weight: 700; line-height: .9; color: var(--red); letter-spacing: -.04em; margin: 0 0 18px; }
.notfound__title { font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 850; font-stretch: 72%; line-height: 1; margin: 0 0 16px; }
.notfound__text { max-width: 48ch; color: var(--text-2); font-size: 1.08rem; margin: 0 0 32px; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* the remote support downloads (support.html): two big buttons in the makers' colours, the Mac link under them */
.support-dl { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 48px 64px; }
.support-dl .brand { align-self: flex-start; margin-bottom: clamp(36px, 8vh, 96px); }
.support-dl__title { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; margin: 0 0 14px; }
.support-dl__text { max-width: 52ch; color: var(--text-2); font-size: 1.08rem; margin: 0 0 32px; }
.support-dl__buttons { display: grid; gap: 14px; max-width: 520px; margin: 0 0 28px; }
.support-dl__btn { justify-content: flex-start; gap: 16px; min-height: 76px; padding: 1em 1.5em; font-size: 1.15rem; color: #fff; border-color: transparent; }
.support-dl__btn .ico { width: 26px; height: 26px; flex: none; }
.support-dl__btn span { display: flex; flex-direction: column; line-height: 1.15; }
.support-dl__btn small { font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.support-dl__btn--acronis { --b-bg: #0b5ed7; }
.support-dl__btn--acronis:hover { --b-bg: #0a53bd; }
.support-dl__btn--anydesk { --b-bg: #bf4e08; }
.support-dl__btn--anydesk:hover { --b-bg: #a94407; }
.support-dl__mac { font-size: 1.05rem; margin: 0 0 40px; }
.support-dl__mac a { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.support-dl__foot { margin: 0; color: var(--text-2); }
.support-dl__foot a { color: inherit; }
.support-dlg { width: min(560px, calc(100vw - 24px)); }
.support-dlg .job__head { padding-right: 56px; margin-bottom: 26px; }
.support-dlg .job__meta { max-width: 44ch; }
.support-dlg .support-dl__buttons { max-width: none; margin-bottom: 22px; }
.support-dlg .support-dl__mac { margin-bottom: 0; }


/* ============================================================ Phones (to 720px): a shorter page
   Each section leads with its essentials. The long form and the desktop showpieces (the slip, the cabinet, the site
   panel, the network drawing, the radar, the partner cards, the map legend, the map embed) fold away behind a "More"
   button (initFolds) or stay on larger screens. Motion is lighter too: reveals fade without moving, nothing pins,
   and the wind patches beside the headings are left out. */
.m-sum, .m-more { display: none; }
@media (max-width: 720px) {
  :root { --sec-pad: 56px; --head-gap: 22px; }
  .m-sum { display: block; margin: 10px 0 0; color: var(--text-2); font-size: 1.02rem; line-height: 1.5; max-width: 42ch; }
  .m-more {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; padding: 0 16px;
    font: 600 .9rem/1 var(--sans); letter-spacing: .01em; color: var(--text); background: var(--wash); border: 1px solid var(--line-2);
  }
  .m-more::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
  .m-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .m-more:active { transform: scale(.97); }
  [data-fold]:not(.is-open) .m-fold { display: none !important; }
  .windhead__cv { display: none; }
  .js [data-reveal] { transform: none; transition: opacity .4s var(--ease); }
  .octa__packet, .mining__pulse { filter: none; }

  /* the intro: the sculpture smaller and centred, the facts in two columns */
  .intro__logo { justify-content: center; margin-bottom: 18px; }
  .intro__logo > * { max-width: 220px; }
  .intro__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 0; }
  .intro__facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }

  /* about: the four stops as cards side by side, swiped; the company facts are in the footer */
  .route { display: block; padding: 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .route::-webkit-scrollbar { display: none; }
  .route__track, .route__end, .route__node { display: none; }
  .route__stops { display: grid; grid-template-columns: repeat(4, min(78%, 300px)); column-gap: 12px; row-gap: 0; padding: 0; }
  .route__stop { padding: 18px 18px 20px; border: 1px solid var(--line-2); background: var(--wash); scroll-snap-align: start; }
  .route__stop--hq { border-color: var(--red); }
  .about__side .facts { display: none; }
  .about__map { justify-content: center; }
  .about__map > * { max-width: 260px; }

  /* the cycle a touch smaller */
  .octa { max-width: min(340px, 100% - 24px); }

  /* services: four short entries */
  .svc { padding-block: 30px; }

  /* support: the radar is left out */
  .support__scope { display: none; }

  /* partners: the chips in one swiped row, MTN first (the body stacks as blocks: a grid track would grow to the row's full length) */
  .partners__body { display: block; }
  .board { padding: 0; border: 0; background: none; box-shadow: none; max-width: 100%; min-width: 0; }
  .board__chips { display: flex; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .board__chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 132px; aspect-ratio: 2.4; scroll-snap-align: start; }
  .chip--core { order: -1; }

  /* industries: the list as a cloud of small tags */
  .ind__list { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; }
  .ind__list li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line-2); font-size: .95rem; font-weight: 700; font-stretch: 80%; letter-spacing: .03em; }
  .ind__list li::before { content: none; }

  /* contact: the legend folds, the embed is left to the Google Maps link */
  .findus__map { display: none; }
  .findus { margin-top: 40px; }

  /* the light runs on the landing: drawn wider, so a pulse still reads with the sculpture at phone size; on the light
     page the strips are near black, so the pulse there is a brighter red and keeps its glow */
  .nam__run-c { stroke-width: 5; }
  .nam__run-h { stroke-width: 16; }
  :root[data-theme="light"] .hero { --nam-run: #ff3b42; }
  :root[data-theme="light"] .nam__run-h { display: inline; stroke-opacity: .22; }

  /* the footer: brand and contact only */
  .foot__nav { display: none; }
  .foot__inner { padding-block: 44px 28px; gap: 28px; }
}

/* The brand face carries the display moments beyond the landing name: the wordmark, the section titles, the service
   and card titles, the banners and the industries. Brunson is a caps face, so these are set uppercase outright and the
   Archivo stand-in matches while it loads; their weights and widths stay as declared, which the single Brunson face
   answers to without synthesis. The intro statement and the body headings stay in Archivo. */
.brand__word, .sec-head__title, .svc__title, .offer__title, .assess__title, .mining__h, .findus__h, .careers__open-h, .team__join-h, .job__title, .vac__title, .pcard__h, .trio__col h4, .form__h, .notfound__title, .octa__core-lbl, .ind__list li {
  font-family: "Brunson", var(--sans); font-synthesis: none; text-transform: uppercase;
}
.sec-head__title, .svc__title, .offer__title, .assess__title, .mining__h, .findus__h, .careers__open-h, .team__join-h, .job__title, .vac__title, .pcard__h, .trio__col h4, .form__h, .notfound__title { letter-spacing: .012em; }
.intro__title { letter-spacing: -.01em; }   /* Archivo, tracked tighter at its size */

/* the other two preference signals: frostier chrome where transparency is unwanted, a drawn edge where contrast is */
@media (prefers-reduced-transparency: reduce) {
  .masthead:is(.is-scrolled, .is-open), .slides__arrow, .job::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .masthead:is(.is-scrolled, .is-open) { background: var(--bg); }
  .slides__arrow { background: rgba(13, 14, 16, .92); }
  @media (max-width: 1180px) { .masthead { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
}
@media (prefers-contrast: more) {
  .masthead:is(.is-scrolled, .is-open) { background: var(--bg); border-bottom-color: var(--line-3); }
  .masthead::after { display: none; }
  .slides__arrow { border-color: #fff; background: #0d0e10; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .mining__pulse { display: none; }
  .hero__mt, .hero__tech, .hero__nam, .hero__tag { animation-delay: 0s !important; }
}


@media print {
  .masthead, .hero__field, .windhead__cv, .hero__dunes, .marquee__ctrl, .job, .traka__controls { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1; transform: none; }
}