/* =============================================================
   THE GIVING WATER — Components
   Buttons, cards, stats, the water-bottle nav, header, footer, etc.
   ============================================================= */

/* ---------------- Buttons ---------------- */
.btn{
  --btn-bg:var(--grad-brand); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:var(--radius-pill); border:0;
  font-family:var(--font-body); font-weight:700; font-size:1rem; letter-spacing:.01em;
  color:var(--btn-fg); background:var(--btn-bg); background-size:180% 180%;
  box-shadow:0 10px 24px -10px rgba(15,84,136,.6); cursor:pointer; text-align:center;
  transition:transform var(--t) var(--ease-water), box-shadow var(--t) var(--ease-out),
             background-position var(--t-slow) var(--ease-out), filter var(--t-fast);
  position:relative; overflow:hidden; isolation:isolate;
}
.btn:hover{ color:#fff; transform:translateY(-2px); background-position:100% 50%;
  box-shadow:0 18px 40px -12px rgba(15,84,136,.7); }
.btn:active{ transform:translateY(0) scale(.99); }
.btn svg{ width:1.15em; height:1.15em; }

.btn--lg{ padding:1.15rem 2.2rem; font-size:1.08rem; }
.btn--sm{ padding:.6rem 1.1rem; font-size:.9rem; }
.btn--block{ display:flex; width:100%; }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--river-800); background:transparent;
  border:2px solid var(--border-strong); box-shadow:none; }
.btn--ghost:hover{ color:var(--river-900); border-color:var(--crystal-500);
  background:rgba(55,182,233,.08); box-shadow:none; }

.btn--onDark{ --btn-fg:#06283f; --btn-bg:linear-gradient(135deg,#eaf7fe,#bfe6f8); }
.btn--outline-light{ background:transparent; border:2px solid rgba(255,255,255,.5); color:#fff; box-shadow:none; }
.btn--outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }

.btn--red{ --btn-bg:linear-gradient(135deg,#d0483a,#a5281c); }
.btn--gold{ --btn-bg:linear-gradient(135deg,#f2c260,#e0a02f); --btn-fg:#3a2600; }

/* Underlined text link with arrow */
.link-arrow{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--brand-600); }
.link-arrow svg{ transition:transform var(--t) var(--ease-out); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* ---------------- Chips / badges ---------------- */
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem;
  border-radius:var(--radius-pill); font-size:.82rem; font-weight:700; letter-spacing:.02em;
  background:var(--stream-100); color:var(--brand-600); border:1px solid var(--stream-200); }
.chip--red{ background:#fdecea; color:var(--red-600); border-color:#f6d3ce; }
.chip--gold{ background:#fdf3dc; color:#8a5a06; border-color:#f2e0b2; }
.chip--onDark{ background:rgba(255,255,255,.1); color:#dff2fc; border-color:rgba(255,255,255,.18); }
.badge-501{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); color:#eaf6fd;
  font-weight:700; font-size:.85rem; }

/* ---------------- Cards ---------------- */
.card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3vw,2.1rem); box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
             border-color var(--t) var(--ease-out); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--stream-200); }
.card__icon{ width:56px; height:56px; display:grid; place-items:center; border-radius:16px;
  background:var(--grad-brand); color:#fff; margin-bottom:1.1rem; box-shadow:var(--shadow); }
.card__icon svg{ width:28px; height:28px; }
.card h3{ margin-bottom:.5rem; }
.card--flush{ padding:0; overflow:hidden; }
.card--flush .card__body{ padding:clamp(1.4rem,3vw,1.9rem); }
.card--glass{ background:var(--grad-glass); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.5); color:#eaf6fd; }
.card--deep{ background:linear-gradient(160deg,#0d4671,#0a3255); border-color:rgba(255,255,255,.08); color:#dfeef8; }
.card--deep h3{ color:#fff; }

.card-media{ aspect-ratio:16/10; background:var(--grad-sky); position:relative; }
.card-media img{ width:100%; height:100%; object-fit:cover; }

/* Value / feature list item */
.feature{ display:flex; gap:1rem; align-items:flex-start; }
.feature .tick{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--stream-100); color:var(--brand-600); margin-top:.15rem; }
.feature .tick svg{ width:16px; height:16px; }

/* ---------------- Stats ---------------- */
.stat{ text-align:center; padding:1.6rem 1rem; position:relative; }
.stat__num{ font-family:var(--font-head); font-weight:600; font-size:clamp(2.3rem,5vw,3.6rem);
  line-height:1; color:var(--river-900); letter-spacing:-.02em; }
.section--deep .stat__num{ color:#fff; }
.stat__num .u{ color:var(--crystal-500); }
.stat__label{ margin-top:.5rem; font-weight:600; color:var(--text-muted); font-size:.98rem; }
.section--deep .stat__label{ color:var(--text-onDark-mut); }

/* ---------------- Section header ---------------- */
.sec-head{ max-width:760px; margin:0 auto clamp(2rem,4vw,3.4rem); }
.sec-head.left{ margin-left:0; }
.sec-head p{ color:var(--text-muted); font-size:var(--fs-lead); line-height:var(--lh-snug); }
.section--deep .sec-head p{ color:var(--text-onDark-mut); }

/* ---------------- Pull quote ---------------- */
.quote{ font-family:var(--font-head); font-size:clamp(1.4rem,3vw,2.2rem); line-height:1.3;
  color:var(--river-900); font-weight:500; }
.section--deep .quote{ color:#eaf6fd; }
.quote--mark{ position:relative; padding-left:2.2rem; }
.quote--mark::before{ content:"\201C"; position:absolute; left:-.1rem; top:-.4rem;
  font-size:3.4rem; color:var(--crystal-500); line-height:1; }
.quote cite{ display:block; margin-top:1rem; font-family:var(--font-body); font-style:normal;
  font-size:1rem; font-weight:700; color:var(--text-muted); }

/* =============================================================
   HEADER + WATER-BOTTLE NAVIGATION
   ============================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-header);
  transition:background var(--t) var(--ease-out), box-shadow var(--t), height var(--t);
}
.site-header::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,38,63,.62), rgba(6,38,63,0));
  opacity:1; transition:opacity var(--t); }
.site-header.scrolled{ background:rgba(247,251,253,.9); backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 6px 24px -14px rgba(10,42,67,.5); }
.site-header.scrolled::before{ opacity:0; }

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:var(--header-h); padding-inline:var(--gutter); max-width:var(--maxw-wide); margin-inline:auto; }

/* Brand lockup */
.brand{ display:inline-flex; align-items:center; gap:.7rem; flex:0 0 auto; }
.brand__mark{ width:44px; height:44px; flex:0 0 auto; filter:drop-shadow(0 3px 6px rgba(6,38,63,.35)); }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--font-head); font-weight:600; font-size:1.15rem; color:#fff; letter-spacing:.01em; }
.brand__tag{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:#bfe1f2; margin-top:.28rem; font-weight:700; }
.scrolled .brand__name{ color:var(--river-900); }
.scrolled .brand__tag{ color:var(--brand-600); }

/* The bottle rack */
.bottle-nav{ display:flex; align-items:flex-end; gap:clamp(.15rem,.7vw,.7rem); }
.bottle-nav a{ text-decoration:none; }
.bottle-link{
  --w-light:#cdeefb; --w-mid:#8fd3f0; --w-dark:#1f7fbf;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.2rem .25rem; border-radius:12px; position:relative;
  transition:transform var(--t) var(--ease-water); outline-offset:4px;
}
.bottle-link:hover{ transform:translateY(-4px); }

.bottle{ position:relative; width:34px; height:82px; display:block; }
@media (max-width:1200px){ .bottle{ width:29px; height:70px; } }
.scrolled .bottle{ width:31px; height:74px; }
@media (max-width:1200px){ .scrolled .bottle{ width:27px; height:64px; } }

.bottle-svg{ width:100%; height:100%; overflow:visible; display:block;
  filter:drop-shadow(0 5px 7px rgba(6,38,63,.32)); transition:filter var(--t) var(--ease-out);
  /* center-out depth color (set via inline --depth on the <svg>) */
  --fill-color:color-mix(in srgb, #cbeefd, #1b7cbd calc(var(--depth,.2) * 82%));
  --fill-top:  color-mix(in srgb, #ffffff, var(--fill-color) 45%); }
.scrolled .bottle-svg{ filter:drop-shadow(0 4px 6px rgba(10,42,67,.22)); }

.bottle-svg .water{ fill:var(--fill-color, #6ec4e8); }
.bottle-svg .water-top{ fill:var(--fill-top, #d4f0fd); }
.bottle-svg .water-g{ transform:translateY(20px); transform-origin:center;
  transition:transform var(--t-slow) var(--ease-water), filter var(--t); }
.bottle-svg .bottle-outline{ transition:stroke var(--t); }

.bottle-link:hover .bottle-svg .water-g{ transform:translateY(9px); }
.bottle-link:hover .bottle-svg{ filter:drop-shadow(0 9px 12px rgba(6,38,63,.42)); }

/* Active / lit-up state */
.bottle-link.is-active .bottle-svg .water-g{ transform:translateY(3px); filter:brightness(1.12) saturate(1.18); }
.bottle-link.is-active .bottle-svg{ filter:drop-shadow(0 0 12px rgba(90,200,240,.95)); }
.bottle-link.is-active .bottle-svg .bottle-outline{ stroke:#c4f0ff; }

.bottle-label{ font-size:.72rem; font-weight:700; letter-spacing:.01em; color:#eaf6fd; white-space:nowrap;
  transition:color var(--t); }
.scrolled .bottle-label{ color:var(--slate-700); }
.bottle-link.is-active .bottle-label{ color:#fff; }
.scrolled .bottle-link.is-active .bottle-label{ color:var(--brand-600); }
.bottle-link.is-active::after{ content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--crystal-500); box-shadow:var(--shadow-glow); }

/* Click flash */
@keyframes bottleLight{ 0%{ filter:drop-shadow(0 0 0 rgba(120,220,255,0)); } 40%{ filter:drop-shadow(0 0 20px rgba(150,230,255,1)); } 100%{ filter:drop-shadow(0 0 10px rgba(90,200,240,.7)); } }
.bottle-link.flash .bottle-svg{ animation:bottleLight .7s var(--ease-out); }
@media (prefers-reduced-motion: reduce){ .bottle-svg .water-g{ transition:none; } }

/* Header actions */
.header-actions{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.nav-toggle{ display:none; width:46px; height:46px; border-radius:12px; border:1.5px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.1); color:#fff; align-items:center; justify-content:center; }
.scrolled .nav-toggle{ color:var(--river-900); border-color:var(--border-strong); background:#fff; }
.nav-toggle svg{ width:24px; height:24px; }

/* Compact bottle rack on smaller desktops */
@media (max-width:1200px){ .bottle-label{ font-size:.66rem; } .bottle{ width:26px; height:54px; } }
@media (max-width:1024px){
  .bottle-nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ---------- Mobile water drawer ---------- */
.drawer{ position:fixed; inset:0; z-index:var(--z-overlay); visibility:hidden; }
.drawer.open{ visibility:visible; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(6,26,43,.55); opacity:0; transition:opacity var(--t); }
.drawer.open .drawer__scrim{ opacity:1; }
.drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(360px,88vw);
  background:var(--grad-hero); color:#eaf6fd; box-shadow:var(--shadow-lg); overflow-y:auto;
  transform:translateX(100%); transition:transform var(--t-slow) var(--ease-water); padding:1.4rem; }
.drawer.open .drawer__panel{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
.drawer__close{ width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; }
.drawer-nav{ list-style:none; margin:0; padding:0; }
.drawer-nav li{ margin:0; border-bottom:1px solid rgba(255,255,255,.1); }
.drawer-nav a{ display:flex; align-items:center; gap:.9rem; padding:.95rem .4rem; color:#eaf6fd; font-weight:600; font-size:1.05rem; }
.drawer-nav a .mini-bottle{ width:14px; height:26px; position:relative; flex:0 0 auto; }
.drawer-nav a .mini-bottle i{ position:absolute; inset:0; border-radius:4px 4px 6px 6px; background:var(--grad-brand); opacity:.85; }
.drawer-nav a[aria-current]{ color:#fff; }
.drawer-nav a[aria-current] .mini-bottle i{ box-shadow:var(--shadow-glow); opacity:1; }
.drawer__cta{ margin-top:1.6rem; display:grid; gap:.7rem; }

/* ---------------- Logo marquee (partners) ---------------- */
.logo-strip{ display:flex; align-items:center; gap:clamp(1.5rem,4vw,3.5rem); flex-wrap:wrap; justify-content:center; }
.logo-strip .lg{ filter:grayscale(1); opacity:.6; transition:filter var(--t),opacity var(--t); font-weight:800; color:var(--slate-600); }
.logo-strip .lg:hover{ filter:grayscale(0); opacity:1; }

.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:3rem; width:max-content; animation:waveScroll 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------------- Timeline ---------------- */
.timeline{ position:relative; margin-left:1rem; padding-left:2rem; border-left:2px solid var(--stream-200); }
.timeline li{ position:relative; margin:0 0 2rem; }
.timeline li::before{ content:""; position:absolute; left:calc(-2rem - 7px); top:.35rem; width:14px; height:14px;
  border-radius:50%; background:var(--grad-brand); box-shadow:0 0 0 4px var(--stream-100); }
.timeline .yr{ font-family:var(--font-head); font-weight:700; color:var(--brand-600); }

/* ---------------- Accordion ---------------- */
.acc{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; }
.acc + .acc{ margin-top:.8rem; }
.acc summary{ list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-weight:700; color:var(--river-900);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .ico{ transition:transform var(--t); color:var(--brand-600); flex:0 0 auto; }
.acc[open] summary .ico{ transform:rotate(45deg); }
.acc__body{ padding:0 1.3rem 1.2rem; color:var(--text-muted); }

/* ---------------- Back to top ---------------- */
.to-top{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:var(--z-float); width:48px; height:48px;
  border-radius:50%; background:var(--grad-brand); color:#fff; border:0; display:grid; place-items:center;
  box-shadow:var(--shadow-md); opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity var(--t),transform var(--t); }
.to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* ---------------- Toast ---------------- */
.toast-wrap{ position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:var(--z-toast); display:grid; gap:.6rem; }
.toast{ background:var(--river-900); color:#eaf6fd; padding:.9rem 1.2rem; border-radius:12px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:.7rem; font-weight:600; animation:rise .4s var(--ease-out); }
.toast--ok{ border-left:4px solid #47c48a; }
.toast--err{ border-left:4px solid #e06459; }

/* ---------------- Breadcrumb ---------------- */
.crumbs{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.85rem; color:var(--text-muted); }
.crumbs a{ color:var(--text-muted); font-weight:600; }
.crumbs a:hover{ color:var(--brand-600); }
.crumbs .sep{ opacity:.5; }

/* ---------------- Reveal on scroll ---------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ---------------- Footer ---------------- */
.site-footer{ background:linear-gradient(180deg,#0a2c48,#071d2e); color:#c7dced; }
.footer-main{ padding:clamp(2.6rem,5vw,4.4rem) 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:clamp(1.4rem,3vw,2.4rem); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand{ margin-bottom:.8rem; }
.footer-mission{ color:#9fbdd0; max-width:34ch; margin:.6rem 0 1rem; }
.footer-social{ display:flex; gap:.6rem; margin-top:1rem; }
.footer-social a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.08); color:#cfe6f2;
  display:grid; place-items:center; transition:all var(--t-fast); }
.footer-social a:hover{ background:var(--grad-brand); color:#fff; transform:translateY(-2px); }
.footer-social a svg{ width:20px; height:20px; }
.footer-col h4{ color:#fff; font-family:var(--font-body); font-weight:800; font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer-col a,.footer-col span{ color:#a9c6d8; display:inline-flex; align-items:center; gap:.5rem; font-size:.95rem; }
.footer-col a:hover{ color:#fff; }
.footer-col .ico{ width:16px; height:16px; color:#5aa8cf; flex:0 0 auto; }
.footer-news{ margin-top:1.2rem; }
.footer-news label{ display:block; font-size:.85rem; color:#9fbdd0; margin-bottom:.5rem; font-weight:600; }
.news-row{ display:flex; gap:.5rem; }
.news-row .input{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; }
.news-row .input::placeholder{ color:#7fa0b4; }
.news-row .btn{ flex:0 0 auto; padding:.7rem .9rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:1.2rem 0; }
.footer-bottom .container{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-bottom p{ margin:0; color:#89a6ba; font-size:.85rem; }
.footer-legal{ list-style:none; display:flex; gap:1.2rem; margin:0; padding:0; flex-wrap:wrap; }
.footer-legal a{ color:#89a6ba; font-size:.85rem; }
.footer-legal a:hover{ color:#fff; }
.to-top .ico{ transform:rotate(-90deg); }