/* =====================================================================
   KANGA & SUNRISE  (30 Sep 2026)
   Orange and white carry the site. Dark brown ink (#2B1206) replaces navy.
   Signature: the sun rising in the home hero, and the footer as a kanga
   cloth (dotted border, sunburst medallion, printed Swahili saying).
   African patterns live at section seams and full-height edges, never on photos.
   Loaded after arise.css so these rules settle earlier layers.
   ===================================================================== */
:root {
  --k-white: #FFFFFF; --k-paper: #FFFFFF; --k-orange: #FA7600; --k-sun: #FFA43A;
  --k-burnt: #B84300; --k-deep: #7A2E00; --k-ink: #2B1206;
}

/* ---------- type: Bodoni (display), Fraunces (headings), Manrope (everything else) ---------- */
html body { color: var(--k-ink); }
html body :is(h3, .d3, .d4, .bio-dialog h2, #president-h, .director-text h3, .director-text .d3) {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 900; letter-spacing: -.005em; }
html body :is(.faith-verse, .pull blockquote, blockquote, .verse, .lead) { font-family: "Manrope", system-ui, sans-serif; font-style: normal; font-weight: 400; }
html body .lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; }
html body :is(.kicker, .director-role, .ccard h3, .role, .kicker.kicker--pill) { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-style: normal; }
html body .btn { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: .02em; text-transform: none; }
html body .sw-row { font-family: "Fraunces", Georgia, serif; font-weight: 900; }

/* ---------- African patterns: seams, edges, and the patterned corner on photos ---------- */
html body .tile .tile-body::before { display: none !important; }
html body .tile .tile-body :is(h3, p, .tile-more) { text-shadow: 0 1px 2px rgba(43, 18, 6, .55), 0 2px 14px rgba(43, 18, 6, .4); }
/* the kente seams and zigzags stay; give them a little breathing room */
html body :is(.afro-strip, .afro-zigzag) { position: relative; z-index: 2; }
/* sparkles never land on faces */
html body :is(.media, .tile) .sparkle { display: none !important; }

/* ---------- header ---------- */
html body .site-header { border-bottom: 3px solid var(--k-orange); }
html body .header-cta .btn { background: var(--k-orange) !important; color: var(--cw) !important; border-color: var(--k-orange) !important; }
@media (max-width: 599px) {
  html body { --header-h: 64px; }
  html body .header-bar { gap: 10px; }
  html body .header-cta { gap: 8px; flex: 0 0 auto; }
  html body .header-cta .btn { height: 40px !important; min-height: 0 !important; padding: 0 16px !important; font-size: .875rem !important; letter-spacing: .02em !important; }
  html body .menu-button { width: 42px !important; height: 42px !important; flex: 0 0 42px; }
  html body .brand .brand-mark { width: 26px; height: 26px; }
}

/* ---------- home hero: the sun rises behind the words ---------- */
html body .hero .hero-scrim { background: linear-gradient(0deg, rgba(43, 18, 6, .28) 0%, transparent 45%) !important; }
html body .hero .hero-sun {
  position: absolute; z-index: 2; pointer-events: none; border-radius: 50%;
  width: min(1080px, 78vw); aspect-ratio: 1; left: max(-360px, -26vw); bottom: calc(min(1080px, 78vw) * -.56);
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(255, 255, 255, .16) 58px 60px),
    radial-gradient(circle at 50% 50%, #FFB14D 0%, #FA7600 46%, #E86200 70%);
  box-shadow: 0 0 0 14px rgba(250, 118, 0, .28), 0 0 0 30px rgba(250, 118, 0, .14), 0 0 120px 40px rgba(255, 150, 40, .35);
  animation: k-sunrise 1.8s cubic-bezier(.2, .7, .2, 1) both .15s; }
@keyframes k-sunrise { from { translate: 0 38%; opacity: .2; } to { translate: 0 0; opacity: 1; } }
html body .hero .hero-inner { z-index: 3; }
html body .hero .hero-sw { color: #fff; font: 800 .75rem/1 "Manrope", sans-serif; letter-spacing: .3em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin: 0; }
html body .hero .hero-sw::before { content: ""; width: 36px; height: 2px; background: var(--cw); }
html body .hero .d-hero { color: #fff !important; text-shadow: 0 2px 20px rgba(122, 46, 0, .25); }
html body .hero .lead { color: #fff; max-width: 34ch; }
html body .hero .hero-actions .btn:not(.btn--ghost) { background: var(--cw) !important; background-image: none !important; color: var(--k-burnt) !important; -webkit-text-fill-color: var(--k-burnt) !important; border-color: var(--cw) !important; }
html body .hero .hero-actions .btn--ghost { -webkit-text-fill-color: #fff !important; }
html body .hero .hero-actions .btn--ghost { background: transparent !important; color: var(--cw) !important; border: 2px solid var(--cw) !important; }
html body .hero .hand-note { display: none; }
@media (min-width: 900px) {
  html body .hero .hero-inner { align-content: end; min-height: 100%; padding-bottom: 88px; gap: 22px; }
  html body .hero .d-hero { font-size: clamp(3.6rem, 5.4vw, 5.2rem) !important; max-width: none; line-height: .95 !important; }
  html body .hero .lead { max-width: 46ch; }
}
@media (max-width: 899px) {
  html body .hero .hero-sun { width: 190vw; left: -45vw; bottom: -96vw; }
  html body .hero .hero-inner { padding-bottom: 76px; gap: 16px; align-content: end; min-height: 100%; }
  html body .hero .d-hero { font-size: clamp(2.5rem, 11.4vw, 3.2rem) !important; line-height: .98 !important; }
  html body .hero .lead { font-size: 1rem; }
  html body .hero .lead .lead-more { display: none; }
  html body .hero .hero-actions { display: flex; flex-wrap: nowrap; gap: 10px; }
  html body .hero .hero-actions .btn { padding: 0 18px !important; height: 48px !important; font-size: .875rem !important; letter-spacing: .02em !important; }
  html body .hero .scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) { html body .hero .hero-sun { animation: none; } }

/* ---------- Swahili ribbon: straight, fits the screen ---------- */
html body .sw-ribbon { transform: none !important; margin-inline: 0 !important; background: var(--k-orange); }
html body .sw-row span:nth-child(even) { color: var(--k-deep); }
html body .sw-row span:nth-child(odd) { color: #fff; }
@media (max-width: 599px) { html body .sw-row { font-size: 1.25rem !important; gap: 22px !important; } html body .sw-row span:nth-child(n+4) { display: none; } }

/* ---------- phones: short edge strips go, the full-height ones stay on wider screens ---------- */
@media (max-width: 767px) { html body .afro-v { display: none !important; } html body section:has(> .afro-v) > .wrap { padding-inline: var(--gutter) !important; } }

/* =====================================================================
   FOOTER: a kanga cloth
   ===================================================================== */
.kfoot { background: var(--cw); color: var(--k-ink); font-family: "Manrope", system-ui, sans-serif; }
.kfoot a { color: inherit; text-decoration: none; }
.kfoot a:hover { color: var(--k-burnt); text-decoration: underline; text-underline-offset: 3px; }
.kanga { --pw: 34px; --dot: 22px; position: relative; overflow: hidden; isolation: isolate; background: var(--k-orange); color: var(--cw);
  padding: clamp(96px, 9vw, 120px) clamp(60px, 8vw, 120px) clamp(80px, 7vw, 96px); text-align: center; }
.kanga-pindo { position: absolute; inset: 0; pointer-events: none; z-index: 1; border: var(--pw) solid transparent;
  background:
    radial-gradient(circle, #fff 0 4px, transparent 5px) 0 0 / var(--dot) var(--dot) border-box,
    linear-gradient(var(--k-burnt), var(--k-burnt)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) padding-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) padding-box; mask-composite: exclude; }
.kanga-edge { position: absolute; inset: calc(var(--pw) + 8px); border: 2px solid rgba(255, 255, 255, .85); pointer-events: none; z-index: 1; }
.kanga-edge::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255, 255, 255, .45); }
/* the kente band along the cloth's inner top edge */
.kanga-edge::after { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 22px; border-radius: 3px;
  background: url("pattern/strip.svg") left center / auto 22px repeat-x; opacity: .95; }
.kanga-mji { position: absolute; left: 50%; top: 54%; width: min(980px, 150vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle, transparent 0 17%, rgba(255, 255, 255, .22) 17% 18%, transparent 18%),
    repeating-conic-gradient(rgba(255, 255, 255, .07) 0 6deg, transparent 6deg 15deg),
    radial-gradient(circle, #FFA43A 0 34%, transparent 34.5%),
    repeating-radial-gradient(circle, transparent 0 30px, rgba(255, 255, 255, .14) 30px 32px); }
.kanga-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.kanga-eyebrow { font: 800 .75rem/1 "Manrope", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #FFE3C4; margin: 0; }
.kanga-title { font: italic 900 clamp(3.6rem, 7.8vw, 7rem)/.9 "Bodoni Moda", Georgia, serif; letter-spacing: -.025em; color: #fff; margin: 18px 0 18px; }
.kanga-lede { font: 600 clamp(1rem, 1.3vw, 1.125rem)/1.5 "Manrope", sans-serif; max-width: 40ch; margin: 0 auto 28px; color: #fff; }
.kanga-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.kbtn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 15px 26px; font: 800 .9375rem/1 "Manrope", sans-serif; border: 2px solid transparent; white-space: nowrap; transition: transform .2s, background-color .2s, color .2s; }
.kanga .kbtn:hover { text-decoration: none; transform: translateY(-2px); }
.kbtn--white { background: var(--cw); color: var(--k-burnt) !important; }
.kbtn--white:hover { background: var(--k-paper); }
.kbtn--line { border-color: #fff; color: #fff !important; }
.kbtn--line:hover { background: var(--cw); color: var(--k-burnt) !important; }
.kbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kanga-jina { display: inline-block; margin: 40px 0 0; background: var(--cw); color: var(--k-burnt); border-radius: 6px; padding: 12px 26px 11px; font: 800 .9375rem/1.2 "Manrope", sans-serif; letter-spacing: .24em; }
.kanga-jina-en { margin: 10px 0 0; font: italic 400 .875rem "Manrope", sans-serif; color: #FFE3C4; }

.kfoot-links { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 48px; padding: 64px clamp(20px, 5.5vw, 80px) 56px; }
.kfoot-links h2 { font: italic 900 1.375rem "Fraunces", Georgia, serif; color: var(--k-orange); margin: 0 0 14px; letter-spacing: 0; }
.kfoot-links ul { list-style: none; margin: 0; padding: 0; }
.kfoot-links li { font: 400 .9375rem/2 "Manrope", sans-serif; }
.kfoot-links p { margin: 0; font: 400 .9375rem/1.55 "Manrope", sans-serif; }
.kfoot-brand p { max-width: 34ch; margin-top: 14px; }
.kfoot-logo { display: inline-flex; align-items: baseline; gap: 2px; line-height: 1; }
.kfoot-logo .g { font: 400 1.5rem "Pacifico", cursive; color: var(--k-orange); }
.kfoot-logo .a { font: 900 1.6rem "Fraunces", Georgia, serif; color: var(--k-ink); }
.kfoot-logo:hover { text-decoration: none !important; }
.kfoot-contact .lbl { font: 800 .6875rem/1 "Manrope", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--k-orange); margin: 14px 0 5px; }
.kfoot-contact h2 + .lbl { margin-top: 0; }
.kfoot-legal { background: var(--k-orange); color: var(--cw); display: flex; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap; padding: 18px clamp(20px, 5.5vw, 80px) 20px; font: 400 .8125rem/1.6 "Manrope", sans-serif; }
.kfoot-legal p { margin: 0; }
.kfoot-legal .sep { opacity: .6; margin: 0 8px; }
.kfoot-legal .nw { white-space: nowrap; }
.kfoot-legal a:hover { color: #fff; }
.kfoot a:focus-visible { outline: 2px solid var(--k-orange); outline-offset: 3px; border-radius: 3px; }

@media (max-width: 1023px) { .kfoot-links { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) {
  .kanga { --pw: 16px; --dot: 14px; padding: 76px 34px 54px; }
  .kanga-edge::after { height: 14px; background-size: auto 14px; left: 10px; right: 10px; top: 10px; }
  .kanga-title { font-size: 3.6rem; }
  .kanga-btns { flex-direction: column; align-items: center; }
  .kbtn { padding: 13px 22px; font-size: .875rem; }
  .kanga-jina { font-size: .75rem; letter-spacing: .18em; padding: 10px 14px 9px; margin-top: 30px; }
  .kfoot-links { gap: 30px 18px; padding: 40px 22px 36px; }
  .kfoot-links .kfoot-brand, .kfoot-links .kfoot-contact { grid-column: 1 / -1; }
  .kfoot-legal { flex-direction: column; padding: 16px 22px 20px; }
}

/* sparkles stay off the photographs */
html body .tile .sparkles { display: none !important; }
/* phones held sideways: the desktop-sized sun, so the film stays visible */
@media (max-width: 899px) and (orientation: landscape) {
  html body .hero .hero-sun { width: 64vw; left: -18vw; bottom: calc(64vw * -.5); }
  html body .hero .d-hero { font-size: clamp(2rem, 5.6vw, 2.8rem) !important; }
  html body .hero .lead { display: none; }
}

/* ---------- brighter heroes (30 Sep 2026): lighter shade, photos lifted ---------- */
/* inner pages: a soft brown wash on the text side only, instead of a heavy dark pool */
html body .page-hero:not(.page-hero--plain)::after { background: linear-gradient(90deg, rgba(43, 18, 6, .26) 0%, rgba(43, 18, 6, .1) 45%, rgba(43, 18, 6, 0) 68%), linear-gradient(0deg, rgba(43, 18, 6, .16), transparent 40%) !important; }
html body .page-hero:not(.page-hero--plain):not(.page-hero--spot) > .media img { filter: brightness(1.16) contrast(1.02); }
/* Sponsor lamplit hero: dim, not dark */
html body .page-hero--spot > .media img { filter: brightness(1.12) saturate(.95) !important; }
/* home: film and slides lifted a touch */
html body .hero-slide img, html body .hero-slide video { filter: brightness(1.14) !important; }

/* ---------- hero sun as warm air (30 Sep 2026): smaller, soft haze, no solid disc or rings ---------- */
html body .hero .hero-sun {
  width: min(620px, 44vw) !important; left: max(-80px, -5vw) !important; bottom: calc(min(620px, 44vw) * -.12) !important;
  background: radial-gradient(circle at 50% 50%, rgba(255, 236, 196, .9) 0%, rgba(255, 180, 80, .72) 22%, rgba(250, 118, 0, .38) 46%, rgba(250, 118, 0, 0) 70%) !important;
  box-shadow: none !important; filter: blur(22px); mix-blend-mode: normal; z-index: 3 !important;
  animation: k-sunrise 1.8s cubic-bezier(.2, .7, .2, 1) both .15s, k-air 9s ease-in-out 2s infinite alternate !important; }
html body .hero .hero-inner { z-index: 4 !important; }
@keyframes k-air { from { scale: 1; opacity: .85; } to { scale: 1.12; opacity: 1; } }
/* the words keep their contrast now the disc no longer sits behind them */
html body .hero .hero-scrim { background: linear-gradient(90deg, rgba(43, 18, 6, .38) 0%, rgba(43, 18, 6, .14) 45%, transparent 65%), linear-gradient(0deg, rgba(43, 18, 6, .3) 0%, transparent 45%) !important; }
@media (max-width: 899px) {
  html body .hero .hero-sun { width: 110vw !important; left: -30vw !important; bottom: -40vw !important; }
  html body .hero .hero-scrim { background: linear-gradient(0deg, rgba(43, 18, 6, .45) 0%, rgba(43, 18, 6, .18) 45%, transparent 70%) !important; }
}
@media (prefers-reduced-motion: reduce) { html body .hero .hero-sun { animation: none !important; } }

/* ---------- photos wear the African-pattern corner again (30 Sep 2026) ---------- */
html body :is(.media.is-loaded, .tile .media)::before {
  display: block !important; 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)); }
/* "Start here": beige ground with a faint beige mudcloth print */
html body section[aria-labelledby="start-h"] { background: url("pattern/mudcloth-light.svg") center top / 480px auto repeat, #F6ECDF !important; }
/* ripple ("One girl … One generation"): a faint mudcloth print drifts slowly across the text side */
html body .ripple-print { position: absolute; inset: 0 auto 0 0; width: 55%; z-index: 2; pointer-events: none; opacity: .55;
  background: url("pattern/mudcloth.svg") 0 0 / 520px auto repeat;
  -webkit-mask: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 55%, transparent 100%); mask: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 55%, transparent 100%);
  animation: k-print 60s linear infinite; }
@keyframes k-print { to { background-position: 520px -312px; } }
html body .ripple > .wrap { position: relative; z-index: 3 !important; }
@media (max-width: 899px) { html body .ripple-print { width: 100%; opacity: .4; } }
@media (prefers-reduced-motion: reduce) { html body .ripple-print { animation: none; } }
html body section[aria-labelledby="start-h"] { padding-bottom: clamp(40px, 5vw, 64px) !important; }

/* ---------- shine: silver sparkles rise off every big headline (heroes, manifesto, footer) ---------- */
html body :is(.d-hero, .manifesto-lines, .footer-big) { position: relative; }
html body :is(.d-hero, .manifesto-lines, .footer-big) > .sparkles { display: block !important; }

/* ---------- bevelled, shiny display type (30 Sep 2026) ----------
   Each big line is filled with a chrome-style gradient (bright top, a crisp "horizon" at mid-height, warm bottom),
   a light rim on top and a short extruded edge below, and a slow light sweep. Three finishes: cream, orange, brown. */
:root {
  --sh-sweep: linear-gradient(110deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, 0) 58%);
  --sh-cream: linear-gradient(180deg, #FFFFFF 0%, #FFF6EC 44%, #F4C99A 51%, #FFE3C2 78%, #FFF3E4 100%);
  --sh-orange: linear-gradient(180deg, #FFE6BF 0%, #FFB054 40%, #F06A00 52%, #FF8A1C 80%, #FFB25C 100%);
  --sh-brown: linear-gradient(180deg, #9A5A2E 0%, #5A2A10 44%, #2B1206 52%, #4A220C 78%, #7A4020 100%);
}
html body :is(
  .hero .d-hero .w > span,
  .page-hero .d-hero .w > span,
  .ripple .ripple-line,
  .manifesto-lines span,
  .kanga-title, .page-hero--plain h1.d1,
  .footer-big, .footer-big span):not(#_) {
  background-image: var(--sh-sweep), var(--sh-cream) !important;
  background-size: 260% 100%, 100% 100% !important; background-repeat: no-repeat !important;
  background-position: 130% 0, 0 0;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important;
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .55)) drop-shadow(0 2px 0 rgba(150, 60, 0, .55)) drop-shadow(0 1px 0 rgba(90, 30, 0, .45));
  animation: k-shine 6.5s ease-in-out 1.4s infinite !important; }
/* orange accent words: "nations rise.", "One generation" */
html body :is(.hero .d-hero .w:nth-child(n+4) > span, .page-hero .d-hero .w:nth-child(n+4) > span, .ripple .ripple-line:last-child, .ripple .ripple-line:has(.hl)):not(#_) {
  background-image: var(--sh-sweep), var(--sh-orange) !important; }
/* the "One generation" span lets its line's fill show through, so it gets no fill of its own */
html body .ripple .ripple-line .hl:not(#_):not(#__) { background: none !important; -webkit-text-fill-color: transparent !important; filter: none; animation: none !important; }
/* brown finish on light grounds: plain and card page tops */
html body :is(.page-hero--plain .d-hero .w > span, .page-hero--cards .d-hero .w > span, .page-hero--plain h1.d1):not(#_) {
  background-image: var(--sh-sweep), var(--sh-brown) !important;
  filter: drop-shadow(0 -1px 0 rgba(255, 240, 220, .7)) drop-shadow(0 2px 0 rgba(0, 0, 0, .28)) drop-shadow(0 1px 0 rgba(0, 0, 0, .2)); }
/* the three manifesto lines sweep one after another */
html body .manifesto-lines span:not(#_) { animation-delay: calc(1.4s + var(--i, 0) * .45s) !important; }
/* "Every girl created / valued / educated": white-silver chrome with a deep brown raised edge; each line a step larger */
html body .manifesto-lines > span:not(.sparkles):not(#_):not(#__) {
  font-size: calc(.84em * (1 + var(--i, 0) * .17));
  background-image: var(--sh-sweep), linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 40%, #C9CED6 50%, #E9ECF0 72%, #FFFFFF 100%) !important;
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .8)) drop-shadow(0 1px 0 #8A3A0A) drop-shadow(0 2px 0 #6E2C06) drop-shadow(0 3px 0 #4A1C04) drop-shadow(0 8px 12px rgba(74, 28, 4, .35)); }
html body .manifesto-lines > .sparkles:not(#_):not(#__) { background: none !important; filter: none; animation: none !important; }
@keyframes k-shine { 0%, 50% { background-position: 130% 0, 0 0; } 80%, 100% { background-position: -30% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  html body :is(.hero .d-hero .w > span, .page-hero .d-hero .w > span, .ripple .ripple-line, .manifesto-lines span, .kanga-title, .footer-big, .footer-big span):not(#_) { animation: none !important; }
}

/* =====================================================================
   FOOTER (30 Sep 2026): the approved artwork, with our logo and live links laid over it
   ===================================================================== */
html body .gfoot { position: relative; background: #E2470F; color: var(--cw); font-family: "Manrope", system-ui, sans-serif; }
html body .gf-art { position: relative; container-type: inline-size; line-height: 0; }
html body .gf-img { display: block; width: 100%; height: auto; }
html body .gf-art > :is(a, form, nav a) { position: absolute; }
html body .gf-nav { position: static; }
html body .gf-nav a { position: absolute; }
/* invisible hit areas over the drawn links and buttons; a soft glow shows on hover and keyboard focus */
html body .gf-hot { display: block; color: transparent; font-size: 0; border-radius: 6px; transition: background-color .2s, box-shadow .2s; }
html body .gf-hot--btn { border-radius: 14px; }
html body .gf-hot--round { border-radius: 10px; }
html body .gf-hot:hover { background: rgba(255, 255, 255, .14); }
html body .gf-hot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* our logo, where the drawn one was */
html body .gf-logo { display: flex; align-items: center; gap: 1.1cqw; text-decoration: none; color: #fff; line-height: 1; }
html body .gf-logo .brand-mark { width: 4.2cqw; height: 4.2cqw; flex: 0 0 auto; --bk-cover: #7A2E00; --bk-page: #FFFFFF; --bk-line: #FA7600; filter: drop-shadow(0 .15cqw .3cqw rgba(90, 30, 0, .35)); }
html body .gf-logo .brand-name { display: flex; flex-direction: column; gap: .35cqw; }
html body .gf-logo .b1 { font: normal 900 3cqw/1 "Fraunces", Georgia, serif; letter-spacing: -.01em; color: #fff; }
html body .gf-logo .b1-script { font-family: "Pacifico", cursive; font-weight: 400; color: #FFE3C4; margin-right: .2cqw; }
html body .gf-logo .b2 { font: 700 .85cqw/1 "Manrope", sans-serif; letter-spacing: .42em; color: #fff; }
/* the email field sits exactly on the drawn white box; it turns solid white once you type so the drawn hint disappears */
html body .gf-form { display: flex; line-height: 1; }
html body .gf-form input { flex: 0 0 66.5%; height: 100%; border: 0; border-radius: .6cqw 0 0 .6cqw; padding: 0 1.2cqw; font: 500 1.02cqw "Manrope", sans-serif; color: #2B1206; background: transparent; }
html body .gf-form input:is(:focus, :not(:placeholder-shown)) { background: var(--cw); outline: none; }
html body .gf-form input:focus-visible { box-shadow: inset 0 0 0 2px #FA7600; }
html body .gf-form button { flex: 1; height: 100%; border: 0; background: transparent; color: transparent; font-size: 0; cursor: pointer; border-radius: 0 .6cqw .6cqw 0; }
html body .gf-form button:hover { background: rgba(255, 255, 255, .12); }
html body .gf-form button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
html body .gf-form .field-error, html body .gf-form .form-status { position: absolute; left: 0; top: calc(100% + .5cqw); margin: 0; font: 600 .85cqw/1.3 "Manrope", sans-serif; color: #fff; }
html body .gf-form .form-status:empty, html body .gf-form .field-error:empty { display: none; }
/* while a form is busy or reports back, its drawn "Subscribe" label stays */

/* ---------- phones: the same footer as live text ---------- */
html body .gf-phone { display: none; }
@media (max-width: 759px) {
  html body .gf-art { display: none; }
  html body .gf-phone { display: block; }
  html body .gf-phone-photo { aspect-ratio: 21 / 10; background: url("media/footer.jpg") 100% 0 / 280% auto no-repeat; }
  html body .gf-phone-top { padding: 28px 20px 34px; background: linear-gradient(180deg, var(--cw), #FFE3BD); color: #2B1206; }
  html body .gf-eyebrow { margin: 0 0 10px; font: 800 .75rem/1 "Manrope", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #D9431A; }
  html body .gf-h { margin: 0 0 12px; font: 600 1.9rem/1.08 "Fraunces", Georgia, serif; color: #2B1206; }
  html body .gf-h em { font-style: normal; color: #D9431A; }
  html body .gf-p { margin: 0 0 20px; font-size: 1rem; line-height: 1.55; }
  html body .gf-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 12px; background: #E2470F; color: var(--cw); font-weight: 700; text-decoration: none; }
  html body .gf-phone-bot { padding: 30px 20px 26px; background: url("pattern/mudcloth.svg") center / 520px auto repeat, linear-gradient(170deg, #F58A1F 0%, #F2600F 45%, #D8390C 100%); }
  html body .gf-plogo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; line-height: 1; }
  html body .gf-plogo .brand-mark { width: 40px; height: 40px; --bk-cover: #7A2E00; --bk-page: #FFFFFF; --bk-line: #FA7600; }
  html body .gf-plogo .brand-name { display: flex; flex-direction: column; gap: 4px; }
  html body .gf-plogo .b1 { font: normal 900 1.6rem/1 "Fraunces", Georgia, serif; letter-spacing: -.01em; }
  html body .gf-plogo .b1-script { font-family: "Pacifico", cursive; font-weight: 400; color: #FFE3C4; margin-right: 2px; }
  html body .gf-plogo .b2 { font: 700 .6rem/1 "Manrope", sans-serif; letter-spacing: .42em; }
  html body .gf-tag { margin: 12px 0 22px; font-size: 1.15rem; }
  html body .gf-plinks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  html body .gf-plinks a, html body .gf-legal a, html body .gf-social a { color: #fff; text-decoration: none; display: inline-block; padding: 8px 0; }
  html body .gf-join { margin: 0; font-size: 1.2rem; font-weight: 700; }
  html body .gf-joinp { margin: 4px 0 12px; font-size: .95rem; }
  html body .gf-pform { display: flex; flex-wrap: wrap; margin: 0 0 18px; }
  html body .gf-pform input { flex: 1 1 60%; min-width: 0; height: 50px; border: 0; border-radius: 10px 0 0 10px; padding: 0 14px; font: 500 1rem "Manrope", sans-serif; color: #2B1206; }
  html body .gf-pform button { height: 50px; padding: 0 18px; border: 0; border-radius: 0 10px 10px 0; background: #2B1206; color: var(--cw); font: 700 1rem "Manrope", sans-serif; }
  html body .gf-pform .field-error, html body .gf-pform .form-status { flex-basis: 100%; margin: 8px 0 0; font-size: .9rem; }
  html body .gf-social { display: flex; gap: 22px; margin: 0 0 14px; }
  html body .gf-legal { margin: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .4); font-size: .85rem; line-height: 1.6; }
}

/* ---------- white and beige sections: a faint mudcloth print behind the content (30 Sep 2026) ---------- */
html body main > section.section:not(.section--mist):not(.provide):not([aria-labelledby="start-h"]), html body .page-hero--plain {
  background-image: url("pattern/mudcloth-light.svg"); background-size: 480px auto; background-repeat: repeat; background-position: center top; }
html body main > section:is(.section--mist, .provide) {
  background-image: url("pattern/mudcloth-light.svg"), linear-gradient(var(--cw), var(--cw)) !important; background-size: 480px auto, 100% 100% !important; background-repeat: repeat, no-repeat !important; }

/* "One girl … One generation": each line a step larger, the last on a single line */
html body .ripple .ripple-stack { max-width: none !important; }
html body .ripple .ripple-line:not(#_) { font-size: calc(clamp(1.1rem, 2.1vw, 2rem) * (1 + var(--i, 0) * .3)) !important; white-space: nowrap; }
html body .ripple .ripple-line .hl:not(#_):not(#__) { font-size: 1em !important; }
/* the African strip that seams the last section to the footer */
html body .gf-seam { position: relative; z-index: 2; margin: 0; }
/* manifesto: a clearly visible cream mudcloth print over the orange */
html body .manifesto::after {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important;
  width: auto !important; height: auto !important; border-radius: 0 !important; transform: none !important; animation: none !important; opacity: 1 !important; filter: none !important;
  background: url("pattern/mudcloth-cream.svg") center top / 480px auto repeat !important; pointer-events: none;
  -webkit-mask: none !important; mask: none !important; }
html body .manifesto > :not(.bgword) { position: relative; z-index: 1; }
/* "Her journey" (Mission): Adinkra symbols behind the gallery, with Swahili outline words */
html body .journey { position: relative; overflow-x: clip; background: url("pattern/adinkra-light.svg") center top / 440px auto repeat, var(--cw); }
html body .journey > .wrap, html body .journey > .hz { position: relative; z-index: 1; }
/* photo wipe reveal: opens quickly, starting just before the photo scrolls into view */
html.fx .fx-wipe img { transition: clip-path .55s cubic-bezier(.3, .7, .2, 1) !important; }
/* phone footer: the same slightly calmer orange as the artwork */
@media (max-width: 759px) { html body .gf-phone-bot { filter: saturate(.88); } }

/* ---------- into the footer: the last section warms, a band fades cream → yellow → orange (30 Sep 2026) ---------- */
html body main > section.section:last-of-type:not(#_) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #FFEADB 100%), url("pattern/mudcloth-light.svg") !important;
  background-size: 100% 100%, 480px auto !important; background-repeat: no-repeat, repeat !important; }
html body .gf-fade { position: relative; overflow: hidden; height: clamp(80px, 9vw, 140px);
  background: linear-gradient(180deg, #FFEADB 0%, #FFE9A8 28%, #FFD27A 50%, #FDB45A 72%, #F7953A 100%); }
html body .gf-fade::before { content: ""; position: absolute; inset: 0 -40%; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0 8%, rgba(255, 238, 180, .7) 14%, rgba(255, 190, 90, .45) 20%, rgba(255, 255, 255, 0) 28%);
  animation: k-fade-move 6s linear infinite; animation-play-state: paused; }
html body :is(.gf-fade:hover, main:has(> section:last-of-type:hover) + .gf-fade)::before { opacity: 1; animation-play-state: running; }
@keyframes k-fade-move { to { transform: translateX(28%); } }
@media (prefers-reduced-motion: reduce) { html body .gf-fade::before { animation: none; } }

/* ---------- About: Adinkra symbols join the faint mudcloth behind every light section ---------- */
html body main[data-page="about"] > section.section:not(#_) {
  background-image: url("pattern/adinkra-light.svg"), url("pattern/mudcloth-light.svg") !important;
  background-size: 440px auto, 480px auto !important; background-repeat: repeat, repeat !important; background-position: 60px 40px, center top !important; }
html body main[data-page="about"] > section.section--mist:not(#_) {
  background-image: url("pattern/adinkra-light.svg"), url("pattern/mudcloth-light.svg"), linear-gradient(var(--cw), var(--cw)) !important;
  background-size: 440px auto, 480px auto, 100% 100% !important; background-repeat: repeat, repeat, no-repeat !important; }
html body main[data-page="about"] > section.section:last-of-type:not(#_) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #FFEADB 100%), url("pattern/adinkra-light.svg"), url("pattern/mudcloth-light.svg"), linear-gradient(var(--cw), var(--cw)) !important;
  background-size: 100% 100%, 440px auto, 480px auto, 100% 100% !important; background-repeat: no-repeat, repeat, repeat, no-repeat !important; }

/* ---------- page tops that move: the photo drifts toward the pointer inside its frame and breathes slowly;
   Contact adds a warm light that sweeps across now and then ---------- */
html body [data-hover-pan] img { transform: none !important; scale: 1.08; translate: calc(var(--hx, 0) * -2.2%) calc(var(--hy, 0) * -1.6%);
  transition: translate .9s cubic-bezier(.2, .7, .2, 1); animation: k-breathe 16s ease-in-out infinite alternate; will-change: translate, scale; }
@keyframes k-breathe { from { scale: 1.08; } to { scale: 1.14; } }
html body [data-glow]::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 214, 150, 0) 35%, rgba(255, 214, 150, .28) 48%, rgba(255, 255, 255, .36) 50%, rgba(255, 214, 150, 0) 64%) !important;
  background-size: 260% 100% !important; background-repeat: no-repeat !important; mix-blend-mode: soft-light; animation: k-glow 9s ease-in-out 1.5s infinite !important; opacity: 1 !important; transform: none !important; }
@keyframes k-glow { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { html body [data-hover-pan] img { animation: none; scale: 1.02; transition: none; } html body [data-glow]::after { animation: none !important; display: none !important; } }

/* phone footer: gentler orange, same as the artwork */
@media (max-width: 759px) { html body .gf-phone-bot { background: url("pattern/mudcloth.svg") center / 520px auto repeat, linear-gradient(175deg, #F6A45E 0%, #EE8440 50%, #D96A2E 100%) !important; } }
/* Leadership: the board section runs straight into the one-line stewardship note */
html body main[data-page="leadership"] #board { padding-bottom: clamp(32px, 4vw, 56px) !important; }
/* footer logo: "Arise" in the header's dark brown, like the header logo */
html body :is(.gf-logo, .gf-plogo) .b1 { color: #1B2340 !important; }
html body :is(.gf-logo, .gf-plogo) .b2 { color: #1B2340 !important; }

/* ---------- merged sections: one continuous block, a moderate gap between the parts ---------- */
html body .merge-part { margin-top: clamp(48px, 6vw, 88px); }
html body .merge-part > .wrap { padding: 0; }
html body main[data-page="stewardship"] > section.section[aria-labelledby="legal-h"] { padding-bottom: clamp(40px, 5vw, 72px) !important; }

/* ---------- Impact "Our goals": glossy black Adinkra symbols and a faint print on the brown ---------- */
html body section.band#goals::before {
  content: "" !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; height: 38% !important; z-index: 0 !important;
  transform: none !important; opacity: 1 !important; animation: none !important; filter: none !important; -webkit-mask: none !important; mask: none !important;
  background: url("pattern/adinkra-gloss.svg") 10px 12px / 250px auto repeat, url("pattern/mudcloth-ember.svg") center top / 480px auto repeat !important; pointer-events: none; }
html body section.band#goals > :not(.bgword) { position: relative; z-index: 1; }

/* ---------- tighter rhythm between sections, every page ---------- */
html body main > section.section { padding-block: clamp(40px, 5vw, 72px); }
html body main > :is(.section, .window, .manifesto) + section.section { padding-top: clamp(20px, 2.5vw, 36px); }
/* Sponsor stack: no extra run-out after the last card */
html body .stack-card:last-child { margin-bottom: 0 !important; }
html body main > section.stackwrap { padding-bottom: clamp(28px, 3.5vw, 48px) !important; }

/* ---------- Sponsor "Her story": photos stack on the left as you scroll, the story stays on the right ---------- */
@media (min-width: 900px) {
  html body .stack-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
  html body .stack-layout > .stack { grid-column: 1; grid-row: 1; margin-top: 0; }
  html body .stack-layout > .stack-story { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 48px); }
  html body .stack-layout .stack-card { height: min(52vh, 480px); }
}
html body .stack-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: st; }
html body .stack-steps li { position: relative; padding-left: 44px; line-height: 1.55; counter-increment: st; }
html body .stack-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--k-orange); color: var(--cw); font: 800 .85rem/1 "Manrope", sans-serif; }
html body .stack-steps strong { color: var(--k-ink); }
/* last section on each page: no long run-out before the fade into the footer */
html body main > section.section:last-of-type { padding-bottom: clamp(24px, 3vw, 44px) !important; }
html body .gf-fade { height: clamp(48px, 5vw, 84px) !important; }
/* the footer seam: a thin kente strip */
html body .gf-seam { height: 19px !important; background-size: auto 19px !important; }

/* horizontal kente strips: a little slimmer */
html body .afro-strip { height: 38px !important; background-size: auto 38px !important; }
html body .afro-strip--thin { height: 19px !important; background-size: auto 19px !important; }
html body .afro-zigzag { height: 41px !important; background-size: auto 41px !important; }
/* Mission "Her journey" photos: a little more colour (these only) */
html body .journey .hz-track img { filter: saturate(1.3) contrast(1.03); }
/* Mission pop-out portrait: richer colour, a deeper lift, and a 3D lean toward the pointer */
html body .popout[data-tilt3d] { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
html body .popout[data-tilt3d] .popout-frame img { filter: saturate(1.35) contrast(1.04) !important; }
html body .popout[data-tilt3d] .popout-cut { filter: saturate(1.35) contrast(1.04) drop-shadow(0 -6px 18px rgba(0, 0, 0, .3)) !important; transform: none !important; }
html body .popout[data-tilt3d]::after { box-shadow: 0 0 0 1px rgba(250, 118, 0, .25), 0 40px 70px -28px rgba(80, 30, 0, .55) !important; }
@media (prefers-reduced-motion: reduce) { html body .popout[data-tilt3d] { transform: none; } }

/* ---------- About (only): richer colour on the story and "flourish" photos ---------- */
html body main[data-page="about"] #story img, html body main[data-page="about"] .flourish img { filter: saturate(1.35) contrast(1.04) !important; }
/* flourish cards: a kente band between photo and word, and a warm kente edge on the card */
html body main[data-page="about"] .flourish li { position: relative; overflow: hidden; }
html body main[data-page="about"] .flourish li > span { position: relative; display: block; padding-top: 22px !important; }
html body main[data-page="about"] .flourish li > span::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: url("pattern/strip-2.svg") left center / auto 12px repeat-x; }
html body main[data-page="about"] .flourish li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, #1B2340, #1E9AA6 30%, #F7931E 60%, #D2462A); }

/* ---------- page-top headlines: a deep brown bevel edge and shade so the chrome reads on any photo ---------- */
html body .page-hero:not(.page-hero--plain) .d-hero .w > span:not(#_):not(#__) {
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .7)) drop-shadow(0 1px 0 #8A3A0A) drop-shadow(0 2px 0 #6E2C06) drop-shadow(0 3px 0 #4A1C04) drop-shadow(0 8px 14px rgba(30, 10, 2, .55)); }
html body .page-hero:not(.page-hero--plain) .lead, html body .page-hero:not(.page-hero--plain) .crumbs { text-shadow: 0 1px 2px rgba(20, 8, 2, .7), 0 2px 14px rgba(20, 8, 2, .55) !important; }
/* About top: a soft brown wash on the text side, the photo stays bright on the right */
html body main[data-page="about"] .page-hero::after { background: linear-gradient(90deg, rgba(43, 18, 6, .5) 0%, rgba(43, 18, 6, .28) 40%, rgba(43, 18, 6, 0) 66%) !important; }
/* About "Keep exploring": the two cards share the width, half and half */
html body main[data-page="about"] section[aria-labelledby="next-h"] .tiles { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(16px, 2vw, 28px) !important; }
html body main[data-page="about"] section[aria-labelledby="next-h"] .tile { min-height: clamp(300px, 28vw, 420px) !important; aspect-ratio: auto !important; }
@media (max-width: 719px) { html body main[data-page="about"] section[aria-labelledby="next-h"] .tiles { grid-template-columns: 1fr !important; } }
/* About: the closing line sits centred under the four cards, as their caption */
html body .flourish-close { max-width: 48ch !important; margin-inline: auto !important; text-align: center; font: italic 600 clamp(1.2rem, 1.8vw, 1.6rem)/1.45 "Fraunces", Georgia, serif !important; color: var(--k-ink) !important; }
/* board members: the Adinkra symbols behind each photo, on a warm cream ground */
/* photo bands (Programs, Donate, Stewardship closers): natural colour, a neutral shade only behind the words */
html body .cta-photo::after { background: radial-gradient(ellipse 46% 60% at 50% 50%, rgba(10, 6, 4, .58), rgba(10, 6, 4, .22) 70%, rgba(10, 6, 4, .1) 100%) !important; }
html body .cta-photo > .media img { filter: saturate(1.05) contrast(1.03) !important; }
/* the fade into the footer: warm light in loose, uneven patches rather than even rows */
html body .gf-fade:not(#_) {
  background:
    radial-gradient(28% 90% at 12% 70%, rgba(247, 149, 58, .75), transparent 70%),
    radial-gradient(22% 70% at 38% 25%, rgba(255, 233, 168, .9), transparent 70%),
    radial-gradient(30% 100% at 63% 85%, rgba(253, 180, 90, .8), transparent 70%),
    radial-gradient(18% 60% at 82% 30%, rgba(255, 210, 122, .85), transparent 70%),
    radial-gradient(25% 80% at 95% 80%, rgba(242, 128, 45, .7), transparent 70%),
    linear-gradient(180deg, #FFEADB 0%, #FFE2A0 45%, #F9A94E 100%) !important;
  background-size: 140% 100%, 160% 100%, 150% 100%, 170% 100%, 140% 100%, 100% 100% !important;
  animation: k-patches 18s ease-in-out infinite alternate; }
@keyframes k-patches {
  from { background-position: 0% 0, 100% 0, 30% 0, 70% 0, 0% 0, 0 0; }
  to   { background-position: 60% 0, 20% 0, 90% 0, 10% 0, 80% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { html body .gf-fade { animation: none; } }

/* ---------- every page-top title (home included): one size, large ---------- */
html body :is(.hero, .page-hero:not(.page-hero--plain)) .d-hero:not(#_) { font-size: clamp(2.7rem, 7.2vw, 7.4rem) !important; line-height: .95 !important; max-width: 15ch !important; }
@media (max-width: 899px) and (orientation: landscape) { html body :is(.hero, .page-hero:not(.page-hero--plain)) .d-hero:not(#_) { font-size: clamp(2.2rem, 6vw, 3.2rem) !important; } }
/* one even background from a merged last section into the footer: the warm fade starts only at its very bottom */
html body main > section.section:last-of-type:not(#_) { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 82%, #FFEADB 100%), url("pattern/mudcloth-light.svg") !important; }
html body main > section.section:last-of-type .newsletter { background: rgba(255, 255, 255, .72) !important; }
/* the side kente strip of the last section runs on through the fade to the footer strip */
html body main > section:last-of-type { position: relative; z-index: 3; overflow-y: visible !important; }
html body main > section:last-of-type > .afro-v { bottom: calc(-1 * clamp(48px, 5vw, 84px)) !important; }
/* newsletter boxes (every page): white with the faint mudcloth print, like the light sections — no peach wash */
html body .newsletter:not(#_) { background: url("pattern/mudcloth-light.svg") center top / 480px auto repeat, var(--cw) !important;
  border: 1px solid rgba(250, 118, 0, .18) !important; box-shadow: 0 24px 48px -30px rgba(120, 45, 0, .28) !important; }
html body .newsletter:not(#_)::before, html body .newsletter:not(#_)::after { background: none !important; }
/* footer words as live, pure-white text over the bright band (crisp at any size) */
html body .gf-art .gf-live { position: absolute; margin: 0; display: flex; align-items: center; color: #fff; line-height: 1; white-space: nowrap;
  font-family: "Manrope", system-ui, sans-serif; text-shadow: 0 1px 2px rgba(90, 25, 0, .55), 0 2px 10px rgba(90, 25, 0, .35); }
html body .gf-art .gf-tagline { font-size: 1.5cqw; font-weight: 500; }
html body .gf-art .gf-join { font-size: 1.2cqw; font-weight: 600; }
html body .gf-art .gf-joinsub { font-size: .82cqw; font-weight: 500; }
html body .gf-art .gf-copy { font-size: .86cqw; font-weight: 500; }
html body .gf-art .gf-legal-row { justify-content: flex-end; gap: 1.6cqw; font-size: .92cqw; font-weight: 600; }
html body .gf-art .gf-legal-row a { color: #fff; text-decoration: none; }
html body .gf-art .gf-legal-row a:hover { text-decoration: underline; }
html body .gf-art .gf-hot--text { color: #fff !important; font-size: .98cqw !important; font-weight: 600; line-height: 1; display: flex; align-items: center; white-space: nowrap;
  text-decoration: none; text-shadow: 0 1px 2px rgba(90, 25, 0, .55), 0 2px 10px rgba(90, 25, 0, .35); width: auto !important; }
html body .gf-art .gf-hot--text:hover { background: none !important; text-decoration: underline; }
html body .gf-art .gf-copy { display: block !important; line-height: 3.65cqw !important; }
/* home: the strip under the hero fills the rest of the first screen (the hero stops 35px short of it) */
html body main[data-page="home"] > .hero + .afro-strip:not(#_) { height: 35px !important; background-size: auto 35px !important; }
/* touch screens: bigger tap areas for the slideshow dots and breadcrumb links, same look */
@media (hover: none), (max-width: 719px) {
  html body .hero-dot { position: relative; }
  html body .hero-dot::after { content: ""; position: absolute; inset: -14px -6px; }
  html body .crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
/* preview ownership badge: small, quiet, bottom-left, never blocks clicks */
html body .pv-badge { position: fixed; left: 30px; bottom: 12px; z-index: 90; margin: 0; padding: 5px 10px; border-radius: 999px; pointer-events: none;
  background: rgba(27, 35, 64, .72); color: var(--cw); font: 600 10.5px/1 "Manrope", system-ui, sans-serif; letter-spacing: .02em; opacity: .85;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media print { html body .pv-badge { position: static; } }

/* ---------- home "Every girl…" (1 Oct 2026): white glossy bevelled lettering; gaps above and below cut to three-quarters ---------- */
html body .manifesto-lines > span:not(.sparkles):not(#_):not(#__) {
  background-image: var(--sh-sweep), linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 42%, #E8EBF0 50%, #FFFFFF 74%, #FFFFFF 100%) !important; }
html body .manifesto:not(#_) { padding-top: clamp(48px, 5.7vw, 82px) !important; }
html body .manifesto > .manifesto-stage + .strip:not(#_) { margin-top: clamp(56px, 8.7vw, 125px) !important; }

/* =====================================================================
   FOOTER LOWER BAND (1 Oct 2026): plain cool white, gold logo, ink text
   ===================================================================== */
html body .gfoot { background: var(--cw) !important; }
html body .gf-band { background: var(--cw); color: #171C2A; font-family: "Manrope", system-ui, sans-serif; border-top: 1px solid #E7E9EE; }
html body .gf-band-in { max-width: 1400px; margin: 0 auto; padding: clamp(32px, 3.4vw, 56px) clamp(20px, 4vw, 64px) clamp(24px, 2.6vw, 40px);
  display: grid; grid-template-columns: minmax(240px, 1.25fr) minmax(260px, 1fr) minmax(320px, 1.5fr) auto; gap: clamp(24px, 3vw, 56px); align-items: start; }
html body .gf-b-logo img { display: block; height: clamp(58px, 5vw, 84px); width: auto; }
html body .gf-b-tag { margin: 14px 0 6px; font-size: clamp(17px, 1.35vw, 22px); font-weight: 500; color: #171C2A; }
html body .gf-b-ein { margin: 0; font-size: 14px; font-weight: 600; color: #5B6270; letter-spacing: .01em; }
html body .gf-b-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(18px, 2vw, 36px); padding-left: clamp(0px, 2vw, 32px); border-left: 1px solid #E7E9EE; }
html body .gf-b-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html body .gf-b-links a { color: #171C2A; text-decoration: none; font-size: clamp(15px, 1.1vw, 17px); font-weight: 600; }
html body .gf-b-links a:hover { color: #B8862B; text-decoration: underline; text-underline-offset: 4px; }
html body .gf-b-h { margin: 0; font-size: clamp(19px, 1.5vw, 24px); font-weight: 700; color: #171C2A; }
html body .gf-b-sub { margin: 6px 0 14px; font-size: 15px; color: #5B6270; }
html body .gf-b-form { display: flex; flex-wrap: wrap; max-width: 520px; }
html body .gf-b-form input { flex: 1 1 200px; min-width: 0; height: 52px; padding: 0 16px; border: 1.5px solid #CDD2DA; border-right: 0; border-radius: 10px 0 0 10px;
  font: 500 16px "Manrope", sans-serif; color: #171C2A; background: var(--cw); }
html body .gf-b-form input:focus { outline: none; border-color: #B8862B; box-shadow: 0 0 0 3px rgba(184, 134, 43, .18); }
html body .gf-b-form button { height: 52px; padding: 0 22px; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 0 10px 10px 0; cursor: pointer;
  background: linear-gradient(180deg, #C9963C 0%, #B7842C 55%, #93610E 100%); color: var(--cw); font: 700 16px "Manrope", sans-serif; letter-spacing: .01em; }
html body .gf-b-form button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html body .gf-b-form button:hover { filter: brightness(1.06); }
html body .gf-b-form .field-error, html body .gf-b-form .form-status { flex-basis: 100%; margin: 8px 0 0; font-size: 14px; color: #8A2A0E; }
html body .gf-b-form .form-status { color: #1E6B34; }
html body .gf-b-form .form-status:empty, html body .gf-b-form .field-error:empty { display: none; }
html body .gf-b-social { display: flex; gap: 12px; padding-top: 4px; }
html body .gf-soc { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: #171C2A; background: #F4F5F7; border: 1px solid #E7E9EE; transition: color .2s, background .2s; }
html body .gf-soc svg { width: 22px; height: 22px; fill: currentColor; }
html body a.gf-soc:hover { color: var(--cw); background: #B8862B; border-color: #B8862B; }
html body .gf-soc:focus-visible { outline: 3px solid #B8862B; outline-offset: 2px; }
html body .gf-band-legal { max-width: 1400px; margin: 0 auto; padding: 16px clamp(20px, 4vw, 64px) 22px; border-top: 1px solid #E7E9EE;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; font-size: 14px; color: #5B6270; }
html body .gf-band-legal p { margin: 0; }
html body .gf-b-legal-links { display: flex; gap: 14px; align-items: center; }
html body .gf-b-legal-links a { color: #171C2A; font-weight: 600; text-decoration: none; }
html body .gf-b-legal-links a:hover { color: #B8862B; text-decoration: underline; }
html body .gf-b-legal-links span { color: #B9BEC7; }
@media (max-width: 1100px) {
  html body .gf-band-in { grid-template-columns: 1fr 1fr; }
  html body .gf-b-links { border-left: 0; padding-left: 0; }
}
@media (max-width: 759px) {
  html body .gf-band-in { grid-template-columns: 1fr; gap: 26px; }
  html body .gf-b-form button { padding: 0 16px; }
  html body .gf-band-legal { flex-direction: column; align-items: flex-start; }
}
/* phones: the photo + headline block stays, the lower band above replaces the old orange block */
html body .gf-phone-bot { display: none !important; }
@media (min-width: 1101px) { html body .gf-band-in { grid-template-columns: minmax(230px, 1.05fr) minmax(300px, 1.15fr) minmax(320px, 1.45fr) auto; } }
html body .gf-b-links a, html body .gf-b-ein .nw { white-space: nowrap; }
html body .gf-b-ein { line-height: 1.55; }
html body .gf-b-form input { flex: 1 1 0; }

/* footer band (client layout): orange line above the logo row, white break, orange line above the © row */
html body .gf-band { border-top: 3px solid #FA7600 !important; }
html body .gf-band-legal { border-top: 3px solid #FA7600 !important; margin-top: 0; }
html body .gf-band-in { padding-bottom: clamp(28px, 3vw, 44px); }

/* home "Every girl…": the space under "Every girl educated." equals the space above "Every girl created." */
html body .manifesto > .manifesto-stage + .strip:not(#_) { margin-top: clamp(48px, 5.7vw, 82px) !important; }

/* fonts consolidated (1 Oct 2026): Manrope, Fraunces and Bodoni Moda only */
:root { --script: "Fraunces", Georgia, serif; --moment: "Manrope", system-ui, sans-serif; }
html body .bgword { font-family: "Manrope", system-ui, sans-serif !important; font-weight: 800 !important; }
html body :is(.b1-script, .kfoot-logo .g) { font-family: "Fraunces", Georgia, serif !important; font-style: italic !important; font-weight: 900 !important; }
html body button, html body input, html body select, html body textarea { font-family: "Manrope", system-ui, sans-serif; }
/* phones: the calmer footer artwork (the girls on the right) */
@media (max-width: 759px) { html body .gf-phone-photo { aspect-ratio: 16 / 10 !important; background: url("media/footer-top.jpg") 100% 40% / 230% auto no-repeat !important; }
  html body .gf-phone-top { background: linear-gradient(180deg, #FFF1E2, var(--cw)) !important; } }

/* Leadership board: no panel behind the text beside each portrait */
html body main[data-page="leadership"] .director:not(#_) { background: none !important; border: 0 !important; box-shadow: none !important; }
html body main[data-page="leadership"] .director:hover { transform: none !important; box-shadow: none !important; }
html body main[data-page="leadership"] .director-focus strong { font-weight: 700; color: var(--k-ink); }
/* Contact top: the whole photo shows below the header (no heads cut off) */
html body main[data-page="contact"] .page-hero { min-height: max(82svh, calc(var(--gh-h) + 56.25vw * .78)) !important; }
html body main[data-page="contact"] .page-hero > .media:not(#_) { inset: var(--gh-h) 0 0 0 !important; transform: none !important; }
html body main[data-page="contact"] .page-hero > .media img:not(#_) { object-position: 50% 0% !important; scale: 1 !important; animation: none !important; translate: calc(var(--hx, 0) * -1%) 0 !important; }

/* =====================================================================
   PROFESSIONAL TEXT FACE (1 Oct 2026): Merriweather for reading text.
   Headings, the big shiny titles, logo, menu and buttons keep their fonts.
   ===================================================================== */
:root { --read: "Merriweather", Georgia, "Times New Roman", serif; }
html body main :is(p, li, dd, dt, blockquote, figcaption, td, th):not(.kicker):not(.d1):not(.d2):not(.d3):not(.d4):not(.d-hero):not(.manifesto-lines):not(.ripple-line):not(.director-role):not(.person-role):not(.fine-label),
html body .bio-dialog :is(p, li),
html body .gf-band :is(.gf-b-tag, .gf-b-sub, .gf-b-ein, .gf-band-legal p:first-child) {
  font-family: var(--read) !important; letter-spacing: 0 !important; }
html body main :is(p, li) { line-height: 1.7; }
html body main .lead:not(.hero .lead):not(.page-hero .lead) { font-size: clamp(1.05rem, 1.25vw, 1.2rem) !important; }

/* every page top (home included): the descriptive line and the breadcrumbs in the professional face, larger, in the site white */
html body :is(.hero, .page-hero:not(.page-hero--plain)) .lead:not(#_) {
  font-family: var(--read) !important; font-weight: 400 !important; font-style: normal !important;
  font-size: clamp(1.15rem, 1.55vw, 1.5rem) !important; line-height: 1.6 !important; color: var(--cw) !important; -webkit-text-fill-color: var(--cw) !important;
  max-width: 44ch; }
html body :is(.hero, .page-hero:not(.page-hero--plain)) :is(.crumbs, .crumbs a, .crumbs li):not(#_) {
  font-family: var(--read) !important; font-weight: 700 !important; font-size: clamp(.95rem, 1.05vw, 1.1rem) !important; color: var(--cw) !important; letter-spacing: .01em !important; }
html body :is(.hero, .page-hero:not(.page-hero--plain)) .hero-sw:not(#_) { color: var(--cw) !important; }

/* page-top link rows (e.g. Mua Hills · Turkana · Future expansion): orange pills, white professional text */
html body .page-hero .subnav a:not(#_) { background: #FA7600 !important; border: 1px solid #FA7600 !important; color: var(--cw) !important; -webkit-text-fill-color: var(--cw) !important;
  font-family: var(--read) !important; font-weight: 700 !important; font-size: clamp(.95rem, 1.05vw, 1.08rem) !important; letter-spacing: 0 !important; text-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 10px 22px -12px rgba(120, 45, 0, .55) !important; }
html body .page-hero .subnav a:not(#_):hover, html body .page-hero .subnav a:not(#_):focus-visible { background: #D85F00 !important; border-color: #D85F00 !important; }

/* footer bottom row: full-width orange with a faint cream mudcloth print, white text */
html body .gf-band-legal:not(#_) { max-width: none !important; margin: 0 !important; border-top: 0 !important;
  padding: 20px max(24px, calc((100% - 1272px) / 2)) 24px !important;
  background: url("pattern/mudcloth-cream.svg") center / 420px auto repeat, linear-gradient(180deg, #FA7600 0%, #E86200 100%) !important;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25); color: var(--cw) !important; }
html body .gf-band-legal p, html body .gf-band-legal p:first-child { color: var(--cw) !important; }
html body .gf-band-legal .gf-b-legal-links a { color: var(--cw) !important; }
html body .gf-band-legal .gf-b-legal-links a:hover { color: #FFE3C4 !important; }
html body .gf-band-legal .gf-b-legal-links span { color: rgba(248, 250, 253, .55) !important; }
/* the preview badge sits above the orange row so it never covers the copyright */
html body .pv-badge { bottom: 76px !important; }
@media (max-width: 759px) { html body .pv-badge { bottom: 132px !important; } }
/* footer: 501(c)(3) and EIN sit under the social icons, in ink black */
html body .gf-b-side { display: grid; gap: 14px; justify-items: start; }
html body .gf-b-side .gf-b-ein:not(#_) { margin: 0; color: #171C2A !important; font-size: 15px; font-weight: 400; line-height: 1.55; white-space: nowrap; }
/* footer: every piece of small text in the one professional face */
html body .gf-band :is(p, a, li, span, input, button, label, .gf-b-h):not(#_),
html body .gf-band input::placeholder { font-family: var(--read) !important; letter-spacing: 0 !important; }
html body .gf-b-links a:not(#_) { font-weight: 400 !important; }
html body .gf-b-h:not(#_) { font-weight: 700 !important; }
/* About: the scripture runs straight into the "keep exploring" cards */
html body main[data-page="about"] section[aria-label="Scripture"] + section.section:not(#_) { padding-top: clamp(16px, 2vw, 28px) !important; }
/* pages that end on a photo band: the photo meets the kente strip directly (no fade band) */
html body:has(main > section.cta-photo:last-of-type) .gf-fade { display: none !important; }
/* Donate closing band: the girl at the chalkboard is shown head to toe (anchored high, no scroll zoom) */
html body main[data-page="donate"] .cta-photo > .media img:not(#_) { object-position: 50% 8% !important; transform: none !important; scale: 1 !important; }
html body main[data-page="donate"] .cta-photo:not(#_) { min-height: clamp(520px, 52vw, 760px) !important; }

/* Stewardship top: the full, sharp sunset photo (girls on the right) */
html body main[data-page="stewardship"] .page-hero > .media img:not(#_) { object-position: 100% 35% !important; }
/* page-top and photo-band buttons: larger, easier to read and tap */
html body :is(.hero, .page-hero, .cta-photo, .ripple, .band) .hero-actions .btn:not(#_),
html body :is(.hero, .page-hero, .cta-photo) a.btn:not(.btn--sm):not(#_) {
  height: clamp(52px, 4.2vw, 64px) !important; padding: 0 clamp(24px, 2.2vw, 36px) !important;
  font-size: clamp(16px, 1.25vw, 20px) !important; font-weight: 700 !important; letter-spacing: .01em !important; gap: 12px !important; }
@media (max-width: 599px) {
  html body :is(.hero, .page-hero, .cta-photo, .ripple, .band) .hero-actions .btn:not(#_),
  html body :is(.hero, .page-hero, .cta-photo) a.btn:not(.btn--sm):not(#_) { height: 50px !important; padding: 0 20px !important; font-size: 16px !important; }
}
html body:has(main > section.ripple:last-of-type) .gf-fade { display: none !important; }
html body .hero-actions .btn { white-space: nowrap !important; }
@media (max-width: 599px) { html body :is(.hero, .page-hero, .cta-photo, .ripple, .band) .hero-actions .btn:not(#_) { padding: 0 16px !important; font-size: 15px !important; gap: 8px !important; } }

/* Programs and sponsorship projects (Our Work): add more <article class="project"> blocks; they stack and alternate */
html body .projects { display: grid; gap: clamp(32px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); }
html body .project { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
html body .project:nth-child(even) > .media { order: 2; }
html body .project > .media { position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -34px rgba(43, 18, 6, .45); }
html body .project > .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .project-body { display: grid; gap: 14px; align-content: start; }
html body .project-body h3 { margin: 4px 0 0; }
html body .project-body p { margin: 0; }
@media (max-width: 899px) { html body .project { grid-template-columns: 1fr; } html body .project:nth-child(even) > .media { order: 0; } }
/* donate "More ways to help": no hover box */
html body .way.tilt:hover, html body .way:hover { box-shadow: none !important; transform: none !important; }
/* home top: no placeholder sunset while the first film loads; its first frame shows at once */
html body .hero .dawn { display: none !important; }
html body .hero { background: #2B1206 !important; }
html body .hero-slide:first-child { opacity: 1; }
/* Leadership closing band: taller, her face in full view, words set lower */
html body main[data-page="leadership"] .cta-photo:not(#_) { min-height: clamp(560px, 56vw, 880px) !important; align-items: end !important; }
html body main[data-page="leadership"] .cta-photo > .media img:not(#_) { object-position: 50% 12% !important; transform: none !important; scale: 1 !important; }
html body main[data-page="leadership"] .cta-photo > .wrap { padding-bottom: clamp(32px, 4vw, 64px) !important; }
/* footer: tagline, links, newsletter line and 501(c)(3)/EIN share one size, face and colour */
html body .gf-band :is(.gf-b-tag, .gf-b-links a, .gf-b-sub, .gf-b-ein):not(#_):not(#__) {
  font-family: var(--read) !important; font-size: clamp(16px, 1.2vw, 19px) !important; font-weight: 400 !important; line-height: 1.55 !important; color: #171C2A !important; }
html body .gf-b-tag:not(#_) { margin: 14px 0 0 !important; }
html body .gf-b-sub:not(#_) { margin: 6px 0 14px !important; }
/* Mission portrait: one clean photo (the pop-out head layer is retired; it doubled her eyes) */
html body .popout .popout-cut { display: none !important; }
html body .popout::after { top: 0 !important; }
html body .popout > .popout-frame:not(#_) { inset: 0 !important; top: 0 !important; }
html body .split-media .popout .popout-frame:not(#_) { clip-path: inset(0 round 28px) !important; }
/* Mission: "Our mission" / "Our vision" headings and the two links, larger */
html body main[data-page="mission"] #about-h ~ * h3:not(#_), html body main[data-page="mission"] .mv h3:not(#_) {
  font-size: clamp(1.35rem, 1.9vw, 1.8rem) !important; letter-spacing: 0 !important; text-transform: none !important; color: #B84300 !important; margin-bottom: 8px !important; }
html body main[data-page="mission"] a.link:not(#_) { font-family: var(--read) !important; font-size: clamp(1.1rem, 1.35vw, 1.3rem) !important; font-weight: 700 !important; }
/* home: the reading-girl film only, gold cast taken out, a little crisper */
html body .hero-slide--cool video:not(#_), html body .hero-slide--cool img:not(#_) { filter: url(#ga-cool) saturate(.85) contrast(1.1) brightness(1.02) !important; }
/* home: the "INUKA · RISE UP" line, much larger */
html body .hero .hero-sw:not(#_) { font-size: clamp(1rem, 1.5vw, 1.6rem) !important; letter-spacing: .24em !important; gap: 16px !important; font-weight: 700 !important; }
html body .hero .hero-sw::before { width: 56px !important; height: 3px !important; }
/* Leadership top: the standing girl is shown head to waist (photo below the header, anchored high, no zoom crop) */
html body main[data-page="leadership"] .page-hero > .media:not(#_) { inset: var(--gh-h) 0 0 0 !important; transform: none !important; }
html body main[data-page="leadership"] .page-hero > .media img:not(#_) { object-position: 75% 12% !important; scale: 1 !important; transform: none !important; }
/* every page top: the photo starts below the header, sits still (no zoom crop) and is anchored high so heads are never cut off */
html body .page-hero:not(.page-hero--plain) > .media { inset: var(--gh-h) 0 0 0 !important; transform: none !important; }
html body .page-hero:not(.page-hero--plain) > .media img { scale: 1 !important; transform: none !important; object-position: 60% 15%; }
/* photo bands never trap the scroll wheel */
html body .cta-photo:not(#_) { overflow: clip !important; }
/* Leadership closing band: shorter, cropped from the bottom (faces kept) */
html body main[data-page="leadership"] .cta-photo:not(#_):not(#__) { min-height: clamp(420px, 34vw, 600px) !important; height: auto !important; display: grid !important; align-items: center !important; }
html body main[data-page="leadership"] .cta-photo > .media img:not(#_):not(#__) { object-position: 50% 18% !important; }
html body main[data-page="leadership"] .cta-photo > .wrap { padding-block: clamp(48px, 5vw, 80px) !important; }

/* =====================================================================
   1 Oct 2026, second round of client notes
   ===================================================================== */
:root { --cw-text: #EEF5FF; }  /* cool white for words set on photos */

/* no italics anywhere: headings stand upright and stay bold; italic words become bold */
html body :is(h1, h2, h3, h4, .d-hero, .d1, .d2, .d3, .d4, .manifesto-lines, .manifesto-lines span, .ripple-line, .footer-big, .kanga-title, .script-line, .hand-note, blockquote, .faith-verse, em, i, cite, .director-name, .person-name):not(#_) { font-style: normal !important; }
html body :is(p, li, dd, span, figcaption, blockquote) > :is(em, i):not(.mark):not(#_) { font-weight: 700 !important; }
/* Leadership: names and headings in plain upright type */
html body main[data-page="leadership"] :is(h1, h2, h3, .d-hero, .d1, .d2, .d3, .d-hero span, .d-hero .w > span):not(#_) { font-style: normal !important; }

/* home "Every girl created / valued / educated": larger and brighter */
html body .manifesto-lines:not(#_) { font-size: clamp(2.4rem, 6.4vw, 6.6rem) !important; }
html body .manifesto-lines > span:not(.sparkles):not(#_):not(#__):not(#___) {
  background-image: var(--sh-sweep), linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 46%, #F1F6FF 54%, #FFFFFF 100%) !important;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 1px 0 #8A3A0A) drop-shadow(0 2px 0 #6E2C06) drop-shadow(0 3px 0 #4A1C04) drop-shadow(0 10px 16px rgba(74, 28, 4, .38)) brightness(1.06); }

/* "One Girl, One Family, One Community, One Generation.": normal capitals */
html body .ripple .ripple-line:not(#_) { text-transform: none !important; letter-spacing: -.01em; }

/* white words on photos: cooler white, and the small ones a size larger (headlines unchanged) */
html body :is(.hero, .page-hero:not(.page-hero--plain), .ripple, .tile, .cta-photo, .faith, .journey, .gf-phone) :is(p, li, a, span, strong, figcaption, blockquote, h2, h3):not(.mark):not(.hl):not(.btn--primary):not(.btn--sun):not(#_) { color: var(--cw-text); }
html body .hero :is(.lead, .lead-more):not(#_), html body .page-hero:not(.page-hero--plain) .lead:not(#_) { font-size: clamp(1.15rem, 1.75vw, 1.8rem) !important; }
html body .hero .hero-sw:not(#_) { font-size: clamp(1.05rem, 1.7vw, 1.65rem) !important; }
html body .hero .scroll-cue:not(#_) { font-size: 14px !important; }
html body .tile .tile-body p:not(#_) { font-size: clamp(1.05rem, 1.4vw, 1.35rem) !important; line-height: 1.45; }
html body .tile .tile-more:not(#_) { font-size: clamp(1rem, 1.25vw, 1.2rem) !important; }
html body .ripple .ripple-note:not(#_) { font-size: clamp(1.1rem, 1.55vw, 1.45rem) !important; color: var(--cw-text) !important; }
html body .page-hero :is(.crumbs, .crumbs a, .crumbs li, nav[aria-label="Breadcrumb"] a, nav[aria-label="Breadcrumb"] li):not(#_) { font-size: clamp(1rem, 1.2vw, 1.2rem) !important; }
html body .faith :is(p, strong):not(.faith-verse):not(#_) { font-size: clamp(1.05rem, 1.3vw, 1.3rem) !important; line-height: 1.6; }
html body .faith .faith-ref:not(#_) { font-size: clamp(1.1rem, 1.4vw, 1.35rem) !important; }
html body :is(.hero, .page-hero, .cta-photo) .btn--ghost:not(#_) { font-size: clamp(1.05rem, 1.25vw, 1.25rem) !important; color: var(--cw-text) !important; border-color: var(--cw-text) !important; }
html body .gf-phone :is(.gf-eyebrow, .gf-p, .gf-btn):not(#_) { font-size: 19px !important; }

/* page-top photos: the patterned corner sits right under the header, top right (phones too) */
html body .page-hero:not(.page-hero--plain) > .media::before { top: 0 !important; }

/* footer: every line, and the artwork caption, in Times New Roman */
html body :is(.gfoot, .gf-band, .gf-phone, .gf-band-legal) :is(p, a, li, span, input, button, label, h2, h3, .gf-b-h, em, strong):not(#_):not(#__),
html body .gf-band input::placeholder { font-family: "Times New Roman", Times, Georgia, serif !important; }
html body .gf-band-legal :is(p, a, span):not(#_):not(#__) { font-size: clamp(16px, 1.2vw, 19px) !important; }
/* footer artwork: its words are live text now (Times New Roman), set over the cleaned picture */
html body .gf-art .gf-lb:not(#_) { position: absolute; left: 4.75%; top: 20.5%; width: 44%; line-height: 1.2; color: #1B2440; }
html body .gf-art .gf-lb .gf-l-eyebrow { margin: 0; font-size: 1.12cqw; letter-spacing: .2em; text-transform: uppercase; color: #C2410C; font-weight: 700; }
html body .gf-art .gf-lb .gf-l-h { margin: 1.3cqw 0 0; font-size: 3.15cqw; line-height: 1.08; font-weight: 700; color: #13213F; letter-spacing: -.01em; }
html body .gf-art .gf-lb .gf-l-h span { color: #D9480F; }
html body .gf-art .gf-lb .gf-l-p { margin: 1.5cqw 0 0; max-width: 37cqw; font-size: 1.32cqw; line-height: 1.42; color: #24304A; }
html body .gf-art .gf-lb .gf-l-btn:not(#_) { position: static; display: inline-flex; gap: .6cqw; align-items: center; margin-top: 1.8cqw; padding: 1cqw 2.2cqw;
  border-radius: .6cqw; background: #D9480F; color: #fff; font-size: 1.4cqw; font-weight: 700; text-decoration: none; line-height: 1; box-shadow: 0 6px 16px rgba(160, 50, 0, .28); }
html body .gf-art .gf-lb .gf-l-btn:hover { background: #B83A08; }
html body .gf-art .gf-caps:not(#_) { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
html body .gf-art .gf-caps li { position: absolute; top: 82.3%; width: 9.4%; margin: 0; color: var(--cw-text); font-size: 1.12cqw; line-height: 1.25; }
html body .gf-art .gf-caps b { display: block; font-size: 1.22cqw; font-weight: 700; margin-bottom: .2cqw; }
/* orange scheme: footer accents follow the logo */
html body .gf-b-links a:hover, html body .gf-b-legal-links a:hover { color: #E86A00 !important; }
html body .gf-b-form input:focus { border-color: #E86A00; box-shadow: 0 0 0 3px rgba(232, 106, 0, .18); }
html body a.gf-soc:hover { background: #E86A00; border-color: #E86A00; }
/* "Every girl educated." always on one line: each line keeps together, sized to fit the screen */
html body .manifesto-lines > span:not(.sparkles) { white-space: nowrap; }
html body .manifesto-lines:not(#_):not(#__) { font-size: clamp(1.5rem, 5.6vw, 6rem) !important; }
@media (max-width: 699px) { html body .manifesto-lines:not(#_):not(#__):not(#___) { font-size: 6.8vw !important; } }
/* footer bottom row: soft peach-to-orange wash, light at the top and deeper at the bottom, like the footer artwork; dark text for contrast */
html body .gf-band-legal:not(#_):not(#__) { background: linear-gradient(180deg, #FFE3C6 0%, #FFCD9C 45%, #FBA862 78%, #F7954A 100%) !important; box-shadow: none !important; }
html body .gf-band-legal :is(p, p:first-child, span, .gf-b-legal-links a):not(#_):not(#__) { color: #2B1206 !important; }
html body .gf-band-legal .gf-b-legal-links a:hover:not(#_):not(#__) { color: #8A3A0A !important; }
html body .gf-band-legal .gf-b-legal-links span:not(#_):not(#__) { color: rgba(43, 18, 6, .45) !important; }

/* ---------- hero titles (1 Oct 2026): white at the top and bottom of each letter, warm colour through the middle,
   with thin horizontal lines of colour drifting through: some rise, some sink ---------- */
html body :is(.hero .d-hero .w > span, .page-hero:not(.page-hero--plain):not(.page-hero--cards) .d-hero .w > span):not(#_):not(#__) {
  --hl-mid: #FFC48C; --hl-core: #F59A4E; --hl-line: rgba(245, 128, 40, .6);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 9px, var(--hl-line) 9px 10.5px, transparent 10.5px 22px),
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, .9) 14px 15.5px, transparent 15.5px 31px),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 16%, var(--hl-mid) 38%, var(--hl-core) 50%, var(--hl-mid) 62%, #FFFFFF 84%, #FFFFFF 100%) !important;
  background-size: 100% 22px, 100% 31px, 100% 100% !important; background-repeat: repeat, repeat, no-repeat !important;
  background-position: 0 0, 0 0, 0 0;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: ga-lines 2.8s linear infinite !important; }
/* the orange accent words ("nations rise.") keep a deeper orange core */
html body :is(.hero .d-hero .w:nth-child(n+4) > span, .page-hero:not(.page-hero--plain):not(.page-hero--cards) .d-hero .w:nth-child(n+4) > span):not(#_):not(#__) {
  --hl-mid: #FFB066; --hl-core: #FA7600; --hl-line: rgba(232, 98, 0, .65); }
@keyframes ga-lines { to { background-position: 0 -22px, 0 31px, 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html body :is(.hero .d-hero .w > span, .page-hero .d-hero .w > span):not(#_):not(#__) { animation: none !important; } }
/* footer artwork captions: gold line icons and thin gold dividers, as in the original artwork */
html body .gf-art .gf-caps li { top: 70% !important; text-shadow: 0 1px 6px rgba(10, 12, 30, .55); }
html body .gf-art .gf-caps li + li { border-left: 2px solid #E0A23C; padding-left: 1.2cqw; margin-left: -1.2cqw; }
html body .gf-art .gf-ic { display: block; width: 3.2cqw; height: auto; margin-bottom: .8cqw; fill: none; stroke: #F2B544; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html body .gf-art .gf-ic circle { fill: none; }
/* no italics anywhere, including pull quotes and notes */
html body :is(main, footer, header) :not(svg):not(svg *):not(#_) { font-style: normal !important; }
html body .gf-art .gf-caps li:not(#_) { width: 10.4% !important; font-size: 1.05cqw; }
html body .gf-art .gf-caps b:not(#_) { font-size: 1.15cqw; white-space: nowrap; }

/* ---------- page-top slideshows (1 Oct 2026): each main page opens on a film, then its photographs crossfade in turn ---------- */
html body .page-hero > .media.ph-reel { overflow: hidden; }
html body .ph-reel .ph-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; z-index: 0; }
html body .ph-reel .ph-slide.is-active { opacity: 1; z-index: 1; }
html body .ph-reel .ph-slide :is(img, video):not(#_) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: none; }
html body .ph-reel .ph-slide.is-active img { animation: ph-drift 9s linear forwards; }
@keyframes ph-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
html body .ph-reel::before { z-index: 3 !important; }
@media (prefers-reduced-motion: reduce) { html body .ph-reel .ph-slide { transition: none; } html body .ph-reel .ph-slide.is-active img { animation: none; } }

/* ---------- hero titles: "Sunrise" — white letters, and a warm orange band slowly rises up through them and settles back ---------- */
html body :is(.hero .d-hero .w > span, .page-hero:not(.page-hero--plain):not(.page-hero--cards) .d-hero .w > span):not(#_):not(#__):not(#___) {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 35%, #FFB066 45%, #FA7600 50%, #FFB066 55%, #FFFFFF 65%, #FFFFFF 100%) !important;
  background-size: 100% 300% !important; background-repeat: no-repeat !important; background-position: 0 100%;
  animation: ga-sunrise 4s ease-in-out infinite alternate !important; animation-delay: calc(var(--w, 0) * .12s) !important; }
@keyframes ga-sunrise { from { background-position: 0 100%; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { html body :is(.hero .d-hero .w > span, .page-hero .d-hero .w > span):not(#_):not(#__):not(#___) { animation: none !important; background-position: 0 50%; } }
/* the raised edge sits on each word's wrapper, not on the moving colour, so no faint box shows behind words over film */
html body :is(.hero, .page-hero:not(.page-hero--plain):not(.page-hero--cards)) .d-hero .w > span:not(#_):not(#__):not(#___) { filter: none !important; }
html body :is(.hero, .page-hero:not(.page-hero--plain):not(.page-hero--cards)) .d-hero .w:not(#_) { filter: drop-shadow(0 1px 0 #8A3A0A) drop-shadow(0 2px 0 #6E2C06) drop-shadow(0 3px 0 #4A1C04); }
/* footer artwork back to the original four girls: its own icons and gold dividers are part of the picture again */
html body .gf-art .gf-caps li:not(#_) { top: 82.3% !important; width: 9.4% !important; border-left: 0 !important; padding-left: 0 !important; margin-left: 0 !important; }

/* page-top slideshow dots: bottom left of the photo, like the home page */
html body .page-hero > .ph-dots { position: absolute; z-index: 4; left: max(24px, calc((100% - 1272px) / 2)); bottom: clamp(16px, 2.4vw, 30px); }
html body .page-hero > .ph-dots .hero-dot span { background: rgba(255, 255, 255, .45); }

/* band above the footer: light orange with soft flowing waves (like the footer artwork), no yellow */
html body .gf-fade:not(#_):not(#__) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C240 30 420 110 720 72 S1200 30 1440 64 V140 H0z' fill='%23FFC999' fill-opacity='.55'/%3E%3Cpath d='M0 98 C300 64 520 128 820 96 S1260 70 1440 92 V140 H0z' fill='%23FBAE72' fill-opacity='.6'/%3E%3Cpath d='M0 124 C260 104 560 140 900 118 S1300 110 1440 122 V140 H0z' fill='%23F7954A' fill-opacity='.7'/%3E%3C/svg%3E") 0 100% / 200% 100% repeat-x,
    linear-gradient(180deg, #FFF1E4 0%, #FFE2C8 45%, #FFD0A6 100%) !important;
  animation: ga-flow 26s linear infinite !important; }
html body .gf-fade:not(#_):not(#__)::before { display: none; }
@keyframes ga-flow { to { background-position: -1440px 100%, 0 0; } }
@media (prefers-reduced-motion: reduce) { html body .gf-fade:not(#_):not(#__) { animation: none !important; } }
/* outlined buttons on photos: when they fill white on hover or focus, the words turn dark so they stay readable */
html body :is(.hero, .page-hero, .cta-photo) .btn--ghost:is(:hover, :focus-visible):not(#_):not(#__) { color: #2B1206 !important; border-color: #FFFFFF !important; }
html body :is(.hero, .page-hero, .cta-photo) .btn--ghost:is(:hover, :focus-visible):not(#_):not(#__) * { color: inherit !important; }
/* hero titles: Bodoni's small-size cut, so the thin strokes of each letter are sturdier */
html body :is(.hero, .page-hero) .d-hero:not(#_), html body :is(.hero, .page-hero) .d-hero *:not(#_) { font-optical-sizing: none !important; font-variation-settings: "opsz" 6 !important; }

/* Anne's qualifications: solid white chips with a soft shadow so they read over the background pattern */
html body .creds li:not(#_) { background: #FFFFFF !important; border: 1px solid #F1D9C2 !important; box-shadow: 0 6px 16px -8px rgba(120, 50, 0, .28); color: #2B1206 !important; }

/* phones held upright: page-top and home photos zoomed out. The sharp photo fills the top of the hero and a soft,
   blurred copy of the same photo fills the rest, so much more of each picture shows. */
@media (max-width: 719px) and (orientation: portrait) {
  html body :is(.ph-slide, .hero-slide):has(> img) { background: var(--ph-bg, none) center / cover no-repeat; }
  html body :is(.ph-slide, .hero-slide):has(> img)::before { content: ""; position: absolute; inset: -20px; background: inherit; filter: blur(18px) brightness(.8); z-index: 0; }
  html body :is(.ph-slide, .hero-slide) > img:not(#_):not(#__) { position: absolute; z-index: 1; top: 0; bottom: auto; height: 62% !important; width: 100%; object-fit: cover;
    -webkit-mask: linear-gradient(180deg, #000 78%, transparent); mask: linear-gradient(180deg, #000 78%, transparent); animation: none !important; transform: none !important; }
}

/* "Every girl…" lines sit on a soft deep-orange panel so they stand out from the patterned band */
html body .manifesto .manifesto-lines:not(#_) { width: fit-content; max-width: 100%; padding: clamp(18px, 2.4vw, 36px) clamp(22px, 3.4vw, 56px); border-radius: clamp(14px, 1.6vw, 24px);
  background: linear-gradient(135deg, rgba(150, 50, 0, .34), rgba(120, 36, 0, .26)); box-shadow: inset 0 0 0 1px rgba(255, 236, 214, .35), 0 24px 48px -28px rgba(90, 25, 0, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* the four photos under it: a thin deep-orange frame around each, with space between, so each picture stands apart */
html body .manifesto .strip:not(#_) { gap: clamp(22px, 2.4vw, 34px) !important; padding-block: 10px; }
html body .manifesto .strip > li.media:not(#_):not(#__) { box-shadow: 0 0 0 4px #FFF4E8, 0 0 0 7px #A93D00, 0 24px 44px -24px rgba(90, 25, 0, .6) !important; }

/* "Every girl…" lines sit on a soft deep-orange panel so they stand out from the patterned band */
html body .manifesto .manifesto-lines:not(#_) { width: fit-content; max-width: 100%; padding: clamp(18px, 2.4vw, 36px) clamp(22px, 3.4vw, 56px); border-radius: clamp(14px, 1.6vw, 24px);
  background: linear-gradient(135deg, rgba(150, 50, 0, .34), rgba(120, 36, 0, .26)); box-shadow: inset 0 0 0 1px rgba(255, 236, 214, .35), 0 24px 48px -28px rgba(90, 25, 0, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* the four photos under it: a thin deep-orange frame around each, with space between, so each picture stands apart */
html body .manifesto .strip:not(#_) { gap: clamp(22px, 2.4vw, 34px) !important; padding-block: 10px; }
html body .manifesto .strip > li.media:not(#_):not(#__) { box-shadow: 0 0 0 4px #FFF4E8, 0 0 0 7px #A93D00, 0 24px 44px -24px rgba(90, 25, 0, .6) !important; }
html body .manifesto .strip > li.media.is-in:not(#_):not(#__), html:not(.js) body .manifesto .strip > li.media:not(#_) { clip-path: inset(-16px -16px -40px -16px) !important; }

/* ---------- "Every girl…" panel (D2, 2 Oct 2026): cream card, kente strip down the left, a warm sun glow drifting
   behind the words, two Adinkra symbols turning slowly, and the lines rising into place with a soft bounce ---------- */
html body .manifesto .manifesto-lines:not(#_):not(#__) { position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(22px, 3vw, 44px) clamp(26px, 4vw, 64px) clamp(22px, 3vw, 44px) calc(clamp(26px, 4vw, 64px) + 18px) !important;
  background: url("pattern/mudcloth-light.svg") 0 0 / 420px auto repeat, #FFF6EC !important; border-radius: clamp(14px, 1.6vw, 22px);
  box-shadow: 0 26px 54px -28px rgba(120, 50, 0, .65) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body .manifesto .manifesto-lines::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; z-index: 2;
  background: url("pattern/strip-v.svg") 0 0 / 100% auto repeat-y, #2B1206; }
html body .manifesto .manifesto-lines::after { content: ""; position: absolute; z-index: 0; width: 60%; aspect-ratio: 1; top: -30%; left: -10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 102, .55), rgba(255, 176, 102, 0) 65%); animation: mf-sun 12s ease-in-out infinite alternate; pointer-events: none; }
@keyframes mf-sun { to { transform: translate(110%, 40%); } }
html body .manifesto .mf-sym { position: absolute; z-index: 1; width: clamp(40px, 5vw, 64px); aspect-ratio: 1; opacity: .55; animation: mf-turn 24s linear infinite; pointer-events: none; }
html body .manifesto .mf-sym.s1 { top: 14px; right: 18px; }
html body .manifesto .mf-sym.s2 { bottom: 14px; right: 26%; width: clamp(28px, 3.4vw, 44px); animation-direction: reverse; }
html body .manifesto .mf-sym :is(circle, path) { fill: none; stroke: #C2410C; stroke-width: 4; }
@keyframes mf-turn { to { transform: rotate(360deg); } }
/* words: dark brown with an orange edge; "educated" in deep orange with a brown edge */
html body .manifesto-lines > span:not(.sparkles):not(#_):not(#__):not(#___):not(#____) { position: relative; z-index: 3; background: none !important;
  color: #2B1206 !important; -webkit-text-fill-color: #2B1206 !important; filter: drop-shadow(0 2px 0 #F7954A) !important; }
html body .manifesto-lines > span:nth-child(3):not(.sparkles):not(#_):not(#__):not(#___):not(#____) { color: #C2410C !important; -webkit-text-fill-color: #C2410C !important; filter: drop-shadow(0 2px 0 #2B1206) !important; }
html body .manifesto-lines > .sparkles { display: none !important; }
/* lines rise in with a soft bounce when the band comes into view */
html.js body .manifesto .manifesto-lines > span:not(.sparkles):not(#_):not(#__):not(#___):not(#____) { opacity: 0; transform: translateY(.5em); transition: none !important; }
html.js body .manifesto.is-in .manifesto-lines > span:not(.sparkles):not(#_):not(#__):not(#___):not(#____) { animation: mf-rise .9s cubic-bezier(.3, 1.4, .5, 1) forwards !important; animation-delay: calc(var(--i, 0) * .4s) !important; }
@keyframes mf-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html body .manifesto :is(.manifesto-lines::after, .mf-sym) { animation: none !important; }
  html.js body .manifesto .manifesto-lines > span:not(.sparkles):not(#_):not(#__):not(#___):not(#____) { opacity: 1 !important; transform: none !important; animation: none !important; } }
/* panel words: Bodoni's small-size cut (sturdier strokes); room for the third line; phones fit the panel */
html body .manifesto .manifesto-lines:not(#_):not(#__), html body .manifesto .manifesto-lines > span:not(#_) { font-optical-sizing: none !important; font-variation-settings: "opsz" 6 !important; }
html body .manifesto .manifesto-lines:not(#_):not(#__) { padding-bottom: clamp(30px, 3.6vw, 54px) !important; line-height: 1.06 !important; }
@media (max-width: 699px) {
  html body .manifesto .manifesto-lines:not(#_):not(#__):not(#___) { font-size: 5.4vw !important; padding: 18px 16px 22px 30px !important; }
  html body .manifesto .mf-sym.s1 { width: 30px; top: 8px; right: 8px; } html body .manifesto .mf-sym.s2 { display: none; } }
html body .manifesto .manifesto-lines:not(#_):not(#__):not(#___) { height: auto !important; min-height: 0 !important; max-height: none !important; align-content: start; }

/* ---------- 2 Oct 2026, proofreading pass ---------- */
html body .amount-other[hidden] { display: none !important; }
html body .amount-other { margin: 4px 0 18px; }