/* =========================================================
   CLIMATE DOCTOR BALA — full redesign
   FOREST + EARTH + TECHNOLOGY

   Color:
     --forest    #0B1F14   deep forest green (base / dark sections)
     --pine      #163A26   rich dark green (panels, nav-scrolled)
     --leaf      #5B9A63   natural leaf green (primary accent)
     --leaf-2    #8FC48F   brighter leaf (hover states)
     --offwhite  #F3EFE4   warm off-white (text on dark, light panels)
     --charcoal  #14100D   very dark charcoal (alt background)
     --earth     #8A5A3B   earthy brown (sparing accent)

   Type:
     Display — 'Space Grotesk'  (huge, bold, geometric — headlines)
     Body    — 'Manrope'        (clean contrast — everything else)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --forest: #0B1F14;
  --forest-deep: #071410;
  --pine: #163A26;
  --pine-2: #1D4A30;
  --leaf: #5B9A63;
  --leaf-2: #8FC48F;
  --offwhite: #F3EFE4;
  --offwhite-dim: rgba(243,239,228,0.68);
  --charcoal: #14100D;
  --earth: #8A5A3B;

  --font-display: 'Space Grotesk', 'Arial Black', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --edge: clamp(24px, 6vw, 96px);
  --container: 1360px;
  --ease: cubic-bezier(.16,.84,.32,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* ===== MASTER FONT-SIZE CONTROL =====
   Nearly every font-size in this file is set in "rem" units, and "rem"
   always means "relative to this html font-size". So this ONE line scales
   ALL text on the whole site up or down together.
   100% = 16px (browser default, size before this change).
   93% below = roughly 15px = a little smaller overall.
   To make everything bigger again: raise the %. To make everything smaller: lower it.
   Example: 100% = normal, 90% = smaller, 110% = bigger. */
html{ font-size: 93%; }
html{ scroll-behavior:smooth; background: var(--forest); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  font-family: var(--font-body);
  background: var(--forest);
  color: var(--offwhite);
  line-height: 1.55;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; }

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

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family: var(--font-body); font-weight:700; font-size:0.95rem;
  padding: 16px 32px; border-radius: 999px; border:1px solid transparent;
  cursor:pointer; transition: transform .4s var(--ease), background .3s ease, border-color .3s ease;
}
.btn-primary{ background: var(--leaf); color: var(--forest-deep); }
.btn-primary:hover{ background: var(--leaf-2); }
.btn-outline{ background:#fff; border-color:#fff; color:var(--forest-deep); }
.btn-outline:hover{ background:var(--offwhite); border-color:var(--offwhite); transform:translateY(-2px); }
.btn:focus-visible{ outline:2px solid var(--leaf-2); outline-offset:3px; }

/* =========================== PAGE TRANSITION OVERLAY =========================== */
#pageTransition{
  position: fixed; inset:0; z-index: 3000;
  background: var(--leaf);
  transform: translateY(100%);
  pointer-events:none;
}

/* =========================== NAV =========================== */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 900;
  display:flex; align-items:center; justify-content:space-between;
  padding: 24px var(--edge);
  transition: padding .4s var(--ease), background .5s var(--ease), backdrop-filter .5s var(--ease);
}
.site-nav.scrolled{
  padding: 12px var(--edge);
  background: rgba(11,31,20,0.72);
  backdrop-filter: blur(14px);
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo-ring{
  width:46px; height:46px; border-radius:50%;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: transform .35s var(--ease);
}
.brand:hover .logo-ring{ transform: scale(1.05); }
.logo-ring img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:1rem; letter-spacing:0.01em; }

.nav-links{ display:flex; align-items:center; gap:40px; }
.nav-links a{
  font-size:0.9rem; font-weight:600; color: rgba(243,239,228,.82);
  position:relative; padding-bottom:4px;
}
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--leaf-2); transition:width .3s var(--ease); }
.nav-links a:hover::after{ width:100%; }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(243,239,228,.3); background:transparent; color:var(--offwhite);
  align-items:center; justify-content:center; cursor:pointer;
}

/* =========================== SOCIAL LINKS =========================== */
.social-icon-link{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(243,239,228,.06); border:1px solid rgba(243,239,228,.16);
  color: var(--offwhite);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.social-icon-link:hover{ background: var(--leaf); color: var(--forest-deep); transform: translateY(-3px); }
.social-icon-link svg{ width:19px; height:19px; }

/* Footer: the same set, always visible, no dropdown */
.footer-social{ display:flex; gap:14px; align-items:center; }
.footer-social .social-icon-link{ width:38px; height:38px; }
.footer-social .social-icon-link svg{ width:17px; height:17px; }

/* =========================== HERO =========================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero-media video{ position:relative; }
.hero-media .fallback{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 30% 20%, #163A26 0%, #0B1F14 60%, #071410 100%);
  display:none;
}
.hero-media.video-unavailable video{ display:none; }
.hero-media.video-unavailable .fallback{ display:block; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,20,16,.55) 0%, rgba(7,20,16,.25) 35%, rgba(7,20,16,.7) 100%);
}

.hero-inner{ position:relative; max-width: 1100px; padding: 0 var(--edge); }
.hero-logo{ margin: 0 auto 32px; width:64px; height:64px; }
.hero h1{
  /* Big hero letters — made larger, kept independent of the master scale above */
  font-size: clamp(3.1rem, 10.5vw, 8rem);
  color: var(--offwhite);
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line span{ display:inline-block; }
.hero-sub{
  margin-top: 28px; font-family: var(--font-body); font-weight:500;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--offwhite-dim);
}
.hero-scroll{
  position:absolute; bottom:38px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:0.78rem; font-weight:600; letter-spacing:0.04em; color: rgba(243,239,228,.7);
}
.hero-scroll .arrow{ font-size:1.1rem; animation: bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} }

/* =========================== MARQUEE =========================== */
.marquee-section{
  background: var(--charcoal);
  padding: 30px 0;
  overflow:hidden;
}
.marquee-track{
  display:flex; align-items:center; white-space:nowrap; will-change: transform;
}
.marquee-track .set{ display:flex; align-items:center; }
.marquee-track h2{
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.3vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(243,239,228,0.5);
  text-transform: uppercase;
  padding-right: 2.4em;
}
.marquee-track h2.filled{ color: var(--offwhite); }
.marquee-track .dot{
  display:inline-flex; flex-shrink:0;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--leaf), var(--earth));
  margin-right: 2.4em;
}

/* =========================== WHY I DO THIS =========================== */
.why{
  position: relative;
  background: var(--forest);
  padding: 140px 0 160px;
  overflow: hidden;
}
.why-grid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 40px;
  align-items:center;
}
.why-media{
  position:relative;
}
.why-media .blob{
  position:relative;
  width:100%;
  aspect-ratio: 4/5;
  overflow:hidden;
  border-radius: 46% 54% 61% 39% / 45% 42% 58% 55%;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.6);
}
.why-media .blob img{ width:100%; height:100%; object-fit:cover; }
.why-media .quote-float{
  position:absolute;
  bottom: -30px; right: -20px;
  max-width: 260px;
  background: var(--pine);
  border: 1px solid rgba(143,196,143,.25);
  border-radius: 18px;
  padding: 22px 24px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform:none;
  line-height:1.25;
  color: var(--offwhite);
}
.why-copy{ position:relative; z-index:2; }
.why-copy .kicker{
  font-family: var(--font-display); font-weight:700; font-size:0.95rem;
  color: var(--leaf-2); letter-spacing:0.04em; margin-bottom:20px;
}
.why-copy h2{
  font-size: clamp(2.2rem, 5vw, 4rem);
  margin-bottom: 30px;
}
.why-copy p{
  font-size: 1.1rem;
  color: var(--offwhite-dim);
  max-width: 46ch;
}
.why-copy p + p{ margin-top:18px; }
.why-copy .credentials{
  margin-top: 40px;
  display:flex;
  gap: 40px;
}
.why-copy .credentials div b{
  display:block; font-family: var(--font-display); font-size:1.8rem; color: var(--leaf-2);
}
.why-copy .credentials div span{ font-size:0.85rem; color: var(--offwhite-dim); text-transform:none; }

/* =========================== PROFESSIONAL JOURNEY =========================== */
.journey{
  position: relative;
  background: var(--forest-deep);
  padding: 130px 0 150px;
  overflow: hidden;
}
.journey-kicker{
  font-family: var(--font-display); font-weight:700; font-size:0.95rem;
  color: var(--leaf-2); letter-spacing:0.04em; margin-bottom:20px;
}
.journey h2{
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  max-width: 16ch;
  margin-bottom: 26px;
}
.journey-intro{
  font-size: 1.1rem;
  color: var(--offwhite-dim);
  max-width: 62ch;
  margin-bottom: 80px;
}
.timeline{
  list-style: none;
  position: relative;
  padding-left: 0;
}
.timeline::before{
  content:"";
  position:absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(143,196,143,.5), rgba(143,196,143,.08));
}
.timeline-item{
  position: relative;
  padding: 0 0 56px 46px;
}
.timeline-item::before{
  content:"";
  position:absolute;
  left: -5px; top: 6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--leaf-2);
  box-shadow: 0 0 0 5px rgba(143,196,143,.15);
}
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-year{
  display:inline-block;
  font-family: var(--font-display); font-weight:700; font-size:0.9rem;
  letter-spacing: .03em;
  color: var(--forest-deep);
  background: var(--leaf);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.timeline-item h3{
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--offwhite);
  margin-bottom: 8px;
}
.timeline-item p{
  font-size: 1rem;
  color: var(--offwhite-dim);
  max-width: 56ch;
  text-transform: none;
}

/* =========================== THE IMPACT =========================== */
.impact{
  position: relative;
  background: var(--pine);
  padding: 130px 0 140px;
}
.impact-kicker{
  font-family: var(--font-display); font-weight:700; font-size:0.95rem;
  color: var(--leaf-2); letter-spacing:0.04em; margin-bottom:20px;
}
.impact h2{
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  max-width: 18ch;
  margin-bottom: 70px;
}
.impact-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(243,239,228,.14);
  border-top: 1px solid rgba(243,239,228,.14);
  border-left: 1px solid rgba(243,239,228,.14);
}
.impact-item{
  background: var(--pine);
  padding: 44px 40px;
  position: relative;
}
.impact-item:nth-child(odd){ border-right: 1px solid rgba(243,239,228,.14); }
.impact-item{ border-bottom: 1px solid rgba(243,239,228,.14); }
.impact-idx{
  display:block;
  font-family: var(--font-display); font-size:1rem; color: var(--earth);
  margin-bottom: 18px;
}
.impact-item h3{
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  color: var(--offwhite);
  margin-bottom: 14px;
}
.impact-item p{
  font-size: 0.98rem;
  color: var(--offwhite-dim);
  text-transform: none;
  max-width: 48ch;
}

/* =========================== EL NIÑO INTRO =========================== */
.elnino-intro{
  position: relative;
  background: var(--pine);
  padding: 140px 0 130px;
  overflow:hidden;
}
.elnino-intro-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items:center;
}
.elnino-intro-type h2{
  font-size: clamp(3.2rem, 9vw, 8rem);
  color: var(--offwhite);
}
.elnino-intro-type h2 span{ display:block; color: var(--leaf-2); }
.elnino-intro-media{
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  aspect-ratio: 4/5;
}
.elnino-intro-media img{ width:100%; height:100%; object-fit:cover; transform: scale(1.08); }
.elnino-intro-explain{
  margin-top: 70px;
  max-width: 680px;
}
.elnino-intro-explain p{
  font-size: 1.15rem;
  color: var(--offwhite-dim);
}
.elnino-cta{
  margin-top: 40px;
  display:flex; align-items:center; gap: 24px;
}
.elnino-cta .prompt{
  font-family: var(--font-display); font-weight:700; font-size:1.1rem; color: var(--offwhite);
}

/* =========================== WHAT CAN WE DO =========================== */
.action{
  position:relative;
  background: var(--forest-deep);
  padding: 130px 0;
  overflow:hidden;
}
.action::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('../images/action-bg.jpg');
  background-size:cover; background-position:center;
  opacity: 0.14;
}
.action-inner{ position:relative; }
.action-kicker{
  font-family: var(--font-display); font-weight:700; font-size:0.95rem;
  color: var(--leaf-2); letter-spacing:0.04em; margin-bottom: 24px;
}
.action-list{ display:flex; flex-direction:column; }
.action-item{
  display:flex; align-items:baseline; justify-content:space-between;
  padding: 26px 0;
  border-bottom: 1px solid rgba(243,239,228,.14);
  cursor:default;
}
.action-item:first-child{ border-top: 1px solid rgba(243,239,228,.14); }
.action-item h3{
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  color: var(--offwhite);
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.action-item:hover h3{ color: var(--leaf-2); transform: translateX(14px); }
.action-item .idx{ font-family: var(--font-display); font-size:1rem; color: var(--earth); }

/* =========================== JOIN THE MOVEMENT =========================== */
.join{
  position:relative;
  background: var(--forest);
  padding: 160px 0 140px;
  text-align:center;
  overflow:hidden;
}
.join h2{
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  color: var(--offwhite);
  max-width: 16ch;
  margin: 0 auto;
}
.join h2 + h2{ margin-top:6px; color: var(--leaf-2); }
.join-cta-wrap{
  margin-top: 60px;
  display:flex; justify-content:center;
}

.join-form-panel{
  max-width: 480px;
  margin: 46px auto 0;
  display:none;
  flex-direction:column;
  gap: 14px;
  text-align:left;
}
.join-form-panel.open{ display:flex; }
.join-form-panel input,
.join-form-panel textarea{
  width:100%; background: rgba(243,239,228,.06); border:1px solid rgba(243,239,228,.2);
  border-radius:10px; padding:14px 18px; color:var(--offwhite); font-family:var(--font-body); font-size:.95rem;
}
.join-form-panel textarea{ resize:vertical; min-height:90px; }
.join-form-panel input::placeholder,
.join-form-panel textarea::placeholder{ color: rgba(243,239,228,.4); }
.join-form-panel input:focus,
.join-form-panel textarea:focus{ outline:1px solid var(--leaf-2); border-color:var(--leaf-2); }
.join-form-panel .form-note{ font-size:.82rem; color: rgba(243,239,228,.5); text-align:center; }

/* =========================== FOOTER =========================== */
.site-footer{
  background: var(--charcoal);
  padding: 60px 0 34px;
}
.footer-top{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap: 30px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(243,239,228,.12);
}
.footer-links{ display:flex; gap:32px; }
.footer-links a{ font-size:0.9rem; color: rgba(243,239,228,.75); }
.footer-links a:hover{ color: var(--leaf-2); }
/* .footer-social base rules are defined earlier alongside the social-icon-link system */
.footer-bottom{
  margin-top: 26px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:0.78rem; color: rgba(243,239,228,.45);
}

/* =========================== EL NIÑO FULL PAGE — shared + specific =========================== */
.page-hero{
  position:relative; min-height:78vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  overflow:hidden; isolation:isolate;
}
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.page-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,20,16,.6), rgba(7,20,16,.85)); z-index:-1; }
.page-hero h1{ font-size: clamp(3.5rem, 13vw, 10rem); color:var(--offwhite); }
.page-hero p{ margin-top:22px; font-size:1.15rem; color:var(--offwhite-dim); max-width:44ch; }

.explain{
  padding: 120px 0;
  background: var(--forest);
}
.explain-grid{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap:60px; align-items:start;
}
.explain .kicker{ font-family:var(--font-display); font-weight:700; color:var(--leaf-2); font-size:.95rem; margin-bottom:20px; letter-spacing:.04em; }
.explain h2{ font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: 8px; }
.explain-body p{ font-size:1.08rem; color:var(--offwhite-dim); max-width:60ch; }
.explain-body p + p{ margin-top:16px; }

.sequence{
  background: var(--pine);
  padding: 110px 0;
  overflow:hidden;
}
.sequence h2{ font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom:60px; }
.sequence-track{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:2px;
  background: rgba(243,239,228,.14);
  border-radius: 18px;
  overflow:hidden;
}
.seq-step{
  background: var(--pine);
  padding: 30px 26px 34px;
  position:relative;
}
.seq-step .num{ font-family:var(--font-display); font-size:.85rem; color:var(--leaf-2); margin-bottom:16px; display:block; }
.seq-step .frame{ border-radius:10px; overflow:hidden; aspect-ratio: 4/5; margin-bottom:18px; }
.seq-step .frame img{ width:100%; height:100%; object-fit:cover; }
.seq-step h3{ font-size:1.05rem; text-transform:none; font-family:var(--font-body); font-weight:700; margin-bottom:8px; }
.seq-step p{ font-size:0.88rem; color: var(--offwhite-dim); }
.seq-step:not(:last-child)::after{
  content:"→"; position:absolute; top:34px; right:-14px; z-index:2;
  color: var(--leaf-2); font-size:1.2rem; font-family:var(--font-display);
}

.regions{
  padding: 120px 0;
  background: var(--forest);
}
.regions h2{ font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom:16px; }
.regions > .container > p{ color:var(--offwhite-dim); max-width:60ch; font-size:1.05rem; margin-bottom:50px; }
.region-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.region-tab{
  padding:10px 22px; border-radius:999px; border:1px solid rgba(243,239,228,.25);
  background:transparent; color:var(--offwhite-dim); font-size:.88rem; font-weight:600; cursor:pointer;
  transition: all .3s var(--ease);
}
.region-tab.active{ background:var(--leaf); border-color:var(--leaf); color:var(--forest-deep); }
.region-panels{ position:relative; }
.region-panel{
  display:none;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items:center;
}
.region-panel.active{ display:grid; }
.region-panel .frame{ border-radius:16px; overflow:hidden; aspect-ratio:4/5; }
.region-panel .frame img{ width:100%; height:100%; object-fit:cover; }
.region-panel h3{ font-size:clamp(1.6rem,3.5vw,2.4rem); margin-bottom:18px; text-transform:none; font-family:var(--font-display); }
.region-panel p{ color:var(--offwhite-dim); font-size:1.05rem; max-width:52ch; }

.india{
  position:relative;
  background: var(--pine);
  padding: 130px 0;
  overflow:hidden;
}
.india::before{
  content:""; position:absolute; inset:0;
  background-image:url('../images/india-impact.jpg'); background-size:cover; background-position:center;
  opacity:.18;
}
.india-inner{ position:relative; }
.india h2{ font-size: clamp(2.2rem, 5.5vw, 4rem); max-width:16ch; margin-bottom:20px; }
.india > .container > .india-inner > p.lead{ color:var(--offwhite-dim); font-size:1.1rem; max-width:58ch; margin-bottom:60px; }
.india-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:0;
  border-top:1px solid rgba(243,239,228,.16);
}
.india-item{ padding:30px 30px 30px 0; border-right:1px solid rgba(243,239,228,.16); }
.india-item:nth-child(3n){ border-right:none; }
.india-item h3{ font-size:1.05rem; text-transform:none; font-family:var(--font-body); font-weight:700; margin-bottom:10px; }
.india-item p{ font-size:0.92rem; color:var(--offwhite-dim); }

.back-cta{
  padding: 120px 0;
  background: var(--forest-deep);
  text-align:center;
}
.back-cta h2{ font-size: clamp(2rem,5vw,3.6rem); max-width:18ch; margin:0 auto 40px; }

/* =========================== FLOATING SOCIAL ICONS (left side) =========================== */
.floating-social{
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.floating-social a{
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.floating-social a:hover{ transform: scale(1.1); box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.floating-social a svg{ width: 26px; height: 26px; display:block; }
.floating-social a img{ width: 28px; height: 28px; display:block; object-fit: contain; border-radius: 6px; }
.floating-social .fs-whatsapp{ background: #25D366; }
.floating-social a svg{ fill:#fff; }
.floating-social .fs-whatsapp{ background:#25D366; }
.floating-social .fs-instagram{
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}
.floating-social .fs-facebook{ background:#1877F2; }
.floating-social .fs-youtube{ background:#FF0000; }
.floating-social .fs-linkedin{ background:#0A66C2; }
.floating-social .fs-email{ background:#EA4335; }
.floating-social .fs-instagram svg, .floating-social .fs-email svg{ fill:none; }
@media (max-width: 620px){
  .floating-social{ left: 8px; gap: 8px; }
  .floating-social a{ width: 38px; height: 38px; }
  .floating-social a svg{ width: 19px; height: 19px; }
}

/* =========================== RESPONSIVE =========================== */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .why-grid{ grid-template-columns:1fr; gap:60px; }
  .why-media .quote-float{ right:0; }
  .impact-grid{ grid-template-columns:1fr; }
  .impact-item:nth-child(odd){ border-right:none; }
  .elnino-intro-grid{ grid-template-columns:1fr; }
  .elnino-intro-media{ order:-1; max-width:360px; }
  .explain-grid{ grid-template-columns:1fr; gap:40px; }
  .sequence-track{ grid-template-columns:1fr 1fr; }
  .seq-step:not(:last-child)::after{ display:none; }
  .region-panel{ grid-template-columns:1fr; }
  .india-grid{ grid-template-columns:1fr; }
  .india-item{ border-right:none; border-bottom:1px solid rgba(243,239,228,.16); }
}
@media (max-width: 620px){
  .sequence-track{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; align-items:flex-start; }
  .timeline-item{ padding-left: 32px; padding-bottom: 44px; }
  .impact-item{ padding: 36px 24px; }
}