/* ============================================
   Page-Specific Layouts
   Each page has its OWN distinct layout family
   ============================================ */

/* ============ HOME: split-hero + stat-band + programme-grid + story-feature + partner-strip + CTA ============ */
.home-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--header-h));
  align-items: stretch;
  margin-top: var(--header-h);
}
.home-hero-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  background: var(--bg-alt);
}
.home-hero-content h1 { margin-bottom: var(--space-md); }
.home-hero-content .hero-lead { font-size: 1.1rem; color: var(--text-muted); margin-bottom: var(--space-lg); max-width: 42ch; }
.home-hero-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.home-hero-image {
  position: relative; overflow: hidden;
  min-height: 400px;
}
.home-hero-image img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center;
}
.home-hero-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,29,33,0.05) 0%, rgba(200,52,27,0.08) 100%);
}

.home-stat-band {
  background: var(--black); color: var(--cream);
  padding: var(--space-xl) var(--space-md);
}
.home-stat-band .stat-band { max-width: var(--container); margin: 0 auto; }
.home-stat-band .stat-number { color: var(--amber); }
.home-stat-band .stat-label { color: rgba(255,251,245,0.7); }

.home-programmes {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}
.home-programmes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.home-programmes .section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--space-lg); flex-wrap: wrap; gap: var(--space-sm);
}

.home-work-section {
  background: var(--bg-alt);
  padding: var(--space-2xl) 0;
}
.home-work-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-md);
  max-width: var(--container); margin: 0 auto; padding: 0 var(--space-md);
}
.home-work-grid .work-feature img {
  width: 100%; height: 100%; min-height: 300px; object-fit: cover;
  border-radius: var(--radius-md);
}
.home-work-grid .work-side {
  display: flex; flex-direction: column; gap: var(--space-md);
}
.home-work-grid .work-side img {
  width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-md);
}
.home-work-grid .work-caption {
  background: var(--card-bg); padding: var(--space-md);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-top: -4px;
}
.home-work-grid .work-caption h3 { font-size: 1.1rem; }
.home-work-grid .work-caption p { font-size: 0.875rem; color: var(--text-muted); }

.home-story-feature {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg); align-items: center;
}
.home-story-feature .story-image img {
  width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.home-story-feature .story-content h2 { margin-bottom: var(--space-sm); }
.home-story-feature .story-content p { margin-bottom: var(--space-sm); }
.home-story-feature .story-quote {
  border-left: 4px solid var(--amber);
  padding-left: var(--space-md); margin: var(--space-md) 0;
  font-style: italic; color: var(--text-muted);
  font-size: 1.05rem;
}

.home-partner-strip {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.home-partner-strip p {
  font-size: 0.8rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--space-md);
}

/* ============ WHO WE ARE: page-hero + intro-block + tabbed-content + overview-cards + CTA-panels ============ */
.page-hero {
  margin-top: var(--header-h);
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  background: var(--black); color: var(--cream);
  text-align: center;
}
.page-hero h1 { color: var(--cream); margin-bottom: var(--space-sm); }
.page-hero p { color: rgba(255,251,245,0.75); max-width: 60ch; margin: 0 auto; }

.whoweare-intro {
  max-width: var(--container-narrow); margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}
.whoweare-intro .intro-text { font-size: 1.15rem; line-height: 1.8; color: var(--text); }
.whoweare-mission-headline {
  text-align: center; padding: var(--space-xl) var(--space-md);
  background: var(--bg-alt);
}
.whoweare-mission-headline h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  max-width: 50ch; margin: 0 auto; line-height: 1.4;
  color: var(--terracotta);
}

.whoweare-tabs {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}
.tab-list {
  display: flex; gap: 0; border-bottom: 2px solid var(--border);
  margin-bottom: var(--space-lg); overflow-x: auto;
}
.tab-list a {
  font-family: var(--font-head); font-weight: 500; font-size: 0.95rem;
  padding: 0.75rem 1.25rem; color: var(--text-muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.tab-list a:hover { color: var(--text); }
.tab-list a.active { color: var(--red); border-bottom-color: var(--red); }
.tab-panel { display: none; animation: fadeIn 0.3s; }
.tab-panel:not([hidden]) { display: block; }
.tab-panel h3 { margin-bottom: var(--space-sm); }
.tab-panel p { margin-bottom: var(--space-sm); }
.tab-panel ul { margin: var(--space-sm) 0; }
.tab-panel li { margin-bottom: 0.5rem; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.whoweare-overview {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}
.overview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.overview-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-lg);
  transition: transform 0.2s, box-shadow 0.2s;
}
.overview-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.overview-card .icon-circle {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-alt); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-sm);
}
.overview-card .icon-circle span {
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--amber);
}
.overview-card h3 { margin-bottom: 0.5rem; }
.overview-card p { font-size: 0.925rem; color: var(--text-muted); margin-bottom: var(--space-sm); }

.whoweare-cta-panels {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: var(--container); margin: var(--space-xl) auto;
  padding: 0 var(--space-md); gap: var(--space-md);
}
.cta-panel {
  padding: var(--space-lg); border-radius: var(--radius-md);
  display: flex; flex-direction: column; justify-content: space-between;
}
.cta-panel-amber { background: var(--amber); color: var(--black); }
.cta-panel-red { background: var(--red); color: #fff; }
.cta-panel h3 { margin-bottom: var(--space-sm); }
.cta-panel-red h3 { color: #fff; }
.cta-panel p { margin-bottom: var(--space-md); }
.cta-panel-amber p { color: rgba(26,29,33,0.7); }

/* ============ WHAT WE DO: intro-section + programme-cards + approach-process + CTA ============ */
.whatwedo-intro {
  margin-top: var(--header-h);
  padding: var(--space-2xl) var(--space-md);
  max-width: var(--container-narrow); margin-left: auto; margin-right: auto;
  text-align: center;
}
.whatwedo-intro h1 { margin-bottom: var(--space-md); }
.whatwedo-intro p { font-size: 1.1rem; color: var(--text-muted); margin: 0 auto; }

.whatwedo-programmes {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--space-md) var(--space-2xl);
}
.programme-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.programme-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: var(--card-bg);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}
.programme-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.programme-card img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; }
.programme-card-body { padding: var(--space-md); }
.programme-card-body h3 { margin-bottom: 0.4rem; font-size: 1.2rem; }
.programme-card-body p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: var(--space-sm); }
.programme-card .programme-num {
  font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  color: var(--amber); display: block; margin-bottom: 0.25rem;
}

.whatwedo-approach {
  background: var(--black); color: var(--cream);
  padding: var(--space-2xl) 0;
}
.whatwedo-approach .container { max-width: var(--container); }
.whatwedo-approach h2 { color: var(--cream); text-align: center; margin-bottom: var(--space-lg); }
.approach-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.approach-step {
  text-align: center; position: relative;
}
.approach-step .step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--amber); color: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  margin: 0 auto var(--space-sm);
}
.approach-step h3 { color: var(--cream); font-size: 1.1rem; margin-bottom: 0.4rem; }
.approach-step p { font-size: 0.875rem; color: rgba(255,251,245,0.65); }

/* ============ WHERE WE WORK: map-region + location-cards + rationale ============ */
.wherewework-map {
  margin-top: var(--header-h);
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--cream) 100%);
}
.wherewework-map h1 { margin-bottom: var(--space-sm); }
.wherewework-map p { color: var(--text-muted); max-width: 50ch; margin: 0 auto; }
.map-embed {
  max-width: 800px; margin: var(--space-lg) auto;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16/9;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; }

.wherewework-locations {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}
.location-card {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: var(--space-lg); align-items: start;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  margin-bottom: var(--space-lg);
}
.location-card .location-info { padding: var(--space-lg); }
.location-card .location-info h3 { margin-bottom: var(--space-sm); }
.location-card .location-info .loc-address {
  font-size: 0.9rem; color: var(--text-muted); margin-bottom: var(--space-md);
  padding: var(--space-sm); background: var(--bg-alt); border-radius: var(--radius-sm);
}
.location-card .programme-list { list-style: none; padding: 0; }
.location-card .programme-list li {
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
  font-size: 0.925rem; display: flex; align-items: center; gap: 0.5rem;
}
.location-card .programme-list li:last-child { border-bottom: none; }
.location-card .programme-list li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); flex-shrink: 0;
}
.location-card .location-img img {
  width: 100%; height: 100%; min-height: 300px; object-fit: cover;
}

.wherewework-rationale {
  background: var(--bg-alt);
  padding: var(--space-2xl) var(--space-md);
}
.wherewework-rationale .container-narrow { max-width: 700px; }
.wherewework-rationale h2 { margin-bottom: var(--space-md); }
.wherewework-rationale p { margin-bottom: var(--space-sm); }

.future-locations {
  text-align: center; padding: var(--space-xl) var(--space-md);
  color: var(--text-muted);
  font-style: italic;
}

/* ============ OUR IMPACT: impact-dashboard + metrics + reports + stories + documents ============ */
.impact-dashboard {
  margin-top: var(--header-h);
  padding: var(--space-2xl) var(--space-md);
  background: var(--black); color: var(--cream);
}
.impact-dashboard .container { max-width: var(--container); }
.impact-dashboard h1 { color: var(--cream); margin-bottom: var(--space-sm); }
.impact-dashboard .dashboard-lead { color: rgba(255,251,245,0.7); max-width: 60ch; margin-bottom: var(--space-xl); }
.impact-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.impact-metric {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md); padding: var(--space-lg);
  text-align: center;
}
.impact-metric .metric-number {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem); color: var(--amber); line-height: 1;
}
.impact-metric .metric-label {
  font-size: 0.875rem; color: rgba(255,251,245,0.7); margin-top: 0.5rem;
}
.impact-metric .metric-detail {
  font-size: 0.75rem; color: rgba(255,251,245,0.5); margin-top: 0.3rem;
}

.impact-breakdown {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}
.impact-breakdown h2 { margin-bottom: var(--space-lg); }
.breakdown-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.breakdown-list {
  list-style: none; padding: 0;
}
.breakdown-list li {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--space-sm); align-items: center;
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--border);
}
.breakdown-list .bd-date { font-size: 0.8rem; color: var(--amber); font-weight: 600; font-family: var(--font-head); white-space: nowrap; }
.breakdown-list .bd-desc { font-size: 0.925rem; }
.breakdown-list .bd-count {
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  color: var(--red); white-space: nowrap;
}

.impact-stories {
  background: var(--bg-alt); padding: var(--space-2xl) 0;
}
.impact-stories .container { max-width: var(--container); padding: 0 var(--space-md); }
.impact-stories h2 { margin-bottom: var(--space-lg); }
.stories-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md);
}
.story-card {
  background: var(--card-bg); border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s;
}
.story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.story-card img { width: 100%; height: 200px; object-fit: cover; }
.story-card .story-body { padding: var(--space-md); }
.story-card .story-body h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.story-card .story-body p { font-size: 0.9rem; color: var(--text-muted); }
.story-card .story-meta { font-size: 0.8rem; color: var(--amber); font-weight: 600; margin-bottom: 0.5rem; }

.impact-documents {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}
.doc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md);
}
.doc-card {
  display: flex; gap: var(--space-sm); align-items: center;
  padding: var(--space-md); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: box-shadow 0.2s;
}
.doc-card:hover { box-shadow: var(--shadow-sm); }
.doc-card .doc-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--bg-alt); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-card .doc-icon span { font-size: 1.2rem; }
.doc-card .doc-info h4 { font-size: 0.95rem; margin-bottom: 0.15rem; }
.doc-card .doc-info p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

.impact-transparency {
  background: var(--bg-alt); padding: var(--space-xl) var(--space-md);
  text-align: center;
}
.impact-transparency .container-narrow p {
  font-size: 1rem; color: var(--text-muted); margin: 0 auto;
}

/* ============ GET INVOLVED: pathway-grid with 7 options ============ */
.getinvolved-header {
  margin-top: var(--header-h);
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  text-align: center;
}
.getinvolved-header h1 { margin-bottom: var(--space-sm); }
.getinvolved-header p { color: var(--text-muted); max-width: 55ch; margin: 0 auto; font-size: 1.1rem; }

.pathway-grid {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--space-md) var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.pathway-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-lg);
  display: flex; flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.pathway-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pathway-card .pathway-num {
  position: absolute; top: var(--space-md); right: var(--space-md);
  font-family: var(--font-head); font-weight: 700; font-size: 2rem;
  color: var(--warm-gray-light); line-height: 1;
}
.pathway-card .pathway-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--bg-alt); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-sm);
}
.pathway-card .pathway-icon span { font-size: 1.5rem; }
.pathway-card h3 { margin-bottom: 0.5rem; }
.pathway-card p { font-size: 0.925rem; color: var(--text-muted); margin-bottom: var(--space-md); flex: 1; }
.pathway-card.featured {
  background: var(--red); color: #fff; border-color: var(--red);
}
.pathway-card.featured h3 { color: #fff; }
.pathway-card.featured p { color: rgba(255,255,255,0.85); }
.pathway-card.featured .pathway-num { color: rgba(255,255,255,0.15); }
.pathway-card.featured .pathway-icon { background: rgba(255,255,255,0.15); }
.pathway-card.featured .btn-white { margin-top: auto; }

.getinvolved-subscribe {
  background: var(--bg-alt); padding: var(--space-2xl) var(--space-md);
  text-align: center;
}
.getinvolved-subscribe .container-narrow { max-width: 600px; }
.getinvolved-subscribe h2 { margin-bottom: var(--space-sm); }
.getinvolved-subscribe p { color: var(--text-muted); margin-bottom: var(--space-md); }
.subscribe-form {
  display: flex; gap: var(--space-sm); max-width: 400px; margin: 0 auto;
  flex-wrap: wrap;
}
.subscribe-form input {
  flex: 1; min-width: 200px; padding: 0.75rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: 0.95rem;
}
.subscribe-form input:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px rgba(242,160,61,0.15); }
.subscribe-msg { margin-top: var(--space-sm); font-size: 0.9rem; color: #2e7d32; display: none; }
.subscribe-msg.show { display: block; }

/* ============ NEWS & STORIES: featured-story + filterable-grid ============ */
.news-featured {
  margin-top: var(--header-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
.news-featured .featured-img img {
  width: 100%; height: 100%; min-height: 300px; object-fit: cover;
}
.news-featured .featured-content {
  padding: var(--space-2xl) var(--space-lg);
  background: var(--black); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
}
.news-featured .featured-content .featured-tag {
  font-family: var(--font-head); font-size: 0.8rem; font-weight: 600;
  color: var(--amber); text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}
.news-featured .featured-content h1 { color: var(--cream); margin-bottom: var(--space-sm); }
.news-featured .featured-content p { color: rgba(255,251,245,0.75); margin-bottom: var(--space-md); }

.news-filters {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-lg) var(--space-md) 0;
  display: flex; gap: var(--space-xs); flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.news-filters button {
  font-family: var(--font-head); font-size: 0.875rem; font-weight: 500;
  padding: 0.5rem 1rem; border: none; background: none;
  color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.news-filters button:hover { color: var(--text); }
.news-filters button.active { color: var(--red); border-bottom-color: var(--red); }

.news-grid {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.news-card {
  background: var(--card-bg); border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.news-card img { width: 100%; height: 180px; object-fit: cover; }
.news-card .news-body { padding: var(--space-md); flex: 1; display: flex; flex-direction: column; }
.news-card .news-date { font-size: 0.75rem; color: var(--amber); font-weight: 600; font-family: var(--font-head); margin-bottom: 0.4rem; }
.news-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.news-card p { font-size: 0.875rem; color: var(--text-muted); flex: 1; }
.news-card .news-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--bg-alt); color: var(--terracotta);
  margin-top: var(--space-sm);
}

/* ============ CONTACT: split-form + info-sidebar + map-area ============ */
.contact-split {
  margin-top: var(--header-h);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  min-height: calc(100vh - var(--header-h));
}
.contact-form-area {
  padding: var(--space-2xl) var(--space-lg);
  background: var(--cream);
}
.contact-form-area h1 { margin-bottom: var(--space-sm); }
.contact-form-area .contact-lead { color: var(--text-muted); margin-bottom: var(--space-xl); }
.contact-sidebar {
  background: var(--black); color: var(--cream);
  padding: var(--space-2xl) var(--space-lg);
}
.contact-sidebar h2 { color: var(--cream); margin-bottom: var(--space-md); }
.contact-info-item {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  margin-bottom: var(--space-md);
}
.contact-info-item .ci-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.1); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.contact-info-item .ci-icon span { font-size: 1rem; }
.contact-info-item .ci-content h4 { color: var(--cream); font-size: 0.9rem; margin-bottom: 0.2rem; }
.contact-info-item .ci-content p { color: rgba(255,251,245,0.7); font-size: 0.875rem; margin: 0; }
.contact-info-item .ci-content a { color: var(--amber); }

.contact-sidebar .sidebar-section {
  margin-top: var(--space-lg); padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.contact-sidebar .sidebar-section h3 { color: var(--cream); font-size: 1rem; margin-bottom: var(--space-sm); }
.contact-sidebar .sidebar-section p { color: rgba(255,251,245,0.6); font-size: 0.875rem; }

.contact-map {
  padding: var(--space-2xl) var(--space-md);
  background: var(--bg-alt);
}
.contact-map h2 { text-align: center; margin-bottom: var(--space-lg); }
.contact-map .map-embed { max-width: 900px; }

/* ============ 404 Page ============ */
.error-page {
  margin-top: var(--header-h);
  min-height: calc(60vh);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}
.error-page h1 { font-size: 4rem; color: var(--amber); }
.error-page p { color: var(--text-muted); margin: var(--space-sm) 0 var(--space-lg); }

/* ============ Responsive Layouts ============ */
@media (max-width: 992px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-image { min-height: 300px; order: -1; }
  .home-programmes-grid { grid-template-columns: repeat(2, 1fr); }
  .home-work-grid { grid-template-columns: 1fr 1fr; }
  .home-work-grid .work-feature { grid-column: 1 / -1; }
  .home-story-feature { grid-template-columns: 1fr; }
  .overview-cards { grid-template-columns: 1fr; }
  .whoweare-cta-panels { grid-template-columns: 1fr; }
  .programme-cards-grid { grid-template-columns: 1fr; }
  .approach-steps { grid-template-columns: repeat(2, 1fr); }
  .impact-metrics { grid-template-columns: repeat(2, 1fr); }
  .breakdown-grid { grid-template-columns: 1fr; }
  .stories-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .pathway-grid { grid-template-columns: repeat(2, 1fr); }
  .news-featured { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-split { grid-template-columns: 1fr; }
  .location-card { grid-template-columns: 1fr; }
  .location-card .location-img img { min-height: 200px; }
}

@media (max-width: 768px) {
  .home-programmes-grid { grid-template-columns: 1fr; }
  .home-work-grid { grid-template-columns: 1fr; }
  .impact-metrics { grid-template-columns: 1fr; }
  .stories-grid { grid-template-columns: 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
  .pathway-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .programme-card { grid-template-columns: 1fr; }
  .programme-card img { height: 200px; }
  .approach-steps { grid-template-columns: 1fr; }
  .home-hero-content { padding: var(--space-xl) var(--space-md); }
}

@media (max-width: 576px) {
  .home-hero-actions { flex-direction: column; }
  .home-hero-actions .btn { width: 100%; }
  .stat-band { grid-template-columns: 1fr 1fr; }
}

/* === WHO WE ARE: FOUNDER STORY + TEAM GRID === */
.founder-story {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
}
.founder-story-img {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.founder-story-img img {
  width: 100%;
  height: auto;
  display: block;
}
.founder-story-content h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  color: var(--black);
  margin-bottom: .25rem;
}
.founder-story-content .founder-title {
  color: var(--red);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: var(--space-md);
}
.founder-story-content p {
  margin-bottom: var(--space-sm);
  line-height: 1.7;
  color: var(--text-body);
}
.founder-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--space-md);
}
.founder-credentials span {
  background: rgba(242, 160, 61, .12);
  color: var(--terracotta);
  padding: .35rem .8rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 500;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.team-member {
  text-align: center;
  background: var(--cream);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.team-member:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.team-member img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.team-member-info {
  padding: var(--space-sm) var(--space-sm) var(--space-md);
}
.team-member-info h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--black);
  margin-bottom: .15rem;
}
.team-member-info p {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
}
.overview-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}
.overview-section h2 {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.overview-card-full {
  background: var(--cream);
  border-radius: 16px;
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.overview-card-full h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  color: var(--black);
  margin-bottom: var(--space-md);
}
@media (max-width: 768px) {
  .founder-story { grid-template-columns: 1fr; }
  .founder-story-img { max-width: 280px; margin: 0 auto; }
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
}
/* ============================================
   WHO WE ARE PAGE - REBUILD STYLES
   Appended to page-layouts.css
   ============================================ */

/* ============ 2. HERO SECTION ============ */
.whoweare-hero {
  position: relative;
  margin-top: var(--header-h);
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-image: url('/assets/img/photos/page22_img1.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.whoweare-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 29, 33, 0.55);
  z-index: 1;
}
.whoweare-hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
  width: 100%;
}
.whoweare-breadcrumb {
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
}
.whoweare-breadcrumb a {
  color: var(--amber);
  text-decoration: none;
  transition: color 0.2s;
}
.whoweare-breadcrumb a:hover {
  color: var(--cream);
}
.whoweare-breadcrumb span {
  color: rgba(255, 251, 245, 0.8);
}
.whoweare-hero-eyebrow {
  color: var(--amber);
  margin-bottom: 0.75rem;
}
.whoweare-hero h1 {
  color: var(--cream);
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 700;
  max-width: 18ch;
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}
.whoweare-hero-support {
  color: rgba(255, 251, 245, 0.9);
  font-size: 1.05rem;
  max-width: 60ch;
  line-height: 1.7;
}

/* ============ 3. ORGANISATION INTRODUCTION ============ */
.whoweare-intro-section {
  background: var(--cream);
  padding: var(--space-2xl) var(--space-md);
}
.whoweare-intro-content {
  max-width: 800px;
  margin: 0 auto;
}
.whoweare-intro-content h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: var(--black);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}
.whoweare-intro-content p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

/* ============ 4. IMPACT HIGHLIGHT STRIP ============ */
.impact-strip-section {
  background: var(--bg-alt);
  padding: var(--space-2xl) var(--space-md);
}
.impact-strip-container {
  max-width: var(--container);
  margin: 0 auto;
}
.impact-strip-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--space-lg);
  color: var(--black);
}
.impact-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}
.impact-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}
.impact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.impact-card-number {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--amber);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.impact-card-label {
  font-size: 0.875rem;
  color: var(--black);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.impact-card-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-head);
  font-weight: 500;
}

/* ============ 5. INTERACTIVE VISION / MISSION / VALUES SECTION ============ */
.whoweare-tabs-section {
  background: var(--cream);
  padding: var(--space-2xl) var(--space-md);
}
.whoweare-tabs-container {
  max-width: var(--container);
  margin: 0 auto;
}
.whoweare-tabs-heading {
  text-align: center;
  margin-bottom: var(--space-lg);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--black);
}

/* Desktop tabs - visible on desktop */
.whoweare-tabs-desktop {
  display: block;
}
.whoweare-tabs-desktop .tab-list {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  justify-content: center;
}
.whoweare-tabs-desktop .tab-list button {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.75rem 1.25rem;
  color: var(--text-muted);
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.whoweare-tabs-desktop .tab-list button:hover {
  color: var(--text);
}
.whoweare-tabs-desktop .tab-list button.active {
  color: var(--red);
  border-bottom-color: var(--red);
}
.whoweare-tabs-desktop .tab-panel {
  max-width: 800px;
  margin: 0 auto;
  animation: fadeIn 0.3s;
}
.whoweare-tabs-desktop .tab-panel:not([hidden]) {
  display: block;
}
.whoweare-tabs-desktop .tab-panel h3 {
  margin-bottom: var(--space-sm);
  color: var(--black);
}
.whoweare-tabs-desktop .tab-panel p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
}

/* Mobile accordion - hidden on desktop, visible on mobile */
.whoweare-tabs-mobile {
  display: none;
}
.whoweare-tabs-mobile .accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  background: var(--card-bg);
  overflow: hidden;
}
.whoweare-tabs-mobile .accordion-item summary {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  color: var(--black);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}
.whoweare-tabs-mobile .accordion-item summary:hover {
  background: var(--bg-alt);
}
.whoweare-tabs-mobile .accordion-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--amber);
  transition: transform 0.2s;
}
.whoweare-tabs-mobile .accordion-item[open] summary::after {
  transform: rotate(45deg);
}
.whoweare-tabs-mobile .accordion-item summary::-webkit-details-marker {
  display: none;
}
.whoweare-tabs-mobile .accordion-content {
  padding: 0 var(--space-md) var(--space-md);
}
.whoweare-tabs-mobile .accordion-content p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
}

/* Values list - shared between desktop tabs and mobile accordion */
.values-list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0;
}
.values-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
}
.values-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
}
.values-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  padding-top: 0.4rem;
}
.values-text strong {
  color: var(--black);
  font-family: var(--font-head);
}

/* ============ 6. THREE FEATURED INFORMATION CARDS ============ */
.feature-cards-section {
  background: var(--bg-alt);
  padding: var(--space-2xl) var(--space-md);
}
.feature-cards-container {
  max-width: var(--container);
  margin: 0 auto;
}
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.feature-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s, box-shadow 0.25s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: inherit;
}
.feature-card-img-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.feature-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.feature-card:hover .feature-card-img-wrap img {
  transform: scale(1.05);
}
.feature-card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.feature-card-body h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--black);
}
.feature-card-body p {
  font-size: 0.925rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
  flex: 1;
}
.feature-card-cta {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s;
}
.feature-card-cta::after {
  content: '\2192';
  transition: transform 0.2s;
}
.feature-card:hover .feature-card-cta {
  color: var(--terracotta);
}
.feature-card:hover .feature-card-cta::after {
  transform: translateX(4px);
}

/* ============ 7. CTA BANNERS ============ */
.cta-banner-section {
  width: 100%;
  margin: 0;
  padding: 0;
}
.whoweare-cta-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
  display: flex;
  align-items: center;
  border-radius: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.whoweare-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 29, 33, 0.6);
  z-index: 1;
}
.whoweare-cta-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: var(--space-xl) var(--space-md);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--container);
}
.whoweare-cta-content > * {
  max-width: 600px;
}
.whoweare-cta-eyebrow {
  color: var(--amber);
  margin-bottom: 0.75rem;
}
.whoweare-cta-content h2 {
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}
.whoweare-cta-content p {
  color: rgba(255, 251, 245, 0.9);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: var(--space-md);
}
.whoweare-cta-btn {
  background: var(--red);
  color: #fff;
  border: 2px solid var(--red);
}
.whoweare-cta-btn:hover {
  background: #a52a16;
  color: #fff;
  border-color: #a52a16;
}

/* ============ RESPONSIVE BREAKPOINTS ============ */

/* Tablet - 992px and below */
@media (max-width: 992px) {
  .impact-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .feature-cards {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* Mobile - 768px and below */
@media (max-width: 768px) {
  .whoweare-hero {
    min-height: 50vh;
  }
  .whoweare-hero h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  .whoweare-hero-support {
    font-size: 0.95rem;
  }
  .whoweare-intro-section {
    padding: var(--space-xl) var(--space-sm);
  }
  .impact-strip-section {
    padding: var(--space-xl) var(--space-sm);
  }
  .impact-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Switch tabs to accordion on mobile */
  .whoweare-tabs-desktop {
    display: none;
  }
  .whoweare-tabs-mobile {
    display: block;
  }
  .whoweare-tabs-section {
    padding: var(--space-xl) var(--space-sm);
  }
  .feature-cards-section {
    padding: var(--space-xl) var(--space-sm);
  }
  .whoweare-cta-banner {
    min-height: 300px;
  }
  .whoweare-cta-content {
    padding: var(--space-lg) var(--space-sm);
  }
}

/* Small mobile - 576px and below */
@media (max-width: 576px) {
  .impact-strip {
    grid-template-columns: 1fr;
  }
  .impact-card {
    padding: var(--space-sm);
  }
  .whoweare-hero-content {
    padding: var(--space-xl) var(--space-sm);
  }
}

/* ============ PREFERS REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .impact-card,
  .feature-card,
  .feature-card-img-wrap img,
  .feature-card-cta::after,
  .whoweare-tabs-desktop .tab-list button,
  .whoweare-tabs-mobile .accordion-item summary,
  .whoweare-tabs-mobile .accordion-item summary::after {
    transition: none;
  }
  .whoweare-tabs-desktop .tab-panel {
    animation: none;
  }
  .feature-card:hover .feature-card-img-wrap img {
    transform: none;
  }
}