/* Shared styles for every page. Loaded after each page's own <style>, so rules here win at equal specificity. */

/* ---------- Header: menu button on tablets and phones ---------- */
.menu-btn{display:none;align-items:center;gap:8px;min-height:46px;padding:0 16px;border:2px solid #CADAD6;border-radius:999px;background:#fff;color:#123B37;font:700 16px Quicksand,system-ui,sans-serif;cursor:pointer}
.menu-btn:hover{border-color:#1A665D}
.menu-btn:focus-visible{outline:3px solid #E9C46A;outline-offset:3px}
.menu-btn .mb-close{display:none}
.nav-open .menu-btn .mb-open{display:none}
.nav-open .menu-btn .mb-close{display:block}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  nav[aria-label="Main"]{padding-left:20px!important;padding-right:20px!important;gap:12px!important}
  nav[aria-label="Main"]>.btn{margin-left:auto;min-height:46px!important;padding:0 20px!important}
  .navlinks{order:3;width:100%;flex-direction:column;align-items:stretch!important;gap:0!important;overflow:visible!important;border-top:1px solid #E3ECEA;padding:6px 0 8px}
  .js .navlinks{display:none!important}
  .js .nav-open .navlinks{display:flex!important}
  .navlinks .navlink{padding:14px 4px!important;font-size:18px!important;box-shadow:none!important;border-bottom:1px solid #EEF3F2}
  .navlinks .navlink:last-child{border-bottom:0}
  .navlinks .navlink[aria-current="page"]{color:#1A665D!important;text-decoration:underline;text-decoration-color:#E9C46A;text-decoration-thickness:3px;text-underline-offset:6px}
}
@media (max-width:480px){
  nav[aria-label="Main"]{flex-wrap:wrap!important}
  nav[aria-label="Main"] img{height:36px!important}
  nav[aria-label="Main"]>.btn{padding:0 18px!important}
  .menu-btn{width:46px;padding:0;justify-content:center}
  .menu-btn .mb-label{display:none}
}

/* ---------- Inner page headers: one full-width green band ---------- */
.ihero{background:#1A665D!important}
.ih1{font-size:clamp(36px,4.6vw,56px)!important}
@media (max-width:900px){
  .ihero .ihero-art{flex:1 1 100%!important;margin-left:0!important;justify-content:center!important}
  .ihero .ihero-art svg{width:260px}
  .ihero > .sec{padding-top:64px!important;padding-bottom:56px!important;gap:32px!important}
}

/* ---------- Boxed panels: less padding on phones ---------- */
@media (max-width:760px){
  .box{padding:28px 22px!important;border-radius:22px!important}
}

/* ---------- Home hero: fit the screen so the words and buttons show without scrolling ---------- */
.hero{height:clamp(540px,calc(100svh - 76px),760px)!important}
.hero-copy{bottom:clamp(36px,9vh,96px)!important;gap:clamp(12px,2vh,18px)!important}
.hero-copy h1{font-size:clamp(40px,min(5vw,7.4vh),64px)!important}
.hero-copy .in3{font-size:clamp(16px,2.2vh,19px)!important}
.hero-copy .in1{color:#8FE3D6!important;text-shadow:0 1px 8px rgba(18,59,55,.55)}
.hero-copy h1,.hero-copy .in3{text-shadow:0 2px 18px rgba(18,59,55,.35)}
.hero-shade{background:linear-gradient(to top,rgba(18,59,55,.95) 0%,rgba(18,59,55,.8) 28%,rgba(18,59,55,.42) 55%,rgba(18,59,55,.08) 78%,rgba(18,59,55,0) 100%)!important}
@media (max-width:760px){
  .hero{height:auto!important;min-height:min(640px,calc(100svh - 76px));display:flex;flex-direction:column;justify-content:flex-end}
  .hero-copy{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;padding:200px 20px 32px}
  .hero-copy .in1{font-size:12px!important}
  .hero-copy h1{font-size:38px!important}
}

/* ---------- "Want to partner with us" crawl ---------- */
.crawl{display:block;overflow:hidden;border-radius:999px;background:#1A665D;color:#fff;text-decoration:none;padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.crawl:hover{background:#123B37;color:#fff}
.crawl:focus-visible{outline:3px solid #E9C46A;outline-offset:4px}
.crawl-track{display:flex;width:max-content;animation:crawl 32s linear infinite}
.crawl:hover .crawl-track,.crawl:focus-visible .crawl-track{animation-play-state:paused}
.crawl-half{display:flex;flex:none}
.crawl-item{display:inline-flex;align-items:center;gap:14px;padding:0 26px;font:700 19px/1.2 Quicksand,system-ui,sans-serif;white-space:nowrap}
.crawl-item::after{content:"";width:8px;height:8px;border-radius:50%;background:#E9C46A;margin-left:38px}
.crawl-item b{color:#E9C46A;font-weight:700}
@keyframes crawl{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .crawl{-webkit-mask-image:none;mask-image:none}
  .crawl-track{animation:none;width:auto;justify-content:center}
  .crawl-half+.crawl-half,.crawl-item+.crawl-item{display:none}
  .crawl-item::after{display:none}
}

/* ---------- Resource download form (dialog) ---------- */
.dl-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:28px;padding:40px 36px 34px;background:#fff;color:#123B37;font-family:Inter,system-ui,sans-serif;box-shadow:0 30px 80px rgba(18,59,55,.28)}
.dl-dialog::backdrop{background:rgba(18,59,55,.55)}
.dl-dialog[open]{animation:dl-in 220ms cubic-bezier(.2,.7,.2,1)}
@keyframes dl-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dl-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:#F1F5F4;color:#123B37;font-size:26px;line-height:1;cursor:pointer}
.dl-close:hover{background:#E3ECEA}
.dl-close:focus-visible,.dl-later:focus-visible{outline:3px solid #E9C46A;outline-offset:3px}
.dl-step{display:flex;flex-direction:column;gap:14px}
.dl-eyebrow{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1A665D}
.dl-h{margin:0;font:700 26px/1.2 Quicksand,system-ui,sans-serif;padding-right:36px}
.dl-h:focus{outline:none}
.dl-lead{margin:0;font-size:16px;line-height:1.55;color:#47655F}
.dl-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.dl-field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.dl-field input,.dl-field select{min-height:50px;padding:0 14px;border:2px solid #CADAD6;border-radius:14px;background:#fff;color:#123B37;font:400 16px Inter,system-ui,sans-serif;width:100%;box-sizing:border-box}
.dl-field input:focus,.dl-field select:focus{outline:none;border-color:#1A665D;box-shadow:0 0 0 3px rgba(42,157,143,.25)}
.dl-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;cursor:pointer}
.dl-check input{width:20px;height:20px;margin:1px 0 0;accent-color:#1A665D;flex:none}
.dl-small{margin:0;font-size:13px;line-height:1.55;color:#5E7E78}
.dl-error{margin:0;padding:10px 14px;border-radius:12px;background:#FDECEA;color:#8A2A1F;font-size:15px}
.dl-submit{border:0;cursor:pointer;width:100%;margin-top:4px}
.dl-submit:disabled{opacity:.7;cursor:progress;transform:none}
.dl-done-icon{width:56px;height:56px;border-radius:50%;background:#DCEFEC;color:#1A665D;display:flex;align-items:center;justify-content:center}
.dl-support{margin-top:10px;padding:24px;border-radius:20px;background:#FBF1D8;display:flex;flex-direction:column;gap:10px}
.dl-support h3{margin:0;font:700 21px/1.25 Quicksand,system-ui,sans-serif}
.dl-support p{margin:0;font-size:15px;line-height:1.55;color:#4A4A3A}
.dl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:6px}
.dl-later{border:0;background:none;color:#1A665D;font:700 16px Quicksand,system-ui,sans-serif;cursor:pointer;padding:10px 4px;text-decoration:underline;text-underline-offset:4px}
@media (max-width:480px){.dl-dialog{padding:34px 22px 26px;border-radius:22px}.dl-h{font-size:23px}}
@media (prefers-reduced-motion:reduce){.dl-dialog[open]{animation:none}}

/* ---------- Website forms (contact, volunteer, newsletter) ---------- */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;padding:12px 16px;border-radius:12px;background:#FDECEA;color:#8A2A1F;font-size:15px;line-height:1.5}
form[data-form] [type="submit"]:disabled{opacity:.7;cursor:progress;transform:none}
.form-done{display:flex;flex-direction:column;gap:8px;padding:22px 24px;border-radius:18px;background:#DCEFEC;color:#123B37;font-size:16px;line-height:1.55}
.form-done:focus{outline:none}
.form-done-h{margin:0;font:700 21px/1.3 Quicksand,system-ui,sans-serif}
.form-done p{margin:0}
/* On the dark newsletter band */
form[data-form="newsletter"] .form-done{background:rgba(255,255,255,.12);color:#fff}
form[data-form="newsletter"] .form-status{background:#FDECEA}

/* ---------- Get help page ---------- */
.gh-danger{margin-top:8px;background:#fff;border:2px solid #1A665D;border-left-width:10px;border-radius:18px;padding:24px 28px;display:flex;flex-direction:column;gap:14px}
.gh-picker{display:flex;flex-direction:column;gap:6px;max-width:420px}
.gh-picker label{font-weight:600;font-size:15px;color:#123B37}
.gh-picker select,.young-form select,.young-form input,.young-form textarea{min-height:50px;padding:0 14px;border:2px solid #CADAD6;border-radius:14px;background:#fff;color:#123B37;font:400 16px Inter,system-ui,sans-serif;width:100%;box-sizing:border-box}
.young-form textarea{padding:12px 14px;min-height:110px;resize:vertical}
.gh-picker select:focus,.young-form select:focus,.young-form input:focus,.young-form textarea:focus{outline:none;border-color:#1A665D;box-shadow:0 0 0 3px rgba(42,157,143,.25)}
.gh-emergency{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.gh-breakdown{margin:0;font-size:15px;line-height:1.5;color:#47655F}
.gh-more{margin:0;padding-top:12px;border-top:1px solid #E3ECEA;font-size:16px;line-height:1.6;color:#2F4E49}
.gh-more a{font-weight:700}
.gh-card{border:2px solid #E3ECEA;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:8px;background:#fff}
.gh-slot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:6px}
.gh-entry{display:flex;flex-direction:column;gap:2px}
.gh-name{margin:0;font-weight:600;font-size:15px;color:#123B37}
.gh-link{font-weight:700;font-size:17px}
.gh-big{font:700 30px/1.1 Quicksand,system-ui,sans-serif;text-decoration:none;color:#1A665D}
.gh-hint{margin:0;font-size:15px;line-height:1.5;color:#5E7E78}
.howto-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
.howto{border:2px solid #E3ECEA;border-radius:18px;background:#fff}
.howto[open]{border-color:#1A665D}
.howto summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 20px;font:700 18px Quicksand,system-ui,sans-serif;color:#123B37}
.howto summary::-webkit-details-marker{display:none}
.howto summary::after{content:"";width:10px;height:10px;border-right:2.5px solid #1A665D;border-bottom:2.5px solid #1A665D;transform:rotate(45deg);margin-top:-4px;transition:transform 200ms ease-out}
.howto[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.howto summary:focus-visible{outline:3px solid #E9C46A;outline-offset:3px;border-radius:16px}
.howto-body{padding:0 20px 18px;display:flex;flex-direction:column;gap:6px}
.howto-body h4{margin:10px 0 0;font:700 16px Quicksand,system-ui,sans-serif;color:#1A665D}
.howto-body ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.55;color:#2F4E49}
.howto-src{margin:10px 0 0;font-size:13px;line-height:1.5;color:#5E7E78}
.young-form{display:flex;flex-direction:column;gap:16px;margin-top:8px;background:#fff;border-radius:22px;padding:28px}
.young-form .lbl{display:block;font-weight:600;font-size:15px;margin-bottom:6px;color:#123B37}
.yf-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.yf-guardian{border:2px dashed #CADAD6;border-radius:16px;padding:16px 18px 18px;margin:0;display:flex;flex-direction:column;gap:10px}
.yf-guardian legend{font-weight:700;font-size:16px;padding:0 6px;color:#123B37}
.yf-guardian legend span{font-weight:400;color:#47655F}
.yf-guardian p,.yf-note{margin:0;font-size:14px;line-height:1.55;color:#47655F}
.young-form [type="submit"]{border:0;cursor:pointer;align-self:flex-start}
@media (max-width:760px){.gh-danger{padding:20px}.young-form{padding:20px}}
@media (prefers-reduced-motion:reduce){.howto summary::after{transition:none}}

/* ---------- About: team ---------- */
.team-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:start}
.team-card{background:#fff;border:2px solid #E3ECEA;border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.team-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.team-card:first-child{flex-direction:row}
.team-card:first-child img{width:42%;aspect-ratio:auto;min-height:100%}
.team-text{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px}
.team-text h3{margin:0;font:700 24px/1.2 Quicksand,system-ui,sans-serif;color:#123B37}
.team-role{margin:0;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1A665D}
.team-text p:not(.team-role){margin:0;font-size:16px;line-height:1.65;color:#2F4E49}
@media (max-width:980px){.team-grid{grid-template-columns:1fr}.team-card:first-child{flex-direction:column}.team-card:first-child img{width:100%;aspect-ratio:1/1}.team-card:last-child{max-width:420px}}
.dl-field textarea{min-height:110px;padding:12px 14px;border:2px solid #CADAD6;border-radius:14px;background:#fff;color:#123B37;font:400 16px Inter,system-ui,sans-serif;width:100%;box-sizing:border-box;resize:vertical}
.dl-field textarea:focus{outline:none;border-color:#1A665D;box-shadow:0 0 0 3px rgba(42,157,143,.25)}
.partner-form{gap:12px}

/* ==========================================================================
   Phones (760px and under): new mobile design, 4 Nov 2026.
   Brief: project doc "claude/mobile-home-redesign.md". Nothing here applies above 760px.
   ========================================================================== */
@media (min-width:761px){.m-only{display:none!important}}
@media (max-width:760px){
  .d-only{display:none!important}
  html{scroll-padding-top:72px}

  /* ---- Header, every page: sticky bar, compact Donate, round Menu button, dropdown menu ---- */
  .sk>header{position:sticky;top:0;z-index:30;background:rgba(248,249,250,.97)!important;border-bottom:1px solid #E3ECEA}
  nav[aria-label="Main"]{position:relative;height:62px;flex-wrap:nowrap!important;padding:0 14px 0 20px!important;gap:8px!important}
  nav[aria-label="Main"] img{height:30px!important}
  nav[aria-label="Main"]>.btn{min-height:40px!important;padding:0 18px!important;font-size:14.5px!important;white-space:nowrap}
  .menu-btn{width:42px;height:42px;min-height:42px;padding:0;justify-content:center;border:1.5px solid #CADAD6;flex:none}
  .menu-btn svg{width:18px;height:18px}
  .menu-btn .mb-label{display:none}
  .navlinks{position:absolute;left:-1px;right:-1px;top:62px;width:auto;background:#fff;border-top:0;border-bottom:1px solid #E3ECEA;box-shadow:0 18px 30px rgba(18,59,55,.12);padding:0 0 12px!important}
  .navlinks .navlink{display:flex!important;align-items:center;min-height:50px;padding:0 20px!important;font-size:16px!important;font-weight:600;border-bottom:0!important;border-top:1px solid #E3ECEA;gap:8px}
  .navlinks .navlink svg{width:19px;height:19px}

  /* ---- Home page: phone order and layout ---- */
  .home{display:flex;flex-direction:column}
  .home>header{order:0}
  .home>#top{order:1}
  .home>#programmes{order:2}
  .home>.start{order:3}
  .home>#about{order:4}
  .home>#resources{order:5}
  .home>.partner-strip{order:6}
  .home>#help{order:7}
  .home>#involved{order:8}
  .home>dialog{order:9}
  .home>footer{order:10}

  /* Shared phone type and buttons */
  .home .m-eb,.home .hero-copy .in1{font-size:11.5px!important;letter-spacing:.09em!important;margin:0!important}
  .home section .btn{min-height:48px;padding:0 14px;font-size:15px;white-space:nowrap;justify-content:center}
  .home section .btn:hover{transform:none}

  /* Hero */
  .home .hero{height:520px!important;min-height:0;display:block}
  .home .hero video{object-position:38% 30%!important}
  .home .hero-shade{background:linear-gradient(to top,rgba(18,59,55,.96) 0%,rgba(18,59,55,.80) 34%,rgba(18,59,55,.15) 62%,rgba(18,59,55,0) 78%)!important}
  .home .hero-copy{position:absolute!important;left:20px!important;right:20px!important;bottom:24px!important;padding:0;max-width:none!important;gap:12px!important}
  .home .hero-copy h1{font-size:34px!important;line-height:1.08!important}
  .home .hero-copy .in3{font-size:15px!important;line-height:1.5!important}
  .home .hero-btns{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;width:100%}
  .home .hero-btns .btn-ghost{border:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}

  /* What we do: a swipe row of cards with dots */
  .home #programmes{padding:36px 0 30px!important}
  .home .wwd-head{padding:0 20px;gap:8px!important;margin-bottom:18px!important}
  .home .wwd-head h2{font-size:26px!important;line-height:1.15!important}
  .home .wwd-row{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;padding:0 20px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .home .wwd-row::-webkit-scrollbar{display:none}
  .home .wwd-row .card{flex:0 0 262px;min-height:226px!important;padding:20px!important;gap:8px!important;border-radius:22px!important;scroll-snap-align:start;animation:none!important}
  .home .wwd-row .card:hover{transform:none;box-shadow:none}
  .home .wwd-row .card[style*="border"]{border-width:1.5px!important}
  .home .wwd-row .card svg{width:28px;height:28px}
  .home .wwd-row .card h3{font-size:21px!important}
  .home .wwd-row .card p{font-size:14.5px!important;line-height:1.5!important}
  .home .wwd-row .card p:last-child{padding-top:10px!important;border-top-width:1.5px!important}
  .wwd-dots{display:flex;gap:6px;padding:14px 20px 0}
  .wwd-dots span{width:6px;height:6px;border-radius:3px;background:#CADAD6;transition:width 200ms ease-out,background-color 200ms ease-out}
  .wwd-dots span.on{width:18px;background:#1A665D}

  /* Start here: heading beside a small picture, then the three rows */
  .home .start-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) 104px;column-gap:12px!important;row-gap:0!important;align-items:center;padding:30px 20px 26px!important}
  .home .start-text{display:contents!important}
  .home .start-eb{grid-column:1;grid-row:1;margin-bottom:8px!important;align-self:end}
  .home .start-h{grid-column:1;grid-row:2;font-size:26px!important;line-height:1.15!important;margin-bottom:0!important;align-self:start}
  .home .start-art{grid-column:2;grid-row:1/3}
  .home .start-art svg{width:104px;height:auto}
  .home .start .path{grid-column:1/-1;padding:14px 0!important;gap:14px!important}
  .home .start .path:first-of-type{margin-top:14px}
  .home .start .path:hover{padding-left:0!important}
  .home .start .path>span:first-child{gap:2px!important}
  .home .start .path>span:first-child>span:first-child{font-size:17px!important}
  .home .start .path>span:first-child>span:last-child{font-size:13.5px!important}
  .home .start .path .arrow{flex:none;width:34px;height:34px;border-radius:50%;background:#E9C46A;color:#123B37!important;display:flex;align-items:center;justify-content:center;font-size:17px!important;font-weight:700}

  /* Why we exist: a card with the photo on top */
  .home #about{padding:32px 20px 28px!important}
  .home .why-wrap{display:block!important;background:#fff;border:1.5px solid #E3ECEA;border-radius:24px;overflow:hidden}
  .home .why-art,.home .why-eb{display:none!important}
  .why-photo{position:relative;height:176px;background:#CADAD6}
  .why-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
  .why-pill{position:absolute;left:16px;bottom:14px;background:#F8F9FA;color:#1A665D;padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
  .home .why-text{padding:20px 20px 22px;gap:12px!important}
  .home .why-quote{font-size:20px!important;line-height:1.32!important}
  .home .why-text>p{font-size:14.5px!important;line-height:1.6!important}
  .home .why-more{font-size:15px!important;min-height:40px;gap:6px!important}

  /* Free guide: the cover beside the title, two buttons below */
  .home #resources{padding:0 20px 28px!important}
  .home .guide-card{background:#FBF1D6!important;border:0!important;border-radius:24px!important;display:block!important}
  .home .guide-girl{display:none!important}
  .home .guide-text{display:grid!important;grid-template-columns:86px minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr auto;column-gap:16px;row-gap:0!important;padding:18px!important}
  .guide-cover{grid-column:1;grid-row:1/6;width:86px;height:122px;object-fit:cover;object-position:top;border-radius:6px;box-shadow:0 8px 20px rgba(18,59,55,.18);display:block;align-self:center}
  .home .guide-eb{grid-column:2;grid-row:2;display:block!important;background:none!important;padding:0!important;font-size:10.5px!important;letter-spacing:.09em!important;margin-bottom:6px}
  .home .guide-h{grid-column:2;grid-row:3;font-size:19px!important;line-height:1.2!important}
  .home .guide-p{grid-column:2;grid-row:4;font-size:13.5px!important;line-height:1.45!important;margin-top:6px}
  .home .guide-btns{grid-column:1/-1;grid-row:6;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;margin-top:16px!important}
  .home .guide-btns .btn svg{width:18px;height:18px}
  .home .guide-all{justify-content:center;min-height:48px!important;border-radius:999px;box-shadow:inset 0 0 0 2px #1A665D;font-family:Quicksand,sans-serif;font-size:15px!important;white-space:nowrap}
  .home .guide-all .arrow{display:none}

  /* Partner strip */
  .home .partner-strip{padding:0 20px 28px!important}
  .home .crawl{padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .home .crawl-item{font-size:16px;padding:0 18px}
  .home .crawl-item::after{width:6px;height:6px;margin-left:30px}

  /* Get help box */
  .home #help{padding:0 20px 28px!important}
  .home .help-box{padding:18px!important;border-radius:24px!important;flex-direction:column;align-items:stretch!important;gap:12px!important}
  .home .help-row{display:grid!important;grid-template-columns:40px minmax(0,1fr);gap:12px!important;align-items:center!important;flex:none!important}
  .home .help-text{display:contents!important}
  .home .help-ico{width:40px;height:40px;padding:9px;box-sizing:border-box;background:#fff;border-radius:50%}
  .home .help-text h2{font-size:19px!important;line-height:1.2!important}
  .home .help-text p{grid-column:1/-1;font-size:14px!important;line-height:1.55!important}
  .home .help-box>.btn{width:100%}

  /* Get involved card */
  .home #involved{padding:0 20px 32px!important}
  .home .inv-wrap{display:block!important;background:#fff;border:1.5px solid #E3ECEA;border-radius:24px;overflow:hidden}
  .home .inv-art{height:150px;background:#F4D381;align-items:flex-end;overflow:hidden}
  .home .inv-art img{height:142px;width:auto!important;max-width:none!important}
  .home .inv-text{padding:20px;gap:12px!important}
  .home .inv-text h2{font-size:23px!important;line-height:1.2!important}
  .home .inv-text>p:not(.m-eb){font-size:14.5px!important;line-height:1.55!important}
  .home .inv-btns{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;margin-top:4px!important}
  .home .inv-btns .btn-yellow{grid-column:1/-1}
  .home .inv-btns .btn:not(.btn-yellow):not(.btn-teal){border:0!important;box-shadow:inset 0 0 0 2px #1A665D}

  /* Footer (home) */
  .home-footer>.sec{padding:30px 20px 26px!important;gap:22px!important}
  .home-footer>.sec>div:first-child{gap:22px!important}
  .home-footer>.sec>div:first-child>div:first-child{gap:10px!important;flex:1 1 100%!important}
  .home-footer img{height:30px!important}
  .home-footer>.sec>div:first-child>div:first-child p{font-size:14px!important}
  .home-footer>.sec>div:first-child>div:last-child{flex:1 1 100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 16px!important}
  .home-footer>.sec>div:first-child>div:last-child>div{gap:9px!important}
  .home-footer>.sec>div:first-child>div:last-child p{font-size:15px!important}
  .home-footer a{font-size:14px;text-decoration:none;color:rgba(255,255,255,.82)!important}
  .home-footer a[href="/get-help"]{color:#E9C46A!important}
  .home-footer>.sec>p{font-size:12px!important;line-height:1.5;color:rgba(255,255,255,.62)!important;border-top-color:rgba(255,255,255,.16)!important;padding-top:16px!important}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.wwd-dots span{transition:none}}


/* ==========================================================================
   Phones (760px and under): the other pages, from section 6 of the brief (4 Nov 2026).
   Scoped away from the home page (done above) with zero-specificity :where(), so the cascade is as the brief tested it.
   The brief's header rules are left out: the header block above already does the sticky header for every page.
   ========================================================================== */
@media (max-width:760px){
/* Header stays on screen */
.sk:not(:where(.home)){overflow-x:clip!important}

/* Type scale */
.sk:not(:where(.home)) h1,.sk:not(:where(.home)) .ih1{font-size:29px!important;line-height:1.1!important}
.sk:not(:where(.home)) h2{font-size:24px!important;line-height:1.18!important}
.sk:not(:where(.home)) h3{font-size:18px!important;line-height:1.25!important}
.sk:not(:where(.home)) [style*="text-transform: uppercase"]{font-size:11.5px!important;letter-spacing:.09em!important}
.sk:not(:where(.home)) p[style*="font-size: 16px"],.sk:not(:where(.home)) p[style*="font-size: 17px"],.sk:not(:where(.home)) p[style*="font-size: 18px"],.sk:not(:where(.home)) p[style*="font-size: 19px"],.sk:not(:where(.home)) p[style*="font-size: 20px"],.sk:not(:where(.home)) li,.sk:not(:where(.home)) .in3{font-size:15px!important;line-height:1.55!important}

/* Section rhythm */
.sk:not(:where(.home)) .sec{padding-top:28px!important;padding-bottom:28px!important;padding-left:20px!important;padding-right:20px!important}
.sk:not(:where(.home)) [style*="gap: 64px"],.sk:not(:where(.home)) [style*="gap: 56px"],.sk:not(:where(.home)) [style*="gap: 48px"],.sk:not(:where(.home)) [style*="gap: 44px"],.sk:not(:where(.home)) [style*="gap: 40px"]{gap:18px!important}
.sk:not(:where(.home)) [style*="gap: 34px"],.sk:not(:where(.home)) [style*="gap: 32px"],.sk:not(:where(.home)) [style*="gap: 28px"],.sk:not(:where(.home)) [style*="gap: 26px"]{gap:14px!important}
.sk:not(:where(.home)) [style*="margin-bottom: 44px"],.sk:not(:where(.home)) [style*="margin-bottom: 40px"],.sk:not(:where(.home)) [style*="margin-bottom: 36px"]{margin-bottom:16px!important}

/* Inner page header: picture sits beside the heading, not in its own block */
:where(.sk:not(.home)) .ihero > .sec{display:grid!important;grid-template-columns:minmax(0,1fr) 88px;column-gap:14px!important;row-gap:10px!important;padding:22px 20px 26px!important;align-items:start!important}
:where(.sk:not(.home)) .ihero > .sec > div:first-child{display:contents!important}
:where(.sk:not(.home)) .ihero > .sec > div:first-child > *{grid-column:1 / -1}
:where(.sk:not(.home)) .ihero > .sec > div:first-child > :nth-child(1),:where(.sk:not(.home)) .ihero > .sec > div:first-child > :nth-child(2){grid-column:1}
:where(.sk:not(.home)) .ihero > .sec > div:first-child > :nth-child(1){align-self:end}
:where(.sk:not(.home)) .ihero .ihero-art{grid-column:2;grid-row:1 / span 2;width:88px!important;margin:0!important;flex:none!important;justify-content:flex-end!important;align-self:center}
:where(.sk:not(.home)) .ihero .ihero-art svg{width:88px!important;height:auto!important}
:where(.sk:not(.home)) .ihero .ih1{font-size:27px!important}

/* Cards: less padding, no tall minimum heights */
.sk:not(:where(.home)) .card{min-height:0!important;padding:18px!important;border-radius:20px!important;gap:6px!important}
.sk:not(:where(.home)) [style*="border: 2px solid #E3ECEA"]{border-width:1.5px!important;border-radius:18px!important}
.sk:not(:where(.home)) [style*="border: 2px solid #E3ECEA"]:not(.rcard):not(aside){padding:16px!important}
.sk:not(:where(.home)) .box{padding:20px 18px!important;border-radius:20px!important}
.sk:not(:where(.home)) [style*="min-height: 340px"],.sk:not(:where(.home)) [style*="min-height: 300px"],.sk:not(:where(.home)) [style*="min-height: 280px"]{min-height:0!important}
.sk:not(:where(.home)) [style*="grid-template-columns: repeat(auto-fit"],.sk:not(:where(.home)) [style*="grid-template-columns: repeat(auto-fill"]{gap:10px!important}

/* Short cards go two across */
.sk:not(:where(.home)) [style*="minmax(250px"],.sk:not(:where(.home)) [style*="minmax(170px"],.sk:not(:where(.home)) [style*="minmax(240px"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.sk:not(:where(.home)) [style*="minmax(250px"] h3,.sk:not(:where(.home)) [style*="minmax(170px"] h3,.sk:not(:where(.home)) [style*="minmax(240px"] h3{font-size:15.5px!important}
.sk:not(:where(.home)) [style*="minmax(250px"] p,.sk:not(:where(.home)) [style*="minmax(170px"] p,.sk:not(:where(.home)) [style*="minmax(240px"] p{font-size:13px!important;line-height:1.45!important}
.sk:not(:where(.home)) [style*="minmax(250px"] svg,.sk:not(:where(.home)) [style*="minmax(170px"] svg{width:24px!important;height:24px!important}

/* Buttons: full width, or half of an equal pair */
.sk:not(:where(.home)) main .btn,.sk:not(:where(.home)) section .btn,.sk:not(:where(.home)) form .btn{width:100%;min-height:48px!important;padding:0 14px!important;font-size:15px!important;justify-content:center!important;align-self:stretch!important}
.sk:not(:where(.home)) section div:has(> .btn + .btn){display:grid!important;grid-template-columns:minmax(0,1fr);gap:10px!important}
.sk:not(:where(.home)) .btn{text-align:center;white-space:nowrap}

/* Resources: compact cards with the cover beside the text */
:where(.sk:not(.home)) .rcard{display:grid!important;grid-template-columns:86px minmax(0,1fr);border-width:1.5px!important;border-radius:18px!important}
:where(.sk:not(.home)) .rcard > div:first-child{grid-column:1 / -1;height:6px!important}
:where(.sk:not(.home)) .rcard .rcover{grid-column:1;padding:14px 0 14px 14px!important;background:transparent!important;aspect-ratio:auto!important;height:auto!important;display:block!important}
:where(.sk:not(.home)) .rcard .rcover img{width:72px!important;height:auto!important;border-radius:4px;box-shadow:0 6px 14px rgba(18,59,55,.16);position:static!important}
:where(.sk:not(.home)) .rcard > div:last-child{grid-column:2;padding:14px 14px 14px 12px!important;gap:6px!important}
:where(.sk:not(.home)) .rcard h3{font-size:16px!important}
:where(.sk:not(.home)) .rcard p{font-size:13px!important;line-height:1.45!important}
:where(.sk:not(.home)) .rcard span{font-size:10.5px!important;padding:3px 8px!important}
:where(.sk:not(.home)) .rcard .btn{min-height:40px!important;font-size:14px!important;margin-top:4px!important}
:where(.sk:not(.home)) [aria-label="Filter by audience"]{flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;margin:0 -20px;padding:0 20px 2px;scrollbar-width:none}
:where(.sk:not(.home)) [aria-label="Filter by audience"] .chip{flex:none;white-space:nowrap;min-height:40px;padding:0 16px!important;font-size:14px!important}

/* About: team cards with a small round photo */
:where(.sk:not(.home)) .team-card{display:grid!important;grid-template-columns:76px minmax(0,1fr);column-gap:14px;padding:16px!important;border-width:1.5px!important;border-radius:20px!important;align-items:center}
:where(.sk:not(.home)) .team-card img,:where(.sk:not(.home)) .team-card:first-child img{width:76px!important;height:76px!important;min-height:0!important;aspect-ratio:1/1!important;border-radius:50%;grid-row:1 / span 2}
:where(.sk:not(.home)) .team-text{display:contents!important}
:where(.sk:not(.home)) .team-text h3{grid-column:2;align-self:end;font-size:18px!important}
:where(.sk:not(.home)) .team-role{grid-column:2;align-self:start;font-size:11px!important}
:where(.sk:not(.home)) .team-text p:not(.team-role){grid-column:1 / -1;margin-top:12px!important;font-size:14px!important;line-height:1.6!important}
:where(.sk:not(.home)) .team-card:last-child{max-width:none!important}

/* Get help */
:where(.sk:not(.home)) .gh-danger{padding:18px!important;border-left-width:8px!important}
:where(.sk:not(.home)) .gh-card{padding:16px!important;border-width:1.5px!important}
:where(.sk:not(.home)) .gh-big{font-size:26px!important}
:where(.sk:not(.home)) .howto-list{gap:8px!important}
:where(.sk:not(.home)) .howto summary{min-height:50px;font-size:16px!important}
:where(.sk:not(.home)) .young-form{padding:18px!important;gap:12px!important}

/* Policy pages: the policy list becomes one swipeable row */
:where(.sk:not(.home)) aside[aria-label="Policies"]{flex-direction:row!important;flex:none!important;overflow-x:auto;padding:6px!important;border-radius:999px!important;gap:4px!important;scrollbar-width:none}
:where(.sk:not(.home)) aside[aria-label="Policies"] .eb{display:none}
:where(.sk:not(.home)) aside[aria-label="Policies"] .toc{white-space:nowrap;min-height:40px;padding:0 14px!important;border-radius:999px!important;display:flex;align-items:center;font-size:14px!important}

/* Footer */
.sk:not(:where(.home)) footer > div{padding:30px 20px 26px!important;gap:22px!important}
:where(.sk:not(.home)) footer img{height:30px!important}
:where(.sk:not(.home)) footer a{text-decoration:none!important;font-size:14px!important}
:where(.sk:not(.home)) footer p{font-size:14px}
:where(.sk:not(.home)) footer [style*="font-size: 17px"]{font-size:15px!important}
:where(.sk:not(.home)) footer p:last-child{font-size:12px!important}

/* Large photos inside sections: hidden on phones (the page header already carries one) */
.sk:not(:where(.home)) section:not(.ihero) div:has(> svg[viewBox="-40 -14 260 262"]){display:none!important}

/* Jump links: one swipeable row */
:where(.sk:not(.home)) nav[aria-label="On this page"]{padding-top:18px!important;padding-bottom:0!important}
:where(.sk:not(.home)) nav[aria-label="On this page"] > div{flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;margin:0 -20px!important;padding:0 20px 2px;scrollbar-width:none}
:where(.sk:not(.home)) nav[aria-label="On this page"] span{display:none}
:where(.sk:not(.home)) nav[aria-label="On this page"] .jump{flex:none;white-space:nowrap;min-height:40px;padding:0 16px!important;font-size:14px!important;display:flex;align-items:center}

/* Boxes with big padding */
.sk:not(:where(.home)) [style*="padding: 44px"],.sk:not(:where(.home)) [style*="padding: 48px"],.sk:not(:where(.home)) [style*="padding: 40px 44px"],.sk:not(:where(.home)) [style*="padding: 36px 40px"],.sk:not(:where(.home)) [style*="padding: 38px"],.sk:not(:where(.home)) [style*="padding: 34px"]{padding:20px 18px!important;border-radius:20px!important}

/* Running text set on a wrapper, and large statement text */
.sk:not(:where(.home)) div[style*="font-size: 18px"],.sk:not(:where(.home)) div[style*="font-size: 17px"]{font-size:15px!important;gap:12px!important;line-height:1.6!important}
.sk:not(:where(.home)) p[style*="font-size: 2"],.sk:not(:where(.home)) p[style*="font-size: 3"]{font-size:18px!important;line-height:1.35!important}
.sk:not(:where(.home)) .rcard p{font-size:13px!important;line-height:1.45!important}
}

/* Contact: the form card overlaps the green header by 100px on desktop. The phone header is shorter, so overlap only its bottom padding. */
@media (max-width:760px){:where(.sk:not(.home)) section.sec[style*="margin-top: -100px"]{margin-top:-14px!important}}
/* Resources filter hides cards with the hidden attribute; the compact card rule above must not override it. */
@media (max-width:760px){:where(.sk:not(.home)) [data-audience][hidden]{display:none!important}}
/* Button pairs stack full width (brief, section 5); their wrapper must span the row too, or a flex parent shrinks it to the labels. */
@media (max-width:760px){:where(.sk:not(.home)) section div:has(> .btn + .btn){width:100%;flex:1 1 100%}}