/* ============================================================
   EXCELLENCE YOUTH — MELKAM WETAT
   Design System · Dark Cinematic · 3D UI
   ============================================================ */

:root {
  --bg-0: #04060f;
  --bg-1: #0a0f1e;
  --bg-2: #101830;
  --gold: #d4af37;
  --gold-light: #f0c75e;
  --gold-dim: rgba(212, 175, 55, 0.15);
  --ink: #e8eaf2;
  --ink-dim: #9aa3b8;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.09);
  --green: #2e9e6b;
  --radius: 18px;
  --font-head: 'Sora', 'Noto Sans Ethiopic', sans-serif;
  --font-body: 'Inter', 'Noto Sans Ethiopic', sans-serif;
  --shadow-lift: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
  --transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 4-language visibility (Amharic default) ---------- */
body.lang-am .en, body.lang-am .om, body.lang-am .ti { display: none !important; }
body.lang-om .en, body.lang-om .am, body.lang-om .ti { display: none !important; }
body.lang-ti .en, body.lang-ti .am, body.lang-ti .om { display: none !important; }
body.lang-en .am, body.lang-en .om, body.lang-en .ti { display: none !important; }
body.lang-am, body.lang-ti { font-family: 'Noto Sans Ethiopic', var(--font-body); }
body.lang-am h1, body.lang-am h2, body.lang-am h3, body.lang-am h4,
body.lang-ti h1, body.lang-ti h2, body.lang-ti h3, body.lang-ti h4 { line-height: 1.45; }

/* ---------- Language dropdown ---------- */
.lang-menu { position: relative; }
.lang-list {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 170px;
  background: rgba(8, 12, 24, 0.97);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  z-index: 300;
}
.lang-menu.open .lang-list { display: flex; }
.lang-list button {
  background: none; border: none; cursor: pointer;
  color: var(--ink-dim); text-align: left;
  padding: 10px 14px; border-radius: 9px;
  font-size: 0.88rem; font-family: 'Noto Sans Ethiopic', var(--font-body);
  transition: background 0.2s, color 0.2s;
}
.lang-list button:hover { background: var(--glass); color: #fff; }
.lang-list button.on { color: var(--gold-light); background: var(--gold-dim); }

::selection { background: var(--gold); color: var(--bg-0); }

/* ---------- 3D canvas background ---------- */
#bg3d {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-wrap { position: relative; z-index: 1; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; }

.display {
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  letter-spacing: -0.02em;
  transform-style: preserve-3d;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.10),
    0 2px 0 rgba(140,115,45,0.30),
    0 4px 0 rgba(95,78,30,0.22),
    0 6px 0 rgba(60,48,18,0.16),
    0 9px 0 rgba(35,28,10,0.12),
    0 14px 28px rgba(0,0,0,0.55),
    0 30px 60px rgba(212,175,55,0.14);
  animation: title3dIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes title3dIn {
  0% { opacity: 0; transform: perspective(900px) rotateX(35deg) translateY(60px) scale(0.92); }
  100% { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0) scale(1); }
}
@keyframes titleFloat3d {
  0%, 100% { transform: perspective(900px) rotateX(0deg) translateY(0); }
  50% { transform: perspective(900px) rotateX(2.5deg) translateY(-6px); }
}
.hero .display, .hero-page .display { animation: title3dIn 1.2s cubic-bezier(0.22,1,0.36,1) both, titleFloat3d 7s ease-in-out 1.3s infinite; }

.grad-text {
  background: linear-gradient(100deg, #fff 20%, var(--gold-light) 55%, var(--gold) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.lead { font-size: 1.15rem; color: var(--ink-dim); max-width: 720px; }

/* ---------- Layout ---------- */
.container { width: min(1180px, 92%); margin: 0 auto; }
section { padding: 110px 0; position: relative; }
.section-head { max-width: 760px; margin-bottom: 60px; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 16px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .eyebrow::before { display: none; }

.grid { display: grid; gap: 26px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  padding: 20px 0;
}
.nav.scrolled {
  background: rgba(6, 9, 18, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
}
.nav-inner {
  width: min(1280px, 94%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}
.brand .logo-badge {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold), #8a6d1f);
  color: var(--bg-0);
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
  transform: rotate(-4deg);
  transition: transform var(--transition);
}
.brand:hover .logo-badge { transform: rotate(4deg) scale(1.06); }
.brand small { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; color: var(--gold-light); text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 10px;
  transition: color 0.25s, background 0.25s;
  white-space: nowrap;
}
.nav-links a:hover { color: #fff; background: var(--glass); }
.nav-links a.active { color: var(--gold-light); background: var(--gold-dim); }

.nav-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 12px;
  background: linear-gradient(120deg, var(--gold), var(--gold-light));
  color: #201700 !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(212, 175, 55, 0.45); background: linear-gradient(120deg, var(--gold), var(--gold-light)) !important; }

.lang-toggle {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.3s, background 0.3s;
  font-family: var(--font-body);
}
.lang-toggle:hover { border-color: var(--gold); }
.lang-toggle span.on { color: var(--gold-light); }
.lang-toggle span.off { color: var(--ink-dim); }

.hamburger {
  display: none;
  cursor: pointer;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  position: relative;
}
.hamburger span {
  position: absolute; left: 11px; right: 11px;
  height: 2px; background: var(--ink);
  transition: all 0.3s;
}
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 20px; }
.hamburger span:nth-child(3) { top: 26px; }
.nav.open .hamburger span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav.open .hamburger span:nth-child(2) { opacity: 0; }
.nav.open .hamburger span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  min-height: calc(100vh - var(--nav-h) - var(--bn-h));
  display: flex;
  align-items: center;
  padding: 60px 0 100px;
  position: relative;
}
.hero-content { max-width: 780px; position: relative; }
.hero .lead { margin: 26px 0 40px; font-size: 1.2rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.badge-pill {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  font-size: 0.82rem;
  color: var(--ink-dim);
}
.badge-pill b { color: var(--gold-light); }

.hero-page {
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  padding: 70px 0 80px;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(212,175,55,0.09), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(46,158,107,0.07), transparent 60%);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
}
.btn-gold {
  background: linear-gradient(120deg, var(--gold), var(--gold-light));
  color: #201700;
  box-shadow: 0 14px 34px rgba(212, 175, 55, 0.32);
}
.btn-gold:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 44px rgba(212, 175, 55, 0.45); }
.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--gold-light); }

/* ---------- Glass cards + 3D tilt ---------- */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 34px 30px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform 0.1s;
  transform-style: preserve-3d;
  will-change: transform;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 175, 55, 0.09), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: rgba(212, 175, 55, 0.35); box-shadow: var(--shadow-lift); }
.card h3 { font-size: 1.2rem; margin: 18px 0 10px; }
.card p { color: var(--ink-dim); font-size: 0.94rem; }
.card .num {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.15em;
}

.icon-3d {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  background: linear-gradient(145deg, rgba(212,175,55,0.22), rgba(212,175,55,0.05));
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 10px 24px rgba(0,0,0,0.35);
  transform: translateZ(30px);
}

/* ---------- Stats ---------- */
.stats-band {
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(212,175,55,0.05), transparent);
}
.stat { text-align: center; padding: 20px 10px; }
.stat .value {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 800;
  background: linear-gradient(180deg, #fff, var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat .label { color: var(--ink-dim); font-size: 0.9rem; margin-top: 6px; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 40px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 10px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.tl-item { position: relative; padding-bottom: 44px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute;
  left: -37px; top: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-0);
  border: 3px solid var(--gold);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.6);
}
.tl-item h3 { color: var(--gold-light); font-size: 1.05rem; margin-bottom: 8px; }
.tl-item p { color: var(--ink-dim); font-size: 0.94rem; max-width: 640px; }

/* ---------- Feature split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split .visual {
  border-radius: 24px;
  min-height: 380px;
  background: linear-gradient(145deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lift);
}
.split .visual .big-icon { font-size: 5.5rem; filter: drop-shadow(0 16px 32px rgba(212,175,55,0.35)); position: relative; z-index: 1; }
.split .visual::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(500px at 30% 20%, rgba(212,175,55,0.14), transparent 60%);
}

/* ---------- Checklist ---------- */
.checklist { list-style: none; display: grid; gap: 14px; margin-top: 22px; }
.checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--ink-dim);
  font-size: 0.96rem;
}
.checklist li::before {
  content: '✦';
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- CTA band ---------- */
.cta-band {
  border-radius: 28px;
  padding: 70px 50px;
  text-align: center;
  background:
    radial-gradient(700px at 50% -40%, rgba(212,175,55,0.22), transparent 65%),
    linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: var(--shadow-lift);
  position: relative;
  overflow: hidden;
}
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 16px; }
.cta-band p { color: var(--ink-dim); max-width: 640px; margin: 0 auto 34px; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Tables / account box ---------- */
.account-box {
  background: var(--glass);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius);
  padding: 30px;
  backdrop-filter: blur(14px);
}
.account-box .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--glass-border);
  font-size: 0.94rem;
  flex-wrap: wrap;
}
.account-box .row:last-child { border-bottom: none; }
.account-box .row .k { color: var(--ink-dim); }
.account-box .row .v { font-weight: 700; color: var(--gold-light); font-family: var(--font-head); letter-spacing: 0.03em; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 18px; }
.form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-dim); margin-bottom: 8px; letter-spacing: 0.04em; }
.field input, .field textarea, .field select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
}
.field textarea { min-height: 140px; resize: vertical; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--glass-border);
  padding: 70px 0 36px;
  background: linear-gradient(180deg, transparent, rgba(212,175,55,0.04));
  position: relative;
  z-index: 1;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; margin-bottom: 50px; }
.footer-grid h4 { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 18px; }
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { color: var(--ink-dim); text-decoration: none; font-size: 0.9rem; transition: color 0.25s; }
.footer-grid a:hover { color: var(--gold-light); }
.footer-grid p { color: var(--ink-dim); font-size: 0.9rem; }
.footer-bottom {
  border-top: 1px solid var(--glass-border);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--ink-dim);
  font-size: 0.82rem;
}

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.4s; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
.float { animation: floatY 6s ease-in-out infinite; }

/* ---------- Scroll progress ---------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 200;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
}

/* ---------- Photo visuals ---------- */
.split .visual.photo { padding: 0; min-height: 0; }
.split .visual.photo img { width: 100%; height: 100%; min-height: 340px; max-height: 480px; object-fit: cover; display: block; border-radius: 24px; }
.img-frame { border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow-lift); }
.img-frame img { width: 100%; display: block; }

/* ---------- Ministries ---------- */
.ministry-card { text-align: center; padding: 44px 30px; }
.ministry-card .logo-wrap {
  width: 130px; height: 130px;
  margin: 0 auto 22px;
  border-radius: 26px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 16px 34px rgba(0,0,0,0.4);
  overflow: hidden;
}
.ministry-card .logo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ministry-card .logo-wrap img.contain { object-fit: contain; padding: 14px; }
.ministry-card h3 { font-size: 1.25rem; }
.ministry-card .am-name { color: var(--gold-light); font-size: 0.95rem; display: block; margin-top: 4px; font-family: 'Noto Sans Ethiopic', sans-serif; }

/* ---------- Social icons ---------- */
.social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.social-row a {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--ink-dim);
  transition: all 0.3s;
}
.social-row a:hover { color: var(--gold-light); border-color: var(--gold); transform: translateY(-3px); }
.social-row svg { width: 19px; height: 19px; fill: currentColor; }

/* ---------- Gallery + lightbox ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.gallery figure {
  margin: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--glass-border); position: relative; aspect-ratio: 4/3;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); display: block; }
.gallery figure:hover img { transform: scale(1.07); }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0; padding: 30px 14px 12px;
  background: linear-gradient(transparent, rgba(4,6,15,0.85));
  font-size: 0.8rem; color: #fff;
}
#lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(3,5,12,0.94); backdrop-filter: blur(10px);
  align-items: center; justify-content: center; padding: 4vh 4vw; cursor: zoom-out;
}
#lightbox.open { display: flex; }
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.8); }

/* ---------- Video cards ---------- */
.video-card { border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); background: var(--bg-1); box-shadow: var(--shadow-lift); }
.video-card video, .video-card iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; background: #000; }
.video-card .vc-title { padding: 16px 20px; font-weight: 600; font-size: 0.95rem; }

/* ---------- Posts (admin-published) ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.empty-note { color: var(--ink-dim); font-size: 0.92rem; padding: 26px; border: 1px dashed var(--glass-border); border-radius: 14px; text-align: center; }

/* ---------- Admin ---------- */
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.admin-tabs button {
  padding: 11px 22px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--ink-dim); font-weight: 600; cursor: pointer; font-family: var(--font-body);
}
.admin-tabs button.on { background: var(--gold-dim); color: var(--gold-light); border-color: rgba(212,175,55,0.4); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-table th, .admin-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--glass-border); }
.admin-table th { color: var(--gold-light); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.admin-table td { color: var(--ink-dim); }
.table-scroll { overflow-x: auto; }
.btn-sm { padding: 7px 14px; font-size: 0.8rem; border-radius: 9px; }
.btn-danger { background: rgba(220,80,80,0.15); border: 1px solid rgba(220,80,80,0.4); color: #f0a0a0; }
.btn-danger:hover { border-color: #e05c4a; color: #fff; }
.notice {
  padding: 16px 20px; border-radius: 14px; font-size: 0.88rem;
  background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.3); color: var(--ink-dim); margin-bottom: 24px;
}
.notice b { color: var(--gold-light); }

/* ---------- Circling glow border (multi-color light orbiting box edges) ---------- */
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spinGlow { to { --spin: 360deg; } }
.card, .cta-band, .account-box, .video-card, .stats-band .stat { position: relative; }
.card::after, .cta-band::after, .account-box::after, .video-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--spin),
    rgba(212,175,55,0.9), rgba(123,47,247,0.75), rgba(0,212,255,0.75),
    rgba(46,158,107,0.75), rgba(240,90,140,0.7), rgba(212,175,55,0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: spinGlow 7s linear infinite;
  pointer-events: none;
  opacity: 0.45;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.45)) drop-shadow(0 0 16px rgba(123,47,247,0.25));
  transition: opacity 0.4s;
}
.card:hover::after, .video-card:hover::after { opacity: 1; }
.cta-band::after { opacity: 0.65; animation-duration: 9s; }

/* ---------- Content protection (deterrents) ---------- */
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.gallery img, .video-card img { pointer-events: none; }
body { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
input, textarea, select { -webkit-user-select: text; -moz-user-select: text; user-select: text; }
video { -webkit-user-drag: none; }
video::-internal-media-controls-download-button { display: none; }
@media print { body { display: none !important; } }
#protect-flash {
  position: fixed; inset: 0; z-index: 9999; display: none;
  background: #04060f; color: var(--gold-light);
  align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-head); font-size: 1.1rem; padding: 20px;
}
#protect-flash.on { display: flex; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav-links a { padding: 9px 9px; font-size: 0.82rem; }
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 1080px) and (min-width: 861px) {
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(340px, 60vw);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 8px; padding: 100px 28px 40px;
    background: rgba(7, 10, 20, 0.97); backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav.open .nav-links { transform: translateX(0); }
  .nav-links a { width: 100%; font-size: 1rem; }
  .hamburger { display: block; z-index: 10; }
}
@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 82vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 100px 28px 40px;
    background: rgba(7, 10, 20, 0.97);
    backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav.open .nav-links { transform: translateX(0); }
  .nav-links a { width: 100%; font-size: 1rem; }
  .hamburger { display: block; z-index: 10; }
  section { padding: 80px 0; }
  .form-grid .two { grid-template-columns: 1fr; }
  .cta-band { padding: 50px 28px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 130px; }
}

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

/* ============================================================
   BRIGHT & HOLY THEME (light redesign) — overrides
   ============================================================ */
:root {
  --bg-0: #fdfcf9;
  --bg-1: #f7f4ec;
  --bg-2: #efe9dc;
  --gold: #b8912a;
  --gold-light: #d4af37;
  --gold-dim: rgba(184, 145, 42, 0.12);
  --ink: #1d2433;
  --ink-dim: #5b6478;
  --glass: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(30, 40, 80, 0.10);
  --green: #1c7a4f;
  --shadow-lift: 0 26px 55px -18px rgba(70, 55, 15, 0.22);
}
body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 13v18M13 22h18' stroke='%231d2433' stroke-opacity='0.030' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fdfcf9, #f9f6ee);
  color: var(--ink);
}
::selection { background: var(--gold-light); color: #fff; }
.grad-text {
  background: linear-gradient(100deg, #1d2433 10%, var(--gold) 55%, #8a6d1f 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.display {
  text-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 2px 0 rgba(184,145,42,0.22),
    0 4px 0 rgba(184,145,42,0.14),
    0 6px 0 rgba(120,95,28,0.10),
    0 10px 24px rgba(90,70,20,0.22),
    0 24px 48px rgba(184,145,42,0.14);
}
.nav.scrolled {
  background: rgba(253, 252, 249, 0.88);
  box-shadow: 0 10px 34px rgba(60, 50, 20, 0.10);
  border-bottom: 1px solid var(--glass-border);
}
.nav-links a:hover { color: var(--ink); background: rgba(30,40,80,0.05); }
.hamburger span { background: var(--ink); }
@media (max-width: 1080px) {
  .nav-links { background: rgba(253, 252, 249, 0.98) !important; border-left: 1px solid var(--glass-border) !important; }
}
.card { background: rgba(255, 255, 255, 0.82); }
.card::before { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(184,145,42,0.10), transparent 45%); }
.card:hover { border-color: rgba(184, 145, 42, 0.45); }
.icon-3d {
  background: linear-gradient(145deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05));
  border-color: rgba(184, 145, 42, 0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 22px rgba(90,70,20,0.14);
}
.stat .value { background: linear-gradient(180deg, #1d2433 20%, var(--gold) 90%); -webkit-background-clip: text; background-clip: text; }
.stats-band { background: linear-gradient(180deg, rgba(184,145,42,0.07), transparent); }
.cta-band {
  background:
    radial-gradient(700px at 50% -40%, rgba(212,175,55,0.22), transparent 65%),
    linear-gradient(160deg, #ffffff, #f2ecdd);
  border-color: rgba(184, 145, 42, 0.35);
}
.account-box { background: #fff; }
.split .visual { background: linear-gradient(145deg, #ffffff, var(--bg-2)); }
.video-card { background: #fff; }
.badge-pill { background: #fff; }
.field input, .field textarea, .field select { background: #fff; border-color: rgba(30,40,80,0.16); color: var(--ink); }
footer { background: linear-gradient(180deg, transparent, rgba(184,145,42,0.06)); }
.tl-item::before { background: #fff; }
.btn-gold { color: #2a1f00; }
.nav-cta { color: #2a1f00 !important; }
.lang-list { background: rgba(255,255,255,0.98); }
#protect-flash { background: #fdfcf9; color: var(--gold); }
.empty-note { background: rgba(255,255,255,0.6); }
.notice { background: rgba(212,175,55,0.10); color: var(--ink-dim); }
.admin-tabs button { background: #fff; }
.gallery figcaption { background: linear-gradient(transparent, rgba(15,15,25,0.85)); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- Visible 4-language buttons ---------- */
.lang-bar { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.lang-btn {
  border: 1px solid var(--glass-border);
  background: #fff;
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Noto Sans Ethiopic', var(--font-body);
  transition: all 0.3s;
  position: relative;
}
.lang-btn:hover { transform: translateY(-2px); }
.lang-btn[data-lang="am"].on { color: #fff; background: var(--gold); border-color: var(--gold); box-shadow: 0 0 16px rgba(184,145,42,0.55); }
.lang-btn[data-lang="om"].on { color: #fff; background: var(--green); border-color: var(--green); box-shadow: 0 0 16px rgba(28,122,79,0.5); }
.lang-btn[data-lang="ti"].on { color: #fff; background: #b3364b; border-color: #b3364b; box-shadow: 0 0 16px rgba(179,54,75,0.5); }
.lang-btn[data-lang="en"].on { color: #fff; background: #3b5bd6; border-color: #3b5bd6; box-shadow: 0 0 16px rgba(59,91,214,0.5); }
@media (max-width: 560px) { .lang-btn { padding: 6px 9px; font-size: 0.72rem; } .nav-inner { gap: 8px; } }

/* ---------- Welcome portal ---------- */
#portal {
  position: fixed; inset: 0; z-index: 800;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 13v18M13 22h18' stroke='%231d2433' stroke-opacity='0.035' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ffffff, #f7f3e9);
  display: flex; align-items: center; justify-content: center;
  padding: 30px 5vw;
  transition: opacity 0.7s ease, visibility 0.7s;
}
#portal.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.portal-inner { text-align: center; max-width: 1050px; width: 100%; }
.portal-kicker { color: var(--gold); letter-spacing: 0.25em; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; margin-bottom: 14px; }
.portal-title { font-family: var(--font-head); font-size: clamp(1.5rem, 3.4vw, 2.4rem); margin-bottom: 44px; color: var(--ink); }
.portal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.portal-card {
  background: #fff;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 38px 24px 30px;
  cursor: pointer;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s, opacity 0.5s;
}
.portal-card::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--spin), rgba(212,175,55,0.9), rgba(28,122,79,0.6), rgba(212,175,55,0.15), rgba(212,175,55,0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinGlow 5s linear infinite;
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.portal-card:hover, .portal-card:focus-visible {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -15px rgba(120, 95, 28, 0.30), 0 0 60px rgba(212,175,55,0.25);
}
.portal-card:hover::after { opacity: 1; }
.portal-card img { width: 110px; height: 110px; object-fit: contain; margin: 0 auto 20px; display: block; border-radius: 20px; }
.portal-card .pc-name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink-dim); transition: color 0.3s; }
.portal-card:hover .pc-name { color: var(--ink); }
.portal-card .pc-sub { font-size: 0.8rem; color: var(--gold); margin-top: 6px; font-family: 'Noto Sans Ethiopic', var(--font-body); }
#portal.zooming .portal-card { opacity: 0; transform: scale(0.9); }
#portal.zooming .portal-card.chosen { opacity: 1; transform: scale(1.45); box-shadow: 0 0 120px rgba(212,175,55,0.6); }
.portal-skip {
  position: absolute; top: 26px; right: 30px;
  background: none; border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 9px 20px; color: var(--ink-dim); cursor: pointer; font-size: 0.82rem;
  font-family: 'Noto Sans Ethiopic', var(--font-body); transition: all 0.3s;
}
.portal-skip:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Cinematic unity section ---------- */
.cinema { position: relative; padding: 0; min-height: 74vh; display: flex; align-items: flex-end; overflow: hidden; }
.cinema video, .cinema > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cinema .cinema-overlay {
  position: relative; z-index: 2; width: 100%;
  padding: 140px 0 70px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 14, 26, 0.72) 78%);
  color: #fff; text-align: center;
}
.cinema h2 { font-size: clamp(1.7rem, 3.8vw, 3rem); margin-bottom: 18px; text-shadow: 0 4px 24px rgba(0,0,0,0.6); }
.cinema p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto 30px; }

/* ---------- Events ---------- */
.event-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.event-card .ev-img { aspect-ratio: 16/9; overflow: hidden; }
.event-card .ev-img img { width: 100%; height: 100%; object-fit: cover; }
.event-card .ev-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ev-date {
  display: inline-flex; gap: 8px; align-items: center;
  color: var(--gold); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em;
}
.ev-meta { color: var(--ink-dim); font-size: 0.85rem; }
.event-card .btn-row { margin-top: auto; padding-top: 12px; }

/* ---------- Community voices ---------- */
.voice-card { position: relative; padding-top: 46px; }
.voice-card::before { content: '\201C'; position: absolute; top: 6px; left: 22px; font-size: 4rem; color: var(--gold); font-family: Georgia, serif; opacity: 0.55; }
.voice-meta { margin-top: 14px; font-size: 0.8rem; color: var(--gold); font-weight: 700; }

/* ---------- Footer top (logos + newsletter) ---------- */
.footer-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 26px; padding-bottom: 40px; margin-bottom: 44px;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}
.footer-top::before {
  content: '✦'; position: absolute; top: -58px; left: 50%; transform: translateX(-50%);
  color: var(--gold); font-size: 1.2rem; text-shadow: 0 0 18px rgba(212,175,55,0.8);
  animation: floatY 4s ease-in-out infinite;
}
.footer-logos { display: flex; gap: 18px; align-items: center; }
.footer-logos img { width: 54px; height: 54px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--glass-border); padding: 4px; }
.newsletter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.newsletter input {
  background: #fff; border: 1px solid rgba(30,40,80,0.16); border-radius: 12px;
  padding: 12px 16px; min-width: 230px; color: var(--ink); font-family: var(--font-body);
}
.newsletter input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(184,145,42,0.12); }

/* ---------- Marsil TV ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.chip {
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--glass-border); background: #fff; color: var(--ink-dim);
  font-size: 0.84rem; font-weight: 600; font-family: 'Noto Sans Ethiopic', var(--font-body); transition: all 0.25s;
}
.chip.on, .chip:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.yt-badge { display: inline-flex; align-items: center; gap: 8px; color: #f00; font-weight: 700; font-size: 0.8rem; }
.search-box { position: relative; max-width: 420px; margin-bottom: 22px; }
.search-box input {
  width: 100%; background: #fff; border: 1px solid rgba(30,40,80,0.16); border-radius: 14px;
  padding: 14px 18px 14px 44px; color: var(--ink); font-family: var(--font-body);
}
.search-box::before { content: '🔎'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: 0.55; }
.btn-red { background: linear-gradient(120deg, #e02f2f, #ff5b4d); color: #fff; box-shadow: 0 14px 30px rgba(224,47,47,0.3); }
.btn-red:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(224,47,47,0.4); }

/* ============================================================
   DARK NEON THEME (final) — overrides everything above
   ============================================================ */
:root {
  --bg-0: #05060f;
  --bg-1: #0a0d1c;
  --bg-2: #131730;
  --gold: #d4af37;
  --gold-light: #ffd75e;
  --gold-dim: rgba(212, 175, 55, 0.16);
  --neon-c: #35e0ff;
  --neon-p: #b26bff;
  --neon-k: #ff5ec8;
  --ink: #eaeefc;
  --ink-dim: #9aa6c4;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.11);
  --green: #2e9e6b;
  --shadow-lift: 0 30px 60px -15px rgba(0, 0, 0, 0.65);
}
body {
  background:
    linear-gradient(rgba(4, 6, 15, 0.86), rgba(4, 6, 15, 0.94)),
    url('../assets/img/bg-candles.jpg') center/cover fixed,
    #05060f;
  color: var(--ink);
}
::selection { background: var(--gold); color: #05060f; }
.grad-text {
  background: linear-gradient(100deg, #ffffff 15%, var(--gold-light) 50%, var(--neon-c) 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.display {
  text-shadow:
    0 1px 0 rgba(255,255,255,0.10),
    0 2px 0 rgba(140,115,45,0.32),
    0 4px 0 rgba(95,78,30,0.24),
    0 6px 0 rgba(60,48,18,0.18),
    0 9px 0 rgba(35,28,10,0.12),
    0 14px 30px rgba(0,0,0,0.6),
    0 0 46px rgba(255,215,94,0.22),
    0 0 90px rgba(53,224,255,0.10);
}
.nav.scrolled {
  background: rgba(6, 8, 18, 0.85);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(53,224,255,0.15);
  border-bottom: 1px solid rgba(53,224,255,0.14);
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.06); text-shadow: 0 0 14px rgba(53,224,255,0.75); }
.nav-links a.active { color: var(--gold-light); background: var(--gold-dim); text-shadow: 0 0 16px rgba(255,215,94,0.8); }
.hamburger span { background: var(--ink); }
@media (max-width: 1080px) {
  .nav-links { background: rgba(6, 9, 20, 0.97) !important; border-left: 1px solid var(--glass-border) !important; }
}
.card { background: rgba(13, 17, 34, 0.72); backdrop-filter: blur(14px); }
.card::before { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(53,224,255,0.10), transparent 45%); }
.card:hover { border-color: rgba(53, 224, 255, 0.4); box-shadow: 0 30px 60px -15px rgba(0,0,0,0.7), 0 0 40px rgba(53,224,255,0.12); }
.card::after, .cta-band::after, .account-box::after, .video-card::after { opacity: 0.55; }
.card:hover::after, .video-card:hover::after { opacity: 1; }
.icon-3d {
  background: linear-gradient(145deg, rgba(212,175,55,0.24), rgba(178,107,255,0.10));
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 24px rgba(0,0,0,0.4), 0 0 22px rgba(255,215,94,0.18);
}
.stat .value { background: linear-gradient(180deg, #ffffff 10%, var(--gold-light) 70%, var(--neon-c) 120%); -webkit-background-clip: text; background-clip: text; }
.stats-band { background: linear-gradient(180deg, rgba(53,224,255,0.05), rgba(212,175,55,0.04)); }
.cta-band {
  background:
    radial-gradient(700px at 50% -40%, rgba(178,107,255,0.28), transparent 65%),
    radial-gradient(500px at 90% 120%, rgba(53,224,255,0.16), transparent 60%),
    linear-gradient(160deg, #141a36, #0a0d1c);
  border-color: rgba(178, 107, 255, 0.35);
  color: var(--ink);
}
.account-box { background: rgba(13, 17, 34, 0.8); }
.split .visual { background: linear-gradient(145deg, #131730, #0a0d1c); }
.video-card { background: #0d1122; }
.badge-pill { background: rgba(13, 17, 34, 0.7); }
.field input, .field textarea, .field select { background: rgba(10, 13, 28, 0.85); border-color: rgba(255,255,255,0.14); color: var(--ink); }
footer { background: linear-gradient(180deg, transparent, rgba(178,107,255,0.06)); }
.tl-item::before { background: #0a0d1c; box-shadow: 0 0 18px rgba(255, 215, 94, 0.7); }
.btn-gold { color: #241a00; box-shadow: 0 14px 34px rgba(212,175,55,0.35), 0 0 30px rgba(255,215,94,0.25); }
.btn-gold:hover { box-shadow: 0 20px 44px rgba(212,175,55,0.45), 0 0 46px rgba(255,215,94,0.4); }
.btn-red { box-shadow: 0 14px 30px rgba(224,47,47,0.35), 0 0 28px rgba(255,94,120,0.3); }
.lang-btn { background: rgba(13, 17, 34, 0.8); color: var(--ink-dim); border-color: rgba(255,255,255,0.14); }
#protect-flash { background: #05060f; color: var(--gold-light); }
.empty-note { background: rgba(13, 17, 34, 0.5); }
.notice { background: rgba(212,175,55,0.10); }
.admin-tabs button { background: rgba(13, 17, 34, 0.8); }
.chip { background: rgba(13, 17, 34, 0.8); color: var(--ink-dim); }
.chip.on, .chip:hover { background: var(--gold); color: #241a00; border-color: var(--gold); box-shadow: 0 0 18px rgba(255,215,94,0.5); }
.search-box input { background: rgba(10, 13, 28, 0.85); border-color: rgba(255,255,255,0.14); color: var(--ink); }
.newsletter input { background: rgba(10, 13, 28, 0.85); border-color: rgba(255,255,255,0.14); color: var(--ink); }
.footer-logos img { background: rgba(13, 17, 34, 0.8); border-color: var(--glass-border); }
.footer-logos a { display: inline-flex; border-radius: 12px; transition: transform 0.3s, box-shadow 0.3s; }
.footer-logos a:hover { transform: translateY(-4px); box-shadow: 0 0 26px rgba(53,224,255,0.4); }
.eyebrow { color: var(--gold-light); text-shadow: 0 0 14px rgba(255,215,94,0.45); }
.cinema .cinema-overlay { background: linear-gradient(180deg, transparent 0%, rgba(4, 6, 14, 0.85) 80%); }
.gallery figcaption { background: linear-gradient(transparent, rgba(3,5,12,0.9)); }
:focus-visible { outline: 2px solid var(--neon-c); }
.ministry-card .logo-wrap { background: rgba(255,255,255,0.94); }
.portal-card, #portal { display: none !important; } /* welcome portal removed */

/* index hero: Melkam Wetat cover watermark (white mark glows on dark) */
.hero::after {
  content: '';
  position: absolute;
  right: -4%; top: 10%;
  width: min(560px, 58vw);
  aspect-ratio: 1.25;
  background: url('../assets/img/cover-mw.jpg') center/contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.13;
  pointer-events: none;
  animation: floatY 9s ease-in-out infinite;
}

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  border: 1px solid var(--glass-border);
  background: rgba(13, 17, 34, 0.8);
  border-radius: 999px;
  width: 38px; height: 38px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.3s, box-shadow 0.3s;
}
.theme-toggle:hover { transform: translateY(-2px) rotate(15deg); box-shadow: 0 0 18px rgba(255,215,94,0.4); }

/* ============================================================
   LIGHT THEME (visitor-selectable via ☀️/🌙 button)
   ============================================================ */
body.theme-light {
  --bg-0: #fdfcf9; --bg-1: #f7f4ec; --bg-2: #efe9dc;
  --gold: #b8912a; --gold-light: #d4af37; --gold-dim: rgba(184,145,42,0.12);
  --ink: #1d2433; --ink-dim: #5b6478;
  --glass: rgba(255,255,255,0.8); --glass-border: rgba(30,40,80,0.12);
  --shadow-lift: 0 26px 55px -18px rgba(70,55,15,0.20);
  background:
    linear-gradient(rgba(253,252,249,0.93), rgba(253,252,249,0.97)),
    url('../assets/img/bg-candles.jpg') center/cover fixed,
    #fdfcf9;
  color: var(--ink);
}
body.theme-light #bg3d { display: none; }
body.theme-light .hero::after { display: none; }
body.theme-light ::selection { background: var(--gold-light); color: #fff; }
body.theme-light .grad-text {
  background: linear-gradient(100deg, #1d2433 10%, #b8912a 55%, #8a6d1f 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.theme-light .display {
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 0 rgba(184,145,42,0.22),
    0 4px 0 rgba(184,145,42,0.13), 0 8px 20px rgba(90,70,20,0.20);
}
body.theme-light .nav.scrolled { background: rgba(253,252,249,0.9); box-shadow: 0 10px 34px rgba(60,50,20,0.10); border-bottom: 1px solid var(--glass-border); }
body.theme-light .nav-links a:hover { color: var(--ink); background: rgba(30,40,80,0.05); text-shadow: none; }
body.theme-light .nav-links a.active { text-shadow: none; }
body.theme-light .hamburger span { background: var(--ink); }
@media (max-width: 1080px) {
  body.theme-light .nav-links { background: rgba(253,252,249,0.98) !important; border-left: 1px solid rgba(30,40,80,0.12) !important; }
}
body.theme-light .card { background: rgba(255,255,255,0.86); }
body.theme-light .card:hover { border-color: rgba(184,145,42,0.45); box-shadow: 0 30px 60px -15px rgba(70,55,15,0.22); }
body.theme-light .card::before { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(184,145,42,0.10), transparent 45%); }
body.theme-light .icon-3d { background: linear-gradient(145deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05)); border-color: rgba(184,145,42,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 22px rgba(90,70,20,0.14); }
body.theme-light .stat .value { background: linear-gradient(180deg, #1d2433 20%, #b8912a 90%); -webkit-background-clip: text; background-clip: text; }
body.theme-light .stats-band { background: linear-gradient(180deg, rgba(184,145,42,0.07), transparent); }
body.theme-light .cta-band { background: radial-gradient(700px at 50% -40%, rgba(212,175,55,0.22), transparent 65%), linear-gradient(160deg, #ffffff, #f2ecdd); border-color: rgba(184,145,42,0.35); }
body.theme-light .account-box, body.theme-light .video-card { background: #fff; }
body.theme-light .split .visual { background: linear-gradient(145deg, #ffffff, #efe9dc); }
body.theme-light .badge-pill { background: #fff; }
body.theme-light .field input, body.theme-light .field textarea, body.theme-light .field select,
body.theme-light .search-box input, body.theme-light .newsletter input { background: #fff; border-color: rgba(30,40,80,0.16); color: var(--ink); }
body.theme-light footer { background: linear-gradient(180deg, transparent, rgba(184,145,42,0.06)); }
body.theme-light .tl-item::before { background: #fff; box-shadow: 0 0 14px rgba(184,145,42,0.5); }
body.theme-light .btn-gold { color: #2a1f00; box-shadow: 0 14px 34px rgba(184,145,42,0.30); }
body.theme-light .lang-btn, body.theme-light .chip, body.theme-light .admin-tabs button, body.theme-light .theme-toggle { background: #fff; color: var(--ink-dim); border-color: rgba(30,40,80,0.14); }
body.theme-light .chip.on, body.theme-light .chip:hover { background: var(--gold); color: #fff; border-color: var(--gold); box-shadow: none; }
body.theme-light .empty-note { background: rgba(255,255,255,0.6); }
body.theme-light .notice { background: rgba(212,175,55,0.10); }
body.theme-light .footer-logos img { background: #fff; border-color: rgba(30,40,80,0.12); }
body.theme-light #protect-flash { background: #fdfcf9; color: var(--gold); }
body.theme-light .eyebrow { text-shadow: none; }
body.theme-light .card::after, body.theme-light .cta-band::after,
body.theme-light .account-box::after, body.theme-light .video-card::after { opacity: 0.35; }
body.theme-light .cinema .cinema-overlay { background: linear-gradient(180deg, transparent 0%, rgba(10,14,26,0.72) 78%); }

/* ============================================================
   DESIGN POLISH — rhythm, typography, micro-interactions
   ============================================================ */

/* Vertical rhythm: tighter, more professional flow */
section { padding: clamp(68px, 8.5vw, 100px) 0; }
.section-head { margin-bottom: 46px; }
h1, h2, h3 { text-wrap: balance; }
.lead { line-height: 1.85; }

/* Softer perpetual motion */
@keyframes titleFloat3d {
  0%, 100% { transform: perspective(900px) rotateX(0deg) translateY(0); }
  50% { transform: perspective(900px) rotateX(1.6deg) translateY(-4px); }
}

/* Nav: fit 11 items elegantly */
.nav-links { gap: 2px; }
.nav-links a { font-size: 0.845rem; padding: 8px 11px; letter-spacing: 0.01em; }
.nav-cta { padding: 9px 18px; }

/* Hero stat chips */
.hero-badges { gap: 14px; margin-top: 42px; }
.badge-pill {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 12px 20px; border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.28);
}
.badge-pill b { font-family: var(--font-head); font-size: 1.2rem; color: var(--gold-light); letter-spacing: 0.01em; }

/* Text-link button (Watch Our Story) */
.btn-link {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-dim); text-decoration: none; font-weight: 600; font-size: 0.92rem;
  padding: 14px 6px; position: relative; transition: color 0.3s;
}
.btn-link .play-dot {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 0.7rem;
  border: 1px solid rgba(212,175,55,0.45); color: var(--gold-light);
  transition: all 0.35s;
}
.btn-link:hover { color: var(--ink); }
.btn-link:hover .play-dot { background: var(--gold); color: #241a00; box-shadow: 0 0 20px rgba(255,215,94,0.55); transform: scale(1.08); }

/* Gold button sheen sweep */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 44%;
  left: -60%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transition: left 0.6s ease;
}
.btn-gold:hover::before { left: 130%; }

/* Cards: calmer glow at rest, expressive on hover */
.card { padding: 30px 27px; }
.card h3 { font-size: 1.12rem; margin: 16px 0 9px; }
.card::after, .account-box::after, .video-card::after { opacity: 0.28; }
.card:hover::after, .video-card:hover::after { opacity: 0.95; }
.cta-band::after { opacity: 0.5; }
body.theme-light .card::after, body.theme-light .account-box::after,
body.theme-light .video-card::after { opacity: 0.22; }

/* Subtle alternating section tint for reading rhythm */
.page-wrap > section:nth-of-type(even):not(.stats-band):not(.cinema) {
  background: linear-gradient(180deg, rgba(255,255,255,0.016), transparent 70%);
}
body.theme-light .page-wrap > section:nth-of-type(even):not(.stats-band):not(.cinema) {
  background: linear-gradient(180deg, rgba(30,40,80,0.025), transparent 70%);
}

/* Gallery captions slide up on hover */
.gallery figcaption { transform: translateY(6px); opacity: 0.85; transition: transform 0.4s, opacity 0.4s; }
.gallery figure:hover figcaption { transform: translateY(0); opacity: 1; }

/* Stats band breathing room */
.stats-band { padding: 58px 0 !important; }
.stat .label { font-size: 0.85rem; letter-spacing: 0.03em; }

/* Footer polish */
.footer-grid { gap: 44px 36px; }
.footer-grid a { line-height: 1.9; }
.footer-bottom { font-size: 0.79rem; letter-spacing: 0.02em; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #07090f; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3a3420, #1c202e); border-radius: 8px; border: 2px solid #07090f; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold), #574a1a); }
body.theme-light::-webkit-scrollbar-track { background: #efece4; }
body.theme-light::-webkit-scrollbar-thumb { background: #cfc7b2; border-color: #efece4; }

/* Cinema heading glow */
.cinema h2 { text-shadow: 0 4px 24px rgba(0,0,0,0.7), 0 0 40px rgba(255,215,94,0.25); }

/* Ministry cards: lift logos */
.ministry-card .logo-wrap { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 18px 40px rgba(0,0,0,0.45); }
.ministry-card:hover .logo-wrap { transform: translateY(-4px) scale(1.03); transition: transform 0.4s; }
.ministry-card .logo-wrap { transition: transform 0.4s; }

/* Event & voice cards align */
.event-card .ev-body h3 { margin: 0; }
.voice-card p { font-style: italic; }

/* ---------- Social profile cards (Marsil TV Worldwide) ---------- */
.social-cards { display: grid; gap: 10px; margin-top: 20px; max-width: 340px; }
.social-card {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 15px; border-radius: 14px;
  background: rgba(13, 17, 34, 0.8);
  border: 1px solid var(--glass-border);
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.social-card:hover { transform: translateX(5px); }
.social-card .sc-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
}
.social-card .sc-icon svg { width: 21px; height: 21px; fill: #fff; }
.social-card .sc-body { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.social-card .sc-body b { color: var(--ink); font-size: 0.8rem; font-family: var(--font-head); letter-spacing: 0.05em; white-space: nowrap; }
.social-card .sc-body small { color: var(--ink-dim); font-size: 0.72rem; }
.social-card.yt .sc-icon { background: #ff0000; }
.social-card.yt:hover { border-color: #ff4d4d; box-shadow: 0 0 22px rgba(255,0,0,0.35); }
.social-card.fb .sc-icon { background: #1877f2; }
.social-card.fb:hover { border-color: #5ea2ff; box-shadow: 0 0 22px rgba(24,119,242,0.4); }
.social-card.tk .sc-icon { background: #000; border: 1px solid #2af0ea; }
.social-card.tk:hover { border-color: #2af0ea; box-shadow: 0 0 22px rgba(42,240,234,0.35); }
.social-card.ig .sc-icon { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-card.ig:hover { border-color: #d6249f; box-shadow: 0 0 22px rgba(214,36,159,0.4); }
.social-card.tg .sc-icon { background: #229ED9; }
.social-card.tg:hover { border-color: #58c2f0; box-shadow: 0 0 22px rgba(34,158,217,0.4); }
body.theme-light .social-card { background: #fff; border-color: rgba(30,40,80,0.12); }
body.theme-light .social-card:hover { box-shadow: 0 10px 26px rgba(60,50,20,0.16); }

/* ---------- Welcome audio player (home hero) ---------- */
.audio-widget {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: 26px; padding: 13px 22px 13px 13px;
  border-radius: 999px;
  background: rgba(13, 17, 34, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  backdrop-filter: blur(12px);
  max-width: 100%;
}
.audio-play {
  width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #241a00; font-size: 1rem; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(255, 215, 94, 0.5);
  transition: transform 0.3s;
}
.audio-play:hover { transform: scale(1.08); }
.audio-play.playing { animation: audioPulse 1.8s ease-out infinite; }
@keyframes audioPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 215, 94, 0.5); }
  100% { box-shadow: 0 0 0 20px rgba(255, 215, 94, 0); }
}
.audio-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.audio-info b { font-family: var(--font-head); font-size: 0.88rem; color: var(--ink); line-height: 1.3; }
.audio-info small { font-size: 0.72rem; color: var(--ink-dim); }
.audio-bar { width: min(260px, 48vw); height: 4px; border-radius: 4px; background: rgba(255,255,255,0.14); overflow: hidden; }
#audioProg { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 4px; transition: width 0.25s linear; box-shadow: 0 0 10px rgba(255,215,94,0.6); }
body.theme-light .audio-widget { background: #fff; border-color: rgba(184,145,42,0.35); }
body.theme-light .audio-bar { background: rgba(30,40,80,0.12); }

/* ---------- TV service badges + playlist cards ---------- */
.tv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 8px;
  font-family: var(--font-head); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em;
}
.tv-badge.ethiosat { background: linear-gradient(120deg, #0b3d6b, #1266ad); color: #ffd75e; border: 1px solid #2a7fc9; box-shadow: 0 0 16px rgba(18,102,173,0.45); }
.tv-badge.dstv { background: #003b7e; color: #fff; font-style: italic; border: 1px solid #2a6ab5; box-shadow: 0 0 16px rgba(0,59,126,0.5); }
.tv-badge.live24 { background: rgba(224,47,47,0.15); color: #ff6b6b; border: 1px solid rgba(224,47,47,0.5); animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,47,47,0.4); } 50% { box-shadow: 0 0 14px 3px rgba(224,47,47,0.25); } }
.pl-count {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(0,0,0,0.85); color: #fff;
  font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 6px;
}
.pl-playover {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2.4rem; color: #fff; background: rgba(5,6,15,0.35);
  opacity: 0; transition: opacity 0.3s;
  text-shadow: 0 0 24px rgba(255,215,94,0.9);
}
.pl-thumb:hover .pl-playover { opacity: 1; }
.pl-card { transition: transform 0.35s, box-shadow 0.35s; }
.pl-card:hover { transform: translateY(-5px); }

/* ================================================================
   v15 — SCREENSHOT FIX PACK: logo, framing, motion, subscription
   ================================================================ */

/* ---------- Real brand logo in the nav badge ---------- */
.logo-badge {
  background: transparent !important;
  box-shadow: none !important;
  display: grid; place-items: center;
  overflow: visible;
  padding: 0;
}
.logo-badge img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  animation: badgeFloat 6s ease-in-out infinite;
}
@keyframes badgeFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-2deg); } }
.brand:hover .logo-badge img { animation: badgeSpin 1.1s cubic-bezier(.3,1.4,.4,1); }
@keyframes badgeSpin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.footer-logos img, .ministry-card .logo-wrap img { object-fit: contain; background: transparent; }

/* ---------- Portraits: never crop the person ---------- */
.split .visual.photo.portrait { background: linear-gradient(160deg, rgba(212,175,55,0.10), rgba(53,224,255,0.06)); padding: 14px; }
.split .visual.photo.portrait img {
  height: auto; min-height: 0; max-height: none;
  object-fit: contain; border-radius: 18px;
  max-width: 100%;
}
.img-frame img.contain { object-fit: contain; background: rgba(255,255,255,0.03); }

/* ---------- Big numbers must never clip ---------- */
.stats-band .stat { min-width: 0; overflow: visible; }
.stat .value {
  white-space: nowrap;
  overflow: visible;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.18;
  padding: 0 2px 6px;
  letter-spacing: -0.01em;
}
.grid.g4 { gap: 20px; }
@media (max-width: 900px) { .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Audio: seekable timeline ---------- */
.audio-bar { position: relative; cursor: pointer; height: 8px; border-radius: 99px; }
.audio-bar #audioProg { height: 100%; border-radius: 99px; }
#audioKnob {
  position: absolute; top: 50%; left: 0; width: 0; height: 0;
}
.audio-time {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; opacity: 0.7; margin-top: 5px; font-variant-numeric: tabular-nums;
}
.audio-widget { min-width: 320px; }

/* ---------- Community: threaded replies ---------- */
.voice-replies { margin: 12px 0 6px; padding-left: 14px; border-left: 2px solid rgba(212,175,55,0.35); display: grid; gap: 10px; }
.voice-reply p { margin: 0 0 2px; font-size: 0.88rem; }
.voice-reply .voice-meta { font-size: 0.74rem; }
.voice-reply-form { display: grid; gap: 8px; margin-top: 12px; }
.voice-reply-form input, .voice-reply-form textarea {
  width: 100%; padding: 9px 12px; border-radius: 12px; font: inherit; font-size: 0.86rem;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); color: inherit;
}
.voice-reply-form textarea { min-height: 70px; resize: vertical; }
body.theme-light .voice-reply-form input, body.theme-light .voice-reply-form textarea { background: #fff; }

/* ---------- Church HQ block ---------- */
.hq-block { margin-top: 18px; display: grid; gap: 10px; }
.hq-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 1.02rem; }
.hq-line .hq-k {
  font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); min-width: 118px;
}
.hq-line b { font-size: 1.05rem; letter-spacing: 0.01em; }
.tv-logos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.church-hero { position: relative; }
.church-hero h1, .church-hero p, .church-hero .btn-row, .church-hero .eyebrow { position: relative; z-index: 2; }

/* ---------- YouTube auto-feed cards ---------- */
.yt-card { display: block; text-decoration: none; color: inherit; overflow: hidden; }
.yt-card .vc-title { font-size: 0.9rem; line-height: 1.4; }
.yt-card:hover { transform: translateY(-5px); }
.yt-card { transition: transform 0.35s, box-shadow 0.35s; }

/* ================= MOTION DESIGN LAYER ================= */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes glowPulse { 0%,100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.08); } }
@keyframes shimmerSweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(38px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes drawLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes orbit { from { transform: rotate(0) translateX(46px) rotate(0); } to { transform: rotate(360deg) translateX(46px) rotate(-360deg); } }

/* Timeline: line draws itself, dots pop in sequence */
.tl-item { position: relative; }
.timeline, .tl-wrap { position: relative; }
.timeline::before, .tl-wrap::before { transform-origin: top; animation: drawLine 1.4s ease forwards; }
.tl-item.in { animation: riseIn 0.7s cubic-bezier(.2,.9,.3,1.2) both; }
.tl-item.in:nth-child(2) { animation-delay: 0.1s; }
.tl-item.in:nth-child(3) { animation-delay: 0.2s; }
.tl-item.in:nth-child(4) { animation-delay: 0.3s; }
.tl-item.in:nth-child(5) { animation-delay: 0.4s; }
.tl-item::before { transition: box-shadow 0.4s, transform 0.4s; }
.tl-item:hover::before { transform: scale(1.4); box-shadow: 0 0 0 6px rgba(212,175,55,0.18), 0 0 22px rgba(212,175,55,0.7); }

/* Hero title: light sweeps across the gradient words */
.grad-text {
  background-size: 200% auto !important;
  animation: shimmerSweep 6s linear infinite;
}

/* Photos: parallax lift + light sheen on hover */
.visual.photo, .img-frame { position: relative; overflow: hidden; }
.visual.photo::before, .img-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  background-size: 250% 100%; background-position: -120% 0;
  transition: background-position 0.9s ease;
}
.visual.photo:hover::before, .img-frame:hover::before { background-position: 220% 0; }
.visual.photo img, .img-frame img { transition: transform 0.9s cubic-bezier(.2,.8,.3,1); }
.visual.photo:hover img, .img-frame:hover img { transform: scale(1.045); }

/* Campus building: animated construction/architecture accent */
.build-stage { position: relative; }
.build-stage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--neon-c), transparent);
  animation: shimmerSweep 3.4s linear infinite; background-size: 200% 100%;
}
.orbit-ring { position: absolute; inset: -8%; pointer-events: none; z-index: 0; }
.orbit-ring i {
  position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 99px;
  background: var(--gold); box-shadow: 0 0 16px var(--gold);
  animation: orbit 11s linear infinite;
}
.orbit-ring i:nth-child(2) { background: var(--neon-c); box-shadow: 0 0 16px var(--neon-c); animation-duration: 15s; animation-delay: -4s; }
.orbit-ring i:nth-child(3) { animation-duration: 19s; animation-delay: -9s; opacity: 0.7; }

/* ---------- 3D BOOK SHOWCASE (pastor page) ---------- */
.books-3d { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; perspective: 1600px; }
.book3d {
  position: relative;
  display: grid; grid-template-columns: 150px 1fr; gap: 26px; align-items: center;
  padding: 30px 26px; border-radius: 24px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(150deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  overflow: hidden;
}
body.theme-light .book3d { background: linear-gradient(150deg, #ffffff, #f4efe3); }
.book3d::after {
  content: ''; position: absolute; inset: -1px; border-radius: 24px; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(212,175,55,0.5), rgba(53,224,255,0.4), transparent);
  background-size: 300% 100%; opacity: 0; transition: opacity 0.45s;
  animation: shimmerSweep 5s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.book3d:hover::after { opacity: 1; }
.book-cover {
  position: relative; width: 150px; height: 216px;
  transform-style: preserve-3d; transform: rotateY(-26deg) rotateX(4deg);
  transition: transform 0.85s cubic-bezier(.2,.9,.3,1.25);
  animation: floatY 7s ease-in-out infinite;
}
.book3d:hover .book-cover { transform: rotateY(-6deg) rotateX(2deg) scale(1.06); }
.book-cover .face {
  position: absolute; inset: 0; border-radius: 4px 10px 10px 4px;
  background: linear-gradient(140deg, #1b1f36, #0d1020);
  border: 1px solid rgba(212,175,55,0.45);
  box-shadow: 0 26px 50px rgba(0,0,0,0.55), inset 0 0 40px rgba(212,175,55,0.10);
  display: grid; place-items: center; text-align: center; padding: 18px 14px;
  overflow: hidden;
}
.book-cover .face img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.book-cover .face .bt {
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; line-height: 1.35;
  background: linear-gradient(180deg, #fff 5%, var(--gold-light) 55%, #a67c12 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 14px rgba(212,175,55,0.35);
}
.book-cover .spine {
  position: absolute; left: -13px; top: 0; bottom: 0; width: 14px;
  transform: rotateY(-90deg); transform-origin: right center;
  background: linear-gradient(90deg, #0a0c18, #2a2f4d);
  border-radius: 3px 0 0 3px;
}
.book-cover .glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 48%, transparent 62%);
  background-size: 250% 100%; background-position: -130% 0;
  transition: background-position 1.1s ease;
}
.book3d:hover .glare { background-position: 230% 0; }
.book-cover::before {
  content: ''; position: absolute; inset: -34px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.32), transparent 68%);
  animation: glowPulse 4.6s ease-in-out infinite;
}
.book-meta h3 { margin: 0 0 4px; font-size: 1.15rem; }
.book-meta .btag { color: var(--gold); font-weight: 700; font-size: 0.86rem; display: block; margin-bottom: 10px; }
.book-sample {
  margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  background: rgba(212,175,55,0.08); border-left: 3px solid var(--gold);
  font-style: italic; font-size: 0.88rem; line-height: 1.65;
}
@media (max-width: 560px) { .book3d { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ---------- Subscription / partnership band ---------- */
.sub-band {
  position: relative; overflow: hidden;
  margin: 60px 0 0; padding: 46px 34px; border-radius: 28px; text-align: center;
  border: 1px solid rgba(212,175,55,0.35);
  background: linear-gradient(140deg, rgba(212,175,55,0.14), rgba(53,224,255,0.07));
}
.sub-band::before {
  content: ''; position: absolute; inset: -50%; z-index: 0;
  background: conic-gradient(from 0deg, transparent, rgba(212,175,55,0.20), transparent 40%);
  animation: subSpin 9s linear infinite;
}
@keyframes subSpin { to { transform: rotate(360deg); } }
.sub-band > * { position: relative; z-index: 1; }
.sub-band h3 { margin: 0 0 8px; font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.sub-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 26px 0 22px; }
.sub-tier {
  padding: 22px 18px; border-radius: 18px; cursor: pointer; text-align: center;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.05);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
body.theme-light .sub-tier { background: #fff; }
.sub-tier:hover, .sub-tier.on { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.28), 0 18px 34px rgba(0,0,0,0.25); }
.sub-tier .amt { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: var(--gold); display: block; }
.sub-tier .per { font-size: 0.74rem; opacity: 0.75; letter-spacing: 0.08em; text-transform: uppercase; }
.sub-note { font-size: 0.8rem; opacity: 0.78; max-width: 640px; margin: 16px auto 0; line-height: 1.7; }
.sub-manage { font-size: 0.82rem; margin-top: 10px; }
.sub-manage a { color: var(--gold); font-weight: 700; }

/* ---------- Admin post types on the site ---------- */
.vc-verse {
  position: relative; padding: 34px 26px 26px; text-align: center;
  background: linear-gradient(150deg, rgba(212,175,55,0.12), rgba(53,224,255,0.05));
}
.vc-verse .vc-quote { position: absolute; top: 4px; left: 16px; font-size: 4rem; line-height: 1; color: rgba(212,175,55,0.35); font-family: Georgia, serif; }
.vc-verse p { font-size: 1.05rem; line-height: 1.75; font-style: italic; margin: 0 0 14px; }
.vc-verse .vc-ref { font-family: var(--font-head); font-weight: 800; color: var(--gold); font-size: 0.88rem; letter-spacing: 0.04em; }
.vc-blog { padding: 26px; }
.vc-blog h3 { margin: 0 0 12px; font-size: 1.15rem; }
.vc-blog p { font-size: 0.92rem; line-height: 1.8; margin: 0 0 12px; }
.blog-card, .verse-card { display: block; }

/* ---------- v15.1 — bigger, never-clipped logos ---------- */
.brand { gap: 14px; }
.logo-badge {
  width: 62px !important; height: 62px !important;
  min-width: 62px; min-height: 62px;
  border-radius: 0 !important;
  overflow: visible !important;
  flex-shrink: 0;
}
.logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.brand > span:last-child { line-height: 1.15; }
.brand > span:last-child small { display: block; }
@media (max-width: 1100px) { .logo-badge { width: 52px !important; height: 52px !important; min-width: 52px; min-height: 52px; } }

/* ministry cards: full-size emblems */
.ministry-card .logo-wrap {
  width: 170px; height: 170px;
  background: transparent !important;
  border: 0 !important; box-shadow: none !important;
  overflow: visible;
}
.ministry-card .logo-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.45));
  transition: transform 0.6s cubic-bezier(.2,.9,.3,1.3);
}
.ministry-card:hover .logo-wrap img { transform: translateY(-6px) scale(1.07); }

/* footer emblem row */
.footer-logos { gap: 22px; align-items: center; }
.footer-logos img {
  width: 72px; height: 72px; object-fit: contain;
  background: transparent; border: 0; padding: 0; border-radius: 0;
  transition: transform 0.4s, filter 0.4s;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}
.footer-logos a:hover img { transform: translateY(-4px) scale(1.08); }

/* church + marsil hero emblems */
.hero-page img[src*="logo-church-icon"], .hero-page img[src*="logo-marsil-icon"] {
  width: 130px !important; height: 130px !important; object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.5));
  animation: badgeFloat 7s ease-in-out infinite;
}
/* the church emblem is line art on white — keep it readable on the dark theme */
body:not(.theme-light) img[src*="logo-church-icon"] {
  background: rgba(255,255,255,0.94);
  border-radius: 50%;
  padding: 8px;
}

/* ================================================================
   v17 — BIOGRAPHY PAGE: cinematic motion design
   ================================================================ */
.bio-page { overflow-x: clip; }

/* ---------- Hero ---------- */
.bio-hero { position: relative; overflow: hidden; padding-bottom: 90px; }
.bio-hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 78% 12%, rgba(212,175,55,0.20), transparent 62%),
    radial-gradient(620px 500px at 8% 92%, rgba(53,224,255,0.13), transparent 62%);
  animation: bioAurora 16s ease-in-out infinite alternate;
}
@keyframes bioAurora {
  0%   { transform: scale(1) translate3d(0,0,0); opacity: 0.85; }
  50%  { transform: scale(1.12) translate3d(-2%, 1.5%, 0); opacity: 1; }
  100% { transform: scale(1.05) translate3d(2%, -1%, 0); opacity: 0.9; }
}
.bio-hero .container { position: relative; z-index: 1; }
.bio-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .bio-hero-grid { grid-template-columns: 1fr; gap: 44px; } }

.bio-portrait { position: relative; display: grid; place-items: center; }
.bio-portrait-frame {
  position: relative; z-index: 2;
  border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(212,175,55,0.4);
  box-shadow: 0 34px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;
  animation: floatY 8s ease-in-out infinite;
  max-width: 400px;
}
.bio-portrait-frame img { width: 100%; height: auto; display: block; }
.bio-portrait-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.24) 50%, transparent 66%);
  background-size: 260% 100%; background-position: -140% 0;
  animation: shimmerSweep 7s linear infinite;
}
.bio-portrait .orbit-ring { inset: -12%; z-index: 1; }

/* ---------- Story prose ---------- */
.bio-story { position: relative; }
.bio-prose { max-width: 900px; }
.bio-prose p { font-size: 1.06rem; line-height: 2.05; }
.bio-prose p.drop::first-letter {
  float: left; font-family: var(--font-head); font-weight: 800;
  font-size: 4.2rem; line-height: 0.82; padding: 8px 16px 0 0;
  background: linear-gradient(180deg, var(--gold-light), #a67c12);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bio-prose::before {
  content: ''; position: absolute; left: 0; top: 20%; width: 3px; height: 0;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  animation: railGrow 2.2s ease forwards; animation-timeline: view();
}
@keyframes railGrow { to { height: 60%; } }

/* ---------- Family / tribute ---------- */
.tribute {
  position: relative; margin: 34px 0 0; padding: 34px 30px 28px 46px;
  border-radius: 22px; border: 1px solid rgba(212,175,55,0.3);
  background: linear-gradient(150deg, rgba(212,175,55,0.10), rgba(53,224,255,0.04));
  overflow: hidden;
}
.tribute::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  background-size: 280% 100%; background-position: -160% 0;
  animation: shimmerSweep 9s linear infinite;
}
.tribute-mark {
  position: absolute; left: 12px; top: -6px;
  font-family: Georgia, serif; font-size: 5.6rem; line-height: 1;
  color: rgba(212,175,55,0.4);
  animation: floatY 6s ease-in-out infinite;
}
.tribute blockquote { margin: 0 0 14px; font-style: italic; font-size: 1rem; line-height: 1.95; }
.tribute figcaption { font-family: var(--font-head); font-weight: 700; color: var(--gold); font-size: 0.88rem; }

.family-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
  perspective: 1400px;
}
.fam {
  position: relative; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(212,175,55,0.28);
  box-shadow: 0 26px 54px rgba(0,0,0,0.48);
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(.2,.9,.3,1.25), box-shadow 0.6s;
}
.fam img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.2,.8,.3,1); }
.fam figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 14px;
  font-size: 0.78rem; line-height: 1.5; font-weight: 600;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  background: linear-gradient(transparent, rgba(4,6,14,0.86));
  opacity: 0; translate: 0 10px; transition: opacity 0.45s, translate 0.45s;
}
.fam:hover figcaption { opacity: 1; translate: 0 0; }
.fam:hover img { transform: scale(1.06); }
.fam:hover { transform: translateY(-8px) rotateX(3deg); box-shadow: 0 34px 66px rgba(0,0,0,0.6); }
.fam::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.20) 50%, transparent 66%);
  background-size: 260% 100%; background-position: -150% 0;
  transition: background-position 1s ease;
}
.fam:hover::after { background-position: 230% 0; }
/* editorial 5-photo mosaic */
.fam-a { grid-column: 1 / -1; aspect-ratio: 16/10; animation: floatY 10s ease-in-out infinite; }
.fam-b { grid-column: 1 / -1; aspect-ratio: 16/10; animation: floatY 13s ease-in-out infinite reverse; }
.fam-c { grid-column: 1 / -1; aspect-ratio: 16/9;  animation: floatY 11s ease-in-out infinite; }
.fam-d { aspect-ratio: 3/4; animation: floatY 12s ease-in-out infinite reverse; }
.fam-e { aspect-ratio: 3/4; animation: floatY 14s ease-in-out infinite; }
.fam-ribbon {
  grid-column: 1 / -1; margin-top: 4px; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.04em;
  color: var(--gold); opacity: 0.9;
}
@media (max-width: 700px) {
  .family-gallery { grid-template-columns: 1fr; }
  .fam { animation: none !important; }
  .fam figcaption { opacity: 1; translate: 0 0; }
}

/* ---------- Metrics ---------- */
.bio-metrics { gap: 18px; }
.metric {
  text-align: center; padding: 28px 16px; border-radius: 20px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
}
body.theme-light .metric { background: #fff; }
.metric::before {
  content: ''; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(212,175,55,0.55), rgba(53,224,255,0.45), transparent);
  background-size: 300% 100%; animation: shimmerSweep 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.55;
}
.metric .mv {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.4rem); white-space: nowrap;
  background: linear-gradient(180deg, #fff 10%, var(--gold-light) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.theme-light .metric .mv { background: linear-gradient(180deg, #1d2433 20%, #b8912a 90%); -webkit-background-clip: text; background-clip: text; }
.metric .ml { display: block; font-size: 0.78rem; opacity: 0.8; margin-top: 6px; line-height: 1.5; }

/* ---------- BOOK FEATURES ---------- */
.bio-books { position: relative; }
.book-feature {
  display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: center;
  margin: 70px 0; perspective: 1800px;
}
.book-feature.alt { grid-template-columns: 1fr 380px; }
.book-feature.alt .book-shell { order: 2; }
.book-feature.alt .book-text { order: 1; }
@media (max-width: 880px) {
  .book-feature, .book-feature.alt { grid-template-columns: 1fr; gap: 40px; }
  .book-feature.alt .book-shell { order: 0; } .book-feature.alt .book-text { order: 1; }
}

.book-shell {
  position: relative; display: grid; place-items: center;
  padding: 20px 46px 44px;
  transform-style: preserve-3d;
  isolation: isolate;
}
.book-obj, .bk-front, .bk-spine, .bk-pages, .bk-shine { backface-visibility: hidden; }
.book-obj {
  position: relative; width: 280px; aspect-ratio: 2/2.85;
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(6deg);
  transition: transform 1s cubic-bezier(.2,.9,.3,1.25);
  animation: bookFloat 8s ease-in-out infinite;
}
@keyframes bookFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
.book-feature:hover .book-obj { transform: rotateY(-6deg) rotateX(2deg) scale(1.05); }
.bk-front {
  position: absolute; inset: 0; border-radius: 3px 12px 12px 3px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.09) inset;
  transform: translateZ(16px);
}
.bk-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 32px;
  transform: rotateY(-90deg) translateZ(16px); transform-origin: left center;
  background: linear-gradient(90deg, #05070f, #23283f 60%, #0b0e1a);
  border-radius: 3px 0 0 3px;
}
.bk-pages {
  position: absolute; right: 0; top: 2.5%; bottom: 2.5%; width: 30px;
  transform: rotateY(90deg) translateZ(-14px); transform-origin: right center;
  background: repeating-linear-gradient(90deg, #efe7d5, #efe7d5 2px, #cfc4ac 2px, #cfc4ac 3px);
  border-radius: 0 3px 3px 0;
  backface-visibility: hidden;
}
.bk-shine {
  position: absolute; inset: 0; border-radius: 3px 12px 12px 3px; pointer-events: none;
  transform: translateZ(17px);
  background: linear-gradient(112deg, transparent 32%, rgba(255,255,255,0.30) 48%, transparent 64%);
  background-size: 260% 100%; background-position: -150% 0;
  animation: shimmerSweep 6.5s linear infinite;
}
.book-floor {
  position: absolute; bottom: 6px; left: 50%; translate: -50% 0;
  width: 260px; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(7px); animation: floorPulse 8s ease-in-out infinite;
}
@keyframes floorPulse { 0%,100% { width: 260px; opacity: 0.55; } 50% { width: 210px; opacity: 0.34; } }
.book-shell::before {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.26), transparent 68%);
  animation: glowPulse 6s ease-in-out infinite; z-index: -1;
}

.book-text { position: relative; z-index: 3; }
.book-text .bk-num {
  font-family: var(--font-head); font-weight: 800; font-size: 3.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(212,175,55,0.5);
  display: block; margin-bottom: 4px;
}
.book-text h3 { margin: 0 0 6px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.book-text h3 small { display: block; font-size: 0.9rem; font-weight: 600; opacity: 0.7; letter-spacing: 0.1em; margin-top: 6px; }
.bk-sub { display: block; color: var(--gold); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.06em; margin-bottom: 16px; }
.bk-lead { font-size: 1.02rem; line-height: 1.85; margin-bottom: 22px; }
.bk-excerpt {
  position: relative; padding: 24px 26px; border-radius: 18px;
  border-left: 3px solid var(--gold);
  background: rgba(212,175,55,0.07);
}
.bk-excerpt p { font-size: 0.93rem; line-height: 1.95; font-style: italic; margin: 0 0 12px; }
.bk-excerpt cite { font-style: normal; font-weight: 700; color: var(--gold); font-size: 0.82rem; }
.ex-label {
  position: absolute; top: -11px; left: 22px; padding: 3px 12px; border-radius: 99px;
  font-family: var(--font-head); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--gold); color: #10131f; font-weight: 800;
}
.bk-quote {
  margin-top: 22px; padding: 20px 24px; border-radius: 16px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.7;
  background: linear-gradient(120deg, rgba(212,175,55,0.16), rgba(53,224,255,0.07));
  border: 1px solid rgba(212,175,55,0.3);
  position: relative; overflow: hidden;
}
.bk-quote::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,0.18) 50%, transparent 58%);
  background-size: 300% 100%; animation: shimmerSweep 8s linear infinite;
}

/* ---------- Closing master quote ---------- */
.bio-close { padding-bottom: 20px; }
.master-quote {
  position: relative; max-width: 900px; margin: 0 auto; text-align: center;
  padding: 60px 40px 46px; border-radius: 30px; overflow: hidden;
  border: 1px solid rgba(212,175,55,0.34);
  background: linear-gradient(150deg, rgba(212,175,55,0.13), rgba(53,224,255,0.06));
}
.master-quote::before {
  content: ''; position: absolute; inset: -60%; z-index: 0;
  background: conic-gradient(from 0deg, transparent, rgba(212,175,55,0.18), transparent 42%);
  animation: subSpin 14s linear infinite;
}
.master-quote > * { position: relative; z-index: 1; }
.mq-mark {
  display: block; font-family: Georgia, serif; font-size: 5rem; line-height: 0.6;
  color: rgba(212,175,55,0.55); margin-bottom: 18px;
  animation: floatY 5.5s ease-in-out infinite;
}
.master-quote p {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.85rem); line-height: 1.65; margin: 0 0 20px;
  background: linear-gradient(100deg, var(--gold-light) 0%, #fff 30%, var(--gold-light) 60%, #fff 100%);
  background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerSweep 9s linear infinite;
}
body.theme-light .master-quote p { background: linear-gradient(100deg, #b8912a, #1d2433 40%, #b8912a 80%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; }
.master-quote cite { font-style: normal; font-weight: 700; color: var(--gold); font-size: 0.92rem; letter-spacing: 0.05em; }

@media (prefers-reduced-motion: reduce) {
  .bio-hero-bg, .bio-portrait-frame, .bio-portrait-frame::after, .book-obj, .bk-shine,
  .tribute::after, .tribute-mark, .master-quote::before, .master-quote p, .mq-mark,
  .family-card, .book-floor, .metric::before, .bk-quote::after { animation: none !important; }
}

/* 5-photo biography gallery layout */
.family-gallery { grid-template-columns: repeat(6, 1fr); }
.fam-couple { grid-column: span 6; }
.fam-family { grid-column: span 3; }
.fam-side   { grid-column: span 2; }
.fam-side:nth-of-type(3) { grid-column: span 3; }
@media (max-width: 900px) {
  .family-gallery { grid-template-columns: repeat(2, 1fr); }
  .fam-couple { grid-column: span 2; }
  .fam-family, .fam-side, .fam-side:nth-of-type(3) { grid-column: span 1; }
}
@media (max-width: 620px) {
  .family-gallery { grid-template-columns: 1fr; }
  .fam-couple, .fam-family, .fam-side, .fam-side:nth-of-type(3) { grid-column: span 1; }
}

/* ---------- v19.1 — clean gallery: no caption overlay on the photos ---------- */
.gallery figcaption { display: none !important; }
.gallery figure { overflow: hidden; }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================================================================
   v26 — COVER BANNER: 24 x 3 in strip, pinned under the menu
   Canvas 7680 x 960 px (8K) · safe area 4640 x 730 px centred
   ================================================================ */
:root {
  --nav-h: 102px;      /* nav at rest */
  --nav-h-sm: 86px;    /* nav once the page is scrolled */
  --bn-h: min(calc(100vw / 8), 20vh);
}
.cover-banner {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  height: var(--bn-h);
  z-index: 90;
  overflow: hidden;
  background: #05070f;
  isolation: isolate;
  opacity: 0;
  transition: opacity 0.6s ease, top 0.4s ease;
  border-bottom: 1px solid rgba(212,175,55,0.28);
}
.cover-banner.ready { opacity: 1; }
.nav.scrolled + .cover-banner { top: var(--nav-h-sm); }
/* reserves the strip in normal flow so nothing hides behind it */
.cover-banner-spacer { height: calc(var(--nav-h) + var(--bn-h)); flex: none; }

.bn-track { position: absolute; inset: 0; }
.bn-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s ease, transform 9s linear;
  transform: scale(1.05);
}
.bn-slide.on { opacity: 1; visibility: visible; transform: scale(1); z-index: 1; }
.bn-slide img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: -webkit-optimize-contrast; }

/* centred 1546 x 423 safe area (60.4% x 79.4% of the 2560 x 533 canvas) */
.bn-safe {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  width: 60.4%; height: 76%;
  display: grid; align-content: center; justify-items: center;
  text-align: center; padding: 0 10px;
}
.bn-copy { max-width: 100%; }
.bn-copy h2 {
  margin: 0 0 4px;
  font-size: clamp(0.8rem, 1.5vw, 1.55rem);
  line-height: 1.14; color: #fff;
  text-shadow: 0 4px 26px rgba(0,0,0,0.9), 0 0 60px rgba(0,0,0,0.55);
  animation: bnRise 0.9s cubic-bezier(.2,.9,.3,1.2) both;
}
.bn-slide.on .bn-copy h2 { animation-delay: 0.2s; }
.bn-copy p {
  margin: 0 0 8px;
  font-size: clamp(0.55rem, 0.8vw, 0.8rem);
  line-height: 1.4; color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 16px rgba(0,0,0,0.9);
  animation: bnRise 0.9s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: 0.35s;
}
.bn-copy .btn { animation: bnRise 0.9s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: 0.5s; padding: 6px 16px; font-size: 0.72rem; }
@keyframes bnRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cover-banner::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 78% at 50% 50%, rgba(0,0,0,0.30), transparent 74%),
    linear-gradient(180deg, rgba(4,6,14,0.30) 0%, transparent 34%, transparent 62%, rgba(4,6,14,0.52) 100%);
}
.cover-banner::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--gold), var(--neon-c), var(--gold), transparent);
  background-size: 200% 100%;
  animation: shimmerSweep 5s linear infinite;
}

.bn-dots {
  position: absolute; left: 50%; translate: -50% 0; bottom: 9px; z-index: 5;
  display: flex; gap: 7px;
}
.bn-dots button {
  width: 22px; height: 3px; border-radius: 99px; border: 0; cursor: pointer; padding: 0;
  background: rgba(255,255,255,0.4); transition: background 0.35s, width 0.35s;
}
.bn-dots button.on { background: var(--gold); width: 36px; box-shadow: 0 0 12px rgba(212,175,55,0.85); }
.bn-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(6,9,18,0.45); backdrop-filter: blur(8px);
  color: #fff; font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center;
  opacity: 0; transition: opacity 0.35s, background 0.35s, transform 0.35s;
}
.cover-banner:hover .bn-nav { opacity: 1; }
.bn-nav:hover { background: var(--gold); color: #10131f; transform: translateY(-50%) scale(1.08); }
.bn-nav.prev { left: 14px; }
.bn-nav.next { right: 14px; }

@media (max-width: 900px) {
  :root { --nav-h: 86px; --nav-h-sm: 74px; --bn-h: min(calc(100vw / 8), 15vh); }
  .bn-safe { width: 82%; height: 88%; }
  .bn-nav { display: none; }
  .bn-copy p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-slide, .bn-copy h2, .bn-copy p, .bn-copy .btn, .cover-banner::before {
    animation: none !important; transition: opacity 0.3s !important; transform: none !important;
  }
}

/* admin preview of the safe area */
.bn-guide { position: relative; }
.bn-guide::after {
  content: 'SAFE AREA 4640 × 730';
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 60.4%; height: 76%;
  border: 2px dashed rgba(212,175,55,0.9);
  color: rgba(212,175,55,0.95); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  display: grid; place-items: end center; padding-bottom: 4px;
  pointer-events: none;
}

/* ================================================================
   v23 — DIAL 6300 (Ethiopia) donation widget
   ================================================================ */
.dial-launcher {
  position: fixed; right: 0; top: 52%; z-index: 60;
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px 14px 18px;
  border-radius: 16px 0 0 16px;
  border: 1px solid rgba(212,175,55,0.5); border-right: 0;
  background: linear-gradient(140deg, rgba(212,175,55,0.95), rgba(166,124,18,0.95));
  color: #10131f; font-family: var(--font-head); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.06em; cursor: pointer;
  box-shadow: -8px 10px 30px rgba(0,0,0,0.45);
  transition: transform 0.4s cubic-bezier(.2,.9,.3,1.3), box-shadow 0.4s;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.dial-launcher:hover { transform: translateX(-5px); box-shadow: -12px 14px 38px rgba(0,0,0,0.55); }
.dial-launcher .dl-ring {
  writing-mode: horizontal-tb; font-size: 1.15rem;
  animation: dlShake 3.4s ease-in-out infinite;
}
@keyframes dlShake {
  0%, 72%, 100% { transform: rotate(0); }
  76% { transform: rotate(-16deg); } 80% { transform: rotate(14deg); }
  84% { transform: rotate(-11deg); } 88% { transform: rotate(9deg); } 92% { transform: rotate(0); }
}
.dial-launcher::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: -1;
  background: rgba(212,175,55,0.55); animation: glowPulse 2.6s ease-in-out infinite;
}
@media (max-width: 700px) { .dial-launcher { top: auto; bottom: 84px; font-size: 0.7rem; padding: 11px 12px; } }

.dial-panel {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  background: rgba(3,5,12,0.82); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
}
.dial-panel.open { opacity: 1; visibility: visible; }
.dial-card {
  position: relative; width: min(920px, 100%); max-height: 92vh; overflow: auto;
  display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center;
  padding: 44px 40px; border-radius: 28px;
  border: 1px solid rgba(212,175,55,0.4);
  background: linear-gradient(150deg, #131730, #090c19);
  box-shadow: 0 40px 90px rgba(0,0,0,0.7);
  transform: translateY(30px) scale(0.97); transition: transform 0.5s cubic-bezier(.2,.9,.3,1.25);
}
body.theme-light .dial-card { background: linear-gradient(150deg, #ffffff, #f4efe3); }
.dial-panel.open .dial-card { transform: none; }
.dial-close {
  position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.06);
  color: inherit; font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.dial-close:hover { background: var(--gold); color: #10131f; }
@media (max-width: 780px) { .dial-card { grid-template-columns: 1fr; gap: 26px; padding: 40px 22px 30px; } }

/* ---- the phone ---- */
.phone {
  position: relative; width: 250px; margin: 0 auto;
  aspect-ratio: 250 / 505;
  border-radius: 38px;
  background: linear-gradient(160deg, #2a2f45, #10131f 40%, #05070f);
  border: 2px solid rgba(212,175,55,0.45);
  box-shadow: 0 30px 60px rgba(0,0,0,0.65), inset 0 0 30px rgba(212,175,55,0.10);
  padding: 14px 12px;
  animation: floatY 6s ease-in-out infinite;
}
.phone::before {
  content: ''; position: absolute; top: 9px; left: 50%; translate: -50% 0;
  width: 78px; height: 6px; border-radius: 99px; background: #05070f;
}
.phone::after {
  content: ''; position: absolute; inset: -22px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.3), transparent 68%);
  animation: glowPulse 3.6s ease-in-out infinite;
}
.phone-screen {
  height: 100%; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #070a15, #0d1120);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 22px 14px 16px;
}
.ph-status { display: flex; justify-content: space-between; font-size: 0.56rem; color: rgba(255,255,255,0.55); letter-spacing: 0.05em; }
.ph-display {
  display: grid; place-items: center; align-content: center; gap: 8px; text-align: center;
}
.ph-num {
  font-family: var(--font-head); font-weight: 800; letter-spacing: 0.16em;
  font-size: 2.4rem; color: #fff; min-height: 1.2em;
  text-shadow: 0 0 24px rgba(212,175,55,0.85);
}
.ph-num .caret { animation: caretBlink 1s steps(1) infinite; color: var(--gold); }
@keyframes caretBlink { 50% { opacity: 0; } }
.ph-hint { font-size: 0.6rem; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; min-height: 2.2em; padding: 0 4px; line-height: 1.5; }
.ph-ok {
  margin-top: 6px; padding: 7px 26px; border-radius: 99px;
  font-family: var(--font-head); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.14em;
  background: var(--gold); color: #10131f;
  opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.4s;
}
.ph-ok.show { opacity: 1; transform: scale(1); animation: okPulse 1.1s ease-in-out infinite; }
@keyframes okPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.6); } 50% { box-shadow: 0 0 0 12px rgba(212,175,55,0); } }
.ph-done { color: #6de5a4; font-weight: 800; font-size: 0.78rem; opacity: 0; transition: opacity 0.4s; }
.ph-done.show { opacity: 1; }
.ph-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ph-keys span {
  aspect-ratio: 1.45; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.055); color: rgba(255,255,255,0.8);
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.ph-keys span.hit {
  background: var(--gold); color: #10131f; transform: scale(1.14);
  box-shadow: 0 0 22px rgba(212,175,55,0.9);
}

/* ---- steps ---- */
.dial-steps { display: grid; gap: 16px; }
.dial-steps .ds-head h3 { margin: 0 0 6px; font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.dial-steps .ds-head p { margin: 0; font-size: 0.9rem; line-height: 1.7; opacity: 0.88; }
.dial-flag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding: 5px 14px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(28,122,79,0.25), rgba(240,199,94,0.25), rgba(200,40,40,0.25));
  border: 1px solid rgba(212,175,55,0.4);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
}
.ds-list { display: grid; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: ds; }
.ds-list li {
  position: relative; padding: 14px 16px 14px 56px; border-radius: 16px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04);
  font-size: 0.9rem; line-height: 1.6;
  counter-increment: ds;
  transition: border-color 0.35s, background 0.35s, transform 0.35s;
}
body.theme-light .ds-list li { background: #fff; }
.ds-list li::before {
  content: counter(ds); position: absolute; left: 14px; top: 50%; translate: 0 -50%;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 0.84rem;
  background: rgba(212,175,55,0.18); color: var(--gold);
  border: 1px solid rgba(212,175,55,0.45);
  transition: background 0.35s, color 0.35s, box-shadow 0.35s;
}
.ds-list li.live { border-color: rgba(212,175,55,0.7); transform: translateX(5px); background: rgba(212,175,55,0.09); }
.ds-list li.live::before { background: var(--gold); color: #10131f; box-shadow: 0 0 20px rgba(212,175,55,0.75); }
.ds-list li b { color: var(--gold); letter-spacing: 0.08em; }
.dial-note { font-size: 0.78rem; opacity: 0.72; line-height: 1.65; margin: 4px 0 0; }
.dial-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* inline (in-page) version */
.dial-inline .dial-card {
  position: relative; transform: none; max-height: none; width: 100%;
  box-shadow: var(--shadow-lift);
}
.dial-inline .dial-close { display: none; }
.dial-section { padding-top: 20px; }
.dial-inline { max-width: 980px; margin: 0 auto; }

/* ================================================================
   v28 — telebirr walkthrough (real app screenshots)
   ================================================================ */
.tb-section { padding-top: 30px; }
.tb-wrap {
  display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: center;
  padding: 46px 42px; border-radius: 30px;
  border: 1px solid rgba(93,190,60,0.35);
  background: linear-gradient(150deg, rgba(93,190,60,0.10), rgba(212,175,55,0.06));
  position: relative; overflow: hidden;
}
body.theme-light .tb-wrap { background: linear-gradient(150deg, #f3fbef, #fffdf6); }
.tb-wrap::before {
  content: ''; position: absolute; inset: -55%; z-index: 0;
  background: conic-gradient(from 0deg, transparent, rgba(93,190,60,0.14), transparent 42%);
  animation: subSpin 16s linear infinite;
}
.tb-wrap > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .tb-wrap { grid-template-columns: 1fr; gap: 34px; padding: 34px 18px; } }

/* ---- real screenshots, cross-fading ---- */
.tb-shots {
  position: relative; width: 100%; max-width: 320px; margin: 0 auto;
  aspect-ratio: 477 / 1080;
  border-radius: 22px; overflow: hidden;
  background: #000;
  box-shadow: 0 34px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.35);
  animation: floatY 8s ease-in-out infinite;
}
.tb-shots::after {
  content: ''; position: absolute; inset: -26px; z-index: -1; border-radius: 40px;
  background: radial-gradient(circle, rgba(93,190,60,0.32), transparent 70%);
  animation: glowPulse 4.6s ease-in-out infinite;
}
.tb-shot {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.55s ease, transform 0.8s cubic-bezier(.2,.9,.3,1.15), visibility 0.55s;
  transform: scale(1.03);
}
.tb-shot.on { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.tb-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* screen-glass sheen so it reads as a live device */
.tb-shots::before {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(118deg, transparent 36%, rgba(255,255,255,0.13) 50%, transparent 64%);
  background-size: 260% 100%; background-position: -150% 0;
  animation: shimmerSweep 7s linear infinite;
}
/* progress rail under the phone */
.tb-progress {
  display: flex; gap: 5px; justify-content: center; margin-top: 16px;
}
.tb-progress i {
  width: 20px; height: 3px; border-radius: 99px; background: rgba(255,255,255,0.25);
  transition: background 0.4s, width 0.4s;
}
.tb-progress i.on { background: #5cb531; width: 34px; box-shadow: 0 0 12px rgba(93,190,60,0.85); }
body.theme-light .tb-progress i { background: rgba(0,0,0,0.15); }

/* ---- step rail ---- */
.tb-copy .tb-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding: 5px 14px; border-radius: 99px;
  background: rgba(93,190,60,0.16); border: 1px solid rgba(93,190,60,0.5);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: #7ed957;
}
body.theme-light .tb-copy .tb-badge { color: #3d8b28; }
.tb-copy h3 { margin: 0 0 8px; font-size: clamp(1.3rem, 2.6vw, 1.95rem); }
.tb-copy > p { margin: 0 0 18px; font-size: 0.92rem; line-height: 1.7; opacity: 0.88; }
.tb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: tb; }
.tb-list li {
  position: relative; padding: 11px 14px 11px 50px; border-radius: 14px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04);
  font-size: 0.86rem; line-height: 1.55; counter-increment: tb; cursor: pointer;
  transition: border-color 0.35s, background 0.35s, transform 0.35s;
}
body.theme-light .tb-list li { background: #fff; }
.tb-list li::before {
  content: counter(tb); position: absolute; left: 12px; top: 50%; translate: 0 -50%;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 0.76rem;
  background: rgba(93,190,60,0.16); color: #7ed957; border: 1px solid rgba(93,190,60,0.45);
  transition: background 0.35s, color 0.35s, box-shadow 0.35s;
}
body.theme-light .tb-list li::before { color: #3d8b28; }
.tb-list li:hover { border-color: rgba(93,190,60,0.5); }
.tb-list li.live { border-color: rgba(93,190,60,0.75); background: rgba(93,190,60,0.10); transform: translateX(5px); }
.tb-list li.live::before { background: #5cb531; color: #fff; box-shadow: 0 0 18px rgba(93,190,60,0.7); }
.tb-list li b { color: var(--gold); }
.tb-foot { margin-top: 16px; font-size: 0.8rem; opacity: 0.75; line-height: 1.65; }
.tb-tiers { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.tb-tier {
  padding: 7px 14px; border-radius: 99px; font-size: 0.76rem; font-weight: 700;
  border: 1px solid rgba(212,175,55,0.4); background: rgba(212,175,55,0.10);
}
.tb-tier b { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .tb-shots, .tb-shots::after, .tb-shots::before, .tb-wrap::before, .tb-shot {
    animation: none !important; transition: opacity 0.3s !important; transform: none !important;
  }
}

/* ================================================================
   v29 — SIGNATURE PRAYER (Prayer of Decision) above the footer
   ================================================================ */
.prayer-band {
  position: relative;
  margin-top: 70px;
  padding: 96px 0 104px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(1200px 520px at 50% -20%, rgba(212,175,55,0.16), transparent 62%),
    linear-gradient(180deg, rgba(4,6,14,0.55), rgba(4,6,14,0.92));
  border-top: 1px solid rgba(212,175,55,0.28);
}
body.theme-light .prayer-band {
  background:
    radial-gradient(1200px 520px at 50% -20%, rgba(184,145,42,0.16), transparent 62%),
    linear-gradient(180deg, #fffdf6, #f4efe2);
  border-top: 1px solid rgba(184,145,42,0.3);
}
/* slow rotating halo */
.prayer-band::before {
  content: ''; position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  width: 150vmax; height: 150vmax; z-index: -2;
  background: conic-gradient(from 0deg, transparent, rgba(212,175,55,0.11), transparent 32%, rgba(53,224,255,0.07), transparent 62%);
  animation: praySpin 34s linear infinite;
}
@keyframes praySpin { to { transform: rotate(360deg); } }
/* soft light shafts */
.prayer-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(103deg,
    transparent 0 90px, rgba(255,246,216,0.045) 90px 132px, transparent 132px 230px);
  animation: prayShafts 22s linear infinite;
}
@keyframes prayShafts { to { background-position: 640px 0; } }

.prayer-inner {
  position: relative;
  width: min(980px, 92%);
  margin: 0 auto;
  text-align: center;
}

/* --- the cross draws itself, then breathes --- */
.prayer-cross { width: 62px; height: 84px; margin: 0 auto 26px; display: block; overflow: visible; }
.prayer-cross path {
  fill: none; stroke: url(#pxGold); stroke-width: 5.5; stroke-linecap: round;
  stroke-dasharray: 240; stroke-dashoffset: 240;
  filter: drop-shadow(0 0 14px rgba(212,175,55,0.85));
}
.reveal.in .prayer-cross path,
.prayer-band .prayer-cross path { animation: crossDraw 2.4s cubic-bezier(.4,0,.2,1) 0.2s forwards, crossGlow 4.6s ease-in-out 2.6s infinite; }
@keyframes crossDraw { to { stroke-dashoffset: 0; } }
@keyframes crossGlow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(212,175,55,0.6)); }
  50%      { filter: drop-shadow(0 0 26px rgba(212,175,55,1)); }
}

.prayer-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 20px; border-radius: 99px; margin-bottom: 22px;
  border: 1px solid rgba(212,175,55,0.45);
  background: rgba(212,175,55,0.10);
  font-family: var(--font-head); font-weight: 800;
  font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}
.prayer-eyebrow .hands { font-size: 1rem; animation: floatY 3.6s ease-in-out infinite; }

.prayer-quote {
  position: relative;
  margin: 0 auto;
  max-width: 860px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.02rem, 1.75vw, 1.38rem);
  line-height: 2.05;
  letter-spacing: 0.005em;
  background: linear-gradient(104deg, var(--gold-light) 0%, #ffffff 26%, var(--gold-light) 52%, #ffffff 78%, var(--gold-light) 100%);
  background-size: 260% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerSweep 13s linear infinite;
  text-wrap: pretty;
}
body.theme-light .prayer-quote {
  background: linear-gradient(104deg, #b8912a 0%, #2a2f3d 30%, #b8912a 60%, #2a2f3d 88%, #b8912a 100%);
  background-size: 260% auto; -webkit-background-clip: text; background-clip: text;
}
/* ornamental quote marks */
.prayer-quote::before, .prayer-quote::after {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4.2rem; line-height: 0; color: rgba(212,175,55,0.42);
  position: relative; top: 0.34em;
}
.prayer-quote::before { content: '\201C'; margin-right: 6px; }
.prayer-quote::after  { content: '\201D'; margin-left: 6px; }

.prayer-amen {
  display: block; margin-top: 30px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.5rem); letter-spacing: 0.34em;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(212,175,55,0.6);
  animation: amenPulse 5s ease-in-out infinite;
}
@keyframes amenPulse {
  0%, 100% { opacity: 0.82; text-shadow: 0 0 18px rgba(212,175,55,0.45); letter-spacing: 0.34em; }
  50%      { opacity: 1;    text-shadow: 0 0 34px rgba(212,175,55,0.95); letter-spacing: 0.40em; }
}

.prayer-rule {
  width: 190px; height: 1px; margin: 34px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative;
}
.prayer-rule::after {
  content: '\2726'; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  color: var(--gold); font-size: 0.85rem; background: transparent;
  animation: glowPulse 3.4s ease-in-out infinite;
}

/* rising embers */
.prayer-embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.prayer-embers i {
  position: absolute; bottom: -14px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(212,175,55,0.75);
  opacity: 0;
  animation: emberRise linear infinite;
}
@keyframes emberRise {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.65; }
  100% { opacity: 0; transform: translateY(-78vh) translateX(var(--dx, 20px)) scale(1.15); }
}
.prayer-embers i:nth-child(1)  { left: 6%;  animation-duration: 15s; animation-delay: 0s;    --dx: 30px; }
.prayer-embers i:nth-child(2)  { left: 14%; animation-duration: 19s; animation-delay: -3s;   --dx: -22px; width: 3px; height: 3px; }
.prayer-embers i:nth-child(3)  { left: 23%; animation-duration: 13s; animation-delay: -7s;   --dx: 18px; }
.prayer-embers i:nth-child(4)  { left: 31%; animation-duration: 21s; animation-delay: -11s;  --dx: -34px; width: 5px; height: 5px; }
.prayer-embers i:nth-child(5)  { left: 42%; animation-duration: 17s; animation-delay: -2s;   --dx: 26px; }
.prayer-embers i:nth-child(6)  { left: 50%; animation-duration: 23s; animation-delay: -14s;  --dx: -16px; width: 3px; height: 3px; }
.prayer-embers i:nth-child(7)  { left: 58%; animation-duration: 14s; animation-delay: -5s;   --dx: 32px; }
.prayer-embers i:nth-child(8)  { left: 67%; animation-duration: 20s; animation-delay: -9s;   --dx: -28px; }
.prayer-embers i:nth-child(9)  { left: 76%; animation-duration: 16s; animation-delay: -13s;  --dx: 22px; width: 5px; height: 5px; }
.prayer-embers i:nth-child(10) { left: 84%; animation-duration: 22s; animation-delay: -6s;   --dx: -20px; background: var(--neon-c); box-shadow: 0 0 12px 2px rgba(53,224,255,0.6); }
.prayer-embers i:nth-child(11) { left: 91%; animation-duration: 18s; animation-delay: -16s;  --dx: 26px; }
.prayer-embers i:nth-child(12) { left: 97%; animation-duration: 24s; animation-delay: -10s;  --dx: -30px; width: 3px; height: 3px; }

/* line-by-line entrance */
.prayer-inner > * { opacity: 0; transform: translateY(26px); }
.prayer-band.seen .prayer-inner > * {
  animation: prayIn 1s cubic-bezier(.2,.9,.3,1.15) both;
}
.prayer-band.seen .prayer-cross    { animation-delay: 0.05s; }
.prayer-band.seen .prayer-eyebrow  { animation-delay: 0.25s; }
.prayer-band.seen .prayer-quote    { animation-delay: 0.45s, 0s; }
.prayer-band.seen .prayer-amen     { animation-delay: 0.75s, 0s; }
.prayer-band.seen .prayer-rule     { animation-delay: 0.95s; }
@keyframes prayIn { to { opacity: 1; transform: none; } }
/* the shimmer + pulse must keep running after the entrance */
.prayer-band.seen .prayer-quote { animation-name: prayIn, shimmerSweep; animation-duration: 1s, 13s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(.2,.9,.3,1.15), linear; }
.prayer-band.seen .prayer-amen  { animation-name: prayIn, amenPulse;    animation-duration: 1s, 5s;  animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(.2,.9,.3,1.15), ease-in-out; }

@media (max-width: 700px) {
  .prayer-band { padding: 66px 0 74px; margin-top: 46px; }
  .prayer-quote { line-height: 1.95; }
  .prayer-embers { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .prayer-band::before, .prayer-band::after, .prayer-embers,
  .prayer-quote, .prayer-amen, .prayer-cross path, .prayer-eyebrow .hands { animation: none !important; }
  .prayer-inner > * { opacity: 1; transform: none; }
  .prayer-cross path { stroke-dashoffset: 0; }
}

/* ================================================================
   v30 — NTPC interactive church profile
   ================================================================ */
/* ---- scripture pillars: 3D flip ---- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; perspective: 1600px; }
.pillar { position: relative; min-height: 250px; cursor: pointer; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(.3,.9,.3,1.2); }
.pillar.flipped { transform: rotateY(180deg); }
.pillar .face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 22px; padding: 30px 26px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(150deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  display: grid; align-content: center; gap: 12px;
}
body.theme-light .pillar .face { background: linear-gradient(150deg, #ffffff, #f6f1e6); }
.pillar .back { transform: rotateY(180deg); background: linear-gradient(150deg, rgba(212,175,55,0.16), rgba(53,224,255,0.06)); }
.pillar .ref { font-family: var(--font-head); font-weight: 800; color: var(--gold); font-size: 0.82rem; letter-spacing: 0.1em; }
.pillar .face p { margin: 0; font-size: 0.95rem; line-height: 1.8; }
.pillar .flip-hint { font-size: 0.72rem; opacity: 0.6; display: flex; align-items: center; gap: 6px; }
.pillar .flip-hint::before { content: '\21BB'; font-size: 0.95rem; color: var(--gold); }
.pillar::after {
  content: ''; position: absolute; inset: -1px; border-radius: 22px; pointer-events: none; padding: 1px;
  background: linear-gradient(120deg, transparent, rgba(212,175,55,0.55), transparent);
  background-size: 300% 100%; animation: shimmerSweep 6s linear infinite; opacity: 0; transition: opacity 0.4s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.pillar:hover::after { opacity: 1; }

/* ---- VMV switcher ---- */
.vmv { position: relative; }
.vmv-rail { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; position: relative; }
.vmv-rail button {
  position: relative; cursor: pointer;
  padding: 12px 26px; border-radius: 99px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04); color: inherit;
  font-family: var(--font-head); font-weight: 700; font-size: 0.86rem;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.35s, border-color 0.35s, background 0.35s, box-shadow 0.35s;
}
body.theme-light .vmv-rail button { background: #fff; }
.vmv-rail button:hover { transform: translateY(-2px); border-color: rgba(212,175,55,0.55); }
.vmv-rail button.on {
  background: linear-gradient(120deg, var(--gold), var(--gold-light)); color: #10131f;
  border-color: transparent; box-shadow: 0 12px 34px rgba(212,175,55,0.4);
  transform: translateY(-3px);
}
.vmv-panel { display: none; animation: vmvIn 0.65s cubic-bezier(.2,.9,.3,1.15) both; }
.vmv-panel.on { display: block; }
@keyframes vmvIn { from { opacity: 0; transform: translateY(24px) scale(0.985); } to { opacity: 1; transform: none; } }

.vision-orb {
  position: relative; max-width: 780px; margin: 0 auto; text-align: center;
  padding: 54px 36px; border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(212,175,55,0.35);
  background: linear-gradient(150deg, rgba(212,175,55,0.12), rgba(53,224,255,0.05));
}
.vision-orb::before {
  content: ''; position: absolute; inset: -60%; z-index: 0;
  background: conic-gradient(from 0deg, transparent, rgba(212,175,55,0.2), transparent 40%);
  animation: subSpin 12s linear infinite;
}
.vision-orb > * { position: relative; z-index: 1; }
.vision-orb .halo {
  width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem;
  background: radial-gradient(circle, rgba(212,175,55,0.35), transparent 70%);
  animation: floatY 5s ease-in-out infinite;
}
.vision-orb p { margin: 0; font-size: clamp(1rem, 1.9vw, 1.3rem); line-height: 1.85; }

.mv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.mv-item {
  position: relative; padding: 26px 22px 26px 26px; border-radius: 20px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04);
  overflow: hidden; transition: transform 0.4s cubic-bezier(.2,.9,.3,1.2), border-color 0.4s;
}
body.theme-light .mv-item { background: #fff; }
.mv-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--neon-c));
  transform: scaleY(0); transform-origin: top; transition: transform 0.5s cubic-bezier(.2,.9,.3,1.2);
}
.mv-item:hover { transform: translateY(-6px); border-color: rgba(212,175,55,0.5); }
.mv-item:hover::before { transform: scaleY(1); }
.mv-item .mv-ico { font-size: 1.7rem; display: block; margin-bottom: 10px; transition: transform 0.5s; }
.mv-item:hover .mv-ico { transform: scale(1.18) rotate(-6deg); }
.mv-item h4 { margin: 0 0 6px; font-size: 1rem; }
.mv-item p { margin: 0; font-size: 0.88rem; line-height: 1.7; opacity: 0.88; }

/* ---- ministries accordion ---- */
.min-list { display: grid; gap: 12px; }
.min-item {
  border-radius: 20px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04); overflow: hidden;
  transition: border-color 0.4s, background 0.4s;
}
body.theme-light .min-item { background: #fff; }
.min-head {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 20px 22px; cursor: pointer; border: 0; background: none; color: inherit; text-align: left;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
}
.min-head .m-ico {
  width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center;
  font-size: 1.25rem; background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.35);
  transition: transform 0.5s cubic-bezier(.2,.9,.3,1.4), background 0.4s;
}
.min-head .m-plus { margin-left: auto; font-size: 1.3rem; color: var(--gold); transition: transform 0.45s; flex: none; }
.min-item.open { border-color: rgba(212,175,55,0.6); background: rgba(212,175,55,0.07); }
.min-item.open .m-plus { transform: rotate(45deg); }
.min-item.open .m-ico { transform: scale(1.1) rotate(-8deg); background: rgba(212,175,55,0.28); }
.min-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(.3,.9,.3,1); }
.min-item.open .min-body { grid-template-rows: 1fr; }
.min-body > div { overflow: hidden; }
.min-body p { margin: 0; padding: 0 22px 22px 82px; font-size: 0.9rem; line-height: 1.8; opacity: 0.9; }
@media (max-width: 560px) { .min-body p { padding-left: 22px; } }

/* ---- live service schedule ---- */
.sched { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: start; }
@media (max-width: 820px) { .sched { grid-template-columns: 1fr; } }
.sched-days { display: grid; gap: 10px; }
.sday {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); color: inherit;
  font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
  transition: transform 0.35s, border-color 0.35s, background 0.35s;
}
body.theme-light .sday { background: #fff; }
.sday:hover { transform: translateX(4px); border-color: rgba(212,175,55,0.5); }
.sday.on { background: linear-gradient(120deg, rgba(212,175,55,0.2), rgba(53,224,255,0.07)); border-color: rgba(212,175,55,0.7); transform: translateX(6px); }
.sday .sd-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,0.3); transition: background 0.35s, box-shadow 0.35s;
}
.sday.on .sd-dot { background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.sday .sd-time { margin-left: auto; font-size: 0.74rem; opacity: 0.7; font-weight: 600; }
.sday.live { border-color: #2fae4a; }
.sday.live .sd-dot { background: #2fae4a; box-shadow: 0 0 0 0 rgba(47,174,74,0.6); animation: livePulse 1.8s ease-in-out infinite; }

.sched-detail {
  position: relative; border-radius: 24px; padding: 34px 30px; min-height: 260px;
  border: 1px solid rgba(212,175,55,0.32);
  background: linear-gradient(150deg, rgba(212,175,55,0.10), rgba(53,224,255,0.04));
  overflow: hidden;
}
.sched-detail::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  background-size: 300% 100%; animation: shimmerSweep 9s linear infinite;
}
.sd-pane { display: none; animation: vmvIn 0.55s cubic-bezier(.2,.9,.3,1.15) both; position: relative; z-index: 1; }
.sd-pane.on { display: block; }
.sd-pane h4 { margin: 0 0 6px; font-size: clamp(1.15rem, 2.3vw, 1.6rem); }
.sd-clock {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px;
}
.sd-clock span {
  padding: 8px 16px; border-radius: 99px; font-size: 0.8rem; font-weight: 700;
  border: 1px solid rgba(212,175,55,0.4); background: rgba(212,175,55,0.10);
}
.sd-clock span b { color: var(--gold); }
.sd-focus { font-size: 0.94rem; line-height: 1.8; margin: 0; }
.sd-badge-live {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  padding: 5px 14px; border-radius: 99px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
  background: rgba(47,174,74,0.18); border: 1px solid rgba(47,174,74,0.6); color: #6de5a4;
}
.sd-badge-live i { width: 7px; height: 7px; border-radius: 50%; background: #2fae4a; animation: livePulse 1.6s ease-in-out infinite; }
.next-service {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 24px; padding: 14px 20px; border-radius: 16px;
  border: 1px solid rgba(53,224,255,0.35); background: rgba(53,224,255,0.07);
  font-size: 0.88rem;
}
.next-service b { color: var(--neon-c); font-family: var(--font-head); letter-spacing: 0.04em; }
.next-service .ns-ico { font-size: 1.2rem; animation: floatY 3s ease-in-out infinite; }

/* ---- locations ---- */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.loc-card {
  position: relative; padding: 30px 26px; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04);
  transition: transform 0.45s cubic-bezier(.2,.9,.3,1.2), border-color 0.45s;
}
body.theme-light .loc-card { background: #fff; }
.loc-card:hover { transform: translateY(-7px); border-color: rgba(212,175,55,0.55); }
.loc-card .pin {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem;
  background: rgba(212,175,55,0.16); border: 1px solid rgba(212,175,55,0.4); margin-bottom: 16px;
  animation: floatY 4.4s ease-in-out infinite;
}
.loc-card h4 { margin: 0 0 8px; font-size: 1.08rem; }
.loc-card p { margin: 0 0 16px; font-size: 0.9rem; line-height: 1.75; opacity: 0.9; }
.loc-card::after {
  content: ''; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 70%);
  transition: transform 0.6s;
}
.loc-card:hover::after { transform: scale(1.5); }
@media (prefers-reduced-motion: reduce) {
  .pillar, .vmv-panel, .sd-pane, .vision-orb::before, .sched-detail::before,
  .loc-card .pin, .next-service .ns-ico, .vision-orb .halo { animation: none !important; transition: none !important; }
}

/* ================================================================
   v31 — light-theme logo treatment + video sharing
   ================================================================ */
/* Melkam Wetat + Marsil TV: fully transparent on the light theme.
   The church seal is purple line art, so it keeps a white disc the
   exact size of the mark itself. */
body.theme-light img[src*="logo-mw-icon"],
body.theme-light img[src*="logo-mw-full"],
body.theme-light img[src*="logo-marsil-icon"] {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body.theme-light img[src*="logo-church-icon"] {
  background: #ffffff !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
/* footer emblem row — same rules, same size for all three */
body.theme-light .footer-logos img { background: transparent; border-radius: 0; padding: 0; }
body.theme-light .footer-logos img[src*="logo-church-icon"] { background: #fff; border-radius: 50%; }
.footer-logos img { width: 72px; height: 72px; object-fit: contain; }

/* ---------- share bar on video cards ---------- */
.vc-share {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--glass-border);
}
.vc-share .sh-label {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.6; margin-right: 2px; font-weight: 700;
}
.sh-btn {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05); color: inherit; cursor: pointer;
  display: grid; place-items: center; font-size: 0.82rem; line-height: 1;
  transition: transform 0.28s cubic-bezier(.2,.9,.3,1.4), background 0.28s, color 0.28s, border-color 0.28s;
  padding: 0;
}
body.theme-light .sh-btn { background: #fff; }
.sh-btn:hover { transform: translateY(-3px) scale(1.08); border-color: transparent; color: #fff; }
.sh-btn.sh-native:hover { background: var(--gold); color: #10131f; }
.sh-btn.sh-fb:hover { background: #1877f2; }
.sh-btn.sh-tg:hover { background: #29a9eb; }
.sh-btn.sh-wa:hover { background: #25d366; }
.sh-btn.sh-x:hover  { background: #000; }
.sh-btn.sh-copy:hover { background: var(--neon-c); color: #06121a; }
.sh-btn svg { width: 14px; height: 14px; fill: currentColor; }
.sh-toast {
  position: fixed; left: 50%; bottom: 32px; translate: -50% 0; z-index: 300;
  padding: 12px 24px; border-radius: 99px;
  background: var(--gold); color: #10131f;
  font-family: var(--font-head); font-weight: 800; font-size: 0.85rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.35s, transform 0.45s cubic-bezier(.2,.9,.3,1.3);
}
.sh-toast.on { opacity: 1; transform: none; }

/* ---------- v31 — partnership agreement gate ---------- */
.sub-secure {
  display: flex; gap: 14px; align-items: flex-start;
  max-width: 700px; margin: 22px auto 0; padding: 18px 22px;
  border-radius: 18px; text-align: left;
  border: 1px solid rgba(53,224,255,0.34); background: rgba(53,224,255,0.06);
}
.sub-secure .lock { font-size: 1.35rem; flex: none; animation: floatY 4s ease-in-out infinite; }
.sub-secure p { margin: 0; font-size: 0.84rem; line-height: 1.75; opacity: 0.92; }
.stripe-mark {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
  padding: 2px 10px; border-radius: 6px; font-weight: 800; font-size: 0.72rem;
  background: #635bff; color: #fff; letter-spacing: 0.04em;
}
.agree-box {
  display: flex; gap: 13px; align-items: flex-start;
  max-width: 700px; margin: 20px auto 4px; padding: 16px 20px;
  border-radius: 16px; text-align: left; cursor: pointer;
  border: 1px solid rgba(212,175,55,0.4); background: rgba(212,175,55,0.07);
  transition: border-color 0.35s, background 0.35s, box-shadow 0.35s;
}
.agree-box:hover { border-color: rgba(212,175,55,0.7); }
.agree-box.ok { border-color: rgba(47,174,74,0.65); background: rgba(47,174,74,0.09); }
.agree-box.warn { animation: agreeShake 0.5s; border-color: #e07070; background: rgba(224,112,112,0.10); }
@keyframes agreeShake { 0%,100% { transform: translateX(0);} 20%,60% { transform: translateX(-7px);} 40%,80% { transform: translateX(7px);} }
.agree-box input { position: absolute; opacity: 0; pointer-events: none; }
.agree-mark {
  width: 24px; height: 24px; flex: none; border-radius: 7px; margin-top: 1px;
  border: 2px solid rgba(212,175,55,0.7); background: rgba(255,255,255,0.06);
  display: grid; place-items: center; color: transparent; font-size: 0.9rem; font-weight: 900;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.35s cubic-bezier(.2,1.6,.4,1);
}
.agree-box.ok .agree-mark { background: #2fae4a; border-color: #2fae4a; color: #fff; transform: scale(1.08); }
.agree-box span.txt { font-size: 0.85rem; line-height: 1.7; }
.agree-box a { color: var(--gold); font-weight: 700; text-decoration: underline; }
#subGo[data-armed="0"] { opacity: 0.55; filter: grayscale(0.35); }

/* ================================================================
   v31 — GIVE PAGES
   ================================================================ */
.give-switch { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.give-switch button {
  position: relative; cursor: pointer; padding: 15px 28px; border-radius: 18px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); color: inherit;
  font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.3), border-color 0.35s, background 0.35s, box-shadow 0.35s;
}
body.theme-light .give-switch button { background: #fff; }
.give-switch button .gs-ico { font-size: 1.2rem; }
.give-switch button small { display: block; font-weight: 500; font-size: 0.68rem; opacity: 0.72; margin-top: 2px; }
.give-switch button:hover { transform: translateY(-3px); border-color: rgba(212,175,55,0.6); }
.give-switch button.on {
  background: linear-gradient(120deg, var(--gold), var(--gold-light)); color: #10131f;
  border-color: transparent; box-shadow: 0 14px 36px rgba(212,175,55,0.42); transform: translateY(-4px);
}
.give-switch button.on small { opacity: 0.8; }
.give-pane { display: none; animation: vmvIn 0.6s cubic-bezier(.2,.9,.3,1.15) both; }
.give-pane.on { display: block; }

.pay-card {
  position: relative; padding: 34px 30px; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04);
  transition: border-color 0.4s, transform 0.4s;
}
body.theme-light .pay-card { background: #fff; }
.pay-card:hover { border-color: rgba(212,175,55,0.5); }
.pay-card .pc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.pay-card .pc-ico {
  width: 52px; height: 52px; flex: none; border-radius: 15px; display: grid; place-items: center;
  font-size: 1.5rem; background: rgba(212,175,55,0.15); border: 1px solid rgba(212,175,55,0.4);
  animation: floatY 5s ease-in-out infinite;
}
.pay-card h3 { margin: 0; font-size: 1.2rem; }
.pay-card .pc-sub { font-size: 0.76rem; opacity: 0.72; letter-spacing: 0.06em; }
.pay-card p { font-size: 0.9rem; line-height: 1.8; }

.big-code {
  display: inline-flex; align-items: baseline; gap: 12px; margin: 8px 0 6px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 4.4rem); letter-spacing: 0.08em;
  background: linear-gradient(180deg, #fff 10%, var(--gold-light) 70%, #a67c12 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(212,175,55,0.45);
  animation: amenPulse 4.5s ease-in-out infinite;
}
body.theme-light .big-code { background: linear-gradient(180deg,#1d2433 10%,#b8912a 90%); -webkit-background-clip: text; background-clip: text; }
.big-code em { font-style: normal; font-size: 0.3em; letter-spacing: 0.2em; opacity: 0.8; }

/* account rows with copy */
.acct-list { display: grid; gap: 10px; margin-top: 18px; }
.acct {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 15px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04);
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
body.theme-light .acct { background: #fbf8f1; }
.acct:hover { border-color: rgba(212,175,55,0.55); transform: translateX(4px); }
.acct .a-bank { font-weight: 700; font-size: 0.88rem; flex: 1; min-width: 120px; }
.acct .a-num {
  font-family: var(--font-head); font-weight: 800; font-size: 1.02rem;
  letter-spacing: 0.06em; color: var(--gold); white-space: nowrap;
}
.acct .a-copy {
  width: 34px; height: 34px; flex: none; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.05); color: inherit;
  display: grid; place-items: center; font-size: 0.85rem;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.acct .a-copy:hover { background: var(--gold); color: #10131f; transform: scale(1.1); }
.acct.copied { border-color: #2fae4a; background: rgba(47,174,74,0.10); }
.acct.copied .a-copy { background: #2fae4a; color: #fff; }
@media (max-width: 560px) { .acct { flex-wrap: wrap; } .acct .a-num { font-size: 0.92rem; } }

.give-hero-stat {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 26px;
}
.give-hero-stat span {
  padding: 9px 18px; border-radius: 99px; font-size: 0.8rem; font-weight: 700;
  border: 1px solid rgba(212,175,55,0.4); background: rgba(212,175,55,0.09);
}
.give-hero-stat b { color: var(--gold); }

/* ================================================================
   v32 — bank cards with brand marks + Zelle
   ================================================================ */
.acct {
  display: grid;
  grid-template-columns: 54px 1fr auto 38px;
  align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.045);
  transition: border-color 0.35s, transform 0.35s cubic-bezier(.2,.9,.3,1.2), background 0.35s, box-shadow 0.35s;
  position: relative; overflow: hidden;
}
body.theme-light .acct { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.acct::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.14) 50%, transparent 62%);
  background-size: 260% 100%; background-position: -150% 0;
  transition: background-position 0.9s ease;
}
.acct:hover::after { background-position: 230% 0; }
.acct:hover { border-color: rgba(212,175,55,0.6); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); }
.acct .a-logo {
  width: 54px; height: 54px; border-radius: 15px; overflow: hidden; flex: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  transition: transform 0.45s cubic-bezier(.2,.9,.3,1.4);
}
.acct:hover .a-logo { transform: scale(1.07) rotate(-3deg); }
.acct .a-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct .a-meta { min-width: 0; }
.acct .a-bank { font-weight: 700; font-size: 0.92rem; display: block; }
.acct .a-tag { font-size: 0.7rem; opacity: 0.62; letter-spacing: 0.06em; }
.acct .a-num {
  font-family: var(--font-head); font-weight: 800; font-size: 1.06rem;
  letter-spacing: 0.07em; color: var(--gold); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.acct .a-num.pending { color: var(--ink-dim); font-size: 0.8rem; letter-spacing: 0.04em; font-weight: 600; opacity: 0.8; }
.acct .a-copy {
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.05); color: inherit;
  display: grid; place-items: center; font-size: 0.9rem;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.acct .a-copy:hover { background: var(--gold); color: #10131f; transform: scale(1.1); }
.acct.copied { border-color: #2fae4a; background: rgba(47,174,74,0.10); }
.acct.copied .a-copy { background: #2fae4a; color: #fff; }
.acct.pending { opacity: 0.72; cursor: default; }
.acct.pending:hover { transform: none; border-color: var(--glass-border); box-shadow: none; }
@media (max-width: 620px) {
  .acct { grid-template-columns: 44px 1fr 34px; row-gap: 6px; }
  .acct .a-logo { width: 44px; height: 44px; border-radius: 12px; }
  .acct .a-num { grid-column: 1 / -1; font-size: 1rem; }
}

/* ---- Zelle ---- */
.zelle-card {
  position: relative; margin-top: 22px; padding: 26px 24px; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(109,30,212,0.5);
  background: linear-gradient(140deg, rgba(109,30,212,0.18), rgba(109,30,212,0.05));
}
body.theme-light .zelle-card { background: linear-gradient(140deg, #f3ecff, #ffffff); }
.zelle-card::before {
  content: ''; position: absolute; inset: -60%; z-index: 0;
  background: conic-gradient(from 0deg, transparent, rgba(109,30,212,0.22), transparent 40%);
  animation: subSpin 13s linear infinite;
}
.zelle-card > * { position: relative; z-index: 1; }
.zelle-head { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; }
.zelle-head img { width: 52px; height: 52px; border-radius: 15px; box-shadow: 0 6px 18px rgba(109,30,212,0.5); }
.zelle-head h4 { margin: 0; font-size: 1.12rem; }
.zelle-head .z-tag { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.zelle-handle {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  margin-top: 14px; padding: 15px 18px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(109,30,212,0.4);
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
body.theme-light .zelle-handle { background: #fff; }
.zelle-handle:hover { transform: translateX(4px); border-color: rgba(109,30,212,0.85); }
.zelle-handle b { font-family: var(--font-head); font-size: 1rem; letter-spacing: 0.03em; word-break: break-all; }
.zelle-handle.copied { border-color: #2fae4a; background: rgba(47,174,74,0.12); }
.zelle-steps { display: grid; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: z; }
.zelle-steps li {
  position: relative; padding-left: 32px; font-size: 0.85rem; line-height: 1.65; counter-increment: z;
}
.zelle-steps li::before {
  content: counter(z); position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 800;
  background: rgba(109,30,212,0.25); color: #c9a6ff; border: 1px solid rgba(109,30,212,0.55);
}
body.theme-light .zelle-steps li::before { color: #6D1ED4; background: #efe6ff; }

/* holder banner above the account list */
.acct-holder {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 15px; margin-bottom: 16px;
  background: rgba(212,175,55,0.09); border: 1px dashed rgba(212,175,55,0.5);
  font-size: 0.85rem;
}
.acct-holder b { color: var(--gold); letter-spacing: 0.02em; }
.acct-holder .ah-ico { font-size: 1.1rem; }


/* ================================================================
   v35 — MOBILE NAV FIX
   The brand, theme toggle, four language buttons and the hamburger
   were wider than a phone screen, pushing the menu button off-view.
   ================================================================ */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 900px) {
  :root { --nav-h: 72px; --nav-h-sm: 64px; }

  .nav { padding: 10px 0; }
  .nav.scrolled { padding: 8px 0; }
  .nav-inner {
    width: 100%;
    padding: 0 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* brand shrinks and truncates instead of pushing everything right */
  .brand { flex: 0 1 auto; min-width: 0; gap: 9px; }
  .brand > span:last-child {
    font-size: 0.9rem; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .brand > span:last-child small { display: none; }
  .logo-badge {
    width: 40px !important; height: 40px !important;
    min-width: 40px; min-height: 40px;
  }

  /* compact controls, always on screen */
  .theme-toggle { width: 34px !important; height: 34px !important; font-size: 0.85rem; flex: none; }
  .lang-bar { gap: 3px; padding: 3px; flex: none; }
  .lang-bar .lang-btn {
    min-width: 0; padding: 5px 7px;
    font-size: 0.62rem; letter-spacing: 0;
  }
  .hamburger { flex: none; width: 38px; height: 38px; margin-left: 2px; }
  .hamburger span { left: 9px; right: 9px; }
}

/* very small phones — trim further so nothing can ever clip */
@media (max-width: 400px) {
  .brand > span:last-child { font-size: 0.8rem; max-width: 92px; }
  .logo-badge { width: 34px !important; height: 34px !important; min-width: 34px; min-height: 34px; }
  .lang-bar .lang-btn { padding: 5px 5px; font-size: 0.58rem; }
  .theme-toggle { width: 30px !important; height: 30px !important; }
  .nav-inner { gap: 6px; padding: 0 9px; }
}

/* the drawer must clear the pinned banner */
@media (max-width: 860px) {
  .nav-links { padding-top: calc(var(--nav-h) + 24px); }
}

/* ================================================================
   v35 — CAMPUS CINEMATIC VIDEO SECTION
   ================================================================ */
.campus-film {
  position: relative;
  min-height: min(88vh, 760px);
  display: grid; place-items: center;
  overflow: hidden;
  margin: 0 0 10px;
  isolation: isolate;
}
.campus-film video,
.campus-film .cf-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -3;
  transform: scale(1.06);
  animation: cfDrift 26s ease-in-out infinite alternate;
}
@keyframes cfDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}
.campus-film::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, transparent, rgba(4,6,14,0.72) 78%),
    linear-gradient(180deg, rgba(4,6,14,0.82) 0%, rgba(4,6,14,0.28) 30%, rgba(4,6,14,0.35) 62%, rgba(4,6,14,0.92) 100%);
}
/* warm ember bloom rising off the lights in the footage */
.campus-film::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle 40% at 50% 78%, rgba(255,183,66,0.22), transparent 70%);
  mix-blend-mode: screen;
  animation: cfGlow 7s ease-in-out infinite;
}
@keyframes cfGlow { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

.cf-inner {
  position: relative; z-index: 2; text-align: center;
  width: min(880px, 90%); padding: 60px 0;
}
.cf-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 20px; border-radius: 99px; margin-bottom: 20px;
  border: 1px solid rgba(212,175,55,0.5); background: rgba(4,6,14,0.45);
  backdrop-filter: blur(8px);
  font-family: var(--font-head); font-weight: 800;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light);
}
.cf-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); font-style: normal;
  box-shadow: 0 0 12px var(--gold); animation: glowPulse 2.4s ease-in-out infinite; }
.campus-film h2 {
  font-size: clamp(1.9rem, 6vw, 4.2rem); line-height: 1.08; margin: 0 0 18px;
  color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,0.85);
}
.campus-film h2 .grad-text { text-shadow: none; }
.campus-film p {
  font-size: clamp(0.95rem, 1.7vw, 1.15rem); line-height: 1.85;
  color: rgba(255,255,255,0.92); text-shadow: 0 2px 20px rgba(0,0,0,0.9);
  max-width: 640px; margin: 0 auto 28px;
}
.cf-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cf-stats span {
  padding: 12px 22px; border-radius: 16px;
  background: rgba(4,6,14,0.5); backdrop-filter: blur(10px);
  border: 1px solid rgba(212,175,55,0.35);
  font-size: 0.82rem; color: #fff;
}
.cf-stats b { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--gold-light); }

/* sound + play controls */
.cf-controls {
  position: absolute; right: 18px; bottom: 18px; z-index: 3;
  display: flex; gap: 9px;
}
.cf-controls button {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(4,6,14,0.55); backdrop-filter: blur(10px);
  color: #fff; font-size: 0.95rem; display: grid; place-items: center;
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1.5), background 0.3s;
}
.cf-controls button:hover { background: var(--gold); color: #10131f; transform: scale(1.1); }

/* scroll cue */
.cf-cue {
  position: absolute; left: 50%; translate: -50% 0; bottom: 20px; z-index: 3;
  width: 24px; height: 40px; border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.4);
}
.cf-cue::after {
  content: ''; position: absolute; left: 50%; top: 8px; translate: -50% 0;
  width: 3px; height: 7px; border-radius: 9px; background: var(--gold);
  animation: cueDrop 1.9s ease-in-out infinite;
}
@keyframes cueDrop { 0%,100% { transform: translate(-50%, 0); opacity: 1; } 60% { transform: translate(-50%, 14px); opacity: 0.2; } }

/* night gallery strip below the film */
.night-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.night-strip figure {
  margin: 0; border-radius: 16px; overflow: hidden; position: relative;
  aspect-ratio: 16/10; border: 1px solid var(--glass-border);
  transition: transform 0.5s cubic-bezier(.2,.9,.3,1.2);
}
.night-strip figure:hover { transform: translateY(-6px) scale(1.02); }
.night-strip img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s cubic-bezier(.2,.8,.3,1); }
.night-strip figure:hover img { transform: scale(1.08); }
.night-strip figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.22) 50%, transparent 64%);
  background-size: 260% 100%; background-position: -150% 0;
  transition: background-position 1s ease;
}
.night-strip figure:hover::after { background-position: 230% 0; }
@media (max-width: 700px) {
  .night-strip { grid-template-columns: repeat(2, 1fr); }
  .campus-film { min-height: 72vh; }
  .cf-controls { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .campus-film video, .campus-film .cf-poster, .campus-film::after,
  .cf-cue::after, .cf-eyebrow i { animation: none !important; transform: none !important; }
}