/* ============ Fonts (latin subsets, self-hosted) ============ */
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/ubuntu-latin-300.woff2') format('woff2');}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ubuntu-latin-500.woff2') format('woff2');}
@font-face{font-family:'Open Sans Variable';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/open-sans-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Open Sans Variable';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/open-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}


/* ============ 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 */
  --font-display: 'Ubuntu', 'Trebuchet MS', sans-serif;
  --font-body: 'Open Sans Variable', 'Open Sans', 'Segoe UI', sans-serif;
  /* Labels, tickers & data — the brand face in tracked caps (Ubuntu Mono retired).
     Only 300/500 cuts are loaded, so utility text resolves to the 500. */
  --font-utility: 'Ubuntu', '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;

  /* 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;
}


/* ============ 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);
}

/* Ubuntu Light at scale — sentence case, air, no shouting (the PEP Energy voice) */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* ------------------------------------------------------------------
   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;
}
/* 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 ---- */

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 96; /* above the menu overlay so the toggle stays reachable */
    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 {
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--ink-on-dark-dim);
  }
  .header-phone:hover {
    color: var(--ink-on-dark);
  }
  /* Compact size override on the shared .btn system */
  .header-portal {
    padding: 0.6rem 1.2rem;
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .header-menu {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0;
    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;
  }
  .header-menu-lines {
    display: grid;
    gap: 5px;
    width: 22px;
  }
  .header-menu-lines i {
    height: 1.5px;
    background: currentColor;
    transition: transform 0.35s var(--ease-out);
  }
  html.menu-open .header-menu-lines i:first-child {
    transform: translateY(3.25px) rotate(45deg);
  }
  html.menu-open .header-menu-lines i:last-child {
    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;
    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;
    padding: 8rem 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;
    font-size: clamp(1.9rem, 1rem + 4.6vh, 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;
  }
  @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 {
    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);
  }
  .footer-inner {
    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;
  }
  .footer-bottom {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
    padding-top: 1.4rem;
    border-top: 1px solid var(--line-on-dark);
  }
  .footer .footer-mark {
    flex: 0 0 auto;
    width: 30px;
    height: auto;
    opacity: 0.9;
  }
  .footer-fine {
    margin: 0;
    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 in miniature */
  .footer-credit {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex: 0 0 auto;
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink-dim);
    transition: color 0.25s ease;
  }
  .footer-credit:hover {
    color: #f92875;
  }
  .footer-credit-bridge {
    width: 86px;
    height: auto;
    flex: 0 0 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: 520px) {
    .footer-companies {
      grid-template-columns: 1fr;
      gap: 1.75rem;
    }
    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.9rem;
    }
    .footer-credit {
      margin-left: 0;
    }
  }


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

  .hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7rem 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;
  }
  .hero-h1 {
    max-width: 13em;
    margin-top: 1.5rem;
    font-size: var(--text-hero);
    color: #fff;
    text-shadow: 0 1px 30px rgba(23, 23, 23, 0.35);
  }
  .hero-logos {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.3rem 3.2rem;
    max-width: 88rem;
    width: 100%;
    margin: auto auto 0;
    padding: clamp(1.6rem, 3.5vh, 2.6rem) 0;
    border-top: 1px solid rgba(245, 245, 244, 0.22);
    list-style: none;
  }
  .hero-logos img {
    height: clamp(26px, 4vh, 40px);
    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;
  }
  .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.45) 0%, rgba(23, 23, 23, 0.14) 48%, rgba(23, 23, 23, 0) 72%);
  }
  .hero:has(.hero-pylon) {
    /* orbit-dragging across the headline must not select it */
    user-select: none;
    -webkit-user-select: none;
  }
  /* ---- line-control console (pylon.js drives the lever + gauge) ---- */
  .hero-console {
    position: absolute;
    right: var(--space-gutter);
    bottom: clamp(8.5rem, 18vh, 12rem);
    width: 17rem;
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-card);
    background: rgba(13, 15, 20, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: var(--font-utility);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    user-select: none;
  }
  html.js .hero-console {
    animation: console-in 0.9s var(--ease-out) 1.2s backwards;
  }
  @keyframes console-in {
    from {
      opacity: 0;
      transform: translateY(26px);
    }
  }
  .console-head,
  .console-foot {
    display: flex;
    justify-content: space-between;
    padding: 0.55rem 0.9rem;
    font-size: 0.62rem;
    color: var(--ink-on-dark-dim);
  }
  .console-head {
    border-bottom: 1px solid var(--line-on-dark);
  }
  .console-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-on-dark);
  }
  .console-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--voltage);
    box-shadow: 0 0 6px var(--voltage);
    animation: console-led 2.4s ease-in-out infinite;
  }
  /* off-band alarm: frequency has left 50 Hz ± 0.15 (pylon.js toggles .is-off) */
  .hero-console.is-off .console-led {
    background: var(--signal);
    box-shadow: 0 0 6px var(--signal);
    animation-duration: 0.9s;
  }
  .console-freq {
    text-transform: none; /* Hz, not HZ */
    letter-spacing: 0.08em;
  }
  .console-freq b {
    font-weight: 400;
    color: var(--ink-on-dark);
    font-variant-numeric: tabular-nums;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .hero-console.is-off .console-freq b {
    color: var(--signal);
  }
  @keyframes console-led {
    50% {
      opacity: 0.35;
      box-shadow: 0 0 2px var(--voltage);
    }
  }
  .console-body {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.9rem 0.9rem 0.55rem;
  }
  .console-label {
    display: block;
    text-align: center;
    font-size: 0.58rem;
    color: var(--ink-on-dark-dim);
  }
  /* lever */
  .console-lever-col {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 3.2rem;
    flex: none;
  }
  .console-lever {
    position: relative;
    flex: 1;
    min-height: 6.5rem;
    cursor: grab;
    touch-action: none;
    border-radius: 4px;
  }
  .console-lever:focus-visible {
    outline: 2px solid var(--voltage);
    outline-offset: 3px;
  }
  .console-lever.is-dragging {
    cursor: grabbing;
  }
  .console-lever-track {
    position: absolute;
    inset: 4px calc(50% - 1px);
    background: rgba(98, 133, 180, 0.35);
    border-radius: 2px;
  }
  /* detent marks beside the track */
  .console-lever-track::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8px;
    width: 5px;
    background: repeating-linear-gradient(
      to bottom,
      rgba(98, 133, 180, 0.5) 0 1px,
      transparent 1px calc(25% - 0.75px)
    );
  }
  .console-lever-fill {
    position: absolute;
    inset: auto 0 0;
    height: calc(var(--lever, 0.48) * 100%);
    background: linear-gradient(to top, rgba(77, 182, 155, 0.25), var(--voltage));
    border-radius: 2px;
  }
  .console-lever-handle {
    position: absolute;
    left: 50%;
    bottom: calc(4px + var(--lever, 0.48) * (100% - 8px - 16px));
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 2rem;
    height: 16px;
    border: 1px solid rgba(245, 245, 244, 0.28);
    border-radius: 3px;
    background: linear-gradient(#2e3138, #1c1e23);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .console-lever-handle i {
    height: 1px;
    margin-inline: 6px;
    background: rgba(245, 245, 244, 0.3);
  }
  .console-lever:hover .console-lever-handle,
  .console-lever.is-dragging .console-lever-handle {
    border-color: var(--voltage);
    box-shadow: 0 2px 10px rgba(77, 182, 155, 0.35);
  }
  .console-lever-fill,
  .console-lever-handle {
    transition-property: height, bottom;
    transition-duration: 0.15s;
  }
  .console-lever.is-dragging .console-lever-fill,
  .console-lever.is-dragging .console-lever-handle {
    transition-duration: 0s;
  }
  /* gauge */
  .console-gauge {
    position: relative;
    flex: 1;
    min-width: 0;
  }
  .console-gauge > svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .console-gauge-ticks line {
    stroke: rgba(98, 133, 180, 0.45);
    stroke-width: 1;
  }
  .console-gauge-ticks line.is-major {
    stroke: rgba(98, 133, 180, 0.8);
  }
  .console-gauge-track {
    fill: none;
    stroke: rgba(98, 133, 180, 0.3);
    stroke-width: 1.5;
  }
  .console-gauge-redline {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.5;
    opacity: 0.8;
  }
  .console-gauge-arc {
    fill: none;
    stroke: var(--voltage);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 192.68;
    stroke-dashoffset: 103.4; /* 1.39 GW resting load; pylon.js takes over */
    filter: drop-shadow(0 0 3px rgba(77, 182, 155, 0.55));
  }
  .console-gauge-needle {
    stroke: var(--ink-on-dark);
    stroke-width: 1.5;
    stroke-linecap: round;
  }
  .console-gauge-hub {
    fill: var(--voltage);
  }
  /* demand bug — the wandering target the needle has to track */
  .console-gauge-bug,
  .console-key path {
    fill: var(--steel);
  }
  .console-key {
    width: 7px;
    height: 6px;
    vertical-align: 1px;
  }
  .console-label--gauge {
    display: flex;
    justify-content: space-between;
    padding-inline: 0.5rem;
    white-space: nowrap;
  }
  .console-readout {
    position: absolute;
    inset: auto 0 1.3rem;
    text-align: center;
    font-size: 0.62rem;
    color: var(--ink-on-dark-dim);
    /* unit casing matters here: kWh, not KWH */
    text-transform: none;
    letter-spacing: 0.08em;
  }
  .console-readout b {
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ink-on-dark);
    font-variant-numeric: tabular-nums;
  }
  /* footer stacks: scene hints on top, the balancing game state beneath */
  .console-foot {
    flex-direction: column;
    gap: 2px;
  }
  .console-sync {
    text-transform: none;
    letter-spacing: 0.08em;
  }
  .console-sync b {
    font-weight: 400;
    color: var(--voltage);
    font-variant-numeric: tabular-nums;
  }
  .console-foot .touch-only { display: none; }
  @media (hover: none) {
    .console-foot .no-touch { display: none; }
    .console-foot .touch-only { display: block; }
  }
  @media (max-width: 900px) {
    .hero-console { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .hero-console { animation: none; }
    .console-led { animation: none; }
  }


/* ---- component: Family ---- */

  .family {
    position: relative;
  }
  .family-pin {
    position: relative;
    padding: var(--space-section) var(--space-gutter);
    overflow: clip;
  }
  .family-bg {
    position: absolute;
    inset: 0;
    background: var(--carbon);
  }
  .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-cards {
    position: relative;
    max-width: 88rem;
    margin: clamp(2.5rem, 6vh, 5rem) auto 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.5rem;
  }
  .family-card {
    position: relative;
    padding: clamp(1.8rem, 4vh, 3rem);
    background: color-mix(in srgb, var(--accent) 7%, var(--carbon-raised));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--radius-card);
    box-shadow: 0 30px 90px -30px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .family-card-logo {
    height: clamp(34px, 6vh, 56px);
    display: flex;
    align-items: center;
  }
  .family-card-logo img {
    height: 100%;
    width: auto;
  }
  .family-card-name {
    margin-top: clamp(1.4rem, 4vh, 2.6rem);
    font-size: var(--text-h3);
  }
  /* Wordmark cards (no logo asset yet): the name is the mark */
  .family-card-name--wordmark {
    margin-top: clamp(1rem, 2.5vh, 1.8rem);
    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);
  }
  .family-card-count {
    position: absolute;
    top: clamp(1.8rem, 4vh, 3rem);
    right: clamp(1.8rem, 4vh, 3rem);
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    color: color-mix(in srgb, var(--accent) 70%, var(--ink-on-dark));
    letter-spacing: 0.2em;
  }
  .family-index {
    display: none;
    position: absolute;
    bottom: clamp(1.5rem, 4vh, 3rem);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-utility);
    font-size: var(--text-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3em;
    color: var(--ink-dim);
  }

  /* Pinned mode — applied by main.ts 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-index {
    display: block;
  }
  @media (min-width: 1100px) {
    .family.is-pinned .family-card {
      width: min(58%, 46rem);
      left: auto;
      right: 0;
    }
    .family.is-pinned .family-head {
      width: 100%;
    }
    .family.is-pinned .family-tribar {
      left: 22%;
      opacity: 0.16;
    }
  }


/* ---- page: company profile (single-company.php) ---- */

  .co-hero {
    position: relative;
    padding: 10rem var(--space-gutter) clamp(3rem, 8vh, 5.5rem);
    overflow: clip;
    background:
      radial-gradient(120% 100% at 85% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
      var(--carbon);
  }
  .co-hero .co-tribar {
    position: absolute;
    top: 50%;
    right: -4rem;
    width: min(52vh, 42vw);
    transform: translateY(-50%);
    opacity: 0.12;
    pointer-events: none;
  }
  .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-title {
    margin-top: 1.4rem;
    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;
  }
  .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));
  }
  .co-other-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.7rem 1.8rem;
    background: color-mix(in srgb, var(--accent) 7%, var(--carbon-raised));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  .co-other-link:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
  }
  .co-other-name {
    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-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: var(--voltage);
    margin: 0;
  }
  .proof-label {
    margin-top: 0.8rem;
    max-width: 26ch;
    color: var(--ink-dim);
  }
  .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-featured {
    margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  }
  .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-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(3rem, 7vh, 5rem);
  }
  .quotes-small {
    margin: 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
  }
  .quotes-small blockquote {
    color: var(--ink-dim);
    max-width: 48ch;
  }


/* ---- 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: 9rem 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(--carbon-raised);
  }
  .intel-ticker {
    padding: 1.1rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    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-dim);
  }
  .intel-sep {
    display: inline-block;
    color: var(--voltage);
    margin-left: 3.5rem;
  }
  .intel-inner {
    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-on-dark);
    background-size: 100% 1px;
  }


/* ---- 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 ---- */

  .svc-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);
  }
  .svc-index {
    position: sticky;
    top: 7rem;
    align-self: start;
    max-height: calc(100svh - 9rem);
    overflow-y: auto;
  }
  .svc-index ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--line);
  }
  .svc-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;
  }
  .svc-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));
  }
  .svc-index a:hover {
    color: var(--ink);
  }
  .svc-index a.is-active {
    color: var(--ink);
    border-left-color: var(--voltage);
  }
  .svc-section {
    padding: clamp(2.5rem, 6vh, 4.5rem) 0;
    border-top: 1px solid var(--line);
    scroll-margin-top: 6rem; /* clear the fixed header on anchored landings */
  }
  .svc-section:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .svc-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));
  }
  .svc-title {
    margin-top: 0.8rem;
    font-size: var(--text-h3);
  }
  .svc-body {
    max-width: var(--measure);
    margin-top: 1.4rem;
    color: var(--ink-dim);
  }
  .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-inner {
      grid-template-columns: 1fr;
    }
    .svc-index {
      display: none;
    }
    .svc-points ul {
      columns: 1;
    }
    .svc-term {
      grid-template-columns: 1fr;
      gap: 0.4rem;
    }
  }


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

  .mi {
    background: var(--carbon-raised);
  }
  .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;
  }
  .mi-trace {
    width: min(40rem, 80%);
    height: auto;
    margin-bottom: clamp(2rem, 5vh, 3.5rem);
    opacity: 0.85;
  }
  .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: 9rem 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: 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: 10rem 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 {
    padding: 0.6rem 0.9rem 0.6rem 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }
  .doc-prose th {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.82rem;
    border-bottom-color: 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;
    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;
  }
  @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;
  }
}