/* Girl Arise International — "Arise" direction, collage theme.
   Cinematic: full-bleed film hero that opens dark and brightens, white type over imagery, scroll-driven scenes.
   Palette from the collage boards: warm white and cream, blush and dusty rose, cocoa ink.
   Type: Cormorant Garamond headlines, Jost text and spaced-capital labels, Allura for the handwritten line. */

:root {      /* cocoa: dark sections, dark buttons, photo scrims */      /* dusty rose dark enough for icons and small text on white */       /* blush rose: primary buttons (cocoa text on it) */      /* pale blush: numbers and accents over photos */       /* rose for labels and links on light backgrounds */
  --white: #FFFFFF;     /* warm white page */      /* cream panels */     /* caption panels in the collages */
  --on-dark: #FFFFFF;           /* text, buttons, labels */       /* headlines */      /* scripture, italic */
  --script: "Pacifico", "Segoe Script", cursive;        /* the handwritten line */

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --header-h: 84px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-optical-sizing: auto; font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--sun); color: var(--deep); padding: 10px 16px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 16px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 36px; height: 36px; }

/* ---------- type ---------- */
.lead { font-size: clamp(1.2rem, 1.6vw, 1.45rem); max-width: 40ch; }
.kicker { display: inline-block; }
.todo { border-radius: 3px; padding: 0 4px; }
.prose { display: grid; gap: 20px; max-width: 58ch; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .5s var(--ease); }
@media (hover: hover) {
  .btn:hover::before { transform: translateY(0); }
}
.link { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; transition: background-size .5s var(--ease); }
@media (hover: hover) { .link:hover { background-size: 30% 2px; } }

/* ---------- media slots: real photo/video when supplied, sunrise art until then ---------- */
.media { position: relative; overflow: hidden; background: var(--deep); }
.media > img, .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media::before { content: ""; position: absolute; inset: 0; background: var(--art, var(--art-dawn)); }
.media[data-label]:not(.is-loaded)::after {
  content: "Photo to come · " attr(data-label); position: absolute; left: 14px; bottom: 12px; z-index: 3;
  font-size: .75rem; font-weight: 600; color: rgba(255, 255, 255, .85);
  background: rgba(58, 36, 38, .45); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px);
}
:root {
  --art-dawn:
    radial-gradient(60% 45% at 50% 92%, #FBEFE6 0%, #EBC7BC 30%, rgba(220, 170, 167, 0) 65%),
    linear-gradient(180deg, #6B4447 0%, #A8726F 40%, #DCAAA7 72%, #F3E1D8 100%);
  --art-savanna:
    radial-gradient(30% 30% at 72% 58%, #FBEFE6 0%, rgba(235, 199, 188, .7) 40%, transparent 70%),
    linear-gradient(180deg, #F3E1D8 0%, #DCAAA7 45%, #B57A76 75%, #7A4A4C 100%);
  --art-hills:
    radial-gradient(22% 26% at 28% 60%, #FBEFE6, rgba(235, 199, 188, .45) 55%, transparent 72%),
    linear-gradient(170deg, #EAD9CF 0%, #D9C2B4 42%, #A9927F 70%, #6F5E52 100%);
  --art-class:
    radial-gradient(50% 60% at 20% 30%, rgba(251, 239, 230, .85), transparent 60%),
    linear-gradient(135deg, #8E5B5C 0%, #C99693 50%, #EFD9CF 100%);
  --art-horizon:
    radial-gradient(70% 50% at 50% 100%, rgba(235, 199, 188, .9), transparent 65%),
    linear-gradient(180deg, #5A383B 0%, #9E6E6B 55%, #EFD9CF 100%);
}
.page-hero > .media::after, .band > .media::after, .faith > .media::after, .cta-photo > .media::after { left: auto !important; right: calc(var(--gutter) + 2%) !important; bottom: 14% !important; }
.page-hero > .media::after { bottom: 8% !important; }
.media[data-art="savanna"] { --art: var(--art-savanna); }
.media[data-art="hills"] { --art: var(--art-hills); }
.media[data-art="class"] { --art: var(--art-class); }
.media[data-art="horizon"] { --art: var(--art-horizon); }

/* ---------- header: transparent over the hero, solid once scrolling ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; }
.site-header::before { content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none; transition: opacity .5s; }
.site-header.is-scrolled::before, .site-header.menu-open::before { opacity: 0; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left; transform: scaleX(var(--read, 0)); }
.header-bar { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-name { display: grid; line-height: 1; }
.brand-name .b2 { opacity: .8; }
.primary-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link, .nav-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 14px; border: 0; background: none; border-radius: 999px; text-decoration: none; cursor: pointer; }
.nav-toggle .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.nav-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; padding: 8px; border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(58, 36, 38, .45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.nav-item.is-open .dropdown { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s; }
.dropdown a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.dropdown a > span { display: block; }
.dropdown .dd-note { font-size: .8125rem; font-weight: 400; color: var(--slate); margin-top: 2px; }
.header-cta { display: flex; align-items: center; gap: 10px; }
.menu-button { display: none; }
@media (max-width: 1199px) {
  .primary-nav { position: fixed; inset: var(--header-h) 0 0 0; margin: 0; padding: 16px var(--gutter) 64px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }
  .site-header.menu-open .primary-nav { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link, .nav-toggle { width: 100%; justify-content: space-between; min-height: 60px; padding-inline: 0; border-radius: 0; }
  .dropdown { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 12px; display: none; transition: none; }
  .nav-item.is-open .dropdown { display: block; }
  .menu-button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
  .menu-button .icon-close { display: none; }
  .site-header.menu-open .menu-button .icon-open { display: none; }
  .site-header.menu-open .menu-button .icon-close { display: block; }
}
@media (max-width: 479px) { .brand-name .b2 { display: none; } }

/* ---------- 1 · hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--white); overflow: hidden; background: var(--deep); }
.hero-media { position: absolute; inset: 0; }
.hero-media .media { position: absolute; }
.hero-reel { position: absolute; inset: 0; z-index: 1; }
.hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; overflow: hidden; transition: opacity 1.2s var(--ease); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img, .hero-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero.is-paused .hero-slide img { animation-play-state: paused; }
.hero-dots { display: flex; align-items: center; gap: 4px; }
.hero-dot { width: 26px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; transition: width .4s var(--ease); }
.hero-dot span { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.hero-dot span::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--fill, 0)); }
.hero-dot[aria-current="true"] { width: 48px; }
@media (hover: hover) { .hero-dot:hover span { background: rgba(255, 255, 255, .6); } }
.hero-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 599px) { .hero-dot { width: 18px; } .hero-dot[aria-current="true"] { width: 34px; } }
/* sunrise art stands in for the video: slow sun, drifting light, hill line */
.dawn { position: absolute; inset: 0; z-index: 1; }
.hero.has-reel .dawn { opacity: 0; }
.dawn-sun { position: absolute; left: 66%; bottom: 14%; width: min(70vw, 900px); aspect-ratio: 1; margin-left: calc(min(70vw, 900px) / -2); border-radius: 50%;
  background: radial-gradient(circle, var(--cw) 0%, #F4D9CF 12%, #E7B9B2 26%, rgba(220, 170, 167, .5) 42%, rgba(200, 140, 136, .15) 58%, transparent 70%); mix-blend-mode: screen;
  animation: sunrise 16s var(--ease) infinite alternate; }
.dawn-haze { position: absolute; inset: -20%; background: radial-gradient(40% 30% at 20% 40%, rgba(220, 170, 167, .35), transparent 70%), radial-gradient(35% 25% at 80% 30%, rgba(235, 199, 188, .3), transparent 70%); animation: drift 22s ease-in-out infinite alternate; }
.dawn-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; }
.dawn-grain { position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes sunrise { from { transform: translateY(26%) scale(.9); filter: saturate(.9); } to { transform: translateY(-6%) scale(1.04); filter: saturate(1.15); } }
@keyframes drift { from { transform: translate3d(-3%, 2%, 0); } to { transform: translate3d(3%, -2%, 0); } }
.hero.is-paused .dawn *, .hero.is-paused .scroll-cue span { animation-play-state: paused; }
.hero-scrim { position: absolute; inset: 0; z-index: 2; }
.hero-inner { position: relative; z-index: 3; padding-block: calc(var(--header-h) + 64px) clamp(72px, 12vh, 132px); display: grid; gap: 28px; opacity: calc(1 - var(--p, 0) * 1.4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-tools { position: absolute; z-index: 4; right: var(--gutter); bottom: 32px; display: flex; align-items: center; gap: 12px; }
.hero-pause { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(34, 20, 21, .25); color: var(--white); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); }
.hero-pause .icon { width: 18px; height: 18px; }
.hero-pause .icon-play { display: none; }
.hero-pause[aria-pressed="true"] .icon-play { display: block; }
.hero-pause[aria-pressed="true"] .icon-pause { display: none; }
.scroll-cue { position: absolute; z-index: 4; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-weight: 600; color: rgba(255, 255, 255, .85); text-decoration: none; }
.scroll-cue span { display: block; width: 2px; height: 44px; transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 599px) { .scroll-cue { display: none; } .hero-tools { bottom: 20px; } }

/* hero words rise out of a mask, once, on load */
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-words .w > span { display: inline-block; transform: translateY(105%); }
.js .split-words.is-in .w > span { transform: none; transition: transform .7s var(--ease); transition-delay: calc(var(--i) * 45ms + 60ms); }
.js .hero-fade { opacity: 0; transform: translateY(10px); }
.js .hero.is-ready .hero-fade, .js .page-hero.is-ready .hero-fade { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--d, .8s) * .45); }
html:not(.js) .split-words .w > span { transform: none; }

/* ---------- sections ---------- */
.section-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }

/* scroll reveals: one vocabulary — rise, wipe */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0s) * .6); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv-wipe { clip-path: inset(100% 0 0 0 round 0); transition: clip-path .8s var(--ease); transition-delay: calc(var(--d, 0s) * .6); }
.js .rv-wipe.is-in { clip-path: inset(0 0 0 0 round 0); }
.js .rv-wipe > img, .js .rv-wipe::before { transform: scale(1.08); transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0s) * .6); }
.js .rv-wipe.is-in > img, .js .rv-wipe.is-in::before { transform: none; }

/* ---------- 2 · manifesto: three lines arrive in quick succession, then answer the pointer ---------- */
.manifesto-stage { display: grid; gap: 40px; }
.manifesto-lines { display: grid; gap: .08em; }
.manifesto-lines span { display: block; width: fit-content; transition: transform .45s var(--ease), color .3s; }
.js .manifesto-lines span { opacity: 0; transform: translateX(-28px); transition: opacity .5s var(--ease), transform .6s var(--ease), color .3s; transition-delay: calc(var(--i) * 140ms); }
.js .manifesto.is-in .manifesto-lines span { opacity: 1; transform: none; }
@media (hover: hover) { .js .manifesto.is-in .manifesto-lines span:hover { transform: translateX(14px); color: var(--jade); transition-delay: 0s; } }
.manifesto-lines span:nth-child(2) { padding-left: 1.1em; }
.manifesto-lines span:nth-child(3) { padding-left: 2.2em; }
.manifesto-note { text-align: center; font-size: 1.125rem; }
.js .manifesto-note { opacity: 0; transition: opacity .6s .5s; }
.js .manifesto.is-in .manifesto-note { opacity: 1; }
@media (max-width: 699px) { .manifesto-lines span:nth-child(n) { padding-left: 0; } }

/* ---------- 3 · feature tiles: tall images, white type on top ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile { min-height: clamp(460px, 44vw, 620px); overflow: hidden; color: var(--white); isolation: isolate; text-decoration: none; display: flex; }
.tile .media { position: absolute; inset: 0; z-index: -2; }
.tile .media > img, .tile .media::before { transition: transform 1.4s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.tile-body { margin-top: auto; padding: 32px; display: grid; gap: 12px; }
.tile-body p { max-width: 34ch; }
.tile-more { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; margin-top: 6px; }
.tile-more .icon { width: 36px; height: 36px; padding: 8px; border-radius: 50%; transition: transform .6s var(--ease); }
@media (hover: hover) {
  .tile:hover .media > img, .tile:hover .media::before { transform: scale(1.07); }
  .tile:hover .tile-more .icon { transform: rotate(-45deg); }
}
.tile:nth-child(2) { margin-top: 64px; }
@media (max-width: 899px) { .tiles { grid-template-columns: 1fr; } .tile:nth-child(2) { margin-top: 0; } .tile { min-height: 440px; } }

/* ---------- 4 · parallax goals band ---------- */
.band { position: relative; color: var(--white); overflow: hidden; isolation: isolate; }
.band > .media { position: absolute; inset: -18% 0; z-index: -2; transform: translate3d(0, calc((var(--p, .5) - .5) * -22%), 0); }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.band-title { text-align: center; max-width: 18ch; margin: 0 auto; }
.goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 8vw, 96px); text-align: center; }
.goal { display: grid; gap: 8px; }
.goal .number { line-height: .9; font-variant-numeric: tabular-nums; }
.goals-note { max-width: 62ch; margin: clamp(48px, 6vw, 72px) auto 0; text-align: center; font-size: 1rem; }
@media (max-width: 899px) { .goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- split: image one side, words the other ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.split--flip > :first-child { order: 2; }
.split-media { position: relative; }
.split-media .media { aspect-ratio: 4 / 5; }
.split-media .media--sm { position: absolute; width: 44%; aspect-ratio: 1; right: -8%; bottom: -10%; border: 8px solid var(--white); }
.section--mist .split-media .media--sm { border-color: var(--mist); }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } .split--flip > :first-child { order: 0; } .split-media .media { aspect-ratio: 4 / 3; } .split-media .media--sm { right: 12px; bottom: -28px; width: 38%; border-width: 5px; } }

.mv { display: grid; gap: 28px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.mv h3 { margin-bottom: 6px; }
.mv p { font-size: 1.2rem; line-height: 1.5; }
.faces { display: flex; align-items: center; gap: 18px; margin-top: 36px; flex-wrap: wrap; }
.faces-row { display: flex; }
.faces-row img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--white); }
.faces-row img + img { margin-left: -14px; }

/* ---------- 6 · the one bold moment: words as windows ---------- */
.window { color: var(--ink); overflow: hidden; }
.window-stage { display: grid; justify-items: center; gap: clamp(24px, 3vw, 40px); }
.window-words {
  font-size: clamp(4rem, 17vw, 19rem); line-height: .88; text-align: center;
  background: var(--window-img, var(--art-savanna)) no-repeat;
  background-position: calc(50% + var(--mx, 0) * 22%) calc(50% + var(--my, 0) * 22%);
  transition: background-position .5s var(--ease);
}
.js .window-words { opacity: 0; transform: scale(.94); transition: opacity .7s var(--ease), transform .9s var(--ease), background-position .5s var(--ease); }
.js .window.is-in .window-words { opacity: 1; transform: none; }
.window-sub { max-width: 60ch; margin: 0 auto; padding-inline: var(--gutter); text-align: center; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--slate); }
.js .window-sub { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s; }
.js .window.is-in .window-sub { opacity: 1; transform: none; }

.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.outcome { padding: 36px 28px 40px 0; border-bottom: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.outcome .icon { width: 28px; height: 28px; }
.outcome p { font-size: 1.3rem; font-weight: 600; line-height: 1.3; max-width: 22ch; }
@media (max-width: 899px) { .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .outcomes { grid-template-columns: 1fr; } }

/* ---------- 7 · where we work: three panels ---------- */
.status { display: inline-flex; align-items: center; gap: 8px; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.pull { margin-top: clamp(64px, 8vw, 112px); text-align: center; }
.pull blockquote { margin: 0 auto; max-width: 24ch; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.1; }
.pull figcaption { margin-top: 20px; color: var(--slate); font-weight: 600; }

/* ---------- 8 · sponsor ---------- */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 36px 0 40px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.checks .icon { margin-top: 3px; }
@media (max-width: 519px) { .checks { grid-template-columns: 1fr; } }

/* ---------- 9 · ways to give ---------- */
.give-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.give-card { padding: 36px 28px; display: grid; gap: 14px; align-content: start; overflow: hidden; isolation: isolate; transition: transform .6s var(--ease); }
.give-card::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .7s var(--ease); }
.give-card .icon { width: 40px; height: 40px; transition: color .5s; }
.give-card p { color: var(--slate); transition: color .5s; }
.give-card .link { margin-top: 8px; justify-self: start; }
@media (hover: hover) {
  .give-card:hover { transform: translateY(-6px); }
  .give-card:hover::before { transform: none; }
}
@media (max-width: 1023px) { .give-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .give-grid { grid-template-columns: 1fr; } }

/* ---------- 10 · faith: full-bleed verse ---------- */
.faith { position: relative; min-height: 100svh; display: grid; align-items: center; color: var(--white); overflow: hidden; isolation: isolate; padding-block: 120px; }
.faith > .media { position: absolute; inset: -12% 0; z-index: -2; transform: translate3d(0, calc((var(--p, .5) - .5) * -16%), 0); }
.faith::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.faith-verse { font-size: clamp(2.4rem, 5.6vw, 5.4rem); line-height: 1.04; max-width: 20ch; margin: 0 auto; text-align: center; }
.faith-ref { display: block; text-align: center; margin-top: 24px; font-weight: 700; }
.faith-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 980px; margin: clamp(56px, 8vw, 96px) auto 0; }
@media (max-width: 767px) { .faith-copy { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- 11 · stand with them + newsletter ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.way { display: grid; gap: 14px; align-content: start; }
.way .icon { width: 44px; height: 44px; }
.way p { color: var(--slate); }
@media (max-width: 767px) { .ways { grid-template-columns: 1fr; gap: 36px; } }
.newsletter { margin-top: clamp(72px, 9vw, 120px); padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; color: var(--ink); position: relative; overflow: hidden; isolation: isolate; }
.newsletter::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.newsletter p { color: var(--slate); margin-top: 10px; }
.form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field { flex: 1 1 240px; display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: .9375rem; }
.field input { min-height: 56px; padding: 0 22px; border: 2px solid var(--line); background: var(--white); font: 500 1.0625rem var(--display); }
.field input:focus { outline: none; }
.field input[aria-invalid="true"] { border-color: #D92D20; }
.field-error { font-size: .875rem; color: #B42318; min-height: 1.2em; }
.form-status { margin-top: 12px; font-weight: 600; color: var(--jade); }
.form-consent { font-size: .875rem; margin-top: 10px; }
@media (max-width: 899px) { .newsletter { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { padding-top: clamp(72px, 9vw, 120px); font-size: 1rem; }
.footer-big span { display: block; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding-block: 64px; }
.footer-brand { display: grid; gap: 18px; align-content: start; }
.footer-brand p { max-width: 40ch; }
.footer-col h2 { margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { text-decoration: none; }
.footer-contact li { display: grid; gap: 2px; }
.fc-label { opacity: .8; }
.switcher a[aria-current="true"] { color: var(--red); font-weight: 700; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 24px 36px; border-top: 1px solid var(--line); font-size: .875rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 1023px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .footer-top { grid-template-columns: 1fr; gap: 36px; } }

/* ======================================================================
   LEADERSHIP PAGE
   ====================================================================== */

/* page title over imagery: shorter than the home hero, same white-on-photo feel */
.page-hero { position: relative; min-height: 72svh; display: grid; align-items: end; color: var(--white); overflow: hidden; isolation: isolate; }
.page-hero > .media { position: absolute; inset: -6% 0 0 0; z-index: -2; transform: translate3d(0, calc(var(--p, 0) * 16%), 0) scale(calc(1.04 + var(--p, 0) * .06)); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.page-hero .wrap { padding-block: calc(var(--header-h) + 64px) clamp(56px, 9vh, 104px); display: grid; gap: 22px; transform: translate3d(0, calc(var(--p, 0) * -50px), 0); opacity: calc(1 - var(--p, 0) * 1.3); }
.page-hero .lead { max-width: 52ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .9375rem; font-weight: 600; color: rgba(255, 255, 255, .8); padding: 0; margin: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .6; }
.crumbs a { text-decoration: none; }
@media (hover: hover) { .crumbs a:hover { color: var(--gold); } }
.subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .55); font-weight: 650; text-decoration: none; backdrop-filter: blur(6px); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s; }
@media (hover: hover) { .subnav a:hover { background: var(--white); color: var(--ink); border-color: var(--white); } }

/* the President: one large feature */
.president { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.president-photo { position: sticky; top: calc(var(--header-h) + 32px); }
.president-photo .frame { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--mist); }
.president-photo img { width: 100%; height: 100%; object-fit: cover; }
.president-photo::before { content: ""; position: absolute; z-index: -1; inset: 28px -28px -28px 28px; }
.president-photo { isolation: isolate; }
.role { margin-top: 14px; }
.creds { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 36px; padding: 0; list-style: none; }
.creds li { padding: 10px 16px; border-radius: 999px; font-size: .9375rem; font-weight: 600; color: var(--ink); }
@media (max-width: 899px) {
  .president { grid-template-columns: 1fr; }
  .president-photo { position: relative; top: 0; max-width: 460px; margin-right: 28px; }
}

/* the Board: one wide row per person, full bio visible (familylegacy pattern) */

.governance { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; margin-top: 48px; padding: clamp(28px, 4vw, 44px); border-radius: 28px; }
.governance p { color: var(--slate); max-width: 70ch; margin-top: 8px; }
@media (max-width: 599px) { .governance { grid-template-columns: 1fr; } }

/* stewardship pillars */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.pillar { display: grid; gap: 14px; align-content: start; padding: 32px 28px; border-radius: 24px; }
.pillar .icon { width: 40px; height: 40px; }
.pillar p { color: var(--slate); }
.fine { margin-top: 36px; color: var(--slate); font-size: .9375rem; }
@media (max-width: 1023px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .pillars { grid-template-columns: 1fr; } }

/* closing band over a photo */
.cta-photo { position: relative; color: var(--white); overflow: hidden; isolation: isolate; text-align: center; }
.cta-photo > .media { position: absolute; inset: -14% 0; z-index: -2; transform: translate3d(0, calc((var(--p, .5) - .5) * -18%), 0); }
.cta-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.cta-photo .d1 { max-width: 16ch; margin: 0 auto 36px; }
.cta-photo .hero-actions { justify-content: center; }

/* ======================================================================
   INNER PAGES
   ====================================================================== */

/* current page in the menu */
.nav-link[aria-current="page"], .nav-toggle.is-current { box-shadow: inset 0 -3px 0 var(--sun); border-radius: 0; }
.dropdown a[aria-current="page"] { background: var(--mist); }
@media (max-width: 1199px) { .nav-link[aria-current="page"], .nav-toggle.is-current { box-shadow: none; color: var(--red); } }

.page-hero--short { min-height: 60svh; }
.page-hero .d-hero { max-width: 16ch; }
.page-hero--plain { min-height: 0; }
.page-hero--plain::after { display: none; }
.page-hero--plain .wrap { padding-block: calc(var(--header-h) + 56px) clamp(48px, 6vw, 80px); transform: none; opacity: 1; }
body:has(.page-hero--plain) .site-header:not(.is-scrolled)::before { opacity: 0; }

/* mission / vision */

/* approach: four words */
.flourish { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.flourish li { overflow: hidden; }
.flourish li::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--c); }
.flourish span { color: var(--ink); }
@media (max-width: 899px) { .flourish { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* words-as-windows, longer line */
.window-words--sm { font-size: clamp(3.2rem, 11vw, 12rem); max-width: 12ch; }

/* countries */
.countries { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.country { overflow: hidden; }
.country .media { aspect-ratio: 16 / 9; }
.country-body { padding: clamp(24px, 3vw, 40px); display: grid; gap: 12px; }
.country-body p { color: var(--slate); }
@media (max-width: 767px) { .countries { grid-template-columns: 1fr; } }

/* impact extras */
.goals-extra { text-align: center; margin-top: 40px; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; }
.hope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hope li { padding: 32px 28px; border-radius: 24px; font-size: 1.2rem; line-height: 1.45; color: var(--slate); }
.hope span { display: block; font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
@media (max-width: 767px) { .hope { grid-template-columns: 1fr; } }

/* forms */
.form-card { display: grid; gap: 20px; padding: clamp(24px, 4vw, 44px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; } }
.field select, .field textarea { min-height: 56px; padding: 14px 22px; border: 2px solid var(--line); font: 500 1.0625rem var(--display); }
.field select { appearance: none; padding-right: 52px; background-position: right 20px center; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 160px; }
.field select:focus, .field textarea:focus { outline: none; }
.field textarea[aria-invalid="true"] { border-color: #D92D20; }
.form-card .btn { justify-self: start; }
.form-card .form-status { margin-top: 0; }
.form-card .form-consent { color: var(--slate); margin-top: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; font-size: .9375rem; margin-bottom: 10px; padding: 0; }
.amounts, .frequency { display: flex; flex-wrap: wrap; gap: 10px; }
.amounts legend, .frequency legend { width: 100%; }
.amounts label, .frequency label { position: relative; }
.amounts input, .frequency input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.amounts span, .frequency span { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border: 2px solid var(--line); font-weight: 700; font-size: 1.0625rem; transition: background .3s, border-color .3s, color .3s; }
.amounts input:focus-visible + span, .frequency input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) { .amounts label:hover span, .frequency label:hover span { border-color: var(--jade); } }

.give-now { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.notice { display: flex; gap: 14px; align-items: flex-start; margin-top: 32px; padding: 20px 22px; border-radius: 20px; color: var(--slate); }
.notice .icon { margin-top: 3px; }
@media (max-width: 899px) { .give-now { grid-template-columns: 1fr; } }

/* contact */
.contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-details ul { display: grid; gap: 28px; }
.contact-details li { display: grid; grid-template-columns: auto 1fr; gap: 16px; }
.contact-details .icon { width: 48px; height: 48px; padding: 12px; border-radius: 50%; }
.contact-details li h3 { font-size: 1rem; color: var(--slate); font-weight: 600; margin-bottom: 4px; }
.contact-details li p { font-size: 1.2rem; font-weight: 600; }
.connect { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.connect p { color: var(--slate); }
@media (max-width: 899px) { .contact { grid-template-columns: 1fr; } }

/* stewardship */
.legal { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.legal-card { margin: 0; padding: clamp(24px, 3.4vw, 40px); border-radius: 28px; display: grid; gap: 20px; }
.legal-card div { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid rgba(58, 36, 38, .1); }
.legal-card div:last-child { border-bottom: 0; padding-bottom: 0; }
.legal-card dt { font-size: .9375rem; color: var(--slate); }
.legal-card dd { margin: 0; font-size: 1.25rem; font-weight: 700; }
.report-list { display: grid; gap: 12px; margin-top: 32px; }
.report-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 18px 20px; border-radius: 18px; }
.report-list .icon { grid-row: span 2; margin-top: 2px; }
.report-list span { font-weight: 700; }
.report-list em { font-style: normal; color: var(--slate); font-size: .9375rem; }
@media (max-width: 899px) { .legal { grid-template-columns: 1fr; } }

/* privacy */
.policy { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.policy-toc { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 4px; }
.policy-toc a { padding: 10px 14px; border-radius: 12px; text-decoration: none; font-weight: 600; color: var(--slate); }
@media (hover: hover) { .policy-toc a:hover { background: var(--mist); color: var(--ink); } }
.policy-body { display: grid; gap: 48px; max-width: 68ch; }
.policy-body section { display: grid; gap: 14px; scroll-margin-top: calc(var(--header-h) + 24px); }
.policy-body p { color: var(--slate); }
.policy-body strong { color: var(--ink); }
@media (max-width: 899px) { .policy { grid-template-columns: 1fr; } .policy-toc { position: static; } }

/* ---------- pointer response: cards lean toward the cursor, hero light drifts ---------- */
.tilt { transition: transform .45s var(--ease); will-change: transform; }
.tilt.is-tilting { transition-duration: .12s; }
@media (hover: hover) { .give-card.tilt:hover { transform: perspective(900px) rotateX(calc(var(--ty, 0) * -4deg)) rotateY(calc(var(--tx, 0) * 5deg)) translateY(-6px); } }
.dawn { transform: translate3d(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -10px), 0) scale(1.04); transition: opacity 1.4s, transform .8s var(--ease); }
.dawn-sun { translate: calc(var(--mx, 0) * 40px) calc(var(--my, 0) * 24px); transition: translate .8s var(--ease); }

/* ---------- reduced motion: everything visible, nothing moves on its own ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rv, .js .rv-wipe, .js .hero-fade { opacity: 1; transform: none; clip-path: none; }
  .split-words .w > span { transform: none; }
  .js .manifesto-lines span, .js .manifesto-note, .js .window-words, .js .window-sub { opacity: 1; transform: none; }
  .president-photo { position: relative; top: 0; }
  .page-hero .wrap { transform: none; opacity: 1; }
}

/* fields never force their container wider than the screen */
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
.contact > *, .give-now > *, .form-grid > *, .field { min-width: 0; }


/* ======================================================================
   COLLAGE THEME — type, buttons and surfaces from the collage boards
   ====================================================================== */
.d-hero, .d1, .d2, .d3, .d4, h1, h2, h3, .manifesto-lines, .window-words, .footer-big, .goal .number,
.faith-verse, .pull blockquote, .flourish span, .hope span, .outcome p, .legal-card dd, .contact-details li p { font-variation-settings: normal; font-optical-sizing: auto;
}
.kicker, .mv h3, .footer-col h2, .status, .role, .fc-label, .goal-label {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: .8125rem; font-weight: 500;
}
.goal-label { font-size: .875rem; }
.role { font-size: .875rem; }
.script-line { font-family: var(--script); font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.05; position: relative; width: fit-content; }
.script-line::after { content: ""; display: block; width: 42%; height: 3px; margin: 6px 0 0 auto; border-radius: 3px; transform: rotate(-2deg); }
.script-line--sm { font-size: clamp(2rem, 3.4vw, 3rem); }

/* buttons: squared blush tabs with spaced capitals and an arrow, like the boards */
.btn {
  min-height: 52px; padding: 0 28px; border-width: 1.5px;
  background: var(--sun); font: 500 .8125rem/1 var(--display);
  text-transform: uppercase;
}
.btn::after { content: "\2192"; font-size: 1.05rem; letter-spacing: 0; transition: transform .4s var(--ease); }
.btn::before { background: var(--deep); }
.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .75); }
.btn--ghost::before { background: var(--white); }
.btn--dark { background: var(--deep); }
.btn--dark::before { background: var(--jade); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .75rem; }
.btn--sm::after { display: none; }
@media (hover: hover) {
  .btn:hover::after { transform: translateX(4px); }
}
.link { font-weight: 500; }

/* wordmark: script "Girl", serif "Arise", spaced INTERNATIONAL, a leaf sprig */
.brand { gap: 8px; }
.brand-mark { order: 2; align-self: flex-start; }
.brand-name .b1 { font-size: 1.75rem; line-height: .9; display: flex; align-items: baseline; gap: 2px; }
.is-scrolled .brand-name .b1-script, .menu-open .brand-name .b1-script, .site-footer .b1-script,
body:has(.page-hero--plain) .site-header .b1-script { color: var(--jade); }
.brand-name .b2 { font-size: .625rem; font-weight: 500; letter-spacing: .38em; margin-top: 6px; padding-left: 2.2em; }

.nav-link, .nav-toggle { font: 500 .8125rem var(--display); }
@media (max-width: 1199px) { .nav-link, .nav-toggle { font: 600 1.6rem var(--head); } }

/* surfaces */
.window, .window-words { font-weight: 700; }
.tile, .give-card, .country, .form-card, .ccard .media, .split-media .media { border-radius: 6px; }
.split-media .media--sm { border-radius: 4px; }
.president-photo::before { background: linear-gradient(135deg, var(--blush), var(--sun)); border-radius: 6px; }
.field input, .field select, .amounts span, .frequency span { border-radius: 3px; }
.field textarea { border-radius: 3px; }
.scroll-cue { text-transform: uppercase; letter-spacing: .2em; font-size: .6875rem; }
.scroll-cue span { background: linear-gradient(var(--sun), transparent); }
.flourish li::before { display: none; }

/* photo strip under the tagline: four frames edge to edge, thin cream gutters */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 96px); padding: 0; list-style: none; }
.strip .media { aspect-ratio: 4 / 5; }
@media (max-width: 767px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "what we provide" collage: photographs sitting on blush caption panels with a rose badge */
.provide-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.provide-head .muted { font-size: 1.15rem; max-width: 62ch; }
.collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; padding: 0; list-style: none; }
.ccard { display: grid; }
.ccard:nth-child(odd) { margin-top: 44px; }
.ccard .media { aspect-ratio: 4 / 5; border-radius: 0; }
.ccard .media > img { transition: transform 1.2s var(--ease); }
@media (hover: hover) { .ccard:hover .media > img { transform: scale(1.05); } }
.ccard-cap { position: relative; display: grid; justify-items: center; gap: 6px; padding: 42px 18px 26px; text-align: center; }
.ccard-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; }
.ccard-badge .icon { width: 28px; height: 28px; }
.ccard h3 { font-size: .875rem; text-transform: uppercase; letter-spacing: .16em; }
.ccard p { font-size: .95rem; line-height: 1.4; max-width: 22ch; }
.provide-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap-reverse; margin-top: clamp(40px, 6vw, 72px); }
.provide-foot .script-line { margin-left: auto; }
@media (max-width: 899px) { .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ccard:nth-child(odd) { margin-top: 0; } .ccard:nth-child(even) { margin-top: 32px; } }
@media (max-width: 479px) { .ccard-cap { padding: 38px 10px 20px; } .ccard p { font-size: .875rem; } .ccard-badge { width: 52px; height: 52px; } .ccard-badge .icon { width: 22px; height: 22px; } }

/* about: the four ways a girl flourishes, as photographs */
.flourish li { padding: 0; border-radius: 0; display: grid; }
.flourish .media { aspect-ratio: 4 / 5; }
.flourish span { display: block; padding: 18px 16px 20px; text-align: center; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 600; }

/* donate: sponsor collage */
.sponsor-collage { display: grid; gap: 10px; }
.sponsor-collage .sc-main { aspect-ratio: 16 / 11; border-radius: 0; }
.sc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }
.sc-row li { display: grid; }
.sc-row .media { aspect-ratio: 1; }
.sc-row span { padding: 12px 8px 14px; text-align: center; font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.sponsor-collage .script-line { justify-self: end; margin-top: 10px; }

/* ---------- opening: the page starts dark on the film and brightens as she looks up ---------- */
.hero-reel { transition: filter 1.8s var(--ease); }
.site-header, .hero-inner, .hero-tools, .scroll-cue { transition: opacity 1.2s var(--ease) .35s; }
.intro .site-header, .intro .hero-inner, .intro .hero-tools, .intro .scroll-cue { opacity: 0; pointer-events: none; }
.hero-scrim { transition: opacity 1.8s var(--ease); }
.intro .hero-scrim { opacity: .4; }
.intro-skip { position: fixed; z-index: 60; right: var(--gutter); bottom: 28px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 3px; background: none; color: rgba(255, 255, 255, .8); font: 500 .6875rem var(--display); text-transform: uppercase; letter-spacing: .18em; cursor: pointer; opacity: 0; transition: opacity .6s; }
.intro .intro-skip { opacity: 1; }
.intro-skip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .intro .site-header, .intro .hero-inner, .intro .hero-tools, .intro .scroll-cue { opacity: 1; } }
.brand-mark { margin-left: -12px; margin-top: -4px; }
.newsletter { border-radius: 6px; }
.illustrative { font-size: .75rem; opacity: .75; }

/* ---------- brighter: lighter scrims over photos, words that glow ---------- */
.hero .d-hero, .page-hero:not(.page-hero--plain) .d-hero { color: #FFFFFF; filter: drop-shadow(0 2px 18px rgba(20, 10, 12, .45)) drop-shadow(0 1px 2px rgba(20, 10, 12, .35)); }
.hero-inner .lead, .page-hero .lead { font-weight: 500; text-shadow: 0 1px 12px rgba(20, 10, 12, .45); }
.band-title, .faith-verse, .cta-photo .d1 { filter: drop-shadow(0 2px 16px rgba(20, 10, 12, .4)); }
/* the 404 page's popular links */
.nf-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.nf-links a { display: grid; gap: 8px; padding: 26px 24px; border-radius: 6px; text-decoration: none; transition: background .3s; }
@media (hover: hover) { .nf-links a:hover { background: var(--blush); } }
@media (max-width: 767px) { .nf-links { grid-template-columns: 1fr; } }

/* ======================================================================
   CRAFT LAYER — scribbles, shine, livelier buttons, brighter type
   ====================================================================== */

/* hand-drawn marks: drawn in once the heading arrives */
.mark { position: relative; white-space: nowrap; }
.mark svg { position: absolute; pointer-events: none; overflow: visible; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mark[data-scribble="underline"] svg { left: -3%; width: 106%; bottom: -.2em; height: .42em; }
.mark[data-scribble="circle"] svg { left: -16%; width: 132%; top: -24%; height: 150%; }
.mark svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mark.is-in svg path, html:not(.js) .mark svg path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(.45s + var(--k, 0) * .35s); }
.mark[data-scribble="underline"] svg path + path { stroke-width: 2.2; opacity: .75; }

/* shine: a slow light sweep across accent words */
.mark, .hero .d-hero .w:nth-child(n+4) > span, .footer-big span { background-position: 100% 0;
}
.mark.is-in { animation: sheen 5.5s ease-in-out 1.2s infinite; }
.hero .split-words.is-in .w:nth-child(n+4) > span { animation: sheen 5s ease-in-out 1.6s infinite; }
@keyframes sheen { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }

/* brighter hero type: soft blush glow behind the white letters */
.hero-inner .lead { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }

/* handwritten note beside the hero buttons */
.hand-note { position: relative; align-self: center; margin-left: 18px; font-family: var(--script); font-size: 2rem; line-height: 1; transform: rotate(-6deg) translateY(-26px); opacity: 0; transition: opacity .8s var(--ease) 1.4s; }
.hand-note svg { position: absolute; left: -58px; top: 14px; width: 64px; height: 40px; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.hand-note path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1) 1.8s; }
.hero.is-ready .hand-note { opacity: 1; }
.hero.is-ready .hand-note path { stroke-dashoffset: 0; }
@media (max-width: 899px) { .hand-note { display: none; } }

/* buttons: lift, glow, a light sweep across, a pull toward the cursor, a ripple on press */
.btn { transform: translate(var(--bx, 0px), var(--by, 0px)); background-repeat: no-repeat; transition: transform .35s var(--ease), box-shadow .5s var(--ease), background-position .9s var(--ease), color .3s; }
.btn::before { display: none; }
.btn-ripple { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(255, 255, 255, .55); pointer-events: none; animation: ripple .7s ease-out forwards; z-index: -1; }
@keyframes ripple { to { transform: scale(22); opacity: 0; } }
@media (hover: hover) {
  .btn:hover { transform: translate(var(--bx, 0px), calc(var(--by, 0px) - 3px)); }
  .btn--ghost:hover { background-color: rgba(255, 255, 255, .12); }
}
.btn:active { transform: translate(var(--bx, 0px), var(--by, 0px)) scale(.97); }

/* the brand sprig drawn large and faint in the cream sections, drifting slowly */
.provide, .manifesto { position: relative; overflow: hidden; }
.provide::before, .manifesto::before {
  content: ""; position: absolute; pointer-events: none; width: clamp(260px, 32vw, 520px); aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 28C12 22 17 14 25 4' fill='none' stroke='%239E5E5A' stroke-width='.8' stroke-linecap='round'/%3E%3Cpath fill='%239E5E5A' d='M11 22c-4-1-6-4-6-7 3 0 6 2 6 7zM15 17c-4-1-6-4-6-8 3 1 6 3 6 8zM19 12c-3-1-5-4-4-8 3 1 5 4 4 8zM13 22c3-3 7-3 10-1-3 3-7 3-10 1zM17 17c3-3 7-3 10-1-3 2-7 3-10 1zM21 11c2-3 6-4 9-2-2 3-6 4-9 2z'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: sway 14s ease-in-out infinite alternate;
}
.provide::before { right: -60px; top: 40px; }
.manifesto::before { left: -80px; bottom: 10%; transform: scaleX(-1); animation-name: sway-flip; }
@keyframes sway { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(5deg) translateY(-18px); } }
@keyframes sway-flip { from { transform: scaleX(-1) rotate(-4deg); } to { transform: scaleX(-1) rotate(5deg) translateY(-18px); } }
.provide > .wrap, .manifesto > * { position: relative; }

/* small sparkles beside section kickers */
.hero .kicker::before { content: none; }

/* photos support the words: a touch softer and warmer behind text-heavy moments */
.tile .media > img, .band > .media > img, .cta-photo > .media > img, .faith > .media > img { filter: saturate(.92) brightness(1.04); }

@media (prefers-reduced-motion: reduce) {
  .mark svg path, .hand-note path { stroke-dashoffset: 0; }
  .hand-note { opacity: 1; }
}

/* ======================================================================
   NEON THEME — primary orange #FA7600 on a night sky, with hot pink and
   violet as its neon partners. Gradient type that glows, glass panels,
   3D tilt with light glare, glowing buttons, a slow aurora behind it all.
   (The Leadership page keeps the classic look: assets/arise-classic.css.)
   ====================================================================== */
:root {
  --neon: linear-gradient(92deg, #FF9436 0%, #FA7600 22%, #FF2E88 58%, #9D5CFF 100%);
  --neon-soft: linear-gradient(135deg, rgba(250, 118, 0, .22), rgba(255, 46, 136, .16) 55%, rgba(157, 92, 255, .18));
  --glow: 0 0 18px rgba(250, 118, 0, .55), 0 0 42px rgba(255, 46, 136, .25);
  --sun: #FA7600;
  --sun-deep: #FF9436;
}

/* aurora: slow drifting orange, pink and violet light behind every page */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  animation: aurora 26s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
@keyframes aurora { from { transform: translate3d(-3%, -2%, 0) rotate(0deg); } to { transform: translate3d(3%, 2%, 0) rotate(8deg); } }

/* surfaces go transparent or glass so the aurora shows through */
.manifesto, .window, .provide, .section, .site-footer, .section--mist { background: transparent; }
.dropdown { background: rgba(14, 13, 36, .96); color: var(--ink); }
.dropdown { border: 1px solid var(--line); }
@media (hover: hover) { .dropdown a:hover, .is-scrolled .nav-link:hover, .is-scrolled .nav-toggle:hover { background: rgba(255, 255, 255, .06); } }
.page-hero--plain { background: transparent; }

/* type: bold geometric headlines, white, with neon-gradient accent words */
.d-hero, .d1, .d2, .d3, .d4, h1, h2, h3, .manifesto-lines, .window-words, .footer-big, .goal .number, .faith-verse, .pull blockquote, .flourish span, .hope span, .outcome p, .legal-card dd, .contact-details li p { letter-spacing: -.035em;
}
.d4 { font-size: 1.25rem; }
.manifesto-lines span:nth-child(3), .footer-big span, .mark, .hero .d-hero .w:nth-child(n+4) > span, .window-words, .goal .number {
  background-image: var(--neon); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.window-words { background-image: var(--window-img, var(--neon)); }
.hero-inner .lead, .page-hero .lead { color: #FFFFFF; }
.kicker::before { color: var(--pink); }
a:not(.btn):not(.brand):not(.nav-link) { text-decoration-color: rgba(250, 118, 0, .6); }
.link { background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; }

/* hand-drawn marks become neon tubes */
.cta-photo .mark svg { stroke: #FFA451; }

/* buttons: orange-to-pink neon, glowing; ghost buttons get a gradient border */
.btn {
  background-color: transparent; border: 0;
  background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; border-radius: 999px;
}
.btn--ghost, .btn--dark {
  background-origin: border-box;
  background-size: 260% 100%, 100% 100%, 100% 100%; background-position: 130% 0, 0 0, 0 0;
}
@media (hover: hover) {
  .btn:hover { background-position: -40% 0, 0 0; }
}
.header-cta .btn { padding: 0 20px; }
.hero-pause, .menu-button { border-color: rgba(255, 255, 255, .3); }

/* 3D: cards tilt toward the cursor with a moving light glare, and lift off the page */
.tilt { transform-style: preserve-3d; }
.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .4s;
}
.tilt.is-tilting::after { opacity: 1; }
.ccard, .give-card, .country, .pillar, .flourish li, .sc-row li, .nf-links a, .tile { position: relative; }
.ccard .ccard-cap, .tile .tile-body { transform: translateZ(40px); }

/* photos: a thin neon edge and a glow when they're the thing you're pointing at */
@media (hover: hover) {
  .strip .media:hover, .split-media .media:hover { box-shadow: 0 0 0 1.5px rgba(250, 118, 0, .7), 0 0 44px -6px rgba(250, 118, 0, .55); transition: box-shadow .4s; }
}
.split-media .media--sm { border-color: var(--paper); }
.strip { gap: 10px; padding-inline: var(--gutter); }
.strip .media { border-radius: 14px; }

/* hero: deeper, with the words floating a little in 3D as the cursor moves */
.hero-inner { transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--p, 0) * -60px + var(--my, 0) * -6px), 0); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 4; }
.goals-note strong, .goal-label { color: #FFFFFF; }

/* the big closing words in the footer glow on the night sky */
.brand-name .b1-script, .is-scrolled .brand-name .b1-script, .menu-open .brand-name .b1-script, .site-footer .b1-script { text-shadow: 0 0 14px rgba(250, 118, 0, .6); }
.brand-mark, .is-scrolled .brand-mark, .site-footer .brand-mark { filter: drop-shadow(0 0 6px rgba(250, 118, 0, .7)); }
.brand-name .b1 { font-weight: 700; letter-spacing: -.03em; }

/* the drifting sprig watermarks glow faintly orange */

/* the icons in lists pick up the orange */

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
@media (max-width: 599px) { .mark { white-space: normal; } }

/* ======================================================================
   HIGHLIGHTS — lift the night background: a lighter indigo base, a warm
   spotlight behind each section, rim light on panels, glass orbs that
   float in 3D, and light beams. Nothing here changes layout.
   ====================================================================== */

/* a spotlight behind every section, alternating warm left / cool right */
.section, .manifesto, .window { position: relative; isolation: isolate; }
.section::before, .window::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
/* a soft light band at the top edge of each section */
.section::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; z-index: -1; pointer-events: none;
}

/* headings catch the light: a faint warm glow behind section titles */
.section-head, .provide-head { position: relative; }
.section-head::before, .provide-head::before {
  content: ""; position: absolute; left: -6%; top: -30%; width: 70%; height: 160%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(250, 118, 0, .16), transparent);
  filter: blur(10px);
}

/* rim light on every glass panel: bright top edge, soft inner sheen */
.form-card, .country, .hope li, .notice, .give-card, .pillar, .report-list li, .nf-links a, .newsletter, .legal-card, .governance, .flourish li, .ccard, .sc-row li, .tile {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 38%);
}

/* glass orbs: a few 3D spheres floating in the background */
.provide, .manifesto { isolation: isolate; }
.manifesto::after, .provide::after, #about::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  width: var(--s, 130px); aspect-ratio: 1;
  background: radial-gradient(circle at 32% 28%, var(--cw) 0%, rgba(255, 255, 255, .85) 5%, var(--c1, #FFB27A) 16%, var(--c2, #FA7600) 44%, var(--c3, #6a2400) 78%, var(--c4, #2a0e00) 100%);
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, .6), 0 0 60px -6px var(--glow-c, rgba(250, 118, 0, .55)), inset -10px -14px 30px rgba(0, 0, 0, .35);
  animation: orb-float 9s ease-in-out infinite alternate;
}
.manifesto::after { --s: 150px; right: 7%; top: 16%; }
.provide::after { --s: 90px; left: 46%; top: 60px; --c1: #FF9CCB; --c2: #FF2E88; --c3: #7a0f45; --c4: #2a0418; --glow-c: rgba(255, 46, 136, .55); animation-duration: 11s; }
#about::after { --s: 70px; right: 5%; top: 10%; animation-duration: 8s; }
@keyframes orb-float { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(0, -26px, 0) rotate(8deg); } }
@media (max-width: 767px) { .manifesto::after { --s: 80px; top: 6%; } }

/* diagonal light beams across the hero's lower edge and the goals band */
.hero-scrim::after, .band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 170, 110, .10) 44%, transparent 50%, transparent 58%, rgba(255, 46, 136, .08) 63%, transparent 68%);
  mix-blend-mode: screen; animation: beams 14s ease-in-out infinite alternate;
}
.band::before { z-index: -1; }
@keyframes beams { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* photos get a soft warm rim so they separate from the dark */

@media (prefers-reduced-motion: reduce) {
  .manifesto::after, .provide::after, #about::after, .hero-scrim::after, .band::before { animation: none; }
}

/* ======================================================================
   REFINE — "controlled energy". 80% calm, 20% spectacular.
   Type in three levels: Syne for the monumental moments, Manrope for
   section headings and text. Orange = action. Pink = emotion (one word).
   ====================================================================== */
:root {
  --violet: #A855F7;
  --display: "Manrope", system-ui, sans-serif;
  --head: "Manrope", system-ui, sans-serif;
  --serif: "Manrope", system-ui, sans-serif;
  --moment: "Syne", "Manrope", system-ui, sans-serif;
}
body { font-family: var(--display); font-size: 1.0625rem; line-height: 1.65; font-weight: 400; }

/* background: deep navy, faint grain, light that seems to spill from the photos */
body::before {
  background:
    radial-gradient(40vmax 30vmax at 12% 12%, rgba(250, 118, 0, .13), transparent 62%),
    radial-gradient(36vmax 28vmax at 88% 34%, rgba(255, 43, 166, .09), transparent 62%),
    radial-gradient(44vmax 34vmax at 50% 96%, rgba(88, 60, 200, .16), transparent 62%),
    linear-gradient(180deg, #0A0C26 0%, #07091F 50%, #0C0B28 100%);
  animation-duration: 40s;
}
body::after {
  opacity: .07; mask-image: none; mix-blend-mode: overlay; background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.manifesto::after, .provide::after, #about::after { display: none; }

/* --- type levels --- */
.d-hero { line-height: .92; font-size: clamp(3rem, 8vw, 8rem); }
.page-hero .d-hero { font-size: clamp(2.6rem, 6vw, 5.8rem); }
.d1, .d2, .d3, .d4, h1, h2, h3, .faith-verse, .pull blockquote, .flourish span, .hope span, .outcome p, .legal-card dd, .contact-details li p { font-family: var(--head); font-style: normal; }
.d1 { line-height: 1.04; font-size: clamp(2.1rem, 4.2vw, 3.7rem); }
.d2 { line-height: 1.08; font-size: clamp(1.75rem, 3vw, 2.7rem); }
.d3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.manifesto-lines { line-height: .95; }
.lead { line-height: 1.6; }
.kicker { text-shadow: none; letter-spacing: .18em; }
/* the rising motif: three arcs, used as the label mark */
.kicker::before {
  content: ""; display: inline-block; width: 18px; height: 11px; margin-right: 10px; vertical-align: .05em; animation: none; text-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2 13a10 10 0 0 1 20 0M6.5 13a5.5 5.5 0 0 1 11 0M10.5 13a1.5 1.5 0 0 1 3 0' fill='none' stroke='%23EB6A00' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- color jobs: mostly off-white; one highlighted concept per headline in pink with a faint glow --- */
.mark, .hl, .manifesto-lines span:nth-child(3), .footer-big span, .hero .d-hero .w:nth-child(n+4) > span {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; filter: none; animation: none; font-style: normal;
}
/* big numbers are orange: they ask you to act */
.goal .number { background: none; -webkit-text-fill-color: currentColor; filter: none; animation: none; }
.goal-label { color: var(--ink); }
.window-words { animation: none; }
.hand-note svg { stroke: #FF8FCF; filter: drop-shadow(0 0 6px rgba(255, 43, 166, .6)); }
.script-line::after { background: var(--orange); box-shadow: none; }

/* --- buttons: orange is action. Solid, a soft warm glow, a gentle press --- */
.btn { letter-spacing: .14em;
}
.btn--ghost, .btn--dark {
  background-clip: padding-box;
}
@media (hover: hover) {
  .btn--ghost:hover, .btn--dark:hover { background-position: -40% 0, 0 0; }
}
.hero-actions .btn:first-child { animation: none; }
.tile-more .icon { box-shadow: none; }
.status::before { box-shadow: 0 0 0 4px rgba(250, 118, 0, .2); }
.site-header::after, .hero::after { box-shadow: none; }
.brand-name .b1 { font-family: var(--moment); }

/* --- motion hierarchy: cards lean only 2–4°, the photo inside eases forward, a faint highlight crosses --- */
.tilt { transform: perspective(1100px) rotateX(calc(var(--ty, 0) * -2.5deg)) rotateY(calc(var(--tx, 0) * 3.5deg)); }
.tilt::after { background: radial-gradient(520px circle at calc(50% + var(--tx, 0) * 50%) calc(50% + var(--ty, 0) * 50%), rgba(255, 255, 255, .10), transparent 55%); }
@media (hover: hover) {
  .ccard.is-tilting .media > img, .tile.is-tilting .media > img { transform: scale(1.045); transition: transform 1.2s var(--ease); }
}
.provide::before, .manifesto::before { opacity: .06; filter: none; animation-duration: 24s; }
.band::before { display: none; }
.hero-scrim::after { opacity: .6; animation-duration: 22s; }

/* --- hero: a slow documentary push-in and dust catching the light --- */
.hero-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero-dust i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; animation: dust 16s linear infinite; animation-delay: var(--d); }
@keyframes dust { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .75; } 70% { opacity: .5; } 100% { transform: translate3d(28px, -160px, 0); opacity: 0; } }
.intro .hero-dust { opacity: 0; }

/* --- "Get to know us": one dominant card, two stacked --- */
.tiles--feature { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tiles--feature > li { display: flex; }
.tiles--feature > li:first-child { grid-row: 1 / span 2; }
.tiles--feature .tile { flex: 1; min-height: clamp(260px, 22vw, 320px); }
.tiles--feature > li:first-child .tile { min-height: clamp(540px, 46vw, 660px); }
.tiles--feature > li:first-child .d3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
@media (max-width: 899px) { .tiles--feature { grid-template-columns: 1fr; grid-template-rows: none; } .tiles--feature > li:first-child { grid-row: auto; } .tiles--feature > li:first-child .tile { min-height: 440px; } }

/* --- faint giant words behind sections --- */
.bgword {
  position: absolute; z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
  font: 800 clamp(5rem, 19vw, 19rem)/.8 var(--moment); letter-spacing: -.05em;
  color: transparent;
  transform: translate3d(calc((var(--p, .5) - .5) * -90px), 0, 0);
}
.section > .wrap { position: relative; z-index: 1; }

/* --- the ripple: ONE GIRL → ONE GENERATION --- */
.ripple { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); }
.ripple-bg { position: absolute; inset: -12% 0; z-index: -2; transform: translate3d(0, calc((var(--p, .5) - .5) * -16%), 0); }
.ripple::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.ripple-stack { display: grid; gap: .1em; }
.ripple-line { margin: 0; text-transform: uppercase; line-height: .9; }
.js .ripple-line.rv { transform: translate3d(0, 30px, 0) scale(.94); transform-origin: left center; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .ripple-line.rv.is-in { transform: none; }
.ripple-note { max-width: 46ch; margin-top: clamp(28px, 4vw, 48px); font-size: 1.15rem; }

/* --- Education: a giant word with a thin 3D edge; the girl stands in front of it --- */
.js .edu-word.rv { opacity: 0; transform: translate3d(-50%, 40px, 0) scale(.96); }
.js .edu-word.rv.is-in { opacity: 1; transform: translate3d(-50%, calc((var(--p, .5) - .5) * 70px), 0); }
.js .edu-girl.rv { transform: translate3d(-50%, 50px, 0); }
.js .edu-girl.rv.is-in { transform: translate3d(-50%, calc((var(--p, .5) - .5) * -40px), 0); }
.js .edu-points li.rv.is-in { transform: translate3d(0, calc((var(--p, .5) - .5) * var(--z) * -34px), 0); }

/* --- Our story: the girl steps out above the top edge of her photo --- */
.popout { position: relative; aspect-ratio: 4 / 5; }
.split-media .popout .popout-frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 28px; clip-path: inset(13% 0 0 0 round 28px); }
.popout-cut { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 2; clip-path: inset(0 0 86% 0); filter: drop-shadow(0 -4px 14px rgba(0, 0, 0, .35)); }
.popout::after { content: ""; position: absolute; left: 0; right: 0; top: 13%; bottom: 0; border-radius: 28px; pointer-events: none; }
.split-media .media--sm { z-index: 3; }

/* --- the finale: big words, then the two actions --- */
.footer-big { padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 0; line-height: .9; }
.footer-cta { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: clamp(56px, 6vw, 88px); border-bottom: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .hero-reel, .hero-dust i { animation: none; }
  .hero-dust { display: none; }
  .bgword, .ripple-bg { transform: none; }
}
/* refine: the wide display face needs smaller sizes to keep lines whole */
body { font-feature-settings: "calt" 0; font-variant-ligatures: no-contextual; }
.hero .d-hero { font-size: clamp(2.6rem, 5.9vw, 5.6rem); line-height: .95; }
.hero-inner .d-hero { max-width: 17ch; }
.manifesto-lines { font-size: clamp(1.9rem, 4.9vw, 4.9rem); }
.goal .number { font-size: clamp(2.2rem, 4vw, 4rem); }
.goal .number.word { font-size: clamp(1.7rem, 2.8vw, 2.8rem); }
.goals { gap: 36px 24px; }
.footer-big { font-size: clamp(2.4rem, 6.8vw, 6.4rem); }
.ripple-line { font-size: min(calc(3vw + var(--i) * 1.7vw), calc(1.8rem + var(--i) * 1.55rem)); }
@media (max-width: 599px) {
  .goal .number.word { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  .goal { min-width: 0; }
  .page-hero .d-hero { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
}
@media (max-width: 899px) { .goal:has(.number.word) { grid-column: 1 / -1; } }
.section:has(> .bgword) { overflow-x: clip; }

/* ======================================================================
   ORANGE & WHITE — orange is the main color, white the second. No black
   or navy backgrounds. Body text is a warm deep brown for readability.
   Photos are toned with orange light instead of dark shade.
   ====================================================================== */
:root {
  --orange: #FA7600;
  --orange-hi: #FF9436;
  --orange-deep: #CE5A00;      /* orange dark enough for small text on white */
  --peach: #FFE2CC;
  --cream: #FFFFFF;
  --paper: #FFFFFF;
  --mist: #FFFFFF;
  --blush: #FFE8D8;
  --deep: #CE5A00;              /* warm brown text */
  --line: rgba(250, 118, 0, .18);
  --jade: #CE5A00;
  --red: #CE5A00;
  --gold: #FFE2CC;
  --on-dark-muted: rgba(255, 255, 255, .9);
  --pink: #CE5A00;
  --pink-glow: none;
}
html, body { background: var(--cw); color: var(--ink); color-scheme: light; }
body::before, body::after { display: none; }
.section::before, .window::before { background: radial-gradient(50% 60% at 10% 0%, rgba(250, 118, 0, .06), transparent 70%); opacity: 1; }
.section:nth-of-type(even)::before { background: radial-gradient(50% 60% at 90% 0%, rgba(250, 118, 0, .06), transparent 70%); }
.section::after { background: linear-gradient(90deg, transparent, rgba(250, 118, 0, .25), transparent); box-shadow: none; }
.section-head::before, .provide-head::before { display: none; }
.lead, .muted, .prose .muted, .ripple-note { color: var(--slate); }
.mv h3, .role, .fc-label { color: var(--orange-deep); }
.d1, .d2, .d3, .d4, h1, h2, h3 { color: var(--ink); }

/* panels: white cards with a soft warm shadow */
.form-card, .country, .hope li, .notice, .give-card, .pillar, .report-list li, .creds li, .contact-details .icon, .nf-links a, .newsletter, .legal-card, .governance, .flourish li, .ccard, .sc-row li {
  background: var(--cw); background-image: none; border: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 24px 50px -32px rgba(206, 90, 0, .35);
}
.newsletter::before { background: radial-gradient(60% 90% at 100% 100%, rgba(250, 118, 0, .14), transparent 60%); opacity: 1; }
.ccard h3, .sc-row span { color: var(--ink); }
.ccard p { color: var(--slate); }
.ccard-badge { color: #fff; box-shadow: 0 0 0 5px #fff; }
.give-card .icon, .checks .icon, .outcome .icon, .notice .icon, .report-list .icon, .governance .icon, .contact-details .icon, .pillar .icon, .way .icon { color: var(--orange); filter: none; }
.give-card::before { background: var(--peach); }
@media (hover: hover) { .give-card:hover, .give-card:hover p, .give-card:hover .icon { color: var(--ink); } }
.todo { background: var(--peach); color: var(--ink); }
.field input, .field select, .field textarea { background-color: var(--cw); color: var(--ink); border-color: rgba(43, 18, 6, .18); }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%230A2A43' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); }
.field select option { background: var(--cw); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(250, 118, 0, .18); }
.amounts span, .frequency span { border-color: rgba(43, 18, 6, .18); }
.amounts input:checked + span, .frequency input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--cw); box-shadow: none; }

/* highlight word: orange on white */
.mark, .hl, .manifesto-lines span:nth-child(3), .hero .d-hero .w:nth-child(n+4) > span { color: var(--orange); text-shadow: none; }
.mark svg { stroke: var(--orange); filter: none; }
.link { background-image: linear-gradient(var(--orange), var(--orange)); }
.script-line, .hand-note { color: var(--ink); text-shadow: none; }

/* buttons: orange with warm brown text; white on orange backgrounds */
.btn { box-shadow: 0 12px 26px -14px rgba(250, 118, 0, .8); }
.btn--ghost, .btn--dark { color: var(--ink); border: 1.5px solid var(--orange); background-image: linear-gradient(115deg, transparent 30%, rgba(250, 118, 0, .12) 48%, transparent 66%), linear-gradient(#fff0, #fff0); box-shadow: none; }
@media (hover: hover) {
  .btn:hover { box-shadow: 0 16px 32px -12px rgba(250, 118, 0, .9), 0 0 0 5px rgba(250, 118, 0, .14); }
  .btn--ghost:hover, .btn--dark:hover { color: var(--ink); border-color: var(--orange); box-shadow: 0 0 0 5px rgba(250, 118, 0, .12); }
}

/* header: white text over the photo heroes, white bar with brown text once scrolled */
.site-header::before { background: linear-gradient(rgba(120, 45, 0, .35), transparent); }
.site-header::after { box-shadow: none; }
.brand-name .b1-script, .is-scrolled .brand-name .b1-script, .menu-open .brand-name .b1-script { color: #FFD2B0; text-shadow: none; }
.is-scrolled .brand-name .b1-script, .menu-open .brand-name .b1-script, .site-footer .b1-script { color: var(--orange); }
.brand-mark, .is-scrolled .brand-mark { color: #FFD2B0; filter: none; }
.is-scrolled .brand-mark, .menu-open .brand-mark { color: var(--orange); }
@media (max-width: 1199px) { .primary-nav { background: var(--cw); color: var(--ink); } }
@media (hover: hover) { .is-scrolled .nav-link:hover { background: var(--cream); } }
.nav-link { padding-inline: 11px; }
@media (max-width: 1279px) { .nav-link { padding-inline: 8px; } }
body:has(.page-hero--plain) .site-header:not(.is-scrolled) { color: var(--ink); }
body:has(.page-hero--plain) .site-header:not(.is-scrolled) .b1-script, body:has(.page-hero--plain) .site-header:not(.is-scrolled) .brand-mark { color: var(--orange); }

/* photos are toned with orange light, not dark shade */
.hero::after { opacity: .6; }
.tile::after { background: linear-gradient(0deg, rgba(196, 85, 0, .92) 0%, rgba(250, 118, 0, .35) 50%, transparent 75%); }
.hero-dust i { background: rgba(255, 255, 255, .9); box-shadow: 0 0 8px rgba(255, 220, 190, .9); }

/* orange sections: the manifesto, the ripple, the goals, EDUCATION, faith, the footer */
.manifesto { color: #fff; }
.manifesto-lines { color: #fff; }
.manifesto-lines span:nth-child(3) { color: #2B1206; }
.manifesto-note { color: rgba(255, 255, 255, .9); }
.manifesto::before { opacity: .12; filter: brightness(10); }
.ripple-line { color: #fff; }
.ripple-note { color: rgba(255, 255, 255, .92); }
.band .d1, .band-title { color: #fff; }
.goal .number { color: #fff; text-shadow: none; }
.goals-note { color: rgba(255, 255, 255, .92); }
.cta-photo .mark { color: #2B1206; }
.cta-photo .btn--ghost, .hero .btn--ghost, .page-hero .btn--ghost, .footer-cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .85); }
.hero .btn, .page-hero .btn:not(.btn--ghost), .band .btn:not(.btn--ghost), .footer-cta .btn:not(.btn--ghost), .edu .btn:not(.btn--ghost) { background-image: linear-gradient(115deg, transparent 30%, rgba(250, 118, 0, .12) 48%, transparent 66%), linear-gradient(var(--cw), var(--cw)); color: var(--orange-deep); box-shadow: 0 12px 26px -14px rgba(120, 45, 0, .55); }
.faith-verse, .faith-copy, .faith-copy strong { color: #fff; }
.popout::after { box-shadow: 0 0 0 1px rgba(250, 118, 0, .25), 0 30px 60px -30px rgba(206, 90, 0, .45); }
.strip .media, .ccard .media, .split-media .media, .country .media, .tile { box-shadow: 0 24px 50px -28px rgba(206, 90, 0, .45); }
.tilt.is-tilting { box-shadow: 0 40px 70px -40px rgba(206, 90, 0, .55), 0 0 0 1px rgba(250, 118, 0, .25); }

/* footer: orange with white type */
.site-footer { color: #fff; border-top: 0; }
.footer-big span { color: #2B1206; text-shadow: none; }
.footer-cta { border-bottom-color: rgba(255, 255, 255, .3); }
.footer-col h2, .footer-brand, .footer-brand p, .footer-col a, .footer-contact, .footer-bottom, .footer-bottom a { color: #fff; }
.footer-brand p, .footer-contact, .footer-bottom { opacity: .95; }
.fc-label { color: rgba(255, 255, 255, .8); }
.footer-top, .footer-bottom { border-color: rgba(255, 255, 255, .3); }
@media (hover: hover) { .footer-col a:hover, .footer-bottom a:hover { color: #2B1206; } }
.site-footer .todo { background: rgba(255, 255, 255, .25); color: var(--cw); }
.site-footer .brand, .site-footer .brand-name { color: #fff; }
.site-footer .b1-script, .site-footer .brand-mark { color: #2B1206; }
/* clarity pass: headline white on photos; lighter orange wash so the film stays crisp; readable cards */
.hero .d-hero, .page-hero .d-hero, .hero h1, .page-hero h1 { color: #fff; }
.tile .media::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile .tile-body { position: relative; z-index: 2; }

/* shades of orange: amber light, tangerine, main orange and burnt orange, never one flat fill */
:root { --o-tangerine: #FF9436; --o-peach: #FFD9B8;
  --sunrise-bg:
    radial-gradient(60% 80% at 12% 8%, rgba(255, 196, 120, .55), transparent 60%),
    radial-gradient(55% 75% at 92% 95%, rgba(178, 72, 0, .5), transparent 62%),
    radial-gradient(40% 60% at 70% 20%, rgba(255, 138, 42, .45), transparent 60%),
    linear-gradient(135deg, #FF9A3C 0%, #F27A12 34%, #E66500 62%, #D85A00 100%);
}
.manifesto, .site-footer { background: var(--sunrise-bg); }
.manifesto-lines span:nth-child(1) { color: #FFF3E6; }
.manifesto-lines span:nth-child(2) { color: #FFE0C2; }
.footer-big { color: #FFF3E6; }
.btn { background-image: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%), linear-gradient(170deg, #FF8526 0%, #FF9436 35%, #FA7600 70%, #D45800 100%); }
.hdr-now .btn { background: linear-gradient(170deg, #FF8526 0%, #FF9436 35%, #FA7600 70%, #D45800 100%); }
.ccard-badge, .tile-more .icon, .status::before { background: linear-gradient(145deg, #FF9549, #FA7600 60%, #D85A00); }
.tile-more .icon { color: #fff; }
.site-header::after, .hero::after { background: linear-gradient(90deg, #FF9549, #FA7600 55%, #D85A00); }
.section--mist, .provide { background: linear-gradient(180deg, var(--cw), #FFEEDD); }
.newsletter { background: linear-gradient(135deg, var(--cw), #FFE3C8); }
/* words on photos are always white */
.tile h3, .tile .d3, .tile-body, .tile-body p, .tile-more, .band h2, .band .d1, .ripple h2, .faith h2, .cta-photo h2, .cta-photo .d1, .page-hero h1, .page-hero .d-hero, .page-hero .lead, .page-hero .crumbs, .page-hero .crumbs a { color: #fff; }
/* navy text on white and orange */

/* header: always white, navy text, orange accents */
.site-header, .site-header.is-scrolled, .site-header.menu-open { background: rgba(255, 255, 255, .97); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(206, 90, 0, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-header::before { display: none; }
@media (hover: hover) { .site-header .nav-link:hover { background: var(--cream); } }
.site-header .menu-button { border-color: rgba(43, 18, 6, .25); }
@media (max-width: 1199px) { .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--cw); } }

/* leadership: directors stacked one above the other */
.directors { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.director { display: grid; border-radius: 22px; background: var(--cw); border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
@media (hover: hover) { .director:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -32px rgba(206, 90, 0, .5), 0 0 0 1px rgba(250, 118, 0, .3); } }
.director-photo { aspect-ratio: 1; overflow: hidden; background: var(--cream); }
.director-photo img { width: 100%; height: 100%; object-fit: cover; }
.director-text .d3 { margin: 0; }
.director-role { margin-top: 4px; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.director-focus { margin-top: 6px; color: var(--slate); max-width: 62ch; }

/* bio pop-up */
.bio-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 24px; background: var(--cw); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(43, 18, 6, .45); }
.bio-dialog::backdrop { background: rgba(250, 118, 0, .35); backdrop-filter: blur(4px); }
.bio-dialog[open] { animation: bio-in .35s var(--ease); }
@keyframes bio-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.bio-dialog-inner { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; padding: clamp(24px, 4vw, 40px); }
.bio-dialog-inner img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.bio-dialog h2 { font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--head); color: var(--ink); }
.bio-dialog .person-role { margin-top: 6px; color: var(--orange-deep); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.bio-text { display: grid; gap: 14px; margin-top: 18px; color: var(--slate); }
.bio-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--cw); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
@media (hover: hover) { .bio-close:hover { background: var(--cream); } }
@media (max-width: 599px) { .bio-dialog-inner { grid-template-columns: 1fr; } .bio-dialog-inner img { width: 120px; } }

/* silver sparkles rising from key headlines, shrinking from small to tiny */
[data-sparkle] { position: relative; }
.sparkles { position: absolute; left: 0; right: 0; bottom: 30%; height: 0; pointer-events: none; z-index: 2; }
.sparkles i {
  position: absolute; left: var(--x); bottom: 0; width: var(--s); height: var(--s); opacity: 0;
  background: radial-gradient(circle, var(--cw) 0 18%, #E9EEF5 34%, #B9C3D2 60%, transparent 72%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .95)) drop-shadow(0 0 1px rgba(90, 105, 130, .7));
  animation: sparkle-rise var(--t) ease-out infinite; animation-delay: var(--d);
}
@keyframes sparkle-rise {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  60% { opacity: .85; }
  100% { transform: translate3d(var(--dx), -150px, 0) scale(.12) rotate(120deg); opacity: 0; }
}
.hero .hand-note { color: #fff; }
.hero .hand-note svg { stroke: #fff; filter: none; }
.hero-dot span::after { background: linear-gradient(90deg, #FF9549, #FA7600); }

/* African-inspired pattern: strips between sections and a patterned corner on photos */
.afro-strip { height: 44px; background: url("pattern/strip.svg") repeat-x left center / auto 44px; }
.afro-strip--thin { height: 22px; background-size: auto 22px; }
.media.is-loaded::before, .popout .popout-frame::before {
  display: block; content: ""; position: absolute; inset: 0 0 auto auto; width: clamp(56px, 16%, 110px); aspect-ratio: 1; height: auto;
  background: url("pattern/corner.svg") no-repeat top right / contain; z-index: 2; transform: none; pointer-events: none;
  filter: drop-shadow(-2px 2px 6px rgba(120, 45, 0, .25));
}
.hero .media.is-loaded::before, .band > .media::before, .faith > .media::before, .ripple-bg::before, .page-hero > .media::before, .cta-photo > .media::before, .media--sm::before, .tile .media::before { display: none; }
.tile .media.is-loaded::before { display: block; z-index: 2; }

/* leadership: big portraits, stacked, with Read bio */
.director { grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); align-items: center; padding: clamp(18px, 2.4vw, 28px); gap: clamp(22px, 4vw, 48px); }
.director-photo { width: 100%; border-radius: 22px; }
.director-focus { font-size: 1.1rem; }
.director-more { grid-column: 2; justify-self: start; margin-top: -8px; }
.director > .director-text { align-self: end; }
.director > .director-more { align-self: start; }
@media (max-width: 719px) { .director { grid-template-columns: 1fr; } .director-photo { width: 100%; } .director-more { grid-column: 1; margin-top: 0; } }

/* photos in their true colors: only a soft navy shade where white text sits */
.tile .media::after { background: linear-gradient(0deg, rgba(43, 18, 6, .78) 0%, rgba(43, 18, 6, .35) 36%, transparent 62%); }
.hero-scrim { background: linear-gradient(0deg, rgba(43, 18, 6, .6) 0%, rgba(43, 18, 6, .12) 38%, transparent 60%), linear-gradient(90deg, rgba(43, 18, 6, .35), transparent 55%); }
.page-hero::after { background: linear-gradient(0deg, rgba(43, 18, 6, .68), rgba(43, 18, 6, .1) 55%, transparent), linear-gradient(90deg, rgba(43, 18, 6, .3), transparent 65%); }
.ripple::after { background: linear-gradient(95deg, rgba(43, 18, 6, .72) 0%, rgba(43, 18, 6, .4) 45%, transparent 100%); }
.faith::after { background: radial-gradient(80% 70% at 50% 50%, rgba(43, 18, 6, .35), rgba(43, 18, 6, .7)); }
.cta-photo::after { background: rgba(43, 18, 6, .45); }
.ripple .hl, .faith-ref { color: #FF9549; }
.hero .hand-note { text-shadow: 0 1px 10px rgba(43, 18, 6, .55); }

/* more pattern life: zigzag bands and vertical strips down section edges */
.afro-zigzag { height: 48px; background: url("pattern/zigzag.svg") repeat-x left center / auto 48px; }
.afro-v { position: absolute; top: 0; bottom: 0; width: 22px; z-index: 0; pointer-events: none; background: url("pattern/strip-v.svg") repeat-y center top / 22px auto; }
.afro-v--left { left: 0; }
.afro-v--right { right: 0; }
@media (max-width: 767px) { .afro-v { width: 12px; background-size: 12px auto; } }
/* "nations rise." in the hero: the bright orange of the Donate button */
/* varied strips: each placement picks a different random mix */
.afro-strip--1 { background-image: url("pattern/strip-1.svg"); }
.afro-strip--2 { background-image: url("pattern/strip-2.svg"); }
.afro-strip--3 { background-image: url("pattern/strip-3.svg"); }
.afro-strip--4 { background-image: url("pattern/strip-4.svg"); }
.afro-strip--5 { background-image: url("pattern/strip-5.svg"); }
.afro-strip--6 { background-image: url("pattern/strip-6.svg"); }
.afro-v--1 { background-image: url("pattern/strip-v1.svg"); }
.afro-v--2 { background-image: url("pattern/strip-v2.svg"); }
.afro-v--3 { background-image: url("pattern/strip-v3.svg"); }
/* goals over the photo stay readable */
.band::after { background: linear-gradient(180deg, rgba(43, 18, 6, .6), rgba(43, 18, 6, .45) 50%, rgba(43, 18, 6, .72)); }
/* connectors: vertical pattern lines that bridge one section into the next */
/* hero sharpness: no stacked zooms; photos drift only slightly */
.hero-media .media { transform: translate3d(0, calc(var(--p, 0) * 12%), 0); inset: 0; }
.hero-reel { animation: none; }
.hero-slide img { transform: none; }
.hero-slide.is-active img { animation: hero-drift-soft 9s linear forwards; }
@keyframes hero-drift-soft { from { transform: scale(1); } to { transform: scale(1.035); } }
.intro .hero-reel { filter: brightness(.55) saturate(.95); }

/* ===== kept from the 09-28 design pass: colors and fonts ===== */

/* colors: a very dark Prussian blue (not black, not grey) beside the brand orange, and an orange family
   whose darker tones carry emphasis. No yellow anywhere. */
:root {
  --blue: #2B1206; --ink: #2B1206; --text: #12283A; --slate: #6B4A36;
  --o-amber: #FF9549; --o-main: #FA7600; --o-burnt: #D85A00; --o-rust: #B04500; --o-ember: #823300;
}
body { color: var(--text); }
:where(h1, h2, h3, .d1, .d2, .d3, .d4) { color: var(--blue); }
.btn, .btn:hover { color: #fff; }
/* "nations rise.": full, saturated orange */
.hero .d-hero .w:nth-child(n+4) > span, .page-hero .d-hero .w:nth-child(n+4) > span {
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
}
/* more orange, with the darker tones carrying emphasis */
.kicker, .ccard h3, .director-role, .role { color: var(--o-burnt); }
.kicker::before { filter: saturate(1.2) brightness(.85); }
.ccard-cap { border-bottom: 5px solid var(--o-burnt); }
.btn:not(.btn--ghost) { background-image: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%), linear-gradient(180deg, #FF9436 0%, var(--o-main) 45%, var(--o-burnt) 100%); }
@media (hover: hover) { .btn:not(.btn--ghost):hover { background-image: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%), linear-gradient(180deg, var(--o-main), var(--o-rust)); } }
.site-header.is-scrolled { box-shadow: inset 0 -3px 0 var(--o-burnt); }
.director { border-left: 6px solid var(--o-main); }
.director:nth-child(even) { border-left-color: var(--o-rust); }
.nav-link, .nav-toggle { color: var(--blue); }
.nav-link[aria-current="page"] { color: var(--o-rust); box-shadow: inset 0 -4px 0 var(--o-burnt); }

/* fonts: five display faces, each with its own job */
.d-hero, .manifesto-lines, .footer-big, .ripple-line, .window-words, .goal .number {
  font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 900; letter-spacing: -.015em; font-variation-settings: normal;
}
h2, .d1, .d2 { font-family: "Fraunces", serif; font-style: italic; font-weight: 900; letter-spacing: -.01em; font-variation-settings: "SOFT" 100, "WONK" 1; }
h3, .d3, .d4, .bio-dialog h2 { font-family: "Corben", serif; font-style: normal; font-weight: 700; letter-spacing: 0; }
.faith-verse, .pull blockquote, blockquote, .verse, .lead { font-family: "DM Serif Display", serif; font-style: italic; font-weight: 400; letter-spacing: 0; }
.kicker, .btn, .director-role, .ccard h3, .role { font-family: "Kaisei Decol", serif; font-weight: 700; }
/* header navigation and its Donate button: as thick as it gets */
.nav-link, .nav-toggle, .header-cta .btn {
  font-family: "Fraunces", serif; font-style: normal; font-weight: 900; font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: .98rem; letter-spacing: .05em; text-transform: uppercase; -webkit-text-stroke: .9px currentColor; paint-order: stroke fill;
}
@media (max-width: 1199px) { .nav-link, .nav-toggle { font-size: 1.5rem; text-transform: none; letter-spacing: 0; } }
.hero .btn:not(.btn--ghost), .hero .btn:not(.btn--ghost):hover { color: #fff; -webkit-text-fill-color: #fff; }
/* the block behind Anne's portrait: bright orange */
html body .president-photo::before { background: linear-gradient(135deg, #FFB25E 0%, #FF9A2E 50%, #FF8A1A 100%); }

/* logo: "Arise" in the same face as the header links, so the wordmark sits with the nav */
.site-header .brand-name .b1, .site-footer .brand-name .b1 {
  font-family: "Fraunces", serif; font-style: normal; font-weight: 900; font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -.01em;
}

/* one header everywhere: the solid white bar with a single thin orange line (the Programs look) */
html body .site-header, html body .site-header.is-scrolled, html body .site-header.menu-open { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 -3px 0 var(--o-burnt);
}
html body .site-header::before { display: none; }
html body .site-header::after { display: none; }
.hero::after { display: none; }

/* tighter rhythm: less empty space between sections, tighter still where two light sections meet */
.section { padding-block: clamp(52px, 6.5vw, 96px); }
.manifesto { padding-block: clamp(60px, 8vw, 110px); }
.window { padding-block: clamp(52px, 6.5vw, 96px); }
.ripple { padding-block: clamp(80px, 10vw, 140px); }
.band { padding-block: clamp(90px, 11vw, 160px); }
.cta-photo { padding-block: clamp(84px, 10vw, 150px); }
.section + .section, .window + .section, .section + .window, .manifesto + .section { padding-top: clamp(24px, 3vw, 44px); }
h3, .d3, .d4 { line-height: 1.28; }
/* home hero headline: much bigger */
/* home hero headline: two lines, "When girls rise," / "nations rise.", as big as fits beside her face */
html body .hero .d-hero { font-size: clamp(3.2rem, 6.8vw, 5.9rem); line-height: 1; max-width: none; }
@media (min-width: 720px) {
  html body .hero .d-hero { display: flex; flex-wrap: wrap; column-gap: .24em; }
  html body .hero .d-hero::after { content: ""; flex-basis: 100%; height: 0; order: 1; }
  html body .hero .d-hero .w:nth-child(n+4) { order: 2; }
}

/* leadership names: upright, in the h3 face */
#president-h, .director-text h3, .director-text .d3, .bio-dialog h2 { font-variation-settings: normal;
}

/* board cards: photo spans the card; name -> Read bio sit as one group, centred beside it,
   so the card is only a little taller than the photo */
@media (min-width: 720px) {
  .director { grid-template-rows: 1fr auto auto 1fr; row-gap: 0; padding: clamp(14px, 1.6vw, 20px); column-gap: clamp(24px, 3.5vw, 44px); }
  .director > .director-photo { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .director > .director-text { grid-column: 2; grid-row: 2; align-self: end; }
  .director > .director-more { grid-column: 2; grid-row: 3; align-self: start; margin-top: 18px; }
}
/* home: both strips thin, and the hero sized so the top strip and the one closing it are both on screen when the page opens */
main > .hero:first-child + .afro-strip { height: 35px; background-size: auto 35px; }
main > .hero:first-child { min-height: calc(100svh - 35px); }
/* faint Swahili words behind the white sections (build.py adds them); alternate sides */
/* faint Swahili words behind the white sections (build.py adds them); alternate sides */
.section { overflow-x: clip; }
.bgword { -webkit-text-stroke: 1.2px rgba(250, 118, 0, .16); }
/* header: a cool white (faint blue lean, to sit with the Prussian-blue type) */
html body .site-header, html body .site-header.is-scrolled, html body .site-header.menu-open { background: var(--cw); }
@media (max-width: 1199px) { html body .primary-nav { background: var(--cw); } }

/* brighter, purer orange on the key orange words: "Girl" in the logo, "nations rise.", highlighted words */
:root { --o-bright: #FF7A00; --o-bright-hi: #FF9A1F; }
.site-header .brand-name .b1-script, .site-header .brand-mark { color: var(--o-bright); }
.hero .d-hero .w:nth-child(n+4) > span, .page-hero .d-hero .w:nth-child(n+4) > span {
  background: linear-gradient(170deg, var(--o-bright-hi) 0%, var(--o-bright) 60%, #FF6A00 100%); -webkit-background-clip: text; background-clip: text;
}
:where(.section, .window, .page-hero--plain, main) .mark, :where(.section, .window, .page-hero--plain, main) .hl {
  background: linear-gradient(175deg, var(--o-bright-hi) 0%, var(--o-bright) 55%, #FF6A00 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.cta-photo .mark, .ripple .hl, .tile .mark { background: none; -webkit-text-fill-color: currentColor; }
/* book logo: its colors come from these, so it reads on every background */
.brand-mark { width: 34px; height: 34px; }
/* logo: "Girl" in a script with real weight (Dancing Script Bold), not a hairline */
.brand-name .b1-script, .site-header .brand-name .b1-script, .site-footer .brand-name .b1-script { font-style: normal;
}

/* clear, no fog: drop the hero's glow layer, keep only a light shade behind the text,
   and give the film more contrast and colour (the files can't be re-graded here) */
.hero-scrim::after { display: none; }
html body .ripple::after { background: linear-gradient(95deg, rgba(43, 18, 6, .55) 0%, rgba(43, 18, 6, .22) 42%, transparent 70%); }
/* hero-1 / hero-2 films: lifted, milky blacks read as fog; pull the blacks down, add contrast and colour
   (the intro film keeps its own warm look) */
.hero-slide video { filter: none; }
.hero-slide[data-video] video { filter: brightness(.92) contrast(1.32) saturate(1.15); }

/* leadership names in Merriweather Black, sized to take the same room Corben did */
#president-h, .director-text h3, .director-text .d3, .bio-dialog h2 {
  font-family: "Merriweather", Georgia, serif; font-weight: 900; font-style: normal; letter-spacing: -.01em;
}
.director-text .d3 { font-size: clamp(1.75rem, 2.95vw, 2.62rem); }
#president-h { font-size: clamp(2.2rem, 4.3vw, 3.7rem); }

/* logo "Girl": a heavy script (Pacifico) so it holds its own next to "Arise" */
.brand-name .b1-script, .site-header .brand-name .b1-script, .site-footer .brand-name .b1-script {
  font-family: "Pacifico", cursive; font-weight: 400; font-size: 1em; letter-spacing: 0; line-height: 1;
}

/* header links: on hover the word warms to orange and an orange line sweeps in from the left */
.nav-link, .nav-toggle { position: relative; transition: color .25s ease; }
.nav-link::after, .nav-toggle::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--o-bright, #FF7A00), var(--o-bright-hi, #FF9A1F));
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.3, .7, .2, 1);
}
@media (hover: hover) {
  .nav-link:hover, .nav-toggle:hover { color: var(--o-bright, #FF7A00); background: none; }
  .nav-link:hover::after, .nav-toggle:hover::after { transform: scaleX(1); }
}
@media (max-width: 1199px) { .nav-link::after, .nav-toggle::after { display: none; } }

/* "Executive leadership" on Anne's section: the same style as "Founder & CEO", a little bigger */
.kicker.kicker--pill {
  color: var(--o-burnt); font-family: "Kaisei Decol", serif; font-weight: 700; font-style: normal;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: .12em; text-transform: uppercase;
}
.kicker.kicker--pill::before { display: none; }
/* "Founder & CEO" under Anne's name: bigger */
#president .role { font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: .12em; margin-top: 6px; }
/* the second Swahili word sits low in the opposite corner */
.window, .page-hero--plain { position: relative; overflow-x: clip; }
.page-hero--plain > .wrap { position: relative; z-index: 1; }
/* Swahili words: small enough to read whole, kept inside the section */
.bgword { font-size: clamp(2.6rem, 7.5vw, 8rem); right: clamp(12px, 3vw, 48px); top: clamp(16px, 3vw, 44px); line-height: 1; }
.bgword--left { left: clamp(12px, 3vw, 48px); right: auto; }
.bgword--bottom { top: auto; bottom: clamp(14px, 2.5vw, 40px); }
/* bio pop-ups: the photo keeps a portrait shape instead of stretching to the dialog's height */
.bio-dialog-inner > img { align-self: start; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; }

/* ---- depth and light effects (approved 29 Sep 2026; effects only: no colour, font or layout changes) ---- */
/* 1-2: hero titles lift off the photo (filter, so the word-by-word reveal spans don't box the shadow) */
.hero .d-hero, .page-hero .d-hero, .page-hero .lead { filter: drop-shadow(0 2px 2px rgba(43, 18, 6, .35)) drop-shadow(0 12px 24px rgba(43, 18, 6, .45)); }
/* 3: "Every girl..." letterpress offset in deep ember */
.manifesto-lines span { text-shadow: 3px 4px 0 rgba(150, 50, 0, .30); }
/* 4: "One girl... One generation" stays readable over the photo */
.ripple-stack, .ripple .wrap { filter: drop-shadow(0 2px 2px rgba(43, 18, 6, .5)) drop-shadow(0 8px 20px rgba(43, 18, 6, .6)); }
/* 5: footer closing line pressed into the orange */
.footer-big { text-shadow: 0 -1px 0 rgba(255, 255, 255, .35), 0 3px 0 rgba(150, 50, 0, .35), 0 12px 30px rgba(150, 50, 0, .35); }
/* 6: board cards on layered paper, portraits framed */
.director { box-shadow: 0 1px 0 rgba(43, 18, 6, .06), 0 22px 44px -22px rgba(43, 18, 6, .30); }
.director-photo { box-shadow: 0 0 0 5px #fff, 0 14px 30px -10px rgba(43, 18, 6, .40); }
/* 7: giving and pillar cards: warm icon glow, top highlight, deeper lift */
.give-card .icon, .pillar .icon, .way .icon { filter: drop-shadow(0 6px 10px rgba(250, 118, 0, .45)); }
.give-card, .pillar { box-shadow: inset 0 1px 0 #fff, 0 30px 60px -30px rgba(206, 90, 0, .55); }
/* 8: "Start here" tile titles */
.tile .d3 { text-shadow: 0 2px 2px rgba(43, 18, 6, .45), 0 8px 24px rgba(43, 18, 6, .65); }
/* 10: section headings on white float slightly */
.section-head .d1, .section-head .d2 { text-shadow: 0 10px 24px rgba(43, 18, 6, .16); }

/* ---- phones: roomier side margins (29 Sep 2026) ---- */
@media (max-width: 719px) {
  :root { --gutter: 24px; }
  /* a long vertical strip down one edge: keep the text a clear step away from it */
  section:has(> .afro-v--left) > .wrap { padding-left: 10px; }
  section:has(> .afro-v--right) > .wrap { padding-right: 10px; }
  /* the Swahili background words collide with the small labels at phone width */
  .bgword { display: none; }
}

/* ---- plain title block (Privacy, 404): dark ink on the light ground; later hero rules made it white ---- */
.page-hero--plain, .page-hero--plain .d1, .page-hero--plain h1 { color: var(--ink); }
.page-hero--plain .lead, .page-hero--plain .crumbs, .page-hero--plain .crumbs a, .page-hero--plain .crumbs li { color: var(--slate); }
.page-hero--plain .d1, .page-hero--plain .lead { filter: none; text-shadow: none; }

/* ---- CONTRAST SYSTEM (29 Sep 2026) ----------------------------------------------------------
   White on the brand orange #FA7600 is only ~2.7:1. Navy #2B1206 on it is ~5.4:1.
   Rule: text on orange (buttons, orange bands, footer) is navy; white text only on dark grounds. */
:root { --on-orange: #2B1206; }

/* buttons: every fill a button can show (orange at rest, white or orange on hover) takes navy text */
html body .btn { color: var(--on-orange); }
html body .btn:is(:hover, :focus-visible) { color: var(--on-orange); }
/* the dark button keeps white text at rest; its hover fill is light, so it turns navy */
html body .btn--dark::before { background: var(--cw); }
/* outline buttons over photos stay white until filled */
/* outline buttons on the orange footer band: navy line and text */
html body .footer-cta .btn--ghost { border-color: var(--on-orange); }
html body .footer-cta .btn--ghost::before { background: var(--cw); }

/* orange bands: the manifesto and the footer */
html body .manifesto, html body .manifesto-lines span, html body .manifesto-note, html body .manifesto p { color: var(--on-orange); }
html body .manifesto-lines span { text-shadow: 3px 4px 0 rgba(255, 255, 255, .28); }
html body .site-footer, html body .site-footer :is(p, li, a, span, h2, h3, small, address, dt, dd) { color: var(--on-orange); }
html body .site-footer a:hover { text-decoration: underline; }
html body .footer-big { color: var(--on-orange); text-shadow: 0 -1px 0 rgba(255, 255, 255, .35), 0 3px 0 rgba(150, 50, 0, .25); }
html body .footer-big span { color: var(--on-orange); }

/* solid buttons: one lighter orange ramp so navy text clears 4.5:1 across the whole button */
html body .btn:not(.btn--ghost) { border-color: transparent; }
html body .btn--dark { color: var(--on-orange); }
html body .btn:not(.btn--ghost)::before { background: var(--cw); }
/* outline buttons over photos: a navy glass fill so white text never depends on the photo */
html body :is(.hero, .page-hero, .cta-photo, .faith, .band, .ripple) .btn--ghost { background-color: rgba(43, 18, 6, .55); background-image: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* orange bands: lighter ramp (the old one darkened to #D85A00, where navy dropped under 4.5:1) */
html body .site-footer, html body .manifesto { background: linear-gradient(160deg, #FFA048 0%, #FA7600 70%); }
html body .site-footer .todo, html body .todo { background: rgba(255, 255, 255, .55); color: var(--on-orange); }
/* small orange labels on white/cream: a deeper orange */
html body .kicker:not(.on-dark .kicker) { color: #A84300; }
/* selected gift options */
html body :is(.amounts, .frequency) input:checked + span { color: var(--on-orange); }

/* photos under white text: a minimum navy veil, strongest on the side the text sits on */
html body .page-hero--plain::after { display: none; }
html body .cta-photo::after { background: rgba(43, 18, 6, .6); }

/* ---- contrast pass, round 2 ---- */
/* older, more specific rules still painted some buttons white-with-orange-text or orange-with-white-text */
html body .btn:not(.btn--ghost) { color: var(--on-orange) !important; background-color: #FA7600 !important; background-image: linear-gradient(180deg, #FF9A45 0%, #FA7600 100%) !important; }
html body :is(.hero, .page-hero, .cta-photo, .faith, .band, .ripple) .btn--ghost:not(:hover):not(:focus-visible) { color: #fff !important; }
/* tile photos: a navy veil from the bottom, where the text sits */
/* faith band: the photo is bright; a firmer navy veil and a white verse reference */
html body .faith::after { background: radial-gradient(90% 80% at 50% 50%, rgba(43, 18, 6, .58), rgba(43, 18, 6, .8)); }
html body .faith-ref { color: #fff; }
/* goals band sits under a navy veil: white labels */
html body .band .goal-label, html body .band .goals-note strong { color: #fff; }
html body .band::after { background: linear-gradient(180deg, rgba(43, 18, 6, .72), rgba(43, 18, 6, .6) 50%, rgba(43, 18, 6, .8)); }
/* highlighted words over dark photo bands */
html body :is(.cta-photo, .faith, .band, .page-hero:not(.page-hero--plain), .hero) .mark { color: #FFB26B; }
/* small orange headings and roles on white */
html body :is(.ccard h3, .mv h3, .director-role, .ccard-badge) { color: #A84300; }
html body .page-hero::after { background: linear-gradient(90deg, rgba(43, 18, 6, .72) 0%, rgba(43, 18, 6, .46) 45%, rgba(43, 18, 6, .16) 78%), linear-gradient(0deg, rgba(43, 18, 6, .55), transparent 55%); }
html body .tile::after { z-index: 1 !important; opacity: 1 !important; background: linear-gradient(0deg, rgba(43, 18, 6, .9) 0%, rgba(43, 18, 6, .72) 55%, rgba(43, 18, 6, .5) 100%) !important; }
html body .tiles--feature > li:first-child .tile::after { background: linear-gradient(0deg, rgba(43, 18, 6, .9) 0%, rgba(43, 18, 6, .6) 35%, rgba(43, 18, 6, .08) 70%) !important; }
html body .tile .tile-body { position: relative; z-index: 2; }
html body .btn:not(.btn--ghost) { background-size: 100% 100% !important; background-position: 0 0 !important; background-repeat: no-repeat !important; }
html body .manifesto-lines span:nth-child(n) { color: var(--on-orange) !important; }

/* ---- footer band buttons: navy with white text (footer only) ---- */
html body .footer-cta .btn,
html body .footer-cta .btn--ghost { color: var(--cw) !important; background-color: #2B1206 !important; background-image: none !important; border: 2px solid #2B1206 !important; }
html body .footer-cta .btn::before { display: none !important; }
html body .footer-cta .btn:is(:hover, :focus-visible) { color: #2B1206 !important; background-color: var(--cw) !important; border-color: var(--cw) !important; }
html body .site-footer a.btn:hover, html body .footer-cta .btn:hover { text-decoration: none !important; }

/* ---- Mission hero: headline on navy, two photo cards side by side (29 Sep 2026) ---- */

/* ---- Mission hero, round 2: orange ground with Swahili words; "nations." in navy ---- */
html body .page-hero--cards .d-hero .w:nth-child(n+4) > span { color: #2B1206 !important; -webkit-text-fill-color: #2B1206 !important; background: none !important; text-shadow: none !important; animation: none !important; }

/* ---- page heroes with two photo cards: shared spacing ---- */

/* ---- phones: full-width photo bands become a framed photo above the text (no stretching) ---- */
@media (max-width: 719px) {
  html body :is(.band, .faith, .cta-photo) { background: #2B1206; padding-top: 24px; }
  html body :is(.band, .faith, .cta-photo)::after { display: none; }
  html body :is(.band, .faith, .cta-photo) > .media {
    position: relative !important; inset: auto !important; transform: none !important;
    width: auto; height: auto; aspect-ratio: 16 / 10; margin: 0 var(--gutter) 28px; border-radius: 18px; overflow: hidden;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 24px 44px -20px rgba(0, 0, 0, .6); }
  html body :is(.band, .faith, .cta-photo) > .media img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---- all widths: goals and faith bands show their photo as a framed card at its real size (no stretching) ---- */
html body :is(.band, .faith) { background: #2B1206; padding-top: clamp(32px, 5vw, 72px); }
html body :is(.band, .faith)::after { display: none; }
html body :is(.band, .faith) > .media {
  position: relative !important; inset: auto !important; transform: none !important;
  width: min(100% - 2 * var(--gutter), 960px); height: auto; aspect-ratio: 16 / 9; margin: 0 auto clamp(32px, 4vw, 56px); border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 30px 60px -24px rgba(0, 0, 0, .6); }
html body :is(.band, .faith) > .media img { width: 100%; height: 100%; object-fit: cover; }
/* orange page tops: small text and pill links in navy */
html body .page-hero--cards .btn--ghost:not(:hover):not(:focus-visible) { color: #2B1206 !important; border-color: #2B1206 !important; background: rgba(255, 255, 255, .22) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- home ripple band: the walking-to-school clip ---- */
html body .ripple-bg video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- subtle logo on some photos (second card of each page top) ---- */
html body .ripple > .ripple-bg { inset: 0 !important; transform: none !important; }
@media (min-width: 720px) { html body .ripple .ripple-stack { margin-top: clamp(40px, 5vw, 72px); } }
/* ---- home hero polish (29 Sep 2026) ---- */
/* slides whose subject stood on the text side are mirrored so faces sit on the right */
.hero-slide--flip > video { scale: -1 1; }
/* a soft navy pool behind the headline block, so every rotating slide reads the same */
html body .hero-scrim {
  background:
    radial-gradient(ellipse 58% 62% at 20% 56%, rgba(43, 18, 6, .58), transparent 72%),
    linear-gradient(90deg, rgba(43, 18, 6, .5) 0%, rgba(43, 18, 6, .22) 45%, rgba(43, 18, 6, 0) 68%),
    linear-gradient(0deg, rgba(43, 18, 6, .45) 0%, transparent 38%); }
@media (max-width: 719px) {
  html body .hero-scrim { background: linear-gradient(0deg, rgba(43, 18, 6, .82) 0%, rgba(43, 18, 6, .62) 45%, rgba(43, 18, 6, .3) 70%, rgba(43, 18, 6, .15) 100%); }
}

/* ---- "Start here" tiles: less dead space between photo and text ---- */
html body .tiles--feature .tile { min-height: clamp(230px, 19vw, 280px); }
html body .tiles--feature > li:first-child .tile { min-height: clamp(460px, 38vw, 560px); }
html body .tile .tile-body { padding: 24px 26px; gap: 8px; }
/* extended photo: girl sits in the right third on wide screens, centred on phones */
html body .hero-slide img.hero-img-wide { object-position: 44% 50%; }
@media (max-width: 719px) { html body .hero-slide img.hero-img-wide { object-position: 69% 50%; } }
/* ---- ORANGE, ALIVE (29 Sep 2026) ---------------------------------------------------------------
   Pure-orange grounds (home manifesto, page tops, footer) get slow drifting warm light, a faint woven
   diagonal texture and floating Swahili words. The light layers only lighten the orange, so navy text
   stays at or above 5.4:1. All motion stops for prefers-reduced-motion. */
html body :is(.manifesto, .page-hero--cards, .site-footer) {
  position: relative; overflow: hidden;
  background:
    radial-gradient(38% 55% at 18% 28%, rgba(255, 214, 150, .55), transparent 70%),
    radial-gradient(32% 48% at 82% 72%, rgba(255, 196, 120, .45), transparent 70%),
    radial-gradient(26% 40% at 60% 10%, rgba(255, 236, 200, .35), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, #FFA048 0%, #FA7600 72%);
  background-size: 180% 180%, 180% 180%, 200% 200%, auto, auto, auto;
  background-position: 0% 0%, 100% 100%, 50% 0%, 0 0, 0 0, 0 0;
  animation: orange-drift 26s ease-in-out infinite alternate;
}
@keyframes orange-drift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 0%, 0 0, 0 0, 0 0; }
  50%  { background-position: 60% 40%, 40% 60%, 20% 60%, 26px 0, 0 26px, 0 0; }
  100% { background-position: 100% 20%, 0% 80%, 80% 30%, 52px 0, 0 52px, 0 0; }
}
/* Swahili words on orange: white outline, slow float */
html body .bgword--orange, html body :is(.manifesto, .page-hero--cards, .site-footer) .bgword {
  display: block; color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, .5); z-index: 0; pointer-events: none;
  animation: word-float 18s ease-in-out infinite alternate; }
html body .bgword--orange.bgword--bottom, html body :is(.manifesto, .page-hero--cards, .site-footer) .bgword--bottom { animation-duration: 23s; animation-direction: alternate-reverse; }
@keyframes word-float { from { translate: -24px 0; } to { translate: 24px -10px; } }
html body :is(.manifesto, .site-footer) > :not(.bgword) { position: relative; z-index: 1; }
@media (max-width: 719px) { html body :is(.manifesto, .page-hero--cards, .site-footer) .bgword { display: block; font-size: clamp(3rem, 16vw, 5rem); } }
@media (prefers-reduced-motion: reduce) {
  html body :is(.manifesto, .page-hero--cards, .site-footer), html body :is(.manifesto, .page-hero--cards, .site-footer) .bgword { animation: none; }
}

/* ---- footer columns in Times New Roman ---- */
html body .site-footer .footer-top :is(.footer-col, .footer-brand > p) :is(p, a, li, span, address), html body .site-footer .footer-brand > p { font-family: "Times New Roman", Times, serif; }
/* footer column headings in the page-title style (Bodoni Moda black italic, white, navy drop shadow) */
html body .site-footer .footer-top h2 {
  font-family: "Bodoni Moda", serif !important; font-weight: 900; font-style: italic; font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  text-transform: none; letter-spacing: -.01em; line-height: 1.05; color: #fff !important;
  text-shadow: 0 3px 0 rgba(43, 18, 6, .55), 0 0 1px rgba(43, 18, 6, .6); margin-bottom: 18px; }
/* ---- board portraits: the same African-pattern corner as the other photos ---- */
html body .director-photo, html body .president-photo .frame { position: relative; overflow: hidden; }
html body .director-photo::before, html body .president-photo .frame::before {
  display: block; content: ""; position: absolute; inset: 0 0 auto auto; width: clamp(56px, 22%, 96px); aspect-ratio: 1;
  background: url("pattern/corner.svg") no-repeat top right / contain; z-index: 2; pointer-events: none;
  filter: drop-shadow(-2px 2px 6px rgba(120, 45, 0, .25)); }

/* ---- ripple band: show the whole walking clip (16:9), nothing cropped ---- */
html body .ripple { aspect-ratio: 16 / 9; min-height: 0; height: auto; display: flex; align-items: center; }
html body .ripple-bg video { object-fit: cover; object-position: 50% 50%; }
@media (max-width: 899px) {
  /* narrow screens: the clip sits as a full 16:9 strip on top, the words below on navy */
  html body .ripple { aspect-ratio: auto; display: block; background: #2B1206; padding-top: calc(100vw * 9 / 16); }
  html body .ripple > .ripple-bg { position: absolute !important; inset: 0 0 auto 0 !important; height: calc(100vw * 9 / 16) !important; }
  html body .ripple > .ripple-bg::after, html body .ripple::after { display: none !important; }
  html body .ripple .ripple-stack { margin-top: 28px; }
}
@media (min-width: 900px) {
  html body .ripple .wrap { width: min(100% - 2 * var(--gutter), var(--max)); }
  html body .ripple .ripple-stack, html body .ripple .ripple-note { max-width: 34%; }
  html body .ripple .ripple-line { font-size: clamp(1.1rem, 2.4vw, 2.3rem) !important; }
  html body .ripple .ripple-line:last-child, html body .ripple .ripple-line .hl { font-size: clamp(1.5rem, 3.4vw, 3.3rem) !important; }
}

/* ---- footer logo: real brand colours on a white badge ---- */
html body .site-footer .footer-brand .brand {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 10px; margin-bottom: 18px;
  background: var(--cw); border-radius: 16px; box-shadow: 0 14px 30px -14px rgba(43, 18, 6, .45); }
html body .site-footer .footer-brand .b1 { color: #2B1206 !important; font-family: inherit; }
html body .site-footer .footer-brand .b1-script { color: #FA7600 !important; }
html body .site-footer .footer-brand .b2 { color: #2B1206 !important; }
html body .site-footer .footer-brand .brand-mark { color: #FA7600; }

/* ---- one logo everywhere: orange "Girl", navy "Arise", orange book, navy INTERNATIONAL ---- */
html body .brand .b1-script { color: #FA7600 !important; }
html body .brand .b1 { color: #2B1206 !important; }
html body .brand .b2 { color: #2B1206 !important; display: block !important; opacity: .85; }
html body .brand-mark { --bk-page: #FA7600; --bk-cover: #D85A00; --bk-ribbon: #2B1206; --bk-line: #fff; }
@media (max-width: 479px) { html body .site-header .brand-name .b2 { font-size: .5rem; letter-spacing: .26em; margin-top: 2px; } }
/* photo badge: same lockup, a touch larger so it reads crisply */
/* same spacing and crispness for every copy of the logo */
html body .brand { gap: 12px !important; }
html body .brand .brand-mark { filter: none !important; box-shadow: none !important; flex: 0 0 auto; }
html body .site-footer .footer-brand .brand .brand-name { width: auto !important; }
@media (max-width: 479px) { html body .site-header .brand .brand-mark { width: 30px !important; height: auto !important; margin-left: 6px; } html body .site-header .brand { gap: 6px !important; } }
/* identical lockup type everywhere (matches the header) */
html body :is(.brand, .photo-logo) .b1 { font-family: Fraunces, serif !important; font-weight: 900 !important; letter-spacing: -.01em !important; }
html body :is(.brand, .photo-logo) .b1-script { font-family: Pacifico, cursive !important; font-weight: 400 !important; }
html body :is(.brand, .photo-logo) .b2 { font-family: Manrope, system-ui, sans-serif !important; font-weight: 500 !important; }

/* ---- faith band: photo fills the section; text sits low on the left, clear of the logo and the girls ---- */
@media (min-width: 720px) {
  html body .faith { background: #2B1206; padding: 0; height: min(56.25vw, 941px); min-height: 0; display: flex; align-items: flex-end; }
  html body .faith > .media {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    aspect-ratio: auto; margin: 0 !important; border-radius: 0; box-shadow: none; z-index: 0; }
  html body .faith > .media img { width: 100%; height: 100%; object-fit: cover; }
  html body .faith::after { display: block !important; content: ""; position: absolute; inset: 0; z-index: 1; }
  html body .faith > .wrap { position: relative; z-index: 2; padding-block: 0 clamp(28px, 3.4vw, 56px); width: min(100% - 2 * var(--gutter), var(--max)); }
  html body .faith > .wrap > * { max-width: 44%; margin-left: 0; text-align: left; }
  html body .faith .faith-verse { font-size: clamp(1.2rem, 2vw, 2rem) !important; line-height: 1.15; }
  html body .faith .faith-copy { display: grid; grid-template-columns: 1fr; gap: 10px; font-size: clamp(.8rem, .95vw, .95rem); margin-top: 14px; }
}
@media (min-width: 720px) {
  html body .faith::after { background:
    linear-gradient(90deg, rgba(43, 18, 6, .92) 0%, rgba(43, 18, 6, .8) 30%, rgba(43, 18, 6, .35) 48%, transparent 58%),
    linear-gradient(0deg, rgba(43, 18, 6, .55) 0%, transparent 55%) !important;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 50%, transparent 72%); mask-image: linear-gradient(0deg, #000 0%, #000 50%, transparent 72%); }
}

/* ---- outline buttons over photos: on hover they fill white with navy text (were fading into the navy glass) ---- */
html body :is(.hero, .page-hero:not(.page-hero--cards), .cta-photo, .faith, .band, .ripple) .btn--ghost:is(:hover, :focus-visible) {
  background: var(--cw) !important; background-image: none !important; color: #2B1206 !important; border-color: var(--cw) !important; }

/* ---- footer headline: thicken Bodoni's hairlines so the W and every thin stroke read on orange ---- */
html body .footer-big, html body .footer-big span { -webkit-text-stroke: 2.2px #2B1206 !important; paint-order: stroke fill; }
/* African pattern band between the headline and the buttons */
html body .footer-afro { margin: clamp(18px, 2vw, 28px) 0; border-radius: 4px; }

/* ---- footer columns: Times New Roman, heavier and larger so it reads on orange ---- */
html body .site-footer .footer-top :is(.footer-col, .footer-brand > p) :is(p, a, li, span, address), html body .site-footer .footer-brand > p {
  font-weight: 700 !important; font-size: 1.18rem !important; color: #2B1206 !important; letter-spacing: .005em; }
html body .site-footer .fc-label { color: #2B1206 !important; opacity: 1 !important; font-weight: 700 !important; font-size: .9rem !important; }
html body .site-footer .todo { background: var(--cw) !important; }
html body .footer-afro { height: 30px !important; background-size: auto 30px !important; max-width: 640px; }

/* ---- page tops: extended photos keep the person on the right, clear of the headline ---- */
html body .page-hero .media img.top-ext { object-position: 100% 40%; }
@media (max-width: 719px) { html body .page-hero .media img.top-ext { object-position: 82% 40%; } }

/* ---- page-top photos: the African-pattern corner, larger, top right ---- */
html body .page-hero:not(.page-hero--plain) > .media::before {
  display: block !important; content: ""; position: absolute; top: var(--header-h); right: 0; left: auto; bottom: auto;
  width: clamp(110px, 13vw, 190px); aspect-ratio: 1; height: auto; z-index: 3; pointer-events: none;
  background: url("pattern/corner.svg") no-repeat top right / contain; transform: none;
  filter: drop-shadow(-3px 3px 8px rgba(43, 18, 6, .35)); }
html body .page-hero .media img.top-right { object-position: 85% 35%; }
/* clips now carry the colour grade in the files themselves */
html body .hero-slide video, html body .hero-slide[data-video] video, html body .ripple-bg video { filter: none !important; }
html body .hand-note { font-size: 1.5rem; }
html body .script-line { font-size: clamp(1.6rem, 2.6vw, 2.5rem); } html body .script-line--sm { font-size: clamp(1.1rem, 1.5vw, 1.45rem); white-space: nowrap; }
html body .script-line--sm { font-size: clamp(1.3rem, 1.9vw, 1.75rem); }
@media (min-width: 900px) {
  html body .ripple::after { content: ""; display: block !important; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(43, 18, 6, .78) 0%, rgba(43, 18, 6, .55) 28%, rgba(43, 18, 6, 0) 46%); }
  html body .ripple > .wrap { position: relative; z-index: 2; }
}
/* footer logo badge hugs the logo */
html body .site-footer .footer-brand .brand { width: fit-content !important; max-width: 100%; gap: 8px !important; padding: 10px 16px 8px !important; }
html body .site-footer .footer-brand .brand .brand-name { flex: 0 0 auto; }

/* ---- footer column headings: calligraphic outline (broad-nib: thick on the downstrokes, hairline on the upstrokes) ---- */
html body .site-footer .footer-top h2 {
  -webkit-text-stroke: 0 !important;
  text-shadow: 1.6px 0 0 #2B1206, -1.6px 0 0 #2B1206, 1.1px .35px 0 #2B1206, -1.1px -.35px 0 #2B1206, 0 .45px 0 #2B1206, 0 -.45px 0 #2B1206, 0 3px 0 rgba(43, 18, 6, .35) !important; }

/* ---- tiles: clear photos, shade only under the words (was a blue haze over the whole card) ---- */
html body .tile::after { background: linear-gradient(0deg, rgba(43, 18, 6, .88) 0%, rgba(43, 18, 6, .62) 30%, rgba(43, 18, 6, .18) 52%, rgba(43, 18, 6, 0) 64%) !important; }
html body .tiles--feature > li:first-child .tile::after { background: linear-gradient(0deg, rgba(43, 18, 6, .88) 0%, rgba(43, 18, 6, .55) 24%, rgba(43, 18, 6, 0) 46%) !important; }
html body .tile .tile-body :is(h3, p, .tile-more) { text-shadow: 0 1px 2px rgba(43, 18, 6, .7), 0 2px 12px rgba(43, 18, 6, .55); }

/* ---- cards: a woven African band above the words, a different pattern on each card ---- */
html body .tile .tile-body { position: relative; }
html body .tile .tile-body::before { content: ""; display: block; height: 14px; margin: 0 0 14px; border-radius: 3px;
  background: url("pattern/strip-1.svg") repeat-x left center / auto 14px; box-shadow: 0 2px 8px rgba(43, 18, 6, .35); }
html body li:nth-child(6n+2) > .tile .tile-body::before { background-image: url("pattern/strip-4.svg"); }
html body li:nth-child(6n+3) > .tile .tile-body::before { background-image: url("pattern/strip-2.svg"); }
html body li:nth-child(6n+4) > .tile .tile-body::before { background-image: url("pattern/strip-6.svg"); }
html body li:nth-child(6n+5) > .tile .tile-body::before { background-image: url("pattern/strip-3.svg"); }
html body li:nth-child(6n) > .tile .tile-body::before { background-image: url("pattern/strip-5.svg"); }

/* ---- footer columns: dark mudcloth (bogolan-style) ground, cream and orange motifs, white words ---- */
html body footer.site-footer div.footer-top { position: relative; isolation: isolate; padding-inline: clamp(20px, 3vw, 44px); padding-block: 56px; margin-block: 8px 0; border-radius: 22px;
  background: url("pattern/mudcloth.svg") center / 640px auto repeat, linear-gradient(160deg, #3A2112 0%, #24130A 100%);
  box-shadow: 0 30px 60px -30px rgba(40, 18, 4, .7), inset 0 0 0 1px rgba(243, 230, 208, .12); }
html body footer.site-footer div.footer-top :is(.footer-col, .footer-brand) :is(p, a, li, span, address) { color: #FFF6EA !important; }
html body footer.site-footer div.footer-top .footer-col span.fc-label { color: #FFB26B !important; }
html body footer.site-footer div.footer-top a:hover { color: #FFB26B !important; }

/* ---- photo-inside-the-letters: the photo keeps its shape (was stretched to 200% x 100%) ---- */
html body .window-words { background-size: cover !important; background-position: calc(50% + var(--mx, 0) * 12%) calc(55% + var(--my, 0) * 12%) !important; }

/* ---- footer headline in the same style: the landscape shows through the letters, navy outline keeps the shapes crisp ---- */
html body .footer-big { background: url("media/window.jpg") center 60% / cover no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1.6px #2B1206 !important; text-shadow: none !important; filter: drop-shadow(0 6px 14px rgba(120, 45, 0, .35)); }
html body .footer-big span { background: none !important; color: transparent !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 1.6px #2B1206 !important; text-shadow: none !important; }

/* ---- Impact goals: sharp photo stage + woven-edged certificate card overlapping it ---- */
html body section.band#goals { background: linear-gradient(180deg, #2B1206 0%, #2B1206 38%, var(--cw) 38%, var(--cw) 100%) !important; padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 110px) !important; overflow: hidden; }
html body section.band#goals::after { display: none !important; }
html body section.band#goals > .media {
  position: relative !important; inset: auto !important; transform: none !important; z-index: 1;
  width: min(100% - 2 * var(--gutter), 1180px) !important; height: auto !important; aspect-ratio: 16 / 8 !important;
  margin: 0 auto !important; border-radius: 28px !important; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(43, 18, 6, .7) !important; }
html body section.band#goals > .media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: none !important; transform: none !important; }
html body section.band#goals > .wrap {
  position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 1060px); margin: clamp(-150px, -11vw, -70px) auto 0;
  background: var(--cw); border-radius: 26px; padding: clamp(46px, 5vw, 70px) clamp(22px, 4vw, 60px) clamp(40px, 4vw, 60px);
  box-shadow: 0 30px 70px -28px rgba(120, 45, 0, .45), 0 0 0 1px rgba(250, 118, 0, .15); }
html body section.band#goals > .wrap::before, html body section.band#goals > .wrap::after {
  content: ""; position: absolute; left: 26px; right: 26px; height: 16px; border-radius: 4px;
  background: url("pattern/strip-2.svg") repeat-x left center / auto 16px; }
html body section.band#goals > .wrap::before { top: 16px; }
html body section.band#goals > .wrap::after { bottom: 16px; background-image: url("pattern/strip-5.svg"); }
html body section.band#goals :is(h2, p, strong, .goal-label, .goals-note, .goals-note strong) { color: #2B1206 !important; text-shadow: none !important; }
html body section.band#goals .goal .number { color: #FA7600 !important; -webkit-text-fill-color: #FA7600 !important; background: none !important; text-shadow: 0 2px 0 rgba(43, 18, 6, .12) !important; }
html body section.band#goals .goal { position: relative; }
html body section.band#goals .goal + .goal::before { content: ""; position: absolute; left: -2px; top: 18%; bottom: 18%; width: 2px;
  background: repeating-linear-gradient(180deg, #FA7600 0 6px, transparent 6px 12px); opacity: .5; }
@media (max-width: 719px) { html body section.band#goals .goal + .goal::before { display: none; } html body section.band#goals > .media { aspect-ratio: 4 / 3 !important; } }

/* ======== EFFECTS (chosen from the effects lab, 30 Sep 2026). All still for reduced motion. ======== */
/* 1 · wipe reveal: section photos open from the centre as they scroll in */
html.fx .fx-wipe img { clip-path: inset(0 50% 0 50%); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1); }
html.fx .fx-wipe.fx-in img { clip-path: inset(0 0 0 0); }
/* 2 · scroll zoom: big photo bands start close and pull back as you scroll */
html.fx .fx-zoom img { transform: scale(var(--fz, 1.25)) !important; will-change: transform; }
/* 3 · spotlight: Sponsor page top is lamplit; a warm light follows the pointer */
html body .page-hero--spot > .media img { filter: brightness(.34) saturate(.7); }
html body .page-hero--spot > .media .fx-lit { position: absolute; inset: 0; background-size: cover; background-position: inherit; pointer-events: none; z-index: 1;
  filter: brightness(1.1) saturate(1.1);
  -webkit-mask: radial-gradient(circle var(--fr, 300px) at var(--fx-x, 66%) var(--fx-y, 50%), #000 40%, transparent 100%);
          mask: radial-gradient(circle var(--fr, 300px) at var(--fx-x, 66%) var(--fx-y, 50%), #000 40%, transparent 100%); }
/* 5 · tilt + glare on cards */
html.fx .fx-tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important; transition: transform .25s ease; }
html.fx .fx-tilt::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; opacity: var(--gl, 0); transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .38), transparent 45%); mix-blend-mode: soft-light; }
/* 6 · the walking video plays inside the words (Programs) */
.vtext { position: relative; isolation: isolate; overflow: hidden; margin: 0 auto; }
.vtext video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.vtext-words { position: relative; margin: 0; padding: .05em 0 .12em; text-align: center; color: #000; background: var(--cw); mix-blend-mode: screen;
  font: 900 italic clamp(3.2rem, 11vw, 11rem)/.92 "Bodoni Moda", serif; letter-spacing: -.03em; }
html body .popout-cut { clip-path: inset(0 0 72% 0); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 22%, transparent 28%); mask-image: linear-gradient(180deg, #000 0, #000 22%, transparent 28%); filter: drop-shadow(0 -2px 8px rgba(0, 0, 0, .18)); }

/* ======== EFFECTS BATCH 2 ======== */
/* 7 · words light up as you scroll */
html.fx [data-lit] .lw { color: rgba(43, 18, 6, .16); transition: color .3s ease; }
html.fx [data-lit] .lw.on { color: inherit; }
/* 8 · magnetic buttons */
html.fx .btn.fx-mag { transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .3s, color .3s; }
/* 9 · her journey sideways (Mission) */
.journey { padding-top: clamp(56px, 7vw, 100px); }
.journey .hz { position: relative; height: 280vh; }
.journey .hz-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.journey .hz-track { display: flex; gap: clamp(16px, 2vw, 28px); padding-inline: 8vw; will-change: transform; }
.journey figure { margin: 0; flex: 0 0 clamp(240px, 26vw, 400px); aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; position: relative;
  box-shadow: 0 30px 60px -30px rgba(43, 18, 6, .55); }
.journey figure img { width: 100%; height: 100%; object-fit: cover; }
.journey figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; color: #fff;
  font: 900 italic clamp(1.2rem, 1.8vw, 1.7rem)/1.1 "Bodoni Moda", serif; background: linear-gradient(0deg, rgba(43, 18, 6, .82), transparent); }
@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .journey .hz { height: auto; } .journey .hz-pin { position: static; height: auto; padding-block: 28px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .journey .hz-track { transform: none !important; } .journey figure { scroll-snap-align: start; flex-basis: 72vw; } }
/* 10 · stacking cards (Sponsor) */
.stack { margin-top: 36px; }
.stack-card { position: sticky; top: calc(var(--header-h) + 24px + var(--i) * 22px); height: min(62vh, 560px); margin-bottom: 10vh; border-radius: 26px; overflow: hidden;
  box-shadow: 0 -12px 40px -14px rgba(43, 18, 6, .45); transform-origin: top center; }
.stack-card img { width: 100%; height: 100%; object-fit: cover; }
.stack-card h3 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 28px 22px; color: #fff; font: 900 italic clamp(1.8rem, 4vw, 3rem) "Bodoni Moda", serif;
  background: linear-gradient(0deg, rgba(43, 18, 6, .8), transparent); }
/* 11 · Swahili ribbon (Home) */
.sw-ribbon { overflow: hidden; background: linear-gradient(90deg, #FFA048, #FA7600); padding: 16px 0; transform: rotate(-2deg); margin: 30px -2vw; box-shadow: 0 16px 34px -18px rgba(120, 45, 0, .6); }
.sw-row { display: flex; gap: 46px; width: max-content; animation: sw-slide 32s linear infinite; font: 800 clamp(1.8rem, 4.4vw, 3.6rem)/1 Syne, sans-serif; color: #2B1206; }
.sw-row span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px #2B1206; }
.sw-ribbon:hover .sw-row { animation-play-state: paused; }
@keyframes sw-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sw-row { animation: none; } }
/* 12 · goal rings (Impact) */
.goal-ring { position: relative; width: clamp(150px, 15vw, 190px); aspect-ratio: 1; margin: 0 auto 12px; display: grid; place-items: center; }
.goal-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.goal-ring circle { fill: none; stroke-width: 10; }
.goal-ring .bg { stroke: rgba(250, 118, 0, .16); }
.goal-ring .fg { stroke: #FA7600; stroke-linecap: round; stroke-dasharray: 502; stroke-dashoffset: 502; transition: stroke-dashoffset 2s cubic-bezier(.2, .8, .2, 1); }
.goal-ring.on .fg { stroke-dashoffset: calc(502 * (1 - var(--p, .8))); }
html body section.band#goals .goal-ring .number { font-size: clamp(1.8rem, 3vw, 2.8rem) !important; }
.goal-ring { width: clamp(170px, 16vw, 210px); }
html body section.band#goals .goal-ring .number { font-size: clamp(1.5rem, 2.3vw, 2.2rem) !important; max-width: 78%; text-align: center; white-space: nowrap; }
html body section.band#goals .goal-ring .number.word { font-size: clamp(1.05rem, 1.5vw, 1.45rem) !important; }
.sw-ribbon { margin: clamp(48px, 5vw, 70px) -2vw 30px; }

/* ======== FOOTER: the girls walking toward the mountain (replaces the orange footer) ======== */
html body footer.site-footer {
  position: relative; isolation: isolate; overflow: hidden; animation: none !important;
  background: #2B1206 url("media/faith-walk.jpg") center 38% / cover no-repeat !important;
  padding-top: clamp(260px, 30vw, 520px) !important; border: 0; }
html body footer.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(43, 18, 6, .94) 0%, rgba(43, 18, 6, .84) 34%, rgba(43, 18, 6, .35) 60%, rgba(43, 18, 6, 0) 78%); }
html body footer.site-footer > .wrap, html body footer.site-footer .footer-top, html body footer.site-footer .footer-bottom { position: relative; z-index: 1; }
/* headline: plain white serif over the photo */
html body footer.site-footer .footer-big, html body footer.site-footer .footer-big span {
  background: none !important; color: var(--cw) !important; -webkit-text-fill-color: var(--cw) !important; -webkit-text-stroke: 0 !important;
  filter: none !important; text-shadow: 0 3px 18px rgba(43, 18, 6, .6) !important; }
html body footer.site-footer .footer-big span { color: #FFB26B !important; -webkit-text-fill-color: #FFB26B !important; }
/* buttons: orange primary, white outline */
html body footer.site-footer .footer-cta .btn:not(.btn--ghost) { background: linear-gradient(180deg, #FF9A45, #FA7600) !important; color: #2B1206 !important; border-color: transparent !important; }
html body footer.site-footer .footer-cta .btn--ghost { background: rgba(255, 255, 255, .08) !important; color: var(--cw) !important; border: 2px solid rgba(255, 255, 255, .85) !important; }
html body footer.site-footer .footer-cta .btn:is(:hover, :focus-visible) { background: var(--cw) !important; color: #2B1206 !important; border-color: var(--cw) !important; }
/* columns: no panel, white text on the shade */
html body footer.site-footer div.footer-top { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding-inline: 0 !important; margin-top: clamp(28px, 3vw, 48px); border-top: 1px solid rgba(255, 255, 255, .18); }
html body footer.site-footer div.footer-top :is(.footer-col, .footer-brand) :is(p, a, li, span, address) { color: rgba(255, 255, 255, .92) !important; }
html body footer.site-footer div.footer-top .footer-col span.fc-label { color: #FFB26B !important; }
html body footer.site-footer .footer-top h2 { color: #fff !important; }
html body footer.site-footer .footer-brand .brand { display: none !important; }  /* the photo carries the logo */
html body footer.site-footer .footer-bottom, html body footer.site-footer .footer-bottom :is(p, a, span, small) { color: rgba(255, 255, 255, .72) !important; border-color: rgba(255, 255, 255, .15) !important; }
html body footer.site-footer .footer-bottom .todo { background: none !important; color: inherit !important; }
html body footer.site-footer { background-size: 100% auto !important; background-position: center top !important; }
@media (max-width: 899px) {
  html body footer.site-footer { padding-top: calc(56.25vw + 20px) !important; }
  html body footer.site-footer::before { background: linear-gradient(180deg, rgba(43, 18, 6, 0) 0, rgba(43, 18, 6, 0) calc(56.25vw - 60px), #2B1206 56.25vw) !important; }
}
@media (min-width: 900px) {
  html body footer.site-footer::before { background:
    linear-gradient(90deg, rgba(43, 18, 6, .45) 0%, rgba(43, 18, 6, 0) 45%),
    linear-gradient(180deg, rgba(43, 18, 6, 0) 0, rgba(43, 18, 6, 0) calc(56.25vw * .45), rgba(43, 18, 6, .55) calc(56.25vw * .75), #2B1206 calc(56.25vw - 2px)) !important; }
}
/* Swahili words hold still (ribbon and floating words) */
.sw-row { animation: none !important; justify-content: center; width: 100%; flex-wrap: nowrap; }
.sw-ribbon { overflow: hidden; }
html body .bgword, html body .bgword--orange { animation: none !important; translate: none !important; }
/* her journey: no tall empty pin; height is set to exactly what the sideways scroll needs */
.journey { padding-top: clamp(40px, 4vw, 64px); padding-bottom: 0; }
.journey .hz { height: auto; }
.journey .hz.pinned .hz-pin { position: sticky; top: 0; height: 100vh; }
.journey .hz:not(.pinned) .hz-pin { position: static; height: auto; padding-block: 24px 40px; }
.journey .hz:not(.pinned) .hz-track { justify-content: center; flex-wrap: wrap; padding-inline: 4vw; transform: none !important; }
.journey .hz:not(.pinned) .hz-track { flex-wrap: nowrap !important; justify-content: flex-start; }
.journey .hz:not(.pinned) .hz-pin { overflow-x: auto; scroll-snap-type: x mandatory; }
.journey .hz.fits .hz-pin { overflow: visible; }
.journey .hz.fits .hz-track { justify-content: center; }
.journey .hz.pinned figure { flex-basis: min(58vh, 34vw); } .journey .hz.pinned .hz-pin { align-items: center; padding-top: var(--header-h); }
/* ======== FOOTER v3: photo fades into ORANGE; kente band at the seam; navy mudcloth texture on the orange ======== */
html body footer.site-footer { background-color: #FA7600 !important; }
html body footer.site-footer::before { background: linear-gradient(180deg, rgba(250, 118, 0, 0) 0, rgba(250, 118, 0, 0) calc(56.25vw * .55), rgba(250, 118, 0, .75) calc(56.25vw * .85), #FA7600 calc(56.25vw - 2px)) !important; }
/* the orange ground: mudcloth motifs in navy + white, warm glow, deeper orange toward the bottom */
html body footer.site-footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: calc(56.25vw - 2px); z-index: -1; pointer-events: none;
  background:
    url("pattern/strip.svg") left top / auto 40px repeat-x,
    radial-gradient(60% 50% at 80% 20%, rgba(255, 190, 120, .45), transparent 70%),
    url("pattern/mudcloth-orange.svg") center 40px / 560px auto repeat,
    linear-gradient(180deg, #FA7600 0%, #F06A00 55%, #D95800 100%); }
/* headline + buttons: navy on orange */
html body footer.site-footer .footer-big, html body footer.site-footer .footer-big span { text-shadow: 0 3px 18px rgba(43, 18, 6, .55) !important; }
html body footer.site-footer .footer-cta .btn:not(.btn--ghost) { background: #2B1206 !important; color: var(--cw) !important; border: 2px solid #2B1206 !important; }
html body footer.site-footer .footer-cta .btn--ghost { background: rgba(255, 255, 255, .12) !important; color: var(--cw) !important; border: 2px solid var(--cw) !important; }
/* columns: cream card with kente edge so words read cleanly over the pattern */
html body footer.site-footer div.footer-top { margin-top: 64px; padding: 48px clamp(20px, 3vw, 44px) !important; border-radius: 22px !important; border: 0 !important;
  background: linear-gradient(var(--cw), var(--cw)) padding-box, url("pattern/strip.svg") left top / auto 16px repeat-x !important;
  border-top: 16px solid transparent !important; box-shadow: 0 24px 50px -24px rgba(90, 30, 0, .55) !important; }
html body footer.site-footer div.footer-top :is(.footer-col, .footer-brand) :is(p, a, li, span, address) { color: #2B1206 !important; }
html body footer.site-footer div.footer-top .footer-col span.fc-label { color: #C24E00 !important; }
html body footer.site-footer div.footer-top a:hover { color: #C24E00 !important; }
html body footer.site-footer .footer-top h2 { color: #FA7600 !important; }
html body footer.site-footer .footer-bottom, html body footer.site-footer .footer-bottom :is(p, a, span, small) { color: #2B1206 !important; border-color: rgba(43, 18, 6, .25) !important; font-weight: 600; }
@media (min-width: 900px) {
  html body footer.site-footer::before { background:
    linear-gradient(180deg, rgba(250, 118, 0, 0) 0, rgba(250, 118, 0, 0) calc(56.25vw * .5), rgba(250, 118, 0, .6) calc(56.25vw * .8), #FA7600 calc(56.25vw - 2px)) !important; }
}
/* footer v3 contrast: second line navy, ghost button solid white */
html body footer.site-footer .footer-big span { color: #2B1206 !important; -webkit-text-fill-color: #2B1206 !important; text-shadow: 0 0 22px rgba(255, 246, 234, .7), 0 2px 0 rgba(255, 255, 255, .5) !important; }
html body footer.site-footer .footer-cta .btn--ghost { background: var(--cw) !important; color: #2B1206 !important; border-color: var(--cw) !important; }
@media (max-width: 899px) { html body footer.site-footer { padding-top: calc(56.25vw + 64px) !important; } }
/* ======== FOOTER v4: layered orange shades (light to deep), Ndebele teeth, kente-topped tiles ======== */
html body footer.site-footer::after {
  background:
    url("pattern/strip.svg") left 0 / auto 40px repeat-x,
    url("pattern/teeth.svg") left 40px / 72px 26px repeat-x,
    url("pattern/teeth.svg") left 34% / 72px 26px repeat-x,
    url("pattern/diamonds.svg") left 68% / auto 22px repeat-x,
    url("pattern/mudcloth-orange.svg") center 40px / 560px auto repeat,
    radial-gradient(55% 40% at 85% 12%, rgba(255, 214, 170, .55), transparent 70%),
    linear-gradient(180deg, #FFB066 0, #FFB066 66px, #FF9549 66px, #FF9549 34%, #FA7600 34%, #FA7600 68%, #E86400 68%, #E86400 86%, #C24E00 86%) !important; }
/* columns: four tiles, each its own orange shade, each capped with a different kente strip */
html body footer.site-footer div.footer-top { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; gap: 22px !important; margin-top: 72px; }
html body footer.site-footer div.footer-top > :is(.footer-brand, .footer-col) { position: relative; overflow: hidden; border-radius: 18px; padding: 50px 26px 30px;
  box-shadow: 0 22px 40px -22px rgba(80, 25, 0, .7), inset 0 0 0 2px rgba(43, 18, 6, .12); }
html body footer.site-footer div.footer-top > :is(.footer-brand, .footer-col)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: url("pattern/strip-1.svg") left center / auto 26px repeat-x; }
html body footer.site-footer div.footer-top > .footer-brand { background: #FFE2CC url("pattern/mudcloth-orange.svg") center / 420px auto; }
html body footer.site-footer div.footer-top > .footer-col:nth-child(2) { background: #FFC48C; }
html body footer.site-footer div.footer-top > .footer-col:nth-child(2)::before { background-image: url("pattern/strip-2.svg"); }
html body footer.site-footer div.footer-top > .footer-col:nth-child(3) { background: #FFA657; }
html body footer.site-footer div.footer-top > .footer-col:nth-child(3)::before { background-image: url("pattern/strip-4.svg"); }
html body footer.site-footer div.footer-top > .footer-col:nth-child(4) { background: #FF8A2A; }
html body footer.site-footer div.footer-top > .footer-col:nth-child(4)::before { background-image: url("pattern/strip-6.svg"); }
html body footer.site-footer div.footer-top :is(.footer-col, .footer-brand) :is(p, a, li, span, address) { color: #2B1206 !important; }
html body footer.site-footer div.footer-top .footer-col span.fc-label { color: #8A3400 !important; }
html body footer.site-footer .footer-top h2 { color: #2B1206 !important; }
html body footer.site-footer div.footer-top a:hover { color: #fff !important; }
/* legal line sits on the deepest orange */
html body footer.site-footer .footer-bottom { margin-top: 56px; }
html body footer.site-footer .footer-bottom, html body footer.site-footer .footer-bottom :is(p, a, span, small) { color: #FFF3E6 !important; border-color: rgba(255, 243, 230, .3) !important; }
/* legal line fully on the deepest band: pin the dark band to the bottom 110px */
html body footer.site-footer::after { background-size: auto 40px, 72px 26px, 72px 26px, auto 22px, 560px auto, auto, auto !important; }
html body footer.site-footer .footer-bottom { position: relative; }
html body footer.site-footer .footer-bottom::before { content: ""; position: absolute; left: -50vw; right: -50vw; top: -14px; bottom: -200px; z-index: -1; background: url("pattern/diamonds.svg") left top / auto 22px repeat-x, #B04600; }
html body footer.site-footer .footer-bottom { border-top: 0 !important; padding-top: 34px; }
/* footer text: smaller, regular weight; only the three column headings stay bold */
html body footer.site-footer div.footer-top :is(.footer-col, .footer-brand) :is(p, a, li, span, address),
html body footer.site-footer .footer-bottom, html body footer.site-footer .footer-bottom :is(p, a, span, small) { font-weight: 400 !important; }
html body footer.site-footer div.footer-top :is(.footer-col, .footer-brand) :is(p, a, li, span, address) { font-size: .92rem !important; line-height: 1.55 !important; }
html body footer.site-footer .footer-col ul { gap: 6px !important; }
html body footer.site-footer .footer-bottom, html body footer.site-footer .footer-bottom :is(p, a, span, small) { font-size: .8rem !important; }
/* shades run dark to light so the contact tile is palest and its orange labels read */
html body footer.site-footer div.footer-top > .footer-brand { background: #FF8A2A url("pattern/mudcloth-orange.svg") center / 420px auto; }
html body footer.site-footer div.footer-top > .footer-col:nth-child(2) { background: #FFA657; }
html body footer.site-footer div.footer-top > .footer-col:nth-child(3) { background: #FFC48C; }
html body footer.site-footer div.footer-top > .footer-col:nth-child(4) { background: #FFE9D6; }
html body footer.site-footer div.footer-top .footer-col span.fc-label { color: #E35F00 !important; font-weight: 400 !important; font-size: .78rem !important; letter-spacing: .12em; text-transform: uppercase; }
html body footer.site-footer div.footer-top a:hover { color: #C24E00 !important; }
/* ripple: a still photo now (the walking film moved to the home hero) */
html body .ripple-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none !important; }
/* walking film: zoom toward the girls so the logo baked into the clip's top-left corner stays out of frame */
html body .hero-slide--walk video { transform: scale(1.2) !important; transform-origin: 62% 100% !important; }

/* ---- faith band, tablets and laptops: the long text rode up over the girl's face and mouth below ~1400px wide,
   so the photo sits above the text as a framed card (as on phones) until the band is wide enough to carry both ---- */
@media (min-width: 720px) and (max-width: 1399px) {
  html body .faith { height: auto; display: block; padding: clamp(32px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); }
  html body .faith::after { display: none !important; }
  html body .faith > .media {
    position: relative !important; inset: auto !important; width: min(100% - 2 * var(--gutter), 960px) !important; height: auto !important;
    aspect-ratio: 16 / 9; margin: 0 auto clamp(32px, 4vw, 56px) !important; border-radius: 22px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 30px 60px -24px rgba(0, 0, 0, .6); }
  html body .faith > .wrap { padding-block: 0; }
  html body .faith > .wrap > * { max-width: 720px; margin-inline: auto; }
  html body .faith .faith-verse, html body .faith .faith-ref { text-align: center; }
  html body .faith .faith-verse { font-size: clamp(1.5rem, 3vw, 2.4rem) !important; }
  html body .faith .faith-copy { margin-top: 28px; font-size: 1.05rem; }
}

/* ---- page-hero photos, tablets and laptops: the headline sits on the left, so each photo is zoomed a little and anchored
   to the left, which moves the girls to the right, clear of the text. The scale property stacks with the slow drift. ---- */
@media (min-width: 720px) and (max-width: 1399px) {
  html body .ph-reel .ph-slide > img { scale: 1.28; transform-origin: 0% 40%; }
}
@media (min-width: 720px) and (max-width: 1399px) {
  html body .page-hero h1.v3-title:not(#v):not(#w):not(#x):not(#y):not(#z):not(#a):not(#b) { font-size: clamp(34px, 4.6vw, 66px) !important; }
}

/* ---- page-hero tuning: Programs slide 1 (the boys move right, clear of the text); About slide 1 (zoomed out a little, and "together." drops to its own row) ---- */
@media (min-width: 720px) and (max-width: 1399px) {
  html body .ph-reel .ph-slide:has(> img[src*="u-programs-top"]) { background: #2B1206; }
  html body .ph-reel .ph-slide > img[src*="u-programs-top"] { translate: 24% 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
  html body .ph-reel .ph-slide > img[src*="top-about"] { scale: 1.08; transform-origin: 0% 40%; }
}
@media (min-width: 720px) {
  html body .page-hero:has(img[src*="top-about"]) h1 .accent { display: block; }
}

/* ---- more hero slides whose text sat on faces below ~1400px: Home (mural) and Contact slide 1 ---- */
@media (min-width: 720px) and (max-width: 1399px) {
  html body .hero-slide > img[src*="hero-7"], html body .ph-reel .ph-slide > img[src*="top-contact"] { scale: 1.25; transform-origin: 0% 40%; }
}