/* ==========================================================================
   Dreamers Wish Foundation — main stylesheet
   Colors are drawn from the logo: teal figures, gold wordmark, rainbow leaves.
   ========================================================================== */

:root {
  --ink: #0d2a2f;
  --ink-2: #2d4b51;
  --ink-3: #5b7277;
  --paper: #fbf6ec;
  --paper-2: #f3eadb;
  --white: #ffffff;
  --line: #e2d8c6;
  --teal: #0c766e; /* darkened for WCAG AA contrast */
  --teal-dark: #0a615b;
  --teal-bright: #3cc1b4;
  --gold: #c98f1f;
  --gold-soft: #f4dfae;
  --coral: #c94029; /* darkened for WCAG AA contrast */
  --coral-dark: #bd3d27;
  --leaf-red: #e2403b;
  --leaf-orange: #f08a24;
  --leaf-green: #58a83b;
  --leaf-blue: #2f8fd6;
  --leaf-purple: #7b3fa0;

  --display: "Fraunces", Georgia, serif;
  --body: "Figtree", system-ui, -apple-system, sans-serif;

  --radius: 22px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px -24px rgba(13, 42, 47, .35);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .5em; font-variation-settings: "SOFT" 60, "WONK" 0; }
p { margin: 0 0 1.1em; }
::selection { background: var(--gold-soft); color: var(--ink); }
:focus-visible { outline: 3px solid var(--leaf-blue); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 999; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 11vw, 150px); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.section--dark { background: var(--ink); color: #e9f1ef; }
.section--cream { background: var(--paper-2); }
.section--teal { background: var(--teal-dark); color: #eaf7f5; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 30px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--leaf-red), var(--leaf-orange), var(--leaf-green), var(--leaf-blue), var(--leaf-purple)); }
.section--dark .eyebrow, .section--teal .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--teal-bright); }

.display-1 { font-size: clamp(2.8rem, 7.4vw, 6.6rem); line-height: .96; letter-spacing: -.035em; }
.display-2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.03em; }
.display-3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.lede { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.section--dark .lede, .section--teal .lede { color: #c5d8d6; }
.muted { color: var(--ink-3); }
em.hl { font-style: italic; color: #a36f0f; }
.section--dark em.hl, .hero em.hl, .page-hero em.hl { color: var(--gold-soft); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; min-height: 52px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--bg); color: var(--fg); text-decoration: none; font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--hover, var(--teal)); transform: translateY(101%); transition: transform .55s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); }
.btn svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--coral { --bg: var(--coral); --hover: var(--coral-dark); }
.btn--gold { --bg: var(--gold); --fg: #1b1405; --hover: #e3ab3a; }
.btn--light { --bg: #fff; --fg: var(--ink); --hover: var(--gold-soft); }
.btn--ghost { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 2px currentColor; --hover: rgba(255,255,255,.14); }
.btn--ghost-dark { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); --hover: var(--paper-2); }
.btn--sm { padding: 10px 18px; min-height: 42px; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--teal-dark); background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 2px; }
.link-arrow:hover { background-size: 100% 2px; }
.section--dark .link-arrow, .section--teal .link-arrow { color: var(--teal-bright); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  display: flex; align-items: center; color: #fff;
  transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.site-header.is-solid, body.no-hero .site-header { background: rgba(251, 246, 236, .92); color: var(--ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1400px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand img { width: 58px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); transition: filter .4s; }
.site-header.is-solid .brand img, body.no-hero .brand img { filter: none; }
.brand-text { font-family: var(--display); font-weight: 700; font-size: 1.12rem; line-height: 1; letter-spacing: -.01em; }
.brand-text small { display: block; font-family: var(--body); font-weight: 700; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75; margin-top: 5px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) { position: relative; padding: 10px 13px; text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 999px; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { margin-left: 10px; }
.menu-toggle { display: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; position: relative; z-index: 120; }
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .5s var(--ease), opacity .3s; }
.menu-toggle span:nth-child(1) { top: 18px; }
.menu-toggle span:nth-child(2) { top: 24px; }
.menu-toggle span:nth-child(3) { top: 30px; }
body.menu-open .menu-toggle { color: #fff; }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 110; background: var(--ink); color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: 100px var(--gutter) 40px;
  clip-path: circle(0% at calc(100% - 44px) 42px); transition: clip-path .8s var(--ease); visibility: hidden;
}
body.menu-open .mobile-menu { clip-path: circle(150% at calc(100% - 44px) 42px); visibility: visible; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu a { font-family: var(--display); font-size: clamp(2rem, 9vw, 3rem); text-decoration: none; line-height: 1.2; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s; }
.mobile-menu a:hover { color: var(--gold-soft); }
body.menu-open .mobile-menu a { opacity: 1; transform: none; }
.mobile-menu .btn { margin-top: 28px; align-self: flex-start; font-family: var(--body); font-size: 1.05rem; }
.mobile-menu-foot { margin-top: auto; font-size: .9rem; color: #9fb7b4; }

@media (max-width: 1220px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
}

/* ---------- Loader & page transition ---------- */
.loader {
  position: fixed; inset: 0; z-index: 1000; background: var(--paper);
  display: grid; place-items: center; pointer-events: none;
}
.loader svg { width: min(180px, 40vw); overflow: visible; }
.loader .leaf { transform-box: fill-box; transform-origin: 50% 100%; }
html:not(.motion) .loader, .loader.is-done { display: none; }
.curtain { position: fixed; inset: 0; z-index: 900; pointer-events: none; display: flex; }
.curtain i { flex: 1; transform: scaleY(0); transform-origin: bottom; }
.curtain i:nth-child(1) { background: var(--leaf-red); }
.curtain i:nth-child(2) { background: var(--leaf-orange); }
.curtain i:nth-child(3) { background: var(--leaf-green); }
.curtain i:nth-child(4) { background: var(--leaf-blue); }
.curtain i:nth-child(5) { background: var(--leaf-purple); }
.curtain i:nth-child(6) { background: var(--teal); }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 130; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--leaf-red), var(--leaf-orange), var(--leaf-green), var(--leaf-blue), var(--leaf-purple)); }

/* ---------- Motion setup (only hide things when JS motion is running) ---------- */
.motion [data-reveal] { opacity: 0; }
.motion [data-split] .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.motion [data-split] .word > span { display: inline-block; transform: translateY(110%); }
[data-split] .word { white-space: nowrap; }
.img-reveal { position: relative; overflow: hidden; border-radius: var(--radius); }
.img-reveal img { width: 100%; height: 100%; object-fit: cover; }
.motion .img-reveal { clip-path: inset(100% 0 0 0 round var(--radius)); }

/* ---------- Home hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden;
  padding: calc(var(--header-h) + 40px) 0 clamp(48px, 8vw, 96px); background: var(--ink);
}
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,26,30,.55) 0%, rgba(8,26,30,.2) 35%, rgba(8,26,30,.85) 100%), linear-gradient(90deg, rgba(8,26,30,.6), transparent 70%); }
#leaves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero .wrap { position: relative; z-index: 2; max-width: 1400px; }
.hero h1 { max-width: 13ch; margin-bottom: 26px; text-shadow: 0 4px 40px rgba(0,0,0,.3); }
.hero .lede { color: #dfe9e7; margin-bottom: 34px; }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.hero-badge { display: flex; align-items: center; gap: 14px; font-size: .88rem; color: #cfe0dd; }
.hero-badge b { color: #fff; }
.video-toggle { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); background: rgba(0,0,0,.2); display: grid; place-items: center; cursor: pointer; color: #fff; }
.video-toggle svg { width: 16px; height: 16px; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; z-index: 2; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.55); border-radius: 20px; transform: translateX(-50%); }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #fff; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 700px) { .scroll-cue { display: none; } }

/* ---------- Inner page hero ---------- */
.page-hero {
  position: relative; overflow: hidden; background: var(--ink); color: #fff;
  padding: calc(var(--header-h) + clamp(60px, 9vw, 120px)) 0 clamp(60px, 8vw, 110px);
}
.page-hero .bg { position: absolute; inset: -10% 0 0; }
.page-hero .bg img { width: 100%; height: 110%; object-fit: cover; opacity: .38; }
.page-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,42,47,.3), var(--ink) 96%); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 16ch; }
.page-hero .lede { color: #d3e2e0; }
.page-hero .orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .9; z-index: 0; }
.page-hero .orb--1 { width: 340px; height: 340px; right: -120px; top: -120px; border: 64px solid var(--coral); }
.page-hero .orb--2 { width: 120px; height: 120px; right: 18%; bottom: 12%; background: var(--gold); opacity: .8; }
@media (max-width: 700px) { .page-hero .orb--1 { width: 200px; height: 200px; border-width: 36px; right: -90px; top: -60px; } .page-hero .orb--2 { display: none; } }
body.no-hero main { padding-top: var(--header-h); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; background: var(--gold); color: #1b1405; padding: 18px 0; white-space: nowrap; position: relative; }
.marquee--teal { background: var(--teal); color: #fff; }
.marquee__track { display: inline-flex; gap: 0; animation: marquee 38s linear infinite; }
.marquee span { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.3rem); font-weight: 600; font-style: italic; padding-right: 1.2em; display: inline-flex; align-items: center; gap: 1.2em; }
.marquee span::after { content: ""; width: .5em; height: .5em; border-radius: 50% 0; background: currentColor; transform: rotate(45deg); opacity: .6; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Layout helpers ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 96px); align-items: center; }
.split--wide-left { grid-template-columns: 1.15fr .85fr; }
.split--top { align-items: start; }
@media (max-width: 900px) { .split, .split--wide-left { grid-template-columns: 1fr; } }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head > div { max-width: 760px; }
.section-head h2 { margin-bottom: .3em; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Photo collage ---------- */
.collage { position: relative; aspect-ratio: 1 / 1.05; }
.collage .img-reveal { position: absolute; box-shadow: var(--shadow); }
.collage .c1 { left: 0; top: 0; width: 68%; height: 72%; }
.collage .c2 { right: 0; bottom: 0; width: 56%; height: 52%; border: 8px solid var(--paper); }
.collage .sticker { position: absolute; right: 4%; top: 6%; z-index: 2; width: 128px; height: 128px; }
.sticker text { font-family: var(--body); font-weight: 800; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; fill: var(--ink); }
.sticker .spin { transform-origin: 50% 50%; animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.14); }
.stat { padding: 34px 26px 10px 0; border-right: 1px solid rgba(255,255,255,.14); }
.stat + .stat { padding-left: 26px; }
.stat:last-child { border-right: 0; }
.stat .num { font-family: var(--display); font-size: clamp(3rem, 6vw, 5.2rem); line-height: 1; letter-spacing: -.04em; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.stat .num sup { font-size: .45em; color: var(--gold-soft); vertical-align: top; margin-left: 2px; }
.stat p { margin: 14px 0 0; color: #b9cdca; font-size: .98rem; max-width: 22ch; }
.stat .bar { height: 4px; margin-top: 22px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.stat .bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: var(--c, var(--gold)); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(3) { padding-left: 0; } .stat { border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 28px; } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .stat, .stat + .stat { padding-left: 0; border-right: 0; } }
.stats--light { border-color: var(--line); }
.stats--light .stat { border-color: var(--line); }
.stats--light .num { color: var(--ink); }
.stats--light .num sup { color: var(--coral); }
.stats--light p { color: var(--ink-2); }
.stats--light .bar { background: var(--line); }

/* ---------- Horizontal "where we work" ---------- */
.places { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.places__intro { padding-top: clamp(72px, 10vw, 130px); }
.places__track { display: flex; gap: clamp(20px, 3vw, 40px); padding: 40px var(--gutter) clamp(72px, 10vw, 130px); width: max-content; position: relative; }
.place { position: relative; width: min(78vw, 560px); flex-shrink: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: #183a40; }
.place img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.place::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(6,20,23,.92)); }
.place__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(22px, 3vw, 36px); }
.place__num { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--gold-soft); }
.place h3 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin: 6px 0 10px; }
.place p { color: #cfdedc; margin-bottom: 16px; max-width: 42ch; }
.place .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(6px); }
.tag--light { background: var(--paper-2); color: var(--ink-2); }
.place--intro { background: transparent; display: flex; flex-direction: column; justify-content: center; aspect-ratio: auto; width: min(80vw, 440px); }
.place--intro::after { display: none; }
.route { position: absolute; left: 0; top: 50%; width: 100%; height: 120px; pointer-events: none; z-index: 2; overflow: visible; }
.route path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 2 10; stroke-linecap: round; }
@media (max-width: 760px) {
  .places__track { width: auto; flex-direction: column; padding-inline: var(--gutter); }
  .place { width: 100%; aspect-ratio: 4 / 4.4; }
  .place--intro { width: 100%; }
  .route { display: none; }
}

/* ---------- Cards ---------- */
.card {
  position: relative; background: var(--white); border-radius: var(--radius); padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line); transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s;
  transform-style: preserve-3d; display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow); border-color: transparent; }
.card h3 { font-size: 1.55rem; margin-bottom: .4em; }
.card p { color: var(--ink-2); font-size: 1rem; }
.card .link-arrow { margin-top: auto; }
.card-icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 22px; background: var(--c, var(--teal)); color: #fff; }
.card-icon svg { width: 28px; height: 28px; }
.card--photo { padding: 0; overflow: hidden; }
.card--photo .card-img { aspect-ratio: 16 / 11; overflow: hidden; }
.card--photo .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card--photo:hover .card-img img { transform: scale(1.07); }
.card--photo .card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.card--dark { background: #133840; border-color: rgba(255,255,255,.08); color: #eaf3f1; }
.card--dark p { color: #bcd0cd; }
.card .kicker { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--teal)); margin-bottom: 10px; }
.card--dark .kicker { color: var(--teal-bright); }
.soon { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--gold-soft); color: #5d4208; font-family: var(--body); font-size: .7rem; font-weight: 800; letter-spacing: .06em; vertical-align: middle; text-transform: uppercase; }

/* ---------- Program list with filter ---------- */
.filters { display: inline-flex; gap: 6px; padding: 6px; background: var(--paper-2); border-radius: 999px; margin-bottom: 40px; flex-wrap: wrap; }
.filters button { border: 0; background: transparent; padding: 11px 20px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: background .4s var(--ease), color .4s; }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.program-row { display: grid; grid-template-columns: 80px 1.1fr 1.4fr auto; gap: 26px; align-items: start; padding: 32px 0; border-top: 1px solid var(--line); position: relative; }
.program-row:last-child { border-bottom: 1px solid var(--line); }
.program-row .idx { font-family: var(--display); font-style: italic; color: var(--ink-3); font-size: 1.1rem; padding-top: 8px; }
.program-row h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0; }
.program-row p { margin: 6px 0 0; color: var(--ink-2); }
.program-row .where { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; }
.program-row.is-hidden { display: none; }
.program-row::before { content: ""; position: absolute; inset: 0 -20px; border-radius: 16px; background: var(--paper-2); z-index: -1; opacity: 0; transition: opacity .4s; }
.program-row:hover::before { opacity: 1; }
@media (max-width: 800px) { .program-row { grid-template-columns: 1fr; gap: 8px; } .program-row .idx { padding: 0; } }

/* ---------- Quote / scrub words ---------- */
.big-quote { font-family: var(--display); font-size: clamp(1.9rem, 4.2vw, 3.7rem); line-height: 1.14; letter-spacing: -.025em; font-weight: 500; max-width: 24ch; margin: 0; }
.big-quote .w { transition: color .2s; }
.motion .big-quote[data-scrub] .w { opacity: .18; }
.quote-by { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.quote-by img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.quote-by b { display: block; font-size: 1.05rem; }
.quote-by span { color: var(--ink-3); font-size: .92rem; }
.section--dark .quote-by span { color: #9db6b2; }

/* ---------- Gallery ---------- */
.gallery { columns: 3 280px; column-gap: 18px; }
.gallery figure { margin: 0 0 18px; break-inside: avoid; border-radius: var(--radius-sm); overflow: hidden; position: relative; }
.gallery img { width: 100%; transition: transform 1s var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; font-size: .8rem; font-weight: 700; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.6); opacity: 0; transform: translateY(8px); transition: .5s var(--ease); }
.gallery figure:hover figcaption { opacity: 1; transform: none; }
.photo-strip { display: flex; gap: 18px; width: max-content; }
.photo-strip img { width: clamp(220px, 26vw, 360px); aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-sm); }
.strip-wrap { overflow: hidden; }

/* ---------- Video (click to load) ---------- */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; cursor: pointer; box-shadow: var(--shadow); }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform 1s var(--ease), opacity .4s; }
.yt:hover img { transform: scale(1.04); opacity: .95; }
.yt .play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(224,83,58,.6); animation: pulse 2.2s infinite; border: 0; color: #fff; cursor: pointer; }
.yt .play svg { width: 30px; height: 30px; margin-left: 4px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-label { position: absolute; left: 20px; bottom: 18px; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.6); pointer-events: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224,83,58,.55); } 70% { box-shadow: 0 0 0 26px rgba(224,83,58,0); } 100% { box-shadow: 0 0 0 0 rgba(224,83,58,0); } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: calc(var(--radius) * 1.4); background: var(--coral); color: #fff; padding: clamp(40px, 7vw, 96px); isolation: isolate; }
.cta-band h2 { max-width: 16ch; }
.cta-band p { max-width: 52ch; color: #ffe7e0; font-size: 1.12rem; }
.cta-band .blob { position: absolute; z-index: -1; border-radius: 50%; }
.cta-band .blob--1 { width: 420px; height: 420px; right: -120px; top: -160px; background: var(--gold); opacity: .9; }
.cta-band .blob--2 { width: 240px; height: 240px; right: 18%; bottom: -150px; border: 44px solid var(--ink); opacity: .9; }
@media (max-width: 700px) { .cta-band .blob--1 { width: 240px; height: 240px; right: -100px; top: -120px; } .cta-band .blob--2 { display: none; } }

/* ---------- Timeline ---------- */
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline .line-fill { position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--leaf-red), var(--leaf-orange), var(--leaf-green), var(--leaf-blue), var(--leaf-purple)); transform-origin: top; transform: scaleY(0); }
html:not(.motion) .timeline .line-fill { transform: none; }
.t-item { position: relative; padding: 0 0 44px 56px; }
.t-item::before { content: ""; position: absolute; left: 3px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 3px solid var(--teal); }
.t-item .year { font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--teal-dark); line-height: 1; margin-bottom: 8px; }
.t-item h3 { font-family: var(--body); font-size: 1.15rem; font-weight: 800; letter-spacing: 0; margin-bottom: 6px; }
.t-item p { color: var(--ink-2); margin: 0; }

/* ---------- People ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.person { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: relative; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.person:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.avatar { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: #fff; background: var(--c, var(--teal)); margin-bottom: 18px; }
.person h3 { font-family: var(--body); font-size: 1.12rem; font-weight: 800; letter-spacing: 0; margin-bottom: 4px; }
.person .role { font-size: .86rem; font-weight: 700; color: var(--teal-dark); margin-bottom: 12px; display: block; }
.person p { font-size: .95rem; color: var(--ink-2); margin: 0; }
.group-title { font-family: var(--body); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 56px 0 20px; display: flex; align-items: center; gap: 14px; }
.group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Values ---------- */
.value { padding: 34px 0; border-top: 2px solid var(--ink); }
.value .word-lg { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.03em; margin-bottom: 14px; color: var(--c); }

/* ---------- Give page ---------- */
.give-grid { display: grid; grid-template-columns: 1fr minmax(320px, 520px); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 960px) { .give-grid { grid-template-columns: 1fr; } }
.give-box { background: #fff; border-radius: calc(var(--radius) * 1.2); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 34px); position: relative; }
.give-box h2 { font-size: 1.9rem; }
.freq { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); border-radius: 999px; padding: 5px; position: relative; margin-bottom: 18px; }
.freq button { position: relative; z-index: 1; border: 0; background: transparent; padding: 12px; border-radius: 999px; font-weight: 800; cursor: pointer; transition: color .4s; }
.freq button[aria-pressed="true"] { color: #fff; }
.freq .pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--ink); transition: transform .5s var(--ease); }
.freq[data-mode="monthly"] .pill { transform: translateX(100%); }
.zeffy-frame { width: 100%; min-height: 720px; border: 0; border-radius: 14px; background: var(--paper); }
.trust { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-size: .92rem; color: var(--ink-2); }
.trust li { display: flex; gap: 10px; align-items: flex-start; }
.trust svg { width: 20px; height: 20px; color: var(--teal); flex-shrink: 0; margin-top: 2px; }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.way { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px; text-decoration: none; display: block; transition: border-color .3s, transform .5s var(--ease); }
.way:hover { border-color: var(--teal); transform: translateY(-4px); }
.way b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.way span { font-size: .92rem; color: var(--ink-2); }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-weight: 700; font-size: 1.1rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border-right: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(45deg); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq details p { color: var(--ink-2); padding-right: 40px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-weight: 700; font-size: .92rem; }
.field input, .field select, .field textarea { width: 100%; padding: 15px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; transition: border-color .3s, box-shadow .3s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(15,133,124,.15); }
.field textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: .88rem; color: var(--ink-3); }

.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.contact-list li { display: flex; gap: 16px; }
.contact-list .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--teal); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.contact-list .ic svg { width: 22px; height: 22px; }
.contact-list b { display: block; }
.contact-list a { text-decoration: none; color: var(--teal-dark); font-weight: 600; word-break: break-word; }

.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; opacity: .85; transition: background .3s, color .3s, opacity .3s, transform .5s var(--ease); }
.socials a:hover { opacity: 1; transform: translateY(-3px); background: var(--gold); border-color: var(--gold); color: var(--ink); }
.socials svg { width: 18px; height: 18px; }

/* ---------- Event feature ---------- */
.event-card { display: grid; grid-template-columns: 1fr 1fr; border-radius: calc(var(--radius) * 1.2); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.event-card .img-reveal { border-radius: 0; min-height: 360px; }
.motion .event-card .img-reveal { clip-path: inset(100% 0 0 0); }
.event-card .body { padding: clamp(28px, 4vw, 52px); }
.meta { display: grid; gap: 12px; margin: 22px 0 28px; }
.meta div { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.meta svg { width: 20px; height: 20px; color: var(--coral); flex-shrink: 0; margin-top: 3px; }
.date-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 86px; height: 92px; border-radius: 16px; background: var(--coral); color: #fff; font-weight: 800; line-height: 1; margin-bottom: 20px; }
.date-chip span:first-child { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.date-chip span:nth-child(2) { font-family: var(--display); font-size: 2.4rem; margin: 4px 0 2px; }
.date-chip span:last-child { font-size: .78rem; opacity: .85; }
.lineup { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) { .event-card { grid-template-columns: 1fr; } .event-card .img-reveal { min-height: 260px; } }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); margin-bottom: 14px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.status--open { background: #dff3ee; color: var(--teal-dark); }
.status--open::before { background: var(--teal); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- Checklist ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks li::before { content: ""; width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.checks--x li::before { background: var(--line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7277' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.step { counter-increment: step; padding-top: 22px; border-top: 2px solid var(--ink); }
.step::before { content: "0" counter(step); display: block; font-family: var(--display); font-style: italic; font-size: 1.1rem; color: var(--coral); margin-bottom: 10px; }
.step h3 { font-family: var(--body); font-weight: 800; font-size: 1.15rem; letter-spacing: 0; }
.step p { color: var(--ink-2); margin: 0; font-size: .98rem; }
.section--dark .step { border-color: rgba(255,255,255,.3); }
.section--dark .step p { color: #bcd0cd; }

/* ---------- Partners ---------- */
.partners { display: flex; flex-wrap: wrap; gap: 14px; }
.partners a { padding: 16px 24px; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font-weight: 700; background: #fff; transition: border-color .3s, transform .5s var(--ease); }
.partners a:hover { border-color: var(--gold); transform: translateY(-3px); }

/* ---------- Press ---------- */
.press { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); text-decoration: none; }
.press:last-child { border-bottom: 1px solid var(--line); }
.press h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: 6px 0 0; transition: color .3s; }
.press:hover h3 { color: var(--teal-dark); }
.press .src { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.press .arrow { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; transition: background .4s, color .4s, transform .5s var(--ease); }
.press:hover .arrow { background: var(--ink); color: #fff; transform: rotate(-45deg); }
.press .arrow svg { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c8d8d5; padding: clamp(64px, 9vw, 110px) 0 32px; position: relative; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand img { width: 150px; background: #fff; border-radius: 18px; padding: 10px 14px; margin-bottom: 20px; }
.footer-brand p { max-width: 36ch; font-size: .95rem; }
.site-footer h4 { font-family: var(--body); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer ul a { text-decoration: none; font-size: .96rem; transition: color .3s; }
.site-footer ul a:hover { color: var(--gold-soft); }
.footer-big { font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 12vw, 11rem); line-height: .9; letter-spacing: -.05em; color: rgba(255,255,255,.06); margin: 40px 0 10px; white-space: nowrap; user-select: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .85rem; color: #8ea8a4; }
.footer-bottom a { color: inherit; }

/* ---------- Misc ---------- */
.divider-leaves { display: flex; justify-content: center; gap: 10px; margin: 0 auto 26px; }
.divider-leaves i { width: 14px; height: 14px; border-radius: 50% 0; transform: rotate(45deg); }
.center { text-align: center; }
.center .lede, .center h2 { margin-inline: auto; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 16px; } .mt-2 { margin-top: 32px; } .mt-3 { margin-top: 56px; }
.mb-0 { margin-bottom: 0; }
.notice { border-left: 4px solid var(--gold); background: #fff8e6; padding: 18px 22px; border-radius: 0 12px 12px 0; color: var(--ink-2); font-size: .96rem; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee__track { animation: none; }
}
.link-arrow svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .5s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
@media (min-width: 761px) { .places { min-height: 100vh; display: flex; align-items: center; } .places__track { padding-block: 40px; } }
/* Keep the header (and its close button) above the open mobile menu */
body.menu-open .site-header { z-index: 115; background: transparent !important; box-shadow: none !important; color: #fff !important; backdrop-filter: none; transform: none; }
body.menu-open .site-header .brand img { filter: none; }

/* ---------- Shop ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.product { display: flex; flex-direction: column; gap: 12px; }
.product[hidden] { display: none; }
.product__art { position: relative; aspect-ratio: 1; border: 0; border-radius: var(--radius); background: var(--bg, var(--paper-2)); cursor: pointer; padding: 8%; overflow: hidden; transition: box-shadow .5s var(--ease); }
.product__art svg { width: 100%; height: 100%; transition: transform .8s var(--ease); }
.product__art:hover svg { transform: scale(1.08) rotate(-3deg); }
.product__art:hover { box-shadow: var(--shadow); }
.product__tag { position: absolute; left: 14px; top: 14px; padding: 5px 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.product__tag--static { position: static; display: inline-block; margin-bottom: 12px; }
.product__body h3 { font-family: var(--body); font-size: 1.02rem; font-weight: 800; letter-spacing: 0; margin: 0 0 2px; }
.product__price { margin: 0; color: var(--ink-2); font-weight: 600; }
.product__cta { align-self: flex-start; }
.feature-drop { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.feature-drop__art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-drop__art button { aspect-ratio: 3/4; border: 0; border-radius: var(--radius); background: rgba(255,255,255,.07); padding: 10%; cursor: pointer; transition: transform .6s var(--ease), background .4s; }
.feature-drop__art button:nth-child(2) { transform: translateY(28px); }
.feature-drop__art button:hover { background: rgba(255,255,255,.14); transform: translateY(-6px); }
.feature-drop__art svg { width: 100%; height: 100%; }
@media (max-width: 860px) { .feature-drop { grid-template-columns: 1fr; } }
.promise-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.promise { display: flex; gap: 14px; align-items: flex-start; }
.promise .card-icon { width: 46px; height: 46px; border-radius: 14px; margin: 0; flex-shrink: 0; }
.promise .card-icon svg { width: 22px; height: 22px; }
.promise b { display: block; }
.promise span { font-size: .92rem; color: var(--ink-2); }
@media (max-width: 900px) { .promise-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .promise-row { grid-template-columns: 1fr; } }
.pd-dialog { border: 0; padding: 0; background: transparent; max-width: min(980px, calc(100vw - 32px)); width: 100%; max-height: calc(100vh - 32px); }
.pd-dialog::backdrop { background: rgba(8, 26, 30, .7); backdrop-filter: blur(6px); }
.pd { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-radius: calc(var(--radius) * 1.2); overflow: hidden; max-height: calc(100vh - 32px); }
.pd__art { background: var(--paper-2); display: grid; place-items: center; padding: 8%; }
.pd__art svg { width: 100%; max-width: 380px; }
.pd__info { padding: clamp(24px, 4vw, 44px); overflow-y: auto; }
.pd__info h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 6px; }
.pd__price { font-size: 1.3rem; font-weight: 800; color: var(--coral); }
.pd__close { position: absolute; right: 14px; top: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; font-size: 1.4rem; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.pd__impact { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #dff3ee; color: var(--teal-dark); font-weight: 600; font-size: .95rem; margin: 18px 0; }
.pd__impact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--coral); }
.pd__buy { width: 100%; }
.opt { border: 0; padding: 0; margin: 16px 0 0; }
.opt legend { font-weight: 800; font-size: .88rem; margin-bottom: 8px; }
.opt div { display: flex; flex-wrap: wrap; gap: 8px; }
.opt label { cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: inline-block; min-width: 46px; text-align: center; padding: 9px 13px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: .9rem; transition: .25s; }
.opt input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.opt input:focus-visible + span { outline: 3px solid var(--leaf-blue); outline-offset: 2px; }
@media (max-width: 760px) { .pd { grid-template-columns: 1fr; overflow-y: auto; } .pd__art { padding: 10% 22%; } .pd__info { overflow: visible; } }

/* ---------- Rating seals ---------- */
.seals { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.seal { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: #fff; border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .3s, transform .5s var(--ease); }
.seal:hover { border-color: var(--gold); transform: translateY(-3px); }
.seal img { width: 64px; height: 64px; object-fit: contain; }
.seal b { display: block; font-size: .95rem; }
.seal span { font-size: .8rem; color: var(--ink-3); }
.site-footer .seal { background: rgba(255,255,255,.95); border-color: transparent; }

/* ---------- Application forms ---------- */
.form-card { background: #fff; border-radius: calc(var(--radius) * 1.2); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 48px); }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; }
.form legend { font-family: var(--display); font-size: 1.5rem; font-weight: 600; margin-bottom: 4px; padding: 0; }
.form .section-break { height: 1px; background: var(--line); margin: 10px 0; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-grid label { position: relative; cursor: pointer; font-weight: 600; }
.choice-grid input { position: absolute; opacity: 0; }
.choice-grid span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: .94rem; transition: .25s; }
.choice-grid input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.choice-grid input:focus-visible + span { outline: 3px solid var(--leaf-blue); outline-offset: 2px; }
.field .hint { font-size: .85rem; color: var(--ink-3); font-weight: 400; }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; }
.check-line input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--teal); flex-shrink: 0; }
.form-success { display: none; text-align: center; padding: 30px 10px; }
.form-success .card-icon { margin: 0 auto 18px; width: 70px; height: 70px; border-radius: 50%; }
form.is-sent { display: none; }
form.is-sent + .form-success { display: block; }
.hp { position: absolute; left: -9999px; }

/* ---------- Tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.tier::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c, var(--teal)); }
.tier h3 { font-size: 1.5rem; margin: 6px 0 4px; }
.tier .amt { font-family: var(--display); font-size: 2.2rem; font-weight: 600; line-height: 1; margin: 8px 0 16px; }
.tier ul { margin-bottom: 22px; }
.tier .btn { margin-top: auto; }
.tier--featured { background: var(--ink); color: #fff; border-color: var(--ink); }
.tier--featured .checks li { color: #d3e2e0; }

/* ---------- Legal ---------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.6rem; margin-top: 2em; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 1.2em; }
/* Product photos */
.product__art--photo { padding: 0; }
.product__art img, .feature-drop__art img, .pd__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.product__art--photo:hover img { transform: scale(1.06); }
.feature-drop__art button:has(img) { padding: 0; overflow: hidden; }
.pd__art--photo { padding: 0; }
.pd__art--photo img { max-width: none; aspect-ratio: 1; }

/* ---------- Partners ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.logo-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 22px 18px 16px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); text-decoration: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
a.logo-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.logo-tile img { max-width: 100%; max-height: 78px; object-fit: contain; filter: saturate(.95); }
.logo-tile span { font-size: .78rem; font-weight: 700; color: var(--ink-3); text-align: center; line-height: 1.3; }
.logo-tile--dark { background: var(--ink); border-color: var(--ink); }
.logo-tile--dark span { color: #b9cdca; }
.logo-tile--name b { font-family: var(--display); font-size: 1.25rem; line-height: 1.15; text-align: center; color: var(--ink); }
.logo-tile .badge { position: absolute; top: 10px; left: 10px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--gold-soft); color: #5d4208; }
.logo-tile .badge--current { background: #dff3ee; color: var(--teal-dark); }
.sponsor-feature { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .sponsor-feature { grid-template-columns: 1fr; } }
.sponsor-feature .logo-tile { min-height: 190px; }
.sponsor-feature .logo-tile img { max-height: 110px; }
.logo-marquee { overflow: hidden; padding: 30px 0; background: #fff; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee__track { display: flex; align-items: center; gap: 56px; width: max-content; animation: marquee 50s linear infinite; }
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee img { height: 58px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) opacity(.7); transition: filter .4s; }
.logo-marquee img:hover { filter: none; }
.logo-marquee .dark-chip { background: var(--ink); padding: 8px 12px; border-radius: 10px; }
.logo-marquee b { font-family: var(--display); font-size: 1.2rem; color: var(--ink-3); white-space: nowrap; }

/* ---------- Intro: real logo with leaf burst ---------- */
.loader__stage { position: relative; width: min(440px, 78vw); display: flex; flex-direction: column; align-items: center; }
.loader__burst { position: absolute; left: 50%; top: 38%; width: 0; height: 0; }
.loader__burst i { position: absolute; left: -7px; top: -13px; width: 14px; height: 26px; border-radius: 0 100% 0 100%; background: var(--c); }
.loader__ring { position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%; border: 4px solid var(--teal-bright); }
.loader__mark { position: relative; width: 62%; height: auto; }
.loader__wordwrap { overflow: hidden; width: 100%; margin-top: 4px; }
.loader__word { width: 100%; height: auto; display: block; }

/* ---------- Dropdown menu (desktop) ---------- */
.nav { gap: 2px; }
.nav-item { position: relative; }
.nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; background: transparent; font-weight: 600; font-size: .96rem; border-radius: 999px; cursor: pointer; color: inherit; transition: background .3s; }
.nav-btn .chev { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.nav-item:hover .nav-btn, .nav-item.is-open .nav-btn { background: rgba(127,127,127,.14); }
.nav-item:hover .chev, .nav-item.is-open .chev { transform: rotate(180deg); }
.nav-item[data-current] .nav-btn { box-shadow: inset 0 -2px 0 currentColor; border-radius: 0; }
.dropdown { position: absolute; top: 100%; left: 50%; padding-top: 12px; transform: translate(-50%, 10px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility .3s; z-index: 5; }
.nav-item:hover .dropdown, .nav-item.is-open .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown__inner { min-width: 300px; background: #fff; color: var(--ink); border-radius: 18px; padding: 10px; box-shadow: 0 30px 60px -20px rgba(13,42,47,.45), 0 0 0 1px rgba(13,42,47,.06); display: grid; gap: 2px; }
.nav-item:nth-child(2) .dropdown__inner { grid-template-columns: 1fr 1fr; min-width: 560px; }
.dropdown a { display: block; padding: 11px 14px; border-radius: 12px; text-decoration: none; transition: background .25s; }
.dropdown a:hover, .dropdown a:focus-visible { background: var(--paper-2); }
.dropdown a b { display: block; font-size: .96rem; }
.dropdown a span { display: block; font-size: .82rem; color: var(--ink-3); line-height: 1.35; margin-top: 2px; }

/* ---------- Accordion menu (mobile) ---------- */
.mobile-menu { overflow-y: auto; justify-content: flex-start; }
.mobile-menu nav { gap: 0; }
.mobile-menu .m-top { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); background: none; color: #fff; font-family: var(--display); font-size: clamp(1.7rem, 7vw, 2.4rem); text-decoration: none; text-align: left; cursor: pointer; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s; }
body.menu-open .mobile-menu .m-top { opacity: 1; transform: none; }
.mobile-menu .m-top .chev { width: 26px; height: 26px; color: var(--gold-soft); transition: transform .4s var(--ease); }
.mobile-menu .m-group.is-open .chev { transform: rotate(180deg); }
.mobile-menu .m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.mobile-menu .m-sub > * { overflow: hidden; }
.mobile-menu .m-group.is-open .m-sub { grid-template-rows: 1fr; }
.mobile-menu .m-sub { display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.mobile-menu .m-group.is-open .m-sub { max-height: 600px; }
.mobile-menu .m-sub a { font-family: var(--body); font-size: 1.3rem; font-weight: 600; color: #cfe0dd; padding: 10px 0 10px 16px; opacity: 1; transform: none; text-decoration: none; }
.mobile-menu .m-sub a:first-child { padding-top: 14px; }
.mobile-menu .m-sub a:last-child { padding-bottom: 18px; }
.mobile-menu .m-sub a:hover { color: var(--gold-soft); }
.mobile-menu > .btn { flex-shrink: 0; }

/* ---------- Program pages ---------- */
.give-ladder { display: grid; gap: 14px; }
.give-step { display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; align-items: center; padding: 22px 24px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .3s, transform .5s var(--ease), box-shadow .5s var(--ease); }
.give-step:hover { border-color: var(--coral); transform: translateX(6px); box-shadow: var(--shadow); }
.give-step .amt { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; color: var(--coral); line-height: 1; }
.give-step .what { font-size: 1.02rem; color: var(--ink-2); }
.give-step .go { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .88rem; color: var(--teal-dark); white-space: nowrap; }
.give-step .go svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .give-step { grid-template-columns: 1fr; gap: 8px; } }
.places-list { display: grid; gap: 14px; }
.place-note { display: grid; gap: 6px; }
.place-note .tag { justify-self: start; }
.place-note p { margin: 0; color: var(--ink-2); font-size: .96rem; }
.pillar-links { display: flex; flex-wrap: wrap; gap: 12px; }
.pillar-link { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); text-decoration: none; font-weight: 700; transition: border-color .3s, transform .5s var(--ease); }
.pillar-link:hover { border-color: var(--c); transform: translateY(-3px); }
.pillar-link .card-icon { width: 38px; height: 38px; border-radius: 50%; margin: 0; background: var(--c); }
.pillar-link .card-icon svg { width: 18px; height: 18px; }
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.pillar-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding: 26px; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.pillar-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.pillar-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,26,30,.05) 20%, rgba(8,26,30,.9)); }
.pillar-card:hover img { transform: scale(1.07); }
.pillar-card .card-icon { background: var(--c); margin-bottom: 14px; }
.pillar-card h3 { font-size: 1.7rem; margin-bottom: 6px; }
.pillar-card p { margin: 0 0 12px; color: #d6e4e2; font-size: .96rem; }
.pillar-card .link-arrow { color: var(--gold-soft); }

/* ---------- Map ---------- */
.map-shell { display: grid; grid-template-columns: 320px 1fr; gap: 0; border-radius: calc(var(--radius) * 1.2); overflow: hidden; box-shadow: var(--shadow); background: #fff; }
@media (max-width: 860px) { .map-shell { grid-template-columns: 1fr; } }
#dwf-map { min-height: 560px; height: 100%; background: #e8e4da; z-index: 0; }
@media (max-width: 860px) { #dwf-map { min-height: 420px; } }
.map-side { padding: 24px; display: flex; flex-direction: column; gap: 14px; max-height: 620px; overflow-y: auto; }
.map-side .filters { margin: 0; }
.map-side .filters button { padding: 9px 14px; font-size: .9rem; }
.map-place { text-align: left; border: 1.5px solid var(--line); background: var(--paper); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .3s, transform .4s var(--ease); }
.map-place:hover { border-color: var(--c); transform: translateX(4px); }
.map-place b { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.map-place b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.map-place span { display: block; font-size: .84rem; color: var(--ink-3); margin-top: 2px; }
.dwf-pin span { display: block; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); border: 3px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35); animation: pinDrop .8s var(--ease) both; }
@keyframes pinDrop { from { transform: translateY(-30px) rotate(-45deg); opacity: 0; } to { transform: rotate(-45deg); opacity: 1; } }
.dwf-pop { display: grid; gap: 10px; font-family: var(--body); }
.dwf-pop img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; }
.dwf-pop small { display: block; color: var(--ink-3); font-size: .74rem; font-weight: 700; }
.dwf-pop b { display: block; font-size: 1.02rem; margin: 2px 0 4px; }
.dwf-pop p { margin: 0 0 8px; font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.dwf-pop a { font-weight: 800; color: var(--teal-dark); text-decoration: none; }
.leaflet-popup-content-wrapper { border-radius: 16px; }
.leaflet-container { font-family: var(--body); }

/* Sticky side headings: only on wide screens, never over content on phones/tablets */
.sticky-col { position: static; }
@media (min-width: 901px) { .sticky-col { position: sticky; top: 120px; align-self: start; } }

/* ---------- Impact calculator ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; border-radius: calc(var(--radius) * 1.2); box-shadow: var(--shadow); overflow: hidden; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }
.calc__controls { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.calc__controls .filters { margin: 0; align-self: flex-start; }
.calc__label { font-weight: 800; font-size: .9rem; }
.calc__input { display: flex; align-items: center; gap: 6px; border: 2px solid var(--line); border-radius: 16px; padding: 6px 18px; transition: border-color .3s; }
.calc__input:focus-within { border-color: var(--teal); }
.calc__input span { font-family: var(--display); font-size: 2.4rem; color: var(--ink-3); }
.calc__input input { border: 0; outline: 0; width: 100%; font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 600; color: var(--ink); background: transparent; -moz-appearance: textfield; }
.calc__input input::-webkit-outer-spin-button, .calc__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc__chips button { border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; transition: .25s; }
.calc__chips button:hover { border-color: var(--teal); background: #fff; }
.calc__out { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.35; margin: 6px 0 0; color: var(--ink); min-height: 3.5em; }
.calc__out b { color: var(--coral); font-weight: 600; }
.calc__ladder { background: var(--ink); color: #e9f1ef; padding: clamp(24px, 4vw, 44px); }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ladder li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline; padding: 11px 12px; border-radius: 12px; color: #93aeaa; transition: background .4s, color .4s; }
.ladder li .amt { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: #6f8c88; transition: color .4s; }
.ladder li.on { color: #fff; background: rgba(255,255,255,.06); }
.ladder li.on .amt { color: var(--gold-soft); }

/* ---------- Project table ---------- */
.project-table { display: grid; gap: 2px; }
.pt-row { display: grid; grid-template-columns: 170px 1fr auto; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.pt-amt { font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: var(--gold-soft); }
.pt-row b { display: block; color: #fff; font-size: 1.08rem; }
.pt-row span:not(.pt-amt) { display: block; color: #a9c1bd; font-size: .92rem; }
.pt-row .link-arrow { font-size: .9rem; }
@media (max-width: 700px) { .pt-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Tier impact + recognition ---------- */
.tier-impact { font-size: 1.02rem; color: var(--ink-2); margin: 0 0 14px; }
.tier--featured .tier-impact { color: #d3e2e0; }
.tier-perks { margin: 0 0 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.tier--featured .tier-perks { border-color: rgba(255,255,255,.15); }
.tier-perks summary { cursor: pointer; font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); list-style: none; }
.tier--featured .tier-perks summary { color: #9fb7b4; }
.tier-perks summary::-webkit-details-marker { display: none; }
.tier-perks summary::after { content: " +"; }
.tier-perks[open] summary::after { content: " −"; }
.tier-perks .checks { margin-top: 12px; font-size: .92rem; }
.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .results { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .results { grid-template-columns: 1fr; } }
.result { padding: 22px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.result .big { display: block; font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; line-height: 1; color: var(--gold-soft); margin-bottom: 10px; }
.result p { margin: 0; color: #c5d8d6; font-size: .95rem; }
.results--light .result { background: #fff; border-color: var(--line); }
.results--light .result .big { color: var(--coral); }
.results--light .result p { color: var(--ink-2); }
/* If scripts stall, CSS still clears the page-transition curtain */
.curtain { animation: curtainSafety 0s linear 2.2s forwards; }
@keyframes curtainSafety { to { visibility: hidden; } }

/* ---------- Tribute ---------- */
.tribute-photo { margin: 0; }
.tribute-photo .img-reveal { aspect-ratio: 1146 / 842; box-shadow: var(--shadow); }
.tribute-photo figcaption { margin-top: 14px; font-size: .9rem; color: var(--ink-3); font-style: italic; }
.memorial { text-align: center; overflow: hidden; }
.memorial__inner { max-width: 880px; display: flex; flex-direction: column; align-items: center; }
.memorial h2 { margin-bottom: 6px; }
.memorial__dates { font-family: var(--display); font-style: italic; font-size: 1.3rem; color: var(--gold-soft); margin-bottom: 30px; }
.memorial__quote { margin: 0 auto 24px; font-size: clamp(1.5rem, 3vw, 2.4rem); color: #fff; max-width: 26ch; }
.memorial .lede { margin-inline: auto; }
.memorial__leaves { display: flex; gap: 10px; margin-bottom: 22px; }
.memorial__leaves i { width: 16px; height: 16px; border-radius: 50% 0; transform: rotate(45deg); animation: leafGlow 3s ease-in-out infinite; }
.memorial__leaves i:nth-child(1) { background: var(--leaf-red); }
.memorial__leaves i:nth-child(2) { background: var(--leaf-orange); animation-delay: .3s; }
.memorial__leaves i:nth-child(3) { background: var(--leaf-green); animation-delay: .6s; }
.memorial__leaves i:nth-child(4) { background: var(--leaf-blue); animation-delay: .9s; }
.memorial__leaves i:nth-child(5) { background: var(--leaf-purple); animation-delay: 1.2s; }
@keyframes leafGlow { 0%, 100% { opacity: .5; transform: rotate(45deg) scale(.85); } 50% { opacity: 1; transform: rotate(45deg) scale(1.1); } }

/* ---------- Campaign block ---------- */
.camp { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-radius: calc(var(--radius) * 1.2); overflow: hidden; background: #fff; box-shadow: var(--shadow); border-top: 6px solid var(--c); }
@media (max-width: 860px) { .camp { grid-template-columns: 1fr; } }
.camp__main { padding: clamp(24px, 4vw, 44px); }
.camp__main h2 { margin-bottom: 14px; }
.camp__bar { height: 14px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin: 6px 0 10px; }
.camp__bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--c), var(--coral)); border-radius: inherit; }
.camp__num { font-size: 1.05rem; color: var(--ink-2); margin: 0; }
.camp__num b { font-family: var(--display); font-size: 1.6rem; color: var(--ink); }
.camp__parts { background: var(--paper-2); padding: clamp(24px, 4vw, 44px); }
.camp__label { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.camp__parts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.camp__parts li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: .96rem; color: var(--ink-2); }
.camp__parts li b { font-family: var(--display); color: var(--ink); white-space: nowrap; }

/* Never allow sideways scrolling on phones, even while elements slide in */
html, body { overflow-x: clip; }
main { overflow-x: clip; }
/* Wide group photo in the home story collage */
.collage .c2--wide { width: 70%; height: 50%; right: -2%; }
@media (max-width: 900px) { .collage .c2--wide { width: 76%; height: 54%; right: 0; } }

/* ---------- Trips: bento photo collage ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; }
.bento figure { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; }
.bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bento figure:hover img { transform: scale(1.07); }
.bento figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; font-size: .84rem; font-weight: 700; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.65)); }
.bento .b-lg { grid-column: span 2; grid-row: span 2; }
.bento .b-tall { grid-row: span 2; }
.bento .b-wide { grid-column: span 2; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } }
@media (max-width: 480px) { .bento { grid-auto-rows: 150px; } }
/* Leader photos */
.person { padding: 0 0 24px; }
.person-photo { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; margin-bottom: 18px; display: block; transition: transform 1s var(--ease); }
.person:hover .person-photo { transform: scale(1.04); }
.person h3, .person .role, .person p { padding-inline: 22px; }
.person .role { display: block; }
/* Trip sign-up: step 2 */
.form-next { margin-top: 18px; padding: 24px; border-radius: var(--radius-sm); background: var(--paper-2); border-left: 5px solid var(--coral); }
.form-next[hidden], .form-next [hidden] { display: none; }
.form-next .btn { margin-top: 6px; }
/* Leader LinkedIn icon */
.person { position: relative; }
.person-in { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0a66c2; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .4s var(--ease); }
.person-in:hover { transform: scale(1.12); }
.person-in svg { width: 17px; height: 17px; }
.nav-link { text-decoration: none; }

/* ---------- Podcast reels ---------- */
.reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.reel { margin: 0; }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius); background: #000; box-shadow: var(--shadow); display: block; }
.reel figcaption { padding: 12px 4px 0; }
.reel figcaption b { display: block; font-size: 1.02rem; }
.reel figcaption span { font-size: .88rem; color: var(--ink-3); }
.title-link { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.title-link:hover { background-size: 100% 2px; color: var(--teal-dark); }
.title-link svg { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.title-link:hover svg { transform: translateX(4px); }

/* Home "Three places" — everything visible at once, no sideways scroll */
.places--grid { display: block; min-height: 0; padding: clamp(72px, 10vw, 130px) 0; }
.places--grid .places__track { width: auto; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 20px; align-items: stretch; }
.places--grid .route { display: none; }
.places--grid .place { width: auto; aspect-ratio: auto; min-height: 520px; }
.places--grid .place--intro { min-height: 0; padding-right: 10px; }
.places--grid .place img { transform: none; transition: transform 1.2s var(--ease); }
.places--grid .place:hover img { transform: scale(1.06); }
.places--grid .place h3 { font-size: clamp(2rem, 3vw, 2.8rem); }
@media (max-width: 1100px) { .places--grid .places__track { grid-template-columns: 1fr 1fr; } .places--grid .place--intro { grid-column: 1 / -1; } }
@media (max-width: 640px) { .places--grid .places__track { grid-template-columns: 1fr; } .places--grid .place { min-height: 440px; } }

/* ---------- Before / after slider ---------- */
.ba { position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--radius) * 1.2); overflow: hidden; box-shadow: var(--shadow); --pos: 50%; user-select: none; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.35); pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: var(--pos); width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); pointer-events: none; color: var(--ink); }
.ba__knob svg { width: 26px; height: 26px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__range:focus-visible ~ .ba__knob { outline: 3px solid var(--leaf-blue); outline-offset: 3px; }
.ba__tag { position: absolute; top: 16px; padding: 6px 14px; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(13,42,47,.75); color: #fff; backdrop-filter: blur(6px); pointer-events: none; }
.ba__tag--l { left: 16px; }
.ba__tag--r { right: 16px; background: var(--coral); }

/* ---------- Video page heroes ---------- */
.page-hero--video .bg video { width: 100%; height: 110%; object-fit: cover; opacity: .5; }
.page-hero--video .bg::after { background: linear-gradient(180deg, rgba(13,42,47,.35), rgba(13,42,47,.55) 55%, var(--ink) 97%); }
.hero-caption { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: .86rem; font-weight: 700; color: #cfe3e0; }
.hero-caption svg { width: 18px; height: 18px; color: var(--teal-bright); }
.vol-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.photo-stack { position: relative; height: 440px; }
.photo-stack figure { position: absolute; margin: 0; width: 64%; background: #fff; padding: 10px 10px 34px; border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.45); transform: rotate(var(--r)); animation: floaty 7s ease-in-out infinite; animation-delay: var(--d); }
.photo-stack figure:nth-child(1) { left: 0; top: 10px; }
.photo-stack figure:nth-child(2) { right: 0; top: 90px; }
.photo-stack figure:nth-child(3) { left: 16%; top: 200px; }
.photo-stack img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; }
.photo-stack figcaption { position: absolute; left: 12px; bottom: 9px; font-size: .78rem; font-weight: 800; color: var(--ink); }
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.orient-chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; backdrop-filter: blur(8px); text-decoration: none; }
.orient-chip:hover { background: rgba(255,255,255,.18); }
.orient-chip > span:last-child { display: grid; gap: 2px; }
.orient-chip b { font-size: .95rem; }
.orient-chip .countdown { font-size: .82rem; color: var(--gold-soft); font-weight: 700; }
.orient-chip__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 0 0 rgba(77,208,190,.7); animation: pulse 2s infinite; flex: none; }
.countdown-big { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.countdown-big .cd { background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 18px; min-width: 86px; text-align: center; }
.countdown-big .cd b { display: block; font-family: var(--display); font-size: 2.2rem; line-height: 1; }
.countdown-big .cd span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #bcd0cd; }
@media (max-width: 900px) { .vol-hero { grid-template-columns: 1fr; } .photo-stack { height: 300px; max-width: 420px; } }

/* ---------- Clickable tiles that open the form below ---------- */
.card--link, .tier--link { text-decoration: none; color: inherit; cursor: pointer; display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.card--link:hover, .tier--link:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card--link .link-arrow { margin-top: auto; padding-top: 14px; }
.card--link:focus-visible, .tier--link:focus-visible { outline: 3px solid var(--leaf-blue); outline-offset: 4px; }
.tier--link .btn { margin-top: auto; align-self: flex-start; }
.is-picked { animation: picked 1.2s var(--ease); }
@keyframes picked { 0% { box-shadow: 0 0 0 0 rgba(42,157,143,.6); } 100% { box-shadow: 0 0 0 18px rgba(42,157,143,0); } }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.role-chip { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 20px 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: #fff; cursor: pointer; font: inherit; color: var(--ink); transition: .35s var(--ease); position: relative; }
.role-chip svg { width: 28px; height: 28px; color: var(--c); }
.role-chip b { font-size: 1.02rem; }
.role-chip span { font-size: .82rem; color: var(--ink-3); }
.role-chip:hover { transform: translateY(-4px); border-color: var(--c); }
.role-chip[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.role-chip[aria-pressed="true"] svg, .role-chip[aria-pressed="true"] span { color: #fff; }
.role-chip[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 12px; right: 14px; font-weight: 800; }
.choice-grid--wide span { font-size: .88rem; }
.mb-2 { margin-bottom: 28px; }

/* ---------- Before / after cases ---------- */
.ba-cases { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px; }
.ba-case__text { padding: 18px 4px 0; }
.ba-case__text h3 { font-size: 1.5rem; margin: 4px 0 6px; }
.ba__tag--r { right: 16px; background: var(--coral); }
@media (max-width: 900px) { .ba-cases { grid-template-columns: 1fr; } }
.ba-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; background: var(--paper-2); border-radius: var(--radius); padding: clamp(18px, 3vw, 30px); }
.ba-teaser img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-sm); }
@media (max-width: 900px) { .ba-teaser { grid-template-columns: 1fr; } }

/* ---------- Films ---------- */
.film { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000; }
.film video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.yt--tall { aspect-ratio: 4 / 4; }

/* ---------- Gift catalog ---------- */
.give-strip { display: grid; grid-template-columns: 1fr auto; gap: 14px 30px; align-items: center; padding: 26px 30px; border-radius: var(--radius); background: #dff3ee; }
.give-strip b { display: block; font-size: 1.2rem; }
.give-strip > div > span { color: var(--ink-2); }
.give-strip p { grid-column: 1 / -1; margin: 0; font-size: .9rem; }
@media (max-width: 800px) { .give-strip { grid-template-columns: 1fr; } }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.gift { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s; }
.gift:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.gift.is-hidden { display: none; }
.gift__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gift__amt { font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--coral); line-height: 1; }
.gift h3 { font-size: 1.25rem; margin: 6px 0 0; }
.gift__reach { font-size: .84rem; font-weight: 700; color: var(--teal-dark); margin: 0; }
.gift p:not(.gift__reach) { color: var(--ink-2); font-size: .95rem; margin: 0 0 8px; }
.gift .btn { margin-top: auto; align-self: flex-start; }
.verify { display: grid; gap: 12px; }
.verify a { display: grid; padding: 16px 20px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: .3s; }
.verify a:hover { border-color: var(--teal); transform: translateX(4px); }
.verify span { font-size: .88rem; color: var(--ink-3); }

/* ---------- Ask Godwill chat assistant ---------- */
.chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 14px 40px rgba(0,0,0,.3); transition: transform .4s var(--ease); }
.chat-fab:hover { transform: translateY(-3px); }
.chat-fab img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold-soft); object-fit: cover; }
.chat-fab .dot { position: absolute; left: 40px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #3ddc84; border: 2px solid var(--ink); }
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: min(390px, calc(100vw - 24px)); height: min(600px, calc(100vh - 40px)); display: flex; flex-direction: column; background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; transform-origin: bottom right; transition: transform .4s var(--ease), opacity .3s; }
.chat[hidden] { display: flex; opacity: 0; transform: scale(.85); pointer-events: none; visibility: hidden; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ink); color: #fff; }
.chat__head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-soft); }
.chat__head b { display: block; }
.chat__head span { font-size: .78rem; color: #bcd0cd; }
.chat__close { margin-left: auto; background: transparent; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.chat__close svg { width: 20px; height: 20px; }
.chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: .94rem; line-height: 1.45; }
.msg p { margin: 0 0 6px; } .msg p:last-child { margin: 0; }
.msg ul { margin: 4px 0; padding-left: 18px; }
.msg a { color: var(--teal-dark); font-weight: 700; }
.msg--bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg--me { background: var(--teal); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg--typing span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--ink-3); animation: typing 1s infinite; }
.msg--typing span:nth-child(2) { animation-delay: .15s; } .msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.chat__chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px; background: var(--paper); }
.chat__chips button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.chat__chips button:hover { border-color: var(--teal); color: var(--teal-dark); }
.chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.chat__form input { flex: 1; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 16px; font: inherit; }
.chat__form input:focus { outline: none; border-color: var(--teal); }
.chat__form button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--coral); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.chat__form button svg { width: 18px; height: 18px; }
.chat__note { font-size: .7rem; color: var(--ink-3); text-align: center; padding: 0 12px 10px; background: #fff; margin: 0; }
@media (max-width: 520px) { .chat-fab span.label { display: none; } .chat-fab { padding: 6px; } }

/* ---------- Dreamers Weekly podcast player ---------- */
.pod { display: grid; grid-template-columns: 260px 1fr; gap: 34px; align-items: center; padding: clamp(22px, 3vw, 36px); border-radius: calc(var(--radius) * 1.2); background: linear-gradient(135deg, #0d2a2f, #163f47 60%, #1d5560); color: #fff; box-shadow: var(--shadow); }
.pod__art { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: var(--gold); }
.pod__art img { width: 100%; height: 100%; object-fit: cover; }
.pod__art .bars { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; gap: 4px; align-items: flex-end; height: 40px; }
.pod__art .bars i { flex: 1; background: rgba(255,255,255,.85); border-radius: 3px; height: 20%; transition: height .15s; }
.pod.is-playing .pod__art .bars i { animation: eq 1s ease-in-out infinite; }
.pod.is-playing .pod__art .bars i:nth-child(2n) { animation-delay: .2s; } .pod.is-playing .pod__art .bars i:nth-child(3n) { animation-delay: .45s; }
@keyframes eq { 0%,100% { height: 20%; } 50% { height: 100%; } }
.pod__kicker { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-bright); }
.pod h3 { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 6px 0 8px; color: #fff; }
.pod p { color: #c5d8d6; margin: 0 0 14px; }
.pod__controls { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; }
.pod__play { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--coral); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgba(224,83,58,.45); transition: transform .3s var(--ease); }
.pod__play:hover { transform: scale(1.06); }
.pod__play svg { width: 26px; height: 26px; }
.pod__skip { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; font-size: .7rem; font-weight: 800; }
.pod__bar { flex: 1; display: grid; gap: 4px; }
.pod__bar input { width: 100%; accent-color: var(--gold); }
.pod__time { display: flex; justify-content: space-between; font-size: .78rem; color: #9fb9b6; }
.pod__hosts { display: flex; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: #c5d8d6; }
.pod__hosts span { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); }
.pod__list { margin-top: 18px; display: grid; gap: 8px; }
.pod__list button { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #fff; font: inherit; cursor: pointer; }
.pod__list button[aria-current="true"] { border-color: var(--gold-soft); background: rgba(240,180,41,.12); }
.pod__ai { font-size: .74rem; color: #9fb9b6; margin-top: 12px; }
@media (max-width: 800px) { .pod { grid-template-columns: 1fr; } .pod__art { max-width: 240px; } }
.chat-fab[hidden] { display: none; }
.pod__links { display: contents; }
.pod__links a { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--gold-soft); font-weight: 700; text-decoration: none; }
.pod__links a:hover { background: rgba(255,255,255,.16); }
.pod__kicker svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.pod__tr { margin-top: 14px; }
.pod__tr summary { cursor: pointer; font-weight: 700; color: var(--gold-soft); }
.pod__transcript { max-height: 260px; overflow-y: auto; margin-top: 10px; padding-right: 8px; }
.pod__transcript p { margin: 0 0 8px; font-size: .92rem; }
.pod__transcript b { color: #fff; }
.pod-teaser { display: flex; align-items: center; gap: 20px; padding: 20px 24px; border-radius: var(--radius); background: var(--ink); color: #fff; text-decoration: none; }
.pod-teaser:hover { transform: translateY(-3px); }
.pod-teaser .pod__play { width: 54px; height: 54px; flex: none; }
.pod-teaser b { display: block; font-size: 1.1rem; }
.pod-teaser span { color: #c5d8d6; font-size: .92rem; }
.instructors { display: grid; gap: 12px; }
.instructor { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); }
.instructor img, .instructor .card-icon { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; margin: 0; }
.instructor span:last-child { display: grid; font-size: .86rem; color: var(--ink-3); }
.instructor b { color: var(--ink); font-size: 1rem; }
.instructor svg { width: 14px; height: 14px; vertical-align: -2px; }
a.instructor:hover { border-color: var(--teal); }
.bento--small { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
.photo { margin: 0; border-radius: var(--radius-sm); overflow: hidden; } .photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.hero-news { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(8px); }
.hero-news span { padding: 3px 10px; border-radius: 999px; background: var(--coral); font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-news svg { width: 15px; height: 15px; }
.hero-news:hover { background: rgba(255,255,255,.2); }
.spotlights { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.spotlight { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 280px; padding: 22px; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.spotlight img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.spotlight::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,42,47,.05) 20%, rgba(13,42,47,.9)); }
.spotlight:hover img { transform: scale(1.06); }
.spotlight .tag { align-self: flex-start; background: var(--gold); color: #1b1405; }
.spotlight b { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; }
.spotlight > span:last-child { color: #d3e2e0; font-size: .92rem; }
.spotlight svg { width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 900px) { .spotlights { grid-template-columns: 1fr; } }
.builder__amt { font-family: var(--display); font-size: clamp(3.2rem, 7vw, 5.4rem); font-weight: 600; color: var(--gold-soft); line-height: 1; margin: 22px 0 14px; }
.builder__range { width: 100%; height: 10px; border-radius: 999px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, var(--coral) var(--fill, 4%), rgba(255,255,255,.18) var(--fill, 4%)); cursor: pointer; }
.builder__range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 4px solid var(--coral); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.builder__range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--coral); }
.builder__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.builder__presets button { padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.builder__presets button:hover { border-color: var(--gold-soft); color: var(--gold-soft); }
.builder__out { display: grid; gap: 4px; align-content: center; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); min-height: 360px; }
.builder__row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); animation: rowIn .4s var(--ease); }
.builder__row b { font-family: var(--display); font-size: 1.6rem; color: #fff; margin-right: 4px; }
.builder__row span:last-child { color: #d3e2e0; }
.builder__icon { font-size: 1.7rem; }
.builder__or { margin: 2px 0; text-align: center; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9fb9b6; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.img-reveal { position: relative; } .illus { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(13,42,47,.75); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.person-initials { display: grid; place-items: center; aspect-ratio: 1; background: linear-gradient(135deg, var(--teal), var(--ink)); color: #fff; font-family: var(--display); font-size: 3rem; font-weight: 600; }
.mural-steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; counter-reset: step; }
.mural-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding-bottom: 18px; }
.mural-step img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; margin-bottom: 14px; }
.mural-step h3, .mural-step p { padding: 0 16px; margin: 0 0 6px; }
.mural-step p { color: var(--ink-2); font-size: .92rem; }
.mural-step .n { position: absolute; top: 10px; left: 10px; width: 38px; height: 38px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.2rem; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
@media (max-width: 1000px) { .mural-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .mural-steps { grid-template-columns: 1fr; } }
.ba-cases:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1000px) { .ba-cases:has(> :nth-child(3)) { grid-template-columns: 1fr; } }
.chat__chips[hidden] { display: none; }
.milestones { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.milestone { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; }
.milestone:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.milestone__img { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; }
.milestone__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.milestone:hover .milestone__img img { transform: scale(1.05); }
.milestone__ig { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink); }
.milestone__ig svg { width: 18px; height: 18px; }
.milestone__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; flex: 1; }
.milestone__body h3 { font-size: 1.25rem; margin: 0; }
.milestone__body p:not(.kicker) { color: var(--ink-2); font-size: .95rem; margin: 0; }
.milestone__body .link-arrow { margin-top: auto; padding-top: 8px; }
.footer-news { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 40px; align-items: center; padding: 28px 30px; margin-bottom: 50px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.footer-news h3 { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: #fff; margin: 0 0 6px; }
.footer-news p { margin: 0; color: #bcd0cd; }
.footer-news__form { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-news__form input[type=email] { flex: 1 1 220px; padding: 14px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font: inherit; }
.footer-news__form input[type=email]::placeholder { color: #9fb9b6; }
.footer-news__form input[type=email]:focus { outline: none; border-color: var(--gold-soft); }
.footer-news__form .form-note { flex-basis: 100%; }
.footer-news .form-success { padding: 10px 0; text-align: left; }
@media (max-width: 800px) { .footer-news { grid-template-columns: 1fr; } }
.lead-ways { display: grid; gap: 14px; }
.lead-way { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; }
.lead-way .card-icon { flex: none; margin: 0; }
.lead-way h3 { margin: 0 0 4px; font-size: 1.15rem; }
.lead-way p { margin: 0; color: var(--ink-2); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 14px; }
.choice { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 360px; padding: 28px; border-radius: calc(var(--radius) * 1.2); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.choice img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.choice::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,42,47,0) 25%, rgba(13,42,47,.92)); }
.choice:hover img { transform: scale(1.06); }
.choice__kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--gold); color: #1b1405; font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.choice__kicker svg { width: 16px; height: 16px; }
.choice b { font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.05; }
.choice > span:not(.choice__kicker):not(.choice__go) { color: #d3e2e0; max-width: 40ch; }
.choice__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gold-soft); margin-top: 6px; }
.choice__go svg { width: 16px; height: 16px; transition: transform .3s; }
.choice:hover .choice__go svg { transform: translateX(4px); }
@media (max-width: 760px) { .choices { grid-template-columns: 1fr; } .choice { min-height: 280px; } }
.partner-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.partner-card { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s; }
.partner-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.partner-card__logo { height: 110px; display: grid; place-items: center start; margin-bottom: 8px; }
.partner-card__logo img { max-height: 110px; max-width: 200px; object-fit: contain; }
.partner-card h3 { margin: 0; font-size: 1.3rem; }
.partner-card p:not(.kicker) { color: var(--ink-2); margin: 0; }
.partner-card .link-arrow { margin-top: auto; padding-top: 10px; }
@media (max-width: 900px) { .partner-cards { grid-template-columns: 1fr; } }
.choices:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width: 900px) { .choices:has(> :nth-child(3)) { grid-template-columns: 1fr; } }
.chapters { display: grid; gap: clamp(40px, 6vw, 80px); }
.chapter { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.chapter--flip .chapter__media { order: 2; }
.chapter__media { border-radius: calc(var(--radius) * 1.3); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3.2; background: var(--paper-2); }
.chapter__media img, .chapter__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.chapter__n { font-family: var(--display); font-size: clamp(3rem, 6vw, 5rem); font-weight: 600; line-height: 1; color: var(--gold); opacity: .55; display: block; margin-bottom: 6px; }
.chapter h3 { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1; margin: 6px 0 14px; }
.chapter .big { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--ink); }
.chapter p:not(.big):not(.kicker) { color: var(--ink-2); }
@media (max-width: 860px) { .chapter { grid-template-columns: 1fr; } .chapter--flip .chapter__media { order: 0; } }
.reel-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.reel-strip video, .yt--reel { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--radius); background: #000; box-shadow: var(--shadow); }
@media (max-width: 860px) { .reel-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.swatches { display: flex; gap: 5px; margin-top: 6px; }
.swatches i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(13,42,47,.2); display: block; }
.opt--color label span { display: inline-flex; align-items: center; gap: 8px; }
.opt--color label span i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(13,42,47,.25); display: inline-block; }
.quiz { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.2); padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow); }
.quiz__bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin-bottom: 26px; }
.quiz__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--gold), var(--coral)); transition: width .6s var(--ease); }
.quiz__q { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 18px; }
.quiz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.quiz__opt { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 20px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; font: inherit; color: var(--ink); transition: .3s var(--ease); }
.quiz__opt svg { width: 30px; height: 30px; color: var(--teal); }
.quiz__opt b { font-size: 1.08rem; }
.quiz__opt span { font-size: .86rem; color: var(--ink-3); }
.quiz__opt:hover, .quiz__opt:focus-visible { border-color: var(--teal); transform: translateY(-4px); background: #fff; box-shadow: var(--shadow); }
.quiz__step:not([hidden]), .quiz__result:not([hidden]) { animation: rowIn .5s var(--ease); }
.quiz__role { margin: 4px 0 8px; color: var(--teal-dark); }
.quiz__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-bar { background: linear-gradient(90deg, #128c4a, #25d366); color: #fff; padding: 22px 0; }
.wa-bar__inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wa-bar__icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; animation: pulse 2.4s infinite; }
.wa-bar__icon svg { width: 30px; height: 30px; }
.wa-bar__inner > div { flex: 1 1 280px; display: grid; gap: 2px; }
.wa-bar__inner b { font-family: var(--display); font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.wa-bar__inner span { color: rgba(255,255,255,.9); }
.wa-bar__btn { background: #fff; color: #0b6b37; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.wa-bar__btn svg { width: 20px; height: 20px; }
.wa-bar__btn:hover { background: #effff5; color: #075a2d; }
.grad-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.grad-card { background: #fff; border-radius: calc(var(--radius) * 1.2); overflow: hidden; box-shadow: var(--shadow); }
.grad-card__img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.grad-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.grad-card:hover .grad-card__img img { transform: scale(1.05); }
.grad-card__badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--gold); color: #1b1405; font-weight: 800; font-size: .8rem; }
.grad-card__badge svg { width: 16px; height: 16px; }
.grad-card__body { padding: 20px 24px 26px; }
.grad-card__body h3 { margin: 4px 0 6px; font-size: 1.35rem; }
.grad-card__body p:not(.kicker) { color: var(--ink-2); margin: 0; }
@media (max-width: 760px) { .grad-cards { grid-template-columns: 1fr; } }
.memorial__farewell { font-family: var(--display); font-style: italic; font-size: 1.3rem; color: var(--gold-soft); text-align: center; margin-top: 10px; }
.powered { background: #fff; border-bottom: 1px solid var(--line); padding: 26px 0; }
.powered__inner { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 48px); flex-wrap: wrap; }
.powered__item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 16px; align-items: center; text-decoration: none; color: var(--ink); padding: 12px 18px; border-radius: var(--radius-sm); transition: background .3s; }
.powered__item:hover { background: var(--paper); }
.powered__label { grid-column: 1 / -1; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 6px; }
.powered__item img { grid-row: 2 / 4; height: 64px; width: auto; max-width: 150px; object-fit: contain; }
.powered__item b { font-size: 1.02rem; align-self: end; }
.powered__item span:last-child { font-size: .85rem; color: var(--ink-3); align-self: start; }
.powered__plus { font-family: var(--display); font-size: 2rem; color: var(--gold); }
@media (max-width: 640px) { .powered__plus { display: none; } }
.powered-note { font-size: .86rem; font-weight: 700; color: var(--gold-soft); margin: -4px 0 10px; }

/* Utah STEM: Season 3 classroom media + photo release */
.reel-strip img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.photo-trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.photo-trio img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-sm); }
@media (max-width: 640px) { .photo-trio { grid-template-columns: 1fr 1fr; } .photo-trio img:last-child { display: none; } }
.signup-flyer { width: 100%; max-width: 340px; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.form .release { border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 10px; }
.form .release legend { font-family: inherit; font-size: .95rem; font-weight: 700; padding: 0 6px; }
.release .hint { margin: 0; font-size: .88rem; }
.choices--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 960px) { .choices--3 { grid-template-columns: 1fr; } }
/* Kenya: dental workshop + dreamer stories */
.media-duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.media-duo figure { margin: 0; }
.media-duo video, .media-duo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); background: #000; box-shadow: var(--shadow); display: block; }
.media-duo figcaption { margin-top: 10px; font-size: .92rem; font-weight: 600; }
@media (max-width: 760px) { .media-duo { grid-template-columns: 1fr; } }
.reel-strip--stories { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 860px) { .reel-strip--stories { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* About: photos inside Mama's timeline */
.t-photo { margin: 14px 0 0; max-width: 220px; transform: rotate(-2deg); background: #fff; padding: 8px 8px 10px; box-shadow: var(--shadow); border-radius: 4px; }
.t-item:nth-child(odd) .t-photo { transform: rotate(2deg); }
.t-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; filter: sepia(.15); }
.t-photo figcaption { margin-top: 8px; font-size: .78rem; color: #555; font-style: italic; line-height: 1.35; }
.grad-cards:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 960px) { .grad-cards:has(> :nth-child(3)) { grid-template-columns: 1fr; } }
.photo-trio--wide img { aspect-ratio: 4/3; }
.media-wide { margin: 0; }
.media-wide img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.media-wide figcaption { margin-top: 10px; font-size: .92rem; font-weight: 600; }
.checks--row { display: flex; flex-wrap: wrap; gap: 8px 28px; }
/* Country maps */
.map-card { margin: 0; }
.map-card iframe { width: 100%; aspect-ratio: 4/3.4; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); background: #e8e4da; display: block; }
.map-card figcaption { margin-top: 8px; font-size: .78rem; color: var(--ink-3); }
/* Volunteer: serve your way */
.serve-ways { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.serve-way { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; border-radius: var(--radius); background: var(--paper, #fff); box-shadow: var(--shadow); color: inherit; text-decoration: none; border-top: 5px solid var(--c); transition: transform .4s var(--ease); }
.serve-way:hover { transform: translateY(-4px); }
.serve-way .card-icon { --c: inherit; }
.serve-way h3 { margin: 4px 0 0; }
.serve-way p { margin: 0; flex: 1; }
.serve-way--featured { background: linear-gradient(160deg, #fff6f2, #fff); }
.serve-way__badge { position: absolute; top: -14px; right: 18px; background: var(--coral); color: #fff; font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); }
@media (max-width: 900px) { .serve-ways { grid-template-columns: 1fr; } }
/* Impact report: year by year */
.yr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.yr-chip { padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 700; text-decoration: none; backdrop-filter: blur(6px); transition: background .3s; }
.yr-chip:hover { background: rgba(255,255,255,.3); }
.yr-chip--ghost { background: transparent; }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line, rgba(0,0,0,.1)); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.glance__item { background: var(--paper, #fff); padding: 26px 22px; display: flex; flex-direction: column; gap: 6px; }
.glance__item b { font-family: var(--display); font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; color: var(--teal); }
.glance__item > span { font-size: .92rem; }
@media (max-width: 860px) { .glance { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.yrs { display: grid; gap: clamp(28px, 5vw, 56px); }
.yr { display: grid; grid-template-columns: 180px 1fr; gap: clamp(18px, 4vw, 48px); padding-top: clamp(24px, 4vw, 40px); border-top: 1px solid var(--line, rgba(0,0,0,.12)); scroll-margin-top: 90px; }
.yr__label { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 8px; }
.yr__num { font-family: var(--display); font-size: clamp(3rem, 7vw, 5.2rem); line-height: .9; color: var(--teal); }
.yr__tag { align-self: flex-start; background: var(--gold); color: #1d1d1d; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.yr__body h3 { margin: 0 0 6px; }
.yr__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(16px, 3vw, 32px); margin-top: 18px; align-items: start; }
.yr__img { margin: 0; }
.yr__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.yr__places { display: grid; gap: 14px; }
.yr__place .tag { margin-bottom: 6px; display: inline-block; }
.yr__place ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
@media (max-width: 860px) { .yr { grid-template-columns: 1fr; } .yr__label { position: static; flex-direction: row; align-items: center; } .yr__grid { grid-template-columns: 1fr; } }
.next-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.next-item { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.next-item b { color: #fff; font-size: 1.05rem; }
.next-item > span:not(.card-icon) { color: #c5d8d6; flex: 1; }
@media (max-width: 960px) { .next-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .next-grid { grid-template-columns: 1fr; } }
/* Country tiles: stronger contrast so text is always readable */
.place:not(.place--intro)::after { background: linear-gradient(180deg, rgba(6,20,23,.10) 0%, rgba(6,20,23,.55) 32%, rgba(6,20,23,.88) 58%, rgba(6,20,23,.96) 100%); }
.place__body { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.place h3 { color: #fff; }
.place p { color: #f1f6f5; font-weight: 500; }
.place__num { color: #f3d27a; }
.place .tags .tag { background: rgba(6,20,23,.78); border: 1px solid rgba(255,255,255,.28); color: #fff; text-shadow: none; backdrop-filter: blur(4px); }
/* Bigger Dreamers logo */
.brand { gap: 14px; }
.brand img { width: 92px; }
.brand-text { font-size: 1.3rem; }
.brand-text small { font-size: .7rem; }
.footer-brand img { width: 210px; }
@media (max-width: 640px) { .brand img { width: 70px; } .brand-text { font-size: 1.12rem; } .brand-text small { font-size: .62rem; } }
/* Clean horizontal logo lockup (icon + wordmark), like the logo itself */
.brand { gap: 12px; }
.brand img.brand-mark { width: auto; height: 54px; filter: none; }
.brand-word { display: flex; flex-direction: column; font-family: "Montserrat", var(--body); line-height: 1; white-space: nowrap; }
.brand-word__top { font-weight: 700; font-size: 1.22rem; letter-spacing: .02em; color: #fff; }
.brand-word__bottom { font-weight: 600; font-size: .8rem; letter-spacing: .34em; margin-top: 5px; color: var(--gold-soft); }
.site-header.is-solid .brand-word__top, body.no-hero .site-header .brand-word__top { color: #0b6f68; }
.site-header.is-solid .brand-word__bottom, body.no-hero .site-header .brand-word__bottom { color: #a5700c; }
body.menu-open .site-header .brand-word__top { color: #fff; }
body.menu-open .site-header .brand-word__bottom { color: var(--gold-soft); }
@media (max-width: 640px) { .brand img.brand-mark { height: 42px; } .brand-word__top { font-size: 1rem; } .brand-word__bottom { font-size: .66rem; letter-spacing: .3em; } }
/* Media page */
.media-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); }
.media-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; color: #fff; font-weight: 700; text-decoration: none; transition: background .3s; }
.media-tab svg { width: 16px; height: 16px; }
.media-tab:hover { background: rgba(255,255,255,.22); }
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px, 3vw, 36px); }
.mcard { margin: 0; }
.mcard .yt, .mcard video { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); background: #000; box-shadow: var(--shadow); display: block; }
.mcard h3 { margin: 14px 0 4px; font-size: 1.2rem; }
.mcard p { margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 760px) { .mgrid { grid-template-columns: 1fr; } }
/* FAQ / Answers */
.answers-hero { text-align: center; padding-top: clamp(130px, 14vw, 170px); }
.answers-hero .lede { margin-inline: auto; max-width: 60ch; }
.answers-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--gold-soft); color: #6b4a08; font-weight: 700; font-size: .85rem; }
.answers-pill svg { width: 14px; height: 14px; }
.answer-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.answer-chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line, rgba(0,0,0,.15)); background: var(--paper, #fff); font: inherit; font-weight: 700; cursor: pointer; }
.answer-chip.is-on { background: var(--teal); color: #fff; border-color: var(--teal); }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-items: start; }
.answer { background: var(--paper, #fff); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; }
.answer[open] { grid-column: 1 / -1; }
.answer summary { list-style: none; cursor: pointer; display: grid; gap: 8px; }
.answer summary::-webkit-details-marker { display: none; }
.answer__kicker { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.answer__q { font-family: var(--display); font-size: 1.35rem; line-height: 1.25; color: var(--teal); }
.answer__sum { color: var(--ink-2); font-size: .95rem; }
.answer__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--coral); font-size: .9rem; }
.answer__go svg { width: 14px; height: 14px; transition: transform .3s; }
.answer[open] .answer__go { font-size: 0; }
.answer[open] .answer__go::after { content: "Close"; font-size: .9rem; }
.answer[open] .answer__go svg { display: none; }
.answer__body { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line, rgba(0,0,0,.1)); max-width: 75ch; }
.answer__body ul { padding-left: 1.2em; display: grid; gap: 6px; }
@media (max-width: 760px) { .answers { grid-template-columns: 1fr; } }
/* Dance page */
.together { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.together__item { position: relative; padding: 26px 24px 24px; border-radius: var(--radius); background: var(--paper, #fff); box-shadow: var(--shadow); border-top: 5px solid var(--c); transition: transform .4s var(--ease); }
.together__item:hover { transform: translateY(-4px) rotate(-.4deg); }
.together__num { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--c); opacity: .9; }
.together__item h3 { margin: 8px 0 6px; }
.together__item p { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) { .together { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .together { grid-template-columns: 1fr; } }
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); }
.benefits__col { display: grid; gap: 12px; align-content: start; }
.benefits__who { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; color: var(--gold-soft); margin: 0 0 4px; }
.benefits__who svg { width: 16px; height: 16px; }
.benefit { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.benefit b { color: #fff; font-size: 1.05rem; }
.benefit span { color: #c5d8d6; }
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; } }
.dance-pick { display: grid; gap: 10px; margin-top: 18px; max-width: 420px; }
.dance-pick__btn { text-align: left; padding: 14px 18px; border-radius: var(--radius-sm); border: 2px solid var(--line, rgba(0,0,0,.12)); background: var(--paper, #fff); font: inherit; font-weight: 700; cursor: pointer; transition: all .3s; }
.dance-pick__btn.is-on { border-color: var(--coral); background: #fff4ef; box-shadow: var(--shadow); }
.dance-card { padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); background: linear-gradient(150deg, #173f45, #0e2a2e); color: #fff; box-shadow: var(--shadow); min-height: 280px; }
.dance-card h3 { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 4px 0 10px; color: #fff; }
.dance-card p { color: #d6e5e3; }
.dance-card .kicker { color: var(--gold-soft); }
/* Cross-links between Dance and Murals */
.cross-link { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; padding: 18px; border-radius: var(--radius); background: var(--paper, #fff); box-shadow: var(--shadow); color: inherit; text-decoration: none; border-left: 6px solid var(--c); transition: transform .4s var(--ease); }
.cross-link:hover { transform: translateY(-3px); }
.cross-link img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); }
.cross-link h2 { margin: 4px 0 6px; }
.cross-link p { margin: 0 0 8px; color: var(--ink-2); }
@media (max-width: 640px) { .cross-link { grid-template-columns: 1fr; } }
/* Murals: design the next wall */
.design__label { margin: 18px 0 8px; font-weight: 800; color: var(--gold-soft); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.design__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.design__opts button { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.design__opts button.is-on { background: #fff; color: #0e2a2e; }
.wall { margin: 0; }
.wall__paint { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; box-shadow: var(--shadow); background: var(--w1); transition: background .5s; }
.wall__sun { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; top: -12%; right: -8%; background: var(--w2); transition: background .5s; }
.wall__wave { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 60%; border-radius: 50%; background: var(--w3); transition: background .5s; }
.wall__msg { position: relative; z-index: 1; margin: 0; padding: 0 8%; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; color: var(--w4); text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.wall__hands { position: absolute; bottom: 10px; left: 14px; font-size: 1.6rem; z-index: 1; }
.wall__cap { margin-top: 10px; color: #c5d8d6; font-size: .85rem; }
.wall[data-theme="kente"] { --w1: #f6c445; --w2: #d9412b; --w3: #1f7a3f; --w4: #1d1d1d; }
.wall[data-theme="ocean"] { --w1: #9fe3e0; --w2: #ffffff; --w3: #0f857c; --w4: #0b3d47; }
.wall[data-theme="sunrise"] { --w1: #ffb37a; --w2: #ffe08a; --w3: #c2185b; --w4: #3b1530; }
.wall[data-theme="garden"] { --w1: #e6f2c8; --w2: #f4dfae; --w3: #5aa832; --w4: #24451a; }
.cp-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.cp-grid .choice { min-height: 340px; }
@media (max-width: 960px) { .cp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cp-grid { grid-template-columns: 1fr; } }
/* Dance 4 a Cause page */
.d4c-badge { width: clamp(120px, 14vw, 180px); height: auto; background: #fff; border-radius: 18px; padding: 8px 12px; box-shadow: var(--shadow); margin-bottom: 14px; }
.policy-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: #fff4ef; color: #7a3416; font-size: .95rem; }
.policy-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.policy-note--dark { background: rgba(255,255,255,.08); color: #f4dfae; }
.policy { display: flex; gap: 14px; align-items: center; padding: 18px 22px; border-radius: var(--radius); background: var(--teal); color: #fff; }
.policy svg { width: 28px; height: 28px; flex-shrink: 0; }
.policy p { margin: 0; }
.fund-flow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; counter-reset: f; }
.fund-step { position: relative; display: grid; gap: 6px; padding: 22px; border-radius: var(--radius); background: var(--paper, #fff); box-shadow: var(--shadow); }
.fund-step__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: #6b4a08; }
.fund-step__icon svg { width: 22px; height: 22px; }
.fund-step b { font-size: 1.15rem; }
.fund-step:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--coral); }
.fund-proof { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.fund-proof figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper, #fff); box-shadow: var(--shadow); }
.fund-proof img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.fund-proof figcaption { padding: 14px 16px 18px; font-size: .95rem; }
.fund-proof figcaption b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
@media (max-width: 860px) { .fund-flow, .fund-proof { grid-template-columns: 1fr; } .fund-step::after { display: none; } }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.team-card { border-radius: var(--radius); overflow: hidden; background: var(--paper, #fff); box-shadow: var(--shadow); display: grid; }
.team-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.team-card__body { padding: 20px 22px 24px; display: grid; gap: 6px; justify-items: start; }
.team-card__body h3 { font-family: var(--display); font-size: 1.7rem; margin: 0; }
@media (max-width: 760px) { .teams { grid-template-columns: 1fr; } }
.mgrid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 960px) { .mgrid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mgrid--3 { grid-template-columns: 1fr; } }
/* Events page */
.gala-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.gala-feature__img { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gala-feature__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gala-feature__date { position: absolute; top: 16px; left: 16px; display: grid; justify-items: center; padding: 10px 16px; border-radius: 14px; background: var(--coral); color: #fff; box-shadow: var(--shadow); }
.gala-feature__date b { font-family: var(--display); font-size: 1.8rem; line-height: 1; }
.gala-feature__date span { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.gala-feature .meta { display: grid; gap: 8px; margin-top: 12px; }
.gala-feature .meta div { display: flex; gap: 8px; align-items: center; }
.gala-feature .meta svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .gala-feature { grid-template-columns: 1fr; } }
.upcoming { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.up-card { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: transform .4s var(--ease); }
.up-card:hover { transform: translateY(-4px); }
.up-card--feature { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(232,108,74,.28), rgba(255,255,255,.04)); }
.up-card__date { width: 84px; height: 84px; border-radius: 18px; background: #fff; color: #0e2a2e; display: grid; place-content: center; text-align: center; }
.up-card__date b { font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.up-card__date span { font-size: .8rem; font-weight: 700; }
.up-card__logo { width: 84px; height: 84px; object-fit: contain; background: #fff; border-radius: 18px; padding: 6px; }
.up-card h3 { color: #fff; margin: 8px 0 6px; font-size: 1.35rem; }
.up-card p { color: #c5d8d6; margin: 0 0 12px; }
.up-card .btn-row { align-items: center; }
.up-card .link-arrow { color: var(--gold-soft); }
@media (max-width: 760px) { .upcoming { grid-template-columns: 1fr; } .up-card { grid-template-columns: 1fr; } }
.past { display: grid; gap: 18px; }
.past-item { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: center; padding: 16px; border-radius: var(--radius); background: var(--paper, #fff); box-shadow: var(--shadow); }
.past-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); }
.past-item h3 { margin: 4px 0 6px; font-family: var(--display); font-size: 1.5rem; }
.past-item p { margin: 0; color: var(--ink-2); }
@media (max-width: 700px) { .past-item { grid-template-columns: 1fr; } }
.program-row__link { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s var(--ease); }
.program-row__link:hover { background-size: 100% 2px; }
.program-row__link::after { content: " →"; color: var(--coral); }
.role-groups { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.role-group { padding: 20px; border-radius: var(--radius); background: var(--paper, #fff); box-shadow: var(--shadow); }
.role-group__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 800; color: var(--teal); }
.role-group__title svg { width: 18px; height: 18px; }
.role-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.role-group a { display: block; padding: 8px 10px; border-radius: 10px; background: #f6f1e7; color: inherit; text-decoration: none; font-weight: 600; font-size: .92rem; transition: background .3s; }
.role-group a:hover { background: var(--gold-soft); }
@media (max-width: 1100px) { .role-groups { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .role-groups { grid-template-columns: 1fr; } }
.photo-trio figure { margin: 0; }
.photo-trio figure img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-sm); }
.photo-trio figcaption { margin-top: 8px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
@media (max-width: 640px) { .photo-trio figure:last-child { display: none; } }
/* Home: three equal place tiles under the intro */
@media (min-width: 1101px) { .places--grid .places__track { grid-template-columns: repeat(3, minmax(0,1fr)); } .places--grid .place--intro { grid-column: 1 / -1; padding: 0 0 8px; } .places--grid .place--intro .lede { max-width: 60ch; } }
.past-item--ig { align-items: start; }
.ig-embed { width: 100%; min-height: 520px; border: 0; border-radius: var(--radius-sm); background: #fff; }
.ewe-facts { display: grid; gap: 12px; margin-top: 16px; }
.ewe-fact { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--paper, #fff); border-left: 4px solid var(--gold); box-shadow: var(--shadow); }
.ewe-fact b { color: var(--teal); }
.ewe-fact span { color: var(--ink-2); font-size: .95rem; }
/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.blog-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); overflow: hidden; background: var(--paper, #fff); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .4s var(--ease); }
.blog-card:hover { transform: translateY(-4px); }
.blog-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.blog-card > div { padding: 18px 20px 22px; display: grid; gap: 6px; align-content: start; }
.blog-card h3 { margin: 0; font-family: var(--display); font-size: 1.4rem; }
.blog-card p { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }
.post { padding-top: clamp(120px, 14vw, 160px); padding-bottom: clamp(60px, 8vw, 100px); }
.post__head { max-width: 820px; }
.post__back { display: inline-block; margin-bottom: 18px; }
.post__byline { color: var(--ink-3); font-weight: 600; }
.post__hero { margin: 24px auto 0; max-width: 1000px; }
.post__hero img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.post__body { max-width: 720px; margin: 32px auto 0; padding: 0 var(--gutter); font-size: 1.08rem; line-height: 1.75; }
.post__body ul { padding-left: 1.2em; display: grid; gap: 6px; }
.post-fig { margin: 28px 0; }
.post-fig img, .post-pair img { width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.post-fig figcaption { margin-top: 8px; font-size: .9rem; color: var(--ink-3); }
.post-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
.post-pair img { aspect-ratio: 4/3; object-fit: cover; }
.past-reel { width: 100%; max-width: 300px; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--radius-sm); background: #000; justify-self: center; }
/* Founder Academy plan */
.academy-phases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.academy-phase { padding: 22px; border-radius: var(--radius); background: var(--paper, #fff); box-shadow: var(--shadow); border-top: 5px solid var(--c); }
.academy-phase span { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.academy-phase b { display: block; font-family: var(--display); font-size: 1.8rem; margin: 4px 0; }
.academy-phase p { margin: 0; color: var(--ink-2); }
.academy-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.weeks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.week { display: grid; grid-template-columns: 90px 1fr; column-gap: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--paper, #fff); box-shadow: var(--shadow); }
.week__n { grid-row: span 3; font-family: var(--display); font-weight: 700; color: var(--teal); }
.week__phase { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--coral); }
.week b { font-size: 1.05rem; }
.week span:last-child { color: var(--ink-2); font-size: .94rem; }
.academy-side { display: grid; gap: 14px; position: sticky; top: 96px; }
.academy-card { padding: 18px 20px; border-radius: var(--radius); background: var(--teal); color: #fff; }
.academy-card > b { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin-bottom: 6px; }
.academy-card > b svg { width: 18px; height: 18px; }
.academy-card p { margin: 6px 0 0; color: #dcebea; }
.academy-card .link-arrow { color: var(--gold-soft); margin-top: 8px; display: inline-block; }
@media (max-width: 900px) { .academy-phases, .academy-grid { grid-template-columns: 1fr; } .academy-side { position: static; } }
.academy-phases--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1000px) { .academy-phases--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .academy-phases--4 { grid-template-columns: 1fr; } }
.invite-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.invite-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 600; font-size: .92rem; }
.invite-tags svg { width: 16px; height: 16px; }

/* ---------- Children's dreams (video cards) ---------- */
.dreams { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.dream { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dream video { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--radius); background: #000; box-shadow: var(--shadow); }
.dream figcaption q { display: block; font-family: var(--display); font-size: 1.08rem; font-weight: 600; line-height: 1.3; quotes: "\201C" "\201D"; }
.dream figcaption span { display: block; font-size: .8rem; opacity: .7; margin-top: 4px; }
@media (max-width: 600px) { .dreams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dream figcaption q { font-size: .95rem; } }

/* ---------- Problem statement ---------- */
.problem__statement { max-width: 24ch; }
.problem__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 2rem; }
.problem__item { background: #133840; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 22px; }
.problem__item h3 { color: #fff; margin: .4rem 0 .5rem; font-size: 1.1rem; }
.problem__item p { color: #bcd0cd; margin: 0; font-size: .95rem; }
.problem__n { font-weight: 800; font-size: .85rem; letter-spacing: .1em; color: var(--gold-soft); }
.problem__answer { margin-top: 2rem; padding: 22px 24px; border-radius: var(--radius); background: rgba(255,255,255,.06); border-left: 4px solid var(--coral); }
.problem__answer > b { display: block; color: #fff; font-size: 1.05rem; margin-bottom: .6rem; }
.problem__answer ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 22px; color: #dbe8e5; }
.problem__answer li::before { content: "\2192"; color: var(--coral); font-weight: 800; margin-right: 8px; }
.problem__answer a { color: var(--teal-bright); }
.problem__src { margin-top: 1.2rem; font-size: .78rem; color: #8fa9a5; max-width: 80ch; }
@media (max-width: 860px) { .problem__grid { grid-template-columns: 1fr; } }

/* ---------- Launch cards ---------- */
.launch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.launch-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.launch-card figure { margin: 0; position: relative; }
.launch-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.launch-card figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; padding: 3px 8px; border-radius: 999px; }
.launch-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.launch-card__body h3 { margin: 0; font-size: 1.4rem; }
.launch-card__body .btn-row { margin-top: auto; }
@media (max-width: 860px) { .launch-grid { grid-template-columns: 1fr; } }

/* Page hero with a framed photo beside the text */
.hero-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-split h1 { font-size: clamp(2.4rem, 4.4vw, 4rem); max-width: 14ch; }
.hero-photo { margin: 0; position: relative; transform: rotate(1.2deg); }
.hero-photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: 30% 50%; border-radius: var(--radius); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); border: 6px solid rgba(255,255,255,.9); display: block; }
.hero-split:has(.hero-photo--tall) { grid-template-columns: 1.3fr .8fr; }
.hero-photo--tall img { aspect-ratio: 4/5; object-position: 50% 35%; max-height: 72vh; }
.hero-photo figcaption { margin-top: 10px; font-size: .8rem; color: #bcd0cd; transform: rotate(-1.2deg); }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } .hero-photo { transform: none; } .hero-photo figcaption { transform: none; } }

/* Sponsorship: children's thank-you sign preview */
.sign-stage { margin: 0; position: relative; }
.sign-stage img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.sign-card { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%) rotate(-3deg); background: #fffdf6; border: 3px solid #f0e6cf; border-radius: 6px; padding: 14px 22px 12px; min-width: 56%; max-width: 86%; text-align: center; font-family: "Permanent Marker", var(--display); color: #1d3f8f; box-shadow: 0 18px 30px -12px rgba(0,0,0,.45); line-height: 1.05; }
.sign-card__thanks { display: block; font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--coral); }
.sign-card__name { display: block; font-size: clamp(1.4rem, 3.4vw, 2.3rem); word-break: break-word; }
.sign-card__heart { position: absolute; right: 10px; top: 6px; color: var(--coral); font-size: 1.2rem; }
.sign-stage figcaption { margin-top: 10px; font-size: .8rem; color: var(--muted, #6b7f7c); }
.sign-input { display: block; margin-top: 1.2rem; max-width: 420px; }
.sign-input span { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 6px; }
.sign-input input { width: 100%; padding: 12px 14px; border: 2px solid rgba(13,42,47,.15); border-radius: 12px; font: inherit; background: #fff; }
.sign-input input:focus { outline: none; border-color: var(--coral); }

/* Blog: person card */
.post-person { display: flex; gap: 16px; align-items: center; margin: 1.2rem 0; }
.post-person img { width: 120px; height: 150px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); }
.post-person figcaption b { display: block; font-size: 1.05rem; }
.post-person figcaption span { font-size: .9rem; opacity: .75; }

.post__sponsor { display: block; margin-top: 14px; height: auto; border-radius: 8px; }
.post-pair--ba figure { margin: 0; }
.post-pair--ba figcaption { margin-top: 6px; font-size: .85rem; opacity: .8; }

/* Homepage: 6 program campaigns */
.prog-camps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.prog-camp { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; border-top: 5px solid var(--c); }
.prog-camp__img { position: relative; display: block; }
.prog-camp__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.prog-camp__img .card-icon { position: absolute; left: 14px; bottom: -22px; --c: inherit; background: var(--c); color: #fff; box-shadow: 0 8px 18px -6px rgba(0,0,0,.35); }
.prog-camp__body { padding: 30px 22px 22px; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.prog-camp__body h3 { margin: 0; font-size: 1.25rem; }
.prog-camp__body p { margin: 0; }
.prog-camp__goal { font-weight: 800; color: var(--c); font-size: .9rem; }
.prog-camp .btn-row { margin-top: auto; padding-top: .6rem; align-items: center; gap: 14px; }
@media (max-width: 980px) { .prog-camps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .prog-camps { grid-template-columns: 1fr; } }

/* Education: two pillars + grouped "what we do" */
.choices--pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice--pillar b { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.what-group { font-size: 1.15rem; margin: 2rem 0 1rem; padding-left: 12px; border-left: 4px solid var(--coral); }
.what-group:first-child { margin-top: 0; }
@media (max-width: 760px) { .choices--pillars { grid-template-columns: 1fr; } }

/* Timeline photo */
.t-photo { margin: 12px 0 0; }
.t-photo img { width: 100%; max-width: 520px; border-radius: 14px; box-shadow: var(--shadow); display: block; }
.t-photo figcaption { font-size: .8rem; opacity: .75; margin-top: 6px; }

.academy-card--approved { border-left: 4px solid var(--leaf-green, #3a9a5b); }

/* Trips: safari & boat video reel */
.fun-reel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fun-clip { margin: 0; }
.fun-clip video { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); background: #000; box-shadow: var(--shadow); display: block; }
.fun-clip figcaption { margin-top: 8px; }
.fun-clip figcaption b { display: block; font-size: .95rem; }
.fun-clip figcaption span { font-size: .8rem; opacity: .7; }
@media (max-width: 900px) { .fun-reel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Homepage donate section */
.give-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 1.2rem; }
.give-way { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.give-way b { display: block; font-family: var(--display); font-size: 1.35rem; color: var(--coral); }
.give-way span { font-size: .9rem; }
@media (max-width: 560px) { .give-ways { grid-template-columns: 1fr; } }

/* Get Involved: two photos side by side, no overlap */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.photo-pair img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }

@media (min-width: 1100px) { .fun-reel { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.choices--pillars-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .choices--pillars-3 { grid-template-columns: 1fr; } }

.ty-video { margin: 0; }
.ty-video video { width: 100%; max-width: 440px; aspect-ratio: 4/5; border-radius: var(--radius); box-shadow: var(--shadow); background: #000; display: block; margin-inline: auto; }

/* Volunteer: where you'll serve */
.where-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.where-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .3s var(--ease); }
.where-card:hover { transform: translateY(-4px); }
.where-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.where-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.where-card__body b { font-family: var(--display); font-size: 1.3rem; }
.where-card__body .link-arrow { margin-top: auto; }
@media (max-width: 1000px) { .where-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .where-grid { grid-template-columns: 1fr; } }

/* Volunteer: job board */
.tier-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.tier-note { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); border-top: 4px solid var(--teal); }
.tier-note:nth-child(2) { border-top-color: var(--coral); }
.tier-note:nth-child(3) { border-top-color: var(--gold); }
.tier-note b { display: block; margin-bottom: 4px; }
.tier-note span { font-size: .9rem; }
.role-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.role-filter { border: 2px solid rgba(13,42,47,.15); background: #fff; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.role-filter[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.role-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.role-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow); border-left: 5px solid var(--teal); }
.role-card--project { border-left-color: var(--coral); }
.role-card--flex { border-left-color: var(--gold); }
.role-card summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.role-card summary::-webkit-details-marker { display: none; }
.role-card summary b { font-size: 1.08rem; padding-right: 26px; position: relative; }
.role-card summary b::after { content: "+"; position: absolute; right: 0; top: -2px; font-size: 1.3rem; color: var(--coral); }
.role-card[open] summary b::after { content: "–"; }
.role-card__tier { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.role-card--project .role-card__tier { color: var(--coral); }
.role-card--flex .role-card__tier { color: #a87410; }
.role-card__sum { font-size: .92rem; opacity: .85; }
.role-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.role-card__body { padding: 0 18px 18px; }
.role-card__body h4 { margin: 4px 0 6px; font-size: .95rem; }
.role-card__body p { font-size: .92rem; margin: 6px 0; }
.role-card[hidden] { display: none; }
@media (max-width: 860px) { .role-list, .tier-notes { grid-template-columns: 1fr; } }

/* Volunteer: Utah changemakers artwork */
.cm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 12px; }
.cm-grid figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cm-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-grid figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; padding: 3px 9px; border-radius: 999px; }
.cm-grid .cm-a { grid-row: span 2; }
.cm-grid .cm-wide { grid-column: span 2; }
.cm-grid .cm-video { grid-column: span 2; }
.cm-grid .cm-video .yt { height: 100%; aspect-ratio: auto; }
@media (max-width: 900px) { .cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; } .cm-grid .cm-a { grid-row: span 2; } }

.need-quote { margin: 1.4rem 0 0; padding: 14px 18px; border-left: 4px solid var(--coral); background: #fff; border-radius: 10px; font-family: var(--display); font-size: 1.1rem; line-height: 1.45; }
.need-quote cite { display: block; margin-top: 6px; font-family: var(--body); font-style: normal; font-size: .85rem; opacity: .7; }

.weeks-toggle summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--coral); padding: 10px 16px; border: 2px solid currentColor; border-radius: 999px; list-style: none; margin-bottom: 12px; }
.weeks-toggle summary::-webkit-details-marker { display: none; }
.weeks-toggle summary::after { content: "+"; font-size: 1.2rem; }
.weeks-toggle[open] summary::after { content: "–"; }

/* Trips: "Travel that transforms" hero */
.hero--transform { min-height: 88vh; display: flex; align-items: center; text-align: center; }
.hero--transform .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero--transform .hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(13,42,47,.55); }
.transform-hero { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.transform-title { font-family: "Permanent Marker", var(--display); font-weight: 400; font-size: clamp(3.4rem, 10vw, 8.5rem); line-height: .95; color: #fff; margin: 0; text-shadow: 0 6px 30px rgba(0,0,0,.35); max-width: 12ch; }
.transform-hero .lede { color: #e8f1ef; max-width: 46ch; }
.transform-hero .btn-row { justify-content: center; }
.transform-badge { color: #e8f1ef; font-size: .95rem; background: rgba(0,0,0,.35); padding: 8px 16px; border-radius: 999px; }
.transform-badge b { color: var(--gold-soft); margin-right: 6px; }

/* Trips: day-by-day, all five visible */
.places--journey .places__track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.places--journey .place--intro { grid-column: 1 / -1; padding-right: 0; margin-bottom: 8px; }
.places--journey .place { min-height: 420px; }
.places--journey .place h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
@media (max-width: 1100px) { .places--journey .places__track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .places--journey .places__track { grid-template-columns: 1fr; } }

/* Home: centered hero with a two-option chooser */
.hero--chooser { text-align: center; display: flex; align-items: center; }
.hero--chooser .hero-media::after { background: linear-gradient(180deg, rgba(8,26,30,.55), rgba(8,26,30,.45) 50%, rgba(8,26,30,.75)); }
.chooser-hero { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.chooser-hero h1 { max-width: 16ch; margin-inline: auto; }
.chooser-hero .lede { color: #e8f1ef; }
.trust-line { color: #fff; font-weight: 700; font-size: .95rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.trust-line .stars { color: var(--gold-soft); display: inline-flex; } .trust-line .stars svg { width: 18px; height: 18px; }
.chooser { display: flex; align-items: center; background: #fff; border-radius: 999px; padding: 8px 8px 8px 28px; width: min(760px, 100%); box-shadow: 0 20px 50px -15px rgba(0,0,0,.45); gap: 8px; margin-top: 8px; }
.chooser__field { flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 6px 12px; color: var(--ink); }
.chooser__field + .chooser__field { border-left: 1px solid rgba(13,42,47,.15); }
.chooser__field > span { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.chooser__field select { border: 0; background: transparent; font: inherit; font-size: 1.05rem; color: var(--ink); padding: 4px 0; width: 100%; cursor: pointer; appearance: auto; }
.chooser__field select:focus { outline: none; }
.chooser__go { flex: none; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .2s; }
.chooser__go:hover { transform: scale(1.06); }
.chooser__go svg { width: 22px; height: 22px; }
@media (max-width: 620px) { .chooser { flex-direction: column; border-radius: 22px; padding: 14px; align-items: stretch; } .chooser__field + .chooser__field { border-left: 0; border-top: 1px solid rgba(13,42,47,.15); } .chooser__go { width: 100%; border-radius: 999px; height: 50px; } }

/* Volunteer orientation course */
.course { display: grid; gap: 12px; max-width: 860px; }
.course-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 700; margin: 0 0 18px; }
.course-bar { flex: 1 1 200px; max-width: 420px; height: 10px; border-radius: 999px; background: rgba(13,42,47,.12); overflow: hidden; }
.course-bar i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .4s ease; }
.course-mod.is-done { border-left-color: var(--leaf-green, #3a9d5d); }
.course-mod.is-done .role-card__tier::after { content: " · Done ✓"; color: var(--leaf-green, #3a9d5d); }
.course-mod .check-line { margin-top: 12px; font-weight: 700; }

/* Home: static story photos and "Load more" programs */
.collage .collage-photo { position: absolute; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.collage .collage-photo img { width: 100%; height: 100%; object-fit: cover; }
.load-more { display: flex; justify-content: center; margin-top: 28px; }
.prog-camp[hidden] { display: none; }
/* Chooser menus match the white search bar, even in dark mode */
.chooser { color-scheme: light; }
.chooser__field select option { background: #fff; color: var(--ink); }
.chooser__field select option:checked { background: #e6f4f1; color: var(--ink); }
/* Home story collage: show the full photo of Godwill and Mama Joe, faces never covered */
.collage .collage-photo.c1 { width: 88%; height: 62%; }
.collage .collage-photo.c1 img { object-position: center 20% !important; }
.collage .collage-photo.c2--wide { width: 64%; height: 40%; right: 0; bottom: 0; }
.collage:has(.collage-photo) .sticker { right: auto; top: auto; left: 4%; bottom: 8%; }
@media (max-width: 900px) { .collage .collage-photo.c2--wide { width: 70%; height: 40%; } }
@media (max-width: 620px) { .collage:has(.collage-photo) .sticker { width: 84px; height: 84px; left: 0; bottom: 4%; } }
/* Chooser: white dropdown panel that matches the search bar */
.chooser { position: relative; }
.chooser__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chooser__btn { all: unset; box-sizing: border-box; width: 100%; padding: 4px 22px 4px 0; font-size: 1.05rem; color: var(--ink); cursor: pointer; position: relative; text-align: left; }
.chooser__btn::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.chooser__btn[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.chooser__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }
.chooser__menu { position: absolute; left: 0; right: 0; top: calc(100% + 12px); z-index: 20; margin: 0; padding: 14px; list-style: none; background: #fff; border-radius: 28px; box-shadow: 0 20px 50px -15px rgba(0,0,0,.45); display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; text-align: left; }
.chooser__menu[hidden] { display: none; }
.chooser__menu button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 12px 18px; border-radius: 14px; font-size: 1.05rem; color: var(--ink); cursor: pointer; }
.chooser__menu button:hover, .chooser__menu button:focus-visible { background: #eef6f4; }
.chooser__menu button[aria-selected="true"] { font-weight: 700; color: var(--teal); }
@media (max-width: 620px) { .chooser__menu { grid-template-columns: 1fr; border-radius: 22px; } }
/* Home: stats band under the hero */
.hero-band { background: #1f4d47; color: #fff; }
.hero-band__row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 64px; padding-block: 26px; }
.hero-band__item { display: flex; align-items: center; gap: 16px; margin: 0; }
.hero-band__item svg { width: 34px; height: 34px; flex: none; stroke-width: 1.6; }
.hero-band__item b { font-family: var(--body); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.55rem); letter-spacing: .02em; text-transform: uppercase; }
@media (max-width: 620px) { .hero-band__row { gap: 12px 28px; padding-block: 18px; } .hero-band__item { gap: 10px; } .hero-band__item svg { width: 24px; height: 24px; } }
/* Each dropdown panel stays within its own section of the bar */
.chooser__field { position: relative; }
.chooser__field .chooser__menu { left: -12px; right: -12px; top: calc(100% + 22px); grid-template-columns: 1fr; padding: 10px; border-radius: 22px; }
.chooser__field:first-child .chooser__menu { left: -40px; }
@media (max-width: 620px) { .chooser__field .chooser__menu, .chooser__field:first-child .chooser__menu { left: -14px; right: -14px; top: calc(100% + 8px); } }
.chooser__field:first-child .chooser__menu { left: -28px; right: 0; }
.chooser__field + .chooser__field .chooser__menu { left: 0; right: -12px; }
/* Let the chooser panels float above the stats band */
.hero--chooser { overflow: visible; z-index: 5; }
.hero--chooser .hero-media { overflow: hidden; }

/* Policy pages: easy-to-scan summary, contents and callouts */
.legal--wide { max-width: 860px; }
.legal h3 { font-family: var(--body); font-size: 1.1rem; font-weight: 800; margin: 1.4em 0 .4em; }
.legal li + li { margin-top: 6px; }
.legal .checks { padding-left: 0; }
.policy-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0; }
.policy-glance--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.policy-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.policy-card .card-icon { width: 42px; height: 42px; margin-bottom: 4px; }
.policy-card b { font-size: 1.05rem; }
.policy-card span:last-child { font-size: .92rem; color: var(--ink-2); }
.policy-toc { background: var(--cream, #f6efe2); border-radius: 16px; padding: 18px 22px; margin: 8px 0 12px; }
.policy-toc ol { columns: 2; column-gap: 32px; margin: 8px 0 0; padding-left: 1.2em; }
.policy-toc li { break-inside: avoid; }
.policy-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.policy-callout { border-left: 5px solid var(--coral); background: #fff4ef; padding: 14px 18px; border-radius: 0 12px 12px 0; font-weight: 700; color: var(--ink) !important; }
@media (max-width: 760px) { .policy-glance, .policy-glance--3 { grid-template-columns: 1fr 1fr; } .policy-toc ol { columns: 1; } .policy-cols { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .policy-glance, .policy-glance--3 { grid-template-columns: 1fr; } }
/* Internships: two length options */
.intern-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.intern-option { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.intern-option b { font-size: 1.15rem; }
.intern-option span:last-child { color: var(--ink-2); }
@media (max-width: 700px) { .intern-options { grid-template-columns: 1fr; } }
.chooser__menu li[hidden] { display: none; }
/* Print and PDF: just the page content */
@media print {
  .site-header, .site-footer, .wa-bar, .scroll-progress, .chat-launcher, .chat-box, .chat, [class*="chat-"], .curtain, #leaves { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 0 !important; }
  .policy-card, .policy-toc { box-shadow: none; border: 1px solid #ddd; }
  h2 { break-after: avoid; }
}
/* Stats band always scrolls with the page above the hero; the hero rises only while a menu is open */
.hero--chooser { z-index: auto; }
.hero--chooser.menu-open { z-index: 10; }
.hero-band { position: relative; z-index: 6; }
.hero--chooser:not(.menu-open) { overflow: hidden; }
/* Footer logo: transparent mark and bright wordmark on the dark footer */
.footer-brand .footer-logo { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; margin-bottom: 22px; }
.footer-brand .footer-logo img { width: 96px; height: auto; background: none; border-radius: 0; padding: 0; margin: 0; filter: drop-shadow(0 0 18px rgba(240,180,60,.35)) drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.footer-logo .brand-word__top { font-size: 1.5rem; color: #fff; }
.footer-logo .brand-word__bottom { font-size: .95rem; color: var(--gold-soft); }
@media (max-width: 640px) { .footer-brand .footer-logo img { width: 76px; } .footer-logo .brand-word__top { font-size: 1.2rem; } .footer-logo .brand-word__bottom { font-size: .78rem; } }
.video-toggle--float { position: absolute; right: 14px; bottom: 14px; z-index: 4; width: 38px; height: 38px; background: rgba(8,26,30,.55); }
.hero-media .video-toggle--float { bottom: 110px; }
/* Cookie policy table */
.table-wrap { overflow-x: auto; }
.policy-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); font-size: .95rem; }
.policy-table th, .policy-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.policy-table th { background: var(--paper-2); color: var(--ink); font-weight: 800; }
@media (max-width: 620px) { .policy-table thead { display: none; } .policy-table tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; } .policy-table td { display: block; border: 0; padding: 4px 14px; } }
@media (max-width: 1100px) and (min-width: 641px) { .footer-brand .footer-logo { gap: 12px; } .footer-brand .footer-logo img { width: 70px; } .footer-logo .brand-word__top { font-size: 1.1rem; } .footer-logo .brand-word__bottom { font-size: .72rem; } }
.footer-brand { min-width: 0; }
a.tag { text-decoration: none; text-shadow: none; transition: background .2s; }
a.tag:hover, a.tag:focus-visible { background: rgba(255,255,255,.28); }
.place__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--gold-soft); font-weight: 800; text-decoration: none; }
.place__more svg { width: 18px; height: 18px; transition: transform .2s; }
.place__more:hover svg { transform: translateX(4px); }
/* Home: mission statement */
.mission-band { background: var(--paper); padding: clamp(48px, 7vw, 88px) 0 clamp(8px, 2vw, 16px); }
.mission-band__inner { max-width: 980px; text-align: center; }
.mission-band__text { font-family: var(--display); font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.35; color: var(--ink); margin: 10px auto 0; }
.mission-band__text a { color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mission-band__words { margin-top: 18px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; color: var(--ink-3); }
.mission-band__words span { color: var(--c); }
.mission-band .eyebrow { justify-content: center; }
/* Why STEAME page */
.steame-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steame-letter { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 22px 22px 20px; border-top: 6px solid var(--c); }
.steame-letter b { display: block; font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--c); }
.steame-letter h3 { margin: 6px 0 6px; font-size: 1.25rem; }
.steame-letter p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .steame-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steame-grid { grid-template-columns: 1fr; } }

/* Mobile menu: everything fits on one screen; "Give today" is always visible at the bottom */
.mobile-menu { height: 100vh; height: 100dvh; overflow: hidden; padding: 84px var(--gutter) max(16px, env(safe-area-inset-bottom)); justify-content: flex-start; }
.mobile-menu nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu .m-top, .mobile-menu nav > a { font-size: clamp(1.3rem, 5.6vw, 1.7rem); padding: 11px 0; }
.mobile-menu .m-top .chev { width: 22px; height: 22px; }
.mobile-menu .m-sub a { font-size: 1.05rem; padding: 8px 0 8px 14px; }
.mobile-menu > .btn { flex-shrink: 0; margin-top: 14px; align-self: stretch; justify-content: center; padding-block: 14px; }
.mobile-menu-foot { flex-shrink: 0; margin-top: 10px; font-size: .8rem; text-align: center; }

/* ===== Lean mobile view: tighter spacing and swipeable card rows ===== */
@media (max-width: 640px) {
  .section { padding-block: 52px; }
  .section--tight { padding-block: 40px; }
  .section-head { margin-bottom: 24px; gap: 14px; }
  .display-1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .display-2 { font-size: clamp(1.75rem, 7.5vw, 2.2rem); }
  .display-3 { font-size: 1.4rem; }
  .lede { font-size: 1.02rem; line-height: 1.55; }
  .split { gap: 28px; }
  .mt-2 { margin-top: 18px; }
  .mt-3 { margin-top: 26px; }
  .page-hero { min-height: auto; }
  .img-reveal { max-height: 300px; }
  .split .img-reveal { aspect-ratio: 4 / 3 !important; }

  .prog-camps > [hidden] { display: none; }
  .places__track > svg { display: none; }
  .places--grid { height: auto !important; min-height: 0 !important; }
  .places--grid .place { min-height: 440px; }

  /* Footer: compact */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px 18px; padding-bottom: 28px; }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .footer-big { display: none; }
  .site-footer { padding-top: 44px; }

  /* Compact lists */
  .program-row { grid-template-columns: 1fr !important; gap: 4px; padding: 14px 0; }
  .program-row .idx { display: none; }
  .program-row h3 { font-size: 1.15rem; }
  .program-row p { font-size: .92rem; margin-top: 2px; }
  .program-row .where { padding-top: 4px; }
  .role-card summary { padding: 12px 14px; }
  .role-card__sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; }
  .role-list { grid-template-columns: 1fr !important; gap: 8px; }
  #apply .sticky-col figure, #apply .sticky-col .steps { display: none; }
}

.role-card.is-extra { display: none; }
.role-more { margin-top: 14px; width: 100%; justify-content: center; }
.role-more[hidden] { display: none; }
@media (max-width: 640px) {
  .places--grid .places__track { margin-inline: 0 !important; }
  .place--intro-m { padding: 48px var(--gutter) 20px !important; min-height: 0 !important; width: auto !important; max-width: none !important; }
  .places--grid { padding-bottom: 36px; }
}
.places em.hl, .card--dark em.hl, .site-footer em.hl, .hero-band em.hl, [class*="--dark"] em.hl { color: var(--gold-soft); }


/* Phones: impact numbers sit together in one compact box (2 x 2) */
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr !important; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.05); overflow: hidden; }
  .stats--light { border-color: var(--line); background: #fff; box-shadow: var(--shadow); }
  .stats .stat, .stats .stat + .stat { padding: 16px 14px !important; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
  .stats--light .stat, .stats--light .stat + .stat { border-color: var(--line); }
  .stats .stat:nth-child(2n) { border-right: 0; }
  .stats .stat:nth-last-child(-n+2):nth-child(odd), .stats .stat:last-child { border-bottom: 0; }
  .stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .stat .num { font-size: 2.1rem; }
  .stat p { margin-top: 6px; font-size: .82rem; line-height: 1.35; }
  .stat .bar { margin-top: 10px; height: 3px; }
}

/* Phones: "Say yes to a child's education" gift amounts and promises in one compact box */
@media (max-width: 640px) {
  #donate .give-ways { grid-template-columns: 1fr 1fr !important; gap: 0; background: #fff; border-radius: 18px 18px 0 0; box-shadow: var(--shadow); overflow: hidden; margin-top: 16px; }
  #donate .give-way { box-shadow: none; border-radius: 0; padding: 12px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  #donate .give-way:nth-child(2n) { border-right: 0; }
  #donate .give-way b { font-size: 1.1rem; }
  #donate .give-way span { font-size: .8rem; line-height: 1.35; display: block; }
  #donate .trust { margin: 0; background: #fff; border-radius: 0 0 18px 18px; box-shadow: var(--shadow); padding: 12px 14px; gap: 6px; font-size: .8rem; line-height: 1.4; }
  #donate .trust svg { width: 16px; height: 16px; }
  #donate .split { gap: 22px; }
  .zeffy-frame { min-height: 640px; }
}

/* Phones: all leaders fit on the page in a compact grid (no side scrolling) */
@media (max-width: 640px) {
  .people { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px; overflow: visible; margin-inline: 0; padding: 0; }
  .people > .person { flex: none; max-width: none; padding: 0 0 10px; border-radius: 14px; }
  .person-photo { margin-bottom: 8px; }
  .person h3, .person .role { padding-inline: 8px; }
  .person h3 { font-size: .82rem; line-height: 1.2; margin-bottom: 2px; }
  .person .role { font-size: .68rem; line-height: 1.25; margin-bottom: 0; }
  .person p { display: none; }
  .person-in { width: 26px; height: 26px; top: 6px; right: 6px; }
  .person-in svg { width: 13px; height: 13px; }
  .person-initials { font-size: 1.6rem; }
}

/* Phones: WhatsApp invite as one slim row */
@media (max-width: 640px) {
  .wa-bar { padding: 10px 0; }
  .wa-bar__inner { flex-wrap: nowrap; gap: 10px; }
  .wa-bar__icon { display: none; }
  .wa-bar__inner > div { flex: 1 1 auto; min-width: 0; }
  .wa-bar__inner b { font-family: var(--body); font-size: .92rem; font-weight: 800; line-height: 1.25; }
  .wa-bar__inner > div > span { display: none; }
  .wa-bar__btn { flex: none; padding: 8px 14px; font-size: .85rem; }
  .wa-bar__btn svg { width: 16px; height: 16px; }
}

/* Phones: closing call-to-action banners are compact */
@media (max-width: 640px) {
  .cta-band { padding: 22px 20px; border-radius: 18px; }
  .cta-band h2 { font-size: 1.45rem; margin-bottom: 6px; }
  .cta-band p { font-size: .9rem; margin: 0 0 12px; }
  .cta-band .btn-row { gap: 8px; }
  .cta-band .btn { padding: 9px 14px; font-size: .85rem; }
  .cta-band .blob--1 { width: 160px; height: 160px; right: -60px; top: -70px; }
  .cta-band .blob--2 { width: 100px; height: 100px; border-width: 18px; bottom: -60px; }
  .section--tight:has(> .wrap > .cta-band) { padding-block: 24px; }
}
@media (max-width: 640px) {
  .footer-news { padding: 18px !important; gap: 10px !important; border-radius: 16px; }
  .footer-news h3, .footer-news h2 { font-size: 1.2rem !important; margin-bottom: 4px; }
  .footer-news p { font-size: .85rem; margin: 0; }
  .footer-news__form { display: flex !important; flex-wrap: nowrap; gap: 8px; }
  .footer-news__form input[type="email"] { flex: 1 1 auto; min-width: 0; padding: 10px 14px; font-size: .9rem; }
  .footer-news__form .btn { flex: none; padding: 10px 14px; font-size: .85rem; }
}
@media (max-width: 640px) {
  .footer-news__form { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .footer-news__form > .form-note, .footer-news__form > .hp { grid-column: 1 / -1; }
  .footer-news__form input[type="email"] { width: 100%; }
}
@media (max-width: 640px) {
  .footer-news__form > label.sr-only { position: absolute; }
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .footer-top ul li a { font-size: .92rem; }
}

/* ===================================================================
   MOBILE SYSTEM (phones): no side scrolling, compact grids, smaller
   text, short pages. Applies to every page.
   =================================================================== */
@media (max-width: 640px) {
  html { font-size: 15px; }
  body { font-size: 15px; line-height: 1.55; overflow-x: hidden; }
  p, li { font-size: .95rem; }
  .eyebrow { font-size: .7rem; }
  .display-1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .display-2 { font-size: clamp(1.55rem, 6.6vw, 1.95rem); }
  .display-3 { font-size: 1.2rem; }
  .lede { font-size: .98rem; }
  .btn { padding: 11px 18px; font-size: .9rem; }
  .card { padding: 16px; border-radius: 16px; }
  .card h3 { font-size: 1.05rem; }
  .card p { font-size: .88rem; }
  .card-icon { width: 40px; height: 40px; }
  .card-icon svg { width: 20px; height: 20px; }

  /* Card groups: two compact columns that fit the screen */
  .grid-3, .pillar-grid, .where-grid, .steame-grid, .choices, .cp-grid, .partner-cards, .grad-cards, .chapters, .tiers, .serve-ways, .bento, .next-grid, .tier-notes {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
  }
  .grid-3 > *, .pillar-grid > *, .where-grid > *, .steame-grid > *, .choices > *, .cp-grid > *, .partner-cards > *, .grad-cards > *, .chapters > *, .tiers > *, .serve-ways > *, .bento > *, .next-grid > *, .tier-notes > * {
    min-width: 0; grid-column: auto !important; grid-row: auto !important;
  }
  .grid-2 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .grid-2.grid-2--keep, .policy-cols { grid-template-columns: 1fr 1fr !important; }

  /* Quotes ("In their words") */
  .card p.display-3, figure.card p { font-size: 1rem !important; line-height: 1.45 !important; }
  figure.card figcaption { font-size: .8rem; }

  /* Photo cards: shorter images, smaller text */
  .card-img img, .card--photo img { aspect-ratio: 4 / 3; max-height: 130px; width: 100%; object-fit: cover; }
  .card-body { padding: 12px !important; }
  .pillar-card { min-height: 190px; padding: 14px; border-radius: 16px; }
  .pillar-card h3 { font-size: 1.05rem; }
  .pillar-card p { font-size: .8rem; margin-bottom: 6px; }
  .pillar-card .card-icon { width: 34px; height: 34px; margin-bottom: 8px; }
  .where-card img { aspect-ratio: 16 / 10; }
  .where-card__body { padding: 10px 12px 12px; }
  .where-card__body b { font-size: 1rem; }
  .where-card__body span { font-size: .8rem; }
  .steame-letter { padding: 12px; }
  .steame-letter b { font-size: 2rem; }
  .steame-letter h3 { font-size: 1rem; }
  .steame-letter p { font-size: .8rem; }

  /* Program campaigns: one column, short images */
  .prog-camps { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; }
  .prog-camp__img img { aspect-ratio: 16 / 7; }
  .prog-camp__body { padding: 22px 14px 14px !important; }
  .prog-camp h3 { font-size: 1.1rem; }

  /* Place tiles: one column, shorter */
  .places--grid .places__track { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; padding: 0 var(--gutter); }
  .places--grid .place { width: auto !important; aspect-ratio: auto; min-height: 300px; }
  .places--grid .place h3 { font-size: 1.7rem; }

  /* Year by year */
  .yrs { gap: 22px; }
  .yr { gap: 10px; padding-top: 16px; }
  .yr__num { font-size: 2.2rem; }
  .yr__grid { gap: 12px; margin-top: 10px; }
  .yr__img img { aspect-ratio: 16 / 9; max-height: 190px; }
  .yr__place ul li { font-size: .88rem; }

  /* Footer: clean and compact */
  .site-footer { padding: 36px 0 24px; font-size: .88rem; }
  .footer-brand p { display: none; }
  .footer-brand .footer-logo { margin-bottom: 12px; }
  .footer-top { gap: 18px 16px; padding-bottom: 20px; }
  .footer-top h4 { font-size: .72rem; margin-bottom: 8px; }
  .footer-top ul { display: grid; gap: 4px; }
  .footer-top ul li, .footer-top ul li a { font-size: .86rem; line-height: 1.5; }
  .footer-top > :last-child { grid-column: 1 / -1; }
  .footer-top > :last-child p { font-size: .78rem; }
  .seals .seal { transform: scale(.85); transform-origin: left center; }
  .footer-bottom { flex-direction: column; gap: 6px; font-size: .74rem; text-align: center; padding-top: 14px; }
}
@media (max-width: 640px) {
  .card--photo { padding: 0 !important; overflow: hidden; }
  .card--photo .card-img img { max-height: 110px; border-radius: 0; }
  .card--photo .card-body { padding: 10px 12px 12px !important; gap: 4px; }
  .card--photo .card-body .tag { font-size: .66rem; padding: 3px 8px; align-self: flex-start; }
  .card .link-arrow { margin-top: 6px; font-size: .82rem; }
  .card h3 { font-size: .98rem; line-height: 1.2; margin-bottom: 4px; }
}
@media (max-width: 640px) {
  .shop-grid, .gift-grid, .reels, .mgrid, .mgrid--3, .reel-strip, .reel-strip--stories { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .product { gap: 6px; }
  .product__art { border-radius: 14px; }
  .product__tag { left: 8px; top: 8px; font-size: .6rem; padding: 3px 7px; }
  .product__body h3 { font-size: .85rem; line-height: 1.25; }
  .product__price { font-size: .8rem; }
  .product__cta { padding: 7px 12px; font-size: .78rem; }
  .gift { padding: 12px; gap: 4px; border-radius: 14px; }
  .gift__amt { font-size: 1.35rem; }
  .gift h3 { font-size: .95rem; line-height: 1.25; }
  .gift__reach { font-size: .72rem; }
  .gift p:not(.gift__reach) { font-size: .8rem; margin-bottom: 4px; }
  .gift .btn { padding: 7px 12px; font-size: .78rem; }
  .gift__top .tag { font-size: .6rem; padding: 2px 7px; }
  .reel figcaption { padding-top: 6px; }
  .reel figcaption b { font-size: .85rem; }
  .reel figcaption span { font-size: .74rem; }
  .mcard h3 { font-size: .9rem; margin: 8px 0 2px; line-height: 1.25; }
  .mcard p { font-size: .76rem; }
}
@media (max-width: 640px) {
  .logo-grid, .sponsor-feature, .blog-grid, .past, .milestones, .mural-steps, .together, .ways, .give-ladder, .upcoming {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
  }
  .logo-grid > *, .sponsor-feature > *, .blog-grid > *, .past > *, .milestones > *, .mural-steps > *, .together > *, .ways > *, .give-ladder > *, .upcoming > * { min-width: 0; grid-column: auto !important; }
  .logo-tile { padding: 10px !important; min-height: 0 !important; }
  .blog-card h3, .milestone h3, .past-item h3, .up-card h3, .mural-step h3, .together__item h3 { font-size: .9rem !important; line-height: 1.25; }
  .blog-card p, .milestone p, .past-item p, .up-card p, .mural-step p, .together__item p, .way span { font-size: .78rem !important; }
  .milestone, .past-item, .up-card, .blog-card, .mural-step, .together__item, .way { padding: 10px !important; }
  .milestone img, .past-item img, .blog-card img, .up-card img { max-height: 110px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
  .way b { font-size: .88rem; }
  .week { grid-template-columns: 62px 1fr; padding: 10px 12px; column-gap: 10px; }
  .week b { font-size: .92rem; }
  .week span:last-child { font-size: .82rem; }
  .form .field { margin-bottom: 10px; }
  .form label { font-size: .85rem; }
  .form input, .form select, .form textarea { padding: 10px 12px; font-size: .95rem; }

}
@media (max-width: 640px) {
  .milestone p:not(.kicker), .past-item p, .blog-card p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Mission page */
.mission-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); }
.mission-pair__text { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.35; color: var(--ink); margin: 8px 0 0; }
.pillar-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar-item { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); border-top: 5px solid var(--c); text-decoration: none; color: inherit; transition: transform .3s var(--ease); }
.pillar-item:hover { transform: translateY(-4px); }
.pillar-item .card-icon { background: var(--c); color: #fff; margin-bottom: 6px; }
.pillar-item b { font-family: var(--display); font-size: 1.3rem; }
.pillar-item span:last-child { color: var(--ink-2); font-size: .95rem; }
.mission-band .link-arrow { justify-content: center; margin-top: 10px; }
@media (max-width: 860px) { .pillar-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .mission-pair { grid-template-columns: 1fr; gap: 18px; }
  .mission-pair__text { font-size: 1.1rem; }
  .pillar-list { gap: 10px; }
  .pillar-item { padding: 12px; gap: 4px; border-radius: 14px; }
  .pillar-item .card-icon { width: 34px; height: 34px; margin-bottom: 2px; }
  .pillar-item b { font-size: 1rem; }
  .pillar-item span:last-child { font-size: .8rem; line-height: 1.35; }
  .steps { grid-template-columns: 1fr 1fr !important; gap: 12px; }
}

/* Give page: two clear options + campaign list */
.page-hero--short { padding-bottom: clamp(36px, 5vw, 60px); }
.give-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.give-option { display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 3vw, 32px); background: #fff; border-radius: 22px; box-shadow: var(--shadow); text-decoration: none; color: inherit; border-top: 6px solid var(--coral); transition: transform .3s var(--ease); }
.give-option--monthly { border-top-color: var(--teal); }
.give-option:hover { transform: translateY(-4px); }
.give-option b { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.give-option > span:not(.card-icon):not(.btn) { color: var(--ink-2); flex: 1; }
.give-option .btn { align-self: flex-start; margin-top: 6px; }
.btn--teal { background: var(--teal); color: #fff; }
.btn--teal:hover { background: var(--teal-dark); color: #fff; }
.give-trust { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; font-size: .88rem; color: var(--ink-2); text-align: center; }
.give-trust svg { width: 18px; height: 18px; color: var(--teal); }
.camp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.camp { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: #fff; border-radius: 16px; box-shadow: var(--shadow); border-left: 5px solid var(--c); }
.camp__tag { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.camp h3 { font-family: var(--body); font-size: 1.1rem; font-weight: 800; letter-spacing: 0; margin: 0; }
.camp__impact { margin: 0; color: var(--ink-2); flex: 1; }
.camp__impact b { color: var(--coral); }
.camp .btn { align-self: flex-start; margin-top: 6px; }
.ways--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .camp-list { grid-template-columns: 1fr 1fr; } .ways--compact { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .give-options { gap: 10px; }
  .give-option { padding: 14px; gap: 4px; border-radius: 16px; }
  .give-option b { font-size: 1.15rem; }
  .give-option > span:not(.card-icon):not(.btn) { font-size: .8rem; line-height: 1.35; }
  .give-option .card-icon { width: 34px; height: 34px; }
  .give-option .btn { padding: 8px 12px; font-size: .8rem; }
  .give-trust { font-size: .74rem; }
  .camp-list { gap: 10px; }
  .camp { padding: 12px; gap: 4px; border-left-width: 4px; }
  .camp__tag { font-size: .6rem; }
  .camp h3 { font-size: .9rem; line-height: 1.25; }
  .camp__impact { font-size: .78rem; line-height: 1.35; }
  .camp .btn { padding: 6px 12px; font-size: .78rem; }
}
.camp { overflow: hidden; }
.camp__img { width: calc(100% + 36px); margin: -18px -18px 8px; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@media (max-width: 640px) { .camp__img { width: calc(100% + 24px); margin: -12px -12px 6px; aspect-ratio: 4 / 3; } }
.camp__img, .camp .camp__img { width: 100% !important; margin: 0 0 8px !important; border-radius: 10px; aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .camp .camp__img { aspect-ratio: 4 / 3; border-radius: 8px; margin-bottom: 6px !important; } }
/* Founding changemakers photo: static, names underneath */
.founders-photo { margin: 0; }
.founders-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.founders-photo figcaption { margin-top: 12px; text-align: center; font-weight: 700; color: var(--ink); font-size: 1.05rem; letter-spacing: .02em; }
.founders-photo figcaption b { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 2px; }

/* Health: $10 dignity kit show-and-tell */
.kit-photo { margin: 0 0 20px; }
.kit-photo img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.kit-photo figcaption { font-size: .8rem; color: var(--ink-3); margin-top: 6px; text-align: right; }
.kit-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; }
.kit-box { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: clamp(18px, 2.5vw, 28px); }
.kit-box h3 { font-family: var(--body); font-size: 1.1rem; font-weight: 800; letter-spacing: 0; margin: 0 0 12px; }
.kit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kit-list li { display: flex; align-items: center; gap: 12px; }
.kit-list b { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 1.2rem; }
@media (max-width: 760px) { .kit-grid { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 640px) { .kit-box { padding: 14px; } .kit-list b { width: 32px; height: 32px; font-size: 1rem; } .kit-list li span { font-size: .9rem; } }
/* Photos marked data-static never animate */
.motion .img-reveal:has(img[data-static]) { clip-path: none !important; }
img[data-static] { transform: none !important; transition: none !important; animation: none !important; }
.media-duo--one { grid-template-columns: minmax(0, 760px) !important; justify-content: center; }
/* About: "I Have a Dream" song for Mama */
.song__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.song__video { margin: 0; }
.song__video video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #000; box-shadow: var(--shadow); display: block; }
.song__video figcaption { font-size: .85rem; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 860px) { .song__inner { grid-template-columns: 1fr; gap: 16px; } }

/* Header Give button on phones and tablets (main nav is hidden there) */
.header-give { display: none; }
@media (max-width: 1220px) {
  .header-give { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 6px; padding: 8px 14px; font-size: .85rem; position: relative; z-index: 120; }
  .header-give svg { width: 15px; height: 15px; }
  body.menu-open .header-give { visibility: hidden; }
}

@media (max-width: 640px) {
  /* Program pills: small two-column chips */
  .pillar-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pillar-link { gap: 8px; padding: 6px 10px 6px 6px; font-size: .8rem; line-height: 1.2; border-width: 1px; }
  .pillar-link .card-icon { width: 28px; height: 28px; flex: none; }
  .pillar-link .card-icon svg { width: 14px; height: 14px; }
  .pillar-link b { font-size: .8rem; }

  /* Mission statement: compact */
  .mission-band { padding: 32px 0 6px; }
  .mission-band__text { font-size: 1.02rem; line-height: 1.45; }
  .mission-band .link-arrow { font-size: .82rem; margin-top: 6px; }
  .mission-band__words { font-size: .7rem; margin-top: 10px; }

  /* Stats band: one line */
  .hero-band__row { flex-wrap: nowrap; justify-content: space-between; gap: 6px; padding-block: 12px; }
  .hero-band__item { gap: 5px; }
  .hero-band__item svg { width: 15px; height: 15px; }
  .hero-band__item b { font-size: .68rem; letter-spacing: .01em; white-space: nowrap; }

  .song__text .lede { font-size: .95rem; }
}
@media (max-width: 1220px) {
  .menu-toggle, .header-give { flex-shrink: 0; }
  .header-give svg { flex: none; }
  .site-header .brand { min-width: 0; flex-shrink: 1; }
}
@media (max-width: 380px) { .site-header .brand-word__top { font-size: .9rem; } .site-header .brand-word__bottom { font-size: .6rem; } .header-give { padding: 7px 11px; } }
@media (max-width: 430px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand img.brand-mark { height: 36px; width: auto; }
  .site-header .brand-word__top { font-size: .86rem; }
  .site-header .brand-word__bottom { font-size: .58rem; letter-spacing: .26em; }
  .header-give { padding: 7px 11px; font-size: .8rem; margin-right: 2px; }
}
/* Home: give choice box (once / monthly) */
.give-options--stack { grid-template-columns: 1fr 1fr; gap: 12px; }
.give-box--choice .give-option { box-shadow: none; border: 1px solid var(--line); border-top-width: 6px; }
@media (max-width: 640px) { .give-box--choice { padding: 16px; } .give-box--choice h3 { font-size: 1.1rem; } }
.give-box--choice .give-option { border-top-color: var(--coral); }
.give-box--choice .give-option--monthly { border-top-color: var(--teal); }
@media (max-width: 640px) { .give-option .btn { white-space: nowrap; padding: 8px 10px; font-size: .78rem; gap: 4px; } .give-option .btn svg { width: 13px; height: 13px; } }

/* Phones: all six program campaigns in one compact box */
@media (max-width: 640px) {
  .prog-camps { display: block !important; background: #fff; border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
  .prog-camps > .prog-camp:not([hidden]) { display: flex !important; flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-radius: 0; box-shadow: none; border-top: 0; border-bottom: 1px solid var(--line); border-left: 4px solid var(--c); opacity: 1 !important; transform: none !important; }
  .prog-camps > .prog-camp:last-child { border-bottom: 0; }
  .prog-camp__img { flex: none; width: 78px; }
  .prog-camp__img img { aspect-ratio: 1 !important; border-radius: 10px; }
  .prog-camp__img .card-icon { display: none; }
  .prog-camp__body { padding: 0 !important; gap: 2px; min-width: 0; }
  .prog-camp__body .kicker { font-size: .66rem; margin: 0; }
  .prog-camp__body h3 { font-size: .95rem !important; line-height: 1.2; }
  .prog-camp__body > p:not(.kicker):not(.prog-camp__goal) { display: none; }
  .prog-camp__goal { font-size: .74rem; }
  .prog-camp .btn-row { padding-top: 4px; gap: 10px; flex-wrap: nowrap; }
  .prog-camp .btn-row .btn { padding: 6px 12px; font-size: .76rem; }
  .prog-camp .btn-row .link-arrow { font-size: .76rem; }
  .prog-camp .soon { font-size: .58rem; padding: 2px 6px; }
  #programs .load-more { margin-top: 12px; }
}
/* Home: top 4 campaigns and simple giving section */
.camp-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .camp-list--4 { grid-template-columns: 1fr 1fr; } }
.donate-simple { max-width: 860px; }
.donate-trust { margin-top: 18px; }
@media (max-width: 640px) { .camp-list--4 { grid-template-columns: 1fr 1fr !important; } .donate-trust { font-size: .82rem; } }
.motion [data-reveal]:has(img[data-static]), .motion [data-stagger] > *:has(img[data-static]) { opacity: 1 !important; transform: none !important; }
/* Show a photo in full, never cropped */
.img-full { max-height: none !important; aspect-ratio: auto !important; }
.img-full img { height: auto !important; object-fit: contain !important; }
.split .img-full { aspect-ratio: auto !important; }
/* Trips FAQ: nested "More questions" + compact on phones */
.faq-more > summary { color: var(--teal); }
.faq--nested { margin: 4px 0 8px; padding-left: 12px; border-left: 2px solid var(--line); }
@media (max-width: 640px) {
  .faq summary { padding: 12px 34px 12px 0; font-size: .92rem; }
  .faq summary::after { width: 10px; height: 10px; border-width: 2px; margin-top: -7px; }
  .faq details p { font-size: .86rem; padding-right: 10px; margin: 0 0 10px; }
  /* Card photos: natural height, no blank gap under the image */
  .card--photo .card-img { aspect-ratio: auto !important; height: auto !important; }
  .card--photo .card-img img { aspect-ratio: 16 / 10 !important; max-height: 210px !important; height: auto; }
  .grid-3 .card--photo .card-img img, .grid-2 .card--photo .card-img img { max-height: 180px !important; }
}

/* Language picker */
.lang-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1.5px solid currentColor; border-radius: 999px; padding: 6px 12px; margin: 0 6px; font: inherit; font-size: .82rem; font-weight: 800; color: inherit; cursor: pointer; opacity: .9; }
.lang-btn svg { width: 16px; height: 16px; }
.lang-btn:hover { opacity: 1; }
.lang-btn--menu { margin: 12px 0 0; align-self: stretch; justify-content: center; color: #fff; border-color: rgba(255,255,255,.4); padding: 10px 14px; font-size: .9rem; }
.lang-panel { position: fixed; inset: 0; z-index: 400; background: rgba(8,26,30,.6); display: grid; place-items: center; padding: 16px; }
.lang-panel[hidden] { display: none; }
.lang-panel__box { position: relative; background: #fff; border-radius: 22px; padding: clamp(20px, 3vw, 32px); width: min(820px, 100%); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.lang-panel__title { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark, #0a615b); margin: 0 0 16px; }
.lang-panel__close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink); }
.lang-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lang-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #0f7a6f, #0a5f57); color: #fff; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; text-align: left; }
.lang-opt:hover, .lang-opt:focus-visible { filter: brightness(1.12); }
.lang-opt[aria-pressed="true"] { outline: 3px solid var(--gold, #c98f1f); outline-offset: 2px; }
.lang-flag { font-size: 1.3rem; line-height: 1; }
.lang-panel__note { margin: 16px 0 0; font-size: .8rem; color: var(--ink-3); }
@media (max-width: 760px) { .lang-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .lang-opt { padding: 12px; font-size: .9rem; } }
/* Hide Google Translate's own toolbar and tooltips */
.goog-te-banner-frame, iframe.skiptranslate, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip, .VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* Projects mega menu */
.dropdown--mega { position: fixed; top: calc(var(--header-h) - 8px); left: 50%; width: min(1180px, 96vw); }
.dropdown__inner.mega { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 22px; min-width: 0; padding: 22px 24px; }
.mega__head { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--teal); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-dark, #0a615b); }
.mega__col a { padding: 7px 8px; font-size: .9rem; border-radius: 8px; color: var(--ink); }
.mobile-menu .m-sub .m-head { margin: 10px 0 2px; padding-left: 14px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); }
.mobile-menu .m-sub > * { flex-shrink: 0; overflow: visible; }
.mobile-menu .m-group.is-open .m-sub { max-height: 1400px; }
.mobile-menu .m-sub .m-head { line-height: 1.3; }

/* ===== Projects catalog (Projects Abroad style) ===== */
.pchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pchip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--ink); }
.pchip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pcard { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.pcard[hidden] { display: none; }
.pcard__img { position: relative; display: block; }
.pcard__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.pcard__country { position: absolute; left: 12px; top: 12px; background: rgba(13,42,47,.85); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.pcard__soon { position: absolute; right: 12px; top: 12px; background: var(--gold-soft); color: var(--ink); font-size: .7rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; }
.pcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard__body h3 { font-family: var(--body); font-weight: 800; font-size: 1.08rem; letter-spacing: 0; line-height: 1.25; margin: 0; }
.pcard__body h3 a { color: inherit; text-decoration: none; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pcard__tags span { font-size: .72rem; font-weight: 700; background: var(--paper-2); color: var(--ink-2); padding: 3px 9px; border-radius: 999px; }
.pcard__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; color: var(--ink-2); }
.pcard__facts li { display: flex; gap: 8px; align-items: flex-start; }
.pcard__facts svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--teal); }
.pcard__price { margin: auto 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); }
.pcard__price b { font-size: 1.15rem; color: var(--coral); }
.pcard .btn { align-self: flex-start; }

/* Project detail */
.crumbs { font-size: .85rem; color: var(--ink-3); margin: 0 0 10px; }
.crumbs a { color: var(--teal); }
.pdetail { padding-top: calc(var(--header-h) + 30px); }
.pdetail__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; margin-top: 20px; }
.pdetail__img { margin: 0; }
.pdetail__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.pfacts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.pfacts div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.pfacts dt { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark, #0a615b); }
.pfacts dd { margin: 4px 0 0; font-weight: 700; font-size: .9rem; }
.phl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.phl { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; border-top: 4px solid var(--teal); }
.phl b { display: block; margin-bottom: 4px; }
.phl p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.pinc { grid-template-columns: 1fr 1fr; margin-top: 10px; }
.pbook { position: sticky; top: calc(var(--header-h) + 16px); background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.pbook__label { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pbook__price { margin: 0; font-family: var(--display); font-size: 2rem; color: var(--coral); line-height: 1.1; }
.pbook__note { margin: 0 0 10px; color: var(--ink-2); font-size: .9rem; }
.pbook__trust { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: .85rem; color: var(--ink-2); }
.pbook__trust li { display: flex; gap: 8px; align-items: center; }
.pbook__trust svg { width: 16px; height: 16px; color: var(--teal); }
.pitin { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.pitin li { display: grid; grid-template-columns: 70px 1fr; column-gap: 12px; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); }
.pitin .pday { grid-row: span 2; font-family: var(--display); font-weight: 700; color: var(--teal); }
.pitin b { font-size: .98rem; }
.pitin li > span:last-child { color: var(--ink-2); font-size: .88rem; }
@media (max-width: 1000px) { .pgrid { grid-template-columns: 1fr 1fr; } .pdetail__grid { grid-template-columns: 1fr; } .pbook { position: static; } .pfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pgrid { gap: 10px; }
  .pcard__body { padding: 10px 12px 12px; gap: 6px; }
  .pcard__body h3 { font-size: .88rem; }
  .pcard__tags span { font-size: .6rem; padding: 2px 6px; }
  .pcard__facts { font-size: .72rem; }
  .pcard__facts svg { width: 12px; height: 12px; }
  .pcard__price { font-size: .7rem; }
  .pcard__price b { font-size: .92rem; }
  .pcard .btn { padding: 6px 10px; font-size: .74rem; }
  .pcard__country { font-size: .58rem; left: 6px; top: 6px; padding: 3px 7px; }
  .pcard__soon { font-size: .56rem; right: 6px; top: 6px; padding: 3px 6px; }
  .pchips { gap: 6px; } .pchip { padding: 6px 11px; font-size: .78rem; }
  .pfacts { grid-template-columns: 1fr 1fr; gap: 8px; } .pfacts div { padding: 8px 10px; }
  .phl-grid, .pinc { grid-template-columns: 1fr; }
  .pitin li { grid-template-columns: 54px 1fr; padding: 8px 10px; }
  .pbook__price { font-size: 1.6rem; }
}
@media (max-width: 640px) { .pcard__facts li { font-size: .72rem; line-height: 1.35; } .pcard__price, .pcard__price span { font-size: .7rem; } .pitin li > span:last-child, .phl p { font-size: .82rem; } }