/* ==========================================================================
   EVKON — evkon.com
   Single stylesheet for the whole site.

   Contents
     1.  Design tokens
     2.  Base / reset
     3.  Layout primitives      .wrap .band .split .grid-*
     4.  Typography             .eyebrow .display .heading .lede .body .meta
     5.  Buttons & links        .btn .textlink
     6.  Announcement bar
     7.  Site header
     8.  Site footer
     9.  Heroes
     10. Components             cards, spec rows, numbered steps, stat bar...
     11. Page-specific sections
     12. Responsive
   ========================================================================== */

/* 1. Design tokens ======================================================== */

:root {
  /* Brand */
  --navy-900: #14224a; /* deepest navy — headings, footer, deep bands */
  --navy-700: #1c2f5e; /* brand navy — heroes, primary buttons */
  --navy-500: #35548f; /* rules on navy */
  --navy-400: #4a6494; /* outlined button borders on navy */
  --green: #0b7d3e; /* accent — darkened from #0f9f4f to clear WCAG AA (5.23:1
                        both as a background for white text and as text on
                        white). The original failed at 3.45:1. */
  --green-bright: #0f9f4f; /* the original, kept for non-text marks only */
  --green-200: #6fe0a0; /* accent on navy */

  /* Text */
  --ink: #101a2e; /* default body text */
  --ink-700: #33415c; /* secondary text */
  --ink-500: #5b6a80; /* muted paragraph text */
  --ink-300: #627189; /* mono labels, captions — darkened from #8593a8, which
                         failed AA on both white (3.12:1) and the tinted band
                         (2.90:1). Now 4.95:1 and 4.61:1. */
  --on-navy: #dbe3ef; /* body text on navy */
  --on-navy-dim: #9fb0cd; /* muted text on navy */
  --on-navy-faint: #7f92b3; /* footer legal line */
  --on-navy-accent: #8ba3ca; /* second line of the home headline */

  /* Surfaces & rules */
  --white: #ffffff;
  --surface: #f5f7fa; /* tinted band background */
  --border: #dfe4ec; /* standard 1px rule */
  --border-soft: #eef1f6; /* hairline inside cards */
  --border-strong: #c9d2e0; /* outlined buttons, dashed panels — borders only,
                               contrast rules do not apply */
  --surface-2: #e4e8ee; /* a step darker than --surface, for inert blocks */
  --numeral: #8095b6; /* large step numerals — 3.05:1, clears the large-text
                         threshold. Was #c9d2e0 at 1.52:1. */

  /* Type */
  --font-sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --max-width: 1400px;
  --gutter: 40px;
  --band-py: 84px; /* default vertical rhythm for a full-width band */
  --header-height: 76px;
}

/* 2. Base / reset ========================================================= */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
}

a {
  color: var(--navy-700);
  text-decoration: none;
}

a:hover {
  color: var(--green);
}

::selection {
  background: var(--navy-700);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The skip link is hidden until a keyboard user tabs to it, then it has to be
   visible — otherwise it helps nobody. */
.visually-hidden:focus,
.visually-hidden:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 18px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--navy-900);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

@keyframes evk-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

/* 3. Layout primitives ==================================================== */

/* Centred content column shared by every band. */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* A narrow column for sustained reading. Prose past about 70 characters a
   line gets hard to track back from; the case-study narrative uses this while
   its diagrams and data break out to the full width. */
.wrap--narrow {
  max-width: 780px;
}

/* Vertical rhythm. Override --band-py on the section for a tighter band. */
.band {
  padding-top: var(--band-py);
  padding-bottom: var(--band-py);
}

.band--tight {
  --band-py: 46px;
}
.band--md {
  --band-py: 72px;
}
.band--66 {
  --band-py: 66px;
}
.band--76 {
  --band-py: 76px;
}
.band--80 {
  --band-py: 80px;
}
.band--40 {
  --band-py: 40px;
}
.band--64 {
  --band-py: 64px;
}

/* Bands whose top and bottom padding differ. */
.band--catalog {
  padding-top: 48px;
  padding-bottom: 88px;
}
.band--incentive-hero {
  padding-top: 40px;
  padding-bottom: 76px;
}
.band--projects-head {
  padding-top: 36px;
  padding-bottom: 44px;
}
.band--projects {
  padding-top: 56px;
  padding-bottom: 88px;
}
.band--about-head {
  padding-top: 36px;
  padding-bottom: 52px;
}
.band--quote {
  padding-top: 36px;
  padding-bottom: 92px;
}

/* Page-opening band: less air on top because the header already sits above. */
.band--head {
  padding-top: 36px;
  padding-bottom: 48px;
}

/* Band skins */
.band-line {
  border-bottom: 1px solid var(--border);
}
.band-surface {
  background: var(--surface);
}
.band-navy {
  background: var(--navy-700);
  color: var(--white);
}
.band-navy-deep {
  background: var(--navy-900);
  color: var(--white);
}
.band-green {
  background: var(--green);
  color: var(--white);
}

/* Two-column splits. The number is the left column's share. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}
.split--80 {
  grid-template-columns: 0.8fr 1.2fr;
}
.split--85 {
  grid-template-columns: 0.85fr 1.15fr;
}
.split--90 {
  grid-template-columns: 0.9fr 1.1fr;
}
.split--110 {
  grid-template-columns: 1.1fr 0.9fr;
}
.split--125 {
  grid-template-columns: 1.25fr 0.75fr;
}
.split--115 {
  grid-template-columns: 1.15fr 0.85fr;
}
.split--gap-56 {
  gap: 56px;
}
.split--gap-64 {
  gap: 64px;
}
.split--top {
  align-items: start;
}
.split--center {
  align-items: center;
}

/* A split whose two halves are separated by a vertical rule rather than a gap. */
.split-ruled {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
}
.split-ruled > :first-child {
  padding: var(--band-py) 56px var(--band-py) 0;
}
.split-ruled > :last-child {
  border-left: 1px solid var(--border);
  padding: var(--band-py) 0 var(--band-py) 56px;
}

/* Equal-column grids */
.grid-3,
.grid-4 {
  display: grid;
  gap: 20px;
}
.grid-3 {
  /* minmax(0,1fr) lets a track shrink below its content's min-content width.
     Without it a long unbreakable value in a card forces the whole grid wider
     than the viewport — which it did, at tablet widths. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Hairline grid: cells sit on a 1px background so the gaps read as rules. */
.grid-ruled {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.grid-ruled--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-ruled--top {
  align-content: start;
}
.grid-ruled > * {
  background: var(--white);
}


/* 4. Typography =========================================================== */

/* Small uppercase mono label above a heading. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 20px;
}
.eyebrow--muted {
  color: var(--ink-300);
}
.eyebrow--on-navy {
  color: var(--on-navy-dim);
  font-size: 11px;
}
.eyebrow--on-navy-accent {
  color: var(--green-200);
  font-size: 11px;
}
.eyebrow--on-green {
  color: inherit;
  opacity: 0.8;
}
.eyebrow--tight {
  margin-bottom: 16px;
}
.eyebrow--loose {
  margin-bottom: 28px;
}

/* Page headline (h1). */
.display {
  margin: 0 0 22px;
  font-size: clamp(28px, 3.86vw, 54px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--navy-900);
  text-wrap: balance;
}
.hero .display,
.band-navy .display,
.band-navy-deep .display {
  color: var(--white);
}
.display--xl {
  font-size: clamp(34px, 4.71vw, 66px);
  line-height: 0.99;
  margin-bottom: 26px;
}
.display--lg {
  font-size: clamp(32px, 4.43vw, 62px);
  line-height: 0.99;
  margin-bottom: 24px;
}
.display--md {
  font-size: clamp(31px, 4.29vw, 60px);
  line-height: 0.99;
}
.display--sm {
  font-size: clamp(29px, 4vw, 56px);
  line-height: 0.99;
  margin-bottom: 20px;
}
.display__sub {
  color: var(--on-navy-accent);
}

/* Section headline (h2). */
.heading {
  margin: 0 0 20px;
  font-size: clamp(23px, 3.14vw, 44px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy-900);
}
.hero .heading,
.band-navy .heading,
.band-navy-deep .heading,
.band-green .heading {
  color: var(--white);
}
.heading--lg {
  font-size: clamp(24px, 3.29vw, 46px);
}
.heading--md {
  font-size: clamp(21px, 2.86vw, 40px);
  line-height: 1.03;
}
.heading--sm {
  font-size: clamp(20px, 2.71vw, 38px);
  line-height: 1.04;
}
.heading--flush {
  margin-bottom: 0;
}

/* Opening paragraph under a headline. */
.lede {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-500);
  text-wrap: pretty;
}
.lede--xl {
  font-size: 20px;
  line-height: 1.5;
  max-width: 620px;
}
.lede--lg {
  font-size: 18px;
  line-height: 1.6;
}
.lede--18 {
  font-size: 18px;
  line-height: 1.55;
}
.lede--md {
  font-size: 16.5px;
  line-height: 1.7;
}
.lede--21 {
  font-size: 21px;
  line-height: 1.45;
}
.lede--19 {
  font-size: 19px;
  line-height: 1.5;
}
.lede--sm {
  font-size: 16px;
  line-height: 1.7;
}
.lede--on-navy {
  color: var(--on-navy);
}
/* Darker lede, for an opening paragraph that carries the page. */
.lede--ink {
  color: var(--ink-700);
}
.lede--flush {
  margin-bottom: 0;
}

/* Supporting paragraph — smaller and greyer than the lede. */
.body-copy {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-500);
  text-wrap: pretty;
}
.body-copy--on-navy {
  color: var(--on-navy-dim);
  max-width: 600px;
}
.body-copy--flush {
  margin-bottom: 0;
}

/* Pull-quote style callout used on the home page. */
.callout {
  margin: 0 0 20px;
  padding: 16px 20px;
  background: var(--navy-900);
  color: var(--white);
  border-left: 4px solid var(--green);
  font-size: 21px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.measure-520 {
  max-width: 520px;
}
.measure-590 {
  max-width: 590px;
}
.measure-620 {
  max-width: 620px;
}
.measure-680 {
  max-width: 680px;
}
.measure-760 {
  max-width: 760px;
}
.measure-820 {
  max-width: 820px;
}

.emph {
  font-style: normal;
  color: var(--white);
}

/* Bottom-margin utilities, for the handful of places where a block needs more
   or less air than its component default. */
.mb-8 {
  margin-bottom: 8px;
}
.mb-16 {
  margin-bottom: 16px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-18 {
  margin-bottom: 18px;
}
.mb-22 {
  margin-bottom: 22px;
}
.mb-26 {
  margin-bottom: 26px;
}
.mb-28 {
  margin-bottom: 28px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-32 {
  margin-bottom: 32px;
}
.mb-34 {
  margin-bottom: 34px;
}
.mb-36 {
  margin-bottom: 36px;
}
.mb-38 {
  margin-bottom: 38px;
}
.mt-32 {
  margin-top: 32px;
}
.gap-16 {
  gap: 16px;
}

/* 5. Buttons & links ====================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 18px 28px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

/* Solid navy — the default call to action on light backgrounds. */
.btn--navy {
  background: var(--navy-700);
  color: var(--white);
}
.btn--navy:hover {
  background: var(--green);
  color: var(--white);
}

/* Solid green — the primary action on navy or as an emphasis on light. */
.btn--green {
  background: var(--green);
  color: var(--white);
}
.btn--green:hover {
  background: var(--white);
  color: var(--navy-900);
}
/* On light backgrounds the green button inverts to navy instead of white. */
.btn--green.btn--on-light:hover {
  background: var(--navy-700);
  color: var(--white);
}

/* Outlined, for use on navy next to a solid button. */
.btn--ghost {
  border-color: var(--navy-400);
  color: var(--white);
  font-weight: 600;
  padding: 17px 28px;
}
.btn--ghost:hover {
  border-color: var(--white);
  color: var(--white);
}

/* Outlined, for use on white. */
.btn--outline {
  border-color: var(--border-strong);
  color: var(--navy-700);
  font-size: 13.5px;
  font-weight: 600;
  padding: 14px 20px;
}
.btn--outline:hover {
  border-color: var(--navy-700);
  color: var(--navy-700);
}

/* Full-width button inside a card. */
.btn--block {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13.5px;
  padding: 14px;
}

.btn--sm {
  font-size: 14px;
  padding: 17px 28px;
}

.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Underlined inline call to action. */
.textlink {
  display: inline-block;
  border-bottom: 2px solid var(--green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding-bottom: 6px;
  color: var(--navy-700);
  cursor: pointer;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-family: inherit;
}
.textlink:hover {
  color: var(--green);
}

/* 6. Announcement bar ===================================================== */

.announcement {
  background: var(--navy-900);
  color: var(--white);
}

.announcement__inner {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 9px;
  padding-bottom: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.announcement__text {
  color: var(--on-navy-dim);
}

.announcement__link {
  color: var(--green-200);
}
.announcement__link:hover {
  color: var(--white);
}

/* 7. Site header ========================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.site-header__logo {
  height: 56px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 8px;
}

.site-nav__link {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-700);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav__link:hover {
  color: var(--navy-700);
  border-bottom-color: var(--green);
}
.site-nav__link[aria-current="page"] {
  color: var(--navy-700);
  border-bottom-color: var(--green);
}

.site-header__cta {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

.site-header__cta .btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 13px 18px;
  white-space: nowrap;
}

/* 8. Site footer ========================================================== */

.site-footer {
  background: var(--navy-900);
  color: var(--white);
}

.site-footer__inner {
  padding-top: 66px;
  padding-bottom: 36px;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr));
  gap: 36px;
}

.site-footer__logo {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}

.site-footer__blurb {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--on-navy-dim);
  max-width: 240px;
}

.site-footer__head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-200);
  margin-bottom: 16px;
}

.site-footer__list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list a {
  font-size: 14px;
  color: var(--on-navy-dim);
}
.site-footer__list a:hover {
  color: var(--white);
}

.site-footer__legal {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--navy-500);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--on-navy-faint);
  text-transform: uppercase;
}

.site-footer__legal a {
  color: inherit;
}
.site-footer__legal a:hover {
  color: var(--white);
}

/* 9. Heroes =============================================================== */

/* Text on the left, a full-bleed photo filling the right half. */
.hero {
  background: var(--navy-700);
  color: var(--white);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  padding-top: 0;
  padding-bottom: 0;
}
.hero__inner--110 {
  grid-template-columns: 1.1fr 0.9fr;
}

.hero__copy {
  padding: 40px 56px 84px 0;
  animation: evk-rise 0.5s ease both;
}
.hero__copy--78 {
  padding-bottom: 78px;
}
.hero__copy--76 {
  padding-bottom: 76px;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.hero__tag-dot {
  width: 10px;
  height: 10px;
  background: var(--green);
  display: block;
}

.hero__tag-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
}

.hero__figure {
  border-left: 1px solid var(--navy-500);
  background: var(--navy-700);
  display: flex;
  align-items: stretch;
}

.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  background: var(--navy-700);
}
.hero__image--home {
  object-position: 38% 50%;
}
.hero__image--520 {
  min-height: 520px;
}
.hero__image--500 {
  min-height: 500px;
}

/* 10. Components ========================================================== */

/* --- Pillar strip (green band of short labels) --- */
.pillars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 20px;
}

.pillars__item {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

/* --- Manufacturer logo strip --- */
.brandbar__title {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
  text-align: center;
  margin-bottom: 30px;
}

.brandbar__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  flex-wrap: wrap;
}

.brandbar__logo {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  flex: 0 1 auto;
  height: 44px;
}
/* Autel's mark is a stacked lockup, so it needs more height to read evenly. */
.brandbar__logo--autel {
  height: 70px;
}
.brandbar__logo--chargepoint {
  height: 47px;
}

/* Logo cells on the About page. */
.logo-cell {
  padding: 32px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
}
.logo-cell img {
  height: 46px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.logo-cell img.brandbar__logo--autel {
  height: 74px;
}
.logo-cell img.brandbar__logo--chargepoint {
  height: 49px;
}

/* --- Compact numbered list (home page "two ways", "how it works") --- */
.steps {
  display: grid;
}

.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
}

.step__n {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--numeral);
  line-height: 1;
}

.step__title {
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 5px;
  color: var(--navy-900);
}

.step__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-500);
}

.step__note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-300);
  margin-top: 8px;
}

/* --- Large numbered list (Contractors page) --- */
.step-lg {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
  align-items: start;
}

.step-lg__n {
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.43vw, 34px);
  font-weight: 600;
  color: var(--navy-700);
  line-height: 1;
}

.step-lg__rule {
  width: 26px;
  height: 3px;
  background: var(--green);
  margin-top: 10px;
}

.step-lg__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  color: var(--navy-900);
}

.step-lg__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-500);
  max-width: 620px;
  text-wrap: pretty;
}

/* --- Phase cell (numbered cell inside a .grid-ruled) --- */
.phase {
  padding: 24px 22px;
}
.phase--lg {
  padding: 26px 24px 30px;
}

.phase__n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.phase--lg .phase__n {
  margin-bottom: 12px;
}

.phase__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--navy-900);
}
.phase--lg .phase__title {
  font-size: 19px;
  margin-bottom: 8px;
}

.phase__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-500);
}
.phase--lg .phase__body {
  font-size: 14.5px;
  text-wrap: pretty;
}

/* --- Policy list on navy --- */
.policy {
  display: grid;
  gap: 1px;
  background: var(--navy-500);
  border: 1px solid var(--navy-500);
}

.policy__row {
  background: var(--navy-900);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 138px 1fr;
  gap: 18px;
  align-items: baseline;
}

.policy__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-200);
}

.policy__value {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--on-navy);
}

/* --- Channel-protection copy on the green band --- */
.policy-lead {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  text-wrap: pretty;
}

.policy-sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  opacity: 0.85;
}

/* A link on the green channel-protection band. */
.policy-link {
  color: var(--white);
  font-weight: 600;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
}
.policy-link:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

/* --- Included-services list --- */
.incl {
  border: 1px solid var(--border);
  align-self: start;
}
.incl--white {
  background: var(--white);
}

.incl__head {
  padding: 18px 24px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-300);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.incl__row {
  padding: 14px 24px;
  font-size: 15.5px;
  color: var(--ink-700);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.incl--white .incl__row {
  padding: 13px 20px;
  font-size: 15px;
}
.incl__row:last-child {
  border-bottom: 0;
}

.incl__flag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--green);
  letter-spacing: 0.1em;
  flex: 0 0 auto;
}

/* --- Power-tier cells --- */
.tier {
  padding: 24px 22px;
}

.tier__kw {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  color: var(--navy-900);
}

.tier__use {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-300);
}

/* Standalone tier card with a green cap rule (DC Fast Charging page). */
.tier-card {
  border: 1px solid var(--border);
  border-top: 3px solid var(--green);
  padding: 26px 22px 30px;
}

.tier-card__kw {
  font-size: clamp(16px, 2.14vw, 30px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 8px;
  color: var(--navy-900);
}

.tier-card__use {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

.tier-card__note {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-500);
  text-wrap: pretty;
}

/* --- Incentive tiles --- */
.incentive-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 24px 22px 26px;
  display: block;
  transition: border-color 0.15s ease;
}
.incentive-card:hover {
  border-color: var(--navy-700);
}

.incentive-card__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  min-height: 44px;
  color: var(--navy-900);
}

.incentive-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--green);
  text-transform: uppercase;
}

/* --- Generic bordered card --- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
}
.card--link {
  display: block;
  color: inherit;
  transition: border-color 0.15s ease;
}
.card--link:hover {
  border-color: var(--navy-700);
  color: inherit;
}
.card--flex {
  display: flex;
  flex-direction: column;
}

.card__image {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: var(--border-soft);
  border-bottom: 1px solid var(--border);
}
.card__image--220 {
  height: 220px;
}
/* Product shots are cut-outs, so they are contained rather than cropped. */
.card__image--product {
  height: 230px;
  object-fit: contain;
  background: var(--white);
}

/* Stands in for a product we stock but have no photograph of yet. Reads as a
   deliberate gap rather than a failed image, and holds the same 230px box so
   the card grid keeps its baseline. */
.card__image--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.card__image--pending span {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --ink-300 is only 4.02:1 against --surface-2; --ink-700 clears AA. */
  color: var(--ink-700);
}

.card__body {
  padding: 24px 24px 28px;
}
.card__body--product {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card__title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--navy-900);
}
.card__title--product {
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* Kept as the fallback for a line with no mark on file; brand_mark() emits it
   only in that case. */
.card__brand {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}

/* The manufacturer's own mark, sized by height so wordmarks of different
   aspect ratio sit at the same optical weight. Heights are small on purpose:
   the card's subject is the product, and the logo is attribution. */
.card__mark {
  display: block;
  width: auto;
  max-width: 60%;
  margin-bottom: 14px;
  /* The card body is a column flex container, so the default align-items
     stretches children across the cross axis — which here means width. That
     beats width:auto and distorts the mark. An explicit align-self both
     prevents the stretch and centres the mark; object-fit is a belt-and-braces
     guard in case this ever ends up in a different container. */
  align-self: center;
  object-fit: contain;
}

.card__mark--alpitronic { height: 17px; }

/* Autel's wordmark is far less wide than Alpitronic's at equal height, so it
   carries a little more height to hold the space. */
.card__mark--autel-energy { height: 23px; }

.card__kw {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

/* Footer of a product card, pinned to the bottom of a flex card. */
.card__foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.card__foot-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 12px;
}

/* --- Label / value specification rows --- */
.specs {
  display: grid;
  gap: 8px;
}
.specs--tight {
  gap: 7px;
  margin-bottom: 18px;
}

.spec {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
}
.spec--88 {
  grid-template-columns: 88px 1fr;
  padding-top: 7px;
}
.spec--96 {
  grid-template-columns: 96px 1fr;
}

.spec__key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.spec__value {
  font-size: 14px;
  color: var(--ink-700);
}
.spec--88 .spec__value {
  font-size: 13.5px;
}

/* --- Simple bordered list of application types --- */


/* --- Document chips on a product card --- */
.doclist {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Labels, not links. These were underlined, which read as clickable — but
   only one of them has ever been a real file. They are now chips, and the
   ones that do link are marked with .doclist__item--file. */
.doclist__item {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
  border: 1px solid var(--border);
  padding: 3px 7px;
}

a.doclist__item--file {
  color: var(--green);
  border-color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.doclist__item--file:hover {
  background: var(--green);
  color: var(--white);
}

/* Footer links need a real tap area on a phone. */
@media (max-width: 900px) {
  .site-footer__list a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
  .site-footer__list {
    gap: 0;
  }
}

/* --- Statistics bar on navy --- */
.statbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 0;
  padding-bottom: 0;
}

.stat {
  padding: 34px 0;
  text-align: center;
  border-left: 1px solid var(--navy-500);
}

.stat__value {
  font-size: clamp(21px, 2.86vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 6px;
}

.stat__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
}

/* --- Case-study narrative ---
   Long-form prose set larger than body copy, because this page is read rather
   than scanned. */
.prose p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-500);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.prose p:last-child {
  margin-bottom: 0;
}
.prose strong {
  color: var(--navy-900);
  font-weight: 600;
}
.prose .lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-700);
}

/* The moment the utility said yes. One per page — it is the turn of the story. */
.verdict {
  margin: 36px 0;
  padding: 30px 34px;
  background: var(--navy-900);
  color: var(--white);
  border-left: 5px solid var(--green);
}
/* These sit inside .prose, whose `.prose p` rule is more specific than a bare
   class — so they have to out-specify it or they inherit body-copy grey onto
   a navy ground. */
.verdict .verdict__line {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--white);
}
.verdict .verdict__note {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-navy);
}

/* Before / after pair. The arrow carries the argument on wide screens. */
.transform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.transform__arrow {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  writing-mode: vertical-rl;
  padding-top: 40px;
}

/* A word rather than a number in the step column — used where the sequence is
   "who", not "what order". */
.step-lg__n--word {
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.04em;
}

/* Checked list inside a narrative section. */
.ticklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.ticklist li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-500);
}
.ticklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* Outcome tiles. Bigger than a stat, smaller than a card — the figure leads,
   the note explains it. */
.outcome {
  border-top: 3px solid var(--green);
  padding: 20px 0 0;
}
.outcome__value {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--navy-900);
  margin-bottom: 8px;
}
.outcome__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.outcome__note {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-500);
  text-wrap: pretty;
}

/* Case-study opener: no photo, so it carries its own vertical space. */
.band--case-hero {
  padding-top: 64px;
  padding-bottom: 68px;
}

/* --- Floor plan (case study) ---
   A stack of floors in a garage, read bottom-up like the building. The state
   of each floor is the information: chargers, no scope, or a qualifying site. */
.floorplan__title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 0 0 12px;
}

.floorplan {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.floor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.floor__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Floors that carry chargers in the original drawing. */
.floor--active {
  background: var(--navy-700);
  color: var(--white);
}
.floor--active .floor__tag {
  color: var(--green-200);
}

/* Floors the original drawing left out. --ink-500 on this ground measures
   4.47:1, a hair under AA, so these use the darker text colour. */
.floor--empty {
  background: var(--surface-2);
  color: var(--ink-700);
  font-weight: 500;
}
.floor--empty .floor__tag {
  color: var(--ink-700);
}

/* Floors that qualify independently under the proposal. */
.floor--site {
  background: var(--green);
  color: var(--white);
}
.floor--site .floor__tag {
  color: var(--white);
  opacity: 0.85;
}

.floorplan__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-500);
}

/* --- Capability list (About) --- */
.caplist {
  border: 1px solid var(--border);
}

.caplist__row {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
}
.caplist__row:last-child {
  border-bottom: 0;
}

.caplist__name {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  margin-bottom: 4px;
}

.caplist__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* --- Section header with a trailing action --- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* 11. Page-specific sections ============================================== */

/* --- Contractors: sticky "fast track" panel --- */
.fasttrack {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  border: 1px solid var(--border);
  background: var(--surface);
}

.fasttrack__head {
  background: var(--navy-700);
  color: var(--white);
  padding: 22px 24px;
}

.fasttrack__eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-200);
  margin-bottom: 10px;
}

.fasttrack__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.fasttrack__body {
  padding: 22px 24px 26px;
}

.fasttrack__list {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.fasttrack__list li {
  font-size: 14px;
  color: var(--ink-700);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.fasttrack__note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-300);
  text-align: center;
}

/* --- Contractors: registration form --- */
.reg-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-content: start;
}

.reg-form__field {
  display: block;
}

.reg-form__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 8px;
  min-height: 30px;
}

.reg-form__input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--white);
  height: 44px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--navy-900);
  outline: none;
}
.reg-form__input:focus {
  border-color: var(--navy-700);
}

.reg-form__field--wide {
  grid-column: 1 / -1;
}

/* Honeypot: off-screen for bots to find, invisible and unreachable for people. */
.reg-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.reg-form__input--area {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.reg-form__actions {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.reg-form__status {
  grid-column: 1 / -1;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-500);
}
.reg-form__status:empty {
  display: none;
}
.reg-form__status--ok {
  color: var(--navy-900);
  font-weight: 600;
  border-left: 3px solid var(--green);
  padding-left: 12px;
}
.reg-form__status--error {
  color: #a3242c;
  border-left: 3px solid #a3242c;
  padding-left: 12px;
}

/* Server-side error surfaced after a no-JavaScript submit. */
.form-error {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 12px 14px;
  background: #fdf2f2;
  border-left: 3px solid #a3242c;
  font-size: 14.5px;
  color: #a3242c;
}

/* --- Products: manufacturer filter --- */
.filterbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 32px;
  padding-bottom: 32px;
}

.filterbar__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-right: 10px;
}

.filter {
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--ink-700);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 18px;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}
.filter:hover {
  border-color: var(--navy-700);
}
.filter[aria-pressed="true"] {
  border-color: var(--navy-700);
  background: var(--navy-700);
  color: var(--white);
}

/* --- Quote page --- */
.quote-panel {
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  padding: 26px 24px;
}

.quote-panel__title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 10px;
}

.quote-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-500);
  margin: 0 0 26px;
  max-width: 560px;
}

.quote-panel__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-500);
  margin-bottom: 16px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  border: 1px solid var(--border);
  background: var(--white);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-700);
}

.assurances {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.assurances li {
  font-size: 14.5px;
  color: var(--ink-500);
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}

.checklist {
  border: 1px solid var(--border);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  align-items: start;
}
.checklist li:last-child {
  border-bottom: 0;
}

.checklist__icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  display: block;
  flex: 0 0 auto;
}

.checklist__label {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  margin-bottom: 3px;
}

.checklist__hint {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
}

.quote-note {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 26px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-300);
}

/* 12. Responsive ========================================================== */

/* Header: nav drops onto its own row before the columns collapse. */
@media (max-width: 1150px) {
  .site-header__inner {
    gap: 14px 28px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .site-header__logo {
    order: 1;
  }
  .site-header__cta {
    order: 2;
  }
  .site-nav {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    justify-content: flex-start;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    column-gap: 20px;
  }
}

/* Hero photos step down before the layout collapses so nothing gets clipped. */
@media (max-width: 1280px) {
  .hero__image {
    min-height: 480px;
  }
}

@media (max-width: 1080px) {
  .hero__image {
    min-height: 420px;
  }
}

/* The main collapse: every two-column layout becomes one column. */
@media (max-width: 900px) {
  :root {
    --gutter: 20px;
    --band-py: 48px;
  }

  .band--md {
    --band-py: 48px;
  }

  .split,
  .split--80,
  .split--85,
  .split--90,
  .split--110,
  .split--115,
  .split--125,
  .split-ruled,
  .hero__inner,
  .hero__inner--110 {
    grid-template-columns: 1fr;
  }

  .split,
  .split--gap-56,
  .split--gap-64 {
    gap: 32px;
  }

  .grid-3,
  .grid-4,
  .statbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Vertical rules become horizontal breaks once the columns stack. */
  .split-ruled > :first-child {
    padding: 0 0 8px;
  }
  .split-ruled > :last-child {
    border-left: 0;
    padding: 0 0 40px;
  }

  .hero__copy,
  .hero__copy--76,
  .hero__copy--78 {
    padding: 24px 0 40px;
  }
  .hero__figure {
    border-left: 0;
  }
  .hero__image {
    min-height: 300px;
  }

  .site-header {
    position: static;
  }
  .site-header__inner {
    padding-top: 12px;
    padding-bottom: 0;
  }
  .site-nav {
    column-gap: 16px;
    row-gap: 0;
  }
  /* Apple's 44pt minimum. These were 21px tall — easy to mis-tap. */
  .site-nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-bottom: 0;
    border-bottom: 0;
    border-left: 2px solid transparent;
    padding-left: 8px;
    margin-left: -8px;
  }
  .site-nav__link:hover,
  .site-nav__link[aria-current="page"] {
    border-bottom: 0;
    border-left-color: var(--green);
  }
  .announcement__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .site-header__cta .btn {
    padding: 11px 14px;
    font-size: 12.5px;
  }

  .fasttrack {
    position: static;
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .reg-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lede--xl {
    font-size: 17px;
  }
}

@media (max-width: 900px) {
  .transform {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .transform__arrow {
    writing-mode: horizontal-tb;
    padding-top: 0;
    text-align: center;
  }
  .prose p {
    font-size: 16.5px;
  }
  .prose .lead {
    font-size: 18px;
  }
  .verdict {
    padding: 24px 22px;
    margin: 28px 0;
  }
}

@media (max-width: 720px) {
  .brandbar__logos {
    gap: 28px;
    justify-content: flex-start;
  }
  .brandbar__logo {
    height: auto;
    max-height: 36px;
  }
  .brandbar__logo--autel {
    height: auto;
    max-height: 58px;
  }
  .logo-cell img {
    height: auto;
    max-height: 40px;
  }
  .logo-cell img.brandbar__logo--autel {
    height: auto;
    max-height: 62px;
  }
}

/* Single column everywhere, and label/value rows stack. */
@media (max-width: 560px) {
  .announcement__text {
    display: none;
  }
  .announcement__inner {
    justify-content: center;
  }

  .site-header__logo {
    height: 44px;
  }
  .site-header__cta {
    gap: 8px;
  }
  .site-header__cta .btn {
    padding: 10px 12px;
    font-size: 12px;
  }

  .grid-3,
  .grid-4,
  .grid-ruled--2,
  .statbar,
  .reg-form,
  .site-footer__columns {
    grid-template-columns: 1fr;
  }

  .spec,
  .spec--88,
  .spec--96,
  .step,
  .step-lg,
  .policy__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .step,
  .step-lg {
    gap: 8px;
  }

  .stat {
    border-left: 0;
    border-top: 1px solid var(--navy-500);
  }

  .section-head {
    margin-bottom: 28px;
  }

  .callout {
    font-size: 18px;
  }
}

/* 13. Print =============================================================== */

@media print {
  .announcement,
  .site-header__cta,
  .site-nav,
  .filterbar {
    display: none;
  }
  .band-navy,
  .band-navy-deep,
  .band-green,
  .hero {
    background: var(--white) !important;
    color: var(--ink) !important;
  }
}

/* --------------------------------------------------------------------------
   12b. Manufacturer sections
   Each line opens with a banner and a two-column intro, then runs its own
   catalogue grid. Replaces the earlier filter-over-one-mixed-grid approach.
   -------------------------------------------------------------------------- */

.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 36px 40px;
  margin-bottom: 34px;
  background: var(--navy-900);
}

/* Sized by height, not width, so two wordmarks of very different aspect ratio
   (Alpitronic is 5:1, Autel 2.9:1) read at the same optical weight. This lives
   in the stylesheet rather than a style attribute because the site's CSP sets
   style-src 'self', which blocks inline styles — with one, the marks fall back
   to their intrinsic width and fill the bar. */
.brandbar__mark {
  display: block;
  width: auto;
  max-width: 100%;
}

.brandbar__mark--alpitronic { height: 30px; }
.brandbar__mark--autel-energy { height: 32px; }

.brandbar__note {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.72;
}

@media (max-width: 640px) {
  .brandbar {
    padding: 28px 24px;
    gap: 16px;
  }
}

.grouphead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-bottom: 14px;
  margin: 46px 0 28px;
  border-bottom: 2px solid var(--ink);
}

.grouphead:first-child { margin-top: 0; }

.grouphead__label {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.grouphead__blurb {
  margin: 0;
  flex: 1 1 260px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-700);
}

.grouphead__count {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .grouphead { gap: 4px 12px; }
  .grouphead__blurb { flex-basis: 100%; }
}

.linehead {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  padding-bottom: 0;
  margin-bottom: 34px;
}

.linehead__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}

.linehead__name {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.linehead__copy {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-700);
}

.linefacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 44px;
  border-top: 1px solid var(--border);
}

.linefact {
  padding: 20px 28px 0 0;
  border-right: 1px solid var(--border);
}

.linefact:last-child {
  border-right: 0;
  padding-right: 0;
}

.linefact + .linefact {
  padding-left: 28px;
}

.linefact__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}

.linefact__value {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
  text-wrap: pretty;
}

@media (max-width: 700px) {
  .linefacts {
    grid-template-columns: minmax(0, 1fr);
  }
  .linefact {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .linefact + .linefact { padding-left: 0; }
  .linefact:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 860px) {
  .linehead {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .linehead__name { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   12c. Products dropdown, line picker, breadcrumb
   The dropdown opens on hover (pointer devices) and on keyboard focus without
   any JavaScript. site.js adds the toggle button behaviour for touch and
   marks the item .is-enhanced, which hands focus control over to it.
   -------------------------------------------------------------------------- */

.site-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav__toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0 -6px 3px 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--ink-700);
  cursor: pointer;
}
.site-nav__toggle:hover {
  color: var(--navy-700);
  background: var(--surface);
}
.site-nav__toggle svg {
  transition: transform 0.15s ease;
}
.site-nav__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.navmenu {
  display: none;
  position: absolute;
  z-index: 50;
  top: calc(100% + 12px);
  left: -18px;
  width: 310px;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(20, 34, 74, 0.14);
}

/* Bridges the gap between the link and the panel, so moving the pointer down
   onto the menu does not pass over empty space and close it. */
.navmenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.site-nav__item.is-open .navmenu,
.site-nav__item:not(.is-enhanced):focus-within .navmenu {
  display: block;
}
@media (hover: hover) {
  .site-nav__item:hover .navmenu {
    display: block;
  }
}

.navmenu__link {
  display: block;
  padding: 12px 14px;
  border-left: 2px solid transparent;
  color: var(--navy-900);
}
.navmenu__link:hover,
.navmenu__link:focus-visible {
  background: var(--surface);
  color: var(--navy-900);
}
.navmenu__link[aria-current="page"] {
  border-left-color: var(--green);
  background: var(--surface);
}

/* The manufacturers' own marks. Sized by height, like the card marks, so the
   wide Alpitronic wordmark and the compact Autel one read at equal weight. */
.navmenu__mark {
  display: block;
  width: auto;
  max-width: 100%;
}
.navmenu__mark--alpitronic { height: 19px; }
.navmenu__mark--autel-energy { height: 26px; }

.navmenu__note {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.navmenu__link--all {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid var(--border-soft);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green);
}
.navmenu__link--all:hover {
  color: var(--green);
}

/* On narrow screens the nav wraps under the logo and the header stops being
   sticky, so the panel sits flush with the left gutter. */
@media (max-width: 900px) {
  .site-nav__toggle {
    width: 44px;
    height: 44px;
    margin: 0 0 0 -10px;
  }
  .navmenu {
    top: 100%;
    left: -8px;
  }
  .navmenu::before {
    display: none;
  }
}

@media print {
  .site-nav__toggle,
  .navmenu {
    display: none !important;
  }
}

/* --- Breadcrumb on the manufacturer pages --- */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--ink-300);
}
.crumbs a {
  color: var(--ink-500);
}
.crumbs a:hover {
  color: var(--green);
}
.crumbs a[aria-current="page"] {
  color: var(--ink-700);
}

.crumbs--on-navy {
  padding-top: 4px;
}
.crumbs--on-navy li + li::before,
.crumbs--on-navy a {
  color: var(--on-navy-dim);
}
.crumbs--on-navy a:hover {
  color: var(--green-200);
}
.crumbs--on-navy a[aria-current="page"] {
  color: var(--on-navy);
}

/* A hero on white rather than navy, used on the Alpitronic page. */
.hero--light {
  background: var(--white);
  color: var(--ink);
}
.hero--light .display {
  color: var(--navy-900);
}
.hero--light .hero__figure {
  border-left-color: var(--border);
  background: var(--white);
}
.hero--light .hero__image {
  background: var(--surface);
}

/* A manufacturer's logo standing in for its name in a page heading. It sits
   on its own line, sized to the heading so it scales with it; the alt text
   and a visually hidden " DC fast chargers" keep the heading reading
   "Alpitronic DC fast chargers" to screen readers and search engines. */
.display__mark {
  display: block;
  height: 1.55em;
  width: auto;
  max-width: 100%;
}

/* Keeps the front charger, which stands left of centre, in the cropped frame. */
.hero__image--alpitronic {
  object-position: 30% 50%;
}

/* --- /products: one card per manufacturer --- */
.linepicks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.linepick {
  display: flex;
  flex-direction: column;
}

.linepick__banner {
  display: flex;
  align-items: center;
  min-height: 128px;
  padding: 36px 32px;
  background: var(--navy-900);
}

.linepick__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 32px 30px;
}

.linepick__range {
  margin: -6px 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}

.linepick__copy {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-700);
}

.linepick__cta {
  margin-top: auto;
  padding-top: 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-700);
}
.linepick:hover .linepick__cta {
  color: var(--green);
}

@media (max-width: 720px) {
  .linepicks {
    grid-template-columns: minmax(0, 1fr);
  }
  .linepick__banner,
  .linepick__body {
    padding-left: 22px;
    padding-right: 22px;
  }
}

.caplist--white {
  background: var(--white);
}

/* A photograph at the top of a "Where it fits" row. */
.caplist__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 16px;
  background: var(--surface);
}

/* --- Product video (click to load; see render_video in build.py) --- */
.linevideo {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: center;
  margin-top: 8px;
  padding-top: 40px;
  border-top: 2px solid var(--ink);
  scroll-margin-top: 110px;
}

/* Consecutive videos on one page need air between them. */
.linevideo + .linevideo {
  margin-top: 56px;
}

.linevideo__title {
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.linevideo__blurb {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
}

.linevideo__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.videofacade,
.videofacade__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--surface);
}

.videofacade {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}

.videofacade__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px 0;
}

.videofacade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}
.videofacade__play svg {
  display: block;
}
.videofacade:hover .videofacade__play path:first-child,
.videofacade:focus-visible .videofacade__play path:first-child {
  fill: var(--green);
}

.videofacade__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  background: rgba(20, 34, 74, 0.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 860px) {
  .linevideo {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
}

/* --------------------------------------------------------------------------
   Partner and client logo walls (about page)
   Grouped by relationship, because a utility is not a client. Logo heights are
   set per aspect-ratio bucket rather than uniformly: these marks run from
   0.84:1 to 7.9:1, and one shared height would let the widest put roughly
   three times the ink on the page that the squarest does.
   -------------------------------------------------------------------------- */

.partners__group + .partners__group {
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.partners__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 22px;
}

.partners__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

.partners__blurb {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-700);
}

/* Flex rather than grid: the groups hold 2, 5, 7 and 8 logos, so a fixed
   column count always strands one on a row by itself. Centring every row makes
   a short last row read as deliberate instead of orphaned. */
/* Marquee ------------------------------------------------------------------
   Each track holds the logo set twice and translates by exactly half its own
   width, so the loop is seamless. The second copy is aria-hidden in the markup.
   Motion stops on hover and on keyboard focus, and is replaced entirely by a
   normal scroll container when the visitor prefers reduced motion — content
   that moves on its own with no way to stop it fails WCAG 2.2.2.
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  /* Fade both ends so logos enter and leave rather than being chopped. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px,
                      #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 72px,
                      #000 calc(100% - 72px), transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation-name: marquee-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.marquee__track--long  { animation-duration: 56s; }
.marquee__track--short { animation-duration: 38s; }

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

.marquee__set {
  display: flex;
  gap: 8px;
  padding-right: 8px;
}

.marquee__cell {
  flex: 0 0 158px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border-soft);
}

.marquee__logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.marquee__logo--ultrawide { height: 24px; }
.marquee__logo--wide      { height: 30px; }
.marquee__logo--standard  { height: 38px; }
.marquee__logo--square    { height: 50px; }
.marquee__logo--tall      { height: 60px; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee__track { animation: none; }
  /* One set is enough once it is a scroll container, and the duplicate would
     just double the scroll distance for no gain. */
  .marquee__set[aria-hidden="true"] { display: none; }
}

@media (max-width: 560px) {
  .marquee__cell {
    flex-basis: 128px;
    min-height: 76px;
    padding: 12px;
  }
}

}