/* ============ TOKENS ============ */
:root{
  --navy:#202121; --navy-2:#3A3A3C; --navy-ink:#202121;
  --orange:#EC008C; --orange-dark:#B4006B; --orange-light:#FDE3F0;
  --sky:#FFFFFF; --sky-deep:#FBE0EF;
  --green:#EC008C; --green-light:#FDE3F0;
  --paper:#FFFFFF; --white:#FFFFFF;
  --ink:#202121; --muted:#202121; --muted-2:#202121;
  --line:#E7E7E8;
  --r-lg:26px; --r-md:16px; --r-sm:10px;
  --shadow:0 20px 45px -22px rgba(32,33,33,.28);
  --shadow-sm:0 8px 20px -12px rgba(32,33,33,.22);
  --font-head:'Poppins',sans-serif; --font-body:'Inter',sans-serif;
  --ease:cubic-bezier(.22,.8,.28,1);
  /* Causes + Reviews palette — magenta/plum family, no black */
  --magenta:#EC008C; --magenta-deep:#B8006F; --pink-soft:#FF8AC9; --plum:#2B0A24;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
@supports (overflow:clip){ html,body{overflow-x:clip} }
h1,h2,h3,h4{font-family:var(--font-head); color:var(--navy); line-height:1.18; margin:0}
p{margin:0}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{list-style:none; margin:0; padding:0}
button{font-family:inherit; cursor:pointer}
.container{max-width:1200px; margin:0 auto; padding:0 24px}
.section{padding:96px 0}
@media (max-width:768px){ .section{padding:64px 0} }

/* =========================================================
   PENCIL THREAD — hand-drawn line with pencil that travels it
   ========================================================= */
#main{position:relative}
#thread{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none}
#thread #tBg{fill:none;stroke:#202121;stroke-opacity:.14;stroke-width:1.4;stroke-dasharray:1 8;stroke-linecap:round}
#thread #tHalo{fill:none;stroke:#fff;stroke-opacity:.6;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
#thread #tFg{fill:none;stroke:#202121;stroke-opacity:.82;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#thread #nodes .dot{fill:#fff;stroke:var(--ink);stroke-width:1.6;opacity:.7;transition:fill .5s}
#thread #nodes .on .dot{fill:var(--magenta)}
#thread #pencil{opacity:0;transition:opacity .4s}
#pencilUpper,#pencilLower{transition:transform .5s cubic-bezier(.22,1,.36,1)}
#pencilInner{transition:transform .35s cubic-bezier(.22,1,.36,1)}
#pencilInner{transition:opacity .25s}
#eraserInner{opacity:0; transform:rotate(38deg); transition:opacity .25s}
#pencil.erasing #pencilInner{opacity:0}
#pencil.erasing #eraserInner{opacity:1; animation:eraseRub .5s ease-in-out infinite}
@keyframes eraseRub{0%,100%{transform:translate(-4px,0) rotate(38deg)} 50%{transform:translate(4px,0) rotate(38deg)}}
#eraserCrumbs .crumb{fill:#FF8AC9; stroke:#202121; stroke-width:.5; opacity:0}
#pencil.erasing #eraserCrumbs .crumb{animation:crumbFall .8s ease-out infinite}
#eraserCrumbs .c2{animation-delay:.25s !important}
#eraserCrumbs .c3{animation-delay:.5s !important}
@keyframes crumbFall{0%{opacity:0; transform:translate(0,0)} 15%{opacity:1} 100%{opacity:0; transform:translate(6px,16px)}}
#pencil.broken #pencilUpper{transform:translate(-2px,-13px) rotate(-42deg) translate(-7px,20px)}
#pencil.broken #pencilLower{transform:translate(2px,-2px) rotate(38deg) translate(6px,5px)}
#pencil.broken #pencilInner{animation:pencilKick .4s cubic-bezier(.22,1,.36,1)}
#breakSpark{opacity:0; transform-box:fill-box; transform-origin:center}
#pencil.broken #breakSpark{animation:pencilSpark .5s ease-out forwards}
@keyframes pencilKick{
  0%{transform:rotate(38deg)}
  35%{transform:rotate(44deg) translate(1.5px,-2.5px)}
  100%{transform:rotate(38deg)}
}
@keyframes pencilSpark{
  0%{opacity:0; transform:scale(.3)}
  25%{opacity:1; transform:scale(1.25)}
  100%{opacity:0; transform:scale(2)}
}
.thread-anchor{position:absolute;top:46px;left:50%;width:0;height:0}
section{position:relative}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--orange); outline-offset:3px; border-radius:6px;
}
.skip-link{position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:12px 20px; z-index:999; border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* Eyebrow / section head */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600; font-size:.8rem; letter-spacing:.04em; color:var(--orange-dark); margin-bottom:14px}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--orange); display:inline-block; border-radius:2px}
.section-head{max-width:640px; margin-bottom:52px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head h2{font-size:clamp(1.9rem,3.2vw,2.6rem); margin-bottom:14px}
.section-head p{color:var(--muted); font-size:1.05rem}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600; font-size:.97rem; padding:14px 26px; border-radius:100px; border:2px solid transparent; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s}
.btn-primary{background:var(--orange); color:#fff; box-shadow:0 14px 30px -12px rgba(236,0,140,.55)}
.btn-primary:hover{background:var(--orange-dark); transform:translateY(-2px)}
.btn-outline{border-color:var(--navy); color:var(--navy); background:transparent}
.btn-outline:hover{background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-2px)}
.btn-ghost-light{border-color:rgba(255,255,255,.5); color:#fff}
.btn-ghost-light:hover{background:#fff; color:var(--navy)}
.btn-sm{padding:9px 16px; font-size:.85rem}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* Icon */
.ic{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in-view{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none} }

/* ============ HEADER ============ */
/* top of page: full-width pink bar + logo card. On scroll: floats as a frosted, rounded pill */
.site-header{position:sticky; top:0; z-index:200; display:flow-root; height:84px; background:var(--magenta); transition:background-color .45s var(--ease)}
.site-header.compact{background-color:rgba(236,0,140,0); pointer-events:none}
.site-header.compact .nav-inner{pointer-events:auto}
.nav-inner{position:relative; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:24px; height:84px; transition:height .45s var(--ease), max-width .45s var(--ease), margin .45s var(--ease), padding .45s var(--ease)}
.nav-inner::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:999px; background:rgba(236,0,140,.9); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.38); box-shadow:0 16px 36px -14px rgba(43,10,36,.6); opacity:0; transition:opacity .45s var(--ease)}
.site-header.compact .nav-inner{height:60px; margin-top:20px; max-width:min(1000px, calc(100% - 24px)); padding:0 12px 0 10px}
.site-header.compact .nav-inner::before{opacity:1}
/* logo card hangs below the bar; becomes a small chip inside the pill */
.brand{position:relative; align-self:flex-start; display:flex; align-items:center; justify-content:center; width:132px; height:120px; padding:10px 10px 12px; background:#fff; border-radius:0 0 20px 20px; box-shadow:0 16px 28px -14px rgba(43,10,36,.5); transition:width .45s var(--ease), height .45s var(--ease), padding .45s var(--ease), border-radius .45s var(--ease), box-shadow .45s}
.site-header.compact .brand{align-self:center; width:108px; height:90px; padding:7px; border-radius:18px}
.brand-logo{max-width:100%; max-height:100%; object-fit:contain}
.brand-fallback{display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.1}
.brand-mark{width:40px; height:40px; border-radius:50%; background:var(--plum); color:#fff; display:grid; place-items:center; margin-bottom:7px}
.brand-mark .ic{width:58%; height:58%}
.brand-name{white-space:nowrap; font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--magenta)}
.brand-name b{display:block; color:var(--plum); font-size:.82rem; letter-spacing:.02em}
.brand-fallback small{font-size:.44rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--plum); margin-top:4px}
/* menu */
.nav-links{display:flex; gap:30px; align-items:center; margin-left:auto}
.nav-links a{font-weight:500; font-size:.95rem; color:#fff; position:relative; padding:6px 0}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; border-radius:2px; background:#fff; transition:width .25s var(--ease)}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.active::after{width:100%}
.site-header.compact .nav-links{gap:26px}
.nav-cta{display:flex; align-items:center; gap:14px}
.nav-donate{display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--magenta); font-family:var(--font-head); font-weight:600; font-size:.92rem; padding:11px 24px; border-radius:8px; box-shadow:0 10px 20px -12px rgba(43,10,36,.55); transition:padding .45s var(--ease), border-radius .45s var(--ease), background .2s, transform .2s var(--ease)}
.nav-donate .ic{width:1.05em; height:1.05em; fill:var(--magenta); stroke:var(--magenta)}
.nav-donate:hover{background:var(--orange-light); transform:translateY(-1px)}
.site-header.compact .nav-donate{padding:9px 20px; border-radius:999px}
.hamburger{display:none; background:none; border:none; padding:8px; color:#fff}
.hamburger .ic{width:26px; height:26px}
@media (max-width:920px){
  .nav-inner{gap:12px}
  .brand{width:112px; height:88px; padding:8px 6px}
  .brand-name{font-size:.8rem}
  .brand-name b{font-size:.7rem}
  .brand-fallback small{display:none}
  .brand-mark{width:34px; height:34px; margin-bottom:5px}
  .site-header.compact .nav-inner{max-width:calc(100% - 16px); height:56px; margin-top:18px; padding:0 8px}
  .site-header.compact .brand{width:98px; height:80px; padding:6px}
  .nav-links{position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh; background:var(--paper); margin-left:0; flex-direction:column; align-items:flex-start; padding:96px 32px 32px; gap:26px; box-shadow:-20px 0 40px -20px rgba(32,33,33,.3); transform:translateX(100%); transition:transform .35s var(--ease); z-index:190}
  .site-header.compact .nav-links{gap:26px}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:1.1rem; color:var(--navy)}
  .nav-links a::after{background:var(--magenta)}
  .nav-links a.active{color:var(--magenta)}
  .hamburger{display:block}
  .nav-donate{padding:9px 16px; font-size:.85rem}
  .site-header.compact .nav-donate{padding:8px 14px}
}
.nav-overlay{display:none; position:fixed; inset:0; background:rgba(32,33,33,.4); z-index:180}
.nav-overlay.show{display:block}

/* ============ HERO SLIDER (full-width, 3-colour: #EC008C / #FFFFFF / #022121) ============ */
.hero{position:relative; overflow:hidden; padding:0; background:#022121; width:100%}
.hero-slider{position:relative; width:100%; height:88vh; min-height:580px; max-height:820px; overflow:hidden}
.hero-slide{position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease, visibility 0s linear .5s; z-index:1}
.hero-slide.is-active{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .5s ease; z-index:2}
.hero-slide-media{position:absolute; inset:0; overflow:hidden; background:#022121}
.hero-slide-media img{width:100%; height:100%; object-fit:cover; transform:none}
.hero-slide.is-active .hero-slide-media img{transform:none}

/* Very light white gradient on the left side */
.hero-slide-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.7) 30%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 75%);
}

.hero-slide-copy{position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:center; max-width:680px; padding:40px clamp(72px, 8vw, 120px) 96px}
.hero-slide-copy .eyebrow{color:#EC008C}
.hero-slide-copy .eyebrow::before{background:#EC008C}
.hero-slide-copy h1{font-size:clamp(2.1rem,4vw,3.2rem); font-weight:750; line-height:1.2; margin-bottom:18px; color:#202121}
.hero-slide-copy h1 .hl{color:#EC008C}
.hero-slide-copy>p{font-size:1.08rem; color:#202121; opacity:.92; max-width:520px; margin-bottom:26px; line-height:1.6}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:4}
.hero .btn-outline{border-color:#202121; color:#202121}
.hero .btn-outline:hover{background:#EC008C; border-color:#EC008C; color:#FFFFFF}
.hero-slide .hero-slide-copy>*{opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease}
.hero-slide.is-active .hero-slide-copy>*{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}
.hero-slide.is-active .hero-slide-copy>*:nth-child(1){transition-delay:.1s}
.hero-slide.is-active .hero-slide-copy>*:nth-child(2){transition-delay:.2s}
.hero-slide.is-active .hero-slide-copy>*:nth-child(3){transition-delay:.32s}
.hero-slide.is-active .hero-slide-copy>*:nth-child(4){transition-delay:.44s}
.hero-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); background:rgba(2,33,33,.4); backdrop-filter:blur(6px); color:#FFFFFF; display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s, transform .2s var(--ease)}
.hero-arrow:hover{background:#EC008C; border-color:#EC008C; transform:translateY(-50%) scale(1.06)}
.hero-arrow .ic{width:20px; height:20px}
.hero-arrow-prev{left:clamp(14px,2.5vw,28px)}
.hero-arrow-next{right:clamp(14px,2.5vw,28px)}
.hero-bottom{position:absolute; left:0; right:0; bottom:18px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 clamp(24px,6vw,96px); pointer-events:auto}
.trust-strip{display:flex; flex-wrap:wrap; gap:12px 24px; max-width:600px}
.trust-strip li{display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:#202121}
.trust-strip .ic{color:#EC008C; width:1.1em; height:1.1em; flex-shrink:0}
.hero-controls{display:flex; align-items:center; gap:16px; flex-shrink:0}
.hero-dots{display:flex; align-items:center; gap:9px}
.hero-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); border:none; padding:0; transition:background .25s, width .25s var(--ease)}
.hero-dot.is-active{background:#EC008C; width:24px; border-radius:5px}
.hero-playpause{width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); background:transparent; color:#FFFFFF; display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s; flex-shrink:0}
.hero-playpause:hover{background:rgba(255,255,255,.15)}
.hero-playpause .ic{width:13px; height:13px}
.hero-playpause .ic-play-icon{display:none}
.hero-playpause.is-paused .ic-pause-icon{display:none}
.hero-playpause.is-paused .ic-play-icon{display:block}
.hero-progress{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.16); z-index:5}
.hero-progress-bar{display:block; height:100%; width:0%; background:#EC008C}
.hero-progress-bar.animate{transition:width 15s linear}
@media (prefers-reduced-motion: reduce){
  .hero-slide{transition:opacity .3s linear, visibility 0s linear .3s}
  .hero-slide.is-active{transition:opacity .3s linear}
  .hero-slide-media img{transition:none}
  .hero-slide.is-active .hero-slide-media img{transform:none}
  .hero-slide-copy>*{transition:none}
  .hero-progress-bar.animate{transition:none}
}
@media (max-width:920px){
  .hero-slider{height:76vh; min-height:500px}
  .hero-slide-copy{max-width:none; padding:36px 24px 90px}
  .hero-bottom{flex-wrap:wrap; justify-content:center; bottom:14px; gap:12px}
  .trust-strip{justify-content:center; max-width:none}
  .hero-arrow{display:none}
}
@media (max-width:560px){
  .hero-slider{height:calc(100vh - 76px); min-height:560px; max-height:820px}
  .hero-slide-media::after{display:none}
  .hero-slide-scrim{display:none}
  .hero-slide-copy{justify-content:center; padding:20px 20px 110px}
  .hero-slide-copy h1{font-size:clamp(1.85rem,6.8vw,2.3rem)}
  .hero-slide-copy>p{font-size:.98rem; margin-bottom:20px}
  .hero-bottom{flex-direction:column; align-items:flex-start; bottom:12px; gap:10px}
  .trust-strip{justify-content:flex-start; gap:8px 14px}
  .trust-strip li{font-size:.76rem}
  .hero-controls{align-self:center}
  .hero-arrow{display:none}
}

/* ============ HERO: three different slide designs ============ */
/* shared: keep the hero controls readable on light and dark slides */
.hero-dot{background:rgba(32,33,33,.28)}
.hero-dot.is-active{background:#EC008C}
.hero-playpause{border-color:rgba(32,33,33,.4); color:#202121}
.hero-playpause:hover{background:rgba(32,33,33,.08)}
.hero-arrow{color:#fff}

/* 1 - EDUCATION: full photo, soft white fade on the left (the original look) */

/* 2 - HEALTH & NUTRITION: light pink panel on the left, two rounded photo cards on the right */
.hero-slide--health{background:linear-gradient(105deg,#fff 0%,#FFF1F8 55%,#FFE3F1 100%)}
.hero-slide--health .hero-slide-media{background:transparent; overflow:visible}
.hero-slide--health .hero-slide-media::after{display:none}
.hero-slide--health .hero-slide-media::before{content:""; position:absolute; right:-6%; top:50%; width:min(46vw,640px); aspect-ratio:1; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle at 40% 40%,#FF8AC9 0%,#EC008C 70%); opacity:.16}
.hs-photo{position:absolute; margin:0; border-radius:26px; overflow:hidden; background:#fff; border:6px solid #fff; box-shadow:0 30px 60px -24px rgba(43,10,36,.45)}
.hs-photo img{width:100%; height:100%; object-fit:cover; display:block}
.hs-photo--a{right:clamp(150px,19vw,290px); top:9%; width:clamp(230px,24vw,360px); aspect-ratio:4/5; transform:rotate(-3deg)}
.hs-photo--b{right:clamp(28px,5vw,90px); bottom:15%; width:clamp(210px,22vw,330px); aspect-ratio:1/1; transform:rotate(3deg)}
.hs-photo figcaption{position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:7px; background:#EC008C; color:#fff; font-family:var(--font-head); font-weight:600; font-size:.8rem; padding:7px 14px; border-radius:100px; box-shadow:0 8px 18px -8px rgba(43,10,36,.6)}
.hs-photo figcaption .ic{width:1em; height:1em}
.hero-slide--health .hero-slide-scrim{display:none}

/* 3 - WOMEN EMPOWERMENT: dark plum, white text, photo on the right cut by a diagonal edge */
.hero-slide--women{background:linear-gradient(115deg,#2B0A24 0%,#4A0F3D 60%,#7A0B5C 100%)}
.hero-slide--women .hero-slide-media{left:auto; right:0; width:62%; background:transparent; -webkit-clip-path:polygon(16% 0,100% 0,100% 100%,0 100%); clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
.hero-slide--women .hero-slide-media::after{display:none}
.hero-slide--women .hero-slide-media img{object-position:center 30%}
.hero-slide--women .hero-slide-scrim{position:absolute; top:0; bottom:0; right:0; width:62%; z-index:1; pointer-events:none; -webkit-clip-path:polygon(16% 0,100% 0,100% 100%,0 100%); clip-path:polygon(16% 0,100% 0,100% 100%,0 100%); background:linear-gradient(90deg,rgba(236,0,140,.35) 0%,rgba(236,0,140,0) 35%)}
.hero-slide--women::before{content:""; position:absolute; z-index:1; left:-8%; bottom:-30%; width:min(44vw,560px); aspect-ratio:1; border-radius:50%; border:2px solid rgba(255,138,201,.35); box-shadow:inset 0 0 0 30px rgba(236,0,140,.06)}
.hero-slide--women .hero-slide-copy h1{color:#fff}
.hero-slide--women .hero-slide-copy h1 .hl{color:#FF8AC9}
.hero-slide--women .hero-slide-copy>p{color:#fff; opacity:.9}
.hero-slide--women .hero-slide-copy .eyebrow{color:#FF8AC9}
.hero-slide--women .hero-slide-copy .eyebrow::before{background:#FF8AC9}
.hero .hero-slide--women .btn-outline{border-color:#fff; color:#fff}
.hero .hero-slide--women .btn-outline:hover{background:#fff; border-color:#fff; color:#EC008C}

/* controls turn light while the dark slide is showing */
.hero-slider:has(.hero-slide--women.is-active) .trust-strip li{color:#fff}
.hero-slider:has(.hero-slide--women.is-active) .trust-strip .ic{color:#FF8AC9}
.hero-slider:has(.hero-slide--women.is-active) .hero-dot{background:rgba(255,255,255,.4)}
.hero-slider:has(.hero-slide--women.is-active) .hero-dot.is-active{background:#EC008C}
.hero-slider:has(.hero-slide--women.is-active) .hero-playpause{border-color:rgba(255,255,255,.55); color:#fff}
.hero-slider:has(.hero-slide--women.is-active) .hero-playpause:hover{background:rgba(255,255,255,.15)}
.hero-slider:has(.hero-slide--women.is-active) .hero-progress{background:rgba(255,255,255,.16)}
.hero-slider:has(.hero-slide--health.is-active) .hero-progress, .hero-slider:has(.hero-slide--edu.is-active) .hero-progress{background:rgba(32,33,33,.10)}

/* tablets / phones: photos move behind the text with a readable fade */
@media (max-width:920px){
  .hs-photo--a{right:22px; top:6%; width:150px}
  .hs-photo--b{right:22px; bottom:auto; top:38%; width:130px}
  .hero-slide--health .hero-slide-copy{background:linear-gradient(90deg,rgba(255,255,255,.94) 60%,rgba(255,255,255,0) 100%)}
  .hero-slide--women .hero-slide-media, .hero-slide--women .hero-slide-scrim{width:100%; -webkit-clip-path:none; clip-path:none}
  .hero-slide--women .hero-slide-scrim{background:linear-gradient(90deg,rgba(43,10,36,.92) 0%,rgba(43,10,36,.72) 55%,rgba(43,10,36,.35) 100%)}
}
@media (max-width:560px){
  .hero-slide--health .hs-photo{display:none}
  .hero-slide--health .hero-slide-copy{background:none}
  .hero-slide--women .hero-slide-scrim{background:linear-gradient(190deg,rgba(43,10,36,.55) 0%,rgba(43,10,36,.85) 55%,rgba(43,10,36,.97) 100%)}
  .hero-slide--women::before{display:none}
}

/* Photo placeholder / fallback */
.photo{position:relative; overflow:hidden; background:linear-gradient(150deg,var(--sky-deep),var(--sky))}
.photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.photo.img-fallback img{display:none}
.photo.img-fallback::after{content:attr(data-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; font-family:var(--font-head); font-weight:600; font-size:.85rem; color:var(--navy-2); background:linear-gradient(150deg,var(--sky-deep),var(--sky))}
/* ============ ABOUT / TIMELINE ============ */
.about{background:var(--sky)}
.about-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:64px; align-items:stretch}
.about-copy h2{font-size:clamp(1.9rem,3.4vw,2.5rem); margin-bottom:20px}
.about-copy p{color:var(--muted); margin-bottom:16px; font-size:1.03rem}
.about-copy .lead{color:var(--navy); font-weight:600; font-family:var(--font-head); font-size:1.1rem}
.link-arrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600; color:var(--navy); margin-top:14px; border-bottom:2px solid var(--orange); padding-bottom:3px}
.link-arrow .ic{width:1.05em; height:1.05em; transition:transform .2s}
.link-arrow:hover .ic{transform:translateX(4px)}

.timeline{position:relative; padding-left:0}
.timeline::before{content:""; position:absolute; left:31px; top:4px; bottom:4px; width:2px; background:var(--line); z-index:0}
.t-item{position:relative; display:flex; align-items:flex-start; gap:20px; padding-bottom:30px}
.t-item:last-child{padding-bottom:0}
.t-badge{position:relative; z-index:1; flex:none; width:64px; height:64px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:.92rem; border:4px solid var(--sky); box-shadow:0 10px 22px -8px rgba(236,0,140,.55)}
.t-body{flex:1; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:16px 20px; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s}
.t-body:hover{transform:translateX(4px); box-shadow:var(--shadow)}
.t-body p{color:var(--muted); margin:0; max-width:420px}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr} }

/* ============ ICON BADGE (shared, used by Trust cards) ============ */
.cause-icon{width:46px; height:46px; border-radius:13px; background:var(--orange-light); color:var(--orange-dark); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(236,0,140,.5); border:3px solid #fff}
.cause-icon .ic{width:22px; height:22px}

/* ============ CAUSES (expanding panels) ============ */
.causes{background:var(--paper)}
.panels{display:flex; gap:14px; height:540px; margin-top:50px}
.panel{position:relative; flex:1; border-radius:28px; overflow:hidden; cursor:pointer; background:var(--g); transition:flex .75s var(--ease), height .75s var(--ease)}
.panel.active{flex:4.6}
.panel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.2); transition:transform 1.4s var(--ease)}
.panel.active img{transform:scale(1)}
.panel::after{content:""; position:absolute; inset:0; background:transparent; pointer-events:none}
.panel-ic{position:absolute; top:22px; left:50%; transform:translateX(-50%); z-index:1; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--magenta); transition:left .6s var(--ease), transform .6s var(--ease)}
.panel-ic .ic{width:26px; height:26px; stroke-width:1.7}
.panel.active .panel-ic{left:30px; transform:none}
.panel-label{position:absolute; z-index:1; left:50%; bottom:26px; writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg); font-family:var(--font-head); font-size:23px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6); white-space:nowrap; transition:opacity .35s}
.panel.active .panel-label{opacity:0}
.panel-body{position:absolute; z-index:1; left:14px; bottom:14px; width:min(440px,calc(100% - 28px)); padding:22px 26px; border-radius:20px; background:rgba(32,33,33,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; opacity:0; transform:translateY(26px); transition:opacity .45s, transform .7s var(--ease)}
.panel.active .panel-body{opacity:1; transform:none; transition-delay:.25s}
.cause-tag{display:inline-block; font-family:'Caveat',cursive; font-weight:700; font-size:24px; color:var(--pink-soft); line-height:1}
.panel h3{color:#fff; font-size:28px; margin:6px 0 8px; font-family:var(--font-head); font-weight:600}
.panel p{font-size:16px; margin-bottom:16px; color:#fbe9f4}
.cause-link{display:inline-flex; gap:8px; font-weight:600; font-family:var(--font-head); font-size:.92rem; background:#fff; color:var(--magenta); padding:9px 20px; border-radius:999px; transition:gap .3s, background .3s, color .3s}
.cause-link:hover{gap:14px; background:var(--pink-soft); color:var(--plum)}
@media (max-width:992px){
  .panels{height:auto; flex-direction:column}
  .panel{flex:none; height:96px}
  .panel.active{flex:none; height:400px}
  .panel-ic{top:50%; left:24px; transform:translateY(-50%)}
  .panel.active .panel-ic{top:22px; transform:none; left:24px}
  .panel-label{writing-mode:horizontal-tb; transform:translateY(50%); left:92px; bottom:50%; font-size:22px}
  .panel-body{width:calc(100% - 28px); padding:18px 20px}
}

/* ============ TRUST ============ */
.trust-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:56px}
.trust-card{position:relative; border:1.5px solid var(--line); border-radius:var(--r-md); padding:26px; background:#fff; transition:border-color .25s, transform .25s var(--ease)}
.trust-card:hover{border-color:var(--green); transform:translateY(-4px)}
.trust-card .cause-icon{margin-top:0; background:var(--green-light); color:var(--green)}
.trust-card h3{font-size:1.02rem; margin-bottom:8px}
.trust-card p{color:var(--muted); font-size:.9rem}
.logo-strip-label{text-align:center; font-size:.82rem; color:var(--muted-2); margin-bottom:16px; letter-spacing:.03em; font-weight:600}
.logo-strip{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:44px}
.logo-strip span{font-family:var(--font-head); font-weight:600; font-size:.85rem; color:var(--muted-2); border:1px solid var(--line); border-radius:100px; padding:9px 20px; background:#fff}
.logo-strip-sec{background:#F7F7F8; padding:56px 0}
.logo-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-marquee-track{display:flex; align-items:center; gap:14px; width:max-content; animation:logoScroll 26s linear infinite}
.logo-marquee:hover .logo-marquee-track{animation-play-state:paused}
@keyframes logoScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .logo-marquee-track{animation:none; flex-wrap:wrap; justify-content:center; width:auto} }
@media (max-width:920px){ .trust-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .trust-grid{grid-template-columns:1fr} }

/* ---- Trust: compact tick cards + verified chips ---- */
.trust-sec{padding:64px 0}
.trust-sec .section-head{margin-bottom:0}
.trust-grid{grid-template-columns:repeat(4,1fr); gap:16px; margin:32px 0 32px}
.trust-card{position:relative; padding:20px}
.trust-card .cause-icon{width:40px; height:40px; margin-bottom:12px}
.trust-card h3{font-size:.98rem; margin-bottom:4px}
.trust-card p{font-size:.85rem}
.trust-tick{display:none !important}
.trust-tick .ic{width:12px; height:12px; stroke-width:3}
.trust-sec .logo-strip-label{margin-bottom:12px}
.verify-row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.verify-chip{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:100px; padding:6px 16px 6px 7px; font-family:var(--font-head); font-weight:600; font-size:.82rem; color:var(--navy)}
.verify-chip i{width:22px; height:22px; border-radius:50%; background:var(--magenta); color:#fff; display:grid; place-items:center}
.verify-chip .ic{width:12px; height:12px; stroke-width:3}
@media (max-width:920px){ .trust-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .trust-grid{grid-template-columns:1fr} .trust-sec{padding:48px 0} }

/* ============ GALLERY: video card, video popup, photo lightbox ============ */
.g-video{background:#202121}
.g-video .g-cover{position:absolute; inset:0}
.g-video::after{display:none}
.g-play{position:absolute; z-index:3; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:var(--magenta); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 6px rgba(255,255,255,.28); transition:transform .3s var(--ease), box-shadow .3s}
.g-video:hover .g-play{transform:scale(1.1); box-shadow:0 0 0 9px rgba(255,255,255,.34)}
.g-play .ic{width:20px; height:20px; fill:#fff; stroke:#fff; margin-left:3px}
.gallery-card[data-lightbox]:focus-visible,.g-video:focus-visible{outline:3px solid var(--magenta); outline-offset:3px}
html.lb-lock, html.lb-lock body{overflow:hidden}

/* video popup */
.vb{position:fixed; inset:0; z-index:520; background:rgba(18,18,20,.92); display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s}
.vb.open{opacity:1; visibility:visible}
.vb-box{position:relative; width:min(960px,100%); aspect-ratio:16/9; background:#000; border-radius:16px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); transform:scale(.94); transition:transform .35s var(--ease)}
.vb.open .vb-box{transform:none}
.vb-box iframe,.vb-box video{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:16px; background:#000}
.vb-close{position:absolute; top:-52px; right:0}

/* photo lightbox: swipe / scroll left-right */
.lb{position:fixed; inset:0; z-index:500; background:rgba(18,18,20,.96); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s}
.lb.open{opacity:1; visibility:visible}
.lb-track{height:100%; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior:contain; scrollbar-width:none}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%; width:100%; height:100vh; height:100dvh; scroll-snap-align:center; scroll-snap-stop:always; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 84px 28px; gap:16px}
.lb-slide img{max-width:min(1100px,100%); max-height:calc(100dvh - 190px); width:auto; height:auto; object-fit:contain; border-radius:16px; box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.lb-cap{text-align:center; color:#fff; max-width:640px}
.lb-cap .gallery-tag{margin-bottom:8px}
.lb-cap h3{color:#fff; font-size:1.25rem}
.lb-cap p{color:rgba(255,255,255,.8); font-size:.92rem; margin-top:4px}
.lb-btn{position:absolute; z-index:2; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; transition:background .25s}
.lb-btn:hover{background:var(--magenta)}
.lb-btn .ic{width:22px; height:22px}
.lb-close{top:18px; right:18px}
.lb-prev{left:18px; top:50%; margin-top:-23px}
.lb-next{right:18px; top:50%; margin-top:-23px}
.lb-count{position:absolute; z-index:2; top:26px; left:24px; color:#fff; font-family:var(--font-head); font-weight:600; font-size:.9rem; letter-spacing:.04em}
@media (max-width:600px){ .lb-slide{padding:64px 12px 24px} .lb-prev,.lb-next{top:auto; bottom:22px; margin-top:0} .vb-close{top:-50px} }

/* ============ ABOUT: focus chips ============ */
.about-focus{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 14px; padding:0}
.about-focus li{background:var(--orange-light); color:var(--orange-dark); font-family:var(--font-head); font-weight:600; font-size:.8rem; padding:7px 14px; border-radius:100px}
.about-copy .about-reg{font-size:.85rem; color:var(--muted-2); margin:0 0 18px}

/* ============ ABOUT JOURNEY ============ */
.journey{position:relative; display:flex; flex-direction:column}
.journey-title{font-family:var(--font-head); font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-dark); margin:0 0 16px 48px}
.journey-line{position:absolute; left:8px; top:44px; height:0; width:2px; background:var(--line); border-radius:2px}
.journey-fill{position:absolute; left:0; top:0; width:100%; height:0; background:var(--magenta); border-radius:2px}
.journey-list{list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:14px}
.j-item{position:relative; padding-left:48px}
.j-dot{position:absolute; left:0; top:19px; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--ink); z-index:1; transition:background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease)}
.j-card{background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px 20px 16px; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s}
.j-card:hover{transform:translateX(4px); box-shadow:var(--shadow); border-color:var(--pink-soft)}
.j-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px}
.j-year{display:block; overflow:hidden; height:1.2em; font-family:var(--font-head); font-weight:800; font-size:1.5rem; line-height:1.2; color:var(--magenta)}
.j-year i{display:block; font-style:normal}
.j-card h3{font-size:1rem; margin:0}
.j-card p{margin:6px 0 0; color:var(--muted); font-size:.9rem; line-height:1.5; max-width:440px}

/* animation only when JS is running */
.journey.js-on .j-item .j-card{opacity:0; transform:translateX(28px); transition:opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s var(--ease), border-color .35s}
.journey.js-on .j-item .j-year i{transform:translateY(110%); transition:transform .8s var(--ease) .12s}
.journey.js-on .j-item.on .j-card{opacity:1; transform:none}
.journey.js-on .j-item.on .j-card:hover{transform:translateX(4px)}
.journey.js-on .j-item.on .j-year i{transform:none}
.j-item.on .j-dot{background:var(--magenta); border-color:var(--magenta); transform:scale(1.12); animation:j-ring 1.4s var(--ease) 1}
.j-item.j-now.on .j-dot{animation:j-ring 1.4s var(--ease) 1, j-beat 2.4s ease-in-out 1.4s infinite}
@keyframes j-ring{0%{box-shadow:0 0 0 0 rgba(236,0,140,.5)} 100%{box-shadow:0 0 0 16px rgba(236,0,140,0)}}
@keyframes j-beat{0%,100%{box-shadow:0 0 0 0 rgba(236,0,140,.35)} 50%{box-shadow:0 0 0 9px rgba(236,0,140,0)}}
@media (prefers-reduced-motion:reduce){
  .journey.js-on .j-item .j-card,.journey.js-on .j-item .j-year i{opacity:1; transform:none; transition:none}
  .j-item.on .j-dot,.j-item.j-now.on .j-dot{animation:none}
}

/* ============ IMPACT ============ */
.impact{background:#fff; position:relative; overflow:hidden; color:var(--ink)}
.impact-head{max-width:640px; margin-bottom:40px}
.impact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.impact-video{position:relative}
.impact-video::before{content:""; position:absolute; inset:14px -14px -14px 14px; border-radius:var(--r-lg); background:var(--orange-light); z-index:0}
.impact-link{margin-top:32px}

.impact-stats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr}
.impact-stats li{position:relative; padding:34px 28px}
.impact-stats b{display:block; font-family:var(--font-head); font-weight:700; font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1; color:var(--magenta)}
.impact-stats li>span{display:block; margin-top:10px; color:var(--muted); font-size:.95rem}

/* Odometer roll: each digit spins like a counter reel */
.od{display:inline-flex; height:1em; clip-path:inset(0 -.4em)}
.od-digit{display:inline-block; height:1em; clip-path:inset(0 -.4em)}
.od-reel{display:flex; flex-direction:column; transform:translateY(0); transition:transform 1.9s cubic-bezier(.16,.84,.24,1)}
.od-reel span{display:flex; justify-content:center; height:1em; line-height:1em}
.od-sym{display:inline-block; height:1em; line-height:1em}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* pink line draws under each stat once the numbers roll */
/* thin pink cross: one vertical line between the columns, one horizontal line between the rows */
.impact-stats li{border:0 solid transparent; transition:border-color 1s ease .3s}
.impact-stats li:nth-child(odd){border-right-width:1px}
.impact-stats li:nth-child(-n+2){border-bottom-width:1px}
.impact-stats.is-in li{border-color:var(--magenta)}

/* Hover: pink fill sweeps up, text slides in and turns white */
.impact-stats li::before{content:""; position:absolute; inset:0; z-index:0; border-radius:14px; background:var(--magenta); transform:scaleY(0); transform-origin:bottom; transition:transform .55s cubic-bezier(.16,.84,.24,1)}
.impact-stats li>b,.impact-stats li>span{position:relative; z-index:1; transition:transform .5s cubic-bezier(.16,.84,.24,1), color .3s}
@media (hover:hover){
  .impact-stats li{cursor:default}
  .impact-stats li:hover::before{transform:scaleY(1)}
  .impact-stats li:hover>b{color:#fff; transform:translateX(18px) translateY(-3px)}
  .impact-stats li:hover>span{color:rgba(255,255,255,.92); transform:translateX(18px)}
}
@media (prefers-reduced-motion:reduce){
  .od-reel,.impact-stats li::after,.impact-stats li::before,.impact-stats li>b,.impact-stats li>span{transition:none}
}

@media (max-width:920px){ .impact-grid{grid-template-columns:1fr; gap:40px} .impact-video{max-width:560px} }
@media (max-width:520px){ .impact-stats b{font-size:1.7rem} .impact-stats li{padding:26px 16px} }

/* ============ IMPACT VIDEO ============ */
.impact-video-player{position:relative; z-index:1; width:100%; aspect-ratio:16/9; background:var(--ink); overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--shadow)}
.impact-video-thumb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .4s}
.impact-video-player:hover .impact-video-thumb{transform:scale(1.03)}
.impact-video-player.playing .impact-video-thumb{opacity:0; pointer-events:none}
.impact-video-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(32,33,33,.05) 30%, rgba(32,33,33,.6) 100%); transition:opacity .4s}
.impact-video-player.playing .impact-video-overlay{opacity:0; pointer-events:none}
.impact-play-btn{position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:var(--magenta); border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 8px rgba(255,255,255,.35); cursor:pointer; transition:transform .25s var(--ease), opacity .4s}
.impact-play-btn:hover{transform:scale(1.08)}
.impact-play-btn svg{width:30px; height:30px}
.impact-video-player.playing .impact-play-btn{opacity:0; pointer-events:none}
.impact-video-label{position:absolute; left:18px; bottom:16px; color:#fff; font-family:var(--font-head); font-weight:600; font-size:.9rem; transition:opacity .4s}
.impact-video-player.playing .impact-video-label{opacity:0; pointer-events:none}
.impact-iframe{position:absolute; inset:0; width:100%; height:100%; border:none; opacity:0; transition:opacity .5s; pointer-events:none}
.impact-video-player.playing .impact-iframe{opacity:1; pointer-events:auto}

/* ============ BENTO GALLERY ============ */
.events{background:var(--sky)}
.events .section-head h2, .events .eyebrow{color:var(--navy)}
.events .eyebrow::before{background:var(--orange)}
.events .section-head p{color:var(--muted)}
.gallery-grid{display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:220px 220px; gap:18px}
.gallery-card{position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s}
.gallery-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.gallery-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.gallery-card:hover img{transform:scale(1.06)}
.gallery-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(32,33,33,.72) 100%); pointer-events:none}
.gallery-card-content{position:absolute; bottom:0; left:0; right:0; padding:20px 22px; z-index:2; display:flex; flex-direction:column; gap:6px}
.gallery-tag{display:inline-block; width:fit-content; font-family:var(--font-head); font-weight:600; font-size:.72rem; letter-spacing:.03em; padding:5px 14px; border-radius:100px; background:var(--magenta); color:#fff}
.gallery-card-content h3{color:#fff; font-size:1.25rem; font-weight:700; margin:0; line-height:1.25}
.gallery-card-content p{color:rgba(255,255,255,.9); font-size:.88rem; margin:0; line-height:1.5}
/* Featured card — spans left column, full height */
.gallery-card.g-featured{grid-column:1; grid-row:1 / 3}
.gallery-card.g-featured .gallery-card-content h3{font-size:clamp(1.4rem,2.5vw,1.8rem)}
.events-foot{text-align:center; margin-top:56px}
/* Celebrity gallery: 4 visible, rest only in the viewer */
.gallery-card.g-hidden{display:none}
.gallery-card[data-lightbox] img{object-position:center 20%}
@media (max-width:920px){
  .gallery-grid{grid-template-columns:1fr 1fr; grid-template-rows:200px 200px 200px}
  .gallery-card.g-featured{grid-column:1 / 3; grid-row:1}
}
@media (max-width:600px){
  .gallery-grid{grid-template-columns:1fr; grid-template-rows:auto}
  .gallery-card{min-height:200px}
  .gallery-card.g-featured{grid-column:1; grid-row:auto}
}

/* ============ REVIEWS (one section-wide bg image + glass cards) ============ */
.stories{position:relative; overflow:hidden; isolation:isolate}
.stories-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.stories::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(32,33,33,.78)}
.stories .eyebrow{color:#FF8AC9}
.stories .eyebrow::before{background:#FF8AC9}
.stories .section-head h2{color:#fff}
.stories .section-head p{color:rgba(255,255,255,.82)}
.stories .container{position:relative; z-index:1}
.reviews-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px}
.review-card{position:relative; display:flex; flex-direction:column; padding:24px 22px 20px; background:rgba(255,255,255,.14); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.32); border-radius:20px; transition:transform .3s var(--ease), background .3s}
.review-card:hover{transform:translateY(-6px); background:rgba(255,255,255,.2)}
.review-stars{order:-1; margin-bottom:12px; color:#FFC96B; font-size:17px; letter-spacing:3px; line-height:1}
.review-card .quote{flex:1; font-family:var(--font-body); font-weight:500; font-size:17px; line-height:1.55; color:#fff; margin-bottom:18px}
.review-from{display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid rgba(255,255,255,.3)}
.review-av{position:relative; flex:none; width:42px; height:42px; border-radius:50%; background:var(--magenta); color:#fff; display:grid; place-items:center; font-weight:600; overflow:hidden; border:2px solid rgba(255,255,255,.7)}
.review-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.review-from b{display:block; font-family:var(--font-body); font-weight:600; font-size:16px; line-height:1.3; color:#fff}
.review-from span.role{font-size:13px; color:rgba(255,255,255,.82)}
@media (max-width:992px){ .reviews-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .reviews-grid{grid-template-columns:1fr; max-width:400px; margin-left:auto; margin-right:auto} }

/* ============ FINAL DONATE CTA BAR ============ */
.final-cta{
  position:relative;
  background:#fff;
  min-height:clamp(360px,29.2vw,560px);
}

/* The PNG (1920x560) is the section:
   transparent top, soft pink band with the girl on the left.
   Text + button sit on its pink part.
*/
.final-cta-band{
  position:absolute;
  inset:0;
}

.final-cta-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left bottom;
  display:block;
  pointer-events:none;
  z-index:1;
}

.final-cta-inner{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:52%;
  margin:0 auto;
  height:46%;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:32px;
  padding-left:clamp(0px,22vw,380px);
}
.final-cta-text{
  text-align:center;
}

.final-cta-text h3{
  color:#fff;
  font-size:1.5rem;
}

.final-cta-text p{
  color:rgba(255,255,255,.9);
  font-size:.96rem;
  max-width:480px;
  margin:6px auto 0;
}

/* Text shadow for better readability */
.final-cta-text h3,
.final-cta-text p{
  text-shadow:0 2px 14px rgba(43,10,36,.45);
}

/* Hide fallback overlay when artwork exists */
.final-cta.no-art .final-cta-band::after{
  display:none;
}

/* Fallback if the image file is missing:
   plain pink bar
*/
.final-cta.no-art{
  min-height:0;
  padding:90px 0 0;
}

.final-cta.no-art .final-cta-band{
  position:relative;
  background:var(--magenta);
  padding:56px 0;
}

.final-cta.no-art .final-cta-inner{
  position:relative;
  top:auto;
  height:auto;
}

.btn-cta{
  background:#fff;
  color:var(--magenta-deep);
  flex:none;
}

.btn-cta:hover{
  background:#FFE6F2;
  transform:translateY(-2px);
}

@media (max-width:700px){

  .final-cta{
    min-height:560px;
  }

  .final-cta-inner{
    /* Mobile position */
    top:17%;

    height:auto;
    grid-template-columns:1fr;
    justify-items:center;
    align-content:center;
    gap:14px;
    padding-left:0;
  }

  .final-cta-text h3{
    font-size:1.25rem;
  }

  .final-cta.no-art .final-cta-inner{
    height:auto;
    padding-left:0;
  }
}

/* ============ FOOTER ============ */
.site-footer{background:var(--navy); color:#C7CFE3; padding:76px 0 0}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1.1fr 1fr 1.1fr; gap:32px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.1)}
.footer-logo{display:inline-block; margin-bottom:18px}
.footer-logo img{display:block; width:150px; height:auto}
@media (max-width:560px){ .footer-logo img{width:130px} }
.footer-grid p{font-size:.92rem; line-height:1.7; color:#9AA6C2; max-width:280px}
.social-row{display:flex; gap:10px; margin-top:20px}
.social-row a{width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s, border-color .2s, transform .2s}
.social-row svg{width:16px; height:16px; fill:currentColor}
.social-row a:hover, .social-row a:focus-visible{background:var(--magenta); border-color:var(--magenta); transform:translateY(-2px)}
.footer-grid h4{color:#fff; font-size:.95rem; margin-bottom:18px}
.footer-grid ul li{margin-bottom:11px}
.footer-grid ul a{color:#9AA6C2; font-size:.92rem; transition:color .2s}
.footer-grid ul a:hover{color:var(--orange)}
.contact-list li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:#9AA6C2}
.contact-list .ic{width:16px; height:16px; margin-top:3px; flex-shrink:0; color:var(--orange)}
.footer-bottom{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; padding:24px 0; font-size:.82rem; color:#7C89AC}
.footer-bottom .links{display:flex; gap:20px}
.footer-bottom a:hover{color:#fff}
.made-with{text-align:center; font-size:.82rem; color:#7C89AC; padding-bottom:22px}
.made-with .ic{width:.9em; height:.9em; fill:var(--orange); stroke:none; vertical-align:-1px}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column; align-items:flex-start} }

/* ============ BACK TO TOP ============ */
.to-top{position:fixed; right:22px; bottom:24px; width:48px; height:48px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); border:none; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s, visibility .25s var(--ease); z-index:150}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top:hover{transform:translateY(-3px); box-shadow:0 14px 28px -6px rgba(236,0,140,.5)}
.to-top .ic{width:20px; height:20px}

.btn-cta.hit{box-shadow:0 0 0 6px rgba(255,255,255,.5), 0 16px 36px -8px rgba(0,0,0,.35); transform:translateY(-2px) scale(1.04)}
#finalDonateBtn{position:relative; opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:opacity .3s ease, transform .3s ease, visibility 0s linear .5s}
#finalDonateBtn.revealed{opacity:1; visibility:visible; transform:none; transition:visibility 0s linear; animation:donatePop .6s cubic-bezier(.22,1.6,.36,1) .3s both}
#finalDonateBtn.revealed::after{content:''; position:absolute; inset:-6px; border-radius:inherit; border:2px solid var(--orange); opacity:0; pointer-events:none; animation:donateRing .7s ease-out .3s}
@keyframes donatePop{
  0%{opacity:0; transform:translateY(16px) scale(.55) rotate(-8deg)}
  55%{opacity:1; transform:translateY(-5px) scale(1.08) rotate(2deg)}
  100%{opacity:1; transform:translateY(0) scale(1) rotate(0)}
}
@keyframes donateRing{
  0%{opacity:.8; transform:scale(.85)}
  100%{opacity:0; transform:scale(1.4)}
}

/* ============ SMOOTH SCROLL / MOUSE ANIMATION LAYER ============ */
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }

.cursor-glow{
  position:fixed; top:0; left:0; width:360px; height:360px; margin:-180px 0 0 -180px;
  border-radius:50%; pointer-events:none; z-index:1; mix-blend-mode:normal;
  background:radial-gradient(circle, rgba(236,0,140,.10) 0%, rgba(236,0,140,0) 70%);
  will-change:transform;
}
@media (max-width:920px){ .cursor-glow{ display:none } }

.btn-primary, .btn-cta, .btn-outline{ will-change:transform }

/* ===== Corporate / CSR Partners (logo strip) ===== */
.partners-section{background:#fff; padding:64px 0 56px}
.partners-section .section-head{margin-bottom:32px}
.partners-section .eyebrow{color:#EC008C}
.partners-section .eyebrow::before{background:#EC008C}
.partners-title{font-family:var(--font-head); font-weight:800; font-size:clamp(1.7rem,2.6vw,2.15rem); color:#EC008C}
.partners-underline{display:block; width:52px; height:3px; border-radius:2px; background:#EC008C; margin:14px auto 0}
.partners-track-wrap{overflow:hidden; margin:0; padding:4px 40px 6px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.partners-track{display:flex; gap:28px; width:max-content; animation:partners-scroll 32s linear infinite}
.partner-card{flex-shrink:0; width:300px; height:170px; border:0; border-radius:0; background:transparent; box-shadow:none; display:flex; align-items:center; justify-content:center; padding:0}
.partner-card img{width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none}
@keyframes partners-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.partners-track-wrap:hover .partners-track,.partners-track-wrap:hover ~ .partners-progress .partners-progress-bar{animation-play-state:paused}
.partners-progress{max-width:220px; margin:26px auto 0}
.partners-progress-track{position:relative; height:6px; border-radius:100px; background:#FFE0F2; overflow:hidden}
.partners-progress-bar{position:absolute; top:0; left:0; height:100%; width:30%; border-radius:100px; background:linear-gradient(90deg,#FF8AC9,#EC008C); box-shadow:0 0 10px 0 rgba(236,0,140,.45); animation:partners-progress-sweep 32s var(--ease) infinite}
@keyframes partners-progress-sweep{0%{transform:translateX(-110%)} 50%{transform:translateX(220%)} 100%{transform:translateX(-110%)}}
@media (max-width:600px){.partner-card{width:210px; height:120px; padding:0}.partners-track-wrap{margin:0; padding:4px 20px 6px}}
@media (prefers-reduced-motion:reduce){.partners-track{animation:none}.partners-progress-bar{animation:none; width:100%}}

/* ===== Top bar: phone + social icons (scrolls away; nav stays sticky) ===== */
.topbar{background:#fff; color:#202121; font-size:.84rem; position:relative; z-index:201; border-bottom:1px solid #E7E7E8}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; height:40px}
.topbar-phone{display:inline-flex; align-items:center; gap:8px; font-weight:600; letter-spacing:.02em; color:#202121; transition:color .2s}
.topbar-phone .ic{width:15px; height:15px; color:#EC008C; stroke-width:2}
.topbar-phone:hover{color:#EC008C}
.topbar-social{display:flex; align-items:center; gap:8px}
.topbar-social a{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#EC008C; background:#FDE3F0; transition:background .25s, color .25s, transform .25s}
.topbar-social svg{width:14px; height:14px; fill:currentColor}
.topbar-social a:hover, .topbar-social a:focus-visible{background:#EC008C; color:#fff; transform:translateY(-2px)}
@media (max-width:480px){ .topbar-inner{height:36px} .topbar-phone{font-size:.8rem} .topbar-social{gap:6px} .topbar-social a{width:26px; height:26px} }

/* ===== Trust cards: title sits beside the icon ===== */
.trust-card{display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:10px; align-items:center}
.trust-card .cause-icon{grid-column:1; grid-row:1; margin:0; flex-shrink:0}
.trust-card h3{grid-column:2; grid-row:1; margin:0; line-height:1.25}
.trust-card p{grid-column:1 / -1; grid-row:2}

/* =========================================================
   EXTRA MOTION — soft scroll entrances + hover life
   (all switched off for "reduce motion" users)
   ========================================================= */
@keyframes fadeUp{from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:none}}
@keyframes zoomIn{from{opacity:0; transform:scale(.92) translateY(20px)} to{opacity:1; transform:none}}
@keyframes popIn{from{opacity:0; transform:translateY(12px) scale(.9)} to{opacity:1; transform:none}}
@keyframes lineGrow{from{width:0} to{width:22px}}
@keyframes underlineGrow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes iconWiggle{0%{transform:rotate(0) scale(1)} 30%{transform:rotate(-12deg) scale(1.12)} 60%{transform:rotate(8deg) scale(1.12)} 100%{transform:rotate(0) scale(1)}}
@keyframes floatY{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
@keyframes heartBeat{0%,60%,100%{transform:scale(1)} 15%{transform:scale(1.22)} 30%{transform:scale(1)} 45%{transform:scale(1.14)}}
@keyframes btnShine{from{transform:translateX(-120%) skewX(-20deg)} to{transform:translateX(320%) skewX(-20deg)}}

/* scroll progress line */
.scroll-progress{position:fixed; top:0; left:0; width:100%; height:3px; z-index:400; background:linear-gradient(90deg,#FF8AC9,#EC008C); transform-origin:left; transform:scaleX(0); pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  /* directional entrances */
  .about-copy.reveal:not(.in-view){transform:translateX(-40px)}
  .impact-video.reveal:not(.in-view){transform:translateX(40px)}
  .impact-stats.reveal:not(.in-view){transform:translateX(-40px)}

  /* eyebrow line draws itself */
  .reveal.in-view .eyebrow::before, .reveal.in-view.eyebrow::before{animation:lineGrow .7s var(--ease) .2s backwards}

  /* staggered cards */
  .trust-card.reveal.in-view{animation:fadeUp .8s var(--ease) backwards}
  .trust-card.reveal:nth-child(2).in-view{animation-delay:.12s}
  .trust-card.reveal:nth-child(3).in-view{animation-delay:.24s}
  .trust-card.reveal:nth-child(4).in-view{animation-delay:.36s}

  .gallery-grid .gallery-card.reveal.in-view{animation:zoomIn .85s var(--ease) backwards}
  .gallery-grid .gallery-card.reveal:nth-child(2).in-view{animation-delay:.1s}
  .gallery-grid .gallery-card.reveal:nth-child(3).in-view{animation-delay:.2s}
  .gallery-grid .gallery-card.reveal:nth-child(4).in-view{animation-delay:.3s}
  .gallery-grid .gallery-card.reveal:nth-child(5).in-view{animation-delay:.4s}

  .verify-row.in-view .verify-chip{animation:popIn .6s var(--ease) backwards}
  .verify-row.in-view .verify-chip:nth-child(2){animation-delay:.08s}
  .verify-row.in-view .verify-chip:nth-child(3){animation-delay:.16s}
  .verify-row.in-view .verify-chip:nth-child(4){animation-delay:.24s}
  .verify-row.in-view .verify-chip:nth-child(5){animation-delay:.32s}

  .about-copy.in-view .about-focus li{animation:popIn .6s var(--ease) backwards}
  .about-copy.in-view .about-focus li:nth-child(1){animation-delay:.25s}
  .about-copy.in-view .about-focus li:nth-child(2){animation-delay:.33s}
  .about-copy.in-view .about-focus li:nth-child(3){animation-delay:.41s}
  .about-copy.in-view .about-focus li:nth-child(4){animation-delay:.49s}

  .programs-list.in-view li{animation:popIn .55s var(--ease) backwards}
  .programs-list.in-view li:nth-child(2){animation-delay:.07s}
  .programs-list.in-view li:nth-child(3){animation-delay:.14s}
  .programs-list.in-view li:nth-child(4){animation-delay:.21s}
  .programs-list.in-view li:nth-child(5){animation-delay:.28s}
  .programs-list.in-view li:nth-child(6){animation-delay:.35s}
  .programs-list.in-view li:nth-child(7){animation-delay:.42s}

  /* partners underline draws in */
  .partners-underline{transform-origin:center; animation:underlineGrow .9s var(--ease) .3s backwards}

  /* hover life */
  .trust-card:hover .cause-icon{animation:iconWiggle .6s var(--ease)}
  .verify-chip{transition:transform .25s var(--ease), border-color .25s, box-shadow .25s}
  .verify-chip:hover{transform:translateY(-3px); border-color:#EC008C; box-shadow:0 10px 20px -12px rgba(236,0,140,.5)}
  .about-focus li{transition:transform .25s var(--ease), background .25s, color .25s}
  .about-focus li:hover{transform:translateY(-3px); background:#EC008C; color:#fff}
  .programs-list li{transition:transform .25s var(--ease), background .25s, color .25s}
  .programs-list li:hover{transform:translateY(-3px); background:#EC008C !important; color:#fff !important}
  .partner-card img{transition:transform .35s var(--ease)}
  .partner-card:hover img{transform:scale(1.07)}

  /* gentle always-on life (small + slow) */
  .nav-donate .ic{animation:heartBeat 2.2s ease-in-out infinite; transform-origin:center}
  .panel.active .panel-ic .ic-solid{animation:floatY 3s ease-in-out infinite}
  .hero-actions .btn-primary{position:relative; overflow:hidden}
  .hero-actions .btn-primary::after{content:""; position:absolute; top:0; left:0; width:35%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:translateX(-120%) skewX(-20deg); animation:btnShine 3.6s ease-in-out 1.5s infinite; pointer-events:none}
}

/* One-colour solid icons for the causes panels */
.panel-ic .ic-solid{width:32px; height:32px; display:block; flex-shrink:0; fill:currentColor; stroke:none}
@media (max-width:560px){
  .hero-slider{
    height:420px !important;
    min-height:0 !important;
    max-height:none !important;
  }

  /* the trust bar would sit on top of the buttons in a slider this short, so hide it */
  .hero-bottom .trust-strip{display:none !important}

  /* keep only the small dots and play button, floating at the bottom */
  .hero-bottom{
    background:transparent !important;
    bottom:8px !important;
    padding:0 !important;
    justify-content:center !important;
  }

  .hero-slide .hero-slide-media picture img{object-position:center bottom}
}

/* ============ MOBILE FIXES ============ */
@media (max-width:768px){
  /* Hero art is light (white/pink): dark text + soft white fade at the top, not a dark scrim */
  .hero-slide-media::after{display:none}
  .hero-slide-media{background:#FFF1F8}
  .hero-slide-media img{object-position:center bottom}
  .hero-slide:not([data-index="0"]) .hero-slide-media img{object-position:70% bottom}
  .hero-slide-scrim{display:none}
}
@media (max-width:560px){
  /* Fit the copy inside the compact 420px hero and keep it clear of the dots */
  .hero-slide-copy{justify-content:flex-start; padding:16px 20px 52px}
  .hero-slide-copy .eyebrow{font-size:.74rem; margin-bottom:8px}
  .hero-slide-copy h1{font-size:clamp(1.55rem,6.4vw,1.9rem); margin-bottom:8px}
  .hero-slide-copy>p{font-size:.88rem; line-height:1.45; margin-bottom:14px}
  .hero-actions{gap:10px; flex-wrap:nowrap}
  .hero-actions .btn{padding:10px 16px; font-size:.86rem; white-space:nowrap}

  /* Causes accordion: labels stay inside the card and are readable on photos */
  .panel:not(.active)::after{background:linear-gradient(90deg,rgba(32,33,33,.66) 0%,rgba(32,33,33,.2) 80%)}
  .panel-label{left:84px; right:14px; font-size:18px; font-weight:600; line-height:1.15; white-space:normal}
  .panel-body{padding:16px 18px}
  .panel h3{font-size:24px}
  .panel p{font-size:15px; margin-bottom:14px}
}
@media (max-width:360px){
  .hero-actions{flex-wrap:wrap}
  .hero-slide-copy>p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
}
@media (max-width:700px){
  /* Donate band: container padding had been zeroed, so text touched the screen edges */
  .final-cta-inner,.final-cta.no-art .final-cta-inner{padding-left:24px; padding-right:24px}
}
@media (max-width:920px){
  .nav-links{height:100vh; height:100dvh}
}
@media (max-width:380px){
  /* Very small phones: keep top bar + header on one line each */
  .topbar-inner,.nav-inner{padding-left:16px; padding-right:16px}
  .topbar-inner{gap:8px}
  .topbar-phone{font-size:.76rem; gap:6px; white-space:nowrap}
  .topbar-social{gap:4px}
  .topbar-social a{width:24px; height:24px}
  .nav-inner{gap:8px}
  .brand{width:96px; height:78px}
  .nav-donate{padding:8px 12px; font-size:.8rem; gap:6px; white-space:nowrap}
  .hamburger{padding:6px}
}
@media (max-width:340px){
  .nav-donate .ic{display:none}
}
@media (max-width:700px){
  /* Donate band: the artwork is transparent on top, so white text vanished on the white page.
     Stack it instead: solid pink block with the text, artwork underneath. */
  .final-cta{min-height:0; background:#fff; padding-top:24px}
  .final-cta-band{position:relative; inset:auto; display:flex; flex-direction:column; background:var(--magenta); border-radius:28px 28px 0 0; overflow:hidden}
  .final-cta-inner{position:relative; top:auto; order:1; height:auto; padding:36px 24px 8px}
  .final-cta-art{position:relative; inset:auto; order:2; width:100%; height:230px; object-fit:cover; object-position:left bottom; margin-top:-4px}
  .final-cta-text h3{font-size:1.4rem}
  .final-cta-text p{font-size:.95rem}
  .final-cta.no-art{padding-top:24px}
}

/* =========================================================
   MOBILE HERO: slider height = image size (1080x1160), no gradient,
   compact text on the image (bottom, centered)
   (keep this block at the very end of the file)
   ========================================================= */
@media (max-width:768px){

  /* slider is exactly the image shape */
  .hero-slider{
    height:auto !important;
    aspect-ratio:1080 / 1160;
    min-height:0 !important;
    max-height:none !important;
  }

  .hero-slide,
  .hero-slide--health,
  .hero-slide--women{background:#fff}
  .hero-slide--women::before{display:none}
  .hero-slide--women .hero-slide-scrim,
  .hero-slide--health .hero-slide-scrim{display:none !important}

  /* image fills the whole slide, no diagonal cut */
  .hero-slide .hero-slide-media,
  .hero-slide--women .hero-slide-media{
    inset:0 !important;
    left:0 !important; right:0 !important;
    width:100% !important; height:100% !important;
    background:#fff;
    -webkit-clip-path:none; clip-path:none;
  }
  .hero-slide-media img,
  .hero-slide-media picture img,
  .hero-slide:not([data-index="0"]) .hero-slide-media img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center center !important;
  }

  /* small white fade from the bottom only, so the text stands out */
  .hero-slider .hero-slide .hero-slide-media::after{
    display:block !important;
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:linear-gradient(0deg,
      rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.6) 20%,
      rgba(255,255,255,0) 42%);
  }

  /* text on the image: bottom, centered, compact (scales with screen width) */
  .hero-slide-copy,
  .hero-slide--health .hero-slide-copy,
  .hero-slide--women .hero-slide-copy{
    position:absolute !important;
    left:0; right:0; bottom:0; top:auto;
    height:auto !important;
    max-width:none;
    justify-content:flex-end !important;
    align-items:center;
    text-align:center;
    padding:0 5vw 9vw !important;
    background:none !important;
  }
  .hero-slide-copy .eyebrow{display:none}
  .hero-slide-copy h1{font-size:5.6vw; line-height:1.18; margin-bottom:1.6vw}
  .hero-slide-copy>p{
    font-size:3.4vw; line-height:1.4; max-width:92%; margin:0 auto 2.6vw;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .hero-actions{justify-content:center; flex-wrap:nowrap; gap:2.6vw}
  .hero-actions .btn{padding:2.2vw 4.2vw; font-size:3.3vw; white-space:nowrap}

  /* soft white outline keeps dark text readable without any gradient */
  .hero-slide-copy h1,
  .hero-slide-copy>p{text-shadow:0 0 6px rgba(255,255,255,.9), 0 0 14px rgba(255,255,255,.8)}

  /* women slide: dark text (this image is light) */
  .hero-slide--women .hero-slide-copy h1{color:#202121}
  .hero-slide--women .hero-slide-copy h1 .hl{color:#EC008C}
  .hero-slide--women .hero-slide-copy>p{color:#202121; opacity:.95}
  .hero .hero-slide--women .btn-outline{border-color:#202121; color:#202121}
  .hero .hero-slide--women .btn-outline:hover{background:#EC008C; border-color:#EC008C; color:#fff}

  /* controls stay dark on the light slide */
  .hero-slider:has(.hero-slide--women.is-active) .hero-dot{background:rgba(32,33,33,.28)}
  .hero-slider:has(.hero-slide--women.is-active) .hero-dot.is-active{background:#EC008C}
  .hero-slider:has(.hero-slide--women.is-active) .hero-playpause{border-color:rgba(32,33,33,.4); color:#202121}
  .hero-slider:has(.hero-slide--women.is-active) .hero-progress{background:rgba(32,33,33,.10)}
  .hero-bottom .trust-strip{display:none !important}
}

/* =========================================================
   MOBILE DONATE BAND: Donate button sits beside the girl
   (text on top, girl on the left, button on the right of her)
   ========================================================= */
@media (max-width: 700px) {

  /* Main transparent CTA section */
  .final-cta-band {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* TEXT FIRST */
  .final-cta-inner {
    order: 1;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 25px 20px 20px;
    z-index: 2;
    color: transparent !important ;
  }

  /* Text */
  .final-cta-text {
    order: 1;
    width: 100%;
  }

  .final-cta-text h3 {
    margin: 0 0 8px;
  }

  .final-cta-text p {
    margin: 0;
  }

  /* IMAGE DOWN */
  .final-cta-band > picture {
    order: 2;
    width: 100%;
    display: block;
    line-height: 0;
  }

  .final-cta-band > picture .final-cta-art {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center;
  }

  /* BUTTON ON IMAGE */
  .final-cta #finalDonateBtn {
    position: absolute;
    right: 6vw;
    bottom: 170px;
    z-index: 10;

    padding: 3vw 5vw;
    font-size: 0.92rem;
    white-space: nowrap;
  }

  /* No image fallback */
  .final-cta.no-art #finalDonateBtn {
    position: static;
    margin-top: 15px;
  }
}
/* =========================================================
   MEGA MENU: About / Causes / Impact / Contact  (white + pink, photo on the right)
   Causes: the 4 causes are the left list, their campaigns + photo show on the right.
   ========================================================= */
.nav-item{display:flex; align-items:center}
.nav-trigger{background:none; border:0; padding:6px 0; margin:0; font-family:var(--font-body); font-weight:500; font-size:.95rem; line-height:1.6; color:#fff; display:inline-flex; align-items:center; gap:6px; position:relative; cursor:pointer}
.nav-trigger::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; border-radius:2px; background:#fff; transition:width .25s var(--ease)}
.nav-trigger:hover::after, .nav-trigger:focus-visible::after, .nav-trigger.active::after, .nav-item.open .nav-trigger::after{width:100%}
.nav-chev{width:14px; height:14px; stroke-width:2.2; transition:transform .25s var(--ease)}
.nav-item.open .nav-chev{transform:rotate(180deg)}

.nav-links .mega a::after{display:none}
.mega-label{margin:0; display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--magenta)}
.mega-label::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--magenta)}
.mega-tab{position:relative; font-family:var(--font-head); font-weight:600; font-size:.98rem; text-align:left; color:var(--ink); background:transparent; border:0; border-radius:14px; cursor:pointer; transition:background .25s var(--ease), color .25s, transform .25s var(--ease), box-shadow .25s}
.mega-tab::after{content:"\2192"; position:absolute; right:16px; top:50%; transform:translate(-6px,-50%); opacity:0; transition:opacity .25s, transform .25s var(--ease)}
.mega-tab:hover{background:#fff; color:var(--magenta)}
.mega-tab.is-active{background:var(--magenta); color:#fff; box-shadow:0 12px 22px -12px rgba(236,0,140,.7)}
.mega-tab.is-active::after, .mega-tab:hover::after{opacity:1; transform:translate(0,-50%)}

.mega-body h3{font-size:1.45rem; color:var(--ink); margin:0 0 8px}
.mega-desc{color:var(--muted); font-size:.95rem; max-width:460px}
.mega-cards{display:flex; flex-direction:column; gap:10px; margin-top:20px}
.nav-links a.mega-card{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 14px 13px 18px; border-radius:16px; background:#fff; border:1.5px solid var(--line); color:var(--ink); font-size:inherit; font-weight:400; transition:border-color .25s, background .25s, transform .25s var(--ease), box-shadow .25s}
.mc-text{display:flex; flex-direction:column; gap:2px}
.nav-links .mega-card b{font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--ink)}
.nav-links .mega-card em{font-style:normal; font-size:.85rem; line-height:1.4; color:var(--muted); opacity:.8}
.mc-go{flex:none; width:34px; height:34px; border-radius:50%; background:var(--orange-light); color:var(--magenta); display:grid; place-items:center; transition:background .25s, color .25s, transform .25s var(--ease)}
.mc-go .ic{width:16px; height:16px; stroke-width:2.2}
.nav-links a.mega-card:hover, .nav-links a.mega-card:focus-visible{border-color:var(--magenta); background:#FFF7FB; transform:translateX(4px); box-shadow:0 14px 26px -18px rgba(236,0,140,.7)}
.mega-card:hover .mc-go, .mega-card:focus-visible .mc-go{background:var(--magenta); color:#fff; transform:translateX(2px)}
.nav-links a.mega-more{display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:11px 22px; border-radius:100px; background:var(--magenta); color:#fff; font-family:var(--font-head); font-weight:600; font-size:.9rem; box-shadow:0 14px 26px -14px rgba(236,0,140,.7); transition:gap .25s, background .25s, transform .25s var(--ease)}
.mega-more .ic{width:1em; height:1em; stroke-width:2.2}
.nav-links a.mega-more:hover, .nav-links a.mega-more:focus-visible{gap:13px; background:var(--orange-dark); transform:translateY(-2px)}
.mega-photo{position:relative; margin:0; border-radius:20px; overflow:hidden; background:var(--sky-deep); min-height:280px}
.mega-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.mega-photo figcaption{position:absolute; left:12px; bottom:12px; background:var(--magenta); color:#fff; font-family:var(--font-head); font-weight:600; font-size:.78rem; padding:6px 14px; border-radius:100px; box-shadow:0 8px 18px -8px rgba(43,10,36,.6)}

@media (min-width:921px){
  .nav-item{position:static}
  .mega{position:absolute; left:0; right:0; top:100%; margin-top:12px; z-index:60; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s}
  .mega::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}   /* keeps the menu open while the mouse travels down */
  .nav-item.open .mega{opacity:1; visibility:visible; transform:none; transition-delay:0s}
  /* On scroll only the top bar shrinks; the dropdown keeps its full width */
  .site-header.compact .mega{left:50%; right:auto; width:min(1200px, calc(100vw - 48px)); margin-left:calc(min(1200px, calc(100vw - 48px)) / -2)}
  .mega-inner{position:relative; display:grid; grid-template-columns:280px 1fr; grid-template-rows:auto repeat(var(--n),auto) 1fr; align-content:start; min-height:340px; border-radius:24px; overflow:hidden; color:var(--ink);
    background:linear-gradient(90deg,#FFF1F8 0 280px,transparent 280px),#fff;
    border:1px solid var(--line); box-shadow:0 40px 80px -30px rgba(32,33,33,.45)}
  .mega-inner::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; z-index:3; background:linear-gradient(90deg,#FF8AC9,#EC008C)}
  .mega-label{grid-column:1; padding:30px 28px 14px}
  .mega-tab{grid-column:1; margin:3px 14px; padding:14px 40px 14px 18px}
  .mega-pane{display:none; grid-column:2; grid-row:1 / -1; padding:0; grid-template-columns:1fr 330px; gap:0}
  .mega-body{padding:32px 26px 32px 38px}
  /* Every menu photo gets the same soft pastel look: washed with white, left edge melting into the menu */
  .mega-photo{border-radius:0; min-height:0; background:#fff}
  .mega-photo img{filter:saturate(.8) brightness(1.05); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%); mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
  .mega-photo::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(255,255,255,.45)}
  .mega-photo figcaption{z-index:2}
  .mega-pane.is-active{display:grid}
  .mega-pane.no-photo{grid-template-columns:1fr}
  .mega-compact{min-height:0}
  .mega-compact .mega-label{padding:24px 28px 10px}
  .mega-compact .mega-body{padding:24px 32px 26px 38px}
  .mega-compact .mega-body h3{font-size:1.3rem; margin-bottom:4px}
  .mega-pane.no-photo .mega-cards{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:16px}
  .nav-links .mega-pane.no-photo a.mega-card{grid-column:span 2}
  /* 5 cards = 3 on the first line + 2 stretched over the full second line */
  .nav-links .mega-pane.no-photo a.mega-card:nth-child(4):nth-last-child(2),
  .nav-links .mega-pane.no-photo a.mega-card:nth-child(5):nth-last-child(1){grid-column:span 3}
  /* Education: 4 programmes as a compact 2x2 grid so the menu does not grow taller */
  .mega-cards.cols-2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
  .nav-links .mega-cards.cols-2 a.mega-card{align-items:flex-start; padding:12px 12px 12px 14px; gap:10px}
  .mega-cards.cols-2 .mega-card b{font-size:.95rem; line-height:1.25}
  .nav-links .mega-cards.cols-2 .mega-card em{font-size:.8rem; line-height:1.35}
  .mega-cards.cols-2 .mc-go{width:28px; height:28px}
  .mega-cards.cols-2 .mc-go .ic{width:14px; height:14px}
  /* Causes menu: campaigns only, minimal */
  .mega-min .mega-body{display:flex; flex-direction:column; justify-content:center}
  .mega-min .mega-cards{margin-top:0; gap:14px}
  .mega-min .mega-cards .mega-card:only-child{grid-column:1 / -1}
  .nav-links .mega-min .mega-cards.cols-2 a.mega-card{align-items:center; min-height:84px; padding:16px 16px 16px 20px; border-radius:18px; border-width:1.5px}
  .mega-min .mega-cards.cols-2 .mega-card b{font-size:1.05rem; line-height:1.3}
  .mega-min .mega-cards.cols-2 .mc-go{width:34px; height:34px}
  .mega-min .mega-cards.cols-2 .mc-go .ic{width:16px; height:16px}
}

@media (max-width:920px){
  .site-header .nav-links, .site-header.compact .nav-links{gap:0; overflow-y:auto; align-items:stretch; padding:92px 22px 28px}
  .nav-item{display:block; border-bottom:1px solid var(--line)}
  .nav-trigger{width:100%; justify-content:space-between; padding:17px 4px; font-size:1.1rem; color:var(--navy)}
  .nav-trigger::after{display:none}
  .nav-trigger.active{color:var(--magenta)}
  .mega{display:none}
  .nav-item.open .mega{display:block; padding-bottom:12px}
  .mega-inner{display:block}
  .mega-label{display:none}
  .mega-tab{display:block; width:100%; margin:6px 0 0; padding:12px 44px 12px 16px; color:var(--navy); background:var(--orange-light)}
  .mega-tab::after{content:"+"; right:16px; opacity:1; transform:translateY(-50%); font-size:1.2rem; color:var(--magenta)}
  .mega-tab.is-active{background:var(--magenta); color:#fff}
  .mega-tab.is-active::after{content:"\2212"; color:#fff; transform:translateY(-50%)}
  .mega-pane{display:none; padding:12px 4px 6px}
  .mega-pane.is-active{display:block}
  .mega-photo{display:none}
  .mega-body h3{display:none}
  .mega-desc{font-size:.9rem}
  .mega-cards{margin-top:12px}
  .nav-links a.mega-card{padding:11px 12px 11px 16px}
  .nav-links a.mega-card:hover{transform:none}
}

/* Desktop fallback: menu also opens on pure hover / keyboard focus, even before the JS has loaded */
@media (min-width:921px){
  .nav-item:hover .mega,
  .nav-item:has(:focus-visible) .mega{opacity:1; visibility:visible; transform:none; transition-delay:0s}
  .nav-item:hover .nav-chev{transform:rotate(180deg)}
  .nav-item:hover .nav-trigger::after{width:100%}
}

@media (max-width:920px){
  .mega-min .mega-cards{margin-top:10px}
}

/* ============ DONOR TESTIMONIALS (home) — reuses .stories + .review-card glass style ============ */
.donor-talk::before{background:rgba(32,33,33,.55)}
.donor-talk.section{padding:56px 0}
.donor-talk .section-head{margin-bottom:28px}
.donor-talk .section-head h2{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:0}
.donor-talk .reviews-grid{margin-top:0; gap:18px}
.donor-talk .review-card{padding:18px 18px 14px}
.donor-talk .review-card .quote{font-size:15px; line-height:1.5; margin-bottom:12px}
.donor-talk .review-from{padding-top:10px}
.donor-talk .review-av{width:36px; height:36px}
.dt-more{margin-top:26px; text-align:center}
.dt-more a{display:inline-flex; align-items:center; gap:10px; padding:11px 24px; border-radius:999px; background:var(--magenta); color:#fff; font:600 .95rem var(--font-body); transition:background .25s var(--ease)}
.dt-more a:hover{background:var(--magenta-deep)}
.dt-more a:focus-visible{outline:3px solid #fff; outline-offset:3px}
.dt-more .ic{width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:2}