/* =========================================================================
   Smiles Bring Hope, Global Stylesheet
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Custom Properties (Design Tokens)
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --clr-primary: #C8202F;
  --clr-primary-dark: #9F1925;
  --clr-secondary: #1E3A8A;
  --clr-secondary-dark: #142866;
  --clr-cream: #FAF6EE;
  --clr-white: #FFFFFF;

  /* Text */
  --clr-text: #1A1A1A;
  --clr-text-muted: #5A5A5A;
  --clr-text-inverse: #FFFFFF;

  /* Surfaces */
  --clr-bg-light: #F7F4ED;
  --clr-border: #E5E0D6;

  /* Typography */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --section-pad-y: 5rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 1.25rem;
  --header-height: 80px;
  --top-bar-height: 40px;

  /* Effects */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);
  --transition: 0.2s ease;

  /* Z-index */
  --z-header: 100;
  --z-drawer: 200;
  --z-popup: 300;
  --z-skip: 400;
}

/* -------------------------------------------------------------------------
   2. Modern Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[role='list'], ol[role='list'] { list-style: none; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--clr-secondary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--clr-primary); }

/* -------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clr-text);
  background: var(--clr-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--clr-text);
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.625rem, 2vw + 1rem, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); }
h4 { font-size: 1.25rem; }

p { max-width: 65ch; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--clr-primary);
  margin-bottom: var(--space-sm);
}

/* -------------------------------------------------------------------------
   4. Layout / Container
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

main { display: block; }

section { padding-block: var(--section-pad-y); }

/* Skip-to-main-content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--clr-secondary);
  color: var(--clr-white);
  z-index: var(--z-skip);
  transition: top var(--transition);
}
.skip-link:focus {
  top: 0;
  color: var(--clr-white);
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
}
.btn-primary:hover { background: var(--clr-primary-dark); border-color: var(--clr-primary-dark); color: var(--clr-white); }

.btn-secondary {
  background: var(--clr-secondary);
  color: var(--clr-white);
  border-color: var(--clr-secondary);
}
.btn-secondary:hover { background: var(--clr-secondary-dark); border-color: var(--clr-secondary-dark); color: var(--clr-white); }

.btn-outline {
  background: transparent;
  color: var(--clr-secondary);
  border-color: var(--clr-secondary);
}
.btn-outline:hover { background: var(--clr-secondary); color: var(--clr-white); }

.btn-donate {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.btn-donate:hover {
  background: var(--clr-primary-dark);
  border-color: var(--clr-primary-dark);
  color: var(--clr-white);
  box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------------------
   6. Top Trust Bar
   ------------------------------------------------------------------------- */
.top-bar {
  height: var(--top-bar-height);
  background: var(--clr-secondary);
  color: var(--clr-white);
  font-size: 0.875rem;
}
.top-bar a { color: var(--clr-white); }
.top-bar a:hover { color: var(--clr-cream); }

.top-bar .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* -------------------------------------------------------------------------
   7. Sticky Site Header
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  height: var(--header-height);
  background: var(--clr-white);
  z-index: var(--z-header);
  transition: box-shadow var(--transition);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--clr-border);
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--clr-secondary);
  line-height: 1;
}
.site-logo:hover { color: var(--clr-primary); }
.site-logo img {
  display: block;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* -------------------------------------------------------------------------
   8. Main Nav with Dropdowns
   ------------------------------------------------------------------------- */
.main-nav { display: flex; align-items: center; }

.main-nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
}

.main-nav-list > li { position: relative; }

.main-nav-list a {
  display: inline-block;
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--clr-text);
  font-size: 0.9375rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.main-nav-list a:hover,
.main-nav-list a.active {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-primary);
}

.nav-dropdown > a::after {
  content: '';
  display: inline-block;
  margin-left: 0.4em;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  transition: transform var(--transition);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-sm);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
  border-bottom: none;
  font-size: 0.9375rem;
}
.nav-dropdown-menu a:hover {
  background: var(--clr-cream);
  color: var(--clr-primary);
}

.header-cta { display: inline-flex; align-items: center; }

/* Hamburger */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.hamburger-bar,
.hamburger-bar::before,
.hamburger-bar::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--clr-text);
  transition: transform var(--transition);
  position: relative;
}
.hamburger-bar::before,
.hamburger-bar::after {
  content: '';
  position: absolute;
  left: 0;
}
.hamburger-bar::before { top: -7px; }
.hamburger-bar::after { top: 7px; }

/* -------------------------------------------------------------------------
   9. Mobile Drawer
   ------------------------------------------------------------------------- */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: var(--z-drawer);
}
.mobile-drawer-overlay.open { opacity: 1; visibility: visible; }

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 85%;
  max-width: 360px;
  background: var(--clr-white);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--transition);
  z-index: calc(var(--z-drawer) + 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--clr-border);
}

.drawer-logo-img {
  display: block;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.drawer-close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--clr-text);
  cursor: pointer;
}

.drawer-nav { flex: 1; padding: var(--space-md) var(--space-lg); }

.drawer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.drawer-nav-list a {
  display: block;
  padding: 0.875rem 0;
  font-weight: 600;
  color: var(--clr-text);
  border-bottom: 1px solid var(--clr-border);
}
.drawer-nav-list a:hover,
.drawer-nav-list a.active { color: var(--clr-primary); }

.drawer-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text);
  cursor: pointer;
  text-align: left;
}
.drawer-submenu-toggle::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  transition: transform var(--transition);
}

.drawer-nav-list > li.open > .drawer-submenu-toggle::after {
  content: '–';
}

.drawer-submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  padding-left: var(--space-md);
  transition: max-height var(--transition);
}
.drawer-nav-list > li.open > .drawer-submenu { max-height: 600px; }

.drawer-submenu a {
  font-weight: 400;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--clr-border);
}

.drawer-cta { padding: var(--space-lg); border-top: 1px solid var(--clr-border); }
.drawer-cta .btn { width: 100%; }

/* -------------------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--clr-secondary);
  color: var(--clr-cream);
  padding-block: var(--space-2xl) var(--space-lg);
  margin-top: var(--space-2xl);
}
.site-footer a { color: var(--clr-cream); }
.site-footer a:hover { color: var(--clr-white); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-col h3 {
  color: var(--clr-white);
  font-size: 1.125rem;
  margin-bottom: var(--space-md);
}

.footer-col p,
.footer-col a {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--space-xs); }

.footer-brand p { max-width: 32ch; margin-bottom: var(--space-md); }

.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}
.footer-social a:hover {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-white);
  transform: translateY(-2px);
}
.footer-social a svg {
  display: block;
  flex-shrink: 0;
}
/* YouTube icon: the red rounded-rect is self-contained in the SVG.
   On hover the circle glows brand-red behind the already-red icon — subtle. */
.footer-social a[aria-label="YouTube"]:hover {
  background: #cc0000;
  border-color: #cc0000;
}

.footer-bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.8125rem;
  color: rgba(250, 246, 238, 0.8);
}
.footer-legal-links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   11. Sticky Right-Edge Desktop CTA
   ------------------------------------------------------------------------- */
.sticky-side-cta {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: 100% 100%;
  z-index: 90;
}
.sticky-side-cta .btn {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 0.75rem 1.5rem;
  box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------------------
   13. Donate Popup Overlay
   ------------------------------------------------------------------------- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: var(--z-popup);
}
.popup-overlay.open { opacity: 1; visibility: visible; }

.popup-content {
  background: var(--clr-white);
  border-radius: var(--radius-md);
  max-width: 520px;
  width: 100%;
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  text-align: center;
}

.popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--clr-text-muted);
}
.popup-close:hover { color: var(--clr-primary); }

.popup-content h2 {
  color: var(--clr-secondary);
  margin-bottom: var(--space-md);
}
.popup-content p { margin-inline: auto; margin-bottom: var(--space-md); }
.popup-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* -------------------------------------------------------------------------
   14. Focus States (WCAG)
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--clr-secondary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   14b. Footer Brand Logo
   ------------------------------------------------------------------------- */
.footer-logo-img {
  display: block;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: var(--space-md);
}

/* Graceful text fallbacks if logo images fail to load */
.site-logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-primary);
}
.footer-logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-white);
  display: block;
  margin-bottom: 1rem;
}
.drawer-logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-primary);
  display: block;
  margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   15. Section Patterns (reusable across pages)
   ------------------------------------------------------------------------- */
.section { padding-block: var(--section-pad-y); }
.section-cream { background: var(--clr-cream); }

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem;
}
.section-header p { margin-inline: auto; }
.section-lead {
  font-size: 1.125rem;
  color: var(--clr-text-muted);
  margin-top: 1rem;
}

.eyebrow-light { color: var(--clr-cream); }

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.05rem;
}
.btn-outline-light {
  background: transparent;
  color: var(--clr-white);
  border-color: var(--clr-white);
}
.btn-outline-light:hover {
  background: var(--clr-white);
  color: var(--clr-secondary);
  border-color: var(--clr-white);
}
.btn-white {
  background: var(--clr-white);
  color: var(--clr-primary);
  border-color: var(--clr-white);
}
.btn-white:hover {
  background: var(--clr-cream);
  color: var(--clr-primary-dark);
  border-color: var(--clr-cream);
  box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------------------
   16. Hero Section (with video background)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  color: var(--clr-white);
  display: flex;
  align-items: center;
  padding-block: var(--space-2xl);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video,
.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.hero-poster { display: none; }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.75) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 760px;
}

.hero-eyebrow {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--clr-white);
  margin-bottom: 1.5rem;
}

.hero h1 {
  color: var(--clr-white);
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 600px;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2rem;
}

.hero-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero-trust {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.04em;
  margin: 0;
}

/* -------------------------------------------------------------------------
   17. Mission Intro (centered text section)
   ------------------------------------------------------------------------- */
.section-intro { text-align: center; }
.section-intro .container { max-width: 760px; }
.section-intro p { margin-inline: auto; margin-bottom: 1.25rem; }
.section-intro p:last-of-type { margin-bottom: 0; }
.section-cta-link {
  margin-top: 1.5rem;
  font-weight: 600;
}
.section-cta-link a { color: var(--clr-primary); }
.section-cta-link a:hover { color: var(--clr-primary-dark); }

.mission-conviction {
  font-size: 1.125rem;
  color: var(--clr-secondary);
  margin: 1.5rem auto;
  max-width: 620px;
}

/* About page - Moments of Care gallery */
.mission-conviction-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
}
.mission-conviction-gallery .gallery-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
/* Figure variant with caption (used on program detail galleries) */
.gallery-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.gallery-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  text-align: center;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Mission Story Slider (Impact page)

   Replaces the old vertical timeline, where every image rendered at its
   natural aspect ratio and heights swung from 105px to 732px with no
   rhythm. Every slide now shares one 3:2 media window, so the sequence
   reads evenly no matter what photograph is dropped in later.

   Progressive enhancement: the track is a native scroll-snap carousel,
   so swipe and scroll work with no JavaScript at all. main.js adds the
   arrows, dots, counter, and keyboard control on top.
   ------------------------------------------------------------------------- */
.story-slider {
  position: relative;
  margin-top: var(--space-2xl);
}

.story-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.story-track::-webkit-scrollbar {
  display: none;
}
.story-track:focus-visible {
  outline: 3px solid var(--clr-secondary);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.story-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
}

.story-figure {
  margin: 0;
  height: 100%;
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: auto 1fr;
}

/* One uniform window for every photograph. Cover crops rather than
   letterboxes, which keeps portrait and panoramic sources on the same
   footing instead of one towering over the other. */
.story-media {
  aspect-ratio: 3 / 2;
  background: var(--clr-bg-light);
  overflow: hidden;
}
.story-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-body {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}
.story-year {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--clr-primary);
}
.story-title {
  margin: 0;
  font-size: clamp(1.25rem, 1.1vw + 0.95rem, 1.6rem);
  color: var(--clr-secondary);
  line-height: 1.25;
  text-wrap: balance;
}
.story-text {
  margin: 0;
  color: var(--clr-text-muted);
  font-size: 0.97rem;
  line-height: 1.68;
  max-width: 62ch;
}

/* Closing slide carries no photograph, so it leans on the brand block
   instead of an empty media window. */
.story-slide-final .story-figure {
  grid-template-rows: 1fr;
  background: var(--clr-secondary);
}
.story-slide-final .story-body {
  padding: var(--space-2xl) var(--space-xl);
  align-items: flex-start;
  gap: 0.75rem;
}
.story-slide-final .story-year { color: #FFFFFF; opacity: 0.75; }
.story-slide-final .story-title { color: var(--clr-text-inverse); }
.story-slide-final .story-text { color: rgba(255, 255, 255, 0.86); }
.story-cta { margin-top: var(--space-md); }

/* Controls: hidden until main.js unhides them, so no dead buttons ship
   to a browser that never runs the script. */
.story-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.story-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: var(--clr-white);
  color: var(--clr-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.story-btn:hover:not(:disabled) {
  background: var(--clr-secondary);
  border-color: var(--clr-secondary);
  color: var(--clr-text-inverse);
}
.story-btn:focus-visible {
  outline: 3px solid var(--clr-secondary);
  outline-offset: 3px;
}
.story-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.story-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}
.story-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #C9C2B4;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.story-dot:hover { background: var(--clr-text-muted); }
.story-dot[aria-selected="true"] {
  background: var(--clr-primary);
  transform: scale(1.35);
}
.story-dot:focus-visible {
  outline: 3px solid var(--clr-secondary);
  outline-offset: 3px;
}

.story-counter {
  margin: var(--space-sm) 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Desktop: photograph and text sit side by side, which halves the
   vertical footprint the old stacked timeline demanded. */
@media (min-width: 900px) {
  .story-figure {
    grid-template-rows: none;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }
  /* Explicit height, not height:100%. With an auto grid row, a 100% height
     resolves against the image's own intrinsic ratio, which let the tall
     portrait source stretch the row to 886px and reintroduced exactly the
     runaway heights this slider replaced. */
  .story-media {
    aspect-ratio: auto;
    height: clamp(380px, 30vw, 470px);
  }
  .story-body {
    padding: var(--space-xl) var(--space-2xl);
    gap: 0.5rem;
  }
  .story-slide-final .story-figure {
    grid-template-columns: 1fr;
  }
  .story-slide-final .story-body {
    max-width: 46rem;
    margin: 0 auto;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .story-body {
    padding: var(--space-lg);
  }
  .story-text {
    font-size: 0.93rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-track {
    scroll-behavior: auto;
  }
  .story-btn,
  .story-dot {
    transition: none;
  }
}

/* Approach steps (program detail "Our Approach" 4-card grid) */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.approach-step {
  background: var(--clr-white);
  border-left: 4px solid var(--clr-primary);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.approach-step .step-number {
  display: block;
  font-family: var(--font-display);
  color: var(--clr-primary);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.approach-step h3 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}
.approach-step p {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

/* Partner cards (Partners page) */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.partner-card {
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border-top: 4px solid var(--clr-primary);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.partner-header {
  padding: 1.5rem 1.75rem;
  background: var(--clr-bg-light);
  border-bottom: 1px solid var(--clr-border);
}
.partner-header h3 {
  margin: 0 0 0.25rem;
  font-size: 1.3rem;
  color: var(--clr-secondary);
}
.partner-location {
  margin: 0;
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  font-style: italic;
}
.partner-body {
  padding: 1.75rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.partner-body p {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 0.75rem;
}
.partner-body strong { color: var(--clr-secondary); }
.partner-meta {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--clr-border);
  font-size: 0.825rem;
  font-style: italic;
  color: var(--clr-text-muted);
}

/* Partner logo tile. White tile keeps logos with baked-in white
   backgrounds from showing a pale box against the cream header. */
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.1rem;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
}
/* Wide wordmarks are capped short so they sit at a comparable optical
   weight to the taller marks below. */
.partner-logo img {
  max-height: 62px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Square or portrait marks need the full tile height or they read tiny
   next to the horizontal wordmarks. */
.partner-logo img.is-tall {
  max-height: 88px;
}
/* Fallback lockup for partners with no available logo mark. */
.partner-logo-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--clr-secondary);
  text-align: center;
}

/* Contact page */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.contact-card {
  padding: 1.75rem;
  background: var(--clr-white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--clr-primary);
  box-shadow: var(--shadow-sm);
}
.contact-card h3 {
  color: var(--clr-secondary);
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.contact-card p {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clr-text);
}
.contact-card a {
  color: var(--clr-primary);
  text-decoration: none;
  font-weight: 600;
}
.contact-card a:hover { color: var(--clr-primary-dark); text-decoration: underline; }
.contact-meta {
  font-size: 0.825rem !important;
  color: var(--clr-text-muted) !important;
  font-style: italic;
}

/* Contact form */
.contact-form {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}
.form-group { display: flex; flex-direction: column; }
.form-group label {
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--clr-secondary);
  font-size: 0.95rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-white);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--clr-text);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(200, 32, 47, 0.12);
}
.form-group textarea { resize: vertical; line-height: 1.55; }
.form-group-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.form-group-inline label {
  margin-bottom: 0;
  font-weight: 400;
  color: var(--clr-text-muted);
}
.contact-form button[type="submit"] {
  justify-self: start;
  margin-top: 0.5rem;
}

/* Legal content (donor privacy, privacy policy, terms of service) */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
}
.legal-content h2 {
  font-size: 1.35rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--clr-secondary);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
  color: var(--clr-text);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}
.legal-content ul {
  margin: 0 0 1.25rem 1.5rem;
  padding: 0;
}
.legal-content li {
  color: var(--clr-text);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0.4rem;
}
.legal-content a {
  color: var(--clr-primary);
  text-decoration: underline;
}
.legal-content a:hover { color: var(--clr-primary-dark); }
.legal-updated {
  margin-top: 2.5rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
   18. Programs Grid
   ------------------------------------------------------------------------- */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.program-card {
  background: var(--clr-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  color: inherit;
}
.program-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  color: inherit;
}

.program-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--clr-cream);
}
.program-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.program-card:hover .program-card-image img {
  transform: scale(1.05);
}

/* Card 1 image fits a different aspect ratio; show full frame instead of crop */
.programs-grid .program-card:first-child .program-card-image {
  background-color: #f5f5f5;
}
.programs-grid .program-card:first-child .program-card-image img {
  object-fit: contain;
  object-position: center;
}

.program-card-body { padding: 2rem; }
.program-card-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--clr-primary);
  font-weight: 700;
}
.program-card h3 {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  transition: color 0.2s ease;
}
.program-card:hover h3 { color: var(--clr-primary); }
.program-card p {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}
.program-card-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--clr-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Detail variant: bold callout paragraph + button at end of card body */
.program-card-callout {
  font-size: 0.925rem;
  margin-bottom: 1.25rem;
}
.program-card-callout strong { color: var(--clr-primary); }
.program-card-body .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
   19. Impact Strip
   ------------------------------------------------------------------------- */
.section-impact {
  background: var(--clr-secondary);
  color: var(--clr-white);
}
.section-impact h2 { color: var(--clr-white); }

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.stat-block {
  text-align: center;
  padding: 1rem;
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--clr-cream);
  line-height: 1;
}

.stat-label {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.impact-footer {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
}

/* -------------------------------------------------------------------------
   20. Split Layout (founders, story, reusable)
   ------------------------------------------------------------------------- */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.split-image img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: auto;
}

.split-content h2 {
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}
.split-content p {
  font-size: 1.025rem;
  line-height: 1.7;
  color: var(--clr-text-muted);
  margin-bottom: 1rem;
}
.split-content .btn { margin-top: 1rem; }

.split-layout-reverse .split-image { order: 2; }

/* -------------------------------------------------------------------------
   21. Final CTA Section
   ------------------------------------------------------------------------- */
.section-cta-final {
  background: var(--clr-primary);
  color: var(--clr-white);
  text-align: center;
}
.section-cta-final h2 {
  color: var(--clr-white);
  max-width: 720px;
  margin: 0 auto 1.25rem;
}
.eyebrow-on-red { color: var(--clr-cream); }
.cta-lead {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto 2.5rem;
}
.cta-button-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   21b. Hero Compact (used on inner pages)
   ------------------------------------------------------------------------- */
.hero-compact { min-height: 50vh; }
.hero-compact h1 { font-size: clamp(1.75rem, 4.5vw, 3rem); }
.hero-compact .hero-poster { display: block; }

/* -------------------------------------------------------------------------
   21c. Mission/Vision/Values Grid
   ------------------------------------------------------------------------- */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.mvv-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.mvv-icon {
  display: inline-block;
  font-size: 2rem;
  color: var(--clr-primary);
  margin-bottom: 1rem;
  line-height: 1;
}
.mvv-card h3 { margin-bottom: 1rem; }
.mvv-card p {
  color: var(--clr-text-muted);
  font-size: 0.975rem;
  line-height: 1.65;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   21d. Founder Cards
   ------------------------------------------------------------------------- */
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.founder-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.founder-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--clr-bg-light);
}
.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Dr. Doug's portrait is square; anchor lower so face stays in frame */
.founder-portrait img[src*="dr-douglas-smail"] {
  object-position: center 30%;
}
.founder-body { padding: 2.5rem 2rem; }
.founder-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--clr-primary);
  font-weight: 700;
}
.founder-card h3 {
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
}
.founder-credentials {
  color: var(--clr-text-muted);
  font-style: italic;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.founders-credentials {
  color: var(--clr-text-muted);
  font-style: italic;
  font-size: 0.95rem;
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
}
.founder-body p {
  color: var(--clr-text-muted);
  font-size: 0.975rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   22. Responsive Breakpoints
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .header-cta .btn-donate { display: none; }
  .hamburger { display: inline-flex; }
  .sticky-side-cta { display: none; }

  .programs-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .split-layout { grid-template-columns: 1fr; gap: 2rem; }
  .split-layout-reverse .split-image { order: -1; }
  .mvv-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .founder-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 767px) {
  .hero { min-height: 70vh; }
}

@media (max-width: 600px) {
  :root { --section-pad-y: 3rem; }

  .top-bar { font-size: 0.8125rem; }
  .top-bar-address { display: none; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { justify-content: flex-start; }

  .cta-button-row { flex-direction: column; align-items: stretch; }
  .cta-button-row .btn { width: 100%; }
  .hero-compact { min-height: 40vh; }
  .hero-trust { display: none; }
}

@media (max-width: 480px) {
  .impact-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video { display: none; }
  .hero-poster { display: block; }
}

/* The gallery hero is a group photograph with faces stacked from the middle
   of the frame down. The sitewide 25% crop point cut heads off at the top, and
   the standard compact height was too letterboxed to hold the whole group, so
   this page gets a taller hero and a lower anchor point. */
.page-gallery .hero-compact { min-height: 62vh; }
.page-gallery .hero-poster { object-position: center 60%; }

/* -------------------------------------------------------------------------
   Gallery page
   Masonry via CSS columns so portrait, landscape, and square photographs
   each keep their true aspect ratio instead of being cropped to a grid cell.
   ------------------------------------------------------------------------- */
.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 3;
  column-gap: 1.1rem;
}
.gallery-item {
  break-inside: avoid;
  margin: 0 0 1.1rem;
}
.gallery-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--clr-bg-light);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
}
.gallery-link img {
  display: block;
  width: 100%;
  height: auto;
}
.gallery-link::after {
  /* Warm scrim that lifts on hover, so the grid reads as one surface. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 58, 138, 0.28), rgba(30, 58, 138, 0));
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.gallery-link:hover,
.gallery-link:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.gallery-link:hover::after,
.gallery-link:focus-visible::after { opacity: 1; }
.gallery-link:focus-visible {
  outline: 3px solid var(--clr-primary);
  outline-offset: 3px;
}

@media (max-width: 900px) { .gallery-grid { column-count: 2; } }
@media (max-width: 560px) { .gallery-grid { column-count: 1; } }

/* Lightbox ---------------------------------------------------------------- */
body.has-lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(12, 16, 32, 0.94);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }

.lightbox-stage {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
.lightbox-image {
  max-width: 100%;
  /* Leave room for the counter beneath the photograph. */
  max-height: calc(100% - 2.75rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-counter {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lightbox-nav,
.lightbox-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--clr-white);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lightbox-nav {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
}
.lightbox-nav:hover,
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}
.lightbox-nav:active { transform: scale(0.94); }
.lightbox-close {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.75rem);
  right: clamp(0.75rem, 3vw, 1.75rem);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  font-size: 1.6rem;
  line-height: 1;
}
.lightbox-nav:focus-visible,
.lightbox-close:focus-visible {
  outline: 3px solid var(--clr-white);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  /* Float the arrows over the photograph so it gets the full width. */
  .lightbox { padding: 0.75rem; }
  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
  }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-nav:active { transform: translateY(-50%) scale(0.94); }
}

/* ---------- Footer credit signature (RBR Growth Consulting) ---------- */
.foot__credit {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(128,128,128,.25);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: inherit;
  text-align: center;
}
.foot__credit a {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
  transition: opacity 180ms ease;
}
.foot__credit a:hover,
.foot__credit a:focus-visible { opacity: 1; }
.foot__credit img {
  height: 26px;
  width: auto;
  display: block;
  filter: opacity(0.95) contrast(1.08) saturate(1.05);
  transition: filter 420ms ease, transform 420ms ease;
}
.foot__credit a:hover img {
  filter: opacity(1) contrast(1.1) saturate(1.15)
          drop-shadow(0 2px 8px rgba(220, 170, 90, 0.45));
  transform: translateY(-1px);
}
.foot__credit strong { font-weight: 600; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .foot__credit a, .foot__credit img { transition: none; }
}
/* ---------- end RBR footer credit ---------- */

/* -------------------------------------------------------------------------
   Donation checkout (Donate page)
   ------------------------------------------------------------------------- */
.donation-checkout-panel {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  padding: var(--space-xl);
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}
#donation-checkout {
  padding: var(--space-lg);
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg-light);
}
.donation-checkout-placeholder {
  margin: 0;
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.payment-acceptance {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-md);
}
.payment-acceptance img {
  display: block;
  height: 34px;
  width: auto;
}
.donation-security-note {
  margin: 0;
  color: var(--clr-text-muted);
  font-size: 0.825rem;
  line-height: 1.6;
}
.donation-fallback {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.donation-fallback h3 {
  color: var(--clr-secondary);
  font-size: 1.15rem;
  margin: 0 0 var(--space-lg);
}
.donation-fallback .contact-info-grid { text-align: left; }
.donation-policy-links {
  max-width: 640px;
  margin: var(--space-xl) auto 0;
  text-align: center;
  color: var(--clr-text-muted);
  font-size: 0.875rem;
}
.donation-policy-links a {
  color: var(--clr-primary);
  text-decoration: underline;
}
.donation-policy-links a:hover { color: var(--clr-primary-dark); }

/* -------------------------------------------------------------------------
   Contact form: spam honeypot + submission status banner
   ------------------------------------------------------------------------- */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status-banner {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  font-size: 0.95rem;
  line-height: 1.5;
}
.form-status-banner[hidden] { display: none; }
.form-status-banner.is-success {
  background: #EAF6EE;
  border: 1px solid #B6E2C2;
  color: #1E5B32;
}
.form-status-banner.is-error {
  background: #FBEAEA;
  border: 1px solid #F0BCBC;
  color: var(--clr-primary-dark);
}