/* ==========================================================================
   THE REALM CHURCH - ENTRANCE & ONE-PAGE HOMEPAGE
   Visual Direction: Dark, Cinematic, Immersive, Spiritual, Editorial, Minimal
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Reset & Global Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --color-black: #000000;
  --color-void: #050607;
  --color-ivory: #f7f4ee;
  --color-white: #ffffff;
  --color-gold-text: #cfb17d;
  --color-gold-subtle: #c4ab84;
  --color-gold-headline: #d6b06b;
  --color-gold-body: #dfb35a;
  --color-gold-light: #fff0be;
  --color-gold-glow: rgba(223, 179, 90, 0.35);

  --font-serif-editorial: 'Cormorant Garamond', 'Cinzel', Georgia, serif;
  --font-serif-heading: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-script-accent: 'Great Vibes', 'Cormorant Garamond', cursive;
  --font-sans-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hero-sans: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;

  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-dissolve: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-fluid: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-draw: cubic-bezier(0.35, 0.1, 0.25, 1);
}

/* ========================================================================== 
   WHAT WE BELIEVE — approved reference composition
   Section-scoped overrides intentionally preserve the existing observer hook.
   ========================================================================== */
#believe.believe-section {
  position: relative;
  width: 100%;
  height: min(813px, calc(100vh - 66px));
  min-height: 650px;
  max-height: 880px;
  padding: 0;
  overflow: hidden;
  display: block;
  isolation: isolate;
  background: #090806;
}

#believe .believe-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#believe .believe-bg-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 1.1s ease, transform 1.7s cubic-bezier(0.22, 1, 0.36, 1);
}

#believe.believe-in-view .believe-bg-img {
  opacity: 1;
  transform: scale(1);
}

#believe .believe-gradient-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(4, 4, 3, 0.98) 0%,
      rgba(7, 6, 5, 0.94) 19%,
      rgba(13, 11, 8, 0.84) 35%,
      rgba(26, 22, 17, 0.47) 50%,
      rgba(20, 17, 13, 0.08) 65%,
      rgba(9, 8, 6, 0) 100%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.09) 0%,
      transparent 62%,
      rgba(0, 0, 0, 0.22) 100%);
}

#believe .believe-portrait-wrap {
  position: absolute;
  right: clamp(-28px, -1.3vw, -8px);
  bottom: 0;
  z-index: 2;
  width: clamp(785px, 55.5vw, 995px);
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

#believe .believe-couple-img {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0;
  transform: translate3d(22px, 18px, 0);
  filter: drop-shadow(-18px 12px 25px rgba(0, 0, 0, 0.18));
  transition: opacity 1.15s ease 0.12s, transform 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

#believe.believe-in-view .believe-couple-img {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#believe .believe-stage {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

#believe .believe-content-col {
  position: relative;
  width: min(620px, 42vw);
  max-width: 620px;
  margin-left: clamp(72px, 7.65vw, 137px);
  padding: 0 0 clamp(0px, 0.9vh, 8px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  box-sizing: border-box;
}

#believe .believe-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 17px;
  width: 100%;
  margin: 0 0 22px;
}

#believe .believe-eyebrow {
  flex: 0 0 auto;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(11px, 0.94vw, 17px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.29em;
  color: #f3f0e9;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.75s ease 0.1s, transform 0.75s ease 0.1s;
}

#believe .believe-gold-rule {
  flex: 0 0 clamp(48px, 3.65vw, 65px);
  max-width: none;
  height: 1px;
  background: linear-gradient(90deg, #d8aa55, rgba(216, 170, 85, 0.72));
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.75s ease 0.2s, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

#believe .believe-main-title {
  margin: 0 0 25px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.88;
}

#believe .believe-title-what,
#believe .believe-title-word {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: normal;
  text-transform: uppercase;
}

#believe .believe-title-what {
  font-size: clamp(62px, 5.2vw, 93px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0.035em;
  color: #f7f5f1;
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.8s ease 0.22s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;
}

#believe .believe-title-word {
  display: block;
  margin-top: 10px;
  font-size: clamp(72px, 6.7vw, 120px);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: 0.015em;
  color: #e0ad56;
  background: linear-gradient(100deg, #efc06d 0%, #d6a04b 56%, #bb8131 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 1s ease 0.36s, clip-path 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.36s;
}

#believe .believe-title-word::after {
  content: '';
  position: absolute;
  left: 38%;
  right: -7%;
  bottom: -9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d89f3f 55%, transparent);
  box-shadow: 0 0 8px rgba(227, 166, 62, 0.9);
}

#believe .believe-subtitle {
  display: flex;
  align-items: center;
  gap: clamp(15px, 1.45vw, 26px);
  margin: 0 0 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(10px, 0.93vw, 16.5px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.28em;
  color: #f0ede8;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s;
}

#believe .believe-sub-dot {
  color: #dda84e;
  font-size: 15px;
  line-height: 0;
  letter-spacing: 0;
}

#believe .believe-sub-rule {
  width: 91px;
  height: 1px;
  margin: 0 0 35px 5px;
  background: linear-gradient(90deg, #d7a64f 0 78%, rgba(215, 166, 79, 0.25) 78% 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.75s ease 0.62s, transform 0.85s ease 0.62s;
}

#believe .believe-body-copy {
  max-width: 610px;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.17vw, 20px);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: -0.015em;
  color: #f0eeea;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease 0.72s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.72s;
}

#believe.believe-in-view .believe-eyebrow,
#believe.believe-in-view .believe-title-what,
#believe.believe-in-view .believe-subtitle,
#believe.believe-in-view .believe-body-copy {
  opacity: 1;
  transform: translate(0, 0);
}

#believe.believe-in-view .believe-title-word {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

#believe.believe-in-view .believe-gold-rule,
#believe.believe-in-view .believe-sub-rule {
  opacity: 1;
  transform: scaleX(1);
}

@media (max-width: 1100px) {
  #believe.believe-section {
    height: 720px;
    min-height: 720px;
  }

  #believe .believe-content-col {
    width: min(500px, 49vw);
    margin-left: clamp(38px, 5vw, 62px);
  }

  #believe .believe-portrait-wrap {
    right: -90px;
    width: 760px;
  }

  #believe .believe-body-copy {
    max-width: 470px;
    font-size: 15px;
  }
}

@media (max-width: 820px) {
  #believe.believe-section {
    height: auto;
    min-height: 900px;
    padding: 0;
  }

  #believe .believe-bg-img {
    object-position: 63% center;
  }

  #believe .believe-gradient-overlay {
    background:
      linear-gradient(180deg, rgba(6, 5, 4, 0.94) 0%, rgba(7, 6, 5, 0.88) 47%, rgba(8, 7, 5, 0.2) 72%, rgba(3, 3, 2, 0.12) 100%),
      linear-gradient(90deg, rgba(5, 4, 3, 0.72), rgba(5, 4, 3, 0.08));
  }

  #believe .believe-stage {
    height: auto;
    min-height: 900px;
    align-items: flex-start;
  }

  #believe .believe-content-col {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 72px 38px 470px;
    align-items: flex-start;
    text-align: left;
    box-sizing: border-box;
  }

  #believe .believe-portrait-wrap {
    right: -72px;
    width: min(760px, 108vw);
    height: 59%;
  }

  #believe .believe-eyebrow-row,
  #believe .believe-main-title,
  #believe .believe-subtitle {
    justify-content: flex-start;
    align-items: flex-start;
  }

  #believe .believe-title-what { font-size: clamp(54px, 10vw, 76px); }
  #believe .believe-title-word { font-size: clamp(68px, 13vw, 98px); }
  #believe .believe-subtitle { font-size: clamp(9px, 1.8vw, 13px); }
  #believe .believe-body-copy {
    width: 100%;
    max-width: 580px;
    font-size: 15px;
    overflow-wrap: break-word;
  }
}

@media (max-width: 540px) {
  #believe.believe-section,
  #believe .believe-stage {
    min-height: 810px;
  }

  #believe .believe-content-col {
    padding: 50px 21px 390px;
  }

  #believe .believe-eyebrow-row { margin-bottom: 17px; }
  #believe .believe-eyebrow { font-size: 9px; }
  #believe .believe-main-title { margin-bottom: 20px; }
  #believe .believe-title-what { font-size: 45px; }
  #believe .believe-title-word { margin-top: 7px; font-size: 58px; }
  #believe .believe-subtitle {
    gap: 8px;
    font-size: 8px;
    letter-spacing: 0.18em;
  }
  #believe .believe-sub-rule { margin-bottom: 23px; }
  #believe .believe-body-copy { font-size: 12.5px; line-height: 1.68; }
  #believe .believe-portrait-wrap {
    right: -45px;
    width: 118vw;
    height: 48%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #believe .believe-bg-img,
  #believe .believe-couple-img,
  #believe .believe-title-what,
  #believe .believe-title-word,
  #believe .believe-eyebrow,
  #believe .believe-subtitle,
  #believe .believe-body-copy,
  #believe .believe-gold-rule,
  #believe .believe-sub-rule {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

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

html {
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-black);
  color: var(--color-ivory);
  font-family: var(--font-sans-ui);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Global Cinematic Scroll Reveal & Motion System Tokens
   -------------------------------------------------------------------------- */
:root {
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-dissolve: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-fluid: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-draw: cubic-bezier(0.35, 0.1, 0.25, 1);
}

.reveal-item,
[data-reveal] {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 1.35s var(--ease-cinematic), transform 1.35s var(--ease-cinematic);
  will-change: opacity, transform;
}

.reveal-item.is-revealed,
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Delay Helpers */
.stagger-1 { transition-delay: 0.15s; }
.stagger-2 { transition-delay: 0.3s; }
.stagger-3 { transition-delay: 0.45s; }
.stagger-4 { transition-delay: 0.6s; }
.stagger-5 { transition-delay: 0.75s; }

/* --------------------------------------------------------------------------
   ==========================================================================
   PART 1: THE REALM ENTRANCE EXPERIENCE (HERO)
   ==========================================================================
   -------------------------------------------------------------------------- */

.environment-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--color-black);
  z-index: 10;
  pointer-events: none;
  transition: opacity 1.4s var(--ease-dissolve);
}

.video-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.video-cinematic-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 75% at 50% 50%,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.28) 65%,
    rgba(0, 0, 0, 0.52) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Entry Experience Foreground Stage */
.entry-experience {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
  text-align: center;
  transition: opacity 1.3s var(--ease-dissolve), transform 1.3s var(--ease-dissolve);
}

.composition-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  transform: translateY(-1.5vh);
}

/* 1. Complete Realm Branding Lockup: TR | THE REALM CHURCH */
.realm-lockup-wrapper {
  position: relative;
  width: 100%;
  max-width: clamp(640px, 68vw, 1140px);
  margin: 0 auto clamp(2.2rem, 3.4vh, 3.2rem) auto;
  z-index: 5;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  transform: scale(0.88);
  filter: blur(5px);
  will-change: transform, opacity, filter;
  animation: logoSlowZoomIn 2.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

@keyframes logoSlowZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}

.realm-lockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 2.8vw, 3.4rem);
  width: 100%;
  color: #ffffff;
  background: none;
  border: none;
  box-shadow: none;
}

/* Left: Monogram TR Symbol */
.lockup-symbol-col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
}

.lockup-tr-symbol {
  height: clamp(88px, 9.4vw, 146px);
  width: auto;
  display: block;
  mix-blend-mode: screen;
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.95));
  user-select: none;
  background: none;
  border: none;
  box-shadow: none;
}

/* Center: Thin Vertical Divider */
.lockup-divider-col {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 4px 0;
  flex-shrink: 0;
  background: none;
}

.lockup-divider {
  display: block;
  width: 1.5px;
  height: 100%;
  min-height: clamp(84px, 9.0vw, 140px);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 248, 235, 0.95) 50%,
    rgba(255, 255, 255, 0.95) 100%
  );
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}

/* Right: THE REALM / CHURCH text block */
.lockup-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  color: #ffffff;
  line-height: 1;
  flex-grow: 0;
  background: none;
}

.lockup-title-wrap {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background: none;
  text-align: left;
}

.lockup-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: clamp(3.0rem, 4.8vw, 5.6rem);
  letter-spacing: clamp(0.24em, 0.35vw, 0.42em);
  text-indent: clamp(0.24em, 0.35vw, 0.42em);
  word-spacing: clamp(0.5em, 0.9vw, 1.1em);
  color: #ffffff;
  white-space: nowrap;
  display: block;
  text-align: left;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.95), 0 1px 6px rgba(0, 0, 0, 0.9);
  background: none;
}

.lockup-sub-wrap {
  overflow: visible;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: clamp(0.85rem, 1.4vw, 1.65rem);
  background: none;
  text-align: left;
}

.lockup-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: clamp(0.92rem, 1.4vw, 1.65rem);
  letter-spacing: clamp(0.62em, 0.92vw, 1.12em);
  text-indent: clamp(0.62em, 0.92vw, 1.12em);
  color: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
  text-align: left;
  margin: 0;
  margin-left: 20%;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  background: none;
}

/* 2. Primary Statement: Sequential Line-by-Line Reveal */
.primary-statement-wrapper {
  margin-bottom: clamp(0.85rem, 1.5vh, 1.25rem);
  z-index: 4;
}

.primary-statement {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.55;
  color: var(--color-ivory, #f7f3eb);
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.9);
}

.statement-line-wrap {
  display: block;
  overflow: hidden;
}

.statement-line {
  display: block;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  will-change: transform, opacity, filter;
}

.statement-line-1 {
  animation: statementLineSlowReveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) 2.2s forwards;
}

.statement-line-2 {
  animation: statementLineSlowReveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) 2.55s forwards;
}

@keyframes statementLineSlowReveal {
  0% {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* 3. Supporting Line: The unseen has always been near. */
.supporting-line-wrapper {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(3px);
  margin-bottom: clamp(2.4rem, 3.8vh, 3.2rem);
  will-change: transform, opacity, filter;
  z-index: 4;
  animation: supportingSlowFadeIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) 3.8s forwards;
}

.supporting-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #f0e6d6;
  opacity: 0.95;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.98), 0 1px 4px rgba(0, 0, 0, 0.9);
}

@keyframes supportingSlowFadeIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
  }
  100% {
    opacity: 0.95;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* 4. Enter Action Button */
.action-btn-wrapper {
  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
  z-index: 6;
  animation: actionBtnSlowFadeIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 4.8s forwards;
}

@keyframes actionBtnSlowFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.enter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 6, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f7f3eb;
  border: 1px solid rgba(212, 175, 55, 0.42);
  padding: 0.85rem 3.4rem;
  font-family: var(--font-sans-ui);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 1px;
  outline: none;
  transition: border-color 0.45s ease, background-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.7);
}

.btn-text {
  position: relative;
  z-index: 2;
  transition: letter-spacing 0.35s ease, color 0.35s ease;
}

.enter-btn:hover,
.enter-btn:focus-visible {
  border-color: rgba(255, 235, 175, 0.85);
  background: rgba(22, 18, 12, 0.75);
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.25), 0 6px 30px rgba(0, 0, 0, 0.85);
  color: #fbf7ee;
}

.enter-btn:hover .btn-text,
.enter-btn:focus-visible .btn-text {
  letter-spacing: 0.42em;
}

.enter-btn:active {
  background: rgba(30, 24, 15, 0.85);
}

/* Mobile & Tablet Responsiveness for Entrance Lockup */
@media (max-width: 768px) {
  .realm-lockup-wrapper {
    max-width: 94vw;
  }
  .realm-lockup {
    gap: clamp(0.75rem, 2.5vw, 1.2rem);
  }
  .lockup-tr-symbol {
    height: clamp(52px, 11vw, 75px);
  }
  .lockup-divider {
    min-height: clamp(50px, 10.5vw, 72px);
  }
  .lockup-title {
    font-size: clamp(1.65rem, 5.8vw, 2.7rem);
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    word-spacing: 0.35em;
    margin: 0;
    text-align: left;
  }
  .lockup-sub-wrap {
    margin-top: clamp(0.55rem, 1.4vw, 0.95rem);
    justify-content: flex-start;
  }
  .lockup-subtitle {
    font-size: clamp(0.68rem, 2.3vw, 1.0rem);
    letter-spacing: 0.55em;
    text-indent: 0.55em;
    padding-left: 0;
    margin: 0;
    margin-left: 20%;
    text-align: left;
  }
}

/* Transition to Homepage */
body.site-entered .environment-container {
  opacity: 0;
  pointer-events: none;
}

body.site-entered .entry-experience {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}

/* Instant Direct Render when already entered in session (Zero-Flash) */
html.site-already-entered .environment-container,
html.site-already-entered .entry-experience {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.site-already-entered .main-navbar {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition: none !important;
}

html.site-already-entered .homepage-wrapper {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;
}


/* --------------------------------------------------------------------------
   ==========================================================================
   PART 2: THE STICKY NAVIGATION BAR & ONE-PAGE HOMEPAGE
   ==========================================================================
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Sticky Cinematic Navigation Bar
   -------------------------------------------------------------------------- */
.main-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
  padding: 1.15rem 4rem;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
  transition: opacity 1.4s var(--ease-cinematic) 0.5s, transform 1.4s var(--ease-cinematic) 0.5s, background-color 0.4s ease, border-color 0.4s ease;
  background: linear-gradient(to bottom, rgba(4, 5, 6, 0.75) 0%, rgba(4, 5, 6, 0.25) 75%, transparent 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

body.site-entered .main-navbar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.main-navbar.scrolled {
  background: rgba(5, 6, 7, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(212, 175, 55, 0.3);
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.75);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1780px;
  margin: 0 auto;
  width: 100%;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-white);
  transition: opacity 0.3s ease;
}

.nav-brand:hover { opacity: 0.88; }

.nav-brand-icon {
  height: 26px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9));
}

.nav-brand-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.28);
  margin: 0 16px;
}

.nav-brand-text {
  font-family: var(--font-sans-ui);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--color-white);
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.8rem;
}

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2.5rem;
}

.nav-link {
  text-decoration: none;
  font-family: var(--font-sans-ui);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.88);
  transition: all 0.35s ease;
  position: relative;
  padding: 4px 0;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-gold-headline);
  text-shadow: 0 0 16px rgba(214, 176, 107, 0.45);
}

.nav-accent-decor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-accent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe69c 0%, #d4af37 60%, transparent 100%);
  box-shadow: 0 0 12px rgba(245, 186, 66, 0.9);
}

.nav-accent-line {
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.85), transparent);
}

.nav-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}

.hamburger-bar {
  width: 24px;
  height: 1.5px;
  background-color: var(--color-white);
  transition: all 0.3s ease;
}

/* --------------------------------------------------------------------------
   Homepage Master Wrapper
   -------------------------------------------------------------------------- */
.homepage-wrapper {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s var(--ease-dissolve) 0.2s;
  background-color: var(--color-black);
}

body.site-entered .homepage-wrapper {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Section 1: "WE FOLLOWED WHERE IT FELL." (Memory Foundation)
   -------------------------------------------------------------------------- */
.hero-memory-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
}

.memory-photo-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.memory-slideshow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(100%) contrast(1.12) brightness(0.92);
  transform: scale(1);
  will-change: transform;
}

.memory-photo-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: none;
  filter: grayscale(100%) contrast(1.12) brightness(0.92);
  transition: opacity 1.2s ease;
}

.no-webgl .memory-slideshow-canvas {
  display: none;
}

.no-webgl .memory-photo-fallback {
  display: block;
}

.memory-warmth-center {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 55% at 50% 48%,
    rgba(205, 150, 55, 0.16) 0%,
    rgba(145, 95, 25, 0.06) 45%,
    transparent 75%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

.memory-lighting-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 75% at 50% 42%,
    transparent 35%,
    rgba(0, 0, 0, 0.65) 80%,
    rgba(0, 0, 0, 0.95) 100%
  );
  pointer-events: none;
}

.memory-vignette-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.75) 0%,
    transparent 18%,
    transparent 72%,
    rgba(0, 0, 0, 0.88) 95%,
    rgba(0, 0, 0, 1) 100%
  );
  pointer-events: none;
}

.memory-content-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-top: clamp(95px, 14.5vh, 140px);
  padding-bottom: clamp(2.2rem, 4.5vh, 3.5rem);
  padding-left: clamp(1rem, 2.5vw, 2.5rem);
  padding-right: clamp(1rem, 2.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  z-index: 10;
  pointer-events: none;
  transform: none;
}

/* Hide legacy centered backdrop blobs so clean photographic contrast shines through */
.memory-text-backdrop {
  display: none;
}

/* ==========================================================================
   ARCHITECTURAL CINEMATIC HERO GLASS PANEL
   Horizontal panoramic glass plate featuring:
   - Centered and balanced at ~86% viewport width
   - Charcoal semi-transparent backdrop with subtle blur
   - Top-left 45-degree chamfer cut with extending diagonal accent lines
   - Top-right champagne rim glow & extending diagonal accent lines
   - Precision vector border softly fading out at the bottom to avoid image division
   - Translucent diagonal sheen reflection
   ========================================================================== */
.hero-glass-panel {
  position: relative;
  width: 86vw;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  transform: none;
  will-change: opacity, transform;
}

/* 1. Semi-Transparent Charcoal Glass Backdrop with Blur */
.hero-glass-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    52px 0,
    calc(100% - 24px) 0,
    100% 24px,
    100% calc(100% - 22px),
    calc(100% - 22px) 100%,
    22px 100%,
    0 calc(100% - 22px),
    0 48px
  );
  -webkit-clip-path: polygon(
    52px 0,
    calc(100% - 24px) 0,
    100% 24px,
    100% calc(100% - 22px),
    calc(100% - 22px) 100%,
    22px 100%,
    0 calc(100% - 22px),
    0 48px
  );
  backdrop-filter: blur(14px) saturate(125%) brightness(0.92);
  -webkit-backdrop-filter: blur(14px) saturate(125%) brightness(0.92);
  background: linear-gradient(
    to bottom,
    rgba(14, 16, 20, 0.48) 0%,
    rgba(10, 12, 15, 0.50) 65%,
    rgba(16, 14, 14, 0.32) 100%
  );
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16),
              inset 0 0 35px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 1;
}

/* 2. Specular Diagonal Light Sheen */
.hero-glass-sheen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    52px 0,
    calc(100% - 24px) 0,
    100% 24px,
    100% calc(100% - 22px),
    calc(100% - 22px) 100%,
    22px 100%,
    0 calc(100% - 22px),
    0 48px
  );
  -webkit-clip-path: polygon(
    52px 0,
    calc(100% - 24px) 0,
    100% 24px,
    100% calc(100% - 22px),
    calc(100% - 22px) 100%,
    22px 100%,
    0 calc(100% - 22px),
    0 48px
  );
  background: linear-gradient(
    115deg,
    transparent 24%,
    rgba(255, 255, 255, 0.02) 36%,
    rgba(255, 255, 255, 0.07) 42%,
    rgba(255, 255, 255, 0.02) 48%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 2;
}

/* 3. Ambient Top-Right Champagne/Golden Glow Flare */
.hero-glass-glow {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 320px;
  height: 200px;
  background: radial-gradient(
    ellipse at top right,
    rgba(223, 179, 90, 0.26) 0%,
    rgba(223, 179, 90, 0.07) 42%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 2;
  filter: blur(14px);
}

/* 4. Precision Architectural Vector Frame SVG */
.hero-glass-frame-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

/* 5. Typography Lockup inside the Glass Panel */
.hero-glass-panel .memory-hero-top-group {
  position: relative;
  z-index: 4;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(1.8rem, 2.5vw, 2.4rem) clamp(2.4rem, 3.8vw, 4.0rem) clamp(1.6rem, 2.2vw, 2.2rem);
  box-sizing: border-box;
}

/* Independent transform layers keep the load reveal and scroll scrub additive. */
.hero-scroll-layer {
  position: relative;
  width: 100%;
  will-change: transform, opacity;
}

.hero-scroll-followed,
.hero-scroll-fallen {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* 1. Main Headline: GOD PLANTED A VISION. (Preserved Left-Aligned) */
.line-god-planted {
  display: block;
  font-family: var(--font-hero-sans);
  font-size: clamp(2.0rem, 4.2vw, 4.75rem);
  font-weight: 200;
  letter-spacing: clamp(0.04em, 0.065em, 0.08em);
  color: #ffffff;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.04;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;
}

/* 2. Secondary Headline Lockup (Directly beneath main headline on the right) */
.secondary-headline-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  width: 100%;
  margin-top: clamp(0.35rem, 0.8vh, 0.9rem);
}

/* WE FOLLOWED */
.line-we-followed {
  display: block;
  font-family: var(--font-hero-sans);
  font-size: clamp(1.1rem, 1.9vw, 2.2rem);
  font-weight: 200;
  letter-spacing: clamp(0.18em, 0.24em, 0.32em);
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  text-align: right;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.6);
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}

/* where it fell. (with champagne-gold accent gradient from reference) */
.line-where-it-fell {
  display: block;
  font-family: var(--font-hero-sans);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.4rem, 4.5vw, 4.8rem);
  letter-spacing: 0.015em;
  color: #e5c99e;
  background: linear-gradient(135deg, #fff3e2 0%, #e2be8a 40%, #c49658 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: none;
  text-align: right;
  line-height: 0.94;
  margin: 0;
  margin-top: clamp(-0.25rem, -0.4vw, -0.65rem);
  padding: 0;
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.8)) drop-shadow(0 2px 10px rgba(223, 179, 90, 0.25));
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}

/* Legacy helper support */
.title-line-script-wrap,
.title-accent-rule {
  display: none !important;
}

/* 3. Supporting Statement (Lower-Right Area, balanced with centered panel) */
.connected-quote-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 86vw;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: clamp(1.2rem, 2.8vh, 2.4rem);
  padding-right: 0;
  z-index: 2;
  pointer-events: none;
}

.connected-quote {
  font-family: var(--font-hero-sans);
  font-style: normal;
  font-size: clamp(0.85rem, 1.05vw, 1.15rem);
  font-weight: 300;
  letter-spacing: clamp(0.02em, 0.04em, 0.06em);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.8);
  text-align: right;
  max-width: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0.82;
  transform: none;
  will-change: transform, opacity;
}

/* Architectural vertical divider accent before quote */
.connected-quote::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.25em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 100%);
  flex-shrink: 0;
}

/* 4. Minimal Scroll Indicator (Bottom Center) */
.scroll-indicator {
  position: absolute;
  bottom: clamp(1.8rem, 3.5vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  opacity: 0;
  transition: opacity 1.0s ease, color 0.3s ease;
  cursor: pointer;
  pointer-events: auto;
}

.scroll-indicator:hover,
.scroll-indicator:focus-visible {
  color: #ffffff;
}

/* Architectural vertical line below SCROLL */
.scroll-indicator::after {
  content: "";
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.1) 100%);
  margin-top: 0.65rem;
}

.scroll-text {
  font-family: var(--font-hero-sans);
  font-size: clamp(0.6rem, 0.7vw, 0.72rem);
  font-weight: 400;
  letter-spacing: clamp(0.28em, 0.36em, 0.44em);
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  margin-right: -0.36em;
}

.scroll-line-indicator,
.scroll-chevron {
  display: none !important;
}

/* GSAP owns only the text reveal states after successful initialization. */
body.hero-animation-ready .line-god-planted,
body.hero-animation-ready .line-we-followed,
body.hero-animation-ready .line-where-it-fell,
body.hero-animation-ready .connected-quote,
body.hero-animation-ready .scroll-indicator {
  opacity: 0;
}

/* Quiet continuous cue begins only after the final reveal completes. */
.hero-memory-section.hero-sequence-complete .scroll-indicator::after {
  animation: heroScrollLinePulse 1.8s ease-in-out infinite;
  transform-origin: top center;
}

/* Immediate appearance when already entered */
html.site-already-entered .hero-glass-panel {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

html.site-already-entered body:not(.hero-animation-ready) .line-god-planted,
html.site-already-entered body:not(.hero-animation-ready) .line-we-followed,
html.site-already-entered body:not(.hero-animation-ready) .line-where-it-fell,
html.site-already-entered body:not(.hero-animation-ready) .connected-quote,
html.site-already-entered body:not(.hero-animation-ready) .scroll-indicator {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}

html.site-already-entered body:not(.hero-animation-ready) .connected-quote {
  opacity: 0.85 !important;
}

html.site-already-entered body:not(.hero-animation-ready) .scroll-indicator {
  opacity: 0.85 !important;
  transform: translateX(-50%) !important;
}

@keyframes heroScrollLinePulse {
  0%, 100% {
    opacity: 0.5;
    transform: scaleY(0.76);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* --------------------------------------------------------------------------
   Responsive Mobile & Tablet Rules for Section 1 Glass Panel & Typography
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .memory-content-stage {
    padding-top: clamp(80px, 13vh, 115px);
    padding-bottom: clamp(1.8rem, 3.5vh, 2.8rem);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .hero-glass-panel {
    width: 90vw;
    max-width: 100%;
  }

  .connected-quote-container {
    width: 90vw;
    max-width: 100%;
    margin-bottom: clamp(1rem, 2.2vh, 1.8rem);
  }

  .hero-glass-backdrop,
  .hero-glass-sheen {
    clip-path: polygon(
      42px 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% calc(100% - 18px),
      calc(100% - 18px) 100%,
      18px 100%,
      0 calc(100% - 18px),
      0 42px
    );
    -webkit-clip-path: polygon(
      42px 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% calc(100% - 18px),
      calc(100% - 18px) 100%,
      18px 100%,
      0 calc(100% - 18px),
      0 42px
    );
  }

  .hero-glass-panel .memory-hero-top-group {
    padding: 1.8rem 2.0rem 1.6rem;
  }

  .line-god-planted {
    font-size: clamp(1.8rem, 4.8vw, 3.4rem);
    white-space: normal;
    line-height: 1.08;
  }

  .line-we-followed {
    font-size: clamp(1.1rem, 2.8vw, 2.0rem);
  }

  .line-where-it-fell {
    font-size: clamp(2.4rem, 5.8vw, 4.4rem);
  }

  .connected-quote {
    font-size: clamp(0.82rem, 1.6vw, 1.02rem);
  }
}

@media (max-width: 767px) {
  .memory-content-stage {
    padding-top: max(4.6rem, calc(env(safe-area-inset-top, 14px) + 3.8rem));
    padding-bottom: 1.8rem;
    padding-left: 1.0rem;
    padding-right: 1.0rem;
  }

  .hero-glass-panel {
    width: 100%;
    max-width: 100%;
  }

  .connected-quote-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.2rem;
  }

  .hero-glass-backdrop,
  .hero-glass-sheen {
    clip-path: polygon(
      30px 0,
      calc(100% - 14px) 0,
      100% 14px,
      100% calc(100% - 14px),
      calc(100% - 14px) 100%,
      14px 100%,
      0 calc(100% - 14px),
      0 30px
    );
    -webkit-clip-path: polygon(
      30px 0,
      calc(100% - 14px) 0,
      100% 14px,
      100% calc(100% - 14px),
      calc(100% - 14px) 100%,
      14px 100%,
      0 calc(100% - 14px),
      0 30px
    );
  }

  .hero-glass-panel .memory-hero-top-group {
    padding: 1.35rem 1.15rem 1.35rem;
  }

  .line-god-planted {
    font-size: clamp(1.42rem, 6.6vw, 2.2rem);
    white-space: normal;
    letter-spacing: 0.05em;
    line-height: 1.14;
  }

  .secondary-headline-lockup {
    margin-top: 0.65rem;
  }

  .line-we-followed {
    font-size: clamp(0.95rem, 4.4vw, 1.35rem);
    letter-spacing: 0.16em;
  }

  .line-where-it-fell {
    font-size: clamp(2.0rem, 9.2vw, 3.0rem);
    margin-top: -0.2rem;
  }

  .connected-quote-container {
    margin-bottom: 1.2rem;
  }

  .connected-quote {
    font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    max-width: 95%;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .memory-content-stage {
    padding: 3.2rem 1.5rem 1.2rem;
  }

  .hero-glass-panel .memory-hero-top-group {
    padding: 1.2rem 1.6rem 1.1rem;
  }

  .line-god-planted {
    font-size: clamp(1.4rem, 4.5vw, 2.2rem);
  }

  .line-we-followed {
    font-size: clamp(0.9rem, 2.2vw, 1.3rem);
  }

  .line-where-it-fell {
    font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  }

  .connected-quote {
    font-size: 0.75rem;
  }
}


/* --------------------------------------------------------------------------
   ==========================================================================
   CONTINUOUS MOVING MARQUEE / TICKER BANNER (White + Gold Ribbon)
   Visual Palette: Warm Ivory, Milky White, Metallic Warm Gold
   ==========================================================================
   -------------------------------------------------------------------------- */

.realm-marquee-banner {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: clamp(75px, 8.5vh, 90px);
  background: linear-gradient(180deg, #fffefb 0%, #faf5ec 25%, #f4ebd8 50%, #faf5ec 75%, #fffefb 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
  user-select: none;
  z-index: 15;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Metallic Gold top and bottom borders */
  border-top: 2px solid #caa052;
  border-bottom: 2px solid #caa052;
  border-image: linear-gradient(90deg, #b88628 0%, #f7dc8a 25%, #d1a03e 50%, #fbe8a6 75%, #b88628 100%) 2;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px rgba(255, 255, 255, 0.95),
    0 4px 20px rgba(184, 134, 40, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Subtle Soft Gold Sheen & Vignette Overlay */
.realm-marquee-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 245, 220, 0.4) 0%, rgba(240, 225, 195, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

/* Edge Soft Fades so the loop feels limitless */
.realm-marquee-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 254, 251, 0.85) 0%, rgba(255, 254, 251, 0) 3%, rgba(255, 254, 251, 0) 97%, rgba(255, 254, 251, 0.85) 100%);
  pointer-events: none;
  z-index: 3;
}

/* Continuous Moving Marquee Track */
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  position: relative;
  z-index: 2;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: realmContinuousMarquee 32s linear infinite;
}

/* Slight slow on hover (without stopping) */
.realm-marquee-banner:hover .marquee-track {
  animation-play-state: running;
}

/* Marquee Group containing identical units */
.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Single Marquee Unit */
.marquee-unit {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(1.8rem, 3.2vw, 3.2rem);
  padding: 0 clamp(1rem, 2vw, 2rem);
}

/* TR Logo + Church Name Lockup */
.marquee-logo-lockup {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.15rem);
  flex-shrink: 0;
}

.marquee-tr-logo {
  height: clamp(34px, 4.2vw, 44px);
  width: auto;
  max-width: 60px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(160, 110, 25, 0.28));
  vertical-align: middle;
}

.marquee-church-name {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.82rem, 1.15vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a621e;
  background: linear-gradient(135deg, #704b0e 0%, #b88628 35%, #8f641a 70%, #caa052 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Star Sparkle Divider ✦ */
.marquee-star-divider {
  font-size: clamp(0.95rem, 1.35vw, 1.25rem);
  color: #c59742;
  background: linear-gradient(135deg, #d4a745 0%, #ffd875 50%, #9b722b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0.95;
  filter: drop-shadow(0 0 4px rgba(230, 180, 70, 0.4));
  position: relative;
  padding: 0 0.25rem;
}

/* Thin horizontal side-whiskers on star like the visual reference */
.marquee-star-divider::before,
.marquee-star-divider::after {
  content: '';
  display: inline-block;
  width: clamp(14px, 1.8vw, 24px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 151, 66, 0.65), transparent);
  margin: 0 6px;
  vertical-align: middle;
}

/* Scripture Lockup */
.marquee-scripture-lockup {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.scripture-lead {
  font-size: clamp(0.82rem, 1.15vw, 0.98rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #8a621e;
  background: linear-gradient(135deg, #704b0e 0%, #b38022 45%, #8a6018 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scripture-emphasis {
  font-size: clamp(0.84rem, 1.18vw, 1.02rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #5c3b06;
  background: linear-gradient(135deg, #4f3103 0%, #875910 50%, #452b02 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 1px rgba(92, 59, 6, 0.15);
}

.scripture-pipe {
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  color: #caa052;
  opacity: 0.6;
  font-weight: 300;
  margin: 0 0.2rem;
  line-height: 1;
}

.scripture-cite {
  font-size: clamp(0.74rem, 1.02vw, 0.88rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  color: #946c24;
  background: linear-gradient(135deg, #7a5414 0%, #b88628 60%, #7a5414 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.95;
}

/* GPU Transform Keyframes for True Seamless Continuous Loop */
@keyframes realmContinuousMarquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Mobile & Tablet Responsive Adjustments */
@media (max-width: 768px) {
  .realm-marquee-banner {
    height: clamp(55px, 7vh, 65px);
  }

  .marquee-unit {
    gap: 1.4rem;
    padding: 0 0.8rem;
  }

  .marquee-tr-logo {
    height: clamp(26px, 3.8vw, 32px);
  }

  .marquee-church-name {
    font-size: 0.76rem;
    letter-spacing: 0.16em;
  }

  .marquee-star-divider {
    font-size: 0.85rem;
  }

  .marquee-star-divider::before,
  .marquee-star-divider::after {
    width: 10px;
    margin: 0 3px;
  }

  .scripture-lead {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
  }

  .scripture-emphasis {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
  }

  .scripture-pipe {
    font-size: 0.78rem;
    margin: 0 0.1rem;
  }

  .scripture-cite {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
  }

  .marquee-track {
    animation-duration: 26s;
  }
}

@media (max-width: 480px) {
  .realm-marquee-banner {
    height: 56px;
  }

  .marquee-unit {
    gap: 1.1rem;
    padding: 0 0.6rem;
  }

  .marquee-tr-logo {
    height: 24px;
  }

  .marquee-church-name {
    font-size: 0.70rem;
    letter-spacing: 0.14em;
  }

  .scripture-lead {
    font-size: 0.70rem;
    letter-spacing: 0.10em;
  }

  .scripture-emphasis {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .scripture-cite {
    font-size: 0.64rem;
    letter-spacing: 0.15em;
  }
}


/* ==========================================================================
   CINEMATIC HORIZONTAL STORY SEQUENCE: ABOUT -> SALVATION -> WHAT IF 1
   ========================================================================== */

.realm-horizontal-story {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #050403;
  z-index: 10;
}

.realm-horizontal-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  height: 100vh;
  will-change: transform;
}

.realm-horizontal-panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Ensure each child section matches panel dimensions on desktop */
.realm-horizontal-panel .about-realm-section,
.realm-horizontal-panel .salvation-section,
.realm-horizontal-panel .whatif-primary-section {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  box-sizing: border-box;
  scroll-margin-top: 0;
}

/* Mobile, Tablet & Reduced Motion Fallback: Seamless Native Vertical Flow */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .realm-horizontal-story {
    position: relative;
    width: 100%;
    overflow: visible;
    background: transparent;
  }

  .realm-horizontal-track {
    display: block;
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .realm-horizontal-panel {
    display: block;
    width: 100%;
    height: auto;
    min-height: auto;
    max-height: none;
    flex: none;
  }

  .realm-horizontal-panel .about-realm-section,
  .realm-horizontal-panel .salvation-section,
  .realm-horizontal-panel .whatif-primary-section {
    width: 100%;
    height: auto;
    min-height: auto;
    max-height: none;
  }
}

/* --------------------------------------------------------------------------
   ==========================================================================
   SECTION 2: ABOUT THE REALM ("A PEOPLE BORN OF THE SPIRIT.")
   Visual Palette: Calm Black/Brown Atmosphere, Warm Gold Light Rays,
                   Metallic Gold TR Monogram, Warm Ivory Editorial Serif
   ==========================================================================
   -------------------------------------------------------------------------- */

/* ==========================================================================
   SECTION 2: ABOUT THE REALM — Cinematic Full-Bleed Portrait Design
   Layout: Full-width background (woman portrait left → black right),
           vertical watermark label on far-left edge,
           editorial content on right side (~45% width)
   ========================================================================== */

.about-realm-section {
  position: relative;
  width: 100vw;
  min-height: clamp(640px, 90vh, 960px);
  background-color: #0a0806;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-margin-top: 70px;
}

/* Full-Bleed Background Image */
.about-realm-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.about-realm-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* Right-side gradient overlay: ensures right 45% is dark enough for text */
.about-realm-right-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 30%,
    rgba(8, 5, 3, 0.55) 50%,
    rgba(8, 5, 3, 0.88) 65%,
    rgba(5, 3, 2, 0.97) 80%,
    #050302 100%
  );
  pointer-events: none;
}

/* Top/bottom edge cinematic vignette */
.about-realm-ambient-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    transparent 10%,
    transparent 88%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}

/* Vertical Watermark Label — Far Left Edge */
.about-realm-vertical-label {
  position: absolute;
  left: clamp(16px, 2.5vw, 36px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 8;
  pointer-events: none;
}

.about-vertical-rule {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(223, 179, 90, 0.65) 50%, transparent);
  display: block;
  flex-shrink: 0;
}

.about-vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-sans-ui);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(223, 179, 90, 0.55);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

/* Main Stage Layout */
.about-realm-stage {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: clamp(70px, 9vh, 120px) clamp(1.5rem, 5vw, 5rem);
  box-sizing: border-box;
  min-height: inherit;
}

/* Portrait spacer — keeps left 55% clear so the woman's portrait shows */
.about-realm-portrait-spacer {
  flex: 0 0 55%;
  max-width: 55%;
}

/* Right Column: Editorial Content (~45%) */
.about-realm-content-col {
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-left: clamp(1rem, 2vw, 2rem);
  box-sizing: border-box;
}

/* 1. Eyebrow Row */
.about-realm-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(0.9rem, 1.6vh, 1.3rem);
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
              transform 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.about-realm-section.about-in-view .about-realm-eyebrow-row {
  opacity: 1;
  transform: translateY(0);
}

.about-realm-eyebrow {
  font-family: var(--font-sans-ui);
  font-size: clamp(0.65rem, 0.78vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  color: #dfb35a;
  text-transform: uppercase;
}

.about-realm-eyebrow-rule {
  flex: 1;
  max-width: 52px;
  height: 1px;
  background: linear-gradient(90deg, rgba(223, 179, 90, 0.85) 0%, transparent 100%);
}

/* 2. Main Headline */
.about-realm-headline {
  font-family: var(--font-serif-editorial);
  font-size: clamp(1.95rem, 3.0vw, 3.1rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: 0.01em;
  color: #f7f4ee;
  margin: 0 0 clamp(1rem, 1.8vh, 1.5rem) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.about-realm-section.about-in-view .about-realm-headline {
  opacity: 1;
  transform: translateY(0);
}

.about-hl-line {
  display: block;
}

.about-gold-highlight {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #fff3cb 0%, #dfb35a 50%, #c49234 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 3. Body Copy */
.about-realm-story {
  max-width: 500px;
  margin-bottom: clamp(1rem, 1.8vh, 1.4rem);
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s,
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.about-realm-section.about-in-view .about-realm-story {
  opacity: 1;
  transform: translateY(0);
}

.about-story-p {
  font-family: var(--font-serif-editorial);
  font-size: clamp(1.0rem, 1.12vw, 1.1rem);
  font-weight: 400;
  line-height: 1.8;
  color: rgba(247, 244, 238, 0.82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* 4. Gold Rule Divider */
.about-realm-sub-rule {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, rgba(223, 179, 90, 0.9) 0%, rgba(223, 179, 90, 0.3) 100%);
  margin-bottom: clamp(1rem, 1.8vh, 1.5rem);
  opacity: 0;
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}

.about-realm-section.about-in-view .about-realm-sub-rule {
  opacity: 1;
}

/* 5. Three Pillars Row */
.about-realm-pillars {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  margin-bottom: clamp(1.4rem, 2.2vh, 2rem);
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s,
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s;
}

.about-realm-section.about-in-view .about-realm-pillars {
  opacity: 1;
  transform: translateY(0);
}

.about-pillar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  padding: 0 clamp(8px, 1.5vw, 18px);
}

.about-pillar-icon {
  color: #dfb35a;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-pillar-title {
  font-family: var(--font-sans-ui);
  font-size: clamp(0.6rem, 0.72vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #dfb35a;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.about-pillar-sub {
  font-family: var(--font-sans-ui);
  font-size: clamp(0.58rem, 0.64vw, 0.62rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: rgba(247, 244, 238, 0.5);
  text-transform: uppercase;
  line-height: 1.5;
}

.about-pillar-sep {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(223, 179, 90, 0.4) 50%, transparent);
  align-self: center;
  flex-shrink: 0;
}

/* 6. CTA Row */
.about-realm-cta-row {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.85s,
              transform 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.85s;
}

.about-realm-section.about-in-view .about-realm-cta-row {
  opacity: 1;
  transform: translateY(0);
}

.about-realm-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font-family: var(--font-sans-ui);
  font-size: clamp(0.68rem, 0.8vw, 0.74rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.75);
  border-bottom: 1px solid rgba(223, 179, 90, 0.35);
  padding-bottom: 6px;
  transition: color 0.35s ease, border-color 0.35s ease;
}

.about-realm-cta-btn:hover {
  color: #dfb35a;
  border-color: rgba(223, 179, 90, 0.8);
}

.about-cta-arrow {
  display: flex;
  align-items: center;
  color: #dfb35a;
  transition: transform 0.35s ease;
}

.about-realm-cta-btn:hover .about-cta-arrow {
  transform: translateX(6px);
}

/* ── Tablet Responsive ── */
@media (max-width: 1100px) {
  .about-realm-portrait-spacer {
    flex: 0 0 48%;
    max-width: 48%;
  }
  .about-realm-content-col {
    flex: 0 0 52%;
    max-width: 52%;
  }
}

@media (max-width: 820px) {
  .about-realm-section {
    min-height: auto;
  }

  .about-realm-bg-img {
    object-position: 18% center;
  }

  .about-realm-right-fade {
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(5, 3, 2, 0.5) 25%,
      rgba(5, 3, 2, 0.92) 55%,
      #050302 100%
    );
  }

  .about-realm-stage {
    flex-direction: column;
    padding: clamp(60px, 8vh, 90px) clamp(1.2rem, 4vw, 2rem) clamp(50px, 7vh, 80px);
  }

  .about-realm-portrait-spacer {
    flex: 0 0 0;
    max-width: 0;
    display: none;
  }

  .about-realm-content-col {
    flex: 0 0 100%;
    max-width: 100%;
    align-items: center;
    text-align: center;
    padding-left: 0;
  }

  .about-realm-eyebrow-row {
    justify-content: center;
  }

  .about-realm-eyebrow-rule {
    display: none;
  }

  .about-realm-headline {
    text-align: center;
    font-size: clamp(1.75rem, 6vw, 2.4rem);
  }

  .about-realm-story {
    text-align: center;
    max-width: 100%;
  }

  .about-story-p {
    text-align: center;
  }

  .about-vertical-text {
    display: none;
  }

  .about-realm-pillars {
    justify-content: center;
  }

  .about-realm-cta-row {
    align-self: center;
  }
}

@media (max-width: 520px) {
  .about-realm-pillars {
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: center;
  }
  .about-pillar-sep {
    display: none;
  }
  .about-pillar-item {
    flex: 0 0 calc(33% - 1rem);
    min-width: 80px;
  }
}

/* --------------------------------------------------------------------------
   ==========================================================================
   SECTION 3: WHAT IS SALVATION? ("WHAT IF SALVATION IS MORE THAN BEING RESCUED?")

   Visual Palette: 70% Black/Charcoal, 20% Ivory/White Typography,
                   10% Deep Crimson Red Accents, Crown of Thorns Background
   ==========================================================================
   -------------------------------------------------------------------------- */

.salvation-section {
  position: relative;
  width: 100vw;
  min-height: clamp(680px, 92vh, 960px);
  background-color: #030202;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(70px, 8vh, 110px) 0;
  box-sizing: border-box;
  scroll-margin-top: 70px;
  overflow: hidden;
}

/* Edge-to-Edge Deep Black Background Canvas with Left Crown of Thorns */
.salvation-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background-image: url('assets/salvation_crown_bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.salvation-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center left;
  display: block;
  filter: contrast(1.04) brightness(0.96);
  opacity: 1;
  transform: scale(1.0);
}

/* Subtle Localized Dark Gradient Behind Right Text Area */
.salvation-bg-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 75% at 76% 50%,
    rgba(3, 2, 2, 0.62) 0%,
    rgba(3, 2, 2, 0.28) 52%,
    transparent 82%
  );
  pointer-events: none;
}

/* Subtle Top/Bottom Edge Vignette */
.salvation-bg-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    transparent 12%,
    transparent 88%,
    rgba(0, 0, 0, 0.8) 100%
  );
  pointer-events: none;
}

/* Right-Aligned Editorial Composition Stage */
.salvation-stage-container {
  position: relative;
  z-index: 5;
  width: min(92%, 1440px);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding-right: clamp(1rem, 3.5vw, 4rem);
}

/* Right Content Column (~43–47% of Viewport) */
.salvation-content-column {
  width: 100%;
  max-width: 610px;
  flex: 0 0 clamp(420px, 45%, 620px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  box-sizing: border-box;
}

/* 1. Small Eyebrow with Deep Red Line */
.salvation-eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(1.1rem, 1.8vh, 1.5rem);
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.salvation-section.salvation-in-view .salvation-eyebrow-row {
  opacity: 1;
  transform: translateY(0);
}

.salvation-eyebrow-text {
  font-family: var(--font-sans-ui), 'Montserrat', sans-serif;
  font-size: clamp(0.72rem, 0.82vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: #ece6dc;
  text-transform: uppercase;
}

.salvation-red-rule {
  width: 52px;
  height: 1.5px;
  background: #b81420;
  display: inline-block;
}

/* 2. Main Dominant Question Headline */
.salvation-main-headline {
  font-family: var(--font-serif-editorial), 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(2.35rem, 3.8vw, 3.85rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 clamp(1.3rem, 2.2vh, 1.8rem) 0;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.salvation-hl-lead {
  display: block;
  color: #f7f4ee;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.3s, transform 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.salvation-section.salvation-in-view .salvation-hl-lead {
  opacity: 1;
  transform: translateY(0);
}

.salvation-hl-emphasis {
  display: block;
  color: #c41422;
  font-style: italic;
  font-weight: 400;
  text-shadow: 0 0 24px rgba(196, 20, 34, 0.45);
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.45s, transform 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

.salvation-section.salvation-in-view .salvation-hl-emphasis {
  opacity: 1;
  transform: translateY(0);
}

/* 3. Supporting Three Lines */
.salvation-supporting-lines {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.7vh, 8px);
  margin-bottom: clamp(1.4rem, 2.2vh, 1.8rem);
}

.salvation-support-line {
  font-family: var(--font-serif-editorial), 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.08rem, 1.25vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(247, 244, 238, 0.88);
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.salvation-support-line.line-1 {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}

.salvation-support-line.line-2 {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s;
}

.salvation-support-line.line-3 {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s;
}

.salvation-section.salvation-in-view .salvation-support-line {
  opacity: 1;
  transform: translateY(0);
}

/* 4. The Invitation */
.salvation-invitation-text {
  font-family: var(--font-serif-editorial), 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.04rem, 1.2vw, 1.18rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(247, 244, 238, 0.85);
  margin: 0 0 clamp(0.75rem, 1.3vh, 1.1rem) 0;
  max-width: 560px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.9s, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.9s;
}

.salvation-section.salvation-in-view .salvation-invitation-text {
  opacity: 1;
  transform: translateY(0);
}

/* 5. Strong Closing Statement */
.salvation-conclusion-text {
  font-family: var(--font-serif-editorial), 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.15rem, 1.35vw, 1.34rem);
  font-weight: 600;
  line-height: 1.45;
  color: #f7f4ee;
  margin: 0 0 clamp(1.8rem, 3vh, 2.5rem) 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 1.02s, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 1.02s;
}

.salvation-section.salvation-in-view .salvation-conclusion-text {
  opacity: 1;
  transform: translateY(0);
}

/* 6. Bottom Three Salvation Principles */
.salvation-principles-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(0.8rem, 1.8vw, 1.8rem);
  width: 100%;
  max-width: 580px;
  margin-bottom: clamp(1.8rem, 3vh, 2.4rem);
}

.salvation-principle-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.salvation-principle-item.item-1 {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.12s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.12s;
}

.salvation-principle-item.item-2 {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.22s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.22s;
}

.salvation-principle-item.item-3 {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.32s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.32s;
}

.salvation-section.salvation-in-view .salvation-principle-item {
  opacity: 1;
  transform: translateY(0);
}

.salvation-icon-wrap {
  color: #c41422;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 0 10px rgba(196, 20, 34, 0.45));
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.salvation-principle-title {
  font-family: var(--font-sans-ui), 'Montserrat', sans-serif;
  font-size: clamp(0.66rem, 0.76vw, 0.74rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #f7f4ee;
  text-transform: uppercase;
  margin: 0 0 6px 0;
  white-space: nowrap;
}

.salvation-principle-desc {
  font-family: var(--font-sans-ui), 'Montserrat', sans-serif;
  font-size: clamp(0.56rem, 0.65vw, 0.62rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(247, 244, 238, 0.58);
  text-transform: uppercase;
  margin: 0;
  line-height: 1.45;
}

.salvation-principle-sep {
  width: 1px;
  height: 56px;
  background: rgba(196, 20, 34, 0.4);
  align-self: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center;
  will-change: opacity, transform;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.15s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.15s;
}

.salvation-section.salvation-in-view .salvation-principle-sep {
  opacity: 1;
  transform: scaleY(1);
}

/* 7. Wide Outline CTA Button */
.salvation-cta-row {
  display: flex;
  width: 100%;
  max-width: 580px;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 1.42s, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 1.42s;
}

.salvation-section.salvation-in-view .salvation-cta-row {
  opacity: 1;
  transform: translateY(0);
}

.salvation-cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 1.6rem;
  background: rgba(5, 3, 3, 0.65);
  border: 1px solid rgba(184, 20, 32, 0.7);
  border-radius: 1px;
  color: #f7f4ee;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  backdrop-filter: blur(4px);
  box-sizing: border-box;
}

.salvation-cta-label {
  font-family: var(--font-sans-ui), 'Montserrat', sans-serif;
  font-size: clamp(0.7rem, 0.8vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #f7f4ee;
}

.salvation-cta-arrow {
  color: #c41422;
  display: flex;
  align-items: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}

.salvation-cta-btn:hover {
  background: rgba(196, 20, 34, 0.12);
  border-color: rgba(220, 24, 38, 0.95);
  box-shadow: 0 0 24px rgba(196, 20, 34, 0.35);
}

.salvation-cta-btn:hover .salvation-cta-arrow {
  transform: translateX(6px);
  color: #e51d2d;
}

/* --------------------------------------------------------------------------
   Responsive Styles for Tablet & Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .salvation-stage-container {
    padding-right: 2rem;
  }
  .salvation-content-column {
    flex: 0 0 clamp(400px, 50%, 540px);
    max-width: 540px;
  }
}

@media (max-width: 860px) {
  .salvation-section {
    min-height: auto;
    padding: clamp(60px, 7vh, 90px) 0;
  }

  .salvation-bg-img {
    object-position: 22% 15%;
    filter: contrast(1.04) brightness(0.85);
  }

  .salvation-bg-container {
    background-position: 28% center;
  }

  .salvation-bg-scrim {
    background: radial-gradient(
      ellipse 95% 85% at 50% 50%,
      rgba(4, 2, 3, 0.88) 0%,
      rgba(4, 2, 3, 0.65) 60%,
      rgba(4, 2, 3, 0.35) 100%
    );
  }

  .salvation-stage-container {
    justify-content: center;
    padding: 0 clamp(1.4rem, 5vw, 2.5rem);
  }

  .salvation-content-column {
    flex: 0 0 100%;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .salvation-eyebrow-row {
    justify-content: center;
  }

  .salvation-main-headline {
    align-items: center;
    text-align: center;
    font-size: clamp(1.85rem, 6.5vw, 2.4rem);
  }

  .salvation-supporting-lines {
    align-items: center;
    text-align: center;
  }

  .salvation-support-line {
    text-align: center;
  }

  .salvation-invitation-text {
    text-align: center;
  }

  .salvation-conclusion-text {
    text-align: center;
  }

  .salvation-principles-row {
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    max-width: 340px;
  }

  .salvation-principle-item {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .salvation-icon-wrap {
    justify-content: center;
  }

  .salvation-principle-sep {
    width: 44px;
    height: 1px;
    background: rgba(196, 20, 34, 0.4);
    align-self: center;
    margin: 0.2rem 0;
  }

  .salvation-cta-row {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   ==========================================================================
   SECTION 4: WHAT IF 1 ("A FREE VIRTUAL EXPERIENCE") - PRIMARY
   Visual Palette: Bright White/Ivory Canvas, Flowing Crimson Ribbon,
                   Bold Black + Realm Red Typography, Grounded Seated Michael
   ==========================================================================
   -------------------------------------------------------------------------- */

.whatif-primary-section {
  position: relative;
  width: 100vw;
  min-height: clamp(620px, 84vh, 840px);
  background-color: #fcfbfa;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(20px, 3vh, 36px) 0 0;
  box-sizing: border-box;
  scroll-margin-top: 70px;
  overflow: hidden;
}

/* Full-Section Bright White/Ivory Canvas with Flowing Crimson Ribbon */
.whatif-primary-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.whatif-primary-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

.whatif-primary-bg-ambient {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 65% at 70% 50%,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 80%
  );
  pointer-events: none;
}

/* Main Stage Container (Left: ~46% Michael in Chair / Right: ~52% Unified Content Block) */
.whatif-primary-stage-container {
  position: relative;
  z-index: 5;
  width: min(96%, 1560px);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 3.5vw, 4.0rem);
  box-sizing: border-box;
  padding: 0 clamp(1.0rem, 2.0vw, 2.5rem);
}

/* Left Side: Large Dominant Portrait of Michael Seated in Chair */
.whatif-primary-visual-col {
  flex: 0 0 46%;
  max-width: 48%;
  align-self: flex-end;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  isolation: isolate;
  margin-bottom: 0;
}

.whatif-primary-michael-wrap {
  position: relative;
  width: 100%;
  max-width: 660px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.whatif-primary-michael-img {
  width: 100%;
  height: auto;
  max-height: clamp(520px, 80vh, 760px);
  object-fit: contain;
  object-position: bottom center;
  display: block;
  mix-blend-mode: normal;
  filter: none;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  will-change: opacity, transform;
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.whatif-primary-section.whatif-primary-in-view .whatif-primary-michael-img {
  opacity: 1;
  transform: translateY(0) scale(1.0);
}

.whatif-primary-michael-shadow {
  position: absolute;
  bottom: 0;
  left: 6%;
  right: 6%;
  height: 24px;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0, 0, 0, 0.22) 0%, transparent 75%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}

/* Right Side: ONE Unified Campaign Content Block */
.whatif-primary-content-col {
  flex: 0 0 52%;
  max-width: 760px;
  width: 100%;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  box-sizing: border-box;
  margin: auto 0;
  padding-bottom: clamp(10px, 1.8vh, 24px);
}

/* 1. Main Title: Large WHAT IF */
.whatif-primary-main-title {
  font-family: 'Bebas Neue', 'Oswald', 'Montserrat', sans-serif;
  font-size: clamp(4.4rem, 7.2vw, 7.6rem);
  line-height: 0.85;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(8px, 1.2vh, 12px) 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
}

.whatif-primary-title-what {
  color: #0b0b0c;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.25s, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.whatif-primary-title-if {
  color: #c01220;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.38s, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.38s;
}

.whatif-primary-section.whatif-primary-in-view .whatif-primary-title-what,
.whatif-primary-section.whatif-primary-in-view .whatif-primary-title-if {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Solid Red Event Strip */
.whatif-primary-event-strip {
  background: #c01220;
  width: 100%;
  max-width: 660px;
  padding: clamp(0.42rem, 0.65vh, 0.55rem) clamp(1.2rem, 1.8vw, 2.0rem);
  margin-bottom: clamp(14px, 1.8vh, 20px);
  box-shadow: 0 4px 15px rgba(192, 18, 32, 0.25);
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.whatif-primary-section.whatif-primary-in-view .whatif-primary-event-strip {
  clip-path: inset(0 0 0 0);
}

.whatif-primary-strip-text {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.72rem, 0.85vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}

.whatif-primary-strip-text strong {
  font-weight: 800;
}

/* 3. Main Question Block */
.whatif-primary-question-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(14px, 1.8vh, 20px);
  width: 100%;
  max-width: 660px;
}

.whatif-primary-question-lead {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.88rem, 1.1vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #0b0b0c;
  text-transform: uppercase;
  margin: 0 0 4px 0;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.65s, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.65s;
}

.whatif-primary-script-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

.whatif-primary-question-script {
  font-family: 'Alex Brush', 'Great Vibes', cursive;
  font-size: clamp(2.6rem, 4.0vw, 4.2rem);
  line-height: 1.05;
  color: #c01220;
  display: inline-block;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path, opacity;
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.8s, clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.8s;
}

.whatif-primary-script-underline {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 85%;
  max-width: 320px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.05s, clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.05s;
}

.whatif-primary-section.whatif-primary-in-view .whatif-primary-question-lead {
  opacity: 1;
  transform: translateY(0);
}

.whatif-primary-section.whatif-primary-in-view .whatif-primary-question-script,
.whatif-primary-section.whatif-primary-in-view .whatif-primary-script-underline {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* 4. Hosts Row */
.whatif-primary-hosts-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 660px;
  margin-bottom: clamp(16px, 2.0vh, 22px);
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.95s, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.95s;
}

.whatif-primary-section.whatif-primary-in-view .whatif-primary-hosts-row {
  opacity: 1;
  transform: translateY(0);
}

.whatif-primary-host-line {
  flex: 1;
  max-width: 90px;
  height: 1.5px;
  background: #0b0b0c;
  display: inline-block;
}

.whatif-primary-hosts-text {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.72rem, 0.84vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: #0b0b0c;
  text-transform: uppercase;
  white-space: nowrap;
}

.whatif-primary-amp {
  color: #c01220;
  font-weight: 700;
}

/* 5. Primary Outline CTA */
.whatif-primary-cta-row {
  display: flex;
  width: 100%;
  max-width: 660px;
  margin-bottom: clamp(22px, 2.6vh, 28px);
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.05s, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.05s;
}

.whatif-primary-section.whatif-primary-in-view .whatif-primary-cta-row {
  opacity: 1;
  transform: translateY(0);
}

.whatif-primary-cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: clamp(0.85rem, 1.2vh, 1.05rem) clamp(1.4rem, 2.0vw, 2.2rem);
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid #c01220;
  border-radius: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
  backdrop-filter: blur(4px);
}

.whatif-primary-cta-text {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.74rem, 0.84vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  gap: 6px;
}

.whatif-primary-cta-black {
  color: #0b0b0c;
}

.whatif-primary-cta-red {
  color: #c01220;
}

.whatif-primary-cta-arrow {
  color: #c01220;
  display: flex;
  align-items: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.whatif-primary-cta-btn:hover {
  background: rgba(192, 18, 32, 0.06);
  border-color: #a30e1a;
  box-shadow: 0 4px 20px rgba(192, 18, 32, 0.2);
}

.whatif-primary-cta-btn:hover .whatif-primary-cta-arrow {
  transform: translateX(7px);
}

/* 6. Three Principles */
.whatif-primary-principles-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.0rem, 2.0vw, 2.0rem);
  width: 100%;
  max-width: 660px;
  margin-bottom: clamp(18px, 2.2vh, 24px);
}

.whatif-primary-principle-card {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

.whatif-primary-principle-card.item-1 {
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.15s, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.15s;
}

.whatif-primary-principle-card.item-2 {
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.25s, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.25s;
}

.whatif-primary-principle-card.item-3 {
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.35s, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.35s;
}

.whatif-primary-section.whatif-primary-in-view .whatif-primary-principle-card {
  opacity: 1;
  transform: translateY(0);
}

.whatif-primary-principle-icon {
  color: #c01220;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.whatif-primary-principle-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.72rem, 0.84vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #c01220;
  text-transform: uppercase;
  margin: 0 0 2px 0;
}

.whatif-primary-principle-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.55rem, 0.64vw, 0.64rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #1a1a1a;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.35;
}

.whatif-primary-principle-divider {
  width: 1px;
  height: 42px;
  background: rgba(11, 11, 12, 0.2);
  align-self: center;
  flex-shrink: 0;
}

/* 7. Bottom Kingdom Statement */
.whatif-primary-bottom-statement {
  width: 100%;
  max-width: 660px;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.45s, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.45s;
}

.whatif-primary-section.whatif-primary-in-view .whatif-primary-bottom-statement {
  opacity: 1;
  transform: translateY(0);
}

.whatif-primary-statement-text {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.52rem, 0.60vw, 0.62rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #2a2a2a;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.45;
  text-align: center;
}

.whatif-primary-dot {
  color: #c01220;
  margin: 0 4px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Responsive Styles for Tablet & Mobile (What If Primary)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .whatif-primary-stage-container {
    gap: 1.8rem;
  }
  .whatif-primary-visual-col {
    flex: 0 0 42%;
    max-width: 42%;
    padding-left: 0.5rem;
  }
  .whatif-primary-content-col {
    flex: 0 0 58%;
    max-width: 58%;
  }
}

@media (max-width: 860px) {
  .whatif-primary-section {
    min-height: auto;
    padding: clamp(45px, 6vh, 65px) 0 20px;
    align-items: center;
  }

  .whatif-primary-stage-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.6rem;
    padding: 0 clamp(1.4rem, 5vw, 2.5rem);
  }

  .whatif-primary-content-col {
    display: contents;
  }

  .whatif-primary-main-title {
    order: 1;
    justify-content: center;
    text-align: center;
  }

  .whatif-primary-event-strip {
    order: 2;
    margin: 0 auto 1.0rem;
    max-width: 100%;
  }

  .whatif-primary-question-block {
    order: 3;
    align-items: center;
    text-align: center;
  }

  .whatif-primary-visual-col {
    order: 4;
    flex: 0 0 100%;
    max-width: 360px;
    width: 100%;
    margin: 0.2rem auto 1.0rem;
    padding-left: 0;
  }

  .whatif-primary-hosts-row {
    order: 5;
    justify-content: center;
    margin: 0 auto 1.2rem;
  }

  .whatif-primary-cta-row {
    order: 6;
    justify-content: center;
    margin: 0 auto 1.4rem;
  }

  .whatif-primary-principles-row {
    order: 7;
    flex-direction: column;
    align-items: center;
    gap: 1.0rem;
    max-width: 300px;
    margin: 0 auto 1.4rem;
  }

  .whatif-primary-principle-card {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .whatif-primary-principle-icon {
    justify-content: center;
  }

  .whatif-primary-principle-divider {
    width: 36px;
    height: 1px;
    background: rgba(11, 11, 12, 0.2);
    margin: 0.2rem auto;
  }

  .whatif-primary-bottom-statement {
    order: 8;
    text-align: center;
  }

  .whatif-primary-statement-text {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   ==========================================================================
   SECTION 5: THE SOUND ("SONGS BORN IN HIS PRESENCE.")
   ==========================================================================
   -------------------------------------------------------------------------- */

.sound-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-color: var(--color-black);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(3.6rem, 5.2vh, 4.4rem) clamp(24px, 4vw, 48px) clamp(0.7rem, 1.5vh, 1.1rem);
  box-sizing: border-box;
  scroll-margin-top: 75px;
}

/* Seamless Dark Blend from previous About section */
.sound-top-blend {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18vh;
  background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.75) 45%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   1. Master Background Scene Artwork
   -------------------------------------------------------------------------- */
.sound-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.sound-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  display: block;
}

.sound-bg-left-scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 44%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Main Section Stage Layout
   -------------------------------------------------------------------------- */
.sound-stage-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   Main Content Row: Left Column (Header + Music Player) & Right Column (Scripture + Action Buttons)
   -------------------------------------------------------------------------- */
.sound-main-content-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3vw;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  z-index: 10;
}

/* Left Column: Header Block (Top) & Now Playing Glass Card (Immediately Beneath) */
.sound-left-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(14px, 2.2vh, 24px);
  max-width: 620px;
  flex: 1;
  min-width: 0;
}

/* Top Left: Header Block */
.sound-header-block {
  max-width: 580px;
  text-align: left;
}

.sound-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}

.sound-eyebrow-dash {
  color: #dfb35a;
  font-family: var(--font-serif-heading), 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: -0.05em;
}

.sound-eyebrow-text {
  font-family: var(--font-serif-heading), 'Cinzel', serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  color: #dfb35a;
  text-transform: uppercase;
  transition: letter-spacing 1.2s var(--ease-cinematic);
}

.sound-main-title {
  margin-top: 0.35rem;
  margin-bottom: 0.45rem;
  line-height: 1.02;
}

.sound-main-title .title-line-1 {
  display: block;
  font-family: var(--font-serif-editorial), 'Playfair Display', serif;
  font-size: clamp(2.7rem, 4.2vw, 4.3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #f7f4ee;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  will-change: opacity, transform;
}

.sound-main-title .title-line-2 {
  display: flex;
  align-items: baseline;
  font-family: var(--font-serif-editorial), 'Playfair Display', serif;
  font-size: clamp(2.7rem, 4.2vw, 4.3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #f7f4ee;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95);
  margin-top: 2px;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  will-change: opacity, transform;
}

.sound-main-title .title-script-presence {
  font-family: 'Great Vibes', var(--font-script-accent), cursive;
  font-size: 1.35em;
  color: #dfb35a;
  font-weight: 400;
  font-style: normal;
  margin-left: 10px;
  text-shadow: 0 0 28px rgba(223, 179, 90, 0.5), 0 2px 10px rgba(0, 0, 0, 0.8);
  letter-spacing: 0;
  transform: translateY(-2px);
  display: inline-block;
}

.sound-copy-block {
  max-width: 480px;
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
  margin-top: 0.45rem;
}

.sound-copy-line {
  font-family: var(--font-serif-editorial), 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(0.92rem, 1.02vw, 1.04rem);
  line-height: 1.42;
  color: rgba(247, 244, 238, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  margin-bottom: 2px;
}

.sound-copy-highlight {
  color: #eed8a1;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Right Column: Unified Right-Side Module (Scripture + Action Buttons)
   -------------------------------------------------------------------------- */
.sound-right-col {
  width: clamp(290px, 22vw, 340px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(14px, 2vh, 22px);
  margin-top: 0.2rem;
  z-index: 10;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

/* Upper-Right: Compact & Elegant Scripture Glass Card (Colossians 3:16) */
.sound-scripture-block.sound-scripture-glass-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(16, 13, 9, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(223, 179, 90, 0.32);
  border-radius: 12px;
  padding: clamp(0.85rem, 1.3vh, 1.1rem) clamp(1rem, 1.3vw, 1.3rem);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 238, 195, 0.15);
}

.sound-scripture-quote-mark {
  font-family: var(--font-serif-editorial), 'Playfair Display', serif;
  font-size: 2.2rem;
  color: #dfb35a;
  line-height: 0.65;
  margin-bottom: 3px;
  opacity: 0.9;
  text-shadow: 0 0 16px rgba(223, 179, 90, 0.4);
}

.sound-scripture-quote {
  font-family: var(--font-serif-editorial), 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(0.82rem, 0.9vw, 0.92rem);
  line-height: 1.4;
  color: rgba(247, 244, 238, 0.92);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
  margin: 0 0 0.45rem;
  font-weight: 400;
}

.sound-scripture-citation {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.sound-citation-ref {
  font-family: var(--font-serif-heading), 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  font-weight: 600;
  color: #dfb35a;
  font-style: normal;
  text-transform: uppercase;
}

/* Single Compact Glass Player Card (Lower-Left: 180-205px height, compact glass card) */
.sound-player-glass-card {
  width: clamp(440px, 36vw, 580px);
  min-height: auto;
  background: rgba(16, 13, 9, 0.74);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(223, 179, 90, 0.35);
  border-radius: 12px;
  padding: clamp(0.7rem, 1.2vh, 0.95rem) clamp(0.85rem, 1.3vw, 1.2rem);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 238, 195, 0.15);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

.sound-section.sound-in-view .sound-player-glass-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s var(--ease-cinematic) 0.3s, transform 1.2s var(--ease-cinematic) 0.3s;
}

.player-card-body {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 16px);
  width: 100%;
}

/* Left Column: Album Artwork (~115-132px square) */
.player-art-box {
  position: relative;
  width: clamp(105px, 8.2vw, 128px);
  height: clamp(105px, 8.2vw, 128px);
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(223, 179, 90, 0.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.8), 0 0 14px rgba(223, 179, 90, 0.2);
  flex-shrink: 0;
  background: #000000;
}

.player-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.player-art-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* Right Area: Track Info, Controls, Waveform, Timeline */
.player-right-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}

.player-meta-box {
  display: flex;
  flex-direction: column;
}

.player-now-playing-tag {
  font-family: var(--font-serif-heading), 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  color: #dfb35a;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1px;
}

.player-track-name {
  font-family: var(--font-serif-editorial), 'Playfair Display', serif;
  font-size: clamp(1.1rem, 1.3vw, 1.35rem);
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.12;
  letter-spacing: 0.02em;
}

.player-artist-name {
  font-family: var(--font-sans-ui);
  font-size: 0.72rem;
  color: #eed8a1;
  margin: 1px 0 0;
}

/* Playback Controls (Prev, Main Circular Play 38-42px, Next, Shuffle) */
.player-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 0;
}

.player-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-gold-headline);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.player-btn:hover {
  color: #ffffff;
  transform: scale(1.1);
}

.btn-prev .btn-svg,
.btn-next .btn-svg {
  width: 18px;
  height: 18px;
}

.btn-shuffle .btn-svg {
  width: 14px;
  height: 14px;
}

.btn-shuffle.active {
  color: #ffffff;
  filter: drop-shadow(0 0 6px #dfb35a);
}

/* Main Play/Pause Button (38-40px) */
.btn-play-pause {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #dfb35a;
  background: #dfb35a;
  box-shadow: 0 0 14px rgba(223, 179, 90, 0.55);
  color: #0c0a08;
}

.btn-play-pause:hover {
  background: #f6d88c;
  border-color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(223, 179, 90, 0.8);
  color: #000000;
}

.btn-svg-play,
.btn-svg-pause {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.btn-svg-play {
  margin-left: 2px;
}

/* Contained Waveform Visualization */
.player-waveform-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  height: 22px;
  width: 100%;
  cursor: pointer;
  user-select: none;
  padding: 1px 0;
}

.waveform-bar {
  flex: 1;
  max-width: 3px;
  min-width: 1.5px;
  border-radius: 2px;
  background: rgba(223, 179, 90, 0.25);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.waveform-bar.bar-played {
  background: linear-gradient(180deg, #fff7d9 0%, #dfb35a 50%, #f6d88c 100%);
  box-shadow: 0 0 6px rgba(223, 179, 90, 0.6);
}

.player-waveform-wrap:hover .waveform-bar {
  opacity: 0.95;
}

/* Timeline Unit inside Card */
.player-timeline-unit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.player-time {
  font-family: var(--font-sans-ui);
  font-size: 0.68rem;
  color: rgba(247, 244, 238, 0.75);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.player-progress-bar-wrap {
  position: relative;
  flex: 1;
  height: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.player-progress-bg {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.player-progress-fill {
  position: absolute;
  left: 0;
  height: 2px;
  width: 35%;
  background: linear-gradient(90deg, #dfb35a 0%, #fff4d0 100%);
  box-shadow: 0 0 6px rgba(223, 179, 90, 0.8);
  border-radius: 2px;
  pointer-events: none;
}

.player-progress-handle {
  position: absolute;
  left: 35%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #dfb35a;
  transform: translateX(-50%);
  pointer-events: none;
  transition: transform 0.2s ease;
}

.player-progress-bar-wrap:hover .player-progress-handle {
  transform: translateX(-50%) scale(1.4);
}

.player-volume-box {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.volume-slider {
  width: 42px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(223, 179, 90, 0.9);
}

/* Stacked Action Buttons (Spotify & Discography) */
.sound-pills-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 9px);
}

.sound-pill-btn {
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: clamp(0.55rem, 0.9vh, 0.72rem) clamp(1rem, 1.2vw, 1.25rem);
  min-height: 38px;
  border-radius: 999px;
  font-family: var(--font-sans-ui);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s var(--ease-fluid);
  user-select: none;
}

/* 1. LISTEN ON SPOTIFY: Premium Champagne Gold Fill */
.sound-pill-btn.pill-spotify {
  background: #dfb35a;
  border: 1px solid #e7c272;
  color: #0c0a08;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(223, 179, 90, 0.25);
}

.sound-pill-btn.pill-spotify:hover {
  background: #ecd18a;
  border-color: #ffffff;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 20px rgba(223, 179, 90, 0.45);
}

.sound-pill-btn.pill-spotify .pill-icon-svg {
  fill: #0c0a08;
}

.sound-pill-btn.pill-spotify .pill-arrow {
  color: #0c0a08;
}

/* 2. DISCOGRAPHY: Dark Translucent Interior + Thin Gold Outline */
.sound-pill-btn.pill-discography {
  background: rgba(16, 13, 9, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(223, 179, 90, 0.55);
  color: #dfb35a;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.sound-pill-btn.pill-discography:hover {
  background: rgba(223, 179, 90, 0.18);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 18px rgba(223, 179, 90, 0.35);
}

.sound-pill-btn.pill-discography .pill-icon-svg {
  fill: currentColor;
}

.sound-pill-btn .pill-arrow {
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.sound-pill-btn:hover .pill-arrow {
  transform: translateX(4px);
}

.pill-icon-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   5. Bottom Featured Music Glass Panel (Compact Shelf ~190-220px)
   -------------------------------------------------------------------------- */
.sound-featured-bar {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.6vh, 0.5rem);
  width: 100%;
  max-width: 1440px;
  margin: clamp(-3.4rem, -4.8vh, -1.8rem) auto 0;
  padding: clamp(0.55rem, 0.9vh, 0.75rem) clamp(0.8rem, 1.2vw, 1.1rem);
  background: rgba(16, 13, 9, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(223, 179, 90, 0.32);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 238, 195, 0.15);
  box-sizing: border-box;
  z-index: 15;
  position: relative;
  flex: 0 0 auto;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

.sound-section.sound-in-view .sound-featured-bar {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s var(--ease-cinematic) 0.6s, transform 1.2s var(--ease-cinematic) 0.6s;
}

/* Panel Header Row: Left (FEATURED) vs Right (ALL TRACKS + Navigation Arrows) */
.featured-heading-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 0.1rem;
}

.featured-heading-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.featured-eyebrow-dash {
  color: #dfb35a;
  font-family: var(--font-serif-heading), 'Cinzel', serif;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: -0.05em;
}

.featured-tag-text {
  font-family: var(--font-serif-heading), 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: #dfb35a;
  text-transform: uppercase;
}

.featured-heading-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.featured-all-tracks-btn {
  background: none;
  border: none;
  color: rgba(247, 244, 238, 0.85);
  font-family: var(--font-sans-ui);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 3px 6px;
  transition: color 0.25s ease;
}

.featured-all-tracks-btn:hover {
  color: #dfb35a;
}

.featured-nav-arrows {
  display: flex;
  align-items: center;
  gap: 6px;
}

.featured-arrow-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(223, 179, 90, 0.45);
  background: rgba(16, 13, 9, 0.6);
  color: #dfb35a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.featured-arrow-btn:hover {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(223, 179, 90, 0.25);
  transform: scale(1.06);
}

/* Panel Body: Horizontal Carousel */
.featured-carousel-container {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.featured-items-track {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 1px 1px 3px;
  width: 100%;
}

.featured-items-track::-webkit-scrollbar {
  display: none;
}

/* Individual Music Card */
.featured-song-card {
  flex: 0 0 clamp(160px, 14vw, 195px);
  display: flex;
  flex-direction: column;
  background: rgba(10, 8, 6, 0.65);
  border: 1px solid rgba(223, 179, 90, 0.22);
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s var(--ease-fluid, ease);
  user-select: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.featured-song-card:hover {
  transform: translateY(-3px);
  border-color: rgba(223, 179, 90, 0.6);
  background: rgba(223, 179, 90, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65), 0 0 14px rgba(223, 179, 90, 0.2);
}

.featured-song-card.is-active {
  border-color: #dfb35a;
  background: rgba(223, 179, 90, 0.12);
  box-shadow: 0 0 18px rgba(223, 179, 90, 0.35), 0 6px 20px rgba(0, 0, 0, 0.7);
}

/* Upper Card: Album Artwork (100-120px) */
.featured-song-thumb-box {
  position: relative;
  width: 100%;
  height: clamp(88px, 9.8vh, 108px);
  overflow: hidden;
  background: #000000;
}

.featured-song-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.featured-song-card:hover .featured-song-thumb-img {
  transform: scale(1.05);
}

.featured-song-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(10, 8, 6, 0.75) 100%);
  pointer-events: none;
}

/* Lower Card: Info Text + Circular Play Button */
.featured-song-meta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px 7px;
  flex: 1;
}

.featured-song-text-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.featured-song-title {
  font-family: var(--font-serif-editorial), 'Playfair Display', serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #f7f4ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.featured-song-card:hover .featured-song-title,
.featured-song-card.is-active .featured-song-title {
  color: #dfb35a;
}

.featured-song-artist {
  font-family: var(--font-sans-ui);
  font-size: 0.64rem;
  color: rgba(247, 244, 238, 0.65);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.03em;
}

.featured-song-card-play-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(223, 179, 90, 0.45);
  background: rgba(223, 179, 90, 0.12);
  color: #dfb35a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.featured-song-card:hover .featured-song-card-play-btn,
.featured-song-card.is-active .featured-song-card-play-btn {
  background: #dfb35a;
  border-color: #dfb35a;
  color: #0c0a08;
  box-shadow: 0 0 10px rgba(223, 179, 90, 0.5);
}

.featured-card-play-icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
  margin-left: 1px;
}

/* Desktop default states for mobile-specific element hooks */
.sound-eyebrow-dash-right {
  display: none;
}

.citation-line {
  display: none;
}

.player-favorite-btn {
  display: none;
}

.featured-see-all-btn {
  display: none;
}

.sound-mobile-hero-art {
  display: none;
}

.sound-journey-svg-mobile {
  display: none;
}

/* --------------------------------------------------------------------------
   6. Cinematic Scroll-Triggered Animation Sequence
   -------------------------------------------------------------------------- */
.sound-section.sound-in-view .sound-eyebrow-row {
  animation: soundElementFadeUp 1.0s var(--ease-cinematic) 0.15s forwards;
}

.sound-section.sound-in-view .sound-main-title .title-line-1 {
  animation: soundTitleEmerge 1.4s var(--ease-cinematic) 0.3s forwards;
}

.sound-section.sound-in-view .sound-main-title .title-line-2 {
  animation: soundTitleEmerge 1.5s var(--ease-cinematic) 0.5s forwards;
}

.sound-section.sound-in-view .sound-copy-block {
  animation: soundElementFadeUp 1.2s var(--ease-cinematic) 0.7s forwards;
}

.sound-section.sound-in-view .sound-right-col {
  animation: soundElementFadeUp 1.2s var(--ease-cinematic) 0.6s forwards;
}

.sound-section.sound-in-view .sound-player-glass-card {
  animation: soundElementFadeUp 1.3s var(--ease-cinematic) 0.4s forwards;
}

.sound-section.sound-in-view .sound-featured-bar {
  animation: soundElementFadeUp 1.2s var(--ease-cinematic) 0.8s forwards;
}

@keyframes soundElementFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes soundTitleEmerge {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Discography Modal Dialog Styling */
.discography-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-cinematic);
}

.discography-modal-backdrop.modal-open {
  opacity: 1;
  pointer-events: auto;
}

.discography-modal-card {
  position: relative;
  width: min(620px, 92vw);
  max-height: 80vh;
  background: #09090b;
  border: 1px solid rgba(223, 179, 90, 0.45);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(223, 179, 90, 0.2);
  padding: 2.2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  overflow: hidden;
  box-sizing: border-box;
}

.discography-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.discography-modal-title-wrap {
  display: flex;
  flex-direction: column;
}

.discography-modal-tag {
  font-family: var(--font-sans-ui);
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  color: #dfb35a;
  text-transform: uppercase;
}

.discography-modal-title {
  font-family: var(--font-serif-heading), 'Cinzel', serif;
  font-size: 1.8rem;
  letter-spacing: 0.18em;
  color: #f7f4ee;
  margin: 0;
}

.discography-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.discography-close-btn:hover {
  background: rgba(223, 179, 90, 0.3);
  border-color: #dfb35a;
  transform: scale(1.08);
}

.discography-track-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 52vh;
  padding-right: 4px;
}

.disc-track-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.25s ease;
}

.disc-track-item:hover {
  background: rgba(223, 179, 90, 0.1);
  border-color: rgba(223, 179, 90, 0.35);
  transform: translateX(4px);
}

.disc-track-item.is-active {
  background: rgba(223, 179, 90, 0.16);
  border-color: #dfb35a;
}

.disc-track-art {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.disc-track-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.disc-track-title {
  font-family: var(--font-serif-editorial);
  font-size: 1.05rem;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.disc-track-project {
  font-family: var(--font-sans-ui);
  font-size: 0.74rem;
  color: #cfb17d;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.disc-track-duration {
  font-family: var(--font-sans-ui);
  font-size: 0.74rem;
  color: rgba(247, 244, 238, 0.6);
  margin-right: 8px;
}

.disc-track-play-btn {
  color: #dfb35a;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. Dedicated Responsive Rules for THE SOUND
   Desktop (> 1024px): Height-Based Adaptive Positioning for Shorter Laptops (700-850px)
   Tablet (769px - 1024px): Responsive Flow
   Mobile (<= 768px): Purpose-Built Vertical Cinematic Sequence
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-height: 850px) {
  .sound-section {
    padding: 3.0rem clamp(20px, 3.5vw, 40px) 0.5rem;
  }

  .sound-left-col {
    gap: 12px;
  }

  .sound-right-col {
    gap: 12px;
  }

  .sound-featured-bar {
    margin-top: -3.8rem;
  }
}

@media (min-width: 1025px) and (max-height: 730px) {
  .sound-section {
    padding: 2.6rem clamp(16px, 3vw, 32px) 0.35rem;
  }

  .sound-left-col {
    gap: 10px;
  }

  .sound-right-col {
    gap: 10px;
  }

  .sound-featured-bar {
    margin-top: -4.4rem;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .sound-section {
    padding: 5rem 4vw 2.5rem;
    min-height: auto;
  }

  .sound-main-content-row {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }

  .sound-left-col {
    max-width: 100%;
  }

  .sound-player-glass-card {
    width: 100%;
    max-width: 580px;
  }

  .sound-right-col {
    width: 100%;
    max-width: 480px;
  }

  .sound-pills-col {
    flex-direction: row;
    width: 100%;
    gap: 12px;
  }

  .sound-pill-btn {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  /* 1. Main Section: One Compact Cinematic Screen */
  .sound-section {
    position: relative;
    width: 100%;
    min-height: 100svh;
    padding: clamp(1.2rem, 2.5vh, 1.8rem) clamp(14px, 4vw, 20px);
    box-sizing: border-box;
    background-color: #000000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    scroll-margin-top: 60px;
  }

  .sound-top-blend {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8vh;
    background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    z-index: 2;
    pointer-events: none;
  }

  /* Unified Background Image */
  .sound-bg-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background-color: #000000;
  }

  .sound-bg-img {
    width: 112%;
    max-width: none;
    height: auto;
    object-fit: contain;
    display: block;
    transform: translateY(-4%) !important;
    filter: contrast(1.06) brightness(0.94);
    animation: none !important;
  }

  .sound-bg-top-scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.65) 48%, transparent 100%);
    z-index: 2;
  }

  .sound-bg-bottom-scrim {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56%;
    background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.96) 30%, rgba(0, 0, 0, 0.78) 55%, transparent 100%);
    z-index: 2;
  }

  .sound-bg-left-scrim {
    display: block !important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    z-index: 2;
  }

  .sound-bg-right-scrim {
    display: block !important;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 6%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    z-index: 2;
  }

  .sound-bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 95% 85% at 50% 38%, transparent 40%, rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0.88) 100%);
    z-index: 2;
  }

  /* 2. Stage Container */
  .sound-stage-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    min-height: auto;
    flex: 1;
    gap: 0;
  }

  /* 3. Main Content Row & Header on Mobile */
  .sound-main-content-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .sound-left-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    max-width: 100%;
  }

  .sound-right-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    margin-top: 0;
    opacity: 1;
    transform: none;
  }

  .sound-header-block {
    max-width: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
  }

  .sound-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 3px;
    opacity: 1;
    transform: none;
  }

  .sound-eyebrow-dash-left,
  .sound-eyebrow-dash-right {
    display: inline-block;
    width: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 179, 90, 0.75), transparent);
    font-size: 0;
    line-height: 0;
    color: transparent;
  }

  .sound-eyebrow-text {
    font-family: var(--font-serif-heading), 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    color: #dfb35a;
    font-weight: 500;
    text-transform: uppercase;
  }

  .sound-main-title {
    margin: 0 0 4px;
    line-height: 1.02;
    text-align: left;
  }

  .sound-main-title .title-line-1 {
    display: block;
    font-family: var(--font-serif-editorial);
    font-size: clamp(1.25rem, 4.8vw, 1.68rem);
    letter-spacing: 0.02em;
    color: #f7f4ee;
    text-align: left;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
    opacity: 1;
    transform: none;
    filter: none;
  }

  .sound-main-title .title-line-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    font-family: var(--font-serif-editorial);
    font-size: clamp(1.25rem, 4.8vw, 1.68rem);
    letter-spacing: 0.02em;
    color: #f7f4ee;
    text-align: left;
    margin-top: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
    opacity: 1;
    transform: none;
    filter: none;
  }

  .sound-main-title .title-script-presence {
    font-family: 'Great Vibes', var(--font-script-accent), cursive;
    font-size: 1.22em;
    margin-left: 4px;
    color: #dfb35a;
    text-shadow: 0 0 16px rgba(223, 179, 90, 0.5);
  }

  .sound-copy-block {
    text-align: left;
    margin: 3px 0 0;
    max-width: 250px;
    opacity: 1;
    transform: none;
  }

  .sound-copy-line {
    font-family: var(--font-serif-editorial);
    font-style: italic;
    font-size: clamp(0.64rem, 2.1vw, 0.72rem);
    line-height: 1.28;
    color: rgba(247, 244, 238, 0.86);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
    margin-bottom: 1px;
  }

  .sound-copy-highlight {
    color: rgba(255, 238, 195, 0.95);
    font-weight: 500;
  }

  /* Scripture Block: Compact Glass Card on Mobile */
  .sound-scripture-block.sound-scripture-glass-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 100%;
    padding: 10px 14px;
    background: rgba(16, 13, 9, 0.75);
    border: 1px solid rgba(223, 179, 90, 0.25);
    border-radius: 8px;
    box-sizing: border-box;
    opacity: 1;
    transform: none;
  }

  .sound-scripture-quote-mark {
    display: none !important;
  }

  .sound-scripture-quote {
    display: block !important;
    font-size: 0.72rem;
    line-height: 1.38;
    margin: 0 0 6px;
    color: rgba(247, 244, 238, 0.9);
  }

  .citation-line-left,
  .citation-line-right {
    display: none !important;
  }

  .sound-scripture-citation {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }

  .sound-citation-ref {
    font-family: var(--font-serif-heading), 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    color: #dfb35a;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* 4. Disable Glowing Ribbon, Sine Waves & Equalizer on Mobile */
  .sound-visual-journey-layer,
  .sound-mobile-hero-art,
  .sound-journey-svg,
  .sound-journey-svg-mobile,
  .sound-waveform-equalizer-cluster {
    display: none !important;
  }

  /* 5. Floating Music Player on Mobile */
  .sound-middle-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 6px;
    padding: 0;
  }

  .sound-player-glass-card {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 12px 14px;
    background: rgba(16, 13, 9, 0.85);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    opacity: 1;
    transform: none;
  }

  .player-card-body {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .player-art-box {
    width: 74px;
    height: 74px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .player-right-area {
    gap: 6px;
  }

  .player-btn-play-pause,
  .btn-play-pause {
    width: 38px;
    height: 38px;
  }

  .player-waveform-wrap {
    height: 24px;
  }

  .player-info-text {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    justify-content: center;
  }

  .player-track-name {
    font-family: var(--font-serif-editorial);
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.15;
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  }

  .player-artist-name {
    font-size: 0.72rem;
    color: #dfb35a;
    margin-top: 1px;
    font-weight: 400;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  }

  .player-favorite-btn {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(223, 179, 90, 0.8);
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .player-favorite-btn:hover,
  .player-favorite-btn.is-favorited {
    color: #dfb35a;
    transform: scale(1.1);
  }

  .player-favorite-btn.is-favorited svg {
    fill: #dfb35a;
  }

  /* Scrubber Row on Mobile (Row 2, full width) */
  .player-scrubber-unit {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 1px;
  }

  .player-time {
    font-size: 0.68rem;
    color: rgba(247, 244, 238, 0.75);
    letter-spacing: 0.03em;
    min-width: 26px;
  }

  .player-progress-bar-wrap {
    height: 14px;
    flex: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
  }

  .player-progress-bg {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.24);
    border-radius: 999px;
  }

  .player-progress-fill {
    position: absolute;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #dfb35a, #fff0be);
    border-radius: 999px;
    width: 25%;
  }

  .player-progress-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border: 1.5px solid #dfb35a;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(223, 179, 90, 0.8);
    left: 25%;
  }

  /* Centered Primary Controls (Previous, Play/Pause, Next) - Secondary hidden on mobile */
  .player-buttons-row {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin-top: 1px;
  }

  .btn-shuffle,
  .btn-volume,
  .player-volume-box,
  .volume-slider {
    display: none !important;
  }

  .btn-prev,
  .btn-next {
    background: none;
    border: none;
    color: rgba(223, 179, 90, 0.85);
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, color 0.15s ease;
  }

  .btn-prev .btn-svg,
  .btn-next .btn-svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  .btn-play-pause {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(223, 179, 90, 0.95);
    background: radial-gradient(circle, rgba(223, 179, 90, 0.25) 0%, rgba(16, 14, 10, 0.95) 75%);
    box-shadow: 0 0 14px rgba(223, 179, 90, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dfb35a;
    cursor: pointer;
    position: relative;
  }

  .btn-play-pause .btn-svg-play,
  .btn-play-pause .btn-svg-pause {
    width: 16px;
    height: 16px;
    fill: #dfb35a;
  }

  /* 6. Spotify & Discography Side-by-Side */
  .sound-pills-col {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    justify-content: space-between;
    opacity: 1;
    transform: none;
    margin-top: 2px;
  }

  .sound-pill-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.54rem 0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(223, 179, 90, 0.65);
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
    color: #f7f4ee;
    cursor: pointer;
  }

  .sound-pill-btn .pill-text {
    font-size: clamp(0.55rem, 1.8vw, 0.62rem);
    letter-spacing: 0.12em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sound-pill-btn .pill-icon-svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .desktop-only-arrow {
    display: none;
  }

  /* 7. Featured Music Strip on Mobile */
  .sound-featured-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 10px 12px 14px;
    background: rgba(16, 13, 9, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(223, 179, 90, 0.28);
    border-radius: 10px;
    box-sizing: border-box;
    opacity: 1;
    transform: none;
  }

  .featured-heading-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 2px;
  }

  .featured-heading-left {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .featured-eyebrow-dash {
    color: #dfb35a;
    font-size: 0.72rem;
  }

  .featured-tag-text {
    font-family: var(--font-serif-heading), 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.26em;
    color: #dfb35a;
    font-weight: 600;
    text-transform: uppercase;
  }

  .featured-heading-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .featured-all-tracks-btn {
    background: none;
    border: none;
    color: rgba(247, 244, 238, 0.85);
    font-family: var(--font-sans-ui);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
  }

  .featured-nav-arrows {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .featured-arrow-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(223, 179, 90, 0.4);
    background: rgba(16, 13, 9, 0.6);
    color: #dfb35a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .featured-carousel-container {
    width: 100%;
    position: relative;
    margin-top: 2px;
    overflow: hidden;
  }

  .featured-items-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 4px;
    width: 100%;
  }

  .featured-items-track::-webkit-scrollbar {
    display: none;
  }

  .featured-song-card {
    scroll-snap-align: start;
    flex: 0 0 clamp(160px, 48vw, 190px);
    display: flex;
    flex-direction: column;
    background: rgba(10, 8, 6, 0.65);
    border: 1px solid rgba(223, 179, 90, 0.22);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
  }

  .featured-song-thumb-box {
    width: 100%;
    height: 98px;
    border-radius: 0;
    overflow: hidden;
    border: none;
    position: relative;
    background: #000000;
  }

  .featured-song-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .featured-song-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(10, 8, 6, 0.75) 100%);
    pointer-events: none;
  }

  .featured-song-meta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px 10px;
    flex: 1;
  }

  .featured-song-text-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }

  .featured-song-title {
    font-family: var(--font-serif-editorial), 'Playfair Display', serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #f7f4ee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
  }

  .featured-song-artist {
    font-family: var(--font-sans-ui);
    font-size: 0.62rem;
    color: rgba(247, 244, 238, 0.65);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.03em;
  }

  .featured-song-card-play-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(223, 179, 90, 0.45);
    background: rgba(223, 179, 90, 0.12);
    color: #dfb35a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .featured-card-play-icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
    margin-left: 1px;
  }
}

@media (max-width: 360px) {
  .sound-main-title .title-line-1,
  .sound-main-title .title-line-2 {
    font-size: 1.22rem;
  }

  .sound-pill-btn .pill-text {
    font-size: 0.52rem;
    letter-spacing: 0.06em;
  }

  .featured-song-card {
    flex: 0 0 70px;
  }

  .featured-song-thumb-box {
    width: 70px;
    height: 44px;
  }
}

/* Future Anchors */
.section-anchor {
  position: relative;
  top: -80px;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   Reduced Motion Accessibility (A11y)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .trail-path,
  .about-trail-path,
  .about-flight-arc,
  .sound-flow-ambient,
  .sound-flow-glow,
  .sound-flow-body,
  .sound-flow-core {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }

  .about-trail-leading-head,
  .about-trail-head {
    display: none !important;
  }

  .memory-photo-img,
  .about-bg-img,
  .sound-photo-img,
  .sheis-artwork {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }

  .line-god-planted,
  .line-we-followed,
  .line-where-it-fell,
  .hero-scroll-layer,
  .connected-quote-container,
  .connected-quote,
  .quote-part,
  .scroll-indicator,
  .realm-lockup-wrapper,
  .primary-statement-wrapper,
  .supporting-line-wrapper,
  .action-btn-wrapper,
  .about-label-row,
  .about-label-divider,
  .about-main-title,
  .about-subtitle-gold,
  .about-p,
  .about-featured-statement,
  .accent-script-yeses,
  .accent-map-caption,
  .accent-monument-tag,
  .accent-pillars-list,
  .sound-photo-wrapper,
  .sound-scripture,
  .citation-dash,
  .sound-label-row,
  .sound-label-dash,
  .sound-main-title,
  .sound-subtitle-gold,
  .sound-copy-wrapper,
  .realm-audio-player,
  .sound-cta-row,
  .trail-section-title,
  .trail-title-flank,
  .trail-video-wrapper,
  .trail-content-below,
  .within-title,
  .within-subtitle,
  .within-carousel-stage,
  .within-footer-area,
  .within-desc-line,
  .sheis-eyebrow,
  .sheis-headline-ambient,
  .sheis-headline-word,
  .sheis-ornament,
  .sheis-ornament-line,
  .sheis-desc,
  .sheis-signature-wrap,
  .sheis-cta-wrap,
  .sheis-bottom-accent-line,
  .reveal-item,
  [data-reveal] {
    animation: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive Mobile & Tablet Rules
   -------------------------------------------------------------------------- */

/* Tablet & Intermediate Screens (768px - 1023px) */
@media (max-width: 1023px) {
  .main-navbar {
    padding: 1.1rem 2rem;
  }

  .nav-menu {
    gap: 1.8rem;
  }

  .nav-list {
    gap: 1.6rem;
  }

  .hero-memory-section {
    min-height: 100svh;
    height: 100svh;
  }

  .memory-photo-img {
    object-position: center 36%;
  }



  .about-section {
    min-height: auto;
    padding: 7rem 4vw 6rem;
  }

  .about-content-column {
    max-width: 500px;
  }

  .about-main-title,
  .about-subtitle-gold {
    font-size: clamp(2.1rem, 3.4vw, 2.8rem);
  }

  .about-bg-text-scrim {
    background: radial-gradient(
      ellipse 75% 75% at 76% 40%,
      rgba(3, 4, 5, 0.9) 0%,
      rgba(4, 5, 6, 0.7) 60%,
      transparent 90%
    );
  }

  .accent-map-caption {
    left: 36vw;
  }

  /* Section 3: The Sound - Tablet Layout */
  .sound-section {
    min-height: auto;
    padding: 6.5rem 4vw 5.5rem;
  }

  .sound-layout-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .sound-photo-wrapper {
    max-width: 580px;
    margin: 0 auto;
  }

  .sound-scripture {
    max-width: 580px;
    margin: 1.5rem auto 0;
  }

  .sound-content-column {
    max-width: 580px;
    margin: 0 auto;
  }
}

/* Mobile Screens (Below 768px) */
@media (max-width: 767px) {
  /* Navbar */
  .main-navbar {
    padding: 0.85rem 1.25rem;
    padding-top: max(0.85rem, env(safe-area-inset-top, 12px));
  }

  .nav-brand-text {
    font-size: 0.76rem;
    letter-spacing: 0.22em;
  }

  .nav-brand-icon {
    height: 22px;
  }

  .nav-brand-divider {
    margin: 0 10px;
  }

  .nav-mobile-toggle {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 86vw);
    height: 100vh;
    height: 100dvh;
    background: rgba(5, 6, 7, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(212, 175, 55, 0.22);
    flex-direction: column;
    align-items: flex-start;
    padding: 5.5rem 2rem 2.5rem;
    gap: 1.8rem;
    transition: right 0.4s var(--ease-cinematic);
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.9);
    z-index: 1001;
  }

  .nav-menu.mobile-open {
    right: 0;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
  }

  .nav-link {
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    padding: 12px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .nav-accent-decor {
    margin-top: 1.2rem;
  }

  /* Section 1: "WE FOLLOWED WHERE IT FELL" - Recomposed Cinematic Mobile Frame */
  .hero-memory-section {
    min-height: 100svh;
    height: 100svh;
    position: relative;
    padding: 0;
    overflow: hidden;
    background-color: #000000;
  }

  .memory-photo-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .memory-photo-img {
    width: 100%;
    height: 56svh;
    min-height: 50svh;
    max-height: 64svh;
    object-fit: cover;
    object-position: center 38%;
    transform: scale(1.15);
    filter: grayscale(100%) contrast(1.18) brightness(0.92);
  }

  .memory-vignette-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      #000000 0%,
      #000000 12%,
      rgba(0, 0, 0, 0.7) 22%,
      transparent 35%,
      transparent 64%,
      rgba(0, 0, 0, 0.75) 76%,
      #000000 88%,
      #000000 100%
    );
    pointer-events: none;
  }

  .memory-warmth-center {
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 65% 50% at 50% 50%,
      rgba(235, 195, 115, 0.13) 0%,
      rgba(180, 130, 45, 0.05) 50%,
      transparent 75%
    );
    mix-blend-mode: screen;
    pointer-events: none;
  }



  /* Dedicated Mobile SVG Trail for Section 1 (Flows Between Stephāine and Michael) */
  .trail-desktop-group {
    display: none;
  }

  .trail-mobile-group {
    display: block;
  }

  .trail-mobile-group .trail-bloom {
    stroke-width: 14px;
  }

  .trail-mobile-group .trail-glow {
    stroke-width: 4.2px;
  }

  .trail-mobile-group .trail-body {
    stroke-width: 1.8px;
  }

  .trail-mobile-group .trail-core {
    stroke-width: 0.9px;
  }

  .trail-mobile-group .trail-filament-left,
  .trail-mobile-group .trail-filament-right {
    stroke-width: 0.8px;
  }

  .trail-floor-pool {
    left: 4%;
    width: 90vw;
    height: 24vh;
  }

  /* Closing Quote - Clean space below photo & trail */
  .closing-statement-container {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: calc(max(3.3rem, calc(env(safe-area-inset-bottom, 12px) + 2.6rem)));
    text-align: center;
    width: 90vw;
    max-width: 300px;
    padding: 0 10px;
    transform: none;
    z-index: 10;
    pointer-events: none;
  }

  .closing-quote {
    font-size: clamp(0.95rem, 3.8vw, 1.12rem);
    line-height: 1.4;
    text-align: center;
  }

  .closing-gold-bar {
    margin: 7px auto 0;
    width: 36px;
  }

  /* Scroll Indicator - Bottom breathing room, completely safe from intrusion */
  .scroll-indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(0.85rem, env(safe-area-inset-bottom, 10px));
    z-index: 10;
  }

  /* Section 2: "ABOUT US" - Mobile Storytelling Flow */
  .about-section {
    min-height: auto;
    padding: 5rem 1.25rem 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    scroll-margin-top: 60px;
  }

  .about-bg-img {
    object-position: 22% top;
    width: 100%;
    height: 100%;
    filter: contrast(1.05) brightness(0.92);
  }

  .about-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  .about-content-column {
    max-width: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(3, 4, 5, 0.88) 0%, rgba(4, 5, 6, 0.94) 50%, rgba(3, 4, 5, 0.88) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 2.2rem 1.35rem;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9);
  }

  .about-label-row {
    margin-bottom: 0.5rem;
  }

  .about-label-text {
    font-size: 0.68rem;
    letter-spacing: 0.32em;
  }

  .about-label-divider {
    width: 60px;
  }

  .about-heading-group {
    margin-top: 0.65rem;
    margin-bottom: 1.4rem;
  }

  .about-main-title {
    font-size: clamp(1.85rem, 6.2vw, 2.35rem);
    line-height: 1.14;
    letter-spacing: 0.02em;
  }

  .about-subtitle-gold {
    font-size: clamp(1.85rem, 6.2vw, 2.35rem);
    line-height: 1.16;
    margin-top: 0.2rem;
  }

  .about-p {
    font-size: 1.05rem;
    line-height: 1.68;
    color: rgba(247, 244, 238, 0.9);
    margin-bottom: 1.25rem;
  }

  .about-featured-statement {
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--color-gold-headline);
    margin: 1.5rem 0;
  }

  /* Dedicated Mobile SVG Trail for About Us */
  .about-trail-desktop-group {
    display: none;
  }

  .about-trail-mobile-group {
    display: block;
  }

  .about-trail-mobile-group .about-trail-bloom {
    stroke-width: 15px;
  }

  .about-trail-mobile-group .about-trail-glow {
    stroke-width: 4.5px;
  }

  .about-trail-mobile-group .about-trail-body {
    stroke-width: 1.8px;
  }

  .about-trail-mobile-group .about-trail-core {
    stroke-width: 0.85px;
  }

  .accent-script-yeses,
  .accent-map-caption,
  .accent-monument-tag,
  .accent-pillars-list {
    display: none;
  }

  /* Section 3: The Sound mobile styling is handled in dedicated media query above */

  /* Discography Modal Mobile */
  .discography-modal-card {
    padding: 1.6rem 1.2rem 1.4rem;
    max-height: 90vh;
    width: 95vw;
  }

  .discography-modal-title {
    font-size: 1.5rem;
  }

  .disc-track-item {
    padding: 8px 10px;
    gap: 10px;
  }

  .disc-track-art {
    width: 40px;
    height: 40px;
  }

  .disc-track-title {
    font-size: 0.96rem;
  }

  .disc-track-project {
    font-size: 0.7rem;
  }
}

/* Small Mobile Screens (Below 480px) */
@media (max-width: 479px) {
  .nav-brand-text {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
  }

  .memory-heading {
    letter-spacing: 0.06em;
    font-size: clamp(1.35rem, 4.8vw, 1.7rem);
  }

  .closing-quote {
    font-size: 0.92rem;
  }

  .about-content-column {
    padding: 1.8rem 1.15rem;
  }

  .about-main-title,
  .about-subtitle-gold {
    font-size: 1.75rem;
  }

  .about-p {
    font-size: 1rem;
    line-height: 1.62;
  }

  .about-featured-statement {
    font-size: 1.18rem;
  }

  .sound-main-title,
  .sound-subtitle-gold {
    font-size: 1.75rem;
  }

  .sound-copy {
    font-size: 0.98rem;
  }

  .player-artwork-wrapper {
    width: 54px;
    height: 54px;
  }

  .player-track-title {
    font-size: 1.1rem;
  }

  .sound-cta-btn {
    font-size: 0.72rem;
  }
}

/* Landscape on mobile devices (height < 600px) */
@media (max-height: 600px) and (orientation: landscape) {
  .main-navbar {
    padding: 0.55rem 1.5rem;
  }



  .about-section {
    padding: 4rem 2rem 3rem;
  }
}

/* ==========================================================================
   SECTION 4: FOLLOW THE TRAIL (COMPACT CINEMATIC DIVIDER)
   Visual Palette: Pure Void Black, Radiant Gold Anime, Champagne & Ivory Typography
   ========================================================================== */
.follow-trail-section {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: clamp(430px, 48vh, 520px);
  min-height: 430px;
  max-height: 520px;
  background-color: #020202;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0 clamp(24px, 4vw, 64px);
  z-index: 10;
}

/* Seamless Ingress & Egress Ambient Blends */
.trail-top-blend {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55px;
  background: linear-gradient(180deg, #000000 0%, transparent 100%);
  pointer-events: none;
  z-index: 8;
}

.trail-bottom-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55px;
  background: linear-gradient(0deg, #000000 0%, transparent 100%);
  pointer-events: none;
  z-index: 8;
}

/* Main Stage Container: Two-Column Grid */
.trail-stage-container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1560px;
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: center;
  gap: clamp(24px, 3.5vw, 60px);
  box-sizing: border-box;
}

/* LEFT COLUMN: Video Wrapper with Outer Perimeter Edge Dissolve */
.trail-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.trail-video-inner {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 16 / 9;
  max-height: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.trail-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #000000;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-mask-image: radial-gradient(ellipse 96% 92% at 50% 50%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0.85) 90%, rgba(0, 0, 0, 0.3) 96%, transparent 100%);
  mask-image: radial-gradient(ellipse 96% 92% at 50% 50%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0.85) 90%, rgba(0, 0, 0, 0.3) 96%, transparent 100%);
}

/* Subtle Edge Dissolve Overlays into Black Section Background */
.trail-edge-dissolve-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8%;
  background: linear-gradient(to right, transparent 0%, rgba(2, 2, 2, 0.75) 60%, #020202 100%);
  pointer-events: none;
  z-index: 3;
}

.trail-edge-dissolve-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4%;
  background: linear-gradient(to left, transparent 0%, #020202 100%);
  pointer-events: none;
  z-index: 3;
}

.trail-edge-dissolve-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4%;
  background: linear-gradient(to top, transparent 0%, #020202 100%);
  pointer-events: none;
  z-index: 3;
}

.trail-edge-dissolve-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6%;
  background: linear-gradient(to bottom, transparent 0%, #020202 100%);
  pointer-events: none;
  z-index: 3;
}

/* RIGHT COLUMN: Typography Hierarchy */
.trail-content-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: clamp(10px, 1.8vw, 30px);
  max-width: 540px;
  box-sizing: border-box;
  z-index: 6;
}

/* 1. Eyebrow */
.trail-eyebrow-row {
  display: flex;
  align-items: center;
  margin-bottom: clamp(6px, 1vh, 10px);
}

.trail-eyebrow {
  font-family: var(--font-sans-ui);
  font-size: clamp(0.68rem, 0.82vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.38em;
  color: #dfb35a;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* 2. Hebrew Title */
.trail-hebrew-title {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-size: clamp(1.4rem, 2.2vw, 2.0rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  margin: 0 0 clamp(4px, 0.8vh, 8px) 0;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* 3. Transliteration */
.trail-transliteration {
  font-family: var(--font-serif-heading);
  font-size: clamp(1.25rem, 1.85vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: #fbf6ec;
  text-transform: uppercase;
  margin: 0 0 clamp(4px, 0.6vh, 6px) 0;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* 4. English Meaning */
.trail-english-meaning {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #dfb35a;
  margin-bottom: clamp(14px, 2vh, 20px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* 5. Supporting Revelation Statement */
.trail-description-block {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
  padding: 0;
  margin-top: clamp(2px, 0.5vh, 6px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.trail-desc-lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  font-weight: 400;
  line-height: 1.65;
  color: #e5dfd5;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Scroll-Triggered Entrance Animation */
.follow-trail-section.trail-in-view .trail-video-wrapper {
  opacity: 1;
  transition-delay: 0.1s;
}

.follow-trail-section.trail-in-view .trail-eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}

.follow-trail-section.trail-in-view .trail-hebrew-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.36s;
}

.follow-trail-section.trail-in-view .trail-transliteration {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.48s;
}

.follow-trail-section.trail-in-view .trail-english-meaning {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.58s;
}

.follow-trail-section.trail-in-view .trail-description-block {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.72s;
}

/* Responsive Rules for Follow The Trail */
@media (max-width: 900px) {
  .follow-trail-section {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 3rem 1.2rem;
  }

  .trail-stage-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .trail-video-inner {
    max-width: 100%;
    height: clamp(220px, 48vw, 280px);
    aspect-ratio: auto;
  }

  .trail-content-column {
    max-width: 100%;
    padding-left: 0;
    align-items: center;
    text-align: center;
  }

  .trail-description-block {
    border-left: none;
    border-top: none;
    padding: 0;
    margin-top: 10px;
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   SECTION 6: SHE-IS (WOMEN'S BIANNUAL EVENT) - CINEMATIC EDITORIAL COMPOSITION
   ========================================================================== */
.sheis-section {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  background-color: #050103;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  box-sizing: border-box;
  padding: 45px 4vw;
  transform-origin: center center;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Lighting & Vignette Layer (Deep Burgundy Ambiance Matching seis.png)
   -------------------------------------------------------------------------- */
.sheis-light-burgundy {
  position: absolute;
  left: 0;
  top: 0;
  width: 55vw;
  height: 85vh;
  background: radial-gradient(
    ellipse 70% 65% at 25% 35%,
    rgba(85, 8, 24, 0.45) 0%,
    rgba(45, 4, 12, 0.22) 50%,
    transparent 75%
  );
  filter: blur(55px);
  pointer-events: none;
  z-index: 1;
}

.sheis-light-champagne {
  display: none !important;
}

.sheis-light-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 95% 90% at 50% 50%,
    transparent 65%,
    rgba(5, 1, 3, 0.75) 100%
  );
  pointer-events: none;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   Unified Editorial Stage & Overlap Canvas
   -------------------------------------------------------------------------- */
.sheis-stage {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1500px;
  min-height: 580px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Right / Background Artwork Layer (Occupies ~76% width, emerging with velvet & floral textures) */
.sheis-artwork-layer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 76%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.sheis-artwork-box {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 580px;
  max-height: 780px;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheis-artwork {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 48%;
  display: block;
  opacity: 0;
  filter: none;
  transform: scale(1.03) translateX(18px);
  will-change: transform, opacity;
}

.sheis-section.sheis-in-view .sheis-artwork {
  animation: sheisArtworkEnter 1.6s var(--ease-cinematic) 0.2s forwards,
             sheisArtworkIdle 22s ease-in-out infinite alternate 1.8s;
}

/* Organic Bleed Scrim: Seamless transition blending red velvet & florals into the dark background */
.sheis-blend-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    90deg,
    #050103 0%,
    rgba(5, 1, 3, 0.95) 10%,
    rgba(5, 1, 3, 0.72) 22%,
    rgba(42, 5, 12, 0.32) 36%,
    rgba(65, 8, 18, 0.08) 46%,
    transparent 54%
  );
}

/* --------------------------------------------------------------------------
   Left Editorial Content Layer
   -------------------------------------------------------------------------- */
.sheis-content-layer {
  position: relative;
  z-index: 5;
  width: 46%;
  max-width: 580px;
  min-width: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.sheis-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-left: clamp(0.5rem, 2vw, 2.5rem);
  box-sizing: border-box;
}

/* 1. Eyebrow Tag */
.sheis-eyebrow {
  font-family: var(--font-sans-ui);
  font-size: clamp(0.68rem, 0.8vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.44em;
  color: rgba(247, 244, 238, 0.75);
  text-transform: uppercase;
  margin-bottom: 1.15rem;
  opacity: 0;
  transform: translateY(10px);
  transition: letter-spacing 1.2s var(--ease-cinematic);
}

.sheis-section.sheis-in-view .sheis-eyebrow {
  animation: sheisFadeUp 0.9s var(--ease-cinematic) 0.2s forwards;
  letter-spacing: 0.36em;
}

/* 2. Main Headline: ELEVATED REPRESENTATION (With Soft Ambient Backlight Glow) */
.sheis-headline-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 0.85rem;
}

.sheis-headline-ambient {
  position: absolute;
  top: 45%;
  left: 32%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  background: radial-gradient(
    ellipse at 40% 50%,
    rgba(95, 12, 28, 0.38) 0%,
    rgba(223, 179, 90, 0.12) 30%,
    transparent 70%
  );
  filter: blur(35px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease 0.4s;
}

.sheis-section.sheis-in-view .sheis-headline-ambient {
  opacity: 1;
}

.sheis-headline {
  display: flex;
  flex-direction: column;
  font-family: var(--font-serif-heading), 'Cinzel', serif;
  font-weight: 500;
  line-height: 0.92;
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sheis-line-clip {
  overflow: hidden;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sheis-headline-word {
  display: block;
  white-space: nowrap;
  max-width: 100%;
  transform: translateY(18px) scale(0.95);
  opacity: 0;
  filter: blur(4px);
  will-change: transform, opacity, filter;
}

.word-elevated {
  font-size: clamp(3.2rem, 4.5vw, 5.4rem);
  letter-spacing: 0.04em;
  color: #faf4e8;
  text-shadow: 0 0 45px rgba(223, 179, 90, 0.35), 0 2px 14px rgba(0, 0, 0, 0.95);
}

.word-representation {
  font-size: clamp(2.2rem, 3.1vw, 3.8rem);
  letter-spacing: 0.025em;
  color: #eeddbb;
  text-shadow: 0 0 45px rgba(223, 179, 90, 0.28), 0 2px 14px rgba(0, 0, 0, 0.95);
}

.sheis-section.sheis-in-view .line-clip-1 .sheis-headline-word {
  animation: sheisWordReveal 1.5s var(--ease-cinematic) 0.4s forwards;
}

.sheis-section.sheis-in-view .line-clip-2 .sheis-headline-word {
  animation: sheisWordReveal 1.6s var(--ease-cinematic) 0.65s forwards;
}

/* 3. Refined Ornamental Divider */
.sheis-ornament {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 240px;
  margin: 0.75rem 0 1.25rem;
  opacity: 0;
}

.sheis-section.sheis-in-view .sheis-ornament {
  animation: sheisFadeIn 0.9s var(--ease-cinematic) 0.95s forwards;
}

.sheis-ornament-line {
  flex: 1;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
}

.sheis-line-l {
  background: linear-gradient(90deg, transparent 0%, rgba(223, 179, 90, 0.65) 100%);
}

.sheis-line-r {
  background: linear-gradient(90deg, rgba(223, 179, 90, 0.65) 0%, transparent 100%);
}

.sheis-section.sheis-in-view .sheis-ornament-line {
  animation: sheisLineExpand 1.1s var(--ease-cinematic) 1.05s forwards;
}

.sheis-ornament-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dfb35a;
  width: 16px;
  height: 16px;
}

.sheis-mark-svg {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 0 8px rgba(223, 179, 90, 0.7));
}

/* 4. Description Copy (2 lines on desktop) */
.sheis-desc {
  font-family: var(--font-serif-editorial), 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(247, 244, 238, 0.84);
  letter-spacing: 0.02em;
  margin: 0 0 1.5rem;
  max-width: 450px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transform: translateY(15px);
  will-change: opacity, transform;
}

.sheis-section.sheis-in-view .sheis-desc {
  animation: sheisFadeUp 1.2s var(--ease-cinematic) 1.35s forwards;
}

/* 5. Event Signature Identifier: SHE-IS • 2027 */
.sheis-signature-wrap {
  margin-bottom: 1.85rem;
  opacity: 0;
  transform: translateY(8px);
}

.sheis-section.sheis-in-view .sheis-signature-wrap {
  animation: sheisSignatureFade 1.2s var(--ease-cinematic) 1.65s forwards;
}

.sheis-signature-text {
  font-family: var(--font-serif-heading), 'Cinzel', serif;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.38em;
  color: #dfb35a;
  text-shadow: 0 0 16px rgba(223, 179, 90, 0.4);
  text-transform: uppercase;
}

/* 6. Refined Champagne CTA Button */
.sheis-cta-wrap {
  position: relative;
  opacity: 0;
  transform: translateY(10px);
}

.sheis-section.sheis-in-view .sheis-cta-wrap {
  animation: sheisFadeUp 1.0s var(--ease-cinematic) 1.95s forwards;
}

.sheis-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0.92rem 1.85rem;
  border: 1px solid rgba(223, 179, 90, 0.48);
  border-radius: 2px;
  background: rgba(12, 3, 5, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff8eb;
  font-family: var(--font-sans-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(68, 8, 16, 0.25);
  transition: border-color 0.5s var(--ease-cinematic), box-shadow 0.5s var(--ease-cinematic);
}

.sheis-cta-shimmer {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 80% at -20% 50%,
    rgba(223, 179, 90, 0.35) 0%,
    rgba(95, 12, 28, 0.25) 50%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.6s var(--ease-fluid);
  transform: translateX(-30%);
  pointer-events: none;
}

.sheis-cta:hover .sheis-cta-shimmer {
  opacity: 1;
  transform: translateX(20%);
}

.sheis-cta:hover {
  border-color: rgba(255, 230, 160, 0.9);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 28px rgba(223, 179, 90, 0.32);
}

.sheis-cta-label {
  color: #fff8eb;
  position: relative;
  z-index: 1;
}

.sheis-cta-arrow {
  display: inline-block;
  font-size: 1.05rem;
  color: #dfb35a;
  position: relative;
  z-index: 1;
  transition: transform 0.45s var(--ease-fluid), color 0.45s ease;
}

.sheis-cta:hover .sheis-cta-arrow {
  transform: translateX(5px);
  color: #ffffff;
}

/* 7. Delicate Connecting Accent Line */
.sheis-bottom-accent-line {
  width: clamp(240px, 35vw, 420px);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(223, 179, 90, 0.4) 0%,
    rgba(223, 179, 90, 0.15) 50%,
    transparent 100%
  );
  margin-top: 2.2rem;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.65;
}

.sheis-section.sheis-in-view .sheis-bottom-accent-line {
  animation: sheisLineExpand 1.2s var(--ease-cinematic) 2.2s forwards;
}

/* --------------------------------------------------------------------------
   Animation Keyframes
   -------------------------------------------------------------------------- */
@keyframes sheisArtworkEnter {
  0% {
    opacity: 0;
    transform: scale(1.03) translateX(18px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

@keyframes sheisArtworkIdle {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.012);
  }
}

@keyframes sheisWordReveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.95);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes sheisSignatureFade {
  0% {
    opacity: 0;
    transform: translateY(8px);
    letter-spacing: 0.48em;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0.38em;
  }
}

@keyframes sheisFadeUp {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sheisFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes sheisLineExpand {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

/* --------------------------------------------------------------------------
   Responsive Mobile & Tablet Rules for SHE-IS
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .sheis-section {
    padding: 40px 3vw;
    min-height: auto;
  }

  .sheis-stage {
    min-height: 500px;
  }

  .sheis-artwork-layer {
    width: 68%;
  }

  .sheis-content-layer {
    width: 48%;
  }

  .sheis-left-col {
    padding-left: 0.5rem;
  }

  .word-elevated {
    font-size: clamp(2.4rem, 3.6vw, 3.6rem);
  }

  .word-representation {
    font-size: clamp(1.65rem, 2.45vw, 2.5rem);
  }

  .sheis-artwork-box {
    min-height: 480px;
    max-height: 620px;
  }
}

@media (max-width: 767px) {
  .sheis-section {
    padding: 50px 5vw 60px;
    min-height: auto;
    align-items: flex-start;
  }

  .sheis-stage {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
  }

  .sheis-content-layer {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .sheis-left-col {
    padding-left: 0;
    max-width: 100%;
  }

  .sheis-eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    margin-bottom: 0.75rem;
  }

  .word-elevated {
    font-size: clamp(2.4rem, 10vw, 3.8rem);
  }

  .word-representation {
    font-size: clamp(1.65rem, 7vw, 2.7rem);
  }

  .sheis-desc {
    max-width: 100%;
    margin-bottom: 1.3rem;
  }

  .sheis-signature-wrap {
    margin-bottom: 1.5rem;
  }

  .sheis-signature-text {
    font-size: 0.82rem;
    letter-spacing: 0.28em;
  }

  .sheis-cta {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.4rem;
    font-size: 0.72rem;
  }

  .sheis-artwork-layer {
    position: relative;
    width: 100%;
    height: auto;
    min-height: auto;
    margin-top: 2.2rem;
    pointer-events: auto;
    justify-content: center;
  }

  .sheis-artwork-box {
    min-height: auto;
    max-height: 480px;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75);
  }

  .sheis-artwork {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    transform: none !important;
  }

  .sheis-blend-scrim {
    display: none;
  }

  .sheis-bottom-accent-line {
    display: none;
  }
}

@media (max-width: 480px) {
  .sheis-section {
    padding: 40px 4vw 50px;
  }

  .word-elevated {
    font-size: clamp(2.2rem, 9.5vw, 3.2rem);
  }

  .word-representation {
    font-size: clamp(1.5rem, 6.5vw, 2.3rem);
  }
}

/* ==========================================================================
   SECTION: WHAT IF (STANDALONE VIRTUAL EXPERIENCE)
   Visual Identity: Modern, Simple, Confident, Clean, Editorial, Dark, Contemporary
   Palette: Deep Black, Warm White / Ivory, Bold Crimson / Deep Red, Subtle Gold Ambient
   ========================================================================== */

.whatif-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  background-color: var(--color-black, #000000);
  color: #ede8de;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  z-index: 10;
  transform-origin: center center;
  will-change: transform;
}

/* Top & Bottom Seamless Atmospheric Deep Black Dissolves */
.whatif-top-blend {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 6;
  pointer-events: none;
}

.whatif-bottom-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 6;
  pointer-events: none;
}

/* Master Background Container */
.whatif-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.whatif-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% center;
  opacity: 0;
  transform: scale(1.08) translate3d(0, 10px, 0);
  filter: brightness(0.88);
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), transform 2.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.8s ease-out;
  will-change: opacity, transform, filter;
}

.whatif-in-view .whatif-bg-img {
  opacity: 1;
  transform: scale(1.02) translate3d(0, 0, 0);
  filter: brightness(1);
  animation: whatIfBgBreathe 24s ease-in-out 2.2s infinite alternate;
}

@keyframes whatIfBgBreathe {
  0% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.05) translate3d(6px, -4px, 0);
  }
  100% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
}

/* Scrims: Preserve warm light on left while providing pristine contrast for typography on right */
.whatif-bg-scrim-right {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    rgba(0, 0, 0, 0) 0%, 
    rgba(0, 0, 0, 0.1) 32%, 
    rgba(0, 0, 0, 0.65) 50%, 
    rgba(0, 0, 0, 0.88) 68%, 
    rgba(0, 0, 0, 0.96) 88%, 
    #000000 100%
  );
  z-index: 2;
  pointer-events: none;
}

.whatif-bg-scrim-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

.whatif-bg-scrim-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

.whatif-bg-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.65);
  z-index: 2;
  pointer-events: none;
}

/* Main Unified Composition Stage */
.whatif-stage {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 4vw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 700px;
  height: 100%;
}

/* Left Column: Michael */
.whatif-left-col {
  width: 44%;
  max-width: 580px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  position: relative;
  pointer-events: none;
  align-self: flex-end;
}

.whatif-michael-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.whatif-michael-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 82vh;
  max-height: 82dvh;
  object-fit: contain;
  object-position: bottom left;
  display: block;
  opacity: 0;
  transform: translate3d(-35px, 20px, 0) scale(0.96);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.85)) drop-shadow(6px 0 20px rgba(214, 176, 107, 0.08));
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 1.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
  will-change: opacity, transform;
}

.whatif-in-view .whatif-michael-img {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: whatIfMichaelPresence 8s ease-in-out 1.9s infinite alternate;
}

@keyframes whatIfMichaelPresence {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -6px, 0) scale(1.006);
  }
}

.whatif-michael-edge-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* Right Column: Editorial Promotional Content */
.whatif-right-col {
  width: 54%;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  padding: 2.5rem 0 2.5rem 1.5rem;
  z-index: 5;
}

.whatif-content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

/* 1. Dominant Headline: WHAT IF */
.whatif-headline-wrap {
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  will-change: opacity, transform;
}

.whatif-in-view .whatif-headline-wrap {
  opacity: 1;
  transform: translateY(0);
}

.whatif-headline {
  font-family: 'Bebas Neue', 'Oswald', 'Montserrat', -apple-system, sans-serif;
  font-size: clamp(4.6rem, 8.2vw, 8.4rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: 0.02em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  text-transform: uppercase;
}

.whatif-word-what {
  color: #ece7de;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, #ffffff 0%, #e3ded5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.whatif-word-if {
  color: #c41018;
  text-shadow: 0 0 35px rgba(196, 16, 24, 0.4), 0 4px 20px rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, #d81d26 0%, #a80c13 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  transition: filter 0.5s ease;
}

.whatif-in-view .whatif-word-if {
  animation: whatIfRedGlow 5s ease-in-out 1.4s infinite alternate;
}

@keyframes whatIfRedGlow {
  0%, 100% {
    text-shadow: 0 0 25px rgba(196, 16, 24, 0.35), 0 4px 20px rgba(0, 0, 0, 0.6);
    filter: drop-shadow(0 0 8px rgba(196, 16, 24, 0.2));
  }
  50% {
    text-shadow: 0 0 45px rgba(216, 29, 38, 0.65), 0 4px 20px rgba(0, 0, 0, 0.6);
    filter: drop-shadow(0 0 20px rgba(216, 29, 38, 0.5));
  }
}

/* 2. Subtitle: A FREE VIRTUAL EXPERIENCE + Glowing Red Divider */
.whatif-subtitle-wrap {
  width: 100%;
  margin-top: 0.75rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
  will-change: opacity, transform;
}

.whatif-in-view .whatif-subtitle-wrap {
  opacity: 1;
  transform: translateY(0);
}

.whatif-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.74rem, 1.05vw, 0.96rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  color: #ded8cb;
  display: block;
  text-transform: uppercase;
}

.whatif-red-divider {
  width: 0%;
  max-width: 320px;
  height: 1.5px;
  background: linear-gradient(90deg, #c41018 0%, rgba(196, 16, 24, 0.6) 50%, rgba(196, 16, 24, 0) 100%);
  margin-top: 0.65rem;
  margin-bottom: 1.35rem;
  box-shadow: 0 0 8px rgba(196, 16, 24, 0.4);
  transition: width 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.whatif-in-view .whatif-red-divider {
  width: 100%;
  animation: redDividerGlow 5s ease-in-out 1.6s infinite alternate;
}

@keyframes redDividerGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(196, 16, 24, 0.4);
  }
  50% {
    box-shadow: 0 0 18px rgba(216, 29, 38, 0.75);
  }
}

/* 3. Main Question */
.whatif-question-wrap {
  margin-bottom: 1.15rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
  will-change: opacity, transform;
}

.whatif-in-view .whatif-question-wrap {
  opacity: 1;
  transform: translateY(0);
}

.whatif-question {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.22rem, 1.72vw, 1.68rem);
  font-weight: 300;
  line-height: 1.38;
  color: #ede9e1;
  margin: 0;
}

.whatif-q-line {
  display: block;
}

.whatif-highlight-something {
  color: #d81d26;
  font-weight: 600;
  text-shadow: 0 0 16px rgba(216, 29, 38, 0.35);
  display: inline-block;
}

.whatif-in-view .whatif-highlight-something {
  animation: whatIfSomethingShine 5s ease-in-out 1.6s infinite alternate;
}

@keyframes whatIfSomethingShine {
  0%, 100% {
    text-shadow: 0 0 14px rgba(216, 29, 38, 0.3);
  }
  50% {
    text-shadow: 0 0 26px rgba(216, 29, 38, 0.65);
  }
}

/* 4. Supporting Copy */
.whatif-copy-wrap {
  margin-bottom: 1.85rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.55s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
  will-change: opacity, transform;
}

.whatif-in-view .whatif-copy-wrap {
  opacity: 1;
  transform: translateY(0);
}

.whatif-copy {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.82rem, 0.94vw, 0.96rem);
  font-weight: 300;
  line-height: 1.65;
  color: #b8b3a8;
  margin: 0;
  max-width: 530px;
}

/* 5. CTA Button */
.whatif-cta-wrap {
  margin-bottom: 0.5rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s;
  will-change: opacity, transform;
}

.whatif-in-view .whatif-cta-wrap {
  opacity: 1;
  transform: translateY(0);
}

.whatif-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: #a30e15;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2.2rem;
  border: 1px solid #c41018;
  border-radius: 0;
  box-shadow: 0 4px 22px rgba(163, 14, 21, 0.35);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  outline: none;
}

.whatif-in-view .whatif-cta-btn {
  animation: whatIfCtaShimmer 6s ease-in-out 2s infinite alternate;
}

@keyframes whatIfCtaShimmer {
  0%, 100% {
    box-shadow: 0 4px 22px rgba(163, 14, 21, 0.35);
  }
  50% {
    box-shadow: 0 6px 28px rgba(216, 29, 38, 0.55);
  }
}

.whatif-cta-btn:hover,
.whatif-cta-btn:focus-visible {
  background: #c41018;
  border-color: #e02424;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(196, 16, 24, 0.55);
  color: #ffffff;
}

.whatif-cta-btn:hover .whatif-cta-arrow,
.whatif-cta-btn:focus-visible .whatif-cta-arrow {
  transform: translateX(5px);
}

.whatif-cta-arrow {
  font-size: 1.15rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1;
  display: inline-block;
}

/* 6. Bottom Three Pillars: IGNITE / IMPACT / INFLUENCE */
.whatif-pillars-row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2rem;
  padding-top: 0.4rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.85s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.85s;
  will-change: opacity, transform;
}

.whatif-in-view .whatif-pillars-row {
  opacity: 1;
  transform: translateY(0);
}

.whatif-pillar-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.whatif-pillar-card:hover {
  transform: translateY(-3px);
}

.whatif-pillar-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d6b06b;
  flex-shrink: 0;
}

.whatif-pillar-svg {
  width: 26px;
  height: 26px;
  stroke: #d6b06b;
  display: block;
  transition: stroke 0.35s ease, filter 0.35s ease;
}

.whatif-pillar-card:hover .whatif-pillar-svg {
  stroke: #f7e6c4;
  filter: drop-shadow(0 0 8px rgba(214, 176, 107, 0.6));
}

.whatif-pillar-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.pillar-label-main {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ece7de;
  line-height: 1.2;
}

.pillar-label-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #948f86;
  margin-top: 2px;
  line-height: 1.2;
}

.whatif-pillar-sep {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Responsive Mobile & Tablet Rules for WHAT IF
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .whatif-stage {
    padding: 0 3vw;
  }

  .whatif-left-col {
    width: 42%;
  }

  .whatif-right-col {
    width: 56%;
    padding-left: 1rem;
  }

  .whatif-pillars-row {
    gap: 1.2rem;
  }

  .whatif-pillar-card {
    gap: 0.65rem;
  }
}

@media (max-width: 991px) {
  .whatif-section {
    min-height: auto;
    max-height: none;
    padding: 60px 0 70px;
  }

  .whatif-stage {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
  }

  .whatif-bg-img {
    object-position: 35% center;
  }

  .whatif-bg-scrim-right {
    background: linear-gradient(180deg, 
      rgba(0, 0, 0, 0.4) 0%, 
      rgba(0, 0, 0, 0.8) 50%, 
      #000000 100%
    );
  }

  .whatif-left-col {
    width: 100%;
    max-width: 440px;
    order: 2;
    margin: 1.8rem 0;
    justify-content: center;
  }

  .whatif-michael-img {
    max-height: 480px;
    object-position: center bottom;
    margin: 0 auto;
  }

  .whatif-right-col {
    width: 100%;
    max-width: 620px;
    order: 1;
    padding: 0;
    align-items: center;
  }

  .whatif-content-inner {
    align-items: center;
    text-align: center;
  }

  .whatif-headline {
    justify-content: center;
  }

  .whatif-red-divider {
    margin-left: auto;
    margin-right: auto;
  }

  .whatif-copy {
    margin-left: auto;
    margin-right: auto;
  }

  .whatif-pillars-row {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.4rem;
  }
}

@media (max-width: 767px) {
  .whatif-section {
    padding: 50px 0 60px;
  }

  .whatif-stage {
    padding: 0 5vw;
  }

  .whatif-headline {
    font-size: clamp(3.8rem, 16vw, 5.5rem);
  }

  .whatif-subtitle {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
  }

  .whatif-red-divider {
    max-width: 240px;
    margin-top: 0.5rem;
    margin-bottom: 1.1rem;
  }

  .whatif-question {
    font-size: clamp(1.1rem, 5vw, 1.35rem);
  }

  .whatif-copy-break {
    display: none;
  }

  .whatif-copy {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  .whatif-left-col {
    max-width: 340px;
    margin: 1.5rem 0;
  }

  .whatif-michael-img {
    max-height: 380px;
  }

  .whatif-cta-btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    padding: 0.9rem 1.6rem;
    font-size: 0.78rem;
  }

  .whatif-pillars-row {
    flex-direction: row;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 2rem;
  }

  .whatif-pillar-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    flex: 1;
  }

  .whatif-pillar-text {
    text-align: center;
  }

  .pillar-label-main {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
  }

  .pillar-label-sub {
    font-size: 0.55rem;
    letter-spacing: 0.12em;
  }

  .whatif-pillar-sep {
    height: 32px;
  }
}

@media (max-width: 480px) {
  .whatif-headline {
    font-size: clamp(3.2rem, 15vw, 4.2rem);
  }

  .whatif-pillars-row {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
  }

  .pillar-label-main {
    font-size: 0.7rem;
  }

  .pillar-label-sub {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  .whatif-pillar-svg {
    width: 22px;
    height: 22px;
  }
}



/* ==========================================================================
   SECTION 5: MOSAIC — UTHERI ACADEMY & CHILDREN'S CHURCH (PANEL 1)
   3-Panel Cinematic Scroll Sequence — Panel 1
   ========================================================================== */
.mosaic-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  background-color: #040302;
  color: #ede8de;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  z-index: 5;
}

.mosaic-top-blend {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 6;
  pointer-events: none;
}

.mosaic-bottom-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 6;
  pointer-events: none;
}

.mosaic-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #040302;
}

.mosaic-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform: scale(1.03);
  filter: brightness(0.95);
  will-change: opacity, transform, filter;
}

.mosaic-section.mosaic-in-view .mosaic-bg-img {
  animation: mosaicBgReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards,
             mosaicBgBreathe 24s ease-in-out 1.8s infinite alternate;
}

@keyframes mosaicBgReveal {
  0% {
    opacity: 0;
    transform: scale(1.03);
    filter: brightness(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0.95);
  }
}

@keyframes mosaicBgBreathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025) translate3d(-3px, -2px, 0);
  }
  100% {
    transform: scale(1);
  }
}

.mosaic-bg-scrim-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,3,2,0.58) 0%, rgba(4,3,2,0.28) 38%, rgba(0,0,0,0) 62%);
  z-index: 2;
  pointer-events: none;
}

.mosaic-bg-scrim-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 100%);
  z-index: 2;
  pointer-events: none;
}

.mosaic-bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 2;
  pointer-events: none;
}

.mosaic-stage {
  position: relative;
  width: 100%;
  max-width: 1540px;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 4;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  padding: 40px 5vw;
  box-sizing: border-box;
}

/* Left Column: Family Cutout */
.mosaic-family-col {
  position: relative;
  width: 48%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 3;
}

.mosaic-family-frame {
  position: relative;
  width: 100%;
  max-height: 82vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mosaic-family-img {
  max-height: 80vh;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  transform: translateY(14px);
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.6));
  will-change: opacity, transform;
}

.mosaic-section.mosaic-in-view .mosaic-family-img {
  animation: mosaicFamilyFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.mosaic-family-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: linear-gradient(0deg, #040302 0%, transparent 100%);
  pointer-events: none;
  z-index: 4;
}

/* Left Column: Content */
.mosaic-content-col {
  position: relative;
  width: 48%;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 4;
  padding-right: 2vw;
}

.mosaic-content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.mosaic-eyebrow-wrap {
  margin-bottom: 12px;
}

.mosaic-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(224, 195, 145, 0.85);
  opacity: 0;
  will-change: opacity, transform;
}

.mosaic-section.mosaic-in-view .mosaic-eyebrow {
  animation: mosaicFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.mosaic-title-wrap {
  margin-bottom: 8px;
}

.mosaic-main-title {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 5.2vw, 5.4rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 0.95;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  background: linear-gradient(135deg, #FFF7EA 0%, #F5DEB3 25%, #E5C383 50%, #C99E56 75%, #F0D59E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 25px rgba(201, 158, 86, 0.3));
  opacity: 0;
  will-change: opacity, transform;
}

.mosaic-section.mosaic-in-view .mosaic-main-title {
  animation: mosaicFadeUp 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.32s forwards;
}

.mosaic-subtitle-wrap {
  margin-bottom: 14px;
}

.mosaic-subtitle {
  font-family: 'Cinzel', 'Montserrat', serif;
  font-size: clamp(1.05rem, 1.65vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.25;
  color: #EDE8DE;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  opacity: 0;
  will-change: opacity, transform;
}

.mosaic-sub-line {
  display: block;
}

.mosaic-section.mosaic-in-view .mosaic-subtitle {
  animation: mosaicFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

.mosaic-tagline-wrap {
  margin-bottom: 20px;
}

.mosaic-tagline {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  color: rgba(215, 205, 190, 0.8);
  margin: 0;
  text-transform: uppercase;
  opacity: 0;
  will-change: opacity, transform;
}

.mosaic-section.mosaic-in-view .mosaic-tagline {
  animation: mosaicFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.58s forwards;
}

.mosaic-gold-divider {
  width: 100%;
  max-width: 440px;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 158, 86, 0.6) 0%, rgba(201, 158, 86, 0.25) 75%, transparent 100%);
  margin-bottom: 22px;
  opacity: 0;
  will-change: opacity, transform;
}

.mosaic-section.mosaic-in-view .mosaic-gold-divider {
  animation: mosaicDividerExpand 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.68s forwards;
}

.mosaic-values-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 30px;
  opacity: 0;
  will-change: opacity, transform;
}

.mosaic-section.mosaic-in-view .mosaic-values-row {
  animation: mosaicFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.78s forwards;
}

.mosaic-value-item {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.66rem, 0.8vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 158, 86, 0.95);
}

.mosaic-value-dot {
  color: rgba(201, 158, 86, 0.45);
  font-size: 0.8rem;
}

.mosaic-cta-wrap {
  opacity: 0;
  will-change: opacity, transform;
}

.mosaic-section.mosaic-in-view .mosaic-cta-wrap {
  animation: mosaicFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
}

.mosaic-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 32px;
  border-radius: 9999px;
  background: rgba(12, 10, 8, 0.75);
  border: 1px solid rgba(218, 175, 95, 0.55);
  color: #F8F4EC;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(218, 175, 95, 0.1);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.mosaic-cta-button:hover {
  background: rgba(24, 18, 12, 0.95);
  border-color: rgba(240, 205, 130, 0.9);
  box-shadow: 0 0 25px rgba(218, 175, 95, 0.35), 0 6px 25px rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.mosaic-cta-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 1.05rem;
}

.mosaic-cta-button:hover .mosaic-cta-arrow {
  transform: translateX(5px);
}

@keyframes mosaicFadeUp {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mosaicFamilyFadeIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mosaicDividerExpand {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@media (max-width: 991px) {
  .mosaic-bg-img {
    object-position: 68% center;
  }

  .mosaic-stage {
    flex-direction: column;
    justify-content: center;
    padding: 70px 6vw 40px;
  }

  .mosaic-family-col {
    position: absolute;
    inset: 0;
    width: 0;
    height: 0;
  }

  .mosaic-family-img {
    max-height: 42vh;
  }

  .mosaic-content-col {
    width: 100%;
    max-width: min(88vw, 650px);
    padding-right: 0;
    align-items: flex-start;
    text-align: left;
    margin-top: 0;
  }

  .mosaic-content-inner {
    align-items: flex-start;
    text-align: left;
  }

  .mosaic-gold-divider {
    margin: 14px 0;
  }

  .mosaic-values-row {
    justify-content: flex-start;
    margin-bottom: 20px;
  }
}

@media (max-width: 600px) {
  .mosaic-bg-img {
    object-fit: contain;
    object-position: center bottom;
  }

  .mosaic-family-col {
    height: 36vh;
    max-height: 280px;
  }

  .mosaic-main-title {
    font-size: 2.5rem;
  }

  .mosaic-subtitle {
    font-size: 0.95rem;
    letter-spacing: 0.16em;
  }

  .mosaic-tagline {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
  }

  .mosaic-values-row {
    gap: 6px 8px;
    font-size: 0.64rem;
  }

  .mosaic-cta-button {
    padding: 11px 24px;
    font-size: 0.74rem;
  }
}

/* ==========================================================================
   SECTION 6: SCHOOL OF REVELATION (PANEL 2)
   3-Panel Cinematic Scroll Sequence — Panel 2
   ========================================================================== */
.revelation-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  background-color: #0d0806;
  color: #ede8de;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  z-index: 10;
  transform-origin: center center;
  will-change: transform;
}

.revelation-top-blend {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

.revelation-bottom-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

.revelation-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0d0806;
}

.revelation-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform: scale(1.03);
  filter: brightness(0.96) contrast(1.02);
  will-change: opacity, transform, filter;
}

.revelation-section.revelation-in-view .revelation-bg-img {
  animation: revelationBgReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards,
             revelationBgBreathe 24s ease-in-out 1.8s infinite alternate;
}

@keyframes revelationBgReveal {
  0% {
    opacity: 0;
    transform: scale(1.03);
    filter: brightness(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0.96);
  }
}

@keyframes revelationBgBreathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025) translate3d(3px, -2px, 0);
  }
  100% {
    transform: scale(1);
  }
}

.revelation-bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 65%, rgba(13, 8, 6, 0.6) 100%);
  z-index: 2;
  pointer-events: none;
}

.revelation-stage {
  position: relative;
  width: 100%;
  max-width: 1540px;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 6vw;
  box-sizing: border-box;
}

/* Left Column: Real HTML Typography over Clean Parchment */
.revelation-content-col {
  position: relative;
  width: 52%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5;
  padding-left: 1vw;
}

.revelation-content-inner {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.revelation-content-inner::before {
  content: '';
  position: absolute;
  inset: -28px -32px;
  z-index: -1;
  border-radius: 2px;
  background: rgba(38, 26, 20, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

.revelation-eyebrow-wrap {
  margin-bottom: 12px;
}

.revelation-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #f1e5d2;
  opacity: 0;
  will-change: opacity, transform;
}

.revelation-section.revelation-in-view .revelation-eyebrow {
  animation: revelationFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.revelation-heading-wrap {
  margin-bottom: 2px;
}

.revelation-heading-school {
  display: block;
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.05;
  color: #f7ecda;
  text-transform: uppercase;
  opacity: 0;
  will-change: opacity, transform;
}

.revelation-section.revelation-in-view .revelation-heading-school {
  animation: revelationFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards;
}

.revelation-title-wrap {
  margin-bottom: 8px;
}

.revelation-main-title {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 4.8vw, 5.2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 0.95;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  background: linear-gradient(135deg, #a84450 0%, #8b2431 35%, #721522 70%, #922d3a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(250, 244, 235, 0.28)) drop-shadow(0 2px 8px rgba(22, 8, 8, 0.45));
  opacity: 0;
  will-change: opacity, transform;
}

.revelation-section.revelation-in-view .revelation-main-title {
  animation: revelationFadeUp 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}

.revelation-subbrand-wrap {
  margin-bottom: 14px;
}

.revelation-subbrand {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.74rem, 0.95vw, 0.88rem);
  font-weight: 500;
  letter-spacing: 0.45em;
  color: #eadcc7;
  text-transform: uppercase;
  opacity: 0;
  will-change: opacity, transform;
}

.revelation-section.revelation-in-view .revelation-subbrand {
  animation: revelationFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

.revelation-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin-bottom: 18px;
  opacity: 0;
  will-change: opacity, transform;
}

.revelation-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(168, 68, 80, 0.65) 0%, rgba(218, 175, 95, 0.8) 50%, rgba(168, 68, 80, 0.65) 100%);
}

.revelation-divider-mark {
  font-size: 0.8rem;
  color: rgba(232, 192, 112, 0.92);
}

.revelation-section.revelation-in-view .revelation-divider {
  animation: revelationDividerExpand 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

.revelation-copy-wrap {
  margin-bottom: 26px;
  max-width: 520px;
  opacity: 0;
  will-change: opacity, transform;
}

.revelation-copy-lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.05rem, 1.3vw, 1.32rem);
  font-style: italic;
  line-height: 1.45;
  color: #f7ecdc;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.revelation-copy-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.98rem, 1.2vw, 1.22rem);
  font-style: italic;
  line-height: 1.45;
  color: #eadfce;
  margin: 0;
  font-weight: 400;
}

.revelation-section.revelation-in-view .revelation-copy-wrap {
  animation: revelationFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.78s forwards;
}

.revelation-cta-wrap {
  opacity: 0;
  will-change: opacity, transform;
}

.revelation-section.revelation-in-view .revelation-cta-wrap {
  animation: revelationFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
}

.revelation-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 30px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #5a0e18 0%, #3e070e 100%);
  border: 1px solid rgba(218, 175, 95, 0.65);
  color: #FAF4EB;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(70, 10, 18, 0.4), inset 0 0 10px rgba(218, 175, 95, 0.2);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.revelation-cta-button:hover {
  background: linear-gradient(135deg, #721422 0%, #4c0a13 100%);
  border-color: rgba(240, 205, 130, 0.95);
  box-shadow: 0 0 25px rgba(218, 175, 95, 0.35), 0 6px 25px rgba(50, 6, 12, 0.6);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.revelation-cta-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 1.05rem;
}

.revelation-cta-button:hover .revelation-cta-arrow {
  transform: translateX(5px);
}

/* Right Column: Atmospheric Artwork Area */
.revelation-visual-col {
  position: relative;
  width: 45%;
  height: 100%;
  pointer-events: none;
}

@keyframes revelationFadeUp {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revelationDividerExpand {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@media (max-width: 991px) {
  .revelation-stage {
    flex-direction: column;
    justify-content: center;
    padding: 70px 6vw 40px;
  }

  .revelation-content-col {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
  }

  .revelation-visual-col {
    display: none;
  }

  .revelation-content-inner {
    padding: 25px 20px;
    border-radius: 12px;
  }

  .revelation-content-inner::before {
    inset: 0;
    border-radius: inherit;
  }
}

@media (max-width: 600px) {
  .revelation-heading-school {
    font-size: 1.6rem;
  }

  .revelation-main-title {
    font-size: 2.3rem;
  }

  .revelation-copy-lead {
    font-size: 0.96rem;
  }

  .revelation-copy-sub {
    font-size: 0.9rem;
  }

  .revelation-cta-button {
    padding: 10px 24px;
    font-size: 0.74rem;
  }
}

/* ==========================================================================
   SECTION 7: THE YOD FACTOR (PANEL 3)
   Visual Identity: Warm, Modern, Premium, Editorial, Intelligent, Calm, Contemporary
   Palette: Warm Stone, Charcoal, Deep Brown, Ivory, Muted Bronze, Restrained Warm Gold
   ========================================================================== */

.yodfactor-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  background-color: #070605;
  color: #ede8de;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  z-index: 15;
  transform-origin: center center;
  will-change: transform;
}

/* Top & Bottom Seamless Atmospheric Deep Black Dissolves */
.yodfactor-top-blend {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 6;
  pointer-events: none;
}

.yodfactor-bottom-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 6;
  pointer-events: none;
}

/* Master Background Container */
.yodfactor-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* 1. Background Image: Entrance scale 1.035 -> 1 & opacity 0 -> 1 (Starts at 0s, Duration ~1.6s) */
.yodfactor-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.035);
  filter: brightness(0.9);
  will-change: opacity, transform, filter;
}

.yodfactor-in-view .yodfactor-bg-img {
  animation: yodBgReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards, yodBgBreathe 20s ease-in-out 1.8s infinite alternate;
}

@keyframes yodBgReveal {
  0% {
    opacity: 0;
    transform: scale(1.035);
    filter: brightness(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes yodBgBreathe {
  0% {
    transform: scale(1);
    filter: brightness(1) contrast(1.02);
  }
  50% {
    transform: scale(1.04) translate3d(-8px, -4px, 0);
    filter: brightness(1.04) contrast(1.03);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) contrast(1.02);
  }
}

/* Directional Dark Scrim on the Left for Pristine Text Readability */
.yodfactor-bg-scrim-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    #070605 0%, 
    rgba(7, 6, 5, 0.94) 26%, 
    rgba(7, 6, 5, 0.76) 44%, 
    rgba(7, 6, 5, 0.32) 58%, 
    rgba(7, 6, 5, 0) 76%
  );
  z-index: 2;
  pointer-events: none;
}

.yodfactor-bg-scrim-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(180deg, rgba(7, 6, 5, 0.85) 0%, rgba(7, 6, 5, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

.yodfactor-bg-scrim-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(0deg, rgba(7, 6, 5, 0.85) 0%, rgba(7, 6, 5, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

.yodfactor-bg-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.55);
  z-index: 2;
  pointer-events: none;
}

/* Main Unified Composition Stage */
.yodfactor-stage {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 4vw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 700px;
  height: 100%;
}

/* Left Column: Editorial Content (~46% desktop width) */
.yodfactor-left-col {
  width: 46%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  padding: 2.2rem 1.5rem 2.2rem 0;
  z-index: 5;
}

.yodfactor-content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

/* 2. The Yod Factor Brand Lockup: Entrance translateY 18px -> 0 & opacity 0 -> 1 (Starts at 0.4s, Duration ~1.0s) */
.yodfactor-brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1.15rem;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.yodfactor-in-view .yodfactor-brand-wrap {
  animation: yodBrandReveal 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@keyframes yodBrandReveal {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.yodfactor-brand-the {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  color: #baa58c;
  line-height: 1;
}

.yodfactor-brand-yod {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(3.2rem, 5vw, 4.7rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 0.88;
  margin: 0.15rem 0 0.1rem;
  background: linear-gradient(180deg, #faf1dc 0%, #d4a758 45%, #966f28 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(212, 167, 88, 0.25));
  display: inline-block;
  transition: filter 0.5s ease;
}

.yodfactor-in-view .yodfactor-brand-yod {
  animation: yodGoldGlow 5s ease-in-out 1.5s infinite alternate;
}

@keyframes yodGoldGlow {
  0%, 100% {
    filter: drop-shadow(0 2px 14px rgba(212, 167, 88, 0.22));
    transform: translateY(0);
  }
  50% {
    filter: drop-shadow(0 4px 26px rgba(212, 167, 88, 0.55));
    transform: translateY(-2px);
  }
}

.yodfactor-brand-factor {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(1.02rem, 1.4vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: #ede8de;
  line-height: 1;
}

.yodfactor-brand-rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 140px;
  margin-top: 0.65rem;
}

.yodfactor-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 167, 88, 0.5) 0%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

.yodfactor-rule-line:first-child {
  background: linear-gradient(270deg, rgba(212, 167, 88, 0.5) 0%, transparent 100%);
  transform-origin: right center;
}

.yodfactor-in-view .yodfactor-rule-line {
  transform: scaleX(1);
}

.yodfactor-rule-pip {
  width: 4px;
  height: 4px;
  background: #d4a758;
  transform: rotate(45deg) scale(0);
  box-shadow: 0 0 6px rgba(212, 167, 88, 0.4);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.75s;
}

.yodfactor-in-view .yodfactor-rule-pip {
  transform: rotate(45deg) scale(1);
}

/* 3. Primary Editorial Headline: Entrance translateY 20px -> 0 & opacity 0 -> 1 (Starts at 0.9s, Duration ~1.0s) */
.yodfactor-headline-wrap {
  margin-bottom: 1.1rem;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.yodfactor-in-view .yodfactor-headline-wrap {
  animation: yodHeadlineReveal 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
}

@keyframes yodHeadlineReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.yodfactor-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.4rem, 3.8vw, 3.9rem);
  font-weight: 400;
  line-height: 1.08;
  color: #f5f0e6;
  margin: 0;
  letter-spacing: 0.01em;
}

.yodfactor-head-line {
  display: block;
}

.yodfactor-head-within {
  font-style: italic;
  font-weight: 500;
  color: #cfab6d;
  text-shadow: 0 0 20px rgba(207, 171, 109, 0.25);
  display: inline-block;
}

.yodfactor-in-view .yodfactor-head-within {
  animation: yodWithinShine 4.5s ease-in-out 1.9s infinite alternate;
}

@keyframes yodWithinShine {
  0%, 100% {
    text-shadow: 0 0 18px rgba(207, 171, 109, 0.25);
    color: #cfab6d;
  }
  50% {
    text-shadow: 0 0 32px rgba(230, 195, 130, 0.65);
    color: #f5deaa;
  }
}

/* 4 & 5. Body Copy: Animated Individually and Sequentially */
.yodfactor-copy-wrap {
  margin-bottom: 1.25rem;
}

/* 4. First Paragraph: Entrance translateY 15px -> 0 & opacity 0 -> 1 (Starts at 1.4s, Duration ~0.9s) */
.yodfactor-copy-p:first-child {
  opacity: 0;
  transform: translateY(15px);
  will-change: opacity, transform;
}

.yodfactor-in-view .yodfactor-copy-p:first-child {
  animation: yodParagraphOneReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}

@keyframes yodParagraphOneReveal {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 5. Second Paragraph: Entrance translateY 15px -> 0 & opacity 0 -> 1 AFTER first paragraph (Starts at 1.85s, Duration ~0.9s) */
.yodfactor-copy-p:last-child {
  opacity: 0;
  transform: translateY(15px);
  will-change: opacity, transform;
  margin-bottom: 0;
}

.yodfactor-in-view .yodfactor-copy-p:last-child {
  animation: yodParagraphTwoReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.85s forwards;
}

@keyframes yodParagraphTwoReveal {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.yodfactor-copy-p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.82rem, 0.92vw, 0.94rem);
  font-weight: 300;
  line-height: 1.68;
  color: #beb8ab;
  margin: 0 0 0.75rem 0;
  max-width: 530px;
}

/* 6. Editorial Question: Entrance translateY 15px -> 0 & opacity 0 -> 1 (Starts at 2.35s, Duration ~0.9s) */
.yodfactor-question-wrap {
  margin-bottom: 1.45rem;
  opacity: 0;
  transform: translateY(15px);
  will-change: opacity, transform;
}

.yodfactor-in-view .yodfactor-question-wrap {
  animation: yodQuestionReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 2.35s forwards;
}

@keyframes yodQuestionReveal {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.yodfactor-question-divider {
  width: 0px;
  height: 1px;
  background: rgba(207, 171, 109, 0.35);
  margin-bottom: 0.85rem;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.5s;
}

.yodfactor-in-view .yodfactor-question-divider {
  width: 52px;
}

.yodfactor-question {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.4vw, 1.42rem);
  font-weight: 400;
  line-height: 1.35;
  color: #cfab6d;
  margin: 0;
  text-shadow: 0 0 16px rgba(207, 171, 109, 0.2);
}

.yodfactor-in-view .yodfactor-question {
  animation: yodQuestionGlow 6s ease-in-out 3.2s infinite alternate;
}

@keyframes yodQuestionGlow {
  0%, 100% {
    text-shadow: 0 0 16px rgba(207, 171, 109, 0.2);
  }
  50% {
    text-shadow: 0 0 24px rgba(207, 171, 109, 0.45);
  }
}

/* 7. Refined Bronze/Gold CTA: Entrance translateY 10px -> 0 & opacity 0 -> 1 (Starts at 2.85s, Duration ~0.85s) */
.yodfactor-cta-wrap {
  margin-bottom: 1.6rem;
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}

.yodfactor-in-view .yodfactor-cta-wrap {
  animation: yodCtaReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 2.85s forwards;
}

@keyframes yodCtaReveal {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.yodfactor-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: linear-gradient(135deg, #a3783a 0%, #7e5520 100%);
  color: #f7f3eb;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.92rem 2.1rem;
  border: 1px solid rgba(223, 179, 90, 0.4);
  border-radius: 0;
  box-shadow: 0 4px 22px rgba(126, 85, 32, 0.35);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  outline: none;
}

.yodfactor-in-view .yodfactor-cta-btn {
  animation: yodCtaShimmer 5s ease-in-out 3.7s infinite alternate;
}

@keyframes yodCtaShimmer {
  0%, 100% {
    box-shadow: 0 4px 22px rgba(126, 85, 32, 0.35);
    border-color: rgba(223, 179, 90, 0.4);
  }
  50% {
    box-shadow: 0 6px 28px rgba(184, 139, 72, 0.55);
    border-color: rgba(255, 220, 130, 0.75);
  }
}

.yodfactor-cta-btn:hover,
.yodfactor-cta-btn:focus-visible {
  background: linear-gradient(135deg, #b88b48 0%, #916327 100%);
  border-color: rgba(255, 220, 130, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(184, 139, 72, 0.5);
  color: #ffffff;
}

.yodfactor-cta-btn:hover .yodfactor-cta-arrow,
.yodfactor-cta-btn:focus-visible .yodfactor-cta-arrow {
  transform: translateX(5px);
}

.yodfactor-cta-arrow {
  font-size: 1.15rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1;
  display: inline-block;
}

/* 8. Four Bottom Principles: REVELATION, STRATEGY, CREATION, LEGACY (100-150ms Stagger: 3.25s - 3.70s) */
.yodfactor-principles-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-top: 0.35rem;
}

.yodfactor-principle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

.yodfactor-in-view .principle-revelation {
  animation: yodPrincipleReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 3.25s forwards;
}

.yodfactor-in-view .principle-strategy {
  animation: yodPrincipleReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 3.40s forwards;
}

.yodfactor-in-view .principle-creation {
  animation: yodPrincipleReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 3.55s forwards;
}

.yodfactor-in-view .principle-legacy {
  animation: yodPrincipleReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 3.70s forwards;
}

@keyframes yodPrincipleReveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.yodfactor-principle-item:hover {
  transform: translateY(-3px);
}

.yodfactor-principle-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c49a56;
  width: 28px;
  height: 28px;
}

.yodfactor-principle-svg {
  width: 24px;
  height: 24px;
  stroke: #c49a56;
  display: block;
  transition: stroke 0.35s ease, filter 0.35s ease;
}

.yodfactor-principle-item:hover .yodfactor-principle-svg {
  stroke: #faf1dc;
  filter: drop-shadow(0 0 8px rgba(212, 167, 88, 0.6));
}

.yodfactor-principle-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #baa58c;
  text-transform: uppercase;
  line-height: 1;
}

.yodfactor-principle-sep {
  width: 1px;
  height: 28px;
  background: rgba(212, 167, 88, 0.2);
  flex-shrink: 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center center;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.yodfactor-in-view .yodfactor-principle-sep:nth-of-type(1) {
  opacity: 1;
  transform: scaleY(1);
  transition-delay: 3.32s;
}

.yodfactor-in-view .yodfactor-principle-sep:nth-of-type(2) {
  opacity: 1;
  transform: scaleY(1);
  transition-delay: 3.47s;
}

.yodfactor-in-view .yodfactor-principle-sep:nth-of-type(3) {
  opacity: 1;
  transform: scaleY(1);
  transition-delay: 3.62s;
}

/* Right Column: Stephāine Seated in Chair (~54% desktop width) */
.yodfactor-right-col {
  width: 53%;
  max-width: 680px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  pointer-events: none;
  align-self: flex-end;
}

.yodfactor-stephaine-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* 9. Stephāine: Final Major Reveal - gentle emergence (opacity 0 -> 1, translateX 30px -> 0, scale 1.02 -> 1, Starts at 3.9s, Duration ~1.6s) */
.yodfactor-stephaine-img {
  width: 100%;
  max-width: 640px;
  height: auto;
  max-height: 82vh;
  max-height: 82dvh;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  opacity: 0;
  transform: translate3d(30px, 0, 0) scale(1.02);
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 25px rgba(212, 167, 88, 0.08));
  will-change: opacity, transform, filter;
}

.yodfactor-in-view .yodfactor-stephaine-img {
  animation: yodStephaineReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) 3.9s forwards, yodStephainePresence 7s ease-in-out 5.6s infinite alternate;
}

@keyframes yodStephaineReveal {
  0% {
    opacity: 0;
    transform: translate3d(30px, 0, 0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes yodStephainePresence {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 25px rgba(212, 167, 88, 0.12));
  }
  50% {
    transform: translate3d(0, -8px, 0) scale(1.008);
    filter: drop-shadow(0 28px 55px rgba(0, 0, 0, 0.92)) drop-shadow(0 0 35px rgba(212, 167, 88, 0.24));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 25px rgba(212, 167, 88, 0.12));
  }
}

.yodfactor-floor-shadow {
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 30px;
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.7) 0%, transparent 75%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease 3.9s;
}

.yodfactor-in-view .yodfactor-floor-shadow {
  opacity: 0.7;
  animation: yodShadowBreathe 7s ease-in-out 5.6s infinite alternate;
}

@keyframes yodShadowBreathe {
  0%, 100% {
    opacity: 0.7;
    transform: scaleX(1);
  }
  50% {
    opacity: 0.48;
    transform: scaleX(0.92);
  }
}

/* --------------------------------------------------------------------------
   Responsive Mobile & Tablet Rules for THE YOD FACTOR
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .yodfactor-stage {
    padding: 0 3vw;
  }

  .yodfactor-left-col {
    width: 46%;
  }

  .yodfactor-right-col {
    width: 52%;
  }

  .yodfactor-principles-row {
    gap: 0.9rem;
  }
}

@media (max-width: 991px) {
  .yodfactor-section {
    min-height: auto;
    max-height: none;
    padding: 60px 0 70px;
  }

  .yodfactor-stage {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
  }

  .yodfactor-bg-scrim-left {
    background: linear-gradient(180deg, 
      rgba(7, 6, 5, 0.45) 0%, 
      rgba(7, 6, 5, 0.82) 50%, 
      #070605 100%
    );
  }

  .yodfactor-left-col {
    width: 100%;
    max-width: 620px;
    order: 1;
    padding: 0;
    align-items: center;
  }

  .yodfactor-content-inner {
    align-items: center;
    text-align: center;
  }

  .yodfactor-brand-wrap {
    align-items: center;
  }

  .yodfactor-headline {
    text-align: center;
  }

  .yodfactor-copy-p {
    margin-left: auto;
    margin-right: auto;
  }

  .yodfactor-question-divider {
    margin-left: auto;
    margin-right: auto;
  }

  .yodfactor-right-col {
    width: 100%;
    max-width: 480px;
    order: 2;
    margin: 1.8rem 0;
    justify-content: center;
  }

  .yodfactor-stephaine-img {
    max-height: 480px;
    object-position: center bottom;
    margin: 0 auto;
  }

  .yodfactor-principles-row {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.4rem;
  }
}

@media (max-width: 767px) {
  .yodfactor-section {
    padding: 50px 0 60px;
  }

  .yodfactor-stage {
    padding: 0 5vw;
  }

  .yodfactor-brand-yod {
    font-size: clamp(2.8rem, 12vw, 3.8rem);
  }

  .yodfactor-headline {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .yodfactor-copy-p {
    font-size: 0.84rem;
    line-height: 1.62;
  }

  .yodfactor-question {
    font-size: 1.15rem;
  }

  .yodfactor-right-col {
    max-width: 360px;
    margin: 1.5rem 0;
  }

  .yodfactor-stephaine-img {
    max-height: 380px;
  }

  .yodfactor-cta-btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    padding: 0.9rem 1.6rem;
    font-size: 0.78rem;
  }

  .yodfactor-principles-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 0.6rem;
    margin-top: 1.5rem;
  }

  .yodfactor-principle-label {
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }

  .yodfactor-principle-svg {
    width: 20px;
    height: 20px;
  }

  .yodfactor-principle-sep {
    height: 24px;
  }
}

@media (max-width: 480px) {
  .yodfactor-brand-yod {
    font-size: clamp(2.4rem, 10vw, 3.2rem);
  }

  .yodfactor-headline {
    font-size: clamp(1.8rem, 7.5vw, 2.4rem);
  }

  .yodfactor-principles-row {
    gap: 0.4rem;
  }

  .yodfactor-principle-label {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  .yodfactor-principle-svg {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
   CINEMATIC WEBSITE FOOTER
   Visual Identity: Cinematic, Premium, Minimal, Spiritual, Elegant, Dark, Atmospheric
   Palette: Deep Black, Ivory, Restrained Metallic Gold, Warm Amber Glow
   ========================================================================== */

.site-footer {
  position: relative;
  width: 100%;
  background-color: #030303;
  color: #ede8de;
  overflow: hidden;
  padding: 4.5rem 0 2rem;
  border-top: 1px solid rgba(223, 179, 90, 0.15);
  z-index: 20;
}

/* Atmospheric Ambient Golden Flow & Horizon Reflection Layer */
.footer-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.footer-gold-wing {
  position: absolute;
  bottom: 0;
  width: 38vw;
  max-width: 580px;
  height: 280px;
  pointer-events: none;
  opacity: 0.85;
}

.footer-wing-left {
  left: -5%;
  background: radial-gradient(ellipse 90% 70% at 10% 90%, 
    rgba(255, 220, 130, 0.32) 0%, 
    rgba(223, 179, 90, 0.18) 35%, 
    rgba(160, 105, 25, 0.06) 65%, 
    transparent 85%
  );
  filter: blur(45px);
  transform: rotate(-8deg);
}

.footer-wing-right {
  right: -5%;
  background: radial-gradient(ellipse 90% 70% at 90% 90%, 
    rgba(255, 220, 130, 0.35) 0%, 
    rgba(223, 179, 90, 0.2) 35%, 
    rgba(160, 105, 25, 0.06) 65%, 
    transparent 85%
  );
  filter: blur(45px);
  transform: rotate(8deg);
}

.footer-floor-reflection {
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 2px;
  background: radial-gradient(ellipse at 50% 100%, 
    rgba(255, 235, 170, 0.75) 0%, 
    rgba(223, 179, 90, 0.35) 45%, 
    transparent 85%
  );
  filter: blur(2px);
}

.footer-ambient-core {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 120px;
  background: radial-gradient(ellipse at 50% 100%, 
    rgba(223, 179, 90, 0.12) 0%, 
    rgba(180, 130, 45, 0.04) 50%, 
    transparent 80%
  );
  filter: blur(40px);
}

/* Contained Content Container */
.footer-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 4vw;
}

/* Four-Column Content Grid */
.footer-main-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(1.5rem, 2.5vw, 3.5rem);
}

/* Vertical Thin Gold Dividers */
.footer-col-divider {
  width: 1px;
  height: 165px;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(223, 179, 90, 0.38) 25%, 
    rgba(223, 179, 90, 0.38) 75%, 
    transparent 100%
  );
  flex-shrink: 0;
}

/* 1. Brand Column */
.footer-col-brand {
  flex: 1.25;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand-lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.footer-logo-img {
  width: 48px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(223, 179, 90, 0.45));
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
}

.footer-brand-title {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #fff7e6;
  line-height: 1.15;
}

.footer-brand-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: #c4ab84;
  line-height: 1.2;
}

.footer-tagline {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-tagline-line {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #9c9588;
  margin: 0;
  line-height: 1.5;
}

/* Generic Column Headings */
.footer-heading {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #dfb35a;
  margin: 0 0 1.25rem 0;
  text-transform: uppercase;
}

/* 2. Quick Links Column */
.footer-col-links {
  flex: 0.95;
  min-width: 170px;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-nav-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  font-weight: 300;
  color: #d0cbc2;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
}

.footer-nav-link:hover,
.footer-nav-link:focus-visible {
  color: #dfb35a;
  transform: translateX(4px);
  text-shadow: 0 0 12px rgba(223, 179, 90, 0.3);
}

/* 3. Contact Column */
.footer-col-contact {
  flex: 1.1;
  min-width: 220px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.footer-contact-icon {
  color: #dfb35a;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-contact-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  font-weight: 300;
  color: #d0cbc2;
  text-decoration: none;
  transition: color 0.3s ease;
  word-break: break-all;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
  color: #dfb35a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-location-text {
  display: flex;
  flex-direction: column;
}

.footer-location-city {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  color: #d0cbc2;
}

.footer-location-country {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #8e887d;
  margin-top: 2px;
}

/* 4. Stay Connected Column */
.footer-col-social {
  flex: 0.9;
  min-width: 170px;
}

.footer-social-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.footer-social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(223, 179, 90, 0.08);
  border: 1px solid rgba(223, 179, 90, 0.28);
  color: #dfb35a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}

.footer-social-btn:hover,
.footer-social-btn:focus-visible {
  background: rgba(223, 179, 90, 0.24);
  border-color: rgba(255, 235, 170, 0.7);
  color: #fff7e6;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 0 18px rgba(223, 179, 90, 0.45);
}

/* Bottom Horizontal Divider */
.footer-bottom-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(223, 179, 90, 0.45) 20%, 
    rgba(255, 235, 170, 0.7) 50%, 
    rgba(223, 179, 90, 0.45) 80%, 
    transparent 100%
  );
  margin: 3.2rem 0 1.4rem;
}

/* Bottom Legal & Policy Bar */
.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: #8a8479;
}

.footer-copyright {
  margin: 0;
  text-transform: uppercase;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.footer-legal-link {
  color: #8a8479;
  text-decoration: none;
  transition: color 0.3s ease;
  letter-spacing: 0.16em;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
  color: #dfb35a;
}

.footer-legal-sep {
  color: rgba(223, 179, 90, 0.35);
  font-size: 0.65rem;
}

/* --------------------------------------------------------------------------
   Responsive Mobile & Tablet Rules for FOOTER
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-main-grid {
    gap: 1.5rem;
  }

  .footer-col-divider {
    height: 150px;
  }
}

@media (max-width: 860px) {
  .site-footer {
    padding: 3.5rem 0 2rem;
  }

  .footer-main-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.2rem 2rem;
  }

  .footer-col-divider {
    display: none;
  }

  .footer-col-brand {
    grid-column: span 2;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 0.85rem;
    text-align: center;
  }
}

@media (max-width: 580px) {
  .site-footer {
    padding: 3rem 0 1.8rem;
  }

  .footer-main-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .footer-col-brand,
  .footer-col-links,
  .footer-col-contact,
  .footer-col-social {
    width: 100%;
  }

  .footer-heading {
    margin-bottom: 0.95rem;
  }

  .footer-bottom-divider {
    margin: 2.2rem 0 1.2rem;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 0.85rem;
    text-align: center;
  }

  .footer-copyright {
    font-size: 0.64rem;
    line-height: 1.4;
  }

  .footer-legal-links {
    justify-content: center;
  }
}

/* ==========================================================================
   SECTION 8.5: LISTEN TO OUR MUSIC (SHORT CINEMATIC TRANSITION STRIP)
   Visual Identity: Bright White / Ivory, Warm Golden Glow, Clean, High-Contrast, Editorial
   Palette: Pure White, Warm Ivory, Deep Charcoal, Luminous Honey Gold
   Desktop Height: ~240px (220–250px range)
   ========================================================================== */

.music-banner-section {
  position: relative;
  width: 100%;
  height: 240px;
  min-height: 220px;
  max-height: 250px;
  background-color: #fbf9f5;
  color: #110d06;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 56px);
  margin: 0;
  z-index: 16;
  box-sizing: border-box;
}

/* Full-Bleed Master Artwork Layer */
.music-banner-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.music-banner-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 53%;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.4s var(--ease-cinematic), transform 1.6s var(--ease-cinematic);
  will-change: opacity, transform;
}

.music-banner-section.music-banner-in-view .music-banner-bg-img {
  opacity: 1;
  transform: scale(1);
}

/* Soft feathered white background scrims for flawless typography contrast while keeping center open */
.music-banner-scrim-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 36%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(251, 249, 245, 0.96) 0%, 
    rgba(251, 249, 245, 0.85) 50%, 
    rgba(251, 249, 245, 0.3) 80%, 
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

.music-banner-scrim-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 34%;
  height: 100%;
  background: linear-gradient(270deg, 
    rgba(251, 249, 245, 0.95) 0%, 
    rgba(251, 249, 245, 0.82) 48%, 
    rgba(251, 249, 245, 0.25) 80%, 
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Main Composition Content Stage (3 Horizontal Zones: Left Text, Center People, Right CTA) */
.music-banner-stage {
  position: relative;
  width: 100%;
  max-width: 1380px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
  gap: 1.5rem;
}

/* Left Column: Typography */
.music-banner-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 420px;
  flex-shrink: 0;
}

.music-banner-eyebrow {
  font-family: 'Cinzel', 'Montserrat', serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: #7a6548;
  margin-bottom: 0.15rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.1s var(--ease-cinematic) 0.15s, transform 1.1s var(--ease-cinematic) 0.15s;
}

.music-banner-section.music-banner-in-view .music-banner-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.music-banner-heading {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.1rem, 2.9vw, 2.75rem);
  font-weight: 700;
  line-height: 0.90;
  letter-spacing: 0.02em;
  margin: 0 0 0.35rem;
}

.line-listen {
  background: linear-gradient(180deg, #c79641 0%, #8c631e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  filter: drop-shadow(0 1px 6px rgba(199, 150, 65, 0.2));
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  filter: blur(4px);
  transition: opacity 1.25s var(--ease-cinematic) 0.28s, transform 1.25s var(--ease-cinematic) 0.28s, filter 1.25s var(--ease-cinematic) 0.28s;
}

.music-banner-section.music-banner-in-view .line-listen {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

.line-our-music {
  color: #0e0d0b;
  display: block;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  filter: blur(4px);
  transition: opacity 1.25s var(--ease-cinematic) 0.42s, transform 1.25s var(--ease-cinematic) 0.42s, filter 1.25s var(--ease-cinematic) 0.42s;
}

.music-banner-section.music-banner-in-view .line-our-music {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

.music-banner-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: #5a5042;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.1s var(--ease-cinematic) 0.56s, transform 1.1s var(--ease-cinematic) 0.56s;
}

.music-banner-section.music-banner-in-view .music-banner-tags {
  opacity: 1;
  transform: translateY(0);
}

.music-tag-dot {
  color: #c79641;
  font-size: 0.8rem;
  display: inline-block;
}

.music-banner-section.music-banner-in-view .music-tag-dot {
  animation: musicTagPulse 3s ease-in-out infinite alternate;
}

@keyframes musicTagPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(199, 150, 65, 0)); }
  100% { transform: scale(1.25); filter: drop-shadow(0 0 6px rgba(199, 150, 65, 0.6)); }
}

/* Right Column: CTA & Platforms */
.music-banner-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  max-width: 420px;
  flex-shrink: 0;
}

/* Elegant Cream / Gold CTA Pill Button */
.music-banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.68rem 1.65rem 0.68rem 0.92rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #faecd2 0%, #e2bc74 48%, #c5973e 100%);
  color: #0d0a05;
  text-decoration: none;
  font-family: 'Cinzel', 'Montserrat', sans-serif;
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  box-shadow: 0 6px 22px rgba(199, 150, 65, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.95);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(0.95);
  transition: opacity 1.2s var(--ease-cinematic) 0.58s, transform 1.2s var(--ease-cinematic) 0.58s, box-shadow 0.4s ease, filter 0.4s ease;
}

.music-banner-section.music-banner-in-view .music-banner-cta {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Specular Shimmer Sweep Overlay */
.music-banner-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%);
  transform: translateX(-100%);
  transition: transform 0.75s ease;
  pointer-events: none;
}

.music-banner-cta:hover::after {
  transform: translateX(100%);
}

.music-banner-cta:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 8px 28px rgba(199, 150, 65, 0.48), inset 0 1px 3px rgba(255, 255, 255, 1);
  filter: brightness(1.04);
}

.music-banner-cta:active {
  transform: translateY(0) scale(0.99);
}

.music-cta-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d0a05;
  color: #f5e4be;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.music-banner-cta:hover .music-cta-icon-circle {
  transform: scale(1.1);
  background: #000000;
  color: #ffffff;
}

.music-cta-play-svg {
  width: 11px;
  height: 11px;
  margin-left: 2px;
}

.music-cta-text {
  position: relative;
  z-index: 1;
}

.music-cta-arrow {
  display: inline-block;
  font-size: 1.0rem;
  font-weight: 600;
  transition: transform 0.35s ease;
  position: relative;
  z-index: 1;
}

.music-banner-cta:hover .music-cta-arrow {
  transform: translateX(4px);
}

/* Streaming Platforms Row */
.music-banner-platforms {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 0.55rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: #222222;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.1s var(--ease-cinematic) 0.72s, transform 1.1s var(--ease-cinematic) 0.72s;
}

.music-banner-section.music-banner-in-view .music-banner-platforms {
  opacity: 1;
  transform: translateY(0);
}

.music-platform-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #222222;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.music-platform-item:hover {
  color: #a67c2e;
  transform: translateY(-1px);
}

.music-platform-icon {
  display: block;
  opacity: 0.9;
}

.music-platform-sep {
  color: rgba(122, 101, 72, 0.35);
  font-size: 0.75rem;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Responsive Mobile & Tablet Rules for MUSIC BANNER
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .music-banner-section {
    height: auto;
    min-height: auto;
    max-height: none;
    padding: 34px 5vw;
  }

  .music-banner-stage {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
  }

  .music-banner-left-col {
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  .music-banner-right-col {
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  .music-banner-platforms {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.70rem;
  }

  .music-banner-scrim-left,
  .music-banner-scrim-right {
    width: 100%;
    background: linear-gradient(180deg, 
      rgba(251, 249, 245, 0.94) 0%, 
      rgba(251, 249, 245, 0.84) 50%, 
      rgba(251, 249, 245, 0.94) 100%
    );
  }
}

@media (max-width: 480px) {
  .music-banner-section {
    padding: 30px 5vw;
  }

  .music-banner-heading {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
  }

  .music-banner-tags {
    gap: 7px;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
  }
}

/* ==========================================================================
   SECTION 8.8: FOLLOW THE REALM (CONTINUOUS EDITORIAL PHOTO WALL)
   Visual Identity: Large Continuous Moving Photography Wall, Dark Ambient
   Movement: Pure CSS transform marquee (Top: Left, Bottom: Right)
   ========================================================================== */

.social-gallery-section {
  position: relative;
  width: 100%;
  background-color: #050505;
  color: #ede8de;
  overflow: hidden;
  padding: 4.5rem 0 3.5rem;
  margin: 0;
  z-index: 17;
  box-sizing: border-box;
}

/* Subtle Ambient Lighting */
.social-gallery-ambient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 40% at 50% 10%, rgba(212, 167, 88, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Section Intro Header */
.social-gallery-header {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 4vw 2.4rem;
}

.social-gallery-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: #f5f0e6;
  margin: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.social-gallery-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: #a49d90;
  margin: 0.5rem 0 0;
  text-transform: uppercase;
}

/* Edge-to-Edge Continuous Editorial Photo Wall */
.editorial-wall-container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  background-color: #050505;
  box-sizing: border-box;
}

.editorial-wall-row {
  display: flex;
  width: 100%;
  overflow: hidden;
  position: relative;
  user-select: none;
}

.editorial-wall-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Top Row: Right to Left Movement (~54s) */
.track-move-left {
  animation: editorialMarqueeLeft 54s linear infinite;
}

/* Bottom Row: Left to Right Movement (~62s) */
.track-move-right {
  animation: editorialMarqueeRight 62s linear infinite;
}

.editorial-wall-row:hover .editorial-wall-track {
  animation-play-state: paused;
}

@keyframes editorialMarqueeLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes editorialMarqueeRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Sequence Container (Sequence A & Duplicate Sequence B) */
.editorial-sequence {
  display: flex;
  align-items: stretch;
  gap: 3px;
  flex-shrink: 0;
}

/* Individual Editorial Photo Item */
.editorial-photo {
  position: relative;
  display: block;
  cursor: pointer;
  height: clamp(220px, 28vh, 310px);
  overflow: hidden;
  text-decoration: none;
  background-color: #0c0c0c;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Mixed Editorial Proportions */
.size-wide {
  width: clamp(320px, 34vw, 460px);
}

.size-portrait {
  width: clamp(170px, 18vw, 240px);
}

.size-square {
  width: clamp(220px, 28vh, 310px);
}

.size-narrow {
  width: clamp(140px, 14vw, 190px);
}

.size-large-landscape {
  width: clamp(380px, 40vw, 540px);
}

.size-medium-portrait {
  width: clamp(190px, 20vw, 270px);
}

.editorial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.92);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease;
}

.editorial-photo:hover .editorial-img,
.editorial-photo:focus-visible .editorial-img {
  transform: scale(1.045);
  filter: brightness(0.74);
}

/* Subtle Editorial Hover Overlay */
.editorial-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.78) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
  padding: 1rem;
  text-align: center;
}

.editorial-photo:hover .editorial-hover-overlay,
.editorial-photo:focus-visible .editorial-hover-overlay {
  opacity: 1;
}

.editorial-ig-icon {
  color: #dfb35a;
  filter: drop-shadow(0 0 10px rgba(223, 179, 90, 0.55));
  transform: translateY(8px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-photo:hover .editorial-ig-icon,
.editorial-photo:focus-visible .editorial-ig-icon {
  transform: translateY(0);
}

.editorial-cta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #f7f3eb;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transform: translateY(8px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.04s;
}

.editorial-photo:hover .editorial-cta,
.editorial-photo:focus-visible .editorial-cta {
  transform: translateY(0);
}

.overlay-arrow {
  color: #dfb35a;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.editorial-photo:hover .overlay-arrow,
.editorial-photo:focus-visible .overlay-arrow {
  transform: translateX(4px);
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .editorial-wall-track {
    animation: none !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive Mobile & Tablet Rules for FOLLOW THE REALM
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .social-gallery-section {
    padding: 3.5rem 0 2.5rem;
  }

  .editorial-photo {
    height: clamp(170px, 22vh, 230px);
  }

  .size-wide {
    width: clamp(260px, 42vw, 360px);
  }

  .size-portrait {
    width: clamp(135px, 22vw, 190px);
  }

  .size-square {
    width: clamp(170px, 22vh, 230px);
  }

  .size-narrow {
    width: clamp(115px, 18vw, 160px);
  }

  .size-large-landscape {
    width: clamp(300px, 50vw, 420px);
  }

  .size-medium-portrait {
    width: clamp(155px, 25vw, 210px);
  }
}

@media (max-width: 640px) {
  .social-gallery-section {
    padding: 2.8rem 0 2rem;
  }

  .social-gallery-header {
    padding: 0 5vw 1.6rem;
  }

  .social-gallery-title {
    font-size: 1.15rem;
    letter-spacing: 0.22em;
  }

  .social-gallery-subtitle {
    font-size: 0.72rem;
  }

  .editorial-photo {
    height: clamp(135px, 18vh, 175px);
  }

  .size-wide {
    width: clamp(200px, 52vw, 260px);
  }

  .size-portrait {
    width: clamp(105px, 28vw, 140px);
  }

  .size-square {
    width: clamp(135px, 18vh, 175px);
  }

  .size-narrow {
    width: clamp(90px, 24vw, 120px);
  }

  .size-large-landscape {
    width: clamp(240px, 62vw, 310px);
  }

  .size-medium-portrait {
    width: clamp(120px, 32vw, 155px);
  }
}

/* ==========================================================================
   SECTION 9: GIVE / DONATE (COMPACT EDITORIAL GIVING EXPERIENCE)
   Visual Identity: Minimal, Luxurious, Quiet, Modern, Editorial, Premium, Cinematic
   Palette: Deep Black, Charcoal, Warm Ivory, Champagne Gold, Muted Bronze
   ========================================================================== */

/* ==========================================================================
   SECTION 9: GIVE / DONATE (COMPACT EDITORIAL GIVING EXPERIENCE)
   Background: Custom Ivory / Gold Heavenly Sky with TR Insignia
   Typography: Dark Charcoal Editorial Contrast, Warm Metallic Gold Heading & Button
   Animation: Scroll-Triggered Staggered Sequence (Preserved Exactly)
   ========================================================================== */

.donate-section {
  position: relative;
  width: 100%;
  min-height: 320px;
  max-height: 420px;
  background-color: #f6f3ed;
  background-image: url('assets/give background.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #1a1612;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 5vw;
  margin: 0;
  z-index: 18;
  box-sizing: border-box;
}

/* Ambient Corner Illumination & Watermark (Hidden to preserve pure custom artwork) */
.donate-ambient,
.donate-watermark-wrap {
  display: none !important;
}

/* Main Horizontal Container */
.donate-container {
  position: relative;
  width: 100%;
  max-width: 1140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.5rem;
  z-index: 2;
}

/* Left Column: Typography & Message */
.donate-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1.1;
  max-width: 520px;
}

.donate-eyebrow-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 0.35rem;
}

.donate-eyebrow {
  font-family: 'Cinzel', 'Montserrat', serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: #1e1914;
  white-space: nowrap;
  line-height: 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.1s var(--ease-cinematic) 0.2s, transform 1.1s var(--ease-cinematic) 0.2s;
}

.donate-section.give-in-view .donate-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.donate-eyebrow-rule {
  height: 1.5px;
  flex: 1;
  max-width: 140px;
  background: linear-gradient(90deg, rgba(184, 134, 40, 0.85) 0%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-cinematic) 0.35s;
}

.donate-section.give-in-view .donate-eyebrow-rule {
  transform: scaleX(1);
}

.donate-heading {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.8rem, 5.8vw, 5.6rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: 0.03em;
  margin: 0.1rem 0 0.75rem;
  background: linear-gradient(180deg, #c9983f 0%, #9e7225 50%, #754f10 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(184, 134, 40, 0.22));
  opacity: 0;
  transform: translateY(22px) scale(0.96);
  filter: blur(4px);
  transition: opacity 1.3s var(--ease-cinematic) 0.3s, transform 1.3s var(--ease-cinematic) 0.3s, filter 1.3s var(--ease-cinematic) 0.3s;
}

.donate-section.give-in-view .donate-heading {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

.donate-message {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.15rem, 1.45vw, 1.35rem);
  font-weight: 500;
  line-height: 1.45;
  color: #211c17;
  letter-spacing: 0.015em;
  margin: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s var(--ease-cinematic) 0.48s, transform 1.2s var(--ease-cinematic) 0.48s;
}

.donate-section.give-in-view .donate-message {
  opacity: 1;
  transform: translateY(0);
}

/* Thin Vertical Divider */
.donate-divider {
  width: 1px;
  height: 150px;
  background: linear-gradient(180deg, transparent 0%, rgba(184, 134, 40, 0.45) 30%, rgba(184, 134, 40, 0.45) 70%, transparent 100%);
  flex-shrink: 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 1.3s var(--ease-cinematic) 0.35s;
}

.donate-section.give-in-view .donate-divider {
  transform: scaleY(1);
}

/* Right Column: CTA & Payment Badges */
.donate-right-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0.9;
  max-width: 440px;
}

/* Elegant Gold / Cream Pill Button */
.donate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 380px;
  padding: 1.15rem 2.8rem;
  border-radius: 9999px;
  background: linear-gradient(180deg, #f2d9a6 0%, #caa055 52%, #9b722d 100%);
  color: #0c0905;
  text-decoration: none;
  font-family: 'Cinzel', 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  box-shadow: 0 6px 30px rgba(184, 134, 40, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(22px) scale(0.94);
  transition: opacity 1.2s var(--ease-cinematic) 0.55s, transform 1.2s var(--ease-cinematic) 0.55s, box-shadow 0.4s ease, filter 0.4s ease;
}

.donate-section.give-in-view .donate-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Subtle Shimmer Sweep Overlay */
.donate-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
  transform: translateX(-100%);
  transition: transform 0.75s ease;
  pointer-events: none;
}

.donate-btn:hover::after {
  transform: translateX(100%);
}

.donate-btn:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 10px 42px rgba(184, 134, 40, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.8);
  filter: brightness(1.06);
}

.donate-btn:active {
  transform: translateY(0) scale(0.99);
}

.donate-btn-text {
  position: relative;
  z-index: 1;
}

.donate-btn-arrow {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 600;
  transition: transform 0.35s ease;
  position: relative;
  z-index: 1;
}

.donate-btn:hover .donate-btn-arrow {
  transform: translateX(6px);
}

/* Payment Methods Row */
.donate-payment-methods {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 1.35rem;
  color: #383027;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.1s var(--ease-cinematic) 0.72s, transform 1.1s var(--ease-cinematic) 0.72s;
}

.donate-section.give-in-view .donate-payment-methods {
  opacity: 1;
  transform: translateY(0);
}

.donate-payment-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.3s ease;
}

.donate-payment-item:hover {
  color: #9e7225;
}

.donate-pay-icon {
  display: block;
  opacity: 0.85;
}

.paypal-icon {
  width: 14px;
  height: 14px;
}

.donate-pay-sep {
  opacity: 0.6;
  font-size: 0.85rem;
  color: #a8947e;
  user-select: none;
}

.donate-zelle-logo {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: inherit;
}

/* Bottom Radiant Flare & Line */
.donate-bottom-flare-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  z-index: 5;
}

.donate-bottom-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(184, 134, 40, 0.3) 20%, 
    #c9983f 50%, 
    rgba(184, 134, 40, 0.3) 80%, 
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.4s var(--ease-cinematic) 0.1s;
}

.donate-section.give-in-view .donate-bottom-line {
  transform: scaleX(1);
}

.donate-bottom-glow {
  position: absolute;
  bottom: -6px;
  left: 15%;
  width: 70%;
  height: 16px;
  background: radial-gradient(ellipse at 50% 100%, 
    rgba(201, 152, 63, 0.4) 0%, 
    rgba(184, 134, 40, 0.15) 45%, 
    transparent 80%
  );
  filter: blur(4px);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 1.5s var(--ease-cinematic) 0.2s, transform 1.5s var(--ease-cinematic) 0.2s;
}

.donate-section.give-in-view .donate-bottom-glow {
  opacity: 1;
  transform: scaleX(1);
  animation: donateFlareBreathe 4.5s ease-in-out 1.5s infinite;
}

@keyframes donateFlareBreathe {
  0%, 100% {
    opacity: 0.85;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.08);
    filter: blur(3.5px);
  }
}

/* --------------------------------------------------------------------------
   Responsive Mobile & Tablet Rules for GIVE / DONATE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .donate-section {
    min-height: auto;
    max-height: none;
    padding: 55px 5vw;
    background-position: center center;
  }

  .donate-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.2rem;
  }

  .donate-left-col {
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  .donate-eyebrow-wrap {
    justify-content: center;
  }

  .donate-eyebrow-rule {
    display: none;
  }

  .donate-divider {
    display: none;
  }

  .donate-right-col {
    width: 100%;
    max-width: 100%;
  }

  .donate-btn {
    max-width: 320px;
    padding: 1.05rem 2.2rem;
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {
  .donate-section {
    padding: 45px 5vw;
    background-position: center center;
  }

  .donate-heading {
    font-size: clamp(3.2rem, 15vw, 4.2rem);
  }

  .donate-message {
    font-size: 1.05rem;
  }

  .donate-payment-methods {
    gap: 12px;
    font-size: 0.72rem;
  }
}

/* ==========================================================================
   CINEMATIC WEBSITE FOOTER ANIMATION & STYLING
   Visual Identity: Deep Black, Champagne Gold, Ethereal Atmospheric Flow
   Animation: Scroll-Triggered Staggered Cascade, Golden Wing Bloom, Micro-Interactions
   ========================================================================== */

.site-footer {
  position: relative;
  width: 100%;
  background-color: #040404;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212, 167, 88, 0.08) 0%, transparent 65%),
              radial-gradient(circle at 10% 90%, rgba(180, 130, 45, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 90% 90%, rgba(180, 130, 45, 0.05) 0%, transparent 50%),
              #040404;
  color: #ede8de;
  padding: 85px 5vw 45px;
  overflow: hidden;
  z-index: 20;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Atmospheric Layer: Gold Wings, Core Bloom & Floor Reflections
   -------------------------------------------------------------------------- */
.footer-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.footer-ambient-core {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 70vw;
  max-width: 900px;
  height: 350px;
  background: radial-gradient(ellipse at 50% 50%, 
    rgba(223, 179, 90, 0.16) 0%, 
    rgba(180, 130, 45, 0.06) 45%, 
    transparent 75%
  );
  filter: blur(50px);
  opacity: 0;
  transition: opacity 2s var(--ease-cinematic), transform 2.2s var(--ease-cinematic);
}

.footer-gold-wing {
  position: absolute;
  top: 10%;
  width: 38vw;
  max-width: 480px;
  height: 280px;
  filter: blur(65px);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 2s var(--ease-cinematic) 0.25s, transform 2.2s var(--ease-cinematic) 0.25s;
}

.footer-wing-left {
  left: -8%;
  background: radial-gradient(circle, rgba(212, 167, 88, 0.14) 0%, rgba(120, 85, 30, 0.03) 60%, transparent 80%);
}

.footer-wing-right {
  right: -8%;
  background: radial-gradient(circle, rgba(212, 167, 88, 0.14) 0%, rgba(120, 85, 30, 0.03) 60%, transparent 80%);
}

.footer-floor-reflection {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 80px;
  background: radial-gradient(ellipse at 50% 100%, 
    rgba(223, 179, 90, 0.09) 0%, 
    rgba(180, 130, 45, 0.03) 50%, 
    transparent 80%
  );
  filter: blur(20px);
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: center bottom;
  transition: opacity 1.8s var(--ease-cinematic) 0.35s, transform 2s var(--ease-cinematic) 0.35s;
}

/* In-View Atmosphere States */
.site-footer.footer-in-view .footer-ambient-core {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: footerAmbientBreathe 7s ease-in-out 1.5s infinite;
}

.site-footer.footer-in-view .footer-gold-wing {
  opacity: 0.75;
  transform: scale(1);
}

.site-footer.footer-in-view .footer-floor-reflection {
  opacity: 1;
  transform: scaleX(1);
}

@keyframes footerAmbientBreathe {
  0%, 100% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
    filter: blur(45px);
  }
}

/* --------------------------------------------------------------------------
   Footer Main Container & Grid Architecture
   -------------------------------------------------------------------------- */
.footer-container {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 2;
}

.footer-main-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.2rem;
  margin-bottom: 55px;
}

/* --------------------------------------------------------------------------
   Columns: Resting and In-View Transitions
   -------------------------------------------------------------------------- */
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s var(--ease-cinematic), transform 1.2s var(--ease-cinematic);
}

.footer-col-brand {
  flex: 1.35;
  max-width: 340px;
  transition-delay: 0.15s;
}

.footer-col-links {
  flex: 0.85;
  transition-delay: 0.28s;
}

.footer-col-contact {
  flex: 1.15;
  transition-delay: 0.40s;
}

.footer-col-social {
  flex: 1.1;
  transition-delay: 0.52s;
}

.site-footer.footer-in-view .footer-col {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Vertical Column Dividers
   -------------------------------------------------------------------------- */
.footer-col-divider {
  width: 1px;
  height: 170px;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(212, 167, 88, 0.25) 30%, 
    rgba(212, 167, 88, 0.25) 70%, 
    transparent 100%
  );
  flex-shrink: 0;
  align-self: stretch;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: opacity 1.3s var(--ease-cinematic) 0.35s, transform 1.3s var(--ease-cinematic) 0.35s;
}

.site-footer.footer-in-view .footer-col-divider {
  opacity: 1;
  transform: scaleY(1);
}

/* --------------------------------------------------------------------------
   Column 1: Brand Lockup & Tagline
   -------------------------------------------------------------------------- */
.footer-brand-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 1.2rem;
}

.footer-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(212, 167, 88, 0.25));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.footer-logo-img:hover {
  transform: scale(1.08) rotate(3deg);
  filter: drop-shadow(0 4px 14px rgba(223, 179, 90, 0.45));
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
}

.footer-brand-title {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, #faf1dc 0%, #dfb564 55%, #9a722e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
}

.footer-brand-subtitle {
  font-family: 'Cinzel', 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: #baa58c;
  line-height: 1.3;
}

.footer-tagline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-tagline-line {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(237, 232, 222, 0.65);
  margin: 0;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Column Headers
   -------------------------------------------------------------------------- */
.footer-heading {
  font-family: 'Cinzel', 'Montserrat', serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: #baa58c;
  margin: 0 0 1.35rem 0;
  line-height: 1;
  position: relative;
  padding-bottom: 8px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 167, 88, 0.6) 0%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-cinematic) 0.5s;
}

.site-footer.footer-in-view .footer-heading::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Column 2: Quick Navigation Links
   -------------------------------------------------------------------------- */
.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-nav-item {
  margin: 0;
}

.footer-nav-link {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(237, 232, 222, 0.72);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
  position: relative;
}

.footer-nav-link:hover {
  color: #dfb35a;
  transform: translateX(4px);
  text-shadow: 0 0 12px rgba(223, 179, 90, 0.4);
}

/* --------------------------------------------------------------------------
   Column 3: Contact & Location Info
   -------------------------------------------------------------------------- */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 1.15rem;
}

.footer-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dfb35a;
  opacity: 0.85;
  margin-top: 2px;
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-contact-item:hover .footer-contact-icon {
  transform: scale(1.15);
  color: #fff0be;
}

.footer-contact-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(237, 232, 222, 0.78);
  text-decoration: none;
  line-height: 1.4;
  word-break: break-all;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-contact-link:hover {
  color: #dfb35a;
  text-shadow: 0 0 10px rgba(223, 179, 90, 0.35);
}

.footer-location-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-location-city {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(237, 232, 222, 0.88);
  letter-spacing: 0.04em;
}

.footer-location-country {
  font-family: 'Cinzel', 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #baa58c;
}

/* --------------------------------------------------------------------------
   Column 4: Social Channels Row & Icon Buttons
   -------------------------------------------------------------------------- */
.footer-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(212, 167, 88, 0.28);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(237, 232, 222, 0.85);
  text-decoration: none;
  transition: transform 0.35s var(--ease-cinematic), 
              border-color 0.35s ease, 
              background 0.35s ease, 
              color 0.35s ease, 
              box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}

.footer-social-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(223, 179, 90, 0.35) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.footer-social-btn:hover {
  transform: translateY(-4px) scale(1.08);
  border-color: #dfb35a;
  background: rgba(223, 179, 90, 0.12);
  color: #fff0be;
  box-shadow: 0 6px 20px rgba(212, 167, 88, 0.32);
}

.footer-social-btn:hover::before {
  opacity: 1;
}

.footer-social-btn:active {
  transform: translateY(-1px) scale(1.02);
}

/* --------------------------------------------------------------------------
   Bottom Horizontal Divider & Legal Bar
   -------------------------------------------------------------------------- */
.footer-bottom-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(212, 167, 88, 0.22) 20%, 
    rgba(212, 167, 88, 0.5) 50%, 
    rgba(212, 167, 88, 0.22) 80%, 
    transparent 100%
  );
  margin-bottom: 28px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.4s var(--ease-cinematic) 0.62s;
}

.site-footer.footer-in-view .footer-bottom-divider {
  transform: scaleX(1);
}

.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: rgba(237, 232, 222, 0.55);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.1s var(--ease-cinematic) 0.75s, transform 1.1s var(--ease-cinematic) 0.75s;
}

.site-footer.footer-in-view .footer-bottom-bar {
  opacity: 1;
  transform: translateY(0);
}

.footer-copyright {
  margin: 0;
  line-height: 1.4;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-legal-link {
  color: rgba(237, 232, 222, 0.55);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal-link:hover {
  color: #dfb35a;
}

.footer-legal-sep {
  color: rgba(186, 165, 140, 0.35);
  user-select: none;
}

/* --------------------------------------------------------------------------
   Responsive Mobile & Tablet Rules for FOOTER
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .site-footer {
    padding: 65px 5vw 35px;
  }

  .footer-main-grid {
    flex-wrap: wrap;
    gap: 2.5rem 2rem;
  }

  .footer-col-divider {
    display: none;
  }

  .footer-col-brand {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .footer-col-links {
    flex: 1 1 42%;
  }

  .footer-col-contact {
    flex: 1 1 48%;
  }

  .footer-col-social {
    flex: 1 1 100%;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
}

@media (max-width: 580px) {
  .site-footer {
    padding: 50px 5vw 30px;
  }

  .footer-main-grid {
    flex-direction: column;
    gap: 2.2rem;
  }

  .footer-col-links,
  .footer-col-contact,
  .footer-col-social {
    flex: 1 1 100%;
    width: 100%;
  }

  .footer-brand-lockup {
    gap: 12px;
  }

  .footer-logo-img {
    width: 42px;
    height: 42px;
  }

  .footer-brand-title {
    font-size: 1.15rem;
  }

  .footer-social-btn {
    width: 40px;
    height: 40px;
  }
}

/* --------------------------------------------------------------------------
   SECTION 1.9: THE ARCHITECTS (MICHAEL & STEPHĀINE PRICE)
   -------------------------------------------------------------------------- */
.architects-section {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height, 0px));
  min-height: 650px;
  max-height: 900px;
  background-color: #f6f3ee;
  overflow: hidden;
  box-sizing: border-box;
}

/* Background Artwork Layer */
.architects-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.architects-section.architects-in-view .architects-bg {
  opacity: 1;
}

/* TOP-LEFT: Main Title Block */
.architects-title-block {
  position: absolute;
  left: clamp(24px, 5.5vw, 84px);
  top: clamp(24px, 7.5vh, 65px);
  z-index: 4;
  max-width: clamp(320px, 32vw, 480px);
}

.architects-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(10px, 0.75vw, 11px);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #111111;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}

.architects-main-title {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.95;
}

.arch-the-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.arch-the {
  font-family: 'Cormorant Garamond', 'Cinzel', serif;
  font-size: clamp(36px, 3.8vw, 50px);
  font-weight: 700;
  color: #111111;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.arch-gold-rule {
  flex: 1;
  max-width: 130px;
  height: 1.5px;
  background: linear-gradient(90deg, #b88a3b, rgba(184, 138, 59, 0.15));
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.8s ease 0.35s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.arch-word {
  font-family: 'Cormorant Garamond', 'Cinzel', serif;
  font-size: clamp(48px, 5.4vw, 76px);
  font-weight: 600;
  color: #b88a3b;
  letter-spacing: 0.08em;
  line-height: 1;
  display: block;
  margin-top: 2px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 1.2s ease 0.3s, clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.architects-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(9px, 0.8vw, 10.5px);
  font-weight: 600;
  letter-spacing: 0.32em;
  color: #524c44;
  text-transform: uppercase;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease 0.45s, transform 0.8s ease 0.45s;
}

.arch-sub-dot {
  color: #b88a3b;
  font-size: 11px;
}

/* LOWER-LEFT: Michael Leadership Story (Frosted Glass Panel) */
.architects-story-left {
  position: absolute;
  left: clamp(24px, 5.5vw, 84px);
  bottom: clamp(20px, 9vh, 60px);
  z-index: 4;
  width: clamp(260px, 23vw, 350px);
  background: rgba(255, 250, 240, 0.50);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(184, 138, 59, 0.20);
  box-shadow: 0 12px 40px rgba(70, 45, 15, 0.06);
  border-radius: 18px;
  padding: clamp(22px, 2vw, 34px);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1s ease 0.65s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.65s;
}

.arch-role-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(9.5px, 0.75vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #b88a3b;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.arch-lead-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(12px, 0.92vw, 13.5px);
  line-height: 1.66;
  color: #25221e;
  margin: 0 0 14px;
  font-weight: 400;
}

.arch-signature-group {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.arch-sig-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: #b88a3b;
  flex-shrink: 0;
}

.arch-sig-name {
  font-family: 'Alex Brush', 'Great Vibes', cursive;
  font-size: clamp(34px, 2.8vw, 42px);
  color: #b88a3b;
  line-height: 1;
  display: inline-block;
  transform: rotate(-2deg);
  opacity: 0;
  transition: opacity 1s ease 1s;
}

.arch-sig-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #524c44;
  text-transform: uppercase;
}

/* CENTER: Central Couple Composition (Michael + Stephāine) */
.architects-couple {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(520px, 50vw, 860px);
  height: clamp(430px, 66vh, 620px);
  max-width: 90%;
  pointer-events: none;
  z-index: 3;
}

.arch-michael-img,
.arch-stephaine-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  display: block;
}

.arch-michael-img {
  z-index: 1;
  opacity: 0;
  transform: translateX(-50%) translateY(25px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.arch-stephaine-img {
  z-index: 2;
  opacity: 0;
  transform: translateX(-50%) translateY(25px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.architects-section.architects-in-view .arch-michael-img,
.architects-section.architects-in-view .arch-stephaine-img {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* LOWER-RIGHT: Stephāine Leadership Story (Frosted Glass Panel) */
.architects-story-right {
  position: absolute;
  right: clamp(24px, 5.5vw, 84px);
  bottom: clamp(20px, 9vh, 60px);
  z-index: 4;
  width: clamp(260px, 23.5vw, 360px);
  background: rgba(255, 250, 240, 0.50);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(184, 138, 59, 0.20);
  box-shadow: 0 12px 40px rgba(70, 45, 15, 0.06);
  border-radius: 18px;
  padding: clamp(22px, 2vw, 34px);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1s ease 0.8s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.8s;
}

.arch-lead-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  color: #111111;
  margin: 0 0 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
}

.architects-story-right .arch-sig-name {
  opacity: 0;
  transition: opacity 1s ease 1.15s;
}

/* In-View Animation Triggers */
.architects-section.architects-in-view .architects-eyebrow,
.architects-section.architects-in-view .arch-the,
.architects-section.architects-in-view .architects-subtitle,
.architects-section.architects-in-view .architects-story-left,
.architects-section.architects-in-view .architects-story-right {
  opacity: 1;
  transform: translate(0, 0);
}

.architects-section.architects-in-view .arch-word {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.architects-section.architects-in-view .arch-gold-rule {
  opacity: 1;
  transform: scaleX(1);
}

.architects-section.architects-in-view .arch-sig-name {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints for THE ARCHITECTS
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .architects-story-left,
  .architects-story-right {
    width: clamp(240px, 24vw, 320px);
  }
}

@media (max-width: 1024px) {
  .architects-section {
    height: auto;
    min-height: auto;
    max-height: none;
    padding: 56px 24px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  .architects-bg {
    position: absolute;
    height: 100%;
  }
  .architects-title-block,
  .architects-couple,
  .architects-story-left,
  .architects-story-right {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    max-width: 500px;
    width: 100%;
    text-align: center;
  }
  .architects-story-left,
  .architects-story-right {
    padding: 24px 22px;
  }
  .architects-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .architects-main-title {
    align-items: center;
  }
  .arch-the-row {
    justify-content: center;
  }
  .arch-gold-rule {
    display: none;
  }
  .architects-subtitle {
    justify-content: center;
  }
  .architects-couple {
    height: clamp(340px, 48vh, 460px);
    margin: 0 auto;
  }
  .architects-section.architects-in-view .arch-michael-img,
  .architects-section.architects-in-view .arch-stephaine-img {
    transform: translateX(-50%) translateY(0);
  }
  .arch-signature-group {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .architects-section {
    padding: 40px 16px 36px;
    gap: 28px;
  }
  .architects-story-left,
  .architects-story-right {
    padding: 20px 16px;
    border-radius: 14px;
  }
  .arch-the {
    font-size: 30px;
  }
  .arch-word {
    font-size: 42px;
  }
  .architects-subtitle {
    font-size: 9px;
    letter-spacing: 0.22em;
    flex-wrap: wrap;
  }
  .architects-couple {
    height: 290px;
  }
  .arch-lead-heading {
    font-size: 19px;
  }
  .arch-sig-name {
    font-size: 32px;
  }
}

/* --------------------------------------------------------------------------
   SECTION 1.95: WHAT WE BELIEVE (MICHAEL PRICE & CORE BELIEFS)
   -------------------------------------------------------------------------- */
.believe-section {
  position: relative;
  width: 100%;
  height: clamp(650px, 90vh, 880px);
  min-height: 650px;
  max-height: 900px;
  background-color: #0d0b09;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background Artwork Layer */
.believe-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.believe-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.2s ease, transform 18s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.believe-section.believe-in-view .believe-bg-img {
  opacity: 1;
  transform: scale(1);
}

/* Subtle dark gradient overlay to ensure seamless transition & typography contrast */
.believe-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    rgba(10, 8, 6, 0.15) 0%, 
    rgba(10, 8, 6, 0.35) 45%, 
    rgba(10, 8, 6, 0.78) 70%, 
    rgba(10, 8, 6, 0.88) 100%
  );
  pointer-events: none;
}

/* Main Stage Container: Two-Column Grid */
.believe-stage {
  position: relative;
  width: 100%;
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  z-index: 2;
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  box-sizing: border-box;
  padding: 0 clamp(24px, 4.5vw, 72px);
}

/* LEFT COLUMN: Michael Visual */
.believe-visual-col {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.believe-michael-wrapper {
  position: relative;
  width: 100%;
  height: 94%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.believe-michael-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(25px);
  width: clamp(380px, 44vw, 680px);
  height: 100%;
  max-height: 88%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5));
  opacity: 0;
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  will-change: transform, opacity;
  z-index: 2;
  display: block;
}

.believe-section.believe-in-view .believe-michael-img {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.believe-desk-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: left bottom;
  z-index: 3;
  pointer-events: none;
  opacity: 0.95;
}

/* RIGHT COLUMN: What We Believe Editorial Story */
.believe-content-col {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: clamp(20px, 3.5vw, 60px);
  max-width: 580px;
  box-sizing: border-box;
}

/* 1. Eyebrow */
.believe-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 12px;
}

.believe-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(10px, 0.75vw, 11px);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #f7f3eb;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}

.believe-gold-rule {
  flex: 1;
  max-width: 110px;
  height: 1.5px;
  background: linear-gradient(90deg, #b88a3b, rgba(184, 138, 59, 0.15));
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.8s ease 0.25s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

/* 2. Main Title */
.believe-main-title {
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.92;
}

.believe-title-what {
  font-family: 'Cormorant Garamond', 'Cinzel', serif;
  font-size: clamp(42px, 4.6vw, 66px);
  font-weight: 600;
  color: #f7f3eb;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s ease 0.25s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.believe-title-word {
  font-family: 'Cormorant Garamond', 'Cinzel', serif;
  font-size: clamp(52px, 5.6vw, 84px);
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 0.06em;
  line-height: 0.95;
  display: block;
  margin-top: 4px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 1.2s ease 0.4s, clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

/* 3. Subtitle Row */
.believe-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(9.5px, 0.82vw, 11px);
  font-weight: 600;
  letter-spacing: 0.32em;
  color: #d8cebe;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease 0.55s, transform 0.8s ease 0.55s;
}

.believe-sub-dot {
  color: #b88a3b;
  font-size: 11px;
}

.believe-sub-rule {
  width: 48px;
  height: 1px;
  background: #b88a3b;
  margin-bottom: 20px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.8s ease 0.65s, transform 0.8s ease 0.65s;
}

/* 4. Body Copy */
.believe-body-copy {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(13px, 1.02vw, 15px);
  line-height: 1.78;
  color: #e5dfd5;
  margin: 0;
  font-weight: 400;
  max-width: 500px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1s ease 0.75s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.75s;
}

/* In-View Animation Triggers */
.believe-section.believe-in-view .believe-eyebrow,
.believe-section.believe-in-view .believe-title-what,
.believe-section.believe-in-view .believe-subtitle,
.believe-section.believe-in-view .believe-body-copy {
  opacity: 1;
  transform: translate(0, 0);
}

.believe-section.believe-in-view .believe-title-word {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.believe-section.believe-in-view .believe-gold-rule,
.believe-section.believe-in-view .believe-sub-rule {
  opacity: 1;
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints for WHAT WE BELIEVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .believe-section {
    height: auto;
    min-height: auto;
    max-height: none;
    padding: 56px 24px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  .believe-bg-wrap {
    position: absolute;
    height: 100%;
  }
  .believe-gradient-overlay {
    background: linear-gradient(180deg, 
      rgba(10, 8, 6, 0.2) 0%, 
      rgba(10, 8, 6, 0.65) 45%, 
      rgba(10, 8, 6, 0.92) 100%
    );
  }
  .believe-stage {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0;
    max-width: 600px;
  }
  .believe-visual-col {
    height: clamp(340px, 46vh, 460px);
    width: 100%;
  }
  .believe-michael-img {
    width: clamp(280px, 70vw, 420px);
  }
  .believe-content-col {
    padding-left: 0;
    align-items: center;
    text-align: center;
    max-width: 100%;
  }
  .believe-eyebrow-row {
    justify-content: center;
  }
  .believe-gold-rule {
    display: none;
  }
  .believe-main-title {
    align-items: center;
  }
  .believe-subtitle {
    justify-content: center;
    flex-wrap: wrap;
  }
  .believe-sub-rule {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px) {
  .believe-section {
    padding: 40px 16px 36px;
    gap: 28px;
  }
  .believe-visual-col {
    height: 290px;
  }
  .believe-title-what {
    font-size: 34px;
  }
  .believe-title-word {
    font-size: 46px;
  }
  .believe-subtitle {
    font-size: 9px;
    letter-spacing: 0.22em;
  }
  .believe-body-copy {
    font-size: 13px;
    line-height: 1.68;
  }
}

/* --------------------------------------------------------------------------
   Accessibility: Prefers-Reduced-Motion Overrides
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .yodfactor-bg-img,
  .yodfactor-stephaine-img,
  .yodfactor-floor-shadow,
  .yodfactor-brand-yod,
  .yodfactor-head-within,
  .yodfactor-cta-btn,
  .whatif-bg-img,
  .whatif-michael-img,
  .whatif-word-if,
  .whatif-red-divider,
  .whatif-highlight-something,
  .whatif-cta-btn,
  .architects-bg,
  .arch-michael-img,
  .arch-stephaine-img,
  .arch-the,
  .arch-word,
  .architects-story-left,
  .architects-story-right,
  .arch-sig-name,
  .believe-bg-img,
  .believe-michael-img,
  .believe-title-what,
  .believe-title-word,
  .believe-eyebrow,
  .believe-subtitle,
  .believe-body-copy,
  .partner-banner-bg-img,
  .partner-phrase,
  .partner-diamond-sep,
  .partner-v-divider,
  .partner-pill-btn,
  .partner-banner-eyebrow-row,
  .partner-banner-star-emblem {
    animation: none !important;
    transition: opacity 0.3s ease !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* --------------------------------------------------------------------------
   ==========================================================================
   SECTION 1.98: PARTNER WITH US TRANSITION BANNER
   Visual Palette: Deep Navy Sky, Champagne Gold, Pure Ivory, Reflective Waters
   ==========================================================================
   -------------------------------------------------------------------------- */

.partner-banner-section {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: clamp(160px, 16.5vh, 190px);
  min-height: 160px;
  max-height: 195px;
  background-color: #060e1c;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-top: 1.5px solid rgba(212, 175, 55, 0.45);
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.45);
  box-shadow: 
    0 4px 30px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    inset 0 -1px 2px rgba(255, 255, 255, 0.2);
  z-index: 12;
}

/* Background Artwork Canvas */
.partner-banner-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.partner-banner-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.2s ease, transform 16s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.partner-banner-section.partner-banner-in-view .partner-banner-bg-img {
  opacity: 1;
  transform: scale(1);
}

/* Ultra-Subtle Ambient Scrim to preserve gold waters and navy sky clarity */
.partner-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 9, 20, 0.32) 0%,
    rgba(4, 9, 20, 0.16) 50%,
    rgba(4, 9, 20, 0.38) 100%
  );
  pointer-events: none;
}

/* Main Banner Content Stage */
.partner-banner-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3.5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Top Eyebrow Row */
.partner-banner-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 2px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.partner-eyebrow-line {
  height: 1px;
  width: clamp(35px, 6vw, 100px);
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.75), transparent);
}

.partner-eyebrow-text {
  font-family: var(--font-sans-ui);
  font-size: clamp(0.62rem, 0.75vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.38em;
  color: #f7f1e1;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.partner-banner-star-emblem {
  font-size: 0.58rem;
  color: #dfb35a;
  margin-bottom: 6px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(223, 179, 90, 0.85);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

/* Main Content Row */
.partner-banner-main-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 40px);
  flex-wrap: nowrap;
}

/* Statement Group */
.partner-statement-group {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.0vw, 28px);
}

.partner-phrase {
  font-family: var(--font-serif-heading);
  font-size: clamp(0.98rem, 1.45vw, 1.42rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.partner-phrase .phrase-light {
  color: #ffffff;
}

.partner-phrase .phrase-gold {
  color: #dfb35a;
  text-shadow: 0 0 16px rgba(223, 179, 90, 0.45), 0 2px 10px rgba(0, 0, 0, 0.9);
}

.partner-diamond-sep {
  font-size: clamp(0.68rem, 0.9vw, 0.88rem);
  color: #dfb35a;
  opacity: 0;
  transform: translateY(15px);
  text-shadow: 0 0 10px rgba(223, 179, 90, 0.75);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Vertical Divider */
.partner-v-divider {
  width: 1px;
  height: clamp(24px, 3.4vh, 34px);
  background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.85), transparent);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pill Button */
.partner-cta-wrapper {
  display: flex;
  align-items: center;
}

.partner-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #fffefb 0%, #f7ecd4 55%, #edd29e 100%);
  color: #071222;
  border: 1.5px solid rgba(212, 175, 55, 0.65);
  border-radius: 9999px;
  padding: clamp(0.55rem, 0.9vw, 0.72rem) clamp(1.5rem, 2.0vw, 2.2rem);
  font-family: var(--font-serif-heading);
  font-size: clamp(0.74rem, 0.88vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 
    0 4px 18px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(212, 175, 55, 0.25);
  opacity: 0;
  transform: translateY(15px);
  transition: 
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), 
    transform 0.35s ease, 
    background-color 0.35s ease, 
    box-shadow 0.35s ease, 
    border-color 0.35s ease, 
    color 0.35s ease;
  cursor: pointer;
}

.partner-pill-btn:hover,
.partner-pill-btn:focus-visible {
  background: #ffffff;
  color: #030812;
  border-color: #f7dc8a;
  transform: translateY(-1px);
  box-shadow: 
    0 6px 26px rgba(0, 0, 0, 0.6),
    0 0 22px rgba(247, 220, 138, 0.7);
}

.partner-btn-text {
  position: relative;
  z-index: 2;
}

.partner-btn-arrow {
  display: inline-block;
  font-size: 1.1em;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.partner-pill-btn:hover .partner-btn-arrow,
.partner-pill-btn:focus-visible .partner-btn-arrow {
  transform: translateX(4px);
}

/* Sequenced Staggered Entrance Animation on Viewport Entry */
.partner-banner-section.partner-banner-in-view .partner-banner-eyebrow-row {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.partner-banner-section.partner-banner-in-view .partner-banner-star-emblem {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.16s;
}

.partner-banner-section.partner-banner-in-view .partner-phrase-1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.24s;
}

.partner-banner-section.partner-banner-in-view .partner-sep-1 {
  opacity: 0.9;
  transform: translateY(0);
  transition-delay: 0.34s;
}

.partner-banner-section.partner-banner-in-view .partner-phrase-2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.44s;
}

.partner-banner-section.partner-banner-in-view .partner-sep-2 {
  opacity: 0.9;
  transform: translateY(0);
  transition-delay: 0.54s;
}

.partner-banner-section.partner-banner-in-view .partner-phrase-3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.64s;
}

.partner-banner-section.partner-banner-in-view .partner-v-divider {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.74s;
}

.partner-banner-section.partner-banner-in-view .partner-pill-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.84s;
}

/* Responsive Media Queries for Partner Banner */
@media (max-width: 1024px) {
  .partner-banner-section {
    height: auto;
    min-height: 170px;
    max-height: none;
    padding: 1.5rem 1.2rem;
  }
  
  .partner-banner-main-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .partner-v-divider {
    display: none;
  }
}

@media (max-width: 640px) {
  .partner-banner-section {
    min-height: 180px;
    padding: 1.4rem 0.85rem;
  }
  
  .partner-statement-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
  }
  
  .partner-phrase {
    font-size: 0.92rem;
    letter-spacing: 0.08em;
  }
  
  .partner-pill-btn {
    padding: 0.55rem 1.5rem;
    font-size: 0.74rem;
  }
}

/* ==========================================================================
   SECTION: WHAT IF REGISTRATION BANNER (CINEMATIC SLIM HORIZONTAL STRIP)
   Visual Identity: Matches walapa.png reference (PERSON → WHAT IF → TAGLINE → 3 PILLARS → CTA FAR RIGHT)
   ========================================================================== */

.whatif-reg-banner-section {
  position: relative;
  width: 100%;
  min-height: 140px;
  height: clamp(140px, 15vh, 175px);
  max-height: 185px;
  background-color: var(--color-black, #000000);
  color: #ede8de;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  z-index: 10;
  box-sizing: border-box;
}

/* Seamless Top & Bottom Atmospheric Blends */
.whatif-reg-top-blend {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 6;
  pointer-events: none;
}

.whatif-reg-bottom-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 6;
  pointer-events: none;
}

/* Master Background Container */
.whatif-reg-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.whatif-reg-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.whatif-reg-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 35%,
    rgba(0, 0, 0, 0.04) 75%,
    rgba(0, 0, 0, 0.08) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Main Unified Container - Covers end-to-end with all items in one horizontal line */
.whatif-reg-container {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 clamp(1rem, 2.5vw, 3rem) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 1.8vw, 2.2rem);
  box-sizing: border-box;
}

/* 1. PERSON: Far Left, Anchored to Bottom */
.whatif-reg-person-col {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
  pointer-events: none;
}

.whatif-reg-person-img {
  height: 100%;
  max-height: clamp(135px, 15vh, 175px);
  width: auto;
  object-fit: contain;
  object-position: bottom left;
  filter: drop-shadow(4px 0 12px rgba(0, 0, 0, 0.35));
  display: block;
}

/* 2. WHAT IF Headline Block */
.whatif-reg-title-block {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: clamp(0.2rem, 0.8vw, 0.8rem);
}

.whatif-reg-title {
  font-family: 'Bebas Neue', 'Oswald', 'Montserrat', -apple-system, sans-serif;
  font-size: clamp(2.4rem, 3.6vw, 4.2rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: #1a1510;
  margin: 0;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 0.16em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.whatif-reg-title-red {
  color: #c41018;
  background: linear-gradient(180deg, #d81d26 0%, #a00c12 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 8px rgba(216, 29, 38, 0.35));
}

/* Subtle Vertical Divider between WHAT IF and Tagline */
.whatif-reg-v-sep {
  width: 1px;
  height: 38px;
  background: rgba(184, 134, 40, 0.5);
  flex-shrink: 0;
}

/* 3. TAGLINE Block (2 Lines, Serif, Vertically Centered) */
.whatif-reg-tagline-block {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.whatif-reg-tagline {
  font-family: var(--font-serif-editorial), 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.82rem, 1.05vw, 1.14rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #241d16;
  margin: 0;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  text-align: left;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* 4. THREE PILLARS Block (Horizontal with Thin Gold Icons & Dividers) */
.whatif-reg-pillars-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.6vw, 2.2rem);
  flex-shrink: 0;
}

.whatif-reg-pillar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  transition: transform 0.3s ease;
}

.whatif-reg-pillar-item:hover {
  transform: translateY(-2px);
}

.whatif-reg-pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b38226;
  line-height: 1;
}

.whatif-reg-pillar-icon svg {
  width: 22px;
  height: 22px;
  stroke: #b38226;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.4));
}

.whatif-reg-pillar-labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}

.whatif-reg-pillar-head {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.68rem, 0.8vw, 0.84rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #1a1510;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.whatif-reg-pillar-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.5rem, 0.58vw, 0.62rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #4a3e31;
  margin-top: 2px;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.whatif-reg-pillar-divider {
  width: 1px;
  height: 32px;
  background: rgba(184, 134, 40, 0.45);
  flex-shrink: 0;
}

/* 5. CTA BUTTON Block (Far Right) */
.whatif-reg-cta-block {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.whatif-reg-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: linear-gradient(180deg, #b8141d 0%, #850c12 100%);
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.68rem, 0.76vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(220, 38, 38, 0.6);
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(184, 20, 29, 0.45);
  transition: all 0.35s var(--ease-cinematic);
  cursor: pointer;
  white-space: nowrap;
}

.whatif-reg-cta-button:hover {
  background: linear-gradient(180deg, #d81d26 0%, #9e0c12 100%);
  border-color: #ef4444;
  box-shadow: 0 6px 24px rgba(220, 38, 38, 0.65);
  transform: translateY(-1px);
  color: #ffffff;
}

.whatif-reg-cta-arrow {
  display: inline-block;
  font-size: 1.1em;
  transition: transform 0.3s ease;
}

.whatif-reg-cta-button:hover .whatif-reg-cta-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   Responsive Media Queries for WHAT IF Banner
   ========================================================================== */
@media (max-width: 1200px) {
  .whatif-reg-container {
    gap: clamp(0.5rem, 1.2vw, 1.4rem);
    padding: 0 clamp(0.75rem, 1.5vw, 1.5rem) 0 0;
  }

  .whatif-reg-title {
    font-size: clamp(2rem, 3vw, 2.8rem);
  }

  .whatif-reg-tagline {
    font-size: clamp(0.76rem, 0.9vw, 0.95rem);
  }

  .whatif-reg-pillars-block {
    gap: clamp(0.5rem, 1vw, 1.2rem);
  }

  .whatif-reg-cta-button {
    padding: 0.6rem 1.1rem;
    font-size: 0.72rem;
  }
}

@media (max-width: 1024px) {
  .whatif-reg-banner-section {
    min-height: auto;
    height: auto;
    max-height: none;
    padding: 1.5rem 1.2rem;
  }

  .whatif-reg-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem 2rem;
    padding: 0;
  }

  .whatif-reg-person-col {
    height: 120px;
  }

  .whatif-reg-person-img {
    max-height: 120px;
  }

  .whatif-reg-v-sep {
    display: none;
  }

  .whatif-reg-cta-block {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .whatif-reg-banner-section {
    padding: 1.8rem 1rem;
  }

  .whatif-reg-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
  }

  .whatif-reg-person-col {
    height: 110px;
    align-items: center;
    justify-content: center;
  }

  .whatif-reg-person-img {
    max-height: 110px;
    object-position: center;
  }

  .whatif-reg-title-block {
    margin-left: 0;
  }

  .whatif-reg-title {
    font-size: clamp(2.4rem, 10vw, 3.2rem);
    justify-content: center;
  }

  .whatif-reg-tagline {
    text-align: center;
    font-size: 0.92rem;
  }

  .whatif-reg-pillars-block {
    width: 100%;
    justify-content: space-around;
    gap: 0.5rem;
  }

  .whatif-reg-pillar-divider {
    height: 24px;
  }

  .whatif-reg-cta-block {
    width: 100%;
  }

  .whatif-reg-cta-button {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.2rem;
    font-size: 0.76rem;
  }
}

/* ==========================================================================
   SECTION: FEATURE EXPERIENCES (CINEMATIC DUAL-SLIDESHOW)
   Contains: SLIDE 1 (SHE IS) & SLIDE 2 (RE-IMAGINE)
   Placement: Immediately after WHAT IF Promotional Banner
   Features: 3-Second Automatic Loop, Cinematic Zoom-In, Staggered Typography
   ========================================================================== */

.feature-showcase-section {
  position: relative;
  width: 100%;
  min-height: 720px;
  max-height: 880px;
  height: clamp(720px, 86vh, 880px);
  background-color: var(--color-black, #000000);
  color: #ede8de;
  overflow: hidden;
  display: block;
  z-index: 10;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

/* Seamless Top & Bottom Ingress/Egress Ambient Blends */
.feature-showcase-top-blend {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 8;
  pointer-events: none;
}

.feature-showcase-bottom-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 8;
  pointer-events: none;
}

/* Slides Track Container - Zero Layout Shift Stack */
.feature-showcase-slides {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Individual Slide (Stack Layer) - 700ms Cinematic Crossfade */
.feature-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: opacity, visibility;
}

.feature-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   KEYFRAMES: CINEMATIC ZOOM & STAGGERED REVEALS
   -------------------------------------------------------------------------- */

/* Slow 3-Second Camera Push-In */
@keyframes featureBgZoom {
  0% {
    transform: scale(1.00);
  }
  100% {
    transform: scale(1.05);
  }
}

/* SHE IS Woman Image Entrance */
@keyframes sheIsWomanEnter {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1.00);
  }
}

/* SHE IS Staggered Typography */
@keyframes sheIsTextStagger {
  0% {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* SHE IS Register CTA Button Entrance */
@keyframes sheIsBtnStagger {
  0% {
    opacity: 0;
    transform: translateY(12px);
    box-shadow: 0 0 0 rgba(223, 179, 90, 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 14px rgba(214, 176, 107, 0.2);
  }
}

/* RE | IMAGINE Staggered Typography */
@keyframes reimagineTextStagger {
  0% {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* RE | IMAGINE Register CTA Button Entrance */
@keyframes reimagineBtnStagger {
  0% {
    opacity: 0;
    transform: translateY(10px);
    box-shadow: 0 0 0 rgba(40, 160, 255, 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 0 22px rgba(40, 160, 255, 0.35), 0 4px 20px rgba(0, 0, 0, 0.8);
  }
}

/* --------------------------------------------------------------------------
   SLIDE 1: SHE IS... STYLING & ANIMATIONS
   -------------------------------------------------------------------------- */

/* Master Background Container */
.sheis-realm-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.sheis-realm-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.95);
  transform-origin: center center;
  will-change: transform;
}

.feature-slide.is-active .sheis-realm-bg-img {
  animation: featureBgZoom 3.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.feature-slide:not(.is-active) .sheis-realm-bg-img {
  transform: scale(1.00);
  animation: none;
}

.sheis-realm-bg-scrim-right {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.05) 35%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0.65) 75%,
    rgba(0, 0, 0, 0.85) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.sheis-realm-bg-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.55);
  z-index: 2;
  pointer-events: none;
}

/* Main Unified Composition Stage */
.sheis-realm-stage {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1480px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 5rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 4.5rem);
  box-sizing: border-box;
}

/* Left Column: Woman in Flowing Gold Gown */
.sheis-realm-woman-col {
  width: clamp(320px, 42vw, 580px);
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  position: relative;
  pointer-events: none;
  flex-shrink: 0;
  will-change: transform, opacity;
}

.feature-slide.is-active .sheis-realm-woman-col {
  animation: sheIsWomanEnter 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

.feature-slide:not(.is-active) .sheis-realm-woman-col {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  animation: none;
}

.sheis-realm-woman-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.sheis-realm-woman-img {
  width: 100%;
  height: auto;
  max-height: clamp(520px, 72vh, 760px);
  object-fit: contain;
  object-position: bottom left;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.85));
  display: block;
}

.sheis-realm-woman-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  pointer-events: none;
}

/* Right Column: Editorial Luxury Typography */
.sheis-realm-content-col {
  flex: 1;
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.5rem 0;
  z-index: 5;
}

.sheis-realm-content-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

/* 1. Main Headline: SHE IS... */
.sheis-realm-headline-wrap {
  margin-bottom: 0.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  will-change: transform, opacity;
}

.feature-slide.is-active .sheis-realm-headline-wrap {
  animation: sheIsTextStagger 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.feature-slide:not(.is-active) .sheis-realm-headline-wrap {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

.sheis-realm-headline {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  line-height: 0.95;
}

.sheis-realm-she {
  font-size: clamp(4.2rem, 7.5vw, 8.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fdfbf7;
  background: linear-gradient(180deg, #ffffff 0%, #faeecf 40%, #dfb35a 75%, #a87928 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 30px rgba(223, 179, 90, 0.45);
  text-transform: uppercase;
}

.sheis-realm-is {
  font-family: 'Great Vibes', 'Cormorant Garamond', cursive, serif;
  font-style: italic;
  font-size: clamp(3.8rem, 6.8vw, 7.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #eeddbb;
  background: linear-gradient(180deg, #fff2db 0%, #dfb35a 60%, #a87928 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 25px rgba(223, 179, 90, 0.4);
  margin-left: 0.25em;
}

/* 2. Secondary Line: IDENTITY ◆ PURPOSE ◆ INFLUENCE */
.sheis-realm-pillars-wrap {
  margin-bottom: 1.25rem;
  width: 100%;
  display: flex;
  justify-content: center;
  will-change: transform, opacity;
}

.feature-slide.is-active .sheis-realm-pillars-wrap {
  animation: sheIsTextStagger 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.feature-slide:not(.is-active) .sheis-realm-pillars-wrap {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

.sheis-realm-pillars-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1vw, 1.2rem);
  flex-wrap: wrap;
}

.sheis-realm-pillar-item {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.72rem, 1.05vw, 0.96rem);
  font-weight: 600;
  letter-spacing: 0.35em;
  color: #f0e6d2;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.sheis-realm-pillar-diamond {
  color: #dfb35a;
  font-size: 0.7em;
  margin: 0 0.3em;
  filter: drop-shadow(0 0 6px rgba(223, 179, 90, 0.6));
}

/* 3. Decorative Gold Divider */
.sheis-realm-divider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  margin: 0.25rem auto 1.5rem;
  will-change: transform, opacity;
}

.feature-slide.is-active .sheis-realm-divider-wrap {
  animation: sheIsTextStagger 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.feature-slide:not(.is-active) .sheis-realm-divider-wrap {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

.sheis-realm-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(223, 179, 90, 0.75) 50%, transparent 100%);
}

.sheis-realm-divider-motif {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dfb35a;
  filter: drop-shadow(0 0 8px rgba(223, 179, 90, 0.6));
}

/* 4. Bottom Statement */
.sheis-realm-statement-wrap {
  width: 100%;
  text-align: center;
  will-change: transform, opacity;
}

.feature-slide.is-active .sheis-realm-statement-wrap {
  animation: sheIsTextStagger 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.feature-slide:not(.is-active) .sheis-realm-statement-wrap {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

.sheis-realm-statement-text {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.88rem, 1.25vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: #ede2cc;
  line-height: 1.65;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.sheis-realm-statement-line {
  display: block;
}

/* 5. REGISTER CTA Button */
.sheis-realm-cta-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  will-change: transform, opacity;
}

.feature-slide.is-active .sheis-realm-cta-wrap {
  animation: sheIsBtnStagger 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
}

.feature-slide:not(.is-active) .sheis-realm-cta-wrap {
  opacity: 0;
  transform: translateY(12px);
  animation: none;
}

.sheis-realm-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(12, 8, 4, 0.65);
  border: 1px solid rgba(214, 176, 107, 0.55);
  border-radius: 2px;
  padding: 0.85rem 2.6rem;
  color: #fff8ee;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 12px rgba(214, 176, 107, 0.12);
  transition: all 0.35s ease;
  cursor: pointer;
  outline: none;
}

.sheis-realm-cta-label {
  display: inline-block;
  color: inherit;
  transition: color 0.35s ease;
}

.sheis-realm-cta-arrow {
  display: inline-block;
  color: #dfb35a;
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.35s ease, color 0.35s ease;
}

.sheis-realm-cta-btn:hover,
.sheis-realm-cta-btn:focus-visible {
  background: rgba(24, 16, 7, 0.88);
  border-color: rgba(245, 215, 145, 0.95);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.85), 0 0 24px rgba(223, 179, 90, 0.35);
}

.sheis-realm-cta-btn:hover .sheis-realm-cta-arrow,
.sheis-realm-cta-btn:focus-visible .sheis-realm-cta-arrow {
  color: #fff1c2;
  transform: translateX(4px);
}

.sheis-realm-cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 10px rgba(223, 179, 90, 0.2);
}

/* --------------------------------------------------------------------------
   SLIDE 2: RE | IMAGINE STYLING & ANIMATIONS
   -------------------------------------------------------------------------- */

/* Master Background Container */
.reimagine-realm-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.reimagine-realm-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  transform-origin: center bottom;
  will-change: transform;
}

.feature-slide.is-active .reimagine-realm-bg-img {
  animation: featureBgZoom 3.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.feature-slide:not(.is-active) .reimagine-realm-bg-img {
  transform: scale(1.00);
  animation: none;
}

/* Subtle localized ambient gradient behind central typography */
.reimagine-realm-bg-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 55% at 50% 36%,
    rgba(3, 8, 16, 0.58) 0%,
    rgba(3, 8, 16, 0.28) 55%,
    rgba(3, 8, 16, 0) 100%
  );
  z-index: 2;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Main Stage Container */
.reimagine-realm-stage {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  text-align: center;
}

.reimagine-realm-content {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: clamp(0.5rem, 2.2vh, 2.2rem);
}

/* 1. Eyebrow: THE REALM CHURCH ATL PRESENTS */
.reimagine-realm-eyebrow-wrap {
  margin-bottom: 0.85rem;
  will-change: transform, opacity;
}

.feature-slide.is-active .reimagine-realm-eyebrow-wrap {
  animation: reimagineTextStagger 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.feature-slide:not(.is-active) .reimagine-realm-eyebrow-wrap {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

.reimagine-realm-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.66rem, 0.8vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.36em;
  color: #ede5d5;
  text-transform: uppercase;
  display: inline-block;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

/* 2. Dominant Title: RE | IMAGINE */
.reimagine-realm-title-wrap {
  margin: 0.5rem 0 1.25rem;
  width: 100%;
  will-change: transform, opacity;
}

.feature-slide.is-active .reimagine-realm-title-wrap {
  animation: reimagineTextStagger 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

.feature-slide:not(.is-active) .reimagine-realm-title-wrap {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

.reimagine-realm-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3.2vw, 3.8rem);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(3.2rem, 7vw, 6.4rem);
  font-weight: 300;
  letter-spacing: clamp(0.24em, 0.42vw, 0.42em);
  color: #ffffff;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.95), 0 0 40px rgba(80, 185, 255, 0.25);
}

.reimagine-realm-title-word {
  display: inline-block;
}

.reimagine-realm-title-divider {
  display: inline-block;
  width: 2px;
  height: clamp(55px, 7.8vw, 105px);
  background: linear-gradient(
    180deg,
    rgba(80, 200, 255, 0) 0%,
    rgba(120, 220, 255, 0.95) 20%,
    #ffffff 50%,
    rgba(120, 220, 255, 0.95) 80%,
    rgba(80, 200, 255, 0) 100%
  );
  box-shadow: 0 0 14px rgba(80, 200, 255, 0.95), 0 0 28px rgba(40, 150, 255, 0.65);
  margin: 0 clamp(0.2rem, 0.8vw, 1rem);
  flex-shrink: 0;
}

/* 3. Theme Line: PERSPECTIVE • PURPOSE • POSSIBILITY */
.reimagine-realm-theme-wrap {
  margin-bottom: 1.5rem;
  width: 100%;
  will-change: transform, opacity;
}

.feature-slide.is-active .reimagine-realm-theme-wrap {
  animation: reimagineTextStagger 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

.feature-slide:not(.is-active) .reimagine-realm-theme-wrap {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

.reimagine-realm-theme-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 2.2rem);
  flex-wrap: wrap;
}

.reimagine-realm-theme-item {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.68rem, 0.85vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: #ebe2d2;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.reimagine-realm-theme-dot {
  color: #dfb35a;
  font-size: 1.1em;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(223, 179, 90, 0.7));
}

/* 4. Main Statement: WHAT IF THIS IS / THE TURNING POINT? */
.reimagine-realm-statement-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 1.15rem;
  width: 100%;
  will-change: transform, opacity;
}

.feature-slide.is-active .reimagine-realm-statement-wrap {
  animation: reimagineTextStagger 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.feature-slide:not(.is-active) .reimagine-realm-statement-wrap {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

.reimagine-realm-statement-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.2vw, 1.2rem);
}

.reimagine-realm-statement-rule {
  display: inline-block;
  width: clamp(20px, 3.5vw, 50px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237, 226, 204, 0.7), transparent);
}

.reimagine-realm-statement-sub-text {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.85rem, 1.15vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: #f7f1e6;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.reimagine-realm-statement-main {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.35rem, 2.3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #dfb35a;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95), 0 0 25px rgba(223, 179, 90, 0.3);
}

/* 5. Supporting Copy */
.reimagine-realm-copy-wrap {
  margin-bottom: 1.75rem;
  width: 100%;
  max-width: 680px;
  will-change: transform, opacity;
}

.feature-slide.is-active .reimagine-realm-copy-wrap {
  animation: reimagineTextStagger 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
}

.feature-slide:not(.is-active) .reimagine-realm-copy-wrap {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

.reimagine-realm-copy-text {
  font-family: 'Inter', 'Montserrat', -apple-system, sans-serif;
  font-size: clamp(0.82rem, 0.95vw, 1.02rem);
  font-weight: 400;
  line-height: 1.7;
  color: #d6d0c4;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.reimagine-realm-br-desktop {
  display: block;
}

/* 6. REGISTER CTA Button */
.reimagine-realm-cta-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform, opacity;
}

.feature-slide.is-active .reimagine-realm-cta-wrap {
  animation: reimagineBtnStagger 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
}

.feature-slide:not(.is-active) .reimagine-realm-cta-wrap {
  opacity: 0;
  transform: translateY(10px);
  animation: none;
}

.reimagine-realm-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(8, 20, 36, 0.75);
  border: 1px solid rgba(80, 190, 255, 0.75);
  border-radius: 9999px;
  padding: 0.82rem 2.8rem;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.74rem, 0.84vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 22px rgba(40, 160, 255, 0.35), 0 4px 20px rgba(0, 0, 0, 0.8);
  transition: all 0.35s ease;
  cursor: pointer;
  outline: none;
}

.reimagine-realm-cta-label {
  display: inline-block;
  color: inherit;
  transition: color 0.35s ease;
}

.reimagine-realm-cta-arrow {
  display: inline-block;
  color: #70ccff;
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.35s ease, color 0.35s ease;
}

.reimagine-realm-cta-btn:hover,
.reimagine-realm-cta-btn:focus-visible {
  background: rgba(14, 32, 58, 0.9);
  border-color: rgba(130, 220, 255, 0.95);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(60, 185, 255, 0.6), 0 6px 26px rgba(0, 0, 0, 0.9);
}

.reimagine-realm-cta-btn:hover .reimagine-realm-cta-arrow,
.reimagine-realm-cta-btn:focus-visible .reimagine-realm-cta-arrow {
  color: #ffffff;
  transform: translateX(4px);
}

.reimagine-realm-cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 15px rgba(40, 160, 255, 0.4), 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
   MINIMAL PAGINATION DOTS (BOTTOM CENTER)
   -------------------------------------------------------------------------- */

.feature-carousel-dots {
  position: absolute;
  bottom: clamp(1.2rem, 3vh, 2rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(5, 9, 15, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.feature-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.feature-dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.2);
}

.feature-dot.is-active {
  width: 28px;
  border-radius: 9999px;
  background: #dfb35a;
  box-shadow: 0 0 12px rgba(223, 179, 90, 0.7);
}

.feature-showcase-section[data-active-slide="1"] .feature-dot.is-active {
  background: #50c4ff;
  box-shadow: 0 0 14px rgba(80, 196, 255, 0.85);
}

/* --------------------------------------------------------------------------
   RESPONSIVE MEDIA QUERIES FOR COMBINED SLIDESHOW
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .feature-showcase-section {
    min-height: auto;
    max-height: none;
    height: auto;
  }

  .feature-slide {
    position: relative;
    min-height: 740px;
    height: auto;
    padding: 4.5rem 1.5rem 5.5rem;
    box-sizing: border-box;
  }

  .feature-slide:not(.is-active) {
    position: absolute;
    inset: 0;
  }

  /* SHE IS - Tablet */
  .sheis-realm-stage {
    flex-direction: column-reverse;
    align-items: center;
    gap: 2.5rem;
    padding: 0;
  }

  .sheis-realm-woman-col {
    width: 100%;
    max-width: 440px;
    justify-content: center;
  }

  .sheis-realm-woman-img {
    max-height: 480px;
    object-position: center;
    margin: 0 auto;
  }

  .sheis-realm-content-col {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .sheis-realm-cta-wrap {
    margin-top: 1.75rem;
  }

  /* RE | IMAGINE - Tablet */
  .reimagine-realm-stage {
    padding: 0;
  }

  .reimagine-realm-content {
    margin-top: 0;
  }

  .reimagine-realm-title {
    font-size: clamp(2.6rem, 6.5vw, 4.8rem);
    gap: clamp(0.75rem, 2.5vw, 2.5rem);
  }

  .reimagine-realm-title-divider {
    height: clamp(45px, 6.5vw, 75px);
  }
}

@media (max-width: 640px) {
  .feature-slide {
    min-height: 680px;
    padding: 3.5rem 1rem 4.5rem;
  }

  /* SHE IS - Mobile */
  .sheis-realm-she {
    font-size: clamp(3.2rem, 14vw, 4.6rem);
  }

  .sheis-realm-is {
    font-size: clamp(2.8rem, 12vw, 3.8rem);
  }

  .sheis-realm-pillar-item {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
  }

  .sheis-realm-statement-text {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
  }

  .sheis-realm-cta-wrap {
    margin-top: 1.5rem;
  }

  .sheis-realm-cta-btn {
    padding: 0.8rem 2.2rem;
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    min-height: 46px;
  }

  /* RE | IMAGINE - Mobile */
  .reimagine-realm-eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
  }

  .reimagine-realm-title {
    font-size: clamp(1.85rem, 8.5vw, 2.8rem);
    letter-spacing: 0.16em;
    gap: 0.6rem;
  }

  .reimagine-realm-title-divider {
    height: 38px;
    margin: 0 0.15rem;
  }

  .reimagine-realm-theme-row {
    gap: 0.4rem 0.75rem;
  }

  .reimagine-realm-theme-item {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
  }

  .reimagine-realm-statement-sub-text {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
  }

  .reimagine-realm-statement-main {
    font-size: 1.22rem;
    letter-spacing: 0.1em;
  }

  .reimagine-realm-copy-text {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .reimagine-realm-br-desktop {
    display: inline;
  }

  .reimagine-realm-cta-btn {
    padding: 0.78rem 2.2rem;
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    min-height: 46px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .feature-slide,
  .feature-slide .sheis-realm-bg-img,
  .feature-slide .reimagine-realm-bg-img,
  .feature-slide .sheis-realm-woman-col,
  .feature-slide .sheis-realm-headline-wrap,
  .feature-slide .sheis-realm-pillars-wrap,
  .feature-slide .sheis-realm-divider-wrap,
  .feature-slide .sheis-realm-statement-wrap,
  .feature-slide .sheis-realm-cta-wrap,
  .feature-slide .reimagine-realm-eyebrow-wrap,
  .feature-slide .reimagine-realm-title-wrap,
  .feature-slide .reimagine-realm-theme-wrap,
  .feature-slide .reimagine-realm-statement-wrap,
  .feature-slide .reimagine-realm-copy-wrap,
  .feature-slide .reimagine-realm-cta-wrap,
  .feature-dot {
    animation: none !important;
    transition: opacity 0.5s ease !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .feature-slide:not(.is-active) {
    opacity: 0 !important;
  }
}











/* ========================================================================== 
   THE SOUND — MUZIKI REFERENCE IMPLEMENTATION
   All overrides are deliberately scoped beneath #sound.
   ========================================================================== */
#sound.sound-section {
  position: relative;
  width: 100%;
  height: clamp(780px, 92vh, 900px);
  min-height: 780px;
  max-height: 920px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #0d0806;
}

#sound .sound-top-blend { display: none; }

#sound .sound-bg-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

#sound .sound-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%; /* Keeps the woman's entire head and hairstyle fully visible */
  opacity: 1;
  transform: none;
  filter: brightness(0.96) contrast(1.02); /* Preserves warm cinematic atmosphere without murky dimming */
}

#sound .sound-bg-left-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 5, 3, 0.78) 0%, rgba(8, 5, 3, 0.52) 26%, rgba(8, 5, 3, 0.18) 48%, transparent 68%),
    linear-gradient(180deg, rgba(6, 4, 3, 0.32) 0%, transparent 35%, rgba(6, 4, 3, 0.18) 70%, rgba(6, 4, 3, 0.52) 100%);
  pointer-events: none;
}

#sound .sound-stage-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

#sound .sound-main-content-row {
  position: absolute;
  inset: 0 0 170px;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
}

#sound .sound-left-col {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
}

#sound .sound-header-block {
  position: absolute;
  top: clamp(56px, 8vh, 80px);
  left: clamp(52px, 5.8vw, 96px);
  width: min(620px, 42vw);
  z-index: 3;
}

#sound .sound-eyebrow-row {
  margin: 0 0 16px;
  padding: 0;
  display: block;
  opacity: 1;
}

#sound .sound-eyebrow-text {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.55em;
  color: rgba(255, 255, 255, 0.88);
  text-transform: uppercase;
  filter: none !important;
}

#sound .sound-main-title {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

#sound .sound-motion-layer {
  display: block;
  width: 100%;
  will-change: transform, opacity;
}

#sound .sound-title-presence-layer {
  overflow: visible;
}

#sound .sound-main-title .title-line-1 {
  font-family: 'Barlow Condensed', 'Oswald', sans-serif;
  font-size: clamp(52px, 4.3vw, 70px);
  font-weight: 200;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: #ffffff;
  white-space: nowrap;
  text-transform: uppercase;
  filter: none !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#sound .sound-main-title .title-line-2 {
  display: block;
  height: clamp(96px, 8.6vw, 140px);
  margin: -4px 0 0 -10px;
  line-height: 1;
}

#sound .sound-main-title .title-script-presence {
  display: inline-block;
  font-family: 'Alex Brush', 'Great Vibes', cursive;
  font-size: clamp(94px, 8.5vw, 138px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.015em;
  color: #dfb35a;
  background: linear-gradient(135deg, #f7dfbe 0%, #dfb35a 50%, #c48b48 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none !important;
  text-shadow: none;
  transform: rotate(-1.5deg);
  transform-origin: left center;
  -webkit-font-smoothing: antialiased;
}

#sound .sound-copy-block {
  position: relative;
  margin: 8px 0 0 6px;
  padding: 0 0 0 18px;
  border-left: 1.5px solid rgba(223, 179, 90, 0.75);
  max-width: 480px;
  filter: none !important;
}

#sound .sound-copy-line {
  margin: 0 0 2px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.48;
  letter-spacing: 0.015em;
  color: rgba(255, 255, 255, 0.92);
  filter: none !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  -webkit-font-smoothing: antialiased;
}

#sound .sound-copy-highlight {
  color: #eed8a1;
  font-weight: 500;
}

/* 3. Transparent Music Player: translucent glass revealing background photo */
#sound .sound-player-glass-card {
  position: absolute;
  left: clamp(48px, 5.5vw, 92px);
  bottom: 24px;
  z-index: 5;
  width: clamp(520px, 35vw, 590px);
  min-height: 194px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(219, 174, 115, 0.32);
  border-radius: 8px;
  background: rgba(10, 6, 5, 0.48); /* Translucent dark glass (48%) revealing background photo */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 235, 205, 0.12);
  box-sizing: border-box;
}

#sound .player-card-body {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

#sound .player-art-box {
  flex: 0 0 105px;
  width: 105px;
  height: 105px;
  border-radius: 4px;
  border: 1px solid rgba(219, 174, 115, 0.5);
  box-shadow: none;
}

#sound .player-right-area {
  position: relative;
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  grid-template-rows: auto 35px 48px;
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
}

#sound .player-meta-box { grid-area: 1 / 1 / 2 / 3; }
#sound .player-track-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.035em;
  color: #fff;
}
#sound .player-artist-name {
  margin-top: 2px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #f1e5d6;
}

#sound .player-favorite-btn {
  position: absolute;
  top: 1px;
  right: 0;
  width: 27px;
  height: 27px;
  padding: 3px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}
#sound .player-favorite-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; }

#sound .player-waveform-wrap {
  grid-area: 2 / 1 / 3 / 3;
  height: 30px;
  gap: 1px;
}
#sound .waveform-bar { max-width: 2px; background: rgba(194, 198, 198, 0.35); }
#sound .waveform-bar.bar-played { background: #d6a264; box-shadow: none; }

#sound .player-controls-row {
  grid-area: 3 / 1 / 4 / 2;
  gap: 13px;
  margin: 0;
}
#sound .player-btn { color: #f7f5f0; }
#sound .player-btn svg { fill: currentColor; }
#sound .btn-play-pause {
  width: 49px;
  height: 49px;
  color: #170e08;
  background: #e8bd82;
  border: 0;
  box-shadow: none;
}
#sound .btn-prev .btn-svg, #sound .btn-next .btn-svg { width: 19px; height: 19px; }
#sound .btn-shuffle .btn-svg { width: 18px; height: 18px; }

#sound .player-timeline-unit {
  grid-area: 3 / 2 / 4 / 3;
  gap: 8px;
}
#sound .player-progress-bg { background: rgba(255, 255, 255, 0.22); }
#sound .player-progress-fill { background: #e1b778; box-shadow: none; }
#sound .player-progress-handle { width: 10px; height: 10px; background: #e5bd84; box-shadow: none; }
#sound .player-volume-box { display: none; }

/* Right Column: Spotify & Discography Buttons */
#sound .sound-right-col {
  position: absolute;
  top: clamp(80px, 12vh, 120px);
  right: clamp(48px, 5.5vw, 92px);
  width: clamp(280px, 19vw, 330px);
  margin: 0;
  padding: 0;
  z-index: 5;
}

#sound .sound-pills-col { gap: 14px; }
#sound .sound-pill-btn {
  min-height: 64px;
  padding: 0 26px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
}
#sound .sound-pill-btn.pill-spotify {
  color: #fff;
  background: linear-gradient(180deg, rgba(165, 25, 28, 0.95), rgba(108, 6, 15, 0.95));
  border: 1px solid rgba(255, 210, 185, 0.7);
  box-shadow: 0 8px 24px rgba(42, 0, 0, 0.35), inset 0 1px rgba(255, 255, 255, 0.15);
}
#sound .sound-pill-btn.pill-spotify .pill-icon-svg { width: 25px; height: 25px; fill: #fff; }
#sound .sound-pill-btn.pill-spotify .pill-arrow { color: #fff; font-size: 24px; font-weight: 300; }
#sound .sound-pill-btn.pill-discography {
  color: #fff;
  background: rgba(10, 6, 5, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
  text-align: left;
}
#sound .sound-pill-btn .pill-arrow { font-size: 24px; font-weight: 300; }

/* 4. Featured Tracks Transparent Strip: reveals background photo beneath */
#sound .sound-featured-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  width: 100%;
  max-width: none;
  height: 170px;
  margin: 0;
  padding: 16px clamp(32px, 4.5vw, 64px) 14px;
  gap: 12px;
  border: 0;
  border-top: 1px solid rgba(219, 174, 115, 0.28);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(14, 8, 6, 0.42), rgba(10, 6, 4, 0.48)); /* Translucent dark overlay (~42-48%) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
}

#sound .featured-heading-box { min-height: 25px; }
#sound .featured-heading-left { flex: 1; gap: 20px; }
#sound .featured-heading-left::after {
  content: '';
  flex: 1;
  height: 1px;
  margin-right: 28px;
  background: linear-gradient(90deg, rgba(222, 181, 119, 0.8), rgba(222, 181, 119, 0.15));
}
#sound .featured-tag-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.55em;
  color: #fff;
  white-space: nowrap;
}
#sound .featured-all-tracks-btn {
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.32em;
  white-space: nowrap;
}
#sound .featured-nav-arrows { display: none !important; }

#sound .featured-items-track { gap: 0; padding: 0; }
#sound .featured-song-card {
  position: relative;
  flex: 0 0 25%;
  min-width: 270px;
  height: 87px;
  padding: 0 24px 0 14px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14); /* Elegant thin divider */
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#sound .featured-song-card:last-child {
  border-right: none;
}
#sound .featured-song-card:hover,
#sound .featured-song-card.is-active {
  transform: none;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}
#sound .featured-song-thumb-box {
  width: 88px;
  height: 85px;
  border-radius: 3px;
  border: 1px solid rgba(220, 179, 119, 0.4);
}
#sound .featured-song-meta-box { min-width: 0; padding: 0; gap: 12px; }
#sound .featured-song-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
#sound .featured-song-artist,
#sound .featured-song-duration {
  display: block;
  margin-top: 2px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.78);
}
#sound .featured-song-duration { margin-top: 6px; font-size: 13px; }
#sound .featured-song-card-play-btn {
  width: 42px;
  height: 42px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.72);
}
#sound .featured-song-card:hover .featured-song-card-play-btn,
#sound .featured-song-card.is-active .featured-song-card-play-btn {
  color: #170e08;
  background: #e0b77d;
  border-color: #e0b77d;
  box-shadow: none;
}

#sound.sound-in-view .sound-eyebrow-row,
#sound.sound-in-view .sound-main-title .title-line-1,
#sound.sound-in-view .sound-main-title .title-line-2,
#sound.sound-in-view .sound-copy-block,
#sound.sound-in-view .sound-right-col,
#sound.sound-in-view .sound-player-glass-card,
#sound.sound-in-view .sound-featured-bar {
  opacity: 1;
  transform: none;
}

#sound.sound-motion-ready.sound-in-view .sound-eyebrow-row,
#sound.sound-motion-ready.sound-in-view .sound-main-title .title-line-1,
#sound.sound-motion-ready.sound-in-view .sound-main-title .title-line-2,
#sound.sound-motion-ready.sound-in-view .sound-copy-block,
#sound.sound-motion-ready.sound-in-view .sound-right-col,
#sound.sound-motion-ready.sound-in-view .sound-player-glass-card,
#sound.sound-motion-ready.sound-in-view .sound-featured-bar {
  animation: none !important;
  transition: none;
}

#sound.sound-in-view .sound-featured-bar,
#sound.sound-in-view .sound-featured-bar * {
  visibility: visible;
}

@media (max-width: 1100px) {
  #sound.sound-section { height: auto; min-height: 1050px; max-height: none; }
  #sound .sound-bg-img { object-position: 52% 16%; }
  #sound .sound-main-content-row { inset: 0 0 190px; }
  #sound .sound-header-block { width: 54vw; left: 42px; }
  #sound .sound-main-title .title-line-1 { font-size: clamp(46px, 6vw, 62px); }
  #sound .sound-main-title .title-script-presence { font-size: clamp(88px, 12vw, 125px); }
  #sound .sound-right-col { top: 480px; right: 35px; width: 300px; }
  #sound .sound-player-glass-card { left: 38px; bottom: 35px; width: 560px; }
  #sound .sound-featured-bar { height: 190px; padding-inline: 28px; }
  #sound .featured-song-card { flex-basis: 33.333%; }
}

@media (max-width: 780px) {
  #sound.sound-section { min-height: 1380px; }
  #sound .sound-bg-img { object-position: 50% 12%; }
  #sound .sound-bg-left-scrim {
    background: linear-gradient(180deg, rgba(5,3,2,0.85) 0%, rgba(6,3,2,0.52) 30%, rgba(5,3,2,0.25) 50%, rgba(5,3,2,0.88) 82%, #080403 100%);
  }
  #sound .sound-main-content-row { inset: 0 0 260px; }
  #sound .sound-header-block {
    top: 55px;
    left: 24px;
    right: 24px;
    width: auto;
  }
  #sound .sound-main-title .title-line-1 { font-size: clamp(38px, 9.5vw, 58px); white-space: normal; }
  #sound .sound-main-title .title-line-2 { height: clamp(84px, 24vw, 120px); }
  #sound .sound-main-title .title-script-presence { font-size: clamp(78px, 22vw, 118px); }
  #sound .sound-copy-block { max-width: 480px; }
  #sound .sound-copy-line { font-size: 16px; }
  #sound .sound-right-col {
    top: 650px;
    left: 24px;
    right: 24px;
    width: auto;
    transform: none;
  }
  #sound .sound-pills-col { flex-direction: row; }
  #sound .sound-pill-btn { min-width: 0; padding-inline: 18px; letter-spacing: 0.2em; }
  #sound .sound-player-glass-card {
    left: 24px;
    right: 24px;
    bottom: 30px;
    width: auto;
  }
  #sound .sound-featured-bar { height: 260px; padding: 20px 20px 18px; }
  #sound .featured-song-card { flex-basis: 72%; min-width: 300px; }
}

@media (max-width: 520px) {
  #sound.sound-section { min-height: 1450px; }
  #sound .sound-bg-img { height: 790px; object-position: 45% 10%; }
  #sound .sound-header-block { top: 42px; left: 18px; right: 18px; }
  #sound .sound-eyebrow-text { font-size: 9px; }
  #sound .sound-main-title .title-line-1 { font-size: clamp(35px, 10.5vw, 48px); }
  #sound .sound-main-title .title-script-presence { font-size: clamp(72px, 23vw, 105px); }
  #sound .sound-copy-block { margin-left: 4px; padding-left: 15px; }
  #sound .sound-copy-line { font-size: 14px; }
  #sound .sound-right-col { top: 690px; left: 18px; right: 18px; }
  #sound .sound-pills-col { flex-direction: column; }
  #sound .sound-pill-btn { min-height: 58px; }
  #sound .sound-player-glass-card {
    left: 16px;
    right: 16px;
    bottom: 25px;
    min-height: 300px;
    padding: 14px;
  }
  #sound .player-card-body { gap: 13px; align-items: flex-start; }
  #sound .player-art-box { flex-basis: 86px; width: 86px; height: 86px; }
  #sound .player-right-area {
    grid-template-columns: 1fr;
    grid-template-rows: auto 35px auto auto;
  }
  #sound .player-meta-box { grid-area: 1 / 1; }
  #sound .player-waveform-wrap { grid-area: 2 / 1; }
  #sound .player-controls-row { grid-area: 3 / 1; }
  #sound .player-timeline-unit { grid-area: 4 / 1; }
  #sound .sound-featured-bar { height: 280px; }
  #sound .featured-heading-left::after { display: none; }
  #sound .featured-tag-text { font-size: 9px; letter-spacing: 0.34em; }
  #sound .featured-all-tracks-btn { font-size: 8px; letter-spacing: 0.2em; }
  #sound .featured-song-card { flex-basis: 88%; min-width: 280px; }
}

/* ========================================================================== 
   THE ARCHITECTS — APPROVED REFERENCE IMPLEMENTATION
   ========================================================================== */
#architects.architects-section {
  position: relative;
  width: 100%;
  height: clamp(760px, 92vh, 860px);
  min-height: 760px;
  max-height: 880px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #e9c58f;
  color: #17130f;
}

#architects .architects-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

#architects .architects-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transform: none;
  filter: none;
}

#architects .architects-bg-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,248,232,0.16), transparent 38%, rgba(116,65,13,0.05)),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 72%, rgba(39,21,8,0.18));
}

#architects .architects-title-block {
  position: absolute;
  top: clamp(64px, 10vh, 95px);
  left: clamp(45px, 3.35vw, 62px);
  z-index: 5;
  width: clamp(500px, 33vw, 610px);
  margin: 0;
  padding: 0;
  text-align: center;
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease 0.1s, transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s;
}

#architects .architects-title-topline {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

#architects .architects-title-topline span {
  width: 36%;
  height: 2px;
  background: linear-gradient(90deg, #9a5400, #d09224);
}

#architects .architects-main-title {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.85;
}

#architects .arch-the {
  position: relative;
  z-index: 1;
  padding: 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(46px, 3.2vw, 60px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: #17130f;
  background: rgba(242, 213, 170, 0.2);
  opacity: 1;
  transform: none;
}

#architects .arch-word {
  display: block;
  margin-top: 4px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(68px, 4.55vw, 84px);
  font-weight: 600;
  line-height: 0.84;
  letter-spacing: -0.035em;
  color: #a85c00;
  background: linear-gradient(100deg, #824100 0%, #c37a0c 42%, #8d4700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  clip-path: none;
  transform: none;
}

#architects .architects-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 17px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(16px, 1.15vw, 21px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.13em;
  color: #201a14;
  white-space: nowrap;
  text-transform: none;
  opacity: 1;
  transform: none;
}

#architects .arch-subtitle-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #9c5700, #d99a28);
}

#architects .architects-couple {
  position: absolute;
  left: 50%;
  bottom: 66px;
  z-index: 4;
  width: clamp(830px, 54vw, 995px);
  height: auto;
  transform: translateX(-50%);
  display: block;
  pointer-events: none;
}

#architects .architects-couple-img {
  width: 100%;
  height: auto;
  max-height: 710px;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  filter: drop-shadow(0 12px 18px rgba(73, 38, 5, 0.18));
  transition: opacity 1.15s ease 0.2s, transform 1.25s cubic-bezier(0.22,1,0.36,1) 0.2s;
}

#architects.architects-in-view .architects-title-block,
#architects.architects-in-view .architects-story {
  opacity: 1;
  transform: translateY(0);
}

#architects.architects-in-view .architects-couple-img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#architects .architects-story {
  position: absolute;
  bottom: 94px;
  z-index: 3;
  width: clamp(350px, 22.8vw, 420px);
  min-height: 392px;
  padding: 48px 32px 30px;
  box-sizing: border-box;
  border: 1px solid rgba(182,112,20,0.28);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255,250,239,0.93), rgba(250,231,201,0.87));
  box-shadow: 0 12px 30px rgba(83,47,12,0.13), inset 0 1px rgba(255,255,255,0.78);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease 0.35s, transform 0.95s cubic-bezier(0.22,1,0.36,1) 0.35s;
}

#architects .architects-story-left { left: clamp(42px, 3.35vw, 62px); }
#architects .architects-story-right { right: clamp(42px, 2.9vw, 54px); transition-delay: 0.5s; }

#architects .arch-lead-heading {
  margin: 0 0 9px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(35px, 2.25vw, 42px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #15120f;
}

#architects .arch-lead-desc {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(15px, 1.02vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #294343;
}

#architects .arch-card-rule {
  display: block;
  width: 67px;
  height: 2px;
  margin: 35px 0 14px;
  background: #bd7006;
}

#architects .arch-signature-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
}

#architects .architects-story-right .arch-signature-group { align-items: center; }

#architects .arch-sig-name,
#architects .architects-story-right .arch-sig-name {
  display: block;
  font-family: 'Alex Brush', 'Great Vibes', cursive;
  font-size: clamp(42px, 3.25vw, 59px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #b66b00;
  opacity: 1;
  transform: none;
}

#architects .arch-sig-title {
  padding-left: 64px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.43em;
  color: #294343;
}

#architects .architects-story-right .arch-sig-title { padding-left: 0; }

#architects .architects-about-cta,
#believe .believe-about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 40px;
  padding: 10px 18px;
  border: 1px solid currentColor;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease;
}

#architects .architects-about-cta { margin-top: 18px; color: #9c5b00; }
#architects .architects-about-cta:hover,
#architects .architects-about-cta:focus-visible { color:#fff; border-color:#a86608; background:#a86608; transform:translateY(-2px); outline:none; }
#believe .believe-about-cta { margin-top:24px; color:#d4af37; background:rgba(8,8,7,.22); }
#believe .believe-about-cta:hover,
#believe .believe-about-cta:focus-visible { color:#090806; border-color:#d4af37; background:#d4af37; transform:translateY(-2px); outline:none; }

#architects .architects-principles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 4.3vw, 80px);
  border-top: 1px solid #c47b13;
  background: rgba(14,14,13,0.91);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

#architects .architects-principles span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(16px, 1.25vw, 22px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.48em;
  color: #f5eee4;
}

#architects .architects-principles i {
  width: 1px;
  height: 28px;
  background: #d18a17;
}

@media (max-width: 1200px) {
  #architects.architects-section { height: 950px; max-height: none; }
  #architects .architects-title-block { top: 45px; left: 35px; width: 520px; }
  #architects .architects-couple { width: 790px; bottom: 66px; }
  #architects .architects-story { width: 340px; min-height: 360px; padding: 36px 25px 24px; }
  #architects .architects-story-left { left: 28px; }
  #architects .architects-story-right { right: 28px; }
  #architects .arch-lead-heading { font-size: 34px; }
  #architects .arch-lead-desc { font-size: 14px; }
}

@media (max-width: 900px) {
  #architects.architects-section {
    height: auto;
    min-height: 1510px;
    max-height: none;
    padding-bottom: 78px;
  }
  #architects .architects-bg { object-position: center top; }
  #architects .architects-bg-wash { background: linear-gradient(180deg, rgba(255,244,222,0.12), rgba(239,205,156,0.5) 47%, rgba(232,196,143,0.88) 100%); }
  #architects .architects-title-block {
    position: relative;
    top: auto;
    left: auto;
    width: min(620px, calc(100% - 36px));
    margin: 55px auto 0;
  }
  #architects .architects-couple {
    top: 250px;
    bottom: auto;
    width: min(820px, 106vw);
  }
  #architects .architects-story {
    position: absolute;
    width: calc(50% - 28px);
    min-height: 420px;
    bottom: 105px;
  }
  #architects .architects-story-left { left: 18px; }
  #architects .architects-story-right { right: 18px; }
  #architects .arch-sig-name,
  #architects .architects-story-right .arch-sig-name { font-size: 43px; }
  #architects .architects-principles { height: 78px; gap: 22px; }
  #architects .architects-principles span { font-size: 14px; letter-spacing: 0.3em; }
}

@media (max-width: 620px) {
  #architects.architects-section { min-height: 1360px; padding-bottom: 112px; }
  #architects .architects-title-block { margin-top: 45px; width: calc(100% - 28px); }
  #architects .architects-title-topline { top: 23px; }
  #architects .architects-title-topline span { width: 28%; }
  #architects .arch-the { font-size: 36px; }
  #architects .arch-word { font-size: clamp(50px, 15vw, 74px); }
  #architects .architects-subtitle { gap: 8px; font-size: 13px; letter-spacing: 0.05em; }
  #architects .architects-couple { top: 210px; width: 118vw; }
  #architects .architects-story {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: calc(100% - 32px);
    min-height: 0;
    margin: 0 auto;
    padding: 30px 26px 28px;
  }
  #architects .architects-story-left { margin-top: 410px; }
  #architects .architects-story-right { margin-top: 22px; }
  #architects .arch-lead-heading { font-size: 35px; }
  #architects .arch-lead-desc { font-size: 15px; }
  #architects .arch-card-rule { margin-top: 24px; }
  #architects .architects-principles {
    height: 90px;
    padding: 13px 10px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
  }
  #architects .architects-principles span { text-align: center; font-size: 12px; letter-spacing: 0.25em; }
  #architects .architects-principles i { display: none; }
}

/* ========================================================================== */
/* WHAT IF primary panel — proportion and spacing refinement only             */
/* Keeps the horizontal-story panel dimensions and scroll controller intact.  */
/* ========================================================================== */
@media (min-width: 1201px) {
  #what-if-primary .whatif-primary-stage-container {
    width: min(98%, 1680px);
    gap: clamp(0.4rem, 0.9vw, 1rem);
    padding-inline: clamp(0.75rem, 1.35vw, 1.5rem);
  }

  #what-if-primary .whatif-primary-visual-col {
    flex-basis: 47%;
    max-width: 47%;
    justify-content: flex-start;
  }

  #what-if-primary .whatif-primary-michael-wrap {
    width: 132%;
    max-width: 1000px;
    margin-left: -11%;
  }

  #what-if-primary .whatif-primary-michael-img {
    max-height: min(93vh, 930px);
  }

  #what-if-primary .whatif-primary-content-col {
    flex-basis: 53%;
    max-width: 860px;
    padding-bottom: clamp(8px, 1.2vh, 15px);
    position: relative;
    top: clamp(-34px, -3.2vh, -18px);
  }

  #what-if-primary .whatif-primary-main-title {
    font-size: clamp(6.1rem, 9.2vw, 10rem);
    margin-bottom: clamp(7px, 0.8vh, 10px);
  }

  #what-if-primary .whatif-primary-event-strip,
  #what-if-primary .whatif-primary-question-block,
  #what-if-primary .whatif-primary-hosts-row,
  #what-if-primary .whatif-primary-cta-row,
  #what-if-primary .whatif-primary-principles-row,
  #what-if-primary .whatif-primary-bottom-statement {
    max-width: 760px;
  }

  #what-if-primary .whatif-primary-event-strip {
    padding-block: clamp(0.5rem, 0.8vh, 0.68rem);
    margin-bottom: clamp(12px, 1.5vh, 17px);
  }

  #what-if-primary .whatif-primary-strip-text {
    font-size: clamp(0.82rem, 0.95vw, 1rem);
  }

  #what-if-primary .whatif-primary-question-block {
    margin-bottom: clamp(12px, 1.45vh, 17px);
  }

  #what-if-primary .whatif-primary-question-lead {
    font-size: clamp(1.08rem, 1.3vw, 1.38rem);
  }

  #what-if-primary .whatif-primary-question-script {
    font-size: clamp(3.5rem, 4.9vw, 5.35rem);
  }

  #what-if-primary .whatif-primary-hosts-row {
    margin-bottom: clamp(14px, 1.7vh, 19px);
  }

  #what-if-primary .whatif-primary-hosts-text {
    font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  }

  #what-if-primary .whatif-primary-cta-row {
    margin-bottom: clamp(18px, 2.15vh, 24px);
  }

  #what-if-primary .whatif-primary-cta-btn {
    min-height: clamp(62px, 7.2vh, 70px);
    padding: 1rem clamp(1.65rem, 2vw, 2.2rem);
  }

  #what-if-primary .whatif-primary-cta-text {
    font-size: clamp(0.9rem, 1vw, 1.02rem);
  }

  #what-if-primary .whatif-primary-principles-row {
    gap: clamp(1.25rem, 2.2vw, 2.3rem);
    margin-bottom: clamp(17px, 2vh, 23px);
  }

  #what-if-primary .whatif-primary-principle-icon {
    margin-bottom: clamp(0.5rem, 0.75vh, 0.7rem);
  }

  #what-if-primary .whatif-primary-principle-title {
    font-size: clamp(0.82rem, 0.92vw, 0.95rem);
    margin-bottom: 4px;
  }

  #what-if-primary .whatif-primary-principle-sub {
    font-size: clamp(0.62rem, 0.7vw, 0.73rem);
  }

  #what-if-primary .whatif-primary-statement-text {
    font-size: clamp(0.58rem, 0.65vw, 0.68rem);
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  #what-if-primary .whatif-primary-stage-container {
    width: 98%;
    gap: 1rem;
    padding-inline: 1rem;
  }

  #what-if-primary .whatif-primary-visual-col {
    flex-basis: 44%;
    max-width: 44%;
    padding-left: 0;
  }

  #what-if-primary .whatif-primary-michael-wrap {
    width: 124%;
    max-width: 820px;
    margin-left: -9%;
  }

  #what-if-primary .whatif-primary-michael-img {
    max-height: min(91vh, 820px);
  }

  #what-if-primary .whatif-primary-content-col {
    flex-basis: 56%;
    max-width: 56%;
    position: relative;
    top: clamp(-26px, -2.5vh, -14px);
  }

  #what-if-primary .whatif-primary-main-title {
    font-size: clamp(5.4rem, 9.5vw, 7.5rem);
  }

  #what-if-primary .whatif-primary-event-strip,
  #what-if-primary .whatif-primary-question-block,
  #what-if-primary .whatif-primary-hosts-row,
  #what-if-primary .whatif-primary-cta-row,
  #what-if-primary .whatif-primary-principles-row,
  #what-if-primary .whatif-primary-bottom-statement {
    max-width: 100%;
  }

  #what-if-primary .whatif-primary-cta-text {
    font-size: clamp(0.82rem, 1.1vw, 0.94rem);
  }

  #what-if-primary .whatif-primary-cta-btn {
    min-height: clamp(58px, 7vh, 66px);
  }

  #what-if-primary .whatif-primary-question-lead {
    font-size: clamp(0.94rem, 1.35vw, 1.14rem);
  }

  #what-if-primary .whatif-primary-question-script {
    font-size: clamp(3rem, 5.1vw, 4.25rem);
  }

  #what-if-primary .whatif-primary-principles-row {
    margin-bottom: clamp(17px, 2vh, 22px);
  }
}

@media (max-width: 900px) {
  #what-if-primary.whatif-primary-section {
    padding-top: clamp(38px, 5vh, 56px);
  }

  #what-if-primary .whatif-primary-stage-container {
    gap: 1.2rem;
  }

  #what-if-primary .whatif-primary-main-title {
    font-size: clamp(4.4rem, 15vw, 6.6rem);
    margin-bottom: 0;
  }

  #what-if-primary .whatif-primary-question-block {
    margin-bottom: 0.6rem;
  }

  #what-if-primary .whatif-primary-visual-col {
    max-width: min(430px, 82vw);
    margin-block: 0 0.65rem;
  }

  #what-if-primary .whatif-primary-michael-img {
    max-height: 620px;
  }

  #what-if-primary .whatif-primary-cta-btn {
    min-height: 56px;
  }

  #what-if-primary .whatif-primary-cta-text {
    font-size: clamp(0.76rem, 1.9vw, 0.9rem);
  }
}

@media (max-width: 560px) {
  #what-if-primary .whatif-primary-stage-container {
    padding-inline: 1rem;
  }

  #what-if-primary .whatif-primary-main-title {
    font-size: clamp(3.9rem, 20vw, 5.3rem);
  }

  #what-if-primary .whatif-primary-strip-text {
    font-size: clamp(0.58rem, 2.6vw, 0.72rem);
    letter-spacing: 0.18em;
    white-space: normal;
  }

  #what-if-primary .whatif-primary-question-lead {
    font-size: clamp(0.72rem, 3.2vw, 0.92rem);
    letter-spacing: 0.14em;
  }

  #what-if-primary .whatif-primary-question-script {
    font-size: clamp(2.55rem, 13vw, 3.6rem);
  }

  #what-if-primary .whatif-primary-hosts-row {
    gap: 8px;
  }

  #what-if-primary .whatif-primary-hosts-text {
    font-size: clamp(0.58rem, 2.6vw, 0.72rem);
    letter-spacing: 0.16em;
  }

  #what-if-primary .whatif-primary-cta-btn {
    min-height: 58px;
    padding-inline: 1rem;
  }

  #what-if-primary .whatif-primary-cta-text {
    flex-wrap: wrap;
    row-gap: 2px;
    font-size: clamp(0.68rem, 3vw, 0.82rem);
    letter-spacing: 0.15em;
  }
}

/* WHAT IF poster composition */
#what-if-primary .whatif-primary-content-col {
  justify-content: center;
}

#what-if-primary .whatif-primary-main-title {
  margin-bottom: clamp(12px, 1.6vh, 20px);
}

#what-if-primary .whatif-primary-event-strip {
  margin-bottom: clamp(18px, 2.3vh, 27px);
}

#what-if-primary .whatif-primary-question-block {
  align-items: center;
  margin-bottom: clamp(20px, 2.6vh, 30px);
}

#what-if-primary .whatif-primary-question-lead,
#what-if-primary .whatif-primary-question-script {
  text-align: center;
}

#what-if-primary .whatif-primary-script-wrap {
  text-align: center;
}

#what-if-primary .whatif-primary-script-underline {
  right: 10%;
  left: auto;
  width: 48%;
  max-width: 360px;
}

#what-if-primary .whatif-primary-hosts-row {
  margin-bottom: clamp(22px, 2.8vh, 32px);
}

#what-if-primary .whatif-primary-host-line {
  max-width: 125px;
}

#what-if-primary .whatif-primary-cta-row {
  margin-bottom: clamp(24px, 3vh, 34px);
}

#what-if-primary .whatif-primary-cta-btn {
  position: relative;
  justify-content: flex-start;
  gap: clamp(16px, 1.8vw, 28px);
  min-height: 0;
  padding: clamp(8px, 1vh, 12px) clamp(6px, 0.7vw, 10px) clamp(15px, 1.8vh, 21px);
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}

#what-if-primary .whatif-primary-cta-text {
  position: relative;
  display: inline-block;
  flex: 0 1 auto;
  font-family: 'Bebas Neue', 'Oswald', 'Montserrat', sans-serif;
  font-size: clamp(2.7rem, 3.75vw, 4.15rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.015em;
  color: #b3131c;
  white-space: nowrap;
}

#what-if-primary .whatif-primary-cta-text::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -11px;
  left: 24%;
  height: 4px;
  border-radius: 999px;
  background: #b3131c;
  transform: scaleX(0.92) rotate(-0.5deg);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#what-if-primary .whatif-primary-cta-arrow {
  flex: 0 0 auto;
  color: #b3131c;
}

#what-if-primary .whatif-primary-cta-btn:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#what-if-primary .whatif-primary-cta-btn:hover .whatif-primary-cta-text::after {
  transform: scaleX(1) rotate(-0.5deg);
}

#what-if-primary .whatif-primary-cta-btn:focus-visible {
  outline: 3px solid rgba(179, 19, 28, 0.55);
  outline-offset: 6px;
}

#what-if-primary .whatif-primary-bottom-statement {
  max-width: 760px;
}

#what-if-primary .whatif-primary-statement-text {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45em 0.8em;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  color: #252525;
}

#what-if-primary .whatif-primary-statement-kingdom {
  color: #b3131c;
}

@media (min-width: 901px) {
  #what-if-primary .whatif-primary-content-col {
    top: clamp(-42px, -4.2vh, -24px);
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  #what-if-primary .whatif-primary-cta-text {
    font-size: clamp(2.2rem, 3.6vw, 3rem);
  }

  #what-if-primary .whatif-primary-cta-arrow svg {
    width: 56px;
  }
}

@media (max-width: 900px) {
  #what-if-primary .whatif-primary-content-col {
    justify-content: initial;
  }

  #what-if-primary .whatif-primary-main-title {
    margin-bottom: 0;
  }

  #what-if-primary .whatif-primary-event-strip,
  #what-if-primary .whatif-primary-question-block,
  #what-if-primary .whatif-primary-hosts-row,
  #what-if-primary .whatif-primary-cta-row {
    margin-bottom: clamp(18px, 3.8vw, 26px);
  }

  #what-if-primary .whatif-primary-script-underline {
    right: 12%;
  }

  #what-if-primary .whatif-primary-cta-row {
    max-width: min(660px, 100%);
  }

  #what-if-primary .whatif-primary-cta-btn {
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }

  #what-if-primary .whatif-primary-cta-text {
    font-size: clamp(2rem, 7.2vw, 3.2rem);
    white-space: nowrap;
  }

  #what-if-primary .whatif-primary-bottom-statement {
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  #what-if-primary .whatif-primary-cta-btn {
    gap: 9px;
    padding-inline: 0;
  }

  #what-if-primary .whatif-primary-cta-text {
    font-size: clamp(1.65rem, 8vw, 2.35rem);
    letter-spacing: 0;
  }

  #what-if-primary .whatif-primary-cta-arrow svg {
    width: clamp(42px, 14vw, 58px);
    height: auto;
  }

  #what-if-primary .whatif-primary-statement-text {
    gap: 0.4em 0.7em;
    font-size: clamp(0.56rem, 2.7vw, 0.72rem);
    letter-spacing: 0.22em;
  }
}

/* Music banner artwork replacement: embedded artwork with live link hotspots. */
#listen-music.music-banner-section {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 2172 / 289;
  padding: 0;
  background: #fbf9f5;
}

#listen-music .music-banner-bg-wrap {
  inset: 0;
  z-index: 1;
}

#listen-music .music-banner-bg-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

#listen-music .music-banner-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

#listen-music .music-banner-left-col {
  display: none;
}

#listen-music .music-banner-right-col {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  pointer-events: none;
}

#listen-music .music-banner-cta {
  position: absolute;
  top: 25%;
  right: 3.2%;
  width: 20.8%;
  height: 34%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto;
  cursor: pointer;
}

#listen-music .music-banner-cta > * {
  visibility: hidden;
}

#listen-music .music-banner-cta::after {
  display: none;
}

#listen-music .music-banner-cta:focus-visible {
  outline: 3px solid rgba(20, 15, 8, 0.75);
  outline-offset: 3px;
}

#listen-music .music-banner-platforms,
#listen-music.music-banner-in-view .music-banner-platforms {
  position: absolute;
  top: 63%;
  right: 3.2%;
  display: grid;
  grid-template-columns: 0.8fr 1.15fr 0.95fr 1.15fr;
  gap: 0;
  width: 28.5%;
  height: 20%;
  margin: 0;
  opacity: 1;
  transform: none;
  pointer-events: none;
}

#listen-music .music-platform-item {
  width: 100%;
  height: 100%;
  opacity: 1;
  color: transparent;
  pointer-events: auto;
  cursor: pointer;
}

#listen-music .music-platform-item > * {
  visibility: hidden;
}

#listen-music .music-platform-item:focus-visible {
  outline: 2px solid rgba(20, 15, 8, 0.75);
  outline-offset: 1px;
}

#listen-music .music-platform-sep {
  display: none;
}

@media (max-width: 991px) {
  #listen-music.music-banner-section {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
  }

  #listen-music .music-banner-stage,
  #listen-music .music-banner-right-col {
    display: block;
  }
}

@media (max-width: 600px) {
  #listen-music .music-banner-cta {
    top: 18%;
    right: 2%;
    width: 24%;
    height: 50%;
  }

  #listen-music .music-banner-platforms,
  #listen-music.music-banner-in-view .music-banner-platforms {
    top: 58%;
    right: 1.5%;
    width: 32%;
    height: 38%;
  }
}

/* Homepage composition separators introduced by the section rearrangement. */
.post-hero-separator {
  position: relative;
  width: 100%;
  height: clamp(8px, 0.75vw, 12px);
  background: #080706;
  box-shadow: inset 0 1px rgba(215, 174, 93, 0.12), inset 0 -1px rgba(0, 0, 0, 0.8);
  z-index: 12;
}

.inside-realm-heading {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 48px);
  width: 100%;
  min-height: clamp(82px, 9vw, 126px);
  padding: clamp(20px, 2.5vw, 34px) clamp(20px, 5vw, 80px);
  box-sizing: border-box;
  background: #070605;
  color: #f4ecdf;
  overflow: hidden;
}

.inside-realm-heading h2 {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-serif-heading), 'Cinzel', Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: clamp(0.2em, 0.45vw, 0.4em);
  text-align: center;
}

.inside-realm-heading-rule {
  width: min(18vw, 230px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #c99a45);
}

.inside-realm-heading-rule:last-child {
  background: linear-gradient(90deg, #c99a45, transparent);
}

@media (max-width: 600px) {
  .inside-realm-heading {
    gap: 12px;
    min-height: 76px;
    padding-inline: 16px;
  }

  .inside-realm-heading h2 {
    font-size: clamp(1.05rem, 5.5vw, 1.45rem);
    letter-spacing: 0.18em;
  }

  .inside-realm-heading-rule {
    width: 12vw;
  }
}

/* Selective, reversible motion for previously static audited content. */
.realm-motion-enhanced .inside-realm-heading h2,
.realm-motion-enhanced .inside-realm-heading .inside-realm-heading-rule,
.realm-motion-enhanced #whatif-banner .whatif-reg-person-col,
.realm-motion-enhanced #whatif-banner .whatif-reg-title-block,
.realm-motion-enhanced #whatif-banner .whatif-reg-v-sep,
.realm-motion-enhanced #whatif-banner .whatif-reg-tagline-block,
.realm-motion-enhanced #whatif-banner .whatif-reg-pillars-block,
.realm-motion-enhanced #whatif-banner .whatif-reg-cta-block {
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform, clip-path;
  transition-duration: 0.78s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.realm-motion-enhanced .inside-realm-heading h2 {
  transform: translate3d(0, 22px, 0);
  clip-path: inset(0 0 100% 0);
}

.realm-motion-enhanced .inside-realm-heading .inside-realm-heading-rule {
  transform: scaleX(0);
}

.realm-motion-enhanced .inside-realm-heading .inside-realm-heading-rule:first-child {
  transform-origin: right center;
}

.realm-motion-enhanced .inside-realm-heading .inside-realm-heading-rule:last-child {
  transform-origin: left center;
}

.realm-motion-enhanced .inside-realm-heading.realm-motion-active h2,
.realm-motion-enhanced .inside-realm-heading.realm-motion-active .inside-realm-heading-rule {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

.realm-motion-enhanced .inside-realm-heading.realm-motion-active .inside-realm-heading-rule {
  transition-delay: 0.08s;
}

.realm-motion-enhanced #whatif-banner .whatif-reg-person-col {
  transform: translate3d(-28px, 14px, 0);
}

.realm-motion-enhanced #whatif-banner .whatif-reg-title-block {
  transform: translate3d(0, 24px, 0);
  clip-path: inset(0 0 100% 0);
  transition-delay: 0.06s;
}

.realm-motion-enhanced #whatif-banner .whatif-reg-v-sep {
  transform: scaleY(0);
  transform-origin: center;
  transition-delay: 0.12s;
}

.realm-motion-enhanced #whatif-banner .whatif-reg-tagline-block {
  transform: translate3d(0, 20px, 0);
  transition-delay: 0.15s;
}

.realm-motion-enhanced #whatif-banner .whatif-reg-pillars-block {
  transform: translate3d(0, 20px, 0);
  transition-delay: 0.23s;
}

.realm-motion-enhanced #whatif-banner .whatif-reg-cta-block {
  transform: translate3d(22px, 0, 0);
  transition-delay: 0.31s;
}

.realm-motion-enhanced #whatif-banner.realm-motion-active .whatif-reg-person-col,
.realm-motion-enhanced #whatif-banner.realm-motion-active .whatif-reg-title-block,
.realm-motion-enhanced #whatif-banner.realm-motion-active .whatif-reg-v-sep,
.realm-motion-enhanced #whatif-banner.realm-motion-active .whatif-reg-tagline-block,
.realm-motion-enhanced #whatif-banner.realm-motion-active .whatif-reg-pillars-block,
.realm-motion-enhanced #whatif-banner.realm-motion-active .whatif-reg-cta-block {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .realm-motion-enhanced .inside-realm-heading h2,
  .realm-motion-enhanced .inside-realm-heading .inside-realm-heading-rule,
  .realm-motion-enhanced #whatif-banner .whatif-reg-person-col,
  .realm-motion-enhanced #whatif-banner .whatif-reg-title-block,
  .realm-motion-enhanced #whatif-banner .whatif-reg-v-sep,
  .realm-motion-enhanced #whatif-banner .whatif-reg-tagline-block,
  .realm-motion-enhanced #whatif-banner .whatif-reg-pillars-block,
  .realm-motion-enhanced #whatif-banner .whatif-reg-cta-block {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}