/* ==========================================================================
   Sri Ramachandran Trust — Stylesheet
   Theme: "Monsoon" — deep monsoon-sky blue + marigold gold, Roboto
   (--navy/--red token names kept for low-risk theming; values are Monsoon's)
   Structure mirrors the paramahamsatrust.org platform (shared architecture),
   themed independently — see claude_prompts.md Phase 0.5 for provenance.
   ========================================================================== */

:root {
  --navy:        #1d3f72;
  --navy-dark:   #12294f;
  --navy-light:  #e9edf4;
  --navy-lighter: #b6cffa;
  --red:         #a35f14;
  --red-dark:    #7f4a0f;
  --ink:         #2b2620;
  --muted:       #7a7263;
  --bg-soft:     #f8f6f1;
  --bg-card:     #ffffff;
  --border:      #e6e0d3;
  --success:     #1f8a4c;
  --warning:     #b8860b;
  --danger:      #c0392b;
  --info:        #2f6f9e;

  --font-body: 'Roboto', Arial, sans-serif;
  --shadow-sm: 0 2px 8px rgba(29, 63, 114, 0.08);
  --shadow-md: 0 6px 20px rgba(29, 63, 114, 0.14);
  --radius: 8px;
}

/* ── Base ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.7;
}
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--navy);
}
a { color: var(--red); transition: 0.2s; }
a:hover { color: var(--red-dark); }
.section-bg { background: var(--bg-soft); }
.text-navy { color: var(--navy) !important; }
.text-red  { color: var(--red) !important; }

/* ── Bootstrap gutter utility patch ──────────────────────────────────
   The vendored "v5.0.2" bootstrap.min.css is actually Bootstrap 4.5.0
   (mislabeled — inherited as-is from the platform reference; the JS bundle
   is genuinely v5, which is why modals/accordions still work). Bootstrap 4
   has no .g-3/.g-4 gutter classes, so every `.row.g-3`/`.row.g-4` on this
   site silently had zero spacing between columns and rows. Patched here
   rather than swapping the vendor file, to avoid destabilizing anything
   else that already renders correctly against the v4 base. */
.row.g-3 { margin-right: -.5rem; margin-left: -.5rem; margin-top: -1rem; }
.row.g-3 > * { padding-right: .5rem; padding-left: .5rem; margin-top: 1rem; }
.row.g-4 { margin-right: -.75rem; margin-left: -.75rem; margin-top: -1.5rem; }
.row.g-4 > * { padding-right: .75rem; padding-left: .75rem; margin-top: 1.5rem; }
.row.g-2 { margin-right: -.25rem; margin-left: -.25rem; margin-top: -.5rem; }
.row.g-2 > * { padding-right: .25rem; padding-left: .25rem; margin-top: .5rem; }

.section-title { text-align: center; padding-bottom: 24px; }
.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  position: relative;
}
.section-title h2 span { color: var(--red); font-weight: 800; }
.section-title p { color: var(--muted); max-width: 640px; margin: 0 auto; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-primary-navy {
  background: var(--navy); border-color: var(--navy); color: #fff;
  border-radius: 4px; padding: 10px 26px; font-weight: 600; transition: 0.2s;
}
.btn-primary-navy:hover { background: var(--navy-dark); color: #fff; }
.btn-outline-navy {
  color: var(--navy); border: 1px solid var(--navy); background: transparent;
  border-radius: 4px; padding: 9px 24px; font-weight: 600; transition: 0.2s;
}
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-outline-red {
  color: var(--red); border: 1px solid var(--red); background: transparent;
  border-radius: 4px; padding: 9px 24px; font-weight: 600; transition: 0.2s;
}
.btn-outline-red:hover { background: var(--red); color: #fff; }

/* ── Header / Nav ─────────────────────────────────────────────────── */
#header {
  height: 70px; background: #fff; transition: 0.3s; padding: 10px 0;
  border-bottom: 3px solid var(--navy);
}
#header.header-scrolled { box-shadow: var(--shadow-sm); }
#header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
#header .logo h1 {
  font-size: 24px; margin: 0; padding-top: 6px; line-height: 1;
  font-weight: 600; letter-spacing: -0.5px; text-transform: uppercase;
}
#header .logo h1 a span { color: var(--navy); }
#header .logo .caption { margin: -1px 0 0 2px; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .2px; color: var(--muted); }

.nav-menu, .nav-menu * { margin: 0; padding: 0; list-style: none; }
.nav-menu > ul { display: flex; align-items: center; }
.nav-menu li { position: relative; }
.nav-menu a {
  display: flex; align-items: center; padding: 10px 14px;
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.nav-menu a:hover, .nav-menu .active > a { color: var(--red); }
.nav-menu .drop-down ul {
  display: block; position: absolute; left: 0; top: calc(100% + 6px);
  min-width: 200px; background: #fff; box-shadow: var(--shadow-md);
  border-radius: 6px; padding: 8px 0; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: 0.2s; z-index: 99;
}
.nav-menu .drop-down:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .drop-down ul a { padding: 8px 18px; }
.nav-menu .drop-down > a:after { content: '\ea99'; font-family: boxicons!important; font-size: 12px; margin-left: 4px; }
.nav-btn-cta {
  background: var(--navy) !important; color: #fff !important; border-radius: 20px !important;
  padding: 9px 20px !important; margin-left: 8px;
}
.nav-btn-cta:hover { background: var(--red) !important; }

.mobile-nav-toggle { display: none; font-size: 28px; cursor: pointer; color: var(--navy); }
@media (max-width: 991px) {
  .nav-menu.float-right.d-none.d-lg-block { display: none !important; }
  .mobile-nav-toggle { display: block; }
}
.mobile-nav, .mobile-nav * { margin: 0; padding: 0; list-style: none; }
.mobile-nav {
  position: fixed; top: 0; right: -300px; width: 280px; height: 100%;
  background: #fff; z-index: 9999; padding: 70px 20px 20px; transition: 0.3s;
  box-shadow: -4px 0 20px rgba(0,0,0,.15); overflow-y: auto;
}
.mobile-nav.mobile-nav-active { right: 0; }
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998;
}
.mobile-nav-active ~ .mobile-nav-overlay,
.mobile-nav-overlay.active { display: block; }
.mobile-nav ul li a { padding: 12px 0; border-bottom: 1px solid var(--border); display: block; }
.mobile-nav .drop-down ul a { padding-left: 20px; font-size: 13px; color: var(--muted); }
.mobile-nav-close { position: absolute; top: 20px; right: 20px; font-size: 28px; cursor: pointer; color: var(--navy); }

/* ── Hero ─────────────────────────────────────────────────────────── */
/* Pure photo carousel — the headline/CTA copy no longer overlays it (see
   .focus-banner below); this section is just the crossfading photo band. */
.hero-fullwidth {
  background: linear-gradient(135deg, var(--navy) 0%, #17325c 60%, var(--navy-dark) 100%);
  color: #fff; position: relative; overflow: hidden; height: 460px;
}
.hero-carousel { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-nav {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
  color: #fff; font-size: 18px; cursor: pointer; transition: .2s; backdrop-filter: blur(2px);
}
.hero-nav:hover { background: rgba(255,255,255,.25); border-color: #fff; }
.hero-nav--prev { left: 20px; }
.hero-nav--next { right: 20px; }
@media (max-width: 767px) { .hero-nav { display: none; } }

/* ── Focus banner (unified hero copy + focus areas) ─────────────────────
   One rounded card that floats over the join between the hero photo and
   the page below it — deliberately not full browser width, so it reads
   as a distinct "brand" element rather than another full-bleed strip.
   Colors are theme-only (navy + amber), no logo, per brand guidance. */
.focus-banner-wrap { position: relative; z-index: 5; margin-top: -54px; margin-bottom: 44px; }
.focus-banner {
  max-width: 980px; margin: 0 auto;
  border: 1px solid rgba(18,41,79,.08);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 45px rgba(18,41,79,.35), 0 2px 8px rgba(0,0,0,.12);
  animation: focusBannerIn .7s ease both;
}
@keyframes focusBannerIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-unified-top {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding: 32px 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.hero-unified-copy { flex: 1 1 420px; }
.hero-unified-top .eyebrow {
  display: inline-block; background: rgba(255,255,255,.12); color: #fff;
  padding: 5px 14px; border-radius: 20px; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px;
}
.hero-unified-top h1 { color: #fff; font-size: 30px; font-weight: 800; line-height: 1.25; margin-bottom: 10px; }
.hero-unified-top h1 span { color: #ffd28a; }
.hero-unified-top p.lead { color: rgba(255,255,255,.8); font-size: 15px; margin-bottom: 0; }
.hero-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: none; margin-bottom: 0; }
/* Standalone button class — used in the hero AND the CTA strip, so it
   must not be scoped to .hero-ctas only. */
.btn-hero-primary {
  display: inline-block; background: var(--red); color: #fff; padding: 12px 28px;
  border-radius: 4px; font-weight: 700; box-shadow: 0 6px 18px rgba(163,95,20,.35);
  border: none; white-space: nowrap;
}
.btn-hero-primary:hover { background: var(--red-dark); color: #fff; }
.hero-link-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.85); font-weight: 700; font-size: 14px;
  white-space: nowrap; padding-left: 2px;
}
.hero-link-secondary i { font-size: 13px; transition: transform .2s; }
.hero-link-secondary:hover { color: #fff; }
.hero-link-secondary:hover i { transform: translateX(3px); }

/* Light brand-gray strip so the focus areas visually pop against the navy
   copy block above them. */
.hero-unified-focus {
  display: flex; flex-wrap: wrap; gap: 10px;
  background: var(--bg-soft);
  padding: 20px 36px;
}
.focus-banner-item {
  flex: 1 1 0; min-width: 140px;
  display: flex; align-items: center; gap: 10px;
}
.focus-banner-icon {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: 0 6px 14px rgba(163,95,20,.4);
}
.focus-banner-label { color: var(--navy-dark); font-weight: 700; font-size: 13px; letter-spacing: .2px; }

@media (max-width: 991px) {
  .focus-banner { border-radius: 16px; }
  .hero-unified-top { padding: 28px 24px; }
  .hero-unified-focus { padding: 18px 24px; }
  .focus-banner-item { flex: 1 1 45%; }
}
@media (max-width: 575px) {
  .focus-banner-wrap { margin-top: -34px; }
  .hero-unified-top { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .hero-ctas { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

@media (max-width: 991px) {
  .hero-fullwidth { height: 340px; }
}

/* ── Trust Signals (certification badges) ────────────────────────── */
.trust-badge {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px 14px 20px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-card); height: calc(100% - 16px); margin-bottom: 16px;
  transition: transform .2s, box-shadow .2s;
}
.trust-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.trust-badge-icon {
  width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--navy-lighter);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
  flex-shrink: 0; background: var(--navy-light);
}
.trust-badge-icon i { font-size: 22px; color: var(--navy); }
.trust-badge-title { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.25; margin-bottom: 4px; }
.trust-badge-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
@media (max-width: 575px) {
  .trust-badge { padding: 16px 8px 14px; }
  .trust-badge-icon { width: 44px; height: 44px; }
  .trust-badge-icon i { font-size: 18px; }
  .trust-badge-title { font-size: 13px; }
}

/* ── Impact stats ─────────────────────────────────────────────────── */
#impact-stats { background: #fff; padding: 0; margin-top: -1px; border-bottom: 1px solid var(--border); }
.impact-stat-row { display: flex; flex-wrap: wrap; }
.impact-stat {
  flex: 1 1 200px; text-align: center; padding: 34px 20px;
  border-right: 1px solid var(--border);
}
.impact-stat:last-child { border-right: none; }
.impact-stat .num { font-size: 34px; font-weight: 800; color: var(--navy); }
.impact-stat .num span { color: var(--red); }
.impact-stat .label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }

/* ── About / Why We Exist ─────────────────────────────────────────── */
.about { padding: 80px 0; }
.about-media img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }
.about-mission-cta a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.milestone-recognition {
  margin-top: 16px; padding: 14px 18px; background: var(--bg-soft); border-radius: var(--radius);
  border-left: 3px solid var(--red);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
  display: flex; align-items: flex-start; gap: 10px;
}
.milestone-recognition i { flex: none; color: var(--red); font-size: 16px; margin-top: 2px; }
.milestone-recognition span { flex: 1; }
.milestone-recognition strong { color: var(--ink); }
.milestone-recognition a { font-weight: 700; color: var(--red); }
.milestone-recognition a:hover { color: var(--red-dark); text-decoration: underline; }
.row.locations { margin-top: 30px; }
.location-card {
  background: var(--bg-soft); border-radius: var(--radius); padding: 20px;
  display: flex; align-items: center; gap: 14px; height: 100%;
}
.location-card i { font-size: 28px; color: var(--navy); }
.location-card h5 { margin: 0 0 4px; font-size: 15px; }
.location-card h5 a { color: var(--navy); }
.location-card h5 a:hover { color: var(--red); }
.location-card p { margin: 0; font-size: 13px; color: var(--muted); }

.why-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 24px; height: 100%; transition: .25s;
}
.why-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.why-card-num { font-size: 40px; font-weight: 800; color: var(--navy-lighter); line-height: 1; margin-bottom: 10px; }
.why-card h4 { font-size: 18px; margin-bottom: 8px; }
.why-card p { color: var(--muted); font-size: 14px; margin: 0; }

/* ── What We Do (segmented tabs) ──────────────────────────────────── */
.about-lists { padding: 80px 0; }
/* Homepage nav anchors — without this, jumping in from another page (or a
   same-page click) lands the section top right under the fixed header,
   clipping the heading. Matches the 90px offset used elsewhere on anchors. */
#about, #about-lists, #contact { scroll-margin-top: 90px; }
.svc-seg-ctrl { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.svc-seg-ctrl button {
  background: #fff; border: 1px solid var(--border); color: var(--ink);
  padding: 10px 22px; border-radius: 24px; font-weight: 600; font-size: 14px; cursor: pointer; transition: .2s;
}
.svc-seg-ctrl button.active, .svc-seg-ctrl button:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.tabcontent { display: none; }
.tabcontent.active-tab { display: block; animation: fadein .3s; }
@keyframes fadein { from{opacity:0;} to{opacity:1;} }
.svc-panel-left h3 { font-size: 24px; margin-bottom: 12px; }
.svc-panel-left .tagline { color: var(--red); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.svc-panel-left p.desc { color: var(--muted); margin: 14px 0 20px; }
.svc-pill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.svc-pill-tags span {
  background: var(--navy-light); color: var(--navy); font-size: 12px; font-weight: 600;
  padding: 5px 14px; border-radius: 14px;
}
.svc-num-heading {
  font-size: 13px; font-weight: 800; color: var(--navy); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 14px;
}
.svc-num-list { display: block; }
.svc-num-item {
  display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border);
}
.svc-num-item:last-child { border-bottom: none; }
.svc-num {
  font-size: 21px; font-weight: 800; color: #b9c8de; line-height: 1; min-width: 34px; flex-shrink: 0;
}
.svc-num-txt { font-size: 14px; color: var(--ink); line-height: 1.55; padding-top: 2px; }

/* Linked bullets — only added by JS when a matching activity is confirmed
   to exist in the live database; unmatched bullets stay plain, no icon. */
a.svc-num-txt--linked { display: block; text-decoration: none; transition: color .15s; }
a.svc-num-txt--linked:hover { color: var(--red); }
.svc-num-link-tag {
  display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700;
  color: var(--navy); white-space: nowrap; margin-left: 4px; transition: color .15s;
}
a.svc-num-txt--linked:hover .svc-num-link-tag { color: var(--red); }
.svc-num-link-icon { font-size: 11px; }

/* ── Featured Activities — auto-scroll carousel (max 5 cards) ─────── */
#featured-activities { padding: 80px 0; }
.featured-scroll-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.featured-scroll-btn {
  background: #fff; border: 2px solid var(--navy); color: var(--navy); border-radius: 50%;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; font-size: 16px; line-height: 1; padding: 0;
}
.featured-scroll-btn:hover { background: var(--navy); color: #fff; }
.featured-scroll-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #aebedd var(--bg-soft);
  padding-bottom: 12px;
}
.featured-scroll-track::-webkit-scrollbar { height: 4px; }
.featured-scroll-track::-webkit-scrollbar-track { background: var(--bg-soft); border-radius: 4px; }
.featured-scroll-track::-webkit-scrollbar-thumb { background: #aebedd; border-radius: 4px; }
.featured-scroll-card { flex: 0 0 calc(33.333% - 16px); min-width: 260px; scroll-snap-align: start; display: flex; flex-direction: column; }
@media (max-width: 992px) { .featured-scroll-card { flex: 0 0 calc(50% - 12px); } }
@media (max-width: 576px) { .featured-scroll-card { flex: 0 0 82vw; } }

.fa-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; height: 100%; transition: .25s; display: flex; flex-direction: column;
}
.fa-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.fa-card .fa-img { height: 180px; background-size: cover; background-position: center; position: relative; }
.fa-card .fa-img .status-badge { position: absolute; top: 12px; left: 12px; }
.fa-card .fa-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.fa-card .fa-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--red); font-weight: 700; }
.fa-card h5 { font-size: 17px; margin: 6px 0 8px; }
.fa-card p { color: var(--muted); font-size: 13px; flex: 1; }
.fa-card .fa-link { font-weight: 700; font-size: 13px; margin-top: 10px; }

/* ── Status badges & activity chips ───────────────────────────────── */
.status-badge {
  display: inline-block; border-radius: 20px; font-size: .68rem; font-weight: 700;
  padding: 3px 10px; text-transform: uppercase; letter-spacing: .3px;
}
.status-badge--in_progress { background: #e6f4ea; color: var(--success); }
.status-badge--completed   { background: var(--navy-light); color: var(--navy); }
.status-badge--paused      { background: #fbf0d9; color: var(--warning); }
.status-badge--planned     { background: #eae6f5; color: #5b3fa0; }
.status-badge--lg { font-size: .78rem; padding: 5px 14px; }

.activity-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 16px; border: 1px solid; margin: 0 6px 6px 0;
}
.activity-chip--organization { color: var(--navy); border-color: var(--navy-light); background: var(--navy-light); }
.activity-chip--individual   { color: var(--red); border-color: #fbe4e2; background: #fbe4e2; }

/* ── Board of Trustees ────────────────────────────────────────────── */
#board { padding: 80px 0; }
.trustee-card { text-align: center; }
.trustee-card img {
  width: 130px; height: 130px; object-fit: cover; border-radius: 50%;
  border: 4px solid var(--navy-light); margin-bottom: 16px;
}
.trustee-card h5 { margin-bottom: 2px; font-size: 16px; }
.trustee-card .role { color: var(--red); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.trustee-card p.bio { color: var(--muted); font-size: 13px; }

/* ── Key Partners ─────────────────────────────────────────────────── */
#key-partners { padding: 80px 0; }
.trust-partner-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 18px 20px; height: 100%; transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.trust-partner-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.trust-partner-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.trust-partner-icon {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
}
.trust-partner-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
a.trust-partner-name {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none; transition: color .15s;
}
a.trust-partner-name:hover { color: var(--navy); }
.trust-partner-name-icon { font-size: 12px; color: var(--muted); flex-shrink: 0; }
a.trust-partner-name:hover .trust-partner-name-icon { color: var(--red); }
.trust-partner-type { font-size: 12px; color: var(--red); font-weight: 600; }
.trust-partner-loc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.trust-partner-about { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; flex-grow: 1; }
.trust-partner-tags { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 0.5rem; }
.trust-partner-tag {
  font-size: 11px; background: var(--navy-light); color: var(--navy);
  border-radius: 20px; padding: 2px 10px; font-weight: 600; letter-spacing: .2px;
  text-decoration: none; display: inline-block; transition: .15s;
}
a.trust-partner-tag:hover { background: var(--navy); color: #fff; }
.trust-partner-tag--more { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
.trust-partner-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.partner-learn-more { font-size: 12.5px; font-weight: 700; color: var(--red); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.partner-learn-more:hover { color: var(--red-dark); }

/* ── Testimonials ─────────────────────────────────────────────────── */
#testimonials { padding: 80px 0; }
.testimonial-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; height: 100%; display: flex; flex-direction: column;
}
.testimonial-avatar {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  margin-bottom: 14px; border: 2px solid var(--navy-light);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .5px; user-select: none;
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.testimonial-author { display: block; font-size: 14px; color: var(--ink); }
.testimonial-role { display: block; font-size: 12px; color: var(--muted); }
.testimonial-location { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.testimonial-quote { color: var(--ink); font-size: 14px; line-height: 1.7; flex: 1; font-style: italic; }
.testimonial-highlight {
  display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700;
  color: var(--navy); background: var(--navy-light); padding: 4px 12px; border-radius: 14px;
}

/* ── Collaborator chips ───────────────────────────────────────────── */
#collaborators { padding: 60px 0; }
.collaborator-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.collaborator-chip {
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--ink);
}

/* ── CTA strip ────────────────────────────────────────────────────── */
.cta-strip { background: var(--navy); color: #fff; padding: 50px 0; text-align: center; }
.cta-strip h3 { color: #fff; margin-bottom: 10px; }
.cta-strip p { color: rgba(255,255,255,.8); margin-bottom: 24px; }

/* ── How it works ─────────────────────────────────────────────────── */
.services { padding: 80px 0; }
.services .icon-box {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 24px; text-align: center; height: 100%; transition: .2s;
}
.services .icon-box:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.services .icon-box i { font-size: 34px; color: var(--navy); margin-bottom: 14px; }
.services .icon-box h4 { font-size: 16px; margin-bottom: 8px; }
.services .icon-box p { color: var(--muted); font-size: 13px; margin: 0; }

/* ── FAQ — quiet divider list, no boxed accordion items ───────────── */
.faq { padding: 80px 0; }
#faqAccordion { max-width: 820px; margin: 0 auto; }
.faq .accordion-item {
  border: none; border-bottom: 1px solid var(--border); background: transparent;
  margin-bottom: 0; border-radius: 0 !important;
}
.faq .accordion-item:first-child { border-top: 1px solid var(--border); }
.faq .accordion-button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: transparent; color: var(--ink); font-weight: 700; font-size: 15.5px;
  padding: 18px 4px; border: none; box-shadow: none; text-align: left;
}
.faq .accordion-button:not(.collapsed) { color: var(--navy); background: transparent; box-shadow: none; }
.faq .accordion-button:focus { box-shadow: none; }
/* Explicit icofont arrow instead of Bootstrap's ::after pseudo-icon — more
   reliable across browsers and consistent with the icon language used
   elsewhere on the site (wwd-card accordions, view toggle, etc). */
.faq .accordion-button::after { display: none; content: none; }
.faq-question-text { flex: 1; }
.faq-arrow { flex-shrink: 0; font-size: 16px; color: var(--navy); transition: transform .2s; }
.faq .accordion-button.collapsed .faq-arrow { transform: rotate(-90deg); }
.faq .accordion-body { color: var(--muted); font-size: 14.5px; line-height: 1.8; padding: 0 4px 20px; }

/* ── Contact ──────────────────────────────────────────────────────── */
.contact { padding: 80px 0; }
.contact-split { display: flex; gap: 50px; flex-wrap: wrap; }
.contact-engage { flex: 1 1 380px; }
.contact-engage .eyebrow { color: var(--red); font-weight: 700; font-size: 12px; text-transform: uppercase; }
.contact-engage h2 { font-size: 28px; margin: 8px 0 16px; }
.engage-cards { display: grid; gap: 12px; margin: 24px 0; }
.engage-card {
  display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; cursor: pointer; transition: .2s;
}
.engage-card:hover, .engage-card.active { border-color: var(--navy); box-shadow: var(--shadow-sm); }
.engage-card i { font-size: 22px; color: var(--navy); }
.engage-card strong { display: block; font-size: 14px; }
.engage-card span { font-size: 12px; color: var(--muted); }
.contact-trust-bar { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; }
.contact-trust-bar .item { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.contact-trust-bar i { color: var(--navy); }
.contact-seva-quote { margin: 24px 0 0; max-width: 320px; }
.contact-seva-quote img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; }
.contact-seva-quote figcaption { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 8px; text-align: center; }
.contact-form-panel {
  flex: 1 1 420px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow-sm);
}
.contact-form-panel .form-control, .contact-form-panel .form-select {
  border-radius: 6px; border-color: var(--border); font-size: 14px; padding: 10px 14px;
}
.contact-form-panel .form-control:focus, .contact-form-panel .form-select:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(29,63,114,.1);
}
.contact-form-panel label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.contact-form-panel button[type="submit"] {
  background: var(--navy); color: #fff; border: none; border-radius: 6px;
  padding: 12px 28px; font-weight: 700; width: 100%;
}
.contact-form-panel button[type="submit"]:hover { background: var(--navy-dark); }

/* ── Footer ───────────────────────────────────────────────────────── */
#footer { background: var(--navy-dark); color: rgba(255,255,255,.75); font-size: 14px; }
#footer .footer-top { background: var(--navy); padding: 56px 0 30px; }
#footer h4 { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 18px; }
#footer .footer-info p { color: rgba(255,255,255,.7); }
.footer-link-plain { color: inherit; text-decoration: none; transition: color .15s; }
.footer-link-plain:hover { color: #fff; text-decoration: underline; }
#footer .footer-links ul { list-style: none; padding: 0; }
#footer .footer-links ul li {
  display: flex; align-items: center; gap: 8px; padding: 6px 0; color: rgba(255,255,255,.7);
}
#footer .footer-links ul li a { color: rgba(255,255,255,.75); }
#footer .footer-links ul li a:hover { color: #fff; }
#footer .footer-links ul li i { color: var(--red); }
#footer .social-links a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; color: #fff;
}
#footer .social-links a:hover { background: var(--red); }
#footer .footer-donate-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
#footer form.newsletter-form { display: flex; gap: 8px; margin-top: 10px; }
#footer form.newsletter-form input { border: none; border-radius: 4px; padding: 9px 12px; flex: 1; font-size: 13px; }
#footer form.newsletter-form button { background: var(--red); border: none; color: #fff; padding: 9px 16px; border-radius: 4px; font-weight: 700; }
#footer .copyright, #footer .credits { text-align: center; padding: 16px 0; font-size: 12px; color: rgba(255,255,255,.5); }
#footer .container.py-3 { border-top: 1px solid rgba(255,255,255,.1); }

.back-to-top {
  position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: .3s; z-index: 999; box-shadow: var(--shadow-md);
}
.back-to-top.active { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--red); color: #fff; }

/* ==========================================================================
   Activities page — 3-column layout
   ========================================================================== */
.activities-page-title {
  background: linear-gradient(120deg, var(--navy), var(--navy-dark));
  color: #fff; padding: 46px 0 34px; text-align: center;
}
.activities-page-title h1 { color: #fff; font-size: 30px; margin-bottom: 6px; }
.activities-page-title p { color: rgba(255,255,255,.8); margin: 0; }
#page-title-external { color: #ffd28a; font-weight: 700; font-size: 13px; }

.activities-section { padding: 40px 0 70px; background: var(--bg-soft); min-height: 60vh; }
.activities-layout {
  display: grid; grid-template-columns: 280px 1fr 240px;
  grid-template-areas: "sidebar main related"; gap: 24px;
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
}
@media (max-width: 991px) {
  .activities-layout { grid-template-columns: 1fr; grid-template-areas: "sidebar" "main" "related"; }
}

/* Single-activity detail page — now reuses the 3-column .activities-layout
   grid above (sidebar/main/related), with a "Browse Activities" accordion
   in the sidebar slot instead of the old activities-list page. */
@media (max-width: 991px) {
  .activities-list-panel { position: static; }
  /* Stacked below the detail, not beside it — sticky+max-height here would
     trap the related list in a small scrolling box near the top instead of
     flowing normally after the article. */
  .related-sidebar { position: static; max-height: none; }
}
.activity-title-block { text-align: left; }
.activity-back-link {
  display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.75);
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  text-decoration: none; margin-bottom: 8px;
}
.activity-back-link:hover { color: #fff; }

/* Solid-panel sidebar — a continuous colored block (not a nested white
   card), matching the platform's box model: header + accordion buttons
   sit directly on the panel color, no internal card seams. */
.activities-list-panel {
  grid-area: sidebar; background: #d7deee; border-radius: 10px;
  align-self: stretch; margin-top: 0;
}
.sidebar-inner { padding: 0 0 1.5rem; position: sticky; top: 90px; }
.sidebar-header {
  padding: 0.7rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,.4); margin-bottom: .25rem;
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-header h6 {
  margin: 0; color: var(--navy-dark); font-weight: 800; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .5px;
}
.sidebar-header-icons { display: flex; gap: 8px; }
.sidebar-icon-btn {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(18,41,79,.14);
  color: var(--navy-dark); border: none; display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer; position: relative; transition: background .15s, color .15s; padding: 0;
}
.sidebar-icon-btn:hover { background: rgba(18,41,79,.24); }
.sidebar-icon-btn.active { background: #fff; color: var(--navy); }

.sidebar-search-wrap { position: relative; padding: 10px 12px 6px; border-bottom: 1px solid rgba(255,255,255,.4); }
.sidebar-search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-40%); color: #8296b3; font-size: 13px; pointer-events: none; }
.sidebar-search-input {
  width: 100%; border: 1px solid rgba(18,41,79,.15); border-radius: 20px; padding: 6px 10px 6px 30px;
  font-size: 12.5px; color: var(--ink); background: #fff; outline: none; transition: box-shadow .15s;
}
.sidebar-search-input:focus { box-shadow: 0 0 0 2px rgba(29,63,114,.18); }
.sidebar-search-input::placeholder { color: #9aa8bb; }

.sidebar-filter { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.4); }
.filter-group-label { width: 100%; font-size: 10px; font-weight: 700; color: #5a6b85; text-transform: uppercase; letter-spacing: .5px; margin: 2px 0 1px; }
.filter-btn {
  display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid rgba(18,41,79,.15);
  border-radius: 20px; color: var(--navy-dark); font-size: 11.5px; font-weight: 600; padding: 4px 10px; cursor: pointer; transition: .15s;
}
.filter-btn:hover { background: var(--navy-light); }
.filter-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.filter-btn-cat {
  display: inline-flex; align-items: center; background: #fff; border: 1px solid rgba(18,41,79,.15);
  border-radius: 20px; color: var(--ink); font-size: 11.5px; font-weight: 600; padding: 4px 10px; cursor: pointer; transition: .15s;
}
.filter-btn-cat:hover { background: var(--navy-light); }
.filter-btn-cat.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Search & Filter toolbar — sits above the activity detail in the middle
   column; reuses .sidebar-search-wrap/.sidebar-filter styling from the
   browse sidebar, overriding the border color for a white card context. */
.activity-toolbar {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 20px; overflow: hidden;
}
.activity-toolbar .sidebar-search-wrap, .activity-toolbar .sidebar-filter { border-bottom-color: var(--border); }
.activity-toolbar-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.activity-toolbar-header h6 { margin: 0; color: var(--navy); font-weight: 700; font-size: 13px; flex: 1; }
.activity-toolbar-header button {
  display: inline-flex; align-items: center; gap: 5px; background: var(--navy-light); color: var(--navy);
  border: none; border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s;
}
.activity-toolbar-header button:hover { background: var(--navy); color: #fff; }
.activity-toolbar-header button.active { background: var(--navy); color: #fff; }

#activities-list .accordion-button {
  width: 100%; padding: 8px; display: flex; justify-content: space-between; align-items: center;
  background-color: var(--navy); color: #fff; margin-bottom: 4px; border: none; cursor: pointer;
  text-align: left; font-size: 13px; font-weight: 700; transition: background .2s;
}
#activities-list .accordion-button:hover { background-color: var(--navy-dark); }
#activities-list .accordion-button::after { filter: brightness(0) invert(1); }
#activities-list .accordion-button .chip {
  background: #fff; color: var(--navy); border-radius: 3px; font-size: 11px; padding: 0 6px; font-weight: 700; white-space: nowrap;
}
#activities-list .accordion-body { padding: 0; background: #e1e6f0; margin-top: -4px; }
#activities-list .accordion-body ol { margin: 0; padding: 0; list-style: none; }

.sidebar-item { padding: 2px 0; }
.accordion-body-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 10px; color: var(--ink); font-size: 12.5px; line-height: 1.4; border-radius: 3px;
  border-left: 3px solid transparent; transition: all .15s; text-decoration: none;
}
.accordion-body-item:hover { color: var(--red); border-left-color: var(--navy); background: rgba(29,63,114,.06); }
.accordion-body-item.active { font-weight: 700; color: var(--navy); border-left-color: var(--red); background: rgba(29,63,114,.1); }
.sidebar-item-num { font-weight: 800; color: var(--navy); font-size: 11.5px; flex-shrink: 0; }
.sidebar-item-title { flex: 1; line-height: 1.35; }

.activity-main { grid-area: main; }
.activity-detail-wrap {
  background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
  padding: 32px; min-height: 300px;
}
.activity-detail-header h2 { font-size: 24px; margin-bottom: 10px; }
.activity-detail-header .meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 13px; margin: 12px 0 20px; }
.activity-detail-header .meta span { display: flex; align-items: center; gap: 6px; }
.activity-section { margin-bottom: 26px; }
.activity-section h6 { text-transform: uppercase; font-size: 12px; letter-spacing: .5px; color: var(--red); font-weight: 700; margin-bottom: 10px; }
.activity-section p { color: var(--ink); white-space: pre-line; }
.activity-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.activity-gallery a { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; }
.activity-gallery img { width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.activity-gallery a:hover img { transform: scale(1.06); }
.activity-cta-strip {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border);
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* Related sidebar — sticky flex-row list (thumb beside text), matching
   the platform reference rather than stacked image cards. */
.related-sidebar {
  grid-area: related; padding: 1.5rem 0.25rem 2rem; position: sticky; top: 90px;
  max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #aebedd var(--bg-soft);
}
.related-header { margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--navy-light); }
.related-header h6 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--navy); margin: 0; }
.related-card {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: 6px;
  text-decoration: none; color: inherit; transition: background .15s; cursor: pointer;
  border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.related-card:hover { background: var(--navy-light); color: inherit; text-decoration: none; }
.related-card:last-child { border-bottom: none; }
.related-card .thumb {
  flex-shrink: 0; width: 64px; height: 52px; border-radius: 5px; overflow: hidden;
  background: var(--navy-light) center/cover no-repeat;
}
.related-card .info { min-width: 0; }
.related-card .info .cat { font-size: 10px; color: var(--red); font-weight: 700; text-transform: uppercase; }
.related-card .info h6 { font-size: 12.5px; margin: 2px 0 0; color: var(--ink); line-height: 1.35; font-weight: 600; }

/* Sub-cases list — cases grouped under a parent case, rendered inline on
   the parent's own page (each item is the deep-link target for its own
   /activity/<id> URL, which redirects here). */
.subcase-list { display: flex; flex-direction: column; gap: 14px; }
.subcase-item {
  display: flex; gap: 14px; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius); scroll-margin-top: 100px; transition: background .4s, border-color .4s;
}
.subcase-item--highlight { background: var(--navy-light); border-color: var(--navy); }
.subcase-thumb {
  display: block; flex-shrink: 0; width: 96px; height: 84px; border-radius: 6px; position: relative;
  background: var(--bg-soft) center/cover no-repeat; cursor: pointer;
}
.subcase-body { min-width: 0; flex: 1; }
.subcase-title-row { display: flex; align-items: center; gap: 8px; }
.subcase-title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.35; flex: 1; min-width: 0; }
.subcase-title a { color: inherit; text-decoration: none; }
.subcase-title a:hover { color: var(--navy); text-decoration: underline; }
.subcase-badge { flex-shrink: 0; font-size: 10px; padding: 3px 8px; }
.subcase-permalink { color: var(--muted); flex-shrink: 0; font-size: 13px; }
.subcase-permalink:hover { color: var(--navy); }
.subcase-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.subcase-desc { font-size: 13px; color: var(--ink); margin: 6px 0 0; white-space: pre-line; }

.mobile-menu-trigger-bottom { text-align: center; padding: 16px 0; }

/* ── Activity detail fine-grained pieces ──────────────────────────── */
.activity-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.activity-title { flex: 1 1 auto; min-width: 0; margin: 0; }
.activity-header-badges { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.activity-badge-new { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 10px; }
.activity-meta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 4px; }
.activity-cost-badge, .activity-country-badge, .activity-duration-badge {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted);
  background: var(--bg-soft); padding: 6px 12px; border-radius: 16px;
}
.activity-cost-badge i, .activity-country-badge i, .activity-duration-badge i { color: var(--navy); }
.activity-description { white-space: pre-line; color: var(--ink); }
.activity-sub-description { color: var(--muted); font-size: 14px; margin-top: 8px; }
.sidebar-item-badges { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.badge-new { background: var(--red); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px; }
.chip-loc { opacity: .75; font-weight: 400; }
.gallery-thumb { position: relative; width: 100%; height: 100%; }
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0; background: rgba(29,63,114,.75);
  color: #fff; font-size: 11px; padding: 4px 8px; opacity: 0; transition: .2s;
}
.activity-gallery a:hover .gallery-caption { opacity: 1; }
.gallery-thumb--video { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; background: #000; }
.gallery-thumb--video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-video { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16/9; }
.gallery-video iframe { width: 100%; height: 100%; border: 0; }
.activity-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.activity-cta-lead { font-weight: 700; margin: 0; color: var(--navy); }
.activity-cta-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.activity-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-cta-contact {
  background: var(--navy); color: #fff; padding: 10px 22px; border-radius: 4px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-cta-contact:hover { background: var(--navy-dark); color: #fff; }
.btn-more-details {
  display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 700; font-size: 13px;
}
.btn-india-link {
  background: rgba(255,255,255,.15); color: #fff; padding: 8px 18px; border-radius: 20px;
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
}
.btn-india-link:hover { background: rgba(255,255,255,.28); color: #fff; }
@media (max-width: 991px) {
  .sidebar-toggle-chevron { display: inline-block; color: var(--navy-dark); font-size: 14px; transition: transform .2s; }
  .activities-list-panel:not(.mobile-expanded) #activities-list { display: none; }
  .activities-list-panel.mobile-expanded .sidebar-toggle-chevron { transform: rotate(180deg); }
  #sidebarHeaderToggle { cursor: pointer; }
  .sidebar-inner { padding: 0 0.75rem 1.5rem; }
  .activities-list-panel:not(.mobile-expanded) .sidebar-inner { padding-bottom: 0; }
  .activities-section { padding-top: 16px; }

  /* What We Do — See Details / Programs In This Area sit close together
     once the columns stack below 992px — add a separator so they read
     as two sections, not overlapping content. */
  .svc-num-heading { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
}
@media (min-width: 992px) {
  .sidebar-toggle-chevron { display: none; }
}

/* ==========================================================================
   What We Do page — category cards grouped from activities data
   ========================================================================== */
.wwd-section { padding: 56px 0 80px; background: var(--bg-soft); min-height: 60vh; }
.wwd-loading, .wwd-error { text-align: center; padding: 60px 0; color: var(--muted); grid-column: 1 / -1; }
/* align-items: start — without it, Grid's default stretch keeps a collapsed
   accordion card at its row's full height (matched to a taller sibling)
   instead of shrinking to just its header. */
.wwd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: start; }
@media (max-width: 767px) { .wwd-grid { grid-template-columns: 1fr; } }

.wwd-card {
  background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: .25s;
  scroll-margin-top: 90px;
}
.wwd-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.wwd-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 16px 20px; background: var(--navy); color: #fff; text-decoration: none; transition: background .2s;
  border: none; font: inherit; cursor: pointer; text-align: left;
}
.wwd-card-header:hover { background: var(--navy-dark); color: #fff; }
.wwd-card-header-title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; letter-spacing: .2px; }
.wwd-card-header-title i { font-size: 20px; }
.wwd-card-header-right { display: flex; align-items: center; gap: 12px; }
.wwd-card-header .chip { background: #fff; color: var(--navy); border-radius: 20px; font-size: 12px; padding: 3px 12px; font-weight: 700; white-space: nowrap; }
.wwd-card-chevron { font-size: 14px; transition: transform .2s; }
.wwd-card-header.collapsed .wwd-card-chevron { transform: rotate(-90deg); }

.wwd-card-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 14px; }
@media (max-width: 480px) { .wwd-card-list { grid-template-columns: 1fr; } }

.wwd-item {
  display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; text-decoration: none; color: var(--ink); transition: .15s; background: #fff;
}
.wwd-item:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--ink); }
.wwd-item-thumb {
  position: relative; height: 100px; background: var(--navy-light) center/cover no-repeat; flex-shrink: 0;
}
.wwd-item-badge { position: absolute; top: 7px; left: 7px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

/* ── No-photo placeholder — a neutral icon/gradient shown wherever a case
   has no image yet, instead of a stock photo or the trust logo. ── */
.no-photo-placeholder,
.wwd-item-thumb.is-empty,
.subcase-thumb.is-empty,
.fa-img.is-empty {
  background: linear-gradient(135deg, var(--navy-light) 0%, var(--bg-soft) 100%);
  display: flex; align-items: center; justify-content: center; cursor: default;
}
.no-photo-placeholder i,
.wwd-item-thumb-icon,
.subcase-thumb.is-empty i,
.fa-img-icon {
  color: var(--navy); opacity: .4;
}
.wwd-item-thumb-icon { font-size: 26px; }
.fa-img-icon { font-size: 32px; }
.subcase-thumb.is-empty i { font-size: 22px; }
.wwd-item-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wwd-item-title {
  font-size: 13px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wwd-item-sub { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wwd-card-footer {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px;
  border-top: 1px solid var(--border); color: var(--navy); font-weight: 700; font-size: 13px;
  text-decoration: none; transition: .15s;
}
.wwd-card-footer:hover { color: var(--red); background: var(--bg-soft); }

.wwd-cta-all { text-align: center; margin-top: 44px; }

/* ── Activities list — filter bar, view toggle, table view ──────────── */
.activities-filter-bar {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px;
  padding: 18px 22px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label {
  font-size: 10.5px; font-weight: 800; color: var(--navy); text-transform: uppercase; letter-spacing: .6px;
  display: flex; align-items: center; gap: 5px;
}
.filter-field label i { color: var(--red); font-size: 11px; }

/* Custom chevron + appearance reset — Bootstrap's .form-select renders
   inconsistently across browsers (Safari in particular keeps a near-native
   look); this guarantees the same control everywhere. */
.filter-field select {
  min-width: 200px; appearance: none; -webkit-appearance: none;
  background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d3f72' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 36px 10px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; transition: .15s;
}
.filter-field select:hover { border-color: var(--navy-lighter); }
.filter-field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(29,63,114,.12); }

.filter-clear {
  font-size: 13px; color: var(--red); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; padding: 10px 4px;
}
.filter-clear:hover { color: var(--red-dark); text-decoration: underline; }

.view-toggle {
  display: flex; gap: 2px; margin-left: auto; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 10px; padding: 3px;
}
.view-toggle a {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 7px;
  font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; transition: .15s;
}
.view-toggle a:hover { color: var(--navy); }
.view-toggle a.active { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }

.activities-table-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.activities-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.activities-table th {
  text-align: left; padding: 12px 16px; background: var(--navy); color: #fff;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
.activities-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.activities-table tbody tr { cursor: pointer; transition: background .15s; }
.activities-table tbody tr:hover { background: var(--bg-soft); }
.activities-table tbody tr:last-child td { border-bottom: none; }
.activities-table td a { color: var(--navy); font-weight: 700; text-decoration: none; }
.activities-table td a:hover { color: var(--red); }

.activities-table th.sortable { cursor: pointer; user-select: none; }
.activities-table th.sortable:hover { background: var(--navy-dark); }
.activities-table th.sortable i { font-size: 10px; margin-left: 4px; opacity: .45; }
.activities-table th.sortable.sort-asc i, .activities-table th.sortable.sort-desc i { opacity: 1; }
.activities-table th.sortable.sort-desc i { transform: scaleY(-1); display: inline-block; }

.activities-table-photo { width: 64px; padding: 8px 8px 8px 16px !important; }
.activities-table-photo img { width: 56px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.activities-table-photo .no-photo-placeholder { width: 56px; height: 44px; border-radius: 6px; }
.activities-table-photo .no-photo-placeholder i { font-size: 16px; }

/* ==========================================================================
   Donate page
   ========================================================================== */
.donate-section { padding: 60px 0 90px; background: var(--bg-soft); min-height: 55vh; }
.donate-panel {
  max-width: 480px; margin: 0 auto; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 34px 32px;
}
.donate-panel h3 { margin-bottom: 20px; text-align: center; }
.donate-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.donate-amount-btn {
  background: var(--navy-light); border: 1px solid transparent; border-radius: 6px;
  padding: 10px 6px; font-weight: 700; color: var(--navy); font-size: 13.5px; transition: .15s;
}
.donate-amount-btn:hover { border-color: var(--navy); }
.donate-amount-btn.active { background: var(--navy); color: #fff; }
.donate-secure-note { text-align: center; font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.donate-unavailable { max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 48px 36px; text-align: center; }
.donate-unavailable i { font-size: 40px; color: var(--navy); margin-bottom: 12px; display: block; }
.donate-thankyou { text-align: center; padding: 20px 0; }
.donate-thankyou i { font-size: 46px; color: var(--success); display: block; margin-bottom: 12px; }
.donate-lead { text-align: center; font-size: 13.5px; color: var(--muted); margin: -8px 0 20px; }

/* ── Payment method cards (Online / Bank Transfer / Cheque) ──────────────── */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 20px; }
.method-card {
  display: flex; align-items: center; gap: 10px; border: 2px solid var(--border); border-radius: 8px;
  padding: 12px 10px; cursor: pointer; transition: .15s; margin: 0;
}
.method-card:hover { border-color: var(--navy-lighter); background: var(--navy-light); }
.method-card.active { border-color: var(--navy); background: var(--navy-light); }
.method-card input[type="radio"] { display: none; }
.method-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: var(--navy-light); color: var(--navy); font-size: 16px;
}
.method-card.active .method-icon { background: var(--navy); color: #fff; }
.method-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.method-desc { font-size: 11px; color: var(--muted); }

/* ── Bank transfer / cheque detail boxes ──────────────────────────────────── */
.offline-box { background: var(--navy-light); border: 1px solid var(--navy-lighter); border-radius: var(--radius); padding: 20px; }
.offline-box h6 { color: var(--navy); font-weight: 700; margin-bottom: 12px; }
.offline-box p { font-size: 13.5px; color: var(--ink); }
.offline-details { width: 100%; font-size: 13.5px; margin-bottom: 10px; }
.offline-details td { padding: 4px 0; color: var(--ink); }
.offline-details td:first-child { color: var(--muted); width: 45%; }
.offline-payee { font-weight: 700; color: var(--navy); font-size: 15px; }
.offline-note { font-size: 12px; color: var(--muted); margin-top: 12px; margin-bottom: 0; }

/* ==========================================================================
   Photos gallery page
   ========================================================================== */
.gallery-section { padding: 50px 0 80px; }
.gallery-group { margin-bottom: 50px; }
.gallery-group h4 { font-size: 20px; border-bottom: 2px solid var(--navy-light); padding-bottom: 10px; margin-bottom: 20px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.gallery-grid a { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-sm); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.gallery-grid a:hover img { transform: scale(1.08); }

/* ── Auth pages (login/register) ─────────────────────────────────── */
.auth-wrap { min-height: 70vh; display: flex; align-items: center; padding: 60px 0; background: var(--bg-soft); }
.auth-card {
  max-width: 440px; margin: 0 auto; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 40px 36px;
}
.auth-card h2 { text-align: center; margin-bottom: 6px; }
.auth-card p.sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 14px; }
.auth-card .form-control { border-radius: 6px; padding: 10px 14px; }
.auth-card button[type="submit"] {
  width: 100%; background: var(--navy); color: #fff; border: none; border-radius: 6px;
  padding: 12px; font-weight: 700; margin-top: 8px;
}
.auth-card button[type="submit"]:hover { background: var(--navy-dark); }
.pw-field-wrap { position: relative; }
.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted);
}

@media (max-width: 767px) {
  .hero-unified-top h1 { font-size: 24px; }
  .impact-stat { flex: 1 1 50%; border-right: none; border-bottom: 1px solid var(--border); padding: 18px 12px; }
  .impact-stat .num { font-size: 22px; }
  .impact-stat .label { font-size: 11px; }
  .contact-split { flex-direction: column; gap: 24px; }
  /* .contact-engage's flex-basis:380px is a width on desktop's row layout —
     under flex-direction:column that basis becomes a *height*, forcing a
     tall empty box now that the trust-bar/seva-quote content is hidden. */
  .contact-engage { flex: 1 1 auto; }

  /* What We Do — smaller pill buttons so all four fit without needing
     horizontal scroll; wraps to a centered second row if it must. */
  .svc-seg-ctrl { gap: 6px; margin-bottom: 24px; }
  .svc-seg-ctrl button { padding: 6px 12px; font-size: 12px; }

  /* Get In Touch — small tabs wrapped 2-per-row instead of stacked cards
     or a horizontal scroll strip; hide the trust-bar chips and seva
     quote/image so only tabs + form show. */
  .contact-trust-bar, .contact-seva-quote { display: none; }
  .engage-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
  .engage-card {
    flex: 1 1 calc(50% - 4px); flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 8px 12px;
  }
  .engage-card i { font-size: 16px; }
  .engage-card strong { font-size: 12px; }
  .engage-card span { display: none; }
}