/*
Theme Name: Uzima
Theme URI: https://uzimawomeninternational.org
Author: Uzima Women Relief Group International
Description: Custom theme for Uzima Women Relief Group International, built from the "Organic" homepage design (warm cream/terracotta/olive palette, Caprasimo display type, Figtree body type).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: uzima
*/

/* ============================
   Design tokens
   ============================ */
:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-card: #fffdf8;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);

  --container: 1200px;
}

/* ============================
   Reset / base
   ============================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}
img { display: block; max-width: 100%; }
a { color: var(--color-accent-700); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px; overflow: hidden;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 700;
  font-size: 15px; line-height: 1.2; letter-spacing: 0.04em;
  border: none; border-radius: 999px;
  padding: 13px 30px;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-outline {
  border: 2px solid var(--color-neutral-500);
  color: var(--color-text);
  background: transparent;
}
.btn-outline.on-dark { border-color: var(--color-neutral-500); color: #fff; }
.btn-outline.on-dark:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.btn-outline.on-light { border-color: var(--color-accent); color: var(--color-accent-700); }
.btn-outline.on-light:hover { background: var(--color-accent-100); }
.btn-outline.on-tint { border-color: var(--color-accent-2-700); color: var(--color-accent-2-800); }
.btn-outline.on-tint:hover { background: var(--color-accent-2-200); }
.btn-arrow { justify-content: space-between; }

/* ============================
   Placeholder photo blocks
   (swap for real photos in Customizer > Homepage Photos)
   ============================ */
.ph {
  display: flex; align-items: flex-end;
  border-radius: var(--radius-lg);
  padding: 20px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  background-size: cover; background-position: center;
  color: var(--color-neutral-400);
  background-color: var(--color-neutral-700);
}
.ph.has-img { color: transparent; }
.ph.has-img span { display: none; }
.ph-light { background-color: var(--color-neutral-200); color: var(--color-neutral-500); }
.ph-tint { background-color: var(--color-accent-2-200); color: var(--color-accent-2-700); }

/* ============================
   Header
   ============================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  padding-top: 14px; padding-bottom: 14px;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-heading); font-size: 19px; flex: none;
}
.brand-name { line-height: 1.05; }
.brand-name .title { font-family: var(--font-heading); font-size: 19px; color: var(--color-text); }
.brand-name .tagline { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-500); }

.primary-nav { margin-left: 12px; }
.primary-nav ul { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.primary-nav a {
  font-size: 15px; font-weight: 600; color: var(--color-neutral-700);
}
.primary-nav a:hover { color: var(--color-accent-700); }
.header-cta { margin-left: auto; flex: none; }
.nav-toggle { display: none; margin-left: auto; }

/* ============================
   Hero
   ============================ */
.hero { background: var(--color-neutral-900); position: relative; overflow: hidden; }
.hero .container {
  padding-top: 76px; padding-bottom: 84px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.09); border: 1px solid var(--color-accent-2-600);
  color: var(--color-accent-2-200); padding: 7px 16px; border-radius: 999px;
  width: fit-content; font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; white-space: nowrap;
}
.hero h1 { font-size: 60px; line-height: 1.03; color: #fff; text-wrap: pretty; }
.hero-copy p { font-size: 19px; line-height: 1.6; color: var(--color-neutral-300); max-width: 520px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.hero-actions .btn { padding: 15px 34px; }

.hero-media { display: flex; flex-direction: column; gap: 14px; }
.hero-media .ph-main { height: 280px; }
.hero-media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-media-row .ph { height: 130px; padding: 16px; font-size: 10px; }
.stat-block {
  border-radius: var(--radius-lg); background: var(--color-accent-800);
  display: flex; flex-direction: column; justify-content: center; padding: 18px; gap: 2px;
}
.stat-block .num { font-family: var(--font-heading); font-size: 34px; color: #fff; line-height: 1; }
.stat-block .label { font-size: 12px; color: var(--color-accent-200); letter-spacing: 0.06em; text-transform: uppercase; }

/* ============================
   Funders strip
   ============================ */
.funders { background: var(--color-card); border-bottom: 1px solid var(--color-neutral-200); }
.funders .container {
  padding-top: 26px; padding-bottom: 26px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.funders-label {
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-neutral-500); font-weight: 700; flex: none;
}
.funders-list { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; flex: 1; }
.funders-list span { font-size: 14px; font-weight: 700; color: var(--color-neutral-500); }

/* ============================
   About / Who we are
   ============================ */
.section { padding: 66px 0 20px; }
.about { padding: 76px 0 20px; }
.about .container {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center;
}
.about-media { display: flex; flex-direction: column; gap: 14px; }
.about-media .ph-main { height: 300px; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-card { border-radius: var(--radius-lg); padding: 20px; }
.stat-card.tint-2 { background: var(--color-accent-2-100); }
.stat-card.tint-1 { background: var(--color-accent-100); }
.stat-card .num { font-family: var(--font-heading); font-size: 32px; line-height: 1; }
.stat-card.tint-2 .num { color: var(--color-accent-2-800); }
.stat-card.tint-1 .num { color: var(--color-accent-800); }
.stat-card .label { font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; margin-top: 4px; }
.stat-card.tint-2 .label { color: var(--color-accent-2-700); }
.stat-card.tint-1 .label { color: var(--color-accent-700); }

.about-copy { display: flex; flex-direction: column; gap: 18px; }
.eyebrow { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 700; }
.about-copy h2, .section-head h2 { font-size: 40px; line-height: 1.12; text-wrap: pretty; }
.about-copy > p { font-size: 17px; line-height: 1.65; color: var(--color-neutral-700); text-wrap: pretty; }
.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.mini-card { background: var(--color-card); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.mini-card h3 { font-size: 19px; margin-bottom: 6px; }
.mini-card p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }

/* ============================
   Three pillars
   ============================ */
.pillars-head h2 { margin-bottom: 30px; }
.pillars-head .eyebrow { display: block; margin-bottom: 10px; }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar-card {
  background: var(--color-card); border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px;
}
.pillar-num {
  width: 46px; height: 46px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 20px;
}
.pillar-card:nth-child(odd) .pillar-num { background: var(--color-accent-100); color: var(--color-accent-800); }
.pillar-card:nth-child(even) .pillar-num { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.pillar-card h3 { font-size: 25px; }
.pillar-card p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }

/* ============================
   Section head (shared: programs / stories)
   ============================ */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
}

/* ============================
   Programs grid
   ============================ */
.programs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.program-card {
  background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); display: block; color: inherit;
}
.program-card:hover { box-shadow: var(--shadow-md); }
.program-card .ph { height: 150px; border-radius: 0; padding: 14px; font-size: 10px; }
.program-card-body { padding: 20px; display: flex; flex-direction: column; gap: 7px; }
.program-card-body h3 { font-size: 21px; }
.program-card-body p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-700); }
.card-link { font-size: 14px; font-weight: 700; color: var(--color-accent-700); margin-top: 2px; }

/* ============================
   Award banner
   ============================ */
.award-band { margin-top: 66px; background: var(--color-accent-2-100); }
.award-band .container {
  padding-top: 60px; padding-bottom: 60px;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: center;
}
.award-band .ph { height: 300px; background-color: var(--color-accent-2-200); color: var(--color-accent-2-700); }
.award-copy { display: flex; flex-direction: column; gap: 16px; }
.award-copy .eyebrow { color: var(--color-accent-2-800); }
.award-copy h2 { font-size: 38px; line-height: 1.12; text-wrap: pretty; }
.award-copy p { font-size: 17px; line-height: 1.65; color: var(--color-neutral-700); text-wrap: pretty; }
.award-actions { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }

/* ============================
   Stories
   ============================ */
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.story-card {
  background: var(--color-card); border-radius: var(--radius-lg); padding: 26px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px;
}
.story-card blockquote { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); font-style: italic; }
.story-person { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--color-neutral-200); flex: none; background-size: cover; background-position: center; }
.story-person .name { font-weight: 700; font-size: 15px; }
.story-person .role { font-size: 13px; color: var(--color-neutral-500); }

.story-card.featured { background: var(--color-accent-2-100); }
.story-card.featured:hover { box-shadow: var(--shadow-md); }
.story-card.featured .eyebrow { color: var(--color-accent-2-800); font-size: 11px; }
.story-card.featured h3 { font-family: var(--font-heading); font-size: 22px; line-height: 1.2; }
.story-card.featured p { font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); }
.story-card.featured .avatar { background-color: var(--color-accent-2-200); }
.story-card.featured .role { color: var(--color-neutral-700); }

/* ============================
   Ways to give CTA band
   ============================ */
.give-band { padding: 66px 0 76px; }
.give-card {
  background: var(--color-neutral-900); border-radius: var(--radius-lg); padding: 52px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.give-copy h2 { font-size: 36px; line-height: 1.12; color: #fff; margin-bottom: 14px; }
.give-copy p { font-size: 17px; line-height: 1.6; color: var(--color-neutral-300); }
.give-actions { display: flex; flex-direction: column; gap: 12px; }
.give-actions .btn { padding: 13px 28px; }
.give-actions .btn-primary { padding: 15px 30px; }

/* ============================
   Footer
   ============================ */
.site-footer { background: var(--color-neutral-900); color: var(--color-neutral-300); }
.footer-grid {
  padding: 56px 32px 28px; display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand .brand { display: flex; align-items: center; gap: 10px; }
.footer-brand .brand .title { font-family: var(--font-heading); font-size: 18px; color: #fff; }
.footer-brand .brand-mark { width: 36px; height: 36px; font-size: 18px; }
.footer-blurb { font-size: 14px; line-height: 1.65; }
.footer-address { font-size: 14px; line-height: 1.7; }
.footer-address a { color: inherit; }
.footer-social { display: flex; gap: 9px; margin-top: 4px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--color-neutral-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--color-neutral-300);
}
.footer-social a:hover { border-color: var(--color-accent); color: #fff; }

.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h3 {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: #fff; font-weight: 700; margin-bottom: 4px;
}
.footer-col a { font-size: 14px; color: var(--color-neutral-300); }
.footer-col a:hover { color: #fff; }
.footer-col a.accent { color: var(--color-accent-300); }

.footer-bottom {
  max-width: var(--container); margin: 0 auto; padding: 20px 32px 40px;
  border-top: 1px solid var(--color-neutral-700);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--color-neutral-500);
}
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { color: var(--color-neutral-500); }
.footer-bottom-links a:hover { color: #fff; }

/* ============================
   Generic page/post content (non-front-page templates)
   ============================ */
.page-content-wrap { padding: 66px 0 90px; }
.page-content-wrap h1 { font-size: 44px; line-height: 1.1; margin-bottom: 24px; }
.page-content-wrap .entry-content { font-size: 17px; line-height: 1.7; color: var(--color-neutral-800); }
.page-content-wrap .entry-content > * + * { margin-top: 1.1em; }
.page-content-wrap .entry-content h2 { font-size: 28px; margin-top: 1.4em; }
.page-content-wrap .entry-content h3 { font-size: 22px; margin-top: 1.2em; }
.page-content-wrap .entry-content img { border-radius: var(--radius-md); }
.page-content-wrap .entry-content a { text-decoration: underline; }

/* ============================
   Inner-page hero variants
   ============================ */
.hero-dark { background: var(--color-neutral-900); }
.hero-dark .container { padding: 54px 32px 60px; display: flex; flex-direction: column; gap: 16px; }
.hero-dark .eyebrow { color: var(--color-accent-300); }
.hero-dark h1 { font-family: var(--font-heading); font-size: 50px; line-height: 1.06; color: #fff; max-width: 760px; text-wrap: pretty; }
.hero-dark > .container > p { font-size: 18px; line-height: 1.65; color: var(--color-neutral-300); max-width: 640px; }

.hero-dark-split .container { padding: 60px 32px 66px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 52px; align-items: center; }
.hero-dark-split-copy { display: flex; flex-direction: column; gap: 18px; }
.hero-dark-split-copy .eyebrow { color: var(--color-accent-300); }
.hero-dark-split-copy h1 { font-family: var(--font-heading); font-size: 50px; line-height: 1.06; color: #fff; text-wrap: pretty; }
.hero-dark-split-copy > p { font-size: 18px; line-height: 1.65; color: var(--color-neutral-300); max-width: 540px; }
.hero-dark-split .ph { height: 320px; }

.simple-hero { max-width: 900px; margin: 0 auto; padding: 56px 32px 20px; }
.simple-hero.wide { max-width: 1200px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 52px; padding-bottom: 0; }
.simple-hero h1 { font-family: var(--font-heading); font-size: 44px; line-height: 1.08; margin: 10px 0 16px; text-wrap: pretty; }
.simple-hero > p { font-size: 17px; line-height: 1.7; color: var(--color-neutral-700); max-width: 560px; }

.program-hero .container { padding: 24px 32px 20px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: center; }
.program-hero-copy { display: flex; flex-direction: column; gap: 16px; }
.program-hero-copy h1 { font-family: var(--font-heading); font-size: 48px; line-height: 1.07; text-wrap: pretty; }
.program-hero-copy > p { font-size: 18px; line-height: 1.65; color: var(--color-neutral-700); max-width: 490px; text-wrap: pretty; }
.program-hero .ph { height: 330px; }
.program-hero-actions { display: flex; gap: 13px; margin-top: 6px; flex-wrap: wrap; }

.breadcrumb { font-size: 13px; color: var(--color-neutral-500); padding: 36px 0 0; }
.breadcrumb a { color: var(--color-neutral-500); }
.breadcrumb a:hover { color: var(--color-accent-700); }

/* ============================
   Tag pills
   ============================ */
.pill { display: inline-block; padding: 6px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pill-sm { padding: 5px 13px; font-size: 12px; }
.pill-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.pill-accent2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.pill-neutral { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.pill-dark { background: rgba(255,255,255,0.08); border: 1px solid var(--color-neutral-600); color: var(--color-neutral-200); font-weight: 600; }
.pill-solid { background: var(--color-neutral-900); color: #fff; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  border: 1.5px solid var(--color-neutral-300); color: var(--color-neutral-700);
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; display: inline-block;
}
.chip:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.chip.selected { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-900); font-weight: 700; }

/* ============================
   Callouts
   ============================ */
.callout { border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.callout-tint1 { background: var(--color-accent-100); }
.callout-tint2 { background: var(--color-accent-2-100); }
.callout .label { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700; }
.callout-tint1 .label { color: var(--color-accent-800); }
.callout-tint2 .label { color: var(--color-accent-2-800); }
.callout p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); }

.crisis-bar {
  background: var(--color-accent-100); border-radius: var(--radius-lg); padding: 26px; margin-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.crisis-bar h3 { font-size: 20px; margin-bottom: 4px; }
.crisis-bar p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }

/* ============================
   Dark highlight band (signature work)
   ============================ */
.dark-band { margin-top: 60px; background: var(--color-neutral-900); }
.dark-band .container { padding: 60px 32px; }
.dark-band .eyebrow { color: var(--color-accent-300); margin-bottom: 10px; display: block; }
.dark-band h2 { font-family: var(--font-heading); font-size: 42px; line-height: 1.1; color: #fff; margin-bottom: 12px; }
.dark-band > .container > p { font-size: 18px; line-height: 1.65; color: var(--color-neutral-300); max-width: 660px; margin-bottom: 34px; }
.highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.highlight-card { background: var(--color-card); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.highlight-card .label { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 700; }
.highlight-card h3 { font-size: 24px; }
.highlight-card p { font-size: 16px; line-height: 1.65; color: var(--color-neutral-700); }

/* ============================
   Two-col cards grid (current/ongoing/funded projects)
   ============================ */
.card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.info-card { background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.info-card .ph { height: 170px; border-radius: 0; padding: 16px; font-size: 10px; }
.info-card-body { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.info-card-body h3 { font-family: var(--font-heading); font-size: 26px; }
.info-card-body > p { font-size: 16px; line-height: 1.65; color: var(--color-neutral-700); }
.info-card-body .meta { font-size: 12px; color: var(--color-neutral-500); }

/* ============================
   Steps (numbered how-to-join cards)
   ============================ */
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step-card {
  background: var(--color-card); border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 9px;
}
.step-num {
  width: 38px; height: 38px; border-radius: 999px; background: var(--color-accent-100);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); color: var(--color-accent-800);
}
.step-card h3 { font-family: var(--font-heading); font-size: 20px; }
.step-card p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }

/* ============================
   Past / completed project card
   ============================ */
.project-card {
  background: var(--color-card); border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start;
  margin-bottom: 20px;
}
.project-card .ph { height: 170px; border-radius: var(--radius-md); padding: 14px; font-size: 10px; }
.project-card-body { display: flex; flex-direction: column; gap: 11px; }
.project-card-body h3 { font-family: var(--font-heading); font-size: 26px; }
.project-card-body p { font-size: 16px; line-height: 1.65; color: var(--color-neutral-700); }
.project-card-body a.more { font-size: 15px; font-weight: 700; color: var(--color-accent-700); }
.project-card.no-media { grid-template-columns: 1fr; }

/* ============================
   Logo / funder grid
   ============================ */
.logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.logo-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.logo-tile {
  background: var(--color-card); border-radius: var(--radius-lg); height: 84px; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  font-size: 13px; font-weight: 700; color: var(--color-neutral-600); text-align: center;
}

/* ============================
   Fund-this-work CTA band
   ============================ */
.fund-band {
  background: var(--color-accent-100); border-radius: var(--radius-lg); padding: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.fund-band h3 { font-family: var(--font-heading); font-size: 32px; margin-bottom: 8px; max-width: 560px; }
.fund-band p { font-size: 17px; line-height: 1.6; color: var(--color-neutral-700); max-width: 560px; }

/* ============================
   Board / team cards (About)
   ============================ */
.board-lead {
  background: var(--color-accent-2-100); border-radius: var(--radius-lg); padding: 34px;
  display: grid; grid-template-columns: 150px 1fr; gap: 32px; align-items: center; margin-bottom: 26px;
}
.board-lead .avatar-lg { width: 150px; height: 150px; border-radius: 999px; background: var(--color-accent-2-200); }
.board-lead .label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-2-800); font-weight: 700; }
.board-lead h3 { font-family: var(--font-heading); font-size: 30px; margin: 4px 0; }
.board-lead p { font-size: 16px; line-height: 1.65; color: var(--color-neutral-800); max-width: 720px; }

.board-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.board-card {
  background: var(--color-card); border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow-sm); display: flex; gap: 22px; align-items: flex-start;
}
.board-card .avatar-md { width: 88px; height: 88px; border-radius: 999px; background: var(--color-neutral-200); flex-shrink: 0; }
.board-card h4 { font-family: var(--font-heading); font-size: 21px; }
.board-card .role { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500); font-weight: 700; margin-top: 3px; }
.board-card .role.accent { color: var(--color-accent-700); }
.board-card p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }
.board-card.cta { background: var(--color-accent-100); flex-direction: column; justify-content: center; gap: 10px; }
.board-card.cta h4 { font-size: 22px; }
.board-card.cta p { color: var(--color-neutral-800); }

/* ============================
   Timeline (About — our story)
   ============================ */
.timeline { display: flex; flex-direction: column; gap: 14px; }
.timeline-item {
  background: var(--color-card); border-radius: var(--radius-lg); padding: 22px;
  display: flex; gap: 16px; align-items: baseline; box-shadow: var(--shadow-sm);
}
.timeline-item .year { font-family: var(--font-heading); font-size: 26px; color: var(--color-accent-700); min-width: 66px; }
.timeline-item p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }
.timeline-item.featured { background: var(--color-accent-2-100); box-shadow: none; }
.timeline-item.featured .year { color: var(--color-accent-2-800); }
.timeline-item.featured p { color: var(--color-accent-2-900); font-weight: 600; }

/* ============================
   Stories & news
   ============================ */
.filter-row { padding: 36px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.story-featured {
  background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 1fr 1fr;
}
.story-featured .ph { border-radius: 0; min-height: 340px; }
.story-featured-body { padding: 44px; display: flex; flex-direction: column; gap: 13px; justify-content: center; }
.story-featured-body h3 { font-family: var(--font-heading); font-size: 34px; line-height: 1.15; text-wrap: pretty; }
.story-featured-body p { font-size: 17px; line-height: 1.65; color: var(--color-neutral-700); }
.story-featured-body .meta { font-size: 14px; color: var(--color-neutral-500); }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.news-card { background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.news-card:hover { box-shadow: var(--shadow-md); }
.news-card .ph { height: 180px; border-radius: 0; }
.news-card-body { padding: 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.news-card-body h3 { font-family: var(--font-heading); font-size: 21px; line-height: 1.25; }
.news-card-body p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }
.news-card-body .meta { font-size: 13px; color: var(--color-neutral-500); margin-top: auto; }

.ticker-list { display: flex; flex-direction: column; }
.ticker-item {
  display: flex; align-items: center; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--color-neutral-200);
}
.ticker-item .pill { flex: none; }
.ticker-item a { font-weight: 700; }

/* ============================
   Get Involved
   ============================ */
.involve-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.involve-card {
  background: var(--color-card); border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px;
}
.involve-card .dot { width: 40px; height: 40px; border-radius: 999px; }
.involve-card .dot.tint1 { background: var(--color-accent-100); }
.involve-card .dot.tint2 { background: var(--color-accent-2-100); }
.involve-card h3 { font-family: var(--font-heading); font-size: 21px; }
.involve-card p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }
.involve-card a.more { font-size: 15px; font-weight: 700; color: var(--color-accent-700); margin-top: auto; }

.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tier-card { background: var(--color-card); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.tier-card.featured { background: var(--color-accent-2-100); box-shadow: none; }
.tier-card h3 { font-family: var(--font-heading); font-size: 24px; }
.tier-card .price { font-size: 16px; color: var(--color-neutral-700); }
.tier-card .price strong { color: inherit; }
.tier-card .desc { font-size: 15px; line-height: 1.65; color: var(--color-neutral-700); border-top: 1px solid var(--color-neutral-200); padding-top: 14px; }
.tier-card.featured .desc { border-top-color: var(--color-accent-2-300); color: var(--color-neutral-800); }

.join-band {
  background: var(--color-card); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm);
  margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.join-band h3 { font-family: var(--font-heading); font-size: 22px; margin-bottom: 6px; }
.join-band p { font-size: 16px; line-height: 1.65; color: var(--color-neutral-700); max-width: 640px; }

.event-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
.event-card { background: var(--color-card); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.event-card.tint { background: var(--color-accent-100); box-shadow: none; }
.event-card h3 { font-family: var(--font-heading); font-size: 26px; }
.event-card.tint h3 { font-size: 24px; }
.event-card p { font-size: 16px; line-height: 1.65; color: var(--color-neutral-700); }
.event-card.tint p { color: var(--color-neutral-800); }

/* ============================
   Contact
   ============================ */
.contact-grid { padding: 56px 0 20px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 52px; }
.contact-form-wrap h1 { font-family: var(--font-heading); font-size: 44px; line-height: 1.08; margin: 10px 0 16px; text-wrap: pretty; }
.contact-form-wrap > p { font-size: 17px; line-height: 1.7; color: var(--color-neutral-700); max-width: 560px; }
.contact-form { background: var(--color-card); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 14px; font-weight: 700; }
.form-field label .optional { font-weight: 400; color: var(--color-neutral-500); }
.form-field textarea.input { min-height: 130px; border-radius: var(--radius-lg); resize: vertical; }
.form-status { font-size: 14px; padding: 10px 0; }
.form-status.success { color: var(--color-accent-2-800); }
.form-status.error { color: #a4342a; }

.contact-side { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card { background: var(--color-card); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 18px; }
.contact-info-card .label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 700; margin-bottom: 5px; }
.contact-info-card .big { font-size: 18px; font-weight: 700; }
.contact-info-card .email { font-size: 16px; color: var(--color-accent-700); font-weight: 600; }
.social-row { display: flex; gap: 9px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 999px; border: 1.5px solid var(--color-neutral-300);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--color-neutral-600);
}
.social-row a:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.support-card { background: var(--color-accent-2-100); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.support-card h3 { font-family: var(--font-heading); font-size: 21px; }
.support-card p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); }
.map-block { height: 340px; border-radius: var(--radius-lg); background: var(--color-neutral-200); display: flex; align-items: center; justify-content: center; color: var(--color-neutral-500); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin: 40px 0 76px; }

/* ============================
   Donate
   ============================ */
.donate-panel {
  background: var(--color-card); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin: 48px 0 0;
}
.donate-panel .label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 700; margin-bottom: 10px; }
.seg > * { padding: 11px 28px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--color-neutral-700); white-space: nowrap; }
.seg > .active { background: var(--color-neutral-900); color: #fff; font-weight: 700; }
.amount-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.amount-tile { border: 2px solid var(--color-neutral-300); border-radius: var(--radius-lg); padding: 18px; cursor: pointer; }
.amount-tile:hover { border-color: var(--color-accent); }
.amount-tile .amt { font-family: var(--font-heading); font-size: 26px; }
.amount-tile .desc { font-size: 14px; line-height: 1.5; color: var(--color-neutral-700); margin-top: 3px; }
.amount-tile.selected { border-color: var(--color-accent); background: var(--color-accent-100); }
.amount-tile.selected .amt, .amount-tile.selected .desc { color: var(--color-accent-900); }
.amount-tile .badge { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-800); font-weight: 700; margin-top: 6px; }
.trust-row { border-top: 1px solid var(--color-neutral-200); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--color-neutral-600); }

.cause-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cause-card { background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.cause-card .ph { height: 150px; border-radius: 0; }
.cause-card-body { padding: 24px; }
.cause-card-body h3 { font-family: var(--font-heading); font-size: 21px; margin-bottom: 5px; }
.cause-card-body p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }

.give-way-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.give-way-card { background: var(--color-card); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 9px; }
.give-way-card.tint { background: var(--color-accent-2-100); box-shadow: none; }
.give-way-card h3 { font-family: var(--font-heading); font-size: 21px; }
.give-way-card p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }
.give-way-card.tint p { color: var(--color-neutral-800); }
.give-way-card a.more { font-size: 15px; font-weight: 700; color: var(--color-accent-700); margin-top: auto; }
.give-way-card.tint a.more { color: var(--color-accent-2-800); }

/* ============================
   Careers
   ============================ */
.job-list { display: flex; flex-direction: column; gap: 24px; padding-bottom: 76px; }
.job-card { background: var(--color-card); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; }
.job-card h3 { font-family: var(--font-heading); font-size: 30px; }
.job-card > p.lead { font-size: 16px; line-height: 1.7; color: var(--color-neutral-700); }
.job-section { border-top: 1px solid var(--color-neutral-200); padding-top: 16px; }
.job-section .label { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 700; margin-bottom: 8px; }
.job-section p { font-size: 16px; line-height: 1.75; color: var(--color-neutral-700); }

/* ============================
   Resource hub
   ============================ */
.emergency-band { background: var(--color-accent-100); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; margin: 40px 0 0; }
.emergency-band h2 { font-family: var(--font-heading); font-size: 26px; }
.hotline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hotline-card { background: var(--color-card); border-radius: var(--radius-md); padding: 22px; }
.hotline-card h4 { font-family: var(--font-heading); font-size: 19px; margin-bottom: 5px; }
.hotline-card p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); margin-bottom: 6px; }
.hotline-card .num { font-size: 18px; font-weight: 700; color: var(--color-accent-800); }

.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.category-card { background: var(--color-card); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 9px; }
.category-card h3 { font-family: var(--font-heading); font-size: 22px; }
.category-card p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }

/* ============================
   Impact page (reports / newsletters / gallery)
   ============================ */
.report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.report-tile { background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.report-tile .year-block { height: 150px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 20px; }
.report-tile .year-block.latest { background: var(--color-accent-100); color: var(--color-accent-800); }
.report-tile .year-block.past { background: var(--color-neutral-200); color: var(--color-neutral-600); }
.report-tile-body { padding: 20px; }
.report-tile-body .title { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.report-tile-body .sub { font-size: 13px; color: var(--color-neutral-500); }

.newsletter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.newsletter-tile { background: var(--color-card); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.newsletter-tile .tag { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; color: var(--color-neutral-500); }
.newsletter-tile.latest .tag { color: var(--color-accent-700); }
.newsletter-tile .period { font-weight: 700; font-size: 15px; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-card { background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-card .ph { height: 170px; border-radius: 0; }
.gallery-card-body { padding: 20px; }
.gallery-card-body .title { font-family: var(--font-heading); font-size: 19px; }
.gallery-card-body .sub { font-size: 13px; color: var(--color-neutral-500); margin-top: 3px; }
.gallery-card.video { background: var(--color-neutral-900); }
.gallery-card.video .play {
  height: 170px; background: var(--color-neutral-700); display: flex; align-items: center; justify-content: center;
}
.gallery-card.video .play span {
  width: 56px; height: 56px; border-radius: 999px; background: var(--color-card);
  display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--color-accent-700);
}
.gallery-card.video .gallery-card-body .title { color: #fff; }
.gallery-card.video .gallery-card-body .sub { color: var(--color-neutral-400); }

/* ============================
   Responsive
   ============================ */
@media (max-width: 980px) {
  .hero .container,
  .about .container,
  .award-band .container { grid-template-columns: 1fr; }
  .give-card { grid-template-columns: 1fr; padding: 36px; }
  .programs-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .stories-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 46px; }
  .about-copy h2, .section-head h2, .pillars-head h2 { font-size: 32px; }

  .hero-dark-split .container,
  .program-hero .container,
  .simple-hero.wide,
  .contact-grid,
  .donate-panel,
  .board-lead,
  .card-grid-2,
  .highlight-grid,
  .story-featured,
  .event-grid { grid-template-columns: 1fr; }
  .involve-grid,
  .step-grid,
  .tier-grid,
  .news-grid,
  .report-grid,
  .newsletter-grid,
  .gallery-grid,
  .logo-grid,
  .give-way-grid,
  .cause-grid,
  .hotline-grid,
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .project-card { grid-template-columns: 1fr; }
  .hero-dark h1, .program-hero-copy h1, .dark-band h2 { font-size: 38px; }
  .board-lead { text-align: center; justify-items: center; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .primary-nav { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--color-neutral-300);
    background: transparent; cursor: pointer; order: 2;
  }
  .site-header.nav-open .primary-nav {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-card); border-bottom: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-md); padding: 10px 20px 18px;
  }
  .site-header.nav-open .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 14px; }
  .header-cta { order: 3; margin-left: 0; }
  .site-header .container { flex-wrap: wrap; position: relative; }
  .brand { flex: 1; }

  .hero .container { padding: 44px 20px 56px; }
  .hero h1 { font-size: 34px; }
  .hero-copy p { font-size: 17px; }
  .pillars-grid, .programs-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; padding: 44px 20px 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding: 20px 20px 32px; }
  .section, .about, .award-band .container, .give-band { padding-left: 0; padding-right: 0; }
  .about-copy h2, .section-head h2, .pillars-head h2, .award-copy h2 { font-size: 28px; }
  .mini-cards, .about-stats { grid-template-columns: 1fr; }
  .give-copy h2 { font-size: 28px; }

  .involve-grid,
  .step-grid,
  .tier-grid,
  .news-grid,
  .report-grid,
  .newsletter-grid,
  .gallery-grid,
  .logo-grid,
  .logo-grid.cols-5,
  .give-way-grid,
  .cause-grid,
  .hotline-grid,
  .category-grid,
  .board-grid,
  .form-row,
  .amount-grid { grid-template-columns: 1fr; }
  .hero-dark .container,
  .hero-dark-split .container,
  .program-hero .container,
  .simple-hero,
  .simple-hero.wide,
  .contact-grid,
  .donate-panel { padding-left: 20px; padding-right: 20px; }
  .hero-dark h1, .hero-dark-split-copy h1, .program-hero-copy h1, .contact-form-wrap h1, .simple-hero h1, .dark-band h2 { font-size: 32px; }
  .board-lead .avatar-lg { width: 100px; height: 100px; }
  .fund-band, .join-band, .crisis-bar { padding: 28px; }
  .job-card, .donate-panel { padding: 26px; }
}