/* ============================================================ COASTERNERS HEALTH ACCESS FOUNDATION — shared stylesheet Used by: index, about, ascend, connect, research-insights, thrive ============================================================ */ :root{ --ink:#1B3A5C; --ink-deep:#12293F; --teal:#4A9086; --teal-dk:#3A7269; --foam:#F2F7F6; --cream:#F7F5EF; --amber:#E0A64A; --amber-dk:#C4881F; --slate:#3E4C59; --line:#DCE7E5; --white:#fff; --max:1120px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{font-family:'Public Sans',system-ui,sans-serif;color:var(--slate);background:#fff;line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:'Bricolage Grotesque','Public Sans',sans-serif;color:var(--ink);line-height:1.14;letter-spacing:-.01em} a{color:var(--teal)} img{max-width:100%;display:block} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Eyebrow with dot-run */ .eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:14px} .eyebrow::before{content:"";width:34px;height:4px;background:currentColor;border-radius:2px; -webkit-mask:radial-gradient(circle 2px,#000 98%,transparent) 0 50%/7px 100% repeat-x; mask:radial-gradient(circle 2px,#000 98%,transparent) 0 50%/7px 100% repeat-x} .on-dark .eyebrow,.hero .eyebrow{color:var(--amber)} /* Buttons */ .btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:999px;padding:15px 32px;font-size:16px;transition:background .15s,color .15s,border-color .15s} .btn-donate{background:var(--amber);color:var(--ink-deep)} .btn-donate:hover{background:var(--amber-dk);color:#fff} .btn-teal{background:var(--teal);color:#fff} .btn-teal:hover{background:var(--teal-dk)} .btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)} .btn-ghost:hover{border-color:#fff} a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:3px} /* ---------------- Header / navigation ---------------- */ header.site{background:var(--cream);border-bottom:1px solid rgba(0,0,0,.06);position:sticky;top:0;z-index:70} header.site .wrap{display:flex;align-items:center;justify-content:space-between;min-height:94px;gap:16px} .logo{display:flex;align-items:center;text-decoration:none;gap:12px} .logo img{height:70px;width:auto} .logo .fallback{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;color:var(--ink);line-height:1.1} .logo .fallback span{color:var(--teal);display:block} nav.main{display:flex;align-items:center} .navmenu{list-style:none;display:flex;align-items:center;gap:2px} .navmenu>li{position:relative} .navmenu a,.subtoggle{display:flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none; font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;padding:11px 13px; background:none;border:0;font-family:'Public Sans',sans-serif;cursor:pointer;white-space:nowrap} .navmenu a:hover,.subtoggle:hover{color:var(--teal)} .navmenu a[aria-current="page"]{color:var(--teal);box-shadow:inset 0 -2px 0 var(--amber)} .subtoggle svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform .18s} .subtoggle[aria-expanded="true"] svg{transform:rotate(180deg)} .submenu{list-style:none;position:absolute;top:calc(100% + 10px);left:0;min-width:236px;background:#fff; border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 16px 40px rgba(18,41,63,.14); opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:80} .has-sub:hover .submenu,.subtoggle[aria-expanded="true"]+.submenu{opacity:1;visibility:visible;transform:translateY(0)} .submenu a{padding:11px 13px;border-radius:9px;font-size:12.5px} .submenu a:hover{background:var(--foam)} .navmenu .nav-donate{background:var(--amber);color:var(--ink-deep);border-radius:999px;margin-left:10px;padding:12px 22px} .navmenu .nav-donate:hover{background:var(--amber-dk);color:#fff} .navtoggle{display:none;background:none;border:0;cursor:pointer;padding:10px} .navtoggle span{display:block;width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s} .navtoggle span+span{margin-top:6px} .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)} .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0} .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)} @media (max-width:1020px){ .logo img{height:56px} .navtoggle{display:block} .navmenu{position:fixed;top:94px;left:0;right:0;bottom:0;background:var(--cream);flex-direction:column; align-items:stretch;gap:0;padding:14px 24px 100px;overflow-y:auto;transform:translateX(100%); transition:transform .24s ease;z-index:65} .navmenu.open{transform:translateX(0)} .navmenu>li{border-bottom:1px solid rgba(0,0,0,.08)} .navmenu>li:last-child{border-bottom:0} .navmenu a,.subtoggle{padding:19px 4px;font-size:15px;width:100%;justify-content:space-between} .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0; border-radius:0;padding:0 0 12px 16px;min-width:0;display:none;background:transparent} .subtoggle[aria-expanded="true"]+.submenu{display:block} .has-sub:hover .submenu{display:none} .has-sub .subtoggle[aria-expanded="true"]+.submenu{display:block} .submenu a{padding:14px 4px;font-size:14px;justify-content:flex-start} .navmenu .nav-donate{margin:22px 0 0;justify-content:center;padding:17px;font-size:15px} } /* ---------------- Hero ---------------- */ .hero{background:var(--ink);color:#DCE8E6;position:relative;overflow:hidden;padding:80px 0 96px} .hero::before{content:"";position:absolute;inset:0;opacity:.5; background-image:radial-gradient(circle 1.4px,rgba(255,255,255,.16) 98%,transparent); background-size:26px 26px;pointer-events:none} .hero .wrap{position:relative;z-index:2} .hero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;max-width:17ch} .hero h1 em{font-style:normal;color:var(--amber)} .hero p.lede{max-width:58ch;margin:22px 0 32px;font-size:19px;color:#BED0CE} .cta-row{display:flex;gap:14px;flex-wrap:wrap} .hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} @media (max-width:900px){.hero-split{grid-template-columns:1fr;gap:8px}.hero-split .figure{order:-1;margin-bottom:20px}} /* ---------------- Sections ---------------- */ section{padding:82px 0} section.alt{background:var(--foam)} section.dark{background:var(--ink);color:#C6D6D4} section.dark h2,section.dark h3{color:#fff} .sec-head{max-width:64ch;margin-bottom:42px} .sec-head h2{font-size:clamp(1.8rem,3.6vw,2.5rem);font-weight:700;margin-bottom:14px} .sec-head p{font-size:17.5px} /* Cards */ .grid{display:grid;gap:22px} .grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))} .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px} .card h3{font-size:19px;margin:14px 0 8px} .card p{font-size:15.5px} .glyph{width:46px;height:46px;border-radius:12px;background:var(--foam);display:flex;align-items:center;justify-content:center} .glyph svg{width:24px;height:24px;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Program cards */ .prog{border:1px solid var(--line);border-radius:16px;padding:28px 26px;background:#fff;text-decoration:none;display:block;transition:border-color .16s,transform .16s,box-shadow .16s} .prog:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:0 12px 30px rgba(18,41,63,.08)} .prog .tag{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-dk)} .prog h3{font-size:22px;margin:8px 0 10px} .prog p{font-size:15.5px;color:var(--slate)} .prog .go{display:inline-block;margin-top:14px;font-weight:700;font-size:15px;color:var(--teal)} /* Split */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start} @media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}} .factcard{background:var(--ink);color:#D2E0DE;border-radius:18px;padding:34px 32px} .factcard h3{color:#fff;font-size:20px;margin-bottom:16px} .factcard ul{list-style:none} .factcard li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.13);font-size:15.5px;display:flex;gap:12px} .factcard li:last-child{border-bottom:none} .factcard li::before{content:"\2197";color:var(--amber);font-weight:700} /* Pill list */ .pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .pills span{border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:9px 18px;font-size:14.5px} .pills.light span{border-color:var(--line);color:var(--slate)} /* ---------------- Counters ---------------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border-top:1px solid rgba(255,255,255,.16)} .stat{padding:32px 20px;text-align:center;border-bottom:1px solid rgba(255,255,255,.16)} @media (min-width:721px){.stat+.stat{border-left:1px solid rgba(255,255,255,.16)}} .stat .num{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(2.2rem,5vw,3rem);font-weight:800;color:var(--amber);line-height:1;display:block} .stat .lbl{font-size:14.5px;color:#AFC3C1;margin-top:10px;display:block} /* ---------------- Partners ---------------- */ .partners{display:grid;gap:16px} .partner{display:grid;grid-template-columns:76px 1fr;gap:20px;align-items:center; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px 22px} .partner .mark{width:76px;height:76px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:9px} .partner .mark img{max-height:100%;width:auto;object-fit:contain} .partner h3{font-size:17.5px;color:#fff;margin-bottom:5px} .partner p{font-size:15px;color:#B6C9C7} @media (max-width:560px){.partner{grid-template-columns:60px 1fr;gap:15px;padding:17px}.partner .mark{width:60px;height:60px}} /* Light partner grid (program pages) */ .partners-light{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .partner-light{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center} .partner-light .mark{width:96px;height:96px;margin:0 auto 16px;border-radius:16px;background:var(--foam);display:flex;align-items:center;justify-content:center;padding:14px} .partner-light .mark img{max-height:100%;width:auto;object-fit:contain} .partner-light h3{font-size:17px;margin-bottom:6px} .partner-light p{font-size:14.5px} /* ---------------- Founder ---------------- */ .founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start} @media (max-width:900px){.founder{grid-template-columns:1fr;gap:28px}} /* Founder: two-photo layered composition on a foam panel */ .portrait-stack{position:relative;background:var(--foam);border-radius:20px;padding:0;aspect-ratio:4/4.6} .portrait-stack .main{position:absolute;left:6%;top:0;width:74%;height:88%;object-fit:contain;object-position:bottom center} .portrait-stack .inset{position:absolute;right:0;bottom:6%;width:46%;aspect-ratio:1/1;object-fit:cover; border-radius:6px;box-shadow:0 10px 28px rgba(18,41,63,.18);border:4px solid #fff} @media (max-width:900px){ .portrait-stack{ display:block!important;width:min(100%,420px);max-width:420px;min-height:360px; margin:0 auto;opacity:1!important;visibility:visible!important;transform:none!important } .portrait-stack .main,.portrait-stack .inset{ display:block!important;visibility:visible!important;opacity:1!important } } @media (max-width:480px){ .portrait-stack{width:100%;min-height:0;aspect-ratio:4/4.6} } .creds{list-style:none;margin-top:16px} .creds li{font-size:15px;padding:9px 0;border-bottom:1px solid var(--line)} .creds li:last-child{border-bottom:none} .creds strong{color:var(--ink)} /* ---------------- Publications ---------------- */ .pubs{list-style:none;border-top:1px solid var(--line)} .pub{border-bottom:1px solid var(--line);padding:30px 0;display:grid;grid-template-columns:132px 1fr;gap:28px;align-items:start} @media (max-width:720px){.pub{grid-template-columns:1fr;gap:10px}} .pub .meta{font-size:13px;line-height:1.5} .pub .type{display:inline-block;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--amber-dk);font-size:11.5px} .pub .venue{display:block;margin-top:6px;color:#6B7A88} .pub h3{font-size:20px;margin-bottom:10px} .pub p{font-size:15.5px} .pub .read{display:inline-block;margin-top:12px;font-weight:700;font-size:15px;text-decoration:none} .pub .read:hover{text-decoration:underline} .note{background:var(--foam);border:1px solid var(--line);border-radius:14px;padding:24px 26px;font-size:14.5px;margin-bottom:36px} .note strong{color:var(--ink)} /* ---------------- Give ---------------- */ #give{scroll-margin-top:96px} .give-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px} @media (max-width:760px){.give-grid{grid-template-columns:1fr}} .give-card{border:1px solid var(--line);border-radius:16px;padding:28px;background:#fff} .give-card .flag{font-size:30px;line-height:1} .give-card h3{font-size:20px;margin:10px 0 6px} .give-card p{font-size:14.5px;min-height:46px} .levels{list-style:none;margin-top:20px} .levels li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px} .levels .amt{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--teal);font-size:20px;min-width:62px} .disclosure{background:var(--foam);border:1px solid var(--line);border-radius:14px;padding:26px 28px;font-size:14.5px;margin-top:32px} .disclosure strong{color:var(--ink)} .disclosure p+p{margin-top:10px} /* ---------------- UEI strip ---------------- */ .uei{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px} @media (max-width:640px){.uei{grid-template-columns:1fr}} .uei-card{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:#fff;display:flex;align-items:center;gap:16px} .uei-card .flag{font-size:24px} .uei-card .k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6B7A88} .uei-card .v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:600;color:var(--teal);letter-spacing:.05em} /* ---------------- Contact ---------------- */ .contact-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:24px} .contact-row .card h3{margin-top:0;font-size:15px} .contact-row .card a{font-weight:700;font-size:17px;text-decoration:none;word-break:break-word} /* ---------------- Footer ---------------- */ footer.site{background:var(--ink);color:#E7F0EE;padding:64px 0 46px;font-size:15.5px} footer.site a{color:#F0F6F5;text-decoration:none} footer.site a:hover{color:var(--amber)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px} @media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:26px}} footer.site h4{color:#FFFFFF;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;font-family:'Public Sans',sans-serif;opacity:1} footer.site ul{list-style:none} footer.site li{padding:7px 0} footer.site .flogo{height:62px;width:auto;margin-bottom:16px} .legal{margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.28);font-size:14px;line-height:1.75;color:#D7E5E2} /* ---------------- Sticky mobile donate ---------------- */ .sticky-donate{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60; padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96); border-top:1px solid var(--line);backdrop-filter:blur(8px)} .sticky-donate a{display:block;text-align:center;background:var(--amber);color:var(--ink-deep); font-weight:800;font-size:17px;text-decoration:none;border-radius:999px;padding:16px 0} @media (max-width:760px){.sticky-donate{display:block}body{padding-bottom:88px}} /* ---------------- Network diagram ---------------- */ .netfig{width:100%;max-width:520px;margin:0 auto} .netfig .hub{fill:var(--amber)} .netfig .node{transform-box:fill-box;transform-origin:center} .netfig .link{stroke-width:3;fill:none;opacity:.94;stroke-dasharray:none;stroke-dashoffset:0} .netfig .lbl{font-family:'Public Sans',sans-serif;font-size:13px;fill:#BED0CE;text-anchor:middle} .netfig .hublbl{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;fill:var(--ink-deep);text-anchor:middle} .netfig.play .link{animation:netflow 7s ease-in-out infinite} .netfig.play .node{animation:netfloat 6s ease-in-out infinite} .netfig.play .n1{animation-delay:0s}.netfig.play .n2{animation-delay:.9s} .netfig.play .n3{animation-delay:1.8s}.netfig.play .n4{animation-delay:2.7s} .netfig.play .l2{animation-delay:.5s}.netfig.play .l3{animation-delay:1s}.netfig.play .l4{animation-delay:1.5s} @keyframes netfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} /* ---------------- shared heading size ---------------- */ .h2-sm{font-size:clamp(1.75rem,3.5vw,2.35rem);font-weight:700;margin-bottom:14px} /* ---------------- give: levels + cards side by side ---------------- */ .give-split{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start} @media (max-width:900px){.give-split{grid-template-columns:1fr;gap:30px}} .give-grid.stacked{grid-template-columns:1fr;margin-top:0} .level-note{font-size:13.5px;color:#6B7A88;margin-top:14px} .secure-note{font-size:13.5px;color:#6B7A88;margin-top:22px} /* ---------------- FAQ ---------------- */ .faq{margin-top:40px} .faq h3{font-size:22px;margin-bottom:18px} .faq details{border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px;background:#fff} .faq summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:16.5px;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--teal);font-size:24px;font-weight:600;line-height:1} .faq details[open] summary::after{content:"\2013"} .faq details p{margin-top:12px;font-size:15.5px} /* ---------------- credentials two-column ---------------- */ .cred-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:28px} @media (max-width:700px){.cred-cols{grid-template-columns:1fr;gap:24px}} .cred-h{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:6px} /* ---------------- contact page ---------------- */ .contact-top{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:28px;align-items:start} @media (max-width:900px){.contact-top{grid-template-columns:1fr;gap:34px}} .ct-card{text-align:center} .ct-icon{width:78px;height:78px;border-radius:50%;background:var(--teal);display:flex;align-items:center; justify-content:center;margin:0 auto 18px} .ct-icon svg{width:36px;height:36px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ct-card h3{font-size:24px;margin-bottom:12px} .ct-card p{font-size:16px} .ct-card a{text-decoration:none;font-weight:600} .tabs{display:inline-flex;background:#E4F0ED;border-radius:999px;padding:4px;gap:4px;margin-bottom:18px} .tab{border:0;background:transparent;font-family:'Public Sans',sans-serif;font-weight:700;font-size:15px; color:var(--ink);padding:11px 26px;border-radius:999px;cursor:pointer;transition:background .15s} .tab.is-on{background:#fff;box-shadow:0 2px 8px rgba(18,41,63,.10)} .tabpanel{display:none;background:var(--foam);border-radius:16px;padding:16px;text-align:left} .tabpanel.is-on{display:block} .office{background:#fff;border-left:4px solid var(--amber);border-radius:8px;padding:16px 18px;margin-bottom:12px} .office:last-child{margin-bottom:0} .office h4{font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px;color:var(--ink);margin-bottom:6px} .office p{font-size:15px;color:var(--slate)} .mapwrap{margin-top:48px;border-radius:18px;overflow:hidden;border:1px solid var(--line); box-shadow:0 12px 34px rgba(18,41,63,.08)} .mapwrap iframe{display:block;width:100%;height:420px;border:0} @media (max-width:640px){.mapwrap iframe{height:320px}} /* ============================================================ PROGRAM PAGE FORMAT (matches Connect / Thrive on the live site) Each program page sets its own accent via a body class. ============================================================ */ body{--acc:#2F7F72;--acc-lt:#6FB0A2;--tint:#E6F2EF;--panel:#FBFAF6} body.prog{background:#FBFAF6} body.prog-ascend {--acc:#2F7F72; --acc-lt:#6FB0A2; --tint:#E6F2EF; --panel:#FBFAF6} body.prog-connect {--acc:#2F7F72; --acc-lt:#6FB0A2; --tint:#E6F2EF; --panel:#FBFAF6} body.prog-thrive {--acc:#3F7A46; --acc-lt:#7CAE7F; --tint:#E9F2E8; --panel:#FBFAF6} /* --- hero (light, two-tone title) --- */ .phero{background:#FBFAF6;padding:74px 0 88px} .phero .eyebrow{color:var(--acc)} .phero h1{font-size:clamp(2.8rem,7vw,4.6rem);font-weight:800;line-height:1.02;margin-bottom:26px} .phero h1 .a{color:var(--acc-lt);display:block} .phero h1 .b{color:var(--acc);display:block} .phero .lede{max-width:52ch;font-size:19px;color:var(--slate);margin-bottom:32px} .phero .cta-row .btn{border-radius:999px} .pill-solid{background:var(--acc);color:#fff;border:2px solid var(--acc)} .pill-solid:hover{background:var(--ink);border-color:var(--ink);color:#fff} .pill-out{background:transparent;color:var(--ink);border:2px solid var(--ink)} .pill-out:hover{background:var(--ink);color:#fff} .ptrust{margin-top:30px;max-width:62ch;font-size:13.5px;color:#7A8A88;line-height:1.6} /* --- what X does --- */ .pdoes{background:var(--panel);border-top:1px solid rgba(0,0,0,.05);padding:76px 0} .pdoes .eyebrow{color:var(--acc)} .pdoes h2{color:var(--acc);font-size:clamp(1.8rem,3.8vw,2.5rem);margin-bottom:16px} .pdoes .intro{max-width:64ch;font-size:17.5px;margin-bottom:38px} .dcards{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media (max-width:820px){.dcards{grid-template-columns:1fr}} .dcard{background:var(--tint);border-radius:14px;padding:28px 30px} .dcard .dot{width:15px;height:15px;border-radius:50%;background:var(--acc);margin-bottom:18px} .dcard h3{color:var(--acc);font-size:19.5px;margin-bottom:10px} .dcard p{font-size:15.5px;color:var(--slate)} /* --- why it matters (dark band) --- */ .pwhy{background:#1E2B2A;color:#CFDCDA;padding:76px 0} .pwhy .eyebrow{color:var(--amber)} .pwhy h2{color:#fff;font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:28px;max-width:22ch} .pwhy .cols{display:grid;grid-template-columns:1fr 1fr;gap:46px} @media (max-width:820px){.pwhy .cols{grid-template-columns:1fr;gap:24px}} .pwhy p{font-size:16.5px;line-height:1.72} .pwhy strong{color:#fff} /* --- fund the work --- */ .pfund{background:#FBFAF6;padding:76px 0} .fundcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:46px 50px; display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center} @media (max-width:820px){.fundcard{grid-template-columns:1fr;gap:28px;padding:34px 28px}} .fundcard .eyebrow{color:var(--acc)} .fundcard h2{color:var(--acc);font-size:clamp(1.7rem,3.4vw,2.2rem)} .fundlist{list-style:none} .fundlist li{display:flex;gap:16px;align-items:flex-start;padding:13px 0;font-size:16.5px} .fundlist li::before{content:"";flex:none;width:13px;height:13px;margin-top:6px;border-radius:50%; border:3.5px solid var(--acc)} /* --- program goals --- */ .pgoals{background:#FBFAF6;padding:20px 0 76px} .pgoals .eyebrow{color:var(--acc)} .pgoals h2{color:var(--acc);font-size:clamp(1.8rem,3.6vw,2.4rem);margin-bottom:12px} .pgoals .intro{margin-bottom:32px;font-size:17px} .goalgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px} .goal{background:#fff;border:1px solid var(--line);border-left:5px solid var(--acc); border-radius:12px;padding:30px 28px} .goal .n{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(2.2rem,4.4vw,2.9rem); font-weight:800;color:var(--acc);line-height:1;display:block;margin-bottom:14px} .goal .t{font-size:15.5px;color:var(--slate)} .goal .arrow{display:block;font-size:34px;color:var(--acc);line-height:1;margin-bottom:14px} /* --- partners band --- */ .ppartners{background:var(--tint);padding:76px 0;text-align:center} .ppartners .eyebrow{color:var(--acc);justify-content:center} .ppartners h2{color:var(--acc);font-size:clamp(1.8rem,3.6vw,2.4rem);margin-bottom:16px} .ppartners .intro{max-width:64ch;margin:0 auto 30px;font-size:17px} .plogos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px; max-width:900px;margin:0 auto;text-align:left} .plogo{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px; display:grid;grid-template-columns:88px 1fr;gap:20px;align-items:center} .plogo .mk{width:88px;height:88px;background:#fff;border:1px solid var(--line);border-radius:10px; display:flex;align-items:center;justify-content:center;padding:8px} .plogo .mk img{max-height:100%;width:auto;object-fit:contain} .plogo h3{font-size:17px;margin-bottom:6px;color:var(--ink)} .plogo p{font-size:14.5px} @media (max-width:560px){.plogo{grid-template-columns:64px 1fr;gap:14px}.plogo .mk{width:64px;height:64px}} /* --- give --- */ .pgive{background:#FBFAF6;padding:76px 0} .pgive .eyebrow{color:var(--acc)} .pgive h2{color:var(--acc);font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:16px} .pgive .intro{max-width:64ch;font-size:17px;margin-bottom:34px} .lvlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px} .lvl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 22px;text-align:center} .lvl .amt{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800; color:var(--acc);margin-bottom:12px} .lvl .txt{font-size:15px;color:var(--slate)} .lvlnote{font-size:14px;color:#7A8A88;margin-top:20px} .ccards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px} @media (max-width:820px){.ccards{grid-template-columns:1fr}} .ccard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px; display:flex;align-items:center;justify-content:space-between;gap:22px} @media (max-width:520px){.ccard{flex-direction:column;align-items:flex-start}} .ccard h3{font-size:17.5px;color:var(--acc);margin-bottom:8px;display:flex;align-items:center;gap:9px} .ccard p{font-size:14.5px;max-width:34ch} .ccard .btn{flex:none;border-radius:999px;padding:14px 34px} .btn-give{background:var(--acc);color:#fff} .btn-give:hover{background:var(--ink);color:#fff} .btn-give-out{background:transparent;color:var(--ink);border:2px solid var(--ink)} .btn-give-out:hover{background:var(--ink);color:#fff} .pgive .secure{font-size:14px;color:#7A8A88;margin-top:20px} /* --- disclosure panel --- */ .pdisc{background:#fff;padding:60px 0} .pdisc .inner{max-width:1000px;margin:0 auto;font-size:15.5px;line-height:1.75;color:var(--slate)} .pdisc p+p{margin-top:16px} /* --- FAQ --- */ .pfaq{background:#FBFAF6;padding:20px 0 84px} .pfaq h2{color:var(--acc);font-size:clamp(1.8rem,3.6vw,2.4rem);margin-bottom:26px} .pfaq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin-bottom:14px} .pfaq summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:17px;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:16px} .pfaq summary::-webkit-details-marker{display:none} .pfaq summary::after{content:"+";color:var(--acc);font-size:26px;font-weight:600;line-height:1} .pfaq details[open] summary::after{content:"\2013"} .pfaq details p{margin-top:14px;font-size:15.5px} /* --- footer donate card --- */ .foot-give{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22); border-radius:14px;padding:26px} .foot-give p{color:#F0F6F5;font-size:16px;line-height:1.55;margin-bottom:20px} .foot-grid.four{grid-template-columns:1.5fr .8fr .8fr 1.1fr} @media (max-width:900px){.foot-grid.four{grid-template-columns:1fr 1fr}} @media (max-width:620px){.foot-grid.four{grid-template-columns:1fr}} /* footer text wordmark (matches the live site) */ .fwordmark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:25px; color:#fff;text-decoration:none;display:inline-block;margin-bottom:16px} .fwordmark span{color:var(--amber)} /* divider above the footer — sits outside