:root {
  --navy:#0f2740; --blue:#1e5f8f; --teal:#0e8a6b; --gold:#f4b942;
  --text:#17202c; --muted:#5c6775; --white:#fff;
  --card:rgba(255,255,255,0.9); --border:rgba(15,39,64,0.12);
  --shadow:0 18px 40px rgba(15,39,64,0.13);
  --radius:22px; --max:1180px; --red:#b42318; --green:#0e8a6b;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(14,138,107,0.16), transparent 30%),
    radial-gradient(circle at top right, rgba(30,95,143,0.14), transparent 28%),
    linear-gradient(180deg,#f6fbf9 0%,#eef5fb 44%,#ffffff 100%);
  line-height:1.6;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
.container { width:min(calc(100% - 2rem),var(--max)); margin:0 auto; }

/* ===== Header / Nav ===== */
.site-header { position:sticky; top:0; z-index:60; backdrop-filter:blur(12px); background:rgba(255,255,255,0.92); border-bottom:1px solid rgba(15,39,64,0.08); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.6rem 0; }
.brand { display:flex; align-items:center; gap:0.8rem; font-weight:800; color:var(--navy); flex-shrink:0; }
.brand-badge { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,#0e8a6b,#0b6e55); color:#fff; box-shadow:0 10px 24px rgba(14,138,107,0.35); font-weight:900; font-size:1.4rem; font-family:'Merriweather',Georgia,serif; }
.brand-text { font-size:1.02rem; line-height:1.1; }
.brand small { display:block; color:var(--muted); font-size:0.72rem; font-weight:600; }
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; padding:0; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.7); cursor:pointer; }
.nav-toggle span { display:block; width:22px; height:2.5px; margin:0 auto; background:var(--navy); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }
.nav-links { display:flex; align-items:center; gap:1rem; }
.nav-links > a { color:var(--muted); font-weight:600; font-size:0.9rem; position:relative; padding:0.35rem 0; white-space:nowrap; }
.nav-links > a:hover { color:var(--navy); }
.nav-links > a.active { color:var(--navy); }
.nav-links > a.active::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px; background:var(--teal); }
.nav-cta-group { display:flex; align-items:center; gap:0.55rem; margin-left:0.3rem; }
.cta { border-radius:999px; font-weight:700; font-size:0.86rem; padding:0.55rem 1.05rem; white-space:nowrap; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; }
.cta:hover { transform:translateY(-1px); }
.cta-outline { color:var(--navy); border:1.5px solid rgba(15,39,64,0.2); }
.cta-outline:hover { border-color:var(--teal); color:var(--teal); }
.cta-donate { color:#fff; background:linear-gradient(135deg,#0e8a6b,#0b6e55); box-shadow:0 8px 20px rgba(14,138,107,0.28); }

/* ===== Hero ===== */
.hero { position:relative; overflow:hidden; padding:3.4rem 0 2.4rem; }
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:2.2rem; align-items:center; }
h1 { margin:1rem 0; font-family:'Merriweather',Georgia,serif; font-size:clamp(2.2rem,5vw,4rem); line-height:1.07; color:var(--navy); letter-spacing:-0.03em; }
.eyebrow { display:inline-block; font-size:0.78rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); background:rgba(14,138,107,0.1); border:1px solid rgba(14,138,107,0.2); padding:0.4rem 0.8rem; border-radius:999px; }
.hero p.lead { max-width:40rem; font-size:1.1rem; color:var(--muted); margin:0 0 1.4rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:1.4rem; }
.hero-figure img { width:100%; height:auto; display:block; border-radius:24px; box-shadow:var(--shadow); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:0.55rem; min-height:50px; padding:0.85rem 1.2rem; border-radius:999px; font-weight:700; border:0; cursor:pointer; transition:transform 0.2s ease,box-shadow 0.2s ease; font-family:inherit; font-size:1rem; }
.button:hover { transform:translateY(-1px); }
.button-primary { background:linear-gradient(135deg,var(--navy),var(--blue)); color:#fff; box-shadow:0 14px 28px rgba(30,95,143,0.25); }
.button-danger { background:linear-gradient(135deg,#b42318,#8f1a12); color:#fff; box-shadow:0 14px 28px rgba(180,35,24,0.28); }
.button-secondary { background:rgba(255,255,255,0.88); color:var(--navy); border:1px solid rgba(15,39,64,0.1); box-shadow:var(--shadow); }
.hero-art { border-radius:24px; overflow:hidden; background:linear-gradient(135deg,#0b2138,#13507f 58%,#0e8a6b 130%); padding:1.4rem; min-height:380px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; box-shadow:var(--shadow); }
.hero-art h2 { margin:0; font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.15; }
.hero-art p { margin-top:0.6rem; color:rgba(255,255,255,0.82); }
.ba-table { width:100%; border-collapse:collapse; margin-top:1rem; background:rgba(255,255,255,0.08); border-radius:16px; overflow:hidden; }
.ba-table th, .ba-table td { padding:0.6rem 0.7rem; text-align:left; font-size:0.92rem; border-bottom:1px solid rgba(255,255,255,0.12); }
.ba-table th { color:rgba(255,255,255,0.7); font-weight:700; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; }
.ba-table td.now { color:rgba(255,255,255,0.92); font-weight:700; }
.ba-table td.aft { color:var(--gold); font-weight:800; }
.icon-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; margin-top:1rem; }
.mini-stat { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.16); border-radius:18px; padding:0.85rem; }
.mini-stat strong { display:block; font-size:1.25rem; margin-bottom:0.1rem; }
.mini-stat span { font-size:0.85rem; color:rgba(255,255,255,0.8); }
section { padding:2.1rem 0; }
.section-title { margin-bottom:1.1rem; }
.section-title h2 { margin:0 0 0.35rem; font-family:'Merriweather',Georgia,serif; font-size:clamp(1.8rem,3.5vw,2.6rem); color:var(--navy); }
.section-title p { margin:0; color:var(--muted); max-width:46rem; }
.facts-grid, .tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; margin-top:1.2rem; }
.fact-card, .quote-card, .notice-card, .tool-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.fact-card, .tool-card { padding:1.35rem; transition:transform .2s ease, box-shadow .2s ease; }
.fact-card:hover, .tool-card:hover { transform:translateY(-3px); box-shadow:0 26px 50px rgba(15,39,64,0.17); }
.fact-number, .tool-icon { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,#e3f5ef,#fff6de); color:var(--navy); font-weight:800; margin-bottom:0.85rem; }
.fact-card h3, .tool-card h3 { margin:0 0 0.5rem; font-size:1.13rem; color:var(--navy); line-height:1.22; }
.fact-card p, .tool-card p { margin:0; color:var(--muted); }
.lookup-card { padding:1.5rem; margin-top:1.2rem; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.lookup-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:1.25rem; align-items:start; }
.lookup-results { display:grid; grid-template-columns:repeat(2,1fr); gap:0.9rem; margin-top:0.4rem; }
.rate-box { padding:1.05rem; border-radius:18px; background:rgba(255,255,255,0.94); border:1px solid rgba(15,39,64,0.1); }
.rate-box.current { border-left:5px solid var(--blue); }
.rate-box.after { border-left:5px solid var(--red); }
.rate-box h4 { margin:0 0 0.3rem; font-size:0.92rem; color:var(--muted); }
.rate-box .rate { font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; color:var(--navy); line-height:1.05; }
.rate-box p { margin:0.4rem 0 0; color:var(--muted); font-size:0.9rem; }
.lookup-notes { color:var(--muted); font-size:0.92rem; margin-top:0.9rem; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; margin-top:1.2rem; }
.table-wrap .data-table { margin-top:0; }
.data-table { width:100%; border-collapse:collapse; margin-top:1.2rem; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.data-table th, .data-table td { padding:0.8rem 0.9rem; text-align:left; border-bottom:1px solid var(--border); font-size:0.95rem; }
.data-table th { background:rgba(15,39,64,0.04); color:var(--navy); font-weight:800; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.04em; }
.data-table td.now { font-weight:700; color:var(--blue); }
.data-table td.aft { font-weight:800; color:var(--red); }
.data-table tr:last-child td { border-bottom:0; }
.data-table caption { caption-side:bottom; padding-top:0.7rem; color:var(--muted); font-size:0.85rem; text-align:left; }
.dark-section { background:linear-gradient(145deg,#0b1f37 0%,#143a63 100%); padding:3.2rem 0; position:relative; overflow:hidden; }
.dark-section::before { content:''; position:absolute; top:-80px; right:-80px; width:340px; height:340px; border-radius:50%; background:rgba(14,138,107,0.1); pointer-events:none; }
.dark-section .section-title h2 { color:#fff; }
.dark-section .section-title p { color:rgba(255,255,255,0.68); }
.cuts-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:1.4rem; }
.cut-card { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.13); border-radius:22px; padding:1.5rem; transition:transform .2s ease, background .2s ease; }
.cut-card:hover { transform:translateY(-3px); background:rgba(255,255,255,0.12); }
.cut-num { font-size:2.6rem; font-weight:900; color:var(--gold); line-height:1; margin-bottom:0.5rem; font-family:'Merriweather',Georgia,serif; }
.cut-card h3 { color:#fff; margin:0 0 0.55rem; font-size:1.05rem; line-height:1.3; }
.cut-card p { color:rgba(255,255,255,0.78); margin:0 0 0.6rem; font-size:0.93rem; }
.cut-card a.detail-link { color:var(--gold); font-weight:700; font-size:0.9rem; text-decoration:underline; text-underline-offset:3px; }
.prose { max-width:48rem; }
.prose p { color:var(--text); margin:0 0 1.1rem; font-size:1.04rem; }
.prose h3 { color:var(--navy); font-family:'Merriweather',Georgia,serif; margin:1.8rem 0 0.6rem; font-size:1.35rem; }
.prose a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.callout { background:linear-gradient(145deg,rgba(14,138,107,0.1),rgba(30,95,143,0.08)); border:1px solid rgba(14,138,107,0.2); border-left:5px solid var(--teal); border-radius:16px; padding:1.2rem 1.3rem; margin:1.4rem 0; }
.callout strong { color:var(--navy); }
.quote-card { padding:1.5rem; background:linear-gradient(145deg,rgba(15,39,64,0.98),rgba(30,95,143,0.96)); color:#fff; }
.quote-card h3 { margin-top:0; font-size:1.2rem; }
.quote-card ul { margin:0.6rem 0 0; padding-left:1.1rem; }
.quote-card li { color:rgba(255,255,255,0.9); margin-bottom:0.5rem; }
.notice-card { padding:1.45rem; }
.notice-card h3 { margin-top:0; font-size:1.15rem; color:var(--navy); }
.notice-card ul { margin:0.7rem 0 0; padding-left:1.1rem; color:var(--muted); }
.notice-card li+li { margin-top:0.5rem; }
.split { display:grid; grid-template-columns:1fr 0.95fr; gap:1.25rem; align-items:start; margin-top:1.3rem; }
.footer { padding:2.6rem 0 3rem; color:var(--muted); }
.footer-card { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.2rem; background:rgba(255,255,255,0.8); border:1px solid rgba(15,39,64,0.08); border-radius:20px; box-shadow:var(--shadow); }
.disclaimer { font-size:0.9rem; color:var(--muted); }
.footer-legal { text-align:center; margin-top:0.6rem; font-size:0.78rem; color:var(--muted); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid rgba(14,138,107,0.45); outline-offset:2px; border-radius:6px; }

/* ===== Responsive ===== */
@media (max-width:1080px) {
  .nav { position:relative; }
  .nav-toggle { display:flex; }
  .nav-links {
    position:absolute; top:calc(100% + 0.55rem); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border:1px solid var(--border); border-radius:16px;
    padding:0.4rem 0.7rem 0.8rem; box-shadow:0 24px 44px rgba(15,39,64,0.16);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav-links.open { opacity:1; visibility:visible; transform:translateY(0); }
  .nav-links > a { padding:0.85rem 0.4rem; border-bottom:1px solid rgba(15,39,64,0.07); font-size:1rem; }
  .nav-links > a.active::after { display:none; }
  .nav-links > a.active { color:var(--teal); }
  .nav-cta-group { margin:0.8rem 0 0.2rem; gap:0.6rem; }
  .nav-cta-group .cta { flex:1; text-align:center; padding:0.8rem 1rem; font-size:0.95rem; }
}
@media (max-width:960px) {
  .hero-grid,.facts-grid,.tools-grid,.lookup-grid,.lookup-results,.split,.cuts-grid { grid-template-columns:1fr; }
  .hero { padding-top:2.4rem; }
  .hero-figure { max-width:540px; margin-top:0.4rem; }
  .footer-card { flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px) {
  .icon-row { grid-template-columns:1fr; }
  .data-table th, .data-table td { padding:0.6rem 0.6rem; font-size:0.9rem; }
  .brand-text { font-size:0.95rem; }
}

/* ===== Review tweaks ===== */
/* Enlarge the city/area lookup dropdown */
.lookup-grid label[for="citySelect"], .lookup-grid label[for="famSize"] { font-size:1.02rem; font-weight:700; color:var(--navy); }
#citySelect, #famSize { width:100%; margin-top:0.5rem; padding:0.9rem 1.05rem; font-family:inherit; font-size:1.18rem; font-weight:600; color:var(--navy); background:#fff; border:1px solid var(--border); border-radius:14px; cursor:pointer; box-shadow:0 2px 8px rgba(15,39,64,0.06); }
#citySelect:hover, #famSize:hover { border-color:var(--teal); }
/* Make in-body links read as links (citation credibility) */
.section-title p a, .hero p.lead a, .fact-card p a, .lookup-notes a, .data-table caption a, .callout a:not(.button) { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.dark-section .section-title p a, .cut-card p a { color:var(--gold); }

/* ===== Volunteer signup form (moved from index.html) ===== */
.vform label { display:block; font-weight:700; color:var(--navy); font-size:0.9rem; margin-bottom:0.9rem; }
.vform .vrow { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.vform input, .vform select, .vform textarea { display:block; width:100%; margin-top:0.35rem; padding:0.7rem 0.8rem; border:1px solid var(--border); border-radius:12px; font-family:inherit; font-size:1rem; font-weight:500; color:var(--navy); background:#fff; box-sizing:border-box; }
.vform textarea { resize:vertical; }
@media (max-width:720px){ .vform .vrow { grid-template-columns:1fr; } }

/* ===== Anchor offset for the sticky header ===== */
section[id], #volunteer { scroll-margin-top: 92px; }

/* ===== Zebra striping for long data tables ===== */
.data-table tbody tr:nth-child(even) td { background: rgba(15,39,64,0.035); }

/* ===== Print: clean handouts for meetings ===== */
@media print {
  .site-header, .nav-toggle, .hero-actions, .nav-cta-group, .button, .cta { display:none !important; }
  body { background:#fff !important; }
  .hero-figure { display:none; }
  .hero-art, .fact-card, .tool-card, .lookup-card, .data-table, .footer-card, .cut-card, .notice-card, .quote-card, .callout { box-shadow:none !important; }
  .dark-section { background:#fff !important; }
  .dark-section *, .quote-card, .quote-card *, .hero-art, .hero-art * { color:#17202c !important; background:transparent !important; border-color:rgba(15,39,64,0.25) !important; }
  .cut-card, .quote-card { border:1px solid rgba(15,39,64,0.25); }
  a { color:#17202c; }
  .prose a, .callout a { text-decoration:underline; }
}
