@charset "utf-8";
/* ==========================================================================
   Elite Gas Contractors — design system
   Hand-authored. No framework, no build step.
   Layer order is declared once here; it is the fix for the old Divi
   specificity wars — the winner is explicit, never accidental.
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ---------- Fonts (self-hosted, latin subset, no external requests) ------- */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/public-sans-var.woff2") format("woff2");
}

@layer tokens {
  :root {
    /* Brand — blue is normal operation. A correctly burning propane flame
       is blue; yellow/orange in a gas appliance means incomplete combustion.
       Amber is therefore reserved for warning states only. */
    --burner-black: #08111c;
    --flame-core: #0b2fb5;
    --flame-mid: #1666ce;
    --burner-tip: #8ad6ff;
    --cool-paper: #f1f4f9;

    /* Alert — EMERGENCY / WARNING ONLY. Nothing else on this site is warm. */
    --alert-amber: #e4620a;
    --alert-amber-ink: #b44a05; /* darkened for AA as text on light ground */

    /* Surfaces */
    --surface: #ffffff;
    --paper: var(--cool-paper);
    --dark: var(--burner-black);
    --dark-raised: #0e1b2b;
    --dark-line: #1b2c42;

    /* Text */
    --ink: #0d1826;
    --ink-muted: #4a5769;
    --on-dark: #ffffff;
    --on-dark-muted: #9fb0c4;
    --line: #d8e0ec;

    /* Type */
    --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue",
      sans-serif;
    --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Fluid type scale */
    --t-hero: clamp(2.5rem, 1.35rem + 4.3vw, 4.75rem);
    --t-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
    --t-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.85rem);
    --t-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
    --t-lede: clamp(1.06rem, 1rem + 0.42vw, 1.3rem);
    --t-body: 1.0625rem;
    --t-small: 0.9375rem;
    --t-eyebrow: 0.8125rem;

    /* Space */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --band-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

    /* Shell */
    --measure: 68ch;
    --wrap: 1180px;
    --wrap-narrow: 820px;
    --radius: 4px;
    --radius-lg: 8px;

    --shadow-card: 0 1px 2px rgb(8 17 28 / 6%), 0 8px 24px -12px rgb(8 17 28 / 18%);
    --shadow-lift: 0 2px 4px rgb(8 17 28 / 8%), 0 18px 40px -16px rgb(8 17 28 / 28%);

    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
  }

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

  body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--t-h1);
  }
  h2 {
    font-size: var(--t-h2);
  }
  h3 {
    font-size: var(--t-h3);
    letter-spacing: 0.02em;
  }

  p,
  ul,
  ol,
  dl {
    margin: 0 0 var(--sp-4);
  }

  a {
    color: var(--flame-mid);
    text-underline-offset: 0.16em;
    text-decoration-thickness: from-font;
  }
  a:hover {
    color: var(--flame-core);
  }

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

  strong,
  b {
    font-weight: 700;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--sp-6) 0;
  }

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

  /* Dark sections get a light focus ring that still reads on paper */
  .band--dark :focus-visible,
  .site-header :focus-visible,
  .site-footer :focus-visible {
    outline-color: var(--burner-tip);
  }

  ::selection {
    background: var(--burner-tip);
    color: var(--burner-black);
  }
}

@layer layout {
  .wrap {
    width: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
  }
  .wrap--narrow {
    width: min(100% - 2.5rem, var(--wrap-narrow));
    margin-inline: auto;
  }

  .band {
    padding-block: var(--band-y);
  }
  .band--paper {
    background: var(--paper);
  }
  .band--dark {
    background: var(--dark);
    color: var(--on-dark);
  }
  .band--tight {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  }

  .band--dark h1,
  .band--dark h2,
  .band--dark h3 {
    color: var(--on-dark);
  }
  .band--dark p {
    color: var(--on-dark-muted);
  }
  .band--dark a:not(.btn) {
    color: var(--burner-tip);
  }

  .stack > * + * {
    margin-top: var(--sp-4);
  }

  .grid {
    display: grid;
    gap: var(--sp-5);
  }
  .grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
  /* auto-fit alone will squeeze a 6-item set into 4+2 on a wide screen.
     Pin the counts once there is room, so rows stay balanced. */
  @media (min-width: 62rem) {
    .grid--3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .grid--4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* Two-column feature: media beside copy */
  .split {
    display: grid;
    gap: clamp(var(--sp-5), 4vw, var(--sp-7));
    align-items: center;
    grid-template-columns: 1fr;
  }
  @media (min-width: 56rem) {
    .split {
      grid-template-columns: 1fr 1fr;
    }
    .split--reverse > :first-child {
      order: 2;
    }
  }

  .skip-link {
    position: absolute;
    left: var(--sp-4);
    top: -100%;
    z-index: 100;
    background: var(--burner-tip);
    color: var(--burner-black);
    font-weight: 700;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    transition: top 0.15s var(--ease);
  }
  .skip-link:focus {
    top: var(--sp-4);
  }
}

@layer components {
  /* ---------------------------------------------------------------- rule */
  .rule {
    width: 3.5rem;
    height: 3px;
    border: 0;
    margin: 0 0 var(--sp-5);
    background: linear-gradient(90deg, var(--flame-core), var(--burner-tip));
  }
  .rule--center {
    margin-inline: auto;
  }

  .eyebrow {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-eyebrow);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--flame-mid);
    margin: 0 0 var(--sp-3);
  }
  /* Any dark ground: the eyebrow must be the pale tip, never the mid blue. */
  .band--dark .eyebrow,
  .hero .eyebrow,
  .page-hero .eyebrow,
  .cta .eyebrow {
    color: var(--burner-tip);
  }

  .lede {
    font-size: var(--t-lede);
    line-height: 1.55;
    color: var(--ink-muted);
    max-width: var(--measure);
  }
  .band--dark .lede {
    color: var(--on-dark-muted);
  }

  .section-head {
    max-width: var(--measure);
    margin-bottom: var(--sp-7);
  }
  .section-head--center {
    margin-inline: auto;
    text-align: center;
  }

  /* ------------------------------------------------------ emergency strip */
  /* The only warm element on the site. If a visitor smells gas, this is the
     one thing on screen that must not blend in. */
  .emerg {
    background: var(--alert-amber);
    color: var(--burner-black);
  }
  .emerg__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
    padding-block: var(--sp-2);
    text-align: center;
  }
  .emerg__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .emerg__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    color: var(--burner-black);
    text-decoration: none;
    padding: 0.35rem 0.85rem;
    border: 2px solid rgb(8 17 28 / 45%);
    border-radius: var(--radius);
    white-space: nowrap;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
  }
  .emerg__num:hover,
  .emerg__num:focus-visible {
    background: var(--burner-black);
    color: var(--alert-amber);
    border-color: var(--burner-black);
  }
  .emerg svg {
    flex: none;
  }

  /* -------------------------------------------------------------- header */
  .site-header {
    background: var(--dark);
    color: var(--on-dark);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--dark-line);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 4.5rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--on-dark);
    padding-block: 0.6rem;
  }
  .brand__logo {
    width: auto;
    height: 2.9rem;
    flex: none;
  }
  @media (max-width: 30rem) {
    .brand__logo {
      height: 2.3rem;
    }
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: transparent;
    color: var(--on-dark);
    border: 1px solid var(--dark-line);
    border-radius: var(--radius);
    font: 600 0.85rem/1 var(--font-body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
  }
  .nav-toggle:hover {
    border-color: var(--burner-tip);
  }
  /* An author `display` beats the UA [hidden] rule, so say it explicitly.
     The button is hidden in the markup and only revealed by JS. */
  .nav-toggle[hidden] {
    display: none;
  }

  .nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(var(--sp-3), 1.6vw, var(--sp-5));
    align-items: center;
  }
  .nav__link {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-dark);
    text-decoration: none;
    padding: 0.5rem 0.15rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
  }
  .nav__link:hover {
    color: var(--burner-tip);
    border-bottom-color: var(--burner-tip);
  }
  .nav__link[aria-current="page"] {
    color: var(--burner-tip);
    border-bottom-color: var(--burner-tip);
  }

  /* Mobile nav — no JS required to be usable; JS only improves it */
  @media (max-width: 60rem) {
    .site-header__inner {
      flex-wrap: wrap;
    }

    /* No JS: the nav sits in normal flow under the brand and is fully usable. */
    .nav:not([data-open]) {
      flex-basis: 100%;
      border-top: 1px solid var(--dark-line);
    }

    /* JS present: collapse into a drawer. */
    .nav[data-open] {
      position: absolute;
      inset: 100% 0 auto;
      background: var(--dark-raised);
      border-bottom: 1px solid var(--dark-line);
      box-shadow: 0 18px 40px -20px rgb(0 0 0 / 80%);
    }
    .nav[data-open="false"] {
      display: none;
    }
    .nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      width: min(100% - 2.5rem, var(--wrap));
      margin-inline: auto;
      padding-block: var(--sp-2) var(--sp-4);
    }
    .nav__link {
      padding: 0.85rem 0;
      border-bottom: 1px solid var(--dark-line);
      font-size: 1.15rem;
    }
    .nav__link[aria-current="page"] {
      border-bottom-color: var(--burner-tip);
    }
  }
  @media (min-width: 60.0625rem) {
    .nav-toggle {
      display: none;
    }
    .nav {
      display: block !important;
    }
  }

  /* -------------------------------------------------------------- buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.85rem 1.6rem;
    min-height: 3rem;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.15s var(--ease), background 0.15s var(--ease),
      color 0.15s var(--ease), border-color 0.15s var(--ease);
  }
  .btn:hover {
    transform: translateY(-2px);
  }

  /* Primary CTA is the pale tip of the flame on a dark page — the brightest
     point on screen, the way a real burner is. 10.4:1 against near-black. */
  .btn--primary {
    background: var(--burner-tip);
    color: var(--burner-black);
    border-color: var(--burner-tip);
  }
  .btn--primary:hover {
    background: #b2e5ff;
    border-color: #b2e5ff;
    color: var(--burner-black);
  }

  .btn--solid {
    background: var(--flame-core);
    color: #fff;
    border-color: var(--flame-core);
  }
  .btn--solid:hover {
    background: #092696;
    border-color: #092696;
    color: #fff;
  }

  .btn--ghost {
    background: transparent;
    color: var(--on-dark);
    border-color: rgb(255 255 255 / 45%);
  }
  .btn--ghost:hover {
    border-color: var(--burner-tip);
    color: var(--burner-tip);
  }

  .btn--ghost-ink {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
  }
  .btn--ghost-ink:hover {
    border-color: var(--flame-mid);
    color: var(--flame-core);
  }

  .btn--alert {
    background: var(--alert-amber);
    color: var(--burner-black);
    border-color: var(--alert-amber);
  }
  .btn--alert:hover {
    background: #f4700f;
    border-color: #f4700f;
    color: var(--burner-black);
  }

  .btn--block {
    width: 100%;
  }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
  }

  /* ---------------------------------------------------------------- hero */
  /* Diagonal split: an opaque deep-blue panel carries the type hard left,
     while the right side stays bright so the truck actually reads. The seam
     is a hard gradient stop, so it is a crisp graphic edge, not a fade. */
  .hero {
    /* Phone: how much of the frame stays daylight before the panel takes over.
       The scrim and the copy's top padding both key off this, so the seam can
       never drift away from where the type actually starts. Clamped so a
       tablet in portrait doesn't hand the photo half the screen. */
    --hero-photo: clamp(15rem, 72vw, 26rem);
    position: relative;
    background: var(--dark);
    color: var(--on-dark);
    overflow: hidden;
    isolation: isolate;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 46%;
  }

  /* Mobile default: photo on top, type on solid ground beneath it. The only
     thing that crosses the seam is the location plate, and it carries its own
     ground, so legibility is guaranteed outright either way. */
  .hero__inner {
    position: relative;
    /* The proof rail below now carries the hero's bottom edge and its own
       clearance for the angled cut, so the copy block no longer needs to. */
    padding-block: var(--sp-7) var(--sp-6);
    padding-top: calc(var(--hero-photo) + var(--sp-6));
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(
        180deg,
        rgb(8 17 28 / 12%) 0,
        rgb(8 17 28 / 22%) calc(var(--hero-photo) * 0.5),
        rgb(7 16 34 / 52%) calc(var(--hero-photo) - 4.5rem),
        #071022 var(--hero-photo),
        #071022 100%
      ),
      linear-gradient(180deg, rgb(11 47 181 / 18%), rgb(11 47 181 / 0%) 55%);
  }

  .hero__title {
    font-size: var(--t-hero);
    margin: 0 0 var(--sp-4);
    letter-spacing: 0.005em;
    line-height: 0.92;
  }
  .hero__title .accent {
    display: block;
    color: var(--burner-tip);
  }
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .hero__title .accent {
      background: linear-gradient(92deg, var(--burner-tip), #dff2ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
  .hero__lede {
    font-size: var(--t-lede);
    color: #cfdcea;
    max-width: 30rem;
    margin-bottom: var(--sp-6);
  }

  /* A bright rule that ties the type block to the seam. */
  .hero__kicker {
    display: flex;
    /* Top-aligned so the rule sits on the first line when the label wraps,
       instead of floating between two lines. */
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .hero__kicker::before {
    content: "";
    width: 2.5rem;
    height: 3px;
    flex: none;
    margin-top: 0.6rem;
    background: linear-gradient(90deg, var(--flame-core), var(--burner-tip));
  }
  .hero__kicker .eyebrow {
    margin: 0;
  }

  @media (max-width: 55.9375rem) {
    /* On a phone the location line sits exactly where the photograph dissolves
       into the panel, so it stops relying on whatever is behind it and brings
       its own: a frosted plate, hairline edge, and the flame rule stood up on
       end as its left edge. Pulled up so it straddles the seam on purpose --
       it reads as a caption pinned to the picture instead of type stranded on
       gravel, and the contrast holds no matter how the crop lands. */
    .hero__kicker {
      align-items: stretch;
      gap: 0;
      width: fit-content;
      max-width: 100%;
      margin-top: calc(-1 * (var(--sp-6) + 3.25rem));
      margin-bottom: var(--sp-5);
      padding: 0.5rem 0.85rem 0.5rem 0;
      border: 1px solid rgb(138 214 255 / 14%);
      border-left: 0;
      border-radius: 0 0.3rem 0.3rem 0;
      background: rgb(6 14 30 / 66%);
      -webkit-backdrop-filter: blur(7px) saturate(125%);
      backdrop-filter: blur(7px) saturate(125%);
      box-shadow: 0 0.75rem 1.5rem rgb(3 8 18 / 32%);
    }
    .hero__kicker::before {
      width: 3px;
      height: auto;
      margin: 0 0.7rem 0 0;
      border-radius: 0 2px 2px 0;
      background: linear-gradient(180deg, var(--burner-tip), var(--flame-core));
    }
    .hero__kicker .eyebrow {
      letter-spacing: 0.16em;
      line-height: 1.5;
      text-shadow: 0 1px 2px rgb(3 8 18 / 45%);
    }
    /* No blur available: pay for it with an opaque ground instead. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .hero__kicker {
        background: rgb(6 14 30 / 92%);
      }
    }
  }

  /* Angled cut into the section below — echoes the seam, softens the join. */
  .hero__cut {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(1.75rem, 4.5vw, 4rem);
    background: var(--surface);
    clip-path: polygon(0 100%, 100% 0, 100% 101%);
    z-index: 1;
  }

  @media (min-width: 56rem) {
    /* The panel is opaque behind the type and stops dead at the seam, so the
       photo keeps its own daylight instead of sitting under a black wash. */
    .hero::after {
      background:
        linear-gradient(
          101deg,
          transparent 0 46.2%,
          rgb(138 214 255 / 85%) 46.2% 46.6%,
          transparent 46.6% 100%
        ),
        linear-gradient(
          101deg,
          #071022 0 32%,
          rgb(7 18 40 / 97%) 46.2%,
          rgb(11 47 181 / 22%) 46.7%,
          rgb(11 47 181 / 10%) 100%
        ),
        radial-gradient(
          80% 120% at 6% 40%,
          rgb(11 47 181 / 45%) 0%,
          transparent 68%
        );
    }
    /* Past ~1600px the hero keeps getting wider while its height stays pinned
       to the type, so `cover` scales the photo to that width and throws the
       rest away — at 3440 only the middle 46% of the frame survives and the
       truck reads as an anonymous slice of tank. Two fluid ramps, both inert
       until the crop actually starts biting, keep the whole rig in frame.

       1. The photo only has to cover the daylight side of the seam, so hand
          the panel's strip back: that shrinks the box `cover` measures itself
          against and the truck zooms out instead of in. The cap is 38% — the
          seam leans left as it descends and bottoms out around 42%, so the
          photo always starts behind opaque panel, never beside it. */
    .hero__media {
      left: clamp(0px, (100vw - 100rem) * 1.2, 38%);
    }
    .hero__inner {
      padding-top: 0;
      /* Less room under the copy than over it: the proof rail closes the
         hero now, and the trust row and the quotes want to read together. */
      padding-block: clamp(3.25rem, 1rem + 5vw, 5rem)
        clamp(2.25rem, 0.5rem + 2.75vw, 3.25rem);
      display: grid;
      align-content: center;
      /*  2. Once that 62%-wide box is itself wider than the art (~2575px), the
             hero grows taller in step with it. 27.1vw is 62vw divided by the
             art's 16:7 aspect: the height at which the crop stops taking
             anything off the top and bottom, so cab, tank and lettering all
             stay in frame. Below that the type's own height rules, unchanged. */
      min-height: min(max(40rem, 27.1vw), 84vh);
    }
    .hero__copy {
      /* Hard left, and narrower than the panel so type never crosses the seam. */
      max-width: min(34rem, 41vw);
      margin-right: auto;
    }
    .hero__lede {
      max-width: min(29rem, 38vw);
    }
  }

  @media (min-width: 56rem) {
    /* Keep the trust row inside the opaque panel — the seam leans left as it
       descends, so the lowest element has the least room. */
    .hero .trust {
      font-size: 0.8125rem;
      gap: var(--sp-2) var(--sp-3);
      max-width: min(30rem, 39vw);
    }
  }

  @media (min-width: 82rem) {
    .hero__copy {
      max-width: min(35rem, 40vw);
    }
  }

  @media (min-width: 90rem) {
    /* On very wide screens the centred 1180 wrap strands the type in the
       middle of the panel, so the hero takes its own gutter: a 1560 measure
       first, then — once that measure starts pushing the type across the panel
       toward the seam — 13% of the viewport, which keeps it centred in the
       wedge it actually sits in. The two cross at ~2100px, so nothing jumps. */
    .hero__inner {
      width: 100%;
      padding-inline: min(max(2.5rem, (100% - 1560px) / 2), 13%) 0;
    }
  }


  /* ------------------------------------------------ hero proof rail */
  /* A full-bleed ticker of customer quotes anchoring the hero. It runs
     across the diagonal seam, so the type panel and the photo read as one
     block rather than two halves. The scrim is opaque on the panel side —
     an invisible join — and drops to 82% over the daylight side, which is
     still ~8:1 for white. It sits below .hero__cut in the stacking order,
     so the white wedge slices its bottom edge exactly as it slices the
     hero today; the rail's bottom padding keeps every quote out of it. */
  .hero__proof {
    position: relative;
    border-top: 1px solid rgb(138 214 255 / 22%);
    background: linear-gradient(
      90deg,
      #071022 0 30%,
      rgb(7 16 34 / 82%) 100%
    );
    -webkit-backdrop-filter: blur(5px) saturate(115%);
    backdrop-filter: blur(5px) saturate(115%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding-block: var(--sp-4);
    /* Clear the angled cut so no quote can land in the white wedge. */
    padding-bottom: calc(var(--sp-3) + clamp(1.75rem, 4.5vw, 4rem));
    /* Start the label on the same gutter the hero type uses, so the rail
       is a continuation of the copy block, not a separate slab. */
    padding-left: max(1.25rem, (100% - var(--wrap)) / 2);
  }

  .proof__label {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-eyebrow);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--burner-tip);
    white-space: nowrap;
  }
  /* Below 48rem the label stacks directly above the first card, which puts
     this icon immediately above that card's own quote mark — the same glyph
     twice in a column. It earns its place only once the label sits beside
     the rail rather than on top of it. */
  .proof__label svg {
    display: none;
    flex: none;
    opacity: 0.85;
  }

  /* The rail is a scroll-snap scroller at every width — one card and a peek of
     the next on a phone, three or more across on a desktop. Nothing animates,
     so there is no auto-moving content to pause and WCAG 2.2.2 never comes
     into play; every quote sits in the DOM exactly once. The overflow is the
     feature — the trailing fade and an always-drawn scrollbar are what say
     there is more, in place of motion. */
  .proof__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    /* x:auto with y left visible would compute y to auto and risk a vertical
       bar, so pin it. Nothing in the rail paints outside the box. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-2);
    /* On a desktop this bar is the control, so it has to be drawn before the
       first scroll rather than summoned by one. */
    scrollbar-width: thin;
    scrollbar-color: rgb(138 214 255 / 45%) rgb(138 214 255 / 12%);
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0 calc(100% - 2.5rem),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      #000 0 calc(100% - 2.5rem),
      transparent 100%
    );
  }
  /* The rail is a tab stop now. The global ring is offset 2px outward, which
     this scroll box would clip, so draw this one on the inside. */
  .proof__viewport:focus-visible {
    outline-offset: -3px;
  }

  /* Out of the layout entirely until the desktop ticker claims it, so the card
     rail measures its scroll width against the track directly. */
  .proof__marquee {
    display: contents;
  }
  /* Nothing is moving in card mode, so there is nothing to pause. */
  .proof__toggle {
    display: none;
  }

  .proof__track {
    /* The label's quote icon, reused as the card mark. Same path, one source. */
    --proof-quote-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 5.5A7.6 7.6 0 0 0 4 13v5.5h6.6V12H7.4a4.6 4.6 0 0 1 3.4-4.2L10 5.5Zm10 0A7.6 7.6 0 0 0 14 13v5.5h6.6V12h-3.2a4.6 4.6 0 0 1 3.4-4.2L20 5.5Z'/%3E%3C/svg%3E");
    /* One card plus a slice of the next: the peek is what tells a thumb the
       rail swipes, without anything having to move to demonstrate it. */
    --proof-card: 82%;
    --proof-gap: var(--sp-5);
    display: flex;
    gap: var(--proof-gap);
    list-style: none;
    margin: 0;
    padding: 0.1rem 0 0;
  }
  /* A trailing flex item rather than trailing padding — padding on the end of
     an overflowing flex container is dropped from the scroll width by most
     engines, which would park the last card under the fade. */
  .proof__track::after {
    content: "";
    flex: 0 0 var(--sp-4);
  }
  /* site.js clones the track for the desktop ticker. At every width the ticker
     is not running those clones are six duplicate quotes, so they stay out.
     This has to sit after .proof__track — same specificity, and that rule sets
     display: flex — or the clones stack up as extra rows of cards. */
  .proof__track--clone {
    display: none;
  }

  .proof__item {
    position: relative;
    flex: 0 0 var(--proof-card);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-left: 1.4rem;
  }
  /* Decorative open-quote as a pseudo-element: six spans of punctuation is six
     things a screen reader has to get through before reaching a sentence.
     It carries the same path as the section label above it, painted through a
     mask so the colour stays on the token instead of being frozen into the
     data URI. A Barlow glyph here read as a different mark beside that icon. */
  .proof__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 1rem;
    height: 1rem;
    background-color: var(--burner-tip);
    opacity: 0.85;
    -webkit-mask: var(--proof-quote-mark) center / contain no-repeat;
    mask: var(--proof-quote-mark) center / contain no-repeat;
  }
  /* A hairline where the ticker used a dot: with the quotes set as blocks
     rather than one running line, a vertical rule is what divides them. */
  .proof__item + .proof__item::after {
    content: "";
    position: absolute;
    left: calc(var(--proof-gap) / -2);
    top: 0.15rem;
    bottom: 0.15rem;
    width: 1px;
    background: rgb(138 214 255 / 22%);
  }

  .proof__quote {
    margin: 0;
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
    line-height: 1.45;
    color: #e8f1fa;
  }
  .proof__by {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--burner-tip);
    /* Pinned to the bottom so the names line up across cards whose quotes run
       to different numbers of lines. */
    margin-top: auto;
    padding-top: 0.15rem;
  }
  .proof__by::before {
    content: "\2014\00a0";
  }

  @media (min-width: 48rem) {
    /* Enough room to sit the label beside the rail instead of above it. */
    .hero__proof {
      flex-direction: row;
      align-items: center;
      gap: var(--sp-4);
    }
    .proof__label {
      padding-right: var(--sp-4);
      border-right: 1px solid rgb(138 214 255 / 25%);
    }
    .proof__label svg {
      display: block;
    }
    .proof__track {
      --proof-card: 46%;
    }
  }

  @media (min-width: 64rem) {
    /* Three across, and the quotes are ordered so those first three are three
       different customers rather than three lines from one. The cap keeps a
       card from ballooning to 400px of half-empty rail on a wide monitor —
       past ~1600px it just means more quotes are visible at rest. */
    .proof__track {
      --proof-card: min(31.5%, 21rem);
    }
  }

  /* ---- desktop ticker -------------------------------------------------
     Wide screens get the drifting rail back. It is gated on no-preference,
     so a visitor who asked for reduced motion keeps the card rail at every
     width — the fallback is a real layout, not a stopped animation. Three
     identical tracks shifted by exactly one track width, so the loop has no
     seam; site.js builds tracks two and three. */
  @media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
    .proof__viewport {
      overflow: hidden;
      scroll-snap-type: none;
      padding-bottom: 0;
      /* Both edges fade now: quotes dissolve in and out rather than being
         chopped by the overflow box. */
      -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 1.5rem,
        #000 calc(100% - 5rem),
        transparent 100%
      );
      mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 1.5rem,
        #000 calc(100% - 5rem),
        transparent 100%
      );
    }
    .proof__marquee {
      display: flex;
      /* No gap: each track must be exactly one third of the marquee or the
         -33.3333% shift would not land on a copy. */
      gap: 0;
      width: max-content;
      animation: proof-scroll 62s linear infinite;
    }
    .proof__track--clone {
      display: flex;
    }
    .proof__track {
      gap: 0;
      padding: 0;
    }
    /* The card rail's trailing spacer would be a gap inside the loop. */
    .proof__track::after {
      display: none;
    }

    /* Back to one running line per quote. */
    .proof__item {
      flex: none;
      flex-direction: row;
      align-items: baseline;
      gap: 0.45rem;
      white-space: nowrap;
      margin-right: clamp(2rem, 4vw, 3.5rem);
    }
    .proof__by {
      margin-top: 0;
      padding-top: 0;
    }
    /* A dot centred in the space between two quotes, after every item — the
       last one included, or the loop seam would be the one join without it.
       Both selectors, so this outranks the card rail's hairline. */
    .proof__item::after,
    .proof__item + .proof__item::after {
      content: "";
      position: absolute;
      left: auto;
      right: calc(clamp(2rem, 4vw, 3.5rem) / -2);
      top: 50%;
      bottom: auto;
      width: 4px;
      height: 4px;
      margin-top: -2px;
      border-radius: 50%;
      background: rgb(138 214 255 / 45%);
    }

    /* Hover pauses, but hover is not a mechanism a keyboard reaches — this
       button is what actually satisfies WCAG 2.2.2, and giving the rail a
       focusable child is also what finally makes :focus-within fire. */
    .proof__toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      width: 1.4rem;
      height: 1.4rem;
      margin-left: 0.1rem;
      padding: 0;
      border: 1px solid rgb(138 214 255 / 35%);
      border-radius: 50%;
      background: none;
      color: var(--burner-tip);
      cursor: pointer;
    }
    .proof__toggle:hover {
      background: rgb(138 214 255 / 15%);
      border-color: rgb(138 214 255 / 60%);
    }

    .hero__proof:hover .proof__marquee,
    .hero__proof:focus-within .proof__marquee,
    .hero__proof[data-paused="true"] .proof__marquee {
      animation-play-state: paused;
    }
  }

  @keyframes proof-scroll {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-33.3333%, 0, 0);
    }
  }

  @media (min-width: 90rem) {
    /* Match the hero type's own gutter once the 1180 wrap stops governing. */
    .hero__proof {
      padding-left: min(max(2.5rem, (100% - 1560px) / 2), 13%);
    }
  }

  /* Interior page header — same language, shorter */
  .page-hero {
    position: relative;
    background: var(--dark);
    color: var(--on-dark);
    overflow: hidden;
    isolation: isolate;
  }
  .page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        100deg,
        rgb(8 17 28 / 95%) 0%,
        rgb(8 17 28 / 82%) 55%,
        rgb(8 17 28 / 62%) 100%
      ),
      radial-gradient(
        60% 100% at 0% 0%,
        rgb(11 47 181 / 45%) 0%,
        transparent 70%
      );
  }
  .page-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  .page-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .page-hero__inner {
    padding-block: clamp(2.75rem, 1.5rem + 6vw, 5rem);
    max-width: 46rem;
  }
  .page-hero h1 {
    margin-bottom: var(--sp-3);
  }
  .page-hero .lede {
    color: #d6e2ef;
    margin-bottom: 0;
  }

  /* ---------------------------------------------------------- trust row */
  .trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin: var(--sp-5) 0 0;
    padding: 0;
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--on-dark-muted);
  }
  .trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .trust li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--burner-tip);
    flex: none;
  }

  /* -------------------------------------------------------------- cards */
  .card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
      border-color 0.2s var(--ease);
  }
  .card__media {
    aspect-ratio: 3 / 2;
    background: var(--paper);
    overflow: hidden;
  }
  .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
  }
  .card__body {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .card__body h3 {
    margin-bottom: var(--sp-3);
  }
  .card__body p {
    color: var(--ink-muted);
    margin-bottom: var(--sp-4);
  }
  .card__body p:last-of-type {
    flex: 1;
  }
  .card__link {
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--flame-core);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    /* 44px minimum tap target */
    min-height: 2.75rem;
  }
  .card__link svg {
    transition: transform 0.2s var(--ease);
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: #b9cbe4;
  }
  .card:hover .card__media img {
    transform: scale(1.04);
  }
  .card:hover .card__link {
    text-decoration: underline;
  }
  .card:hover .card__link svg {
    transform: translateX(4px);
  }

  /* Icon card — used where there is no photograph to earn its place */
  .icard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
      border-color 0.2s var(--ease);
  }
  .icard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: #b9cbe4;
  }
  .icard h3 {
    margin: 0;
  }
  .icard p {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--t-small);
  }
  .icard__icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--flame-core), var(--flame-mid));
    color: #fff;
    flex: none;
  }
  .icard__icon svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  .band--dark .icard {
    background: var(--dark-raised);
    border-color: var(--dark-line);
  }
  .band--dark .icard h3 {
    color: var(--on-dark);
  }
  .band--dark .icard p {
    color: var(--on-dark-muted);
  }
  .band--dark .icard:hover {
    border-color: var(--flame-mid);
  }

  /* ------------------------------------------------- product mosaic ------
     Six products as one editorial block. Each tile is a photograph read
     through the brand scrim: dark enough that white type stays AA at every
     size, blue enough that a mixed set of photographs still reads as one
     system. Hover is enhancement only — the resting state carries the
     message, because half the traffic here never hovers anything. */
  .pmosaic {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
  }
  @media (min-width: 40rem) {
    .pmosaic {
      grid-template-columns: repeat(2, 1fr);
    }
    /* Feature and the odd tile out both go full width, so no row is orphaned. */
    .ptile--feature,
    .pmosaic > .ptile:last-child {
      grid-column: span 2;
    }
  }
  @media (min-width: 62rem) {
    .pmosaic {
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: minmax(15.5rem, 1fr);
    }
    .pmosaic > .ptile:last-child {
      grid-column: auto;
    }
    .ptile--feature {
      grid-column: span 2;
      grid-row: span 2;
    }
  }

  .ptile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--dark);
    color: var(--on-dark);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 15.5rem;
    padding: var(--sp-5);
    box-shadow: var(--shadow-card);
  }
  .ptile--feature {
    min-height: 20rem;
  }

  .ptile__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    margin: 0;
  }
  .ptile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Pulled toward the brand at rest; full colour on hover. */
    filter: saturate(0.7) contrast(1.06) brightness(0.95);
    transform: scale(1.03);
    transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
  }
  /* Scrim: vertical ramp for legibility, blue radial for brand. */
  .ptile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgb(8 17 28 / 36%) 0%,
        rgb(8 17 28 / 58%) 42%,
        rgb(8 17 28 / 92%) 100%
      ),
      radial-gradient(
        120% 90% at 6% 100%,
        rgb(11 47 181 / 55%) 0%,
        transparent 68%
      );
  }
  /* The .rule, redrawn as an edge that runs the width of the tile on hover. */
  .ptile::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--flame-core), var(--burner-tip));
    transform: scaleX(0.14);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
  }

  .ptile__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--flame-core), var(--flame-mid));
    color: #fff;
    box-shadow: 0 6px 18px -6px rgb(8 17 28 / 70%);
    margin-bottom: var(--sp-4);
    flex: none;
  }
  .ptile__icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .ptile__num {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-5);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 1rem + 4vw, 3.75rem);
    line-height: 1;
    color: rgb(255 255 255 / 28%);
    text-shadow: 0 2px 14px rgb(8 17 28 / 45%);
    pointer-events: none;
  }

  .ptile h3 {
    margin: 0 0 var(--sp-2);
    color: var(--on-dark);
    text-shadow: 0 1px 12px rgb(8 17 28 / 55%);
  }
  .ptile--feature h3 {
    font-size: var(--t-h2);
  }
  .ptile p {
    margin: 0;
    color: #d6e2ef;
    font-size: var(--t-small);
    max-width: 34ch;
  }
  .ptile--feature p {
    max-width: 46ch;
    font-size: var(--t-body);
  }

  @media (hover: hover) {
    .ptile:hover .ptile__media img {
      transform: scale(1.09);
      filter: saturate(1) contrast(1.02) brightness(1);
    }
    .ptile:hover::after {
      transform: scaleX(1);
    }
  }

  /* --------------------------------------------------------------- media */
  .media {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper);
    box-shadow: var(--shadow-card);
  }
  .media img {
    width: 100%;
  }
  .media figcaption {
    font-size: var(--t-small);
    color: var(--ink-muted);
    padding: var(--sp-3) var(--sp-4);
  }

  .photo-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--sp-3);
  }
  .photo-strip img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
  }

  /* --------------------------------------------------------- proof panel */
  /* Seven icon cards across two grids said seven equal things and none of
     them led. This says one thing, in order, on the dark ground the brand
     already owns: a sticky claim on the left, numbered evidence on the right,
     and the crew photographs closing it out flush to the next section.
     Depth here comes from light — burner glow, a schematic grid, a sweep that
     lights the row under the cursor — not from another row of bordered boxes.
     No `overflow` on this section: it would trap the sticky rail. */
  .proof {
    position: relative;
    isolation: isolate;
    padding-bottom: 0;
  }
  .proof::before,
  .proof::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  /* Burner glow: strongest behind the claim, echoed low and right. */
  .proof::before {
    background:
      radial-gradient(
        44rem 32rem at 6% 4%,
        rgb(11 47 181 / 60%) 0%,
        transparent 68%
      ),
      radial-gradient(
        28rem 22rem at 100% 78%,
        rgb(22 102 206 / 22%) 0%,
        transparent 70%
      );
  }
  /* Schematic grid, faded out before it reaches the photographs. */
  .proof::after {
    background-image:
      linear-gradient(to right, rgb(255 255 255 / 3.5%) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(255 255 255 / 3.5%) 1px, transparent 1px);
    background-size: 6rem 6rem;
    -webkit-mask-image: radial-gradient(
      130% 85% at 50% 0%,
      #000 0%,
      transparent 78%
    );
    mask-image: radial-gradient(130% 85% at 50% 0%, #000 0%, transparent 78%);
  }

  .proof__grid {
    display: grid;
    gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  }
  @media (min-width: 62rem) {
    .proof__grid {
      grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
      gap: clamp(var(--sp-6), 5vw, 4.5rem);
      align-items: start;
    }
    .proof__rail {
      position: sticky;
      /* Matches html { scroll-padding-top }, so the rail clears the header. */
      top: 7rem;
    }
  }

  .proof__rail h2 {
    margin-bottom: var(--sp-4);
  }
  .proof__rail .lede {
    margin-bottom: 0;
  }

  .proof__years {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin: clamp(var(--sp-6), 4vw, var(--sp-7)) 0 var(--sp-6);
  }
  .proof__years-n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.75rem, 2rem + 6vw, 5.75rem);
    line-height: 0.82;
    letter-spacing: -0.01em;
    color: var(--burner-tip);
    flex: none;
  }
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .proof__years-n {
      background: linear-gradient(
        155deg,
        #e6f6ff 0%,
        var(--burner-tip) 45%,
        var(--flame-mid) 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
  .proof__years-plus {
    font-size: 0.5em;
    vertical-align: super;
    letter-spacing: 0;
  }
  .proof__years-l {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
    max-width: 11rem;
    border-left: 2px solid var(--dark-line);
    padding-left: var(--sp-4);
  }

  /* ---- the numbered evidence ---- */
  .reasons {
    list-style: none;
    counter-reset: reason;
    margin: 0;
    padding: 0;
  }
  .reason {
    position: relative;
    counter-increment: reason;
    display: grid;
    grid-template-columns: clamp(2.6rem, 5.5vw, 4rem) minmax(0, 1fr);
    gap: clamp(var(--sp-4), 2.5vw, var(--sp-5));
    align-items: start;
    padding: clamp(var(--sp-5), 3vw, var(--sp-6)) 0
      clamp(var(--sp-5), 3vw, var(--sp-6)) clamp(var(--sp-4), 2vw, var(--sp-5));
    border-top: 1px solid var(--dark-line);
    /* The sweep is a background, so it can never sit over the type. It is
       sized from 0 and grown, because background-image cannot animate. */
    background-image: linear-gradient(
      90deg,
      rgb(11 47 181 / 62%) 0%,
      rgb(11 47 181 / 14%) 52%,
      rgb(11 47 181 / 0%) 100%
    );
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.45s var(--ease);
  }
  .reason:last-child {
    border-bottom: 1px solid var(--dark-line);
  }
  .reason:hover,
  .reason:focus-within {
    background-size: 100% 100%;
  }

  /* Flame rule, lit top-down on the row under the cursor. */
  .reason::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--burner-tip), var(--flame-core));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s var(--ease);
  }
  .reason:hover::after,
  .reason:focus-within::after {
    transform: scaleY(1);
  }

  /* Counter, not markup: an outlined numeral that fills as the row lights. */
  .reason::before {
    content: counter(reason, decimal-leading-zero);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
    line-height: 1;
    margin-top: -0.08em;
    letter-spacing: 0.01em;
    color: rgb(138 214 255 / 60%);
    transition: color 0.3s var(--ease);
  }
  @supports (-webkit-text-stroke: 1px #000) {
    .reason::before {
      color: transparent;
      -webkit-text-stroke: 1.5px rgb(138 214 255 / 55%);
      transition: -webkit-text-stroke-color 0.3s var(--ease),
        color 0.3s var(--ease);
    }
    .reason:hover::before,
    .reason:focus-within::before {
      -webkit-text-stroke-color: var(--burner-tip);
    }
  }
  .reason:hover::before,
  .reason:focus-within::before {
    color: var(--burner-tip);
  }

  .reason__body h3 {
    margin-bottom: var(--sp-2);
  }
  .reason__body p {
    margin: 0;
    max-width: 44ch;
  }

  /* Watermark sits in a reserved gutter, so it never runs under the copy. */
  .reason__mark {
    display: none;
  }
  @media (min-width: 56rem) {
    .reason {
      padding-right: 7rem;
    }
    .reason__mark {
      display: block;
      position: absolute;
      right: 0.5rem;
      top: 50%;
      translate: 0 -50%;
      width: 5.5rem;
      height: 5.5rem;
      color: #fff;
      opacity: 0.06;
      pointer-events: none;
      transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
    }
    .reason:hover .reason__mark,
    .reason:focus-within .reason__mark {
      opacity: 0.22;
      color: var(--burner-tip);
    }
  }

  /* ---- closing photo ribbon, flush to the next section ---- */
  .proof__ribbon {
    margin-top: clamp(var(--sp-7), 6vw, var(--sp-8));
  }
  .proof__ribbon-label {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--burner-tip);
    margin: 0 0 var(--sp-4);
  }
  .proof__ribbon-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dark-line);
  }
  .ribbon {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(13rem, 1fr);
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  .ribbon > * {
    scroll-snap-align: start;
  }
  .ribbon img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    filter: brightness(0.82) saturate(0.9);
    transition: filter 0.35s var(--ease);
  }
  .ribbon picture:hover img {
    filter: none;
  }

  /* ------------------------------------------------------------- feature */
  .feature-list {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    display: grid;
    gap: var(--sp-3);
  }
  .feature-list li {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: var(--sp-3);
    align-items: start;
  }
  .feature-list svg {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--flame-mid);
    margin-top: 0.18rem;
    flex: none;
  }
  .band--dark .feature-list svg {
    color: var(--burner-tip);
  }

  /* ------------------------------------------------------------ CTA band */
  .cta {
    background: linear-gradient(115deg, var(--burner-black), #0a2a6b 65%, #0b2fb5);
    color: var(--on-dark);
    text-align: center;
  }
  .cta__num {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 1.5rem + 5vw, 4.75rem);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--burner-tip);
    text-decoration: none;
    margin-bottom: var(--sp-3);
  }
  .cta__num:hover {
    color: #cfeeff;
    text-decoration: underline;
  }
  .cta p {
    color: #d6e2ef;
    font-size: var(--t-lede);
    margin-bottom: var(--sp-5);
  }
  .cta .btn-row {
    justify-content: center;
  }

  /* -------------------------------------------------------- brand strip */
  .brandstrip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--sp-5), 5vw, var(--sp-8));
  }
  .brandstrip a {
    display: block;
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter 0.2s var(--ease), opacity 0.2s var(--ease),
      transform 0.2s var(--ease);
  }
  .brandstrip a:hover {
    filter: none;
    opacity: 1;
    transform: translateY(-2px);
  }
  .brandstrip img {
    height: 2.75rem;
    width: auto;
    object-fit: contain;
  }

  /* -------------------------------------------------------------- alert */
  /* Safety page leak-response block. The single most urgent thing on the
     site, so it is the only place amber is allowed to dominate. */
  .alert {
    background: #fff6ef;
    border: 2px solid var(--alert-amber);
    border-left-width: 8px;
    border-radius: var(--radius-lg);
    padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  }
  .alert__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .alert__head svg {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--alert-amber-ink);
    flex: none;
  }
  .alert__head h2 {
    margin: 0;
    color: var(--alert-amber-ink);
  }
  .alert ol {
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-4);
  }
  .alert ol li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--sp-4);
    align-items: start;
    font-size: var(--t-lede);
    font-weight: 600;
  }
  .alert ol li::before {
    content: counter(step);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 2.5rem;
    text-align: center;
    background: var(--alert-amber);
    color: var(--burner-black);
    border-radius: 50%;
    height: 2.5rem;
  }
  .alert a {
    color: var(--alert-amber-ink);
    font-weight: 700;
  }

  /* Warning callout, lighter weight than .alert */
  .callout {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 6px solid var(--flame-mid);
    border-radius: var(--radius);
    padding: var(--sp-5);
  }
  .callout h3 {
    margin-bottom: var(--sp-3);
  }
  .callout p:last-child {
    margin-bottom: 0;
  }
  .callout--alert {
    border-left-color: var(--alert-amber);
  }

  /* --------------------------------------------------------- safety list */
  .safety-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-4);
  }
  .safety-list li {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: var(--sp-4);
    align-items: start;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .safety-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .safety-list svg {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--flame-mid);
    margin-top: 0.15rem;
    flex: none;
  }

  /* --------------------------------------------------------------- forms */
  .form {
    display: grid;
    gap: var(--sp-4);
  }
  .field {
    display: grid;
    gap: var(--sp-2);
  }
  .field label {
    font-weight: 700;
    font-size: var(--t-small);
  }
  .field .req {
    color: var(--alert-amber-ink);
  }
  .field input,
  .field textarea {
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid #b9c6d8;
    border-radius: var(--radius);
    padding: 0.75rem 0.85rem;
    width: 100%;
    min-height: 3rem;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  }
  .field textarea {
    min-height: 9rem;
    resize: vertical;
  }
  .field input:focus,
  .field textarea:focus {
    border-color: var(--flame-mid);
    box-shadow: 0 0 0 3px rgb(22 102 206 / 20%);
    outline: none;
  }
  .field__hint {
    font-size: var(--t-small);
    color: var(--ink-muted);
  }
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .form__note {
    font-size: var(--t-small);
    color: var(--ink-muted);
  }
  .form-status {
    border-radius: var(--radius);
    padding: var(--sp-4);
    font-weight: 600;
  }
  .form-status[data-state="error"] {
    background: #fff6ef;
    border: 1px solid var(--alert-amber);
    color: var(--alert-amber-ink);
  }
  .form-status[data-state="ok"] {
    background: #eef6ff;
    border: 1px solid var(--flame-mid);
    color: var(--flame-core);
  }

  /* ------------------------------------------------------------ contact */
  .contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-5);
  }
  .contact-list li {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: var(--sp-4);
    align-items: start;
  }
  .contact-list .icard__icon {
    width: 2.75rem;
    height: 2.75rem;
  }
  .contact-list h3 {
    margin: 0 0 var(--sp-1);
    font-size: 1.15rem;
  }
  .contact-list a {
    font-weight: 600;
  }
  .contact-list p {
    margin: 0;
    color: var(--ink-muted);
  }

  .hours {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-small);
  }
  .hours th,
  .hours td {
    text-align: left;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
  }
  .hours th {
    font-weight: 700;
  }
  .hours td {
    text-align: right;
    color: var(--ink-muted);
  }
  .hours tr:last-child th,
  .hours tr:last-child td {
    border-bottom: 0;
  }

  /* ---------------------------------------------------------- anchor nav */
  .anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
  }

  /* -------------------------------------------------------------- footer */
  .site-footer {
    background: var(--dark);
    color: var(--on-dark-muted);
    padding-block: var(--sp-8) var(--sp-6);
    font-size: var(--t-small);
  }
  .site-footer a {
    color: var(--on-dark-muted);
    text-decoration: none;
  }
  .site-footer a:hover {
    color: var(--burner-tip);
    text-decoration: underline;
  }
  .footer-grid {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
  .footer-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-dark);
    margin: 0 0 var(--sp-4);
  }
  .footer-address {
    font-style: normal;
    margin: 0;
  }
  .footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
  }
  .footer-bottom {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--dark-line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    align-items: center;
    justify-content: space-between;
  }
  .social {
    display: flex;
    gap: var(--sp-3);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .social a {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--dark-line);
    border-radius: var(--radius);
    color: var(--on-dark-muted);
  }
  .social a:hover {
    color: var(--burner-tip);
    border-color: var(--burner-tip);
  }
  .social svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  /* ---------------------------------------------------------------- misc */
  .prose {
    max-width: var(--measure);
  }
  .prose h2 {
    margin-top: var(--sp-7);
  }
  .prose h2:first-child {
    margin-top: 0;
  }

  .stat-row {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }
  .stat {
    border-left: 3px solid var(--flame-mid);
    padding-left: var(--sp-4);
  }
  .band--dark .stat {
    border-left-color: var(--burner-tip);
  }
  .stat__n {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
    line-height: 1;
    color: var(--flame-core);
  }
  .band--dark .stat__n {
    color: var(--burner-tip);
  }
  .stat__l {
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--ink-muted);
  }
  .band--dark .stat__l {
    color: var(--on-dark-muted);
  }

  .map-link {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper);
    text-decoration: none;
    color: inherit;
  }
  .map-link:hover {
    border-color: var(--flame-mid);
  }
  .map-link__caption {
    padding: var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-weight: 600;
  }
  .map-link svg {
    color: var(--flame-mid);
    flex: none;
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .center {
    text-align: center;
  }
  .mt-0 {
    margin-top: 0;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .mt-6 {
    margin-top: var(--sp-6);
  }
  .mt-7 {
    margin-top: var(--sp-7);
  }
  .nowrap {
    white-space: nowrap;
  }
}