/* ============ Fonts (latin subsets, self-hosted) ============ */
/* Hanken Grotesk variable (wght 100–900), one file per subset. Registered as
   two clamped faces so the theme's two-cut weight resolution carries over from
   the Ubuntu era: text asking 300 gets the hairline 200, everything else
   (400/500/600 — unstyled utility text asks 400) resolves into the 500–600
   medium band. Body runs the full variable range under its own family name. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/hanken-grotesk-latin.woff2') format('woff2');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');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;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500 600;font-display:swap;src:url('../fonts/hanken-grotesk-latin.woff2') format('woff2');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500 600;font-display:swap;src:url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');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;}
@font-face{font-family:'Hanken Grotesk Variable';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/hanken-grotesk-latin.woff2') format('woff2');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Hanken Grotesk Variable';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');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;}
/* Shim: the prebuilt chart bundles hardcode fontFamily 'Ubuntu' — point that
   name at Hanken so chart labels match the trial without a rebuild. */
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/hanken-grotesk-latin.woff2') format('woff2');}


/* ============ tokens.css ============ */
/* Design tokens — v2, leaning on pepenergy.co.uk's design language:
   Ubuntu Light display, Open Sans body, charcoal/white grounds,
   graded photography, hairline rules. Brand accents unchanged. */
:root {
  /* Palette */
  --carbon: #171717; /* PEP Energy charcoal */
  --carbon-raised: #1f1f1f;
  --charcoal: #272727;
  --voltage: #4db69b; /* ICD teal — the group accent */
  --current: #235696;
  --steel: #6285b4;
  --paper: #ffffff;
  --paper-dim: #f6f6f6;
  --signal: #f0523d; /* PEP Energy accent — scoped to its panel only */

  /* Ink on each ground */
  --ink-on-dark: #f5f5f4;
  --ink-on-dark-dim: #a3a3a1;
  --ink-on-light: rgba(23, 23, 23, 0.85);
  --ink-on-light-dim: rgba(23, 23, 23, 0.64);
  --line-on-dark: rgba(245, 245, 244, 0.14);
  --line-on-light: rgba(23, 23, 23, 0.12);

  /* Type — Hanken Grotesk throughout: hairline display, regular body,
     medium tracked caps for the utility voice. */
  --font-display: 'Hanken Grotesk', 'Trebuchet MS', sans-serif;
  --font-body: 'Hanken Grotesk Variable', 'Segoe UI', sans-serif;
  /* Labels, tickers & data — the brand face in tracked caps (Ubuntu Mono retired).
     Faces are clamped at 200 and 500–600, so utility text resolves to the medium band. */
  --font-utility: 'Hanken Grotesk', 'Trebuchet MS', sans-serif;

  /* Fluid scale — calmer than v1: light weights carry the size */
  --text-hero: clamp(2.4rem, 1.1rem + 4.9vw, 5.9rem);
  --text-h2: clamp(1.9rem, 1rem + 2.9vw, 4rem);
  --text-h3: clamp(1.35rem, 1rem + 1.5vw, 2.2rem);
  --text-lead: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --text-body: clamp(0.95rem, 0.92rem + 0.2vw, 1.0625rem);
  --text-mono: clamp(0.7rem, 0.64rem + 0.2vw, 0.82rem);
  --text-stat: clamp(2.6rem, 1.1rem + 3.4vw, 4.6rem);

  /* Space */
  --space-section: clamp(6rem, 4rem + 10vw, 13rem);
  --space-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --measure: 68ch;
  /* Top padding for any section that opens a page: the fixed topbar
     (ticker ~4rem + header ~4.5rem) plus breathing room. */
  --topbar-clear: 10.5rem;

  /* Shape */
  --radius-card: 8px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ~power3.out */
  --dur-fast: 0.35s;
  --dur-base: 0.8s;
}
/* Handsets hide the market ticker (see the Ticker component), so the
   fixed topbar is the header alone — shrink the clearance to match. */
@media (max-width: 720px) {
  :root {
    --topbar-clear: 8rem;
  }
}


/* ============ global.css ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: auto; /* Lenis owns scrolling; native smooth would fight it */
}

html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  background: var(--carbon);
  color: var(--ink-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--voltage);
  color: var(--carbon);
}

:focus-visible {
  outline: 2px solid var(--voltage);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Ground alternation — sections declare their ground, children inherit ink */
.ground-dark {
  background: var(--carbon);
  color: var(--ink-on-dark);
  --ink: var(--ink-on-dark);
  --ink-dim: var(--ink-on-dark-dim);
  --line: var(--line-on-dark);
}
.ground-light {
  background: var(--paper);
  color: var(--ink-on-light);
  --ink: var(--ink-on-light);
  --ink-dim: var(--ink-on-light-dim);
  --line: var(--line-on-light);
}

.section {
  padding: var(--space-section) var(--space-gutter);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--voltage);
}

/* Hairline grotesque at scale — air, no shouting (the PEP Energy voice).
   The 300 request resolves to Hanken's 200 cut via the clamped @font-face. */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Titles are Name Case — every word capitalised (brief update, 14 Jul 2026).
   Low-specificity on purpose: tracked-caps utility classes (.eyebrow, labels)
   carry their own text-transform and win. Copy stays sentence case in the CMS;
   the transform applies the casing everywhere a title renders. */
h1,
h2,
h3,
h4,
.display,
.menu-link {
  text-transform: capitalize;
}

/* ------------------------------------------------------------------
   Button system — the single source for every pill CTA on the site.
   WP mapping: one `button` template part / block style set.
   Base + one size modifier + one tone modifier per instance.
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s linear, color 0.3s linear, border-color 0.3s linear,
    opacity 0.25s linear;
}
/* Sizes */
.btn--small {
  padding: 0.85rem 1.8rem;
  font-weight: 500;
  font-size: var(--text-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.btn--large {
  gap: 1.3rem;
  padding: clamp(1.1rem, 2.6vh, 1.6rem) clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 300;
  font-size: clamp(1.05rem, 1rem + 0.9vw, 1.7rem);
  overflow-wrap: anywhere;
}
/* Email CTAs: the address is data, not display copy — a step quieter
   than the full .btn--large so it never dominates the closing band, and
   sized to hold one line down to small handsets (a <wbr> after the @ in
   the markup gives the only sanctioned break point below that). */
.btn--email {
  gap: 1rem;
  padding: clamp(0.95rem, 2.2vh, 1.3rem) clamp(1.3rem, 3vw, 2rem);
  font-weight: 400;
  font-size: clamp(0.9rem, 0.55rem + 1.6vw, 1.35rem);
  max-width: 100%;
  overflow-wrap: normal;
}
/* Tones */
.btn--outline {
  border: 1px solid var(--voltage);
  color: var(--voltage);
  background: transparent;
}
.btn--outline:hover {
  background: var(--voltage);
  color: var(--carbon);
}
.btn--solid {
  border: 1px solid var(--voltage);
  background: var(--voltage);
  color: var(--carbon);
}
.btn--solid:hover {
  opacity: 0.85;
}
.btn--ghost {
  border: 1px solid rgba(245, 245, 244, 0.4);
  color: inherit;
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--voltage);
  color: var(--voltage);
}

/* Duotone grade for reused photography — brief §3.3 */
.duotone {
  filter: grayscale(1) brightness(0.82) contrast(1.12) sepia(1) hue-rotate(120deg) saturate(0.9);
}

/* Masked reveal container for images */
.mask-reveal {
  overflow: clip;
}

/* Split-text line masks (SplitText adds .st-line via linesClass) */
.st-mask .st-line {
  overflow: clip;
}

/* Scrubbed word-reveal start states (main.ts inks them in on scroll).
   Both keep >=3:1 contrast at rest for WCAG large text */
.credo-word {
  color: color-mix(in srgb, var(--ink-on-light) 60%, var(--paper));
}
.credo-word-dark {
  color: color-mix(in srgb, var(--ink-on-dark) 46%, var(--carbon));
}

/* Subpage hero entrance — CSS-only so first paint never waits on JS */
html.js .page-hero-inner {
  animation: page-hero-in 0.8s var(--ease-out) 0.1s backwards;
}
@keyframes page-hero-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js .page-hero-inner {
    animation: none;
  }
}

/* Hidden-until-JS states are applied via .js only, so no-JS users get full content */
html.no-js .anim-hidden {
  opacity: 1 !important;
  transform: none !important;
}

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


/* ---- component: SiteHeader ---- */

  /* Ticker + header ride together as one bar pinned to the very top; the
     solid ticker sits above the transparent nav and pushes it down. z-index
     stays above the menu overlay so the toggle remains reachable. */
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 96;
    /* Keeps the menu-open carbon mask in step with the overlay's fade. */
    transition: background 0.45s var(--ease-out);
  }
  /* The ticker steps aside while the full-screen menu is open. */
  html.menu-open .ticker {
    visibility: hidden;
  }
  /* The topbar floats above the open overlay with nothing painted behind
     it, so on short viewports menu links scrolling up show through the
     logo. Flat carbon — the overlay's own ground — masks them seamlessly. */
  html.menu-open .topbar {
    background: var(--carbon);
  }
  .header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem var(--space-gutter);
    color: var(--ink-on-dark);
    transition: background 0.4s linear;
  }
  html.scrolled .header {
    background: color-mix(in srgb, var(--carbon) 82%, transparent);
    backdrop-filter: blur(12px);
  }
  html.menu-open .header {
    background: transparent;
    backdrop-filter: none;
  }
  .header-mark {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .header-mark img {
    height: clamp(38px, 5vh, 48px);
    width: auto;
  }
  .header-right {
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }
  .header-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--ink-on-dark-dim);
    font-variant-numeric: tabular-nums;
    transition: color 0.2s linear;
  }
  .header-phone-icon {
    flex: none;
    color: var(--voltage);
  }
  .header-phone:hover {
    color: var(--ink-on-dark);
  }
  /* Portal login — a quiet keyed utility link, not a call to action; the
     underline draws in on hover. One accent per header: the menu pill. */
  .header-portal {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0;
    font-family: var(--font-display);
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-on-dark-dim);
    transition: color 0.25s linear;
  }
  .header-portal-key {
    flex: none;
    color: var(--voltage);
  }
  .header-portal::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.2rem;
    height: 1px;
    background: var(--voltage);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out);
  }
  .header-portal:hover {
    color: var(--ink-on-dark);
  }
  .header-portal:hover::after {
    transform: scaleX(1);
  }
  /* The toggle is the header's one accent — a solid voltage pill with a
     staggered two-line glyph that squares up on hover and crosses into an
     X while the overlay is open. */
  .header-menu {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--voltage);
    border-radius: var(--radius-pill);
    background: var(--voltage);
    color: var(--carbon);
    transition: background 0.3s linear, border-color 0.3s linear;
  }
  .header-menu:hover {
    background: color-mix(in srgb, var(--voltage) 82%, #fff);
    border-color: color-mix(in srgb, var(--voltage) 82%, #fff);
  }
  html.menu-open .header-menu {
    background: transparent;
    color: var(--ink-on-dark);
  }
  .header-menu-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    /* "Close" is one glyph-run wider than "Menu" — reserve the width so
       the pill doesn't jump when the label swaps */
    min-width: 4.2em;
  }
  .header-menu-lines {
    display: grid;
    gap: 5px;
    width: 20px;
    justify-items: end;
  }
  .header-menu-lines i {
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.35s var(--ease-out), width 0.35s var(--ease-out);
  }
  .header-menu-lines i:last-child {
    width: 60%;
  }
  .header-menu:hover .header-menu-lines i:last-child {
    width: 100%;
  }
  html.menu-open .header-menu-lines i:first-child {
    transform: translateY(3.25px) rotate(45deg);
  }
  html.menu-open .header-menu-lines i:last-child {
    width: 100%;
    transform: translateY(-3.25px) rotate(-45deg);
  }
  @media (max-width: 720px) {
    .header-phone,
    .header-portal {
      display: none;
    }
  }


/* ---- component: Menu ---- */

  .menu {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: var(--carbon);
    color: var(--ink-on-dark);
    visibility: hidden;
    opacity: 0;
    overflow: hidden auto;
    /* The overlay scrolls natively (data-lenis-prevent); don't let a
       finished swipe chain through and move the page behind it. */
    overscroll-behavior: contain;
    transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
  }
  .menu.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.45s var(--ease-out);
  }
  .menu .menu-tribar {
    position: fixed;
    top: 50%;
    right: -8vw;
    width: min(72vh, 46vw);
    transform: translateY(-50%) rotate(8deg);
    opacity: 0.1;
    pointer-events: none;
  }
  .menu-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem 8rem;
    align-items: end;
    max-width: 88rem;
    margin-inline: auto;
    min-height: 100svh;
    /* --topbar-clear, not a guess: while the menu is open the topbar is
       painted solid carbon, so anything shallower than ticker + header
       hides the first link behind it (the wrapped mobile ticker runs
       ~148px deep at phone widths). */
    padding: var(--topbar-clear) var(--space-gutter) 4rem;
  }
  .menu-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .menu-nav li {
    overflow: clip;
  }
  .menu-link {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 300;
    /* The vh scale assumes tall == wide; portrait tablets are tall but
       narrow, so the width term stops links hitting the desktop cap
       and wrapping. Handsets get their own scale in the 720px query. */
    font-size: clamp(1.9rem, min(1rem + 4.6vh, 0.5rem + 8vw), 3.9rem);
    line-height: 1.32;
    text-decoration: none;
    color: var(--ink-on-dark);
    transform: translateY(110%);
    transition: transform 0.7s var(--ease-out) calc(0.06s + var(--i) * 0.055s),
      color 0.25s linear;
  }
  .menu.is-open .menu-link {
    transform: none;
  }
  .menu-link:hover {
    color: var(--voltage);
  }
  .menu-link.is-current {
    color: var(--voltage);
  }
  .menu-aside {
    padding-bottom: 0.8rem;
  }
  .menu-aside-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--voltage);
  }
  .menu-aside-label + .menu-aside-label,
  .menu-contact,
  .menu-companies {
    margin-top: 0.9rem;
  }
  .menu-secondary {
    padding: 0;
    list-style: none;
    margin-bottom: 2.6rem;
  }
  .menu-secondary li + li {
    margin-top: 0.45rem;
  }
  .menu-secondary a {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.35rem;
    text-decoration: none;
    color: var(--ink-on-dark);
    transition: color 0.25s linear;
  }
  .menu-secondary a:hover,
  .menu-secondary a.is-current {
    color: var(--voltage);
  }
  .menu-companies {
    padding: 0;
    list-style: none;
    margin-bottom: 2.6rem;
  }
  .menu-companies li + li {
    margin-top: 0.45rem;
  }
  .menu-companies a,
  .menu-companies span,
  .menu-contact a {
    color: var(--ink-on-dark-dim);
    text-decoration: none;
  }
  .menu-companies a:hover,
  .menu-contact a:hover {
    color: var(--ink-on-dark);
  }
  .menu-contact {
    line-height: 2;
  }
  /* Handsets: hand-tune the link scale — the viewport formula still
     lands at display size here. ~29px at 320w to ~42px at 720w keeps
     every label on one line, the list plus aside within one comfortable
     scroll, and rows at ~44px tap-target height. */
  @media (max-width: 720px) {
    .menu-link {
      font-size: clamp(1.7rem, 1rem + 4vw, 2.6rem);
      line-height: 1.4;
    }
  }
  /* The cookie reopen widget (Zaltek Suite) floats above the overlay's
     z-index; it steps aside while the menu is open, like the ticker. */
  html.menu-open .zcc-widget {
    visibility: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    .menu,
    .menu-link {
      transition: none;
    }
  }


/* ---- component: SiteFooter ---- */

  /* A raised base-plate, lifted off the page ground, with tight asymmetric
     padding — generous above to breathe, snug below so the page ends here. */
  .footer.section {
    position: relative;
    overflow: clip;
    background: var(--carbon-raised);
    border-top: 1px solid var(--line-on-dark);
    padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--space-gutter) clamp(2rem, 1.5rem + 1.5vw, 3.25rem);
    --fam-accent: var(--voltage);
  }
  /* a fainter echo of the field behind the closing headline */
  .footer-scene {
    position: absolute;
    left: 92%;
    top: 18%;
    pointer-events: none;
    opacity: 0.6;
  }
  /* .footer-scene qualifier: the .family-field base rules sit later in this
     file and would win the cascade at single-class specificity */
  .footer-scene .footer-field {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: min(46rem, 70vw);
    max-width: none;
    transform: translate(-50%, -50%);
  }
  @media (max-width: 720px) {
    .footer-scene {
      display: none;
    }
  }
  .footer-inner {
    position: relative;
    max-width: 88rem;
    margin-inline: auto;
  }
  .footer-title {
    margin-top: 1rem;
    font-size: var(--text-h2);
    max-width: 14ch;
  }
  .footer-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2.5rem;
    margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  }
  .footer-phone {
    font-family: var(--font-utility);
    font-size: calc(var(--text-mono) * 1.2);
    letter-spacing: 0.14em;
    color: var(--ink-dim);
    text-decoration: none;
  }
  .footer-phone:hover {
    color: var(--ink-on-dark);
  }

  /* The family register: four legally-distinct companies, each keyed to its
     own brand accent (ICD teal · PEP red · PEP-ICD steel · Cumbria blue). The
     coloured caps double as the divider from the block above. */
  .footer-legal {
    margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  }
  .footer-companies {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    margin: 0;
  }
  .footer-company {
    padding-top: 0.95rem;
    border-top: 2px solid var(--company-accent, var(--line-on-dark));
  }
  .footer-company:nth-child(1) { --company-accent: var(--voltage); }
  .footer-company:nth-child(2) { --company-accent: var(--signal); }
  .footer-company:nth-child(3) { --company-accent: var(--steel); }
  .footer-company:nth-child(4) { --company-accent: var(--current); }
  .footer-company dt {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.45;
    color: var(--ink-on-dark);
  }
  .footer-company dd {
    margin: 0.7rem 0 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--ink-dim);
    max-width: 26ch;
  }
  /* ADR membership — the Ombudsman Services mark keeps its own white ground
     (the logo is aubergine-on-transparent, invisible on carbon otherwise). */
  .footer-adr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.6rem;
    margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  }
  .footer-adr-logo {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1rem;
    background: #fff;
    border-radius: 4px;
  }
  .footer-adr-logo img {
    height: 34px;
    width: auto;
  }
  .footer-adr-text {
    margin: 0;
    max-width: 52ch;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink-dim);
  }
  /* Bottom band: the brand mark at full strength over the fine print,
     the studio credit off in its own corner. */
  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1.5rem 3rem;
    margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
    padding-top: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
    border-top: 1px solid var(--line-on-dark);
  }
  .footer-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    grid-column: 1 / -1;
  }
  .footer-brand-logo {
    display: block;
  }
  .footer-brand-logo img {
    height: clamp(52px, 3.2rem + 1.2vw, 72px);
    width: auto;
  }
  .footer-fine {
    margin: 0;
    max-width: 62ch;
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--ink-dim);
  }
  .footer-fine a {
    color: var(--ink-on-dark);
    text-underline-offset: 3px;
  }
  .footer-fine-sep {
    margin: 0 0.6em;
    color: var(--voltage);
  }
  /* the studio nod: Zaltek's Tyne-bridge signature, off to the side */
  .footer-credit {
    justify-self: end;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    font-size: 0.72rem;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink-on-dark);
    transition: color 0.25s ease;
  }
  .footer-credit:hover {
    color: #f92875;
  }
  .footer-credit-bridge {
    width: 96px;
    height: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .footer-credit-dot {
      display: none;
    }
  }
  @media (max-width: 980px) {
    .footer-companies {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2.25rem 2rem;
    }
  }
  @media (max-width: 640px) {
    .footer-bottom {
      grid-template-columns: 1fr;
      align-items: start;
    }
    .footer-brand {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.2rem;
    }
    /* stays right-aligned: bottom-left belongs to the floating cookie button */
  }
  @media (max-width: 520px) {
    .footer-companies {
      grid-template-columns: 1fr;
      gap: 1.75rem;
    }
  }


/* ---- component: Hero ---- */

  .hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--topbar-clear) var(--space-gutter) 0;
    overflow: clip;
  }
  .hero-photo,
  .hero-photo img,
  .hero-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hero-photo img {
    object-fit: cover;
    /* Scrubbed drift on scroll (main.ts) needs headroom */
    scale: 1.08;
    transform-origin: center top;
  }
  .hero-scrim {
    background:
      linear-gradient(to bottom, rgba(23, 23, 23, 0.42), rgba(23, 23, 23, 0.08) 34%, rgba(23, 23, 23, 0.05) 62%, var(--carbon) 99%),
      linear-gradient(98deg, rgba(23, 23, 23, 0.5) 0%, rgba(23, 23, 23, 0.18) 52%, rgba(23, 23, 23, 0) 78%);
  }
  .hero-inner {
    position: relative;
    max-width: 88rem;
    width: 100%;
    margin-inline: auto;
    /* Centre the copy block in the space between topbar and the logo band
       (the logo band's own auto top-margin would otherwise pin it to the top) */
    margin-block: auto;
  }
  /* A composed editorial block, not a full-width banner: the headline holds
     the left, the pylon scene owns the right */
  .hero-h1 {
    max-width: 11em;
    margin-top: 1.5rem;
    font-size: calc(var(--text-hero) * 0.9);
    color: #fff;
    text-shadow: 0 1px 30px rgba(23, 23, 23, 0.35);
  }
  .hero-lead {
    max-width: 46ch;
    margin-top: 1.6rem;
    font-size: var(--text-lead);
    color: var(--ink-on-dark-dim);
    text-shadow: 0 1px 24px rgba(23, 23, 23, 0.5);
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(1.8rem, 4vh, 2.6rem);
  }
  /* CSS-only entrance, timed to land after main.js's eyebrow/headline reveal */
  html.js .hero-lead {
    animation: page-hero-in 0.8s var(--ease-out) 1.05s backwards;
  }
  html.js .hero-actions {
    animation: page-hero-in 0.8s var(--ease-out) 1.2s backwards;
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .hero-lead,
    html.js .hero-actions {
      animation: none;
    }
  }
  /* The family register — the four companies as quiet linked columns.
     At rest: logos over a breath of their accent. On hover: the company's
     band field blooms from beneath and its accent underline draws across —
     the same "one form, four signals" language as the family scene below. */
  .hero-logos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 88rem;
    width: 100%;
    margin: auto auto 0;
    padding: 0;
    border-top: 1px solid rgba(245, 245, 244, 0.16);
    list-style: none;
  }
  .hero-logos li {
    position: relative;
  }
  .hero-logos li:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(245, 245, 244, 0.16) 30%,
      rgba(245, 245, 244, 0.16) 70%,
      transparent
    );
  }
  .hero-co {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    height: 100%;
    padding: clamp(1.5rem, 3.2vh, 2.2rem) 1rem clamp(1.7rem, 3.6vh, 2.5rem);
    overflow: clip;
    text-decoration: none;
  }
  /* the rail segment, standing over each mark — same device as the family
     scene's progress rail and the profile pages' family nav */
  .hero-co-tick {
    position: relative;
    width: 2.4rem;
    height: 3px;
    transform: skewX(-24deg);
    background: color-mix(in srgb, var(--accent) 55%, transparent);
    transition: background 0.35s linear, box-shadow 0.35s linear;
  }
  .hero-co:hover .hero-co-tick,
  .hero-co:focus-visible .hero-co-tick {
    background: var(--accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .hero-co::before {
    /* the at-rest whisper of the company's accent */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      130% 110% at 50% 135%,
      color-mix(in srgb, var(--accent) 13%, transparent),
      transparent 62%
    );
    opacity: 0.85;
    transition: opacity 0.45s linear;
  }
  .hero-co:hover::before,
  .hero-co:focus-visible::before {
    opacity: 0;
  }
  .hero-co::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out);
  }
  .hero-co:hover::after,
  .hero-co:focus-visible::after {
    transform: scaleX(1);
  }
  .hero-co-field {
    position: absolute;
    left: 50%;
    top: 125%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s linear;
  }
  .hero-co:hover .hero-co-field,
  .hero-co:focus-visible .hero-co-field {
    opacity: 0.9;
  }
  /* .hero-co qualifier: the .family-field base rules sit later in this file
     and would win the cascade at single-class specificity */
  .hero-co .hero-co-rings {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(24rem, 46vh, 36rem);
    max-width: none;
    transform: translate(-50%, -50%) scale(0.92);
    transition: transform 0.7s var(--ease-out);
  }
  .hero-co:hover .hero-co-rings,
  .hero-co:focus-visible .hero-co-rings {
    transform: translate(-50%, -50%) scale(1);
  }
  /* Over the pylon scene the carbon-mixed band fills read as dark discs —
     here the bands are additive: they only ever add accent, never darken */
  .hero-co-rings .family-band--1 {
    fill: color-mix(in srgb, var(--fam-accent) 4%, transparent);
  }
  .hero-co-rings .family-band--2 {
    fill: color-mix(in srgb, var(--fam-accent) 6%, transparent);
  }
  .hero-co-rings .family-band--3 {
    fill: color-mix(in srgb, var(--fam-accent) 9%, transparent);
  }
  .hero-co-rings .family-band--4 {
    fill: color-mix(in srgb, var(--fam-accent) 13%, transparent);
  }
  .hero-co-rings .family-band--5 {
    fill: color-mix(in srgb, var(--fam-accent) 18%, transparent);
  }
  .hero-co-rings .family-band--6 {
    fill: color-mix(in srgb, var(--fam-accent) 25%, transparent);
  }
  .hero-co-rings .family-band-edge {
    stroke: color-mix(in srgb, var(--fam-accent) 26%, transparent);
  }
  .hero-co-logo {
    position: relative;
    display: flex;
    align-items: center;
    /* Tall enough that the small type inside the ICD / Cumbria lockups
       stays legible — these are lockups, not marks */
    height: clamp(44px, 6.6vh, 64px);
    transition: transform 0.4s var(--ease-out);
  }
  .hero-co:hover .hero-co-logo,
  .hero-co:focus-visible .hero-co-logo {
    transform: translateY(-3px);
  }
  .hero-logos img {
    height: 100%;
    width: auto;
  }
  .hero-wordmark {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1rem, 1.9vh, 1.25rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-on-dark);
    white-space: nowrap;
  }
  @media (max-width: 720px) {
    .hero-logos {
      grid-template-columns: repeat(2, 1fr);
    }
    .hero-logos li:nth-child(3)::before {
      display: none;
    }
    .hero-logos li:nth-child(n + 3) {
      border-top: 1px solid rgba(245, 245, 244, 0.12);
    }
  }
  .hero-cue {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 4.5rem;
    background: linear-gradient(var(--voltage), transparent);
    animation: cue 2.2s var(--ease-out) infinite;
  }
  @keyframes cue {
    from {
      transform: scaleY(0);
      transform-origin: top;
    }
    45% {
      transform: scaleY(1);
      transform-origin: top;
    }
    55% {
      transform: scaleY(1);
      transform-origin: bottom;
    }
    to {
      transform: scaleY(0);
      transform-origin: bottom;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-cue {
      animation: none;
    }
    .hero-photo img {
      scale: 1;
    }
  }

  /* Interactive 3D pylon hero (assets/js/pylon.js) */
  .hero-photo--pylon {
    /* Dusk gradient doubles as the no-WebGL fallback and shows through
       while the module boots; top tone matches the scene's zenith so the
       scrubbed yPercent drift never reveals a seam. */
    background: linear-gradient(to bottom, #06070b 0%, #0b1424 52%, #16243d 66%, #050608 68%, #050608 100%);
  }
  .hero-pylon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: pan-y;
  }
  .hero-pylon.dragging { cursor: grabbing; }
  .hero-pylon.hot { cursor: pointer; }
  .hero-scrim--pylon {
    pointer-events: none;
    /* lighter than the photo scrim — the 3D scene is already dark */
    background:
      linear-gradient(to bottom, rgba(23, 23, 23, 0.3), rgba(23, 23, 23, 0) 30%, rgba(23, 23, 23, 0) 68%, var(--carbon) 99%),
      linear-gradient(98deg, rgba(23, 23, 23, 0.62) 0%, rgba(23, 23, 23, 0.22) 48%, rgba(23, 23, 23, 0) 74%);
  }
  .hero:has(.hero-pylon) {
    /* orbit-dragging across the headline must not select it */
    user-select: none;
    -webkit-user-select: none;
  }
  /* Narrow screens: the copy spans the full width with the tower behind
     it (pylon.js drops it low in frame), so the side-wash scrim above is
     the wrong shape — wash the copy zone from the top instead, easing
     out before the CTAs so the scene still owns the lower half. The lead
     also steps up from dim to full ink over the busier ground. */
  @media (max-width: 900px) {
    .hero-scrim--pylon {
      background:
        linear-gradient(to bottom, rgba(23, 23, 23, 0.62) 0%, rgba(23, 23, 23, 0.44) 42%, rgba(23, 23, 23, 0.08) 68%, var(--carbon) 99%),
        linear-gradient(98deg, rgba(23, 23, 23, 0.35) 0%, rgba(23, 23, 23, 0.12) 60%, rgba(23, 23, 23, 0) 100%);
    }
    .hero:has(.hero-pylon) .hero-lead {
      /* Between ink and dim: full dim washes out over the lattice, full
         ink flattens the hierarchy against the #fff headline. */
      color: color-mix(in srgb, var(--ink-on-dark) 55%, var(--ink-on-dark-dim));
      text-shadow: 0 1px 16px rgba(23, 23, 23, 0.85);
    }
  }
/* Additive band field — for scenes on raised grounds, where the standard
   carbon-mixed fills would read as dark discs. Rings only ever add accent. */
  .field-additive .family-band--1 {
    fill: color-mix(in srgb, var(--fam-accent) 4%, transparent);
  }
  .field-additive .family-band--2 {
    fill: color-mix(in srgb, var(--fam-accent) 6%, transparent);
  }
  .field-additive .family-band--3 {
    fill: color-mix(in srgb, var(--fam-accent) 9%, transparent);
  }
  .field-additive .family-band--4 {
    fill: color-mix(in srgb, var(--fam-accent) 13%, transparent);
  }
  .field-additive .family-band--5 {
    fill: color-mix(in srgb, var(--fam-accent) 18%, transparent);
  }
  .field-additive .family-band--6 {
    fill: color-mix(in srgb, var(--fam-accent) 25%, transparent);
  }
  .field-additive .family-band-edge {
    stroke: color-mix(in srgb, var(--fam-accent) 22%, transparent);
  }
  /* Lines-only field — ambient backdrops. Filled discs read as blobs at
     section scale; crisp edge rings carry the motif on their own. */
  .field-lines .family-band {
    fill: transparent;
  }
  .field-lines .family-band-edge {
    stroke: color-mix(in srgb, var(--fam-accent) 28%, transparent);
  }


/* ---- component: Family — "One form, four signals." ----
   The wireframe tribar rotates at the heart of a field of concentric bands.
   family.js tweens --fam-accent as each company takes the stage; every
   colour in the scene derives from it via color-mix, so one variable
   re-tints the ground, the bands, the pulse and the title's full stops. */

  .family {
    position: relative;
    --fam-accent: #4db69b;
  }
  .family-pin {
    position: relative;
    padding: var(--space-section) var(--space-gutter);
    overflow: clip;
  }
  .family-bg {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--fam-accent) 4%, var(--carbon));
  }
  /* The band field — darkest at the rim, brightening toward the tribar.
     Hidden until the scene pins; mobile and no-js keep the calm ground. */
  .family-field {
    display: none;
    position: absolute;
    left: 27%;
    top: 50%;
    width: min(165vh, 125vw);
    transform: translate(-50%, -50%);
  }
  .family-band--1 { fill: color-mix(in srgb, var(--fam-accent) 4%, var(--carbon)); }
  .family-band--2 { fill: color-mix(in srgb, var(--fam-accent) 7%, var(--carbon)); }
  .family-band--3 { fill: color-mix(in srgb, var(--fam-accent) 10%, var(--carbon)); }
  .family-band--4 { fill: color-mix(in srgb, var(--fam-accent) 14%, var(--carbon)); }
  .family-band--5 { fill: color-mix(in srgb, var(--fam-accent) 19%, var(--carbon)); }
  .family-band--6 { fill: color-mix(in srgb, var(--fam-accent) 25%, var(--carbon)); }
  .family-band-edge {
    fill: none;
    stroke: color-mix(in srgb, var(--fam-accent) 18%, transparent);
    stroke-width: 1.5;
  }
  .family-pulse {
    fill: none;
    stroke: color-mix(in srgb, var(--fam-accent) 60%, transparent);
    stroke-width: 2;
    opacity: 0;
  }
  .family .family-tribar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(70vh, 60vw);
    transform: translate(-50%, -50%);
    opacity: 0.1;
    pointer-events: none;
  }
  .family-head {
    position: relative;
    max-width: 88rem;
    margin-inline: auto;
  }
  .family-title {
    margin-top: 1.2rem;
    font-size: var(--text-h2);
  }
  .family-dot {
    color: var(--fam-accent);
  }
  .family-cards {
    position: relative;
    max-width: 88rem;
    margin: clamp(2.5rem, 6vh, 5rem) auto 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.5rem;
  }
  /* One card anatomy, four identities: the accent spine, count and role
     carry each company's colour; the panel itself stays quiet glass. */
  .family-card {
    position: relative;
    padding: clamp(1.9rem, 4vh, 3rem) clamp(1.9rem, 4vh, 3.2rem);
    background: color-mix(in srgb, var(--accent) 8%, rgba(31, 31, 31, 0.78));
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid var(--line-on-dark);
    border-left: 0;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    box-shadow: 0 40px 110px -40px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  .family-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
      180deg,
      var(--accent),
      color-mix(in srgb, var(--accent) 22%, transparent)
    );
  }
  .family-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: clamp(32px, 5.4vh, 52px);
  }
  .family-card-logo {
    height: clamp(32px, 5.4vh, 52px);
    display: flex;
    align-items: center;
  }
  .family-card-logo img {
    height: 100%;
    width: auto;
  }
  .family-card-count {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.22em;
    color: var(--accent);
  }
  .family-card-role {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: clamp(1.5rem, 4vh, 2.4rem);
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .family-card-role::before {
    content: '';
    width: 1.4rem;
    height: 1px;
    background: var(--accent);
  }
  .family-card-name {
    margin-top: 0.8rem;
    font-size: var(--text-h3);
  }
  /* Wordmark cards (no logo asset yet): the name is the mark */
  .family-card-name--wordmark {
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 60%, var(--ink-on-dark));
  }
  .family-card-desc {
    max-width: 44ch;
    margin-top: 0.9rem;
    color: var(--ink-dim);
  }
  .family-card-name-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .family-card-name-link:hover {
    color: var(--accent);
  }
  .family-card-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 2.2rem;
  }
  .family-card-link {
    display: inline-block;
    margin-top: clamp(1.2rem, 3.5vh, 2.2rem);
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--accent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    padding-bottom: 0.3rem;
  }
  a.family-card-link:hover {
    border-bottom-color: var(--accent);
  }
  .family-card-link--soon {
    color: var(--ink-dim);
    border-bottom-color: var(--line);
  }
  /* Progress rail — four segments, each keyed to its company's accent:
     four identities, one system, and where you are inside it. */
  .family-nav {
    display: none;
    position: absolute;
    /* Lift clear of the cookie bar while it is up (zcc publishes its height),
       so the "01 / 04" progress counter is never hidden behind it. */
    bottom: calc(clamp(1.5rem, 4vh, 3rem) + var(--zcc-banner-h, 0px));
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 1.6rem;
    transition: bottom 0.3s ease;
  }
  .family-rail {
    display: flex;
    gap: 0.55rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .family-rail-seg {
    display: block;
    width: 2.4rem;
    height: 3px;
    transform: skewX(-24deg);
    background: color-mix(in srgb, var(--accent) 26%, var(--carbon-raised));
    transition: background 0.35s linear, box-shadow 0.35s linear;
  }
  .family-rail-seg.is-active {
    background: var(--accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .family-index {
    margin: 0;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3em;
    color: var(--ink-dim);
  }

  .family-carousel {
    position: relative;
  }
  .family-next,
  .family-prev {
    display: none;
  }
  /* Shared by every small-screen carousel cue (family, quotes). */
  @keyframes family-nudge {
    0%, 100% { translate: 0; }
    50% { translate: 5px 0; }
  }
  /* Small screens: the stack becomes a snap carousel — one card holds the
     stage, the next peeks in from the right edge as the invitation to
     swipe, and a chevron cue makes the direction explicit. The accent
     rail (desktop's pinned progress) returns beneath it as 01/04. */
  @media (max-width: 1023px) {
    .family-cards {
      display: flex;
      gap: 1.1rem;
      /* full-bleed scroller: cards align to the gutter, run under the edge */
      margin-inline: calc(-1 * var(--space-gutter));
      padding-inline: var(--space-gutter);
      scroll-padding-inline: var(--space-gutter);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    .family-cards::-webkit-scrollbar {
      display: none;
    }
    .family-card {
      flex: 0 0 min(80vw, 24rem);
      display: flex;
      flex-direction: column;
      scroll-snap-align: start;
    }
    /* Pin the links row to the base so all four cards share one anatomy. */
    .family-card-links {
      margin-top: auto;
    }
    /* The chevron cues: quiet glass keyed to the family accent, one per
       direction; family.js retires each the moment its direction has
       nothing left (so neither ever shows without JS to drive it). Only
       the forward cue nudges — it invites, the back cue just waits. */
    .family.is-carousel .family-next,
    .family.is-carousel .family-prev {
      display: grid;
      place-items: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--fam-accent) 45%, transparent);
      background: color-mix(in srgb, var(--carbon) 74%, transparent);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: var(--fam-accent);
      cursor: pointer;
      z-index: 2;
      transition: opacity 0.3s linear, visibility 0.3s linear;
    }
    .family.is-carousel .family-next {
      right: 0.5rem;
      animation: family-nudge 2.4s var(--ease-out) infinite;
    }
    .family.is-carousel .family-prev {
      left: 0.5rem;
    }
    .family.is-carousel .family-next.is-done,
    .family.is-carousel .family-prev.is-done {
      opacity: 0;
      visibility: hidden;
    }
    .family.is-carousel .family-nav {
      display: flex;
      position: static;
      transform: none;
      justify-content: center;
      margin-top: 1.6rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .family.is-carousel .family-next {
      animation: none;
    }
  }

  /* Pinned mode — applied by family.js on desktop, non-reduced-motion only */
  .family.is-pinned .family-pin {
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* auto inline margins in a column flexbox shrink items to fit-content —
     the pinned card stack needs the full column width back */
  .family.is-pinned .family-head,
  .family.is-pinned .family-cards {
    width: 100%;
  }
  .family.is-pinned .family-cards {
    display: block;
    min-height: 46svh;
  }
  .family.is-pinned .family-card {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    visibility: hidden;
  }
  .family.is-pinned .family-field {
    display: block;
  }
  .family.is-pinned .family-nav {
    display: flex;
  }
  .family.is-pinned .family-tribar {
    left: 27%;
    width: min(52vh, 38vw);
    opacity: 0.55;
  }
  @media (min-width: 1100px) {
    .family.is-pinned .family-card {
      width: min(56%, 44rem);
      left: auto;
      right: 0;
    }
  }


/* ---- page: company profile (single-company.php) ----
   The company's own scene from the family sequence, held still: band field
   tinted by its accent, tribar at the epicentre turning slowly, epithet,
   and the four-accent rail as a real family nav. */

  .co-article ::selection {
    background: var(--accent);
    color: var(--carbon);
  }
  .co-hero {
    position: relative;
    padding: 10rem var(--space-gutter) clamp(3.5rem, 9vh, 6rem);
    overflow: clip;
    --fam-accent: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--carbon));
  }
  .co-scene {
    position: absolute;
    left: 76%;
    top: 52%;
    pointer-events: none;
  }
  .co-field {
    display: block;
    left: 0;
    top: 0;
    width: min(135vh, 100vw);
    max-width: none; /* .co-scene is a 0x0 anchor; the global svg max-width would collapse this */
  }
  .co-hero .co-tribar {
    position: absolute;
    left: 0;
    top: 0;
    width: min(44vh, 34vw);
    max-width: none;
    transform: translate(-50%, -50%);
    transform-origin: 50% 54%;
    opacity: 0.5;
    animation: co-tribar-spin 150s linear infinite;
  }
  @keyframes co-tribar-spin {
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .co-hero .co-tribar {
      animation: none;
    }
  }
  @media (max-width: 900px) {
    .co-scene {
      left: 96%;
      top: 34%;
    }
  }
  .co-hero-inner {
    position: relative;
    max-width: 52rem;
    margin-inline: auto;
  }
  .co-count {
    margin-left: 1.4rem;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.3em;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--accent) 70%, var(--ink-on-dark));
  }
  .co-logo {
    height: clamp(40px, 7vh, 60px);
    margin-top: clamp(2rem, 5vh, 3rem);
    display: flex;
    align-items: center;
  }
  .co-logo img {
    height: 100%;
    width: auto;
  }
  .co-role {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: clamp(1.6rem, 4vh, 2.4rem);
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .co-role::before {
    content: '';
    width: 1.4rem;
    height: 1px;
    background: var(--accent);
  }
  .co-title {
    margin-top: 0.8rem;
    font-size: var(--text-h2);
    color: #fff;
  }
  .co-lead {
    max-width: 48ch;
    margin-top: 1.2rem;
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--ink-on-dark-dim);
  }
  .co-domain--soon {
    display: inline-block;
    margin-top: clamp(1.4rem, 4vh, 2.4rem);
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.3rem;
  }
  /* The rail as family nav: same segments as the home scene, but links */
  .co-rail {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: clamp(2.2rem, 6vh, 3.4rem);
  }
  .co-rail-seg {
    position: relative;
  }
  .co-rail-seg::after {
    /* the 3px segment alone is too small a target */
    content: '';
    position: absolute;
    inset: -12px -6px;
  }
  .co-rail-seg:hover,
  .co-rail-seg:focus-visible {
    background: var(--accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  /* Prose body: the section labels take the company's accent */
  .co-body .po-prose h2 {
    color: color-mix(in srgb, var(--accent) 55%, var(--ink-on-light));
    border-top-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .co-others {
    padding: clamp(3rem, 8vh, 5rem) var(--space-gutter);
  }
  .co-others-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .co-others-grid {
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }
  /* Sibling cards share the family-card anatomy: spine, role, count */
  .co-other-link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.7rem 1.8rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--carbon-raised));
    border: 1px solid var(--line-on-dark);
    border-left: 0;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  .co-other-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
      180deg,
      var(--accent),
      color-mix(in srgb, var(--accent) 22%, transparent)
    );
  }
  .co-other-link:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-3px);
  }
  .co-other-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .co-other-role {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .co-other-role::before {
    content: '';
    width: 1.1rem;
    height: 1px;
    background: var(--accent);
  }
  .co-other-count {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.22em;
    color: var(--accent);
  }
  .co-other-name {
    margin-top: 1rem;
    font-size: 1.2rem;
  }
  .co-other-desc {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-dim);
  }
  .co-other-more {
    margin-top: auto;
    padding-top: 1.4rem;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }


/* ---- component: Services ---- */

  .services-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .services-title {
    margin-top: 1.2rem;
    font-size: var(--text-h2);
    max-width: 14em;
  }
  .services-list {
    margin-top: clamp(3rem, 7vh, 5.5rem);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
  }
  .services-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.1rem, 2.6vh, 1.8rem) 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
  }
  .services-name {
    font-size: var(--text-h3);
    transition: color 0.25s linear, transform 0.45s var(--ease-out);
  }
  .services-arrow {
    font-size: 1.3rem;
    color: var(--ink-dim);
    transition: transform 0.45s var(--ease-out), color 0.25s linear;
  }
  .services-row:hover .services-name {
    color: color-mix(in srgb, var(--voltage) 78%, var(--ink-on-light));
    transform: translateX(0.6rem);
  }
  .services-row:hover .services-arrow {
    color: var(--voltage);
    transform: translateX(0.4rem);
  }
  /* Floating image swatch that follows the cursor over rows (main.ts) */
  .services-swatch {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 280px;
    aspect-ratio: 3 / 2;
    border-radius: 3px;
    overflow: clip;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease;
    will-change: transform, opacity;
  }
  @media (prefers-reduced-motion: reduce) {
    .services-swatch {
      display: none;
    }
  }
  .services-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media (pointer: coarse) {
    .services-swatch {
      display: none;
    }
  }


/* ---- component: Proof ---- */

  .proof {
    background: var(--paper-dim);
  }
  .proof-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(2.5rem, 5vw, 4rem);
    margin: clamp(2.5rem, 6vh, 4.5rem) 0 0;
  }
  .proof-stat {
    border-top: 1px solid var(--line);
    padding-top: 1.4rem;
  }
  .proof-value {
    font-size: var(--text-stat);
    font-variant-numeric: tabular-nums;
    color: #2c7d67; /* voltage darkened for contrast on the bone ground */
    margin: 0;
  }
  .proof-label {
    margin-top: 0.8rem;
    max-width: 26ch;
    color: var(--ink-dim);
  }
  /* Handsets: auto-fit collapses to one long column, so compose a 2-up
     board instead — numerals scaled to hold a half-width cell, and an
     odd last stat takes the full row rather than leaving an orphan. */
  @media (max-width: 640px) {
    .proof-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2.2rem 1.5rem;
    }
    .proof-stat:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
    .proof-value {
      font-size: clamp(1.8rem, 1.1rem + 3.6vw, 2.6rem);
    }
    .proof-label {
      font-size: 0.92rem;
    }
  }
  .proof-marquee {
    margin-top: var(--space-section);
    padding: 1.4rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: clip;
  }
  .proof-track {
    display: flex;
    gap: 4.5rem;
    width: max-content;
    white-space: nowrap;
  }
  .proof-item {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .proof-item:nth-child(6n + 1) {
    color: var(--voltage);
  }


/* ---- component: Quotes ---- */

  .quotes-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .quotes-carousel {
    position: relative;
  }
  .quotes-prev,
  .quotes-next {
    display: none;
  }
  /* One flow holds every quote: the featured spans the full row, the
     supporting pair sits beneath — the same shape the old markup had. */
  .quotes-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: clamp(3rem, 7vh, 5rem) clamp(2rem, 4vw, 4rem);
    margin-top: clamp(2.5rem, 6vh, 4rem);
  }
  .quotes-featured {
    margin: 0;
    grid-column: 1 / -1;
  }
  .quotes-featured blockquote {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1rem + 1.9vw, 2.6rem);
    font-weight: 300;
    line-height: 1.3;
    max-width: 34em;
    text-wrap: balance;
  }
  .quotes-featured figcaption,
  .quotes-small figcaption {
    margin-top: 1.3rem;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .quotes-small {
    margin: 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
  }
  .quotes-small blockquote {
    color: var(--ink-dim);
    max-width: 48ch;
  }
  /* Small screens: the stack becomes a snap carousel — every quote gets
     the same card anatomy (hairline top, attribution pinned to the base),
     the next card peeks in from the edge, and the family strip's chevron
     cues return, re-dressed for this light ground. */
  @media (max-width: 720px) {
    .quotes-flow {
      display: flex;
      gap: 1.1rem;
      margin-inline: calc(-1 * var(--space-gutter));
      padding-inline: var(--space-gutter);
      scroll-padding-inline: var(--space-gutter);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    .quotes-flow::-webkit-scrollbar {
      display: none;
    }
    .quotes-featured,
    .quotes-small {
      flex: 0 0 min(82vw, 26rem);
      display: flex;
      flex-direction: column;
      padding-top: 1.4rem;
      border-top: 1px solid var(--line);
      scroll-snap-align: start;
    }
    .quotes-featured blockquote {
      font-size: clamp(1.15rem, 1rem + 1.2vw, 1.4rem);
      line-height: 1.45;
    }
    .quotes-featured figcaption,
    .quotes-small figcaption {
      margin-top: auto;
      padding-top: 1.3rem;
    }
    /* The cues sit as a quiet pair beneath the strip, right-aligned —
       these are bare text cards, so floating cues would sit on the words.
       Hidden cues keep their footprint (visibility, not display) so the
       pair never causes a layout jump. */
    .quotes.is-carousel .quotes-carousel {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 1.5rem 0.6rem;
      align-items: center;
    }
    .quotes.is-carousel .quotes-flow {
      grid-row: 1;
      grid-column: 1 / -1;
    }
    .quotes.is-carousel .quotes-prev,
    .quotes.is-carousel .quotes-next {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--voltage) 55%, transparent);
      background: transparent;
      color: #2c7d67; /* voltage darkened for contrast on the bone ground */
      cursor: pointer;
      transition: opacity 0.3s linear, visibility 0.3s linear;
    }
    .quotes.is-carousel .quotes-prev {
      grid-row: 2;
      grid-column: 2;
    }
    .quotes.is-carousel .quotes-next {
      grid-row: 2;
      grid-column: 3;
      animation: family-nudge 2.4s var(--ease-out) infinite;
    }
    .quotes.is-carousel .quotes-next.is-done,
    .quotes.is-carousel .quotes-prev.is-done {
      opacity: 0;
      visibility: hidden;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .quotes.is-carousel .quotes-next {
      animation: none;
    }
  }


/* ---- component: Credo ---- */

  .credo-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .credo-line {
    font-size: var(--text-h2);
    max-width: 16em;
  }
  /* Word-reveal start state lives in global.css (.credo-word) */
  .credo-approach {
    max-width: var(--measure);
    margin-top: clamp(2rem, 5vh, 3.5rem);
    font-size: var(--text-lead);
    color: var(--ink-dim);
  }


/* ---- component: PageHero ---- */

  .page-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 62svh;
    padding: var(--topbar-clear) var(--space-gutter) clamp(3rem, 7vh, 5.5rem);
    overflow: clip;
  }
  .page-hero--photo {
    min-height: 74svh;
  }
  .page-hero-photo,
  .page-hero-photo img,
  .page-hero-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .page-hero-photo img {
    object-fit: cover;
    scale: 1.06;
    transform-origin: center top;
  }
  .page-hero-scrim {
    background:
      linear-gradient(to bottom, rgba(23, 23, 23, 0.5), rgba(23, 23, 23, 0.18) 40%, var(--carbon) 99%),
      linear-gradient(98deg, rgba(23, 23, 23, 0.5) 0%, rgba(23, 23, 23, 0.1) 60%);
  }
  .page-hero-inner {
    position: relative;
    max-width: 88rem;
    width: 100%;
    margin-inline: auto;
  }
  .page-hero-title {
    max-width: 13em;
    margin-top: 1.4rem;
    font-size: var(--text-h2);
    color: #fff;
  }
  .page-hero-lead {
    max-width: 58ch;
    margin-top: 1.6rem;
    font-size: var(--text-lead);
    color: var(--ink-on-dark-dim);
  }
  @media (prefers-reduced-motion: reduce) {
    .page-hero-photo img {
      scale: 1;
    }
  }


/* ---- component: Newsletter ---- */

  .nl--dark {
    background: var(--carbon-raised);
    color: var(--ink-on-dark);
    --nl-line: var(--line-on-dark);
    --nl-dim: var(--ink-on-dark-dim);
  }
  .nl--light {
    background: var(--paper-dim);
    color: var(--ink-on-light);
    --nl-line: var(--line-on-light);
    --nl-dim: var(--ink-on-light-dim);
  }
  .nl-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 4rem;
    max-width: 88rem;
    margin-inline: auto;
    padding: clamp(2.5rem, 6vh, 4rem) var(--space-gutter);
    border-top: 1px solid var(--nl-line);
  }
  .nl-title {
    font-size: var(--text-h3);
  }
  .nl-sub {
    margin-top: 0.4rem;
    color: var(--nl-dim);
  }
  .nl-form {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
  }
  .nl-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .nl-input {
    min-width: min(22rem, 70vw);
    padding: 0.95rem 1.3rem;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid var(--nl-line);
    border-radius: var(--radius-pill);
  }
  .nl-input::placeholder {
    color: var(--nl-dim);
  }
  .nl-input:focus {
    outline: 2px solid var(--voltage);
    outline-offset: 2px;
  }


/* ---- component: MarketIntel ---- */

  .intel {
    background: var(--paper-dim);
    --fam-accent: var(--voltage);
  }
  .intel-body {
    position: relative;
    overflow: clip;
  }
  /* the field, held still — fills the section's open right side */
  .intel-scene {
    position: absolute;
    left: 84%;
    top: 52%;
    pointer-events: none;
    opacity: 0.8;
  }
  .intel-field {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: min(64rem, 90vw);
    max-width: none;
    transform: translate(-50%, -50%);
  }
  .intel-scene .family-band-edge {
    /* on paper the shared edge mix is too faint */
    stroke: color-mix(in srgb, var(--voltage) 42%, transparent);
  }
  .intel-body .intel-tribar {
    position: absolute;
    left: 0;
    top: 0;
    width: min(15rem, 24vw);
    max-width: none;
    transform: translate(-50%, -50%);
    transform-origin: 50% 54%;
    opacity: 0.5;
    animation: co-tribar-spin 150s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .intel-body .intel-tribar {
      animation: none;
    }
  }
  @media (max-width: 900px) {
    .intel-scene {
      left: 97%;
      top: 42%;
    }
  }
  /* the ticker runs as a dark divider band between the light sections */
  .intel-ticker {
    padding: 1.1rem 0;
    background: var(--carbon);
    border-top: 1px solid var(--line-on-dark);
    border-bottom: 1px solid var(--line-on-dark);
    overflow: clip;
  }
  .intel-track {
    display: flex;
    gap: 3.5rem;
    width: max-content;
    white-space: nowrap;
  }
  .intel-item {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }
  .intel-sep {
    display: inline-block;
    color: var(--voltage);
    margin-left: 3.5rem;
  }
  .intel-inner {
    position: relative;
    max-width: 88rem;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 3rem;
  }
  .intel-title {
    margin-top: 1.2rem;
    font-size: var(--text-h2);
  }
  .intel-list {
    margin: clamp(2rem, 5vh, 3.2rem) 0 0;
    padding: 0;
    list-style: none;
  }
  .intel-list li + li {
    margin-top: 0.7rem;
  }
  .intel-list a {
    font-family: var(--font-utility);
    font-size: calc(var(--text-mono) * 1.15);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-dim);
    background-image: linear-gradient(var(--voltage), var(--voltage));
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 0 100%;
    padding-bottom: 0.35rem;
    transition: background-size 0.45s var(--ease-out), color 0.25s linear;
  }
  .intel-list a:hover {
    color: var(--ink);
    background-size: 100% 1px;
  }


/* ---- component: LiveTicker ---- */
/* Live Engie close prices as a marquee of contract chips. Colour carries
   only day-direction (voltage up / signal down — the bias-chip convention);
   identity stays in text, and every delta also carries an arrow + sign. */

  .ticker {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--carbon);
    border-top: 1px solid var(--line-on-dark);
    border-bottom: 1px solid var(--line-on-dark);
    color: var(--ink-on-dark);
    --tk-up: var(--voltage);
    --tk-down: #f2705d; /* signal lifted a step for small text on carbon */
    --tk-flat: var(--ink-on-dark-dim);
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tk-viewport {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: clip;
  }
  .tk-track {
    display: flex;
    width: max-content;
  }
  .tk-strip {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tk-item {
    display: flex;
    border-right: 1px solid var(--line-on-dark);
  }

  .tk-chip {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 1.2rem;
    row-gap: 0.15rem;
    align-items: center;
    padding: 0.7rem 1.6rem;
    text-decoration: none;
    transition: background-color 0.3s var(--ease-out);
  }
  .tk-chip[data-dir='up'] { --tk-dir: var(--tk-up); }
  .tk-chip[data-dir='down'] { --tk-dir: var(--tk-down); }
  .tk-chip[data-dir='flat'] { --tk-dir: var(--tk-flat); }
  .tk-chip:hover,
  .tk-chip:focus-visible {
    background: var(--carbon-raised);
  }
  .tk-chip:focus-visible {
    outline: 2px solid var(--voltage);
    outline-offset: -2px;
  }

  .tk-meta {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    grid-column: 1;
    grid-row: 1;
  }
  .tk-tag {
    font-family: var(--font-utility);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
    border: 1px solid var(--line-on-dark);
    border-radius: 3px;
    padding: 0.1em 0.45em 0.08em;
  }
  .tk-name {
    font-family: var(--font-utility);
    font-size: calc(var(--text-mono) * 0.92);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
    transition: color 0.3s var(--ease-out);
  }
  .tk-chip:hover .tk-name,
  .tk-chip:focus-visible .tk-name {
    color: var(--ink-on-dark);
  }

  .tk-quote {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    grid-column: 1;
    grid-row: 2;
    white-space: nowrap;
  }
  .tk-price {
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--ink-on-dark);
  }
  .tk-unit {
    font-style: normal;
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--ink-on-dark-dim);
    margin-left: 0.3em;
  }
  .tk-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-utility);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--tk-dir);
  }
  .tk-arrow {
    width: 8px;
    height: 7px;
    flex: none;
  }
  .tk-spark {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 64px;
    height: 22px;
    color: var(--tk-dir);
    opacity: 0.85;
    transition: opacity 0.3s var(--ease-out);
  }
  .tk-chip:hover .tk-spark,
  .tk-chip:focus-visible .tk-spark {
    opacity: 1;
  }

  /* edge fades over the scrolling strip */
  .tk-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3.5rem;
    pointer-events: none;
    z-index: 1;
  }
  .tk-fade--left {
    left: 0;
    background: linear-gradient(90deg, var(--carbon), transparent);
  }
  .tk-fade--right {
    right: 0;
    background: linear-gradient(270deg, var(--carbon), transparent);
  }

  /* hover/focus detail card */
  .tk-card {
    position: absolute;
    top: calc(100% + 0.85rem);
    left: 0;
    width: min(20rem, 92vw);
    padding: 1.05rem 1.2rem 0.95rem;
    background: var(--carbon-raised);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-card);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    z-index: 40;
    color: var(--ink-on-dark);
  }
  .tk-card[data-dir='up'] { --tk-dir: var(--tk-up); }
  .tk-card[data-dir='down'] { --tk-dir: var(--tk-down); }
  .tk-card[data-dir='flat'] { --tk-dir: var(--tk-flat); }
  .tk-card::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: var(--tk-caret-x, 50%);
    width: 10px;
    height: 10px;
    background: var(--carbon-raised);
    border-left: 1px solid var(--line-on-dark);
    border-top: 1px solid var(--line-on-dark);
    transform: translate(-50%, 55%) rotate(45deg);
  }
  .tk-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
  }
  .tk-card-group {
    font-family: var(--font-utility);
    font-size: calc(var(--text-mono) * 0.88);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }
  .tk-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 200;
    font-size: 1.35rem;
    letter-spacing: 0.01em;
  }
  .tk-card-quote {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin: 0.35rem 0 0.75rem;
    white-space: nowrap;
  }
  .tk-card-price {
    font-size: 1.85rem;
    font-weight: 300;
  }
  .tk-card-price .tk-unit {
    font-size: 0.72rem;
  }
  .tk-card-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-utility);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--tk-dir);
  }
  .tk-card-chart {
    position: relative;
  }
  .tk-card-chart svg {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    color: var(--tk-dir);
  }
  .tk-card-readout {
    position: absolute;
    top: -0.15rem;
    right: 0;
    margin: 0;
    font-family: var(--font-utility);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
    opacity: 0;
    transition: opacity 0.2s linear;
  }
  .tk-card-readout.is-on {
    opacity: 1;
  }
  .tk-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.7rem 0 0;
    font-family: var(--font-utility);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }

  /* static fallback: no JS, or reduced motion — a hand-scrollable strip */
  .no-js .tk-viewport,
  .ticker.is-static .tk-viewport {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-on-dark) transparent;
  }
  .no-js .tk-strip[aria-hidden],
  .ticker.is-static .tk-strip[aria-hidden] {
    display: none;
  }

  /* Handsets: no ticker at all — the strip costs a third of the small
     viewport's chrome for glanceable desk data. --topbar-clear shrinks
     with it (see the :root override) so heroes and the menu stay snug. */
  @media (max-width: 720px) {
    .ticker {
      display: none;
    }
  }


/* ---- component: BiasChip ---- */

  .bias {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0.9em;
    border-radius: var(--radius-pill);
    border: 1px solid currentColor;
    font-family: var(--font-utility);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .bias--bull,
  .bias--lean-bull {
    color: #2c7d67; /* voltage darkened for small-text contrast on light */
  }
  .bias--bear,
  .bias--lean-bear {
    color: #bb3a29; /* signal darkened likewise */
  }
  .bias--flat {
    color: var(--ink-dim, #6b7473);
  }
  .ground-dark .bias--bull,
  .ground-dark .bias--lean-bull {
    color: var(--voltage);
  }
  .ground-dark .bias--bear,
  .ground-dark .bias--lean-bear {
    color: var(--signal);
  }
  .ground-dark .bias--flat {
    color: var(--ink-on-dark-dim);
  }


/* ---- component: Arrow ---- */

  .arrow-glyph {
    display: inline-block;
    vertical-align: -0.12em;
    flex: 0 0 auto;
  }


/* ---- component: Preloader ---- */

  .preloader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--carbon);
    /* Safety valve: if the script is slow to boot (throttled devices), the
       overlay dismisses itself so it can never block the page. main.ts adds
       .preloader--js to take over before this fires. */
    animation: preloader-auto 0.35s ease 0.95s forwards;
  }
  .preloader--js {
    animation: none;
  }
  @keyframes preloader-auto {
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  .preloader-mark {
    position: relative;
    width: min(30vmin, 200px);
  }
  .preloader-mark .preloader-fill {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  html.js .preloader .tribar-stroke {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }
  /* No-JS never sees the preloader */
  html.no-js .preloader {
    display: none;
  }


/* ---- Layout ---- */

  .skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 200;
    padding: 0.6rem 1rem;
    background: var(--voltage);
    color: var(--carbon);
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    text-decoration: none;
    border-radius: 2px;
    transform: translateY(-300%);
  }
  .skip-link:focus {
    transform: none;
  }

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 150;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--voltage);
    pointer-events: none;
    opacity: 0;
    transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out),
      margin 0.25s var(--ease-out), opacity 0.25s linear;
  }
  html.cursor-active .cursor {
    opacity: 0.9;
  }
  html.cursor-grow .cursor {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    opacity: 0.28;
  }
  @media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .cursor {
      display: none;
    }
  }


/* ---- page: about ---- */

  .about-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr);
    gap: 2rem 5rem;
    max-width: 88rem;
    margin-inline: auto;
  }
  .about-side {
    padding-top: 0.7rem;
  }
  .about-title {
    font-size: var(--text-h2);
    max-width: 15em;
  }
  .about-body {
    max-width: var(--measure);
    margin-top: 1.6rem;
    font-size: var(--text-lead);
    color: var(--ink-dim);
  }
  .about-photo {
    height: clamp(320px, 56vh, 620px);
  }
  .about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .about-pull-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .about-pull-quote {
    margin: 2rem 0 0;
    font-size: var(--text-h2);
    max-width: 18em;
  }
  .about-method {
    margin-top: clamp(2.5rem, 6vh, 4rem);
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    max-width: 34ch;
    color: var(--ink-dim);
  }
  @media (max-width: 900px) {
    .about-inner {
      grid-template-columns: 1fr;
    }
  }


/* ---- page: services landing ---- */

  .svcl-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .svcl-head-title {
    margin-top: 1.2rem;
    font-size: var(--text-h2);
    max-width: 14em;
  }
  .svcl-head-lead {
    max-width: var(--measure);
    margin-top: 1.6rem;
    font-size: var(--text-lead);
    color: var(--ink-dim);
  }
  .svcl-list {
    margin: clamp(3rem, 7vh, 5.5rem) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
  }
  .svcl-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: clamp(2.5rem, 6vh, 4.5rem) 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
  }
  .svcl-media {
    grid-column: 1 / span 5;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-card);
    overflow: clip;
  }
  .svcl-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.9s var(--ease-out);
  }
  .svcl-body {
    grid-column: 7 / -1;
  }
  /* Every other chapter mirrors — photo right, copy left */
  .svcl-list li:nth-child(even) .svcl-media {
    grid-column: 8 / -1;
    grid-row: 1;
  }
  .svcl-list li:nth-child(even) .svcl-body {
    grid-column: 1 / span 6;
    grid-row: 1;
  }
  .svcl-no {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.2em;
    color: color-mix(in srgb, var(--voltage) 42%, var(--ink-on-light));
  }
  .svcl-title {
    margin-top: 0.8rem;
    font-size: var(--text-h3);
    transition: color 0.25s linear;
  }
  .svcl-lead {
    max-width: 52ch;
    margin-top: 1.2rem;
    color: var(--ink-dim);
  }
  .svcl-more {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.8rem;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
    transition: color 0.25s linear;
  }
  .svcl-more .arrow-glyph {
    transition: transform 0.45s var(--ease-out);
  }
  .svcl-row:hover .svcl-media img {
    scale: 1.05;
  }
  .svcl-row:hover .svcl-title {
    color: color-mix(in srgb, var(--voltage) 78%, var(--ink-on-light));
  }
  .svcl-row:hover .svcl-more {
    color: var(--voltage);
  }
  .svcl-row:hover .svcl-more .arrow-glyph {
    transform: translateX(0.35rem);
  }
  @media (max-width: 760px) {
    .svcl-row {
      grid-template-columns: 1fr;
      gap: 1.6rem;
    }
    .svcl-media,
    .svcl-body,
    .svcl-list li:nth-child(even) .svcl-media,
    .svcl-list li:nth-child(even) .svcl-body {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .svcl-row:hover .svcl-media img {
      scale: 1;
    }
  }


/* ---- page: service single ---- */

  .svcs-hero {
    padding: clamp(var(--topbar-clear), 16vh, 13rem) var(--space-gutter) clamp(3rem, 8vh, 6rem);
    overflow: clip;
  }
  .svcs-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    max-width: 88rem;
    margin-inline: auto;
  }
  /* CSS-only entrance so first paint never waits on JS (mirrors .page-hero-inner) */
  html.js .svcs-hero-copy {
    animation: page-hero-in 0.8s var(--ease-out) 0.1s backwards;
  }
  html.js .svcs-hero-media {
    animation: page-hero-in 0.9s var(--ease-out) 0.25s backwards;
  }
  .svcs-kicker {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
  }
  .svcs-kicker-back {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--voltage);
    text-decoration: none;
  }
  .svcs-kicker-back:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .svcs-kicker-no {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.2em;
    color: var(--ink-on-dark-dim);
    font-variant-numeric: tabular-nums;
  }
  .svcs-title {
    margin-top: 1.4rem;
    font-size: var(--text-h2);
    max-width: 11em;
    color: #fff;
  }
  .svcs-lead {
    max-width: 52ch;
    margin-top: 1.6rem;
    font-size: var(--text-lead);
    color: var(--ink-on-dark-dim);
  }
  .svcs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.8rem;
    margin-top: clamp(2rem, 5vh, 3rem);
  }
  .svcs-hero-phone {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-on-dark-dim);
    text-decoration: none;
    transition: color 0.2s linear;
  }
  .svcs-hero-phone:hover {
    color: var(--ink-on-dark);
  }
  /* The licensed original in full colour — deep shadow lifts it off the carbon */
  .svcs-hero-media {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-card);
    overflow: clip;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  }
  .svcs-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .svcs-inner {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.6fr);
    gap: 3rem 6rem;
    max-width: 88rem;
    margin-inline: auto;
    padding: var(--space-section) var(--space-gutter);
  }
  .svcs-index {
    position: sticky;
    top: 7rem;
    align-self: start;
    max-height: calc(100svh - 9rem);
    overflow-y: auto;
  }
  .svcs-index-label {
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--voltage);
  }
  .svcs-index ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--line);
  }
  .svcs-index a {
    display: flex;
    gap: 0.8rem;
    padding: 0.55rem 0 0.55rem 1.2rem;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--ink-dim);
    transition: color 0.25s linear, border-color 0.25s linear;
  }
  .svcs-index-no {
    font-family: var(--font-utility);
    font-size: 0.72rem;
    padding-top: 0.15em;
    color: color-mix(in srgb, var(--voltage) 42%, var(--ink-on-light));
  }
  .svcs-index a:hover {
    color: var(--ink);
  }
  .svcs-index a.is-active {
    color: var(--ink);
    border-left-color: var(--voltage);
  }
  .svcs-content > .svc-body:first-child {
    margin-top: 0;
    font-size: var(--text-lead);
  }
  /* Neighbouring services — full-colour photo cards, edge to edge */
  .svcs-adj {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line-on-light);
    border-top: 1px solid var(--line-on-light);
  }
  .svcs-adj-card {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(16rem, 36vh, 24rem);
    overflow: clip;
    text-decoration: none;
    background: var(--carbon);
  }
  .svcs-adj-media,
  .svcs-adj-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .svcs-adj-media img {
    object-fit: cover;
    opacity: 0.85;
    transition: scale 0.9s var(--ease-out);
  }
  .svcs-adj-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23, 23, 23, 0.82), rgba(23, 23, 23, 0.12) 60%);
  }
  .svcs-adj-text {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.6rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }
  .svcs-adj-dir {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(245, 245, 244, 0.72);
  }
  .svcs-adj-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: var(--text-h3);
    color: #fff;
  }
  .svcs-adj-title .arrow-glyph {
    flex: none;
    transition: transform 0.45s var(--ease-out);
  }
  .svcs-adj-card--prev .svcs-adj-title .arrow-glyph {
    order: -1;
    rotate: 180deg;
  }
  .svcs-adj-card:hover .svcs-adj-media img {
    scale: 1.05;
  }
  .svcs-adj-card:hover .arrow-glyph {
    transform: translateX(0.35rem);
  }
  .svcs-adj-card--prev:hover .arrow-glyph {
    transform: translateX(-0.35rem);
  }
  @media (max-width: 900px) {
    .svcs-hero-inner {
      grid-template-columns: 1fr;
    }
    .svcs-hero-media {
      aspect-ratio: 3 / 2;
    }
    .svcs-inner {
      grid-template-columns: 1fr;
    }
    .svcs-index {
      display: none;
    }
  }
  @media (max-width: 760px) {
    .svcs-adj {
      grid-template-columns: 1fr;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .svcs-hero-copy,
    html.js .svcs-hero-media {
      animation: none;
    }
    .svcs-adj-card:hover .svcs-adj-media img {
      scale: 1;
    }
  }


/* ---- page: compliance landing ---- */
/* The scheme briefs as a photo diptych — full-bleed licensed photography on
   the dark ground, facts as glass chips. Deliberately unlike the services'
   light editorial rows. */

  .cmp-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--line-on-dark);
    border-top: 1px solid var(--line-on-dark);
    border-bottom: 1px solid var(--line-on-dark);
  }
  .cmp-panel {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(30rem, 82svh, 46rem);
    overflow: clip;
    text-decoration: none;
    color: var(--ink-on-dark);
    background: var(--carbon-raised);
  }
  .cmp-panel-photo,
  .cmp-panel-photo img,
  .cmp-panel-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .cmp-panel-photo img {
    object-fit: cover;
    transition: scale 0.9s var(--ease-out);
  }
  .cmp-panel-scrim {
    background: linear-gradient(to top, rgba(23, 23, 23, 0.88), rgba(23, 23, 23, 0.34) 46%, rgba(23, 23, 23, 0.16) 75%);
  }
  .cmp-panel-body {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: 1rem;
    max-width: 38rem;
    padding: clamp(1.8rem, 4vw, 3.2rem);
  }
  .cmp-panel-kicker {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--voltage);
  }
  .cmp-panel-title {
    font-size: var(--text-h2);
    color: #fff;
  }
  .cmp-panel-lead {
    max-width: 46ch;
    color: rgba(245, 245, 244, 0.82);
    text-shadow: 0 1px 18px rgba(23, 23, 23, 0.6);
  }
  /* Headline thresholds as glass chips over the photograph */
  .cmp-panel-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0.4rem 0 0;
  }
  .cmp-chip {
    padding: 0.6rem 1rem;
    border: 1px solid rgba(245, 245, 244, 0.22);
    border-radius: 3px;
    background: rgba(23, 23, 23, 0.38);
    backdrop-filter: blur(6px);
  }
  .cmp-chip dt {
    font-family: var(--font-utility);
    font-size: calc(var(--text-mono) * 0.86);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }
  .cmp-chip dd {
    margin: 0.15rem 0 0;
    font-family: var(--font-display);
    font-weight: 500;
    color: #fff;
  }
  .cmp-panel-more {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.6rem;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
    transition: color 0.25s linear;
  }
  .cmp-panel-more .arrow-glyph {
    transition: transform 0.45s var(--ease-out);
  }
  .cmp-panel:hover .cmp-panel-photo img {
    scale: 1.04;
  }
  .cmp-panel:hover .cmp-panel-more {
    color: var(--voltage);
  }
  .cmp-panel:hover .cmp-panel-more .arrow-glyph {
    transform: translateX(0.35rem);
  }
  .cmp-wider-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .cmp-wider-title {
    margin-top: 1.2rem;
    font-size: var(--text-h2);
    max-width: 15em;
  }
  .cmp-wider-lead {
    max-width: var(--measure);
    margin-top: 1.6rem;
    font-size: var(--text-lead);
    color: var(--ink-dim);
  }
  .cmp-wider-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: clamp(2rem, 5vh, 3rem);
  }
  /* Ghost tone recut for the light ground */
  .cmp-wider-ghost {
    border-color: var(--line-on-light);
    color: var(--ink-on-light);
  }
  @media (max-width: 860px) {
    .cmp-duo {
      grid-template-columns: 1fr;
    }
    .cmp-panel {
      min-height: clamp(26rem, 68svh, 34rem);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cmp-panel:hover .cmp-panel-photo img {
      scale: 1;
    }
  }


/* ---- page: compliance brief (single) ---- */

  .cmps-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 78svh;
    /* extra bottom room — the facts bar floats up across the seam */
    padding: calc(var(--topbar-clear) + 2rem) var(--space-gutter) clamp(6.5rem, 13vh, 9.5rem);
    overflow: clip;
  }
  .cmps-hero-photo,
  .cmps-hero-photo img,
  .cmps-hero-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .cmps-hero-photo img {
    object-fit: cover;
    scale: 1.05;
    transform-origin: center top;
  }
  .cmps-hero-scrim {
    background:
      linear-gradient(to bottom, rgba(23, 23, 23, 0.55), rgba(23, 23, 23, 0.22) 42%, rgba(23, 23, 23, 0.86) 100%),
      linear-gradient(98deg, rgba(23, 23, 23, 0.5) 0%, rgba(23, 23, 23, 0.12) 58%);
  }
  .cmps-hero-inner {
    position: relative;
    max-width: 88rem;
    width: 100%;
    margin-inline: auto;
  }
  html.js .cmps-hero-inner {
    animation: page-hero-in 0.8s var(--ease-out) 0.1s backwards;
  }
  .cmps-kicker {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
  }
  .cmps-kicker a {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--voltage);
    text-decoration: none;
  }
  .cmps-kicker a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .cmps-kicker span {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
    font-variant-numeric: tabular-nums;
  }
  .cmps-title {
    margin-top: 1.2rem;
    font-size: calc(var(--text-hero) * 0.85);
    max-width: 10em;
    color: #fff;
  }
  .cmps-lead {
    max-width: 54ch;
    margin-top: 1.4rem;
    font-size: var(--text-lead);
    color: rgba(245, 245, 244, 0.85);
    text-shadow: 0 1px 20px rgba(23, 23, 23, 0.6);
  }
  .cmps-body {
    position: relative;
    padding: 0 var(--space-gutter) var(--space-section);
  }
  /* The dossier's data sheet — floats up over the hero seam */
  .cmps-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    max-width: 88rem;
    margin: -3.5rem auto 0;
    background: var(--line-on-light);
    border: 1px solid var(--line-on-light);
    border-radius: var(--radius-card);
    overflow: clip;
    box-shadow: 0 24px 60px rgba(23, 23, 23, 0.18);
  }
  .cmps-fact {
    background: var(--paper);
    padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.2rem, 2.5vw, 2rem);
  }
  .cmps-fact dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2.3rem);
    line-height: 1.1;
    color: #2c7d67; /* voltage darkened for contrast on paper */
    font-variant-numeric: tabular-nums;
  }
  .cmps-fact dt {
    margin-top: 0.5rem;
    font-family: var(--font-utility);
    font-size: calc(var(--text-mono) * 0.92);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .cmps-inner {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(16rem, 1fr);
    gap: 3rem 5rem;
    max-width: 88rem;
    margin: clamp(3rem, 7vh, 5rem) auto 0;
  }
  /* Dossier section headings — a drawn voltage tick above each */
  .cmps-content .wp-block-heading {
    margin-top: clamp(2.8rem, 6vh, 4rem);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-h3);
    line-height: 1.15;
  }
  .cmps-content .wp-block-heading::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-bottom: 1rem;
    background: var(--voltage);
  }
  .cmps-p {
    max-width: 62ch;
    margin-top: 1.4rem;
    color: var(--ink-dim);
  }
  /* The opening paragraph reads as the standfirst */
  .cmps-content > .cmps-p:first-child {
    margin-top: 0;
    font-size: var(--text-lead);
    color: var(--ink);
  }
  .cmp-list-label {
    max-width: 62ch;
    margin-top: 2rem;
    font-weight: 600;
    color: var(--ink);
  }
  /* Criteria as tick-marked checklists */
  .cmps-content .wp-block-list {
    display: grid;
    gap: 0.9rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
  }
  .cmps-content .wp-block-list li {
    position: relative;
    max-width: 62ch;
    padding-left: 2.4rem;
    color: var(--ink-dim);
  }
  .cmps-content .wp-block-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.12em;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--voltage) 55%, var(--paper));
    background: color-mix(in srgb, var(--voltage) 12%, var(--paper));
  }
  .cmps-content .wp-block-list li::after {
    content: '';
    position: absolute;
    left: 0.42rem;
    top: calc(0.12em + 0.4rem);
    width: 0.52rem;
    height: 0.28rem;
    border-left: 2px solid #2c7d67;
    border-bottom: 2px solid #2c7d67;
    transform: rotate(-45deg);
  }
  .cmps-aside {
    position: sticky;
    top: 8rem;
    align-self: start;
  }
  .cmps-card {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
    padding: 1.8rem;
    border-radius: var(--radius-card);
    background: var(--carbon);
    color: var(--ink-on-dark);
  }
  .cmps-card-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--voltage);
  }
  .cmps-card-text {
    font-size: 0.95rem;
    color: var(--ink-on-dark-dim);
  }
  .cmps-card-phone {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-on-dark-dim);
    text-decoration: none;
    transition: color 0.2s linear;
  }
  .cmps-card-phone:hover {
    color: var(--ink-on-dark);
  }
  .cmps-aside-links {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
  }
  .cmps-aside-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0.2rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
    text-decoration: none;
    color: var(--ink-dim);
    transition: color 0.25s linear;
  }
  .cmps-aside-links a:hover {
    color: var(--ink);
  }
  .cmps-aside-links .arrow-glyph {
    flex: none;
    color: var(--voltage);
  }
  /* The other brief, full width */
  .cmps-next {
    position: relative;
    display: grid;
    align-items: center;
    min-height: clamp(14rem, 34vh, 20rem);
    overflow: clip;
    text-decoration: none;
    background: var(--carbon);
  }
  .cmps-next-photo,
  .cmps-next-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .cmps-next-photo img {
    object-fit: cover;
    opacity: 0.8;
    transition: scale 0.9s var(--ease-out);
  }
  .cmps-next::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(98deg, rgba(23, 23, 23, 0.85) 20%, rgba(23, 23, 23, 0.28) 75%);
  }
  .cmps-next-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.6rem;
    width: 100%;
    max-width: 88rem;
    margin-inline: auto;
    padding: clamp(1.8rem, 4vw, 2.5rem) var(--space-gutter);
  }
  .cmps-next-dir {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(245, 245, 244, 0.72);
  }
  .cmps-next-title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: var(--text-h2);
    color: #fff;
  }
  .cmps-next-title .arrow-glyph {
    flex: none;
    font-size: 0.6em;
    transition: transform 0.45s var(--ease-out);
  }
  .cmps-next:hover .cmps-next-photo img {
    scale: 1.04;
  }
  .cmps-next:hover .arrow-glyph {
    transform: translateX(0.35rem);
  }
  @media (max-width: 900px) {
    .cmps-inner {
      grid-template-columns: 1fr;
    }
    .cmps-aside {
      position: static;
    }
    .cmps-facts {
      margin-top: -2.5rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .cmps-hero-inner {
      animation: none;
    }
    .cmps-hero-photo img,
    .cmps-next:hover .cmps-next-photo img {
      scale: 1;
    }
  }


/* ---- service content flow (shared by the ICD blocks) ---- */

  .svc-body {
    max-width: var(--measure);
    margin-top: 1.4rem;
    color: var(--ink-dim);
  }
  /* Sub-topic headings inside a service (compliance: SECR, ESOS, CCA, …) */
  .svcs-content .wp-block-heading {
    margin-top: clamp(2.4rem, 5vh, 3.4rem);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: calc(var(--text-h3) * 0.82);
    line-height: 1.15;
    letter-spacing: -0.005em;
  }
  .svc-terms {
    margin: 2.2rem 0 0;
    display: grid;
    gap: 1rem;
  }
  .svc-term {
    display: grid;
    grid-template-columns: minmax(7rem, 0.6fr) minmax(0, 2.8fr);
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--line);
  }
  .svc-term dt {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--voltage) 42%, var(--ink-on-light));
    padding-top: 0.15rem;
  }
  .svc-term dd {
    margin: 0;
    color: var(--ink-dim);
  }
  .svc-points {
    margin-top: 2.2rem;
  }
  .svc-points-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--voltage);
  }
  .svc-points ul {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 3rem;
  }
  .svc-points li {
    break-inside: avoid;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-dim);
    font-size: 0.95rem;
  }
  .svc-closing {
    max-width: var(--measure);
    margin-top: 2rem;
    font-size: var(--text-lead);
  }
  .svc-cta-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .svc-cta-title {
    font-size: var(--text-h2);
  }
  .svc-cta-btn {
    margin-top: clamp(2rem, 5vh, 3.2rem);
  }
  .svc-cta-note {
    margin-top: 2rem;
    color: var(--ink-dim);
    max-width: 52ch;
  }
  .svc-cta-note a {
    color: var(--ink-on-dark);
  }
  @media (max-width: 900px) {
    .svc-points ul {
      columns: 1;
    }
    .svc-term {
      grid-template-columns: 1fr;
      gap: 0.4rem;
    }
  }


/* ---- page: market-intelligence ---- */

  .mi {
    position: relative;
    background: var(--carbon-raised);
  }
  .mi-ticker,
  .mi-statement,
  .mi-reports {
    position: relative;
    z-index: 1;
  }
  .mi-ticker {
    padding: 1.1rem 0;
    border-top: 1px solid var(--line-on-dark);
    border-bottom: 1px solid var(--line-on-dark);
    overflow: clip;
  }
  .mi-track {
    display: flex;
    gap: 3.5rem;
    width: max-content;
    white-space: nowrap;
  }
  .mi-item {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .mi-sep {
    display: inline-block;
    color: var(--voltage);
    margin-left: 3.5rem;
  }
  .mi-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  /* live candlestick backdrop — a sticky viewport-high canvas inside an
     absolute layer, so the chart holds still while the band scrolls past */
  .mi-chart {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
  }
  .mi-chart-stick {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
  }
  .mi-chart-stick canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .mi-chart-hud {
    position: absolute;
    top: clamp(4.5rem, 10vh, 7.5rem);
    right: var(--space-gutter);
    text-align: right;
    font-family: var(--font-utility);
  }
  .mi-hud-sym {
    font-size: var(--text-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .mi-hud-price {
    margin-top: 0.4rem;
    font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.7rem);
    font-weight: 200;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }
  .mi-hud-price i {
    font-style: normal;
    font-size: 0.42em;
    letter-spacing: 0.14em;
    color: var(--ink-dim);
    margin-left: 0.35em;
  }
  .mi-hud-delta {
    margin-top: 0.3rem;
    font-size: var(--text-mono);
    letter-spacing: 0.18em;
    color: var(--voltage);
    font-variant-numeric: tabular-nums;
  }
  .mi-hud-delta.is-down {
    color: var(--signal);
  }
  .mi-hud-read {
    margin-top: 0.85rem;
    min-height: 1.3em;
    font-size: var(--text-mono);
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 0.25s linear;
  }
  .mi-hud-read.is-on {
    opacity: 1;
  }
  .mi-hud-live {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55em;
    margin-top: 0.85rem;
    font-size: var(--text-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .mi-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--voltage);
    animation: mi-pulse 2.4s ease-out infinite;
  }
  @keyframes mi-pulse {
    0% { box-shadow: 0 0 0 0 rgba(77, 182, 155, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(77, 182, 155, 0); }
    100% { box-shadow: 0 0 0 0 rgba(77, 182, 155, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mi-live-dot { animation: none; }
  }
  @media (max-width: 720px) {
    .mi-hud-read { display: none; }
  }
  .mi-title {
    font-size: var(--text-h2);
    max-width: 13em;
  }
  .mi-body {
    max-width: var(--measure);
    margin-top: 1.5rem;
    font-size: var(--text-lead);
    color: var(--ink-dim);
  }
  .mi-reports {
    border-top: 1px solid var(--line-on-dark);
  }
  .mi-report-list {
    margin: clamp(2rem, 5vh, 3rem) 0 0;
    padding: 0;
    list-style: none;
  }
  .mi-report {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--line-on-dark);
    text-decoration: none;
    color: inherit;
    transition: color 0.25s linear;
  }
  .mi-report:hover {
    color: var(--voltage);
  }
  .mi-report-label {
    font-size: var(--text-h3);
    min-width: 7ch;
  }
  .mi-report-note {
    flex: 1;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .mi-portal {
    margin-top: clamp(2.5rem, 6vh, 4rem);
  }


/* ---- page: clients ---- */

  .cl-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .cl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cl-card {
    position: relative;
    padding: clamp(1.8rem, 4vh, 3rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
  }
  .cl-card--wide {
    grid-column: 1 / -1;
    background: var(--carbon);
    color: var(--ink-on-dark);
    border-color: transparent;
  }
  .cl-mark {
    width: 24px;
    color: var(--voltage);
  }
  .cl-card blockquote {
    margin: 1.6rem 0 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.15rem, 1rem + 0.9vw, 1.7rem);
    line-height: 1.4;
    max-width: 46em;
  }
  .cl-card--wide blockquote {
    font-size: clamp(1.4rem, 1rem + 1.7vw, 2.4rem);
    line-height: 1.32;
  }
  .cl-card figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin-top: 1.8rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
  }
  .cl-card--wide figcaption {
    border-top-color: var(--line-on-dark);
  }
  .cl-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .cl-sector {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--voltage) 42%, var(--ink-on-light));
  }
  .cl-card--wide .cl-sector {
    color: var(--voltage);
  }
  .cl-marquee {
    padding: 1.4rem 0;
    border-top: 1px solid var(--line-on-dark);
    overflow: clip;
  }
  .cl-track {
    display: flex;
    gap: 4.5rem;
    width: max-content;
    white-space: nowrap;
  }
  .cl-item {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }
  .cl-item:nth-child(6n + 1) {
    color: var(--voltage);
  }
  @media (max-width: 800px) {
    .cl-grid {
      grid-template-columns: 1fr;
    }
  }


/* ---- page: partnerships ---- */

  .pt-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
    gap: 3rem 6rem;
    max-width: 88rem;
    margin-inline: auto;
  }
  .pt-title {
    margin-top: 1.2rem;
    font-size: var(--text-h2);
    position: sticky;
    top: 8rem;
  }
  .pt-benefits {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pt-benefit {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    padding: clamp(1.4rem, 3.5vh, 2.2rem) 0;
    border-top: 1px solid var(--line);
  }
  .pt-benefit:last-child {
    border-bottom: 1px solid var(--line);
  }
  .pt-tick {
    width: 1.5rem;
    margin-top: 0.3rem;
    color: color-mix(in srgb, var(--voltage) 55%, var(--ink-on-light));
  }
  .pt-benefit p {
    font-size: var(--text-lead);
    line-height: 1.5;
    max-width: 30em;
  }
  .pt-cta {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
  }
  .pt-cta-media {
    height: 100%;
    min-height: 380px;
    overflow: clip;
  }
  .pt-cta-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pt-cta-body {
    padding: var(--space-section) var(--space-gutter);
  }
  .pt-cta-title {
    font-size: var(--text-h2);
  }
  .pt-cta-lead {
    margin-top: 1.2rem;
    color: var(--ink-on-dark-dim);
    font-size: var(--text-lead);
  }
  .pt-cta-btn {
    margin-top: clamp(2rem, 5vh, 3rem);
  }
  .pt-cta-note {
    margin-top: 1.6rem;
    color: var(--ink-on-dark-dim);
  }
  .pt-cta-note a {
    color: var(--ink-on-dark);
  }
  @media (max-width: 900px) {
    .pt-inner {
      grid-template-columns: 1fr;
    }
    .pt-title {
      position: static;
    }
    .pt-cta {
      grid-template-columns: 1fr;
    }
    .pt-cta-media {
      min-height: 260px;
      max-height: 40vh;
    }
  }


/* ---- page: contact ---- */

  .ct {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 100svh;
    padding: var(--topbar-clear) var(--space-gutter) 6rem;
    overflow: clip;
  }
  .ct .ct-tribar {
    position: absolute;
    top: 50%;
    right: -10vw;
    width: min(80vh, 52vw);
    transform: translateY(-50%) rotate(-6deg);
    opacity: 0.09;
    pointer-events: none;
  }
  .ct-inner {
    position: relative;
    max-width: 88rem;
    width: 100%;
    margin-inline: auto;
  }
  .ct-title {
    margin-top: 1.4rem;
    font-size: var(--text-hero);
    color: #fff;
  }
  .ct-lead {
    margin-top: 1.6rem;
    font-size: var(--text-lead);
    color: var(--ink-on-dark-dim);
    max-width: 44ch;
  }
  .ct-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.5rem;
    margin-top: clamp(2.5rem, 7vh, 4.5rem);
  }
  .ct-phone {
    font-family: var(--font-utility);
    font-size: calc(var(--text-mono) * 1.25);
    letter-spacing: 0.14em;
    text-decoration: none;
    color: var(--ink-on-dark-dim);
  }
  .ct-phone:hover {
    color: var(--ink-on-dark);
  }
  .ct-form {
    max-width: 46rem;
    margin-top: clamp(3.5rem, 9vh, 6rem);
    padding-top: clamp(2rem, 5vh, 3rem);
    border-top: 1px solid var(--line-on-dark);
  }
  .ct-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 2rem;
    margin-top: 1.6rem;
  }
  .ct-field--wide {
    grid-column: 1 / -1;
  }
  .ct-field label {
    display: block;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }
  .ct-field input,
  .ct-field textarea {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    font: inherit;
    color: var(--ink-on-dark);
    background: transparent;
    border: 1px solid var(--line-on-dark);
    border-radius: 6px;
    resize: vertical;
  }
  .ct-field input:focus,
  .ct-field textarea:focus {
    outline: 2px solid var(--voltage);
    outline-offset: 2px;
  }
  .ct-send {
    margin-top: 1.8rem;
  }
  @media (max-width: 640px) {
    .ct-fields {
      grid-template-columns: 1fr;
    }
  }
  .ct-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 2.5rem;
    margin-top: clamp(3.5rem, 9vh, 6rem);
    padding-top: clamp(2rem, 5vh, 3rem);
    border-top: 1px solid var(--line-on-dark);
  }
  .ct-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--voltage);
  }
  .ct-address {
    margin-top: 0.9rem;
    font-style: normal;
    color: var(--ink-on-dark-dim);
    line-height: 1.8;
  }
  .ct-address span {
    display: block;
  }
  .ct-linkedin {
    display: inline-block;
    margin-top: 0.9rem;
    color: var(--ink-on-dark-dim);
    text-decoration: none;
  }
  .ct-linkedin:hover {
    color: var(--ink-on-dark);
  }


/* ---- page: charts ---- */

  /* Chart panels (global: styles React island internals + page chrome) */
  .dc {
    background: #131516;
    padding: clamp(2rem, 5vh, 3.5rem) var(--space-gutter) 0;
  }
  .dc-inner {
    max-width: 72rem;
    margin-inline: auto;
  }
  .dc-panel {
    margin: 0 0 clamp(2.5rem, 6vh, 4rem);
    padding: clamp(1.2rem, 3vw, 2.2rem);
    background: var(--carbon-raised);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-card);
    min-height: 460px;
  }
  .dc-title {
    margin-bottom: 1.6rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--ink-on-dark);
  }
  .dc-title span {
    color: var(--ink-on-dark-dim);
    font-weight: 300;
  }
  .dc-note {
    padding-bottom: clamp(2rem, 5vh, 3rem);
    font-family: var(--font-utility);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-on-dark-dim);
    max-width: 60ch;
  }
  .dc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
  }
  .dc-zoom-label,
  .dc-range {
    font-family: var(--font-utility);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }
  .dc-zoom-label {
    margin-right: 0.3rem;
  }
  .dc-range {
    margin-left: auto;
    text-transform: none;
  }
  .dc-zoom {
    padding: 0.3rem 0.7rem;
    font-family: var(--font-utility);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--ink-on-dark-dim);
    border: 1px solid var(--line-on-dark);
    border-radius: 4px;
    transition: color 0.2s linear, border-color 0.2s linear;
  }
  .dc-zoom:hover {
    color: var(--ink-on-dark);
  }
  .dc-zoom.is-active {
    color: var(--carbon);
    background: var(--voltage);
    border-color: var(--voltage);
  }
  .dc-desks-wrap {
    background: #131516;
    padding-top: 0;
  }
  .dc-desks {
    max-width: 44rem;
    margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
    padding: 0;
    list-style: none;
  }
  .dc-desk {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--line-on-dark);
    text-decoration: none;
    color: inherit;
    transition: color 0.25s linear;
  }
  li:first-child .dc-desk {
    border-top: 1px solid var(--line-on-dark);
  }
  .dc-desk:hover {
    color: var(--voltage);
  }
  .dc-desk-label {
    font-size: var(--text-h3);
    flex: 1;
  }
  .dc-desk-note {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }


/* ---- page: charts dashboard ---- */
/* The live dashboard. Chart series hues are validated against the panel
   surface (#1f1f1f): gas #3ba184, power #5f8fd6, context gray #8a8a88.
   Day-direction keeps the ticker convention: voltage up / signal down,
   always with arrow + sign so colour is never the only channel. */

  .dash {
    background: #131516;
    padding: clamp(2.5rem, 6vh, 4.5rem) var(--space-gutter) 0;
    --tk-up: var(--voltage);
    --tk-down: #f2705d;
    --tk-flat: var(--ink-on-dark-dim);
  }
  .dash-inner {
    max-width: 76rem;
    margin-inline: auto;
  }
  .dash-act {
    margin-bottom: clamp(3.5rem, 8vh, 6.5rem);
  }
  .dash-head {
    max-width: 46rem;
    margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
  }
  .dash-title {
    margin: 0.7rem 0 0.8rem;
    font-size: var(--text-h3);
  }
  .dash-lead {
    color: var(--ink-on-dark-dim);
    max-width: var(--measure);
  }
  .dash-panel {
    margin: 0 0 1.25rem;
    padding: clamp(1.1rem, 2.5vw, 1.8rem);
    background: var(--carbon-raised);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-card);
  }
  .dash-panel--flush {
    padding: 0;
    overflow: hidden;
  }
  .dash-panel-title {
    margin-bottom: 1.1rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    color: var(--ink-on-dark);
  }
  .dash-panel-title span {
    margin-left: 0.5rem;
    font-family: var(--font-utility);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }

  /* -- 01 · market board: the spark-card grid -- */
  .mb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1rem;
  }
  .mb-card {
    padding: 1.05rem 1.2rem 0.95rem;
    background: var(--carbon-raised);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-card);
    transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  }
  .mb-card:hover {
    border-color: rgba(245, 245, 244, 0.28);
    transform: translateY(-2px);
  }
  .mb-card[data-dir='up'] { --tk-dir: var(--tk-up); }
  .mb-card[data-dir='down'] { --tk-dir: var(--tk-down); }
  .mb-card[data-dir='flat'] { --tk-dir: var(--tk-flat); }
  .mb-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.55rem;
  }
  .mb-group {
    font-family: var(--font-utility);
    font-size: calc(var(--text-mono) * 0.82);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mb-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 200;
    font-size: 1.3rem;
    letter-spacing: 0.01em;
  }
  .mb-quote {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    margin: 0.3rem 0 0.7rem;
    white-space: nowrap;
  }
  .mb-price {
    font-size: 1.7rem;
    font-weight: 300;
  }
  .mb-price .tk-unit {
    font-size: 0.7rem;
  }
  .mb-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-utility);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    color: var(--tk-dir);
  }
  .mb-chart {
    position: relative;
  }
  .mb-chart svg {
    width: 100%;
    height: auto;
    color: var(--tk-dir);
    touch-action: none;
  }
  .mb-readout {
    position: absolute;
    top: -0.2rem;
    right: 0;
    margin: 0;
    font-family: var(--font-utility);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
    opacity: 0;
    transition: opacity 0.2s linear;
  }
  .mb-readout.is-on {
    opacity: 1;
  }
  .mb-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0.65rem 0 0;
    font-family: var(--font-utility);
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }

  /* -- 02 · momentum heat table -- */
  .hm-wrap {
    overflow-x: auto;
  }
  .hm {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
  }
  .hm-head {
    padding: 0.9rem 1.1rem 0.7rem;
    font-family: var(--font-utility);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: right;
    color: var(--ink-on-dark-dim);
    border-bottom: 1px solid var(--line-on-dark);
  }
  .hm-head--label {
    text-align: left;
    padding-left: clamp(1.1rem, 2.5vw, 1.8rem);
  }
  .hm-group th {
    padding: 1.1rem 1.1rem 0.45rem clamp(1.1rem, 2.5vw, 1.8rem);
    font-family: var(--font-utility);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: left;
    color: var(--voltage);
  }
  .hm-label {
    padding: 0.55rem 1.1rem 0.55rem clamp(1.1rem, 2.5vw, 1.8rem);
    font-weight: 500;
    font-size: 0.85rem;
    text-align: left;
    white-space: nowrap;
  }
  .hm-unit {
    margin-left: 0.55em;
    font-family: var(--font-utility);
    font-weight: 400;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--ink-on-dark-dim);
  }
  .hm-row {
    border-top: 1px solid rgba(245, 245, 244, 0.06);
    transition: background-color 0.2s linear;
  }
  .hm-row:hover {
    background: rgba(245, 245, 244, 0.03);
  }
  .hm-cell {
    padding: 0.55rem 1.1rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    text-align: right;
    white-space: nowrap;
  }
  .hm-cell--up {
    background: color-mix(in srgb, var(--tk-up) calc(var(--hm) * 24%), transparent);
  }
  .hm-cell--down {
    background: color-mix(in srgb, var(--tk-down) calc(var(--hm) * 24%), transparent);
  }
  .hm-cell--na,
  .hm-cell--flat {
    color: var(--ink-on-dark-dim);
  }
  .hm-range {
    padding: 0.55rem clamp(1.1rem, 2.5vw, 1.8rem) 0.55rem 1.1rem;
  }
  .hm-strip {
    width: 100px;
    height: 12px;
    margin-left: auto;
    color: var(--ink-on-dark);
  }

  /* -- shared line-chart chrome (03 · curve, 06 · indexed) -- */
  .lc {
    position: relative;
    overflow-x: auto;
    outline: none;
  }
  .lc:focus-visible {
    outline: 2px solid var(--voltage);
    outline-offset: 4px;
    border-radius: 4px;
  }
  .lc svg {
    width: 100%;
    min-width: 680px;
    height: auto;
  }
  .lc-grid {
    stroke: rgba(245, 245, 244, 0.07);
    stroke-width: 1;
  }
  .lc-grid--base {
    stroke: rgba(245, 245, 244, 0.22);
  }
  .lc-tick {
    fill: var(--ink-on-dark-dim);
    font-family: var(--font-utility);
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .lc-end {
    fill: var(--ink-on-dark);
    font-family: var(--font-utility);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .lc-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.6rem;
    margin-bottom: 1rem;
  }
  .lc-key {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-utility);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }
  .lc-key i {
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--k);
  }
  .lc-unit {
    margin-left: auto;
    font-family: var(--font-utility);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }
  .lc-tip {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 9rem;
    padding: 0.6rem 0.8rem;
    background: var(--carbon);
    border: 1px solid var(--line-on-dark);
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 5;
  }
  .lc-tip-label {
    margin: 0 0 0.35rem;
    font-family: var(--font-utility);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
    white-space: nowrap;
  }
  .lc-tip-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .lc-tip-row i {
    width: 12px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--k);
  }
  .lc-tip-row b {
    font-weight: 500;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
  }
  .lc-tip-row span {
    color: var(--ink-on-dark-dim);
    font-size: 0.72rem;
  }

  /* table-view twin under each chart */
  .lc-tableview {
    margin-top: 0.9rem;
    border-top: 1px solid var(--line-on-dark);
  }
  .lc-tableview summary {
    padding: 0.7rem 0 0.2rem;
    font-family: var(--font-utility);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
    cursor: pointer;
    transition: color 0.2s linear;
  }
  .lc-tableview summary:hover {
    color: var(--ink-on-dark);
  }
  .lc-tablewrap {
    max-height: 22rem;
    overflow: auto;
    margin-top: 0.6rem;
  }
  .lc-tableview table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
  }
  .lc-tableview th,
  .lc-tableview td {
    padding: 0.4rem 0.9rem 0.4rem 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid rgba(245, 245, 244, 0.06);
  }
  .lc-tableview th[scope='row'],
  .lc-tableview th:first-child,
  .lc-tableview td:first-child {
    text-align: left;
    font-weight: 400;
    white-space: nowrap;
  }
  .lc-tableview thead th {
    font-family: var(--font-utility);
    font-weight: 500;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }

  /* -- 04 · seasonal dumbbells -- */
  .db-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .db-duo .dash-panel {
    margin-bottom: 0;
    overflow-x: auto;
  }
  .db-duo svg {
    width: 100%;
    min-width: 420px;
    height: auto;
  }
  .db-season {
    fill: var(--ink-on-dark-dim);
    font-family: var(--font-utility);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .db-val {
    fill: var(--ink-on-dark);
    font-family: var(--font-utility);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.03em;
  }
  .db-val--then {
    fill: var(--ink-on-dark-dim);
    font-weight: 400;
    font-size: 11px;
  }
  .db-delta {
    font-family: var(--font-utility);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .db-delta--up { fill: var(--tk-up); }
  .db-delta--down { fill: var(--tk-down); }
  .db-delta--flat { fill: var(--ink-on-dark-dim); }
  .db-key-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink-on-dark);
    vertical-align: baseline;
  }
  .db-key-dot--then {
    background: #8a8a88;
  }
  .dash .db-duo + .lc-tableview {
    border-top: 0;
  }

  @media (max-width: 900px) {
    .db-duo {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 480px) {
    .mb-grid {
      grid-template-columns: 1fr;
    }
    .mb-group {
      max-width: 11rem;
    }
  }


/* ---- page: legal ---- */

  .lg-inner {
    max-width: 60rem;
    margin-inline: auto;
  }
  .lg-heading {
    margin-top: clamp(3rem, 7vh, 4.5rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--voltage) 45%, var(--ink-on-light));
  }
  .lg-companies {
    margin: 1.4rem 0 0;
  }
  .lg-company {
    display: grid;
    grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 2fr);
    gap: 0.4rem 2.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
  }
  .lg-company dt {
    font-weight: 600;
    font-size: 0.95rem;
  }
  .lg-company dd {
    margin: 0;
    color: var(--ink-dim);
    font-size: 0.9rem;
  }
  .lg-docs {
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
  }
  .lg-doc {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.25rem;
    transition: color 0.25s linear;
  }
  .lg-doc:hover {
    color: color-mix(in srgb, var(--voltage) 70%, var(--ink-on-light));
  }
  .lg-note {
    margin-top: 1.6rem;
    color: var(--ink-dim);
    font-size: 0.9rem;
    max-width: 60ch;
  }
  @media (max-width: 640px) {
    .lg-company {
      grid-template-columns: 1fr;
    }
  }


/* ---- page: src/pages/news/index.astro ---- */

  .nw-inner {
    max-width: 88rem;
    margin-inline: auto;
  }
  .nw-feed {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
  }
  .nw-row {
    display: grid;
    grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.2rem 2.5rem;
    padding: clamp(1.4rem, 3.4vh, 2.2rem) 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
  }
  .nw-date {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .nw-title {
    display: block;
    font-size: var(--text-h3);
    transition: color 0.25s linear, transform 0.45s var(--ease-out);
  }
  .nw-row:hover .nw-title {
    color: color-mix(in srgb, var(--voltage) 70%, var(--ink-on-light));
    transform: translateX(0.5rem);
  }
  .nw-excerpt {
    display: block;
    margin-top: 0.45rem;
    color: var(--ink-dim);
    font-size: 0.95rem;
    max-width: 60ch;
  }
  .nw-row .arrow-glyph {
    color: var(--ink-dim);
    transition: transform 0.45s var(--ease-out), color 0.25s linear;
  }
  .nw-row:hover .arrow-glyph {
    color: var(--voltage);
    transform: translateX(0.35rem);
  }
  .nw-archive {
    margin-top: 2.5rem;
    color: var(--ink-dim);
    font-size: 0.9rem;
  }
  .nw-archive a {
    color: var(--ink-on-light);
  }
  @media (max-width: 820px) {
    .nw-row {
      grid-template-columns: 1fr auto;
    }
    .nw-date {
      order: -2;
    }
    .nw-row .bias {
      order: -1;
      justify-self: end;
    }
    .nw-main {
      grid-column: 1 / -1;
    }
    .nw-row .arrow-glyph {
      display: none;
    }
  }


/* ---- page: src/pages/news/[id].astro ---- */

  .po-head {
    padding: var(--topbar-clear) var(--space-gutter) clamp(2.5rem, 6vh, 4rem);
  }
  .po-head-inner {
    max-width: 52rem;
    margin-inline: auto;
  }
  .po-title {
    margin-top: 1.2rem;
    font-size: var(--text-h2);
    color: #fff;
  }
  .po-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.8rem;
    margin-top: 1.6rem;
  }
  .po-meta time {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-on-dark-dim);
  }
  .po-credit {
    font-size: 0.78rem;
    color: var(--ink-on-dark-dim);
  }
  .po-body {
    padding: clamp(3rem, 7vh, 5rem) var(--space-gutter);
  }
  .po-prose {
    max-width: 52rem;
    margin-inline: auto;
  }
  /* Bulletin prose: GAS / ELECTRICITY & CARBON section labels + framed charts */
  .po-prose h2 {
    margin: clamp(2.5rem, 6vh, 4rem) 0 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--voltage) 45%, var(--ink-on-light));
  }
  .po-prose h2:first-child {
    margin-top: 0;
  }
  .po-prose p {
    margin: 0 0 1.05rem;
    color: var(--ink-on-light);
    line-height: 1.75;
  }
  .po-prose img {
    width: 100%;
    height: auto;
    margin: 2rem 0;
    padding: 0.8rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
  }
  .po-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 52rem;
    margin-inline: auto;
    padding: 0 var(--space-gutter) clamp(3rem, 7vh, 5rem);
  }
  .po-nav-link {
    text-decoration: none;
    color: inherit;
    font-size: 1.1rem;
  }
  .po-nav-link:hover {
    color: color-mix(in srgb, var(--voltage) 70%, var(--ink-on-light));
  }
  .po-nav-link--next {
    text-align: right;
  }
  .po-nav-dir {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-utility);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .po-nav-link--all {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
  }
  @media (max-width: 640px) {
    .po-nav {
      grid-template-columns: 1fr 1fr;
    }
    .po-nav-link--all {
      display: none;
    }
  }


/* ---- page: src/pages/legal/[id].astro ---- */

  .doc-head {
    padding: 10rem var(--space-gutter) clamp(2.5rem, 6vh, 4rem);
  }
  .doc-head-inner {
    max-width: 76rem;
    margin-inline: auto;
  }
  .doc-title {
    margin-top: 1.2rem;
    font-size: var(--text-h2);
    color: #fff;
  }
  .doc-note {
    max-width: 62ch;
    margin-top: 1.4rem;
    font-size: 0.85rem;
    color: var(--ink-on-dark-dim);
  }
  .doc-body {
    padding: clamp(3rem, 7vh, 5rem) var(--space-gutter);
  }
  .doc-grid {
    display: grid;
    grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 2.2fr);
    gap: 3rem 5rem;
    max-width: 76rem;
    margin-inline: auto;
  }
  .doc-grid:not(:has(.doc-toc)) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 52rem;
  }
  .doc-toc {
    position: sticky;
    top: 7rem;
    align-self: start;
    max-height: calc(100svh - 9rem);
    overflow-y: auto;
  }
  .doc-toc-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-mono);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--voltage) 45%, var(--ink-on-light));
  }
  .doc-toc ol {
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--line);
  }
  .doc-toc a {
    display: block;
    padding: 0.35rem 0 0.35rem 1rem;
    font-size: 0.82rem;
    color: var(--ink-dim);
    text-decoration: none;
  }
  .doc-toc a:hover {
    color: var(--ink-on-light);
  }
  .doc-prose h2 {
    margin: clamp(2.2rem, 5vh, 3.2rem) 0 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    scroll-margin-top: 6rem;
  }
  .doc-prose h2:first-child {
    margin-top: 0;
  }
  .doc-prose h3 {
    margin: 1.8rem 0 0.8rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
  }
  .doc-prose p {
    margin: 0 0 1rem;
    color: var(--ink-on-light);
    line-height: 1.75;
    font-size: 0.95rem;
  }
  .doc-prose ul,
  .doc-prose ol {
    margin: 0 0 1.2rem;
    padding-left: 1.4rem;
    color: var(--ink-on-light);
    line-height: 1.7;
    font-size: 0.95rem;
  }
  .doc-prose li {
    margin-bottom: 0.45rem;
  }
  .doc-prose figure.wp-block-table,
  .doc-prose figure.post-table {
    margin: 0 0 1.4rem;
    overflow-x: auto;
  }
  .doc-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-on-light);
  }
  .doc-prose th,
  .doc-prose td,
  .doc-prose .wp-block-table th,
  .doc-prose .wp-block-table td {
    padding: 0.7rem 1.5rem 0.7rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }
  .doc-prose th,
  .doc-prose .wp-block-table th {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--ink-dim);
  }
  .doc-back {
    margin-top: clamp(2.5rem, 6vh, 4rem);
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
  }
  .doc-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.15rem;
    text-decoration: none;
    color: inherit;
  }
  .doc-back a:hover {
    color: color-mix(in srgb, var(--voltage) 70%, var(--ink-on-light));
  }
  @media (max-width: 900px) {
    .doc-grid {
      grid-template-columns: 1fr;
    }
    .doc-toc {
      position: static;
      max-height: none;
    }
  }


/* ---- page: styleguide ---- */

  .sg-inner {
    max-width: 76rem;
    margin-inline: auto;
  }
  .sg-h {
    margin-bottom: 2.2rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
  }
  .sg-map {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-utility);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: none; /* code references — exempt from title Name Case */
    color: var(--ink-dim, var(--ink-on-dark-dim));
  }
  .sg-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sg-swatch {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.9rem;
    align-items: center;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    font-size: 0.8rem;
  }
  .sg-chip {
    grid-row: 1 / 4;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 6px;
    border: 1px solid var(--line);
  }
  .sg-hex,
  .sg-role {
    color: var(--ink-dim);
    font-size: 0.75rem;
  }
  .sg-spec {
    display: grid;
    grid-template-columns: minmax(10rem, 0.5fr) minmax(0, 2fr);
    gap: 2rem;
    align-items: baseline;
    padding: 1.2rem 0;
    border-top: 1px solid var(--line-on-dark);
  }
  .sg-spec code {
    font-family: var(--font-utility);
    font-size: 0.72rem;
    color: var(--ink-on-dark-dim);
  }
  .sg-spec p {
    margin: 0;
  }
  .sg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
  }
  .sg-row--marks .sg-mark {
    display: grid;
    place-items: center;
    width: 9rem;
    height: 9rem;
    border-radius: var(--radius-card);
  }
  .sg-mark--dark {
    background: var(--carbon);
    padding: 1.6rem;
  }
  .sg-img {
    margin: 0;
  }
  .sg-img img {
    border-radius: var(--radius-card);
  }
  .sg-img figcaption {
    margin-top: 0.6rem;
    font-family: var(--font-utility);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
  }
  .sg-rowlist {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 44rem;
  }
  .sg-rowitem {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--line-on-dark);
    text-decoration: none;
    color: inherit;
    transition: color 0.25s linear;
  }
  .sg-rowlist li:first-child .sg-rowitem {
    border-top: 1px solid var(--line-on-dark);
  }
  .sg-rowitem:hover {
    color: var(--voltage);
  }
  .sg-rownote {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.18em;
    color: var(--ink-on-dark-dim);
  }
  .sg-stat p {
    margin: 0;
  }
  /* band-field specimens */
  .sg-field {
    position: relative;
    width: 16rem;
    height: 11rem;
    border-radius: var(--radius-card);
    overflow: clip;
    background: var(--carbon);
  }
  .sg-field .family-field {
    display: block;
    position: absolute;
    left: 50%;
    top: 62%;
    width: 26rem;
    max-width: none;
    transform: translate(-50%, -50%);
  }
  .sg-field--paper {
    background: var(--paper);
    border: 1px solid var(--line-on-light);
  }
  .sg-field--paper .family-band-edge {
    stroke: color-mix(in srgb, var(--fam-accent) 42%, transparent);
  }
  .sg-rail {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }
  .sg-rail-note {
    margin-left: 1.2rem;
    font-family: var(--font-utility);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
  }
  /* company identity specimens — the family-card anatomy in miniature */
  .sg-co {
    position: relative;
    flex: 1 1 14rem;
    max-width: 18rem;
    padding: 1.3rem 1.5rem 1.5rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--carbon-raised));
    border: 1px solid var(--line-on-dark);
    border-left: 0;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
  }
  .sg-co::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
      180deg,
      var(--accent),
      color-mix(in srgb, var(--accent) 22%, transparent)
    );
  }
  .sg-co-count {
    position: absolute;
    top: 1.2rem;
    right: 1.3rem;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--accent);
  }
  .sg-co-role {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: var(--font-utility);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .sg-co-role::before {
    content: '';
    width: 1.1rem;
    height: 1px;
    background: var(--accent);
  }
  .sg-co-name {
    margin: 0.7rem 0 0;
    font-size: 1.1rem;
  }
  /* tonal-act strip */
  .sg-acts {
    display: flex;
    height: 3.6rem;
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-card);
    overflow: clip;
  }
  .sg-acts span {
    display: grid;
    place-items: center;
    min-width: 0;
    font-family: var(--font-utility);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: clip;
  }
  /* brand-assets page */
  .brand-mark img {
    width: 100%;
    height: auto;
  }
  .brand-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: color-mix(in srgb, var(--accent, var(--voltage)) 80%, var(--ink));
    border-bottom: 1px solid color-mix(in srgb, var(--accent, var(--voltage)) 45%, transparent);
    padding-bottom: 0.25rem;
    transition: border-color 0.2s linear;
  }
  .brand-link:hover {
    border-bottom-color: var(--accent, var(--voltage));
  }
  .brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 2rem;
  }
  .brand-item {
    position: relative;
    padding: 1.4rem 1.6rem 1.6rem;
    background: color-mix(in srgb, var(--accent) 7%, var(--carbon-raised));
    border: 1px solid var(--line-on-dark);
    border-left: 0;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
  }
  .brand-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
      180deg,
      var(--accent),
      color-mix(in srgb, var(--accent) 22%, transparent)
    );
  }
  .brand-tile {
    display: grid;
    place-items: center;
    min-height: 7rem;
    border-radius: 6px;
    background: var(--carbon);
    padding: 1.4rem;
  }
  .brand-tile img {
    max-height: 3.4rem;
    width: auto;
    max-width: 100%;
  }
  .brand-epithet {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.1rem 0 0;
    font-family: var(--font-utility);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .brand-epithet::before {
    content: '';
    width: 1.1rem;
    height: 1px;
    background: var(--accent);
  }
  .brand-name {
    margin: 0.5rem 0 0;
    font-size: 1.15rem;
  }
  .brand-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.4rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
  }
  .brand-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 44rem;
  }
  .brand-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem 2rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
  }
  .brand-rows .brand-row:first-child {
    border-top: 1px solid var(--line);
  }
  .brand-row-name {
    font-size: 1.15rem;
  }
  .brand-row-links {
    display: inline-flex;
    gap: 1.6rem;
  }
  .brand-rules {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 62ch;
  }
  .brand-rules li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.6rem;
    line-height: 1.65;
  }
  .brand-rules li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.15rem;
    width: 0.8rem;
    height: 1px;
    background: var(--voltage);
  }
  /* Zaltek Forms status lines (newsletter + contact submit feedback) */
  .zf-status {
    margin: 0.9rem 0 0;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .zf-status--ok {
    color: var(--voltage);
  }
  .zf-status--err {
    color: var(--signal);
  }
  .nl-form .zf-status {
    flex-basis: 100%;
  }
  .nl-form.zf-done .nl-input,
  .nl-form.zf-done .nl-label,
  .nl-form.zf-done .btn {
    display: none;
  }
  .ct-form.zf-done .ct-fields,
  .ct-form.zf-done .ct-send {
    display: none;
  }
  .sg-acts-note {
    margin-top: 0.9rem;
    font-family: var(--font-utility);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--ink-on-dark-dim);
    max-width: 62ch;
  }
  @media (max-width: 700px) {
    .sg-spec {
      grid-template-columns: 1fr;
      gap: 0.5rem;
    }
  }


/* ---- hero: energy pulses along the pylon cables ---- */
.hero-buzz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* mirror .hero-photo img so overlay geometry tracks the photo exactly */
  scale: 1.08;
  transform-origin: center top;
  pointer-events: none;
  /* own compositor layer: glint repaints stay off the photo beneath */
  will-change: transform;
}
.hero-buzz-glint {
  /* No filter glow (drop-shadow re-blurs every frame) — a soft translucent
     lozenge reads as a passing glint at a fraction of the cost. */
  fill: rgba(141, 240, 214, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .hero-buzz {
    display: none;
  }
}