/* ==========================================================================
   PV Regen — design system
   --------------------------------------------------------------------------
   Two things drive the visual language.

   First, the material palette. A recycler's identity should come from what it
   recovers, so glass, aluminium, silicon, polymer, copper and silver each get
   a fixed hue used consistently across the layer diagram, the Sankey ribbon,
   the matrix table and the offtake list. That consistency is what makes the
   data feel like one system rather than three charts.

   Second, contrast discipline. The site is sold on compliance, and the
   European Accessibility Act took effect in June 2025, so every foreground and
   background pair here is chosen to clear WCAG 2.1 AA. Note that the emerald
   accent is only ever a surface or a mark on light backgrounds — as text it
   would fail against alabaster, so --accent-ink exists for that job.
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */

:root {
  /* Ground */
  --ink:          #0F172A;
  --ink-2:        #1E293B;
  --ink-3:        #334155;
  --surface:      #F8FAFC;
  --surface-2:    #FFFFFF;
  --surface-3:    #EEF2F7;

  /* Type */
  --text:         #0F172A;
  --text-muted:   #475569;
  /* Darker than the usual slate-500: at #64748B this clears AA on white but
     lands at 4.23:1 on the tinted band, and it is used for table headers and
     field labels there. */
  --text-faint:   #5B6779;
  --text-invert:  #F8FAFC;
  --text-invert-muted: #94A3B8;

  /* Accent */
  --accent:        #10B981;  /* surfaces, marks, fills */
  --accent-ink:    #047857;  /* accent as TEXT on light ground */
  --accent-bright: #34D399;  /* accent as text on dark ground */
  --accent-2:      #F59E0B;

  /* Material identity */
  --m-glass:     #7DD3FC;
  --m-aluminium: #94A3B8;
  --m-silicon:   #A78BFA;
  --m-polymer:   #FB923C;
  --m-copper:    #C2703F;
  --m-silver:    #CBD5E1;
  --m-residual:  #64748B;

  /* Lines */
  --line:        #E2E8F0;
  --line-strong: #CBD5E1;
  --line-invert: rgba(248, 250, 252, 0.14);

  /* Spacing — 8px base */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* Type scale */
  --fs-xs:  0.75rem;
  --fs-sm:  0.8125rem;
  --fs-base:0.9375rem;
  --fs-md:  1.0625rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.5rem;

  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius:    4px;
  --radius-lg: 8px;

  --shell: 1200px;
  --measure: 68ch;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:    0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.14);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;
}

/* Traditional Chinese needs a different body face, and no display serif —
   pairing a high-contrast Latin serif with a CJK sans looked mismatched at
   every size, which is why v3's Playfair/Noto Serif combination is gone. */
[data-locale='zh'] {
  --font-display: 'Space Grotesk', 'Noto Sans TC', system-ui, sans-serif;
  --font-body: 'Noto Sans TC', 'Inter', system-ui, 'Microsoft JhengHei', sans-serif;
  --measure: 34em;
}

/* ------------------------------------------------------------------- Reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

[data-locale='zh'] h1,
[data-locale='zh'] h2,
[data-locale='zh'] h3 { letter-spacing: 0; line-height: 1.35; }

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

/* ------------------------------------------------------------ Focus & a11y */

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

.section--dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible { outline-color: var(--accent-bright); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100%; z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--accent); color: var(--ink);
  font-weight: 600; border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

main:focus { outline: none; }

@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;
  }
}

/* ----------------------------------------------------------------- Layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.shell--narrow { max-width: 760px; }

.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-7); }

.section--light { background: var(--surface); color: var(--text); }
.section--tint  { background: var(--surface-3); color: var(--text); }
.section--dark  { background: var(--ink); color: var(--text-invert); }

.section--dark .sec-head__intro,
.section--dark .prose,
.section--dark .card__body { color: var(--text-invert-muted); }

.section__link { margin-top: var(--s-6); text-align: center; }

/* Text + supporting visual. Collapses to a single column below 60rem. */
.split {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}
.split__text { min-width: 0; }
.split__aside { min-width: 0; }

@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-9); }
  .split--wide-aside { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  /* order: swaps which track the aside lands in, so the wide track moves too */
  .split--reverse.split--wide-aside { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .split--reverse .split__text { order: 2; }
  .split--reverse .split__aside { order: 1; }
}

/* Diagrams carry labels at a fixed type size, so scaling one down to fit a
   narrow column makes it unreadable rather than merely small. Below the width
   where the text still holds up, they scroll inside their own container — the
   same treatment the wide tables get, and never the page body. */
.chart-scroll { --chart-min: 600px; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.chart-scroll > svg { width: 100%; min-width: var(--chart-min); }

/* The layer diagram carries six short labels rather than the Sankey's nine, so
   it stays legible in a narrower box. The floor sits below the narrowest column
   the matrix grid produces, so the two-column desktop layout never scrolls; the
   ceiling stops it ballooning to full width — and 24px labels — when the grid
   collapses to one column on tablets. Phones still scroll rather than shrinking
   the labels away. */
.chart-scroll--layers { --chart-min: 440px; max-width: 560px; }

/* ------------------------------------------------------------ Typography */

.eyebrow {
  margin-bottom: var(--s-3);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* --accent-ink is tuned for light grounds and drops to ~3.3:1 on ink, so every
   dark context has to switch to the brighter tint. */
.eyebrow--invert,
.section--dark .eyebrow,
.page-hero .eyebrow,
.hero .eyebrow,
.cta-band .eyebrow { color: var(--accent-bright); }

.sec-head { margin-bottom: var(--s-7); max-width: var(--measure); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head__title { font-size: var(--fs-2xl); }
.sec-head__intro {
  margin-top: var(--s-4);
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.prose { max-width: var(--measure); color: var(--text-muted); font-size: var(--fs-md); }
.prose--lead { font-size: var(--fs-lg); line-height: 1.6; }
.prose--after-table { margin-top: var(--s-6); font-size: var(--fs-sm); }
.prose + .btn { margin-top: var(--s-6); }

.footnote {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: var(--fs-sm);
  max-width: var(--measure);
}

.note {
  margin-top: var(--s-5);
  color: var(--text-faint);
  font-size: var(--fs-sm);
  max-width: var(--measure);
}
.section--dark .note { color: var(--text-invert-muted); }

/* --------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn + .btn { margin-left: var(--s-3); }
.btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); }

.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--accent-bright); }
.btn--primary:active { transform: translateY(1px); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

.section--dark .btn--ghost,
.hero .btn--ghost,
.cta-band .btn--ghost { border-color: var(--line-invert); color: var(--text-invert); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }

.icon-arrow { transition: transform var(--dur) var(--ease); flex: none; }
.btn:hover .icon-arrow, .text-link:hover .icon-arrow { transform: translateX(3px); }

.text-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.section--dark .text-link { color: var(--accent-bright); }

/* ---------------------------------------------------------------- Header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  color: var(--text-invert);
  border-bottom: 1px solid var(--line-invert);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--text-invert); }
/* The company logo is a transparent PNG at 1.3675:1, so height drives the size
   and width follows. It is a brand asset, not an icon — no currentColor. */
.brand__mark { height: 34px; width: auto; flex: none; }
.brand__mark--sm { height: 28px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.brand__tag {
  color: var(--text-invert-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-6); }
.nav__list { display: flex; align-items: center; gap: var(--s-1); }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  color: var(--text-invert-muted);
  font-size: var(--fs-sm); font-weight: 500;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  cursor: pointer;
}
.nav__link:hover { color: var(--text-invert); background: rgba(248, 250, 252, 0.07); }
.nav__link.is-current { color: var(--accent-bright); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }
.lang {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-invert);
  border-radius: var(--radius);
  color: var(--text-invert-muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
}
.lang:hover { color: var(--text-invert); border-color: var(--accent-bright); }

/* Dropdown built on <details> so it works with a keyboard, and without JS. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__chevron { transition: transform var(--dur) var(--ease); opacity: 0.7; }
.menu[open] .menu__chevron { transform: rotate(180deg); }

.menu__list {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 20;
  min-width: 310px;
  padding: var(--s-2);
  background: var(--ink-2);
  border: 1px solid var(--line-invert);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.menu__link {
  display: block; padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease);
}
.menu__link:hover { background: rgba(248, 250, 252, 0.07); }
.menu__label { display: block; font-weight: 600; font-size: var(--fs-sm); }
.menu__link.is-current .menu__label { color: var(--accent-bright); }
.menu__blurb { display: block; color: var(--text-invert-muted); font-size: var(--fs-xs); margin-top: 2px; }

.nav-toggle {
  display: none; margin-left: auto;
  padding: var(--s-2); background: none;
  border: 1px solid var(--line-invert); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 20px; }
.nav-toggle__bars i {
  display: block; height: 2px; margin: 4px 0;
  background: var(--text-invert);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 63.99rem) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--s-4);
    padding: var(--s-5);
    background: var(--ink);
    border-bottom: 1px solid var(--line-invert);
    box-shadow: var(--shadow-lg);
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--s-1); }
  .nav__link { padding: var(--s-3); font-size: var(--fs-md); }
  .menu__list { position: static; min-width: 0; box-shadow: none; margin-top: var(--s-2); }
  .nav__actions { justify-content: space-between; }
}

/* ------------------------------------------------------------------ Hero */

.hero {
  background: var(--ink);
  color: var(--text-invert);
  padding-block: var(--s-9) var(--s-8);
  overflow: hidden;
}
.hero__inner { display: grid; gap: var(--s-8); align-items: center; }
.hero__title {
  font-size: clamp(2rem, 5.2vw, var(--fs-4xl));
  letter-spacing: -0.03em;
  text-wrap: balance;
}
[data-locale='zh'] .hero__title { letter-spacing: -0.01em; }
.hero__body {
  margin-top: var(--s-5);
  max-width: 56ch;
  color: var(--text-invert-muted);
  font-size: var(--fs-md);
}
[data-locale='zh'] .hero__body { max-width: 30em; }
.hero__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__actions .btn + .btn { margin-left: 0; }

.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-invert);
}

@media (min-width: 60rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); }
}

/* Page hero — every page except home */
.page-hero {
  background: var(--ink);
  color: var(--text-invert);
  padding-block: var(--s-8);
}
.page-hero__inner { display: grid; gap: var(--s-7); align-items: center; }
.page-hero__title { font-size: clamp(1.85rem, 4vw, var(--fs-3xl)); text-wrap: balance; }
.page-hero__body {
  margin-top: var(--s-5);
  max-width: var(--measure);
  color: var(--text-invert-muted);
  font-size: var(--fs-md);
}
.page-hero__updated { margin-top: var(--s-4); color: var(--text-invert-muted); font-size: var(--fs-sm); }
.page-hero--slim { padding-block: var(--s-7); }
.page-hero__media img { border-radius: var(--radius-lg); border: 1px solid var(--line-invert); }

@media (min-width: 60rem) {
  .page-hero--split .page-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- Stats */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.stats__item {
  padding-left: var(--s-4);
  border-left: 2px solid var(--accent);
}
.stats__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
}
.stats__label {
  display: block; margin-top: var(--s-1);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.hero .stats__label,
.section--dark .stats__label { color: var(--text-invert-muted); }

/* ------------------------------------------------------- Route cards */

.routes {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.route__link {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--s-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.route__link:hover {
  border-top-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.route__icon { display: block; margin-bottom: var(--s-4); color: var(--accent-ink); }
.route__title { font-size: var(--fs-lg); }
.route__body { margin-top: var(--s-3); color: var(--text-muted); flex: 1; }
.route__cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-5);
  color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
}
.route__link:hover .icon-arrow { transform: translateX(3px); }

/* ----------------------------------------------------------------- Cards */

.cards {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card {
  padding: var(--s-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.section--dark .card { background: var(--ink-2); border-color: var(--line-invert); }
.cards--stack { grid-template-columns: 1fr; gap: var(--s-5); }
.cards--plain .card { background: none; border: 0; border-top: 2px solid var(--line-strong); border-radius: 0; padding: var(--s-5) 0 0; }
.card__icon { display: block; margin-bottom: var(--s-4); color: var(--accent-ink); }
.section--dark .card__icon { color: var(--accent-bright); }
.card__title { font-size: var(--fs-md); }
.card__body { margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-base); }

/* ----------------------------------------------------------------- Steps */

.steps {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: step;
}
.steps__item { position: relative; padding-top: var(--s-6); border-top: 2px solid var(--line-strong); }
.section--dark .steps__item { border-top-color: var(--line-invert); }
.steps__n {
  position: absolute; top: calc(-1 * var(--s-4)); left: 0;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--accent); color: var(--ink);
  border-radius: 50%;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
}
.steps__title { margin-top: var(--s-2); font-size: var(--fs-md); }
.steps__body { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--fs-base); }
.section--dark .steps__body { color: var(--text-invert-muted); }

/* -------------------------------------------------------- Process flow */

.flow {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.flow__media { position: relative; border-radius: var(--radius); overflow: hidden; }
.flow__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.flow__n {
  position: absolute; left: var(--s-3); top: var(--s-3);
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--ink); color: var(--accent-bright);
  border-radius: 50%;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
}
.flow__title { margin-top: var(--s-4); font-size: var(--fs-base); }
.flow__body { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- Tables */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { font-size: var(--fs-sm); }
.table th, .table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.table thead th {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
.table tbody th { font-weight: 600; white-space: nowrap; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tbody tr:hover, .table tbody tr.is-active { background: var(--surface-3); }

.table tfoot th, .table tfoot td {
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  font-family: var(--font-display);
  font-weight: 700;
}

.table .is-ours { background: rgba(16, 185, 129, 0.07); }
.table thead .is-ours { color: var(--accent-ink); }

/* Four columns in a narrow aside, and the headers name whole processing routes
   rather than single words. Letting them wrap keeps the table inside its column
   instead of putting a scrollbar under a five-row comparison. */
.table--compare thead th { white-space: normal; min-width: 6.5rem; }
.table--compare tbody th { color: var(--text-muted); font-weight: 500; white-space: normal; }
.table--compare td { white-space: normal; }
.table--models td { font-size: var(--fs-sm); }
.table--models tbody th { white-space: normal; min-width: 12rem; font-family: var(--font-display); }

.section--dark .table th, .section--dark .table td { border-bottom-color: var(--line-invert); }
.section--dark .table thead th { color: var(--text-invert-muted); }
.section--dark .table tbody tr:hover { background: rgba(248, 250, 252, 0.05); }

.swatch {
  display: inline-block; width: 10px; height: 10px;
  margin-right: var(--s-2);
  background: var(--swatch);
  border-radius: 2px;
  vertical-align: baseline;
}

.is-residual th, .is-residual td { color: var(--text-faint); font-style: italic; }

/* ------------------------------------------------------- Matrix + layers */

.matrix { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (min-width: 64rem) {
  .matrix { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); }
}
.matrix__figure { margin: 0; min-width: 0; max-width: 100%; }
/* Without min-width:0 the auto track sizes to the table's min-content, which the
   nowrap headers push past the viewport. */
.matrix__table { min-width: 0; }
.matrix__hint { margin-top: var(--s-3); color: var(--text-faint); font-size: var(--fs-sm); }

.layers { width: 100%; }
.layers__item { cursor: default; transition: opacity var(--dur) var(--ease); }
.layers__item polygon { transition: transform var(--dur) var(--ease), fill-opacity var(--dur) var(--ease); }
.layers.is-hovering .layers__item:not(.is-active) { opacity: 0.35; }
.layers__item.is-active polygon { fill-opacity: 1; }
.layers__lead { stroke: var(--line-strong); stroke-width: 1; }
.layers__name {
  fill: var(--text); font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
}
.layers__weight { fill: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.layers__caption { fill: var(--text-faint); font-size: 11px; }

/* ---------------------------------------------------------------- Sankey */

.balance { max-width: 860px; margin-inline: auto; }
.sankey { width: 100%; height: auto; }
.sankey__input { fill: var(--accent); }
.sankey__flow { fill-opacity: 0.3; transition: fill-opacity var(--dur) var(--ease); }
.sankey__item.is-residual .sankey__flow { fill-opacity: 0.16; }
.sankey__item:hover .sankey__flow,
.sankey__item:focus-visible .sankey__flow { fill-opacity: 0.72; }
.sankey__name {
  fill: var(--text); font-family: var(--font-display);
  font-size: 13.5px; font-weight: 600;
}
.sankey__value { fill: var(--text-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.section--dark .sankey__name { fill: var(--text-invert); }
.section--dark .sankey__value { fill: var(--text-invert-muted); }

/* ------------------------------------------------------------------- Map */

.map-wrap { max-width: 900px; margin-inline: auto; }
.map { width: 100%; height: auto; }
.map__land { fill: var(--line-strong); }
.section--dark .map__land { fill: rgba(248, 250, 252, 0.16); }
.map__halo { fill: var(--accent); opacity: 0.16; }
.map__dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.section--dark .map__dot { stroke: var(--ink); }

.market-list {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: var(--s-7);
}
.market-list__item { padding-top: var(--s-4); border-top: 2px solid var(--line-strong); }
.market-list__name { font-size: var(--fs-md); }
.market-list__note { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------- Market detail */

.markets { display: grid; gap: var(--s-5); }
@media (min-width: 52rem) { .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.market {
  padding: var(--s-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}
.market__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.market__name { font-size: var(--fs-lg); }
.market__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.market__body { color: var(--text-muted); font-size: var(--fs-base); }
.market__means {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px dashed var(--line-strong);
  font-size: var(--fs-sm);
}
.market__means-label {
  display: block;
  color: var(--accent-ink);
  font-family: var(--font-display); font-size: var(--fs-xs);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--s-1);
}

.tag {
  display: inline-block;
  padding: 2px 9px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em;
  white-space: nowrap;
}
.tag--verified, .tag--operating { background: rgba(16, 185, 129, 0.14); border-color: var(--accent); color: var(--accent-ink); }
.tag--active, .tag--development { background: rgba(245, 158, 11, 0.14); border-color: var(--accent-2); color: #92400E; }
.tag--seeking { background: rgba(148, 163, 184, 0.16); border-color: var(--line-strong); color: var(--text-muted); }
.section--dark .tag { background: rgba(248, 250, 252, 0.08); border-color: var(--line-invert); color: var(--text-invert-muted); }
.section--dark .tag--verified, .section--dark .tag--operating { color: var(--accent-bright); border-color: var(--accent); }
.section--dark .tag--active { color: #FCD34D; border-color: var(--accent-2); }

/* ---------------------------------------------------------- Offtake list */

.offtake { display: grid; gap: var(--s-2); }
.offtake__item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--ink-2);
  border: 1px solid var(--line-invert);
  border-left: 3px solid var(--swatch);
  border-radius: var(--radius);
}
.offtake__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); }
.offtake__meta { display: flex; align-items: center; gap: var(--s-3); }
.offtake__region { color: var(--text-invert-muted); font-size: var(--fs-sm); }

.badge-line {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6); padding: var(--s-3) var(--s-4);
  background: rgba(248, 250, 252, 0.06);
  border-radius: var(--radius);
  color: var(--text-invert-muted);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------- Facts / checklist */

.facts { display: grid; gap: 0; }
.facts--grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-2) var(--s-6); }
.facts--inline { margin-top: var(--s-5); }
.facts--compact { margin-top: var(--s-5); }
.facts__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.section--dark .facts__row { border-bottom-color: var(--line-invert); }
.facts__label {
  flex: none; min-width: 11rem;
  color: var(--text-faint);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
}
.section--dark .facts__label { color: var(--text-invert-muted); }
.facts__value { margin: 0; font-size: var(--fs-base); }

/* Used on both light and dark bands, so the card colours follow the section
   rather than assuming one. Getting this wrong is not a subtle bug: ink text on
   an ink card measures 1.22:1. */
.checklist { display: grid; gap: var(--s-3); }
.checklist__item {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-base);
}
.checklist__item svg { color: var(--accent-ink); flex: none; margin-top: 3px; }

.section--dark .checklist__item { background: var(--ink-2); border-color: var(--line-invert); }
.section--dark .checklist__item svg { color: var(--accent-bright); }

/* ------------------------------------------------------------ Calculator */

.calc {
  padding: var(--s-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.calc__title { font-size: var(--fs-md); margin-bottom: var(--s-5); }
.calc__slider-label {
  display: block;
  color: var(--text-faint);
  font-family: var(--font-display); font-size: var(--fs-xs);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.calc__count {
  display: block; margin-block: var(--s-1) var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calc__slider { width: 100%; accent-color: var(--accent-ink); cursor: pointer; }
.calc__presets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.calc__preset {
  padding: var(--s-1) var(--s-3);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.calc__preset:hover, .calc__preset[aria-pressed='true'] { border-color: var(--accent-ink); color: var(--accent-ink); }

.calc__results {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.calc__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calc__unit { margin-left: 3px; color: var(--text-faint); font-size: var(--fs-sm); }
.calc__label { display: block; margin-top: var(--s-1); color: var(--text-muted); font-size: var(--fs-sm); }

.methodology {
  margin-top: var(--s-7); padding: var(--s-5);
  background: var(--surface-3);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius);
}
.methodology__title {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint);
}
.methodology__body { margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); }
.methodology .facts__label { min-width: 8rem; }
.methodology .facts__row { border-bottom-color: var(--line-strong); }

/* ---------------------------------------------------------------- Tabs */

.tabs__list {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
}
.tabs__btn {
  padding: var(--s-3) var(--s-4);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs__btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.tabs__btn[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: var(--text-invert); }
.tabs__blurb { margin-bottom: var(--s-5); color: var(--text-muted); font-size: var(--fs-sm); }

/* ----------------------------------------------------------------- Form */

.contact { display: grid; gap: var(--s-8); }
@media (min-width: 64rem) { .contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr); gap: var(--s-9); } }
.contact__aside-title { font-size: var(--fs-md); margin-bottom: var(--s-5); }

.form__grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.form__grid--common { margin-bottom: var(--s-6); }
.form__grid + .form__grid { margin-top: var(--s-5); }

.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; border: 0; padding: 0; margin: 0; }
.field--group { grid-column: 1 / -1; }
.field__label {
  color: var(--text-muted);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  padding: 0;
}
.field__req { color: var(--accent-ink); }
.field__control {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__control:hover { border-color: var(--text-faint); }
.field__control:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.16);
}
.field__control:disabled { background: var(--surface-3); color: var(--text-faint); cursor: not-allowed; }
textarea.field__control { resize: vertical; min-height: 7rem; }

.field.is-invalid .field__control { border-color: #B91C1C; }
.field__error { color: #B91C1C; font-size: var(--fs-sm); }

.field__checks { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-base); cursor: pointer; }
.check input { accent-color: var(--accent-ink); width: 17px; height: 17px; }

.form__note { margin-top: var(--s-5); color: var(--text-faint); font-size: var(--fs-sm); }
.form button[type='submit'] { margin-top: var(--s-5); }
.form__privacy {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--surface-3);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text-muted); font-size: var(--fs-sm);
  max-width: var(--measure);
}

.handoff {
  margin-top: var(--s-6); padding: var(--s-6);
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
}
.handoff__title { font-size: var(--fs-md); }
.handoff__body { margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); }
.handoff__meta { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); font-size: var(--fs-sm); }
.handoff__meta dt { color: var(--text-faint); font-weight: 600; }
.handoff__meta dd { margin: 0; word-break: break-all; }
.handoff__text {
  width: 100%; margin-top: var(--s-5); padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: var(--fs-sm); resize: vertical;
}
.handoff__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.handoff__actions .btn + .btn { margin-left: 0; }

/* -------------------------------------------------------------- Offices */

/* An office card holds a name, a role and one line of address, so stretching it
   to 1fr across a 1200px shell reads as empty — that is what two offices in a
   grid built for three looked like. Instead the grid is bounded to the width
   its own contents want: --offices-max is emitted by the template as
   count × card + gaps, so the cards stay a constant size and the row is as long
   as there are offices, at any count. */
.offices {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: min(100%, var(--offices-max, 100%));
}
.offices--stack { grid-template-columns: minmax(0, 1fr); max-width: 100%; }
.office {
  padding: var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.office__pin { display: block; color: var(--accent-ink); margin-bottom: var(--s-3); }
.office__name { font-size: var(--fs-base); }
.office__role { margin-top: 2px; color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.office__address { margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); }

/* -------------------------------------------------------------- CTA band */

.cta-band__inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 60rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); }
}
.cta-band__title { font-size: var(--fs-xl); text-wrap: balance; }
.cta-band__body { margin-top: var(--s-3); color: var(--text-invert-muted); max-width: var(--measure); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta-band__actions .btn + .btn { margin-left: 0; }

/* --------------------------------------------------------------- Legal */

.legal-block + .legal-block { margin-top: var(--s-7); }
.legal-block__title { font-size: var(--fs-lg); margin-bottom: var(--s-4); }
.legal-block__offices { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
.legal-block__offices li { color: var(--text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------- Footer */

.site-footer {
  background: var(--ink);
  color: var(--text-invert-muted);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--fs-sm);
}
.site-footer__top {
  display: grid; gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line-invert);
}
@media (min-width: 60rem) {
  .site-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--s-6); }
}
.brand--footer { margin-bottom: var(--s-4); }
.site-footer__blurb { max-width: 40ch; }
.site-footer__heading {
  margin-bottom: var(--s-4);
  color: var(--text-invert);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.site-footer__links { display: grid; gap: var(--s-2); }
.site-footer__links a { transition: color var(--dur) var(--ease); }
.site-footer__links a:hover { color: var(--accent-bright); }
.site-footer__offices { display: grid; gap: var(--s-4); }
.site-footer__office { display: block; color: var(--text-invert); font-weight: 600; }
.site-footer__address { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.55; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  font-size: var(--fs-xs);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.site-footer__legal a:hover { color: var(--accent-bright); }

/* --------------------------------------------------------------- Print */

@media print {
  .site-header, .nav, .cta-band, .skip-link, .calc__slider, .handoff { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: var(--s-5); }
  .section--dark { background: #fff; color: #000; }
}