/* ==========================================================================
   Decarb Matrix — main stylesheet
   1. Tokens (all design tokens)   2. Base   3. Layout   4. Components   5. Header & nav
   6. Hero slider   7. Home sections   8. Footer   9. Utilities & motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/*
 * The ONE place every design token is defined (consolidated 8 Oct 2026, phase 3B: the values
 * that later layers used to override are folded in here, so every page computes exactly what
 * it computed before). Phase 3 design system: docs/phase3/03-design-system.md.
 *
 * Breakpoints (custom properties cannot be used inside @media, so they are listed here).
 *   Phase 3 components (c-*) use five mobile-first tiers:  480 · 768 · 1024 · 1280 · 1536 px.
 *   Older page CSS still uses 600/640/900/1000/1080 px; each query moves to the nearest tier
 *   when its page is rebuilt (phases 3D–3F): 600/640 → 768, 900/1000 → 1024, 1080 → 1024 or 1280.
 */
:root {
  /* Brand */
  --lime: #9EE91D;
  --charcoal: #202020;
  --graphite: #3A3A3A;
  --industrial: #8A8F8C;
  --light: #F1F3F1;
  --white: #FFFFFF;

  /* Sector signal colours — small elements only. Set all to var(--industrial) to switch off. */
  --sig-fleet: #18A9C4;
  --sig-mining: #F2A516;
  --sig-power: #7C5CFF;
  --sig-marine: #2F80ED;
  --sig-mfg: #14B8A6;
  --sig-heat: #F0563E;
  --sig-pump: var(--lime);        /* vehicle-owner icon */

  /* Derived neutrals (no tints, no gradients) */
  --rule: rgba(138, 143, 140, 0.35);
  --rule-dark: rgba(255, 255, 255, 0.14);
  --hairline: rgba(138, 143, 140, 0.24);
  --text-on-dark: rgba(255, 255, 255, 0.86);
  --muted-on-dark: rgba(255, 255, 255, 0.72);
  --charcoal-2: #2A2A2A;          /* card on a charcoal band */
  --scrim: rgba(32, 32, 32, 0.72);   /* functional: keeps text readable over photos */
  --error: #B42318;               /* functional error colour, 6:1 on #F1F3F1 */

  /* Type */
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --fs-body: 1rem;                /* 18px from 900px (below) */
  --fs-small: 0.875rem;           /* 14px — never smaller for qualification text */
  --fs-qual: 0.875rem;            /* qualification blocks: 14px minimum (CLAUDE.md §4) */
  --fs-lede: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --fs-display: clamp(2.6rem, 1.4rem + 5vw, 4.5rem);
  --fs-h1: clamp(2.25rem, 1.35rem + 3.6vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);

  /* Spacing: 4 px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;  --s-5: 24px;  --s-6: 32px;
  --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-11: 120px; --s-12: 160px;

  /* Layout */
  --maxw: 1240px;
  --maxw-wide: 1440px;
  --gutter: clamp(16px, 4vw, 40px);
  --gap: clamp(16px, 2vw, 24px);
  --section-y: clamp(56px, 6vw, 96px);
  --island: clamp(8px, 1.4vw, 20px);   /* gap between an island and the page edge */
  --header-h: 100px;   /* room for a readable logo (7 Oct 2026, was 84px) */
  --utility-h: 36px;

  /* Shape and depth */
  --radius: 12px;                 /* inputs, small panels */
  --radius-lg: 20px;              /* cards, media frames */
  --radius-xl: 32px;              /* section islands, hero stages */
  --r-sm: 6px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(32, 32, 32, 0.04), 0 6px 18px rgba(32, 32, 32, 0.05);
  --shadow-md: 0 2px 6px rgba(32, 32, 32, 0.05), 0 18px 44px rgba(32, 32, 32, 0.08);
  --shadow-lift: 0 4px 12px rgba(32, 32, 32, 0.06), 0 30px 64px rgba(32, 32, 32, 0.14);

  /* Motion (all collapse to instant under prefers-reduced-motion) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 700ms;
  --focus: var(--charcoal);
}

@media (min-width: 900px) {
  :root { --fs-body: 1.125rem; }   /* 18px desktop, 16px mobile */
}
@media (max-width: 1079px) {
  :root { --header-h: 76px; --utility-h: 44px; }   /* 44 px touch targets for the door switch */
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Safety net (phase 3B): nothing can make a page scroll sideways on a phone. "clip", not "hidden",
   so sticky parts keep working. Layouts must still fit: tests/overflow-check.html lists any that do not. */
body { overflow-x: clip; }

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

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; }

p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }

a {
  color: var(--charcoal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

strong { color: var(--charcoal); font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark, .utility, .site-footer, .hero__stage, .tech-panel { --focus: var(--lime); }

::selection { background: var(--lime); color: var(--charcoal); }

button { font: inherit; color: inherit; }

/* 3. Layout ---------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--light { background: var(--light); }
.section--dark { background: var(--charcoal); color: var(--text-on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4, .section--dark strong { color: var(--white); }
.section--dark a { color: var(--white); }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.span-12 { grid-column: span 12; }
@media (min-width: 900px) {
  .md-span-4 { grid-column: span 4; }
  .md-span-5 { grid-column: span 5; }
  .md-span-6 { grid-column: span 6; }
  .md-span-7 { grid-column: span 7; }
  .md-span-8 { grid-column: span 8; }
  .md-start-7 { grid-column-start: 7; }
  .md-start-8 { grid-column-start: 8; }
}

/* Section heading pattern */
.sec-head { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head--split {
  max-width: none;
  display: grid;
  gap: var(--gap);
  align-items: end;
}
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: 7fr 5fr; column-gap: calc(var(--gap) * 3); }
}
.sec-head h2 { margin-bottom: 0.3em; }
.sec-head .subtitle {
  margin: 0;
  color: var(--graphite);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.section--dark .sec-head .subtitle { color: var(--muted-on-dark); }
.sec-head .lede, .lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--graphite);
}
.section--dark .lede { color: var(--text-on-dark); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--lime);
  flex: none;
}
.section--dark .eyebrow { color: var(--muted-on-dark); }

/* 4. Components ------------------------------------------------------------ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn .icon { transition: transform 0.2s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--primary { background: var(--lime); color: var(--charcoal); }
.btn--primary:hover { background: var(--charcoal); color: var(--lime); }
.section--dark .btn--primary:hover, .hero__stage .btn--primary:hover { background: var(--white); color: var(--charcoal); }
.btn--ghost { border-color: var(--charcoal); color: var(--charcoal); background: transparent; }
.btn--ghost:hover { background: var(--charcoal); color: var(--white); }
.section--dark .btn--ghost, .hero__stage .btn--ghost { border-color: rgba(255, 255, 255, 0.7); color: var(--white); }
.section--dark .btn--ghost:hover, .hero__stage .btn--ghost:hover { background: var(--white); border-color: var(--white); color: var(--charcoal); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--lime);
  padding-bottom: 2px;
  min-height: 0;
}
.link-arrow .icon { transition: transform 0.2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--white); }
.link-arrow-wrap { margin-top: 32px; }

/* Unit chip — the recurring mono motif */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}
.chip--sig::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--sig);
  flex: none;
}
.chip--dark, .section--dark .chip, .hero__stage .chip {
  background: rgba(32, 32, 32, 0.55);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
}
.chip--wrap { white-space: normal; }

/* Qualification block */
.qual {
  margin-top: clamp(32px, 4vw, 48px);
  padding: 20px 24px;
  border-left: 3px solid var(--charcoal);
  background: var(--white);
  color: var(--graphite);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.section--light .qual { background: var(--white); }
.section:not(.section--light):not(.section--dark) .qual { background: var(--light); }
.qual p, .qual ul { margin: 0; }
.qual ul { padding-left: 1.1em; }
.qual li + li { margin-top: 6px; }
.qual__label {
  margin: 0 0 6px !important;
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qual--dark {
  background: rgba(255, 255, 255, 0.05) !important;
  border-left-color: var(--lime);
  color: var(--text-on-dark);
}
.qual--dark .qual__label { color: var(--white); }

/* Caption for illustrative photos */
.caption {
  margin: 0;
  color: var(--graphite);
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* Cards with hover lift */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.card:hover, .card:focus-within {
  --lift: -6px;
  box-shadow: var(--shadow-lift);
  border-color: transparent;
}
.card__body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; flex: 1; }
.card__body > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 1rem; }
/* Whole card clickable via its main link */
.card__link { text-decoration: none; color: inherit; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.card__more {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
}
.card:hover .card__more .icon { transform: translateX(4px); }
.card__more .icon { transition: transform 0.2s var(--ease); }

/* Technical grid panel — shown where a photo has not been added yet */
.tech-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--charcoal);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  background-position: -1px -1px;
}
/* Ruler ticks along the bottom edge */
.tech-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background-image: linear-gradient(90deg, rgba(158, 233, 29, 0.55) 1px, transparent 1px);
  background-size: 16px 100%;
  opacity: 0.6;
}
.tech-panel__mark {
  position: absolute;
  right: 4%;
  bottom: 10%;
  color: rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 12vw, 10rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* Media frame used by cards and heroes */
.media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--charcoal);
}
.media picture, .media img { width: 100%; height: 100%; }
.media img { object-fit: cover; }
.media .tech-panel__mark { font-size: clamp(2.5rem, 5vw, 3.75rem); bottom: 14%; }

/* Data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.data-table th, .data-table td {
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.data-table thead th {
  padding-top: 0;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--charcoal);
}
.data-table tbody th {
  width: 32%;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-weight: 700;
}
@media (max-width: 639px) {
  .data-table--stack thead { display: none; }
  .data-table--stack tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .data-table--stack th, .data-table--stack td { display: block; width: auto; padding: 0; border: 0; }
  .data-table--stack tbody th { margin-bottom: 4px; }
}

.plain-list { list-style: none; margin: 0; padding: 0; }

/* 5. Header & nav ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 2000;
  padding: 12px 18px;
  background: var(--charcoal);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; --focus: var(--lime); }

/* The Measurement Line — scroll progress */
.measure-line {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: 3px;
  pointer-events: none;
}
.measure-line__fill {
  display: block;
  height: 100%;
  background: var(--lime);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
}

/* Utility bar */
.utility {
  background: var(--charcoal);
  color: var(--text-on-dark);
  font-size: var(--fs-small);
}
.utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--utility-h);
}
.utility a { color: var(--text-on-dark); text-decoration: none; }
.utility a:hover { color: var(--white); text-decoration: underline; }
.utility__contact { display: flex; gap: 24px; }
@media (max-width: 767px) { .utility__contact { display: none; } }

.door-switch { display: flex; align-items: center; gap: 4px; }
.door-switch__sep { color: rgba(255, 255, 255, 0.35); }
.door-switch__btn {
  position: relative;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--muted-on-dark);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
}
.door-switch__btn:first-child { padding-left: 0; }
@media (max-width: 1079px) { .door-switch__btn { min-height: 44px; } }
.door-switch__btn:hover { color: var(--white); }
.door-switch__btn[aria-pressed="true"] { color: var(--lime); font-weight: 600; }
.door-switch__btn[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  background: var(--lime);
}
.door-switch__btn:first-child[aria-pressed="true"]::after { left: 0; }

/* Door-dependent elements */
html[data-door="industry"] .door-owner,
html[data-door="owner"] .door-industry { display: none !important; }

/* Main header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}
.brand { display: block; flex: none; }
.brand img { height: 76px; width: auto; }   /* the stacked logo: big enough to read "Optimizing Carbon" */
@media (min-width: 1080px) and (max-width: 1279px) { .brand img { height: 68px; } }   /* small laptops: the menu still fits */
@media (max-width: 1079px) { .brand img { height: 56px; } }

.primary-nav { margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.primary-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.25s var(--ease);
}
.primary-nav__link:hover::after,
.primary-nav__link[aria-expanded="true"]::after,
.primary-nav__link[aria-current]::after,
.primary-nav__link[data-active]::after { transform: scaleX(1); }

.caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease);
}
[aria-expanded="true"] > .caret { transform: translateY(2px) rotate(-135deg); }

.site-header__cta { flex: none; }
.site-header__cta .btn { min-height: 44px; padding: 10px 18px; }

/* Mega menus */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--white);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 24px 48px rgba(32, 32, 32, 0.1);
}
.mega__inner {
  display: grid;
  gap: 8px 24px;
  padding-block: 28px 32px;
}
.mega__inner--3 { grid-template-columns: repeat(3, 1fr); }
.mega__inner--4 { grid-template-columns: repeat(4, 1fr); }
.mega__inner--5 { grid-template-columns: repeat(5, 1fr); }
.mega__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius);
  border-top: 3px solid transparent;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mega__item:hover, .mega__item[aria-current] { background: var(--light); border-top-color: var(--lime); }
.mega__item--sector:hover, .mega__item--sector[aria-current] { border-top-color: var(--sig); }
.mega__title { color: var(--charcoal); font-family: var(--font-display); font-weight: 700; line-height: 1.3; }
.mega__desc { color: var(--graphite); font-size: 0.9375rem; line-height: 1.45; }
.mega__foot {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin: 8px 16px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid var(--lime);
}

/* Menu toggle (mobile) */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
}
.menu-toggle__bars { position: relative; width: 22px; height: 14px; }
.menu-toggle__bars::before, .menu-toggle__bars::after, .menu-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars span { top: 6px; }
.menu-toggle__bars::after { top: 12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1079px) {
  .primary-nav, .site-header__cta { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* Mobile full-screen menu */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 999;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
}
.mobile-menu__inner { padding: 8px var(--gutter) 40px; }
.mobile-acc { border-bottom: 1px solid var(--rule); }
.mobile-acc__btn, .mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mobile-menu__link { border-bottom: 1px solid var(--rule); }
.mobile-menu__link[aria-current] { box-shadow: inset 4px 0 0 var(--lime); padding-left: 14px; }
.mobile-acc__panel { list-style: none; margin: 0; padding: 0 0 16px; }
.mobile-acc__panel a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-height: 44px;
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--rule);
  color: var(--graphite);
  text-decoration: none;
}
.mobile-acc__panel a[aria-current] { border-left-color: var(--lime); color: var(--charcoal); font-weight: 600; }
.mobile-menu__foot { display: grid; gap: 20px; margin-top: 32px; }
.mobile-menu__contact { margin: 0; font-size: 1rem; }
body.menu-open { overflow: hidden; }

/* Sticky bottom bar (mobile) */
.mobile-bar { display: none; }
@media (max-width: 1079px) {
  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    display: flex;
    gap: 8px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--rule);
  }
  .mobile-bar .btn { flex: 1; }
  .mobile-bar .mobile-bar__wa { flex: 0 0 auto; }
  body { padding-bottom: 72px; }
  body.menu-open .mobile-bar { display: none; }
}

/* 6. Hero slider ----------------------------------------------------------- */
.hero { padding: clamp(12px, 1.6vw, 20px) 0 0; background: var(--white); }
.hero__inner {
  max-width: calc(1440px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: clamp(0px, 1.6vw, 20px);
  display: grid;
  gap: 12px;
}
@media (min-width: 1080px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) 232px; }
  .hero--single .hero__inner { grid-template-columns: minmax(0, 1fr); }
}

.hero__stage {
  position: relative;
  height: clamp(440px, 46vw, 560px);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--charcoal);
  color: var(--white);
  touch-action: pan-y;
}
@media (max-width: 1079px) { .hero__stage { height: 600px; border-radius: 0; } }
@media (max-width: 380px) { .hero__stage { height: 620px; } }

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s;
  z-index: 1;
}
.slide__media { position: absolute; inset: 0; }
.slide__media picture, .slide__media img { width: 100%; height: 100%; }
.slide__media img { object-fit: cover; transform-origin: 60% 50%; }
.hero.is-animated .slide.is-active .slide__media img { animation: hero-zoom 7.8s linear forwards; }
.hero.is-paused .slide.is-active .slide__media img { animation-play-state: paused; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Functional scrim: keeps text legible over any photo */
.slide__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 20, 20, 0.88) 0%, rgba(20, 20, 20, 0.66) 42%, rgba(20, 20, 20, 0.15) 78%),
    linear-gradient(0deg, rgba(20, 20, 20, 0.7) 0%, rgba(20, 20, 20, 0) 34%);
}
.slide .tech-panel__mark { top: 6%; bottom: auto; }
.slide--fallback .slide__scrim { background: linear-gradient(90deg, rgba(32, 32, 32, 0.7) 0%, rgba(32, 32, 32, 0) 60%); }

.slide__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px clamp(20px, 5vw, 72px);
  max-width: 820px;
}
@media (max-width: 1079px) { .slide__content { justify-content: flex-end; bottom: 96px; } }

.slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.slide__eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--lime); }
.slide__title {
  margin: 0 0 18px;
  color: var(--white);
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  line-height: 1.05;
  max-width: 20ch;
}
.slide__sub {
  max-width: 44ch;
  margin: 0 0 20px;
  color: var(--text-on-dark);
  font-size: var(--fs-lede);
  line-height: 1.5;
}
.slide__small { margin: -8px 0 20px; color: var(--muted-on-dark); font-size: var(--fs-small); }
.slide__chip { margin-bottom: 28px; }
.slide__chip .chip { white-space: normal; }
.slide .btn-row .btn { min-height: 48px; }

.slide__caption {
  position: absolute;
  left: clamp(20px, 5vw, 72px);
  bottom: 22px;
  z-index: 2;
  max-width: min(52ch, 60%);
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-small);
  line-height: 1.4;
}
@media (max-width: 1079px) {
  .slide__caption { max-width: none; right: 20px; bottom: 76px; }
}

/* Stage controls */
.hero__controls {
  position: absolute;
  right: clamp(16px, 2vw, 24px);
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 1079px) { .hero__controls { left: 12px; right: 12px; bottom: 12px; justify-content: flex-end; } }
.hero__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius);
  background: rgba(20, 20, 20, 0.45);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.hero__btn:hover { background: var(--lime); border-color: var(--lime); color: var(--charcoal); }
.hero__btn svg { width: 18px; height: 18px; }
.hero__counter {
  min-width: 76px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-align: center;
}
.hero__counter b { color: var(--lime); font-weight: 600; }
.hero__btn .icon-play { display: none; }
.hero.is-paused .hero__btn--toggle .icon-pause, .hero.is-stopped .hero__btn--toggle .icon-pause { display: none; }
.hero.is-paused .hero__btn--toggle .icon-play, .hero.is-stopped .hero__btn--toggle .icon-play { display: block; }
.hero--single .hero__controls, .hero--single .hero__rail,
html[data-door="owner"] .hero--owner-single .hero__controls,
html[data-door="owner"] .hero--owner-single .hero__rail { display: none; }
@media (min-width: 1080px) {
  html[data-door="owner"] .hero--owner-single .hero__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Thumbnail rail */
.hero__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
@media (min-width: 1080px) {
  .hero__rail { grid-auto-rows: 1fr; height: clamp(440px, 46vw, 560px); }
}
@media (max-width: 1079px) {
  .hero__rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(168px, 44%);
    overflow-x: auto;
    padding: 0 var(--gutter) 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .hero__rail li { scroll-snap-align: start; }
}
.thumb {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 68px;
  padding: 10px 12px 12px 10px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.thumb:hover { background: var(--light); }
.thumb__media {
  position: relative;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--charcoal);
}
.thumb__media picture, .thumb__media img { width: 100%; height: 100%; }
.thumb__media img { object-fit: cover; }
.thumb__media .tech-panel { background-size: 26px 26px, 26px 26px, 13px 13px, 13px 13px; }
.thumb__media .tech-panel::after { display: none; }
.thumb__num {
  position: absolute;
  left: 6px;
  top: 4px;
  z-index: 1;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.thumb__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.thumb__name { color: var(--charcoal); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; line-height: 1.25; }
.thumb__unit { color: var(--graphite); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.3; }
.thumb__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
}
.thumb__bar span {
  display: block;
  height: 100%;
  background: var(--lime);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.thumb[aria-current="true"] { background: var(--charcoal); border-color: var(--charcoal); }
.thumb[aria-current="true"] .thumb__name { color: var(--white); }
.thumb[aria-current="true"] .thumb__unit { color: var(--muted-on-dark); }
.thumb[aria-current="true"] .thumb__bar { background: rgba(255, 255, 255, 0.14); }
.thumb[aria-current="true"] .thumb__bar span { transform: scaleX(var(--p, 0)); }
.hero:not(.is-animated) .thumb[aria-current="true"] .thumb__bar span,
.hero.is-stopped .thumb[aria-current="true"] .thumb__bar span { transform: scaleX(1); }
.thumb:focus-visible { --focus: var(--charcoal); }

/* 7. Home sections --------------------------------------------------------- */

/* Two doors */
.doors { padding-block: clamp(40px, 5vw, 64px) var(--section-y); }
.doors__grid { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .doors__grid { grid-template-columns: 1fr 1fr; } }
.door-card { background: var(--light); border-color: transparent; }
.door-card .card__body { padding: clamp(28px, 3.4vw, 44px); gap: 0; }
.door-card .door-card__label {
  margin: 0 0 20px;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.door-card h2 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); margin-bottom: 12px; }
.door-card p { font-size: var(--fs-lede); max-width: 34ch; }
.door-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 28px; }
.door-card .btn { align-self: flex-start; margin-top: auto; }
.door-card--dark { background: var(--charcoal); color: var(--text-on-dark); --focus: var(--lime); }
.door-card--dark h2 { color: var(--white); }
.door-card.door-card--dark .door-card__label { color: var(--muted-on-dark); }
.door-card--dark p { color: var(--text-on-dark); }
.door-card--dark .chip { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: var(--white); }

/* At a glance */
.glance__statement {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.125rem);
  line-height: 1.12;
  margin-bottom: 0;
}
.glance__copy p:last-child { margin-bottom: 0; }

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: clamp(48px, 6vw, 80px) 0 0;
  border-top: 2px solid var(--charcoal);
}
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .facts { grid-template-columns: repeat(5, 1fr); } }
.facts > div { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--rule); }
.facts dt {
  order: 2;
  color: var(--graphite);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.facts dd {
  margin: 0 0 6px;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.facts > div { display: flex; flex-direction: column; }
.facts dd { order: 1; }

.subhead {
  margin: clamp(56px, 7vw, 96px) 0 24px;
  font-size: var(--fs-h3);
}

/* Interactive step rail (How Value Is Created) */
.step-rail { position: relative; }
.step-rail__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.step-rail__list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 21px;
  height: 2px;
  background: var(--rule);
}
.step-rail__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 0 8px 0 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.step-rail__node {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--charcoal);
  border-radius: 50%;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.step-rail__label {
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
}
.step-rail__btn:hover .step-rail__node { background: var(--light); }
.step-rail__btn[aria-selected="true"] .step-rail__node { background: var(--lime); border-color: var(--charcoal); }
.step-rail__progress {
  position: absolute;
  left: 0;
  top: 21px;
  height: 2px;
  width: 100%;
  background: var(--charcoal);
  transform-origin: 0 50%;
  transform: scaleX(var(--step, 0));
  transition: transform 0.4s var(--ease);
}
.step-rail__panel {
  min-height: 3.2em;
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--light);
  border-left: 3px solid var(--lime);
  color: var(--charcoal);
  font-size: var(--fs-lede);
  line-height: 1.5;
}
.step-rail__panel p { margin: 0; }
@media (max-width: 639px) {
  .step-rail__list { grid-template-columns: 1fr; gap: 4px; }
  .step-rail__list::before, .step-rail__progress { left: 21px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .step-rail__progress { height: 100%; transform-origin: 50% 0; transform: scaleY(var(--step, 0)); }
  .step-rail__btn { flex-direction: row; align-items: center; }
}

/* Challenge */
.pressures {
  display: grid;
  gap: 0 calc(var(--gap) * 2.5);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pressure;
}
@media (min-width: 900px) { .pressures { grid-template-columns: 1fr 1fr; } }
.pressures li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 16px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.pressures__num {
  grid-row: span 2;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.9;
}
.pressures h3 { margin: 0; font-size: 1.125rem; }
.pressures p { margin: 0; font-size: 1rem; }
.opportunity {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--light);
  border-top: 4px solid var(--lime);
  display: grid;
  gap: 8px 48px;
}
@media (min-width: 900px) { .opportunity { grid-template-columns: 5fr 7fr; align-items: start; } }
.opportunity h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; }
.opportunity p { margin: 0 0 16px; }

/* Delivery Model band */
.phases {
  display: grid;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .phases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .phases { grid-template-columns: repeat(5, 1fr); } }
.phase {
  padding: 24px 0 8px;
  border-top: 3px solid var(--lime);
}
.phase__num { margin: 0 0 6px; color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); }
.phase h3 { margin: 0 0 4px; font-size: 1.125rem; letter-spacing: 0.02em; }
.phase__range { margin: 0 0 16px; color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); }
.phase ol { list-style: none; margin: 0; padding: 0; }
.phase li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--rule-dark);
  color: var(--text-on-dark);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.phase li span { flex: none; width: 22px; color: var(--muted-on-dark); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.7; }
.statement {
  margin: clamp(48px, 6vw, 80px) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-dark);
}
.statement__text {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.statement__text em { font-style: normal; color: var(--lime); }
.statement__aside { max-width: 42ch; margin: 0; color: var(--text-on-dark); }

/* Product cards */
.products-grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .products-grid { grid-template-columns: repeat(4, 1fr); } }
.product-card { border-top: 4px solid var(--charcoal); }
.product-card:hover { border-top-color: var(--lime); }
.product-card .chip { align-self: flex-start; margin-bottom: 20px; }
.product-card h3 { font-size: 1.3125rem; }
.product-card .product-card__label { margin: 0 0 4px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; }

/* Sector cards */
.sectors-grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .sectors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .sectors-grid { grid-template-columns: repeat(3, 1fr); } }
.sector-card { overflow: hidden; }
.sector-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 4px;
  background: var(--sig);
}
.sector-card .media { aspect-ratio: 16 / 9; }
.sector-card .caption { padding: 10px clamp(20px, 2.4vw, 28px) 0; }
.sector-card .chip { align-self: flex-start; margin-bottom: 16px; }

/* Measurement — formula chain (the page's one orchestrated animation) */
.formula {
  display: grid;
  gap: 12px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1080px) {
  .formula { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 10px; }
}
.formula__term {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.formula__term--result { background: var(--charcoal); border-color: var(--charcoal); }
.formula__term--result .formula__name { color: var(--white); }
.formula__term--result .formula__note { color: var(--muted-on-dark); }
.formula__term--final { box-shadow: inset 0 -4px 0 var(--lime); }
.formula__name { color: var(--charcoal); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.formula__note { color: var(--graphite); font-size: var(--fs-small); line-height: 1.45; }
.formula__op {
  display: grid;
  place-items: center;
  min-width: 28px;
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 1.75rem;
  line-height: 1;
}
@media (max-width: 1079px) { .formula__op { min-height: 32px; } }

.modes { display: grid; gap: var(--gap); margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .modes { grid-template-columns: 1fr 1fr; } }
.mode {
  padding: clamp(24px, 3vw, 36px);
  background: var(--light);
  border-radius: var(--radius);
}
.mode--verified { background: var(--charcoal); color: var(--text-on-dark); }
.mode--verified h3, .mode--verified .mode__label { color: var(--white); }
.mode--verified .mode__kicker { color: var(--muted-on-dark); }
.mode__kicker { margin: 0 0 8px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.mode h3 { margin-bottom: 16px; }
.mode dl { margin: 0; }
.mode dt { margin-top: 14px; font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; }
.mode dd { margin: 4px 0 0; font-size: 1rem; }
.mode__label { font-weight: 600; color: var(--charcoal); }

/* Baseline → Trial → Verify → Calculate → Scale rail (the Measurement Line as a rail) */
.m-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
}
.m-rail::before, .m-rail__fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 3px;
  background: var(--rule);
}
.m-rail .m-rail__fill { position: absolute; padding: 0; background: var(--lime); transform-origin: 0 50%; transform: scaleX(1); }
.m-rail .m-rail__fill::before { display: none; }
.m-rail li {
  position: relative;
  padding-top: 32px;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 0.7rem + 0.6vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.m-rail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 17px;
  height: 17px;
  border: 3px solid var(--charcoal);
  border-radius: 50%;
  background: var(--lime);
}

/* Draw-in (only when JS and motion are allowed) */
.motion .reveal .formula__term,
.motion .reveal .formula__op { opacity: 0; transform: translateY(14px); }
.motion .reveal.is-in .formula__term,
.motion .reveal.is-in .formula__op {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* Evidence Lens (tabs) */
.lens { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .lens { grid-template-columns: 4fr 8fr; gap: calc(var(--gap) * 2); } }
.lens__tabs { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 899px) {
  .lens__tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .lens__tab { flex: none; }
}
.lens__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 18px;
  border: 1px solid var(--rule);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lens__tab span { color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; }
.lens__tab:hover { background: var(--light); }
.lens__tab[aria-selected="true"] { background: var(--charcoal); border-color: var(--charcoal); border-left-color: var(--lime); color: var(--white); }
.lens__tab[aria-selected="true"] span { color: var(--lime); }
.lens__panel {
  padding: clamp(24px, 3vw, 40px);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.lens__panel h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 24px; }
.lens__panel dl { display: grid; gap: 24px; margin: 0; }
@media (min-width: 640px) { .lens__panel dl { grid-template-columns: 1fr 1fr; } }
.lens__panel dt {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--charcoal);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lens__panel dd { margin: 0; font-size: 1rem; }
.lens__note { margin: 20px 0 0; font-size: var(--fs-small); color: var(--graphite); }

.discipline {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 4vw, 56px);
  background: var(--charcoal);
  color: var(--text-on-dark);
  border-radius: var(--radius);
  display: grid;
  gap: 24px 64px;
  --focus: var(--lime);
}
@media (min-width: 900px) { .discipline { grid-template-columns: 5fr 7fr; } }
.discipline h3 { color: var(--white); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); margin: 0; }
.discipline__kicker { margin: 0 0 12px; color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.discipline ul { list-style: none; margin: 0; padding: 0; }
.discipline li {
  position: relative;
  padding: 14px 0 14px 32px;
  border-top: 1px solid var(--rule-dark);
  font-size: var(--fs-lede);
  line-height: 1.45;
}
.discipline li:first-child { border-top: 0; padding-top: 0; }
.discipline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 16px;
  height: 3px;
  background: var(--lime);
}
.discipline li:not(:first-child)::before { top: calc(14px + 0.7em); }

/* Start here */
.routes { display: grid; gap: var(--gap); counter-reset: route; }
@media (min-width: 900px) { .routes { grid-template-columns: repeat(3, 1fr); } }
.route-card .card__body { gap: 0; }
.route-card .route-card__num {
  margin: 0 0 24px;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.route-card__num::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 16px; background: var(--lime); }
.route-card .btn { align-self: flex-start; margin-top: auto; }
.route-card p { margin-bottom: 28px; }

.closing {
  margin: clamp(64px, 8vw, 112px) 0 0;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 2px solid var(--charcoal);
}
.closing__text {
  max-width: 22ch;
  margin: 0;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 3.4vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.closing__text > span { display: block; }
.closing__text .hl { box-shadow: inset 0 -0.18em 0 var(--lime); }

/* Proof strip: an explorer of approved results (includes/claims.php). Lime figures on
   charcoal; the sector signal colour appears only on small dots, icons and the fact markers. */
.proof { position: relative; overflow: hidden; isolation: isolate; }
.proof::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 53px 53px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.proof-x {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--rule-dark);
  border-top: 2px solid var(--lime);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
@media (min-width: 900px) { .proof-x:not(.proof-x--single) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.proof-x:not([data-active]) .proof-x__list, .proof-x--single .proof-x__list { display: none; }   /* no JavaScript: every result is shown in full */

/* Result list */
.proof-x__list { position: relative; display: flex; flex-direction: column; background: var(--charcoal); }
.proof-tab {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 22px 24px 22px 28px;
  border: 0;
  border-bottom: 1px solid var(--rule-dark);
  background: transparent;
  color: var(--text-on-dark);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.proof-tab:last-child { border-bottom: 0; }
.proof-tab:hover { background: rgba(255, 255, 255, 0.035); }
.proof-tab[aria-selected="true"] { background: #2B2B2B; }
.proof-tab__bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.45s var(--ease);
}
.proof-tab[aria-selected="true"] .proof-tab__bar { transform: scaleY(1); }
.proof-tab__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted-on-dark); }
.proof-tab__sector { display: inline-flex; align-items: center; gap: 8px; text-align: right; }
.proof-tab__sector .sicon { width: 20px; height: 20px; flex: none; }
.proof-tab__fig {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2.125rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.proof-tab[aria-selected="true"] .proof-tab__fig { color: var(--lime); }
.proof-tab__label { color: var(--muted-on-dark); font-size: 0.9375rem; line-height: 1.4; transition: color 0.3s var(--ease); }
.proof-tab[aria-selected="true"] .proof-tab__label { color: var(--white); }
.proof-fig__join { margin: 0 0.04em; color: var(--muted-on-dark); font-weight: 700; }
.proof-fig__unit { margin-left: 0.06em; font-size: 0.5em; letter-spacing: 0; }

/* Result panel */
.proof-x__stage { background: var(--charcoal); }
.proof-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 3.6vw, 52px);
  background: var(--charcoal);
  outline-offset: -4px;
}
.proof-panel + .proof-panel { border-top: 1px solid var(--rule-dark); }
.proof-x[data-active] .proof-panel { border-top: 0; }
@media (min-width: 900px) {
  /* Panels share one space, so switching never makes the page jump */
  .proof-x[data-active] .proof-x__stage { display: grid; }
  .proof-x[data-active] .proof-panel { grid-area: 1 / 1; transition: opacity 0.5s var(--ease), translate 0.5s var(--ease), visibility 0s; }
  .proof-x[data-active] .proof-panel[hidden] {
    display: flex !important;
    visibility: hidden;
    opacity: 0;
    translate: 0 14px;
    transition: opacity 0.2s, translate 0.2s, visibility 0s 0.2s;
  }
}
@media (max-width: 899px) {
  .proof-x[data-active] .proof-panel:not([hidden]) { animation: panel-in 0.5s var(--ease) both; }
}
.proof-panel > p, .proof-panel > ul, .proof-panel > figure { position: relative; margin: 0; }
.proof-panel__mark {
  position: absolute;
  right: -0.05em;
  bottom: -0.2em;
  color: rgba(255, 255, 255, 0.035);
  font: 800 clamp(5rem, 3rem + 7vw, 10rem)/1 var(--font-mono);
  letter-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
}
.proof-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.proof-panel__figure {
  color: var(--lime);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 480px) { .proof-panel__figure { white-space: nowrap; } }
.proof-panel__label { max-width: 30ch; color: var(--white); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }

/* Before / after bars: they start at zero, so the difference is shown at its true size */
.proof-bars { display: grid; gap: 12px; max-width: 600px; }
.proof-bars__title { margin-bottom: 2px; font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted-on-dark); }
.proof-bar {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  font-size: 0.9375rem;
}
.proof-bar__name { color: var(--text-on-dark); line-height: 1.3; }
.proof-bar__track { height: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.06); border-radius: 2px; }
.proof-bar__fill {
  display: block;
  width: var(--w);
  height: 100%;
  background: var(--industrial);
  transform-origin: 0 50%;
  animation: bar-grow 1.1s var(--ease) calc(0.2s + var(--i, 0) * 0.18s) both;
}
@keyframes bar-grow { from { transform: scaleX(0); } }
.proof-bar--with .proof-bar__fill { background: var(--lime); }
.proof-bar__value { min-width: 7.5em; color: var(--white); font-family: var(--font-mono); font-size: 0.875rem; text-align: right; font-variant-numeric: tabular-nums; }
/* The bars grow each time a result is opened (a new animation starts when it stops being "none") */
.proof-x[data-active] .proof-panel[hidden] .proof-bar__fill,
.motion .proof-x:not(.is-in) .proof-bar__fill { transform: scaleX(0); animation: none; }

.proof-panel__facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.proof-panel__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  color: var(--text-on-dark);
  font-size: 0.875rem;
  line-height: 1.4;
}
.proof-panel__facts li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--sig, var(--lime)); }
.proof-panel__text {
  max-width: 64ch;
  margin-top: auto !important;
  padding-top: 20px;
  border-top: 1px solid var(--rule-dark);
  color: var(--muted-on-dark);
  font-size: 1rem;
  line-height: 1.65;
}

.proof__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 28px;
}
.proof__foot > div { flex: 1 1 420px; display: grid; gap: 6px; }
.proof__standing { max-width: 78ch; margin: 0; color: var(--muted-on-dark); font-size: 0.875rem; line-height: 1.55; }
.proof__foot .link-arrow { flex: none; }

/* Phones and tablets: the result list becomes a row you can swipe */
@media (max-width: 899px) {
  .proof-x__list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .proof-x__list::-webkit-scrollbar { display: none; }
  .proof-tab { flex: 0 0 min(260px, 78%); scroll-snap-align: start; border-bottom: 0; border-right: 1px solid var(--rule-dark); padding: 18px 20px; }
  .proof-tab:last-child { border-right: 0; }
  .proof-tab__bar { top: auto; right: 0; width: auto; height: 3px; transform: scaleX(0); transform-origin: 0 50%; }
  .proof-tab[aria-selected="true"] .proof-tab__bar { transform: scaleX(1); }
  .proof-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .proof-bar__track { grid-column: 1 / -1; grid-row: 2; }
}

/* 8. Footer ---------------------------------------------------------------- */
.site-footer {
  padding: clamp(56px, 7vw, 96px) 0 32px;
  background: var(--charcoal);
  color: var(--text-on-dark);
  font-size: 0.9375rem;
}
.site-footer a { color: var(--text-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer__top {
  display: grid;
  gap: 40px var(--gap);
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 640px) { .site-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .site-footer__top { grid-template-columns: 3fr 3fr 3fr 3fr; } }
.logo-tile {
  display: inline-block;
  padding: 16px 18px;
  background: var(--white);
  border-radius: var(--radius);
}
.logo-tile img { width: 120px; height: auto; }
.site-footer__positioning { margin: 16px 0 0; max-width: 24ch; color: var(--muted-on-dark); }
.site-footer__heading {
  margin: 0 0 14px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-footer__heading:not(:first-child) { margin-top: 28px; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer address strong { color: var(--white); }
.site-footer__maps { margin: 12px 0 0; }
.site-footer__maps a { text-decoration: underline; text-decoration-color: var(--lime); }
.site-footer .plain-list li { padding: 3px 0; }
.site-footer .plain-list a { display: inline-block; padding: 4px 0; }
.site-footer__map {
  display: grid;
  gap: 32px var(--gap);
  padding-block: 48px;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 640px) { .site-footer__map { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .site-footer__map { grid-template-columns: repeat(4, 1fr); } }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 28px;
  color: var(--muted-on-dark);
  font-size: var(--fs-small);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.site-footer__legal a { display: inline-block; padding: 10px 0; }
.site-footer__line { font-family: var(--font-mono); color: var(--white); }
.site-footer__line::before { content: ""; display: inline-block; width: 20px; height: 3px; margin-right: 12px; vertical-align: middle; background: var(--lime); }

/* Staging-only notice */
.staging-note {
  padding: 10px var(--gutter);
  background: var(--lime);
  color: var(--charcoal);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
}

/* 404 */
.notfound { padding-block: clamp(80px, 12vw, 160px); }
.notfound__code {
  margin: 0 0 16px;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.notfound__links { display: grid; gap: 12px; margin-top: 48px; }
@media (min-width: 640px) { .notfound__links { grid-template-columns: repeat(3, 1fr); } }

/* 9. Utilities & motion ---------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .card:focus-within { transform: none; }
}

@media print {
  .utility, .site-header, .mobile-menu, .mobile-bar, .measure-line, .hero__controls, .hero__rail { display: none !important; }
  body { padding: 0; }
}

/* ==========================================================================
   10. Motion & colour layer
   Runs only when html has .motion (set in head when the visitor allows motion).
   Reveal effects use the `translate` property so they never fight card tilt (`transform`).
   ========================================================================== */

/* Keyframes */
@keyframes rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes word-up { from { translate: 0 112%; } to { translate: 0 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ticker { to { translate: -100% 0; } }
@keyframes drift { to { background-position: 159px 159px, 159px 159px, 159px 159px, 159px 159px; } }
@keyframes scan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes flow { to { background-position: 36px 0; } }
@keyframes panel-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes mark-in { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes vt-out { to { opacity: 0; translate: 0 -12px; } }
@keyframes vt-in { from { opacity: 0; translate: 0 18px; } }

/* Smooth fade between pages (browsers that support it) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.4s var(--ease) both; }

/* ---- Reveal on scroll ---- */
.motion [data-reveal]:not([data-stagger]):not(.is-in) { opacity: 0; }
.motion [data-reveal].is-in:not([data-stagger]) { animation: rise 0.9s var(--ease) both; }
.motion [data-stagger]:not(.is-in) > * { opacity: 0; }
.motion [data-stagger].is-in > * { animation: rise 0.9s var(--ease) both; animation-delay: calc(var(--si, 0) * 90ms); }

/* ---- Word-by-word headings ---- */
.motion [data-split]:not(.is-split) { opacity: 0; }
.w__i { display: inline-block; }
.motion [data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.04em 0.16em;
  margin: 0 -0.04em -0.16em;
}
.motion [data-split]:not(.is-in) .w__i { translate: 0 112%; }
.motion [data-split].is-in .w__i { animation: word-up 0.95s var(--ease) both; animation-delay: calc(var(--wi) * 38ms); }
.motion .slide.is-active [data-split] .w__i { animation: word-up 1s var(--ease) both; animation-delay: calc(var(--wi) * 70ms + 120ms); }

/* Lime underline that draws itself */
.hl-draw {
  background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 94% / 100% 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.motion [data-split] .hl-draw { background-size: 0% 0.14em; transition: background-size 1.3s var(--ease) 0.7s; }
.motion [data-split].is-in .hl-draw { background-size: 100% 0.14em; }

/* ---- Magnetic buttons & tilting cards ---- */
.btn.is-magnetic {
  translate: var(--mx, 0px) var(--my, 0px);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), translate 0.35s var(--ease);
}
.card {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

/* ---- Sector icons ---- */
.sicon {
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--sig, var(--charcoal));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sicon--sm { width: 22px; height: 22px; }
.motion [data-draw] .sicon * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion [data-draw].is-in .sicon * { animation: draw 1.4s var(--ease) forwards; animation-delay: 0.25s; }
.motion [data-draw].is-in li:nth-child(2) .sicon * { animation-delay: 0.35s; }
.motion [data-draw].is-in li:nth-child(3) .sicon * { animation-delay: 0.45s; }
.motion [data-draw].is-in li:nth-child(4) .sicon * { animation-delay: 0.55s; }
.motion [data-draw].is-in li:nth-child(5) .sicon * { animation-delay: 0.65s; }
.motion [data-draw].is-in li:nth-child(6) .sicon * { animation-delay: 0.75s; }

/* ---- Header: shadow when scrolled, hides while scrolling down ---- */
.site-header { transition: transform 0.4s var(--ease), box-shadow 0.3s var(--ease); }
.is-scrolled .site-header { box-shadow: 0 10px 30px rgba(32, 32, 32, 0.08); }
.header-hidden .site-header { transform: translateY(-100%); }

/* ---- Hero: kinetic slides ---- */
.slide__eyebrow .sicon { color: var(--sig); }
.slide__eyebrow:has(.sicon)::before { display: none; }
.motion .slide.is-active .slide__eyebrow { animation: rise 0.7s var(--ease) both; }
.motion .slide.is-active .slide__sub { animation: rise 0.8s var(--ease) 0.45s both; }
.motion .slide.is-active .slide__small { animation: rise 0.8s var(--ease) 0.5s both; }
.motion .slide.is-active .slide__chip { animation: rise 0.8s var(--ease) 0.58s both; }
.motion .slide.is-active .btn-row { animation: rise 0.8s var(--ease) 0.7s both; }
.motion .slide.is-active .tech-panel__mark { animation: mark-in 1.6s var(--ease) 0.2s both; }
.motion .tech-panel { animation: drift 48s linear infinite; }
.motion .slide.is-active .tech-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lime);
  opacity: 0;
  animation: scan 5.5s var(--ease) 0.6s infinite;
}
.thumb__media .thumb__icon { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; }

/* ---- Unit ticker (moving band under the hero) ---- */
.ticker {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-top: 12px;
  background: var(--charcoal);
  color: var(--white);
  --focus: var(--lime);
}
.ticker__viewport { display: flex; flex: 1; min-width: 0; overflow: hidden; }
html:not(.motion) .ticker__viewport { overflow-x: auto; }
html:not(.motion) .ticker__track[aria-hidden="true"] { display: none; }
.ticker__track {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.motion .ticker__track { animation: ticker 48s linear infinite; }
.ticker:hover .ticker__track,
.ticker.is-paused .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 40px;
  border-right: 1px solid var(--rule-dark);
  white-space: nowrap;
}
.ticker__item .sicon { width: 30px; height: 30px; }
.ticker__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; }
.ticker__unit { color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); }
.ticker__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  border: 0;
  border-left: 1px solid var(--rule-dark);
  background: var(--charcoal);
  color: var(--white);
  cursor: pointer;
}
.ticker__toggle:hover { background: var(--lime); color: var(--charcoal); }
.ticker__toggle svg { width: 18px; height: 18px; }
.ticker__toggle .icon-play, .ticker.is-paused .ticker__toggle .icon-pause { display: none; }
.ticker.is-paused .ticker__toggle .icon-play { display: block; }
html:not(.motion) .ticker__toggle { display: none; }

/* ---- Two doors ---- */
@media (min-width: 900px) {
  .doors__grid { transition: grid-template-columns 0.7s var(--ease); }
  .doors__grid:has(> .door-card:first-child:hover) { grid-template-columns: 1.22fr 0.78fr; }
  .doors__grid:has(> .door-card:last-child:hover) { grid-template-columns: 0.78fr 1.22fr; }
}
.door-card { min-height: clamp(380px, 34vw, 460px); }
.door-card__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 32px;
  padding: 0;
  list-style: none;
}
.door-card__icons li {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), translate 0.3s var(--ease);
}
.door-card__icons li:hover { border-color: var(--sig); translate: 0 -3px; }
.door-card .door-card__unit {
  margin: 4px 0 32px;
  padding-bottom: 12px;
  align-self: flex-start;
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.06em;
  background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 100% / 34% 8px;
  transition: background-size 0.7s var(--ease);
}
.door-card:hover .door-card__unit { background-size: 100% 8px; }

/* ---- At a glance ---- */
.step-rail__kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.motion .step-rail__panel:not([hidden]) { animation: panel-in 0.5s var(--ease) both; }
.step-rail__node { transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.3s var(--ease); }
.step-rail__btn[aria-selected="true"] .step-rail__node { transform: scale(1.12); }
.value-table__num {
  display: inline-block;
  min-width: 36px;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
}
.value-table tbody tr { transition: background-color 0.25s var(--ease); }
.value-table tbody tr:hover { background: var(--white); }
.value-table tbody tr:hover th { box-shadow: inset 3px 0 0 var(--lime); }
.value-table tbody th { padding-left: 12px; }

/* ---- Challenge: sticky heading + spotlight list ---- */
.challenge { display: grid; gap: 40px var(--gap); }
@media (min-width: 900px) {
  .challenge { grid-template-columns: 5fr 7fr; column-gap: clamp(40px, 6vw, 96px); }
  .challenge__sticky { position: sticky; top: calc(var(--header-h) + 32px); }
  .opportunity { grid-column: 1 / -1; }
}
.challenge__subtitle {
  margin: 0 0 24px;
  color: var(--graphite);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}
.challenge .pressures { grid-template-columns: 1fr; }
.challenge .pressures li {
  padding: 26px 20px;
  border-left: 3px solid transparent;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.challenge .pressures h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); transition: translate 0.35s var(--ease); }
.challenge .pressures li.is-lit { border-left-color: var(--lime); background: var(--light); }
.challenge .pressures li.is-lit h3 { translate: 6px 0; }
.challenge .pressures__num { height: max-content; border-radius: 2px; text-align: center; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.challenge .pressures li.is-lit .pressures__num { background: var(--charcoal); color: var(--lime); }

/* ---- Delivery Model: phase cards + horizontal scroll ---- */
.delivery .sec-head { margin-bottom: clamp(32px, 4vw, 48px); }
.phase {
  position: relative;
  padding: 28px 28px 20px;
  border: 1px solid var(--rule-dark);
  border-top: 3px solid var(--lime);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.phase .phase__num {
  margin: 0 0 18px;
  color: rgba(158, 233, 29, 0.22);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.5rem + 3vw, 6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  transition: color 0.4s var(--ease);
}
.phase:hover .phase__num, .hs--on .phase.is-current .phase__num { color: var(--lime); }
.hs--on .phase.is-current { border-color: rgba(158, 233, 29, 0.55); background: rgba(255, 255, 255, 0.06); }
.phase h3 { font-size: 1.25rem; }

.hs__bar { display: none; }
.hs--on .hs__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  color: var(--muted-on-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hs__rail { position: relative; flex: 1; height: 3px; background: var(--rule-dark); }
.hs__fill { position: absolute; inset: 0; background: var(--lime); transform-origin: 0 50%; transform: scaleX(var(--hp, 0)); }
.hs:not(.hs--on) { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.hs--on .hs__sticky { position: sticky; top: 0; padding-block: 8px; }
.hs--on .hs__viewport { overflow: hidden; }
.hs--on .hs__track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  will-change: transform;
}
.hs--on .phase { flex: none; width: clamp(340px, 29vw, 420px); }

/* ---- Products ---- */
.product-card { overflow: hidden; }
.product-card .card__body { position: relative; z-index: 1; }
.product-card__fuel {
  position: absolute;
  right: -6px;
  bottom: -14px;
  z-index: 0;
  color: var(--light);
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 5vw, 4.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.06em;
  white-space: nowrap;
  pointer-events: none;
  transition: translate 0.6s var(--ease), color 0.4s var(--ease);
}
.product-card:hover .product-card__fuel { translate: -14px 0; color: #E6EAE6; }
.product-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 4px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}
.product-card:hover::after { transform: scaleX(1); }

/* ---- Sector cards ---- */
.sector-card .media { overflow: hidden; }
.media__inner { position: absolute; inset: -8% 0; translate: 0 var(--py, 0px); transition: scale 0.8s var(--ease); }
.media__inner picture, .media__inner img { width: 100%; height: 100%; }
.media__inner img { object-fit: cover; }
.sector-card:hover .media__inner { scale: 1.05; }
.sector-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.sector-card .sector-card__top .chip { margin: 0; }
.sector-card::before { transform-origin: 0 50%; transition: transform 0.9s var(--ease), height 0.3s var(--ease); }
.motion [data-stagger]:not(.is-in) .sector-card::before { transform: scaleX(0); }
.motion [data-stagger].is-in .sector-card::before { transition-delay: calc(var(--si, 0) * 90ms + 0.35s), 0s; }
.sector-card:hover::before { height: 6px; }

/* ---- Measurement: flowing formula ---- */
.formula__op span[aria-hidden="true"] {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--lime);
  font-size: 1.375rem;
}
@media (min-width: 1080px) {
  .formula { position: relative; }
  .formula::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 50%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--lime) 0 12px, transparent 12px 18px);
  }
  .motion .formula::before { animation: flow 1.4s linear infinite; }
  .formula__term, .formula__op { position: relative; z-index: 1; }
}
.m-rail .m-rail__fill { transform: scaleX(var(--sp, 1)); }
.motion .m-rail li:not(.m-rail__fill)::before { background: var(--white); transition: background-color 0.3s var(--ease), transform 0.3s var(--ease); }
.motion .m-rail li.is-lit::before { background: var(--lime); transform: scale(1.2); }

/* ---- Evidence Lens ---- */
.lens__panel { position: relative; overflow: hidden; }
.lens__big {
  position: absolute;
  top: -6px;
  right: 14px;
  margin: 0;
  color: var(--light);
  font-family: var(--font-display);
  font-size: clamp(5rem, 9vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  pointer-events: none;
}
.lens__panel h3, .lens__panel dl { position: relative; }
.motion .lens__panel:not([hidden]) { animation: panel-in 0.5s var(--ease) both; }
.lens__tab { transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), translate 0.25s var(--ease); }
@media (min-width: 900px) { .lens__tab[aria-selected="true"] { translate: 6px 0; } }

/* ---- Closing statement: underline follows scroll ---- */
.closing .closing__text .hl {
  box-shadow: none;
  background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 90% / calc(var(--sp, 1) * 100%) 0.2em;
}

/* Reduced motion safety: undo every motion-only state */
@media (prefers-reduced-motion: reduce) {
  .header-hidden .site-header { transform: none; }
  .card { transform: none !important; }
  .btn.is-magnetic { translate: none; }
}

/* ---- Large icons inside technical panels (until photos arrive) ---- */
.tech-panel__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: auto;
  aspect-ratio: 1;
  translate: -50% -58%;
  stroke-width: 1;
}
.slide .tech-panel__icon { top: auto; bottom: 84px; left: auto; right: 6%; width: clamp(150px, 18vw, 260px); translate: none; }
.tech-panel__icons {
  position: absolute;
  bottom: 84px;
  right: 5%;
  display: grid;
  grid-template-columns: repeat(3, clamp(56px, 5.4vw, 92px));
  gap: clamp(14px, 2vw, 28px);
}
.tech-panel__icons .tech-panel__icon { position: static; width: 100%; translate: none; stroke-width: 1.1; }
@media (max-width: 1079px) {
  .slide .tech-panel__icon { top: 12%; bottom: auto; right: 6%; width: 110px; }
  .tech-panel__icons { top: 12%; bottom: auto; right: 6%; grid-template-columns: repeat(3, 40px); gap: 12px; }
}
@media (max-width: 1079px) and (min-width: 640px) {
  .slide .tech-panel__icon { width: 170px; }
}
.motion .tech-panel__icon * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .slide.is-active .tech-panel__icon * { animation: draw 2.4s var(--ease) 0.3s forwards; }
.motion .slide.is-active .tech-panel__icons .tech-panel__icon:nth-child(2) * { animation-delay: 0.45s; }
.motion .slide.is-active .tech-panel__icons .tech-panel__icon:nth-child(3) * { animation-delay: 0.6s; }
.motion .slide.is-active .tech-panel__icons .tech-panel__icon:nth-child(4) * { animation-delay: 0.75s; }
.motion .slide.is-active .tech-panel__icons .tech-panel__icon:nth-child(5) * { animation-delay: 0.9s; }
.motion .slide.is-active .tech-panel__icons .tech-panel__icon:nth-child(6) * { animation-delay: 1.05s; }
.motion [data-stagger].is-in .tech-panel__icon * { animation: draw 2.2s var(--ease) forwards; animation-delay: calc(var(--si, 0) * 120ms + 0.4s); }
.sector-card:hover .tech-panel__icon { scale: 1.06; }
.tech-panel__icon { transition: scale 0.6s var(--ease); }
@media (max-width: 639px) {
  .slide .tech-panel__icon, .slide .tech-panel__icons { display: none; }
}

/* ==========================================================================
   11. Calculators
   ========================================================================== */
.calc-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.calc-hero h1 { color: var(--white); font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4rem); }
.calc-hero .sec-head { margin-bottom: 36px; }
.calc-hero__formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}
.calc-hero__formula span {
  padding: 8px 14px;
  border: 1px solid var(--rule-dark);
  border-radius: 2px;
  color: var(--white);
}
.calc-hero__formula span.is-result { background: var(--lime); border-color: var(--lime); color: var(--charcoal); font-weight: 600; }
.calc-hero__formula b { color: var(--lime); font-size: 1.25rem; }

.calc { padding-top: clamp(40px, 5vw, 64px); }

/* Tabs */
.calc-tabs__list {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
@media (min-width: 768px) { .calc-tabs__list { grid-template-columns: 1fr 1fr; } }
.calc-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: center;
  padding: 22px 24px;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.calc-tab::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  height: 4px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease);
}
.calc-tab:hover { border-color: var(--charcoal); }
.calc-tab[aria-selected="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.calc-tab[aria-selected="true"]::before { transform: scaleX(1); }
.calc-tab__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--light);
  transition: color 0.3s var(--ease);
}
.calc-tab:not([aria-selected="true"]) .calc-tab__num { color: #D5DAD5; }
.calc-tab[aria-selected="true"] .calc-tab__num { color: var(--lime); }
.calc-tab__name { font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 800; letter-spacing: -0.01em; }
.calc-tab__desc { font-size: 0.9375rem; color: var(--graphite); }
.calc-tab[aria-selected="true"] .calc-tab__desc { color: var(--muted-on-dark); }
.motion .calc-panel:not([hidden]) { animation: panel-in 0.5s var(--ease) both; }

/* Layout */
.calc-grid { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 1000px) {
  .calc-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(var(--gap) * 1.5); }
  .calc-results { position: sticky; top: calc(var(--header-h) + 24px); }
}
.calc-note {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--lime);
  background: var(--light);
  color: var(--charcoal);
  font-size: 1rem;
}

/* Form */
.calc-form {
  display: grid;
  gap: 26px;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
}
#sector-fields { display: grid; gap: 26px; }
.calc-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc-field > label, .calc-field > legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.calc-help { margin: -4px 0 10px; color: var(--graphite); font-size: var(--fs-small); line-height: 1.45; }
.calc-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--lime);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.calc-tag--dark { background: rgba(158, 233, 29, 0.16); color: var(--lime); }
.calc-input {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 16px;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.calc-input:focus-within { border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(158, 233, 29, 0.55); }
.calc-input input, .calc-input select {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
}
.calc-input input:focus, .calc-input select:focus { outline: none; }
.calc-input--select select { font-family: var(--font-body); font-size: 1rem; cursor: pointer; }
.calc-prefix, .calc-unit { flex: none; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); }
.calc-prefix { font-size: 1.125rem; color: var(--charcoal); }
.calc-field--assume .calc-input { border-color: var(--charcoal); border-style: dashed; }
.calc-field--assume.is-empty .calc-input { background: var(--light); }
.calc-pair { display: grid; gap: 26px var(--gap); }
@media (min-width: 640px) { .calc-pair { grid-template-columns: 1fr 1fr; } }

/* Slider */
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 8px 0 0;
  background: transparent;
  cursor: pointer;
  --fill: 0%;
}
.calc-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(var(--lime), var(--lime)) 0 0 / var(--fill) 100% no-repeat, var(--light);
}
.calc-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--light); }
.calc-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--lime); }
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border: 3px solid var(--charcoal);
  border-radius: 50%;
  background: var(--lime);
  transition: transform 0.2s var(--ease);
}
.calc-slider::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--charcoal); border-radius: 50%; background: var(--lime); }
.calc-slider:hover::-webkit-slider-thumb { transform: scale(1.15); }
.is-empty .calc-slider::-webkit-slider-thumb { background: var(--white); border-color: var(--industrial); }
.is-empty .calc-slider::-moz-range-thumb { background: var(--white); border-color: var(--industrial); }

/* Segmented choice */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:hover { border-color: var(--charcoal); }
.seg label:has(input:checked) { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--charcoal); outline-offset: 3px; }

.calc-reset {
  justify-self: start;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--rule);
  background: none;
  color: var(--graphite);
  font-weight: 600;
  cursor: pointer;
}
.calc-reset:hover { color: var(--charcoal); border-bottom-color: var(--charcoal); }

/* Results card */
.calc-results {
  padding: clamp(22px, 3vw, 34px);
  border-top: 4px solid var(--sig, var(--lime));
  border-radius: var(--radius);
  background: var(--charcoal);
  color: var(--text-on-dark);
  --focus: var(--lime);
  transition: border-color 0.4s var(--ease);
}
.calc-results__kicker { margin: 0 0 14px; color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.calc-results__prompt { margin: 0 0 16px; padding: 12px 14px; border: 1px dashed var(--rule-dark); border-radius: 2px; color: var(--white); font-size: 0.9375rem; }
.calc-out { margin: 0; }
.calc-out__row { padding: 16px 0; border-top: 1px solid var(--rule-dark); }
.calc-out__row:first-child { border-top: 0; padding-top: 4px; }
.calc-out dt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted-on-dark); font-size: 0.9375rem; font-weight: 500; }
.calc-out dd { margin: 4px 0 0; }
.calc-out__value, .calc-out__cur {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.calc-out__row--main .calc-out__value, .calc-out__row--main .calc-out__cur { color: var(--lime); font-size: clamp(2.125rem, 1.5rem + 2vw, 3.25rem); }
.calc-out__cur { margin-right: 2px; }
.calc-out__unit { color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); }
.calc-out__formula { color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.5; }
.calc-out__carbon { color: var(--text-on-dark); font-size: var(--fs-small); }
.calc-out__row.is-empty .calc-out__value, .calc-out__row.is-empty .calc-out__cur { color: rgba(255, 255, 255, 0.3); }
.calc-label {
  margin: 18px 0 22px;
  padding: 12px 14px;
  border-left: 3px solid var(--lime);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.calc-results .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.calc-product { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--rule-dark); }
.calc-product p { margin: 0 0 10px; font-size: 0.9375rem; }
.calc-product__label { margin-bottom: 4px !important; color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small) !important; letter-spacing: 0.04em; text-transform: uppercase; }
.calc-product__name { color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem !important; }
.calc-product__qual { color: var(--muted-on-dark); font-size: var(--fs-small) !important; }

/* Sector picker */
.sector-pick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 0 var(--gap);
  padding: 0;
  border: 0;
}
@media (min-width: 640px) { .sector-pick { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .sector-pick { grid-template-columns: repeat(6, 1fr); } }
.sector-pick__opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 2px solid var(--rule);
  border-top: 4px solid var(--sig);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), translate 0.3s var(--ease);
}
.sector-pick__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sector-pick__opt:hover { translate: 0 -3px; border-color: var(--charcoal); border-top-color: var(--sig); }
.sector-pick__opt:has(input:checked) { background: var(--charcoal); border-color: var(--charcoal); border-top-color: var(--sig); }
.sector-pick__opt:has(input:focus-visible) { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.sector-pick__name { color: var(--charcoal); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; }
.sector-pick__unit { color: var(--graphite); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.35; }
.sector-pick__opt:has(input:checked) .sector-pick__name { color: var(--white); }
.sector-pick__opt:has(input:checked) .sector-pick__unit { color: var(--muted-on-dark); }
.sector-pick .sicon { width: 30px; height: 30px; }

.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ==========================================================================
   12. Inner pages (Phase 2)
   ========================================================================== */

/* ---- Page hero ---- */
.page-hero { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px); color: var(--text-on-dark); background: var(--charcoal); }
.page-hero__grid { display: grid; gap: 40px var(--gap); align-items: center; }
@media (min-width: 1000px) { .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); } }
.page-hero h1 { color: var(--white); font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4rem); max-width: 18ch; }
.page-hero__sub { margin: 0 0 20px; color: var(--lime); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.page-hero__lede { color: var(--text-on-dark); max-width: 60ch; margin: 0; }
.page-hero__media { margin: 0; }
.page-hero__frame { aspect-ratio: 5 / 4; border-radius: var(--radius); }
.page-hero__media figcaption { margin-top: 10px; }
.page-hero__media .caption { color: var(--muted-on-dark); }
.page-hero .tech-panel__icon { width: 38%; }
.page-hero .tech-panel__icons { top: 50%; left: 50%; right: auto; bottom: auto; translate: -50% -50%; grid-template-columns: repeat(3, clamp(52px, 5vw, 84px)); }
.page-hero .tech-panel__icons .tech-panel__icon { width: 100%; }
.motion .page-hero [data-draw].is-in .tech-panel__icon * { animation: draw 2.4s var(--ease) 0.4s forwards; }
.motion .page-hero [data-draw].is-in .tech-panel__icons .tech-panel__icon:nth-child(2) * { animation-delay: 0.55s; }
.motion .page-hero [data-draw].is-in .tech-panel__icons .tech-panel__icon:nth-child(3) * { animation-delay: 0.7s; }
.motion .page-hero [data-draw].is-in .tech-panel__icons .tech-panel__icon:nth-child(4) * { animation-delay: 0.85s; }
.motion .page-hero [data-draw].is-in .tech-panel__icons .tech-panel__icon:nth-child(5) * { animation-delay: 1s; }
.motion .page-hero [data-draw].is-in .tech-panel__icons .tech-panel__icon:nth-child(6) * { animation-delay: 1.15s; }
.motion .page-hero .tech-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lime);
  opacity: 0;
  animation: scan 5.5s var(--ease) 0.8s infinite;
}

.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 28px; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--fs-small); }
.crumbs li { color: var(--muted-on-dark); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, 0.4); }
.crumbs a { color: var(--white); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-decoration-color: var(--lime); }
.crumbs [aria-current] { color: var(--lime); }

/* ---- Closing CTA band ---- */
.cta-band { padding-block: clamp(64px, 8vw, 112px); background: var(--charcoal); color: var(--text-on-dark); border-top: 1px solid var(--rule-dark); --focus: var(--lime); }
.cta-band__inner { display: grid; gap: 32px var(--gap); align-items: end; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 8fr 4fr; } }
.cta-band h2 { color: var(--white); }
.cta-band__statement { margin: 0; color: var(--lime); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; max-width: 34ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn--ghost { border-color: rgba(255, 255, 255, 0.7); color: var(--white); }
.cta-band .btn--ghost:hover { background: var(--white); border-color: var(--white); color: var(--charcoal); }
.cta-band .btn--primary:hover { background: var(--white); color: var(--charcoal); }
/* The CTA band sits right above the footer: separate them with a lime rule */
main:has(> .cta-band:last-child) + .site-footer { border-top: 3px solid var(--lime); }

/* ---- About: who we are (purpose, mission, vision; redesign 6 Oct 2026) ---- */
.who__label { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; }
.who__num { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--charcoal); color: var(--lime); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 800; letter-spacing: 0; }
.who__purpose { display: grid; gap: 32px; padding: clamp(32px, 5.5vw, 72px); border-radius: 20px; background: var(--charcoal); box-shadow: inset 0 4px 0 var(--lime); }
@media (min-width: 900px) { .who__purpose { grid-template-columns: 1.6fr 1fr; align-items: end; gap: clamp(32px, 5vw, 72px); } }
.who__keys { margin: 0; padding: 0; list-style: none; counter-reset: key; }
.who__keys li { counter-increment: key; display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule-dark); color: var(--white); font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 700; }
.who__keys li:last-child { border-bottom: 1px solid var(--rule-dark); }
.who__keys li::before { content: "0" counter(key); color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.1em; }
.who__purpose .who__label { color: var(--lime); }
.who__purpose .who__num { background: var(--lime); color: var(--charcoal); }
.who__statement { max-width: 26ch; margin: 0; color: var(--white); font-family: var(--font-display); font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.375rem); font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; }
.who__pair { display: grid; gap: var(--gap); margin-top: var(--gap); }
@media (min-width: 900px) { .who__pair { grid-template-columns: 1fr 1fr; } }
.who__card { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 48px); border-radius: 20px; background: var(--light); box-shadow: inset 0 4px 0 var(--lime); }
.who__text { margin: 0 0 32px; color: var(--charcoal); font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 600; line-height: 1.5; }
.who__chain { display: grid; gap: 10px; margin: auto 0 0; padding: 0; list-style: none; counter-reset: chain; }
@media (min-width: 600px) { .who__chain { grid-template-columns: 1fr 1fr; } }
.who__chain li { counter-increment: chain; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 12px; background: var(--white); color: var(--charcoal); font-weight: 600; line-height: 1.3; }
.who__chain li::before { content: counter(chain); display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--charcoal); color: var(--lime); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 800; }
.who__horizon { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: auto 0 0; }
.who__horizon div { padding: 14px 16px; border-radius: 12px; background: var(--white); }
.who__horizon div:last-child { background: var(--charcoal); }
.who__horizon dt { margin-bottom: 4px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; }
.who__horizon div:last-child dt { color: var(--lime); }
.who__horizon dd { margin: 0; color: var(--charcoal); font-weight: 600; line-height: 1.35; }
.who__horizon div:last-child dd { color: var(--white); }

/* ---- About: operating principles in a row ---- */
.principle-row { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .principle-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .principle-row { grid-template-columns: repeat(4, 1fr); } }
.principle { position: relative; padding: 26px 24px 24px; border-radius: 20px; background: var(--light); }
.principle__num { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--charcoal); color: var(--lime); font-family: var(--font-display); font-weight: 800; }
.principle h3 { margin-bottom: 8px; font-size: 1.1875rem; }
.principle p { margin: 0; font-size: 1rem; }
@media (min-width: 1080px) {
  /* a lime line joins the four principles, left to right */
  .principle:not(:last-child)::after { content: ""; position: absolute; top: 47px; left: calc(100% + 2px); width: calc(var(--gap) - 4px); height: 2px; background: var(--lime); }
}
.capability-head { margin-top: clamp(56px, 7vw, 96px); }

.pillars { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.pillar__num { color: var(--charcoal); font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.pillar__icon { width: 40px; height: 40px; }
.pillar { border-top: 4px solid var(--charcoal); }
.pillar:hover { border-top-color: var(--lime); }

.structure { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .structure { grid-template-columns: 1fr 120px 1fr; } }
.structure__item { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--rule-dark); border-radius: var(--radius); }
.structure__item--platform { border-color: var(--lime); }
.structure__name { margin: 0 0 8px; color: var(--white); font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; }
.structure__item--platform .structure__name { color: var(--lime); }
.structure__item p:last-child { margin: 0; }
.structure__link { display: grid; place-items: center; }
.structure__link span { display: block; width: 100%; height: 3px; background: var(--lime); }
@media (max-width: 899px) { .structure__link span { width: 3px; height: 40px; } }
.structure__closing { margin-top: 40px; max-width: 60ch; font-size: var(--fs-lede); }

/* ---- About: leadership (director portraits are real photos: name and title, no illustrative caption) ---- */
.leaders { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .leaders--3 { grid-template-columns: repeat(3, 1fr); }
  .leaders--2 { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; }
  .leaders--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
}
.leader { display: flex; flex-direction: column; align-items: center; padding: clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 32px); border-radius: 20px; background: var(--white); box-shadow: var(--shadow-sm, 0 6px 18px rgba(32, 32, 32, 0.05)); text-align: center; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.leader:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.leader__photo { width: clamp(168px, 17vw, 208px); aspect-ratio: 1; margin-bottom: 24px; padding: 6px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--rule), 0 12px 30px rgba(32, 32, 32, 0.12); transition: box-shadow 0.3s var(--ease); }
.leader:hover .leader__photo { box-shadow: 0 0 0 3px var(--lime), 0 12px 30px rgba(32, 32, 32, 0.14); }
.leader__photo picture { display: block; width: 100%; height: 100%; }
.leader__img, .leader__mono { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.leader__mono { display: grid; place-items: center; background: var(--charcoal); color: var(--lime); font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; }
.leader__name { margin: 0 0 10px; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.leader__role, .profile__role { display: inline-block; margin: 0; padding: 5px 14px; border-radius: 999px; background: var(--charcoal); color: var(--white); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; }
.leader__tagline { margin: 16px 0 0; color: var(--graphite); font-size: 0.9375rem; font-weight: 500; line-height: 1.5; }
.leader__summary { margin: 14px 0 0; color: var(--graphite); font-size: 1rem; line-height: 1.6; }
.leader__more { margin-top: auto; }
.leader__summary + .leader__more, .leader__tagline + .leader__more { margin-top: 24px; }

/* Full profile window (<dialog>, opened by profile.js) */
dialog.profile { width: min(780px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 20px; background: var(--white); color: var(--graphite); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); overflow: auto; overscroll-behavior: contain; }
dialog.profile:focus { outline: none; }   /* focus goes to the close button inside */
dialog.profile::backdrop { background: rgba(32, 32, 32, 0.78); }
html:has(dialog.profile[open]) { overflow: hidden; }
.profile__inner { padding: clamp(24px, 4vw, 48px); text-align: left; }
.profile__close { position: sticky; top: 0; z-index: 1; float: right; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 8px 16px; border-radius: 50%; background: var(--light); color: var(--charcoal); font-size: 1.75rem; line-height: 1; text-decoration: none; }
.profile__close:hover { background: var(--lime); }
.profile__head { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
@media (max-width: 559px) { .profile__head { flex-direction: column; align-items: flex-start; gap: 16px; } }
.profile__photo { flex: none; width: 128px; height: 128px; padding: 4px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px var(--lime); }
.profile__photo picture { display: block; width: 100%; height: 100%; }
.profile__img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile__photo .leader__mono { font-size: 1.75rem; }
.profile__name { margin: 12px 0 6px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.profile__tagline { margin: 0; color: var(--graphite); font-size: 0.9375rem; font-weight: 500; line-height: 1.5; }
.profile__h { margin: 28px 0 8px; color: var(--charcoal); font-size: 1.125rem; }
.profile__body > .profile__h:first-child { margin-top: 0; }
.profile__body p { margin: 0 0 14px; line-height: 1.7; }
.profile__quote { margin: 32px 0; padding: 24px 28px; border-left: 4px solid var(--lime); border-radius: 0 16px 16px 0; background: var(--charcoal); }
.profile__quote p { margin: 0 0 10px; color: var(--white); font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 600; line-height: 1.45; }
.profile__quote footer { color: var(--muted-on-dark); font-size: 0.9375rem; }
.profile__highlights { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .profile__highlights { grid-template-columns: 1fr 1fr; } }
.profile__highlights li { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; background: var(--light); color: var(--charcoal); font-weight: 500; line-height: 1.45; }
.profile__highlights li::before { content: ""; position: absolute; top: 18px; left: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(158, 233, 29, 0.25); }
@media (prefers-reduced-motion: no-preference) {
  dialog.profile[open] { animation: profile-in 0.35s var(--ease); }
  dialog.profile[open]::backdrop { animation: profile-fade 0.3s ease; }
}
@keyframes profile-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes profile-fade { from { opacity: 0; } }
/* Without the script: the "Read full profile" link jumps to the profile, shown in the page */
:root:not(.has-dialog) dialog.profile:target { display: block; position: static; width: auto; max-height: none; margin: var(--gap) 0 0; box-shadow: var(--shadow-lift); }

/* ---- Challenge page ---- */
.pressure-grid { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .pressure-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pressure-grid { grid-template-columns: repeat(4, 1fr); } }
.pressure-card { border-top: 4px solid var(--charcoal); }
.pressure-card:hover { border-top-color: var(--lime); }
.pressure-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.pressure-card__num { color: var(--charcoal); font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.pressure-card h3 { font-size: 1.1875rem; }
.pressure-card .pressure-card__label { margin: 0 0 4px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; }
.opportunity-band { display: grid; gap: 24px 64px; }
@media (min-width: 900px) { .opportunity-band { grid-template-columns: 5fr 7fr; align-items: start; } }
.opportunity-band .lede { margin-bottom: 28px; }

/* ---- Delivery Model: 15-Stage Explorer ---- */
.explorer__phases { display: grid; gap: 8px; margin-bottom: 28px; }
@media (min-width: 640px) { .explorer__phases { grid-template-columns: repeat(5, 1fr); } }
.explorer__phase {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px;
  border: 2px solid var(--rule);
  border-top: 4px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.explorer__phase:hover { border-color: var(--charcoal); }
.explorer__phase[aria-selected="true"] { background: var(--charcoal); border-color: var(--charcoal); border-top-color: var(--lime); }
.explorer__num { color: var(--charcoal); font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.explorer__name { color: var(--charcoal); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.02em; }
.explorer__range { color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); }
.explorer__phase[aria-selected="true"] .explorer__num { color: var(--lime); }
.explorer__phase[aria-selected="true"] .explorer__name { color: var(--white); }
.explorer__phase[aria-selected="true"] .explorer__range { color: var(--muted-on-dark); }

.explorer__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.explorer__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--rule); }
.stage-node { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 6px; transition: opacity 0.35s var(--ease); }
.stage-node__dot { position: relative; z-index: 1; width: 20px; height: 20px; border: 2px solid var(--industrial); border-radius: 50%; background: var(--white); transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease); }
.stage-node__num { color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); }
.stage-node__name { color: var(--charcoal); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; }
.explorer:not([data-active]) .stage-node[data-phase="0"],
.explorer[data-active="0"] .stage-node[data-phase="0"],
.explorer[data-active="1"] .stage-node[data-phase="1"],
.explorer[data-active="2"] .stage-node[data-phase="2"],
.explorer[data-active="3"] .stage-node[data-phase="3"],
.explorer[data-active="4"] .stage-node[data-phase="4"] { --on: 1; }
.stage-node__name { font-weight: calc(400 + var(--on, 0) * 300); }
.stage-node__num { color: color-mix(in srgb, var(--charcoal) calc(var(--on, 0) * 100%), var(--graphite)); }
.stage-node .stage-node__dot { background: color-mix(in srgb, var(--lime) calc(var(--on, 0) * 100%), var(--white)); border-color: color-mix(in srgb, var(--charcoal) calc(var(--on, 0) * 100%), var(--industrial)); transform: scale(calc(1 + var(--on, 0) * 0.15)); }
@media (max-width: 899px) {
  .explorer__rail { grid-template-columns: repeat(5, 1fr); row-gap: 18px; }
  .explorer__rail::before { display: none; }
  .stage-node__name { display: none; }
}
.explorer__panel {
  position: relative;
  display: grid;
  gap: 16px 40px;
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: var(--radius);
  background: var(--charcoal);
  color: var(--text-on-dark);
  overflow: hidden;
}
@media (min-width: 768px) { .explorer__panel { grid-template-columns: auto 1fr; align-items: center; } }
.explorer__big { margin: 0; color: var(--lime); font-family: var(--font-display); font-size: clamp(4.5rem, 3rem + 6vw, 9rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; }
.explorer__panel h3 { color: var(--white); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: 0.02em; }
.explorer__panel h3 span { margin-left: 10px; color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; }
.explorer__stages { display: grid; gap: 0 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .explorer__stages { grid-template-columns: repeat(2, 1fr); } }
.explorer__stages li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule-dark); color: var(--white); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.explorer__stages li span { color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.9; }
.motion .explorer__panel:not([hidden]) { animation: panel-in 0.5s var(--ease) both; }

.deliverables { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .deliverables { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .deliverables { grid-template-columns: repeat(6, 1fr); } }
.deliverables li { display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); color: var(--charcoal); font-family: var(--font-display); font-weight: 700; line-height: 1.3; transition: translate 0.3s var(--ease), border-color 0.3s var(--ease); }
.deliverables li:hover { translate: 0 -4px; border-color: var(--charcoal); }
.statement--page { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- Technology ---- */
.hierarchy-wrap { display: grid; gap: 40px var(--gap); }
@media (min-width: 900px) { .hierarchy-wrap { grid-template-columns: 5fr 7fr; column-gap: clamp(40px, 6vw, 96px); } }
.hierarchy { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hierarchy__level {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 2px 14px;
  margin-left: calc(var(--lvl) * clamp(8px, 2vw, 28px));
  padding: 18px 22px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--charcoal);
  border-radius: var(--radius);
  background: var(--white);
}
.hierarchy__num { grid-row: span 2; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.8; }
.hierarchy__label { color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; }
.hierarchy__name { color: var(--charcoal); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.hierarchy__level.is-platform { border-left-color: var(--lime); }
.hierarchy__level.is-result { background: var(--charcoal); border-color: var(--charcoal); border-left-color: var(--lime); }
.hierarchy__level.is-result .hierarchy__name { color: var(--white); }
.hierarchy__level.is-result .hierarchy__label, .hierarchy__level.is-result .hierarchy__num { color: var(--lime); }

.science__grid { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .science__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .science__grid { grid-template-columns: repeat(5, 1fr); } }
.science__item { position: relative; padding: 28px 24px; border: 1px solid var(--rule-dark); border-top: 3px solid var(--lime); border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); transition: background-color 0.3s var(--ease), translate 0.3s var(--ease); }
.science__item:hover { background: rgba(255, 255, 255, 0.07); translate: 0 -4px; }
.science__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border: 1px solid var(--rule-dark); border-radius: 50%; }
.science__icon .sicon { width: 36px; height: 36px; }
.science__num { margin: 0 0 6px; color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); }
.science__item h3 { color: var(--white); font-size: 1.1875rem; }
.science__label { margin: 0 0 4px; color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; }
.science__item p:last-child { margin: 0; font-size: 1rem; }

.pathway-label { margin: 0 0 12px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.pathway { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.pathway li { position: relative; padding: 8px 14px 8px 36px; border: 1px solid var(--rule); border-radius: 2px; color: var(--charcoal); font-size: var(--fs-small); font-weight: 600; counter-increment: step; }
.pathway li::before { content: counter(step); position: absolute; left: 10px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); color: var(--charcoal); font-family: var(--font-mono); font-size: 0.75rem; }
.pathway li:last-child { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }

/* ---- Measurement page ---- */
.mtable { border-top: 2px solid var(--charcoal); }
.mtable__row { display: grid; gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
@media (min-width: 900px) { .mtable__row { grid-template-columns: repeat(3, 1fr); } }
.mtable__head { padding: 14px 0; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.mtable__row span:first-child { color: var(--charcoal); font-family: var(--font-display); font-weight: 700; }
.mtable__row span:last-child { color: var(--charcoal); font-weight: 600; }
.mtable__row:not(.mtable__head):hover { background: var(--light); box-shadow: -12px 0 0 var(--light), 12px 0 0 var(--light); }
@media (max-width: 899px) {
  .mtable__head { display: none; }
  .mtable__row span::before { content: attr(data-label); display: block; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
}
.chains__label { margin: 0 0 12px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.chains .formula + .chains__label { margin-top: 36px; }
@media (min-width: 1080px) { .formula--3 { grid-template-columns: 1fr auto 1fr auto 1fr; } }
.modes--page { margin-top: 0; }
.calc-teaser {
  display: grid;
  gap: 20px 40px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: var(--radius);
  background: var(--charcoal);
  --focus: var(--lime);
}
@media (min-width: 900px) { .calc-teaser { grid-template-columns: 1fr auto; align-items: center; } }
.calc-teaser__kicker { margin: 0 0 8px; color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.calc-teaser__title { margin: 0; color: var(--white); font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 800; line-height: 1.2; }
.calc-teaser .btn--ghost { border-color: rgba(255, 255, 255, 0.7); color: var(--white); }
.calc-teaser .btn--ghost:hover { background: var(--white); color: var(--charcoal); }
.calc-teaser .btn--primary:hover { background: var(--white); color: var(--charcoal); }

/* ---- Evidence page ---- */
.evidence-notes { display: grid; gap: 40px 64px; }
@media (min-width: 900px) { .evidence-notes { grid-template-columns: 1fr 1fr; } }
.evidence-notes > div { padding-top: 24px; border-top: 3px solid var(--charcoal); }
.evidence-notes__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.discipline__h { color: var(--white); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); margin: 0; }

.pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pipeline::before, .pipeline .pipeline__fill { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 3px; background: var(--rule); }
.pipeline .pipeline__fill { padding: 0; background: var(--lime); transform-origin: 0 50%; transform: scaleX(var(--sp, 1)); }
.pipeline__step { position: relative; display: flex; flex-direction: column; gap: 12px; padding-right: 12px; }
.pipeline__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--charcoal);
  border-radius: 50%;
  background: var(--lime);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-weight: 600;
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.motion .pipeline__step:not(.is-lit) .pipeline__num { background: var(--white); }
.motion .pipeline__step.is-lit .pipeline__num { transform: scale(1.08); }
.pipeline__name { color: var(--charcoal); font-family: var(--font-display); font-weight: 700; line-height: 1.3; }
.pipeline__step:last-child .pipeline__num { background: var(--charcoal); color: var(--lime); }
@media (max-width: 767px) {
  .pipeline { grid-template-columns: 1fr; gap: 16px; }
  .pipeline::before, .pipeline .pipeline__fill { left: 23px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .pipeline .pipeline__fill { transform-origin: 50% 0; transform: scaleY(var(--sp, 1)); }
  .pipeline__step { flex-direction: row; align-items: center; }
}
.governance-note { max-width: 80ch; margin: clamp(40px, 5vw, 56px) 0 0; padding: 20px 24px; border-left: 3px solid var(--charcoal); background: var(--light); font-size: 1rem; }
.library-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: clamp(28px, 4vw, 48px); border: 2px dashed var(--industrial); border-radius: var(--radius); background: var(--white); }
.library-empty p { margin: 0; color: var(--charcoal); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; }
.library-empty__icon { width: 48px; height: 48px; }

.cta-band .eyebrow { color: var(--muted-on-dark); }
.mtable__head span:first-child { font-family: var(--font-mono); font-weight: 500; color: var(--graphite); }

/* ==========================================================================
   13. Products & Industries (Phase 3)
   ========================================================================== */

/* ---- Page hero additions ---- */
.page-hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 24px; }
.page-hero__chip-label { color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-hero--sig .page-hero__frame { border-top: 4px solid var(--sig); }

/* ---- Product facts ---- */
.pfacts { display: grid; gap: var(--gap); margin: 0; }
@media (min-width: 900px) { .pfacts { grid-template-columns: repeat(3, 1fr); } }
.pfacts__item {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--charcoal);
  border-radius: var(--radius);
  background: var(--white);
  transition: translate 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pfacts__item:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); border-top-color: var(--lime); }
.pfacts dt { display: flex; flex-direction: column; gap: 18px; margin-bottom: 12px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.pfacts dd { margin: 0; color: var(--charcoal); font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); font-weight: 700; line-height: 1.4; }
.pfacts__icon { width: 48px; height: 48px; padding: 9px; border-radius: 50%; background: var(--charcoal); }
.pfacts__item--value { background: var(--charcoal); border-color: var(--charcoal); border-top-color: var(--lime); }
.pfacts__item--value dt { color: var(--muted-on-dark); }
.pfacts__item--value dd { color: var(--white); }
.pfacts__item--value .pfacts__icon { background: rgba(255, 255, 255, 0.08); }

/* ---- Steps rail (Product Selection Pathway) ---- */
.steps-rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.steps-rail::before, .steps-rail .steps-rail__fill { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 3px; background: var(--rule); }
.steps-rail .steps-rail__fill { padding: 0; background: var(--lime); transform-origin: 0 50%; transform: scaleX(var(--sp, 1)); }
.steps-rail__step { position: relative; display: flex; flex-direction: column; gap: 14px; padding-right: 16px; }
.steps-rail__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 3px solid var(--charcoal);
  border-radius: 50%;
  background: var(--lime);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-weight: 600;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.motion .steps-rail__step:not(.is-lit) .steps-rail__num { background: var(--white); }
.motion .steps-rail__step.is-lit .steps-rail__num { transform: scale(1.08); }
.steps-rail__name { color: var(--charcoal); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.steps-rail__step:last-child .steps-rail__num { background: var(--charcoal); color: var(--lime); }
.steps-rail--dark::before { background: var(--rule-dark); }
.steps-rail--dark .steps-rail__num { border-color: var(--lime); }
.motion .steps-rail--dark .steps-rail__step:not(.is-lit) .steps-rail__num { background: var(--charcoal); color: var(--white); }
.steps-rail--dark .steps-rail__step:last-child .steps-rail__num { background: var(--white); border-color: var(--white); color: var(--charcoal); }
.steps-rail--dark .steps-rail__name { color: var(--white); }
@media (max-width: 767px) {
  .steps-rail { grid-template-columns: 1fr; gap: 16px; }
  .steps-rail::before, .steps-rail .steps-rail__fill { left: 27px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .steps-rail .steps-rail__fill { transform-origin: 50% 0; transform: scaleY(var(--sp, 1)); }
  .steps-rail__step { flex-direction: row; align-items: center; }
}

/* ---- Route tabs (For Industry / For Vehicle Owners) ---- */
.route-tabs__list { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(28px, 4vw, 48px); padding: 6px; border: 1px solid var(--rule-dark); border-radius: calc(var(--radius) + 4px); }
.route-tab {
  min-height: 48px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.route-tab:hover { background: rgba(255, 255, 255, 0.1); }
.route-tab[aria-selected="true"] { background: var(--lime); color: var(--charcoal); }
.route-panel { display: grid; gap: 32px var(--gap); align-items: start; }
@media (min-width: 900px) { .route-panel { grid-template-columns: 7fr 5fr; column-gap: clamp(40px, 6vw, 96px); } }
.motion .route-tabs .route-panel:not([hidden]) { animation: panel-in 0.5s var(--ease) both; }
.route-panel__title { color: var(--white); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); max-width: 22ch; }
.route-panel .lede { max-width: 56ch; }
.route-panel__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.route-panel .qual { margin-top: 0; }
.route-panel__card { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--rule-dark); border-top: 4px solid var(--lime); border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); }
.route-panel__card p { margin: 0; font-size: 1rem; }
.route-panel__card .link-arrow { align-self: flex-start; }
.route-panel__kicker { color: var(--lime); font-family: var(--font-display); font-size: var(--fs-h3) !important; font-weight: 800; line-height: 1.2; }

/* ---- Sector grids with fewer cards ---- */
@media (min-width: 1080px) {
  .sectors-grid--1 { grid-template-columns: minmax(0, 560px); }
  .sectors-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Product and sector strips (the other pages in the section) ---- */
.product-strip, .sector-strip { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .product-strip { grid-template-columns: repeat(2, 1fr); } .sector-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .product-strip { grid-template-columns: repeat(4, 1fr); } .sector-strip { grid-template-columns: repeat(6, 1fr); } }
.product-strip__item, .sector-strip__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  height: 100%;
  min-height: 64px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  text-decoration: none;
  transition: translate 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
a.product-strip__item:hover, a.sector-strip__item:hover { translate: 0 -3px; border-color: var(--charcoal); box-shadow: var(--shadow-lift); }
.product-strip__name, .sector-strip__name { flex: 1; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
.product-strip__item .icon { margin-left: auto; }
.product-strip__item.is-current, .sector-strip__item.is-current { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.product-strip__item.is-current .chip { background: rgba(255, 255, 255, 0.08); border-color: var(--rule-dark); color: var(--white); }
.sector-strip__item { flex-direction: column; align-items: flex-start; border-top: 4px solid var(--sig); }
.sector-strip__item.is-current { border-top-color: var(--sig); }
.sector-strip__item .sicon { width: 28px; height: 28px; }
.product-strip__all { margin: 28px 0 0; }

/* ---- Sector page: challenge statement ---- */
.sector-challenge { display: grid; gap: 32px var(--gap); align-items: center; }
@media (min-width: 900px) { .sector-challenge { grid-template-columns: 1fr auto; column-gap: clamp(40px, 6vw, 120px); } }
.sector-challenge__text { max-width: 26ch; margin: 0; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.15; }
.sector-challenge__icon { display: grid; place-items: center; width: clamp(120px, 16vw, 200px); aspect-ratio: 1; border: 1px solid var(--rule); border-top: 4px solid var(--sig); border-radius: 50%; }
.sector-challenge__icon .sicon { width: 50%; height: 50%; }

/* ---- Sector page: 3-step mini rail ---- */
.mini-rail { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.mini-rail::before, .mini-rail .mini-rail__fill { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rule); }
.mini-rail .mini-rail__fill { z-index: 1; padding: 0; background: var(--lime); transform-origin: 0 50%; transform: scaleX(var(--sp, 1)); }
.mini-rail__step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px 24px 28px; border-radius: 0 0 var(--radius) var(--radius); background: var(--white); }
.mini-rail__num { color: var(--charcoal); font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; transition: color 0.4s var(--ease); }
.mini-rail__name { color: var(--charcoal); font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); font-weight: 700; line-height: 1.3; }
.mini-rail__step:last-child { background: var(--charcoal); }
.mini-rail__step:last-child .mini-rail__num { color: var(--lime); }
.mini-rail__step:last-child .mini-rail__name { color: var(--white); }
.motion .mini-rail__step:not(:last-child):not(.is-lit) .mini-rail__num { color: var(--industrial); }
@media (max-width: 767px) {
  .mini-rail { grid-template-columns: 1fr; gap: 12px; }
  .mini-rail::before, .mini-rail .mini-rail__fill { right: auto; bottom: 0; width: 4px; height: auto; }
  .mini-rail .mini-rail__fill { transform-origin: 50% 0; transform: scaleY(var(--sp, 1)); }
  .mini-rail__step { padding: 20px 20px 20px 28px; border-radius: 0 var(--radius) var(--radius) 0; }
}

/* ---- Sector page: what we measure ---- */
.measure-tiles { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .measure-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .measure-tiles--3 { grid-template-columns: repeat(3, 1fr); }
  .measure-tiles--4 { grid-template-columns: repeat(4, 1fr); }
}
.measure-tiles.measure-tiles--1 { grid-template-columns: 1fr; }
.measure-tile {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--light);
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  transition: translate 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.measure-tile:hover { translate: 0 -4px; background: var(--white); box-shadow: var(--shadow-lift); }
.measure-tile__mark { width: 36px; height: 4px; background: var(--sig); transition: width 0.5s var(--ease); }
.measure-tile:hover .measure-tile__mark { width: 64px; }
.measure-tiles--1 .measure-tile { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }

/* ---- Sector page: value and product band ---- */
.value-band { display: grid; gap: 40px var(--gap); }
@media (min-width: 900px) { .value-band { grid-template-columns: 7fr 5fr; column-gap: clamp(40px, 6vw, 96px); } }
.value-band__text { margin: 0 0 18px; color: var(--white); font-size: clamp(1.625rem, 1.1rem + 2vw, 2.75rem); line-height: 1.2; }
.value-band__note { margin: 0; color: var(--text-on-dark); }
.value-band__item--product { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--rule-dark); border-top: 4px solid var(--sig); border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); }
.value-band__product { margin: 0 0 16px; color: var(--white); font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); font-weight: 800; line-height: 1.3; }
.section--dark .value-band__product a { color: var(--lime); text-decoration-color: rgba(158, 233, 29, 0.5); }
.section--dark .value-band__product a:hover { text-decoration-color: var(--lime); }
.value-band__qual { display: block; margin-top: 6px; color: var(--muted-on-dark); font-family: var(--font-body); font-size: 1rem; font-weight: 500; }

/* ---- Sector page: calculator ---- */
.calc.calc--sector { padding-top: var(--section-y); }
.calc-handover-note { margin: 12px 0 0; color: var(--muted-on-dark); font-size: var(--fs-small); }

/* ---- Products: comparison table ---- */
.compare__table tbody th { width: 22%; }
.compare__table tbody th a { display: block; margin-bottom: 10px; color: var(--charcoal); text-decoration: none; }
.compare__table tbody th a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; }
.compare__table td:last-child { color: var(--charcoal); font-weight: 600; }
@media (max-width: 639px) {
  .compare__table td::before { content: attr(data-label); display: block; margin: 12px 0 2px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; }
}

/* ---- Products: sector × product matrix ---- */
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { padding: 16px 12px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.matrix thead th { border-bottom: 2px solid var(--charcoal); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
.matrix thead a { color: var(--charcoal); text-decoration: none; }
.matrix thead a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; }
.matrix tbody th { padding-left: 0; text-align: left; }
.matrix tbody th a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--charcoal); font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.matrix tbody th a:hover span { text-decoration: underline; text-decoration-color: var(--charcoal); text-decoration-thickness: 2px; }
.matrix tbody th .sicon { width: 28px; height: 28px; flex: none; }
.matrix tbody tr { transition: background-color 0.25s var(--ease); }
.matrix tbody tr:hover { background: var(--light); }
.matrix__dot { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--charcoal); border-radius: 50%; background: var(--lime); vertical-align: middle; }
.motion .matrix-wrap .matrix__dot { transition: scale 0.5s var(--ease) 0.3s; }
.motion .matrix-wrap:not(.is-in) .matrix__dot { scale: 0; }
.matrix__qual { display: block; margin-top: 6px; color: var(--graphite); font-size: var(--fs-small); line-height: 1.35; }
.matrix__note { color: var(--graphite); font-size: 1rem; font-style: italic; }
@media (max-width: 767px) {
  .matrix thead { display: none; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; }
  .matrix tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .matrix th, .matrix td { padding: 0; border: 0; text-align: left; }
  .matrix td:not(.is-on):not(.matrix__note) { display: none; }
  .matrix td.is-on { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0 40px; }
  .matrix td.is-on::after { content: attr(data-label); order: -1; color: var(--charcoal); font-weight: 600; }
  .matrix td.is-on .matrix__dot { order: -2; width: 14px; height: 14px; border-width: 2px; }
  .matrix td.is-on .matrix__qual { width: 100%; margin: 0; }
  .matrix__note { margin: 6px 0 0 40px; }
}

/* ---- Products: vehicle-owner bridge ---- */
.owner-bridge__inner { display: grid; gap: 24px var(--gap); align-items: end; }
@media (min-width: 900px) { .owner-bridge__inner { grid-template-columns: 7fr 5fr; } }
.owner-bridge h2 { margin: 0; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); max-width: 24ch; }
.owner-bridge__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .owner-bridge__actions { justify-content: flex-end; } }

/* ---- Industries: sector lens ---- */
.slens__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: var(--gap); }
@media (min-width: 640px) { .slens__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .slens__list { grid-template-columns: repeat(6, 1fr); } }
.slens__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 16px;
  border: 2px solid var(--rule);
  border-top: 4px solid var(--sig);
  border-radius: var(--radius);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), translate 0.3s var(--ease);
}
.slens__tab:hover { translate: 0 -3px; border-color: var(--charcoal); border-top-color: var(--sig); }
.slens__tab[aria-selected="true"] { background: var(--charcoal); border-color: var(--charcoal); border-top-color: var(--sig); }
.slens__tab .sicon { width: 30px; height: 30px; }
.slens__name { color: var(--charcoal); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; }
.slens__tab[aria-selected="true"] .slens__name { color: var(--white); }
.slens__panel { padding: clamp(24px, 3.5vw, 44px); border-top: 4px solid var(--sig); border-radius: var(--radius); background: var(--white); }
.motion .slens__panel:not([hidden]) { animation: panel-in 0.45s var(--ease) both; }
.slens__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.slens__head h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.slens__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.slens__rows { margin: 0; border-top: 2px solid var(--charcoal); }
.slens__row { display: grid; gap: 4px 32px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) { .slens__row { grid-template-columns: 240px 1fr; } }
.slens__row dt { color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.8; }
.slens__row dd { margin: 0; color: var(--charcoal); font-size: 1rem; }
.slens__row:last-child dd { font-family: var(--font-display); font-weight: 700; }
.slens__more { margin: 24px 0 0; }

/* Reduced motion: no movement on hover */
@media (prefers-reduced-motion: reduce) {
  .pfacts__item:hover, .measure-tile:hover, .slens__tab:hover, a.product-strip__item:hover, a.sector-strip__item:hover { translate: none; }
}

/* ==========================================================================
   14. Animated line scenes (shown while a photo is missing)
   Sector colour for the main object, lime for motion and measurement.
   ========================================================================== */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--sig, var(--lime)); }
.scene * { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.scene text { fill: rgba(255, 255, 255, 0.75); stroke: none; font-family: var(--font-mono); font-size: 7px; text-anchor: middle; }

/* Background layers */
.scene__layer--far path { stroke: rgba(158, 233, 29, 0.28); stroke-width: 1.5; }
.scene__layer--mid path, .scene__layer--static path { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
.scene__edge { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.5; }
.scene__dash { stroke: var(--lime); stroke-width: 2.5; stroke-dasharray: 22 18; }
.scene__gravel { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; stroke-dasharray: 2 14; }
.scene__layer--posts path, .scene__layer--posts rect { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; }
.scene__layer--ruler path { stroke: var(--lime); stroke-width: 1.5; opacity: 0.8; }
.scene__speed path { stroke: var(--lime); stroke-width: 2; opacity: 0; }

/* Main object in the sector colour, solid so things can pass behind it */
.scene__truck, .scene__obj { color: var(--sig, var(--lime)); }
.scene__truck :is(path, rect, circle), .scene__obj :is(path, rect, circle) { fill: var(--charcoal); stroke: currentColor; stroke-width: 2.25; }
.scene__obj .scene__open, .scene__obj .scene__load { fill: none; }
.scene__load { stroke: rgba(255, 255, 255, 0.6) !important; stroke-width: 1.75 !important; }
.scene__beam { fill: rgba(158, 233, 29, 0.1) !important; stroke: none !important; }
.scene__wheel, .scene__fan { transform-box: fill-box; transform-origin: center; }
.scene__fan { transform-box: view-box; }

/* Route with pins (fleet, marine) */
.scene__route-base { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; stroke-dasharray: 3 7; }
.scene__route-run { stroke: var(--lime); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.scene__pin { fill: var(--charcoal); stroke: currentColor; stroke-width: 2.5; }

/* Clocks, meters and gauges */
.scene__clock circle, .scene__meter circle, .scene__meter path, .scene__clock path { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; }
.scene__clock .scene__hand, .scene__meter .scene__needle { stroke: var(--lime); stroke-width: 2.25; transform-box: view-box; }
.scene__hub { fill: var(--lime) !important; stroke: none !important; }

/* Power: cable with flowing pulses, status lights */
.scene__cable { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.75; }
.scene__pulse { stroke: var(--lime); stroke-width: 2.5; stroke-dasharray: 6 18; }
.scene__obj .scene__led { fill: var(--lime); stroke: none; }

/* Marine: waves */
.scene__wave path { stroke-width: 1.75; }
.scene__wave--back path { stroke: rgba(255, 255, 255, 0.25); }
.scene__wave--mid path { stroke: currentColor; }
.scene__wave--front path { stroke: var(--lime); opacity: 0.8; }

/* Manufacturing: belt, product units, output tally */
.scene__layer--belt rect { fill: var(--charcoal); stroke: currentColor; stroke-width: 2; }
.scene__conveyor path, .scene__conveyor circle { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.75; }
.scene__tally rect { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.5; }
.scene__tally path { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; }
html:not(.motion) .scene__tally rect { fill: var(--lime); stroke: var(--lime); }

/* Process heat: flame, shimmer, roller table, product */
.scene__flame-outer { fill: currentColor; fill-opacity: 0.16; stroke: currentColor; stroke-width: 2.25; }
.scene__flame-inner { fill: rgba(255, 255, 255, 0.14); stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.75; }
.scene__shimmer path { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; opacity: 0; }
.scene__table path, .scene__table circle { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.5; }
.scene__layer--rev rect { fill: var(--charcoal); stroke: currentColor; stroke-width: 2; }

.tech-panel:has(.scene) .tech-panel__mark { display: none; }

/* ---- Motion: only with JavaScript on and reduced motion off ---- */
.motion .scene__layer--far { animation: scene-pan 40s linear infinite; }
.motion .scene__layer--mid { animation: scene-pan 16s linear infinite; }
.motion .scene__layer--posts, .motion .scene__layer--ruler, .motion .scene__layer--belt { animation: scene-pan 8s linear infinite; }
.motion .scene__layer--rev { animation: scene-pan-rev 10s linear infinite; }
.motion .scene__dash { animation: scene-dash 0.8s linear infinite; }
.motion .scene__gravel { animation: scene-gravel 0.32s linear infinite; }
.motion .scene__wheel { animation: scene-spin 0.9s linear infinite; }
.motion .scene__wheel--slow { animation-duration: 1.6s; }
.motion .scene__body { animation: scene-bump 0.45s ease-in-out infinite alternate; }
.motion .scene__body--hum { animation: scene-hum 0.12s linear infinite alternate; }
.motion .scene__speed path { animation: scene-speed 1.4s linear infinite; }
.motion .scene__speed path:nth-child(2) { animation-delay: 0.45s; }
.motion .scene__speed path:nth-child(3) { animation-delay: 0.9s; }
.motion .scene__beam { animation: scene-beam 3.2s ease-in-out infinite; }
.motion .scene__route-run { animation: scene-route 8s var(--ease) infinite; }
.motion .scene__pin { animation: scene-pin 8s linear infinite; }
.motion .scene__pin--2 { animation-name: scene-pin-2; }
.motion .scene__pin--3 { animation-name: scene-pin-3; }
.motion .scene__hand { animation: scene-spin 4s linear infinite; }
.motion .scene__hand--slow { animation-duration: 48s; }
.motion .scene__needle { animation: scene-needle 5s ease-in-out infinite; }
.motion .scene__needle--heat { animation-name: scene-needle-heat; animation-duration: 3.4s; }
.motion .scene__fan { animation: scene-spin 0.7s linear infinite; }
.motion .scene__pulse { animation: scene-pulse 1.2s linear infinite; }
.motion .scene__led { animation: scene-led 1.8s steps(1) infinite; }
.motion .scene__led--2 { animation-delay: 0.6s; }
.motion .scene__led--3 { animation-delay: 1.2s; }
.motion .scene__dust circle { animation: scene-dust 1.3s ease-out infinite; }
.motion .scene__dust circle:nth-child(2) { animation-delay: 0.45s; }
.motion .scene__dust circle:nth-child(3) { animation-delay: 0.9s; }
.motion .scene__bob { animation: scene-bob 4.5s ease-in-out infinite; }
.motion .scene__wave--back { animation: scene-pan 14s linear infinite; }
.motion .scene__wave--mid { animation: scene-pan 9s linear infinite; }
.motion .scene__wave--front { animation: scene-pan 6s linear infinite; }
.motion .scene__press { animation: scene-press 2s var(--ease) infinite; }
.motion .scene__tick { animation: scene-tick 10s steps(1) infinite; }
.motion .scene__tick--2 { animation-name: scene-tick-2; }
.motion .scene__tick--3 { animation-name: scene-tick-3; }
.motion .scene__tick--4 { animation-name: scene-tick-4; }
.motion .scene__tick--5 { animation-name: scene-tick-5; }
.motion .scene__flame { animation: scene-flame 0.35s ease-in-out infinite alternate; }
.motion .scene__flame-inner { animation: scene-flicker 0.22s ease-in-out infinite alternate; }
.motion .scene__shimmer path { animation: scene-rise 2.6s ease-out infinite; }
.motion .scene__shimmer path:nth-child(2) { animation-delay: 0.85s; }
.motion .scene__shimmer path:nth-child(3) { animation-delay: 1.7s; }
[data-scene].is-paused .scene *, [data-scene].is-offscreen .scene *,
.slide:not(.is-active) .scene *, .hero.is-paused .scene *, .hero.is-stopped .scene * { animation-play-state: paused !important; }

@keyframes scene-pan { to { transform: translateX(-400px); } }
@keyframes scene-pan-rev { from { transform: translateX(0); } to { transform: translateX(400px); } }
@keyframes scene-dash { to { stroke-dashoffset: 40; } }
@keyframes scene-gravel { to { stroke-dashoffset: 16; } }
@keyframes scene-spin { to { transform: rotate(360deg); } }
@keyframes scene-bump { to { transform: translateY(-1.2px); } }
@keyframes scene-hum { from { transform: translate(-0.4px, 0); } to { transform: translate(0.4px, -0.3px); } }
@keyframes scene-speed { 0% { opacity: 0; transform: translateX(10px); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(-60px); } }
@keyframes scene-beam { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes scene-route { 0% { stroke-dashoffset: 1; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes scene-pin { 0%, 90% { fill: currentColor; } 100% { fill: var(--charcoal); } }
@keyframes scene-pin-2 { 0%, 42% { fill: var(--charcoal); } 46%, 90% { fill: currentColor; } 100% { fill: var(--charcoal); } }
@keyframes scene-pin-3 { 0%, 76% { fill: var(--charcoal); } 80%, 90% { fill: currentColor; } 100% { fill: var(--charcoal); } }
@keyframes scene-needle { 0%, 100% { transform: rotate(-50deg); } 50% { transform: rotate(55deg); } }
@keyframes scene-needle-heat { 0%, 100% { transform: rotate(18deg); } 30% { transform: rotate(30deg); } 60% { transform: rotate(12deg); } }
@keyframes scene-pulse { to { stroke-dashoffset: -24; } }
@keyframes scene-led { 0% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes scene-dust { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 25% { opacity: 0.6; } 100% { opacity: 0; transform: translate(-36px, -22px) scale(1.6); } }
@keyframes scene-bob { 0%, 100% { transform: translateY(0) rotate(-0.8deg); } 50% { transform: translateY(-4px) rotate(0.8deg); } }
@keyframes scene-press { 0%, 100% { transform: translateY(44px); } 14%, 86% { transform: translateY(0); } }
@keyframes scene-tick { 0%, 100% { fill: var(--lime); stroke: var(--lime); } 96% { fill: none; stroke: rgba(255, 255, 255, 0.45); } }
@keyframes scene-tick-2 { 0%, 19% { fill: none; } 20%, 95% { fill: var(--lime); stroke: var(--lime); } 96%, 100% { fill: none; } }
@keyframes scene-tick-3 { 0%, 39% { fill: none; } 40%, 95% { fill: var(--lime); stroke: var(--lime); } 96%, 100% { fill: none; } }
@keyframes scene-tick-4 { 0%, 59% { fill: none; } 60%, 95% { fill: var(--lime); stroke: var(--lime); } 96%, 100% { fill: none; } }
@keyframes scene-tick-5 { 0%, 79% { fill: none; } 80%, 95% { fill: var(--lime); stroke: var(--lime); } 96%, 100% { fill: none; } }
@keyframes scene-flame { from { transform: scale(0.94, 0.9); } to { transform: scale(1.06, 1.08) skewY(-2deg); } }
@keyframes scene-flicker { from { opacity: 0.7; } to { opacity: 1; } }
@keyframes scene-rise { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }

/* Pause / play button (WCAG 2.2.2) */
.scene-toggle {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(32, 32, 32, 0.7);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.motion .scene-toggle { display: grid; }
.scene-toggle:hover { background: var(--charcoal); border-color: var(--lime); }
.scene-toggle__icon { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.scene-toggle[aria-pressed="true"] .scene-toggle__icon { width: 0; height: 0; margin-left: 4px; border: 0; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.page-hero__frame { position: relative; }

/* Hero slider: scene sits on the right (top half on small screens), under the text scrim */
.slide__media .scene { left: auto; right: 0; width: 62%; opacity: 0.9; }
@media (max-width: 1079px) { .slide__media .scene { width: 100%; height: 50%; bottom: auto; opacity: 0.28; } }
.slide__media :is(.scene__route, .scene__clock, .scene__meter, .scene__tally) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scene, .scene * { animation: none !important; }
  .scene-toggle { display: none !important; }
  .scene__speed path, .scene__shimmer path { opacity: 0.5; }
  .scene__tally rect { fill: var(--lime); stroke: var(--lime); }
}

/* ==========================================================================
   15. Motion polish (only with the "motion" class: JavaScript on, reduced motion off)
   ========================================================================== */

/* Buttons: a solid fill slides across on hover instead of an instant colour swap */
.motion .btn { position: relative; isolation: isolate; overflow: hidden; }
.motion .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sweep, var(--charcoal));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.38s var(--ease);
}
.motion .btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.motion .btn.btn--primary:hover { background: var(--lime); }
.motion .btn.btn--ghost:hover { background: transparent; }
.motion :is(.section--dark, .hero__stage, .cta-band, .calc-results, .calc-teaser) .btn { --sweep: var(--white); }
.motion .btn[disabled]::before { display: none; }

/* Page hero: unit chips and buttons arrive one after another */
.motion .page-hero__chips.is-in > *, .motion .page-hero__actions.is-in > * { animation: chip-in 0.55s var(--ease) both; }
.motion .page-hero__chips.is-in > :nth-child(2), .motion .page-hero__actions.is-in > :nth-child(2) { animation-delay: 0.12s; }
.motion .page-hero__chips.is-in > :nth-child(3) { animation-delay: 0.24s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Scroll-lit steps lift slightly as they light up */
.motion .mini-rail__step { transition: translate 0.45s var(--ease); }
.motion .mini-rail__step.is-lit { translate: 0 -4px; }

@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
  .mini-rail__step.is-lit { translate: none; }
}

/* ==========================================================================
   16. Enquiry forms, contact, Business-Value Assessment, thank-you (Phase 4)
   ========================================================================== */

.enquiry { display: grid; gap: 28px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); }
.form-grid { display: grid; gap: 22px var(--gap); }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-field--wide { grid-column: 1 / -1; } }
.form-field { min-width: 0; }
.form-field[hidden] { display: none; }
.form-field > label, .form-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.form-req { color: var(--graphite); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; }
.form-field input, .form-field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(158, 233, 29, 0.55); }
.form-field .calc-input { min-height: 52px; }
.form-field .calc-input select { height: 48px; }
.form-field [aria-invalid="true"], .form-field .calc-input:has([aria-invalid="true"]) { border-color: var(--error); }
.form-error { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; color: var(--error); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
.form-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: var(--white); font-size: 0.75rem; font-weight: 800; }
.form-help { margin: 0; color: var(--graphite); font-size: var(--fs-small); }

.form-summary { padding: 16px 20px; border-left: 4px solid var(--error); background: #FDF0EF; color: var(--charcoal); }
.form-summary:focus { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.form-summary__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; }
.form-summary ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-small); }
.form-summary a { color: var(--error); font-weight: 600; }

/* Hidden trap field for bots: off screen, not announced */
.form-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Route picker */
.route-pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.route-pick__grid { display: grid; gap: 10px; }
@media (min-width: 560px) { .route-pick__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .route-pick__grid { grid-template-columns: repeat(3, 1fr); } }
.route-pick__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.route-pick__opt:hover { border-color: var(--charcoal); }
.route-pick__opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--charcoal); }
.route-pick__opt:has(input:checked) { border-color: var(--charcoal); background: var(--charcoal); }
.route-pick__opt:has(input:checked) .route-pick__name { color: var(--white); }
.route-pick__opt:has(input:checked) input { accent-color: var(--lime); }
.route-pick__opt:has(input:focus-visible) { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.route-pick__name { color: var(--charcoal); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
.route-pick[aria-invalid="true"] .route-pick__opt { border-color: var(--error); }

/* Checkboxes */
.form-check { display: flex; align-items: flex-start; gap: 12px; color: var(--charcoal); font-size: 1rem; line-height: 1.5; cursor: pointer; }
.form-check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--charcoal); }
.form-estimate { display: grid; gap: 10px; padding: 18px 20px; border: 2px dashed var(--charcoal); border-radius: var(--radius); background: var(--light); }
.form-estimate[hidden] { display: none; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.form-actions .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

/* Contact page */
.start-routes { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .start-routes { grid-template-columns: repeat(3, 1fr); } }
.start-route { border-top: 4px solid var(--charcoal); }
.start-route:hover { border-top-color: var(--lime); }
.start-route__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.start-route__num { color: var(--charcoal); font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.start-route__icon { width: 36px; height: 36px; }

.contact-grid { display: grid; gap: 40px var(--gap); align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(32px, 4vw, 64px); } }
.contact-card { padding: clamp(24px, 3vw, 32px); border-top: 4px solid var(--lime); border-radius: var(--radius); background: var(--charcoal); color: var(--text-on-dark); --focus: var(--lime); }
@media (min-width: 1000px) { .contact-card { position: sticky; top: calc(var(--header-h) + 24px); } }
.contact-card a { color: var(--white); }
.contact-card address { margin: 0 0 12px; font-style: normal; line-height: 1.6; }
.contact-card strong { color: var(--white); }
.contact-card p { font-size: 1rem; }
.contact-card .link-arrow { color: var(--white); }
.contact-card__title { margin: 0 0 16px; color: var(--white); font-size: 1.25rem; }
.contact-card__label { margin: 22px 0 8px; color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.contact-card__list li + li { margin-top: 0; }
.contact-card__list a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-card .btn--ghost { border-color: rgba(255, 255, 255, 0.7); color: var(--white); }

/* Thank-you page */
.thanks { padding-block: clamp(72px, 10vw, 140px); }
.thanks__inner { max-width: 60rem; }
.thanks h1 { color: var(--white); font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); }
.thanks__mark { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 28px; border: 1px solid var(--rule-dark); border-radius: 50%; }
.thanks__mark .sicon { width: 48px; height: 48px; }
.thanks .lede a { color: var(--lime); }
.thanks__closing { margin: 28px 0 0; color: var(--lime); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; }
.thanks__next-title { font-size: var(--fs-h3); margin-bottom: 20px; }
@media (min-width: 1080px) { .thanks__links { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   17. Vehicle owners, Mileage Log, FAQ, Glossary, Insights, Legal (Phase 5)
   ========================================================================== */

/* Text pages: simple dark top band and readable text column */
.text-hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 88px); background: var(--charcoal); color: var(--text-on-dark); --focus: var(--lime); }
.text-hero h1 { max-width: 22ch; color: var(--white); font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4rem); }
.text-hero__lede { max-width: 60ch; margin: 0; color: var(--text-on-dark); }
.prose-wrap { max-width: calc(52rem + 2 * var(--gutter)); }
.prose { font-size: var(--fs-body); }
.prose h2 { margin: 2.2em 0 0.6em; font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); }
.prose h2:first-of-type { margin-top: 0.8em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
.prose__updated { color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); }
.content-gap { padding: 2px 6px; border: 1px dashed var(--charcoal); background: var(--light); color: var(--charcoal); font-family: var(--font-mono); font-size: var(--fs-small); }
.legal-table { margin: 8px 0 32px; font-size: 0.9375rem; }
.legal-table tbody th { width: auto; }
.legal-table code { font-size: 0.875rem; }
@media (max-width: 639px) { .legal-table td::before { content: attr(data-label); display: block; margin-top: 8px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; } }
.disclaimer__group + .disclaimer__group { margin-top: clamp(32px, 4vw, 48px); }
.disclaimer__group h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.disclaimer__group .qual { margin-top: 14px; }
.disclaimer__link { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; }
.staging-note[role="note"] { margin: 0; }

/* FAQ accordion */
.faq { border-top: 2px solid var(--charcoal); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-height: 56px;
  padding: 22px 44px 22px 0;
  position: relative;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; color: var(--charcoal); font-family: var(--font-mono); font-size: 1.5rem; transition: rotate 0.3s var(--ease); }
.faq__item[open] .faq__q::after { rotate: 45deg; }
.faq__num { flex: none; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; }
.faq__a { padding: 0 0 24px 40px; max-width: 60ch; }
.faq__a p:last-child { margin-bottom: 0; }
.motion .faq__item[open] .faq__a { animation: panel-in 0.4s var(--ease) both; }

/* Glossary */
.glossary { margin: 0; border-top: 2px solid var(--charcoal); }
.glossary__item { display: grid; gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 24px); }
@media (min-width: 768px) { .glossary__item { grid-template-columns: 16rem 1fr; } }
.glossary dt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.glossary__long { color: var(--graphite); font-size: var(--fs-small); }
.glossary dd { margin: 0; color: var(--charcoal); }

/* Vehicle owners: product chooser */
.chooser__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--gap); }
.chooser__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 18px;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), translate 0.3s var(--ease);
}
.chooser__tab .sicon { width: 34px; height: 34px; color: var(--charcoal); }
.chooser__tab:hover { translate: 0 -3px; border-color: var(--charcoal); }
.chooser__tab[aria-selected="true"] { background: var(--charcoal); border-color: var(--charcoal); }
.chooser__tab[aria-selected="true"] .sicon { color: var(--lime); }
.chooser__fuel { color: var(--charcoal); font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 800; }
.chooser__tab[aria-selected="true"] .chooser__fuel { color: var(--white); }
.chooser__panel { display: grid; gap: 24px 48px; padding: clamp(24px, 3.5vw, 44px); border-top: 4px solid var(--lime); border-radius: var(--radius); background: var(--light); }
@media (min-width: 900px) { .chooser__panel { grid-template-columns: 1fr auto; align-items: end; } }
.motion .chooser__panel:not([hidden]) { animation: panel-in 0.45s var(--ease) both; }
.chooser__arrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; }
.chooser__name { margin: 0 0 18px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
.chooser__context { margin: 0; max-width: 52ch; color: var(--charcoal); font-size: var(--fs-lede); }
.chooser__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.owner-log { display: grid; gap: 40px var(--gap); align-items: center; }
@media (min-width: 900px) { .owner-log { grid-template-columns: 6fr 5fr; column-gap: clamp(40px, 6vw, 96px); } }
.owner-log__note { color: var(--muted-on-dark); font-size: var(--fs-small); }
.owner-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.owner-steps li { display: flex; gap: 18px; align-items: baseline; padding: 20px 22px; border: 1px solid var(--rule-dark); border-left: 3px solid var(--lime); border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); color: var(--white); font-size: 1rem; }
.owner-steps__num { flex: none; color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); }

/* Mileage Baseline Log */
.mlog-section { padding-top: clamp(40px, 5vw, 64px); }
.mlog__privacy { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--gap); padding: 14px 18px; border-left: 3px solid var(--lime); background: var(--light); color: var(--charcoal); font-weight: 600; }
.mlog__privacy .sicon { width: 26px; height: 26px; }
.mlog__warn { margin: 0 0 var(--gap); text-align: left; }
.mlog__nojs { padding: 16px 20px; border: 2px dashed var(--charcoal); }
.mlog[hidden] { display: none; }
.mlog__grid { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 980px) { .mlog__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(var(--gap) * 1.5); } }
.mlog__h { margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }
.mlog__h3 { margin: 0 0 8px; font-size: 1.125rem; }
.mlog__full { display: flex; align-items: flex-end; padding-bottom: 12px; }
.mlog__result .calc-label { margin-bottom: 0; }
.mlog__history { margin-top: clamp(32px, 4vw, 56px); }
.mlog__history-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.mlog__tools { display: flex; flex-wrap: wrap; gap: 10px; }
.mlog__tools .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.mlog__empty { padding: 24px; border: 2px dashed var(--rule); border-radius: var(--radius); color: var(--graphite); }
.mlog__empty[hidden], .mlog__table-wrap[hidden] { display: none; }
.mlog__table-wrap { overflow-x: auto; }
.mlog__table { min-width: 560px; font-size: 0.9375rem; }
.mlog__table tbody th { width: auto; font-family: var(--font-mono); font-weight: 500; }
.mlog__kml { color: var(--charcoal); font-weight: 700; }
.mlog__del { min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); color: var(--charcoal); font-size: var(--fs-small); cursor: pointer; }
.mlog__del:hover { border-color: var(--charcoal); }
.mlog__chart { margin-top: 32px; padding: clamp(18px, 2.5vw, 28px); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); }
.mlog__svg { width: 100%; height: auto; margin-top: 12px; }
.mlog__grid-line, .mlog__svg .mlog__grid { stroke: var(--rule); stroke-width: 1; }
.mlog__axis { fill: var(--graphite); font-family: var(--font-mono); font-size: 12px; }
.mlog__line { fill: none; stroke: var(--charcoal); stroke-width: 2.5; stroke-linejoin: round; }
.mlog__dot { fill: var(--lime); stroke: var(--charcoal); stroke-width: 2; }
.form-page__title { margin-bottom: 20px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

/* ==========================================================================
   18. Shop (hidden until opened; see includes/shop.php)
   ========================================================================== */
.shop-preview-note { margin: 0; }
.crumbs--light li { color: var(--graphite); }
.crumbs--light li + li::before { color: var(--industrial); }
.crumbs--light a { color: var(--charcoal); }
.crumbs--light [aria-current] { color: var(--charcoal); font-weight: 600; }
.crumbs--light ol { margin-bottom: 0; }

.shop-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.shop-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.shop-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 16px;
  border: 2px solid var(--charcoal);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}
.shop-cart-link .sicon { width: 24px; height: 24px; }
.shop-cart-link__count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--lime); color: var(--charcoal); font-size: 0.875rem; }
.shop-cart-link:hover { background: var(--charcoal); color: var(--white); }
.shop-cart-link:hover .sicon { color: var(--lime); }

.shop-grid { display: grid; gap: var(--gap); }
@media (min-width: 700px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }
.shop-card__price { margin-top: auto; padding-top: 12px; color: var(--charcoal); }
.shop-card--enquiry { background: var(--light); }
.shop-card--enquiry .shop-card__price { color: var(--graphite); font-size: 0.9375rem; }
.shop-price { color: var(--charcoal); font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; }
.shop-price__note { color: var(--graphite); font-size: var(--fs-small); }
.shop-sample { display: inline-block; padding: 1px 8px; border: 1px dashed var(--charcoal); border-radius: 2px; color: var(--charcoal); font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.calc-results .shop-price, .calc-results .shop-price__note { color: var(--white); }
.shop-soldout { display: inline-block; padding: 1px 8px; border-radius: 2px; background: var(--charcoal); color: var(--white); font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.shop-table__pack + .shop-soldout { margin-top: 6px; }
.shop-pack.is-soldout { cursor: not-allowed; opacity: .75; }
.shop-pack.is-soldout .shop-pack__size { text-decoration: line-through; text-decoration-thickness: 1px; }

.shop-product { padding-top: clamp(28px, 4vw, 48px); }
.shop-product__grid { display: grid; gap: 32px var(--gap); align-items: start; }
@media (min-width: 1000px) { .shop-product__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 5vw, 80px); } }
.shop-product__media { margin: 0; }
.shop-product__frame { aspect-ratio: 1 / 1; border-radius: var(--radius); }
.shop-product__media figcaption { margin-top: 10px; }
.shop-product__info h1 { margin: 16px 0 14px; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.shop-product__info .lede { margin-bottom: 28px; }
.shop-buy { display: grid; gap: 20px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--light); }
.shop-packs { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.shop-pack { justify-content: space-between; flex-wrap: wrap; background: var(--white); }
.shop-pack__size { flex: 1; color: var(--charcoal); font-family: var(--font-display); font-weight: 700; }
.route-pick__opt.shop-pack:has(input:checked) .shop-pack__size,
.route-pick__opt.shop-pack:has(input:checked) .shop-price,
.route-pick__opt.shop-pack:has(input:checked) .shop-price__note { color: var(--white); }
.route-pick__opt.shop-pack:has(input:checked) .shop-sample { border-color: var(--white); color: var(--white); }
.shop-buy__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.shop-qty { width: 120px; }
.shop-note { margin: 20px 0 0; padding: 14px 18px; border-left: 3px solid var(--charcoal); background: var(--light); font-size: 1rem; }
.shop-note + .shop-note { margin-top: 10px; }
.shop-added { margin: 0 0 20px; padding: 14px 18px; border-left: 4px solid var(--lime); background: var(--charcoal); color: var(--white); font-weight: 600; --focus: var(--lime); }
.shop-added a { color: var(--lime); }

.shop-cart { padding-top: clamp(28px, 4vw, 48px); }
.shop-cart__title { margin: 16px 0 24px; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.shop-cart__grid { display: grid; gap: 32px var(--gap); align-items: start; }
@media (min-width: 1000px) { .shop-cart__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.shop-table tbody th a { color: var(--charcoal); }
.shop-table__pack { display: block; margin-top: 4px; color: var(--graphite); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; }
.shop-table .shop-price { font-size: 1.0625rem; }
.shop-qty-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shop-qty-form input { width: 72px; min-height: 44px; padding: 6px 10px; border: 2px solid var(--rule); border-radius: var(--radius); font: inherit; }
.shop-qty-form input:focus { outline: none; border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(158, 233, 29, 0.55); }
@media (max-width: 639px) {
  .shop-table thead { display: none; }
  .shop-table tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .shop-table th, .shop-table td { display: block; padding: 4px 0; border: 0; }
  .shop-table td::before { content: attr(data-label); display: block; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; }
}
.shop-summary { position: sticky; top: calc(var(--header-h) + 24px); }
.shop-summary__v { font-size: 1.375rem !important; }
.shop-summary .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Checkout and order pages */
.checkout-form .mlog__h { margin-top: 0; }
.checkout-form .route-pick { margin-top: 32px; }
.checkout-pay { display: grid; gap: 12px; }
@media (min-width: 700px) { .checkout-pay { grid-template-columns: 1fr 1fr; } }
.checkout-pay .route-pick__opt > span { display: grid; gap: 4px; }
.checkout-pay__hint { color: var(--graphite); font-size: var(--fs-small); }
.route-pick__opt:has(input:checked) .checkout-pay__hint { color: var(--muted-on-dark); }
.checkout-form .form-field--consent { margin-top: 24px; }
.checkout-lines { margin: 0 0 16px; padding: 0; list-style: none; }
.checkout-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.checkout-lines small { display: block; color: var(--graphite); font-size: var(--fs-small); }
.order-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; padding: 10px 16px; border-left: 4px solid var(--lime); background: var(--light); font-weight: 600; color: var(--charcoal); }
.order-status__label { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; text-transform: uppercase; color: var(--graphite); }
.order-address { margin: 0 0 24px; font-style: normal; line-height: 1.7; }

/* Shop menu item while previewing */
.nav-preview { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px dashed var(--charcoal); border-radius: 2px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; vertical-align: 2px; }

/* ==========================================================================
   19. Case studies, customer letters, purchase list (CMS phase 3; includes/evidence.php)
   ========================================================================== */

.proof__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; flex: none; }

/* Industry filter (shown only with JavaScript) */
.case-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 28px; }
.case-filter[hidden] { display: none; }
.case-filter__label { margin: 0; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.case-filter__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.case-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  font: 500 0.9375rem/1.3 var(--font-body);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.case-filter__btn:hover { border-color: var(--charcoal); }
.case-filter__btn[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }

/* One case study: figure on charcoal, the record on white */
.cases { display: grid; gap: clamp(20px, 3vw, 32px); }
.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 4px solid var(--sig);
  background: var(--white);
  box-shadow: 0 1px 0 var(--rule), 0 18px 48px rgba(32, 32, 32, 0.06);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.case[hidden] { display: none; }
@media (min-width: 900px) { .case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.case__side {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--charcoal);
  color: var(--text-on-dark);
  --focus: var(--lime);
}
.case__side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 41px 41px;
}
.case__mark {
  position: absolute;
  right: -0.05em;
  bottom: -0.2em;
  z-index: -1;
  color: rgba(255, 255, 255, 0.04);
  font: 800 clamp(4rem, 2.5rem + 5vw, 8rem)/1 var(--font-mono);
  letter-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
}
.case__side > p, .case__title, .case__photo { margin: 0; }
.case__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; color: var(--muted-on-dark); font-family: var(--font-mono); font-size: 0.875rem; }
.case__num { color: var(--lime); letter-spacing: 0.06em; text-transform: uppercase; }
.case__sector { display: inline-flex; align-items: center; gap: 8px; }
.case__sector .sicon, .case-teaser__sector .sicon, .case-filter__btn .sicon { width: 20px; height: 20px; flex: none; }
.case__title { display: grid; gap: 12px; }
.case__figure {
  color: var(--lime);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 480px) { .case__figure { white-space: nowrap; } }
.case__label { max-width: 26ch; color: var(--white); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.case__photo { margin-top: auto !important; }
.case__photo .media { aspect-ratio: 16 / 10; }
.case__photo .caption { margin-top: 8px; color: var(--muted-on-dark); }

.case__body { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 3vw, 44px); }
.case__body > * { margin: 0; }
.case .proof-bars__title { color: var(--graphite); }
.case .proof-bar__name { color: var(--graphite); }
.case .proof-bar__track { background: var(--light); }
.case .proof-bar--with .proof-bar__fill { box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.18); }
.case .proof-bar__value { color: var(--charcoal); }
.motion .case:not(.is-in) .proof-bar__fill { transform: scaleX(0); animation: none; }
.case__facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.case__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--charcoal);
  font-size: 0.875rem;
  line-height: 1.4;
}
.case__facts li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--sig, var(--charcoal)); }
.case__text { max-width: 68ch; padding-left: 18px; border-left: 3px solid var(--lime); color: var(--graphite); line-height: 1.65; }
.case__note { color: var(--graphite); font-size: var(--fs-small); line-height: 1.55; }
.case__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto !important;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.case__doc { margin: 0; color: var(--graphite); font-size: var(--fs-small); line-height: 1.5; }
.case__doc-label { margin-right: 6px; color: var(--charcoal); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.logo-img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.case__logo { display: block; height: 48px; max-width: 160px; }
.case__logo picture, .quote-card__logo picture, .buyer__logo picture { display: block; height: 100%; }
.cases__standing { max-width: 78ch; margin: 24px 0 0; color: var(--graphite); font-size: var(--fs-small); line-height: 1.55; }

/* Customer letters */
.quotes { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .quotes:not(.quotes--single) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .quotes:not(.quotes--single) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quotes--single { max-width: 760px; }
.quote-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  border-top: 3px solid var(--charcoal);
  background: var(--light);
}
.section--light .quote-card { background: var(--white); }
.quote-card__mark {
  position: absolute;
  top: -0.12em;
  right: 14px;
  color: rgba(32, 32, 32, 0.08);
  font: 800 8rem/1 var(--font-display);
  pointer-events: none;
}
.quote-card__text { position: relative; margin: 0; }
.quote-card__text p {
  margin: 0;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  font-weight: 700;
  line-height: 1.45;
}
.quote-card__who { display: grid; gap: 4px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.45; }
.quote-card__logo { display: block; height: 40px; max-width: 150px; margin-bottom: 8px; }
.quote-card__name { color: var(--charcoal); font-size: 0.9375rem; font-weight: 600; }
.quote-card__doc { color: var(--graphite); }
.quote-card__label { justify-self: start; margin-top: 6px; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 2px; background: var(--white); color: var(--charcoal); font-family: var(--font-mono); font-size: 0.875rem; }

/* Organisations that purchased (A6) */
.buyers__lead { max-width: 22ch; margin: 0 0 clamp(28px, 4vw, 44px); }
.buyers__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--rule);
  list-style: none;
}
.buyer { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 140px; padding: 24px; background: var(--white); }
.buyer__logo { display: block; height: 56px; max-width: 180px; margin-bottom: auto; }
.buyer__name { color: var(--charcoal); font-family: var(--font-display); font-weight: 700; line-height: 1.3; }
.buyer__year { color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); }

/* Evidence page: the public proof library */
.case-teasers { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .case-teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .case-teasers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case-teaser {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 26px 24px 24px;
  border-top: 4px solid var(--sig);
  background: var(--charcoal);
  color: var(--text-on-dark);
  text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.case-teaser:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.case-teaser__sector { display: flex; align-items: center; gap: 8px; color: var(--muted-on-dark); font-family: var(--font-mono); font-size: 0.875rem; }
.case-teaser__fig { color: var(--lime); font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.case-teaser__label { color: var(--white); font-size: 1rem; line-height: 1.45; }
.case-teaser__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; color: var(--white); font-size: 0.9375rem; font-weight: 600; }
.case-teaser__more .icon { transition: transform 0.2s var(--ease); }
.case-teaser:hover .case-teaser__more .icon { transform: translateX(4px); }
.library-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 32px; }
.library-foot__standing { flex: 1 1 420px; max-width: 78ch; margin: 0; color: var(--graphite); font-size: var(--fs-small); line-height: 1.55; }

/* Reading these results */
.reading { display: grid; gap: 32px 64px; align-items: start; }
@media (min-width: 900px) { .reading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.reading > div { padding-top: 24px; border-top: 3px solid var(--charcoal); }
.reading .qual { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .case-teaser, .case-teaser:hover { transform: none; transition: none; }
}

/* ---- Insights: article cards (CMS phase 4) ---- */
.insights-grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .insights-grid { grid-template-columns: repeat(3, 1fr); } }
.insight-card { overflow: hidden; }
.insight-card::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 4px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.insight-card:hover::before, .insight-card:focus-within::before { transform: scaleX(1); }
.insight-card .media { aspect-ratio: 16 / 9; }
.insight-card .caption { padding: 10px clamp(20px, 2.4vw, 28px) 0; }
.insight-card:hover .media__inner { scale: 1.05; }
.insight-card h3 { font-size: var(--fs-h3); }
.insight-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); }
.insight-meta--hero { color: var(--lime); }
@media (min-width: 1080px) {
  .insights-grid--list .insight-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .insight-card--feature .insight-card__media { display: flex; flex-direction: column; }
  .insight-card--feature .media { flex: 1; aspect-ratio: auto; min-height: 340px; }
  .insight-card--feature .caption { padding-bottom: 12px; }
  .insight-card--feature .card__body { justify-content: center; padding: clamp(28px, 3.4vw, 48px); }
  .insight-card--feature h3 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.15; }
  .insight-card--feature p { font-size: var(--fs-lede); }
}

/* ---- Insights: one article ---- */
.article-hero h1 { max-width: 24ch; }
.article-hero--cover { padding-bottom: clamp(96px, 12vw, 176px); }
.article-cover { margin-top: calc(-1 * clamp(64px, 9vw, 136px)); }
.article-cover__figure { margin-block: 0; }
.article-cover__frame { aspect-ratio: 21 / 9; border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.article-cover__figure figcaption { padding-top: 10px; }
@media (max-width: 639px) { .article-cover__frame { aspect-ratio: 16 / 10; } }
.article { padding-top: clamp(40px, 6vw, 80px); }
.article__grid { display: grid; gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
@media (min-width: 1000px) {
  .article__grid { grid-template-columns: 220px minmax(0, 46rem); }
  .article__grid--single { grid-template-columns: minmax(0, 46rem); justify-content: center; }
  .article-toc { position: sticky; top: calc(var(--header-h) + 32px); }
}
.article__grid--single { max-width: 46rem; margin-inline: auto; }
@media (min-width: 1000px) { .article__grid--single { max-width: var(--maxw); } }
.article-toc { padding-top: 16px; border-top: 3px solid var(--charcoal); }
.article-toc__title { margin: 0 0 12px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; }
.article-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.article-toc li { counter-increment: toc; }
.article-toc a { display: flex; gap: 10px; padding: 10px 0 10px 12px; border-left: 2px solid var(--rule); color: var(--charcoal); font-size: 0.9375rem; line-height: 1.4; text-decoration: none; transition: border-color 0.2s var(--ease); }
.article-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--industrial); font-family: var(--font-mono); font-size: var(--fs-small); }
.article-toc a:hover, .article-toc a:focus-visible { border-left-color: var(--lime); text-decoration: underline; }
.article__body > p:first-child { font-size: var(--fs-lede); line-height: 1.55; color: var(--charcoal); }
.article__body h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
.article__body h3 { margin: 1.8em 0 0.5em; font-size: var(--fs-h3); scroll-margin-top: calc(var(--header-h) + 24px); }
.article__body ol { padding-left: 1.4em; }
.article__body li::marker { color: var(--graphite); font-weight: 600; }
.article__body strong { color: var(--charcoal); }
.article__back { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) {
  .insight-card::before { transition: none; }
  .insight-card:hover .media__inner { scale: none; }
}

/* ==========================================================================
   Home page redesign (25 Sep 2026): facts strip, value tiles, shop buttons,
   pressure grid, quick estimate and questions. Original colours only.
   ========================================================================== */
.facts-bar { background: var(--white); border-bottom: 1px solid var(--rule); }
.facts-bar__list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; }
@media (min-width: 640px) { .facts-bar__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .facts-bar__list { grid-template-columns: repeat(5, 1fr); } }
.facts-bar__list > div { display: flex; flex-direction: column; gap: 8px; padding: 26px 20px 26px 0; }
@media (min-width: 1080px) { .facts-bar__list > div + div { padding-left: 24px; border-left: 1px solid var(--rule); } }
.facts-bar dt { order: 2; color: var(--graphite); font-size: 0.9375rem; line-height: 1.35; }
.facts-bar dd { order: 1; margin: 0; color: var(--charcoal); font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.facts-bar dd::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 12px; background: var(--lime); transition: width 0.4s var(--ease); }
.facts-bar__list > div:hover dd::after { width: 56px; }

.value-tiles { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .value-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .value-tiles { grid-template-columns: repeat(4, 1fr); } }
.value-tile { position: relative; padding: 24px 22px 26px; border-top: 3px solid var(--charcoal); border-radius: var(--radius); background: var(--white); transition: border-color 0.3s var(--ease), translate 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.value-tile:hover { border-top-color: var(--lime); translate: 0 -4px; box-shadow: var(--shadow-lift); }
.value-tile__num { display: block; margin-bottom: 14px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); }
.value-tile h4, .value-tile h3 { margin: 0 0 8px; color: var(--charcoal); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.value-tile p { margin: 0; font-size: 1rem; }

.product-card__actions { position: relative; z-index: 2; margin: 20px 0 0; }

.pressure-grid { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .pressure-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pressure-grid { grid-template-columns: repeat(4, 1fr); } }
.pressure-card { position: relative; overflow: hidden; padding: 24px 22px 26px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); transition: translate 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.pressure-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.45s var(--ease); }
.pressure-card:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); }
.pressure-card:hover::before { transform: scaleX(1); }
.pressure-card__num { display: inline-grid; place-items: center; min-width: 40px; height: 28px; margin-bottom: 16px; padding: 0 8px; border-radius: 2px; background: var(--charcoal); color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); }
.pressure-card h3 { margin: 0 0 8px; font-size: 1.125rem; }
.pressure-card p { margin: 0; font-size: 1rem; }

.quick-calc { display: grid; gap: 28px var(--gap); margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 3vw, 40px); border: 1px solid var(--rule); border-top: 4px solid var(--lime); border-radius: var(--radius); background: var(--light); }
.quick-calc { grid-template-columns: minmax(0, 1fr); }   /* columns may shrink below their content on phones */
@media (min-width: 1080px) { .quick-calc { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; } }
.quick-calc__kicker { margin: 0 0 8px; color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; }
.quick-calc__intro h3 { margin: 0 0 12px; font-size: var(--fs-h3); }
.quick-calc__intro p:last-child { margin: 0; }
.quick-calc__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.quick-calc__field label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--charcoal); font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.quick-calc__field .calc-help { margin: 8px 0 0; }
.quick-calc__form .btn { justify-self: start; }
.quick-calc__out { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius); background: var(--charcoal); color: var(--text-on-dark); }
.quick-calc__label { margin: 0 0 20px; color: var(--lime); font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.35; }
.quick-calc__out dl { display: grid; gap: 20px; margin: 0; }
.quick-calc__out dt { color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; }
.quick-calc__out dd { margin: 6px 0 0; color: var(--white); font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.quick-calc__out dd.quick-calc__formula { margin-top: 6px; color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 400; line-height: 1.4; }
.quick-calc__error { margin: 20px 0 0; padding: 10px 12px; border-left: 3px solid var(--lime); background: rgba(255, 255, 255, 0.06); color: var(--white); font-size: var(--fs-small); }
.quick-calc__note { margin: 20px 0 0; color: var(--muted-on-dark); font-size: var(--fs-small); }
.quick-calc.has-result .quick-calc__out dd[data-qc] { animation: qc-in 0.4s var(--ease); }
@keyframes qc-in { from { translate: 0 6px; } to { translate: 0 0; } }

.home-faq { display: grid; gap: 32px var(--gap); }
@media (min-width: 900px) { .home-faq { grid-template-columns: 4fr 8fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; } }

@media (prefers-reduced-motion: reduce) {
  .value-tile, .pressure-card, .pressure-card::before, .facts-bar dd::after { transition: none; }
  .quick-calc.has-result .quick-calc__out dd[data-qc] { animation: none; }
}

.sector-tiles { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .sector-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .sector-tiles { grid-template-columns: repeat(3, 1fr); } }
.sector-tile__link { position: relative; display: block; overflow: hidden; border-top: 4px solid var(--sig, var(--lime)); border-radius: var(--radius); background: var(--charcoal); color: var(--white); text-decoration: none; }
.sector-tile .media { aspect-ratio: 16 / 10; margin: 0; }
.sector-tile .media__inner { height: 100%; transition: scale 0.6s var(--ease); }
.sector-tile__link:hover .media__inner, .sector-tile__link:focus-visible .media__inner { scale: 1.05; }
.sector-tile__link::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(32, 32, 32, 0.94), rgba(32, 32, 32, 0)); pointer-events: none; }   /* functional scrim behind the text */
.sector-tile__text { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: grid; justify-items: start; gap: 6px; }
.sector-tile__icon { width: 30px; height: 30px; }
.sector-tile__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.sector-tile__unit { color: var(--text-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); }
.sector-tile__link:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; box-shadow: 0 0 0 6px var(--lime); }
.sector-tile .caption { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .sector-tile .media__inner { transition: none; } }

/* ==========================================================================
   14. Premium layer (redesign, 25 Sep 2026)
   Softer shapes, pill buttons and labels, layered shadows, rounded section
   "islands" and larger display type. Same three backgrounds (white, light grey,
   charcoal) and lime accents only. Everything above still applies; this layer
   refines it, so it can be removed in one piece.
   ========================================================================== */
/* (this layer's tokens now live in section 1) */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: var(--lime); color: var(--charcoal); }
h1, h2 { letter-spacing: -0.03em; text-wrap: balance; }
h3 { letter-spacing: -0.015em; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---- Section islands: light and dark bands float inside the page with rounded corners ---- */
main > .section--light, main > .section--dark, main > .cta-band, main > .page-hero {
  margin-inline: var(--island);
  border-radius: var(--radius-xl);
  overflow: clip;                 /* clip, not hidden: sticky layouts inside keep working */
}
main > .section--light + .section--light, main > .section--dark + .section--dark,
main > .section--light + .section--dark, main > .section--dark + .section--light { margin-top: var(--island); }
main > .cta-band { margin-bottom: var(--island); }
@media (max-width: 639px) {
  main > .section--light, main > .section--dark, main > .cta-band, main > .page-hero { border-radius: 22px; }
}

/* ---- Pill eyebrow labels ---- */
.eyebrow {
  gap: 10px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--white);
  color: var(--charcoal);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  box-shadow: var(--shadow-sm);
}
.eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(158, 233, 29, 0.22); }
.section--dark .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--white);
  box-shadow: none;
}

/* ---- Headings ---- */
.sec-head h2, .page-hero h1 { font-weight: 800; }
.sec-head .subtitle { color: #4A4F4C; }
.section--dark .sec-head .subtitle { color: var(--muted-on-dark); }
.sec-head { margin-bottom: clamp(44px, 5.5vw, 72px); }

/* ---- Buttons: pills with a soft lift ---- */
.btn {
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  letter-spacing: 0;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.3s var(--ease-out), translate 0.3s var(--ease-out);
}
.btn--primary { box-shadow: 0 8px 22px rgba(126, 196, 15, 0.32), inset 0 -2px 0 rgba(32, 32, 32, 0.08); }
.btn--primary:hover { box-shadow: 0 12px 28px rgba(32, 32, 32, 0.22); translate: 0 -2px; }
.btn--ghost { border-width: 1.5px; }
.btn--ghost:hover { translate: 0 -2px; box-shadow: var(--shadow-md); }
.site-header__cta .btn { min-height: 46px; padding: 10px 22px; }
.link-arrow { padding-bottom: 4px; transition: border-color 0.25s var(--ease-out); }
.link-arrow:hover { border-bottom-color: var(--charcoal); }
.section--dark .link-arrow:hover, .page-hero .link-arrow:hover, .cta-band .link-arrow:hover { border-bottom-color: var(--white); }

/* ---- Chips ---- */
.chip { border-radius: 999px; padding: 5px 12px; border-color: var(--hairline); }
.chip--sig::before { border-radius: 50%; }

/* ---- Cards: rounded, hairline, layered shadow, image zoom ---- */
.card {
  border-radius: var(--radius-lg);
  border-color: var(--hairline);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: translate 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.card:hover, .card:focus-within { box-shadow: var(--shadow-lift); border-color: transparent; }   /* the lift itself comes from --lift above */
.card:has(.card__link:focus-visible) { outline-offset: 4px; }
.card .media img { transition: scale 0.8s var(--ease-out); }
.card:hover .media img { scale: 1.06; }
.section--light .card { border-color: transparent; }

/* ---- Media frames ---- */
.media { border-radius: var(--radius-lg); }
.card .media { border-radius: 0; }
.page-hero__frame { border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }

/* ---- Qualification notes ---- */
.qual { border-radius: 4px var(--radius) var(--radius) 4px; }
.section--light .qual { box-shadow: var(--shadow-sm); }

/* ---- Header: pill hover on menu items, soft shadow after scrolling ---- */
.site-header { border-bottom-color: transparent; }
.is-scrolled .site-header { box-shadow: 0 1px 0 var(--hairline), 0 12px 32px rgba(32, 32, 32, 0.07); }
.primary-nav__link { border-radius: 999px; transition: background-color 0.2s var(--ease-out); }
.primary-nav__link:hover, .primary-nav__link[aria-expanded="true"] { background: var(--light); }
.primary-nav__link::after { left: 16px; right: 16px; bottom: 6px; }
.mega { border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: 0 30px 60px rgba(32, 32, 32, 0.14); }

/* ---- Hero slider: rounded stage, glassy label ---- */
.hero__stage { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
@media (max-width: 1079px) { .hero__stage { border-radius: 0 0 24px 24px; } }
.slide__title { font-weight: 800; letter-spacing: -0.035em; }
.slide__eyebrow {
  align-self: flex-start;
  padding: 7px 16px 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(32, 32, 32, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.8125rem;
}
.slide__eyebrow::before { width: 8px; height: 8px; border-radius: 50%; }

/* ---- Inner page header: an island with a large photo frame ---- */
main > .page-hero { margin-top: var(--island); }

/* ---- Footer ---- */
.site-footer { margin-top: var(--island); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
main:has(> .cta-band:last-child) + .site-footer { border-top: 0; }
.logo-tile { border-radius: var(--radius-lg); padding: 18px 22px; }

/* ---- Premium motion: one easing, gentle and quick ---- */
.motion [data-reveal].is-in:not([data-stagger]), .motion [data-stagger].is-in > * { animation-duration: 1s; animation-timing-function: var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .btn, .card, .card .media img, .link-arrow, .primary-nav__link { transition: none; }
  .btn:hover { translate: none; }
  .card:hover .media img { scale: none; }
}
.slide__title { font-size: clamp(2rem, 1.15rem + 2.4vw, 3.25rem); max-width: 22ch; }

/* Accent lines on rounded cards: an inner shadow follows the rounded corners (a thick top border would bend) */
.product-card, .pillar, .start-route, .pressure-card, .value-tile {
  border-top: 1px solid var(--hairline);
  box-shadow: inset 0 4px 0 var(--charcoal), var(--shadow-sm);
}
.product-card:hover, .pillar:hover, .start-route:hover, .pressure-card:hover, .value-tile:hover,
.product-card:focus-within, .start-route:focus-within {
  box-shadow: inset 0 4px 0 var(--lime), var(--shadow-lift);
}
.product-card::after { display: none; }
.sector-strip__item { border-top: 1px solid var(--hairline); box-shadow: inset 0 4px 0 var(--sig), var(--shadow-sm); }
.value-tile, .pressure-card { border-radius: var(--radius-lg); }
.pressure-card::before { display: none; }
.pressure-card, .value-tile { transition: box-shadow 0.4s var(--ease-out), translate 0.4s var(--ease-out); }

/* Results explorer and other framed panels */
.proof-x { border-radius: var(--radius-lg); overflow: clip; }
.quick-calc { border-radius: var(--radius-xl); border-top: 1px solid var(--rule); box-shadow: inset 0 4px 0 var(--lime); }
.quick-calc__out { border-radius: var(--radius-lg); }
.opportunity { border-radius: var(--radius-lg); border-top: 0; box-shadow: inset 0 4px 0 var(--lime); }
.science__item { border-radius: var(--radius-lg); border-top-width: 1px; box-shadow: inset 0 3px 0 var(--lime); }
.facts-bar { border-bottom: 0; }
.sector-tile__link { border-top: 0; border-radius: var(--radius-lg); box-shadow: inset 0 4px 0 var(--sig, var(--lime)), var(--shadow-sm); }
.sector-tile__link::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 4px; background: var(--sig, var(--lime)); }
.faq { border-top: 0; }
.faq__item { margin-bottom: 12px; padding-inline: 20px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.faq__item[open] { box-shadow: inset 0 3px 0 var(--lime), var(--shadow-md); }

/* Pills and soft panels for the smaller components */
.pathway li { border-radius: 999px; border-color: var(--hairline); background: var(--white); box-shadow: var(--shadow-sm); }
.pathway li:last-child { background: var(--charcoal); }
.step-rail__panel { border-left: 0; border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 3px 0 0 var(--lime), var(--shadow-sm); }
.lens__tab { border-left-width: 1px; border-radius: 999px; min-height: 52px; padding-inline: 20px; }
.lens__tab[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--lime), var(--shadow-md); }
.lens__panel { border-radius: var(--radius-lg); border-color: var(--hairline); box-shadow: var(--shadow-md); }
.section--light .lens__panel { border-color: transparent; }
.data-table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--hairline); background: var(--white); }
.contact-card, .chooser__panel, .slens__panel, .route-panel__card, .value-band__item--product { border-radius: var(--radius-lg); }
.contact-card, .route-panel__card, .value-band__item--product { border-top-width: 1px; box-shadow: inset 0 4px 0 var(--lime); }
.chooser__panel, .slens__panel { border-top-width: 0; box-shadow: inset 0 4px 0 var(--sig, var(--lime)), var(--shadow-sm); }

/* ---- Step 2: every page. Remaining components in the rounded style ---- */
/* Tables keep their clean ruled lines (cells start flush left, so no outer frame) */
.data-table { border: 0; background: transparent; }

/* Calculator results, sector pickers, lens tabs and the 15-stage explorer: inner accent lines */
.calc-results { border-top: 0; border-radius: var(--radius-lg); box-shadow: inset 0 4px 0 var(--sig, var(--lime)), var(--shadow-md); }
.sector-pick__opt, .slens__tab { border-top-width: 2px; border-radius: var(--radius-lg); box-shadow: inset 0 4px 0 var(--sig); }
.sector-pick__opt:hover, .slens__tab:hover { box-shadow: inset 0 4px 0 var(--sig), var(--shadow-md); }
.explorer__phase { border-top-width: 2px; border-radius: var(--radius-lg); box-shadow: inset 0 3px 0 var(--rule); }
.explorer__phase[aria-selected="true"] { box-shadow: inset 0 4px 0 var(--lime), var(--shadow-md); }

/* Product facts */
.pfacts__item { border-top: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: inset 0 4px 0 var(--charcoal), var(--shadow-sm); }
.pfacts__item:hover { box-shadow: inset 0 4px 0 var(--lime), var(--shadow-lift); }
.pfacts__item--value { box-shadow: inset 0 4px 0 var(--lime), var(--shadow-md); }

/* Industry page photo frame: the sector colour line sits on top of the photo */
.page-hero--sig .page-hero__frame { border-top: 0; }
.page-hero--sig .page-hero__frame::after { content: ""; position: absolute; inset: 0 0 auto; z-index: 3; height: 4px; background: var(--sig); }

/* Case studies */
.case { position: relative; overflow: hidden; border-top: 0; border-radius: var(--radius-lg); }
.case::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 4px; background: var(--sig); }
.case-teaser { position: relative; overflow: hidden; border-top: 0; border-radius: var(--radius-lg); }
.case-teaser::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--sig); }
.case-filter__btn { border-radius: 999px; padding-inline: 18px; }

/* Notes */
.governance-note { border-left: 0; border-radius: var(--radius-lg); box-shadow: inset 3px 0 0 var(--charcoal); }
.calc-results__prompt { border-radius: var(--radius); }

/* ==========================================================================
   15. Refinement (26 Sep 2026): floating mega menu, tighter spacing, finishing touches
   ========================================================================== */

/* ---- Tighter rhythm: less empty space above, below and inside sections ---- */
/* (spacing and h2 size now live in the tokens, section 1) */
.sec-head { margin-bottom: clamp(28px, 3.6vw, 48px); }
.sec-head .subtitle { margin-top: 2px; }
.eyebrow { margin-bottom: 16px; }
.section--tight { padding-block: clamp(44px, 5vw, 72px); }
.page-hero { padding-block: clamp(36px, 4.5vw, 64px) clamp(40px, 5vw, 72px); }
.crumbs ol { margin-bottom: 20px; }
.cta-band { padding-block: clamp(48px, 6vw, 88px); }
.qual { margin-top: clamp(24px, 3vw, 36px); }
.link-arrow-wrap { margin-top: 24px; }
.opportunity, .quick-calc { margin-top: clamp(28px, 3.6vw, 44px); }
.subhead { margin-top: clamp(36px, 4.5vw, 56px); }
.site-footer { padding-top: clamp(48px, 5.5vw, 80px); }
.site-footer__top { padding-bottom: 36px; }
.site-footer__map { padding-block: 36px; }

/* ---- Finishing touches on the islands ---- */
main > .section--dark, main > .page-hero, main > .cta-band { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
main > .section--light { box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.035); }

/* ---- Floating mega menu ---- */
.mega {
  left: var(--island);
  right: var(--island);
  top: calc(100% + 8px);
  overflow: visible;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(32, 32, 32, 0.05), 0 40px 90px rgba(32, 32, 32, 0.18);
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }   /* keeps the menu open while the pointer crosses the gap */
.mega:not([hidden]) { animation: mega-in 0.28s var(--ease-out); }
@keyframes mega-in { from { opacity: 0.4; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
.mega__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 24px; padding-block: 22px; }
.mega__grid { display: grid; gap: 4px 12px; align-content: start; margin: 0; padding: 0; list-style: none; }
.mega__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: 12px 14px;
  border-top: 0;
  border-radius: 16px;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
.mega__item:hover, .mega__item[aria-current] { background: var(--light); }
.mega__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.mega__icon .sicon { width: 28px; height: 28px; }
.mega__item:hover .mega__icon, .mega__item[aria-current] .mega__icon { border-color: transparent; box-shadow: inset 0 -3px 0 var(--sig, var(--lime)), var(--shadow-sm); }
.mega__text { display: grid; gap: 2px; min-width: 0; }
.mega__title { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; }
.mega__title .icon { width: 14px; height: 14px; opacity: 0; translate: -4px 0; transition: opacity 0.2s var(--ease-out), translate 0.2s var(--ease-out); }
.mega__item:hover .mega__title .icon, .mega__item:focus-visible .mega__title .icon { opacity: 1; translate: 0 0; }
.mega__desc { font-size: 0.875rem; line-height: 1.4; }
.mega__unit { color: var(--graphite); font-family: var(--font-mono); font-size: 0.8125rem; }
.mega__feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
  border-radius: 18px;
  background: var(--charcoal);
  color: var(--text-on-dark);
  box-shadow: inset 0 3px 0 var(--lime);
  --focus: var(--lime);
}
.mega__kicker { margin: 0; color: var(--lime); font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mega__feature-title { margin: 0; color: var(--white); font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.mega__feature-text { margin: 0 0 6px; color: var(--muted-on-dark); font-size: 0.9375rem; line-height: 1.5; }
.mega__feature .btn { margin-top: auto; min-height: 46px; padding: 10px 20px; }
.mega__feature .btn--primary:hover { background: var(--white); color: var(--charcoal); }
.mega__feature-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--white); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; text-decoration: none; }
.mega__feature-link:hover { color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .mega:not([hidden]) { animation: none; }
  .mega__title .icon { transition: none; }
}
/* ---- Compact drop-down menus (simplified menu, 3 Oct 2026) ---- */
.has-mega { position: relative; }
.mega--drop { left: -8px; right: auto; width: max-content; min-width: 300px; max-width: min(420px, calc(100vw - 32px)); padding: 10px; border-radius: 20px; }
.mega--drop .mega__grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.mega--drop .mega__item { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; min-height: 44px; padding: 7px 12px 7px 8px; border-radius: 12px; }
.mega--drop .mega__icon { width: 36px; height: 36px; border-radius: 10px; }
.mega--drop .mega__icon .sicon { width: 22px; height: 22px; }
.mega--drop .mega__title { font-size: 0.9688rem; }
.mega__all { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 6px 0 0; padding: 4px 12px 0; border-top: 1px solid var(--hairline); color: var(--charcoal); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; text-decoration: none; }
.mega__all + .mega__all { margin-top: 0; border-top: 0; padding-top: 0; }
.mega__all .icon { width: 14px; height: 14px; transition: translate 0.2s var(--ease-out); }
.mega__all:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mega__all:hover .icon { translate: 3px 0; }
@media (prefers-reduced-motion: reduce) { .mega__all .icon { transition: none; } }
.closing { margin-top: clamp(44px, 5.5vw, 72px); }
.notfound { padding-block: clamp(56px, 8vw, 112px); }
.thanks { padding-block: clamp(56px, 7vw, 100px); }
.text-hero { padding-block: clamp(36px, 4.5vw, 60px) clamp(40px, 5vw, 64px); }
main > .text-hero { margin-inline: var(--island); margin-top: var(--island); border-radius: var(--radius-xl); overflow: clip; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
@media (max-width: 639px) { main > .text-hero { border-radius: 22px; } }
.text-hero .eyebrow { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: var(--white); box-shadow: none; }
/* Small laptops: the full menu and the button must fit on one line (also once Shop joins the menu) */
@media (min-width: 1080px) and (max-width: 1279px) {
  .site-header__inner { gap: 14px; }
  .primary-nav__list { gap: 0; }
  .primary-nav__link { padding: 0 9px; font-size: 0.875rem; }
  .primary-nav__link::after { left: 9px; right: 9px; }
  .site-header__cta .btn { padding: 10px 16px; font-size: 0.875rem; }
}

/* ==========================================================================
   16. Recognition: Telangana State Industry Awards 2018 (2 Oct 2026)
   The real certificate, framed. Never captioned "illustrative" (it is a scan of the original).
   ========================================================================== */
.award__grid { display: grid; gap: 32px var(--gap); align-items: center; }
@media (min-width: 900px) { .award__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 5vw, 80px); } }
.award__figure { margin: 0; }
.award__frame {
  display: block;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 2px 6px rgba(32, 32, 32, 0.06), 0 36px 80px rgba(32, 32, 32, 0.18), inset 0 3px 0 var(--lime);
  rotate: -1.5deg;
  transition: rotate 0.5s var(--ease-out), scale 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.award__frame:hover, .award__frame:focus-visible { rotate: 0deg; scale: 1.015; }
.award__frame img { display: block; width: 100%; height: auto; border-radius: 10px; }
.award__figure .caption { margin-top: 14px; }
.award__event { margin: 0 0 6px; color: var(--graphite); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
.award__title { margin: 0 0 16px; font-size: var(--fs-h2); font-weight: 800; }
.award__facts { display: grid; margin: 24px 0 28px; border-top: 1px solid var(--rule); }
.award__facts > div { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 639px) { .award__facts > div { grid-template-columns: minmax(0, 1fr); } }
.award__facts dt { color: var(--graphite); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; }
.award__facts dd { margin: 0; color: var(--charcoal); font-weight: 500; }

/* Hero: the award slide shows the framed certificate beside the text */
.slide__award {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 4.5vw, 72px);
  top: 50%;
  width: min(38%, 440px);
  margin: 0;
  padding: 8px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 3px 0 var(--lime);
  translate: 0 -55%;
  rotate: -2deg;
}
.slide__award img { display: block; width: 100%; height: auto; border-radius: 8px; }
@media (min-width: 1080px) { .slide:has(.slide__award) .slide__content { max-width: 58%; } }
@media (max-width: 1079px) {   /* phones and tablets: the certificate fills the space above the text */
  .slide__award { top: 18px; right: auto; left: 50%; width: 120px; padding: 4px; border-radius: 10px; translate: -50% 0; rotate: -3deg; }
  .slide__award img { border-radius: 6px; }
}
@media (min-width: 600px) and (max-width: 1079px) { .slide__award { top: 22px; width: 260px; padding: 6px; } }
.thumb__award { object-fit: cover; object-position: center 30%; }
@media (prefers-reduced-motion: reduce) { .award__frame { transition: none; } .award__frame:hover { rotate: -1.5deg; scale: none; } }
.slide:has(.slide__award) .slide__title { font-size: clamp(1.875rem, 1.1rem + 2vw, 2.875rem); }
/* Award slide: keep the text inside the slider at every laptop width */
.slide:has(.slide__award) .slide__chip { display: none; }
.slide:has(.slide__award) .slide__title { font-size: clamp(1.75rem, 0.9rem + 1.8vw, 2.625rem); margin-bottom: 14px; }
.slide:has(.slide__award) .slide__sub { font-size: 1.0625rem; margin-bottom: 20px; }
@media (min-width: 1080px) {
  .slide:has(.slide__award) .slide__content { max-width: 62%; }
  .slide__award { width: min(33%, 400px); }
}
@media (min-width: 1080px) and (max-width: 1279px) { .hero__stage, .hero__rail { height: 548px; } }   /* small laptops: room for the longest slide */
/* Hero: an approved result on the slide (claims.php), with its standing line and a link to the record */
.slide__proof { margin: 0 0 24px; padding: 14px 18px 12px; border-left: 3px solid var(--lime); border-radius: 0 12px 12px 0; background: rgba(20, 20, 20, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); max-width: 34rem; }
.slide__proof-fig { margin: 0; color: var(--lime); font-family: var(--font-display); font-size: clamp(2rem, 1.3rem + 2vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.slide__proof-fig .proof-fig__unit { font-size: 0.55em; margin-left: 2px; }
.slide__proof-fig .proof-fig__join { margin: 0 0.1em; }
.slide__proof-label { margin: 6px 0 6px; color: var(--white); font-weight: 600; font-size: 1rem; line-height: 1.35; }
.slide__proof-note { margin: 0; color: var(--muted-on-dark); font-size: var(--fs-small); line-height: 1.4; }
.slide__proof-note a { color: var(--white); font-weight: 600; text-decoration-color: var(--lime); text-underline-offset: 3px; white-space: nowrap; }
.slide__proof--side { display: none; }
.slide:has(.slide__proof) .slide__title { font-size: clamp(1.75rem, 0.95rem + 1.9vw, 2.75rem); }
@media (min-width: 1080px) {
  .slide__proof--inline { display: none; }
  .slide__proof--side { display: block; }
  .slide__proof { position: absolute; z-index: 1; right: clamp(24px, 4.5vw, 72px); top: 50%; translate: 0 -55%; width: min(32%, 380px); max-width: none; margin: 0; padding: 22px 24px 18px; border-left: 0; border-radius: 18px; background: rgba(20, 20, 20, 0.62); box-shadow: inset 0 3px 0 var(--lime), 0 24px 60px rgba(0, 0, 0, 0.35); }
  .slide:has(.slide__proof) .slide__content { max-width: 62%; }
}
@media (max-width: 1079px) {
  .hero__stage { height: 700px; }
  .slide:has(.slide__proof) .slide__sub { display: none; }   /* phones: the result replaces the supporting line */
  .slide__proof { margin-bottom: 18px; padding: 10px 14px; }
  .slide__proof-fig { font-size: 1.875rem; }
  .slide__proof-label { font-size: 0.9375rem; margin: 4px 0; }
}
@media (max-width: 380px) { .hero__stage { height: 760px; } }
@media (max-width: 340px) {
  .hero__stage { height: 800px; }
  .slide__title, .slide:has(.slide__proof) .slide__title { font-size: 1.625rem; }
  .slide .btn-row .btn { min-height: 46px; padding: 10px 18px; }
  .slide__content { bottom: 120px; }
}

/* ==========================================================================
   17. Marketing home page (3 Oct 2026): trust strip, product range, why, how, final call to action
   ========================================================================== */
.sec-head--center { max-width: 48rem; margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { margin-inline: auto; }
.sec-head--center .lede { margin: 12px auto 0; }

/* ---- Trust strip ---- */
.trust { padding-block: clamp(20px, 2.6vw, 32px); }
.trust__inner { display: grid; gap: 20px 40px; align-items: center; }
@media (min-width: 900px) { .trust__inner { grid-template-columns: auto minmax(0, 1fr); } }
.trust__award { display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 10px; border: 1px solid var(--hairline); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); color: var(--charcoal); text-decoration: none; transition: box-shadow 0.3s var(--ease-out), translate 0.3s var(--ease-out); }
.trust__award:hover { translate: 0 -2px; box-shadow: var(--shadow-md); }
.trust__cert { flex: none; width: 96px; padding: 4px; border-radius: 10px; background: var(--white); box-shadow: 0 6px 16px rgba(32, 32, 32, 0.14), inset 0 2px 0 var(--lime); rotate: -3deg; }
.trust__cert img { display: block; width: 100%; height: auto; border-radius: 6px; }
.trust__award-text { display: grid; gap: 2px; }
.trust__kicker { color: var(--graphite); font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.trust__award-text strong { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.3; }
.trust__more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; color: var(--charcoal); }
.trust__more .icon { width: 14px; height: 14px; }
.trust__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .trust__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust__facts li { display: grid; gap: 2px; padding: 12px 16px; border-left: 3px solid var(--lime); }
.trust__facts strong { color: var(--charcoal); font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.trust__facts span { color: var(--graphite); font-size: 0.9375rem; }
.trust__buyers p { margin: 16px 0 0; color: var(--graphite); font-size: 0.9375rem; text-align: center; }
.trust__buyer { display: inline-block; margin: 6px 6px 0; padding: 4px 12px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--charcoal); font-weight: 600; }

/* ---- Product range ---- */
.range-grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .range-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.range-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); transition: translate 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.range-card:hover, .range-card:focus-within { translate: 0 -6px; box-shadow: var(--shadow-lift); }
.range-card__media { display: block; }
.range-card__media .media { display: block; aspect-ratio: 4 / 3; border-radius: 0; }
.range-card__media .media__inner { display: block; height: 100%; }
.range-card__media img { transition: scale 0.8s var(--ease-out); }
.range-card:hover .range-card__media img { scale: 1.06; }
.range-card__caption { padding: 8px 20px 0; }
.range-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 22px; }
.range-card__body .chip { margin-bottom: 2px; }
.range-card h3 { margin: 0; font-size: 1.25rem; }
.range-card h3 a { color: var(--charcoal); text-decoration: none; }
.range-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }
.range-card__body p { margin: 0; font-size: 0.9375rem; }
.range-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto; padding-top: 10px; }
.range-card__actions .btn { min-height: 44px; padding: 10px 18px; font-size: 0.875rem; }

/* ---- Why DeCarb ---- */
.why-grid { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.why-card { padding: 26px 24px 28px; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); transition: translate 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.why-card:hover { translate: 0 -4px; box-shadow: var(--shadow-md); }
.why-card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 16px; background: var(--lime); box-shadow: 0 8px 18px rgba(126, 196, 15, 0.3); }
.why-card__icon .sicon { width: 30px; height: 30px; }
.why-card h3 { margin: 0 0 8px; font-size: 1.125rem; }
.why-card p { margin: 0; font-size: 0.9375rem; }

/* ---- How it works ---- */
.how-steps { position: relative; display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; counter-reset: how; }
@media (min-width: 900px) {
  .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how-steps::before { content: ""; position: absolute; left: 8%; right: 8%; top: 52px; height: 2px; background: var(--lime); opacity: 0.5; }   /* the line joining the steps */
}
.how-step { position: relative; padding: 28px 26px 30px; border: 1px solid var(--rule-dark); border-radius: var(--radius-lg); background: #262626; }
.how-step__num { position: absolute; top: 18px; right: 22px; color: rgba(255, 255, 255, 0.12); font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.how-step__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border: 1px solid rgba(158, 233, 29, 0.4); border-radius: 50%; background: var(--charcoal); }
.how-step__icon .sicon { width: 30px; height: 30px; }
.how-step h3 { margin: 0 0 8px; color: var(--white); font-size: 1.375rem; }
.how-step p { margin: 0; color: var(--text-on-dark); font-size: 0.9375rem; }
.how__cta { margin-top: clamp(28px, 3.5vw, 44px); align-items: center; gap: 16px 24px; }

/* ---- Final call to action ---- */
main > .cta-final { margin: var(--island) var(--island) 0; border-radius: var(--radius-xl); overflow: clip; }
.cta-final { padding-block: clamp(48px, 6vw, 88px); background: var(--charcoal); color: var(--text-on-dark); box-shadow: inset 0 3px 0 var(--lime); --focus: var(--lime); }
.cta-final__inner { display: grid; gap: 36px clamp(40px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) { .cta-final__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cta-final h2 { margin: 0 0 14px; color: var(--white); }
.cta-final .eyebrow { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: var(--white); box-shadow: none; }
.cta-final .lede { color: var(--text-on-dark); }
.cta-final__routes { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.cta-final__routes a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; color: var(--white); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; text-decoration: none; transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out); }
.cta-final__routes a:hover { border-color: var(--lime); background: rgba(158, 233, 29, 0.08); }
.cta-final__routes .icon { width: 14px; height: 14px; }
.cta-final__actions { display: grid; gap: 12px; padding: clamp(20px, 2.6vw, 28px); border: 1px solid var(--rule-dark); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.04); }
.cta-final__main { width: 100%; min-height: 56px; font-size: 1rem; }
.cta-final__contact { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); color: var(--white); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; transition: background-color 0.2s var(--ease-out); }
.cta-final__contact:hover { background: rgba(255, 255, 255, 0.1); }
.cta-final__label { color: var(--lime); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
main:has(> .cta-final:last-child) + .site-footer { margin-top: var(--island); }

@media (prefers-reduced-motion: reduce) {
  .trust__award, .range-card, .range-card__media img, .why-card { transition: none; }
  .trust__award:hover, .range-card:hover, .range-card:focus-within, .why-card:hover { translate: none; }
  .range-card:hover .range-card__media img { scale: none; }
}

/* ---- Calculator guardrail notes ("please check"; management feedback, 3 Oct 2026) ---- */
.calc-warn { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.calc-warn[hidden] { display: none; }
.calc-warn li { position: relative; padding: 10px 14px 10px 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 3px 0 0 var(--lime); color: var(--white); font-size: 0.9375rem; line-height: 1.5; }
.calc-warn li::before { content: "!"; position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: var(--charcoal); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 800; line-height: 1; }
.quick-calc__out .calc-warn { margin: 16px 0 0; }

/* ---- Customer logo strip (home + Evidence; real logos only with written permission, samples in preview only) ---- */
.logo-strip { padding-block: clamp(40px, 5vw, 64px); }
.logo-strip__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 28px; }
.logo-strip__head .eyebrow { margin: 0; }
.logo-strip__lead { margin: 0; color: var(--charcoal); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 700; }
.logo-strip__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .logo-strip__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .logo-strip__list { grid-template-columns: repeat(6, 1fr); } }
.logo-strip__item { display: grid; place-items: center; min-height: 104px; padding: 18px; border: 1px solid var(--rule); border-radius: 16px; background: var(--white); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.logo-strip__item:hover { border-color: transparent; box-shadow: var(--shadow-lift); }
.logo-strip__img { display: block; max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter 0.25s var(--ease), opacity 0.25s var(--ease); }
.logo-strip__item:hover .logo-strip__img { filter: none; opacity: 1; }
.logo-strip__more { margin: 20px 0 0; font-weight: 600; }
.logo-strip__more a { color: var(--charcoal); }
/* Preview-only sample boxes */
.logo-strip__note { margin: 0 0 18px; padding: 12px 16px; border-left: 4px solid var(--lime); border-radius: 0 12px 12px 0; background: var(--light); color: var(--graphite); font-size: var(--fs-small); }
.logo-strip__item--sample { gap: 8px; border-style: dashed; border-color: var(--industrial); background: var(--light); color: var(--graphite); font-size: var(--fs-small); font-weight: 600; text-align: center; }
.logo-strip__sample { display: block; width: 40px; height: 28px; border: 2px solid var(--industrial); border-radius: 8px; }

/* ---- Product images (6 Oct 2026): second image on hover, product page gallery, pack sizes ---- */
.pswap { position: relative; display: block; width: 100%; height: 100%; }
.pswap > picture, .pswap > img, .pswap > .tech-panel { display: block; width: 100%; height: 100%; }
.pswap__alt { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); }
.pswap__alt picture, .pswap__alt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.has-swap:hover .pswap__alt, .has-swap:focus-within .pswap__alt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pswap__alt { transition: none; } }

.product-card__media .media { display: block; aspect-ratio: 4 / 3; border-radius: 0; }
.product-card__media .media__inner { display: block; height: 100%; inset: 0; }
.product-card__caption { margin: 0; padding: 8px clamp(20px, 2.4vw, 28px) 0; }

.page-hero__media--gallery { min-width: 0; }
.pgallery__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg, 20px); background: var(--light); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }
.pgallery__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); }
.pgallery__slide.is-active { opacity: 1; }
.pgallery__slide picture, .pgallery__slide img, .pgallery__slide .tech-panel { display: block; width: 100%; height: 100%; }
.pgallery__slide img { object-fit: cover; }
/* While the first image is showing, hovering shows the second */
.pgallery[data-active="0"] .pgallery__stage--swap:hover .pgallery__slide[data-slide="1"] { opacity: 1; }
.pgallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pgallery__thumb { width: 72px; height: 54px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: var(--light); cursor: pointer; opacity: 0.7; transition: opacity 0.2s, border-color 0.2s; }
.pgallery__thumb picture, .pgallery__thumb img, .pgallery__thumb .tech-panel { display: block; width: 100%; height: 100%; }
.pgallery__thumb img { object-fit: cover; }
.pgallery__thumb:hover, .pgallery__thumb[aria-pressed="true"] { opacity: 1; border-color: var(--lime); }
.pgallery__thumb .tech-panel__mark { display: none; }
@media (max-width: 559px) { .pgallery__thumb { width: 60px; height: 45px; } }
@media (prefers-reduced-motion: reduce) { .pgallery__slide { transition: none; } }

.psizes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; flex-basis: 100%; margin-top: 6px; }
.psizes__label { margin: 0; color: var(--muted-on-dark); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; }
.psizes__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.psizes__chip { padding: 4px 12px; border: 1px solid var(--rule-dark); border-radius: 999px; color: var(--white); font-size: var(--fs-small); font-weight: 600; }
/* Tall product images (single bottles, usually on white) are shown whole on white, not cropped */
.pswap img.is-tall, .pgallery__slide img.is-tall, .pgallery__thumb img.is-tall { object-fit: contain; background: var(--white); }
.pgallery__stage:has(.is-active img.is-tall) { background: var(--white); }

/* ---- Home: Problems we solve (7 Oct 2026) ---- */
.problem-grid { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .problem-grid { grid-template-columns: repeat(3, 1fr); } }
.problem { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 32px); border-radius: 20px; background: var(--light); box-shadow: inset 0 4px 0 var(--lime); }
.problem__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.problem__num { color: var(--charcoal); font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.problem__icon .sicon { width: 40px; height: 40px; }
.problem h3 { margin: 0 0 14px; font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem); }
.problem__list { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.problem__list li { position: relative; padding-left: 18px; font-size: 1rem; line-height: 1.55; }
.problem__list li::before { content: ""; position: absolute; top: 0.6em; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--charcoal); }
.problem__list strong { color: var(--charcoal); }
.problem__help { margin: auto 0 0; padding: 16px 18px; border-radius: 14px; background: var(--charcoal); color: var(--text-on-dark); font-size: 0.9375rem; line-height: 1.55; }
.problem__help-label { display: block; margin-bottom: 4px; color: var(--lime); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; }
.problems__more { margin: 24px 0 0; }

/* ---- Hero: the product pack beside the slide's message (7 Oct 2026) ---- */
.slide__pack { position: absolute; z-index: 1; margin: 0; overflow: hidden; border-radius: 18px; background: #000; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 3px 0 var(--lime); }
.slide__pack picture, .slide__pack img { display: block; width: 100%; height: 100%; }
.slide__pack img { object-fit: cover; }
@media (min-width: 1080px) {
  .slide__pack { right: clamp(24px, 4.5vw, 72px); top: 50%; translate: 0 -55%; width: min(24%, 290px); aspect-ratio: 3 / 4; }
  .slide:has(.slide__pack) .slide__content { max-width: 64%; }
}
@media (min-width: 600px) and (max-width: 1079px) {   /* tablets: a pack card at the top right, the text stays at the bottom */
  .slide__pack { top: 18px; right: 18px; width: 160px; aspect-ratio: 3 / 4; border-radius: 12px; }
}
@media (max-width: 599px) { .slide__pack { display: none; } }   /* phones: no room beside the text */

/* ==========================================================================
   20. Phase 3 component library (c-*), 8 Oct 2026
   docs/phase3/03-design-system.md · PHP: includes/components/ · shown at /admin/styleguide/
   Every class starts with c- so nothing here touches the existing pages. Mobile-first,
   breakpoints 480 · 768 · 1024 · 1280 · 1536 px. Signal colours only on chips, 4 px rules,
   icons and markers; lime never as text on white; photos always keep their caption.
   ========================================================================== */

/* ---- Layout ---- */
.c-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.c-wrap--wide { max-width: var(--maxw-wide); }
.c-section { padding-block: var(--section-y); }
.c-section--white { background: var(--white); }
.c-section--light { background: var(--light); }
.c-section--dark { background: var(--charcoal); color: var(--text-on-dark); --focus: var(--lime); }
.c-section--dark :is(h1, h2, h3, h4, strong) { color: var(--white); }
.c-section--dark a:not(.c-btn) { color: var(--white); }
.c-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
@media (min-width: 1024px) { .c-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; } }
.c-plain { margin: 0; padding: 0; list-style: none; }
.c-wrap > :last-child, .c-split__content > :last-child, .c-ctacard > div > :last-child { margin-bottom: 0; }

/* ---- Type helpers ---- */
.c-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 var(--s-4);
  color: var(--graphite);
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.c-eyebrow::before { content: ""; width: 28px; height: 3px; flex: none; background: var(--lime); }   /* lime as a line, never as text on white */
.c-section--dark .c-eyebrow, .c-hero .c-eyebrow, .c-slider .c-eyebrow, .c-ctacard--dark .c-eyebrow, .c-band .c-eyebrow { color: var(--lime); }
.c-ctaband .c-eyebrow { color: var(--charcoal); }
.c-ctaband .c-eyebrow::before { background: var(--charcoal); }
.c-lede { max-width: 60ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; }
.c-head { margin-bottom: clamp(28px, 3.6vw, 48px); }
.c-head__title { max-width: 22ch; margin: 0; }
.c-head .c-lede { margin-top: var(--s-4); }
.c-head--center { text-align: center; }
.c-head--center .c-eyebrow { justify-content: center; }
.c-head--center .c-head__title, .c-head--center .c-lede { margin-inline: auto; }
@media (min-width: 1024px) {
  .c-head--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-9); align-items: end; }
  .c-head--split .c-lede { margin-top: 0; }
}
.c-section--dark .c-lede, .c-section--dark .c-head .c-lede { color: var(--text-on-dark); }

/* ---- Buttons and links ---- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 24px;
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.c-btn .icon { flex: none; transition: transform var(--t-fast) var(--ease); }
.c-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.c-btn:hover .icon { transform: translateX(3px); }
.c-btn--primary { background: var(--lime); color: var(--charcoal); }
.c-btn--dark { background: var(--charcoal); color: var(--white); }
.c-btn--dark:hover { background: var(--graphite); }
.c-btn--ghost { border-color: var(--charcoal); color: var(--charcoal); }
.c-btn--ghost:hover { background: var(--charcoal); color: var(--white); }
.c-btn--ghost-dark { border-color: rgba(255, 255, 255, 0.5); color: var(--white); }
.c-btn--ghost-dark:hover { border-color: var(--white); background: var(--white); color: var(--charcoal); }
.c-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--charcoal); font-family: var(--font-display); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 0.35em;
}
.c-link .icon { transition: transform var(--t-fast) var(--ease); }
.c-link:hover .icon { transform: translateX(3px); }
:is(.c-section--dark, .c-hero, .c-slider, .c-ctacard--dark, .c-claimstrip--dark, .c-band) .c-link { color: var(--white); }

/* ---- Chips (mono, signal dot) ---- */
.c-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  background: var(--white); color: var(--charcoal);
  font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.4; white-space: nowrap;
}
.c-chip--sig::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--sig); }
.c-chip--dark { border-color: var(--rule-dark); background: rgba(255, 255, 255, 0.06); color: var(--white); }

/* ---- Photo with caption ---- */
.c-photo { margin: 0; }
.c-photo__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: var(--charcoal); }
.c-photo__img { position: absolute; inset: 0; }
.c-photo__img picture, .c-photo__img img { width: 100%; height: 100%; }
.c-photo__img img { object-fit: cover; }
.c-photo--panel .c-photo__img { position: absolute; }
.c-caption { margin: 10px 0 0; color: var(--graphite); font-size: var(--fs-small); line-height: 1.45; }
.c-caption--dark { color: var(--muted-on-dark); }
@media (min-width: 1024px) {
  .c-photo--editorial { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: var(--s-6); align-items: end; }
  .c-photo--editorial .c-caption { margin: 0; padding-top: 12px; border-top: 3px solid var(--lime); }
}

/* ---- Breadcrumb ---- */
.c-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 var(--s-5); padding: 0; list-style: none; font-size: var(--fs-small); }
.c-crumbs li + li::before { content: "/"; margin-inline: 10px; color: var(--industrial); }
.c-crumbs a { color: inherit; }
.c-crumbs [aria-current] { color: var(--graphite); }
.c-crumbs--dark { color: var(--text-on-dark); }
.c-crumbs--dark a { color: var(--white); }
.c-crumbs--dark [aria-current] { color: var(--muted-on-dark); }

/* ---- 1. Header & navigation ---- */
.c-utility { background: var(--light); font-size: var(--fs-small); }
.c-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 40px; }
.c-door { display: flex; gap: 4px; }
.c-door__btn { min-height: 40px; padding: 4px 12px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; font-weight: 500; }
.c-door__btn[aria-pressed="true"] { background: var(--white); color: var(--charcoal); font-weight: 700; box-shadow: var(--shadow-sm); }
.c-utility__contact { display: none; gap: var(--s-5); margin: 0; }
.c-utility__contact a { color: var(--graphite); text-decoration: none; }
.c-utility__contact a:hover { color: var(--charcoal); text-decoration: underline; }
@media (min-width: 768px) { .c-utility__contact { display: flex; } }
@media (max-width: 1023px) { .c-door__btn { min-height: 44px; } }

.c-header { position: sticky; top: 0; z-index: 60; background: var(--white); border-bottom: 1px solid var(--hairline); transition: box-shadow var(--t-med) var(--ease); }
.c-scrolled .c-header { box-shadow: var(--shadow-sm); }
.c-header__inner { position: relative; display: flex; align-items: center; gap: var(--s-5); min-height: 76px; transition: min-height var(--t-med) var(--ease); }
.c-header__brand { display: block; flex: none; margin-right: auto; }
.c-header__brand img { width: auto; height: 52px; transition: height var(--t-med) var(--ease); }
.c-header__cta { display: none; }
.c-header__menu {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--white);
  color: var(--charcoal); font: 700 0.9375rem var(--font-display); text-decoration: none; cursor: pointer;
}
.c-burger, .c-burger::before, .c-burger::after, .c-burger span { display: block; width: 18px; height: 2px; background: currentColor; }
.c-burger { position: relative; background: none; }
.c-burger::before, .c-burger::after { content: ""; position: absolute; left: 0; }
.c-burger::before { top: -6px; }
.c-burger::after { top: 6px; }
.c-nav { display: none; }
.c-caret { display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast) var(--ease); }
[aria-expanded="true"] > .c-caret { transform: translateY(1px) rotate(225deg); }

@media (min-width: 768px) { .c-header__cta { display: inline-flex; min-height: 44px; padding-inline: 20px; } }
@media (min-width: 1024px) {
  .c-header__inner { min-height: 92px; gap: var(--s-4); }
  .c-header__brand { margin-right: var(--s-4); }
  .c-header__brand img { height: 68px; }
  .c-scrolled .c-header__inner { min-height: 72px; }
  .c-scrolled .c-header__brand img { height: 52px; }
  .c-header__menu { display: none; }
  .c-nav { display: block; margin-right: auto; }
  .c-nav__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .c-nav__link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
    border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
    color: var(--charcoal); font: 600 0.9375rem var(--font-display); text-decoration: none;
    transition: background-color var(--t-fast) var(--ease);
  }
  .c-nav__link:hover, .c-nav__link[aria-expanded="true"] { background: var(--light); }
  .c-nav__link[aria-current], .c-nav__link[data-active] { box-shadow: inset 0 -3px 0 var(--lime); border-radius: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .c-nav__link { padding-inline: 10px; font-size: 0.875rem; }
  .c-header__cta { padding-inline: 16px; font-size: 0.875rem; }
}

.c-mega {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px); z-index: 61;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lift);
}
.c-mega:not([hidden]) { animation: c-drop var(--t-fast) var(--ease) both; }
@keyframes c-drop { from { opacity: 0; transform: translateY(-8px); } }
.c-mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-6); padding: var(--s-6); }
.c-mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--s-4); margin: 0; padding: 0; list-style: none; align-content: start; }
.c-mega--industries .c-mega__grid, .c-mega--resources .c-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-mega__item { display: flex; align-items: flex-start; gap: 14px; padding: 12px; border-radius: var(--radius); color: var(--charcoal); text-decoration: none; transition: background-color var(--t-fast) var(--ease); }
.c-mega__item:hover, .c-mega__item[aria-current] { background: var(--light); }
.c-mega__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--radius); background: var(--light); }
.c-mega__item:hover .c-mega__icon { background: var(--white); }
.c-mega__text { display: grid; gap: 6px; }
.c-mega__title { font-family: var(--font-display); font-weight: 700; line-height: 1.25; }
.c-mega__sub { color: var(--graphite); font-size: var(--fs-small); line-height: 1.4; }
.c-mega__side { display: grid; gap: var(--s-3); align-content: start; padding-left: var(--s-6); border-left: 1px solid var(--hairline); }
.c-mega__photo .c-photo__frame { border-radius: var(--radius); }

.c-drawer { display: none; }
.c-drawer:not(.is-js):target, .c-drawer.is-open {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; background: var(--white);
}
.c-drawer-open { overflow: hidden; }
.c-drawer__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); border-bottom: 1px solid var(--hairline); background: var(--white); }
.c-drawer__title { font: 800 1.125rem var(--font-display); color: var(--charcoal); }
.c-drawer__close { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--rule); border-radius: 50%; background: var(--white); color: var(--charcoal); cursor: pointer; }
.c-x { position: relative; width: 18px; height: 18px; }
.c-x::before, .c-x::after { content: ""; position: absolute; top: 8px; left: 0; width: 18px; height: 2px; background: currentColor; transform: rotate(45deg); }
.c-x::after { transform: rotate(-45deg); }
.c-drawer__nav { padding: 8px var(--gutter); }
.c-drawer__list { margin: 0; padding: 0; list-style: none; }
.c-drawer__list > li { border-bottom: 1px solid var(--hairline); }
.c-drawer__link, .c-drawer__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 8px 0;
  border: 0; background: none; color: var(--charcoal); font: 700 1.125rem var(--font-display); text-align: left; text-decoration: none; cursor: pointer;
}
.c-drawer__sub { margin: 0; padding: 0 0 12px; list-style: none; }
.c-drawer__sub a { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--graphite); text-decoration: none; }
.c-drawer__sub a[aria-current] { color: var(--charcoal); font-weight: 700; }
.c-drawer__all { font-weight: 700; color: var(--charcoal) !important; text-decoration: underline !important; text-decoration-color: var(--lime) !important; text-decoration-thickness: 3px !important; }
.c-drawer__foot { display: grid; gap: var(--s-4); margin-top: auto; padding: var(--s-5) var(--gutter) var(--s-6); background: var(--light); }
.c-drawer__contact { display: grid; gap: 6px; margin: 0; }
.c-drawer__contact a { display: inline-flex; min-height: 44px; align-items: center; color: var(--charcoal); }
@media (min-width: 1024px) { .c-drawer, .c-drawer:target, .c-drawer.is-open { display: none; } }

/* ---- 2. Hero ---- */
.c-hero { position: relative; }
.c-hero__title { margin: 0 0 var(--s-4); color: inherit; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.03em; max-width: 18ch; }
.c-hero__sub { margin: 0 0 var(--s-4); font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 600; line-height: 1.3; }
.c-hero__lede { max-width: 56ch; margin: 0 0 var(--s-5); font-size: var(--fs-lede); line-height: 1.55; }
.c-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s-5); }
.c-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* cinematic, industry, slider and image band: full-bleed photo with the text on a scrim */
.c-hero--cinematic, .c-hero--industry, .c-slider, .c-band { background: var(--charcoal); color: var(--white); --focus: var(--lime); }
/* height from the width (4:5 phones, 16:9 tablets, 21:9 desktop) with a floor for the text; no aspect-ratio here,
   because aspect-ratio plus min-height would widen the frame beyond the screen */
.c-hero__photo .c-photo__frame, .c-band__photo .c-photo__frame { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; aspect-ratio: auto; min-height: max(560px, 125vw); border-radius: 0; }
.c-hero__photo figcaption, .c-band__photo figcaption { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) 14px; }
.c-hero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(32, 32, 32, 0.92) 0%, rgba(32, 32, 32, 0.72) 55%, rgba(32, 32, 32, 0.25) 100%); }   /* functional scrim (CLAUDE.md §4) */
.c-hero__content, .c-band__content { position: relative; z-index: 1; padding-block: var(--s-9) var(--s-8); }
.c-hero--cinematic .c-hero__sub, .c-hero--industry .c-hero__sub, .c-slider .c-hero__lede, .c-hero--cinematic .c-hero__lede, .c-hero--industry .c-hero__lede { color: var(--text-on-dark); }
.c-hero--industry { box-shadow: inset 0 4px 0 var(--sig, var(--lime)); }
@media (min-width: 768px) {
  .c-hero__photo .c-photo__frame, .c-band__photo .c-photo__frame { min-height: max(520px, 56.25vw); }
}
@media (min-width: 1024px) {
  .c-hero__photo .c-photo__frame, .c-band__photo .c-photo__frame { align-items: center; min-height: clamp(560px, 42.86vw, 720px); }
  .c-hero__scrim { background: linear-gradient(90deg, rgba(32, 32, 32, 0.9) 0%, rgba(32, 32, 32, 0.72) 42%, rgba(32, 32, 32, 0.15) 78%); }
  .c-hero__content > *, .c-band__content > * { max-width: 640px; }
}

.c-hero--editorial { padding-block: var(--s-8) var(--section-y); background: var(--white); }
.c-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.c-hero--editorial .c-hero__title { color: var(--charcoal); font-size: var(--fs-h1); }
.c-hero--editorial .c-hero__sub { color: var(--charcoal); }
@media (min-width: 1024px) { .c-hero--editorial .c-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-9); } }

.c-hero--product, .c-hero--evidence { padding-block: var(--s-8) var(--section-y); background: var(--charcoal); color: var(--white); --focus: var(--lime); }
.c-hero--product .c-hero__title, .c-hero--evidence .c-hero__title { font-size: var(--fs-h1); }
.c-hero--product .c-hero__sub, .c-hero--product .c-hero__lede, .c-hero--evidence .c-hero__sub, .c-hero--evidence .c-hero__lede { color: var(--text-on-dark); }
.c-hero__visual { position: relative; }
.c-hero__visual--pack { padding-bottom: var(--s-8); }
.c-hero__scene .c-photo__frame { border-radius: var(--radius-lg); }
.c-hero__pack { position: absolute; left: -4px; bottom: 0; z-index: 1; width: 42%; max-width: 260px; }
.c-hero__pack .c-photo__frame { border: 6px solid var(--white); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lift); }
.c-hero__pack .c-caption { color: var(--muted-on-dark); }
.c-hero__visual--pack .c-hero__scene figcaption { padding-left: calc(42% + 16px); }
@media (min-width: 1024px) {
  .c-hero--product .c-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-9); }
  .c-hero__pack { left: -40px; }
}
.c-hero__proof { position: relative; padding: var(--s-6); border-radius: var(--radius-lg); background: var(--charcoal-2); box-shadow: inset 0 4px 0 var(--sig, var(--lime)); }
.c-hero__proof-sector { margin: 0 0 var(--s-4); }
.c-hero__proof-fig { margin: 0 0 var(--s-2); color: var(--white); }
.c-hero__proof-label { margin: 0 0 var(--s-4); color: var(--text-on-dark); font-size: 1.0625rem; }
@media (min-width: 1024px) { .c-hero--evidence .c-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-9); } }

/* ---- Hero slider ---- */
.c-slider__stage { display: grid; }
.c-slider .c-hero__title { font-size: var(--fs-h1); max-width: 20ch; }
.c-slide { grid-area: 1 / 1; min-width: 0; }
.c-slider.is-js .c-slide { visibility: hidden; opacity: 0; transition: opacity 0.8s var(--ease), visibility 0s linear 0.8s; }
.c-slider.is-js .c-slide.is-active { z-index: 1; visibility: visible; opacity: 1; transition: opacity 0.8s var(--ease); }
/* without the script: each thumbnail link opens its slide */
.c-slider:not(.is-js) .c-slide:target { display: block; }
.c-slider:not(.is-js):has(.c-slide:target) .c-slide.is-active:not(:target) { display: none; }
.c-slider__bar { display: flex; align-items: flex-start; gap: var(--s-4); padding-bottom: var(--s-4); }
.c-slider__thumbs { display: flex; flex: 1; gap: var(--s-4); min-width: 0; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; list-style: none; scroll-snap-type: x proximity; }
.c-slider__thumbs > li { flex: 0 0 auto; min-width: 140px; scroll-snap-align: start; }
.c-slider__thumb { position: relative; display: grid; gap: 4px; min-height: 64px; padding: 14px 0 8px; color: var(--muted-on-dark); text-decoration: none; }
.c-slider__thumb:hover, .c-slider__thumb[aria-current] { color: var(--white); }
.c-slider__thumb-num { font-family: var(--font-mono); font-size: 0.875rem; }
.c-slider__thumb-num::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--sig, var(--lime)); vertical-align: 1px; }
.c-slider__thumb-title { font: 600 0.9375rem var(--font-display); line-height: 1.3; }
.c-slider__progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--rule-dark); }
.c-slider__progress span { display: block; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
.c-slider__thumb[aria-current] .c-slider__progress span { transform: scaleX(1); }
.c-slider.is-playing .c-slider__thumb[aria-current] .c-slider__progress span { animation: c-progress 7s linear both; }
.c-slider.is-playing.is-paused .c-slider__thumb[aria-current] .c-slider__progress span { animation-play-state: paused; }
@keyframes c-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.c-slider__nav { display: flex; gap: 8px; padding-top: 10px; }
.c-slider__btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin-top: 10px; border: 1px solid var(--rule-dark); border-radius: 50%; background: none; color: var(--white); cursor: pointer; }
.c-slider__nav .c-slider__btn { margin-top: 0; }
.c-slider__btn:hover { border-color: var(--white); }
.c-slider__btn[hidden] { display: none; }
.c-chev { width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-2px) rotate(45deg); }
.c-chev--left { transform: translateX(2px) rotate(-135deg); }
.c-slider__pause-icon { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.c-slider__pause[aria-pressed="true"] .c-slider__pause-icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; transform: translateX(2px); }
@media (min-width: 768px) { .c-slider__thumbs > li { flex: 1 1 0; min-width: 0; } }

/* ---- 3. KPI band ---- */
.c-kpi__row { display: grid; gap: var(--s-4); }
@media (min-width: 480px) { .c-kpi__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .c-kpi--n3 .c-kpi__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-kpi--n4 .c-kpi__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.c-kpi__tile { padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--hairline); }
.c-kpi__tile--claim { box-shadow: inset 0 4px 0 var(--sig), inset 0 0 0 1px var(--hairline); }
.c-kpi--dark .c-kpi__tile { background: var(--charcoal-2); box-shadow: inset 0 0 0 1px var(--rule-dark); }
.c-kpi--dark .c-kpi__tile--claim { box-shadow: inset 0 4px 0 var(--sig), inset 0 0 0 1px var(--rule-dark); }
.c-kpi__fig { margin: 0 0 var(--s-3); }
.c-kpi__fig--word { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem) !important; }
.c-kpi__label { margin: 0; color: var(--charcoal); font-weight: 500; line-height: 1.4; }
.c-kpi--dark .c-kpi__label { color: var(--white); }
.c-kpi__meta { margin: var(--s-3) 0 0; color: var(--graphite); font-family: var(--font-mono); font-size: 0.875rem; }
.c-kpi--dark .c-kpi__meta { color: var(--muted-on-dark); }
.c-kpi__tile--note { display: flex; align-items: center; }
.c-kpi__tile--note p { margin: 0; }

/* ---- 11. Claim figure, card, strip; register wording ---- */
.c-fig { color: var(--charcoal); font-family: var(--font-display); font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.c-fig__join { margin-inline: 0.12em; font-weight: 600; }
.c-fig__unit { margin-left: 0.04em; white-space: nowrap; font-size: 0.5em; font-weight: 700; letter-spacing: 0; }
:is(.c-section--dark, .c-kpi--dark, .c-claim--dark, .c-claimstrip--dark, .c-hero) .c-fig { color: var(--white); }
.c-standing { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); color: var(--graphite); font-size: var(--fs-qual); line-height: 1.55; }
.c-standing p { margin: 0; }
.c-standing p + p { margin-top: 6px; }
.c-standing--dark { border-top-color: var(--rule-dark); color: var(--muted-on-dark); }

.c-claim { position: relative; padding: var(--s-6); border-radius: var(--radius-lg); box-shadow: inset 0 4px 0 var(--sig); }
.c-claim--dark { background: var(--charcoal-2); color: var(--text-on-dark); }
.c-claim--light { background: var(--white); box-shadow: inset 0 4px 0 var(--sig), inset 0 0 0 1px var(--hairline); }
.c-claim__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s-5); }
.c-claim__fig { margin: 0 0 var(--s-2); }
.c-claim__label { margin: 0 0 var(--s-5); font-size: 1.125rem; font-weight: 500; }
.c-claim--dark .c-claim__label { color: var(--white); }
.c-claim .proof-bars { max-width: none; margin: 0 0 var(--s-5); }
.c-claim--light .proof-bars__title, .c-claim--light .proof-bar__name { color: var(--graphite); }
.c-claim--light .proof-bar__track { background: var(--light); }
.c-claim--light .proof-bar__value { color: var(--charcoal); }
.c-claim--light .proof-bar--with .proof-bar__fill { background: var(--charcoal); }
@media (max-width: 767px) { .c-claim .proof-bar { grid-template-columns: minmax(0, 1fr) auto; } .c-claim .proof-bar__track { grid-column: 1 / -1; grid-row: 2; } }
.c-claim__text { margin: 0 0 var(--s-4); line-height: 1.6; }
.c-claim__record { margin: 0; font-size: var(--fs-small); }
.c-claim__record-k { margin-right: 6px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--industrial); }
.c-claim--dark .c-claim__record-k { color: var(--muted-on-dark); }

.c-claimstrip__list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .c-claimstrip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .c-claimstrip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c-claimstrip__item { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 4px 0 var(--sig), inset 0 0 0 1px var(--hairline); }
.c-claimstrip--dark .c-claimstrip__item { background: var(--charcoal-2); color: var(--text-on-dark); box-shadow: inset 0 4px 0 var(--sig), inset 0 0 0 1px var(--rule-dark); }
.c-claimstrip__sector { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.875rem; }
.c-claimstrip__fig { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }
.c-claimstrip__label { line-height: 1.4; }
.c-claimstrip--dark .c-claimstrip__label { color: var(--white); }
.c-claimstrip__more { margin-top: auto; }

.c-apr p { margin: 0; }
.c-apr__qual { margin-top: 8px !important; font-size: var(--fs-qual); color: var(--graphite); }

/* ---- 6. Process / timeline ---- */
.c-process { position: relative; }
.c-process__steps { position: relative; z-index: 1; display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.c-process__line { position: absolute; top: 22px; bottom: 22px; left: 21px; width: 2px; background: var(--rule); }
.c-process__line span { display: block; width: 100%; height: 100%; background: var(--sig, var(--lime)); transform-origin: 50% 0; }
.c-process__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4); align-items: start; }
.c-process__num {
  display: grid; place-items: center; width: 44px; height: 44px; grid-row: span 2;
  border: 2px solid var(--charcoal); border-radius: 50%; background: var(--white); color: var(--charcoal);
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700;
}
.c-process__name { padding-top: 10px; color: var(--charcoal); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.c-process__text { margin-top: 6px; color: var(--graphite); font-size: var(--fs-small); line-height: 1.5; }
.c-process--dark .c-process__line { background: var(--rule-dark); }
.c-process--dark .c-process__num { border-color: var(--sig, var(--lime)); background: var(--charcoal); color: var(--white); }
.c-process--dark .c-process__name { color: var(--white); }
.c-process--dark .c-process__text { color: var(--muted-on-dark); }
@media (min-width: 768px) {
  .c-process__steps { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s-4); }
  .c-process__line { top: 21px; bottom: auto; left: calc(50% / var(--n)); right: calc(50% / var(--n)); width: auto; height: 2px; }
  .c-process__line span { transform-origin: 0 50%; }
  .c-process__step { grid-template-columns: none; justify-items: center; text-align: center; }
  .c-process__num { grid-row: auto; }
  .c-process__name { padding-top: var(--s-3); }
}

.c-phases { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .c-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .c-phases { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.c-phase { padding: var(--s-5); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 4px 0 var(--lime), inset 0 0 0 1px var(--hairline); }
.c-phases--dark .c-phase { background: var(--charcoal-2); box-shadow: inset 0 4px 0 var(--lime), inset 0 0 0 1px var(--rule-dark); }
.c-phase__head { display: grid; gap: 4px; margin: 0 0 var(--s-4); }
.c-phase__num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--industrial); }
.c-phases--dark .c-phase__num, .c-phases--dark .c-phase__range { color: var(--muted-on-dark); }
.c-phase__name { color: var(--charcoal); font: 800 1.0625rem var(--font-display); letter-spacing: 0.04em; }
.c-phases--dark .c-phase__name { color: var(--white); }
.c-phase__range { color: var(--graphite); font-family: var(--font-mono); font-size: 0.875rem; }
.c-phase__stages { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.c-phase__stages li { display: flex; gap: 10px; align-items: baseline; }
.c-phase__stage-num { min-width: 2ch; font-family: var(--font-mono); font-size: 0.875rem; color: var(--industrial); }
.c-phases--dark .c-phase__stages li { color: var(--text-on-dark); }
.c-phases--dark .c-phase__stage-num { color: var(--lime); }

/* ---- 8. Image modules ---- */
.c-band__statement { margin: 0 0 var(--s-5); color: var(--white); font: 800 clamp(1.75rem, 1.1rem + 2.6vw, 3rem) / 1.12 var(--font-display); letter-spacing: -0.02em; max-width: 22ch; }
.c-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
@media (min-width: 1024px) {
  .c-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-9); }
  .c-split--reverse .c-split__photo { order: 2; }
}
.c-imggrid { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .c-imggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .c-imggrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c-imggrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c-gallery { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--s-3); }
.c-gallery__track { display: flex; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.c-gallery__item { flex: 0 0 82%; scroll-snap-align: start; }
@media (min-width: 768px) { .c-gallery__item { flex-basis: 46%; } }
@media (min-width: 1024px) { .c-gallery__item { flex-basis: 38%; } }

/* ---- 7. Evidence modules ---- */
.c-evtypes { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .c-evtypes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .c-evtypes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.c-evtype { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--hairline); }
.c-evtypes--dark .c-evtype { background: var(--charcoal-2); box-shadow: inset 0 0 0 1px var(--rule-dark); color: var(--text-on-dark); }
.c-evtype__num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--industrial); }
.c-evtype__name { margin: 0; font-size: 1.125rem; }
.c-evtype__yes, .c-evtype__no { margin: 0; font-size: var(--fs-small); line-height: 1.5; }
.c-evtype__no { padding-top: var(--s-3); border-top: 1px solid var(--hairline); color: var(--graphite); }
.c-evtypes--dark .c-evtype__no { border-top-color: var(--rule-dark); color: var(--muted-on-dark); }
.c-evtype__k { display: block; margin-bottom: 4px; color: var(--charcoal); font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.c-evtypes--dark .c-evtype__k { color: var(--white); }
.c-governance__lead { max-width: 36ch; margin: 0 0 var(--s-7); color: var(--charcoal); font: 700 clamp(1.25rem, 1rem + 1vw, 1.75rem) / 1.3 var(--font-display); }
.c-section--dark .c-governance__lead { color: var(--white); }
.c-governance__rule { margin: var(--s-6) 0 0; color: var(--graphite); font-size: var(--fs-small); }
.c-section--dark .c-governance__rule { color: var(--muted-on-dark); }
.c-discipline { padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--charcoal); color: var(--text-on-dark); }
.c-discipline__head { max-width: 30ch; margin: 0 0 var(--s-5); color: var(--white); font: 800 clamp(1.375rem, 1rem + 1.4vw, 2rem) / 1.2 var(--font-display); }
.c-discipline ul { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.c-discipline li { display: flex; gap: 12px; }
.c-discipline li::before { content: ""; width: 10px; height: 10px; flex: none; margin-top: 0.55em; border-radius: 2px; background: var(--lime); }

/* ---- 9. CTA system ---- */
.c-ctaband { padding-block: clamp(48px, 6vw, 88px); background: var(--lime); color: var(--charcoal); --focus: var(--charcoal); }
.c-ctaband__inner { display: grid; gap: var(--s-6); align-items: center; }
.c-ctaband__title { margin: 0 0 var(--s-3); color: var(--charcoal); }
.c-ctaband__text { max-width: 52ch; margin: 0; color: var(--charcoal); font-size: var(--fs-lede); }
.c-ctaband__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (min-width: 1024px) { .c-ctaband__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .c-ctaband__actions { justify-content: flex-end; } }
.c-ctacard { display: grid; gap: var(--s-5); padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); }
.c-ctacard--dark { background: var(--charcoal); color: var(--text-on-dark); --focus: var(--lime); }
.c-ctacard--dark .c-ctacard__title { color: var(--white); }
.c-ctacard--light { background: var(--light); }
.c-section--light .c-ctacard--light { background: var(--white); }
.c-ctacard__title { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.c-ctacard__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.c-ctacard--contact { grid-template-columns: minmax(0, 1fr); }
.c-ctacard--contact address { font-style: normal; line-height: 1.6; }
@media (min-width: 768px) { .c-ctacard--contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-routes { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .c-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-route { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5) 0 0; border-top: 2px solid var(--charcoal); }
.c-route__num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--industrial); }
.c-route__title { margin: 0; font-size: var(--fs-h3); }
.c-route p { margin: 0; }

/* ---- 10. Interactive ---- */
.c-accordion { border-top: 1px solid var(--rule); }
.c-acc { border-bottom: 1px solid var(--rule); }
.c-acc__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding: var(--s-4) 0; cursor: pointer; list-style: none; color: var(--charcoal); font: 700 1.125rem / 1.35 var(--font-display); }
.c-acc__q::-webkit-details-marker { display: none; }
.c-acc__icon { position: relative; width: 32px; height: 32px; flex: none; border: 1px solid var(--rule); border-radius: 50%; }
.c-acc__icon::before, .c-acc__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; transition: transform var(--t-fast) var(--ease); }
.c-acc__icon::after { transform: rotate(90deg); }
.c-acc[open] .c-acc__icon::after { transform: rotate(0deg); }
.c-acc[open] .c-acc__icon { border-color: var(--charcoal); background: var(--lime); }
.c-acc__a { max-width: 70ch; padding-bottom: var(--s-5); }
.c-acc__a p:last-child { margin-bottom: 0; }

.c-tabs__list { display: flex; gap: 8px; margin-bottom: var(--s-5); padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; }
.c-tabs__tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--white); cursor: pointer;
  color: var(--charcoal); font: 600 0.9375rem var(--font-display); white-space: nowrap;
}
.c-tabs__tab[style*="--sig"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sig); }
.c-tabs__tab[aria-selected="true"] { border-color: var(--charcoal); background: var(--charcoal); color: var(--white); }
.c-tabs__tab:hover:not([aria-selected="true"]) { border-color: var(--charcoal); }
.c-tabs--dark .c-tabs__tab { border-color: var(--rule-dark); background: transparent; color: var(--white); }
.c-tabs--dark .c-tabs__tab[aria-selected="true"] { border-color: var(--white); background: var(--white); color: var(--charcoal); }
.c-tabs__panel { outline-offset: 6px; }
.c-tabs__panel + .c-tabs__panel { margin-top: var(--s-6); }
.c-tabs[data-active] .c-tabs__panel + .c-tabs__panel { margin-top: 0; }
@media (min-width: 1024px) { .c-tabs__list { flex-wrap: wrap; overflow: visible; } }

.c-switch { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 4px 0 var(--sig), inset 0 0 0 1px var(--hairline); }
.c-tabs--dark .c-switch { background: var(--charcoal-2); box-shadow: inset 0 4px 0 var(--sig), inset 0 0 0 1px var(--rule-dark); }
.c-switch__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 var(--s-5); }
.c-switch__name { color: var(--charcoal); font: 800 var(--fs-h3) var(--font-display); }
.c-tabs--dark .c-switch__name { color: var(--white); }
.c-switch__dl { display: grid; gap: var(--s-5); margin: 0 0 var(--s-4); }
@media (min-width: 768px) { .c-switch__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-switch__dl dt, .c-facts dt { margin-bottom: 6px; color: var(--graphite); font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.c-tabs--dark .c-switch__dl dt { color: var(--muted-on-dark); }
.c-switch__dl dd, .c-facts dd { margin: 0; }
.c-switch__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.c-table-wrap { max-width: 100%; }
.c-compare { width: 100%; border-collapse: collapse; }
.c-compare th, .c-compare td { padding: var(--s-4); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.c-compare thead th { color: var(--graphite); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.c-compare tbody th { min-width: 12rem; font-family: var(--font-display); }
.c-compare tbody th a { display: block; margin-bottom: 8px; color: var(--charcoal); }
@media (max-width: 767px) {   /* stack: every row becomes a card of label/value pairs */
  .c-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .c-compare, .c-compare tbody, .c-compare tr, .c-compare th, .c-compare td { display: block; }
  .c-compare tr { margin-bottom: var(--s-4); padding: var(--s-4); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--hairline); }
  .c-compare th, .c-compare td { padding: 8px 0; border: 0; }
  .c-compare td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--graphite); font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; }
}

/* ---- 4 / 5. Product and industry stories ---- */
.c-story__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s-4) 0 var(--s-5); }
.c-story__statement { max-width: 34ch; margin: var(--s-4) 0 0; color: var(--charcoal); font: 700 clamp(1.375rem, 1rem + 1.4vw, 2rem) / 1.3 var(--font-display); letter-spacing: -0.01em; }
.c-story__statement--center { margin: 0 auto var(--s-8); text-align: center; }
.c-facts { display: grid; gap: var(--s-5); margin: 0; }
.c-cards { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .c-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .c-cards--3, .c-cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .c-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.c-card {
  position: relative; display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5);
  border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.c-card p { margin: 0; }
.c-card--rule { box-shadow: inset 0 4px 0 var(--lime), inset 0 0 0 1px var(--hairline); }
.c-card--sig { box-shadow: inset 0 4px 0 var(--sig), inset 0 0 0 1px var(--hairline); }
.c-card__title { margin: 0; font-size: 1.125rem; }
.c-card__link { color: var(--charcoal); text-decoration: none; }
.c-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.c-card:has(.c-card__link):hover { transform: translateY(-2px); box-shadow: inset 0 4px 0 var(--sig, var(--lime)), var(--shadow-md); }
.c-card:has(.c-card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.c-card__link:focus-visible { outline: none; }
.c-card__foot { margin-top: auto !important; padding-top: var(--s-3); }
.c-measures { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 480px) { .c-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-measure { padding: 14px 18px; border-radius: var(--radius); background: var(--white); box-shadow: inset 4px 0 0 var(--sig, var(--lime)); color: var(--charcoal); font-weight: 600; }
.c-two__side { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--white); }

/* ---- 12. Qualification ---- */
.c-qual { margin-top: var(--s-6); padding: 18px 22px; border-radius: var(--radius); background: var(--white); box-shadow: inset 4px 0 0 var(--industrial), inset 0 0 0 1px var(--hairline); color: var(--graphite); font-size: var(--fs-qual); line-height: 1.55; }
.c-section--white .c-qual--light { background: var(--light); box-shadow: inset 4px 0 0 var(--industrial); }
.c-qual__label { margin: 0 0 6px; color: var(--charcoal); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.c-qual p { margin: 0; }
.c-qual ul { display: grid; gap: 6px; margin: 0; padding-left: 1.1em; }
.c-qual--compact { padding: 12px 16px; }
.c-qual--compact .c-qual__label { display: inline; margin-right: 8px; }
.c-qual--compact .c-qual__label + p { display: inline; }
.c-qual--dark { background: var(--charcoal-2); box-shadow: inset 4px 0 0 var(--lime), inset 0 0 0 1px var(--rule-dark); color: var(--text-on-dark); }
.c-qual--dark .c-qual__label { color: var(--white); }

/* ---- Motion (motion.js data-m; nothing is hidden unless <html class="motion">) ---- */
@keyframes c-rise { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: no-preference) {
  .motion [data-m="reveal"]:not(.is-in), .motion [data-m="stagger"]:not(.is-in) > * { opacity: 0; }
  .motion [data-m="reveal"].is-in { animation: c-rise 0.32s var(--ease) backwards; }
  .motion [data-m="stagger"].is-in > * { animation: c-rise 0.32s var(--ease) calc(var(--mi, 0) * 60ms) backwards; }
  .motion [data-m="settle"] img { transition: transform 7s var(--ease-out); }
  .motion [data-m="settle"]:not(.is-in) img { transform: scale(1.06); }
  .motion [data-m="draw"] .c-process__line span { transition: transform 1.2s var(--ease-out) 0.15s; }
  .motion [data-m="draw"]:not(.is-in) .c-process__line span { transform: scaleY(0); }
  .motion [data-m="draw"] .c-process__num { transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); transition-delay: calc(0.2s + var(--i, 0) * 0.16s); }
  .motion [data-m="draw"].is-in .c-process__num { box-shadow: 0 0 0 4px rgba(158, 233, 29, 0.35); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .motion [data-m="draw"]:not(.is-in) .c-process__line span { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .c-btn:hover, .c-card:has(.c-card__link):hover { transform: none; }
  .c-btn:hover .icon, .c-link:hover .icon { transform: none; }
  .c-mega:not([hidden]) { animation: none; }
  .c-slider.is-js .c-slide, .c-slider.is-js .c-slide.is-active { transition: none; }
}

/* ==========================================================================
   21. Editorial design (owner chose "Engineering editorial", 8 Oct 2026)
   Scoped to body.ed so it can be rolled out page by page; Home is the sample.
   One type scale (7 sizes), weight 700 headings, quiet labels instead of pills,
   full-width sections instead of rounded islands, thin rules, restrained motion.
   ========================================================================== */
.ed {
  --ed-display: clamp(2.25rem, 1.35rem + 2.6vw, 3.5rem);    /* 36 to 56: the one big headline per page */
  --ed-h2: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem);         /* 28 to 40: every section heading */
  --ed-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);     /* 18 to 21: card and column titles */
  --ed-lede: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);    /* 17 to 19: introductions */
  --ed-body: var(--fs-body);                                /* 16 to 18 (brand rule) */
  --ed-small: 0.9375rem;                                    /* 15: supporting text */
  --ed-label: 0.8125rem;                                    /* 13: labels, uppercase */
  --ed-space: clamp(64px, 8vw, 112px);
  --ed-rule: rgba(32, 32, 32, 0.12);
  --ed-rule-dark: rgba(255, 255, 255, 0.16);
}
.ed main { --section-y: var(--ed-space); }

/* Type: one scale, no extra-bold, no animated word splitting */
.ed main h1, .ed main h2, .ed main h3 { font-weight: 700; letter-spacing: -0.02em; }
.ed main h2, .ed .sec-head h2 { font-size: var(--ed-h2); line-height: 1.15; margin: 0 0 16px; }
.ed main h3 { font-size: var(--ed-h3); line-height: 1.3; letter-spacing: -0.01em; }
.ed .lede, .ed .sec-head .lede { font-size: var(--ed-lede); line-height: 1.6; color: var(--graphite); font-weight: 400; max-width: 38rem; }
.ed .section--dark .lede, .ed .cta-final .lede { color: var(--text-on-dark); }
.ed [data-split] .w, .ed [data-split] .w__i { display: inline !important; animation: none !important; opacity: 1 !important; transform: none !important; translate: none !important; }
.ed .hl, .ed .hl-draw { background: none !important; box-shadow: none !important; color: inherit; }

/* Labels: small uppercase text after a short lime rule (replaces the glowing pills) */
.ed .eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--graphite); font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.ed .eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 0; background: var(--lime); box-shadow: none; }
.ed .section--dark .eyebrow, .ed .cta-final .eyebrow, .ed .slide .eyebrow { color: rgba(255, 255, 255, 0.82); background: none; border: 0; }

/* Sections: full width, no rounded islands, calm rhythm */
.ed main > .section--light, .ed main > .section--dark, .ed main > .cta-band, .ed main > .page-hero {
  margin-inline: 0; border-radius: 0; box-shadow: none;
}
.ed .section--light { background: var(--light); }
.ed .sec-head { max-width: 46rem; margin-bottom: clamp(36px, 4vw, 56px); }
.ed .sec-head--center { margin-inline: 0; text-align: left; }
.ed .sec-head--center .lede { margin-inline: 0; }
@media (min-width: 900px) {
  .ed .sec-head--split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; max-width: none; }
  .ed .sec-head--split .lede { margin: 0 0 6px; }
}

/* Buttons: squared, quiet, consistent */
.ed .btn { border-radius: 4px; font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; box-shadow: none !important; min-height: 48px; padding: 12px 22px; }
.ed .btn::before, .ed .btn::after { display: none !important; }
.ed .btn--primary:hover { background: #8fd415; color: var(--charcoal); }
.ed .link-arrow { font-weight: 600; font-size: 1rem; }
.ed [data-tilt] { transform: none !important; }
.ed [data-magnetic] { translate: none !important; }

/* Qualification: present and readable, but quiet */
.ed .qual { margin-top: 36px; padding: 0 0 0 16px; border: 0; border-left: 2px solid var(--ed-rule); background: none; border-radius: 0; }
.ed .qual__label { font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.ed .qual p, .ed .qual li { font-size: var(--fs-small); color: var(--graphite); }
.ed .caption, .ed figcaption, .ed .slide__caption { font-size: var(--fs-small); }

/* ---- Header ---- */
.ed .site-header { border-bottom: 1px solid var(--ed-rule); box-shadow: none; }
.ed .primary-nav__link { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--charcoal); }
.ed .site-header__cta .btn { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; }

/* ---- Hero slider: full width, text left, slide names as a tab bar underneath ---- */
.ed .hero { padding: 0; background: var(--white); }
.ed .hero__inner { display: block; max-width: none; padding: 0; }
.ed .hero__stage { border-radius: 0; height: clamp(560px, 44vw, 660px); }
.ed .slide__scrim { background: linear-gradient(90deg, rgba(15, 15, 15, 0.86) 0%, rgba(15, 15, 15, 0.6) 40%, rgba(15, 15, 15, 0.1) 72%), linear-gradient(0deg, rgba(15, 15, 15, 0.55) 0%, rgba(15, 15, 15, 0) 30%); }
.ed .slide__content { max-width: min(760px, 62%); padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
.ed .slide__eyebrow { font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin-bottom: 18px; }
.ed .slide__eyebrow .sicon { display: none; }
.ed .slide__title { font-size: var(--ed-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 18px; max-width: 18ch; }
.ed .slide__sub { font-size: var(--ed-lede); line-height: 1.55; color: rgba(255, 255, 255, 0.86); max-width: 34rem; margin: 0 0 28px; }
.ed .slide__chip { display: none; }
.ed .slide .btn-row { gap: 12px; }
.ed .slide .btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.7); color: var(--white); background: transparent; }
.ed .slide .btn--ghost:hover { background: var(--white); color: var(--charcoal); }
.ed .slide__pack { border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
@media (min-width: 1080px) {
  .ed .slide__pack { right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
  .ed .slide:has(.slide__pack) .slide__content { max-width: min(760px, 58%); }
}
.ed .hero__controls { right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); left: auto; bottom: 22px; }
.ed .hero__btn { border-radius: 4px; }
.ed .hero__counter { font-family: var(--font-body); }
/* the slide list becomes a row of named tabs with a thin progress line */
.ed .hero__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 0; height: auto;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--ed-rule);
}
.ed .hero__rail::-webkit-scrollbar { display: none; }
.ed .hero__rail li { min-width: 0; }
.ed .thumb { display: block; width: 100%; height: 100%; padding: 16px 14px 18px 0; border: 0; border-top: 2px solid var(--ed-rule); border-radius: 0; background: none; text-align: left; }
.ed .thumb:hover { background: none; }
.ed .thumb[aria-current="true"] { border-top-color: var(--lime); }
.ed .thumb__media { display: none; }
.ed .thumb__name { display: block; color: var(--charcoal); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.ed .thumb__unit { display: block; margin-top: 2px; color: var(--graphite); font-family: var(--font-body); font-size: var(--ed-label); }

/* ---- Customer logos (preview) ---- */
.ed .logo-strip { padding-block: 40px; border-bottom: 1px solid var(--ed-rule); }
.ed .logo-strip__lead { font-size: var(--ed-small); font-weight: 600; letter-spacing: 0; }
.ed .logo-strip__item { border-radius: 4px; }

/* ---- Product range ---- */
.ed .range-grid { gap: 28px; }
.ed .range-card { border: 0; border-radius: 0; box-shadow: none; background: none; translate: none !important; }
.ed .range-card:hover { box-shadow: none; }
.ed .range-card__media .media { aspect-ratio: 4 / 3; border-radius: 4px; background: var(--light); }
.ed .range-card__caption { padding: 8px 0 0; }
.ed .range-card__body { padding: 18px 0 0; gap: 8px; }
.ed .range-card .chip { background: none; border: 0; padding: 0; color: var(--graphite); font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ed .range-card .chip::before { display: none; }
.ed .range-card h3 { font-size: var(--ed-h3); }
.ed .range-card h3 a { text-decoration: none; }
.ed .range-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; }
.ed .range-card p { font-size: var(--ed-small); line-height: 1.55; color: var(--graphite); }
.ed .range-card__actions { margin-top: auto; padding-top: 10px; gap: 8px 22px; flex-wrap: wrap; }
.ed .range-card__trial { color: var(--charcoal); }

/* ---- Problems we solve: open columns divided by thin rules ---- */
.ed .problem-grid { gap: 0; }
.ed .problem { padding: 4px 32px 8px; border-radius: 0; background: none; box-shadow: none; border-left: 1px solid var(--ed-rule); }
.ed .problem:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 899px) { .ed .problem { padding: 28px 0; border-left: 0; border-top: 1px solid var(--ed-rule); } .ed .problem:first-child { border-top: 0; padding-top: 0; } }
.ed .problem__top { margin-bottom: 14px; }
.ed .problem__num { font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.12em; color: var(--graphite); }
.ed .problem__icon .sicon { width: 28px; height: 28px; }
.ed .problem__list li { font-size: var(--ed-small); }
.ed .problem__list li::before { width: 6px; height: 6px; background: var(--lime); }
.ed .problem__help { padding: 18px 0 0; border-radius: 0; background: none; border-top: 1px solid var(--ed-rule); color: var(--graphite); font-size: var(--ed-small); }
.ed .problem__help-label { color: var(--charcoal); font-family: var(--font-body); font-size: var(--ed-label); font-weight: 700; }

/* ---- How it works (dark band) ---- */
.ed .how-steps { gap: 0; }
.ed .how-step { padding: 28px 32px 8px 0; border: 0; border-top: 1px solid var(--ed-rule-dark); border-radius: 0; background: none; box-shadow: none; }
.ed .how-step__num { position: static; display: block; margin-bottom: 18px; color: var(--lime); font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.12em; opacity: 1; }
.ed .how-step__num::before { content: "Step "; }
.ed .how-step__icon { display: none; }
.ed .how-step h3 { color: var(--white); }
.ed .how-step p { color: var(--text-on-dark); font-size: var(--ed-small); }
.ed .how-steps::before, .ed .how-step::before, .ed .how-step::after { display: none !important; }

/* ---- Quick estimate ---- */
.ed .quick-calc { border-radius: 6px; box-shadow: none; border: 1px solid var(--ed-rule); background: var(--white); }
.ed .quick-calc__kicker { font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.ed .calc-input { border-radius: 4px; }
.ed .quick-calc__out { border-radius: 4px; }
.ed .quick-calc__out dd { font-family: var(--font-display); font-weight: 700; }

/* ---- Two routes ---- */
.ed .door-card { border-radius: 6px; box-shadow: none; }
.ed .door-card__label { font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ed .door-card h2 { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); }
.ed .door-card__unit { display: none; }

/* ---- Final call to action ---- */
.ed .cta-final { border-radius: 0; margin-inline: 0; }
.ed .cta-final h2 { font-size: var(--ed-h2); color: var(--white); }
.ed .cta-final__routes a { font-size: var(--ed-body); font-weight: 600; }
.ed .cta-final__label { font-family: var(--font-body); font-size: var(--ed-label); letter-spacing: 0.12em; text-transform: uppercase; }

/* ---- Footer ---- */
.ed .site-footer { border-radius: 0; margin-inline: 0; }

/* Editorial: second pass after the first screenshots */
.ed { --font-mono: var(--font-body); }   /* no "computer code" type on editorial pages */
.ed .ticker { display: none; }             /* the slide tabs already name every sector */
.ed .slide__eyebrow { background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ed .slide__eyebrow::before, .ed .slide__eyebrow:has(.sicon)::before { display: block; width: 28px; height: 2px; border-radius: 0; background: var(--lime); box-shadow: none; }
.ed .slide__title { max-width: 20ch; }
.ed .thumb[aria-current="true"] { background: none; }
.ed .thumb[aria-current="true"] .thumb__name { color: var(--charcoal); }
.ed .thumb[aria-current="true"] .thumb__unit { color: var(--graphite); }
.ed main .qual { background: none !important; box-shadow: none !important; }
.ed .range-card__caption, .ed .sector-tile .caption { font-size: 0.8125rem; line-height: 1.45; color: #5f6461; }

/* industries: name over the photo, as before, but calm */
.ed .sector-tile__link { border-top: 0; border-radius: 4px; background: var(--charcoal); color: var(--white); }
.ed .sector-tile .media { aspect-ratio: 3 / 2; border-radius: 0; }
.ed .sector-tile__text { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: grid; gap: 2px; padding: 0; background: none; color: var(--white); }
.ed .sector-tile__name { font-family: var(--font-display); font-size: var(--ed-h3); font-weight: 700; letter-spacing: -0.01em; color: var(--white); }
.ed .sector-tile__unit { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: var(--ed-small); }
.ed .sector-tile__link:hover .sector-tile__name { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ed .sector-tile__link::after { inset: 45% 0 0; }
.ed .calc-help { font-size: var(--ed-small); color: var(--graphite); }
.ed .door-card__label { display: none; }   /* the card title already says it */
.ed .slide__title { max-width: 22ch; }

/* Editorial: closing section and footer */
.ed .cta-final { margin: 0; }
.ed .cta-final + *, .ed main + .site-footer { margin-top: 0; }
.ed main:has(> .cta-final:last-child) { margin-bottom: 0; padding-bottom: 0; }
.ed .cta-final__routes { display: grid; gap: 0; margin-top: 28px; padding: 0; list-style: none; max-width: 30rem; }
.ed .cta-final__routes li { border-top: 1px solid var(--ed-rule-dark); }
.ed .cta-final__routes li:last-child { border-bottom: 1px solid var(--ed-rule-dark); }
.ed .cta-final__routes a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--white); text-decoration: none; }
.ed .cta-final__routes a:hover { color: var(--lime); }
.ed .cta-final__actions { border-radius: 6px; }
.ed .cta-final__contact { border-radius: 4px; }
/* the left margin sits outside the text width, so the headline gets its full 700 px */
.ed .slide__content { box-sizing: content-box; max-width: min(700px, 52vw); }
@media (min-width: 1080px) { .ed .slide:has(.slide__pack) .slide__content { max-width: min(660px, 46vw); } }
@media (max-width: 1079px) { .ed .slide__content { box-sizing: border-box; max-width: none; } }

/* ==========================================================================
   Editorial roll-out (owner approved the Home sample, 8 Oct 2026):
   About, Products, product pages, Industries, industry pages, Contact, Insights
   ========================================================================== */

/* Body text keeps each component's own size (the global p rule overrode statements) */

/* ---- Page header (inner pages) ---- */
.ed main > .page-hero { padding-block: clamp(56px, 6vw, 88px); }
.ed .page-hero h1 { font-size: var(--ed-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.025em; margin-bottom: 16px; }
.ed .page-hero__sub { color: rgba(255, 255, 255, 0.92); font-family: var(--font-body); font-size: var(--ed-lede); font-weight: 600; line-height: 1.45; }
.ed .page-hero__lede, .ed .page-hero .lede { color: var(--text-on-dark); }
.ed .page-hero__frame { border-radius: 4px; box-shadow: none; }
.ed .page-hero__frame::after { display: none; }
.ed .crumbs { font-family: var(--font-body); font-size: var(--ed-small); }
.ed .page-hero__chip-label { font-family: var(--font-body); font-size: var(--ed-label); letter-spacing: 0.12em; }

/* ---- Chips: quiet squared tags (no pills, no glowing dots) ---- */
.ed .chip { border-radius: 3px; padding: 3px 8px; border: 1px solid var(--ed-rule); background: none; box-shadow: none; font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.02em; color: var(--charcoal); }
.ed .chip::before { width: 6px; height: 6px; border-radius: 1px; box-shadow: none; }
.ed .section--dark .chip, .ed .page-hero .chip, .ed .proof .chip { border-color: var(--ed-rule-dark); color: var(--white); }

/* ---- No giant faint background words ---- */
.ed .product-card__fuel, .ed .proof-panel__mark, .ed .case__mark, .ed .tech-panel__mark { display: none; }

/* ---- Numbers: small labels instead of big display numerals ---- */
.ed .pillar__num, .ed .value-tile__num, .ed .start-route__num, .ed .mini-rail__num, .ed .proof-tab__num {
  font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.12em; line-height: 1; color: var(--graphite);
}
.ed .section--dark .mini-rail__num, .ed .proof .proof-tab__num { color: rgba(255, 255, 255, 0.7); }

/* ---- Cards: one calm card style everywhere ---- */
.ed .card, .ed .value-tile, .ed .principle, .ed .who__card, .ed .leader, .ed .measure-tile, .ed .contact-card, .ed .enquiry {
  border-radius: 4px; box-shadow: none;
}
.ed .card { border: 1px solid var(--ed-rule); border-top-width: 1px; }
.ed .card:hover, .ed .card:focus-within { box-shadow: 0 10px 28px rgba(32, 32, 32, 0.08); border-color: var(--ed-rule); translate: none; }
.ed .card::after { display: none; }
.ed .pillar, .ed .product-card { border-top: 1px solid var(--ed-rule); }
.ed .pillar:hover { border-top-color: var(--ed-rule); }
.ed .pillar__top { margin-bottom: 18px; }
.ed .pillar__icon { width: 28px; height: 28px; }
.ed .value-tile { border: 1px solid var(--ed-rule); border-top: 2px solid var(--lime); background: var(--white); }
.ed .value-tile:hover { box-shadow: none; translate: none; }
.ed .card__more { font-family: var(--font-body); font-weight: 600; }

/* ---- About ---- */
.ed .who__purpose, .ed .who__card { border-radius: 4px; box-shadow: none; }
.ed .who__purpose { box-shadow: inset 0 3px 0 var(--lime); }
.ed .who__card { box-shadow: inset 0 3px 0 var(--lime); }
.ed .who__num, .ed .principle__num { width: auto; height: auto; border-radius: 0; background: none; color: var(--graphite); font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.12em; }
.ed .who__purpose .who__num { background: none; color: var(--lime); }
.ed .who__chain li::before { border-radius: 2px; }
.ed .who__chain li, .ed .who__horizon div { border-radius: 4px; }
.ed .principle { background: var(--light); }
.ed .principle:not(:last-child)::after { display: none; }
.ed .principle__num { display: block; margin-bottom: 14px; }
.ed .leader { box-shadow: none; border: 1px solid var(--ed-rule); }
.ed .leader:hover { translate: none; transform: none; box-shadow: 0 10px 28px rgba(32, 32, 32, 0.08); }
.ed .leader__role { border-radius: 3px; }
.ed .pathway li { border-radius: 3px; }
.ed .structure__item { border-radius: 4px; }
.ed .award__frame { border-radius: 4px; rotate: none; }
.ed .award__title { font-size: var(--ed-h2); }

/* ---- Products ---- */
.ed .product-card { overflow: hidden; }
.ed .product-card .card__body { padding: 20px; }
.ed .product-card__label { font-family: var(--font-body); font-size: var(--ed-label); letter-spacing: 0.12em; }
.ed .steps-rail__num { border-radius: 50%; font-family: var(--font-body); font-size: var(--ed-label); font-weight: 700; }
.ed .steps-rail__name { font-family: var(--font-body); font-size: var(--ed-small); font-weight: 600; }
.ed .data-table th { font-family: var(--font-body); font-size: var(--ed-label); letter-spacing: 0.1em; }
.ed .pfacts__item { border-radius: 4px; box-shadow: none; }
.ed .pfacts dd { font-family: var(--font-display); font-weight: 700; font-size: var(--ed-h3); line-height: 1.4; }
.ed .pgallery__stage { border-radius: 4px; box-shadow: none; }
.ed .pgallery__thumb { border-radius: 3px; }
.ed .product-strip__item { border-radius: 4px; }
.ed .route-tab { border-radius: 3px; }
.ed .route-panel__card { border-radius: 4px; box-shadow: none; }

/* ---- Results on record (product and industry pages) ---- */
.ed .proof-x__stage, .ed .proof-tab, .ed .proof-panel { border-radius: 4px; box-shadow: none; }
.ed .proof-panel__figure, .ed .proof-tab__fig { font-weight: 700; letter-spacing: -0.03em; }

/* ---- Industry pages ---- */
.ed .sector-challenge__icon { display: none; }
.ed .sector-challenge__text { font-size: var(--ed-h2); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; max-width: 28ch; }
.ed .mini-rail__step { border-radius: 4px; }
.ed .mini-rail__name { font-family: var(--font-display); font-size: var(--ed-h3); font-weight: 700; }
.ed .measure-tile { border-radius: 4px; }
.ed .sector-pick__opt, .ed .sector-strip__item { border-radius: 4px; }
.ed .value-band__item { border-radius: 4px; }
.ed .calc-results { border-radius: 4px; box-shadow: none; }
.ed .calc-form { border-radius: 4px; }
.ed .calc-out__value { font-family: var(--font-display); font-weight: 700; }

/* ---- Closing band on inner pages ---- */
.ed .cta-band__statement { color: var(--text-on-dark); font-family: var(--font-body); font-size: var(--ed-lede); font-weight: 400; }
.ed .cta-band h2 { font-size: var(--ed-h2); }

/* ---- Contact ---- */
.ed .start-route__top { margin-bottom: 14px; }
.ed .start-route .sicon { width: 26px; height: 26px; }
.ed .route-pick__opt { border-radius: 4px; }
.ed .contact-card { box-shadow: inset 0 3px 0 var(--lime); }
.ed .contact-card__title { font-size: var(--ed-h3); }
.ed .contact-card__label { font-family: var(--font-body); font-size: var(--ed-label); letter-spacing: 0.12em; }
.ed .enquiry { border: 1px solid var(--ed-rule); }
.ed .form-field input, .ed .form-field textarea, .ed .form-field select { border-radius: 4px; }

/* ---- Insights ---- */
.ed .insight-card { border-radius: 4px; box-shadow: none; }
.ed .article__body h2 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.ed .article__body p, .ed .article__body li { font-size: var(--fs-body); line-height: 1.75; }
.ed .article-toc { font-family: var(--font-body); }
/* readable on dark bands */
.ed .section--dark .qual, .ed .cta-band .qual, .ed .page-hero .qual, .ed .value-band .qual { border-left-color: var(--ed-rule-dark); }
.ed .section--dark .qual p, .ed .section--dark .qual li, .ed .section--dark .qual__label, .ed .value-band .qual p, .ed .value-band .qual li, .ed .value-band .qual__label { color: var(--muted-on-dark); }
.ed .cta-band .eyebrow, .ed .value-band .eyebrow { color: rgba(255, 255, 255, 0.82); }
.ed .article__body h2 { margin: 1.9em 0 0.5em; }
.ed .article__body h2:first-child { margin-top: 0; }
.ed .article__body h3 { margin: 1.6em 0 0.4em; }
@media (max-width: 599px) { .ed .proof__foot { flex-wrap: wrap; } .ed .proof__links { flex: 1 1 100%; min-width: 0; gap: 10px 20px; } }

/* ---- Full-width page headers (owner request, 8 Oct 2026) ----
   The photo fills the whole header; the text sits on the left over a dark shade,
   like the Home slider. Text-only headers (no photo) are unchanged. */
.ed main > .page-hero:has(.page-hero__media) {
  position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: clamp(460px, 40vw, 580px); padding-block: clamp(64px, 7vw, 96px); overflow: hidden;
}
.ed .page-hero:has(.page-hero__media) .page-hero__grid { position: static; display: block; width: 100%; }
.ed .page-hero:has(.page-hero__media) .page-hero__text { position: relative; z-index: 2; max-width: 640px; }
.ed .page-hero:has(.page-hero__media) .page-hero__media { position: absolute; inset: 0; z-index: 0; margin: 0; }
.ed .page-hero:has(.page-hero__media) .page-hero__frame { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; border: 0; }
.ed .page-hero:has(.page-hero__media) .media__inner { position: absolute; inset: 0; translate: none !important; }
.ed .page-hero:has(.page-hero__media) .media__inner img, .ed .page-hero:has(.page-hero__media) .media__inner picture { width: 100%; height: 100%; object-fit: cover; }
.ed .page-hero:has(.page-hero__media) .page-hero__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 15, 15, 0.9) 0%, rgba(15, 15, 15, 0.72) 38%, rgba(15, 15, 15, 0.2) 75%, rgba(15, 15, 15, 0.1) 100%),
              linear-gradient(0deg, rgba(15, 15, 15, 0.55) 0%, rgba(15, 15, 15, 0) 35%);
}
.ed .page-hero:has(.page-hero__media) figcaption {
  position: absolute; z-index: 2; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom: 16px;
  max-width: 360px; margin: 0; text-align: right;
}
.ed .page-hero:has(.page-hero__media) figcaption .caption { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: var(--fs-small); }
.ed .page-hero .tech-panel { position: absolute; inset: 0; }
/* the sector colour line, now across the top of the header */
.ed .page-hero--sig::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 3; height: 4px; background: var(--sig); }
.ed .page-hero--sig .page-hero__frame::after { display: none; }

/* Product pages: the pack card on the right, as on the Home slides */
.ed .page-hero__aside { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.ed .page-hero__pack { pointer-events: auto; }
@media (min-width: 1080px) {
  .ed .page-hero__pack { right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); top: 50%; translate: 0 -50%; width: min(24%, 290px); aspect-ratio: 3 / 4; }
}
@media (min-width: 600px) and (max-width: 1079px) { .ed .page-hero__pack { top: 24px; right: 24px; width: 150px; aspect-ratio: 3 / 4; } }
@media (max-width: 599px) { .ed .page-hero__aside { display: none; } }

/* Phones: stronger shade so the text stays readable over any photo */
@media (max-width: 899px) {
  .ed main > .page-hero:has(.page-hero__media) { align-items: flex-end; min-height: 520px; padding-bottom: 72px; }
  .ed .page-hero:has(.page-hero__media) .page-hero__frame::before { background: linear-gradient(0deg, rgba(15, 15, 15, 0.94) 0%, rgba(15, 15, 15, 0.78) 55%, rgba(15, 15, 15, 0.35) 100%); }
  .ed .page-hero:has(.page-hero__media) figcaption { left: var(--gutter); right: var(--gutter); bottom: 14px; max-width: none; text-align: left; }
}

/* Product images section under the header */
.ed .product-gallery__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .ed .product-gallery__grid { grid-template-columns: 7fr 5fr; gap: 64px; } }
.ed .product-gallery .pgallery__stage { box-shadow: none; }
.ed .product-gallery figcaption .caption, .ed .product-gallery .caption { color: var(--graphite); }
.ed .product-gallery__media { margin: 0; }

/* ==========================================================================
   22. Forms and calculators, editorial (owner request, 8 Oct 2026)
   Same markup and behaviour (calculators.js, form.js); appearance only.
   ========================================================================== */
.ed { --ed-field-border: #c4c9c6; --ed-field-focus: 0 0 0 3px rgba(158, 233, 29, 0.45); }

/* ---- Labels, help and required marks ---- */
.ed .form-field > label, .ed .form-legend, .ed .calc-field > label, .ed .calc-field legend, .ed .calc-label {
  margin-bottom: 6px; color: var(--charcoal); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0;
}
.ed .form-help, .ed .calc-help { margin: -2px 0 8px; color: var(--graphite); font-size: var(--fs-small); line-height: 1.45; }
.ed .form-req { margin-left: 6px; color: var(--graphite); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---- Text boxes, number boxes and drop-downs ---- */
.ed .form-field input:not([type=checkbox]):not([type=radio]), .ed .form-field textarea, .ed .form-field select {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--ed-field-border); border-radius: 6px;
  background: var(--white); color: var(--charcoal); font-family: var(--font-body); font-size: 1rem;
  box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ed .form-field textarea { min-height: 150px; line-height: 1.55; }
.ed .form-field select { appearance: none; padding-right: 42px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23202020' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; }
.ed .form-field input:hover, .ed .form-field textarea:hover, .ed .form-field select:hover { border-color: var(--industrial); }
.ed .form-field input:focus, .ed .form-field textarea:focus, .ed .form-field select:focus { outline: none; border-color: var(--charcoal); box-shadow: var(--ed-field-focus); }
.ed .form-field input[aria-invalid=true], .ed .form-field textarea[aria-invalid=true], .ed .form-field select[aria-invalid=true] { border-color: #c0392b; }
.ed .form-error { margin: 6px 0 0; color: #a5281b; font-size: var(--fs-small); font-weight: 600; }
.ed .form-summary { border-radius: 6px; border-left-width: 3px; }
.ed .form-grid { gap: 22px 20px; }

/* Calculator boxes: number on the left, unit quietly on the right */
.ed .calc-input { min-height: 54px; padding: 0 14px; border: 1px solid var(--ed-field-border); border-radius: 6px; background: var(--white); }
.ed .calc-input:hover { border-color: var(--industrial); }
.ed .calc-input:focus-within { border-color: var(--charcoal); box-shadow: var(--ed-field-focus); }
.ed .calc-input input, .ed .calc-input select { height: 52px; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.ed .calc-input input::placeholder { color: #9aa09d; font-weight: 400; }
.ed .calc-prefix { color: var(--charcoal); font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; }
.ed .calc-unit { color: var(--graphite); font-family: var(--font-body); font-size: 0.875rem; white-space: nowrap; }
.ed .calc-input--select select { font-family: var(--font-body); font-size: 1rem; font-weight: 500; }
/* "Your assumption" box: a lime edge instead of a dashed border */
.ed .calc-field--assume .calc-input { border-style: solid; border-color: var(--ed-field-border); box-shadow: inset 3px 0 0 var(--lime); }
.ed .calc-field--assume .calc-input:focus-within { border-color: var(--charcoal); box-shadow: inset 3px 0 0 var(--lime), var(--ed-field-focus); }
.ed .calc-field--assume.is-empty .calc-input { background: var(--white); }
.ed .calc-tag { padding: 2px 7px; border-radius: 3px; background: rgba(158, 233, 29, 0.28); color: var(--charcoal); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: 2px; }
.ed .calc-tag--dark { background: rgba(158, 233, 29, 0.16); color: var(--lime); }
.ed .calc-field { margin: 0; }
.ed .calc-form { display: grid; gap: 26px; }

/* Sliders: a visible track with a lime fill and a clean round handle */
.ed .calc-slider { height: 24px; margin: 10px 0 0; }
.ed .calc-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--lime), var(--lime)) 0 0 / var(--fill) 100% no-repeat, #dfe3e0; }
.ed .calc-slider::-moz-range-track { height: 4px; border-radius: 2px; background: #dfe3e0; }
.ed .calc-slider::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; border: 2px solid var(--charcoal); background: var(--white); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.ed .calc-slider::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--charcoal); background: var(--white); }
.ed .calc-slider:hover::-webkit-slider-thumb { transform: none; background: var(--lime); }
.ed .is-empty .calc-slider::-webkit-slider-thumb { border-color: var(--industrial); background: var(--white); }

/* Segmented choice (Litres / Kilograms, litres per hour / per tonne) */
.ed .seg { display: inline-flex; gap: 0; padding: 3px; border: 1px solid var(--ed-field-border); border-radius: 8px; background: var(--light); }
.ed .seg label { min-height: 40px; padding: 6px 16px; border: 0; border-radius: 6px; background: none; color: var(--graphite); font-size: 0.9375rem; font-weight: 600; }
.ed .seg label:hover { color: var(--charcoal); }
.ed .seg label:has(input:checked) { background: var(--white); color: var(--charcoal); box-shadow: 0 1px 3px rgba(32, 32, 32, 0.14); }

/* Tick boxes and radio choices */
.ed .form-check { display: flex; align-items: flex-start; gap: 12px; }
.ed .form-check input[type=checkbox], .ed .mlog input[type=checkbox] { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--charcoal); cursor: pointer; }
.ed .form-check label { font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--graphite); }
.ed .route-pick { margin: 0; padding: 0; border: 0; }
.ed .route-pick__grid { gap: 10px; }
.ed .route-pick__opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--ed-field-border); border-radius: 6px; background: var(--white); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ed .route-pick__opt:hover { border-color: var(--charcoal); }
.ed .route-pick__opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--charcoal); }
.ed .route-pick__opt:has(input:checked) { border-color: var(--charcoal); box-shadow: inset 3px 0 0 var(--lime); }
.ed .route-pick__name { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--charcoal); }

/* Form cards and actions */
.ed .enquiry, .ed .calc-form:not(.quick-calc__form) { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--ed-rule); border-radius: 8px; background: var(--white); box-shadow: 0 1px 2px rgba(32, 32, 32, 0.04); }
.ed .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--ed-rule); }
.ed .form-actions .btn { min-width: 180px; }
.ed .calc-reset { border-bottom: 0; color: var(--graphite); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 4px; }

/* ---- Result panel: clear figures, quiet formulas ---- */
.ed .calc-results { padding: clamp(24px, 3vw, 34px); border: 0; border-top: 3px solid var(--sig, var(--lime)); border-radius: 8px; background: var(--charcoal); box-shadow: none; }
.ed .calc-results__kicker { margin: 0 0 14px; color: var(--lime); font-family: var(--font-body); font-size: var(--ed-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ed .calc-results__prompt { padding: 14px 16px; border: 1px dashed var(--ed-rule-dark); border-radius: 6px; background: none; color: var(--text-on-dark); font-size: 0.9375rem; line-height: 1.5; }
.ed .calc-out__row { padding: 16px 0; border-top: 1px solid var(--ed-rule-dark); }
.ed .calc-out__row:first-child { border-top: 0; }
.ed .calc-out dt { margin-bottom: 4px; color: var(--muted-on-dark); font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ed .calc-out__value, .ed .calc-out__cur { color: var(--white); font-family: var(--font-display); font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.ed .calc-out__row--main .calc-out__value, .ed .calc-out__row--main .calc-out__cur { color: var(--lime); font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem); }
.ed .calc-out__unit { color: var(--muted-on-dark); font-family: var(--font-body); font-size: 0.875rem; }
.ed .calc-out__formula { margin-top: 4px; color: rgba(255, 255, 255, 0.55); font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.45; }
.ed .calc-product { border-radius: 6px; }
.ed .calc-product__label { font-family: var(--font-body); font-size: var(--ed-label) !important; letter-spacing: 0.12em; }
.ed .calc-results .btn { width: 100%; }
.ed .calc-warn { border-radius: 6px; }

/* Calculator tabs: a quiet underline row instead of two big numbered cards */
.ed .calc-tabs__list { display: flex; gap: 0; border-bottom: 1px solid var(--ed-rule); }
.ed .calc-tab { flex: 0 1 auto; min-height: 0; padding: 14px 24px 16px 0; margin-right: 28px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none !important; color: var(--charcoal); text-align: left; translate: none; box-shadow: none; }
.ed .calc-tab::before { display: none; }
.ed .calc-tab__num { display: none; }
.ed .calc-tab__name { display: block; color: var(--graphite); font-family: var(--font-display); font-size: var(--ed-h3); font-weight: 700; }
.ed .calc-tab__desc { display: block; margin-top: 2px; color: var(--graphite) !important; font-size: var(--fs-small); }
.ed .calc-tab[aria-selected=true] { border-bottom-color: var(--lime); color: var(--charcoal); }
.ed .calc-tab[aria-selected=true] .calc-tab__name { color: var(--charcoal); }
.ed .calc-tab:hover .calc-tab__name { color: var(--charcoal); }

/* Sector picker inside the calculator */
.ed .sector-pick__opt { border: 1px solid var(--ed-field-border); border-top: 3px solid var(--sig); border-radius: 6px; translate: none !important; }
.ed .sector-pick__opt:hover { border-color: var(--charcoal); border-top-color: var(--sig); }
.ed .sector-pick__opt:has(input:checked) { background: var(--charcoal); }
.ed .sector-pick__unit { font-family: var(--font-body); }

/* Calculator page headers (formula strip) */
.ed .calc-hero { border-radius: 0; margin-inline: 0; }
.ed .calc-hero h1 { font-size: var(--ed-display); font-weight: 700; letter-spacing: -0.025em; }
.ed .calc-hero__formula span, .ed .calc-hero__formula li, .ed .calc-hero__formula b { border-radius: 3px; font-family: var(--font-body); font-size: 0.8125rem; }

/* Home quick estimate */
.ed .quick-calc__field label { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; }
.ed .quick-calc__out { border-radius: 8px; }
.ed .quick-calc__out dd { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); }

/* Mileage Log */
.ed .mlog__form, .ed .mlog__result, .ed .mlog__history { border-radius: 8px; box-shadow: none; }
.ed .mlog__table th { font-family: var(--font-body); font-size: var(--ed-label); letter-spacing: 0.1em; }
/* the estimate label in the result panel keeps its own readable style (it shares the class name) */
.ed .calc-results .calc-label { margin: 18px 0; padding: 12px 14px; border-left: 3px solid var(--lime); border-radius: 0 6px 6px 0; background: rgba(255, 255, 255, 0.06); color: var(--white); font-size: 0.9375rem; font-weight: 500; line-height: 1.5; }
/* tick box beside its sentence (the general label rule stacked them) */
.ed .form-field > label.form-check { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.55; color: var(--graphite); }
.ed .form-check > span { flex: 1; }
.ed .calc-tab__name, .ed .calc-tab__desc { white-space: normal; }
.ed .calc-tab { display: block; }
@media (max-width: 699px) { .ed .calc-tabs__list { gap: 0; } .ed .calc-tab { flex: 1 1 0; margin-right: 16px; padding-right: 0; } .ed .calc-tab__desc { display: none; } .ed .calc-tab__name { font-size: 1.0625rem; } }

/* ==========================================================================
   23. Fuel Opportunity Estimator (owner request, 8 Oct 2026)
   One dark charcoal panel: the operator's figures on the left, the estimate on the right.
   ========================================================================== */
.est {
  --est-line: rgba(255, 255, 255, 0.12);
  --est-box: #2a2a2a;
  display: grid; overflow: hidden; border-radius: 10px; background: var(--charcoal); color: var(--text-on-dark);
  box-shadow: 0 30px 60px rgba(32, 32, 32, 0.18);
}
@media (min-width: 980px) { .est { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.est__in, .est__out { padding: clamp(24px, 3.4vw, 44px); }
.est__in { display: grid; gap: 26px; align-content: start; border-bottom: 1px solid var(--est-line); }
@media (min-width: 980px) { .est__in { border-bottom: 0; border-right: 1px solid var(--est-line); } }
.est__out { display: flex; flex-direction: column; gap: 18px; background: #262626; }
.est__h { margin: 0; color: var(--white); font-family: var(--font-body); font-size: var(--ed-label, 0.8125rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.est__h::before { content: ""; display: inline-block; width: 24px; height: 2px; margin-right: 12px; vertical-align: middle; background: var(--lime); }

/* Industry chips */
.est__sectors { margin: 0; padding: 0; border: 0; }
.est__sector-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 600px) { .est__sector-list { grid-template-columns: repeat(3, 1fr); } }
.est__sector { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--est-line); border-radius: 6px; color: var(--text-on-dark); font-size: 0.875rem; font-weight: 600; line-height: 1.25; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.est__sector input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.est__sector .sicon { flex: none; width: 22px; height: 22px; color: var(--sig); }
.est__sector:hover { border-color: rgba(255, 255, 255, 0.35); }
.est__sector:has(input:checked) { border-color: var(--sig); background: rgba(255, 255, 255, 0.06); color: var(--white); box-shadow: inset 3px 0 0 var(--sig); }
.est__sector:has(input:focus-visible) { outline: 3px solid var(--lime); outline-offset: 2px; }

/* A field: label on the left, editable value box on the right, slider underneath */
.est__field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; }
.est__label { margin: 0; color: var(--white); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; }
.est__box { display: flex; align-items: center; gap: 6px; width: min(210px, 52vw); min-height: 46px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; background: var(--est-box); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.est__box:focus-within { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(158, 233, 29, 0.25); }
.est__box input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--lime); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; text-align: right; }
.est__box input::placeholder { color: rgba(255, 255, 255, 0.4); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; }
.est__box input:focus { outline: none; }
.est__unit { flex: none; color: var(--muted-on-dark); font-size: 0.875rem; }
.est__field--assume .est__box { box-shadow: inset 3px 0 0 var(--lime); }
.est__field--assume .est__box:focus-within { box-shadow: inset 3px 0 0 var(--lime), 0 0 0 3px rgba(158, 233, 29, 0.25); }
.est__help { grid-column: 1 / -1; margin: 0; color: var(--muted-on-dark); font-size: 0.875rem; line-height: 1.5; }
.est__units { grid-column: 1 / -1; margin: -10px 0 0; padding: 0; border: 0; }
.est__units .seg { padding: 3px; border: 1px solid var(--est-line); border-radius: 8px; background: transparent; display: inline-flex; }
.est__units .seg label { min-height: 36px; padding: 4px 14px; border: 0; border-radius: 6px; color: var(--muted-on-dark); font-size: 0.875rem; }
.est__units .seg label:has(input:checked) { background: rgba(255, 255, 255, 0.12); color: var(--white); box-shadow: none; }

/* Sliders on dark */
.est__slider { -webkit-appearance: none; appearance: none; grid-column: 1 / -1; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --fill: 0%; }
.est__slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--lime), var(--lime)) 0 0 / var(--fill) 100% no-repeat, rgba(255, 255, 255, 0.16); }
.est__slider::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.est__slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--lime); }
.est__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(158, 233, 29, 0.18); }
.est__slider::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--lime); }
.is-empty > .est__slider::-webkit-slider-thumb { background: #6b6f6d; box-shadow: none; }
.is-empty > .est__slider::-moz-range-thumb { background: #6b6f6d; }
.est__slider:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; border-radius: 4px; }
.est__reset { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted-on-dark); font: inherit; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.est__reset:hover { color: var(--white); }

/* Results */
.est__kicker { margin: 0; color: var(--lime); font-size: var(--ed-label, 0.8125rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.est__prompt { margin: 0; padding: 12px 14px; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 6px; color: var(--text-on-dark); font-size: 0.9375rem; line-height: 1.5; }
.est__warn { margin: 0; }
.est__main { padding: 20px 22px; border: 1px solid rgba(158, 233, 29, 0.35); border-radius: 8px; background: rgba(158, 233, 29, 0.06); }
.est__main-label { margin: 0 0 4px; color: var(--muted-on-dark); font-size: 0.875rem; font-weight: 600; }
.est__main-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.est__main-figure [data-est] { color: var(--lime); font-family: var(--font-display); font-size: clamp(2.25rem, 1.7rem + 1.8vw, 3.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.est__main-unit { color: var(--muted-on-dark); font-size: 0.9375rem; }
.est__formula { margin: 6px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 0.8125rem; line-height: 1.45; }
.est__grid { display: grid; gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--est-line); border-radius: 8px; background: var(--est-line); }
@media (min-width: 520px) { .est__grid { grid-template-columns: 1fr 1fr; } }
.est__grid > div { padding: 14px 16px; background: #262626; }
.est__grid dt { margin: 0 0 4px; color: var(--muted-on-dark); font-size: 0.8125rem; font-weight: 600; }
.est__grid dd { margin: 0; }
.est__grid [data-est] { color: var(--white); font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.est__u { color: var(--muted-on-dark); font-size: 0.8125rem; }

/* Baseline versus scenario */
.est__bars { display: grid; gap: 8px; }
.est__bars-title { margin: 0; color: var(--muted-on-dark); font-size: 0.8125rem; font-weight: 600; }
.est__bar { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; font-size: 0.8125rem; }
.est__bar-name { color: var(--text-on-dark); }
.est__bar-track { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.est__bar-fill { display: block; height: 100%; width: 0; border-radius: 5px; background: #8a8f8c; transition: width 0.5s var(--ease); }
.est__bar--scenario .est__bar-fill { background: var(--lime); }
.est__bar-val { min-width: 92px; color: var(--white); font-weight: 600; text-align: right; }
@media (prefers-reduced-motion: reduce) { .est__bar-fill { transition: none; } }

.est .est__label-box { margin: 0; }
.est__actions { display: grid; gap: 10px; margin-top: auto; }
.est__actions .btn { width: 100%; justify-content: center; }
.est__take { min-height: 48px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; background: transparent; color: var(--white); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.est__take:hover:not([disabled]) { background: var(--white); color: var(--charcoal); }
.est__take[disabled] { opacity: 0.4; cursor: not-allowed; }
.est__take svg { width: 16px; height: 16px; vertical-align: -3px; }

@media (max-width: 599px) {
  .est__field { grid-template-columns: 1fr; }
  .est__box { width: 100%; }
  .est__bar { grid-template-columns: 78px 1fr; }
  .est__bar-val { grid-column: 2; min-width: 0; text-align: left; }
}
.ed .est .calc-label, .est .calc-label { margin: 0; padding: 12px 14px; border-left: 3px solid var(--lime); border-radius: 0 6px 6px 0; background: rgba(255, 255, 255, 0.06); color: var(--white); font-size: 0.875rem; font-weight: 500; line-height: 1.5; }
.ed .est .est__h, .est .est__h { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; }
.est__take { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.est__take svg { flex: none; }
.est { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .est { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.est__in > *, .est__out > * { min-width: 0; }
.est__box--select { padding: 0; }
.est__box--select select { width: 100%; height: 44px; padding: 0 36px 0 12px; border: 0; border-radius: 6px; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--white); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.est__box--select select:focus { outline: none; }
.est__box--select option { color: var(--charcoal); background: var(--white); }

/* ==========================================================================
   24. Contact page: contact cards beside the form card (owner's style idea, 8 Oct 2026)
   ========================================================================== */
.contact-layout { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 1000px) { .contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 28px; } }
.contact-cards { display: grid; gap: 16px; }
@media (min-width: 640px) and (max-width: 999px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
.contact-tile { padding: 24px 26px; border: 1px solid var(--ed-rule, rgba(32, 32, 32, 0.12)); border-radius: 12px; background: var(--white); box-shadow: 0 1px 2px rgba(32, 32, 32, 0.04), 0 10px 26px rgba(32, 32, 32, 0.05); }
.contact-tile__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.contact-tile__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--light); color: var(--charcoal); box-shadow: inset 0 -2px 0 var(--lime); }
.cicon { width: 22px; height: 22px; }
.ed .contact-tile__title, .contact-tile__title { margin: 0; color: var(--charcoal); font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; }
.contact-tile__body { margin: 0 0 12px; color: var(--graphite); font-size: 1rem; font-style: normal; line-height: 1.65; }
.contact-tile__body strong { color: var(--charcoal); }
.contact-tile__list { display: grid; gap: 6px; margin: 0; }
.contact-tile__list a, .contact-tile__email { color: var(--charcoal); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
.contact-tile__list a:hover, .contact-tile__email:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.contact-tile .link-arrow { font-size: 0.9375rem; }

/* The form card */
.form-card { padding: clamp(24px, 3.5vw, 44px); border: 1px solid var(--ed-rule, rgba(32, 32, 32, 0.12)); border-radius: 12px; background: var(--white); box-shadow: 0 1px 2px rgba(32, 32, 32, 0.04), 0 18px 40px rgba(32, 32, 32, 0.07); }
.form-card__head { margin-bottom: 26px; }
.form-card__head .eyebrow { margin-bottom: 12px; }
.ed .form-card__head h2 { margin: 0 0 6px; font-size: clamp(1.625rem, 1.35rem + 0.9vw, 2.125rem); }
.form-card__lede { margin: 0; color: var(--graphite); font-size: 1rem; }
/* inside the card the form needs no second box */
.ed .form-card .enquiry { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.ed .form-card .form-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .ed .form-card .form-grid { grid-template-columns: 1fr 1fr; } }
.ed .form-card .form-field--wide, .ed .form-card .form-field--route { grid-column: 1 / -1; }
.ed .form-field--route { margin-bottom: 22px; }
.ed .form-field--route .calc-input--select { min-height: 52px; }
.ed .form-card .form-actions .btn { flex: 1 1 100%; justify-content: center; min-height: 54px; font-size: 1.0625rem; }
.ed .form-card .form-actions .form-help { flex: 1 1 100%; margin: 0; text-align: center; }
.ed .form-field input::placeholder, .ed .form-field textarea::placeholder { color: #8f9592; }
/* drop-downs inside the field wrapper: one border only (the wrapper draws it) */
.ed .form-field .calc-input--select { padding: 0 6px 0 0; }
.ed .form-field .calc-input--select select { min-height: 0; height: 50px; padding: 0 12px; border: 0; border-radius: 6px; box-shadow: none; background-color: transparent; }
.ed .form-field .calc-input--select select:focus { box-shadow: none; }
.ed .form-field--route { margin-bottom: 0; }

/* ==========================================================================
   25. Commercial and Sector-wise calculators in the Estimator's style (owner request, 8 Oct 2026)
   One dark charcoal panel: the operator's figures on the left (label beside an editable value box,
   slider underneath), the Illustrative Opportunity Estimate on the right. Same markup and behaviour.
   ========================================================================== */
.ed .calc-grid {
  --est-line: rgba(255, 255, 255, 0.12);
  display: grid; gap: 0; align-items: stretch; overflow: hidden; border-radius: 10px; background: var(--charcoal); color: var(--text-on-dark);
  box-shadow: 0 30px 60px rgba(32, 32, 32, 0.18);
}
@media (min-width: 980px) { .ed .calc-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

/* Left: the inputs */
.ed .calc-grid .calc-form { gap: 24px; align-content: start; padding: clamp(24px, 3.4vw, 44px); border: 0; border-bottom: 1px solid var(--est-line); border-radius: 0; background: transparent; box-shadow: none; }
@media (min-width: 980px) { .ed .calc-grid .calc-form { border-bottom: 0; border-right: 1px solid var(--est-line); } }
.ed .calc-grid #sector-fields { display: grid; gap: 24px; }
.ed .calc-grid .calc-pair { display: grid; grid-template-columns: 1fr; gap: 24px; }

/* A field: label on the left, value box on the right, help and slider underneath */
.ed .calc-grid .calc-field:not(.calc-field--seg) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
.ed .calc-grid .calc-field > label { grid-column: 1; grid-row: 1; margin: 0; color: var(--white); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.ed .calc-grid .calc-field > .calc-input { grid-column: 2; grid-row: 1; }
.ed .calc-grid .calc-field > .calc-help { grid-column: 1 / -1; grid-row: 2; margin: 0; color: var(--muted-on-dark); font-size: 0.875rem; line-height: 1.5; }
.ed .calc-grid .calc-field > .calc-slider { grid-column: 1 / -1; grid-row: 3; margin: 0; }
.ed .calc-grid .calc-field legend { margin-bottom: 10px; color: var(--white); font-size: 0.9375rem; font-weight: 600; }

/* Value boxes on dark: lime figure, quiet unit */
.ed .calc-grid .calc-input { width: min(230px, 52vw); min-height: 46px; padding: 0 12px; gap: 6px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; background: #2a2a2a; }
.ed .calc-grid .calc-input:hover { border-color: rgba(255, 255, 255, 0.35); }
.ed .calc-grid .calc-input:focus-within { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(158, 233, 29, 0.25); }
.ed .calc-grid .calc-input input { height: 44px; background: transparent; color: var(--lime); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; text-align: right; }
.ed .calc-grid .calc-input input::placeholder { color: rgba(255, 255, 255, 0.4); }
.ed .calc-grid .calc-input input:focus { outline: none; }
.ed .calc-grid .calc-prefix { color: var(--muted-on-dark); font-size: 0.9375rem; }
.ed .calc-grid .calc-unit { color: var(--muted-on-dark); font-size: 0.875rem; }
.ed .calc-grid .calc-input--select select { width: 100%; height: 44px; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 2px center; color: var(--white); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; text-align: left; appearance: none; padding-right: 22px; }
.ed .calc-grid .calc-input--select select option { background: var(--charcoal); color: var(--white); }
.ed .calc-grid .calc-input--select select:focus { outline: none; }
.ed .calc-grid .calc-field--assume .calc-input, .ed .calc-grid .calc-field--assume.is-empty .calc-input { border-color: rgba(255, 255, 255, 0.18); background: #2a2a2a; box-shadow: inset 3px 0 0 var(--lime); }
.ed .calc-grid .calc-field--assume .calc-input:focus-within { border-color: var(--lime); box-shadow: inset 3px 0 0 var(--lime), 0 0 0 3px rgba(158, 233, 29, 0.25); }
.ed .calc-grid .calc-tag { background: rgba(158, 233, 29, 0.16); color: var(--lime); }

/* Sliders on dark */
.ed .calc-grid .calc-slider { height: 22px; }
.ed .calc-grid .calc-slider::-webkit-slider-runnable-track { background: linear-gradient(var(--lime), var(--lime)) 0 0 / var(--fill) 100% no-repeat, rgba(255, 255, 255, 0.16); }
.ed .calc-grid .calc-slider::-moz-range-track { background: rgba(255, 255, 255, 0.16); }
.ed .calc-grid .calc-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--lime); }
.ed .calc-grid .calc-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; border: 0; background: var(--lime); box-shadow: 0 0 0 4px rgba(158, 233, 29, 0.18); }
.ed .calc-grid .calc-slider::-moz-range-thumb { width: 18px; height: 18px; border: 0; background: var(--lime); }
.ed .calc-grid .calc-slider:hover::-webkit-slider-thumb { background: var(--lime); }
.ed .calc-grid .is-empty .calc-slider::-webkit-slider-thumb { background: #6b6f6d; box-shadow: none; }
.ed .calc-grid .is-empty .calc-slider::-moz-range-thumb { background: #6b6f6d; }

/* Choices (litres / kilograms, km per litre / litres per 100 km) */
.ed .calc-grid .seg { padding: 3px; border: 1px solid var(--est-line); border-radius: 8px; background: transparent; }
.ed .calc-grid .seg label { min-height: 38px; color: var(--muted-on-dark); }
.ed .calc-grid .seg label:hover { color: var(--white); }
.ed .calc-grid .seg label:has(input:checked) { background: rgba(255, 255, 255, 0.12); color: var(--white); box-shadow: none; }
.ed .calc-grid .seg label:has(input:focus-visible) { outline: 3px solid var(--lime); outline-offset: 2px; }
.ed .calc-grid .calc-reset { justify-self: start; color: var(--muted-on-dark); }
.ed .calc-grid .calc-reset:hover { color: var(--white); }

/* Right: the results */
.ed .calc-grid .calc-results { position: static; padding: clamp(24px, 3.4vw, 44px); border: 0; border-radius: 0; background: #262626; box-shadow: inset 0 3px 0 var(--sig, var(--lime)); }
.ed .calc-grid .calc-out__row--main { margin: 6px 0; padding: 20px 22px; border: 1px solid rgba(158, 233, 29, 0.35); border-radius: 8px; background: rgba(158, 233, 29, 0.06); }
.ed .calc-grid .calc-out__row--main + .calc-out__row { border-top: 0; }
.ed .calc-grid .calc-out__row--main .calc-out__value, .ed .calc-grid .calc-out__row--main .calc-out__cur { font-size: clamp(2.25rem, 1.7rem + 1.8vw, 3.25rem); line-height: 1.05; letter-spacing: -0.03em; }
.ed .calc-grid .calc-product { padding: 16px 18px; border: 1px solid var(--est-line); background: rgba(255, 255, 255, 0.03); }
.ed .calc-grid .calc-product p:not([class]) { margin: 0 0 12px; color: var(--text-on-dark); font-size: 0.9375rem; }
.ed .calc-grid .calc-product__name { margin: 0 0 10px; color: var(--white); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; }
.ed .calc-grid .calc-handover-note { margin: 10px 0 0; color: var(--muted-on-dark); font-size: 0.875rem; }
.ed .calc-grid .calc-results .btn[disabled] { opacity: 0.45; }

@media (max-width: 599px) {
  .ed .calc-grid .calc-field:not(.calc-field--seg) { grid-template-columns: 1fr; }
  .ed .calc-grid .calc-field > .calc-input { grid-column: 1; grid-row: auto; width: 100%; }
  .ed .calc-grid .calc-field > label, .ed .calc-grid .calc-field > .calc-help, .ed .calc-grid .calc-field > .calc-slider { grid-row: auto; }
}

/* The sector picker above the panel matches the Estimator's industry chips */
.ed .sector-pick { margin-bottom: 18px; }
.ed .sector-pick__opt:has(input:checked) { border-color: var(--charcoal); background: var(--charcoal); box-shadow: inset 0 3px 0 var(--sig); }
.ed .calc-note { margin-bottom: 18px; padding: 12px 16px; border-left: 3px solid var(--lime); border-radius: 0 6px 6px 0; background: var(--light); color: var(--charcoal); font-weight: 500; }
.ed .calc-grid .calc-field > * { min-width: 0; }
.ed .calc-grid .calc-input input { flex: 1 1 auto; min-width: 0; width: 100%; }

/* ==========================================================================
   26. Remaining pages in the editorial design (owner request, 8 Oct 2026)
   ========================================================================== */
/* Challenge: pressure cards use their full width */
.ed .pressure-card { padding: 0; }
.ed .pressure-card .card__body { padding: 24px 22px 26px; }
.ed .pressure-card h3 { font-size: 1.1875rem; line-height: 1.3; }

/* Legal pages and other long text: calm, readable headings */
.ed .prose h2 { margin: 2em 0 0.5em; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1.25; letter-spacing: -0.015em; }
.ed .prose h2:first-of-type { margin-top: 0.6em; }
.ed .prose h3 { margin: 1.6em 0 0.4em; font-size: 1.1875rem; }
.ed .prose p, .ed .prose li { color: var(--graphite); line-height: 1.7; }

/* FAQ: answers beside a "Still have a question?" panel */
.faq-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .faq-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; } .faq-aside { position: sticky; top: calc(var(--header-h, 100px) + 24px); } }
.faq-aside { padding: 28px; border-radius: 10px; background: var(--charcoal); color: var(--text-on-dark); }
.ed .faq-aside h2 { margin: 0 0 10px; color: var(--white); font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); }
.faq-aside p { color: var(--text-on-dark); }
.faq-aside .eyebrow { color: var(--lime); }
.faq-aside__list { display: grid; gap: 10px; margin: 18px 0 22px; padding: 0; list-style: none; }
.faq-aside__list a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--white); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.faq-aside__list a:hover { color: var(--lime); }
.faq-aside__list .cicon { flex: none; width: 20px; height: 20px; color: var(--lime); }
.faq-aside .btn { width: 100%; justify-content: center; }
.faq-layout .faq { max-width: none; margin: 0; }

/* Calculator "Download PDF report" button (8 Oct 2026) */
.calc-pdf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 10px; padding: 10px 16px; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 4px; background: transparent; color: var(--white); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.calc-pdf .icon { width: 18px; height: 18px; color: var(--lime); }
.calc-pdf:hover:not([disabled]) { border-style: solid; border-color: var(--lime); background: rgba(158, 233, 29, 0.08); }
.calc-pdf:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.calc-pdf[disabled] { opacity: 0.4; cursor: not-allowed; }
.est__actions .calc-pdf { margin-top: 0; }

/* Editorial pages: the page header sits directly under the site header, and bands meet edge to edge
   (the older "island" spacing left a thin white strip; owner request, 8 Oct 2026) */
.ed main > .page-hero, .ed main > .text-hero, .ed main > .calc-hero, .ed main > .section--dark, .ed main > .section--light { margin-top: 0; }
.ed main > .text-hero { margin-inline: 0; border-radius: 0; box-shadow: none; }
.ed main > .cta-band { margin-bottom: 0; }

/* ==========================================================================
   27. About page, editorial redesign (owner request, 8 Oct 2026)
   ========================================================================== */
/* Who we are: one large purpose statement, then mission and vision side by side */
.ab-who__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(20px, 3vw, 32px); }
.ab-who__head .eyebrow { margin: 0; }
.ab-who__label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--charcoal); font-family: var(--font-body); font-size: var(--ed-label, 0.8125rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.ab-who__label span { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 3px; background: var(--charcoal); color: var(--lime); font-size: 0.75rem; letter-spacing: 0.04em; }
.ab-who__head .ab-who__label { margin: 0; }
.ed .ab-purpose { max-width: 22ch; margin: 0; color: var(--charcoal); font-family: var(--font-display); font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
.ab-keys { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; }
.ab-keys li { padding: 8px 16px; border: 1px solid var(--ed-rule, rgba(32, 32, 32, 0.12)); border-radius: 999px; color: var(--charcoal); font-size: 0.9375rem; font-weight: 600; }
.ab-keys li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--lime); vertical-align: 1px; }
.ab-mv { display: grid; gap: 40px; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--charcoal); }
@media (min-width: 900px) { .ab-mv { grid-template-columns: 1fr 1fr; gap: 0; } .ab-mv__col + .ab-mv__col { padding-left: clamp(32px, 4vw, 64px); border-left: 1px solid var(--ed-rule, rgba(32, 32, 32, 0.12)); } .ab-mv__col:first-child { padding-right: clamp(32px, 4vw, 64px); } }
.ed .ab-mv__text { margin: 0 0 28px; color: var(--charcoal); font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5625rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.42; }
.ab-chain { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ed-rule, rgba(32, 32, 32, 0.12)); }
@media (min-width: 560px) { .ab-chain { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.ab-chain li { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ed-rule, rgba(32, 32, 32, 0.12)); color: var(--charcoal); font-weight: 600; }
.ab-chain span { color: var(--industrial); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; }
.ab-horizon { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--charcoal); border-radius: 8px; overflow: hidden; }
.ab-horizon > div { padding: 18px 20px; }
.ab-horizon dt { margin-bottom: 6px; color: var(--graphite); font-size: var(--ed-label, 0.8125rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ab-horizon dd { margin: 0; color: var(--charcoal); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.ab-horizon__next { background: var(--charcoal); }
.ab-horizon__next dt { color: var(--lime); }
.ab-horizon__next dd { color: var(--white); }

/* Corporate structure: statement beside the two-level tree */
.ab-structure__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .ab-structure__grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); } }
.ed .ab-structure__closing { margin: 20px 0 0; max-width: 34rem; color: var(--text-on-dark); font-size: 1.0625rem; line-height: 1.65; }
.ab-tree { display: grid; justify-items: stretch; }
.ab-tree__item { padding: 26px 28px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; }
.ab-tree__item p { margin: 0; color: var(--text-on-dark); }
.ab-tree__name { margin-bottom: 6px !important; color: var(--white) !important; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
.ab-tree__item--platform { margin-left: clamp(24px, 6vw, 72px); border-color: var(--lime); }
.ab-tree__item--platform .ab-tree__name { color: var(--lime) !important; }
.ab-tree__link { width: 2px; height: 36px; margin-left: clamp(36px, 7vw, 96px); background: var(--lime); }

/* Leadership: one row per director, so a shorter profile never leaves an empty box */
.ed .leaders { display: grid; grid-template-columns: 1fr; gap: 0; max-width: none; margin: 0; padding: 0; border-top: 1px solid var(--charcoal); }
.ed .leader { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; align-items: center; padding: 26px 0; border: 0; border-bottom: 1px solid var(--ed-rule, rgba(32, 32, 32, 0.12)); border-radius: 0; background: none; box-shadow: none; text-align: left; }
@media (min-width: 820px) { .ed .leader { grid-template-columns: 148px minmax(0, 1fr) auto; column-gap: 36px; } }
.ed .leader__photo { grid-row: 1 / span 5; width: 100%; max-width: 148px; margin: 0; align-self: start; }
.ed .leader__name { grid-column: 2; margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); text-align: left; }
.ed .leader__role { grid-column: 2; justify-self: start; margin: 8px 0 0; }
.ed .leader__tagline { grid-column: 2; margin: 10px 0 0; color: var(--graphite); font-size: 0.9375rem; font-weight: 600; text-align: left; }
.ed .leader__summary { grid-column: 2; max-width: 60ch; margin: 8px 0 0; color: var(--graphite); font-size: 0.9375rem; line-height: 1.6; text-align: left; }
.ed .leader__more { grid-column: 2; justify-self: start; margin: 14px 0 0; }
@media (min-width: 820px) { .ed .leader__more { grid-column: 3; grid-row: 1 / span 4; align-self: center; margin: 0; } }

/* Operating principles: numbered rules, no boxes */
.ab-rules { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--charcoal); }
@media (min-width: 760px) { .ab-rules { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); } }
.ab-rules li { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--ed-rule, rgba(32, 32, 32, 0.12)); }
.ab-rules__num { grid-row: 1 / span 2; color: var(--industrial); font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ed .ab-rules h3 { margin: 0 0 8px; font-size: 1.25rem; }
.ab-rules p { margin: 0; color: var(--graphite); }

/* Capability pillars on charcoal */
.ab-pillar-grid { display: grid; gap: 1px; margin: 0 0 32px; padding: 0; list-style: none; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.12); }
@media (min-width: 640px) { .ab-pillar-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ab-pillar-grid { grid-template-columns: repeat(3, 1fr); } }
.ab-pillar { padding: clamp(24px, 3vw, 34px); background: var(--charcoal); transition: background-color 0.2s ease; }
.ab-pillar:hover { background: #262626; }
.ab-pillar__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.ab-pillar__num { color: var(--lime); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; }
.ab-pillar__icon { width: 30px; height: 30px; }
.ed .ab-pillar h3 { margin: 0 0 10px; color: var(--white); font-size: 1.1875rem; }
.ab-pillar p { margin: 0; color: var(--text-on-dark); font-size: 0.9375rem; line-height: 1.6; }
/* Phones: the full-width header photo shows its subject (placed right of centre for the desktop headline) */
@media (max-width: 699px) { .ed .page-hero:has(.page-hero__media) .media__inner img { object-position: 64% center; } }