/* =========================================================
   JANET MOUNTAIN YOGA — CUSTOM THEME CSS
   Complements theme.json with site-wide design patterns
   ========================================================= */

/* ===== CSS VARIABLES (shorthand for common usage) ===== */
:root {
  --bg: var(--wp--preset--color--bg);
  --bg-soft: var(--wp--preset--color--bg-soft);
  --bg-accent: var(--wp--preset--color--bg-accent);
  --blue-deep: var(--wp--preset--color--blue-deep);
  --blue: var(--wp--preset--color--blue);
  --blue-soft: var(--wp--preset--color--blue-soft);
  --blue-mist: var(--wp--preset--color--blue-mist);
  --accent: var(--wp--preset--color--accent);
  --accent-soft: var(--wp--preset--color--accent-soft);
  --ink: var(--wp--preset--color--ink);
  --ink-soft: var(--wp--preset--color--ink-soft);
  --ink-muted: var(--wp--preset--color--ink-muted);
  --line: rgba(30, 58, 95, 0.13);
  --serif: var(--wp--preset--font-family--cormorant);
  --sans: var(--wp--preset--font-family--work-sans);
}

/* ===== BASE RESET / SMOOTHING ===== */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

/* ===== ITALIC EMPHASIS IN HEADINGS ===== */
h1 em, h2 em, h3 em, h4 em {
  color: var(--accent);
  font-style: italic;
  font-weight: inherit;
}

/* Override italic emphasis on dark sections */
.is-style-dark-section h1 em,
.is-style-dark-section h2 em,
.is-style-dark-section h3 em,
.dark-section h1 em,
.dark-section h2 em,
.dark-section h3 em {
  color: var(--accent-soft);
}

/* ===== NAV CTA / BOOK NOW BUTTON ===== */
/* Apply class "nav-cta" to a button block */
.wp-block-button.nav-cta .wp-block-button__link,
a.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px !important;
  border: 1px solid var(--blue-deep) !important;
  color: var(--blue-deep) !important;
  background: transparent !important;
  border-radius: 40px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.2em !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: all 0.4s ease !important;
  text-decoration: none !important;
}
.wp-block-button.nav-cta .wp-block-button__link:hover,
a.nav-cta:hover {
  background: var(--blue-deep) !important;
  color: var(--bg) !important;
}

/* On-dark variant of primary button (for dark sections) */
.wp-block-button.is-style-on-dark .wp-block-button__link {
  background: var(--bg) !important;
  color: var(--blue-deep) !important;
}
.wp-block-button.is-style-on-dark .wp-block-button__link:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/* ===== TEXT LINK STYLE ===== */
.btn-link,
a.btn-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: 4px;
  transition: all 0.3s ease;
  font-weight: 400;
  text-decoration: none;
}
.btn-link:hover,
a.btn-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.dark-section .btn-link,
.dark-section a.btn-link {
  color: var(--bg);
  border-color: var(--bg);
}
.dark-section .btn-link:hover {
  color: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* ===== PULL QUOTE ===== */
.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.5;
  color: var(--blue-deep);
  padding: 20px 0 20px 28px;
  border-left: 2px solid var(--accent);
  margin: 28px 0;
  font-weight: 300;
}
.pull-quote p { margin: 0; }

/* ===== SECTION LABEL ===== */
.section-label {
  font-size: 11px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--blue) !important;
  position: relative;
  padding-left: 44px;
  padding-top: 14px;
  font-family: var(--sans) !important;
  font-weight: 400 !important;
}
.section-label::before {
  content: '';
  position: absolute;
  left: 0; top: 22px;
  width: 30px; height: 1px;
  background: var(--blue);
}
.section-label .sublabel {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--blue-deep);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-top: 10px;
}

/* ===== EYEBROW ===== */
.eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  font-family: var(--sans) !important;
  font-weight: 400 !important;
}
.eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--accent);
}
.eyebrow.eyebrow-centered::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--accent);
}

.dark-section .eyebrow {
  color: var(--accent-soft) !important;
}
.dark-section .eyebrow::before,
.dark-section .eyebrow::after {
  background: var(--accent-soft);
}

/* ===== DARK SECTION ===== */
.dark-section {
  background: var(--blue-deep) !important;
  color: var(--bg) !important;
  position: relative;
  overflow: hidden;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4 {
  color: var(--bg) !important;
}
.dark-section p {
  color: rgba(246, 248, 251, 0.82);
}

.dark-section::before,
.dark-section::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.dark-section::before {
  top: -150px; right: -100px;
  background: radial-gradient(circle, rgba(200, 150, 104, 0.18), transparent 60%);
}
.dark-section::after {
  bottom: -200px; left: -150px;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.2), transparent 70%);
}
.dark-section > * {
  position: relative;
  z-index: 1;
}

/* ===== IMAGE FRAME VARIANTS ===== */
.frame-arch-top img {
  border-radius: 220px 220px 6px 6px !important;
  box-shadow: 0 40px 80px -30px rgba(30, 58, 95, 0.3);
}
.frame-arch-bl img {
  border-radius: 6px 6px 6px 200px !important;
  box-shadow: 0 40px 80px -30px rgba(30, 58, 95, 0.3);
}
.frame-arch-br img {
  border-radius: 6px 6px 200px 6px !important;
  box-shadow: 0 40px 80px -30px rgba(30, 58, 95, 0.3);
}
.frame-arch-tl img {
  border-radius: 200px 6px 6px 6px !important;
  box-shadow: 0 40px 80px -30px rgba(30, 58, 95, 0.3);
}
.frame-arch-tr img {
  border-radius: 6px 200px 6px 6px !important;
  box-shadow: 0 40px 80px -30px rgba(30, 58, 95, 0.3);
}

/* ===== PAGE BANNER ===== */
/* The banner extends to the very top of the body, behind the fixed header.
   The 140px top padding ensures content (breadcrumb, title) sits below the header. */
.page-banner {
  position: relative !important;
  min-height: 62vh;
  color: var(--bg);
  padding: 140px var(--wp--preset--spacing--gutter) 120px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  overflow: hidden;
  background-color: var(--blue-deep);
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/* Minimum height floor for short viewports */
@media (min-height: 500px) {
  .page-banner {
    min-height: max(62vh, 460px);
  }
}

/* ===== TIGHTEN SPACING BETWEEN BANNER AND FIRST CONTENT SECTION =====
   Reduce the top padding on any section that directly follows a banner.
   Individual sections keep their larger top padding when they don't follow a banner. */
.page-banner + section,
.page-banner + .wp-block-group {
  padding-top: 35px !important;
}

/* On mobile, reduce further */
@media (max-width: 768px) {
  .page-banner + section,
  .page-banner + .wp-block-group {
    padding-top: 30px !important;
  }
}

/* Constrain text content to a readable max-width inside the full-width banner */
.page-banner > .breadcrumb,
.page-banner > .wp-block-html:has(.breadcrumb),
.page-banner > .banner-title,
.page-banner > .banner-subtitle,
.page-banner > .wp-block-heading,
.page-banner > h1,
.page-banner > p {
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Decorative SVG scene layer — sits behind content, receives animations */
.page-banner .banner-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.page-banner .banner-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Photo alternative — for later swap-in with Janet's real photography
   Usage: replace <div class="banner-scene">...</div> with <img class="banner-photo" src="..." /> */
.page-banner .banner-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark gradient overlay — sits between scene and text for legibility */
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 24, 38, 0.25) 0%,
    rgba(10, 24, 38, 0.15) 40%,
    rgba(10, 24, 38, 0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Text content sits on top of scene + overlay */
.page-banner > .wp-block-heading,
.page-banner > h1,
.page-banner > .wp-block-paragraph,
.page-banner > p,
.page-banner > .wp-block-html,
.page-banner > * {
  position: relative;
  z-index: 2;
}
.page-banner .banner-scene,
.page-banner .banner-photo {
  z-index: 0 !important;
}

/* When logged in with admin bar, pull banner up to extend behind it too */
body.admin-bar .page-banner {
  margin-top: -32px !important;
  padding-top: 172px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .page-banner {
    margin-top: -46px !important;
    padding-top: 186px !important;
  }
}
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 24, 38, 0.4) 0%,
    rgba(10, 24, 38, 0.2) 40%,
    rgba(10, 24, 38, 0.75) 100%);
  pointer-events: none;
  z-index: 1;
}
.page-banner > * {
  position: relative;
  z-index: 2;
}
.page-banner h1 { color: var(--bg) !important; }
.page-banner p { color: rgba(246, 248, 251, 0.92); }

/* Banner title — large hero text, italic emphasis on em tags */
.banner-title {
  font-family: var(--serif) !important;
  font-size: clamp(3.2rem, 7vw, 6.5rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
  font-weight: 300 !important;
  margin-bottom: 24px !important;
  color: var(--bg) !important;
}
.banner-title em {
  font-style: italic;
  color: var(--accent-soft);
}

/* Banner subtitle — italic serif, softer */
.banner-subtitle {
  font-family: var(--serif) !important;
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  line-height: 1.5 !important;
  font-style: italic !important;
  max-width: 680px;
  color: rgba(246, 248, 251, 0.92) !important;
}

/* Closing CTA heading */
.closing-heading {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 40px !important;
}

/* Closing CTA section padding */
.closing-cta {
  padding: 120px var(--wp--preset--spacing--gutter) !important;
  text-align: center;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}
.closing-cta .wp-block-buttons {
  margin-top: 40px;
}

/* Light variant — soft blue-grey instead of dark navy */
/* Use class "closing-cta-light" instead of "dark-section closing-cta" */
.closing-cta-light {
  padding: 140px var(--wp--preset--spacing--gutter) !important;
  text-align: center;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.closing-cta-light::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.2), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.closing-cta-light > * {
  position: relative;
  z-index: 1;
}
.closing-cta-light .closing-heading {
  color: var(--blue-deep) !important;
  margin-bottom: 40px !important;
}
.closing-cta-light .closing-heading em {
  color: var(--accent);
}
.closing-cta-light .eyebrow {
  color: var(--accent) !important;
}
.closing-cta-light .eyebrow::before,
.closing-cta-light .eyebrow::after {
  background: var(--accent);
}
.closing-cta-light .wp-block-buttons {
  margin-top: 40px;
}
/* Default button style on light CTA (navy pill) */
.closing-cta-light .wp-block-button .wp-block-button__link {
  background: var(--blue-deep) !important;
  color: var(--bg) !important;
}
.closing-cta-light .wp-block-button .wp-block-button__link:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(246, 248, 251, 0.85);
  margin-bottom: 28px;
  font-family: var(--sans);
  flex-wrap: wrap;
}
.breadcrumb a {
  border-bottom: 1px solid transparent;
  transition: all 0.3s;
  color: inherit;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--accent-soft);
  border-bottom-color: currentColor;
}
.breadcrumb .sep {
  width: 18px;
  height: 1px;
  background: rgba(246, 248, 251, 0.4);
  display: inline-block;
}
.breadcrumb .current {
  color: var(--accent-soft);
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* ===== SITE HEADER (fixed transparent) ===== */
.wp-block-template-part.site-header,
.site-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 22px var(--wp--preset--spacing--gutter);
  background: rgba(246, 248, 251, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: padding 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

/* When WP admin bar is showing, offset the fixed header to sit below it.
   Desktop admin bar is position:fixed, so a permanent offset is correct.
   Mobile admin bar (≤782px) is position:absolute — it scrolls away, so we
   only offset while the user is at the top of the page; once they scroll,
   snap the header back to 0 so it doesn't look orphaned. */
body.admin-bar .site-header,
body.admin-bar .wp-block-template-part.site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar .wp-block-template-part.site-header {
    top: 0 !important;
  }
}

.site-header.on-banner {
  background: rgba(30, 58, 95, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header.on-banner a:not(.wp-block-button__link),
.site-header.on-banner .site-title,
.site-header.on-banner p {
  color: var(--bg) !important;
}
.site-header.on-banner .nav-cta .wp-block-button__link {
  border-color: rgba(246, 248, 251, 0.9) !important;
  color: var(--bg) !important;
}
.site-header.on-banner .nav-cta .wp-block-button__link:hover {
  background: var(--bg) !important;
  color: var(--blue-deep) !important;
  border-color: var(--bg) !important;
}

/* ===== Logo mark (moon icon next to site title) ===== */
.jmy-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--blue-deep);
  transition: color 0.3s ease;
}
.jmy-logo-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.site-header.on-banner .jmy-logo-mark {
  color: var(--bg);
}
/* Ensure logo and title align nicely */
.site-logo-group {
  gap: 12px !important;
}

/* Nav menu styling */
.site-header .wp-block-navigation a {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  transition: color 0.3s ease;
  text-decoration: none;
}
.site-header .wp-block-navigation a:hover {
  color: var(--accent) !important;
}

.site-header .site-title,
.site-header .wp-block-site-title a {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  color: var(--blue-deep);
  text-decoration: none;
}

/* ===== NAVIGATION SUBMENU (DESKTOP DROPDOWN) ===== */

/* Parent link with submenu — increase caret visibility */
.site-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
  padding: 0 0 0 6px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-icon {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
  stroke: currentColor;
  stroke-width: 2;
  fill: currentColor;
  width: 10px !important;
  height: 10px !important;
}
.site-header .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-icon {
  opacity: 1;
  transform: rotate(180deg);
}

/* When header is on banner, make caret white for visibility */
.site-header.on-banner .wp-block-navigation__submenu-icon svg {
  fill: var(--bg);
  stroke: var(--bg);
}

/* Ensure the parent menu item can position dropdown relative to itself */
.site-header .wp-block-navigation-submenu,
.site-header .wp-block-navigation-item.has-child {
  position: relative;
}

/* Submenu dropdown panel — position DIRECTLY under the parent link
   Small margin-top creates breathing room, with invisible bridge covering hover gap */
.site-header .wp-block-navigation__submenu-container {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  padding: 12px 0 !important;
  min-width: 280px !important;
  box-shadow: 0 20px 40px -20px rgba(30, 58, 95, 0.25) !important;
  margin-top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
}

/* Invisible bridge ABOVE the dropdown that covers the gap between parent
   and dropdown so hover state stays active while moving mouse down */
.site-header .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 24px;
  background: transparent;
}

/* Submenu items */
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
  display: block;
}
.site-header .wp-block-navigation__submenu-container a,
.site-header.on-banner .wp-block-navigation__submenu-container a {
  display: block !important;
  padding: 12px 32px !important;
  font-size: 12px !important;
  font-family: var(--sans) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
  background: transparent !important;
  transition: color 0.3s ease, background 0.3s ease !important;
  white-space: nowrap;
}
.site-header .wp-block-navigation__submenu-container a:hover,
.site-header.on-banner .wp-block-navigation__submenu-container a:hover {
  color: var(--accent) !important;
  background: rgba(201, 169, 97, 0.08) !important;
}

/* Remove submenu's own carets */
.site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
  display: none;
}

/* ===== MOBILE BREAKPOINT OVERRIDE =====
   WordPress's Navigation block defaults to showing the mobile overlay around 600px.
   We override that by FORCING the mobile state at 1023px and below. */

/* Desktop state (1024px and up) — inline horizontal nav, no overlay */
@media (min-width: 1024px) {
  /* Hide hamburger button on desktop */
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
  /* Show inline navigation */
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block !important;
    position: relative !important;
    width: auto !important;
    background: transparent !important;
    visibility: visible !important;
  }
  /* The inner container resets */
  .wp-block-navigation__responsive-container-content {
    display: flex !important;
  }
}

/* Mobile state (1023px and down) — show hamburger, hide inline nav */
@media (max-width: 1023px) {
  /* Force the header to push the nav block to the far right */
  .site-header {
    justify-content: space-between !important;
  }
  /* The WP Navigation block wrapper */
  .site-header .wp-block-navigation {
    flex-grow: 0 !important;
    margin-left: auto !important;
  }
  /* Force hamburger to show, flush to far right */
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    color: var(--blue-deep) !important;
    margin: 0 !important;
  }
  .site-header.on-banner .wp-block-navigation__responsive-container-open {
    color: var(--bg) !important;
  }
  /* Hide inline nav container on mobile when menu is closed */
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* ===== HAMBURGER ICON — 3 CONSISTENT LINES ===== */
.wp-block-navigation__responsive-container-open svg {
  display: none !important;
}
.wp-block-navigation__responsive-container-open::before {
  content: '';
  display: block;
  width: 24px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 24px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 7px / 24px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 14px / 24px 2px no-repeat;
}

/* Custom close icon — X */
.wp-block-navigation__responsive-container-close svg {
  display: none !important;
}
.wp-block-navigation__responsive-container-close {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--blue-deep) !important;
}
.wp-block-navigation__responsive-container-close::before {
  content: '×';
  display: block;
  font-size: 36px;
  line-height: 1;
  font-weight: 300;
}

/* ===== MOBILE OVERLAY WHEN OPEN =====
   CRITICAL: must break out of header's flex container and cover the full viewport
   Uses aggressive overrides to defeat WP's default containment */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  padding: 0 !important;
  z-index: 999999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  animation: mobile-overlay-fade 0.4s ease-out;
  /* Layered background: soft blue-grey base with radial gold accent + subtle pattern */
  background:
    radial-gradient(circle at 85% 15%, rgba(201, 169, 97, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 10% 85%, rgba(127, 162, 196, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%) !important;
}

/* Force any parent wrapper to not constrain */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation:has(.is-menu-open),
.site-header:has(.is-menu-open) .wp-block-navigation {
  contain: none !important;
}

@keyframes mobile-overlay-fade {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(0);
  }
}

/* Admin bar offset */
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
  top: 32px !important;
  height: calc(100vh - 32px) !important;
  min-height: calc(100vh - 32px) !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
    min-height: calc(100vh - 46px) !important;
  }
}

/* Close button position — TOP-RIGHT CORNER of viewport, definitely fixed */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 1000000 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--blue-deep) !important;
  cursor: pointer;
}
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: 56px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: 70px !important;
  }
}

/* Inner container — scrollable, centered content with tighter top padding */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 80px 32px 48px !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  display: block !important;
  flex: 1 !important;
  animation: mobile-overlay-content-in 0.5s ease-out 0.1s both;
  box-sizing: border-box !important;
}

@keyframes mobile-overlay-content-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile menu items — stacked */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
}

/* Each top-level menu item */
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li {
  display: block !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(30, 58, 95, 0.1) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Top-level link text */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > a {
  display: block !important;
  padding: 20px 4px !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--blue-deep) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 0.3s ease, padding-left 0.3s ease !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a:hover {
  color: var(--accent) !important;
  padding-left: 8px !important;
}

/* Hide the submenu toggle arrow on mobile */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
  display: none !important;
}

/* Submenu — show all children expanded inline */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 14px 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-width: 0 !important;
  display: block !important;
  width: 100% !important;
  left: auto !important;
  top: auto !important;
  list-style: none !important;
}

/* Submenu items — indented with left border */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
  display: block !important;
  padding: 0 0 0 18px !important;
  border-left: 2px solid rgba(30, 58, 95, 0.15) !important;
  border-bottom: none !important;
  margin: 2px 0 2px 4px !important;
  transition: border-left-color 0.3s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
  border-left-color: var(--accent) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
  display: block !important;
  padding: 10px 0 !important;
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 0.3s ease, padding-left 0.3s ease !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:hover {
  color: var(--accent) !important;
  padding-left: 6px !important;
}

/* ===== BOOK NOW AS NAV MENU ITEM STYLED AS PILL ===== */
/* When you add a menu item to the Navigation with a custom link labeled "Book Now",
   add the CSS class "nav-book-now" to it in the block editor. */

/* Desktop: style the "Book Now" nav item as a pill button */
@media (min-width: 1024px) {
  .site-header .wp-block-navigation-item.nav-book-now > a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 11px 24px !important;
    border: 1px solid var(--blue-deep) !important;
    color: var(--blue-deep) !important;
    background: transparent !important;
    border-radius: 40px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.2em !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: all 0.4s ease !important;
  }
  .site-header .wp-block-navigation-item.nav-book-now > a:hover {
    background: var(--blue-deep) !important;
    color: var(--bg) !important;
  }
  .site-header.on-banner .wp-block-navigation-item.nav-book-now > a {
    border-color: rgba(246, 248, 251, 0.9) !important;
    color: var(--bg) !important;
  }
  .site-header.on-banner .wp-block-navigation-item.nav-book-now > a:hover {
    background: var(--bg) !important;
    color: var(--blue-deep) !important;
    border-color: var(--bg) !important;
  }
}

/* Mobile: Book Now is a prominent pill at the bottom of the overlay */
@media (max-width: 1023px) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-book-now {
    border-bottom: none !important;
    margin-top: 40px !important;
    padding: 0 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-book-now > a {
    display: block !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    padding: 20px 40px !important;
    background: var(--blue-deep) !important;
    color: var(--bg) !important;
    text-align: center !important;
    border-radius: 40px !important;
    font-size: 13px !important;
    letter-spacing: 0.22em !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-book-now > a:hover {
    background: var(--accent) !important;
    color: var(--bg) !important;
  }
}

/* Prevent body scroll when overlay is open */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
  overflow: hidden;
}

/* ===== SITE FOOTER ===== */
.site-footer,
.wp-block-template-part.site-footer {
  padding: 100px var(--wp--preset--spacing--gutter) 40px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
  max-width: 1400px;
  margin: 0 auto;
}

.site-footer .footer-brand h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin-bottom: 20px;
  color: var(--blue-deep);
}
.site-footer .footer-brand p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 340px;
}

.site-footer .footer-heading {
  font-size: 11px !important;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blue-deep) !important;
  margin-bottom: 22px;
  font-weight: 500;
  font-family: var(--sans);
}

.site-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .footer-links li { margin-bottom: 10px; }
.site-footer .footer-links a {
  font-size: 15px;
  color: var(--ink-soft);
  transition: color 0.3s ease;
  font-weight: 300;
  text-decoration: none;
}
.site-footer .footer-links a:hover { color: var(--accent); }

.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  font-size: 13px;
  color: var(--ink-muted);
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer .footer-bottom em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--blue);
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== STICKY UTILITIES ===== */
@media (min-width: 981px) {
  .sticky-side,
  .sticky-portrait {
    position: sticky !important;
    top: 120px !important;
    align-self: flex-start !important;
  }
}

/* ===== ACCORDION / FAQ ===== */
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  color: var(--blue-deep);
  padding: 40px 0;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color 0.3s ease;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--blue-deep);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-content {
  padding: 0 0 40px 0;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.faq-content p { margin-bottom: 22px; }
.faq-content strong {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  color: var(--blue-deep);
}

/* ===== CONTACT FORM (CF7 + general forms) ===== */
.wpcf7-form-control:not(.wpcf7-submit),
input[type="text"]:not(.wp-block-search__input),
input[type="email"]:not(.wp-block-search__input),
textarea,
select {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 10px 0 14px !important;
  font-weight: 300 !important;
  transition: border-color 0.3s ease !important;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-bottom-color: var(--accent) !important;
  outline: none !important;
}
.wpcf7-form label {
  font-size: 10px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
  margin-bottom: 10px !important;
  font-weight: 500 !important;
  display: block;
}
.wpcf7-submit {
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 17px 32px !important;
  background: var(--blue-deep) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: 100px !important;
  cursor: pointer;
  transition: all 0.4s ease !important;
}
.wpcf7-submit:hover {
  background: var(--accent) !important;
}

/* ===== UTILITY WIDTHS ===== */
.narrow-content { max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; }
.medium-content { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; }
.wide-content { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; }

/* Escape the constrained parent and stretch full viewport width */
.full-bleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/* ===== RESPONSIVE HELPERS ===== */
@media (max-width: 980px) {
  .hide-mobile { display: none !important; }
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .page-banner {
    padding: 100px 24px 50px;
    min-height: 50vh;
  }
}
@media (min-width: 981px) {
  .show-mobile-only { display: none !important; }
}

/* ===== PULSE ANIMATION (for banner dots, etc.) ===== */
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

/* =========================================================
   STAGE 2 — REUSABLE SECTION PATTERNS
   ========================================================= */

/* ===== TWO-COLUMN STICKY LABEL ===== */
/* Pattern: left sidebar with sticky section label, right with copy */
.two-col-sticky {
  display: grid !important;
  grid-template-columns: 1fr 2fr;
  gap: 100px;
  padding: 140px var(--wp--preset--spacing--gutter);
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
.two-col-sticky .sticky-label-col {
  position: sticky;
  top: 140px;
  align-self: start;
}
.two-col-sticky .content-col > * {
  margin-bottom: 28px;
}
.two-col-sticky .content-col > *:last-child {
  margin-bottom: 0;
}
@media (max-width: 980px) {
  .two-col-sticky {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px var(--wp--preset--spacing--gutter);
  }
  .two-col-sticky .sticky-label-col {
    position: static;
  }
}

/* ===== LEAD QUOTE (centered opener) ===== */
.lead-quote {
  padding: 120px var(--wp--preset--spacing--gutter);
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.lead-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.45;
  color: var(--blue-deep);
  font-weight: 300;
  margin: 0;
}

/* ===== RELATED PRACTICES ===== */
.related-practices {
  padding: 120px var(--wp--preset--spacing--gutter);
  max-width: 1280px;
  margin: 0 auto;
}
.related-practices-header {
  text-align: center;
  margin-bottom: 60px;
}
.related-practices-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.related-card {
  display: block;
  position: relative;
  min-height: 360px;
  padding: 48px;
  background: var(--blue-deep);
  color: var(--bg);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.4s ease;
}
.related-card.mirror {
  border-radius: 6px 6px 6px 200px;
}
.related-card:not(.mirror) {
  border-radius: 6px 200px 6px 6px;
}
.related-card:hover {
  transform: translateY(-4px);
}
.related-card .eyebrow {
  color: var(--accent-soft) !important;
  margin-bottom: 20px;
}
.related-card h3 {
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  color: var(--bg) !important;
  margin-bottom: 24px;
}
.related-card .card-link {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bg);
  padding-bottom: 4px;
  color: var(--bg);
}
@media (max-width: 980px) {
  .related-practices-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .related-card {
    min-height: 280px;
    padding: 36px;
  }
}

/* ===== SECTION WITH IMAGE (left or right) ===== */
.section-with-image {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  padding: 140px var(--wp--preset--spacing--gutter);
  max-width: 1400px;
  margin: 0 auto;
  align-items: center;
}
.section-with-image.image-right {
  grid-template-columns: 1.2fr 1fr;
}
.section-with-image.image-left {
  grid-template-columns: 1fr 1.2fr;
}
@media (max-width: 980px) {
  .section-with-image,
  .section-with-image.image-right,
  .section-with-image.image-left {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px var(--wp--preset--spacing--gutter);
  }
}

/* ===== STAT STRIP (dark section with big numbers) ===== */
.stat-strip {
  padding: 80px var(--wp--preset--spacing--gutter);
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}
.stat-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.stat-item .stat-number {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: var(--accent-soft);
  margin-bottom: 12px;
}
.stat-item .stat-label {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(246, 248, 251, 0.7);
}
@media (max-width: 980px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* ===== PROSE SECTION (narrow-column text, Inner Sanctuary style) ===== */
.prose-section {
  max-width: 820px;
  margin: 0 auto;
  padding: 140px var(--wp--preset--spacing--gutter);
}
.prose-section > * {
  margin-bottom: 28px;
}
.prose-section p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.prose-section .opener {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.5;
  color: var(--blue-deep);
  margin-bottom: 44px;
}

/* Drop cap for prose */
.has-dropcap::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-size: 5em;
  float: left;
  line-height: 0.85;
  padding: 6px 14px 0 0;
  color: var(--accent);
}

/* ===== AFFIRMATIONS CALLOUT ===== */
.affirmations-callout {
  background: var(--bg-soft);
  padding: 48px;
  border-radius: 6px 6px 6px 100px;
  margin: 40px 0;
  text-align: center;
}
.affirmations-callout .eyebrow {
  justify-content: center;
  margin-bottom: 24px;
}
.affirmations-callout .eyebrow::before {
  display: none;
}
.affirmations-callout .affirmation-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.6;
  color: var(--blue-deep);
  margin: 8px 0;
}

/* ===== CENTERED INTRO (eyebrow + heading) ===== */
.centered-intro {
  max-width: 960px;
  margin: 0 auto;
  padding: 120px var(--wp--preset--spacing--gutter);
  text-align: center;
}
.centered-intro .eyebrow {
  justify-content: center;
  margin-bottom: 32px;
}
.centered-intro h2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.15 !important;
}

/* ===== PRACTICAL NOTES (3-column grid on bg-soft) ===== */
.practical-notes {
  background: var(--bg-soft);
  padding: 100px var(--wp--preset--spacing--gutter);
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}
.practical-notes-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
}
.note-item h4 {
  font-family: var(--serif);
  font-size: 1.4rem !important;
  margin-bottom: 12px;
  color: var(--blue-deep);
}
.note-item p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 980px) {
  .practical-notes-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ===== COMING SOON (Bibliography page) ===== */
.coming-soon-section {
  padding: 140px var(--wp--preset--spacing--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.coming-soon-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.15), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.coming-soon-section > * { position: relative; z-index: 1; }

.book-stack {
  max-width: 200px;
  margin: 0 auto 40px;
}
.book-stack svg { width: 100%; height: auto; display: block; }

.coming-soon-title {
  font-family: var(--serif) !important;
  font-size: clamp(3.5rem, 7vw, 5.5rem) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  margin: 32px 0 32px !important;
  color: var(--blue-deep) !important;
}
.coming-soon-title em {
  font-style: normal;
  color: var(--accent);
}

.coming-soon-message {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
  line-height: 1.5 !important;
  color: var(--ink-soft) !important;
  max-width: 560px;
  margin: 0 auto 48px !important;
}

.coming-soon-actions {
  margin-bottom: 20px !important;
}

/* ===== CONTACT PAGE ===== */
.contact-layout {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr;
  gap: 100px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px var(--wp--preset--spacing--gutter) 120px;
  align-items: start;
}

.contact-info {
  position: sticky;
  top: 120px;
  align-self: start;
}

.contact-info h2 {
  margin-bottom: 28px !important;
}

.contact-info .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--blue-deep);
  margin-bottom: 48px;
}

.email-block {
  display: flex !important;
  align-items: center;
  gap: 20px;
  background: var(--bg-soft);
  padding: 28px 32px;
  border-radius: 6px 6px 6px 100px;
  text-decoration: none;
  color: inherit;
  transition: all 0.4s ease;
  margin-bottom: 32px;
  max-width: 480px;
}
.email-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(30, 58, 95, 0.15);
}
.email-icon {
  width: 44px;
  height: 44px;
  background: var(--blue-deep);
  color: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.email-details .email-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.email-details .email-address {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--blue-deep);
  transition: color 0.3s;
}
.email-block:hover .email-address { color: var(--accent); }

.response-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 480px;
}
.response-note .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 10px;
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
.response-note p {
  font-size: 14px;
  color: var(--ink-muted);
  font-style: italic;
  margin: 0;
}

/* Form header */
.form-header {
  margin-bottom: 40px;
}
.form-header .small-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.form-header h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important;
  margin: 0;
}

/* CF7 form styling tweaks */
.wpcf7 p {
  margin: 0 0 24px !important;
}
.wpcf7-form-control-wrap {
  display: block;
}

@media (max-width: 980px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 80px var(--wp--preset--spacing--gutter);
  }
  .contact-info { position: static; }
}

/* ===== CONTACT FORM 7 CUSTOM FORM LAYOUT ===== */
.wpcf7 .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 24px;
}
.wpcf7 .form-field { display: flex; flex-direction: column; }
.wpcf7 .form-field.full { grid-column: 1 / -1; }
.wpcf7 .form-field label {
  font-size: 10px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
  margin-bottom: 10px !important;
  font-weight: 500 !important;
}
.wpcf7 .form-submit {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.wpcf7 .hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-muted);
}
.wpcf7-submit {
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 16px 32px !important;
  background: var(--blue-deep) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.wpcf7-submit:hover {
  background: var(--accent) !important;
  transform: translateY(-2px) !important;
}
.wpcf7-form-control:not(.wpcf7-submit)::placeholder {
  color: var(--ink-muted);
  opacity: 0.6;
  font-style: italic;
}
@media (max-width: 600px) {
  .wpcf7 .form-row { grid-template-columns: 1fr; }
  .wpcf7 .form-submit { flex-direction: column; align-items: stretch; }
}

/* ===== TESTIMONIALS PAGE ===== */
.testimonials-intro {
  max-width: 960px;
  margin: 0 auto;
  padding: 100px var(--wp--preset--spacing--gutter) 40px;
  text-align: center;
}
.testimonials-intro .eyebrow {
  justify-content: center;
  margin-bottom: 28px;
}
.testimonials-intro h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  line-height: 1.4 !important;
  color: var(--blue-deep);
}

.testimonials-grid {
  max-width: 1280px !important;
  width: 100%;
  margin: 0 auto !important;
  padding: 40px var(--wp--preset--spacing--gutter) 140px !important;
}

.testimonial {
  position: relative;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.testimonial:first-child { border-top: 1px solid var(--line); }

.testimonial-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: start;
}

.testimonial-attribution {
  position: sticky;
  top: 120px;
  align-self: start;
}

.testimonial-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 72px;
  line-height: 0.8;
  color: var(--accent);
  margin-bottom: 16px;
}

.testimonial-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--blue-deep);
  margin-bottom: 4px;
}

.testimonial-location {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-muted);
  margin-bottom: 18px;
}

.testimonial-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.testimonial-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.testimonial-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.testimonial-quote p { margin-bottom: 24px; }
.testimonial-quote p:last-child { margin-bottom: 0; }

/* Featured treatment — subtle bg wash */
.testimonial.featured {
  background: var(--bg-soft);
  margin: 20px -56px;
  padding: 70px 56px;
  border-top: none !important;
  border-bottom: none !important;
}
.testimonial.featured + .testimonial { border-top: 1px solid var(--line); }

@media (max-width: 980px) {
  .testimonial-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .testimonial-attribution { position: static; }
  .testimonial.featured {
    margin: 20px -24px;
    padding: 50px 24px;
  }
}

/* ===== ABOUT PAGE ===== */

/* Intro with portrait */
.intro-portrait {
  display: grid !important;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 100px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px var(--wp--preset--spacing--gutter) 120px;
  align-items: start;
}
.intro-portrait .portrait-col {
  position: sticky;
  top: 120px;
  align-self: start;
}
.intro-portrait .portrait-frame {
  border-radius: 220px 220px 6px 6px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-accent);
  box-shadow: 0 40px 80px -30px rgba(30, 58, 95, 0.3);
}
.intro-portrait .portrait-frame img,
.intro-portrait .portrait-frame svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-portrait .portrait-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 20px;
}
.intro-portrait .intro-copy h2 {
  margin-bottom: 32px !important;
}
.intro-portrait .intro-copy .lead-para {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.55;
  color: var(--blue-deep);
  padding-left: 28px;
  border-left: 2px solid var(--accent);
}

/* Journey / biography chapters */
.journey-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px var(--wp--preset--spacing--gutter) 140px;
}
.journey-header {
  margin-bottom: 80px;
  max-width: 820px;
}
.journey-header h2 {
  margin-top: 24px !important;
}

.bio-chapter {
  display: grid !important;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  margin-bottom: 60px;
  padding-top: 60px;
  border-top: 1px solid var(--line);
  align-items: start;
}
.bio-chapter:first-of-type {
  border-top: none;
  padding-top: 0;
}

.bio-marker {
  position: sticky;
  top: 140px;
  align-self: start;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blue);
}
.bio-marker::before {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: var(--blue);
  margin-bottom: 14px;
}
.bio-marker span {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--blue-deep);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-top: 10px;
}

.bio-text p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
}

/* Credentials strip — extends dark-section with 4-col stats */
.credentials-strip {
  padding: 100px var(--wp--preset--spacing--gutter);
}
.credentials-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.credentials-eyebrow {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 50px;
}
.credentials-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}
.cred-item .number {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: var(--accent-soft);
  margin-bottom: 16px;
}
.cred-item .label {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(246, 248, 251, 0.75);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .intro-portrait {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px var(--wp--preset--spacing--gutter);
  }
  .intro-portrait .portrait-col { position: static; }
  .bio-chapter {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .bio-marker { position: static; }
  .credentials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 20px;
  }
}

/* ===== FAQ PAGE ===== */
.faq-layout {
  display: grid !important;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px var(--wp--preset--spacing--gutter) 60px;
  align-items: start;
}

.faq-toc-sidebar {
  position: sticky;
  top: 120px;
  align-self: start;
}
.faq-toc-sidebar .toc-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.faq-toc-sidebar .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-toc-sidebar .toc-list a {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
  padding-left: 16px;
  position: relative;
  transition: all 0.3s;
}
.faq-toc-sidebar .toc-list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--ink-muted);
  transition: all 0.3s;
}
.faq-toc-sidebar .toc-list a:hover {
  color: var(--accent);
  padding-left: 24px;
}
.faq-toc-sidebar .toc-list a:hover::before {
  width: 16px;
  background: var(--accent);
}

.faq-content-area .faq-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--blue-deep);
  margin-bottom: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

/* Custom FAQ items (numbered, with hover toggle) */
.faq-content-area .faq-item {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 120px;
}
.faq-content-area .faq-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  gap: 24px;
  padding: 36px 0;
  align-items: center;
  transition: color 0.3s;
}
.faq-content-area .faq-item summary::-webkit-details-marker { display: none; }
.faq-content-area .faq-item summary:hover { color: var(--accent); }
.faq-content-area .faq-item summary:hover .q-text { color: var(--accent); }

.faq-content-area .q-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  font-weight: 300;
}
.faq-content-area .q-text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.3;
  color: var(--blue-deep);
  transition: color 0.3s;
}
.faq-content-area .q-toggle {
  position: relative;
  width: 24px;
  height: 24px;
  justify-self: end;
}
.faq-content-area .q-toggle::before,
.faq-content-area .q-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--blue-deep);
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-content-area .q-toggle::before { width: 12px; height: 1px; }
.faq-content-area .q-toggle::after { width: 1px; height: 12px; }
.faq-content-area .faq-item[open] .q-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-content-area .faq-answer {
  padding: 0 0 40px 72px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.faq-content-area .faq-answer p { margin-bottom: 22px; }
.faq-content-area .faq-answer p:last-child { margin-bottom: 0; }
.faq-content-area .faq-answer strong {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  color: var(--blue-deep);
}
.faq-content-area .faq-answer ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
}
.faq-content-area .faq-answer ul li {
  padding: 12px 0 12px 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 16px;
}
.faq-content-area .faq-answer ul li:last-child { border-bottom: none; }
.faq-content-area .faq-answer ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 10px;
  height: 1px;
  background: var(--accent);
}
.faq-content-area .faq-answer .pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--blue-deep);
  padding: 20px 0 20px 28px;
  border-left: 2px solid var(--accent);
  margin: 28px 0;
  font-weight: 300;
}
.faq-content-area .faq-answer .pull .attr {
  display: block;
  font-size: 13px;
  color: var(--ink-muted);
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 10px;
}

@media (max-width: 980px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px var(--wp--preset--spacing--gutter) 40px;
  }
  .faq-toc-sidebar {
    position: static;
    display: none; /* Hide TOC on mobile */
  }
  .faq-content-area .faq-item summary {
    grid-template-columns: 36px 1fr 24px;
    gap: 16px;
  }
  .faq-content-area .faq-answer {
    padding-left: 52px;
  }
}

/* ===== CLASSES INDEX PAGE ===== */

.class-hub {
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px var(--wp--preset--spacing--gutter);
}

.hub-intro {
  max-width: 680px;
  margin: 0 auto 80px;
  text-align: center;
}
.hub-intro .eyebrow {
  justify-content: center;
  margin-bottom: 24px;
}
.hub-intro h2 {
  font-style: italic;
  font-weight: 300;
  color: var(--blue-deep);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important;
  line-height: 1.35 !important;
}

.class-card-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.class-card {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--blue-deep);
}
.class-card:hover { transform: translateY(-6px); }

.class-card:nth-child(1) { border-radius: 6px 6px 6px 180px; }
.class-card:nth-child(2) { border-radius: 6px 6px 180px 6px; }
.class-card:nth-child(3) { border-radius: 6px 180px 6px 6px; }
.class-card:nth-child(4) { border-radius: 180px 6px 6px 6px; }

.class-card-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.class-card-image svg,
.class-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.class-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.25) 0%, rgba(10, 24, 38, 0.3) 50%, rgba(10, 24, 38, 0.75) 100%);
  transition: background 0.5s ease;
}
.class-card:hover .class-card-image::after {
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.2) 0%, rgba(10, 24, 38, 0.35) 50%, rgba(10, 24, 38, 0.8) 100%);
}

.class-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--bg);
}

/* Adjust padding based on which corner has the arched radius
   so content doesn't get clipped behind the curve */

/* Card 1: arched bottom-left — needs extra left padding on bottom content */
.class-card:nth-child(1) .class-card-bottom {
  padding-left: 28px;
}

/* Card 2: arched bottom-right — needs extra right padding on bottom */
.class-card:nth-child(2) .class-card-bottom {
  padding-right: 28px;
}

/* Card 3: arched top-right — needs extra right padding on top */
.class-card:nth-child(3) .class-card-top {
  padding-right: 28px;
}

/* Card 4: arched top-left — needs extra left padding on top */
.class-card:nth-child(4) .class-card-top {
  padding-left: 28px;
}

.class-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.class-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent-soft);
  letter-spacing: 0.03em;
}
.class-card .tag {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(246, 248, 251, 0.85);
  padding: 4px 14px;
  border: 1px solid rgba(246, 248, 251, 0.4);
  border-radius: 40px;
}

.class-card-bottom h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  line-height: 1 !important;
  color: var(--bg) !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.01em;
}
.class-card-bottom h3 em {
  font-style: italic;
  color: var(--accent-soft);
}

.class-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bg);
  border-bottom: 1px solid var(--bg);
  padding-bottom: 4px;
  transition: all 0.4s ease;
}
.class-card:hover .class-card-cta {
  color: var(--accent-soft);
  border-color: var(--accent-soft);
  gap: 14px;
}

/* "Also offered" section */
.also-offered {
  background: var(--bg-soft);
  padding: 120px var(--wp--preset--spacing--gutter);
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  position: relative;
  overflow: hidden;
}
.also-offered::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.22), transparent 70%);
  pointer-events: none;
}
.also-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.also-header {
  text-align: center;
  margin-bottom: 60px;
}
.also-header .also-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.also-header h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem) !important;
  color: var(--blue-deep);
  line-height: 1.2 !important;
}

.also-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.also-card {
  background: var(--bg);
  padding: 48px;
  border-radius: 6px 6px 6px 60px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.also-card:nth-child(2) { border-radius: 6px 6px 60px 6px; }
.also-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -25px rgba(30, 58, 95, 0.25);
}

.also-card .icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.also-card .icon svg {
  width: 26px;
  height: 26px;
}
.also-card h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
  color: var(--blue-deep);
  margin-bottom: 16px !important;
  line-height: 1.25 !important;
}
.also-card h4 em {
  font-style: italic;
  color: var(--accent);
}
.also-card p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.also-card .also-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-deep);
  border-bottom: 1px solid var(--blue-deep);
  padding-bottom: 4px;
  transition: all 0.3s ease;
  text-decoration: none;
}
.also-card .also-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  gap: 14px;
}

@media (max-width: 980px) {
  .class-card-grid,
  .also-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .class-card-content { padding: 32px; }
  .also-card { padding: 36px; }
  .class-card { min-height: 360px; }
}

/* =========================================================
   BANNER ANIMATIONS — Batch 1
   All animations respect prefers-reduced-motion
   ========================================================= */

/* ----- Homepage: sunrise with breathing glow + drifting light ----- */
@keyframes sun-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes light-drift {
  0% { transform: translateX(0) translateY(0); opacity: 0.3; }
  50% { transform: translateX(60px) translateY(-20px); opacity: 0.6; }
  100% { transform: translateX(120px) translateY(0); opacity: 0.3; }
}
.banner-homepage .sun-orb { animation: sun-breathe 10s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.banner-homepage .light-particle-1 { animation: light-drift 18s ease-in-out infinite; }
.banner-homepage .light-particle-2 { animation: light-drift 22s ease-in-out infinite; animation-delay: -5s; }
.banner-homepage .light-particle-3 { animation: light-drift 26s ease-in-out infinite; animation-delay: -10s; }

/* ----- Yin Yoga: warm sunrise with sun rays ----- */
@keyframes sun-rays {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.55; }
}
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.04); opacity: 1; }
}
.banner-yin .yin-sun { animation: sun-pulse 8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.banner-yin .yin-rays { animation: sun-rays 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ----- Yoga Nidra: twinkling stars + moon glow ----- */
@keyframes twinkle-1 {
  0%, 100% { opacity: 0.4; }
  30% { opacity: 1; }
  70% { opacity: 0.6; }
}
@keyframes twinkle-2 {
  0%, 100% { opacity: 0.8; }
  40% { opacity: 0.3; }
  80% { opacity: 1; }
}
@keyframes moon-glow {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.45; }
}
.banner-nidra .star-a { animation: twinkle-1 4s ease-in-out infinite; }
.banner-nidra .star-b { animation: twinkle-2 5s ease-in-out infinite; animation-delay: -1s; }
.banner-nidra .star-c { animation: twinkle-1 6s ease-in-out infinite; animation-delay: -2s; }
.banner-nidra .star-d { animation: twinkle-2 4.5s ease-in-out infinite; animation-delay: -3s; }
.banner-nidra .moon-halo { animation: moon-glow 7s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ----- About: slow cloud drift ----- */
@keyframes cloud-drift-1 {
  0% { transform: translateX(-10%); }
  100% { transform: translateX(110%); }
}
@keyframes cloud-drift-2 {
  0% { transform: translateX(-10%); }
  100% { transform: translateX(120%); }
}
.banner-about .cloud-a { animation: cloud-drift-1 60s linear infinite; }
.banner-about .cloud-b { animation: cloud-drift-2 80s linear infinite; animation-delay: -30s; }

/* ----- Classes index: subtle mountain gradient breathing ----- */
@keyframes scene-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}
.banner-classes .distant-mountains { animation: scene-breathe 14s ease-in-out infinite; }

/* Accessibility — pause all banner animations for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .banner-homepage *,
  .banner-yin *,
  .banner-nidra *,
  .banner-about *,
  .banner-classes * {
    animation: none !important;
  }
}

/* =========================================================
   BANNER ANIMATIONS — Batch 2
   FAQ, Testimonials, Bibliography, Contact, Book Now
   ========================================================= */

/* ----- FAQ: gentle sun glow over soft daytime mountains ----- */
@keyframes faq-sun-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.05); }
}
.banner-faq .faq-sun { animation: faq-sun-glow 9s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ----- Testimonials: sunset with golden sun descending slowly ----- */
@keyframes sun-descend {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@keyframes warm-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.7; }
}
.banner-testimonials .testimonials-sun { animation: sun-descend 12s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.banner-testimonials .testimonials-glow { animation: warm-glow 10s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ----- Bibliography: side-lit mountains with single drifting cloud ----- */
@keyframes cloud-slow-drift {
  0% { transform: translateX(-15%); }
  100% { transform: translateX(115%); }
}
@keyframes side-light {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.6; }
}
.banner-bibliography .biblio-cloud { animation: cloud-slow-drift 90s linear infinite; }
.banner-bibliography .biblio-light { animation: side-light 11s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ----- Contact: peaceful still scene with very subtle sky shift ----- */
@keyframes sky-breath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}
.banner-contact .contact-sky-shift { animation: sky-breath 16s ease-in-out infinite; }

/* ----- Book Now: clear morning with rising warmth ----- */
@keyframes morning-warmth {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
.banner-booknow .morning-glow { animation: morning-warmth 11s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* Batch 2 reduced motion */
@media (prefers-reduced-motion: reduce) {
  .banner-faq *,
  .banner-testimonials *,
  .banner-bibliography *,
  .banner-contact *,
  .banner-booknow * {
    animation: none !important;
  }
}

/* ===== BOOK NOW PAGE ===== */

.packages-promo {
  padding: 120px var(--wp--preset--spacing--gutter) 60px;
  max-width: 1280px;
  margin: 0 auto;
}

.packages-card {
  background: var(--blue-deep);
  color: var(--bg);
  padding: 60px;
  border-radius: 6px 6px 6px 140px;
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.packages-card::before {
  content: '';
  position: absolute;
  top: -150px; right: -100px;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 150, 104, 0.2), transparent 60%);
  pointer-events: none;
}
.packages-card::after {
  content: '';
  position: absolute;
  bottom: -200px; left: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.2), transparent 70%);
  pointer-events: none;
}
.packages-content {
  position: relative;
  z-index: 2;
}
.packages-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.packages-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent-soft);
}
.packages-card h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
  line-height: 1.2 !important;
  color: var(--bg) !important;
  margin-bottom: 20px !important;
}
.packages-card h2 em {
  font-style: italic;
  color: var(--accent-soft);
}
.packages-card .note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: rgba(246, 248, 251, 0.75);
  margin: 0;
}
.packages-cta {
  position: relative;
  z-index: 2;
}
.btn-lg {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  padding: 20px 40px !important;
  background: var(--accent) !important;
  color: var(--blue-deep) !important;
  border-radius: 100px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.4s ease;
  white-space: nowrap;
}
.btn-lg:hover {
  background: var(--bg) !important;
  color: var(--blue-deep) !important;
  transform: translateY(-2px);
}

.booking-section {
  padding: 100px var(--wp--preset--spacing--gutter) 140px;
  max-width: 1280px;
  margin: 0 auto;
}
.booking-header {
  text-align: center;
  margin-bottom: 60px;
}
.booking-header .booking-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.booking-header .booking-eyebrow::before,
.booking-header .booking-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.booking-header h2 {
  margin-bottom: 24px !important;
}
.booking-header p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

.booking-embed-zone {
  min-height: 400px;
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 80px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
}
.booking-embed-zone.live {
  padding: 0;
  border: none;
  background: transparent;
}
.embed-placeholder {
  text-align: center;
  max-width: 560px;
}
.embed-placeholder .icon {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--blue);
}
.embed-placeholder .icon svg {
  width: 40px;
  height: 40px;
}
.embed-placeholder h3 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 1.6rem !important;
  color: var(--blue-deep) !important;
  margin-bottom: 14px !important;
}
.embed-placeholder p {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.embed-placeholder code {
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 13px;
  color: var(--blue-deep);
}

.practical-notes-section {
  background: var(--bg-soft);
  padding: 100px var(--wp--preset--spacing--gutter);
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  position: relative;
  overflow: hidden;
}
.practical-notes-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -200px;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.2), transparent 70%);
  pointer-events: none;
}
.practical-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.practical-header {
  text-align: center;
  margin-bottom: 60px;
}
.practical-header .eyebrow {
  justify-content: center;
  margin-bottom: 20px;
}
.practical-header h3 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  color: var(--blue-deep) !important;
  line-height: 1.2 !important;
}
.practical-header h3 em {
  font-style: italic;
  color: var(--accent);
}

.practical-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.practical-item {
  padding: 32px;
  background: var(--bg);
  border-radius: 6px;
}
.practical-item .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 42px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 20px;
  font-weight: 300;
}
.practical-item h4 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 1.3rem !important;
  color: var(--blue-deep) !important;
  margin-bottom: 14px !important;
  line-height: 1.3 !important;
}
.practical-item p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.practical-item p a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  text-decoration: none;
  padding-bottom: 1px;
}
.practical-item p a:hover {
  color: var(--blue-deep);
  border-bottom-color: var(--blue-deep);
}

@media (max-width: 980px) {
  .packages-card {
    grid-template-columns: 1fr;
    padding: 40px;
    gap: 32px;
    border-radius: 6px 6px 6px 80px;
  }
  .practical-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .booking-embed-zone { padding: 60px 24px; }
}

/* =========================================================
   NUCLEAR CSS — FORCING MOBILE NAV STYLES
   These styles target multiple possible WP class variations to ensure
   they apply regardless of WordPress version differences.
   ========================================================= */

/* Force hamburger to far right via header layout */
@media screen and (max-width: 1023px) {
  header.site-header,
  header.wp-block-template-part.site-header {
    justify-content: space-between !important;
  }

  header.site-header > nav.wp-block-navigation,
  header.site-header .wp-block-navigation,
  header .wp-block-navigation {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
  }
}

/* Any WP-rendered mobile overlay MUST cover the entire viewport */
@media screen and (max-width: 1023px) {
  html body .wp-block-navigation__responsive-container.is-menu-open,
  html body nav .wp-block-navigation__responsive-container.is-menu-open,
  html body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
  html body div.wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999 !important;
    background:
      radial-gradient(circle at 85% 15%, rgba(201, 169, 97, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 10% 85%, rgba(127, 162, 196, 0.12) 0%, transparent 55%),
      linear-gradient(180deg, #f6f8fb 0%, #e8eef5 100%) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Close button — top right corner of viewport */
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
  html body button.wp-block-navigation__responsive-container-close {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 1000000 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #1e3a5f !important;
  }

  /* With admin bar */
  body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
  }
  body.admin-bar .wp-block-navigation__responsive-container-close {
    top: 52px !important;
  }

  /* Content wrapper — tight top, centered, max width */
  html body .wp-block-navigation__responsive-container.is-menu-open > *:not(.wp-block-navigation__responsive-container-close),
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-inner {
    padding: 80px 32px 48px !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Top-level menu items */
  html body .wp-block-navigation__responsive-container.is-menu-open ul,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  html body .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    border-bottom: 1px solid rgba(30, 58, 95, 0.1) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  /* Top-level links */
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > a {
    display: block !important;
    padding: 20px 4px !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #1e3a5f !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: transparent !important;
  }
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a:hover {
    color: #c9a961 !important;
  }

  /* Submenu — always expanded, no toggle arrows */
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    display: none !important;
  }

  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 14px 0 !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    left: auto !important;
    top: auto !important;
    list-style: none !important;
  }

  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    padding: 0 0 0 18px !important;
    border-left: 2px solid rgba(30, 58, 95, 0.15) !important;
    border-bottom: none !important;
    margin: 2px 0 2px 4px !important;
    display: block !important;
  }

  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
    padding: 10px 0 !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 11.5px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #3d4e63 !important;
    font-weight: 400 !important;
    background: transparent !important;
  }
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:hover {
    color: #c9a961 !important;
  }
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:hover {
    border-left-color: #c9a961 !important;
  }

  /* Book Now pill at bottom */
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-book-now {
    border-bottom: none !important;
    margin-top: 32px !important;
  }
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-book-now > a {
    display: block !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    padding: 18px 40px !important;
    background: #1e3a5f !important;
    color: #f6f8fb !important;
    text-align: center !important;
    border-radius: 40px !important;
    font-size: 13px !important;
    letter-spacing: 0.22em !important;
    font-weight: 500 !important;
  }
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-book-now > a:hover {
    background: #c9a961 !important;
    color: #f6f8fb !important;
  }
}

/* =========================================================
   OVERRIDE WP's CSS CUSTOM PROPERTIES for navigation layout
   WP uses --navigation-layout-* variables that we need to neutralize on mobile
   ========================================================= */
@media screen and (max-width: 1023px) {
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    --navigation-layout-direction: column !important;
    --navigation-layout-justify: flex-start !important;
    --navigation-layout-align: stretch !important;
    --navigation-layout-wrap: nowrap !important;
  }

  /* Force the content wrapper to lay out children as a column */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }
}

/* =========================================================
   VIDEO LIBRARY PAGE
   ========================================================= */

/* Banner scene — night sky with moon glow and breathing mountains */
.banner-video-library .vid-glow {
  animation: vid-moon-glow 10s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-video-library .vid-stars circle {
  animation: vid-star-twinkle 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-video-library .vid-stars circle:nth-child(odd) { animation-delay: -1.5s; }
.banner-video-library .vid-stars circle:nth-child(3n) { animation-delay: -3s; animation-duration: 5s; }
.banner-video-library .vid-stars circle:nth-child(5n) { animation-duration: 6s; }

@keyframes vid-moon-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}
@keyframes vid-star-twinkle {
  0%, 100% { opacity: var(--star-base, 0.5); }
  50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-video-library .vid-glow,
  .banner-video-library .vid-stars circle {
    animation: none !important;
  }
}

/* Intro section */
.lib-intro {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 100px 32px 60px !important;
  text-align: center;
}
.lib-intro h2 {
  margin-bottom: 24px;
}
.lib-intro-para {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto !important;
}

/* Pricing section — navy card with gold glow radial accents */
.pricing-section {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 40px 32px 80px !important;
}
.pricing-card {
  position: relative;
  background: linear-gradient(135deg, #1e3a5f 0%, #2b4866 100%);
  border-radius: 0 120px 0 120px;
  padding: 80px 80px 70px;
  color: var(--bg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
}
.pricing-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.pricing-card::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.pricing-content {
  position: relative;
  z-index: 2;
}
.pricing-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 24px;
  font-family: var(--sans);
  font-weight: 500;
}
.pricing-card h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1.15;
  color: var(--bg);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.pricing-card h3 em {
  font-style: italic;
  color: var(--accent-soft);
}
.pricing-desc {
  color: rgba(246, 248, 251, 0.82);
  line-height: 1.7;
  margin: 0 0 40px;
  font-size: 15px;
}
.pricing-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 44px;
  padding: 28px 0;
  border-top: 1px solid rgba(246, 248, 251, 0.15);
  border-bottom: 1px solid rgba(246, 248, 251, 0.15);
}
.pricing-stat .big {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 400;
  color: var(--accent-soft);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.pricing-stat .label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 248, 251, 0.7);
  font-family: var(--sans);
}
.pricing-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--accent);
  color: var(--blue-deep) !important;
  border-radius: 40px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.4s ease;
}
.pricing-cta:hover {
  background: var(--bg);
  color: var(--blue-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(10, 24, 38, 0.25);
}
.pricing-cta svg {
  transition: transform 0.3s ease;
}
.pricing-cta:hover svg {
  transform: translateX(4px);
}

/* Pricing visual — stylized play button */
.pricing-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-disc {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(224, 198, 138, 0.2) 0%, rgba(224, 198, 138, 0.05) 60%, transparent 80%);
  border: 1px solid rgba(224, 198, 138, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: play-pulse 4s ease-in-out infinite;
}
.play-disc::before {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(224, 198, 138, 0.15);
}
.play-disc::after {
  content: '';
  position: absolute;
  inset: 48px;
  border-radius: 50%;
  background: rgba(224, 198, 138, 0.08);
  border: 1px solid rgba(224, 198, 138, 0.25);
}
.play-triangle {
  position: relative;
  z-index: 2;
  width: 0;
  height: 0;
  border-left: 26px solid var(--accent-soft);
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  margin-left: 8px;
}
@keyframes play-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .play-disc { animation: none; }
}

/* Note section */
.note-section {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 32px 80px !important;
}
.note-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 32px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.note-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
}
.note-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 15px;
}
.note-card strong {
  color: var(--ink);
  font-weight: 500;
}

/* How it works — 3 steps */
.how-it-works {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 60px 32px 100px !important;
}
.how-header {
  text-align: center;
  margin-bottom: 60px;
}
.how-header h3 {
  margin-top: 12px;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}
.how-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%);
  opacity: 0.4;
  z-index: 0;
}
.how-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 12px;
}
.how-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 28px;
}
.how-step h4 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 400;
  color: var(--blue-deep);
  margin: 0 0 14px;
}
.how-step p {
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 15px;
  margin: 0;
  max-width: 280px;
  margin: 0 auto;
}

/* Video Library responsive breakpoints */
@media (max-width: 900px) {
  .pricing-card {
    grid-template-columns: 1fr;
    padding: 60px 40px;
    gap: 40px;
    border-radius: 0 80px 0 80px;
  }
  .pricing-visual {
    order: -1;
  }
  .play-disc {
    width: 180px;
    height: 180px;
  }
  .play-disc::after { inset: 36px; }
  .play-triangle {
    border-left-width: 20px;
    border-top-width: 14px;
    border-bottom-width: 14px;
  }
  .pricing-stats {
    gap: 16px;
  }
  .how-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .how-grid::before {
    display: none;
  }
}

@media (max-width: 600px) {
  .lib-intro { padding: 70px 24px 40px !important; }
  .pricing-section { padding: 30px 20px 60px !important; }
  .pricing-card { padding: 50px 28px; border-radius: 0 60px 0 60px; }
  .pricing-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .pricing-stat .big { font-size: 1.6rem; }
  .pricing-stat .label { font-size: 9.5px; letter-spacing: 0.14em; }
  .note-section { padding: 0 20px 60px !important; }
  .note-card { padding: 22px 20px; gap: 14px; }
  .how-it-works { padding: 40px 20px 80px !important; }
  .how-grid { gap: 40px; }
}

/* =========================================================
   FREE YIN YOGA CLASS PAGE
   ========================================================= */

/* Banner scene — golden sun, warm welcoming feel, breathing mountains */
.banner-free-class .free-sun-glow {
  animation: free-sun-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-free-class .free-sun-core {
  animation: free-sun-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes free-sun-breathe {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.08); opacity: 0.55; }
}
@keyframes free-sun-pulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-free-class .free-sun-glow,
  .banner-free-class .free-sun-core {
    animation: none !important;
  }
}

/* Gold ribbon on banner — "Free · No commitment" */
.banner-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  background: rgba(10, 24, 38, 0.72);
  border: 1px solid rgba(224, 198, 138, 0.45);
  border-radius: 40px;
  color: var(--accent-soft);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(10, 24, 38, 0.18);
}
.banner-ribbon .star {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  animation: ribbon-star-pulse 2.5s ease-in-out infinite;
}
@keyframes ribbon-star-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .banner-ribbon .star { animation: none; }
}

/* Intro section — centered invitation */
.free-intro {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 100px 32px 60px !important;
  text-align: center;
}
.intro-ornament {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 500;
  margin-bottom: 36px;
  justify-content: center;
}
.intro-ornament::before,
.intro-ornament::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.free-intro .intro-lead {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 32px;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.free-intro .intro-lead-secondary {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 300;
}

/* Video promo card — navy card with arched corners, video preview + content */
.video-promo {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 40px 32px 100px !important;
}
.video-card {
  position: relative;
  background: linear-gradient(135deg, #1e3a5f 0%, #2b4866 100%);
  border-radius: 0 120px 0 120px;
  padding: 70px 70px;
  color: var(--bg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.video-card::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 150, 104, 0.2), transparent 60%);
  pointer-events: none;
}
.video-card::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.2), transparent 70%);
  pointer-events: none;
}

.video-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 20px 50px rgba(10, 24, 38, 0.4);
  z-index: 2;
}
.video-preview:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(10, 24, 38, 0.5);
}
.video-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}
.video-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.1) 0%, rgba(10, 24, 38, 0.25) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease;
}
.video-preview:hover .video-preview-overlay {
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.2) 0%, rgba(10, 24, 38, 0.3) 100%);
}
.play-btn {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(246, 248, 251, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease, background 0.4s ease;
}
.play-btn::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(246, 248, 251, 0.4);
  animation: play-ring-expand 3s ease-out infinite;
}
.video-preview:hover .play-btn {
  transform: scale(1.1);
  background: var(--accent-soft);
}
.play-btn-triangle {
  width: 0;
  height: 0;
  border-left: 22px solid var(--blue-deep);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}
@keyframes play-ring-expand {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .play-btn::before { animation: none; }
}
.video-label {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(10, 24, 38, 0.7);
  border-radius: 20px;
  color: var(--bg);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  backdrop-filter: blur(6px);
  z-index: 3;
}
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: live-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

.video-card-content {
  position: relative;
  z-index: 2;
}
.video-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 24px;
  font-family: var(--sans);
  font-weight: 500;
}
.video-card h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1.15;
  color: var(--bg);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.video-card h2 em {
  font-style: italic;
  color: var(--accent-soft);
}
.video-card p {
  color: rgba(246, 248, 251, 0.85);
  line-height: 1.75;
  margin: 0 0 36px;
  font-size: 15.5px;
}
.video-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 34px;
  background: var(--accent);
  color: var(--blue-deep) !important;
  border-radius: 40px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.4s ease;
}
.video-card-cta:hover {
  background: var(--bg);
  color: var(--blue-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(10, 24, 38, 0.25);
}
.video-card-cta svg {
  transition: transform 0.3s ease;
}
.video-card-cta:hover svg {
  transform: translateX(4px);
}

/* Continue journey — 2 cards with mirrored arched corners */
.continue-section {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 40px 32px 120px !important;
}
.continue-header {
  text-align: center;
  margin-bottom: 60px;
}
.continue-header h3 {
  margin: 12px 0 20px;
}
.continue-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto !important;
}
.continue-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.continue-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 48px 44px 44px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none !important;
  transition: all 0.4s ease;
  overflow: hidden;
}
.continue-card:nth-child(1) { border-radius: 6px 6px 6px 70px; }
.continue-card:nth-child(2) { border-radius: 6px 6px 70px 6px; }
.continue-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(30, 58, 95, 0.2);
  border-color: var(--accent);
}
.continue-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  font-weight: 400;
}
.continue-card h4 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 400;
  color: var(--blue-deep);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.continue-card h4 em {
  font-style: italic;
  color: var(--accent);
}
.continue-card p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 28px;
  flex: 1;
}
.continue-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  transition: all 0.3s ease;
}
.continue-card:hover .continue-link {
  color: var(--accent);
  border-top-color: var(--accent);
  gap: 16px;
}
.continue-link svg {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.continue-card:hover .continue-link svg {
  transform: translateX(3px);
}

/* Free Class responsive breakpoints */
@media (max-width: 900px) {
  .video-card {
    grid-template-columns: 1fr;
    padding: 50px 40px;
    gap: 40px;
    border-radius: 0 80px 0 80px;
  }
  .continue-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .continue-card:nth-child(1),
  .continue-card:nth-child(2) {
    border-radius: 6px 6px 6px 60px;
  }
  .continue-card:nth-child(2) {
    border-radius: 6px 6px 60px 6px;
  }
}

@media (max-width: 600px) {
  .free-intro { padding: 70px 24px 40px !important; }
  .video-promo { padding: 30px 20px 70px !important; }
  .video-card { padding: 40px 28px; border-radius: 0 60px 0 60px; gap: 32px; }
  .continue-section { padding: 30px 20px 80px !important; }
  .continue-card { padding: 36px 28px; }
  .play-btn { width: 68px; height: 68px; }
  .play-btn-triangle { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
}

/* =========================================================
   YIN YOGA PAGE
   ========================================================= */

/* Lead quote section — centered ornament + large italic intro */
.yin-lead {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 120px 32px 90px !important;
  text-align: center;
}
.lead-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 48px;
  color: var(--accent);
}
.lead-ornament .line {
  width: 60px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.lead-ornament svg {
  flex-shrink: 0;
}
.yin-lead .lead-text {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  font-weight: 300;
  letter-spacing: -0.005em;
}
.yin-lead .lead-text strong {
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
}

/* 2-column sticky content section — label left (sticky), body right */
.content-section {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 40px 32px 100px !important;
}
.content-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  align-items: start;
}
.content-grid .section-label {
  position: sticky;
  top: 120px;
  padding-top: 14px;
}
.content-body {
  max-width: 740px;
}
.content-body h3 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--blue-deep);
  margin: 0 0 40px;
  letter-spacing: -0.01em;
}
.content-body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.content-body .pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  color: var(--blue-deep);
  padding: 28px 0 28px 32px;
  border-left: 2px solid var(--accent);
  margin: 36px 0;
  font-weight: 300;
}

/* Dark section — Meditation / Stillness */
.divider-section {
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(201, 169, 97, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, #1e3a5f 0%, #152a47 100%);
  color: var(--bg);
  padding: 120px 32px;
  position: relative;
  overflow: hidden;
}
.divider-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}
.divider-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.divider-section .content-grid {
  gap: 80px;
}
.divider-section .section-label {
  color: rgba(246, 248, 251, 0.9) !important;
}
.divider-section .section-label::before {
  background: var(--accent-soft);
}
.divider-section .section-label .sublabel {
  color: var(--accent-soft);
}
.divider-section .content-body h3 {
  color: var(--bg);
}
.divider-section .content-body h3 em {
  color: var(--accent-soft) !important;
  font-style: italic;
}
.divider-section .content-body p {
  color: rgba(246, 248, 251, 0.8);
}
.divider-section .content-body .pull {
  color: var(--accent-soft);
  border-left-color: var(--accent);
}

/* Closing section — "Off the mat, into the world" */
.yin-closing {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 120px 32px 100px !important;
  text-align: center;
}
.closing-mantra {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 36px;
  font-weight: 400;
}
.yin-closing h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--blue-deep);
  margin: 0 0 48px;
  letter-spacing: -0.015em;
}
.yin-closing h2 em {
  font-style: italic;
  color: var(--accent);
}
.mantra-line {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 auto 32px !important;
  max-width: 720px;
  font-weight: 300;
}
.mantra-line.mantra-accent {
  color: var(--accent) !important;
  font-style: italic;
  margin-bottom: 56px !important;
}
.mantra-line.mantra-accent em {
  display: block;
  margin-top: 8px;
}

/* Related practices — 2 image-card grid */
.related-practices {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 40px 32px 120px !important;
}
.related-header {
  text-align: center;
  margin-bottom: 60px;
}
.related-header h2 {
  margin: 14px 0 0;
}
.related-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 500;
  margin-bottom: 0;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.related-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--bg);
  transition: transform 0.5s ease;
}
.related-card:hover {
  transform: translateY(-4px);
}
.related-card .card-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease;
}
.related-card:hover .card-bg {
  transform: scale(1.04);
}
.related-card .card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.1) 0%, rgba(10, 24, 38, 0.25) 40%, rgba(10, 24, 38, 0.85) 100%);
  transition: background 0.4s ease;
}
.related-card:hover .card-bg::after {
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.2) 0%, rgba(10, 24, 38, 0.4) 40%, rgba(10, 24, 38, 0.9) 100%);
}
.related-card .card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 44px 36px;
  z-index: 2;
}
.related-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 400;
  color: var(--bg);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.related-card h3 em {
  font-style: italic;
  color: var(--accent-soft);
}
.related-card .card-content p {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(246, 248, 251, 0.9);
  font-weight: 500;
  transition: gap 0.3s ease;
}
.related-card:hover .card-content p {
  gap: 14px;
  color: var(--accent-soft);
}
.related-card .card-content p svg {
  flex-shrink: 0;
}

/* Yin responsive breakpoints */
@media (max-width: 960px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .content-grid .section-label {
    position: static;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .yin-lead { padding: 80px 24px 50px !important; }
  .content-section { padding: 20px 20px 70px !important; }
  .divider-section { padding: 80px 20px; }
  .content-body h3 { margin-bottom: 28px; }
  .content-body .pull { padding: 20px 0 20px 20px; margin: 24px 0; }
  .yin-closing { padding: 80px 20px 70px !important; }
  .related-practices { padding: 20px 20px 80px !important; }
  .related-card .card-content { padding: 28px 28px 24px; }
  .lead-ornament .line { width: 40px; }
}

/* =========================================================
   YOGA NIDRA PAGE
   (reuses .yin-lead, .lead-ornament, .content-section, .content-grid,
    .section-label, .content-body, .pull, .related-practices, .related-grid,
    .related-card, .yin-closing patterns)
   ========================================================= */

/* Chakra section — soft background with gradient glows + 2-col layout */
.chakra-section {
  background: var(--bg-soft);
  padding: 120px 32px;
  position: relative;
  overflow: hidden;
  margin: 60px 0;
}
.chakra-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.25), transparent 70%);
  pointer-events: none;
}
.chakra-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  right: -120px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 150, 104, 0.12), transparent 70%);
  pointer-events: none;
}
.chakra-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.chakra-visual {
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
  position: relative;
}
.chakra-visual svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: chakra-breathe 8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes chakra-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  .chakra-visual svg { animation: none; }
}
.chakra-copy .chakra-note {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  font-family: var(--sans);
  font-weight: 500;
}
.chakra-copy h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 2.8vw, 2.3rem);
  line-height: 1.2;
  color: var(--blue-deep);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.chakra-copy h3 em {
  font-style: italic;
  color: var(--accent);
}
.chakra-copy p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.chakra-copy p:last-child {
  margin-bottom: 0;
}

/* Private sessions card — navy with asymmetric bottom-right arch, 2-col image/content */
.private-section {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 100px 32px 120px !important;
}
.private-card {
  background: linear-gradient(135deg, #1e3a5f 0%, #152a47 100%);
  color: var(--bg);
  border-radius: 6px 6px 200px 6px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  position: relative;
}
.private-card::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 150, 104, 0.2), transparent 60%);
  pointer-events: none;
}
.private-content {
  padding: 80px 70px;
  position: relative;
  z-index: 2;
}
.private-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 24px;
  font-family: var(--sans);
  font-weight: 500;
}
.private-content h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.15;
  color: var(--bg);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.private-content h3 em {
  font-style: italic;
  color: var(--accent-soft);
}
.private-content p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(246, 248, 251, 0.82);
  margin: 0 0 36px;
}
.private-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 24px 0;
  border-top: 1px solid rgba(246, 248, 251, 0.15);
  border-bottom: 1px solid rgba(246, 248, 251, 0.15);
  margin-bottom: 36px;
}
.private-meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.private-meta .label {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(246, 248, 251, 0.55);
  font-family: var(--sans);
  font-weight: 500;
}
.private-meta .value {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--accent-soft);
  font-weight: 400;
}
.private-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--accent);
  color: var(--blue-deep) !important;
  border-radius: 40px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.4s ease;
}
.private-cta:hover {
  background: var(--bg);
  color: var(--blue-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(10, 24, 38, 0.25);
}
.private-cta svg { transition: transform 0.3s ease; }
.private-cta:hover svg { transform: translateX(4px); }

.private-visual {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}
.private-visual svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nidra responsive breakpoints */
@media (max-width: 960px) {
  .chakra-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .chakra-visual {
    max-width: 360px;
  }
  .private-card {
    grid-template-columns: 1fr;
    border-radius: 6px 6px 100px 6px;
  }
  .private-content {
    padding: 60px 44px;
  }
  .private-visual {
    min-height: 280px;
  }
}

@media (max-width: 600px) {
  .chakra-section { padding: 80px 20px; margin: 40px 0; }
  .chakra-visual { max-width: 260px; }
  .private-section { padding: 60px 20px 80px !important; }
  .private-card { border-radius: 6px 6px 70px 6px; }
  .private-content { padding: 48px 28px; }
  .private-meta { gap: 24px; }
  .private-visual { min-height: 220px; }
}

/* =========================================================
   INNER SANCTUARY OF STILLNESS PAGE
   (reuses .related-practices, .related-grid, .related-card, .yin-closing patterns)
   ========================================================= */

/* Banner — soft sun with gentle breath */
.banner-sanctuary .sanctuary-sun {
  animation: sanctuary-sun-breathe 10s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-sanctuary .sanctuary-glow {
  animation: sanctuary-glow-pulse 12s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes sanctuary-sun-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes sanctuary-glow-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .banner-sanctuary .sanctuary-sun,
  .banner-sanctuary .sanctuary-glow {
    animation: none !important;
  }
}

/* Prose flow — drop-cap opener with gold accent, centered italic intro */
.prose-section {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 140px 32px 80px !important;
}
.prose-opener {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  line-height: 1.5 !important;
  color: var(--blue-deep) !important;
  text-align: center !important;
  margin: 0 auto 60px !important;
  letter-spacing: -0.005em !important;
  max-width: 680px;
  position: relative;
  padding: 36px 0;
}
.prose-opener::before,
.prose-opener::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--accent);
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.prose-opener::before { top: 0; }
.prose-opener::after { bottom: 0; }
.prose-body p {
  font-size: 18px;
  line-height: 1.9;
  color: var(--ink-soft);
  margin: 0 0 36px;
}
/* Drop cap on the FIRST paragraph of prose-body */
.prose-body > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-size: 5.5em;
  float: left;
  line-height: 0.85;
  padding: 6px 14px 0 0;
  color: var(--accent);
  font-weight: 400;
}

/* Affirmation callout — visually lifted, inside prose flow */
.affirmations-inline {
  background: var(--bg-soft);
  padding: 80px 60px;
  margin: 60px 0;
  border-radius: 6px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.affirmations-inline::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.2), transparent 70%);
  pointer-events: none;
}
.affirmations-inline::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.12), transparent 70%);
  pointer-events: none;
}
.affirmations-inline-inner {
  position: relative;
  z-index: 2;
}
.affirm-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 32px;
  font-family: var(--sans);
  font-weight: 500;
}
.affirm-list {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.5;
  color: var(--blue-deep);
}
.affirm-list span {
  display: block;
  padding: 18px 0;
}
.affirm-list span + span {
  border-top: 1px solid rgba(30, 58, 95, 0.12);
}

/* Sanctuary closing — reuses a lighter form of closing-cta-light */
.sanctuary-closing {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 80px 32px 120px !important;
  text-align: center;
}
.sanctuary-closing .closing-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 32px;
  font-weight: 400;
}
.sanctuary-closing h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--blue-deep);
  margin: 0 0 48px;
  letter-spacing: -0.015em;
}
.sanctuary-closing h2 em {
  font-style: italic;
  color: var(--accent);
}

/* Sanctuary responsive breakpoints */
@media (max-width: 600px) {
  .prose-section { padding: 80px 24px 60px !important; }
  .prose-body p { font-size: 16px; line-height: 1.85; margin-bottom: 28px; }
  .prose-body > p:first-of-type::first-letter { font-size: 4.5em; padding: 4px 10px 0 0; }
  .affirmations-inline { padding: 56px 28px; margin: 40px 0; }
  .affirm-list span { padding: 14px 0; }
  .sanctuary-closing { padding: 60px 24px 80px !important; }
}

/* =========================================================
   FULL MOON YOGA PAGE
   (reuses .yin-lead, .lead-ornament, .content-section, .content-grid,
    .section-label, .content-body, .pull, .divider-section, .yin-closing,
    .related-practices, .related-grid, .related-card)
   ========================================================= */

/* Banner — subtle moon glow breathing, star twinkle */
.banner-full-moon .fm-moon-glow {
  animation: fm-moon-glow 14s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-full-moon .fm-moon-core {
  animation: fm-moon-core 10s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-full-moon .fm-stars circle {
  animation: fm-star-twinkle 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-full-moon .fm-stars circle:nth-child(odd) { animation-delay: -1.8s; }
.banner-full-moon .fm-stars circle:nth-child(3n) { animation-delay: -3.2s; animation-duration: 6s; }
.banner-full-moon .fm-stars circle:nth-child(5n) { animation-duration: 7s; }

@keyframes fm-moon-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.04); }
}
@keyframes fm-moon-core {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.96; }
}
@keyframes fm-star-twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-full-moon .fm-moon-glow,
  .banner-full-moon .fm-moon-core,
  .banner-full-moon .fm-stars circle {
    animation: none !important;
  }
}

/* Moon Calendar — dark navy section, 12-card grid with alternating arched corners */
.moon-calendar {
  padding: 140px 32px;
  background: var(--blue-deep);
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.moon-calendar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -200px;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.15), transparent 70%);
  pointer-events: none;
}
.moon-calendar::after {
  content: '';
  position: absolute;
  bottom: -250px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 150, 104, 0.15), transparent 70%);
  pointer-events: none;
}
.moon-calendar-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.moon-calendar-header {
  text-align: center;
  margin-bottom: 80px;
}
.moon-calendar-header .moon-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 20px;
  font-family: var(--sans);
  font-weight: 500;
}
.moon-calendar-header h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bg);
  margin: 0;
}
.moon-calendar-header h2 em {
  font-style: italic;
  color: var(--accent-soft);
}
.moon-calendar-header p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: rgba(246, 248, 251, 0.65);
  margin: 20px 0 0;
}

.moon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.moon-card {
  text-align: center;
  padding: 40px 20px 32px;
  border: 1px solid rgba(246, 248, 251, 0.12);
  border-radius: 6px 6px 80px 6px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  background: rgba(246, 248, 251, 0.02);
}
.moon-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-4px);
  background: rgba(246, 248, 251, 0.04);
}
.moon-card:hover .moon-orb {
  transform: scale(1.08);
  box-shadow: 0 0 50px rgba(244, 229, 203, 0.4);
}
.moon-card:nth-child(4n+2) { border-radius: 6px 6px 6px 80px; }
.moon-card:nth-child(4n+3) { border-radius: 80px 6px 6px 6px; }
.moon-card:nth-child(4n) { border-radius: 6px 80px 6px 6px; }

.moon-card .month {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 20px;
  font-family: var(--sans);
  font-weight: 500;
}
.moon-card .moon-orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f9f4e8, #b8cde0);
  margin: 0 auto 22px;
  box-shadow: 0 0 30px rgba(244, 229, 203, 0.25);
  transition: all 0.4s ease;
}
.moon-card .name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 20px;
  font-style: italic;
  color: var(--bg);
  line-height: 1.25;
}
.moon-source {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: rgba(246, 248, 251, 0.5);
  margin-top: 60px;
}

/* Class format callout — soft bg card with asymmetric top-right arch */
.format-section {
  padding: 120px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.format-card {
  background: var(--bg-soft);
  padding: 80px 70px;
  border-radius: 6px 200px 6px 6px;
  position: relative;
  overflow: hidden;
}
.format-card::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -50px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 150, 104, 0.15), transparent 70%);
  pointer-events: none;
}
.format-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  font-family: var(--sans);
  font-weight: 500;
  position: relative;
  z-index: 2;
}
.format-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.2;
  color: var(--blue-deep);
  margin: 0 0 40px;
  max-width: 700px;
  position: relative;
  z-index: 2;
  letter-spacing: -0.01em;
}
.format-card h3 em {
  font-style: italic;
  color: var(--accent);
}
.format-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 40px 0 0;
  position: relative;
  z-index: 2;
}
.format-step {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.format-step .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 10px;
}
.format-step h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--blue-deep);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.format-step p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.format-note {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 700px;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

/* Full Moon responsive breakpoints */
@media (max-width: 1100px) {
  .moon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .moon-card:nth-child(4n+2),
  .moon-card:nth-child(4n+3),
  .moon-card:nth-child(4n) { border-radius: 6px 6px 80px 6px; }
  .moon-card:nth-child(3n+2) { border-radius: 6px 6px 6px 80px !important; }
  .moon-card:nth-child(3n) { border-radius: 80px 6px 6px 6px !important; }
}

@media (max-width: 760px) {
  .moon-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .moon-card:nth-child(odd) { border-radius: 6px 6px 6px 60px !important; }
  .moon-card:nth-child(even) { border-radius: 6px 6px 60px 6px !important; }
  .format-steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .moon-calendar { padding: 80px 20px; }
  .moon-calendar-header { margin-bottom: 56px; }
  .moon-card { padding: 32px 16px 28px; }
  .moon-card .name { font-size: 17px; }
  .format-section { padding: 70px 20px; }
  .format-card { padding: 50px 28px; border-radius: 6px 100px 6px 6px; }
}

/* =========================================================
   HOMEPAGE
   Uses distinct `.home-*` class names so these styles don't
   collide with the Classes Index or About page patterns.
   ========================================================= */

/* All top-level homepage sections break out of the page container
   and span the full viewport width, so they can have full-bleed
   backgrounds, hero images, etc. */
.home-hero,
.home-free-strip,
.home-intro,
.home-mission,
.home-poem,
.home-classes,
.home-sanctuary {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/* Ensure the main wrapper on the homepage doesn't add any
   top padding that would create a gap above the hero. */
.home-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.home .wp-site-blocks,
body.page-template-front-page .wp-site-blocks {
  padding-top: 0 !important;
}

/* ===== HERO — full-viewport immersive opener ===== */
.home-hero {
  position: relative !important;
  margin-top: 0 !important;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background: var(--blue-deep);
}
.home-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-hero-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Soft dark gradient on left half — just enough for text readability,
       not enough to mute the SVG */
    linear-gradient(90deg,
      rgba(10, 24, 38, 0.32) 0%,
      rgba(10, 24, 38, 0.12) 40%,
      rgba(10, 24, 38, 0) 70%),
    /* Light vertical darkening — keeps mountains atmospheric without
       making the whole scene feel heavy */
    linear-gradient(180deg,
      rgba(10, 24, 38, 0.18) 0%,
      rgba(10, 24, 38, 0.05) 40%,
      rgba(10, 24, 38, 0.32) 100%);
  pointer-events: none;
}
.home-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 56px 80px;
  color: var(--bg);
  max-width: 1400px;
  margin: 0 auto;
}
.home-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-weight: 500;
}
.home-hero-eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--accent-soft);
}
h1.home-hero-title {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(4rem, 9vw, 9rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.025em !important;
  color: var(--bg) !important;
  margin: 0 0 40px !important;
  max-width: 1100px;
}
h1.home-hero-title em {
  font-style: italic;
  color: var(--accent-soft) !important;
}
.home-hero-sub {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important;
  line-height: 1.5 !important;
  color: rgba(246, 248, 251, 0.92) !important;
  max-width: 640px;
  margin: 0 0 52px !important;
}
.home-hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.home-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px;
  background: var(--bg);
  color: var(--blue-deep) !important;
  border-radius: 100px;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: var(--sans);
}
.home-hero-cta:hover {
  background: var(--accent);
  color: var(--bg) !important;
  transform: translateY(-2px);
}
.home-hero-cta svg { transition: transform 0.4s ease; }
.home-hero-cta:hover svg { transform: translateX(4px); }
.home-hero-link {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bg) !important;
  border-bottom: 1px solid var(--bg);
  padding-bottom: 4px;
  transition: all 0.3s ease;
  text-decoration: none !important;
  font-family: var(--sans);
  font-weight: 500;
}
.home-hero-link:hover {
  color: var(--accent-soft) !important;
  border-color: var(--accent-soft);
}

/* Hero scene animations — dramatic moonlit night.
   v1.16.45: sky was twilight pale-blue; now a true night palette with
   layered moon halos, 26 stars in three twinkling populations, and
   two periodic shooting stars. The legacy .hero-sun and .hero-glow
   classes are preserved on the moon disc and inner halos so existing
   animations still drive them; new elements get their own rules. */
.home-hero .hero-sun {
  animation: hero-sun-breathe 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 40px rgba(247, 230, 196, 0.6));
}
.home-hero .hero-glow {
  animation: hero-glow-pulse 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
/* Outer corona — slow, large-amplitude breathe */
.home-hero .hero-corona-outer {
  animation: hero-corona-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
/* Tight halos closer to the disc — pulse at varied tempos */
.home-hero .hero-halo {
  animation: hero-halo-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.home-hero .hero-halo-tight {
  animation: hero-halo-tight-pulse 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes hero-sun-breathe {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}
@keyframes hero-glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
@keyframes hero-corona-breathe {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes hero-halo-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.06); }
}
@keyframes hero-halo-tight-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.05); }
}

/* Three star populations — different tempos for a natural sky */
.home-hero .hero-star-bright {
  animation: hero-twinkle-bright 4s ease-in-out infinite;
}
.home-hero .hero-star-med {
  animation: hero-twinkle-med 6s ease-in-out infinite;
  animation-delay: -2s;
}
.home-hero .hero-star-tiny {
  animation: hero-twinkle-tiny 8s ease-in-out infinite;
  animation-delay: -4s;
}
@keyframes hero-twinkle-bright {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@keyframes hero-twinkle-med {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}
@keyframes hero-twinkle-tiny {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.65; }
}

/* Shooting stars — each fires once per cycle, then waits dark
   for the remainder of the cycle. Two different durations so
   they don't fire in lockstep.
   v1.16.46: switched from ease-in-out to linear so the streak
   travels at constant velocity (real meteors don't decelerate),
   and made the fade happen *after* the streak reaches its
   endpoint rather than during the final stretch — that's what
   was reading as a "pause" before disappearing. */
.home-hero .hero-shoot {
  opacity: 0;
}
.home-hero .hero-shoot--a {
  animation: hero-shoot 11s linear infinite;
}
.home-hero .hero-shoot--b {
  animation: hero-shoot 16s linear infinite;
  animation-delay: -7s;
}
@keyframes hero-shoot {
  /* 0% to 1%: invisible, waiting to start.
     1% to 2%: rapid fade-in at origin.
     2% to 8%: streak travels at constant linear speed across the sky.
     8.01%: instantly hidden — the streak has reached its destination
     and disappears in a single frame, no trailing fade. The remaining
     92% of the cycle is dark, waiting for the next loop. */
  0%    { opacity: 0; transform: translateX(0) translateY(0); }
  1%    { opacity: 0; transform: translateX(0) translateY(0); }
  2%    { opacity: 1; transform: translateX(50px) translateY(20px); }
  8%    { opacity: 1; transform: translateX(900px) translateY(350px); }
  8.01% { opacity: 0; transform: translateX(900px) translateY(350px); }
  100%  { opacity: 0; transform: translateX(900px) translateY(350px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-sun,
  .home-hero .hero-glow,
  .home-hero .hero-corona-outer,
  .home-hero .hero-halo,
  .home-hero .hero-halo-tight,
  .home-hero .hero-star-bright,
  .home-hero .hero-star-med,
  .home-hero .hero-star-tiny,
  .home-hero .hero-shoot {
    animation: none !important;
  }
  .home-hero .hero-shoot { opacity: 0 !important; }
}

/* Scroll indicator */
.home-hero-scroll {
  position: absolute;
  right: 56px;
  bottom: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--bg);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.75;
  font-family: var(--sans);
  font-weight: 500;
}
.home-hero-scroll .line {
  width: 1px;
  height: 40px;
  background: currentColor;
  animation: homeScrollPulse 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes homeScrollPulse {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-scroll .line { animation: none; }
}

/* ===== FREE CLASS STRIP ===== */
.home-free-strip {
  background: var(--bg-soft) !important;
  padding: 20px 56px !important;
  border-bottom: 1px solid var(--line);
  margin: 0 !important;
}
.home-free-strip-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto !important;
}
.home-free-strip .strip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: strip-dot-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
  display: inline-block;
}
@keyframes strip-dot-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .home-free-strip .strip-dot { animation: none; }
}
.home-free-strip .strip-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1;
}
.home-free-strip a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--blue-deep) !important;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
  text-decoration: none !important;
  line-height: 1.2;
}
.home-free-strip a:hover { border-bottom-color: var(--accent); }

/* ===== INTRODUCTION — Janet portrait LEFT, copy RIGHT ===== */
.home-intro {
  padding: 100px 56px 80px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 80px;
  align-items: start;
}
.home-intro-portrait {
  aspect-ratio: 4 / 5;
  border-radius: 220px 220px 6px 6px;
  overflow: hidden;
  background: var(--bg-accent);
  box-shadow: 0 40px 80px -30px rgba(30, 58, 95, 0.3);
  position: sticky;
  top: 120px;
}
.home-intro-portrait svg {
  width: 100%;
  height: 100%;
  display: block;
}
.home-intro-content .home-intro-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  font-family: var(--sans);
  font-weight: 500;
}
.home-intro-content .home-intro-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.home-intro-content h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
  color: var(--blue-deep);
}
.home-intro-content h2 em {
  font-style: italic;
  color: var(--accent);
}
.home-intro-content p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.home-intro-content .bottom-line {
  margin-top: 44px !important;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 22px !important;
  font-style: italic;
  line-height: 1.55 !important;
  color: var(--blue-deep) !important;
}
.home-intro-content .bottom-line .bl-label {
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
}

/* ===== MISSION — copy LEFT, visual RIGHT ===== */
.home-mission {
  background: var(--bg-soft);
  padding: 100px 56px;
  position: relative;
  overflow: hidden;
}
.home-mission::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.3), transparent 70%);
  pointer-events: none;
}
.home-mission-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 100px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.home-mission-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-weight: 500;
}
.home-mission-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--blue);
}
.home-mission-content h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 40px;
  color: var(--blue-deep);
  letter-spacing: -0.02em;
}
.home-mission-content h2 em {
  font-style: italic;
  color: var(--accent);
}
.home-mission-content p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 32px;
}
.home-mission-link {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft) !important;
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: 4px;
  transition: all 0.3s ease;
  text-decoration: none !important;
  font-family: var(--sans);
  font-weight: 500;
}
.home-mission-link:hover {
  color: var(--accent) !important;
  border-color: var(--accent);
}
.home-mission-visual {
  aspect-ratio: 4 / 5;
  border-radius: 6px 6px 6px 220px;
  overflow: hidden;
  background: var(--bg-accent);
  box-shadow: 0 40px 80px -30px rgba(30, 58, 95, 0.3);
}
.home-mission-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== POEM ===== */
.home-poem {
  padding: 70px 56px 90px !important;
  text-align: center !important;
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(213, 224, 236, 0.4) 100%);
}
.home-poem-inner {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}
.home-poem-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
  color: var(--accent);
}
.home-poem-ornament .line {
  width: 40px;
  height: 1px;
  background: currentColor;
}
.home-poem-text {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.55;
  color: var(--blue-deep);
  margin-bottom: 48px;
}
.home-poem-text .stanza {
  display: block;
  margin-bottom: 0.9em;
}
.home-poem-text .stanza:last-child { margin-bottom: 0; }
.home-poem-attr {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

/* ===== CLASSES — 3-card grid (distinct from Classes index page) ===== */
.home-classes {
  padding: 100px 56px 110px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}
.home-class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.home-class-card {
  display: flex;
  flex-direction: column;
}
.home-class-visual {
  height: 280px;
  min-height: 280px;
  max-height: 280px;
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--bg-accent);
  position: relative;
  flex-shrink: 0;
}
.home-class-card:nth-child(1) .home-class-visual { border-radius: 6px 6px 160px 6px; }
.home-class-card:nth-child(2) .home-class-visual { border-radius: 6px 6px 6px 160px; }
.home-class-card:nth-child(3) .home-class-visual { border-radius: 6px 6px 160px 6px; }
.home-class-visual svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.6s ease;
}
.home-class-card:hover .home-class-visual svg {
  transform: scale(1.03);
}
.home-class-card .class-number {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 14px;
}
.home-class-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--blue-deep);
  letter-spacing: -0.005em;
}
.home-class-card p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.home-class-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blue-deep) !important;
  border-bottom: 1px solid var(--blue-deep);
  padding-bottom: 6px;
  align-self: flex-start;
  transition: all 0.3s ease;
  text-decoration: none !important;
  font-family: var(--sans);
  font-weight: 500;
}
.home-class-link:hover {
  color: var(--accent) !important;
  border-color: var(--accent);
  gap: 16px;
}

/* ===== SANCTUARY — 3-image gallery + copy ===== */
.home-sanctuary {
  background: var(--blue-deep);
  color: var(--bg);
  padding: 110px 56px;
  position: relative;
  overflow: hidden;
}
.home-sanctuary::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 150, 104, 0.18), transparent 60%);
  pointer-events: none;
}
.home-sanctuary::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 196, 0.2), transparent 70%);
  pointer-events: none;
}
.home-sanctuary-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.home-sanctuary-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 600px;
  position: relative;
}
.home-sanctuary-gallery > div {
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.4);
}
.home-sanctuary-gallery > div svg {
  width: 100%;
  height: 100%;
  display: block;
}
.home-sanctuary-gallery .gallery-main {
  grid-row: span 2;
  border-radius: 6px 6px 180px 6px;
}
.home-sanctuary-gallery .gallery-top {
  border-radius: 6px 100px 6px 6px;
  aspect-ratio: 1 / 1;
}
.home-sanctuary-gallery .gallery-bottom {
  border-radius: 6px 6px 6px 100px;
  aspect-ratio: 1 / 1;
}
.home-sanctuary-content h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 36px;
  color: var(--bg);
  letter-spacing: -0.015em;
}
.home-sanctuary-content h2 em {
  font-style: italic;
  color: var(--accent-soft);
}
.home-sanctuary-content p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(246, 248, 251, 0.82);
  margin: 0 0 28px;
}
.home-sanctuary-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px;
  background: var(--accent);
  color: var(--blue-deep) !important;
  border-radius: 100px;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin-top: 12px;
  font-family: var(--sans);
}
.home-sanctuary-cta:hover {
  background: var(--bg);
  color: var(--blue-deep) !important;
  transform: translateY(-2px);
}
.home-sanctuary-cta svg { transition: transform 0.4s ease; }
.home-sanctuary-cta:hover svg { transform: translateX(4px); }

/* ===== HOMEPAGE RESPONSIVE ===== */
@media (max-width: 1100px) {
  .home-intro {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 100px 40px 80px !important;
  }
  .home-intro-portrait {
    position: static;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
  .home-mission {
    padding: 100px 40px;
  }
  .home-mission-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .home-mission-visual {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    order: -1;
  }
  .home-classes {
    padding: 100px 40px 120px !important;
  }
  .home-class-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .home-class-card:nth-child(1) .home-class-visual,
  .home-class-card:nth-child(2) .home-class-visual,
  .home-class-card:nth-child(3) .home-class-visual {
    border-radius: 6px 6px 6px 80px;
  }
  .home-sanctuary {
    padding: 100px 40px;
  }
  .home-sanctuary-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .home-sanctuary-gallery {
    height: 520px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .home-hero {
    min-height: 600px;
    height: 90vh;
  }
  .home-hero-content {
    padding: 140px 24px 60px;
    max-width: 100%;
    justify-content: flex-start;
  }
  /* Override font sizes for better mobile fit */
  h1.home-hero-title {
    font-size: clamp(3rem, 13vw, 4.5rem) !important;
    line-height: 0.98 !important;
    margin-bottom: 28px !important;
  }
  .home-hero-eyebrow {
    margin-bottom: 24px;
    font-size: 10px;
    letter-spacing: 0.24em;
  }
  .home-hero-eyebrow::before {
    width: 24px;
  }
  .home-hero-sub {
    font-size: 1.15rem !important;
    margin-bottom: 36px !important;
    max-width: 100%;
  }
  .home-hero-actions {
    gap: 20px;
  }
  .home-hero-cta {
    padding: 16px 28px;
    font-size: 11px;
    letter-spacing: 0.2em;
  }
  .home-hero-link {
    font-size: 11px;
    letter-spacing: 0.2em;
  }
  /* Hero SVG preserveAspectRatio="xMaxYMid slice" in the markup
     anchors the sun to the right side on all viewports. */
  .home-hero-image::after {
    background:
      linear-gradient(90deg,
        rgba(10, 24, 38, 0.36) 0%,
        rgba(10, 24, 38, 0.15) 40%,
        rgba(10, 24, 38, 0) 70%),
      linear-gradient(180deg,
        rgba(10, 24, 38, 0.2) 0%,
        rgba(10, 24, 38, 0.06) 40%,
        rgba(10, 24, 38, 0.35) 100%) !important;
  }
  .home-hero-scroll {
    right: 24px;
    bottom: 24px;
  }
  .home-free-strip {
    padding: 20px 24px;
    gap: 12px;
  }
  .home-free-strip-inner {
    gap: 10px !important;
  }
  .home-free-strip .strip-label { font-size: 10px; letter-spacing: 0.2em; }
  .home-free-strip a { font-size: 16px; }
  .home-intro {
    padding: 70px 24px 60px !important;
    gap: 44px;
  }
  .home-intro-portrait {
    border-radius: 140px 140px 6px 6px;
  }
  .home-intro-content h2 { margin-bottom: 32px; }
  .home-intro-content p { font-size: 16px; line-height: 1.8; }
  .home-intro-content .bottom-line { font-size: 18px !important; margin-top: 32px !important; padding-top: 28px; }
  .home-mission {
    padding: 70px 24px;
  }
  .home-mission-content h2 { margin-bottom: 28px; }
  .home-mission-visual {
    border-radius: 6px 6px 6px 140px;
  }
  .home-poem {
    padding: 80px 24px !important;
  }
  .home-poem-text {
    margin-bottom: 32px;
  }
  .home-classes {
    padding: 70px 24px 90px !important;
  }
  .home-class-card h3 { font-size: 26px; }
  .home-sanctuary {
    padding: 80px 24px;
  }
  .home-sanctuary-gallery {
    height: 440px;
    gap: 14px;
  }
  .home-sanctuary-gallery .gallery-main {
    border-radius: 6px 6px 120px 6px;
  }
}

/* =========================================================
   HOMEPAGE ANIMATIONS — v1.5.0
   Meditative, breathing motion throughout the homepage.
   All animations respect prefers-reduced-motion.
   ========================================================= */

/* ===== #1 Drifting clouds on hero ===== */
.home-hero .hero-cloud-a {
  animation: hero-cloud-drift-a 80s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.home-hero .hero-cloud-b {
  animation: hero-cloud-drift-b 110s linear infinite;
  animation-delay: -40s;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes hero-cloud-drift-a {
  0%   { transform: translateX(-15vw); opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { transform: translateX(90vw); opacity: 0; }
}
@keyframes hero-cloud-drift-b {
  0%   { transform: translateX(-20vw); opacity: 0; }
  12%  { opacity: 0.4; }
  88%  { opacity: 0.4; }
  100% { transform: translateX(85vw); opacity: 0; }
}

/* ===== #2 Twinkling stars in upper sky ===== */
.home-hero .hero-star {
  animation: hero-star-twinkle 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.home-hero .hero-star:nth-of-type(2) { animation-delay: -1s; animation-duration: 5s; }
.home-hero .hero-star:nth-of-type(3) { animation-delay: -2s; animation-duration: 6s; }
.home-hero .hero-star:nth-of-type(4) { animation-delay: -0.5s; animation-duration: 4.5s; }
.home-hero .hero-star:nth-of-type(5) { animation-delay: -3s; animation-duration: 5.5s; }
.home-hero .hero-star:nth-of-type(6) { animation-delay: -1.5s; animation-duration: 6.5s; }
@keyframes hero-star-twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.85; }
}

/* ===== #4 Hero title letter-by-letter fade-in ===== */
.home-hero-eyebrow,
h1.home-hero-title,
.home-hero-sub,
.home-hero-actions {
  animation: hero-rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.home-hero-eyebrow   { animation-delay: 0.2s; }
h1.home-hero-title   { animation-delay: 0.4s; }
.home-hero-sub       { animation-delay: 0.9s; }
.home-hero-actions   { animation-delay: 1.3s; }
@keyframes hero-rise {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== #5 Floating gold dots — subtle ambient particles between sections ===== */
.jmy-dust {
  position: absolute;
  pointer-events: none;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.jmy-dust span {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  bottom: -10px;
  animation: jmy-dust-rise linear infinite;
  will-change: transform, opacity;
}
@keyframes jmy-dust-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.5; }
  50%  { transform: translateY(-60vh) translateX(20px); opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-120vh) translateX(-10px); opacity: 0; }
}
/* Relative positioning on containers that hold dust */
.home-intro,
.home-poem,
.home-sanctuary {
  position: relative;
}

/* ===== #6 Hand-drawn wavy underlines on accent links ===== */
.home-mission-link,
.home-hero-link,
.home-free-strip a {
  position: relative;
  border-bottom: none !important;
  padding-bottom: 4px;
}
.home-mission-link::after,
.home-hero-link::after,
.home-free-strip a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 3' preserveAspectRatio='none'><path d='M0,1.5 Q10,0 20,1.5 T40,1.5 T60,1.5 T80,1.5' stroke='%23c9a961' stroke-width='1' fill='none'/></svg>");
  background-repeat: repeat-x;
  background-size: 80px 3px;
  background-position-x: 0;
  opacity: 0;
  transition: opacity 0.4s ease, background-position-x 1.2s ease;
}
.home-mission-link:hover::after,
.home-hero-link:hover::after,
.home-free-strip a:hover::after {
  opacity: 1;
  background-position-x: 80px;
}
.home-hero-link::after { height: 2px; filter: brightness(1.8); }

/* ===== #8 Poem moon — reflective, gently pulsing ===== */
.home-poem-moon {
  display: flex;
  justify-content: center;
  margin-bottom: 56px;
  position: relative;
}
.home-poem-moon-disc {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #f9f4e8 0%, #e0d9c5 70%, #c9b890 100%);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.25),
    0 0 40px rgba(224, 198, 138, 0.4),
    0 0 80px rgba(224, 198, 138, 0.15);
  position: relative;
  animation: poem-moon-breathe 8s ease-in-out infinite;
}
.home-poem-moon-disc::before,
.home-poem-moon-disc::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 97, 0.35);
  animation: poem-moon-ripple 6s ease-out infinite;
}
.home-poem-moon-disc::before {
  inset: -12px;
  animation-delay: 0s;
}
.home-poem-moon-disc::after {
  inset: -22px;
  animation-delay: -3s;
  opacity: 0.5;
}
@keyframes poem-moon-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes poem-moon-ripple {
  0%   { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ===== #13 Section entrance orchestration — stagger reveal inside sections ===== */
.home-intro-content.reveal.in > *,
.home-mission-content.reveal.in > *,
.home-poem-inner.reveal.in > *,
.home-sanctuary-content.reveal.in > * {
  animation: home-stagger-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.home-intro-content.reveal.in > *:nth-child(1),
.home-mission-content.reveal.in > *:nth-child(1),
.home-poem-inner.reveal.in > *:nth-child(1),
.home-sanctuary-content.reveal.in > *:nth-child(1) { animation-delay: 0s; }
.home-intro-content.reveal.in > *:nth-child(2),
.home-mission-content.reveal.in > *:nth-child(2),
.home-poem-inner.reveal.in > *:nth-child(2),
.home-sanctuary-content.reveal.in > *:nth-child(2) { animation-delay: 0.12s; }
.home-intro-content.reveal.in > *:nth-child(3),
.home-mission-content.reveal.in > *:nth-child(3),
.home-poem-inner.reveal.in > *:nth-child(3),
.home-sanctuary-content.reveal.in > *:nth-child(3) { animation-delay: 0.24s; }
.home-intro-content.reveal.in > *:nth-child(4),
.home-mission-content.reveal.in > *:nth-child(4),
.home-poem-inner.reveal.in > *:nth-child(4),
.home-sanctuary-content.reveal.in > *:nth-child(4) { animation-delay: 0.36s; }
.home-intro-content.reveal.in > *:nth-child(5),
.home-mission-content.reveal.in > *:nth-child(5),
.home-poem-inner.reveal.in > *:nth-child(5),
.home-sanctuary-content.reveal.in > *:nth-child(5) { animation-delay: 0.48s; }
.home-intro-content.reveal.in > *:nth-child(n+6),
.home-mission-content.reveal.in > *:nth-child(n+6),
.home-poem-inner.reveal.in > *:nth-child(n+6),
.home-sanctuary-content.reveal.in > *:nth-child(n+6) { animation-delay: 0.6s; }

@keyframes home-stagger-rise {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== #14 Poem ornament — lines draw themselves in on reveal ===== */
.home-poem-ornament .line {
  width: 0 !important;
  transition: width 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s;
}
.home-poem-inner.reveal.in .home-poem-ornament .line {
  width: 40px !important;
}

/* ===== #15 Footer moon phase row ===== */
/* ===== FOOTER — single moon cycling through phases ===== */
.footer-moons {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 36px 0 32px;
  margin: 0 auto 20px;
  max-width: 540px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
/* The moon container — full disc with radial gold/cream gradient */
.footer-moon-cycle {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fff4d9 0%, #f4e5cb 55%, #d4b87a 100%);
  box-shadow:
    0 0 0 1px rgba(255, 224, 164, 0.35),
    0 0 22px rgba(255, 224, 164, 0.45),
    0 0 50px rgba(247, 184, 94, 0.22);
  overflow: hidden;
  /* Gentle breathing pulse on the moon itself — independent of the
     phase cycle handled by the ::before shadow. Slow 7s cycle so it
     reads as breath, not strobe. */
  animation: footer-moon-breathe 7s ease-in-out infinite;
}
@keyframes footer-moon-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(255, 224, 164, 0.35),
      0 0 22px rgba(255, 224, 164, 0.45),
      0 0 50px rgba(247, 184, 94, 0.22);
  }
  50% {
    transform: scale(1.08);
    box-shadow:
      0 0 0 2px rgba(255, 224, 164, 0.6),
      0 0 38px rgba(255, 224, 164, 0.8),
      0 0 90px rgba(247, 184, 94, 0.45);
  }
}
/* The shadow disc — same color as the mid-footer sky band,
   slides horizontally to create the waxing/waning phases. */
.footer-moon-cycle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #9a4e88;
  animation: moon-phase-cycle 40s ease-in-out infinite;
}
/* Also a second subtle shadow for smooth gibbous transitions */
.footer-moon-cycle::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 60%, rgba(154, 78, 136, 0.35) 100%);
  pointer-events: none;
}

/* Phase cycle: new → waxing → full → waning → new, continuous loop
   Starting at 100% translateX = fully covered (new moon)
   Moving left toward 0% = waxing (more moon visible from the right)
   At 0% + large translateY = hidden below = full moon
   Moving right again = waning */
@keyframes moon-phase-cycle {
  /* New moon — shadow fully covers the disc */
  0%   { transform: translateX(0%); }
  /* Waxing crescent to full — shadow exits to the left */
  25%  { transform: translateX(-70%); }
  50%  { transform: translateX(-110%); }   /* fully out of view = full moon */
  /* Waning from full — shadow re-enters from the right */
  75%  { transform: translateX(70%); }
  100% { transform: translateX(0%); }      /* back to new moon */
}
@media (prefers-reduced-motion: reduce) {
  .footer-moon-cycle::before { animation: none; transform: translateX(-110%); }
  .footer-moon-cycle { animation: none !important; }
}

/* ===== FOOTER BACKGROUND — dramatic twilight sky ===== */
.site-footer,
.wp-block-template-part.site-footer {
  position: relative !important;
  overflow: hidden !important;
  padding-top: 180px !important;
  padding-bottom: 220px !important;
  border-top: none !important;
  background:
    /* Warm sun glow upper-left, matching testimonials sun position */
    radial-gradient(ellipse 30% 40% at 18% 14%, rgba(252, 217, 160, 0.55) 0%, rgba(252, 232, 196, 0.2) 40%, transparent 70%),
    /* Base sky gradient — matches testimonials banner.
       Shifted to fade peach quickly into navy so the body content
       sits over the navy/mauve range for white text legibility. */
    linear-gradient(180deg,
      #f0ccaa 0%,
      #d19989 12%,
      #7a6d89 28%,
      #1e3a5f 55%,
      #1e3a5f 100%) !important;
}

/* Sun disc visible in footer upper-left, like testimonials */
.site-footer::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 14%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #fcd9a0 0%, #fcd9a0 60%, rgba(252, 217, 160, 0.4) 80%, transparent 100%);
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .site-footer::before {
    width: 70px;
    height: 70px;
    top: 40px;
    left: 10%;
  }
}

/* Mountain horizon silhouettes — match testimonials banner mountain colors */
.site-footer::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'><path d='M0,60 L160,20 L320,50 L480,5 L640,45 L800,0 L960,45 L1120,5 L1280,45 L1440,8 L1600,40 L1600,200 L0,200 Z' fill='%239e8799' opacity='0.6'/><path d='M0,100 L180,50 L340,80 L500,30 L680,70 L860,30 L1040,75 L1220,40 L1400,75 L1600,50 L1600,200 L0,200 Z' fill='%23534c6e' opacity='0.85'/><path d='M0,150 L160,90 L320,130 L480,75 L640,130 L800,68 L960,135 L1120,80 L1280,130 L1440,80 L1600,110 L1600,200 L0,200 Z' fill='%230a1826'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 0;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

/* Footer text — bright white/cream with subtle shadow for contrast over saturated sky */
.site-footer .footer-brand h3,
.site-footer .footer-col h4,
.site-footer .footer-heading {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.site-footer .footer-brand p {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.site-footer .footer-col a,
.site-footer .footer-links a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  transition: color 0.3s ease;
}
.site-footer .footer-col a:hover,
.site-footer .footer-links a:hover {
  color: #ffe0a4 !important;
}
.site-footer .footer-bottom p {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.site-footer .footer-bottom .has-cormorant-font-family {
  color: #ffe0a4 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.site-footer .footer-bottom a {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.5) !important;
}
/* Divider lines */
.site-footer .footer-grid {
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===== Reduced motion — turn off all homepage animations ===== */
@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-cloud-a,
  .home-hero .hero-cloud-b,
  .home-hero .hero-star,
  .home-hero-eyebrow,
  h1.home-hero-title,
  .home-hero-sub,
  .home-hero-actions,
  .jmy-dust span,
  .home-poem-moon-disc,
  .home-poem-moon-disc::before,
  .home-poem-moon-disc::after,
  .home-intro-content.reveal.in > *,
  .home-mission-content.reveal.in > *,
  .home-poem-inner.reveal.in > *,
  .home-sanctuary-content.reveal.in > *,
  .home-poem-ornament .line,
  .footer-moon-cycle::before {
    animation: none !important;
    transition: none !important;
  }
  .home-hero-eyebrow,
  h1.home-hero-title,
  .home-hero-sub,
  .home-hero-actions,
  .home-intro-content.reveal.in > *,
  .home-mission-content.reveal.in > *,
  .home-poem-inner.reveal.in > *,
  .home-sanctuary-content.reveal.in > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .home-poem-ornament .line {
    width: 40px !important;
  }
}

/* ===== Mobile tweaks for animations ===== */
@media (max-width: 640px) {
  .home-poem-moon-disc { width: 52px; height: 52px; }
  .footer-moons {
    padding: 24px 0 20px;
  }
  .footer-moon-cycle { width: 36px; height: 36px; }
}

/* =========================================================
   HOMEPAGE SECONDARY MOONS/SUNS ANIMATIONS — v1.5.2
   Breathe life into the suns and moons embedded in the
   mission visual, class cards, and sanctuary gallery.
   Uses structural selectors so no markup changes required.
   ========================================================= */

/* Generic shared keyframes for celestial orbs */
@keyframes home-orb-breathe {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes home-orb-glow {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}
@keyframes home-moon-pulse {
  0%, 100% { opacity: 0.95; transform: scale(1); filter: drop-shadow(0 0 10px rgba(249, 244, 232, 0.5)); }
  50% { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 24px rgba(249, 244, 232, 0.8)); }
}
@keyframes home-halo-breathe {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.25); }
}

/* ===== INTRO PORTRAIT — sun behind Janet silhouette ===== */
/* Two circles at top-right: outer halo + brighter inner */
.home-intro-portrait svg circle:nth-of-type(1) {
  transform-origin: 350px 200px;
  transform-box: view-box;
  animation: home-halo-breathe 7s ease-in-out infinite;
}
.home-intro-portrait svg circle:nth-of-type(2) {
  transform-origin: 350px 200px;
  transform-box: view-box;
  animation: home-orb-breathe 5s ease-in-out infinite;
}

/* ===== MISSION VISUAL — hazy sun in mountain scene ===== */
/* Two circles at top-right */
.home-mission-visual svg circle:nth-of-type(1) {
  transform-origin: 350px 200px;
  transform-box: view-box;
  animation: home-halo-breathe 8s ease-in-out infinite;
}
.home-mission-visual svg circle:nth-of-type(2) {
  transform-origin: 350px 200px;
  transform-box: view-box;
  animation: home-orb-breathe 5.5s ease-in-out infinite;
}

/* ===== CLASS CARDS — different animations per card ===== */

/* Card 1: Yin Yoga — hazy sun */
.home-class-card:nth-child(1) .home-class-visual svg circle:nth-of-type(1) {
  transform-origin: 290px 100px;
  transform-box: view-box;
  animation: home-halo-breathe 6s ease-in-out infinite;
}
.home-class-card:nth-child(1) .home-class-visual svg circle:nth-of-type(2) {
  transform-origin: 290px 100px;
  transform-box: view-box;
  animation: home-orb-breathe 4.5s ease-in-out infinite;
}

/* Card 2: Yoga Nidra — crescent moon + twinkling stars */
/* Stars (6 circles in a group) */
.home-class-card:nth-child(2) .home-class-visual svg g circle {
  animation: hero-star-twinkle 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.home-class-card:nth-child(2) .home-class-visual svg g circle:nth-child(1) { animation-delay: -0.5s; }
.home-class-card:nth-child(2) .home-class-visual svg g circle:nth-child(2) { animation-delay: -1.2s; animation-duration: 3.5s; }
.home-class-card:nth-child(2) .home-class-visual svg g circle:nth-child(3) { animation-delay: -0.8s; animation-duration: 2.8s; }
.home-class-card:nth-child(2) .home-class-visual svg g circle:nth-child(4) { animation-delay: -1.8s; animation-duration: 3.2s; }
.home-class-card:nth-child(2) .home-class-visual svg g circle:nth-child(5) { animation-delay: -0.3s; animation-duration: 3.8s; }
.home-class-card:nth-child(2) .home-class-visual svg g circle:nth-child(6) { animation-delay: -2.1s; }

/* Crescent moon (two overlapping circles after the stars group) */
.home-class-card:nth-child(2) .home-class-visual svg > circle:nth-of-type(1) {
  transform-origin: 290px 130px;
  transform-box: view-box;
  animation: home-moon-pulse 5s ease-in-out infinite;
}

/* Card 3: Full Moon Yoga — giant full moon */
.home-class-card:nth-child(3) .home-class-visual svg circle:nth-of-type(1) {
  transform-origin: 202px 135px;
  transform-box: view-box;
  animation: home-moon-pulse 4.5s ease-in-out infinite;
}

/* ===== SANCTUARY GALLERY — animated moons/suns ===== */

/* Gallery main (left tall) — warm golden sunrise sun */
.home-sanctuary-gallery .gallery-main svg circle:nth-of-type(1) {
  transform-origin: 200px 230px;
  transform-box: view-box;
  animation: home-halo-breathe 9s ease-in-out infinite;
}
.home-sanctuary-gallery .gallery-main svg circle:nth-of-type(2) {
  transform-origin: 200px 230px;
  transform-box: view-box;
  animation: home-orb-glow 7s ease-in-out infinite;
}
.home-sanctuary-gallery .gallery-main svg circle:nth-of-type(3) {
  transform-origin: 200px 230px;
  transform-box: view-box;
  animation: home-orb-breathe 5s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(247, 230, 196, 0.7));
}

/* Gallery bottom — full moon scene */
.home-sanctuary-gallery .gallery-bottom svg g circle {
  animation: hero-star-twinkle 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.home-sanctuary-gallery .gallery-bottom svg g circle:nth-child(1) { animation-delay: -0.4s; }
.home-sanctuary-gallery .gallery-bottom svg g circle:nth-child(2) { animation-delay: -1.1s; animation-duration: 3.5s; }
.home-sanctuary-gallery .gallery-bottom svg g circle:nth-child(3) { animation-delay: -0.7s; animation-duration: 2.8s; }
.home-sanctuary-gallery .gallery-bottom svg g circle:nth-child(4) { animation-delay: -1.6s; animation-duration: 3.2s; }
.home-sanctuary-gallery .gallery-bottom svg g circle:nth-child(5) { animation-delay: -0.2s; animation-duration: 3.8s; }

/* Three nested moon circles (halo outer, halo inner, moon disc) */
.home-sanctuary-gallery .gallery-bottom svg > circle:nth-of-type(1) {
  transform-origin: 200px 180px;
  transform-box: view-box;
  animation: home-halo-breathe 8s ease-in-out infinite;
}
.home-sanctuary-gallery .gallery-bottom svg > circle:nth-of-type(2) {
  transform-origin: 200px 180px;
  transform-box: view-box;
  animation: home-orb-glow 6s ease-in-out infinite;
}
.home-sanctuary-gallery .gallery-bottom svg > circle:nth-of-type(3) {
  transform-origin: 200px 180px;
  transform-box: view-box;
  animation: home-moon-pulse 5s ease-in-out infinite;
}

/* Gallery top — snow peaks (no celestial objects to animate, but clouds can drift) */
.home-sanctuary-gallery .gallery-top svg ellipse {
  animation: gallery-cloud-drift 25s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.home-sanctuary-gallery .gallery-top svg ellipse:nth-of-type(1) { animation-delay: 0s; }
.home-sanctuary-gallery .gallery-top svg ellipse:nth-of-type(2) { animation-delay: -6s; animation-duration: 30s; }
.home-sanctuary-gallery .gallery-top svg ellipse:nth-of-type(3) { animation-delay: -12s; animation-duration: 22s; }
.home-sanctuary-gallery .gallery-top svg ellipse:nth-of-type(4) { animation-delay: -18s; animation-duration: 28s; }

@keyframes gallery-cloud-drift {
  0%   { transform: translateX(-20px); opacity: 0.3; }
  50%  { opacity: 0.5; }
  100% { transform: translateX(30px); opacity: 0.3; }
}

/* ===== Reduced motion — disable all secondary animations ===== */
@media (prefers-reduced-motion: reduce) {
  .home-intro-portrait svg circle,
  .home-mission-visual svg circle,
  .home-class-card .home-class-visual svg circle,
  .home-class-card .home-class-visual svg g circle,
  .home-sanctuary-gallery svg circle,
  .home-sanctuary-gallery svg g circle,
  .home-sanctuary-gallery svg ellipse {
    animation: none !important;
  }
}

/* =========================================================
   PHOTO FRAME SYSTEM — v1.6.0
   Unified treatment for all photography across the site.
   Applies arched corners, subtle color grading, and floating
   shadows so real photos sit comfortably alongside the site's
   custom SVG illustrations.
   ========================================================= */

/* Base frame */
.photo-frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-accent);
  box-shadow: 0 30px 60px -25px rgba(30, 58, 95, 0.3);
  margin: 0;
}
.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Subtle color grade: slight desaturation + warm shift so photos
     pick up the site's golden-navy palette without losing detail */
  filter: saturate(0.88) contrast(1.05) sepia(0.08) brightness(1.02);
  transition: filter 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.photo-frame:hover img {
  transform: scale(1.02);
}
/* Escape hatch — any photo that looks wrong with the grade */
.photo-frame--natural img {
  filter: none;
}
/* Figcaption */
.photo-frame figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 28px 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--bg);
  background: linear-gradient(180deg, transparent 0%, rgba(10, 24, 38, 0.75) 100%);
}

/* ===== Aspect ratio variants ===== */
.photo-frame--portrait { aspect-ratio: 4 / 5; }
.photo-frame--square   { aspect-ratio: 1 / 1; }
.photo-frame--landscape { aspect-ratio: 4 / 3; }
.photo-frame--wide     { aspect-ratio: 8 / 5; }
.photo-frame--band     { aspect-ratio: 21 / 9; }

/* ===== Corner variants — pick one arch corner per frame ===== */
.photo-frame--arch-tl { border-radius: 180px 6px 6px 6px; }
.photo-frame--arch-tr { border-radius: 6px 180px 6px 6px; }
.photo-frame--arch-bl { border-radius: 6px 6px 6px 180px; }
.photo-frame--arch-br { border-radius: 6px 6px 180px 6px; }
.photo-frame--arch-top { border-radius: 220px 220px 6px 6px; }

/* Softer arches for smaller frames */
.photo-frame--square.photo-frame--arch-tl { border-radius: 120px 6px 6px 6px; }
.photo-frame--square.photo-frame--arch-tr { border-radius: 6px 120px 6px 6px; }
.photo-frame--square.photo-frame--arch-bl { border-radius: 6px 6px 6px 120px; }
.photo-frame--square.photo-frame--arch-br { border-radius: 6px 6px 120px 6px; }

/* ===== Photo callout band — full-width image section between content ===== */
.photo-callout {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 80px 56px !important;
  background: var(--bg);
}
.photo-callout-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.photo-callout .photo-frame {
  width: 100%;
}
.photo-callout--dark {
  background: var(--blue-deep);
}
.photo-callout--soft {
  background: var(--bg-soft);
}

/* ===== Homepage new section: Janet portrait between Mission and Poem ===== */
.home-meet-janet {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 100px 56px 70px !important;
  background: var(--bg);
  position: relative;
}
.home-meet-janet-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.home-meet-janet .photo-frame {
  max-width: 440px;
}
.home-meet-janet-copy .eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-weight: 500;
}
.home-meet-janet-copy .eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.home-meet-janet-copy h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue-deep);
  margin: 0 0 28px;
}
.home-meet-janet-copy h2 em {
  font-style: italic;
  color: var(--accent);
}
.home-meet-janet-copy p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.home-meet-janet-copy .location {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--blue);
  margin-top: 28px;
}

/* ===== Homepage real photo sanctuary row — sits BELOW the SVG gallery ===== */
.home-sanctuary-photos {
  margin-top: 80px;
  padding-top: 80px;
  border-top: 1px solid rgba(246, 248, 251, 0.15);
  position: relative;
  z-index: 2;
}
.home-sanctuary-photos-header {
  text-align: center;
  margin-bottom: 56px;
}
.home-sanctuary-photos-header .eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 16px;
}
.home-sanctuary-photos-header h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.2;
  color: var(--bg);
  margin: 0;
  letter-spacing: -0.01em;
}
.home-sanctuary-photos-header h3 em {
  font-style: italic;
  color: var(--accent-soft);
}
.home-sanctuary-photos-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 24px;
  align-items: center;
}
/* Center image slightly taller for visual rhythm */
.home-sanctuary-photos-grid .photo-frame:nth-child(1) { aspect-ratio: 4 / 5; }
.home-sanctuary-photos-grid .photo-frame:nth-child(2) { aspect-ratio: 4 / 5.6; }
.home-sanctuary-photos-grid .photo-frame:nth-child(3) { aspect-ratio: 4 / 5; }

/* Photos on dark bg get a different shadow treatment */
.home-sanctuary .photo-frame {
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.5);
}


/* Responsive */
@media (max-width: 900px) {
  .home-meet-janet {
    padding: 90px 32px !important;
  }
  .home-meet-janet-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .home-meet-janet .photo-frame {
    max-width: 380px;
    margin: 0 auto;
  }
  .home-meet-janet-copy .eyebrow {
    justify-content: center;
  }
  .home-sanctuary-photos-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .home-sanctuary-photos-grid .photo-frame:nth-child(3) {
    grid-column: span 2;
    aspect-ratio: 8 / 5;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .home-meet-janet {
    padding: 70px 24px !important;
  }
  .home-sanctuary-photos {
    margin-top: 56px;
    padding-top: 56px;
  }
  .home-sanctuary-photos-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .home-sanctuary-photos-grid .photo-frame:nth-child(3) {
    grid-column: auto;
  }
  .photo-callout {
    padding: 60px 24px !important;
  }
  .photo-frame--arch-tl,
  .photo-frame--arch-tr,
  .photo-frame--arch-bl,
  .photo-frame--arch-br {
    border-radius: 100px 6px 6px 6px;
  }
  .photo-frame--arch-tr { border-radius: 6px 100px 6px 6px; }
  .photo-frame--arch-bl { border-radius: 6px 6px 6px 100px; }
  .photo-frame--arch-br { border-radius: 6px 6px 100px 6px; }
}

/* =========================================================
   PHOTO CALLOUTS — specialized layouts (v1.6.1)
   ========================================================= */

/* Contact page: three-photo grid with gentle vertical stagger */
.contact-photos {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 100px 56px !important;
  background: var(--bg);
}
.contact-photos-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: center;
}
.contact-photos-inner .photo-frame {
  width: 100%;
}
/* Subtle vertical stagger across the three photos for a curated gallery feel */
.contact-photos-inner .photo-frame:nth-child(1) {
  transform: translateY(-24px);
}
.contact-photos-inner .photo-frame:nth-child(2) {
  transform: translateY(24px);
}
.contact-photos-inner .photo-frame:nth-child(3) {
  transform: translateY(-12px);
}

/* Testimonials: decorative quote mark treatment */
.testimonials-quote-mark {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 100px 56px !important;
  background: var(--bg-soft);
  text-align: center;
}
.testimonials-quote-mark-inner {
  max-width: 600px;
  margin: 0 auto;
}
.testimonials-quote-mark .quote-mark-decoration {
  max-width: 120px;
  height: auto;
  opacity: 0.6;
  filter: sepia(0.4) saturate(0.8) brightness(1.1);
  margin: 0 auto 24px;
  display: block;
}
.testimonials-quote-mark .quote-mark-mantra {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

@media (max-width: 720px) {
  .contact-photos {
    padding: 60px 24px !important;
  }
  .contact-photos-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 400px;
  }
  .contact-photos-inner .photo-frame:nth-child(1),
  .contact-photos-inner .photo-frame:nth-child(2),
  .contact-photos-inner .photo-frame:nth-child(3) {
    transform: none;
  }
  .testimonials-quote-mark {
    padding: 60px 24px !important;
  }
  .testimonials-quote-mark .quote-mark-decoration {
    max-width: 80px;
  }
}

/* =========================================================
   PATTERN COMPATIBILITY UPDATES — v1.7.0
   Adjustments for native Gutenberg block structure where the
   markup differs slightly from the original wp:html version.
   ========================================================= */

/* Free strip: Gutenberg paragraphs can't have nested spans + anchors as
   independent flex children, so we use a single paragraph wrapper. */
.home-free-strip-inner .strip-label-wrap {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Buttons converted from <a class="cta"> to <p class="cta-wrap"><a class="cta">
   so they can be edited as paragraphs in Gutenberg. The wrapping <p> needs
   margins reset so it doesn't add extra spacing. */
.home-hero-actions .home-hero-cta-wrap,
.home-hero-actions .home-hero-link-wrap,
.home-mission-link-wrap,
.home-class-link-wrap,
.home-sanctuary-cta-wrap {
  margin: 0;
}
.home-hero-cta-wrap .home-hero-cta,
.home-hero-link-wrap .home-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.home-mission-link-wrap {
  margin-top: 16px !important;
}
.home-class-link-wrap {
  margin-top: 0 !important;
}
.home-sanctuary-cta-wrap {
  margin-top: 16px !important;
}
.home-sanctuary-cta-wrap .home-sanctuary-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* Poem: native paragraphs separate stanzas natively, but our original used
   a single <p> with <span class="stanza"> children. Keep that structure but
   ensure spans display block. */
.home-poem-text .stanza {
  display: block;
  margin-bottom: 0.9em;
}
.home-poem-text .stanza:last-child {
  margin-bottom: 0;
}

/* Class card structure: native <article class="home-class-card"> as block
   group means its children are grouped inside a wp-block-group wrapper.
   The <div class="home-class-visual"> stays as wp:html, then native
   paragraph + heading + paragraph + link follow. The flex-grow trick
   that pushed link to the bottom needs adjustment. */
.home-class-card {
  display: flex !important;
  flex-direction: column !important;
}
.home-class-card .home-class-visual {
  margin-bottom: 32px;
}
.home-class-card > .class-number {
  margin-top: 0;
}
.home-class-card > p:not(.class-number):not(.home-class-link-wrap) {
  flex: 1;
}


/* Sanctuary content: native CTA wrap needs proper alignment. */
.home-sanctuary-content .home-sanctuary-cta-wrap {
  margin-top: 16px !important;
}

/* Sanctuary photos grid: structurally identical to before since we already
   used wp:image inside, but explicit padding bottom ensures spacing. */
.home-sanctuary-photos .home-sanctuary-photos-header {
  text-align: center;
}


/* =========================================================
   v1.7.3 — Pattern conversion polish fixes
   ========================================================= */

/* Kill WP block-gap between top-level homepage sections so internal
   section padding is what determines spacing, not WP's automatic margins. */
.jmy-home > .home-hero,
.jmy-home > .home-free-strip,
.jmy-home > .home-intro,
.jmy-home > .home-mission,
.jmy-home > .home-meet-janet,
.jmy-home > .home-poem,
.jmy-home > .home-classes,
.jmy-home > .home-sanctuary {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Same for Mission Statement page */
.jmy-mission-page > .page-banner,
.jmy-mission-page > .class-page-section,
.jmy-mission-page > .yin-closing {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===== CLASS CARDS — v1.8.0 grid-based layout =====
   Each card is a CSS GRID with FIXED row sizes. This eliminates all
   margin-based positioning quirks because each child sits in a fixed
   grid row that cannot shift. */
.home-class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}
.home-class-card {
  display: grid !important;
  grid-template-rows:
    [visual] 280px
    [gap1] 28px
    [number] auto
    [gap2] 14px
    [title] auto
    [gap3] 18px
    [body] 1fr
    [link] auto;
  gap: 0 !important;
  height: 660px !important;
  align-content: start;
}
/* All direct children: no margins, no padding (kill anything WP injects) */
.home-class-card > * {
  margin: 0 !important;
  padding: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
/* Position each child in its grid row */
.home-class-card > .home-class-visual {
  grid-row: visual;
  width: 100%;
  height: 280px !important;
  overflow: hidden;
}
.home-class-card > .class-number {
  grid-row: number;
  align-self: start;
}
.home-class-card > h3,
.home-class-card > .wp-block-heading {
  grid-row: title;
  align-self: start;
}
.home-class-card > p:not(.class-number):not(.home-class-link-wrap) {
  grid-row: body;
  align-self: start;
}
.home-class-card > .home-class-link-wrap {
  grid-row: link;
  align-self: end;
  justify-self: start;
}
/* Hide empty injected elements */
.home-class-card > p:empty,
.home-class-card > br {
  display: none !important;
}

/* Mobile: revert to natural flex flow */
@media (max-width: 900px) {
  .home-class-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .home-class-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    height: auto !important;
  }
  .home-class-card > .home-class-visual {
    height: 240px !important;
    margin-bottom: 28px !important;
  }
  .home-class-card > .class-number {
    margin-bottom: 14px !important;
  }
  .home-class-card > h3,
  .home-class-card > .wp-block-heading {
    margin-bottom: 18px !important;
  }
  .home-class-card > p:not(.class-number):not(.home-class-link-wrap) {
    margin-bottom: 28px !important;
  }
}

/* ===== SANCTUARY PHOTOS — centered + substantially larger ===== */
.home-sanctuary-photos {
  margin-top: 80px;
  padding-top: 80px;
  border-top: 1px solid rgba(246, 248, 251, 0.15);
  position: relative;
  z-index: 2;
  /* Span the full width of the parent .home-sanctuary-inner grid */
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
}
.home-sanctuary-photos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 36px;
  align-items: stretch;
  max-width: 1300px;
  margin: 0 auto;
}
/* Larger aspect ratio = taller, bigger photos */
.home-sanctuary-photos-grid .photo-frame:nth-child(1),
.home-sanctuary-photos-grid .photo-frame:nth-child(2),
.home-sanctuary-photos-grid .photo-frame:nth-child(3) {
  aspect-ratio: 3 / 4;
  width: 100%;
}
/* Center the heading area */
.home-sanctuary-photos-header {
  text-align: center;
  margin-bottom: 56px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.home-sanctuary-photos-header * {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .home-sanctuary-photos-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .home-sanctuary-photos-grid .photo-frame:nth-child(3) {
    grid-column: span 2;
    aspect-ratio: 8 / 5;
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .home-sanctuary-photos-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 380px;
  }
  .home-sanctuary-photos-grid .photo-frame:nth-child(3) {
    grid-column: auto;
    aspect-ratio: 3 / 4;
    max-width: 100%;
  }
  .home-sanctuary-photos {
    margin-top: 56px;
    padding-top: 56px;
  }
}

/* =========================================================
   v1.8.0 — All arches on bottom-right for visual top alignment
   ========================================================= */
.home-class-card:nth-child(1) .home-class-visual,
.home-class-card:nth-child(2) .home-class-visual,
.home-class-card:nth-child(3) .home-class-visual {
  border-radius: 6px 6px 160px 6px !important;
}

/* Mobile: alternate arch direction for visual interest, but only when
   stacked (so they don't compete with each other). */
@media (max-width: 900px) {
  .home-class-card:nth-child(2) .home-class-visual {
    border-radius: 6px 6px 6px 160px !important;
  }
}

/* =========================================================
   v1.8.1 — Self-contained class cards (jmy-card namespace)
   This block is rendered via a single wp:html block in the
   homepage pattern, sidestepping all of WordPress's
   .is-layout-flow auto-margin injection and per-paragraph
   spacing. Every dimension is explicit and pixel-fixed.
   ========================================================= */

.jmy-classes-section {
  padding: 100px 56px 110px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}

.jmy-classes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}

/* Each card: fixed-height grid with named explicit rows.
   Children sit in tracks that cannot shift. */
.jmy-classes-section .jmy-card {
  display: grid;
  grid-template-rows: 280px 1fr;
  grid-template-columns: 1fr;
  height: 660px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  list-style: none;
  font-family: var(--sans);
  box-sizing: border-box;
}

.jmy-classes-section .jmy-card-visual {
  height: 280px;
  width: 100%;
  overflow: hidden;
  border-radius: 6px 6px 160px 6px;
  background: var(--bg-accent);
  position: relative;
  margin: 0;
  padding: 0;
}
.jmy-classes-section .jmy-card-visual svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.6s ease;
}
.jmy-classes-section .jmy-card:hover .jmy-card-visual svg {
  transform: scale(1.03);
}

/* Content area sits directly below the visual; padding-top is the
   gap between image and "Practice / 0X" text. */
.jmy-classes-section .jmy-card-content {
  padding: 28px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  box-sizing: border-box;
}

.jmy-classes-section .jmy-card-eyebrow {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--accent);
  margin: 0 0 14px 0;
  padding: 0;
  line-height: 1;
  letter-spacing: 0;
}

.jmy-classes-section .jmy-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: var(--blue-deep);
  letter-spacing: -0.005em;
  margin: 0 0 18px 0;
  padding: 0;
}

.jmy-classes-section .jmy-card-body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 28px 0;
  padding: 0;
  font-weight: 300;
  /* Body grows to fill the leftover space, pushing the link to the bottom */
  flex: 1 1 auto;
}

.jmy-classes-section .jmy-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blue-deep);
  border-bottom: 1px solid var(--blue-deep);
  padding: 0 0 6px 0;
  margin: 0;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  transition: all 0.3s ease;
  /* Pin to bottom regardless of body length */
  margin-top: auto;
  align-self: flex-start;
}
.jmy-classes-section .jmy-card-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  gap: 16px;
}

/* Mobile */
@media (max-width: 900px) {
  .jmy-classes-section {
    padding: 80px 24px 90px;
  }
  .jmy-classes-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .jmy-classes-section .jmy-card {
    grid-template-rows: 240px auto;
    height: auto;
  }
  .jmy-classes-section .jmy-card-visual {
    height: 240px;
  }
  .jmy-classes-section .jmy-card:nth-child(2) .jmy-card-visual {
    border-radius: 6px 6px 6px 160px;
  }
  .jmy-classes-section .jmy-card-title {
    font-size: 26px;
  }
}

/* =========================================================
   v1.8.2 — Kill global top whitespace on subpages
   The <main> element gets margin-block-start: 1.5rem from WP's
   .wp-site-blocks > * rule because the header is position:fixed
   and doesn't visually count, leaving a white strip at the top
   above the page banner. Force zero on all main wrappers and
   their first children.
   ========================================================= */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part + main,
main.wp-block-group {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  padding-top: 0 !important;
}
.wp-site-blocks > main > :first-child,
main.wp-block-group > :first-child,
main.wp-block-group > .entry-content > :first-child,
main.wp-block-group > .wp-block-post-content > :first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Some pages (front-page) wrap post-content in a custom main, others
   pass it through directly. Zero out the post-content wrapper too. */
.wp-block-post-content {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
.wp-block-post-content > :first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* =========================================================
   v1.9.0 — Round 2 page conversions: About + Yin + Nidra + Full Moon
   ALL spacing controlled explicitly. WP's is-layout-flow auto-margin
   is killed on every wrapper to prevent the homepage drama from recurring.
   ========================================================= */

/* Kill WP auto-margins on all Round 2 page wrappers */
.jmy-about-page,
.jmy-class-detail,
.jmy-about-page > *,
.jmy-class-detail > *,
.about-page-section,
.about-page-section > *,
.about-page-inner,
.about-page-inner > *,
.about-page-body,
.about-page-body > *,
.class-page-section,
.class-page-section > *,
.class-page-inner,
.class-page-inner > *,
.fullmoon-names-section,
.fullmoon-names-section > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ========== About page ========== */
.about-page-section {
  padding: 100px 32px 80px !important;
  background: var(--bg);
}
.about-page-inner {
  max-width: 1180px;
  margin: 0 auto !important;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 80px;
  align-items: start;
}
.about-page-portrait {
  position: sticky;
  top: 120px;
}
.about-page-portrait .photo-frame {
  margin: 0 !important;
}
.about-page-body {
  display: flex !important;
  flex-direction: column;
}
.about-page-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px !important;
}
.about-page-heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--blue-deep);
  margin: 0 0 40px !important;
}
.about-page-heading em {
  font-style: italic;
  color: var(--accent);
}
.about-page-body p:not(.about-page-eyebrow) {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 24px !important;
  font-family: var(--serif);
}
.about-page-body p:last-of-type {
  margin-bottom: 0 !important;
}
.about-closing {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .about-page-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .about-page-portrait {
    position: static;
    max-width: 480px;
    margin: 0 auto !important;
  }
  .about-page-section {
    padding: 80px 24px 60px !important;
  }
}

/* ========== Class detail pages (Yin / Nidra / Full Moon) ========== */
.class-page-section {
  padding: 100px 32px 10px !important;
  background: var(--bg);
}
.class-page-section + .class-page-section {
  padding-top: 20px !important;
}
.class-page-inner {
  max-width: 820px;
  margin: 0 auto !important;
}
.class-page-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 24px !important;
  text-align: center;
}
.class-page-lead {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  line-height: 1.5;
  color: var(--blue-deep);
  margin: 0 0 25px !important;
  font-weight: 300;
  letter-spacing: -0.005em;
  text-align: center;
}
.class-page-subheading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  color: var(--blue-deep);
  margin: 60px 0 28px !important;
  letter-spacing: -0.005em;
}
.class-page-section-heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  color: var(--blue-deep);
  text-align: center;
  margin: 0 0 50px !important;
  letter-spacing: -0.02em;
}
.class-page-section-heading em {
  font-style: italic;
  color: var(--accent);
}
.class-page-inner > p:not(.class-page-eyebrow):not(.class-page-lead):not(.class-page-pullquote):not(.class-page-mantra):not(.class-page-credit) {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 24px !important;
  font-family: var(--serif);
}
.class-page-pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--blue-deep);
  text-align: center;
  margin: 32px 0 40px !important;
  padding: 28px 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.class-page-pullquote em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.class-page-mantra {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  color: var(--accent);
  text-align: center;
  margin: 48px 0 0 !important;
  font-weight: 400;
  padding-bottom: 10px;
}
.class-page-credit {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin: 0 0 60px !important;
  font-style: normal;
}

/* Class page pull-callout (uses same class as mission for consistency) */
.class-page-inner .pull-callout {
  margin: 40px 0 !important;
  padding: 48px 40px;
  background: var(--bg-soft);
  border-radius: 6px 100px 6px 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--blue-deep);
  text-align: center;
}
.class-page-inner .pull-callout p {
  margin: 0 !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
.class-page-inner .pull-callout p a {
  color: var(--accent);
  font-weight: 500;
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.class-page-inner .pull-callout p a:hover {
  color: var(--blue-deep);
}

/* Class page inline photos */
.class-page-inner .class-page-photo,
.class-page-photo {
  margin: 56px auto !important;
  max-width: 720px;
}
.class-page-inner .class-page-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== Full Moon names grid ========== */
.fullmoon-names-section {
  padding: 60px 32px 100px !important;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.fullmoon-names-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 32px;
  max-width: 760px;
  margin: 0 auto 50px !important;
}
.moon-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.moon-month {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 4px;
}
.moon-label {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--blue-deep);
  font-weight: 400;
  font-style: italic;
}
@media (max-width: 700px) {
  .fullmoon-names-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
  }
}
@media (max-width: 480px) {
  .fullmoon-names-grid {
    grid-template-columns: 1fr;
  }
}

/* ========== Banner backgrounds positioning ========== */
/* The page-banner already has min-height + padding rules. We just need the
   .banner-scene to fill it fully. */
.banner-about .banner-scene,
.banner-yin .banner-scene,
.banner-nidra .banner-scene,
.banner-fullmoon .banner-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.banner-about .banner-scene svg,
.banner-yin .banner-scene svg,
.banner-nidra .banner-scene svg,
.banner-fullmoon .banner-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}
.banner-about > *:not(.banner-scene),
.banner-yin > *:not(.banner-scene),
.banner-nidra > *:not(.banner-scene),
.banner-fullmoon > *:not(.banner-scene) {
  position: relative;
  z-index: 1;
}

/* ========== Banner SVG animations ========== */
.banner-about .about-glow {
  animation: about-sun-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-about .about-sun {
  animation: about-sun-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes about-sun-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.05); }
}
@keyframes about-sun-pulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}
.banner-about .cloud-a { animation: cloud-drift-a 80s linear infinite; }
.banner-about .cloud-b { animation: cloud-drift-b 100s linear infinite; animation-delay: -40s; }
@keyframes cloud-drift-a {
  from { transform: translateX(-100px); }
  to { transform: translateX(1700px); }
}
@keyframes cloud-drift-b {
  from { transform: translateX(-200px); }
  to { transform: translateX(1800px); }
}

.banner-yin .yin-sun-halo:nth-of-type(1) {
  animation: yin-halo-breathe 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-yin .yin-sun-halo:nth-of-type(2) {
  animation: yin-halo-breathe 8s ease-in-out infinite;
  animation-delay: -2s;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-yin .yin-sun {
  animation: yin-sun-pulse 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes yin-halo-breathe {
  0%, 100% { opacity: 0.32; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.04); }
}
@keyframes yin-sun-pulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 1; }
}

.banner-nidra .moon-halo {
  animation: nidra-moon-glow 7s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-nidra .star-a { animation: twinkle-a 4s ease-in-out infinite; }
.banner-nidra .star-b { animation: twinkle-b 5s ease-in-out infinite; animation-delay: -1s; }
.banner-nidra .star-c { animation: twinkle-a 6s ease-in-out infinite; animation-delay: -2s; }
.banner-nidra .star-d { animation: twinkle-b 4.5s ease-in-out infinite; animation-delay: -3s; }
@keyframes nidra-moon-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}
@keyframes twinkle-a {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes twinkle-b {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-about .about-glow,
  .banner-about .about-sun,
  .banner-about .cloud-a,
  .banner-about .cloud-b,
  .banner-yin .yin-sun-halo,
  .banner-yin .yin-sun,
  .banner-nidra .moon-halo,
  .banner-nidra g circle {
    animation: none !important;
  }
}

/* ========== Closing CTA inside class detail pages ========== */
.jmy-class-detail .yin-closing,
.jmy-about-page .yin-closing {
  margin: 0 !important;
  padding: 100px 32px !important;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-accent) 0%, var(--bg-soft) 100%);
}
.jmy-class-detail .yin-closing > *,
.jmy-about-page .yin-closing > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.jmy-class-detail .yin-closing .closing-mantra,
.jmy-about-page .yin-closing .closing-mantra {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px !important;
}
.jmy-class-detail .yin-closing h2,
.jmy-about-page .yin-closing h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  color: var(--blue-deep);
  margin: 0 0 40px !important;
  letter-spacing: -0.02em;
}
.jmy-class-detail .yin-closing h2 em,
.jmy-about-page .yin-closing h2 em {
  font-style: italic;
  color: var(--accent);
}
.jmy-class-detail .yin-closing .wp-block-buttons,
.jmy-about-page .yin-closing .wp-block-buttons {
  margin: 0 !important;
  justify-content: center;
}

/* =========================================================
   v1.9.1 — Round 2 fixes:
   - Banner text contrast (dark overlay + stronger shadow)
   - Body text bumped to 22px
   - Closing CTA centered with extra bottom padding
   - Full Moon photos shown bigger / fuller
   - Moon names text larger
   ========================================================= */

/* ---------- 1. Banner text contrast on new Round 2 banners ---------- */
/* Add a dark overlay at top of banner so light banner colors (peach,
   light blue) don't wash out the white title text. */
.banner-about::before,
.banner-yin::before,
.banner-fullmoon::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.55) 0%,
    rgba(10, 24, 38, 0.25) 35%,
    rgba(10, 24, 38, 0.15) 60%,
    rgba(10, 24, 38, 0.4) 100%
  );
}
/* Nidra is already very dark — softer overlay for it */
.banner-nidra::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.2) 0%,
    transparent 40%,
    rgba(10, 24, 38, 0.3) 100%
  );
}
/* Make sure overlay sits above the banner-scene SVG but below the text */
.banner-about .banner-scene,
.banner-yin .banner-scene,
.banner-nidra .banner-scene,
.banner-fullmoon .banner-scene {
  z-index: 0;
}
.banner-about > *:not(.banner-scene),
.banner-yin > *:not(.banner-scene),
.banner-nidra > *:not(.banner-scene),
.banner-fullmoon > *:not(.banner-scene) {
  z-index: 2;
}

/* Stronger text shadow on banner title + subtitle for these pages */
.banner-about .banner-title,
.banner-yin .banner-title,
.banner-nidra .banner-title,
.banner-fullmoon .banner-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.banner-about .banner-title em,
.banner-yin .banner-title em,
.banner-nidra .banner-title em,
.banner-fullmoon .banner-title em {
  color: #fce8c4 !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.banner-about .banner-subtitle,
.banner-yin .banner-subtitle,
.banner-nidra .banner-subtitle,
.banner-fullmoon .banner-subtitle {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
.banner-about .breadcrumb,
.banner-yin .breadcrumb,
.banner-nidra .breadcrumb,
.banner-fullmoon .breadcrumb {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.banner-about .breadcrumb .current,
.banner-yin .breadcrumb .current,
.banner-nidra .breadcrumb .current,
.banner-fullmoon .breadcrumb .current {
  color: #fce8c4 !important;
}
.banner-about .breadcrumb .sep,
.banner-yin .breadcrumb .sep,
.banner-nidra .breadcrumb .sep,
.banner-fullmoon .breadcrumb .sep {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* ---------- 2. Body paragraph text → 22px ---------- */
/* About page bio paragraphs */
.jmy-about-page .about-page-body p:not(.about-page-eyebrow) {
  font-size: 22px !important;
  line-height: 1.7 !important;
  margin: 0 0 28px !important;
}

/* Class detail pages — all body paragraphs */
.jmy-class-detail .class-page-inner > p:not(.class-page-eyebrow):not(.class-page-lead):not(.class-page-pullquote):not(.class-page-mantra):not(.class-page-credit) {
  font-size: 22px !important;
  line-height: 1.7 !important;
  margin: 0 0 28px !important;
}
/* Lead paragraph slightly larger to keep hierarchy */
.jmy-class-detail .class-page-lead {
  font-size: clamp(1.55rem, 2.6vw, 1.85rem) !important;
  line-height: 1.5 !important;
}
/* Pullquote bumps up too */
.jmy-class-detail .class-page-pullquote {
  font-size: clamp(1.5rem, 2.4vw, 1.85rem) !important;
}
/* Pull-callout (gold-corner box) bumps up */
.jmy-class-detail .class-page-inner .pull-callout p {
  font-size: 22px !important;
  line-height: 1.6 !important;
}
/* Class subheading also slightly larger to maintain hierarchy with 22px body */
.jmy-class-detail .class-page-subheading {
  font-size: clamp(1.7rem, 3vw, 2.15rem) !important;
}

/* ---------- 3. Closing CTA — center + extra bottom padding ---------- */
.jmy-about-page .yin-closing,
.jmy-class-detail .yin-closing {
  text-align: center !important;
  padding: 110px 32px 160px !important;
}
.jmy-about-page .yin-closing > *,
.jmy-class-detail .yin-closing > * {
  margin-left: auto !important;
  margin-right: auto !important;
}
.jmy-about-page .yin-closing .wp-block-buttons,
.jmy-class-detail .yin-closing .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.jmy-about-page .yin-closing .closing-mantra,
.jmy-class-detail .yin-closing .closing-mantra,
.jmy-about-page .yin-closing h2,
.jmy-class-detail .yin-closing h2 {
  text-align: center !important;
  max-width: 720px;
}

/* ---------- 4. Full Moon photos — show bigger ---------- */
/* Photos break out wider than the 820px text column.
   Override the photo-frame aspect-ratio so images show in their NATURAL
   proportions (not forced to 4/3 which leaves empty space). */
.jmy-fullmoon-page .class-page-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.jmy-fullmoon-page .class-page-inner {
  max-width: 1080px !important;
  padding: 0 32px;
  box-sizing: border-box;
}
/* SINGLE consistent text column — every non-photo, non-grid element gets
   exactly 680px max-width and is auto-centered. This guarantees all text
   shares the same center axis and the same visual edges, no matter what
   WP layout system injects. Lead/subhead/body/pullquote all wrap to the
   same column width. 680px is the sweet spot — wide enough that the lead
   doesn't get awkward 4-5 line wraps, narrow enough that the body doesn't
   look like it's in a different column. */
.jmy-fullmoon-page .class-page-inner > *:not(.class-page-photo):not(.fullmoon-names-grid) {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Photos: full width of the 1080 container, natural image proportions */
.jmy-fullmoon-page .class-page-photo {
  max-width: 100% !important;
  width: 100% !important;
  margin: 70px auto !important;
  aspect-ratio: auto !important;
  height: auto !important;
}
.jmy-fullmoon-page .class-page-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.92) contrast(1.04) brightness(1.0);
}
@media (max-width: 700px) {
  .jmy-fullmoon-page .class-page-inner {
    padding: 0 24px;
  }
}

/* ---------- 5. Moon names — bigger text ---------- */
.fullmoon-names-grid {
  max-width: 880px !important;
  gap: 22px 40px !important;
}
.moon-name {
  padding: 22px 0 !important;
}
.moon-month {
  font-size: 13px !important;
  letter-spacing: 0.24em !important;
  margin-bottom: 8px !important;
}
.moon-label {
  font-size: 22px !important;
  line-height: 1.3 !important;
}
.jmy-fullmoon-page .class-page-credit {
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  margin: 16px 0 60px !important;
}

/* ---------- 6. Center-align ALL section-1 text for visual unity ----------
   The Full Moon page is ceremonial/poetic in tone with short paragraphs,
   so center-aligning everything (subheadings + body paragraphs) creates
   a unified rhythm that matches the centered eyebrow, lead, and pullquote.
   Other class detail pages (yin-yoga, yoga-nidra, sanctuary) keep their
   default left-aligned body since they have longer educational content. */
.jmy-fullmoon-page .class-page-subheading,
.jmy-fullmoon-page .class-page-inner > p:not(.class-page-eyebrow):not(.class-page-lead):not(.class-page-pullquote):not(.class-page-mantra):not(.class-page-credit) {
  text-align: center;
}
/* Tighten subheading top margin a touch — the previous 60px gap after a
   body paragraph created visual disconnection. 40px reads as a clean
   "new subsection" without feeling unrelated. */
.jmy-fullmoon-page .class-page-subheading {
  margin-top: 48px !important;
}

/* CRITICAL — High-specificity body paragraph rule.
   The base class-detail rule (line ~7833) has selector specificity 0,6,1
   and sets `margin: 0 0 24px !important` which means margin-left/right: 0.
   That rule beats any lower-specificity override even with !important, so
   body paragraphs on the Full Moon page were sitting at the LEFT edge of
   their parent container (text-align center only centered the text WITHIN
   the container, not the container itself).
   This rule duplicates the base selector + adds .jmy-fullmoon-page scope
   for specificity 0,7,1 — beats the base by one class. NOW the body
   paragraphs actually center, sharing the same X axis as subheadings. */
.jmy-fullmoon-page .class-page-inner > p:not(.class-page-eyebrow):not(.class-page-lead):not(.class-page-pullquote):not(.class-page-mantra):not(.class-page-credit) {
  max-width: 680px !important;
  margin: 0 auto 24px !important;
  text-align: center !important;
}

/* =========================================================
   v1.9.2 — More fixes:
   - Closing CTA: full block centering (heading + button as a column)
   - Full Moon photo aspect-ratio override (handled above)
   - Yoga Nidra moon position moved down (handled in SVG)
   ========================================================= */

/* ---------- Closing CTA — proper full-block centering ---------- */
/* The entire section becomes a centered flex column. Every direct
   child is forced to a max-width and centered horizontally. The button
   wrapper specifically gets flex centering so the button sits in the
   actual center, not flushed to the start of its own wrapper. */
.jmy-about-page .yin-closing,
.jmy-class-detail .yin-closing {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 110px 32px 180px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.jmy-about-page .yin-closing > *,
.jmy-class-detail .yin-closing > * {
  max-width: 720px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Button wrapper — force flex center so the button itself centers */
.jmy-about-page .yin-closing .wp-block-buttons,
.jmy-class-detail .yin-closing .wp-block-buttons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Individual button div */
.jmy-about-page .yin-closing .wp-block-button,
.jmy-class-detail .yin-closing .wp-block-button {
  margin: 0 auto !important;
  display: inline-flex !important;
  justify-content: center !important;
}

/* =========================================================
   v1.9.3 — Closing CTA full-width band + Full Moon photo height
   ========================================================= */

/* ---------- Closing CTA — full-width band with centered content ----------
   The base .yin-closing rule clamps to 880px max-width which made the
   gradient panel look like an off-center floating card. Override to
   make the section span the full viewport, then center the actual
   content inside it. */
.jmy-about-page .yin-closing,
.jmy-class-detail .yin-closing {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 75px 0 75px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Direct children get a constrained content width and center themselves
   in the full-width band. */
.jmy-about-page .yin-closing > *,
.jmy-class-detail .yin-closing > * {
  max-width: 720px !important;
  width: calc(100% - 64px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Button wrapper centers the button within itself */
.jmy-about-page .yin-closing .wp-block-buttons,
.jmy-class-detail .yin-closing .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

.jmy-about-page .yin-closing .wp-block-button,
.jmy-class-detail .yin-closing .wp-block-button {
  margin: 0 !important;
}

/* ---------- Full Moon photo height — cap reasonable ----------
   Photos were displaying at natural full-container-width ratios which
   could be 700+ px tall. Cap the wrapper width so heights become
   proportional and reasonable. Image keeps natural aspect ratio,
   no cropping or letterboxing. */
.jmy-fullmoon-page .class-page-photo {
  max-width: 760px !important;
  width: 100% !important;
  margin: 70px auto !important;
  aspect-ratio: auto !important;
}
.jmy-fullmoon-page .class-page-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   v1.10.0 — Round 3: Free Class + Video Library
   Both pages use the established .jmy-class-detail wrapper so
   they inherit text sizing, banner contrast, and closing CTA
   centering from Round 2.
   ========================================================= */

/* Kill WP auto-margins on Round 3 page wrappers */
.jmy-free-class-page,
.jmy-video-library-page,
.jmy-free-class-page > *,
.jmy-video-library-page > *,
.video-promo-section,
.video-promo-section > *,
.video-promo-inner,
.video-promo-inner > *,
.continue-section,
.continue-section > *,
.continue-inner,
.continue-inner > *,
.video-library-pricing-section,
.video-library-pricing-section > *,
.video-library-pricing-inner,
.video-library-pricing-inner > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ========== Banner overlays for new pages ========== */
.banner-free-class::before,
.banner-video-library::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.banner-free-class::before {
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.55) 0%,
    rgba(10, 24, 38, 0.25) 35%,
    rgba(10, 24, 38, 0.15) 60%,
    rgba(10, 24, 38, 0.4) 100%
  );
}
.banner-video-library::before {
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.4) 0%,
    rgba(10, 24, 38, 0.15) 50%,
    rgba(10, 24, 38, 0.35) 100%
  );
}
.banner-free-class .banner-scene,
.banner-video-library .banner-scene {
  z-index: 0;
}
.banner-free-class > *:not(.banner-scene),
.banner-video-library > *:not(.banner-scene) {
  z-index: 2;
}

/* Banner text contrast for new banners */
.banner-free-class .banner-title,
.banner-video-library .banner-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.banner-free-class .banner-title em,
.banner-video-library .banner-title em {
  color: #fce8c4 !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.banner-free-class .banner-subtitle,
.banner-video-library .banner-subtitle {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
.banner-free-class .breadcrumb,
.banner-video-library .breadcrumb {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.banner-free-class .breadcrumb .current,
.banner-video-library .breadcrumb .current {
  color: #fce8c4 !important;
}
.banner-free-class .breadcrumb .sep,
.banner-video-library .breadcrumb .sep {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* Banner SVG animations */
.banner-free-class .free-class-glow {
  animation: free-class-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-free-class .free-class-sun {
  animation: free-class-sun-pulse 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes free-class-glow-breathe {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes free-class-sun-pulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 1; }
}

.banner-video-library .vlib-moon-glow {
  animation: vlib-moon-breathe 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-video-library .vlib-star-a {
  animation: twinkle-a 4s ease-in-out infinite;
}
.banner-video-library .vlib-star-b {
  animation: twinkle-b 5s ease-in-out infinite;
  animation-delay: -1.5s;
}
@keyframes vlib-moon-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .banner-free-class .free-class-glow,
  .banner-free-class .free-class-sun,
  .banner-video-library .vlib-moon-glow,
  .banner-video-library .vlib-star-a,
  .banner-video-library .vlib-star-b {
    animation: none !important;
  }
}

/* ========== Banner ribbon (Free Class) ==========
   Outer .banner-ribbon-wrap is a full-width column matching the
   1280px banner content column (so the pill aligns with the title).
   Inner .banner-ribbon span is the actual visible pill. */
.banner-free-class .banner-ribbon-wrap {
  display: block !important;
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: inherit !important;
  line-height: 1 !important;
  background: transparent !important;
  text-shadow: none !important;
  color: inherit !important;
}
.banner-free-class .banner-ribbon {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(252, 217, 160, 0.18);
  border: 1px solid rgba(252, 217, 160, 0.55);
  border-radius: 40px;
  color: #fce8c4 !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin: 0 !important;
  font-style: normal !important;
  width: auto !important;
  max-width: max-content !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.banner-free-class .banner-ribbon .star {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  animation: ribbon-star-pulse 2.5s ease-in-out infinite;
}
@keyframes ribbon-star-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .banner-free-class .banner-ribbon .star { animation: none; }
}

/* ========== Free Class — video promo card ========== */
.video-promo-section {
  padding: 0 32px 0px !important;
  background: var(--bg);
}
.video-promo-inner {
  max-width: 1180px;
  margin: 0 auto !important;
}
.video-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: linear-gradient(135deg, #1e3a5f 0%, #2b4866 100%);
  border-radius: 8px 120px 8px 120px;
  overflow: hidden;
  color: var(--bg);
  box-shadow: 0 30px 60px -25px rgba(30, 58, 95, 0.3);
}
.video-card-visual {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  cursor: pointer;
}
.video-card-visual svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.video-card-visual:hover svg {
  transform: scale(1.04);
}
.video-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.15) 0%, rgba(10, 24, 38, 0.35) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease;
}
.video-card-visual:hover .video-card-overlay {
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.25) 0%, rgba(10, 24, 38, 0.45) 100%);
}
.play-btn {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(246, 248, 251, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease, background 0.4s ease;
}
.play-btn::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(246, 248, 251, 0.4);
  animation: play-ring-expand 3s ease-out infinite;
}
.video-card-visual:hover .play-btn {
  transform: scale(1.08);
  background: #fce8c4;
}
.play-btn-triangle {
  width: 0;
  height: 0;
  border-left: 22px solid var(--blue-deep);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}
@keyframes play-ring-expand {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .play-btn::before { animation: none; }
}
.video-card-label {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(10, 24, 38, 0.7);
  border-radius: 20px;
  color: var(--bg);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 3;
}
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: live-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

.video-card-content {
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.video-card-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fce8c4;
  margin: 0 0 22px;
  font-weight: 500;
}
.video-card-heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  color: var(--bg);
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.video-card-heading em {
  font-style: italic;
  color: #fce8c4;
}
.video-card-body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(246, 248, 251, 0.88);
  margin: 0 0 32px;
  font-weight: 300;
}
.video-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  background: var(--accent);
  color: var(--blue-deep) !important;
  border-radius: 40px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.4s ease;
  width: max-content;
  border: none;
}
.video-card-cta svg {
  transition: transform 0.3s ease;
}
.video-card-cta:hover {
  background: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(10, 24, 38, 0.25);
}
.video-card-cta:hover svg {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .video-card {
    grid-template-columns: 1fr;
    border-radius: 8px 80px 8px 80px;
  }
  .video-card-visual {
    aspect-ratio: 16 / 9;
  }
  .video-card-content {
    padding: 44px 36px;
    /* CRITICAL — grid items default to min-width: auto which can resolve
       to the intrinsic min-content width of children. The CTA button has
       width: max-content (~380px), which would force this column wider
       than the mobile viewport. Setting min-width: 0 lets the column
       shrink to whatever its parent grid cell allows. */
    min-width: 0;
  }
  /* CTA button: no longer width: max-content (which was pushing the
     entire card wider than mobile viewports). Now fills the column,
     centers its content, and allows the text to wrap if absolutely
     needed on very narrow screens. */
  .video-card-cta {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
    white-space: normal;
    line-height: 1.4;
  }
  .video-card-cta svg {
    flex-shrink: 0;
  }
}

@media (max-width: 600px) {
  .video-card-content {
    padding: 36px 24px;
  }
  .video-card-cta {
    padding: 18px 20px;
    font-size: 11px;
    letter-spacing: 0.18em;
  }
  .video-card-heading {
    font-size: 1.7rem;
  }
  /* Tighten section's outer padding on small mobile so the card has
     more horizontal room. Was 32px each side (base rule above) which
     ate ~64px of a ~380px viewport. */
  .video-promo-section {
    padding: 0 16px !important;
  }
}

/* ========== Free Class — continue/next-step cards ========== */
.continue-section {
  padding: 55px 32px 100px !important;
  background: var(--bg);
}
.continue-inner {
  max-width: 1180px;
  margin: 0 auto !important;
}
.continue-heading {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  line-height: 1.15 !important;
  color: var(--blue-deep) !important;
  margin: 8px 0 18px !important;
  letter-spacing: -0.02em !important;
}
.continue-heading em {
  font-style: italic;
  color: var(--accent);
}
.continue-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto 56px !important;
}
.continue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 0 auto;
}
.continue-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 48px 44px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: all 0.4s ease;
}
.continue-card:nth-child(1) { border-radius: 6px 6px 6px 120px; }
.continue-card:nth-child(2) { border-radius: 6px 6px 120px 6px; }
.continue-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(30, 58, 95, 0.25);
  border-color: var(--accent);
}
.continue-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: block;
}
.continue-card-heading {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 400;
  color: var(--blue-deep);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.continue-card-heading em {
  font-style: italic;
  color: var(--accent);
}
.continue-card-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 28px;
  flex: 1;
}
.continue-card-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  transition: all 0.3s ease;
}
.continue-card:hover .continue-card-link {
  color: var(--accent);
  border-top-color: var(--accent);
  gap: 16px;
}
.continue-card-link svg {
  transition: transform 0.3s ease;
}
.continue-card:hover .continue-card-link svg {
  transform: translateX(3px);
}

@media (max-width: 800px) {
  .continue-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .continue-card:nth-child(1),
  .continue-card:nth-child(2) {
    border-radius: 6px 6px 6px 80px;
  }
  .continue-card:nth-child(2) {
    border-radius: 6px 6px 80px 6px;
  }
}

/* ========== Video Library — pricing card ========== */
.video-library-pricing-section {
  padding: 60px 32px 80px !important;
  background: var(--bg);
}
.video-library-pricing-inner {
  max-width: 720px;
  margin: 0 auto !important;
}
.pricing-card {
  position: relative;
  background: linear-gradient(135deg, #1e3a5f 0%, #2b4866 100%);
  color: var(--bg);
  padding: 72px 56px;
  border-radius: 8px 120px 8px 120px;
  text-align: center;
  box-shadow: 0 30px 60px -25px rgba(30, 58, 95, 0.3);
  overflow: hidden;
}
.pricing-card::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 217, 160, 0.15), transparent 65%);
  pointer-events: none;
}
.pricing-card-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fce8c4;
  margin: 0 0 24px;
  font-weight: 400;
  position: relative;
  z-index: 1;
}
.pricing-card-amount {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--serif);
  color: var(--bg);
  margin: 0 0 28px;
  position: relative;
  z-index: 1;
}
.pricing-currency {
  font-size: 38px;
  font-weight: 300;
  margin-right: 4px;
  align-self: flex-start;
  margin-top: 12px;
  color: #fce8c4;
}
.pricing-figure {
  font-size: 96px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}
.pricing-cents {
  font-size: 38px;
  font-weight: 300;
  color: #fce8c4;
}
.pricing-card-line {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  color: rgba(246, 248, 251, 0.92);
  margin: 0 auto 36px;
  max-width: 480px;
  font-weight: 300;
  position: relative;
  z-index: 1;
}
.pricing-card-line strong {
  color: #fce8c4;
  font-weight: 500;
}
.pricing-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--accent);
  color: var(--blue-deep) !important;
  border-radius: 40px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.4s ease;
  border: none;
  position: relative;
  z-index: 1;
}
.pricing-card-cta:hover {
  background: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(10, 24, 38, 0.3);
}
.pricing-card-cta svg {
  transition: transform 0.3s ease;
}
.pricing-card-cta:hover svg {
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .pricing-card {
    padding: 52px 32px;
    border-radius: 8px 80px 8px 80px;
  }
  .pricing-figure { font-size: 72px; }
  .pricing-currency, .pricing-cents { font-size: 30px; }
}

/* ========== Free Class intro tightening ========== */
.free-class-intro {
  padding: 90px 32px 10px !important;
}

/* ========== Video Library intro + note tightening ========== */
.video-library-intro {
  padding: 90px 32px 30px !important;
}
.video-library-note {
  padding: 30px 32px 60px !important;
}
.video-library-note .pull-callout {
  background: var(--bg-soft) !important;
  border-radius: 6px 100px 6px 6px !important;
}
.video-library-note .pull-callout p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--blue-deep);
  margin: 0 !important;
}
.video-library-note .pull-callout strong {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}

/* =========================================================
   v1.10.1 — Free Class + Video Library refinements
   - Ribbon alignment fix (handled above via outer wrap restructure)
   - Reduce pricing card section spacing (top/bottom)
   - Make .video-card-visual styled as a clickable link
   ========================================================= */

/* Pricing section — tighter top/bottom spacing */
.video-library-pricing-section {
  padding: 0px 32px 0px !important;
}

/* The .video-card-visual is now an <a> tag — keep visual identical, just
   ensure it behaves like a clickable area (no underline, inherits color). */
.jmy-free-class-page .video-card-visual {
  display: block;
  text-decoration: none !important;
  color: inherit;
}
.jmy-free-class-page .video-card-visual:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

/* =========================================================
   v1.11.0 — Round 4: FAQ + Testimonials + Bibliography
   ========================================================= */

/* Kill WP auto-margins on Round 4 page wrappers */
.jmy-faq-page,
.jmy-testimonials-page,
.jmy-bibliography-page,
.jmy-faq-page > *,
.jmy-testimonials-page > *,
.jmy-bibliography-page > *,
.faq-list-section,
.faq-list-section > *,
.faq-list-inner,
.faq-list-inner > *,
.testimonials-list-section,
.testimonials-list-section > *,
.testimonials-list-inner,
.testimonials-list-inner > *,
.bibliography-section,
.bibliography-section > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ========== Banner overlays for Round 4 ========== */
.banner-faq::before,
.banner-testimonials::before,
.banner-bibliography::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.banner-faq::before,
.banner-testimonials::before {
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.55) 0%,
    rgba(10, 24, 38, 0.25) 35%,
    rgba(10, 24, 38, 0.15) 60%,
    rgba(10, 24, 38, 0.4) 100%
  );
}
.banner-bibliography::before {
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.4) 0%,
    rgba(10, 24, 38, 0.15) 50%,
    rgba(10, 24, 38, 0.35) 100%
  );
}
.banner-faq .banner-scene,
.banner-testimonials .banner-scene,
.banner-bibliography .banner-scene {
  z-index: 0;
}
.banner-faq > *:not(.banner-scene),
.banner-testimonials > *:not(.banner-scene),
.banner-bibliography > *:not(.banner-scene) {
  z-index: 2;
}

/* Banner text contrast */
.banner-faq .banner-title,
.banner-testimonials .banner-title,
.banner-bibliography .banner-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.banner-faq .banner-title em,
.banner-testimonials .banner-title em,
.banner-bibliography .banner-title em {
  color: #fce8c4 !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.banner-faq .banner-subtitle,
.banner-testimonials .banner-subtitle,
.banner-bibliography .banner-subtitle {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
.banner-faq .breadcrumb,
.banner-testimonials .breadcrumb,
.banner-bibliography .breadcrumb {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.banner-faq .breadcrumb .current,
.banner-testimonials .breadcrumb .current,
.banner-bibliography .breadcrumb .current {
  color: #fce8c4 !important;
}
.banner-faq .breadcrumb .sep,
.banner-testimonials .breadcrumb .sep,
.banner-bibliography .breadcrumb .sep {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* Banner SVG animations */
.banner-faq .faq-glow {
  animation: faq-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-faq .faq-sun {
  animation: faq-sun-pulse 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-faq .faq-cloud-a { animation: cloud-drift-a 80s linear infinite; }
.banner-faq .faq-cloud-b { animation: cloud-drift-b 100s linear infinite; animation-delay: -40s; }
@keyframes faq-glow-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
}
@keyframes faq-sun-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.banner-testimonials .testimonials-glow {
  animation: testimonials-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-testimonials .testimonials-sun {
  animation: testimonials-sun-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes testimonials-glow-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.05); }
}
@keyframes testimonials-sun-pulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}

.banner-bibliography .bib-moon-glow {
  animation: bib-moon-breathe 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-bibliography .bib-star-a {
  animation: twinkle-a 4s ease-in-out infinite;
}
.banner-bibliography .bib-star-b {
  animation: twinkle-b 5s ease-in-out infinite;
  animation-delay: -1.5s;
}
@keyframes bib-moon-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.88; transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .banner-faq .faq-glow,
  .banner-faq .faq-sun,
  .banner-faq .faq-cloud-a,
  .banner-faq .faq-cloud-b,
  .banner-testimonials .testimonials-glow,
  .banner-testimonials .testimonials-sun,
  .banner-bibliography .bib-moon-glow,
  .banner-bibliography .bib-star-a,
  .banner-bibliography .bib-star-b {
    animation: none !important;
  }
}

/* ========== FAQ — accordion items ========== */
.faq-list-section {
  padding: 0px 32px 50px !important;
  background: var(--bg);
}
.faq-list-inner {
  max-width: 880px;
  margin: 0 auto !important;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background 0.4s ease;
}
.faq-item[open] {
  background: linear-gradient(180deg, rgba(252, 217, 160, 0.05) 0%, transparent 100%);
}
.faq-q {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: 24px;
  align-items: center;
  padding: 32px 8px;
  transition: color 0.3s ease;
  outline: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ''; }
.faq-q:focus-visible {
  background: rgba(252, 217, 160, 0.08);
  outline: none;
}
.faq-q:hover .faq-q-text {
  color: var(--accent);
}
.faq-q-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.faq-q-text {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: var(--blue-deep);
  font-weight: 400;
  line-height: 1.3;
  transition: color 0.3s ease;
  letter-spacing: -0.005em;
}
.faq-q-icon {
  position: relative;
  width: 24px;
  height: 24px;
  justify-self: end;
  flex-shrink: 0;
}
.faq-q-icon::before,
.faq-q-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink-soft);
  transition: transform 0.3s ease, background 0.3s ease;
}
.faq-q-icon::before {
  width: 14px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.faq-q-icon::after {
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.faq-item[open] .faq-q-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-item[open] .faq-q-icon::before,
.faq-item[open] .faq-q-icon::after {
  background: var(--accent);
}
.faq-q:hover .faq-q-icon::before,
.faq-q:hover .faq-q-icon::after {
  background: var(--accent);
}

.faq-a {
  padding: 8px 8px 36px;
  padding-left: 92px;
  animation: faq-fade-in 0.4s ease;
}
@keyframes faq-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-a p {
  font-family: var(--serif);
  font-size: 19px !important;
  line-height: 1.8 !important;
  color: var(--ink-soft);
  margin: 0 0 18px !important;
  font-weight: 300;
}
.faq-a p:last-child {
  margin-bottom: 0 !important;
}
.faq-a strong {
  color: var(--blue-deep);
  font-weight: 500;
}
.faq-suggestion-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 !important;
}
.faq-suggestion-list li {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 12px 0 12px 32px;
  position: relative;
  border-bottom: 1px dashed rgba(30, 58, 95, 0.08);
}
.faq-suggestion-list li:last-child {
  border-bottom: none;
}
.faq-suggestion-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 18px;
  height: 1px;
  background: var(--accent);
}
.faq-quote {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 22px !important;
  line-height: 1.5 !important;
  color: var(--blue-deep) !important;
  text-align: center !important;
  padding: 28px 32px !important;
  margin: 32px 0 !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.faq-quote-attr {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 700px) {
  .faq-q {
    grid-template-columns: 36px 1fr 28px;
    gap: 14px;
    padding: 24px 4px;
  }
  .faq-q-num {
    font-size: 12px;
  }
  .faq-a {
    padding-left: 50px;
    padding-bottom: 28px;
  }
  .faq-a p {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }
}

/* ========== Testimonials — quote cards ========== */
.testimonials-list-section {
  padding: 40px 32px 100px !important;
  background: var(--bg);
}
.testimonials-list-inner {
  max-width: 880px;
  margin: 0 auto !important;
}
.testimonials-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.testimonial-card {
  position: relative;
  padding: 56px 56px 48px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px 6px 6px 100px;
  transition: all 0.4s ease;
}
.testimonial-card:nth-child(even) {
  border-radius: 6px 6px 100px 6px;
}
.testimonial-card:hover {
  border-color: var(--accent);
  box-shadow: 0 24px 48px -20px rgba(30, 58, 95, 0.18);
  transform: translateY(-3px);
}
.testimonial-mark {
  position: absolute;
  top: 12px;
  left: 36px;
  font-family: var(--serif);
  font-size: 120px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.18;
  font-weight: 400;
  pointer-events: none;
  user-select: none;
}
.testimonial-body {
  position: relative;
  z-index: 1;
  margin: 0 0 32px;
  padding: 0;
  border: none;
  font-style: normal;
}
.testimonial-body p {
  font-family: var(--serif);
  font-size: 20px !important;
  line-height: 1.75 !important;
  color: var(--blue-deep);
  margin: 0 0 18px !important;
  font-weight: 300;
}
.testimonial-body p:last-child {
  margin-bottom: 0 !important;
}
.testimonial-attr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-style: normal;
}
.testimonial-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: 0.005em;
}
.testimonial-loc {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

@media (max-width: 700px) {
  .testimonial-card {
    padding: 44px 32px 36px;
  }
  .testimonial-mark {
    font-size: 90px;
    top: 8px;
    left: 24px;
  }
  .testimonial-body p {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }
}

/* ========== Bibliography — coming soon placeholder ========== */
.bibliography-section {
  padding: 80px 32px 100px !important;
  background: var(--bg);
}
.bibliography-placeholder {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 72px 48px;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  border-radius: 6px 100px 6px 100px;
}
.bibliography-ornament {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 28px;
  animation: bib-ornament-pulse 4s ease-in-out infinite;
}
@keyframes bib-ornament-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .bibliography-ornament { animation: none !important; }
}
.bibliography-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 24px !important;
  font-weight: 400;
}
.bibliography-heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: var(--blue-deep);
  margin: 0 0 28px !important;
  letter-spacing: -0.02em;
}
.bibliography-heading em {
  font-style: italic;
  color: var(--accent);
}
.bibliography-body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 16px !important;
  font-weight: 300;
}
.bibliography-body--small {
  font-size: 15px;
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 16px !important;
}

@media (max-width: 600px) {
  .bibliography-placeholder {
    padding: 48px 28px;
    border-radius: 6px 60px 6px 60px;
  }
}

/* ========== FAQ + Testimonials intro section spacing ========== */
.faq-intro-section,
.testimonials-intro-section {
  padding: 90px 32px 30px !important;
}

/* =========================================================
   v1.11.1 — Round 4 fixes
   - FAQ duplicate plus icon (old legacy ::after rule conflicting)
   - FAQ answer text bumped to 22px
   - Testimonials intro section padding tightened
   - Testimonial body offset down from quote mark
   ========================================================= */

/* ---------- FAQ: kill the legacy ::after plus from old FAQ system ---------- */
/* The old .faq-item summary::after { content: '+' } rule (line ~1224) was
   designed for an earlier FAQ markup. It's now firing in addition to the
   explicit .faq-q-icon span. Suppress it within the new .jmy-faq-page wrapper. */
.jmy-faq-page .faq-item summary::after,
.jmy-faq-page .faq-q::after {
  content: none !important;
  display: none !important;
}

/* ---------- FAQ: answer text → 22px ---------- */
.jmy-faq-page .faq-a p {
  font-size: 22px !important;
  line-height: 1.7 !important;
  margin: 0 0 24px !important;
}
.jmy-faq-page .faq-suggestion-list li {
  font-size: 20px !important;
  line-height: 1.6 !important;
}
.jmy-faq-page .faq-suggestion-list li::before {
  top: 26px !important;
}
.jmy-faq-page .faq-quote {
  font-size: 24px !important;
}

@media (max-width: 700px) {
  .jmy-faq-page .faq-a p {
    font-size: 19px !important;
    line-height: 1.65 !important;
  }
  .jmy-faq-page .faq-suggestion-list li {
    font-size: 18px !important;
  }
  .jmy-faq-page .faq-quote {
    font-size: 20px !important;
  }
}

/* ---------- Testimonials: tighten intro section bottom padding ---------- */
.testimonials-intro-section {
  padding: 90px 32px 0 !important;
}

/* ---------- Testimonials: offset body text below the large quote mark ---------- */
.testimonial-card {
  padding-top: 78px !important;
}
.testimonial-mark {
  top: 18px !important;
  left: 44px !important;
}
@media (max-width: 700px) {
  .testimonial-card {
    padding-top: 64px !important;
  }
  .testimonial-mark {
    top: 14px !important;
    left: 30px !important;
  }
}

/* =========================================================
   v1.12.0 — Round 5: Classes index + Contact + Book Now
   ========================================================= */

/* Kill WP auto-margins on Round 5 page wrappers */
.jmy-classes-index-page,
.jmy-contact-page,
.jmy-book-now-page,
.jmy-classes-index-page > *,
.jmy-contact-page > *,
.jmy-book-now-page > *,
.classes-index-section,
.classes-index-section > *,
.contact-grid-section,
.contact-grid-section > *,
.contact-grid-inner,
.contact-grid-inner > *,
.contact-gallery-section,
.contact-gallery-section > *,
.contact-gallery-inner,
.contact-gallery-inner > *,
.packages-promo-section,
.packages-promo-section > *,
.packages-promo-inner,
.packages-promo-inner > *,
.booking-widget-section,
.booking-widget-section > *,
.booking-widget-inner,
.booking-widget-inner > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ========== Banner overlays for Round 5 ========== */
.banner-classes-index::before,
.banner-contact::before,
.banner-book-now::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.55) 0%,
    rgba(10, 24, 38, 0.25) 35%,
    rgba(10, 24, 38, 0.15) 60%,
    rgba(10, 24, 38, 0.4) 100%
  );
}
.banner-classes-index .banner-scene,
.banner-contact .banner-scene,
.banner-book-now .banner-scene {
  z-index: 0;
}
.banner-classes-index > *:not(.banner-scene),
.banner-contact > *:not(.banner-scene),
.banner-book-now > *:not(.banner-scene) {
  z-index: 2;
}

/* Banner text contrast */
.banner-classes-index .banner-title,
.banner-contact .banner-title,
.banner-book-now .banner-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.banner-classes-index .banner-title em,
.banner-contact .banner-title em,
.banner-book-now .banner-title em {
  color: #fce8c4 !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.banner-classes-index .banner-subtitle,
.banner-contact .banner-subtitle,
.banner-book-now .banner-subtitle {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
.banner-classes-index .breadcrumb,
.banner-contact .breadcrumb,
.banner-book-now .breadcrumb {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.banner-classes-index .breadcrumb .current,
.banner-contact .breadcrumb .current,
.banner-book-now .breadcrumb .current {
  color: #fce8c4 !important;
}
.banner-classes-index .breadcrumb .sep,
.banner-contact .breadcrumb .sep,
.banner-book-now .breadcrumb .sep {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* Banner SVG animations */
.banner-classes-index .ci-glow {
  animation: ci-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-classes-index .ci-sun {
  animation: ci-sun-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-classes-index .ci-cloud-a { animation: cloud-drift-a 80s linear infinite; }
.banner-classes-index .ci-cloud-b { animation: cloud-drift-b 100s linear infinite; animation-delay: -40s; }
@keyframes ci-glow-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
}
@keyframes ci-sun-pulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}

.banner-contact .contact-glow {
  animation: contact-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-contact .contact-sun {
  animation: contact-sun-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-contact .contact-cloud { animation: cloud-drift-a 80s linear infinite; }
@keyframes contact-glow-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes contact-sun-pulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}

.banner-book-now .bn-glow {
  animation: bn-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-book-now .bn-sun {
  animation: bn-sun-pulse 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes bn-glow-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
}
@keyframes bn-sun-pulse {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-classes-index .ci-glow,
  .banner-classes-index .ci-sun,
  .banner-classes-index .ci-cloud-a,
  .banner-classes-index .ci-cloud-b,
  .banner-contact .contact-glow,
  .banner-contact .contact-sun,
  .banner-contact .contact-cloud,
  .banner-book-now .bn-glow,
  .banner-book-now .bn-sun {
    animation: none !important;
  }
}

/* ========== Classes index — 4-card grid ========== */
.classes-index-section {
  padding: 25px 56px 100px !important;
  background: var(--bg);
}
.classes-index-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 48px;
  align-items: start;
}
.classes-index-grid .ci-card {
  display: grid;
  grid-template-rows: 280px 1fr;
  height: 660px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  box-sizing: border-box;
}
.classes-index-grid .ci-card-visual {
  height: 280px;
  width: 100%;
  overflow: hidden;
  border-radius: 6px 6px 160px 6px;
  background: var(--bg-accent);
  position: relative;
  margin: 0;
  padding: 0;
}
.classes-index-grid .ci-card:nth-child(even) .ci-card-visual {
  border-radius: 6px 6px 6px 160px;
}
.classes-index-grid .ci-card-visual .home-class-visual {
  width: 100%;
  height: 100%;
  margin: 0;
}
.classes-index-grid .ci-card-visual svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.6s ease;
}
.classes-index-grid .ci-card:hover .ci-card-visual svg {
  transform: scale(1.03);
}
.classes-index-grid .ci-card-content {
  padding: 28px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  box-sizing: border-box;
}
.classes-index-grid .ci-card-eyebrow {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--accent);
  margin: 0 0 14px 0;
  padding: 0;
  line-height: 1;
}
.classes-index-grid .ci-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: var(--blue-deep);
  letter-spacing: -0.005em;
  margin: 0 0 18px 0;
  padding: 0;
}
.classes-index-grid .ci-card-body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 28px 0;
  padding: 0;
  font-weight: 300;
  flex: 1 1 auto;
}
.classes-index-grid .ci-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blue-deep);
  border-bottom: 1px solid var(--blue-deep);
  padding: 0 0 6px 0;
  margin: 0;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  transition: all 0.3s ease;
  margin-top: auto;
  align-self: flex-start;
}
.classes-index-grid .ci-card-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  gap: 16px;
}
@media (max-width: 900px) {
  .classes-index-section {
    padding: 40px 24px 80px !important;
  }
  .classes-index-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .classes-index-grid .ci-card {
    grid-template-rows: 240px auto;
    height: auto;
  }
  .classes-index-grid .ci-card-visual {
    height: 240px;
  }
}

/* ========== Contact — info card + form grid ========== */
.contact-grid-section {
  padding: 40px 32px 80px !important;
  background: var(--bg);
}
.contact-grid-inner {
  max-width: 1180px;
  margin: 0 auto !important;
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Email info card — left column */
.contact-info-card {
  position: sticky;
  top: 120px;
  padding: 56px 48px;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  border-radius: 6px 100px 6px 100px;
}
.contact-info-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px !important;
  font-weight: 400;
}
.contact-email {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  color: var(--blue-deep);
  letter-spacing: -0.005em;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: all 0.3s ease;
  word-break: break-word;
  line-height: 1.3;
}
.contact-email:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.contact-info-divider {
  width: 32px;
  height: 1px;
  background: var(--accent);
  margin: 32px 0 !important;
  padding: 0;
}
.contact-info-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 !important;
  font-weight: 300;
}

/* Form card — right column */
.contact-form-card {
  padding: 56px 48px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px 6px 100px 6px;
}
.contact-form-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px !important;
  font-weight: 400;
}
.contact-form-heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  color: var(--blue-deep);
  margin: 0 0 32px !important;
  letter-spacing: -0.02em;
}
.contact-form-heading em {
  font-style: italic;
  color: var(--accent);
}

/* Style CF7 form inputs to match the theme */
.contact-form-card .wpcf7-form p {
  margin: 0 0 22px !important;
  font-family: var(--sans);
}
.contact-form-card .wpcf7-form label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0 0 10px;
}
.contact-form-card .wpcf7-form input[type="text"],
.contact-form-card .wpcf7-form input[type="email"],
.contact-form-card .wpcf7-form input[type="tel"],
.contact-form-card .wpcf7-form input[type="url"],
.contact-form-card .wpcf7-form textarea,
.contact-form-card .wpcf7-form select {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color 0.3s ease, background 0.3s ease;
  box-sizing: border-box;
}
.contact-form-card .wpcf7-form input:focus,
.contact-form-card .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1);
}
.contact-form-card .wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--serif);
}
.contact-form-card .wpcf7-form input[type="submit"],
.contact-form-card .wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background: var(--blue-deep);
  color: var(--bg) !important;
  border: none;
  border-radius: 40px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s ease;
  width: auto;
  text-transform: uppercase;
}
.contact-form-card .wpcf7-form input[type="submit"]:hover,
.contact-form-card .wpcf7-form .wpcf7-submit:hover {
  background: var(--accent);
  color: var(--blue-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(30, 58, 95, 0.18);
}
.contact-form-card .wpcf7-not-valid-tip {
  color: #c25e4e !important;
  font-family: var(--sans);
  font-size: 13px;
  margin-top: 6px;
  font-style: italic;
}
.contact-form-card .wpcf7-response-output {
  border: 1px solid var(--line) !important;
  border-radius: 4px;
  padding: 16px 20px !important;
  margin: 24px 0 0 !important;
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  color: var(--blue-deep);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contact-info-card {
    position: static;
    padding: 44px 36px;
  }
  .contact-form-card {
    padding: 44px 36px;
    border-radius: 60px 6px 60px 6px;
  }
}

/* ========== Contact — 3-photo gallery (all portrait orientation) ========== */
.contact-gallery-section {
  padding: 60px 32px 80px !important;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.contact-gallery-inner {
  max-width: 1180px;
  margin: 0 auto !important;
}
.contact-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.contact-gallery-item {
  margin: 0;
  overflow: hidden;
  background: var(--bg-accent);
  box-shadow: 0 30px 60px -30px rgba(30, 58, 95, 0.3);
  position: relative;
  aspect-ratio: 3 / 4;
}
/* Alternating arched corners for visual rhythm across three portraits */
.contact-gallery-item:nth-child(1) {
  border-radius: 120px 6px 6px 6px;
}
.contact-gallery-item:nth-child(2) {
  border-radius: 6px 6px 6px 120px;
  margin-top: 32px;
}
.contact-gallery-item:nth-child(3) {
  border-radius: 6px 120px 6px 6px;
}
.contact-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.contact-gallery-item:hover img {
  transform: scale(1.04);
}
@media (max-width: 900px) {
  .contact-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .contact-gallery-item:nth-child(2) {
    margin-top: 0;
  }
  .contact-gallery-item:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 480px;
    justify-self: center;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .contact-gallery {
    grid-template-columns: 1fr;
  }
  .contact-gallery-item:nth-child(1),
  .contact-gallery-item:nth-child(2),
  .contact-gallery-item:nth-child(3) {
    border-radius: 6px 80px 6px 80px;
    max-width: 420px;
    justify-self: center;
    width: 100%;
  }
}

/* ========== Book Now — packages promo card ========== */
.packages-promo-section {
  padding: 0px 32px 0px !important;
  background: var(--bg);
}
.packages-promo-inner {
  max-width: 1080px;
  margin: 0 auto !important;
}
.packages-promo-card {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 56px 64px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2b4866 100%);
  color: var(--bg);
  border-radius: 8px 120px 8px 120px;
  text-decoration: none !important;
  box-shadow: 0 30px 60px -25px rgba(30, 58, 95, 0.3);
  overflow: hidden;
  position: relative;
  transition: all 0.5s ease;
}
.packages-promo-card::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 217, 160, 0.16), transparent 65%);
  pointer-events: none;
  transition: transform 0.6s ease;
}
.packages-promo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 40px 70px -25px rgba(30, 58, 95, 0.4);
}
.packages-promo-card:hover::before {
  transform: scale(1.1);
}
.packages-promo-content {
  flex: 1;
  position: relative;
  z-index: 1;
}
.packages-promo-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fce8c4;
  margin: 0 0 16px !important;
  font-weight: 400;
}
.packages-promo-heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  color: var(--bg);
  margin: 0 0 18px !important;
  letter-spacing: -0.02em;
}
.packages-promo-heading em {
  font-style: italic;
  color: #fce8c4;
}
.packages-promo-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(246, 248, 251, 0.88);
  margin: 0 0 24px !important;
  font-weight: 300;
  max-width: 540px;
}
.packages-promo-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(252, 217, 160, 0.4);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fce8c4;
  font-weight: 500;
  transition: gap 0.3s ease;
}
.packages-promo-card:hover .packages-promo-link {
  gap: 18px;
}
.packages-promo-link svg {
  transition: transform 0.3s ease;
}
.packages-promo-card:hover .packages-promo-link svg {
  transform: translateX(4px);
}
.packages-promo-decor {
  flex-shrink: 0;
  color: #fce8c4;
  opacity: 0.65;
  position: relative;
  z-index: 1;
  animation: packages-decor-pulse 6s ease-in-out infinite;
}
@keyframes packages-decor-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .packages-promo-decor { animation: none !important; }
}

@media (max-width: 800px) {
  .packages-promo-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 44px 36px;
    border-radius: 8px 80px 8px 80px;
  }
  .packages-promo-decor {
    align-self: center;
	display: none;
  }
}

/* ========== Book Now — booking widget frame ========== */
.booking-widget-section {
  padding: 50px 32px 0px !important;
  background: var(--bg);
}
.booking-widget-inner {
  max-width: 1080px;
  margin: 0 auto !important;
}
.booking-widget-heading {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(2rem, 4vw, 2.6rem) !important;
  line-height: 1.15 !important;
  color: var(--blue-deep) !important;
  margin: 8px auto 25px !important;
  letter-spacing: -0.02em !important;
  max-width: 720px;
}
.booking-widget-heading em {
  font-style: italic;
  color: var(--accent);
}
.booking-widget-frame {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px;
  min-height: 200px;
  position: relative;
}
/* Placeholder text styling — only shows when literal placeholder text is in the frame */
.booking-widget-frame:has(> *:only-child:empty),
.booking-widget-frame:not(:has(> *:not(p))) {
  text-align: center;
}

@media (max-width: 700px) {
  .booking-widget-frame {
    padding: 24px 16px;
  }
}

@media (max-width: 400px) {
  .booking-widget-frame {
    padding: 5px 2px;
  }
}

/* ========== Round 5 intro section spacing ========== */
.classes-index-intro-section,
.contact-intro-section,
.book-now-intro-section {
  padding: 90px 32px 0px !important;
}

/* =========================================================
   v1.12.2 — Round 5 fixes
   - Classes index cards: drop fixed height (was 660px causing
     huge gap between body and Learn More link)
   - Add "Before you book" info-card section to Book Now page
   ========================================================= */

/* ---------- Classes index card height fix ---------- */
.classes-index-grid .ci-card {
  height: auto !important;
  grid-template-rows: 280px auto !important;
}
.classes-index-grid .ci-card-content {
  height: auto !important;
}
.classes-index-grid .ci-card-body {
  flex: 0 0 auto !important;
  margin-bottom: 28px !important;
}
.classes-index-grid .ci-card-link {
  margin-top: 0 !important;
}

/* ---------- Book Now: "Before you book" info-card section ---------- */
.before-you-book-section {
  padding: 40px 32px 90px !important;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.before-you-book-inner {
  max-width: 1180px;
  margin: 0 auto !important;
}
.before-you-book-section > * > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.before-you-book-heading {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(2rem, 4vw, 2.6rem) !important;
  line-height: 1.15 !important;
  color: var(--blue-deep) !important;
  margin: 8px auto 50px !important;
  letter-spacing: -0.02em !important;
  max-width: 720px;
  text-align: center !important;
}
.before-you-book-heading em {
  font-style: italic;
  color: var(--accent);
}
.before-you-book-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.byb-card {
  padding: 40px 36px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}
.byb-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -20px rgba(30, 58, 95, 0.18);
}
.byb-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  line-height: 1;
}
.byb-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--blue-deep);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.byb-card-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 300;
}
.byb-card-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}
.byb-card-body a:hover {
  color: var(--blue-deep);
}

@media (max-width: 900px) {
  .before-you-book-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .before-you-book-section {
    padding: 50px 24px 70px !important;
  }
}

/* =========================================================
   v1.13.0 — Inner Sanctuary page (final missing page)
   ========================================================= */

/* Kill WP auto-margins on Sanctuary wrapper */
.jmy-sanctuary-page,
.jmy-sanctuary-page > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Banner overlay for sanctuary banner */
.banner-sanctuary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.55) 0%,
    rgba(10, 24, 38, 0.25) 35%,
    rgba(10, 24, 38, 0.15) 60%,
    rgba(10, 24, 38, 0.4) 100%
  );
}
.banner-sanctuary .banner-scene {
  z-index: 0;
}
.banner-sanctuary > *:not(.banner-scene) {
  z-index: 2;
}

/* Banner text contrast */
.banner-sanctuary .banner-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.banner-sanctuary .banner-title em {
  color: #fce8c4 !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.banner-sanctuary .banner-subtitle {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
.banner-sanctuary .breadcrumb {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.banner-sanctuary .breadcrumb .current {
  color: #fce8c4 !important;
}
.banner-sanctuary .breadcrumb .sep {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* Banner SVG animations */
.banner-sanctuary .sanctuary-glow {
  animation: sanctuary-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-sanctuary .sanctuary-sun {
  animation: sanctuary-sun-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-sanctuary .sanctuary-cloud {
  animation: cloud-drift-a 90s linear infinite;
}
@keyframes sanctuary-glow-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes sanctuary-sun-pulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-sanctuary .sanctuary-glow,
  .banner-sanctuary .sanctuary-sun,
  .banner-sanctuary .sanctuary-cloud {
    animation: none !important;
  }
}

/* =========================================================
   v1.14.0 — Sun / Moon Theme Toggle
   - Click the header logo mark to swap the entire site between
     a moon (default, current twilight palette) and sun (bright
     daytime palette) theme. Choice persists via localStorage.
   - The dispatcher (svg-library.php) emits both moon and sun
     SVG variants stacked inside .banner-scene--themed (or
     .home-hero-image--themed for the homepage hero).
   - Body class theme-mode-moon / theme-mode-sun controls which
     variant is visible via cross-fade.
   ========================================================= */

/* ---------- Logo mark: stack both icons, fade between them ---------- */
.jmy-logo-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.jmy-logo-mark:hover {
  transform: rotate(-8deg);
}
/* When the toggle hint tooltip is appended inside the logo mark, the
   parent's transform rotates the tooltip too — making it feel like the
   tooltip "slides diagonally" on hover. Suppress the rotation while the
   hint is present. The logo still has the cute tilt 99% of the time
   (since the hint is one-time-only per visitor for 90 days). */
.jmy-logo-mark:has(.jmy-toggle-hint):hover {
  transform: none;
}
.jmy-logo-svg {
  position: absolute;
  inset: 0;
  display: block;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Moon mode (default): moon visible, sun hidden */
html.theme-mode-moon .jmy-logo-svg--moon,
html:not(.theme-mode-sun) .jmy-logo-svg--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
html.theme-mode-moon .jmy-logo-svg--sun,
html:not(.theme-mode-sun) .jmy-logo-svg--sun {
  opacity: 0;
  transform: rotate(45deg) scale(0.7);
  pointer-events: none;
}
/* Sun mode: sun visible, moon hidden */
html.theme-mode-sun .jmy-logo-svg--moon {
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
  pointer-events: none;
}
html.theme-mode-sun .jmy-logo-svg--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
/* Sun rays gently rotate when in sun mode */
html.theme-mode-sun .jmy-logo-rays {
  animation: logo-rays-rotate 30s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes logo-rays-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .jmy-logo-svg,
  html.theme-mode-sun .jmy-logo-rays {
    transition: opacity 0.2s ease;
    animation: none !important;
  }
  .jmy-logo-mark:hover {
    transform: none;
  }
}

/* ---------- Banner / Hero variant cross-fade ---------- */
/* When the dispatcher sees a banner with a _sun companion, it emits:
     <div class="banner-scene banner-scene--themed">
       <div class="banner-variant banner-variant-moon">...</div>
       <div class="banner-variant banner-variant-sun">...</div>
     </div>
   Same structure for hero (home-hero-image--themed wrapper).
   We absolutely-position both variants on top of each other and
   cross-fade based on body.theme-mode-* class. */

.banner-scene--themed,
.home-hero-image--themed {
  position: relative;
}
.banner-scene--themed .banner-variant,
.home-hero-image--themed .banner-variant {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.6s ease;
}
.banner-scene--themed .banner-variant svg,
.home-hero-image--themed .banner-variant svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Moon variant visible by default and in moon mode */
html.theme-mode-moon .banner-variant-moon,
html:not(.theme-mode-sun) .banner-variant-moon {
  opacity: 1;
  z-index: 2;
}
html.theme-mode-moon .banner-variant-sun,
html:not(.theme-mode-sun) .banner-variant-sun {
  opacity: 0;
  z-index: 1;
}
/* Sun variant visible in sun mode */
html.theme-mode-sun .banner-variant-moon {
  opacity: 0;
  z-index: 1;
}
html.theme-mode-sun .banner-variant-sun {
  opacity: 1;
  z-index: 2;
}

/* ---------- Pause animations during the swap ---------- */
/* JS adds .theme-mode-transitioning to body for the duration of
   the cross-fade, then removes it. We pause all banner SVG-related
   animations during this window so the swap looks clean. */
html.theme-mode-transitioning .banner-scene * ,
html.theme-mode-transitioning .home-hero-image *,
html.theme-mode-transitioning .jmy-logo-rays {
  animation-play-state: paused !important;
}

/* Hide the inactive variant's animations entirely (so e.g. star
   twinkle in the moon variant doesn't run while it's invisible) */
html.theme-mode-sun .banner-variant-moon *,
html.theme-mode-sun .home-hero-image--themed .banner-variant-moon * {
  animation-play-state: paused !important;
}
html:not(.theme-mode-sun) .banner-variant-sun *,
html.theme-mode-moon .banner-variant-sun * {
  animation-play-state: paused !important;
}

/* ---------- Banner overlay tweak in sun mode ---------- */
/* Existing overlays were tuned for darker moon backgrounds. Sun
   variants are brighter, so the same overlay would over-darken
   them. Lighten the overlay slightly when in sun mode while still
   keeping enough contrast for the white title text. */
html.theme-mode-sun .banner-about::before,
html.theme-mode-sun .banner-yin::before,
html.theme-mode-sun .banner-fullmoon::before,
html.theme-mode-sun .banner-faq::before,
html.theme-mode-sun .banner-testimonials::before,
html.theme-mode-sun .banner-bibliography::before,
html.theme-mode-sun .banner-classes-index::before,
html.theme-mode-sun .banner-contact::before,
html.theme-mode-sun .banner-book-now::before,
html.theme-mode-sun .banner-sanctuary::before,
html.theme-mode-sun .banner-free-class::before,
html.theme-mode-sun .banner-video-library::before {
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.4) 0%,
    rgba(10, 24, 38, 0.18) 35%,
    rgba(10, 24, 38, 0.1) 60%,
    rgba(10, 24, 38, 0.32) 100%
  ) !important;
}
html.theme-mode-sun .banner-nidra::before {
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.3) 0%,
    rgba(10, 24, 38, 0.12) 50%,
    rgba(10, 24, 38, 0.28) 100%
  ) !important;
}

/* ---------- Sun-variant SVG animations ----------
   Sun variants get their own gentle animations matching the moon
   variants in feel but with subtle differences appropriate to a
   bright daytime mood. */

/* Hero sun variant */
html.theme-mode-sun .home-hero-image--themed .hero-cloud-a-sun { animation: hero-cloud-drift-a 60s linear infinite; }
html.theme-mode-sun .home-hero-image--themed .hero-cloud-b-sun { animation: hero-cloud-drift-b 80s linear infinite; animation-delay: -30s; }
html.theme-mode-sun .home-hero-image--themed .hero-glow-sun { animation: hero-sun-breathe 8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
html.theme-mode-sun .home-hero-image--themed .hero-sun-bright { animation: hero-sun-pulse 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* Generic sun pulse used by several banners */
@keyframes sun-bright-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}
@keyframes hero-sun-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.02); }
}

/* About sun */
html.theme-mode-sun .banner-about .about-cloud-a-sun { animation: cloud-drift-a 80s linear infinite; }
html.theme-mode-sun .banner-about .about-cloud-b-sun { animation: cloud-drift-b 100s linear infinite; animation-delay: -40s; }

/* FAQ sun */
html.theme-mode-sun .banner-faq .faq-cloud-a-sun { animation: cloud-drift-a 80s linear infinite; }
html.theme-mode-sun .banner-faq .faq-cloud-b-sun { animation: cloud-drift-b 100s linear infinite; animation-delay: -40s; }

/* Classes index sun */
html.theme-mode-sun .banner-classes-index .ci-cloud-a-sun { animation: cloud-drift-a 80s linear infinite; }
html.theme-mode-sun .banner-classes-index .ci-cloud-b-sun { animation: cloud-drift-b 100s linear infinite; animation-delay: -40s; }

/* Contact sun */
html.theme-mode-sun .banner-contact .contact-cloud-sun { animation: cloud-drift-a 80s linear infinite; }

/* Sanctuary sun */
html.theme-mode-sun .banner-sanctuary .sanctuary-cloud-sun { animation: cloud-drift-a 90s linear infinite; }

/* Nidra and Video Library sun: drifting clouds */
html.theme-mode-sun .banner-nidra .nidra-cloud-sun { animation: cloud-drift-a 100s linear infinite; }
html.theme-mode-sun .banner-video-library .vlib-cloud-sun { animation: cloud-drift-a 95s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  html.theme-mode-sun *[class*="-sun"] {
    animation: none !important;
  }
}

/* Hero overlay tweak in sun mode — even lighter since the sun-mode
   sky is bright and the title needs less darkening to read. */
html.theme-mode-sun .home-hero-image--themed::after {
  background:
    linear-gradient(90deg,
      rgba(10, 24, 38, 0.25) 0%,
      rgba(10, 24, 38, 0.08) 40%,
      rgba(10, 24, 38, 0) 70%),
    linear-gradient(180deg,
      rgba(10, 24, 38, 0.12) 0%,
      rgba(10, 24, 38, 0.03) 40%,
      rgba(10, 24, 38, 0.25) 100%) !important;
}

/* =========================================================
   v1.14.1 — Theme toggle fixes
   - Hero overlay z-index: pin .home-hero-image::after ABOVE variants
   - Sun variant hero gets the dramatic pulse animation
   - More distinctive day/night feel across all sub-page banners
     (richer color contrast in mountain layers + stronger glow)
   ========================================================= */

/* ---------- Issue 1: Hero overlay above variants ---------- */
/* The variants get z-index: 2 inside .home-hero-image. The legibility
   gradient sits in ::after with default z-index 0, leaving the scene
   un-darkened. We need the overlay above the variants but below the
   text content.
   Trick: give .home-hero-image its OWN stacking context (z-index: 0
   instead of auto) so its inner z-indexes don't compete with the
   sibling .home-hero-content. Then the overlay z-index 4 only
   affects ordering inside .home-hero-image — it can't outrank the
   home-hero-content sibling. */
.home-hero-image,
.home-hero-image--themed {
  z-index: 0;
}
.home-hero-image::after,
.home-hero-image--themed::after {
  z-index: 4 !important;
}
/* Belt-and-suspenders: bump home-hero-content z-index to be safe */
.home-hero .home-hero-content {
  z-index: 10 !important;
}

/* Same fix for banner overlays — banner-scene overlays are typically
   on the .banner-* parent (e.g. .banner-yin::before), but the variants
   are inside .banner-scene--themed. Make sure the parent's overlays
   sit above the variants. */
.banner-scene--themed {
  z-index: 0;
}
.page-banner > .banner-scene--themed {
  /* variants z-index 1/2 inside; banner overlay (::before on the
     .banner-* parent section) is z-index 1 and content z-index 2.
     We want overlay above the variants but below the content. */
  z-index: 0 !important;
}
/* Banner ::before overlay needs to be above the variants */
.banner-about::before,
.banner-yin::before,
.banner-nidra::before,
.banner-fullmoon::before,
.banner-faq::before,
.banner-testimonials::before,
.banner-bibliography::before,
.banner-classes-index::before,
.banner-contact::before,
.banner-book-now::before,
.banner-sanctuary::before,
.banner-free-class::before,
.banner-video-library::before {
  z-index: 3 !important;
}

/* ---------- Issue 2: Sun hero pulse — match moon's drama ---------- */
.home-hero .hero-sun-bright {
  animation: hero-sun-breathe 5s ease-in-out infinite !important;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 50px rgba(255, 243, 200, 0.85));
}
.home-hero .hero-glow-sun {
  animation: hero-glow-pulse 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.home-hero .hero-glow-sun:nth-of-type(1) {
  animation: hero-glow-outer 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-sun-bright,
  .home-hero .hero-glow-sun { animation: none !important; }
}

/* ---------- Issue 3: More dramatic day/night feel ---------- */
/* In sun mode: brighten the sun glow itself with a halo filter so
   it feels more luminous and warm. */
html.theme-mode-sun .banner-scene--themed .banner-variant-sun svg circle[fill*="fff3c8"],
html.theme-mode-sun .banner-scene--themed .banner-variant-sun svg circle[fill*="fff5d0"] {
  filter: drop-shadow(0 0 40px rgba(255, 243, 200, 0.7));
}

/* Add atmospheric sun-mode warmth — a faint warm tint over the entire
   page banner area in sun mode (only on banners that have themed
   variants). This sells the "it's a different time of day" feeling. */
html.theme-mode-sun .page-banner.banner-yin,
html.theme-mode-sun .page-banner.banner-nidra,
html.theme-mode-sun .page-banner.banner-fullmoon,
html.theme-mode-sun .page-banner.banner-bibliography,
html.theme-mode-sun .page-banner.banner-video-library,
html.theme-mode-sun .page-banner.banner-book-now,
html.theme-mode-sun .page-banner.banner-classes-index,
html.theme-mode-sun .page-banner.banner-faq,
html.theme-mode-sun .page-banner.banner-free-class {
  /* Slightly elevated saturation gives the day mode more vibrance */
  filter: saturate(1.08);
}
html.theme-mode-sun .page-banner.banner-about,
html.theme-mode-sun .page-banner.banner-testimonials,
html.theme-mode-sun .page-banner.banner-contact,
html.theme-mode-sun .page-banner.banner-sanctuary {
  /* Warm peach banners get extra warmth */
  filter: saturate(1.12) brightness(1.04);
}

/* In moon mode: deepen the cool blues so the night feeling is
   more pronounced. This applies a subtle blue cast to twilight banners. */
html.theme-mode-moon .page-banner.banner-yin,
html:not(.theme-mode-sun) .page-banner.banner-yin,
html.theme-mode-moon .page-banner.banner-nidra,
html:not(.theme-mode-sun) .page-banner.banner-nidra,
html.theme-mode-moon .page-banner.banner-bibliography,
html:not(.theme-mode-sun) .page-banner.banner-bibliography,
html.theme-mode-moon .page-banner.banner-video-library,
html:not(.theme-mode-sun) .page-banner.banner-video-library,
html.theme-mode-moon .page-banner.banner-fullmoon,
html:not(.theme-mode-sun) .page-banner.banner-fullmoon {
  filter: saturate(1.05) brightness(0.96);
}

/* Smooth filter transitions during the swap */
.page-banner {
  transition: filter 0.6s ease;
}

/* =========================================================
   v1.14.2 — More dramatic day/night element changes
   - Sun mode: gentle CSS birds drift across banners
   - Moon mode: subtle fireflies over warm-palette banners
   These elements only appear in their respective mode and use
   pure CSS so no SVG changes are needed.
   ========================================================= */

/* ---------- Birds in sun mode (appear on most banner pages) ---------- */
/* Add as ::before/::after on the .page-banner element. Two birds
   fly across at different speeds and altitudes. */

html.theme-mode-sun .page-banner.banner-yin .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-mission .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-classes-index .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-faq .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-book-now .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-free-class .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-about .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-contact .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-testimonials .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-sanctuary .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-video-library .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-bibliography .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-fullmoon .banner-scene--themed::after,
html.theme-mode-sun .page-banner.banner-nidra .banner-scene--themed::after {
  content: '';
  position: absolute;
  /* Position relative to the banner — top: 25% lands the bird just
     below the header and well above the title text. The header is
     ~80px on desktop / ~64px on mobile, so 25% of a ~480px banner
     (~120px) sits clearly below it. */
  top: 25%;
  left: -60px;
  width: 28px;
  height: 14px;
  z-index: 4;
  pointer-events: none;
  background:
    /* Two tiny birds via radial gradient + curves */
    radial-gradient(ellipse 50% 100% at 30% 40%, rgba(255,255,255,0) 50%, transparent 51%),
    /* SVG bird silhouette via inline data uri */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='rgba(20,30,45,0.55)' stroke-width='1.4' stroke-linecap='round'><path d='M2 8 Q7 1 12 8'/><path d='M12 8 Q17 1 22 8'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  animation: bird-drift-1 38s linear infinite;
  animation-delay: -3s;
}
html.theme-mode-sun .page-banner.banner-yin .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-mission .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-classes-index .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-faq .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-book-now .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-free-class .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-about .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-contact .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-testimonials .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-sanctuary .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-video-library .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-bibliography .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-fullmoon .banner-scene--themed::before,
html.theme-mode-sun .page-banner.banner-nidra .banner-scene--themed::before {
  content: '';
  position: absolute;
  /* Bird 2 is at a slightly different altitude than bird 1 for variety */
  top: 38%;
  left: -100px;
  width: 22px;
  height: 12px;
  z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='rgba(20,30,45,0.5)' stroke-width='1.2' stroke-linecap='round'><path d='M1 7 Q6 1 11 7'/><path d='M11 7 Q16 1 21 7'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  animation: bird-drift-2 52s linear infinite;
  animation-delay: -10s;
}

@keyframes bird-drift-1 {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  5% { opacity: 0.9; }
  50% { transform: translateX(60vw) translateY(-30px); }
  95% { opacity: 0.9; }
  100% { transform: translateX(120vw) translateY(20px); opacity: 0; }
}
@keyframes bird-drift-2 {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  8% { opacity: 0.85; }
  50% { transform: translateX(70vw) translateY(40px); }
  92% { opacity: 0.85; }
  100% { transform: translateX(140vw) translateY(-10px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-mode-sun .banner-scene--themed::before,
  html.theme-mode-sun .banner-scene--themed::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ---------- Fireflies / sparkles in moon mode (warm-palette banners) ----------
   These banners (About, Testimonials, Contact, Sanctuary, Full Moon)
   currently have no stars because their dawn/sunset palette doesn't
   suggest a starry sky. In moon mode, add subtle drifting sparkles
   to give them more "evening" mood. */

html.theme-mode-moon .banner-about .banner-scene--themed,
html.theme-mode-moon .banner-testimonials .banner-scene--themed,
html.theme-mode-moon .banner-contact .banner-scene--themed,
html.theme-mode-moon .banner-sanctuary .banner-scene--themed,
html.theme-mode-moon .banner-fullmoon .banner-scene--themed,
html:not(.theme-mode-sun) .banner-about .banner-scene--themed,
html:not(.theme-mode-sun) .banner-testimonials .banner-scene--themed,
html:not(.theme-mode-sun) .banner-contact .banner-scene--themed,
html:not(.theme-mode-sun) .banner-sanctuary .banner-scene--themed,
html:not(.theme-mode-sun) .banner-fullmoon .banner-scene--themed {
  /* Sparkles via radial gradients positioned absolutely */
  background-image:
    radial-gradient(circle 1.5px at 18% 22%, rgba(255, 240, 200, 0.85), transparent 100%),
    radial-gradient(circle 1px at 32% 38%, rgba(255, 240, 200, 0.6), transparent 100%),
    radial-gradient(circle 1.4px at 76% 18%, rgba(255, 240, 200, 0.75), transparent 100%),
    radial-gradient(circle 1.2px at 88% 32%, rgba(255, 240, 200, 0.65), transparent 100%),
    radial-gradient(circle 1px at 65% 28%, rgba(255, 240, 200, 0.55), transparent 100%);
  background-repeat: no-repeat;
  animation: sparkle-twinkle 4s ease-in-out infinite alternate;
}
@keyframes sparkle-twinkle {
  0%, 100% { background-color: transparent; }
  50% { background-color: transparent; }
}

/* Animate sparkle opacity via filter to give the twinkle effect */
html.theme-mode-moon .banner-about .banner-scene--themed,
html.theme-mode-moon .banner-testimonials .banner-scene--themed,
html.theme-mode-moon .banner-contact .banner-scene--themed,
html.theme-mode-moon .banner-sanctuary .banner-scene--themed,
html.theme-mode-moon .banner-fullmoon .banner-scene--themed,
html:not(.theme-mode-sun) .banner-about .banner-scene--themed,
html:not(.theme-mode-sun) .banner-testimonials .banner-scene--themed,
html:not(.theme-mode-sun) .banner-contact .banner-scene--themed,
html:not(.theme-mode-sun) .banner-sanctuary .banner-scene--themed,
html:not(.theme-mode-sun) .banner-fullmoon .banner-scene--themed {
  animation: warm-sparkle-fade 5s ease-in-out infinite alternate;
}
@keyframes warm-sparkle-fade {
  0% { opacity: 1; }
  50% { opacity: 0.95; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-mode-moon .banner-scene--themed,
  html:not(.theme-mode-sun) .banner-scene--themed {
    animation: none !important;
  }
}

/* =========================================================
   v1.14.4 — FOUC fix
   - All theme-mode CSS selectors now target <html> instead of <body>
     so the inline head script's class-on-html actually takes effect
     before first paint.
   - Suppress cross-fade transition during initial page load so the
     correct variant snaps in immediately rather than fading in. JS
     adds .theme-mode-ready to <html> after first paint to enable
     the fade transition for subsequent toggles only.
   ========================================================= */

/* Disable the variant cross-fade transition until <html> has the
   .theme-mode-ready class (added by JS after first paint). This
   prevents the 600ms fade-in flash on initial page load when the
   user already has sun mode persisted. */
html:not(.theme-mode-ready) .banner-scene--themed .banner-variant,
html:not(.theme-mode-ready) .home-hero-image--themed .banner-variant {
  transition: none !important;
}
html:not(.theme-mode-ready) .jmy-logo-svg {
  transition: none !important;
}
html:not(.theme-mode-ready) .page-banner {
  transition: none !important;
}

/* =========================================================
   v1.15.0 — Theme toggle hint tooltip
   First-time-visitor onboarding tooltip pointing at the moon
   logo, inviting users to try the sun/moon theme toggle.
   ========================================================= */

.jmy-logo-mark {
  position: relative;  /* anchor for the tooltip */
}

.jmy-toggle-hint {
  position: absolute;
  top: calc(100% + 18px);
  left: -10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 280px;
  padding: 18px 22px 20px;
  background: linear-gradient(180deg, #fbf7ee 0%, #f6f0e2 100%);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 4px 24px 4px 24px;
  box-shadow:
    0 24px 48px -16px rgba(30, 58, 95, 0.22),
    0 8px 16px -8px rgba(30, 58, 95, 0.15);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;  /* don't block clicks during fade in/out */
  font-family: var(--serif);
  cursor: default;
  user-select: text;
  -webkit-user-select: text;
}

.jmy-toggle-hint--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;  /* re-enable clicks once fully visible */
}

.jmy-toggle-hint--dismissing {
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Pointer arrow connecting tooltip to the logo */
.jmy-toggle-hint-arrow {
  position: absolute;
  top: -7px;
  left: 18px;
  width: 14px;
  height: 14px;
  background: #fbf7ee;
  border-top: 1px solid rgba(201, 169, 97, 0.35);
  border-left: 1px solid rgba(201, 169, 97, 0.35);
  transform: rotate(45deg);
  pointer-events: none;
}

.jmy-toggle-hint-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  line-height: 1;
}

.jmy-toggle-hint-text {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--blue-deep);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Subtle gentle pulse on the gold accent border to draw the eye */
.jmy-toggle-hint--visible {
  animation: toggle-hint-glow 2.4s ease-in-out infinite;
}
@keyframes toggle-hint-glow {
  0%, 100% {
    box-shadow:
      0 24px 48px -16px rgba(30, 58, 95, 0.22),
      0 8px 16px -8px rgba(30, 58, 95, 0.15),
      0 0 0 0 rgba(201, 169, 97, 0);
  }
  50% {
    box-shadow:
      0 24px 48px -16px rgba(30, 58, 95, 0.22),
      0 8px 16px -8px rgba(30, 58, 95, 0.15),
      0 0 0 4px rgba(201, 169, 97, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jmy-toggle-hint {
    transition: opacity 0.3s ease;
    transform: none !important;
  }
  .jmy-toggle-hint--visible {
    animation: none !important;
  }
}

/* Mobile — narrower tooltip, slightly different positioning */
@media (max-width: 600px) {
  .jmy-toggle-hint {
    width: 240px;
    padding: 14px 18px 16px;
    border-radius: 4px 20px 4px 20px;
    left: -8px;
  }
  .jmy-toggle-hint-text {
    font-size: 15px;
  }
}

/* Very small screens — tooltip is wider than the viewport-edge gap.
   Pull it to the right so it doesn't overflow off the screen. */
@media (max-width: 380px) {
  .jmy-toggle-hint {
    width: 220px;
  }
}

/* =========================================================
   v1.15.3 — Hero brightness pass + stronger text shadows
   - Lightened base hero overlay (both desktop and mobile) so
     the SVG sky reads as luminous rather than muted.
   - Stronger text-shadows on hero title/eyebrow/sub for legibility
     against the brighter sky.
   ========================================================= */

/* Stronger text-shadow on hero text now that the overlay is lighter. */
h1.home-hero-title {
  text-shadow:
    0 4px 32px rgba(10, 24, 38, 0.7),
    0 2px 8px rgba(10, 24, 38, 0.55),
    0 1px 3px rgba(10, 24, 38, 0.4);
}
h1.home-hero-title em {
  text-shadow:
    0 4px 32px rgba(10, 24, 38, 0.6),
    0 2px 8px rgba(10, 24, 38, 0.45),
    0 1px 3px rgba(10, 24, 38, 0.35);
}
.home-hero-eyebrow {
  text-shadow:
    0 2px 16px rgba(10, 24, 38, 0.7),
    0 1px 3px rgba(10, 24, 38, 0.5);
}
.home-hero-sub {
  text-shadow:
    0 3px 20px rgba(10, 24, 38, 0.7),
    0 1px 4px rgba(10, 24, 38, 0.4);
}
.home-hero-link {
  text-shadow:
    0 2px 16px rgba(10, 24, 38, 0.7),
    0 1px 3px rgba(10, 24, 38, 0.5);
}

/* ---------- Sub-page banner overlay lightening ----------
   The page-banner ::before overlays were tuned for legibility when
   the original SVGs had stronger contrast. Now that we want the SVGs
   to feel more luminous, lighten these overlays significantly and
   beef up text-shadows on banner titles for legibility. */

.banner-about::before,
.banner-yin::before,
.banner-fullmoon::before,
.banner-faq::before,
.banner-testimonials::before,
.banner-bibliography::before,
.banner-classes-index::before,
.banner-contact::before,
.banner-book-now::before,
.banner-sanctuary::before,
.banner-free-class::before,
.banner-video-library::before,
.banner-mission::before {
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.32) 0%,
    rgba(10, 24, 38, 0.12) 35%,
    rgba(10, 24, 38, 0.05) 60%,
    rgba(10, 24, 38, 0.22) 100%
  ) !important;
}

/* Nidra still slightly darker since the moon scene is night-time */
.banner-nidra::before {
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.15) 0%,
    transparent 40%,
    rgba(10, 24, 38, 0.18) 100%
  ) !important;
}

/* In sun mode, even lighter overlays — the sky is bright, less darkening needed */
html.theme-mode-sun .banner-about::before,
html.theme-mode-sun .banner-yin::before,
html.theme-mode-sun .banner-fullmoon::before,
html.theme-mode-sun .banner-faq::before,
html.theme-mode-sun .banner-testimonials::before,
html.theme-mode-sun .banner-bibliography::before,
html.theme-mode-sun .banner-classes-index::before,
html.theme-mode-sun .banner-contact::before,
html.theme-mode-sun .banner-book-now::before,
html.theme-mode-sun .banner-sanctuary::before,
html.theme-mode-sun .banner-free-class::before,
html.theme-mode-sun .banner-video-library::before,
html.theme-mode-sun .banner-mission::before {
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.22) 0%,
    rgba(10, 24, 38, 0.06) 35%,
    rgba(10, 24, 38, 0.03) 60%,
    rgba(10, 24, 38, 0.18) 100%
  ) !important;
}
html.theme-mode-sun .banner-nidra::before {
  background: linear-gradient(
    180deg,
    rgba(10, 24, 38, 0.1) 0%,
    transparent 40%,
    rgba(10, 24, 38, 0.12) 100%
  ) !important;
}

/* Stronger text-shadows on sub-page banner titles for legibility against
   the brighter scenery. */
.page-banner .banner-title {
  text-shadow:
    0 4px 32px rgba(10, 24, 38, 0.7),
    0 2px 8px rgba(10, 24, 38, 0.55),
    0 1px 3px rgba(10, 24, 38, 0.4) !important;
}
.page-banner .banner-title em {
  text-shadow:
    0 4px 32px rgba(10, 24, 38, 0.55),
    0 2px 8px rgba(10, 24, 38, 0.4),
    0 1px 3px rgba(10, 24, 38, 0.35) !important;
}
.page-banner .banner-subtitle {
  text-shadow:
    0 3px 20px rgba(10, 24, 38, 0.7),
    0 1px 4px rgba(10, 24, 38, 0.4) !important;
}
.page-banner .breadcrumb {
  text-shadow:
    0 2px 12px rgba(10, 24, 38, 0.65),
    0 1px 3px rgba(10, 24, 38, 0.4) !important;
}

/* =========================================================
   v1.16.0 — New animations + visual polish batch
   - Footer moon breathe (subtle pulse on the moon)
   - Bird repositioning (no longer hidden by header)
   - Banner parallax (mountains move slower than scroll)
   - Differentiated banner palettes (Testimonials, FAQ, Classes Index,
     Mission, Sanctuary, Contact — each gets unique elements)
   ========================================================= */


/* ---------- Mission banner: moon, horizon glow, star twinkle ---------- */
.banner-mission .mission-moon-glow {
  animation: mission-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-mission .mission-moon {
  animation: mission-moon-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-mission .mission-horizon-glow {
  animation: mission-horizon-pulse 12s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-mission .mission-star-a {
  animation: mission-star-twinkle 4s ease-in-out infinite;
}
.banner-mission .mission-star-b {
  animation: mission-star-twinkle 6s ease-in-out infinite;
  animation-delay: -2s;
}
.banner-mission .mission-star-c {
  animation: mission-star-twinkle 8s ease-in-out infinite;
  animation-delay: -4s;
}
@keyframes mission-glow-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.06); }
}
@keyframes mission-moon-pulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}
@keyframes mission-horizon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
@keyframes mission-star-twinkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ---------- Full Moon banner moon breathing ---------- */
.banner-fullmoon .fullmoon-glow {
  animation: fullmoon-glow-breathe 10s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-fullmoon .fullmoon-halo {
  animation: fullmoon-halo-breathe 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-fullmoon .fullmoon-disc {
  animation: fullmoon-disc-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fullmoon-glow-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes fullmoon-halo-breathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.04); }
}
@keyframes fullmoon-disc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-mission .mission-moon-glow,
  .banner-mission .mission-moon,
  .banner-mission .mission-horizon-glow,
  .banner-mission .mission-star-a,
  .banner-mission .mission-star-b,
  .banner-mission .mission-star-c,
  .banner-fullmoon .fullmoon-glow,
  .banner-fullmoon .fullmoon-halo,
  .banner-fullmoon .fullmoon-disc {
    animation: none !important;
  }
}

/* ---------- Banner parallax wrapper rules ----------
   Containers clip the translated SVG. Inner SVGs scale slightly
   larger so a moderate translate doesn't reveal edges. The transform
   itself is set inline by JS in initBannerParallax(). */

.home-hero-image,
.banner-scene {
  overflow: hidden;
}
/* Inner SVGs need to be slightly oversized to give parallax room.
   The :scope direct-child selectors target both flat (direct svg)
   and themed (svg inside .banner-variant) structures. */
.home-hero-image > svg,
.home-hero-image .banner-variant > svg,
.banner-scene > svg,
.banner-scene .banner-variant > svg {
  height: 130%;
  top: -15%;
  position: relative;
  will-change: transform;
}

/* =========================================================
   v1.16.0 — New banner palette animations
   ========================================================= */

/* ---------- Testimonials: drifting lanterns + twinkling stars ---------- */
.banner-testimonials .test-lantern--a { animation: lantern-drift-a 22s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.banner-testimonials .test-lantern--b { animation: lantern-drift-b 28s ease-in-out infinite; animation-delay: -6s; transform-origin: center; transform-box: fill-box; }
.banner-testimonials .test-lantern--c { animation: lantern-drift-c 26s ease-in-out infinite; animation-delay: -12s; transform-origin: center; transform-box: fill-box; }
.banner-testimonials .test-star-a { animation: twinkle-a 4s ease-in-out infinite; }
.banner-testimonials .test-star-b { animation: twinkle-b 5s ease-in-out infinite; animation-delay: -1.5s; }
@keyframes lantern-drift-a {
  0% { transform: translate(0, 60px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(40px, -180px); opacity: 0; }
}
@keyframes lantern-drift-b {
  0% { transform: translate(0, 50px); opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { transform: translate(-30px, -160px); opacity: 0; }
}
@keyframes lantern-drift-c {
  0% { transform: translate(0, 40px); opacity: 0; }
  20% { opacity: 0.75; }
  80% { opacity: 0.75; }
  100% { transform: translate(20px, -200px); opacity: 0; }
}

/* ---------- FAQ: hawk circles slowly across the sky ---------- */
.banner-faq .faq-hawk {
  animation: faq-hawk-circle 32s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes faq-hawk-circle {
  0%   { transform: translate(150px, 250px) scale(1) rotate(0deg); }
  20%  { transform: translate(550px, 180px) scale(1.1) rotate(-5deg); }
  40%  { transform: translate(950px, 220px) scale(0.95) rotate(3deg); }
  60%  { transform: translate(1300px, 160px) scale(1.05) rotate(-3deg); }
  80%  { transform: translate(1450px, 280px) scale(0.85) rotate(0deg); }
  100% { transform: translate(150px, 250px) scale(1) rotate(0deg); }
}

/* ---------- Classes Index: sun + moon both breathe ---------- */
.banner-classes-index .ci-moon-glow,
.banner-classes-index .ci-sun-glow {
  animation: ci-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-classes-index .ci-moon,
.banner-classes-index .ci-sun {
  animation: ci-celestial-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-classes-index .ci-sun-glow { animation-delay: -2s; }
.banner-classes-index .ci-sun { animation-delay: -1s; }
.banner-classes-index .ci-star-a { animation: twinkle-a 4s ease-in-out infinite; }
.banner-classes-index .ci-star-b { animation: twinkle-b 5s ease-in-out infinite; animation-delay: -1.5s; }
@keyframes ci-glow-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}
@keyframes ci-celestial-pulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 1; }
}

/* ---------- Contact: fog drifts gently ---------- */
.banner-contact .contact-fog-layer {
  animation: contact-fog-drift 35s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-contact .contact-glow,
.banner-contact .contact-sun {
  animation: contact-sun-soft-pulse 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes contact-fog-drift {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(-30px); opacity: 0.75; }
}
@keyframes contact-sun-soft-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 0.85; }
}

/* ---------- Sanctuary: petals drift down + moon breathes + stars twinkle ---------- */
.banner-sanctuary .sanctuary-glow,
.banner-sanctuary .sanctuary-halo {
  animation: sanc-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-sanctuary .sanctuary-sun {
  animation: sanc-moon-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-sanctuary .sanc-star-a { animation: twinkle-a 4s ease-in-out infinite; }
.banner-sanctuary .sanc-star-b { animation: twinkle-b 5s ease-in-out infinite; animation-delay: -1.5s; }
.banner-sanctuary .sanc-petal { animation-name: sanc-petal-fall; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: center; transform-box: fill-box; }
.banner-sanctuary .sanc-petal--a { animation-duration: 18s; animation-delay: 0s; }
.banner-sanctuary .sanc-petal--b { animation-duration: 24s; animation-delay: -8s; }
.banner-sanctuary .sanc-petal--c { animation-duration: 21s; animation-delay: -3s; }
.banner-sanctuary .sanc-petal--d { animation-duration: 26s; animation-delay: -14s; }
@keyframes sanc-glow-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.04); }
}
@keyframes sanc-moon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}
@keyframes sanc-petal-fall {
  0% { transform: translate(0, -40px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  50% { transform: translate(20px, 250px) rotate(180deg); }
  90% { opacity: 0.7; }
  100% { transform: translate(-20px, 600px) rotate(360deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-testimonials .test-lantern--a,
  .banner-testimonials .test-lantern--b,
  .banner-testimonials .test-lantern--c,
  .banner-testimonials .test-star-a,
  .banner-testimonials .test-star-b,
  .banner-faq .faq-hawk,
  .banner-classes-index .ci-moon-glow,
  .banner-classes-index .ci-sun-glow,
  .banner-classes-index .ci-moon,
  .banner-classes-index .ci-sun,
  .banner-classes-index .ci-star-a,
  .banner-classes-index .ci-star-b,
  .banner-contact .contact-fog-layer,
  .banner-contact .contact-glow,
  .banner-contact .contact-sun,
  .banner-sanctuary .sanctuary-glow,
  .banner-sanctuary .sanctuary-halo,
  .banner-sanctuary .sanctuary-sun,
  .banner-sanctuary .sanc-star-a,
  .banner-sanctuary .sanc-star-b,
  .banner-sanctuary .sanc-petal {
    animation: none !important;
  }
}
/* =========================================================
   v1.16.0 — Universal banner sun/moon breathe (Tier 1 #4)
   Make sure every banner orb (both moon and sun variants) breathes
   with a gentle 6-9s pulse. Many already do; this catches stragglers
   and ensures consistency across all 14 page banners.
   ========================================================= */

/* Generic breathe keyframe for any orb without a custom one */
@keyframes universal-orb-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.94;
  }
}

/* Apply to all moon variant orb circles that don't already have
   their own animation. Using broad selectors that match the orb
   conventions (centered or off-axis large fill="#f4e5cb" etc.) */
.banner-variant-moon .nidra-moon,
.banner-variant-moon .fullmoon-moon,
.banner-variant-moon .video-library-moon,
.banner-variant-moon .bibliography-moon,
.banner-variant-moon .free-class-sun,
.banner-variant-moon .testimonials-sun,
.banner-variant-moon .classes-index-sun,
.banner-variant-moon .book-now-sun,
.banner-variant-moon .mission-sun {
  animation: universal-orb-breathe 7s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Apply to all sun variant orbs */
.banner-variant-sun circle[class*="-sun-bright"],
.banner-variant-sun circle[class$="-sun"]:not([class*="-glow"]) {
  animation: universal-orb-breathe 7s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@media (prefers-reduced-motion: reduce) {
  .banner-variant-moon [class],
  .banner-variant-sun [class] {
    animation: none !important;
  }
}

/* =========================================================
   v1.16.0 — Sun-variant signature element animations
   - test-lantern: gentle drift upward (already animated in moon mode,
     applies to sun mode too via the same CSS)
   - mission-rays: rays sweep gently
   - contact-mist: bands drift horizontally
   - ci-balloon: hot air balloon drifts gently
   - bib-leaves: leaves spiral down
   - sanctuary-mandala: mandala rings rotate slowly
   ========================================================= */

/* Mission sun rays — gently breathe in opacity */
.banner-variant-sun .mission-rays-sun {
  animation: mission-rays-breathe 8s ease-in-out infinite;
  transform-origin: 800px 280px;
}
@keyframes mission-rays-breathe {
  0%, 100% { opacity: 0.55; transform: scaleY(1); }
  50% { opacity: 0.7; transform: scaleY(1.05); }
}

/* Contact mist bands — drift horizontally */
.banner-variant-sun .contact-mist-band-a {
  animation: mist-drift-a 60s linear infinite;
}
.banner-variant-sun .contact-mist-band-b {
  animation: mist-drift-b 75s linear infinite;
  animation-delay: -25s;
}
@keyframes mist-drift-a {
  from { transform: translateX(-30px); }
  50% { transform: translateX(30px); }
  to { transform: translateX(-30px); }
}
@keyframes mist-drift-b {
  from { transform: translateX(20px); }
  50% { transform: translateX(-20px); }
  to { transform: translateX(20px); }
}

/* Classes Index hot air balloon — gentle rocking drift */
.banner-variant-sun .ci-balloon-sun {
  animation: balloon-drift 14s ease-in-out infinite;
  transform-origin: 1180px 360px;
}
@keyframes balloon-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-8px, -4px) rotate(-1.5deg); }
  50% { transform: translate(0, -8px) rotate(0deg); }
  75% { transform: translate(8px, -4px) rotate(1.5deg); }
}

/* Bibliography leaves — spiral fall */
.banner-variant-sun .bib-leaf {
  animation-name: leaf-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: center;
}
.banner-variant-sun .bib-leaf--a { animation-duration: 18s; animation-delay: 0s; }
.banner-variant-sun .bib-leaf--b { animation-duration: 22s; animation-delay: -6s; }
.banner-variant-sun .bib-leaf--c { animation-duration: 20s; animation-delay: -12s; }
.banner-variant-sun .bib-leaf--d { animation-duration: 24s; animation-delay: -3s; }
@keyframes leaf-fall {
  0% { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.85; }
  50% { transform: translateY(300px) translateX(-25px) rotate(180deg); }
  90% { opacity: 0.85; }
  100% { transform: translateY(620px) translateX(15px) rotate(360deg); opacity: 0; }
}

/* Sanctuary mandala rings — slow rotation */
.banner-variant-sun .sanctuary-mandala-sun {
  animation: mandala-rotate 80s linear infinite;
  transform-origin: 800px 320px;
  transform-box: fill-box;
}
@keyframes mandala-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Testimonials lanterns in sun mode — preserve moon animation */
/* (test-lantern--a/b/c already have animations in CSS; they apply here too) */

@media (prefers-reduced-motion: reduce) {
  .banner-variant-sun .mission-rays-sun,
  .banner-variant-sun .contact-mist-band-a,
  .banner-variant-sun .contact-mist-band-b,
  .banner-variant-sun .ci-balloon-sun,
  .banner-variant-sun .bib-leaf,
  .banner-variant-sun .sanctuary-mandala-sun {
    animation: none !important;
  }
}

/* =========================================================
   v1.16.2 — Testimonials forest reflection animations
   - Mist drift over water surface
   - Subtle ripples in the water
   - Moon/sun reflection glints gently
   ========================================================= */

/* Mist drifts horizontally over water */
.banner-testimonials .test-mist-band,
.banner-testimonials .test-mist-band-sun {
  animation: test-mist-drift 80s linear infinite;
}
@keyframes test-mist-drift {
  0%, 100% { transform: translateX(-15px); }
  50% { transform: translateX(15px); }
}

/* Reflected moon/sun in water shimmers gently */
.banner-testimonials .test-water-reflection,
.banner-testimonials .test-water-reflection-sun {
  animation: test-reflection-shimmer 6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes test-reflection-shimmer {
  0%, 100% { opacity: 1; transform: scaleX(1); }
  50% { opacity: 0.85; transform: scaleX(1.04); }
}

/* Water ripples — subtle horizontal slides */
.banner-testimonials .test-ripples,
.banner-testimonials .test-ripples-sun {
  animation: test-ripples-drift 18s ease-in-out infinite;
}
@keyframes test-ripples-drift {
  0%, 100% { transform: translateX(0); opacity: 0.35; }
  50% { transform: translateX(8px); opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-testimonials .test-mist-band,
  .banner-testimonials .test-mist-band-sun,
  .banner-testimonials .test-water-reflection,
  .banner-testimonials .test-water-reflection-sun,
  .banner-testimonials .test-ripples,
  .banner-testimonials .test-ripples-sun {
    animation: none !important;
  }
}

/* =========================================================
   v1.16.3 — Full Moon banner drama
   - Multiple layered glow halos breathe at staggered tempos
   - Stars twinkle (bright, medium, tiny each at different rates)
   - God rays pulse subtly
   - Cloud wisps drift across the moon
   - The disc itself has a slow ambient breathe
   ========================================================= */

/* Layered corona breathing — each ring at a slightly different tempo
   for organic atmospheric feel */
.banner-fullmoon .fm-corona-outer {
  animation: fm-corona-breathe 14s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-fullmoon .fm-corona-mid {
  animation: fm-corona-breathe 11s ease-in-out infinite;
  animation-delay: -3s;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-fullmoon .fm-corona-inner {
  animation: fm-corona-breathe 8s ease-in-out infinite;
  animation-delay: -1.5s;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-fullmoon .fullmoon-halo {
  animation: fm-halo-pulse 7s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-fullmoon .fullmoon-halo-tight {
  animation: fm-halo-pulse 5s ease-in-out infinite;
  animation-delay: -2s;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-fullmoon .fullmoon-disc {
  animation: fm-disc-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes fm-corona-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.08); }
}
@keyframes fm-halo-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.04); }
}
@keyframes fm-disc-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.015); filter: brightness(1.08); }
}

/* Star twinkling — three populations at different tempos */
.banner-fullmoon .fm-star-bright {
  animation: fm-twinkle-bright 4s ease-in-out infinite;
}
.banner-fullmoon .fm-star-bright:nth-of-type(2n) { animation-delay: -1s; }
.banner-fullmoon .fm-star-bright:nth-of-type(3n) { animation-delay: -2.5s; }
.banner-fullmoon .fm-star-med {
  animation: fm-twinkle-med 6s ease-in-out infinite;
}
.banner-fullmoon .fm-star-med:nth-of-type(2n) { animation-delay: -1.5s; }
.banner-fullmoon .fm-star-med:nth-of-type(3n) { animation-delay: -3s; }
.banner-fullmoon .fm-star-tiny {
  animation: fm-twinkle-tiny 8s ease-in-out infinite;
}
.banner-fullmoon .fm-star-tiny:nth-of-type(2n) { animation-delay: -2s; }
.banner-fullmoon .fm-star-tiny:nth-of-type(3n) { animation-delay: -4s; }

@keyframes fm-twinkle-bright {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes fm-twinkle-med {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.85; }
}
@keyframes fm-twinkle-tiny {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* God rays — subtle vertical light shafts pulse */
.banner-fullmoon .fm-godrays {
  animation: fm-godrays-shimmer 11s ease-in-out infinite;
  transform-origin: 800px 320px;
}
@keyframes fm-godrays-shimmer {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Cloud wisps drift slowly horizontally across the moon */
.banner-fullmoon .fm-cloud-wisp-a {
  animation: fm-cloud-drift-a 60s linear infinite;
}
.banner-fullmoon .fm-cloud-wisp-b {
  animation: fm-cloud-drift-b 80s linear infinite;
  animation-delay: -25s;
}
.banner-fullmoon .fm-cloud-wisp-c {
  animation: fm-cloud-drift-c 95s linear infinite;
  animation-delay: -40s;
}

@keyframes fm-cloud-drift-a {
  from { transform: translateX(-300px); opacity: 0; }
  10% { opacity: 0.6; }
  50% { transform: translateX(400px); opacity: 0.6; }
  90% { opacity: 0.6; }
  to { transform: translateX(1100px); opacity: 0; }
}
@keyframes fm-cloud-drift-b {
  from { transform: translateX(-400px); opacity: 0; }
  15% { opacity: 0.5; }
  50% { transform: translateX(200px); opacity: 0.5; }
  85% { opacity: 0.5; }
  to { transform: translateX(900px); opacity: 0; }
}
@keyframes fm-cloud-drift-c {
  from { transform: translateX(800px); opacity: 0; }
  15% { opacity: 0.4; }
  50% { transform: translateX(0); opacity: 0.4; }
  85% { opacity: 0.4; }
  to { transform: translateX(-700px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-fullmoon [class*="fm-"],
  .banner-fullmoon .fullmoon-halo,
  .banner-fullmoon .fullmoon-halo-tight,
  .banner-fullmoon .fullmoon-disc {
    animation: none !important;
  }
}



/* =========================================================
   v1.16.16 — Book Now banner: rolled back to SVG with snow
   - Multi-layer corona breathing (drama)
   - Star twinkle (3 populations at staggered tempos)
   - Drifting stars (slow horizontal motion across sky)
   - Shooting stars (3 streaks at different intervals)
   - Falling snow (20 particles drifting from top to bottom)
   - Clean moon disc (no surface details/spots)
   ========================================================= */

/* Layered corona breathing */
.banner-book-now .bn-corona-outer {
  animation: bn-corona-breathe 14s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-book-now .bn-corona-mid {
  animation: bn-corona-breathe 11s ease-in-out infinite;
  animation-delay: -3s;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-book-now .bn-corona-inner {
  animation: bn-corona-breathe 8s ease-in-out infinite;
  animation-delay: -1.5s;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-book-now .bn-halo {
  animation: bn-halo-pulse 7s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-book-now .bn-halo-tight {
  animation: bn-halo-pulse 5s ease-in-out infinite;
  animation-delay: -2s;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes bn-corona-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.78; transform: scale(1.07); }
}
@keyframes bn-halo-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

/* Moon disc — gentle ambient breath */
.banner-book-now .bn-moon-disc {
  animation: bn-moon-breathe 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes bn-moon-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

/* Star twinkling — three populations */
.banner-book-now .bn-star-bright {
  animation: bn-twinkle-bright 4s ease-in-out infinite;
}
.banner-book-now .bn-star-bright:nth-of-type(2n) { animation-delay: -1s; }
.banner-book-now .bn-star-bright:nth-of-type(3n) { animation-delay: -2.5s; }
.banner-book-now .bn-star-med {
  animation: bn-twinkle-med 6s ease-in-out infinite;
}
.banner-book-now .bn-star-med:nth-of-type(2n) { animation-delay: -1.5s; }
.banner-book-now .bn-star-med:nth-of-type(3n) { animation-delay: -3s; }
.banner-book-now .bn-star-tiny {
  animation: bn-twinkle-tiny 8s ease-in-out infinite;
}
.banner-book-now .bn-star-tiny:nth-of-type(2n) { animation-delay: -2s; }
.banner-book-now .bn-star-tiny:nth-of-type(3n) { animation-delay: -4s; }
@keyframes bn-twinkle-bright {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes bn-twinkle-med {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.85; }
}
@keyframes bn-twinkle-tiny {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* Drifting stars — three slow horizontal streams */
.banner-book-now .bn-drift-star {
  opacity: 0;
}
.banner-book-now .bn-drift-star--a {
  animation: bn-drift-a 60s linear infinite;
}
.banner-book-now .bn-drift-star--b {
  animation: bn-drift-b 80s linear infinite;
  animation-delay: -25s;
}
.banner-book-now .bn-drift-star--c {
  animation: bn-drift-c 95s linear infinite;
  animation-delay: -50s;
}
@keyframes bn-drift-a {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translateX(1700px); opacity: 0; }
}
@keyframes bn-drift-b {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateX(1700px); opacity: 0; }
}
@keyframes bn-drift-c {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { transform: translateX(1700px); opacity: 0; }
}

/* Shooting stars — staggered streaks */
.banner-book-now .bn-shoot {
  opacity: 0;
}
.banner-book-now .bn-shoot--a {
  animation: bn-shooting-streak 14s ease-in-out infinite;
}
.banner-book-now .bn-shoot--b {
  animation: bn-shooting-streak 18s ease-in-out infinite;
  animation-delay: -6s;
}
.banner-book-now .bn-shoot--c {
  animation: bn-shooting-streak 22s ease-in-out infinite;
  animation-delay: -12s;
}
@keyframes bn-shooting-streak {
  0% { opacity: 0; transform: translateX(-200px) translateY(-100px); }
  3% { opacity: 1; }
  10% { opacity: 1; transform: translateX(700px) translateY(380px); }
  12% { opacity: 0; transform: translateX(800px) translateY(440px); }
  100% { opacity: 0; transform: translateX(800px) translateY(440px); }
}

/* Falling snow — 20 particles, varied speeds and slight horizontal drift */
.banner-book-now .bn-snowflake {
  opacity: 0;
}
@keyframes bn-snow-fall {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateY(500px) translateX(20px); opacity: 0.85; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(1000px) translateX(-15px); opacity: 0; }
}
@keyframes bn-snow-fall-2 {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translateY(500px) translateX(-25px); opacity: 0.8; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(1000px) translateX(20px); opacity: 0; }
}
.banner-book-now .bn-snow-1  { animation: bn-snow-fall   14s linear infinite; animation-delay: 0s; }
.banner-book-now .bn-snow-2  { animation: bn-snow-fall-2 18s linear infinite; animation-delay: -3s; }
.banner-book-now .bn-snow-3  { animation: bn-snow-fall   12s linear infinite; animation-delay: -1s; }
.banner-book-now .bn-snow-4  { animation: bn-snow-fall-2 16s linear infinite; animation-delay: -6s; }
.banner-book-now .bn-snow-5  { animation: bn-snow-fall   20s linear infinite; animation-delay: -9s; }
.banner-book-now .bn-snow-6  { animation: bn-snow-fall-2 14s linear infinite; animation-delay: -7s; }
.banner-book-now .bn-snow-7  { animation: bn-snow-fall   17s linear infinite; animation-delay: -11s; }
.banner-book-now .bn-snow-8  { animation: bn-snow-fall-2 15s linear infinite; animation-delay: -4s; }
.banner-book-now .bn-snow-9  { animation: bn-snow-fall   19s linear infinite; animation-delay: -2s; }
.banner-book-now .bn-snow-10 { animation: bn-snow-fall-2 13s linear infinite; animation-delay: -8s; }
.banner-book-now .bn-snow-11 { animation: bn-snow-fall   21s linear infinite; animation-delay: -5s; }
.banner-book-now .bn-snow-12 { animation: bn-snow-fall-2 16s linear infinite; animation-delay: -10s; }
.banner-book-now .bn-snow-13 { animation: bn-snow-fall   18s linear infinite; animation-delay: -13s; }
.banner-book-now .bn-snow-14 { animation: bn-snow-fall-2 17s linear infinite; animation-delay: -15s; }
.banner-book-now .bn-snow-15 { animation: bn-snow-fall   15s linear infinite; animation-delay: -12s; }
.banner-book-now .bn-snow-16 { animation: bn-snow-fall-2 19s linear infinite; animation-delay: -14s; }
.banner-book-now .bn-snow-17 { animation: bn-snow-fall   22s linear infinite; animation-delay: -16s; }
.banner-book-now .bn-snow-18 { animation: bn-snow-fall-2 14s linear infinite; animation-delay: -2.5s; }
.banner-book-now .bn-snow-19 { animation: bn-snow-fall   17s linear infinite; animation-delay: -7.5s; }
.banner-book-now .bn-snow-20 { animation: bn-snow-fall-2 15s linear infinite; animation-delay: -11s; }

@media (prefers-reduced-motion: reduce) {
  .banner-book-now [class*="bn-"] {
    animation: none !important;
    opacity: 1;
  }
  .banner-book-now .bn-shoot,
  .banner-book-now .bn-drift-star,
  .banner-book-now .bn-snowflake {
    opacity: 0 !important;
  }
}
/* =========================================================
   v1.16.23 — Server-side on-banner state (definitive FOUC fix)
   The body now has the jmy-has-banner class added by PHP filter
   for any page with a banner. This means the entire on-banner
   state is in effect from the very first byte of HTML — no JS
   delay, no CSS :has() trickery, no missed style overrides.

   When the user scrolls past the banner, JS adds the
   .header-scrolled-past class to <html>, which flips us back
   to the default cream header state.
   ========================================================= */

/* Header background + blur */
html:not(.header-scrolled-past) body.jmy-has-banner .site-header {
  background: rgba(30, 58, 95, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Header text colors */
html:not(.header-scrolled-past) body.jmy-has-banner .site-header a:not(.wp-block-button__link),
html:not(.header-scrolled-past) body.jmy-has-banner .site-header .site-title,
html:not(.header-scrolled-past) body.jmy-has-banner .site-header p,
html:not(.header-scrolled-past) body.jmy-has-banner .site-header .jmy-logo-mark {
  color: var(--bg);
}

/* CTA button — cream border + cream text */
html:not(.header-scrolled-past) body.jmy-has-banner .site-header .nav-cta .wp-block-button__link {
  border-color: rgba(246, 248, 251, 0.9) !important;
  color: var(--bg) !important;
}
html:not(.header-scrolled-past) body.jmy-has-banner .site-header .nav-cta .wp-block-button__link:hover {
  background: var(--bg) !important;
  color: var(--blue-deep) !important;
  border-color: var(--bg) !important;
}

/* Submenu chevron icons */
html:not(.header-scrolled-past) body.jmy-has-banner .site-header .wp-block-navigation__submenu-icon svg {
  stroke: var(--bg);
}

/* Submenu open dropdown — keep navy text on cream dropdown background */
html:not(.header-scrolled-past) body.jmy-has-banner .site-header .wp-block-navigation__submenu-container a {
  color: var(--ink);
}
html:not(.header-scrolled-past) body.jmy-has-banner .site-header .wp-block-navigation__submenu-container a:hover {
  color: var(--accent);
}

/* Mobile hamburger */
html:not(.header-scrolled-past) body.jmy-has-banner .wp-block-navigation__responsive-container-open {
  color: var(--bg);
}

/* =========================================================
   v1.16.30 — Header bottom border when scrolled past banner
   When the header transitions from translucent navy (on-banner)
   to opaque cream (scrolled past), add a subtle bottom border
   so the floating header reads as a distinct card above the
   page content. The transition on border-color in the base
   .site-header rule makes this fade in smoothly over 0.4s.
   ========================================================= */
html.header-scrolled-past .site-header {
  border-bottom-color: rgba(30, 58, 95, 0.13);
}

/* =========================================================
   v1.16.34 — Toggle hint close button (persistent mode only)
   When JMY_TOGGLE_HINT_MODE is 'persistent', the JS adds a small
   X button so users have an explicit dismiss action. The button
   sits in the top-right corner of the tooltip, matching the
   cream-and-gold design language of the tooltip itself.
   ========================================================= */

/* In persistent mode, give the tooltip extra right-side padding so
   the close button doesn't overlap the eyebrow text. */
.jmy-toggle-hint--persistent {
  padding-right: 30px;
}

.jmy-toggle-hint-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(30, 58, 95, 0.45);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;
  /* Always clickable, even while the tooltip is fading in/out, so the
     user can dismiss at any moment. */
  pointer-events: auto;
}
.jmy-toggle-hint-close svg {
  width: 9px;
  height: 9px;
  display: block;
}
.jmy-toggle-hint-close:hover {
  color: var(--blue-deep);
  background: rgba(201, 169, 97, 0.18);
}
.jmy-toggle-hint-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =========================================================
   v1.16.38 — Birds in sun mode on the homepage hero (fixed)
   v1.16.37 attempt clashed with .home-hero-image::after which
   already exists as a text-readability overlay. Moved birds
   onto .banner-variant-sun pseudo-elements (the sun-variant
   wrapper inside the home hero), which has no existing rules.
   The variant wrapper is positioned and fills the hero, so
   percentage-based top values still work as expected. Also,
   when in moon mode, the variant itself fades out, so the
   birds disappear automatically.
   ========================================================= */

html.theme-mode-sun .home-hero .home-hero-image--themed .banner-variant-sun::after {
  content: '';
  position: absolute;
  /* Below the navigation header (~70px) with breathing room.
     15% of a typical 100vh hero ≈ 120-150px. */
  top: 15%;
  left: -60px;
  width: 28px;
  height: 14px;
  z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='rgba(20,30,45,0.55)' stroke-width='1.4' stroke-linecap='round'><path d='M2 8 Q7 1 12 8'/><path d='M12 8 Q17 1 22 8'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  animation: bird-drift-1 38s linear infinite;
  animation-delay: -3s;
}

html.theme-mode-sun .home-hero .home-hero-image--themed .banner-variant-sun::before {
  content: '';
  position: absolute;
  /* Slightly lower than bird 1 for vertical variation, still
     well above the title text in the middle of the hero. */
  top: 25%;
  left: -100px;
  width: 22px;
  height: 12px;
  z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='rgba(20,30,45,0.5)' stroke-width='1.2' stroke-linecap='round'><path d='M1 7 Q6 1 11 7'/><path d='M11 7 Q16 1 21 7'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  animation: bird-drift-2 52s linear infinite;
  animation-delay: -10s;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-mode-sun .home-hero-image--themed .banner-variant-sun::before,
  html.theme-mode-sun .home-hero-image--themed .banner-variant-sun::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* =========================================================
   v1.16.42 — More obvious animations across landing banners
   Client feedback (April 2026): the day-mode hero animations
   feel too subtle, especially the Book Now sun banner and the
   Classes Index hot air balloon. Also wants 3 birds (instead
   of 2) anywhere birds are used. This block:
   - Adds the third bird (real element injected by the SVG
     dispatcher into .banner-variant-sun)
   - Speeds up and exaggerates the balloon drift
   - Enhances Book Now sun banner with new elements
   - Strengthens homepage hero animations both modes
   ========================================================= */

/* ---------- Third bird (real DOM element in .banner-variant-sun) ---------- */
.banner-variant-sun .sun-bird--3,
.home-hero-image--themed .banner-variant-sun .sun-bird--3 {
  position: absolute;
  /* Sits between bird 1 (25%) and bird 2 (38%) — gives a natural staggered
     flock look. Slightly larger than bird 2, slightly smaller than bird 1. */
  top: 32%;
  left: -130px;
  width: 24px;
  height: 13px;
  z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13' fill='none' stroke='rgba(20,30,45,0.52)' stroke-width='1.3' stroke-linecap='round'><path d='M2 7.5 Q6.5 1 11 7.5'/><path d='M11 7.5 Q15.5 1 20 7.5'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  animation: bird-drift-3 44s linear infinite;
  animation-delay: -22s;
  opacity: 0;
}
/* Only show third bird in sun mode (sun variant is otherwise faded out) */
html:not(.theme-mode-sun) .banner-variant-sun .sun-bird--3,
html:not(.theme-mode-sun) .home-hero-image--themed .banner-variant-sun .sun-bird--3 {
  display: none;
}

@keyframes bird-drift-3 {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  6% { opacity: 0.8; }
  50% { transform: translateX(65vw) translateY(-15px); }
  94% { opacity: 0.8; }
  100% { transform: translateX(130vw) translateY(30px); opacity: 0; }
}

/* ---------- Hot air balloon — stronger, faster drift ---------- */
/* Previous: 14s with ±8px sway — barely perceptible.
   New: 9s with ±28px horizontal, ±20px vertical, larger rotation. */
.banner-variant-sun .ci-balloon-sun {
  animation: balloon-drift-strong 9s ease-in-out infinite !important;
  transform-origin: 1180px 360px;
}
@keyframes balloon-drift-strong {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-28px, -12px) rotate(-3deg); }
  50%      { transform: translate(0, -20px) rotate(0deg); }
  75%      { transform: translate(28px, -10px) rotate(3deg); }
}

/* ---------- Homepage hero — more obvious motion ---------- */
/* Cloud drift speed: was 45s/62s (moon), 80s/100s (sun) — sped up in
   v1.16.42, then slowed by ~30% in v1.16.43 per client feedback. */
.home-hero .hero-cloud-a {
  animation: hero-cloud-drift-a 40s linear infinite !important;
}
.home-hero .hero-cloud-b {
  animation: hero-cloud-drift-b 54s linear infinite !important;
  animation-delay: -22s !important;
}
html.theme-mode-sun .home-hero-image--themed .hero-cloud-a-sun {
  animation: cloud-drift-a 54s linear infinite !important;
}
html.theme-mode-sun .home-hero-image--themed .hero-cloud-b-sun {
  animation: cloud-drift-b 71s linear infinite !important;
  animation-delay: -28s !important;
}
/* Sun/moon disc breathe — make the pulse more visible */
.home-hero .hero-sun {
  animation: hero-sun-breathe-dramatic 4s ease-in-out infinite !important;
}
@keyframes hero-sun-breathe-dramatic {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.16); }
}
/* Glow pulses — more amplitude */
.home-hero .hero-glow {
  animation: hero-glow-pulse-dramatic 4s ease-in-out infinite !important;
}
.home-hero .hero-glow:nth-of-type(1) {
  animation: hero-glow-outer-dramatic 6s ease-in-out infinite !important;
}
@keyframes hero-glow-pulse-dramatic {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.25); }
}
@keyframes hero-glow-outer-dramatic {
  0%, 100% { opacity: 0.05; transform: scale(1); }
  50%      { opacity: 0.28; transform: scale(1.32); }
}
/* Sun variant — make the sun-bright disc breathe too */
html.theme-mode-sun .home-hero-image--themed .hero-sun-bright {
  animation: hero-sun-breathe-dramatic 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 30px rgba(255, 232, 168, 0.7));
}
html.theme-mode-sun .home-hero-image--themed .hero-glow-sun {
  animation: hero-glow-pulse-dramatic 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* ---------- Book Now sun banner — new elements come alive ---------- */
/* Sun disc breathe */
.banner-book-now .bn-sun-disc-sun {
  animation: bn-sun-breathe 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 50px rgba(255, 230, 160, 0.8));
}
@keyframes bn-sun-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 50px rgba(255, 230, 160, 0.8)) brightness(1); }
  50%      { transform: scale(1.07); filter: drop-shadow(0 0 70px rgba(255, 230, 160, 1)) brightness(1.1); }
}
/* Multi-layer glow pulsing */
.banner-book-now .bn-sun-glow-sun {
  animation: bn-sun-glow-pulse 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-book-now .bn-sun-glow-inner-sun {
  animation: bn-sun-glow-inner-pulse 3.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes bn-sun-glow-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.12); }
}
@keyframes bn-sun-glow-inner-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.15); }
}
/* Sunbeams rotate slowly around the sun */
.banner-book-now .bn-sunbeams-sun {
  animation: bn-sunbeams-rotate 60s linear infinite;
  transform-origin: 800px 350px;
  transform-box: view-box;
}
@keyframes bn-sunbeams-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Drifting clouds */
.banner-book-now .bn-cloud-sun--a {
  animation: bn-cloud-drift-a 60s linear infinite;
}
.banner-book-now .bn-cloud-sun--b {
  animation: bn-cloud-drift-b 75s linear infinite;
  animation-delay: -30s;
}
.banner-book-now .bn-cloud-sun--c {
  animation: bn-cloud-drift-c 90s linear infinite;
  animation-delay: -45s;
}
.banner-book-now .bn-cloud-sun--d {
  animation: bn-cloud-drift-d 70s linear infinite;
  animation-delay: -25s;
}
.banner-book-now .bn-cloud-sun--e {
  animation: bn-cloud-drift-e 105s linear infinite;
  animation-delay: -60s;
}
.banner-book-now .bn-cloud-sun--f {
  animation: bn-cloud-drift-f 85s linear infinite;
  animation-delay: -10s;
}
@keyframes bn-cloud-drift-a {
  0%   { transform: translateX(-200px); }
  100% { transform: translateX(1800px); }
}
@keyframes bn-cloud-drift-b {
  0%   { transform: translateX(1800px); }
  100% { transform: translateX(-300px); }
}
@keyframes bn-cloud-drift-c {
  0%   { transform: translateX(-150px); }
  100% { transform: translateX(1750px); }
}
@keyframes bn-cloud-drift-d {
  0%   { transform: translateX(1700px); }
  100% { transform: translateX(-200px); }
}
@keyframes bn-cloud-drift-e {
  0%   { transform: translateX(-180px); }
  100% { transform: translateX(1800px); }
}
@keyframes bn-cloud-drift-f {
  0%   { transform: translateX(1750px); }
  100% { transform: translateX(-250px); }
}
/* Soaring bird drifts gently across in the distance */
.banner-book-now .bn-soaring-bird-sun {
  animation: bn-bird-soar 24s linear infinite;
}
@keyframes bn-bird-soar {
  0%   { transform: translate(-100px, 0); opacity: 0; }
  10%  { opacity: 0.65; }
  50%  { transform: translate(600px, -40px); opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { transform: translate(1300px, 30px); opacity: 0; }
}

/* ---------- Reduced motion safeguards ---------- */
@media (prefers-reduced-motion: reduce) {
  .banner-variant-sun .sun-bird--3,
  .banner-book-now .bn-sun-disc-sun,
  .banner-book-now .bn-sun-glow-sun,
  .banner-book-now .bn-sun-glow-inner-sun,
  .banner-book-now .bn-sunbeams-sun,
  .banner-book-now .bn-cloud-sun--a,
  .banner-book-now .bn-cloud-sun--b,
  .banner-book-now .bn-cloud-sun--c,
  .banner-book-now .bn-cloud-sun--d,
  .banner-book-now .bn-cloud-sun--e,
  .banner-book-now .bn-cloud-sun--f,
  .banner-book-now .bn-soaring-bird-sun {
    animation: none !important;
  }
  .banner-variant-sun .sun-bird--3,
  .banner-book-now .bn-soaring-bird-sun {
    opacity: 0 !important;
  }
}

/* =========================================================
   v1.16.44 — Meet Janet "Learn More" link
   Dedicated class (vs reusing .home-mission-link) so this link
   stays properly positioned inside .home-meet-janet-copy. The
   Mission section's class was getting picked up by the wrong
   parent layout and aligning to the section edge.
   ========================================================= */
.home-meet-janet-link-wrap {
  margin: 24px 0 0 0 !important;
}
.home-meet-janet-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft) !important;
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: 4px;
  text-decoration: none !important;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.home-meet-janet-link:hover {
  color: var(--accent) !important;
  border-color: var(--accent);
}

/* =========================================================
   v1.16.50 — Class Packages banner (Aurora + Tropical Sunset)
   The shared @keyframes below (pkg-twinkle-*, pkg-moon-*,
   pkg-sun-*, pkg-cloud-drift-*) are still used by the spring/
   summer/fall/winter seasonal banners — they're left in place
   as utility keyframes. The class_packages-specific element
   rules are NEW (aurora curtains, tropical sun, etc.).
   ========================================================= */

@keyframes pkg-twinkle-bright {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@keyframes pkg-twinkle-med {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}
@keyframes pkg-twinkle-tiny {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.65; }
}
@keyframes pkg-moon-corona-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes pkg-moon-glow-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes pkg-moon-breathe {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes pkg-sun-glow-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes pkg-sun-disc-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@keyframes pkg-cloud-drift-a {
  0% { transform: translateX(-250px); }
  100% { transform: translateX(1800px); }
}
@keyframes pkg-cloud-drift-b {
  0% { transform: translateX(1800px); }
  100% { transform: translateX(-300px); }
}

/* ---------- Class Packages Spring banner ---------- */
.banner-class-packages-spring .spring-star {
  animation: pkg-twinkle-med 6s ease-in-out infinite;
}
.banner-class-packages-spring .spring-moon-corona {
  animation: pkg-moon-corona-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages-spring .spring-moon-glow {
  animation: pkg-moon-glow-breathe 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages-spring .spring-moon {
  animation: pkg-moon-breathe 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 30px rgba(255, 210, 200, 0.5));
}
.banner-class-packages-spring .spring-sun-glow {
  animation: pkg-sun-glow-pulse 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages-spring .spring-sun-disc {
  animation: pkg-sun-disc-breathe 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 50px rgba(255, 200, 180, 0.7));
}
/* Cloud drift in spring sun variant */
.banner-class-packages-spring .banner-variant-sun .spring-cloud-a {
  animation: pkg-cloud-drift-a 70s linear infinite;
}
.banner-class-packages-spring .banner-variant-sun .spring-cloud-b {
  animation: pkg-cloud-drift-b 90s linear infinite;
  animation-delay: -30s;
}

/* Cherry blossom petals drifting down with horizontal sway.
   Each petal falls at a different speed/delay/sway pattern. */
.banner-class-packages-spring .spring-petal-1 { animation: petal-fall-a 12s linear infinite; }
.banner-class-packages-spring .spring-petal-2 { animation: petal-fall-b 14s linear infinite; animation-delay: -2s; }
.banner-class-packages-spring .spring-petal-3 { animation: petal-fall-a 16s linear infinite; animation-delay: -4s; }
.banner-class-packages-spring .spring-petal-4 { animation: petal-fall-b 13s linear infinite; animation-delay: -6s; }
.banner-class-packages-spring .spring-petal-5 { animation: petal-fall-a 15s linear infinite; animation-delay: -1s; }
.banner-class-packages-spring .spring-petal-6 { animation: petal-fall-b 11s linear infinite; animation-delay: -8s; }
.banner-class-packages-spring .spring-petal-7 { animation: petal-fall-a 17s linear infinite; animation-delay: -3s; }
.banner-class-packages-spring .spring-petal-8 { animation: petal-fall-b 12s linear infinite; animation-delay: -10s; }
@keyframes petal-fall-a {
  0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(-40px, 450px) rotate(180deg); }
  90%  { opacity: 0.7; }
  100% { transform: translate(20px, 920px) rotate(360deg); opacity: 0; }
}
@keyframes petal-fall-b {
  0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translate(50px, 450px) rotate(-180deg); }
  90%  { opacity: 0.6; }
  100% { transform: translate(-30px, 920px) rotate(-360deg); opacity: 0; }
}

/* Branch sway — very subtle */
.banner-class-packages-spring .spring-branch,
.banner-class-packages-spring .spring-blossom-static {
  animation: spring-branch-sway 8s ease-in-out infinite;
  transform-origin: left center;
  transform-box: fill-box;
}
@keyframes spring-branch-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(0.5deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .banner-class-packages [class*="aurora-star-"],
  .banner-class-packages [class*="aurora-curtain-"],
  .banner-class-packages .aurora-reflection,
  .banner-class-packages .tropical-sun-glow,
  .banner-class-packages .tropical-sun-glow-inner,
  .banner-class-packages .tropical-sun-disc,
  .banner-class-packages .tropical-cloud-a,
  .banner-class-packages .tropical-cloud-b,
  .banner-class-packages .tropical-cloud-c,
  .banner-class-packages .tropical-cloud-d,
  .banner-class-packages .tropical-reflection,
  .banner-class-packages-spring .spring-star,
  .banner-class-packages-spring .spring-moon-corona,
  .banner-class-packages-spring .spring-moon-glow,
  .banner-class-packages-spring .spring-moon,
  .banner-class-packages-spring .spring-sun-glow,
  .banner-class-packages-spring .spring-sun-disc,
  .banner-class-packages-spring .spring-cloud-a,
  .banner-class-packages-spring .spring-cloud-b,
  .banner-class-packages-spring [class*="spring-petal-"],
  .banner-class-packages-spring .spring-branch,
  .banner-class-packages-spring .spring-blossom-static {
    animation: none !important;
  }
  .banner-class-packages-spring [class*="spring-petal-"] {
    opacity: 0 !important;
  }
}

/* =========================================================
   v1.16.48 — Class packages page layout
   Stacked package option cards: large quantity numeral on left,
   title + benefit description in middle, arrow on right.
   Hover lifts the card slightly, the arrow slides right, and a
   gold accent line appears at the left edge.
   ========================================================= */
.packages-options-section {
  padding: 24px var(--wp--preset--spacing--gutter, 32px) 60px;
  background: var(--bg);
}
.packages-options-inner {
  max-width: 820px;
  margin: 0 auto;
}
.packages-options-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.package-option-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px 36px;
  background: var(--bg-accent, #fbf7ee);
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-left: 3px solid rgba(201, 169, 97, 0.3);
  border-radius: 6px;
  text-decoration: none !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease,
              background 0.35s ease;
  position: relative;
  overflow: hidden;
}
.package-option-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -20px rgba(30, 58, 95, 0.18);
  border-left-color: var(--accent);
  border-color: rgba(201, 169, 97, 0.35);
  background: #fffdf6;
}
.package-card-qty {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  font-style: italic;
  text-align: center;
}
.package-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.package-card-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.package-card-meta {
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}
.package-card-strike {
  text-decoration: line-through;
  opacity: 0.55;
  margin-left: 6px;
  font-size: 12.5px;
}
.package-card-arrow {
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              color 0.35s ease;
}
.package-option-card:hover .package-card-arrow {
  transform: translateX(6px);
  color: var(--accent);
}

/* Spring sale page — slightly warmer/pinker accent for sale cards */
.jmy-class-packages-spring-page .package-option-card {
  border-left-color: rgba(232, 138, 162, 0.4);
}
.jmy-class-packages-spring-page .package-option-card:hover {
  border-left-color: #e88aa2;
}
.jmy-class-packages-spring-page .package-card-qty {
  color: #c46a82;
}
.jmy-class-packages-spring-page .package-option-card:hover .package-card-arrow {
  color: #c46a82;
}

/* Block-gap reset for class-packages pages (matches other pages
   with banner + sections so nothing gets unwanted spacing). */
.jmy-class-packages-page > .page-banner,
.jmy-class-packages-page > .class-page-section,
.jmy-class-packages-page > .packages-options-section,
.jmy-class-packages-page > .yin-closing {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 720px) {
  .package-option-card {
    grid-template-columns: 56px 1fr auto;
    gap: 18px;
    padding: 22px 22px;
  }
  .package-card-qty {
    font-size: 40px;
  }
  .package-card-title {
    font-size: 18px;
  }
  .package-card-meta {
    font-size: 12.5px;
  }
}

/* =========================================================
   v1.16.48 — FAQ featured image (animated GIF)
   The GIF was missed when the FAQ page was rebuilt. It now
   sits as a centerpiece visual between the intro and the
   list of questions. Wrapped in a photo-frame-style container
   with a soft pulsing gold glow that draws the eye without
   overpowering the GIF's own content.
   ========================================================= */
.faq-feature-image-section {
  padding: 24px var(--wp--preset--spacing--gutter, 32px) 64px;
  background: var(--bg);
}
.faq-feature-image-inner {
  max-width: 540px;
  margin: 0 auto;
}
.faq-feature-image {
  position: relative;
  display: block;
  margin: 0;
  border-radius: 220px 220px 6px 6px;
  overflow: hidden;
  background: var(--bg-accent, #fbf7ee);
  box-shadow:
    0 30px 60px -25px rgba(30, 58, 95, 0.28),
    0 6px 12px -6px rgba(30, 58, 95, 0.12);
  /* Subtle continuous lift to make the frame feel alive without
     competing with the GIF's own motion. */
  animation: faq-feature-image-breathe 7s ease-in-out infinite;
  transform-origin: center;
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.faq-feature-image img {
  display: block;
  width: 100%;
  height: auto;
  /* Subtle warm grade to match the rest of the photo system */
  filter: saturate(0.92) contrast(1.04);
  transition: filter 0.6s ease;
}
.faq-feature-image:hover {
  box-shadow:
    0 40px 80px -25px rgba(30, 58, 95, 0.35),
    0 8px 16px -6px rgba(30, 58, 95, 0.18);
  transform: translateY(-3px);
}
.faq-feature-image:hover img {
  filter: saturate(1) contrast(1.06);
}
/* Pulsing gold glow behind the frame — sits behind the image and
   gently breathes outward, then fades back. Uses ::after on a
   dedicated span so it doesn't interfere with overflow:hidden
   on the frame itself. */
.faq-feature-image-glow {
  position: absolute;
  inset: -30px;
  border-radius: 240px 240px 30px 30px;
  background: radial-gradient(ellipse at center,
              rgba(201, 169, 97, 0.35) 0%,
              rgba(201, 169, 97, 0.18) 30%,
              rgba(201, 169, 97, 0) 65%);
  z-index: -1;
  pointer-events: none;
  animation: faq-feature-glow-pulse 5s ease-in-out infinite;
}
@keyframes faq-feature-image-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.005); }
}
@keyframes faq-feature-glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.96); }
  50%      { opacity: 0.8; transform: scale(1.04); }
}
/* Mobile — smaller arch radius, more breathing room */
@media (max-width: 600px) {
  .faq-feature-image {
    border-radius: 140px 140px 6px 6px;
  }
  .faq-feature-image-glow {
    border-radius: 160px 160px 30px 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-feature-image,
  .faq-feature-image-glow {
    animation: none !important;
  }
}

/* =========================================================
   v1.16.49 — Seasonal class packages banner animations
   Summer (fireflies + grass), fall (leaves + tree), winter
   (snow + pines). Each season has moon and sun variants.
   ========================================================= */

/* ---------- Summer banner ---------- */
.banner-class-packages-summer .summer-star {
  animation: pkg-twinkle-med 6s ease-in-out infinite;
}
.banner-class-packages-summer .summer-moon-corona,
.banner-class-packages-summer .summer-sun-glow {
  animation: pkg-moon-corona-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages-summer .summer-moon-glow {
  animation: pkg-moon-glow-breathe 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages-summer .summer-moon,
.banner-class-packages-summer .summer-sun-disc {
  animation: pkg-moon-breathe 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 40px rgba(255, 220, 160, 0.6));
}
/* Fireflies — each pulses on/off at staggered intervals,
   with subtle horizontal/vertical drift. */
.banner-class-packages-summer .summer-firefly {
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages-summer .summer-ff-1  { animation: ff-pulse 4s ease-in-out infinite, ff-drift-a 8s ease-in-out infinite; }
.banner-class-packages-summer .summer-ff-2  { animation: ff-pulse 3.5s ease-in-out infinite 0.5s, ff-drift-b 9s ease-in-out infinite; }
.banner-class-packages-summer .summer-ff-3  { animation: ff-pulse 4.5s ease-in-out infinite 1s, ff-drift-a 7s ease-in-out infinite 1s; }
.banner-class-packages-summer .summer-ff-4  { animation: ff-pulse 3s ease-in-out infinite 1.5s, ff-drift-b 10s ease-in-out infinite 2s; }
.banner-class-packages-summer .summer-ff-5  { animation: ff-pulse 5s ease-in-out infinite 2s, ff-drift-a 8.5s ease-in-out infinite 3s; }
.banner-class-packages-summer .summer-ff-6  { animation: ff-pulse 3.8s ease-in-out infinite 0.8s, ff-drift-b 7.5s ease-in-out infinite 1.5s; }
.banner-class-packages-summer .summer-ff-7  { animation: ff-pulse 4.2s ease-in-out infinite 2.5s, ff-drift-a 9.5s ease-in-out infinite 0.5s; }
.banner-class-packages-summer .summer-ff-8  { animation: ff-pulse 3.6s ease-in-out infinite 1.2s, ff-drift-b 8s ease-in-out infinite 2.5s; }
.banner-class-packages-summer .summer-ff-9  { animation: ff-pulse 4.8s ease-in-out infinite 1.8s, ff-drift-a 7s ease-in-out infinite 1.2s; }
.banner-class-packages-summer .summer-ff-10 { animation: ff-pulse 3.3s ease-in-out infinite 0.3s, ff-drift-b 9.5s ease-in-out infinite 0.8s; }
.banner-class-packages-summer .summer-ff-11 { animation: ff-pulse 4.7s ease-in-out infinite 2.2s, ff-drift-a 8s ease-in-out infinite 1.8s; }
.banner-class-packages-summer .summer-ff-12 { animation: ff-pulse 3.9s ease-in-out infinite 1.4s, ff-drift-b 7.5s ease-in-out infinite 2.2s; }
@keyframes ff-pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}
@keyframes ff-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(20px, -10px); }
}
@keyframes ff-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-15px, 12px); }
}
/* Grass sway — subtle horizontal movement */
.banner-class-packages-summer .summer-grass {
  animation: grass-sway 6s ease-in-out infinite;
  transform-origin: center bottom;
  transform-box: fill-box;
}
@keyframes grass-sway {
  0%, 100% { transform: skewX(-1deg); }
  50%      { transform: skewX(1deg); }
}
.banner-class-packages-summer .summer-cloud-a {
  animation: pkg-cloud-drift-a 75s linear infinite;
}
.banner-class-packages-summer .summer-cloud-b {
  animation: pkg-cloud-drift-b 95s linear infinite;
  animation-delay: -40s;
}

/* ---------- Fall banner ---------- */
.banner-class-packages-fall .fall-star {
  animation: pkg-twinkle-med 6s ease-in-out infinite;
}
.banner-class-packages-fall .fall-moon-corona,
.banner-class-packages-fall .fall-sun-glow {
  animation: pkg-moon-corona-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages-fall .fall-moon-glow {
  animation: pkg-moon-glow-breathe 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages-fall .fall-moon,
.banner-class-packages-fall .fall-sun-disc {
  animation: pkg-moon-breathe 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 30px rgba(255, 200, 140, 0.55));
}
/* Falling leaves — drift down with spinning rotation */
.banner-class-packages-fall .fall-leaf-1 { animation: leaf-fall-a 13s linear infinite; }
.banner-class-packages-fall .fall-leaf-2 { animation: leaf-fall-b 15s linear infinite; animation-delay: -2s; }
.banner-class-packages-fall .fall-leaf-3 { animation: leaf-fall-a 17s linear infinite; animation-delay: -4s; }
.banner-class-packages-fall .fall-leaf-4 { animation: leaf-fall-b 14s linear infinite; animation-delay: -6s; }
.banner-class-packages-fall .fall-leaf-5 { animation: leaf-fall-a 16s linear infinite; animation-delay: -1s; }
.banner-class-packages-fall .fall-leaf-6 { animation: leaf-fall-b 12s linear infinite; animation-delay: -8s; }
.banner-class-packages-fall .fall-leaf-7 { animation: leaf-fall-a 18s linear infinite; animation-delay: -3s; }
.banner-class-packages-fall .fall-leaf-8 { animation: leaf-fall-b 13s linear infinite; animation-delay: -10s; }
@keyframes leaf-fall-a {
  0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(-50px, 450px) rotate(180deg); }
  90%  { opacity: 0.7; }
  100% { transform: translate(30px, 920px) rotate(360deg); opacity: 0; }
}
@keyframes leaf-fall-b {
  0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translate(55px, 450px) rotate(-180deg); }
  90%  { opacity: 0.6; }
  100% { transform: translate(-40px, 920px) rotate(-360deg); opacity: 0; }
}
.banner-class-packages-fall .fall-tree,
.banner-class-packages-fall .fall-tree-small {
  animation: tree-sway 8s ease-in-out infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}
@keyframes tree-sway {
  0%, 100% { transform: rotate(-0.4deg); }
  50%      { transform: rotate(0.4deg); }
}
.banner-class-packages-fall .fall-cloud-a {
  animation: pkg-cloud-drift-a 75s linear infinite;
}
.banner-class-packages-fall .fall-cloud-b {
  animation: pkg-cloud-drift-b 95s linear infinite;
  animation-delay: -40s;
}

/* ---------- Winter banner ---------- */
.banner-class-packages-winter .winter-star {
  animation: pkg-twinkle-bright 4s ease-in-out infinite;
}
.banner-class-packages-winter .winter-moon-corona,
.banner-class-packages-winter .winter-sun-glow {
  animation: pkg-moon-corona-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages-winter .winter-moon-glow {
  animation: pkg-moon-glow-breathe 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages-winter .winter-moon,
.banner-class-packages-winter .winter-sun-disc {
  animation: pkg-moon-breathe 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 32px rgba(220, 232, 248, 0.6));
}
/* Snowflakes — slow, straight-ish falling with slight horizontal sway */
.banner-class-packages-winter .winter-flake-1  { animation: snow-fall-a 18s linear infinite; }
.banner-class-packages-winter .winter-flake-2  { animation: snow-fall-b 22s linear infinite; animation-delay: -2s; }
.banner-class-packages-winter .winter-flake-3  { animation: snow-fall-a 16s linear infinite; animation-delay: -4s; }
.banner-class-packages-winter .winter-flake-4  { animation: snow-fall-b 20s linear infinite; animation-delay: -6s; }
.banner-class-packages-winter .winter-flake-5  { animation: snow-fall-a 24s linear infinite; animation-delay: -8s; }
.banner-class-packages-winter .winter-flake-6  { animation: snow-fall-b 17s linear infinite; animation-delay: -10s; }
.banner-class-packages-winter .winter-flake-7  { animation: snow-fall-a 21s linear infinite; animation-delay: -3s; }
.banner-class-packages-winter .winter-flake-8  { animation: snow-fall-b 19s linear infinite; animation-delay: -12s; }
.banner-class-packages-winter .winter-flake-9  { animation: snow-fall-a 23s linear infinite; animation-delay: -5s; }
.banner-class-packages-winter .winter-flake-10 { animation: snow-fall-b 18s linear infinite; animation-delay: -14s; }
.banner-class-packages-winter .winter-flake-11 { animation: snow-fall-a 20s linear infinite; animation-delay: -7s; }
.banner-class-packages-winter .winter-flake-12 { animation: snow-fall-b 22s linear infinite; animation-delay: -9s; }
.banner-class-packages-winter .winter-flake-13 { animation: snow-fall-a 17s linear infinite; animation-delay: -11s; }
.banner-class-packages-winter .winter-flake-14 { animation: snow-fall-b 24s linear infinite; animation-delay: -1s; }
.banner-class-packages-winter .winter-flake-15 { animation: snow-fall-a 19s linear infinite; animation-delay: -13s; }
@keyframes snow-fall-a {
  0%   { transform: translate(0, -20px); opacity: 0; }
  8%   { opacity: 0.9; }
  50%  { transform: translate(-25px, 450px); }
  92%  { opacity: 0.75; }
  100% { transform: translate(15px, 920px); opacity: 0; }
}
@keyframes snow-fall-b {
  0%   { transform: translate(0, -20px); opacity: 0; }
  8%   { opacity: 0.85; }
  50%  { transform: translate(28px, 450px); }
  92%  { opacity: 0.7; }
  100% { transform: translate(-20px, 920px); opacity: 0; }
}
.banner-class-packages-winter .winter-cloud-a {
  animation: pkg-cloud-drift-a 90s linear infinite;
}
.banner-class-packages-winter .winter-cloud-b {
  animation: pkg-cloud-drift-b 110s linear infinite;
  animation-delay: -45s;
}

/* Reduced motion safeguards for all seasonal banners */
@media (prefers-reduced-motion: reduce) {
  .banner-class-packages-summer [class*="summer-"],
  .banner-class-packages-fall [class*="fall-"],
  .banner-class-packages-winter [class*="winter-"] {
    animation: none !important;
  }
  .banner-class-packages-summer [class*="summer-ff-"],
  .banner-class-packages-fall [class*="fall-leaf-"],
  .banner-class-packages-winter [class*="winter-flake-"] {
    opacity: 0 !important;
  }
}

/* Seasonal accent colors for package cards (matches each banner palette) */
.jmy-class-packages-summer-page .package-option-card { border-left-color: rgba(232, 160, 112, 0.4); }
.jmy-class-packages-summer-page .package-option-card:hover { border-left-color: #e8a070; }
.jmy-class-packages-summer-page .package-card-qty { color: #c87850; }
.jmy-class-packages-summer-page .package-option-card:hover .package-card-arrow { color: #c87850; }

.jmy-class-packages-fall-page .package-option-card { border-left-color: rgba(216, 100, 64, 0.4); }
.jmy-class-packages-fall-page .package-option-card:hover { border-left-color: #d66440; }
.jmy-class-packages-fall-page .package-card-qty { color: #b85530; }
.jmy-class-packages-fall-page .package-option-card:hover .package-card-arrow { color: #b85530; }

.jmy-class-packages-winter-page .package-option-card { border-left-color: rgba(90, 122, 168, 0.4); }
.jmy-class-packages-winter-page .package-option-card:hover { border-left-color: #5a7aa8; }
.jmy-class-packages-winter-page .package-card-qty { color: #3a5a85; }
.jmy-class-packages-winter-page .package-option-card:hover .package-card-arrow { color: #3a5a85; }

/* =========================================================
   v1.16.50 — Aurora borealis + tropical sunset animations
   Aurora curtains shift and undulate; tropical sun pulses
   gently; clouds drift slowly. Each curtain has its own
   tempo so they layer without syncing.
   ========================================================= */

/* Aurora star twinkles — reuse the three-population pattern */
.banner-class-packages .aurora-star-a {
  animation: pkg-twinkle-bright 4s ease-in-out infinite;
}
.banner-class-packages .aurora-star-b {
  animation: pkg-twinkle-med 6s ease-in-out infinite;
  animation-delay: -2s;
}
.banner-class-packages .aurora-star-c {
  animation: pkg-twinkle-tiny 8s ease-in-out infinite;
  animation-delay: -4s;
}

/* Aurora curtains — each curtain shifts horizontally and
   pulses in opacity at its own tempo. The animations use
   skewX rather than translate so the curtain feels like it's
   wave-flexing rather than sliding linearly. */
.banner-class-packages .aurora-curtain {
  transform-origin: center;
  transform-box: fill-box;
  mix-blend-mode: screen;
}
.banner-class-packages .aurora-curtain-green {
  animation: aurora-flex-a 12s ease-in-out infinite;
}
.banner-class-packages .aurora-curtain-teal {
  animation: aurora-flex-b 16s ease-in-out infinite;
  animation-delay: -3s;
}
.banner-class-packages .aurora-curtain-magenta {
  animation: aurora-flex-a 14s ease-in-out infinite;
  animation-delay: -5s;
}
.banner-class-packages .aurora-curtain-violet {
  animation: aurora-flex-b 18s ease-in-out infinite;
  animation-delay: -8s;
}
@keyframes aurora-flex-a {
  0%, 100% { transform: translateX(0) skewX(0deg); opacity: 0.85; }
  25%      { transform: translateX(20px) skewX(-2deg); opacity: 1; }
  50%      { transform: translateX(0) skewX(0deg); opacity: 0.75; }
  75%      { transform: translateX(-20px) skewX(2deg); opacity: 0.95; }
}
@keyframes aurora-flex-b {
  0%, 100% { transform: translateX(0) skewX(0deg); opacity: 0.8; }
  30%      { transform: translateX(-25px) skewX(2deg); opacity: 1; }
  60%      { transform: translateX(15px) skewX(-1.5deg); opacity: 0.7; }
}

/* Subtle aurora reflection on snow pulses with the curtains */
.banner-class-packages .aurora-reflection {
  animation: aurora-reflection-pulse 10s ease-in-out infinite;
}
@keyframes aurora-reflection-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Tropical sunset — sun pulse, glow, cloud drift */
.banner-class-packages .tropical-sun-disc {
  animation: tropical-sun-breathe 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 80px rgba(255, 200, 130, 0.7));
}
.banner-class-packages .tropical-sun-glow {
  animation: tropical-glow-outer 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.banner-class-packages .tropical-sun-glow-inner {
  animation: tropical-glow-inner 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes tropical-sun-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes tropical-glow-outer {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@keyframes tropical-glow-inner {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.06); }
}
.banner-class-packages .tropical-cloud-a {
  animation: tropical-cloud-drift-a 90s linear infinite;
}
.banner-class-packages .tropical-cloud-b {
  animation: tropical-cloud-drift-b 110s linear infinite;
  animation-delay: -45s;
}
.banner-class-packages .tropical-cloud-c {
  animation: tropical-cloud-drift-a 75s linear infinite;
  animation-delay: -20s;
}
.banner-class-packages .tropical-cloud-d {
  animation: tropical-cloud-drift-b 95s linear infinite;
  animation-delay: -55s;
}
@keyframes tropical-cloud-drift-a {
  0%   { transform: translateX(-250px); }
  100% { transform: translateX(1850px); }
}
@keyframes tropical-cloud-drift-b {
  0%   { transform: translateX(1850px); }
  100% { transform: translateX(-250px); }
}

/* Tropical reflection pulses gently */
.banner-class-packages .tropical-reflection {
  animation: aurora-reflection-pulse 7s ease-in-out infinite;
}

/* Update the regular class-packages card accent color to teal/aurora
   to match the new vibrant aurora palette */
.jmy-class-packages-page:not(.jmy-class-packages-spring-page):not(.jmy-class-packages-summer-page):not(.jmy-class-packages-fall-page):not(.jmy-class-packages-winter-page) .package-option-card {
  border-left-color: rgba(34, 212, 212, 0.35);
}
.jmy-class-packages-page:not(.jmy-class-packages-spring-page):not(.jmy-class-packages-summer-page):not(.jmy-class-packages-fall-page):not(.jmy-class-packages-winter-page) .package-option-card:hover {
  border-left-color: #22d4d4;
}
.jmy-class-packages-page:not(.jmy-class-packages-spring-page):not(.jmy-class-packages-summer-page):not(.jmy-class-packages-fall-page):not(.jmy-class-packages-winter-page) .package-card-qty {
  color: #0099a0;
}
.jmy-class-packages-page:not(.jmy-class-packages-spring-page):not(.jmy-class-packages-summer-page):not(.jmy-class-packages-fall-page):not(.jmy-class-packages-winter-page) .package-option-card:hover .package-card-arrow {
  color: #0099a0;
}

/* =========================================================
   v1.16.61 — Testimonials Quote-1 feature image
   The original site had a designed quote graphic (Quote-1.jpg.webp)
   below the testimonials. Bringing it back as a centered visual
   between the testimonial cards and the closing CTA.
   ========================================================= */
.testimonials-quote-image-section {
  padding: 32px var(--wp--preset--spacing--gutter, 32px) 80px;
  background: var(--bg);
}
.testimonials-quote-image-inner {
  max-width: 680px;
  margin: 0 auto;
}
.testimonials-quote-image {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
}
.testimonials-quote-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow:
    0 20px 40px -18px rgba(30, 58, 95, 0.22),
    0 4px 10px -4px rgba(30, 58, 95, 0.1);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.testimonials-quote-image:hover img {
  transform: translateY(-2px);
  box-shadow:
    0 28px 56px -18px rgba(30, 58, 95, 0.28),
    0 6px 12px -4px rgba(30, 58, 95, 0.14);
}
@media (max-width: 600px) {
  .testimonials-quote-image-section {
    padding: 24px 20px 56px;
  }
}

/* =========================================================
   v1.16.62 — Flash Sale banner animations
   Lanterns rise gently with slight horizontal sway and pulsing
   glow. Each lantern has its own tempo so they don't sync.
   Moon/sun, stars, clouds use the same shared utility keyframes
   as the other class-packages banners.
   ========================================================= */
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-star-a {
  animation: pkg-twinkle-bright 4s ease-in-out infinite;
}
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-star-b {
  animation: pkg-twinkle-med 6s ease-in-out infinite;
  animation-delay: -2s;
}
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-star-c {
  animation: pkg-twinkle-tiny 8s ease-in-out infinite;
  animation-delay: -4s;
}
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-moon-corona,
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-sun-glow {
  animation: pkg-moon-corona-breathe 9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-moon-glow {
  animation: pkg-moon-glow-breathe 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-moon,
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-sun-disc {
  animation: pkg-moon-breathe 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 32px rgba(255, 220, 180, 0.55));
}

/* Lanterns — each rises slowly with horizontal sway and pulsing glow.
   The translate() in the SVG sets the BASE position; CSS animations
   modify it via translate(x,y) on the group. Using transform-box:
   fill-box so transform-origin is relative to each lantern's own
   bounding box (for sway rotation). */
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-lantern {
  transform-origin: center;
  transform-box: fill-box;
}
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-lantern-1 { animation: lantern-rise-a 14s ease-in-out infinite; }
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-lantern-2 { animation: lantern-rise-b 16s ease-in-out infinite; animation-delay: -3s; }
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-lantern-3 { animation: lantern-rise-a 15s ease-in-out infinite; animation-delay: -6s; }
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-lantern-4 { animation: lantern-rise-b 13s ease-in-out infinite; animation-delay: -2s; }
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-lantern-5 { animation: lantern-rise-a 17s ease-in-out infinite; animation-delay: -9s; }
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-lantern-6 { animation: lantern-rise-b 12s ease-in-out infinite; animation-delay: -5s; }
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-lantern-7 { animation: lantern-rise-a 18s ease-in-out infinite; animation-delay: -7s; }
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-lantern-8 { animation: lantern-rise-b 14s ease-in-out infinite; animation-delay: -10s; }
@keyframes lantern-rise-a {
  0%, 100% { transform: translate(0, 0) rotate(-1deg); }
  25%      { transform: translate(6px, -12px) rotate(1deg); }
  50%      { transform: translate(0, -22px) rotate(-0.5deg); }
  75%      { transform: translate(-6px, -10px) rotate(1deg); }
}
@keyframes lantern-rise-b {
  0%, 100% { transform: translate(0, 0) rotate(1deg); }
  25%      { transform: translate(-7px, -15px) rotate(-1deg); }
  50%      { transform: translate(0, -25px) rotate(0.5deg); }
  75%      { transform: translate(7px, -12px) rotate(-1deg); }
}

/* Cloud drift in sun variant */
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-cloud-a {
  animation: pkg-cloud-drift-a 80s linear infinite;
}
:is(.banner-class-packages-flash-sale,.banner-book-now-sale) .flash-cloud-b {
  animation: pkg-cloud-drift-b 100s linear infinite;
  animation-delay: -40s;
}

/* Card accent — vivid magenta/gold matching the flash sale palette */
.jmy-class-packages-flash-sale-page .package-option-card {
  border-left-color: rgba(212, 80, 140, 0.4);
}
.jmy-class-packages-flash-sale-page .package-option-card:hover {
  border-left-color: #d4508c;
}
.jmy-class-packages-flash-sale-page .package-card-qty {
  color: #a83876;
}
.jmy-class-packages-flash-sale-page .package-option-card:hover .package-card-arrow {
  color: #a83876;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :is(.banner-class-packages-flash-sale,.banner-book-now-sale) [class*="flash-"] {
    animation: none !important;
  }
}

/* =========================================================
   v1.16.62 — Flash Sale callout on Book Now Sale page
   A more prominent variant of .packages-promo-card with a
   "limited time" sale badge and warmer color palette. Only
   activates inside .jmy-book-now-sale-page so the regular
   Book Now page keeps the calm version.
   ========================================================= */
/* =========================================================
   v1.16.62 / v1.16.64 / v1.16.65 / v1.16.66 — Flash Sale callout
   Full pastel sunset blend: gold → peach → pink → lavender → mauve.
   All the classic sunset hues represented in one diagonal gradient
   instead of leaning into a single color family. Activates only
   inside .jmy-book-now-sale-page so the regular Book Now page
   keeps the calm dark version.
   ========================================================= */
.jmy-book-now-sale-page .packages-promo-card.packages-promo-card--flash {
  background: linear-gradient(135deg,
    #f8e0bc 0%,
    #f0b8a8 25%,
    #dca0b0 50%,
    #b094bc 75%,
    #9080a0 100%);
  position: relative;
  overflow: hidden;
}
.jmy-book-now-sale-page .packages-promo-card--flash::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 248, 220, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 18% 78%, rgba(200, 180, 220, 0.32) 0%, transparent 55%);
  pointer-events: none;
}
.jmy-book-now-sale-page .packages-promo-card--flash > * {
  position: relative;
  z-index: 1;
}
/* Text — deep purple-brown for contrast across the full gradient range */
.jmy-book-now-sale-page .packages-promo-card--flash .packages-promo-eyebrow {
  color: #2a1c3a;
}
.jmy-book-now-sale-page .packages-promo-card--flash .packages-promo-heading {
  color: #1a0c28;
}
.jmy-book-now-sale-page .packages-promo-card--flash .packages-promo-heading em {
  color: #a04860;
}
.jmy-book-now-sale-page .packages-promo-card--flash .packages-promo-body {
  color: rgba(42, 28, 58, 0.85);
}
.jmy-book-now-sale-page .packages-promo-card--flash .packages-promo-link {
  color: #2a1c3a;
  border-top-color: rgba(60, 36, 72, 0.35);
}
.jmy-book-now-sale-page .packages-promo-card--flash .packages-promo-decor {
  color: rgba(60, 36, 72, 0.35);
}

/* Badge */
.packages-promo-flash-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(42, 28, 58, 0.1);
  border: 1px solid rgba(60, 36, 72, 0.4);
  border-radius: 30px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: #2a1c3a;
  margin-bottom: 18px;
  width: max-content;
  max-width: 100%;
}
.packages-promo-flash-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a04860;
  box-shadow: 0 0 8px rgba(160, 72, 96, 0.6);
  animation: flash-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes flash-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
@media (max-width: 600px) {
  .packages-promo-flash-badge {
    font-size: 10px;
    letter-spacing: 0.18em;
    padding: 6px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .packages-promo-flash-badge::before { animation: none !important; }
}

/* =========================================================
   v1.16.65 — Falling snow on Book Now Sale moon banner
   Three depth layers fall at different speeds for parallax.
   Negative animation-delays distribute flakes across time
   so the snowfield is fully populated on first load.
   Only the moon variant has snow — the sun variant stays
   clear, which gives night vs day a real visual difference.
   ========================================================= */
.banner-book-now-sale .bnsale-snow circle {
  will-change: transform;
}
.banner-book-now-sale .bnsale-snow-bg {
  animation: bnsale-snowfall-slow 20s linear infinite;
}
.banner-book-now-sale .bnsale-snow-mid {
  animation: bnsale-snowfall-med 14s linear infinite;
}
.banner-book-now-sale .bnsale-snow-fg {
  animation: bnsale-snowfall-fast 9s linear infinite;
}
.banner-book-now-sale .bnsale-snow-d1 { animation-delay: 0s; }
.banner-book-now-sale .bnsale-snow-d2 { animation-delay: -2.5s; }
.banner-book-now-sale .bnsale-snow-d3 { animation-delay: -5s; }
.banner-book-now-sale .bnsale-snow-d4 { animation-delay: -7.5s; }
.banner-book-now-sale .bnsale-snow-d5 { animation-delay: -10s; }
.banner-book-now-sale .bnsale-snow-d6 { animation-delay: -12.5s; }
.banner-book-now-sale .bnsale-snow-d7 { animation-delay: -15s; }
.banner-book-now-sale .bnsale-snow-d8 { animation-delay: -17.5s; }

@keyframes bnsale-snowfall-slow {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(10px, 550px); }
  100% { transform: translate(0, 1050px); }
}
@keyframes bnsale-snowfall-med {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-14px, 550px); }
  100% { transform: translate(0, 1050px); }
}
@keyframes bnsale-snowfall-fast {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(18px, 550px); }
  100% { transform: translate(0, 1050px); }
}

@media (prefers-reduced-motion: reduce) {
  .banner-book-now-sale .bnsale-snow circle {
    animation: none !important;
  }
}

/* =========================================================
   v1.16.67 — Homepage hot air balloon (alternate template)
   Reuses the balloon-drift-strong keyframe from the
   classes-index balloon — same gentle rocking drift Janet
   likes — but with its own transform-origin matched to the
   balloon's position on the homepage hero (1340, 460).
   Only the .home-hero variant with the balloon SVG is
   affected; the regular .home-hero stays untouched.
   ========================================================= */
.home-hero .banner-variant-sun .hero-balloon-sun {
  animation: balloon-drift-strong 9s ease-in-out infinite;
  transform-origin: 1420px 320px;
  transform-box: view-box;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .banner-variant-sun .hero-balloon-sun {
    animation: none !important;
  }
}