/* ================================================================
   VISUAL RHYTHM DESIGN SYSTEM — BILL C. MYERS
   Palette: Deep blacks + crisp whites + velvet gold ignition
   Typography: DM Serif Display (Scholar) + Outfit (Catalyst)
   ================================================================ */

:root {
  --black: #0A0A0A;
  --deep: #101010;
  --charcoal: #1A1A1A;
  --smoke: #252525;
  --graphite: #333333;
  --ash: #888888;
  --silver: #BBBBBB;
  --pearl: #D5D5D0;
  --white: #F5F5F0;
  --cream: #E8E4DC;
  --ignition: #C4841D;
  --ignition-glow: #D4941D;
  --ignition-deep: #8B5E15;
  --ignition-soft: rgba(196, 132, 29, 0.12);
  --ignition-faint: rgba(196, 132, 29, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, .headline { font-family: 'DM Serif Display', serif; font-weight: 400; line-height: 1.15; }
.label { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ignition); display: block; margin-bottom: 1.5rem; }
.section-intro { font-size: 1.05rem; color: var(--silver); max-width: 600px; line-height: 1.8; }

/* ========== NAVIGATION ========== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.2rem 6vw;
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(to bottom, rgba(10,10,10,0.97), rgba(10,10,10,0.8), transparent);
  transition: all 0.4s ease;
}
nav.scrolled { background: rgba(10,10,10,0.98); backdrop-filter: blur(12px); border-bottom: 1px solid var(--smoke); }
.nav-logo { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: var(--white); letter-spacing: 0.04em; }
.nav-logo span { color: var(--ignition); }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); text-decoration: none; transition: color 0.3s ease; position: relative; }
.nav-links a:hover { color: var(--ignition); }
.nav-links a.active { color: var(--ignition); }
.nav-links a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: var(--ignition); }
.nav-cta { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.6rem 1.5rem; background: transparent; border: 1px solid var(--ignition); color: var(--ignition); text-decoration: none; transition: all 0.3s ease; }
.nav-cta:hover { background: var(--ignition); color: var(--black); }

/* ========== SHARED ========== */
.page { display: none; }
.page.active { display: block; }
.spotlight-divider { height: 1px; background: linear-gradient(to right, transparent 5%, var(--ignition) 50%, transparent 95%); opacity: 0.3; }
.section-pad { padding: 10vh 8vw; }
.btn-gold { display: inline-block; padding: 0.9rem 2.5rem; background: var(--ignition); color: var(--black); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: all 0.3s ease; }
.btn-gold:hover { background: var(--ignition-glow); box-shadow: 0 0 30px rgba(196,132,29,0.25); }
.btn-outline { display: inline-block; padding: 0.9rem 2.5rem; border: 1px solid var(--ash); color: var(--silver); font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: all 0.3s ease; }
.btn-outline:hover { border-color: var(--ignition); color: var(--ignition); }

/* ==========================================
   HOME PAGE
   ========================================== */

/* HERO */
.hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 8vw; position: relative; overflow: hidden; }
.hero-image { position: relative; height: 100vh; overflow: hidden; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: contrast(1.08) brightness(0.92); }
.hero-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--black) 0%, transparent 30%), linear-gradient(to top, var(--black) 0%, transparent 25%); z-index: 2; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 50% 40% at 65% 45%, rgba(196,132,29,0.07) 0%, transparent 70%), radial-gradient(ellipse 30% 50% at 15% 70%, rgba(196,132,29,0.03) 0%, transparent 50%); z-index: 1; }
.hero-content { position: relative; z-index: 2; max-width: 850px; }
.hero-name { font-size: clamp(3.5rem, 7.5vw, 6.5rem); color: var(--white); margin-bottom: 0.2em; letter-spacing: -0.02em; }
.hero-name .dot { color: var(--ignition); }
.hero-tagline { font-family: 'DM Serif Display', serif; font-style: italic; font-size: clamp(1.05rem, 2vw, 1.45rem); color: var(--silver); margin-bottom: 2.5rem; max-width: 550px; }
.hero-creds { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 2.5rem; }
.hero-creds span { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); padding-right: 1.2rem; border-right: 1px solid var(--smoke); }
.hero-creds span:last-child { border-right: none; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-scroll { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; animation: pulse 2.5s ease-in-out infinite; }
.hero-scroll span { font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ash); }
.hero-scroll .line { width: 1px; height: 35px; background: linear-gradient(to bottom, var(--ignition), transparent); }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* THESIS */
.thesis { padding: 12vh 8vw; display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; background: var(--deep); }
.thesis-text h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--white); margin-bottom: 1.5rem; }
.thesis-text h2 em { font-style: italic; color: var(--ignition); }
.thesis-text p { font-size: 1rem; color: var(--silver); max-width: 500px; margin-bottom: 1.2rem; line-height: 1.8; }
.thesis-image { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.thesis-image img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) brightness(0.95); }
.thesis-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: linear-gradient(to top, var(--deep), transparent); }
.thesis-image .caption { position: absolute; bottom: 1.2rem; left: 1.2rem; z-index: 2; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }

/* 3 C's PREVIEW */
.cs-preview { padding: 12vh 8vw; background: var(--black); }
.cs-preview .label, .cs-preview h2 { text-align: center; }
.cs-preview h2 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 6vh; }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.cs-card { padding: 2.5rem 2rem; background: var(--charcoal); position: relative; overflow: hidden; transition: background 0.4s ease; }
.cs-card:hover { background: var(--smoke); }
.cs-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--ignition); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; }
.cs-card:hover::before { transform: scaleX(1); }
.cs-num { font-family: 'DM Serif Display', serif; font-size: 3.5rem; color: var(--ignition); opacity: 0.15; line-height: 1; margin-bottom: 0.8rem; }
.cs-card h3 { font-size: 1.4rem; margin-bottom: 0.8rem; }
.cs-card p { font-size: 0.9rem; color: var(--silver); line-height: 1.7; }
.cs-preview .cs-cta { text-align: center; margin-top: 4vh; }

/* TOPICS PREVIEW */
.topics-home { padding: 10vh 8vw; background: var(--deep); }
.topics-home h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 4vh; }
.topics-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; }
.topic-mini { padding: 2rem 1.5rem; background: var(--charcoal); text-align: center; transition: background 0.4s ease; cursor: pointer; }
.topic-mini:hover { background: var(--smoke); }
.topic-mini .t-num { font-size: 0.6rem; letter-spacing: 0.2em; color: var(--ignition); margin-bottom: 0.6rem; }
.topic-mini h4 { font-size: 0.95rem; line-height: 1.3; margin-bottom: 0.5rem; }
.topic-mini p { font-size: 0.75rem; color: var(--ash); }

/* ENDORSEMENT */
.endorsement { padding: 10vh 8vw; background: var(--black); text-align: center; position: relative; }
.endorsement blockquote { font-family: 'DM Serif Display', serif; font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.8rem); color: var(--cream); max-width: 750px; margin: 0 auto 1.5rem; line-height: 1.6; position: relative; }
.endorsement blockquote::before { content: '\201C'; font-size: 5rem; color: var(--ignition); opacity: 0.25; position: absolute; top: -1.5rem; left: -0.8rem; line-height: 1; }
.endorsement cite { font-style: normal; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); }

/* CREDENTIALS BAR */
.cred-bar { padding: 6vh 8vw; background: var(--charcoal); border-top: 1px solid var(--smoke); border-bottom: 1px solid var(--smoke); }
.cred-bar h2 { font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; text-align: center; margin-bottom: 3.5vh; color: var(--ash); font-family: 'Outfit', sans-serif; font-weight: 600; }
.cred-row { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; }
.cred-item { text-align: center; padding: 1.2rem 2.5rem 1.8rem; border: none; border-right: 1px solid var(--ignition-deep); transition: all 0.4s ease; }
.cred-item:last-child { border-right: none; }
.cred-item { cursor: pointer; position: relative; }
.cred-item:hover { background: rgba(196,132,29,0.06); }
.cred-item:hover .cs { color: var(--ignition-glow); }
.cred-item:hover .ct { color: var(--cream); }
.cred-item::after { content: 'View'; position: absolute; bottom: 0.3rem; left: 50%; transform: translateX(-50%); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ignition); opacity: 0; transition: opacity 0.3s ease; font-family: 'Outfit', sans-serif; font-weight: 500; }
.cred-item:hover::after { opacity: 0.7; }

/* CREDENTIAL MODAL */
.cred-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,10,10,0.92); backdrop-filter: blur(8px); z-index: 2000; justify-content: center; align-items: center; padding: 2rem; }
.cred-modal-overlay.active { display: flex; }
.cred-modal { position: relative; max-width: 620px; width: 100%; max-height: 85vh; background: var(--charcoal); border: 1px solid var(--ignition-deep); overflow: hidden; animation: modalIn 0.3s ease; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.cred-modal-header { padding: 1.5rem 2rem 1rem; border-bottom: 1px solid var(--smoke); }
.cred-modal-header .cs { font-family: 'Outfit', sans-serif; font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ignition); margin-bottom: 0.3rem; }
.cred-modal-header .ct { font-family: 'DM Serif Display', serif; font-size: 1.2rem; color: var(--white); }
.cred-modal-body { padding: 1.5rem 2rem; overflow-y: auto; max-height: calc(85vh - 8rem); }
.cred-modal-body img { width: 100%; display: block; border: 1px solid var(--smoke); }
.cred-modal-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: none; color: var(--ash); font-size: 1.5rem; cursor: pointer; transition: color 0.3s ease; line-height: 1; z-index: 3; }
.cred-modal-close:hover { color: var(--ignition); }
@media (max-width: 768px) {
  .cred-modal { max-width: 95vw; }
  .cred-modal-header { padding: 1.2rem 1.5rem 0.8rem; }
  .cred-modal-body { padding: 1rem 1.5rem; }
}
.cred-item .cs { font-family: 'DM Serif Display', serif; font-size: 1.05rem; color: var(--ignition); margin-bottom: 0.3rem; letter-spacing: 0.02em; text-transform: none; transition: color 0.3s ease; }
.cred-item .ct { font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 400; color: var(--white); margin-bottom: 0.2rem; letter-spacing: 0.04em; }
.cred-item .cd { font-size: 0.65rem; color: var(--ash); line-height: 1.4; letter-spacing: 0.02em; }
@media (max-width: 768px) {
  .cred-row { flex-direction: column; gap: 0; }
  .cred-item { border-right: none; border-bottom: 1px solid var(--ignition-deep); padding: 1.5rem 2rem; }
  .cred-item:last-child { border-bottom: none; }
}

/* CTA */
.cta-section { padding: 10vh 8vw; background: var(--black); text-align: center; }
.cta-section h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 1rem; }
.cta-section p { color: var(--silver); margin-bottom: 2.5rem; font-size: 1rem; }
.cta-section .btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ==========================================
   SPEAKING PAGE
   ========================================== */
.speaking-hero { padding: 0; background: var(--black); position: relative; }
.speaking-hero-banner { position: relative; width: 100%; max-height: 55vh; overflow: hidden; }
.speaking-hero-banner img { width: 100%; height: 55vh; object-fit: cover; object-position: center 20%; display: block; filter: contrast(1.05) brightness(0.92); }
.speaking-hero-banner-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to top, var(--black) 0%, transparent 100%); }
.speaking-hero .content { position: relative; z-index: 2; max-width: 800px; padding: 4vh 8vw 10vh; }
.speaking-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.5rem; }
.speaking-hero p { font-size: 1.05rem; color: var(--silver); margin-bottom: 1rem; max-width: 650px; }

/* PATHWAYS */
.pathways { padding: 8vh 8vw; background: var(--deep); }
.pathways h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 4vh; text-align: center; }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.path-card { padding: 2.5rem 2rem; background: var(--charcoal); border-top: 2px solid transparent; transition: all 0.4s ease; cursor: pointer; }
.path-card:hover { background: var(--smoke); border-top-color: var(--ignition); }
.path-card .path-label { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ignition); margin-bottom: 0.8rem; }
.path-card h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.path-card p { font-size: 0.85rem; color: var(--ash); line-height: 1.6; }
.path-card ul { list-style: none; margin-top: 1rem; }
.path-card ul li { font-size: 0.8rem; color: var(--silver); padding: 0.3rem 0; padding-left: 1rem; position: relative; }
.path-card ul li::before { content: '—'; position: absolute; left: 0; color: var(--ignition); }

/* TOPICS */
.topics-full { padding: 10vh 8vw; background: var(--black); }
.topics-full h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 5vh; }
.topic-block { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; padding: 3rem 0; border-bottom: 1px solid var(--smoke); }
.topic-block:last-child { border-bottom: none; }
.topic-num { font-family: 'DM Serif Display', serif; font-size: 3rem; color: var(--ignition); opacity: 0.2; line-height: 1; text-align: right; padding-top: 0.2rem; }
.topic-content h3 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.topic-content .tagline { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 0.95rem; color: var(--ignition); margin-bottom: 1rem; }
.topic-content p { font-size: 0.95rem; color: var(--silver); line-height: 1.8; max-width: 600px; }
.topic-content .audience { margin-top: 0.8rem; font-size: 0.75rem; color: var(--ash); letter-spacing: 0.1em; text-transform: uppercase; }

/* FORMATS */
.formats { padding: 10vh 8vw; background: var(--deep); }
.formats h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 4vh; }
.format-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.format-card { padding: 2rem 1.5rem; background: var(--charcoal); transition: background 0.4s ease; }
.format-card:hover { background: var(--smoke); }
.format-card h4 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--white); }
.format-card .dur { font-size: 0.7rem; color: var(--ignition); letter-spacing: 0.1em; margin-bottom: 0.8rem; }
.format-card p { font-size: 0.82rem; color: var(--ash); line-height: 1.6; }

/* ==========================================
   JOURNEY PAGE
   ========================================== */
.journey-hero { padding: 18vh 8vw 10vh; background: var(--black); }
.journey-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.5rem; }
.journey-hero p { font-size: 1.05rem; color: var(--silver); max-width: 600px; }

.movement { padding: 10vh 8vw; }
.movement:nth-child(odd) { background: var(--deep); }
.movement:nth-child(even) { background: var(--black); }
.movement .label { margin-bottom: 1rem; }
.movement h2 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 1.5rem; }
.movement p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--silver); max-width: 700px; line-height: 1.8; margin-bottom: 1.2rem; }

.movement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
.movement-photo { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.movement-photo img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.5s ease; }
.movement-photo:hover img { filter: brightness(1.1); }
.movement-photo .photo-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.2rem 1rem; background: linear-gradient(to top, rgba(10,10,10,0.95), transparent); }
.movement-photo .photo-cap strong { display: block; font-family: 'DM Serif Display', serif; font-size: 1rem; font-weight: 400; color: var(--white); margin-bottom: 0.2rem; }
.movement-photo .photo-cap span { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }

.pull-quote { border-left: 2px solid var(--ignition); padding-left: 2rem; margin: 3rem 0; max-width: 650px; }
.pull-quote blockquote { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 1.2rem; color: var(--cream); line-height: 1.6; }
.pull-quote cite { display: block; margin-top: 0.8rem; font-style: normal; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ash); }

/* ==========================================
   BOOK PAGE
   ========================================== */
.book-hero { padding: 18vh 8vw 8vh; background: var(--black); }
.book-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.5rem; }
.book-hero .subtitle { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 1.1rem; color: var(--ignition); margin-bottom: 2rem; }

.awards-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; padding: 6vh 8vw; background: var(--deep); }
.award-cell { padding: 1.5rem 1rem; background: var(--charcoal); text-align: center; }
.award-cell .award-org { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ignition); margin-bottom: 0.3rem; }
.award-cell .award-name { font-family: 'DM Serif Display', serif; font-size: 0.85rem; color: var(--white); }

/* ==========================================
   MEDIA PAGE
   ========================================== */
.media-hero { padding: 18vh 8vw 8vh; background: var(--black); }
.media-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.5rem; }

.bio-section { padding: 8vh 8vw; background: var(--deep); }
.bio-section h2 { font-size: 1.6rem; margin-bottom: 2rem; }
.bio-text { column-count: 2; column-gap: 3rem; font-size: 0.92rem; color: var(--silver); line-height: 1.8; }
.bio-text p { margin-bottom: 1rem; }

.interview-topics { padding: 8vh 8vw; background: var(--black); }
.interview-topics h2 { font-size: 1.6rem; margin-bottom: 3vh; }
.int-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.int-item { padding: 1.5rem; border-left: 2px solid var(--smoke); transition: border-color 0.3s ease; }
.int-item:hover { border-color: var(--ignition); }
.int-item h4 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.int-item p { font-size: 0.82rem; color: var(--ash); }

/* ==========================================
   CONNECT PAGE
   ========================================== */
.connect-hero { padding: 18vh 8vw 10vh; background: var(--black); text-align: center; }
.connect-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.5rem; }
.connect-hero p { font-size: 1.05rem; color: var(--silver); max-width: 550px; margin: 0 auto 3rem; }

.connect-paths { padding: 6vh 8vw; background: var(--deep); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.connect-card { padding: 3rem 2rem; background: var(--charcoal); text-align: center; transition: background 0.4s ease; }
.connect-card:hover { background: var(--smoke); }
.connect-card .cc-icon { font-size: 2rem; margin-bottom: 1rem; }
.connect-card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.connect-card p { font-size: 0.85rem; color: var(--ash); line-height: 1.6; margin-bottom: 1.5rem; }

/* ========== FOOTER ========== */
footer { padding: 4vh 8vw; background: var(--black); border-top: 1px solid var(--smoke); display: flex; justify-content: space-between; align-items: center; }
footer .fl { font-size: 0.7rem; color: var(--ash); }
footer .fr { font-family: 'DM Serif Display', serif; font-size: 0.8rem; }
footer .fr a { color: var(--ignition); text-decoration: none; }

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; } .hero-image { height: 50vh; }
  .thesis, .movement-grid { grid-template-columns: 1fr; }
  .cs-grid, .path-grid, .format-grid { grid-template-columns: 1fr; }
  .cred-row, .connect-paths { grid-template-columns: 1fr; }
  .topics-strip { grid-template-columns: repeat(3, 1fr); }
  .awards-grid { grid-template-columns: repeat(3, 1fr); }
  .bio-text { column-count: 1; }
  .int-grid { grid-template-columns: 1fr; }
  nav { padding: 1rem 5vw; }
  .nav-links { display: none; }
}
/* ==========================================
   ANIMATION SYSTEM — Visual Rhythm
   ========================================== */

/* --- Base: everything starts invisible --- */
.anim {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Slide from left (photos, pull-quotes) --- */
.anim-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Slide from right (hero image, alternate photos) --- */
.anim-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Scale up (book cover, topic numbers) --- */
.anim-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s ease-out,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Fade only (endorsement quotes) --- */
.anim-fade {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.anim-fade.visible {
  opacity: 1;
}

/* --- Stagger delays for sequenced reveals --- */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.22s; }
.delay-3 { transition-delay: 0.34s; }
.delay-4 { transition-delay: 0.46s; }
.delay-5 { transition-delay: 0.58s; }
.delay-6 { transition-delay: 0.7s; }

/* --- Hero entrance: staged curtain rise --- */
.hero .label { opacity: 0; transform: translateY(16px); transition: all 0.6s ease 0.3s; }
.hero .hero-name { opacity: 0; transform: translateY(24px); transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s; }
.hero .hero-tagline { opacity: 0; transform: translateY(20px); transition: all 0.7s ease 0.8s; }
.hero .hero-creds { opacity: 0; transform: translateY(16px); transition: all 0.6s ease 1.1s; }
.hero .hero-btns { opacity: 0; transform: translateY(16px); transition: all 0.6s ease 1.4s; }
.hero .hero-scroll { opacity: 0; transition: opacity 0.8s ease 1.8s; }
.hero .hero-image { opacity: 0; transform: translateX(60px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s; }

.hero.entered .label,
.hero.entered .hero-name,
.hero.entered .hero-tagline,
.hero.entered .hero-creds,
.hero.entered .hero-btns,
.hero.entered .hero-scroll { opacity: 1; transform: translateY(0); }
.hero.entered .hero-image { opacity: 1; transform: translateX(0); }

/* --- Photo reveal: gold border animates in --- */
.movement-photo {
  position: relative;
  overflow: hidden;
}
.movement-photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ignition);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.movement-photo.visible::after {
  transform: scaleX(1);
}

/* --- Endorsement: quote arrives, then attribution --- */
.endorsement blockquote {
  transition: opacity 1s ease, transform 0.8s ease;
}
.endorsement cite {
  transition: opacity 0.8s ease 0.5s;
}
.endorsement.anim-fade blockquote { opacity: 0; transform: translateY(12px); }
.endorsement.anim-fade cite { opacity: 0; }
.endorsement.anim-fade.visible blockquote { opacity: 1; transform: translateY(0); }
.endorsement.anim-fade.visible cite { opacity: 1; }

/* --- Topic blocks: number punches in, content slides --- */
.topic-block .topic-num {
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.topic-block .topic-content {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.6s ease 0.15s;
}
.topic-block.visible .topic-num {
  opacity: 1;
  transform: scale(1);
}
.topic-block.visible .topic-content {
  opacity: 1;
  transform: translateX(0);
}

/* --- CTA section pulse --- */
.cta-section .btn-gold {
  position: relative;
  overflow: hidden;
}
.cta-section .btn-gold::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transition: width 0.6s ease, height 0.6s ease, top 0.6s ease, left 0.6s ease;
}
.cta-section .btn-gold:hover::after {
  width: 300px; height: 300px; top: -100px; left: -100px;
}

/* --- Page transitions --- */
.page {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.page.active {
  opacity: 1;
}

/* --- Scroll indicator pulse --- */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(6px); }
}
.hero-scroll .line {
  animation: scrollPulse 2s ease-in-out infinite;
}

/* --- Gold accent line draw --- */
@keyframes lineReveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.spotlight-divider.visible {
  animation: lineReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: left;
}

/* --- Credential bar: items stagger in --- */
.cred-bar .credential {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
.cred-bar.visible .credential:nth-child(1) { transition-delay: 0.05s; }
.cred-bar.visible .credential:nth-child(2) { transition-delay: 0.15s; }
.cred-bar.visible .credential:nth-child(3) { transition-delay: 0.25s; }
.cred-bar.visible .credential { opacity: 1; transform: translateY(0); }

/* --- Reduced motion: respect accessibility --- */
@media (prefers-reduced-motion: reduce) {
  .anim, .anim-left, .anim-right, .anim-scale, .anim-fade,
  .hero .label, .hero .hero-name, .hero .hero-tagline,
  .hero .hero-creds, .hero .hero-btns, .hero .hero-scroll,
  .hero .hero-image,
  .topic-block .topic-num, .topic-block .topic-content,
  .endorsement blockquote, .endorsement cite,
  .movement-photo::after, .cred-bar .credential {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

  @media (max-width: 900px) {
    .book-hero { grid-template-columns: 1fr !important; }
    .book-hero img { max-width: 280px !important; }
  }

  


/* JOURNEY V24 STYLES */
/* JOURNEY HERO */
.journey-hero {
  min-height: 80vh;
  display: flex; align-items: flex-end;
  position: relative; overflow: hidden;
  padding: 64px 6vw 6rem;
}
.journey-hero-bg {
  position: absolute; inset: 0;
}
.journey-hero-bg img {
  width:100%; height:100%; object-fit:cover; object-position: center center;
  filter: brightness(0.28) contrast(1.1); object-position: center 20%;
}
.journey-hero-bg::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, var(--black) 0%, rgba(10,10,10,0.6) 40%, transparent 80%),
              linear-gradient(to right, rgba(10,10,10,0.5) 0%, transparent 60%);
}
.journey-hero-content { position:relative; z-index:1; max-width: 700px; }
.journey-hero-content .label { margin-bottom: 1rem; }
.journey-opening {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-style: italic;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.journey-opening em { color: var(--ignition); font-style: normal; }
.journey-subhead { font-size:1rem; color:var(--silver); max-width:540px; line-height:1.8; }

/* MOVEMENT STRUCTURE */
.movement {
  padding: 6rem 6vw;
  border-top: 1px solid rgba(255,255,255,0.04);
  position: relative;
}
.movement:nth-child(even) { background: var(--deep); }
.movement:nth-child(odd) { background: var(--black); }

.movement-marker {
  display: flex; align-items: center; gap: 1.2rem;
  margin-bottom: 3rem;
}
.movement-number {
  font-family: 'DM Serif Display', serif;
  font-size: 3.5rem; font-style: italic;
  color: var(--ignition-soft);
  line-height: 1; flex-shrink: 0;
  border-right: 1px solid rgba(196,132,29,0.2);
  padding-right: 1.2rem;
}
.movement-title-block {}
.movement-c-label {
  font-size: 0.62rem; font-weight:700; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--ignition);
  display:block; margin-bottom:0.4rem;
}
.movement-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  color: var(--white); line-height:1.1;
}

/* TWO-COLUMN CONTENT */
.movement-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.movement-body.reverse { direction: rtl; }
.movement-body.reverse > * { direction: ltr; }
.movement-body.single { grid-template-columns: 1fr; max-width: 720px; }

.movement-text p {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--silver);
  line-height: 1.85; margin-bottom: 1.4rem;
}
.movement-text p strong { color: var(--white); font-weight:500; }
.movement-text p em { color: var(--ignition); font-style: italic; }

/* PULL QUOTE */
.pull-quote {
  border-left: 2px solid var(--ignition);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  background: var(--charcoal);
}
.pull-quote-text {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--pearl);
  line-height: 1.55;
  margin-bottom: 0.8rem;
}
.pull-quote-source {
  font-size: 0.72rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color: var(--ash);
}
.pull-quote-source strong { color: var(--ignition); }

/* MOVEMENT IMAGE */
.movement-image {
  position: relative; overflow: hidden;
}
.movement-image img {
  width:100%; display:block;
  object-fit: cover;
  filter: contrast(1.05) brightness(0.9);
}
.movement-image.portrait img { aspect-ratio: 3/4; object-position: center center; }
.movement-image.landscape img { aspect-ratio: 16/9; object-position: center center; }
.movement-image.square img { aspect-ratio: 1/1; object-position: center center; }
.movement-image-caption {
  padding: 0.8rem 0 0;
  font-size: 0.7rem; color: var(--ash);
  letter-spacing: 0.05em; font-style: italic;
}

/* PARENT PORTRAITS — always paired */
.parent-portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}
.parent-portrait img {
  width:100%; display:block;
  aspect-ratio: 4/5; object-fit:cover; object-position: center center;
  filter: contrast(1.05) brightness(0.88);
}
.parent-portrait-label,
.movement .parent-portrait-label {
  padding: 0.4rem 0 0;
  font-size: clamp(0.75rem, 1vw, 0.85rem); color:var(--ash);
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.4; margin-bottom: 0;
}

/* GRANDFATHER GRID */
.grandfather-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.grandfather-grid img {
  width:100%; display:block;
  aspect-ratio: 4/5; object-fit:cover; object-position: center center;
  filter: sepia(20%) contrast(1.05) brightness(0.88);
}

/* DONNIE HARRIS — newspaper feature */
.donnie-feature {
  background: var(--charcoal);
  padding: 3rem;
  margin-top: 3rem;
  border-left: 3px solid var(--ignition);
}
.donnie-headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  color: var(--white); margin-bottom: 1.5rem;
  font-style: italic;
}
.donnie-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem; align-items: start;
}
.donnie-text p { font-size:1.05rem; color:var(--silver); line-height:1.9; margin-bottom:1.3rem; }
.donnie-text p strong { color:var(--white); font-weight:500; }
.donnie-newspaper { max-width: 495px; }
.donnie-newspaper img {
  width: 100%; display:block;
  max-width: 495px;
  box-shadow: 8px 8px 30px rgba(0,0,0,0.7);
}

/* CELEBRITY FILMSTRIP — Journey version */
.celebrity-cascade {
  padding: 5rem 6vw;
  background: var(--smoke);
}
.celebrity-cascade .cascade-grid {
  grid-template-columns: repeat(4, 1fr);
}
.cascade-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: 2.5rem;
  overflow: visible;
  position: relative;
  width: 100%;
  min-width: 0;
}
.cascade-item {
  position: relative; cursor: pointer; overflow: hidden;
}
.cascade-item img {
  width:100%; aspect-ratio: 3/4;
  object-fit:cover; object-position: center center; display:block;
  filter: grayscale(50%) brightness(0.82);
  transition: filter 0.3s ease;
}
.cascade-item:hover img { filter: grayscale(0%) brightness(1.0); }

/* Indiana Avenue */
.avenue-section {
  padding: 0;
  position: relative;
  overflow: hidden;
}
.avenue-image img {
  width:100%; display:block;
  max-height: 500px; object-fit:cover; object-position: center center;
  filter: brightness(0.5);
}
.avenue-overlay {
  position: absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center; padding: 4rem 6vw;
}
.avenue-overlay h2 {
  font-size: clamp(1.8rem, 3vw, 3rem);
  color:var(--white); margin-bottom:1rem;
}
.avenue-overlay p {
  font-size:1rem; color:var(--silver);
  max-width:600px; line-height:1.8;
}

/* VIDEO EMBED */
.video-block {
  position: relative; aspect-ratio: 16/9;
  background: var(--charcoal); overflow:hidden;
  margin-top: 2rem;
}
.video-block video { width:100%; height:100%; object-fit:cover; }
.video-play {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,0.4); cursor:pointer; transition:background 0.2s;
}
.video-play:hover { background:rgba(10,10,10,0.2); }
.play-icon { width:56px; height:56px; border:2px solid var(--ignition); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.play-icon::after { content:''; border-style:solid; border-width:9px 0 9px 16px; border-color:transparent transparent transparent var(--ignition); margin-left:4px; }
.video-label { margin-top:0.8rem; font-size:0.75rem; color:var(--ash); font-style:italic; }

/* NUVO REVIEW */
.nuvo-quote {
  padding: 4rem 6vw;
  background: var(--charcoal);
  text-align: center;
}
.nuvo-quote blockquote {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--pearl); line-height:1.6;
  max-width:760px; margin: 0 auto 1.5rem;
}
.nuvo-quote cite {
  font-size:0.75rem; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ignition); font-style:normal;
}

/* INTERFAITH / CONNECTION */
.interfaith-image {
  display:grid; grid-template-columns: repeat(3,1fr); gap:3px;
}
.interfaith-image img {
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position: center center;
  filter: brightness(0.85);
}

/* PROVOCATIVE BREAK */
.provocative-break {
  padding:6rem 6vw; background:var(--smoke); position:relative; overflow:hidden;
}
.provocative-break::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:linear-gradient(to bottom, transparent, var(--ignition), transparent);
}
.provocative-break-inner { max-width:760px; margin:0 auto; }
.provocative-break p {
  font-family:'DM Serif Display',serif; font-style:italic;
  font-size:clamp(1.3rem,2.2vw,1.85rem); line-height:1.55;
  color:var(--white); margin-bottom:1.4rem;
}
.provocative-break p strong { font-style:normal; color:var(--ignition); }
.provocative-break-attribution { font-size:0.72rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--ash); }

/* Bridge Quiz — Journey page mini-quiz variant */
.bridge-quiz .provoke-question {
  background: var(--smoke);
  position: relative;
}
.bridge-quiz .provoke-question::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: linear-gradient(to bottom, transparent, var(--ignition), transparent);
}
.bridge-attribution {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.5);
  margin-top: 1rem;
}

/* JOURNEY CTA */
.journey-cta {
  padding:7rem 6vw; background:var(--charcoal); text-align:center;
}
.journey-cta-inner { max-width:620px; margin:0 auto; }
.journey-cta h2 { font-size:clamp(2rem,3vw,2.8rem); color:var(--white); margin-bottom:1.2rem; }
.journey-cta h2 em { font-style:italic; color:var(--ignition); }
.journey-cta p { font-size:1rem; color:var(--silver); line-height:1.85; margin-bottom:2rem; }
.cta-actions { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }
.btn-primary { display:inline-block; padding:0.9rem 2rem; background:var(--ignition); color:var(--black); font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; transition:background 0.2s; }
.btn-primary:hover { background:var(--ignition-glow); }
.btn-ghost { display:inline-block; padding:0.9rem 2rem; border:1px solid rgba(196,132,29,0.4); color:var(--silver); font-size:0.78rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; transition:border-color 0.2s,color 0.2s; }
.btn-ghost:hover { border-color:var(--ignition); color:var(--ignition); }

/* FOOTER */
footer { background:var(--deep); border-top:1px solid rgba(196,132,29,0.1); padding:3rem 6vw; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.footer-logo { font-family:'DM Serif Display',serif; font-size:1rem; color:var(--white); text-decoration:none; }
.footer-nav { display:flex; gap:2rem; flex-wrap:wrap; }
.footer-nav a { font-size:0.72rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--ash); text-decoration:none; transition:color 0.2s; }
.footer-nav a:hover { color:var(--ignition); }
.footer-copy { font-size:0.7rem; color:var(--graphite); letter-spacing:0.05em; width:100%; text-align:center; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.04); }

/* Film overlay */
.film-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; pointer-events:none; align-items:center; justify-content:center; }
.film-overlay.active { display:flex; }
.film-overlay-img-wrap { position:absolute; transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94); pointer-events:none; }
.film-overlay-img-wrap img { display:block; width:100%; height:100%; object-fit:contain; background:transparent; box-shadow:0 40px 100px rgba(0,0,0,0.95), 0 0 0 1px rgba(196,132,29,0.35); }
.film-overlay-caption { position:absolute; bottom:-2.2rem; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:'Outfit',sans-serif; font-size:0.7rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--ignition); background:rgba(10,10,10,0.9); padding:0.35rem 0.9rem; }

@media(max-width:900px){
  .movement-body { grid-template-columns:1fr; gap:3rem; }
  .movement-body.reverse { direction:ltr; }
  .donnie-body { grid-template-columns:1fr; }
  .donnie-newspaper img { width:100%; }
  .cascade-grid { grid-template-columns:repeat(2,1fr); }
  .interfaith-image { grid-template-columns:repeat(2,1fr); }
  .nav-links { display:none; }
}

/* HISTORIC MOMENT */
.historic-moment {
  margin: 2rem 0;
  padding: 2rem;
  background: rgba(196,132,29,0.06);
  border-top: 1px solid rgba(196,132,29,0.3);
  border-bottom: 1px solid rgba(196,132,29,0.3);
}
.historic-date {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ignition);
  margin-bottom: 0.8rem;
}
.historic-context {
  font-size: 0.95rem;
  color: var(--white);
  line-height: 1.8;
  margin-bottom: 0.8rem;
  font-weight: 400;
}
.historic-mood {
  font-size: 0.9rem;
  color: var(--silver);
  line-height: 1.75;
  font-style: italic;
}

/* MMM POSTER */
.mmm-poster img {
  width: 100%;
  display: block;
  box-shadow: 6px 6px 24px rgba(0,0,0,0.6);
}

/* NUVO INLINE */
.nuvo-inline {
  padding: 1.5rem 2rem;
  background: var(--charcoal);
  border-left: 2px solid rgba(196,132,29,0.3);
}
.nuvo-inline blockquote {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--pearl);
  line-height: 1.65;
  margin-bottom: 0.8rem;
}
.nuvo-inline cite {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ignition);
  font-style: normal;
}


/* HERO LAYOUT — text left, Emmy right */


/* MINISTRY SPLIT — text left, Geshela portrait right */
.ministry-split {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 2.5rem;
  align-items: start;
  margin: 1.5rem 0;
}
.ministry-text p { font-size:1rem; color:var(--silver); line-height:1.85; margin-bottom:1.2rem; }
.ministry-text p em { color:var(--ignition); font-style:italic; }
.ministry-photo img {
  width: 100%; display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center center;
  box-shadow: 6px 6px 24px rgba(0,0,0,0.6);
  border: 1px solid rgba(196,132,29,0.15);
}

@media(max-width:900px) {
  .ministry-split { grid-template-columns: 1fr; }
}


/* GRAVESIDE — single full-width image */
.graveside-image {
  margin-top: 2.5rem;
}
.graveside-image img {
  width: 100%; display: block;
  max-height: 420px;
  object-fit: cover;
  object-position: center center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  filter: brightness(0.9) contrast(1.05);
}
.graveside-caption {
  margin-top: 1rem;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ash);
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.02em;
}


/* HERO SUBHEAD — multi-paragraph premium version */
.journey-subhead p {
  font-size: 1rem;
  color: var(--silver);
  line-height: 1.85;
  margin-bottom: 1rem;
  max-width: 600px;
}
.journey-subhead p em { color: var(--ignition); font-style: italic; }
.journey-subhead-close {
  font-style: italic;
  color: var(--pearl) !important;
  border-top: 1px solid rgba(196,132,29,0.2);
  padding-top: 1rem;
  margin-top: 0.5rem;
}

/* TESTIMONIAL BAND */
.journey-testimonials {
  padding: 6rem 6vw;
  background: var(--smoke);
  border-top: 1px solid rgba(196,132,29,0.12);
  border-bottom: 1px solid rgba(196,132,29,0.12);
}
.journey-testimonials-inner { max-width: 1200px; margin: 0 auto; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 2.5rem;
}
.journey-testimonial {
  padding: 2rem;
  background: var(--charcoal);
  border-top: 2px solid var(--ignition);
  margin: 0;
}
.journey-testimonial-text {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--pearl);
  line-height: 1.65;
  margin-bottom: 1.2rem;
}
.journey-testimonial-source {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ignition);
  line-height: 1.6;
}
.journey-testimonial-source span {
  color: var(--ash);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  display: block;
  margin-top: 0.2rem;
}

/* PLANNERS OUTCOMES LIST */
.planners-outcomes {
  list-style: none;
  padding: 0; margin: 0.5rem 0 0;
}
.planners-outcomes li {
  font-size: 0.95rem;
  color: var(--silver);
  line-height: 1.75;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-left: 1.2rem;
  position: relative;
}
.planners-outcomes li::before {
  content: '—';
  color: var(--ignition);
  position: absolute;
  left: 0;
}

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


/* BRIDGE QUOTE BANNER — full-width section separator */
.bridge-quote-banner {
  width: 100%;
  padding: 5rem 2rem;
  background: linear-gradient(180deg, rgba(196,132,29,0.06) 0%, rgba(10,10,10,0) 100%);
  border-top: 1px solid rgba(196,132,29,0.15);
  border-bottom: 1px solid rgba(196,132,29,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bridge-quote-inner {
  max-width: 900px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.bridge-quote-line {
  width: 60px;
  height: 2px;
  background: var(--ignition);
  opacity: 0.5;
}
.bridge-quote-text {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--cream);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  border: none;
}
.bridge-quote-cite {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ignition);
}
@media (max-width: 768px) {
  .bridge-quote-banner { padding: 3.5rem 1.5rem; }
  .bridge-quote-text { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }
}

/* INLINE QUOTE — replaces excess pull-quote blocks */
.inline-quote {
  margin: 2rem 0;
  padding: 1.2rem 1.5rem;
  border-left: 3px solid var(--ignition);
  background: rgba(196,132,29,0.04);
}
.inline-quote p {
  font-style: italic;
  font-size: 1rem;
  color: var(--pearl);
  line-height: 1.7;
  margin: 0 0 0.4rem;
}
.inline-quote cite {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
  font-style: normal;
}


/* ===== INDIANA AVENUE SECTION ===== */
.indiana-avenue-section {
  background: var(--black);
  border-top: 1px solid rgba(196,132,29,0.15);
  border-bottom: 1px solid rgba(196,132,29,0.15);
}

/* Mural banner */
.indiana-mural-wrap {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
}
.indiana-mural {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.55);
  display: block;
}
.indiana-mural-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem 6vw;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
}
.indiana-mural-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  color: var(--white);
  line-height: 1.2;
  margin: 0.5rem 0 0;
}
.indiana-mural-title em {
  color: var(--ignition);
  font-style: italic;
}

/* Body — text + credentials */
.indiana-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 4rem;
  padding: 4rem 6vw;
  align-items: start;
}
.indiana-text p {
  font-size: 1.05rem;
  color: var(--silver);
  line-height: 1.85;
  margin-bottom: 1.2rem;
}
.indiana-text p strong { color: var(--white); }
.indiana-text p em { color: var(--ignition); font-style: italic; }

/* Credentials sidebar */
.indiana-credentials {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 0.5rem;
}
.indiana-credential {
  border-left: 2px solid var(--ignition);
  padding-left: 1.2rem;
}
.credential-title {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ignition);
  margin-bottom: 0.3rem;
}
.credential-org {
  display: block;
  font-size: 0.9rem;
  color: var(--pearl);
  line-height: 1.4;
}

/* Legends photo grid */
.indiana-legends-wrap {
  padding: 0 6vw 4rem;
}
.indiana-legends-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 1rem;
}
.indiana-legends-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.indiana-legends-grid .cascade-item img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: grayscale(40%) brightness(0.8);
  transition: filter 0.3s ease;
}
.indiana-legends-grid .cascade-item:hover img {
  filter: grayscale(0%) brightness(1.0);
}

@media(max-width:900px) {
  .indiana-body { grid-template-columns: 1fr; }
  .indiana-legends-grid { grid-template-columns: repeat(2,1fr); }
  .indiana-mural-wrap { height: 220px; }
}


/* INDIANA JAZZ GROUP PHOTO */
.indiana-group-photo {
  margin-bottom: 0;
  display: block;
  width: 100%;
}
.indiana-group-photo img {
  width: 100%;
  display: block;
  max-height: 600px;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.92);
}
p.indiana-group-caption {
  background: var(--charcoal);
  padding: 0.9rem 1.5rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  gap: 0;
  align-items: center;
  margin: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.indiana-group-caption span {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ignition);
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
}
.indiana-group-caption .dot {
  color: var(--ash);
  font-weight: 300;
}


/* SANDY LOMAX VIDEO BLOCK */
.sandy-lomax-block {
  margin-top: 2rem;
  background: var(--charcoal);
  padding: 2rem;
}
.sandy-lomax-label {
  margin-bottom: 1rem;
}
.sandy-lomax-label p {
  font-size: 0.85rem;
  color: var(--ash);
  margin: 0.3rem 0 0;
}
.sandy-lomax-label strong { color: var(--ignition); }
.sandy-lomax-video {
  width: 100%;
  max-height: 420px;
  display: block;
  background: #000;
}


/* UPRIGHT BASS BACKGROUND */
.indiana-section {
  position: relative;
}
.indiana-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("BASE64_PLACEHOLDER");
  background-size: cover;
  background-position: center;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.indiana-section > * {
  position: relative;
  z-index: 1;
}

.cascade-item::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.78);
  color: var(--ignition, #c8a96e);
  font-size: 0.78rem;
  font-family: 'Outfit', sans-serif;
  padding: 0.55rem 0.7rem;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cascade-long::after {
  font-size: 0.68rem;
  line-height: 1.35;
  padding: 0.45rem 0.6rem;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.planners-stage-hero {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  border-radius: 0.75rem;
  margin-bottom: 2.5rem;
}
.planners-stage-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.journey-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.journey-hero-stage {
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.journey-hero-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.75rem;
}
@media (max-width: 768px) {
  .journey-hero-layout {
    grid-template-columns: 1fr;
  }
  .journey-hero-stage {
    order: -1;
  }
}

.journey-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.journey-hero-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: start;
  margin-top: -2rem;
}
.journey-hero-stage {
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 48px rgba(0,0,0,0.55);
}
.journey-hero-stage img {
  width: 100%;
  height: auto;
  min-height: 320px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.journey-hero-emmy-below {
  width: 100%;
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.journey-hero-emmy-below img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0.6rem;
}
@media (max-width: 768px) {
  .journey-hero-layout {
    grid-template-columns: 1fr;
  }
  .journey-hero-right {
    order: -1;
    margin-top: 0;
  }
}

/* ==========================================
   HAMBURGER MENU — Mobile Navigation
   ========================================== */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1100;
}
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  margin: 5px 0;
  transition: all 0.3s ease;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: rgba(10,10,10,0.98);
  backdrop-filter: blur(12px);
  padding: 2rem 6vw;
  z-index: 999;
  border-bottom: 1px solid var(--smoke);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
}
.mobile-menu a {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--smoke);
  transition: color 0.3s ease;
}
.mobile-menu a:hover,
.mobile-menu a.active { color: var(--ignition); }
.mobile-menu .mobile-cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.7rem 2rem;
  background: var(--ignition);
  color: var(--black);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
}

@media (max-width: 900px) {
  .hamburger-btn { display: block; }
  .mobile-menu { display: block; }
  .nav-cta { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-image { height: 50vh; }
  .speaking-hero { grid-template-columns: 1fr !important; }
  .speaking-hero img { max-width: 100%; }
  .book-hero { grid-template-columns: 1fr !important; }
  .book-hero img { max-width: 280px !important; }
  .journey-hero-layout { grid-template-columns: 1fr; }
  .journey-hero-right { order: -1; margin-top: 0; }
  .movement-body { grid-template-columns: 1fr; gap: 3rem; }
  .movement-body.reverse { direction: ltr; }
  .donnie-body { grid-template-columns: 1fr !important; }
  .donnie-newspaper img { width: 100%; }
  .cascade-grid { grid-template-columns: repeat(2, 1fr); }
  .interfaith-image { grid-template-columns: repeat(2, 1fr); }
  .indiana-body { grid-template-columns: 1fr; }
  .indiana-legends-grid { grid-template-columns: repeat(2, 1fr); }
  .indiana-mural-wrap { height: 220px; }
  .ministry-split { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .thesis { grid-template-columns: 1fr; }
  .cs-grid, .path-grid, .format-grid { grid-template-columns: 1fr; }
  .cred-row { flex-direction: column; }
  .connect-paths { grid-template-columns: 1fr; }
  .topics-strip { grid-template-columns: repeat(3, 1fr); }
  .awards-grid { grid-template-columns: repeat(3, 1fr); }
  .bio-text { column-count: 1; }
  .int-grid { grid-template-columns: 1fr; }
  nav { padding: 1rem 5vw; }
  .nav-links { display: none; }
  footer { flex-direction: column; text-align: center; gap: 0.8rem; }
}

@media (max-width: 480px) {
  .topics-strip { grid-template-columns: 1fr; }
  .awards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Perplexity footer link */
.pplx-link {
  font-size: 0.65rem;
  color: var(--ash);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}
.pplx-link:hover { color: var(--ignition); }

/* Credential modal text description (for non-image modals) */
.cred-modal-text-desc {
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--smoke);
  background: var(--deep);
}
.cred-modal-text-desc h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 1rem;
}
.cred-modal-text-desc p {
  font-size: 0.9rem;
  color: var(--silver);
  line-height: 1.7;
  max-width: 450px;
  margin: 0 auto 0.8rem;
}
.cred-modal-text-desc .cred-date {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ignition);
  margin-top: 1rem;
}

/* ================================================================
   PROGRESSIVE DISCLOSURE — Expand/Collapse Movements
   ================================================================ */

/* The collapsible wrapper */
.movement-collapsible .movement-preview {
  position: relative;
}

/* The expandable detail content — hidden by default */
.movement-collapsible .movement-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease 0.1s;
}

.movement-collapsible.expanded .movement-detail {
  max-height: 6000px; /* generous max */
  opacity: 1;
  transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s ease 0.15s;
}

/* Expand button */
.expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: transparent;
  border: 1px solid var(--ignition);
  color: var(--ignition);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.8rem 1.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1.5rem;
}
.expand-btn:hover {
  background: var(--ignition);
  color: var(--black);
}
.expand-btn .expand-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 0.9rem;
}
.movement-collapsible.expanded .expand-btn .expand-arrow {
  transform: rotate(180deg);
}

/* Preview card layout — headline + image side by side */
.movement-preview-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.movement-preview-layout.reverse {
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}
.movement-preview-layout.reverse > * {
  direction: ltr;
}

/* Preview headline styling — billboard scale to counterbalance the photo */
.movement-preview-headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.6rem, 3.2vw + 1.4rem, 4.5rem);
  color: var(--cream);
  font-style: italic;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

/* Preview body text — proportionally larger to match headline scale */
.movement-preview-body {
  color: var(--silver);
  font-size: clamp(1.2rem, 1.1vw + 0.6rem, 1.5rem);
  line-height: 1.7;
}

/* Preview image */
.movement-preview-image {
  width: 100%;
  display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
}
.movement-preview-image.landscape {
  aspect-ratio: 4/3;
  object-position: center;
}
.movement-preview-image.contain {
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--deep);
  max-height: 450px;
}

/* Subtle divider between expanded content and next section */
.movement-collapsible .movement-detail > *:first-child {
  padding-top: 2rem;
}

@media (max-width: 768px) {
  .movement-preview-layout,
  .movement-preview-layout.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 1.5rem;
  }
}

/* ================================================================
   FIXES — Priority #3-#8
   ================================================================ */

/* PROVOCATIVE BREAK — Interactive Mini-Quiz */
.provoke-quiz {
  position: relative;
  overflow: hidden;
  margin-bottom: 4rem;
}

/* Question state */
.provoke-question {
  padding: 10vh 8vw;
  text-align: center;
  background: var(--smoke);
  transition: opacity 0.5s ease, max-height 0.7s ease;
  max-height: 600px;
  overflow: hidden;
}
.provoke-quiz.revealed .provoke-question {
  opacity: 0;
  max-height: 0;
  padding: 0 8vw;
  pointer-events: none;
}
.provoke-q-text {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  color: var(--cream);
  line-height: 1.35;
  max-width: 800px;
  margin: 0 auto 3rem;
}

/* Reveal button */
.provoke-reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2.5rem;
  background: transparent;
  border: 1px solid var(--ignition);
  color: var(--ignition);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.provoke-reveal-btn:hover {
  background: var(--ignition);
  color: var(--black);
}
.provoke-arrow {
  font-size: 1.1rem;
  animation: bounceArrow 1.8s ease-in-out infinite;
}
@keyframes bounceArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Answer state (billboard reveal) */
.provoke-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: var(--ignition);
  transition: max-height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease 0.2s;
}
.provoke-quiz.revealed .provoke-answer {
  max-height: 800px;
  opacity: 1;
}
.provoke-answer-inner {
  padding: 8vh 8vw;
  text-align: center;
}
.provoke-a-text {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--black);
  line-height: 1.1;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}
.provoke-body {
  max-width: 650px;
  margin: 0 auto;
}
.provoke-body p {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: rgba(10, 10, 10, 0.8);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.provoke-body strong {
  color: var(--black);
}
.provoke-answer .btn-gold {
  background: var(--black);
  color: var(--ignition);
}
.provoke-answer .btn-gold:hover {
  background: var(--deep);
  box-shadow: 0 0 30px rgba(10,10,10,0.3);
}

@media (max-width: 768px) {
  .provoke-q-text {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }
  .provoke-a-text {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .provoke-question {
    padding: 8vh 6vw;
  }
  .provoke-answer-inner {
    padding: 6vh 6vw;
  }
}

/* #3 — Cinematic full-bleed photo break on Home */
.cinematic-break {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 360px;
  overflow: hidden;
}
.cinematic-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  filter: contrast(1.05) brightness(0.7);
}
.cinematic-break-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--black) 0%, transparent 15%),
    linear-gradient(to top, var(--black) 0%, transparent 15%);
}

/* #3 — Warm tint on 3 C's preview section */
.cs-preview {
  background: linear-gradient(165deg, var(--black) 0%, #12100c 50%, var(--black) 100%);
}

/* #4 — Footer social links */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}
.footer-social a {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-social a:hover {
  color: var(--ignition);
}

/* #6 — Back to top button on Journey */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid var(--graphite);
  color: var(--ignition);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease;
  backdrop-filter: blur(8px);
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--smoke);
  border-color: var(--ignition);
}

/* #7 — Mobile responsive fixes: Speaking hero */
@media (max-width: 768px) {
  .speaking-hero-banner img {
    height: 35vh;
    object-position: center 25%;
  }
  .speaking-hero .content {
    padding: 3vh 6vw 8vh;
  }

  /* #7 — Mobile: Book hero */
  .book-hero {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }
  .book-hero > div:first-child {
    max-width: 240px;
    margin: 0 auto;
  }
  .book-hero > div:first-child img {
    max-width: 240px;
  }

  /* Donnie Harris home block */
  .donnie-home {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .donnie-home > div:last-child {
    max-width: 220px;
    margin: 0 auto;
    order: -1;
  }
  .donnie-home p { max-width: 100% !important; }

  /* #7 — Mobile: Pathways */
  .path-grid {
    grid-template-columns: 1fr;
  }

  /* #7 — Mobile: Format grid */
  .format-grid {
    grid-template-columns: 1fr;
  }

  /* #7 — Mobile: Topics strip */
  .topics-strip {
    grid-template-columns: 1fr 1fr;
  }

  /* #7 — Mobile: Connect cards */
  .connect-paths {
    grid-template-columns: 1fr;
  }

  /* #7 — Mobile: Awards grid */
  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* #7 — Mobile: Testimonial grid */
  #page-speaking .anim > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* #7 — Mobile: Cinematic break */
  .cinematic-break {
    height: 25vh;
    min-height: 180px;
  }

  /* #7 — Mobile: Home thesis */
  .thesis {
    grid-template-columns: 1fr !important;
  }

  /* Mobile: Home book feature */
  #page-home .section-pad > div[style*="grid-template-columns: 200px"] {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  /* Mobile: Donnie story grid */
  .donnie-body {
    grid-template-columns: 1fr !important;
  }

  /* Mobile: Ministry split */
  .ministry-split {
    grid-template-columns: 1fr !important;
  }

  /* Mobile: Media bio grid */
  .bio-section > div[style*="grid-template-columns: 250px"] {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  /* Mobile: back to top */
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }
}

/* #8 — Video poster frame styling */
.video-block-home {
  max-width: 700px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  background: #000;
  border: 1px solid var(--graphite);
  overflow: hidden;
  position: relative;
}
.video-block-home video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-block-home .video-poster-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.3);
  cursor: pointer;
  transition: background 0.3s ease;
}
.video-block-home .video-poster-overlay:hover {
  background: rgba(10, 10, 10, 0.15);
}
.video-block-home .video-poster-overlay .play-circle {
  width: 64px;
  height: 64px;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.video-block-home .video-poster-overlay:hover .play-circle {
  border-color: var(--ignition);
  background: rgba(196,132,29,0.15);
}
.video-block-home .video-poster-overlay .play-circle::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent rgba(255,255,255,0.9);
  margin-left: 4px;
}

/* ================================================================
   FEATURE #6 — Floating "Book Bill" CTA
   ================================================================ */
.floating-cta {
  position: fixed;
  bottom: 2rem;
  right: 5rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.8rem;
  background: var(--ignition);
  color: var(--black);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(196,132,29,0.4), 0 2px 8px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta:hover {
  background: #d4931f;
  box-shadow: 0 6px 30px rgba(196,132,29,0.55), 0 3px 12px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .floating-cta {
    bottom: 1rem;
    right: 50%;
    transform: translateX(50%) translateY(20px);
  }
  .floating-cta.visible {
    transform: translateX(50%) translateY(0);
  }
  .floating-cta:hover {
    transform: translateX(50%) translateY(-2px);
  }
}

/* ================================================================
   FEATURE #9 — Scroll Progress Indicator
   ================================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--ignition);
  z-index: 10000;
  width: 0%;
  transition: width 0.05s linear;
}

/* ================================================================
   FEATURE #2 — Animated Stats Counter
   ================================================================ */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--black);
  border-top: 1px solid rgba(196,132,29,0.2);
  border-bottom: 1px solid rgba(196,132,29,0.2);
  padding: 4vh 8vw;
}
.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
}
.stat-number {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  color: var(--ignition);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat-suffix {
  font-size: 0.7em;
}
.stat-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ash);
}
@media (max-width: 768px) {
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 3vh 6vw;
  }
  .stat-item {
    padding: 1rem 0.5rem;
  }
}

/* ================================================================
   FEATURE #1 — Testimonial Carousel
   ================================================================ */
.testimonial-carousel {
  position: relative;
  max-width: 750px;
  margin: 2rem auto 0;
  overflow: hidden;
  min-height: 180px;
}
.tc-track {
  position: relative;
}
.tc-slide {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.tc-slide.active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}
.tc-slide blockquote {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  color: var(--cream);
  font-size: 1.05rem;
  line-height: 1.6;
  border-left: 2px solid var(--ignition);
  padding-left: 1.5rem;
  margin: 0 0 0.8rem 0;
}
.tc-slide cite {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ash);
  font-style: normal;
  padding-left: 1.5rem;
}
.tc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.tc-btn {
  background: none;
  border: 1px solid rgba(196,132,29,0.3);
  color: var(--ignition);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.tc-btn:hover {
  border-color: var(--ignition);
  background: rgba(196,132,29,0.1);
}
.tc-pause {
  font-size: 0.65rem;
  letter-spacing: 1px;
}
.tc-dots {
  display: flex;
  gap: 0.5rem;
}
.tc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(196,132,29,0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}
.tc-dot.active {
  background: var(--ignition);
  transform: scale(1.2);
}

/* ================================================================
   FEATURE #4 — Choose Your Path Navigator
   ================================================================ */
.path-chooser {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.path-tab {
  padding: 0.7rem 1.8rem;
  background: transparent;
  border: 1px solid rgba(196,132,29,0.3);
  color: var(--silver);
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.path-tab:hover {
  border-color: var(--ignition);
  color: var(--cream);
}
.path-tab.active {
  background: var(--ignition);
  color: var(--black);
  border-color: var(--ignition);
  font-weight: 600;
}
.path-grid .path-card {
  transition: all 0.4s ease;
}
.path-grid.filtered .path-card {
  opacity: 0.15;
  transform: scale(0.97);
  pointer-events: none;
}
.path-grid.filtered .path-card.highlighted {
  opacity: 1;
  transform: scale(1.02);
  pointer-events: auto;
  border-color: var(--ignition);
  box-shadow: 0 0 40px rgba(196,132,29,0.15);
}
@media (max-width: 768px) {
  .path-chooser {
    gap: 0.5rem;
  }
  .path-tab {
    padding: 0.5rem 1rem;
    font-size: 0.6rem;
  }
}

/* ================================================================
   FEATURE #3 — 3 C's Card Flip
   ================================================================ */
.cs-card {
  perspective: 1000px;
  cursor: pointer;
}
.cs-card-inner {
  position: relative;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}
.cs-card.flipped .cs-card-inner {
  transform: rotateY(180deg);
}
.cs-card-front, .cs-card-back {
  backface-visibility: hidden;
}
.cs-card-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotateY(180deg);
  background: var(--ignition);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cs-card-back h3 {
  color: var(--black);
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
.cs-card-back p {
  color: rgba(10,10,10,0.8);
  font-size: 0.9rem;
  line-height: 1.7;
}
.cs-card-back .flip-hint {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
  margin-top: 1rem;
}
.cs-card .flip-hint-front {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(196,132,29,0.5);
  margin-top: 1rem;
}

/* ================================================================
   Dalai Lama Quote — Two-line Crescendo
   ================================================================ */
.dalai-quote {
  padding: 12vh 8vw;
  background: var(--black);
  text-align: center;
  overflow: hidden;
}
.dalai-setup {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.4;
  color: var(--silver);
  max-width: 900px;
  margin: 0 auto 1rem;
  opacity: 1;
}
.dalai-answer {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.3;
  color: var(--cream);
  max-width: 900px;
  margin: 0 auto 1.5rem;
  min-height: 1.3em;
  overflow: hidden;
  border-right: 2px solid transparent;
}
.dalai-answer.typing {
  border-right-color: var(--ignition);
  animation: dalai-blink 0.75s step-end infinite;
}
.dalai-answer.done {
  border-right-color: transparent;
}
@keyframes dalai-blink {
  from, to { border-right-color: var(--ignition); }
  50% { border-right-color: transparent; }
}
.dalai-quote-attr {
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.dalai-quote-attr.visible {
  opacity: 1;
}
@media (max-width: 768px) {
  .dalai-setup {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  }
  .dalai-answer {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }
}

/* ================================================================
   FEATURE #8 — Photo Lightbox
   ================================================================ */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10,10,10,0.95);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-content {
  position: relative;
  max-width: 85vw;
  max-height: 85vh;
}
.lightbox-content img {
  max-width: 85vw;
  max-height: 80vh;
  display: block;
  object-fit: contain;
}
.lightbox-caption {
  text-align: center;
  padding: 1rem 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--silver);
  letter-spacing: 0.05em;
}
.lightbox-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}
.lightbox-close:hover {
  color: var(--ignition);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(196,132,29,0.15);
  border: 1px solid rgba(196,132,29,0.3);
  color: var(--ignition);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.2s ease;
}
.lightbox-nav:hover {
  background: rgba(196,132,29,0.3);
}
.lightbox-prev {
  left: -3.5rem;
}
.lightbox-next {
  right: -3.5rem;
}
@media (max-width: 768px) {
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-nav {
    width: 36px;
    height: 36px;
    background: rgba(10,10,10,0.7);
  }
}



/* Optimist Convention section — mobile */
@media (max-width: 768px) {
  .anim [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .anim [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  .anim [style*="max-width: 66%"] {
    max-width: 100% !important;
  }
}

/* ==================== CAREGIVER BREAK ==================== */
.caregiver-break {
  padding: 10vh 8vw;
  background: var(--deep);
  border-top: 1px solid rgba(196,132,29,0.15);
  border-bottom: 1px solid rgba(196,132,29,0.15);
}
.caregiver-break-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.caregiver-break-headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  color: var(--cream);
  line-height: 1.35;
  margin-bottom: 2.5rem;
}
.caregiver-break-body {
  text-align: left;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}
.caregiver-break-body p {
  font-size: 0.95rem;
  color: var(--silver);
  line-height: 1.85;
  margin-bottom: 1.2rem;
}
.caregiver-break-body p:first-child {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cream);
  text-align: center;
  margin-bottom: 2rem;
}
.caregiver-break-body strong {
  color: var(--cream);
}
.caregiver-break-photos {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.caregiver-photo {
  text-align: center;
}
.caregiver-photo img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(196,132,29,0.3);
  filter: grayscale(20%);
}
.caregiver-photo-label {
  font-size: clamp(0.75rem, 1vw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 0.5rem;
}
.caregiver-break-stats-block {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.caregiver-break-stat {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ignition);
  line-height: 1.6;
  margin: 0 auto 1.5rem;
}
.caregiver-break-closing {
  font-size: 0.95rem;
  color: var(--silver);
  line-height: 1.85;
}

@media (max-width: 768px) {
  .caregiver-break {
    padding: 8vh 6vw;
  }
  .caregiver-break-photos {
    gap: 1.5rem;
  }
  .caregiver-photo img {
    width: 120px;
    height: 120px;
  }
}

/* ================================================================
   BOOK PAGE — VIDEO ENDORSEMENTS
   ================================================================ */
.book-video-endorsements {
  padding: 8vh 8vw;
  background: var(--deep);
}
.book-video-endorsements .label {
  display: block;
  margin-bottom: 3rem;
}
.book-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 960px;
  margin: 0 auto;
}
.book-video-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(196,132,29,0.15);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.book-video-card:hover {
  border-color: rgba(196,132,29,0.4);
}
.book-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--black);
  cursor: pointer;
  overflow: hidden;
}
.book-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,0.45);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}
.book-video-play:hover {
  background: rgba(10,10,10,0.25);
}
.book-video-play svg {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transition: transform 0.3s ease;
}
.book-video-play:hover svg {
  transform: scale(1.1);
}
.book-video-info {
  padding: 1.5rem;
}
.book-video-quote {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  color: var(--cream);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.book-video-cite {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ash);
}

/* Mobile: stack vertically */
@media (max-width: 700px) {
  .book-video-endorsements {
    padding: 6vh 5vw;
  }
  .book-video-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ================================================================
   HOME PAGE — EMMY CREDENTIAL SPOTLIGHT
   ================================================================ */
.emmy-spotlight {
  padding: 6vh 8vw;
  background: var(--black);
  border-top: 1px solid rgba(196,132,29,0.12);
  border-bottom: 1px solid rgba(196,132,29,0.12);
}
.emmy-spotlight-inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}
.emmy-spotlight-image {
  position: relative;
  overflow: hidden;
}
.emmy-spotlight-image img {
  width: 100%;
  display: block;
  filter: contrast(1.05);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(196,132,29,0.15);
}
.emmy-spotlight-text {
  padding: 1rem 0;
}
.emmy-spotlight-text .label {
  margin-bottom: 1rem;
  display: block;
}
.emmy-spotlight-headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--cream);
  line-height: 1.3;
  margin-bottom: 0.8rem;
}
.emmy-spotlight-detail {
  font-size: 0.85rem;
  color: var(--silver);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.emmy-spotlight-credit {
  font-size: 0.8rem;
  color: var(--ignition);
  font-style: italic;
  letter-spacing: 0.02em;
}
.emmy-spotlight-credit em {
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(196,132,29,0.4);
}

@media (max-width: 700px) {
  .emmy-spotlight {
    padding: 5vh 5vw;
  }
  .emmy-spotlight-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .emmy-spotlight-image {
    max-width: 280px;
    margin: 0 auto;
  }
  .emmy-spotlight-text .label {
    text-align: center;
  }
}







/* OVERLAY */
.popup-overlay {
  position: fixed;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(6px);
  z-index: 9999;
  padding: 20px;
}

/* POPUP BOX */
.popup-content.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 950px;
  width: 100%;
  max-height: 90vh;
  background: #111;
  border-radius: 14px;
  position: relative;
  animation: popupFade 0.3s ease;
  box-shadow: 0 0 15px #ffffff47;
}

/* REMOVE SCROLL FROM LEFT */
.popup-left {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* TEXT */
.popup-left h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.popup-left p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  color: #ccc;
}

/* IMAGE SIDE */
.popup-right {
  position: sticky;   /* ✅ IMAGE FIXED RAHEGI */
  top: 0;
  height: 100%;
}

.popup-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CLOSE BUTTON */
.popup-close {
    position: absolute;
    top: 12px;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    right: 20px;
}

/* ANIMATION */
@keyframes popupFade {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* SCROLLBAR */
.popup-content::-webkit-scrollbar {
  width: 6px;
}
.popup-content::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
}

/* MOBILE */
@media (max-width: 768px) {
  .popup-content.two-col {
    grid-template-columns: 1fr;
    max-height: 90vh;
  }
  .popup-right {
    position: relative;
    height: 220px;
  }
  .popup-left {
    padding: 1.5rem;
  }
  section.donnie-home {
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    flex-direction: column;
    }
    div#customPopup {
        max-width: 100% !important;
    }
}