/* Logo-derived identity: cyan #00a0d2, green #60b09c, charcoal #242624.
   Deeper cyan/green variants provide accessible text and button contrast. */
:root {
  --brand-cyan: #00a0d2;
  --brand-green: #60b09c;
  --brand-action: #007b9f;
  --brand-green-deep: #2b7160;
  --brand-charcoal: #242624;
  --ink: #242624;
  --ink-deep: #1b211f;
  --sun: #00a0d2;
  --sea: #60b09c;
  --paper: #fcfdfc;
  --black: #242624;
  --neutral-dark: #46554f;
  --neutral: #586860;
  --neutral-light: #98a79f;
  --neutral-lighter: #d9e5de;
  --neutral-lightest: #f1f6f3;
  --neutral-darker: #3a4841;
  --beige: #f4f8f5;
  --soft-sand: #edf4f0;
  --pink-light: #dfefe7;
  --light-yellow: #dceff5;
  --forest-green: #2b7160;
  --dusty-plum: #d6ebe2;
  --lavender: #007b9f;
  --mint-teal: #60b09c;
}
::selection { background: #c3e8dd; color: var(--ink); }
:focus-visible { outline-color: var(--brand-action); }
.btn, .btn-nav, .footer .news-form .btn { background: var(--brand-action); color: #fff; }
.btn:hover, .btn-nav:hover, .footer .news-form .btn:hover { background: #006985; color: #fff; }
.btn.is-secondary { background: transparent; border-color: #b5cbc1; color: var(--ink); }
.btn.is-secondary:hover { background: #dfefe7; border-color: var(--brand-green-deep); color: var(--ink); }
.tag, .tag.is-pink, .tag.is-yellow, .tag.is-green, .tag.is-plum, .tag.is-lavender, .tag.is-teal { background: #d9eee5; color: #265e50; }
.navbar, .navbar.scrolled { background: #fff; border-bottom: 1px solid #e2eae5; }
.navbar.scrolled { box-shadow: 0 4px 24px #22362d0a; }
.nav-logo { padding: 0; border-radius: 0; }
.nav-logo img { width: 155px; height: 58px; }
.nav-link { color: #3e4b45; }
.nav-link:hover, .nav-link.active, .nav-link[aria-current=page] { color: var(--brand-action); }
.nav-toggle span { background: var(--ink); }
.skip-link { background: var(--brand-action); color: #fff; }
.impact-item:first-child { background: #bce5ef; color: #173e48; }
.impact-item:nth-of-type(2) { background: #c9e6db; color: #214d40; }
.impact-item:nth-of-type(3) { background: #dceee6; color: #214d40; }
.impact-item:last-child { background: var(--ink); color: #fff; }
.prog-icon-card, .prog-icon-card:nth-child(4n+3) { background: #edf5f0; border-color: #dfeae3; }
.prog-icon-card:nth-child(4n+2) { background: #eaf5f8; }
.prog-icon-card:nth-child(4n+4) { background: #f0f4f1; }
.mission-card:first-child { background: #d9eee3; }
.mission-card:nth-child(2) { background: #dceff5; }
.home-about .btn.is-secondary, .involved-layout .btn.is-secondary { color: white; border-color: #90aea0; }
.home-about .btn.is-secondary:hover, .involved-layout .btn.is-secondary:hover { background: #ffffff12; }
.home-about .about-split-left h3 { color: #ecf5ef; }
.home-about .about-split-right p, .involved-text p { color: #d2e1d8; }
.footer-menu-col a:hover, .footer-legal a:hover { color: #83d2e9; }
.footer .news-form input { border-color: #8da298; }
.partner-tab.active { background: var(--brand-green-deep); border-color: var(--brand-green-deep); }
.text-btn, .programme-more { color: var(--brand-action); }
.icon-wrap.is-yellow, .icon-wrap.is-pink, .icon-wrap.is-green, .icon-wrap.is-teal { background: #dcefe6; }
.icon-wrap svg, .icon-wrap.is-yellow svg, .icon-wrap.is-pink svg, .icon-wrap.is-teal svg, .icon-wrap.is-green svg { stroke: var(--brand-green-deep); }

/* Home: generous editorial opening, grounded by real community photography. */
.home-hero.brand-hero {
  display: grid; grid-template-columns: 1fr 1.06fr; align-items: center;
  gap: 52px 64px; padding: 155px max(36px, calc((100% - 1168px) / 2)) 40px;
  min-height: 0; height: auto; background: #f0f6f2; color: var(--ink);
  border-radius: 0 0 38px 38px; margin-bottom: 44px; overflow: visible;
}
.home-hero .hero-content { text-align: left; min-width: 0; }
.home-hero .hero-content-inner { max-width: 580px; }
.home-hero .hero-eyebrow { color: var(--brand-green-deep); font-size: 10px; letter-spacing: .12em; margin-bottom: 25px; }
.home-hero h1 { font-size: clamp(44px, 4.6vw, 66px); line-height: 1.06; color: var(--ink); font-weight: 500; letter-spacing: -.045em; margin-bottom: 24px; text-wrap: initial; }
.hero-title-accent { color: var(--brand-action); }
.home-hero .hero-sub { font-size: 16px; line-height: 1.8; color: #526159; margin: 0 0 28px; max-width: 490px; }
.home-hero .hero-actions { justify-content: flex-start; margin-bottom: 18px; gap: 12px; }
.home-hero .hero-note { color: #64746b; font-size: 11px; max-width: 390px; line-height: 1.65; }
.home-hero .hero-photo { width: 100%; max-width: none; margin: 0; position: relative; align-self: center; }
.home-hero .hero-photo img { width: 100%; height: auto; aspect-ratio: 1.35; object-fit: cover; object-position: center; border-radius: 24px; }
.home-hero .hero-photo figcaption { position: static; background: var(--brand-charcoal); color: #eaf3ed; padding: 18px 22px; font-size: 12px; border-radius: 0 0 20px 20px; margin: -18px 16px 0; transform: translateY(0); padding-top: 30px; }
.hero-proof { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 28px; border-top: 1px solid #cfdfd4; gap: 24px; }
.hero-proof > div { display: flex; align-items: center; gap: 16px; }
.hero-proof > div + div { border-left: 1px solid #cfdfd4; padding-left: 32px; }
.hero-proof strong { font-family: 'Outfit', sans-serif; font-size: 33px; font-weight: 500; letter-spacing: -.04em; color: var(--brand-green-deep); }
.hero-proof span { font-size: 12px; color: #526159; line-height: 1.5; }

/* Shared inner-page heroes, including long programme names and detail pages. */
.page-hero.brand-hero, .hero.brand-hero:not(.home-hero) {
  padding: 145px max(36px, calc((100% - 1168px) / 2)) 58px;
  grid-template-columns: 1fr 1fr; gap: 64px; min-height: 540px;
  background: #eff6f2; color: var(--ink); border-radius: 0 0 36px 36px;
}
.brand-hero .tag { background: transparent; color: var(--brand-green-deep); padding: 0 0 10px; border-radius: 0; border-bottom: 2px solid var(--brand-green); margin-bottom: 24px; }
.page-hero.brand-hero h1, .hero.brand-hero:not(.home-hero) h1, .prog-detail.brand-hero h1 { color: var(--ink); font-size: clamp(34px, 4vw, 56px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; margin-bottom: 22px; overflow-wrap: break-word; }
.page-hero.brand-hero p, .hero.brand-hero:not(.home-hero) p, .page-hero.brand-hero .hero-sub, .prog-detail.brand-hero p, .prog-detail.brand-hero li { color: #526159; font-size: 16px; line-height: 1.8; }
.page-hero.brand-hero .hero-bg, .page-hero.brand-hero .page-hero-bg, .hero.brand-hero:not(.home-hero) .hero-bg { height: 350px; border-radius: 22px; box-shadow: 14px 14px 0 #d3e9df; }
.brand-hero .hero-content-inner { max-width: 590px; }
.hero-action-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-action-bar .btn { font-size: 12px; padding: 13px 21px; min-height: 47px; }
.volunteer-hero .hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
}
.volunteer-hero .hero-actions .btn {
  min-height: 48px;
  padding: 13px 22px;
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .volunteer-hero .hero-actions { align-items: stretch; gap: 10px; margin-top: 24px; }
  .volunteer-hero .hero-actions .btn { width: 100%; }
}
.prog-detail.brand-hero { background: #eff6f2; color: var(--ink); padding: 122px 0 58px !important; border-radius: 0 0 36px 36px; }
.prog-detail.brand-hero .breadcrumb, .prog-detail.brand-hero .breadcrumb a { color: #526c5d; font-size: 12px; }
.prog-detail.brand-hero .breadcrumb { margin-bottom: 30px; }
.prog-detail.brand-hero .breadcrumb a:hover { color: var(--brand-action); }
.prog-detail.brand-hero .prog-detail-layout { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.prog-detail.brand-hero .prog-detail-content { grid-column: 1; grid-row: 1; min-width: 0; }
.prog-detail.brand-hero .prog-detail-img { grid-column: 2; grid-row: 1; min-width: 0; }
.prog-detail.brand-hero .prog-detail-img img { height: 360px; max-height: none; border-radius: 22px; box-shadow: 14px 14px 0 #d3e9df; }
@media (max-width: 1024px) {
  .home-hero.brand-hero, .page-hero.brand-hero, .hero.brand-hero:not(.home-hero) { gap: 38px; }
  .home-hero h1 { font-size: 49px; }
  .prog-detail.brand-hero .prog-detail-layout { gap: 38px; }
  .hero-proof > div { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@media (max-width: 900px) {
  .nav-logo img { width: 126px; height: 46px; }
  .nav-menu { background: var(--ink-deep); }
  .nav-menu .nav-link { color: #f0f6f2; }
  .nav-menu .nav-link:hover { color: #88d7ee; }
  .nav-toggle.active span { background: var(--ink); }
}
@media (max-width: 760px) {
  .home-hero.brand-hero, .page-hero.brand-hero, .hero.brand-hero:not(.home-hero) {
    grid-template-columns: 1fr; padding: 116px 24px 35px; gap: 32px; min-height: 0; border-radius: 0 0 26px 26px;
  }
  .home-hero .hero-content-inner { max-width: 600px; }
  .home-hero h1 { font-size: clamp(40px, 7.5vw, 56px); max-width: 550px; margin-inline: 0; }
  .home-hero .hero-sub { font-size: 15px; max-width: 540px; }
  .home-hero .hero-note { margin: 0; max-width: 380px; }
  .home-hero .hero-eyebrow { font-size: 9px; letter-spacing: .09em; margin-bottom: 20px; }
  .home-hero .hero-photo img { aspect-ratio: 1.65; height: auto; border-radius: 18px; }
  .home-hero .hero-photo figcaption { font-size: 11px; padding: 28px 16px 14px; margin-inline: 10px; }
  .hero-proof { gap: 12px; padding-top: 22px; }
  .hero-proof > div + div { padding-left: 16px; }
  .hero-proof strong { font-size: 27px; }
  .hero-proof span { font-size: 10px; }
  .page-hero.brand-hero .hero-bg, .page-hero.brand-hero .page-hero-bg, .hero.brand-hero:not(.home-hero) .hero-bg { grid-column: 1; grid-row: 2; height: 285px; box-shadow: 8px 8px 0 #d3e9df; }
  .page-hero.brand-hero h1, .hero.brand-hero:not(.home-hero) h1, .prog-detail.brand-hero h1 { font-size: clamp(33px, 7vw, 45px); }
  .page-hero.brand-hero p, .page-hero.brand-hero .hero-sub, .prog-detail.brand-hero p, .prog-detail.brand-hero li { font-size: 14px; }
  .hero-action-bar { margin-top: 24px; gap: 10px; }
  .hero-action-bar .btn { padding-inline: 18px; }
  .prog-detail.brand-hero { padding: 102px 0 36px !important; }
  .prog-detail.brand-hero .prog-detail-layout { display: flex; flex-direction: column; gap: 30px; }
  .prog-detail.brand-hero .prog-detail-content { order: -1; width: 100%; }
  .prog-detail.brand-hero .prog-detail-img { width: 100%; }
  .prog-detail.brand-hero .prog-detail-img img { height: 290px; box-shadow: 8px 8px 0 #d3e9df; }
}
@media (max-width: 380px) {
  .home-hero.brand-hero { padding-inline: 20px; }
  .hero-proof strong { font-size: 24px; }
  .hero-proof > div + div { padding-left: 10px; }
  .hero-action-bar .btn { padding-inline: 15px; font-size: 11px; }
}