/* ==========================================================================
   Hallmark PCB Services — Design System
   Navy · Copper · Warm White  |  Instrument Serif + Plus Jakarta Sans
   Author: design system v1.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted variable fonts. Self-hosting removes two third-party
   connections from the critical path and keeps the CSP tight.
   Satoshi — Indian Type Foundry, free for commercial use (Fontshare).
   Plus Jakarta Sans — Tokotype, SIL Open Font License 1.1.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi.woff2") format("woff2-variations"),
       url("../fonts/satoshi.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-italic.woff2") format("woff2-variations"),
       url("../fonts/satoshi-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/jakarta-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/jakarta-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer reset, tokens, base, layout, motion, components, sections, utilities;

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* --- Colour primitives ------------------------------------------------ */
    --ink-900: #06090e;
    --ink-800: #0e131b;
    --ink-700: #1b2330;
    --ink-600: #2d3846;
    --ink-500: #4a5665;
    --ink-400: #6d7887;
    --ink-300: #9aa4b1;
    --ink-200: #c7cdd6;
    --ink-100: #e5e9ef;
    --ink-050: #f1f3f7;

    --paper: #ffffff;
    --paper-warm: #f8f6f2;
    --paper-warm-2: #f2efe8;

    --brand-900: #08203c;
    --brand-800: #123a73;
    --brand-700: #1a4c93;
    --brand-600: #215fb5;
    --brand-500: #2e76d4;
    --brand-200: #bcd6f5;
    --brand-100: #e7f0fc;

    --copper-800: #713d10;
    --copper-700: #8f4e18;
    --copper-600: #b4652a;
    --copper-500: #ce7f3c;
    --copper-300: #e8bd92;
    --copper-100: #fbf1e6;

    --solder: #b9c2cc;

    /* --- Semantic --------------------------------------------------------- */
    --bg: var(--paper);
    --bg-alt: var(--paper-warm);
    --fg: var(--ink-900);
    --fg-soft: var(--ink-500);
    --fg-muted: var(--ink-400);
    --line: color-mix(in oklab, var(--ink-900) 12%, transparent);
    --line-soft: color-mix(in oklab, var(--ink-900) 7%, transparent);
    --line-strong: color-mix(in oklab, var(--ink-900) 22%, transparent);
    --accent: var(--copper-600);
    --accent-deep: var(--copper-800);
    --brand: var(--brand-800);

    /* --- Typography ------------------------------------------------------- */
    /* Display is a tight geometric grotesque — the register a precision
       manufacturer should speak in. Body stays humanist for long-form
       legibility. */
    --font-display: "Satoshi", "Plus Jakarta Sans", sans-serif;
    --font-sans: "Plus Jakarta Sans", "Satoshi", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    /* Fluid scale — 360px → 1600px viewport */
    --fs-hero: clamp(2.75rem, 1.2rem + 6.5vw, 6.75rem);
    --fs-d1: clamp(2.5rem, 1.35rem + 4.9vw, 6rem);
    /* Section headings sit in 4–7 column wells, so they cap lower than --fs-d1 */
    --fs-section: clamp(1.875rem, 1.1rem + 3.6vw, 4.5rem);
    --fs-d2: clamp(2rem, 1.34rem + 2.8vw, 4rem);
    --fs-d3: clamp(1.625rem, 1.28rem + 1.5vw, 2.75rem);
    --fs-h4: clamp(1.25rem, 1.11rem + 0.6vw, 1.625rem);
    --fs-h5: clamp(1.0625rem, 1.01rem + 0.24vw, 1.25rem);
    --fs-lead: clamp(1.0625rem, 0.98rem + 0.36vw, 1.375rem);
    --fs-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;
    --fs-eyebrow: 0.6875rem;

    --lh-tight: 0.94;
    --lh-snug: 1.08;
    --lh-heading: 1.16;
    --lh-body: 1.65;
    --lh-loose: 1.78;

    /* A grotesque needs tighter optical tracking at display sizes than a
       serif does, and it needs weight to carry the same authority. */
    --tracking-hero: -0.045em;
    --tracking-display: -0.034em;
    --tracking-tight: -0.016em;
    --tracking-eyebrow: 0.18em;

    --fw-display: 700;
    --fw-hero: 700;

    /* --- Space ------------------------------------------------------------ */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    /* Section rhythm — fluid.
       Note this is padding applied to BOTH edges, so the visible gap between
       two adjacent sections is roughly double the value. Keep that in mind
       before increasing it. */
    --section-y: clamp(2.5rem, 1.7rem + 2.6vw, 4.5rem);
    --section-y-lg: clamp(3.5rem, 2.4rem + 3.6vw, 6rem);
    --gutter: clamp(1.25rem, 0.7rem + 2vw, 3rem);

    /* --- Structure -------------------------------------------------------- */
    /* 84rem left ~22% of a 1600px screen as dead side margin, which read as
       emptiness rather than restraint. 92rem keeps a comfortable measure for
       prose (which is capped separately by --wrap-text / .measure) while
       letting grids and imagery actually use the screen. */
    --wrap: 92rem;      /* 1472px */
    --wrap-wide: 102rem;/* 1632px */
    --wrap-text: 46rem;
    --grid-cols: 12;
    --grid-gap: clamp(1rem, 0.4rem + 2vw, 2.5rem);

    --r-xs: 3px;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* --- Elevation — soft, layered, never heavy --------------------------- */
    --shadow-xs: 0 1px 2px -1px rgb(8 32 60 / 0.08), 0 2px 6px -2px rgb(8 32 60 / 0.06);
    --shadow-sm: 0 2px 4px -2px rgb(8 32 60 / 0.08), 0 6px 16px -6px rgb(8 32 60 / 0.09);
    --shadow-md: 0 4px 8px -4px rgb(8 32 60 / 0.08), 0 16px 40px -12px rgb(8 32 60 / 0.13);
    --shadow-lg: 0 8px 16px -8px rgb(8 32 60 / 0.1), 0 32px 72px -20px rgb(8 32 60 / 0.18);
    --shadow-glow: 0 24px 64px -24px rgb(33 95 181 / 0.35);

    /* --- Motion ----------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-fast: 180ms;
    --dur: 320ms;
    --dur-slow: 620ms;
    --dur-reveal: 900ms;

    /* --- Layers ----------------------------------------------------------- */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: 500;
    --z-drawer: 900;
    --z-top: 1000;

    color-scheme: light;
    scroll-padding-top: 6.5rem;
  }

  /* Dark surfaces re-map semantics so components need no variants */
  .on-dark {
    --bg: var(--brand-900);
    --bg-alt: var(--ink-900);
    --fg: #ffffff;
    --fg-soft: color-mix(in oklab, #ffffff 74%, var(--brand-900));
    --fg-muted: color-mix(in oklab, #ffffff 58%, var(--brand-900));
    --line: color-mix(in oklab, #ffffff 16%, transparent);
    --line-soft: color-mix(in oklab, #ffffff 9%, transparent);
    --line-strong: color-mix(in oklab, #ffffff 30%, transparent);
    --accent: var(--copper-500);
    color: var(--fg);
    background-color: var(--bg);
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
  }

  img, video { height: auto; }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button { background: none; border: 0; cursor: pointer; }

  p, h1, h2, h3, h4, h5, h6, li, dt, dd { overflow-wrap: break-word; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  a { color: inherit; }

  table { border-collapse: collapse; width: 100%; }

  :target { scroll-margin-block-start: 7rem; }

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

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

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
    color: var(--fg);
    background-color: var(--bg);
    font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5 {
    font-weight: 600;
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  .display,
  h1.display, h2.display, h3.display {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-snug);
  }

  h4, h5 {
    font-family: var(--font-sans);
    font-weight: 600;
  }

  /* Everything drawn in the display face, with the weight it wants.
     Kept in one place so the whole voice can be retuned from here. */
  .hero__title,
  .phero__title,
  .shead__title,
  .svc__title,
  .step__title,
  .case__title,
  .drawer__link,
  .stat__value,
  .hero__trust-value,
  .serif { font-weight: var(--fw-display); }

  .hero__title { font-weight: var(--fw-hero); }
  .footer__wordmark { font-weight: 800; }
  .quote__text { font-weight: 500; }
  .trusted__word { font-weight: 500; }

  p { text-wrap: pretty; }

  strong, b { font-weight: 600; }

  a:where(:not([class])) {
    color: var(--brand-700);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--dur-fast) var(--ease-out);
  }
  a:where(:not([class])):hover { color: var(--accent); }

  /* Dark surfaces: the default link blue is unreadable on navy. */
  .on-dark a:where(:not([class])),
  .cta-band a:where(:not([class])) { color: #fff; }
  .on-dark a:where(:not([class])):hover,
  .cta-band a:where(:not([class])):hover { color: var(--copper-300); }

  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }

  .on-dark :where(a, button, input, textarea, select, summary):focus-visible {
    outline-color: var(--copper-300);
  }
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .wrap--wide { max-width: var(--wrap-wide); }
  .wrap--text { max-width: var(--wrap-text); }
  .wrap--flush { padding-inline: 0; }

  .section {
    position: relative;
    padding-block: var(--section-y);
  }
  .section--lg { padding-block: var(--section-y-lg); }
  .section--top-0 { padding-block-start: 0; }
  .section--bottom-0 { padding-block-end: 0; }
  .section--warm { background: var(--paper-warm); }

  /* 12-column grid — the backbone of every asymmetric layout */
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  /* Each column is a named query container so type inside it can respond to
     the well it occupies, not just the viewport. Named (`col`) so nested
     grids don't accidentally answer a parent's query. */
  .grid > * { container: col / inline-size; }

  /* Below 60rem every grid child goes full width — the 12-column tracks
     stay in place, so a child that lost its span must be told explicitly. */
  @media (width < 60rem) {
    .grid > * { grid-column: 1 / -1; }
  }

  /* Tablet: opt in to a half-width child */
  @media (40rem <= width < 60rem) {
    .grid > .md-c-6 { grid-column: span 6; }
    .grid > .md-c-4 { grid-column: span 4; }
  }

  /* Desktop spans.
     Note: these set grid-column-END only. Using the `grid-column: span N`
     shorthand would put the span on the START edge, which any later
     `.start-N` rule would then overwrite — collapsing the item to one
     column. Setting the end edge lets .c-* and .start-* compose safely. */
  @media (width >= 60rem) {
    .c-1  { grid-column-end: span 1;  }
    .c-2  { grid-column-end: span 2;  }
    .c-3  { grid-column-end: span 3;  }
    .c-4  { grid-column-end: span 4;  }
    .c-5  { grid-column-end: span 5;  }
    .c-6  { grid-column-end: span 6;  }
    .c-7  { grid-column-end: span 7;  }
    .c-8  { grid-column-end: span 8;  }
    .c-9  { grid-column-end: span 9;  }
    .c-10 { grid-column-end: span 10; }
    .c-11 { grid-column-end: span 11; }
    .c-12 { grid-column-end: span 12; }
    .start-2  { grid-column-start: 2; }
    .start-3  { grid-column-start: 3; }
    .start-4  { grid-column-start: 4; }
    .start-5  { grid-column-start: 5; }
    .start-6  { grid-column-start: 6; }
    .start-7  { grid-column-start: 7; }
    .start-8  { grid-column-start: 8; }
    .start-9  { grid-column-start: 9; }
    .start-10 { grid-column-start: 10; }
  }

  .stack { display: flex; flex-direction: column; }
  .stack > * + * { margin-block-start: var(--stack-gap, var(--sp-4)); }
  .stack--2 { --stack-gap: var(--sp-2); }
  .stack--3 { --stack-gap: var(--sp-3); }
  .stack--6 { --stack-gap: var(--sp-6); }
  .stack--8 { --stack-gap: var(--sp-8); }
  .stack--12 { --stack-gap: var(--sp-12); }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--row-gap, var(--sp-4));
  }
  .row--between { justify-content: space-between; --row-gap: var(--sp-8); }
  .row--end { justify-content: flex-end; }
  .row--baseline { align-items: baseline; }
  .row--top { align-items: flex-start; }

  /* Auto-fit galleries driven by a min column width.
     Only safe when the item count divides evenly into whatever column count
     the viewport happens to produce — otherwise use .cols below. */
  .autofit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 17rem)), 1fr));
    gap: var(--grid-gap);
  }

  /* Deterministic column counts.
     `auto-fit` decides the column count from available width, so a set of six
     cards silently becomes 4+2 on a wide screen. These set the count
     explicitly per breakpoint, so the final row is never ragged. */
  .cols {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (width >= 40rem) {
    .cols { grid-template-columns: repeat(var(--cols-md, 2), minmax(0, 1fr)); }
  }
  @media (width >= 60rem) {
    .cols { grid-template-columns: repeat(var(--cols-lg, 3), minmax(0, 1fr)); }
  }
}

/* ==========================================================================
   MOTION — reveals, parallax, marquee, grain
   ========================================================================== */
@layer motion {
  /* Page-load curtain reveal */
  .page-veil {
    position: fixed;
    inset: 0;
    z-index: var(--z-top);
    background: var(--brand-900);
    pointer-events: none;
    transform-origin: top;
    animation: veil-lift 1000ms var(--ease-out) 120ms forwards;
  }
  .page-veil__mark {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    opacity: 0;
    animation: veil-mark 900ms var(--ease-out) forwards;
  }
  @keyframes veil-lift {
    to { transform: translateY(-101%); }
  }
  @keyframes veil-mark {
    0%   { opacity: 0; scale: 0.9; }
    45%  { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 1.02; }
  }

  /* Scroll reveals — JS toggles .is-in.
     Scoped to .js (set by an inline script in <head>) so that if scripting is
     unavailable or app.js fails to load, nothing is left stuck at opacity 0. */
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--reveal-y, 26px), 0);
    transition:
      opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
      transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
      clip-path var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .js [data-reveal="left"]  { --reveal-y: 0; transform: translate3d(-32px, 0, 0); }
  .js [data-reveal="right"] { --reveal-y: 0; transform: translate3d(32px, 0, 0); }
  .js [data-reveal="scale"] { --reveal-y: 18px; scale: 0.97; }
  .js [data-reveal="scale"].is-in { scale: 1; }
  .js [data-reveal="clip"] {
    --reveal-y: 0;
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }
  .js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }

  /* Line-by-line heading reveal (JS splits into .rl > span) */
  .reveal-lines .rl { display: block; overflow: hidden; }
  .reveal-lines .rl > span {
    display: block;
    transform: translateY(105%);
    transition: transform 1000ms var(--ease-out) var(--rl-delay, 0ms);
  }
  .reveal-lines.is-in .rl > span { transform: none; }

  /* Stagger helper */
  [data-stagger] > * { --reveal-delay: calc(var(--i, 0) * 90ms); }

  /* Subtle parallax — JS writes --py */
  [data-parallax] {
    translate: 0 var(--py, 0px);
    will-change: translate;
  }

  /* Floating decorative elements */
  .float { animation: float 9s var(--ease-in-out) infinite; }
  .float--slow { animation-duration: 13s; }
  .float--delay { animation-delay: -4s; }
  @keyframes float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -14px; }
  }

  /* Marquee — duplicated track, paused on hover */
  .marquee {
    --marquee-dur: 42s;
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee__track {
    display: flex;
    flex-shrink: 0;
    gap: var(--marquee-gap, clamp(2.5rem, 5vw, 5.5rem));
    padding-inline-end: var(--marquee-gap, clamp(2.5rem, 5vw, 5.5rem));
    align-items: center;
    animation: marquee var(--marquee-dur) linear infinite;
  }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee--reverse .marquee__track { animation-direction: reverse; }
  @keyframes marquee {
    to { transform: translateX(-100%); }
  }

  /* Animated PCB trace path */
  .trace-path {
    stroke-dasharray: 4 6;
    animation: trace-flow 2.4s linear infinite;
  }
  @keyframes trace-flow {
    to { stroke-dashoffset: -20; }
  }
  .trace-draw {
    stroke-dasharray: var(--len, 1200);
    stroke-dashoffset: var(--len, 1200);
    animation: trace-draw 3.2s var(--ease-out) forwards;
  }
  @keyframes trace-draw {
    to { stroke-dashoffset: 0; }
  }

  .pulse-dot { animation: pulse-dot 2.6s var(--ease-in-out) infinite; }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; scale: 1; }
    50%      { opacity: 0.35; scale: 0.82; }
  }

  /* Film grain — SVG turbulence, no image request */
  .grain::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.4;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
  }
  .on-dark.grain::after,
  .grain--light::after {
    mix-blend-mode: overlay;
    opacity: 0.5;
  }

  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal],
    [data-reveal],
    .reveal-lines .rl > span {
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
      scale: 1 !important;
    }
    .page-veil { display: none; }
    .marquee__track { animation: none; }
    .float, .trace-path, .trace-draw, .pulse-dot { animation: none; }
    .trace-draw { stroke-dashoffset: 0; }
    [data-parallax] { translate: none; }
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* --- Eyebrow / section label ----------------------------------------- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--fg-muted);
    line-height: 1;
  }
  .eyebrow::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 1px;
    background: currentColor;
    opacity: 0.5;
  }
  .eyebrow--index::before { display: none; }
  .eyebrow__num {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.75rem;
    letter-spacing: 0;
  }
  .eyebrow--plain::before { display: none; }

  /* --- Buttons ---------------------------------------------------------- */
  .btn {
    --btn-bg: var(--brand-800);
    --btn-fg: #fff;
    --btn-border: var(--brand-800);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: 0.95rem 1.75rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--btn-border);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    overflow: hidden;
    isolation: isolate;
    transition:
      transform var(--dur) var(--ease-out),
      box-shadow var(--dur) var(--ease-out),
      color var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out);
  }
  /* Wipe fill on hover */
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-hover-bg, var(--accent));
    transform: translateY(101%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .btn:hover::before,
  .btn:focus-visible::before { transform: translateY(0); }
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--btn-hover-bg, var(--accent));
  }
  .btn:active { transform: translateY(0); }

  .btn__icon {
    inline-size: 1rem;
    block-size: 1rem;
    flex: none;
    transition: translate var(--dur) var(--ease-out);
  }
  .btn:hover .btn__icon { translate: 3px 0; }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--fg);
    --btn-border: var(--line-strong);
    --btn-hover-bg: var(--brand-800);
  }
  .btn--ghost:hover { color: #fff; }

  .btn--light {
    --btn-bg: #fff;
    --btn-fg: var(--brand-900);
    --btn-border: #fff;
    --btn-hover-bg: var(--copper-500);
  }
  .btn--copper {
    --btn-bg: var(--copper-600);
    --btn-fg: #fff;
    --btn-border: var(--copper-600);
    --btn-hover-bg: var(--brand-800);
  }
  .btn--lg { padding: 1.15rem 2.25rem; font-size: var(--fs-body); }
  .btn--sm { padding: 0.7rem 1.25rem; font-size: var(--fs-xs); }
  .btn--block { width: 100%; }

  /* Text link with animated rule */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--fg);
    padding-block-end: 0.35rem;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--dur-slow) var(--ease-out), color var(--dur) var(--ease-out);
  }
  .link-arrow:hover {
    background-size: 100% 1px;
    color: var(--accent);
  }
  .link-arrow svg {
    inline-size: 0.95rem;
    block-size: 0.95rem;
    transition: translate var(--dur) var(--ease-out);
  }
  .link-arrow:hover svg { translate: 4px 0; }

  /* --- Pills / chips ---------------------------------------------------- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    font-size: var(--fs-xs);
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--fg-soft);
    background: color-mix(in oklab, var(--bg) 90%, var(--paper-warm));
    white-space: nowrap;
  }
  .chip--accent {
    border-color: color-mix(in oklab, var(--accent) 35%, transparent);
    color: var(--accent-deep);
    background: var(--copper-100);
  }
  .on-dark .chip--accent {
    color: var(--copper-300);
    background: color-mix(in oklab, var(--copper-600) 18%, transparent);
  }
  .chip__dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
  }

  /* --- Rules ------------------------------------------------------------ */
  .rule {
    border: 0;
    block-size: 1px;
    background: var(--line);
  }
  .rule--soft { background: var(--line-soft); }

  /* --- Card ------------------------------------------------------------- */
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 1rem + 1.4vw, 2.5rem);
    transition:
      transform var(--dur-slow) var(--ease-out),
      box-shadow var(--dur-slow) var(--ease-out),
      border-color var(--dur-slow) var(--ease-out);
  }
  .card--hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklab, var(--brand-600) 25%, transparent);
  }
  .card__num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    letter-spacing: 0.04em;
  }
  .card__title {
    font-size: var(--fs-h4);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
  }
  .card__text {
    color: var(--fg-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
  }

  /* --- Media frame ------------------------------------------------------ */
  .frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-warm-2);
    isolation: isolate;
  }
  /* Descendant (not child) selectors: the build wraps images in <picture> to
     serve WebP, so the <img> is no longer a direct child of .frame. */
  .frame picture { display: contents; }
  .frame img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale 1.1s var(--ease-out);
  }
  .frame--zoom:hover img { scale: 1.05; }
  .frame--tall { aspect-ratio: 3 / 4; }
  .frame--portrait { aspect-ratio: 4 / 5; }
  .frame--square { aspect-ratio: 1; }
  .frame--wide { aspect-ratio: 16 / 10; }
  .frame--pano { aspect-ratio: 21 / 9; }
  /* Navy tint keeps mixed stock photography looking like one set */
  .frame--tint::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgb(8 32 60 / 0.34), rgb(8 32 60 / 0.06) 55%, rgb(180 101 42 / 0.14));
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  .frame__caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 3;
    padding: var(--sp-6);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    background: linear-gradient(transparent, rgb(6 9 14 / 0.72));
  }

  /* --- Spec table ------------------------------------------------------- */
  .spec-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    -webkit-overflow-scrolling: touch;
  }
  .spec {
    /* Narrow enough to fit a 6-column panel on a laptop without scrolling,
       but the wrapper still scrolls on very small screens. */
    min-inline-size: 22rem;
    font-size: var(--fs-sm);
  }
  .spec caption {
    text-align: start;
    padding: var(--sp-5) var(--sp-6) 0;
    font-size: var(--fs-xs);
    color: var(--fg-muted);
  }
  .spec th,
  .spec td {
    text-align: start;
    padding: 0.85rem 1rem;
    border-block-end: 1px solid var(--line-soft);
    vertical-align: top;
  }
  .spec thead th {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--fg-muted);
    background: var(--paper-warm);
    border-block-end-color: var(--line);
    position: sticky;
    inset-block-start: 0;
  }
  .spec tbody th {
    font-weight: 600;
    color: var(--fg);
    inline-size: 36%;
  }
  .spec tbody td {
    color: var(--fg-soft);
    font-family: var(--font-mono);
    font-size: 0.78125rem;
    line-height: 1.7;
  }
  .spec tbody tr:last-child :is(th, td) { border-block-end: 0; }
  .spec tbody tr { transition: background var(--dur-fast) var(--ease-out); }
  .spec tbody tr:hover { background: var(--brand-100); }

  /* --- Accordion (FAQ) -------------------------------------------------- */
  .acc { border-block-start: 1px solid var(--line); }
  .acc__item { border-block-end: 1px solid var(--line); }
  .acc__btn {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-6);
    inline-size: 100%;
    padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.75rem) 0;
    text-align: start;
    font-family: var(--font-sans);
    font-size: var(--fs-h5);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
    transition: color var(--dur) var(--ease-out);
  }
  .acc__btn:hover { color: var(--brand-700); }
  .acc__btn[aria-expanded="true"] { color: var(--brand-800); }
  .acc__sign {
    position: relative;
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin-block-start: 0.15rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), rotate var(--dur-slow) var(--ease-out);
  }
  .acc__sign::before,
  .acc__sign::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    background: currentColor;
    transition: opacity var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  }
  .acc__sign::before { inline-size: 9px; block-size: 1px; }
  .acc__sign::after  { inline-size: 1px; block-size: 9px; }
  .acc__btn[aria-expanded="true"] .acc__sign {
    background: var(--brand-800);
    border-color: var(--brand-800);
    color: #fff;
    rotate: 90deg;
  }
  .acc__btn[aria-expanded="true"] .acc__sign::after { opacity: 0; }
  .acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out);
  }
  .acc__panel[data-open] { grid-template-rows: 1fr; }
  .acc__panel > div { overflow: hidden; }
  .acc__body {
    max-inline-size: 58ch;
    padding-block-end: var(--sp-8);
    color: var(--fg-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
  }
  .acc__body > * + * { margin-block-start: var(--sp-4); }

  /* --- Tabs ------------------------------------------------------------- */
  .tabs__list {
    display: flex;
    flex-direction: column;
    border-block-start: 1px solid var(--line);
  }
  .tabs__tab {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: clamp(0.9rem, 0.7rem + 0.5vw, 1.35rem) var(--sp-4) clamp(0.9rem, 0.7rem + 0.5vw, 1.35rem) 0;
    border-block-end: 1px solid var(--line);
    text-align: start;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--fg-muted);
    transition: color var(--dur) var(--ease-out), padding-inline-start var(--dur) var(--ease-out);
  }
  .tabs__tab:hover { color: var(--fg); padding-inline-start: var(--sp-3); }
  .tabs__tab[aria-selected="true"] {
    color: var(--fg);
    padding-inline-start: var(--sp-3);
  }
  .tabs__tab-num {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--accent);
    flex: none;
  }
  .tabs__tab[aria-selected="true"] .tabs__tab-bar {
    scale: 1 1;
  }
  .tabs__tab-bar {
    margin-inline-start: auto;
    inline-size: 1.5rem;
    block-size: 1px;
    background: var(--accent);
    transform-origin: right;
    scale: 0 1;
    transition: scale var(--dur-slow) var(--ease-out);
  }
  .tabs__panel[hidden] { display: none; }

  /* --- Stat ------------------------------------------------------------- */
  .stat__value {
    font-family: var(--font-display);
    font-size: var(--fs-d2);
    line-height: 0.9;
    letter-spacing: var(--tracking-display);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
  }
  .stat__value sup {
    font-family: var(--font-sans);
    font-size: 0.48em;
    font-weight: 700;
    /* `super` puts it too high once it is this large — nudge it manually so it
       sits against the cap height of the numeral. */
    vertical-align: baseline;
    position: relative;
    inset-block-start: -0.42em;
    color: var(--accent);
    letter-spacing: 0;
  }
  .stat__label {
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
    text-transform: uppercase;
  }

  /* --- Process step ----------------------------------------------------- */
  .step {
    position: relative;
    padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 3rem);
    border-block-start: 1px solid var(--line);
  }
  .step__index {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
  }
  .step__title {
    font-size: var(--fs-d3);
    font-family: var(--font-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-snug);
    transition: translate var(--dur-slow) var(--ease-out);
  }
  .step:hover .step__title { translate: 8px 0; }
  .step__body { color: var(--fg-soft); font-size: var(--fs-sm); line-height: var(--lh-loose); }

  /* --- Checklist -------------------------------------------------------- */
  /* The marker is absolutely positioned rather than a grid/flex track. A grid
     track would turn any inline child (<strong>, <code>, <a>) into its own
     grid item and push the rest of the sentence onto a new row. */
  .checks { display: grid; gap: var(--sp-4); }
  .checks li {
    position: relative;
    padding-inline-start: 2.2rem;
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--fg-soft);
  }
  .checks li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.3rem;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    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='%23b4652a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.85rem no-repeat,
      var(--copper-100);
  }
  .checks li strong { color: var(--fg); }
  .checks li code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    padding: 0.1em 0.35em;
    border-radius: var(--r-xs);
    background: var(--paper-warm-2);
    color: var(--fg);
  }
  .on-dark .checks li::before {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8bd92' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.85rem no-repeat,
      color-mix(in oklab, var(--copper-500) 20%, transparent);
  }
  .on-dark .checks li code { background: color-mix(in oklab, #fff 12%, transparent); }

  /* --- Form ------------------------------------------------------------- */
  .field { display: grid; gap: var(--sp-2); }
  .field__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }
  .field__req { color: var(--accent); }
  .field__hint { font-size: var(--fs-xs); color: var(--fg-muted); }
  .input,
  .select,
  .textarea {
    inline-size: 100%;
    padding: 0.9rem 1.1rem;
    font-size: var(--fs-sm);
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }
  .textarea { min-block-size: 8.5rem; resize: vertical; line-height: var(--lh-body); }
  .select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7887' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    padding-inline-end: 2.75rem;
  }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
  .input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px var(--brand-100);
  }
  .input::placeholder, .textarea::placeholder { color: var(--ink-300); }

  /* --- Testimonial ------------------------------------------------------ */
  .quote {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    padding: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    background: var(--bg);
    block-size: 100%;
  }
  .quote__mark {
    font-family: var(--font-display);
    font-size: 3.5rem;
    line-height: 0.6;
    color: var(--copper-300);
  }
  .quote__text {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: 1.45;
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
    flex: 1;
  }
  .quote__cite {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-style: normal;
    padding-block-start: var(--sp-6);
    border-block-start: 1px solid var(--line-soft);
  }
  .quote__avatar {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--brand-900);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .quote__name { font-size: var(--fs-sm); font-weight: 600; }
  .quote__role { font-size: var(--fs-xs); color: var(--fg-muted); }

  /* --- Badge (certification) -------------------------------------------- */
  .badge {
    display: grid;
    gap: var(--sp-4);
    padding: clamp(1.25rem, 1rem + 0.8vw, 1.85rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--bg);
    transition: border-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .badge:hover {
    border-color: color-mix(in oklab, var(--accent) 40%, transparent);
    transform: translateY(-4px);
  }
  .badge__icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--brand-100);
    color: var(--brand-800);
  }
  .on-dark .badge__icon {
    background: color-mix(in oklab, #fff 12%, transparent);
    color: var(--copper-300);
  }
  .badge__title { font-size: var(--fs-h5); font-weight: 600; }
  .badge__text { font-size: var(--fs-xs); color: var(--fg-soft); line-height: var(--lh-loose); }

  /* --- Skip link -------------------------------------------------------- */
  .skip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--sp-4);
    z-index: var(--z-top);
    padding: 0.75rem 1.25rem;
    background: var(--brand-900);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    translate: 0 -110%;
    transition: translate var(--dur) var(--ease-out);
  }
  .skip:focus { translate: 0 0; }
}

/* ==========================================================================
   SITE SECTIONS
   ========================================================================== */
@layer sections {

  /* --- Announcement bar ------------------------------------------------- */
  .topbar {
    position: relative;
    z-index: calc(var(--z-header) + 1);
    background: var(--brand-900);
    color: #eef2f7;
    font-size: var(--fs-xs);
    font-weight: 500;
  }
  .topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    min-block-size: 2.75rem;
    padding-block: 0.4rem;
  }
  .topbar__list { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
  /* Must set colour explicitly: the base `a:where(:not([class]))` rule would
     otherwise paint these dark blue on a navy bar. */
  .topbar a {
    color: #ffffff;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .topbar a:hover,
  .topbar a:focus-visible { color: var(--copper-300); }
  .topbar__item { display: inline-flex; align-items: center; gap: 0.5rem; }
  .topbar svg { inline-size: 0.875rem; block-size: 0.875rem; color: var(--copper-300); flex: none; }
  @media (width < 60rem) {
    .topbar__hide-sm { display: none; }
  }

  /* --- Header ----------------------------------------------------------- */
  .header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: color-mix(in oklab, var(--paper) 82%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    border-block-end: 1px solid transparent;
    transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }
  .header.is-stuck {
    border-block-end-color: var(--line-soft);
    background: color-mix(in oklab, var(--paper) 98%, transparent);
    box-shadow: var(--shadow-xs);
  }
  /* Without backdrop-filter the glass effect would leave text unreadable */
  @supports not (backdrop-filter: blur(1px)) {
    .header { background: var(--paper); }
  }
  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    min-block-size: 4.75rem;
  }
  .brand { display: inline-flex; align-items: center; flex: none; }
  .brand img { block-size: clamp(2rem, 1.6rem + 1.1vw, 2.6rem); width: auto; }

  .nav { display: none; }
  @media (width >= 64rem) {
    .nav { display: flex; align-items: center; gap: clamp(0.25rem, 0.6vw, 0.9rem); }
  }
  .nav__item { position: relative; }
  .nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
    color: var(--fg-soft);
    border-radius: var(--r-sm);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .nav__link:hover,
  .nav__item:hover > .nav__link { color: var(--fg); }
  .nav__link[aria-current="page"] { color: var(--brand-800); font-weight: 600; }
  .nav__caret {
    inline-size: 0.7rem;
    block-size: 0.7rem;
    opacity: 0.5;
    transition: rotate var(--dur) var(--ease-out);
  }
  .nav__item:hover .nav__caret { rotate: 180deg; }

  .nav__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    min-inline-size: 34rem;
    padding: var(--sp-5);
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      visibility var(--dur);
  }
  .nav__item:hover > .nav__panel,
  .nav__item:focus-within > .nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
  }
  .nav__panel-link {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .nav__panel-link:hover { background: var(--paper-warm); }
  .nav__panel-link strong { font-size: var(--fs-sm); font-weight: 600; display: block; }
  .nav__panel-link span { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.5; }
  .nav__panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-block-start: var(--sp-4);
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--line-soft);
  }

  .header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
  .header__cta { display: none; }
  @media (width >= 48rem) { .header__cta { display: inline-flex; } }

  /* Burger */
  .burger {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    flex: none;
  }
  @media (width >= 64rem) { .burger { display: none; } }
  .burger__lines { position: relative; inline-size: 1.05rem; block-size: 0.7rem; }
  .burger__lines::before,
  .burger__lines::after,
  .burger__lines span {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 1.5px;
    background: var(--fg);
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  .burger__lines::before { inset-block-start: 0; }
  .burger__lines span { inset-block-start: 50%; translate: 0 -50%; }
  .burger__lines::after { inset-block-end: 0; }
  .burger[aria-expanded="true"] .burger__lines::before { transform: translateY(5.5px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__lines span { opacity: 0; }
  .burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-5.5px) rotate(-45deg); }

  /* Mobile drawer */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--paper);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2%);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
  }
  .drawer[data-open] { opacity: 1; visibility: visible; transform: none; }
  .drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 4.75rem;
    border-block-end: 1px solid var(--line-soft);
  }
  .drawer__close {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
  }
  .drawer__close svg { inline-size: 1rem; block-size: 1rem; }
  .drawer__body { padding-block: var(--sp-6) var(--sp-10); }
  .drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.9rem;
    border-block-end: 1px solid var(--line-soft);
    font-family: var(--font-display);
    font-size: var(--fs-d3);
    letter-spacing: var(--tracking-display);
    text-decoration: none;
    color: var(--fg);
  }
  .drawer__sub {
    display: grid;
    gap: 0.1rem;
    padding-block: var(--sp-4) var(--sp-6);
  }
  .drawer__sub a {
    padding-block: 0.55rem;
    font-size: var(--fs-sm);
    color: var(--fg-soft);
    text-decoration: none;
  }
  .drawer__sub a::before { content: "— "; color: var(--accent); }
  .drawer__foot {
    padding-block: var(--sp-6);
    border-block-start: 1px solid var(--line-soft);
    background: var(--paper-warm);
  }
  body[data-lock] { overflow: hidden; }

  /* --- HERO ------------------------------------------------------------- */
  .hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(2.75rem, 1.3rem + 5vw, 6rem) clamp(2.5rem, 1.2rem + 3.6vw, 5rem);
    background:
      radial-gradient(120% 90% at 88% 4%, var(--brand-100) 0%, transparent 58%),
      radial-gradient(80% 70% at 4% 96%, var(--copper-100) 0%, transparent 55%),
      var(--paper);
    overflow: clip;
  }
  /* Layered blueprint grid + traces */
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  /* Wave field — canvas injected by wavefield.js */
  .wavefield {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* Strong on the right, softened behind the headline so type stays crisp */
    mask-image:
      linear-gradient(100deg, rgb(0 0 0 / 0.18) 0%, rgb(0 0 0 / 0.4) 34%, #000 62%, #000 100%),
      radial-gradient(130% 115% at 72% 45%, #000 40%, rgb(0 0 0 / 0.5) 74%, transparent 96%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
  .wavefield__canvas {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .hero__grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, color-mix(in oklab, var(--brand-800) 7%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in oklab, var(--brand-800) 7%, transparent) 1px, transparent 1px);
    background-size: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5.5rem);
    mask-image: radial-gradient(115% 85% at 70% 15%, #000 20%, transparent 72%);
  }
  .hero__traces { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

  .hero__inner { position: relative; z-index: 1; }
  .hero__eyebrow { margin-block-end: clamp(1.25rem, 1rem + 1vw, 2.25rem); }
  .hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-hero);
    text-wrap: balance;
  }
  .hero__title em {
    font-style: italic;
    color: var(--brand-800);
    position: relative;
  }
  .hero__title .accent { color: var(--accent); font-style: italic; }
  .hero__lead {
    max-inline-size: 40ch;
    margin-block-start: clamp(1.5rem, 1rem + 1.4vw, 2.5rem);
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--fg-soft);
  }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-block-start: clamp(2rem, 1.4rem + 1.8vw, 3.25rem);
  }
  .hero__trust {
    margin-block-start: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
    padding-block-start: var(--sp-6);
    border-block-start: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--sp-6);
  }
  .hero__trust-item { display: grid; gap: 0.3rem; }
  .hero__trust-value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
    line-height: 1;
    letter-spacing: var(--tracking-display);
  }
  .hero__trust-value sup {
    font-family: var(--font-sans);
    font-size: 0.5em;
    color: var(--accent);
    font-weight: 700;
    vertical-align: baseline;
    position: relative;
    inset-block-start: -0.4em;
  }
  /* Word units ("hr", "MOQ") need air; the "+" glyph must stay tight */
  .hero__trust-value sup.unit,
  .stat__value sup.unit { margin-inline-start: 0.18em; letter-spacing: 0.04em; }
  .hero__trust-label { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.4; }

  /* Hero visual — layered, overlapping, floating */
  .hero__visual { position: relative; }
  .hero__visual-main {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 5;
  }
  .hero__visual-main img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    scale: 1.02;
  }
  /* --- Hero carousel ---------------------------------------------------
     Slides are stacked; only opacity/scale animate, so it composites on the
     GPU and never triggers layout. A slide may hold an <img> or a <video>. */
  /* Timings are proportioned to the 3s slide interval: the crossfade takes
     roughly a fifth of it, and the drift completes just inside the window. */
  .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    scale: 1.045;
    transition:
      opacity 650ms var(--ease-out),
      scale 3400ms linear;
    will-change: opacity, scale;
  }
  .hero__slide[data-active] {
    opacity: 1;
    scale: 1;
    /* Slow Ken Burns drift while the slide is the active one */
    transition: opacity 650ms var(--ease-out), scale 3600ms linear;
  }
  .hero__slide :is(img, video) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  /* Progress dots */
  .hero__dots {
    position: absolute;
    z-index: 4;
    inset-block-end: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    display: flex;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--r-pill);
    background: rgb(6 9 14 / 0.32);
    backdrop-filter: blur(10px);
  }
  .hero__dot {
    position: relative;
    inline-size: 1.6rem;
    block-size: 3px;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.32);
    overflow: hidden;
    cursor: pointer;
    transition: background var(--dur) var(--ease-out);
  }
  .hero__dot:hover { background: rgb(255 255 255 / 0.5); }
  .hero__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--copper-500);
    transform-origin: left;
    scale: 0 1;
  }
  /* The fill animation doubles as the slide timer's visual readout */
  .hero__dot[aria-current="true"]::after {
    animation: dot-fill var(--slide-ms, 5000ms) linear forwards;
  }
  .hero__dots[data-paused] .hero__dot[aria-current="true"]::after {
    animation-play-state: paused;
  }
  @keyframes dot-fill { to { scale: 1 1; } }

  @media (prefers-reduced-motion: reduce) {
    .hero__slide { transition: none; scale: 1; }
    .hero__dot[aria-current="true"]::after { animation: none; scale: 1 1; }
  }

  .hero__visual-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(195deg, rgb(8 32 60 / 0.42), rgb(8 32 60 / 0.05) 50%, rgb(180 101 42 / 0.2));
    mix-blend-mode: multiply;
  }
  .hero__chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.8rem 1.1rem;
    background: color-mix(in oklab, var(--paper) 92%, transparent);
    backdrop-filter: blur(14px);
    border: 1px solid color-mix(in oklab, #fff 60%, transparent);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-xs);
    line-height: 1.3;
  }
  .hero__chip strong { display: block; font-size: var(--fs-sm); font-weight: 700; }
  .hero__chip span { color: var(--fg-muted); }
  .hero__chip--a { inset-block-start: 8%; inset-inline-start: -6%; }
  .hero__chip--b { inset-block-end: 12%; inset-inline-end: -5%; }
  .hero__chip-icon {
    display: grid;
    place-items: center;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    flex: none;
    border-radius: var(--r-xs);
    background: var(--brand-100);
    color: var(--brand-800);
  }
  .hero__chip-icon svg { inline-size: 1.1rem; block-size: 1.1rem; }
  @media (width < 60rem) {
    .hero__chip--a { inset-inline-start: 4%; }
    .hero__chip--b { inset-inline-end: 4%; }
    .hero__visual { margin-block-start: var(--sp-12); }
  }

  /* --- Trusted by / marquee -------------------------------------------- */
  .trusted { padding-block: clamp(2.5rem, 2rem + 2vw, 4.5rem); border-block: 1px solid var(--line-soft); }
  .trusted__label {
    text-align: center;
    margin-block-end: var(--sp-8);
  }
  .trusted__logo {
    block-size: clamp(1.6rem, 1.3rem + 1vw, 2.4rem);
    inline-size: auto;
    opacity: 0.5;
    filter: grayscale(1);
    transition: opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
  }
  .trusted__logo:hover { opacity: 1; filter: none; }
  .trusted__word {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.6rem);
    color: var(--ink-300);
    white-space: nowrap;
    letter-spacing: var(--tracking-tight);
    transition: color var(--dur) var(--ease-out);
  }
  .trusted__word:hover { color: var(--brand-800); }

  /* --- Section heading pattern ----------------------------------------- */
  .shead { display: grid; gap: var(--sp-6); }
  .shead__title {
    font-family: var(--font-display);
    font-size: var(--fs-section);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-display);
    max-inline-size: 24ch;
  }
  /* Grid columns are query containers (see layout layer), so a heading dropped
     into a narrow 4-column rail scales to the well it actually sits in rather
     than to the viewport. Stops two-word headings breaking one word per line. */
  @container col (inline-size < 27rem) {
    .shead__title,
    .phero__title { font-size: clamp(1.5rem, 8.5cqi, 2.5rem); }
    .step__title,
    .svc__title,
    .case__title { font-size: clamp(1.375rem, 7.5cqi, 2rem); }
  }
  .shead__title em { font-style: italic; color: var(--brand-800); }
  .shead__lead {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--fg-soft);
    max-inline-size: 48ch;
  }

  /* --- Products / services index --------------------------------------- */
  .svc-list { border-block-start: 1px solid var(--line); }
  .svc {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-6);
    align-items: center;
    padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
    border-block-end: 1px solid var(--line);
    text-decoration: none;
    isolation: isolate;
    overflow: hidden;
  }
  @media (width >= 60rem) {
    .svc { grid-template-columns: 5rem minmax(0, 1.1fr) minmax(0, 1.35fr) auto; gap: var(--grid-gap); }
  }
  .svc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--paper-warm);
    transform: translateY(101%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .svc:hover::before { transform: none; }
  .svc__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); }
  .svc__title {
    font-family: var(--font-display);
    font-size: var(--fs-d3);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-snug);
    transition: translate var(--dur-slow) var(--ease-out);
  }
  .svc:hover .svc__title { translate: 10px 0; }
  .svc__text { color: var(--fg-soft); font-size: var(--fs-sm); line-height: var(--lh-loose); }
  .svc__go {
    display: grid;
    place-items: center;
    inline-size: 2.9rem;
    block-size: 2.9rem;
    flex: none;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--fg);
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), rotate var(--dur-slow) var(--ease-out);
  }
  .svc__go svg { inline-size: 1rem; block-size: 1rem; }
  .svc:hover .svc__go {
    background: var(--brand-800);
    border-color: var(--brand-800);
    color: #fff;
    rotate: 45deg;
  }
  /* Cursor-tracked preview.
     Lives on the list, not the row: each .svc is `overflow: hidden` for the
     hover wipe, which clipped a per-row thumbnail to the row's height. One
     shared element also means one rAF loop and one set of decoded images. */
  .svc-list { position: relative; }
  .svc-peek {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 5;
    inline-size: clamp(11rem, 13vw, 15.5rem);
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    scale: 0.85;
    box-shadow: var(--shadow-lg);
    transition:
      opacity 300ms var(--ease-out),
      scale 460ms var(--ease-spring);
    will-change: transform, opacity;
  }
  .svc-peek[data-on] { opacity: 1; scale: 1; }
  .svc-peek img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
  @media (width < 75rem) { .svc-peek { display: none; } }

  /* --- Capabilities: overlapping asymmetric composition ---------------- */
  .cap { position: relative; }
  /* align-self:start stops this grid item stretching to the (much taller)
     text column. Without it the overlapping square below is positioned
     against the stretched box and lands hundreds of pixels off the image. */
  .cap__media { position: relative; align-self: start; }
  .cap__media-b {
    position: absolute;
    inset-block-end: -14%;
    inset-inline-end: -12%;
    inline-size: 54%;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 6px solid var(--paper);
  }
  @media (width < 60rem) {
    .cap__media-b { position: static; inline-size: 100%; margin-block-start: var(--sp-6); border: 0; }
  }
  .cap__panel {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.75rem);
    box-shadow: var(--shadow-sm);
  }

  /* --- Process: signal path --------------------------------------------
     The six gates sit on a PCB trace as vias. A copper fill advances with
     scroll (JS writes --p, 0→1) and each via lights as the path reaches it,
     so the graphic reads as current flowing through the process. */
  .track {
    --rail: 3.5rem;          /* width of the rail column */
    --node: 1.25rem;
    position: relative;
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  }

  /* The trace itself, plus the energised overlay */
  .track::before,
  .track::after {
    content: "";
    position: absolute;
    inset-block: 1.2rem;
    inline-size: 2px;
    border-radius: 2px;
  }
  .track::before {
    inset-inline-start: calc(var(--rail) / 2 - 1px);
    background: repeating-linear-gradient(
      to bottom,
      var(--line-strong) 0 6px,
      transparent 6px 12px
    );
  }
  .track::after {
    inset-inline-start: calc(var(--rail) / 2 - 1px);
    background: linear-gradient(to bottom, var(--brand-600), var(--copper-500));
    transform-origin: top;
    scale: 1 var(--p, 0);
    transition: scale 120ms linear;
  }
  @media (width >= 60rem) {
    .track { --rail: 7rem; }
    .track::before,
    .track::after { inset-inline-start: calc(50% - 1px); }
  }

  .track__step {
    position: relative;
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    align-items: start;
  }
  @media (width >= 60rem) {
    .track__step { grid-template-columns: minmax(0, 1fr) var(--rail) minmax(0, 1fr); }
    /* Zigzag: odd gates sit left of the trace, even gates right */
    .track__step:nth-child(odd)  .track__card { grid-column: 1; text-align: end; }
    .track__step:nth-child(even) .track__card { grid-column: 3; }
    .track__step:nth-child(odd)  .track__out { justify-content: flex-end; }
    .track__node { grid-column: 2; }
  }

  /* Via / test point */
  .track__node {
    position: relative;
    z-index: 2;
    justify-self: center;
    inline-size: var(--node);
    block-size: var(--node);
    margin-block-start: 0.55rem;
    border-radius: 50%;
    background: var(--bg, #fff);
    border: 2px solid var(--line-strong);
    display: grid;
    place-items: center;
    transition: border-color 420ms var(--ease-out), scale 420ms var(--ease-spring);
  }
  .track__node::after {
    content: "";
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: 50%;
    background: var(--line-strong);
    transition: background 420ms var(--ease-out);
  }
  .track__step.is-lit .track__node {
    border-color: var(--copper-500);
    scale: 1.15;
  }
  .track__step.is-lit .track__node::after { background: var(--copper-600); }
  /* Halo pulse on the gate the reader has just reached */
  .track__step.is-lit .track__node::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
    border-radius: 50%;
    border: 1px solid var(--copper-500);
    opacity: 0;
    animation: via-ping 1.6s var(--ease-out);
  }
  @keyframes via-ping {
    0%   { opacity: 0.7; scale: 0.6; }
    100% { opacity: 0;   scale: 1.25; }
  }

  .track__card { padding-block-end: var(--sp-4); }
  .track__gate {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    transition: color 420ms var(--ease-out);
  }
  .track__step.is-lit .track__gate { color: var(--accent); }
  .track__title {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: var(--fs-d3);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-snug);
    margin-block-start: var(--sp-2);
  }
  .track__body {
    color: var(--fg-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    margin-block-start: var(--sp-3);
    max-inline-size: 42ch;
  }
  .track__step:nth-child(odd) .track__body { margin-inline-start: auto; }
  @media (width < 60rem) {
    .track__step:nth-child(odd) .track__body { margin-inline-start: 0; }
  }

  /* What the customer actually receives at this gate */
  .track__out {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: var(--sp-4);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg);
    font-size: var(--fs-xs);
    color: var(--fg-soft);
  }
  .track__out svg {
    inline-size: 0.85rem;
    block-size: 0.85rem;
    color: var(--accent);
    flex: none;
  }
  .track__step:nth-child(odd) .track__card { display: flex; flex-direction: column; }
  @media (width >= 60rem) {
    .track__step:nth-child(odd) .track__card { align-items: flex-end; }
  }

  @media (prefers-reduced-motion: reduce) {
    .track::after { scale: 1 1; }
    .track__step { }
    .track__node { scale: 1; }
    .track__step.is-lit .track__node::before { animation: none; }
  }

  /* --- Diagonal / clipped panels --------------------------------------- */
  .slant-top {
    clip-path: polygon(0 clamp(1.5rem, 4vw, 5rem), 100% 0, 100% 100%, 0 100%);
    margin-block-start: calc(-1 * clamp(1.5rem, 4vw, 5rem));
    padding-block-start: calc(var(--section-y) + clamp(1.5rem, 4vw, 5rem));
  }
  .slant-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - clamp(1.5rem, 4vw, 5rem)));
    padding-block-end: calc(var(--section-y) + clamp(1.5rem, 4vw, 5rem));
  }

  /* Overlap: pull a block up over the previous section */
  .pull-up { margin-block-start: calc(-1 * clamp(3rem, 2rem + 4vw, 7rem)); position: relative; z-index: 5; }

  /* --- Stats band ------------------------------------------------------ */
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .stats__cell {
    display: grid;
    gap: var(--sp-3);
    padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
    background: var(--bg);
  }

  /* --- Industries ------------------------------------------------------ */
  .ind {
    display: grid;
    gap: var(--sp-4);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--bg);
    text-align: start;
    transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .ind:hover {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--brand-600) 30%, transparent);
    background: var(--brand-100);
  }
  .ind img {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    object-fit: contain;
  }
  .ind__name { font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--tracking-tight); }
  .ind__meta { font-size: var(--fs-xs); color: var(--fg-muted); }

  /* --- Image mosaic — carries meaning with almost no copy -------------- */
  .mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
  }
  @media (width >= 60rem) {
    .mosaic {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: clamp(9rem, 6rem + 8vw, 15rem);
    }
    .mosaic__cell--tall { grid-row: span 2; }
    .mosaic__cell--wide { grid-column: span 2; }
  }
  .mosaic__cell {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--paper-warm-2);
    min-block-size: 9rem;
    isolation: isolate;
  }
  .mosaic__cell img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale 1.2s var(--ease-out), filter 0.7s var(--ease-out);
  }
  .mosaic__cell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(200deg, rgb(8 32 60 / 0.42), rgb(8 32 60 / 0.08) 55%, rgb(180 101 42 / 0.2));
    mix-blend-mode: multiply;
    transition: opacity 0.7s var(--ease-out);
  }
  .mosaic__cell:hover img { scale: 1.06; }
  .mosaic__cell:hover::after { opacity: 0.55; }
  .mosaic__label {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 2;
    padding: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
    color: #fff;
    background: linear-gradient(transparent, rgb(6 9 14 / 0.82));
    /* Wrap rather than overlap: on a narrow cell the title takes the first
       row and the spec chip drops beneath it. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.15rem var(--sp-3);
  }
  .mosaic__label b {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    line-height: 1.25;
  }
  .mosaic__label span {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--copper-300);
    white-space: nowrap;
  }

  /* --- Metric ribbon — numbers over a dark image ----------------------- */
  .ribbon {
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--r-xl);
    min-block-size: clamp(18rem, 14rem + 14vw, 26rem);
    display: grid;
    align-content: center;
  }
  .ribbon__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  .ribbon__bg img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .ribbon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, rgb(6 16 32 / 0.94), rgb(8 32 60 / 0.78) 55%, rgb(113 61 16 / 0.6));
  }

  /* --- Why-us rail -----------------------------------------------------
     The heading block is far shorter than the six cards beside it, which
     left a large void bottom-left. The media panel flexes to whatever height
     remains, so the column is always exactly filled at any viewport. */
  .whyus__media {
    margin-block-start: var(--sp-10);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper-warm-2);
    aspect-ratio: 3 / 4;
  }
  .whyus__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* Bias left so the technician stays in frame on a narrow crop */
    object-position: 38% center;
  }
  @media (width >= 60rem) {
    .whyus__rail { display: flex; flex-direction: column; }
    .whyus__media {
      flex: 1 1 auto;
      aspect-ratio: auto;
      min-block-size: 14rem;
    }
  }

  /* --- Quality coverage cards ------------------------------------------
     Leads with the coverage figure rather than an icon: for a procurement
     reader the number ("100%", "Every") is the claim, and it also keeps this
     visually distinct from the numbered Why-us cards above it. */
  .qual {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    background: var(--bg);
    transition:
      border-color var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out),
      box-shadow var(--dur-slow) var(--ease-out);
  }
  .qual:hover {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--accent) 40%, transparent);
    box-shadow: var(--shadow-sm);
  }
  .qual__fig {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: clamp(2.1rem, 1.6rem + 2.1vw, 3.1rem);
    line-height: 0.95;
    letter-spacing: var(--tracking-display);
    color: var(--brand-800);
    font-variant-numeric: tabular-nums;
  }
  .qual__fig sup {
    font-family: var(--font-sans);
    font-size: 0.42em;
    font-weight: 700;
    vertical-align: baseline;
    position: relative;
    inset-block-start: -0.72em;
    color: var(--accent);
  }
  .qual__label {
    font-size: var(--fs-h5);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
  }
  .qual__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--fg-soft);
  }

  /* --- Sectors band ----------------------------------------------------
     A full-width dark band carrying the sector index at display scale. Dark
     because this sits between two light sections and the page needed the
     tonal break; two columns so eleven entries stay compact while the type
     gets large enough to match the rest of the page's voice. */
  .sectors {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }
  .sectors__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.55;
    mask-image: radial-gradient(120% 90% at 80% 10%, #000 20%, transparent 75%);
  }

  .sectors__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(2rem, 1rem + 4vw, 5rem);
    border-block-start: 1px solid var(--line);
  }
  @media (width >= 56rem) {
    .sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .sect {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-4);
    padding-block: clamp(1.1rem, 0.85rem + 0.9vw, 1.6rem);
    border-block-end: 1px solid var(--line);
    text-decoration: none;
    transition: padding-inline-start var(--dur) var(--ease-out);
  }
  .sect:hover,
  .sect:focus-visible { padding-inline-start: var(--sp-3); }

  .sect__num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: color-mix(in oklab, #fff 42%, transparent);
    transition: color var(--dur) var(--ease-out);
  }
  .sect:hover .sect__num,
  .sect:focus-visible .sect__num { color: var(--copper-500); }

  .sect__name {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.95rem);
    letter-spacing: var(--tracking-display);
    line-height: 1.12;
    color: #fff;
    text-wrap: balance;
  }
  .sect__note {
    display: block;
    margin-block-start: 0.3rem;
    font-size: var(--fs-sm);
    line-height: 1.45;
    /* Readable on navy — the old 13px grey was the payload and unreadable */
    color: color-mix(in oklab, #fff 72%, transparent);
  }

  .sect__go {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    color: var(--copper-500);
    opacity: 0;
    translate: -8px 0;
    transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
  }
  .sect:hover .sect__go,
  .sect:focus-visible .sect__go { opacity: 1; translate: 0 0; }

  /* Highlighted final entry — the invitation, not another sector */
  .sect--cta .sect__name { color: var(--copper-300); }
  .sect--cta .sect__go { opacity: 1; translate: 0 0; }

  /* --- Case study card ------------------------------------------------- */
  .case {
    position: relative;
    display: grid;
    gap: var(--sp-6);
    text-decoration: none;
  }
  .case__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
  }
  .case__title {
    font-family: var(--font-display);
    font-size: var(--fs-d3);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-snug);
  }
  .case__result {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid var(--line);
  }
  .case__result div { display: grid; gap: 0.15rem; }
  .case__result dt { font-size: var(--fs-xs); color: var(--fg-muted); order: 2; }
  .case__result dd {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    letter-spacing: var(--tracking-display);
    margin: 0;
  }

  /* --- CTA band -------------------------------------------------------- */
  .cta-band {
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--r-xl);
    padding: clamp(2.5rem, 1.8rem + 3.5vw, 6rem);
    background:
      radial-gradient(90% 120% at 100% 0%, color-mix(in oklab, var(--brand-600) 55%, transparent), transparent 60%),
      radial-gradient(70% 100% at 0% 100%, color-mix(in oklab, var(--copper-700) 45%, transparent), transparent 60%),
      var(--brand-900);
  }
  .cta-band__traces { position: absolute; inset: 0; z-index: -1; opacity: 0.5; }

  /* --- Footer ---------------------------------------------------------- */
  .footer { position: relative; overflow: clip; }
  .footer__top { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
  .footer__brand img { block-size: 2.5rem; inline-size: auto; }
  .footer__desc { max-inline-size: 34ch; color: var(--fg-soft); font-size: var(--fs-sm); line-height: var(--lh-loose); }
  .footer__title {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-block-end: var(--sp-5);
  }
  .footer__links { display: grid; gap: 0.7rem; }
  .footer__links a {
    font-size: var(--fs-sm);
    color: var(--fg-soft);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out), translate var(--dur) var(--ease-out);
    display: inline-block;
  }
  .footer__links a:hover { color: #fff; translate: 4px 0; }
  .footer__contact { display: grid; gap: var(--sp-5); }
  .footer__contact-row { display: grid; grid-template-columns: 1.15rem 1fr; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--fg-soft); }
  .footer__contact-row svg { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 0.22rem; color: var(--accent); }
  .footer__contact-row a { text-decoration: none; }
  .footer__contact-row a:hover { color: #fff; }
  .footer__bottom {
    padding-block: var(--sp-6);
    border-block-start: 1px solid var(--line-soft);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
  }
  .footer__social { display: flex; gap: var(--sp-2); }
  .footer__social a {
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
  }
  .footer__social a:hover { background: var(--copper-600); border-color: var(--copper-600); translate: 0 -3px; }
  .footer__social svg { inline-size: 1rem; block-size: 1rem; }
  .footer__wordmark {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 1rem + 14vw, 15rem);
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: color-mix(in oklab, #fff 6%, transparent);
    white-space: nowrap;
    user-select: none;
    padding-block-end: 0.1em;
  }

  /* --- Page hero (inner pages) ----------------------------------------- */
  .phero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(3rem, 2rem + 4vw, 6.5rem) clamp(2.5rem, 1.8rem + 3vw, 5rem);
    background:
      radial-gradient(100% 80% at 85% 0%, var(--brand-100), transparent 60%),
      var(--paper-warm);
    border-block-end: 1px solid var(--line-soft);
  }
  .phero__title {
    font-family: var(--font-display);
    font-size: var(--fs-d1);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-display);
    max-inline-size: 24ch;
  }
  .phero__title em { font-style: italic; color: var(--brand-800); }
  .phero__lead { max-inline-size: 52ch; font-size: var(--fs-lead); color: var(--fg-soft); line-height: 1.6; }

  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); color: var(--fg-muted); }
  .crumbs a { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
  .crumbs a:hover { color: var(--brand-700); }
  .crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 0.5rem; opacity: 0.45; }
  .crumbs [aria-current] { color: var(--fg); }

  /* --- Prose (article body) -------------------------------------------- */
  .prose { max-inline-size: 68ch; }
  .prose > * + * { margin-block-start: var(--sp-6); }
  .prose h2 {
    font-family: var(--font-display);
    font-size: var(--fs-d3);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-snug);
    margin-block-start: var(--sp-16);
  }
  .prose h3 {
    font-size: var(--fs-h4);
    font-weight: 600;
    margin-block-start: var(--sp-10);
  }
  .prose p { color: var(--fg-soft); line-height: var(--lh-loose); }
  .prose > ul { display: grid; gap: var(--sp-3); padding-inline-start: 0; list-style: none; }
  .prose > ul li {
    position: relative;
    padding-inline-start: 1.4rem;
    color: var(--fg-soft);
    line-height: var(--lh-loose);
    font-size: var(--fs-sm);
  }
  .prose > ul li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.72em;
    inset-inline-start: 0;
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: var(--accent);
  }
  .prose ol { display: grid; gap: var(--sp-3); padding-inline-start: 1.3rem; }
  .prose ol li { color: var(--fg-soft); line-height: var(--lh-loose); font-size: var(--fs-sm); }
  .prose ol li::marker { color: var(--accent); font-family: var(--font-mono); font-size: 0.8em; }

  /* --- Sticky side rail ------------------------------------------------ */
  @media (width >= 60rem) {
    .sticky-rail { position: sticky; inset-block-start: 7rem; }
  }

  /* --- Notice ---------------------------------------------------------- */
  .notice {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--r-md);
    border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
    background: var(--copper-100);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--copper-800);
  }
  .notice svg { inline-size: 1.4rem; block-size: 1.4rem; margin-block-start: 0.15rem; }

  /* --- Scroll-to-top --------------------------------------------------- */
  .to-top {
    position: fixed;
    inset-block-end: clamp(1rem, 2vw, 2rem);
    inset-inline-end: clamp(1rem, 2vw, 2rem);
    z-index: var(--z-sticky);
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    background: var(--brand-900);
    color: #fff;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    translate: 0 12px;
    transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out), visibility var(--dur), background var(--dur) var(--ease-out);
  }
  .to-top.is-in { opacity: 1; visibility: visible; translate: 0 0; }
  .to-top:hover { background: var(--copper-600); }
  .to-top svg { inline-size: 1.05rem; block-size: 1.05rem; }

  /* --- Scroll progress ------------------------------------------------- */
  .progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-top);
    block-size: 2px;
    background: transparent;
    pointer-events: none;
  }
  .progress__bar {
    block-size: 100%;
    inline-size: 100%;
    transform-origin: left;
    scale: var(--p, 0) 1;
    background: linear-gradient(90deg, var(--brand-600), var(--copper-500));
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .sr-only {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .text-center { text-align: center; }
  .text-end { text-align: end; }
  .text-balance { text-wrap: balance; }
  .mx-auto { margin-inline: auto; }
  .ms-auto { margin-inline-start: auto; }
  .mt-auto { margin-block-start: auto; }

  .fg-soft { color: var(--fg-soft); }
  .fg-muted { color: var(--fg-muted); }
  .fg-accent { color: var(--accent); }
  .fg-brand { color: var(--brand-800); }

  .bg-warm { background: var(--paper-warm); }
  .bg-brand { background: var(--brand-900); }

  .serif { font-family: var(--font-display); letter-spacing: var(--tracking-display); }
  .mono { font-family: var(--font-mono); }
  .italic { font-style: italic; }
  .fs-lead { font-size: var(--fs-lead); line-height: 1.6; }
  .fs-sm { font-size: var(--fs-sm); }
  .fs-xs { font-size: var(--fs-xs); }
  .fs-d2 { font-size: var(--fs-d2); line-height: var(--lh-snug); }
  .fs-d3 { font-size: var(--fs-d3); line-height: var(--lh-snug); }
  .fs-h4 { font-size: var(--fs-h4); }
  .fw-600 { font-weight: 600; }
  .lh-loose { line-height: var(--lh-loose); }
  .measure { max-inline-size: 58ch; }
  .measure-sm { max-inline-size: 44ch; }

  .r-md { border-radius: var(--r-md); }
  .r-lg { border-radius: var(--r-lg); }
  .r-xl { border-radius: var(--r-xl); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }
  .border-t { border-block-start: 1px solid var(--line); }
  .border-b { border-block-end: 1px solid var(--line); }
  .relative { position: relative; }
  .full { inline-size: 100%; }
  .hide { display: none; }
  @media (width < 48rem) { .hide-sm { display: none; } }
  @media (width < 60rem) { .hide-md { display: none; } }

  .pt-0 { padding-block-start: 0; }
  .pb-0 { padding-block-end: 0; }
  .mt-4 { margin-block-start: var(--sp-4); }
  .mt-6 { margin-block-start: var(--sp-6); }
  .mt-8 { margin-block-start: var(--sp-8); }
  .mt-10 { margin-block-start: var(--sp-10); }
  .mt-12 { margin-block-start: var(--sp-12); }
  .mt-16 { margin-block-start: var(--sp-16); }
  .mb-6 { margin-block-end: var(--sp-6); }
  .mb-8 { margin-block-end: var(--sp-8); }
  .mb-12 { margin-block-end: var(--sp-12); }
  .mb-16 { margin-block-end: var(--sp-16); }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .header, .topbar, .drawer, .to-top, .progress, .page-veil, .cta-band, .marquee { display: none !important; }
  body { color: #000; background: #fff; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}