@font-face{font-family:'Montserrat';font-weight:700 800;font-display:swap;src:url(../assets/fonts/montserrat.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:400 700;font-display:swap;src:url(../assets/fonts/nunito-sans.woff2) format('woff2')}

/* Deliberately a single light theme: a warm, high-contrast look for parents
   and directors reading on a range of devices, not an adaptive app. */
:root{
  color-scheme:light;
  --blue:#51ADE5; --lime:#A8CF45; --green:#00A859; --yellow:#FFCC00;
  --blue-deep:#1B6FA8; --green-deep:#007A40; --ink:#16324F; --black:#191919;
  --sky:#F4FAFD; --mist:#E8F4FB; --white:#FFFFFF; --line:#D6E4EE; --muted:#41586F;
  --font-head:'Montserrat',system-ui,sans-serif;
  --font-body:'Nunito Sans',system-ui,sans-serif;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sky);color:var(--ink);font:400 18px/1.65 var(--font-body)}
img{max-width:100%;height:auto}
a{color:var(--blue-deep);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--black);padding:10px 16px;font-weight:700;border-radius:8px;z-index:10}
.skip:focus{left:8px}

h1,h2,h3{font-family:var(--font-head);font-weight:800;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(32px,6vw,54px)}
h2{font-size:clamp(26px,4vw,36px)}
h3{font-size:20px;font-weight:700}
p{margin:0 0 1em;max-width:68ch}
ul{padding-left:1.2em;margin:0 0 1em}
li{margin-bottom:.4em}
/* No colour here on purpose: .lead inherits, so it stays readable inside the
   dark .band-ink and coloured .band-lime sections as well as on light ground. */
.lead{font-size:clamp(19px,2.4vw,22px)}
.muted{color:var(--muted)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:64px;height:64px}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 6px;margin:0;padding:0;align-items:center}
nav li{margin:0}
nav a{display:flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:99px;font:700 15px var(--font-head);color:var(--ink);text-decoration:none}
nav a:hover{background:var(--mist)}
nav a[aria-current="page"]{background:var(--mist);color:var(--blue-deep)}
nav a.nav-cta{background:var(--yellow);color:var(--black)}
nav a.nav-cta:hover{background:#F0BF00}

/* buttons */
.btn{display:inline-block;font:700 17px var(--font-head);padding:14px 26px;border-radius:99px;text-decoration:none;border:3px solid transparent;cursor:pointer}
.btn.primary{background:var(--yellow);color:var(--black)}
.btn.primary:hover{background:#F0BF00;color:var(--black)}
.btn.secondary{background:var(--blue-deep);color:var(--white)}
.btn.secondary:hover{background:var(--ink);color:var(--white)}
.btn.outline{border-color:var(--blue-deep);color:var(--blue-deep)}
.btn.outline:hover{background:var(--blue-deep);color:var(--white)}
.btn.light{border-color:var(--white);color:var(--white)}
.btn.light:hover{background:var(--white);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* sections */
section{padding:56px 0}
.hero{background:var(--white);border-bottom:8px solid var(--yellow);padding:64px 0}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.hero .art{display:flex;justify-content:center}
.hero .art img{width:min(100%,340px)}
.page-head{background:var(--white);border-bottom:8px solid var(--yellow);padding:48px 0}
.eyebrow{display:inline-block;font:700 13px var(--font-head);text-transform:uppercase;letter-spacing:.08em;background:var(--mist);color:var(--blue-deep);padding:5px 12px;border-radius:99px;margin-bottom:16px}
.band-mist{background:var(--mist)}
.band-ink{background:var(--ink);color:var(--white)}
.band-ink h2,.band-ink h3{color:var(--yellow)}
.band-ink a:not(.btn){color:var(--white)}
.band-lime{background:var(--lime);color:var(--ink)}

/* cards */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card h3{margin-bottom:.4em}
.card .dot{display:block;width:44px;height:6px;border-radius:99px;margin-bottom:16px}
.dot.b{background:var(--blue)}.dot.l{background:var(--lime)}.dot.g{background:var(--green)}.dot.y{background:var(--yellow)}
/* Exactly two columns, so a set of four cards reads as a tidy 2x2 block
   instead of leaving one orphan on a second row. */
.g2x2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.g2x2{grid-template-columns:minmax(0,1fr)}}
/* Cards in a grid share a baseline: the call to action sits at the bottom of
   each card regardless of how much text sits above it. */
.grid .card{display:flex;flex-direction:column}
.grid .card > .btn:last-child{margin-top:auto;align-self:flex-start}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:20px}
.stat{background:var(--white);border-radius:var(--radius);padding:22px;border-top:6px solid var(--yellow);color:var(--ink)}
.stat b{display:block;font:800 40px var(--font-head);color:var(--blue-deep);line-height:1.1}
.quote{font:700 clamp(20px,3vw,26px)/1.4 var(--font-head);max-width:34ch}
/* Two real columns: the value wraps within its own column instead of running
   back under the label, which is what made these lists look broken. */
.facts{list-style:none;padding:0;margin:0}
.facts li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:2px 18px;
  padding:12px 0;border-bottom:1px solid var(--line);margin:0}
.facts li:last-child{border-bottom:0}
.facts strong{font-family:var(--font-head)}
@media (max-width:560px){.facts li{grid-template-columns:minmax(0,1fr);gap:2px}}

/* activity chips */
.activities{margin:22px 0 24px}
.activities h4{font:700 15px var(--font-head);text-transform:uppercase;letter-spacing:.06em;
  color:var(--blue-deep);margin:0 0 10px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.chips li{font:700 15px var(--font-head);color:var(--ink);padding:8px 16px;border-radius:99px;margin:0}
.chips li:nth-child(4n+1){background:#E1F1FB}
.chips li:nth-child(4n+2){background:#EDF6D9}
.chips li:nth-child(4n+3){background:#D9F2E5}
.chips li:nth-child(4n+4){background:#FFF3C2}
.notice{background:#FFF7D1;border-left:6px solid var(--yellow);padding:14px 18px;border-radius:8px;color:#3F3200;max-width:68ch}
.tbc{background:#FFF7D1;border-radius:4px;padding:0 4px}

/* footer */
.site-footer{background:var(--ink);color:var(--white);padding:48px 0 32px;font-size:16px}
.site-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:32px}
.site-footer h2{font-size:16px;color:var(--yellow);margin-bottom:.6em;text-transform:uppercase;letter-spacing:.06em}
.site-footer a{color:var(--white)}
.site-footer ul{list-style:none;padding:0}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.25);margin-top:28px;padding-top:18px;font-size:14px}

/* policies */
.policy{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.policy p{margin:0}

@media (max-width:760px){
  body{font-size:17px}
  .hero{padding:40px 0}
  .hero .wrap{grid-template-columns:1fr}
  .hero .art{order:-1}
  .hero .art img{width:180px}
  section{padding:40px 0}
  .brand img{width:52px;height:52px}
  .facts strong{display:block;min-width:0;margin-bottom:2px}
  .policy{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* policy pages */
.back{display:inline-flex;align-items:center;min-height:44px;padding:4px 12px 4px 0;margin-bottom:4px;font:700 15px var(--font-head);text-decoration:none}
.policy-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:40px;align-items:start}
.toc{position:sticky;top:96px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;max-height:calc(100vh - 120px);overflow:auto;font-size:15px}
.toc h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6em;color:var(--blue-deep)}
.toc ol{margin:0;padding-left:0;list-style:none}
.toc li{margin-bottom:.35em}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.policy-body{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,4vw,44px)}
.policy-body h2{font-size:clamp(22px,3vw,28px);margin-top:1.6em;padding-top:.2em;scroll-margin-top:100px}
.policy-body h2:first-of-type{margin-top:.6em}
.policy-body h3{font-size:19px;margin-top:1.4em;scroll-margin-top:100px}
.policy-body p,.policy-body li{max-width:72ch}
.table-wrap{overflow-x:auto;margin:1em 0}
.policy-body table{border-collapse:collapse;width:100%;font-size:15px}
.policy-body th,.policy-body td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.policy-body th{background:var(--mist);font-family:var(--font-head);font-size:14px}
.meta-line{font-size:14px;margin:.4em 0 0}
@media (max-width:900px){.policy-layout{grid-template-columns:1fr}.toc{position:static;max-height:none}}
@media print{.site-header,.site-footer,.toc,.skip{display:none}}

/* photo gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--white);border:1px solid var(--line)}
.gallery img{display:block;width:100%;height:190px;object-fit:cover}
.gallery figcaption{padding:10px 12px;font-size:14px;color:var(--muted)}
.gallery.g3col{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery img{height:150px}}

/* funders */
.funders{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.funders li{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 28px;display:flex;align-items:center;justify-content:center;min-height:120px}
.funders img{display:block;width:auto;max-width:100%}
.funders .lottery img{height:58px}
.funders .martin img{height:92px}
.funders a{display:flex;align-items:center}
.funder-row{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:center;
  padding:28px 0;border-bottom:1px solid var(--line)}
.funder-row:last-child{border-bottom:0}
.funder-mark{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;display:flex;align-items:center;justify-content:center;min-height:150px}
.funder-mark img{display:block;width:auto;max-width:100%}
.funder-mark.lottery img{height:62px}
.funder-mark.martin img{height:110px}
.funder-row h3{margin-bottom:.3em}
@media (max-width:700px){
  .funder-row{grid-template-columns:1fr;gap:18px}
  .funders li{width:100%}
}

/* mission statement */
.mission-block{max-width:820px}
.mission{font:700 clamp(19px,2.6vw,24px)/1.45 var(--font-head);color:var(--ink);
  border-left:6px solid var(--yellow);padding-left:20px;margin-bottom:1.2em;max-width:60ch}

/* quotes */
.pull{margin:0}
.pull .quote{margin-bottom:.6em}
.attrib{font-size:16px;margin:0}
.card.highlight{background:var(--yellow);border:none}
.card.highlight .quote,.card.highlight .attrib{color:var(--black)}
.card.highlight .quote{margin-bottom:.6em}

/* contact page */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:start}
.contact-side{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
/* 'anywhere', not 'break-word': only anywhere reduces the min-content width,
   so the email address stops forcing the card wider than a small phone. */
.pick{font:700 17px var(--font-head);overflow-wrap:anywhere}
.contact-side .facts strong{display:block;min-width:0;margin-bottom:2px}
/* minmax(0,1fr), not 1fr: a plain 1fr track cannot shrink below the widest
   form control's min-content width, which overflowed small phones. */
@media (max-width:860px){.contact-layout{grid-template-columns:minmax(0,1fr)}}

/* forms */
.contact-form{max-width:640px}
.field{margin-bottom:20px}
.field label{display:block;font:700 16px var(--font-head);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;max-width:100%;min-width:0;font:400 17px var(--font-body);color:var(--ink);
  background:var(--white);border:2px solid var(--line);border-radius:10px;padding:12px 14px;min-height:48px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-deep);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px}
.field .hint{display:block;font-size:15px;color:var(--muted);margin-top:4px}
.field .optional{font-weight:400;color:var(--muted)}
.req{color:#A12B2B}
.field.check{display:flex;gap:12px;align-items:flex-start}
.field.check input{width:28px;height:28px;min-height:28px;flex:0 0 auto;margin-top:2px}
.field.check label{font:400 16px/1.5 var(--font-body);margin:0}
button.btn{font-family:var(--font-head)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}