/* ============================================================
   WaterPearls / RHST Industries — 2026
   Vanilla CSS, mobile-first, premium agritech
============================================================ */

:root {
  /* Brand (scraped from waterpearls.ca, navy palette) */
  --brand-navy: #045184;
  --brand-navy-deep: #03406B;
  --brand-medium: #21537C;
  --brand-accent: #2B6CA3;
  --brand-cyan: #5BA9D9;
  /* Small text (eyebrows, kickers, chips) on navy needs >=4.5:1 — #5BA9D9 is only 3.2:1.
     Reserve --brand-cyan for large headings on dark; use this tint for small text. */
  --brand-cyan-soft: #9CCDEC;

  /* Neutrals */
  --ink: #0F1B2D;
  --ink-soft: #324158;
  --ink-mute: #566578; /* 5.5:1 on white, 5.2:1 on paper-soft (old #6B7A8F was 4.37:1 — fails AA small text) */
  --paper: #FFFFFF;
  --paper-soft: #F4F8FB;
  --paper-mid: #E8EFF5;
  --line: rgba(15, 27, 45, 0.08);

  /* Accents */
  --leaf: #3E8E5A;
  --warn: #C56E2B;

  /* Brand trio per RHST letter §2 — Navy / Teal / Gold.
     Teal = the existing brand cyan (scraped brand secondary); Gold is the new
     third colour, reserved for recognition / awards / IP (premium distinction). */
  --brand-teal: var(--brand-cyan);   /* alias: the letter's "Teal" */
  --gold:        #C8A24A;  /* decorative only — hairlines, medal rules (not text) */
  --gold-ink:    #8A6516;  /* gold text on light bg — 5.3:1 on white (WCAG AA) */
  --gold-bright: #E2C46A;  /* gold text on navy — 4.9:1 (WCAG AA) */

  /* Typography */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;

  /* Layout */
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 10vw, 140px);
  --radius-lg: 20px; /* hero-scale navy panels (cta-banner, qc-callout, app-band) */

  /* Type scale */
  --h-hero: clamp(34px, 4.4vw, 64px);
  --h-section: clamp(30px, 4.5vw, 60px);
  --h-card: clamp(22px, 2.4vw, 30px);
  --body: 17px;
  --body-lead: clamp(18px, 1.8vw, 22px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --easeOut: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html {
  /* No scroll-behavior: smooth — conflicts with Lenis (double-smoothing) */
  overflow-x: clip;
}

/* Lenis required setup */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--brand-navy); text-decoration: none; }

::selection { background: var(--brand-navy); color: #fff; }

/* Keyboard accessibility — visible focus ring (mouse users unaffected) */
:focus-visible {
  outline: 2.5px solid var(--brand-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.nav.is-on-dark :focus-visible,
.section--dark :focus-visible,
.dc-hero :focus-visible,
.cta-banner :focus-visible { outline-color: #fff; }

/* ─────────────  Container  ───────────── */

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ─────────────  Typography  ───────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 0.5em;
}

.h-hero { font-size: var(--h-hero); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
.h-section { font-size: var(--h-section); }
.h-card { font-size: var(--h-card); }

.lead {
  font-size: var(--body-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0 0 18px;
}

.accent { color: var(--brand-navy); }
.accent-cyan { color: var(--brand-accent); }
/* On dark backgrounds the deep accent (#2B6CA3) is too low-contrast (≈1.9:1 on navy);
   use the bright cyan there. The deep accent stays for light-bg large headings. */
.hero .accent-cyan,
.dc-hero .accent-cyan,
.qc-callout .accent-cyan,
.section--dark .accent-cyan { color: var(--brand-cyan); }

.small { font-size: 14px; color: var(--ink-mute); }

/* ─────────────  Buttons  ───────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 0;
  transition: transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}

.btn--primary {
  background: var(--brand-navy);
  color: #fff;
  box-shadow: 0 6px 20px -8px rgba(4, 81, 132, 0.55);
}
.btn--primary:hover {
  background: var(--brand-navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(4, 81, 132, 0.6);
}

.btn--ghost {
  background: transparent;
  color: var(--brand-navy);
  border: 1.5px solid var(--brand-navy);
}
.btn--ghost:hover {
  background: var(--brand-navy);
  color: #fff;
  transform: translateY(-2px);
}

.btn--on-dark {
  background: #fff;
  color: var(--brand-navy);
}
.btn--on-dark:hover {
  background: var(--paper-soft);
  transform: translateY(-2px);
}

.btn::after { content: '→'; font-weight: 400; transform: translateY(-1px); transition: transform .22s var(--ease); }
.btn:hover::after { transform: translate(3px, -1px); }

/* ─────────────  Nav  ───────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 14px 0;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease), padding .25s var(--ease);
}

.nav.is-on-dark {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav.is-on-dark .nav__link { color: #fff; }
.nav.is-on-dark .btn--primary { background: #fff; color: var(--brand-navy); }
.nav.is-on-dark .btn--primary:hover { background: var(--paper-soft); }
/* Dual brand image: blue wordmark on light nav, white wordmark + colored
   globe (logo-footer.png) when the nav sits over the dark hero. A CSS
   filter would flatten the globe into a white blob — never reintroduce. */
.nav__brand img.nav__brand-inv { display: none; }
.nav.is-on-dark .nav__brand img.nav__brand-std { display: none; }
.nav.is-on-dark .nav__brand img.nav__brand-inv { display: block; }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__brand img {
  height: 36px;
  width: auto;
  display: block;
  transition: filter .25s var(--ease);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  position: relative;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__link:hover { color: var(--brand-navy); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--brand-navy); }
.nav__link.is-active::after { transform: scaleX(1); }

/* Applications dropdown */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 7px;
  vertical-align: middle;
  opacity: 0.7;
  transition: transform .25s var(--ease);
}
.nav__group:hover .nav__caret,
.nav__group:focus-within .nav__caret,
.nav__group.is-open .nav__caret { transform: rotate(180deg); }
.nav__group::after {
  /* hover bridge so the menu doesn't close in the gap */
  content: '';
  position: absolute;
  top: 100%; left: -16px; right: -16px;
  height: 28px;
}
/* Applications trigger has no href — keep it acting like a link */
.nav__group > .nav__link { cursor: pointer; }
.nav__dropdown {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(2px);
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 26px 54px -20px rgba(4, 81, 132, 0.34);
  padding: 8px;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 120;
}
.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown,
.nav__group.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
}
.nav__dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  transition: background .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease);
}
.nav__dropdown a:hover {
  background: var(--paper-soft);
  color: var(--brand-navy);
  padding-left: 18px;
}

/* Language switcher */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.lang-switch__opt {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang-switch__opt:hover { color: var(--brand-navy); }
.lang-switch__opt.is-active { background: var(--brand-navy); color: #fff; }
.nav.is-on-dark .lang-switch { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); }
.nav.is-on-dark .lang-switch__opt { color: rgba(255, 255, 255, 0.82); }
.nav.is-on-dark .lang-switch__opt:hover { color: #fff; }
.nav.is-on-dark .lang-switch__opt.is-active { background: #fff; color: var(--brand-navy); }

.nav__burger {
  display: none;
  width: 40px; height: 40px;
  background: none; border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav__burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  margin: 4px auto;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav.is-on-dark .nav__burger span { background: #fff; }

@media (max-width: 880px) {
  .nav__links {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    gap: 22px;
    padding: 32px var(--gutter) 40px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    /* visibility delay keeps the closed panel from covering the header bar */
    visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s .35s;
    align-items: flex-start;
    /* the panel is fixed: without its own scroll, items past the fold are unreachable */
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav__links.is-open { transform: translateY(0); visibility: visible; transition: transform .35s var(--ease); }
  .nav__burger { display: block; }
  .nav.is-on-dark .nav__links { background: var(--paper); }
  .nav.is-on-dark .nav__links .nav__link { color: var(--ink); }
  /* the open panel is white — undo dark-mode lang-switch styling inside it */
  .nav.is-on-dark .nav__links .lang-switch { background: #fff; border-color: var(--line); }
  .nav.is-on-dark .nav__links .lang-switch__opt { color: var(--ink-mute); }
  .nav.is-on-dark .nav__links .lang-switch__opt.is-active { background: var(--brand-navy); color: #fff; }

  /* Dropdown collapses on mobile — tap "Sectors" (JS .is-open) to expand */
  .nav__group { flex-direction: column; align-items: flex-start; width: 100%; gap: 14px; }
  .nav__group::after { display: none; }
  .nav__dropdown {
    display: none;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav__group.is-open .nav__dropdown { display: block; }
  .nav__group:hover .nav__dropdown,
  .nav__group:focus-within .nav__dropdown { transform: none; }
  .nav__dropdown a { padding: 6px 0; font-size: 14.5px; color: var(--ink-soft); }
  .nav__dropdown a:hover { background: transparent; padding-left: 4px; }
}

/* ── French nav: labels are longer than English, so tighten the desktop row
   and collapse to the burger menu earlier (up to 1240px) so the header never
   crowds or wraps. English is unaffected (still collapses at 880px). ── */
html[lang="fr"] .nav__links { gap: 20px; }

@media (min-width: 881px) and (max-width: 1240px) {
  html[lang="fr"] .nav__burger { display: block; }
  html[lang="fr"] .nav__links {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    gap: 22px;
    padding: 32px var(--gutter) 40px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s .35s;
    align-items: flex-start;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  html[lang="fr"] .nav__links.is-open { transform: translateY(0); visibility: visible; transition: transform .35s var(--ease); }
  html[lang="fr"] .nav.is-on-dark .nav__links { background: var(--paper); }
  html[lang="fr"] .nav.is-on-dark .nav__links .nav__link { color: var(--ink); }
  html[lang="fr"] .nav.is-on-dark .nav__links .lang-switch { background: #fff; border-color: var(--line); }
  html[lang="fr"] .nav.is-on-dark .nav__links .lang-switch__opt { color: var(--ink-mute); }
  html[lang="fr"] .nav.is-on-dark .nav__links .lang-switch__opt.is-active { background: var(--brand-navy); color: #fff; }
  html[lang="fr"] .nav__group { flex-direction: column; align-items: flex-start; width: 100%; gap: 14px; }
  html[lang="fr"] .nav__group::after { display: none; }
  html[lang="fr"] .nav__dropdown {
    display: none;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  html[lang="fr"] .nav__group.is-open .nav__dropdown { display: block; }
  html[lang="fr"] .nav__dropdown a { padding: 6px 0; font-size: 14.5px; color: var(--ink-soft); }
  html[lang="fr"] .nav__dropdown a:hover { background: transparent; padding-left: 4px; }
}

/* ─────────────  Hero (home)  ───────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: linear-gradient(135deg, #03406B 0%, #045184 45%, #21537C 100%);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* glass cards flow under the copy when static (mobile) */
  justify-content: center;
  padding: 96px 0 48px;
}

/* Full-bleed product macro (session 12 "wow") — decorative: the copy carries the
   message, the navy scrim keeps the left column AA-readable. */
.hero__bg {
  position: absolute;
  inset: 0;
  background: url('../img/waterpearls-drop.jpg') 72% center / cover no-repeat;
  transform-origin: 72% 50%;
  animation: kenburns 26s var(--ease) infinite alternate;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #03406B 0%, rgba(3, 64, 107, 0.96) 32%, rgba(3, 64, 107, 0.62) 52%, rgba(3, 64, 107, 0.16) 76%, rgba(3, 64, 107, 0.34) 100%);
}

.hero > .container { position: relative; width: 100%; z-index: 2; }
@media (max-width: 880px) {
  .hero {
    justify-content: flex-start;
    min-height: auto;
    padding: 100px 0 56px;
  }
  .hero__bg { background-position: 62% center; }
  .hero__bg::after {
    background: linear-gradient(180deg, rgba(3, 64, 107, 0.97) 0%, rgba(3, 64, 107, 0.93) 55%, rgba(3, 64, 107, 0.72) 100%);
  }
}

.hero__copy { position: relative; z-index: 2; max-width: 620px; }
.hero h1 {
  color: #fff;
  margin-bottom: 18px;
  /* vh-capped so eyebrow + h1 + lead + CTA + stats all fit the first screen down to ~768px tall */
  font-size: clamp(38px, min(5.2vw, 8.2vh), 72px);
  line-height: 1.03;
  letter-spacing: -0.012em;
  font-weight: 800;
}
.hero .lead { color: rgba(255, 255, 255, 0.86); font-size: clamp(16px, 1.5vw, 19px); max-width: 50ch; }
.hero .eyebrow { color: var(--brand-cyan-soft); }

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* Glass stat cards anchored on the product image (bottom-right) */
.hero__glass {
  position: absolute;
  right: clamp(28px, 4.5vw, 72px);
  bottom: 52px;
  display: flex;
  gap: 16px;
  z-index: 2;
}

.hero__stat {
  background: rgba(6, 28, 47, 0.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 16px 22px;
  border-radius: 10px;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.35);
  font-family: var(--font-display);
}
.hero__stat .num { font-size: 28px; font-weight: 800; line-height: 1; color: #fff; }
.hero__stat .num .suffix { color: var(--gold-bright); }
.hero__stat .label { font-size: 12px; color: rgba(255, 255, 255, 0.82); margin-top: 4px; letter-spacing: 0.05em; text-transform: uppercase; }

@media (max-width: 880px) {
  .hero__glass {
    position: static;
    margin-top: 36px;
    padding: 0 var(--gutter);
    flex-wrap: wrap;
  }
}

/* ─────────────  Section  ───────────── */

.section {
  padding: var(--section-y) 0;
  position: relative;
}

.section--soft { background: var(--paper-soft); }
.section--mid { background: var(--paper-mid); }
.section--dark {
  background: linear-gradient(135deg, #03406B 0%, #045184 100%);
  color: #fff;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead { color: rgba(255, 255, 255, 0.84); }
.section--dark .eyebrow { color: var(--brand-cyan-soft); }

.section__head {
  max-width: 740px;
  margin: 0 auto clamp(40px, 5vw, 72px);
  text-align: center;
}

.section__head--left { margin-left: 0; margin-right: auto; text-align: left; }
/* centered heads: the 62ch .lead must center as a block too */
.section__head:not(.section__head--left) .lead { margin-left: auto; margin-right: auto; }

/* ─────────────  Card grid  ───────────── */

.grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Fixed 3-per-row grid (6 cards render as a clean 3×2) */
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--3 { grid-template-columns: 1fr; } }

/* Balanced grids — always 3 per row, with the trailing partial row centered
   (no 4+1 / 3+2 / 3+3+1 orphan rows). 6-col track, each card spans 2. */
.grid--balanced { grid-template-columns: repeat(6, 1fr); }
.grid--balanced > * { grid-column: span 2; }
/* 5 cards → 3 + 2 (bottom row centered) */
.grid--balanced-5 > :nth-child(4) { grid-column: 2 / span 2; }
.grid--balanced-5 > :nth-child(5) { grid-column: 4 / span 2; }
/* 7 cards → 3 + 3 + 1 (lone last card centered) */
.grid--balanced-7 > :nth-child(7) { grid-column: 3 / span 2; }
/* 8 cards → 3 + 3 + 2 (bottom pair centered) */
.grid--balanced-8 > :nth-child(7) { grid-column: 2 / span 2; }
.grid--balanced-8 > :nth-child(8) { grid-column: 4 / span 2; }
@media (max-width: 900px) {
  .grid--balanced { grid-template-columns: repeat(2, 1fr); }
  .grid--balanced > *,
  .grid--balanced-5 > :nth-child(4),
  .grid--balanced-5 > :nth-child(5),
  .grid--balanced-7 > :nth-child(7),
  .grid--balanced-8 > :nth-child(7),
  .grid--balanced-8 > :nth-child(8) { grid-column: auto; }
}
@media (max-width: 600px) { .grid--balanced { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  border: 1px solid var(--line);
  transition: transform .22s var(--ease), box-shadow .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -20px rgba(4, 81, 132, 0.22);
}

/* Tier 3 H — SDG cascade reveal initial state */
[data-sdg-cascade] {
  perspective: 1200px;
  perspective-origin: 50% 30%;
}
.sdg-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Tier 3 J — footer water ripple */
.footer { position: relative; overflow: hidden; }
.footer__ripple {
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
  z-index: 0;
}
.footer__ripple svg {
  display: block;
  width: 200%;
  height: 100%;
  transform: translateX(0);
}
.footer__ripple .wave-a { animation: footer-wave-a 14s linear infinite; }
.footer__ripple .wave-b { animation: footer-wave-b 22s linear infinite; }
.footer__ripple .wave-c { animation: footer-wave-c 32s linear infinite; }
@keyframes footer-wave-a { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes footer-wave-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes footer-wave-c { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.footer .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .footer__ripple .wave-a, .footer__ripple .wave-b, .footer__ripple .wave-c { animation: none; }
}

.card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-navy)); /* white glyph on the old cyan end = 2.6:1; on accent = 5.6:1 */
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 22px;
  box-shadow: 0 8px 22px -6px rgba(43, 108, 163, 0.55);
}

.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); margin: 0; }

/* milestone badges on about.html feed 3-4 char strings ('360M', 'Labs') into the 52px circle */
[data-timeline] .card__icon { font-size: 16px; letter-spacing: -0.01em; }
/* icon-cards in a row share a heading slot so bodies start on one baseline */
.card .card__icon + h3 { min-height: 2.2em; }

.card--link {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.card--link::after {
  content: 'Learn more →';
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--brand-accent);
  margin-top: 22px;
  letter-spacing: 0.02em;
  transition: transform .25s var(--ease);
  align-self: flex-start;
}
.card--link:hover::after { transform: translateX(4px); }

/* ─────────────  Two-column rows (alternating)  ───────────── */

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.row2 + .row2 { margin-top: var(--section-y); }
.row2--reverse .row2__media { order: 2; }
@media (max-width: 800px) {
  .row2 { grid-template-columns: 1fr; }
  .row2--reverse .row2__media { order: 0; }
}

.row2__media img {
  border-radius: 14px;
  width: 100%;
  height: auto;
  box-shadow: 0 30px 60px -25px rgba(4, 81, 132, 0.35);
}
.section--dark .row2__media img { background: rgba(255, 255, 255, 0.06); }

/* ─────────────  Stats strip  ───────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px 40px;
  text-align: center;
}

.stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--brand-navy);
  letter-spacing: -0.02em;
}
.section--dark .stat .num { color: #fff; }
.stat .num .suffix { font-size: 0.7em; }
.stat .label {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section--dark .stat .label { color: rgba(255, 255, 255, 0.82); }
.section--dark .stat .num .suffix { color: var(--brand-cyan-soft); }

/* ─────────────  Tags / pills  ───────────── */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  background: rgba(43, 108, 163, 0.1);
  color: var(--brand-navy);
}
.tag--leaf { background: rgba(62, 142, 90, 0.12); color: #2F7044; } /* --leaf is 3.3:1 on the tinted pill; #2F7044 = 4.9:1 */
.section--dark .tag,
.card--feature .tag { background: rgba(255, 255, 255, 0.14); color: #fff; } /* card--feature is navy inside light sections — default navy tag text was invisible */

/* ─────────────  Bullet list  ───────────── */

.checks {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.checks li {
  position: relative;
  padding: 8px 0 8px 36px;
  font-size: 16.5px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.checks li:first-child { border-top: 0; }
.checks li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-accent);
  background-image: linear-gradient(135deg, var(--brand-cyan), var(--brand-accent));
}
.checks li::after {
  content: '';
  position: absolute;
  left: 7px; top: 21px;
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ─────────────  CTA banner  ───────────── */

.cta-banner {
  background: linear-gradient(135deg, #03406B 0%, #045184 60%, #2B6CA3 100%);
  color: #fff;
  padding: clamp(60px, 8vw, 100px) clamp(36px, 5vw, 80px);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px circle at 90% 0%, rgba(91, 169, 217, 0.35), transparent 60%),
    radial-gradient(500px circle at 0% 100%, rgba(255, 255, 255, 0.08), transparent 55%);
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; margin-bottom: 12px; }
.cta-banner .eyebrow { color: #fff; } /* banner gradient ends at --brand-accent: cyan-soft is only 3.27:1 there, white = 5.6:1 */
.cta-banner .lead { color: rgba(255, 255, 255, 0.92); } /* .85 was 4.3:1 on the banner's accent end */
@media (max-width: 800px) {
  .cta-banner { grid-template-columns: 1fr; text-align: left; padding: 50px 32px; }
}

.cta-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 800px) {
  .cta-banner__actions { justify-content: flex-start; }
}
/* index-only: two long labels wrap anyway — stack them on a shared edge instead of a ragged rag */
@media (min-width: 801px) {
  .cta-banner__actions--stack { flex-direction: column; align-items: stretch; width: max-content; justify-self: end; }
  .cta-banner__actions--stack .btn { justify-content: center; }
}

/* ─────────────  Generic page hero (non-home)  ───────────── */

.page-hero {
  padding: 160px 0 80px;
  background:
    radial-gradient(800px circle at 90% 20%, rgba(91, 169, 217, 0.16), transparent 60%),
    linear-gradient(180deg, var(--paper-soft) 0%, var(--paper) 100%);
  position: relative;
}
.page-hero__inner { max-width: 880px; }
.page-hero h1 { font-size: clamp(36px, 5.5vw, 72px); margin-bottom: 18px; }

/* ─────────────  Application sub-section  ───────────── */

.appli {
  scroll-margin-top: 100px;
}

/* ─────────────  Application feature band  ───────────── */

.app-band {
  padding: 0 0 var(--section-y);
  margin-top: -28px;
}
.app-band__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 44px 90px -38px rgba(4, 81, 132, 0.55);
}
.app-band__frame img {
  width: 100%;
  aspect-ratio: 16 / 6.4;
  object-fit: cover;
  display: block;
}
@media (max-width: 680px) {
  .app-band__frame img { aspect-ratio: 4 / 3; }
}
.app-band__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(3, 64, 107, 0.82) 0%, rgba(3, 64, 107, 0.42) 42%, rgba(3, 64, 107, 0.02) 72%);
}
.app-band__caption {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4vw, 56px);
  right: 20px;
  bottom: clamp(24px, 4vw, 44px);
  max-width: 560px;
  color: #fff;
}
.app-band__caption .eyebrow { color: var(--brand-cyan-soft); margin-bottom: 12px; }
.app-band__caption p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.25;
  color: #fff;
}
/* In-field water-conservation fact (UN FAO) */
.app-band__caption p.app-band__fact {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.app-band__caption p.app-band__fact strong { color: var(--brand-cyan-soft); font-weight: 700; }

/* Quick factual stat trio */
.app-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  text-align: left;
}
@media (max-width: 700px) {
  .app-stats { grid-template-columns: 1fr; gap: 28px; }
}
.app-stats .stat { padding-left: 22px; border-left: 3px solid var(--brand-cyan); }
.app-stats .stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1;
  color: var(--brand-navy);
  letter-spacing: -0.02em;
}
.app-stats .stat .label {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ─────────────  Footer  ───────────── */

.footer {
  /* deep-water night — navy-hued top edge ties it to the brand sections above */
  background: linear-gradient(180deg, #0B2238 0%, #0A1A2C 55%);
  color: rgba(255, 255, 255, 0.78);
  padding: clamp(60px, 8vw, 100px) 0 36px;
  font-size: 14.5px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.footer__brand img {
  height: 56px;
  width: auto;
  margin-bottom: 22px;
}
.footer__brand p { max-width: 36ch; color: rgba(255, 255, 255, 0.65); }

.footer h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-cyan);
  margin-bottom: 18px;
}

.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; }
@media (max-width: 880px) {
  /* ~44px effective tap targets on phones */
  .footer ul a { display: inline-block; padding: 7px 0; }
  .footer ul li { margin-bottom: 2px; }
}
.footer ul a {
  color: rgba(255, 255, 255, 0.78);
  transition: color .2s var(--ease);
}
.footer ul a:hover { color: #fff; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* ─────────────  Form  ───────────── */

.form {
  display: grid;
  gap: 18px;
  max-width: 620px;
}

.field { display: grid; gap: 6px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field--row { grid-template-columns: 1fr; } }

.field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23045184' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
@media (max-width: 480px) {
  .form .btn { width: 100%; justify-content: center; }
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(43, 108, 163, 0.15);
}
.field textarea { resize: vertical; min-height: 130px; }

.contact-info {
  display: grid;
  gap: 22px;
}
.contact-info p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.contact-info strong { color: var(--ink); font-family: var(--font-display); }
.contact-info a { color: var(--brand-navy); font-weight: 600; }
/* HQ block on about.html sits on .section--dark — light-theme inks are invisible there */
.section--dark .contact-info p { color: rgba(255, 255, 255, 0.85); }
.section--dark .contact-info strong { color: #fff; }
.section--dark .contact-info a { color: var(--brand-cyan-soft); } /* small text on navy: --brand-cyan is 3.2:1, soft is 4.9:1 */

/* ─────────────  Before / After slider (Phase 2 D)  ───────────── */

.ba {
  position: relative;
  margin-top: 48px;
}
.ba__pin {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 78vh;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(4, 81, 132, 0.45);
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 680px) {
  .ba__pin { aspect-ratio: 4 / 5; }
}
.ba__before, .ba__after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba__after { z-index: 2; }
.ba__divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  background: #fff;
  z-index: 3;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
}
.ba__divider::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: #fff;
  background-image: linear-gradient(135deg, #fff 0%, #f0f8fc 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(4, 81, 132, 0.15);
}
.ba__divider::before {
  content: '⇆';
  position: absolute;
  top: 50%; left: 50%;
  margin: -10px 0 0 -10px;
  width: 20px; text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand-navy);
  z-index: 1;
  font-size: 16px;
}
.ba__label {
  position: absolute;
  top: 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15, 27, 45, 0.75);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 4;
  backdrop-filter: blur(8px);
}
.ba__label--before { left: 20px; }
.ba__label--after { right: 20px; background: rgba(43, 108, 163, 0.85); }

/* ─────────────  Lotus droplets overlay (Phase 2 E)  ───────────── */

.row2__media {
  position: relative;
}
.droplets-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.droplet {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(91, 169, 217, 0.55) 35%, rgba(4, 81, 132, 0.35) 100%);
  box-shadow: inset -4px -6px 12px rgba(4, 81, 132, 0.4), 0 6px 12px rgba(0, 0, 0, 0.2);
}
.droplet::after {
  content: '';
  position: absolute;
  top: 12%; left: 22%;
  width: 30%; height: 22%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(1.5px);
}

/* ─────────────  Reveal-on-scroll  ───────────── */

[data-reveal] {
  opacity: 0.001;
  transform: translateY(28px);
  transition: opacity .9s var(--easeOut), transform .9s var(--easeOut);
  animation: auto-reveal 1.4s var(--easeOut) 1.6s forwards;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

@keyframes auto-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ─────────────  Loader  ───────────── */

/* ─────────────  Utilities  ───────────── */

.text-center { text-align: center; }
.mt-l { margin-top: 36px; }
.mt-xl { margin-top: 64px; }
.mb-l { margin-bottom: 36px; }

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 80px 0;
}

/* ─────────────  Hide on small  ───────────── */
@media (max-width: 600px) {
  .hide-sm { display: none; }
}

/* ─────────────  Legal prose (terms / privacy)  ───────────── */
.legal {
  max-width: 820px;
}
.legal p {
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.legal h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-navy);
  margin: 40px 0 18px;
}
.legal h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin: 34px 0 12px;
}
.legal ol, .legal ul {
  color: var(--ink-soft);
  margin: 0 0 20px;
  padding-left: 22px;
}
.legal li { margin-bottom: 8px; }
.legal .legal__meta {
  color: var(--ink-mute);
  font-size: 15px;
  margin-bottom: 28px;
}
.legal address {
  font-style: normal;
  color: var(--ink-soft);
  margin: 0 0 20px;
  line-height: 1.7;
}
.legal a { color: var(--brand-accent); }

/* ============================================================
   Data-center repositioning (2026-06-02)
   pillars · mechanism flow · net-zero balance · ESG cards ·
   sources / working-draft guardrail
============================================================ */

/* Working-draft badge (honest "model in validation" marker) */
.draft-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(197, 110, 43, 0.12); color: var(--warn);
  border: 1px solid rgba(197, 110, 43, 0.28);
}
.section--dark .draft-badge { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }

/* Source reference superscript */
sup.src { font-size: 0.62em; font-weight: 700; color: var(--brand-accent); margin-left: 2px; cursor: help; }
.section--dark sup.src { color: var(--brand-cyan); }

/* ── Three pillars ── */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 34px 28px;
}
.section--dark .pillar { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.pillar__idx { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; color: var(--brand-accent); }
.section--dark .pillar__idx { color: var(--brand-cyan-soft); }
.pillar h3 { margin: 14px 0 18px; }
.pillar__stat { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 5vw, 58px); line-height: 1; color: var(--brand-navy); letter-spacing: -0.02em; }
.section--dark .pillar__stat { color: #fff; }
.pillar__lbl { display: block; margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.section--dark .pillar__lbl { color: rgba(255,255,255,0.8); }
.pillar__body { margin: 18px 0 0; color: var(--ink-soft); font-size: 15.5px; }
.section--dark .pillar__body { color: rgba(255,255,255,0.78); }
.pillars__bridge { text-align: center; margin: 48px auto 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 28px); color: var(--brand-navy); }
.section--dark .pillars__bridge { color: #fff; }

/* ── Mechanism flow (4 steps) ── */
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 16px; align-items: stretch;
}
@media (max-width: 980px) { .flow { grid-template-columns: 1fr; gap: 14px; } .flow__arrow { display: none !important; } }
.flow__step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px; }
.section--dark .flow__step { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.flow__icon { width: 44px; height: 44px; color: var(--brand-accent); margin-bottom: 8px; }
.section--dark .flow__icon { color: var(--brand-cyan); }
.flow__icon svg { width: 100%; height: 100%; }
.flow__n { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.12em; color: var(--brand-accent); }
.section--dark .flow__n { color: var(--brand-cyan-soft); }
.flow__step h3 { font-size: 20px; margin: 8px 0 10px; }
.flow__step p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.section--dark .flow__step p { color: rgba(255,255,255,0.78); }
.flow__arrow { display: flex; align-items: center; justify-content: center; color: var(--brand-accent); font-size: 22px; font-weight: 700; }
.section--dark .flow__arrow { color: var(--brand-cyan); }

/* ── Net-zero balance ── */
.balance { margin: 48px auto 0; max-width: 760px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 620px) { .balance { grid-template-columns: 1fr; } .balance__eq { padding: 6px 0; } }
.balance__side { border-radius: 14px; padding: 24px 26px; border: 1px solid var(--line); background: var(--paper-soft); }
.section--dark .balance__side { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.balance__side--in { border-left: 4px solid var(--warn); }
.balance__side--out { border-left: 4px solid var(--leaf); }
.balance__tag { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.section--dark .balance__tag { color: rgba(255,255,255,0.72); }
.balance__val { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink); }
.section--dark .balance__val { color: #fff; }
.balance__eq { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--brand-accent); }
.section--dark .balance__eq { color: var(--brand-cyan); }
.balance__net { text-align: center; margin: 26px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); }
.section--dark .balance__net { color: #fff; }
.balance__net strong { color: var(--leaf); font-size: 1.3em; }
.section--dark .balance__net strong { color: var(--brand-cyan); }

/* ── ESG / audience cards ── */
.card__kicker { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-accent); margin: 0 0 12px; }
.section--dark .card__kicker { color: var(--brand-cyan-soft); }
.card--feature { background: linear-gradient(135deg, #03406B 0%, #045184 100%); color: #fff; border-color: transparent; }
.card--feature .card__kicker { color: var(--brand-cyan-soft); }
.card--feature h3 { color: #fff; }
/* .card__body sets ink-soft explicitly (1.04:1 on the navy gradient) — must re-override on feature cards */
.card--feature .card__body { color: rgba(255,255,255,0.88); }
/* bare <p> inside feature cards (e.g. VivaTech card) — .card p would paint ink-soft on navy */
.card--feature p { color: rgba(255,255,255,0.88); }
.card__list { list-style: none; margin: 14px 0 0; padding: 0; }
.card__list li { position: relative; padding: 9px 0 9px 26px; font-size: 15px; color: var(--ink-soft); border-top: 1px solid var(--line); }
.card--feature .card__list li { color: rgba(255,255,255,0.88); border-top-color: rgba(255,255,255,0.16); }
.card__list li:first-child { border-top: 0; }
.card__list li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 11px; height: 6px; border-left: 2px solid var(--brand-accent); border-bottom: 2px solid var(--brand-accent); transform: rotate(-45deg); }
.card--feature .card__list li::before { border-color: var(--brand-cyan); }
.card__body { color: var(--ink-soft); margin: 0; }
.esg-traction { text-align: center; margin: 44px auto 0; max-width: 700px; font-size: 15.5px; color: rgba(255,255,255,0.82); }

/* ── Sources / working-draft block ── */
.sources-block { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 14px; padding: 30px 32px; max-width: 820px; margin: 0 auto; }
.sources-block h2 { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-navy); margin: 0 0 16px; }
.sources-block ol { margin: 0 0 18px; padding-left: 20px; color: var(--ink-soft); font-size: 14.5px; }
.sources-block li { margin-bottom: 8px; }
.sources-block__disc { font-size: 14px; color: var(--ink-mute); font-style: italic; margin: 0; }

/* Small note under figure groups */
.fig-note { font-size: 13.5px; color: #566578; margin: 22px 0 0; } /* --ink-mute is 4.09:1 on paper-soft */
.section--dark .fig-note,
.dc-hero .fig-note,
.hero .fig-note { color: rgba(255,255,255,0.75); } /* heroes are dark photo surfaces but not .section--dark — the light fig-note color is unreadable there */

/* Performance row: two charts side-by-side replacing the single media image */
.row2--charts { grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 4vw, 64px); }
@media (max-width: 800px) { .row2--charts { grid-template-columns: 1fr; } }
.chartpair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 460px) { .chartpair { grid-template-columns: 1fr; } }
.chartpair figure {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(4, 81, 132, 0.10);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 24px 50px -28px rgba(4, 81, 132, 0.35);
}
.chartpair img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: none;
}
.chartpair figcaption {
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #566578;
  text-align: center;
  line-height: 1.35;
}

/* ============================================================
   Data-centers page redesign (2026-06-02) — watershed-loop data-viz
============================================================ */

/* Dark hero (data-centers) — session 12 "ledger": statement left, WRIA term-sheet
   card right, everything (chips + sources included) fits the first screen. */
.dc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(165deg, rgba(3,64,107,0.95) 0%, rgba(4,81,132,0.90) 45%, rgba(33,83,124,0.82) 100%),
    url('../img/evap-loss.jpg') center / cover no-repeat;
  color: #fff;
  overflow: hidden;
  padding: 104px 0 32px;
}
.dc-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(900px circle at 86% 6%, rgba(91,169,217,0.30), transparent 60%),
    radial-gradient(720px circle at 2% 100%, rgba(43,108,163,0.50), transparent 65%);
  pointer-events: none;
}
.dc-hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.92fr;
  gap: clamp(16px, 2.6vh, 26px) clamp(32px, 4.5vw, 64px);
  align-items: center;
}
.dc-hero__head { grid-column: 1; grid-row: 1; max-width: 800px; margin-bottom: 0; }
.dc-hero h1 {
  color: #fff;
  /* vh-capped so statement + term-sheet card + chips + sources fit ~768px-tall screens */
  font-size: clamp(38px, min(5.4vw, 8.2vh), 78px);
  font-weight: 800;
  line-height: 1.02;
  margin: 16px 0 18px;
}
.dc-hero .lead { color: rgba(255,255,255,0.86); max-width: 60ch; font-size: clamp(16px, 1.55vw, 19px); }
.dc-hero .eyebrow { color: var(--brand-cyan-soft); }
.dc-hero .fig-note { grid-column: 1 / -1; font-size: 11.5px; margin-top: 0; }
@media (max-width: 980px) {
  .dc-hero { min-height: auto; padding: 130px 0 64px; }
  .dc-hero .container { display: block; }
  .dc-hero__head { margin-bottom: 36px; }
  .dc-hero .fig-note { margin-top: 18px; }
}

/* Subtle working-draft pill (replaces the loud orange badge) */
.draft-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.draft-pill::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-cyan); box-shadow: 0 0 0 4px rgba(91,169,217,0.20);
}

/* Watershed loop — WRIA "term-sheet" card (gold top rule, vertical 01→04 ledger) */
.wsflow {
  grid-column: 2;
  grid-row: 1;
  background: rgba(4, 32, 54, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  border-top: 3px solid var(--gold);
  border-radius: 16px;
  padding: clamp(16px, 1.9vw, 26px);
}
.wsflow__chain { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.wsnode {
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wsnode:last-of-type { border-bottom: none; }
.wsnode__n { grid-row: 1 / span 2; align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; color: var(--gold-bright); }
.wsnode__t { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; margin: 0 0 4px; }
.wsnode__s { display: block; font-size: 13.5px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.wsnode--accent .wsnode__t { color: var(--gold-bright); }
.wsflow__arrow { display: none; }
.wsflow__return {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px; padding: 12px 0 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.9); font-size: 13px; line-height: 1.5;
}
.wsflow__return-ico { font-size: 24px; color: var(--brand-cyan); flex: 0 0 auto; line-height: 1; }
.wsflow__return b { color: #fff; }

/* Hero metric chips */
.dc-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0; }
.dc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: #fff;
}
.dc-chip b { color: var(--brand-cyan-soft); font-weight: 800; }
@media (max-width: 980px) {
  .dc-chips { margin-top: 20px; }
}

/* Clean numbered steps (mechanism detail — no cheap icons) */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 680px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: 26px 26px 26px 74px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.step__n {
  position: absolute; left: 24px; top: 24px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-navy)); /* same contrast fix as .card__icon */
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15px;
  box-shadow: 0 8px 20px -8px rgba(43,108,163,0.55);
}
.step h3 { font-size: 20px; margin: 0 0 8px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }

/* Québec regulatory callout (navy card, no stock photo) */
.qc-callout {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #03406B 0%, #045184 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 64px);
}
.qc-callout::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(640px circle at 92% 4%, rgba(91,169,217,0.30), transparent 60%);
  pointer-events: none;
}
.qc-callout > * { position: relative; z-index: 1; }
.qc-callout .eyebrow { color: var(--brand-cyan-soft); }
.qc-callout h2 { color: #fff; max-width: 20ch; margin-bottom: 16px; }
.qc-callout p { color: rgba(255,255,255,0.86); max-width: 64ch; margin: 0 0 14px; }
.qc-callout .qc-note { color: rgba(255,255,255,0.78); font-size: 14px; margin: 0; }
.qc-callout .qc-note strong { color: var(--brand-cyan-soft); }

/* ============================================================
   Imagery pass (2026-06-02) — photo cards + full-bleed media bands
============================================================ */

/* Photo cards (image on top, real photography) */
.card--photo { padding: 0; overflow: hidden; }
.card--photo .card__img {
  width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block;
  background: var(--paper-mid); /* brand-tinted while the photo decodes — never stark white */
  transition: transform .55s var(--ease), filter .55s var(--ease);
}
.card--photo:hover .card__img { transform: scale(1.05); filter: saturate(1.08) brightness(1.04); }
.card--photo .card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; }
.card--photo h3 { margin: 0 0 8px; }
.card--photo p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.card--photo .more {
  margin-top: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--brand-accent); letter-spacing: 0.02em;
  transition: transform .25s var(--ease);
}
.card--photo:hover .more { transform: translateX(4px); }

/* Full-bleed media band (real photo + brand overlay + caption) */
.media-band { position: relative; overflow: hidden; background: var(--brand-navy-deep); }
.media-band__img { width: 100%; height: clamp(320px, 46vw, 560px); object-fit: cover; display: block; }
.media-band__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(4, 81, 132, 0.18), rgba(4, 81, 132, 0.18)),
    linear-gradient(90deg, rgba(3,64,107,0.88) 0%, rgba(3,64,107,0.48) 48%, rgba(3,64,107,0.05) 100%);
}
.media-band__inner { position: absolute; inset: 0; display: flex; align-items: center; }
.media-band__caption { max-width: 540px; color: #fff; }
.media-band__caption .eyebrow { color: var(--brand-cyan-soft); }
.media-band__caption h2 { color: #fff; margin-bottom: 14px; }
.media-band__caption p { color: rgba(255,255,255,0.9); margin: 0; }
@media (max-width: 700px) {
  .media-band__overlay { background: linear-gradient(0deg, rgba(3,64,107,0.94) 0%, rgba(3,64,107,0.55) 65%, rgba(3,64,107,0.2) 100%); }
  .media-band__inner { align-items: flex-end; padding-bottom: 36px; }
}

/* ============================================================
   Brand-motif elevation pass (2026-06-09)
   The logo mark — a droplet holding the world — becomes the
   site's recurring structural motif: droplet eyebrow markers,
   droplet check bullets, water-line section transitions,
   floating pearls in the hero, droplet watermarks on the
   hero-scale navy panels. CSS/JS-free additions only.
============================================================ */

/* ── Droplet eyebrow marker (site-wide rhythm device) ── */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 9px;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-accent));
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  vertical-align: 1px;
}
.hero .eyebrow::before,
.dc-hero .eyebrow::before,
.section--dark .eyebrow::before,
.cta-banner .eyebrow::before,
.qc-callout .eyebrow::before,
.media-band .eyebrow::before,
.app-band__caption .eyebrow::before {
  background: linear-gradient(135deg, #fff, var(--brand-cyan));
}

/* ── Recognition & IP — Gold accent (the letter's third brand colour) ──
   Navy / Teal / Gold. Gold is reserved for recognition, awards and IP — a
   premium-distinction cue, never body copy. Applied to dedicated recognition
   surfaces only (not single cards amid non-recognition siblings) to stay
   tasteful and consistent. WCAG AA verified by the contrast re-audit. */
.recognition .eyebrow,
.recognition .card__kicker { color: var(--gold-ink); }
.recognition .eyebrow::before { background: linear-gradient(135deg, var(--gold), #E9D38C); }
.recognition .card::before,
.is-recognition::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%);
}
.recognition .card:hover { border-color: rgba(200, 162, 74, 0.55); }
/* Gold on navy (feature / dark recognition cards) needs the brighter tint for AA */
.is-recognition .card__kicker { color: var(--gold-bright); }

/* ── Droplet check bullets ── */
.checks li::before {
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
}

/* ── Water-line transition at the foot of the dark heroes ── */
.hero::after,
.dc-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(26px, 4vw, 52px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 38 C 180 58, 360 12, 620 30 C 880 48, 1100 14, 1440 34 L 1440 64 L 0 64 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* ── Floating pearls in the home hero (real .droplet pearls, slow drift) ── */
.hero__pearls { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__pearls .pearl {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0%, rgba(91, 169, 217, 0.5) 38%, rgba(4, 81, 132, 0.28) 100%);
  box-shadow: inset -3px -5px 10px rgba(3, 64, 107, 0.35), 0 4px 10px rgba(0, 0, 0, 0.12);
  opacity: .4;
  animation: pearl-drift 16s ease-in-out infinite alternate;
}
.hero__pearls .pearl::after {
  content: '';
  position: absolute;
  top: 14%; left: 22%;
  width: 30%; height: 22%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(1px);
}
.hero__pearls .pearl:nth-child(1) { width: 22px; height: 22px; left: 6%;  top: 16%; animation-duration: 19s; }
.hero__pearls .pearl:nth-child(2) { width: 12px; height: 12px; left: 13%; top: 68%; animation-duration: 14s; animation-delay: -4s; }
.hero__pearls .pearl:nth-child(3) { width: 30px; height: 30px; left: 44%; top: 82%; animation-duration: 23s; animation-delay: -9s; opacity: .3; }
.hero__pearls .pearl:nth-child(4) { width: 10px; height: 10px; left: 56%; top: 12%; animation-duration: 12s; animation-delay: -2s; }
.hero__pearls .pearl:nth-child(5) { width: 16px; height: 16px; left: 88%; top: 74%; animation-duration: 17s; animation-delay: -7s; }
.hero__pearls .pearl:nth-child(6) { width: 8px;  height: 8px;  left: 72%; top: 30%; animation-duration: 11s; animation-delay: -5s; opacity: .5; }
@keyframes pearl-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(14px, -34px, 0); }
}

/* ── Hero visual: slow ken-burns on the full-bleed macro ── */
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* ── Impact stats: water-gradient numerals on dark ── */
.section--dark .stat .num {
  background: linear-gradient(180deg, #fff 32%, var(--brand-cyan-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Droplet-globe watermark on hero-scale navy panels ── */
.cta-banner::after {
  content: '';
  position: absolute;
  right: -50px; bottom: -70px;
  width: 360px; height: 360px;
  background: url('../img/favicon.png') center / contain no-repeat;
  opacity: .09;
  transform: rotate(8deg);
  pointer-events: none;
}
.page-hero { overflow: hidden; }
.page-hero::after {
  content: '';
  position: absolute;
  right: 3%; top: 18%;
  width: clamp(160px, 22vw, 300px);
  height: clamp(160px, 22vw, 300px);
  background: url('../img/favicon.png') center / contain no-repeat;
  opacity: .06;
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; }

/* ── "Here's the solution." becomes a designed scroll cue ── */
.pillars__bridge { position: relative; padding-bottom: 34px; }
.pillars__bridge::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 10px; height: 10px;
  margin-left: -5px;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-accent));
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  animation: cue-drop 2.2s var(--ease) infinite;
}
@keyframes cue-drop {
  0%   { transform: translateY(-8px) rotate(45deg); opacity: 0; }
  45%  { transform: translateY(0)    rotate(45deg); opacity: 1; }
  100% { transform: translateY(8px)  rotate(45deg); opacity: 0; }
}

/* ── Branded scrollbar (WebKit) ── */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper-soft); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-cyan), var(--brand-navy));
  border-radius: 8px;
  border: 2px solid var(--paper-soft);
}

/* ── Motion guards ── */
@media (prefers-reduced-motion: reduce) {
  .hero__pearls .pearl,
  .hero__bg,
  .pillars__bridge::after { animation: none; }
}

/* ─────────────  §3 Sectors hub — problem → solution → result  ───────────── */

.sector-card { display: flex; flex-direction: column; gap: 0; }
.sector-card__meta { list-style: none; margin: 16px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 13px; }
.sector-card__meta li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; }
.sector-card__meta dt,
.sector-card__k {
  font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-accent); padding-top: 2px;
}
.sector-card__v { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.sector-card .more { margin-top: 18px; }

/* "data pending from RHST" placeholder marker (§3 blocked items) */
.pending {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.02em;
  color: #8A5A1B; background: rgba(197, 110, 43, 0.12); border: 1px solid rgba(197, 110, 43, 0.28);
  border-radius: 999px; padding: 5px 12px;
}
.pending::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: 0 0 auto; }

/* ─────────────  §3 Our Projects — table (collapses to cards on mobile)  ───────────── */

.proj-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.proj-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 720px; }
.proj-table th, .proj-table td { text-align: left; padding: 16px 18px; vertical-align: top; border-bottom: 1px solid var(--line); }
.proj-table thead th {
  font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-mute); background: var(--paper-soft); white-space: nowrap;
}
.proj-table tbody tr:last-child td { border-bottom: 0; }
.proj-table tbody tr:hover { background: var(--paper-soft); }
.proj-table .proj-place { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.proj-table .proj-result { color: var(--ink-soft); }
.proj-status {
  display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.proj-status--published { background: rgba(62,142,90,0.13); color: #2F7044; }
.proj-status--completed { background: rgba(43,108,163,0.12); color: var(--brand-navy); }
.proj-status--active { background: rgba(91,169,217,0.16); color: #1F6E92; }
.proj-status--planned { background: rgba(15,27,45,0.06); color: var(--ink-mute); }

@media (max-width: 760px) {
  .proj-table-wrap { overflow-x: visible; border: 0; background: transparent; }
  .proj-table { min-width: 0; }
  .proj-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .proj-table tbody tr {
    display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 6px 4px; margin-bottom: 16px;
  }
  .proj-table td { display: grid; grid-template-columns: 116px 1fr; gap: 12px; border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .proj-table tbody tr td:last-child { border-bottom: 0; }
  .proj-table td::before {
    content: attr(data-label); font-family: var(--font-display); font-weight: 800; font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-accent);
  }
}

/* ─────────────  §3 FAQ — native <details> accordion  ───────────── */

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq__item { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 22px 56px 22px 26px; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.4;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-weight: 400; font-size: 26px; color: var(--brand-accent); transition: transform .25s var(--ease);
  line-height: 1;
}
.faq__item[open] summary::after { content: '−'; }
.faq__item summary:hover { color: var(--brand-navy); }
.faq__item summary:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
.faq__a { padding: 0 26px 24px; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.faq__a p { margin: 0 0 12px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { color: var(--brand-navy); font-weight: 600; }

/* ============================================================
   Elevation pass (2026-07-01) — premium refinement per letter §2
   (1) refined benefit line-icons · (2) Gold as a *consistent*
   recognition / IP / measured-proof thread · (3) card depth &
   hairline. No text/i18n changes; WCAG AA re-audited.
============================================================ */

:root{
  --shadow-card:     0 1px 2px rgba(4,81,132,0.05), 0 14px 30px -20px rgba(4,81,132,0.20);
  --shadow-card-hov: 0 2px 6px rgba(4,81,132,0.07), 0 34px 64px -28px rgba(4,81,132,0.30);
}

/* (3) Depth & hairline — the “expensive” details (site-wide) */
.card{ box-shadow: var(--shadow-card); }
.card:hover{ box-shadow: var(--shadow-card-hov); }
.pillar, .flow__step, .step, .sources-block, .faq__item, .proj-table-wrap{ box-shadow: var(--shadow-card); }

/* (2) Benefit icons — refined line-icon system.
   The ↓ ↑ − ∞ / ↳ glyphs are swapped for inline <svg> in markup (index +
   applications only — numbered / year / SDG discs are intentional labels and
   keep the original accent→navy disc, which holds AA for their white text). */
.card__icon svg{
  width: 26px; height: 26px;
  fill: none; stroke: #fff; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* (1) GOLD — consistent recognition / IP / validation thread.
   Reserved for recognition, awards, IP and measured-proof surfaces — never
   body copy. gold-ink 5.3:1 on light · gold-bright 4.9:1 on navy (WCAG AA). */
.recognition .section__head::after{
  content:''; display:block; width:66px; height:2px; margin:24px auto 0;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius:2px;
}
.recognition .section__head--left::after{ margin-left:0; margin-right:auto; }
.recognition .card__kicker,
.is-recognition .card__kicker{ display:inline-flex; align-items:center; gap:8px; }
.recognition .card__kicker::before,
.is-recognition .card__kicker::before{
  content:''; width:9px; height:9px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--gold), var(--gold-bright));
  border-radius:0 50% 50% 50%; transform:rotate(45deg);
}
/* 2nd surface: measured-credibility / validation dark bands (opt-in class) */
.section--dark.is-credit .eyebrow{ color: var(--gold-bright); }
.section--dark.is-credit .eyebrow::before{ background:linear-gradient(135deg, var(--gold-bright), #F0DCA0); }
.section--dark.is-credit .section__head::after{
  content:''; display:block; width:66px; height:2px; margin:24px auto 0;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius:2px;
}

/* ============================================================
   Session 13 (2026-07-01) — extend the s12 hero language to the
   inner pages: monumental page-hero type, gold key figures on
   stat numerals, gold "measured result" markers (sector cards,
   trials ledger), CTA-banner depth. No copy changes.
============================================================ */

/* (1) Page-hero type — weight / scale aligned with the s12 heroes.
   vh-capped so long titles still fit the first screen at ~768px tall. */
.page-hero h1 {
  font-size: clamp(38px, min(5.6vw, 8.4vh), 76px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.02em;
}

/* (2) Gold key figures — the % / unit suffix reads as the measured part
   (same treatment as the s12 hero glass stats). gold-ink 5.3:1 on light,
   gold-bright 4.9:1 on navy (WCAG AA). */
.stat .num .suffix { color: var(--gold-ink); }
/* on dark, gold marks OUR measured proof only (.is-credit) — problem-scale
   stats (e.g. data-centers "AI's water demand") keep the water gradient */
.section--dark.is-credit .stat .num .suffix {
  color: var(--gold-bright);
  /* the dark .num paints a bg-clip:text gradient — re-fill the suffix */
  -webkit-text-fill-color: var(--gold-bright);
}

/* (3) Sector cards — the RESULT row is the measured-proof line */
.sector-card__meta li:last-child .sector-card__k { color: var(--gold-ink); }

/* (4) Trials table — ledger top rule (gold = measured field proof),
   same device as the s12 term-sheet card */
.proj-table-wrap { border-top: 3px solid var(--gold); }

/* (5) CTA banner — anchor the navy panel with the s12 card depth */
.cta-banner { box-shadow: 0 40px 84px -36px rgba(4, 81, 132, 0.42); }

/* (6) Tag pills — hairline border (premium detail) */
.tag { border: 1px solid rgba(43, 108, 163, 0.16); }
.section--dark .tag,
.card--feature .tag { border-color: rgba(255, 255, 255, 0.22); }

/* ============================================================
   Session 14 (2026-07-02) — privacy note + subtle motion pass.
   All new motion is ONE-SHOT, triggered by .is-revealed only
   (no new default-hidden state → an observer misfire can never
   leave a section invisible) and gated behind
   prefers-reduced-motion: no-preference.
============================================================ */

/* Privacy note — honest: the site sets no tracking cookies at all */
.privacy-note {
  position: fixed; left: 20px; bottom: 20px; z-index: 90;
  max-width: 400px;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px 14px 18px;
  background: rgba(6, 28, 47, 0.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(2, 20, 38, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--easeOut), transform .5s var(--easeOut);
}
.privacy-note.is-in { opacity: 1; pointer-events: auto; }
.privacy-note__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
.privacy-note__text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.privacy-note__ok {
  flex: none; padding: 9px 20px; border: 0; border-radius: 999px;
  background: #fff; color: var(--brand-navy);
  font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.privacy-note__ok:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(2, 20, 38, 0.3); }
@media (max-width: 560px) {
  .privacy-note { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .privacy-note { transform: translateY(14px); }
  .privacy-note.is-in { transform: none; }

  /* (a) sibling cascade in card grids — only delays the existing reveal */
  .grid > [data-reveal]:nth-child(2) { transition-delay: .08s; }
  .grid > [data-reveal]:nth-child(3) { transition-delay: .16s; }
  .grid > [data-reveal]:nth-child(4) { transition-delay: .24s; }
  .grid > [data-reveal]:nth-child(n + 5) { transition-delay: .3s; }

  /* (b) key figures rise one after another once their strip reveals */
  .app-stats.is-revealed .stat { animation: s14-rise .65s var(--easeOut) backwards; }
  .app-stats.is-revealed .stat:nth-child(2) { animation-delay: .12s; }
  .app-stats.is-revealed .stat:nth-child(3) { animation-delay: .24s; }

  /* (c) checklists cascade item by item */
  .is-revealed .checks li { animation: s14-rise .5s var(--easeOut) backwards; }
  .is-revealed .checks li:nth-child(2) { animation-delay: .07s; }
  .is-revealed .checks li:nth-child(3) { animation-delay: .14s; }
  .is-revealed .checks li:nth-child(4) { animation-delay: .21s; }
  .is-revealed .checks li:nth-child(n + 5) { animation-delay: .28s; }

  /* (d) photos settle from a light zoom as their card reveals
     (one-shot animation → the CSS hover zoom keeps its own timing) */
  .is-revealed .card__img { animation: s14-settle 1.1s var(--easeOut); }

  /* (e) gold hairline draws in under credibility heads (.is-credit) */
  .section__head.is-revealed::after { animation: s14-draw .8s var(--easeOut) .25s backwards; }

  @keyframes s14-rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes s14-settle { from { transform: scale(1.045); } }
  @keyframes s14-draw { from { transform: scaleX(0); } }
}

/* ─── Session 17 — word-length stat values (e.g. "Long service life") ─── */
.stat .num.num--word {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
}

/* ─── Session 20 — directional stat arrows (Thomas, 2026-07-09: the +/− glued
   to a range reads as "plus 5, minus 15" — replace signs with up/down arrows) ─── */
.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;
}
.num .dir {
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.06em;
  vertical-align: 0.02em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Session 21 (2026-07-09) — Recognition logo wall (Thomas:
   "insert some logos i.e Solar Impulse, EY-MB100, NCPD").
   Sits under the Recognition & IP cards on the home page.
   ============================================================ */
.logo-wall {
  list-style: none;
  margin: 56px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid rgba(43, 108, 163, 0.16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 48px;
}
.logo-wall li { display: flex; align-items: center; }
.logo-wall img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
@media (max-width: 560px) {
  .logo-wall { gap: 20px 28px; }
  .logo-wall img { height: 38px; max-width: 150px; }
}