/* ============================================================
   SMH Ministry — Master Stylesheet
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --gold:       #D4AF37;
  --gold-dim:   rgba(212,175,55,.15);
  --gold-glow:  rgba(212,175,55,.35);
  --navy:       #1E2B45;
  --navy-dark:  #0f1829;
  --sage:       #FAFAF8;
  --charcoal:   #2D2D2D;
  --gray:       #6B7280;
  --nav-h:      72px;
  --ease-out:   cubic-bezier(.22,1,.36,1);
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--charcoal);
  background: var(--sage);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Typography helpers ────────────────────────────────────── */
.font-scripture { font-family: 'Libre Baskerville', serif; }
.text-gold        { color: var(--gold); }
.text-accent-gray { color: var(--gray); }
.text-charcoal    { color: var(--charcoal); }
.bg-navy          { background-color: var(--navy); }
.bg-sage          { background-color: var(--sage); }
.no-underline     { text-decoration: none; }
.opacity-8        { opacity: .08; }

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes fadeInUp   { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:none; } }
@keyframes fadeIn     { from { opacity:0; } to { opacity:1; } }
@keyframes bounceY    { 0%,100% { transform:translateY(0); } 50% { transform:translateY(8px); } }
@keyframes pulse      { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
@keyframes spin       { to { transform:rotate(360deg); } }
@keyframes shimmer    { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes beamSway   { 0%,100% { opacity:.06; transform:skewX(-8deg) scaleX(1); } 50% { opacity:.12; transform:skewX(-4deg) scaleX(1.4); } }
@keyframes glareSlide { 0% { left:-60%; } 100% { left:160%; } }
@keyframes typeCursor { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes floatUp    { 0% { opacity:0; transform:translateY(10px) scale(.9); } 100% { opacity:1; transform:none scale(1); } }
@keyframes bookLift   { 0%,100% { transform:rotateY(-25deg) rotateX(4deg) translateY(0); } 50% { transform:rotateY(-18deg) rotateX(2deg) translateY(-8px); } }

.fade-in-up  { opacity:0; animation: fadeInUp .8s var(--ease-out) forwards; }
.bounce      { animation: bounceY 2s ease-in-out infinite; }
.pulse-anim  { animation: pulse 2s ease-in-out infinite; }

/* ── Navigation ─────────────────────────────────────────────── */
#main-nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .35s, backdrop-filter .35s, box-shadow .35s;
}
#main-nav.scrolled {
  background: rgba(15,24,41,.93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(0,0,0,.3);
}
.nav-logo-text { color: #fff; transition: color .2s; }
.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.7);
  padding: .45rem .8rem;
  border-radius: 9999px;
  transition: color .2s, background .2s;
}
.nav-link:hover  { color: var(--gold); background: var(--gold-dim); }
.nav-link.active { color: var(--gold); }

/* pages with white backgrounds — darken nav text once scrolled past hero */
body.light-page #main-nav.scrolled .nav-logo-text { color: #fff; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-gold {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1.8rem;
  background: var(--gold); color: var(--navy);
  font-family: 'Inter', sans-serif; font-size: .68rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  border-radius: 9999px;
  transition: background .2s, transform .18s, box-shadow .2s;
  box-shadow: 0 4px 22px var(--gold-glow);
}
.btn-gold:hover { background: #c9a42e; transform: translateY(-2px); box-shadow: 0 10px 30px var(--gold-glow); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .65rem 1.8rem;
  background: transparent; color: var(--navy);
  font-family: 'Inter', sans-serif; font-size: .68rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .13em;
  border-radius: 9999px; border: 1.5px solid rgba(30,43,69,.25);
  transition: border-color .2s, color .2s, background .2s;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: #fff; border-radius: 1.25rem;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 18px rgba(0,0,0,.05);
  padding: 1.5rem;
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.11); transform: translateY(-3px); }

/* ── Section helpers ─────────────────────────────────────────── */
.section-tag {
  font-family: 'Inter', sans-serif; font-size: .62rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  color: var(--gold); display: block; margin-bottom: .5rem;
}
.section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300; color: var(--navy); line-height: 1.12; display: block;
}
.section-divider {
  width: 3rem; height: 2px; border: none;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 1rem 0;
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-label {
  display: block; font-family: 'Inter', sans-serif;
  font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--navy); margin-bottom: .4rem;
}
.form-input, .form-textarea {
  width: 100%; padding: .75rem 1rem;
  border: 1.5px solid #e5e7eb; border-radius: .75rem;
  font-family: 'Inter', sans-serif; font-size: .875rem;
  color: var(--charcoal); background: #fff; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}
.form-input::placeholder, .form-textarea::placeholder { color: #9ca3af; }
.form-textarea { resize: vertical; }
.form-submit {
  width: 100%; padding: .85rem;
  background: var(--navy); color: #fff;
  font-family: 'Inter', sans-serif; font-size: .75rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  border-radius: .875rem; border: none;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(30,43,69,.2);
}
.form-submit:hover { background: #162035; transform: translateY(-1px); box-shadow: 0 8px 26px rgba(30,43,69,.28); }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert-success {
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 1rem; padding: 1.5rem; text-align: center; color: #166534;
}
.alert-error {
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: .75rem; padding: .875rem 1rem;
  font-family: 'Inter', sans-serif; font-size: .8rem; color: #991b1b; margin-bottom: 1rem;
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem; border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.badge-gold  { background: rgba(212,175,55,.12); color: #a07d10; }
.badge-blue  { background: #eff6ff; color: #1d4ed8; }
.badge-green { background: #f0fdf4; color: #15803d; }
.badge-red   { background: #fef2f2; color: #b91c1c; }
.badge-yellow{ background: #fefce8; color: #854d0e; }

/* ══════════════════════════════════════════════════════════════
   HERO — Video background, particles, light beams
   ══════════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--navy-dark);
}

/* YouTube / video embed sits behind everything */
#hero-video-wrap {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
#hero-video-wrap iframe {
  position: absolute;
  top: 50%; left: 50%;
  /* 16:9 oversized to fill any viewport */
  width: max(100vw, 177.78vh);
  height: max(56.25vw, 100vh);
  transform: translate(-50%,-50%);
  opacity: .28;
  filter: saturate(.4) brightness(.6);
}

/* Dark gradient overlay */
#hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(15,24,41,.65) 0%,
    rgba(15,24,41,.45) 40%,
    rgba(15,24,41,.85) 100%
  );
}

/* Particles canvas */
#particles-canvas {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}

/* Light beams */
.light-beam {
  position: absolute; top: 0; z-index: 2;
  width: 2px; height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(212,175,55,.18) 35%, transparent 100%);
  animation: beamSway 8s ease-in-out infinite;
}
.light-beam:nth-child(1) { left: 28%; animation-delay: 0s;   width: 1px; }
.light-beam:nth-child(2) { left: 55%; animation-delay: 2.5s; width: 2px; opacity: .7; }
.light-beam:nth-child(3) { left: 74%; animation-delay: 5s;   width: 1px; opacity: .5; }

/* Radial glow at centre */
#hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(212,175,55,.08), transparent 70%);
  pointer-events: none;
}

/* Hero content */
#hero-content {
  position: relative; z-index: 3;
  max-width: 56rem; margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
  /*
   * Bottom padding creates guaranteed clearance between the last
   * child (CTA buttons) and the absolutely-positioned scroll
   * indicator sitting at bottom:2.25rem of #hero.
   * 5rem CTA margin-bottom + this padding = ~9rem total buffer.
   */
  padding-bottom: 4rem;
}

/* Typing cursor */
.typing-cursor::after {
  content: '|';
  animation: typeCursor .9s step-end infinite;
  color: var(--gold); margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════════
   PAGE HERO (non-home pages)
   ══════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--navy);
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 5rem;
  min-height: 34vh;
  position: relative; overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].visible { opacity: 1; transform: none; }

/* stagger siblings */
[data-reveal]:nth-child(2) { transition-delay: .1s; }
[data-reveal]:nth-child(3) { transition-delay: .2s; }
[data-reveal]:nth-child(4) { transition-delay: .3s; }

/* ══════════════════════════════════════════════════════════════
   3-D BOOK
   ══════════════════════════════════════════════════════════════ */
.book-wrap {
  perspective: 900px;
  width: 160px; height: 220px;
  cursor: pointer;
}
.book-3d {
  position: relative;
  width: 160px; height: 220px;
  transform-style: preserve-3d;
  transform: rotateY(-25deg) rotateX(4deg);
  animation: bookLift 6s ease-in-out infinite;
  transition: transform .5s var(--ease-out);
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.35));
}
.book-wrap:hover .book-3d {
  transform: rotateY(-8deg) rotateX(2deg) translateY(-6px) scale(1.04);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.45));
  animation-play-state: paused;
}

/* Cover face */
.book-cover {
  position: absolute; inset: 0;
  border-radius: 2px 4px 4px 2px;
  overflow: hidden;
  backface-visibility: hidden;
  background: var(--navy);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Gold glare sweep */
.book-glare {
  position: absolute; inset: 0;
  border-radius: 2px 4px 4px 2px;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 55%);
  pointer-events: none;
  animation: glareSlide 4s ease-in-out infinite 1.5s;
  background-size: 200% 100%;
}

/* Spine */
.book-spine {
  position: absolute;
  top: 0; left: -18px;
  width: 18px; height: 100%;
  background: linear-gradient(90deg, #0a0f1a, #1a2540);
  transform: rotateY(-90deg);
  transform-origin: right center;
  border-radius: 2px 0 0 2px;
}

/* Pages stack */
.book-pages {
  position: absolute;
  top: 2px; right: -10px;
  width: 10px; height: calc(100% - 4px);
  background: repeating-linear-gradient(
    to right,
    #f4f0e8 0px, #f4f0e8 1px,
    #e8e4da 1px, #e8e4da 2px
  );
  transform: rotateY(90deg);
  transform-origin: left center;
  border-radius: 0 2px 2px 0;
}

/* ══════════════════════════════════════════════════════════════
   COUNTDOWN
   ══════════════════════════════════════════════════════════════ */
.countdown-box {
  display: flex; flex-direction: column; align-items: center;
  min-width: 4.5rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .875rem;
  padding: 1rem 1.25rem;
}
.countdown-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem; font-weight: 300; color: var(--gold);
  line-height: 1; display: block;
  transition: transform .2s;
}
.countdown-num.flip { transform: scale(1.15) translateY(-2px); }
.countdown-label {
  font-family: 'Inter', sans-serif; font-size: .52rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  color: rgba(255,255,255,.4); margin-top: .3rem;
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONY SLIDER
   ══════════════════════════════════════════════════════════════ */
#testimony-wrap { position: relative; overflow: hidden; min-height: 200px; }
.testimony-item {
  position: absolute; inset: 0;
  opacity: 0; transform: translateX(40px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  pointer-events: none;
}
.testimony-item.active {
  position: relative; opacity: 1; transform: none; pointer-events: auto;
}
.testimony-dot {
  width: .5rem; height: .5rem; border-radius: 9999px;
  background: rgba(255,255,255,.2);
  transition: background .3s, transform .3s;
}
.testimony-dot.active { background: var(--gold); transform: scale(1.4); }

/* ══════════════════════════════════════════════════════════════
   SERMON / VIDEO MODAL
   ══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: fadeIn .25s ease;
}
.modal-box {
  background: var(--navy);
  border-radius: 1.25rem;
  width: 100%; max-width: 56rem;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation: fadeInUp .35s var(--ease-out);
}

/* ══════════════════════════════════════════════════════════════
   YOUTUBE VIDEO GRID (counsel/music)
   ══════════════════════════════════════════════════════════════ */
.yt-thumb {
  position: relative; border-radius: 1rem; overflow: hidden;
  aspect-ratio: 16/9; background: var(--navy);
  cursor: pointer;
}
.yt-thumb img   { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.yt-thumb:hover img { transform: scale(1.05); }
.yt-thumb .play-ring {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,24,41,.4);
  transition: background .25s;
}
.yt-thumb:hover .play-ring { background: rgba(15,24,41,.2); }
.yt-thumb .play-ring span {
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 6px 24px var(--gold-glow);
}
.yt-thumb:hover .play-ring span { transform: scale(1.1); box-shadow: 0 10px 32px var(--gold-glow); }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
#site-footer {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   PARALLAX DIVIDER
   ══════════════════════════════════════════════════════════════ */
.parallax-divider {
  position: relative; height: 180px; overflow: hidden;
}
.parallax-divider img {
  position: absolute; inset: 0;
  width: 100%; height: 120%;
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
}
.parallax-divider::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,24,41,.6), rgba(15,24,41,.8));
}

/* ══════════════════════════════════════════════════════════════
   SPECTRE GLOW — floating orbs in sections
   ══════════════════════════════════════════════════════════════ */
.spectre-orb {
  position: absolute; border-radius: 9999px; pointer-events: none;
  filter: blur(80px); opacity: .12; mix-blend-mode: screen;
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--navy-dark); }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,.4); border-radius: 3px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .page-hero { padding-top: calc(var(--nav-h) + 1.5rem); min-height: 28vh; }
  .section-title { font-size: 2.2rem !important; }
  .btn-gold, .btn-outline { padding: .6rem 1.25rem; font-size: .65rem; }
  .book-wrap, .book-3d { width: 130px; height: 180px; }
  .countdown-box { min-width: 3.5rem; padding: .75rem .875rem; }
  .countdown-num { font-size: 1.8rem; }
}

/* ── btn-primary (alias of btn-gold for non-hero use) ─────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.4rem;
  background: var(--navy); color: #fff;
  font-family: 'Inter', sans-serif; font-size: .68rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  border-radius: 9999px; border: none;
  transition: background .2s, transform .18s;
}
.btn-primary:hover { background: #162035; transform: translateY(-1px); }

/* ── glare slide uses background-position trick ───────────── */
.book-glare {
  position: absolute; inset: 0;
  border-radius: 2px 4px 4px 2px;
  overflow: hidden; pointer-events: none;
}
.book-glare::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.22), transparent);
  animation: glareSlide 4s ease-in-out infinite 1.5s;
}

/* ══════════════════════════════════════════════════════════════
   BOOK CARDS — complete redesign
   Mobile: horizontal card (cover | text)
   Desktop: 3-col grid, each card floats with tilt on hover
   ══════════════════════════════════════════════════════════════ */

/* ── Grid container ─────────────────────────────────────────── */
.books-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .books-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/* ── Outer wrapper (controls reveal stagger) ────────────────── */
.book-card-wrap {
  position: relative;
}

/* ══ MOBILE card (horizontal) — shown < 768 px ══════════════ */
.book-mobile-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #fff;
  border-radius: 1.125rem;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  overflow: hidden;
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.book-mobile-card:active {
  transform: scale(.985);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Cover thumbnail (portrait) */
.book-mobile-cover {
  width: 88px;
  min-width: 88px;
  height: 124px;
  border-radius: .875rem .875rem .875rem 0;
  overflow: hidden;
  background: var(--navy);
  flex-shrink: 0;
  position: relative;
}
.book-mobile-cover::after {          /* subtle right-edge shadow simulating spine */
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.18));
  pointer-events: none;
}
.book-mobile-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Info column */
.book-mobile-info {
  flex: 1;
  padding: .875rem .875rem .875rem 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* ══ DESKTOP card (centred column with floating 3-D book) ════ */
.book-desktop-col {
  display: none;          /* hidden on mobile */
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── JS tilt on desktop ─────────────────────────────────────── */
.book-desktop-col {
  will-change: transform;
  transition: transform .1s linear;
}

/* Gold top-border accent */
.book-desktop-col::before {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 0 auto 1.5rem;
  transition: width .45s var(--ease-out);
  border-radius: 1px;
}
.book-card-wrap:hover .book-desktop-col::before {
  width: 60%;
}

/* Show desktop / hide mobile at ≥768px */
@media (min-width: 768px) {
  .book-mobile-card  { display: none; }
  .book-desktop-col  { display: flex; }
}

/* ── Desktop hover shimmer card backing ─────────────────────── */
@media (min-width: 768px) {
  .book-card-wrap {
    background: #fff;
    border-radius: 1.5rem;
    border: 1px solid rgba(0,0,0,.05);
    padding: 2.25rem 1.75rem 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    transition:
      box-shadow .4s var(--ease-out),
      transform .15s linear,
      border-color .3s;
    overflow: hidden;
    position: relative;
  }

  /* shimmer sweep on hover */
  .book-card-wrap::after {
    content: '';
    position: absolute;
    top: -50%; left: -60%;
    width: 40%; height: 200%;
    background: linear-gradient(
      105deg,
      transparent 30%,
      rgba(212,175,55,.07) 50%,
      transparent 70%
    );
    transform: skewX(-15deg);
    transition: left .55s var(--ease-out), opacity .3s;
    opacity: 0;
    pointer-events: none;
  }
  .book-card-wrap:hover {
    box-shadow: 0 20px 56px rgba(0,0,0,.12);
    border-color: rgba(212,175,55,.2);
  }
  .book-card-wrap:hover::after {
    left: 130%;
    opacity: 1;
  }
}

/* ── Book price pill ────────────────────────────────────────── */
.book-price-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .7rem;
  border-radius: 9999px;
  background: rgba(212,175,55,.1);
  color: #8a6910;
  font-family: 'Inter', sans-serif;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.book-price-pill.free {
  background: rgba(21,128,61,.08);
  color: #15803d;
}

/* ── Highlight bullets ──────────────────────────────────────── */
.book-highlights {
  list-style: none;
  padding: 0; margin: 0;
}
.book-highlights li {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  color: var(--gray);
  line-height: 1.55;
  padding: .28rem 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.book-highlights li:last-child { border-bottom: none; }
.book-highlights li::before {
  content: '✦';
  color: var(--gold);
  font-size: .5rem;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ── CTA ghost button used inside book cards ────────────────── */
.book-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .75rem;
  padding: .5rem 1.1rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(30,43,69,.18);
  background: transparent;
  color: var(--navy);
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration: none;
  transition: border-color .2s, background .2s, color .2s, transform .18s;
}
.book-cta:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212,175,55,.06);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE-FIRST GLOBAL OVERRIDES
   (task #8 — catches all remaining mobile gaps)
   ══════════════════════════════════════════════════════════════ */

/* Ensure hero content padding clears the fixed navbar on all viewports */
#hero-content {
  padding-top: calc(var(--nav-h) + 1rem);
  /* Keep enough bottom clearance for scroll indicator on mobile */
  padding-bottom: 6rem;
}
@media (min-width: 768px) {
  /* On desktop: add extra top padding so the tag line is visually
     centred lower — not jammed against the navbar */
  #hero-content { padding-top: calc(var(--nav-h) + 3.5rem); padding-bottom: 4rem; }
}
@media (min-width: 1024px) {
  #hero-content { padding-top: calc(var(--nav-h) + 5rem); padding-bottom: 4rem; }
}

/* Countdown: shrink on very small screens */
@media (max-width: 380px) {
  .countdown-box   { min-width: 3rem; padding: .6rem .5rem; }
  .countdown-num   { font-size: 1.5rem; }
  .countdown-label { font-size: .44rem; }
}

/* Music section: stack platform buttons on narrow screens */
@media (max-width: 480px) {
  .music-platforms { flex-wrap: wrap; gap: .4rem; }
}

/* Testimony items: readable on small screens */
@media (max-width: 480px) {
  .testimony-item { padding: 0 .25rem; }
  .testimony-item p { font-size: .9rem !important; }
}

/* Modal: full-width on mobile */
@media (max-width: 640px) {
  .modal-box { border-radius: .75rem; margin: .5rem; }
}

/* Page hero: tighter on small screens */
@media (max-width: 640px) {
  .page-hero {
    padding-top: calc(var(--nav-h) + 1.25rem);
    padding-bottom: 3rem;
    min-height: 24vh;
  }
}

/* Cards: no hover lift on touch devices (prevents stuck state) */
@media (hover: none) {
  .card:hover,
  .book-card-wrap:hover { transform: none; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
}

/* Buttons: full-width on mobile when inside a centre-aligned div */
@media (max-width: 480px) {
  .btn-gold, .btn-outline, .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* Grid gutters: tighter on mobile */
@media (max-width: 640px) {
  .grid { gap: 1rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE PRELOADER
   ══════════════════════════════════════════════════════════════ */
#smh-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--navy-dark, #0f1829);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity .55s ease, visibility .55s ease;
}
#smh-preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Logo mark */
#smh-preloader .pl-logo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  border: 2px solid rgba(212,175,55,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: plPulse 1.8s ease-in-out infinite;
}
#smh-preloader .pl-logo img {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  object-fit: cover;
}

/* Spinner ring */
#smh-preloader .pl-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--gold, #D4AF37);
  border-right-color: rgba(212,175,55,.3);
  animation: plSpin 1s linear infinite;
}

/* Label */
#smh-preloader .pl-label {
  font-family: 'Inter', sans-serif;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(255,255,255,.35);
  animation: plFade 1.8s ease-in-out infinite;
}

/* Progress bar */
#smh-preloader .pl-bar-wrap {
  width: 8rem;
  height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 1px;
  overflow: hidden;
}
#smh-preloader .pl-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold, #D4AF37), #f0d060);
  border-radius: 1px;
  animation: plBar 1.6s ease-in-out infinite;
}

@keyframes plSpin  { to { transform: rotate(360deg); } }
@keyframes plPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212,175,55,.25); }
                     50%      { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(212,175,55,0); } }
@keyframes plFade  { 0%,100% { opacity: .35; } 50% { opacity: .7; } }
@keyframes plBar   { 0%   { width: 0%;   margin-left: 0; }
                     50%  { width: 100%; margin-left: 0; }
                     100% { width: 0%;   margin-left: 100%; } }

/* ══════════════════════════════════════════════════════════════
   ACTIVE NAV LINK — stronger visual state
   ══════════════════════════════════════════════════════════════ */
.nav-link.active {
  color: var(--gold, #D4AF37) !important;
  position: relative;
}
/* Underline pill indicator */
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 2px;
  background: var(--gold, #D4AF37);
  border-radius: 1px;
  animation: fadeIn .3s ease;
}

/* ══════════════════════════════════════════════════════════════
   LAZY IMAGE — fade-in when loaded
   ══════════════════════════════════════════════════════════════ */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .5s ease;
}
img[loading="lazy"].img-loaded {
  opacity: 1;
}
/* Images without lazy (above-the-fold) stay visible */
img:not([loading="lazy"]) {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   GALLERY GRID — responsive mosaic layout
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .gallery-grid > div {
    grid-template-columns: 1fr !important;
  }
  .gallery-grid > div > div[style*="grid-row"] {
    grid-row: auto !important;
    aspect-ratio: 4/3;
    min-height: 0 !important;
  }
  .gallery-grid > div > div[style*="grid-column:2/4"] {
    grid-column: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   NAV ACTIVE STATES
   Override inline styles with !important so .active wins.
   Uses attribute selector to target data-anchor links.
   ══════════════════════════════════════════════════════════════ */

/* Desktop nav-link base */
a.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.7);
  padding: .5rem .875rem;
  border-radius: 9999px;
  text-decoration: none;
  position: relative;
  transition: color .2s, background .2s;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
a.nav-link:hover {
  color: #D4AF37 !important;
  background: rgba(212,175,55,.1);
}

/* Active state — gold colour + pill background + underline dot */
a.nav-link.active {
  color: #D4AF37 !important;
  background: rgba(212,175,55,.12) !important;
}
a.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.25rem;
  height: 2px;
  background: #D4AF37;
  border-radius: 1px;
}

/* Mobile menu active link colour */
#mobile-menu a[style].active-mobile,
#mobile-menu a.active {
  color: #D4AF37 !important;
}

/* ══════════════════════════════════════════════════════════════
   HASHCHECK CLEANUP — remove temp files
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   TYPEWRITER CURSOR — hero scripture line
   ══════════════════════════════════════════════════════════════ */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  color: #D4AF37;
  font-weight: 300;
  animation: twBlink .85s step-end infinite;
  margin-left: 1px;
  vertical-align: baseline;
}
@keyframes twBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   CURSOR LIGHT BURST — canvas sits above orbs, below content
   Pointer-events: none so clicks pass through to page elements.
   ══════════════════════════════════════════════════════════════ */
#hero-light-burst {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Hardware-accelerated layer promotion */
  will-change: transform;
  transform: translateZ(0);
}

/* ══════════════════════════════════════════════════════════════
   GALLERY — masonry responsive columns
   ══════════════════════════════════════════════════════════════ */
.gallery-masonry {
  columns: 1;
  column-gap: 1rem;
}
@media (min-width: 640px)  { .gallery-masonry { columns: 2; } }
@media (min-width: 1024px) { .gallery-masonry { columns: 3; } }

/* Each card breaks cleanly within columns */
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: 1.25rem;
  overflow: hidden;
  position: relative;
  background: #0f1829;
  cursor: zoom-in;
}

/* Entrance animation — staggered via inline animation-delay */
@keyframes galleryFadeIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Hover overlay */
.gallery-item .gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15,24,41,.88) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* Caption slide up on hover */
.gallery-item .gallery-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.25rem;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  pointer-events: none;
}
.gallery-item:hover .gallery-label {
  transform: translateY(0);
  opacity: 1;
}

/* Image zoom on hover */
.gallery-item img {
  transition: transform .5s var(--ease-out), filter .3s;
  filter: brightness(.95);
  display: block;
  width: 100%;
}
.gallery-item:hover img {
  transform: scale(1.04);
  filter: brightness(1);
}

/* Filter pill */
.gallery-filter {
  padding: .3rem .9rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(30,43,69,.12);
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6B7280;
  background: transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.gallery-filter:hover {
  border-color: #D4AF37;
  color: #D4AF37;
}
.gallery-filter.active {
  background: #D4AF37;
  color: #1E2B45;
  border-color: #D4AF37;
}

/* Touch devices — disable hover scale (prevents stuck state) */
@media (hover: none) {
  .gallery-item:hover img { transform: none; filter: brightness(.95); }
  .gallery-item:hover .gallery-overlay { opacity: 0; }
  .gallery-item:hover .gallery-label   { opacity: 0; transform: translateY(8px); }
}

/* ══════════════════════════════════════════════════════════════
   COUNTDOWN — digit flip on update
   ══════════════════════════════════════════════════════════════ */
@keyframes cdFlip {
  0%   { transform: scale(1.18) translateY(-3px); color: #f0d060; }
  100% { transform: scale(1); color: #D4AF37; }
}
.cd-flip-anim {
  animation: cdFlip .22s var(--ease-out) forwards;
}

/* ══════════════════════════════════════════════════════════════
   GALLERY GRID (homepage mosaic) — mobile collapse
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .gallery-grid > div {
    grid-template-columns: 1fr !important;
  }
  .gallery-grid > div > div[style*="grid-row"] {
    grid-row: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4/3;
  }
  .gallery-grid > div > div[style*="grid-column:2/4"] {
    grid-column: auto !important;
  }
}