/* ========================================================== *
 *  Woosah United — primary stylesheet
 *  Built by AppWT Web & AI Solutions (AppWT LLC) — https://appwt.com
 *  Brand: holistic-services-and-products-in-southeastern-michigan
 *  Last refresh: 2026-05-01 (logo-cohesive palette + Rule-19 baseline + PWA + safe-area)
 * ========================================================== */

/* ------------------------------------------------------------------ *
 * 0. Rule-19 baseline — no horizontal scroll, ever (vertical only).
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
html, body { max-width: 100%; width: 100%; margin: 0; }
body { overflow-x: clip; overflow-x: hidden; min-height: 100vh; min-height: 100dvh; }
img, video, iframe, picture, svg, canvas, embed, object { max-width: 100%; height: auto; display: block; }
table { max-width: 100%; overflow-x: auto; display: block; }
pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; white-space: pre-wrap; }
main, [role="main"] { max-width: 100%; overflow-x: clip; }

/* hyphens: NEVER auto. Words wrap whole. */
h1, h2, h3, h4, h5, h6, p, li, span, a, td, th, label, blockquote, figcaption, address, dt, dd, button, .btn {
  hyphens: none; -webkit-hyphens: none; -ms-hyphens: none;
  overflow-wrap: break-word;
}

/* Tap-delay removal */
* { touch-action: manipulation; }

/* ------------------------------------------------------------------ *
 * 1. Logo-cohesive design tokens (raspberry-bridge palette, 2026-05-01)
 * ------------------------------------------------------------------ */
:root {
  /* Primary palette — sampled from the Tree-of-Life logo */
  --woosah-plum:        #5A2D6E;   /* wordmark mid-tone */
  --woosah-plum-deep:   #3D1F4F;   /* deepest root shadow */
  --woosah-plum-soft:   #7A4488;   /* hover/highlight plum */
  --woosah-raspberry:   #A04070;   /* mid-root bridge — the cohesion link */
  --woosah-magenta:     #B85580;   /* lighter raspberry */
  --woosah-coral:       #D06050;   /* upper-root coral */
  --woosah-orange:      #E08030;   /* leaf primary */
  --woosah-orange-soft: #E89055;   /* leaf hover */
  --woosah-gold:        #E0B070;   /* leaf gold tip */
  --woosah-honey:       #F0C890;   /* lightest gold */
  --woosah-cream:       #F8EFDD;   /* logo background */
  --woosah-cream-soft:  #FCF7EC;   /* alt section */
  --woosah-bone:        #EEE3CE;   /* bone/parchment */
  --woosah-white:       #FFFCF6;   /* near-white */
  --woosah-ink:         #2A1B33;   /* body text */
  --woosah-stone:       #6B5B70;   /* secondary text */
  /* Sage green accents (subtle nature hint, used sparingly) */
  --woosah-sage:        #7C9A6C;
  --woosah-moss:        #5A7A4E;
  --woosah-fern:        #3D5A38;

  /* Brand gradient — the "tree" running plum -> raspberry -> coral -> orange -> gold */
  --woosah-gradient:        linear-gradient(135deg, #5A2D6E 0%, #A04070 35%, #D06050 60%, #E08030 85%, #E0B070 100%);
  --woosah-gradient-rev:    linear-gradient(135deg, #E0B070 0%, #E08030 20%, #D06050 45%, #A04070 75%, #5A2D6E 100%);
  --woosah-gradient-soft:   linear-gradient(135deg, #F8EFDD 0%, #FCF7EC 100%);
  --woosah-gradient-canopy: linear-gradient(180deg, #E08030 0%, #E0B070 100%);
  --woosah-gradient-roots:  linear-gradient(180deg, #5A2D6E 0%, #A04070 100%);

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:  'DM Serif Display', Georgia, serif;

  --fs-display: clamp(2.25rem, 5vw + 0.75rem, 4.5rem);
  --fs-h1:      clamp(1.875rem, 3vw + 0.875rem, 3rem);
  --fs-h2:      clamp(1.5rem, 2vw + 0.625rem, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1vw + 0.625rem, 1.5rem);
  --fs-h4:      1.125rem;
  --fs-body:    clamp(0.9375rem, 0.875rem + 0.25vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-tiny:    0.75rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --radius-soft: 12px;
  --radius-card: 20px;
  --radius-pill: 999px;

  --border-soft: 1px solid rgba(90, 45, 110, 0.14);
  --shadow-card: 0 4px 24px rgba(90, 45, 110, 0.10);
  --shadow-lift: 0 12px 40px rgba(90, 45, 110, 0.18);
  --shadow-warm: 0 8px 28px rgba(224, 128, 48, 0.18);
  --shadow-inset-warm: inset 0 0 0 1px rgba(224, 176, 112, 0.4);

  --container: 1200px;
  --container-narrow: 720px;
  --container-wide:   1440px;
  --side-pad: clamp(1.875rem, 6vw, 2.75rem); /* mobile min 30px (was 16) — fixes "content hugging the edges" feedback 2026-05-01 */

  --header-h-mobile: 64px;
  --header-h-desk:   76px;
}

/* ------------------------------------------------------------------ *
 * 2. Base
 * ------------------------------------------------------------------ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--woosah-ink);
  background: var(--woosah-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Safe-area insets for notched devices (Rule 19, responsive Part 4.7) */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

::selection { background: var(--woosah-gold); color: var(--woosah-plum-deep); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--woosah-plum);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-md);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; }

p { margin: 0 0 var(--space-md); max-width: 68ch; }
a { color: var(--woosah-plum); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s ease; }
a:hover, a:focus { color: var(--woosah-orange); }

.container-narrow p a:not(.btn):not(.btn-ghost),
section p a:not(.btn):not(.btn-ghost),
.faq details p a,
.lead a:not(.btn):not(.btn-ghost) {
  text-decoration: underline;
  text-decoration-color: rgba(160, 64, 112, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.container-narrow p a:hover,
section p a:hover { text-decoration-color: var(--woosah-orange); }

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

ul, ol { padding-left: 1.25rem; margin: 0 0 var(--space-md); }
li { margin-bottom: var(--space-2xs); }

input, textarea, select, button { font: inherit; }

/* iOS auto-zoom prevention — 16px minimum input font */
input, textarea, select { font-size: 16px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--woosah-plum); color: var(--woosah-cream);
  padding: var(--space-2xs) var(--space-sm); border-radius: 0 0 var(--radius-soft) 0;
  z-index: 1000; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; outline: 3px solid var(--woosah-gold); outline-offset: -3px; }

.container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--side-pad); padding-right: var(--side-pad); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-left: auto; margin-right: auto; padding-left: var(--side-pad); padding-right: var(--side-pad); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-left: auto; margin-right: auto; padding-left: var(--side-pad); padding-right: var(--side-pad); }

.section { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
@media (max-width: 768px) { .section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } }
@media (max-width: 480px) { .section { padding-top: var(--space-lg); padding-bottom: var(--space-lg); } }

.section--cream { background: var(--woosah-cream); }
.section--cream-soft { background: var(--woosah-cream-soft); }
.section--plum { background: var(--woosah-plum-deep); color: var(--woosah-cream); }
.section--plum h1, .section--plum h2, .section--plum h3 { color: var(--woosah-cream); }
.section--plum a { color: var(--woosah-gold); }
.section--plum a:hover { color: var(--woosah-honey); }

.section--gradient {
  background: var(--woosah-gradient);
  color: var(--woosah-cream);
}
.section--gradient h1, .section--gradient h2, .section--gradient h3 { color: var(--woosah-cream); }

.gradient-text {
  background: var(--woosah-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lead { font-size: 1.125rem; line-height: var(--lh-body); color: var(--woosah-stone); max-width: 65ch; }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--woosah-raspberry);
  margin-bottom: var(--space-sm);
  display: inline-flex; align-items: center; gap: 0.5em;
}
.eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--woosah-raspberry); }

.divider-gold { width: 80px; height: 1px; background: var(--woosah-gold); border: 0; margin: var(--space-md) auto; }
.divider-leaf { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: var(--space-md) auto; }
.divider-leaf::before, .divider-leaf::after { content: ""; flex: 0 0 auto; width: 60px; height: 1px; background: var(--woosah-sage); }
.divider-leaf svg { width: 22px; height: 22px; color: var(--woosah-moss); }

/* ------------------------------------------------------------------ *
 * 3. Header / nav — solid background on mobile (Tony directive 2026-05-01)
 * ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--woosah-cream);
  border-bottom: var(--border-soft);
  backdrop-filter: saturate(125%) blur(6px);
  -webkit-backdrop-filter: saturate(125%) blur(6px);
  padding-top: env(safe-area-inset-top);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-sm); padding-bottom: var(--space-sm);
  min-height: var(--header-h-mobile);
}
@media (min-width: 901px) {
  .site-header__inner { min-height: var(--header-h-desk); }
}
.site-header__brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-header__brand img { height: 44px; width: auto; }

.site-nav { display: flex; align-items: center; }
.site-nav__list { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }
.site-nav__list li { margin: 0; }
.site-nav__list a {
  font-size: 0.95rem; font-weight: 500; color: var(--woosah-plum);
  text-decoration: none; padding: var(--space-2xs) 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.site-nav__list a:hover, .site-nav__list a[aria-current="page"] {
  border-bottom-color: var(--woosah-orange);
  color: var(--woosah-plum-deep);
}
.site-nav__cta a { padding: 0.6rem 1.25rem; }

/* Hamburger toggle */
.nav-toggle {
  display: none; background: transparent; border: 0; padding: var(--space-2xs);
  width: 48px; height: 48px; cursor: pointer; color: var(--woosah-plum);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  border-radius: var(--radius-soft);
}
.nav-toggle:focus-visible { outline: 3px solid var(--woosah-gold); outline-offset: 2px; }
.nav-toggle__bar { display: block; width: 26px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }

/* Mobile drawer — SOLID cream background, transform-based slide (Trap 2 safe) */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    /* Explicit top + height — `inset` shorthand was collapsing the drawer to ~80px on real
       devices (containing-block ambiguity from sticky header ancestor). 100dvh handles iOS
       Safari URL-bar viewport math; 100vh is the fallback for older engines. */
    top: var(--header-h-mobile);
    right: 0;
    left: 0;
    height: calc(100vh - var(--header-h-mobile));
    height: calc(100dvh - var(--header-h-mobile));
    background: var(--woosah-cream); /* SOLID — no transparency */
    background-image: linear-gradient(180deg, var(--woosah-cream) 0%, var(--woosah-cream-soft) 100%);
    flex-direction: column; align-items: stretch;
    padding: var(--space-lg) var(--side-pad) calc(var(--space-lg) + env(safe-area-inset-bottom));
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 99; /* below header so close button stays visible */
    box-shadow: -8px 0 32px rgba(90, 45, 110, 0.12);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* don't bubble drawer scroll to body */
  }
  .site-nav__list {
    flex-direction: column; align-items: stretch;
    gap: 0; /* tighter — borders separate items, no extra gap needed */
    width: 100%;
  }
  .site-nav__list a {
    font-size: 1.1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(90, 45, 110, 0.12);
    display: flex;            /* vertical-center the link text in the touch target */
    align-items: center;
    min-height: 48px;         /* WCAG 2.5.5 — keep 48px touch target */
  }
  .site-nav__cta a { display: inline-block; align-self: flex-start; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-nav {
    transform: translateX(0);
    /* Lift drawer above the cookie consent banner (z 999999) so all nav links remain tappable.
       Without this, woosah-cookie-consent intercepts every link below "Home" — confirmed via
       elementFromPoint probe 2026-05-01. */
    z-index: 1000000;
  }
  body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Hide the cookie consent banner while the mobile drawer is open — the drawer is the active overlay,
     and the user has not consented yet so default-deny remains in effect. Banner returns on close. */
  body.nav-open .woosah-cookie-consent { display: none !important; }
}

/* ------------------------------------------------------------------ *
 * 4. Buttons
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2xs);
  min-height: 48px; padding: 0.7rem 1.5rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  border-radius: var(--radius-soft); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .2s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-align: center;
}
.btn:focus-visible { outline: 3px solid var(--woosah-gold); outline-offset: 2px; }

.btn-primary {
  background: var(--woosah-orange); color: var(--woosah-cream);
  box-shadow: 0 4px 14px rgba(224, 128, 48, 0.25);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--woosah-plum); color: var(--woosah-cream);
  transform: translateY(-2px); box-shadow: var(--shadow-lift);
}

.btn-secondary {
  background: transparent; color: var(--woosah-plum);
  border-color: var(--woosah-plum);
}
.btn-secondary:hover, .btn-secondary:focus {
  background: var(--woosah-plum); color: var(--woosah-cream); transform: translateY(-2px);
}

.btn-gradient {
  background: var(--woosah-gradient);
  color: var(--woosah-cream);
  box-shadow: var(--shadow-warm);
  background-size: 200% 200%;
  background-position: 0% 50%;
}
.btn-gradient:hover, .btn-gradient:focus {
  background-position: 100% 50%;
  color: var(--woosah-cream);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent; color: var(--woosah-plum);
  padding-left: 0; padding-right: 0;
  border: 0; border-bottom: 1px solid transparent;
  border-radius: 0; min-height: 0;
  padding-top: 0.25rem; padding-bottom: 0.25rem;
  font-weight: 600;
  transition: color .2s ease, border-color .2s ease;
}
.btn-ghost:hover, .btn-ghost:focus { color: var(--woosah-orange); border-bottom-color: var(--woosah-orange); }

.btn-pill { border-radius: var(--radius-pill); padding: 0.55rem 1.25rem; min-height: 44px; }
.btn-large { padding: 1rem 2rem; font-size: 1.0625rem; min-height: 56px; }

/* ------------------------------------------------------------------ *
 * 5. Hero — video-ready with animated gradient fallback
 * ------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--woosah-gradient-soft);
  overflow: hidden;
}

/* Video background layer (when /assets/video/hero-loop.mp4 is dropped in) */
.hero__video-wrap {
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.hero__video {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; object-position: center;
  pointer-events: none;
  filter: saturate(0.92) brightness(1.02);
}
.hero__video-tint {
  position: absolute; inset: 0;
  /* Heavier cream opacity so plum H1 stays readable over the lavender photo —
     was 0.78/0.62/0.85, contrast was too low (Tony / client report 2026-05-01). */
  background: linear-gradient(135deg, rgba(248, 239, 221, 0.95) 0%, rgba(252, 247, 236, 0.88) 50%, rgba(248, 239, 221, 0.96) 100%);
  z-index: -1;
}

/* Animated CSS gradient — runs ALWAYS (whether or not video loads).
   Lives behind the video tint so it shows through at low opacity, and
   is the sole hero "motion" if no video file is present. */
.hero::before {
  content: "";
  position: absolute; inset: -10%;
  z-index: -3;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(224, 128, 48, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(160, 64, 112, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(90, 45, 110, 0.12) 0%, transparent 60%),
    var(--woosah-gradient-soft);
  background-size: 200% 200%, 220% 220%, 180% 180%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 50% 50%, 0% 0%;
  animation: hero-drift 24s ease-in-out infinite alternate;
  filter: blur(0.5px);
}

/* Tree-of-Life watermark on the right edge (canopy + roots colors) */
.hero::after {
  content: "";
  position: absolute; right: -80px; top: 50%; transform: translateY(-50%);
  width: 520px; height: 520px;
  background: url('../img/logo-tree.png') center / contain no-repeat;
  opacity: 0.10;
  pointer-events: none;
  z-index: -1;
  max-width: 60%;
}

@keyframes hero-drift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%, 0% 0%; }
  100% { background-position: 100% 100%, 0% 0%, 50% 90%, 0% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

.hero__inner {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  position: relative;
  z-index: 1;
  /* Was `padding: var(--space-2xl) 0` — shorthand killed .container's side-pad
     and let hero text bleed to the screen edge. Use side-pad on left/right. */
  padding: var(--space-2xl) var(--side-pad);
  min-height: clamp(420px, 60vh, 640px);
}
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    padding: var(--space-xl) var(--side-pad);
    min-height: auto;
  }
  .hero::after { width: 360px; height: 360px; right: -120px; opacity: 0.07; }
}
.hero h1 {
  font-size: var(--fs-display);
  margin-bottom: var(--space-md);
  /* Deep-plum + halo for maximum contrast over the lavender photo backdrop */
  color: var(--woosah-plum-deep);
  text-shadow: 0 1px 0 rgba(248, 239, 221, 0.85), 0 2px 12px rgba(248, 239, 221, 0.55);
}
/* Hero eyebrow — was raspberry which faded into the lavender photo. Orange pops cleanly. */
.hero .eyebrow {
  color: var(--woosah-orange);
  text-shadow: 0 1px 0 rgba(248, 239, 221, 0.85);
}
.hero .eyebrow::before {
  background: var(--woosah-orange);
}
/* Soft cream backdrop card behind ALL hero text so individual words (e.g. "Holistic")
   don't lose contrast where the lavender photo gets bright. Per client note 2026-05-01.
   Uses backdrop-filter blur where supported; falls back to solid-ish cream elsewhere. */
.hero__copy {
  background: rgba(252, 247, 236, 0.72);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  backdrop-filter: blur(8px) saturate(1.05);
  border-radius: 18px;
  padding: 1.25rem 1.4rem 1.5rem;
  box-shadow: 0 6px 24px rgba(90, 45, 110, 0.10);
  border: 1px solid rgba(224, 176, 112, 0.25); /* whisper-thin gold rim */
}
@supports not (backdrop-filter: blur(8px)) {
  .hero__copy { background: rgba(252, 247, 236, 0.94); }
}
.hero__sub {
  font-size: 1.1875rem;
  /* Was --woosah-stone (mid-gray) which faded into the photo. Bumped to plum for legibility. */
  color: var(--woosah-plum-deep);
  margin-bottom: var(--space-lg);
  max-width: 56ch;
  text-shadow: 0 1px 0 rgba(248, 239, 221, 0.6);
}
.hero__cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.hero__cta .btn { flex: 1 1 auto; min-width: 0; }
@media (min-width: 480px) { .hero__cta .btn { flex: 0 0 auto; } }

.hero__media { position: relative; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lift); border: 6px solid var(--woosah-cream-soft); max-width: 480px; justify-self: center; width: 100%; }
.hero__media::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(124, 154, 108, 0.35); pointer-events: none; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ------------------------------------------------------------------ *
 * 6. Mission strip
 * ------------------------------------------------------------------ */
.mission-strip { text-align: center; padding: var(--space-xl) 0; }
.mission-strip__quote {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw + 0.75rem, 2.75rem);
  color: var(--woosah-plum);
  margin: 0; font-style: italic;
}

/* ------------------------------------------------------------------ *
 * 7. Two-column blocks
 * ------------------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-lg); } }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
.split__media img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.split__media--circle { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; max-width: 460px; margin: 0 auto; box-shadow: var(--shadow-card); }
.split__media--circle img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ *
 * 8. Cards & grids
 * ------------------------------------------------------------------ */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--woosah-cream-soft);
  border: var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  min-width: 0;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(224, 176, 112, 0.4); }
.card h3 { margin-top: 0; }
.card__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(224, 176, 112, 0.22); color: var(--woosah-plum);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-md);
}
.card__icon svg { width: 28px; height: 28px; }

.card-feature h3 { color: var(--woosah-plum-deep); }

.card-event {
  display: grid; grid-template-columns: 88px 1fr; gap: var(--space-md); align-items: start;
}
.card-event__date {
  background: var(--woosah-plum); color: var(--woosah-cream);
  border-radius: var(--radius-soft);
  padding: var(--space-sm) var(--space-2xs); text-align: center;
}
.card-event__day { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1; font-weight: 700; }
.card-event__month { display: block; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 4px; }

.card-pricing {
  background: var(--woosah-cream-soft);
  border: var(--border-soft); border-radius: var(--radius-card);
  padding: var(--space-lg); position: relative;
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.card-pricing--featured { border-color: var(--woosah-gold); box-shadow: var(--shadow-inset-warm), var(--shadow-card); }
.card-pricing__ribbon {
  position: absolute; top: -12px; right: 16px;
  background: var(--woosah-gold); color: var(--woosah-plum-deep);
  padding: 4px 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; border-radius: var(--radius-pill);
}
.card-pricing__price { font-family: var(--font-display); font-size: 2.5rem; color: var(--woosah-plum-deep); line-height: 1; }
.card-pricing__price small { font-size: 1rem; color: var(--woosah-stone); font-family: var(--font-body); }
.card-pricing ul { padding-left: 0; list-style: none; margin-bottom: var(--space-md); }
.card-pricing ul li { padding-left: 1.5em; position: relative; }
.card-pricing ul li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 12px; height: 6px;
  border-left: 2px solid var(--woosah-orange);
  border-bottom: 2px solid var(--woosah-orange);
  transform: rotate(-45deg);
}

.card-member {
  background: var(--woosah-cream-soft);
  border: var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  min-width: 0;
}
.card-member:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(224, 176, 112, 0.4); }
.card-member__photo {
  width: 120px; height: 120px; border-radius: 50%;
  margin: 0 auto var(--space-md);
  border: 3px solid var(--woosah-cream); box-shadow: var(--shadow-card);
  background: var(--woosah-bone) center / cover;
}
.card-member__name { font-family: var(--font-display); font-size: 1.25rem; color: var(--woosah-plum); margin: 0 0 4px; text-decoration: none; }
.card-member__tag { display: inline-block; padding: 2px 10px; background: rgba(124, 154, 108, 0.18); color: var(--woosah-fern); border-radius: var(--radius-pill); font-size: 0.75rem; letter-spacing: 0.05em; margin-bottom: var(--space-2xs); }
.card-member__city { font-size: 0.875rem; color: var(--woosah-stone); margin: 0 0 var(--space-sm); text-decoration: none; }

/* Partner cards (Trusted Community Partners section) */
.card-partner {
  background: var(--woosah-cream-soft);
  border: var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
  text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-width: 0;
}
.card-partner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--woosah-gold); }
.card-partner__logo {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--woosah-plum-deep);
}
.card-partner__role {
  font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--woosah-orange); font-weight: 600;
}
.card-partner__desc { color: var(--woosah-stone); margin: 0; }

/* ------------------------------------------------------------------ *
 * 9. Forms
 * ------------------------------------------------------------------ */
.form { display: grid; gap: var(--space-md); max-width: 600px; }
.form label { display: block; font-weight: 600; color: var(--woosah-plum); margin-bottom: 4px; font-size: 0.9375rem; }
.form input[type=text], .form input[type=email], .form input[type=tel],
.form select, .form textarea {
  width: 100%; max-width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body); font-size: 16px; color: var(--woosah-ink);
  background: var(--woosah-white);
  border: 1px solid rgba(90, 45, 110, 0.2);
  border-radius: var(--radius-soft);
  min-height: 48px;
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none; -webkit-appearance: none;
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--woosah-plum);
  box-shadow: 0 0 0 3px rgba(224, 176, 112, 0.30);
  outline: none;
}
.form .checkbox-row { display: flex; align-items: flex-start; gap: var(--space-2xs); }
.form .checkbox-row input { width: 20px; height: 20px; margin-top: 3px; }
.form .checkbox-row label { font-weight: 400; }
.form .form-help { font-size: 0.875rem; color: var(--woosah-stone); margin: 0; }
.form .honeypot { position: absolute; left: -9999px; top: -9999px; }
.form-success { background: rgba(224, 176, 112, 0.18); border-left: 4px solid var(--woosah-gold); padding: var(--space-md); border-radius: var(--radius-soft); }
.form-error { background: rgba(224, 128, 48, 0.14); border-left: 4px solid var(--woosah-orange); padding: var(--space-md); border-radius: var(--radius-soft); }

/* ------------------------------------------------------------------ *
 * 10. Directory
 * ------------------------------------------------------------------ */
.dir-bar {
  position: sticky; top: var(--header-h-mobile); z-index: 5;
  background: var(--woosah-cream);
  border-bottom: var(--border-soft);
  padding: var(--space-md) 0;
}
@media (min-width: 901px) { .dir-bar { top: var(--header-h-desk); } }
.dir-bar__row { display: grid; gap: var(--space-sm); grid-template-columns: 1.5fr 1fr 1fr; align-items: center; }
@media (max-width: 900px) { .dir-bar__row { grid-template-columns: 1fr; } }
.dir-bar input[type=search], .dir-bar select {
  width: 100%; min-height: 48px; padding: 0.65rem 1rem;
  border: 1px solid rgba(90, 45, 110, 0.2); border-radius: var(--radius-soft);
  background: var(--woosah-white); color: var(--woosah-ink);
  font-family: var(--font-body); font-size: 16px;
  appearance: none; -webkit-appearance: none;
}
.dir-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); }
.dir-chip {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: transparent; border: 1px solid rgba(90, 45, 110, 0.25);
  color: var(--woosah-plum); font-size: 0.875rem; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  font-family: var(--font-body); min-height: 40px;
}
.dir-chip:hover, .dir-chip.is-active {
  background: var(--woosah-orange); color: var(--woosah-cream);
  border-color: var(--woosah-orange);
}

.dir-empty { text-align: center; padding: var(--space-2xl) 0; color: var(--woosah-stone); }

/* ------------------------------------------------------------------ *
 * 11. Footer
 * ------------------------------------------------------------------ */
.site-footer {
  background: var(--woosah-plum-deep);
  color: var(--woosah-cream);
  padding: var(--space-2xl) 0 calc(var(--space-md) + env(safe-area-inset-bottom));
  margin-top: var(--space-2xl);
}
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer__brand img {
  height: 40px; width: auto; margin-bottom: var(--space-sm);
  filter: brightness(0) invert(1) sepia(1) saturate(0.5) hue-rotate(345deg);
}
.site-footer__tag { color: var(--woosah-bone); font-size: 0.95rem; max-width: 38ch; }
.site-footer__partner a { color: var(--woosah-gold); }
.site-footer__partner a:hover { color: var(--woosah-honey); }
.site-footer__col h3 {
  color: var(--woosah-cream); font-family: var(--font-display);
  font-size: 1.125rem; margin: 0 0 var(--space-sm);
  border-bottom: 1px solid rgba(224, 176, 112, 0.3);
  padding-bottom: var(--space-2xs);
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: var(--space-2xs); }
.site-footer__col a { color: var(--woosah-bone); text-decoration: none; transition: color .2s ease; }
.site-footer__col a:hover, .site-footer__col a:focus { color: var(--woosah-gold); }

.site-footer__base {
  margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: 1px solid rgba(224, 176, 112, 0.18);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm);
  font-size: 0.8125rem; color: var(--woosah-bone);
}
.site-footer__base p { margin: 0; }
.site-footer__credit { opacity: 0.85; }
.site-footer__pwa-hint {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(224, 176, 112, 0.18);
  color: var(--woosah-honey);
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------------ *
 * 12. Steps (Get-Listed flow)
 * ------------------------------------------------------------------ */
.steps {
  display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(3, 1fr);
  counter-reset: steps;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--woosah-cream-soft); border-radius: var(--radius-card);
  padding: var(--space-lg); border: var(--border-soft);
  position: relative; counter-increment: steps;
  min-width: 0;
}
.step::before {
  content: counter(steps);
  position: absolute; top: -22px; left: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--woosah-gradient);
  color: var(--woosah-cream);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.step h3 { margin-top: var(--space-sm); }

/* ------------------------------------------------------------------ *
 * 13. FAQ
 * ------------------------------------------------------------------ */
.faq { border-top: var(--border-soft); }
.faq details { border-bottom: var(--border-soft); padding: var(--space-md) 0; }
.faq summary {
  font-family: var(--font-display); font-size: 1.125rem;
  color: var(--woosah-plum); font-weight: 600; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: var(--space-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.5rem; color: var(--woosah-orange);
  flex: 0 0 auto; transition: transform .2s ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > *:not(summary) { margin-top: var(--space-sm); }

/* ------------------------------------------------------------------ *
 * 14. Testimonial / quote
 * ------------------------------------------------------------------ */
.quote-block {
  background: var(--woosah-cream-soft);
  border-left: 4px solid var(--woosah-orange);
  padding: var(--space-lg);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--woosah-plum);
}
.quote-block cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-style: normal; font-size: 0.875rem;
  color: var(--woosah-stone);
}

/* ------------------------------------------------------------------ *
 * 15. Misc utilities
 * ------------------------------------------------------------------ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

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

/* fade-up reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------------ *
 * 16. PWA install banner (auto-injected by main.js)
 * ------------------------------------------------------------------ */
.pwa-install-banner {
  position: fixed;
  left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 95;
  display: none;
  background: var(--woosah-plum);
  color: var(--woosah-cream);
  border-radius: var(--radius-pill);
  padding: 0.65rem 0.85rem 0.65rem 1rem;
  box-shadow: var(--shadow-lift);
  font-size: 0.9rem;
  /* Single-row layout: prevent text from wrapping into a tall column behind the button. */
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100% - 24px);
  width: max-content;        /* size to content, capped by max-width */
  overflow: hidden;          /* belt + suspenders if text ever exceeds */
}
.pwa-install-banner.is-visible { display: inline-flex; }
.pwa-install-banner > span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-install-banner button {
  background: var(--woosah-orange);
  color: var(--woosah-cream);
  border: 0;
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  font-weight: 600; cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;            /* never let buttons shrink behind text */
  white-space: nowrap;
  line-height: 1.2;
}
.pwa-install-banner button:focus-visible { outline: 2px solid var(--woosah-gold); outline-offset: 2px; }
.pwa-install-banner__close {
  background: transparent !important; color: var(--woosah-bone) !important;
  font-size: 1.1rem !important; padding: 0.2rem 0.45rem !important;
  flex-shrink: 0;
}
@media (max-width: 420px) {
  .pwa-install-banner { font-size: 0.82rem; padding: 0.55rem 0.7rem 0.55rem 0.9rem; gap: 0.45rem; }
  .pwa-install-banner button { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
}

/* ------------------------------------------------------------------ *
 * 17. Print
 * ------------------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .nav-toggle, .pwa-install-banner, .hero__video-wrap, .hero::before, .hero::after { display: none !important; }
  body { background: white; color: black; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .container, .container-narrow { max-width: 100%; padding: 0; }
}