/* =====================================================================
   DR. SAMUEL ESECHIE — PREMIUM MINISTRY WEBSITE
   style.css
   ---------------------------------------------------------------------
   Table of Contents
   1.  Root variables & resets
   2.  Typography
   3.  Layout helpers (container, section, grid, buttons)
   4.  Scroll animations
   5.  Loader
   6.  Header / Navigation
   7.  Hero
   8.  About + Education cards
   9.  Ministry section
   10. SEWO outreach section
   11. Leadership & Organizations
   12. Books
   13. Music Ministry
   14. Leadership & Teaching (icon grid reuse)
   15. Family
   16. Mission statement
   17. CTA
   18. Footer
   19. Responsive breakpoints
===================================================================== */

/* ---------------------------------------------------------------------
   1. ROOT VARIABLES & RESETS
--------------------------------------------------------------------- */
:root {
  /* Brand palette — deep brown / tan / gold on white */
  --color-white:        #ffffff;
  --color-offwhite:     #faf6ef;
  --color-cream:        #f4ead9;
  --color-tan:          #d9bd93;
  --color-tan-light:    #ecdcc0;
  --color-brown-dark:   #2b1a10;
  --color-brown:        #4a2c19;
  --color-brown-soft:   #6b4226;
  --color-gold:         #c9a227;
  --color-gold-light:   #e3c565;
  --color-gold-deep:    #a17f1f;
  --color-text:         #362316;
  --color-text-soft:    #6f5c4a;

  /* Single modern sans-serif used consistently across the entire site.
     --font-heading / --font-display kept as separate variables (rather than
     collapsing to one) so future CMS editors can still target headings vs.
     body copy independently by weight, even though the family is now the same. */
  --font-heading: "Inter", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --font-display: "Inter", "Segoe UI", Arial, sans-serif;

  --shadow-soft: 0 10px 30px rgba(43, 26, 16, 0.08);
  --shadow-card: 0 14px 40px rgba(43, 26, 16, 0.12);
  --shadow-lift: 0 22px 50px rgba(43, 26, 16, 0.18);

  --radius-md: 14px;
  --radius-lg: 22px;

  --transition-fast: 0.25s ease;
  --transition-med: 0.5s cubic-bezier(.25,.8,.25,1);

  /* Left inset for the hero copy, pulling it in from the site-wide
     .container's plain 24px padding so it reads as clearly separated
     from the portrait rather than crowding it. */
  --hero-left-inset: clamp(64px, 11vw, 170px);
}

* , *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  /* Base type size raised from the browser default (16px) so every rem-based
     size in the stylesheet scales up slightly for improved readability. */
  font-size: 17.5px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.78;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-brown-dark);
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
}

p {
  margin: 0 0 1.1rem;
  font-size: 1.08rem;
  line-height: 1.8;
}
p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY HELPERS
--------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-gold-deep);
  margin: 0 0 0.9rem;
}
/* Small bold gold tick before every eyebrow label — a graphic, editorial
   marker used consistently instead of soft decorative flourishes. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 2px;
}
.eyebrow.light { color: var(--color-gold-light); }
.eyebrow.light::before { background: var(--color-gold-light); }

.heading-rule {
  display: block;
  width: 64px;
  height: 4px;
  margin: 1.1rem auto 0;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
  border-radius: 2px;
}
.heading-rule.light { background: linear-gradient(90deg, var(--color-gold-light), var(--color-tan)); }

.section-heading { text-align: center; max-width: 720px; margin: 0 auto 3.2rem; }
.section-heading .eyebrow { justify-content: center; }
.section-heading h2 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.015em;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
}
.section-heading.light h2,
.section-heading.light .eyebrow { color: var(--color-white); }

.sub-heading {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-brown);
  text-align: center;
  margin: 3.2rem 0 2rem;
}

/* ---------------------------------------------------------------------
   3. LAYOUT HELPERS
--------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }

.card-grid {
  display: grid;
  gap: 1.75rem;
}

.icon-grid { grid-template-columns: repeat(3, 1fr); }
.org-grid { grid-template-columns: repeat(2, 1fr); }
.books-grid { grid-template-columns: repeat(6, 1fr); }

/* Education cards use flex-wrap so an uneven card count (5) always
   centers gracefully instead of leaving a lopsided grid row. */
.education-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.education-grid .info-card { max-width: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.2rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  border: 2px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-3px) scale(1.02); }

.btn-primary {
  background: linear-gradient(135deg, var(--color-brown), var(--color-brown-dark));
  color: var(--color-white);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { box-shadow: var(--shadow-lift); }

.btn-outline {
  border-color: var(--color-gold);
  color: var(--color-brown-dark);
  background: transparent;
}
.btn-outline:hover { background: var(--color-gold); color: var(--color-white); }

.btn-ghost {
  color: var(--color-brown-soft);
  background: var(--color-tan-light);
}
.btn-ghost:hover { background: var(--color-tan); }

.btn-gold {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-deep));
  color: var(--color-brown-dark);
  box-shadow: 0 12px 30px rgba(201, 162, 39, 0.35);
}

.btn-outline-light {
  border-color: rgba(255,255,255,0.6);
  color: var(--color-white);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--color-white); }

.btn-lg { padding: 1.1rem 2.5rem; font-size: 1rem; }

.hero-actions, .cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------------------------------------------------------------------
   4. SCROLL ANIMATIONS
--------------------------------------------------------------------- */
.fade-in-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--transition-med), transform 0.9s var(--transition-med);
}
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }
.fade-in-up.delay-1.is-visible { transition-delay: 0.12s; }
.fade-in-up.delay-2.is-visible { transition-delay: 0.24s; }
.fade-in-up.delay-3.is-visible { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .fade-in-up { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   5. PAGE LOADER (brief cosmetic flourish)
--------------------------------------------------------------------- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.page-loader.loaded { opacity: 0; visibility: hidden; }
.loader-mark {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-gold);
  border: 2px solid var(--color-gold);
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: pulseLoader 1.1s ease-in-out infinite;
}
@keyframes pulseLoader {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.7; }
}

/* ---------------------------------------------------------------------
   6. HEADER / NAVIGATION
--------------------------------------------------------------------- */
/* Header sits over the dark hero by default (transparent, light text),
   then flips to a solid white bar with dark text once the user scrolls
   past the hero — see .scrolled toggling in script.js */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: linear-gradient(180deg, rgba(31,19,11,0.55), rgba(31,19,11,0));
  border-bottom: 1px solid transparent;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(43,26,16,0.08);
  border-bottom-color: rgba(201,162,39,0.15);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Guaranteed minimum space between the name and the nav links —
     justify-content: space-between only adds space if there's room
     left over, so on its own it let the name and "Home" sit right
     next to each other on narrower desktop widths. This gap is a
     floor that always applies, regardless of container width. */
  gap: 3rem;
  height: 78px;
  /* .header-inner also carries the shared .container class, which caps
     content at max-width:1180px and centers it. Combined with the left
     padding below, that left too little room for the full nav + CTA
     button on wide screens and pushed the button past the edge of the
     screen. Removing the cap here (same approach already used for
     .hero-inner) gives the nav the full viewport width to lay out in,
     so the CTA button stays safely right-anchored near the true screen
     edge instead of overflowing a narrow centered box. */
  max-width: none;
  margin-left: 0;
  /* Align the logo/name's left edge with the hero content's left edge
     (same --hero-left-inset value) for a consistent vertical grid down
     the page. The nav links and CTA button stay right-anchored exactly
     as before — only this left edge moves. */
  padding-left: var(--hero-left-inset);
  /* Pull the nav links + CTA button back in from the true screen edge on
     wide viewports, to roughly where they sat when this bar was still
     capped at the site's normal 1180px content width and centered. The
     logo's position (padding-left, above) is untouched — only the right
     side is reined back in. On narrower screens this settles at the
     normal 24px. */
  padding-right: max(24px, calc((100vw - 1180px) / 2 - 120px));
}

.brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.brand-mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-deep));
  color: var(--color-brown-dark);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(43,26,16,0.25);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--color-white);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}
.brand-tag {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--color-tan-light);
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.site-header.scrolled .brand-name { color: var(--color-brown-dark); }
.site-header.scrolled .brand-tag { color: var(--color-text-soft); }

.main-nav { display: flex; align-items: center; gap: 2.8rem; }
.main-nav ul { display: flex; gap: 2.6rem; }
.nav-link {
  position: relative;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-white);
  padding: 6px 0;
  transition: color var(--transition-fast);
}
.site-header.scrolled .nav-link { color: var(--color-brown); }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 2px;
  background: var(--color-gold-light);
  transition: width var(--transition-fast);
}
.site-header.scrolled .nav-link::after { background: var(--color-gold); }
.nav-link:hover::after,
.nav-link.active-link::after { width: 100%; }

.nav-cta { padding: 0.65rem 1.5rem; font-size: 0.86rem; box-shadow: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--color-white);
  transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}
.site-header.scrolled .nav-toggle span { background: var(--color-brown-dark); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   7. HERO — bold full-bleed editorial composition.
   The portrait is a large, confident image bleeding off the right/bottom
   edge of the viewport, not a small floating cutout. A single dark scrim
   and one thick gold bar do all the accent work — no layered soft glows.
--------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 78px;
  /* Dark abstract background with flowing gold light-streaks, plus a
     solid near-black fallback color underneath in case the image is
     slow to load. The dark scrim (below) still sits on top of this for
     text contrast. Anchored to the bottom so the decorative light
     curves stay visible rather than getting cropped off. */
  background: #150d07 url("assets/images/hero-bg-texture.jpg") center bottom / cover no-repeat;
  overflow: hidden;
}

/* Portrait — anchored to the bottom-right, scaled tall, bleeding past
   the edge of the viewport for scale and confidence. */
.hero-media {
  position: absolute;
  right: -2%;
  bottom: 0;
  height: 92%;
  width: 58%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
}
.hero-image {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55));
}

/* Entrance animation for the portrait — a confident rise-and-settle
   rather than a generic scroll fade (the hero is visible immediately
   on load, so this runs on page-load, not on scroll). Deliberately a
   plain CSS animation (not the JS-driven .fade-in-up used elsewhere)
   so the hero can NEVER end up invisible if JavaScript is blocked,
   slow to load, or throws an error — this is the most important
   content on the page and must not depend on script execution. */
.hero-media-enter {
  animation: heroMediaEnter 1.1s cubic-bezier(.2,.8,.2,1) 0.15s both;
}
@keyframes heroMediaEnter {
  from { opacity: 0; transform: translateY(40px) scale(1.02); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Same reasoning for the hero copy (name/headline/buttons) — pure CSS,
   no IntersectionObserver dependency. */
.hero-copy-enter {
  animation: heroCopyEnter 0.9s cubic-bezier(.2,.8,.2,1) 0.05s both;
}
@keyframes heroCopyEnter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dark scrim fading left-to-right so hero copy always sits on solid,
   high-contrast ground regardless of viewport width. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
    #150d07 0%,
    #150d07 38%,
    rgba(21,13,7,0.88) 52%,
    rgba(21,13,7,0.35) 72%,
    rgba(21,13,7,0.05) 100%);
  pointer-events: none;
}

/* One bold graphic accent: a thick gold bar running down the left edge
   of the hero — deliberately blunt rather than a soft ambient glow. */
.hero-gold-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 7px;
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold-deep));
  z-index: 3;
}

.hero-inner {
  position: relative;
  z-index: 3;
  /* .hero-inner also carries the shared .container class, which centers
     content in a max-width:1180px box. That centering actually pulls the
     copy toward the middle of the screen — i.e. toward the portrait — on
     wide viewports. Overriding it here anchors the text closer to the
     true left edge instead, so it reads as clearly separated from the
     image rather than crowding it. */
  max-width: none;
  margin-left: 0;
  padding-left: var(--hero-left-inset);
}

.hero-copy { max-width: 640px; }
/* Buttons are allowed a bit more room than the reading-width text above
   them, specifically so all three fit on one row on desktop instead of
   wrapping to a second line. */
.hero-actions { max-width: 780px; gap: 0.85rem; }
.hero-actions .btn {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

.hero-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-tan);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 0.9rem;
}

.hero-role {
  font-size: 0.98rem;
  color: var(--color-gold-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1.3rem 0 2.2rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(217,189,147,0.25);
}
.role-break { display: none; }

/* Hero name — bold, non-serif, all caps, white so it reads clearly on
   the dark hero. Letter-spacing is loosened slightly (vs. the old mixed-
   case -0.02em) since tight negative tracking reads as cramped once the
   text is all caps. */
.hero-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.05;
  color: var(--color-white);
  white-space: nowrap;
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-tan-light);
  margin-bottom: 2.4rem;
}
.hero-headline br { display: block; }
.hero-headline-accent {
  color: var(--color-gold-light);
  font-weight: 900;
}

.btn-ghost-light {
  color: var(--color-tan-light);
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.18);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.14); color: var(--color-white); border-color: rgba(255,255,255,0.3); }

/* ---------------------------------------------------------------------
   8. ABOUT + EDUCATION
--------------------------------------------------------------------- */
.about-section { background: var(--color-white); }

.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.about-copy p { font-size: 1.15rem; color: var(--color-text); line-height: 1.85; text-align: center; }
/* No portrait in this section anymore — the copy runs as a single
   centered column instead of a two-column image/text grid. */
.about-grid--no-image {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.info-card {
  background: var(--color-offwhite);
  border: 1px solid var(--color-tan-light);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: 1.8rem 1.6rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.info-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.info-card-icon { font-size: 1.9rem; display: block; margin-bottom: 0.9rem; }
.info-card p { font-size: 0.95rem; color: var(--color-text); margin: 0; }

/* ---------------------------------------------------------------------
   9. MINISTRY SECTION
--------------------------------------------------------------------- */
.ministry-section {
  background: linear-gradient(160deg, var(--color-brown-dark) 0%, var(--color-brown) 55%, var(--color-brown-soft) 100%);
  color: var(--color-white);
}
.ministry-role { color: var(--color-tan); font-weight: 500; margin-top: 0.6rem; }

.ministry-locations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.2rem;
  margin-top: 0.9rem;
}
.ministry-location { color: var(--color-tan-light); font-size: 0.95rem; margin: 0; }
.ministry-location-label {
  display: inline-block;
  color: var(--color-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  margin-right: 0.5rem;
}

.vision-plate {
  max-width: 640px;
  margin: 0 auto 2.8rem;
  text-align: center;
  padding: 2.6rem 2rem;
  border: 1px solid rgba(217,189,147,0.3);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
}
.vision-label {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.7rem;
  color: var(--color-gold-light);
  margin-bottom: 0.6rem;
}
.vision-statement {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  color: var(--color-white);
  margin-bottom: 0.5rem;
}
.vision-verse { color: var(--color-tan); font-size: 0.9rem; }

.ministry-description {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--color-tan-light);
}

.icon-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: 2.1rem 1.4rem;
  text-align: center;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.icon-card:hover { transform: translateY(-8px); background: rgba(255,255,255,0.11); border-bottom-color: var(--color-gold); }
.icon-card-icon { font-size: 2.1rem; display: block; margin-bottom: 1rem; }
.icon-card h4 { font-size: 1.02rem; color: var(--color-white); font-weight: 700; }

.teaching-section .icon-card {
  background: var(--color-offwhite);
  border: 1px solid var(--color-tan-light);
  border-bottom: 3px solid transparent;
}
.teaching-section .icon-card h4 { color: var(--color-brown-dark); }
.teaching-section .icon-card:hover { background: var(--color-cream); border-bottom-color: var(--color-gold); }
.teaching-grid { grid-template-columns: repeat(4, 1fr); }

.ministry-video-block {
  margin-bottom: 3.5rem;
  text-align: center;
}
.ministry-video-label {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-gold-light);
  font-size: 1.15rem;
  margin-bottom: 1.4rem;
}
.ministry-video-wrap {
  max-width: 700px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(255,255,255,0.14);
  background: #000;
}
.ministry-video-wrap video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 954 / 680;
}

/* ---------------------------------------------------------------------
   9b. SOCIAL MEDIA SECTION
--------------------------------------------------------------------- */
.social-section { background: var(--color-cream); }
.social-links-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.social-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-tan-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.2rem;
  box-shadow: var(--shadow-soft);
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.social-link-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: var(--color-gold);
}
.social-link-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-deep));
  color: var(--color-white);
  margin-bottom: 0.4rem;
}
.social-link-icon svg { width: 26px; height: 26px; }
.social-link-platform { font-weight: 700; color: var(--color-brown-dark); font-size: 1rem; }
.social-link-handle { font-size: 0.85rem; color: var(--color-text); overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 900px) {
  .social-links-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .social-links-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .social-links-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   10. SEWO SECTION
--------------------------------------------------------------------- */
.sewo-section {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.sewo-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.sewo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(43,26,16,0.92) 0%, rgba(43,26,16,0.75) 45%, rgba(43,26,16,0.4) 100%);
}
.sewo-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding-top: 4rem;
  padding-bottom: 4rem;
  color: var(--color-white);
}
.sewo-inner h2 { color: var(--color-white); font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.sewo-inner p { color: var(--color-tan-light); font-size: 1.15rem; line-height: 1.85; margin-top: 1.4rem; }

/* ---------------------------------------------------------------------
   11. LEADERSHIP & ORGANIZATIONS
--------------------------------------------------------------------- */
.leadership-section { background: var(--color-offwhite); }

.org-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-soft);
  border-top: 4px solid var(--color-gold);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.org-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.org-icon { font-size: 1.7rem; display: block; margin-bottom: 0.9rem; }
.org-card h3 { font-size: 1.25rem; margin-bottom: 0.3rem; }
.org-role { color: var(--color-gold-deep); font-weight: 600; font-size: 0.88rem; margin-bottom: 1.3rem; }
.org-list li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.55rem;
  color: var(--color-text-soft);
  font-size: 0.95rem;
}
.org-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}
.org-list li:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   12. BOOKS
--------------------------------------------------------------------- */
.books-section { background: var(--color-white); }
.book-card { text-align: center; }
.book-cover {
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
  margin-bottom: 1rem;
  aspect-ratio: 3/4.3;
  background: var(--color-white);
  padding: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.book-card:hover .book-cover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--shadow-lift); }
.book-cover img { width: 100%; height: 100%; object-fit: contain; }
.book-card h4 { font-size: 0.92rem; color: var(--color-brown-dark); font-weight: 600; }

.book-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4ead9;
  border: 1px solid var(--color-tan-light);
  position: relative;
}
.book-cover-placeholder::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: var(--color-gold);
}
.book-placeholder-mark {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-brown-dark);
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------------
   13. MUSIC MINISTRY
--------------------------------------------------------------------- */
.music-section {
  background: linear-gradient(135deg, var(--color-cream), var(--color-tan-light));
}
.music-inner { text-align: center; }
.music-copy { max-width: 700px; margin: 0 auto 2.6rem; }
.music-copy p { font-size: 1.15rem; color: var(--color-text); line-height: 1.85; }
.music-highlight { color: var(--color-brown); font-size: 1.1rem; margin-top: 1rem; }

.album-row { display: flex; justify-content: center; gap: 1.8rem; flex-wrap: wrap; }
.album-disc {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--color-brown-soft), var(--color-brown-dark) 70%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
  position: relative;
}
.album-disc::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-cream);
  position: absolute;
}
.album-disc span {
  position: relative;
  z-index: 2;
  color: var(--color-gold-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--color-brown-dark);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------------
   15. FAMILY
--------------------------------------------------------------------- */
.family-section { background: var(--color-cream); }
.family-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3.2rem;
  align-items: center;
}
.family-images {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.4rem;
  align-items: end;
}
.family-images img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.family-img-main { aspect-ratio: 1/1; }
.family-img-sub { aspect-ratio: 1/1; margin-top: 2.4rem; }

.family-copy p { font-size: 1.15rem; line-height: 1.85; }
.children-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin-top: 1.2rem;
}
.children-list li {
  background: var(--color-offwhite);
  border-left: 3px solid var(--color-gold);
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  color: var(--color-brown);
}

/* ---------------------------------------------------------------------
   15b. FAMILY GALLERY
--------------------------------------------------------------------- */
.gallery-section { background: var(--color-white); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.gallery-item {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-med);
}
.gallery-item:hover img { transform: scale(1.06); }

/* Lightbox: opened via JS when a gallery photo is clicked */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(20, 12, 6, 0.92);
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.lightbox.is-open { display: flex; }
.lightbox-img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 22px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
  color: var(--color-white);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.lightbox-close:hover { background: var(--color-gold); border-color: var(--color-gold); }
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   16. MISSION STATEMENT
--------------------------------------------------------------------- */
.mission-section {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mission-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(15%);
}
.mission-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,12,7,0.88) 0%, rgba(20,12,7,0.94) 100%);
}
.mission-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  padding: 5rem 1.5rem;
}
.mission-text {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--color-white);
  line-height: 1.4;
  margin-bottom: 1.6rem;
}
.mission-signature {
  color: var(--color-gold-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   17. CTA
--------------------------------------------------------------------- */
.cta-section {
  background: linear-gradient(135deg, var(--color-brown-dark), var(--color-brown));
  text-align: center;
}
.cta-inner h2 { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.015em; color: var(--color-white); font-size: clamp(2.1rem, 4vw, 3rem); margin-bottom: 1rem; }
.cta-inner p { color: var(--color-tan-light); max-width: 640px; margin: 0 auto 2.4rem; font-size: 1.15rem; line-height: 1.8; }
.cta-actions { justify-content: center; }

/* ---------------------------------------------------------------------
   18. FOOTER
--------------------------------------------------------------------- */
.site-footer { background: var(--color-brown-dark); color: var(--color-tan-light); padding: 4.5rem 0 0; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1.1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand .brand-mark { margin-bottom: 1.1rem; }
.footer-brand p { margin: 0; }
/* Primary branding element of the footer — deliberately the largest,
   boldest text on the whole bar */
.footer-brand-name {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-white);
  margin-top: 0.7rem;
}
.footer-tagline { font-size: 0.92rem; line-height: 1.6; color: var(--color-tan); margin-top: 0.7rem; max-width: 300px; }

.footer-col-title {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-gold-light);
  margin-bottom: 1.3rem;
}

/* Quick Links — two clean columns rather than one long stacked list */
.footer-nav ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1.5rem;
}
.footer-nav a { font-size: 0.95rem; color: var(--color-tan-light); transition: color var(--transition-fast); }
.footer-nav a:hover { color: var(--color-gold-light); }

/* Contact on Social Media — icon + platform + handle rows */
.social-contact-list { display: flex; flex-direction: column; gap: 0.9rem; }
.social-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem;
  margin: -0.5rem;
  border-radius: 10px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.social-row:hover { background: rgba(255,255,255,0.06); transform: translateX(4px); }
.social-row-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-tan-light);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.social-row-icon svg { width: 16px; height: 16px; }
.social-row:hover .social-row-icon { background: var(--color-gold); color: var(--color-brown-dark); }
.social-row-text { display: flex; flex-direction: column; line-height: 1.35; }
.social-row-platform { font-size: 0.88rem; font-weight: 600; color: var(--color-white); }
.social-row-handle { font-size: 0.82rem; color: var(--color-tan); }

/* Stay Connected — newsletter placeholder */
.newsletter-copy { font-size: 0.92rem; color: var(--color-tan-light); margin-bottom: 1.2rem; }
.newsletter-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.newsletter-form input[type="email"] {
  flex: 1 1 160px;
  min-width: 0;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.newsletter-form input[type="email"]::placeholder { color: var(--color-tan); }
.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--color-gold); }
.newsletter-form .btn { padding: 0.8rem 1.4rem; font-size: 0.88rem; flex-shrink: 0; }
.newsletter-note { font-size: 0.82rem; color: var(--color-gold-light); margin-top: 0.8rem; min-height: 1.2em; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.footer-bottom { text-align: center; padding: 1.6rem 0; font-size: 0.29rem; color: var(--color-tan); }
.footer-credit { margin-left: 0.4rem; opacity: 0.75; }
.footer-credit a { color: var(--color-gold-light); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--color-gold); }

/* =====================================================================
   19. RESPONSIVE BREAKPOINTS
===================================================================== */

/* Between the hamburger breakpoint (720px) and a roomy desktop, the full
   8-link nav plus the gold CTA button plus the wider link spacing just
   requested don't all fit comfortably — drop the header CTA first (the
   same "Invite Dr. Esechie" action already exists in the hero) so the
   nav links keep their generous spacing instead of it looking cramped. */
@media (max-width: 1180px) {
  .nav-cta { display: none; }
}

@media (max-width: 1024px) {
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
  .teaching-grid { grid-template-columns: repeat(2, 1fr); }
  .education-grid { grid-template-columns: repeat(3, 1fr); }
  .books-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  /* Below 900px the full-bleed side portrait doesn't have room to breathe
     next to the copy, so the hero switches to a stacked layout: a smaller
     centered portrait above a centered text block, on a solid dark ground
     (no need for the left-to-right scrim once the image is small). */
  .hero { flex-direction: column; padding-top: 110px; padding-bottom: 3rem; text-align: center; }
  .hero-inner { padding-left: 24px; }
  /* Keep the nav's left edge matching the hero's at this breakpoint too. */
  .header-inner { padding-left: 24px; }
  .hero-media {
    position: relative;
    z-index: 3;
    order: -1;
    inset: auto;
    right: auto; bottom: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 -90px;
  }
  /* Gradient baked into the bottom of the mobile portrait so the hero
     copy (which overlaps up into this zone via the negative margin
     above) stays readable against the image instead of cutting hard
     from photo to solid background. */
  .hero-media::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;
    background: linear-gradient(to bottom, rgba(21,13,7,0) 0%, rgba(21,13,7,0.85) 65%, #150d07 100%);
    pointer-events: none;
  }
  .hero-image { height: auto; width: 100%; }
  .hero-media-enter { animation: none; opacity: 1; transform: none; }
  .hero-scrim { background: #150d07; }
  .hero-copy { max-width: 100%; margin: 0 auto; position: relative; z-index: 1; }
  /* On narrow screens, forcing one line would either overflow the
     viewport or shrink the name to an illegible size — let it wrap
     and scale down instead. The one-line treatment is a desktop thing. */
  .hero-name { white-space: normal; font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero-role { border-top: none; padding-top: 0; }
  .hero-actions { justify-content: center; }
  .role-break { display: block; }

  .org-grid { grid-template-columns: 1fr; }

  .family-grid { grid-template-columns: 1fr; }
  .family-images { max-width: 420px; margin: 0 auto; }

  .footer-inner { grid-template-columns: repeat(2, 1fr); text-align: left; row-gap: 3rem; }
}

@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; text-align: center; row-gap: 2.6rem; }
  .footer-nav ul { justify-items: center; }
  .footer-brand .brand-mark, .footer-tagline { margin-left: auto; margin-right: auto; }
  .social-row { flex-direction: column; justify-content: center; gap: 0.4rem; }
  .social-row:hover { transform: none; }
  .social-row-text { align-items: center; }
  .newsletter-form { justify-content: center; }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    top: 78px; left: 0; right: 0;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-med);
  }
  .main-nav.open { max-height: 520px; }
  .main-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav ul { flex-direction: column; padding: 1.5rem 24px 0.5rem; gap: 1.1rem; }
  .nav-toggle { display: flex; }

  /* Inside the mobile dropdown the panel is always solid white, so its
     links/toggle must stay dark regardless of the header's scroll state. */
  .main-nav .nav-link { color: var(--color-brown); }
  .main-nav .nav-link::after { background: var(--color-gold); }
  .nav-cta { margin: 0.5rem 24px 1.5rem; text-align: center; }

  .icon-grid, .teaching-grid, .books-grid { grid-template-columns: repeat(2, 1fr); }
  .education-grid { grid-template-columns: 1fr; }

  .hero-actions, .cta-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }

  .children-list { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .books-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-tag { display: none; }
  .album-row { gap: 1rem; }
  .album-disc { width: 76px; height: 76px; }
}