/* ============================================================
   Soul Light Yoga — Design System
   Palette: earthy boho, minimalist. Derived from brand brief.
   ============================================================ */

:root {
  /* --- Color tokens — Rev 2: white-based, editorial, sage as a sparing accent ---
     (per 2026 wellness-brand research: light neutral bases, muted green used sparingly,
     strong dark neutral for contrast — not an earthy-heavy palette) */
  --color-cream:       #ffffff;  /* primary background — pure white */
  --color-cream-soft:  #f7f6f3;  /* alternating section bg — barely-there warm off-white */
  --color-ink:         #211f1c;  /* primary text — near-black, warm undertone */
  --color-sage:        #55643f;  /* accent — used sparingly: buttons, links, active states */
  --color-sage-deep:   #211f1c;  /* footer / dark panels — true charcoal, not green */
  --color-gold:        #b8923f;  /* secondary accent — thin highlights, dividers, badges */
  --color-tan:         #e2ded3;  /* borders, card edges */
  --color-tan-light:   #ece9e1;  /* subtle fills */
  --color-white:       #ffffff;

  /* --- Type tokens --- */
  --font-logo:      'DM Serif Display', Georgia, serif;
  --font-heading:   'Inria Serif', Georgia, serif;
  --font-body:      'Inria Serif', Georgia, serif;
  /* Flatory Serif is a licensed font (not on Google Fonts) — swap the @font-face
     in fonts.css once Vishu supplies the licensed font files. Falls back to a
     comparable serif in the meantime so course names still read distinctly. */
  --font-course:    'Flatory Serif', 'Cormorant Garamond', Georgia, serif;

  --fs-display:  clamp(2.75rem, 5vw, 4.5rem);
  --fs-h1:       clamp(2.25rem, 4vw, 3.25rem);
  --fs-h2:       clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:       1.375rem;
  --fs-body:     1.0625rem;
  --fs-small:    0.9rem;
  --fs-eyebrow:  0.8rem;

  /* --- Layout tokens --- */
  --radius-lg:   28px;
  --radius-md:   16px;
  --radius-full: 999px;
  --shadow-soft: 0 20px 60px -20px rgba(33, 31, 28, 0.22);
  --shadow-card: 0 10px 30px -12px rgba(33, 31, 28, 0.14);
  --max-width:   1240px;
  --gutter:      clamp(1.25rem, 4vw, 3rem);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Contains pre-reveal AOS transforms (e.g. fade-left/right translate 100px) and any other
     stray horizontal spillover so the mobile viewport never gets a horizontal scrollbar
     or rubber-band bounce. Vertical scrolling is unaffected.
     overflow-x: hidden is declared first as a fallback for older browsers; overflow-x: clip
     (declared second, so it wins wherever supported) clips the same way but — unlike hidden —
     doesn't implicitly turn this into its own scroll container. That distinction matters: a
     hidden/auto/scroll value on overflow-x forces overflow-y to compute to auto per spec,
     which is exactly what was breaking position:sticky on .site-header below. clip avoids
     that side effect entirely while still fully containing horizontal overflow (verified: a
     forced `window.scrollTo(x, 0)` no longer moves the page at all, same as hidden did). */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink);
  background: var(--color-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Same reasoning as html above: clip (not hidden) so .site-header's position:sticky
     keeps working. Both html and body need the rule — html alone measurably still let
     content force-scroll sideways via JS/touch even though nothing was visible to the eye
     (confirmed via window.scrollTo probing), so body needs its own containment too; it just
     has to be the non-scroll-container-creating clip value rather than hidden. */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; margin: 0 0 0.5em; color: var(--color-ink); }
p { margin: 0 0 1em; }

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

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

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-style: italic;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.75em;
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary {
  background: var(--color-ink);
  color: var(--color-cream);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 0 rgba(0,0,0,0.3), 0 5px 12px rgba(33,31,28,0.22);
}
.btn-primary:hover { background: var(--color-sage); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 0 rgba(0,0,0,0.25), 0 10px 20px rgba(33,31,28,0.25); }
.btn-primary:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 0 rgba(0,0,0,0.3), 0 2px 6px rgba(33,31,28,0.2); }
.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-outline:hover { background: var(--color-ink); color: var(--color-cream); }
.btn-gold {
  background: var(--color-gold);
  color: var(--color-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 0 rgba(122,92,20,0.4), 0 5px 12px rgba(184,146,63,0.3);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 0 rgba(122,92,20,0.35), 0 10px 20px rgba(184,146,63,0.32); }
.btn-gold:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 0 rgba(122,92,20,0.4), 0 2px 6px rgba(184,146,63,0.3); }

/* --- Site header / nav --- */
.site-header {
  position: sticky;
  top: 0.5rem;
  /* Was z-index: 100, *below* .mobile-drawer's z-index: 200 — so opening the mobile
     menu covered the header (and its logo) with the drawer's frosted-glass overlay,
     leaving the logo blurred/hidden behind it. Header now stays above the drawer,
     so the logo (and the hamburger, now doubling as the close control) stay crisp
     and usable the whole time the menu is open. */
  z-index: 300;
  padding-inline: var(--gutter);
}
.nav-card {
  max-width: var(--max-width);
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.6rem 0.6rem 1.25rem;
  box-shadow: var(--shadow-card);
}
.nav-logo { display: flex; align-items: center; gap: 0.6rem; }
.nav-logo img { height: 38px; width: auto; }
.nav-logo span {
  font-family: var(--font-logo);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav-links a { white-space: nowrap; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-links a {
  font-size: 0.92rem;
  color: var(--color-ink);
  position: relative;
  padding: 0.25rem 0;
}
.nav-links a:hover { color: var(--color-sage); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--color-gold);
  border-radius: 2px;
}
.nav-actions { display: flex; align-items: center; gap: 0.9rem; }
.nav-actions .btn { padding: 0.65em 1.4em; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  width: 38px;
  height: 38px;
  position: relative;
}
.nav-toggle span {
  display: block;
  position: absolute;
  left: 8px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ink);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease, top 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 25px; }
/* Hamburger -> X, driven by .active (toggled in main.js alongside the drawer's .open) */
.nav-toggle.active span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-actions .btn-outline { display: none; }
  .nav-toggle { display: block; }
}

/* --- Mobile nav drawer: liquid glass ---
   Frosted, saturated backdrop-blur over whatever the drawer sits above, with soft
   drifting colour blobs (brand sage/gold) behind the blur for a "liquid" sheen rather
   than a flat frosted pane. Kept in the DOM at all times (no display:none) so opacity/
   transform can transition; visibility + pointer-events handle interactivity/a11y
   while closed. main.js only ever toggles the .open class — no JS changes needed to
   tweak this animation further. */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(38% 32% at 12% 18%, rgba(184, 146, 63, 0.20), transparent 70%),
    radial-gradient(42% 36% at 88% 28%, rgba(107, 122, 91, 0.18), transparent 70%),
    radial-gradient(55% 45% at 50% 96%, rgba(255, 255, 255, 0.55), transparent 70%),
    rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: scale(1.04);
  will-change: opacity, transform;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.55s;
}
.mobile-drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}
.mobile-drawer-inner {
  position: relative;
  /* Clears the persistent sticky header (≈0.5rem top gap + its own height) so
     the drawer's content starts below it rather than under/behind it. The header's
     hamburger-turned-X is now the only close control (see main.js) — there's no
     in-drawer close button to clear/account for anymore. */
  padding: calc(0.5rem + 64px + 1.4rem) var(--gutter) 2rem;
  height: 100%;
  overflow-y: auto;
}
.mobile-drawer nav {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mobile-drawer nav a {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  color: var(--color-ink);
  /* Staggered slide/fade-in — each link starts offset and hidden, and animates in
     with an increasing delay once the drawer gets .open, so the menu feels like it
     unfurls rather than appearing all at once. Delays are deliberately generous
     (0.9s to fully reveal the last link) so each one is individually noticeable
     rather than a fast flicker. */
  opacity: 0;
  transform: translateX(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease, color 0.2s ease;
}
.mobile-drawer.open nav a { opacity: 1; transform: translateX(0); }
.mobile-drawer nav a:hover,
.mobile-drawer nav a:focus-visible { background: rgba(255, 255, 255, 0.6); color: var(--color-sage); }
.mobile-drawer nav a svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  opacity: 0.62;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mobile-drawer nav a:hover svg,
.mobile-drawer nav a:focus-visible svg { opacity: 0.95; transform: scale(1.08); }
.mobile-drawer nav a:nth-child(1)  { transition-delay: 0.15s; }
.mobile-drawer nav a:nth-child(2)  { transition-delay: 0.25s; }
.mobile-drawer nav a:nth-child(3)  { transition-delay: 0.35s; }
.mobile-drawer nav a:nth-child(4)  { transition-delay: 0.45s; }
.mobile-drawer nav a:nth-child(5)  { transition-delay: 0.55s; }
.mobile-drawer nav a:nth-child(6)  { transition-delay: 0.65s; }
.mobile-drawer nav a:nth-child(7)  { transition-delay: 0.75s; }
.mobile-drawer nav a:nth-child(8)  { transition-delay: 0.85s; }
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-drawer nav a,
  .nav-toggle span { transition-duration: 0.01ms !important; }
}

/* --- Hero (homepage) --- */
.hero {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.75rem) var(--gutter) clamp(2rem, 6vw, 4rem);
  overflow: hidden;
}
.hero-grid {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-rays {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 640px;
  max-width: 70vw;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.hero-copy { position: relative; z-index: 1; }
.hero-copy .eyebrow { display: block; margin-bottom: 1rem; }
.hero-copy h1 {
  font-family: var(--font-logo);
  font-size: var(--fs-display);
  line-height: 1.08;
  margin-bottom: 0.6em;
}
.hero-copy .lede {
  font-size: 1.15rem;
  max-width: 30em;
  color: var(--color-ink);
  opacity: 0.9;
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.75rem 0; }
.hero-trust { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; font-size: var(--fs-small); }
.hero-trust .stars { color: var(--color-gold); letter-spacing: 0.1em; }

.hero-visual { position: relative; z-index: 1; }
.hero-visual-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 5;
}
.hero-visual-frame img { width: 100%; height: 100%; object-fit: cover; }

.hero-float-card {
  position: absolute;
  bottom: -1.25rem;
  left: -1.5rem;
  width: 46%;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  padding: 0.6rem;
  box-shadow: var(--shadow-card);
  /* Button resets — this was a <div> before; it's a real <button> now so the reel
     lightbox it opens is keyboard/screen-reader accessible, not just clickable. */
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-float-card:hover,
.hero-float-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(33, 31, 28, 0.18);
}
.hero-float-card .thumb { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; }
.hero-float-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-float-card .play-btn {
  position: absolute; inset: 0; margin: auto; width: 40px; height: 40px;
  background: var(--color-gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink); font-size: 0.9rem;
  transition: transform 0.2s ease;
}
.hero-float-card:hover .play-btn,
.hero-float-card:focus-visible .play-btn { transform: scale(1.12); }
.hero-float-card p { margin: 0.5rem 0.25rem 0.15rem; font-size: 0.8rem; }

/* --- Hero reel lightbox ---
   Opens the real Instagram Reel (in place of the static preview thumbnail) the moment
   the hero-float-card is tapped. Instagram's platform doesn't allow embeds to autoplay
   silently on page load — this is a Meta restriction, not something embed markup can
   override — so this lightbox is the closest equivalent: the reel loads and is ready
   to play the instant the card is tapped, rather than sending anyone away to Instagram. */
.reel-lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    radial-gradient(45% 35% at 20% 15%, rgba(184, 146, 63, 0.16), transparent 70%),
    radial-gradient(45% 35% at 85% 85%, rgba(107, 122, 91, 0.16), transparent 70%),
    rgba(33, 31, 28, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.reel-lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.reel-lightbox-panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  transform: scale(0.94) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.reel-lightbox.open .reel-lightbox-panel { transform: scale(1) translateY(0); }
.reel-lightbox-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.reel-lightbox-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.reel-lightbox-frame .reel-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.reel-lightbox-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-cream);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.reel-lightbox-close:hover { background: rgba(255, 255, 255, 0.28); transform: rotate(90deg); }
.reel-lightbox-fallback {
  display: block;
  text-align: center;
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reel-lightbox-fallback:hover { color: var(--color-cream); }
@media (max-width: 420px) {
  .reel-lightbox-close { top: auto; bottom: -3rem; right: 0; }
}

.hero-ai-pill {
  position: absolute;
  top: 8%;
  right: -1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: var(--radius-full);
  padding: 0.7rem 1.1rem;
  box-shadow: var(--shadow-card);
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.hero-ai-pill:hover { transform: translateY(-2px); }
.hero-ai-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-sage); flex-shrink: 0; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; margin-inline: auto; }
  .hero-float-card { width: 55%; }
}

@media (max-width: 480px) {
  /* At narrow widths the pill's full-sentence label no longer fits between its
     right: -1rem anchor and the hero's clipped edge, so it was getting hard-cut
     mid-word by .hero's overflow: hidden. Pull it inside the frame, shrink it,
     and let the label wrap onto a second line instead of being clipped. */
  .hero-ai-pill {
    top: 0.65rem;
    right: 0.65rem;
    max-width: calc(100% - 1.3rem);
    padding: 0.55rem 0.85rem;
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: normal;
  }
}

/* --- Section shells --- */
section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-alt { background: var(--color-cream-soft); }
.section-dark { background: var(--color-sage-deep); color: var(--color-cream); border-bottom: 1px solid rgba(184, 146, 63, 0.25); }
.section-dark h2, .section-dark h3 { color: var(--color-cream); }
.section-head { max-width: 640px; margin-bottom: 2.5rem; }
.section-head .eyebrow { margin-bottom: 0.75rem; display: block; }
.section-head h2 { font-family: var(--font-logo); font-size: var(--fs-h1); }
.section-head::before {
  content: '';
  /* Was display:block, which ignores the parent's text-align entirely — so on
     section-heads that get text-align:center (e.g. the FAQ heading), the eyebrow
     and heading text centered correctly but this line stayed pinned to the left
     edge. inline-block respects text-align like normal inline content does, so it
     now centers along with everything else when the parent asks for it, while
     staying put on the (much more common) left-aligned section-heads elsewhere. */
  display: inline-block;
  width: 44px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 2px;
  margin-bottom: 0.9rem;
}

/* --- Three pillars --- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
/* Shared loading/empty/error state for every JS-populated content container on the public
   site (course catalogue, subscription plans, events, testimonials — see assets/js/page-data.js).
   Public equivalent of admin.css's .admin-loading/.admin-empty-state, which aren't loaded here. */
.page-loading-state {
  text-align: center;
  opacity: 0.55;
  font-size: 0.95rem;
  padding: 2.5rem 1rem;
}
.pillar-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.9rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(33,31,28,0.06), var(--shadow-card);
  border: 1px solid var(--color-tan-light);
  border-top: 3px solid var(--color-gold);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pillar-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, var(--shadow-soft); }
.pillar-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 34px;
  padding: 0 0.9rem;
  border-radius: var(--radius-full);
  font-family: var(--font-course);
  color: var(--color-gold);
  font-size: 0.92rem;
  white-space: nowrap;
  background: var(--color-cream-soft);
  box-shadow: 5px 5px 12px var(--neu-shadow-dark), -5px -5px 12px var(--neu-shadow-light);
}
.pillar-card h3 { font-size: var(--fs-h3); margin: 0.75rem 0 0.6rem; }
.pillar-card p { font-size: 0.95rem; opacity: 0.85; margin-bottom: 1.25rem; }
.pillar-card a { font-size: 0.85rem; font-weight: 600; color: var(--color-sage); }

@media (max-width: 860px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* --- 2-column pillars-grid variant (used where only 2 cards appear) ---
   NOTE: several pages previously set this via an inline style="grid-template-columns: ..."
   on the element. Inline styles win over ANY external rule, including rules inside
   @media queries — so the .pillars-grid mobile-collapse rule above could never apply
   to those elements at any screen width. Always use this class instead of an inline
   grid-template-columns override on .pillars-grid. */
.pillars-grid-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .pillars-grid-2col { grid-template-columns: 1fr; }
}

/* --- 2-column point-list variant (used for longer point lists that pair up on desktop) --- */
.point-list-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
@media (max-width: 640px) {
  .point-list-2col { grid-template-columns: 1fr; }
}

/* --- Compact offerings teaser grid (homepage) --- */
.pillars-grid-offerings {
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
@media (max-width: 860px) {
  .pillars-grid-offerings { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .pillars-grid-offerings { grid-template-columns: repeat(2, 1fr); }
}

/* --- Events ribbon --- */
.events-ribbon {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.event-card {
  flex: 0 0 280px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-tan-light);
}
.event-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.event-card .body { padding: 1.1rem 1.2rem 1.4rem; }
.event-date { font-size: 0.78rem; color: var(--color-sage); letter-spacing: 0.06em; text-transform: uppercase; }
.event-card h4 { font-family: var(--font-heading); font-size: 1.05rem; margin: 0.4rem 0 0.3rem; }
.event-card .loc { font-size: 0.85rem; opacity: 0.75; }

/* --- Testimonials slider (static grid for now; JS can enhance to carousel) ---
   NOTE: this class must never be combined with .testimonial-carousel-track on the same
   element — its grid gap silently broke the carousel's pixel-based slide math (each slide
   drifted further out of alignment, causing the "next card gets cut" bug). Carousel markup
   should only ever carry .testimonial-carousel-track. */
.testimonial-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  border: 1px solid var(--color-tan-light);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(33,31,28,0.06);
}
.testimonial-card .stars { color: var(--color-gold); font-size: 0.85rem; margin-bottom: 0.75rem; }
.testimonial-card::before {
  content: '"';
  display: block;
  font-family: var(--font-logo);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.55;
  margin-bottom: -0.5rem;
}
.testimonial-card p { font-style: italic; font-size: 0.98rem; }
.testimonial-card .author { font-size: 0.85rem; font-weight: 600; margin-top: 1rem; opacity: 0.8; }

@media (max-width: 860px) {
  .testimonial-track { grid-template-columns: 1fr; }
}

/* --- Page banner (for interior pages) --- */
.page-banner {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.page-banner .eyebrow { display: block; margin-bottom: 0.75rem; }
.page-banner h1 { font-family: var(--font-logo); font-size: var(--fs-h1); max-width: 720px; margin-inline: auto; }
.page-banner p { max-width: 560px; margin: 1rem auto 0; opacity: 0.85; }

.content-placeholder {
  border: 1px dashed var(--color-tan);
  border-radius: var(--radius-md);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--color-sage);
  font-size: 0.95rem;
  background: rgba(255,255,255,0.4);
}

/* --- AI chat widget launcher (present on every page; the site's sole contact channel) --- */
.ai-widget-fab {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 300;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 0 rgba(0,0,0,0.35), 0 10px 24px rgba(33,31,28,0.3);
  border: none;
  font-size: 1.4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
}
.ai-widget-fab:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 0 rgba(0,0,0,0.35), 0 4px 10px rgba(33,31,28,0.25);
}
.ai-widget-fab:hover { transform: scale(1.06); background: var(--color-sage); }

/* Both FABs fade down to a translucent, non-interactive state whenever main.js
   detects they'd otherwise sit on top of the calendar, FAQ, team, or footer-social
   content beneath them (see the fabs-dim logic there) — hovering back over that
   spot without scrolling won't restore them, since the whole point is that content
   was being covered; scrolling past it brings the FABs back automatically. */
body.fabs-dim .ai-widget-fab,
body.fabs-dim .scroll-top-fab {
  opacity: 0.22;
  pointer-events: none;
}

/* Scroll-to-top companion, opposite the AI FAB per house design system */
.scroll-top-fab {
  position: fixed;
  bottom: 1.75rem;
  left: 1.75rem;
  z-index: 300;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-cream-soft);
  color: var(--color-ink);
  border: 1.5px solid rgba(33, 31, 28, 0.18);
  box-shadow: 3px 3px 7px var(--neu-shadow-dark), -3px -3px 7px var(--neu-shadow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.scroll-top-fab svg {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scroll-top-fab:hover {
  background: var(--color-ink);
  color: var(--color-cream);
  border-color: var(--color-ink);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 2px 2px 5px var(--neu-shadow-dark), -2px -2px 5px var(--neu-shadow-light);
}
.scroll-top-fab:hover svg { transform: translateY(-2px); }
.scroll-top-fab:active {
  background: var(--color-sage);
  color: var(--color-cream);
  border-color: var(--color-sage);
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.06);
}
.scroll-top-fab:active svg { transform: translateY(-5px); }
.scroll-top-fab.clicked svg { animation: scrollTopArrowLaunch 0.45s ease; }
@keyframes scrollTopArrowLaunch {
  0% { transform: translateY(0); opacity: 1; }
  40% { transform: translateY(-9px); opacity: 0; }
  41% { transform: translateY(9px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.scroll-top-fab.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  animation: scrollTopFloat 2.6s ease-in-out infinite;
}
.scroll-top-fab.visible:hover { animation-play-state: paused; }
@keyframes scrollTopFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1); }
}

/* --- Footer --- */
.site-footer {
  background: var(--color-sage-deep);
  color: var(--color-cream);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-brand img { height: 44px; margin-bottom: 1rem; }
.footer-brand p { font-size: 0.9rem; opacity: 0.8; max-width: 26em; }
.footer-social { display: flex; gap: 0.7rem; margin-top: 1.25rem; }
.social-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--color-cream);
  transition: background 0.2s ease, transform 0.2s ease;
}
.social-icon:hover { background: var(--color-sage); transform: translateY(-2px); }
.footer-bottom a { color: var(--color-gold); font-weight: 600; }
.footer-bottom a:hover { text-decoration: underline; }
.footer-col h5 { font-family: var(--font-heading); font-size: 0.95rem; margin-bottom: 1rem; opacity: 0.9; }
.footer-col a { display: block; font-size: 0.88rem; opacity: 0.75; margin-bottom: 0.6rem; }
.footer-col a:hover { opacity: 1; }
.footer-bottom {
  border-top: 1px solid rgba(232,230,210,0.15);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  opacity: 0.65;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* --- AI chat widget (rule-based conversational interface, not a form) --- */
.chat-widget {
  position: fixed;
  bottom: 6.5rem;
  right: 1.75rem;
  z-index: 310;
  width: min(360px, calc(100vw - 2.5rem));
  height: min(520px, calc(100vh - 9rem));
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-tan);
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.chat-widget.open { display: flex; }

.chat-head {
  background: rgba(33, 31, 28, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: var(--color-white);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}
.chat-head-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-sage);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.chat-head h4 { color: var(--color-white); margin: 0; font-size: 0.95rem; }
.chat-head p { margin: 0; font-size: 0.72rem; opacity: 0.75; display: flex; align-items: center; gap: 0.4rem; }
.chat-dot { width: 6px; height: 6px; border-radius: 50%; background: #7ea86c; display: inline-block; }
.chat-close {
  margin-left: auto;
  background: none; border: none;
  color: var(--color-white);
  opacity: 0.7;
  font-size: 0.95rem;
  padding: 0.3rem;
}
.chat-close:hover { opacity: 1; }

.chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--color-cream-soft);
}

.chat-row { display: flex; flex-direction: column; }
.chat-row-bot { align-items: flex-start; }
.chat-row-user { align-items: flex-end; }

.chat-bubble {
  max-width: 80%;
  padding: 0.6em 0.85em;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.45;
}
.chat-bubble-bot {
  background: var(--color-white);
  border: 1px solid var(--color-tan);
  border-bottom-left-radius: 4px;
  color: var(--color-ink);
}
.chat-bubble-user {
  background: var(--color-ink);
  color: var(--color-white);
  border-bottom-right-radius: 4px;
}

.chat-typing { display: flex; gap: 4px; padding: 0.75em 0.9em; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-ink);
  opacity: 0.35;
  animation: chatTypingBounce 1.1s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-4px); opacity: 0.8; }
}

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.chat-chip {
  background: var(--color-cream-soft);
  border: none;
  color: var(--color-sage);
  border-radius: var(--radius-full);
  padding: 0.45em 0.95em;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 3px 3px 8px var(--neu-shadow-dark), -3px -3px 8px var(--neu-shadow-light);
  transition: box-shadow 0.15s ease, color 0.15s ease;
}
.chat-chip:hover { color: var(--color-ink); }
.chat-chip:active {
  box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
}

.chat-input-row {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--color-tan-light);
  background: var(--color-white);
}
.chat-input-row input {
  flex: 1;
  border: 1px solid var(--color-tan);
  border-radius: var(--radius-full);
  padding: 0.6em 1em;
  font-family: var(--font-body);
  font-size: 0.88rem;
  background: var(--color-cream-soft);
}
.chat-input-row input:focus { outline: none; border-color: var(--color-sage); }
.chat-input-row button {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-white);
  border: none;
  flex-shrink: 0;
  font-size: 0.95rem;
}
.chat-input-row button:hover { background: var(--color-sage); }

.chat-foot {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  font-size: 0.68rem;
  text-align: center;
  opacity: 0.5;
  background: var(--color-white);
}


/* ============================================================
   Visual effects layer — glassmorphism, neumorphism, skeuomorphism
   Applied deliberately to specific element types, not blanket-wide:
   glass = translucent/blurred surfaces (nav, floating cards, chat head)
   neu   = soft dual-shadow embossed UI (FABs, badges, chips)
   skeu  = tactile depth (buttons that visibly press)
   ============================================================ */

:root {
  --neu-shadow-dark: rgba(33, 31, 28, 0.16);
  --neu-shadow-light: rgba(255, 255, 255, 0.9);
}

/* --- Glassmorphism --- */
.glass {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.glass-dark {
  background: rgba(33, 31, 28, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Neumorphism --- */
.neu {
  background: var(--color-cream-soft);
  box-shadow: 7px 7px 16px var(--neu-shadow-dark), -7px -7px 16px var(--neu-shadow-light);
  border: none;
}
.neu:active,
.neu.neu-pressed {
  box-shadow: inset 4px 4px 10px var(--neu-shadow-dark), inset -4px -4px 10px var(--neu-shadow-light);
}

/* ============================================================
   Scroll-reveal (AOS-driven) — see assets/js/main.js for init.
   ============================================================ */
[data-aos] {
  transition-property: opacity, transform;
}

/* --- Testimonials photo-mosaic hero (CSS Grid — guarantees the overlay sits
   exactly centered between the two photo clusters, regardless of image counts) --- */
.mosaic-hero {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.75rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  background: var(--color-cream-soft);
  overflow: hidden;
}
.mosaic-grid {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.mosaic-side {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.mosaic-side:first-child { justify-content: flex-end; }
.mosaic-side:last-child { justify-content: flex-start; }
.mosaic-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(-24px);
}
.mosaic-col-down { transform: translateY(24px); }
.mosaic-col img {
  width: 110px;
  height: 150px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255,255,255,0.6);
}

.mosaic-overlay {
  grid-column: 2;
  z-index: 2;
  text-align: center;
  width: min(88vw, 440px);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem;
  box-shadow: var(--shadow-soft);
}
.eyebrow-pill {
  display: inline-block;
  background: var(--color-white);
  border: 1px solid var(--color-tan);
  border-radius: var(--radius-full);
  padding: 0.35em 1em;
  font-size: 0.78rem;
  color: var(--color-gold);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.mosaic-overlay h1 {
  font-family: var(--font-logo);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.mosaic-overlay p { opacity: 0.85; margin-bottom: 1.5rem; }

@media (max-width: 900px) {
  .mosaic-grid { grid-template-columns: 1fr; }
  .mosaic-side { display: none; }
  .mosaic-hero { padding-block: 3rem; }
}

/* --- View tabs (Testimonials / Gallery toggle) --- */
.view-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 2.5rem 0 1rem;
}
.view-tab {
  background: var(--color-cream-soft);
  border: none;
  color: var(--color-ink);
  padding: 0.65em 1.6em;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 5px 5px 12px var(--neu-shadow-dark), -5px -5px 12px var(--neu-shadow-light);
  transition: color 0.2s ease, box-shadow 0.2s ease;
}
.view-tab.active {
  background: var(--color-ink);
  color: var(--color-white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 12px rgba(33,31,28,0.25);
}

/* --- Gallery grid --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.gallery-item {
  display: block;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  position: relative;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Lightbox --- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(33, 31, 28, 0.92);
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-image {
  max-width: min(86vw, 900px);
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.5rem;
  opacity: 0.8;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none;
  color: var(--color-white);
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  font-size: 0.85rem;
  opacity: 0.75;
}
@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.3rem; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}

/* --- Review spotlight buttons (jump to a named testimonial) --- */
.review-spotlight {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2rem;
}
.review-spotlight-label {
  font-size: 0.85rem;
  opacity: 0.65;
  margin-right: 0.25rem;
}
.review-jump-btn { padding: 0.55em 1.4em; font-size: 0.85rem; }
.review-jump-btn.active {
  background: var(--color-ink);
  color: var(--color-white);
  border-color: var(--color-ink);
}
.teacher-block-hidden { display: none; }

/* --- Testimonial carousel --- */
.testimonial-carousel {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 760px;
  margin-inline: auto;
}
.carousel-viewport {
  flex: 1;
  overflow: hidden;
  transition: height 0.35s ease;
}
.testimonial-carousel-track {
  display: flex;
  align-items: flex-start;
  /* Flex's default align-items is "stretch" — without this override, every card in the
     track stretches to match the height of the tallest sibling. A category can hold 100+
     reviews, so as soon as any one of them has a long quote, every short card (even ones
     with just 1-2 lines of text) gets stretched to match it, leaving a large empty gap
     below the short quote's actual content. flex-start lets each card size to its own
     content height instead. */
  gap: 0;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.testimonial-carousel-track .testimonial-card {
  /* width/flex are set inline by carousel.js in pixels — do not set them here.
     A percentage-based flex-basis here was the original cause of the slide-bleed bug:
     it's ambiguous inside a shrink-to-fit flex container with no explicit width. */
  text-align: center;
  padding: 2.5rem 2rem;
}
.testimonial-carousel-track .testimonial-card::before { margin-inline: auto; }
.carousel-arrow {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-cream-soft);
  border: none;
  font-size: 1.4rem;
  color: var(--color-ink);
  box-shadow: 5px 5px 12px var(--neu-shadow-dark), -5px -5px 12px var(--neu-shadow-light);
  transition: box-shadow 0.15s ease;
}
.carousel-arrow:hover { color: var(--color-sage); }
.carousel-arrow:active {
  box-shadow: inset 3px 3px 8px var(--neu-shadow-dark), inset -3px -3px 8px var(--neu-shadow-light);
}
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-tan);
  border: none;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.active {
  background: var(--color-gold);
  transform: scale(1.3);
}

/* --- Per-teacher testimonial blocks with year tabs --- */
.teacher-testimonial-block { margin-top: 3.5rem; }
.teacher-testimonial-block:first-of-type { margin-top: 3rem; }
.teacher-block-head {
  text-align: center;
  margin-bottom: 2rem;
}
.teacher-block-head h3 {
  font-family: var(--font-logo);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.year-tabs {
  display: inline-flex;
  gap: 0.5rem;
  background: var(--color-cream-soft);
  padding: 0.35rem;
  border-radius: var(--radius-full);
}
.year-tab {
  background: none;
  border: none;
  color: var(--color-ink);
  opacity: 0.55;
  padding: 0.45em 1.1em;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.year-tab:not([disabled]):hover { opacity: 0.85; }
.year-tab.active {
  background: var(--color-ink);
  color: var(--color-white);
  opacity: 1;
}
.year-tab[disabled] {
  cursor: not-allowed;
  opacity: 0.3;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.category-tab {
  background: var(--color-white);
  border: 1px solid var(--color-tan);
  color: var(--color-ink);
  opacity: 0.7;
  padding: 0.4em 1em;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.category-tab:hover { opacity: 1; border-color: var(--color-sage); }
.category-tab.active {
  background: var(--color-sage);
  border-color: var(--color-sage);
  color: var(--color-white);
  opacity: 1;
}
.category-tab .category-count { opacity: 0.7; font-weight: 400; margin-left: 0.3em; }
.category-loading {
  font-size: 0.82rem;
  opacity: 0.55;
  font-style: italic;
}

/* --- Georgia/Mayank toggle (only one teacher block visible at a time) --- */
.teacher-block-hidden { display: none; }
.review-jump-btn { padding: 0.65em 1.6em; }

@media (max-width: 640px) {
  .testimonial-carousel { gap: 0.5rem; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 1.1rem; }
  .testimonial-carousel-track .testimonial-card { padding: 2rem 1.25rem; }
}

/* --- Gallery "view more" link --- */
.gallery-more {
  text-align: center;
  margin-top: 2.5rem;
}

/* --- Editorial "arch hero" — used on About, Trainings, Subscriptions, Events
   (Home, Testimonials, Contact keep their own distinct hero treatments) --- */
.arch-hero {
  padding: clamp(1.25rem, 3vw, 2rem) var(--gutter) 0;
}
.arch-hero-card {
  max-width: var(--max-width);
  margin-inline: auto;
  background: var(--color-cream-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  position: relative;
  min-height: 420px;
}
.arch-hero-rings {
  position: absolute;
  top: -60px;
  left: 38%;
  width: 260px;
  height: 260px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.arch-hero-text {
  padding: clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.arch-hero-text .eyebrow-pill { align-self: flex-start; }
.arch-hero-text h1 {
  font-family: var(--font-logo);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  line-height: 1.08;
  margin: 1rem 0 1.25rem;
}
.arch-hero-text h1 .accent-word {
  font-style: italic;
  color: var(--color-sage);
}
.arch-hero-text h1 .accent-word-gold {
  font-style: italic;
  color: var(--color-gold);
}
.arch-hero-text p { max-width: 34em; opacity: 0.85; margin-bottom: 1.5rem; }

.arch-hero-image {
  position: relative;
  overflow: hidden;
  min-height: 340px;
}
.arch-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.arch-hero-image.illustration {
  background:
    radial-gradient(circle at 50% 42%, rgba(184,146,63,0.14), transparent 60%),
    var(--color-tan-light);
}
.arch-hero-image.illustration img {
  object-fit: contain;
  padding: 2.75rem;
  filter: drop-shadow(0 10px 20px rgba(33,31,28,0.14));
}

@media (max-width: 860px) {
  .arch-hero-card { grid-template-columns: 1fr; min-height: 0; }
  .arch-hero-image { min-height: 260px; order: -1; }
  .arch-hero-rings { display: none; }
}

/* --- Contact page: dotted world map + info cards --- */
.contact-hero {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  text-align: center;
}
.contact-hero > .container:first-child .eyebrow { display: block; margin-bottom: 0.75rem; }
.contact-hero h1 {
  font-family: var(--font-logo);
  font-size: var(--fs-h1);
  max-width: 720px;
  margin-inline: auto;
}
.contact-hero > .container:first-child p {
  max-width: 520px;
  margin: 1rem auto 0;
  opacity: 0.85;
}

.contact-map {
  position: relative;
  height: clamp(260px, 34vw, 380px);
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--color-cream-soft);
  overflow: hidden;
}
.contact-map-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--color-tan) 1.3px, transparent 1.3px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black 60%, transparent 100%);
}
.contact-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
}
.pin-dot {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 6px rgba(184, 146, 63, 0.25);
  animation: pinPulse 2.2s ease-in-out infinite;
}
@keyframes pinPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(184, 146, 63, 0.25); }
  50% { box-shadow: 0 0 0 10px rgba(184, 146, 63, 0.12); }
}
.pin-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ink);
  color: var(--color-white);
  padding: 0.6em 0.9em;
  border-radius: 10px;
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
}
.pin-label small { opacity: 0.7; }
.pin-label::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-ink);
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: -2.5rem;
  position: relative;
  z-index: 2;
}
.contact-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  text-align: left;
  border: 1px solid var(--color-tan-light);
  box-shadow: var(--shadow-card);
}
.contact-card-icon { font-size: 1.5rem; margin-bottom: 0.75rem; }
.contact-card h4 { font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: 0.4rem; }
.contact-card p { font-size: 0.88rem; opacity: 0.8; margin-bottom: 1rem; }
.contact-card .btn { width: 100%; justify-content: center; padding: 0.65em 1em; font-size: 0.85rem; }
.contact-card-meta { font-size: 0.78rem; color: var(--color-gold); font-weight: 600; }

@media (max-width: 860px) {
  .contact-cards { grid-template-columns: 1fr; margin-top: 1.5rem; }
  .contact-map { margin-top: 2rem; }
}

/* --- Ways to Connect grid --- */
.connect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.connect-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  text-align: center;
  border: 1px solid var(--color-tan-light);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.connect-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-cream-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  box-shadow: 4px 4px 10px var(--neu-shadow-dark), -4px -4px 10px var(--neu-shadow-light);
}
.connect-card h4 { font-family: var(--font-heading); font-size: 1rem; margin-bottom: 0.5rem; }
.connect-card p { font-size: 0.85rem; opacity: 0.8; margin-bottom: 1.25rem; flex-grow: 1; }
.connect-card .btn { width: 100%; justify-content: center; padding: 0.6em 1em; font-size: 0.82rem; }

/* --- Ways to Reach Us: distance grid --- */
.distance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.distance-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--color-tan-light);
}
.distance-icon { font-size: 1.5rem; }
.distance-card h5 { font-family: var(--font-heading); font-size: 0.92rem; margin: 0 0 0.2rem; }
.distance-km { font-size: 0.85rem; color: var(--color-gold); font-weight: 600; }
.distance-note { text-align: center; font-size: 0.8rem; opacity: 0.6; margin-top: 1.5rem; }

/* --- FAQ accordion --- */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-tan-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  text-align: left;
  padding: 1.1rem 1.4rem;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  color: var(--color-ink);
}
.faq-toggle {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-cream-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--color-sage);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.faq-item.open .faq-toggle {
  background: var(--color-ink);
  color: var(--color-white);
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1.4rem;
}
.faq-item.open .faq-answer { padding: 0 1.4rem 1.2rem; }
.faq-answer p { font-size: 0.9rem; opacity: 0.85; margin: 0; }
.faq-answer a { color: var(--color-gold); font-weight: 600; }

/* --- Trust bar (below hero, homepage only) --- */
.trust-bar {
  padding: 2rem 0;
  border-top: 1px solid var(--color-tan-light);
  border-bottom: 1px solid var(--color-tan-light);
  background: var(--color-cream-soft);
  perspective: 1200px;
}
.trust-bar-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 1.25rem;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  width: 150px;
  padding: 1.1rem 0.75rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-tan-light);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 8px 20px -10px rgba(33,31,28,0.18);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.trust-item:hover {
  transform: translateY(-8px) rotateX(8deg) rotateY(-6deg) scale(1.04);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 24px 34px -14px rgba(33,31,28,0.3);
}
.trust-item .trust-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--color-cream-soft), var(--color-white));
  box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light),
              inset 0 1px 1px rgba(255,255,255,0.6);
  animation: trustFloat 3.2s ease-in-out infinite;
}
.trust-item:nth-child(2) .trust-icon-wrap { animation-delay: 0.3s; }
.trust-item:nth-child(3) .trust-icon-wrap { animation-delay: 0.6s; }
.trust-item:nth-child(4) .trust-icon-wrap { animation-delay: 0.9s; }
.trust-item:nth-child(5) .trust-icon-wrap { animation-delay: 1.2s; }
@keyframes trustFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.trust-item .trust-icon {
  font-size: 1rem;
  color: var(--color-gold);
  letter-spacing: 0.03em;
}
.trust-number {
  font-family: var(--font-logo);
  font-size: 1.5rem;
  color: var(--color-ink);
  line-height: 1;
}
.trust-item .trust-label {
  font-size: 0.76rem;
  color: var(--color-ink);
  opacity: 0.82;
  line-height: 1.35;
}
@media (max-width: 700px) {
  .trust-bar-grid { gap: 0.85rem; }
  .trust-item { width: 105px; padding: 0.85rem 0.5rem; }
  .trust-item .trust-label { font-size: 0.68rem; }
}

/* --- Brand story: scannable facts, not paragraph copy (SEO/GEO-oriented) --- */
.brand-story { padding: clamp(3rem, 6vw, 5rem) 0; }
.brand-story-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.brand-story-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-soft);
}
.brand-story-image img { width: 100%; height: 100%; object-fit: cover; }
.brand-story-location-badge {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.55em 1em;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}
.brand-story-location-badge .pin-dot { width: 9px; height: 9px; box-shadow: none; }

.brand-story-facts h2 {
  font-family: var(--font-logo);
  font-size: var(--fs-h1);
  margin: 0.9rem 0 1.25rem;
}
.fact-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.fact-list li {
  font-size: 0.94rem;
  line-height: 1.5;
  padding-left: 0;
}
.fact-list strong { font-weight: 600; }
.brand-story-line {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}
.brand-story-credit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.75;
}
.brand-story-credit strong { color: var(--color-gold); font-family: var(--font-course); font-size: 1rem; }

@media (max-width: 860px) {
  .brand-story-grid { grid-template-columns: 1fr; }
  .brand-story-image { aspect-ratio: 16/10; }
}

/* --- About page: alternating story blocks (image + short para + points) --- */
.story-block {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.story-block-reverse { grid-template-columns: 1.15fr 0.85fr; }
.story-block-reverse .story-text { order: 1; }
.story-block-reverse .story-image { order: 2; }

.story-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-soft);
}
.story-image img { width: 100%; height: 100%; object-fit: cover; }

.story-text h2 {
  font-family: var(--font-logo);
  font-size: var(--fs-h1);
  margin: 0.9rem 0 1rem;
}
.story-text > p { font-size: 0.98rem; opacity: 0.88; margin-bottom: 1.5rem; }
.story-text strong { color: var(--color-sage); }

.point-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.point-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  font-weight: 500;
}
.point-icon { font-size: 1.1rem; flex-shrink: 0; }

@media (max-width: 860px) {
  .story-block, .story-block-reverse { grid-template-columns: 1fr; }
  .story-block-reverse .story-text { order: 2; }
  .story-block-reverse .story-image { order: 1; }
  .story-image { aspect-ratio: 16/10; }
}

/* --- Meet Our Team --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}
.team-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-tan-light);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.team-photo { aspect-ratio: 4/3; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-info { padding: 1.75rem; }
.team-info h3 { font-family: var(--font-logo); font-size: 1.5rem; margin-bottom: 0.25rem; }
.team-title {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--color-gold);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.team-intro { font-size: 0.95rem; opacity: 0.88; margin-bottom: 0; }

.team-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.team-detail h4 {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: var(--color-sage);
  margin: 1.5rem 0 0.75rem;
}
.team-detail .point-list { gap: 0.55rem; margin-bottom: 0; }
.team-detail .point-list li { font-size: 0.88rem; font-weight: 400; align-items: flex-start; }
.team-detail .point-icon { margin-top: 0.1rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  background: var(--color-cream-soft);
  color: var(--color-ink);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.35em 0.85em;
  border-radius: var(--radius-full);
}

.team-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 1.25rem;
  padding: 0;
}
.team-card.open .team-toggle .faq-toggle {
  background: var(--color-ink);
  color: var(--color-white);
  transform: rotate(45deg);
}

/* --- AOS fail-safe: if the AOS CDN script fails to load (offline, blocked, slow network),
   every [data-aos] element would otherwise stay permanently invisible (AOS's own CSS sets
   opacity:0 until its JS adds .aos-animate). main.js adds .aos-fallback to <html> if AOS
   hasn't initialized within 2.5s, forcing all such content visible regardless. --- */
html.aos-fallback [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --- Legal pages (privacy policy, terms, etc.) --- */
.legal-content { max-width: 760px; }
.legal-content h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-sage);
  margin: 2.25rem 0 0.9rem;
}
.legal-content h2:first-of-type { margin-top: 1rem; }
.legal-content h3 {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 1.5rem 0 0.6rem;
}
.legal-content p { font-size: 0.96rem; line-height: 1.7; opacity: 0.88; margin-bottom: 1rem; }
.legal-content .point-list { margin-bottom: 1.25rem; }
.legal-content .point-list li { font-weight: 400; align-items: flex-start; font-size: 0.95rem; opacity: 0.88; }
.legal-content .point-icon { margin-top: 0.15rem; }
.legal-address {
  background: var(--color-cream-soft);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
}
.legal-address a { color: var(--color-gold); font-weight: 600; }

/* --- Availability calendar (Events & Retreats page) --- */
.calendar-widget {
  max-width: 640px;
  margin-inline: auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-tan-light);
  position: relative;
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.calendar-header h3 {
  font-family: var(--font-logo);
  font-size: 1.25rem;
  margin: 0;
}
.calendar-nav {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-cream-soft);
  border: none;
  font-size: 1.2rem;
  color: var(--color-ink);
  box-shadow: 4px 4px 10px var(--neu-shadow-dark), -4px -4px 10px var(--neu-shadow-light);
}
.calendar-nav:hover { color: var(--color-sage); }

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  opacity: 0.75;
}
.calendar-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.calendar-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-available { background: #6a9c5f; }
.dot-limited { background: var(--color-gold); }
.dot-full { background: #a24d3d; }
.dot-closed { background: var(--color-tan); }

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.82rem;
  background: var(--color-cream-soft);
  position: relative;
  border: none;
  color: var(--color-ink);
}
.calendar-day.empty { background: transparent; }
.calendar-day.has-event {
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.15s ease;
}
.calendar-day.has-event:hover { transform: scale(1.08); }
.calendar-day .day-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-top: 2px;
}
.calendar-day.status-available { background: rgba(106, 156, 95, 0.16); }
.calendar-day.status-limited { background: rgba(184, 146, 63, 0.18); }
.calendar-day.status-full { background: rgba(162, 77, 61, 0.16); }
.calendar-day.status-closed { background: var(--color-tan-light); opacity: 0.6; }
.calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--color-ink); }

.calendar-detail {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--color-cream-soft);
  border-radius: var(--radius-md);
  position: relative;
}
.calendar-detail-close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  background: none; border: none;
  font-size: 0.9rem;
  opacity: 0.6;
}
.calendar-detail-close:hover { opacity: 1; }
.calendar-detail h4 { font-family: var(--font-heading); font-size: 1rem; margin-bottom: 0.4rem; }
.calendar-detail p { font-size: 0.85rem; opacity: 0.8; margin-bottom: 0.6rem; }
.calendar-status-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25em 0.7em;
  border-radius: var(--radius-full);
  margin-bottom: 0.6rem;
}
.calendar-status-badge.status-available { background: rgba(106, 156, 95, 0.2); color: #4a7040; }
.calendar-status-badge.status-limited { background: rgba(184, 146, 63, 0.22); color: #7a5c14; }
.calendar-status-badge.status-full { background: rgba(162, 77, 61, 0.2); color: #7a3226; }
.calendar-status-badge.status-closed { background: var(--color-tan); color: var(--color-ink); }

@media (max-width: 500px) {
  .calendar-day { font-size: 0.72rem; }
  .calendar-legend { font-size: 0.7rem; gap: 0.6rem; }
}