@charset "UTF-8";
/* SiRay Energy - single stylesheet.
   Design tokens come from docs/design-spec.md 2.8. No colour is hard-coded
   anywhere else in the project; every rule below reads a variable.
   Mobile first: base layout is single column, breakpoints widen it. */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  /* brand greens */
  --green: #189030;          /* decorative blocks and text at 24px or larger only */
  --green-text: #0F7A2A;     /* 5.47:1 on white - small text, links, icons */
  --green-cta: #0F7A2A;      /* buttons */
  --green-hover: #0C6422;
  --green-d: #0B3A1B;        /* dark green: footer, CTA band, table head */
  --green-bg: #EAF4EC;       /* tinted panels */
  --on-dark: #FFFFFF;        /* body text on --green-d */
  --on-dark-muted: #A9BCAF;  /* secondary text on --green-d (6.42:1) */
  --on-dark-accent: #B6E88C; /* accent on --green-d (9.12:1) */

  /* neutrals */
  --ink: #2E3438;
  --ink-strong: #1B2124;
  --gray: #6B7278;
  --line: #DFE7E1;
  --line-strong: #7D9086;
  --surface: #FFFFFF;
  --surface-2: #F4F8F5;
  --surface-3: #EDF3EF;
  /* Mat behind a product photo. One step below --surface-3 and one step
     above --line on the same green-grey ramp, so a white-background cut-out
     reads as a mounted print instead of a hole in the card. Measured against
     the photo's own #FFFFFF: 1.21:1, where --surface-3 gave only 1.13:1.
     Against --surface-3: 1.08:1, against --line: 1.04:1 - the ramp is
     continuous and no new hue enters the palette (hue 142deg, --line is
     135deg). Not darker: at #DDE6E0 the mat starts reading as a grey box. */
  --surface-media: #E3EBE6;

  /* Exposure guard for product photos only. brightness(.97) takes the
     paper-white off the clip point (255 -> 252) and contrast(1.04) pulls
     the mid-tones apart by about four levels. Both are deliberately small:
     below .95 the white background goes grey, above 1.08 the cabinet edges
     grow a halo. */
  --media-filter: brightness(.97) contrast(1.04);

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-display: 2.25rem;
  --fs-h1: 1.75rem;
  --fs-h2: 1.375rem;
  --fs-h3: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --lh-tight: 1.2;
  --lh: 1.65;

  /* spacing, 4px base */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px; --s6: 24px;  --s7: 32px;  --s8: 40px;
  --s9: 48px; --s10: 64px; --s11: 80px; --s12: 96px;

  /* shape */
  --r: 4px;
  --r-sm: 2px;
  --radius-0: 0;

  /* layout */
  --container: 1280px;
  --header-h: 64px;
  --max-text: 68ch;

  --shadow: 0 1px 2px rgba(46, 52, 56, .06), 0 4px 12px rgba(46, 52, 56, .06);
  --transition: 150ms ease;

  /* ui-ruling-2026-10-13 §1.3 - measured mean of images/web/hero-products.jpg
     (1920x760), sampled per pixel. This is the ONLY place in the stylesheet
     where a hex sampled from a photograph is allowed, and it must keep this
     comment. The §1.3 trigger fires: mean luminance 0.11612 vs --ink-strong
     0.01449 is 8.02:1, far past the 1.5:1 threshold, so a near-black
     placeholder would flash dark before the photo lands. */
  --hero-ph: #4B6279;
}

@media (min-width: 768px) {
  :root {
    --fs-display: 2.75rem;
    --fs-h1: 2.125rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.125rem;
  }
}
@media (min-width: 1024px) {
  :root { --fs-display: 3rem; --fs-h1: 2.5rem; --header-h: 72px; }
}

/* ============================================================
   2. Reset and base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
}
h1, h2, h3, h4 { margin: 0 0 var(--s4); line-height: var(--lh-tight); color: var(--ink-strong); font-weight: 700; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 var(--s4); max-width: var(--max-text); }
ul, ol { margin: 0 0 var(--s4); padding-inline-start: var(--s6); }
li { margin-bottom: var(--s2); }
a { color: var(--green-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img, picture, svg { max-width: 100%; height: auto; }
img { display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s8) 0; }
strong { color: var(--ink-strong); }
:focus-visible { outline: 3px solid var(--green-text); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--green-bg); color: var(--green-d); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: var(--s4); top: -60px; z-index: 100;
  background: var(--surface); color: var(--green-text);
  padding: var(--s3) var(--s4); border: 2px solid var(--green-cta); border-radius: var(--r);
  font-weight: 600; transition: top var(--transition);
}
.skip-link:focus { top: var(--s3); }

/* ============================================================
   3. Layout
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s4); }
@media (min-width: 768px) { .container { padding-inline: var(--s6); } }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.section { padding-block: var(--s8); }
.section--tight { padding-block: var(--s7); }
.section--alt { background: var(--surface-2); border-block: 1px solid var(--line); }
.section__head { margin-bottom: var(--s6); }
.section__head p { margin-bottom: 0; }

main { display: block; min-height: 40vh; }
.stack > * + * { margin-top: var(--s4); }

/* ============================================================
   4. Header and navigation (zero JS: <details>)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }
.brand__img { width: auto; height: 28px; }
/* The wordmark is already part of logo-siray-512.png, so the text node stays
   for assistive tech only. Painting it as well is what produced the doubled
   "SiRay Energy SiRay Energy" in the header. */
.brand__text {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.brand:hover { text-decoration: none; }

.nav-toggle { display: inline-flex; align-items: center; gap: var(--s2); }
.nav-toggle__btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  min-width: 44px; min-height: 44px; padding: 0 var(--s2);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  cursor: pointer;
}
.nav-toggle__btn span { display: block; width: 20px; height: 2px; background: var(--ink); }
.nav-toggle__btn[aria-expanded="true"] span { background: var(--green-cta); }

.nav { border-top: 1px solid var(--line); background: var(--surface); }
.nav__list { list-style: none; margin: 0; padding: var(--s2) 0; }
.nav__item { border-bottom: 1px solid var(--line); }
.nav__item:last-child { border-bottom: 0; }
.nav__link, .nav__summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: var(--s2) 0;
  color: var(--ink); font-weight: 600; font-size: var(--fs-sm);
}
.nav__link:hover, .nav__summary:hover { color: var(--green-text); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--green-text); }
.nav__summary { cursor: pointer; list-style: none; }
.nav__summary::-webkit-details-marker { display: none; }
.nav__summary::after {
  content: ""; width: 8px; height: 8px; margin-inline-start: var(--s2);
  border-right: 2px solid var(--gray); border-bottom: 2px solid var(--gray);
  transform: rotate(45deg); transition: transform var(--transition);
}
.nav__dd[open] > .nav__summary { color: var(--green-text); }
.nav__dd[open] > .nav__summary::after { transform: rotate(-135deg); border-color: var(--green-text); }
.nav__sub { list-style: none; margin: 0; padding: 0 0 var(--s2) var(--s3); }
.nav__sub a {
  display: block; min-height: 40px; padding: var(--s2) 0;
  color: var(--gray); font-size: var(--fs-sm); font-weight: 400;
}
.nav__sub a:hover { color: var(--green-text); }

/* desktop: bar layout, hover/focus dropdown */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav { border-top: 0; display: block !important; }
  .nav__list { display: flex; align-items: center; gap: var(--s2); padding: 0; }
  .nav__item { border-bottom: 0; position: relative; }
  .nav__link, .nav__summary { padding: 0 var(--s3); min-height: var(--header-h); }
  .nav__dd { position: relative; }
  .nav__sub {
    position: absolute; inset-inline-start: 0; top: 100%; z-index: 30;
    min-width: 260px; padding: var(--s2) 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow);
    display: none;
  }
  .nav__dd:hover > .nav__sub,
  .nav__dd:focus-within > .nav__sub { display: block; }
  .nav__sub a { padding: var(--s2) var(--s4); min-height: 36px; }
}
@media (max-width: 1023px) {
  .nav[data-open="false"] { display: none; }
  /* No JavaScript: data-open can never flip, so the bar is never hidden and
     the hamburger is never shown - a visible menu that cannot open, or a
     button that does nothing, are both worse than a plain stacked list. */
  html:not(.js) .nav[data-open="false"] { display: block; }
  html:not(.js) .nav-toggle__btn { display: none; }
  /* The expanded menu is ~450 px tall. With position:sticky that becomes a
     curtain pinned over the page that swallows clicks on the form underneath
     (P0-08 regression found in acceptance). Without JavaScript the header
     therefore scrolls away normally; the menu is still fully reachable. */
  html:not(.js) .site-header { position: static; }
  /* Same problem with JavaScript on, while the menu is open: JS sets
     .nav-open on the header so it stops being sticky until the menu closes. */
  .site-header.nav-open { position: static; }
}

/* ============================================================
   5. Hero
   ui-ruling-2026-10-13 §1.12 - dark photo hero (home page only)
   ============================================================ */
.hero { position: relative; background: var(--surface-2); border-bottom: 1px solid var(--line); overflow: hidden; }

/* --- dark photo variant: home page only --- */
.hero--photo {
  background: var(--hero-ph);    /* measured mean, see §1.3 */
  border-bottom: 0;              /* a light rule under a dark band reads as a fault */
}
/* The <picture> wrapper carries no intrinsic width, so without this it stays
   in flow at the image's own 1920px and drags documentElement.scrollWidth past
   the viewport on a desktop browser. Taking it out of flow lets .hero__img's
   absolute positioning do the work it was written for. */
.hero picture { position: absolute; inset: 0; z-index: 0; display: block; }
.hero picture img { width: 100%; height: 100%; }
.hero__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}

/* Desktop scrim. Worst case (U=255, pure-white cabinet pixel):
   white text 11.24:1 at x=0 ... 4.93:1 at x=60%, safe to x<=62.1%. */
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(100deg,
    rgba(27,33,36,.88) 0%,
    rgba(27,33,36,.80) 34%,
    rgba(27,33,36,.64) 60%,
    rgba(27,33,36,.34) 82%,
    rgba(27,33,36,.26) 100%);
}

.hero__inner { position: relative; z-index: 2; padding-block: var(--s9); }
@media (min-width: 768px) { .hero__inner { padding-block: var(--s11); } }

/* Dark-ground text. --on-dark-muted is BANNED on a photo: it needs alpha
   0.8160 to survive a pure-white cabinet pixel (§1.6). Hierarchy here is
   carried by size, weight and measure - never by colour. */
.hero--photo h1,
.hero--photo .hero__lede,
.hero--photo strong { color: var(--on-dark); }
.hero--photo .hero__eyebrow { color: var(--on-dark-accent); }

.hero h1 { font-size: var(--fs-display); max-width: 22ch; margin-bottom: var(--s4); }
.hero__lede { font-size: 1.0625rem; max-width: 56ch; color: var(--ink); }
@media (min-width: 768px) { .hero__lede { font-size: 1.1875rem; } }

/* Keep the copy inside the measured part of the scrim. Without this the 22ch
   h1 reaches 71.9% of a 768px viewport, where alpha is only 0.478 and white
   text falls to 3.02:1. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero h1 { max-width: 18ch; }
  .hero__lede { max-width: 44ch; }
}

/* Buttons invert to the .cta-band pattern (§1.7). The ruling names
   .btn--primary, but _cta renders the home hero's primary button as
   class="btn" (no modifier), so the selector has to be .btn or the rule
   would never match. Same declarations, one class shorter. */
.hero--photo .btn { background: #FFFFFF; color: var(--green-d); border-color: #FFFFFF; }
.hero--photo .btn:hover { background: var(--on-dark-accent); border-color: var(--on-dark-accent); }
.hero--photo .btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.hero--photo .btn--ghost:hover { background: rgba(255,255,255,.14); color: var(--on-dark); }
.hero--photo :focus-visible { outline-color: var(--on-dark); }

/* CTA block moved inside the hero (§1.14): .btnrow carries a --s5 top margin
   that would push the buttons away from the lede. */
.hero__inner .btnrow { margin-block: 0 var(--s2); }

/* Mobile: the copy stack is ~524px in a ~524px hero, so no fade can be
   trusted. Vertical scrim with a 0.64 floor -> white text 4.93:1 everywhere,
   whatever the copy length or the hero height. */
@media (max-width: 767px) {
  .hero--photo::after {
    background-image: linear-gradient(180deg,
      rgba(27,33,36,.92) 0%,
      rgba(27,33,36,.88) 22%,
      rgba(27,33,36,.82) 55%,
      rgba(27,33,36,.72) 82%,
      rgba(27,33,36,.64) 100%);
  }
  .hero__img { object-position: center 35%; }
}

/* --- multi-frame hero carousel (L2) ---------------------------------
   Three full-bleed frames cross-fade every 7s. The pictures sit in one
   aria-hidden container; the constant <h1> and the per-frame decorative
   titles stack in a grid cell so they fade in place without moving layout. */
.hero__frames { position: absolute; inset: 0; z-index: 0; }
.hero__frame { opacity: 0; transition: opacity 700ms ease; z-index: 0; }
.hero__frame.is-active { opacity: 1; z-index: 1; }

/* One constant h1 + three aria-hidden slide titles, all in the same cell. */
.hero__titles { display: grid; margin-bottom: var(--s4); }
.hero__titles > * { grid-area: 1 / 1; }
.hero__titles h1 { margin: 0; opacity: 0; transition: opacity 700ms ease; }
.hero__slide-title {
  display: block;
  font-size: var(--fs-display); line-height: var(--lh-tight);
  color: var(--on-dark); font-weight: 700; max-width: 22ch;
  opacity: 0; transition: opacity 700ms ease;
}
.hero__titles .is-active { opacity: 1; }
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__slide-title { max-width: 18ch; }
}

/* The lede and per-frame CTA swap by hidden, never by opacity, so a two-line
   lede can never leave a hole or clip against a fixed-height cross-fade. */
.hero__lede[hidden] { display: none; }
.hero__cta .btn[hidden] { display: none; }

/* Staggered entrance. Gated on .js (added before first paint) so the copy
   never flashes visible and then yanks away; with no JS nothing is hidden. */
.js .hero__enter-1, .js .hero__enter-2, .js .hero__enter-3, .js .hero__enter-4 { opacity: 0; }
.hero.is-ready .hero__enter-1,
.hero.is-ready .hero__enter-2,
.hero.is-ready .hero__enter-3,
.hero.is-ready .hero__enter-4 {
  animation: heroEnter .55s cubic-bezier(.22, .61, .36, 1) both;
}
.hero.is-ready .hero__enter-1 { animation-delay: 30ms; }
.hero.is-ready .hero__enter-2 { animation-delay: 130ms; }
.hero.is-ready .hero__enter-3 { animation-delay: 230ms; }
.hero.is-ready .hero__enter-4 { animation-delay: 330ms; }
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Bottom-left dots (tablist) and bottom-right scroll hint. */
.hero__dots { position: absolute; left: var(--s6); bottom: var(--s5); z-index: 3; display: flex; }
.hero__dot {
  position: relative; width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.hero__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: background var(--transition), transform var(--transition);
}
.hero__dot.is-active::after { background: var(--on-dark); transform: scale(1.25); }
.hero__dot:hover::after, .hero__dot:focus-visible::after { background: var(--on-dark); }
.hero__dot:focus-visible { outline-color: var(--on-dark); }

.hero__scroll {
  position: absolute; right: var(--s6); bottom: var(--s5); z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--s2);
  color: rgba(255,255,255,.7); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.hero__scroll:hover, .hero__scroll:focus-visible { color: var(--on-dark); text-decoration: none; }
.hero__scroll-arrow {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 767px) {
  /* Compact dots keep the hit areas clear of the full-width CTA above them. */
  .hero__dots { left: var(--s4); bottom: 12px; }
  .hero__dot { width: 36px; height: 36px; }
  .hero__scroll { right: var(--s4); bottom: var(--s4); }
}

/* No-JS fallback: dots do nothing and are hidden; every frame is visible with
   the first frame (which carries is-active in the markup) on top, and the
   first frame's copy stays visible. */
html:not(.js) .hero__dots { display: none; }
html:not(.js) .hero__frame { opacity: 1; }

/* ============================================================
   6. Breadcrumb
   ============================================================ */
.crumbs { padding-block: var(--s3); border-bottom: 1px solid var(--line); background: var(--surface); }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); }
.crumbs__list li { margin: 0; color: var(--gray); }
.crumbs__list li + li::before { content: "\203A"; margin-inline-end: var(--s2); color: var(--line-strong); }
.crumbs__list a { color: var(--gray); }
.crumbs__list a:hover { color: var(--green-text); }
.crumbs__list [aria-current="page"] { color: var(--ink-strong); font-weight: 600; }

/* ============================================================
   7. Buttons and CTA
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: var(--s3) var(--s6);
  background: var(--green-cta); color: #fff;
  border: 1px solid var(--green-cta); border-radius: var(--r);
  font-size: var(--fs-body); font-weight: 600; text-align: center;
  cursor: pointer; transition: background var(--transition), border-color var(--transition);
}
.btn:hover, .btn:focus-visible { background: var(--green-hover); border-color: var(--green-hover); color: #fff; text-decoration: none; }
.btn--ghost { background: var(--surface); color: var(--green-text); border-color: var(--line-strong); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--green-bg); color: var(--green-text); border-color: var(--green-text); }
.btn--primary { background: var(--green-cta); color: #fff; border-color: var(--green-cta); }
.btn--sm { min-height: 40px; padding: var(--s2) var(--s4); font-size: var(--fs-sm); }
.btn--lg { min-height: 52px; padding: var(--s3) var(--s6); font-size: 1.0625rem; }
/* Quiet variant: a plain text link that still meets 4.5:1 on dark ground. */
.btn--quiet { background: transparent; border-color: transparent; padding-inline: var(--s1); }
.btn--block { width: 100%; }

.btnrow { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block: var(--s5); }

/* CTA band - the one and only quote entry point (design-spec 5.10) */
.cta-band { background: var(--green-d); color: var(--on-dark); }
.cta-band__inner {
  display: grid; gap: var(--s6); align-items: center;
  padding-block: var(--s9);
}
@media (min-width: 1024px) {
  .cta-band__inner { grid-template-columns: 1fr auto; padding-block: var(--s10); }
}
.cta-band__h { font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--on-dark); }
.cta-band__p { color: var(--on-dark-muted); margin-top: var(--s2); }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.cta-band .btn--primary { background: #FFFFFF; color: var(--green-d); border-color: #FFFFFF; }
.cta-band .btn--primary:hover { background: var(--on-dark-accent); border-color: var(--on-dark-accent); }
.cta-band__mail { color: var(--on-dark-accent); }

/* mobile sticky RFQ dock */
.dock {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 35;
  display: flex; gap: var(--s2); padding: var(--s2) var(--s4);
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 10px rgba(46, 52, 56, .06);
}
.dock .btn { flex: 1 1 0; }
@media (min-width: 1024px) { .dock { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 64px; } }

/* ============================================================
   7b. Analytics consent bar (P0-04)
   Sits above the dock, never beside it: while a consent decision is open the
   docked quote button is hidden so the visitor faces one action, not two
   competing fixed bars on a 390 px screen.
   ============================================================ */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -2px 12px rgba(46, 52, 56, .10);
}
.consent[hidden] { display: none; }
.consent__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  max-width: var(--container); margin: 0 auto; padding: var(--s3) var(--s4);
}
.consent__text { margin: 0; flex: 1 1 240px; font-size: var(--fs-sm); color: var(--gray); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; flex: 0 0 auto; }
@media (max-width: 1023px) {
  body.has-consent { padding-bottom: 148px; }
  body.has-consent .dock { display: none; }
}

/* ============================================================
   7c. News article figure (P0-07)
   ============================================================ */
.article__figure { margin: 0 0 var(--s6); }
.article__figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); background: var(--surface-media);
}
.article__figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); background: var(--surface-media);
}

/* ============================================================
   7c-1. News article page scale (workorder 07)

   The article page reused the site-wide hero copy measures (22ch h1 /
   56ch lede) and the 16px body size, so a container-width photograph
   read as if the whole page had been scaled down. Articles get their
   own measures: wider hero copy, an 18px body, and the same 68ch
   reading length - one shared left edge, no page zoom, no transform.
   ============================================================ */
@media (min-width: 1024px) {
  .hero--article h1 { max-width: 28ch; }
  .hero--article .hero__lede { max-width: 64ch; }
  .article__body > p { font-size: 1.125rem; line-height: 1.7; max-width: 68ch; }
}

/* ============================================================
   8. Cards and product grid
   ============================================================ */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s5); list-style: none; margin: 0; padding: 0; }
.cards li { margin: 0; }
/* data-count keeps 2-item and 7-item rows from stretching oddly */
.cards[data-count="2"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); max-width: 760px; }
.cards[data-count="1"] { max-width: 420px; }

/* "View all news" under the home News & Insights cards: same link voice
   as card__link, and a --s7 bottom gap so Common Questions cannot read as
   part of the news module (workorder 06 defect 2: the gap measured 3.4px). */
.news__more { margin: var(--s5) 0 var(--s7); }

/* Workorder 06 defect 1: auto-fill opens four 293px tracks at 1440px for
   three cards - the third card ends in an empty column and each card is
   narrower than at 1024px. The home news grid is pinned to three equal
   tracks from 1024px up; below that the fluid auto-fill still applies
   (2 tracks on tablets, 1 on phones). /news/ keeps plain auto-fill. */
@media (min-width: 1024px) {
  .cards--news[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
/* The product photo is a cut-out on a pure-white ground, so on a white card
   it has no edge of its own: the picture ran straight into the card body
   with only the border-bottom to separate them. The mat is one step below
   the photo's own white (1.21:1) and one step above --line, so the picture
   reads as a mounted print on the card. The 12px inset costs the photo
   nothing in layout terms - the media box was already square (a square
   image in a square box), and it still is, so the grid rhythm and every
   card height are exactly what they were before. */
.card__media { background: var(--surface-media); border-bottom: 1px solid var(--line); padding: var(--s3); }
/* Category tile. The 1:1 box stays - the grid rhythm depends on it - but the
   fit is `contain` so a card variant that is not square is shown whole rather
   than cropped. Measured today: all 34 _card.jpg files are exactly 800x800, so
   the box and the image already agree and this renders identically to the old
   `cover`. It is changed for the day a non-square variant is dropped in.
   The hairline is the "this is a photograph" mark: one light rule between
   the white ground of the photo and the mat it sits on. A shadow rather
   than a border, so it costs no layout and cannot double up with the
   border-bottom below it. */
.card__media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain; object-position: center;
  filter: var(--media-filter);
  box-shadow: 0 0 0 1px rgba(46, 52, 56, .07);
}
.card__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1 1 auto; }
.card__title { margin: 0; font-size: var(--fs-h3); }
.card__title a { color: var(--ink-strong); }
.card__title a:hover { color: var(--green-text); }
.card__meta { margin: 0; font-size: var(--fs-sm); color: var(--gray); }
.card__tags { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.card__tags li { margin: 0; font-size: var(--fs-xs); color: var(--gray); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px var(--s2); }
.card__link { margin-top: auto; padding-top: var(--s2); font-size: var(--fs-sm); font-weight: 600; }

/* ---------- grid lists (ui-ruling-2026-10-13 §2.3) ---------- */
.ulgrid, .olgrid {
  list-style: none;
  margin: 0 0 var(--s7);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* the 0 stops a long item blowing the track out */
  gap: var(--s3);
}
@media (min-width: 768px) {
  .ulgrid, .olgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .ulgrid[data-count="3"], .olgrid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ulgrid, .olgrid { gap: var(--s5); }
  .ulgrid[data-count="3"], .olgrid[data-count="3"],
  .ulgrid[data-count="5"], .olgrid[data-count="5"],
  .ulgrid[data-count="6"], .olgrid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* n=4 deliberately stays at 2 columns: a clean 2x2 beats 3+1 */
}
.ulgrid > li, .olgrid > li {
  position: relative;
  margin: 0;
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  color: var(--ink);
}
/* a 3px accent rail, drawn rather than border-inline-start so the radius stays clean */
.ulgrid > li::before, .olgrid > li::before {
  content: ""; position: absolute; inset-block: var(--s4); inset-inline-start: 0;
  width: 3px; background: var(--green); border-radius: 0 2px 2px 0;
}
/* ordered steps get their number from the counter, never from the copy */
.olgrid { counter-reset: step; }
.olgrid > li { counter-increment: step; padding: var(--s5) var(--s4) var(--s4); }
.olgrid > li::before {
  content: counter(step, decimal-leading-zero);
  position: static; display: block; width: auto; background: none;
  inset-block: auto; inset-inline-start: auto;
  margin-bottom: var(--s2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  color: var(--green-text);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
   9. Tables
   ============================================================ */
.table-wrap { margin-block: var(--s5); }
/* Below the tablet breakpoint a long cell (a site-type label, a model list)
   would otherwise push the whole page wider than the viewport. The first
   column wraps below 720px (mobile-first rule at the bottom of this
   section) and the table scrolls inside its own wrapper - the wrapper is
   the scroll container, the page stays at 100% width. */
@media (max-width: 719px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap > table.dtable { min-width: 520px; }
}
table.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.dtable caption { text-align: start; padding-bottom: var(--s3); font-size: var(--fs-sm); color: var(--gray); }
table.dtable th, table.dtable td {
  text-align: start; vertical-align: top;
  padding: var(--s3); border-bottom: 1px solid var(--line);
}
table.dtable thead th {
  background: var(--green-bg); color: var(--green-d);
  font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--line-strong);
  position: sticky; top: 0;
}
table.dtable tbody th { font-weight: 600; color: var(--ink-strong); }
@media (min-width: 720px) {
  table.dtable tbody th { white-space: nowrap; }
}
table.dtable td.num, table.dtable th.num { font-variant-numeric: tabular-nums lining-nums; }
table.dtable tbody tr:nth-child(even) { background: var(--surface-2); }
table.dtable tbody tr:hover { background: var(--green-bg); }
table.dtable a { color: var(--green-text); font-weight: 600; }

/* wide tables: horizontal scroll, first column pinned */
.tscroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line); border-radius: var(--r);
  -webkit-overflow-scrolling: touch;
}
.tscroll > table.dtable { min-width: 960px; margin: 0; }
.tscroll > table.dtable thead th:first-child,
.tscroll > table.dtable tbody th:first-child {
  position: sticky; inset-inline-start: 0; z-index: 2;
  background: var(--surface);
}
.tscroll > table.dtable thead th:first-child { background: var(--green-bg); z-index: 3; }
.tscroll > table.dtable tbody tr:nth-child(even) th:first-child { background: var(--surface-2); }
.tscroll[tabindex]:focus-visible { outline: 3px solid var(--green-text); outline-offset: 2px; }
.tscroll-hint { margin: 0 0 var(--s2); font-size: var(--fs-xs); color: var(--gray); }
@media (min-width: 1024px) { .tscroll-hint { display: none; } }

/* vertical spec table (product pages) */
.spec { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-block: var(--s5); }
.spec__group { background: var(--green-bg); border-block: 1px solid var(--line); padding: var(--s2) var(--s4); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--green-d); }
.spec table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec th, .spec td { text-align: start; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { width: 40%; font-weight: 600; color: var(--ink-strong); }
.spec td { font-variant-numeric: tabular-nums lining-nums; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

/* ============================================================
   10. Chips, stats, notes, definition lists
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0 0 var(--s5); padding: 0; }
.chips li {
  margin: 0; padding: var(--s1) var(--s3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.chips--brand { }
.chips--brand li { background: var(--green-bg); border-color: var(--line-strong); color: var(--green-d); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s4); list-style: none; margin: 0 0 var(--s6); padding: 0; }
.stats li { margin: 0; padding: var(--s4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.stats .k { display: block; font-size: 1.375rem; font-weight: 700; color: var(--green-text); font-variant-numeric: tabular-nums lining-nums; }
.stats .v { display: block; font-size: var(--fs-sm); color: var(--gray); }

.note { margin-block: var(--s5); padding: var(--s4); background: var(--surface-2); border-inline-start: 4px solid var(--green); border-radius: var(--r-sm); }
.note p:last-child { margin-bottom: 0; }

/* ---------- long-paragraph callout (ui-ruling-2026-10-13 §2.4) ----------
   A <p>, not an <aside>: .note is a complementary landmark, which would lift
   a body paragraph out of the reading flow for a screen reader. */
.callout {
  margin-block: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--surface-2);
  border-inline-start: 4px solid var(--green);
  border-radius: var(--r-sm);
}
.callout:last-child { margin-bottom: 0; }

.deflist { margin: 0 0 var(--s5); }
.deflist div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding-block: var(--s3); border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .deflist div { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--s4); } }
.deflist dt { font-weight: 600; color: var(--ink-strong); }
.deflist dd { margin: 0; color: var(--ink); }

/* ============================================================
   11. FAQ (<details>)
   ============================================================ */
.faq { margin-block: var(--s5); }
.faq__group { margin-bottom: var(--s7); }
.faq__grouptitle { margin-bottom: var(--s2); }
.faq__grouplede { color: var(--gray); font-size: var(--fs-sm); margin-bottom: var(--s4); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 44px; padding: var(--s4) 0; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink-strong); font-size: var(--fs-body);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--green-text); }
/* design-spec 5.6: plus when closed, a real minus sign when open. */
.faq__q::after {
  content: "+"; flex: 0 0 auto; font-size: 20px; line-height: 1;
  color: var(--green-text); font-weight: 700;
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__qt { display: inline; font-size: inherit; font-weight: inherit; margin: 0; }
.faq__a { padding: 0 0 var(--s4); max-width: 72ch; color: var(--ink); }
.faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
   12. Forms
   ============================================================ */
.form { display: grid; gap: var(--s4); max-width: 640px; }
.field { display: grid; gap: var(--s2); }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-strong); }
.field .req { color: var(--green-text); }
.field .hint { font-size: var(--fs-xs); color: var(--gray); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%; min-height: 44px; padding: var(--s3);
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-cta); box-shadow: 0 0 0 3px var(--green-bg);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B3261E; }
.field__error { font-size: var(--fs-xs); color: #B3261E; min-height: 1em; }
.check { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--fs-sm); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green-cta); flex: 0 0 auto; }
.form__status { padding: var(--s4); border-radius: var(--r); font-size: var(--fs-sm); }
.form__status[data-state="ok"] { background: var(--green-bg); border: 1px solid var(--line-strong); color: var(--green-d); }
.form__status[data-state="error"] { background: #FDECEA; border: 1px solid #F3B4AE; color: #7A1C14; }
.form__status[data-state="busy"] { background: var(--surface-2); border: 1px solid var(--line); color: var(--gray); }
.form__status:empty { display: none; }
.honeypot { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   13. Product page
   ============================================================ */
.product__hero { display: grid; gap: var(--s6); }
@media (min-width: 1024px) { .product__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
/* Same mat as the card tile, for the same reason: the product photo is a
   white-background cut-out, and against a white page it had no edge. The
   padding gives the photo a margin of mat to sit on, so the cabinet is
   seen against a ground rather than dissolving into the page. */
.product__media { background: var(--surface-media); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; padding: var(--s3); }
/* Product photo. The 34 main images run 0.47 (GLR-200/GLR-314, portrait) to
   2.11 (T1000480, landscape) with a median of 1.15 - not one of them is 4:3,
   so `aspect-ratio: 4/3; object-fit: cover` was cropping all 34 and throwing
   away up to 65% of the width on the tall cabinets. Natural ratio now: width
   100% and height auto take the intrinsic ratio straight off the width/height
   attributes pages.py writes, so nothing is stretched and CLS is unchanged.
   A portrait photo taller than max-height has its box clamped instead, and
   `contain` then letterboxes it whole inside that box - the -surface-media
   background behind is the mat, so the frame stays tidy without a crop.
   The hairline sits on the image box, not on the letterbox: for the 13
   portrait photos the painted area is narrower than the box, and the rule
   belongs on the picture the reader is looking at. */
.product__media img {
  display: block;
  /* The element box is sized to the photo, not to the column: `width: 100%`
     with `max-height` clamped the box to the column width while `contain`
     painted a narrower portrait photo inside it, so the two disagreed and
     any rule drawn on the element fell on empty mat rather than on the
     picture. `auto` + the two max constraints scale the photo down to fit
     both and keep its ratio, which is the same picture at the same size the
     letterbox produced - only the box now matches it. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 640px;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
  filter: var(--media-filter);
  box-shadow: 0 0 0 1px rgba(46, 52, 56, .07);
}
.product__aside h1 { margin-top: 0; }
.related { margin-block: var(--s9); }
.related__grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* ============================================================
   14. Footer
   ============================================================ */
.site-footer { background: var(--green-d); color: var(--on-dark); }
.footer__grid { display: grid; gap: var(--s8); grid-template-columns: minmax(0, 1fr); padding-block: var(--s9); }
.footer__nav { display: grid; gap: var(--s7); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { gap: var(--s10); } .footer__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s6); } }
.footer__brand img { width: 168px; height: 34px; display: block; }
.footer__tagline { margin: var(--s3) 0 0; font-size: var(--fs-sm); color: var(--on-dark-accent); }
.fcol__h { margin: 0 0 var(--s3); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--on-dark-accent); }
.fcol ul { list-style: none; margin: 0; padding: 0; }
.fcol li { margin-bottom: var(--s2); }
.fcol a { color: var(--on-dark); font-size: var(--fs-sm); }
.fcol a:hover, .fcol a:focus-visible { color: var(--on-dark-accent); text-decoration: underline; }
.fcol address { font-style: normal; font-size: var(--fs-sm); line-height: 1.7; color: var(--on-dark-muted); }
.fcol address a { color: var(--on-dark); }
.footer__legal { padding-block: var(--s5); border-top: 1px solid rgba(255, 255, 255, .18); font-size: var(--fs-xs); color: var(--on-dark-muted); }
.footer__legal p { max-width: none; margin-bottom: var(--s2); }

/* ============================================================
   15. Utilities
   ============================================================ */
.text-sm { font-size: var(--fs-sm); }
.text-gray { color: var(--gray); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.inline-link { font-weight: 600; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.center { text-align: center; }
.warn { color: #B3261E; font-weight: 600; }

/* ============================================================
   15. Home page: value cards, scene cards, deployment tabs

   Design language ported from the standalone microgrid marketing
   page onto this site's own tokens - the brand greens here are
   --green / --green-text /
   --green-bg, NOT the microgrid page's separate --green-500
   ramp, so the two projects share layout rhythm without
   pretending to share a palette.

   Progressive enhancement contract:
     - markup is complete and readable with JavaScript disabled
     - .reveal starts visible; the inline script in base.html adds
       .js-reveal before first paint and main.js only *adds* motion
       from there, so a JS failure cannot blank the page (a 1.5 s
       failsafe drops the gate if main.js never arrives). The
       reduced-motion branch in main.js and the reduce media query
       below both force everything visible.
   ============================================================ */

/* ---------- section header ---------- */
.sec__head { margin-bottom: var(--s6); }
.sec__kicker {
  margin: 0 0 var(--s2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-text);
}
.sec__head h2 { margin-bottom: var(--s2); }
.sec__lede { margin: 0; color: var(--gray); max-width: var(--max-text); }

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 1; }
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity 420ms ease, transform 420ms ease; }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- value cards ---------- */
.vcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: var(--s5);
  list-style: none;
  margin: 0 0 var(--s7);
  padding: 0;
}
.vcards > li { margin: 0; }
.vcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--r);
  padding: var(--s5);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.vcard__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin-bottom: var(--s3);
  background: var(--green-bg);
  border-radius: var(--r);
  color: var(--green-text);
}
/* The reset above sets `svg { height: auto }`, which lets an inline glyph
   stretch to the card width. Both dimensions have to be pinned here. */
.vcard__glyph { width: 24px; height: 24px; max-width: 24px; flex: 0 0 auto; }
.vcard__title { margin-bottom: var(--s2); font-size: var(--fs-h3); }
.vcard__body { margin: 0; color: var(--gray); font-size: var(--fs-sm); }
.vcard__points { list-style: none; margin: var(--s3) 0 0; padding: 0; font-size: var(--fs-sm); }
.vcard__points li { position: relative; margin-bottom: var(--s1); padding-inline-start: var(--s4); color: var(--ink); }
.vcard__points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}
.vcard__link {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 600;
}

/* ---------- scene cards ---------- */
.scenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s5);
  list-style: none;
  margin: 0 0 var(--s7);
  padding: 0;
}
.scenes > li { margin: 0; }
.scene {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.scene:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.scene__media { position: relative; overflow: hidden; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.scene__media picture { display: block; }
/* The artwork is a diagram with its own caption bar baked in, so the
   photo-era treatments are gone: no darkening gradient over the bottom 40%
   and no hover zoom, both of which exist to make text readable on a
   photograph and only blur type on a drawing. */
.scene__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.scene__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1 1 auto; }
.scene__kicker {
  margin: 0; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green-text);
}
.scene__title { margin: 0; font-size: var(--fs-h3); }
.scene__desc { margin: 0; color: var(--gray); font-size: var(--fs-sm); }
.scene__value {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin: var(--s1) 0 0; padding: var(--s2) var(--s3);
  background: var(--green-bg); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600; color: var(--green-d);
}
.scene__value .dot { flex: 0 0 auto; width: 6px; height: 6px; margin-top: .5em; border-radius: 50%; background: var(--green); }
/* "Illustrative diagram - not a project photograph." under each card. Small
   and quiet, but never hidden: it is the disclosure, not decoration. */
.scene__sim {
  margin: 0; padding-top: var(--s2);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-xs); color: var(--gray); font-style: italic;
}
.scene__link { margin-top: auto; padding-top: var(--s3); font-size: var(--fs-sm); font-weight: 600; }

/* ---------- deployment tabs ---------- */
.tabs { margin-bottom: var(--s7); }
.tabs__list {
  display: none; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s5); padding: 0; list-style: none;
}
.js .tabs__list { display: flex; }
.tab {
  appearance: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: var(--s3) var(--s5);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.tab:hover { border-color: var(--green); color: var(--green-text); transform: translateY(-1px); }
.tab.is-active {
  background: var(--green-d);
  border-color: var(--green-d);
  color: #fff;
}
.tabpanel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--r);
  overflow: hidden;
}
.js .tabpanel:not(.is-active) { display: none; }
.tabpanel__label {
  margin: 0; padding: var(--s5) var(--s5) 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green-text);
}
.js .tabpanel__label { display: none; }
.tabpanel__media { background: var(--surface-3); border-bottom: 1px solid var(--line); }
.tabpanel__media img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
.tabpanel__inner { padding: var(--s5); }
.tabpanel__body { margin-bottom: var(--s5); }
.tabpanel__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s5);
}
.tabcol__h {
  margin-bottom: var(--s2);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green-text);
}
.tabcol__list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.tabcol__list li { position: relative; margin-bottom: var(--s2); padding-inline-start: var(--s5); color: var(--ink); }
.tabcol__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .35em;
  width: 12px; height: 12px; border-radius: 2px;
  background: var(--green-bg); border-left: 2px solid var(--green);
}

/* ---------- responsive ---------- */
@media (max-width: 719px) {
  .sec__head { margin-bottom: var(--s5); }
  .vcards, .scenes { gap: var(--s4); }
  .vcard, .tabpanel__inner { padding: var(--s4); }
  .tabs__list { flex-direction: column; }
  .tab { width: 100%; text-align: start; }
  .tabpanel__media img { aspect-ratio: 16 / 9; }
}

/* ============================================================
   16. Home product rail
   A normal-flow gateway under the hero. It deliberately does not
   overlap the hero photograph, so the product matrix remains visible.
   ============================================================ */
.home-rail {
  margin: 0 0 var(--s9);
  border: 1px solid var(--line);
  background: var(--surface);
}
.home-rail__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr);
  align-items: end;
  gap: var(--s6);
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--line);
}
.home-rail__eyebrow {
  margin: 0 0 var(--s2);
  color: var(--green-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.home-rail h2 {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.home-rail__flow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  color: var(--gray);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.home-rail__flow i {
  display: block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--green) 0 55%, transparent 55% 100%);
  background-size: 8px 1px;
  animation: homeRailFlow 1.8s linear infinite;
}
.home-rail__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-rail__list > li {
  min-width: 0;
  margin: 0;
  border-right: 1px solid var(--line);
}
.home-rail__list > li:last-child { border-right: 0; }
.home-rail__card {
  display: flex;
  flex-direction: column;
  min-height: 172px;
  padding: var(--s5);
  transition: background var(--transition), border-color var(--transition);
}
.home-rail__card:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.home-rail__kicker {
  margin-bottom: var(--s5);
  color: var(--green-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-rail__name {
  color: var(--ink-strong);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}
.home-rail__meta {
  margin-top: var(--s2);
  color: var(--green-text);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.home-rail__body {
  max-width: 30ch;
  margin-top: var(--s2);
  color: var(--gray);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.home-rail__link {
  margin-top: auto;
  padding-top: var(--s4);
  color: var(--green-text);
  font-size: var(--fs-sm);
  font-weight: 700;
}
@keyframes homeRailFlow { to { background-position: 8px 0; } }
@media (prefers-reduced-motion: reduce) {
  .home-rail__flow i { animation: none; }
}
@media (max-width: 767px) {
  .home-rail__head { grid-template-columns: 1fr; gap: var(--s4); }
  .home-rail__flow { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  .home-rail__flow i { width: 16px; }
  .home-rail__list { grid-template-columns: 1fr; }
  .home-rail__list > li { border-right: 0; border-bottom: 1px solid var(--line); }
  .home-rail__list > li:last-child { border-bottom: 0; }
  .home-rail__card { min-height: 0; padding: var(--s4) var(--s5); }
  .home-rail__kicker { margin-bottom: var(--s3); }
}

/* ============================================================
   Partner brand wall (inverter line)
   ============================================================ */
.brandwall { list-style: none; margin: 0 0 var(--s6); padding: 0;
  display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .brandwall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.brandwall__item { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.brandwall__item a { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s2); padding: var(--s5) var(--s4);
  text-decoration: none; color: inherit; height: 100%; }
.brandwall__logo { display: flex; align-items: center; justify-content: center; height: 56px; width: 100%; }
.brandwall__logo img { max-height: 44px; max-width: 160px; width: auto; height: auto; object-fit: contain; }
.brandwall__name { font-weight: 700; color: var(--ink-strong); font-size: var(--fs-sm); }
.brandwall__note { font-size: var(--fs-xs); color: var(--gray); text-align: center; }

/* Downloads list (inverter datasheets) */
.downloads { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s2); }
.downloads li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); background: var(--surface); }
.downloads a { font-weight: 600; }
.downloads a::before { content: "\2193\00a0"; color: var(--green-text); font-weight: 700; }
@media (min-width: 768px) { .downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ============================================================
   2026-10 theme - Greenify direction (Phase 1)
   Appended overrides only; base layout rules above stay intact.
   ============================================================ */

/* Inter, self-hosted (no external font request). */
@font-face{font-family:'Inter';src:url('../fonts/Inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  --green:#B0D129;
  --green-text:#6F8600;
  --green-cta:#B0D129;
  --green-hover:#C2E43C;
  --green-d:#0E1C24;
  --green-bg:#F8F8F8;
  --on-dark:#FFFFFF;
  --on-dark-muted:#A9BCC4;
  --on-dark-accent:#C8E45A;
  --ink:#1F242C;
  --ink-strong:#1F242C;
  --gray:#5F708F;
  --line:#E6E8EC;
  --line-strong:#C9D0D8;
  --surface:#FFFFFF;
  --surface-2:#F8F8F8;
  --surface-3:#F2F4F7;
  --surface-media:#F4F6F8;
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --container:1320px;
  --r:2px; --r-sm:2px;
  --fs-display:clamp(2.75rem,6vw,5.5rem);
  --fs-h1:clamp(2.25rem,4.4vw,3.5rem);
  --fs-h2:clamp(1.9rem,3.3vw,3rem);
  --fs-h3:1.25rem;
  --fh:700;
  --lh-tight:1.05;
  --lh:1.75;
  --header-h:72px;
  --shadow:0 14px 40px rgba(20,30,40,.08);
  --media-filter:none;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:#fff;font-size:16px;line-height:1.75;counter-reset:sec}
p{color:var(--gray)}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.02em}
h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.028em;font-weight:700}
h3{font-size:var(--fs-h3);line-height:1.3}
.container{max-width:var(--container);padding-inline:32px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--green-d);
  border-bottom:1px solid rgba(255,255,255,.12);color:#fff;
}
.page-home .site-header{
  position:absolute;top:0;left:0;right:0;
  background:linear-gradient(180deg,rgba(8,20,26,.62),rgba(8,20,26,0));
  border-bottom:1px solid rgba(255,255,255,.16);
}
.site-header>.container{max-width:none;padding:0}
.header__bar{min-height:var(--header-h);justify-content:flex-start;gap:26px}
.brand__img{height:28px;filter:brightness(0) invert(1)}
.nav-toggle{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.nav-toggle__btn{border-color:rgba(255,255,255,.4);background:transparent}
.nav-toggle__btn span{background:#fff}
.nav-toggle .btn{min-height:38px;padding:8px 18px;font-size:10.5px}

@media (min-width:1024px){
  .site-header{display:flex;align-items:center;gap:26px;padding-inline:max(32px,calc((100vw - 1320px)/2))}
  .site-header>.header__bar{width:auto;flex:0 0 auto;padding:0}
  .site-header>.container:last-child{flex:1 1 auto;min-width:0}
  .nav-toggle{display:none}
  .nav{background:transparent;border:0;display:block}
  .nav__list{display:flex;justify-content:flex-end;align-items:center;gap:2px;padding:0}
  .nav__item{border:0}
  .nav__link,.nav__summary{
    color:#fff;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
    min-height:var(--header-h);padding:0 12px;justify-content:center;
  }
  .nav__link:hover,.nav__summary:hover,.nav__link[aria-current="page"]{color:var(--green)}
  .nav__summary::after{border-color:currentColor}
  .nav__sub{
    background:#0B1720;border:1px solid rgba(255,255,255,.12);border-radius:0 0 4px 4px;
    box-shadow:0 18px 44px rgba(0,0,0,.35);
  }
  .nav__sub a{color:#C6D2D7}
  .nav__sub a:hover{color:var(--green)}
}
@media (max-width:1023px){
  .nav{background:var(--green-d);border-top:1px solid rgba(255,255,255,.12)}
  .nav[data-open="false"]{display:none}
  .nav__item{border-bottom:1px solid rgba(255,255,255,.1)}
  .nav__link,.nav__summary{color:#fff}
  .nav__link:hover,.nav__summary:hover,.nav__link[aria-current="page"]{color:var(--green)}
  .nav__sub a{color:#C3D0D5}
  .nav__summary::after{border-color:#C3D0D5}
}

/* ---------- buttons ---------- */
.btn{
  border-radius:999px;text-transform:uppercase;letter-spacing:.12em;
  font-size:11.5px;font-weight:700;min-height:44px;padding:13px 24px;
  background:var(--green);color:#15210A;border:1px solid var(--green);
}
.btn:hover,.btn:focus-visible{background:var(--green-hover);border-color:var(--green-hover);color:#15210A}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--primary{background:var(--green);color:#15210A;border-color:var(--green)}
.btn--sm{min-height:38px;padding:9px 18px;font-size:10.5px}
.btnrow{gap:12px}

/* ---------- hero (home) ---------- */
.hero--photo{
  min-height:700px;display:flex;align-items:center;
  background:var(--green-d);border-bottom:0;
}
.hero__frame img,.hero__img{filter:brightness(.62) saturate(.92) contrast(1.04)}
.hero--photo::after{
  background-image:
    linear-gradient(90deg,rgba(8,20,26,.88) 0%,rgba(8,26,32,.58) 48%,rgba(8,26,32,.28) 100%),
    linear-gradient(0deg,rgba(8,20,26,.88) 0%,rgba(8,20,26,.12) 45%,rgba(8,20,26,.32) 100%);
}
.hero__inner{padding-block:150px 210px;max-width:var(--container)}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--green);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.hero__eyebrow::before{content:"";width:28px;height:1px;background:var(--green)}
.hero--photo h1,.hero__slide-title{
  font-size:clamp(3rem,6.6vw,6rem);line-height:.93;font-weight:800;
  letter-spacing:-.02em;text-transform:uppercase;max-width:14ch;margin-bottom:22px;
}
.hero__slide-title{max-width:14ch}
.hero__lede{color:#D5E2E6;font-size:17px;line-height:1.75;max-width:56ch}
.hero--photo .btn{background:var(--green);color:#15210A;border-color:var(--green)}
.hero--photo .btn:hover{background:var(--green-hover);border-color:var(--green-hover)}
.hero--photo .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero--photo .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero__dots{left:auto;right:40px;bottom:128px;flex-direction:column;gap:8px}
.hero__dot{width:24px;height:24px}
.hero__dot::after{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border:1px solid rgba(255,255,255,.65);background:transparent}
.hero__dot.is-active::after{background:var(--green);border-color:var(--green);transform:scale(1.15)}
.hero__scroll{display:none}
.hero__strip{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  background:rgba(8,20,26,.58);border-top:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hero__strip .container{display:grid;grid-template-columns:repeat(4,1fr);padding-inline:32px}
.hero__strip a{
  display:block;padding:18px 24px;border-right:1px solid rgba(255,255,255,.12);color:#fff;
}
.hero__strip a:last-child{border-right:0}
.hero__strip a:hover{background:rgba(255,255,255,.05);text-decoration:none;color:#fff}
.hero__strip .n{display:block;color:var(--green);font-size:11px;letter-spacing:.14em;margin-bottom:4px}
.hero__strip .t{display:block;font-size:14px;font-weight:600}
.hero__strip .m{display:block;font-size:11.5px;color:#9FB3B8;margin-top:2px}

/* ---------- generic inner hero (line hubs, category) ---------- */
.hero:not(.hero--photo){background:var(--green-d);border-bottom:0}
.hero:not(.hero--photo) .hero__inner{padding-block:78px 72px}
.hero:not(.hero--photo) h1{color:#fff;font-size:clamp(2.1rem,4vw,3.4rem);letter-spacing:-.025em}
.hero:not(.hero--photo) .hero__lede{color:#C9D6DA}
.hero:not(.hero--photo) .hero__eyebrow{color:var(--green);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}

/* ---------- sections ---------- */
.section{padding:92px 0}
.sec__head{margin-bottom:44px}
.sec__kicker{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gray);
}
.sec__kicker::before{
  counter-increment:sec;content:counter(sec,decimal-leading-zero) ".";
  color:var(--green-text);font-weight:800;letter-spacing:.06em;
}
.sec__lede{max-width:660px;color:var(--gray);font-size:16.5px;line-height:1.85}

/* ---------- value cards as tiles ---------- */
.vcards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:0;border-top:1px solid var(--line);margin:0;padding:0;
}
.vcards>li{margin:0}
.vcard{
  display:flex;flex-direction:column;min-height:330px;
  padding:26px 24px 28px;border:0;border-right:1px solid var(--line);
  border-radius:0;background:transparent;box-shadow:none;
}
.vcards>li:last-child .vcard{border-right:0}
.vcard__icon{color:var(--green);margin:0 0 auto}
.vcard__glyph{width:44px;height:44px;stroke-width:1.4}
.vcard__title{font-size:22px;font-weight:700;margin:64px 0 8px;letter-spacing:-.01em}
.vcard__body{color:var(--gray);font-size:13.5px;line-height:1.7;margin:0}
.vcard__points{color:var(--gray);font-size:13px;margin-top:12px}
.vcard__link{
  margin-top:18px;color:var(--green-text);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;border:0;padding:0;
}
.vcard__link::after{content:" \2192"}

/* ---------- scenes as image tiles ---------- */
.scenes{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:22px}
.scene{border:0;border-radius:0;background:transparent;overflow:hidden;box-shadow:none}
.scene__media{aspect-ratio:4/3;overflow:hidden;background:var(--surface-3)}
.scene__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.scene:hover .scene__media img{transform:scale(1.03)}
.scene__body{padding:16px 0 0}
.scene__kicker{color:var(--green-text);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.scene__title{font-size:18px;font-weight:700;margin:6px 0 4px}
.scene__desc{color:var(--gray);font-size:12.5px;line-height:1.65}

/* ---------- tabs as pills ---------- */
.tabs__list{display:flex;flex-wrap:wrap;gap:8px;border:0;margin-bottom:22px}
.tab{
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);
  padding:10px 18px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
}
.tab.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- cards / news ---------- */
.cards{gap:22px}
.card{border:1px solid var(--line);border-radius:0;box-shadow:none;background:#fff;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card__title{font-size:19px;letter-spacing:-.01em}
.card__meta{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-text);font-weight:700}
.card__link{color:var(--green-text);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}

/* ---------- tables ---------- */
.dtable{font-size:13px}
.dtable th,.dtable td{border-bottom:1px solid var(--line);padding:12px 10px}
.dtable thead th{
  background:var(--surface-2);color:var(--gray);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;
}
.table-wrap{border:1px solid var(--line);border-radius:0}

/* ---------- breadcrumbs ---------- */
.crumbs{background:transparent;border:0}
.crumbs__list{font-size:11px;letter-spacing:.03em;color:var(--gray)}
.crumbs a{color:var(--gray)}

/* ---------- product page ---------- */
.product__hero{grid-template-columns:1.12fr .88fr;gap:0;border:1px solid var(--line);align-items:stretch}
.product__media{
  background:var(--surface-2);border:0;border-radius:0;padding:38px;
  min-height:470px;display:flex;align-items:center;justify-content:center;
}
.product__aside{padding:38px 34px}
.product__aside h1{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:14px}
.chips--brand{gap:8px}
.chips--brand li{border-color:#DDE9A7;background:#F4F8DF;color:#5E7300;font-size:11px}
.spec{border:0;border-radius:0;margin-block:18px 30px}
.spec__group{
  background:transparent;border:0;border-top:1px solid var(--line);
  padding:16px 0 6px;color:var(--gray);font-size:10.5px;letter-spacing:.14em;font-weight:700;
}
.spec table{font-size:13.5px}
.spec th,.spec td{border-bottom:1px solid var(--line);padding:12px 0}
.spec th{width:42%;color:var(--gray);font-weight:500}
.spec td{color:var(--ink);font-weight:600}
.downloads{grid-template-columns:1fr 1fr;gap:10px}
.downloads li{border:1px solid var(--line);border-radius:0;padding:12px 14px;background:#fff}
.downloads a{font-size:13px}
.downloads a::before{color:var(--green-text)}

/* ---------- footer ---------- */
.site-footer{background:var(--green-d)}
.footer__grid{gap:44px}
.footer__nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}
.fcol__h{color:var(--green);font-size:10.5px;letter-spacing:.16em}
.fcol a{color:#C3D0D5;font-size:12.5px}
.fcol a:hover{color:#fff}
.footer__tagline{color:var(--on-dark-accent)}
.footer__legal{color:#8FA1A8;border-top-color:rgba(255,255,255,.14)}

/* ---------- cta band / dock ---------- */
.cta-band{background:var(--green-d)}
.dock .btn{background:var(--green);color:#15210A;border-color:var(--green)}

/* ---------- forms / misc ---------- */
input,textarea,select{border:1px solid var(--line);border-radius:2px;font-family:var(--font)}
:focus-visible{outline:2px solid var(--green-text);outline-offset:2px}
.hero--photo :focus-visible{outline-color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .product__hero{grid-template-columns:1fr}
  .product__media{min-height:340px;padding:24px}
  .product__aside{padding:26px 22px}
  .footer__nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .downloads{grid-template-columns:1fr}
}
@media (max-width:767px){
  .container{padding-inline:20px}
  .hero--photo{min-height:600px}
  .hero__inner{padding-block:120px 250px}
  .hero--photo h1,.hero__slide-title{font-size:clamp(2.5rem,11vw,3.9rem);max-width:12ch}
  .hero__lede{font-size:15.5px}
  .hero__dots{display:none}
  .hero__strip .container{grid-template-columns:1fr 1fr;padding-inline:0}
  .hero__strip a{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
  .hero__strip a:nth-child(2){border-right:0}
  .section{padding:64px 0}
  h2{font-size:clamp(1.75rem,7.5vw,2.4rem)}
  .vcards{grid-template-columns:1fr;border-top:0}
  .vcard{border-top:1px solid var(--line);border-right:0;min-height:0;padding:22px 0 24px}
  .vcard__title{margin-top:22px}
  .scenes{grid-template-columns:1fr}
  .footer__nav{grid-template-columns:1fr 1fr}
  .footer__grid{gap:30px}
}

/* --- phase 1 refinement --- */
.hero__frame img,.hero__img{filter:brightness(.74) saturate(.95) contrast(1.03)}
.hero--photo::after{background-image:linear-gradient(90deg,rgba(8,20,26,.82) 0%,rgba(8,26,32,.50) 50%,rgba(8,26,32,.22) 100%),linear-gradient(0deg,rgba(8,20,26,.82) 0%,rgba(8,20,26,.10) 42%,rgba(8,20,26,.28) 100%)}
.product__hero{border:0}
.product__media{min-height:420px;border:0}
.product__aside{display:flex;flex-direction:column;justify-content:center}
.card__meta{font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--gray);font-weight:500}

/* --- tile rules: top border per tile, no row-end divider --- */
.vcards{gap:26px;border-top:0}
.vcard{border-top:1px solid var(--line);border-right:0;padding:24px 0 26px}
.vcards>li:last-child .vcard{border-right:0}

/* --- callout as an editorial rule, not a grey box --- */
.callout{background:transparent;border-inline-start:2px solid var(--green);border-radius:0;padding:2px 0 2px 18px;margin-block:22px}

/* --- breathing room before block headings --- */
.section h2{margin-top:56px}
.sec__head h2,.hero h1{margin-top:0}

.section--product-body{padding-top:40px}

.vcard__glyph{width:52px;height:52px;stroke-width:1.7}

/* --- hero brighten pass (user feedback: too dark) --- */
.hero__frame img,.hero__img{filter:brightness(.95) saturate(1.04) contrast(1.02)}
.hero--photo::after{background-image:linear-gradient(90deg,rgba(8,20,26,.70) 0%,rgba(8,26,32,.34) 52%,rgba(8,26,32,.10) 100%),linear-gradient(0deg,rgba(8,20,26,.74) 0%,rgba(8,20,26,.02) 45%,rgba(8,20,26,.16) 100%)}

/* --- hero copy legibility over the brighter photo --- */
.hero__eyebrow{color:#D3F05A;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero h1,.hero__slide-title{text-shadow:0 2px 30px rgba(0,0,0,.38)}
.hero__lede{text-shadow:0 1px 16px rgba(0,0,0,.5)}

/* === sky hero integration === */
.hero__frame img,.hero__img{filter:none}
.hero--photo{background:#BFE4FA}
.hero--photo::after{background-image:linear-gradient(90deg,rgba(8,40,65,.58) 0%,rgba(8,40,65,.22) 48%,rgba(8,40,65,0) 72%),linear-gradient(0deg,rgba(8,40,65,.38) 0%,rgba(8,40,65,0) 42%)}
.hero__strip{background:rgba(8,40,65,.55)}
:root{--surface-2:#F2F8FD;--green-bg:#F2F8FD;--surface-3:#EAF4FB}

/* === user feedback: image up + clearer glass + photo footer + color logo === */
.brand__img{filter:none}
.hero__frame img,.hero__img{transform:translateY(-18px) scale(1.03);transform-origin:center top}
.hero__strip{
  background:linear-gradient(180deg,rgba(6,24,32,0) 0%,rgba(6,24,32,.42) 42%,rgba(6,24,32,.66) 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.hero__strip a{padding:14px 22px;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero__strip .n,.hero__strip .m{text-shadow:0 1px 10px rgba(0,0,0,.55)}
@media (max-width:767px){.hero__frame img,.hero__img{transform:translateY(-12px) scale(1.02)}}
.cta-band{
  background-image:linear-gradient(rgba(6,24,32,.74),rgba(6,24,32,.84)),url(../../images/web/footer-bg.jpg);
  background-size:cover;background-position:center;
}
.site-footer{
  background-image:linear-gradient(rgba(6,24,32,.84),rgba(6,24,32,.92)),url(../../images/web/footer-bg.jpg);
  background-size:cover;background-position:center 72%;
}

/* --- strip readability balance: uniform 50%, no blur --- */
.hero__strip{background:rgba(6,24,32,.50);-webkit-backdrop-filter:none;backdrop-filter:none}

/* --- one continuous photo across CTA + footer, tighter spacing --- */
.site-footer{
  background-image:linear-gradient(180deg,rgba(6,24,32,.74) 0%,rgba(6,24,32,.86) 38%,rgba(6,24,32,.92) 100%),url(../../images/web/footer-bg.jpg);
  background-size:cover;background-position:center;
}
.site-footer .cta-band{background:transparent;background-image:none}
.site-footer .cta-band__inner{padding-block:40px}
.footer__grid{padding-block:40px var(--s9)}

/* === unified type scale + aligned card baselines === */
.vcard{justify-content:flex-start}
.vcard__icon{height:64px;display:flex;align-items:flex-start;margin:0 0 26px}
.vcard__title{font-size:1.25rem;line-height:1.3;min-height:2.6em;margin:0 0 10px;letter-spacing:-.01em;font-weight:700}
.vcard__link{margin-top:auto;padding-top:18px}
.card__title{font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.scene__title{font-size:1.125rem;line-height:1.35}
/* article readability */
.article__body{max-width:760px}
.article__body p{font-size:1.0625rem;line-height:1.9;color:#3F4A5A}
.article__body h2{font-size:1.9rem;margin:48px 0 14px}
.article__figure{margin:28px 0}
.article__figure figcaption{font-size:12px;color:var(--gray);margin-top:8px}
/* contact form */
.form{max-width:720px}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],
.field select,.field textarea{padding:13px 14px;font-size:15px;background:#fff}
/* faq */
.faq__q{padding:18px 0;font-size:1.05rem}
.faq__a{font-size:15.5px;line-height:1.8}

/* === page-level layout pass: centre reading columns, case cards === */
.article{max-width:760px;margin-inline:auto}
.form{margin-inline:auto}
.faq{max-width:960px;margin-inline:auto}
.page-cases .scenes{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.page-cases .scene__media{aspect-ratio:16/10}
@media (max-width:767px){.page-cases .scenes{grid-template-columns:1fr}}

.vcard__glyph{width:52px;height:52px;max-width:52px;stroke-width:1.7}

/* === masked blue-sky layer on inner heroes, site-wide === */
.hero:not(.hero--photo){position:relative;overflow:hidden;background:var(--green-d)}
.hero:not(.hero--photo)::before{
  content:"";position:absolute;top:0;right:0;bottom:0;width:62%;z-index:0;pointer-events:none;
  background:url(../../images/web/hero-sky.jpg) center 38%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 38%,#000 78%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 38%,#000 78%);
  opacity:.62;
}
.hero:not(.hero--photo) .hero__inner{position:relative;z-index:1}
.hero:not(.hero--photo) h1,.hero:not(.hero--photo) .hero__lede,.hero:not(.hero--photo) .hero__eyebrow{text-shadow:0 1px 18px rgba(0,0,0,.45)}
@media (max-width:767px){
  .hero:not(.hero--photo)::before{width:100%;opacity:.34;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 60%,transparent 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 60%,transparent 100%);
  }
}

/* === unify header + breadcrumb + hero into one dark band === */
.site-header{border-bottom:0}
.crumbs{background:var(--green-d);border:0;padding-block:14px}
.crumbs__list{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#A9BCC4}
.crumbs__list li{color:#A9BCC4}
.crumbs__list li+li::before{color:rgba(255,255,255,.35);margin-inline-end:10px}
.crumbs__list a{color:#C3D0D5}
.crumbs__list a:hover{color:var(--green)}
.crumbs__list [aria-current="page"]{color:#fff;font-weight:700}
.hero:not(.hero--photo)::before{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 38%,#000 78%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 18%,#000 42%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 38%,#000 78%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 18%,#000 42%);
  mask-composite:intersect;
}

/* === WO-12 P0-1: hero copy contrast (stronger left scrim, bright sky kept) === */
.hero--photo::after{
  background-image:
    linear-gradient(90deg,rgba(6,32,48,.92) 0%,rgba(6,32,48,.80) 26%,rgba(6,32,48,.70) 42%,rgba(6,32,48,.60) 52%,rgba(6,32,48,.30) 68%,rgba(6,32,48,.10) 80%,rgba(6,32,48,0) 100%),
    linear-gradient(0deg,rgba(6,32,48,.48) 0%,rgba(6,32,48,0) 45%);
}
@media (max-width:767px){
  .hero--photo::after{
    background-image:
      linear-gradient(180deg,rgba(6,32,48,.78) 0%,rgba(6,32,48,.64) 55%,rgba(6,32,48,.46) 100%),
      linear-gradient(90deg,rgba(6,32,48,.30) 0%,rgba(6,32,48,0) 70%);
  }
}
.footer__fontlicence a{color:#C3D0D5}
.footer__fontlicence a:hover{color:#fff}