:root { --blue:#006f98; --navy:#005b82; --ink:#243746; --muted:#5c6f7a; --line:#d8e2e7; --pale:#eef7fa; --gold:#f4b41b; --site-gutter:1.5rem; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { color:var(--ink); background:#fff; font-family:Arial,"Helvetica Neue",sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.sr-only { height:1px; margin:-1px; overflow:hidden; position:absolute; width:1px; clip:rect(0,0,0,0); }
.skip-link { background:var(--navy); color:#fff; left:1rem; padding:.7rem 1rem; position:fixed; top:1rem; transform:translateY(-200%); transition:transform .15s ease; z-index:100; }
.skip-link:focus { transform:translateY(0); }
.container { margin:auto; width:min(1180px,calc(100% - (var(--site-gutter) * 2))); }
.utility { background:var(--blue); color:#fff; font-family:Arial,sans-serif; font-size:.76rem; letter-spacing:.04em; }
.utility-inner { align-items:center; display:flex; justify-content:space-between; min-height:34px; }
.utility a { border-left:1px solid rgba(255,255,255,.45); padding-left:1rem; }
header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.nav { align-items:flex-start; display:flex; flex-direction:column; justify-content:flex-start; min-height:0; padding-top:1rem; }
.nav nav { width:100%; }
.logo { align-items:center; display:flex; gap:.75rem; font-family:Arial,sans-serif; font-size:1.15rem; font-weight:700; letter-spacing:.02em; line-height:1.1; max-width:300px; }
.logo-image { background:#fff; border-radius:50%; display:block; flex-shrink:0; height:72px; object-fit:cover; width:72px; }
.logo-text { display:block; font-size:.7rem; font-weight:400; letter-spacing:.16em; margin:0; text-transform:uppercase; white-space:nowrap; }
.logo-text span { display:inline; font-size:inherit; font-weight:inherit; letter-spacing:inherit; margin:0; }
nav ul { align-items:center; border-top:1px solid var(--line); display:flex; font-family:Arial,sans-serif; gap:1.25rem; justify-content:space-between; list-style:none; margin-top:1rem; width:100%; }
nav a { color:var(--navy); display:block; font-size:.76rem; font-weight:700; letter-spacing:.04em; padding:1rem 0 .9rem; position:relative; text-transform:uppercase; }
nav a:not(.button)::after { background:var(--blue); bottom:0; content:""; height:3px; left:0; position:absolute; transform:scaleX(0); transform-origin:left; transition:transform .2s; width:100%; }
nav a:not(.button):hover { color:var(--blue); }
nav a:not(.button):hover::after { transform:scaleX(1); }
.button { background:var(--blue); color:#fff; display:inline-block; font-family:Arial,sans-serif; font-size:.82rem; font-weight:700; letter-spacing:.04em; padding:.8rem 1.15rem; text-transform:uppercase; }
nav .button { padding:.7rem .95rem; }
.search { align-items:center; border:1px solid var(--line); border-radius:50%; color:var(--navy); display:flex; font-size:1rem; height:34px; justify-content:center; padding:0; width:34px; }
.search::after { display:none !important; }
.search.active, nav a.active:not(.button) { color:var(--blue); }
nav a.active:not(.button)::after { transform:scaleX(1); }
.button:hover { background:var(--navy); }
.button.gold { background:var(--gold); color:var(--navy); }
.hero { background:linear-gradient(90deg,rgba(0,59,91,.95) 0%,rgba(0,59,91,.78) 42%,rgba(0,59,91,.12) 100%),url("../../asset/audience 2.jpg") center/cover; color:#fff; min-height:560px; padding:6.5rem 0 5rem; }
.page-hero { min-height:420px; }
.pulse-hero, .debate-hero, .involved-hero, .work-hero, .about-hero, .events-hero, .donate-hero { background-color:#006f98; background-image:linear-gradient(90deg,rgba(0,91,130,.9) 0%,rgba(0,111,152,.68) 52%,rgba(0,111,152,.2) 64%,transparent 72%); background-position:center,right center; background-repeat:no-repeat; background-size:auto,42% auto; color:#fff; }
.pulse-hero { background-image:linear-gradient(90deg,rgba(0,91,130,.9) 0%,rgba(0,111,152,.68) 52%,rgba(0,111,152,.2) 64%,transparent 72%),url("../../asset/josephine.JPG"); }
.debate-hero { background-image:linear-gradient(90deg,rgba(0,91,130,.9) 0%,rgba(0,111,152,.68) 52%,rgba(0,111,152,.2) 64%,transparent 72%),url("../../asset/child.jpg"); }
.involved-hero { background-image:linear-gradient(90deg,rgba(0,91,130,.9) 0%,rgba(0,111,152,.68) 52%,rgba(0,111,152,.2) 64%,transparent 72%),url("../../asset/kidu.jpg"); }
.work-hero { background-image:linear-gradient(90deg,rgba(0,91,130,.9) 0%,rgba(0,111,152,.68) 52%,rgba(0,111,152,.2) 64%,transparent 72%),url("../../asset/audience 2.jpg"); }
.about-hero { background:#f4f7f8; color:var(--ink); isolation:isolate; overflow:hidden; position:relative; }
.about-hero-video { height:100%; left:0; object-fit:contain; object-position:left center; opacity:.3; position:absolute; top:0; width:68%; z-index:0; }
.about-hero-image { height:100%; object-fit:cover; object-position:center; position:absolute; right:0; top:0; width:42%; z-index:1; }
.about-hero > .container { margin-left:max(var(--site-gutter),calc((100% - 1180px) / 2)); margin-right:auto; max-width:52%; position:relative; z-index:2; }
.hero.about-hero .eyebrow { color:var(--blue); }
.hero.about-hero p { color:var(--muted); }
.events-hero { background-image:linear-gradient(90deg,rgba(0,91,130,.9) 0%,rgba(0,111,152,.68) 52%,rgba(0,111,152,.2) 64%,transparent 72%),url("../../asset/audience.jpg"); }
.donate-hero { background-image:linear-gradient(90deg,rgba(0,91,130,.9) 0%,rgba(0,111,152,.68) 52%,rgba(0,111,152,.2) 64%,transparent 72%),url("../../asset/love.jpg"); }
.involved-hero { background-size:auto,36% auto; }
.work-hero { background-size:auto,56% auto; }
.pulse-hero .eyebrow, .debate-hero .eyebrow, .involved-hero .eyebrow, .work-hero .eyebrow, .about-hero .eyebrow, .events-hero .eyebrow, .donate-hero .eyebrow { color:#8ed7ff; }
.pulse-hero p, .debate-hero p, .involved-hero p, .work-hero p, .events-hero p, .donate-hero p { color:#f0f6f8; }
.hero .hero-content { text-align:left; }
.hero-content { max-width:680px; padding-left:0; }
.home-hero-content { align-items:center; display:flex; gap:2.5rem; justify-content:space-between; max-width:1180px; padding-left:0; position:relative; text-align:left; }
.hero-left { align-items:center; display:flex; inset:0 auto 0 0; justify-content:center; max-width:none; opacity:.28; pointer-events:none; position:absolute; width:100%; }
.hero-logo-graphic { animation:logoWave 2.4s ease-in-out infinite; background:transparent; display:block; height:auto; max-width:860px; object-fit:contain; opacity:.9; position:relative; transform-origin:center; width:100%; z-index:0; }
.hero-copy { max-width:620px; position:relative; z-index:2; }
@keyframes logoWave { 0%,100% { transform:rotate(-10deg) translateY(0); } 50% { transform:rotate(10deg) translateY(-12px); } }
.eyebrow { color:var(--blue); font-family:Arial,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.hero .eyebrow { color:#8ed7ff; }
h1 { font-size:clamp(2.5rem,5vw,4.6rem); font-weight:400; line-height:1.06; margin:.8rem 0 1.3rem; max-width:660px; }
.hero p { color:#f0f6f8; font-size:1.2rem; max-width:570px; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
section { padding:5.5rem 0; }
.section-heading { margin-bottom:2.6rem; max-width:700px; }
.page-layout { display:grid; gap:4rem; grid-template-columns:1fr 1fr; }
.content-copy { color:var(--muted); font-size:1.1rem; max-width:570px; }
.content-copy p + p { margin-top:1rem; }
.directory { align-items:start; display:grid; gap:3.5rem; grid-template-columns:250px 1fr; }
.directory-nav { border-top:4px solid var(--blue); }
.directory-nav h2 { font-size:1.35rem; margin:1rem 0 .8rem; }
.directory-nav ul { border-top:1px solid var(--line); list-style:none; }
.directory-nav li { border-bottom:1px solid var(--line); }
.directory-nav a { color:var(--navy); display:block; font-size:.9rem; padding:.75rem .2rem; }
.directory-nav a::after { color:var(--blue); content:"  ->"; font-weight:700; }
.directory-nav a:hover { color:var(--blue); padding-left:.35rem; }
.directory-content > .section-heading { margin-bottom:2rem; }
.directory-content > .section-heading h2 { max-width:680px; }
.topic-grid { display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
.topic-card { border-top:1px solid var(--blue); padding:1.1rem 0; }
.topic-card h3 { color:var(--navy); font-size:1.15rem; font-weight:400; margin-bottom:.25rem; }
.topic-card p { color:var(--muted); font-size:.92rem; }
.topic-card a { color:var(--blue); display:inline-block; font-family:Arial,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.04em; margin-top:.65rem; text-transform:uppercase; }
.partner-feature { align-items:center; display:grid; gap:4rem; grid-template-columns:1fr 1fr; overflow:hidden; }
.partner-copy { max-width:520px; }
.partner-gallery { display:grid; gap:0; justify-items:center; max-width:420px; width:100%; }
.partner-figure { margin:0; width:100%; }
.partner-figure:last-child { max-width:78%; margin-top:-1.25rem; }
.partner-figure:last-child .partner-image-wrap { min-height:240px; }
.partner-image-wrap { background:var(--pale); min-height:360px; overflow:hidden; }
.partner-image { display:block; height:100%; object-fit:contain; opacity:0; transform:translateX(90px); width:100%; animation:partner-slide-in .9s cubic-bezier(.22,.61,.36,1) .15s forwards; }
@keyframes partner-slide-in { to { opacity:1; transform:translateX(0); } }
.partner-caption { color:var(--muted); font-family:Arial,sans-serif; font-size:.72rem; letter-spacing:.04em; margin-top:.1rem; text-transform:uppercase; }
.community-gallery { display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); }
.community-gallery img { aspect-ratio:4/3; display:block; object-fit:cover; width:100%; }
.community-gallery-section { padding-top:0; }
.pale-section { background:var(--pale); }
.text-link { color:var(--blue); display:inline-block; font-family:Arial,sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.04em; margin-top:1.25rem; text-transform:uppercase; }
.text-link:hover { color:var(--navy); }
h2 { color:var(--navy); font-size:clamp(2rem,4vw,3rem); font-weight:400; line-height:1.12; margin:.45rem 0 1rem; }
.section-heading p:last-child { color:var(--muted); font-size:1.05rem; }
.grid { display:grid; gap:1.15rem; grid-template-columns:repeat(3,1fr); }
.card { border-top:5px solid var(--blue); background:var(--pale); min-height:230px; padding:1.6rem; }
.card:nth-child(2) { border-color:var(--gold); }
.card:nth-child(3) { border-color:#65a86b; }
.card-image { border-top:0; overflow:hidden; padding:0; }
.card-image img { display:block; height:100%; min-height:230px; object-fit:cover; width:100%; }
.card-number { color:var(--blue); font-family:Arial,sans-serif; font-size:.76rem; font-weight:700; letter-spacing:.12em; }
.card h3 { color:var(--navy); font-size:1.45rem; font-weight:400; margin:1.8rem 0 .45rem; }
.card p { color:var(--muted); }
.impact { background:var(--navy); color:#fff; }
.impact h2 { color:#fff; }
.impact .eyebrow { color:#8ed7ff; }
.impact .section-heading p:last-child { color:#cfdee6; }
.stats { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); margin-top:2rem; }
.stat { border-left:1px solid rgba(255,255,255,.4); padding-left:1.4rem; }
.stat strong { display:block; font-family:Arial,sans-serif; font-size:2.6rem; font-weight:400; }
.stat span { color:#cfdee6; font-size:.95rem; }
.news { display:grid; gap:3rem; grid-template-columns:1.1fr .9fr; }
.news-feature { border-top:1px solid var(--line); padding-top:1.3rem; }
.news-feature h3 { color:var(--navy); font-size:1.7rem; font-weight:400; margin:.5rem 0; }
.news-feature p { color:var(--muted); }
.news-list { border-top:1px solid var(--line); }
.news-item { border-bottom:1px solid var(--line); padding:1.15rem 0; }
.news-item small { color:var(--blue); font-family:Arial,sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.news-item h3 { color:var(--navy); font-size:1.1rem; font-weight:400; margin-top:.3rem; }
.news-link { display:block; }
.news-link:hover h3 { color:var(--blue); }
.story-gallery { display:grid; gap:1.25rem; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:2.5rem; }
.story-gallery figure { margin:0; }
.story-gallery img { aspect-ratio:4/3; display:block; object-fit:cover; width:100%; }
.story-gallery figcaption { color:var(--muted); font-size:.82rem; margin-top:.55rem; }
.cta { background:var(--pale); border-top:1px solid var(--line); text-align:center; }
.cta p { color:var(--muted); margin:0 auto 1.6rem; max-width:580px; }
footer { background:var(--navy); border-top:5px solid var(--blue); color:#fff; padding:3.2rem 0 1.5rem; }
.footer-content { align-items:flex-start; display:flex; justify-content:space-between; gap:2rem; }
footer p, .footer-links { color:#d7e8ee; font-family:Arial,sans-serif; font-size:.78rem; }
.footer-links { display:flex; gap:1.4rem; }
.search-panel[hidden] { display:none; }
.search-panel { inset:0; position:fixed; z-index:30; }
.search-backdrop { background:rgba(0,34,52,.64); inset:0; position:absolute; }
.search-dialog { background:#fff; box-shadow:0 1rem 3rem rgba(0,34,52,.25); left:50%; max-width:620px; padding:2.5rem; position:absolute; top:14vh; transform:translateX(-50%); width:calc(100% - 2rem); }
.search-close { background:none; border:0; color:var(--navy); cursor:pointer; font-size:1.7rem; line-height:1; position:absolute; right:1.2rem; top:1.2rem; }
.search-dialog h2 { font-size:2rem; max-width:480px; }
.search-dialog input { border:1px solid var(--line); color:var(--ink); margin-top:1rem; padding:.85rem 1rem; width:100%; }
.search-results { display:grid; gap:.35rem; margin-top:1rem; max-height:260px; overflow:auto; }
.search-results p { color:var(--muted); font-size:.9rem; }
.search-results button { background:var(--pale); border:0; color:var(--navy); cursor:pointer; padding:.7rem .8rem; text-align:left; }
.search-results button:hover { background:#dceef3; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .partner-image { animation:none; opacity:1; transform:none; } .hero-logo-graphic { animation:none; } .about-hero-video { display:none; } }
@media (max-width:760px) { .utility-inner { align-items:flex-start; flex-direction:column; gap:.25rem; padding:.45rem 0; } .nav { align-items:flex-start; flex-direction:column; gap:1rem; padding:1rem 0; } nav ul { flex-wrap:wrap; gap:.7rem 1rem; justify-content:flex-start; } nav ul .search-item { display:none; } .hero { min-height:520px; padding:5rem 0; } .page-hero { min-height:420px; } .pulse-hero, .debate-hero, .involved-hero, .work-hero, .about-hero, .events-hero, .donate-hero { background-position:center,center bottom; background-size:auto,72% auto; padding-bottom:16rem; } .involved-hero { background-size:auto,62% auto; } .work-hero { background-size:auto,82% auto; } section { padding:3.8rem 0; } .grid,.stats,.news,.page-layout,.directory,.topic-grid,.partner-feature { grid-template-columns:1fr; } .story-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .community-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .page-layout { gap:1rem; } .directory { gap:2.5rem; } .partner-feature { gap:2rem; } .partner-image-wrap { min-height:280px; order:-1; } .stat { border-left:0; border-top:1px solid rgba(255,255,255,.4); padding:1rem 0 0; } .footer-content { flex-direction:column; } }
@media (max-width:760px) { .about-hero { min-height:800px; padding:4rem 0 20rem; } .about-hero > .container { margin-left:auto; margin-right:auto; max-width:100%; } .about-hero-video { bottom:0; height:320px; left:0; top:auto; width:70%; } .about-hero-image { bottom:0; height:280px; top:auto; width:52%; } }