@font-face{
  font-family:"Neutraface 2 Text";
  src:url("fonts/Neutra2Text-Light.otf") format("opentype");
  font-style:normal;
  font-weight:300;
  font-display:swap;
}
@font-face{
  font-family:"Neutraface 2 Text";
  src:url("fonts/Neutra2Text-Book.otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Neutraface 2 Text";
  src:url("fonts/Neutra2Text-BookItalic.otf") format("opentype");
  font-style:italic;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Neutraface 2 Text";
  src:url("fonts/Neutra2Text-Demi.otf") format("opentype");
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
@font-face{
  font-family:"Neutraface 2 Text";
  src:url("fonts/Neutra2Text-DemiItalic.otf") format("opentype");
  font-style:italic;
  font-weight:600;
  font-display:swap;
}
@font-face{
  font-family:"Neutraface 2 Text";
  src:url("fonts/Neutra2Text-Bold.otf") format("opentype");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
@font-face{
  font-family:"Neutraface 2 Text";
  src:url("fonts/Neutra2Text-BoldItalic.otf") format("opentype");
  font-style:italic;
  font-weight:700;
  font-display:swap;
}
@font-face{
  font-family:"Neutraface 2 Display";
  src:url("fonts/Neutra2Display-Light.otf") format("opentype");
  font-style:normal;
  font-weight:300;
  font-display:swap;
}
@font-face{
  font-family:"Neutraface 2 Display";
  src:url("fonts/Neutra2Display-Medium.otf") format("opentype");
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
@font-face{
  font-family:"Neutraface 2 Display";
  src:url("fonts/Neutra2Display-Bold.otf") format("opentype");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

/*
  WCPSS campaign redesign
  Direction: civic optimism — editorial typography, bold color fields,
  generous spacing, rounded cards, and purposeful school photography.
*/

:root{
  --navy:#064d82;
  --blue:#0871b9;
  --sky:#e9f5fb;
  --red:#b51f34;
  --red-dark:#8d1526;
  --green:#008b83;
  --teal:#008b83;
  --teal-light:#bceae6;
  --ink:#102f49;
  --muted:#5a7082;
  --cream:#f5f8f7;
  --line:#d9e6eb;
  --shadow:0 22px 60px rgba(12,54,83,.12);
  --shadow-small:0 10px 28px rgba(12,54,83,.1);
  --radius:22px;
  --radius-small:12px;
  --font-headline:"Neutraface 2 Display","Century Gothic",Arial,sans-serif;
  --font-copy:"Neutraface 2 Text",Arial,sans-serif;
}

html{
  background:#fff;
  font-size:106.25%;
}
body{
  overflow-x:hidden;
  font-family:var(--font-copy);
  color:var(--ink);
  font-size:1.06rem;
  line-height:1.7;
}

::selection{background:var(--teal-light);color:var(--ink)}

.topbar{
  position:relative;
  z-index:30;
  font-family:var(--font-headline);
  background:linear-gradient(90deg,var(--red-dark),var(--red));
  padding:.58rem 1rem;
  font-size:.78rem;
  letter-spacing:.13em;
}

.site-header{
  top:0;
  font-family:var(--font-headline);
  background:rgba(255,255,255,.94);
  border:0;
  box-shadow:0 1px 0 rgba(16,47,73,.1),0 8px 24px rgba(16,47,73,.05);
  backdrop-filter:blur(16px);
}

.header-inner{
  max-width:1320px;
  min-height:96px;
  padding:.9rem 1.5rem;
}

.logo img{width:168px}

.nav{gap:.3rem}
.nav a{
  border:0;
  border-radius:999px;
  padding:.55rem .68rem;
  color:var(--blue);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.025em;
  transition:background .18s,color .18s,transform .18s;
}
.nav a.active{
  border:0;
  background:var(--blue);
  color:#fff;
}
.nav a:hover{
  border:0;
  background:var(--sky);
  color:var(--teal);
  transform:translateY(-1px);
}
.nav .donate-button{
  margin-left:.25rem;
  border-radius:10px;
  padding:.62rem 1rem;
  font-size:.86rem;
  box-shadow:0 8px 22px rgba(181,31,52,.2);
}
.header-socials{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-left:.3rem;
}
.nav .header-socials a{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  overflow:hidden;
  padding:0;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:.72rem;
  line-height:1;
  text-transform:lowercase;
  letter-spacing:0;
}
.nav .header-socials a:hover{
  background:var(--teal);
  color:#fff;
  transform:translateY(-2px);
}
.nav .header-socials img{
  width:17px;
  height:17px;
  object-fit:contain;
}
.nav .header-socials a[aria-label="Facebook"] img{display:none}
.nav .header-socials a[aria-label="Facebook"]:before{
  content:"";
  width:28px;
  height:28px;
  background:#fff;
  clip-path:circle(46%);
  -webkit-mask:
    linear-gradient(#000 0 0),
    url("assets/facebook.webp") center/contain no-repeat;
  -webkit-mask-composite:xor;
  mask:
    linear-gradient(#000 0 0),
    url("assets/facebook.webp") center/contain no-repeat;
  mask-composite:exclude;
}

.menu-toggle{
  border-radius:10px;
  padding:.7rem 1rem;
  background:var(--navy);
  font-size:.86rem;
}

.container{max-width:1180px}

.hero{
  position:relative;
  min-height:760px;
  isolation:isolate;
  background:
    linear-gradient(115deg,rgba(3,48,80,.96) 0%,rgba(4,74,118,.88) 48%,rgba(0,139,131,.44) 100%),
    url("assets/hero-bus.jpg") center/cover;
}
.hero-inner{
  max-width:1240px;
  padding:4rem 1.5rem 6.5rem;
}
.hero .hero-inner>.eyebrow{
  max-width:860px;
  margin:0 auto 1.2rem;
  color:#fff;
  opacity:.82;
}
.hero .hero-inner>h1{
  max-width:1100px;
  margin:0 auto;
  color:#fff;
  font-size:clamp(3.1rem,6.7vw,6rem);
  line-height:.96;
  letter-spacing:.01em;
  text-wrap:balance;
}
.hero-layout{
  grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);
  gap:4rem;
  margin-top:3.4rem;
}
.hero-layout p{
  margin-top:0;
  color:#edf7fb;
  font-size:1.16rem;
}
.hero-video{
  max-width:620px;
  border:0;
  border-radius:var(--radius);
  box-shadow:0 28px 80px rgba(0,20,35,.38);
}

.eyebrow,.kicker{
  margin-bottom:.75rem;
  font-size:.75rem;
  letter-spacing:.17em;
  font-weight:900;
}
.kicker{color:var(--red)}

h1,h2,h3,h4,.funding-total,.update-row strong{
  font-family:var(--font-headline)!important;
  font-weight:700;
  text-wrap:balance;
}
h2{
  font-size:clamp(2.35rem,4.7vw,4.25rem);
  line-height:1.02;
  letter-spacing:.01em;
}
h3{letter-spacing:.005em}
.lead{font-size:1.2rem;line-height:1.65}

.page-hero{
  position:relative;
  isolation:isolate;
  min-height:460px;
  display:grid;
  align-items:end;
  padding:7rem 1.5rem 4.8rem;
  background-position:center;
  background-size:cover;
}
.page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(3,42,70,.96),rgba(3,73,113,.76) 58%,rgba(0,139,131,.28));
}
.page-hero .container{width:100%}
.page-hero h1{
  max-width:950px;
  font-size:clamp(3rem,6vw,5.8rem);
  line-height:.96;
  letter-spacing:.01em;
}
.page-hero p{max-width:760px;color:#e6f1f6}
.page-hero .eyebrow{color:var(--teal-light)}

.bond-page .page-hero{background-image:url("assets/students-bus.jpg")}
.updates-page .page-hero{background-image:url("assets/hallway%20image.jpg")}
.faq-page .page-hero{background-image:url("assets/classroom%20image.jpg")}
.committee-page .page-hero{background-image:none;background-color:var(--navy)}
.get-involved-page .page-hero{background-image:url("assets/school%20bus%20front.jpg")}
.contact-page .page-hero{background-image:url("assets/teacher-with-kids.jpg");background-position:center 40%}

.section{
  position:relative;
  border:0;
  padding:5.25rem 1.5rem;
}
.section.alt{background:linear-gradient(180deg,#f6f9f8,#edf4f4)}
.section.blue{
  border:0;
  background:
    radial-gradient(circle at 90% 5%,rgba(0,139,131,.55),transparent 31%),
    linear-gradient(145deg,#07588f,#063f69);
}
.section.blue .kicker{color:var(--teal-light)}
.section.blue .lead{color:#e8f3f7}
.compact-section{padding:4.25rem 1.5rem}

.home-page #why-needed{
  padding-top:4.5rem;
  padding-bottom:4rem;
}
.get-involved-page > .section{
  padding-top:4.25rem;
  padding-bottom:4.25rem;
}

.two-col{gap:5rem}
.photo-frame:before{
  inset:24px -24px -24px 24px;
  border-radius:var(--radius);
  background:linear-gradient(145deg,var(--teal),#17aca3);
}
.photo-frame img{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.button{
  border:0;
  border-radius:10px;
  padding:.9rem 1.35rem;
  box-shadow:0 10px 26px rgba(181,31,52,.22);
  font-size:.86rem;
  transition:transform .18s,box-shadow .18s,background .18s;
}
.button:hover{
  border:0;
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(181,31,52,.25);
}
.button.green:hover{
  box-shadow:0 16px 34px rgba(0,139,131,.28);
}
.button.secondary{border:0;box-shadow:0 10px 26px rgba(8,113,185,.2)}
.button.light{border:0}

.cards{gap:1.4rem;margin-top:2.6rem}
.card,.funding-card,.profile{
  border:1px solid rgba(16,47,73,.08);
  border-top:0;
  border-radius:var(--radius);
  box-shadow:var(--shadow-small);
  overflow:hidden;
}
.card{
  position:relative;
  padding:2rem;
  transition:transform .22s,box-shadow .22s;
}
.card:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:var(--red);
}
.card.blue-card:before{background:var(--blue)}
.card.green-card:before,.card.teal-card:before{background:var(--teal)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .icon{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--sky);
  color:var(--navy);
  font-size:1.4rem;
}

.funding-grid{gap:1.5rem;margin-top:2.5rem}
.funding-card{
  position:relative;
  padding:2.2rem;
  background:#fff;
}
.funding-card:after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:7px;
  background:linear-gradient(90deg,var(--blue),var(--teal));
}
.funding-total{
  padding-top:.4rem;
  color:var(--red);
  font-size:clamp(2.2rem,4.2vw,3.5rem);
  letter-spacing:.005em;
}
.funding-card h3{font-size:1.65rem}
.funding-details{
  padding-top:.5rem;
  border-top:1px solid var(--line);
}
.funding-details h4{color:var(--teal)}

.voice-grid{gap:.75rem}
.voice-grid article{
  border:1px solid rgba(255,255,255,.15);
  border-top:0;
  border-radius:var(--radius-small);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
}
.voice-grid article:before{
  content:"";
  display:block;
  width:42px;
  height:5px;
  margin-bottom:1rem;
  border-radius:99px;
  background:var(--teal-light);
}

.photo-band{
  border:0;
  padding:1rem;
  background:#fff;
}
.photo-rail,.portrait-rail{gap:.85rem}
.photo-rail img,.portrait-rail img{
  border-radius:16px;
  filter:saturate(.93);
  transition:filter .2s,transform .2s;
}
.photo-rail img:hover,.portrait-rail img:hover{
  filter:saturate(1.08);
  transform:scale(1.015);
}
.portrait-rail{margin-top:1.5rem}

.video-embed{border-radius:var(--radius);box-shadow:var(--shadow)}
.video-intro{gap:4rem}
.faq-media-stack{
  max-width:1180px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:stretch;
  gap:2rem;
}
.faq-media-stack .video-embed{
  height:auto;
  min-height:0;
  aspect-ratio:16/9;
  align-self:center;
}
.faq-media-stack .quote-box{
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1.4rem 1.7rem;
}
.faq-media-stack .quote-box p{
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.45;
}
.faq-media-stack .quote-box footer{
  margin-top:1rem;
  padding-top:.8rem;
}
.quote-box{
  border:0;
  border-left:0;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#fff,#f1f8f7);
  padding:2.5rem 2.7rem;
  box-shadow:var(--shadow-small);
}
.quote-box:after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background:var(--teal);
}
.quote-box:before{color:rgba(0,139,131,.09)}
.quote-box footer{border-color:#d6e5e5}

.accordion{border:0}
.accordion details{
  margin-bottom:.7rem;
  border:1px solid var(--line);
  border-radius:var(--radius-small);
  padding:1.15rem 1.35rem;
  box-shadow:0 5px 16px rgba(16,47,73,.04);
}
.accordion details:last-child{border-bottom:1px solid var(--line)}
.accordion details[open]{
  border-left:0;
  padding-left:1.35rem;
  background:linear-gradient(90deg,#f0f9f8,#fff);
  box-shadow:var(--shadow-small);
}
.accordion summary{
  position:relative;
  padding-right:2rem;
  list-style:none;
  font-size:1.08rem;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary:after{
  content:"+";
  position:absolute;
  right:0;
  top:-.15rem;
  color:var(--teal);
  font-size:1.6rem;
}
.accordion details[open] summary:after{content:"–"}

input,textarea,select{
  border:1px solid #bed0d9;
  border-radius:10px;
  padding:1rem;
  background:#fff;
}
input:focus,textarea:focus,select:focus{
  outline:4px solid rgba(0,139,131,.13);
  border-color:var(--teal);
}
.checkbox-group{
  border-radius:var(--radius-small);
  background:#eef6f5;
  padding:1.2rem 1.3rem;
}
.form-media-grid,.contact-layout{gap:3rem}
.campaign-form-layout{
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:start;
}
.contact-layout{grid-template-columns:1fr;max-width:800px}
.form-support-image,.contact-layout>img{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.media-bar{
  background:linear-gradient(90deg,#007c76,var(--teal));
  padding:2.4rem 1.5rem;
}

.updates-list{border:0}
.update-row{
  margin-bottom:.8rem;
  border:1px solid var(--line);
  border-radius:var(--radius-small);
  padding:1.5rem 1.6rem;
  box-shadow:0 6px 18px rgba(16,47,73,.05);
}
.update-row:hover{
  border-color:#b5d8d5;
  background:linear-gradient(90deg,#eef9f8,#fff);
  box-shadow:var(--shadow-small);
}
.article-nav{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.article-nav .container{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.article-nav img{display:block;width:150px;height:auto}
.article-nav-links{display:flex;align-items:center;gap:.75rem}
.article-nav-links a{
  color:var(--navy);
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.article-nav-links a:last-child{
  border-radius:8px;
  background:var(--red);
  color:#fff;
  padding:.7rem .9rem;
}
.article-body{max-width:820px}
.article-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.article-mini-footer{
  background:#053653;
  color:#d7e6ec;
  padding:2.25rem 1.25rem;
}
.article-mini-footer .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.article-mini-footer img{display:block;width:150px;height:auto}
.article-mini-footer p{margin:0;font-size:.82rem;line-height:1.5;text-align:right}
.article-dialog{
  border-radius:var(--radius);
  border-top:0;
  box-shadow:0 35px 100px rgba(3,31,51,.4);
}
.article-dialog:before{
  content:"";
  display:block;
  width:54px;
  height:6px;
  margin-bottom:1.5rem;
  border-radius:99px;
  background:var(--teal);
}

.cta-band{
  background:
    radial-gradient(circle at 80% 50%,rgba(255,255,255,.12),transparent 28%),
    linear-gradient(100deg,var(--red-dark),var(--red));
  padding:3.25rem 1.5rem;
}
.next-step-band{
  /* Hidden during partner PR review. Remove this declaration to restore all Learn More panels. */
  display:none;
  border-top:1px solid #cfe0ec;
  background:linear-gradient(100deg,#edf6fb,#f8fbfd);
  padding:2.75rem 1.5rem;
}
.next-step-band .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.next-step-band .kicker{margin-bottom:.25rem;color:var(--teal)}
.next-step-band h2{margin:0;font-size:clamp(1.8rem,3vw,2.45rem)}
.next-step-band p{margin:.45rem 0 0;color:var(--muted)}
.next-step-band .button{flex:0 0 auto}

.footer{
  position:relative;
  overflow:hidden;
  background:#053653;
  padding:5rem 1.5rem 2.5rem;
}
.footer:after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-150px;
  bottom:-220px;
  border:70px solid rgba(0,139,131,.2);
  border-radius:50%;
}
.footer-grid{position:relative;z-index:1;max-width:1180px;gap:4rem}
.footer h3{color:var(--teal-light)}
.footer p{color:#d7e6ec}
.footer a{display:inline-block;padding:.12rem 0}
.footer a:hover{color:#fff;text-decoration:none;transform:translateX(2px)}
.footer-logo{width:190px}
.paid-for{color:#a9c2ce!important}

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 1.5em;
  margin-top: 1rem;
  font-weight: 600;
}

.form-submit:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.media-form-status {
  margin: 0;
  font-weight: 600;
}

.media-bar form {
  row-gap: 0.75rem;
}

.contact-form button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

@media(max-width:1100px){
  .header-inner{min-height:84px}
  .nav a{font-size:.76rem;padding:.48rem .46rem}
  .hero-layout{gap:2.5rem}
}

@media(max-width:900px){
  body{font-size:1rem}
  .site-header{position:relative}
  .header-inner{min-height:80px}
  .nav{gap:.15rem}
  .nav a{width:100%;border-radius:8px;padding:.6rem .75rem}
  .header-socials{width:100%;margin:.45rem 0 0;gap:.5rem}
  .nav .header-socials a{width:38px;height:38px;padding:0;border-radius:50%}
  .nav .donate-button{width:auto;margin:.5rem 0 0}
  .hero{min-height:auto}
  .hero-inner{padding:3rem 1.25rem 5rem}
  .hero .hero-inner>h1{font-size:clamp(2.8rem,11vw,4.6rem)}
  .hero-layout{grid-template-columns:1fr;margin-top:2.5rem}
  .hero-video{justify-self:start}
  .page-hero{min-height:390px;padding:5rem 1.25rem 3.5rem}
  .section{padding:4.25rem 1.25rem}
  .compact-section{padding:3.5rem 1.25rem}
  .two-col{gap:3rem}
  .funding-grid,.funding-grid-expanded{grid-template-columns:1fr}
  .funding-details{grid-template-columns:1fr}
  .campaign-form-layout{grid-template-columns:1fr}
  .form-support-image,.contact-layout>img{min-height:300px}
  .footer{padding-top:4rem}
  .faq-media-stack{grid-template-columns:1fr;gap:1.5rem}
  .faq-media-stack .video-embed{
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
  }
  .next-step-band .container{align-items:flex-start;flex-direction:column}
}

@media(max-width:560px){
  .topbar{font-size:.68rem}
  .logo img{width:145px}
  .hero .hero-inner>.eyebrow{text-align:left}
  .hero .hero-inner>h1{text-align:left}
  .hero-layout{gap:2rem}
  .hero-actions{display:grid}
  .hero-actions .button{text-align:center}
  .page-hero{min-height:340px}
  .page-hero h1{font-size:clamp(2.7rem,14vw,4rem)}
  .section{padding:3.5rem 1rem}
  h2{font-size:clamp(2.2rem,12vw,3.3rem)}
  .card,.funding-card{padding:1.65rem}
  .photo-frame:before{display:none}
  .quote-box{padding:2rem 1.6rem}
  .quote-box:after{width:6px}
  .footer-grid{gap:2.2rem}
  .article-nav .container{min-height:78px;gap:.75rem}
  .article-nav img{width:115px}
  .article-nav-links a{font-size:.7rem}
  .article-nav-links a:first-child{display:none}
  .article-mini-footer .container{align-items:flex-start;flex-direction:column}
  .article-mini-footer p{text-align:left}
  .home-page #why-needed{padding-top:3.5rem;padding-bottom:3rem}
  .home-page .photo-band{padding-top:1rem}
  .get-involved-page > .section{padding-top:3.5rem;padding-bottom:3.5rem}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
}