/* ============================================
   SODERWORLD - COMPLETE DESIGN SYSTEM
   Source of truth for brand tokens and shared components.
   See STYLE-GOVERNANCE.md for the rules these tokens encode.
   ============================================ */
:root {
  /* Brand palette - shipped */
  --midnight: #16153B;
  --indigo: #8729A5;
  --night-sky: #14438F;
  --aura: #E4C7E5;
  --amber: #F4A14B;
  --amber-light: #FFEDDC;
  --deep-purple: #3B0052;
  --soft-white: #FAF8FB;
  --dark-bg: #081224;
  --dark-blue-card: #2E2D5F;
  --lavender-light: #DBBFE4;
  --rose-light: #F5CEDC;
  --service-blue: #5B7BB1;

  /* Motion */
  --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows - shipped */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 40px rgba(135, 41, 165, 0.15);

  /* Type stack */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  /* Radius scale */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Neutral surfaces - reserved for future use */
  --pure-white: #FFFFFF;
  --warm-gray: #A9A6B8;
  --light-gray: #F0ECF2;

  /* Component gradients (hex values isolated here, not sprinkled in component code) */
  --gradient-breathe-banner: linear-gradient(135deg, #2B2668 0%, #1B1A4A 60%, #14133A 100%);
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-size:1rem;font-weight:300;line-height:1.7;color:var(--midnight);background:var(--soft-white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--amber)}
ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:400;line-height:1.25;color:var(--midnight)}

/* === CONTAINER === */
.container{max-width:1200px;margin:0 auto;padding:0 2rem}

/* === HEADER ===
   Fixed translucent bar. Backdrop blur reads as glass over content.
   See STYLE-GOVERNANCE.md for the full anatomy.
*/
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(22, 21, 59, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(228, 199, 229, 0.1);
  padding: 1rem 2rem;
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* === LOGO === */
.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--aura);
}
.logo-img { height: 46px; width: auto; object-fit: contain; }

/* === PRIMARY NAV ===
   Two coordinated affordances:
     - Underline animation grows on hover (every nav link)
     - Chevron after the link (only on dropdown triggers, rotates 180 deg on open)
   Underline lives on ::after; chevron on ::before with flex order so they coexist.
*/
nav {
  display: flex;
  gap: 1.8rem;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 1rem;
}

nav a {
  color: var(--aura);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 300;
  position: relative;
  transition: color var(--transition);
}
nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--amber);
  transition: width var(--transition);
}
nav a:hover { color: var(--amber); }
nav a:hover::after { width: 100%; }

/* Active state — L1 carries this when the user is on the page itself
   OR anywhere within its section (an L2 child). Use aria-current="page"
   on the exact match and aria-current="section" on the L1 of an L2 page. */
nav a.is-active,
nav a[aria-current="page"],
nav a[aria-current="section"] { color: var(--amber); }
nav a.is-active::after,
nav a[aria-current="page"]::after,
nav a[aria-current="section"]::after { width: 100%; }

/* Dropdown trigger anatomy */
.nav-item { position: relative; }
.nav-item > a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-item > a::before {
  order: 2;                              /* renders after the link text */
  content: '\f078';                      /* Font Awesome down-chevron */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.5rem;
  opacity: 0.5;
  transition: transform var(--transition), opacity var(--transition);
  position: static;                      /* override the underline pseudo-element */
  background: none;
  width: auto;
  height: auto;
}
.nav-item:hover > a::before {
  transform: rotate(180deg);
  opacity: 0.85;
}

/* === DROPDOWN PANEL === */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(22, 21, 59, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(228, 199, 229, 0.15);
  border-radius: 8px;
  min-width: 220px;
  margin-top: 0.5rem;
  padding: 1rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition);
  z-index: 1001;
  box-shadow: var(--shadow-lg);
}
.dropdown-menu a {
  display: block;
  padding: 0.6rem 1.5rem;
  color: var(--aura);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 400;
  transition: color var(--transition), background var(--transition);
}
.dropdown-menu a::after { display: none; }       /* no underline grow inside dropdowns */
.dropdown-menu a:hover {
  background: rgba(244, 161, 75, 0.1);
  color: var(--amber);
}
.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mega menu (3-column dropdown).
   Min-width sized so the longest current heading ("ENERGY & INSIGHT" with
   uppercase + 0.2em letter-spacing) sits comfortably on a single line. */
.dropdown-menu.mega-menu {
  min-width: 680px;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}
.mega-menu-column h4 {
  color: var(--amber-light);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 237, 220, 0.2);
}
.mega-menu-column a {
  display: block;
  padding: 0.4rem 0;
  /* inherits font-weight 400 from .dropdown-menu a — heavier reads cleaner */
}
.mega-menu-column a:hover { background: none; }

/* === HEADER CTA + UTILITY ICONS === */
.header-cta {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.header-icon {
  color: var(--aura);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color var(--transition);
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
}
.header-icon::after { display: none; }            /* utility icons aren't nav links */
.header-icon:hover { color: var(--amber); }

/* Account avatar + cart bag icon (live inside .header-icon utility buttons) */
.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--aura);
  transition: color var(--transition);
}
.header-icon:hover .account-avatar { color: var(--amber); }

.bag-icon { position: relative; }
.bag-icon i {
  font-size: 1.05rem;
  color: var(--aura);
  transition: color var(--transition);
}
.bag-icon:hover i { color: var(--amber); }

.bag-count {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  font-size: 0;
  color: transparent;
  line-height: 0;
  pointer-events: none;
}
.bag-count[data-count="0"] { display: none; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  header { padding: 1rem; }
  .header-container { gap: 1rem; }
  nav { display: none; }
}

/* === HERO === */
.hero {
  position:relative;min-height:85vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:8rem 2rem;
  background:linear-gradient(160deg,var(--midnight) 0%,var(--deep-purple) 50%,var(--night-sky) 100%);
  overflow:hidden;
}
.hero::before {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 50%,rgba(135,41,165,0.15) 0%,transparent 60%),
             radial-gradient(ellipse at 70% 30%,rgba(20,67,143,0.12) 0%,transparent 50%);
}
.hero-mini{min-height:50vh;padding:8rem 2rem 4rem}
.hero-content{position:relative;z-index:2;max-width:720px;margin:0 auto}
.hero-overline, .overline {
  font-family:var(--font-body);font-size:0.8rem;letter-spacing:0.25em;
  text-transform:uppercase;color:var(--amber);font-weight:500;margin-bottom:1.5rem;
}
.hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4.5rem);color:var(--aura);line-height:1.15;margin-bottom:2rem}
.hero-subtitle, .subtitle {
  font-family:var(--font-body);font-size:1.125rem;color:rgba(228,199,229,0.65);
  font-weight:300;max-width:560px;margin:0 auto 2.5rem;line-height:1.8;
}
.hero-buttons, .btn-row, .cta-buttons, .button-group {
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
}

/* === BREADCRUMB ===
   Canonical L1 page navigation trail. Self-centering at max-width 1400px,
   so the hero content below can align to the same horizontal edge.
   Markup: <nav class="breadcrumb" aria-label="Breadcrumb">
             <a href="...">Home</a>
             <span class="sep">/</span>
             <span>Current Page</span>
           </nav>
*/
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 1200px;
  margin: 70px auto 0;
  padding: 2rem 2rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(228, 199, 229, 0.6);
}
.breadcrumb a {
  color: rgba(228, 199, 229, 0.7);
  font-size: 0.85rem;
  font-weight: 300;
  text-decoration: none;
  transition: color var(--transition);
}
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb span.sep { opacity: 0.4; }
.breadcrumb > span:not(.sep) { color: var(--soft-white); }

@media (max-width: 900px) {
  .breadcrumb { margin-top: 60px; padding: 1.25rem 1.5rem 0.5rem; }
}

/* === PAGE HERO (editorial L1 split: text left, image right) ===
   Full-bleed dark hero with eyebrow + h1 + italic lede on the left,
   and a right-positioned image (single .page-hero-image, or 3-photo
   .page-hero-masonry) that can overflow into the section below.

   Content padding uses max(2rem, calc((100vw - 1200px) / 2 + 2rem))
   so the hero's text edge always aligns with the .breadcrumb edge,
   regardless of viewport width.

   Markup:
   <section class="page-hero">
     <img class="page-hero-image" src="..." alt="">
     <div class="page-hero-content">
       <div class="page-eyebrow">
         <span class="eyebrow-mark"></span>
         <span>Eyebrow Text</span>
         <span class="eyebrow-mark"></span>
       </div>
       <h1>Page Title</h1>
       <p class="hero-pull">Italic Cormorant lede.</p>
     </div>
   </section>
*/
.page-hero {
  position: relative;
  min-height: 440px;
  margin-top: 1.25rem;
  background: var(--dark-bg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 4rem max(2rem, calc((100vw - 1200px) / 2 + 2rem)) 3.5rem;
  overflow: visible;
  border-bottom: 1px solid rgba(228, 199, 229, 0.08);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(135, 41, 165, 0.4), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(20, 67, 143, 0.4), transparent 60%),
    linear-gradient(180deg, #0B1428 0%, #16153B 60%, #0B1428 100%);
  z-index: 0;
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center bottom, transparent 50%, rgba(8, 18, 36, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}
.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  animation: pageHeroFadeUp 1.1s ease-out both;
}

/* Eyebrow with horizontal mark spans on either side */
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lavender-light);
  opacity: 0.95;
  margin-bottom: 1.4rem;
}
.page-eyebrow .eyebrow-mark {
  width: 24px;
  height: 1px;
  background: rgba(219, 191, 228, 0.55);
}

/* Hero typography */
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6.5vw, 5.5rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--soft-white);
  margin-bottom: 1.4rem;
}
.page-hero .hero-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(228, 199, 229, 0.88);
  max-width: 520px;
  margin: 0;
}

/* Twinkling star field — decorative overlay biased to one side via mask gradient.
   Default biases LEFT (matches index.html hero pattern). Add .page-hero-stars--right
   to invert and bias to the right. JS generates the .star spans (see page script).
   Apply with: <div class="page-hero-stars" aria-hidden="true"></div> */
.page-hero-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to right, #000 5%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.3) 65%, transparent 90%);
  mask-image: linear-gradient(to right, #000 5%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.3) 65%, transparent 90%);
}
.page-hero-stars--right {
  -webkit-mask-image: linear-gradient(to left, #000 5%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.3) 65%, transparent 90%);
  mask-image: linear-gradient(to left, #000 5%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.3) 65%, transparent 90%);
}
.page-hero-stars .star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #FFF5E6;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(255, 240, 200, 0.6);
  opacity: 0;
  animation: pageHeroTwinkle 4s ease-in-out infinite;
  will-change: opacity, transform;
}
.page-hero-stars .star.star-md {
  width: 3px;
  height: 3px;
  box-shadow: 0 0 6px 1.5px rgba(255, 240, 200, 0.7);
}
.page-hero-stars .star.star-lg {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 8px 2px rgba(255, 240, 200, 0.8);
}
@keyframes pageHeroTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1.15); }
}

/* Image variant: single overflow image (most common) */
.page-hero-image {
  position: absolute;
  top: 3rem;
  right: max(2rem, calc((100vw - 1200px) / 2 + 2rem));
  width: clamp(320px, 34vw, 460px);
  height: auto;
  z-index: 2;
  display: block;
  border-radius: 4px;
  /* Three layered animations:
     - pageHeroImageFadeIn: opacity fade on load
     - pageHeroImageFloat: gentle vertical drift (breath)
     - pageHeroImageEthereal: filter-chain pulse of brightness + warm/cool
       drop-shadow aura. The drop-shadows respect the image's alpha channel,
       so the halo only renders around the figure's silhouette, not the
       bounding rectangle. */
  animation:
    pageHeroImageFadeIn 2.8s ease-out both,
    pageHeroImageFloat 10s ease-in-out 2.8s infinite,
    pageHeroImageEthereal 9s ease-in-out infinite;
}
@keyframes pageHeroImageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pageHeroImageFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes pageHeroImageEthereal {
  0%, 100% {
    filter:
      brightness(1) contrast(1) saturate(1)
      drop-shadow(0 0 14px rgba(255, 240, 220, 0.25))
      drop-shadow(0 0 40px rgba(219, 191, 228, 0.18));
  }
  50% {
    filter:
      brightness(1.10) contrast(1.05) saturate(1.08)
      drop-shadow(0 0 24px rgba(255, 240, 220, 0.55))
      drop-shadow(0 0 60px rgba(219, 191, 228, 0.40));
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-image { animation: none; }
}

/* Modifier: portrait variant. Use on practitioner bio pages and any L1 hero
   whose image is a face or human silhouette. Drop-shadow respects alpha,
   so on portraits the halo renders tightly around the figure and reads more
   strongly than on landscape art. This modifier halves the halo amplitude
   and stretches the breath cycle from 9s to 14s for a quieter cadence.
   Apply with: <img class="page-hero-image page-hero-image--portrait"> */
.page-hero-image--portrait {
  animation:
    pageHeroImageFadeIn 2.8s ease-out both,
    pageHeroImageFloat 10s ease-in-out 2.8s infinite,
    pageHeroImagePortraitEthereal 14s ease-in-out infinite;
}
@keyframes pageHeroImagePortraitEthereal {
  0%, 100% {
    filter:
      brightness(1) contrast(1) saturate(1)
      drop-shadow(0 0 10px rgba(255, 240, 220, 0.16))
      drop-shadow(0 0 28px rgba(219, 191, 228, 0.12));
  }
  50% {
    filter:
      brightness(1.04) contrast(1.02) saturate(1.03)
      drop-shadow(0 0 16px rgba(255, 240, 220, 0.30))
      drop-shadow(0 0 42px rgba(219, 191, 228, 0.20));
  }
}

/* Modifier: image-prominent variant — bigger right image, tighter content column.
   Image starts higher (top: -6rem) to manage the larger overflow into the next section.
   Apply with: <section class="page-hero page-hero--image-prominent"> */
.page-hero--image-prominent .page-hero-image {
  width: clamp(420px, 44vw, 620px);
  top: -6rem;
}
.page-hero--image-prominent .page-hero-content {
  max-width: 480px;
}
.page-hero--image-prominent .hero-pull {
  max-width: 420px;
}
.page-hero--image-prominent + section,
.page-hero--image-prominent + .section {
  padding-top: 10rem;
}

/* Image variant: 3-photo masonry */
.page-hero-masonry {
  position: absolute;
  top: 3rem;
  right: max(2rem, calc((100vw - 1200px) / 2 + 2rem));
  width: clamp(320px, 34vw, 460px);
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: center;
  animation: pageHeroFadeUp 1.3s ease-out both;
}
.page-hero-masonry .masonry-col {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.page-hero-masonry .masonry-img {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(135deg, #1A1648 0%, #0F1530 50%, #1B1340 100%);
  position: relative;
}
.page-hero-masonry .masonry-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.page-hero-masonry .masonry-img:hover img { transform: scale(1.04); }
.page-hero-masonry .masonry-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 18, 36, 0) 60%, rgba(8, 18, 36, 0.22) 100%);
  pointer-events: none;
}
.page-hero-masonry .col-left .masonry-img { aspect-ratio: 530 / 764; }
.page-hero-masonry .col-right .masonry-img:nth-child(1) { aspect-ratio: 530 / 764; }
.page-hero-masonry .col-right .masonry-img:nth-child(2) { aspect-ratio: 1280 / 695; }

/* Give the next section room to absorb image overflow */
.page-hero + section,
.page-hero + .section {
  padding-top: 6rem;
}

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

/* ==========================================================================
   POSTER HERO. Alternative L3 header for practitioner bios and similar
   contemplative pages. A 50/50 editorial spread: copy on the left
   (right-aligned to meet the gutter), framed portrait on the right
   (anchored to the gutter). Text and image meet at a clean center axis.
   Use .poster-hero in place of .page-hero on bio pages.
   ========================================================================== */
.poster-hero {
  position: relative;
  min-height: 50vh;
  padding: 3rem max(2rem, calc((100vw - 1200px) / 2 + 2rem)) 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  background: var(--dark-bg);
  border-bottom: 1px solid rgba(228, 199, 229, 0.08);
  overflow: visible;
}
.poster-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(135, 41, 165, 0.22), transparent 60%),
    radial-gradient(ellipse at 75% 70%, rgba(20, 67, 143, 0.20), transparent 65%),
    linear-gradient(180deg, #0B1428 0%, #16153B 60%, #0B1428 100%);
  z-index: 0;
  pointer-events: none;
}

.poster-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 1.5rem;
  animation: pageHeroFadeUp 1.1s ease-out both;
}

.poster-hero-eyebrow {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lavender-light);
  opacity: 0.95;
  margin: 0 0 0.75rem;
  line-height: 1.3;
}
.poster-hero-eyebrow .eyebrow-mark {
  width: 28px;
  height: 1px;
  background: rgba(219, 191, 228, 0.55);
}

.poster-hero-name {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 6rem);
  font-weight: 500;
  line-height: 1.02;
  color: var(--soft-white);
  margin: 0;
  max-width: 100%;
}

.poster-hero-role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(228, 199, 229, 0.78);
  margin: 0;
  max-width: 460px;
}

.poster-hero-portrait {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: clamp(360px, 38vw, 500px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  line-height: 0;
  justify-self: start;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
  animation: pageHeroFadeUp 1.1s ease-out 0.12s both;
}
.poster-hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.04) contrast(1.03) saturate(1.02);
}
.poster-hero-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(228, 199, 229, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.poster-hero + section,
.poster-hero + .section {
  padding-top: 6rem;
}

@media (max-width: 900px) {
  .poster-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 4rem 1.5rem;
    gap: 3rem;
  }
  .poster-hero-content {
    align-items: flex-start;
    text-align: left;
    order: 2;
  }
  .poster-hero-portrait {
    order: 1;
    max-width: 360px;
    justify-self: center;
  }
}

@media (max-width: 1024px) {
  .page-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
    padding: 3rem 1.5rem 2.5rem;
    min-height: 0;
  }
  .page-hero-content { max-width: 100%; }
  .page-hero-image,
  .page-hero-masonry {
    position: static;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
  }
  .page-hero-masonry { gap: 1.1rem; }
  .page-hero-masonry .masonry-col { gap: 1.1rem; }
  .page-hero + section,
  .page-hero + .section { padding-top: 4rem; }
}

/* === BUTTONS ===
   Canonical button system. Base .btn carries shape and rhythm; color comes from
   the variant class. Size and layout modifiers compose on top.
   See STYLE-GOVERNANCE.md for usage rules.
*/
.btn {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}

/* --- Color variants --- */

/* Indigo CTA, hovers to amber. The strongest action on a dark surface. */
.btn-accent { background-color: var(--indigo); color: var(--soft-white); }
.btn-accent:hover {
  background-color: var(--amber);
  color: var(--midnight);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Amber CTA. High-emphasis "convert now" action. .btn-cta is a legacy alias. */
.btn-amber, .btn-cta { background-color: var(--amber); color: var(--midnight); }
.btn-amber:hover, .btn-cta:hover {
  background-color: #FFB366;
  color: var(--midnight);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Aura on dark sections. Soft, editorial. The "primary" inside dark hero panels. */
.btn-primary { background-color: var(--aura); color: var(--deep-purple); }
.btn-primary:hover {
  background-color: var(--soft-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Outlined aura. The companion to .btn-primary on dark surfaces. */
.btn-secondary {
  background-color: transparent;
  color: var(--aura);
  border: 1px solid var(--aura);
}
.btn-secondary:hover {
  background-color: rgba(228, 199, 229, 0.1);
  border-color: var(--amber);
  color: var(--amber);
}

/* Ghost outline. Quieter than .btn-secondary; muted aura border. */
.btn-ghost {
  background: transparent;
  color: var(--aura);
  border: 1px solid rgba(228, 199, 229, 0.45);
}
.btn-ghost:hover {
  border-color: var(--aura);
  color: var(--soft-white);
}

/* Amber outline. Used on warm sections where amber is the accent. */
.btn-outline-amber {
  background-color: transparent;
  color: var(--amber);
  border: 1px solid var(--amber);
}
.btn-outline-amber:hover {
  background-color: var(--amber);
  color: var(--midnight);
}

/* --- Size modifiers --- */
.btn-sm, .btn-small { padding: 0.4rem 1rem; font-size: 0.8rem; }
.btn-lg { padding: 0.75rem 2rem; font-size: 1rem; }

/* --- Layout modifier --- */
.btn-full { width: 100%; }

/* === SECTIONS === */
.section{padding:4.5rem 0}
.section-dark{background:var(--midnight);color:var(--aura)}
.section-dark h2,.section-dark h3,.section-dark h4{color:var(--aura)}
.section-dark p{color:rgba(228,199,229,0.7)}
.section-light{background:var(--soft-white)}
.section-newsletter{padding:5rem 0;text-align:center}
.section-header, .section-header-light{text-align:center;margin-bottom:3rem}
.section-overline{font-family:var(--font-body);font-size:0.8rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);font-weight:500;margin-bottom:0.75rem}
.section-title{font-size:clamp(1.6rem,3vw,2.5rem);margin-bottom:1rem;color:var(--soft-white)}
.section-subtitle, .section-description {
  font-size:1.125rem;color:var(--warm-gray);max-width:600px;margin:0 auto;font-weight:300;
}
.section-dark .section-subtitle, .section-dark .section-description{color:rgba(228,199,229,0.55)}
section[id]{scroll-margin-top:80px}

/* === CARDS === */
.card-grid{display:grid;gap:2rem}
.card-grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card-grid-2-founders{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card-grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card-grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card {
  display:block;background:var(--pure-white);border-radius:var(--radius-lg);
  padding:2.5rem;box-shadow:var(--shadow-sm);border:1px solid var(--light-gray);
  transition:all .3s var(--ease);text-decoration:none;color:inherit;
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.card-dark, .value-card {
  background:rgba(228,199,229,0.04);border:1px solid rgba(228,199,229,0.08);
  border-radius:var(--radius-lg);padding:2.5rem;transition:all .3s var(--ease);
}
.card-dark:hover, .value-card:hover{border-color:rgba(135,41,165,0.3);box-shadow:var(--shadow-glow)}
.card-icon{font-size:2rem;margin-bottom:1rem}
.card-title{font-family:var(--font-heading);font-size:1.25rem;margin-bottom:0.75rem}
.card-text{font-size:0.875rem;color:var(--warm-gray);line-height:1.7}
.section-dark .card-text{color:rgba(228,199,229,0.6)}
.card-link{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.875rem;font-weight:500;color:var(--amber);margin-top:1rem}
.card-link:hover{color:#e5923c}

/* === SERVICE CARDS === */
.category-section{margin-bottom:4rem}
.category-header {
  display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem;
  padding-bottom:1rem;border-bottom:1px solid rgba(228,199,229,0.1);
}
.category-icon{font-size:2.5rem;flex-shrink:0}
.category-header h2{font-size:clamp(1.25rem,2vw,1.75rem);color:var(--aura)}
.category-header p{font-size:0.875rem;color:rgba(228,199,229,0.5);margin-top:0.5rem}
.service-card {
  background:rgba(228,199,229,0.04);border:1px solid rgba(228,199,229,0.08);
  border-radius:var(--radius-lg);padding:2rem;transition:all .3s var(--ease);
}
.service-card:hover{border-color:rgba(135,41,165,0.25);background:rgba(228,199,229,0.06)}
.service-card h3{font-size:1.25rem;color:var(--aura);margin-bottom:0.75rem}
.service-card p{font-size:0.875rem;color:rgba(228,199,229,0.6);line-height:1.7;margin-bottom:1rem}
.service-price, .price{font-family:var(--font-body);font-size:0.875rem;color:var(--amber);font-weight:500}

/* === EDITORIAL COLUMN GRID (.gather-grid / .gather-card) ===
   Minimal editorial cards. No card chrome. Optional image at the top
   with 8px holder radius, title and copy below, and a feathered vertical
   hairline between columns acting as a fine pen stroke. Cards stop being
   objects and start being editorial columns. Use when items belong to a
   single narrative breath and an enclosing surface would only get in the way.
   Image is optional. Promoted from the-sanctuary.html on 2026-05-14.
   ============================================================== */
.gather-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
}
.gather-card {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding-left: 2.5rem;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.gather-card::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(228, 199, 229, 0.22) 22%,
    rgba(228, 199, 229, 0.22) 78%,
    transparent 100%
  );
  pointer-events: none;
}
.gather-card:first-child { padding-left: 0; }
.gather-card:first-child::before { display: none; }
.gather-card:hover { transform: translateY(-4px); }
.gather-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  background: var(--midnight);
  border-radius: var(--radius-md, 8px);
  margin-bottom: 1.25rem;
}
.gather-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gather-card:hover .gather-image img { transform: scale(1.04); }
.gather-content {
  padding: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.gather-content h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--soft-white);
  line-height: 1.18;
  margin-bottom: 0.65rem;
}
.gather-content p {
  font-size: 0.85rem;
  color: var(--aura);
  opacity: 0.85;
  margin-bottom: 1.25rem;
  flex-grow: 1;
  line-height: 1.65;
}
.gather-content a {
  display: inline-block;
  color: var(--amber);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: color var(--transition);
}
.gather-content a:hover { color: var(--soft-white); }
@media (max-width: 768px) {
  .gather-card {
    padding-left: 0;
    padding-top: 2rem;
  }
  .gather-card::before {
    left: 10%;
    right: 10%;
    top: -1rem;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(228, 199, 229, 0.22) 22%,
      rgba(228, 199, 229, 0.22) 78%,
      transparent 100%
    );
  }
  .gather-card:first-child { padding-top: 0; }
}

/* === CATEGORY CARD (image-led L1 wayfinding) ===
   Canonical L1 category card. Image at the top (240px tall, scales on hover),
   then a dark-blue card body holding title + description + Explore link.
   Used for L1 wayfinding grids where each category has signature imagery.
   Currently used on Healing Arts and Gather.

   Class names retain the .art-* prefix for compatibility with the Healing Arts
   page where this pattern originated; treat them as generic, not "art"-specific.

   Markup: <div class="arts-grid">
             <div class="art-category">
               <div class="art-image">
                 <img src="..." alt="..." loading="lazy">
               </div>
               <div class="art-content">
                 <h3>Title</h3>
                 <p>Description.</p>
                 <a href="...">Explore <i class="fas fa-arrow-right"></i></a>
               </div>
             </div>
           </div>
*/
.arts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 2.5rem;
}
.art-category {
  background: var(--dark-blue-card);
  border: 1px solid rgba(228, 199, 229, 0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all var(--transition);
}
.art-category:hover {
  transform: translateY(-10px);
  border-color: rgba(228, 199, 229, 0.3);
  box-shadow: var(--shadow-lg);
}
.art-image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
  background: var(--midnight);
}
.art-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.art-category:hover .art-image img { transform: scale(1.04); }

.art-content {
  padding: 2rem 3.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.art-content h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--soft-white);
  line-height: 1.18;
  margin-bottom: 0.85rem;
}
.art-content p {
  font-size: 0.92rem;
  color: var(--aura);
  opacity: 0.85;
  margin-bottom: 1.5rem;
  flex-grow: 1;
  line-height: 1.7;
}
.art-content a {
  display: inline-block;
  color: var(--amber);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color var(--transition);
}
.art-content a i { margin-left: 0.5rem; }
.art-content a:hover { color: var(--soft-white); }

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

/* === EVENTS PREVIEW ===
   Pre-footer or mid-page block listing the next handful of events. Date stamp
   on the left of each event card, title + meta + tag + description on the
   right. Use on L1 pages where events are a recurring need (Gather, Sanctuary,
   Learn). Pair with a .btn-accent "See Full Calendar" CTA below the list.
*/
.events-preview {
  background: linear-gradient(135deg, rgba(59, 0, 82, 0.3) 0%, rgba(46, 45, 95, 0.3) 100%);
  border: 1px solid rgba(228, 199, 229, 0.1);
  border-radius: var(--radius-md);
  padding: 3rem;
  margin-bottom: 3rem;
}
.events-preview h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin-bottom: 2rem;
  color: var(--aura);
}
.events-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.event-card {
  background: var(--dark-bg);
  border: 1px solid rgba(228, 199, 229, 0.1);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  gap: 1.5rem;
  transition: all var(--transition);
}
.event-card:hover {
  border-color: rgba(228, 199, 229, 0.3);
  box-shadow: var(--shadow-md);
}
.event-date {
  background: var(--amber);
  color: var(--midnight);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  text-align: center;
  min-width: 72px;
  font-weight: 700;
  flex-shrink: 0;
  align-self: flex-start;
}
.event-date .month {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
}
.event-date .day {
  font-size: 2rem;
  display: block;
}
.event-date .weekday {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 400;
  opacity: 0.5;
  margin-bottom: 0.15rem;
}
.event-info h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.3rem;
  color: var(--aura);
}
.event-meta {
  display: flex;
  gap: 1rem;
  margin: 0.5rem 0;
  font-size: 0.85rem;
  opacity: 0.7;
}
.event-tag {
  display: inline-block;
  background: rgba(135, 41, 165, 0.2);
  color: var(--lavender-light);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.05em;
  width: fit-content;
  margin-bottom: 0.6rem;
}
.event-description {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}
.events-cta { text-align: center; }

@media (max-width: 768px) {
  .events-preview { padding: 2rem; }
}

/* === MEMBERSHIP BANNER ===
   Pre-footer conversion to membership. Painterly stamp + spread composition:
   editorial copy column on the left, "JOIN NOW" stamp block on the right.
   See SECTION-COMPONENTS.md §2 for full design rationale and variants.
   The JOIN NOW uppercase serif is the documented exception to the eyebrow rule.
*/
.membership-banner {
  padding: 4rem;
  margin: 3rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  justify-content: center;
}
.membership-content {
  text-align: left;
  max-width: 22rem;
  margin: 0 auto;
}
.membership-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--soft-white);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.membership-content p {
  font-size: 1.05rem;
  color: var(--aura);
  margin-bottom: 1.5rem;
}
.membership-cta-block {
  background-image: url('assets/images/backgrounds/member-bg-img.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border-radius: var(--radius-xl);
  padding: 2rem 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  aspect-ratio: 1.6 / 1;
  max-width: 620px;
  width: 100%;
  justify-self: start;
}
.membership-cta-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 0.25rem;
}
.membership-cta-icons img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: 0.9;
}
.membership-cta-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--midnight);
  line-height: 1;
  text-transform: uppercase;
}
.membership-cta-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--midnight);
  opacity: 0.85;
}
@media (max-width: 768px) {
  .membership-banner { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem; }
  .membership-cta-block { aspect-ratio: auto; padding: 1.75rem; max-width: 100%; justify-self: center; }
  .membership-cta-icons { gap: 1.25rem; }
  .membership-cta-icons img { width: 36px; height: 36px; }
  .membership-content { text-align: center; }
}

/* === SANCTUARY / AMENITY GRID === */
.sanctuary-text {
  font-size:1.125rem;color:rgba(228,199,229,0.7);line-height:1.8;
  max-width:800px;margin:0 auto 3rem;text-align:center;
}
.amenity-grid, .feature-grid, .values-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;
}
.amenity-item, .feature-item {
  display:flex;align-items:center;gap:0.75rem;
  padding:1rem;border-radius:var(--radius-md);
  background:rgba(228,199,229,0.04);border:1px solid rgba(228,199,229,0.06);
}
.amenity-icon, .feature-icon{font-size:1.5rem;flex-shrink:0}
.amenity-name{font-size:0.875rem;color:rgba(228,199,229,0.7)}
.feature-item span{font-size:0.875rem;color:rgba(228,199,229,0.7)}

/* === STORY GRID (about page) === */
.story-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;
}
.story-content p{margin-bottom:1.5rem;line-height:1.8}
.image-placeholder {
  height:320px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(135,41,165,0.15),rgba(20,67,143,0.15));
  display:flex;align-items:center;justify-content:center;
  color:var(--warm-gray);font-size:0.875rem;
  border:1px solid var(--light-gray);
}
@media(max-width:768px){
  .story-grid{grid-template-columns:1fr}
}

/* === TEAM / BIO CARDS === */
.team-card{text-align:center;padding:2.5rem;background:var(--pure-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--light-gray)}
.team-avatar {
  width:120px;height:120px;border-radius:50%;
  background:linear-gradient(135deg,var(--indigo),var(--night-sky));
  margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:2rem;color:var(--aura);
}
.team-name{font-family:var(--font-heading);font-size:1.25rem;margin-bottom:0.5rem}
.team-role{font-size:0.875rem;color:var(--amber);font-weight:500;margin-bottom:1rem}
.team-bio{font-size:0.875rem;color:var(--warm-gray);line-height:1.7}

/* === NEWSLETTER === */
.newsletter-section, .section-newsletter, .newsletter {
  background:linear-gradient(135deg,var(--indigo),var(--night-sky));
  padding:5rem 0;text-align:center;
}
.newsletter-content{max-width:560px;margin:0 auto}
.newsletter-section h2, .section-newsletter h2, .newsletter h2, .newsletter-content h2 {
  color:var(--pure-white);margin-bottom:0.75rem;font-size:clamp(1.6rem,3vw,2.5rem);
}
.newsletter-section p, .section-newsletter p, .newsletter p, .newsletter-content p {
  color:rgba(255,255,255,0.7);margin-bottom:2rem;max-width:480px;margin-left:auto;margin-right:auto;
}
.newsletter-form{display:flex;gap:0.75rem;max-width:480px;margin:0 auto}
.newsletter-form input, .newsletter-input {
  flex:1;padding:0.75rem 1.5rem;border:1px solid rgba(255,255,255,0.25);
  border-radius:var(--radius-full);background:rgba(255,255,255,0.1);
  color:var(--pure-white);font-family:var(--font-body);font-size:0.875rem;outline:none;
}
.newsletter-form input::placeholder, .newsletter-input::placeholder{color:rgba(255,255,255,0.4)}
.newsletter-form input:focus, .newsletter-input:focus{border-color:var(--amber)}
@media(max-width:600px){.newsletter-form{flex-direction:column}}

/* === CONTACT === */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}
.contact-form-wrapper{max-width:100%}
.contact-form{display:grid;gap:1.25rem}
.form-group label{display:block;font-size:0.875rem;font-weight:500;color:var(--aura);margin-bottom:0.5rem}
.form-group input, .form-group textarea, .form-group select {
  width:100%;padding:0.75rem 1rem;border:1px solid rgba(228,199,229,0.15);
  border-radius:var(--radius-md);background:rgba(228,199,229,0.04);
  color:var(--aura);font-family:var(--font-body);font-size:1rem;outline:none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{border-color:var(--indigo)}
.form-group textarea{min-height:140px;resize:vertical}
.form-group select{appearance:auto}
.form-group select option{background:var(--midnight);color:var(--aura)}
.form-note{font-size:0.875rem;color:rgba(228,199,229,0.5);margin-top:1rem}

.contact-info{display:flex;flex-direction:column;gap:2rem}
.info-box {
  background:rgba(228,199,229,0.04);border:1px solid rgba(228,199,229,0.08);
  border-radius:var(--radius-lg);padding:2rem;
}
.info-box h3{color:var(--aura);font-size:1.25rem;margin-bottom:1rem}
.info-box p, .info-box a{font-size:0.875rem;color:rgba(228,199,229,0.7);line-height:1.7}
.info-box a{color:var(--amber)}
.info-box a:hover{color:#e5923c}

.hours-table{width:100%;border-collapse:collapse}
.hours-table td{padding:0.75rem 0;border-bottom:1px solid rgba(228,199,229,0.08);font-size:0.875rem;color:rgba(228,199,229,0.7)}
.hours-table td:first-child{font-weight:500;color:var(--aura)}
.hours-table td:last-child{text-align:right}
.hours-note{font-size:0.75rem;color:rgba(228,199,229,0.4);margin-top:0.75rem;font-style:italic}
.booking-note, .note{font-size:0.875rem;color:rgba(228,199,229,0.5);margin-top:1rem}

.map-placeholder {
  width:100%;height:280px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(22,21,59,0.8),rgba(20,67,143,0.6));
  display:flex;align-items:center;justify-content:center;
  color:rgba(228,199,229,0.4);font-size:0.875rem;
  border:1px solid rgba(228,199,229,0.08);
}
.map-content{display:flex;align-items:center;justify-content:center;height:100%}
.garden-note{font-size:0.875rem;color:rgba(228,199,229,0.5);font-style:italic;margin-top:1.5rem;text-align:center}

/* === BREATHE BANNER ===
   Pre-footer visual reset. Sits flush against the footer (no gap) and
   carries the soft purple→midnight gradient that signals the page is
   closing. Used on most L1 pages. */
.breathe-banner {
  background: var(--gradient-breathe-banner);
  height: 90px;
  padding: 0 clamp(2rem, 5vw, 5rem);
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.breathe-banner-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.breathe-banner h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  color: var(--soft-white);
  margin: 0;
}
.breathe-banner-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.breathe-banner-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}
/* When breathe-banner immediately precedes footer, the footer drops its
   top margin and border so they read as one continuous closing gesture. */
.breathe-banner + footer {
  margin-top: 0;
  border-top: none;
}
@media (max-width: 768px) {
  .breathe-banner {
    padding: 1.5rem clamp(1.5rem, 5vw, 5rem);
    height: auto;
  }
  .breathe-banner-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 1rem;
  }
  .breathe-banner-actions { justify-content: center; }
}

/* === FOOTER ===
   Six-column anchor at the bottom of every page. The four menu columns
   (Sanctuary, Healing Arts, Gather, Connect) are equal width; Location
   and Hours columns are slightly wider (1.1fr / 1.3fr) to accommodate
   address text. A subtle left divider separates the menu columns from
   the info columns. Social icons sit beneath Location/Hours, overlapping
   into row 1 via negative margin. See STYLE-GOVERNANCE.md.
*/
footer {
  margin-top: 6rem;
  background: var(--midnight);
  border-top: 1px solid rgba(228, 199, 229, 0.1);
  padding: 4rem 2rem 2rem;
}

.footer-grid {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(2rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.1fr 1.3fr;
  gap: 1.75rem;
}

.footer-column h3 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  color: var(--soft-white);
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.footer-column ul { list-style: none; padding: 0; }
.footer-column ul li { margin-bottom: 0.75rem; }
.footer-column ul li a {
  color: var(--aura);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 300;
  transition: color var(--transition);
}
.footer-column ul li a:hover { color: var(--amber); }

/* --- Info columns (Location, Hours): paragraphs instead of link lists --- */
.footer-column.footer-column-info h3 {
  color: var(--amber-light);
}
.footer-column-info p {
  color: #CFBEAE;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.55;
  margin: 0 0 0.45rem 0;
  max-width: none;
}

/* Visual separator between menu columns and info group */
.footer-grid > .footer-column:nth-child(5) {
  padding-left: 1.75rem;
  margin-left: 0.5rem;
  border-left: 1px solid rgba(228, 199, 229, 0.12);
}

/* --- Social icons: row beneath Location/Hours, pulled up via negative margin --- */
.footer-social {
  grid-column: 5 / -1;
  display: flex;
  gap: 1.1rem;
  align-items: center;
  padding-left: 2.25rem;
  margin-top: -6rem;
}
.footer-social a {
  color: var(--aura);
  opacity: 0.7;
  font-size: 1.05rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(228, 199, 229, 0.15);
  transition: opacity var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.footer-social a:hover {
  opacity: 1;
  color: var(--rose-light);
  border-color: rgba(245, 206, 220, 0.5);
  transform: translateY(-1px);
}

/* --- Bottom bar: copyright + utility links, left-aligned with dot separators --- */
.footer-bottom-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.85rem clamp(2rem, 5vw, 5rem) 0.75rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(228, 199, 229, 0.1);
  color: #8C7E94;
  font-weight: 300;
  font-size: 0.72rem;
}
.footer-bottom-bar p { margin: 0; }
.footer-bottom-bar a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.footer-bottom-bar a:hover { color: var(--aura); }
.footer-sep { opacity: 0.5; }

/* --- Responsive collapse --- */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .footer-grid > .footer-column:nth-child(5) {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }
  .footer-social {
    grid-column: 1 / -1;
    padding-left: 0;
    margin-top: 0;
    justify-content: flex-start;
  }
}
@media (max-width: 700px) {
  footer { padding: 3rem 1.5rem 1.5rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* === MISC / UTILITY === */
.text-center{text-align:center}
.link{color:var(--amber);text-decoration:underline}
.link:hover{color:#e5923c}