/*
Theme Name: TerraClear Foundation
Theme URI: https://terraclearfoundation.org
Author: TerraClear Foundation
Author URI: https://terraclearfoundation.org
Description: Clean, modern one-page theme for TerraClear Foundation - bringing safe drinking water to schoolchildren and families in Laos. Teal & coral palette, animated waterline hero, eight routed sections, fully responsive.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: terraclear
Tags: nonprofit, charity, one-page, responsive, custom-colors
*/

/* ============ TOKENS ============ */
:root{
  --ink:#062B33;          /* abyssal teal, near-black */
  --teal:#0B6E74;         /* primary */
  --teal-deep:#0A4A52;
  --aqua:#1FB6C1;         /* bright spring water */
  --aqua-soft:#7FD6DC;
  --mist:#EAF5F5;         /* pale water mist bg */
  --mist-2:#F4FAFA;
  --paper:#FBFCFC;
  --coral:#FF6B4A;        /* THE pop */
  --coral-deep:#E8512F;
  --line:rgba(6,43,51,.12);
  --muted:#557079;
  --shadow:0 18px 50px -20px rgba(6,43,51,.35);
  --shadow-sm:0 8px 24px -12px rgba(6,43,51,.30);
  --r:18px;
  --r-lg:28px;
  --maxw:1200px;
  --ff-display:"Bricolage Grotesque", system-ui, sans-serif;
  --ff-body:"Inter", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ff-body); color:var(--ink);
  background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--ff-display); line-height:1.04; letter-spacing:-.02em; margin:0; font-weight:700;}
p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{
  font:600 13px/1 var(--ff-body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal); display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--coral); display:inline-block}
.eyebrow.on-dark{color:var(--aqua-soft)}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--muted); max-width:62ch}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:0;
  font:600 16px/1 var(--ff-body); padding:15px 26px; border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-coral{background:var(--coral); color:#fff; box-shadow:0 12px 28px -10px rgba(255,107,74,.7)}
.btn-coral:hover{background:var(--coral-deep); transform:translateY(-2px); box-shadow:0 18px 34px -10px rgba(255,107,74,.8)}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-2px)}
.btn-ghost.on-dark{color:#fff; border-color:rgba(255,255,255,.35)}
.btn-ghost.on-dark:hover{border-color:#fff; background:rgba(255,255,255,.08); color:#fff}
.btn-teal{background:var(--teal); color:#fff}
.btn-teal:hover{background:var(--teal-deep); transform:translateY(-2px)}
.btn-sm{padding:11px 18px; font-size:14px}

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:100; background:rgba(251,252,252,.82);
  backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
header.scrolled{box-shadow:0 10px 30px -22px rgba(6,43,51,.5)}
.nav{display:flex; align-items:center; gap:18px; height:74px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--ff-display); font-weight:700; font-size:20px; letter-spacing:-.02em; margin-right:auto}
.brand .mark{width:38px;height:38px; flex:0 0 38px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  font:600 14.5px/1 var(--ff-body); color:var(--ink); padding:10px 13px; border-radius:10px;
  position:relative; transition:color .15s ease, background .15s ease;
}
.nav-links a:hover{color:var(--teal); background:var(--mist)}
.nav-links a.active{color:var(--teal)}
.nav-links a.active::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; background:var(--coral); border-radius:2px;
}
.nav-cta{display:flex; align-items:center; gap:10px}
.nav-cta .login{font:600 14.5px/1 var(--ff-body); padding:10px 6px; color:var(--ink)}
.nav-cta .login:hover{color:var(--teal)}
.hamburger{display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:4px}
.hamburger span{display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; margin:5px 0}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile menu */
.mobile-menu{
  position:fixed; inset:74px 0 0 0; background:var(--ink); z-index:99;
  transform:translateY(-12px); opacity:0; pointer-events:none; transition:.28s ease;
  padding:30px 24px 40px; overflow-y:auto;
}
.mobile-menu.open{transform:none; opacity:1; pointer-events:auto}
.mobile-menu a{display:block; color:#fff; font-family:var(--ff-display); font-weight:600; font-size:26px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-menu a.active{color:var(--aqua)}
.mobile-menu .mm-cta{margin-top:24px; display:flex; flex-direction:column; gap:12px}

/* ============ PAGE ROUTER ============ */
.page{display:none; animation:fade .4s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ============ SECTIONS ============ */
.sec{padding:96px 0}
.sec-sm{padding:64px 0}
.sec-tight{padding:72px 0}
.sec-ink{background:var(--ink); color:#fff}
.sec-ink h1,.sec-ink h2,.sec-ink h3{color:#fff}
.sec-mist{background:var(--mist)}
.section-head{max-width:640px; margin-bottom:48px}
.section-head h2{font-size:clamp(2rem,3.6vw,3rem)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* waterline divider */
.wave{display:block; width:100%; height:70px; line-height:0}
.wave svg{display:block;width:100%;height:100%}

/* ============ HERO ============ */
.hero{position:relative; background:var(--ink); color:#fff; overflow:hidden}
.hero .media-bg{position:absolute; inset:0;
  background:radial-gradient(120% 100% at 80% -10%, rgba(31,182,193,.55), transparent 55%),
             linear-gradient(180deg, #04222a 0%, #062B33 55%, #0A4A52 100%);}
.hero .media-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34; mix-blend-mode:luminosity}
.hero-inner{position:relative; z-index:2; padding:118px 0 150px; max-width:780px}
.hero h1{font-size:clamp(2.6rem,6vw,5rem); font-weight:800; letter-spacing:-.03em}
.hero h1 .accent{color:var(--aqua); position:relative}
.hero p.lead{color:rgba(255,255,255,.82); margin:26px 0 34px; font-size:clamp(1.05rem,1.7vw,1.3rem); max-width:56ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-tag{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:8px 16px;border-radius:999px;font:600 13px/1 var(--ff-body);letter-spacing:.04em;margin-bottom:26px;color:#fff}
.hero-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,107,74,.25)}
/* animated waterline at bottom of hero */
.hero-water{position:absolute; left:0; right:0; bottom:-2px; z-index:2; line-height:0}
.hero-water svg{display:block;width:100%;height:90px}
.wv1{animation:drift 14s linear infinite}
.wv2{animation:drift 9s linear infinite reverse; opacity:.6}
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.hero-stats{position:relative;z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid rgba(255,255,255,.14); padding:34px 0 0; margin-top:6px}
.hstat .n{font-family:var(--ff-display); font-weight:800; font-size:clamp(1.8rem,3.4vw,2.6rem); color:#fff; letter-spacing:-.02em}
.hstat .l{font-size:13.5px; color:var(--aqua-soft); letter-spacing:.04em}

/* ============ TRUST STRIP ============ */
.trust{padding:30px 0; border-bottom:1px solid var(--line); background:var(--paper)}
.trust-inner{display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:center}
.trust-label{font:600 12px/1 var(--ff-body); letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.trust-logos{display:flex; gap:30px; flex-wrap:wrap; align-items:center}
.trust-logos .t{display:flex;align-items:center;gap:9px;color:var(--teal-deep);font-family:var(--ff-display);font-weight:700;font-size:16px;opacity:.78}
.trust-logos .t svg{width:22px;height:22px}

/* ============ FEATURE CARDS ============ */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.ic{width:56px;height:56px;border-radius:15px; display:grid;place-items:center; margin-bottom:22px;
  background:linear-gradient(160deg,var(--aqua),var(--teal)); color:#fff}
.ic svg{width:28px;height:28px}
.ic.coral{background:linear-gradient(160deg,#FF8C6B,var(--coral))}
.card h3{font-size:1.4rem; margin-bottom:10px}
.card p{color:var(--muted); margin:0}

/* benefit (icon row, light) */
.benefit .ic{margin-bottom:18px}

/* ============ SERVICES PREVIEW (split media) ============ */
.svc-row{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center}
.svc-row.flip{direction:rtl}
.svc-row.flip > *{direction:ltr}
.media{border-radius:var(--r-lg); overflow:hidden; position:relative; min-height:340px;
  background:linear-gradient(150deg,var(--teal),var(--aqua));}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media.tall{min-height:460px}
.media .badge{position:absolute; left:18px; bottom:18px; z-index:2; background:#fff; color:var(--ink);
  font:600 13px/1 var(--ff-body); padding:10px 16px; border-radius:999px; box-shadow:var(--shadow-sm)}
.svc-list{list-style:none; padding:0; margin:18px 0 26px; display:grid; gap:12px}
.svc-list li{display:flex; gap:12px; align-items:flex-start; color:var(--ink)}
.svc-list li svg{width:20px;height:20px;flex:0 0 20px;color:var(--coral);margin-top:3px}

/* ============ TESTIMONIALS ============ */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{background:var(--mist-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;position:relative}
.quote .qm{font-family:var(--ff-display);font-size:60px;line-height:.6;color:var(--aqua-soft);height:30px}
.quote p{font-size:1.05rem;color:var(--ink);margin:14px 0 22px}
.quote .who{display:flex;align-items:center;gap:13px}
.avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(150deg,var(--aqua),var(--teal));color:#fff;
  display:grid;place-items:center;font-family:var(--ff-display);font-weight:700;font-size:18px}
.who .nm{font-weight:700;font-size:15px}
.who .rl{font-size:13px;color:var(--muted)}

/* ============ CTA BAND ============ */
.cta-band{background:linear-gradient(135deg,var(--teal-deep),var(--ink)); color:#fff; border-radius:32px; padding:64px; text-align:center; position:relative; overflow:hidden}
.cta-band::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,182,193,.45),transparent 70%);right:-120px;top:-120px}
.cta-band h2{font-size:clamp(2rem,3.6vw,2.9rem);position:relative}
.cta-band p{color:rgba(255,255,255,.82);max-width:54ch;margin:16px auto 30px;position:relative}
.cta-band .hero-cta{justify-content:center;position:relative}

/* ============ ABOUT preview ============ */
.about-prev{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.stat-pills{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.pill{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.pill .n{font-family:var(--ff-display);font-weight:800;font-size:1.7rem;color:var(--teal)}
.pill .l{font-size:13px;color:var(--muted)}

/* ============ PAGE HEADER (interior pages) ============ */
.page-hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:96px 0 110px}
.page-hero .media-bg{position:absolute;inset:0;
  background:radial-gradient(120% 120% at 85% 0%,rgba(31,182,193,.4),transparent 55%),linear-gradient(180deg,#04222a,#0A4A52)}
.page-hero .media-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;mix-blend-mode:luminosity}
.page-hero .inner{position:relative;z-index:2;max-width:720px}
.page-hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:800}
.page-hero p{color:rgba(255,255,255,.82);margin-top:18px;font-size:1.15rem;max-width:54ch}
.crumb{font:600 13px/1 var(--ff-body);letter-spacing:.06em;color:var(--aqua-soft);margin-bottom:18px}
.crumb a:hover{color:#fff}

/* ============ NEED page narrative ============ */
.narrative{max-width:760px;margin:0 auto}
.narrative h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:14px 0 16px}
.narrative p{font-size:1.12rem;color:#33474e}
.big-quote{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.25;color:var(--ink);
  border-left:4px solid var(--coral);padding:6px 0 6px 28px;margin:36px 0}
.statline{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:54px 0}
.statline .s .n{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);color:var(--coral);letter-spacing:-.02em}
.statline .s .l{color:var(--muted);font-size:15px}

/* ============ HOW IT WORKS steps ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.step{position:relative;padding:32px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.step .num{font-family:var(--ff-display);font-weight:800;font-size:44px;color:var(--aqua-soft);letter-spacing:-.03em;line-height:1}
.step h3{font-size:1.25rem;margin:10px 0 8px}
.step p{color:var(--muted);margin:0}

/* ============ FAQ ============ */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:24px 0;
  font-family:var(--ff-display);font-weight:600;font-size:1.2rem;color:var(--ink);display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq-q .pm{flex:0 0 24px;width:24px;height:24px;position:relative;transition:.25s}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--coral);border-radius:2px}
.faq-q .pm::before{left:0;right:0;top:11px;height:2px}
.faq-q .pm::after{top:0;bottom:0;left:11px;width:2px;transition:.25s}
.faq-item.open .pm::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{color:var(--muted);padding-bottom:24px;margin:0}

/* ============ LISTINGS / IMPACT ============ */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.filterbar button{font:600 14px/1 var(--ff-body);padding:11px 20px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;transition:.18s}
.filterbar button:hover{border-color:var(--teal);color:var(--teal)}
.filterbar button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.listings{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.lcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.lcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.lcard .media{border-radius:0;min-height:210px}
.lcard .tag{position:absolute;top:14px;left:14px;z-index:2;background:rgba(6,43,51,.78);color:#fff;font:600 12px/1 var(--ff-body);padding:8px 13px;border-radius:999px;letter-spacing:.03em}
.lbody{padding:24px;display:flex;flex-direction:column;flex:1}
.lbody h3{font-size:1.25rem;margin-bottom:8px}
.lbody p{color:var(--muted);margin:0 0 16px;flex:1}
.lmeta{display:flex;gap:16px;color:var(--teal);font:600 13px/1 var(--ff-body);margin-bottom:18px}
.lmeta span{display:flex;align-items:center;gap:6px}
.lmeta svg{width:15px;height:15px}
.progress{height:8px;background:var(--mist);border-radius:999px;overflow:hidden;margin-bottom:8px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--aqua),var(--coral));border-radius:999px}
.lbody .raised{font-size:13px;color:var(--muted);margin-bottom:16px}

/* ============ DONATE ============ */
.donate-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.donate-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow-sm)}
.freq{display:flex;gap:8px;background:var(--mist);padding:6px;border-radius:14px;margin-bottom:24px}
.freq button{flex:1;border:0;background:none;padding:12px;border-radius:10px;font:600 15px/1 var(--ff-body);cursor:pointer;color:var(--muted)}
.freq button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.amts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.amts button{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:18px 8px;cursor:pointer;transition:.18s;text-align:center}
.amts button .a{font-family:var(--ff-display);font-weight:800;font-size:1.4rem;display:block}
.amts button .d{font-size:12px;color:var(--muted);display:block;margin-top:3px}
.amts button:hover{border-color:var(--teal)}
.amts button.active{border-color:var(--coral);background:#FFF4F1}
.custom-amt{position:relative;margin-bottom:24px}
.custom-amt span{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted)}
.custom-amt input{width:100%;padding:16px 18px 16px 36px;border:1.5px solid var(--line);border-radius:14px;font:600 16px var(--ff-body)}
.donate-aside .ic{margin-bottom:16px}
.impact-row{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.impact-row .n{font-family:var(--ff-display);font-weight:800;color:var(--teal);font-size:1.4rem;flex:0 0 64px}
.impact-row .t{font-size:14px;color:var(--ink)}

/* ============ FORMS ============ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field.full{grid-column:1/-1}
.field label{font:600 14px/1 var(--ff-body);color:var(--ink)}
.field input,.field textarea,.field select{
  padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font:400 15px var(--ff-body);background:#fff;color:var(--ink);
  transition:border-color .15s, box-shadow .15s; width:100%; font-family:var(--ff-body)
}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgba(31,182,193,.16)}
.form-note{font-size:13px;color:var(--muted);margin-top:8px}
.form-success{background:#EAF7EE;border:1px solid #B8E4C5;color:#1B6B36;border-radius:14px;padding:16px 18px;font-size:14.5px;margin-top:16px;display:none}
.form-success.show{display:block}

/* ============ CONTACT ============ */
.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.info-block{display:flex;gap:16px;margin-bottom:26px}
.info-block .ic{flex:0 0 48px;width:48px;height:48px;border-radius:13px;margin:0}
.info-block .ic svg{width:22px;height:22px}
.info-block h4{font-size:1.05rem;margin-bottom:3px}
.info-block p{color:var(--muted);margin:0;font-size:15px}
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);margin-top:8px}
.map iframe{display:block;width:100%;height:300px;border:0}
.socials{display:flex;gap:12px;margin-top:8px}
.socials a{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--mist);color:var(--teal-deep);transition:.18s}
.socials a:hover{background:var(--teal);color:#fff;transform:translateY(-3px)}
.socials svg{width:20px;height:20px}

/* ============ LOGIN ============ */
.login-wrap{max-width:440px;margin:0 auto}
.login-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow-sm)}
.login-card .helper{text-align:center;font-size:14px;color:var(--muted);margin-top:18px}
.login-card .helper a{color:var(--teal);font-weight:600}
.checkrow{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-bottom:20px}
.checkrow label{display:flex;align-items:center;gap:8px;color:var(--muted)}
.checkrow a{color:var(--teal);font-weight:600}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:#fff;padding:72px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;margin-bottom:48px}
footer .brand{color:#fff;margin-bottom:18px}
footer .fdesc{color:rgba(255,255,255,.66);font-size:14.5px;max-width:34ch}
footer h4{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua-soft);margin-bottom:18px;font-family:var(--ff-body);font-weight:700}
.fcol a{display:block;color:rgba(255,255,255,.78);padding:7px 0;font-size:15px;transition:.15s}
.fcol a:hover{color:#fff;transform:translateX(3px)}
.foot-contact p{color:rgba(255,255,255,.78);font-size:14.5px;margin:0 0 10px;display:flex;gap:10px;align-items:flex-start}
.foot-contact svg{width:18px;height:18px;color:var(--aqua);flex:0 0 18px;margin-top:2px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:rgba(255,255,255,.6)}
.foot-bottom .socials a{background:rgba(255,255,255,.08);color:#fff;width:40px;height:40px}
.foot-bottom .socials a:hover{background:var(--coral)}

/* ============ REVEAL ANIMATION ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .nav-links{display:none}
  .hamburger{display:block}
  .nav-cta .login{display:none}
  .grid-3,.quote-grid,.steps,.listings{grid-template-columns:repeat(2,1fr)}
  .svc-row,.about-prev,.donate-wrap,.contact-wrap{grid-template-columns:1fr;gap:36px}
  .svc-row.flip{direction:ltr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:28px 18px}
  .statline{grid-template-columns:1fr;gap:22px;text-align:left}
}
@media(max-width:640px){
  .sec{padding:64px 0}
  .container{padding:0 18px}
  .grid-3,.grid-2,.quote-grid,.steps,.listings,.form-grid,.amts{grid-template-columns:1fr}
  .cta-band{padding:40px 26px}
  .foot-grid{grid-template-columns:1fr}
  .hero-inner{padding:80px 0 120px}
  .hero-stats{grid-template-columns:1fr 1fr}
  .nav{height:64px}
  .mobile-menu{inset:64px 0 0 0}
  .btn{padding:14px 22px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ===== WordPress admin bar offset (logged-in editing) ===== */
.admin-bar header{top:32px}
@media (max-width:782px){.admin-bar header{top:46px}}
@media (max-width:782px){.admin-bar .mobile-menu{top:calc(64px + 46px)}}