:root {
  --navy: #07315f;
  --navy-2: #0b477b;
  --water: #0ea5d9;
  --water-soft: #e8f8ff;
  --green: #174d23;
  --green-2: #2d7138;
  --gold: #f3a71d;
  --sand: #fff7e7;
  --cream: #fffdf8;
  --ink: #102033;
  --muted: #607084;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(7, 49, 95, 0.16);
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.section-pad { padding: 96px 0; }
.skip-link { position:absolute; left:-999px; top:16px; background:var(--navy); color:#fff; padding:10px 14px; border-radius:8px; z-index:999; }
.skip-link:focus { left:16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 248, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(7, 49, 95, 0.08);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 86px; gap: 24px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; color:var(--navy); }
.brand img { width: 58px; height: 58px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(7,49,95,.14); }
.brand span { display:grid; line-height:1.05; }
.brand small { text-transform:uppercase; letter-spacing:.22em; color:var(--green); font-size:12px; margin-top:4px; }
.main-nav { display:flex; align-items:center; gap:22px; color:#193955; font-size:15px; font-weight:700; }
.main-nav a:not(.btn) { opacity:.86; }
.main-nav a:hover { opacity:1; color:var(--navy); }
.menu-toggle { display:none; width:42px; height:42px; background:#fff; border:1px solid rgba(7,49,95,.14); border-radius:12px; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.menu-toggle span { width:20px; height:2px; background:var(--navy); display:block; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding: 0 22px; border-radius: 999px; font-weight:800; border:0; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color:#fff; box-shadow: 0 14px 34px rgba(7,49,95,.22); }
.btn-primary:hover { color:#fff; }
.main-nav a.btn-primary:hover { color:#fff; }
.btn-secondary { background:#fff; color:var(--navy); border:1px solid rgba(7,49,95,.14); box-shadow: 0 14px 34px rgba(7,49,95,.08); }
.btn-small { min-height:42px; padding:0 18px; }
.btn-wide { width:100%; }

.hero { position:relative; overflow:hidden; padding-top: 106px; }
.hero-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 12% 18%, rgba(14,165,217,.17), transparent 30%),
  radial-gradient(circle at 82% 10%, rgba(243,167,29,.22), transparent 26%),
  linear-gradient(180deg, #fffdf8 0%, #eefaff 100%); z-index:-2; }
.hero-bg:after { content:""; position:absolute; left:-5%; right:-5%; bottom:-130px; height:270px; background:linear-gradient(135deg, rgba(14,165,217,.14), rgba(7,49,95,.08)); border-radius:50% 50% 0 0; z-index:-1; }
.hero-grid { display:grid; grid-template-columns: 1.08fr .92fr; align-items:center; gap:60px; }
.eyebrow { color:var(--green-2); font-weight:900; text-transform:uppercase; letter-spacing:.16em; font-size:12px; margin:0 0 14px; }
h1, h2, h3 { line-height:1.08; margin:0; color:var(--navy); }
h1 { font-size: clamp(44px, 6vw, 78px); letter-spacing:-.05em; }
h2 { font-size: clamp(34px, 4vw, 54px); letter-spacing:-.04em; }
h3 { font-size: 23px; letter-spacing:-.02em; }
.hero-lead { font-size: 20px; color:#3e5369; max-width: 660px; margin: 24px 0 0; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.verse { margin:34px 0 0; padding:22px 24px; border-left:4px solid var(--gold); background:rgba(255,255,255,.72); border-radius:0 20px 20px 0; box-shadow:0 14px 40px rgba(7,49,95,.08); max-width:620px; }
.verse span { display:block; font-family:"Cormorant Garamond", Georgia, serif; font-size:24px; color:#183a5b; line-height:1.25; }
.verse cite { display:block; margin-top:10px; color:var(--green); font-weight:900; font-style:normal; }
.hero-card { position:relative; padding:32px; border-radius:42px; background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.6)); box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.9); }
.logo-halo { position:relative; padding:16px; border-radius:50%; background: radial-gradient(circle, rgba(243,167,29,.18), transparent 63%); }
.logo-halo img { border-radius:50%; box-shadow: 0 22px 70px rgba(7,49,95,.24); border: 8px solid #fff; }
.impact-strip { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:22px; }
.impact-strip div { background:#fff; border-radius:18px; padding:16px 10px; text-align:center; box-shadow:0 10px 30px rgba(7,49,95,.08); }
.impact-strip strong { display:block; color:var(--navy); font-size:18px; }
.impact-strip span { color:var(--muted); font-size:12px; }

.section-head { max-width:760px; margin: 0 auto 42px; text-align:center; }
.section-head p:last-child, .statement p:last-child, .content-panel p { color:var(--muted); font-size:18px; }
.card-grid { display:grid; gap:22px; }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.pillar-card, .project-card, .contact-form, .donate-card { background:#fff; border:1px solid rgba(7,49,95,.08); border-radius:var(--radius-lg); padding:28px; box-shadow:0 18px 48px rgba(7,49,95,.08); }
.pillar-card .icon { font-size:34px; display:block; margin-bottom:16px; }
.pillar-card p, .project-card p { color:var(--muted); margin-bottom:0; }

.about { background:linear-gradient(180deg, #eefaff, #fffdf8); }
.split-grid { display:grid; grid-template-columns: .95fr 1.05fr; gap:58px; align-items:center; }
.split-grid.reverse { grid-template-columns: 1.05fr .95fr; }
.image-panel { min-height:520px; border-radius:var(--radius-xl); background:
  linear-gradient(180deg, rgba(7,49,95,.06), rgba(14,165,217,.12)),
  radial-gradient(circle at 50% 15%, rgba(243,167,29,.3), transparent 22%),
  linear-gradient(140deg, #164f7b, #0ea5d9 45%, #e8f8ff 45%, #fff7e7);
  position:relative; overflow:hidden; box-shadow:var(--shadow); }
.image-panel:before { content:""; position:absolute; left:-12%; right:-12%; bottom:-6%; height:52%; background: repeating-radial-gradient(ellipse at center, rgba(255,255,255,.8) 0 3px, rgba(255,255,255,0) 4px 17px); transform: rotate(-4deg); opacity:.8; }
.water-card { position:absolute; left:26px; right:26px; bottom:26px; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border-radius:24px; padding:28px; color:var(--navy); font-weight:900; font-size:26px; line-height:1.15; }
.content-panel h2 { margin-bottom:22px; }
.text-link { display:inline-flex; margin-top:10px; color:var(--navy); font-weight:900; border-bottom:2px solid var(--gold); }
.statement { max-width:920px; text-align:center; background:var(--navy); color:#fff; border-radius:38px; padding:58px; box-shadow:var(--shadow); }
.statement h2 { color:#fff; }
.statement .eyebrow { color:#b6f0ff; }
.statement p:last-child { color:#dbeaf5; font-size:20px; }
.projects { background: #fff; }
.project-grid { display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:22px; }
.tag { display:inline-flex; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--green); background:#ecf8ee; padding:8px 12px; border-radius:999px; margin-bottom:18px; }
.involved { background: linear-gradient(180deg, #fff7e7, #fffdf8); }
.mini-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.mini-list span { background:#fff; color:var(--navy); border:1px solid rgba(7,49,95,.1); padding:10px 14px; border-radius:999px; font-weight:900; }
.action-panel { display:grid; gap:16px; }
.action-panel a { display:block; background:#fff; padding:24px; border-radius:22px; border:1px solid rgba(7,49,95,.08); box-shadow:0 16px 42px rgba(7,49,95,.08); }
.action-panel strong { color:var(--navy); display:block; font-size:20px; }
.action-panel span { color:var(--muted); display:block; margin-top:6px; }
.donate { background:linear-gradient(135deg, var(--navy), #0c5d91); }
.donate-box { display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center; }
.donate-box h2, .donate-box > div:first-child p { color:#fff; }
.donate-box .eyebrow { color:#b6f0ff; }
.donate-box > div:first-child p { font-size:19px; opacity:.9; }
.donate-card ul { padding-left:20px; color:#40556a; }
.donate-card small { display:block; color:var(--muted); margin-top:14px; text-align:center; }
.givebutter-card { overflow:hidden; }
.givebutter-widget-wrap { margin-top:20px; border-radius:22px; overflow:hidden; }
.givebutter-widget-wrap givebutter-widget { display:block; width:100%; min-height:420px; }

.contact { background:linear-gradient(180deg, #eefaff, #fffdf8); }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start; }
.contact-lines { margin-top:24px; }
.contact-form { display:grid; gap:18px; }
.contact-form label { color:var(--navy); font-weight:900; display:grid; gap:8px; }
input, select, textarea { width:100%; border:1px solid rgba(7,49,95,.14); border-radius:16px; padding:14px 16px; font:inherit; color:var(--ink); background:#fbfdff; }
select { appearance:auto; }
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { outline:3px solid rgba(14,165,217,.18); border-color:var(--water); }
.site-footer { background:#061c36; color:#dbeaf5; padding:62px 0 26px; }
.footer-grid { display:grid; grid-template-columns:1.35fr .6fr .9fr .75fr; gap:42px; }
.footer-brand img { width:52px; height:52px; }
.site-footer h4 { color:#fff; margin:0 0 14px; }
.site-footer a:not(.brand) { display:block; color:#dbeaf5; margin:8px 0; }
.copyright { margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); color:#aac2d5; font-size:14px; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.08s; }
.delay-2 { transition-delay:.16s; }
.delay-3 { transition-delay:.24s; }

@media (max-width: 980px) {
  .section-pad { padding:72px 0; }
  .menu-toggle { display:flex; }
  .main-nav { position:absolute; left:20px; right:20px; top:78px; background:#fff; border-radius:22px; padding:20px; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; display:none; }
  .main-nav.open { display:flex; }
  .main-nav .btn { width:100%; }
  .hero-grid, .split-grid, .split-grid.reverse, .donate-box, .contact-grid { grid-template-columns:1fr; }
  .card-grid.four, .card-grid.three, .project-grid, .footer-grid { grid-template-columns:1fr; }
  .hero { padding-top:70px; }
  .image-panel { min-height:420px; }
}
@media (max-width: 620px) {
  .container { width:min(100% - 28px, var(--container)); }
  .nav-wrap { min-height:74px; }
  .brand img { width:48px; height:48px; }
  .brand strong { font-size:14px; }
  .brand small { font-size:10px; }
  .hero-actions, .impact-strip { grid-template-columns:1fr; display:grid; }
  .btn { width:100%; }
  .hero-card { padding:18px; border-radius:28px; }
  .verse span { font-size:21px; }
  .statement { padding:34px 22px; border-radius:26px; }
  .pillar-card, .project-card, .contact-form, .donate-card { padding:22px; }
}

.media-showcase { margin-top: 54px; }
.section-head.compact { margin-bottom: 30px; }
.people-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:22px; margin-bottom:22px; }
.impact-gallery { grid-template-columns: repeat(4, 1fr); grid-auto-flow:dense; }
.people-card { margin:0; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(7,49,95,.08); background:#fff; }
.people-card img { width:100%; height:100%; min-height:320px; object-fit:cover; transition:transform .5s ease; }
.people-card:hover img { transform:scale(1.04); }
.people-card.large { grid-column:span 2; grid-row:span 2; }
.people-card.large img { min-height:640px; }
.people-card.wide { grid-column:span 2; }
.people-card.tall { grid-row:span 2; }
.people-card.tall img { min-height:640px; }
.social-links { display:flex; flex-wrap:wrap; gap:10px; }
.social-links a { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px; border-radius:999px; font-weight:900; border:1px solid rgba(7,49,95,.14); background:#fff; color:var(--navy); transition:transform .2s ease, background .2s ease, color .2s ease; }
.social-links a:hover { transform:translateY(-2px); background:var(--navy); color:#fff; }
.compact-social { margin-top:8px; }
.footer-social a { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.14); margin:0; }
.footer-social a:hover { background:#fff; color:var(--navy); }

@media (max-width: 980px) {
  .people-grid, .impact-gallery { grid-template-columns:1fr; }
  .people-card.large, .people-card.wide, .people-card.tall { grid-column:auto; grid-row:auto; }
  .people-card img, .people-card.large img, .people-card.tall img { min-height:auto; }
}