/* ============================================================
   CAPTIVA VERDE — style.css
   Deep Water Websites build for Captiva Verde
   ============================================================ */

/* ── CSS Variables ── */
:root {
  --green-deep:    #0c2610;
  --green-forest:  #1a4e1d;
  --green-mid:     #2d7a30;
  --green-bright:  #4ca830;
  --green-light:   #a5d888;
  --mint:          #cbf0b0;
  --mint-pale:     #edf9e4;
  --teal-accent:   #3a9628;
  --white:         #ffffff;
  --off-white:     #f4f9f2;
  --paper:         #fafcf8;
  --charcoal:      #1c2618;
  --charcoal-mid:  #2e3d2c;
  --text-muted:    #587055;
  --text-light:    #8aaa82;
  --gold-accent:   #c9a84c;

  --shadow-sm:  0 2px 8px rgba(12,38,16,0.08);
  --shadow-md:  0 8px 32px rgba(12,38,16,0.12);
  --shadow-lg:  0 20px 60px rgba(12,38,16,0.18);
  --shadow-xl:  0 32px 80px rgba(12,38,16,0.22);

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --max-width: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--charcoal);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ── Typography Scale ── */
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 600; }
h1 { font-size: clamp(2.4rem, 6vw, 5.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
p  { font-size: clamp(1rem, 1.5vw, 1.1rem); color: var(--text-muted); }

/* ── Utility ── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.section-pad { padding: clamp(4rem, 10vw, 7rem) 0; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 2rem; border-radius: 100px;
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;
  transition: var(--transition); white-space: nowrap;
  min-height: 48px;
}
.btn-primary {
  background: var(--green-bright); color: var(--white);
  box-shadow: 0 4px 16px rgba(76,168,48,0.35);
}
.btn-primary:hover { background: var(--green-forest); box-shadow: 0 8px 24px rgba(76,168,48,0.45); transform: translateY(-2px); }
.btn-outline {
  border: 2px solid currentColor; color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.btn-dark { background: var(--green-deep); color: var(--white); }
.btn-dark:hover { background: var(--green-forest); transform: translateY(-2px); }
.btn-ghost { color: var(--green-mid); border: 2px solid var(--green-light); }
.btn-ghost:hover { background: var(--mint-pale); border-color: var(--green-mid); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,38,16,0.96);
  backdrop-filter: blur(12px) saturate(1.5);
  border-bottom: 1px solid rgba(168,213,181,0.12);
  transition: var(--transition);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 0.2rem var(--gutter);
  max-width: var(--max-width); margin: 0 auto;
}
.nav-logo {
  display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  color: var(--white); letter-spacing: -0.01em;
}
.logo-mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-bright), var(--teal-accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.nav-links {
  display: flex; align-items: center; gap: 0.25rem;
}
.nav-links a {
  color: var(--green-light); font-size: 0.9rem; font-weight: 500;
  padding: 0.5rem 0.85rem; border-radius: var(--radius-sm);
  transition: var(--transition);
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,0.07); }
.nav-links a.nav-active { color: var(--white); background: rgba(255,255,255,0.07); border-bottom: 2px solid var(--green-bright); padding-bottom: calc(0.5rem - 2px); }
.nav-cta { margin-left: 0.5rem; padding: 0.65rem 1.4rem; font-size: 0.9rem; }
.nav-hamburger { display: none; color: var(--white); font-size: 1.5rem; background: none; border: none; }
.nav-logo-img {
  height: 110px; width: 110px; display: block;
  background: rgba(255,255,255,0.93);
  border-radius: 8px;
  padding: 0;
  object-fit: cover;
  object-position: center;
  transition: var(--transition);
}
.nav-logo:hover .nav-logo-img { background: rgba(255,255,255,1); }
.nav-logo-img--footer {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  padding: 0;
}
.mobile-nav {
  display: none; flex-direction: column; gap: 0.5rem;
  background: var(--green-deep); padding: 1rem var(--gutter) 1.5rem;
  border-top: 1px solid rgba(168,213,181,0.12);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  color: var(--green-light); padding: 0.7rem 0.5rem;
  border-bottom: 1px solid rgba(168,213,181,0.08);
  font-size: 1rem; font-weight: 500;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav .btn-primary { margin-top: 0.5rem; text-align: center; justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--green-deep) 0%, #102e14 45%, #0c2211 100%);
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 6rem);
  min-height: 88vh; display: flex; align-items: center;
}
/* Animated background shapes */
.hero-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,168,48,0.18) 0%, transparent 70%);
}
.hero-orb-1 { width: 700px; height: 700px; top: -200px; right: -100px; animation: orb-drift 14s ease-in-out infinite alternate; }
.hero-orb-2 { width: 500px; height: 500px; bottom: -150px; left: -50px; animation: orb-drift 18s ease-in-out infinite alternate-reverse; opacity: 0.7; }
.hero-orb-3 { width: 300px; height: 300px; top: 40%; left: 30%; background: radial-gradient(circle, rgba(58,150,40,0.12) 0%, transparent 70%); animation: orb-drift 22s ease-in-out infinite alternate; }
@keyframes orb-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(30px, -30px) scale(1.05); } }

/* Animated droplets */
.droplet-field { position: absolute; inset: 0; }
.droplet {
  position: absolute; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(160deg, rgba(200,240,216,0.4), rgba(76,168,48,0.15));
  animation: droplet-fall linear infinite;
  animation-fill-mode: both;
  --drift: 100px;
}
@keyframes droplet-fall {
  0%   { transform: translate(0, -20px) scale(0) rotate(var(--tilt, -8deg));   opacity: 0; }
  8%   { opacity: var(--peak-opacity, 0.15); }
  40%  { transform: translate(calc(var(--drift) * 0.38), 38vh) scale(1) rotate(var(--tilt, -8deg)); }
  75%  { transform: translate(calc(var(--drift) * 0.72), 72vh) scale(0.95) rotate(var(--tilt, -8deg)); opacity: calc(var(--peak-opacity, 0.15) * 0.6); }
  100% { transform: translate(var(--drift), 110vh) scale(0.85) rotate(var(--tilt, -8deg)); opacity: 0; }
}

/* Wind currents */
.wind-current {
  position: absolute;
  left: 0;
  overflow: visible;
  pointer-events: none;
  animation: wind-gust linear infinite;
}
@keyframes wind-gust {
  0%   { transform: translateX(-320px); opacity: 0; }
  10%  { opacity: var(--peak-opacity, 0.05); }
  90%  { opacity: var(--peak-opacity, 0.05); }
  100% { transform: translateX(115vw);  opacity: 0; }
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
.hero-content { max-width: 620px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  position: relative;
  background: rgba(12,38,16,0.75);
  border-radius: 100px; padding: 0.45rem 1.1rem; margin-bottom: 1.75rem;
  color: var(--mint); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* Static gradient border — composited, no CLS */
.hero-badge::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 100px; padding: 1px;
  background: linear-gradient(135deg, var(--green-bright), var(--teal-accent), rgba(200,240,216,0.5), var(--green-bright));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* Water ripple — ring expands out from badge border and fades */
.hero-badge::after {
  content: ''; position: absolute; inset: -2px; border-radius: 100px;
  border: 1.5px solid rgba(76,210,160,0.55);
  opacity: 0;
  transform: scale(1);
  animation: badge-ripple 2.4s ease-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes badge-ripple {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.18); opacity: 0;   }
  100% { transform: scale(1.18); opacity: 0;   }
}
.hero-badge .badge-icon { display: flex; align-items: center; }
.hero-badge .badge-icon [data-lucide] { width: 0.9rem; height: 0.9rem; stroke: var(--green-bright); stroke-width: 2; }
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-bright); animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } }
.hero h1 { color: var(--white); margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; color: var(--green-bright); }
.hero-sub {
  color: rgba(200,240,216,0.8); font-size: clamp(1rem, 1.5vw, 1.15rem);
  margin-bottom: 2.5rem; line-height: 1.7; max-width: 520px;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* Stock ticker widget — used on home hero + about investor section */
.stock-ticker {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,240,216,0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.75rem;
  max-width: 420px;
}
.stock-row {
  display: flex; align-items: center;
  padding: 0.6rem 0.9rem;
}
.stock-row + .stock-row { border-top: 1px solid rgba(200,240,216,0.08); }
.stock-meta { display: grid; grid-template-columns: 1.5rem 4.8rem 3rem; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.stock-data { display: grid; grid-template-columns: auto 9rem; align-items: center; gap: 0.5rem; margin-left: auto; padding-left: 0.75rem; }
.stock-flag { display: inline-block; width: 1.4em; height: 1.05em; border-radius: 2px; overflow: hidden; flex-shrink: 0; vertical-align: middle; }
.stock-exch {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(200,240,216,0.35); font-family: var(--font-mono);
}
.stock-sym {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--green-light); font-family: var(--font-mono);
}
.stock-price {
  font-size: 0.85rem; font-weight: 600; font-family: var(--font-mono);
  color: var(--white); white-space: nowrap;
}
.stock-change {
  font-size: 0.72rem; font-family: var(--font-mono); font-weight: 600;
  padding: 0.15rem 0.4rem; border-radius: 4px;
  text-align: center; white-space: nowrap;
}
.stock-change.up   { color: #4ade80; background: rgba(74,222,128,0.12); }
.stock-change.down { color: #f87171; background: rgba(248,113,113,0.12); }
.stock-change.flat { color: rgba(200,240,216,0.35); background: rgba(200,240,216,0.05); }
.stock-loading { opacity: 0.35; }
@media (max-width: 580px) {
  .stock-ticker { max-width: 100%; }
  .stock-exch { display: none; }
  .stock-meta { grid-template-columns: 1.5rem 3rem; }
  .stock-data { padding-left: 0; }
}

/* Trust pills */
.trust-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.trust-pill {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(200,240,216,0.15);
  border-radius: 100px; padding: 0.35rem 0.85rem;
  color: var(--green-light); font-size: 0.78rem; font-weight: 500;
}
.trust-pill strong { color: var(--mint); }

/* Hero visual */
.hero-visual { display: flex; justify-content: center; align-items: flex-start; padding-top: 0.5rem; }
.water-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(200,240,216,0.15);
  border-radius: var(--radius-xl); padding: 2.5rem;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.08);
  max-width: 360px; width: 100%;
}
.water-card-icon {
  width: 64px; height: 64px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--green-bright), var(--teal-accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin-bottom: 1.5rem;
  box-shadow: 0 8px 24px rgba(76,168,48,0.4);
}
.water-card-icon--logo {
  background: var(--white);
  padding: 8px;
  width: 120px; height: 64px;
}
.water-card-logo {
  width: 100%; height: 100%; object-fit: contain;
}
.water-card h3 { color: var(--white); font-size: 1.3rem; margin-bottom: 0.5rem; }
.water-card p { color: rgba(200,240,216,0.7); font-size: 0.9rem; margin-bottom: 1.75rem; }
.water-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.water-stat {
  background: rgba(255,255,255,0.05); border-radius: var(--radius-md);
  padding: 1rem; text-align: center;
  border: 1px solid rgba(200,240,216,0.1);
}
.water-stat .stat-num { font-family: var(--font-body); font-size: 1.8rem; color: var(--green-bright); font-weight: 700; line-height: 1; }
.water-stat .stat-label { font-size: 0.72rem; color: rgba(200,240,216,0.6); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; }
.water-card-origen-link {
  display: block; margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(200,240,216,0.1);
  font-size: 0.82rem; font-weight: 600; color: var(--green-bright);
  text-decoration: none; letter-spacing: 0.02em;
  transition: color 0.2s;
}
.water-card-origen-link:hover { color: var(--mint); }
/* WellSpring100 product image */
.wellspring-img-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
.wellspring-product-img {
  width: 100%; height: auto; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); display: block;
  background: var(--off-white);
}

.water-card-ticker {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(200,240,216,0.1);
  display: flex; justify-content: space-between; align-items: center;
}
.ticker-label { font-size: 0.72rem; color: rgba(200,240,216,0.5); text-transform: uppercase; letter-spacing: 0.06em; }
.ticker-vals { display: flex; gap: 0.75rem; }
.ticker-val { font-size: 0.8rem; font-weight: 700; color: var(--gold-accent); font-family: var(--font-mono); }

/* ============================================================
   SECTION LABELS
   ============================================================ */
.section-label {
  display: inline-block; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-mid); margin-bottom: 0.75rem;
}
.section-label::before { content: "— "; }

/* ============================================================
   PROBLEM / OPPORTUNITY
   ============================================================ */
.problem { background: var(--off-white); }
.problem-intro { max-width: 680px; margin: 0 auto 3.5rem; }
.problem-intro h2 { color: var(--green-deep); margin-bottom: 1rem; }
.problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.problem-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 1.75rem;
  border: 1px solid rgba(45,122,48,0.1); text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(76,168,48,0.25); }
.problem-icon {
  font-size: 2rem; margin-bottom: 1rem; display: flex; justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.problem-card h3 { color: var(--green-deep); font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.problem-card p { font-size: 0.92rem; line-height: 1.6; }

/* ============================================================
   SOLUTION / HOW IT WORKS
   ============================================================ */
.solution { background: var(--green-deep); }
.solution-intro { max-width: 680px; margin: 0 auto 4rem; }
.solution-intro .section-label { color: var(--green-light); }
.solution-intro h2 { color: var(--white); margin-bottom: 1rem; }
.solution-intro p { color: rgba(200,240,216,0.7); }

.process-steps {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; position: relative; margin-top: 3.5rem; align-items: start;
}
.awg-connector {
  position: absolute; top: 35px; left: 10%; right: 10%;
  height: 2px; background: rgba(200,240,216,0.12);
  z-index: 0; overflow: hidden; border-radius: 999px;
}
.awg-connector-flow {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(76,168,48,0.9) 40%, rgba(58,184,122,0.7) 60%, transparent 100%);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: flow-along 2.8s linear infinite;
}
@keyframes flow-along {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}
.step-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 0.75rem; position: relative; z-index: 2;
  background: none; border: none; box-shadow: none;
  transition: var(--transition);
}
.step-card:hover { transform: translateY(-4px); background: none; }
.step-node {
  width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-bright), var(--teal-accent));
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 1.5rem; flex-shrink: 0;
  box-shadow: 0 0 0 8px rgba(76,168,48,0.12), 0 8px 24px rgba(0,0,0,0.35);
  animation: pulse-node 3.5s ease-in-out infinite;
}
.step-card:nth-child(2) .step-node { animation-delay: 0s; }
.step-card:nth-child(3) .step-node { animation-delay: 0.56s; }
.step-card:nth-child(4) .step-node { animation-delay: 1.12s; }
.step-card:nth-child(5) .step-node { animation-delay: 1.68s; }
.step-card:nth-child(6) .step-node { animation-delay: 2.24s; }
@keyframes pulse-node {
  0%, 100% { box-shadow: 0 0 0 8px rgba(76,168,48,0.12), 0 8px 24px rgba(0,0,0,0.35); }
  50%       { box-shadow: 0 0 0 16px rgba(76,168,48,0), 0 8px 24px rgba(0,0,0,0.35); }
}
.step-badge {
  position: absolute; bottom: -5px; right: -5px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-deep); border: 1.5px solid var(--green-bright);
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  color: var(--green-bright); display: flex; align-items: center; justify-content: center;
}
.step-icon { display: flex; align-items: center; justify-content: center; margin: 0; }
.step-card h3 { color: var(--mint); font-size: 0.95rem; margin-bottom: 0.5rem; font-family: var(--font-body); font-weight: 700; }
.step-card p { color: rgba(200,240,216,0.65); font-size: 0.85rem; line-height: 1.6; }

/* ============================================================
   CALCULATOR
   ============================================================ */
/* ── Calculator (upgraded) ── */
.calculator { background: var(--green-deep); }
.calc-intro { max-width: 640px; margin: 0 auto 3rem; }
.calc-intro .section-label { color: var(--green-light); }
.calc-intro h2 { color: var(--white); margin-bottom: 0.75rem; }
.calc-intro p  { color: rgba(255,255,255,0.72); }

.calc-layout {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 2rem; align-items: start;
}

/* Input panel */
.calc-inputs-panel {
  background: var(--white); border-radius: var(--radius-xl);
  padding: 2.25rem; display: flex; flex-direction: column; gap: 1.75rem;
}
.calc-field > label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-forest); margin-bottom: 0.5rem;
}
.calc-field select,
.calc-number-input {
  width: 100%; padding: 0.7rem 1rem;
  border: 2px solid rgba(45,122,48,0.15); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 0.95rem; color: var(--charcoal);
  background: var(--off-white); transition: var(--transition);
}
.calc-field select:focus,
.calc-number-input:focus { outline: none; border-color: var(--green-bright); background: var(--white); }
.calc-slider-val {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  color: var(--green-bright); text-transform: none; letter-spacing: 0;
}
input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 5px;
  border-radius: 3px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--green-bright) 0%, var(--green-bright) 48%, rgba(45,122,48,0.18) 48%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-bright); box-shadow: 0 2px 8px rgba(76,168,48,0.5);
  cursor: pointer; transition: transform 0.12s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
.calc-range-ends {
  display: flex; justify-content: space-between;
  font-size: 0.68rem; color: var(--text-light); margin-top: 0.3rem;
}
.calc-quick-picks {
  display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem;
}
.quick-pick {
  padding: 0.3rem 0.8rem; font-size: 0.72rem; font-weight: 700;
  border: 2px solid rgba(45,122,48,0.18); border-radius: var(--radius-sm);
  background: transparent; color: var(--green-forest);
  cursor: pointer; transition: var(--transition);
}
.quick-pick:hover, .quick-pick.active {
  border-color: var(--green-bright); background: rgba(76,168,48,0.09); color: var(--green-deep);
}
.calc-custom-fields {
  display: none; flex-direction: column; gap: 1.25rem;
  padding: 1.25rem; background: var(--off-white); border-radius: var(--radius-lg);
  border-left: 3px solid var(--green-bright);
}
.calc-custom-fields.visible { display: flex; }
.calc-hint { font-size: 0.72rem; color: var(--text-light); margin-top: 0.3rem; display: block; }

/* Output panel */
.calc-outputs-panel {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-xl); padding: 2.25rem; backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.calc-results-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem;
}
.calc-result {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg); padding: 1.1rem; text-align: center;
}
.calc-result--highlight {
  background: linear-gradient(135deg, var(--green-mid), var(--green-bright));
  border-color: transparent; box-shadow: 0 8px 24px rgba(76,168,48,0.3);
}
.calc-result-val {
  font-family: var(--font-body); font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 0.3rem;
}
.calc-result-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: rgba(255,255,255,0.6);
}
.calc-impact-bar {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg); padding: 1.25rem;
}
.calc-impact-label {
  display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--green-light); margin-bottom: 0.85rem;
}
.calc-impact-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.calc-impact-item { text-align: center; }
.calc-impact-item .impact-icon { display: block; font-size: 1.4rem; margin-bottom: 0.25rem; }
.calc-impact-val {
  display: block; font-family: var(--font-body); font-size: 1.25rem;
  font-weight: 700; color: var(--green-light); margin-bottom: 0.2rem;
}
.calc-impact-text { font-size: 0.69rem; color: rgba(255,255,255,0.55); line-height: 1.3; }
.calc-disclaimer {
  font-size: 0.75rem; color: rgba(255,255,255,0.45); line-height: 1.65; font-style: italic;
}
.calc-disclaimer a { color: var(--green-light); }

/* ── Impact Numbers (home page) ── */
.impact-numbers { background: var(--off-white); }
.impact-intro h2 { color: var(--green-deep); }
.impact-intro p  { color: var(--text-muted); }
.impact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3rem;
}
.impact-stat {
  background: var(--white); border-radius: var(--radius-xl);
  padding: 2rem 1.5rem; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(45,122,48,0.08);
  border-top: 3px solid var(--green-bright); transition: var(--transition);
}
.impact-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.impact-stat-icon { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.impact-stat-val {
  font-family: var(--font-body); font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 700; color: var(--green-deep); line-height: 1; margin-bottom: 0.4rem;
}
.impact-stat-label {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--green-forest); margin-bottom: 0.35rem;
}
.impact-stat-sub { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }

/* ============================================================
   QUOTE FORM
   ============================================================ */
.quote-section { background: var(--off-white); }
.quote-inner {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start;
}
.quote-left h2 { color: var(--green-deep); margin-bottom: 1rem; }
.quote-left p { margin-bottom: 2rem; }
.quote-differentiators { display: flex; flex-direction: column; gap: 1rem; }
.q-diff {
  display: flex; align-items: flex-start; gap: 0.85rem;
  background: var(--white); border-radius: var(--radius-md); padding: 1rem 1.25rem;
  border: 1px solid rgba(45,122,48,0.1); box-shadow: var(--shadow-sm);
}
.q-diff-icon { font-size: 1.4rem; flex-shrink: 0; }
.q-diff-text strong { display: block; font-size: 0.9rem; color: var(--green-forest); margin-bottom: 0.15rem; }
.q-diff-text span { font-size: 0.82rem; color: var(--text-muted); }

/* Quote form */
.quote-form-wrap {
  background: var(--white); border-radius: var(--radius-xl);
  padding: 2.5rem; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(45,122,48,0.1);
}
.quote-form { display: flex; flex-direction: column; gap: 1.1rem; }
.quote-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.quote-form .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.quote-form label {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--green-forest);
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(45,122,48,0.2);
  border-radius: var(--radius-md);
  font-size: 0.95rem; font-family: var(--font-body);
  color: var(--text-dark); background: var(--off-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.quote-form input::placeholder,
.quote-form textarea::placeholder { color: var(--text-light); }
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none; border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(45,122,48,0.12);
  background: var(--white);
}
.quote-form textarea { resize: vertical; min-height: 110px; }
.quote-form-submit { margin-top: 0.5rem; width: 100%; justify-content: center; }
@media (max-width: 768px) {
  /* Stack form rows single-column */
  .quote-form-row { grid-template-columns: 1fr; }

  /* Tighten form card padding on small screens */
  .quote-form-wrap { padding: 1.25rem; border-radius: var(--radius-lg); }

  /* CRITICAL: prevent iOS Safari auto-zoom on input focus */
  .quote-form input,
  .quote-form select,
  .quote-form textarea { font-size: 1rem; }

  /* Larger touch targets */
  .quote-form input,
  .quote-form select { min-height: 48px; }

  /* Collapse differentiators on mobile — form is the priority */
  .quote-differentiators { display: none; }

  /* Tighter gap between left text and form */
  .quote-inner { gap: 1.5rem; }

  /* Submit button full width with comfortable tap height */
  .quote-form-submit { min-height: 52px; font-size: 1rem; }
}

/* ============================================================
   PROJECTS / USE CASES
   ============================================================ */
.projects { background: var(--paper); }
.projects-intro { max-width: 640px; margin: 0 auto 3.5rem; }
.projects-intro h2 { color: var(--green-deep); margin-bottom: 0.75rem; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.project-card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(45,122,48,0.1); box-shadow: var(--shadow-sm);
  transition: var(--transition); display: flex; flex-direction: column;
}
.project-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.project-card-bar { height: 4px; }
.project-card-body { padding: 1.75rem; flex: 1; text-align: center; }
.project-icon { font-size: 2rem; margin-bottom: 1rem; display: flex; justify-content: center; }
.project-card h3 { color: var(--green-deep); font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.project-card p { font-size: 0.9rem; line-height: 1.65; }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners { background: var(--green-forest); }
.partner-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.partner-left .section-label { color: var(--green-light); }
.partner-left h2 { color: var(--white); margin-bottom: 1rem; }
.partner-left p { color: rgba(200,240,216,0.75); margin-bottom: 2rem; }
.partner-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.partner-card {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(200,240,216,0.15);
  border-radius: var(--radius-xl); padding: 2.5rem;
  backdrop-filter: blur(8px);
}
.partner-logo-area {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem;
}
.partner-logo-mark {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--teal-accent), var(--green-bright));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.partner-logo-mark--img {
  background: var(--white);
  padding: 6px;
  width: 80px; height: 56px;
}
.partner-logo-img {
  width: 100%; height: 100%; object-fit: contain;
}
.partner-name { color: var(--white); font-family: var(--font-display); font-size: 1.4rem; }
.partner-name span { display: block; font-family: var(--font-body); font-size: 0.78rem; color: var(--green-light); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.partner-card p { color: rgba(200,240,216,0.7); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.5rem; }
.partner-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.partner-tag {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(200,240,216,0.15);
  border-radius: 100px; padding: 0.3rem 0.75rem;
  font-size: 0.75rem; color: var(--mint); font-weight: 600;
}

/* About page: MDC section uses off-white bg, so partner-left needs dark text */
.page-about .partner-left .section-label { color: var(--green-mid); }
.page-about .partner-left h2 { color: var(--green-deep); }
.page-about .partner-left p { color: var(--text-muted); }

/* ============================================================
   INVESTORS
   ============================================================ */
.investors { background: var(--charcoal); }
.investors-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.investor-left .section-label { color: var(--green-bright); }
.investor-left h2 { color: var(--white); margin-bottom: 1rem; }
.investor-left p { color: rgba(255,255,255,0.6); margin-bottom: 2rem; }

.investor-badges { display: flex; flex-direction: column; gap: 1rem; }
.investor-badge {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md); padding: 1.1rem 1.5rem;
  transition: var(--transition);
}
.investor-badge:hover { background: rgba(255,255,255,0.08); border-color: rgba(76,168,48,0.3); }
.badge-icon { font-size: 1.5rem; flex-shrink: 0; }
.badge-content { flex: 1; }
.badge-content strong { display: block; color: var(--white); font-size: 0.95rem; }
.badge-content span { font-size: 0.8rem; color: rgba(255,255,255,0.45); }
.badge-ticker {
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--gold-accent); font-weight: 700;
  background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius-sm); padding: 0.25rem 0.6rem;
}

.investor-right {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl); padding: 2.5rem; text-align: center;
}
.company-seal {
  width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, var(--green-forest), var(--green-mid));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.investor-right h3 { color: var(--white); font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 0.5rem; }
.ticker-display { display: flex; justify-content: center; gap: 1.5rem; margin: 1.25rem 0; }
.ticker-block { text-align: center; }
.ticker-block .t-exchange { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); }
.ticker-block .t-symbol { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--gold-accent); }
.investor-right > p { color: rgba(255,255,255,0.5); font-size: 0.85rem; margin-bottom: 2rem; }
.btn-investor { border: 2px solid rgba(201,168,76,0.4); color: var(--gold-accent); }
.btn-investor:hover { background: rgba(201,168,76,0.1); border-color: var(--gold-accent); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  background: linear-gradient(135deg, #102e14 0%, #0c2610 60%, #081808 100%);
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(5rem, 10vw, 8rem) 0;
}
.cta-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(76,168,48,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.final-cta .section-label { color: var(--green-bright); }
.final-cta h2 { color: var(--white); max-width: 800px; margin: 0.5rem auto 1rem; }
.final-cta > .container > p { color: rgba(200,240,216,0.7); max-width: 560px; margin: 0 auto 2.5rem; }
.cta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--green-deep); border-top: 1px solid rgba(200,240,216,0.08);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand p { color: rgba(200,240,216,0.55); font-size: 0.88rem; margin: 1rem 0 1.5rem; max-width: 260px; line-height: 1.7; }
.footer-stock { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0 0; }
.footer-stock-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.75rem;
}
.footer-stock-flag { font-size: 0.9rem; }
.footer-stock-exch { color: rgba(200,240,216,0.45); }
.footer-stock-sym { color: var(--gold-accent); font-weight: 700; }
.footer-stock-price { color: rgba(200,240,216,0.9); }
.footer-stock-change { font-size: 0.7rem; }
.footer-stock .stock-change.up   { color: #4caf74; }
.footer-stock .stock-change.down { color: #e05252; }
.footer-stock .stock-change.flat { color: rgba(200,240,216,0.45); }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer-social-link {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(200,240,216,0.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(200,240,216,0.9); transition: var(--transition);
}
.footer-social-link:hover { background: rgba(76,168,48,0.25); border-color: var(--green-bright); color: var(--white); }
.footer-social-link svg { width: 1.1rem; height: 1.1rem; stroke: rgba(200,240,216,0.9); stroke-width: 1.75; fill: none; }
.footer-social-link:hover svg { stroke: var(--white); }
.footer-social-link svg[fill="currentColor"] { fill: rgba(200,240,216,0.9); stroke: none; }
.footer-social-link:hover svg[fill="currentColor"] { fill: var(--white); }

/* UNF case study video background */
.unf-video-section {
  position: relative;
  overflow: hidden;
}
.unf-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.unf-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8,22,10,0.84) 0%, rgba(12,38,16,0.76) 100%);
}
.unf-video-section .container { position: relative; z-index: 1; }
.unf-video-section .two-col-text h2 { color: var(--white); }
.unf-video-section .section-label { color: var(--green-light); }
.unf-video-section .two-col-text a.btn-primary { margin-top: 2rem; }
.unf-logo-img { height: 64px; width: auto; object-fit: contain; }

/* Video section */
.video-section { background: var(--off-white); }
.video-intro { max-width: 600px; margin: 0 auto 2.5rem; }
.video-intro h2 { color: var(--green-deep); margin-bottom: 0.75rem; }
.video-intro p { color: var(--text-muted); }
.video-wrap {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-xl);
  max-width: 860px; margin: 0 auto;
}
.video-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius-xl);
}
/* YouTube Facade — loads ~0 KB until user clicks play */
.yt-facade {
  position: absolute; inset: 0; cursor: pointer;
  background: #000; border-radius: var(--radius-xl); overflow: hidden;
}
.yt-facade img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter 0.25s ease;
  display: block;
}
.yt-facade:hover img,
.yt-facade:focus-visible img { filter: brightness(0.7); }
.yt-facade-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.yt-facade-play svg {
  width: 72px; height: 51px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  transition: transform 0.2s ease;
}
.yt-facade:hover .yt-facade-play svg,
.yt-facade:focus-visible .yt-facade-play svg { transform: scale(1.12); }
.yt-facade:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 3px; }
.video-channel-link { margin-top: 2rem; display: flex; justify-content: center; }
.video-channel-link .btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.video-channel-link svg { width: 1.1rem; height: 1.1rem; stroke: var(--white); fill: none; stroke-width: 1.75; }

.footer-col h4 { color: var(--mint); font-size: 0.78rem; letter-spacing: 0.1em; margin-bottom: 1.25rem; }
.footer-col a { display: block; color: rgba(200,240,216,0.55); font-size: 0.88rem; margin-bottom: 0.65rem; transition: var(--transition); }
.footer-col a:hover { color: var(--mint); }
.footer-bottom {
  border-top: 1px solid rgba(200,240,216,0.08); padding-top: 2rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { color: rgba(200,240,216,0.3); font-size: 0.82rem; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
}
.page-hero--dark {
  background: linear-gradient(160deg, var(--green-deep) 0%, #102e14 50%, #0c2211 100%);
}
.page-hero--green {
  background: linear-gradient(160deg, var(--green-forest) 0%, var(--green-mid) 100%);
}
.page-hero .section-label { color: var(--green-light); }
.page-hero h1 { color: var(--white); margin-bottom: 1rem; }
.page-hero h1 em { font-style: normal; color: var(--green-bright); }
.page-hero-sub {
  color: rgba(200,240,216,0.8); font-size: clamp(1rem, 1.5vw, 1.2rem);
  max-width: 620px; line-height: 1.7;
}

/* ============================================================
   TWO-COLUMN SECTION
   ============================================================ */
.two-col-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.two-col-text h2 { color: var(--green-deep); margin-bottom: 1rem; }
.two-col-text p { margin-bottom: 0.75rem; }

/* ============================================================
   MISSION CARDS (About page)
   ============================================================ */
.two-col-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mission-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem;
  border: 1px solid rgba(45,122,48,0.1); box-shadow: var(--shadow-sm);
  transition: var(--transition); text-align: center;
}
.mission-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mission-icon { font-size: 1.75rem; display: flex; justify-content: center; margin-bottom: 0.75rem; }
.mission-card h3 { color: var(--green-deep); font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; }
.mission-card p { font-size: 0.85rem; }

/* ============================================================
   NEWS PAGE
   ============================================================ */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 4rem; }
.news-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 2rem;
  border: 1px solid rgba(45,122,48,0.1); box-shadow: var(--shadow-sm);
  transition: var(--transition); display: flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.news-card-meta { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.news-date { font-size: 0.8rem; color: var(--text-light); font-weight: 600; }
.news-tag {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(76,168,48,0.1); color: var(--green-mid); border-radius: 100px;
  padding: 0.2rem 0.65rem;
}
.news-card-title { font-family: var(--font-display); font-size: clamp(1.1rem,2vw,1.4rem); color: var(--green-deep); margin-bottom: 0.75rem; line-height: 1.3; }
.news-card-excerpt { font-size: 0.9rem; line-height: 1.65; flex: 1; }
.news-card-footer { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(45,122,48,0.08); }
.news-read-more { font-size: 0.88rem; font-weight: 700; color: var(--green-mid); transition: var(--transition); }
.news-read-more:hover { color: var(--green-bright); }
.news-signup {
  background: var(--white); border-radius: var(--radius-xl); padding: 3rem;
  text-align: center; border: 1px solid rgba(45,122,48,0.1); box-shadow: var(--shadow-md);
  max-width: 540px; margin: 0 auto;
}
.news-signup h3 { color: var(--green-deep); margin-bottom: 0.75rem; }
.news-signup > p { margin-bottom: 1.75rem; }
.news-signup { max-width: 580px; text-align: left; }
.subscribe-form { display: flex; flex-direction: column; gap: 1.1rem; }
.subscribe-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.82rem; font-weight: 700; color: var(--green-deep); letter-spacing: 0.03em; }
.form-optional { font-weight: 400; color: var(--text-light); }
.form-group input {
  padding: 0.7rem 1rem; border: 1.5px solid rgba(45,122,48,0.25);
  border-radius: var(--radius-md); font-size: 0.95rem; font-family: var(--font-body);
  color: var(--text-dark); background: var(--off-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input::placeholder { color: var(--text-light); }
.form-group input:focus { outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(45,122,48,0.12); }
.subscribe-form-submit { margin-top: 0.5rem; align-self: flex-start; }
@media (max-width: 480px) {
  .subscribe-form-row { grid-template-columns: 1fr; }
  .subscribe-form-submit { align-self: stretch; text-align: center; }
}
/* CRITICAL: prevent iOS Safari auto-zoom on subscribe/contact form inputs */
@media (max-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 1rem; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.contact-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 2rem;
  border: 1px solid rgba(45,122,48,0.1); box-shadow: var(--shadow-sm);
  transition: var(--transition); text-align: center;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contact-icon { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.contact-card h3 { color: var(--green-deep); font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.contact-card p { font-size: 0.9rem; }

/* ============================================================
   LUCIDE ICONS
   ============================================================ */
[data-lucide] { display: inline-block; vertical-align: middle; flex-shrink: 0; }

.problem-icon  [data-lucide] { width: 2.25rem;  height: 2.25rem;  stroke: var(--green-bright); stroke-width: 1.5; }
.mission-icon  [data-lucide] { width: 2.5rem;   height: 2.5rem;   stroke: var(--green-bright); stroke-width: 1.5; }
.step-icon     [data-lucide] { width: 1.9rem;   height: 1.9rem;   stroke: var(--white);        stroke-width: 1.5; }
.project-icon  [data-lucide] { width: 2.25rem;  height: 2.25rem;  stroke: var(--green-bright); stroke-width: 1.5; }
.contact-icon  [data-lucide] { width: 2.5rem;   height: 2.5rem;   stroke: var(--green-bright); stroke-width: 1.5; }
.q-diff-icon   [data-lucide] { width: 1.6rem;   height: 1.6rem;   stroke: var(--green-bright); stroke-width: 1.75; }
.impact-stat-icon [data-lucide] { width: 2.25rem; height: 2.25rem; stroke: var(--green-mid);   stroke-width: 1.5; }
.partner-logo-mark [data-lucide] { width: 2rem;  height: 2rem;    stroke: var(--white);        stroke-width: 1.5; }
.badge-icon    [data-lucide] { width: 1.6rem;   height: 1.6rem;   stroke: var(--green-bright); stroke-width: 1.5; }
.company-seal  [data-lucide] { width: 3rem;     height: 3rem;     stroke: var(--green-light);  stroke-width: 1.25; }
.company-seal-logo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.calc-impact-item .impact-icon [data-lucide] { width: 1.75rem; height: 1.75rem; stroke: var(--green-light); stroke-width: 1.5; }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.fade-in {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Staggered children */
.stagger-children .fade-in:nth-child(1) { transition-delay: 0.05s; }
.stagger-children .fade-in:nth-child(2) { transition-delay: 0.12s; }
.stagger-children .fade-in:nth-child(3) { transition-delay: 0.19s; }
.stagger-children .fade-in:nth-child(4) { transition-delay: 0.26s; }
.stagger-children .fade-in:nth-child(5) { transition-delay: 0.33s; }
.stagger-children .fade-in:nth-child(6) { transition-delay: 0.40s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   VISUAL POLISH
   ============================================================ */

/* Page hero: constrain sub-text width */
.page-hero-sub { max-width: 640px; }

/* Page hero green variant: boost sub-text contrast */
.page-hero--green .page-hero-sub { color: rgba(255,255,255,0.92); }
.page-hero--green h1 { color: var(--white); }

/* Page hero: add a subtle left accent stripe */
.page-hero .container { border-left: 3px solid var(--green-bright); padding-left: calc(var(--gutter) + 1.25rem); }

/* Two-col headings: tighter scale so they don't dominate the column */
.two-col-text h2 { font-size: clamp(1.5rem, 2.8vw, 2.4rem); }

/* News cards: top accent bar matching project card visual language */
.news-card { border-top: 3px solid var(--green-bright); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.news-card:hover { border-top-color: var(--teal-accent); }

/* Contact cards: reveal accent on hover */
.contact-card { border-top: 3px solid transparent; }
.contact-card:hover { border-top-color: var(--green-bright); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* News signup: green left border accent */
.news-signup { border-left: 4px solid var(--green-bright); }

/* Mission cards on About: tighter icon */
.mission-icon { line-height: 1; }

/* Smooth section-to-section transitions: slight shadow on white sections after dark */
.solution + .section-pad,
.partners + .section-pad { box-shadow: inset 0 8px 24px rgba(12,38,16,0.04); }

/* Quote form page: wider single-column layout (desktop only) */
@media (min-width: 1025px) {
  .page-quote .quote-inner { grid-template-columns: 1fr 1.8fr; }
}

/* Ticker display divider */
.ticker-display > div[style] { opacity: 0.15; }

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .quote-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .partner-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .investors-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .two-col-section { grid-template-columns: 1fr; gap: 2.5rem; }
  .two-col-cards { grid-template-columns: 1fr 1fr; }
  .calc-layout { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) and (min-width: 901px) {
  .problem-grid { grid-template-columns: repeat(4, 1fr); }
}
}
@media (max-width: 640px) {
  .problem-grid { grid-template-columns: 1fr; }
  .two-col-cards { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .calc-results-grid { grid-template-columns: 1fr 1fr; }
  .calc-impact-row { grid-template-columns: 1fr; gap: 1rem; }
  .impact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  /* Hero: collapse to single column — content first, card second */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-content { max-width: 100%; }
  .hero-visual {
    justify-content: center;
    padding-top: 0;
  }
  .water-card { max-width: 480px; width: 100%; }

  /* Impact grid: 2 columns instead of 4 */
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Nav */
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: block; }

  /* Forms */
  .form-grid { grid-template-columns: 1fr; }
  .calc-inputs { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-brand p { max-width: 100%; }
  .footer-social { justify-content: flex-start; }

  /* Hero */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; }
  .hero h1 { font-size: clamp(2.4rem, 8vw, 3.5rem); }
  .hero-sub { font-size: 1rem; }
  .hero-badge { font-size: 0.7rem; padding: 0.5rem 0.85rem; }

  /* Banner layout on mobile: the video sits as a full-width banner across the
     TOP of the hero, and ALL hero copy (badge, headline, paragraph, CTAs) sits
     BELOW it on solid green so nothing overlaps the video and stays legible.
     Top-anchor the content (flex-start) instead of vertically centering it. */
  .page-home .hero { min-height: 100svh; background: var(--green-deep); align-items: flex-start; }

  /* Push the hero copy down past the video banner. The contained 16:9 banner
     is 56.25vw tall; +28px clears it with a small gap. vw-based so it scales
     with the banner across phone widths (320–430px verified). */
  .page-home .hero-content { padding-top: calc(56.25vw + 28px); }

  /* Mobile video: full width, contain = entire generator visible, zoomed out,
     no crop, no stretch. inset:0 keeps it filling the hero so overflow:hidden
     clips it — zero scroll-zoom. The element's green bg + the gradient below
     blend the letterbox top/bottom into the hero so there's no visible box.
     Higher specificity (.page-home prefix) so it beats the base .page-bg-video
     rule defined later in the file.
     object-position 5%: pins the AWG banner near the top, just below the
     header, with the copy flowing beneath it. */
  .page-home .page-bg-video {
    object-fit: contain;
    object-position: center 5%;
  }

  /* Blend video into hero: light over the generator, fading to solid green
     at the bottom so the contain letterbox edge never reads as a hard box. */
  .page-home .hero::before {
    background: linear-gradient(
      to bottom,
      rgba(12,38,16,0.25) 0%,
      rgba(12,38,16,0.18) 28%,
      rgba(12,38,16,0.30) 46%,
      rgba(12,38,16,0.85) 66%,
      var(--green-deep)   82%
    ) !important;
  }

  /* Section padding tighter on mobile */
  .section-pad { padding: clamp(2.5rem, 8vw, 4.5rem) 0; }

  /* Video section */
  .video-wrap { border-radius: var(--radius-md); }

  /* UNF case study: banner layout (same method as the homepage hero on mobile).
     Video sits as a 16:9 banner across the TOP of the section; all the case-study
     copy sits BELOW it on solid green so nothing overlaps the video. */
  .unf-video-section { background: var(--green-deep); padding-top: 0; }
  .unf-bg-video {
    top: 0;
    left: 0;
    width: 100%;
    height: 56.25vw;     /* 16:9 banner — scales with viewport width */
    transform: none;
    object-fit: cover;
    object-position: center;
  }
  /* Overlay only tints the banner and fades its bottom edge into the green */
  .unf-video-overlay {
    height: 56.25vw;
    background: linear-gradient(
      to bottom,
      rgba(8,22,10,0.25) 0%,
      rgba(8,22,10,0.35) 55%,
      var(--green-deep) 100%
    );
  }
  /* Push the copy below the banner */
  .unf-video-section .container { padding-top: calc(56.25vw + 2rem); }

  /* Calc results: 2 cols */
  .calc-results-grid { grid-template-columns: 1fr 1fr; }
  .calc-impact-row { grid-template-columns: 1fr; gap: 1rem; }

  /* News/partners */
  .news-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   RESPONSIVE — SMALL (≤ 560px)
   ============================================================ */
@media (max-width: 560px) {
  /* Hero card: tighter padding, smaller stats */
  .water-card { padding: 1.75rem; }
  .water-stat .stat-num { font-size: 1.5rem; }
  .water-stat-grid { gap: 0.75rem; }

  /* Process steps */
  .process-steps { grid-template-columns: 1fr 1fr; gap: 2rem 0; }
  .awg-connector { display: none; }

  /* Footer stock: wrap gracefully */
  .footer-stock-row { flex-wrap: wrap; gap: 0.4rem 0.6rem; }

  /* Trust pills */
  .trust-pills { gap: 0.4rem; }
  .trust-pill { font-size: 0.72rem; padding: 0.3rem 0.7rem; }
}

/* ============================================================
   RESPONSIVE — XS (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  /* Process / projects */
  .process-steps { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .ticker-display { flex-direction: column; gap: 0.75rem; }

  /* Hero: single CTA stack, full width */
  .hero { padding: 1.5rem 0 3rem; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); margin-bottom: 1rem; }
  .hero-sub { margin-bottom: 1.75rem; }
  .hero-actions { gap: 0.75rem; }

  /* Impact grid: single column at 480 */
  .impact-grid { grid-template-columns: 1fr 1fr; gap: 0.85rem; }

  /* Water card: minimal padding */
  .water-card { padding: 1.25rem; border-radius: var(--radius-lg); }
  .water-card h3 { font-size: 1.1rem; }
  .water-card p { margin-bottom: 1.25rem; }
  .water-card-icon--logo { width: 100px; height: 52px; }

  /* Section label smaller */
  .section-label { font-size: 0.7rem; }

  /* Footer tidier at 320px */
  .footer-brand p { font-size: 0.82rem; }
}

/* ============================================================
   HERO BACKGROUND VIDEO (homepage)
   Now lives INSIDE <section class="hero"> so it clips to hero
   bounds — eliminates scroll-zoom bleed through lower sections.
   ============================================================ */
.page-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--green-deep);
  z-index: 0;
  display: block;
}

/* Hero: semi-transparent green gradient so video shows through */
/* Video is z-index:0; overlay must be a pseudo-element ABOVE it (z-index:1),
   not the element background (which paints behind all children). */
.page-home .hero { background: none; }
.page-home .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(12,38,16,0.78) 0%,
    rgba(16,46,20,0.72) 45%,
    rgba(12,34,17,0.78) 100%
  );
}
/* Content above overlay */
.page-home .hero .hero-bg,
.page-home .hero .container { position: relative; z-index: 2; }

/* ── Homepage sections: now solid — video no longer bleeds through ── */

/* Impact numbers */
.page-home .impact-numbers { background: var(--green-deep); }
.page-home .impact-intro h2 { color: var(--white); }
.page-home .impact-intro p  { color: rgba(200,240,216,0.8); }
.page-home .impact-numbers .section-label { color: var(--green-light); }
.page-home .impact-stat { background: var(--white); }

/* Problem / challenge */
.page-home .problem { background: rgba(8,22,10,0.85); }
.page-home .problem-intro h2 { color: var(--white); }
.page-home .problem-intro p  { color: rgba(200,240,216,0.8); }
.page-home .problem .section-label { color: var(--green-light); }
/* Keep problem cards solid so text inside stays readable */
.page-home .problem-card { background: rgba(255,255,255,0.92); }

/* YouTube video section */
.page-home .video-section { background: rgba(8,22,10,0.52); }
.page-home .video-intro h2 { color: var(--white); }
.page-home .video-intro p  { color: rgba(200,240,216,0.8); }
.page-home .video-section .section-label { color: var(--green-light); }

/* Final CTA — already dark, just reduce opacity slightly */
.page-home .final-cta {
  background: linear-gradient(135deg,
    rgba(16,46,20,0.88) 0%,
    rgba(12,38,16,0.88) 60%,
    rgba(8,24,8,0.92) 100%
  );
}

/* Impact counter-up button outline (text on dark bg) */
.page-home .impact-numbers .btn-outline { color: var(--white); border-color: rgba(200,240,216,0.5); }
.page-home .impact-numbers .btn-outline:hover { background: rgba(255,255,255,0.1); }

/* ============================================================
   DESKTOP ONLY: full-page fixed background video that bleeds
   through the lower sections as you scroll (the original look).
   The hero is NOT a stacking context (position:relative, no z-index),
   so z-index:-1 puts the fixed video behind the whole page, and
   overflow:hidden on the hero does not clip a fixed descendant.
   Mobile keeps the contained in-hero video (see @media max-width:768px)
   because position:fixed jitters with the mobile address-bar resize.
   ============================================================ */
@media (min-width: 769px) {
  .page-bg-video {
    position: fixed;
    top: 116px;
    left: 0;
    width: 100%;
    height: calc(100vh - 116px);
    /* cover (full-bleed): video fills the hero behind the text on load, the
       original look. object-position 30% nudges the AWG up into the headroom
       above it — crops 30% of the cover overflow from the top (the empty space
       over the unit) and reveals more of the base, while the unit top still
       clears the 116px header. Proportional, so it's a slight shift on small
       screens and a bit more on large ones. */
    object-fit: cover;
    object-position: center 30%;
    z-index: -1;
  }

  /* Sections go semi-transparent so the fixed video shows through on scroll */
  .page-home .impact-numbers { background: rgba(8,22,10,0.52); }
  .page-home .problem        { background: rgba(8,22,10,0.60); }
  .page-home .video-section  { background: rgba(8,22,10,0.52); }
  .page-home .final-cta {
    background: linear-gradient(135deg,
      rgba(16,46,20,0.88) 0%,
      rgba(12,38,16,0.88) 60%,
      rgba(8,24,8,0.92) 100%
    );
  }
}

/* Reduced motion: hide video, restore all solid backgrounds */
@media (prefers-reduced-motion: reduce) {
  .page-bg-video { display: none; }
  .unf-bg-video { display: none; }
  .unf-video-section { background: var(--green-deep); }
  .unf-video-overlay { background: linear-gradient(135deg, rgba(8,22,10,0.95) 0%, rgba(12,38,16,0.95) 100%); }
  .page-home .hero         { background: linear-gradient(160deg, var(--green-deep) 0%, #102e14 45%, #0c2211 100%); }
  .page-home .impact-numbers { background: var(--off-white); }
  .page-home .impact-intro h2 { color: var(--green-deep); }
  .page-home .impact-intro p  { color: var(--text-muted); }
  .page-home .problem        { background: var(--off-white); }
  .page-home .problem-intro h2 { color: var(--green-deep); }
  .page-home .problem-intro p  { color: var(--text-muted); }
  .page-home .video-section  { background: var(--off-white); }
  .page-home .video-intro h2 { color: var(--green-deep); }
  .page-home .video-intro p  { color: var(--text-muted); }
  .page-home .final-cta      { background: linear-gradient(135deg, #102e14 0%, #0c2610 60%, #081808 100%); }
}

/* ============================================================
   BOARD OF ADVISORS
   ============================================================ */

/* Section */
.advisors-section { background: var(--paper); }

.advisors-intro {
  max-width: 600px;
  margin: 0 auto 4rem;
}
.advisors-intro h2 { color: var(--green-deep); margin-bottom: 0.75rem; }
.advisors-intro p  { color: var(--text-muted); max-width: 520px; margin: 0 auto; }

/* ── Advisor list ── */
.advisors-list {
  display: flex;
  flex-direction: column;
  max-width: 920px;
  margin: 0 auto;
}

.advisor-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0 3.5rem;
  padding: 3.5rem 0;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  position: relative;
  align-items: start;
}
.advisor-row:last-child {
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

/* Photo column */
.advisor-photo-wrap {
  position: relative;
}
.advisor-seq {
  position: absolute;
  top: -0.75rem;
  right: -0.5rem;
  font-family: var(--font-display);
  font-size: 6.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-accent);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.advisor-img-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--green-forest);
  z-index: 1;
  box-shadow: var(--shadow-md);
}
.advisor-img-frame::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: -6px;
  width: 36px;
  height: 36px;
  border-bottom: 2px solid var(--gold-accent);
  border-left: 2px solid var(--gold-accent);
  pointer-events: none;
  z-index: 3;
}
.advisor-initials-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--green-forest) 0%, var(--green-deep) 100%);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  color: rgba(200, 240, 216, 0.18);
  letter-spacing: -0.02em;
  user-select: none;
  z-index: 1;
}
.advisor-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  z-index: 2;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.advisor-row:hover .advisor-photo {
  transform: scale(1.04);
}

/* Content column */
.advisor-content {
  padding-top: 0.25rem;
}
.advisor-role-tag {
  display: inline-block;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-accent);
  margin-bottom: 0.55rem;
}
.advisor-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  font-weight: 600;
  color: var(--green-deep);
  line-height: 1.1;
  margin: 0 0 0.3rem;
}
.advisor-position {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1.2rem;
}
.advisor-rule {
  width: 44px;
  height: 2px;
  background: var(--gold-accent);
  margin-bottom: 1.2rem;
}
.advisor-bio {
  font-size: 0.93rem;
  color: var(--charcoal-mid);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.advisor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.advisor-tag {
  background: rgba(12, 38, 16, 0.05);
  border: 1px solid rgba(12, 38, 16, 0.14);
  border-radius: 100px;
  padding: 0.22rem 0.7rem;
  font-size: 0.7rem;
  color: var(--green-forest);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Responsive */
@media (max-width: 768px) {
  .advisor-row {
    grid-template-columns: 1fr;
    gap: 1.75rem 0;
    padding: 2.5rem 0;
  }
  .advisor-img-frame { width: 200px; }
  .advisor-seq       { font-size: 5rem; }
  .advisor-name      { font-size: 1.7rem; }
}
@media (max-width: 480px) {
  .advisor-row  { padding: 2rem 0; }
  .advisor-img-frame { width: 160px; }
  .advisor-bio  { font-size: 0.9rem; }
}


/* ============================================================
   WATER QUALITY RESOURCES SECTION
   ============================================================ */
.water-quality-section { background: var(--green-deep); }
.water-quality-section .section-label { color: var(--green-light); }
.water-quality-section h2 { color: var(--white); max-width: 760px; margin: 0.5rem auto 1rem; }
.water-quality-section > .container > .wq-intro p {
  color: rgba(200,240,216,0.75); max-width: 600px; margin: 0 auto;
}

.wq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.wq-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(76,168,48,0.2);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  transition: border-color 0.2s, background 0.2s;
}
.wq-card:hover { border-color: rgba(76,168,48,0.5); background: rgba(255,255,255,0.07); }
.wq-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: rgba(76,168,48,0.15);
  border-radius: 10px;
  margin: 0 auto 1rem;
}
.wq-card-icon i { width: 22px; height: 22px; stroke: var(--green-bright); }
.wq-card h3 { color: var(--white); font-size: 1.1rem; margin-bottom: 0.6rem; text-align: center; }
.wq-card p { color: rgba(200,240,216,0.7); font-size: 0.92rem; line-height: 1.7; }

/* EWG Callout */
.ewg-callout { margin-top: 3.5rem; }
.ewg-callout-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(76,168,48,0.3);
  border-radius: 16px;
  padding: 2.5rem;
}
.ewg-callout-text .section-label { color: var(--green-bright); }
.ewg-callout-text h3 { color: var(--white); font-size: clamp(1.4rem, 2.5vw, 2rem); margin: 0.4rem 0 1rem; }
.ewg-callout-text h3 em { color: var(--green-bright); font-style: normal; }
.ewg-callout-text p { color: rgba(200,240,216,0.75); line-height: 1.7; max-width: 560px; }
.ewg-feature-list {
  list-style: none; margin: 1.25rem 0 1.75rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.ewg-feature-list li {
  display: flex; align-items: center; gap: 0.6rem;
  color: rgba(200,240,216,0.85); font-size: 0.93rem;
}
.ewg-feature-list li i { width: 16px; height: 16px; stroke: var(--green-bright); flex-shrink: 0; }
.ewg-btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.ewg-btn i { width: 16px; height: 16px; stroke: currentColor; }

.ewg-callout-stat { text-align: center; }
.ewg-stat-ring {
  width: 180px; height: 180px;
  border-radius: 50%;
  background: conic-gradient(var(--green-bright) 0%, rgba(76,168,48,0.15) 0%);
  border: 3px solid rgba(76,168,48,0.3);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ewg-stat-ring::before {
  content: '';
  position: absolute; inset: 12px;
  border-radius: 50%;
  background: rgba(16,46,20,0.95);
}
.ewg-stat-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
}
.ewg-stat-num {
  font-family: var(--font-display); font-size: 2.4rem; color: var(--green-bright); line-height: 1;
}
.ewg-stat-label { font-size: 0.72rem; color: rgba(200,240,216,0.65); text-align: center; line-height: 1.4; }
.ewg-stat-note { margin-top: 0.75rem; font-size: 0.72rem; color: rgba(200,240,216,0.4); }

@media (max-width: 768px) {
  .ewg-callout-inner {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    overflow: hidden;
  }
  .ewg-callout-stat { display: none; }
  .ewg-callout-text { min-width: 0; overflow: hidden; }
  .ewg-callout-text p { max-width: 100%; }
  .ewg-feature-list li {
    align-items: flex-start;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .ewg-btn { white-space: normal; text-align: left; }
}

/* Articles grid */
.wq-articles { margin-top: 3.5rem; }
.wq-articles .section-label { color: var(--green-light); }
.wq-articles h3 { color: var(--white); font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 0.4rem 0 1.5rem; }
.wq-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.wq-article-card {
  display: flex; flex-direction: column; gap: 0.6rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(76,168,48,0.18);
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1rem;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  position: relative;
}
.wq-article-card:hover {
  border-color: var(--green-bright);
  background: rgba(76,168,48,0.08);
  transform: translateY(-2px);
}
.wq-article-source {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--green-bright); text-transform: uppercase;
}
.wq-article-card p {
  color: rgba(200,240,216,0.75); font-size: 0.88rem; line-height: 1.55; flex: 1;
  margin: 0;
}
.wq-article-arrow {
  font-size: 1rem; color: rgba(76,168,48,0.5);
  align-self: flex-end;
  transition: color 0.2s;
}
.wq-article-card:hover .wq-article-arrow { color: var(--green-bright); }

/* ============================================================
   404 PAGE
   ============================================================ */
.error-404 {
  min-height: calc(100vh - 80px);
  display: flex; align-items: center;
  background: linear-gradient(160deg, var(--green-deep) 0%, #0c2610 60%, #081808 100%);
}
.error-404-inner { max-width: 560px; margin: 0 auto; }
.error-404-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(76,168,48,0.15);
  border: 1px solid rgba(76,168,48,0.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.error-404-icon i { width: 36px; height: 36px; stroke: var(--green-bright); }
.error-404 .section-label { color: var(--green-light); }
.error-404 h1 { color: var(--white); font-size: clamp(2.5rem, 8vw, 5rem); margin: 0.5rem 0 1rem; }
.error-404 p { color: rgba(200,240,216,0.7); font-size: 1.1rem; margin-bottom: 2.5rem; }
.error-404-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* Newsletter (hidden until ready) */
.newsletter-form { max-width: 480px; margin: 1.5rem auto 0; }
.newsletter-row { display: flex; gap: 0.5rem; }
.newsletter-row input {
  flex: 1; padding: 0.75rem 1rem;
  border: 1px solid rgba(76,168,48,0.3);
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: var(--white); font-size: 0.95rem;
}
.newsletter-row input::placeholder { color: rgba(200,240,216,0.4); }
.newsletter-row input:focus { outline: none; border-color: var(--green-bright); }