/* ========================================
   SACRED ACCESS — Modern Rebuild
   Deep teal/forest palette, organic + modern
   ======================================== */

:root,
[data-theme='light'] {
  /* Type Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Surfaces — transparent over gradient */
  --color-bg: transparent;
  --color-surface: rgba(255, 255, 255, 0.08);
  --color-surface-2: rgba(255, 255, 255, 0.12);
  --color-surface-offset: rgba(255, 255, 255, 0.05);
  --color-divider: rgba(0, 0, 0, 0.15);
  --color-border: rgba(0, 0, 0, 0.2);

  /* Text — dark for readability on gradient */
  --color-text: #171919;
  --color-text-muted: #2a2a2a;
  --color-text-faint: #4a4a4a;
  --color-text-inverse: #f6f1eb;

  /* Primary — dark for contrast on gradient */
  --color-primary: #000000;
  --color-primary-hover: #42413A;
  --color-primary-active: #2a2a2a;
  --color-primary-light: rgba(255, 255, 255, 0.1);
  --color-primary-highlight: rgba(255, 255, 255, 0.15);

  /* Accent — subtle on gradient */
  --color-accent: #045359;
  --color-accent-hover: #034248;
  --color-accent-light: rgba(4, 83, 89, 0.15);

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.25);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  /* Font families */
  --font-display: 'Zodiak', 'Georgia', serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;
}

[data-theme='dark'] {
  --color-bg: transparent;
  --color-surface: rgba(0, 0, 0, 0.15);
  --color-surface-2: rgba(0, 0, 0, 0.2);
  --color-surface-offset: rgba(0, 0, 0, 0.1);
  --color-divider: rgba(0, 0, 0, 0.25);
  --color-border: rgba(0, 0, 0, 0.3);

  --color-text: #f0ece6;
  --color-text-muted: #d6cfc4;
  --color-text-faint: #a09585;
  --color-text-inverse: #1a1612;

  --color-primary: #f0ece6;
  --color-primary-hover: #d6cfc4;
  --color-primary-active: #b8b0a4;
  --color-primary-light: rgba(0, 0, 0, 0.15);
  --color-primary-highlight: rgba(0, 0, 0, 0.2);

  --color-accent: #B8E3E0;
  --color-accent-hover: #9dd4d0;
  --color-accent-light: rgba(4, 83, 89, 0.2);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: transparent;
    --color-surface: rgba(0, 0, 0, 0.15);
    --color-surface-2: rgba(0, 0, 0, 0.2);
    --color-surface-offset: rgba(0, 0, 0, 0.1);
    --color-divider: rgba(0, 0, 0, 0.25);
    --color-border: rgba(0, 0, 0, 0.3);
    --color-text: #f0ece6;
    --color-text-muted: #d6cfc4;
    --color-text-faint: #a09585;
    --color-text-inverse: #1a1612;
    --color-primary: #f0ece6;
    --color-primary-hover: #d6cfc4;
    --color-primary-active: #b8b0a4;
    --color-primary-light: rgba(0, 0, 0, 0.15);
    --color-primary-highlight: rgba(0, 0, 0, 0.2);
    --color-accent: #B8E3E0;
    --color-accent-hover: #9dd4d0;
    --color-accent-light: rgba(4, 83, 89, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
}

/* ========================================
   GLOBAL LAYOUT
   ======================================== */

html {
  /* overflow-x: clip prevents horizontal scroll WITHOUT breaking position: sticky
     on descendants (unlike overflow-x: hidden, which creates a scroll container). */
  overflow-x: clip;
  max-width: 100vw;
}

body {
  overflow-x: clip;
  max-width: 100vw;
  background-color: #705204;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(180deg, #B8E3E0 0%, #705204 100%);
  z-index: -1;
}

[data-theme='dark'] body {
  background-color: #0d1f21;
}

[data-theme='dark'] body::before {
  background-image: linear-gradient(180deg, #1a3d40 0%, #0d1f21 100%);
}

.container {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.container--narrow {
  max-width: var(--content-default);
}

section {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
}

/* ========================================
   SPLASH SCREEN
   ======================================== */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #705204;
  background-image: linear-gradient(180deg, #B8E3E0 0%, #705204 100%);
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.splash::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #045359;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
  z-index: 1;
}

.splash.loading::after {
  opacity: 1;
}

.splash > * {
  position: relative;
  z-index: 2;
}

[data-theme='dark'] .splash {
  background: #705204;
  background-image: linear-gradient(180deg, #B8E3E0 0%, #705204 100%);
}

.splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash__logo {
  /* Scales smoothly: ~272px on small phones, up to ~560px on large screens. */
  width: clamp(17rem, 60vw, 35rem);
  max-width: 80vw;
  height: auto;
  margin-bottom: var(--space-6);
  border-radius: 100%;
  object-fit: cover;
  display: block;
  margin-inline: auto;
}

.splash__tagline {
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.375em;
  color: #171919;
  letter-spacing: 0.45rem;
  text-transform: lowercase;
  margin-bottom: var(--space-10);
  text-align: center;
  max-width: 90vw;
  margin-inline: auto;
  padding-inline: 1rem;
  word-spacing: 0.15em;
  line-height: 1.5;
}

/* Mobile: tighter letter-spacing so the tagline fits without overflowing */
@media (max-width: 640px) {
  .splash__tagline {
    font-size: 1.05em;
    letter-spacing: 0.18rem;
    padding-inline: 1.25rem;
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .splash__tagline {
    font-size: 0.95em;
    letter-spacing: 0.12rem;
  }
}

.splash__enter {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 4em;
  font-weight: 200;
  color: #FFFFFF;
  background-color: #000000;
  border: none;
  padding: 0.25em 0.75em;
  border-radius: 1.125rem;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.splash__enter:hover {
  background-color: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.splash__enter:active {
  transform: translateY(0);
}

/* ========================================
   HEADER / NAV
   ======================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: var(--space-3) 0;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}

.header__logo svg {
  width: 36px;
  height: 36px;
}

.header__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.header__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-interactive);
}

.header__link:hover {
  color: var(--color-primary);
}

.header__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: color var(--transition-interactive), background var(--transition-interactive);
}

.header__theme-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}

/* Mobile nav toggle */
.header__menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .header__menu-toggle {
    display: flex;
  }
  /* When mobile nav is open, disable header's backdrop-filter so the nav's
     position:fixed can escape the header's containing block (backdrop-filter
     creates a new containing block for fixed descendants). */
  body.nav-open .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .header__nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: 280px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    /* Opaque panel — don't use translucent --color-surface here */
    background: #f5f1ea;
    padding: var(--space-16) var(--space-6);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    overflow-y: auto;
  }
  [data-theme="dark"] .header__nav,
  .dark .header__nav {
    background: #1a1a1a;
  }
  .header__nav.open {
    transform: translateX(0);
  }
  .header__link {
    font-size: var(--text-base);
    padding: var(--space-3) 0;
    width: 100%;
  }
  .header__nav .header__theme-toggle {
    margin-top: var(--space-4);
  }
}

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

.nav-overlay.active {
  display: block;
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
  text-align: center;
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
}

.hero__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  max-width: 16ch;
  margin-inline: auto;
}

.hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ========================================
   BUTTONS (Bubbles)
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  transition:
    background var(--transition-interactive),
    color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
  cursor: pointer;
  border: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn--primary {
  background: #000000;
  color: #fff;
}

.btn--primary:hover {
  background: #42413A;
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary-light);
}

.btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.btn--ghost:hover {
  background: var(--color-surface-offset);
}

.btn--small {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
}

/* ========================================
   SECTION HEADER
   ======================================== */

.section-header {
  text-align: center;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}

.section-header__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.section-header__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-inline: auto;
}

/* ========================================
   PRACTITIONER CARDS
   ======================================== */

.practitioners {
  background: var(--color-surface);
}

.practitioner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.practitioner-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}

.practitioner-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.practitioner-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.practitioner-card__role {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.practitioner-card__bio {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.practitioner-card__bio p + p {
  margin-top: var(--space-4);
}

/* ========================================
   FAMILY BOND SECTION
   ======================================== */

.bond {
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.bond__line {
  width: 1.5px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--color-primary));
}

.bond__line:last-child {
  background: linear-gradient(to bottom, var(--color-primary), transparent);
}

.bond__content {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent-light) 100%);
  border: 1px solid var(--color-primary-highlight);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  max-width: var(--content-default);
  width: 100%;
  position: relative;
}

.bond__icon {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
  margin: 0 auto var(--space-4);
  opacity: 0.6;
}

.bond__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.bond__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.bond__text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 52ch;
  margin-inline: auto;
}

/* ========================================
   SERVICE BUBBLES (Clickable pills)
   ======================================== */

.service-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}

.service-bubble {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition:
    background var(--transition-interactive),
    color var(--transition-interactive),
    border-color var(--transition-interactive),
    transform var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

.service-bubble:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.service-bubble.active {
  background: #000000;
  border-color: #000000;
  color: #fff;
}

.service-bubble__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ========================================
   SERVICE DETAIL PANELS
   ======================================== */

.service-panel {
  display: none;
  animation: fadeIn 0.4s var(--ease-out);
}

.service-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.service-panel__intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-8);
}

/* ========================================
   SERVICE CARDS (within panels)
   ======================================== */

.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-6);
}

.service-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}

.service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.service-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.service-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.service-card__practitioner {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--space-1);
}

.service-card__price {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.service-card__price span {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-faint);
}

.service-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.service-card--featured {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ========================================
   COACHING PRICING TABLE
   ======================================== */

.coaching-table {
  max-width: 700px;
  margin-inline: auto;
  margin-top: var(--space-8);
}

.coaching-table__grid {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 1px;
  background: var(--color-divider);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-divider);
}

.coaching-table__cell {
  background: var(--color-surface-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.coaching-table__cell--head {
  background: var(--color-surface);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.coaching-table__cell--label {
  font-weight: 500;
  color: var(--color-text);
}

@media (max-width: 500px) {
  .coaching-table__grid {
    grid-template-columns: 1fr auto auto auto;
    font-size: var(--text-xs);
  }
  .coaching-table__cell {
    padding: var(--space-2) var(--space-3);
  }
}

/* ========================================
   CLASSES GRID
   ======================================== */

.class-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-6);
}

.class-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}

.class-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.class-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.class-card__price-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.class-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

.class-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  flex-grow: 1;
}

/* ========================================
   CONTACT SECTION
   ======================================== */

.contact {
  background: var(--color-surface);
}

.contact__inner {
  max-width: var(--content-default);
  margin-inline: auto;
  text-align: center;
}

.contact__channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-8);
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  text-decoration: none;
  transition:
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    transform var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

.contact-chip:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.contact-chip svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
  border-top: 1px solid var(--color-divider);
  padding: var(--space-8) 0;
  text-align: center;
}

.footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}

.footer__address,
.footer__hours,
.footer__copy {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.footer__address-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  transition: text-decoration-color 0.2s ease;
}

.footer__address-link:hover {
  text-decoration-color: currentColor;
}

.footer__address {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-2);
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */

.fade-in {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

@keyframes reveal-fade {
  to { opacity: 1; }
}

/* ========================================
   DIVIDER
   ======================================== */

.divider {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 999px;
  margin: 0 auto var(--space-6);
}

.practitioner-card::before {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  section {
    padding-block: clamp(var(--space-8), 6vw, var(--space-16));
  }

  .hero {
    padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  }

  .hero__title {
    font-size: var(--text-xl);
  }

  .practitioner-grid {
    gap: var(--space-6);
  }

  .service-nav {
    gap: var(--space-2);
  }
}

/* ========================================
   BOOK BUTTONS + HOURS + BOOKING UX
   ======================================== */

.service-card__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0.65rem 1.25rem;
  background: var(--color-primary);
  color: #f5f1ea !important;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  width: fit-content;
  align-self: flex-start;
}

[data-theme="dark"] .service-card__book {
  color: #1a1a1a !important;
}

.service-card__book:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Hero Book button inherits .btn--primary colors; don't override */
.service-card__book--hero,
.btn.service-card__book {
  color: #fff !important;
}

[data-theme="dark"] .service-card__book--hero,
[data-theme="dark"] .btn.service-card__book {
  color: #1a1a1a !important;
}

.service-card__book:active {
  transform: translateY(0);
}

.service-card__book--lg {
  padding: 0.85rem 1.75rem;
  font-size: var(--text-base);
}

.service-card__book--hero {
  /* Already uses .btn .btn--primary from base; just ensure no extra margin */
  margin-top: 0;
}

/* Header Book button — subtle but present */
.header__book {
  margin-left: var(--space-2);
  padding: 0.5rem 1.1rem;
  font-size: var(--text-xs);
  margin-top: 0;
}

/* Hero hours line under CTAs */
.hero__hours {
  margin: var(--space-4) auto 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-faint);
  letter-spacing: 0.03em;
  text-align: center;
  max-width: 540px;
  display: block;
}

/* Hours card in Contact section */
.hours-card {
  max-width: 480px;
  margin: var(--space-6) auto var(--space-5);
  padding: var(--space-5) var(--space-5);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-highlight);
  border-radius: 14px;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hours-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}

.hours-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
  max-width: 340px;
  margin-inline: auto;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--color-primary-highlight);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.hours-list li:last-child {
  border-bottom: none;
}

.hours-list li span:first-child {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hours-list li span:last-child {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.hours-list__closed span:last-child {
  color: var(--color-text-faint);
  font-style: italic;
  font-size: var(--text-xs);
}

.hours-list__closed span:first-child {
  color: var(--color-text-faint);
  font-weight: 500;
}

/* Footer hours */
.footer__hours {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.05em;
  text-align: center;
}

/* Ensure service cards stack book button at the bottom */
.service-card {
  display: flex;
  flex-direction: column;
}

.service-card__desc {
  flex: 1;
}

@media (max-width: 768px) {
  .header__book {
    margin: var(--space-2) 0 0;
    width: 100%;
  }
  .hero__hours {
    font-size: var(--text-xs);
  }
  .hours-card {
    padding: var(--space-4);
  }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonials {
  padding: var(--space-20) 0;
}

.testimonials__google-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.testimonials__google-badge:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
  background: var(--color-surface-3, var(--color-surface-2));
}

.testimonials__stars {
  display: inline-flex;
  gap: 2px;
  color: #f5b800;
}

.testimonials__stars svg {
  width: 16px;
  height: 16px;
}

.testimonials__google-text {
  color: var(--color-text-muted);
}

.testimonials__grid {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}

.testimonial {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.testimonial:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.testimonial[open] {
  border-color: var(--color-primary);
}

.testimonial__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}

.testimonial__summary::-webkit-details-marker {
  display: none;
}

.testimonial__summary::marker {
  display: none;
}

.testimonial__stars {
  display: inline-flex;
  gap: 2px;
  color: #f5b800;
}

.testimonial__stars svg {
  width: 14px;
  height: 14px;
}

.testimonial__preview {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
  font-style: normal;
}

.testimonial[open] .testimonial__preview {
  display: none;
}

.testimonial__attribution {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.testimonial__author {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.testimonial__toggle {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 180ms ease;
}

.testimonial:hover .testimonial__toggle {
  color: var(--color-primary);
}

.testimonial[open] .testimonial__toggle::after {
  content: 'Show less';
}

.testimonial[open] .testimonial__toggle {
  font-size: 0;
}

.testimonial[open] .testimonial__toggle::after {
  font-size: var(--text-xs);
}

.testimonial__full {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-text);
  line-height: 1.7;
  font-size: var(--text-base);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
}

.testimonial__full p + p {
  margin-top: var(--space-3);
}

@media (max-width: 768px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .testimonial__summary,
  .testimonial__full {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

/* ========================================
   ADDITIONS — 2026-05-10
   - Coaching package list inside service cards
   - Class card "Reserve a Spot" button
   - Cancellation policy callout
   ======================================== */

.service-card__packages {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 var(--space-4);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.service-card__packages li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.service-card__packages li:last-child {
  border-bottom: none;
}

.service-card__packages li span:first-child {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.service-card__packages li span:last-child {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.class-card__book {
  margin-top: var(--space-4);
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong, var(--color-border));
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.class-card__book:hover {
  background: var(--color-text);
  color: var(--color-surface);
  border-color: var(--color-text);
}

.policy-card {
  max-width: 560px;
  margin: var(--space-6) auto 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  text-align: center;
}

.policy-card__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-3);
}

.policy-card__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

.policy-card__text strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Hours card note (added 2026-05-10) */
.hours-card__note {
  margin-top: var(--space-3, 12px);
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted, #5a5a4f);
  text-align: center;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* ========== MID-PAGE CTA BAND ========== */
.cta-band {
  padding: var(--space-10) 0;
  background: linear-gradient(135deg, rgba(60, 100, 100, 0.06), rgba(120, 90, 50, 0.06));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.cta-band__inner {
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
}
.cta-band__eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
}
.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}
.cta-band__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-muted);
  margin: 0 0 var(--space-5);
  line-height: 1.6;
}
.cta-band__btn {
  display: inline-flex;
  margin: 0 auto;
}

/* Mentoring inquire link */
.service-card__inquire {
  margin-top: 1rem;
  font-family: var(--font-display, "Zodiak", serif);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.service-card__inquire a {
  color: var(--accent, #8a6d3b);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
}
.service-card__inquire a:hover {
  opacity: 0.7;
}

/* ===================================================
   Floating Social Rail — vertical pill, brand-color
   gradient hovers, breathing pulse to draw attention
   =================================================== */
.social-rail {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 12px;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(184, 133, 43, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 12px 40px rgba(40, 30, 15, 0.14),
    0 2px 6px rgba(184, 133, 43, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: rail-float 6s ease-in-out infinite;
}

@keyframes rail-float {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(2px); }
}

.social-rail__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #6b5530;
  background: linear-gradient(135deg, #fdf6e7 0%, #f3e3bd 100%);
  text-decoration: none;
  transition:
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.32s ease,
    color 0.25s ease;
  box-shadow:
    0 2px 6px rgba(184, 133, 43, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.social-rail__link::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(8px);
}

.social-rail__link svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.social-rail__link * {
  pointer-events: none;
}

.social-rail__link:hover {
  color: #fff;
  transform: scale(1.18) rotate(-4deg);
  box-shadow:
    0 8px 22px rgba(184, 133, 43, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.social-rail__link:hover svg {
  transform: scale(1.1);
}

.social-rail__link:hover::before {
  opacity: 0.6;
}

/* Brand-true gradients on hover for each platform */
.social-rail__link--instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.social-rail__link--instagram::before {
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
}

.social-rail__link--facebook:hover {
  background: linear-gradient(135deg, #1877f2 0%, #0a59c2 100%);
}
.social-rail__link--facebook::before {
  background: #1877f2;
}

.social-rail__link--tiktok:hover {
  background: linear-gradient(135deg, #25f4ee 0%, #161823 50%, #fe2c55 100%);
}
.social-rail__link--tiktok::before {
  background: linear-gradient(135deg, #25f4ee, #fe2c55);
}

.social-rail__link--youtube:hover {
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}
.social-rail__link--youtube::before {
  background: #ff0000;
}

.social-rail__link--email:hover {
  background: linear-gradient(135deg, #b8852b 0%, #8a5e1c 100%);
}
.social-rail__link--email::before {
  background: #b8852b;
}

.social-rail__label {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Soft attention pulse on first load — fades after 4 cycles */
.social-rail__link {
  animation: gentle-pulse 2.4s ease-out 2 1.2s;
}
@keyframes gentle-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(184, 133, 43, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
  50%      { box-shadow: 0 2px 6px rgba(184, 133, 43, 0.18), 0 0 0 8px rgba(184, 133, 43, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
}

/* Stagger the pulse so they ripple */
.social-rail__link:nth-child(2) { animation-delay: 1.4s; }
.social-rail__link:nth-child(3) { animation-delay: 1.6s; }
.social-rail__link:nth-child(4) { animation-delay: 1.8s; }
.social-rail__link:nth-child(5) { animation-delay: 2.0s; }

/* Mobile: bottom centered pill, smaller, no float anim */
@media (max-width: 768px) {
  .social-rail {
    left: 50%;
    top: auto;
    bottom: 14px;
    transform: translateX(-50%);
    flex-direction: row;
    padding: 10px 14px;
    gap: 8px;
    animation: none;
  }
  .social-rail__link {
    width: 42px;
    height: 42px;
  }
  .social-rail__link svg {
    width: 20px;
    height: 20px;
  }
  .social-rail__link:hover {
    transform: scale(1.12);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .social-rail,
  .social-rail__link {
    animation: none;
  }
  .social-rail__link:hover {
    transform: scale(1.08);
  }
}

/* ============================================================
   UX POLISH ROUND — Clickable cards, bottom tab nav, scrolled header
   ============================================================ */

/* ---- Header: solid + shadow once scrolled past hero ---- */
.header.header--scrolled {
  background: rgba(43, 38, 27, 0.92);  /* warm dark-amber tint */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] .header.header--scrolled,
.dark .header.header--scrolled {
  background: rgba(15, 14, 12, 0.92);
}

.header.header--scrolled .header__logo-text,
.header.header--scrolled .header__link {
  color: #f5efe1;
}

.header.header--scrolled .header__menu-toggle,
.header.header--scrolled .header__theme-toggle {
  color: #f5efe1;
}

/* Smooth color transition on header text */
.header__logo-text,
.header__link,
.header__menu-toggle,
.header__theme-toggle {
  transition: color 0.3s var(--ease-out);
}

/* ---- Clickable service cards ---- */
.service-card--clickable {
  cursor: pointer;
  position: relative;
  transition: transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out);
  border: 1px solid transparent;
}

.service-card--clickable:hover,
.service-card--clickable:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
  border-color: rgba(112, 82, 4, 0.35);
  outline: none;
}

.service-card--clickable:focus-visible {
  outline: 2px solid #705204;
  outline-offset: 3px;
}

.service-card--clickable:active {
  transform: translateY(-1px);
}

/* "Book this session" hint at bottom of clickable cards */
.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #705204;
  opacity: 0.75;
  transition: opacity 0.25s var(--ease-out), gap 0.25s var(--ease-out);
}

.service-card--clickable:hover .service-card__cta,
.service-card--clickable:focus-visible .service-card__cta {
  opacity: 1;
  gap: 0.7rem;
}

[data-theme='dark'] .service-card__cta,
.dark .service-card__cta {
  color: #e8c878;
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ---- Bottom tab nav: "Explore another offering" ---- */
.service-nav-bottom {
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-4) var(--space-4);
  text-align: center;
  border-top: 1px dashed rgba(112, 82, 4, 0.25);
}

.service-nav-bottom__label {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(43, 38, 27, 0.6);
  margin: 0 auto var(--space-4) auto;
  max-width: none;
  width: auto;
  text-align: center;
}

[data-theme='dark'] .service-nav-bottom__label,
.dark .service-nav-bottom__label {
  color: rgba(245, 239, 225, 0.55);
}

.service-nav-bottom__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.service-bubble-mini {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.15rem;
  border: 1px solid rgba(112, 82, 4, 0.35);
  background: rgba(255, 252, 240, 0.7);
  color: #2b261b;
  border-radius: 999px;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.22s var(--ease-out),
              transform 0.22s var(--ease-out),
              border-color 0.22s var(--ease-out),
              color 0.22s var(--ease-out);
}

.service-bubble-mini:hover,
.service-bubble-mini:focus-visible {
  background: #705204;
  border-color: #705204;
  color: #f5efe1;
  transform: translateY(-2px);
  outline: none;
}

[data-theme='dark'] .service-bubble-mini,
.dark .service-bubble-mini {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(232, 200, 120, 0.35);
  color: #f5efe1;
}

[data-theme='dark'] .service-bubble-mini:hover,
[data-theme='dark'] .service-bubble-mini:focus-visible,
.dark .service-bubble-mini:hover,
.dark .service-bubble-mini:focus-visible {
  background: #e8c878;
  border-color: #e8c878;
  color: #1a1612;
}

/* ---- Classes CTA: "Book a Class" mailto ---- */
.classes-cta {
  margin-top: var(--space-12);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, rgba(112, 82, 4, 0.06), rgba(232, 200, 120, 0.10));
  border: 1px solid rgba(112, 82, 4, 0.18);
  border-radius: 1.5rem;
}

.classes-cta__text {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 1.05rem;
  color: rgba(43, 38, 27, 0.78);
  max-width: 540px;
  margin: 0 auto var(--space-5);
  line-height: 1.55;
}

[data-theme='dark'] .classes-cta__text,
.dark .classes-cta__text {
  color: rgba(245, 239, 225, 0.78);
}

.classes-cta__btn {
  display: inline-block;
  padding: 0.95rem 2.4rem;
  background: #2b261b;
  color: #f5efe1;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.25s var(--ease-out),
              transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.classes-cta__btn:hover,
.classes-cta__btn:focus-visible {
  background: #705204;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(112, 82, 4, 0.3);
  outline: none;
}

[data-theme='dark'] .classes-cta,
.dark .classes-cta {
  background: linear-gradient(135deg, rgba(232, 200, 120, 0.08), rgba(112, 82, 4, 0.15));
  border-color: rgba(232, 200, 120, 0.25);
}

[data-theme='dark'] .classes-cta__btn,
.dark .classes-cta__btn {
  background: #e8c878;
  color: #1a1612;
}

[data-theme='dark'] .classes-cta__btn:hover,
.dark .classes-cta__btn:hover {
  background: #f5d99a;
}

/* Mobile tweaks for the bottom nav */
@media (max-width: 640px) {
  .service-bubble-mini {
    font-size: 0.85rem;
    padding: 0.5rem 0.95rem;
  }
  .service-nav-bottom {
    padding: var(--space-5) var(--space-2) var(--space-3);
  }
  .classes-cta {
    padding: var(--space-6) var(--space-4);
    margin-top: var(--space-8);
  }
  .classes-cta__btn {
    padding: 0.85rem 2rem;
  }
}

/* ============================================================
   UX POLISH ROUND v2 — Practitioner inquiry buttons + visible
   email everywhere, so visitors are never blocked by a broken
   mailto handler.
   ============================================================ */

/* --- Practitioner inquiry block (under each bio) --- */
.practitioner-card__inquire {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(112, 82, 4, 0.18);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.practitioner-card__ask-btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: rgba(43, 38, 27, 0.92);
  color: #f5efe1;
  text-decoration: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.practitioner-card__ask-btn:hover,
.practitioner-card__ask-btn:focus-visible {
  background: #1f1b13;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  outline: none;
}

.practitioner-card__email-line {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted, #5b5240);
  line-height: 1.4;
}

.practitioner-card__email-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.practitioner-card__email-link:hover {
  color: #2b261b;
}

/* Dark mode for practitioner inquiry */
[data-theme="dark"] .practitioner-card__inquire,
.dark .practitioner-card__inquire {
  border-top-color: rgba(245, 239, 225, 0.18);
}

[data-theme="dark"] .practitioner-card__ask-btn,
.dark .practitioner-card__ask-btn {
  background: rgba(245, 239, 225, 0.95);
  color: #1f1b13;
}

[data-theme="dark"] .practitioner-card__ask-btn:hover,
.dark .practitioner-card__ask-btn:hover {
  background: #fff;
  color: #000;
}

[data-theme="dark"] .practitioner-card__email-line,
.dark .practitioner-card__email-line {
  color: rgba(245, 239, 225, 0.7);
}

[data-theme="dark"] .practitioner-card__email-link:hover,
.dark .practitioner-card__email-link:hover {
  color: #fff;
}

/* --- Classes CTA: visible email under button --- */
.classes-cta__email {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  color: rgba(43, 38, 27, 0.7);
  text-align: center;
}

.classes-cta__email-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.classes-cta__email-link:hover {
  color: #2b261b;
}

[data-theme="dark"] .classes-cta__email,
.dark .classes-cta__email {
  color: rgba(245, 239, 225, 0.75);
}

[data-theme="dark"] .classes-cta__email-link:hover,
.dark .classes-cta__email-link:hover {
  color: #fff;
}

/* --- Mentoring card visible email under "Email to inquire" --- */
.service-card__inquire-email {
  margin: 0.15rem 0 0 0;
  font-size: 0.78rem;
  color: var(--text-muted, #5b5240);
  word-break: break-all;
  line-height: 1.4;
}

[data-theme="dark"] .service-card__inquire-email,
.dark .service-card__inquire-email {
  color: rgba(245, 239, 225, 0.6);
}

/* --- Footer contact line --- */
.footer__contact {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.9rem;
  text-align: center;
}

.footer__contact-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: opacity 0.2s var(--ease-out);
}

.footer__contact-link:hover {
  opacity: 0.75;
}

/* --- Mobile tweaks --- */
@media (max-width: 640px) {
  .practitioner-card__inquire {
    align-items: stretch;
  }
  .practitioner-card__ask-btn {
    text-align: center;
    width: 100%;
  }
  .practitioner-card__email-line {
    text-align: center;
    font-size: 0.82rem;
  }
  .footer__contact {
    font-size: 0.82rem;
    line-height: 1.6;
  }
}

/* ---- Clickable class cards (Classes / Workshops / Events) ---- */
/* Mirrors .service-card--clickable so the booking interaction feels identical. */
.class-card--clickable {
  cursor: pointer;
  position: relative;
  transition: transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out);
  border: 1px solid transparent;
}

.class-card--clickable:hover,
.class-card--clickable:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
  border-color: rgba(112, 82, 4, 0.35);
  outline: none;
}

.class-card--clickable:focus-visible {
  outline: 2px solid #705204;
  outline-offset: 3px;
}

.class-card--clickable:active {
  transform: translateY(-1px);
}

/* "Reserve a spot →" cue at the bottom of every class card */
.class-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #705204;
  opacity: 0.78;
  transition: opacity 0.25s var(--ease-out), gap 0.25s var(--ease-out);
}

.class-card--clickable:hover .class-card__cta,
.class-card--clickable:focus-visible .class-card__cta {
  opacity: 1;
  gap: 0.7rem;
}

[data-theme='dark'] .class-card__cta,
.dark .class-card__cta {
  color: #e8c878;
  border-top-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .class-card__cta {
    font-size: 0.92rem;
  }
}

/* Hours card — By-appointment subhead */
.hours-card__subhead {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #705204;
  opacity: 0.78;
}
.hours-list--appt li {
  opacity: 0.92;
}
[data-theme='dark'] .hours-card__subhead,
.dark .hours-card__subhead {
  color: #e8c878;
}

/* Hours card — By-appointment rows with inline email buttons */
.appt-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.appt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(112, 82, 4, 0.06);
  border: 1px solid rgba(112, 82, 4, 0.14);
  border-radius: 10px;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.appt-row:hover {
  background: rgba(112, 82, 4, 0.1);
  border-color: rgba(112, 82, 4, 0.28);
}
.appt-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.appt-row__who {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-ink, #2c241a);
}
.appt-row__when {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 0.88rem;
  color: var(--color-ink, #2c241a);
  opacity: 0.72;
}
.appt-row__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.95rem;
  background: #705204;
  color: #fff7e3;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.appt-row__btn:hover,
.appt-row__btn:focus-visible {
  background: #8b6608;
  transform: translateY(-1px);
  outline: none;
}
.appt-row__btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(112, 82, 4, 0.25);
}

[data-theme='dark'] .appt-row,
.dark .appt-row {
  background: rgba(232, 200, 120, 0.08);
  border-color: rgba(232, 200, 120, 0.18);
}
[data-theme='dark'] .appt-row:hover,
.dark .appt-row:hover {
  background: rgba(232, 200, 120, 0.14);
  border-color: rgba(232, 200, 120, 0.32);
}
[data-theme='dark'] .appt-row__who,
.dark .appt-row__who,
[data-theme='dark'] .appt-row__when,
.dark .appt-row__when {
  color: #f5ead0;
}
[data-theme='dark'] .appt-row__btn,
.dark .appt-row__btn {
  background: #e8c878;
  color: #2c241a;
}
[data-theme='dark'] .appt-row__btn:hover,
.dark .appt-row__btn:hover {
  background: #f0d48d;
}

@media (max-width: 520px) {
  .appt-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .appt-row__btn {
    justify-content: center;
  }
}

/* Practitioner card — action row (View All Offerings + Ask a Question) */
.practitioner-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  align-items: center;
}

/* Primary CTA — "View All Offerings" → opens practitioner's Calendly */
.practitioner-card__view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  background: #705204;
  color: #fff7e3;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.practitioner-card__view-btn:hover,
.practitioner-card__view-btn:focus-visible {
  background: #8b6608;
  transform: translateY(-1px);
  outline: none;
}
.practitioner-card__view-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(112, 82, 4, 0.25);
}

/* Dark mode */
[data-theme='dark'] .practitioner-card__view-btn,
.dark .practitioner-card__view-btn {
  background: #e8c878;
  color: #2c241a;
}
[data-theme='dark'] .practitioner-card__view-btn:hover,
.dark .practitioner-card__view-btn:hover {
  background: #f0d48d;
}

@media (max-width: 520px) {
  .practitioner-card__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .practitioner-card__view-btn,
  .practitioner-card__ask-btn {
    justify-content: center;
    text-align: center;
  }
}

/* Service card — dual variant buttons (In Person / Zoom) */
.service-card__variants {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.service-card__variant-btn {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  background: #705204;
  color: #fff7e3;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid #705204;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.service-card__variant-btn:hover,
.service-card__variant-btn:focus-visible {
  background: #8b6608;
  border-color: #8b6608;
  transform: translateY(-1px);
  outline: none;
}
.service-card__variant-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(112, 82, 4, 0.25);
}

/* Secondary (Zoom) — outlined */
.service-card__variant-btn--secondary {
  background: transparent;
  color: #705204;
}
.service-card__variant-btn--secondary:hover,
.service-card__variant-btn--secondary:focus-visible {
  background: rgba(112, 82, 4, 0.08);
  color: #5a4203;
  border-color: #8b6608;
}

/* Dark mode */
[data-theme='dark'] .service-card__variants,
.dark .service-card__variants {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .service-card__variant-btn,
.dark .service-card__variant-btn {
  background: #e8c878;
  color: #2c241a;
  border-color: #e8c878;
}
[data-theme='dark'] .service-card__variant-btn:hover,
.dark .service-card__variant-btn:hover {
  background: #f0d48d;
  border-color: #f0d48d;
}
[data-theme='dark'] .service-card__variant-btn--secondary,
.dark .service-card__variant-btn--secondary {
  background: transparent;
  color: #e8c878;
  border-color: rgba(232, 200, 120, 0.45);
}
[data-theme='dark'] .service-card__variant-btn--secondary:hover,
.dark .service-card__variant-btn--secondary:hover {
  background: rgba(232, 200, 120, 0.12);
  color: #f5ead0;
  border-color: #e8c878;
}

@media (max-width: 360px) {
  .service-card__variants {
    flex-direction: column;
  }
}

/* On mobile, give pills equal width with a slight horizontal gap */
@media (max-width: 640px) {
  .service-card__variant-btn {
    padding: 0.65rem 0.8rem;
    font-size: 0.88rem;
  }
}

/* ========================================
   CLASS ROSTER (data-driven rebuild)
   ======================================== */

.class-roster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .class-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.class-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  position: relative;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

@media (min-width: 720px) {
  .class-row {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
}

.class-row--clickable {
  cursor: pointer;
  outline: none;
}

.class-row--clickable:hover,
.class-row--clickable:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-surface);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.class-row--clickable:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- main column --- */
.class-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.class-row__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.class-row__name {
  font-family: var(--font-display);
  font-size: var(--text-xl, 1.35rem);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.class-row__price {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-primary-light);
  border: 1px solid var(--color-divider);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full, 999px);
  white-space: nowrap;
  flex-shrink: 0;
}

.class-row__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0;
  letter-spacing: 0.02em;
}

.class-row__note {
  color: var(--color-accent);
  font-weight: 600;
}

.class-row__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

.class-row__learn {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.class-row__learn li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.class-row__learn li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* --- schedule column --- */
.class-row__schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl, 1.1rem);
  align-self: start;
}

.class-row__schedule-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin: 0;
}

.class-row__dates {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.class-row__dates li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 0.85rem;
  line-height: 1;
}

.class-row__date-month {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.class-row__date-day {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.class-row__time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  letter-spacing: 0.02em;
}

.class-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: gap 0.2s ease, color 0.2s ease;
}

.class-row--clickable:hover .class-row__cta,
.class-row--clickable:focus-visible .class-row__cta {
  color: var(--color-accent);
  gap: 0.65rem;
}

/* --- dark mode --- */
[data-theme='dark'] .class-row,
.dark .class-row {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(232, 200, 120, 0.15);
}

[data-theme='dark'] .class-row--clickable:hover,
[data-theme='dark'] .class-row--clickable:focus-visible,
.dark .class-row--clickable:hover,
.dark .class-row--clickable:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: #e8c878;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

[data-theme='dark'] .class-row--clickable:focus-visible,
.dark .class-row--clickable:focus-visible {
  outline-color: #e8c878;
}

[data-theme='dark'] .class-row__price,
.dark .class-row__price {
  color: #e8c878;
  background: rgba(232, 200, 120, 0.12);
  border-color: rgba(232, 200, 120, 0.3);
}

[data-theme='dark'] .class-row__note,
.dark .class-row__note {
  color: #e8c878;
}

[data-theme='dark'] .class-row__learn li::before,
.dark .class-row__learn li::before {
  background: #e8c878;
}

[data-theme='dark'] .class-row__schedule,
.dark .class-row__schedule {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(232, 200, 120, 0.18);
}

[data-theme='dark'] .class-row__dates li,
.dark .class-row__dates li {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(232, 200, 120, 0.2);
}

[data-theme='dark'] .class-row__date-month,
.dark .class-row__date-month {
  color: #e8c878;
}

[data-theme='dark'] .class-row--clickable:hover .class-row__cta,
[data-theme='dark'] .class-row--clickable:focus-visible .class-row__cta,
.dark .class-row--clickable:hover .class-row__cta,
.dark .class-row--clickable:focus-visible .class-row__cta {
  color: #e8c878;
}

/* --- mobile tighten --- */
@media (max-width: 540px) {
  .class-row {
    padding: var(--space-5);
  }
  .class-row__name {
    font-size: var(--text-lg);
  }
  .class-row__dates li {
    min-width: 48px;
    padding: var(--space-2);
  }
  .class-row__date-day {
    font-size: 1.25rem;
  }
}

/* ========================================
   CLASS ROSTER — design polish (next session highlight)
   ======================================== */

.class-row__rule {
  display: block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
  margin-top: 2px;
  margin-bottom: 2px;
}

.class-row__ornament {
  display: inline-block;
  color: var(--color-accent);
  margin-right: 0.35rem;
  font-size: 0.85em;
  line-height: 1;
  transform: translateY(-1px);
}

.class-row__next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent);
  border-radius: 0.9rem;
  line-height: 1;
}

.class-row__next-month {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.class-row__next-day {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 0.95;
  color: var(--color-text);
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.class-row__next-weekday {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 0.4rem;
}

.class-row__then-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-faint);
  margin: var(--space-2) 0 calc(var(--space-1) * -1);
  opacity: 0.85;
}

/* Slim the chips since they're now secondary (already styled above
   in .class-row__dates li — just refine for the "then" context) */
.class-row__dates li {
  min-width: 46px;
  padding: 0.4rem 0.7rem;
}
.class-row__date-day {
  font-size: 1.15rem;
}

/* Dark mode — next-up panel */
[data-theme='dark'] .class-row__next,
.dark .class-row__next {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(232, 200, 120, 0.22);
  border-left-color: #e8c878;
}
[data-theme='dark'] .class-row__next-month,
.dark .class-row__next-month {
  color: #e8c878;
}
[data-theme='dark'] .class-row__rule,
.dark .class-row__rule {
  background: linear-gradient(90deg, #e8c878 0%, transparent 100%);
}
[data-theme='dark'] .class-row__ornament,
.dark .class-row__ornament {
  color: #e8c878;
}

/* Mobile compaction */
@media (max-width: 540px) {
  .class-row__next-day {
    font-size: 2.1rem;
  }
  .class-row__next {
    padding: var(--space-3);
  }
}

/* ===========================================================
   SHARED LINEAGE — Flight Scene → Logo Morph (v2, slower)

   The eagle flies in from the left and the owl from the right.
   They travel slowly across the sky, meet at center, hover for
   a beat, then dissolve into light from which the Sacred Access
   emblem blooms. After the emblem settles, clicking it scrolls
   to and spotlights the Sacred Access Experience card.

   Total runtime: ~8.5 seconds. Designed to be watchable.
   =========================================================== */

.bond__scene {
  position: relative;
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto var(--space-6);
  aspect-ratio: 760 / 440;          /* TALLER — birds get real presence */
  overflow: visible;
  isolation: isolate;

  /* Reset button defaults */
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;

  border-radius: var(--radius-2xl);
  transition: transform 0.45s ease;
}

.bond__scene:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 8px;
}

/* Soft sky wash behind everything */
.bond__sky {
  position: absolute;
  inset: 6%;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(184, 227, 224, 0.28) 0%,
    transparent 65%
  );
  z-index: 0;
  pointer-events: none;
}

/* Central halo — "light of meeting" */
.bond__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%) scale(0.4);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 245, 220, 0.9) 0%,
    rgba(184, 227, 224, 0.45) 30%,
    rgba(184, 227, 224, 0) 72%
  );
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  filter: blur(2px);
}

/* Twinkle stars */
.bond__star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
  z-index: 2;
  box-shadow: 0 0 6px rgba(255, 245, 220, 0.55);
}
.bond__star--1 { left: 22%; top: 18%; }
.bond__star--2 { left: 38%; top: 80%; width: 2px; height: 2px; }
.bond__star--3 { left: 50%; top: 12%; width: 2px; height: 2px; }
.bond__star--4 { left: 62%; top: 85%; width: 2px; height: 2px; }
.bond__star--5 { left: 78%; top: 22%; }
.bond__star--6 { left: 14%; top: 60%; width: 2px; height: 2px; }
.bond__star--7 { left: 86%; top: 60%; width: 2px; height: 2px; }

/* Birds — sized large so they're unmistakably present.
   GPU-promoted with translate3d + backface-visibility for buttery motion.
   No mid-flight scale or rotation changes — eliminates shimmer/jitter. */
.bond__bird {
  position: absolute;
  top: 50%;
  height: 64%;
  width: auto;
  z-index: 3;
  filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22));
  pointer-events: none;
  opacity: 0;                        /* hidden until animation runs */
  will-change: transform, opacity, filter;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.bond__bird--eagle {
  /* Anchor at center; transforms move it left/right */
  left: 50%;
  /* Start just off the left edge of the scene */
  transform: translate3d(-160%, -50%, 0);
}

.bond__bird--owl {
  left: 50%;
  transform: translate3d(160%, -50%, 0);
}

/* The emblem (Sacred Access logo) — hidden until the morph */
.bond__emblem {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%) scale(0.3) rotate(-12deg);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(45, 35, 20, 0.25));
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.4s ease;
}

/* Cue caption — appears below emblem on hover/focus once arrived */
.bond__cue {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translate(-50%, 12px);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 14px rgba(45, 35, 20, 0.1);
}

/* Replay button — lives just below the scene, lets the user re-watch */
.bond__replay {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 auto var(--space-5);
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, var(--color-primary));
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease,
              background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bond__replay svg {
  width: 14px;
  height: 14px;
}
/* Only reveal the replay button once the emblem has arrived */
.bond.is-settled .bond__replay {
  opacity: 1;
  transform: translateY(0);
}
.bond__replay:hover,
.bond__replay:focus-visible {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-primary);
  outline: none;
}

/* =================================================================
   Choreography (triggered when .bond gets .is-visible)

   Timeline (seconds):
   0.0  Sky + stars present (faint)
   0.2  Eagle starts flying in from the left
   0.5  Owl starts flying in from the right
   1.8  Both birds visible mid-flight
   3.8  Birds reach center, overlapping, hovering
   4.6  Halo begins to bloom behind them
   5.4  Birds start dissolving outward into light
   6.4  Birds fully faded
   6.0  Emblem begins emerging from the halo (overlaps)
   7.6  Emblem fully settled
   8.5+ Emblem breathes gently, halo breathes gently, forever
   ================================================================= */

/* Eagle + Owl: ONE smooth uniform fly-in — same delay, same duration, same easing.
   The two birds glide in together from opposite sides, dock at a visible meeting
   point side-by-side, then dissolve together into the halo bloom.
   Only translate-X + opacity animate (no scale, no rotation) — eliminates shimmer
   and gives a perfectly smooth raster-image flight. */
.bond.is-visible .bond__bird--eagle,
.bond.is-visible .bond__bird--owl {
  animation-duration: 5.6s;
  animation-delay: 0.3s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); /* smooth ease-out */
  animation-fill-mode: forwards;
}

.bond.is-visible .bond__bird--eagle {
  animation-name: eagle-flight;
}

.bond.is-visible .bond__bird--owl {
  animation-name: owl-flight;
}

/* Eagle flies left-to-right, ending just LEFT of center (visible meeting position).
   Dock holds briefly, then both birds dissolve together with a soft glow. */
@keyframes eagle-flight {
  0% {
    opacity: 0;
    transform: translate3d(-180%, -50%, 0);
    filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22));
  }
  10% {
    opacity: 1;
    transform: translate3d(-160%, -50%, 0);
    filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22));
  }
  78% {
    /* Docked just left of center — visibly distinct from owl */
    opacity: 1;
    transform: translate3d(-48%, -50%, 0);
    filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22));
  }
  92% {
    /* Still visible, glow starting to overtake — sets up the dissolve */
    opacity: 0.85;
    transform: translate3d(-44%, -50%, 0);
    filter: drop-shadow(0 0 24px rgba(255, 245, 220, 0.7));
  }
  100% {
    /* Dissolved into the halo's light */
    opacity: 0;
    transform: translate3d(-40%, -50%, 0);
    filter: drop-shadow(0 0 40px rgba(255, 245, 220, 0.95));
  }
}

@keyframes owl-flight {
  0% {
    opacity: 0;
    transform: translate3d(180%, -50%, 0);
    filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22));
  }
  10% {
    opacity: 1;
    transform: translate3d(160%, -50%, 0);
    filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22));
  }
  78% {
    /* Docked just right of center — mirrors the eagle */
    opacity: 1;
    transform: translate3d(48%, -50%, 0);
    filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22));
  }
  92% {
    opacity: 0.85;
    transform: translate3d(44%, -50%, 0);
    filter: drop-shadow(0 0 24px rgba(255, 245, 220, 0.7));
  }
  100% {
    opacity: 0;
    transform: translate3d(40%, -50%, 0);
    filter: drop-shadow(0 0 40px rgba(255, 245, 220, 0.95));
  }
}

/* Halo: blooms behind the birds right as they dock — they meet IN the light.
   Bloom peaks during the dissolve window so the absorption reads clearly. */
.bond.is-visible .bond__halo {
  animation:
    halo-bloom 2.4s ease-out 4.6s forwards,
    halo-breathe 5s ease-in-out 7.6s infinite;
}

@keyframes halo-bloom {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
}

@keyframes halo-breathe {
  0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.05); }
}

/* Emblem: emerges from the halo right as the birds finish dissolving */
.bond.is-visible .bond__emblem {
  animation:
    emblem-emerge 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 6.0s forwards,
    emblem-breathe 5s ease-in-out 8.2s infinite;
}

@keyframes emblem-emerge {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-12deg);
    filter: drop-shadow(0 0 50px rgba(255, 245, 220, 0.95)) blur(8px);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1) rotate(2deg);
    filter: drop-shadow(0 0 28px rgba(255, 245, 220, 0.75)) blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    filter: drop-shadow(0 12px 24px rgba(45, 35, 20, 0.25));
  }
}

@keyframes emblem-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.025); }
}

/* Stars twinkle through and after the meeting */
.bond.is-visible .bond__star {
  animation: star-twinkle 3.2s ease-in-out infinite;
}
.bond.is-visible .bond__star--1 { animation-delay: 4.0s; }
.bond.is-visible .bond__star--2 { animation-delay: 4.4s; }
.bond.is-visible .bond__star--3 { animation-delay: 4.8s; }
.bond.is-visible .bond__star--4 { animation-delay: 5.2s; }
.bond.is-visible .bond__star--5 { animation-delay: 5.6s; }
.bond.is-visible .bond__star--6 { animation-delay: 4.6s; }
.bond.is-visible .bond__star--7 { animation-delay: 5.0s; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

/* =====================  Hover / Focus / Active  ===================== */
/* Only show the cue once the emblem has fully arrived (.is-settled) */
.bond.is-settled .bond__scene:hover .bond__emblem,
.bond.is-settled .bond__scene:focus-visible .bond__emblem {
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 16px 30px rgba(45, 35, 20, 0.32))
          drop-shadow(0 0 20px rgba(255, 245, 220, 0.6));
  animation-play-state: paused;
}

.bond.is-settled .bond__scene:hover .bond__halo,
.bond.is-settled .bond__scene:focus-visible .bond__halo {
  opacity: 0.95;
  transform: translate(-50%, -50%) scale(1.12);
  animation-play-state: paused;
}

.bond.is-settled .bond__scene:hover .bond__cue,
.bond.is-settled .bond__scene:focus-visible .bond__cue {
  opacity: 1;
  transform: translate(-50%, 0);
}

.bond.is-settled .bond__scene:active .bond__emblem {
  transform: translate(-50%, -50%) scale(1.02);
  transition: transform 0.1s ease;
}

/* =====================  Dark Mode  ===================== */
[data-theme='dark'] .bond__sky,
.dark .bond__sky {
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(232, 200, 120, 0.2) 0%,
    transparent 65%
  );
}

[data-theme='dark'] .bond__halo,
.dark .bond__halo {
  background: radial-gradient(
    circle,
    rgba(232, 200, 120, 0.65) 0%,
    rgba(232, 200, 120, 0.28) 30%,
    rgba(232, 200, 120, 0) 72%
  );
}

[data-theme='dark'] .bond__star,
.dark .bond__star {
  background: #e8c878;
  box-shadow: 0 0 6px rgba(232, 200, 120, 0.7);
}

[data-theme='dark'] .bond__bird,
.dark .bond__bird {
  filter: invert(0.92) brightness(1.05)
          drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

[data-theme='dark'] .bond__cue,
.dark .bond__cue {
  color: #f5ead0;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(232, 200, 120, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

[data-theme='dark'] .bond__replay,
.dark .bond__replay {
  color: rgba(245, 234, 208, 0.7);
  border-color: rgba(232, 200, 120, 0.3);
}
[data-theme='dark'] .bond__replay:hover,
[data-theme='dark'] .bond__replay:focus-visible,
.dark .bond__replay:hover,
.dark .bond__replay:focus-visible {
  background: rgba(232, 200, 120, 0.1);
  color: #f5ead0;
  border-color: rgba(232, 200, 120, 0.6);
}

[data-theme='dark'] .bond.is-settled .bond__scene:hover .bond__emblem,
[data-theme='dark'] .bond.is-settled .bond__scene:focus-visible .bond__emblem,
.dark .bond.is-settled .bond__scene:hover .bond__emblem,
.dark .bond.is-settled .bond__scene:focus-visible .bond__emblem {
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 24px rgba(232, 200, 120, 0.55));
}

/* Hide the old icon class (legacy) */
.bond__icon {
  display: none;
}

/* =====================  Responsive  ===================== */
@media (max-width: 720px) {
  .bond__scene {
    aspect-ratio: 760 / 480;
    max-width: 100%;
  }
  .bond__bird {
    height: 58%;
  }
  .bond__emblem {
    width: 170px;
    height: 170px;
  }
  .bond__halo {
    width: 220px;
    height: 220px;
  }
  /* Tablet/mobile: pull dock points inward so both birds stay fully on-screen */
  .bond.is-visible .bond__bird--eagle {
    animation-name: eagle-flight-mobile;
  }
  .bond.is-visible .bond__bird--owl {
    animation-name: owl-flight-mobile;
  }
}

@media (max-width: 480px) {
  .bond__scene {
    aspect-ratio: 1 / 0.78;
  }
  .bond__bird {
    height: 50%;
  }
  .bond__emblem {
    width: 140px;
    height: 140px;
  }
  .bond__halo {
    width: 180px;
    height: 180px;
  }
  .bond__cue {
    font-size: 0.62rem;
    padding: 0.4rem 0.75rem;
    letter-spacing: 0.1em;
  }
  .bond__replay {
    font-size: 0.62rem;
    padding: 0.4rem 0.85rem;
    letter-spacing: 0.1em;
  }
}

/* Mobile keyframes — dock the birds closer to center so both are fully visible. */
@keyframes eagle-flight-mobile {
  0%   { opacity: 0; transform: translate3d(-180%, -50%, 0); filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22)); }
  10%  { opacity: 1; transform: translate3d(-160%, -50%, 0); filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22)); }
  78%  { opacity: 1; transform: translate3d(-32%, -50%, 0); filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22)); }
  92%  { opacity: 0.85; transform: translate3d(-28%, -50%, 0); filter: drop-shadow(0 0 24px rgba(255, 245, 220, 0.7)); }
  100% { opacity: 0; transform: translate3d(-24%, -50%, 0); filter: drop-shadow(0 0 40px rgba(255, 245, 220, 0.95)); }
}

@keyframes owl-flight-mobile {
  0%   { opacity: 0; transform: translate3d(180%, -50%, 0); filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22)); }
  10%  { opacity: 1; transform: translate3d(160%, -50%, 0); filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22)); }
  78%  { opacity: 1; transform: translate3d(32%, -50%, 0); filter: drop-shadow(0 8px 16px rgba(45, 35, 20, 0.22)); }
  92%  { opacity: 0.85; transform: translate3d(28%, -50%, 0); filter: drop-shadow(0 0 24px rgba(255, 245, 220, 0.7)); }
  100% { opacity: 0; transform: translate3d(24%, -50%, 0); filter: drop-shadow(0 0 40px rgba(255, 245, 220, 0.95)); }
}

/* =====================  Reduced Motion  ===================== */
/* Skip the flight — go straight to the final emblem composition. */
@media (prefers-reduced-motion: reduce) {
  .bond.is-visible .bond__bird--eagle,
  .bond.is-visible .bond__bird--owl {
    animation: none;
    opacity: 0;
  }
  .bond.is-visible .bond__halo {
    animation: none;
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }
  .bond.is-visible .bond__emblem {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 12px 24px rgba(45, 35, 20, 0.25));
  }
  .bond.is-visible .bond__star {
    animation: none;
    opacity: 0.65;
  }
  .bond__replay {
    /* Always show replay button when reduced motion is on */
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================================================
   Spotlight pulse — applied to .service-card--featured when the
   lineage emblem is clicked. Gold ring outline + subtle scale.
   =============================================================== */
.service-card--featured {
  transition: box-shadow 0.4s ease, transform 0.4s ease, outline-color 0.4s ease;
}

.service-card--featured.is-spotlight {
  animation: spotlight-pulse 2.8s ease-out;
  position: relative;
  z-index: 2;
}

@keyframes spotlight-pulse {
  0% {
    box-shadow:
      0 8px 28px rgba(45, 35, 20, 0.12),
      0 0 0 0 rgba(212, 175, 55, 0.0);
    transform: translateY(0) scale(1);
  }
  15% {
    box-shadow:
      0 18px 48px rgba(45, 35, 20, 0.22),
      0 0 0 6px rgba(212, 175, 55, 0.45),
      0 0 36px 8px rgba(212, 175, 55, 0.35);
    transform: translateY(-4px) scale(1.02);
  }
  55% {
    box-shadow:
      0 16px 42px rgba(45, 35, 20, 0.2),
      0 0 0 4px rgba(212, 175, 55, 0.35),
      0 0 28px 6px rgba(212, 175, 55, 0.22);
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    box-shadow:
      0 8px 28px rgba(45, 35, 20, 0.12),
      0 0 0 0 rgba(212, 175, 55, 0.0);
    transform: translateY(0) scale(1);
  }
}

[data-theme="dark"] .service-card--featured.is-spotlight {
  animation: spotlight-pulse-dark 2.8s ease-out;
}

@keyframes spotlight-pulse-dark {
  0% {
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.4),
      0 0 0 0 rgba(232, 196, 90, 0.0);
    transform: translateY(0) scale(1);
  }
  15% {
    box-shadow:
      0 18px 48px rgba(0, 0, 0, 0.55),
      0 0 0 6px rgba(232, 196, 90, 0.55),
      0 0 40px 10px rgba(232, 196, 90, 0.45);
    transform: translateY(-4px) scale(1.02);
  }
  55% {
    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.5),
      0 0 0 4px rgba(232, 196, 90, 0.4),
      0 0 30px 6px rgba(232, 196, 90, 0.28);
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.4),
      0 0 0 0 rgba(232, 196, 90, 0.0);
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card--featured.is-spotlight {
    animation: none;
    box-shadow:
      0 12px 32px rgba(45, 35, 20, 0.18),
      0 0 0 3px rgba(212, 175, 55, 0.4);
  }
  [data-theme="dark"] .service-card--featured.is-spotlight {
    animation: none;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.5),
      0 0 0 3px rgba(232, 196, 90, 0.5);
  }
}

/* ===================================================================
   Lineage Marks — eagle (Angela) + owl (Samantha)
   -------------------------------------------------------------------
   Small silhouette emblems that quietly mark Angela's vs Samantha's
   territory across the site. The same gold mark repeats everywhere,
   becoming a subtle visual language for the family lineage.

   - .lineage-mark      : base inline mark (used in "with X" labels)
   - .lineage-mark--lg  : larger version (practitioner card watermark,
                          lineage card corners)
   - .lineage-mark--breathe : gentle 5s scale loop (lineage card only)
   =================================================================== */

.lineage-mark {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.78;
  filter: drop-shadow(0 1px 1px rgba(45, 35, 20, 0.12));
  pointer-events: none;
}

.lineage-mark--eagle {
  background-image: url('./assets/mark-eagle-sm.png');
  width: 1.35em;  /* eagle silhouette is wider than tall */
}
.lineage-mark--owl {
  background-image: url('./assets/mark-owl-sm.png');
  width: 1.35em;
}

/* When both birds appear together (joint offerings) */
.lineage-mark--pair {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  margin-right: 0.4em;
  vertical-align: -0.15em;
}
.lineage-mark--pair .lineage-mark {
  margin-right: 0;
}

/* Dark mode: slightly brighter so the gold reads against dark surfaces */
[data-theme="dark"] .lineage-mark {
  opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* ---------- Practitioner-card watermark ---------- */
.practitioner-card {
  position: relative;
  overflow: hidden;
}
.practitioner-card__sigil {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 56px;
  height: 38px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.22;
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
}
.practitioner-card__sigil--eagle {
  background-image: url('./assets/mark-eagle.png');
}
.practitioner-card__sigil--owl {
  background-image: url('./assets/mark-owl.png');
}
.practitioner-card:hover .practitioner-card__sigil,
.practitioner-card:focus-within .practitioner-card__sigil {
  opacity: 0.7;
  transform: translateY(-2px);
}
[data-theme="dark"] .practitioner-card__sigil {
  opacity: 0.35;
}
[data-theme="dark"] .practitioner-card:hover .practitioner-card__sigil {
  opacity: 0.85;
}

/* ---------- Lineage card perched birds ---------- */
.bond {
  position: relative;
}
.bond__content {
  position: relative;
}
.bond__sigil {
  position: absolute;
  top: 1rem;
  width: 80px;
  height: 55px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.42;
  pointer-events: none;
  z-index: 1;
}
.bond__sigil--eagle {
  left: 1.25rem;
  background-image: url('./assets/mark-eagle.png');
}
.bond__sigil--owl {
  right: 1.25rem;
  background-image: url('./assets/mark-owl-flip.png'); /* faces inward */
}
/* Gentle breath — barely perceptible, never choppy */
@keyframes lineage-breath {
  0%, 100% { transform: scale(1); opacity: 0.38; }
  50%      { transform: scale(1.025); opacity: 0.5; }
}
.bond__sigil {
  animation: lineage-breath 5.5s ease-in-out infinite;
}
.bond__sigil--owl {
  animation-delay: 2.75s; /* offset so the two birds breathe in counterpoint */
}
[data-theme="dark"] .bond__sigil {
  opacity: 0.55;
}
@keyframes lineage-breath-dark {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.025); opacity: 0.7; }
}
[data-theme="dark"] .bond__sigil {
  animation-name: lineage-breath-dark;
}
@media (max-width: 640px) {
  .bond__sigil {
    width: 48px;
    height: 33px;
    top: 0.5rem;
  }
  .bond__sigil--eagle { left: 0.75rem; }
  .bond__sigil--owl { right: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bond__sigil {
    animation: none;
  }
}

/* ---------- Footer marks ---------- */
.footer__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.footer__copy .lineage-mark {
  opacity: 0.5;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0;
  vertical-align: middle;
}
[data-theme="dark"] .footer__copy .lineage-mark {
  opacity: 0.7;
}