/* ==========================================================================
   Pii-Maleng "Clear Water" theme
   Loaded last on every page. It only changes look and feel: colour accents,
   depth, shape and motion. Content, layout and the light/dark switch are
   untouched, and everything reads the same tokens as the rest of the site.
   Same font family throughout (Plus Jakarta Sans).
   ========================================================================== */
:root {
  --grad: linear-gradient(135deg, #0872b4 0%, #0b8f9c 55%, #16a34a 100%);
  --grad-text: linear-gradient(90deg, #0872b4, #0f9d8a 60%, #16a34a);
  --radius: 20px;
  --glow: 0 10px 30px rgba(8, 114, 180, 0.18);
  --shadow-sm: 0 1px 2px rgba(11, 34, 54, 0.04), 0 10px 28px rgba(8, 82, 130, 0.08);
  --shadow: 0 2px 6px rgba(11, 34, 54, 0.05), 0 22px 54px rgba(8, 82, 130, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] {
  --grad-text: linear-gradient(90deg, #4fb3f0, #2dd4bf 60%, #6ee7a0);
  --glow: 0 10px 30px rgba(79, 179, 240, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grad-text: linear-gradient(90deg, #4fb3f0, #2dd4bf 60%, #6ee7a0);
    --glow: 0 10px 30px rgba(79, 179, 240, 0.2);
  }
}

::selection {
  background: rgba(15, 157, 138, 0.28);
}

/* Slim branded scrollbar */
html {
  scrollbar-color: #0b8f9c transparent;
  scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 var(--line);
}

.site-header.scrolled {
  box-shadow: 0 10px 30px rgba(8, 82, 130, 0.12);
}

.nav-menu a {
  position: relative;
}

@media (min-width: 901px) {
  .nav-menu a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }

  .nav-menu a:not(.nav-cta):hover::after,
  .nav-menu a.is-current::after,
  .nav-menu a[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

.nav-menu .nav-cta {
  background: var(--grad);
  box-shadow: var(--glow);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn.primary {
  background: var(--grad);
  box-shadow: var(--glow);
}

.btn.primary:hover {
  background: var(--grad);
  filter: brightness(1.07) saturate(1.1);
  box-shadow: 0 16px 36px rgba(8, 114, 180, 0.3);
}

.btn-solar {
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.32);
}

/* --------------------------------------------------------------------------
   Hero: depth, a gradient headline and a wave into the next section
   -------------------------------------------------------------------------- */
.hero::before {
  background:
    radial-gradient(ellipse at 15% 90%, rgba(22, 163, 74, 0.28), transparent 55%),
    linear-gradient(100deg, rgba(3, 21, 36, 0.92) 0%, rgba(6, 56, 90, 0.78) 55%, rgba(8, 114, 180, 0.35) 100%);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  height: clamp(36px, 6vw, 72px);
  background: var(--section-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 34C200 66 420 4 700 26s560 36 740-8V64H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 34C200 66 420 4 700 26s560 36 740-8V64H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.hero h1 {
  letter-spacing: -0.04em;
  text-shadow: 0 2px 30px rgba(3, 21, 36, 0.35);
}

.hero .accent {
  background: linear-gradient(90deg, #7dd3fc, #5eead4 55%, #86efac);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.hero-inner {
  padding-bottom: clamp(88px, 10vw, 120px);
}

.hero-status span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-status span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.25);
}

.hero-status span:last-child::before {
  background: #fcd34d;
  box-shadow: 0 0 0 4px rgba(252, 211, 77, 0.25);
}

/* --------------------------------------------------------------------------
   Section headings and eyebrows
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad);
}

.section-head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 18px;
  border-radius: 4px;
  background: var(--grad);
}

.section.muted {
  background: linear-gradient(180deg, var(--section-muted) 0%, var(--page) 140%);
}

/* --------------------------------------------------------------------------
   Cards: soft depth, a lift on hover and a gradient edge
   -------------------------------------------------------------------------- */
.card,
.stats article,
.ps-card,
.growth-tile,
.metric-card,
.pathway,
.resource-card,
.sector-card,
.news-item,
.post-card,
.faq-item,
.carbon-block,
.icon-grid li,
.risk-grid li,
.biz-cycle li,
.rm-step {
  border-color: var(--line);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.card:hover,
.sector-card:hover,
.news-item:hover,
.post-card:hover,
.resource-card:hover,
.growth-tile:hover,
.biz-cycle li:hover,
.rm-step:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(15, 157, 138, 0.45);
}

.stats.dashboard article {
  position: relative;
  overflow: hidden;
  border-top-width: 1px;
}

.stats.dashboard article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad);
}

.stats span[data-count],
.stats .stat-static {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon,
.ig-ico,
.climate-icon,
.ps-ico,
.cycle-num {
  background-image: linear-gradient(135deg, rgba(8, 114, 180, 0.12), rgba(22, 163, 74, 0.14));
}

.sector-source,
.news-item time,
.post-tag {
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   Dark bands: a quiet ripple pattern
   -------------------------------------------------------------------------- */
.why-section,
.contact-section {
  position: relative;
  overflow: hidden;
}

.why-section::before,
.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, transparent 0 120px, rgba(125, 211, 252, 0.07) 121px 123px, transparent 124px 200px, rgba(125, 211, 252, 0.05) 201px 203px, transparent 204px),
    radial-gradient(circle at 92% 82%, transparent 0 160px, rgba(134, 239, 172, 0.07) 161px 163px, transparent 164px 260px, rgba(134, 239, 172, 0.05) 261px 263px, transparent 264px);
  pointer-events: none;
}

.why-section > .container,
.contact-section > .container {
  position: relative;
}

.why-card {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------------
   Imagery, forms and the footer
   -------------------------------------------------------------------------- */
.card-media-img,
.gallery-item img,
.photo-panel img,
.article-hero-img,
.post-card img {
  filter: saturate(1.06) contrast(1.02);
}

.gallery-item button,
.gallery-item img,
.photo-panel,
.map-module,
.video-feature,
.chart-card,
.pii-card {
  border-radius: var(--radius);
}

.contact-form {
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #0b8f9c;
}

.footer {
  position: relative;
  background: linear-gradient(180deg, #04202f 0%, var(--footer-bg) 100%);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad);
}

.back-to-top {
  background: var(--grad);
  box-shadow: var(--glow);
}

.page-hero {
  position: relative;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--grad);
}

.scroll-progress {
  height: 4px;
  background: var(--grad);
}

/* A touch more air on large screens */
@media (min-width: 1280px) {
  :root {
    --gap: 28px;
    --pad-card: 32px;
  }
}

@media (max-width: 640px) {
  .hero-inner {
    padding-bottom: 80px;
  }

  .section-head h2::after {
    width: 44px;
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) {
  .card:hover,
  .sector-card:hover,
  .news-item:hover,
  .post-card:hover,
  .resource-card:hover,
  .growth-tile:hover,
  .biz-cycle li:hover,
  .rm-step:hover {
    transform: none;
  }
  }
}

@media print {
  .hero::after,
  .why-section::before,
  .contact-section::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Partner logos: every logo sits on a white tile so dark marks stay readable
   in both colour themes
   -------------------------------------------------------------------------- */
.partner-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--gap);
}

.partner-card {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

a.partner-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(15, 157, 138, 0.45);
}

.partner-card img,
.partner-initials {
  display: block;
  width: 100%;
  height: 112px;
  padding: 20px 24px;
  border-radius: 0;
  background: #ffffff;
  object-fit: contain;
  border-bottom: 1px solid var(--line);
}

.partner-card img[src$="pum-netherlands-senior-experts.png"],
.partner-card img[src$="ministry-of-water-and-environment-uganda.png"] {
  padding: 14px;
}

.partner-initials {
  display: grid;
  place-items: center;
  font-size: var(--fs-heading-2);
  color: #0872b4;
}

.partner-text {
  display: block;
  padding: 16px 20px 20px;
}

.partner-text strong {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 800;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Clarity pass: stronger text colours, firmer weights, clearer sizes
   -------------------------------------------------------------------------- */
:root {
  --ink: #06192a;
  --text: #17303f;
  --muted: #3b566a;
  --eyebrow: #0a6a3a;
}

:root[data-theme="dark"] {
  --ink: #f2f8fc;
  --text: #dbe8f1;
  --muted: #b3c8d6;
  --eyebrow: #86efac;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2f8fc;
    --text: #dbe8f1;
    --muted: #b3c8d6;
    --eyebrow: #86efac;
  }
}

body {
  font-weight: 400;
}

h1,
h2 {
  font-weight: 800;
  color: var(--ink);
}

h3,
h4 {
  font-weight: 800;
  color: var(--ink);
}

h2 {
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);
  line-height: 1.1;
}

/* Section introductions read as clear lead text, not faint grey */
.section-head p:not(.eyebrow) {
  color: var(--text);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.why-section .section-head p:not(.eyebrow) {
  color: #d6e8f3;
}

/* Card copy: darker, and one step larger than before */
.card p,
.pathway p,
.resource-card p,
.rm-step p,
.risk-grid p,
.climate-icons p,
.news-item p,
.sector-card p:not(.sector-source),
.carbon-steps span:not(.cycle-num),
.biz-cycle span:not(.cycle-num),
.icon-grid li > span:last-child,
.pii-features span,
.growth-sub,
.faq-answer p,
.post-card p,
.channel-list span:not(.data-label) {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}

.biz-cycle li:last-child span:not(.cycle-num) {
  color: #ffffff;
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--eyebrow);
}

.hero .eyebrow,
.why-section .eyebrow,
.contact-section .eyebrow,
.page-hero .eyebrow {
  color: #a5f3fc;
}

/* Labels and figures */
.stats p {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
}

.stat-basis,
.dash-updated,
.fine-print,
.field-note,
.chart-sub,
.chart-footnote {
  color: var(--muted);
  font-size: var(--fs-small);
}

.stats span[data-count],
.stats .stat-static {
  font-size: clamp(2.2rem, 1.7rem + 1.8vw, 3rem);
  font-weight: 800;
}

.card strong,
.pii-features strong,
.channel-list strong,
.icon-grid strong,
.pay-step strong,
.carbon-steps strong,
.biz-cycle strong,
.climate-icons strong,
.why-list strong {
  font-weight: 800;
  color: var(--ink);
}

.why-list strong,
.why-card h3 {
  color: #ffffff;
}

.why-list li,
.why-card > p,
.why-foot {
  color: #e1eef6;
  font-size: 1rem;
}

.btn {
  font-weight: 800;
  letter-spacing: 0.005em;
}

.nav-menu a {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}

.nav-menu .nav-cta {
  color: #ffffff;
}

.brand strong {
  font-size: 1.2rem;
  color: var(--ink);
}

.brand small {
  color: var(--muted);
  font-weight: 700;
}

.data-label,
.growth-pill,
.status-open,
.status-closed {
  font-size: 0.75rem;
  font-weight: 800;
}

.hero .lead-light {
  color: #f1f8fc;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 600;
}

.footer,
.footer p,
.footer-links a {
  color: #dcecf6;
}

.footer-tagline {
  color: #9fd3ee;
}

/* --------------------------------------------------------------------------
   Contact form: a calm, structured card
   -------------------------------------------------------------------------- */
.contact-form {
  padding: clamp(24px, 3vw, 40px);
  border-radius: 24px;
  border-top: 5px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 30px 70px rgba(2, 20, 34, 0.35);
}

.contact-form label {
  margin-bottom: 0;
  font-size: inherit;
}

.form-head h3 {
  font-size: var(--fs-heading-2);
}

.form-head p {
  margin: 8px 0 26px;
  color: var(--muted);
  font-size: var(--fs-small);
}

.contact-section .form-head p {
  color: var(--muted);
}

.contact-form .field,
.contact-form .consent {
  display: block;
  margin: 0 0 20px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}

.field-label,

.field-label abbr {
  color: #c2410c;
  text-decoration: none;
}

.contact-form .optional {
  color: var(--muted);
  font-weight: 600;
}

.contact-form input:not([type="radio"]):not([type="checkbox"]),
.contact-form select,
.contact-form textarea {
  margin-top: 0;
  padding: 14px 16px;
  border: 1.5px solid #b9cdda;
  border-radius: 14px;
  background: var(--surface);
  font-size: 1rem;
  font-weight: 500;
}

:root[data-theme="dark"] .contact-form input:not([type="radio"]):not([type="checkbox"]),
:root[data-theme="dark"] .contact-form select,
:root[data-theme="dark"] .contact-form textarea {
  border-color: #2d4e66;
}

.contact-form input:not([type="radio"]):not([type="checkbox"]):hover,
.contact-form select:hover,
.contact-form textarea:hover {
  border-color: #0b8f9c;
}

.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230872b4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.contact-form textarea {
  min-height: 140px;
  line-height: 1.55;
}

.contact-form [aria-invalid="true"] {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.05);
}

.field-error {
  display: block;
  margin-top: 6px;
  color: #dc2626;
  font-size: var(--fs-small);
  font-weight: 700;
}

:root[data-theme="dark"] .field-error {
  color: #fca5a5;
}









.contact-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
}

.consent input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: #0872b4;
}

.consent a {
  color: var(--blue);
  font-weight: 700;
}

.consent .field-error {
  flex-basis: 100%;
}

.form-submit {
  width: 100%;
  min-height: 54px;
  font-size: 1.0625rem;
}

.contact-form .form-status {
  min-height: 1.5em;
  margin-top: 14px;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: center;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Compact rhythm: tighter spacing and calmer sizes so the story flows
   ========================================================================== */
:root {
  --space-section: clamp(48px, 6vw, 80px);
  --space-head: clamp(24px, 3vw, 36px);
  --gap: 20px;
  --pad-card: 24px;
  --fs-title: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --fs-heading-2: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --fs-heading-3: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
}

@media (min-width: 1280px) {
  :root {
    --gap: 24px;
    --pad-card: 28px;
  }
}

html {
  scroll-padding-top: 72px;
}

h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  line-height: 1.12;
}

.section-head h2::after {
  width: 44px;
  height: 3px;
  margin-top: 14px;
}

.section-head {
  max-width: 760px;
}

.section-head p:not(.eyebrow) {
  font-size: var(--fs-lead);
  max-width: 62ch;
}

p {
  margin-top: 12px;
}

/* Less chrome around cards */
.card,
.stats article,
.growth-tile,
.metric-card,
.pathway,
.sector-card,
.news-item,
.carbon-block,
.chart-card,
.pii-copy,
.why-card {
  padding: var(--pad-card);
}

.card-media {
  padding: 0;
}

.stats p {
  font-size: 1rem;
}

.stats span[data-count],
.stats .stat-static {
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
}

.hero {
  min-height: min(calc(100vh - var(--header-h)), 720px);
}

.hero-inner {
  padding-block: 56px;
  padding-bottom: clamp(80px, 9vw, 104px);
}

.hero .lead-light {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

.map-frame-wrap {
  height: 480px;
}

.pii-copy {
  padding: var(--pad-card);
}

/* Single, wide "why" card */
.why-grid {
  grid-template-columns: minmax(0, 1fr);
}

.why-card {
  max-width: 860px;
}

.why-cta {
  justify-content: flex-start;
  margin-top: var(--gap);
}

/* Careers */
.career-card {
  display: flex;
  flex-direction: column;
}

.career-card h3 {
  margin-top: 6px;
}

.career-card .tick-list {
  margin-top: 14px;
}

.career-tag {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.career-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

/* Partners and sector bodies: name as text on a tab, logo only where it is a symbol */
.partner-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.partner-card img,
.partner-initials {
  height: 96px;
}

.partner-initials span {
  padding: 0 14px;
  color: #0a4d7a;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
}

.partner-text {
  padding: 12px 16px 16px;
}

.partner-text strong {
  font-size: 0.875rem;
}

.sector-grid {
  gap: 16px;
}

.sector-card {
  padding: 0;
  overflow: hidden;
}

.sector-source {
  display: grid;
  place-items: center;
  min-height: 72px;
  margin: 0;
  padding: 0 16px;
  background: linear-gradient(135deg, #06385a, #0a6a8c);
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: center;
}

.sector-card h3,
.sector-card p:not(.sector-source),
.sector-card a {
  margin-inline: 20px;
}

.sector-card h3 {
  margin-top: 16px;
}

.sector-card a {
  padding-bottom: 20px;
}

/* Mobile action bar: the three things a visitor most often wants to do */
.action-bar {
  display: none;
}

@media (max-width: 760px) {
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(8, 82, 130, 0.14);
  }

  .action-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 800;
    text-decoration: none;
  }

  .action-bar .action-give {
    border-color: transparent;
    background: var(--grad);
    color: #ffffff;
  }

  body {
    padding-bottom: 72px;
  }

  .back-to-top {
    bottom: 84px;
  }

  .map-frame-wrap {
    height: 420px;
  }
}

.form-alt {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--fs-small);
  text-align: center;
}

.form-alt a {
  color: var(--blue);
  font-weight: 700;
}

.profile-actions {
  margin: 20px 0 0;
}

.profile .fact-table th {
  width: 55%;
}

@media print {
  .site-header,
  .footer,
  .action-bar,
  .back-to-top,
  .profile-actions,
  .scroll-progress {
    display: none !important;
  }

  .page-hero {
    padding: 12px 0;
    background: none !important;
    color: #000 !important;
  }

  .page-hero h1,
  .page-hero .lead,
  .page-hero .eyebrow,
  .breadcrumb,
  .breadcrumb a {
    color: #000 !important;
  }

  .page-hero::after {
    display: none;
  }

  body {
    font-size: 11pt;
  }

  .article-body h2 {
    font-size: 14pt;
    margin-top: 14pt;
  }
}

/* ==========================================================================
   Small details: drops, ripples, waves, kiosk photos, a rising water level
   ========================================================================== */

/* Raindrops drifting down the hero */
.hero-drops {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-drops i {
  position: absolute;
  top: -30px;
  width: 10px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, rgba(186, 230, 253, 0.9), rgba(56, 189, 248, 0.55));
  opacity: 0;
  animation: dropFall 9s linear infinite;
}

.hero-drops i:nth-child(1) { left: 6%;  animation-delay: 0s;   animation-duration: 8s; }
.hero-drops i:nth-child(2) { left: 14%; animation-delay: 2.2s; animation-duration: 10s; }
.hero-drops i:nth-child(3) { left: 23%; animation-delay: 4.6s; animation-duration: 9s; }
.hero-drops i:nth-child(4) { left: 33%; animation-delay: 1.1s; animation-duration: 11s; }
.hero-drops i:nth-child(5) { left: 44%; animation-delay: 3.4s; animation-duration: 8.5s; }
.hero-drops i:nth-child(6) { left: 55%; animation-delay: 5.8s; animation-duration: 10s; }
.hero-drops i:nth-child(7) { left: 66%; animation-delay: 0.7s; animation-duration: 9.5s; }
.hero-drops i:nth-child(8) { left: 77%; animation-delay: 2.9s; animation-duration: 12s; }
.hero-drops i:nth-child(9) { left: 86%; animation-delay: 4.1s; animation-duration: 8s; }
.hero-drops i:nth-child(10) { left: 94%; animation-delay: 6.3s; animation-duration: 10.5s; }

@keyframes dropFall {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.85; }
  85% { opacity: 0.6; }
  100% { transform: translateY(105vh); opacity: 0; }
}

/* Kiosk photos pinned to the hero, like prints on a notice board */
.hero-photos {
  position: absolute;
  right: max(24px, calc((100% - 1200px) / 2));
  top: 50%;
  z-index: 2;
  width: min(34%, 400px);
  transform: translateY(-50%);
}

.hero-photo {
  margin: 0;
  padding: 10px 10px 8px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 24px 50px rgba(2, 20, 34, 0.45);
}

.hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}

.hero-photo figcaption {
  padding-top: 8px;
  color: #17303f;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
}

.hero-photo.hp-1 {
  width: 86%;
  transform: rotate(-3deg);
}

.hero-photo.hp-2 {
  width: 72%;
  margin: -34px 0 0 auto;
  transform: rotate(3deg);
}

@media (max-width: 1100px) {
  .hero-photos {
    display: none;
  }
}

/* Eyebrow marker becomes a water drop */
.eyebrow::before {
  width: 10px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--grad);
}

/* A drop watermark in each result card */
.stats.dashboard article::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 38px;
  height: 52px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(22, 163, 74, 0.14));
  pointer-events: none;
}

/* Wave edges on the two dark bands */
.why-section::after,
.contact-section::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: clamp(28px, 4vw, 52px);
  background: var(--page);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V28C1200 62 960 0 720 28S240 60 0 24Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V28C1200 62 960 0 720 28S240 60 0 24Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
  pointer-events: none;
}

.why-section,
.contact-section {
  padding-top: calc(var(--space-section) + 20px);
}

/* Ripple where a button is pressed */
.btn {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  animation: ripple 0.7s ease-out forwards;
}

@keyframes ripple {
  to { transform: scale(24); opacity: 0; }
}

/* The back-to-top button fills like a tank as the visitor scrolls */
.back-to-top {
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: linear-gradient(0deg, #16a34a 0%, #0872b4 var(--p, 0%), #0b3d5c var(--p, 0%), #0b3d5c 100%);
}

/* Climate illustration */
.climate-art {
  max-width: 820px;
  margin: 0 0 var(--gap);
  padding: 0;
}

.climate-art svg {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.climate-art figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--fs-small);
}

.art-sun {
  transform-origin: 86px 62px;
  animation: spin 40s linear infinite;
}

.art-cloud {
  animation: drift 9s ease-in-out infinite alternate;
}

.art-rain path {
  animation: rain 1.3s linear infinite;
}

.art-rain .r2 { animation-delay: 0.3s; }
.art-rain .r3 { animation-delay: 0.6s; }
.art-rain .r4 { animation-delay: 0.9s; }

.art-flow {
  animation: flow 1.2s linear infinite;
}

.art-level {
  animation: level 5s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center bottom;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(14px); } }
@keyframes rain { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@keyframes flow { to { stroke-dashoffset: -20; } }
@keyframes level { from { transform: scaleY(0.6); } to { transform: scaleY(1); } }

/* Footer: a thin wave of water above the logo */
.footer::before {
  height: 5px;
  background: linear-gradient(90deg, #0872b4, #38bdf8, #16a34a, #38bdf8, #0872b4);
  background-size: 200% 100%;
  animation: shimmer 8s linear infinite;
}

@keyframes shimmer { to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) {
  .hero-drops,
  .art-sun,
  .art-cloud,
  .art-rain path,
  .art-flow,
  .art-level,
  .footer::before,
  .ripple {
    animation: none !important;
  }

  .hero-drops {
    display: none;
  }
  }
}

@media print {
  .hero-drops,
  .hero-photos,
  .climate-art {
    display: none !important;
  }
}

/* ==========================================================================
   Premium layer: marquees, card spotlight and tilt, staggered reveals
   ========================================================================== */

/* The hero wave now melts into the dark facts ticker below it */
.hero::after {
  background: var(--band);
}

/* Marquees */
.marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee ul {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.ticker {
  background: var(--band);
  color: #e4f1f9;
  -webkit-mask: none;
  mask: none;
}

.ticker .marquee-track {
  animation-duration: 55s;
}

.ticker li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
}

.ticker li::after {
  content: "";
  width: 7px;
  height: 10px;
  margin-left: 28px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: #38bdf8;
  opacity: 0.8;
}

.ticker strong {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 800;
}

.names {
  margin-bottom: var(--space-head);
}

.names li {
  padding: 10px 26px;
  margin-right: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

/* Soft glow that follows the pointer over cards */
.card:hover,
.pathway:not(.pathway-feature):hover,
.sector-card:hover,
.stats article:hover,
.growth-tile:hover {
  background-image: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(56, 189, 248, 0.14), transparent 45%);
}

/* Staggered entrance for items inside a revealed block */
.js .reveal.visible > .card,
.js .reveal.visible > .stats article,
.js .reveal.visible > .pathway,
.js .reveal.visible > .sector-card,
.js .reveal.visible > .growth-tile,
.js .reveal.visible > li,
.js .reveal.visible > .news-item,
.js .reveal.visible > .post-card {
  animation: rise 0.7s var(--ease) backwards;
}

.js .reveal.visible > :nth-child(2) { animation-delay: 0.08s; }
.js .reveal.visible > :nth-child(3) { animation-delay: 0.16s; }
.js .reveal.visible > :nth-child(4) { animation-delay: 0.24s; }
.js .reveal.visible > :nth-child(5) { animation-delay: 0.32s; }
.js .reveal.visible > :nth-child(6) { animation-delay: 0.4s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* A quiet cue that the page continues */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(52px, 7vw, 86px);
  z-index: 3;
  display: block;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  transform: translateX(-50%);
}

.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 5px;
  height: 9px;
  margin-left: -2.5px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: #7dd3fc;
  animation: cue 1.8s ease-in-out infinite;
}

@keyframes cue {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px); }
}

@media (max-width: 900px), (max-height: 640px) {
  .scroll-cue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) {
  .marquee {
    -webkit-mask: none;
    mask: none;
  }

  .marquee-track {
    width: auto;
    flex-wrap: wrap;
    animation: none;
  }

  .marquee ul[aria-hidden="true"],
  .scroll-cue {
    display: none;
  }

  .marquee ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .scroll-cue span,
  .js .reveal.visible > * {
    animation: none !important;
  }
  }
}

@media print {
  .marquee,
  .scroll-cue {
    display: none !important;
  }
}

/* Partner tabs in the marquee */
.names li {
  padding: 0;
  margin-right: 14px;
  border: 0;
  background: none;
  box-shadow: none;
}

.partner-tab {
  display: grid;
  place-items: center;
  min-width: 150px;
  height: 72px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  color: #0a4d7a;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

a.partner-tab:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 157, 138, 0.5);
  box-shadow: var(--shadow);
}

.partner-tab img {
  width: auto;
  max-width: 120px;
  height: 46px;
  object-fit: contain;
}
/* ==========================================================================
   FLUID DESIGN LAYER (replaces the earlier "squared", "loud" and "one system"
   passes). One idea, applied everywhere:

   - Shape: soft "droplet" corners (three round corners, one tighter), pill
     controls with NO outline, organic blob photos
   - Depth: layered soft shadows and glass, never boxed-in 2px borders
   - Water: translucent waves, ripples and drops that overlay the sections
   - Calm: no side dots, scroll cues, falling drops, number badges or bars
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --ocean-1: #052a43;
  --ocean-2: #06456a;
  --ocean-3: #0a7191;
  --aqua: #5fd0f5;
  --mint: #6fe7ae;
  --cta: #0f9f68;
  --cta-hover: #0b8656;
  --grad: linear-gradient(135deg, #0872b4 0%, #0e9aa7 58%, #12b571 100%);
  --grad-soft: linear-gradient(135deg, rgba(8, 114, 180, 0.12), rgba(18, 181, 113, 0.12));

  --radius: 28px;
  --radius-sm: 18px;
  --drop: 34px 34px 34px 10px;
  --drop-sm: 22px 22px 22px 8px;
  --blob-a: 58% 42% 55% 45% / 52% 46% 54% 48%;
  --blob-b: 44% 56% 40% 60% / 56% 44% 56% 44%;

  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --hair: 0 0 0 1px rgba(8, 82, 130, 0.07);
  --tint: rgba(8, 114, 180, 0.09);
  --shadow-sm: 0 1px 2px rgba(6, 50, 77, 0.04), 0 14px 34px -12px rgba(8, 82, 130, 0.2);
  --shadow: 0 2px 6px rgba(6, 50, 77, 0.05), 0 34px 70px -28px rgba(8, 82, 130, 0.4);
  --glow: 0 14px 34px -10px rgba(15, 159, 104, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] {
  --glass: rgba(14, 40, 60, 0.62);
  --glass-strong: rgba(14, 40, 60, 0.88);
  --hair: 0 0 0 1px rgba(150, 210, 245, 0.1);
  --tint: rgba(95, 208, 245, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -12px rgba(0, 0, 0, 0.55);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 34px 70px -28px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(14, 40, 60, 0.62);
    --glass-strong: rgba(14, 40, 60, 0.88);
    --hair: 0 0 0 1px rgba(150, 210, 245, 0.1);
    --tint: rgba(95, 208, 245, 0.12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -12px rgba(0, 0, 0, 0.55);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 34px 70px -28px rgba(0, 0, 0, 0.7);
  }
}

::selection { background: rgba(15, 163, 160, 0.3); }
html { scrollbar-color: #0b8f9c transparent; scrollbar-width: thin; }

/* Reusable translucent shapes (masks) */
:root {
  --wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 62C180 8 360 8 540 56S900 112 1080 62 1320 12 1440 40V120H0Z'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40C160 96 340 100 540 58S920 0 1100 44 1340 92 1440 58V120H0Z'/%3E%3C/svg%3E");
  --drop-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 1C7 8.5 3 13.2 3 18.2a9 9 0 0 0 18 0C21 13.2 17 8.5 12 1Z'/%3E%3C/svg%3E");
}

/* ---- Things removed on purpose ------------------------------------------ */
.page-dots,
.scroll-cue,
.next-link,
.ripple,
.hero-drops i,
.section-head h2::after,
.stats.dashboard article::after {
  display: none !important;
}

/* ---- Base rhythm ---------------------------------------------------------- */
h1, .hero h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.022em; }

.section { position: relative; }
.section > .container { position: relative; z-index: 1; }

.section.muted {
  background: linear-gradient(180deg, var(--page) 0, var(--section-muted) 14%, var(--section-muted) 86%, var(--page) 100%);
}

/* Soft ripples drifting in the corner of tinted sections */
.section.muted::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 34px, rgba(8, 114, 180, 0.07) 34px 36px);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%);
  mask: radial-gradient(circle, #000 20%, transparent 70%);
  pointer-events: none;
}

/* ---- Eyebrow: a single droplet, no badge, no bar ------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--eyebrow);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 12px;
  height: 15px;
  border-radius: 0;
  background: var(--grad);
  -webkit-mask: var(--drop-shape) center / contain no-repeat;
  mask: var(--drop-shape) center / contain no-repeat;
  box-shadow: none;
}

.section-head h2 { margin-top: 10px; }

/* Highlighted words in headings: gradient ink, no underline */
.section-head h2 .hl,
.section-head h2 em,
.hl {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Header: clear glass --------------------------------------------------- */
.site-header {
  border-bottom: 0;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 1px 0 rgba(8, 82, 130, 0.06);
  transition: transform 0.35s var(--ease), box-shadow 0.25s ease;
}

.site-header.scrolled { box-shadow: 0 18px 40px -22px rgba(8, 82, 130, 0.35); }
.site-header.is-tucked { transform: translateY(-100%); }

.nav-menu a { border-radius: 999px; }

@media (min-width: 901px) {
  .nav-menu a:not(.nav-cta) { padding: 9px 14px; transition: background-color 0.2s ease, color 0.2s ease; }
  .nav-menu a:not(.nav-cta)::after { display: none; }
  .nav-menu a:not(.nav-cta):hover,
  .nav-menu a[aria-current="true"],
  .nav-menu a.is-current,
  .nav-menu a.active { background: var(--tint); color: var(--blue); }
}

.theme-toggle,
.nav-toggle {
  border: 0;
  border-radius: 999px;
  background: var(--tint);
  box-shadow: none;
}

/* ---- Buttons: pills, no outline ------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, background-color 0.25s ease, filter 0.25s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn.primary,
.btn-solar,
.nav-menu a.nav-fund,
.nav-menu .nav-cta.nav-fund {
  background: linear-gradient(135deg, #12b571, #0d9a69);
  color: #ffffff !important;
  box-shadow: var(--glow);
}

.btn.primary:hover,
.btn-solar:hover,
.nav-menu a.nav-fund:hover {
  background: linear-gradient(135deg, #14c179, #0e8f63);
  box-shadow: 0 18px 40px -10px rgba(15, 159, 104, 0.6);
}

.btn.ghost {
  background: var(--tint);
  color: var(--blue);
  box-shadow: none;
}

.btn.ghost:hover { background: rgba(8, 114, 180, 0.16); }

.btn.ghost-light {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn.ghost-light:hover { background: rgba(255, 255, 255, 0.26); }

/* ---- Pills, chips and labels: tinted fills, no outlines ------------------- */
.chip,
.map-btn,
.map-link,
.data-label,
.growth-pill,
.career-tag,
.pathway-tag,
.post-tag,
.status-open,
.status-closed,
.why-chips li,
.resp-chips li,
.org-chips li,
.sdg-links a,
.share-btn,
.cal-nav,
.names li,
.partner-tab {
  border: 0;
  border-radius: 999px;
  background: var(--tint);
  color: var(--blue);
  box-shadow: none;
}

.chip,
.map-btn,
.map-link {
  color: var(--ink);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.chip:hover,
.map-btn:hover,

.chip[aria-pressed="true"],
.map-btn.active {
  background: var(--grad);
  color: #ffffff;
  box-shadow: 0 8px 20px -8px rgba(8, 114, 180, 0.6);
}

.map-link { background: var(--ocean-1); color: #ffffff; }

.data-label.is-actual,
.growth-pill.is-live { background: var(--pill-live-bg); color: var(--pill-live-fg); }
.data-label.is-target,
.growth-pill:not(.is-live) { background: var(--pill-soon-bg); color: var(--pill-soon-fg); }

.names li {
  background: var(--glass-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.pathway-tag,
.career-tag { background: var(--grad-soft); color: var(--blue); }
.pathway-feature .pathway-tag { background: rgba(255, 255, 255, 0.16); color: #ffffff; }

/* ---- Containers: the droplet card ------------------------------------------ */
.card,
.ps-card,
.chart-card,
.growth-tile,
.metric-card,
.pathway,
.sector-card,
.news-item,
.post-card,
.faq-item,
.carbon-block,
.icon-grid li,
.risk-grid li,
.biz-cycle li,
.rm-step,
.pii-copy,
.pii-card,
.video-feature,
.notice-card,
.climate-note,
.fund-step,
.fund-summary,
.consult-card,
.partner-org,
.calc-card,
.contact-form,
.map-module,
.why-card,
.resource-card,
.cluster-diagram,
.pay-step {
  border: 0;
  border-radius: var(--drop);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--hair);
}

.card,
.pathway,
.growth-tile,
.sector-card,
.news-item,
.post-card,
.resource-card,
.biz-cycle li,
.icon-grid li {
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
}

.card:hover,
.pathway:hover,
.growth-tile:hover,
.sector-card:hover,
.news-item:hover,
.post-card:hover,
.resource-card:hover,
.biz-cycle li:hover,
.icon-grid li:hover {
  translate: 0 -5px;
  box-shadow: var(--shadow), var(--hair);
}

.pii-copy,
.pii-card,
.video-feature,
.map-module,
.contact-form,
.chart-card,
.calc-card { border-radius: 40px 40px 40px 12px; }

.faq-item { border-radius: 24px 24px 24px 8px; overflow: hidden; }
.faq-item summary { border-radius: inherit; }

/* The old coloured top bars become a soft glow dot beside the label */
.ps-problem,
.ps-solution { border-top: 0; }
.ps-problem { background: linear-gradient(160deg, rgba(255, 140, 90, 0.1), transparent 55%), var(--surface); }
.ps-solution { background: linear-gradient(160deg, rgba(18, 181, 113, 0.12), transparent 55%), var(--surface); }
.ps-label { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--tint); }

/* Icon badges: soft discs */
.ps-ico,
.ig-ico,
.climate-icon,
.contact-icon,
.cycle-num,
.step-num,
.fund-option-icon,
.card .icon {
  border: 0;
  border-radius: 50%;
  background: var(--grad-soft);
  color: var(--blue);
}

.cycle-num,
.step-num { background: var(--grad); color: #ffffff; }

.ps-arrow,
.pay-arrow {
  border: 0;
  border-radius: 50%;
  background: var(--grad);
  color: #ffffff;
  box-shadow: var(--glow);
}

/* ---- Photos: organic, never boxed ------------------------------------------ */
.photo-panel img,
.card-media-img,
.news-img,
.article-hero-img { border-radius: 40px 40px 40px 12px; }

.photo-panel { box-shadow: none; }
.photo-panel img { box-shadow: var(--shadow); }

.gallery-item img,
.gallery-item button { border-radius: 30px 30px 30px 10px; }
.gallery-item:nth-child(3n + 2) img,
.gallery-item:nth-child(3n + 2) button { border-radius: var(--blob-a); }
.gallery-item:nth-child(3n + 2) figcaption { text-align: center; }
.gallery-item img { box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease); }
.gallery-item:hover img { transform: scale(1.025); }

.video-feature video { border-radius: 28px 28px 28px 8px; }

/* ==========================================================================
   HERO: photo, deep-water tint, translucent waves, floating glass
   ========================================================================== */
.hero {
  overflow: hidden;
  background-position: center 55%;
}

.hero::before {
  background:
    radial-gradient(120% 90% at 8% 100%, rgba(15, 163, 160, 0.4), transparent 60%),
    linear-gradient(100deg, rgba(4, 30, 50, 0.9) 0%, rgba(5, 62, 96, 0.72) 48%, rgba(8, 114, 180, 0.22) 100%);
}

/* Two translucent waves lap at the bottom edge of the hero */
.hero-drops {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: clamp(70px, 9vw, 130px);
  overflow: visible;
  background: rgba(255, 255, 255, 0.2);
  -webkit-mask: var(--wave-b) 0 100% / 1440px 100% repeat-x;
  mask: var(--wave-b) 0 100% / 1440px 100% repeat-x;
  animation: waveSlide 26s linear infinite;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  z-index: 2;
  display: block !important;
  height: clamp(54px, 7vw, 100px);
  background: var(--page);
  -webkit-mask: var(--wave-a) 0 100% / 100% 100% no-repeat;
  mask: var(--wave-a) 0 100% / 100% 100% no-repeat;
  pointer-events: none;
}

@keyframes waveSlide {
  to { -webkit-mask-position: -1440px 100%; mask-position: -1440px 100%; }
}

.hero-inner { padding-block: 84px 120px; }

.hero .accent {
  background: linear-gradient(90deg, #8fe0ff, var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  border: 0;
}

.hero .eyebrow-light { color: #cdeefc; }

.hero-status span {
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #eaf6fd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Photos float as two organic shapes with a soft aqua halo */
.hero-photos {
  position: absolute;
  right: max(24px, calc((100% - 1200px) / 2));
  top: 50%;
  z-index: 3;
  width: min(36%, 430px);
  transform: translateY(-50%);
  display: block;
}

.hero-photo,
.hero-photo.hp-1,
.hero-photo.hp-2 {
  position: relative;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  border-radius: 0;
}

.hero-photo::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 208, 245, 0.42), transparent 66%);
  filter: blur(8px);
}

.hero-photo img {
  display: block;
  width: 100%;
  border: 0;
  object-fit: cover;
  box-shadow: 0 30px 60px -20px rgba(2, 14, 30, 0.7);
}

.hero-photo.hp-1 { width: 74%; margin-left: auto; }
.hero-photo.hp-1 img { aspect-ratio: 1 / 1; border-radius: var(--blob-a); }
.hero-photo.hp-1 figcaption { display: none; }
.hero-photo.hp-2 { width: 62%; margin: -64px 0 0 4%; }
.hero-photo.hp-2 img { aspect-ratio: 5 / 4; border-radius: var(--blob-b); }

.hero-photo figcaption {
  position: absolute;
  left: 50%;
  bottom: 9%;
  max-width: 88%;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(4, 30, 50, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-shadow: none;
  white-space: nowrap;
  transform: translateX(-50%);
}

@media (max-width: 1100px) { .hero-photos { display: none; } }

@media (min-width: 1101px) {
  .hero-inner > * { max-width: min(640px, 58%); }
  .hero-inner .hero-status,
  .hero-inner .hero-actions { max-width: min(700px, 62%); }
}

/* Facts strip: a floating glass capsule that overlaps the hero's wave */
.ticker {
  position: relative;
  z-index: 4;
  width: min(1200px, calc(100% - 32px));
  margin: -38px auto 0;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--ocean-1), var(--ocean-2) 60%, var(--ocean-3));
  color: #e4f1f9;
  box-shadow: 0 24px 50px -22px rgba(4, 30, 50, 0.75);
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ticker li::after { background: var(--aqua); }
.ticker strong { color: var(--mint); }

/* Marquee machinery (kept as it was) */
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 55s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; flex-shrink: 0; align-items: center; margin: 0; padding: 0; list-style: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
.names { background: none; margin-bottom: var(--space-head); -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.names li { padding: 12px 28px; margin: 6px 10px 18px 0; white-space: nowrap; font-weight: 800; font-size: var(--fs-small); }

/* The About section tucks in under the hero wave */
#model { padding-top: calc(var(--space-section) + 28px); }

/* ==========================================================================
   RESULTS BAND: deep water, glass tiles, translucent waves
   ========================================================================== */
#impact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: calc(var(--space-section) + 36px);
  background:
    radial-gradient(60% 50% at 88% 6%, rgba(95, 208, 245, 0.22), transparent 70%),
    radial-gradient(50% 50% at 4% 96%, rgba(18, 181, 113, 0.2), transparent 70%),
    linear-gradient(165deg, var(--ocean-1), var(--ocean-2) 58%, var(--ocean-3));
  color: #d8eaf5;
}

#impact::before,
#impact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  height: clamp(44px, 6vw, 84px);
  background: var(--section-muted);
  pointer-events: none;
}

#impact::before {
  top: -1px;
  -webkit-mask: var(--wave-b) 0 0 / 100% 100% no-repeat;
  mask: var(--wave-b) 0 0 / 100% 100% no-repeat;
  transform: scaleY(-1);
  animation: none;
  z-index: 0;
}

#impact::after {
  bottom: -1px;
  z-index: 0;
  -webkit-mask: var(--wave-a) 0 100% / 100% 100% no-repeat;
  mask: var(--wave-a) 0 100% / 100% 100% no-repeat;
}

#impact .eyebrow { color: var(--mint); }
#impact .eyebrow::before { background: linear-gradient(135deg, var(--aqua), var(--mint)); }
#impact .section-head h2 { color: #ffffff; }
#impact .section-head h2 .hl { background: linear-gradient(90deg, #8fe0ff, var(--mint)); -webkit-background-clip: text; background-clip: text; }
#impact .dash-updated { color: #a9cde2; }
#impact .data-label.is-actual { background: rgba(111, 231, 174, 0.18); color: var(--mint); }

.stats.dashboard article {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--drop);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 24px 50px -28px rgba(0, 0, 0, 0.55);
  color: #d8eaf5;
  transition: transform 0.35s var(--ease), background-color 0.3s ease;
}

/* A translucent droplet sits behind every figure */
.stats.dashboard article::before {
  content: "";
  position: absolute;
  top: auto;
  left: auto;
  right: -18px;
  bottom: -26px;
  width: 120px;
  height: 150px;
  background: linear-gradient(160deg, rgba(95, 208, 245, 0.38), rgba(95, 208, 245, 0));
  -webkit-mask: var(--drop-shape) center / contain no-repeat;
  mask: var(--drop-shape) center / contain no-repeat;
  pointer-events: none;
}

.stats.dashboard article:hover { translate: 0 -5px; }

.stats.dashboard article > span,
.stats.dashboard article > strong {
  background: linear-gradient(100deg, #ffffff 10%, #9be7ff 55%, var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.stats.dashboard article p { color: #ffffff; }
.stats.dashboard article small,
.stats.dashboard .stat-basis { color: #a9cde2; }

/* Cards on the deep band stay light so charts read clearly */
#impact .chart-card,
#impact .calc-card { color: var(--text); }

/* Bar chart: soft rounded bars */
.bar-kitgum, .bar-paicho { rx: 8px; }
.chart-card { padding: var(--pad-card); }

/* ---- Calculator and ring gauges ------------------------------------------ */
.calc-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
  margin-top: var(--gap);
  padding: var(--pad-card);
}

.calc-card h3 { margin: 0 0 6px; color: var(--ink); }
.calc-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--ink); font-weight: 800; }
.calc-label output { font-size: 1.75rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.calc-card input[type="range"] {
  width: 100%;
  height: 10px;
  margin: 14px 0 6px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #0e9aa7 var(--fillp, 10%), color-mix(in srgb, var(--blue) 14%, transparent) var(--fillp, 10%));
  outline-offset: 6px;
}

.calc-card input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border: 5px solid #ffffff;
  border-radius: 50%;
  background: var(--cta);
  box-shadow: 0 6px 16px rgba(4, 30, 50, 0.4);
  cursor: grab;
}

.calc-card input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 5px solid #ffffff;
  border-radius: 50%;
  background: var(--cta);
  box-shadow: 0 6px 16px rgba(4, 30, 50, 0.4);
  cursor: grab;
}

.calc-out { display: flex; align-items: center; gap: 20px; }
.calc-out dl { display: grid; gap: 10px; margin: 0; }
.calc-out dt { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.calc-out dd { margin: 0; color: var(--ink); font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.calc-ring { width: 108px; height: 108px; }
.calc-ring span { font-size: 1.125rem; }
.calc-note { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-small); }

@property --rp { syntax: "<number>"; inherits: false; initial-value: 0; }

.ring {
  --rp: 0;
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: conic-gradient(#12b571 calc(var(--rp) * 1%), color-mix(in srgb, var(--blue) 14%, transparent) 0);
  transition: --rp 1.6s var(--ease);
}

.ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.ring span { position: relative; color: var(--ink); font-size: 0.9375rem; font-weight: 800; }
.meter.has-ring { display: flex; align-items: center; gap: 16px; }
.meter.has-ring .growth-bar { display: none; }
.meter.has-ring .meter-label { display: grid; gap: 2px; margin: 0; }
.meter.has-ring + .meter.has-ring { margin-top: 16px; }

.growth-bar,
.oc-track,
.eb-track { border-radius: 999px; background: color-mix(in srgb, var(--blue) 12%, transparent); overflow: hidden; }
.growth-bar span,
.oc-bar,
.eb-bar { border-radius: 999px; background: var(--grad); }

@media (max-width: 760px) { .calc-card { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Dark bands (Why it works, Contact): glass cards, ripples, wave edge
   ========================================================================== */
.why-section,
.contact-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--space-section) + 36px);
  background:
    radial-gradient(55% 60% at 90% 8%, rgba(95, 208, 245, 0.18), transparent 70%),
    radial-gradient(45% 55% at 6% 94%, rgba(18, 181, 113, 0.16), transparent 70%),
    linear-gradient(170deg, var(--ocean-1), #063a5c 60%, #07506f);
}

.why-section::before,
.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 10% 20%, transparent 0 110px, rgba(125, 211, 252, 0.08) 111px 113px, transparent 114px 190px, rgba(125, 211, 252, 0.06) 191px 193px, transparent 194px),
    radial-gradient(circle at 92% 80%, transparent 0 150px, rgba(134, 239, 172, 0.08) 151px 153px, transparent 154px 250px, rgba(134, 239, 172, 0.06) 251px 253px, transparent 254px);
  pointer-events: none;
}

.why-section::after,
.contact-section::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  z-index: 0;
  display: block !important;
  height: clamp(40px, 5.5vw, 76px);
  background: var(--page);
  -webkit-mask: var(--wave-a) 0 0 / 100% 100% no-repeat;
  mask: var(--wave-a) 0 0 / 100% 100% no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}

.why-section .eyebrow,
.contact-section .eyebrow { color: var(--mint); }
.why-section .eyebrow::before,
.contact-section .eyebrow::before { background: linear-gradient(135deg, var(--aqua), var(--mint)); }

.why-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.why-chips li { background: rgba(255, 255, 255, 0.12); color: #e9f5fc; }
.oc-track { background: rgba(255, 255, 255, 0.16); }

.contact-form { background: var(--surface); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); border-top: 0; }

/* ---- Forms: soft fields, focus glow instead of heavy outlines ------------- */
.contact-form input:not([type="radio"]):not([type="checkbox"]),
.contact-form select,
.contact-form textarea,
.fund-form input:not([type="radio"]):not([type="checkbox"]),
.fund-form select {
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  box-shadow: inset 0 0 0 1px rgba(8, 82, 130, 0.1);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.fund-form input:focus {
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--focus), inset 0 0 0 1.5px #0e9aa7;
  outline: none;
}

.contact-form .consent { border: 0; border-radius: 20px; background: var(--tint); }
.form-submit { border-radius: 999px; }

/* ---- Fund checkout: selectable options as soft tiles ----------------------- */
.fund-option-body,
.pay-method-body {
  border: 0;
  border-radius: 24px 24px 24px 8px;
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
  box-shadow: inset 0 0 0 1px rgba(8, 82, 130, 0.08);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease);
}

.fund-option input:checked + .fund-option-body,
.pay-method input:checked + .pay-method-body {
  background: linear-gradient(155deg, rgba(8, 114, 180, 0.14), rgba(18, 181, 113, 0.14));
  box-shadow: inset 0 0 0 2px #0e9aa7, 0 18px 36px -20px rgba(8, 114, 180, 0.5);
}

.segmented,
.amount-input { border: 0; border-radius: 999px; background: var(--tint); box-shadow: none; }
.segmented label span,
.amount-grid label span { border: 0; border-radius: 999px; background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.segmented input:checked + span,
.amount-grid input:checked + span { background: var(--grad); color: #ffffff; }

.fund-summary {
  border-radius: 40px 40px 40px 12px;
  background: linear-gradient(165deg, var(--ocean-1), var(--ocean-2) 70%, var(--ocean-3));
  color: #d8eaf5;
  box-shadow: var(--shadow);
}

.pathway-feature {
  border-radius: var(--drop);
  background: linear-gradient(165deg, var(--ocean-1), var(--ocean-2) 70%, var(--ocean-3));
  color: #d8eaf5;
}

.pathway-feature h3 { color: #ffffff; }
.pathway-feature p { color: #cfe4f1; }
.pathway-feature .pathway-link { color: var(--mint); }

/* ---- Diagram, map and iframe ---------------------------------------------- */
.cluster-info { border: 0; border-radius: 22px 22px 22px 8px; background: var(--tint); }
.diagram-flag { border-radius: 22px 22px 8px 8px; }
.cluster-svg { border-radius: 30px; }
.map-frame-wrap { border-radius: 30px 30px 30px 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.tariff-notice { border-radius: 24px 24px 24px 8px; }

/* ---- Climate illustration: translucent, overlaying the section ------------ */
.climate-art svg { border: 0; border-radius: 40px 40px 40px 12px; box-shadow: var(--shadow-sm); }
.art-sun { transform-origin: 86px 62px; animation: spin 40s linear infinite; }
.art-cloud { animation: drift 9s ease-in-out infinite alternate; }
.art-rain path { animation: rain 1.3s linear infinite; }
.art-rain .r2 { animation-delay: 0.3s; }
.art-rain .r3 { animation-delay: 0.6s; }
.art-rain .r4 { animation-delay: 0.9s; }
.art-flow { animation: flow 1.2s linear infinite; }
.art-level { animation: level 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center bottom; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(14px); } }
@keyframes rain { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@keyframes flow { to { stroke-dashoffset: -20; } }
@keyframes level { from { transform: scaleY(0.6); } to { transform: scaleY(1); } }

.climate-section { overflow: hidden; }
.climate-section::before {
  content: "";
  position: absolute;
  right: -90px;
  top: 40px;
  width: 360px;
  height: 450px;
  background: linear-gradient(170deg, rgba(8, 114, 180, 0.14), rgba(18, 181, 113, 0));
  -webkit-mask: var(--drop-shape) center / contain no-repeat;
  mask: var(--drop-shape) center / contain no-repeat;
  pointer-events: none;
}

/* ---- Footer: deep water with a translucent wave ---------------------------- */
.footer {
  position: relative;
  padding-top: clamp(40px, 5vw, 72px);
  background: linear-gradient(180deg, #04202f 0%, var(--footer-bg) 100%);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(40px, 5vw, 70px);
  background: var(--page);
  -webkit-mask: var(--wave-b) 0 0 / 100% 100% no-repeat;
  mask: var(--wave-b) 0 0 / 100% 100% no-repeat;
  transform: scaleY(-1);
  animation: none;
}

.footer a { color: #d6e6f2; text-decoration: none; }
.footer a:hover { color: #ffffff; text-decoration: underline; }
.footer-top { display: grid; gap: 40px; padding: 56px 0 40px; }
.footer-about { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand strong { color: #ffffff; font-size: 1.25rem; }
.footer-tagline { margin: 2px 0 0; color: #9fc3dd; font-size: var(--fs-small); }
.footer-blurb { max-width: 60ch; margin: 0; color: #d6e6f2; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.footer-col { display: grid; align-content: start; gap: 10px; font-style: normal; font-size: var(--fs-small); }
.footer-col h2 { margin: 0 0 6px; padding: 0; border: 0; color: var(--mint); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; }
.footer-col h2::after { display: none; }
.footer-col p { margin: 0; color: #d6e6f2; }
.footer-note { color: #9fc3dd; }
.footer-reg { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0 28px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #9fc3dd; font-size: var(--fs-small); }
.footer-bottom p { margin: 0; }

.motion-toggle { padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #d6e6f2; font: inherit; font-size: var(--fs-small); font-weight: 700; cursor: pointer; }
.motion-toggle:hover { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

@media (max-width: 900px) {
  .footer-about { grid-template-columns: minmax(0, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
  .footer-top { padding: 40px 0 28px; }
}

/* ---- Sub-pages: page hero follows the same water language ----------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 92% 0%, rgba(95, 208, 245, 0.22), transparent 70%),
    linear-gradient(165deg, var(--ocean-1), var(--ocean-2) 65%, var(--ocean-3));
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: clamp(36px, 5vw, 64px);
  background: var(--page);
  -webkit-mask: var(--wave-a) 0 100% / 100% 100% no-repeat;
  mask: var(--wave-a) 0 100% / 100% 100% no-repeat;
}

.scroll-progress { height: 3px; background: var(--grad); border-radius: 0 3px 3px 0; }

.back-to-top { border: 0; border-radius: 50%; background: var(--grad); box-shadow: var(--glow); }

/* ---- Motion ----------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

.js .hero-inner > * { animation: rise 0.9s var(--ease) backwards; }
.js .hero-inner > :nth-child(1) { animation-delay: 0.05s; }
.js .hero-inner > :nth-child(2) { animation-delay: 0.15s; }
.js .hero-inner > :nth-child(3) { animation-delay: 0.3s; }
.js .hero-inner > :nth-child(4) { animation-delay: 0.45s; }
.js .hero-inner > :nth-child(5) { animation-delay: 0.6s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.img-fade { opacity: 0; }
img { transition: opacity 0.5s ease; }

.hero-inner { translate: 0 var(--py, 0px); }
.hero-photos { translate: 0 calc(var(--py, 0px) * 0.5); }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) {
    .hero-drops, .art-sun, .art-cloud, .art-rain path, .art-flow, .art-level, .marquee-track { animation: none !important; }
    .js .hero-inner > * { animation: none !important; }
    .hero-inner, .hero-photos { translate: none; }
    .img-fade { opacity: 1; }
    .site-header.is-tucked { transform: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .card:hover, .pathway:hover, .growth-tile:hover, .sector-card:hover, .news-item:hover, .post-card:hover,
    .resource-card:hover, .biz-cycle li:hover, .icon-grid li:hover, .stats.dashboard article:hover { transform: none; }
  }
}

@media print {
  .hero-drops, .hero-photos, .climate-art, .hero::after, .section.muted::before, #impact::before, #impact::after,
  .why-section::after, .contact-section::after, .footer::before, .page-hero::after { display: none !important; }
}

/* ==========================================================================
   Refinements from the live render
   ========================================================================== */
.map-module { overflow: hidden; padding: 0; }
.map-module-head { border-radius: 0; }
.map-frame-wrap { border-radius: 0; box-shadow: none; }

.pii-features div,
.fp-col { border: 0; border-radius: var(--drop-sm); background: var(--tint); }
.diagram-flag { border-radius: 34px 34px 0 0; }
.cluster-diagram { overflow: hidden; }

/* Light cards on dark bands become glass; gradient words stay readable */
.outlet-compare { border: 0; border-radius: var(--drop-sm); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.why-section .section-head h2 .hl,
.contact-section .section-head h2 .hl,
#impact .hl,
.hero .hl { background: linear-gradient(90deg, #8fe0ff, var(--mint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.contact-lines p {
  border: 0;
  border-radius: var(--drop-sm);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.contact-lines .contact-icon { background: rgba(255, 255, 255, 0.14); color: var(--aqua); }
.contact-form .field { display: flex; flex-direction: column; justify-content: flex-end; }
.contact-form .form-row .field { margin-bottom: 20px; }

.climate-section::before { opacity: 0.6; }

.news-search,
input[type="search"] {
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  box-shadow: inset 0 0 0 1px rgba(8, 82, 130, 0.1);
}

.news-search:focus,
input[type="search"]:focus { box-shadow: 0 0 0 4px var(--focus), inset 0 0 0 1.5px #0e9aa7; outline: none; }

.video-feature video { background: #04202f; object-fit: cover; }

/* ==========================================================================
   CSS <-> HTML/JS hooks
   - Hover lift uses `translate` so it is not cancelled by `.js .reveal.visible { transform: none }`
   - Revealed cards keep both the fade-in and the hover motion
   - JS-set states (is-current, aria-pressed, is-selected, is-active) all have a look
   ========================================================================== */
.js .reveal.visible {
  transition: opacity 0.7s ease, transform 0.7s ease, translate 0.35s var(--ease), box-shadow 0.35s ease;
}

.nav-menu a.is-current,
.nav-menu a[aria-current="true"] { color: var(--blue); }

.fund-option.is-selected .fund-option-body,
.pay-method.is-selected .pay-method-body {
  background: linear-gradient(155deg, rgba(8, 114, 180, 0.14), rgba(18, 181, 113, 0.14));
  box-shadow: inset 0 0 0 2px #0e9aa7, 0 18px 36px -20px rgba(8, 114, 180, 0.5);
}

.fund-option.is-disabled,
.segmented .is-disabled { opacity: 0.45; pointer-events: none; }

.cal-day { border: 0; border-radius: 50%; background: transparent; }
.cal-day:hover:not(:disabled) { background: var(--tint); }
.cal-day[aria-pressed="true"] { background: var(--grad); color: #ffffff; box-shadow: 0 8px 18px -8px rgba(8, 114, 180, 0.6); }

.system-node.is-active { filter: drop-shadow(0 0 14px rgba(95, 208, 245, 0.8)); }
.cluster-info.is-active { background: var(--grad-soft); }

.is-copied { background: var(--pill-live-bg) !important; color: var(--pill-live-fg) !important; }
.field-error { border-radius: 999px; }

/* ==========================================================================
   Guidance appears WHILE someone is filling a field, never at rest or on hover
   (contact form, call request and the Give online form)
   ========================================================================== */
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.fund-form input::placeholder,
.fund-fields input::placeholder,
.consult-card input::placeholder { color: transparent; transition: color 0.25s ease; }

.contact-form input:focus::placeholder,
.contact-form textarea:focus::placeholder,
.fund-form input:focus::placeholder,
.fund-fields input:focus::placeholder,
.consult-card input:focus::placeholder { color: var(--placeholder); }

/* "(optional)" tags and character counts show only for the field being filled */
.contact-form .optional,
.fund-form .optional { display: none; }

.contact-form .field:focus-within .optional,
.fund-form label:focus-within .optional { display: inline; }

.field-hint {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}

.field:focus-within .field-hint { max-height: 2.5em; margin-top: 6px; opacity: 1; }

/* Give online: notes belong to the step being filled */
.fund-step-note {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}

.fund-step:focus-within .fund-step-note { max-height: 4em; margin: 0 0 12px; opacity: 1; }

/* Option descriptions: only the chosen option explains itself */
.fund-option small,
.pay-method small {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.fund-option input:checked + .fund-option-body small,
.pay-method input:checked + .pay-method-body small,
.fund-option input:focus-visible + .fund-option-body small,
.pay-method input:focus-visible + .pay-method-body small { max-height: 6em; opacity: 1; }

/* Reassurance lines appear once someone starts the form */
.fund-trust {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}

.fund-grid:focus-within .fund-trust { max-height: 12em; opacity: 1; }

/* No hover-only changes inside forms: state shows on focus and selection */
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover { background: color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.fund-option:hover .fund-option-body,
.pay-method:hover .pay-method-body { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .field-hint, .fund-step-note, .fund-option small, .pay-method small, .fund-trust { transition: none; }
}

.contact-form .form-head { margin-bottom: 22px; }

/* Decorative ripples and drops may bleed past a section edge but never widen the page */
.section { overflow-x: clip; }

.contact-form select { text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   CRAFT PASS: type, rhythm, scroll-driven depth, micro-interactions, a11y
   ========================================================================== */

/* ---- Rhythm and type ----------------------------------------------------- */
:root { --space-section: clamp(72px, 9vw, 124px); --space-head: clamp(36px, 4.5vw, 60px); }

html { scroll-padding-top: 72px; }
section[id], [id].section { scroll-margin-top: 0; }

h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

.hero h1 {
  max-width: 14ch;
  font-size: clamp(2.7rem, 1.3rem + 5vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.hero .lead-light { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.55; }

.section-head h2 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.section-head { margin-bottom: var(--space-head); }

/* Numerals line up everywhere figures matter */
.stats.dashboard article span,
.stats.dashboard article strong,
.ticker strong,
.calc-out dd,
.chart-table td,
.summary-amount { font-variant-numeric: tabular-nums lining-nums; }

.stats.dashboard article > span,
.stats.dashboard article > strong { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.8rem); line-height: 1; letter-spacing: -0.04em; }

/* ---- Dark mode: gradient words need more light --------------------------- */
:root[data-theme="dark"] .hl,
:root[data-theme="dark"] .section-head h2 .hl,
:root[data-theme="dark"] .section-head h2 em {
  background: linear-gradient(90deg, #8fe0ff, var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl,
  :root:not([data-theme="light"]) .section-head h2 .hl,
  :root:not([data-theme="light"]) .section-head h2 em {
    background: linear-gradient(90deg, #8fe0ff, var(--mint));
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* ---- Depth: fine grain over the dark water, so gradients never band ------- */
.hero::before,
#impact,
.why-section,
.contact-section {
  background-blend-mode: normal;
}

#impact::before { z-index: 0; }

.hero-inner::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  z-index: -1;
  background: radial-gradient(60% 70% at 30% 40%, rgba(4, 30, 50, 0.45), transparent 70%);
  pointer-events: none;
}

/* ---- Micro-interactions --------------------------------------------------- */
.btn svg,
.pathway-link,
.read-more { transition: transform 0.3s var(--ease), translate 0.3s var(--ease); }
.btn:hover svg { translate: 4px 0; }
.pathway:hover .pathway-link { translate: 4px 0; }

.faq-item summary { transition: color 0.2s ease; }
.faq-item summary:hover { color: var(--blue); }
.faq-item[open] { box-shadow: var(--shadow), var(--hair); }
.faq-item[open] summary { color: var(--blue); }

/* Body links: an underline that draws in */
.faq-answer a,
.article-body a,
.fine-print a,
.consent a,
.form-alt a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.35s var(--ease);
  color: var(--blue);
  font-weight: 700;
}

.faq-answer a:hover,
.article-body a:hover,
.fine-print a:hover,
.consent a:hover { background-size: 100% 1.5px; }

/* One consistent, visible, soft focus ring */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 10px;
}

.btn:focus-visible,
.chip:focus-visible,
.map-btn:focus-visible,
.nav-menu a:focus-visible { border-radius: 999px; }

/* ---- Scroll-driven depth (progressive: supported browsers only) ----------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes imgDrift { from { scale: 1.12; } to { scale: 1; } }
    @keyframes dropRise { from { translate: 0 40px; } to { translate: 0 -30px; } }
    @keyframes bleedDrift { from { translate: 0 60px; } to { translate: 0 -60px; } }

    .photo-panel img { animation: imgDrift linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }

    .photo-panel { overflow: hidden; border-radius: 40px 40px 40px 12px; box-shadow: var(--shadow); }
    .photo-panel img { box-shadow: none; border-radius: 0; }

    .stats.dashboard article::before { animation: dropRise linear both; animation-timeline: view(); }
    .climate-section::before,
    .section.muted::before { animation: bleedDrift linear both; animation-timeline: view(); }
  }
}

/* ---- Small screens: calmer spacing, full-width actions -------------------- */
@media (max-width: 640px) {
  :root { --pad-card: 22px; }
  .hero-inner { padding-block: 56px 96px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .stats.dashboard article > span,
  .stats.dashboard article > strong { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* ---- Honour "reduce motion" everywhere in this layer ---------------------- */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .btn svg,
  :root:not([data-motion="full"]) .pathway-link { transition: none; translate: none; }
}

/* Gradient words on dark bands, wherever the heading sits */
.contact-section h2 .hl,
.why-section h2 .hl,
#impact h2 .hl {
  background: linear-gradient(90deg, #8fe0ff, var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* One size for every headline figure so the six tiles read as a set */
.stats.dashboard article > span,
.stats.dashboard article > strong { font-size: clamp(2.2rem, 1.2rem + 2vw, 3.2rem); }

/* Why it works now sits between two light sections: give it a wave on its lower edge too */
:root {
  --wave-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V70C1260 118 1080 60 880 84S520 30 320 66 80 100 0 70Z'/%3E%3C/svg%3E");
}

.why-section {
  padding-bottom: calc(var(--space-section) + 36px);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 59px) no-repeat, var(--wave-down) 0 100% / 100% 60px no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 59px) no-repeat, var(--wave-down) 0 100% / 100% 60px no-repeat;
}

/* Partner names: one pill per partner, not a pill inside a pill */
.names li { padding: 0; background: none; box-shadow: none; }
.names .partner-tab { box-shadow: var(--shadow-sm); background: var(--glass-strong); color: var(--ink); }

/* ==========================================================================
   About: who we are, why we exist, the story so far
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.about-intro {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.012em;
}

.about-lead p:not(.about-intro) { max-width: 60ch; color: var(--text); font-size: var(--fs-lead); }
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.principles { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.principles li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 2px;
  align-items: start;
  padding: 20px 22px;
  border-radius: var(--drop);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--hair);
  transition: translate 0.35s var(--ease), box-shadow 0.35s ease;
}

.principles li:hover { translate: 0 -4px; box-shadow: var(--shadow), var(--hair); }

.principle-ico {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--grad);
  color: #ffffff;
}

.principle-ico svg { width: 22px; height: 22px; }
.principles strong { color: var(--ink); font-size: 1.0625rem; font-weight: 800; }
.principles li > span:last-child { color: var(--text); font-size: var(--fs-small); line-height: 1.55; }

.about-subhead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(44px, 6vw, 80px) 0 22px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-subhead::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 22%, transparent), transparent);
}

/* Story so far: a rising line of three moments */
.journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.journey::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 6%;
  right: 6%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #0872b4, #12b571 70%, color-mix(in srgb, var(--blue) 18%, transparent));
}

.journey li {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 44px 24px 24px;
  border-radius: var(--drop);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--hair);
}

.journey li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 24px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 5px #12b571, 0 8px 18px -6px rgba(15, 159, 104, 0.6);
}

.journey li:last-child::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 30%, transparent); }
.journey-when { color: var(--eyebrow); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.journey-when.is-next { color: var(--blue); }
.journey strong { color: var(--ink); font-size: 1.1875rem; letter-spacing: -0.01em; }
.journey li > span:last-child { color: var(--text); font-size: var(--fs-small); line-height: 1.55; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .journey { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-left: 14px; }
  .journey::before { top: 24px; bottom: 24px; left: 0; right: auto; width: 4px; height: auto; background: linear-gradient(180deg, #0872b4, #12b571 70%, color-mix(in srgb, var(--blue) 18%, transparent)); }
  .journey li { padding: 22px 22px 22px 44px; }
  .journey li::before { top: 24px; left: -22px; width: 18px; height: 18px; }
}

.journey li, .principles li { align-content: start; }

/* ==========================================================================
   Theory of change
   ========================================================================== */
.impact-statement {
  position: relative;
  max-width: 62rem;
  margin: 0 0 clamp(36px, 5vw, 60px);
  padding: clamp(24px, 3vw, 38px) clamp(24px, 3.5vw, 44px);
  border-radius: 44px 44px 44px 12px;
  background: linear-gradient(135deg, var(--ocean-1), var(--ocean-2) 65%, var(--ocean-3));
  color: #ffffff;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.impact-statement::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 170px;
  height: 210px;
  background: linear-gradient(160deg, rgba(95, 208, 245, 0.35), rgba(95, 208, 245, 0));
  -webkit-mask: var(--drop-shape) center / contain no-repeat;
  mask: var(--drop-shape) center / contain no-repeat;
  pointer-events: none;
}

.impact-label {
  display: block;
  margin-bottom: 10px;
  color: var(--mint);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.change-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.change-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 20px 24px;
  border-radius: var(--drop-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--hair);
}

.change-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px;
  right: -14px;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-top: 3px solid #12b571;
  border-right: 3px solid #12b571;
  border-radius: 2px;
  rotate: 45deg;
}

.change-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 800;
}

.change-step h3 { margin: 0; font-size: 1.125rem; letter-spacing: -0.01em; }
.change-step ul { display: grid; gap: 8px; margin: 0; padding: 0 0 0 1.05em; color: var(--text); font-size: var(--fs-small); line-height: 1.5; }
.change-step li::marker { color: #12b571; }

.change-step.is-measured { background: linear-gradient(165deg, rgba(18, 181, 113, 0.14), transparent 60%), var(--surface); }
.change-step.is-intended { background: linear-gradient(165deg, rgba(245, 158, 11, 0.1), transparent 60%), var(--surface); }

.change-figures { display: grid; gap: 12px; width: 100%; margin: 4px 0 0; }
.change-figures div { display: grid; gap: 0; }
.change-figures dt { color: var(--muted); font-size: 0.8125rem; font-weight: 600; order: 2; }
.change-figures dd {
  margin: 0;
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.change-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}

.change-notes article {
  padding: var(--pad-card);
  border-radius: var(--drop);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--hair);
}

.change-notes h3 { margin: 0 0 12px; }
.change-notes ul { display: grid; gap: 10px; margin: 0; padding: 0 0 0 1.1em; color: var(--text); }
.change-notes li::marker { color: #12b571; }

@media (max-width: 1100px) {
  .change-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .change-step:not(:last-child)::after { display: none; }
}

@media (max-width: 700px) {
  .change-flow,
  .change-notes { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ONE CLEAR PATH: headings as a sequence, split sections, story blocks
   ========================================================================== */

/* Display treatment: every H2 is a full claim, so it gets room, weight and a tight line */
.section-head h2,
.split-text h2,
.contact-section h2 {
  max-width: 22ch;
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.section-head h2 { max-width: 26ch; }

.hero h1 {
  max-width: 20ch;
  font-size: clamp(2.2rem, 1.1rem + 3.9vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero h1 .accent { display: block; margin-top: 0.12em; }

.hero-price {
  display: inline-block;
  margin: 18px 0 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-weight: 600;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Eyebrows are labels only; the heading carries the meaning */
.eyebrow { font-size: 0.75rem; }

/* Problem and answer: plain text beside a single photograph */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.is-flipped .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.is-flipped .split-photo { order: -1; }

.split-text > * + * { margin-top: 18px; }
.split-text h2 { margin-top: 12px; }
.split-lead { max-width: 56ch; color: var(--ink); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight: 600; line-height: 1.55; }
.split-text p:not(.split-lead):not(.eyebrow):not(.name-meaning) { max-width: 56ch; color: var(--text); font-size: var(--fs-lead); }
.split-text .btn { margin-top: 12px; }

.split-photo { position: relative; margin: 0; }
.split-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  border-radius: 48px 48px 48px 14px;
  box-shadow: var(--shadow);
}
.split-photo figcaption { margin-top: 12px; color: var(--muted); font-size: var(--fs-small); }

.answer-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.answer-points li {
  position: relative;
  padding-left: 30px;
  color: var(--text);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.answer-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.35em;
  width: 14px;
  height: 18px;
  background: var(--grad);
  -webkit-mask: var(--drop-shape) center / contain no-repeat;
  mask: var(--drop-shape) center / contain no-repeat;
}

.name-meaning { padding: 14px 18px; border-radius: var(--drop-sm); background: var(--tint); color: var(--ink); }

/* How it works gets the most room on the page */
#system { padding-block: calc(var(--space-section) + 40px); }
@media (min-width: 1100px) {
  #system .pii-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.55fr); }
}
.design-note { margin: 0 0 18px; color: var(--muted); font-size: var(--fs-small); }

.section-cta { margin-top: clamp(28px, 4vw, 48px); }
.section-head + .gap-lead { margin-top: -12px; }
.gap-lead { max-width: 60ch; margin: 0 0 var(--space-head); color: var(--ink); font-size: var(--fs-lead); font-weight: 600; }
.gap-lead a, .growth-need a { color: var(--blue); font-weight: 800; }

.growth-need { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--drop-sm); background: var(--pill-soon-bg); color: var(--ink); font-size: var(--fs-small); line-height: 1.5; }

/* The ask in numbers */
.ask-card { margin: var(--gap) 0; padding: var(--pad-card); border-radius: var(--drop); background: var(--surface); box-shadow: var(--shadow-sm), var(--hair); }
.ask-card h3 { margin: 0 0 14px; }
.ask-costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 0 18px; }
.ask-costs div { padding: 14px 16px; border-radius: var(--drop-sm); background: var(--tint); }
.ask-costs dt { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.ask-costs dd { margin: 2px 0 0; color: var(--ink); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.ask-progress p { margin: 0 0 10px; }
.five-year { max-width: 60ch; margin: var(--gap) 0; color: var(--ink); font-size: var(--fs-lead); }

/* Customer, founder and repair stories */
.story-card {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  margin-top: var(--gap);
  padding: var(--pad-card);
  border-radius: var(--drop);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--hair);
}
.story-card.story-repair { grid-template-columns: minmax(0, 1fr); }
.story-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--blob-a); }
.story-body > * + * { margin-top: 10px; }
.story-body h3 { margin: 6px 0 0; }
.story-role { display: block; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.story-consent { color: var(--muted); font-size: var(--fs-small); }

/* Fund it */
.fund-routes { max-width: 70ch; margin: 0 0 var(--space-head); color: var(--text); font-size: var(--fs-lead); }
.fund-routes a { color: var(--blue); font-weight: 800; }
.fund-intro { color: var(--ink); font-size: var(--fs-lead); }
.fund-intro strong { color: var(--cta); }

/* Partners: one static row, each partner once */
.partners-block { margin-top: clamp(40px, 6vw, 72px); }
.partners-title { margin: 0 0 18px; font-size: 1.25rem; }
.partner-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.partner-row li { display: grid; gap: 8px; align-content: start; justify-items: start; }
.partner-row .partner-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 22px; border-radius: 999px; background: var(--glass-strong); box-shadow: var(--shadow-sm); color: var(--ink); font-weight: 800; }
.partner-row .partner-tab img { max-height: 40px; width: auto; max-width: 150px; object-fit: contain; }
.partner-did { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }

.gallery-more { display: flex; margin: 22px auto 0; }
.channel-action { margin-left: 8px; color: var(--blue); font-weight: 800; }

/* Footer: four columns now */
.footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 900px) {
  .split, .is-flipped .split { grid-template-columns: minmax(0, 1fr); }
  .is-flipped .split-photo { order: 0; }
  .story-card { grid-template-columns: minmax(0, 1fr); }
  .story-photo { max-width: 200px; }
}

/* Sticky action bar never covers the last controls on a page or form */
@media (max-width: 760px) {
  main { padding-bottom: 12px; }
  .contact-form, .fund-form, .fund-summary { scroll-margin-bottom: 96px; }
  html { scroll-padding-bottom: 88px; }
}

/* What each option funds is the pitch, so it always shows ("You fund ...") */
.fund-option small {
  max-height: none;
  overflow: visible;
  opacity: 1;
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.split-text .answer-points { margin-top: 20px; }

/* ==========================================================================
   Who we are, theory of change (short), climate (short)
   ========================================================================== */
.change-visible { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--gap); align-items: stretch; }
.change-visible > article { padding: var(--pad-card); border-radius: var(--drop); background: var(--surface); box-shadow: var(--shadow-sm), var(--hair); }
.change-visible > article h3 { margin: 0 0 12px; }
.change-visible > article ul { display: grid; gap: 10px; margin: 0; padding: 0 0 0 1.1em; color: var(--text); }
.change-visible > article li::marker { color: #12b571; }

.change-more { margin-top: var(--gap); border-radius: var(--drop); background: var(--surface); box-shadow: var(--shadow-sm), var(--hair); }
.change-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--pad-card);
  border-radius: inherit;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.change-more > summary::-webkit-details-marker { display: none; }
.change-more > summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 3px solid var(--blue);
  border-bottom: 3px solid var(--blue);
  rotate: 45deg;
  transition: rotate 0.3s var(--ease);
}
.change-more[open] > summary::after { rotate: -135deg; }
.change-more > summary:hover { color: var(--blue); }
.change-more-body { padding: 0 var(--pad-card) var(--pad-card); }
.change-flow.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.change-notes.is-single { grid-template-columns: minmax(0, 1fr); }
.change-more .change-step { background-color: var(--surface-muted); box-shadow: none; }

@media (max-width: 1100px) { .change-flow.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .change-visible { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .change-flow.is-four { grid-template-columns: minmax(0, 1fr); } }

.climate-text {
  max-width: 62ch;
  margin: clamp(24px, 4vw, 44px) 0 clamp(20px, 3vw, 32px);
  color: var(--ink);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.55;
}

/* The four goals sit on one line (they wrap only where the screen is too narrow) */
.sdg-links ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1000px) {
  .sdg-links ul { flex-wrap: nowrap; }
  .sdg-links li { flex: 0 1 auto; min-width: 0; }
  .sdg-links a { padding: 9px 14px; font-size: 0.875rem; white-space: nowrap; }
}

.change-visible > .change-step::after { display: none; }
.split-section.is-flipped #model, #model .split { align-items: start; }

.change-more:not([open]) .change-more-body { display: none; }

.origin-line { padding-left: 16px; border-left: 4px solid #12b571; color: var(--ink); font-weight: 700; }

/* ==========================================================================
   POLISH: popups, notice and campaign bar, hover standard, water drops
   ========================================================================== */

/* ---- Hover standard ---------------------------------------------------------
   One rule for every interactive thing:
   buttons and pills lift 2px | cards lift 4px and deepen their shadow | images zoom 3%
   | text links draw an underline | all take 0.3s on the same easing.
   Only on devices that can really hover, so nothing sticks "hovered" after a tap. */
:root { --hover-dur: 0.3s; --lift-card: -4px; --lift-btn: -2px; }

@media (hover: none) {
  .card:hover, .pathway:hover, .growth-tile:hover, .sector-card:hover, .news-item:hover, .post-card:hover,
  .resource-card:hover, .biz-cycle li:hover, .icon-grid li:hover, .principles li:hover, .stats.dashboard article:hover,
  .story-card:hover, .btn:hover, .chip:hover, .map-btn:hover {
    translate: none;
    transform: none;
  }
  .gallery-item:hover img { transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(var(--lift-btn)); }
  .gallery-item img, .split-photo img, .photo-panel img, .story-photo { transition: transform 0.6s var(--ease), box-shadow var(--hover-dur) ease; }
  .split-photo:hover img, .story-card:hover .story-photo { transform: scale(1.03); }
  .ask-card, .change-visible > article, .change-more { transition: translate var(--hover-dur) var(--ease), box-shadow var(--hover-dur) ease; }
  .ask-card:hover, .change-visible > article:hover { translate: 0 var(--lift-card); box-shadow: var(--shadow), var(--hair); }
  .partner-row .partner-tab { transition: translate var(--hover-dur) var(--ease), box-shadow var(--hover-dur) ease; }
  a.partner-tab:hover { translate: 0 var(--lift-btn); box-shadow: var(--shadow); }
  .footer a { transition: color var(--hover-dur) ease, translate var(--hover-dur) var(--ease); }
  .footer-col a:hover { translate: 3px 0; }
}

/* Same lift for keyboard users */
.btn:focus-visible { transform: translateY(var(--lift-btn)); }

/* ---- Popups: cookie banner, settings panel, photo viewer ------------------- */
.cookie-banner {
  border: 0;
  border-radius: 34px 34px 34px 10px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--shadow), var(--hair);
  z-index: 140;
}

.cookie-banner-inner { gap: 18px; }
.cookie-icon { border-radius: 50%; background: var(--grad); color: #ffffff; }
.cookie-text strong { color: var(--ink); }
.cookie-actions .btn, .cookie-dialog-actions .btn { white-space: nowrap; }

.cookie-backdrop { background: rgba(3, 22, 36, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cookie-modal { z-index: 150; }

.cookie-dialog {
  border: 0;
  border-radius: 40px 40px 40px 12px;
  background: var(--surface);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.55), var(--hair);
}

.cookie-close { border: 0; border-radius: 50%; background: var(--tint); color: var(--ink); transition: background-color var(--hover-dur) ease, rotate var(--hover-dur) var(--ease); }
.cookie-close:hover { background: color-mix(in srgb, var(--blue) 18%, var(--surface)); rotate: 90deg; }
.cookie-cat { border: 0; border-radius: 24px 24px 24px 8px; background: var(--tint); }
.cookie-cat summary { cursor: pointer; color: var(--blue); font-weight: 700; }
.cookie-cat code { border-radius: 8px; background: var(--surface); }

.switch-track { border-radius: 999px; }
.switch input:checked + .switch-track { background: var(--grad); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 3px; }

.cookie-settings-link {
  margin-inline: auto 0;
  color: #d6e6f2;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-settings-link:hover { color: #ffffff; }

.lightbox { z-index: 130; background: rgba(3, 22, 36, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: lbIn 0.3s var(--ease); }
.lightbox img { border-radius: 30px 30px 30px 10px; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.7); }
.lightbox figcaption { display: inline-block; margin-top: 16px; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.lightbox-close, .lightbox-prev, .lightbox-next { border: 0; background: rgba(255, 255, 255, 0.16); color: #ffffff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--hover-dur) ease, scale var(--hover-dur) var(--ease); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, 0.3); scale: 1.08; }
@keyframes lbIn { from { opacity: 0; } }

/* On phones the banner sits above the quick-action bar, never over it */
@media (max-width: 760px) {
  .cookie-banner { bottom: 86px; left: 12px; right: 12px; border-radius: 28px 28px 28px 8px; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-icon { display: none; }
  .cookie-actions { flex-wrap: wrap; }
  .cookie-actions .btn { flex: 1 1 auto; }
}

/* ---- Notice and campaign bar ---------------------------------------------- */
.service-banner { border: 0; background: linear-gradient(90deg, #fde68a, #fef3c7); color: #5b3a06; }
.service-banner .notice-item { padding: 10px 0; }
.service-banner .notice-row.is-campaign { background: linear-gradient(100deg, var(--ocean-1), var(--ocean-2) 60%, #0e9aa7); color: #ffffff; }
.notice-link {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #12b571, #0d9a69);
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--hover-dur) var(--ease);
}
.notice-link:hover { transform: translateY(-1px); }
.notice-dismiss { border-radius: 50%; background: rgba(0, 0, 0, 0.08); color: inherit; transition: background-color var(--hover-dur) ease; }
.notice-dismiss:hover { background: rgba(0, 0, 0, 0.2); }
.notice-row.is-campaign .notice-dismiss { background: rgba(255, 255, 255, 0.18); }

/* ---- Water drops: a few, in chosen sections only ---------------------------
   Decorative, behind the content, very light and slow. Hidden on phones and for reduced motion. */
.drops::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(14, 154, 167, 0.2), rgba(8, 114, 180, 0.08));
  -webkit-mask:
    var(--drop-shape) var(--d1x, 6%) var(--d1y, 18%) / 54px 68px no-repeat,
    var(--drop-shape) var(--d2x, 93%) var(--d2y, 62%) / 34px 43px no-repeat,
    var(--drop-shape) var(--d3x, 78%) var(--d3y, 12%) / 22px 28px no-repeat;
  mask:
    var(--drop-shape) var(--d1x, 6%) var(--d1y, 18%) / 54px 68px no-repeat,
    var(--drop-shape) var(--d2x, 93%) var(--d2y, 62%) / 34px 43px no-repeat,
    var(--drop-shape) var(--d3x, 78%) var(--d3y, 12%) / 22px 28px no-repeat;
  animation: dropsFloat 16s ease-in-out infinite alternate;
}

.drops > .container { position: relative; z-index: 1; }
#problem.drops { --d1x: 47%; --d1y: 12%; --d2x: 3%; --d2y: 78%; --d3x: 94%; --d3y: 8%; }
#people.drops { --d1x: 96%; --d1y: 20%; --d2x: 2%; --d2y: 50%; --d3x: 60%; --d3y: 92%; }
#records.drops { --d1x: 3%; --d1y: 10%; --d2x: 97%; --d2y: 85%; --d3x: 50%; --d3y: 6%; }
#partner.drops { --d1x: 96%; --d1y: 8%; --d2x: 4%; --d2y: 40%; --d3x: 70%; --d3y: 96%; }

@keyframes dropsFloat { from { translate: 0 0; } to { translate: 0 -22px; } }

@media (max-width: 760px) { .drops::after { display: none; } }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .drops::after { animation: none; } }
@media print { .drops::after { display: none; } }

@media (max-width: 760px) {
  .action-bar { grid-template-columns: 1fr 1.25fr 1.6fr; }
  .action-bar a { padding-inline: 8px; font-size: 0.875rem; white-space: nowrap; }
}