/* ============================================================
   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;

  /* 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 { 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 {
  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;
  }
  .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 expands inline on mobile */
  .nav__group { flex-direction: column; align-items: flex-start; width: 100%; gap: 14px; }
  .nav__caret { display: none; }
  .nav__group::after { display: none; }
  .nav__dropdown {
    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: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;
  }
  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__caret { display: none; }
  html[lang="fr"] .nav__group::after { display: none; }
  html[lang="fr"] .nav__dropdown {
    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__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;
  align-items: center;
  padding: 112px 0 64px;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px circle at 80% 10%, rgba(91, 169, 217, 0.35), transparent 60%),
    radial-gradient(700px circle at 20% 90%, rgba(43, 108, 163, 0.55), transparent 65%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 880px) {
  .hero {
    align-items: flex-start;
    min-height: auto;
    padding: 100px 0 56px;
  }
  .hero__grid { grid-template-columns: 1fr; }
}

.hero__copy { position: relative; z-index: 2; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.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;
}

.hero__visual {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  border-radius: 50%;
  overflow: visible;
}
@media (max-width: 880px) {
  .hero__visual { max-width: 360px; margin: 0 auto; }
}

.hero__drop {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background-image: url('../img/lotus-leaf.jpg');
  background-size: cover;
  background-position: center 35%;
  box-shadow:
    inset 0 -30px 60px rgba(3, 64, 107, 0.55),
    inset 0 20px 60px rgba(255, 255, 255, 0.12),
    0 50px 120px -30px rgba(0, 0, 0, 0.55),
    0 0 0 14px rgba(255, 255, 255, 0.06),
    0 0 0 28px rgba(255, 255, 255, 0.04);
  filter: saturate(1.05) contrast(1.05);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
}

.hero__drop::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.4) 0%, transparent 35%),
    linear-gradient(135deg, rgba(91, 169, 217, 0.18) 0%, transparent 50%, rgba(4, 81, 132, 0.35) 100%);
  pointer-events: none;
}

.hero__drop::after {
  content: '';
  position: absolute;
  top: 18%; left: 22%;
  width: 22%; height: 14%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(8px);
}

.hero__stat {
  position: absolute;
  background: rgba(255, 255, 255, 0.97);
  color: var(--brand-navy);
  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--a { top: 8%; right: -8%; }
.hero__stat--b { bottom: 6%; left: -10%; }
.hero__stat .num { font-size: 28px; font-weight: 800; line-height: 1; color: var(--brand-navy); }
.hero__stat .label { font-size: 12px; color: var(--ink-soft); margin-top: 4px; letter-spacing: 0.05em; text-transform: uppercase; }

@media (max-width: 880px) {
  .hero__stat--a { right: 0%; }
  .hero__stat--b { left: 0%; }
}

/* ─────────────  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 .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  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 I — magnetic card override (disables :hover translate for magnetic cards) */
.card[data-magnetic] { transition: transform .22s var(--easeOut), box-shadow .3s var(--ease); }
.card[data-magnetic]:hover { transform: none; }
.card[data-magnetic].is-magnetic-active { transition: transform .08s linear, box-shadow .3s var(--ease); }

/* 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) */
.dc-hero {
  position: relative;
  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: 150px 0 clamp(64px, 8vw, 100px);
}
.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; }
.dc-hero__head { max-width: 800px; margin-bottom: clamp(40px, 5vw, 60px); }
.dc-hero h1 { color: #fff; font-size: clamp(34px, 5vw, 62px); margin: 16px 0 18px; }
.dc-hero .lead { color: rgba(255,255,255,0.86); max-width: 60ch; }
.dc-hero .eyebrow { color: var(--brand-cyan-soft); }

/* 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 diagram */
.wsflow__chain { display: flex; align-items: stretch; gap: 0; }
@media (max-width: 820px) { .wsflow__chain { flex-direction: column; } }
.wsnode {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 22px 20px;
}
.wsnode__n { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; color: var(--brand-cyan-soft); }
.wsnode__t { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; margin: 9px 0 5px; }
.wsnode__s { display: block; font-size: 13.5px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.wsnode--accent { background: linear-gradient(135deg, rgba(91,169,217,0.24), rgba(43,108,163,0.18)); border-color: rgba(91,169,217,0.55); }
.wsflow__arrow {
  flex: 0 0 auto; align-self: center;
  color: var(--brand-cyan); font-size: 22px; font-weight: 700;
  padding: 0 12px;
}
@media (max-width: 820px) { .wsflow__arrow { transform: rotate(90deg); padding: 10px 0; align-self: center; } }
.wsflow__return {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding: 18px 24px;
  border-radius: 14px;
  background: rgba(91,169,217,0.12);
  border: 1px dashed rgba(91,169,217,0.55);
  color: rgba(255,255,255,0.9); font-size: 15.5px; 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 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.dc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; 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: 13.5px; color: #fff;
}
.dc-chip b { color: var(--brand-cyan-soft); font-weight: 800; }

/* 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));
}

/* ── 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 + breathing meniscus ring ── */
.hero__video { animation: kenburns 24s var(--ease) infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.hero__visual::before {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  animation: ring-breathe 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ring-breathe {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.045); opacity: .2; }
}

/* ── 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__video,
  .hero__visual::before,
  .pillars__bridge::after { animation: none; }
}