/* ============================================================
   Terps Fostering Futures — shared design system
   Visual language inspired by joinonelove.org:
   cobalt blue + light blue + deep navy, bold Poppins display
   type, full-bleed alternating bands, sticky white header.
   ============================================================ */

:root{
  /* Core palette */
  --blue:#2247E2;        /* primary cobalt */
  --blue-dark:#1837B8;   /* hover / pressed */
  --navy:#0C1543;        /* footer, dark bands, overlays */
  --yellow:#8EC5FF;      /* accent (light blue) */
  --tint:#EEF2FC;        /* light blue band / panels */
  --ink:#111528;         /* body text */
  --ink-soft:#4B5165;    /* muted text */
  --line:#E2E6F0;        /* hairlines / borders */

  /* Legacy aliases — map the old cream/gold palette onto the new
     system so any residual var() reference stays on-brand. */
  --cream:#FFFFFF;
  --cream-2:#F7F9FE;
  --dark:#0C1543;
  --gold:#8EC5FF;
  --gold-dark:#2247E2;
  --radius:12px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:#fff;
  color:var(--ink);
  line-height:1.6;
  font-size:16.5px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Poppins', sans-serif;
  color:var(--ink);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-0.015em;
}
h2{font-size:clamp(1.9rem, 3.2vw, 2.7rem);}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
section{padding:96px 0; scroll-margin-top:88px;}
@media(max-width:768px){ section{padding:64px 0;} }
[id]{scroll-margin-top:88px;}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:16px;
}
.eyebrow::before{content:""; width:22px; height:4px; border-radius:2px; background:var(--yellow);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; border-radius:8px; font-weight:700; font-size:15px;
  cursor:pointer; border:none; font-family:'Poppins', sans-serif;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(34,71,226,.28);}
.btn-primary:hover{background:var(--blue-dark);}
.btn-outline{background:transparent; border:2px solid var(--ink); color:var(--ink);}
.btn-outline:hover{border-color:var(--blue); color:var(--blue);}
.btn-outline-light{background:transparent; border:2px solid rgba(255,255,255,.85); color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.12);}
.btn-dark{background:var(--navy); color:#fff;}
.btn:disabled{opacity:0.7; cursor:not-allowed; transform:none;}

/* ---------- Header / navigation ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:#fff; box-shadow:0 1px 0 var(--line);
}
.nav-shell{max-width:1240px; margin:0 auto; padding:0 24px;}
.nav-bar{
  background:#fff; border-radius:0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; color:var(--ink); flex-wrap:nowrap;
}
.logo{
  display:flex; align-items:center; gap:9px;
  font-family:'Poppins', sans-serif; font-weight:800; font-size:18px;
  color:var(--navy); flex-shrink:0; white-space:nowrap;
}
.logo-dot{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:url("images/tff-logo-mark.png") center/cover no-repeat;
}
.nav-links{
  display:flex; align-items:center; justify-content:center; gap:clamp(12px, 1.6vw, 28px);
  font-size:15px; font-weight:600; flex:1; min-width:0; white-space:nowrap;
  overflow:visible;
}
.nav-links .nav-link, .nav-links .dropdown-toggle{
  position:relative; background:none; border:none; color:var(--ink-soft); font:inherit;
  padding:6px 2px 8px; cursor:pointer; opacity:1;
  transition:color .15s ease; flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
}
.nav-links .nav-link:hover, .nav-links .dropdown-toggle:hover{color:var(--ink);}
.nav-links .nav-link.active, .nav-links .dropdown-toggle.active{color:var(--blue); font-weight:700;}
.mobile-menu a.active{color:var(--blue); font-weight:700;}
.nav-links .nav-link::before, .nav-links .dropdown-toggle::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:3px;
  background:var(--yellow); transform:scaleX(0); transform-origin:center;
  transition:transform .2s ease;
}
.nav-links .nav-link.active::before, .nav-links .dropdown-toggle.active::before,
.dropdown.open .dropdown-toggle::before{transform:scaleX(1);}
.nav-links .dropdown-toggle::after{content:"▾"; font-size:10px; line-height:1; transition:transform .2s ease;}
.nav-links .dropdown-toggle[aria-expanded="true"]::after,
.dropdown.open .dropdown-toggle::after{transform:rotate(180deg);}
.nav-link-group{display:inline-flex; align-items:center; gap:4px;}
.nav-item{position:relative;}
.dropdown-menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:230px;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:8px; box-shadow:0 18px 40px rgba(12,21,67,.14);
  display:none; flex-direction:column; gap:2px; z-index:130;
}
.dropdown-menu a{display:block; padding:11px 14px; border-radius:8px; color:var(--ink); font-weight:600; font-size:14.5px; text-align:left;}
.dropdown-menu a:hover{background:var(--tint); color:var(--blue);}
.dropdown.open .dropdown-menu{display:flex;}
.dropdown.open .dropdown-toggle{color:var(--blue); font-weight:700;}
.nav-cta{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.nav-cta .btn{box-shadow:none; padding:11px 24px; font-size:14px;}
/* Padding gives a ~44px touch target; the negative margin keeps the
   layout footprint compact so the header still fits narrow phones. */
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:13px 10px; margin:-6px;}
.burger span{width:24px; height:2.5px; background:var(--navy); display:block; border-radius:2px;}
/* Collapse to the burger while the full link row would overflow (it needs ~1080px). */
@media(max-width:1100px){
  .nav-links{display:none;}
  .burger{display:flex;}
}
/* Scale the header down so logo + Donate + burger fit a phone screen. */
@media(max-width:640px){
  .nav-bar{gap:10px; padding:14px 0;}
  .logo{font-size:15px; gap:7px;}
  .logo-dot{width:22px; height:22px;}
  .nav-cta{gap:8px;}
  .nav-cta .btn{padding:10px 14px; font-size:13px;}
  .nav-cta .donate-now{display:none;}
}
@media(max-width:400px){
  .logo{font-size:13.5px; gap:6px;}
  .logo-dot{width:20px; height:20px;}
  .nav-cta .btn{padding:10px 12px; font-size:12.5px;}
}
@media(max-width:350px){
  .nav-shell{padding:0 16px;}
  .logo{font-size:12.5px;}
}
.mobile-menu{
  display:none; flex-direction:column; gap:2px; background:#fff;
  border-top:1px solid var(--line); border-radius:0;
  margin:0 -24px; padding:10px 16px 16px; color:var(--ink);
  max-height:calc(100vh - 76px); overflow:auto;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:13px 14px; border-radius:8px; font-size:15.5px; font-weight:600; color:var(--ink);}
.mobile-menu a:hover{background:var(--tint); color:var(--blue);}
@media(max-width:350px){ .mobile-menu{margin:0 -16px;} }

/* ---------- Hero (full-bleed) ---------- */
.hero{max-width:none; margin:0; padding:0;}
.hero-inner{
  position:relative; border-radius:0; overflow:hidden;
  min-height:440px; background:var(--blue);
  display:flex; align-items:flex-end; justify-content:flex-start;
}
.hero-inner:has(> img){min-height:min(86vh, 720px);}
.hero-inner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-inner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(12,21,67,.86) 0%, rgba(12,21,67,.42) 48%, rgba(12,21,67,.12) 100%);
}
.hero-inner:not(:has(> img))::after{background:none;}
.hero-content{
  position:relative; z-index:2; width:100%; max-width:1240px; margin:0 auto;
  padding:72px 24px 80px;
  background:transparent; border:none; border-radius:0; box-shadow:none; backdrop-filter:none;
}
.hero-content .eyebrow{color:var(--yellow);}
.hero-content .eyebrow::before{background:var(--yellow);}
.hero-content h1{
  color:#fff; font-size:clamp(2.5rem, 5.4vw, 4.15rem);
  margin-bottom:22px; max-width:900px; letter-spacing:-0.02em;
}
.hero-content p{color:rgba(255,255,255,.88); font-size:clamp(1.02rem, 1.4vw, 1.2rem); max-width:640px; margin-bottom:32px;}
.hero-content .btn-primary{background:var(--yellow); color:var(--navy); box-shadow:0 10px 26px rgba(0,0,0,.25);}
.hero-content .btn-primary:hover{background:#fff;}
.hero-content .btn-outline{border-color:#fff; color:#fff;}
.hero-btns{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px;}
.hero-stats{display:flex; gap:48px; flex-wrap:wrap;}
.hero-stats div{
  color:#fff; background:transparent; border:none; border-radius:0;
  padding:0 0 0 18px; min-width:0; border-left:4px solid var(--yellow);
}
.hero-stats strong{display:block; font-family:'Poppins', sans-serif; font-weight:800; font-size:clamp(1.8rem, 3vw, 2.6rem); line-height:1.1;}
.hero-stats span{font-size:14px; color:rgba(255,255,255,.78);}
@media(max-width:640px){
  .hero-inner:has(> img){min-height:500px;}
  .hero-content{padding:48px 24px 52px;}
  .hero-content h1{font-size:clamp(1.75rem, 7.6vw, 2.4rem); margin-bottom:16px;}
  .hero-content p{font-size:1rem; margin-bottom:24px;}
  .hero-btns{margin-bottom:28px; gap:10px;}
  .hero-stats{gap:20px 36px;}
  .hero-stats strong{font-size:1.55rem;}
}

/* ---------- Index hero: brand badge beside the intro copy ---------- */
.hero-inner.hero-brand{
  background:var(--navy);
  align-items:center; justify-content:center;
  gap:clamp(28px, 4vw, 72px);
  padding:56px 24px;
  flex-wrap:wrap;
}
.hero-inner.hero-brand::after{background:none;}
.hero-inner.hero-brand > img{
  position:static; order:2;
  width:clamp(240px, 28vw, 380px); height:clamp(240px, 28vw, 380px);
  border-radius:50%; object-fit:cover; flex-shrink:0;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.hero-inner.hero-brand .hero-content{
  width:auto; max-width:720px; margin:0; flex:0 1 auto; padding:0;
}
@media(max-width:860px){
  .hero-inner.hero-brand{padding:44px 24px 56px;}
  .hero-inner.hero-brand > img{order:0; width:min(52vw, 230px); height:min(52vw, 230px);}
}

/* ---------- About (index) ---------- */
.about-grid{display:grid; grid-template-columns:1.08fr 0.92fr; gap:56px; align-items:stretch;}
.about-copy p{color:var(--ink-soft); font-size:17px; margin-bottom:22px; max-width:560px;}
.about-copy h2{margin-bottom:20px;}
.about-panel{
  background:var(--tint); border:none; border-radius:14px; padding:38px;
  box-shadow:none;
}
.about-panel h3{font-size:clamp(1.3rem, 2vw, 1.6rem); margin-bottom:12px; color:var(--navy);}
.about-panel p{color:var(--ink-soft); font-size:15.5px; margin-bottom:26px;}
.stat-row{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:0; max-width:none;}
.stat-card{background:#fff; border:none; border-radius:10px; padding:24px;}
.stat-card strong{display:block; font-family:'Poppins', sans-serif; font-weight:800; font-size:2.1rem; margin-bottom:2px; color:var(--blue);}
.stat-card span{font-size:13.5px; color:var(--ink-soft);}
@media(max-width:860px){ .about-grid{grid-template-columns:1fr;} }

/* ---------- Quote banner (full-bleed, blue duotone) ---------- */
.quote-banner{
  position:relative; overflow:hidden; min-height:520px;
  width:100vw; margin-left:calc(50% - 50vw); border-radius:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.quote-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.quote-banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(34,71,226,.72), rgba(12,21,67,.78));
}
.quote-inner{position:relative; z-index:2; max-width:880px; padding:64px 24px;}
.quote-inner::before{
  content:"\201C"; display:block; font-family:'Poppins', sans-serif; font-weight:800;
  font-size:96px; line-height:.5; color:var(--yellow); margin-bottom:30px;
}
.quote-inner p{
  color:#fff; font-size:clamp(1.25rem, 2.4vw, 1.75rem); font-family:'Poppins', sans-serif;
  font-weight:600; line-height:1.45; margin-bottom:24px; letter-spacing:-0.01em;
}
.quote-inner span{color:var(--yellow); font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase;}

/* ---------- Section head ---------- */
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px;}
.section-head h2{max-width:760px;}
.section-head p{color:var(--ink-soft); max-width:360px; font-size:16px;}
@media(max-width:900px){ .section-head{flex-direction:column; align-items:flex-start;} }

/* ---------- Card grids ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.card-grid:has(> .card){grid-template-columns:repeat(2,1fr); padding:0;}
.p-card{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:34px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.p-card:hover{transform:translateY(-4px); box-shadow:0 22px 44px rgba(12,21,67,.10); border-color:var(--blue);}
.p-card .icon{
  width:48px; height:48px; border-radius:8px; background:var(--yellow);
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins', sans-serif; font-weight:800; color:var(--navy);
}
.p-card h3{font-size:1.25rem;}
.p-card p{color:var(--ink-soft); font-size:15px; flex:1;}
.card{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:34px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 22px 44px rgba(12,21,67,.10); border-color:var(--blue);}
.card h3{font-size:1.4rem; margin-bottom:12px;}
.card p{color:var(--ink-soft); margin-bottom:10px;}
.content-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; padding:0; align-items:start;}
@media(max-width:900px){
  .card-grid, .card-grid:has(> .card){grid-template-columns:1fr;}
  .content-grid{grid-template-columns:1fr;}
}

/* ---------- Impact band (full-bleed cobalt) ---------- */
.impact-band{
  background:var(--blue); border-radius:0;
  width:100vw; margin-left:calc(50% - 50vw);
  padding:104px max(24px, calc(50vw - 590px));
}
.impact-band .eyebrow{color:var(--yellow);}
.impact-band .section-head h2{color:#fff;}
.impact-band .section-head p{color:rgba(255,255,255,.82);}
.impact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.i-card{background:transparent; color:#fff; border-radius:0; padding:26px 0 0; border-top:4px solid var(--yellow);}
.i-card h3{color:#fff; font-size:1.05rem; margin-bottom:12px; letter-spacing:.02em;}
.i-card .amt{font-family:'Poppins', sans-serif; font-weight:800; font-size:clamp(2.3rem, 4vw, 3.3rem); color:var(--yellow); margin-bottom:6px; line-height:1;}
.i-card p{color:rgba(255,255,255,.8); font-size:14.5px;}
.impact-band .btn-dark{background:#fff; color:var(--blue);}
.impact-band .btn-dark:hover{background:var(--yellow); color:var(--navy);}
@media(max-width:900px){ .impact-cards{grid-template-columns:1fr;} .impact-band{padding-top:72px; padding-bottom:72px;} }

/* ---------- Numbers / statistics ---------- */
.numbers-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
.numbers-grid img{border-radius:12px; width:100%; height:460px; object-fit:cover;}
.numbers-right h2{margin-bottom:18px;}
.numbers-right > p{color:var(--ink-soft); margin-bottom:30px;}
.stat-block{border-top:1px solid var(--line); padding:22px 0;}
.stat-block h4{font-size:1.05rem; margin-bottom:8px;}
.stat-block p{color:var(--ink-soft); font-size:14.5px; margin-bottom:8px;}
.stat-block a{font-size:13px; color:var(--blue); font-weight:700; border-bottom:2px solid var(--yellow); padding-bottom:1px;}
.source-note{font-size:13px; color:var(--blue); font-weight:700;}
.num-callout{display:flex; gap:36px; margin-bottom:34px; flex-wrap:wrap;}
.num-callout div{border-left:4px solid var(--yellow); padding-left:16px;}
.num-callout div strong{display:block; font-family:'Poppins', sans-serif; font-weight:800; font-size:2.2rem; color:var(--blue); line-height:1.15;}
.num-callout div span{font-size:13px; color:var(--ink-soft);}
@media(max-width:860px){ .numbers-grid{grid-template-columns:1fr;} .numbers-grid img{height:300px;} }

/* ---------- Steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.step-card{
  background:var(--tint); border:none; border-radius:12px; padding:34px;
}
.step-num{
  width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins', sans-serif; font-weight:800; margin-bottom:20px;
}
.step-card h3{font-size:1.2rem; margin-bottom:10px;}
.step-card p{color:var(--ink-soft); font-size:15px;}
.step-card ul{margin-top:12px; padding-left:18px; color:var(--ink-soft); font-size:14.5px;}
.step-card ul li{margin-bottom:6px;}
@media(max-width:900px){ .steps{grid-template-columns:1fr;} }
/* Events & impact pages use a two-column steps layout at desktop */
@media(min-width:901px){
  .steps:has(> .step-card:nth-child(4)):not(:has(> .step-card .step-num)){grid-template-columns:repeat(2,1fr);}
}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.gallery-grid img{border-radius:10px; width:100%; height:280px; object-fit:cover;}
@media(max-width:860px){ .gallery-grid{grid-template-columns:1fr;} }

/* ---------- CTA band (full-bleed navy) ---------- */
.cta-band{
  background:var(--navy); border-radius:0;
  width:100vw; margin-left:calc(50% - 50vw);
  padding:104px max(24px, calc(50vw - 590px));
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
}
.cta-band .eyebrow{color:var(--yellow);}
.cta-band h2{color:#fff; margin-bottom:18px;}
.cta-band p{color:rgba(255,255,255,.78); margin-bottom:28px; max-width:460px;}
.cta-band .btn-primary{background:var(--yellow); color:var(--navy); box-shadow:none;}
.cta-band .btn-primary:hover{background:#fff;}
.contact-list{display:flex; flex-direction:column; gap:16px;}
.contact-item{background:rgba(255,255,255,.06); border-radius:10px; padding:18px 22px; border-left:4px solid var(--yellow);}
.contact-item span{display:block; font-size:12px; color:var(--yellow); font-weight:800; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px;}
.contact-item strong{color:#fff; font-weight:600; font-size:15px;}
@media(max-width:860px){ .cta-band{grid-template-columns:1fr; padding-top:72px; padding-bottom:72px;} }

.contact-item strong a{border-bottom:1px solid rgba(255,255,255,.35);}
.contact-item strong a:hover{color:var(--yellow); border-bottom-color:var(--yellow);}

/* ---------- Calendar ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:12px;}
.calendar-table{width:100%; min-width:560px; border-collapse:collapse; background:#fff;}
.calendar-table th{
  background:var(--navy); color:#fff; text-align:left;
  font-family:'Poppins', sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; padding:16px 22px;
}
.calendar-table td{padding:18px 22px; border-top:1px solid var(--line); vertical-align:top; font-size:15.5px;}
.calendar-table tbody tr:nth-child(even) td{background:var(--cream-2);}
.calendar-table .cal-date{white-space:nowrap; font-family:'Poppins', sans-serif; font-weight:700; color:var(--blue);}
.calendar-table .cal-time{white-space:nowrap; color:var(--ink-soft); font-weight:600;}
.cal-note{font-size:13.5px; color:var(--ink-soft); margin-top:4px;}
.cal-note strong{color:var(--blue);}

/* ---------- Contact form ---------- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:38px; max-width:640px; margin-top:34px;}
.contact-form{display:grid; gap:16px;}
.form-row{display:grid; gap:8px;}
.form-row label{font-weight:700; color:var(--ink); font-size:14px;}
.form-row input, .form-row textarea{
  width:100%; border:1.5px solid var(--line); border-radius:8px; padding:14px 16px;
  font:inherit; color:var(--ink); background:#fff; resize:vertical;
}
.form-row input:focus, .form-row textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(34,71,226,.15);
}
.form-status{min-height:24px; margin-top:4px; font-size:14px; font-weight:600;}
.form-status.success{color:#1C7C3D;}
.form-status.error{color:#C0392B;}
.form-status.info{color:var(--blue);}

/* ---------- Footer ---------- */
footer{background:var(--navy); color:rgba(255,255,255,.75); margin-top:0; padding-top:84px;}
footer{border-top:6px solid var(--blue);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-logo{display:flex; align-items:center; gap:9px; color:#fff; font-family:'Poppins', sans-serif; font-weight:800; font-size:18px; margin-bottom:14px;}
/* The logo mark's navy disc would vanish into the navy footer; a white ring keeps it visible. */
.footer-logo .logo-dot{box-shadow:0 0 0 2px rgba(255,255,255,.85);}
.footer-grid h4{color:#fff; font-size:13px; margin-bottom:18px; letter-spacing:.1em; text-transform:uppercase;}
.footer-grid ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.footer-grid ul a{font-size:14.5px; opacity:.8; transition:color .15s ease, opacity .15s ease;}
.footer-grid ul a:hover{opacity:1; color:var(--yellow);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:13px; flex-wrap:wrap; gap:10px;}
@media(max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }

/* ---------- Thank-you page ---------- */
.ty-page{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--tint);}
.ty-page .card{
  background:#fff; border:none; border-radius:14px;
  box-shadow:0 24px 60px rgba(12,21,67,.12);
  padding:48px; max-width:640px; text-align:center;
}
.ty-page .card:hover{transform:none; box-shadow:0 24px 60px rgba(12,21,67,.12); border-color:transparent;}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:50%;
  background:var(--yellow); color:var(--navy);
  font-size:28px; margin-bottom:20px; font-weight:800;
}
.ty-page h1{font-size:2rem; margin-bottom:12px; color:var(--navy);}
.ty-page p{font-size:16px; line-height:1.6; color:var(--ink-soft); margin-bottom:24px;}
.ty-page .btn{background:var(--blue); color:#fff;}

/* ============================================================
   Mobile refinements
   ============================================================ */

/* Inline button groups that wrap cleanly on narrow screens */
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}

/* Grid/flex children default to min-width:auto, which lets long content
   force a column wider than the viewport on small screens. */
.about-grid > *, .content-grid > *, .numbers-grid > *, .cta-band > *,
.card-grid > *, .steps > *, .impact-cards > *, .footer-grid > *,
.stat-row > *, .hero-stats > *{min-width:0;}

/* The contact email has no break opportunities; let it wrap anywhere. */
.contact-item strong{overflow-wrap:anywhere;}

@media(max-width:640px){
  section{padding:56px 0;}
  h2{font-size:clamp(1.5rem, 6.5vw, 1.9rem);}
  .section-head{margin-bottom:36px; gap:14px;}
  .btn{padding:14px 24px;}

  .about-panel{padding:28px 24px;}
  .p-card, .card, .step-card{padding:26px 22px;}
  .stat-card{padding:18px;}
  .stat-card strong{font-size:1.7rem;}
  .form-card{padding:28px 20px;}

  .quote-banner{min-height:440px;}
  .quote-inner{padding:48px 20px;}
  .quote-inner::before{font-size:64px; margin-bottom:22px;}

  .impact-band{padding-top:60px; padding-bottom:60px;}
  .cta-band{padding-top:60px; padding-bottom:60px; gap:36px;}
  .contact-item{padding:16px 18px;}
  .i-card .amt{font-size:clamp(2rem, 8vw, 3.3rem);}
  .num-callout{gap:20px 28px;}
  .num-callout div strong{font-size:1.8rem;}
  .gallery-grid img{height:240px;}

  .calendar-table{min-width:480px;}
  .calendar-table th{padding:12px 14px;}
  .calendar-table td{padding:14px;}

  .ty-page .card{padding:32px 24px;}
}

@media(max-width:560px){
  .footer-grid{gap:28px 24px;}
  .footer-grid > div:first-child{grid-column:1 / -1;}
}