/* Monika Nareyka Stiftung · responsive portal · October 2026 */
:root {
  --navy:#0f1d2b; --navy2:#1c3141; --ivory:#f4f0e7; --paper:#fbfaf6;
  --gold:#d8c7a5; --gold-ink:#78613a; --ink:#182329; --muted:#53616a; --line:#ddd6c7;
  --serif:'Iowan Old Style','Palatino Linotype','Book Antiqua',Baskerville,Georgia,serif;
  --sans:'Aptos','Segoe UI','Helvetica Neue',Arial,sans-serif;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:112px }
body { margin:0; background:var(--paper); color:var(--ink); font:400 1rem/1.75 var(--sans) }
img { display:block; max-width:100% }
a { color:inherit; text-decoration:none; text-underline-offset:.22em }
button { font:inherit }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation }
button,a.btn { cursor:pointer }
p { margin:0 0 1.15em }
p:last-child { margin-bottom:0 }
h1,h2,h3,blockquote { text-wrap:balance; overflow-wrap:break-word }
h1,h2,h3 { hyphens:auto }
main:focus { outline:none }
main [id] { scroll-margin-top:20px }
:focus-visible { outline:3px solid var(--gold-ink); outline-offset:5px }
.navy :focus-visible,.hero :focus-visible,.subhero :focus-visible,.site-footer :focus-visible { outline-color:var(--gold) }
.container { width:min(1160px,calc(100% - 48px)); margin-inline:auto }
.container>*,article>*,[class*='grid']>* { min-width:0 }
.eyebrow { color:var(--gold-ink); font-size:.73rem; font-weight:600; letter-spacing:.2em; line-height:1.6; text-transform:uppercase }
.navy .eyebrow,.hero .eyebrow,.subhero .eyebrow { color:var(--gold) }
.lead { font-size:1.1rem; color:var(--muted) }
.navy .lead { color:#d9dfdf }
.skip-link { position:fixed; z-index:1000; top:-100px; left:16px; padding:12px 18px; background:var(--gold); color:var(--navy); font-weight:600 }
.skip-link:focus { top:16px }

/* Navigation */
.site-header { position:fixed; z-index:50; inset:0 0 auto; background:linear-gradient(rgba(15,29,43,.54),transparent); transition:background .2s }
.site-header.scrolled,.site-header.menu-open { background:rgba(244,240,231,.98); border-bottom:1px solid rgba(15,29,43,.13); backdrop-filter:blur(14px) }
.nav { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:22px }
.brand { flex-shrink:0; display:flex; align-items:center; gap:13px }
.mark { width:40px; height:40px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold); font:600 1.05rem var(--serif) }
.brand-text b { display:block; color:white; font-size:.86rem; font-weight:500; letter-spacing:.11em; line-height:1.7 }
.brand-text small { display:block; color:var(--gold); font-size:.63rem; font-weight:500; letter-spacing:.2em }
.navlinks { display:flex; align-items:center; gap:17px; color:white; font-size:.81rem }
.navlinks a { display:flex; align-items:center; min-height:44px; position:relative; white-space:nowrap }
.navlinks a:not(.nav-cta)::after { position:absolute; content:''; bottom:6px; left:0; right:100%; height:1px; background:currentColor; transition:right .2s }
.navlinks a:hover::after,.navlinks a.active::after { right:0 }
.navlinks a.active { font-weight:600 }
.nav-cta { border:1px solid var(--gold); padding:6px 14px }
.nav-cta:hover,.nav-cta.active { background:var(--gold); color:var(--navy) }
.scrolled .brand-text b,.scrolled .navlinks,.menu-open .brand-text b,.menu-open .navlinks { color:var(--navy) }
.scrolled .brand-text small,.menu-open .brand-text small,.scrolled .mark,.menu-open .mark { color:var(--gold-ink) }
.scrolled .mark,.menu-open .mark { border-color:#a38c65 }
.site-header :focus-visible { outline-color:var(--gold) }
.scrolled :focus-visible,.menu-open :focus-visible { outline-color:var(--gold-ink) }
.menu { display:none; width:46px; height:46px; padding:10px; border:1px solid currentColor; color:var(--gold); background:transparent; align-items:center; justify-content:center }
.menu-icon { display:block; width:22px; height:2px; background:currentColor; position:relative; transition:background .2s }
.menu-icon::before,.menu-icon::after { content:''; position:absolute; left:0; width:22px; height:2px; background:currentColor; transition:transform .2s }
.menu-icon::before { transform:translateY(-7px) }
.menu-icon::after { transform:translateY(7px) }
.menu[aria-expanded='true'] .menu-icon { background:transparent }
.menu[aria-expanded='true'] .menu-icon::before { transform:rotate(45deg) }
.menu[aria-expanded='true'] .menu-icon::after { transform:rotate(-45deg) }
.scrolled .menu,.menu-open .menu { color:var(--navy) }

/* Responsive hero photographs */
.hero { min-height:90svh; position:relative; overflow:hidden; display:flex; align-items:center; background:var(--navy); color:white }
.hero-bg { position:absolute; inset:0 }
.hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center 38% }
.hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,29,43,.96),rgba(15,29,43,.8) 35%,rgba(15,29,43,.26) 78%),linear-gradient(0deg,rgba(15,29,43,.96),transparent 50%) }
.hero-content { position:relative; z-index:2; padding-block:172px 96px }
.hero h1 { max-width:920px; margin:18px 0 28px; font:500 clamp(3rem,6.7vw,6.2rem)/1.01 var(--serif); letter-spacing:-.04em; text-wrap:initial }
.hero h1 em,.subhero h1 em { font-style:italic; color:var(--gold) }
.hero p { max-width:680px; color:#e5e6e2; font-size:1.06rem }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:13px 20px; border:1px solid var(--gold); font-size:.77rem; font-weight:600; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; text-align:center; transition:background .2s,color .2s }
.btn.primary { background:var(--gold); color:var(--navy) }
.btn.primary:hover { background:#e4d6bc }
.btn.ghost { color:inherit }
.btn.ghost:hover { background:rgba(216,199,165,.12) }
.dark-btn { color:var(--navy)!important; border-color:var(--navy)!important }
.dark-btn:hover { color:white!important; background:var(--navy)!important }
.subhero { background:var(--navy); color:white }
.subhero.photo-subhero { position:relative; isolation:isolate; min-height:590px; display:flex; align-items:end; padding-block:165px 78px; overflow:hidden }
.subhero-image { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--subhero-position,center 25%) }
.photo-subhero::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(15,29,43,.96),rgba(15,29,43,.82) 45%,rgba(15,29,43,.32) 86%),linear-gradient(0deg,rgba(15,29,43,.82),transparent 65%) }
.subhero h1 { max-width:1030px; margin:12px 0 24px; font:500 clamp(3rem,6.5vw,6rem)/1.02 var(--serif); letter-spacing:-.025em }
.subhero p { max-width:730px; color:#e0e4e1; font-size:1.08rem }
.subhero.photo-subhero.legal-hero { min-height:410px; padding-bottom:58px }
.project-jumps { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px }
.project-jumps a { min-height:44px; padding:9px 18px; border:1px solid rgba(216,199,165,.65); color:var(--gold); font-size:.85rem }
.project-jumps a:hover { background:var(--gold); color:var(--navy) }

/* Sections */
.section { padding-block:96px }
.section.navy { background:var(--navy); color:white }
.section.ivory { background:var(--ivory) }
.section h2 { margin:12px 0 26px; font:500 clamp(2.5rem,4.15vw,4.35rem)/1.07 var(--serif); letter-spacing:-.025em }
.grid-2 { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:66px; align-items:start }
.grid-2>*,.story>*,.engagement-layout>*,.photo-story>*,.media-split>*,.project-detail>*,.contact-premium>* { min-width:0 }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:36px; margin-bottom:38px }
.section-head h2 { margin-bottom:0 }
.text-link { display:inline-block; color:var(--gold-ink); font-size:.78rem; font-weight:600; letter-spacing:.1em; line-height:1.6; text-transform:uppercase; padding-block:10px }
.text-link:hover { text-decoration:underline }
.compact-top { padding-top:44px }
.values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:42px; border-block:1px solid var(--line) }
.value { padding:28px 20px; border-right:1px solid var(--line) }
.value:last-child { border-right:0 }
.value b { display:block; font:600 1.45rem/1.3 var(--serif); color:var(--navy); overflow-wrap:anywhere }
.value small { color:var(--muted); font-size:.84rem }
.pillars { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:44px }
.pillar { padding:28px 24px; background:white; border:1px solid var(--line) }
.pillar .num { color:var(--gold-ink); font-size:.73rem; letter-spacing:.16em }
.pillar h3 { margin:18px 0 14px; font:600 1.65rem/1.15 var(--serif); color:var(--navy) }
.pillar p { font-size:.9rem; color:var(--muted) }
.foundation-trust { background:#f2ede3; border-bottom:1px solid var(--line) }
.trust-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) }
.trust-grid>div { padding:27px 20px; border-right:1px solid var(--line) }
.trust-grid>div:last-child { border-right:0 }
.trust-grid strong { display:block; font:600 1.65rem/1.25 var(--serif); color:var(--navy) }
.trust-grid span { display:block; margin-top:6px; font-size:.7rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted) }

/* Country cards and project details */
.projects { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.project { min-width:0; display:flex; flex-direction:column; overflow:hidden; background:white; border:1px solid var(--line); transition:box-shadow .25s }
.project:hover { box-shadow:0 12px 28px rgba(15,29,43,.09) }
.project .visual { overflow:hidden; aspect-ratio:4/3; background:#e8e1d5 }
.project .visual img { width:100%; height:100%; object-fit:cover; object-position:center 45%; transition:transform .6s ease }
.project:hover .visual img { transform:scale(1.025) }
.project .copy { flex:1; display:flex; flex-direction:column; align-items:start; padding:28px }
.project h3 { margin:7px 0 14px; color:var(--navy); font:600 2.3rem/1.1 var(--serif) }
.project p { font-size:.95rem; color:var(--muted) }
.project .copy>a { margin-top:auto; padding-top:17px; min-height:44px; color:var(--gold-ink); font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase }
.project .copy>a:hover { text-decoration:underline }
.project-detail-list { display:grid; gap:80px }
.project-detail { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:58px; align-items:center }
.project-detail.reverse { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) }
.project-detail.reverse .project-detail-image { order:2 }
.project-detail-image { height:470px; overflow:hidden; border:1px solid var(--line); background:#e7e0d3 }
.project-detail-image img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s }
.project-detail:hover .project-detail-image img { transform:scale(1.025) }
.project-detail h2 { font-size:clamp(2.5rem,3.8vw,3.8rem) }
.project-detail p { color:var(--muted) }
.project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px }
.project-tags span { padding:8px 11px; border:1px solid #d8cfbd; background:#faf7f0; font-size:.76rem; color:#665739 }
.project-contact { margin-top:14px }

/* Personal photographs */
.engagement-section { border-block:1px solid var(--line) }
.engagement-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:58px; align-items:center }
.engagement-mosaic { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto 230px; gap:12px }
.engagement-mosaic figure { margin:0; min-width:0; overflow:hidden; background:#e5ded1 }
.engagement-mosaic .engagement-main { grid-column:1/-1; grid-row:auto }
.engagement-mosaic .engagement-main img { height:auto; object-fit:contain }
.engagement-mosaic img { width:100%; height:100%; object-fit:cover; object-position:center 18%; transition:transform .6s }
.engagement-mosaic figure:hover img { transform:scale(1.025) }
.story { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:center }
.portrait { position:relative; margin:0; aspect-ratio:4/4.6; overflow:hidden; border:1px solid var(--line); box-shadow:0 22px 60px rgba(15,29,43,.1) }
.portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 35% }
.portrait figcaption { position:absolute; left:20px; bottom:20px; padding:9px 12px; background:rgba(15,29,43,.88); color:var(--ivory); font-size:.7rem; letter-spacing:.17em; text-transform:uppercase }
.photo-story { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:58px; align-items:center }
.photo-story-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:12px; align-items:end }
.photo-story-grid>img { width:100%; height:auto; object-fit:contain; object-position:50% 18% }
.photo-story-grid>img:last-child { height:auto }
.navy .photo-story .lead { color:#d9dfdf }
.media-split.foundation { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:60px; align-items:center }
.media-stack { position:relative; min-height:0; padding-bottom:65px }
.media-main { width:90%; height:auto; object-fit:cover; object-position:50% 18%; box-shadow:0 22px 55px rgba(15,29,43,.12) }
.media-small { position:absolute; right:0; bottom:0; width:47%; height:auto; border:7px solid var(--ivory); object-fit:cover; object-position:50% 18%; box-shadow:0 18px 38px rgba(15,29,43,.12) }
.foundation.dark .media-small { border-color:var(--navy) }

/* Values, methods and support */
.quote { max-width:850px; margin:auto; text-align:center }
.quote blockquote { margin:0 0 25px; font:500 clamp(2.2rem,4.4vw,4.4rem)/1.1 var(--serif) }
.quote p { color:#d5dcdb }
.method,.impact-path { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; border:1px solid rgba(216,199,165,.24); background:rgba(216,199,165,.24); margin-top:44px }
.method-item,.impact-path>div { padding:28px 24px; background:var(--navy) }
.method-item b { display:block; color:var(--gold); font:600 1.4rem/1.3 var(--serif); margin-bottom:12px }
.method-item p,.impact-path p { color:#d1d9d7; font-size:.9rem }
.values-large,.reporting-grid,.transparency-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.values-large article,.reporting-grid>div,.transparency-grid article { padding:28px 24px; border:1px solid var(--line); background:white }
.transparency-grid { margin-top:44px }
.values-large span,.impact-path span,.transparency-grid span,.support-grid span,.reporting-grid span { color:var(--gold-ink); font-size:.72rem; letter-spacing:.16em; font-weight:600 }
.impact-path span { color:var(--gold) }
.values-large h3,.impact-path h3,.transparency-grid h3,.support-grid h3,.reporting-grid h3 { margin:16px 0 14px; font:600 1.65rem/1.16 var(--serif); color:var(--navy); overflow-wrap:anywhere }
.values-large p,.transparency-grid p,.support-grid p,.reporting-grid p { font-size:.9rem; color:var(--muted) }
.impact-path h3 { color:var(--gold) }
.principles,.support-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.principles>div,.support-grid article { padding:30px; background:white; border:1px solid var(--line) }
.principles h3 { margin:0 0 14px; font:600 1.55rem/1.15 var(--serif); color:var(--navy) }
.principles p { color:var(--muted); font-size:.93rem }
.support-grid article { display:flex; flex-direction:column; align-items:start }
.support-grid a { display:inline-block; margin-top:auto; padding-top:18px; color:var(--gold-ink); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; min-height:44px }
.support-grid a:hover { text-decoration:underline }
.support-note { max-width:850px; margin:auto; padding:36px; border:1px solid var(--line); background:white }
.support-note h3 { margin:0 0 18px; font:600 2rem/1.15 var(--serif); color:var(--navy) }
.support-note p { color:var(--muted) }
.impact-hero { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:40px; border-block:1px solid var(--line) }
.impact-hero>div { padding:26px 24px; border-right:1px solid var(--line) }
.impact-hero>div:last-child { border-right:0 }
.impact-hero strong { display:block; font:600 2.5rem/1.2 var(--serif); color:var(--navy) }
.impact-hero span { display:block; margin-top:8px; font-size:.73rem; line-height:1.6; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.transparency-contact { border-left:1px solid rgba(216,199,165,.4); padding-left:36px }
.transparency-contact p { color:#dce1de }
.transparency-contact a { text-decoration:underline }
.cta { padding-block:85px; background:#c9b794; color:var(--navy); text-align:center }
.cta .eyebrow { margin-bottom:18px; color:#493e2d }
.cta h2 { max-width:960px; margin:0 auto 30px; font:500 clamp(2.6rem,5.5vw,5.4rem)/1.06 var(--serif); letter-spacing:-.025em }

/* Contact and legal */
.contact-premium { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:62px; align-items:start }
.contact-lines { display:grid; gap:8px; margin:24px 0 30px }
.contact-lines a { color:var(--gold-ink); font:500 1.3rem/1.5 var(--serif); padding-block:6px; overflow-wrap:anywhere }
.contact-lines a:hover { text-decoration:underline }
.contact-image { height:320px; overflow:hidden; margin-top:28px }
.contact-image img { width:100%; height:100%; object-fit:cover; object-position:center 30% }
.form-panel { padding:38px; background:white; border:1px solid var(--line); color:var(--navy) }
.form-panel h3 { margin:12px 0 24px; font:600 2.3rem/1.15 var(--serif) }
.form-note { margin-top:20px; font-size:.85rem; color:var(--muted) }
.legal-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:62px; align-items:start }
.legal-nav { position:sticky; top:118px; display:grid; gap:5px; padding-left:18px; border-left:1px solid var(--line) }
.legal-nav strong { margin-bottom:8px; color:var(--navy); font:600 1.35rem var(--serif) }
.legal-nav a { padding-block:7px; color:var(--muted); font-size:.86rem }
.legal-nav a:hover { color:var(--gold-ink); text-decoration:underline }
.legal-content { max-width:780px; min-width:0 }
.legal-content section { margin-bottom:30px; padding-bottom:34px; border-bottom:1px solid var(--line) }
.legal-content h2 { font-size:clamp(2.25rem,3.3vw,3.5rem) }
.legal-content h3 { margin:24px 0 12px; color:var(--navy); font:600 1.65rem/1.2 var(--serif) }
.legal-content p { color:var(--muted) }
.legal-content a { text-decoration:underline; text-decoration-color:#a0885d; overflow-wrap:anywhere }
.legal-note { padding:24px 28px; background:#eae4d8; border-left:3px solid #a58b5b; color:var(--muted) }
.legal-note strong { color:var(--navy) }
.legal-note p { font-size:.88rem }

/* Footer */
.site-footer { padding:64px 0 30px; background:#0c1722; color:white }
.footer-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr); gap:55px }
.footer-grid h4 { margin:5px 0 20px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--gold) }
.footer-grid p { margin-top:20px; color:#c5cecd; font-size:.9rem }
.footer-grid p a { display:inline-block; padding-block:4px }
.footer-grid a:hover { text-decoration:underline }
.footer-grid .brand:hover { text-decoration:none }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:42px; padding-top:22px; border-top:1px solid rgba(216,199,165,.25); color:#b1bebd; font-size:.8rem }
.footer-bottom a { display:inline-block; padding-block:8px }
.footer-bottom a:hover { text-decoration:underline }

/* Progressive enhancement */
.reveal { opacity:1; transform:none; transition:opacity .6s ease,transform .6s ease }
.reveal.reveal-pending { opacity:0; transform:translateY(18px) }
.reveal.visible,.reveal:focus-within,.reveal:target { opacity:1; transform:none }

@media(max-width:1100px) {
  .nav { gap:16px }
  .navlinks { gap:12px; font-size:.77rem }
  .brand-text b { font-size:.8rem }
  .brand { gap:10px }
  .pillars,.values-large,.reporting-grid,.transparency-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:980px) {
  .nav { min-height:78px; flex-wrap:wrap }
  .navigation-ready .nav { flex-wrap:nowrap }
  .navigation-ready .menu { display:flex; margin-left:auto }
  .navigation-ready .navlinks { display:none }
  .navigation-ready .navlinks.open { display:grid; position:absolute; left:0; right:0; top:100%; padding:18px 24px 24px; max-height:calc(100svh - 78px); overflow-y:auto; gap:2px; background:var(--ivory); color:var(--navy); border-bottom:1px solid var(--line); box-shadow:0 12px 18px rgba(15,29,43,.08) }
  .navlinks.open a { min-height:46px; padding:9px 12px; font-size:.95rem }
  .navlinks.open a:not(.nav-cta)::after { display:none }
  .navlinks.open a.active { background:#e8e0d0 }
  .navlinks.open .nav-cta { margin-top:9px; justify-content:center }
  body:not(.navigation-ready) .site-header { position:static; background:var(--navy) }
  body:not(.navigation-ready) .nav { padding-block:20px }
  body:not(.navigation-ready) .navlinks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; font-size:.85rem; gap:5px 20px }
  body:not(.navigation-ready) .navlinks a { white-space:normal }
  .grid-2,.story,.engagement-layout,.photo-story,.media-split.foundation,.project-detail,.project-detail.reverse,.contact-premium { grid-template-columns:minmax(0,1fr); gap:40px }
  .section { padding-block:76px }
  .compact-top { padding-top:38px }
  .hero { min-height:760px }
  .hero-content { padding-block:152px 76px }
  .hero h1 { font-size:clamp(3rem,7.8vw,5.6rem) }
  .subhero.photo-subhero { min-height:560px; padding-block:152px 66px }
  .subhero h1 { font-size:clamp(3rem,7.8vw,5.5rem) }
  .values,.trust-grid,.method,.impact-path { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .value:nth-child(2),.trust-grid>div:nth-child(2) { border-right:0 }
  .value:nth-child(-n+2),.trust-grid>div:nth-child(-n+2) { border-bottom:1px solid var(--line) }
  .projects { grid-template-columns:minmax(0,1fr); gap:24px }
  .project { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) }
  .project .visual { aspect-ratio:auto; min-height:290px }
  .project .copy { padding:30px }
  .project-detail-image { height:auto; aspect-ratio:4/3 }
  .project-detail.reverse .project-detail-image { order:0 }
  .project-detail-list { gap:62px }
  .engagement-mosaic { grid-template-rows:auto 260px }
  .portrait { max-width:600px; width:100%; aspect-ratio:5/4 }
  .photo-story-grid>img,.photo-story-grid>img:last-child { height:auto; object-fit:contain }
  .media-stack { max-width:720px }
  .principles,.support-grid { grid-template-columns:minmax(0,1fr) }
  .support-grid article { padding:30px }
  .transparency-contact { padding-left:0; border-left:0 }
  .legal-layout { grid-template-columns:minmax(0,1fr); gap:38px }
  .legal-nav { position:static; grid-template-columns:repeat(3,minmax(0,1fr)); padding:18px 0; border-left:0; border-block:1px solid var(--line) }
  .legal-nav strong { grid-column:1/-1 }
  .footer-grid { gap:30px; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }
  .footer-grid>div:last-child { grid-column:1/-1 }
  .footer-grid>div:last-child p { columns:2 }
}
@media(max-width:650px) {
  html { scroll-padding-top:96px }
  main [id] { scroll-margin-top:12px }
  .container { width:calc(100% - 40px) }
  .nav { min-height:76px }
  .brand { gap:10px }
  .brand-text b { font-size:.72rem; letter-spacing:.08em }
  .brand-text small { font-size:.59rem }
  .mark { width:37px; height:37px; font-size:.95rem }
  .hero { min-height:100svh }
  .hero-content { padding-block:137px 62px }
  .hero-bg img { object-position:62% center }
  .hero-bg::after { background:linear-gradient(90deg,rgba(15,29,43,.83),rgba(15,29,43,.47)),linear-gradient(0deg,rgba(15,29,43,.99),rgba(15,29,43,.35) 85%) }
  .hero h1 { margin-block:20px 25px; font-size:clamp(2.25rem,10.4vw,4.15rem); line-height:1.03; letter-spacing:-.04em }
  .hero p { font-size:.99rem; line-height:1.72 }
  .eyebrow { font-size:.68rem; letter-spacing:.16em }
  .hero .eyebrow { max-width:290px }
  .actions { gap:11px; margin-top:24px }
  .hero .actions .btn { width:100% }
  .btn { font-size:.72rem; padding-inline:17px }
  .subhero.photo-subhero { min-height:560px; padding-block:142px 54px }
  .subhero h1 { font-size:clamp(2.2rem,10.1vw,4rem); line-height:1.06 }
  .subhero p { font-size:1rem; line-height:1.7 }
  .photo-subhero::after { background:linear-gradient(90deg,rgba(15,29,43,.92),rgba(15,29,43,.56)),linear-gradient(0deg,rgba(15,29,43,.85),transparent) }
  .subhero.photo-subhero.legal-hero { min-height:350px; padding-bottom:45px }
  .section { padding-block:60px }
  .section h2 { font-size:clamp(2.1rem,8.7vw,3.35rem); line-height:1.1 }
  .section-head { display:block; margin-bottom:28px }
  .section-head .text-link { margin-top:14px }
  .lead { font-size:1.04rem }
  .grid-2,.story,.engagement-layout,.photo-story,.media-split.foundation,.project-detail,.contact-premium { gap:30px }
  .compact-top { padding-top:30px }
  .pillars,.values-large,.reporting-grid,.transparency-grid,.method,.impact-path { grid-template-columns:minmax(0,1fr) }
  .values { margin-top:28px }
  .value { padding:20px 14px }
  .value b { font-size:1.2rem }
  .value small { font-size:.77rem }
  .trust-grid>div { padding:21px 14px }
  .trust-grid strong { font-size:1.35rem }
  .trust-grid span { font-size:.61rem; letter-spacing:.04em }
  .pillars,.method,.impact-path,.transparency-grid { margin-top:28px }
  .pillar,.values-large article,.transparency-grid article,.reporting-grid>div,.method-item,.impact-path>div { padding:25px }
  .project .copy { padding:25px }
  .project h3 { font-size:2.15rem }
  .project p { font-size:.96rem }
  .project-detail-image { aspect-ratio:4/3 }
  .project-detail-list { gap:56px }
  .engagement-mosaic { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; gap:10px }
  .engagement-mosaic .engagement-main { grid-row:auto; grid-column:1/-1 }
  .engagement-mosaic .engagement-main img { height:auto; object-fit:contain }
  .engagement-mosaic figure:not(.engagement-main) { aspect-ratio:3/4 }
  .engagement-mosaic img { object-position:50% 12% }
  .photo-story-grid { grid-template-columns:minmax(0,1fr); gap:18px }
  .photo-story-grid>img,.photo-story-grid>img:last-child { height:auto; max-height:none; object-fit:contain }
  .portrait { aspect-ratio:4/4.3 }
  .portrait figcaption { left:15px; bottom:15px; font-size:.63rem }
  .media-stack { min-height:0; padding-bottom:42px }
  .media-main { width:90%; height:auto }
  .media-small { width:48%; height:auto; border-width:5px }
  .impact-hero { grid-template-columns:minmax(0,1fr) }
  .impact-hero>div { border-right:0; border-bottom:1px solid var(--line); padding:23px 14px }
  .impact-hero>div:last-child { border-bottom:0 }
  .impact-hero strong { font-size:2rem }
  .support-note,.form-panel { padding:27px 24px }
  .form-panel h3 { font-size:2rem }
  .contact-image { height:auto; aspect-ratio:4/3 }
  .contact-lines a { font-size:1.2rem }
  .cta { padding-block:62px }
  .cta h2 { font-size:clamp(2.3rem,9.5vw,3.5rem) }
  .legal-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px }
  .legal-content h2 { font-size:clamp(2rem,8.2vw,3rem); overflow-wrap:anywhere }
  .legal-note { padding:23px }
  .site-footer { padding-top:48px }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:32px }
  .footer-grid>div:last-child { grid-column:auto }
  .footer-grid>div:last-child p { columns:auto }
  .footer-grid h4 { margin-bottom:12px }
  .footer-grid p { margin-top:14px }
  .footer-bottom { display:block; margin-top:30px }
  .footer-bottom>span { display:block; margin-top:8px }
}
@media(max-width:600px) {
  .project { display:flex }
  .project .visual { min-height:0; aspect-ratio:4/3 }
}
@media(max-width:360px) {
  .container { width:calc(100% - 32px) }
  .brand-text b { font-size:.66rem }
  .brand-text small { font-size:.54rem }
  .brand { gap:8px }
  .mark { width:34px; height:34px }
  .nav { gap:10px }
  .value { padding-inline:10px }
  .value b { font-size:1.1rem }
  .hero h1 { font-size:2.1rem }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition:none!important; animation:none!important }
  .reveal,.reveal.reveal-pending { opacity:1; transform:none }
  .project:hover .visual img,.project-detail:hover img,.engagement-mosaic figure:hover img { transform:none }
}
@media print {
  .site-header,.skip-link,.menu,.project-jumps { display:none!important }
  .hero,.subhero.photo-subhero,.subhero.photo-subhero.legal-hero { min-height:0; padding-block:28px }
  .hero-content { padding-block:0 }
  .hero h1,.subhero h1 { font-size:34pt }
  .section,.cta { padding-block:24px }
  .section h2,.cta h2 { font-size:26pt }
  .reveal,.reveal.reveal-pending { opacity:1; transform:none }
  .project,.project-detail { break-inside:avoid }
}