/* ==========================================================================
   ProStandard Calibration and Testing Laboratory — site styles
   Plain CSS, no build step. Sections:
   1. Tokens  2. Base  3. Layout  4. Components  5. Header & footer
   6. Home  7. Inner pages  8. Motion  9. Responsive  10. Additions  11. Dark theme
   Colours that follow the light/dark theme come from the semantic tokens in 1; the dark values
   and the few dark-only adjustments tokens can't express are in 11.
   Some icons are adapted from Lucide (ISC License).
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* Arial resized to Manrope's width and line height (measured in Chrome: within 2% at every
   weight), so text barely moves when the web font swaps in. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  font-weight: 400 500;
  size-adjust: 102.5%;
  ascent-override: 104%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
  font-weight: 600 800;
  size-adjust: 100.4%;
  ascent-override: 106.2%;
  descent-override: 29.9%;
  line-gap-override: 0%;
}

:root {
  /* Brand — taken from the logo and brochure */
  --brand-950: #05073f;
  --brand-900: #07087a;
  --brand-800: #0a0aa6; /* logo "S" blue */
  --brand-700: #1f24c4;
  --brand-600: #3a42e0;
  --brand-400: #7c84f7;
  --brand-200: #c7cbff;
  --brand-100: #e5e7ff;
  --brand-50: #f3f4ff;

  --red-600: #e3000f; /* wordmark red */
  --red-400: #ff5c64;

  --ink-950: #060824;
  --ink-900: #0c1033;
  --ink-800: #1d2246;
  --ink-700: #33395c;
  --ink-600: #4b5274;
  --ink-500: #646c8d;
  --ink-400: #8d94b0;
  --ink-300: #c3c8db;
  --ink-200: #dfe3ee;
  --ink-100: #eceff6;
  --ink-50: #f6f7fb;

  --green-700: #067647;
  --green-500: #12b76a;
  --green-100: #dcf7ea;
  --amber-700: #93370d;
  --amber-100: #fef0c7;
  --wa: #15803d;
  --wa-hover: #116932;
  --wa-bright: #16a34a;

  --font-sans: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Keyboard focus ring. Dark surfaces switch it to a light colour (see 2. Base); the dark theme
     lifts it (below). */
  --focus-ring: var(--brand-600);

  --radius-sm: 12px;
  --radius-md: 14px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;
  --section-y: clamp(72px, 9vw, 120px);
}

/* Semantic colours: components use these wherever a colour follows the light/dark theme. The
   light values are the site's original colours; the dark set below re-points them. The always-dark
   journey page keeps the light set on its <body> (its dark surfaces are styled directly), so it
   looks the same in both themes.
     --page-bg          page and plain sections, the open phone menu
     --surface          cards, panels, chips, tags, secondary buttons
     --surface-2        fills inside a surface: readouts, list rows, the map stand-in
     --surface-tint     tinted section bands
     --glass            frosted bar or card over content (Labs finder bar, certificate card)
     --header-bg        the frosted sticky header
     --input-bg         form fields; --input-border is 3:1 against the field and what's around it
     --text-strong      headings, key figures           --text         body copy
     --text-high        labels, list rows               --text-muted   captions, meta, placeholders (4.5:1)
     --text-mid         nav links, chips, tags, lists   --text-faint   inactive steps, icons in fields
     --line-soft        dividers, tracks
     --line             card and control borders
     --line-strong      ticks, dashed outlines, separators
     --accent-text      links, eyebrows, icons          --accent-tint  icon tiles, current item, tips
     --accent-line      tinted borders (-hover: hovered or open)
     --accent-fill      primary buttons, filled badges and steps, under white text (-hover)
     --inverse-bg/-text the pressed filter chip, the floating search button
     --ok-*, --warn-*, --error-*   status chips, pills, form messages, field errors
     --shadow-sm, --shadow, --shadow-lg   elevation (in dark: deep shadows, a faint blue glow) */
:root,
:root[data-theme="dark"] .journey-page {
  color-scheme: light;
  --page-bg: #fff;
  --surface: #fff;
  --surface-2: var(--ink-50);
  --surface-tint: var(--ink-50);
  --glass: rgba(255, 255, 255, 0.92);
  --header-bg: rgba(255, 255, 255, 0.85);
  --input-bg: #fff;
  --input-border: var(--ink-400);
  --text-strong: var(--ink-900);
  --text-high: var(--ink-800);
  --text-mid: var(--ink-700);
  --text: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --line-soft: var(--ink-100);
  --line: var(--ink-200);
  --line-strong: var(--ink-300);
  --accent-text: var(--brand-800);
  --accent-tint: var(--brand-50);
  --accent-line: var(--brand-100);
  --accent-line-hover: var(--brand-200);
  --accent-fill: var(--brand-800);
  --accent-fill-hover: var(--brand-700);
  --inverse-bg: var(--ink-900);
  --inverse-text: #fff;
  --ok-bg: var(--green-100);
  --ok-text: var(--green-700);
  --warn-bg: var(--amber-100);
  --warn-text: var(--amber-700);
  --error-bg: #fee4e2;
  --error-text: #b42318;
  --error-line: #d92d20;
  --shadow-sm: 0 1px 2px rgba(12, 16, 51, 0.06);
  --shadow: 0 1px 2px rgba(12, 16, 51, 0.04), 0 10px 28px -12px rgba(12, 16, 51, 0.16);
  --shadow-lg: 0 2px 4px rgba(12, 16, 51, 0.04), 0 28px 60px -20px rgba(10, 10, 166, 0.28);
}

/* Dark theme, like the 3D journey: a deep navy page, slightly lighter layered surfaces, hairline
   light-blue borders, light text and lifted brand blues. Screen only, so a dark page still prints
   dark on white. Contrast (WCAG AA) is noted against the lightest surface each colour sits on,
   the worst case for light text. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --focus-ring: var(--brand-400);       /* 4.2:1 or more on every dark surface (3:1 needed) */
    --page-bg: #060824;                   /* = <meta name="theme-color"> in dark */
    --surface: #0e1339;
    --surface-2: #151b49;
    --surface-tint: #0a0d30;
    --glass: rgba(6, 8, 36, 0.9);
    --header-bg: rgba(6, 8, 36, 0.86);
    --input-bg: #080b2b;
    --input-border: #5f6895;              /* 3.3:1 on --surface, 3.6:1 on the field */
    --text-strong: #eef0ff;               /* 14:1 on --surface-2 */
    --text-high: #dde1f6;
    --text-mid: #c5cbe6;
    --text: #a8afd3;                      /* 7.5:1 */
    --text-muted: #8d96bf;                /* 5.6:1; 4.9:1 on the status tints */
    --text-faint: #7d86ae;                /* 4.6:1 */
    --line-soft: rgba(199, 203, 255, 0.08);
    --line: rgba(199, 203, 255, 0.14);
    --line-strong: rgba(199, 203, 255, 0.26);
    --accent-text: #8f97ff;               /* brand-400, lifted: 6.2:1; 5.6:1 on --accent-tint */
    --accent-tint: rgba(124, 132, 247, 0.14);
    --accent-line: rgba(124, 132, 247, 0.3);
    --accent-line-hover: rgba(143, 151, 255, 0.6);
    --accent-fill: var(--brand-600);      /* white text 6.9:1 */
    --accent-fill-hover: #4f57f2;         /* white text 5.3:1 */
    --inverse-bg: #eef0ff;
    --inverse-text: var(--ink-950);
    --ok-bg: rgba(18, 183, 106, 0.16);
    --ok-text: #47cd89;                   /* 7:1 on --ok-bg */
    --warn-bg: rgba(247, 144, 9, 0.16);
    --warn-text: #fdb022;                 /* 7.7:1 on --warn-bg */
    --error-bg: rgba(240, 68, 56, 0.16);
    --error-text: #fda29b;                /* 7.3:1 on --error-bg */
    --error-line: #f97066;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 44px -24px rgba(0, 0, 0, 0.9);
    --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.85), 0 0 90px -30px rgba(58, 66, 224, 0.45);
  }
}

/* Tamil and Hindi pages: Manrope has no Tamil or Devanagari letters, so the matching Noto Sans
   family (loaded only on those pages, see _Layout) takes over for them, ahead of the Latin fallback. */
html:lang(ta) {
  --font-sans: "Manrope", "Noto Sans Tamil", "Manrope Fallback", ui-sans-serif, system-ui, "Segoe UI", "Nirmala UI", sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans Tamil", ui-monospace, Consolas, monospace;
}
html:lang(hi) {
  --font-sans: "Manrope", "Noto Sans Devanagari", "Manrope Fallback", ui-sans-serif, system-ui, "Segoe UI", "Nirmala UI", sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans Devanagari", ui-monospace, Consolas, monospace;
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 20px);
  /* Keep room for the scrollbar, so the page doesn't shift sideways when the open menu locks scrolling. */
  scrollbar-gutter: stable;
  /* Backstop with body's clip below: nothing that strays past the right edge can widen the page.
     Mobile browsers grow the layout viewport to fit such content even under overflow-x: hidden,
     which turns the page into a zoomed-out wide layout. clip (unlike hidden) makes neither element
     a scroll container, so the sticky header keeps working. */
  overflow-x: clip;
}
/* Smooth-scroll in-page links only; arriving from another page with #anchor jumps instantly. */
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* browsers without clip */
  overflow-x: clip;
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
address { font-style: normal; }
.text-link {
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.text-link:hover { color: var(--brand-600); }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: break-word; /* a long word may break rather than overflow on very narrow screens */
}

p { margin: 0; text-wrap: pretty; }

/* Tamil and Devanagari: letter-spacing pulls apart joined letters (Devanagari's headline, Tamil
   ligatures), and tight line-heights clip the vowel signs above and below the line. These win
   over the Latin-tuned rules on every element. Tamil words run long (அளவுத்திருத்தத்துக்குப்),
   so overflow-wrap: anywhere lets one break at a line end on a narrow phone instead of
   stretching its grid or flex row past the screen; elsewhere words wrap whole as usual. */
html:is(:lang(ta), :lang(hi)) :where(*) { letter-spacing: normal !important; }
html:is(:lang(ta), :lang(hi)) :is(h1, h2, h3, h4) { line-height: 1.3; }
html:is(:lang(ta), :lang(hi)) body { line-height: 1.75; overflow-wrap: anywhere; }

ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::placeholder { color: var(--text-muted); opacity: 1; } /* 5.2:1 on white */
/* Search inputs: no native WebKit styling; the clear (×) button is redrawn to match the site. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--ink-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333395c' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 12px no-repeat;
  cursor: pointer;
}
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}
/* On dark surfaces the blue ring all but disappears; white is at least 8:1 on all of them. */
.site-header--dark,
.site-footer,
.cta,
.finder,
.card--feature,
.teaser,
.partner-card,
.journey-page { --focus-ring: #fff; }

::selection { background: var(--brand-100); color: var(--brand-950); }

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

.skip-link {
  position: absolute;
  left: 16px; top: -120px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-fill);
  color: #fff;
  font-weight: 700;
}
.skip-link:focus { top: 12px; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* 3. Layout ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface-tint); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
/* Two white sections in a row share one gap instead of stacking both paddings. */
.section:not(.section--tint) + .section:not(.section--tint) { padding-top: 0; }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  max-width: none;
}
.section-head--split > div { max-width: 680px; }

.section-title {
  margin-top: 14px;
  font-size: clamp(2rem, 1.4rem + 2.3vw, 3rem);
  letter-spacing: -0.035em;
}
.section-lead {
  margin-top: 16px;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.175rem);
  color: var(--text);
}
.section-head--center .section-lead { margin-inline: auto; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

/* 4. Components ------------------------------------------------------------ */

/* Eyebrow label with a small ruler-tick motif */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 6px) left bottom / 100% 6px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 1.5px 10px no-repeat;
  opacity: 0.6;
}
.eyebrow--light { color: var(--brand-200); }

/* Icons */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }
.icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-line);
  background: var(--accent-tint);
  color: var(--accent-text);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.icon-tile--sm { width: 40px; height: 40px; border-radius: var(--radius-sm); }
.icon-tile--sm .icon { width: 20px; height: 20px; }

/* Buttons */
.btn {
  --btn-bg: var(--accent-fill);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn .icon { width: 18px; height: 18px; }
/* Lift on hover only where a pointer can hover; on touch screens it would stick after a tap. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: scale(0.98); }
.btn-meta { font-size: 0.8em; font-weight: 600; opacity: 0.8; }
.btn-primary { box-shadow: 0 8px 20px -8px rgba(10, 10, 166, 0.6); }
.btn-primary:hover { --btn-bg: var(--accent-fill-hover); }
.btn-secondary { --btn-bg: var(--surface); --btn-fg: var(--text-strong); --btn-bd: var(--line); }
.btn-secondary:hover { --btn-bd: var(--brand-400); --btn-fg: var(--accent-text); }
.btn-wa { --btn-bg: var(--wa); box-shadow: 0 8px 20px -8px rgba(21, 128, 61, 0.6); }
.btn-wa:hover { --btn-bg: var(--wa-hover); }
.btn-wa-line { --btn-bg: var(--surface); --btn-fg: var(--wa); --btn-bd: rgba(21, 128, 61, 0.45); }
.btn-wa-line:hover { --btn-bg: var(--ok-bg); --btn-bd: var(--wa); --btn-fg: var(--wa-hover); }
.btn-light { --btn-bg: #fff; --btn-fg: var(--brand-900); }
.btn-light:hover { --btn-bg: var(--brand-50); }
.btn-outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.38); }
.btn-outline-light:hover { --btn-bd: #fff; --btn-bg: rgba(255, 255, 255, 0.08); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--accent-text);
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform 0.2s; }
@media (hover: hover) {
  .link-arrow:hover .icon,
  .card:hover .link-arrow .icon { transform: translateX(3px); }
}
/* Grow small text links' hit area to at least 24px tall without moving anything. */
a.link-arrow,
.breadcrumbs a { position: relative; }
a.link-arrow::after,
.breadcrumbs a::after { content: ""; position: absolute; inset: -8px -4px; }

/* Make a whole card clickable from one link inside it */
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* Cards */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.card h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.card p { color: var(--text); }
.card .link-arrow { margin-top: auto; padding-top: 4px; }
@media (hover: hover) {
  .card--hover:hover { border-color: var(--accent-line-hover); box-shadow: var(--shadow); transform: translateY(-3px); }
  .card--hover:hover .icon-tile { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
}
.card--hover:active { border-color: var(--accent-line-hover); }

/* Tags / chips */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-mid);
}

/* Check list */
.check-list { display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 34px; color: var(--text-mid); }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0aa6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--accent-tint);
  border: 1px solid var(--accent-line);
}

/* Breadcrumbs */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.breadcrumbs a:hover { color: var(--accent-text); }
.breadcrumbs [aria-current] { color: var(--text-high); }

/* Form controls: one look for the enquiry form and the Labs search (sizes live with each).
   Border 3:1 on white; 16px text so iOS doesn't zoom in on focus. */
.field input,
.field select,
.field textarea,
.finder-input input {
  border: 1px solid var(--input-border);
  background-color: var(--input-bg);
  color: var(--text-strong);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.finder-input input:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px rgba(58, 66, 224, 0.3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}

/* 5. Header & footer ------------------------------------------------------- */

/* Top bar: direct contact, the language links and the theme switch. It scrolls away above the
   sticky header; positioned so it stays above the journey page's fixed 3D canvas. */
.topbar {
  position: relative;
  z-index: 51;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-tint);
  font-size: 0.82rem;
  color: var(--text);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; }
.topbar-contact a { display: inline-flex; align-items: center; gap: 7px; padding-block: 6px; font-weight: 600; color: var(--text-mid); font-variant-numeric: tabular-nums; }
.topbar-contact .icon { width: 15px; height: 15px; color: var(--accent-text); }
.topbar-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (hover: hover) {
  .topbar-contact a:hover { color: var(--accent-text); }
}

.lang-switch { display: flex; align-items: center; gap: 4px; }
.lang-switch > .icon { width: 16px; height: 16px; margin-right: 2px; color: var(--text-muted); }
.lang-switch ul { display: flex; align-items: center; gap: 2px; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; font-weight: 600; line-height: 1.2; color: var(--text); }
.lang-switch a[aria-current] { background: var(--accent-tint); color: var(--accent-text); }
@media (hover: hover) {
  .lang-switch a:not([aria-current]):hover { color: var(--text-strong); background: var(--ink-100); }
}

/* Light/dark switch: the moon offers dark, the sun offers light (keyed off data-theme, which the
   inline script in _Layout sets before the first paint). */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-mid);
}
.theme-toggle .icon { width: 17px; height: 17px; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
@media (hover: hover) {
  .theme-toggle:hover { border-color: var(--line-strong); color: var(--text-strong); }
}
/* site.js sets this for the moment the theme flips, so every colour changes in one step. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after { transition: none !important; }

/* Over the dark journey page, and the same bar in the dark theme (a recessed strip, a shade darker
   than the page, as the light bar is a shade darker than white). */
.topbar--dark,
:root[data-theme="dark"] .topbar { border-bottom-color: rgba(199, 203, 255, 0.08); background: #03051c; color: var(--brand-200); }
.topbar--dark .topbar-contact a,
.topbar--dark .lang-switch a,
:root[data-theme="dark"] .topbar .topbar-contact a,
:root[data-theme="dark"] .topbar .lang-switch a { color: rgba(229, 231, 255, 0.82); }
.topbar--dark .topbar-contact .icon,
.topbar--dark .lang-switch > .icon,
:root[data-theme="dark"] .topbar .topbar-contact .icon,
:root[data-theme="dark"] .topbar .lang-switch > .icon { color: var(--brand-200); }
.topbar--dark .lang-switch a[aria-current],
:root[data-theme="dark"] .topbar .lang-switch a[aria-current] { background: rgba(124, 132, 247, 0.2); color: #fff; }
.topbar--dark .theme-toggle,
:root[data-theme="dark"] .topbar .theme-toggle { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; }
@media (hover: hover) {
  .topbar--dark .lang-switch a:not([aria-current]):hover,
  :root[data-theme="dark"] .topbar .lang-switch a:not([aria-current]):hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  /* Hover feedback the journey's bar doesn't have (left as it is). */
  :root[data-theme="dark"] .topbar:not(.topbar--dark) .topbar-contact a:hover { color: #fff; }
  :root[data-theme="dark"] .topbar:not(.topbar--dark) .theme-toggle:hover { border-color: rgba(255, 255, 255, 0.34); }
}

/* Phones: just the languages and the switch. */
@media (max-width: 719px) {
  .topbar-contact { display: none; }
  .topbar-tools { flex: 1; justify-content: space-between; }
  .lang-switch a { min-height: 36px; padding-inline: 9px; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 8px 28px -22px rgba(12, 16, 51, 0.45);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }

/* The brand may shrink (min-width: 0) so the bar never overflows on very narrow or zoomed screens. */
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.brand-mark { flex: none; width: auto; height: 46px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.site-header .brand-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-name { font-size: 1.32rem; font-weight: 800; letter-spacing: -0.035em; color: var(--red-600); }
.brand-sub {
  margin-top: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.site-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-mid);
  transition: background-color 0.2s, color 0.2s;
}
.nav-list a:hover { background: var(--ink-50); color: var(--text-strong); }
.nav-list a[aria-current="page"] { background: var(--accent-tint); color: var(--accent-text); }
.nav-extra { display: none; }
/* DotTut credit at the foot of the mobile menu. */
.nav-credit { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 0.82rem; color: var(--text-muted); }
.nav-credit__mark { display: block; flex: none; width: 22px; height: 22px; overflow: hidden; border-radius: 6px; }
.nav-credit b { font-weight: 800; color: var(--text-strong); }
.nav-credit b span { color: #138a07; }
.site-header--dark .nav-credit,
:root[data-theme="dark"] .site-header .nav-credit { color: var(--brand-200); }
.site-header--dark .nav-credit b,
:root[data-theme="dark"] .site-header .nav-credit b { color: #fff; }
.site-header--dark .nav-credit b span,
:root[data-theme="dark"] .site-header .nav-credit b span { color: #7ed957; }

.header-actions { display: flex; flex: none; align-items: center; gap: 14px; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-high);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.header-phone .icon { width: 18px; height: 18px; color: var(--accent-text); }
.header-phone:hover { color: var(--accent-text); }

.nav-toggle,
.header-call {
  display: none;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-strong);
}
/* The toggle sits before the menu in the DOM (for Tab order) but shows at the end of the bar. */
.nav-toggle { order: 1; }
.header-call { color: var(--accent-text); }
.header-call .icon { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-menu { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }
/* Mobile menu items cascade in; --i (set per item in _Header) staggers them. */
@keyframes nav-item-in { from { opacity: 0; transform: translateY(-6px); } }

/* Footer */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  color: var(--ink-300);
  font-size: 0.95rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
  pointer-events: none;
}
.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 40px 48px;
  padding-block: clamp(56px, 7vw, 88px) 48px;
}
.footer-brand p { margin-top: 18px; max-width: 36ch; }
.brand--footer .brand-name { color: var(--red-400); }
.brand--footer .brand-sub { color: var(--brand-200); }
.brand-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: #fff;
}
.brand-badge img { width: auto; height: 42px; }
.footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.footer-title {
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.footer-links { display: grid; gap: 10px; }
.footer-links a { transition: color 0.2s; }
.footer-links a:hover { color: #fff; }
.footer-contact { display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 12px; }
.footer-contact li > span { min-width: 0; }
.footer-contact .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--brand-400); }
.footer-contact a { overflow-wrap: break-word; }
.footer-stack { display: grid; }
.footer-contact a:hover { color: #fff; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.footer-badges li {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
}
.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: var(--ink-400);
}

/* Floating WhatsApp button */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Clear the iPhone home indicator and landscape notch areas (0 where there are none). */
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa-bright);
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(22, 163, 74, 0.65), 0 2px 6px rgba(12, 16, 51, 0.15);
  transition: transform 0.2s, background-color 0.2s, opacity 0.25s, visibility 0s;
}
@media (hover: hover) {
  .wa-float:hover { transform: scale(1.06); background: var(--wa); }
}
.wa-float:active { transform: scale(0.94); }
.wa-float .icon { width: 28px; height: 28px; }
/* Stepped aside while a [data-wa-avoid] region passes under it (site.js). visibility also takes
   it out of the tab order and the accessibility tree once the fade has finished. */
.wa-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.85);
  transition: transform 0.25s, opacity 0.25s, visibility 0s linear 0.25s;
}

/* Floating DotTut signature: the always-on technical-partner credit, bottom-left opposite the
   WhatsApp button, stepping aside with it over [data-wa-avoid] regions (site.js initFloats). */
.dt-float {
  position: fixed;
  left: calc(20px + env(safe-area-inset-left, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  background: rgba(6, 8, 36, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 30px -12px rgba(6, 8, 36, 0.6);
  color: #fff;
  font-family: var(--font-sans);
  line-height: 1.1;
  transition: transform 0.25s, box-shadow 0.25s, opacity 0.25s, visibility 0s;
}
.dt-float__mark { position: relative; display: block; flex: none; width: 38px; height: 38px; overflow: hidden; border-radius: 11px; }
.dt-float__text { display: grid; gap: 3px; white-space: nowrap; }
.dt-float__by { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-300); }
.dt-float__name { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; }
.dt-float__tut { color: #7ed957; }
/* "Innovora Labs →" slides out on hover or keyboard focus. */
.dt-float__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
  transition: max-width 0.35s ease, margin-left 0.35s ease, opacity 0.25s;
}
.dt-float__more .icon { flex: none; width: 13px; height: 13px; color: #7ed957; }
.dt-float:focus-visible .dt-float__more { max-width: 140px; margin-left: 7px; opacity: 1; }
@media (hover: hover) {
  .dt-float:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(126, 217, 87, 0.45), 0 16px 34px -12px rgba(64, 182, 5, 0.55); }
  .dt-float:hover .dt-float__more { max-width: 140px; margin-left: 7px; opacity: 1; }
  .dt-float:hover .dt-mark__dot,
  .anim .dt-float.is-in:hover .dt-mark__dot { animation: dt-hop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
.dt-float:active { transform: scale(0.97); }
.dt-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  transition: transform 0.25s, opacity 0.25s, visibility 0s linear 0.25s;
}
/* On the first page of a visit it arrives just after the page, so it doesn't compete with the
   first screen; later pages show it settled (site.js adds .is-settled). */
.anim .dt-float:not(.is-settled) { animation: dt-float-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s backwards; }
@keyframes dt-float-in { from { opacity: 0; transform: translateY(16px); } }
/* Phones: the mark alone, the same size as a comfortable tap target. */
@media (max-width: 719px) {
  .dt-float { padding: 0; border-radius: 13px; background: none; box-shadow: 0 10px 24px -8px rgba(19, 138, 7, 0.55), 0 2px 6px rgba(12, 16, 51, 0.15); }
  .dt-float__mark { width: 44px; height: 44px; border-radius: 13px; }
  .dt-float__text { display: none; }
}

@media print {
  .wa-float,
  .dt-float { display: none; }
}

/* 6. Home ------------------------------------------------------------------ */

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 112px);
  background: linear-gradient(180deg, #f4f5ff 0%, #fff 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(10, 10, 166, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 166, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 72% 35%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 70% at 72% 35%, #000 25%, transparent 75%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -220px;
  right: -180px;
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(88, 96, 245, 0.2), transparent 62%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-mid);
}
.hero-badge strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hero-badge strong .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.hero-title {
  margin-top: 26px;
  font-size: clamp(2.9rem, 1.6rem + 5vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.hero-title span { display: block; }
.hero-title .accent {
  color: var(--brand-800);
  background: linear-gradient(90deg, var(--brand-800), var(--brand-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.hero-lead {
  margin-top: 26px;
  max-width: 52ch;
  font-size: clamp(1.075rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-facts div { display: flex; flex-direction: column; }
.hero-facts dt { order: 2; margin-top: 4px; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }
.hero-facts dd {
  order: 1;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}

/* Hero visual: animated calibration gauge */
.hero-visual { position: relative; }
.gauge-card {
  --g-pad: 20px;
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin-inline: auto;
  padding: var(--g-pad) var(--g-pad) calc(var(--g-pad) + 2px);
  border: 1px solid rgba(10, 10, 166, 0.09);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
/* The head keeps one height through the whole cycle: one line each for the name and meta, and a
   status chip as wide as its longest label, so nothing below the card ever jumps. */
.gauge-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.gauge-inst { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gauge-inst > div { min-width: 0; }
.gauge-inst-name { font-weight: 700; color: var(--text-strong); line-height: 1.25; }
.gauge-inst-meta { font-size: 0.8rem; color: var(--text-muted); line-height: 1.3; }
.gauge-inst-name,
.gauge-inst-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: none;
  min-width: 9em; /* fits "In tolerance" */
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}
.status-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-chip[data-state="measuring"] .dot { animation: pulse 1s ease-in-out infinite; }
.status-chip[data-state="verifying"] { background: var(--accent-tint); color: var(--accent-text); }
.status-chip[data-state="pass"] { background: var(--ok-bg); color: var(--ok-text); }

.gauge-dial { position: relative; margin-top: 8px; }
.gauge-svg { width: 100%; height: auto; overflow: visible; }
.g-track { fill: none; stroke: var(--line-soft); stroke-width: 14; stroke-linecap: round; }
/* Default (no-JS / reduced-motion) state: a 0–100 bar gauge reading 60.04, certified.
   main.js animates these via inline styles. */
.g-progress {
  fill: none;
  stroke: url(#gaugeGrad);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 39.96;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.3, 1, 0.4, 1), opacity 0.3s;
}
.g-ring { fill: none; stroke: var(--line); stroke-width: 1.25; stroke-dasharray: 1 5; }
.g-band {
  fill: none;
  stroke: var(--green-500);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 5 200;
  stroke-dashoffset: -57.5;
  opacity: 0;
  transition: opacity 0.4s;
}
.g-ticks { stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; }
.g-ticks .tk-major { stroke: var(--text-muted); stroke-width: 2; }
.g-labels text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  fill: var(--text-muted);
  text-anchor: middle;
}
.g-needle {
  fill: var(--red-600);
  transform-box: view-box;
  transform-origin: 160px 160px;
  transform: rotate(24.1deg);
  transition: transform 1.5s cubic-bezier(0.3, 1.3, 0.45, 1);
}
.g-hub { fill: var(--accent-fill); }
.g-hub-dot { fill: #fff; }

.gauge-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: -30px;
  font-family: var(--font-mono);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.gauge-value { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.gauge-unit { font-size: 0.95rem; font-weight: 500; color: var(--text-muted); }

.gauge-data {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.gauge-data dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gauge-data dd {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.3s;
}
.gauge-data dd.is-pass { color: var(--ok-text); }

.gauge-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.gauge-steps li {
  position: relative;
  padding-top: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-faint);
  transition: color 0.3s;
}
.gauge-steps li::before,
.gauge-steps li::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 4px;
  border-radius: 4px;
}
.gauge-steps li::before { right: 0; background: var(--line-soft); }
.gauge-steps li::after { width: 0; background: var(--accent-fill); transition: width 1.4s linear, background-color 0.3s; }
.gauge-steps li.is-active { color: var(--text-strong); }
.gauge-steps li.is-active::after { width: 100%; }
.gauge-steps li.is-done { color: var(--text-mid); }
.gauge-steps li.is-done::after { width: 100%; transition: none; }
.gauge-card.is-certify .gauge-steps li::after { background: var(--green-500); }
.gauge-card.is-verify .g-band,
.gauge-card.is-certify .g-band { opacity: 1; }
.gauge-card.no-anim *,
.gauge-card.no-anim *::before,
.gauge-card.no-anim *::after { transition: none !important; animation: none !important; }
.gauge-card.is-fading .gauge-dial,
.gauge-card.is-fading .gauge-data,
.gauge-card.is-fading .gauge-inst { opacity: 0.25; transition: opacity 0.35s; }
.gauge-dial, .gauge-data, .gauge-inst { transition: opacity 0.35s; }

/* Pause / play, in the dial's top-right corner (clear of the arc at every card width). */
.gauge-toggle {
  position: absolute;
  z-index: 1;
  top: calc(var(--g-pad) + 48px); /* below the 40px head and the dial's 8px margin */
  right: var(--g-pad);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.gauge-toggle::after { content: ""; position: absolute; inset: -6px; } /* 44px touch target */
.gauge-toggle:focus-visible { border-radius: 50%; }
.gauge-toggle .icon { width: 14px; height: 14px; }
.gauge-toggle[aria-pressed="false"] .gauge-toggle__play,
.gauge-toggle[aria-pressed="true"] .gauge-toggle__pause { display: none; }
@media (hover: hover) {
  .gauge-toggle:hover { border-color: var(--accent-line-hover); background: var(--accent-tint); color: var(--accent-text); }
}

.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  line-height: 1.3;
}
.float-card strong { display: block; font-size: 0.85rem; color: var(--text-strong); }
.float-card span { color: var(--text-muted); }
.float-card--cert {
  bottom: -46px;
  left: -24px;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}
.float-card--cert.is-shown { opacity: 1; transform: none; }
.float-card .icon-tile--sm { background: var(--ok-bg); border-color: transparent; color: var(--ok-text); }

/* Trust strip */
.trust { border-block: 1px solid var(--line-soft); background: var(--page-bg); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 32px;
  padding-block: 28px;
}
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-title { font-weight: 700; color: var(--text-strong); line-height: 1.3; }
.trust-text { font-size: 0.85rem; line-height: 1.4; color: var(--text-muted); }

/* Services bento */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.card--feature {
  grid-row: span 2;
  overflow: hidden;
  border-color: transparent;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 132, 247, 0.35), transparent 50%),
    linear-gradient(160deg, var(--brand-800) 0%, var(--brand-900) 55%, var(--brand-950) 100%);
  color: var(--brand-100);
}
.card--feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%);
  mask-image: linear-gradient(200deg, #000, transparent 60%);
  pointer-events: none;
}
.card--feature > * { position: relative; }
/* Spanning two rows, the card has spare height: the icon stays at the top and the copy, tags and
   link sit together at the bottom (rather than a hole above the link). */
.card--feature h3 { margin-top: auto; font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); color: #fff; }
.card--feature p { color: var(--brand-100); font-size: 1.05rem; max-width: 44ch; }
.card--feature .icon-tile { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.card--feature .tag { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.card--feature .tag-list { margin-top: 8px; }
.card--feature .link-arrow { margin-top: 10px; color: #fff; }
@media (hover: hover) {
  .card--feature:hover { box-shadow: 0 30px 60px -28px rgba(10, 10, 166, 0.7); transform: translateY(-3px); }
}

/* Lab cards */
.lab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lab-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lab-count {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
/* The focus ring goes round the whole card; browsers without :has() keep the link's own ring. */
@supports selector(:has(*)) {
  .lab-card h3 a:focus-visible { outline: none; }
  .lab-card:has(a:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
}

/* Finder band */
.finder {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 112px);
  background: radial-gradient(ellipse at 50% -20%, #2a32c9 0%, var(--brand-900) 45%, var(--brand-950) 100%);
  color: var(--brand-100);
  text-align: center;
}
.finder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000, transparent 75%);
}
.finder h2 { margin-top: 14px; color: #fff; font-size: clamp(2rem, 1.4rem + 2.3vw, 3rem); letter-spacing: -0.035em; }
.finder p:not(.eyebrow) { margin: 14px auto 0; max-width: 52ch; font-size: 1.1rem; }
.search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin: 34px auto 0;
  padding: 8px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
}
.search-form > .icon { margin-left: 14px; color: var(--text-faint); }
.search-form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  font-size: 1.05rem;
  font-weight: 500;
}
/* The pill shows focus for the input (white ring on the dark band); the Search button inside the
   white pill keeps the default blue ring. */
.search-form input:focus { outline: none; }
/* The pill shows the field's focus ring; the Search button keeps its own, so focusing it (or
   clicking it) doesn't add a second ring around the whole pill. */
.search-form:has(input:focus) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
@supports not selector(:has(*)) {
  .search-form:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
}
.search-form > * { --focus-ring: var(--brand-600); }
/* Narrower than the search pill, so the seven chips wrap 4 + 3 rather than leaving one alone. */
.quick-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; margin: 22px auto 0; }
.quick-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}
.quick-chips a:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); }

/* Process steps (with a ruler line linking them) */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  counter-reset: step;
}
.steps::before {
  content: "";
  position: absolute;
  top: 27px;
  /* From the centre of the first circle to the centre of the last (4 columns, 28px gaps):
     the right end sits one column width, less the 28px circle radius, from the edge. */
  left: 28px;
  right: calc((100% - 3 * 28px) / 4 - 28px);
  height: 12px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px) left 50% / 100% 12px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.step { position: relative; }
.step-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--surface);
  box-shadow: 0 0 0 8px var(--page-bg); /* hides the ruler behind the circle */
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-text);
}
.step:last-child .step-num { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.step h3 { margin-top: 22px; font-size: 1.2rem; }
.step p { margin-top: 8px; }

/* Industries */
.industry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.industry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-strong);
}

/* Quality section */
.quality-points { display: grid; gap: 24px; margin-top: 36px; }
.quality-point { display: flex; gap: 16px; }
.quality-point h3 { font-size: 1.08rem; letter-spacing: -0.015em; }
.quality-point p { margin-top: 4px; }

/* Certificate card (_CertCard). It sizes itself to its own width (container queries below), since
   it sits in a half-width column on desktop and full width on tablets and phones. */
.cert-card {
  position: relative;
  container-type: inline-size;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--accent-tint), var(--surface) 60%);
  border: 1px solid var(--accent-line);
}
.cert-card-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; }
.cert-thumb {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface); /* shows only until the (opaque) image loads */
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
  transition: transform 0.3s;
}
@media (hover: hover) {
  .cert-thumb:hover { transform: rotate(0deg) scale(1.02); }
}
.cert-meta h3 { margin-top: 10px; font-size: 1.35rem; }
.cert-meta > p:not(.eyebrow) { margin-top: 4px; font-size: 0.95rem; }
.cert-facts { display: grid; gap: 10px; margin-top: 18px; font-size: 0.9rem; }
.cert-facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.cert-facts dt { color: var(--text-muted); white-space: nowrap; }
.cert-facts dd { margin-left: auto; font-family: var(--font-mono); font-weight: 600; color: var(--text-strong); text-align: right; }
/* Equal-width buttons: side by side when there's room, otherwise stacked full width. */
.cert-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-top: 20px; }
.cert-actions .btn { min-height: 44px; padding-block: 8px; white-space: normal; text-align: center; line-height: 1.25; }
/* Beside the thumbnail (a half-width column on desktop): labels above values. */
@container (max-width: 640px) {
  .cert-facts div { flex-direction: column; }
  .cert-facts dd { margin-left: 0; text-align: left; }
}
/* Phones: thumbnail centred above the details, label and value on one row again. */
@container (max-width: 420px) {
  .cert-card-inner { grid-template-columns: minmax(0, 1fr); }
  .cert-thumb { width: 100%; max-width: 220px; margin-inline: auto; }
  .cert-facts div { flex-direction: row; }
  .cert-facts dd { margin-left: auto; text-align: right; }
}

/* CTA band */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 32px;
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 90% 10%, rgba(124, 132, 247, 0.45), transparent 45%),
    linear-gradient(135deg, var(--brand-800), var(--brand-950));
  color: var(--brand-100);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
  mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.cta h2 { margin-top: 12px; color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); letter-spacing: -0.035em; }
.cta p:not(.eyebrow) { margin-top: 12px; max-width: 50ch; font-size: 1.08rem; }
/* Capped so three buttons wrap into two rows instead of squeezing the text column. */
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; max-width: 520px; }
/* Three buttons: two equal ones over a full-width third, rather than a ragged 2 + 1. */
.cta-actions--three { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cta-actions--three > :last-child { grid-column: 1 / -1; }

/* 7. Inner pages ----------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 72px) clamp(48px, 6vw, 80px);
  background: linear-gradient(180deg, #f4f5ff 0%, #fff 100%);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(10, 10, 166, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 166, 0.055) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 90% at 85% 0%, #000 20%, transparent 70%);
}
.page-hero h1 {
  margin-top: 18px;
  max-width: 18ch;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.page-hero .lead {
  margin-top: 20px;
  max-width: 60ch;
  font-size: clamp(1.075rem, 1rem + 0.35vw, 1.225rem);
}
.page-hero .eyebrow { margin-top: 28px; }

/* Sub-navigation chips (services, labs) */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chip {
  position: relative; /* holds the Labs chips' visually-hidden text inside the scrolling chip row */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-mid);
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.chip:hover { border-color: var(--brand-400); color: var(--accent-text); }
.chip[aria-pressed="true"] { background: var(--inverse-bg); border-color: var(--inverse-bg); color: var(--inverse-text); }
.chip .chip-count { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); } /* 5.2:1 */
.chip[aria-pressed="true"] .chip-count { color: var(--brand-200); }
/* Labs: a lab with no matches for the current search. */
.chip--empty { border-style: dashed; color: var(--text-muted); }

/* Services page */
.service { padding-block: clamp(64px, 8vw, 104px); border-bottom: 1px solid var(--line-soft); }
.service:nth-of-type(even) { background: var(--surface-tint); }
.service .split { align-items: start; }
.service-body h2 { margin-top: 14px; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); letter-spacing: -0.035em; }
.service-body > p { margin-top: 16px; font-size: 1.1rem; }
.service-body .check-list { margin-top: 28px; }
.service-body > .link-arrow,
.service-body > .hero-actions { margin-top: 32px; }
.service--flip .service-visual { order: -1; }

.panel {
  margin: 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.discipline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.discipline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-strong);
  font-size: 0.95rem;
}
.discipline .mono { font-size: 0.72rem; font-weight: 600; color: var(--accent-text); }

.inspect-list { display: grid; gap: 10px; }
.inspect-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-weight: 600;
  color: var(--text-high);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill--ok { background: var(--ok-bg); color: var(--ok-text); }
.pill--warn { background: var(--warn-bg); color: var(--warn-text); }

.heatmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.heatmap div {
  display: grid;
  place-items: center;
  aspect-ratio: 1.5;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-strong);
}
/* Coolest is the deepest blue, warmest the deepest orange. */
.heat-1 { background: #c3d2ff; }
.heat-2 { background: #dbe4ff; }
.heat-3 { background: #ffe1c2; }
.heat-4 { background: #ffd0a8; }
.heat-5 { background: #ffbf8f; }
.heat-legend { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.heat-legend span:nth-child(2) { flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #c3d2ff, #dbe4ff, #ffe1c2, #ffbf8f); }
.panel-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 0.85rem; }
.panel-foot strong { color: var(--text-strong); }

.repair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.repair-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-strong);
}

.mini-steps { display: grid; gap: 12px; counter-reset: ms; }
.mini-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-weight: 600;
  color: var(--text-high);
}
.mini-steps li::before {
  counter-increment: ms;
  content: "0" counter(ms);
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-text);
}

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq details[open] { border-color: var(--accent-line-hover); box-shadow: var(--shadow); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform 0.25s; color: var(--accent-text); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding: 0 22px 22px; }

/* Labs page */
.finder-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  padding-block: 16px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.finder-row { display: flex; align-items: flex-start; gap: 16px; }
.finder-input {
  position: relative;
  flex: 0 0 320px; /* room for the whole placeholder */
  min-width: 0;
}
.finder-input .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-faint); pointer-events: none; }
.finder-input input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 44px;
  border-radius: 999px;
  font-weight: 500;
}
/* Desktop: every lab chip in view, wrapping onto a second row (a scrolling row below 1024px). */
.finder-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; padding-top: 4px; }
.finder-chips::-webkit-scrollbar { display: none; }
.finder-summary { margin-top: 12px; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }

/* --finder-h is the bar's measured height (site.js). Anchors (#pressure) and search results land
   just under the stuck bar: html's scroll-padding already covers the header plus 20px. */
.lab-section,
.finder-empty { scroll-margin-top: calc(var(--finder-h, 150px) - 20px); }
.lab-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line-soft);
}
.lab-section:last-of-type { border-bottom: 0; }
.lab-intro { align-self: start; position: sticky; top: calc(var(--header-h) + var(--finder-h, 150px) + 24px); }
.lab-intro h2 { margin-top: 18px; font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); letter-spacing: -0.03em; }
.lab-intro p { margin-top: 10px; }
.lab-intro .lab-count { display: inline-block; margin-top: 16px; }
/* Rows keep their own height (no stretching to the lab intro beside a short result list). */
.instrument-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  align-self: start;
  align-content: start;
}
.instrument-list li { display: flex; }
/* Each instrument links to the quote form, prefilled with its name. */
.instrument-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-high);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.instrument-link::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-400);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.instrument-name { flex: 1; min-width: 0; }
.instrument-link .icon { width: 16px; height: 16px; color: var(--brand-400); transition: transform 0.2s, color 0.2s; }
@media (hover: hover) {
  .instrument-link:hover { border-color: var(--accent-line-hover); background: var(--accent-tint); color: var(--accent-text); }
  .instrument-link:hover .icon { color: var(--accent-text); transform: translateX(3px); }
}
.instrument-link:active { border-color: var(--brand-400); }
.instrument-list mark { padding: 0 2px; border-radius: 4px; background: #fff1a8; color: inherit; }
.finder-empty {
  max-width: 560px;
  margin: 56px auto;
  padding: 40px 28px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}
.finder-empty h2 { font-size: 1.5rem; }
.finder-empty p { margin-top: 10px; }
.finder-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
/* Phones only (see 9. Responsive): brings the search back once the bar has scrolled away. */
.finder-fab { display: none; }

/* About page */
.facts-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--line); /* shows through the 1px gaps as the dividers */
}
/* Number above its label, like the home hero facts (the markup keeps dt before dd). */
.facts-card div { display: flex; flex-direction: column; padding: clamp(20px, 3vw, 32px); background: var(--surface); }
.facts-card dd {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--accent-text);
}
.facts-card dt { order: 1; margin-top: 8px; font-weight: 600; line-height: 1.35; color: var(--text); }
/* Small phones: "ISO 9001" stays on one line in its half-width cell. */
@media (max-width: 420px) {
  .facts-card div { padding: 18px 16px; }
  .facts-card dd { font-size: 1.5rem; }
}
.prose p + p { margin-top: 16px; }
.prose .section-title + p { margin-top: 22px; }
.scope-quote + .reg-list { margin-top: 24px; }
.prose { font-size: 1.075rem; }
.values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.mv-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--ink-900); color: var(--ink-300); }
.mv-card:first-child { background: linear-gradient(150deg, var(--brand-800), var(--brand-950)); color: var(--brand-100); }
.mv-statement { margin-top: 14px; color: #fff; font-size: 1.45rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
.mv-card .eyebrow { color: var(--brand-200); }
.reg-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.reg-list div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.reg-list div:last-child { border-bottom: 0; }
.reg-list dt { font-weight: 700; color: var(--text-strong); }
.reg-list dt span { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
.reg-list dd { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; color: var(--text-high); text-align: right; word-break: break-all; }
.scope-quote {
  margin: 24px 0 0;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  font-size: 0.98rem;
  color: var(--text-mid);
}
.scope-quote cite { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 0.7rem; font-style: normal; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact-cards { display: grid; gap: 14px; }
.contact-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.contact-card > div { min-width: 0; } /* lets a long email address wrap instead of widening the card */
.contact-card h2 { font-size: 1.05rem; letter-spacing: -0.01em; }
.contact-card p, .contact-card li { font-size: 0.95rem; }
/* Phone, WhatsApp and email: brand-coloured, underlined and 44px tall, so they read and tap as links.
   The padding makes the tap area; the matching negative margin keeps the text spacing (also when
   a long address wraps onto two lines). */
.contact-card :is(li, p) > a {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.contact-card :is(li, p) > a:hover { color: var(--brand-900); }
.contact-card h2 + :is(p, ul) { margin-top: 4px; }
.contact-card .muted { margin-top: 2px; color: var(--text-muted); font-size: 0.85rem; }
/* The two phone numbers are stacked targets: full-height rows that don't overlap. */
.contact-card ul { display: grid; }
.contact-card ul > li > a { margin-block: 0; }
.contact-card h2 + ul { margin-top: -7px; } /* same heading-to-number gap as the other cards */
.contact-card address { margin-top: 4px; }
.contact-card .link-arrow { margin-top: 8px; font-size: 0.9rem; color: var(--accent-text); }

.form-card {
  padding: clamp(22px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.form-card h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.03em; }
.form-card > p { margin-top: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.9rem; font-weight: 700; color: var(--text-high); }
.field label .opt { font-weight: 500; color: var(--text-muted); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646c8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
}
.field [aria-invalid="true"] { border-color: var(--error-line); }
.field [aria-invalid="true"]:focus { border-color: var(--error-line); box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.25); }
.field-error { font-size: 0.85rem; font-weight: 600; color: var(--error-text); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.form-note { margin-top: 14px; font-size: 0.85rem; color: var(--text-muted); }
/* Always in the page (its role=status line must exist before it changes to be announced); boxed
   only while it has something to say. */
.form-status.is-shown {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--ok-bg);
  color: var(--ok-text);
  font-weight: 600;
  font-size: 0.95rem;
}
.form-status.is-error { background: var(--error-bg); color: var(--error-text); }
.form-fallback { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(6, 118, 71, 0.2); font-weight: 500; color: var(--text-mid); }
.form-fallback a { font-weight: 700; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.form-fallback .btn { margin-top: 12px; }

.tips { margin-top: 24px; padding: 22px; border-radius: var(--radius-lg); background: var(--accent-tint); border: 1px solid var(--accent-line); }
.tips h2 { font-size: 1.05rem; }
.tips .check-list { margin-top: 14px; gap: 10px; font-size: 0.95rem; }

.map-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-2);
  aspect-ratio: 21 / 9;
}
.map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Stand-in until the map is asked for: a faint street grid behind the address. */
.map-facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--surface-2);
}
.map-facade > p:first-of-type { font-weight: 700; color: var(--text-strong); }
.map-facade__note { font-size: 0.8rem; color: var(--text-muted); }

/* Phones only (the cards come first there): a jump to the quote form from the page hero. */
.contact-jump { display: none; }

/* 404 */
.error-page { padding-block: clamp(80px, 12vw, 160px); text-align: center; }
.error-code { font-family: var(--font-mono); font-size: clamp(4rem, 2rem + 10vw, 9rem); font-weight: 600; line-height: 1; letter-spacing: -0.06em; color: var(--accent-text); }
.error-page h1 { margin-top: 16px; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.error-page p:not(.error-code) { margin: 14px auto 0; max-width: 46ch; font-size: 1.1rem; }
.error-page .hero-actions { justify-content: center; }
/* Phones held sideways: keep the buttons on the first screen. */
@media (max-height: 500px) {
  .error-page { padding-block: 32px; }
  .error-code { font-size: 4rem; }
}

/* 8. Motion ---------------------------------------------------------------- */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

/* site.js hides only content that starts below the screen (instantly, while out of view) and
   fades it up shortly before it scrolls in. */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal:not(.is-visible) { transition: none; }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* 9. Responsive ------------------------------------------------------------ */
@media (max-width: 1140px) {
  .float-card--cert { left: -8px; }
  /* CTA bands: beside the buttons the copy would shrink to ~300px, so stack them here instead,
     with the buttons free to share one row. */
  .cta { grid-template-columns: minmax(0, 1fr); }
  .cta-actions { justify-content: flex-start; max-width: none; }
  .cta-actions--three { display: flex; }
}

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 680px; }
  .hero-visual { max-width: 460px; width: 100%; margin-inline: auto; }
  /* Touch-sized (44px) journey pill and quick-search chips on tablets and phones. */
  .hero-tour,
  .quick-chips a { min-height: 44px; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--feature { grid-column: 1 / -1; grid-row: auto; }
  .lab-grid { gap: 16px; } /* nine labs: three full rows of three */
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .steps::before { display: none; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: text keeps a readable line length, visuals a sensible size. */
  .split > * { max-width: 68ch; }
  .split > :is(.service-visual, .facts-card, .cert-card) { justify-self: center; width: 100%; max-width: 640px; }
  .service--flip .service-visual { order: 0; }
  /* Brand on its own row, then Services / Company / Contact side by side (no orphan column). */
  .footer-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.3fr); }
  .footer-brand { grid-column: 1 / -1; }
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-section { grid-template-columns: minmax(0, 1fr); }
  .lab-intro { position: static; }
  /* Lab chips in one scrolling row; the padding (pulled back by the margin) leaves room for the
     focus ring, and the fade on the right shows the row goes on. */
  .finder-row { align-items: center; }
  .finder-input { flex: 0 1 300px; }
  .finder-chips {
    flex: 1 1 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: -6px 0 -6px -6px;
    padding: 6px 40px 6px 6px;
    scroll-padding-inline: 6px 40px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  /* Scrolled along (site.js): fade the left edge as well. */
  .finder-chips.is-scrolled {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 40px), transparent);
  }
}

/* Contact on tablets: the quote form first, then the contact cards two by two (full-width cards
   left most of each row empty and pushed the form a screen down). */
@media (min-width: 720px) and (max-width: 1023px) {
  .contact-grid > .form-card { order: -1; }
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Burger menu below 1080px, where the brand, six links and the quote button stop fitting on
   one line (site.js matches this width to close the menu when the window grows past it). */
@media (max-width: 1079px) {
  .nav-toggle { display: inline-grid; }
  .header-actions { margin-left: auto; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    margin: 0;
    padding: 20px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--page-bg);
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    gap: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
  }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.2s; }
  .nav-open .site-header { background: var(--page-bg); }
  /* Lock the page behind the open menu on <html> only. If <body> also clipped (it normally
     has overflow-x: hidden), it would become the sticky header's scroll container and the
     header, menu included, would jump back to the top of the page — off-screen once scrolled. */
  .nav-open { overflow: hidden; }
  .nav-open body { overflow: visible; }
  .nav-open .nav-list li,
  .nav-open .nav-extra { animation: nav-item-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 6) * 35ms) both; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-list a { height: 54px; padding: 0 16px; border-radius: var(--radius-md); font-size: 1.15rem; }
  .nav-extra { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
  .nav-extra .header-phone { display: inline-flex; justify-content: center; min-height: 48px; }
}

/* From 600px the menu is a card that drops over a dimmed page instead of a mostly empty sheet.
   The spread shadow is the dimmed backdrop; clip-path keeps it off the header bar above. */
@media (min-width: 600px) and (max-width: 1079px) {
  .site-nav {
    height: auto;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 24px 48px -24px rgba(12, 16, 51, 0.35), 0 0 0 100vmax rgba(6, 8, 36, 0.45);
    clip-path: inset(0 -100vmax -100vmax);
  }
  .nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-extra { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* Phones: the actions sit at the bottom of the full-height menu, within thumb reach. */
@media (max-width: 599px) {
  .nav-extra { margin-top: auto; }
}

@media (max-width: 899px) {
  :root { --header-h: 64px; }
  .brand-mark { height: 40px; }
  .brand-name { font-size: 1.2rem; }
}

@media (max-width: 719px) {
  .header-inner,
  .header-actions { gap: 10px; }
  /* Only the call icon and the toggle: the actions cluster has nothing left to show. */
  .header-actions { display: none; }
  .header-call { display: inline-grid; margin-left: auto; }
  .lab-grid,
  .bento,
  .values-grid,
  .mv-grid { grid-template-columns: minmax(0, 1fr); }
  /* Home hero: a one-line badge, and the three facts in one even row. */
  .hero-badge { border-radius: 18px; }
  .hero-badge-more { display: none; }
  .hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; padding-top: 22px; }
  .hero-facts dd { font-size: 1.5rem; }
  .hero-facts dt { font-size: 0.8rem; line-height: 1.3; }
  /* Home lists as compact rows (icon beside the text; the whole card is still the link), so the
     page isn't a stack of desktop cards. */
  .bento,
  .lab-grid { gap: 12px; }
  .bento .card--hover,
  .lab-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding: 16px 18px; }
  .lab-card-top { display: contents; }
  .bento .card--hover .icon-tile,
  .lab-card .icon-tile { grid-row: 1 / span 2; width: 44px; height: 44px; }
  .bento .card--hover h3,
  .lab-card h3 { grid-column: 2; grid-row: 1; align-self: center; font-size: 1.1rem; }
  .bento .card--hover p,
  .lab-card p { grid-column: 2 / -1; grid-row: 2; font-size: 0.95rem; }
  .lab-card .lab-count { grid-column: 3; grid-row: 1; align-self: center; }
  .bento .card--hover .link-arrow,
  .lab-card .link-arrow { display: none; }
  .industry-grid { gap: 10px; } /* still two columns (one below 360px) */
  .industry { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; font-size: 0.92rem; }
  /* Process: a vertical timeline under a left-aligned heading. */
  .process-head,
  .process-head .section-lead { margin-inline: 0; text-align: left; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .step-num { grid-row: span 2; width: 44px; height: 44px; font-size: 0.85rem; box-shadow: none; }
  .step h3 { margin-top: 9px; font-size: 1.1rem; }
  .step p { grid-column: 2; }
  .step:not(:last-child)::after { content: ""; position: absolute; top: 52px; bottom: -20px; left: 21.5px; width: 1px; background: var(--line); }
  .trust-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked send buttons at one full width, not two ragged ones. */
  .form-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .contact-jump { display: flex; }
  .discipline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-wrap { aspect-ratio: 4 / 3; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  /* 44px rows for footer links and the stacked phone numbers. */
  .footer-links { gap: 0; }
  .footer-contact { gap: 4px; }
  .footer-links a,
  .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-contact li:has(a) .icon { margin-top: 12px; }
  .float-card { display: none; }
  .search-form .btn { padding: 0 18px; }
  .search-form > .icon { display: none; }
  .search-form input { padding-left: 14px; }
  .reg-list div { flex-direction: column; align-items: flex-start; gap: 4px; }
  .reg-list dd { text-align: left; }
  /* Inner pages: a shorter hero, so the sub-nav or the first content shows on the first screen. */
  .page-hero { padding-block: 28px 40px; }
  .page-hero .eyebrow { margin-top: 20px; }
  .page-hero h1 { margin-top: 14px; font-size: clamp(2rem, 1.4rem + 3vw, 2.4rem); }
  .page-hero .lead { margin-top: 14px; font-size: 1.05rem; }
  .subnav { margin-top: 24px; }
  /* Sample panels: the two title parts stack instead of wrapping into a 2 × 2 block. */
  .panel-title { flex-direction: column; align-items: flex-start; gap: 2px; }
  .panel-title span + span { color: var(--accent-text); }
  /* Labs: the bar scrolls with the page (a floating button brings it back) and the lists are compact,
     two columns wherever the names fit. */
  .finder-bar { position: static; }
  .finder-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .finder-input,
  .finder-chips { flex: none; }
  .lab-section,
  .finder-empty { scroll-margin-top: 0; }
  .instrument-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
  .instrument-link { min-height: 44px; gap: 8px; padding: 8px 10px 8px 12px; border-radius: var(--radius-sm); font-size: 0.875rem; line-height: 1.3; }
  .instrument-link::before { display: none; }
  .finder-fab {
    position: fixed;
    left: calc(16px + env(safe-area-inset-left, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)); /* centred on the WhatsApp button */
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--inverse-bg);
    color: var(--inverse-text);
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 12px 28px -8px rgba(12, 16, 51, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s;
  }
  .finder-fab.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.25s; }
  .finder-fab .icon { width: 20px; height: 20px; }
}

@media (max-width: 420px) {
  .brand { gap: 10px; }
  .brand-sub { font-size: 0.5625rem; letter-spacing: 0.02em; } /* 9px; fits beside the call and menu buttons down to 360px */
  /* Long labels wrap rather than overflow on narrow or large-text phones. */
  .btn { padding-block: 8px; white-space: normal; text-align: center; line-height: 1.2; }
  .hero-actions .btn { width: 100%; }
  .hero-badge { font-size: 0.8rem; }
  .gauge-card { --g-pad: 16px; border-radius: 22px; }
  /* Room for the longest instrument name and lab on one line: no icon tile, a slimmer chip. */
  .gauge-head { gap: 10px; }
  .gauge-inst .icon-tile { display: none; }
  .gauge-inst-name { font-size: 0.92rem; }
  .status-chip { gap: 6px; min-width: 8.4em; height: 28px; padding: 0 8px; font-size: 0.72rem; }
  .gauge-value { font-size: 1.9rem; }
  .gauge-data { padding: 10px; }
  .gauge-data dd { font-size: 0.8rem; }
  .cta-actions .btn { width: 100%; }
  /* Contact cards: more of the row for the numbers and the email address. */
  .contact-card { gap: 12px; padding: 16px; }
  .contact-card > .icon-tile { width: 40px; height: 40px; }
}

/* Large-text phones (280–359px wide): the header keeps just the name next to its two buttons. */
@media (max-width: 359px) {
  .site-header .brand-sub { display: none; }
  .industry-grid { grid-template-columns: minmax(0, 1fr); }
  /* Gauge readings: "60.000 bar" still fits its third of the row. */
  .gauge-data { gap: 4px; padding: 10px 8px; }
  .gauge-data dt { letter-spacing: 0.06em; }
  .gauge-data dd { font-size: 0.72rem; letter-spacing: -0.02em; }
}
@media (max-width: 319px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand > .brand-mark { height: 34px; }
  .site-header .brand-name { font-size: 1.05rem; }
}

/* Phones held sideways: a compact home hero, so the first screen shows the pitch and the buttons. */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .hero { padding-block: 24px 48px; }
  .hero-title { margin-top: 16px; font-size: clamp(2.2rem, 1rem + 4vw, 3rem); }
  .hero-title span { display: inline; }
  .hero-lead { margin-top: 12px; font-size: 1rem; }
  .hero-actions { margin-top: 20px; }
  .hero-facts { margin-top: 28px; padding-top: 18px; }
}

/* 10. Additions: sprite, dark header, 3D journey, DotTut credit ------------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* "3D" badge on the Journey nav link. The colour sweep moves an oversized gradient layer with
   transform (cheap to animate) and plays twice, then rests. */
.nav-badge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  height: 18px;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--brand-800);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.nav-badge::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 220%;
  background: linear-gradient(120deg, var(--brand-800), var(--brand-600) 55%, var(--red-600));
  animation: badge-shift 6s ease-in-out 2;
}
@keyframes badge-shift {
  0%, 100% { transform: none; }
  50% { transform: translateX(-54.5%); }
}

/* Hero link to the journey */
.hero-tour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-high);
  transition: background-color 0.2s, border-color 0.2s;
}
.hero-tour strong {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-tour .icon { width: 16px; height: 16px; transition: transform 0.2s; }
.hero-tour:hover { border-color: var(--accent-line-hover); background: var(--accent-tint); }
@media (hover: hover) {
  .hero-tour:hover .icon { transform: translateX(3px); }
}
.hero-tour__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); }
.hero-tour__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--green-500);
  border-radius: 50%;
  animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) 0.6s 4 both; /* a few pings to draw the eye, then still */
}
@keyframes ping {
  0% { transform: scale(0.5); opacity: 1; }
  80%, 100% { transform: scale(1.8); opacity: 0; }
}

/* Home: 3D journey teaser band */
.teaser {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 112px);
  background:
    radial-gradient(800px 520px at 78% 50%, rgba(58, 66, 224, 0.5), transparent 62%),
    linear-gradient(160deg, var(--brand-950), #03051c);
  color: var(--brand-100);
}
.teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
  mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.teaser-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.teaser h2 { margin-top: 14px; color: #fff; font-size: clamp(2rem, 1.4rem + 2.3vw, 3rem); letter-spacing: -0.035em; }
.teaser p:not(.eyebrow) { margin-top: 14px; max-width: 48ch; font-size: 1.1rem; }
.teaser .btn { margin-top: 30px; }
.teaser-visual { display: grid; place-items: center; min-height: 320px; perspective: 900px; }
.teaser-scene { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; animation: teaser-tilt 14s ease-in-out 3 both; }
.teaser-ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(124, 132, 247, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(124, 132, 247, 0.35), inset 0 0 26px rgba(124, 132, 247, 0.2);
}
.teaser-ring::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px #7c84f7;
}
.teaser-ring--1 { animation: ring-a 13s linear 3 both; }
.teaser-ring--2 { inset: 32px; border-color: rgba(255, 92, 100, 0.55); box-shadow: 0 0 26px rgba(255, 92, 100, 0.3); animation: ring-b 9s linear 4 both; }
.teaser-ring--2::after { background: #ff8a91; box-shadow: 0 0 14px #ff5c64; }
.teaser-ring--3 { inset: 64px; animation: ring-c 7s linear 6 both; }
.teaser-core {
  position: absolute;
  inset: 102px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 0 70px rgba(124, 132, 247, 0.65);
}
.teaser-core img { width: auto; height: 64px; }
@keyframes ring-a { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes ring-b { from { transform: rotateY(66deg) rotateX(0deg); } to { transform: rotateY(66deg) rotateX(360deg); } }
@keyframes ring-c { from { transform: rotateX(28deg) rotateY(0deg); } to { transform: rotateX(28deg) rotateY(360deg); } }
@keyframes teaser-tilt {
  0%, 100% { transform: rotateX(8deg) rotateY(-12deg); }
  50% { transform: rotateX(-6deg) rotateY(12deg); }
}
/* The rings wait until the band scrolls into view (site.js .anim / .is-in), turn for about 40s
   and come to rest in their starting pose. */
.anim .teaser-visual:not(.is-in) :is(.teaser-scene, .teaser-ring) { animation-play-state: paused; }
/* Tablets and phones: the scene below the copy, at a size that fits. */
@media (max-width: 899px) {
  .teaser-grid { grid-template-columns: minmax(0, 1fr); }
  .teaser-visual { min-height: 260px; }
  .teaser-scene { width: 240px; height: 240px; }
  .teaser-core { inset: 78px; }
}

/* Dark header variant (3D journey). The dark theme gives every page's header the same look (the
   :root[data-theme="dark"] selectors), except the background: --header-bg keeps it more solid
   over ordinary pages than over the 3D scene. */
.site-header--dark { background: rgba(3, 5, 28, 0.62); border-bottom-color: rgba(199, 203, 255, 0.08); }
.site-header--dark.is-scrolled,
:root[data-theme="dark"] .site-header.is-scrolled { border-bottom-color: rgba(199, 203, 255, 0.12); box-shadow: none; }
/* The logo mark on a white tile: its navy "S" would vanish on the dark bar. */
.site-header--dark .brand-mark,
:root[data-theme="dark"] .site-header .brand-mark { height: 44px; padding: 3px 4px; border-radius: var(--radius-sm); background: #fff; }
.site-header--dark .brand-name,
:root[data-theme="dark"] .site-header .brand-name { color: var(--red-400); }
.site-header--dark .brand-sub,
:root[data-theme="dark"] .site-header .brand-sub { color: var(--brand-200); }
.site-header--dark .nav-list a,
:root[data-theme="dark"] .site-header .nav-list a { color: rgba(229, 231, 255, 0.82); }
.site-header--dark .nav-list a:hover,
:root[data-theme="dark"] .site-header .nav-list a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.site-header--dark .nav-list a[aria-current="page"],
:root[data-theme="dark"] .site-header .nav-list a[aria-current="page"] { background: rgba(124, 132, 247, 0.2); color: #fff; }
.site-header--dark .header-phone,
:root[data-theme="dark"] .site-header .header-phone { color: #fff; }
.site-header--dark .header-phone .icon,
:root[data-theme="dark"] .site-header .header-phone .icon { color: var(--brand-200); }
.site-header--dark .nav-toggle,
.site-header--dark .header-call,
:root[data-theme="dark"] .site-header .nav-toggle,
:root[data-theme="dark"] .site-header .header-call { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; }
.site-header--dark .btn-wa-line,
:root[data-theme="dark"] .site-header .btn-wa-line { --btn-bg: transparent; --btn-fg: var(--wa-bright); --btn-bd: rgba(22, 163, 74, 0.6); }
.site-header--dark .btn-wa-line:hover,
:root[data-theme="dark"] .site-header .btn-wa-line:hover { --btn-bg: rgba(22, 163, 74, 0.14); --btn-fg: #fff; }
@media (max-width: 1079px) {
  /* The mobile menu panel is white by default; keep it dark so the light links stay readable. */
  .nav-open .site-header--dark,
  .site-header--dark .site-nav,
  :root[data-theme="dark"].nav-open .site-header,
  :root[data-theme="dark"] .site-header .site-nav { background: #050828; }
  .site-header--dark .site-nav,
  :root[data-theme="dark"] .site-header .site-nav { border-top-color: rgba(199, 203, 255, 0.1); }
  .site-header--dark .nav-extra,
  :root[data-theme="dark"] .site-header .nav-extra { border-top-color: rgba(199, 203, 255, 0.12); }
}
@media (max-width: 420px) {
  /* Same footprint as the plain mark, so the name and tagline fit beside the buttons. */
  .site-header--dark .brand-mark,
  :root[data-theme="dark"] .site-header .brand-mark { height: 38px; padding: 2px 3px; }
}
@media (max-width: 319px) {
  :root[data-theme="dark"] .site-header .brand > .brand-mark { height: 34px; } /* as 9. Responsive */
}

/* Footer bottom row with the partner credit */
.footer-legal { display: grid; gap: 4px; }

/* Animations that wait until the element scrolls into view (site.js adds .anim and .is-in).
   The decorative loops play a few times and then rest. */
.anim [data-animate]:not(.is-in) .dt-mark__d { stroke-dashoffset: 1; }
.anim [data-animate]:not(.is-in) .dt-mark__dot { opacity: 0; }
.anim [data-animate].is-in .dt-mark__d { stroke-dasharray: 1; animation: dt-draw 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both; }
.anim [data-animate].is-in .dt-mark__dot { animation: dt-drop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both, dt-pulse 2.8s ease-in-out 2.4s 3; }

/* DotTut mark */
.dt-mark { display: block; width: 100%; height: 100%; }
.dt-mark__d { stroke-dasharray: 1; stroke-dashoffset: 0; }
.dt-mark__dot { transform-box: fill-box; transform-origin: center; }
@keyframes dt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dt-drop { from { transform: translateY(-260px) scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dt-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes dt-hop {
  0% { transform: none; }
  35% { transform: translate(70px, -120px) scale(0.92); }
  65% { transform: translate(130px, -40px); }
  100% { transform: none; }
}

/* "Built by DotTut Innovora Labs" credit */
@property --bb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.built-by {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #fff;
  /* Self-contained type, so a container's mono/uppercase styling (e.g. .journey-credit)
     can't turn the wordmark into "DOTTUT". */
  font-family: var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.built-by::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--bb-angle), transparent 0deg 210deg, rgba(126, 217, 87, 0.9) 300deg, #d4f7bf 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* The light runs round three times once the pill scrolls into view (an animated custom property
   repaints every frame, so it doesn't loop forever). */
.anim .built-by.is-in::before { animation: bb-spin 4.5s linear 3; }
@keyframes bb-spin { to { --bb-angle: 360deg; } }
@media (hover: hover) {
  .built-by:hover {
    transform: translateY(-2px);
    background: rgba(126, 217, 87, 0.08);
    box-shadow: inset 0 0 0 1px rgba(126, 217, 87, 0.35), 0 12px 32px -12px rgba(126, 217, 87, 0.55);
  }
  .built-by:hover .dt-mark__dot,
  .anim .built-by.is-in:hover .dt-mark__dot { animation: dt-hop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .built-by:hover .built-by__arrow { opacity: 1; transform: translateX(3px); }
}
.built-by:focus-visible .built-by__arrow { opacity: 1; }
.built-by__mark {
  position: relative;
  display: block;
  flex: none;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 11px;
  box-shadow: 0 6px 16px -6px rgba(64, 182, 5, 0.8);
}
.built-by__mark::after,
.partner-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
}
.anim [data-animate].is-in :is(.built-by__mark, .partner-logo)::after { animation: bb-shine 5s ease-in-out 1.5s 3; }
@keyframes bb-shine {
  0%, 62% { transform: translateX(-120%); }
  86%, 100% { transform: translateX(120%); }
}
.built-by__text { display: flex; flex-direction: column; line-height: 1.15; }
.built-by__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); }
.built-by__name { margin-top: 3px; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.built-by__tut { color: #7ed957; }
.built-by__labs { margin-left: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-300); }
.built-by__arrow { width: 16px; height: 16px; color: #7ed957; opacity: 0.6; transition: transform 0.25s, opacity 0.25s; }

/* About: technical partner */
.partner-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(560px 380px at 16% 40%, rgba(64, 182, 5, 0.24), transparent 62%),
    linear-gradient(150deg, #0d1f07, #040a01 70%);
  color: #c7e9b4;
}
.partner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(126, 217, 87, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 217, 87, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 25% 40%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 80% at 25% 40%, #000, transparent 75%);
}
/* A credit, so it stays a step quieter than the lab's own sections and CTA. */
.partner-visual { position: relative; display: grid; place-items: center; width: 100%; max-width: 240px; aspect-ratio: 1; margin-inline: auto; }
.partner-logo {
  position: relative;
  z-index: 1;
  width: 40%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 24%;
  box-shadow: 0 24px 60px -12px rgba(64, 182, 5, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* Each orbit makes whole turns for about a minute (2 × 28s, 3 × 18s, 4 × 12s) and rests where it
   started; like the teaser rings, they wait until the card scrolls into view. */
.partner-orbit { position: absolute; inset: 0; border: 1px dashed rgba(126, 217, 87, 0.35); border-radius: 50%; animation: spin 28s linear 2; }
.partner-orbit--2 { inset: 13%; border-style: solid; border-color: rgba(126, 217, 87, 0.18); animation-duration: 18s; animation-iteration-count: 3; animation-direction: reverse; }
.partner-orbit--3 { inset: 26%; border-color: rgba(126, 217, 87, 0.28); animation-duration: 12s; animation-iteration-count: 4; }
.anim [data-animate]:not(.is-in) .partner-orbit { animation-play-state: paused; }
.partner-orbit span {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #7ed957;
  box-shadow: 0 0 16px #7ed957;
}
@keyframes spin { to { transform: rotate(360deg); } }
.eyebrow--lime { color: #7ed957; }
.partner-body h2 { margin-top: 14px; color: #fff; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem); letter-spacing: -0.03em; }
.partner-name span { color: #7ed957; }
.partner-body > p { margin-top: 14px; max-width: 60ch; font-size: 1rem; }
.partner-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.partner-tags li { padding: 5px 12px; border: 1px solid rgba(126, 217, 87, 0.3); border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: #e7f9dc; }
.partner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
/* Outlined, so "Request a quote" stays the loudest button on the page. */
.btn-lime { --btn-bg: transparent; --btn-fg: #7ed957; --btn-bd: rgba(126, 217, 87, 0.5); }
.btn-lime:hover { --btn-bg: rgba(126, 217, 87, 0.12); --btn-bd: #7ed957; }
.partner-tagline { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(199, 233, 180, 0.7); }

/* 3D journey page */
.journey-page { background: #03051c; }
.journey {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 760px at 72% 38%, rgba(58, 66, 224, 0.32), transparent 62%),
    radial-gradient(800px 600px at 8% 92%, rgba(227, 0, 15, 0.12), transparent 60%),
    #03051c;
  color: var(--brand-100);
}
/* Sized to the large viewport, so a phone's toolbar sliding in and out neither stretches the
   canvas nor makes journey.js reallocate it. */
.journey-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.journey.is-loading .journey-canvas { opacity: 0; }
.journey.is-picking { cursor: pointer; }
.journey-labels { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.jl-label {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(124, 132, 247, 0.4);
  border-radius: 12px;
  background: rgba(5, 7, 40, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  transition: border-color 0.2s, background-color 0.2s;
}
.jl-label small { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; color: var(--brand-200); }
.jl-label.is-on { pointer-events: auto; }
.jl-label.is-active,
.jl-label:hover { border-color: #fff; background: rgba(58, 66, 224, 0.88); }

/* Shown where the scene will appear (beside the intro text; above it on phones), clear of the headline. */
.journey-loader {
  position: fixed;
  inset: 0 0 0 46%;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-200);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0s linear 0.5s;
}
.journey.is-loading .journey-loader { opacity: 1; visibility: visible; transition: none; animation: loader-timeout 0.4s ease 10s forwards; }
@keyframes loader-timeout { to { opacity: 0; visibility: hidden; } }
.journey-loader__dial { position: relative; width: 58px; height: 58px; border: 2px solid rgba(124, 132, 247, 0.4); border-bottom-color: transparent; border-radius: 50%; }
.journey-loader__dial span {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: 22px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--red-400);
  transform-origin: bottom center;
  animation: loader-needle 1.3s ease-in-out infinite alternate;
}
@keyframes loader-needle { from { transform: rotate(-125deg); } to { transform: rotate(125deg); } }

.journey-step {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px max(var(--gutter), calc((100vw - var(--container)) / 2)) 64px;
  pointer-events: none;
}
.journey-step--intro { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
.journey-card {
  width: 100%;
  max-width: clamp(340px, 34vw, 440px); /* narrower on small laptops, leaving the scene room */
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(199, 203, 255, 0.14);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(14, 19, 74, 0.74), rgba(5, 7, 40, 0.74));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}
.journey-card h2 { margin-top: 14px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -0.03em; }
/* Body paragraphs. The lead and the Verify result are left out here, not overridden later: this
   selector would outrank their own rules (three classes against two). */
.journey-card > p:not(.eyebrow, .journey-kicker, .journey-lead, .journey-result) { margin-top: 12px; color: rgba(229, 231, 255, 0.86); }
.journey-card--intro { max-width: min(580px, 46vw); padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.journey-card--intro h1 { margin-top: 18px; color: #fff; font-size: clamp(2.6rem, 0.6rem + 4vw, 4.75rem); line-height: 1; letter-spacing: -0.05em; }
.journey-card--intro .hero-actions { margin-top: 32px; }
.journey-card > p.journey-lead { margin-top: 20px; max-width: 46ch; color: rgba(229, 231, 255, 0.86); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); }
.journey-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-200);
}
.journey-kicker span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(199, 203, 255, 0.35);
  border-radius: 50%;
  background: rgba(124, 132, 247, 0.14);
  color: #fff;
  letter-spacing: 0;
}
.journey-facts { display: flex; gap: 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(199, 203, 255, 0.14); font-size: 0.88rem; color: var(--brand-200); }
.journey-facts strong { display: block; font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; line-height: 1.15; color: #fff; }
.journey-checks { display: grid; gap: 8px; margin-top: 16px; }
.journey-checks li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.journey-checks li::before,
.journey-result::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat, var(--green-500);
}
.journey-card > p.journey-result { display: flex; gap: 10px; margin-top: 16px; font-weight: 600; color: #fff; }
.journey-result::before { margin-top: 2px; }
.journey-points { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.journey-points li {
  padding: 4px 10px;
  border: 1px solid rgba(124, 231, 255, 0.35);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #7ce7ff;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
/* The test point the reference standard is applying right now (journey.js). */
.journey-points li.is-active { border-color: #7ce7ff; background: #7ce7ff; color: #03051c; }
.journey-labs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.journey-labs a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(199, 203, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}
.journey-labs a:hover { border-color: rgba(199, 203, 255, 0.4); background: rgba(124, 132, 247, 0.18); }
.journey-labs .icon { width: 18px; height: 18px; color: var(--brand-200); }
.journey-labs small { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--brand-200); }
.journey-scroll {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-200);
}
.journey-scroll__mouse { position: relative; width: 22px; height: 34px; border: 2px solid rgba(199, 203, 255, 0.5); border-radius: 12px; }
.journey-scroll__mouse::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: wheel 1.6s ease-in-out infinite;
}
@keyframes wheel {
  0% { transform: translateY(0); opacity: 1; }
  80%, 100% { transform: translateY(10px); opacity: 0; }
}
.journey-end { position: relative; z-index: 2; display: flex; justify-content: center; padding: 120px var(--gutter) 140px; }
.journey-card--end { max-width: 660px; text-align: center; }
.journey-card--end .hero-actions { justify-content: center; margin-top: 28px; }
.journey-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(199, 203, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-200);
}

.journey-rail { position: fixed; top: 50%; right: clamp(12px, 2vw, 28px); z-index: 3; transform: translateY(-50%); }
/* A slim track of dots on its own surface, readable over anything in the scene (even the white
   certificate) and taking little room from it. Labels show as pills on hover and focus; the HUD
   names the current stage. */
.journey-rail ol {
  display: grid;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid rgba(199, 203, 255, 0.1);
  border-radius: 999px;
  background: rgba(5, 7, 40, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.journey-rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(229, 231, 255, 0.75);
}
.journey-rail__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  padding: 3px 9px;
  border: 1px solid rgba(199, 203, 255, 0.12);
  border-radius: 999px;
  background: rgba(5, 7, 40, 0.82);
  white-space: nowrap;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.journey-rail a:hover .journey-rail__label,
.journey-rail a:focus-visible .journey-rail__label { opacity: 1; transform: translate(0, -50%); }
.journey-rail__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(199, 203, 255, 0.35); transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.journey-rail a[aria-current] { color: #fff; }
.journey-rail a[aria-current] .journey-rail__dot { background: #fff; box-shadow: 0 0 0 4px rgba(124, 132, 247, 0.35); transform: scale(1.2); }

.journey-hud {
  position: fixed;
  top: calc(var(--header-h) + 18px);
  right: clamp(48px, 5vw, 84px);
  z-index: 3;
  padding: 10px 14px;
  border: 1px solid rgba(199, 203, 255, 0.16);
  border-radius: 14px;
  background: rgba(5, 7, 40, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-align: right;
  color: var(--brand-200);
  pointer-events: none;
}
.journey-hud__stage { letter-spacing: 0.1em; text-transform: uppercase; }
.journey-hud__sep { margin-inline: 4px; opacity: 0.5; }
.journey-hud__reading { margin-top: 4px; color: rgba(229, 231, 255, 0.82); }
.journey-hud.is-quiet .journey-hud__reading { display: none; }
.journey-hud__reading strong { font-size: 1.05rem; font-weight: 600; color: #7ce7ff; }
.journey-page .wa-float { bottom: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* The closing call to action gets the stage to itself: labels, rail and HUD step out, the scene dims. */
.journey-labels,
.journey-rail,
.journey-hud { transition: opacity 0.4s, visibility 0s; }
.journey.is-ending .journey-labels,
.journey.is-ending .journey-rail,
.journey.is-ending .journey-hud { opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s linear 0.4s; }
.journey.is-ending .journey-canvas { opacity: 0.35; }

/* Copy that only applies to one mode: the scroll-driven scene, or the static fallback. */
.journey-static-only { display: none; }
.journey.is-static .journey-3d-only { display: none; }
.journey.is-static .journey-static-only { display: inline; }

/* Static fallback (no WebGL, reduced motion): a readable stacked timeline. */
.journey.is-static .journey-canvas,
.journey.is-static .journey-labels,
.journey.is-static .journey-loader,
.journey.is-static .journey-hud,
.journey.is-static .journey-rail,
.journey.is-static .journey-scroll { display: none; }
.journey.is-static .journey-step { min-height: 0; justify-content: center; padding-block: 24px; }
.journey.is-static .journey-step--intro { padding-block: 96px 48px; }
.journey.is-static .journey-card { max-width: 720px; }

/* Rail and anchor jumps land on a stage's resting point (its centre), not the page-wide scroll
   padding below the header. (The static layout keeps that padding: its cards sit at the top.) */
.journey:not(.is-static) .journey-step { scroll-margin-top: calc(-1 * (var(--header-h) + 20px)); }

/* Short laptop screens: keep the tallest card (Labs) clear of the header. */
@media (min-width: 900px) and (max-height: 820px) {
  .journey-step { padding-block: calc(var(--header-h) + 16px) 24px; }
  .journey-labs { gap: 6px; margin-top: 14px; }
  .journey-labs a { padding: 6px 9px; }
  .journey-labs small { display: none; }
}

/* Phones and portrait tablets: the card sits at the bottom, the scene above it (journey.js frames
   the space between the header and the card). The bottom padding keeps the card clear of the WhatsApp button. */
@media (max-width: 899px) {
  .journey-step { align-items: flex-end; padding: 88px var(--gutter) 84px; }
  .journey-card { max-width: none; background: linear-gradient(160deg, rgba(14, 19, 74, 0.88), rgba(5, 7, 40, 0.92)); }
  .journey-card--intro { padding: 22px 0 0; background: linear-gradient(180deg, rgba(3, 5, 28, 0), rgba(3, 5, 28, 0.85) 26%); }
  .journey-card--intro h1 { font-size: clamp(2.1rem, 1.6rem + 3vw, 2.8rem); }
  .journey-card > p.journey-lead { font-size: 1rem; }
  .journey-card--intro .hero-actions { gap: 10px; margin-top: 22px; }
  .journey-card--intro .hero-actions .btn { width: auto; min-height: 46px; padding-inline: 15px; font-size: 0.9rem; }
  .journey-scroll,
  .journey-labels,
  .journey-hud,
  .journey-rail { display: none; }
  /* Compact lab chips (names only), leaving the lab ring room above the card. */
  .journey-labs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
  .journey-labs a { padding: 6px 8px; font-size: 0.76rem; }
  .journey-labs span { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .journey-labs .icon,
  .journey-labs small { display: none; }
  .journey-loader { inset: var(--header-h) 0 auto; height: 34svh; }
  .journey.is-static .journey-step { padding-block: 16px; }
}

/* Short phones: compact cards, so the scene still has room above them. */
@media (max-width: 899px) and (max-height: 760px) {
  .journey-step { padding-top: 72px; }
  .journey-card { padding: 16px 18px; }
  .journey-kicker span { width: 28px; height: 28px; }
  .journey-card h2 { margin-top: 10px; font-size: 1.4rem; }
  .journey-card > p:not(.eyebrow, .journey-kicker, .journey-lead, .journey-result) { margin-top: 8px; font-size: 0.92rem; line-height: 1.5; }
  .journey-card > p.journey-result { margin-top: 10px; font-size: 0.92rem; line-height: 1.5; }
  .journey-card--intro { padding: 4px 0 0; }
  .journey-card--intro h1 { margin-top: 10px; font-size: 1.85rem; }
  .journey-card > p.journey-lead { margin-top: 10px; font-size: 0.92rem; line-height: 1.5; }
  .journey-card--intro .hero-actions { margin-top: 16px; }
  .journey-facts,
  .journey-checks { display: none; }
  .journey-points { margin-top: 12px; }
}
/* The smallest phones: two lab columns, and both intro buttons on one row (wrapping their text if needed). */
@media (max-width: 359px) {
  .journey-labs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-card--intro .hero-actions { flex-wrap: nowrap; gap: 8px; }
  .journey-card--intro .hero-actions .btn { flex: 1 1 0; padding-inline: 10px; font-size: 0.84rem; line-height: 1.15; white-space: normal; text-align: center; }
  .journey-card--intro .hero-actions .icon { display: none; }
}

/* Phones held sideways (and other short landscape screens): card on the left, scene beside it. */
@media (orientation: landscape) and (max-height: 520px) {
  .journey-step { align-items: center; padding: calc(var(--header-h) + 12px) var(--gutter) 12px; }
  .journey-step--intro { padding-top: 12px; }
  .journey-card { max-width: min(48%, 440px); padding: 14px 18px; }
  .journey-card--intro { padding: 0; background: none; }
  .journey-kicker span { width: 28px; height: 28px; }
  .journey-card h2 { margin-top: 8px; font-size: 1.3rem; }
  .journey-card > p:not(.eyebrow, .journey-kicker, .journey-lead, .journey-result) { margin-top: 8px; font-size: 0.86rem; line-height: 1.45; }
  .journey-card > p.journey-result { margin-top: 10px; font-size: 0.86rem; line-height: 1.45; }
  .journey-card--intro h1 { margin-top: 10px; font-size: 1.9rem; }
  .journey-card > p.journey-lead { margin-top: 10px; font-size: 0.9rem; line-height: 1.45; }
  .journey-card--intro .hero-actions { margin-top: 16px; }
  .journey-facts,
  .journey-checks,
  .journey-scroll,
  .journey-hud,
  .journey-labs .icon,
  .journey-labs small { display: none; }
  .journey-points { margin-top: 10px; }
  .journey-labs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .journey-labs a { padding: 5px 8px; font-size: 0.74rem; }
  .journey-loader { inset: var(--header-h) 0 0 50%; height: auto; }
}

@media (max-width: 719px) {
  .partner-card { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .partner-visual { max-width: 132px; margin-inline: 0; }
  .partner-body > p { font-size: 0.95rem; }
  .partner-tags { display: none; }
  .partner-actions { margin-top: 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .built-by::before,
  .built-by__mark::after,
  .partner-logo::after,
  .partner-orbit,
  .teaser-scene,
  .teaser-ring,
  .nav-badge::before,
  .nav-open .nav-list li,
  .nav-open .nav-extra { animation: none !important; }
}

/* 11. Dark theme ------------------------------------------------------------
   The dark colours themselves are the tokens in 1 (and the dark header and top bar in 5 and 10
   reuse the journey page's dark variants). This section holds what tokens can't express:
   gradients, glows, SVG paint, the colours inside data-URI icons, and components that change
   character in the dark. Screen only, like the dark tokens. The journey page looks the same in
   both themes, so rules for parts it shares with other pages (buttons, footer) skip it. */
@media screen {
  /* Base: the search field's clear button and the checklist tick, redrawn in light strokes. */
  :root[data-theme="dark"] input[type="search"]::-webkit-search-cancel-button {
    background: rgba(199, 203, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7cbff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 12px no-repeat;
  }
  :root[data-theme="dark"] .check-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f97ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E");
  }
  /* Links brighten on hover (the light theme darkens them). */
  :root[data-theme="dark"] .text-link:hover,
  :root[data-theme="dark"] .contact-card :is(li, p) > a:hover { color: var(--brand-200); }

  /* Buttons: a blue glow under the primary one, a crisper outline on the secondary one. */
  :root[data-theme="dark"] body:not(.journey-page) .btn-primary { box-shadow: 0 8px 24px -10px rgba(58, 66, 224, 0.85); }
  :root[data-theme="dark"] .btn-secondary { --btn-bd: rgba(199, 203, 255, 0.24); }
  :root[data-theme="dark"] .btn-secondary:hover { --btn-bd: var(--brand-400); }

  /* Cards lift on a faint blue glow rather than a shadow. */
  @media (hover: hover) {
    :root[data-theme="dark"] .card--hover:hover { box-shadow: 0 22px 48px -26px rgba(58, 66, 224, 0.65); }
  }

  /* Tablet menu card: a hairline along its rounded foot and a deeper dim, so it stands clear of
     the dark page behind it (the journey's card, over the 3D scene, stays as it is). */
  @media (min-width: 600px) and (max-width: 1079px) {
    :root[data-theme="dark"] .site-header:not(.site-header--dark) .site-nav {
      box-shadow: inset 0 -1px 0 rgba(199, 203, 255, 0.14), 0 24px 48px -24px rgba(0, 0, 0, 0.8), 0 0 0 100vmax rgba(1, 2, 14, 0.62);
    }
  }

  /* Home hero: navy fading into the page, a blue grid and glow (as on the journey). */
  :root[data-theme="dark"] .hero { background: linear-gradient(180deg, #0b0f3b 0%, var(--page-bg) 100%); }
  :root[data-theme="dark"] .hero::before {
    background-image:
      linear-gradient(rgba(124, 132, 247, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(124, 132, 247, 0.08) 1px, transparent 1px);
  }
  :root[data-theme="dark"] .hero::after { background: radial-gradient(circle, rgba(58, 66, 224, 0.36), transparent 62%); }
  :root[data-theme="dark"] .hero-title .accent { color: var(--brand-400); background-image: linear-gradient(90deg, var(--brand-400), #b9beff); }
  :root[data-theme="dark"] .hero-tour { background: rgba(14, 19, 57, 0.6); }
  :root[data-theme="dark"] .hero-tour:hover { background: var(--accent-tint); }
  /* Inner page heroes: the same fade, with the glow in the top-right corner, under the grid. */
  :root[data-theme="dark"] .page-hero {
    background:
      radial-gradient(900px 460px at 88% -10%, rgba(58, 66, 224, 0.26), transparent 70%),
      linear-gradient(180deg, #0b0f3b 0%, var(--page-bg) 100%);
  }
  :root[data-theme="dark"] .page-hero::before {
    background-image:
      linear-gradient(rgba(124, 132, 247, 0.075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(124, 132, 247, 0.075) 1px, transparent 1px);
  }

  /* Hero gauge. SVG paint: the progress arc's gradient runs from a deep to a bright blue (the
     reverse of light, so its strong end still stands out), and the major ticks' stroke is a
     presentation attribute on the <defs> line, which a rule on its id overrides in every <use>. */
  :root[data-theme="dark"] .gauge-card { border-color: rgba(143, 151, 255, 0.2); }
  :root[data-theme="dark"] #gaugeGrad stop:first-child { stop-color: #4a52ef; }
  :root[data-theme="dark"] #gaugeGrad stop:last-child { stop-color: #b3b9ff; }
  :root[data-theme="dark"] #tkM { stroke: var(--text-faint); }
  :root[data-theme="dark"] .g-needle { fill: var(--red-400); }

  /* Instrument finder band: the white search pill becomes dark glass with a light outline. */
  :root[data-theme="dark"] .search-form {
    background: rgba(3, 5, 28, 0.55);
    box-shadow: inset 0 0 0 1px rgba(199, 203, 255, 0.24), 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  }
  :root[data-theme="dark"] .search-form > .icon { color: var(--brand-200); }
  :root[data-theme="dark"] .search-form > * { --focus-ring: #fff; }

  /* Services: the sample temperature map, deep blue to burnt orange (the further from the set
     point, the stronger), under light figures (6:1 or more). */
  :root[data-theme="dark"] .heat-1 { background: #2f3a8c; }
  :root[data-theme="dark"] .heat-2 { background: #222a63; }
  :root[data-theme="dark"] .heat-3 { background: #3d2b26; }
  :root[data-theme="dark"] .heat-4 { background: #5e3a22; }
  :root[data-theme="dark"] .heat-5 { background: #87481f; }
  :root[data-theme="dark"] .heat-legend span:nth-child(2) { background: linear-gradient(90deg, #2f3a8c, #222a63, #3d2b26, #87481f); }

  /* Labs: the pressed chip is inverted (light), so its count goes blue; search matches glow amber. */
  :root[data-theme="dark"] .chip[aria-pressed="true"] .chip-count { color: var(--brand-600); }
  :root[data-theme="dark"] .instrument-list mark { background: rgba(250, 204, 21, 0.26); color: #fff; }
  :root[data-theme="dark"] .finder-fab { box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.7); }

  /* About: the vision card (near-black in light) gets a lifted gradient and a hairline. */
  :root[data-theme="dark"] .mv-card:not(:first-child) {
    background: linear-gradient(150deg, #161c4e, #0b0f33);
    box-shadow: inset 0 0 0 1px rgba(199, 203, 255, 0.12);
  }

  /* Contact form: a light chevron, dark option lists, a lighter error glow, and autofilled fields
     kept dark (Safari paints them yellow whatever the theme) with light text. */
  :root[data-theme="dark"] .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d96bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] .field option { background-color: var(--surface); color: var(--text-strong); }
  :root[data-theme="dark"] .field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.3); }
  :root[data-theme="dark"] .form-fallback { border-top-color: rgba(71, 205, 137, 0.25); }
  :root[data-theme="dark"] .field input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-strong);
    caret-color: var(--text-strong);
    box-shadow: inset 0 0 0 100px #141a4a;
  }
  :root[data-theme="dark"] .field input:-webkit-autofill:focus {
    box-shadow: inset 0 0 0 100px #141a4a, 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
  }

  /* Footer: a shade darker than the page, with a hairline, so it still reads as its own band. */
  :root[data-theme="dark"] body:not(.journey-page) .site-footer { background: #03051c; box-shadow: inset 0 1px 0 rgba(199, 203, 255, 0.08); }
}