/* ==========================================================================
   style.css - Custom theme layer on top of Bootstrap 5
   Brand palette is placeholder; swap --color-primary etc. once branding
   (logo, colors) is shared.
   ========================================================================== */

:root {
  /* --- Brand palette (sampled directly from the Tinat Banta Foundation logo),
     plus a warm marigold accent used sparingly for warmth and contrast so the
     palette isn't only blue+pink. --- */
  --color-primary: #1A2FC4;       /* TBF royal blue */
  --color-primary-dark: #121F8C;
  --color-pink: #E0469A;          /* TBF pink */
  --color-pink-dark: #B9337C;
  --color-accent: #E0469A;        /* alias used by buttons/highlights */
  --color-gold: #E8A33D;          /* warm marigold - used sparingly as a third accent */
  --color-gold-dark: #C97F1F;
  --color-ink: #181A2E;           /* near-black with a hint of navy */
  --color-cream: #F7F4F8;         /* soft neutral background */
  --color-muted: #6B6B7A;

  /* Fraunces carries the emotional, story-driven moments (hero, section
     titles); Poppins stays for compact UI headings/nav; Inter is body text. */
  --font-serif: 'Fraunces', serif;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-lg: 1rem;
  --radius-md: 0.6rem;

  --shadow-soft: 0 12px 32px rgba(24,26,46,0.08);
  --shadow-lift: 0 20px 44px rgba(24,26,46,0.14);
  --shadow-glow-pink: 0 16px 36px rgba(224,70,154,0.22);

  /* Actual rendered height of the sticky navbar (logo 48px + vertical
     padding + border), used so the hero can fill exactly one viewport
     instead of nav + hero together exceeding 100vh. */
  --nav-height: 76px;
}

/* --- Scroll-reveal animation utility ---
   Elements start slightly lower + transparent, then settle into place
   when they enter the viewport (triggered by main.js IntersectionObserver). */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1.is-visible { transition-delay: 0.1s; }
.reveal-delay-2.is-visible { transition-delay: 0.2s; }
.reveal-delay-3.is-visible { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: #fff;
}

h1, h2, h3, h4, .navbar-brand {
  font-family: var(--font-display);
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  background: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  z-index: 2000;
}
.skip-link:focus {
  top: 1rem;
}

/* --- Buttons --- */
.btn-donate {
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-dark) 100%);
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.65rem 1.6rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-donate:hover, .btn-donate:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(224,70,154,0.35);
}

.btn-outline-light {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.65rem 1.6rem;
}

.btn-outline-brand {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 999px;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-outline-brand:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-outline-amount {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 0.5rem 1.4rem;
  margin: 0.25rem;
}
.btn-check:checked + .btn-outline-amount {
  background-color: var(--color-primary);
  color: #fff;
}

/* --- Navbar --- */
.site-navbar {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  min-height: var(--nav-height);
}
.site-navbar .nav-link {
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0.4rem;
  position: relative;
  transition: color 0.2s ease;
}
.site-navbar .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-pink));
  transition: width 0.25s ease;
}
.site-navbar .nav-link:hover::before,
.site-navbar .nav-link.active::before {
  width: calc(100% - 0.8rem);
}
.site-navbar .nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
}
.site-navbar .dropdown-menu {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(24,26,46,0.14);
  padding: 0.5rem;
}
.site-navbar .dropdown-item {
  border-radius: 0.4rem;
  padding: 0.55rem 1rem;
  font-weight: 500;
}
.site-navbar .dropdown-item:hover, .site-navbar .dropdown-item:focus {
  background-color: var(--color-cream);
  color: var(--color-pink-dark);
}
.site-navbar .dropdown-toggle::after {
  vertical-align: 0.15em;
}

/* --- Eyebrow / labels (signature device: a small marigold dot precedes
   every eyebrow label site-wide, echoing the adornment beads used in the
   foundation's ceremonial wear - a quiet, consistent signature). --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-pink-dark);
  margin-bottom: 0.75rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}

/* --- Hero carousel --- */
.hero-carousel {
  position: relative;
  color: #fff;
}
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 48px;
  display: block;
  z-index: 2;
}
@media (max-width: 767.98px) {
  .hero-wave { height: 28px; }
}
.hero-carousel .carousel-item {
  height: calc(100vh - var(--nav-height));
  height: calc(100svh - var(--nav-height));
  min-height: 460px;
  max-height: 780px;
  background-size: cover;
  background-position: center;
}
.hero-carousel .carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,10,30,0.35) 0%, rgba(8,10,30,0.55) 100%);
}
.hero-slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}
.hero-slide-content .eyebrow,
.hero-slide-content .hero-title,
.hero-slide-content .hero-lead,
.hero-slide-content > .container > .row > div > div:last-child {
  opacity: 0;
  transform: translateY(18px);
}
.carousel-item.active .hero-slide-content .eyebrow {
  animation: hero-fade-up 0.7s ease forwards 0.1s;
}
.carousel-item.active .hero-slide-content .hero-title {
  animation: hero-fade-up 0.7s ease forwards 0.25s;
}
.carousel-item.active .hero-slide-content .hero-lead {
  animation: hero-fade-up 0.7s ease forwards 0.4s;
}
.carousel-item.active .hero-slide-content > .container > .row > div > div:last-child {
  animation: hero-fade-up 0.7s ease forwards 0.55s;
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-carousel .eyebrow {
  color: var(--color-pink);
  background: rgba(255,255,255,0.08);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
}
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 4.6vw, 3.8rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero-lead {
  font-size: 1.15rem;
  opacity: 0.92;
  max-width: 46ch;
}
.hero-carousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  border: none;
  margin: 0 6px;
}
.hero-carousel .carousel-indicators .active {
  background-color: var(--color-pink);
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 4rem;
  opacity: 0.8;
}
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  background-color: rgba(255,255,255,0.15);
  border-radius: 50%;
  padding: 1.4rem;
  background-size: 1.1rem;
}

/* --- Stats --- */
.stats-section {
  background-color: var(--color-cream);
}
.stat-number {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  color: var(--color-primary);
}
.stat-label {
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* --- Section titles --- */
.section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

/* --- Program cards --- */
.program-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.program-card:hover {
  box-shadow: var(--shadow-glow-pink);
  transform: translateY(-6px);
}
.program-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.program-card:hover .program-card-img {
  transform: scale(1.06);
}
.program-card-body {
  padding: 1.75rem;
}
.program-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(26,47,196,0.08);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.link-arrow {
  color: var(--color-pink-dark);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow:hover {
  text-decoration: underline;
}

/* --- CTA --- */
.cta-section {
  background-color: var(--color-ink);
}
.cta-text {
  color: rgba(255,255,255,0.8);
  max-width: 50ch;
  margin-inline: auto;
}

/* --- Page header (interior pages) --- */
.page-header {
  background-color: var(--color-cream);
  padding: 4rem 0 3rem;
}
.page-title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 3.8vw, 3rem);
}
.page-lead {
  color: var(--color-muted);
  max-width: 60ch;
  margin-inline: auto;
}

/* --- Page header with a background image (used on interior page hero
   banners - about, programs, contact, events, etc.). Pass the image via
   inline style="--hero-img: url('...')" on the .page-header element. --- */
.page-header--image {
  position: relative;
  background-color: var(--color-ink);
  background-image:
    linear-gradient(135deg, rgba(18,20,46,0.86) 0%, rgba(26,47,196,0.72) 55%, rgba(224,70,154,0.55) 100%),
    var(--hero-img);
  background-size: cover;
  background-position: center;
  padding: 5.5rem 0 4.5rem;
  color: #fff;
}
.page-header--image .eyebrow {
  color: #fff;
  opacity: 0.9;
}
.page-header--image .page-title {
  color: #fff;
}
.page-header--image .page-lead {
  color: rgba(255,255,255,0.88);
}

/* --- Blog cards --- */
.blog-card {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.blog-card:hover {
  box-shadow: 0 16px 32px rgba(24,26,46,0.1);
  transform: translateY(-6px);
}
.blog-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background-color: var(--color-cream);
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-img {
  transform: scale(1.06);
}
.blog-card-body {
  padding: 1.25rem;
}
.blog-date {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Forms (site-wide polish: contact, volunteer, donate, event apply,
   newsletter) - rounder fields, a soft focus glow in the brand color, and
   a bit more breathing room than Bootstrap's defaults. --- */
.form-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-ink);
  margin-bottom: 0.4rem;
}
.form-control,
.form-select {
  border: 1.5px solid rgba(24,26,46,0.12);
  border-radius: var(--radius-md);
  padding: 0.7rem 1rem;
  font-size: 0.96rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(26,47,196,0.12);
}
textarea.form-control {
  border-radius: 1rem;
}
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* A card wrapper for standalone forms (contact, volunteer, event apply) so
   they read as one clear, elevated block rather than fields floating on
   the page background. */
.form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: 0 20px 48px rgba(24,26,46,0.08);
  border: 1px solid rgba(0,0,0,0.05);
}
@media (max-width: 575.98px) {
  .form-card { padding: 1.5rem; }
}

/* --- Contact --- */
.contact-info-list {
  list-style: none;
  padding: 0;
}
.contact-info-list li {
  margin-bottom: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.contact-info-list i {
  color: var(--color-primary);
}

/* --- Volunteer page --- */
.volunteer-benefits li {
  padding: 0.5rem 0;
  color: var(--color-ink);
}
.volunteer-benefits i {
  color: var(--color-pink);
  margin-right: 0.6rem;
}

/* --- Event cards (events listing) --- */
.event-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.event-card:hover {
  box-shadow: 0 16px 32px rgba(24,26,46,0.12);
  transform: translateY(-6px);
}
.event-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.event-card:hover .event-card-img {
  transform: scale(1.06);
}
.event-card-body {
  padding: 1.5rem;
}
.event-meta {
  font-size: 0.85rem;
  color: var(--color-muted);
}
.event-meta i {
  color: var(--color-pink-dark);
  margin-right: 0.3rem;
}

/* --- Event detail page --- */
.event-details-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}
.event-details-list li {
  padding: 0.4rem 0;
}
.event-details-list i {
  color: var(--color-pink);
  margin-right: 0.6rem;
}
.event-apply-card {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: sticky;
  top: 100px;
  box-shadow: 0 16px 36px rgba(24,26,46,0.08);
}

/* --- Gallery --- */
.gallery-item {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 4/3;
}
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-item:hover .gallery-img {
  transform: scale(1.08);
}
.gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(0deg, rgba(8,10,30,0.75) 0%, transparent 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 1.5rem 0.75rem 0.6rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-caption {
  opacity: 1;
}

/* --- Partners logo scroller (infinite marquee) --- */
.partners-section {
  background-color: #fff;
  padding: 3rem 0;
  overflow: hidden;
}
.partners-track {
  display: flex;
  width: max-content;
  animation: partners-scroll 30s linear infinite;
}
.partners-track img {
  height: 60px;
  width: auto;
  margin: 0 2.5rem;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.partners-track img:hover {
  opacity: 1;
  filter: grayscale(0%);
}
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}

/* --- Homepage About preview --- */
.about-preview-img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* --- Homepage gallery preview strip --- */
.gallery-preview-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1/1;
  display: block;
}
.gallery-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-preview-item:hover img {
  transform: scale(1.08);
}

/* --- Page loader --- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
main#main-content {
  opacity: 0;
  animation: content-fade-in 0.6s ease forwards 0.15s;
}
@keyframes content-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.page-exiting {
  opacity: 0;
  transition: opacity 0.2s ease;
}
body {
  opacity: 1;
  transition: opacity 0.2s ease;
}
.page-loader-mark {
  width: 64px;
  height: 64px;
  animation: page-loader-pulse 1.1s ease-in-out infinite;
}
@keyframes page-loader-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  50% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader-mark { animation: none; }
}

/* --- Back to top button --- */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-dark) 100%);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(24,26,46,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 1000;
  cursor: pointer;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-3px);
}

/* --- Error pages (404 / 500) --- */
.error-page-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}
.error-quicklinks a {
  color: var(--color-pink-dark);
  text-decoration: none;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(224,70,154,0.25);
  border-radius: 999px;
  display: inline-block;
}
.error-quicklinks a:hover {
  background-color: var(--color-cream);
}

.eyebrow a.breadcrumb-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.eyebrow a.breadcrumb-link:hover {
  color: var(--color-pink-dark);
}

/* --- Founder / Chairman feature card --- */
.founder-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(24,26,46,0.1);
}
.founder-card-img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}
.founder-card-body {
  padding: 2.5rem;
}
.founder-card-body p {
  color: var(--color-muted);
}

/* --- Team / Board cards --- */
.team-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.team-card:hover {
  box-shadow: 0 16px 32px rgba(24,26,46,0.1);
  transform: translateY(-4px);
}
.team-card-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.team-card:hover .team-card-img {
  transform: scale(1.06);
}
.team-card-body {
  padding: 1.5rem;
}
.team-card-name {
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.team-card-role {
  color: var(--color-pink-dark);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.team-card-bio {
  color: var(--color-muted);
  font-size: 0.95rem;
}
.team-coming-soon {
  border: 2px dashed rgba(24,26,46,0.15);
  border-radius: var(--radius-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--color-muted);
}
.team-coming-soon i {
  font-size: 2rem;
  color: var(--color-pink);
  margin-bottom: 0.75rem;
}

/* --- Team member cards (Our Team page - operational staff, round photo) --- */
.team-member-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.team-member-card:hover {
  box-shadow: 0 16px 32px rgba(24,26,46,0.1);
  transform: translateY(-4px);
}
.team-member-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  display: block;
  border: 3px solid var(--color-cream);
}
.team-member-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-cream);
  color: var(--color-muted);
  font-size: 2.5rem;
}
/* --- Vision / Mission cards (About page) --- */
.vision-mission-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  height: 100%;
  box-shadow: 0 8px 24px rgba(24,26,46,0.06);
}

/* --- Legal pages --- */
.legal-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 2rem;
}

/* --- Newsletter band (its own highlighted section, above the footer) --- */
.newsletter-band {
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: 3rem 0;
}
.newsletter-band .eyebrow {
  color: rgba(255,255,255,0.85);
}
.newsletter-band-text {
  color: rgba(255,255,255,0.82);
  max-width: 46ch;
}
.newsletter-form .form-control {
  border: none;
}
.newsletter-form .form-control:focus {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.35);
}

/* --- Footer --- */
.site-footer {
  background-color: var(--color-ink);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-pink), var(--color-gold));
}
.newsletter-band {
  position: relative;
  overflow: hidden;
}
.newsletter-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(255,255,255,0.08), transparent 55%);
  pointer-events: none;
}
.footer-text {
  color: rgba(255,255,255,0.65);
  font-size: 0.92rem;
}
.footer-links li {
  margin-bottom: 0.5rem;
}
.footer-links a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.92rem;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-links a:hover {
  color: var(--color-accent);
  transform: translateX(4px);
}
.footer-divider {
  border-color: rgba(255,255,255,0.1);
}
.social-links a {
  color: #fff;
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.social-links a:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
  transform: translateY(-3px);
}

/* ==========================================================================
   Revamp layer - added to bring the homepage in line with (and beyond) a
   modern nonprofit template, while keeping every brand color variable above.
   ========================================================================== */

/* --- Navbar: glassy on scroll, logo shrinks slightly --- */
.site-navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.site-navbar.scrolled {
  background-color: rgba(255,255,255,0.9) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.site-navbar .navbar-brand img {
  transition: height 0.25s ease;
}
.site-navbar.scrolled .navbar-brand img {
  height: 38px !important;
}

/* --- Decorative brand-color blobs (purely visual, aria-hidden) --- */
.decor-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.decor-blob--gold {
  width: 320px;
  height: 320px;
  top: -80px;
  right: -100px;
  background: radial-gradient(circle, var(--color-gold) 0%, transparent 70%);
}
.decor-blob--pink {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, var(--color-pink) 0%, transparent 70%);
}
.cta-blob {
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.28;
}

/* --- About preview image: framed with an offset brand-color panel behind it --- */
.about-preview-frame {
  position: relative;
}
.about-preview-frame::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-pink));
  border-radius: var(--radius-lg);
  z-index: 0;
}
.about-preview-frame .about-preview-img {
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-lift);
}

/* --- Impact stats strip (floats over the hero) --- */
.impact-strip {
  position: relative;
  z-index: 3;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.hero-carousel + .impact-strip {
  margin-top: -72px;
}
.impact-strip-inner {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 2.25rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.impact-stat {
  text-align: center;
  padding: 0.25rem 0.5rem;
  position: relative;
}
.impact-stat + .impact-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(24,26,46,0.08);
}
.impact-stat-number {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.35rem;
}
.impact-stat-label {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (max-width: 767.98px) {
  .impact-strip-inner {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.75rem;
  }
  .impact-stat + .impact-stat::before { display: none; }
  .hero-carousel + .impact-strip { margin-top: -48px; }
}

/* --- Program card numbered badge --- */
.program-card {
  position: relative;
}
.program-card-index {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--color-pink-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 6px 16px rgba(24,26,46,0.18);
}

/* --- Testimonials --- */
.testimonials-section {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0;
  background: linear-gradient(135deg, var(--color-ink) 0%, #1f1147 100%);
}
.testimonials-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(224,70,154,0.28), transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(26,47,196,0.4), transparent 50%);
}
.testimonials-section .container { position: relative; z-index: 1; }
.eyebrow--onDark {
  color: rgba(255,255,255,0.85);
}
.testimonial-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  height: 100%;
  backdrop-filter: blur(6px);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.09);
}
.testimonial-quote-mark {
  font-family: var(--font-serif);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--color-pink);
  opacity: 0.7;
  margin-bottom: -0.75rem;
}
.testimonial-text {
  color: rgba(255,255,255,0.88);
  font-size: 1rem;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.testimonial-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-pink));
  color: #fff;
  font-weight: 700;
  font-family: var(--font-display);
}
.testimonial-name {
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
}
.testimonial-role {
  color: rgba(255,255,255,0.6);
  font-size: 0.82rem;
}

/* --- CTA section decoration --- */
.cta-section--decorated {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   Site-wide consistency layer - upgrades shared components used across
   About, Programs, Team, Contact, Donate, Volunteer, Events, Gallery, Board
   and Blog pages, so the whole site matches the homepage's new polish
   without needing to touch every individual template.
   ========================================================================== */

/* --- Page header banners (About, Programs, Contact, Donate, etc.) get the
   same soft radial glow used on the homepage testimonials section --- */
.page-header--image {
  overflow: hidden;
}
.page-header--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(224,70,154,0.25), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(232,163,61,0.2), transparent 50%);
  pointer-events: none;
}
.page-header--image .container {
  position: relative;
  z-index: 1;
}

/* --- Icon badges (About vision/mission, homepage focus areas, Programs
   listing) upgraded from a flat tint to a brand gradient circle --- */
.program-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-pink) 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(26,47,196,0.22);
}

/* --- Section titles get a small gradient accent rule beneath them site-wide --- */
.section-title {
  position: relative;
}
.text-center .section-title::after,
.text-lg-start .section-title::after {
  content: none;
}

/* --- CTA sections (used on Programs, homepage, etc.) get the same glow
   treatment automatically, even without the extra decor-blob markup --- */
.cta-section {
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(224,70,154,0.28), transparent 55%),
    radial-gradient(circle at 90% 110%, rgba(26,47,196,0.35), transparent 50%);
  pointer-events: none;
}
.cta-section .container {
  position: relative;
  z-index: 1;
}

/* --- Vision/mission and form cards get a touch more lift to match the
   homepage program cards --- */
.vision-mission-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vision-mission-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(24,26,46,0.1);
}

/* --- Team member photo ring upgraded to a brand gradient --- */
.team-member-photo {
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--color-primary), var(--color-pink)) border-box;
}

/* --- Quick contact cards (Contact page) --- */
.quick-contact-strip {
  position: relative;
  z-index: 3;
  margin-top: -60px;
  margin-bottom: 1rem;
}
.page-header--image + .quick-contact-strip { margin-top: -60px; }
.quick-contact-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.quick-contact-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--color-ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.quick-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-pink);
  color: var(--color-ink);
}
.quick-contact-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-pink) 100%);
  color: #fff;
}
.quick-contact-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--color-muted);
}
.quick-contact-value {
  font-weight: 700;
  font-size: 0.98rem;
  word-break: break-word;
}
@media (max-width: 767.98px) {
  .quick-contact-strip-inner { grid-template-columns: 1fr; }
  .quick-contact-strip, .page-header--image + .quick-contact-strip { margin-top: -32px; }
}

/* --- Contact sidebar card --- */
.contact-sidebar-card {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 2rem;
  height: 100%;
}
.contact-map-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(24,26,46,0.1);
}
.contact-hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  border-bottom: 1px dashed rgba(24,26,46,0.1);
}
.contact-hours-list li:last-child { border-bottom: none; }
.contact-hours-list li span:first-child { color: var(--color-muted); }
.contact-hours-list li span:last-child { font-weight: 600; }
.social-links--light a {
  color: var(--color-ink);
  border-color: rgba(24,26,46,0.15);
}
.social-links--light a:hover {
  color: #fff;
}

/* --- FAQ accordion --- */
.faq-accordion .accordion-item {
  border: none;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  margin-bottom: 0.85rem;
  box-shadow: 0 6px 18px rgba(24,26,46,0.06);
}
.faq-accordion .accordion-button {
  font-weight: 600;
  color: var(--color-ink);
  padding: 1.15rem 1.5rem;
}
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--color-pink-dark);
  background-color: rgba(224,70,154,0.06);
  box-shadow: none;
}
.faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 4px rgba(26,47,196,0.12);
}
.faq-accordion .accordion-button::after {
  background-size: 1.1rem;
}
.faq-accordion .accordion-body {
  color: var(--color-muted);
  padding: 0 1.5rem 1.25rem;
}

/* --- Donate page: trust strip --- */
.trust-strip {
  position: relative;
  z-index: 3;
  margin-top: -40px;
  margin-bottom: 1rem;
}
.trust-strip-inner {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.25rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}
.trust-item i {
  color: var(--color-pink-dark);
}
@media (max-width: 575.98px) {
  .trust-strip-inner { justify-content: flex-start; }
  .trust-strip { margin-top: -24px; }
}

/* --- Donate page: impact sidebar --- */
.impact-sidebar-card {
  background: linear-gradient(135deg, var(--color-ink) 0%, #1f1147 100%);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.impact-sidebar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(224,70,154,0.3), transparent 50%);
  pointer-events: none;
}
.impact-sidebar-card > * {
  position: relative;
  z-index: 1;
}
.impact-line-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.impact-line-item:last-of-type { border-bottom: none; }
.impact-line-amount {
  flex-shrink: 0;
  min-width: 84px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-pink);
}
.impact-line-text {
  color: rgba(255,255,255,0.82);
  font-size: 0.92rem;
}
.impact-sidebar-divider {
  border-color: rgba(255,255,255,0.12);
}
.impact-sidebar-note {
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  margin-bottom: 0;
}

/* --- Form note with lock icon (Donate page) --- */
.form-note {
  font-size: 0.85rem;
  color: var(--color-muted);
}
.form-note i {
  color: var(--color-primary);
  margin-right: 0.3rem;
}

/* --- Step cards (Volunteer 'How It Works') --- */
.step-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  height: 100%;
  text-align: center;
  box-shadow: 0 10px 26px rgba(24,26,46,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(24,26,46,0.1);
}
.step-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-pink) 100%);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
}
.step-card p {
  color: var(--color-muted);
  margin-bottom: 0;
}

/* --- Blog post share row --- */
.share-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.share-row-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-right: 0.25rem;
}
.share-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  color: var(--color-ink);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.share-row a:hover {
  background: linear-gradient(135deg, var(--color-primary), var(--color-pink));
  color: #fff;
  transform: translateY(-2px);
}

/* --- Gallery masonry layout (full Gallery page) --- */
.gallery-masonry {
  column-count: 4;
  column-gap: 1rem;
}
.gallery-masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}
.gallery-masonry-item:nth-child(3n+1) .gallery-item { aspect-ratio: 3/4; }
.gallery-masonry-item:nth-child(3n+2) .gallery-item { aspect-ratio: 1/1; }
.gallery-masonry-item:nth-child(3n+3) .gallery-item { aspect-ratio: 4/3; }
.gallery-masonry .gallery-item {
  aspect-ratio: auto;
  height: 100%;
}
.gallery-zoom-hint {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(8,10,30,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gallery-item:hover .gallery-zoom-hint {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 991.98px) {
  .gallery-masonry { column-count: 3; }
}
@media (max-width: 767.98px) {
  .gallery-masonry { column-count: 2; column-gap: 0.75rem; }
  .gallery-masonry-item { margin-bottom: 0.75rem; }
}
@media (max-width: 479.98px) {
  .gallery-masonry { column-count: 1; }
}

/* --- Custom lightbox: no Bootstrap modal dependency. Fixed overlay,
   fades in/out via a class toggle in main.js, fully responsive by design
   since it's just a flex-centered fixed box rather than a component with
   its own JS lifecycle to fail. --- */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,10,30,0.94);
  padding: 2rem 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox-inner {
  width: auto;
  max-width: min(760px, 88vw);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 62vh;
  max-height: 62dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.lightbox-caption {
  color: rgba(255,255,255,0.8);
  font-size: 0.92rem;
  margin: 1rem 0 0;
  flex-shrink: 0;
}
.lightbox-hint {
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem;
  margin: 0.5rem 0 0;
  flex-shrink: 0;
}
.lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2001;
  height: 48px;
  padding: 0 1.2rem 0 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.lightbox-close i {
  font-size: 1.05rem;
}
.lightbox-close:hover,
.lightbox-close:focus {
  background: rgba(255,255,255,0.32);
  transform: scale(1.05);
  color: #fff;
}
@media (max-width: 575.98px) {
  .lightbox {
    padding: 1.25rem 1rem;
  }
  .lightbox-inner {
    max-width: 92vw;
  }
  .lightbox-img {
    max-height: 52vh;
    max-height: 52dvh;
  }
  .lightbox-close {
    top: 0.85rem;
    right: 0.85rem;
    height: 44px;
    padding: 0 1rem 0 0.9rem;
    font-size: 0.88rem;
  }
}
body.lightbox-open {
  overflow: hidden;
}
@media (max-width: 575.98px) {
  .lightbox-inner { max-width: 100vw; }
  .lightbox-img { max-height: 68vh; }
  .lightbox { padding: 1rem; }
}


/* --- Featured / latest program card (Programs page) --- */
.featured-program-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(24,26,46,0.12);
}
.featured-program-img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.featured-program-body {
  padding: 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.featured-program-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-pink) 100%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.featured-program-body .program-icon {
  margin-bottom: 1.25rem;
}
.featured-program-body p {
  color: var(--color-muted);
}
@media (max-width: 991.98px) {
  .featured-program-img { min-height: 240px; }
  .featured-program-body { padding: 2rem; }
}

/* --- Homepage Programs grid: subtle color rhythm per card --- */
.home-programs-grid .program-card {
  border-top: 3px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.home-programs-grid .col-lg-3:nth-child(1) .program-card { border-top-color: var(--color-primary); }
.home-programs-grid .col-lg-3:nth-child(2) .program-card { border-top-color: var(--color-pink); }
.home-programs-grid .col-lg-3:nth-child(3) .program-card { border-top-color: var(--color-gold); }
.home-programs-grid .col-lg-3:nth-child(4) .program-card { border-top-color: var(--color-ink); }

/* --- Homepage gallery bento layout (5 latest photos) --- */
.gallery-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 0.85rem;
}
.gallery-bento-item {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.gallery-bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-bento-item:hover img {
  transform: scale(1.08);
}
.gallery-bento-item--feature {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 767.98px) {
  .gallery-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
    gap: 0.6rem;
  }
  .gallery-bento-item--feature {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* --- Footer contact list (address, phone, email) --- */
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}
.footer-contact-list li i {
  color: var(--color-pink);
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.footer-contact-list a {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-contact-list a:hover {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* --- Team/Board member social icons (Email, LinkedIn) --- */
.team-member-social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
}
.team-member-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: 0.9rem;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.team-member-social a:hover {
  background: linear-gradient(135deg, var(--color-primary), var(--color-pink));
  color: #fff;
  transform: translateY(-2px);
}
.team-member-social--inline {
  justify-content: flex-start;
}
.team-member-social--profile {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.team-member-social--profile a {
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
  background: var(--color-cream);
  font-size: 0.88rem;
  font-weight: 600;
}
.team-member-social--profile a:hover {
  transform: translateX(4px);
}

/* --- Team grid: slight color rhythm to match the Programs cards --- */
.team-grid .team-member-card,
.team-grid .team-card {
  border-top: 3px solid transparent;
}
.team-grid > [class*="col-"]:nth-child(4n+1) .team-member-card,
.team-grid > [class*="col-"]:nth-child(4n+1) .team-card { border-top-color: var(--color-primary); }
.team-grid > [class*="col-"]:nth-child(4n+2) .team-member-card,
.team-grid > [class*="col-"]:nth-child(4n+2) .team-card { border-top-color: var(--color-pink); }
.team-grid > [class*="col-"]:nth-child(4n+3) .team-member-card,
.team-grid > [class*="col-"]:nth-child(4n+3) .team-card { border-top-color: var(--color-gold); }
.team-grid > [class*="col-"]:nth-child(4n+4) .team-member-card,
.team-grid > [class*="col-"]:nth-child(4n+4) .team-card { border-top-color: var(--color-ink); }

/* --- Reduced motion respect --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}