/* =============================================================
   THE GIVING WATER — Page & feature section styles
   ============================================================= */

/* ---------------- HERO ---------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  background:var(--grad-hero); color:#eaf6fd; isolation:isolate; }
.hero__canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; }
.hero__veil{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(120% 90% at 50% -10%, rgba(24,110,170,.25), transparent 60%),
             linear-gradient(180deg, rgba(6,38,63,.2), rgba(6,38,63,.55)); }
.hero .container{ position:relative; z-index:3; padding-top:var(--header-h); }
.hero__inner{ max-width:900px; }
.hero h1{ color:#fff; font-size:var(--fs-hero); line-height:1.03; letter-spacing:-.02em; margin-bottom:1.2rem;
  text-shadow:0 4px 30px rgba(4,24,40,.35); }
.hero h1 .serif-accent{ color:#bfe6f8; }
.hero__lead{ font-size:var(--fs-lead); color:#d4ebf8; max-width:60ch; margin-bottom:2rem; line-height:1.5; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3rem); margin-top:2.6rem; }
.hero__stats .s .n{ font-family:var(--font-head); font-weight:600; font-size:1.9rem; color:#fff; }
.hero__stats .s .l{ font-size:.82rem; color:#a9cee2; letter-spacing:.04em; }
.hero__scroll{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:3;
  color:#bfe1f2; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; text-align:center; }
.hero__scroll .m{ width:24px; height:38px; border:2px solid rgba(255,255,255,.4); border-radius:14px; margin:.5rem auto 0; position:relative; }
.hero__scroll .m::after{ content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%); width:4px; height:8px;
  border-radius:3px; background:#cfe9f6; animation:bob 1.6s var(--ease-inout) infinite; }
.hero__badges{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.6rem; }

/* Floating bottle in hero (decorative) */
.hero__bottle{ position:absolute; right:6%; bottom:8%; z-index:2; width:clamp(120px,18vw,230px);
  animation:bobSlow 7s var(--ease-inout) infinite; filter:drop-shadow(0 30px 40px rgba(4,24,40,.5)); }
@media (max-width:1024px){ .hero__bottle{ opacity:.35; right:-4%; } }

/* ---------------- Journey / story rail ---------------- */
.journey{ position:relative; }
.journey__step{ position:relative; padding-block:clamp(3rem,8vw,7rem); }
.scene{ position:relative; border-radius:var(--radius-xl); overflow:hidden; min-height:clamp(280px,44vw,520px);
  box-shadow:var(--shadow-lg); display:flex; align-items:flex-end; }
.scene img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.scene__grad{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,38,63,0) 30%, rgba(6,26,43,.82)); }
.scene__body{ position:relative; z-index:2; padding:clamp(1.5rem,4vw,3rem); color:#fff; max-width:640px; }
.scene__body h3{ color:#fff; font-size:var(--fs-h2); }
.scene__body p{ color:#d9ecf7; }
.scene-tag{ position:absolute; top:1rem; left:1rem; z-index:2; }

/* ---------------- US disaster map ---------------- */
.usmap-wrap{ position:relative; background:var(--grad-deep); border-radius:var(--radius-xl); overflow:hidden;
  padding:clamp(1.4rem,3vw,2.4rem); box-shadow:var(--shadow-lg); }
.usmap-grid{ display:grid; grid-template-columns:1.5fr .9fr; gap:2rem; align-items:center; }
@media (max-width:940px){ .usmap-grid{ grid-template-columns:1fr; } }
.usmap svg{ width:100%; height:auto; display:block; }
.usmap .state{ fill:rgba(180,220,245,.14); stroke:rgba(160,210,240,.35); stroke-width:.8;
  transition:fill var(--t),filter var(--t); cursor:pointer; }
.usmap .state:hover{ fill:rgba(120,205,245,.55); }
.usmap .state.active{ fill:url(#stateGlow); filter:drop-shadow(0 0 6px rgba(90,200,245,.8)); }
.usmap .pulse{ fill:#5ac8f5; }
.usmap-legend{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.usmap-info{ color:#dff1fb; }
.usmap-info .ev{ display:flex; gap:.8rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.1); }
.usmap-info .ev .ic{ width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.1); display:grid; place-items:center; flex:0 0 auto; color:#8fd6f5; }
.disaster-legend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:.4rem; }

/* ---------------- Chug Challenge ---------------- */
.chug-hero{ background:var(--grad-hero); color:#fff; }
.chug-steps{ counter-reset:cs; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:800px){ .chug-steps{ grid-template-columns:1fr; } }
.chug-step{ position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:2rem 1.6rem 1.6rem; box-shadow:var(--shadow-sm); }
.chug-step::before{ counter-increment:cs; content:counter(cs); position:absolute; top:-22px; left:1.6rem;
  width:44px; height:44px; border-radius:50%; background:var(--grad-brand); color:#fff; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; font-size:1.2rem; box-shadow:var(--shadow); }
.chug-meter{ max-width:520px; }

/* ---------------- Donate ---------------- */
.donate-card{ background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.donate-card__head{ background:var(--grad-brand); color:#fff; padding:1.4rem 1.6rem; }
.donate-card__body{ padding:clamp(1.4rem,3vw,2rem); }
.toggle-freq{ display:inline-flex; background:var(--mist); border-radius:var(--radius-pill); padding:.3rem; gap:.2rem; }
.toggle-freq button{ border:0; background:transparent; padding:.55rem 1.2rem; border-radius:var(--radius-pill); font-weight:700;
  color:var(--text-muted); transition:all var(--t-fast); }
.toggle-freq button.on{ background:#fff; color:var(--river-900); box-shadow:var(--shadow-sm); }
.amt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.amt{ position:relative; }
.amt input{ position:absolute; opacity:0; }
.amt label{ display:block; text-align:center; padding:1rem .5rem; border:2px solid var(--border-strong); border-radius:14px;
  font-family:var(--font-head); font-weight:700; font-size:1.3rem; color:var(--river-900); cursor:pointer; transition:all var(--t-fast); }
.amt label .sub{ display:block; font-family:var(--font-body); font-size:.7rem; font-weight:600; color:var(--text-muted); margin-top:.2rem; letter-spacing:.03em; }
.amt input:checked + label{ border-color:var(--crystal-500); background:var(--stream-50); box-shadow:var(--ring); }
.amt input:focus-visible + label{ box-shadow:var(--ring); }
.impact-line{ display:flex; gap:.8rem; align-items:center; padding:.7rem 1rem; background:var(--stream-50);
  border:1px solid var(--stream-200); border-radius:12px; font-weight:600; color:var(--river-800); }
.impact-line .drop{ width:26px; height:26px; flex:0 0 auto; }

/* ---------------- How it flows (model) ---------------- */
.flow-diagram{ display:grid; gap:1rem; }
.flow-node{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.3rem;
  box-shadow:var(--shadow-xs); position:relative; }
.flow-node .h{ font-weight:800; color:var(--river-900); }
.flow-node.top{ background:var(--grad-deep); color:#fff; border:0; text-align:center; }
.flow-node.top .h{ color:#fff; }
.flow-arrow{ display:grid; place-items:center; color:var(--crystal-500); }
.flow-split{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:760px){ .flow-split{ grid-template-columns:1fr; } }

/* ---------------- Board ---------------- */
.board-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
@media (max-width:900px){ .board-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }
.member{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t); }
.member:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.member__photo{ aspect-ratio:4/5; position:relative; overflow:hidden; background:var(--grad-deep); }
.member__photo img{ width:100%; height:100%; object-fit:cover; }
.member__photo .initials{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-head);
  font-size:3.4rem; color:rgba(255,255,255,.9); font-weight:600; }
.member__body{ padding:1.4rem 1.4rem 1.6rem; }
.member__name{ font-family:var(--font-head); font-size:1.35rem; color:var(--river-900); margin:0; }
.member__role{ color:var(--brand-600); font-weight:700; font-size:.9rem; letter-spacing:.03em; margin:.2rem 0 .8rem; }

/* ---------------- Label anatomy ---------------- */
.label-anatomy{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
@media (max-width:900px){ .label-anatomy{ grid-template-columns:1fr; } }
.label-stage{ position:relative; background:var(--grad-sky); border-radius:var(--radius-xl); padding:2rem; box-shadow:var(--shadow-md);
  display:grid; place-items:center; min-height:360px; }
.label-callouts{ display:grid; gap:1rem; }
.callout{ display:flex; gap:1rem; align-items:flex-start; padding:1rem 1.2rem; background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-xs); transition:border-color var(--t),transform var(--t); }
.callout:hover{ border-color:var(--crystal-500); transform:translateX(4px); }
.callout .n{ width:30px; height:30px; border-radius:50%; background:var(--grad-brand); color:#fff; display:grid; place-items:center; font-weight:800; flex:0 0 auto; }

/* Layered label build animation stage */
.label-build{ position:relative; width:min(280px,80%); }
.label-build .layer{ transition:transform .6s var(--ease-out),opacity .6s; }

/* ---------------- Network tiles (advertise) ---------------- */
.net-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem; }
.net-tile{ position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:1.6rem; min-height:180px;
  color:#fff; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:var(--shadow-md);
  transition:transform var(--t); background:var(--grad-deep); }
.net-tile:hover{ transform:translateY(-5px); }
.net-tile.tgw{ background:linear-gradient(150deg,#0e5c92,#0a2c48); }
.net-tile__k{ font-family:var(--font-head); font-size:1.25rem; }
.net-tile__d{ font-size:.85rem; color:#cfe6f2; }
.net-tile .flag{ position:absolute; top:1rem; right:1rem; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; background:rgba(255,255,255,.16); padding:.25rem .6rem; border-radius:6px; }

/* ---------------- Portal dashboard mock ---------------- */
.dash{ display:grid; grid-template-columns:230px 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-md); background:#fff; }
@media (max-width:820px){ .dash{ grid-template-columns:1fr; } }
.dash__side{ background:var(--grad-deep); color:#dff1fb; padding:1.4rem 1rem; }
.dash__side .logo{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.4rem; color:#fff; font-family:var(--font-head); }
.dash__nav{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
.dash__nav a{ display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius:10px; color:#c7e2f0; font-weight:600; font-size:.92rem; }
.dash__nav a.on,.dash__nav a:hover{ background:rgba(255,255,255,.1); color:#fff; }
.dash__main{ padding:clamp(1.2rem,3vw,2rem); background:var(--paper); }
.dash-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:760px){ .dash-cards{ grid-template-columns:repeat(2,1fr); } }
.dash-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.1rem; box-shadow:var(--shadow-xs); }
.dash-card .k{ font-size:.78rem; color:var(--text-muted); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.dash-card .v{ font-family:var(--font-head); font-size:1.8rem; color:var(--river-900); }
.dash-card .t{ font-size:.78rem; font-weight:700; }
.dash-card .t.up{ color:#1f9d6a; } .dash-card .t.down{ color:var(--red-500); }

/* Fake chart bars */
.barchart{ display:flex; align-items:flex-end; gap:.5rem; height:150px; }
.barchart .bar{ flex:1; border-radius:8px 8px 0 0; background:var(--grad-brand); opacity:.85; min-height:8px; transition:height 1s var(--ease-water); }

/* ---------------- Press kit ---------------- */
.kit-item{ display:flex; gap:1rem; align-items:center; padding:1.1rem 1.3rem; background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-xs); transition:border-color var(--t),transform var(--t); }
.kit-item:hover{ border-color:var(--crystal-500); transform:translateY(-2px); }
.kit-item .ic{ width:44px; height:44px; border-radius:11px; background:var(--stream-100); color:var(--brand-600); display:grid; place-items:center; flex:0 0 auto; }
.fact-table{ width:100%; border-collapse:collapse; }
.fact-table th,.fact-table td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--border); vertical-align:top; }
.fact-table th{ width:38%; color:var(--text-muted); font-weight:700; font-size:.9rem; }
.fact-table td{ font-weight:600; color:var(--river-900); }

/* ---------------- CTA band ---------------- */
.cta-band{ position:relative; background:var(--grad-hero); color:#fff; border-radius:var(--radius-xl); overflow:hidden;
  padding:clamp(2.4rem,5vw,4.4rem); text-align:center; box-shadow:var(--shadow-lg); }
.cta-band h2{ color:#fff; }
.cta-band .lead{ color:#cfe6f2; }
.cta-band__inner{ position:relative; z-index:2; max-width:640px; margin-inline:auto; }

/* ---------------- Contact split ---------------- */
.contact-info{ display:grid; gap:1rem; }
.contact-info .row{ display:flex; gap:1rem; align-items:flex-start; }
.contact-info .ic{ width:46px; height:46px; border-radius:12px; background:var(--stream-100); color:var(--brand-600);
  display:grid; place-items:center; flex:0 0 auto; }

/* ---------------- Page hero (interior) ---------------- */
.page-hero{ position:relative; background:var(--grad-hero); color:#fff; padding:calc(var(--header-h) + 2.4rem) 0 3.4rem; overflow:hidden; }
.page-hero h1{ color:#fff; }
.page-hero .lead{ color:#cfe6f2; max-width:60ch; }
.page-hero .caustics{ opacity:.25; }
.page-hero .waves{ z-index:2; }
.page-hero .container{ position:relative; z-index:3; }

/* ---------------- Homepage extras ---------------- */
.hero .waves{ z-index:2; }
.waves--hero{ height:clamp(96px,14vw,200px); }
.waves .w-a{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'><path d='M0 50 C 150 100 350 0 600 50 C 850 100 1050 0 1200 50 L1200 120 L0 120 Z' fill='%232ea3dc'/></svg>");
  animation:waveScrollRev 18s linear infinite; opacity:.5; }
.waves .w-b{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'><path d='M0 65 C 200 15 400 115 600 65 C 800 15 1000 115 1200 65 L1200 120 L0 120 Z' fill='%2358c6f0'/></svg>");
  animation:waveScroll 24s linear infinite; opacity:.55; }

/* Hydration fact banner */
.fact-banner{ display:flex; align-items:center; gap:.9rem; padding:1rem 1.3rem; border-radius:var(--radius);
  background:var(--stream-50); border:1px solid var(--stream-200); color:var(--river-800); font-weight:600; }
.fact-banner .fb-ico{ width:40px; height:40px; flex:0 0 auto; border-radius:10px; background:var(--grad-brand);
  color:#fff; display:grid; place-items:center; }
.fact-banner .fb-ico svg{ width:20px; height:20px; }
.fact-banner strong{ color:var(--river-900); }

.scene__art{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.scene__art svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sky-beauty{ background:linear-gradient(180deg,#bfe4f5,#eaf6fc 60%,#dff0e6); }
.sky-storm{ background:linear-gradient(180deg,#38566b,#5f7889 60%,#83a0b0); }
.sky-dawn{ background:linear-gradient(180deg,#f9dcb3,#f2b487 45%,#8fbfd8); }
.fx-rain line{ animation:rainFall .9s linear infinite; }
.fx-rain line:nth-child(2n){ animation-duration:1.1s; }
.fx-rain line:nth-child(3n){ animation-duration:.75s; }
@keyframes rainFall{ 0%{ transform:translateY(-14px); opacity:.15; } 50%{ opacity:.6; } 100%{ transform:translateY(34px); opacity:0; } }
.journey .scene{ margin-bottom:2rem; }
.journey .scene:last-child{ margin-bottom:0; }
.big-drop{ width:54px; height:54px; color:var(--crystal-400); margin:0 auto; }

.plogo{ font-family:var(--font-head); font-weight:600; font-size:1.2rem; color:var(--slate-600); opacity:.72;
  white-space:nowrap; letter-spacing:.01em; transition:opacity var(--t),color var(--t); }
.plogo:hover{ opacity:1; color:var(--brand-600); }

@media (prefers-reduced-motion: reduce){ .fx-rain line{ animation:none; } }

/* ---------------- Label page: bottle mockup ---------------- */
.label-bottle{ position:relative; width:min(240px,74%); aspect-ratio:240/440;
  filter:drop-shadow(0 26px 36px rgba(10,42,67,.35)); animation:bobSlow 8s var(--ease-inout) infinite; }
.lb-cap{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:34%; height:4.6%;
  background:linear-gradient(#eef7fc,#bcd7e6); border-radius:8px 8px 3px 3px; z-index:5; }
.lb-neck{ position:absolute; top:4%; left:50%; transform:translateX(-50%); width:30%; height:7%;
  background:linear-gradient(180deg,#dbeef7,#eef7fc); z-index:1; }
.lb-body{ position:absolute; top:9.5%; left:0; right:0; bottom:0;
  border-radius:30px 30px 40px 40px / 46px 46px 40px 40px;
  background:linear-gradient(180deg, rgba(223,242,251,.95), rgba(193,227,242,.8) 45%, rgba(150,205,232,.65));
  border:2px solid rgba(255,255,255,.75); overflow:hidden; box-shadow:inset 0 0 34px rgba(255,255,255,.55); z-index:2; }
.lb-shine{ position:absolute; top:5%; left:11%; width:7%; bottom:7%; z-index:6;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.08)); border-radius:8px; }
.label-wrap{ position:absolute; top:19%; left:7%; right:7%; bottom:9%; z-index:3;
  background:linear-gradient(180deg,#ffffff,#f2f9fd); border-radius:10px; box-shadow:0 3px 12px rgba(10,42,67,.16);
  padding:9% 7% 7%; display:flex; flex-direction:column; align-items:center; overflow:hidden; }
.wc{ position:absolute; inset:0; padding:7%; display:flex; flex-wrap:wrap; gap:1px 5px;
  align-content:center; justify-content:center; opacity:.55; line-height:1.05; }
.wc .w{ font-family:var(--font-body); font-weight:700; color:var(--brand-500); }
.wc .s1{ font-size:.5rem; opacity:.55; } .wc .s2{ font-size:.66rem; color:var(--crystal-500); }
.wc .s3{ font-size:.82rem; color:var(--river-700); }
.label-logo{ position:relative; z-index:2; display:flex; align-items:center; gap:5px; margin-top:4%; }
.lb-drop{ width:36px; height:36px; }
.ll-text{ font-family:var(--font-head); font-weight:700; color:var(--river-900); font-size:.62rem; line-height:.98; text-align:left; letter-spacing:.02em; }
.ll-text b{ font-size:.98rem; color:var(--brand-600); letter-spacing:-.02em; }
.label-sponsor{ position:relative; z-index:2; margin-top:auto; width:82%; aspect-ratio:3/1.35;
  border:2px dashed var(--brand-500); border-radius:8px; display:grid; place-items:center; background:rgba(55,182,233,.06); }
.label-sponsor span{ font-weight:800; color:var(--brand-600); font-size:.66rem; text-align:center; letter-spacing:.06em; }
.label-foot{ position:relative; z-index:2; margin-top:5%; font-size:.5rem; font-weight:700; color:var(--stone-500); letter-spacing:.02em; }
@media (prefers-reduced-motion: reduce){ .label-bottle{ animation:none; } }

/* ---------------- Sponsorship tiers ---------------- */
.tier-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1.2rem; }
.tier{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease-out), box-shadow var(--t), border-color var(--t); }
.tier:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--stream-200); }
.tier.pop{ border-color:var(--crystal-500); box-shadow:var(--shadow-glow); }
.tier__name{ font-weight:800; letter-spacing:.09em; text-transform:uppercase; font-size:.8rem; color:var(--brand-600); }
.tier__price{ font-family:var(--font-head); font-size:2.1rem; color:var(--river-900); line-height:1; margin:.4rem 0 .3rem; }
.tier__meta{ color:var(--text-muted); font-size:.88rem; margin-bottom:1rem; min-height:2.4em; }
.tier__price .per{ display:block; font-family:var(--font-body); font-size:.72rem; font-weight:700; color:var(--stone-500); letter-spacing:.02em; margin-top:.3rem; }
.tier .pop-tag{ position:absolute; top:-12px; right:1.2rem; background:var(--grad-brand); color:#fff; font-size:.68rem;
  font-weight:800; letter-spacing:.1em; padding:.3rem .7rem; border-radius:var(--radius-pill); text-transform:uppercase; box-shadow:var(--shadow); }
.tier .btn{ margin-top:auto; }