:root{--navy:#071a63;--ink:#14245e;--blue:#078ee0;--cyan:#10b8ef;--pale:#eaf7fc;--line:#d4e6f0;--warm:#fff9ed;--white:#fff;--shadow:0 16px 50px rgba(7,26,99,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;background:#fff;line-height:1.5}h1,h2,h3,h4{font-family:Manrope,sans-serif;line-height:1.08;margin:0}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0}.container{width:min(1180px,calc(100% - 40px));margin:auto}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:5;border-bottom:1px solid #edf2f6}.brand img{width:205px;display:block}.nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600}.nav a{padding:29px 0;border-bottom:3px solid transparent}.nav a:hover,.nav a.active{color:var(--blue);border-color:var(--cyan)}.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:9px;font-weight:700;font-size:14px;transition:.2s}.btn.primary{background:var(--navy);color:white}.btn.primary:hover{background:#0d3a98;transform:translateY(-1px)}.btn.blue{background:var(--blue);color:white}.btn.ghost{border:1px solid #aad0e3;color:var(--navy);background:white}.btn.light{background:#dff5ff;color:var(--navy)}.menu{display:none;background:none;font-size:27px;color:var(--navy)}.hero{min-height:500px;background:linear-gradient(110deg,#edfaff 0%,#fff 45%,#d8f1fb 100%);position:relative;overflow:hidden}.hero:after{content:'';position:absolute;right:-100px;top:-190px;width:710px;height:710px;border-radius:50%;background:radial-gradient(circle at 38% 40%,rgba(16,184,239,.28),rgba(7,26,99,.06) 48%,transparent 70%)}.hero .container{min-height:500px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;z-index:1}.kicker{color:var(--blue);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:13px;margin-bottom:18px}.hero h1{font-size:clamp(44px,5vw,76px);max-width:700px;color:var(--navy);letter-spacing:-.05em}.hero h1 span{color:var(--blue)}.hero p{font-size:19px;max-width:570px;margin:24px 0;color:#37466f}.actions{display:flex;gap:12px;flex-wrap:wrap}.hero-art{height:385px;display:flex;align-items:end;justify-content:center}.hero-panel{width:min(420px,100%);height:300px;border-radius:28px;background:linear-gradient(145deg,#072371,#0a9fe5);padding:28px;color:#fff;box-shadow:var(--shadow);transform:rotate(3deg);position:relative;overflow:hidden}.hero-panel:before{content:'4D';font:800 210px Manrope;color:rgba(255,255,255,.12);position:absolute;right:-15px;bottom:-70px}.hero-panel h3{font-size:28px;max-width:240px;position:relative}.hero-panel p{font-size:16px;color:#e7f9ff;max-width:220px;position:relative}.hero-panel .mini{position:absolute;bottom:26px;left:28px;right:28px;border-top:1px solid rgba(255,255,255,.35);padding-top:14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}.section{padding:78px 0}.section.alt{background:var(--pale)}.section.warm{background:var(--warm)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}.section-head h2{font-size:42px;letter-spacing:-.04em}.section-head p{max-width:510px;margin:0;color:#546180}.line{height:4px;width:54px;background:var(--cyan);margin:14px 0}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}.bigcopy{font-size:19px;color:#394973}.arms{display:grid;grid-template-columns:1fr 1fr;gap:18px}.arm,.card,.stat,.insight{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 8px 25px rgba(7,26,99,.04)}.arm img{height:58px;width:auto;max-width:170px;object-fit:contain;margin-bottom:15px}.arm h3{font-size:21px}.arm p{color:#52607f;font-size:14px}.textlink{font-weight:800;color:var(--blue);font-size:14px}.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pillar{padding:26px;border-radius:16px;background:#fff;border:1px solid var(--line);min-height:200px}.number{color:var(--blue);font:800 42px Manrope}.pillar h3{font-size:20px;margin:10px 0}.pillar p{color:#596582}.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{min-height:215px}.card .tag{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}.card h3{font-size:21px;margin:16px 0 10px}.card p{color:#596582;font-size:14px}.card.accent{background:var(--navy);color:#fff;border:0}.card.accent p,.card.accent .tag{color:#d7effb}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat strong{display:block;font:800 38px Manrope;color:var(--navy)}.stat span{color:#53617c;font-size:14px}.contact{background:var(--navy);color:#fff;border-radius:20px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:30px}.contact h2{font-size:36px;max-width:550px}.contact p{color:#cfe2f5;max-width:550px}.footer{background:#061550;color:#d9e6fa;padding:45px 0 20px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}.footer img{width:200px;filter:brightness(0) invert(1);margin-bottom:14px}.footer h4{color:#fff;margin-bottom:13px}.footer a,.footer p{display:block;color:#aec5e5;font-size:14px;margin:7px 0}.footer-bottom{border-top:1px solid #2a3b76;margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;font-size:12px;color:#8ea8cf}.admin{min-height:100vh;background:#f4f8fb}.admin-layout{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.admin-side{background:var(--navy);color:#fff;padding:26px 18px}.admin-side img{width:170px;filter:brightness(0) invert(1);margin:5px 10px 35px}.admin-side button{width:100%;text-align:left;background:none;color:#bcd2f1;padding:13px 14px;border-radius:8px;margin:3px 0}.admin-side button.active,.admin-side button:hover{background:#12358b;color:white}.admin-main{padding:32px 38px}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.admin-top h1{font-size:34px}.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:25px}.admin-stat{background:#fff;border-radius:14px;padding:22px;border:1px solid var(--line)}.admin-stat strong{display:block;font:800 30px Manrope}.admin-table{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.admin-table table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{padding:15px 18px;text-align:left;border-bottom:1px solid #edf2f6;font-size:14px}.admin-table th{background:#f4f9fc;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.form-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;max-width:850px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}.field label{font-weight:700;font-size:14px}.field input,.field textarea,.field select{border:1px solid #c6dae6;border-radius:8px;padding:12px;background:white;color:var(--ink)}.field textarea{min-height:150px;resize:vertical}.toast{position:fixed;bottom:24px;right:24px;background:var(--navy);color:#fff;padding:14px 18px;border-radius:10px;box-shadow:var(--shadow);z-index:10}.empty{text-align:center;padding:45px;color:#64708b}
@media(max-width:850px){.container{width:min(100% - 28px,680px)}.nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;padding:16px 22px;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 15px 30px #071a6318}.nav.open{display:flex}.nav a{padding:13px 0}.menu{display:block}.hero .container{grid-template-columns:1fr;padding-top:55px}.hero{min-height:auto}.hero .container{min-height:auto}.hero-art{height:300px}.hero-panel{height:230px}.section{padding:55px 0}.section-head,.contact{align-items:flex-start;flex-direction:column}.section-head h2{font-size:34px}.split,.pillars,.portfolio,.stats{grid-template-columns:1fr}.arms{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.admin-layout{grid-template-columns:1fr}.admin-side{position:static}.admin-side img{margin-bottom:15px}.admin-main{padding:25px 16px}.admin-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.admin-top{align-items:flex-start;gap:15px;flex-direction:column}}
.hero{background:linear-gradient(90deg,rgba(234,250,255,.98) 0%,rgba(234,250,255,.9) 38%,rgba(7,26,99,.12) 100%),url('assets/hero-generated.png') center/cover}
.pillar .number:before{content:'✦';display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#dff5ff;color:var(--blue);font-size:19px;margin-right:10px;vertical-align:middle}.pillar:nth-child(2) .number:before{content:'▦';background:#e9e2ff;color:#6241c6}.pillar:nth-child(3) .number:before{content:'◌';background:#dff8e9;color:#16864c}.card .tag:before{content:'◈';margin-right:7px;color:var(--cyan)}
.dco-hero{min-height:430px;background:linear-gradient(90deg,rgba(234,250,255,.96) 0%,rgba(234,250,255,.84) 38%,rgba(7,26,99,.05) 100%),url('assets/enterprise-generated.png') center/cover}.dco-hero .container{min-height:430px;display:flex;align-items:center}.dco-hero h1{font-size:clamp(44px,5vw,70px);color:var(--navy)}.dco-hero p{font-size:18px;max-width:620px;color:#394973;margin:20px 0}.subnav{background:#fff;border-bottom:1px solid var(--line)}.subnav .container{display:flex;gap:30px;overflow:auto}.subnav a{padding:16px 0;white-space:nowrap;font-size:14px}.subnav a.active{font-weight:800;color:var(--blue);border-bottom:3px solid var(--cyan)}.icon-bubble{display:flex;width:62px;height:62px;border-radius:50%;background:#dceaff;align-items:center;justify-content:center;font-size:30px;color:var(--navy);margin-bottom:16px}.icon-bubble.cyan{background:#d8faff;color:#00a0cf}.icon-bubble.green{background:#d9f7e8;color:#12945a}.icon-bubble.purple{background:#eee4ff;color:#6d43bd}.icon-bubble.gold{background:#fff0d6;color:#c87a12}.photo-panel{min-height:380px;border-radius:18px;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.insight-tools{display:flex;gap:12px;margin-top:28px;max-width:760px}.insight-tools input,.insight-tools select{padding:13px 15px;border:1px solid #c6dae6;border-radius:9px;background:#fff;color:var(--ink)}.insight-tools input{flex:1}.footer .socials{display:flex;gap:8px;margin-top:16px}.footer .socials a{display:flex;width:34px;height:34px;border:1px solid #4e6ba0;border-radius:50%;align-items:center;justify-content:center;color:#fff;font-weight:800}.footer .socials a:hover{background:var(--blue);border-color:var(--blue)}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.media-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}.media-card img{width:100%;height:150px;object-fit:cover;border-radius:9px}.media-card strong{font-size:14px}.media-card span{font-size:12px;color:#61708e;text-transform:uppercase;letter-spacing:.08em}.media-card .textlink{font-size:12px;margin-right:5px}@media(max-width:850px){.media-grid{grid-template-columns:1fr}}
.investment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.investment-card{display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:14px;padding:18px}.investment-card h3{font-size:16px;margin:4px 0 6px}.investment-card p{font-size:13px;color:#5a6780;margin:0}.investment-card .icon-bubble{flex:0 0 50px;width:50px;height:50px;font-size:22px;margin:0}.icon-bubble.blue{background:#dceaff;color:var(--navy)}
.do-hero{min-height:360px;background:linear-gradient(90deg,rgba(255,249,237,.97),rgba(255,249,237,.62)),url('assets/community-generated.png') center/cover}.do-hero .container{min-height:360px;display:flex;align-items:center}.do-hero h1{font-size:clamp(42px,5vw,68px);color:var(--navy)}.do-hero p{font-size:18px;max-width:540px;color:#394973;margin:18px 0}.program-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.program-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 6px 18px rgba(7,26,99,.05)}.program-image{height:122px;border-radius:9px;background-size:cover;background-position:center;position:relative}.program-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#078ee0;color:#fff;font-size:21px;font-weight:800}.program-image .program-icon{position:absolute;left:12px;bottom:-18px;border:4px solid #fff}.program-card h3{font-size:16px;margin:24px 6px 6px}.program-card p{font-size:13px;color:#5b6780;margin:0 6px 10px}.program-card .textlink{font-size:13px;margin:0 6px 8px;display:block}.involvement{display:grid;grid-template-columns:.7fr 1.3fr;gap:40px}.donation-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.donation-card{padding:16px;border-radius:13px;border:1px solid var(--line)}.donation-card h3{font-size:15px;margin:8px 0}.donation-card p{font-size:13px;color:#596582}.donation-card .btn{font-size:12px;padding:9px 12px}.pink{background:#fff0f3}.bluecard{background:#eff8ff}.greencard{background:#effaf1}.purplecard{background:#faf0ff}.report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.report-grid article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}.report-thumb{height:90px;border-radius:8px;background:url('assets/community-generated.png') center/cover}.report-grid h3{font-size:15px;margin:10px 0}.report-grid .textlink{font-size:12px}@media(max-width:850px){.program-grid,.report-grid{grid-template-columns:repeat(2,1fr)}.involvement{grid-template-columns:1fr}.donation-grid{grid-template-columns:1fr}}@media(max-width:520px){.program-grid,.report-grid{grid-template-columns:1fr}}
.team-hero{min-height:320px;background:linear-gradient(90deg,rgba(7,26,99,.97),rgba(7,26,99,.7)),url('assets/hero-generated.png') center/cover;color:#fff}.team-hero .container{min-height:320px;display:flex;align-items:center}.team-hero h1{font-size:clamp(42px,5vw,68px)}.team-hero h1 span{color:#12baf0}.team-hero p{font-size:18px;max-width:700px;color:#e4efff;margin:18px 0}.team-layout{display:grid;grid-template-columns:1fr 300px;gap:28px}.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.team-card{border:1px solid var(--line);border-radius:14px;padding:14px;position:relative;background:#fff}.team-avatar{height:132px;border-radius:10px;background:linear-gradient(135deg,#dceeff,#0a7fca);display:flex;align-items:center;justify-content:center;color:#fff;font:800 34px Manrope;margin-bottom:14px}.team-card h3{font-size:15px}.team-card p{font-size:13px;color:#596582}.team-linkedin{display:flex;width:25px;height:25px;border-radius:4px;background:#0876b9;color:#fff;align-items:center;justify-content:center;font-weight:800}.social-panel{background:#eaf7fc;border-radius:16px;padding:24px;align-self:start}.social-panel h2{font-size:24px;margin:10px 0}.social-panel p{font-size:14px;color:#465576}.social-icons{display:flex;gap:10px;margin:20px 0}.social-icons a{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px}.social-icons .linkedin{background:#1687bd}.social-icons .x{background:#111}.social-icons .instagram{background:linear-gradient(135deg,#f7c64b,#cc2b8c)}.social-icons .facebook{background:#1877f2}.social-note{background:#d8f2fc;border-radius:10px;padding:14px;color:#173d73;font-size:13px}.social-coming{border-top:1px solid #c2e0ee;padding-top:14px;color:#1775a8!important}.social-coming small{color:#66738d}.impact-grid{display:grid;grid-template-columns:repeat(3,1fr) 1.5fr;gap:14px}.impact-stat,.impact-chart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.impact-stat strong{display:block;font:800 34px Manrope;color:var(--navy)}.impact-stat span{display:block;color:var(--blue);font-weight:700}.impact-stat p{font-size:13px;color:#596582}.impact-chart h3{font-size:15px}.bars{height:125px;display:flex;align-items:end;gap:18px;border-bottom:1px solid #cddce5;margin:15px 0 8px;padding:0 12px}.bars i{display:block;flex:1;max-width:35px;background:linear-gradient(#14398e,#13b8ed);border-radius:5px 5px 0 0}.impact-chart small{font-size:11px;color:#66738d}.impact-banner{background:var(--navy);color:#fff;padding:22px 0}.impact-banner .container{display:flex;align-items:center;gap:24px}.impact-banner strong{font-size:18px}.impact-banner span{color:#cce0f5;flex:1}.impact-banner .btn{white-space:nowrap}@media(max-width:950px){.team-layout{grid-template-columns:1fr}.team-grid{grid-template-columns:repeat(2,1fr)}.impact-grid{grid-template-columns:repeat(2,1fr)}.impact-banner .container{flex-wrap:wrap}}@media(max-width:520px){.team-grid,.impact-grid{grid-template-columns:1fr}}
.brand img{height:48px;width:auto;object-fit:contain}.subnav .container{scrollbar-width:none}.subnav .container::-webkit-scrollbar{display:none}@media(max-width:850px){.brand img{height:42px}.topbar{height:68px}.nav{top:68px}.do-hero .container,.team-hero .container{min-height:430px}.subnav .container{gap:24px}}
.team-carousel{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:14px;padding:4px 4px 18px;scroll-padding-inline:4px}.team-carousel .team-card{min-width:calc(25% - 11px);min-height:410px;height:auto;display:flex;flex-direction:column;scroll-snap-align:center}.team-carousel .team-card p{flex:1}.team-avatar{overflow:hidden}.team-avatar img{width:100%;height:100%;object-fit:cover}@media(max-width:950px){.team-carousel .team-card{min-width:calc(50% - 7px);min-height:390px}}@media(max-width:520px){.team-carousel .team-card{min-width:85%;min-height:420px}}
.team-carousel{scroll-behavior:smooth}
.container{width:min(1380px,calc(100% - 48px))}.nav{gap:22px}@media(max-width:850px){.container{width:min(100% - 28px,680px)}.nav{gap:0}}
.footer-grid{grid-template-columns:1.25fr repeat(4,minmax(0,1fr));gap:28px;align-items:start}.footer-grid>div{min-width:0}.footer-grid h4{white-space:nowrap}@media(max-width:850px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}@media(max-width:520px){.footer-grid{grid-template-columns:1fr;gap:22px}}
.topbar>.container{width:100%;max-width:none;padding-left:32px;padding-right:32px}.topbar .nav{margin-left:auto;justify-content:flex-end}.topbar .brand{flex:0 0 auto}@media(max-width:850px){.topbar>.container{padding-left:14px;padding-right:14px}}
.about-photo-hero{background:linear-gradient(90deg,rgba(234,250,255,.98) 0%,rgba(234,250,255,.9) 43%,rgba(234,250,255,.35) 100%),url('assets/hero-generated.png') center/cover no-repeat}
.arm-switcher{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:9px 24px;background:#07145c;color:#fff;font-size:12px}.arm-switcher span{opacity:.72;margin-right:auto}.arm-switcher a{color:#fff;text-decoration:none;font-weight:700}.arm-switcher a:hover{text-decoration:underline}@media(max-width:720px){.arm-switcher{justify-content:flex-start;overflow:auto;white-space:nowrap;padding:9px 16px}.arm-switcher span{margin-right:4px}}
.admin{width:100%;overflow-x:hidden}.admin-layout{min-width:0}.admin-side{min-width:0}.admin-main{min-width:0;overflow:hidden}.admin-table{overflow-x:auto}.admin-table table{min-width:680px}.admin-table details{min-width:180px}.admin-side button{font-size:14px}@media(max-width:850px){.admin-layout{display:block}.admin-side{padding:18px 14px;max-height:none}.admin-side img{display:block;width:150px;margin:0 auto 16px}.admin-side button{display:inline-flex;width:auto;margin:3px;padding:10px 12px}.admin-side>a{margin:18px 8px!important}.admin-main{padding:22px 14px}.admin-top{margin-bottom:18px}.admin-top h1{font-size:28px}.form-card{width:100%;padding:18px}.form-row{grid-template-columns:1fr}.field input,.field textarea,.field select{max-width:100%}}@media(max-width:520px){.admin-side button{display:flex;width:100%;margin:2px 0}.admin-main{padding:18px 10px}.admin-stat{padding:16px}.admin-table th,.admin-table td{padding:11px 12px}.toast{left:12px;right:12px;bottom:14px;text-align:center}}
/* Branded first-load screen */
#site-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#07185f;transition:opacity .35s ease,visibility .35s ease}
#site-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.site-loader-inner{display:grid;justify-items:center;gap:18px;color:#fff;font-size:13px;letter-spacing:.08em;text-align:center}
.site-loader-inner img{width:min(245px,62vw);max-height:92px;object-fit:contain;filter:brightness(0) invert(1);animation:loader-logo-in .55s ease both}
.site-loader-inner span{opacity:.82}
@keyframes loader-logo-in{from{opacity:0;transform:scale(.94) translateY(5px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){#site-loader{transition:none}.site-loader-inner img{animation:none}}
.admin-layout{align-items:start}.admin-side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3561bd #071a63}.admin-side::-webkit-scrollbar{width:7px}.admin-side::-webkit-scrollbar-track{background:#071a63}.admin-side::-webkit-scrollbar-thumb{background:#3561bd;border-radius:10px}.admin-main{min-height:100vh}
@media(max-width:850px){.admin-side{position:relative;top:auto;align-self:stretch;height:auto;max-height:52vh;overflow-y:auto}}
.admin-layout{display:block}.admin-side{position:fixed;z-index:20;left:0;top:0;bottom:0;width:230px;height:100vh}.admin-main{margin-left:230px;min-height:100vh}
@media(max-width:850px){.admin-layout{display:block}.admin-side{position:relative;left:auto;top:auto;bottom:auto;width:100%;height:auto;max-height:52vh}.admin-main{margin-left:0}}
/* Mobile and tablet image/layout tuning */
.hero,.do-hero,.dco-hero,.team-hero{background-position:center center;background-repeat:no-repeat;background-size:cover}.hero-art,.hero-panel,.photo-panel,.program-image,.report-thumb,.team-avatar{overflow:hidden}.hero-art img,.hero-panel img,.photo-panel img,.program-image img,.report-thumb img,.team-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.team-avatar img{object-position:50% 25%}.media-card img{aspect-ratio:16/10;height:auto;object-fit:cover;object-position:center}.dco-hero .container,.do-hero .container,.team-hero .container{padding-top:44px;padding-bottom:44px}@media(max-width:950px){.topbar>.container{gap:14px}.brand img{max-width:180px}.nav{gap:18px}.hero .container{gap:24px}.hero-art{min-height:280px}.program-grid,.report-grid{gap:16px}.team-grid{gap:16px}.team-card .team-avatar{height:180px}.photo-panel{min-height:300px}.footer-grid{gap:24px}}@media(max-width:700px){.topbar>.container{height:68px}.brand img{max-width:155px}.hero{background-position:62% center}.hero .container{display:block;padding-top:42px;padding-bottom:35px}.hero h1,.do-hero h1,.dco-hero h1,.team-hero h1{font-size:clamp(36px,10vw,52px);line-height:1.04}.hero p,.do-hero p,.dco-hero p,.team-hero p{font-size:16px}.hero-art{height:230px;min-height:230px;margin-top:26px}.hero-panel{height:215px;transform:none}.hero-panel:before{font-size:150px}.do-hero .container,.dco-hero .container,.team-hero .container{min-height:0;padding-top:55px;padding-bottom:55px}.dco-hero,.do-hero,.team-hero{background-position:center}.section-head{gap:16px}.section-head .textlink{margin-top:4px}.team-layout{gap:18px}.team-card .team-avatar{height:150px}.social-panel{padding:20px}.impact-grid{gap:12px}.impact-stat,.impact-chart{padding:16px}.impact-stat strong{font-size:28px}.impact-banner .container{align-items:flex-start;gap:14px}.impact-banner strong{font-size:16px}.impact-banner span{font-size:14px}.admin-main{padding-top:20px}.admin-top h1{font-size:30px}.form-card{max-width:none}.program-image{height:170px}.report-thumb{height:130px}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.brand img{max-width:140px}.hero-art{height:205px;min-height:205px}.hero-panel{height:190px;padding:22px}.hero-panel h3{font-size:23px}.hero-panel .mini{left:22px;right:22px;bottom:20px;font-size:10px}.do-hero .container,.dco-hero .container,.team-hero .container{padding-top:42px;padding-bottom:42px}.team-card .team-avatar{height:180px}.program-image{height:155px}.report-thumb{height:120px}.footer-grid{grid-template-columns:1fr}.footer img{width:170px}.actions .btn{width:100%;justify-content:center}.admin-side{max-height:45vh}.site-loader-inner{gap:13px}.site-loader-inner img{width:min(210px,70vw)}.site-loader-inner span{font-size:11px}.media-grid{grid-template-columns:1fr}}
/* Final responsive polish */
html{scroll-padding-top:86px;scrollbar-gutter:stable}body{overflow-x:hidden}img{max-width:100%;height:auto}a,button,input,textarea,select{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(16,184,239,.55);outline-offset:3px}.subnav .container,.team-carousel{overscroll-behavior-x:contain}.card,.program-card,.team-card,.report-grid article{overflow-wrap:anywhere}.field input,.field textarea,.field select{width:100%;min-width:0}.admin-main{overflow-x:hidden}.admin-side{scroll-behavior:smooth}.admin-table{max-width:100%;-webkit-overflow-scrolling:touch}.media-grid{min-width:0}.btn{min-height:44px}.textlink{display:inline-block;min-height:28px}@media(max-width:520px){.container{width:calc(100% - 24px)}.section{padding:44px 0}.section-head h2{font-size:30px}.bigcopy{font-size:17px}.contact{padding:28px 22px}.contact h2{font-size:28px}.footer-bottom{gap:12px;flex-direction:column}.admin-top span{font-size:13px}.admin-side{max-height:52vh}.admin-side img{width:135px}.form-card{border-radius:12px;padding:16px}.admin-table table{min-width:620px}}
/* Responsive hero card: keep copy readable and preserve the background image on small screens. */
@media (max-width: 950px) {
  .hero-art { min-height: 330px; height: auto; align-items: center; padding: 18px 0; }
  .hero-panel { height: auto; min-height: 285px; padding: 30px 32px 26px; transform: rotate(1deg); }
  .hero-panel h3 { max-width: 290px; font-size: clamp(25px, 4vw, 32px); line-height: 1.08; }
  .hero-panel p { max-width: 300px; font-size: 17px; line-height: 1.45; }
  .hero-panel .mini { position: relative; left: auto; right: auto; bottom: auto; margin-top: 24px; padding-top: 14px; line-height: 1.35; }
}
@media (max-width: 700px) {
  .hero-art { min-height: 285px; margin-top: 22px; padding: 12px 4px; }
  .hero-panel { width: min(100%, 390px); min-height: 255px; padding: 25px 24px 22px; transform: none; border-radius: 22px; }
  .hero-panel h3 { max-width: 250px; font-size: clamp(25px, 8vw, 32px); }
  .hero-panel p { max-width: 275px; margin: 17px 0 0; font-size: 16px; }
  .hero-panel .mini { margin-top: 20px; font-size: 10px; letter-spacing: .08em; }
}

/* Keep tablet-sized admin screens in the fixed-sidebar layout after mobile
   rules are parsed. */
@media (min-width: 521px) and (max-width: 850px) {
  .admin-side:not(.mobile-open) { height: 100vh !important; max-height: none !important; overflow-y: auto !important; padding: 26px 18px !important; }
  .admin-side:not(.mobile-open) > img { display: block !important; width: 170px !important; margin: 5px 10px 35px !important; }
  .admin-side:not(.mobile-open) > button:not(.admin-mobile-toggle), .admin-side:not(.mobile-open) > a { display: flex !important; width: 100% !important; }
  .admin-side > .admin-mobile-toggle { display: none !important; }
}

/* Image presentation polish: preserve faces, keep cards balanced, and avoid
   empty/awkward crops on responsive layouts. */
.team-card .team-avatar,
.program-card .program-image,
.report-thumb,
.media-card img {
  background: #e9f5fb;
  position: relative;
}
.team-card .team-avatar img { object-position: 50% 22%; }
.program-card .program-image { aspect-ratio: 4 / 3; height: auto; background-size: cover; background-position: center center; }
.program-card .program-image::after,
.report-thumb::after,
.media-card img::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7,26,99,0) 58%, rgba(7,26,99,.16));
}
.report-thumb { aspect-ratio: 16 / 9; height: auto; background-position: center; }
.photo-panel { aspect-ratio: 4 / 3; min-height: 0; background-position: 50% 35%; }
.hero, .dco-hero, .do-hero, .team-hero { background-position: 65% center; }
@media (max-width: 700px) {
  .hero, .dco-hero, .do-hero, .team-hero { background-position: 68% center; }
  .program-card .program-image { aspect-ratio: 4 / 3; }
  .team-card .team-avatar { aspect-ratio: 4 / 3; height: auto; }
  .photo-panel { aspect-ratio: 16 / 10; }
}
/* Final visual polish: use the natural documentary background and give carousel cards breathing room. */
.hero { background-image: linear-gradient(110deg,#edfaff 0%,#fff 45%,#d8f1fb 100%); }
body[data-route="home"] .hero { background-image: linear-gradient(90deg,rgba(234,250,255,.96) 0%,rgba(234,250,255,.84) 42%,rgba(234,250,255,.18) 100%),url('assets/hero-realistic.png') !important; background-position:center; background-size:cover; }
body[data-route="contact"] .section.alt:first-of-type { background-image: linear-gradient(90deg,rgba(234,250,255,.96) 0%,rgba(234,250,255,.82) 42%,rgba(234,250,255,.28) 100%),url('assets/hero-realistic.png'); background-size:cover; background-position:center; }
body[data-route="our-work"] .hero,body[data-route="insights"] .hero { background-image: linear-gradient(90deg,rgba(234,250,255,.96) 0%,rgba(234,250,255,.78) 38%,rgba(7,26,99,.12) 100%),url('assets/hero-realistic.png'); }
body[data-route="our-work"] .section.alt:first-of-type { background-image: linear-gradient(90deg,rgba(234,250,255,.96) 0%,rgba(234,250,255,.78) 38%,rgba(7,26,99,.12) 100%),url('assets/our-work-hero-realistic.png'); background-size:cover; background-position:center; }
body[data-route="insights"] .section.alt:first-of-type { background-image: linear-gradient(90deg,rgba(234,250,255,.96) 0%,rgba(234,250,255,.78) 38%,rgba(7,26,99,.12) 100%),url('assets/insights-hero-realistic.png'); background-size:cover; background-position:center; }
.about-photo-hero { background-image: linear-gradient(90deg,rgba(234,250,255,.96) 0%,rgba(234,250,255,.78) 38%,rgba(7,26,99,.12) 100%),url('assets/about-hero-realistic.png'); background-position:center; background-size:cover; }
.team-hero { background-image: linear-gradient(90deg,rgba(7,26,99,.94),rgba(7,26,99,.58)),url('assets/hero-realistic.png'); }
.team-hero { background-image: linear-gradient(90deg,rgba(7,26,99,.96) 0%,rgba(7,26,99,.78) 42%,rgba(7,26,99,.18) 100%),url('assets/team-sample.png'); }
@media (min-width: 951px) { .team-carousel .team-card { min-width: calc(23% - 11px); } }
@media (min-width: 701px) and (max-width: 950px) { .team-carousel .team-card { min-width: calc(46% - 7px); } }
@media (max-width: 380px) {
  .hero-panel { min-height: 235px; padding: 22px 20px 18px; }
  .hero-panel h3 { font-size: 24px; }
  .hero-panel p { font-size: 15px; }
  .hero-panel .mini { margin-top: 15px; font-size: 9px; }
}

@media (min-width: 521px) and (max-width: 850px) {
  .admin-side:not(.mobile-open) { height: 100vh !important; max-height: none !important; overflow-y: auto !important; padding: 26px 18px !important; }
  .admin-side:not(.mobile-open) > img { display: block !important; width: 170px !important; margin: 5px 10px 35px !important; }
  .admin-side:not(.mobile-open) > button:not(.admin-mobile-toggle), .admin-side:not(.mobile-open) > a { display: flex !important; width: 100% !important; }
  .admin-side > .admin-mobile-toggle { display: none !important; }
}

/* Tablet / resized desktop: preserve the two-column admin workspace. The
   collapsible drawer is reserved for genuinely narrow phone widths. */
@media (min-width: 521px) and (max-width: 850px) {
  .admin-layout { display: block !important; }
  .admin-side { position: fixed !important; left: 0; top: 0; bottom: 0; width: 230px !important; height: 100vh !important; max-height: none !important; overflow-y: auto !important; padding: 26px 18px !important; }
  .admin-side:not(.mobile-open) { height: 100vh !important; max-height: none !important; overflow-y: auto !important; padding: 26px 18px !important; }
  .admin-side:not(.mobile-open) > img, .admin-side.mobile-open > img { display: block !important; width: 170px !important; margin: 5px 10px 35px !important; }
  .admin-side:not(.mobile-open) > button:not(.admin-mobile-toggle), .admin-side.mobile-open > button:not(.admin-mobile-toggle), .admin-side:not(.mobile-open) > a, .admin-side.mobile-open > a { display: flex !important; width: 100% !important; }
  .admin-side > .admin-mobile-toggle { display: none !important; }
  .admin-main { margin-left: 230px !important; min-height: 100vh; padding: 28px 24px !important; }
}

/* Compact mobile admin drawer: keep navigation usable without pushing the
   workspace far below the fold when the menu is expanded. */
@media (max-width: 700px) {
  .admin-side.mobile-open { max-height: min(70vh, 470px) !important; padding: 10px !important; }
  .admin-side.mobile-open > img { display: none !important; }
  .admin-mobile-toggle { position: sticky; top: 0; z-index: 2; min-height: 48px; margin: 0 0 8px !important; border: 1px solid rgba(85,208,255,.55); }
  .admin-side.mobile-open > button:not(.admin-mobile-toggle),
  .admin-side.mobile-open > a { min-height: 42px; margin: 2px 0; padding: 10px 12px; }
}

.footer-sign-in a { color: #d9e6fa; font-weight: 700; }
@media (min-width: 951px) { .footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr); } }

/* Brand visibility: larger, crisp logo treatment across public and admin surfaces. */
.brand img { height: 58px; width: auto; max-width: 230px; object-fit: contain; }
.footer img { width: 230px; max-width: 100%; height: auto; }
.arm img { height: 76px; max-width: 210px; }
.arm img { height: 150px; max-width: 390px; width: auto; object-fit: contain; object-position: left center; }
@media (max-width: 700px) { .arm img { height: 125px; max-width: 340px; } }
.admin-side img { width: 190px; max-width: 100%; }
@media (max-width: 700px) {
  .brand img { height: 50px; max-width: 180px; }
  .footer img { width: 200px; }
  .arm img { height: 68px; max-width: 190px; }
  .admin-side img { width: 175px; }
}
/* On narrow screens, a horizontal carousel makes the whole page overflow and clips copy.
   Present the team as readable stacked cards; keep carousel behaviour for larger screens. */
@media (max-width: 700px) {
  .team-carousel { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; }
  .team-carousel .team-card { width: 100% !important; min-width: 0 !important; max-width: 100% !important; scroll-snap-align: none; }
  .team-card h3, .team-card .tag, .team-card p { overflow-wrap: anywhere; word-break: normal; }
  .team-layout, .team-layout > *, .social-panel { min-width: 0; max-width: 100%; }
  .social-panel h2, .social-panel p, .social-note { overflow-wrap: anywhere; }
  .social-icons { flex-wrap: wrap; }
}

/* Mobile UAT hardening across public pages and the admin workspace. */
.admin-mobile-toggle { display: none; }
@media (max-width: 700px) {
  html, body, #app { max-width: 100%; overflow-x: hidden; }
  .container { width: calc(100% - 28px); }
  .topbar { height: 68px; }
  .topbar > .container { width: calc(100% - 24px); }
  .brand img { max-width: 142px; }
  .nav.open { max-height: calc(100vh - 68px); overflow-y: auto; }
  .nav a { min-height: 44px; display: flex; align-items: center; }
  .hero h1, .dco-hero h1, .do-hero h1, .team-hero h1 { letter-spacing: -.035em; }
  .hero p, .dco-hero p, .do-hero p, .team-hero p { line-height: 1.55; }
  .hero-panel { width: 100%; max-width: 430px; margin-inline: auto; }
  .section-head h2, .contact h2 { line-height: 1.12; overflow-wrap: anywhere; }
  .arms, .pillars, .portfolio, .stats, .donation-grid, .involvement,
  .team-layout, .impact-grid { min-width: 0; }
  .card, .program-card, .team-card, .report-grid article, .arm, .stat { min-width: 0; }
  .card h3, .card p, .program-card h3, .program-card p, .team-card h3,
  .team-card .tag, .team-card p, .report-grid h3 { overflow-wrap: anywhere; }
  .form-row { gap: 0; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .contact { width: 100%; }
  .footer-bottom { overflow-wrap: anywhere; }
  .subnav .container { width: 100%; padding-inline: 14px; }
  .admin-side { max-height: 48vh; overflow-y: auto; overscroll-behavior: contain; }
  .admin-main { overflow-x: hidden; }
  .admin-top span { overflow-wrap: anywhere; }
  .admin-table { width: 100%; overflow-x: auto; }
  .admin-table table { min-width: 600px; }
  .admin-table th, .admin-table td { white-space: normal; }
  .builder-section { min-width: 0; overflow: hidden; }
  .admin-mobile-toggle { display: flex !important; width: 100%; align-items: center; justify-content: space-between; background: #12358b !important; color: #fff !important; font-weight: 800; font-size: 16px !important; padding: 13px 14px !important; margin: 0 0 8px !important; }
  .admin-mobile-toggle b { font-size: 23px; line-height: 1; }
  .admin-side:not(.mobile-open) { max-height: 76px !important; height: 76px; overflow: hidden !important; padding: 10px !important; }
  .admin-side:not(.mobile-open) > img { display: none !important; }
  .admin-side.mobile-open { max-height: 70vh !important; overflow-y: auto !important; }
  .admin-side:not(.mobile-open) > button:not(.admin-mobile-toggle), .admin-side:not(.mobile-open) > a { display: none !important; }
  .admin-side.mobile-open > button:not(.admin-mobile-toggle), .admin-side.mobile-open > a { display: flex; }
}

@media (max-width: 380px) {
  .container { width: calc(100% - 22px); }
  .hero-panel { padding: 20px 18px; }
  .hero-panel h3 { font-size: 21px; }
  .hero-panel p { font-size: 14px; }
  .hero-panel .mini { left: 18px; right: 18px; font-size: 8px; letter-spacing: .06em; }
  .section { padding: 38px 0; }
  .section-head h2 { font-size: 28px; }
  .admin-main { padding-inline: 8px; }
  .admin-side { padding-inline: 10px; }
}

/* Larger brand mark for desktop and resized tablet layouts. */
.brand img { height: 72px; max-width: 270px; }
.topbar { height: 90px; }
.nav a { padding-top: 35px; padding-bottom: 35px; }
@media (max-width: 950px) {
  .brand img { height: 82px; max-width: 280px; }
  .topbar { height: 96px; }
  .nav { top: 96px; }
}
@media (max-width: 520px) {
  .brand img { height: 62px; max-width: 220px; }
  .topbar { height: 78px; }
  .nav { top: 78px; }
}

/* Tablet admin keeps a fixed sidebar; only narrow phones use the drawer. */
@media (min-width: 521px) and (max-width: 850px) {
  .admin-side:not(.mobile-open) { height: 100vh !important; max-height: none !important; overflow-y: auto !important; padding: 26px 18px !important; }
  .admin-side:not(.mobile-open) > img { display: block !important; width: 170px !important; margin: 5px 10px 35px !important; }
  .admin-side:not(.mobile-open) > button:not(.admin-mobile-toggle), .admin-side:not(.mobile-open) > a { display: flex !important; width: 100% !important; }
  .admin-side > .admin-mobile-toggle { display: none !important; }
}
/* Brand colour treatment: keep the official navy/cyan logo visible in the footer and loader. */
.footer{background:linear-gradient(135deg,#f4fbff 0%,#e8f7fc 100%);color:var(--navy);border-top:1px solid #cfeaf4}
.footer img{filter:none;background:#fff;border-radius:10px;padding:10px;width:230px;box-shadow:0 10px 24px rgba(7,26,99,.08)}
.footer h4{color:var(--navy)}
.footer a,.footer p{color:#42577c}
.footer a:hover{color:var(--blue)}
.footer-bottom{border-top-color:#c5dfe9;color:#647b9d}
#site-loader{background:linear-gradient(135deg,#f4fbff 0%,#dff4fb 100%)}
.site-loader-inner{color:var(--navy)}
.site-loader-inner img{filter:none;background:#fff;border-radius:12px;padding:12px;box-shadow:0 12px 30px rgba(7,26,99,.12)}
.site-loader-inner span{color:#42577c}
.footer-community a{display:block;color:#d9e6fa;margin-top:10px;font-size:14px}.footer-community h4{color:#fff;margin-bottom:12px}@media (min-width:951px){.footer-grid{grid-template-columns:1.2fr repeat(5,minmax(0,1fr));gap:22px}}
.footer{padding:28px 0 16px}.footer-grid{grid-template-columns:1.25fr repeat(5,minmax(0,1fr));gap:18px;align-items:start}.footer-grid>div{min-width:0}.footer img{width:180px;padding:8px;margin-bottom:8px}.footer h4{margin-bottom:7px}.footer a,.footer p{margin:4px 0;font-size:13px;line-height:1.35}.footer-bottom{margin-top:20px;padding-top:12px}@media(max-width:850px){.footer-grid{grid-template-columns:1fr 1fr;gap:22px}}@media(max-width:520px){.footer-grid{grid-template-columns:1fr;gap:18px}}
.footer{padding:20px 0 10px}.footer img{width:150px;padding:6px;margin-bottom:5px}.footer-bottom{margin-top:14px;padding-top:9px}
.footer{padding:20px 0 10px}.footer img{width:150px;padding:6px;margin-bottom:5px}.footer-bottom{margin-top:14px;padding-top:9px}
.footer{padding:20px 0 10px}.footer img{width:150px;padding:6px;margin-bottom:5px}.footer-bottom{margin-top:14px;padding-top:9px}
@media(min-width:951px){.footer-grid{grid-template-columns:1.35fr repeat(5,minmax(0,1fr))!important;gap:14px!important}.footer-grid h4{font-size:14px!important;white-space:nowrap}.footer-grid a,.footer-grid p{font-size:12px!important;line-height:1.3!important;margin:4px 0!important}}
@media(min-width:951px){.footer-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media(min-width:851px){.footer-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px!important}}