/* ==========================================================================
   ANGEL MARIE MONACHELLI - AUTHORITATIVE SPEAKER WEBSITE (GROUNDED EARTHY EDITION)
   Style Baseline: Earthy Luxury & Grounded Nature (Rosa Diosa & Mel Robbins Rhythm)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

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

:root {
  /* Color Palette - Grounded Earth, Olive Grove & Gilded Gold (Client Palette) */
  --earth-dark: #162018;        /* Deep Kaitoke / Pine Moss */
  --earth-surface: #1e2b21;     /* Rich Forest Surface */
  --earth-card: #253529;        /* Earthy Card Background */
  
  --olive-grove: #4A5844;       /* Client Olive Grove (#4A5844 - AAA 8.2:1) */
  --linen-light: #E6D7C3;       /* Client Warm Linen (#E6D7C3 - AAA 12.6:1) */
  --gilded-gold: #C9A86E;       /* Client Gilded Gold (#C9A86E) */
  --terracotta-saffron: #C36D38; /* Terracotta Clay & Saffron Rust Blend (#C36D38 - AA) */

  --cream-bg: #E6D7C3;         /* Warm Linen Cream Background */
  --cream-surface: #ffffff;    /* Pure White Card Surface for Light Sections */
  --cream-card: #f0e6d8;       /* Soft Sand Surface */
  --cream-text: #233025;       /* Dark Legible Charcoal Forest Text */
  --cream-muted: #59645b;      /* Muted Forest Body Text */

  --terracotta: #C36D38;       /* Warm Terracotta Saffron Accent (#C36D38) */
  --sand-gold: #C9A86E;        /* Gilded Gold Accent (#C9A86E) */
  --sand-light: #e0ccaa;       /* Soft Gilded Sand Glow */
  
  --linen: #E6D7C3;            /* Client Warm Linen */
  --linen-muted: #d5c8b5;      /* Muted Linen */
  --charcoal: #121613;         /* Deep Soft Black */
  
  --border-earth: rgba(201, 168, 110, 0.25);
  --border-glow: rgba(195, 109, 56, 0.35);
  --border-light: rgba(195, 109, 56, 0.2);

  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Spacious Breathing Room System */
  --pad-x: clamp(2rem, 6vw, 5rem);
  --pad-y: clamp(6rem, 10vw, 10rem);
  --radius-lg: 20px;
  --radius-sm: 10px;

  --transition-smooth: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  max-width: 100vw;
  background-color: var(--earth-dark);
  color: var(--linen);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

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

body {
  overflow-x: hidden;
  position: relative;
}

/* Custom Cursor System */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--sand-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease, width 0.2s, height 0.2s;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(216, 178, 120, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease;
}

@media (hover: none) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
}

/* Image Reveal Blur-Up Effect */
.img-reveal {
  opacity: 0;
  filter: blur(14px) brightness(0.85);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter;
}

.img-reveal.revealed {
  opacity: 1;
  filter: blur(0) brightness(1);
}

/* Scroll Reveal */
.rv {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.rv.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Typography Utilities */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.18;
  color: #ffffff;
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sand-gold);
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.text-gold { color: var(--sand-gold); }
.text-terracotta { color: var(--terracotta); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.15rem 2.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.825rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-nav {
  padding: 0.65rem 1.35rem;
  font-size: 0.725rem;
  letter-spacing: 0.12em;
  flex-shrink: 0;
  margin-left: 1rem;
}

.btn-gold {
  background: var(--sand-gold);
  color: var(--earth-dark);
  box-shadow: 0 12px 30px rgba(216, 178, 120, 0.25);
}

.btn-gold:hover {
  background: var(--sand-light);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(216, 178, 120, 0.4);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-earth);
  color: var(--linen);
  backdrop-filter: blur(10px);
}

.btn-outline:hover {
  border-color: var(--sand-gold);
  color: var(--sand-gold);
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.06);
}

.btn-outline-dark {
  background: transparent;
  border: 1px solid rgba(22, 32, 24, 0.3);
  color: var(--earth-dark);
}

.btn-outline-dark:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
  transform: translateY(-3px);
  background: rgba(196, 121, 91, 0.06);
}

.btn-purple,
.btn-outline-gold {
  background: #2D2636 !important;
  border: 1px solid var(--sand-gold) !important;
  color: var(--sand-gold) !important;
  box-shadow: 0 10px 25px rgba(45, 38, 54, 0.6);
}

.btn-purple:hover,
.btn-outline-gold:hover {
  background: #3d2f4d !important;
  color: #ffffff !important;
  border-color: var(--sand-light) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(45, 38, 54, 0.85);
}

/* Nav Header & Sacred Spiral Logo Mark */
nav#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1210;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 3.5vw;
  transition: background 0.4s, backdrop-filter 0.4s, padding 0.4s;
}

nav#nav.scrolled {
  background: rgba(22, 32, 24, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-earth);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.brand-logo-mark {
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-brand:hover .brand-logo-mark {
  transform: none;
}

.brand-text-block {
  display: flex;
  flex-direction: column;
}

.nav-brand .brand-name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: #ffffff;
  line-height: 1.1;
}

.nav-brand .brand-tag {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand-gold);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  list-style: none;
  margin: 0 auto;
}

.nav-links a {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #ffffff;
}

.btn-nav {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.6rem 1.25rem !important;
  font-size: 0.72rem !important;
}

@media (max-width: 1400px) {
  nav#nav {
    padding: 1rem 2vw;
  }
  .nav-links {
    gap: 0.85rem;
  }
  .nav-links a {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
  }
}

/* Spacious Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 12rem var(--pad-x) 7rem;
  overflow: hidden;
  background-color: var(--earth-dark);
}

.hero-bg-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

@keyframes heroSlowBreath {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: heroSlowBreath 22s ease-in-out infinite;
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(22, 32, 24, 1) 0%,
    rgba(22, 32, 24, 0.95) 45%,
    rgba(22, 32, 24, 0.4) 75%,
    rgba(22, 32, 24, 0.15) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 720px;
}

.hero h1 {
  font-size: clamp(3rem, 5.5vw, 5rem);
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin-bottom: 5.5rem;
}

br.ipad-break {
  display: none;
}

.hero h1 span.highlight {
  color: var(--sand-gold);
  font-style: italic;
  font-weight: 300;
}

.hero-subtitle {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  color: var(--linen-muted);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 3rem;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Grounded Credibility Ticker Banner & Single-Color Logos */
.credibility-banner {
  position: relative;
  z-index: 4;
  background: var(--earth-surface);
  border-y: 1px solid var(--border-earth);
  padding: 2.5rem var(--pad-x);
}

.ticker-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.ticker-item {
  display: flex;
  flex-direction: column;
}

.ticker-num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--sand-gold);
  line-height: 1;
}

.ticker-label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--linen-muted);
  margin-top: 0.35rem;
}

.brands-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-earth);
  margin-top: 1.75rem;
}

.as-featured-tag {
  font-family: var(--font-sans);
  font-size: 0.675rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand-gold);
  font-weight: 600;
  white-space: nowrap;
}

.brands-grid {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  flex-wrap: wrap;
}

.brand-item {
  color: var(--sand-gold);
  opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.brand-item:hover {
  opacity: 1;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Section Containers with Generous Padding */
.section {
  padding: var(--pad-y) var(--pad-x);
  position: relative;
}

.section-header {
  max-width: 760px;
  margin-bottom: 5rem;
}

.section-header.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  margin-top: 0.5rem;
}

/* LIGHT CREAM SECTIONS */
.section-cream {
  background-color: var(--cream-bg);
  color: var(--cream-text);
}

.section-cream .eyebrow {
  color: var(--terracotta);
}

.section-cream .section-title {
  color: var(--earth-dark);
}

.section-cream p {
  color: var(--cream-muted);
}

/* Event Energy Conductor Section */
.speaker-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 5rem;
  align-items: center;
}

.speaker-image-box {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border-light);
}

.speaker-image-box img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  display: block;
}

#about {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 720px;
}

#about .speaker-grid {
  min-height: 720px;
  align-items: stretch;
  row-gap: 0;
}

/* Split into four pieces (eyebrow, heading, image, paragraph+CTAs) so
   mobile can freely resequence them with `order` without depending on
   fragile DOM position. .speaker-image-box is position:absolute here (see
   below), so per the grid spec it's excluded from auto-placement entirely;
   the other three are explicitly placed into column 1, stacked in rows
   1/2/3 in their original reading order — this reproduces the original
   single-block desktop layout exactly (row-gap:0 above removes the gap the
   extra grid rows would otherwise introduce between them). */
#about .speaker-eyebrow-wrap {
  grid-column: 1;
  grid-row: 1;
  padding-top: 5rem;
  z-index: 2;
  position: relative;
}

#about .speaker-heading-wrap {
  grid-column: 1;
  grid-row: 2;
  z-index: 2;
  position: relative;
}

#about .speaker-text-bottom {
  grid-column: 1;
  grid-row: 3;
  padding-bottom: 5rem;
  z-index: 2;
  position: relative;
}

#about .speaker-image-box {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 50%;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
  box-shadow: none;
  border: none;
  background: transparent;
  overflow: visible;
}

#about .speaker-image-box img {
  height: calc(100% - 2.5rem);
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.15));
  will-change: transform;
  transition: transform 0.1s ease-out;
  transform-origin: bottom center;
  margin-bottom: 0;
}

.quote-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-earth);
  border-left: 4px solid var(--sand-gold);
  padding: 2.75rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: 2.25rem 0;
}

.quote-card p {
  font-size: 1.35rem;
  font-family: var(--font-serif);
  line-height: 1.65;
  color: var(--linen);
}

.quote-card-light {
  background: var(--cream-surface);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--terracotta);
  padding: 3.25rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: 2.5rem 0;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.04);
}

.quote-card-light p {
  font-size: 1.4rem;
  font-family: var(--font-serif);
  line-height: 1.65;
  color: var(--earth-dark);
}

.roles-pills {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.role-pill {
  padding: 0.6rem 1.4rem;
  border-radius: 100px;
  background: rgba(216, 178, 120, 0.08);
  border: 1px solid var(--border-earth);
  font-size: 0.725rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand-gold);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.role-pill:hover {
  background: rgba(216, 178, 120, 0.18);
  border-color: var(--sand-gold);
  transform: translateY(-2px);
}

.roles-pills-light {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.role-pill-light {
  padding: 0.6rem 1.4rem;
  border-radius: 100px;
  background: rgba(196, 121, 91, 0.08);
  border: 1px solid var(--border-light);
  font-size: 0.725rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
}

/* INTERACTIVE ORBITAL FREQUENCY ACTIVATION SECTION (1-VIEWPORT FIT) */
.single-viewport-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6.5rem var(--pad-x) 4rem;
  position: relative;
  overflow: hidden;
  background-color: var(--earth-dark);
}

.compact-header {
  margin-bottom: 2rem !important;
  max-width: 900px !important;
}

.compact-header .section-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-top: 0.25rem;
}

.orbital-level-pills {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.orbital-pill {
  padding: 0.5rem 1.2rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-earth);
  color: var(--linen-muted);
  font-family: var(--font-sans);
  font-size: 0.725rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.orbital-pill:hover,
.orbital-pill.active {
  background: var(--sand-gold);
  color: var(--earth-dark);
  border-color: var(--sand-gold);
  box-shadow: 0 8px 20px rgba(216, 178, 120, 0.25);
}

.orbital-viewport-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 3rem;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.orbital-stage-wrapper {
  position: relative;
  width: 500px;
  max-width: 100%;
  height: 500px;
  max-height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Center Focal Hub */
.orbital-center-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(30, 43, 33, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-earth);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 0 45px rgba(216, 178, 120, 0.18);
  text-align: center;
  padding: 0.75rem;
}

.hub-logo-mark {
  margin-bottom: 0.25rem;
  animation: none;
}

@keyframes hubSpiralRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hub-title {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #ffffff;
}

.hub-subtitle {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  color: var(--sand-gold);
  text-transform: uppercase;
}

.hub-pulse-ring {
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  border-radius: 50%;
  border: 1px stroke rgba(216, 178, 120, 0.25);
  border-top-color: var(--sand-gold);
  animation: hubPulseRing 6s linear infinite;
  pointer-events: none;
}

.hub-pulse-ring-outer {
  position: absolute;
  top: -28px;
  left: -28px;
  right: -28px;
  bottom: -28px;
  border-radius: 50%;
  border: 1px stroke rgba(196, 121, 91, 0.18);
  border-bottom-color: var(--terracotta);
  animation: hubPulseRing 12s linear reverse infinite;
  pointer-events: none;
}

@keyframes hubPulseRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* SVG Canvas */
.orbital-svg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

#orbital-spiral-stroke {
  transition: stroke-dashoffset 0.12s ease-out;
}

#sacred-spiral-emblem-group {
  transform-origin: 275px 275px;
  will-change: transform;
}

/* Radial Nodes Container & Trig Positioned Items */
.orbital-nodes-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.orbital-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: auto;
  cursor: pointer;
  transform: rotate(var(--angle)) translate(195px) rotate(calc(-1 * var(--angle)));
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--earth-card);
  border: 2px solid var(--sand-gold);
  box-shadow: 0 0 10px rgba(216, 178, 120, 0.4);
  transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
  will-change: transform, box-shadow, opacity;
}

.orbital-node:hover .node-dot,
.orbital-node.active .node-dot {
  background: var(--sand-gold);
  transform: scale(1.65);
  box-shadow: 0 0 24px rgba(216, 178, 120, 0.9);
}

.node-pill {
  position: absolute;
  white-space: nowrap;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  background: rgba(22, 32, 24, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-earth);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(-22px);
  will-change: transform, border-color, background;
}

.orbital-node:hover .node-pill,
.orbital-node.active .node-pill {
  background: rgba(37, 53, 41, 0.98);
  border-color: var(--sand-gold);
  transform: translateY(-26px) scale(1.06);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
}

.node-num {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--sand-gold);
  font-weight: 700;
}

.node-label {
  font-family: var(--font-sans);
  font-size: 0.675rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* Glassmorphic Active Details Card Showcase with Dynamic Background Image */
.orbital-details-card {
  position: relative;
  max-width: 100%;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-earth);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.details-card-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.details-card-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.88) contrast(1.08);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1.02);
}

.details-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(16, 24, 18, 0.45) 0%,
    rgba(16, 24, 18, 0.65) 50%,
    rgba(16, 24, 18, 0.82) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.details-layers-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.details-layer {
  grid-area: 1 / 1;
  width: 100%;
  padding: 2.25rem 2.25rem 4.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.details-layer.active-layer {
  opacity: 1;
  pointer-events: auto;
}

.details-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-earth);
}

.details-level-tag {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand-gold);
}

.details-index-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--linen-muted);
}

.details-title {
  font-size: 1.75rem;
  color: #ffffff;
  margin-bottom: 0.45rem;
  line-height: 1.2;
}

.details-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--sand-gold);
  margin-bottom: 0.95rem;
  border-left: 3px solid var(--terracotta);
  padding-left: 0.75rem;
}

.details-desc {
  font-size: 0.885rem;
  color: var(--linen-muted);
  line-height: 1.6;
  margin-bottom: 1.15rem;
}

.details-bullets-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.details-bullets-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  color: var(--linen);
  line-height: 1.55;
}

.details-bullets-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--terracotta);
}

/* Video Testimonial Cards Showcase */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 3.5rem;
}

.tr-card {
  position: relative;
  height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-earth);
  background: var(--earth-card);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

/* Word-Focused Testimonial Cards */
.tr-card.word-card {
  height: auto;
  min-height: 380px;
  background: var(--cream-surface);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.tr-card.word-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(35, 48, 37, 0.12);
  border-color: var(--sand-gold);
}

.tr-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tr-thumb-wrapper {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}

.tr-circle-thumb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sand-gold);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease;
}

.tr-card.word-card:hover .tr-circle-thumb {
  transform: scale(1.06);
}

.tr-play-overlay {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cream-surface);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.tr-speaker-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tr-card.word-card .tr-name {
  color: var(--cream-text);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}

.tr-card.word-card .tr-role-tag {
  color: var(--terracotta);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.tr-card-body {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

.tr-quote-mark {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--sand-gold);
  opacity: 0.4;
  margin-bottom: -1rem;
}

.tr-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--cream-text);
}

.tr-card-footer {
  border-top: 1px solid rgba(196, 121, 91, 0.18);
  padding-top: 1rem;
}

.tr-watch-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sand-gold);
  transition: color 0.3s ease;
}

.tr-card.word-card:hover .tr-watch-badge {
  color: var(--terracotta);
}

.tr-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  border-color: var(--sand-gold);
}

.tr-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.tr-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.tr-card:hover .tr-card-bg img {
  transform: scale(1.08);
}

.tr-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(22, 32, 24, 0.15) 0%,
    rgba(22, 32, 24, 0.35) 45%,
    rgba(22, 32, 24, 0.88) 75%,
    rgba(22, 32, 24, 0.98) 100%
  );
}

.tr-glass-watch-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--font-sans);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: background 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}

.tr-card:hover .tr-glass-watch-btn {
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.65);
  transform: translateY(-2px);
}

.tr-card-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 1.75rem;
}

.tr-lower-third {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tr-name {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.tr-role-tag {
  font-family: var(--font-sans);
  font-size: 0.675rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand-gold);
}

/* EnergizeUtv & Media Section */
.media-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
}

.media-card {
  background: var(--earth-card);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.media-card-img-wrapper {
  position: relative;
  width: 100%;
  height: 380px;
  background: rgba(14, 20, 15, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--border-earth);
}

.media-card-img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}

.media-card-body {
  padding: 3rem;
}

.media-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.media-stat {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-earth);
  padding: 1.15rem;
  border-radius: var(--radius-sm);
  text-align: center;
}

.media-stat-val {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--sand-gold);
}

.media-stat-lbl {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--linen-muted);
}

.bullets-list {
  list-style: none;
  margin: 2rem 0;
}

.bullets-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
  font-size: 1.05rem;
  color: var(--linen);
}

.bullets-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--terracotta);
}

/* Rosa Diosa Style Light Editorial Section with Image Fade Mask */
.author-section {
  padding: 0;
  position: relative;
  background-color: var(--cream-bg);
  color: var(--cream-text);
}

.author-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: center;
}

.author-image-box-flush {
  position: relative;
  width: 100%;
  height: 650px;
}

.author-image-box-flush img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 100%);
}

.author-content-padded {
  padding-right: var(--pad-x);
  padding-left: 1rem;
}

.author-content-padded .eyebrow {
  color: var(--terracotta);
}

.author-content-padded .section-title {
  color: var(--earth-dark);
}

.book-tagline-card-light {
  background: #ffffff;
  border: 1px solid rgba(196, 121, 91, 0.25);
  border-radius: var(--radius-lg);
  padding: 2.75rem;
  margin: 2.5rem 0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
}

.book-tagline-card-light h3 {
  font-size: 1.5rem;
  color: var(--terracotta);
  margin-bottom: 0.85rem;
  font-family: var(--font-sans);
}

.book-tagline-card-light p {
  font-size: 1.3rem;
  color: var(--earth-dark);
  line-height: 1.65;
  font-family: var(--font-serif);
}

/* Mission & Vision Section */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.mv-card {
  background: var(--earth-card);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-lg);
  padding: 4rem;
  position: relative;
  overflow: hidden;
}

.mv-watermark-logo {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 320px;
  height: 320px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0 !important;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.mv-card:hover .mv-watermark-logo {
  opacity: 0.16;
  transform: scale(1.08) rotate(15deg);
}

.mv-card > *:not(.mv-watermark-logo) {
  position: relative;
  z-index: 2;
}

.mv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--terracotta), var(--sand-gold));
}

/* VIP Booking & Footer Banner */
.footer-banner {
  background: var(--earth-surface);
  border-top: 1px solid var(--border-earth);
  padding: 7rem var(--pad-x) 3.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 5rem;
  margin-bottom: 5rem;
}

.footer-copy {
  border-top: 1px solid var(--border-earth);
  padding-top: 2.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--linen-muted);
  letter-spacing: 0.06em;
}

/* Responsive Media Queries */
@media (max-width: 1200px) {
  .testimonials-grid, .activation-nodes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .speaker-grid, .author-grid, .media-showcase-grid, .mv-grid, .footer-grid, .testimonials-grid, .activation-nodes-grid, .orbital-viewport-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  /* Orbital Activation Spiral: the radial trig-positioned diagram is a
     desktop-only interaction (hover to preview, auto-rotating wheel) that
     cannot translate to touch/narrow viewports. Replace with a simple
     tappable vertical list of the same 8 touchpoints — script.js's click
     handlers are attached generically to .orbital-node elements and don't
     depend on their position, so this needs no JS changes: clicking a
     stacked item still calls setActiveNode() and updates the details card
     exactly as it does on desktop. */
  .single-viewport-section {
    min-height: 0;
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  .orbital-stage-wrapper {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
  }

  .orbital-svg-canvas,
  .orbital-center-hub {
    display: none;
  }

  /* .orbital-level-pills (in the section header, above) already drives the
     exact same setActiveNode() state via the same click handler — this list
     was the mobile stand-in for the now-hidden SVG diagram, but duplicates
     the pills below the fold. Hide it instead of listing it a second time. */
  .orbital-nodes-container {
    display: none;
  }

  .orbital-details-card {
    margin-top: 1rem;
  }

  /* #about uses an absolutely-positioned bleeding image for a desktop split
     effect — that position:absolute takes it out of grid flow entirely and
     overlays it directly on top of the text on mobile. Reset to normal
     stacked flow below the text. overflow:hidden was also set on the base
     rule (to contain the desktop absolute image) — that same overflow:hidden
     clips the mobile full-bleed image's 100vw negative-margin escape right
     back down to the section's own bounds, so it must be reset here too. */
  #about {
    min-height: 0;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
  }

  #about .speaker-grid {
    min-height: 0;
    row-gap: 0;
  }

  /* #about shares the generic .section class, which puts horizontal padding
     (var(--pad-x)) directly on the section — unlike .author-section, which
     uses padding:0 and lets its own inner text wrapper carry the inset.
     That section-level padding shrinks .speaker-grid's actual containing-
     block width, so the image's `left:50%` (a % of that narrowed track)
     never fully cancels against `margin-left:-50vw` (viewport-absolute) —
     it looked like nothing changed because a padding-sized gap remained on
     each side. Zeroing #about's own padding above and re-adding it here,
     per text piece, keeps the text inset exactly as before while freeing
     the image to actually reach both edges. */
  #about .speaker-eyebrow-wrap,
  #about .speaker-heading-wrap,
  #about .speaker-text-bottom {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }

  /* The desktop rules give these explicit grid-row placements so the four
     pieces stay stacked in column 1 of the 2-column split. CSS Grid
     resolves ALL explicitly-placed items first, regardless of DOM order,
     before auto-placing the rest — relying on DOM order + auto-placement
     alone previously pushed .speaker-image-box (auto-placed, since it
     becomes position:static/a real grid participant here) behind whichever
     items still had explicit placement. Resetting every text piece to auto
     and giving all four an explicit `order` sequences them reliably:
     eyebrow, image, heading, then paragraph+CTAs. */
  #about .speaker-eyebrow-wrap {
    grid-column: auto;
    grid-row: auto;
    order: 1;
    padding-top: 3rem;
    text-align: center;
  }

  #about .speaker-heading-wrap {
    grid-column: auto;
    grid-row: auto;
    order: 3;
    padding-top: 1.5rem;
  }

  #about .speaker-text-bottom {
    grid-column: auto;
    grid-row: auto;
    order: 4;
    padding-top: 0;
    padding-bottom: 2rem;
  }

  /* Image sits between the eyebrow and the heading, full width, with a
     bottom feather so it blends into the text below instead of a hard edge. */
  /* width:100% alone only fills the grid column, which still sits inside
     the section's own side padding — not truly edge-to-edge. Break out of
     the container the same way .author-image-box-flush does. */
  #about .speaker-image-box {
    position: relative;
    order: 2;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: auto;
    display: block;
    margin-bottom: 1.5rem;
  }

  #about .speaker-image-box img {
    height: auto;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  }

  .spiral-svg-box {
    width: 320px;
    height: 320px;
  }

  .author-section {
    padding: var(--pad-y) var(--pad-x);
  }

  .author-content-padded {
    padding-right: 0;
    padding-left: 0;
  }

  .hero {
    min-height: 78vh;
    align-items: flex-end;
    padding-bottom: 3.5rem;
  }

  .hero-bg-image {
    width: 100%;
  }

  .hero-bg-image img {
    object-position: center;
  }

  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(22, 32, 24, 1) 0%,
      rgba(22, 32, 24, 0.97) 38%,
      rgba(22, 32, 24, 0.75) 52%,
      rgba(22, 32, 24, 0.15) 70%,
      rgba(22, 32, 24, 0) 78%
    );
  }

  .hero .eyebrow {
    display: none;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.4rem);
    line-height: 1.18;
    margin-bottom: 1.8rem;
  }

  .hero-subtitle {
    margin-bottom: 2rem;
  }

  .hero-actions {
    margin-top: 0.5rem;
  }

  .hero h1,
  .hero .eyebrow,
  .hero-subtitle {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
  }

  nav#nav {
    background: rgba(22, 42, 30, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(216, 178, 120, 0.15);
  }

  .subpage-hero {
    min-height: 55vh;
  }

  .subpage-hero-bg img {
    object-position: center;
  }

  .nav-links {
    display: none;
  }
}

/* Tablet-range hero tuning (iPad etc — overrides the phone block above for widths that intersect both) */
@media (min-width: 600px) and (max-width: 1024px) {
  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(22, 32, 24, 1) 0%,
      rgba(22, 32, 24, 0.97) 30%,
      rgba(22, 32, 24, 0.75) 42%,
      rgba(22, 32, 24, 0.15) 58%,
      rgba(22, 32, 24, 0) 66%
    );
  }

  .hero-content {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: end;
    column-gap: 1.5rem;
  }

  .hero h1 {
    grid-column: 1;
    font-size: 2.6rem;
    line-height: 1.18;
    max-width: none;
    margin-bottom: 0;
  }

  br.ipad-break {
    display: block;
  }

  .hero-actions {
    grid-column: 2;
    justify-self: end;
    margin: 0 0 0.4rem;
  }

  /* SHINE ON! book cover on books.html — face sits upper-right in the
     source photo; the fixed 240px-tall card crops it out on iPad-width
     columns specifically. Scoped here only — phone width already frames
     it correctly, so the fix must not touch the base/mobile value. */
  .shine-on-cover {
    object-position: 68% 28% !important;
  }
}

/* Video Embed Component for Media Section */
.video-embed-container {
  max-width: 960px;
  margin: 2.5rem auto 0;
  background: var(--earth-card);
  border: 1px solid var(--border-earth);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.video-responsive-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.video-responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-embed-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   MULTI-PAGE DROPDOWN NAVIGATION & SUBPAGE COMPONENTS
   ========================================================================== */

/* Dropdown Navigation System */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0 1rem;
}

/* Home link is only needed in the mobile hamburger drawer — the desktop bar
   already reaches home via the logo/brand link, so this stays hidden there. */
.nav-home-mobile-only {
  display: none;
}

.nav-item-dropdown {
  position: relative;
}

.nav-item-dropdown > a::after {
  content: ' \25BE';
  font-size: 0.7em;
  opacity: 0.7;
  margin-left: 2px;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: -15px;
  background: rgba(22, 32, 24, 0.98);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0;
  min-width: 240px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1100;
  list-style: none;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.65rem 1.35rem;
  color: var(--linen-muted);
  font-size: 0.8rem;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: var(--transition-smooth);
}

.nav-dropdown-menu a:hover {
  color: var(--sand-gold);
  background: rgba(216, 178, 120, 0.1);
  padding-left: 1.6rem;
}

/* Sub-Menu / Nested Flyout Navigation */
.nav-dropdown-menu li {
  position: relative;
}

.nav-dropdown-sub {
  position: absolute;
  top: 0;
  left: 100%;
  background: rgba(22, 32, 24, 0.98);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0;
  min-width: 260px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1200;
  list-style: none;
}

.nav-has-sub:hover > .nav-dropdown-sub,
.nav-has-sub:focus-within > .nav-dropdown-sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.nav-has-sub > a {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.nav-sub-arrow {
  font-size: 0.95rem;
  color: var(--sand-gold);
  margin-left: 0.75rem;
  transition: transform 0.3s ease;
}

.nav-has-sub:hover .nav-sub-arrow {
  transform: translateX(3px);
}

/* Subpage Hero Header */
.subpage-hero {
  position: relative;
  padding: 11rem var(--pad-x) 5.5rem;
  background: var(--earth-dark);
  border-bottom: 1px solid var(--border-earth);
  overflow: hidden;
  text-align: center;
}

.subpage-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.subpage-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;
  filter: brightness(0.75) contrast(1.1);
  transition: opacity 1.2s ease, filter 1.2s ease;
}

.subpage-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 32, 24, 0.75) 0%, rgba(22, 32, 24, 0.96) 100%),
              radial-gradient(circle at 50% 30%, rgba(216, 178, 120, 0.22), transparent 75%);
  pointer-events: none;
  z-index: 1;
}

.subpage-hero-content {
  position: relative;
  z-index: 2;
}

.subpage-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  margin: 1rem 0;
}

.breadcrumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-muted);
}

.breadcrumbs a {
  color: var(--sand-gold);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* Interactive FAQ Accordion System */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 920px;
  margin: 3rem auto 0;
}

.faq-item {
  background: var(--earth-card);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.3s;
}

.faq-item:hover {
  border-color: var(--sand-gold);
}

.faq-question {
  width: 100%;
  padding: 1.5rem 2rem;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  outline: none;
}

.faq-question::after {
  content: '+';
  font-family: var(--font-sans);
  font-size: 1.5rem;
  color: var(--sand-gold);
  transition: transform 0.3s;
}

.faq-item.active .faq-question::after {
  content: '−';
  color: var(--terracotta);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 2rem;
  color: var(--linen-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.faq-item.active .faq-answer {
  max-height: 600px;
  padding: 0 2rem 1.75rem;
}

/* ==========================================================================
   LAYERED ACCORDION SYSTEM FOR DEEP-DIVE INSIGHTS
   ========================================================================== */
.layered-accordion-system {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 1150px;
  margin: 3.5rem auto 0;
}

.layered-accordion-item {
  background: var(--earth-card);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.layered-accordion-item:hover {
  border-color: var(--sand-gold);
  box-shadow: 0 20px 45px rgba(216, 178, 120, 0.12);
}

.layered-accordion-item.active {
  border-color: var(--sand-gold);
  background: linear-gradient(180deg, var(--earth-card) 0%, rgba(30, 43, 33, 0.98) 100%);
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.5);
}

.layered-accordion-header {
  width: 100%;
  padding: 2.25rem 3rem;
  background: transparent;
  border: none;
  color: #ffffff;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  outline: none;
  gap: 2rem;
  transition: background 0.3s;
}

.layered-accordion-header:hover {
  background: rgba(216, 178, 120, 0.04);
}

.layered-accordion-title-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.layered-accordion-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-earth);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sand-gold);
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  background: rgba(22, 32, 24, 0.6);
}

.layered-accordion-item.active .layered-accordion-icon {
  transform: rotate(180deg);
  background: var(--sand-gold);
  color: var(--earth-dark);
  border-color: var(--sand-gold);
}

.layered-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), padding 0.6s ease, opacity 0.45s ease;
  padding: 0 3rem;
  opacity: 0;
  border-top: 1px solid transparent;
}

.layered-accordion-item.active .layered-accordion-body {
  max-height: 1400px;
  padding: 2.25rem 3rem 3.5rem;
  opacity: 1;
  border-top: 1px solid var(--border-earth);
}

/* ==========================================================================
   CONNECTED STACK ACCORDION SYSTEM (UNIFIED DRAWER PANEL)
   ========================================================================== */
.connected-accordion-stack {
  max-width: 1150px;
  margin: 3.5rem auto 0;
  background: var(--earth-card);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.stack-accordion-item {
  border-bottom: 1px solid var(--border-earth);
  transition: background 0.4s ease;
}

.stack-accordion-item:last-child {
  border-bottom: none;
}

.stack-accordion-header {
  width: 100%;
  padding: 2rem 2.75rem;
  background: transparent;
  border: none;
  color: #ffffff;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  outline: none;
  gap: 1.5rem;
  transition: background 0.3s ease;
}

.stack-accordion-header:hover {
  background: rgba(216, 178, 120, 0.06);
}

.stack-accordion-item.active .stack-accordion-header {
  background: rgba(216, 178, 120, 0.09);
}

.stack-accordion-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-earth);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--sand-gold);
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, color 0.3s;
  background: rgba(22, 32, 24, 0.6);
}

.stack-accordion-item.active .stack-accordion-icon {
  transform: rotate(180deg);
  background: var(--sand-gold);
  color: var(--earth-dark);
  border-color: var(--sand-gold);
}

.stack-accordion-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), padding 0.5s ease, opacity 0.4s ease;
  padding: 0 2.75rem;
  opacity: 0;
  background: rgba(22, 32, 24, 0.45);
}

.stack-accordion-item.active .stack-accordion-drawer {
  max-height: 1200px;
  padding: 2rem 2.75rem 3rem;
  opacity: 1;
  border-top: 1px solid rgba(216, 178, 120, 0.15);
}

@media (max-width: 768px) {
  .stack-accordion-header {
    padding: 1.5rem 1.25rem;
    gap: 1rem;
  }
  .stack-accordion-drawer {
    padding: 0 1.25rem;
  }
  .stack-accordion-item.active .stack-accordion-drawer {
    padding: 1.5rem 1.25rem 2.25rem;
  }
}

/* ==========================================================================
   HORIZONTAL SLIDING ACCORDION SHOWCASE (MATCHING DEMO VIDEO)
   ========================================================================== */
.horizontal-accordion-wrapper {
  max-width: 1200px;
  margin: 3.5rem auto 0;
  width: 100%;
}

.horizontal-accordion-container {
  display: flex;
  width: 100%;
  height: 600px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-earth);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  background: var(--earth-dark);
}

.hz-accordion-panel {
  position: relative;
  flex: 1;
  height: 100%;
  border-right: 1px solid var(--border-earth);
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.hz-accordion-panel:last-child {
  border-right: none;
}

.hz-accordion-panel.active {
  flex: 4.5;
  cursor: default;
}

.hz-panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hz-panel-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.3;
  filter: brightness(0.7) contrast(1.1);
  transition: opacity 0.6s ease, transform 0.8s ease;
}

.hz-accordion-panel:hover .hz-panel-bg img {
  transform: scale(1.04);
}

.hz-accordion-panel.active .hz-panel-bg img {
  opacity: 0.22;
  transform: scale(1);
}

.hz-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 32, 24, 0.6) 0%, rgba(22, 32, 24, 0.95) 100%);
  z-index: 1;
}

/* Collapsed Vertical Title & Badge */
.hz-panel-collapsed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 1rem;
  opacity: 1;
  transition: opacity 0.4s ease 0.2s, visibility 0.4s;
  visibility: visible;
  pointer-events: none;
}

.hz-accordion-panel.active .hz-panel-collapsed {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.hz-collapsed-badge {
  background: var(--sand-gold);
  color: var(--earth-dark);
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  white-space: nowrap;
}

.hz-collapsed-vertical-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-serif);
  font-size: 1.65rem;
  color: #ffffff;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.hz-collapsed-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-earth);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sand-gold);
  font-size: 1.25rem;
  background: rgba(22, 32, 24, 0.8);
}

/* Expanded Full Content Panel */
.hz-panel-expanded {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease 0.25s, visibility 0.5s;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.hz-panel-expanded::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  width: 0;
  height: 0;
}

.hz-accordion-panel.active .hz-panel-expanded {
  opacity: 1;
  visibility: visible;
}

/* Responsive Fallback for Mobile Screens */
/* Site-wide safety net: many subpages use an inline
   `grid-template-columns: repeat(auto-fit, minmax(Npx, 1fr))` style directly
   in the HTML (services, books, coaching, reiki, corporate, etc). Inline
   styles beat any stylesheet selector regardless of specificity, so on
   narrow phones a minmax floor above the viewport width (500px on the
   services.html cards was the worst offender) forces the grid to overflow
   horizontally instead of collapsing to one column. !important is the only
   way to override an inline style from an external stylesheet. */
@media (max-width: 900px) {
  [style*="grid-template-columns: repeat(auto-fit, minmax("] {
    grid-template-columns: 1fr !important;
  }
}

/* Event Energy Conductor hero photo: Angel Marie stands on the far left of
   the source image, but the desktop object-position (center 25%) crops her
   out entirely on the taller, narrower mobile aspect ratio. Shift left on
   mobile only — desktop framing stays untouched. */
@media (max-width: 900px) {
  .eec-hero-photo {
    object-position: 20% 25% !important;
  }
}

@media (max-width: 900px) {
  .horizontal-accordion-container {
    flex-direction: column;
    height: auto;
  }

  .hz-accordion-panel {
    border-right: none;
    border-bottom: 1px solid var(--border-earth);
    height: auto;
    flex: none !important;
  }

  .hz-panel-collapsed {
    display: none;
  }

  .hz-panel-expanded {
    opacity: 1;
    visibility: visible;
    padding: 2.5rem 1.75rem;
  }
}



@media (max-width: 768px) {
  .layered-accordion-header {
    padding: 1.75rem 1.5rem;
    gap: 1rem;
  }
  .layered-accordion-body {
    padding: 0 1.5rem;
  }
  .layered-accordion-item.active .layered-accordion-body {
    padding: 1.5rem 1.5rem 2.5rem;
  }
}


/* Package Cards & Service Tier Grid */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
  grid-template-rows: repeat(9, auto);
  width: 100%;
}

@media (max-width: 1100px) {
  .packages-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

.package-card {
  background: var(--earth-card);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-lg);
  padding: 2rem 1.35rem;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 9;
  position: relative;
  transition: var(--transition-smooth);
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .package-card {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
}

.package-card:hover {
  transform: translateY(-8px);
  border-color: var(--sand-gold);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.package-card.highlight-package {
  border-color: var(--sand-gold);
  background: linear-gradient(180deg, var(--earth-card) 0%, rgba(37, 53, 41, 0.95) 100%);
  box-shadow: 0 20px 45px rgba(216, 178, 120, 0.15);
}

.package-card.highlight-package::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sand-gold);
  color: var(--earth-dark);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  padding: 0.35rem 1.25rem;
  border-radius: 20px;
}

.package-card h3 {
  font-size: 1.65rem;
  margin: 0.5rem 0 0.75rem;
}

.package-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(216, 178, 120, 0.18);
}

.package-price {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  color: var(--sand-gold);
  margin: 1rem 0 1.5rem;
}

/* Living Inscription Scan Line (Signature Gold Sweep) */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--sand-gold), transparent);
  opacity: 0;
  filter: blur(1px);
  box-shadow: 0 0 10px var(--sand-gold), 0 0 20px rgba(216, 178, 120, 0.5);
  pointer-events: none;
  z-index: 10;
}

.package-features {
  display: contents;
  list-style: none;
}

.package-features li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--linen-muted);
  line-height: 1.4;
  align-self: start;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.package-features li.flash {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(216, 178, 120, 0.5);
}

.package-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--sand-gold);
  font-weight: bold;
}

/* Book Showcase Cards */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  margin-top: 3.5rem;
}

.book-card {
  background: var(--earth-card);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: var(--transition-smooth);
}

.book-card:hover {
  transform: translateY(-6px);
  border-color: var(--sand-gold);
}

.book-cover {
  width: 180px;
  height: 260px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.75rem;
  background: #2b3b2d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sand-gold);
  font-family: var(--font-serif);
  padding: 1rem;
}

/* Embedded e360tv Player Box */
.e360tv-box {
  background: var(--earth-card);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  margin-top: 2rem;
  text-align: center;
}

.e360tv-player-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  margin: 1.5rem 0;
}

.e360tv-player-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Luxury Form Control System */
.luxury-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.luxury-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  width: 100%;
}

@media (max-width: 640px) {
  .luxury-form .form-row {
    grid-template-columns: 1fr;
  }
}

.luxury-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
  width: 100%;
}

.luxury-form .form-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand-gold);
}

.luxury-form input.form-control,
.luxury-form select.form-control,
.luxury-form textarea.form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(22, 32, 24, 0.85);
  border: 1px solid var(--border-earth);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.luxury-form input.form-control::placeholder,
.luxury-form textarea.form-control::placeholder {
  color: rgba(230, 215, 195, 0.45);
}

.luxury-form input.form-control:focus,
.luxury-form select.form-control:focus,
.luxury-form textarea.form-control:focus {
  border-color: var(--sand-gold);
  background: rgba(22, 32, 24, 0.98);
  box-shadow: 0 0 20px rgba(201, 168, 110, 0.35);
}

.luxury-form select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C9A86E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 16px;
  cursor: pointer;
}

.luxury-form select.form-control option {
  background: #162018;
  color: #ffffff;
}

.luxury-form textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.luxury-form .checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  text-align: left;
  user-select: none;
}

.luxury-form .checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  accent-color: var(--sand-gold);
  cursor: pointer;
  flex-shrink: 0;
}

.luxury-form .checkbox-label {
  font-size: 0.85rem;
  color: var(--linen-muted);
  line-height: 1.6;
}

/* Interactive Experience Cards (Coaching & Services) */
.experience-card {
  background: rgba(35, 48, 37, 0.5);
  border: 1px solid var(--border-earth);
  border-radius: 14px;
  padding: 1.15rem 1.35rem;
  transition: all 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.experience-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--sand-gold);
  opacity: 0;
  transform: scaleY(0);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.65s ease;
}

.experience-card:hover {
  background: rgba(45, 60, 48, 0.85);
  border-color: var(--sand-gold);
  transform: translateX(6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(201, 168, 110, 0.2);
}

.experience-card:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.experience-card strong {
  transition: color 0.5s ease;
}

.experience-card:hover strong {
  color: #f3e5c8 !important;
}

.experience-card span {
  transition: color 0.5s ease;
}

.experience-card:hover span {
  color: #ffffff !important;
}






/* ==========================================================================
   MOBILE NAVIGATION (Hamburger Toggle + Slide Panel)
   ========================================================================== */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  position: relative;
  z-index: 1201;
}

.nav-toggle span {
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--sand-gold);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-dropdown-toggle { display: none; }
.nav-mobile-cta { display: none; }

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1199;
}

.nav-overlay.active { display: block; }
body.nav-locked { overflow: hidden; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  nav#nav > .btn-nav { display: none; }

  /* Prevent the long brand name + logo from overflowing past the viewport
     and pushing the hamburger toggle off-screen on narrow phones. */
  .nav-brand {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  .brand-text-block {
    min-width: 0;
    overflow: hidden;
  }

  .nav-brand .brand-name {
    font-size: clamp(0.78rem, 4.2vw, 1.1rem) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
  }

  .nav-brand .brand-tag {
    font-size: 0.48rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
  }

  .brand-logo-mark {
    flex-shrink: 0;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 85vw);
    background: rgba(15, 22, 16, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 6rem 1.75rem 2rem;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    z-index: 1200;
  }

  .nav-links.mobile-open { transform: translateX(0); }

  .nav-links > li {
    width: 100%;
    border-bottom: 1px solid var(--border-earth);
    position: relative;
  }

  .nav-home-mobile-only {
    display: block;
  }

  .nav-links > li > a {
    display: block;
    padding: 1rem 2.5rem 1rem 0;
    font-size: 0.9rem;
  }

  .nav-item-dropdown > a::after { display: none; }

  .nav-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 48px;
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    color: var(--sand-gold);
    cursor: pointer;
  }

  .nav-dropdown-toggle svg { transition: transform 0.3s ease; }
  .nav-item-dropdown.mobile-expanded .nav-dropdown-toggle svg { transform: rotate(180deg); }

  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .nav-item-dropdown.mobile-expanded .nav-dropdown-menu { max-height: 500px; }

  .nav-dropdown-menu a { padding: 0.7rem 0 0.7rem 1rem; font-size: 0.82rem; }
  .nav-dropdown-menu a:hover { padding-left: 1.2rem; }

  .nav-mobile-cta {
    display: block;
    border-bottom: none !important;
    margin-top: 1.5rem;
  }

  .nav-mobile-cta a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem !important;
  }
}


/* ==========================================================================
   FIXED MULTI-COLUMN GRID OVERRIDE (inline grid-template-columns that do not
   self-collapse — the repeat(auto-fit, minmax(...)) grids already do)
   ========================================================================== */
@media (max-width: 768px) {
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.15fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   MOBILE BUTTON TEXT — allow wrap instead of overflow for long CTA labels
   ========================================================================== */
@media (max-width: 900px) {
  .btn {
    padding: 0.9rem 1.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    gap: 0.5rem;
    max-width: 100%;
  }
}

/* ==========================================================================
   AUTHOR SHOWCASE IMAGE — fixed 650px height + left-anchored crop was
   designed for wide desktop columns. On a narrow mobile column that same
   fixed height forces a much taller/narrower crop window than intended,
   cutting the subject's face out of frame.
   ========================================================================== */
/* Phablet/large-phone crop fix — every fixed-px-height photo container below
   uses width:100% with a fixed height, tuned by eye at a ~390px baseline.
   As viewport width grows toward the 900px mobile ceiling (large Android
   phones, unfolded foldables), the container's aspect ratio balloons wider
   while the crop math stays anchored to the same object-position percentage
   — the visible slice of the source photo shrinks fast (verified: several
   dropped to showing under 40% of the original photo height by 720px),
   drifting far from what was actually approved at 390px. Locking each to an
   aspect-ratio computed from 390/[original height] keeps the exact same
   framing at any width in this range — at 390px itself this changes nothing
   (390 / (390/height) = height), so nothing regresses at the already-tested
   baseline; it only fixes the wider end that was never checked. */
@media (max-width: 900px) {
  img[src*="pxl_20260209_150813974.portrait.jpg"] {
    height: auto !important;
    aspect-ratio: 39 / 58 !important;
  }
  img[src*="pxl_20251114_152018212.jpg"],
  img[src*="pxl_20250718_010221303.jpg"],
  img[src*="reiki_outdoor_enhanced.jpg"] {
    height: auto !important;
    aspect-ratio: 13 / 14 !important;
  }
  img[src*="pxl_20260605_183654308.jpg"],
  img[src*="pxl_20260605_182507309.mp.jpg"] {
    height: auto !important;
    aspect-ratio: 39 / 34 !important;
  }
  img[src*="pxl_20240720_213744959.jpg"] {
    height: auto !important;
    aspect-ratio: 39 / 50 !important;
  }
  img[src*="group-speech.jpg"] {
    height: auto !important;
    aspect-ratio: 39 / 38 !important;
  }
  img[src*="js5_4407.jpg"] {
    height: auto !important;
    aspect-ratio: 39 / 44 !important;
  }
  img[src*="22222222.jpg"],
  img[src*="eec.jpg"],
  img[src*="angel-marie-monachelli-(@trainer-@event-energy-conductor)018.jpg"],
  img[src*="11111111-intro.jpg"] {
    height: auto !important;
    aspect-ratio: 39 / 31 !important;
  }
  img[src*="pxl_20251030_013246669.jpg"] {
    height: auto !important;
    aspect-ratio: 13 / 16 !important;
  }
  img[src*="leeza-gibbons.jpg"] {
    height: auto !important;
    aspect-ratio: 39 / 46 !important;
  }
}

@media (max-width: 900px) {
  .author-section {
    padding-top: 0;
  }
  .author-section div[style*="display: flex"][style*="flex-wrap: wrap"] {
    justify-content: center;
    width: 100%;
  }

  .author-image-box-flush {
    height: 420px;
    margin-top: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  .author-image-box-flush img {
    object-position: center 20%;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 100%);
  }
}