/* ============================================================
   NuGreen — Design System
   Brand-faithful to nugreeninc.com: sage green, dark olive,
   metallic silver, white. Modernized layout & motion.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Olive / sage (brand) */
  --olive-950: #33362f;   /* footer, deepest */
  --olive-900: #3e4239;   /* page heroes, CTA bands */
  --olive-800: #53574f;   /* dark sections (brand dark) */
  --olive-700: #5e6258;   /* cards on dark */
  --sage: #6e7864;        /* primary brand (hero bg) */
  --sage-deep: #5c6553;
  --sage-text: #4d5545;   /* sage accent readable on light */

  /* Metallic silver (brand) */
  --silver: #9ba3a4;
  --silver-light: #ced4da;

  /* Light surfaces */
  --paper: #f6f6f3;
  --paper-2: #ecede8;

  /* Ink */
  --ink: #23261f;
  --ink-2: #464b41;
  --ink-3: #6f746a;

  /* On-dark text */
  --white: #fbfbf9;
  --mist: #c3c8c0;
  --mist-2: #939a90;

  /* Chart */
  --bar-muted: #98a094;
  --bar-accent: #e2e7e0;

  --line-dark: rgba(251, 251, 249, 0.1);
  --line-light: rgba(35, 38, 31, 0.12);

  --font-display: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  --header-height: 80px;
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 14px;
  --radius-lg: 22px;
  --card-pad: clamp(26px, 3vw, 38px);

  --shadow-lift: 0 24px 60px -24px rgba(35, 38, 31, 0.25);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* anchored sections land below the fixed nav */
[id] { scroll-margin-top: 96px; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--olive-950);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--sage); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 3px;
  border-radius: 4px;
}
/* The mobile menu panel is focused programmatically when it opens so focus
   enters the dialog. It carries tabindex="-1" and is never a Tab stop, so it
   must not paint a ring — every real focus stop inside it keeps one. */
.nav-menu:focus,
.nav-menu:focus-visible { outline: none; }

/* ---------- Typography ---------- */
.display-1, .display-2, .display-3, .h-section {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-wrap: balance;
}
.display-1 { font-size: clamp(2.7rem, 7.4vw, 5.6rem); }
.display-2 { font-size: clamp(2.2rem, 5.2vw, 4rem); }
.display-3 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.h-section { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3.h-card {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  opacity: 0.85;
}
.on-dark .eyebrow { color: var(--silver-light); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}
.on-dark .lede { color: var(--mist); }

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ---------- Layout ---------- */
.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.section { padding-block: clamp(72px, 10vw, 132px); }
.section-head { max-width: 780px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head .lede { margin-top: 18px; }
/* per-instance discipline for short ledes, same idea as .rapid-copy / .binder-copy */
.lede-tight { max-width: 50ch; }

.on-dark { background: var(--olive-800); color: var(--white); }
.on-paper { background: var(--paper); color: var(--ink); }
.on-paper-2 { background: var(--paper-2); color: var(--ink); }

/* fine blueprint grid on dark sections */
.grid-lines {
  position: relative;
  isolation: isolate;
}
.grid-lines::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 30%, transparent 78%);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
              background-color 0.2s, border-color 0.2s, color 0.2s;
  will-change: transform;
}
.btn svg { transition: transform 0.35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(0.97); }

/* On light surfaces: dark olive pill. On dark surfaces: white pill (as on the
   current site's hero). */
.btn-solid {
  background: var(--olive-800);
  color: var(--white);
  box-shadow: 0 10px 26px -12px rgba(51, 54, 47, 0.55);
}
.btn-solid:hover {
  background: var(--olive-900);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(51, 54, 47, 0.6);
}
.on-dark .btn-solid, .nav .btn-solid {
  background: var(--white);
  color: var(--olive-950);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.45);
}
.on-dark .btn-solid:hover, .nav .btn-solid:hover { background: #ffffff; }

.btn-ghost { border-color: var(--line-light); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.on-dark .btn-ghost { border-color: rgba(251, 251, 249, 0.35); color: var(--white); }
.on-dark .btn-ghost:hover { border-color: var(--white); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--sage-text);
}
.on-dark .link-arrow { color: var(--silver-light); }
.link-arrow svg { transition: transform 0.3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(62, 66, 57, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-dark);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 50px; width: auto; }
.footer .nav-logo img { height: 60px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
}
.nav-links a {
  display: block;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--mist);
  transition: color 0.2s, background-color 0.2s;
}
.nav-links a:hover { color: var(--white); background: rgba(251, 251, 249, 0.08); }
.nav-links a[aria-current="page"] { color: var(--white); background: rgba(251, 251, 249, 0.12); }

.nav-cta { padding: 11px 22px; font-size: 0.92rem; }

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s, top 0.3s var(--ease-out);
}
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 27px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* JS-injected mobile-menu chrome stays hidden on desktop */
.menu-foot { display: none; }

@media (max-width: 900px) {
  .nav-burger { display: block; }

  /* deterministic header state while the overlay is open: the overlay surface
     shows behind the logo/close row — no scroll-driven transparency changes */
  .nav.menu-open {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* full-screen navigation overlay — owns its own surface, page never shows */
  .nav-menu {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 99;
    display: flex;
    flex-direction: column;
    padding: calc(96px + env(safe-area-inset-top, 0px)) var(--gutter)
             calc(26px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out, visibility 0s linear 0.18s;
    background:
      radial-gradient(120% 55% at 88% 0%, rgba(110, 120, 100, 0.22), transparent 58%),
      linear-gradient(180deg, var(--olive-950) 0%, #292c25 100%);
  }
  .nav-menu::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.035;
    pointer-events: none;
  }
  .nav-menu.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.18s ease-out;
  }

  /* quiet editorial navigation — typography and spacing carry the design */
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 6px;
  }
  .nav-links a {
    position: relative;
    display: block;
    padding: 12px 0 12px 18px;
    border-radius: 0;
    background: none;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: rgba(251, 251, 249, 0.62);
    transition: color 0.2s, transform 0.22s var(--ease-out);
  }
  .nav-links a:hover, .nav-links a:focus-visible {
    color: var(--white);
    background: none;
    transform: translateX(3px);
  }
  .nav-links a[aria-current="page"] { color: var(--white); background: none; }
  .nav-links a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.05em;
    border-radius: 2px;
    background: #a9b897;
  }

  /* CTAs — integrated interface controls, not floating pills */
  /* logo + close control must sit above the overlay (which is a positioned
     sibling inside the same header stacking context) */
  .nav .nav-logo, .nav .nav-burger { position: relative; z-index: 100; }

  .nav-cta-wrap { margin-top: auto; padding-top: 28px; }
  .nav-menu .nav-cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(206, 212, 218, 0.1);
    border: 1px solid rgba(206, 212, 218, 0.3);
    color: var(--white);
    border-radius: 12px;
    box-shadow: none;
    padding: 15px 18px;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .nav-menu .nav-cta::after { content: "→"; font-size: 1.05rem; }
  .nav-menu .nav-cta:hover, .nav-menu .nav-cta:focus-visible { background: rgba(206, 212, 218, 0.18); transform: none; }

  .menu-foot { display: block; margin-top: 4px; }
  .menu-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 0.95rem;
    color: var(--mist);
    transition: color 0.2s;
  }
  .menu-secondary:hover, .menu-secondary:focus-visible { color: var(--white); }
  .mm-title {
    margin-top: 30px;
    font-family: var(--font-display);
    font-weight: 750;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(147, 154, 144, 0.7);
  }

  /* staggered entrance */
  .nav-menu.open .nav-links > li,
  .nav-menu.open .nav-cta-wrap,
  .nav-menu.open .menu-foot {
    opacity: 0;
    transform: translateY(9px);
    animation: menuItem 0.28s var(--ease-out) forwards;
  }
  .nav-menu.open .nav-links > li:nth-child(1) { animation-delay: 0.05s; }
  .nav-menu.open .nav-links > li:nth-child(2) { animation-delay: 0.08s; }
  .nav-menu.open .nav-links > li:nth-child(3) { animation-delay: 0.11s; }
  .nav-menu.open .nav-links > li:nth-child(4) { animation-delay: 0.14s; }
  .nav-menu.open .nav-links > li:nth-child(5) { animation-delay: 0.17s; }
  .nav-menu.open .nav-links > li:nth-child(6) { animation-delay: 0.2s; }
  .nav-menu.open .nav-links > li:nth-child(7) { animation-delay: 0.23s; }
  .nav-menu.open .nav-links > li:nth-child(8) { animation-delay: 0.26s; }
  .nav-menu.open .nav-cta-wrap { animation-delay: 0.29s; }
  .nav-menu.open .menu-foot { animation-delay: 0.33s; }
}
@keyframes menuItem { to { opacity: 1; transform: none; } }
@media (min-width: 901px) {
  .nav-menu { display: flex; align-items: center; gap: 18px; }
  .nav-cta-wrap { margin-left: 6px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 80% -20%, rgba(206, 212, 218, 0.12), transparent 60%),
    linear-gradient(180deg, var(--sage-deep), var(--olive-900));
  color: var(--white);
  padding-top: 140px;
}
/* film grain */
.hero::after {
  content: "";
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; padding-bottom: clamp(48px, 7vh, 88px); }
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid rgba(251, 251, 249, 0.22);
  border-radius: 999px;
  background: rgba(251, 251, 249, 0.07);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 30px;
}
.hero-tag .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--silver-light);
  box-shadow: 0 0 0 0 rgba(206, 212, 218, 0.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(206, 212, 218, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(206, 212, 218, 0); }
  100% { box-shadow: 0 0 0 0 rgba(206, 212, 218, 0); }
}
.hero h1 { max-width: 16ch; }
.hero h1 .accent { color: var(--silver-light); }
.hero .lede { margin-top: 26px; color: #e4e7e1; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero-stats {
  margin-top: clamp(48px, 7vh, 84px);
  padding-top: 30px;
  border-top: 1px solid rgba(251, 251, 249, 0.2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.hero-stat .num { font-size: clamp(1.7rem, 3vw, 2.5rem); color: var(--white); }
.hero-stat .num .unit { font-size: 0.55em; font-weight: 700; color: var(--silver-light); margin-left: 4px; letter-spacing: 0; }
.hero-stat p { margin-top: 6px; font-size: 0.9rem; color: #dde1da; }
@media (max-width: 820px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Responsive stat-grid utilities — use these instead of inline
   grid-template-columns, which bypasses every breakpoint. */
.hero-stat { min-width: 0; }
.hero-stats.stats-2 { grid-template-columns: repeat(2, 1fr); }
.hero-stats.stats-3 { grid-template-columns: repeat(3, 1fr); }
.hero-stats.stats-plain { border: none; padding: 0; margin: 0; }
@media (max-width: 900px) {
  .hero-stats.stats-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hero-stats.stats-2, .hero-stats.stats-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
  .hero-stat .num { font-size: 1.9rem; }
}

/* ---------- Marquee ---------- */
.marquee {
  border-block: 1px solid var(--line-dark);
  background: var(--olive-900);
  overflow: hidden;
  padding-block: 20px;
}
.marquee-track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: 0.14em;
  font-size: 0.86rem;
  text-transform: uppercase;
  color: var(--silver);
}
.marquee-item::before { content: ""; width: 7px; height: 7px; background: var(--silver-light); border-radius: 2px; opacity: 0.8; }

/* ---------- Cards / bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  background: #ffffff;
  border: 1px solid var(--line-light);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(110, 120, 100, 0.45);
}
.card .h-card { margin-block: 16px 10px; }
.card p { color: var(--ink-2); font-size: 0.99rem; }
.card-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--sage);
  color: #f0f2ec;
}
.card-stat {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-light);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.card-stat .num { font-size: 1.9rem; color: var(--sage-text); }
.card-stat > span:last-child:not(.num) { font-size: 0.85rem; color: var(--ink-3); }

/* photo header inside a card (application cards) */
.card-media {
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 22px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.card:hover .card-media img { transform: scale(1.05); }

.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
@media (max-width: 980px) {
  .span-4, .span-6, .span-8 { grid-column: span 12; }
  .bento-2col .span-4, .bento-2col .span-6 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .bento-2col .span-4, .bento-2col .span-6 { grid-column: span 12; }
}

/* dark card variant */
.on-dark .card { background: var(--olive-700); border-color: var(--line-dark); }
.on-dark .card:hover { border-color: rgba(206, 212, 218, 0.4); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.5); }
.on-dark .card p { color: var(--mist); }
.on-dark .card-stat { border-top-color: var(--line-dark); }
.on-dark .card-stat .num { color: var(--silver-light); }
.on-dark .card-stat > span:last-child:not(.num) { color: var(--mist-2); }
.on-dark .card-icon { background: rgba(251, 251, 249, 0.1); color: var(--silver-light); }

/* ---------- Measured impact readout (homepage, dark) ----------
   Four verified figures on a section that already carries a blueprint grid.
   Cards boxed each number and repeated hairlines would compete with the grid,
   so the only linework is a single vertical axis - one line, not a field - and
   the figures hang off it. Evidence is set as type, not as a pill. */
.mi {
  position: relative;
  margin: 0;
  padding-left: clamp(20px, 2.4vw, 30px);
}
.mi::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: rgba(206, 212, 218, 0.26);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--ease-out) 0.18s;
}
.mi.revealed::before { transform: scaleY(1); }
.mi-row + .mi-row { margin-top: clamp(26px, 3.2vw, 36px); }

.mi-fig {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 11px;
  margin: 0;
  color: var(--white);
}
.mi-fig .num {
  font-size: clamp(1.95rem, 3.3vw, 2.45rem);
  line-height: 1;
}
.is-lead .mi-fig .num { font-size: clamp(2.7rem, 5.2vw, 3.6rem); }
.mi-unit {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--silver-light);
}
.mi-desc {
  margin: 9px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--silver-light);
}

/* feature split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
/* grid children must be allowed to shrink below their min-content, or long
   nowrap runs (badges, stat strings) force page width */
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* .split-tail: a split whose column-one actions must land AFTER the second column
   once stacked. The action block is a third child rather than a child of the copy
   (nothing in CSS moves a node between containers), and `.split-span` takes both
   rows of column two so desktop still reads copy -> actions down column one.
   row-gap 32px reproduces the .mt-3 that used to sit above the action block.
   `span 2` not `1 / -1`: with no grid-template-rows there are no explicit row
   lines, so `-1` silently collapses the span to a single row. */
.split-tail { column-gap: clamp(36px, 6vw, 88px); row-gap: 32px; }
.split-tail > .split-span { grid-column: 2; grid-row: 1 / span 2; }
.split-tail > .split-act { grid-column: 1; }
@media (max-width: 900px) {
  .split-tail { row-gap: 36px; }
  .split-tail > .split-span { grid-column: auto; grid-row: auto; }
  .split-tail > .split-act { grid-column: auto; }
}

/* performance chapter: chart slightly wider than the story column */
.perf-split { grid-template-columns: 1.15fr 1fr; align-items: start; }
@media (max-width: 900px) { .perf-split { grid-template-columns: 1fr; } }

/* quiet application/value rows (no pills — typography + hairlines) */
.value-rows { list-style: none; padding: 0; margin: 0; }
.value-rows li { padding: 13px 0; border-bottom: 1px solid var(--line-light); }
.value-rows li:last-child { border-bottom: none; }
.vr-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.value-rows p { margin-top: 4px; font-size: 0.95rem; color: var(--ink-2); }
.vr-links { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.link-arrow.quiet { color: var(--ink-3); font-weight: 650; }

/* hairline transition into the head-to-head act */
.act-break {
  margin-top: clamp(54px, 8vw, 84px);
  padding-top: clamp(30px, 4.5vw, 46px);
  border-top: 1px solid var(--line-light);
}
.act-sub { margin-top: 8px; font-size: 0.95rem; color: var(--ink-3); }

/* checklists */
.checklist { list-style: none; padding: 0; display: grid; gap: 14px; }
.checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 1.02rem;
  color: var(--ink-2);
}
.on-dark .checklist li { color: var(--mist); }
.checklist .tick {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 1px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(110, 120, 100, 0.16);
  color: var(--sage-text);
}
.on-dark .checklist .tick { background: rgba(206, 212, 218, 0.16); color: var(--silver-light); }
.checklist .cross { background: rgba(160, 82, 60, 0.12); color: #9c5136; }

/* ---------- Process steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(30px, 4.4vw, 60px);
}
.step-idx {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-light);
  font-variant-numeric: tabular-nums;
}
.step-idx::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: var(--silver-light);
  margin-bottom: 12px;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 12px;
  color: var(--white);
}
/* :not(.step-idx) because the index is also a <p>, and .step p at (0,1,1) would
   outrank .step-idx at (0,1,0) - the same specificity trap as .step-metric */
.step p:not(.step-idx) {
  margin: 0;
  color: var(--silver-light);   /* --mist is 4.34:1 on --olive-800 and fails */
  font-size: 0.96rem;
  line-height: 1.55;            /* tightens the tallest block (02) most */
  max-width: 36ch;              /* evens the rag without adding lines */
  text-wrap: pretty;
}

/* ---------- Process datum ----------
   The 1px line and the three readings are grid SIBLINGS of the steps: desktop
   places them in rows 2/3 beneath the columns (the two-layer instrument), mobile
   interleaves each reading directly into its step's module via `order` and hides
   the line. One markup, two placements; DOM order is unchanged for readers.
   The line is 1px but FULL --silver-light - the grid behind is 1px at 10% white,
   so foreground is declared by brightness (~5x), not weight. */
.sc-line {
  height: 1px;
  background: var(--silver-light);
  transform: scaleX(0);
  transform-origin: left center;
  /* draws in once the first step has landed */
  transition: transform 0.9s var(--ease-out) 0.45s;
}
.steps > .step.revealed ~ .sc-line { transform: scaleX(1); }
.sc-read { margin: 0; position: relative; }
.sc-read::before { content: ""; background: var(--silver-light); }
/* the verb is the figure's eyebrow: close over its number, tracking matched to
   .step-idx so the two label registers agree */
.sc-verb {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-light);
}
.step-figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.8vw, 2.3rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--white);
  /* tabular figures keep the digit width steady while the counter runs */
  font-variant-numeric: tabular-nums;
}
.step-unit {
  margin-left: 4px;
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--silver-light);
}
.step-label {
  display: block;
  margin-top: 8px;
  font-size: 0.84rem;
  line-height: 1.48;
  color: var(--silver-light);
}

@media (min-width: 901px) {
  .steps > .step { grid-row: 1; }
  /* tight enough that the process layer and metrics layer read as one system */
  .sc-line { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(22px, 2.8vw, 30px); }
  .sc-read { grid-row: 3; padding-top: 24px; }
  /* the datum anchor CROSSES the line (6px above, 10px below) - a station mark
     rather than a tail, stitching the two layers together */
  .sc-read::before {
    position: absolute;
    top: -7px; left: 0;
    width: 1px;
    height: 17px;
  }
}

@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* each proof sits directly under its own step - the bottom proof row and the
     datum line exist only where the three-column geometry justifies them */
  .steps > article:nth-of-type(1) { order: 1; }
  .steps > p:nth-of-type(1)       { order: 2; }
  .steps > article:nth-of-type(2) { order: 3; }
  .steps > p:nth-of-type(2)       { order: 4; }
  .steps > article:nth-of-type(3) { order: 5; }
  .steps > p:nth-of-type(3)       { order: 6; }
  .sc-line { display: none; }
  /* stacked modules reveal on their own intersection, without the desktop stagger */
  .steps > [data-reveal] { --reveal-delay: 0s !important; }
  .steps > article:nth-of-type(n+2) { margin-top: 38px; }
  /* proof attaches to its step: 18px inside the module vs 38px between modules,
     opened by a 1px stub that echoes the step's 2px index bar one weight down */
  .sc-read { margin-top: 18px; }
  .sc-read::before {
    display: block;
    width: 36px;
    height: 1px;
    margin-bottom: 12px;
  }
}

/* ---------- Chart ---------- */
.chart {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-dark);
  background: var(--olive-700);
  padding: clamp(26px, 3.4vw, 40px);
}
.chart-kicker {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-light);
  margin-bottom: 6px;
}
.chart-title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--paper); }
.chart-sub { font-size: 0.88rem; color: var(--mist-2); margin-top: 4px; }
.chart-rows { margin-top: 28px; display: grid; gap: 22px; }
.chart-row { display: grid; gap: 8px; }
.chart-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.94rem;
}
.chart-row-head .label { color: var(--mist); font-weight: 550; }
.chart-row-head .value { font-family: var(--font-display); font-weight: 750; font-variant-numeric: tabular-nums; color: var(--white); }
.chart-track { height: 14px; border-radius: 7px; background: rgba(251, 251, 249, 0.08); overflow: hidden; }
.chart-fill {
  height: 100%;
  width: 0;
  border-radius: 7px;
  background: var(--bar-muted);
  transition: width 1.3s var(--ease-out);
}
.chart-row.accent .chart-fill { background: var(--bar-accent); box-shadow: 0 0 16px rgba(226, 231, 224, 0.35); }
.chart-row.accent .chart-row-head .label { color: var(--silver-light); font-weight: 700; }
.chart-note { margin-top: 22px; font-size: 0.84rem; color: var(--mist-2); }

/* mobile fallback for the SVG line chart: swap tiny scaled axis text for a
   readable stacked strength sequence (legend + caption remain visible) */
.strength-list { display: none; }
@media (max-width: 700px) {
  figure.chart svg { display: none; }
  .strength-list { display: block; list-style: none; padding: 0; margin-top: 18px; }
  .strength-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .strength-list li:last-child { border-bottom: none; }
  .strength-list li > span {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mist-2);
    flex: 0 0 92px;
  }
  .strength-list b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--white);
  }
  .strength-list li.opc b { color: var(--mist-2); font-weight: 700; }
  .strength-list em {
    flex-basis: 100%;
    font-style: normal;
    font-size: 0.78rem;
    color: var(--mist-2);
    padding-left: 104px;
  }
}

/* line chart (SVG) */
.chart-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--mist);
}
.chart-legend .swatch { width: 22px; height: 0; border-top: 3px solid var(--bar-accent); border-radius: 2px; }
.chart-legend .swatch.dashed { border-top-style: dashed; border-top-color: var(--bar-muted); }
.chart svg { width: 100%; height: auto; margin-top: 14px; }
.chart polyline.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.chart.revealed polyline.draw { animation: drawLine 1.6s var(--ease-out) forwards; }
.chart.revealed polyline.draw.delay { animation-delay: 0.25s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.chart .pt { opacity: 0; transition: opacity 0.5s; }
.chart.revealed .pt { opacity: 1; transition-delay: 1.3s; }

/* ---------- Material loop (Technology, methodology section) ----------
   A real loop, not a left-to-right chain. Desktop is a 3x3 grid: the ring and
   hub occupy the centre cell, the four stages sit at the cardinal points.
   Ring and hub are stacked with `grid-area: 1/1`, not absolute positioning, so
   they stay concentric at every width. Below 900px the ring is hidden and the
   stages become a vertical sequence held inside a dashed return bracket -- the
   same swap .chart makes (SVG out, list in) rather than shrinking a circle.
   On-dark text uses a locally lifted grey ladder: --mist is only 4.34:1 on
   --olive-800 and would fail AA for new body copy. */
/* declared on the section, not on .loop -- the facts row and the two notes are
   siblings of .loop and cannot see custom properties scoped to it */
.loop-section {
  --loop-ink-2: #d7dcd4;   /* 5.30:1 on --olive-800 */
  --loop-ink-3: #c7ccc4;   /* 4.52:1 on --olive-800 */
}
.loop {
  display: grid;
  /* centre gets the larger share so the ring stays generous at 900-1100px */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.16fr) minmax(0, 0.92fr);
  grid-template-areas:
    ".  n  ."
    "w  c  e"
    ".  s  .";
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  margin-top: clamp(30px, 4vw, 52px);
}
.loop-stages { display: contents; }
.loop-bracket { display: none; }

/* ---- ring + hub ---- */
.loop-core {
  grid-area: c;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  /* hub type is sized from the ring itself, not the viewport, so the text can
     never outgrow the disc at an awkward width */
  container-type: inline-size;
}
.loop-core > * { grid-area: 1 / 1; }
.loop-ring { width: 100%; height: auto; }
.loop-hub {
  max-width: 54%;
  text-align: center;
}
.loop-hub-cat {
  font-family: var(--font-display);
  font-size: clamp(0.52rem, 2.2cqi, 0.62rem);
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-light);
}
.loop-hub-name {
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 5.2cqi, 1.26rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: var(--white);
}
.loop-hub-sub {
  margin-top: 8px;
  font-size: clamp(0.68rem, 3.2cqi, 0.8rem);
  line-height: 1.45;
  color: var(--loop-ink-2);
}

/* ---- the four stages ---- */
.loop-stage { min-width: 0; }
.loop-s1 { grid-area: n; text-align: center; }
.loop-s2 { grid-area: e; }
.loop-s3 { grid-area: s; text-align: center; }
.loop-s4 { grid-area: w; text-align: right; }
.loop-idx {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
  color: var(--silver-light);
}
.loop-name {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--white);
}
.loop-text {
  margin-top: 7px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--loop-ink-2);
}
/* the return leg is an industry pathway, so stage 04 says so in words as well
   as in the broken arc -- structure, not colour, marks it as a qualifier */
.loop-qualifier {
  margin-top: 9px;
  padding-left: 11px;
  border-left: 1px dashed rgba(251, 251, 249, 0.28);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--loop-ink-3);
}
.loop-s4 .loop-qualifier {
  padding-left: 0;
  padding-right: 11px;
  border-left: 0;
  border-right: 1px dashed rgba(251, 251, 249, 0.28);
}
.loop-return { display: none; }

/* ---- evidence index + methodology note ---- */
.loop-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.loop-facts li {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--white);
}
.loop-note {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--loop-ink-2);
}
.loop-subnote {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--loop-ink-3);
}
/* the methodology note is separated by a hairline at every width */
.lp-note {
  margin-top: clamp(24px, 2.4vw, 32px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line-dark);
}

@media (min-width: 901px) {
  /* ---------- editorial two-column composition ----------
     The figure is sized in exact pixels so 1 SVG unit == 1 CSS px: the leader
     lines are drawn in the same coordinate space as the absolutely positioned
     stage text, which is what keeps them attached at every width. Two columns
     only once the lead column can still hold a headline beside a 620px figure;
     below that the figure centres under the lead. */
  .lp { display: grid; gap: 26px clamp(34px, 4vw, 52px); }
  .lp-lead { margin: 0; }
  .lp-lead .lede { max-width: 46ch; }

  .loop {
    position: relative;
    display: block;
    width: 620px;
    height: 434px;
    margin: 0 auto;
  }
  .loop-core { position: absolute; inset: 0; display: block; aspect-ratio: auto; container-type: normal; }
  .loop-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
  .loop-num {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    fill: var(--silver-light);
  }

  /* hub sits on the centre of the ring */
  .loop-hub {
    position: absolute;
    left: 310px;
    top: 158px;
    transform: translate(-50%, -50%);
    width: 196px;
    max-width: none;
    text-align: center;
  }
  .loop-hub-cat { font-size: 0.58rem; }
  .loop-hub-name { margin-top: 8px; font-size: 1.02rem; }
  .loop-hub-sub { margin-top: 7px; font-size: 0.74rem; line-height: 1.45; }

  /* four quadrant callouts, anchored to their leader's horizontal run */
  .loop-stages { display: contents; }
  .loop-stage {
    position: absolute;
    width: 152px;
    grid-area: auto;
  }
  .loop-s1, .loop-s4 { left: 0; text-align: right; }
  .loop-s2, .loop-s3 { left: 468px; text-align: left; }
  .loop-s1, .loop-s2 { top: 46px; }
  .loop-s3, .loop-s4 { top: 286px; }
  /* the numeral is drawn in the figure as a datum marker, so the DOM copy is
     kept for assistive tech and hidden visually - no duplicate 01 on screen */
  .loop-idx {
    position: absolute;
    width: 1px; height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .loop-name { margin-top: 0; font-size: 0.95rem; line-height: 1.28; }
  .loop-text { margin-top: 6px; font-size: 0.78rem; line-height: 1.5; }
  .loop-qualifier {
    margin-top: 8px;
    padding-left: 9px;
    font-size: 0.7rem;
    line-height: 1.4;
  }
  .loop-s4 .loop-qualifier { padding-left: 0; padding-right: 9px; }

  /* proof statements as a ruled evidence index, not a horizontal band */
  .loop-facts { display: block; }
  .loop-facts li {
    padding: 11px 0;
    border-top: 1px solid var(--line-dark);
  }
  .loop-facts li:last-child { border-bottom: 1px solid var(--line-dark); }
  .loop-facts li::before { content: none; }

  .loop-note { max-width: 92ch; }
  .loop-subnote { max-width: 96ch; }
}

@media (min-width: 1200px) {
  /* ~40 / 60 once there is room: the figure is the fixed anchor, the lead column
     takes the remainder */
  .lp {
    grid-template-columns: minmax(0, 1fr) 620px;
    align-items: start;
  }
  .lp-lead { grid-column: 1; grid-row: 1; }
  .loop { grid-column: 2; grid-row: 1 / span 2; }
  .loop-facts { grid-column: 1; grid-row: 2; align-self: end; }
}

/* ---- below 900 the ring is only ~240px across and the hub text outgrows the
     disc, so the whole diagram is replaced rather than shrunk ---- */
@media (max-width: 900px) {
  .loop {
    display: block;
    margin-top: 28px;
  }
  .loop-core {
    display: block;
    aspect-ratio: auto;
    container-type: normal;
    /* place-items is not grid-only: justify-items:center makes block children
       shrink-to-fit and centre, which stops the hub card filling the column */
    place-items: stretch;
  }
  .loop-hub-cat { font-size: 0.6rem; }
  .loop-hub-name { font-size: 1.1rem; }
  .loop-hub-sub { font-size: 0.82rem; }
  .loop-ring { display: none; }
  /* the hub becomes the anchor card at the head of the sequence */
  .loop-hub {
    max-width: none;
    text-align: left;
    padding: 20px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    background: var(--olive-900);
  }
  .loop-stages {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
    column-gap: 16px;
    row-gap: 22px;
    margin-top: 22px;
  }
  /* the bracket IS the return leg: dashed, matching the broken arc on desktop */
  .loop-bracket {
    display: block;
    grid-column: 1;
    grid-row: 1 / -1;
    border: 1px dashed rgba(251, 251, 249, 0.28);
    border-right: 0;
    border-radius: 12px 0 0 12px;
  }
  .loop-stage,
  .loop-s1, .loop-s2, .loop-s3, .loop-s4 {
    grid-area: auto;   /* shorthand: must precede grid-column, or it resets it */
    grid-column: 2;
    text-align: left;
  }
  .loop-s4 .loop-qualifier {
    padding-left: 11px;
    padding-right: 0;
    border-left: 1px dashed rgba(251, 251, 249, 0.28);
    border-right: 0;
  }
  .loop-return {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--silver-light);
  }
  .loop-facts {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line-dark);
  }
  .loop-facts li + li {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-dark);
    margin-top: 13px;
    padding-top: 13px;
  }
}

/* ---------- Table ---------- */
.table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-light);
  overflow-x: auto;
  background: #ffffff;
}
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; font-size: 0.97rem; }
.compare thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-light);
  background: var(--paper-2);
}
.compare tbody tr { border-bottom: 1px solid var(--line-light); transition: background-color 0.2s; }
.compare tbody tr:last-child { border-bottom: none; }
.compare tbody tr:hover { background: rgba(110, 120, 100, 0.08); }
.compare td.metric {
  /* explicit resets: the generic .metric dashboard-card rule also matches this
     cell and would paint it as a dark rounded box */
  display: table-cell;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 16px 20px;
  font-weight: 600;
  color: var(--ink);
}
.compare td.nugreen {
  font-weight: 700;
  color: var(--sage-text);
  background: rgba(110, 120, 100, 0.07);
  font-variant-numeric: tabular-nums;
}
.compare thead th.th-nugreen {
  color: var(--sage-text);
  box-shadow: inset 0 -2px 0 var(--sage);
}
.compare td .delta {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--sage-text);
}

/* ---------- Evidence badges ---------- */
.ev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.ev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ev-verified { color: var(--sage-text); background: rgba(110, 120, 100, 0.13); border-color: rgba(110, 120, 100, 0.32); }
.on-dark .ev-verified, .hero .ev-verified, .page-hero .ev-verified { color: var(--silver-light); background: rgba(206, 212, 218, 0.12); border-color: rgba(206, 212, 218, 0.32); }
.ev-tested { color: #566068; background: rgba(155, 163, 164, 0.18); border-color: rgba(155, 163, 164, 0.45); }
.on-dark .ev-tested, .hero .ev-tested, .page-hero .ev-tested { color: var(--silver); background: rgba(155, 163, 164, 0.15); border-color: rgba(155, 163, 164, 0.38); }
.ev-benchmark { color: var(--ink-3); border-style: dashed; border-color: rgba(35, 38, 31, 0.32); }
.on-dark .ev-benchmark, .hero .ev-benchmark, .page-hero .ev-benchmark { color: var(--mist); border-color: rgba(251, 251, 249, 0.32); }
.ev-technical { color: var(--ink-3); background: rgba(35, 38, 31, 0.05); border-color: rgba(35, 38, 31, 0.16); }
.on-dark .ev-technical, .hero .ev-technical, .page-hero .ev-technical { color: var(--mist-2); background: rgba(251, 251, 249, 0.06); border-color: rgba(251, 251, 249, 0.16); }
.ev-cumulative { color: var(--ink-3); background: rgba(35, 38, 31, 0.04); border-color: rgba(35, 38, 31, 0.14); }
.on-dark .ev-cumulative, .hero .ev-cumulative, .page-hero .ev-cumulative { color: var(--mist); background: rgba(251, 251, 249, 0.07); border-color: rgba(251, 251, 249, 0.2); }

/* hero-stat blocks reused on light sections */
.on-paper .hero-stats, .on-paper-2 .hero-stats { border-top-color: var(--line-light); }
.on-paper .hero-stat .num, .on-paper-2 .hero-stat .num { color: var(--ink); }
.on-paper .hero-stat .num .unit, .on-paper-2 .hero-stat .num .unit { color: var(--sage-text); }
.on-paper .hero-stat p, .on-paper-2 .hero-stat p { color: var(--ink-3); }

/* ---------- Environmental metric cards ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .metric-grid { grid-template-columns: 1fr; } }
.metric {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-dark);
  background: var(--olive-700);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.metric .cat {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-2);
}
.metric .big {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.05;
}
.metric .big small { font-size: 0.44em; font-weight: 650; color: var(--mist); margin-left: 5px; letter-spacing: 0; }
.metric .sub { font-size: 0.86rem; color: var(--mist); }
.metric .ev-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.metric .bench {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-dark);
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.metric .bench b { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--silver-light); }
.metric .bench span { font-size: 0.82rem; color: var(--mist-2); }

/* ---------- Process path comparison (Portland vs NuGreen) ---------- */
/* ---------- Dual-path process comparison (Impact) ----------
   ONE dataset, TWO information geometries.

   Desktop (>1024px): two horizontal swimlanes on a shared column grid. Each
   pathway is a fixed-height lane row (--pmx-lane); every stage opens with a
   node band of height (2 x --pmx-rail-y) so a node of ANY size centres on that
   lane's rail, then its content follows 16px below — so all stage content in a
   lane starts at the same y. The rail connects NODES ONLY and never passes
   through a label or a module. Row gap is 0; the breathing room between lanes
   is each lane's unused lower band, which keeps the convergence maths exact.

   Mobile (<=1024px): the same markup reflows into a paired-stage comparison —
   stage eyebrow, Portland value, NuGreen value — so equivalent values stay
   adjacent. Source order is stage-major, and desktop re-places every item by
   explicit grid-area, so neither geometry constrains the other.

   NOTE: a CSS gradient's colour band renders PERPENDICULAR to its axis, so
   "to top right" is what draws a top-left -> bottom-right line. */
.pmx {
  --pmx-gap: clamp(14px, 1.7vw, 26px);
  --pmx-lane: clamp(158px, 13vw, 176px);
  --pmx-rail-y: 13px;
  display: grid;
  grid-template-columns:
    auto                                  /* 1 line label */
    minmax(0, 1fr)                        /* 2 feedstock */
    minmax(0, 1.2fr)                      /* 3 transformation */
    minmax(0, 1fr)                        /* 4 intermediate */
    minmax(0, 1fr)                        /* 5 binder */
    clamp(44px, 5vw, 84px)                /* 6 convergence */
    minmax(0, 0.95fr);                    /* 7 end use */
  grid-template-rows: auto var(--pmx-lane) var(--pmx-lane);
  column-gap: var(--pmx-gap);
  row-gap: 0;
}
/* column headers sit right on top of the lanes they label */
.pmx-head {
  align-self: end;
  padding-bottom: 18px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.34);
}
.pmx-head-end { text-align: center; }
/* per-stage owner labels and the "Shared" qualifier belong to mobile only */
.pmx-owner, .pmx-shared, .only-narrow { display: none; }
.pmx-line-label {
  align-self: start;
  justify-self: end;
  margin-top: calc(var(--pmx-rail-y) - 0.5em);
  padding-right: 4px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.pmx-line-label.ng { color: var(--sage-text); }

/* one element per lane = one unbroken rail, pinned to the lane's rail line */
.pmx-rail {
  align-self: start;
  margin-top: calc(var(--pmx-rail-y) - 0.5px);
  height: 1px;
  /* grid stretch + negative margin bridges the column gap into the merge */
  margin-right: calc(-1 * var(--pmx-gap));
  background: rgba(35, 38, 31, 0.22);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}
.pmx-rail.ng { background: rgba(110, 120, 100, 0.45); transition-delay: 0.22s; }
.pmx.revealed .pmx-rail { transform: scaleX(1); }

/* every stage: a node band on the rail, then its content beneath */
.pmx-stage {
  display: grid;
  grid-template-rows: calc(var(--pmx-rail-y) * 2) auto;
  justify-items: start;
  align-content: start;
  min-width: 0;
}
.pmx-node { grid-row: 1; align-self: center; }
.pmx-text, .pmx-module { grid-row: 2; margin-top: 16px; }
.pmx-text { display: grid; gap: 2px; min-width: 0; }

.pmx-node {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(35, 38, 31, 0.55);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out) 0.42s;
}
.pmx-node.ng { background: var(--sage); transition-delay: 0.62s; }
.pmx-node.is-major { width: 11px; height: 11px; margin-left: -2px; }
.pmx-node.ng.is-major { background: var(--sage-text); }
.pmx-node.is-ghost {
  width: 9px; height: 9px;
  margin-left: -1px;
  background: transparent;
  border: 1px dashed rgba(110, 120, 100, 0.7);
  transition-delay: 0.72s;
}
.pmx.revealed .pmx-node { opacity: 1; }

.pmx-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.93rem;
  line-height: 1.3;
  color: var(--ink);
}
.pmx-name.ng { color: var(--sage-text); }
.pmx-sub { font-size: 0.76rem; line-height: 1.45; color: var(--ink-3); }
.pmx-tag {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.4);
}

/* focal modules — bounded, compact, and wholly inside their own lane */
.pmx-module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  align-self: stretch;
  padding: 11px 13px;
  border-radius: 6px;
}
.pmx-kiln {
  border: 1px solid rgba(35, 38, 31, 0.24);
  background: var(--paper-2);
}
.pmx-temp {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.pmx-kiln .pmx-name {
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* the eliminated station: same column, deliberately the lightest object */
.pmx-void {
  border: 1px dashed rgba(110, 120, 100, 0.32);
  background: transparent;
}
.pmx-void .pmx-name { font-weight: 650; color: var(--sage-text); }
.pmx-void .pmx-sub { color: rgba(35, 38, 31, 0.42); }

/* convergence: rails leave the binder stage and bend toward one another */
.pmx-merge {
  align-self: stretch;
  margin-right: calc(-1 * var(--pmx-gap));
  display: flex;
  flex-direction: column;
  padding: var(--pmx-rail-y) 0 calc(var(--pmx-lane) - var(--pmx-rail-y));
  opacity: 0;
  transition: opacity 0.4s var(--ease-out) 0.8s;
}
.pmx.revealed .pmx-merge { opacity: 1; }
.pmx-diag { flex: 1; min-height: 0; }
/* top-left -> bottom-right: Portland descends to the right */
.pmx-diag.from-opc {
  background: linear-gradient(to top right,
    transparent calc(50% - 0.5px), rgba(35, 38, 31, 0.3) calc(50% - 0.5px),
    rgba(35, 38, 31, 0.3) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
/* bottom-left -> top-right: NuGreen climbs to the right */
.pmx-diag.from-ng {
  background: linear-gradient(to bottom right,
    transparent calc(50% - 0.5px), rgba(110, 120, 100, 0.5) calc(50% - 0.5px),
    rgba(110, 120, 100, 0.5) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* merge node -> short outbound connector -> Concrete, parked on the junction */
.pmx-end {
  align-self: start;
  margin-top: calc(var(--pmx-rail-y) + var(--pmx-lane) / 2);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out) 0.95s;
}
.pmx.revealed .pmx-end { opacity: 1; }
.pmx-merge-node {
  flex: none;
  width: 9px; height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--sage-text);
}
.pmx-out {
  flex: none;
  position: relative;
  width: clamp(18px, 2.2vw, 30px);
  height: 1px;
  background: rgba(110, 120, 100, 0.55);
}
.pmx-out::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 5px; height: 5px;
  border-top: 1px solid rgba(110, 120, 100, 0.75);
  border-right: 1px solid rgba(110, 120, 100, 0.75);
  transform: translateY(-50%) rotate(45deg);
}
.pmx-end-text { display: grid; gap: 4px; min-width: 0; padding-left: 12px; }
.pmx-end-name {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-text);
}

/* the last lane's unused lower band already supplies most of the breathing room */
.paths-end {
  margin-top: 18px;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--line-light);
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.paths-end span {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
}
/* pull the diagram up under its headline (scoped to this section only) */
.two-paths .section-head { margin-bottom: clamp(32px, 3.6vw, 50px); }

/* ---- Below this the rail diagram cannot breathe, so the SAME markup reflows
   into a sequence of side-by-side comparison bands: one stage heading, then
   Portland on the left and NuGreen on the right, split by a hairline. Both
   alternatives for a stage are always on screen together. ---- */
@media (max-width: 1024px) {
  .pmx {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* drop the desktop lane rows, or every band inherits a 176px floor */
    grid-template-rows: none;
    column-gap: 0;
    row-gap: 0;
  }
  .pmx > * { grid-area: auto !important; }
  .pmx-line-label, .pmx-rail, .pmx-merge,
  .pmx-node, .pmx-out, .pmx-merge-node { display: none; }

  /* the desktop column header becomes the band heading */
  .pmx-head {
    /* must beat the `grid-area: auto !important` reset above */
    grid-column: 1 / -1 !important;
    align-self: auto;
    display: block;
    margin-top: 26px;
    padding: 18px 0 13px;
    border-top: 1px solid var(--line-light);
    font-size: 0.64rem;
    color: var(--ink-2);
    text-align: left;
  }
  .pmx-head.is-first { margin-top: 0; padding-top: 0; border-top: none; }
  .pmx-shared { display: inline; }
  .only-narrow { display: block; }

  /* the two halves of one band; the divider is centred because the gap is 0
     and each side carries its own inner padding */
  .pmx-stage {
    display: block;
    padding: 0 0 4px;
    border: 0;
  }
  .is-opc { padding-right: clamp(10px, 3.2vw, 16px); }
  .is-ng {
    padding-left: clamp(11px, 3.4vw, 17px);
    border-left: 1px solid rgba(35, 38, 31, 0.12);
  }
  .pmx-owner {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(35, 38, 31, 0.42);
  }
  .pmx-owner.ng { color: var(--sage-text); }
  .pmx-text { margin-top: 0; }
  .pmx-name { font-size: 0.9rem; }
  .pmx-sub { font-size: 0.74rem; }

  /* no cards here — hairlines and type carry the comparison */
  .pmx-module {
    display: block;
    align-self: auto;
    margin-top: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
  }
  .pmx-module > * { display: block; }

  /* transformation is the hero band */
  .st-transform { padding-bottom: 10px; }
  .st-transform .pmx-temp { font-size: 1.5rem; margin-bottom: 3px; }
  .st-transform.is-ng .pmx-name { margin-bottom: 3px; }

  /* the eliminated stage: a hollow node and whitespace, no dashed frame */
  .pmx-void {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .pmx-void .pmx-name {
    color: var(--sage-text);
    font-weight: 700;
    text-indent: -15px;
    padding-left: 15px;
  }
  .pmx-void .pmx-name::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    border: 1px dashed rgba(110, 120, 100, 0.75);
  }
  .pmx-void .pmx-tag { order: 2; margin-top: 5px; }
  .pmx-void .pmx-sub { display: none; }

  /* the shared endpoint breaks the two-column pattern */
  .pmx-head-end { text-align: center; }
  .pmx-end {
    grid-column: 1 / -1 !important;
    display: block;
    margin-top: 2px;
    padding: 0;
    border: 0;
    text-align: center;
    transform: none;
    opacity: 1;
  }
  .pmx-end-text { padding-left: 0; }
  .paths-end { margin-top: 28px; }
  .two-paths .section-head { margin-bottom: 26px; }
}

/* ---------- Timeline (Technology) ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  margin: 10px 0 8px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 12px; left: 8px; right: 18%;
  height: 2px;
  background: var(--line-light);
}
.tl-item { position: relative; padding-top: 34px; }
.tl-dot {
  position: absolute;
  top: 5px; left: 0;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 2.5px solid var(--sage);
}
.tl-dot.accent { background: var(--sage); box-shadow: 0 0 0 6px rgba(110, 120, 100, 0.16); }
.tl-time {
  display: block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: 6px;
}
.tl-item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tl-sub { display: block; font-size: 0.85rem; color: var(--ink-3); margin-top: 3px; }
/* the ~90-minute milestone is the commercial headline of the sequence */
.tl-item.hi strong { font-size: clamp(1.55rem, 2.8vw, 2.1rem); }
.tl-item.hi .tl-sub { font-weight: 650; color: var(--sage-text); }
@media (max-width: 700px) {
  .timeline { grid-template-columns: 1fr; gap: 22px; }
  .timeline::before { top: 12px; bottom: 12px; left: 7px; right: auto; width: 2px; height: auto; }
  .tl-item { padding-top: 0; padding-left: 34px; }
  .tl-dot { top: 4px; }
}

/* ---------- Sector selector (homepage Applications preview) ----------
   One sector on screen at a time: an editorial tab rail over a single active
   panel. Deliberately NOT a card grid — the Applications page owns depth, this
   is the curated preview. */
.secsel { margin-top: clamp(6px, 1.4vw, 14px); }
.secsel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(20px, 3vw, 40px);
  border-bottom: 1px solid var(--line-light);
}
.secsel-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.42);
  transition: color 0.2s var(--ease-out);
}
.secsel-tab:hover { color: var(--ink-2); }
.secsel-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease-out);
}
.secsel-tab.is-active { color: var(--ink); }
.secsel-tab.is-active::after { transform: scaleX(1); }
.secsel-tab:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; border-radius: 2px; }

.secsel-stage { margin-top: clamp(26px, 3.4vw, 44px); }
.secsel-panel {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
  animation: secselIn 0.22s var(--ease-out) both;
}
.secsel-panel[hidden] { display: none; }
@keyframes secselIn { from { opacity: 0; } to { opacity: 1; } }

.secsel-media {
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-light);
  background: var(--paper-2);
}
.secsel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.secsel-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.secsel-use {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}

/* proof rail — hairlines and type, never mini cards */
.proof { margin: clamp(18px, 2.4vw, 26px) 0 0; border-top: 1px solid var(--line-light); }
.proof > div {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 4px 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-light);
}
.proof dt {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.45);
  align-self: center;
}
.proof dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  align-self: center;
}
.proof dd .ev { margin-left: 6px; vertical-align: 1px; }

.secsel-foot {
  margin-top: clamp(26px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 26px;
}
.secsel-note { font-size: 0.78rem; color: var(--ink-3); }

@media (max-width: 900px) {
  /* all tabs visible at once: wrap into rows rather than scroll off-screen */
  .secsel-tabs { gap: 2px 22px; }
  .secsel-tab { white-space: nowrap; padding-bottom: 10px; }
}
/* phones: a two-column grid keeps all five sectors on screen in three tidy
   rows instead of a tall single-file stack */
@media (max-width: 560px) {
  .secsel-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }
  .secsel-tab {
    text-align: left;
    padding: 7px 0 9px;
    font-size: 0.7rem;
    white-space: normal;
  }
  .secsel-panel { grid-template-columns: 1fr; gap: 20px; }
  .secsel-media { aspect-ratio: 4 / 3; }
  .secsel-use { max-width: none; }
  .proof > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
}

/* ---------- Applications page: project-fit matrix ---------- */
.fit { margin-top: clamp(8px, 1.6vw, 18px); border-top: 1px solid var(--line-light); }
.fit-row {
  display: grid;
  grid-template-columns: minmax(0, 30%) minmax(0, 1fr) auto;
  gap: 10px clamp(20px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--line-light);
}
.fit-sector {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1rem;
  color: var(--ink);
}
.fit-attrs { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.fit-attr {
  font-size: 0.84rem;
  color: var(--ink-2);
}
.fit-attr + .fit-attr::before { content: "· "; color: var(--ink-3); }
.fit-go { white-space: nowrap; }
.fit-note { margin-top: 14px; font-size: 0.8rem; color: var(--ink-3); max-width: 78ch; }

/* ---------- Applications page: sector deep dives ---------- */
.sector { padding: clamp(46px, 6vw, 82px) 0; border-top: 1px solid var(--line-light); }
.sector:first-of-type { border-top: none; }
.sector-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 66px);
  align-items: center;
}
/* alternate the composition so sectors never read as identical cards */
.sector.is-flipped .sector-media { order: -1; }
.sector-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-light);
  background: var(--paper-2);
}
.sector-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sector-kicker {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.sector h2 {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sector-challenge { margin-top: 12px; font-size: 1rem; line-height: 1.65; color: var(--ink-2); }
.sector-sub {
  margin-top: clamp(18px, 2.2vw, 24px);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.45);
}
.sector-list { list-style: none; padding: 0; margin: 8px 0 0; }
.sector-list li {
  padding: 7px 0 7px 18px;
  position: relative;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.sector-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sage);
}
.sector-types { margin-top: 8px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-3); }

/* ---------- Applications page: closing conversion ---------- */
.appcta { margin-top: clamp(16px, 2vw, 24px); }
.appcta .lede { max-width: 60ch; }

@media (max-width: 900px) {
  .fit-row { grid-template-columns: 1fr; gap: 6px; }
  .fit-go { margin-top: 4px; }
  .sector-grid { grid-template-columns: 1fr; gap: 22px; }
  /* stacked, the photograph is the entry point for the sector, not a footnote to
     it - so it leads every sector, flipped or not */
  .sector-media, .sector.is-flipped .sector-media { order: -1; }
}

/* ---------- Rapid early strength: time-to-strength (homepage) ----------
   No cards and no photography here — this section's job is TIME, and the
   Applications section further down owns sectors and imagery. The 90-minute
   station is the visual hero; 24 h and 28 d trail it as smaller milestones. */
.rapid {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  column-gap: clamp(34px, 4.2vw, 62px);
  row-gap: 48px;
  align-items: start;
}
/* The CTAs close this section, so stacked they belong after the schedule rail -
   past .sched, which lives outside the .rapid grid entirely. Nothing in CSS moves
   a child between containers, so there are two nodes and exactly one is rendered:
   the grid child on desktop, the section tail once stacked. */
.rapid > .rapid-ctas { grid-column: 1; }
.rapid-ctas.is-tail { display: none; }
.tts { grid-column: 2; grid-row: 1 / span 2; }
.rapid-copy .lede { max-width: 44ch; }

/* two values, deliberately unequal: 90-minute strength is the differentiator */
.rapid-metrics {
  margin: clamp(26px, 3vw, 34px) 0 0;
  border-top: 1px solid var(--line-light);
}
.rm-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-light);
}
.rm-item dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rm-item.is-primary dt { font-size: 1.85rem; color: var(--sage-text); }
.rm-item dd { margin: 3px 0 0; font-size: 0.88rem; color: var(--ink-3); }
.rm-ev { margin-top: 8px !important; }
.rapid-ctas { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }

/* ---- the time-to-strength sequence ---- */
.tts {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
}
/* one continuous rail behind every station */
.tts::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(110, 120, 100, 0.55) 0%, rgba(110, 120, 100, 0.55) 42%,
    rgba(35, 38, 31, 0.16) 62%, rgba(35, 38, 31, 0.16) 100%);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.6s var(--ease-out) 0.1s;
}
.tts.revealed::before { transform: scaleY(1); }

.tts-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
  padding: 0 0 clamp(26px, 3.2vw, 40px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.tts.revealed .tts-step { opacity: 1; transform: none; }
.tts.revealed .tts-step:nth-child(1) { transition-delay: 0.12s; }
.tts.revealed .tts-step:nth-child(2) { transition-delay: 0.32s; }
.tts.revealed .tts-step:nth-child(3) { transition-delay: 0.58s; }
.tts.revealed .tts-step:nth-child(4) { transition-delay: 0.72s; }
.tts-step:last-child { padding-bottom: 0; }

.tts-node {
  grid-row: 1 / span 4;
  align-self: start;
  margin-top: 7px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 2px solid rgba(35, 38, 31, 0.3);
}
.tts-node.is-hero {
  width: 15px; height: 15px;
  margin-top: 14px; margin-left: -2px;
  background: var(--sage);
  border-color: var(--sage);
  box-shadow: 0 0 0 6px rgba(110, 120, 100, 0.14);
}
.tts-step > *:not(.tts-node) { grid-column: 2; }

.tts-time {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tts-value {
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tts-value.is-sm { font-size: 1.25rem; }
.tts-note { margin-top: 3px; font-size: 0.8rem; line-height: 1.45; color: var(--ink-3); }

/* the hero station */
.tts-big {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.tts-big em {
  font-style: normal;
  margin-left: 10px;
  font-size: 0.23em;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-text);
  vertical-align: baseline;
}
.is-hero .tts-value {
  margin-top: 10px;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  color: var(--sage-text);
}
.is-hero .tts-note { margin-top: 5px; font-size: 0.86rem; }

/* ---- schedule value: the interpretation of the data above ---- */
.sched { margin-top: clamp(44px, 5.5vw, 70px); }
.sched-head {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.sched-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3.5vw, 50px);
  padding-top: clamp(20px, 2.4vw, 26px);
  border-top: 1px solid var(--line-light);
}
.sched-rail > div { min-width: 0; }
.sched-rail > div + div {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(22px, 3.5vw, 50px);
}
.sched-label {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.sched-sub { margin-top: 8px; font-size: 0.89rem; line-height: 1.55; color: var(--ink-3); }

/* stack before the two columns start to squeeze the sequence */
@media (max-width: 900px) {
  .rapid { grid-template-columns: 1fr; column-gap: 0; row-gap: 30px; }
  .rapid-copy .lede { max-width: none; }
  .tts { grid-column: auto; grid-row: auto; padding-top: 0; }
  /* stacked, the metric list sits directly above a sequence that already states
     ~5,000 PSI and 13,000+ PSI - so it reads as repetition. Drop it and let the
     sequence carry the figures; the tail copy of the CTAs closes the section. */
  .rapid-metrics { display: none; }
  .rapid > .rapid-ctas { display: none; }
  .rapid-ctas.is-tail { display: flex; margin-top: clamp(26px, 3.4vw, 34px); }
  .sched-rail {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sched-rail > div + div {
    border-left: none;
    padding-left: 0;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line-light);
  }
}
@media (max-width: 480px) {
  .rm-item.is-primary dt { font-size: 1.6rem; }
  .tts-step { column-gap: 16px; }
}

/* ---------- Why NuGreen: the binder thesis (homepage) ----------
   Editorial split: the headline owns the section, the activation photograph
   supports it, and a full-width payoff rail concludes it. Text column is the
   wider one so the thesis never has to shrink to fit. */
.binder {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(32px, 4.5vw, 68px);
  align-items: start;
}
.binder-copy { padding-top: clamp(6px, 1.2vw, 16px); }
.binder-copy .lede { max-width: 46ch; }

.binder-visual {
  position: relative;
  margin: 0;
  /* nudged down so the photo starts around the headline rather than the
     eyebrow — reads as editorial rather than two equal cards */
  margin-top: clamp(10px, 3.2vw, 46px);
  /* a modest landscape crop: 5:6 portrait made the photo taller than the whole
     text column and stole the focal point from the headline */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-light);
}
.binder-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hold the activation stream and the wetted material in frame */
  object-position: 62% 50%;
}
/* depth wash only — the photograph already carries the sage cast */
.binder-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(23, 26, 21, 0.18), rgba(23, 26, 21, 0) 55%);
}
.binder-caption {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.46);
}

/* three consequences, full width, hairlines only — no cards */
.binder-close {
  margin-top: clamp(44px, 5.5vw, 72px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line-light);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 44px) clamp(24px, 4vw, 56px);
}
.binder-close > div { min-width: 0; }
/* two rows of three: vertical rules between columns, never at a row start */
.binder-close > div:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(24px, 4vw, 56px);
}
.bc-kick {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.bc-head {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-wrap: balance;
}
.bc-sub { margin-top: 8px; font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); }
.bc-sub a { text-decoration: underline; }
.bc-foot {
  margin-top: clamp(20px, 2.6vw, 30px);
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(35, 38, 31, 0.68);
}
.bc-foot a { text-decoration: underline; }

/* The section's action link sits under the lede in the copy column on desktop.
   Stacked, that puts it before the argument it is supposed to close, so the tail
   copy takes over. Two nodes rather than one reordered node: the copy column and
   the section tail are different containers, and order/flex cannot move a child
   between them. Exactly one is ever rendered, so the a11y tree still sees one link. */
.binder-cta-end { display: none; }

/* tablet: 55/45 stops being elegant well before it breaks, so stack early */
@media (max-width: 900px) {
  .binder {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .binder-cta { display: none; }
  .binder-cta-end { display: block; margin-top: clamp(26px, 3.4vw, 34px); }
  .binder-copy { padding-top: 0; }
  .binder-copy .lede { max-width: none; }
  .binder-visual {
    margin-top: 4px;
    aspect-ratio: 4 / 3;
  }
  .binder-close {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .binder-close > div:not(:nth-child(3n + 1)) {
    border-left: none;
    padding-left: 0;
  }
  .binder-close > div + div {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line-light);
  }
}

/* ---------- Global climate alignment (About) ---------- */
.climate-map { margin: 6px 0 38px; }
.wm-frame { position: relative; }
.wm-frame > img { width: 100%; height: auto; display: block; opacity: 0.92; }
.wm-marker { position: absolute; transform: translate(-50%, -50%); }
.wm-dot {
  position: relative;
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--silver);
  box-shadow: 0 0 0 5px rgba(206, 212, 218, 0.12);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.wm-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  animation: wmPulse 3.2s ease-out infinite;
}
@keyframes wmPulse {
  0% { box-shadow: 0 0 0 0 rgba(206, 212, 218, 0.35); }
  70% { box-shadow: 0 0 0 13px rgba(206, 212, 218, 0); }
  100% { box-shadow: 0 0 0 0 rgba(206, 212, 218, 0); }
}
.wm-tag {
  position: absolute;
  top: 15px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
.wm-tag b {
  display: block;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* --mist measured 4.34:1 on this ground and failed 1.4.3; --silver-light is 4.94:1.
     The .lit state still lifts to --white (7.13:1), so hover feedback is preserved. */
  color: var(--silver-light);
  transition: color 0.3s;
}
.wm-tag em {
  display: block;
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --mist-2 measured 2.55:1 here — a clear failure. Only --silver-light (4.94:1)
     and --white (7.13:1) pass on --olive-800; the step down from the heading is
     carried by weight and size instead of colour. */
  color: var(--silver-light);
  margin-top: 2px;
}
.wm-marker.up .wm-tag { top: auto; bottom: 15px; }
.wm-marker.left .wm-tag { left: auto; right: 15px; top: 50%; transform: translateY(-50%); text-align: right; }
.wm-marker.right .wm-tag { left: 15px; right: auto; top: 50%; transform: translateY(-50%); text-align: left; }
.wm-abbr { display: none; }
.wm-marker.lit .wm-dot { background: var(--silver-light); box-shadow: 0 0 0 7px rgba(206, 212, 218, 0.28); }
.wm-marker.lit .wm-tag b { color: var(--white); }

.wm-global {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  width: max-content;
  max-width: 100%;
  padding: 10px 22px;
  border: 1px dashed var(--line-dark);
  border-radius: 999px;
  transition: border-color 0.3s;
}
.wm-global-label {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-light);
}
.wm-global-items { font-size: 0.86rem; color: var(--mist); transition: color 0.3s; }
.wm-global.lit { border-color: rgba(206, 212, 218, 0.45); }
.wm-global.lit .wm-global-items { color: var(--white); }

@media (max-width: 700px) {
  .wm-full { display: none; }
  .wm-abbr { display: inline; }
  .wm-tag em { display: none; }
  .wm-tag b { font-size: 0.6rem; letter-spacing: 0.1em; }
  .wm-dot { width: 8px; height: 8px; }
  /* comfortable tap targets for calculator/datasheet tabs */
  .tab { padding: 12px 20px; }
}

.policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 700px) { .policy-grid { grid-template-columns: 1fr; } }
.policy-card {
  position: relative;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: rgba(94, 98, 88, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 26px 26px 24px;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.3s;
}
.policy-card:hover, .policy-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(206, 212, 218, 0.4);
}
.policy-num {
  position: absolute;
  top: 12px; right: 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -0.03em;
  color: rgba(251, 251, 249, 0.07);
  line-height: 1;
}
.policy-region {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-light);
}
.policy-region::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--silver-light); opacity: 0.8; }
.policy-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 12px;
  color: var(--white);
}
.policy-obj { margin-top: 8px; font-size: 0.94rem; color: var(--mist); }
.policy-align-label {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-2);
}
.policy-align { margin-top: 5px; font-size: 0.94rem; color: var(--mist); }
.policy-metric {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.policy-metric b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--silver-light);
}
.policy-metric span { font-size: 0.82rem; color: var(--mist-2); }
.policy-links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--silver-light);
}
.ext-link:hover, .ext-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ext-link svg { flex: none; }

/* ---------- Primary-nav dropdowns ----------
   Built from a survey of 12 institutional navs (Holcim, Heidelberg, Sika,
   Saint-Gobain, CEMEX, Fortera, Arup, AECOM, Ramboll, BlackRock, Brookfield,
   CarbonCure). What they share, and what this follows:
     · a LIGHT panel even when the header is dark (Fortera/Brookfield/Holcim
       all invert to white from a dark masthead)
     · panel flush under the header, square top corners — an extension of the
       masthead, not an object floating over the page
     · NO backdrop blur (0 of 12) and NO shadow (10 of 12) — the two things
       that made this read as an app context menu
     · rows are plain text, radius 0, no fill; hover is a rule, not a button
     · the top-level active state is a rule, never a pill
   Radius/hairline/no-shadow match .spec-panel and .std-anchor, the site's own
   institutional surfaces. */
.nav-links > li.has-sub { position: relative; }
.sub-chev { display: none; }

@media (min-width: 901px) {
  /* top-level items lose the pill entirely — an underline carries state */
  .nav-links > li > a {
    border-radius: 0;
    background: none;
  }
  .nav-links > li > a[aria-current="page"] { background: none; }
  .nav-links > li > a::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px;
    bottom: 4px;
    height: 2px;
    background: var(--sage);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.24s var(--ease-out);
  }
  .nav-links > li > a { position: relative; }
  .nav-links > li > a:hover { color: var(--white); background: none; }
  .nav-links > li > a[aria-current="page"],
  .nav-links > li.has-sub.is-section > a { color: var(--white); }
  .nav-links > li > a[aria-current="page"]::after,
  .nav-links > li.has-sub.is-section > a::after,
  .nav-links > li.has-sub:hover > a::after,
  .nav-links > li.has-sub:focus-within > a::after { transform: scaleX(1); }

  /* chevron now lives INSIDE the link, so the state rule spans label+chevron */
  .nav-links > li.has-sub > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .sub-chev {
    display: block;
    flex: none;
    color: var(--mist);            /* --mist-2 measured 2.32:1 on the nav — fails 1.4.11 */
    transition: transform 0.22s var(--ease-out);
  }
  .nav-links > li.has-sub:hover .sub-chev,
  .nav-links > li.has-sub:focus-within .sub-chev,
  .nav-links > li.has-sub.is-open .sub-chev { transform: rotate(180deg); }

  .subnav {
    position: absolute;
    top: 100%;                     /* flush: no floating gap */
    left: -2px;
    z-index: 60;
    width: 316px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--line-light);
    border-top: 0;                 /* the masthead supplies the top edge */
    border-radius: 0 0 10px 10px;  /* bottom only, at the site's panel radius */
    box-shadow: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out),
                visibility 0s linear 0.16s;
  }
  .nav-links > li.has-sub:hover .subnav,
  .nav-links > li.has-sub:focus-within .subnav,
  .nav-links > li.has-sub.is-open .subnav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .subnav li + li a { border-top: 1px solid var(--line-light); }
  .subnav a {
    display: block;
    padding: 14px 18px;
    border-radius: 0;
    background: none;
    box-shadow: inset 2px 0 0 transparent;
    transition: box-shadow 0.16s var(--ease-out), color 0.16s;
  }
  .sub-t {
    display: block;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  .sub-d {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--ink-3);
  }
  /* hover and current speak through DIFFERENT channels, the way the top-level
     bar already does (hover = colour, current = rule). Sharing one channel is
     what made them indistinguishable: the old current-row tint measured
     1.07:1 against white, so the two states were effectively identical. */
  .subnav a:hover,
  .subnav a:focus-visible { background: none; }
  .subnav a:hover .sub-t,
  .subnav a:focus-visible .sub-t {
    color: var(--sage-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  /* the panel clips to its bottom radius, so the focus ring is drawn inward */
  .subnav a:focus-visible { outline-offset: -3px; }
  /* the left rule now means exactly one thing: you are here */
  .subnav a[aria-current="page"] {
    box-shadow: inset 2px 0 0 var(--sage);
    /* clears the top-level pill fill, which .nav-links a[aria-current] leaks
       into submenu links (white 12% — invisible on the white panel, but wrong) */
    background: none;
  }
  .subnav a[aria-current="page"] .sub-t { color: var(--sage-text); font-weight: 700; }
}

@media (max-width: 900px) {
  /* submenus stay open and indented; descriptions would double the menu height */
  .nav-links .subnav {
    list-style: none;
    margin: 2px 0 10px;
    padding: 0 0 0 18px;
    border-left: 1px solid rgba(251, 251, 249, 0.16);
  }
  .nav-links .subnav a {
    font-size: 1.02rem;
    font-weight: 550;
    padding: 9px 0 9px 12px;
    color: rgba(251, 251, 249, 0.58);
  }
  .nav-links .subnav a[aria-current="page"] { color: var(--white); }
  .sub-d { display: none; }

  /* the menu must fit the viewport — scrolling a primary nav is bad UX.
     measured 920px against an 812px viewport before this block. */
  .nav-menu {
    padding-top: calc(84px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .nav-links > li > a {
    font-size: 1.18rem;
    padding: 9px 0 9px 16px;
  }
  .nav-links .subnav { margin: 0 0 6px; padding-left: 16px; }
  .nav-links .subnav a { font-size: 0.94rem; padding: 7px 0 7px 12px; }
  .nav-cta-wrap { padding-top: 18px; }
  .nav-menu .nav-cta { padding: 13px 18px; }
  .mm-title { margin-top: 18px; }
  .menu-secondary { margin-top: 12px; }
}

/* short viewports (iPhone SE and friends): one more density step */
@media (max-width: 900px) and (max-height: 720px) {
  .nav-menu {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
  }
  .nav-links > li > a { font-size: 1.04rem; padding: 6px 0 6px 14px; }
  .nav-links .subnav a { font-size: 0.88rem; padding: 5px 0 5px 11px; }
  .nav-links .subnav { margin: 0 0 4px; }
  .nav-cta-wrap { padding-top: 12px; }
  .mm-title { margin-top: 12px; }
  .menu-secondary { margin-top: 8px; }
}

/* ---------- About: mission statement + vision target ----------
   No card tier here. The mission is set as an editorial statement and the
   vision as a figure, using the same tabular-numeral treatment every other
   number on the site gets. */
.mv {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.mv-target {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(28px, 4vw, 64px);
}
.mv-lead {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.9vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}
.mv-body {
  margin-top: clamp(16px, 2vw, 22px);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 56ch;
}
.mv-figure {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
.mv-figure span {
  display: block;
  margin-top: 8px;
  font-size: 0.24em;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mv-figure-label {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-light);
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(35, 38, 31, 0.68);
}

/* ---------- About: core values register ----------
   Same hairline rail as the homepage why-rail; values the site can actually
   evidence carry a link to the evidence. */
.creed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 44px) clamp(24px, 4vw, 56px);
}
.creed-item { min-width: 0; }
.creed-item:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(24px, 4vw, 56px);
}
.creed-idx {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  color: var(--sage-text);
}
.creed-name {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.creed-text {
  margin-top: 9px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.creed-proof { margin-top: 11px; }
.creed-proof a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sage-text);
}
.creed-proof a:hover { text-decoration: underline; text-underline-offset: 3px; }
.creed-proof svg { flex: none; transition: transform 0.25s var(--ease-out); }
.creed-proof a:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .mv { grid-template-columns: 1fr; gap: 0; }
  .mv-target {
    border-left: 0;
    padding-left: 0;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line-light);
  }
  .creed { grid-template-columns: 1fr; gap: 0; }
  .creed-item:not(:nth-child(3n + 1)) { border-left: 0; padding-left: 0; }
  .creed-item + .creed-item {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line-light);
  }
}

/* ---------- Impact calculator ---------- */
.calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.calc-out.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .calc-out, .calc-out.cols-2 { grid-template-columns: 1fr; } }
/* calculator mode tabs stay visible on mobile (unlike datasheet tabs) */
@media (max-width: 700px) {
  .tabs.tabs-keep { display: flex; }
}
/* The note below assumed "two short tabs never need to scroll". They do: at
   375px the pair needs 394px inside a 281px container, so the second tab was
   cut off the right edge and could not be tapped at all. With overflow kept
   visible (the underline depends on it) the only honest fix is to stack them -
   which also lifts each control to a 44px target. */
@media (max-width: 520px) {
  .tabs.calc-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 0;
  }
  .tabs.calc-tabs .tab {
    display: flex;
    align-items: center;
    min-height: 44px;   /* the uppercase label alone is only ~7px of content */
    padding: 0;
    text-align: left;
    border-bottom: 1px solid var(--line-light);
  }
}
/* calculator tabs use the site-wide editorial underline paradigm (secsel /
   datasheet), not pills. overflow must stay visible: .tabs sets overflow-x:auto
   which would clip the -1px underline (the m29 lesson) — two short tabs never
   need to scroll anyway. */
.tabs.calc-tabs {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line-light);
  overflow: visible;
  overflow-x: visible;
  padding: 0;
  margin-bottom: 22px;
  gap: 0 clamp(20px, 3vw, 40px);
}
.tabs.calc-tabs .tab,
.tabs.calc-tabs .tab[aria-selected="true"] {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  position: relative;
  padding: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.42);
  transition: color 0.2s var(--ease-out);
}
.tabs.calc-tabs .tab:hover { color: var(--ink-2); }
.tabs.calc-tabs .tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease-out);
}
.tabs.calc-tabs .tab[aria-selected="true"] { color: var(--ink); }
.tabs.calc-tabs .tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabs.calc-tabs .tab:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; border-radius: 2px; }

/* slightly denser nav to fit the expanded menu */
@media (min-width: 901px) {
  .nav-links > li > a { padding: 9px 12px; font-size: 0.92rem; }
}
/* eight items: one more density step keeps the nav on one line between the
   burger threshold and ~1140px (measured 75px deficit at 901px). nowrap is
   load-bearing: without it the pills wrap INTERNALLY ("Carbon / credits")
   instead of overflowing, which row-position checks do not catch */
.nav-links > li > a { white-space: nowrap; }
.nav .btn { white-space: nowrap; }
/* six top-level items now, so the tightest band can breathe again */
@media (min-width: 901px) and (max-width: 1140px) {
  .nav-links { gap: 4px; }
  .nav-links > li > a { padding: 9px 9px; font-size: 0.89rem; }
  .nav .btn { padding-inline: 18px; }
}
.calc-stat {
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--paper);
}
.calc-stat .num { display: block; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--sage-text); }
.calc-stat p { margin-top: 4px; font-size: 0.85rem; color: var(--ink-3); }

/* ---------- Design-brief rows (constraint → design response) ---------- */
.brief { margin-top: 6px; border-top: 1px solid var(--line-light); }
.brief-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
  grid-template-areas: "cat cat cat" "old link new";
  align-items: start;
  gap: 0 clamp(18px, 2.4vw, 34px);
  padding: clamp(24px, 2.8vw, 34px) 0;
  border-bottom: 1px solid var(--line-light);
}
.br-cat {
  grid-area: cat;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.br-idx { color: var(--sage-text); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.br-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.br-label.ng { color: var(--sage-text); }
/* legacy constraint: restrained, never accusatory — no red, no failure marks */
.br-old { grid-area: old; color: var(--ink-3); font-size: 0.97rem; line-height: 1.6; }
.br-new { grid-area: new; }
.br-answer { color: var(--ink); font-weight: 600; font-size: 1.02rem; line-height: 1.55; }
.br-ref {
  display: block;
  font-family: var(--font-display);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  color: var(--ink-2);
  margin-bottom: 2px;
}
.br-ref.ng { color: var(--sage-text); }
.br-proof { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.br-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.br-num.alt { font-size: clamp(1.2rem, 1.9vw, 1.5rem); letter-spacing: -0.01em; color: var(--sage-text); }
.br-unit {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.br-ev { margin-top: 8px; font-size: 0.82rem; color: var(--ink-3); }

/* transformation connector: a thin engineering line, drawn on reveal */
.br-link { grid-area: link; position: relative; align-self: start; padding-top: 28px; }
.br-line {
  display: block;
  position: relative;
  height: 2px;
  /* opacity sits on the element so it covers the shaft AND the ::after head —
     the whole arrow fades as one object */
  background: var(--sage);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-out) 0.15s;
}
.br-line::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 13px; height: 13px;
  border-top: 3px solid var(--sage);
  border-right: 3px solid var(--sage);
  transform: translateY(-50%) rotate(45deg);
}
.brief-row.revealed .br-line { transform: scaleX(1); }
/* the response settles in just after the line lands */
.brief-row .br-new { opacity: 0; transform: translateY(6px); transition: opacity 0.6s var(--ease-out) 0.5s, transform 0.6s var(--ease-out) 0.5s; }
.brief-row.revealed .br-new { opacity: 1; transform: none; }

.brief-foot { margin-top: 20px; }
.br-method { margin-left: 10px; font-size: 0.86rem; white-space: nowrap; }

@media (max-width: 820px) {
  .brief-row {
    grid-template-columns: 1fr;
    grid-template-areas: "cat" "old" "link" "new";
    gap: 0;
  }
  .br-link { padding: 14px 0 14px 2px; align-self: auto; }
  /* vertical connector on stacked layout */
  .br-line { width: 2px; height: 26px; transform: scaleY(0); transform-origin: top center; }
  .brief-row.revealed .br-line { transform: scaleY(1); }
  .br-line::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
}

.ledger-foot {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--ink-3);
  max-width: 80ch;
}

/* ---------- Technical specification console (Technology) ----------
   Two columns that cannot size each other. The rail owns its own height (five
   fixed rows of its own content) and the stage owns its own; earlier the panels
   spanned the nav rows, so a tall category stretched those rows and shifted the
   navigator down the page. On mobile both wrappers go display:contents and
   `order` interleaves nav/panel back into accordion sequence. Semantics stay
   accordion-style at both widths (button + aria-expanded + labelled region). */
.spec-console {
  --spec-gap: clamp(26px, 3.6vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 25fr) minmax(0, 75fr);
  column-gap: var(--spec-gap);
  align-items: start;
  margin-top: clamp(30px, 4vw, 48px);
}

/* ---- left navigator: type and a rule, never a card ---- */
.spec-rail {
  position: sticky;
  top: 120px;
  align-self: start;
}
.spec-stage { min-width: 0; }
.spec-nav {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  cursor: pointer;
  padding: 13px 0 13px 16px;
  transition: border-color 0.2s var(--ease-out);
}
/* hairline across the gutter: the active entry reaches the workspace edge */
.spec-nav.is-active::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: var(--spec-gap);
  height: 1px;
  background: linear-gradient(to right, var(--sage), var(--line-light));
}
.spec-nav-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.45);
  transition: color 0.2s var(--ease-out);
}
.spec-nav-desc {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(35, 38, 31, 0.34);
  transition: color 0.2s var(--ease-out);
}
.spec-nav:hover .spec-nav-name { color: var(--ink-2); }
.spec-nav.is-active { border-left-color: var(--sage); }
.spec-nav.is-active .spec-nav-name { color: var(--ink); }
.spec-nav.is-active .spec-nav-desc { color: var(--ink-3); }
.spec-nav:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.spec-chev { display: none; flex: none; color: var(--ink-3); }

/* ---- right workspace ---- */
.spec-panel {
  min-width: 0;
  /* floor keeps the shortest category from collapsing the workspace and
     leaves the connector something to land on for every nav position */
  min-height: 430px;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line-light);
  border-radius: 10px;
  background: #ffffff;
  animation: specIn 0.18s var(--ease-out) both;
}
.spec-panel[hidden] { display: none; }
@keyframes specIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* the workspace restates the category, so the pane is self-identifying */
.spec-head {
  margin-bottom: clamp(14px, 1.6vw, 18px);
  padding-bottom: clamp(13px, 1.5vw, 16px);
  border-bottom: 1px solid var(--line-light);
}
.spec-head-cat {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.spec-head-title {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.spec-intro {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 62ch;
}

/* ---- hero specification rail ---- */
.spec-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 32px);
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--line-light);
}
.spec-hero > div { min-width: 0; }
.spec-hero > div + div {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(16px, 2.2vw, 32px);
}
.spec-hero dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
}
.spec-hero dt span {
  display: block;
  margin-top: 5px;
  font-size: 0.34em;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* word-based specs sit a size down so they don't shout over the numbers */
.spec-hero dt.is-word {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.spec-hero dd {
  margin: 9px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-3);
}
.spec-ev { margin-top: clamp(14px, 1.8vw, 18px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spec-ev-note { font-size: 0.78rem; color: var(--ink-3); }

/* ---- engineering ledger ---- */
.spec-ledger {
  width: 100%;
  border-collapse: collapse;
  margin-top: clamp(20px, 2.4vw, 28px);
}
.spec-ledger thead th {
  text-align: left;
  padding: 0 14px 9px 0;
  border-bottom: 1px solid rgba(35, 38, 31, 0.18);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.4);
}
.spec-ledger tbody th,
.spec-ledger tbody td { padding: 11px 14px 11px 0; vertical-align: top; }
.spec-ledger tbody tr { border-bottom: 1px solid var(--line-light); }
.spec-ledger tbody tr:last-child { border-bottom: 0; }
.spec-ledger tbody tr:hover { background: rgba(35, 38, 31, 0.015); }
.spec-ledger tbody th {
  width: 38%;
  text-align: left;
  font-weight: 550;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.spec-ledger td.res {
  width: 24%;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.spec-ledger td.basis {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.spec-foot {
  margin-top: 16px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 78ch;
}

/* ---- accordion: below the width where a two-pane console reads ---- */
@media (max-width: 900px) {
  /* rail and stage dissolve; `order` re-pairs each nav with its own panel */
  .spec-console {
    display: flex;
    flex-direction: column;
    margin-top: 26px;
    border-top: 1px solid var(--line-light);
  }
  .spec-rail,
  .spec-stage { display: contents; }
  .spec-rail { position: static; }
  .spec-nav:nth-child(1) { order: 0; }
  .spec-panel:nth-child(1) { order: 1; }
  .spec-nav:nth-child(2) { order: 2; }
  .spec-panel:nth-child(2) { order: 3; }
  .spec-nav:nth-child(3) { order: 4; }
  .spec-panel:nth-child(3) { order: 5; }
  .spec-nav:nth-child(4) { order: 6; }
  .spec-panel:nth-child(4) { order: 7; }
  .spec-nav:nth-child(5) { order: 8; }
  .spec-panel:nth-child(5) { order: 9; }
  .spec-nav.is-active::after { display: none; }
  .spec-head { display: none; }
  .spec-panel { min-height: 0; }
  .spec-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    border-left: 0;
    border-bottom: 1px solid var(--line-light);
    padding: 16px 2px;
  }
  .spec-nav.is-active { border-left: 0; border-bottom-color: transparent; }
  .spec-nav-name { flex: none; }
  .spec-nav-desc {
    flex: 1;
    margin-top: 0;
    text-align: right;
    font-size: 0.76rem;
  }
  .spec-chev {
    display: block;
    transition: transform 0.22s var(--ease-out);
  }
  .spec-nav.is-active .spec-chev { transform: rotate(180deg); }
  .spec-panel {
    border: 0;
    border-bottom: 1px solid var(--line-light);
    border-radius: 0;
    background: none;
    padding: 4px 2px 26px;
  }
  .spec-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }
  /* the third spec drops to a full-width row rather than a cramped column */
  .spec-hero > div:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0;
    padding-left: 0;
    padding-top: 14px;
    border-top: 1px solid var(--line-light);
  }
  .spec-hero > div:nth-child(2) { border-left: 1px solid var(--line-light); padding-left: 18px; }
  .spec-ledger thead { display: none; }
  .spec-ledger tbody tr { display: block; padding: 12px 0; }
  .spec-ledger tbody th,
  .spec-ledger tbody td { display: block; width: auto; padding: 0; white-space: normal; }
  /* colour is deliberately NOT overridden here: --ink-3 measures 4.07:1 on
     --paper-2 and failed 1.4.3 below this breakpoint only — invisible on a laptop.
     Inheriting the desktop --ink-2 gives 7.62:1. */
  .spec-ledger tbody th { font-size: 0.86rem; width: auto; }
  /* `.spec-ledger td.res` outranks the `tbody td` reset above, so its desktop
     width/nowrap have to be cleared explicitly or values get clipped */
  .spec-ledger td.res { margin-top: 3px; font-size: 1rem; width: auto; white-space: normal; }
  .spec-ledger td.basis:empty { display: none; }
  .spec-ledger td.basis { margin-top: 3px; }
}

@media (max-width: 430px) {
  .spec-nav-desc { display: none; }
  .spec-nav-name { flex: 1; }
}

/* ---------- Datasheet (tabbed spec panel) ---------- */
.datasheet {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-light);
  background: #ffffff;
  overflow: hidden;
}
.tabs {
  display: flex;
  gap: 6px;
  padding: 14px;
  border-bottom: 1px solid var(--line-light);
  background: var(--paper-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.tab:hover { color: var(--ink); background: rgba(35, 38, 31, 0.06); }
.tab[aria-selected="true"] { background: var(--olive-800); color: var(--white); }

/* Technical specifications: editorial tab rail matching the homepage sector
   selector — scoped to .datasheet so the Impact calculator keeps its own tabs. */
.datasheet .tabs {
  gap: clamp(18px, 2.6vw, 36px);
  padding: 0 clamp(20px, 2.6vw, 28px);
  background: none;
}
.datasheet .tab {
  position: relative;
  padding: 17px 0 15px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.42);
  transition: color 0.2s var(--ease-out);
}
.datasheet .tab::after {
  content: "";
  position: absolute;
  /* `.tabs` sets overflow-x:auto, which makes overflow-y compute to auto too —
     so the strip is a scroll container and anything below its content box is
     clipped. Sit the rule ON the bottom edge, not 1px past it. */
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease-out);
}
.datasheet .tab:hover { color: var(--ink-2); background: none; }
.datasheet .tab[aria-selected="true"] { color: var(--ink); background: none; }
.datasheet .tab[aria-selected="true"]::after { transform: scaleX(1); }
.datasheet .tab:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 2px; }

.ds-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ds-table tr + tr { border-top: 1px solid var(--line-light); }
.ds-table th {
  text-align: left;
  font-weight: 550;
  color: var(--ink-2);
  font-size: 0.95rem;
  padding: 15px 12px 15px 24px;
  width: 36%;
}
.ds-table td.val {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  padding: 15px 12px;
  width: 26%;
}
.ds-table td.note { color: var(--ink-3); font-size: 0.88rem; padding: 15px 24px 15px 0; }
.ds-foot {
  margin: 0;
  padding: 14px 24px;
  border-top: 1px dashed var(--line-light);
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* datasheet accordion header (mobile only) */
.ds-acc { display: none; }

@media (max-width: 700px) {
  /* tabs → accordion */
  .tabs { display: none; }
  .ds-acc {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--paper-2);
    border: none;
    border-top: 1px solid var(--line-light);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .datasheet .ds-acc:first-of-type { border-top: none; }
  .ds-acc .chev { flex: none; color: var(--sage-text); transition: transform 0.3s var(--ease-out); }
  .ds-acc[aria-expanded="true"] .chev { transform: rotate(180deg); }

  /* spec tables reflow: label over value, no horizontal scroll */
  .ds-table, .ds-table tbody { display: block; min-width: 0; }
  .ds-table tr { display: block; padding: 12px 20px; }
  .ds-table th, .ds-table td { display: block; width: auto; padding: 0; }
  .ds-table th { font-size: 0.82rem; color: var(--ink-3); }
  .ds-table td.val { display: block; width: auto; white-space: normal; padding: 0; margin-top: 2px; font-size: 1.05rem; }
  .ds-table td.note { display: block; width: auto; padding: 0; margin-top: 2px; }
  .ds-table td.note:empty { display: none; }

  /* comparison table reflows into per-property cards */
  table.compare, .compare tbody { display: block; min-width: 0; }
  .compare thead { display: none; }
  .compare tbody tr { display: block; padding: 14px 18px; }
  .compare td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 4px 0;
    font-size: 0.95rem;
  }
  .compare td::before {
    content: attr(data-label);
    color: var(--ink-3);
    font-size: 0.85rem;
  }
  .compare td.metric {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 6px;
    padding: 0;
  }
  .compare td.metric::before { content: none; }
  /* stacked cards: column tint reads as a stray stripe — value color carries the emphasis */
  .compare td.nugreen { background: transparent; }
}

/* ---------- Compliance standards board (Technology #compliance) ----------
   Replaces the badge cloud that used to live here. Three layers: the documents
   that actually govern the product, the full register grouped by what each
   document IS, then the framing note. Scope tags are plain micro-labels, never
   chips — a withdrawn test method must not read like a certification. Chrome is
   borrowed wholesale from .spec-panel / .spec-ledger so this reads as a sibling
   of the specification console directly above it on the same page. */
.std-anchors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.std-anchor {
  min-width: 0;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line-light);
  border-radius: 10px;
  background: #ffffff;
}
.std-anchor-tag {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.std-anchor-code {
  margin-top: 11px;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
}
.std-anchor-label {
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.4;
  color: var(--ink-2);
}
.std-anchor-note {
  margin-top: clamp(14px, 1.6vw, 18px);
  padding-top: clamp(13px, 1.5vw, 16px);
  border-top: 1px solid var(--line-light);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* the headline is two full sentences; at the shared 780px section-head width
   the first one wraps and the balanced break lands mid-sentence */
#compliance .section-head { max-width: 940px; }

/* ---- the register: a technical index, not three columns of prose ----
   The alphanumeric identifier is the scan target; the issuing body, the plain
   description and the scope classification step down from it. Formal standard
   titles live in a .visually-hidden span so the visible board stays short. */
.std-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* head / entries / editorial note share rows across all three columns, so the
     registers start on one line and the basis notes bottom out on one line */
  grid-template-rows: auto 1fr auto;
  gap: clamp(20px, 2.8vw, 40px);
  margin-top: clamp(34px, 4.5vw, 56px);
}
.std-cat {
  min-width: 0;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
.std-cat + .std-cat {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(20px, 2.8vw, 40px);
}
.std-cat-head {
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(35, 38, 31, 0.3);
}
.std-cat-index {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: var(--sage-text);
}
.std-cat-name {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.std-cat-note {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(35, 38, 31, 0.68);
}
.std-list { list-style: none; margin: 0; padding: 0; align-self: start; }
.std-item {
  padding: 15px 0 16px;
  border-bottom: 1px solid var(--line-light);
}
.std-item:last-child { border-bottom: 0; }
.std-code {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  overflow-wrap: break-word;
}
.std-org {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 750;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.68);
  transition: color 0.2s var(--ease-out);
}
.std-desc {
  margin-top: 9px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-2);
  transition: color 0.2s var(--ease-out);
}
.std-scope {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(35, 38, 31, 0.68);
  transition: color 0.2s var(--ease-out);
}
/* hover raises contrast only -- nothing lifts, moves or boxes */
.std-item:hover .std-desc { color: var(--ink); }
.std-item:hover .std-org,
.std-item:hover .std-scope { color: rgba(35, 38, 31, 0.88); }
/* provenance qualifiers (withdrawn / superseded / scope-limited) carry a silver
   rule, not sage -- sage reads as endorsement everywhere else on the site, and
   these are transparency notes, not warnings */
.std-status {
  margin-top: 9px;
  padding-left: 11px;
  border-left: 2px solid var(--silver);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ink-2);
}
/* editorial note that fills the short columns deliberately rather than
   padding them out with standards that do not belong there */
.std-basis {
  align-self: end;
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-top: 14px;
  border-top: 1px solid var(--line-light);
}
.std-basis-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.std-basis-text {
  margin-top: 7px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(35, 38, 31, 0.68);
}

/* ---- framing ---- */
.std-summary {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(18px, 3vw, 48px);
  align-items: start;
  margin-top: clamp(34px, 4.5vw, 56px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(35, 38, 31, 0.3);
}
.std-summary > div { min-width: 0; }
.std-summary-head {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}
.std-summary-body {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(35, 38, 31, 0.68);
  max-width: 62ch;
}
.std-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(24px, 3vw, 40px);
  margin-top: clamp(16px, 2vw, 22px);
}
.std-cta .link-arrow { font-size: 0.9rem; }
/* --ink-3 measures 4.43:1 on --paper; weight (650 vs 700) carries the
   de-emphasis instead, and the colour matches the body copy beside it */
.std-cta .link-arrow.quiet { color: rgba(35, 38, 31, 0.68); }

/* anchors need more width than the index does, so they collapse earlier:
   below 900 they become ONE hairline-divided card rather than three boxes */
@media (max-width: 900px) {
  .std-anchors {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--line-light);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
  }
  .std-anchor {
    border: 0;
    border-radius: 0;
    padding: clamp(18px, 4vw, 24px);
  }
  .std-anchor + .std-anchor { border-top: 1px solid var(--line-light); }
  .std-summary { grid-template-columns: 1fr; gap: 12px; }
}

/* the index holds three columns down to 700, then each category becomes its
   own stacked section with a compact two-up mini-index inside it */
@media (max-width: 700px) {
  .std-matrix {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0;
    margin-top: clamp(30px, 5vw, 40px);
  }
  /* display AND grid-row both have to be cleared, or each category still
     claims three rows of the (now single-column) parent grid */
  .std-cat { display: block; grid-row: auto; }
  .std-cat + .std-cat {
    border-left: 0;
    padding-left: 0;
    margin-top: clamp(30px, 6vw, 42px);
  }
  .std-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 4vw, 28px);
  }
  /* entries carrying a provenance note take the full width */
  .std-item.has-note { grid-column: 1 / -1; }
  /* the mini-index needs a terminating rule, but only where the list is the
     last thing in the category -- otherwise it stacks against .std-basis's
     own border-top a few pixels below */
  .std-cat > .std-list:last-child > .std-item:last-child {
    border-bottom: 1px solid var(--line-light);
  }
  .std-basis { margin-top: 24px; }
}

@media (max-width: 359px) {
  .std-list { grid-template-columns: 1fr; }
}

/* ---------- Carbon credits page (carbon-credits.html) ----------
   All-new namespace (.cc-*). On-dark body copy uses a lifted grey ladder:
   --mist fails AA on both olive surfaces, and --silver-light fails on
   olive-700 cards -- measured values noted per rule. */
/* Carbon hero (viaduct + MRV layer): calibrated like is-impact -- the shared
   0.82 darkening + heavy right scrim crushed the measurement layer, so the
   subject side opens up while the left text scrim stays identical. Values are
   the ones approved in the filter simulator (simulate-hero-filter.py --tuned). */
.page-hero-media.is-carbon img {
  object-position: 50% 55%;
  filter: grayscale(1) brightness(0.95) contrast(1.2);
}
.page-hero-media.is-carbon::after {
  background:
    linear-gradient(90deg, rgba(78, 86, 70, 0.94) 0%, rgba(78, 86, 70, 0.55) 48%, rgba(78, 86, 70, 0.16) 100%),
    linear-gradient(180deg, rgba(62, 66, 57, 0.35) 0%, rgba(62, 66, 57, 0.08) 40%, rgba(62, 66, 57, 0.62) 100%);
}
/* page-scoped: --mist ledes measure 4.34:1 on olive-800; lift to 5.30:1.
   Scoped to this page rather than site-wide so other pages are untouched. */
.cc-page .on-dark .lede,
.cc-page .page-hero .lede { color: #d7dcd4; }

/* ---- premise: three hairline columns, index-led ---- */
.cc-premise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 40px);
}
.cc-premise-item { min-width: 0; }
.cc-premise-item + .cc-premise-item {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(20px, 2.8vw, 40px);
}
.cc-premise-idx {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: var(--sage-text);
}
.cc-premise-item h3 {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.cc-premise-item p:last-child {
  margin-top: 9px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---- framework ledger (reuses .spec-ledger chrome) ---- */
.cc-frame { max-width: 980px; }
.cc-frame-ledger td.res { white-space: normal; }
/* the ledger chrome was tuned for white spec panels; directly on paper-2 its
   muted inks miss AA (basis --ink-3 = 4.07, thead 0.4 alpha = 2.32) */
.cc-frame-ledger td.basis { color: var(--ink-2); }
.cc-frame-ledger thead th { color: rgba(35, 38, 31, 0.68); }   /* 4.97:1 */
.cc-frame-note {
  margin-top: 16px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 72ch;
}

/* ---- credit lifecycle rail ---- */
.cc-life {
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(35, 38, 31, 0.3);
}
.cc-life-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.cc-life-rail {
  counter-reset: cc-step;
  list-style: none;
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.cc-life-rail li {
  counter-increment: cc-step;
  min-width: 0;
}
.cc-life-rail li + li {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(14px, 1.8vw, 24px);
}
.cc-life-rail li::before {
  content: counter(cc-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  color: var(--sage-text);
}
.cc-life-step {
  display: block;
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cc-life-desc {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---- the model: three nodes joined by hairlines (on dark) ---- */
.cc-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(20px, 2.6vw, 44px) minmax(0, 1fr) clamp(20px, 2.6vw, 44px) minmax(0, 1fr);
  align-items: stretch;
}
.cc-flow-node {
  min-width: 0;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--olive-700);
}
.cc-flow-node.is-accent { border-color: rgba(226, 231, 224, 0.42); }
.cc-flow-cat {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e2e7e0;   /* 4.98:1 on olive-700; --silver-light is 4.18 there */
}
.cc-flow-node h3 {
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--white);
}
.cc-flow-node p:last-child {
  margin-top: 9px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #dde1da;   /* 4.71:1 on olive-700 */
}
.cc-flow-link {
  align-self: center;
  height: 1px;
  background: linear-gradient(to right, rgba(226, 231, 224, 0.55), rgba(226, 231, 224, 0.2));
}

/* ---- the two value paths ---- */
.cc-paths {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line-dark);
}
.cc-paths-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--white);
}
.cc-paths-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(16px, 2vw, 22px);
}
.cc-path { min-width: 0; }
.cc-path + .cc-path {
  border-left: 1px solid var(--line-dark);
  padding-left: clamp(18px, 2.4vw, 32px);
}
.cc-path-tag {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #e2e7e0;
}
.cc-path p:last-child {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #d7dcd4;   /* 5.30:1 on olive-800 */
}
.cc-paths-note {
  margin-top: clamp(18px, 2.2vw, 24px);
  padding-left: 12px;
  border-left: 2px solid var(--silver);
  font-size: 0.84rem;
  line-height: 1.6;
  color: #d7dcd4;
  max-width: 84ch;
}

/* ---- stakeholder ledger rows ---- */
.cc-stake { border-top: 1px solid rgba(35, 38, 31, 0.3); }
.cc-stake-row {
  display: grid;
  grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
  gap: 8px clamp(22px, 3vw, 48px);
  padding: clamp(18px, 2.2vw, 24px) 0;
  border-bottom: 1px solid var(--line-light);
}
.cc-stake-who {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cc-stake-what {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 68ch;
}

/* ---- integrity 2x2 ---- */
.cc-integrity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
  max-width: 1020px;
}
.cc-int-item {
  min-width: 0;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--line-light);
}
.cc-int-item h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cc-int-item p {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.cc-int-item a { text-decoration: underline; }
.cc-status {
  margin-top: clamp(22px, 2.6vw, 30px);
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(35, 38, 31, 0.68);
  max-width: 88ch;
}
.cc-status a { text-decoration: underline; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .cc-premise { grid-template-columns: 1fr; gap: 0; }
  .cc-premise-item { padding: 18px 0; border-bottom: 1px solid var(--line-light); }
  .cc-premise-item + .cc-premise-item { border-left: 0; padding-left: 0; }
  .cc-premise-item:last-child { border-bottom: 0; }
  .cc-life-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(16px, 4vw, 28px); }
  /* the six-across hairline ladder collapses to 2-up; dividers only between
     the two columns, via even items */
  .cc-life-rail li + li { border-left: 0; padding-left: 0; }
  .cc-life-rail li:nth-child(even) {
    border-left: 1px solid var(--line-light);
    padding-left: clamp(16px, 4vw, 28px);
  }
  .cc-flow { grid-template-columns: 1fr; }
  .cc-flow-link {
    width: 1px;
    height: clamp(18px, 3vw, 26px);
    justify-self: center;
    align-self: auto;
    background: linear-gradient(to bottom, rgba(226, 231, 224, 0.55), rgba(226, 231, 224, 0.2));
  }
  .cc-paths-grid { grid-template-columns: 1fr; gap: 18px; }
  .cc-path + .cc-path {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-dark);
    padding-top: 18px;
  }
  .cc-stake-row { grid-template-columns: 1fr; gap: 6px; }
  .cc-integrity { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 480px) {
  .cc-life-rail { grid-template-columns: 1fr; }
  .cc-life-rail li:nth-child(even) { border-left: 0; padding-left: 0; }
  .cc-life-rail li + li { border-top: 1px solid var(--line-light); padding-top: 14px; }
}

/* ---------- Carbon program bridge (Impact) + cc-page additions ---------- */
.cpb {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 40px);
}
.cpb-chip { min-width: 0; }
.cpb-chip + .cpb-chip {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(20px, 2.8vw, 40px);
}
.cpb-num {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.7vw, 1.34rem);
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cpb-sub {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.cpb-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 3.4vw, 40px);
}
.cpb-note {
  margin-top: clamp(16px, 2vw, 22px);
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(35, 38, 31, 0.68);
}
@media (max-width: 900px) {
  .cpb { grid-template-columns: 1fr; gap: 0; }
  .cpb-chip { padding: 16px 0; border-bottom: 1px solid var(--line-light); }
  .cpb-chip + .cpb-chip { border-left: 0; padding-left: 0; }
  .cpb-chip:last-child { border-bottom: 0; }
}

/* cc-page: credit sizing calculator (on dark) */
.cc-calc {
  margin-top: clamp(26px, 3.4vw, 40px);
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--olive-700);
}
.cc-calc-head {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--white);
}
.cc-calc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 16px;
}
.cc-calc-grid .field label { color: #dde1da; }
/* the section is on-dark, so inputs inherit --white — force ink on the white
   field surfaces or the values are invisible */
.cc-calc-grid .field input,
.cc-calc-grid .field select { color: var(--ink); }
.cc-calc-out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-dark);
}
.cc-calc-out .num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--bar-accent);
}
.cc-calc-out p {
  margin-top: 5px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #dde1da;
}
.cc-calc-note {
  margin-top: 14px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #d7dcd4;
}
.cc-calc-note a { text-decoration: underline; }
@media (max-width: 700px) {
  .cc-calc-grid { grid-template-columns: 1fr; }
  .cc-calc-out { grid-template-columns: 1fr; }
}
.cc-dd {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.cc-dd-head {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--white);
}
.cc-dd-sub {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #d7dcd4;
}
.cc-dd-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cc-dd-list li {
  padding: 13px 0 13px 24px;
  position: relative;
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #dde1da;
}
.cc-dd-list li:last-child { border-bottom: 0; }
.cc-dd-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.35em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--silver-light);
}
@media (max-width: 900px) {
  .cc-dd { grid-template-columns: 1fr; gap: 18px; }
}

/* badges */
.on-dark .badge { background: var(--olive-700); border-color: var(--line-dark); color: var(--mist); }

/* ---------- Accordion ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.25s;
}
.faq details[open] { border-color: rgba(110, 120, 100, 0.5); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; transition: transform 0.3s var(--ease-out); color: var(--sage-text); }
.faq details[open] summary .chev { transform: rotate(45deg); }
.faq .faq-body { padding: 0 24px 22px; color: var(--ink-2); font-size: 0.99rem; max-width: 75ch; }
.faq .faq-body p + p { margin-top: 10px; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 85% 20%, rgba(206, 212, 218, 0.12), transparent 60%),
    linear-gradient(180deg, var(--olive-900), var(--olive-950));
  color: var(--white);
  text-align: center;
}
.cta-band .container { position: relative; z-index: 1; max-width: 820px; }
.cta-band .lede { margin-inline: auto; margin-top: 20px; }
.cta-band .hero-ctas { justify-content: center; margin-top: 36px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--ink-2);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-light);
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* ---------- Styled select (JS-enhanced; native remains the fallback) ----------
   The native control keeps the value and submits; .nsel is the visible UI, so
   the popup list can carry the site's chrome instead of the OS widget. */
.nsel { position: relative; }
.nsel-native {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.nsel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-light);
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.nsel-btn:hover { border-color: rgba(35, 38, 31, 0.24); }
.nsel-btn:focus-visible,
.nsel-btn[aria-expanded="true"] {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(110, 120, 100, 0.18);
}
.nsel-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsel-chev {
  flex: none;
  color: var(--ink-3);
  transition: transform 0.22s var(--ease-out);
}
.nsel-btn[aria-expanded="true"] .nsel-chev { transform: rotate(180deg); }
.nsel-list {
  position: absolute;
  z-index: 40;
  left: 0; right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line-light);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow-lift);
  animation: nselIn 0.14s var(--ease-out) both;
}
.nsel.is-up .nsel-list { top: auto; bottom: calc(100% + 6px); }
@keyframes nselIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nsel-opt {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.97rem;
  line-height: 1.35;
  color: var(--ink-2);
  cursor: pointer;
}
.nsel-opt.is-active { background: rgba(110, 120, 100, 0.1); color: var(--ink); }
.nsel-opt.is-selected {
  color: var(--ink);
  font-weight: 650;
  background: rgba(110, 120, 100, 0.07);
}
.nsel-opt.is-selected.is-active { background: rgba(110, 120, 100, 0.15); }
/* on-dark panels: the button surface stays white, so keep ink type on it */
.cc-calc-grid .nsel-btn { color: var(--ink); }

.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(110, 120, 100, 0.18);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-status { margin-top: 16px; font-weight: 600; font-size: 0.95rem; display: none; }
.form-status.ok { display: block; color: var(--sage-text); }
.form-status.err { display: block; color: #9c5136; }

/* office cards */

/* ---------- Footer ---------- */
.footer {
  background: var(--olive-950);
  color: var(--mist);
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 56px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h5 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-2);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.footer-col a { color: var(--mist); font-size: 0.95rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--silver-light); }
.footer-col address { font-style: normal; font-size: 0.95rem; line-height: 1.7; }
.footer-brand p { margin-top: 16px; max-width: 34ch; font-size: 0.95rem; color: var(--mist-2); }
.footer-legal {
  border-top: 1px solid var(--line-dark);
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--mist-2);
}
.footer-legal ul { display: flex; gap: 22px; list-style: none; padding: 0; }
.footer-legal a:hover { color: var(--silver-light); }
.footer-watermark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.2rem, 14vw, 12.5rem);
  letter-spacing: -0.02em;
  line-height: 0.86;
  text-align: center;
  color: rgba(251, 251, 249, 0.05);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- Reveal animations ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* page-load hero entrance */
.hero [data-hero], .page-hero [data-hero] {
  opacity: 0;
  transform: translateY(30px);
  animation: heroIn 0.9s var(--ease-out) forwards;
  animation-delay: var(--hero-delay, 0s);
}
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* subpage hero (shorter) */
.page-hero {
  position: relative;
  padding: 170px 0 clamp(56px, 8vw, 96px);
  background:
    radial-gradient(900px 420px at 80% -20%, rgba(206, 212, 218, 0.12), transparent 60%),
    linear-gradient(180deg, var(--sage-deep), var(--olive-900));
  color: var(--white);
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--silver-light); margin-bottom: 18px; }
.page-hero .lede { margin-top: 20px; }

/* ---------- Legal prose ---------- */
.legal { max-width: 780px; }
.legal .updated {
  font-size: 0.88rem;
  color: var(--ink-3);
  margin-bottom: 36px;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { color: var(--ink-2); margin-bottom: 16px; text-wrap: pretty; }
.legal ul { margin: 0 0 16px; padding-left: 24px; color: var(--ink-2); }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--sage-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal .notice {
  margin-top: 48px;
  padding: 18px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line-light);
  background: var(--paper-2);
  font-size: 0.9rem;
  color: var(--ink-3);
}

/* ---------- Utilities ---------- */
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 32px; } .mt-4 { margin-top: 48px; } .mt-5 { margin-top: 72px; }
.center { text-align: center; }
.center .lede, .center .eyebrow { margin-inline: auto; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: -60px; left: 16px;
  z-index: 200;
  background: var(--white);
  color: var(--olive-950);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 10px;
  transition: top 0.25s;
}
.skip-link:focus { top: 14px; }

/* ---------- Hero media (photo layers) ---------- */
/* Home: full-bleed pouring-concrete photo, duotoned into the brand field */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% 38%;
  filter: grayscale(1) brightness(0.88) contrast(1.05);
}
/* tint the photo with the brand hue */
.hero-media::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--sage-deep);
  mix-blend-mode: color;
}
/* soft scrim: keeps the text legible, lets the photo breathe on the right */

@media (max-width: 900px) {
  .hero-media img { object-position: 62% 40%; }
  /* Narrow screens run the copy full width, so the horizontal ramp stops
     earning its place and both heroes fall back to a single vertical scrim -
     in the same palette as the shared definition above, so the masthead sits
     on the same tone on every page at every width. */
  .hero-media::after,
  .page-hero-media::after {
    background:
      linear-gradient(180deg, rgba(78, 86, 70, 0.9) 0%, rgba(70, 78, 63, 0.78) 55%, rgba(62, 66, 57, 0.9) 100%);
  }
}

/* Subpage photo hero (About) */
.page-hero-media {
  position: absolute; inset: 0;
  z-index: 0;
}
.page-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 30%;
  filter: grayscale(1) brightness(0.82) contrast(1.06);
}
.page-hero-media::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--sage-deep);
  mix-blend-mode: color;
}
/* ---------- Hero scrim ----------
   One definition for the landing hero and every interior page header. They had
   drifted: the home scrim used a lighter olive (rgb 85,93,77 against 78,86,70),
   opened to 0.12 alpha at the right edge against 0.38, and went fully
   transparent through the middle band. That read lighter than the rest of the
   site and cost the white logo contrast in the top-left. */
.hero-media::after,
.page-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(78, 86, 70, 0.94) 0%, rgba(78, 86, 70, 0.72) 48%, rgba(78, 86, 70, 0.38) 100%),
    linear-gradient(180deg, rgba(62, 66, 57, 0.45) 0%, rgba(62, 66, 57, 0.1) 40%, rgba(62, 66, 57, 0.82) 100%);
}

/* Impact hero: the frame's interest sits right of centre and low, so it needs
   its own crop rather than the shared 72%/30% used by the other page heroes. */
.page-hero-media.is-impact img {
  object-position: 62% 62%;
  /* bright overcast source: less darkening, a little more contrast so the
     silos and stockpiles keep separation under the sage duotone */
  filter: grayscale(1) brightness(0.92) contrast(1.16);
}

/* Technology + About heroes: bright wide sources whose subject sits centre/low,
   so each takes its own crop instead of the shared 72%/30%. */
.page-hero-media.is-technology img { object-position: 56% 58%; }
.page-hero-media.is-about img { object-position: 56% 52%; }

/* photo variants: night/dark photos need no extra darkening */
.page-hero-media.bright img { filter: grayscale(1) brightness(1.08) contrast(1.04); }

/* ---------- Document register (specifiers page) ----------
   Replaces two .card grids. A card is a container for a snapshot of an object; these
   are homogeneous rows that share one action, which is the case NN/g and USWDS both
   name as the wrong job for a card. Rows scan faster, cannot wrap their action, and
   drop roughly 470px on a 375px screen.

   The numerals are register identifiers, exactly as on .creed — they are NOT a
   sequence. No ordering is implied and the rows may be actioned in any order, so no
   "step"/"stage" language appears anywhere in this component.

   Contrast (computed, not eyeballed): --ink-3 is 4.07:1 on --paper-2 and 4.43:1 on
   --paper, so it FAILS 4.5:1 on both section grounds and is confined to the inside of
   the white .reg-panel, where it measures 4.79:1. Row copy on the section ground uses
   --ink-2 (7.62:1). --sage-text on --paper-2 is 6.61:1; --white on --sage-text is
   7.50:1. */

.reg-panel {
  background: #ffffff;
  border: 1px solid var(--line-light);
  border-radius: 10px;
  padding: clamp(20px, 2.6vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(18px, 3vw, 40px);
  margin-bottom: 34px;
}
.reg-doc {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2vw, 1.32rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.reg-meta {
  margin: 0 0 18px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);              /* 4.79:1 on the white panel — passes */
  font-variant-numeric: tabular-nums;
}
.reg-acts { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.reg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;                 /* enhanced target, up from the old 25px link */
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--sage-text);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 650;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.reg-btn:hover { background: var(--ink); }
.reg-btn.ghost {
  background: transparent;
  border-color: var(--line-light);
  color: var(--sage-text);
}
.reg-btn.ghost:hover { border-color: var(--sage-text); background: rgba(110, 120, 100, 0.06); }
.reg-toc { font-size: 0.82rem; line-height: 1.72; color: var(--ink-2); }
.reg-toc b {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);              /* inside the white panel */
}

/* --- the index itself --- */
.reg-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-light);
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.reg-head span:last-child { font-weight: 500; letter-spacing: 0.1em; }
.reg { list-style: none; margin: 0; padding: 0; }
.reg-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.05fr) minmax(0, 1.35fr) auto;
  gap: 6px 18px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-light);
}
.reg-idx {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sage-text);
  font-variant-numeric: tabular-nums;
}
.reg-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.reg-desc { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }
.reg-go {
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--line-light);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--sage-text);
  white-space: nowrap;              /* the action can never wrap, at any width */
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.reg-go:hover { border-color: var(--sage-text); background: rgba(110, 120, 100, 0.06); }
.reg-go svg { flex: none; transition: transform 0.2s var(--ease-out); }
.reg-go:hover svg { transform: translateX(3px); }
.reg-foot { margin: 16px 0 0; font-size: 0.86rem; color: var(--ink-2); }

/* --- standards variant: no numeral (a standard is named by its own designation)
       and no action (nothing to request) --- */
.reg--std .reg-item { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr); }

/* --- schedule variant: value set against the right-hand rule, as on a drawing
       schedule. No index (a region is named by itself) and no action. --- */
.reg--sched .reg-item { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.reg--sched .reg-desc { text-align: right; }
.reg-hq { font-weight: 650; color: var(--sage-text); white-space: nowrap; }
/* Scoped to its own class: .reg-foot on the specifiers page wraps an inline link
   inside a running sentence, which must not become a flex item. */
.reg-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sage-text);
  font-weight: 650;
}
.reg-more svg { flex: none; transition: transform 0.2s var(--ease-out); }
.reg-more:hover svg { transform: translateX(3px); }

@media (max-width: 860px) {
  .reg-panel { grid-template-columns: minmax(0, 1fr); }
  /* The action stays on the first line beside the name instead of dropping to a row of
     its own: measured at 48px per row, 240px across the five-row index. The description
     then runs full width beneath both. */
  .reg-item {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 12px;
    padding: 14px 0;
  }
  .reg-idx { grid-column: 1; grid-row: 1; }
  .reg-name { grid-column: 2; grid-row: 1; align-self: center; }
  .reg-go {
    grid-column: 3; grid-row: 1;
    justify-self: end; align-self: start;
    margin: 0; padding: 11px 14px;
  }
  .reg-desc { grid-column: 2 / -1; grid-row: 2; }
  /* The two document actions stack on a phone by design. They fall 6px short of one
     line at 375px, and tightening them to fit would cramp the only ungated asset on
     the page for a 3% saving. Two full-size targets is the better trade. */
  .reg--std .reg-item { grid-template-columns: minmax(0, 1fr); }
  .reg--std .reg-name { grid-column: 1; grid-row: 1; }
  .reg--std .reg-desc { grid-column: 1; grid-row: 2; }
  /* The schedule keeps BOTH columns on a phone — region and location fit on one
     line down to 320px. Without these three rules it inherits the index-column
     grid above and renders stacked and indented, which looks right in the source
     and wrong in the browser. */
  .reg--sched .reg-item { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  .reg--sched .reg-name { grid-column: 1; grid-row: 1; align-self: baseline; }
  .reg--sched .reg-desc { grid-column: 2; grid-row: 1; text-align: right; }
}

/* ---------- Contact column (contact page) ----------
   Was two stacked .card boxes (22px radius, shadow, hover lift) beside the form.
   Same reasoning as the About offices block: a card is a container for a snapshot
   of an object, and this is one continuous run of contact detail. Hairlines carry
   the structure; the office rows reuse .reg--sched so the two pages match.
   Ground is --paper: --ink-3 is 4.43:1 there and fails, so body copy is --ink-2
   (7.9:1) and accents are --sage-text (7.18:1). */
.cinfo { display: grid; gap: 30px; }
.cinfo-city {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.26rem, 2.4vw, 1.52rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cinfo-addr {
  margin: 0;
  font-style: normal;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-2);
}
.cinfo-links { list-style: none; margin: 14px 0 0; padding: 0; }
.cinfo-links a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.2s var(--ease-out);
}
.cinfo-links a:hover { color: var(--sage-text); }
.cinfo-links svg { flex: none; color: var(--sage-text); }
.cinfo-offices { padding-top: 26px; border-top: 1px solid var(--line-light); }

/* ---------- Impact ledger (impact page, circular economy) ----------
   Five outcomes as records on a shared grid: index, outcome, measure. The
   Technology page owns the circular diagram; this section reports what that
   model produces, so it is a schedule rather than a graphic. Metrics share one
   vertical axis so the column reads as a measure register.
   Ground is --paper: --ink-3 is 4.43:1 there and fails, so every muted tone
   here is --ink-2 (7.9:1) or --sage-text (7.18:1). */
.impact-ledger {
  list-style: none;
  margin: clamp(26px, 3.2vw, 40px) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line-light);
}
.il-head,
.il-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 224px;
  gap: 0 clamp(22px, 3vw, 46px);
  align-items: start;
  border-top: 1px solid var(--line-light);
}
.il-head {
  padding: 0 0 9px;
  border-top: 0;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.il-row { padding: clamp(22px, 2.6vw, 32px) 0; }
.il-idx {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sage-text);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}
.il-name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.il-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}
/* the measure column: values share a left axis, label sits directly beneath */
.il-metric { min-width: 0; }
.il-val {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.il-label {
  display: block;
  margin-top: 9px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-2);
}
/* the evidence classification, as type rather than a chip */
.il-tag {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line-light);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.il-note {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 90ch;
}
@media (max-width: 900px) {
  .il-head { display: none; }
  .il-row {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 0 14px;
    padding: 22px 0;
  }
  .il-idx { grid-column: 1; grid-row: 1; padding-top: 0.3em; }
  .il-main { grid-column: 2; grid-row: 1; }
  .il-metric { grid-column: 2; grid-row: 2; margin-top: 16px; }
  .il-val { font-size: 1.85rem; }
}

/* ---------- Verification marks (impact page) ----------
   Was five 999px pills on a white fill. These are classifications, not buttons,
   so they read as one register divided by hairlines. Vertical rules only while
   the row fits on one line; below that the dividers turn horizontal, because a
   wrapped row leaves a stray rule at the start of the second line.
   Ground is --paper-2: --ink-3 is 4.07:1 there and fails, so the marks are
   --ink-2 (7.62:1). */
.vmarks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 940px;
  margin: clamp(26px, 3.2vw, 40px) auto 0;
  padding: clamp(16px, 2vw, 24px) 0 0;
  border-top: 1px solid var(--line-light);
}
.vmarks li {
  padding: 3px clamp(14px, 2vw, 26px);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--ink-2);
}
.vmarks li + li { border-left: 1px solid var(--line-light); }
@media (max-width: 860px) {
  .vmarks {
    flex-direction: column;
    align-items: stretch;
    max-width: 420px;
    text-align: center;
  }
  .vmarks li { padding: 11px 0; }
  .vmarks li + li { border-left: 0; border-top: 1px solid var(--line-light); }
}

/* ---------- Mobile tap targets ----------
   Measured at 375px: every footer link rendered 16-19px tall and the standalone
   action links 19-23px, all under the 24px minimum and far under a comfortable
   44px. These are inline-flex so a min-height lifts the hit area without
   changing the text or the layout around it. Inline links inside running prose
   are deliberately excluded - they are sentences, not controls. */
@media (max-width: 700px) {
  .footer-col ul { gap: 0; }
  .footer-col a,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-legal ul { gap: 0 22px; }
  .link-arrow,
  .ext-link,
  .reg-more,
  .sch-foot a { min-height: 44px; }
  /* these two carry no shared class: the values register's proof links and the
     technical-data breadcrumb */
  .creed-proof a,
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero [data-hero], .page-hero [data-hero] { opacity: 1; transform: none; animation: none; }
  .marquee-track { animation: none; }
  .chart-fill { transition: none; }
  .chart polyline.draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .chart .pt { opacity: 1 !important; transition: none !important; }
  .pmx-rail { transform: none !important; transition: none !important; }
  .pmx-node, .pmx-merge, .pmx-end { opacity: 1 !important; transition: none !important; }
  .br-line { transform: none !important; transition: none !important; }
  .sc-line { transform: none !important; transition: none !important; }
  .brief-row .br-new { opacity: 1 !important; transform: none !important; transition: none !important; }
}