/* ==========================================================================
   charity: water Landing Page Styles
   Brand Palette:
     --color-navy:   #003366 (Primary Deep Navy)
     --color-slate:  #77A8BB (Hero Slate Blue Background)
     --color-black:  #000000 (Base / Typography)
     --color-white:  #FFFFFF (Surfaces & Accents)
     --color-yellow: #FFC72C (Jerry Can Accent)
   ========================================================================== */

/* Proxima Nova (via Typekit CDN) with Nunito as fallback for sans-serif */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

:root {
  --color-navy: #003366;
  --color-slate: #77A8BB;
  --color-hero-bg: #8BB8CA; /* Lighter, fresh aquatic slate blue for first background */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-yellow: #FFC72C;

  --font-sans: 'proxima-nova', 'Proxima Nova', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', Times, serif;

  /* Responsive Card Sizing (Enlarged) & Exact 5px Photo Spacing */
  --card-w: 345px;
  --card-h: calc(var(--card-w) / 1.6);
  --card-scale-inactive: 0.816;
  --inactive-h: calc(var(--card-h) * var(--card-scale-inactive));
  --photo-gap: 5px; /* Exactly 5px distance between photos */

  /* Precise Center-to-Center Offsets maintaining 5px edge distance */
  --y-step-1: calc((var(--card-h) + var(--inactive-h)) / 2 + var(--photo-gap));
  --y-step-2: calc(var(--y-step-1) + var(--inactive-h) + var(--photo-gap));

  /* Staggered Horizontal Offsets (Shifted 4px to the right) */
  --x-offset-active: -41px;
  --x-offset-inactive: 50.5px;
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  min-height: 100%;
  background-color: var(--color-hero-bg);
  color: var(--color-navy);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ==========================================================================
   Top Navigation Bar — Magnetic Travel Downward on Scroll
   ========================================================================== */

.navbar {
  width: 100%;
  background-color: var(--color-white);
  border-bottom: 2px solid var(--color-navy);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.25s ease,
              border-color 0.25s ease;
  will-change: transform, box-shadow;
}

/* Magnetized State: Follows user effortlessly as they scroll down */
.navbar.navbar--magnet {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 51, 102, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
  border-bottom: 2px solid var(--color-navy);
}

.nav-container {
  width: 100%;
  height: 82px;
  margin: 0;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: visible;
  transition: height 0.25s ease;
}

.navbar.navbar--magnet .nav-container {
  height: 76px;
}

/* Brand Logo */
.brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  min-width: 0;
}

.brand-logo:hover {
  opacity: 0.85;
}

.logo-img {
  height: 32px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Navigation Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-item {
  color: var(--color-navy);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 4px 0;
}

.nav-item:hover {
  color: #002244;
  transform: translateY(-1px);
}

.nav-divider {
  display: inline-block;
  width: 1.5px;
  height: 32px;
  background-color: var(--color-navy);
  opacity: 0.75;
}

/* Pill Action Button */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--color-white);
  border: none;
  outline: none;
  border-radius: 9999px;
  padding: 5px 6px 5px 18px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.btn-pill .btn-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.06em;
}

.btn-pill .icon-circle {
  width: 32px;
  height: 32px;
  background-color: var(--color-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.btn-save-nav {
  box-shadow: 0 3px 12px rgba(0, 51, 102, 0.16);
}

.btn-save-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 51, 102, 0.22);
}

.btn-save-nav:active {
  transform: translateY(0);
}

/* ==========================================================================
   Hero Section Layout
   ========================================================================== */

.hero-section {
  width: 100%;
  min-height: calc(100vh - 82px);
  background-color: var(--color-hero-bg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
  overflow: hidden;
  padding: 0 0 28px;
}

.hero-wrapper {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 48px 0 72px;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 12px;
  min-height: calc(100vh - 82px);
}

/* ==========================================================================
   Left Column: Copy & CTAs
   ========================================================================== */

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 10px;
}

.hero-headline {
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-size: clamp(34px, 3.8vw, 48px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-bottom: 40px;
  min-height: 2.5em;
}

/* Highlighting animation for "saving lives" */
.highlight-saving-lives {
  position: relative;
  display: inline-block;
  font-weight: 600;
  z-index: 1;
  padding: 0 4px;
}

.highlight-saving-lives::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 38%;
  background: linear-gradient(90deg, rgba(0, 51, 102, 0.16) 0%, rgba(119, 168, 187, 0.55) 50%, rgba(0, 51, 102, 0.22) 100%);
  border-radius: 4px;
  z-index: -1;
  transform-origin: left center;
  animation: highlightSweep 3s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
}

@keyframes highlightSweep {
  0% {
    transform: scaleX(0.18);
    opacity: 0.35;
  }
  50%, 100% {
    transform: scaleX(1);
    opacity: 0.9;
  }
}

/* "The money donated" — noticeably a little bigger font size */
.hero-subheadline {
  color: var(--color-navy);
  font-family: var(--font-serif);
  font-size: clamp(19.5px, 2.1vw, 24px);
  font-weight: 400;
  line-height: 1.48;
  margin-bottom: 34px;
  min-height: auto;
}

.hero-actions-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 4px;
  margin-bottom: 24px;
}

/* "A single dollar" positioned under the logo and donate today button */
.hero-footnote {
  color: var(--color-navy);
  font-family: var(--font-serif);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 400;
  line-height: 1.45;
  margin-bottom: 0;
  margin-top: 4px;
  opacity: 0.95;
  min-height: auto;
}

/* Decorative water graphics — Living Fluid Animations */
.water-graphics {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.water-caustics {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse 46% 32% at 16% 20%, rgba(255, 255, 255, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 38% 28% at 84% 16%, rgba(255, 255, 255, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 52% 36% at 68% 82%, rgba(0, 51, 102, 0.14) 0%, transparent 66%),
    radial-gradient(ellipse 34% 24% at 10% 74%, rgba(255, 255, 255, 0.14) 0%, transparent 62%);
  animation: waterCausticShift 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Water Ripples with Radiating Pulse Rings */
.water-ripple {
  position: absolute;
  transform-origin: center center;
  animation: rippleFloat 14s ease-in-out infinite alternate;
}

.water-ripple--left {
  width: min(520px, 48vw);
  height: auto;
  left: -6%;
  top: 6%;
}

.water-ripple--right {
  width: min(460px, 42vw);
  height: auto;
  right: -8%;
  top: 16%;
  animation-delay: -3s;
}

.water-ripple--bottom {
  width: min(280px, 32vw);
  height: auto;
  left: 36%;
  bottom: 4%;
  animation-delay: -6s;
}

.water-ripple-ring {
  transform-origin: 210px 210px;
  animation: rippleRingPulse 4.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.water-ripple--bottom .water-ripple-ring {
  transform-origin: 140px 140px;
}

.ripple-ring--1 { animation-delay: 0s; }
.ripple-ring--2 { animation-delay: 1.1s; }
.ripple-ring--3 { animation-delay: 2.2s; }
.ripple-ring--4 { animation-delay: 3.3s; }

/* Water Droplets with Buoyant Organic Sway */
.water-droplet {
  position: absolute;
  transform-origin: center bottom;
  animation: dropletBuoyancy 6.5s ease-in-out infinite;
  will-change: transform;
}

.water-droplet--tl {
  width: 24px;
  left: 4%;
  top: 10%;
  animation-duration: 6.8s;
}

.water-droplet--tl2 {
  width: 16px;
  left: 7.5%;
  top: 20%;
  animation-duration: 7.5s;
  animation-delay: -1.8s;
}

.water-droplet--mid {
  width: 18px;
  left: 17%;
  bottom: 26%;
  animation-duration: 8.2s;
  animation-delay: -3.2s;
}

.water-droplet--br {
  width: 22px;
  right: 5%;
  bottom: 16%;
  animation-duration: 7.2s;
  animation-delay: -0.9s;
}

.water-droplet--tr {
  width: 19px;
  right: 10%;
  top: 14%;
  animation-duration: 8s;
  animation-delay: -2.4s;
}

.water-droplet--bl {
  width: 16px;
  left: 2.5%;
  bottom: 20%;
  animation-duration: 7.6s;
  animation-delay: -4.1s;
}

/* Animated Ascending Water Bubbles */
.water-bubble {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 51, 102, 0.28);
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.45) 0%, rgba(119, 168, 187, 0.15) 60%, rgba(0, 51, 102, 0.08) 100%);
  box-shadow: inset -1px -1px 2px rgba(0, 51, 102, 0.18), 0 2px 6px rgba(0, 51, 102, 0.1);
  animation: bubbleAscent 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

.water-bubble--1 { width: 14px; height: 14px; left: 8%; bottom: -20px; animation-duration: 9s; animation-delay: 0s; }
.water-bubble--2 { width: 22px; height: 22px; left: 19%; bottom: -30px; animation-duration: 12s; animation-delay: 2.5s; }
.water-bubble--3 { width: 10px; height: 10px; left: 29%; bottom: -20px; animation-duration: 8.5s; animation-delay: 4.2s; }
.water-bubble--4 { width: 18px; height: 18px; left: 42%; bottom: -25px; animation-duration: 11s; animation-delay: 1.1s; }
.water-bubble--5 { width: 12px; height: 12px; right: 28%; bottom: -20px; animation-duration: 9.8s; animation-delay: 3.4s; }
.water-bubble--6 { width: 24px; height: 24px; right: 18%; bottom: -30px; animation-duration: 13s; animation-delay: 0.6s; }
.water-bubble--7 { width: 13px; height: 13px; right: 7%; bottom: -20px; animation-duration: 10.5s; animation-delay: 5s; }
.water-bubble--8 { width: 9px; height: 9px; left: 14%; bottom: -15px; animation-duration: 8s; animation-delay: 6.2s; }
.water-bubble--9 { width: 17px; height: 17px; right: 38%; bottom: -25px; animation-duration: 11.5s; animation-delay: 7s; }
.water-bubble--10 { width: 11px; height: 11px; left: 52%; bottom: -15px; animation-duration: 9.2s; animation-delay: 8.3s; }

/* Flowing Horizontal Ocean Waves */
.water-wave-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 92px;
  overflow: hidden;
  pointer-events: none;
}

.water-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 200%;
  will-change: transform;
}

.water-wave--layer1 {
  animation: waveScroll 18s linear infinite;
}

.water-wave--layer2 {
  animation: waveScrollReverse 14s linear infinite;
  opacity: 0.85;
}

/* Keyframe Animations for Fluid Dynamics */
@keyframes waterCausticShift {
  0% { transform: translate3d(-2%, -2%, 0) scale(1); opacity: 0.82; }
  50% { transform: translate3d(2%, 1.5%, 0) scale(1.05); opacity: 1; }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); opacity: 0.88; }
}

@keyframes rippleFloat {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(12px, -8px) rotate(2deg); }
  100% { transform: translate(-8px, 10px) rotate(-1.5deg); }
}

@keyframes rippleRingPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.15;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.45;
  }
  100% {
    transform: scale(1.16);
    opacity: 0.08;
  }
}

@keyframes dropletBuoyancy {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  35% {
    transform: translateY(-16px) rotate(4deg) scale(1.04);
  }
  70% {
    transform: translateY(6px) rotate(-3deg) scale(0.98);
  }
}

@keyframes bubbleAscent {
  0% {
    transform: translate3d(0, 0, 0) scale(0.7);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  45% {
    transform: translate3d(18px, -45vh, 0) scale(1);
    opacity: 0.9;
  }
  75% {
    transform: translate3d(-14px, -80vh, 0) scale(1.12);
    opacity: 0.7;
  }
  100% {
    transform: translate3d(8px, -112vh, 0) scale(1.25);
    opacity: 0;
  }
}

@keyframes waveScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes waveScrollReverse {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.hero-wrapper,
.page-tagline {
  position: relative;
  z-index: 1;
}

.page-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px auto 0;
  padding: 18px 24px 8px;
  max-width: 920px;
  color: var(--color-navy);
  font-size: clamp(10px, 1.05vw, 12.5px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
  transform: translateY(-8px); /* Adjusted up 8px */
}

.tagline-droplet {
  width: 14px;
  height: auto;
  flex-shrink: 0;
}

/* ==========================================================================
   About / Why Join / Our Reason
   ========================================================================== */

.page-section {
  position: relative;
  z-index: 2;
  scroll-margin-top: 82px;
  padding: 88px 48px;
}

.page-section-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.section-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.section-intro {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  max-width: 640px;
  margin-bottom: 48px;
  opacity: 0.92;
}

.section-about {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.stat-card {
  border: 2px solid var(--color-navy);
  border-radius: 12px;
  padding: 30px 22px 28px;
  text-align: center;
  background-color: #f7fbfd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 51, 102, 0.12);
}

/* Stat Chart Container & Elements */
.stat-chart-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  min-height: 155px;
}

.stat-donut-chart {
  display: block;
  margin: 0 auto;
  /* Removed rotate(-90deg) so center water symbol remains perfectly upright! */
  transition: transform 0.4s ease;
}

.stat-card:hover .stat-donut-chart {
  transform: scale(1.04);
}

.donut-slices-rotator {
  transform-origin: 80px 80px;
}

/* Donut Chart Fill-in Animation */
.donut-slice {
  transition: stroke 0.2s ease;
}

.donut-slice--navy {
  stroke: var(--color-navy);
  animation: fillDonutNavy 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.donut-slice--slate {
  stroke: var(--color-slate);
  animation: fillDonutSlate 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

@keyframes fillDonutNavy {
  0% {
    stroke-dashoffset: 264.6;
    opacity: 0.3;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes fillDonutSlate {
  0% {
    stroke-dashoffset: -190;
    opacity: 0.3;
  }
  100% {
    stroke-dashoffset: -264.6;
    opacity: 1;
  }
}

.stat-bar-graph {
  display: block;
  margin: 0 auto;
}

/* Pouring Water Stream Animation above Bars */
.pour-stream {
  stroke-linecap: round;
  animation: pourStreamFlow 1.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.stream--1 { animation-delay: 0.1s; }
.stream--2 { animation-delay: 0.35s; }
.stream--3 { animation-delay: 0.6s; }
.stream--4 { animation-delay: 0.85s; }

@keyframes pourStreamFlow {
  0% {
    stroke-dasharray: 4 20;
    stroke-dashoffset: 25;
    opacity: 0;
  }
  25% {
    stroke-dasharray: 18 10;
    stroke-dashoffset: 0;
    opacity: 0.85;
  }
  75% {
    stroke-dasharray: 20 6;
    opacity: 0.75;
  }
  100% {
    stroke-dashoffset: -25;
    opacity: 0; /* stream finishes and fades out */
  }
}

/* Bar Chart Pouring Rise Animation — Stops right at where it is */
.graph-bar {
  transform-origin: 50% 88px; /* baseline */
  animation: pourBarRise 1.1s cubic-bezier(0.18, 0.9, 0.26, 1) forwards;
}

.bar--1 { animation-delay: 0.15s; }
.bar--2 { animation-delay: 0.4s; }
.bar--3 { animation-delay: 0.65s; }
.bar--4 { animation-delay: 0.9s; }

@keyframes pourBarRise {
  0% {
    transform: scaleY(0);
    opacity: 0.4;
  }
  70% {
    transform: scaleY(1.04);
    opacity: 0.95;
  }
  100% {
    transform: scaleY(1);
    opacity: 1; /* stops exactly at target height! */
  }
}

.stat-card:hover .graph-bar {
  filter: brightness(1.05);
}

.stat-pie-chart {
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

/* Pie Chart Slices Fill-in Animation */
.pie-slice {
  transform-origin: 0 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
  animation: pieSliceFillIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pie-slice--1 { animation-delay: 0.1s; }
.pie-slice--2 { animation-delay: 0.35s; }
.pie-slice--3 { animation-delay: 0.6s; }

@keyframes pieSliceFillIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 0.95;
  }
  100% {
    transform: scale(1);
    opacity: 1; /* fills in and stops! */
  }
}

.pie-slice:hover {
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(0, 51, 102, 0.25));
}

.chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chart-legend--three {
  gap: 6px;
}

.chart-legend-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge--navy {
  background-color: rgba(0, 51, 102, 0.1);
  color: var(--color-navy);
  border: 1px solid rgba(0, 51, 102, 0.2);
}

.badge--slate {
  background-color: rgba(119, 168, 187, 0.2);
  color: #003366;
  border: 1px solid rgba(119, 168, 187, 0.4);
}

.badge--black {
  background-color: rgba(0, 0, 0, 0.08);
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.stat-value {
  font-size: clamp(36px, 4.2vw, 50px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--color-navy);
}

.stat-label {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--color-navy);
}

/* ==========================================================================
   Section: Why Join Us? — Graphic Unique Card Designs
   ========================================================================== */

.section-join {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.section-join .section-kicker {
  color: var(--color-slate);
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.reason-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(119, 168, 187, 0.35);
  border-radius: 12px;
  padding: 28px 24px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.reason-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-slate);
  background: rgba(255, 255, 255, 0.08);
}

/* Graphic Watermark in Background */
.card-graphic-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 170px;
  height: 105px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.graphic-watermark {
  width: 100%;
  height: 100%;
}

.card-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.reason-icon {
  display: inline-flex;
  color: var(--color-slate);
}

.card-badge-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(119, 168, 187, 0.16);
  border: 1px solid rgba(119, 168, 187, 0.32);
  color: var(--color-slate);
}

.reason-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.reason-text {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.92;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  flex: 1;
}

/* Technical Schematic Vector Graphic at Bottom of Card */
.reason-schematic {
  width: 100%;
  margin-top: auto;
  position: relative;
  z-index: 1;
  padding-top: 14px;
  border-top: 1px dashed rgba(119, 168, 187, 0.28);
}

.schematic-svg {
  width: 100%;
  height: 38px;
  display: block;
}

/* ==========================================================================
   Section: Our Reason — Graphic Infographic Story Items
   ========================================================================== */

.section-reason {
  background-color: #e8f1f5;
  color: var(--color-navy);
}

.story-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.story-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
  background-color: var(--color-white);
  border: 2px solid var(--color-navy);
  border-radius: 12px;
  padding: 26px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.story-item:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(0, 51, 102, 0.1);
}

.story-badge-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.story-num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  width: 54px;
  height: 54px;
  border: 2px solid var(--color-navy);
  border-radius: 12px;
  background-color: #f7fbfd;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.story-badge-ring {
  width: 6px;
  height: 24px;
  background: repeating-linear-gradient(to bottom, var(--color-slate) 0px, var(--color-slate) 4px, transparent 4px, transparent 8px);
  margin-top: 8px;
}

.story-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.story-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.story-title {
  font-size: 21px;
  font-weight: 600;
}

.story-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

.chip--navy {
  background-color: rgba(0, 51, 102, 0.1);
  color: var(--color-navy);
  border: 1px solid rgba(0, 51, 102, 0.25);
}

.chip--slate {
  background-color: rgba(119, 168, 187, 0.2);
  color: var(--color-navy);
  border: 1px solid rgba(119, 168, 187, 0.4);
}

.story-text {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-navy);
  margin-bottom: 6px;
}

/* Unique Infographic Boxes inside each Story Item */
.story-graphic-box {
  background-color: #f7fbfd;
  border: 1.5px solid rgba(0, 51, 102, 0.18);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 4px;
}

.graphic-meter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.meter-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.02em;
}

.meter-stat {
  font-size: 12.5px;
  color: var(--color-navy);
}

.meter-stat strong {
  color: var(--color-navy);
}

.graphic-meter-bar {
  width: 100%;
  height: 12px;
  background-color: rgba(0, 51, 102, 0.1);
  border-radius: 999px;
  position: relative;
  overflow: visible;
  margin-bottom: 8px;
}

.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-navy) 0%, var(--color-slate) 100%);
  border-radius: 999px;
  transition: width 0.8s ease;
}

.meter-marker {
  position: absolute;
  top: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 2.5px solid var(--color-navy);
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 51, 102, 0.2);
}

.graphic-meter-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--color-black);
  font-weight: 600;
  opacity: 0.75;
}

.graphic-route-svg {
  width: 100%;
  height: 38px;
  display: block;
}

/* Shield Protection Badges Row */
.shield-badges-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.shield-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 51, 102, 0.2);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy);
}

.shield-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot--navy { background-color: var(--color-navy); }
.dot--slate { background-color: var(--color-slate); }

.shield-arrow {
  color: var(--color-slate);
  font-weight: 800;
  font-size: 14px;
}


.icon-hex-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.icon-hex-wrapper:hover {
  transform: scale(1.08);
}

.hex-heart-icon {
  width: 58px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 51, 102, 0.18));
}

/* Hero Donate Today Button — no glow */
.btn-save-hero {
  box-shadow: 0 3px 12px rgba(0, 51, 102, 0.16);
  padding: 6px 7px 6px 20px;
}

.btn-save-hero:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(0, 51, 102, 0.22);
}

.btn-save-hero:active {
  transform: translateY(0) scale(0.98);
}

/* ==========================================================================
   Right Column: Vertical Rotating Photo Gallery
   ========================================================================== */

.hero-gallery-stage {
  position: relative;
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Left Navigation Arrow Buttons (anchored beside active card) */
.gallery-controls-left {
  position: absolute;
  left: calc(50% + var(--x-offset-active) - (var(--card-w) / 2) - 48px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 25;
}

.gallery-nav-btn {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), filter 0.2s ease;
}

.gallery-nav-btn:hover {
  transform: scale(1.12);
  filter: drop-shadow(0 4px 10px rgba(0, 51, 102, 0.35));
}

.gallery-nav-btn:active {
  transform: scale(0.94);
}

.arrow-svg {
  display: block;
}

/* Right Info Button (anchored beside active card) */
.gallery-controls-right {
  position: absolute;
  left: calc(50% + var(--x-offset-active) + (var(--card-w) / 2) + 14px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
}

.gallery-info-btn {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), filter 0.2s ease;
}

.gallery-info-btn:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 3px 8px rgba(0, 51, 102, 0.3));
}

.gallery-info-btn:active {
  transform: scale(0.95);
}

/* Gallery Viewport & Track
   overflow: hidden clips cards that slide out of the visible area.
   The top edge clips the far-prev card so no sliver peeks above. */
.gallery-viewport {
  width: 100%;
  height: 560px;
  position: relative;
  overflow: hidden;
  clip-path: inset(0);
  isolation: isolate;
}

.gallery-track {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Photo Card Elements */
.photo-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  aspect-ratio: 1.6 / 1;
  border: 2px solid var(--color-navy);
  background-color: var(--color-navy);
  box-shadow: 0 8px 24px rgba(0, 51, 102, 0.2);
  cursor: pointer;
  overflow: hidden;
  border-radius: 2px;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), 
              opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
  user-select: none;
  will-change: transform, opacity;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.6s ease;
}

.photo-card:hover img {
  transform: scale(1.03);
}

/* All cards always carry the border — border is on .photo-card base class */

.photo-card.slot-active {
  transform: translate(-50%, -50%) translate(var(--x-offset-active), 0) scale(1);
  z-index: 10;
  opacity: 1;
  box-shadow: 0 10px 28px rgba(0, 51, 102, 0.28);
}

.photo-card.slot-prev {
  transform: translate(-50%, -50%) translate(var(--x-offset-inactive), calc(-1 * var(--y-step-1))) scale(var(--card-scale-inactive));
  z-index: 6;
  opacity: 1;
}

.photo-card.slot-next {
  transform: translate(-50%, -50%) translate(var(--x-offset-inactive), var(--y-step-1)) scale(var(--card-scale-inactive));
  z-index: 6;
  opacity: 1;
}

.photo-card.slot-far-prev {
  transform: translate(-50%, -50%) translate(var(--x-offset-inactive), calc(-1 * var(--y-step-2) - 80px)) scale(var(--card-scale-inactive));
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.photo-card.slot-far-next {
  transform: translate(-50%, -50%) translate(var(--x-offset-inactive), calc(var(--y-step-2) + 80px)) scale(var(--card-scale-inactive));
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.photo-card.slot-hidden {
  transform: translate(-50%, -50%) translate(var(--x-offset-inactive), calc(var(--y-step-2) + 160px)) scale(0.65);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Photo Story Info Popover
   ========================================================================== */

.photo-info-popover {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--x-offset-active) + (var(--card-w) / 2) + 54px);
  transform: translateY(-50%) scale(0.95);
  width: 280px;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-navy);
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 14px 34px rgba(0, 51, 102, 0.25);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-info-popover.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.popover-tag {
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
}

.popover-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-navy);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.popover-close:hover {
  opacity: 1;
}

.popover-title {
  color: var(--color-navy);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
}

.popover-desc {
  color: #333333;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ==========================================================================
   SAVE Modal Dialog
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background-color: var(--color-white);
  border-radius: 12px;
  max-width: 440px;
  width: 90%;
  padding: 36px 30px;
  text-align: center;
  position: relative;
  border-top: 5px solid var(--color-navy);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 26px;
  color: #777777;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--color-black);
}

.modal-icon {
  margin-bottom: 18px;
}

.modal-title {
  color: var(--color-navy);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
}

.modal-text {
  color: #333333;
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.55;
  margin-bottom: 26px;
}

.btn-modal-primary {
  background-color: var(--color-navy);
  color: var(--color-white);
  border: none;
  font-size: 15.5px;
  font-weight: 600;
  padding: 12px 30px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.btn-modal-primary:hover {
  background-color: #002244;
  transform: translateY(-1px);
}

/* ==========================================================================
   Responsive Breakpoints & Window Adaptations
   ========================================================================== */

/* Large Tablets & Small Desktops */
@media (max-width: 1140px) {
  :root {
    --card-w: 285px;
    --x-offset-active: -28px;
    --x-offset-inactive: 38px;
  }

  .nav-container {
    padding: 0 20px;
    gap: 12px;
  }

  /* Logo scales down but never disappears */
  .logo-img {
    height: 28px;
    max-width: 180px;
  }

  .nav-links {
    gap: 14px;
  }

  .nav-item {
    font-size: 12.5px;
    letter-spacing: 0.05em;
  }

  .btn-pill .btn-label {
    font-size: 13.5px;
  }

  .hero-wrapper {
    padding: 0 20px;
    gap: 16px;
  }

  .hero-gallery-stage {
    height: 510px;
  }

  .gallery-viewport {
    height: 510px;
  }

  .page-section {
    padding: 72px 20px;
  }

  .stat-grid,
  .reason-grid {
    gap: 16px;
  }
}

/* Tablets & Medium Screens — collapse to single column */
@media (max-width: 960px) {
  .hero-section {
    min-height: auto;
    padding: 36px 0 48px;
  }

  .hero-wrapper {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 0;
  }

  :root {
    --card-w: clamp(260px, 46vw, 315px);
    --x-offset-active: -24px;
    --x-offset-inactive: 34px;
  }

  .hero-gallery-stage {
    width: 100%;
    max-width: 580px;
    height: 490px;
    margin: 0 auto;
  }

  .gallery-viewport {
    height: 490px;
  }

  .stat-grid,
  .reason-grid {
    grid-template-columns: 1fr;
  }

  .story-item {
    grid-template-columns: 56px 1fr;
  }
}

/* Mobile Devices & Small Windows */
@media (max-width: 768px) {
  .navbar {
    height: auto;
  }

  .nav-container {
    padding: 0 14px;
    height: 64px;
    gap: 10px;
  }

  /* Logo shrinks but stays readable */
  .logo-img {
    height: 26px;
    max-width: 160px;
  }

  .nav-links {
    display: none; /* Keep header clean on mobile */
  }

  .btn-pill {
    padding: 5px 5px 5px 12px;
    gap: 6px;
  }

  .btn-pill .btn-label {
    font-size: 12px;
  }

  .btn-pill .icon-circle {
    width: 26px;
    height: 26px;
  }

  .btn-pill .community-svg {
    width: 14px;
    height: 14px;
  }

  .hero-section {
    padding: 24px 0 40px;
  }

  .hero-wrapper {
    padding: 0 16px;
  }

  .hero-headline {
    font-size: clamp(26px, 6.5vw, 34px);
    margin-bottom: 32px;
  }

  .hero-subheadline {
    font-size: clamp(15px, 3.8vw, 18px);
    margin-bottom: 36px;
  }

  .hero-footnote {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .page-tagline {
    letter-spacing: 0.06em;
    padding: 16px 16px 0;
    line-height: 1.45;
  }

  .page-section {
    padding: 56px 16px;
    scroll-margin-top: 64px;
  }

  .section-intro {
    margin-bottom: 32px;
  }

  .hero-actions-group {
    gap: 14px;
  }

  .hex-heart-icon {
    width: 46px;
    height: 52px;
  }

  :root {
    --card-w: clamp(215px, 64vw, 275px);
    --x-offset-active: -12px;
    --x-offset-inactive: 22px;
    --photo-gap: 5px;
  }

  .hero-gallery-stage {
    height: 420px;
  }

  .gallery-viewport {
    height: 420px;
  }

  /* Ensure border always shows at smaller sizes */
  .photo-card {
    border: 2px solid var(--color-navy);
  }

  .gallery-controls-left {
    left: 6px;
  }

  .gallery-controls-right {
    left: auto;
    right: 6px;
  }

  .gallery-nav-btn svg {
    width: 32px;
    height: 32px;
  }

  .gallery-info-btn svg {
    width: 24px;
    height: 24px;
  }

  .photo-info-popover {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) scale(0.95);
    width: min(300px, calc(100vw - 32px));
    padding: 14px;
  }

  .photo-info-popover.active {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Very Small Mobile (<420px) */
@media (max-width: 420px) {
  :root {
    --card-w: 205px;
    --x-offset-active: -6px;
    --x-offset-inactive: 16px;
    --photo-gap: 5px;
  }

  .logo-img {
    height: 22px;
    max-width: 140px;
  }

  .hero-headline {
    font-size: 24px;
  }

  .hero-subheadline {
    font-size: 14px;
  }

  .hero-gallery-stage {
    height: 360px;
  }

  .gallery-viewport {
    height: 360px;
  }

  /* Border always visible even on tiny screens */
  .photo-card {
    border: 2px solid var(--color-navy);
  }
}