/* =========================================================
   Dreamlighter.us — Main Stylesheet (Premium Edition)
   Colors driven by CSS variables set in includes/header.php
   from the admin settings table (--primary, --secondary, --dark, --light-bg)
   Signature motif: "Lantern Glow" — a warm radial light behind
   key numbers/icons, echoing the Dreamlighter name.
   ========================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary: #B8232F;
  --secondary: #F2A93B;
  --dark: #1C1C1C;
  --light-bg: #FBF7F2;
  --white: #ffffff;
  --ink: #201a16;
  --gray: #6b6259;
  --gray-soft: #8a8078;
  --border: #ece1d4;
  --cream: #FBF7F2;
  --cream-deep: #F4EBDD;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px rgba(32,26,22,0.06);
  --shadow: 0 14px 36px rgba(32,26,22,0.10);
  --shadow-lg: 0 24px 60px rgba(32,26,22,0.16);

  --ease: cubic-bezier(.22,1,.36,1);
  --bottom-nav-h: 64px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body, 'Plus Jakarta Sans'), 'Hind Siliguri', sans-serif;
  color: var(--ink);
  line-height: 1.68;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 {
  font-family: var(--font-heading, 'Fraunces'), 'Hind Siliguri', serif;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
}
b, strong { font-weight: 700; }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > * { animation: fadeUp 0.7s var(--ease) both; }
.reveal-stagger.in-view > *:nth-child(1) { animation-delay: 0.03s; }
.reveal-stagger.in-view > *:nth-child(2) { animation-delay: 0.11s; }
.reveal-stagger.in-view > *:nth-child(3) { animation-delay: 0.19s; }
.reveal-stagger.in-view > *:nth-child(4) { animation-delay: 0.27s; }
.reveal-stagger.in-view > *:nth-child(5) { animation-delay: 0.35s; }
.reveal-stagger.in-view > *:nth-child(6) { animation-delay: 0.43s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 78%, #000)); color: #fff; box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--primary) 65%, transparent); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -8px color-mix(in srgb, var(--primary) 70%, transparent); }
.btn-outline { border-color: rgba(255,255,255,0.55); color: var(--primary); background: transparent; }
.btn-outline:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-3px); }
.btn-secondary { background: linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--secondary) 80%, #000)); color: var(--ink); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--secondary) 60%, transparent); }
.btn-secondary:hover { transform: translateY(-3px); }
.btn-light { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 17px 40px; font-size: 1.02rem; }

.btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.55); transform: scale(0); animation: ripple 0.6s ease-out; pointer-events: none; }
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

/* ---------- Topbar ---------- */
.topbar { background: var(--ink); color: #ddd3c8; font-size: 0.83rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.topbar-contact span { margin-right: 20px; }
.topbar-contact i { color: var(--secondary); margin-right: 6px; }
.topbar-social a { color: #ddd3c8; margin-left: 12px; opacity: 0.85; transition: opacity 0.2s, color 0.2s; }
.topbar-social a:hover { opacity: 1; color: var(--secondary); }

/* ---------- Header ---------- */
.site-header { background: transparent; box-shadow: 0 1px 0 rgba(32,26,22,0.06); position: sticky; top: 0; z-index: 485; transition: box-shadow 0.3s ease; }
/* The frosted-glass look now lives on this pseudo-element instead of directly on
   .site-header. Putting backdrop-filter straight on .site-header turns it into the
   CSS "containing block" for any position:fixed descendant (the mobile nav panel and
   its dark overlay live inside this header) — so on mobile the full-screen menu was
   being measured against the header's own small box instead of the real viewport,
   which is why it opened short of the top / off to one side instead of covering the
   whole screen. Keeping the header itself filter-free fixes that while looking identical. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.site-header.scrolled { box-shadow: 0 8px 24px rgba(32,26,22,0.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 20px; transition: height 0.25s ease; }
.site-header.scrolled .header-inner { height: 68px; }
.brand-logo { height: 52px; width: auto; transition: height 0.25s ease; }
.site-header.scrolled .brand-logo { height: 42px; }
.brand-text { font-family: var(--font-heading, 'Fraunces'), serif; font-size: 1.55rem; font-weight: 700; color: var(--primary); }
.main-nav > ul { display: flex; gap: 4px; align-items: center; }
.main-nav > ul > li > a { display: flex; align-items: center; gap: 6px; padding: 10px 15px; font-weight: 600; font-size: 0.94rem; border-radius: 10px; transition: background 0.2s, color 0.2s; }
.main-nav > ul > li > a:hover, .main-nav > ul > li > a.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.main-nav > ul > li > a i { font-size: 0.65rem; opacity: 0.7; }
.has-dropdown { position: relative; }
.has-dropdown > a .fa-chevron-down {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; transition: transform 0.25s var(--ease), background 0.2s ease; cursor: pointer; flex-shrink: 0;
}
.has-dropdown > a .fa-chevron-down:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.has-dropdown.open > a .fa-chevron-down { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: 100%; left: 50%; background: #fff; min-width: 300px; max-width: min(360px, 92vw);
  max-height: min(420px, 70vh); overflow-y: auto;
  box-shadow: var(--shadow-lg); border-radius: 14px; padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(10px) scale(0.98);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  display: grid; gap: 2px; border: 1px solid var(--border);
}
.has-dropdown.open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(6px) scale(1); }
.dropdown li a { display: block; padding: 8px 14px; border-radius: 10px; font-size: 0.9rem; font-weight: 500; line-height: 1.35; overflow-wrap: break-word; }
.dropdown li a:hover { background: var(--light-bg); color: var(--primary); }

/* Sub-submenu (3rd level+), desktop: flies out as its own card to the RIGHT of the
   parent row (like a cascading menu), instead of expanding inline inside the parent
   panel.
   IMPORTANT: the parent `.dropdown` card animates with `transform` (see `.has-
   dropdown.open .dropdown` above), and per spec any ancestor with a non-none
   `transform` becomes the containing block for `position: fixed` descendants —
   silently turning "fixed to the viewport" into "absolute inside that card" and
   reproducing the exact clipped/sideways-scrollbar bug this file used to avoid by
   expanding inline. So on open, JS moves the nested panel out to a direct child of
   <body> (see positionFlyout()/portalPanel() in main.js) — once there, nothing above
   it has a transform, and these `.dropdown.flyout-panel` rules (matched by class, not
   by DOM position, since it's no longer nested once it's a child of <body>) take over. */
.dropdown .has-dropdown { position: relative; }
.dropdown .dropdown li a { font-size: 0.87rem; }

@media (min-width: 961px) {
  .dropdown .has-dropdown > a .fa-chevron-down { transform: rotate(-90deg); }
  .dropdown .has-dropdown.open > a .fa-chevron-down { transform: rotate(-90deg); }
  .dropdown.flyout-panel {
    position: fixed; top: 0; left: 0; margin: 0;
    min-width: 260px; max-width: min(320px, 90vw);
    max-height: min(420px, 80vh); overflow-y: auto;
    background: #fff; border-radius: 14px; padding: 10px;
    box-shadow: var(--shadow-lg); border: 1px solid var(--border);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-10px) scale(0.98);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    display: grid; gap: 6px; z-index: 600;
  }
  .dropdown.flyout-panel.flyout-left { transform: translateX(10px) scale(0.98); }
  .dropdown.flyout-panel.open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0) scale(1);
  }
}

/* Mobile (and any non-hover/touch desktop): fall back to the inline accordion — a
   flyout card doesn't work well with touch, so nested items expand in place instead.
   (On these devices JS never portals the panel out, so it's still nested and this
   ancestor-based selector still matches.) */
@media (max-width: 960px), (hover: none), (pointer: coarse) {
  .dropdown .has-dropdown > a .fa-chevron-down { transform: rotate(0deg); }
  .dropdown .has-dropdown.open > a .fa-chevron-down { transform: rotate(180deg); }
  .dropdown .has-dropdown > .dropdown {
    position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    box-shadow: none; border: none; background: transparent; max-width: none; min-width: 0;
    max-height: 0; overflow: hidden; padding: 0 0 0 16px; margin: 0; gap: 4px;
    transition: max-height 0.35s var(--ease, ease);
  }
  .dropdown .has-dropdown.open > .dropdown { padding: 6px 0 6px 16px; }
}
.header-actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--ink); }
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(20,17,15,0.5); backdrop-filter: blur(2px); z-index: 490; opacity: 0; transition: opacity 0.3s ease; }
.nav-overlay.open { display: block; opacity: 1; }
.nav-close { display: none; }

@media (max-width: 960px) {
  .main-nav {
    position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; height: 100dvh;
    background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,0.16); transition: right 0.35s var(--ease);
    padding: 26px 22px 30px; overflow-y: auto; z-index: 501;
  }
  .main-nav.open { right: 0; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav > ul > li > a { padding: 14px 12px; font-size: 1.02rem; }
  .has-dropdown > a .fa-chevron-down { width: 30px; height: 30px; margin-left: auto; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none;
    max-width: none; max-height: 0; overflow: hidden; padding: 0 0 0 10px; border: none; gap: 4px;
    transition: max-height 0.35s var(--ease);
  }
  .has-dropdown.open .dropdown { padding: 4px 0 4px 10px; transform: none; }
  .dropdown li a { padding: 7px 14px; font-size: 0.92rem; }
  .nav-toggle { display: block; }
  .nav-close { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-family: var(--font-heading, 'Fraunces'), serif; font-weight: 700; font-size: 1.15rem; color: var(--primary); }
  .nav-close button { background: var(--light-bg); border: none; width: 38px; height: 38px; border-radius: 50%; font-size: 1.05rem; cursor: pointer; color: var(--ink); }
  .topbar-contact span:nth-child(2) { display: none; }
  .header-actions { gap: 8px; }
  .header-actions .btn-primary {
    padding: 9px 15px 9px 17px;
    font-size: 0.8rem;
    gap: 6px;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 60%, transparent);
  }
  .header-actions .btn-primary i { font-size: 0.82em; }
}
@media (max-width: 380px) {
  .header-actions .btn-primary span { display: none; }
  .header-actions .btn-primary { padding: 10px; border-radius: 50%; }
}

/* ---------- Hero ---------- */
.hero {
  background:
    linear-gradient(135deg, rgba(20,16,14,0.82) 0%, color-mix(in srgb, var(--primary) 62%, rgba(20,16,14,0.7)) 55%, rgba(20,16,14,0.72) 100%),
    var(--hero-img, none);
  background-size: cover; background-position: center;
  color: #fff; padding: 112px 0 280px; position: relative; overflow: hidden;
  /* Padding alone gives a fixed height regardless of screen width, so on big/wide
     displays the section becomes short-and-wide and object-fit:cover crops away most
     of the photo's height. Scaling min-height with viewport width keeps the visible
     photo tall and proportional on large screens without touching the mobile layout
     (the clamp floor matches the height the padding+content already produce there). */
  min-height: clamp(640px, 46vw, 860px);
  /* Requested: keep the badge/heading/buttons block sitting just above the bottom
     of the photo (not floating over people's faces mid-image), and centered. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 420px at 82% 12%, color-mix(in srgb, var(--secondary) 55%, transparent), transparent 70%);
  animation: glowPulse 7s ease-in-out infinite;
  z-index: 1;
}
@keyframes glowPulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 8px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(8px);
  font-size: 0.82rem; font-weight: 600; margin-bottom: 26px; letter-spacing: 0.01em;
}
.hero-badge .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--secondary); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 0.72rem; }
.hero-content, .luxury-hero-text-content { max-width: 700px; position: relative; z-index: 2; }
.luxury-hero-text-content { margin: 0 auto; text-align: center; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); margin-bottom: 22px; font-weight: 600; color: #fff; }
.hero p { font-size: 1.14rem; opacity: 0.92; margin-bottom: 34px; max-width: 560px; margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero .hero-badge { display: flex; width: fit-content; margin: 0 auto 26px; }
.hero .hero-actions { justify-content: center; }
.hero .photo-slider { position: absolute; inset: 0; z-index: 0; }
.hero .container { position: relative; z-index: 2; margin-bottom: -150px; }
/* Requested: shift the visible hero photo ~1 inch lower than the site-wide default crop above. */
.hero .photo-slider img { object-position: center calc(52% - 96px); }
/* Subtle left-side fade only, so the photo itself stays bright and clear
   (just enough contrast behind the headline text on the left) */
.hero-gradient-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15,12,10,0.62) 0%, rgba(15,12,10,0.38) 34%, rgba(15,12,10,0.08) 58%, transparent 78%),
    linear-gradient(to bottom, transparent 72%, rgba(15,12,10,0.55) 100%);
}

/* Nicely styled pill buttons used in the hero / page banners (Get Involved + Donate Now) */
.btn-luxury-action, .btn-luxury-secondary {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 30px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; transition: transform 0.25s, box-shadow 0.25s, background 0.25s, color 0.25s;
}
.btn-luxury-action { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.btn-luxury-action:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* Donate Now — filled gradient pill so it stands out as the primary call-to-action, with a heart-pop on hover */
.btn-luxury-secondary {
  border: 2px solid rgba(255,255,255,0.35);
  color: #fff;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--primary) 65%, transparent), var(--shadow-sm);
}
.btn-luxury-secondary i { transition: transform 0.3s ease; }
.btn-luxury-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -6px color-mix(in srgb, var(--primary) 75%, transparent), var(--shadow);
  filter: brightness(1.06);
}
.btn-luxury-secondary:hover i { transform: scale(1.18); }

/* ---------- Photo Slider (multi-photo gallery, auto-crossfade) ---------- */
.photo-slider { position: relative; overflow: hidden; }
.photo-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 52%; /* bias toward the upper part of the photo so faces don't get cropped out */
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.photo-slider img.active { opacity: 1; }
.photo-slider-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.photo-slider-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.55); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); cursor: pointer; transition: background 0.3s, transform 0.3s; }
.photo-slider-dots span.active { background: #fff; transform: scale(1.3); }
.photo-tone .photo-slider img { position: absolute; }

/* Prev/next arrow icons on the sides of the slider, so visitors can see and browse every photo */
.photo-slider-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: rgba(20,16,14,0.38); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; cursor: pointer; backdrop-filter: blur(6px);
  transition: background 0.25s, transform 0.25s;
}
.photo-slider-nav:hover { background: rgba(20,16,14,0.6); transform: translateY(-50%) scale(1.08); }
.photo-slider-nav.prev { left: 16px; }
.photo-slider-nav.next { right: 16px; }
@media (max-width: 640px) {
  .photo-slider-nav { width: 34px; height: 34px; font-size: 0.8rem; }
  .photo-slider-nav.prev { left: 8px; }
  .photo-slider-nav.next { right: 8px; }
}

/* ---------- Stats strip ---------- */
.stats-strip { background: transparent; margin-top: -53px; position: relative; z-index: 5; }
.stats-card { background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid var(--border); }
.stats-card .stat { text-align: center; padding: 36px 20px; border-right: 1px solid var(--border); position: relative; }
.stats-card .stat::before {
  content: ''; position: absolute; top: 8px; left: 50%; width: 90px; height: 90px; transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 45%, transparent), transparent 70%); z-index: 0;
}
.stats-card .stat:last-child { border-right: none; }
.stats-card .stat .num { font-family: var(--font-heading, 'Fraunces'), serif; font-size: 2.3rem; font-weight: 600; color: var(--primary); position: relative; z-index: 1; }
.stats-card .stat .lbl { color: var(--gray); font-size: 0.88rem; margin-top: 6px; font-weight: 500; position: relative; z-index: 1; }
@media (max-width: 700px) { .stats-card { grid-template-columns: 1fr; } .stats-card .stat { border-right: none; border-bottom: 1px solid var(--border); padding: 26px 20px; } .stats-card .stat:last-child{border-bottom:none;} }

/* ---------- Sections ---------- */
section { padding: 35px 0; }
.section-head { text-align: center; max-width: 700px; margin: 0 auto 52px; }
.eyebrow { color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; font-size: 0.95rem; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--secondary); display: inline-block; border-radius: 2px; }
.section-head h2 { font-size: clamp(1.7rem, 3.1vw, 2.2rem); }
.section-head p { color: var(--gray); margin-top: 16px; font-size: 1rem; }
.bg-light { background: var(--light-bg); }
.bg-ink { background: var(--ink); color: #eee; }
.bg-ink h2, .bg-ink h3 { color: #fff; }

/* ---------- Programs grid ---------- */
.programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.program-card {
  background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); display: flex; flex-direction: column;
  border: 1px solid var(--border);
}
.program-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.program-card .thumb { height: 200px; background-size: cover; background-position: center; background-color: var(--light-bg); position: relative; }
.program-card .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 20%, transparent) 0%, transparent 45%, rgba(0,0,0,0.22) 100%); mix-blend-mode: multiply; }
.program-card .thumb .icon-badge {
  position: absolute; bottom: -24px; left: 24px; width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 75%, #000)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: var(--shadow); z-index: 2;
}
.program-card .body { padding: 42px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.program-card h3 { font-size: 1.16rem; margin-bottom: 10px; }
.program-card p { color: var(--gray); font-size: 0.93rem; flex: 1; }
.program-card .link { margin-top: 18px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.25s ease; }
.program-card .link:hover { gap: 11px; }
@media (max-width: 960px) { .programs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .programs-grid { grid-template-columns: 1fr; } }

/* ---------- Impact / Mission ---------- */
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.mission-media { position: relative; }
.mission-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; aspect-ratio: 4/3.1; }
.mission-media .photo-slider { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4/3.1; }
.mission-media .photo-slider img { border-radius: 0; box-shadow: none; }
.mission-media .accent-card {
  position: absolute; bottom: -26px; left: -26px; background: #fff; border-radius: var(--radius); padding: 18px 22px;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 14px; border: 1px solid var(--border);
}
.mission-media .accent-card .icon { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--secondary) 70%, #000)); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 1.1rem; flex-shrink: 0; }
.mission-media .accent-card strong { display: block; font-family: var(--font-heading, 'Fraunces'), serif; font-size: 1.1rem; }
.mission-media .accent-card span { color: var(--gray); font-size: 0.82rem; }
@media (max-width: 860px) { .mission-grid { grid-template-columns: 1fr; gap: 60px; } .mission-media .accent-card { left: 16px; bottom: -20px; } }

/* ---------- Photo Tone (unified branded overlay used across all site photos) ---------- */
.photo-tone { position: relative; overflow: hidden; }
.photo-tone::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 28%, transparent) 0%, transparent 45%, color-mix(in srgb, var(--ink) 38%, transparent) 100%);
  mix-blend-mode: multiply;
}
.photo-tone img { position: relative; }

/* ---------- Campaigns ---------- */
.campaigns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.campaign-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.campaign-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.campaign-card .thumb { height: 190px; background-size: cover; background-position: center; background-color: var(--light-bg); display: block; }
.campaign-card .body { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.campaign-card h3 { font-size: 1.14rem; margin-bottom: 8px; }
.campaign-card h3 a { color: inherit; }
.campaign-card h3 a:hover { color: var(--primary); }
.campaign-card p { color: var(--gray); font-size: 0.93rem; flex: 1; }
.campaign-card .progress-bar { height: 8px; border-radius: var(--radius-pill); background: var(--light-bg); overflow: hidden; margin-top: 16px; }
.campaign-card .progress-fill { height: 100%; background: linear-gradient(90deg, var(--secondary), var(--primary)); border-radius: var(--radius-pill); }
.campaign-card .progress-meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--gray); margin-top: 8px; }
.campaign-detail-progress { max-width: 520px; margin: 0 0 26px; }
.campaign-detail-progress .progress-bar { height: 10px; border-radius: var(--radius-pill); background: var(--light-bg); overflow: hidden; }
.campaign-detail-progress .progress-fill { height: 100%; background: linear-gradient(90deg, var(--secondary), var(--primary)); border-radius: var(--radius-pill); }
.campaign-detail-progress .progress-meta { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--gray); margin-top: 10px; font-weight: 600; }

/* ---------- Campaigns horizontal scroll strip (homepage) ---------- */
.campaigns-scroll-wrap { position: relative; margin-top: 40px; }
.campaigns-scroll {
  display: flex; gap: 26px; overflow-x: auto; scroll-behavior: smooth; padding: 6px 4px 18px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.campaigns-scroll::-webkit-scrollbar { display: none; }
.campaigns-scroll .campaign-card { flex: 0 0 300px; }
@media (max-width: 640px) { .campaigns-scroll .campaign-card { flex-basis: 82vw; } }
.campaigns-scroll-arrows { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 6px; }
.scroll-arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.scroll-arrow:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }
.scroll-arrow:disabled { opacity: 0.35; cursor: default; }

/* ---------- Load More button ---------- */
.load-more-wrap { text-align: center; margin-top: 40px; }
.btn-load-more {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 30px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: #fff; color: var(--ink); font-weight: 600; font-size: 0.94rem;
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.btn-load-more:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }
.btn-load-more i { transition: transform 0.25s ease; }
.btn-load-more:hover i { transform: translateY(2px); }

/* ---------- Value / Get Involved cards ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.value-card { background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 28px; transition: transform 0.35s var(--ease), background 0.35s var(--ease); position: relative; overflow: hidden; }
.value-card:hover { transform: translateY(-6px); background: #fff; box-shadow: var(--shadow); }
.value-card .icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #000)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 18px; }
.value-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.value-card p { color: var(--gray); font-size: 0.92rem; }
@media (max-width: 860px) { .value-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 68%, #000)); color: #fff; text-align: center; padding: 76px 0; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 300px at 15% 20%, color-mix(in srgb, var(--secondary) 40%, transparent), transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: 2.1rem; margin-bottom: 16px; color: #fff; }
.cta-band p { opacity: 0.92; max-width: 600px; margin: 0 auto 30px; }
.cta-actions { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }

/* White-on-primary variant for outline buttons used inside a cta-band (Support This Program/Campaign etc.) */
.cta-band .btn-outline { border-color: rgba(255,255,255,0.65); color: #fff; }
.cta-band .btn-outline:hover { background: #fff; color: var(--primary); border-color: #fff; }

/* Optional third / lowest-emphasis button — a soft pill link, sits comfortably alongside the two solid buttons */
.cta-band .btn-ghost {
  display: inline-flex; align-items: center; gap: 9px; padding: 15px 26px; border-radius: var(--radius-pill);
  color: #fff; font-weight: 600; font-size: 0.96rem; background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3); transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}
.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.5); transform: translateY(-3px); }
.cta-band .btn-ghost::after { content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.8em; opacity: 0.85; }

/* Slightly roomier layout specifically for the per-program / per-campaign detail-page band */
.cta-band-detail .cta-actions { gap: 18px; margin-top: 6px; }
.cta-band-detail .btn, .cta-band-detail .btn-ghost { min-width: 168px; justify-content: center; }
@media (max-width: 560px) {
  .cta-band-detail .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-band-detail .btn, .cta-band-detail .btn-ghost { width: 100%; }
}

/* ---------- Program single page ---------- */
.page-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(20,16,14,0.86) 0%, color-mix(in srgb, var(--primary) 64%, rgba(20,16,14,0.75)) 55%, rgba(20,16,14,0.78) 100%), var(--banner-img, none);
  background-size: cover; background-position: center;
  color: #fff; padding: 190px 0 183px; text-align: center;
  overflow: hidden;
}
/* Real photo (same clear, uncropped treatment as the homepage hero) sits above the base gradient */
.page-banner .photo-slider { position: absolute; inset: 0; z-index: 0; }

/* Much lighter tint than before -- just enough for the white heading text to stay readable
   while the photo underneath (and people's faces) stay clearly visible, matching the home hero */
.page-banner::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,12,10,0.3) 0%, rgba(15,12,10,0.2) 45%, rgba(15,12,10,0.34) 100%);
}
.page-banner::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1;
  background: linear-gradient(to top, rgba(15,12,10,0.22), transparent); pointer-events: none;
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { font-family: var(--font-heading, 'Fraunces'), serif; font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 600; color: #fff; max-width: 760px; margin: 0 auto; line-height: 1.22; }
.breadcrumb { margin-top: 16px; opacity: 0.82; font-size: 0.88rem; letter-spacing: 0.02em; }
.breadcrumb a { color: #fff; }
.breadcrumb a:hover { text-decoration: underline; }
.page-banner .hero-badge { margin: 0 auto 22px; }
.page-banner .hero-actions { justify-content: center; margin-top: 30px; }

.program-body { max-width: 100%; margin: 0 auto; }
.program-body h2, .program-body h3 { font-family: var(--font-heading, 'Fraunces'), serif; margin: 40px 0 16px; line-height: 1.3; }
.program-body h2 { font-size: 1.55rem; }
.program-body h3 { font-size: 1.25rem; }
.program-body p { margin-bottom: 18px; color: #34302c; font-size: 1.02rem; line-height: 1.75; }
.program-body ul, .program-body ol { margin: 0 0 18px 22px; color: #34302c; line-height: 1.75; }
.program-body li { margin-bottom: 6px; }
.program-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.program-body blockquote {
  position: relative; margin: 34px 0; padding: 30px 32px 26px 62px;
  background: linear-gradient(135deg, var(--light-bg), color-mix(in srgb, var(--secondary) 8%, var(--light-bg)));
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  font-family: var(--font-heading, 'Fraunces'), serif; font-style: italic; color: var(--ink); font-size: 1.1rem; line-height: 1.6;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.program-body blockquote::before {
  content: '\f10d'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; top: 22px; left: 24px; font-size: 1.4rem; color: var(--secondary); font-style: normal;
}
.program-body blockquote::after {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 4px; background: linear-gradient(180deg, var(--primary), var(--secondary));
}
.program-body blockquote:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* Fixed-size, clean, uniform photos inside program content */
.program-body img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 32px 0;
  display: block;
  background: var(--light-bg);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.program-body img:hover { transform: scale(1.015) translateY(-4px); box-shadow: var(--shadow-lg); }
.program-body figure { margin: 32px 0; }
.program-body figure img { margin: 0 0 10px; }
.program-body figcaption { text-align: center; font-size: 0.86rem; color: var(--gray); font-style: italic; }
.program-body p > img:only-child,
.program-body p:has(> img:only-child) { margin: 32px 0; }
.program-body h2 { position: relative; padding-bottom: 12px; }
.program-body h2::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px;
  border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.program-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
  margin: 8px 0 44px; padding: 30px 10px;
  background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.program-stats .stat { text-align: center; padding: 6px 20px; position: relative; }
.program-stats .stat:not(:last-child)::after {
  content: ''; position: absolute; right: -10px; top: 8px; bottom: 8px; width: 1px; background: var(--border);
}
.program-stats .stat .num { font-family: var(--font-heading, 'Fraunces'), serif; font-size: 2rem; font-weight: 600; color: var(--primary); }
.program-stats .stat .lbl { font-size: 0.85rem; color: var(--gray); margin-top: 6px; font-weight: 500; }
@media (max-width: 700px) {
  .program-stats { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
  .program-stats .stat:not(:last-child)::after { display: none; }
  .program-stats .stat:not(:last-child) { border-bottom: 1px solid var(--border); padding-bottom: 18px; }
  .program-body img { aspect-ratio: 5 / 4; }
}

/* ---------- Donation page ---------- */
/* Much lighter tint than before -- just enough for the white heading text to stay readable
   while the donation photo underneath stays clearly visible, matching the page-banner fix. */
.donate-hero { background: linear-gradient(180deg, rgba(15,12,10,0.42) 0%, rgba(15,12,10,0.3) 45%, rgba(15,12,10,0.46) 100%), var(--donate-img, none); background-size: cover; background-position: center; color: #fff; padding: 96px 0 84px; text-align: center; position: relative; overflow: hidden; }
.donate-hero .photo-slider { position: absolute; inset: 0; z-index: 0; }
.donate-hero-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(15,12,10,0.42) 0%, rgba(15,12,10,0.3) 45%, rgba(15,12,10,0.46) 100%); }
.donate-hero::before { content:''; position:absolute; inset:0; z-index: 2; background: radial-gradient(560px 380px at 50% -10%, color-mix(in srgb, var(--secondary) 45%, transparent), transparent 70%); }
.donate-hero > .container { position: relative; z-index: 3; }
.donate-hero h1 { color: #fff; }

.donate-panel { max-width: 760px; margin: -56px auto 0; position: relative; z-index: 6; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; }
.donate-panel-inner { padding: 32px 30px 34px; }
@media (max-width: 640px) { .donate-panel-inner { padding: 24px 18px 26px; } .donate-panel { border-radius: var(--radius); margin-top: -34px; } }

.donate-step-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.donate-step-label .step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; }

.tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.tier-card { background: var(--light-bg); border-radius: var(--radius-sm); box-shadow: none; padding: 15px 10px; text-align: center; position: relative; border: 2px solid var(--border); transition: all 0.22s var(--ease); cursor: pointer; }
.tier-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); transform: translateY(-3px); }
.tier-card.selected { border-color: var(--primary); background: #fff; box-shadow: var(--shadow); transform: translateY(-3px); }
.tier-card.selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.5rem; display: flex; align-items: center; justify-content: center; }
.tier-card .badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--secondary); color: var(--ink); font-size: 0.6rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.tier-card .amount { font-family: var(--font-heading, 'Fraunces'), serif; font-size: 1.3rem; font-weight: 600; color: var(--primary); margin: 6px 0 5px; }
.tier-card p { font-size: 0.72rem; color: var(--gray); line-height: 1.4; }
@media (max-width: 640px) { .tiers-grid { grid-template-columns: repeat(2,1fr); } }

.field-label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 7px; color: var(--ink); }
.field-input, .donate-panel input[type=text], .donate-panel input[type=email], .donate-panel input[type=number], .donate-panel select, .donate-panel textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--border); font-family: inherit; font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease; background: #fff;
}
.donate-panel input:focus, .donate-panel select:focus, .donate-panel textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }
.checkbox-row { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 0.92rem; }
.checkbox-row input { width: auto; accent-color: var(--primary); }

.method-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(128px,1fr)); gap: 10px; }
.method-card { border: 2px solid var(--border); border-radius: 14px; padding: 16px 10px; text-align: center; cursor: pointer; background: #fff; transition: all 0.22s var(--ease); position: relative; }
.method-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); transform: translateY(-2px); }
.method-card.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, #fff); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.method-card.selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.55rem; display: flex; align-items: center; justify-content: center; }
.method-card i { font-size: 1.35rem; display: block; margin-bottom: 7px; color: var(--primary); }
.method-card span { font-size: 0.84rem; font-weight: 700; }
.method-details, .paypal-wrap, .stripe-wrap { background: var(--light-bg); border-radius: 14px; padding: 18px; border: 1px solid var(--border); }
.stripe-card-box { background: #fff; border: 1.5px solid var(--border); border-radius: 10px; padding: 14px 12px; transition: border-color 0.2s; }
.stripe-card-box.StripeElement--focus { border-color: var(--primary); }

.donate-submit-bar { text-align: center; margin: 30px 0 4px; }
.donate-total-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 8px 8px 20px; margin-bottom: 18px; font-size: 0.9rem; font-weight: 600; }
.donate-total-chip .amt { font-family:'Fraunces',serif; color: var(--primary); font-size: 1.15rem; }

.donate-ways { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.way-card { background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; transition: transform 0.3s var(--ease); }
.way-card:hover { transform: translateY(-5px); }
.way-card i { font-size: 1.5rem; color: #fff; margin-bottom: 16px; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #000)); display: flex; align-items: center; justify-content: center; }
@media (max-width: 860px) { .donate-ways { grid-template-columns: 1fr; } }

.mobile-donate-bar { display: none; }
@media (max-width: 640px) {
  .mobile-donate-bar {
    display: flex; position: sticky; bottom: calc(var(--bottom-nav-h) + 10px); z-index: 60; margin: 18px 12px 0;
    background: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); padding: 8px; align-items: center; justify-content: space-between; border: 1px solid var(--border);
  }
  .mobile-donate-bar.is-paypal-active { display: none; }
  .mobile-donate-bar .amt-label { padding-left: 12px; font-size: 0.85rem; color: var(--gray); }
  .mobile-donate-bar .amt-label strong { display: block; color: var(--ink); font-family: var(--font-heading, 'Fraunces'), serif; font-size: 1.15rem; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 16px; font-family: inherit; font-size: 0.95rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form select {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 16px; font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
.contact-info-card { background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; }
.contact-info-card li { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.contact-info-card i { color: #fff; background: var(--primary); width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Become a Volunteer ---------- */
.volunteer-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: start; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row-2 input, .form-row-2 select { margin-bottom: 0; }
.volunteer-form textarea { min-height: 160px; }
/* Attach Resume/CV field — native file inputs ignore normal input styling, so we hide the
   raw control and style the <label> to match the width/border/radius of the text fields above it. */
.file-upload-field { margin-bottom: 16px; position: relative; }
.file-upload-field input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.file-upload-label {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 14px 16px; border: 1.5px dashed var(--border); border-radius: 12px;
  font-family: inherit; font-size: 0.95rem; color: var(--gray); cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.file-upload-label:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 4%, transparent); }
.file-upload-label i { color: var(--primary); font-size: 1rem; }
.file-upload-label.has-file { border-style: solid; color: var(--ink); }
.file-upload-hint { display: block; font-size: 0.78rem; color: var(--gray); margin: -10px 0 16px 4px; }

/* ---------- Documents page ---------- */
.plain-page-header { padding: 70px 0 40px; background: var(--light-bg); text-align: center; }
.plain-page-header h1 { font-family: var(--font-heading, 'Fraunces'), serif; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600; color: var(--ink); margin: 0; }
.breadcrumb-plain { margin-top: 12px; font-size: 0.88rem; color: var(--gray); }
.breadcrumb-plain a { color: var(--primary); text-decoration: none; }
.breadcrumb-plain a:hover { text-decoration: underline; }

.folder-grid { display: flex; flex-direction: column; gap: 14px; padding: 44px 0 70px; max-width: 820px; margin: 0 auto; }
.folder-card {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 18px 22px; background: var(--light-bg); border: 1.5px solid var(--border); border-radius: 16px;
  cursor: pointer; font-family: inherit; transition: all 0.2s var(--ease);
}
.folder-card:hover { border-color: var(--primary); background: #fff; box-shadow: var(--shadow-sm); }
.folder-card.open { background: #fff; border-color: var(--primary); box-shadow: var(--shadow-sm); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.folder-card-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  background: color-mix(in srgb, var(--secondary) 16%, #fff); color: color-mix(in srgb, var(--secondary) 55%, var(--primary));
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.folder-card.open .folder-card-icon i:before { content: "\f07c"; } /* open-folder glyph while expanded */
.folder-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.folder-card-title { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.folder-card-count { font-size: 0.82rem; color: var(--gray); }
.folder-card-chevron { flex-shrink: 0; color: var(--gray); transition: transform 0.22s var(--ease); }
.folder-card.open .folder-card-chevron { transform: rotate(180deg); color: var(--primary); }

.folder-files {
  display: none; flex-direction: column; gap: 10px;
  padding: 14px 16px 18px; background: #fff; border: 1.5px solid var(--primary);
  border-top: none; border-radius: 0 0 16px 16px; margin-top: -14px;
}
.folder-files.open { display: flex; }

.document-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--light-bg); border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; transition: all 0.2s var(--ease);
}
.document-card:hover { border-color: var(--primary); background: #fff; box-shadow: var(--shadow-sm); }
.document-card-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.document-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.document-card-title { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.document-card-desc { font-size: 0.82rem; color: var(--gray); }
.document-card-download { flex-shrink: 0; color: var(--gray); font-size: 0.9rem; }
.document-card:hover .document-card-download { color: var(--primary); }
@media (max-width: 700px) {
  .plain-page-header { padding: 56px 0 30px; }
  .folder-card { padding: 15px 16px; }
}
.volunteer-intro { padding-top: 10px; }
.volunteer-intro h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: 22px; }
.volunteer-intro p { color: var(--ink); font-weight: 600; line-height: 1.75; font-size: 1.02rem; }
.underline-swash { position: relative; display: inline-block; }
.underline-swash::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: -6px; height: 10px;
  background: var(--secondary);
  clip-path: polygon(0% 60%, 12% 20%, 24% 70%, 36% 15%, 48% 65%, 60% 10%, 72% 60%, 84% 20%, 100% 55%, 100% 100%, 0% 100%);
}
@media (max-width: 860px) {
  .volunteer-grid { grid-template-columns: 1fr; gap: 30px; }
  .volunteer-intro { order: -1; }
  .form-row-2 { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .form-row-2 input, .form-row-2 select { margin-bottom: 16px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #cabfb2; padding-top: 76px; position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.9fr 0.9fr 1.3fr; gap: 40px; padding-bottom: 50px; }
.footer-logo { height: 46px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer-brand h3 { color: #fff; margin-bottom: 16px; }
.footer-brand p { font-size: 0.9rem; opacity: 0.85; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; transition: background 0.25s, transform 0.25s; }
.footer-social a:hover { background: var(--primary); transform: translateY(-3px); }
.footer-col h4 { color: #fff; margin-bottom: 20px; font-size: 1rem; font-family: var(--font-heading, 'Fraunces'), serif; font-weight: 600; }
.footer-col ul li { margin-bottom: 11px; font-size: 0.9rem; }
.footer-col ul li a { transition: color 0.2s, padding-left 0.2s; }
.footer-col ul li a:hover { color: var(--secondary); padding-left: 4px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 24px 0; text-align: center; font-size: 0.85rem; opacity: 0.7; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; text-align: left; } }

.floating-donate {
  position: fixed; right: 24px; bottom: 24px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 75%, #000)); color: #fff; padding: 15px 24px;
  border-radius: 50px; box-shadow: 0 12px 30px -6px color-mix(in srgb, var(--primary) 60%, transparent); font-weight: 700; z-index: 400; display: flex; gap: 8px; align-items: center;
  transition: transform 0.3s var(--ease);
}
.floating-donate:hover { transform: translateY(-4px) scale(1.03); }
@media (max-width: 640px) { .floating-donate { display: none; } }

/* ---------- Mobile app-style bottom nav ---------- */
.app-bottom-nav { display: none; }
@media (max-width: 640px) {
  .app-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottom-nav-h);
    background: rgba(255,255,255,0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border); z-index: 480; padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -8px 24px rgba(32,26,22,0.06);
  }
  .app-bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--gray-soft); font-size: 0.66rem; font-weight: 600; position: relative;
  }
  .app-bottom-nav a i { font-size: 1.05rem; }
  .app-bottom-nav a.active { color: var(--primary); }
  .app-bottom-nav a.nav-donate { color: #fff; }
  .app-bottom-nav a.nav-donate .icon-wrap {
    width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 75%, #000)); margin-top: -22px;
    box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--primary) 70%, transparent); border: 3px solid #fff;
  }
  body { padding-bottom: var(--bottom-nav-h); }
}

/* ---------- Misc pages ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.team-grid, .testimonial-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 960px) { .team-grid, .testimonial-grid { grid-template-columns: repeat(2,1fr); } }
.team-card { text-align: center; }
.team-card img { border-radius: 50%; width: 130px; height: 130px; object-fit: cover; margin: 0 auto 16px; box-shadow: var(--shadow); }
.team-card .role { color: var(--primary); font-size: 0.85rem; font-weight: 600; }
.testimonial-card { background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: transform 0.3s var(--ease); }
.testimonial-card:hover { transform: translateY(-4px); }
.testimonial-card .quote { font-style: italic; color: #33302c; margin-bottom: 18px; }
.testimonial-card .quote::before { content: '\201C'; font-family: var(--font-heading, 'Fraunces'), serif; font-size: 2.4rem; color: var(--secondary); line-height: 0; display: block; margin-bottom: 6px; }
.testimonial-card .person { display: flex; gap: 12px; align-items: center; }
.testimonial-card img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }

.alert { padding: 15px 18px; border-radius: 12px; margin-bottom: 20px; font-size: 0.9rem; font-weight: 500; }
.alert-success { background: #e5f7ea; color: #1e7e34; border: 1px solid #bfe8cb; }
.alert-error { background: #fdeaea; color: #c0392b; border: 1px solid #f5c6c6; }

/* ---------- Utility ---------- */
.skeleton { background: linear-gradient(90deg, var(--light-bg) 25%, var(--border) 37%, var(--light-bg) 63%); background-size: 400% 100%; animation: skeletonLoad 1.4s ease infinite; border-radius: 8px; }
@keyframes skeletonLoad { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* ---------- Events ---------- */
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.event-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.event-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.event-card .thumb { height: 190px; background-size: cover; background-position: center; background-color: var(--light-bg); position: relative; }
.event-card .date-badge {
  position: absolute; top: 16px; left: 16px; background: #fff; border-radius: 12px; padding: 8px 14px;
  text-align: center; box-shadow: var(--shadow); line-height: 1.1;
}
.event-card .date-badge .d { display: block; font-size: 1.25rem; font-weight: 800; color: var(--primary); }
.event-card .date-badge .m { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--gray); letter-spacing: 0.5px; }
.event-card .body { padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.event-card h3 { font-size: 1.14rem; margin-bottom: 8px; }
.event-card .meta { color: var(--primary); font-size: 0.82rem; font-weight: 600; margin-bottom: 4px; }
.event-card p:not(.meta) { color: var(--gray); font-size: 0.93rem; flex: 1; margin-top: 6px; }
.event-card .link { margin-top: 18px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.25s ease; }
.event-card .link:hover { gap: 11px; }
@media (max-width: 960px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .events-grid { grid-template-columns: 1fr; } }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.blog-card .thumb { display: block; height: 190px; background-size: cover; background-position: center; background-color: var(--light-bg); }
.blog-card .body { padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.blog-card h3 { font-size: 1.12rem; margin-bottom: 8px; line-height: 1.35; }
.blog-card h3 a { color: inherit; }
.blog-card h3 a:hover { color: var(--primary); }
.blog-card .meta { color: var(--gray); font-size: 0.78rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.blog-card p:not(.meta) { color: var(--gray); font-size: 0.93rem; flex: 1; }
.blog-card .link { margin-top: 18px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.25s ease; }
.blog-card .link:hover { gap: 11px; }
@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- Footer signup form ---------- */
.footer-signup-form { display: flex; flex-direction: column; gap: 12px; }
.footer-signup-form input[type="text"],
.footer-signup-form input[type="email"] {
  width: 100%; background: rgba(255,255,255,0.95); color: #33302c; border: none; border-radius: 10px;
  padding: 13px 16px; font-size: 0.92rem; font-family: inherit;
}
.footer-signup-form input[type="text"]::placeholder,
.footer-signup-form input[type="email"]::placeholder { color: #8a8580; }
.footer-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 0.8rem; line-height: 1.5; color: #cabfb2; cursor: pointer; }
.footer-consent input[type="checkbox"] { width: auto; margin-top: 3px; accent-color: var(--secondary); flex-shrink: 0; }
.footer-consent a { color: #fff; text-decoration: underline; }
.footer-consent-note { display: flex; align-items: flex-start; gap: 9px; font-size: 0.8rem; color: #cabfb2; margin: 0; }
.footer-consent-note i { margin-top: 2px; color: var(--secondary); }
.footer-signup-submit { width: 100%; justify-content: center; border: none; cursor: pointer; }


.page-banner {
    position: relative;
    /* আগের height থেকে প্রায় ১ ইঞ্চি (~96px) কমানো হয়েছে -- হোমপেজ ছাড়া বাকি সব পেজের
       hero ছবি এখন একটু ছোট দেখাবে। হোমপেজ এই ক্লাস ব্যবহার করে না (ওটা .hero), তাই
       হোমপেজে কোনো পরিবর্তন হবে না। */
    height: calc(80vh - 96px);
    min-height: 320px;
    display: flex;
    align-items: flex-end; /* কন্টেন্টকে একদম নিচে নামিয়ে আনার জন্য */
    padding-bottom: 50px; /* নিচের থেকে একটু গ্যাপ রাখার জন্য */
    background-size: cover;
    background-position: center;
}

.page-banner .container {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center; /* লেখাগুলো সেন্টারে রাখার জন্য */
}

/* বাটনগুলো সুন্দর করে সাজাতে */
.hero-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

/* বাটন স্টাইল (আপনার বর্তমান ক্লাসের সাথে সামঞ্জস্য রেখে) */
.btn-luxury-secondary, .btn-luxury-action {
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* =========================================================
   Page Builder — flexible admin-editable page sections
   (Text / Image+Text / Cards / Photo Gallery / CTA)
   ========================================================= */
.page-section { padding: 20px 0; }
.page-section + .page-section { border-top: 1px solid var(--border, #eee); }
.ps-heading { font-family: var(--font-heading, 'Fraunces'), serif; font-size: clamp(1.7rem, 3.2vw, 2.3rem); text-align: center; margin-bottom: 14px; font-weight: 600; }
.ps-subheading { text-align: center; max-width: 700px; margin: 0 auto 44px; color: var(--gray, #6b6b6b); font-size: 1rem; letter-spacing: 0.01em; }

/* Text section */
.ps-text { max-width: 100%; margin: 0 auto; line-height: 1.8; font-size: 1.02rem; color: var(--gray-soft, #4a4340); }
.ps-text h2, .ps-text h3 { font-family: var(--font-heading, 'Fraunces'), serif; margin: 28px 0 14px; color: var(--ink, #201a16); }
.ps-text p { margin-bottom: 16px; }

/* Image + Text section — magazine-style: the photo floats to one side, sized
   just large enough for 2–3 lines of the paragraph text to run beside it,
   then once the reader scrolls past the photo's height the remaining
   paragraphs return to full width automatically — no rigid two-column split. */
.ps-image-text { display: flow-root; max-width: 900px; margin: 0 auto; }
.ps-image-text-photo {
  position: relative; float: left; width: 44%;
  margin: 6px 36px 22px 0;
  border-radius: 22px; overflow: hidden;
  aspect-ratio: 4 / 3.4;
  box-shadow: 0 26px 55px -20px rgba(20,16,14,0.32), 0 3px 12px rgba(20,16,14,0.08);
  border: 1px solid rgba(255,255,255,0.5);
  isolation: isolate;
}
.ps-image-text.ps-position-right .ps-image-text-photo { float: right; margin: 6px 0 22px 36px; }
.ps-image-text-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}
.ps-image-text-photo::after {
  content: ''; position: absolute; width: 70px; height: 70px; z-index: 3; top: 14px; left: 14px;
  border-top: 3px solid var(--primary); border-left: 3px solid var(--primary);
  border-radius: 6px 0 0 0; opacity: 0.9; pointer-events: none;
}
.ps-image-text.ps-position-right .ps-image-text-photo::after {
  left: auto; right: 14px; border-left: none; border-right: 3px solid var(--primary); border-radius: 0 6px 0 0;
}
.ps-image-text-photo .photo-slider { position: absolute; inset: 0; }
.ps-image-text-photo .photo-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease, cubic-bezier(.22,1,.36,1));
}
.ps-image-text-photo:hover .photo-slider img { transform: scale(1.07); }
.ps-image-text-content { line-height: 1.9; font-size: 1.05rem; color: var(--gray-soft, #4a4340); }
.ps-image-text-content h2, .ps-image-text-content h3 {
  font-family: var(--font-heading, 'Fraunces'), serif; color: var(--ink, #201a16); margin: 0 0 12px;
}
.ps-image-text-content p { margin-bottom: 16px; }
.ps-image-text-content p:first-of-type::first-letter {
  font-family: var(--font-heading, 'Fraunces'), serif; font-size: 3.1em; font-weight: 600;
  float: left; line-height: 0.85; margin: 8px 8px 0 0; color: var(--primary);
}
.ps-image-text-content > *:last-child { margin-bottom: 0; }

/* Above / below layouts: full-width photo, no float needed — text simply follows */
.ps-image-text.ps-position-top,
.ps-image-text.ps-position-bottom { display: flex; flex-direction: column; max-width: 800px; gap: 30px; }
.ps-image-text.ps-position-bottom { flex-direction: column-reverse; }
.ps-image-text.ps-position-top .ps-image-text-photo,
.ps-image-text.ps-position-bottom .ps-image-text-photo { float: none; width: 100%; margin: 0; aspect-ratio: 16 / 8; }

/* Mobile: drop the float entirely for a clean "stacked card" — image full
   width on top with rounded top corners, text as the card body underneath. */
@media (max-width: 760px) {
  .ps-image-text {
    background: #fff; border: 1px solid var(--border, #ece1d4); border-radius: 22px;
    overflow: hidden; box-shadow: 0 16px 40px -22px rgba(20,16,14,0.22); padding: 0;
  }
  .ps-image-text-photo,
  .ps-image-text.ps-position-right .ps-image-text-photo {
    float: none; width: 100%; margin: 0; border-radius: 0; border: none; box-shadow: none;
    aspect-ratio: 16 / 10;
  }
  .ps-image-text-photo::before { box-shadow: none; }
  .ps-image-text-photo::after { display: none; }
  .ps-image-text-content { padding: 22px 22px 26px; }
  .ps-image-text-content p:first-of-type::first-letter { font-size: 2.4em; }
  .ps-image-text-content img { max-width: 100% !important; height: auto !important; display: block; float: none !important; margin: 0 0 14px; border-radius: 12px; }
}

/* Cards section — column count set per-section from admin via --ps-cols */
.ps-cards { display: grid; grid-template-columns: repeat(var(--ps-cols, 3), 1fr); gap: 34px; }
.ps-card {
  position: relative; background: #fff; border: 1px solid var(--border, #ece1d4);
  border-radius: var(--radius, 20px); overflow: hidden; text-align: left;
  box-shadow: 0 10px 28px rgba(32,26,22,0.07);
  transition: transform 0.45s var(--ease, cubic-bezier(.22,1,.36,1)), box-shadow 0.45s var(--ease, cubic-bezier(.22,1,.36,1)), border-color 0.45s ease;
}
.ps-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease, ease);
}
.ps-card:hover { transform: translateY(-10px); box-shadow: 0 26px 60px rgba(32,26,22,0.18); border-color: transparent; }
.ps-card:hover::before { transform: scaleX(1); }
.ps-card-num {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
  font-family: var(--font-heading, 'Fraunces'), serif; font-weight: 600; font-size: 0.82rem; color: var(--primary);
  box-shadow: 0 4px 14px rgba(32,26,22,0.14);
}
.ps-card:not(:has(.ps-card-photo)) .ps-card-num { position: static; margin-bottom: 14px; box-shadow: none; background: color-mix(in srgb, var(--primary) 10%, transparent); }
.ps-card-photo { position: relative; overflow: hidden; margin: 0; }
.ps-card-photo img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform 0.6s var(--ease, ease); }
.ps-card-photo::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(20,16,14,0.28) 100%);
  pointer-events: none;
}
.ps-card:hover .ps-card-photo img { transform: scale(1.09); }
.ps-card-body { padding: 28px 26px 30px; }
.ps-card h3 { font-family: var(--font-heading, 'Fraunces'), serif; font-size: 1.16rem; margin-bottom: 10px; line-height: 1.35; }
.ps-card p { color: var(--gray, #6b6259); font-size: 0.95rem; line-height: 1.7; }
.ps-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 700; color: var(--primary); transition: gap 0.25s ease; }
.ps-card-link:hover { gap: 11px; }
@media (max-width: 860px) { .ps-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ps-cards { grid-template-columns: 1fr; } }

/* Photo Gallery section */
.ps-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ps-gallery-item { margin: 0; border-radius: var(--radius-sm, 12px); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.35s ease; }
.ps-gallery-item:hover { box-shadow: var(--shadow-lg); }
.ps-gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.6s var(--ease, ease); }
.ps-gallery-item:hover img { transform: scale(1.08); }
.ps-gallery-item figcaption { padding: 10px 4px; font-size: 0.85rem; color: var(--gray, #6b6b6b); text-align: center; }
@media (max-width: 860px) { .ps-gallery { grid-template-columns: repeat(2, 1fr); } }

/* CTA section — full-width gradient banner, matching the homepage's "Be a Part of
   Our Community" cta-band: centered heading/subheading over a colored gradient,
   with a filled pill button + an outline pill button centered underneath. */
.page-section-cta { padding: 60px 0; }
.page-section-cta .container {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 68%, #000));
  border-radius: 26px;
  padding: 64px 40px;
  box-shadow: 0 20px 50px -24px rgba(20,16,14,0.24);
}
.page-section-cta .container::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(500px 300px at 15% 20%, color-mix(in srgb, var(--secondary) 40%, transparent), transparent 70%);
}
.page-section-cta .ps-heading {
  position: relative; z-index: 1; margin: 0 0 14px; color: #fff !important;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.page-section-cta .ps-subheading {
  position: relative; z-index: 1; margin: 0 auto 30px; max-width: 600px;
  color: rgba(255,255,255,0.92) !important;
}
.ps-cta-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.ps-cta-actions .btn-luxury-action {
  background: #fff; color: var(--primary); white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.ps-cta-actions .btn-luxury-action:hover {
  transform: translateY(-3px); box-shadow: var(--shadow);
}
/* Second (outline) button — same pill shape/size, white border/text so it reads
   clearly on the gradient background, matching the homepage cta-band's 2nd button. */
.btn-luxury-outline {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 12px 28px; border-radius: var(--radius-pill, 999px); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em;
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.65);
  position: relative; z-index: 1;
  transition: all 0.25s var(--ease, ease);
}
.btn-luxury-outline:hover { background: #fff; color: var(--primary); border-color: #fff; transform: translateY(-3px); }
@media (max-width: 760px) {
  .page-section-cta .container { padding: 44px 26px; }
  .ps-cta-actions { margin-top: 4px; }
}

/* Images pasted directly INTO the rich-text "Full Page Content" or a "Text"
   section's content (as opposed to using the dedicated Image+Text builder
   field) were inheriting whatever float/size the editor saved, which is
   what was causing the photo/text overlap. Force them to be clean, framed,
   full-width-capped blocks so they can never overlap the paragraphs. */
.program-body img, .ps-text img {
  float: none !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 30px auto;
  border-radius: 18px;
  box-shadow: 0 24px 50px -22px rgba(20,16,14,0.3);
}

/* Any page-section where admin set a background PHOTO (not just a color) via
   the section's background field — force proper cover/center sizing (instead
   of the browser's default tiny top-left tile) and add a dark scrim so the
   heading/text stay readable on any photo, on any screen size. */
section.page-section[style*="url("] {
  position: relative; isolation: isolate; overflow: hidden;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
  padding: 70px 0;
}
section.page-section[style*="url("]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,10,8,0.6), rgba(12,10,8,0.68));
}
section.page-section[style*="url("] > .container { position: relative; z-index: 1; }
section.page-section[style*="url("] .ps-heading,
section.page-section[style*="url("] .ps-subheading,
section.page-section[style*="url("] .ps-text,
section.page-section[style*="url("] .ps-image-text-content { color: #fff !important; }
section.page-section[style*="url("] .ps-image-text-content::before {
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.35));
}

/* Admin: color-enabled rich text toolbar swatch input */
.editor-toolbar input[type="color"] { width: 30px; height: 30px; padding: 0; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; vertical-align: middle; }