/* Inter Tight, self-hosted (SIL Open Font License, see fonts/OFL.txt).
   One variable file per character set covers weights 400 to 600; latin-ext holds the Turkish letters. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-tight-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-tight-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --orange:#f15a24;          /* VCN brand orange, sampled from the logo */
  --orange-ui:#d3450e;       /* same hue, deep enough for white text at 4.5:1 */
  --orange-ui-hover:#b83a0a;
  --orange-text:#c0400d;     /* small orange text on white, soft or cream: 4.8:1 or better */
  --ink:#121212;
  --ink-2:#3d3d3d;
  --muted:#6b6b6b;
  --faint:#cfcfcf;
  --line:#e7e7e7;
  --soft:#f5f5f4;
  --cream:#fdf8f3;
  --slate:#2f3243;           /* VCN dark slate */
  --slate-2:#7b7c90;
  --sky-top:#c3cddb;
  --sky-bottom:#e6eaf0;
  --r-xl:40px; --r-lg:32px; --r-md:24px; --r-sm:16px;
  --container:1228px;
  --gutter:24px;
  --section:160px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --track:-.03em;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--muted);font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:500;letter-spacing:var(--track);line-height:1.12}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange-ui);outline-offset:3px;border-radius:6px}
/* On dark panels the orange ring is under 3:1, so it turns white */
.footer :focus-visible,.bank :focus-visible,.planters :focus-visible{outline-color:#fff}
.skip-link{position:absolute;z-index:100;top:-80px;left:16px;padding:12px 22px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500;text-decoration:none}
.skip-link:focus{top:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section) 0}
.display-9{font-size:64px;line-height:1.08}
.display-8{font-size:48px;line-height:1.15}
.display-7{font-size:36px;line-height:1.2}
.display-6{font-size:30px;line-height:1.2}
.display-5{font-size:24px;line-height:1.25}
.lead{font-size:18px;line-height:1.5}
.center{text-align:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 30px;border-radius:999px;font-size:16px;font-weight:500;line-height:1.25;letter-spacing:-.02em;text-decoration:none;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--orange-ui);color:#fff;border:1px solid var(--orange-ui);box-shadow:0 1px 2px rgba(163,53,10,.18),0 8px 20px rgba(211,69,14,.18)}
.btn-primary:hover{background:var(--orange-ui-hover);border-color:var(--orange-ui-hover);transform:translateY(-2px)}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-secondary:hover{background:var(--ink);color:#fff}
.arrow-btn{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 1px 1px rgba(166,101,24,.06),0 4px 10px rgba(18,18,18,.06);transition:background-color .3s var(--ease),color .3s var(--ease)}
.arrow-btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.arrow-btn.ext svg{transform:rotate(-45deg)}
.arrow-btn:hover{background:var(--orange-ui);color:#fff}
.arrow-btn:hover svg{transform:translateX(3px)}
.arrow-btn.ext:hover svg{transform:rotate(-45deg) translateX(3px)}
.arrow-btn.on-soft{background:var(--soft)}
.arrow-btn.on-soft:hover{background:var(--orange-ui)}

/* Reveal on scroll */
.js [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* ============ HERO ============ */
.hero{padding:20px 20px 0;max-width:1440px;margin:0 auto}
.hero-card{position:relative;height:clamp(640px,calc(100svh - 20px),960px);border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 55%,#eef1f4 100%);isolation:isolate}
/* The sky in this photo is transparent: let the image run past the top edge instead of cropping into the peak */
.hero-img{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;min-height:74%;object-fit:cover;object-position:24% 100%;z-index:-1;transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 30%,rgba(0,0,0,.55) 46%,#000 60%);
  mask-image:linear-gradient(180deg,transparent 0%,transparent 30%,rgba(0,0,0,.55) 46%,#000 60%)}
.js .hero-img{animation:heroSettle 2.4s var(--ease-out) both}
/* Hero photos settle into place without fading in: a fade delays when the browser counts them as
   painted (Largest Contentful Paint) by the length of the animation */
@keyframes heroSettle{from{transform:scale(1.08) translateY(24px)}to{transform:none}}

.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:var(--container);margin:0 auto;padding:18px var(--gutter) 0}
.nav-left{display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;min-height:44px;text-decoration:none}
.brand img{width:211px;max-width:100%;height:auto}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:8px 12px;border-radius:999px;color:var(--ink);font-size:16px;font-weight:500;letter-spacing:-.02em;text-decoration:none;transition:background-color .3s var(--ease)}
.nav-links a:hover{background:rgba(255,255,255,.55)}
.nav-links a[aria-current="page"]{background:rgba(255,255,255,.7)}
.nav-toggle{display:none;flex:none;width:48px;height:48px;border-radius:50%;background:#fff;place-items:center;box-shadow:0 4px 14px rgba(18,18,18,.08)}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:transform .35s var(--ease),background-color .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:transform .35s var(--ease)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
.nav-panel{display:none}

.hero-content{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:86px var(--gutter) 0;text-align:center}
.hero-content h1{margin-bottom:32px}
.js .hero-content > *{opacity:0;transform:translateY(26px);animation:rise 1.1s var(--ease-out) forwards}
.js .hero-content > :nth-child(1){animation-delay:.15s}
.js .hero-content > :nth-child(2){animation-delay:.3s}
.js .hero-content > :nth-child(3){animation-delay:.45s}
@keyframes rise{to{opacity:1;transform:none}}


/* ============ WHAT WE DO ============ */
.work{padding:120px 0 var(--section)}
.work-grid{display:grid;grid-template-columns:1.95fr 1fr;gap:20px;align-items:start}
.work-intro{padding:8px 0 0 48px}
.work-intro h2{margin-bottom:16px;text-wrap:balance}
.work-intro p{margin-bottom:28px;font-size:18px}
.work-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;align-items:start}
.card{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--soft)}
.card-media{position:absolute;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.05)}
.card-body{position:relative;padding:40px}
.card-body h3{margin-bottom:10px}
.card-body p{font-size:16px}
.card .arrow-btn{position:absolute;z-index:2}

.card-a{height:375px}
.card-a .card-body{width:47%}
.card-a .card-media{top:0;right:0;bottom:0;width:53%}
.card-a .arrow-btn{top:24px;right:24px}

.card-b{height:340px;display:grid;grid-template-columns:44% 1fr}
.card-b .card-media{position:relative;height:100%}
.card-b .card-body{padding:36px 36px 36px 32px}
.card-b .arrow-btn{top:20px;left:20px}

.card-c{height:430px}
.card-c .card-body{padding-bottom:0;max-width:92%}
.card-c .card-media{left:0;right:0;bottom:0;height:52%}
.card-c .arrow-btn{left:24px;bottom:24px}

/* ============ OUR STORY ============ */
.story-wrap{max-width:1440px;margin:0 auto;padding:0 20px}
.story{position:relative;height:clamp(560px,48vw,700px);border-radius:var(--r-xl);overflow:hidden;isolation:isolate;display:flex;align-items:center}
.story-img{position:absolute;inset:-6% 0;z-index:-2;will-change:transform}
.story-img img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.story::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,26,44,.62) 0%,rgba(16,26,44,.38) 38%,rgba(16,26,44,0) 66%)}
.story-copy{width:100%}
.story-copy .inner{max-width:430px}
.story-copy h2{color:#fff;margin-bottom:14px}
.story-copy p{color:rgba(255,255,255,.88);font-size:17px;margin-bottom:28px}

/* ============ OUR REACH (tabs) ============ */
.reach-head{max-width:560px;margin:0 auto 48px}
.reach-head h2{margin-bottom:14px}
.reach-grid{display:grid;grid-template-columns:689fr 491fr;gap:60px;align-items:start}
.reach-media{position:relative;aspect-ratio:689/480;border-radius:var(--r-lg);overflow:hidden;background:var(--soft)}
.reach-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.4s var(--ease-out)}
.reach-media img.active{opacity:1;transform:none}
.rotate-toggle{position:absolute;z-index:3;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink)}
.rotate-toggle svg{width:16px;height:16px}
.rotate-toggle .i-play,.rotate-toggle.is-paused .i-pause{display:none}
.rotate-toggle.is-paused .i-play{display:block}
.reach-media figcaption{position:absolute;left:20px;bottom:20px;z-index:2;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:14px;font-weight:500;transition:opacity .4s}
.reach-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
.thumbs{display:flex;gap:14px}
.thumb{width:84px;height:84px;padding:4px;border-radius:22px;border:1px solid transparent;transition:border-color .3s var(--ease)}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:18px;transition:transform .4s var(--ease)}
.thumb:hover img{transform:scale(.95)}
.thumb.current{border-color:var(--ink)}
.tabs{display:flex;flex-direction:column}
.tab{border-bottom:1px solid transparent}
.tab-btn{display:block;width:100%;text-align:left;padding:14px 0;color:#767676;transition:color .4s var(--ease)}
.tab-btn:hover{color:var(--ink-2)}
.tab-btn span{display:block;font-size:36px;font-weight:500;letter-spacing:var(--track);line-height:1.2}
.tab.active .tab-btn{color:var(--ink)}
.tab-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.tab.active .tab-panel{grid-template-rows:1fr}
.tab-panel > div{overflow:hidden;visibility:hidden;transition:visibility 0s .6s}
.tab.active .tab-panel > div{visibility:visible;transition-delay:0s}
.tab-panel p{max-width:380px;padding-top:2px;font-size:16px}
.tab-panel .who{display:flex;align-items:center;gap:14px;margin:14px 0 26px}
.tab-panel .who small{font-size:14px;color:var(--ink-2)}

/* ============ SUPPORT CTA ============ */
.cta-wrap{max-width:1440px;margin:0 auto;padding:0 40px}
.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--cream);min-height:680px;isolation:isolate}
/* Photo dissolves into the cream from the top and the left, so it sits softly inside the panel */
.cta-img{position:absolute;left:26%;right:0;top:6%;bottom:-40px;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%),linear-gradient(180deg,transparent 0%,#000 36%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 30%),linear-gradient(180deg,transparent 0%,#000 36%);
  mask-composite:intersect;will-change:transform}
.cta-img img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.cta-copy{padding-top:132px}
.cta-copy .inner{max-width:430px}
.cta-copy h2{margin-bottom:16px}
.cta-copy p{color:var(--ink-2);font-size:17px;margin-bottom:26px}

/* ============ PROCESS ============ */
.process-head{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;margin-bottom:56px}
.process-head p{font-size:16px;padding-top:12px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* the phone-frame visual sits in the bottom 276px; padding keeps the text clear of it at any text length */
.step{position:relative;min-height:540px;border-radius:var(--r-lg);overflow:hidden;clip-path:inset(0 round var(--r-lg));padding:40px 40px 300px}
.step h3{margin-bottom:12px}
.step p{font-size:16px;line-height:1.55}
.step-1{background:var(--soft)}
.step-2{background:var(--orange-ui)}
.step-2 h3,.step-2 p{color:#fff}
.step-3{background:var(--slate)}
.step-3 h3{color:#fff}
.step-3 p{color:rgba(255,255,255,.82)}
.step-visual{position:absolute;left:0;right:0;bottom:0}
/* every step card shows its image in the same white frame, inset from the sides and running off the bottom edge */
.step .step-visual{left:30px;right:30px;bottom:-24px;height:300px;padding:18px;border-radius:30px 30px 0 0;background:#fff;box-shadow:0 10px 40px rgba(18,18,18,.06)}
.step .step-visual img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.step-1 .step-visual img{object-position:85% 12%}
.step-1 .map-tag{position:absolute;left:34px;bottom:44px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:500;box-shadow:0 4px 14px rgba(18,18,18,.1)}

/* ============ VOICES (values + pastor) ============ */
.who{display:flex;align-items:center;gap:12px}
.who strong{display:block;color:var(--ink);font-weight:500;font-size:16px;line-height:1.3}
.who small{display:block;color:var(--muted);font-size:15px;line-height:1.3}

/* ============ GET INVOLVED ============ */
.inv-head{max-width:560px;margin:0 auto 40px}
.inv-head h2{margin-bottom:14px}
.inv-grid{display:grid;grid-template-columns:747fr 402fr;gap:31px;align-items:start}
.feature-media{position:relative;display:block;aspect-ratio:747/473;border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.feature-media img{width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--ease-out)}
.feature:hover .feature-media img{transform:scale(1.04)}
.chip{display:inline-block;padding:8px 22px;border-radius:999px;background:var(--soft);color:var(--ink);font-size:15px;font-weight:500;letter-spacing:-.01em}
.feature-media .chip{position:absolute;top:30px;left:30px;background:#fff;box-shadow:0 4px 14px rgba(18,18,18,.08)}
.feature-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:24px}
.feature-foot h3{max-width:500px}
.feature-foot h3 a{text-decoration:none}
.inv-list{list-style:none;margin:0;padding:0}
.inv-item{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:0 0 24px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.inv-item:last-child{border-bottom:0;margin-bottom:0}
.inv-item h4{font-size:24px;line-height:1.25;margin-bottom:8px}
.inv-item h4 a{text-decoration:none}
.inv-item p{font-size:16px;margin-bottom:14px}
.inv-item .arrow-btn{grid-column:2;grid-row:1}

/* ============ FOOTER ============ */
.footer-wrap{max-width:1440px;margin:0 auto;padding:0 20px 20px}
.footer{border-radius:var(--r-xl);background:#131419;color:rgba(255,255,255,.72);padding:120px 0 64px}
.footer h2{color:#fff;font-size:36px;margin-bottom:12px}
.f-top{display:grid;grid-template-columns:1fr 402px;gap:40px;align-items:center;margin-bottom:56px}
.f-top p{max-width:430px;font-size:16px}
.subscribe{display:flex;align-items:center;padding:6px;border-radius:999px;background:#fff}
.subscribe input{flex:1;min-width:0;border:0;background:transparent;padding:12px 18px;font:inherit;font-size:16px;color:var(--ink);outline:none}
.subscribe input::placeholder{color:var(--muted)}
.subscribe:focus-within{box-shadow:0 0 0 2px var(--orange)}
.subscribe .btn{padding:12px 28px}
.form-note{min-height:20px;margin-top:10px;font-size:14px;color:rgba(255,255,255,.7);padding-left:18px}
.f-links{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;margin-bottom:72px}
.f-links ul{list-style:none;margin:0;padding:0}
.f-links li{border-bottom:1px solid rgba(255,255,255,.12)}
.f-links li:last-child{border-bottom:0}
.f-links a,.f-links span{display:block;padding:12px 0;color:#fff;font-size:16px;letter-spacing:-.01em;text-decoration:none;transition:color .3s var(--ease),transform .3s var(--ease)}
.f-links span{color:rgba(255,255,255,.72)}
.f-links a:hover{color:var(--orange);transform:translateX(4px)}
.f-brand{display:inline-flex;align-items:center;min-height:44px}
.f-brand img{width:260px;height:auto}
.f-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:40px}
.f-bottom p{font-size:15px;line-height:1.6}
.f-bottom p a{color:#fff;text-decoration:none}
.f-bottom p a:hover{color:var(--orange)}
.partners{display:flex;align-items:center;gap:10px;margin-top:14px}
.partners img{width:40px;height:40px;padding:5px;border-radius:10px;background:#fff}
.socials{display:flex;gap:8px}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);color:#fff;transition:background-color .3s var(--ease),color .3s}
.socials a:hover{background:#fff;color:var(--ink)}
.socials svg{width:18px;height:18px}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .nav{padding:18px 32px 0}
  .site-header .nav{padding-left:var(--gutter);padding-right:var(--gutter)}
  .work-intro{padding-left:40px}
}
@media (max-width:991px){
  :root{--section:112px}
  .display-9{font-size:52px}
  .display-8{font-size:40px}
  .display-7,.tab-btn span{font-size:30px}
  .nav{padding:16px 24px 0}
  .nav-links,.nav .btn-give{display:none}
  .nav-toggle{display:grid}
  .nav-panel{position:absolute;z-index:6;top:84px;left:16px;right:16px;padding:12px;border-radius:var(--r-md);background:#fff;box-shadow:0 20px 50px rgba(18,18,18,.16);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
  .nav-panel{display:block}
  .nav-open .nav-panel{opacity:1;visibility:visible;transform:none}
  .nav-panel a{display:block;padding:14px 16px;border-radius:14px;color:var(--ink);font-size:18px;font-weight:500;text-decoration:none}
  .nav-panel a:hover{background:var(--soft)}
  .nav-panel .btn{display:flex;justify-content:center;margin-top:8px;color:#fff}
  .nav-panel .btn:hover{background:var(--orange-ui-hover)}
  .hero-content{padding-top:64px}
  .hero-img{min-height:70%}
  .cta-img{left:0;top:30%}
  .work-grid{grid-template-columns:1fr}
  .work-intro{order:-1;padding:0;max-width:560px;margin-bottom:28px}
  .work-row{grid-template-columns:1fr}
  .card-b,.card-c{height:auto;min-height:340px}
  .card-c{min-height:460px}
  .reach-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .cta-wrap{padding:0 20px}
  .process-head{grid-template-columns:1fr;gap:12px}
  .steps{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .inv-grid{grid-template-columns:1fr;gap:48px}
  .f-top{grid-template-columns:minmax(0,1fr)}
  .f-links{grid-template-columns:repeat(2,1fr);gap:24px 32px}
  .f-links ul:nth-child(-n+2){margin-bottom:0}
}
@media (max-width:767px){
  :root{--section:88px;--r-xl:28px;--r-lg:24px}
  .display-9{font-size:40px}
  .display-8{font-size:34px}
  .display-7,.tab-btn span{font-size:26px}
  .display-6{font-size:26px}
  .lead{font-size:17px}
  .hero{padding:12px 12px 0}
  .hero-card{height:clamp(640px,calc(100svh - 12px),820px)}
  .hero-img{min-height:64%;object-position:20% 100%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%)}
  .hero-content{padding-top:48px}
  .work{padding-top:72px}
  .card-body{padding:28px}
  .card-a{height:auto;display:flex;flex-direction:column}
  .card-a .card-body{width:auto}
  .card-a .card-body h3{padding-right:60px}
  .card-a .card-media{position:relative;width:auto;height:240px}
  .card-b{grid-template-columns:1fr;grid-template-rows:auto 220px}
  .card-b .card-media{order:2;height:220px}
  .card-b .card-body{padding:28px}
  .card-b .arrow-btn{top:auto;bottom:20px;left:20px}
  .card-c .card-media{height:230px}
  .card-c{min-height:500px}
  .story-wrap{padding:0 12px}
  .story{height:auto;min-height:600px;align-items:flex-end;padding-bottom:40px}
  .story::before{background:linear-gradient(0deg,rgba(16,26,44,.84) 0%,rgba(16,26,44,.72) 50%,rgba(16,26,44,.5) 74%,rgba(16,26,44,0) 96%)}
  .story-img img{object-position:40% 60%}
  .reach-foot{flex-direction:column-reverse;align-items:flex-start}
  .thumb{width:68px;height:68px;border-radius:18px}
  .thumb img{border-radius:14px}
  .cta-wrap{padding:0 12px}
  .cta{min-height:680px}
  .cta-copy{padding-top:64px}
  .cta-img{top:44%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}
  .cta-img img{object-position:50% 100%}
  .step{height:auto;min-height:0;padding:30px 30px 300px}
  .inv-item h4{font-size:22px}
  .feature-media .chip,.fund-media .chip{top:12px;left:12px;padding:6px 14px;font-size:13px}
  /* phones: a band of plain slate above the drawing gives the label room */
  .feature-media.blueprint,.fund-media.blueprint{aspect-ratio:4/3}
  .feature-media.blueprint img,.fund-media.blueprint img{object-fit:contain!important;object-position:50% 100%}
  .footer-wrap{padding:0 12px 12px}
  .footer{padding:72px 0 44px}
  .footer h2{font-size:30px}
  .subscribe .btn{padding:12px 20px}
  .f-links{grid-template-columns:1fr 1fr;gap:28px 20px;margin-bottom:56px}
  .f-links ul:last-child{grid-column:1/-1}
  .f-links a,.f-links span{font-size:15px;padding:11px 0}
  .f-brand img{width:220px}
  .f-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .feature-media.blueprint,.fund-media.blueprint{aspect-ratio:6/5}
  .display-9{font-size:36px}
  .subscribe{flex-direction:column;align-items:stretch;border-radius:24px;gap:6px}
  .subscribe .btn{justify-content:center}
}

/* Reduced motion: everything visible, nothing drifts */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .hero-content > *{opacity:1;transform:none}
  .story-img,.cta-img{transform:none!important}
  .js .reveal-text .w{color:var(--ink)}
}

/* =====================================================================
   WHO WE ARE PAGE
   Split hero with a story card, scroll-lit statement with inline photos,
   value pills, sticky story, image banner, team grid, partner cards, FAQ,
   photo collage.
   ===================================================================== */
.site-header{max-width:1440px;margin:0 auto;padding:20px 0 0;position:relative;z-index:10}
.site-header .nav{padding-top:0}
.site-header .nav-links a:hover{background:var(--soft)}
.site-header .nav-links a[aria-current="page"]{background:var(--soft)}
.site-header .nav-toggle{background:var(--soft);box-shadow:none}

/* Hero */
.about-hero{padding:72px 0 0}
.about-hero-top{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:end;margin-bottom:48px}
.about-hero-top h1{max-width:640px}
.about-hero-top p{margin-bottom:22px;font-size:17px}
.js .about-hero-top > *{opacity:0;transform:translateY(26px);animation:rise 1.1s var(--ease-out) forwards}
.js .about-hero-top > :nth-child(2){animation-delay:.18s}
.about-hero-media{position:relative;height:clamp(420px,40vw,560px);border-radius:var(--r-lg);overflow:hidden;background:var(--slate)}
.about-hero-media > img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.js .about-hero-media > img{animation:heroSettle 2.2s var(--ease-out) .1s both}
.story-card{position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:16px;width:380px;padding:12px 20px 12px 12px;border-radius:20px;background:#fff;text-decoration:none;box-shadow:0 12px 34px rgba(18,18,18,.16);transition:transform .4s var(--ease)}
.story-card:hover{transform:translateY(-3px)}
.story-card img{width:112px;height:96px;flex:none;border-radius:14px;object-fit:cover;object-position:40% 25%}
.story-card p{color:var(--ink-2);font-size:14px;line-height:1.4;margin-bottom:8px}
.story-card span{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:14px;font-weight:500}
.story-card span svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.story-card:hover span svg{transform:translateY(3px)}
.js .story-card{opacity:0;transform:translateY(20px);animation:rise 1s var(--ease-out) .8s forwards}

/* Statement */
.statement{padding:140px 0 0}
.reveal-text{margin:0;color:var(--ink);font-size:40px;font-weight:500;line-height:1.32;letter-spacing:var(--track)}
.js .reveal-text .w{color:#767676;transition:color .35s var(--ease)}
.js .reveal-text .w.lit{color:var(--ink)}
.inline-img{display:inline-block;width:104px;height:54px;margin:0 .12em;border-radius:999px;overflow:hidden;vertical-align:-.28em;transition:opacity .4s var(--ease),transform .5s var(--ease-out)}
.inline-img img{width:100%;height:100%;object-fit:cover}
.js .inline-img{opacity:.35;transform:scale(.86)}
.js .inline-img.lit{opacity:1;transform:none}
.about-stats{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:64px;padding-top:44px;border-top:1px solid var(--line)}
.about-stats .nums{display:flex;gap:64px}
.about-stats .num b{display:block;color:var(--ink);font-size:48px;font-weight:500;line-height:1;letter-spacing:-.04em}
.about-stats .num span{display:block;max-width:190px;margin-top:10px;font-size:15px;line-height:1.35}

/* Values */
.values-head{max-width:560px;margin:0 auto 44px}
.values-head h2{margin-bottom:14px}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.pill{display:flex;align-items:center;gap:16px;max-width:376px;padding:14px 28px 14px 14px;border-radius:999px;background:var(--soft)}
.pill-icon{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:50%;background:#fff;color:var(--orange-ui)}
.pill-icon svg{width:24px;height:24px}
.pill strong{display:block;color:var(--ink);font-size:17px;font-weight:500;line-height:1.3}
.pill div span{display:block;font-size:14px;line-height:1.4}

/* Sticky story */
.tl-grid{display:grid;grid-template-columns:520px 1fr;gap:80px;align-items:start}
.tl-side{position:sticky;top:40px}
.tl-side h2{margin-bottom:28px}
.story-media{position:relative;aspect-ratio:4/4.3;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom))}
.story-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 1.6s var(--ease-out)}
.story-media img.active{opacity:1;transform:none}
.chapters{padding-top:8px}
.chapter{padding:44px 0;border-top:1px solid var(--line);transition:opacity .6s var(--ease)}
.chapter:first-child{border-top:0;padding-top:0}
.js .chapter h3,.js .chapter .chip{transition:color .6s var(--ease)}
.js .chapter:not(.active) h3,.js .chapter:not(.active) .chip{color:var(--muted)}
.js .chapter.active p{color:var(--ink-2)}
.chapter .chip{margin-bottom:18px}
.chapter h3{margin-bottom:14px}
.chapter p{font-size:17px;line-height:1.6}
.chapter p + p{margin-top:12px}
.chapter-img{display:none}

/* Team */
/* Flex rather than grid so a short last row is centred */
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.team-grid > .member{flex:0 0 calc((100% - 40px) / 3)}
.member{position:relative;aspect-ratio:380/440;border-radius:var(--r-lg);overflow:hidden;background:var(--secondary,#c4afa1)}
.member img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.member:hover img{transform:scale(1.05)}
.member::before{content:none}
.member figcaption{position:absolute;z-index:2;left:22px;bottom:22px;max-width:calc(100% - 44px);padding:10px 14px;border-radius:14px;background:rgba(18,18,18,.66)}
.member h3{color:#fff;font-size:24px;line-height:1.2}
.member small{display:block;margin-top:2px;color:#fff;font-size:15px}

/* Partners */
.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.partner{display:flex;flex-direction:column;align-items:flex-start;padding:44px;border-radius:var(--r-lg);background:var(--soft)}
.partner-logo{display:grid;place-items:center;width:92px;height:92px;margin-bottom:28px;border-radius:22px;background:#fff;box-shadow:0 4px 14px rgba(18,18,18,.05)}
.partner-logo img{width:64px;height:64px;object-fit:contain}
.partner h3{margin-bottom:8px}
.partner .role{margin-bottom:14px;color:var(--orange-text);font-size:15px;font-weight:500}
.partner p{max-width:460px;font-size:16px;margin-bottom:26px}
.partner .btn{margin-top:auto}
.partner-grid.solo{grid-template-columns:1fr}
.partner-grid.solo .partner{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:36px;align-items:center}
.partner-grid.solo .partner-logo{margin-bottom:0}
.partner-grid.solo .partner p:last-child{margin-bottom:0}
.partner-grid.solo .btn{margin-top:0}

/* FAQ */
.faq-wrap{max-width:1440px;margin:0 auto;padding:0 20px}
.faq{border-radius:var(--r-xl);background:var(--cream);padding:120px 0}
.faq-grid{display:grid;grid-template-columns:1fr 600px;gap:60px;align-items:start}
.faq-grid h2{margin-bottom:14px}
.faq-grid > div > p{max-width:400px;margin-bottom:28px;font-size:17px}
.faq-list{list-style:none;margin:0;padding:0}
.faq-item{margin-bottom:12px;border-radius:20px;background:#fff;box-shadow:0 1px 1px rgba(166,101,24,.06),0 4px 4px rgba(233,227,220,.06)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:22px 26px;text-align:left;color:var(--ink);font-size:17px;font-weight:500;letter-spacing:-.01em}
.faq-q i{position:relative;width:16px;height:16px;flex:none}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;left:0;top:7.25px;width:16px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease)}
.faq-q i::after{transform:rotate(90deg)}
.faq-item.open .faq-q i::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden;visibility:hidden;transition:visibility 0s .5s}
.faq-item.open .faq-a > div{visibility:visible;transition-delay:0s}
.faq-a p{padding:0 26px 24px;font-size:16px;line-height:1.6}
.faq-a a{color:var(--orange-text)}

/* Follow collage */
.follow{position:relative;min-height:640px;display:grid;place-items:center}
.follow-copy{position:relative;z-index:2;max-width:460px;text-align:center}
.follow-copy h2{margin-bottom:14px}
.follow-copy p{margin-bottom:28px;font-size:17px;text-wrap:balance}
.follow-copy .btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.follow-strip{display:contents}
.float{position:absolute;margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:0 18px 40px rgba(18,18,18,.14);transform:translate3d(0,var(--fy,0px),0) rotate(var(--r,0deg));will-change:transform}
.float img{width:100%;height:100%;object-fit:cover}
.f1{left:0;top:24px;width:230px;height:168px;--r:-6deg}
.f2{left:7%;bottom:10px;width:178px;height:232px;--r:4deg}
.f3{left:30%;top:-18px;width:128px;height:100px;--r:3deg}
.f4{right:1%;top:0;width:190px;height:244px;--r:6deg}
.f5{right:9%;bottom:14px;width:246px;height:172px;--r:-4deg}
.f6{right:31%;bottom:-24px;width:140px;height:108px;--r:-3deg}

@media (max-width:1180px){
  .tl-grid{grid-template-columns:440px 1fr;gap:56px}
  .faq-grid{grid-template-columns:1fr 520px}
  .f3,.f6{display:none}
}
@media (max-width:991px){
  .about-hero{padding-top:56px}
  .about-hero-top{grid-template-columns:1fr;gap:20px;margin-bottom:36px}
  .statement{padding-top:110px}
  .reveal-text{font-size:32px}
  .inline-img{width:84px;height:44px}
  .about-stats{flex-direction:column;align-items:flex-start}
  .about-stats .nums{flex-wrap:wrap;gap:36px 48px}
  .tl-grid{grid-template-columns:1fr;gap:28px}
  .tl-side{position:static}
  .tl-side .story-media{display:none}
  .js .chapter:not(.active) h3,.js .chapter:not(.active) .chip{color:var(--ink)}
  .js .chapter.active p{color:inherit}
  .chapter{padding:36px 0}
  .chapter-img{display:block;width:100%;aspect-ratio:16/10;margin-bottom:24px;border-radius:var(--r-md);object-fit:cover}
  .team-grid > .member{flex-basis:calc((100% - 20px) / 2)}
  .partner-grid{grid-template-columns:1fr}
  .faq{padding:88px 0}
  .faq-grid{grid-template-columns:1fr;gap:36px}
  .follow{min-height:0;display:block}
  .follow-strip{display:flex;gap:12px;margin-bottom:40px}
  .float{position:relative;inset:auto;flex:1;height:180px;width:auto;--r:0deg;transform:none}
  .f3,.f6{display:none}
  .follow-copy{margin:0 auto}
}
@media (max-width:767px){
  .about-hero{padding-top:40px}
  .about-hero-media{height:440px}
  .about-hero-media > img{object-position:70% 40%}
  .story-card{left:12px;right:12px;bottom:12px;width:auto}
  .story-card img{width:84px;height:84px}
  .statement{padding-top:88px}
  .reveal-text{font-size:26px;line-height:1.38}
  .inline-img{width:64px;height:34px}
  .about-stats{margin-top:44px;padding-top:32px}
  .about-stats .nums{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
  .about-stats .num b{font-size:40px}
  .pill{border-radius:28px;max-width:none;width:100%}
  .team-grid{gap:12px}
  .team-grid > .member{flex-basis:calc((100% - 12px) / 2)}
  .member{border-radius:var(--r-md)}
  .member h3{font-size:18px}
  .member small{font-size:13px}
  .partner{padding:30px}
  .partner-grid.solo .partner{grid-template-columns:1fr;gap:20px;align-items:start}
  .partner-grid.solo .btn{justify-self:start}
  .faq-wrap{padding:0 12px}
  .faq{padding:64px 0}
  .faq-q{padding:18px 20px;font-size:16px}
  .faq-a p{padding:0 20px 20px}
  .follow-strip .float{height:130px;border-radius:18px}
  .f5{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .about-hero-top > *,.js .story-card{opacity:1;transform:none}
  .float{--fy:0px}
}

/* =====================================================================
   GIVE PAGE
   Split hero with a tall photo card, pill rows, soft cards, info card,
   pill switcher.
   ===================================================================== */
/* Hero */
.give-hero{padding:64px 0 0}
.give-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch}
.give-hero-copy{padding-top:24px}
.give-hero-copy h1{margin-bottom:18px;text-wrap:balance}
.give-hero-copy > p{max-width:470px;margin-bottom:36px;font-size:18px}
.js .give-hero-copy > *{opacity:0;transform:translateY(26px);animation:rise 1.1s var(--ease-out) forwards}
.js .give-hero-copy > :nth-child(2){animation-delay:.12s}
.js .give-hero-copy > :nth-child(3){animation-delay:.24s}
.js .give-hero-copy > :nth-child(4){animation-delay:.36s}
.ways{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.way{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 14px 14px 28px;border:1px solid var(--line);border-radius:999px;text-decoration:none;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.way:hover{border-color:var(--ink);background:var(--soft)}
.way strong{display:block;color:var(--ink);font-size:17px;font-weight:500;line-height:1.3}
.way small{display:block;font-size:14px;line-height:1.35}
.way .arrow{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--soft);color:var(--ink);transition:background-color .3s var(--ease),color .3s var(--ease),transform .4s var(--ease)}
.way:hover .arrow{background:var(--orange-ui);color:#fff}
.way .arrow svg{width:16px;height:16px}
.way[data-external] .arrow svg{transform:rotate(-45deg)}
.ways-note{font-size:14px;padding-left:28px}
.give-photo{position:relative;min-height:640px;border-radius:var(--r-lg);overflow:hidden;margin:0}
.give-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.js .give-photo img{animation:heroSettle 2.2s var(--ease-out) .1s both}
.give-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,18,30,.78) 0%,rgba(14,18,30,.4) 34%,rgba(14,18,30,0) 60%)}
.give-photo figcaption{position:absolute;z-index:2;left:36px;right:36px;bottom:34px;color:#fff}
.give-photo blockquote{margin:0 0 16px;font-size:24px;font-weight:500;line-height:1.3;letter-spacing:-.02em}
.give-photo cite{display:block;font-style:normal;font-size:15px;color:rgba(255,255,255,.85)}
.give-photo cite b{display:block;color:#fff;font-weight:500;font-size:16px}

/* Funds */
.fund-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fund{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--soft);overflow:hidden}
.fund-media{position:relative;flex:none;width:calc(100% - 24px);aspect-ratio:16/9;margin:12px 12px 0;border-radius:24px;overflow:hidden;background:#fff}
.fund-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.fund:hover .fund-media img{transform:scale(1.04)}
.fund-media .chip{position:absolute;top:18px;left:18px;background:#fff;box-shadow:0 4px 14px rgba(18,18,18,.08)}
.fund-body{display:flex;flex-direction:column;flex:1;padding:32px 36px 36px}
.fund-body h3{margin-bottom:12px}
.fund-body p{font-size:16px;line-height:1.6;margin-bottom:28px}
.fund-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:auto}
.fund-foot small{font-size:14px}

/* Check */
.check{display:grid;grid-template-columns:1fr 520px;gap:64px;align-items:center;padding:72px;border-radius:var(--r-xl);background:var(--cream)}
.check h2{margin-bottom:14px}
.check > div > p{max-width:440px;font-size:17px;margin-bottom:26px}
.memos{display:flex;flex-wrap:wrap;gap:10px}
.envelope{position:relative;padding:40px 40px 32px;border-radius:24px;background:#fff;box-shadow:0 18px 44px rgba(166,101,24,.10);overflow:hidden}
.envelope::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(-45deg,var(--orange) 0 14px,#fff 14px 24px,var(--slate) 24px 38px,#fff 38px 48px)}
.envelope .mark{position:absolute;top:30px;right:32px;width:68px;opacity:.9}
.envelope small{display:block;margin-bottom:12px;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.envelope address{margin-bottom:26px;color:var(--ink);font-size:22px;font-style:normal;font-weight:500;line-height:1.4;letter-spacing:-.015em}

/* Copy buttons */
.copy{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:15px;font-weight:500;line-height:1.2;transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.copy:hover{border-color:var(--ink)}
.copy svg{width:15px;height:15px;flex:none}
.copy .done{display:none}
.copy.copied{border-color:var(--orange-ui);color:var(--orange-text)}
.copy.copied .idle{display:none}
.copy.copied .done{display:inline}
.memos .copy{background:var(--soft);border-color:transparent}
.memos .copy:hover{border-color:var(--ink)}

/* Bank transfer */
.bank{border-radius:var(--r-xl);background:var(--slate);color:rgba(255,255,255,.76);padding:80px 72px}
.bank-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.bank h2{color:#fff;margin-bottom:14px}
.bank-intro{max-width:420px;margin-bottom:36px;font-size:17px}
.bank dl{margin:0;display:grid;gap:0}
.bank dl > div{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.bank dt{font-size:14px;color:rgba(255,255,255,.62)}
.bank dd{margin:0;color:#fff;font-size:16px;line-height:1.5}
.iban-card{container-type:inline-size;padding:32px;border-radius:24px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.iban-label{display:block;margin-bottom:6px;font-size:14px;color:rgba(255,255,255,.62)}
/* IBANs never wrap mid-number, so they copy and read as one unit */
.iban-list{display:grid;gap:0;margin-bottom:24px}
.iban-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.iban-row:first-child{border-top:0;padding-top:0}
.iban-row > div{flex:1;min-width:0}
.iban-row .copy{flex:none}
.iban{display:block;color:#fff;font-family:inherit;font-size:min(22px,4.1cqi);font-weight:500;line-height:1.25;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.memo-or{align-self:center;color:var(--muted);font-size:15px}
.iban-actions{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:28px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}
.bank .copy{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.bank .copy:hover{border-color:#fff}
.bank .copy.copied{border-color:var(--orange);color:#fff;background:rgba(241,90,36,.18)}
.swift{display:flex;align-items:center;justify-content:space-between;gap:16px}
.swift > div > span{display:block;font-size:14px;color:rgba(255,255,255,.62)}
.swift b{display:block;color:#fff;font-size:20px;font-weight:500;letter-spacing:.04em}

/* Other ways to help */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.help-card{display:grid;grid-template-columns:200px 1fr;gap:0;border-radius:var(--r-lg);background:var(--soft);overflow:hidden}
.help-card img{width:100%;height:100%;object-fit:cover}
.help-card > div{display:flex;flex-direction:column;align-items:flex-start;padding:36px}
.help-card h3{margin-bottom:10px}
.help-card p{font-size:16px;margin-bottom:24px}
.help-card .btn{margin-top:auto}

@media (max-width:1180px){
  .check{grid-template-columns:1fr 460px;padding:56px}
  .bank{padding:64px 48px}
  .bank-grid{grid-template-columns:1fr;gap:40px}
  .help-card{grid-template-columns:150px 1fr}
}
@media (max-width:991px){
  .give-hero{padding-top:48px}
  .give-hero-grid{grid-template-columns:1fr;gap:40px}
  .give-hero-copy{padding-top:0}
  .give-photo{min-height:520px}
  .fund-grid,.help-grid{grid-template-columns:1fr}
  .check{grid-template-columns:1fr;gap:40px}
  .bank-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:767px){
  .give-hero{padding-top:36px}
  .way{padding:12px 12px 12px 22px;border-radius:28px}
  .ways-note{padding-left:4px}
  .give-photo{min-height:460px}
  .give-photo figcaption{left:24px;right:24px;bottom:24px}
  .give-photo blockquote{font-size:20px}
  .fund-body{padding:26px 24px 28px}
  .check{padding:40px 24px;border-radius:var(--r-lg)}
  .envelope{padding:34px 24px 26px}
  .envelope .mark{width:52px;top:24px;right:20px}
  .envelope address{font-size:19px}
  .bank{padding:48px 22px;border-radius:var(--r-lg)}
  .bank dl > div{grid-template-columns:1fr;gap:4px}
  .iban-card{padding:24px 20px}
  .iban{font-size:min(22px,5.4cqi)}
  .iban-row{flex-wrap:wrap;align-items:center;gap:10px}
  .iban-row > div{flex-basis:100%}
  .help-card{grid-template-columns:1fr}
  .help-card img{height:200px}
  .help-card > div{padding:28px 24px}
}
@media (prefers-reduced-motion:reduce){
  .js .give-hero-copy > *{opacity:1;transform:none}
}

/* =====================================================================
   WHAT WE DO PAGE
   Capsule photo hero, service detail with checklist, step accordion,
   bento cards, service grid.
   ===================================================================== */
/* Hero with capsule photos */
.wwd-hero{padding:56px 0 0}
.wwd-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.capsules{display:flex;align-items:center;gap:14px;height:560px}
.capsule{flex:1;margin:0;border-radius:999px;overflow:hidden;background:var(--soft);box-shadow:0 18px 40px rgba(18,18,18,.08)}
.capsule img{width:100%;height:100%;object-fit:cover}
.capsule:nth-child(1){height:78%}
.capsule:nth-child(2){height:100%}
.capsule:nth-child(3){height:70%;align-self:flex-end;margin-bottom:40px}
.js .capsule{transform:translateY(40px) scale(.96);animation:settle 1.2s var(--ease-out) forwards}
@keyframes settle{to{transform:none}}
.js .capsule:nth-child(2){animation-delay:.12s}
.js .capsule:nth-child(3){animation-delay:.24s}
.wwd-hero-copy h1{margin-bottom:18px}
.wwd-hero-copy > p{max-width:480px;margin-bottom:28px;font-size:18px}
.js .wwd-hero-copy > *{opacity:0;transform:translateY(26px);animation:rise 1.1s var(--ease-out) forwards}
.js .wwd-hero-copy > :nth-child(1){animation-delay:.2s}
.js .wwd-hero-copy > :nth-child(2){animation-delay:.32s}
.js .wwd-hero-copy > :nth-child(3){animation-delay:.44s}
.js .wwd-hero-copy > :nth-child(4){animation-delay:.56s}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.jump span{width:100%;margin-bottom:4px;font-size:14px}
.jump a{padding:8px 18px;border-radius:999px;background:var(--soft);color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease)}
.jump a:hover{background:var(--ink);color:#fff}

/* Ministry detail with checklist */
.ministry{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.ministry .chip{margin-bottom:20px}
.ministry h2{margin-bottom:16px}
.ministry-copy > p{max-width:500px;font-size:17px;line-height:1.6;margin-bottom:30px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{text-wrap:pretty;display:flex;gap:14px;align-items:flex-start;color:var(--ink-2);font-size:16px;line-height:1.5}
.checks li::before{content:"";flex:none;width:24px;height:24px;margin-top:-1px;border-radius:50%;background:var(--orange-ui) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9'/%3E%3C/svg%3E") center/16px no-repeat}
.map-panel{position:relative;padding:28px;border-radius:var(--r-lg);background:var(--soft)}
.map-panel .inner{padding:16px;border-radius:24px;background:#fff;box-shadow:0 10px 40px rgba(18,18,18,.06)}
.map-panel img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:16px}
.map-note{position:absolute;left:-28px;top:48px;max-width:250px;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:0 16px 40px rgba(18,18,18,.14)}
.map-note b{display:block;color:var(--orange-ui);font-size:34px;font-weight:500;line-height:1;letter-spacing:-.03em;margin-bottom:6px}
.map-note span{display:block;color:var(--ink-2);font-size:14px;line-height:1.4}

/* Church planting: step accordion */
.plant{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.plant-side .chip{margin-bottom:20px}
.plant-side h2{margin-bottom:16px}
.plant-side > p{max-width:480px;font-size:17px;line-height:1.6;margin-bottom:32px}
.plant-photo{margin:0;aspect-ratio:5/4;border-radius:var(--r-lg);overflow:hidden}
.plant-photo img{width:100%;height:100%;object-fit:cover}
.steps-list .faq-item{background:var(--soft);box-shadow:none;border-radius:24px}
.steps-list .faq-item.open{background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(18,18,18,.06)}
.steps-list .faq-q{padding:24px 28px;align-items:center}
.steps-list .faq-q small{display:block;margin-bottom:4px;color:var(--orange-text);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.steps-list .faq-q strong{display:block;font-size:22px;font-weight:500;letter-spacing:var(--track);line-height:1.25}
.steps-list .faq-a p{padding:0 28px 28px;font-size:16px}
.body-line{margin-top:40px;padding:28px 32px;border-left:3px solid var(--orange-ui);border-radius:0 20px 20px 0;background:var(--cream);color:var(--ink);font-size:20px;font-weight:500;line-height:1.45;letter-spacing:-.015em}

/* Farsi ministry: bento */
.bento{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:290px 290px;gap:20px}
.bento > *{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden}
.bento img{width:100%;height:100%;object-fit:cover}
.b-photo{grid-row:1/3}
.b-photo .chip{position:absolute;left:22px;bottom:22px;max-width:calc(100% - 44px);background:#fff;box-shadow:0 4px 14px rgba(18,18,18,.1)}
.b-need{grid-column:2/4;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:40px;background:var(--slate)}
.b-need strong{display:block;max-width:520px;color:#fff;font-size:34px;font-weight:500;line-height:1.2;letter-spacing:var(--track)}
.b-need p{max-width:520px;color:rgba(255,255,255,.8);font-size:16px}
.b-now{grid-column:2/4;display:flex;flex-direction:column;justify-content:space-between;padding:32px;background:var(--orange-ui);color:#fff}
.b-now small{font-size:14px;color:#fff}
.b-now strong{display:block;font-size:26px;font-weight:500;line-height:1.2;letter-spacing:var(--track)}
.b-now p{color:#fff;font-size:15px;margin-top:10px}

/* Why we exist: service grid */
.why-grid{display:grid;grid-template-columns:380px 1fr 1fr;gap:20px}
.why-photo{grid-row:1/3;margin:0;border-radius:var(--r-lg);overflow:hidden;min-height:560px}
.why-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.why-card{padding:36px;border-radius:var(--r-lg);background:var(--soft)}
.why-card.wide{grid-column:2/4}
.why-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:26px;border-radius:50%;color:#fff}
.why-icon svg{width:22px;height:22px}
.why-card h3{margin-bottom:10px}
.why-card p{font-size:16px;line-height:1.6}
.why-card.wide p{max-width:640px}

@media (max-width:1180px){
  .why-grid{grid-template-columns:300px 1fr 1fr}
  .map-note{left:12px}
}
@media (max-width:991px){
  .wwd-hero-grid,.ministry,.plant{grid-template-columns:1fr;gap:44px}
  .capsules{height:440px;order:2}
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .b-photo{grid-row:auto;grid-column:1/3;height:320px}
  .b-need{grid-column:1/3}
  .b-now{grid-column:1/3;min-height:220px}
  .why-grid{grid-template-columns:1fr 1fr}
  .why-photo{grid-row:auto;grid-column:1/3;min-height:0;height:380px}
  .why-card.wide{grid-column:1/3}
}
@media (max-width:767px){
  .wwd-hero{padding-top:36px}
  .capsules{height:340px;gap:10px}
  .capsule:nth-child(3){margin-bottom:20px}
  .map-panel{padding:16px}
  .map-note{position:relative;left:auto;top:auto;bottom:auto;max-width:none;margin-top:14px;box-shadow:none}
  .steps-list .faq-q{padding:20px 22px}
  .steps-list .faq-q strong{font-size:19px}
  .steps-list .faq-a p{padding:0 22px 22px}
  .body-line{padding:22px 24px;font-size:18px}
  .bento{grid-template-columns:1fr;gap:12px}
  .b-photo,.b-need,.b-now{grid-column:auto}
  .b-photo{height:280px}
  .b-need{padding:30px 26px;gap:20px}
  .b-need strong{font-size:26px}
  .why-grid{grid-template-columns:1fr}
  .why-photo,.why-card.wide{grid-column:auto}
  .why-photo{height:340px}
  .why-card{padding:28px 26px}
}
@media (prefers-reduced-motion:reduce){
  .js .capsule,.js .wwd-hero-copy > *{opacity:1;transform:none}
}

/* =====================================================================
   GET INVOLVED PAGE
   Full-bleed hero, photo plus form, and card patterns used elsewhere on
   the site.
   ===================================================================== */
/* Full-bleed hero */
.gi-hero-wrap{max-width:1440px;margin:0 auto;padding:20px 20px 0}
.gi-hero{position:relative;min-height:640px;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;padding:0 0 64px}
.gi-hero > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.js .gi-hero > img{animation:heroSettle 2.4s var(--ease-out) both}
.gi-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,12,20,.78) 0%,rgba(10,12,20,.52) 45%,rgba(10,12,20,.22) 100%)}
.gi-hero .container{width:100%}
.gi-hero h1{max-width:760px;margin-bottom:18px;color:#fff}
.gi-hero p{max-width:540px;margin-bottom:30px;color:rgba(255,255,255,.86);font-size:18px}
.js .gi-hero .container > *{opacity:0;transform:translateY(26px);animation:rise 1.1s var(--ease-out) forwards}
.js .gi-hero .container > :nth-child(2){animation-delay:.14s}
.js .gi-hero .container > :nth-child(3){animation-delay:.28s}
.gi-jump{display:flex;flex-wrap:wrap;gap:10px}
.gi-jump a{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease)}
.gi-jump a:hover{background:var(--orange-ui);color:#fff}
.gi-jump a b{font-weight:500;color:var(--orange-text);transition:color .3s var(--ease)}
.gi-jump a:hover b{color:#fff}

/* Four ways overview */
.ways4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.way4{display:flex;flex-direction:column;min-height:320px;padding:32px;border-radius:var(--r-lg);text-decoration:none;transition:transform .45s var(--ease)}
.way4:hover{transform:translateY(-6px)}
.way4 .n{font-size:15px;font-weight:500;margin-bottom:auto}
.way4 h3{margin:48px 0 10px;font-size:28px}
.way4 p{font-size:15px;line-height:1.5;margin-bottom:24px}
.way4 .go{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500}
.way4 .go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.way4:hover .go svg{transform:translateY(3px)}
.w-soft{background:var(--soft)}
.w-soft .n{color:var(--orange-text)} .w-soft .go{color:var(--ink)}
.w-cream{background:var(--cream)}
.w-cream .n{color:var(--orange-text)} .w-cream .go{color:var(--ink)}
.w-orange{background:var(--orange-ui)}
.w-orange h3,.w-orange .go{color:#fff} .w-orange p,.w-orange .n{color:#fff}
.w-slate{background:var(--slate)}
.w-slate h3,.w-slate .go{color:#fff} .w-slate p,.w-slate .n{color:rgba(255,255,255,.8)}

/* Pray: cream card with sign-up */
.pray{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:center;padding:24px 24px 24px 72px;border-radius:var(--r-xl);background:var(--cream)}
.pray .chip{margin-bottom:20px;background:#fff}
.pray h2{margin-bottom:16px}
.pray-copy > p:not(.form-alt):not(.form-note){max-width:470px;font-size:17px;line-height:1.6;margin-bottom:30px}
.pray .subscribe{max-width:470px;box-shadow:0 0 0 1px var(--line)}
.pray .subscribe:focus-within{box-shadow:0 0 0 2px var(--orange-ui)}
.pray .form-note{color:var(--muted);padding-left:20px}
.pray-photo{margin:0;height:520px;border-radius:28px;overflow:hidden}
.pray-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* Visit: photo plus form */
.visit{display:grid;grid-template-columns:480px 1fr;gap:64px;align-items:start}
.visit-photo{position:sticky;top:40px;margin:0;height:620px;border-radius:var(--r-lg);overflow:hidden}
.visit-photo img{width:100%;height:100%;object-fit:cover;object-position:42% 50%}
.visit-photo figcaption{position:absolute;left:20px;right:20px;bottom:20px;padding:18px 20px;border-radius:18px;background:#fff;color:var(--ink-2);font-size:14px;line-height:1.45;box-shadow:0 12px 30px rgba(18,18,18,.14)}
.visit-photo figcaption b{display:block;color:var(--ink);font-size:16px;font-weight:500;margin-bottom:4px}
.visit-copy .chip{margin-bottom:20px}
.visit-copy h2{margin-bottom:16px}
.visit-copy > p{max-width:560px;font-size:17px;line-height:1.6;margin-bottom:36px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{color:var(--ink);font-size:15px;font-weight:500}
.field label span{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{width:100%;padding:13px 20px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:16px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);-webkit-appearance:none;appearance:none}
.field textarea{min-height:140px;border-radius:24px;resize:none;line-height:1.5}
.field select{padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23121212' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right 18px center/16px no-repeat;cursor:pointer}
.field input::placeholder,.field textarea::placeholder{color:#767676}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(211,69,14,.14)}
.field input[aria-invalid="true"]{border-color:var(--orange-ui)}
.form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:28px}
.form-actions small{font-size:14px}
.visit .form-note{margin-top:14px;padding-left:0;color:var(--ink-2)}

/* Church planter fund: slate banner */
.planters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:24px 24px 24px 72px;border-radius:var(--r-xl);background:var(--slate)}
.planters .chip{margin-bottom:20px;background:rgba(255,255,255,.12);color:#fff}
.planters h2{color:#fff;margin-bottom:16px}
.planters p{max-width:470px;margin-bottom:30px;color:rgba(255,255,255,.8);font-size:17px;line-height:1.6}
.planters .btns{display:flex;flex-wrap:wrap;gap:12px}
.planters .btn-secondary{color:#fff;border-color:rgba(255,255,255,.5)}
.planters .btn-secondary:hover{background:#fff;color:var(--ink)}
.planters-map{margin:0;border-radius:28px;overflow:hidden;background:#5d6072}
.planters-map img{width:100%;height:100%;aspect-ratio:1.2/1;object-fit:cover;object-position:100% 50%}

/* Closing band */
.more-give{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:44px 48px;border-radius:var(--r-lg);background:var(--soft)}
.more-give h2{font-size:30px;margin-bottom:6px}
.more-give p{font-size:16px}
.more-give .btns{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:1180px){
  .ways4{grid-template-columns:repeat(2,1fr)}
  .way4{min-height:260px}
  .pray,.planters{padding-left:48px}
  .pray{grid-template-columns:minmax(0,1fr) 380px;gap:40px}
  .visit{grid-template-columns:400px 1fr;gap:48px}
}
@media (max-width:991px){
  .gi-hero{min-height:600px}
  .pray,.planters{grid-template-columns:minmax(0,1fr);gap:36px;padding:48px 24px 24px}
  .pray-copy,.planters-copy{padding:0 16px}
  .pray-photo{height:380px}
  .visit{grid-template-columns:1fr;gap:40px}
  .visit-photo{position:relative;top:auto;height:420px}
  .more-give{flex-direction:column;align-items:flex-start}
}
@media (max-width:767px){
  .gi-hero-wrap{padding:12px 12px 0}
  .gi-hero{min-height:620px;padding-bottom:36px;border-radius:var(--r-lg)}
  .gi-jump a{padding:10px 16px;font-size:14px}
  .ways4{grid-template-columns:1fr;gap:12px}
  .way4{min-height:0;padding:26px}
  .way4 h3{margin-top:28px;font-size:24px}
  .pray,.planters{padding:36px 12px 12px;border-radius:var(--r-lg)}
  .pray-copy,.planters-copy{padding:0 12px}
  .pray-photo{height:300px;border-radius:20px}
  .form-grid{grid-template-columns:1fr}
  .field textarea{border-radius:20px}
  .visit-photo{height:360px}
  .planters-map{border-radius:20px}
  .more-give{padding:32px 24px}
  .more-give h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .js .gi-hero .container > *{opacity:1;transform:none}
  .way4:hover{transform:none}
}
.map-panel.plan img{aspect-ratio:1600/1013;object-fit:contain}
.map-panel.plan .inner{background:var(--slate)}
.map-panel.plan .map-note b{font-size:24px}
.ministry .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Floor plan drawn as a blueprint: the card takes the drawing's slate so there are no white edges */
.feature-media.blueprint,.fund-media.blueprint{background:var(--slate);box-shadow:none}

/* =====================================================================
   PRIVACY POLICY PAGE
   Readable single column of policy text, with a sticky section index
   beside it on wide screens.
   ===================================================================== */
.legal-hero{padding:72px 0 56px}
.legal-hero h1{margin-bottom:14px}
.legal-hero p{font-size:17px}
.legal-grid{display:grid;grid-template-columns:260px minmax(0,720px);gap:72px;align-items:start;padding-bottom:var(--section)}
.toc{position:sticky;top:32px;padding:24px;border-radius:var(--r-md);background:var(--soft)}
.toc b{display:block;margin-bottom:12px;color:var(--ink);font-size:15px;font-weight:500}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc}
/* the closing clause has no numbered heading, so its contents entry is unnumbered too */
.toc li.toc-plain{counter-increment:none}
.toc li.toc-plain a::before{content:""}
.toc a{display:flex;gap:10px;padding:7px 0;color:var(--muted);font-size:15px;line-height:1.35;text-decoration:none;transition:color .25s var(--ease)}
.toc a::before{content:counter(toc) ".";min-width:20px;color:var(--orange-text);font-weight:500}
.toc a:hover{color:var(--ink)}
.prose section{padding:0 0 40px;margin-bottom:40px;border-bottom:1px solid var(--line);scroll-margin-top:32px}
.prose section:last-of-type{border-bottom:0;margin-bottom:0}
.prose h2{margin-bottom:16px;font-size:26px;line-height:1.25}
.prose p{margin-bottom:14px;color:var(--ink-2);font-size:17px;line-height:1.65}
.prose p:last-child{margin-bottom:0}
.prose ul{margin:0 0 16px;padding-left:22px;color:var(--ink-2);font-size:17px;line-height:1.65}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--orange-text)}
.prose a{color:var(--orange-text);text-underline-offset:3px}
.contact-card{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin-top:20px;padding:24px 28px;border-radius:var(--r-md);background:var(--soft);color:var(--ink-2);font-size:16px;line-height:1.5}
.contact-card dt{color:var(--muted);font-size:14px;line-height:1.6}
.contact-card dd{margin:0}
@media (max-width:991px){
  .legal-grid{grid-template-columns:1fr;gap:40px}
  .toc{position:static}
}
@media (max-width:767px){
  .legal-hero{padding:48px 0 36px}
  .prose h2{font-size:22px}
  .prose p,.prose ul{font-size:16px}
  .contact-card{grid-template-columns:1fr;gap:2px;padding:20px}
  .contact-card dd + dt{margin-top:10px}
}

/* 404 */
.notfound{padding:120px 0 140px}
.notfound h1{max-width:720px;margin:20px 0 18px}
.notfound p{max-width:540px;margin-bottom:34px;font-size:18px}
.notfound .btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:767px){
  .notfound{padding:64px 0 88px}
}

/* Form fallbacks: the always-visible email line, and the copy button in a form's note */
.form-alt{margin-top:10px;padding-left:18px;font-size:14px;color:rgba(255,255,255,.72)}
.form-alt a{position:relative;color:#fff;text-decoration:underline;text-underline-offset:2px}
.pray .form-alt{padding-left:20px;color:var(--muted)}
.pray .form-alt a{color:var(--ink)}
.note-copy{display:inline;padding:0;margin-left:2px;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* Utilities. These replace what used to be inline style attributes, so the Content Security
   Policy can forbid inline styles. !important keeps the precedence the inline styles had. */
.m-0{margin:0!important}
.mb-section{margin-bottom:var(--section)!important}
.pt-0{padding-top:0!important}
.pt-40{padding-top:40px!important}
.pb-20{padding-bottom:20px!important}
.d-80{--d:80ms!important}
.d-100{--d:100ms!important}
.d-120{--d:120ms!important}
.d-160{--d:160ms!important}
.d-200{--d:200ms!important}
.d-240{--d:240ms!important}
.d-300{--d:300ms!important}
.pos-22-50{object-position:22% 50%!important}
.pos-38-60{object-position:38% 60%!important}
.pos-42-50{object-position:42% 50%!important}
.pos-45-35{object-position:45% 35%!important}
.pos-45-40{object-position:45% 40%!important}
.pos-45-50{object-position:45% 50%!important}
.pos-50-25{object-position:50% 25%!important}
.pos-50-30{object-position:50% 30%!important}
.pos-50-35{object-position:50% 35%!important}
.pos-50-40{object-position:50% 40%!important}
.pos-50-45{object-position:50% 45%!important}
.pos-50-50{object-position:50% 50%!important}
.pos-50-60{object-position:50% 60%!important}
.pos-50-70{object-position:50% 70%!important}
.pos-50-80{object-position:50% 80%!important}
.pos-60-50{object-position:60% 50%!important}
.pos-72-50{object-position:72% 50%!important}
.pos-80-25{object-position:80% 25%!important}
.pos-80-50{object-position:80% 50%!important}
.pos-82-50{object-position:82% 50%!important}
.fit-contain{object-fit:contain!important}
.rot-n45{transform:rotate(-45deg)!important}
.bg-orange{background:var(--orange)!important}
.bg-orange-ui{background:var(--orange-ui)!important}
.bg-slate{background:var(--slate)!important}

/* Phones: every control is at least 44x44 (WCAG 2.5.5). Negative margins keep the layout as it was */
@media (max-width:767px){
  .inv-item h4 a{display:inline-block;padding:9px 0;margin:-9px 0}
  .jump a{display:inline-flex;align-items:center;min-height:44px}
  .gi-jump a,.copy{min-height:44px}
  .toc a{align-items:center;min-height:44px;padding:4px 0}
}

/* Smallest phones: room for four thumbnails, and a full-width bank panel so the IBANs stay on one line */
@media (max-width:420px){
  .thumbs{gap:8px}
  .thumb{width:60px;height:60px}
  .bank{margin:0 calc(-1 * var(--gutter));padding:40px 14px;border-radius:0}
  .iban-card{padding:20px 12px}
}

/* Launch audit, round 2 (visual review on the preview) */
.map-panel.plan .map-note{position:relative;left:auto;top:auto;max-width:none;margin-top:14px;box-shadow:none}
@media (min-width:992px) and (max-width:1180px){
  .cta-img{left:34%}
}
@media (min-width:768px) and (max-width:991px){
  .about-stats .nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px;width:100%}
}
@media (max-width:767px){
  .give-photo::after{background:linear-gradient(0deg,rgba(14,18,30,.84) 0%,rgba(14,18,30,.64) 40%,rgba(14,18,30,.3) 62%,rgba(14,18,30,0) 78%)}
  .envelope small{padding-right:64px}
  .member figcaption{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:8px 10px;border-radius:12px}
  .f-links ul:nth-child(3){grid-column:1/-1}
}
@media (max-width:420px){
  .step-1 .step-visual img{object-position:85% 12%}
  .planters .btns .btn{width:100%;justify-content:center;padding:12px 18px}
}
@media (min-width:992px) and (max-width:1180px){
  .map-note{position:relative;left:auto;top:auto;max-width:none;margin-top:14px;box-shadow:none}
}
/* Home story, 768-991: the text column reaches past the desktop scrim's fade, so the scrim reaches further */
@media (min-width:768px) and (max-width:1180px){
  .story::before{background:linear-gradient(90deg,rgba(16,26,44,.8) 0%,rgba(16,26,44,.68) 55%,rgba(16,26,44,.3) 80%,rgba(16,26,44,0) 100%)}
}
/* Home steps, 768-991: single-column cards are wide, so the phone frames get taller to show the whole map */
@media (min-width:768px) and (max-width:991px){
  .step{padding-bottom:420px}
  .step .step-visual{height:420px}
}
/* email links inside sentences: a 44px-tall tap area without moving the text */
.form-alt a,.form-actions small a,.prose a[href^="mailto:"],.contact-card dd a,.faq-a a{position:relative}
.form-alt a::after,.form-actions small a::after,.prose a[href^="mailto:"]::after,.contact-card dd a::after,.faq-a a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* Final review: CTA text clear of the photo at 992-1180; CTA panel and planters card insets */
@media (min-width:992px) and (max-width:1180px){
  .cta-copy .inner{max-width:390px}
  .planters{padding-top:48px;padding-bottom:48px}
}
@media (min-width:992px) and (max-width:1259px){
  .cta-wrap{padding:0 20px}
}
.nav-panel a[aria-current="page"]:not(.btn){background:var(--soft)}
/* Inline links right after a word: a tighter focus ring so it doesn't touch the word */
.form-alt a:focus-visible,.form-actions small a:focus-visible{outline-offset:1px}
@media (min-width:992px) and (max-width:1180px){
  .planters-map{margin-block:-24px}
}
/* Smallest phones: leader names and roles sit under the photo, so no face is covered */
@media (max-width:420px){
  .member{aspect-ratio:auto;background:var(--soft)}
  .member img{height:auto;aspect-ratio:380/440}
  .member figcaption{position:static;max-width:none;padding:10px 12px 12px;border-radius:0;background:none}
  .member h3{color:var(--ink)}
  .member small{color:var(--muted)}
}