/* Reset and base */
:root{
  --bg-1:#080A16;
  --bg-2:#101126;
  --ivory:#FFF9EF;
  --gold-1:#DDA84A;
  --gold-2:#EAB85D;
  --lav:#C9B5FF;
  --violet:#7651A6;
  --accent:#8DC4E4;
  --accent-turquoise:#6FE6E1;
  --accent-purple:#C9B5FF;
  --accent-pink:#F6A9C1;
}

/* Landing page: pin the mobile toggle to the viewport so page animations cannot shift it
   Scoped to .bo-selector-page to avoid affecting other pages. */
@media (max-width: 900px) {
  .bo-selector-page .mobile-menu-toggle {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    left: auto !important;
    right: 16px !important;
    z-index: 1400 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Disable luminous button glow and hover transforms on narrow screens to avoid
   visual overflow that can shift the mobile menu toggle. Also ensure form and
   Calendly widgets center on small screens. */
@media (max-width: 900px) {
  .btn-luminous,
  .reveal-cta .btn-luminous,
  .inner-hero-content .btn-luminous {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
  }

  .btn-luminous:hover,
  .btn-luminous:active,
  .btn-luminous:focus {
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }

  /* Ensure Calendly inline widget and HubSpot form are centered and constrained
     to a sane max width on mobile so their internal chrome does not push layout. */
  .calendly-inline-widget,
  .content-section .calendly-inline-widget,
  .becoming-one-form-wrap,
  .hs-form-frame {
    width: 100% !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Give step panels slight horizontal padding on narrow screens so content
     sits centered against the edge of the viewport. */
  .step-panel {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Ensure the hamburger visuals do not inherit animations from landing-page ancestors.
   Only disable animations/transitions on descendants (do NOT change positioning of spans). */
@media (max-width: 900px) {
  .bo-selector-page .mobile-menu-toggle * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Also ensure portal/large-area animated pseudo-elements do not affect header
   by forcing those pseudo-elements to be inert when inside the header. */
@media (max-width: 900px) {
  .site-header .portal-transition::before,
  .site-header .portal-transition::after,
  .site-header .content-portal::before,
  .site-header .content-portal::after,
  .site-header .mmm-pillar__energy::before,
  .site-header .mmm-pillar__energy::after {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    content: none !important;
    display: none !important;
  }
}

/* Fixed-clone workaround removed from JS; do not rely on duplicate clone elements. */

/* Removed fixed-clone CSS: the clone workaround was removed from site.js.
   Keep a defensive rule directly on the real toggle to stop inherited
   animations from moving the entire control while preserving the open/close morph. */
@media (max-width: 900px) {
  .site-header .nav-shell .mobile-menu-toggle:not(.is-open) {
    /* prevent any idle animation/translation on the whole control */
    animation: none !important;
    transition: none !important;
    transform: none !important;
    left: auto !important;
    right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    will-change: auto !important;
    pointer-events: auto !important;
  }

  /* Ban pseudo-element energy waves on the toggle itself */
  .site-header .nav-shell .mobile-menu-toggle::before,
  .site-header .nav-shell .mobile-menu-toggle::after {
    content: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Strong override to ensure the real mobile toggle is fixed to the viewport
   on the landing page. This uses higher selector specificity to override
   later generic mobile rules that set the toggle to position: relative. */
@media (max-width: 900px) {
  body.bo-selector-page .site-header .nav-shell .mobile-menu-toggle {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: 16px !important;
    left: auto !important;
    width: 48px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3000 !important;
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
    pointer-events: auto !important;
    backface-visibility: hidden !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  body.bo-selector-page .site-header .nav-shell .mobile-menu-toggle span {
    transform: none !important;
    animation: none !important;
  }

  body.bo-selector-page .site-header .nav-shell .mobile-menu-toggle::before,
  body.bo-selector-page .site-header .nav-shell .mobile-menu-toggle::after {
    content: none !important;
    animation: none !important;
    display: none !important;
  }
}

/* Desktop vertical-spacing adjustments (target desktop widths only)
   - Move the Experience Becoming One group upward (heading + videos together)
   - Vertically center the comparison reveal block inside the comparison section
   - Nudge the final Miracle Maker tagline down by 2em
   - Vertically center the Vision block
   Scoped to desktop to avoid changing mobile behavior
*/
@media (min-width: 900px) {
  /* 1) EXPERIENCE BECOMING ONE: reduce top padding so heading+videos sit higher
     Old: .inner-hero-content padding-top: calc(var(--nav-height) + 4rem)
     New: smaller top padding so the group moves up and remains centered
  */
  .inner-hero-videos .inner-hero-content {
    /* keep content flex-centered but move group ~5-8% upward by reducing top padding */
    padding-top: calc(var(--nav-height) + 1.5rem);
    padding-bottom: 4rem;
    justify-content: center;
    align-items: center;
  }

  /* 2) EVERY PERSON IS UNIQUE (comparison reveal): vertically center the whole block
     Old: .inner-hero-comparison had large symmetric padding (6rem) and content sat near top
     New: center the inner content group within the section while keeping breathing room
  */
  .inner-hero-comparison {
    padding-top: 4rem; /* reduce global top/bottom padding to allow centering */
    padding-bottom: 4rem;
  }
  .inner-hero-comparison .inner-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically center the comparison grid + reveal block */
    align-items: center;
    padding-top: 0; /* let parent padding drive outer spacing */
    padding-bottom: 0;
  }

  /* 3) MIRACLE MAKER METHOD: move final tagline down by ~2em */
  .miracle-method .method-closing {
    margin-top: 2em;
  }

  /* 4) YOUR LIFE. YOUR VISION.: vertically center the group in its section */
  .inner-hero-vision {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .inner-hero-vision .inner-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* REMOVE any leftover temporary debug outlines injected by diagnostics */
.inner-hero-videos, .home-video-grid, .home-video-card, .short-video-frame, .short-video-frame iframe {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Side-specific translucent glass overlays so canvas animation remains visible but text is readable */
.cmp-left .cmp-content {
  background: linear-gradient(180deg, rgba(18,6,6,0.38), rgba(8,4,6,0.48));
  backdrop-filter: blur(6px);
}
.cmp-right .cmp-content {
  background: linear-gradient(180deg, rgba(6,8,18,0.38), rgba(12,8,28,0.46));
  backdrop-filter: blur(6px);
}

/* Strengthen gold headings for contrast */
.cmp-heading { color: #ffd28a; text-shadow: 0 3px 10px rgba(0,0,0,.65); }

/* Apply neon/glow treatment to other colored headings site-wide */
/* Targets classes that were used to color headings across pages */
.hero-gold,
.text-gold,
.meet-heading,
.glass-card h3,
[class*="glow-"] {
  background-image: linear-gradient(90deg, #fff3d9 0%, #ffd37a 25%, #7ef0de 50%, #caa4ff 75%, #ff9fc2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 12s ease-in-out infinite, neonPulse 6s ease-in-out infinite;
  font-weight:800;
  text-shadow:
    0 2px 6px rgba(0,0,0,.72),
    0 0 10px rgba(255,230,170,.12),
    0 0 24px rgba(170,110,230,.08);
  -webkit-text-stroke: 0.25px rgba(0,0,0,.18);
  /* larger impact sizing for headings */
  font-size: clamp(1.25rem, 3.2vw, 3.2rem);
}

/* Slightly reduce glow for eyebrow and very small headings if they use glow classes */
.eyebrow, .section-eyebrow { text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* Miracle Making Model branded text energy (reusable) */
.miracle-making-brand{
  position:relative;
  display:inline-block;
  isolation:isolate;
  color:#fff4fb;
  font-weight:700;
  -webkit-font-smoothing:antialiased;
  text-shadow:0 0 4px rgba(255,255,255,.95),0 0 10px rgba(255,130,220,.95),0 0 22px rgba(255,55,185,.8);
}
.miracle-making-brand::before,.miracle-making-brand::after{
  content:attr(data-text);
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  pointer-events:none;
  z-index:-1;
  color:transparent;
  filter:blur(4px);
  opacity:0.7;
  transform-origin:center;
}
.miracle-making-brand::before{
  color:#ff79cf;
  text-shadow:0 0 8px rgba(255,120,220,.9),0 0 20px rgba(255,50,180,.7);
  animation:miracleTextEnergy1 3.4s ease-out infinite;
}
.miracle-making-brand::after{
  color:#ff4fbf;
  text-shadow:0 0 6px rgba(255,100,210,.85),0 0 16px rgba(255,40,180,.6);
  animation:miracleTextEnergy2 4.1s ease-out infinite 1.6s;
}

@keyframes miracleTextEnergy1{
  0%{transform:scale(1);opacity:.62;filter:blur(3px)}
  40%{opacity:.28}
  100%{transform:scale(1.08);opacity:0;filter:blur(9px)}
}

@keyframes miracleTextEnergy2{
  0%{transform:scale(1);opacity:.58;filter:blur(3px)}
  45%{opacity:.22}
  100%{transform:scale(1.11);opacity:0;filter:blur(12px)}
}

@keyframes miracleTextGlow{
  0%,100%{text-shadow:0 0 4px rgba(255,255,255,.95),0 0 10px rgba(255,105,215,.8),0 0 20px rgba(255,40,180,.55),0 0 34px rgba(255,20,160,.30)}
  50%{text-shadow:0 0 5px rgba(255,255,255,1),0 0 14px rgba(255,120,225,1),0 0 28px rgba(255,45,185,.8),0 0 48px rgba(255,20,160,.45)}
}
.miracle-making-brand{
  animation:miracleTextGlow 3.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .miracle-making-brand::before,.miracle-making-brand::after{animation:none;opacity:.45}
  .miracle-making-brand{animation:none}
}

/* Removed global font-size bump — only .glass-card h3 will receive an increased size for impact. */


/* =========================================================
   BEGIN PAGE / FORM STYLING
   ========================================================= */

.begin-page {
    position: relative;
    min-height: 100svh;
    padding: calc(88px + 4rem) 5vw 6rem;
    background-image: linear-gradient(rgba(11, 8, 25, .30), rgba(11, 8, 25, .42)), url('/Images/begin-step1.webp.png');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}

.begin-shell { width: min(1120px, 100%); margin: 0 auto; }

.begin-heading { margin-bottom: 2rem; text-align: center; }

.begin-heading h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; color: #fff9ef; margin: 0; text-shadow: 0 0 14px rgba(255, 206, 115, .28), 0 3px 20px rgba(0,0,0,.30); }

.begin-heading p { color: rgba(255,249,239,.90); font-size: 1.15rem; }

.begin-form-panel { padding: clamp(1.5rem, 4vw, 3rem); border-radius: 28px; background: linear-gradient(135deg, rgba(15, 12, 31, .76), rgba(45, 27, 62, .58)); border: 1px solid rgba(255, 212, 130, .34); backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.28), 0 0 40px rgba(255,190,80,.08); }

.begin-form-panel label { display: block; margin-bottom: .55rem; color: #fff8ea; font-weight: 600; }

.begin-form-panel input, .begin-form-panel textarea, .begin-form-panel select { width: 100%; min-height: 52px; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(255, 215, 145, .22); background: rgba(9, 8, 22, .68); color: #fff9ef; padding: .9rem 1rem; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }

.begin-form-panel textarea { min-height: 130px; resize: vertical; }

.begin-form-panel input:focus, .begin-form-panel textarea:focus, .begin-form-panel select:focus { border-color: rgba(255, 207, 115, .82); background: rgba(15, 11, 31, .80); box-shadow: 0 0 0 3px rgba(230, 174, 73, .12), 0 0 20px rgba(255, 187, 70, .10); }

.begin-form-panel select option { background: #171226; color: #fff9ef; }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
.form-group { margin-bottom: 1.5rem; }

@media (max-width: 900px) {
    .home-hero { min-height: 100svh; background-position: 45% center; }
    .home-hero-content { padding-top: 100px; }
    .home-hero h1 { font-size: clamp(3.4rem, 15vw, 5.6rem); }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .begin-page { padding: calc(72px + 2.5rem) 1.25rem 4rem; background-attachment: scroll; }
}

/* Fix centering for Begin page on narrow screens: remove extra left offset and constrain inner panels */
@media (max-width: 900px) {
  .begin-shell { width: 100% !important; margin: 0 auto !important; padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box !important; }
  .two-step { gap: 1.25rem !important; }
  .glass-panel.step-panel { margin-left: auto !important; margin-right: auto !important; max-width: 980px; }
  .calendly-panel { margin-left: auto !important; margin-right: auto !important; }
  /* Ensure hero content is centered within available width */
  .begin-heading, .begin-heading .subhead, .begin-hero-copy { margin-left: auto !important; margin-right: auto !important; }
}

/* Specific fix: reset global .section full-bleed behavior inside Begin page
   The global .section rule sets width:100vw and negative margins to create
   full-bleed rows. When combined with page padding it can shift inner
   content left on mobile. Override only for Begin page so other sections
   keep their full-bleed behavior. */
@media (max-width: 900px) {
  .begin-page .section,
  .begin-page .section-content,
  .begin-page .section > .page-shell,
  .begin-page .section-content > .page-shell {
    width: auto !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  /* Ensure the top-level begin-page and its immediate shell are true viewport
     width with symmetric padding so nothing is clipped off-screen. */
  .begin-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    left: auto !important;
    transform: none !important;
  }

  /* Force any nested full-bleed elements to respect container sizing */
  .begin-page iframe,
  .begin-page .calendly-inline-widget,
  .begin-page .hs-form-frame,
  .begin-page .becoming-one-form-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* New mobile-only: left-align application + booking content and remove any ancestor overflow
   The global full-bleed .section technique plus viewport-based padding caused horizontal
   clipping on Begin. On small screens we treat the outer .begin-page as the full-width
   background and use an inner content wrapper (.begin-shell) for the 20px left padding.
   This aligns HubSpot and Calendly to the same left edge and prevents overflow. */
@media (max-width: 768px) {
  html, body { width: 100%; max-width: 100%; margin: 0; padding: 0; }

  /* Outer full-width background */
  .begin-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* safety net only */
  }

  /* Inner content wrapper with consistent 20px side padding */
  .begin-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* Ensure step panels and inner content don't exceed viewport */
  .two-step,
  .glass-panel.step-panel,
  .calendly-panel,
  .becoming-one-form-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* HubSpot form elements must not exceed their container */
  .begin-shell .hs-form-frame,
  .begin-shell .hbspt-form,
  .begin-shell .hbspt-form form,
  .begin-shell .hbspt-form fieldset,
  .begin-shell .hbspt-form .hs-form-field,
  .begin-shell .hbspt-form input,
  .begin-shell .hbspt-form select,
  .begin-shell .hbspt-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Calendly must fill its wrapper without creating overflow */
  .begin-shell .calendly-inline-widget,
  .begin-shell .calendly-inline-widget iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Prevent any ancestor pseudo/full-bleed elements from shifting layout */
  .begin-page * { transform: none !important; left: auto !important; right: auto !important; }
}
/* Ensure inner-hero backgrounds center their content on larger screens */
@media (min-width: 768px) {
  .inner-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .inner-hero .inner-hero-content {
    width: min(92%, 1100px);
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Narrow content sections should center their inner glass panels */
  .content-section .page-shell.narrow-content,
  .content-section.narrow-content .page-shell {
    display: flex;
    justify-content: center;
  }

  .content-section .glass-panel,
  .content-section .glass-panel.story-panel {
    text-align: center;
  }
}

/* Specific centering and styling for How We Help and Our Approach */
.inner-hero-tools .inner-hero-content,
.inner-hero-approach .inner-hero-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.section-heading { text-align:center; max-width:900px; margin:0 auto 2rem; }

.tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; align-items:start; justify-items:center; }
.glass-card { text-align:center; padding:1.25rem; }
.glass-card h3 { margin-top:0.25rem; margin-bottom:0.5rem; font-size:1.125rem; }

/* Miracle Maker Method styles */
.miracle-method .method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.miracle-method .method-card {
  background: linear-gradient(135deg, rgba(18,12,35,0.6), rgba(34,24,54,0.45));
  border: 1px solid rgba(255,200,120,0.08);
  padding: 1.25rem;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 30px rgba(200,150,90,0.04);
  color: var(--ivory);
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.miracle-method .method-card h3 { margin:0; font-size:1.125rem; }
.miracle-method .step-number {
  display:inline-block;
  font-weight:700;
  color:var(--gold-1);
  background: rgba(255,235,180,0.04);
  padding:6px 10px;
  border-radius:10px;
  font-size:0.95rem;
}
.miracle-method .step-sub { color: rgba(255,249,239,0.86); font-weight:600; }
.miracle-method .method-cta { text-align:center; margin-top:1.5rem; }
.miracle-method .method-closing { font-size:1.15rem; color:var(--ivory); font-weight:700; }

/* Vision section FAITH messaging emphasis tweaks */
.inner-hero-vision .hero-lead .hero-emphasis { background-image: linear-gradient(90deg, #ffd37a, #ffc6f0); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight:800; }
.inner-hero-vision .hero-emphasis--you { letter-spacing: 0.02em; }
/* Step payoff styling for Miracle Maker Method step 5 */
.miracle-method .step-payoff {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 200, 80, 0.14);
}
.miracle-method .step-payoff-line {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.4;
  color: rgba(255, 250, 240, 0.98);
}
.miracle-method .step-payoff .emph-gold {
  color: #ffd28a;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 14px rgba(255, 210, 138, 0.18);
}
.miracle-method .step-payoff-strong {
  display: block;
  margin-top: 0.35rem;
  font-weight: 800;
  letter-spacing: 0.1px;
  color: rgba(255, 252, 245, 0.99);
}

@media (max-width: 1100px) {
  .miracle-method .method-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .miracle-method .method-grid { grid-template-columns: 1fr; }
  .miracle-method .method-card { padding: 1rem; border-radius: 12px; }
}
@media (max-width: 600px) {
  .miracle-method .step-payoff { margin-top: 0.6rem; padding-top: 0.5rem; }
  .miracle-method .step-payoff-line { font-size: 0.98rem; line-height: 1.42; }
  .miracle-method .step-payoff-strong { margin-top: 0.3rem; font-size: 1rem; }
}

/* Method intro styling for brand impact */
.miracle-method .method-intro { max-width: 920px; margin: 0 auto 1.25rem; text-align: center; }
.miracle-method .method-intro-lead { font-size: 1.15rem; line-height: 1.4; color: var(--ivory); margin: 0 auto; max-width: 900px; font-weight: 600; }
.miracle-method .method-intro-lead .hero-emphasis { color: var(--ivory); background-image: linear-gradient(90deg, #ffd37a, #7ef0de); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight:800; }

/* Comparison section styling */
.inner-hero-comparison { padding: 6rem 0; position: relative; overflow: visible; }
/* removed left-biased inner-hero-comparison rule to allow unified centered hero content */
.inner-hero-comparison .comparison-setup { max-width: 880px; margin: 0.5rem 0 1.5rem; color: rgba(255,249,239,0.92); font-size: 1.05rem; }
.comparison-grid { display: grid; grid-template-columns: 1fr 42px 1fr; gap: 1.5rem; align-items: stretch; margin-top: 1.5rem; }
.cmp-panel {
  /* Translucent glass so canvas animation remains visible underneath */
  background: linear-gradient(180deg, rgba(8,8,18,.22), rgba(8,8,18,.36));
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(255,215,120,0.06);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 20px rgba(255,160,70,0.04);
  color: var(--ivory);
}
.cmp-left { 
  /* Dark fractured cosmic hell base (rich layered reds/purples) -- simplified */
  background:
    radial-gradient(800px 260px at 78% 18%, rgba(255,40,10,0.08), transparent 20%),
    radial-gradient(600px 220px at 40% 78%, rgba(130,10,40,0.06), transparent 22%),
    linear-gradient(180deg, #05030a 0%, #130016 20%, #2b071c 44%, #4b081f 68%, #7c1128 86%, #b51d26 100%);
  position:relative;
}

/* Hell flames: layered soft radial gradients animated to suggest a flame field */
.cmp-left::before,
.cmp-left::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: screen;
  filter: blur(28px);
}
.cmp-left::before {
  background-image:
    radial-gradient(120% 60% at 10% 90%, rgba(122,0,20,0.95), transparent 35%),
    radial-gradient(80% 40% at 30% 78%, rgba(194,13,36,0.86), transparent 34%),
    radial-gradient(60% 30% at 58% 88%, rgba(255,50,22,0.78), transparent 36%),
    radial-gradient(40% 24% at 80% 82%, rgba(255,106,0,0.68), transparent 40%);
  transform-origin: center bottom;
  animation: flame-1 4.2s ease-in-out infinite;
  opacity: 0.95;
}
.cmp-left::after {
  background-image:
    radial-gradient(100% 48% at 22% 88%, rgba(255,173,32,0.58), transparent 36%),
    radial-gradient(70% 34% at 48% 82%, rgba(255,215,106,0.44), transparent 38%),
    radial-gradient(60% 28% at 70% 86%, rgba(200,20,30,0.36), transparent 40%);
  filter: blur(18px);
  transform-origin: center bottom;
  animation: flame-2 3.4s ease-in-out infinite;
  opacity: 0.86;
}

@keyframes flame-1 {
  0% { transform: translateY(6%) scaleY(0.92) scaleX(1); }
  50% { transform: translateY(-3%) scaleY(1.08) scaleX(1.03); }
  100% { transform: translateY(6%) scaleY(0.92) scaleX(1); }
}
@keyframes flame-2 {
  0% { transform: translateY(4%) scaleY(0.96) scaleX(0.99) skewX(-1deg); }
  50% { transform: translateY(-2%) scaleY(1.06) scaleX(1.02) skewX(1deg); }
  100% { transform: translateY(4%) scaleY(0.96) scaleX(0.99) skewX(-1deg); }
}

/* subtle inner glow on card border from internal fire */
.cmp-left { box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 -12px 40px rgba(196,40,40,0.06); }
.cmp-right { 
  /* Luminous celestial heaven base -- simplified */
  background:
    radial-gradient(700px 240px at 12% 22%, rgba(240,250,255,0.08), transparent 20%),
    radial-gradient(900px 300px at 86% 68%, rgba(200,220,255,0.04), transparent 26%),
    linear-gradient(180deg, #091d3a 0%, #0c4f72 22%, #119bb0 46%, #58dbe4 66%, #90dfff 82%, #bfa9ff 94%, #ffe4ad 100%);
  border: 1px solid rgba(255,240,200,0.04);
  position:relative;
}
.cmp-heading { font-size: 1.15rem; font-weight:800; margin:0 0 .35rem; position:relative; z-index:6; }
.cmp-sub { color: rgba(255,249,239,0.92); margin:0 0 1rem; font-weight:600; position:relative; z-index:6; }
.cmp-rows { display:flex; flex-direction:column; gap: 1rem; position:relative; z-index:6; padding: 1.25rem 1.5rem 2rem; flex: 1 1 auto; }
.cmp-row { display:flex; gap: .85rem; align-items:flex-start; }
.cmp-title { font-weight:700; min-width: 220px; color: var(--gold-2); }
.cmp-text { color: rgba(255,249,239,0.96); line-height:1.3; }
.cmp-emphasis { margin-top: 1.25rem; font-weight:800; color: var(--ivory); font-size:0.95rem; text-transform:uppercase; letter-spacing: .6px; }
.comparison-divider { width: 72px; display:flex; align-items:center; justify-content:center; position:relative; }
.comparison-divider .portal-core { width: 44px; height: 240px; border-radius: 999px; transform: translateY(0); position:relative; z-index:8; }
/* Hide the rainbow/multi-color portal on desktop; keep minimal transition canvas if needed on mobile */
@media (min-width: 900px) {
  .comparison-divider { display: block; }
  .comparison-divider .portal-core { display: none; }
  .cmp-canvas-transition { display: none !important; }
}
.comparison-reveal { margin-top: 2rem; text-align:center; padding: 2.2rem 1.2rem; border-radius: 14px; background: linear-gradient(180deg, rgba(255,246,230,0.03), rgba(255,246,230,0.01)); border: 1px solid rgba(255,240,200,0.04); box-shadow: 0 24px 80px rgba(120,90,200,0.06), inset 0 0 60px rgba(255,220,120,0.02); }

/* Background layers for hell side */

/* Remove old decorative backgrounds - replaced by canvas-based visuals */
.cmp-bg-hell, .cmp-bg-heaven, .hell-glow, .hell-smoke, .nebula-blob, .nebula-1, .nebula-2 { display: none !important; }

/* Canvas particle layers */
.cmp-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.cmp-canvas-fire, .cmp-canvas-cosmic, .cmp-canvas-transition { position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }

.cmp-canvas-fire, .cmp-canvas-cosmic, .cmp-canvas-transition { mix-blend-mode: normal !important; }
.cmp-canvas-cosmic { mix-blend-mode: normal !important; }
.cmp-canvas-transition { mix-blend-mode: normal !important; }

/* Heaven background: DOM/CSS nebula + stars (replaces previous canvas cosmic)
   Structure injected into .cmp-right as .heaven-bg with .heaven-stars layer
*/
.cmp-right { position:relative; overflow:visible; }
.cmp-right .heaven-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; overflow:hidden;
  /* richer nebula palette: multiple large soft radial glows over deep-space base */
  background-image:
    radial-gradient(circle at 12% 26%, rgba(0,217,217,0.22), transparent 36%), /* turquoise */
    radial-gradient(circle at 82% 22%, rgba(125,77,255,0.20), transparent 36%), /* violet */
    radial-gradient(circle at 28% 78%, rgba(217,92,255,0.14), transparent 40%), /* pink-magenta */
    radial-gradient(circle at 72% 82%, rgba(33,230,255,0.16), transparent 38%), /* cyan-blue */
    radial-gradient(circle at 50% 6%, rgba(255,154,219,0.10), transparent 32%), /* soft pink highlight */
    linear-gradient(180deg, #03152d 0%, #082b4a 30%, #17123d 62%, #251044 100%);
  background-blend-mode: screen, screen, screen, screen, screen, normal;
}
.cmp-right .heaven-bg::after{
  content:''; position:absolute; inset:10% 6% 8% 6%; border-radius:inherit; pointer-events:none;
  /* darker reading zone center to preserve text readability */
  background: radial-gradient(ellipse at center, rgba(4,6,14,0.30), rgba(6,8,18,0.50));
  mix-blend-mode: multiply; z-index:1;
}

.cmp-right .heaven-stars { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.cmp-right .heaven-star { position:absolute; display:block; border-radius:50%; background: #fff; pointer-events:none; transform-origin:center center; box-shadow: 0 0 4px rgba(255,255,255,0.06); }
.cmp-right .heaven-star.small { width:1px; height:1px; background: rgba(220,240,255,0.95); }
.cmp-right .heaven-star.med { width:2px; height:2px; background: linear-gradient(180deg, #fff, #e6e6ff); }
.cmp-right .heaven-star.hero { width:3px; height:3px; background: #fff; box-shadow: 0 0 8px rgba(255,250,220,0.18), 0 0 14px rgba(170,140,255,0.06); }
.cmp-right .heaven-star.tint-cyan { box-shadow: 0 0 6px rgba(33,230,255,0.18); }
.cmp-right .heaven-star.tint-lav { box-shadow: 0 0 6px rgba(180,160,255,0.14); }
.cmp-right .heaven-star.tint-pink { box-shadow: 0 0 6px rgba(255,110,200,0.12); }

@keyframes heaven-twinkle {
  0% { opacity: 0.22; transform: scale(0.85); }
  50% { opacity: 0.95; transform: scale(1.42); }
  100% { opacity: 0.36; transform: scale(0.92); }
}

/* planet and mote styles */
.cmp-right .heaven-planet { position:absolute; z-index:1; border-radius:50%; pointer-events:none; opacity:0.18; filter: blur(6px); mix-blend-mode: screen; }
.cmp-right .heaven-planet.planet-a { background: radial-gradient(circle at 30% 30%, rgba(0,217,217,0.9), rgba(47,124,255,0.85) 30%, rgba(12,32,80,0.6) 70%); }
.cmp-right .heaven-planet.planet-b { background: radial-gradient(circle at 30% 30%, rgba(168,77,255,0.9), rgba(217,92,255,0.8) 30%, rgba(30,12,50,0.6) 70%); }
.cmp-right .heaven-planet.planet-c { background: radial-gradient(circle at 30% 30%, rgba(150,130,255,0.9), rgba(200,240,255,0.6) 30%, rgba(10,12,40,0.6) 70%); }
.cmp-right .heaven-planet { transform-origin:center; }

.cmp-right .heaven-mote { position:absolute; z-index:2; border-radius:50%; pointer-events:none; filter: blur(6px); opacity:0.12; }

@keyframes heaven-planet-drift { 0%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(6px,-4px,0) scale(1.01);} 100%{ transform: translate3d(0,0,0) scale(1); } }
@keyframes heaven-mote-drift { 0%{ transform: translate3d(0,0,0) } 50%{ transform: translate3d(-8px,6px,0) } 100%{ transform: translate3d(0,0,0) } }

/* subtle planet styling */
.cmp-right .heaven-planet { position:absolute; z-index:0; border-radius:50%; pointer-events:none; opacity:0.18; filter: blur(6px); mix-blend-mode: screen; }
.cmp-right .heaven-planet::before{ content:''; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 30% 25%, rgba(220,240,255,0.9), rgba(120,180,255,0.24) 30%, rgba(20,10,40,0) 70%); }

/* ensure content sits above heaven background */
.cmp-right .cmp-content { position:relative; z-index:3; }

/* Ensure textual content sits above backgrounds */
.cmp-content { position:relative; z-index:6; padding: 1.25rem 1.5rem 2rem; }
.reveal-head { font-weight:800; color:var(--ivory); margin:0 0 .5rem; }
.reveal-copy { color: rgba(255,249,239,0.9); margin:0 0 .75rem; }
.reveal-cta-lines { color: var(--gold-1); font-weight:800; margin: 0 0 1rem; }
.reveal-cta .btn-luminous { display:inline-block; padding: .95rem 1.6rem; border-radius: 12px; font-weight:800; }

/* Mobile: stack panels and pair rows */
@media (max-width: 900px) {
  .comparison-grid { grid-template-columns: 1fr; gap: 1rem; }
  .comparison-divider { display:none; }
  .cmp-row { flex-direction: column; }
  .cmp-title { min-width: 0; color: var(--gold-2); }
  .inner-hero-comparison .inner-hero-content { text-align: center; }
  .cmp-panel { padding: 1rem; }
  .comparison-reveal { padding: 1.25rem; }
}

/* Mobile fix: keep heart icon and text on same line for heaven (right) panel
   The generic .cmp-row is column on small screens for layout elsewhere; override only for .cmp-right
*/
@media (max-width: 900px) {
  .cmp-right .cmp-row {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .cmp-right .cmp-icon {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    line-height: 1.3;
    margin-top: 0.08em;
    text-align: center;
    display: inline-block;
  }
  .cmp-right .cmp-text {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Mirror the working right-side (heart) layout for left-side (X) bullets on mobile */
@media (max-width: 900px) {
  .cmp-left .cmp-row {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .cmp-left .cmp-icon {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    line-height: 1.3;
    margin-top: 0.08em;
    text-align: center;
    display: inline-block;
  }
  .cmp-left .cmp-text {
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (max-width: 900px) {
  /* Mobile: allow heaven (right) panel to size to content and avoid any clipping
     Keep decorative heaven-bg absolutely positioned and clipped, but ensure
     the panel and content wrappers are in normal flow with visible overflow.
  */
  .cmp-right {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 32px; /* comfortable breathing room for last bullet */
  }

  .cmp-right .cmp-content,
  .cmp-right .cmp-rows {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .cmp-right {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .cmp-right .cmp-content {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 2.25rem;
  }
  .cmp-right .cmp-rows {
    padding-bottom: 2.4rem;
  }
  .cmp-right .heaven-bg {
    overflow: hidden;
  }
}
.miracle-method .method-intro-punch { margin-top: 0.9rem; font-size: 1.05rem; font-weight:700; letter-spacing: -0.2px; color: var(--ivory); text-shadow: 0 2px 10px rgba(170,110,230,0.06); }

@media (max-width: 900px) {
  .miracle-method .method-intro-lead { font-size: 1rem; }
  .miracle-method .method-intro-punch { font-size: 1rem; }
}

/* Add luminous neon gradient and glow to card headings for legibility */
.glass-card h3 {
  background-image: linear-gradient(90deg, #fff3d9 0%, #ffd37a 25%, #7ef0de 50%, #caa4ff 75%, #ff9fc2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 12s ease-in-out infinite, neonPulse 6s ease-in-out infinite;
  font-weight:800;
  /* Increased only the tool-grid headings (e.g., Hypnosis) for impact — responsive sizing */
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height:1.12;
  /* layered white glow to make text readable over imagery */
  text-shadow:
    0 2px 6px rgba(255,255,255,.06),
    0 0 10px rgba(255,245,220,.12),
    0 0 24px rgba(170,110,230,.08);
  -webkit-text-stroke: 0.25px rgba(0,0,0,.18);
  opacity:0.98;
  transition:transform .18s ease, text-shadow .18s ease;
}

@keyframes neonPulse {
  0%,100%{
    text-shadow: 0 2px 6px rgba(255,255,255,.06), 0 0 6px rgba(255,245,220,.08), 0 0 14px rgba(170,110,230,.04);
    transform:translateY(0);
  }
  50%{
    text-shadow: 0 2px 6px rgba(255,255,255,.06), 0 0 12px rgba(255,235,180,.14), 0 0 30px rgba(170,110,230,.12);
    transform:translateY(-1px);
  }
}

/* Transformation path: center and style steps */
.transformation-path { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.transformation-path .path-step { width: min(520px,100%); }
.transformation-path .path-step h3 { margin:0 0 .5rem; }
.path-arrow { font-size:2rem; color:rgba(255,249,239,.5); }

@media(min-width:900px){
  .transformation-path { flex-direction:row; align-items:flex-start; justify-content:center; gap:2rem; }
  .transformation-path .path-arrow { align-self:center; }
  .transformation-path .path-step { width:220px; }
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:var(--ivory);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

/* Container helpers */
.section{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.inner{max-width:1200px;margin:0 auto;padding:2rem}

/* --- Navigation (custom) --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background .3s ease, box-shadow .3s ease;
}

.site-nav {
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(12, 8, 28, .72),
        rgba(12, 8, 28, .16)
    );
    backdrop-filter: blur(8px);
}

.nav-shell {
    width: min(94%, 1420px);
    min-height: 88px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.brand-logo {
    color: #f6d58c;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    letter-spacing: .18em;
    white-space: nowrap;
    text-shadow: 0 0 18px rgba(255, 196, 90, .2);
}

/* --- Main navigation responsive behavior --- */
.main-navigation{display:flex;align-items:center;gap:1.25rem}
.main-navigation a{color:var(--ivory);padding:.45rem .7rem;border-radius:8px}
.nav-journey-button{background:transparent;border:1px solid rgba(233,190,120,.12);padding:.5rem .9rem;border-radius:999px}

@media(max-width:900px){
  .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:44px;background:transparent;border:0;color:var(--ivory);cursor:pointer;z-index:1200;position:relative !important;left:0 !important;transform:none !important;animation:none !important;transition:none !important}
  .mobile-menu-toggle span{display:block;width:22px;height:2px;background:var(--ivory);margin:4px 0;border-radius:2px}

  .main-navigation{position:fixed;left:0;right:0;top:88px;display:flex;flex-direction:column;gap:0;padding:1rem;background:linear-gradient(180deg,rgba(8,7,20,.98),rgba(8,7,20,.98));transform:translateY(-120%);transition:transform .28s ease;backdrop-filter:blur(6px);z-index:1100}
  .main-navigation a{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.02)}
  .main-navigation.open,.main-navigation.is-open{transform:translateY(0)}
}

/* hero video */
.home-hero{position:relative;min-height:88vh;display:flex;align-items:center}
.home-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(1) saturate(1.02);mix-blend-mode:normal}
.home-hero-content{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;width:100%;padding:8rem 2rem}
.home-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,28,.02),rgba(12,8,28,.07));z-index:1}
.home-hero-indicator{position:relative;z-index:4;text-align:center;font-size:2.5rem;color:rgba(255,249,239,.7);margin-top:1rem}

/* Audience page hero size adjustments (reduce oversized headline for women/men pages) */
.home-hero.women-page .hero-title,
.home-hero.men-page .hero-title{
  font-size:clamp(2.6rem,4.4vw,4.8rem);
  line-height:1.06;
  max-width:1000px;
  margin-inline:auto;
  text-align:center;
}
.home-hero.women-page .inner-hero-content .hero-lead,
.home-hero.men-page .inner-hero-content .hero-lead{
  text-align:center;
  max-width:900px;
  margin-inline:auto;
}

/* Journey hero CTA group (vertical, centered) */
.journey-hero__content{width:min(1050px,92vw);margin-inline:auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.journey-hero__cta{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin-top:clamp(28px,4vh,46px);text-align:center}
.journey-hero__button{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.8rem;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));color:var(--ivory);text-decoration:none;font-weight:800;letter-spacing:.06em;border:0;min-width:240px}
.journey-hero__cta-note{margin-top:16px;text-align:center;font-size:clamp(.9rem,1.15vw,1rem);line-height:1.45;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.94);text-shadow:0 2px 8px rgba(0,0,0,.7)}

/* Ensure no legacy layout rules keep CTA beside button */
.inner-hero-content .btn-luminous{display:inline-flex;justify-content:center}

/* Center major cinematic/content sections on audience pages */
.audience-page .page-shell.inner-hero-content,
.audience-page .method-content,
.audience-page .method-intro,
.audience-page .method-steps,
.audience-page .inner-hero-content,
.audience-page .home-feature-videos .inner-hero-content{
  text-align:center;
}
.audience-page .page-shell.inner-hero-content > *{margin-inline:auto;max-width:1100px}
.audience-page .btn-luminous,
.audience-page .primary-cta,
.audience-page .reveal-cta,
.audience-page .hero-cta{display:inline-flex;align-items:center;justify-content:center}
.cta-wrapper{display:flex;justify-content:center;align-items:center}

/* Miracle Making Method pillars */
.mmm-pillar{position:relative;border-radius:28px;overflow:hidden;backdrop-filter:blur(14px);background:rgba(12,10,22,0.48);border:1px solid rgba(255,255,255,0.04);padding:34px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:18px;min-height:220px}
.mmm-pillar__energy{position:absolute;inset:0;pointer-events:none;z-index:0}
.mmm-pillar__energy::before,.mmm-pillar__energy::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;filter:blur(26px);opacity:.65}
.mmm-pillar__energy::before{width:min(900px,80%);height:min(400px,70%);background:radial-gradient(circle at var(--energy-x,50%) var(--energy-y,50%),rgba(var(--pillar-rgb,200,100,200),.28),transparent 40%);animation:mmmEnergyDrift 12s linear infinite}
.mmm-pillar__energy::after{width:calc(min(900px,80%)*.7);height:calc(min(400px,70%)*.7);background:radial-gradient(circle at var(--energy-x,50%) var(--energy-y,50%),rgba(var(--pillar-rgb,200,100,200),.20),transparent 40%);animation:mmmEnergyDriftAlt 18s linear infinite;opacity:.5}
.mmm-pillar__content{position:relative;z-index:2;text-align:center;max-width:800px;margin-inline:auto}
.mmm-pillar__number{font-weight:700;letter-spacing:.14em;font-size:.95rem;color:rgba(255,255,255,.85)}
.mmm-pillar h3{margin:.25rem 0 .5rem;font-size:clamp(1.25rem,2.1vw,1.65rem)}
.mmm-pillar p{color:rgba(255,255,255,.92);line-height:1.6}

/* Pillar color variables for 6 pillars (interpolate across color progression) */
.mmm-pillar--1{--pillar-rgb:255,79,191}
.mmm-pillar--2{--pillar-rgb:218,79,255}
.mmm-pillar--3{--pillar-rgb:155,92,255}
.mmm-pillar--4{--pillar-rgb:101,92,255}
.mmm-pillar--5{--pillar-rgb:51,140,255}
.mmm-pillar--6{--pillar-rgb:34,197,223}

@keyframes mmmEnergyDrift{0%{transform:translate(-50%,-50%) scale(.98);opacity:.72}50%{transform:translate(-48%,-52%) scale(1.02);opacity:.9}100%{transform:translate(-50%,-50%) scale(.98);opacity:.72}}
@keyframes mmmEnergyDriftAlt{0%{transform:translate(-50%,-50%) scale(.94) rotate(6deg);opacity:.55}50%{transform:translate(-52%,-48%) scale(1.06) rotate(-6deg);opacity:.78}100%{transform:translate(-50%,-50%) scale(.94) rotate(6deg);opacity:.55}}

/* Responsive pillar layout */
.method-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.audience-page .method-steps{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.method-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.method-steps{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.mmm-pillar__energy::before,.mmm-pillar__energy::after{animation:none;opacity:.45}.miracle-making-brand{animation:none}.miracle-making-brand::before,.miracle-making-brand::after{animation:none}}

@media (max-width:900px){.home-hero{min-height:72vh}.home-hero-content{padding-top:90px;padding-bottom:60px}}

/* ==========================
   PORTAL TRANSITION
   ========================== */
.portal-transition{position:relative;height:clamp(160px,18vw,280px);margin-top:-70px;margin-bottom:-70px;z-index:5;overflow:visible;pointer-events:none}
.portal-transition::before,.portal-transition::after,.portal-transition__core{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.portal-transition::before{width:min(85vw,1100px);aspect-ratio:2.4/1;background:radial-gradient(ellipse at center,rgba(255,255,255,.46) 0%,var(--p-gold,rgba(240,215,150,.30)) 10%,var(--p-teal,rgba(75,235,220,.26)) 26%,rgba(64,177,190,.20) 38%,var(--p-violet,rgba(145,79,205,.24)) 54%,var(--p-pink,rgba(235,94,180,.18)) 66%,rgba(15,10,36,0) 80%);filter:blur(20px);opacity:.95}
.portal-transition::after{width:min(74vw,900px);aspect-ratio:2.1/1;background:conic-gradient(from 0deg,rgba(255,220,150,.08),rgba(58,224,211,.38),rgba(116,86,214,.34),rgba(238,89,188,.31),rgba(255,215,135,.14),rgba(58,224,211,.38));mask:radial-gradient(ellipse at center,transparent 0%,transparent 34%,#000 48%,#000 63%,transparent 75%);-webkit-mask:radial-gradient(ellipse at center,transparent 0%,transparent 34%,#000 48%,#000 63%,transparent 75%);filter:blur(3px) drop-shadow(0 0 22px rgba(62,220,211,.22)) drop-shadow(0 0 34px rgba(202,79,223,.20));animation:portalSpin 26s linear infinite;opacity:.82}
.portal-transition__core{width:min(54vw,650px);aspect-ratio:2.2/1;background:radial-gradient(ellipse at center,rgba(255,255,255,.58) 0%,var(--p-gold,rgba(255,222,170,.28)) 15%,var(--p-teal,rgba(73,222,215,.28)) 32%,var(--p-violet,rgba(125,84,205,.22)) 49%,var(--p-pink,rgba(225,99,194,.15)) 60%,rgba(20,12,45,0) 77%);filter:blur(18px);box-shadow:0 0 45px rgba(64,220,210,.22),0 0 90px rgba(155,74,220,.18),0 0 120px rgba(239,96,186,.10);animation:portalBreathe 6s ease-in-out infinite}
@keyframes portalSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes portalBreathe{0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.68}50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}}

/* light streams */
.portal-transition .portal-transition__core::before,.portal-transition .portal-transition__core::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(130,235,225,.28);box-shadow:0 0 18px rgba(90,220,215,.20);transform:rotate(-8deg)}
.portal-transition .portal-transition__core::after{inset:22%;border-color:rgba(225,115,218,.25);box-shadow:0 0 20px rgba(220,90,208,.17);transform:rotate(14deg)}

/* cinematic section edge blending */
.cinematic-section{position:relative;isolation:isolate}
.cinematic-section::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:170px;pointer-events:none;background:linear-gradient(to bottom,rgba(10,8,24,0) 0%,rgba(45,35,65,.06) 25%,rgba(44,133,145,.08) 46%,rgba(122,62,155,.10) 65%,rgba(13,9,28,.46) 100%);z-index:3}

/* variations */
.portal-transition--gold{--p-gold:rgba(255,220,150,.32);--p-teal:rgba(78,220,200,.22);--p-violet:rgba(155,90,210,.20);--p-pink:rgba(240,120,200,.18)}
.portal-transition--teal{--p-gold:rgba(255,235,200,.18);--p-teal:rgba(58,224,211,.36);--p-violet:rgba(115,86,214,.20);--p-pink:rgba(230,98,185,.12)}
.portal-transition--violet{--p-gold:rgba(245,210,160,.12);--p-teal:rgba(70,200,190,.16);--p-violet:rgba(150,80,220,.34);--p-pink:rgba(225,90,190,.16)}
.portal-transition--pink{--p-gold:rgba(255,210,150,.14);--p-teal:rgba(80,200,190,.14);--p-violet:rgba(200,90,180,.22);--p-pink:rgba(245,110,200,.28)}

@media(max-width:767px){.portal-transition{height:140px;margin-top:-45px;margin-bottom:-45px}.portal-transition::before{filter:blur(14px)}.portal-transition__core{filter:blur(10px)}}
@media(prefers-reduced-motion:reduce){.portal-transition::after,.portal-transition__core{animation:none!important}}

/* -------------------------
   CONTENT PORTAL (smaller backdrop variant)
   Reuses visual language from .portal-transition but tuned for text backgrounds
   ------------------------- */
.portal-content-section{position:relative;overflow:hidden;isolation:isolate}
.portal-content-section > .section-content,.portal-content-section > .page-shell{position:relative;z-index:2}
.content-portal{position:absolute;z-index:0;pointer-events:none;width:min(900px,90vw);aspect-ratio:1.8/1;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);border-radius:50%;opacity:.52;filter:blur(8px)}
.content-portal::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,246,218,.44) 0%,rgba(236,196,113,.26) 12%,rgba(61,225,216,.22) 28%,rgba(52,177,191,.18) 40%,rgba(135,78,203,.21) 55%,rgba(229,87,190,.17) 68%,rgba(18,10,42,0) 82%);box-shadow:0 0 50px rgba(65,220,213,.18),0 0 90px rgba(142,73,211,.14),0 0 120px rgba(228,87,185,.08)}
.content-portal::after{content:"";position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from 45deg,rgba(255,222,150,.05),rgba(58,225,213,.25),rgba(116,80,209,.22),rgba(230,91,190,.21),rgba(255,215,135,.08),rgba(58,225,213,.25));mask:radial-gradient(ellipse at center,transparent 0%,transparent 36%,#000 48%,#000 60%,transparent 73%);-webkit-mask:radial-gradient(ellipse at center,transparent 0%,transparent 36%,#000 48%,#000 60%,transparent 73%);filter:blur(2px);animation:portalContentSpin 32s linear infinite}
.content-portal__core{position:absolute;width:44%;aspect-ratio:1.5/1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,245,.58),rgba(247,213,144,.26) 26%,rgba(75,221,214,.13) 48%,rgba(132,82,204,.08) 66%,transparent 80%);filter:blur(16px);animation:portalContentBreathe 7s ease-in-out infinite}
@keyframes portalContentSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes portalContentBreathe{0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.68}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}

/* Modifiers */
.content-portal--left{left:30%;transform:translate(-30%,-50%) rotate(-6deg)}
.content-portal--right{left:70%;transform:translate(-70%,-50%) rotate(-6deg)}
.content-portal--center{left:50%;transform:translate(-50%,-50%) rotate(-6deg)}
.content-portal--large{width:min(1200px,110vw);opacity:.42}
.content-portal--soft{opacity:.30;filter:blur(12px)}

@media(max-width:768px){.content-portal{width:130vw;opacity:.34}.content-portal::after{animation-duration:40s}}
@media(prefers-reduced-motion:reduce){.content-portal::after,.content-portal__core{animation:none!important}}


/* -------------------------
   MEET HOLLIE & JOHNNY (image-driven layout)
   ------------------------- */
.meet-section{position:relative;width:100%;overflow:hidden;isolation:isolate;background:#171028}
.meet-section-background{position:relative;display:block;width:100%;height:auto;object-fit:contain;object-position:center;z-index:0}
.meet-section-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(14,8,27,0) 0%,rgba(14,8,27,0) 42%,rgba(23,12,36,.25) 55%,rgba(19,9,29,.48) 100%)}
.meet-section-content{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;width:min(94%,1420px);margin:0 auto;left:50%;transform:translateX(-50%);padding:clamp(2rem,4vw,5rem) 0;box-sizing:border-box}
.meet-copy{width:min(43%,590px);max-height:calc(100% - 4rem);padding:clamp(1.4rem,2.4vw,2.5rem);overflow:visible;background:linear-gradient(135deg,rgba(30,16,40,.60),rgba(69,36,60,.48));border:1px solid rgba(255,214,140,.30);border-radius:26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 70px rgba(0,0,0,.22),0 0 35px rgba(238,178,85,.08)}
.meet-copy h2{margin:.35rem 0 clamp(.8rem,1.5vw,1.4rem);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(2rem,3.3vw,3.8rem);line-height:.98;color:#fff8e9}
.meet-copy p{margin:0 0 1rem;font-size:clamp(.93rem,1.15vw,1.12rem);line-height:1.55;color:rgba(255,249,239,.93)}
.meet-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}

/* Position the text panel toward the right while keeping it within image vertical bounds */
@media(min-width:1100px){
    .meet-section-content{justify-content:flex-end}
    .meet-copy{width:420px;margin-right:4vw}
}

@media(min-width:768px) and (max-width:1099px){
    .meet-section-content{justify-content:flex-end}
    .meet-copy{width:36%;margin-right:3vw}
}

/* Mobile stacked layout: copy below the artwork */
@media(max-width:850px){
    .meet-section{overflow:visible}
    .meet-section-background{width:100%;height:auto}
    .meet-section-shade{background:linear-gradient(to bottom,transparent 0%,rgba(16,9,30,.10) 65%,rgba(16,9,30,.75) 100%)}
    .meet-section-content{position:relative;inset:auto;left:auto;transform:none;width:100%;padding:0 1.25rem 3rem;margin-top:-2rem;display:block}
    .meet-copy{width:min(100%,680px);max-height:none;margin:0 auto;padding:1.5rem}
    .meet-copy h2{font-size:clamp(2.2rem,10vw,3.5rem)}
    .meet-actions{flex-direction:column}
    .meet-actions a{width:100%;text-align:center}
}

/* Make sure portal transitions (if present) sit below the meet content */
.meet-section{z-index:6}
.meet-section .portal-transition{z-index:4}



.brand-logo span { color: #fff7e8; }
/* PORTAL_CSS_INSERT_POINT: baseline file update (no-op) */

.main-navigation {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.main-navigation > a {
    color: rgba(255, 249, 239, .92);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    transition: color .2s ease, text-shadow .2s ease;
    white-space: nowrap;
}

.main-navigation > a:hover {
    color: #f4c76d;
    text-shadow: 0 0 12px rgba(244, 199, 109, .4);
}

.nav-journey-button {
    padding: .75rem 1.15rem;
    border: 1px solid rgba(255, 213, 133, .68);
    border-radius: 999px;
    background: rgba(234, 181, 91, .10);
    box-shadow: 0 0 20px rgba(255, 190, 80, .10);
}

.mobile-menu-toggle { display: none; }

@media (max-width: 900px) {
    .mobile-menu-toggle {
        display: flex;
        width: 44px;
        height: 44px;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .mobile-menu-toggle span { width: 26px; height: 2px; background: #f4c66f; display:block; }

    .main-navigation {
        display: none;
        position: absolute;
        top: 72px;
        left: 4%;
        right: 4%;
        flex-direction: column;
        align-items: stretch;
        padding: 1.4rem;

        background: rgba(10, 8, 24, .94);
        border: 1px solid rgba(255,210,130,.20);
        border-radius: 18px;
        backdrop-filter: blur(18px);
    }

    .main-navigation.is-open { display: flex; }

    .main-navigation > a { padding: .7rem .2rem; }

    .nav-shell { min-height: 72px; }
}

/* --- Hero --- */
.home-hero {
  position: relative;
  min-height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;

  background-image:
    linear-gradient(90deg, rgba(16, 9, 32, .52) 0%, rgba(16, 9, 32, .22) 42%, rgba(16, 9, 32, .04) 75%),
    url('/Images/hero.webp.png');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.home-hero-content {
  position: relative;
  z-index: 3;
  width: min(92%, 1380px);
  margin: 0 auto;
  padding-top: 110px;
  text-align: center; /* center hero copy */
}

.home-hero-copy { max-width: 760px; }

/* =========================================================
   SUBTLE ACCENT ANIMATIONS FOR TEXT
   ========================================================= */

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glowPulse {
  0% { text-shadow: 0 0 6px rgba(127,200,255,0.06), 0 0 18px rgba(201,181,255,0.03); }
  50% { text-shadow: 0 0 10px rgba(127,200,255,0.12), 0 0 28px rgba(201,181,255,0.06); }
  100% { text-shadow: 0 0 6px rgba(127,200,255,0.06), 0 0 18px rgba(201,181,255,0.03); }
}

/* Apply gentle animated gradient to major headings (subtle and slow) */
.inner-hero h1, .home-hero h1, .content-section h2, .section-heading h2 {
  background-image: linear-gradient(90deg, var(--accent-turquoise), var(--accent-purple), var(--accent-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 10s ease-in-out infinite;
  /* reduce intensity so readability remains primary */
  opacity: 0.95;
}

/* Additional soft glow that cycles subtly on emphasized spans */
.inner-hero h1 .hero-gold, .content-section h2 .text-gold, .glass-panel h2 {
  animation: glowPulse 6s ease-in-out infinite;
}

/* Accent utility classes for content text (can be used in markup) */
.text-accent-gradient {
  background-image: linear-gradient(90deg, var(--accent-turquoise), var(--accent-purple), var(--accent-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 200%; animation: gradientShift 12s ease-in-out infinite;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .inner-hero h1, .home-hero h1, .content-section h2, .section-heading h2, .text-accent-gradient {
    animation: none; background-size: auto; color: var(--ivory); -webkit-background-clip: unset;
  }
  .inner-hero h1 .hero-gold, .content-section h2 .text-gold, .glass-panel h2 { animation: none; }
}

/* Video fills the hero and is covered by overlay and content */
.home-hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0; /* sit behind overlays and content */
  background:transparent;
  filter: brightness(1) saturate(1.04); /* ensure natural brightness and slightly richer color */
}

.home-hero::before{ /* subtle localized vignette behind centered hero text */
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  /* localized radial darkening to improve text contrast while keeping video bright elsewhere */
  background: radial-gradient(circle at 50% 48%, rgba(8,6,18, .42) 0%, rgba(8,6,18, .22) 18%, rgba(8,6,18, .06) 36%, rgba(8,6,18, 0) 60%);
  pointer-events: none;
}

.home-hero .eyebrow { color: #e8b558; font-size: .95rem; letter-spacing: .25em; margin-bottom: 1rem; }

.home-hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1.02; font-weight: 500; color: #fff8ea; text-shadow: 0 4px 22px rgba(0,0,0,.20); }

.home-hero h1 .hero-gold { color: #e9b34e; text-shadow: 0 0 8px rgba(255, 217, 135, .40), 0 0 22px rgba(255, 179, 65, .22); }

.home-hero .hero-lead { color: #fff9ef; font-size: clamp(1.05rem, 1.7vw, 1.35rem); margin: 1.75rem 0 2rem; text-shadow: 0 2px 10px rgba(0,0,0,.35); }

.btn-luminous { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.8rem; border: 1px solid rgba(255, 215, 135, .85); border-radius: 999px; background: linear-gradient(135deg, rgba(230, 173, 75, .26), rgba(255, 223, 158, .10)); color: #fffaf1; text-decoration: none; font-weight: 700; letter-spacing: .06em; box-shadow: 0 0 22px rgba(255, 188, 74, .20), inset 0 0 18px rgba(255,255,255,.04); transition: transform .2s ease, box-shadow .2s ease; }

.btn-luminous:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 0 32px rgba(255, 188, 74, .35), inset 0 0 20px rgba(255,255,255,.08); }

/* Center interior section hero content by default */
.inner-hero .inner-hero-content { text-align: center; }

/* --- Videos page: larger embeds (~1/3 screen) --- */
.video-grid { display:flex; gap:1.25rem; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
.video-card { flex: 0 0 32%; max-width: 480px; min-width: 260px; }
.video-card .short-frame, .video-card .video-frame { position:relative; width:100%; height:calc(33vh); overflow:hidden; border-radius:12px; }
.video-card iframe{ width:100%; height:100%; border:0; }
.video-grid-shorts { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 1.25rem; align-items: start; justify-items: center; }
/* Homepage variant: allow 4 columns on wide screens for a denser gallery */
.video-grid-home { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 1.25rem; align-items: start; justify-items: center; }
@media (max-width: 1300px) { .video-grid-home { grid-template-columns: repeat(3, minmax(220px, 1fr)); } }
@media (max-width: 1100px) { .video-grid-home { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 700px) { .video-grid-home { grid-template-columns: 1fr; } }

.short-frame, .video-frame { width:100%; position:relative; padding-top:177.78%; /* 9:16 ratio */ overflow:hidden; border-radius:14px; }
.short-frame iframe, .video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.short-video-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; }
.short-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Calendly integration styles - visually integrated with Becoming One */
.calendly-shell {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem 4rem;
}

.calendly-panel {
    width: 100%;
    max-width: 1100px; /* comfortably wide on desktop */
    background: rgba(255, 250, 245, 0.02); /* subtle warm glass */
    border: 1px solid rgba(255, 200, 80, 0.12); /* soft warm-gold border */
    box-shadow: 0 8px 30px rgba(210,160,80,0.06); /* restrained glow */
    border-radius: 16px;
    padding: 1.25rem;
    box-sizing: border-box;
}

.calendly-intro {
    color: #fff;
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: 1rem;
    opacity: 0.95;
}

/* Preserve Calendly required class but override sizing and remove inline style usage */
.calendly-inline-widget {
    width: 100% !important;
    min-width: 320px; /* Calendly minimum */
    min-height: 700px; /* desktop minimum */
    height: 70vh; /* allow fluid height while keeping comfortable desktop size */
    border-radius: 12px;
    overflow: hidden;
}

/* Prevent horizontal scroll on small viewports */
@media (max-width: 480px) {
    .calendly-panel { padding: 0.75rem; border-radius: 12px; }
    .calendly-inline-widget { height: 80vh; min-height: 600px; }
}

@media (min-width: 1024px) {
    .calendly-inline-widget { height: 700px; }
}
.home-video-grid {
  /* Primary homepage video grid: three equal columns that span available width */
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  padding-inline: clamp(16px, 2.5vw, 40px);
  margin: 2rem auto 0;
  box-sizing: border-box;
  align-items: start;
  justify-items: stretch;
}
.home-video-card { width: 100%; min-width: 0; }
.home-video-card h3 { margin-top: .6rem; text-align: center; }

@media (max-width: 900px) {
  .home-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 24px;
    gap: 20px;
  }
  /* Allow last card to span full width on odd counts for balanced layout */
  .home-video-card:last-child { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
}

@media (max-width: 600px) {
  .home-video-grid {
    grid-template-columns: 1fr;
    padding-inline: 12px;
    gap: 28px;
  }
  .home-video-card, .home-video-card:last-child {
    grid-column: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    justify-self: stretch;
  }
  .short-video-frame { width: 100%; max-width: none; aspect-ratio: 9 / 16; }
}

/* Mobile fixes: ensure each video fills available width and is centered */
@media (max-width: 480px) {
  .home-video-grid {
    grid-template-columns: 1fr;
    padding-inline: 16px; /* approx 12-20px horizontal padding as requested */
    justify-items: center; /* center cards inside the grid */
  }
  .home-video-card {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    justify-self: center;
  }
  .short-video-frame {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 9 / 16; /* preserve portrait aspect ratio */
  }
  .short-video-frame iframe { width: 100%; height: 100%; }
  /* Ensure heading is centered on small screens */
  .inner-hero-videos .inner-hero-content h2 { text-align: center; }
}

/* Mobile: break video cards out to viewport width minus safe padding and center them */
@media (max-width: 767px) {
  .inner-hero-videos .home-video-card,
  .inner-hero-videos .home-video-card .short-video-frame {
    width: calc(100vw - 28px) !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw + 14px) !important;
    margin-right: calc(50% - 50vw + 14px) !important;
    box-sizing: border-box;
  }
  /* Center the section heading across viewport */
  .inner-hero-videos .inner-hero-content h2 { text-align: center !important; }
}

/* Ensure the inner page-shell for the videos spans the viewport and centers its children on mobile
   This prevents the heading and video cards from being left-offset by the page-shell padding/width. */
@media (max-width: 767px) {
  .inner-hero-videos .page-shell.inner-hero-content {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
  }

  /* Ensure the heading spans the breakout width and is centered relative to viewport */
  .inner-hero-videos .page-shell.inner-hero-content h2 {
    width: calc(100vw - 28px) !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw + 14px) !important;
    margin-right: calc(50% - 50vw + 14px) !important;
    text-align: center !important;
    box-sizing: border-box;
  }
}

/* ensure the glass-card frames the short players */
.video-card { width:100%; max-width:420px; }
.video-card .glass-card { padding:0; }
.video-card h3 { margin: .6rem 0 .2rem; }

/* Responsive: 3 columns desktop, 2 then 1 on smaller */
@media (max-width: 1100px){ .video-grid-shorts { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 700px){ .video-grid-shorts { grid-template-columns: 1fr; } .short-frame{padding-top:177.78%} }

/* CTA panel */
.cta-panel{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:1rem}
.cta-eyebrow{font-weight:700;color:var(--ivory);opacity:.95;margin:0}

@media (max-width: 900px){
  .video-card{ flex: 1 1 100%; max-width: 100%; }
  .video-card .short-frame, .video-card .video-frame { height: 48vw; }
}

/* Schedule page specifics: center sections and style inline embed container */
.content-section .calendly-inline-widget { margin: 1rem auto; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.section-title { text-align:center; font-size:1.25rem; margin-top:1.5rem; }
.center-action { display:flex; justify-content:center; margin:1rem 0 2rem; }

/* Button icon styling for schedule CTA */
.btn-luminous svg { vertical-align: middle; fill: none; stroke: currentColor; }

/* --- Sections and glass panels --- */
.glass{background:linear-gradient(135deg,rgba(18,17,32,.72),rgba(42,29,57,.54));backdrop-filter:blur(18px);border-radius:20px;border:1px solid rgba(255,210,130,.12);box-shadow:0 24px 70px rgba(0,0,0,.25),0 0 32px rgba(255,190,80,.04);padding:1.5rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;margin-top:1.5rem}
.card-ghost{padding:1.25rem;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.04)}

/* Glow utilities */
.glow-gold{text-shadow:0 0 8px rgba(255,214,135,.45),0 0 18px rgba(255,184,70,.24),0 0 38px rgba(255,170,40,.10)}
.glow-violet{text-shadow:0 0 8px rgba(201,181,255,.35),0 0 18px rgba(169,139,235,.18)}
.glow-soft{filter:drop-shadow(0 6px 18px rgba(255,200,120,.06))}
.text-gold{color:var(--gold-1)}
.text-ivory{color:var(--ivory)}

/* Forms */
.form-glass{max-width:820px;margin:2rem auto;padding:2rem}
.form-control{background:transparent;color:var(--ivory);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:0.75rem}
.form-control:focus{outline:none;border-color:rgba(221,168,74,.95);box-shadow:0 6px 24px rgba(221,168,74,.06)}
label{font-weight:600;color:rgba(255,249,239,.9)}

/* Footer */
.site-footer{padding:3rem 2rem;background:linear-gradient(180deg,rgba(8,10,22,0.6),rgba(6,7,16,0.9));color:rgba(255,249,239,.9)}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}

/* Social icons in footer */
.footer-social{display:flex;gap:1rem;margin-bottom:.75rem}
.social-icon-link{display:inline-block;width:68px;height:68px}
.social-icon{width:100%;height:100%;object-fit:contain;border-radius:12px;transition:transform .18s ease,box-shadow .18s ease}
.social-icon-link:hover .social-icon{transform:translateY(-6px);box-shadow:0 18px 60px rgba(221,168,74,.12);}
.social-icon{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0));padding:8px}


/* Accessibility preferences */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}

@media(max-width:768px){
  .hero-content{padding:4rem 1rem}
  .hero-title{font-size:clamp(1.9rem,3vw,3.3rem)}

/* Root landing styles */
.root-landing__hero{min-height:100svh;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;position:relative}
.root-landing__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.26));}
.root-landing__content{position:relative;z-index:2;text-align:center;color:var(--ivory);padding:6rem 1.25rem}
.root-title{font-family:Playfair Display, Georgia, serif;font-size:clamp(2rem,4vw,4rem);max-width:900px;margin:0 auto 2.5rem;line-height:1.08;text-align:center}
.path-choices{display:flex;gap:3rem;justify-content:space-between;margin-top:2rem;align-items:flex-end}
.path-choice-group{display:flex;flex-direction:column;align-items:center;gap:1rem;width:48%}
.path-choice-kicker{font-size:clamp(.85rem,1.25vw,1.1rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory);opacity:.95}
.path-choice--women .path-choice-kicker{color:#ffe9f3;text-shadow:0 6px 16px rgba(255,150,190,.06)}
.path-choice--men .path-choice-kicker{color:#e6f7ff;text-shadow:0 6px 16px rgba(120,180,255,.06)}
.path-choice{display:flex;align-items:center;justify-content:center;width:100%;max-width:430px;min-height:120px;border-radius:18px;text-decoration:none;font-weight:900;font-size:clamp(1.4rem,3.4vw,2rem);position:relative;overflow:hidden;--pointer-x:50%;--pointer-y:50%;--r:0%;--tilt-x:0deg;--tilt-y:0deg;transition:transform .18s ease-out, box-shadow .18s ease-out}
.path-choice-label{z-index:6;color:var(--ivory);}

/* Women button styles */
.path-choice--women{background:linear-gradient(180deg, rgba(30,10,20,.45), rgba(35,6,25,.55));border:1px solid rgba(255,90,160,.18);box-shadow:0 18px 50px rgba(130,30,80,.18);}
.path-choice--women:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.10) var(--r), rgba(255,255,255,0) 62%), conic-gradient(from 0deg, rgba(255,100,180,.12), rgba(120,230,200,.08), rgba(200,120,255,.08), rgba(255,100,180,.12));filter:blur(22px);opacity:.95;z-index:1;transition:transform 1s linear;}
.path-choice--women:after{content:"";position:absolute;inset:4px;border-radius:14px;padding:2px;background:conic-gradient(from 0deg, rgba(255,0,120,.14), rgba(110,230,200,.08), rgba(200,120,255,.08));mask:linear-gradient(#000 0 0);z-index:3;mix-blend-mode:screen}

/* Men button styles */
.path-choice--men{background:linear-gradient(180deg, rgba(2,6,20,.6), rgba(6,8,28,.65));border:1px solid rgba(90,150,255,.16);box-shadow:0 18px 50px rgba(20,40,100,.18);}
.path-choice--men:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.10) var(--r), rgba(255,255,255,0) 62%), conic-gradient(from 0deg, rgba(30,160,255,.12), rgba(110,230,200,.08), rgba(140,90,255,.08), rgba(30,160,255,.12));filter:blur(22px);opacity:.95;z-index:1;transition:transform 1s linear}
.path-choice--men:after{content:"";position:absolute;inset:4px;border-radius:14px;padding:2px;background:conic-gradient(from 0deg, rgba(30,160,255,.14), rgba(110,230,200,.08), rgba(140,90,255,.08));mask:linear-gradient(#000 0 0);z-index:3;mix-blend-mode:screen}
@media (pointer: fine) and (min-width:900px){
  .path-choice:hover{transform:perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(0)}
}

/* Energy waves + rotating perimeter + pointer highlight for wm path buttons */
.wm-path-button{position:relative;overflow:hidden;--wm-x:50%;--wm-y:50%;--wm-r:0%;--edge-size:6px}
.wm-path-button::before,
.wm-path-button::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none}
.wm-path-button::before{
  z-index:2;
  background:radial-gradient(circle at var(--wm-x) var(--wm-y), rgba(255,255,255,.08) var(--wm-r), transparent 42%);
  mix-blend-mode:screen;
}
.wm-path-button::after{
  inset:-12%;
  z-index:1;
  border:2px solid transparent;
  opacity:.7;
  animation:wmEnergyPulse 3.3s ease-out infinite;
}
.wm-path-button--women::after{
  border-color:rgba(255,70,195,.65);
  box-shadow:0 0 35px rgba(255,65,180,.35),0 0 50px rgba(0,230,220,.18);
}
.wm-path-button--men::after{
  border-color:rgba(50,175,255,.68);
  box-shadow:0 0 35px rgba(40,155,255,.4),0 0 50px rgba(0,235,220,.2);
}
.wm-path-button .wm-edge{
  position:absolute;
  inset:calc(-1 * var(--edge-size));
  border-radius:999px;
  pointer-events:none;
  z-index:0;
  padding:var(--edge-size);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:wmRotateGlow 10s linear infinite;
  mix-blend-mode:screen;
}
.wm-path-button--women .wm-edge{background:conic-gradient(from 0deg,#ff58c7,#9a5cff,#18e0d0,#ff58c7)}
.wm-path-button--men .wm-edge{background:conic-gradient(from 0deg,#29a8ff,#15e0d0,#725dff,#29a8ff)}
@keyframes wmEnergyPulse{
  0%{transform:scale(.92);opacity:.65}
  70%{opacity:.18}
  100%{transform:scale(1.32);opacity:0}
}
@keyframes wmRotateGlow{to{transform:rotate(360deg)}}
@media (max-width:767px){
  .wm-paths{display:grid;grid-template-columns:1fr;gap:1.25rem}
  .wm-path-button{width:min(88vw,420px);min-height:100px}
}

/* Method section layout */
.method-content{max-width:1100px;margin:0 auto;text-align:left}
.method-section{padding:4rem 2rem}
.method-intro{margin-bottom:1.5rem}
.method-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.method-step{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,.04)}
.method-step h3{font-size:clamp(1.05rem,2.2vw,1.4rem);margin:0 0 .6rem}
.method-step p{font-size:clamp(1rem,1.35vw,1.25rem);margin:0}

/* Program offer */
.program-offer{padding:3rem 2rem}
.offer-image-wrap{display:flex;justify-content:center;margin:1.25rem 0}
.program-offer-image{max-width:100%;height:auto;max-width:1100px}

/* Offer CTA overlay system */
.offer-graphic-wrap{position:relative;display:block;width:100%;max-width:1100px;margin:0 auto}
.offer-graphic{display:block;width:100%;height:auto;border-radius:20px}
.offer-cta-positioner{position:absolute;left:50%;transform:translateX(-50%);top:55%;width:100%;display:flex;justify-content:center;pointer-events:none}

/* Canonical offer CTA (anchor-scoped selectors to avoid conflicts) */
a.offerCta__button{position:relative;isolation:isolate;display:inline-flex;justify-content:center;align-items:center;width:min(470px,86vw);min-height:78px;box-sizing:border-box;padding:1.1rem 2.1rem;border-radius:999px;color:white;text-decoration:none!important;text-align:center;font-size:clamp(1rem,1.5vw,1.25rem);font-weight:800;letter-spacing:.07em;overflow:visible;backdrop-filter:blur(14px);transition:transform .3s ease,box-shadow .3s ease;pointer-events:auto}
a.offerCta__button .offerCta__edge{position:absolute;inset:-3px;padding:2px;border-radius:inherit;pointer-events:none;z-index:-1;-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:offerCtaSpin 10s linear infinite}
a.offerCta__button .offerCta__label{position:relative;z-index:3;color:white;text-shadow:0 0 8px rgba(255,255,255,.45);pointer-events:none}

@keyframes offerCtaEnergyWave{0%{transform:scale(.96);opacity:.72}65%{opacity:.22}100%{transform:scale(1.30);opacity:0}}
@keyframes offerCtaSpin{to{transform:rotate(360deg)}}

/* Women variant (offerCta) */
a.offerCta__button--women{background:radial-gradient(circle at var(--offer-x,50%) var(--offer-y,50%),rgba(255,120,225,.34),transparent 42%),rgba(48,5,38,.82);border:2px solid rgba(255,110,215,.95);box-shadow:0 0 20px rgba(255,70,195,.80),0 0 46px rgba(255,45,180,.48),0 0 85px rgba(255,30,170,.24),0 0 110px rgba(0,235,220,.12),inset 0 0 24px rgba(255,255,255,.10)}
a.offerCta__button--women::before,a.offerCta__button--women::after{content:"";position:absolute;inset:-8px;border-radius:inherit;pointer-events:none;z-index:-2;opacity:0;animation:offerCtaEnergyWave 3.4s ease-out infinite}
a.offerCta__button--women::after{animation-delay:1.45s}
a.offerCta__button--women::before,a.offerCta__button--women::after{border:2px solid rgba(255,70,195,.78);box-shadow:0 0 30px rgba(255,60,190,.55),0 0 60px rgba(255,40,175,.30),0 0 70px rgba(0,230,220,.18)}
a.offerCta__button--women .offerCta__edge{background:conic-gradient(from 0deg,#ff58c7,#d956ff,#8a5cff,#18e0d0,#ff58c7)}

/* Men variant (offerCta) */
a.offerCta__button--men{background:radial-gradient(circle at var(--offer-x,50%) var(--offer-y,50%),rgba(55,210,255,.34),transparent 42%),rgba(3,20,55,.84);border:2px solid rgba(55,195,255,.95);box-shadow:0 0 20px rgba(40,165,255,.80),0 0 46px rgba(25,125,255,.48),0 0 85px rgba(0,220,245,.24),0 0 110px rgba(100,80,255,.12),inset 0 0 24px rgba(255,255,255,.10)}
a.offerCta__button--men::before,a.offerCta__button--men::after{content:"";position:absolute;inset:-8px;border-radius:inherit;pointer-events:none;z-index:-2;opacity:0;animation:offerCtaEnergyWave 3.4s ease-out infinite}
a.offerCta__button--men::after{animation-delay:1.45s}
a.offerCta__button--men::before,a.offerCta__button--men::after{border:2px solid rgba(40,180,255,.78);box-shadow:0 0 30px rgba(40,165,255,.55),0 0 60px rgba(20,125,255,.30),0 0 70px rgba(0,230,220,.20)}
a.offerCta__button--men .offerCta__edge{background:conic-gradient(from 0deg,#29a8ff,#15e0d0,#725dff,#29a8ff)}

/* hover */
a.offerCta__button:hover{transform:translateY(-3px) scale(1.035)}

@media (prefers-reduced-motion: reduce){a.offerCta__button::before,a.offerCta__button::after,a.offerCta__button .offerCta__edge{animation:none;opacity:.45}}
/* legacy .offer-energy-cta rules removed — canonical a.offerCta__button used instead */

@media (max-width:900px){
  .root-choices{flex-direction:column}
  .root-cta{width:100%;max-width:320px}
}

/* Hide global nav/footer when on root landing (root-mode class added by script) */
.root-mode .site-header .main-navigation { display: none; }
.root-mode .site-footer { display: none; }

/* Root CTA visual styles and energy animations */
.root-cta{position:relative;overflow:hidden;display:inline-block;padding:1.05rem 1.6rem;border-radius:14px;background:rgba(255,255,255,.04);color:var(--ivory);text-decoration:none;font-weight:700;border:1px solid rgba(255,255,255,.06);backdrop-filter: blur(6px);box-shadow:0 10px 40px rgba(0,0,0,.45);animation:pulseGlow 6s ease-in-out infinite}
.root-cta .root-cta-sub{display:block;font-size:.8rem;opacity:.85;margin-top:.35rem;font-weight:600}
.root-cta:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,var(--c1,rgba(255,0,128,.15)),var(--c2,rgba(110,220,200,.12)),var(--c3,rgba(200,120,255,.12)),transparent);filter:blur(18px);opacity:.9;transform:rotate(0deg);pointer-events:none;border-radius:14px;animation:rotateRing 12s linear infinite}
.root-cta:after{content:"";position:absolute;inset:0;border-radius:12px;padding:2px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.02));mix-blend-mode:overlay;pointer-events:none}
.root-cta:hover:before{animation-duration:6s}
.root-cta{--pointer-x:50%;--pointer-y:50%}
.root-cta::selection{background:transparent}

.root-cta--women{--c1:rgba(255,30,180,.18);--c2:rgba(110,230,200,.12);--c3:rgba(200,120,255,.12);border:1px solid rgba(255,150,200,.08)}
.root-cta--men{--c1:rgba(30,160,255,.18);--c2:rgba(110,230,200,.12);--c3:rgba(140,90,255,.12);border:1px solid rgba(140,170,255,.08)}

/* pointer-reactive light */
.root-cta::after{background:radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.06) var(--r,0%), transparent 60%);mix-blend-mode:screen}
.root-cta:hover::after{transition:opacity .12s linear}
.root-cta{--r:0%}
.root-cta[data-active="true"]{--r:40%}
@keyframes rotateRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 10px 40px rgba(0,0,0,.45)}50%{box-shadow:0 18px 60px rgba(0,0,0,.5)}}

/* Desktop layout: two-column split visual alignment */
@media (min-width: 900px){
  .root-landing__content{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .path-choices{max-width:1100px}
  .path-choice{padding:1.25rem 2rem}
}

/* Mobile stack */
@media (max-width: 899px){
  .root-landing__hero{background-position:center top}
  .root-title{font-size:clamp(1.8rem,6vw,2.4rem);margin-bottom:1rem}
  .path-choices{flex-direction:column;gap:1.25rem}
  .path-choice{width:min(88vw,420px);min-height:96px}
}

/* minimal root header */
.root-mini-header{position:absolute;top:28px;right:28px;z-index:5;display:flex;gap:1rem}
.root-mini-header .mini-link{color:var(--ivory);opacity:.95;text-decoration:none;font-weight:600;background:rgba(0,0,0,.18);padding:.45rem .65rem;border-radius:8px}
.root-mode .site-header { position: absolute; top:0; left:0; right:0; background:transparent; }

/* Root hero: use image layer + blurred background to preserve full artwork */
.wm-hero{position:relative;min-height:calc(100svh - 88px);overflow:hidden}
.wm-hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.wm-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,6,12,.26), rgba(3,6,12,.46));z-index:1}
.wm-hero__overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center}
.wm-hero__content{width:100%;padding:3.5rem 1.25rem;display:flex;flex-direction:column;align-items:center}
.wm-hero__headline{font-family:Playfair Display, Georgia, serif;font-size:clamp(2rem,4vw,4rem);max-width:900px;margin:0 auto 2rem;line-height:1.08;text-align:center;color:var(--ivory);text-shadow:0 6px 30px rgba(0,0,0,.45)}

/* BO selector: isolated root landing choice UI */
.bo-selector{position:relative;min-height:calc(100svh - 80px);overflow:hidden;background:#070713}
.bo-selector__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.bo-selector__overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:110px clamp(20px,5vw,70px) 50px;box-sizing:border-box}
.bo-selector__headline{text-align:center;color:#fff;font-size:clamp(2rem,4.2vw,4.4rem);line-height:1.02;font-weight:500;max-width:1000px;text-shadow:0 2px 10px rgba(0,0,0,.8),0 0 30px rgba(0,0,0,.5);margin-bottom:clamp(30px,5vh,60px)}
.bo-selector__choices{width:min(1180px,94vw);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,130px);align-items:center}
.bo-choice{display:flex;flex-direction:column;align-items:center;justify-content:center}
.bo-choice__kicker{color:#fff;text-align:center;font-size:clamp(.9rem,1.2vw,1.1rem);font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px;text-shadow:0 2px 8px rgba(0,0,0,.75)}
.bo-choice__button{position:relative;isolation:isolate;width:min(420px,38vw);min-height:118px;display:flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none;backdrop-filter:blur(16px);--bo-x:50%;--bo-y:50%;--bo-r:0%;transition:transform .3s ease,box-shadow .3s ease}
.bo-choice__label{position:relative;z-index:3;font-size:clamp(1.45rem,2vw,2.1rem);font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 0 12px currentColor}
.bo-choice__button--women{color:white;background:radial-gradient(circle at var(--bo-x) var(--bo-y),rgba(255,110,220,.28),transparent 42%),rgba(45,5,35,.68);border:2px solid rgba(255,90,205,.9);box-shadow:0 0 24px rgba(255,60,190,.55),0 0 60px rgba(255,40,160,.28),0 0 90px rgba(0,230,220,.14),inset 0 0 25px rgba(255,255,255,.08)}
.bo-choice__button--men{color:white;background:radial-gradient(circle at var(--bo-x) var(--bo-y),rgba(40,200,255,.28),transparent 42%),rgba(3,20,50,.68);border:2px solid rgba(55,185,255,.9);box-shadow:0 0 24px rgba(35,155,255,.55),0 0 60px rgba(20,120,255,.28),0 0 90px rgba(0,235,215,.15),inset 0 0 25px rgba(255,255,255,.08)}
.bo-choice__button::before,.bo-choice__button::after{content:"";position:absolute;border-radius:inherit;inset:-10%;pointer-events:none;opacity:0;z-index:1;animation:boEnergyWave 3.4s ease-out infinite}
.bo-choice__button::after{animation-delay:1.5s}
.bo-choice__button--women::before,.bo-choice__button--women::after{border:2px solid rgba(255,70,195,.72);box-shadow:0 0 30px rgba(255,70,195,.45),0 0 55px rgba(0,230,220,.22)}
.bo-choice__button--men::before,.bo-choice__button--men::after{border:2px solid rgba(40,175,255,.72);box-shadow:0 0 30px rgba(40,175,255,.45),0 0 55px rgba(0,230,220,.22)}
.bo-choice__glow{position:absolute;inset:-3px;border-radius:inherit;z-index:0;pointer-events:none;animation:boSpinGlow 9s linear infinite}
.bo-choice__button--women .bo-choice__glow{background:conic-gradient(#ff4fc3,#925cff,#16e3d2,#ff4fc3);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px}
.bo-choice__button--men .bo-choice__glow{background:conic-gradient(#2aa8ff,#15e2d2,#735cff,#2aa8ff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px}
.bo-choice__button:hover{transform:translateY(-4px) scale(1.035)}
@keyframes boEnergyWave{0%{transform:scale(.92);opacity:.65}65%{opacity:.2}100%{transform:scale(1.35);opacity:0}}
@keyframes boSpinGlow{to{transform:rotate(360deg)}}

@media(max-width:767px){
  .bo-selector{min-height:auto}
  .bo-selector__overlay{position:relative;min-height:100svh}
  .bo-selector__bg{position:absolute}
  .bo-selector__choices{grid-template-columns:1fr;gap:34px}
  .bo-choice__button{width:min(88vw,420px);min-height:100px}
}

@media (min-width: 900px){
  .root-figure{max-height:calc(100svh - 120px);}
}

/* Ensure the blurred background uses the same image as the figure */
.root-landing__hero[data-bg] .root-landing__bg{background-image:var(--root-bg)}
/* ensure root landing blurred bg gets the image from data-bg attribute via inline script */
/* fallback if JS disabled */
.root-landing__hero[data-bg] .root-landing__bg{background-image:var(--root-bg)}

/* accessibility / reduced motion */
@media (prefers-reduced-motion: reduce){
  .root-cta:before, .root-cta:hover:before { transition: none; transform: none; }
  .root-cta { animation: none !important }
}
}

/* =========================================================
   FIXED NAV / PAGE SAFE AREA
   ========================================================= */

:root {
    --nav-height: 68px; /* shortened menu bar */
}

html {
    scroll-padding-top: var(--nav-height);
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: #0b0917;
}

/* Strong mobile overrides to ensure full-width vertical video cards on small phones.
   This targets the Experience Becoming One section specifically and forces
   the card and frame to occupy the available viewport width with modest gutters.
*/
@media (max-width: 480px) {
  .inner-hero-videos .home-video-grid {
    grid-template-columns: 1fr !important;
    padding-inline: 16px !important; /* ~12-20px gutter */
    gap: 20px !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: none !important;
  }
  .inner-hero-videos .home-video-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }
  .inner-hero-videos .short-video-frame {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .inner-hero-videos .short-video-frame iframe { width:100% !important; height:100% !important; }
  .inner-hero-videos .inner-hero-content h2 { text-align: center !important; }
}

main {
    display: block;
}

.page-with-nav-offset,
.begin-page,
.journey-page,
.form-page {
    padding-top: var(--nav-height);
}

.begin-hero,
.journey-hero,
.application-hero,
.form-hero {
    padding-top: calc(var(--nav-height) + 3rem);
}

.inner-hero {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background-size: cover;
    background-position: center;
}

.inner-hero-content {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--nav-height) + 4rem);
    padding-bottom: 6rem;
}

.inner-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(9, 7, 21, 0.58) 0%,
            rgba(12, 8, 28, 0.28) 46%,
            rgba(16, 9, 31, 0.10) 100%
        );
}

@media (max-width: 768px) {
    :root {
        --nav-height: 58px; /* shortened mobile menu bar */
    }

    .inner-hero-content {
        padding-top: calc(var(--nav-height) + 3rem);
        padding-bottom: 4rem;
    }

    .begin-hero,
    .journey-hero,
    .application-hero,
    .form-hero {
        padding-top: calc(var(--nav-height) + 2.25rem);
    }
}

/* =========================================================
   PAGE BACKGROUND ART
   ========================================================= */

.inner-hero-about {
    background-image: url('/Images/about-us.webp.png');
}

.inner-hero-tools {
    background-image: url('/Images/many-tools.webp.png');
}

.inner-hero-approach {
    background-image: url('/Images/approach.webp.png');
}

.inner-hero-videos {
    background-image: url('/Images/video-section.webp.png');
}

.inner-hero-vision {
    /* Use the portal animation/partial for the Vision section instead of a static image */
    background-image: none;
}

.inner-hero-contact {
    background-image: url('/Images/contact.webp.png');
}

.journey-cta {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background-image: url('/Images/final-journey.webp.png');
    background-position: center;
    background-size: cover;
}

/* additional mappings */
.inner-hero-journey { 
    background-image: url('/Images/custom-vision.webp.png');
    background-position: center;
    background-size: cover;
}

/* Page-specific theme variables for women/men pages */
.women-page { --accent-primary: #ff6b97; --accent-secondary: #8c2b5b; --accent-glow: rgba(255,107,151,0.18); }
.men-page { --accent-primary: #2a4d7a; --accent-secondary: #1a2633; --accent-glow: rgba(42,77,122,0.12); }

/* Reuse inner-hero defaults but apply subtle palette overlays per page */
.women-page::after, .men-page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.women-page::after { background: linear-gradient(180deg, rgba(40,6,18,0.12), rgba(10,6,12,0.06)); }
.men-page::after { background: linear-gradient(180deg, rgba(6,12,30,0.12), rgba(6,10,18,0.06)); }
.inner-hero-patterns { background-image: url('/Images/patterns-awareness.webp.png'); }
.inner-hero-meet { background-image: url('/Images/meet-hollie-johnny.webp.png'); }

.journey-cta-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(8, 7, 18, .64),
            rgba(8, 7, 18, .22) 55%,
            rgba(8, 7, 18, .08)
        );
}

.journey-cta-content {
    position: relative;
    z-index: 2;
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.journey-cta h2 {
    max-width: 800px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: .98;
    margin-bottom: 1.5rem;
}

.journey-cta p {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: rgba(255, 249, 239, .9);
    margin-bottom: 2.2rem;
}