/* ============================================================
   MyHealthcare Clinic V2 — Design Tokens
   Generated from: pages/myhealthcare-clinic-v2.html
   ============================================================ */

:root {
  /* ── COLORS ── */
  --color-emerald: #50C878;
  --color-emerald-hover: #3db866;
  --color-emerald-glow: rgba(80, 200, 120, 0.07);
  --color-emerald-glow-strong: rgba(80, 200, 120, 0.14);
  --color-emerald-subtle: rgba(80, 200, 120, 0.1);
  --color-emerald-border: rgba(80, 200, 120, 0.18);
  --color-emerald-bg: rgba(80, 200, 120, 0.08);
  --color-emerald-bg-hover: rgba(80, 200, 120, 0.05);
  --color-emerald-nav-bg: rgba(80, 200, 120, 0.1);

  --color-deep-evergreen: #095A3D;
  --color-deep-forest: #223735;
  --color-soft-moss: #78A77A;

  --color-warm-gold: #C9A85A;
  --color-warm-gold-rgb: 201, 168, 90;

  --color-warm-white: #F7F5F2;
  --color-warm-taupe: #7A6A5A;

  --color-charcoal: #0F1722;
  --color-off-black: #0a0f0d;
  --color-off-black-light: #0c1410;

  --color-amethyst: #8C50C7;

  /* ── DARK UI SURFACES ── */
  --surface-dark: rgba(10, 15, 13, 0.88);
  --surface-dark-solid: rgba(10, 15, 13, 0.97);
  --surface-card: rgba(255, 255, 255, 0.04);
  --surface-card-hover: rgba(80, 200, 120, 0.05);
  --surface-phone: #0c1410;
  --surface-chip: rgba(22, 38, 30, 0.95);

  /* ── DARK UI TEXT ── */
  --text-dark-primary: var(--color-warm-white);
  --text-dark-secondary: rgba(247, 245, 242, 0.75);
  --text-dark-tertiary: rgba(247, 245, 242, 0.65);
  --text-dark-muted: rgba(247, 245, 242, 0.5);
  --text-dark-subtle: rgba(247, 245, 242, 0.45);
  --text-dark-faint: rgba(247, 245, 242, 0.38);
  --text-dark-ultra-faint: rgba(247, 245, 242, 0.35);
  --text-dark-ghost: rgba(247, 245, 242, 0.25);
  --text-dark-number: rgba(247, 245, 242, 0.06);
  --text-dark-nav: rgba(247, 245, 242, 0.92);

  /* ── DARK UI BORDERS ── */
  --border-dark: rgba(255, 255, 255, 0.07);
  --border-dark-subtle: rgba(255, 255, 255, 0.06);
  --border-dark-faint: rgba(255, 255, 255, 0.05);
  --border-dark-section: rgba(247, 245, 242, 0.07);

  /* ── LIGHT UI SURFACES ── */
  --surface-light: var(--color-warm-white);
  --surface-light-card: rgba(10, 15, 13, 0.06);
  --surface-light-card-hover: var(--color-deep-forest);
  --surface-pop-item: rgba(10, 15, 13, 0.04);

  /* ── LIGHT UI TEXT ── */
  --text-light-primary: var(--color-off-black);
  --text-light-secondary: var(--color-warm-taupe);
  --text-light-tertiary: rgba(10, 15, 13, 0.2);

  /* ── LIGHT UI BORDERS ── */
  --border-light: rgba(10, 15, 13, 0.1);
  --border-light-subtle: rgba(10, 15, 13, 0.08);
  --border-light-faint: rgba(10, 15, 13, 0.04);
  --border-light-nav: rgba(10, 15, 13, 0.15);

  /* ── GRADIENTS ── */
  --gradient-hero: #1F4C3B;
  --gradient-phone: linear-gradient(150deg, #0a1e16 0%, #080f0b 100%);
  --gradient-loc-ph: linear-gradient(135deg, rgba(9, 90, 61, 0.8) 0%, rgba(34, 55, 53, 0.9) 100%);

  /* ── RADIAL GLOWS ── */
  --glow-hero: transparent;
  --glow-app: radial-gradient(circle, rgba(80, 200, 120, 0.14) 0%, transparent 65%);
  
  --glow-membership: radial-gradient(ellipse 70% 60% at 100% 60%, rgba(80, 200, 120, 0.05) 0%, transparent 60%);
  --glow-cta: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 65%);
  --glow-phone-shadow: 0 0 100px rgba(80, 200, 120, 0.08);

  /* ── GRID PATTERNS ── */
  --grid-hero: linear-gradient(rgba(247, 245, 242, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 245, 242, 0.025) 1px, transparent 1px);
  --grid-hero-size: 100px 100px;
  --grid-loc-ph: linear-gradient(rgba(247, 245, 242, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 245, 242, 0.04) 1px, transparent 1px);
  --grid-loc-ph-size: 28px 28px;

  /* ── FONTS ── */
  --font-serif: 'Inter', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: monospace;

  /* ── FONT WEIGHTS ── */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── HEADING SIZES (clamp) ── */
  --text-h1-hero: clamp(56px, 6.5vw, 104px);
  --text-h2-xl: clamp(52px, 6vw, 88px);
  --text-h2-cta: clamp(44px, 7vw, 92px);
  --text-h2-app: clamp(48px, 7vw, 100px);
  --text-h2-philosophy: clamp(44px, 5vw, 76px);
  --text-h2-membership: clamp(42px, 5vw, 70px);
  --text-h2-services: clamp(42px, 4.5vw, 68px);
  --text-h2-locations: clamp(42px, 5vw, 68px);
  --text-h2-bio: clamp(40px, 4.5vw, 64px);
  --text-h2: clamp(40px, 4.5vw, 68px);
  --text-h2-testi: clamp(36px, 4vw, 56px);
  --text-h3-dl: clamp(32px, 4vw, 56px);

  /* ── HEADING LINE HEIGHTS ── */
  --lh-h1-hero: 0.96;
  --lh-h2-xl: 0.95;
  --lh-h2-tight: 1.0;
  --lh-h2-membership: 1.05;
  --lh-h2: 1.08;
  --lh-h2-testi: 1.1;
  --lh-h2-cta: 1.0;

  /* ── HEADING LETTER SPACING ── */
  --ls-heading: -0.02em;
  --ls-heading-tight: -0.03em;

  /* ── BODY TEXT SIZES ── */
  --text-body-lg: 17px;
  --text-body: 15px;
  --text-body-sm: 14px;
  --text-body-xs: 13px;
  --text-body-2xs: 12.5px;
  --text-caption: 12px;
  --text-caption-sm: 11.5px;
  --text-caption-xs: 11px;
  --text-caption-2xs: 10.5px;
  --text-label: 10px;
  --text-label-xs: 9.5px;
  --text-label-2xs: 9px;
  --text-label-3xs: 8.5px;
  --text-label-4xs: 7.5px;
  --text-ui-micro: 8px;

  /* ── BODY LINE HEIGHTS ── */
  --lh-body-loose: 1.8;
  --lh-body: 1.75;
  --lh-body-tight: 1.7;
  --lh-caption: 1.65;
  --lh-caption-tight: 1.5;
  --lh-heading: 1.3;
  --lh-heading-tight: 1.2;
  --lh-micro: 1.4;

  /* ── EYEBROW / LABEL STYLES ── */
  --text-eyebrow: 10.5px;
  --fw-eyebrow: 600;
  --ls-eyebrow: 0.18em;
  --text-nav-dropdown-title: 10px;
  --fw-nav-dropdown-title: 600;
  --ls-nav-dropdown-title: 0.15em;
  --text-label-upper: 10px;
  --fw-label-upper: 700;
  --ls-label-upper: 0.14em;

  /* ── SPACING ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 28px;
  --space-4xl: 32px;
  --space-5xl: 40px;
  --space-6xl: 48px;
  --space-7xl: 52px;
  --space-8xl: 60px;
  --space-9xl: 72px;
  --space-10xl: 80px;
  --space-section: 120px;
  --space-section-lg: 160px;

  /* ── LAYOUT ── */
  --max-width: 1280px;
  --padding-x: 52px;
  --nav-height: 68px;
  --nav-padding-x: 52px;

  /* ── GRID GAPS ── */
  --gap-xs: 4px;
  --gap-sm: 5px;
  --gap-md: 6px;
  --gap-lg: 8px;
  --gap-xl: 10px;
  --gap-2xl: 12px;
  --gap-3xl: 14px;
  --gap-4xl: 16px;
  --gap-5xl: 20px;
  --gap-section: 48px;
  --gap-section-lg: 60px;
  --gap-section-xl: 100px;

  /* ── BORDER RADIUS ── */
  --radius-pill: 100px;
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 14px;
  --radius-xs: 12px;
  --radius-2xs: 10px;

  /* ── BUTTONS ── */
  --btn-primary-bg: var(--color-emerald);
  --btn-primary-hover: #3db866;
  --btn-primary-shadow: 0 12px 32px rgba(80, 200, 120, 0.3);
  --btn-padding-y: 13px;
  --btn-padding-x: 30px;
  --btn-padding-x-sm: 28px;
  --btn-font-size: 13px;
  --btn-font-weight: 600;
  --btn-font-weight-outline: 500;
  --btn-ls: 0.02em;

  --btn-dark-bg: var(--color-deep-forest);
  --btn-dark-hover: var(--color-charcoal);
  --btn-dark-text: var(--color-warm-white);

  --btn-nav-bg: var(--color-emerald);
  --btn-nav-hover: var(--color-deep-evergreen);
  --btn-nav-padding-y: 9px;
  --btn-nav-padding-x: 22px;
  --btn-nav-font-size: 12.5px;

  --btn-cta-radius: var(--radius-pill);
  --btn-cta-font-size: 13px;
  --btn-cta-font-weight: 600;

  --btn-mem-bg: rgba(255, 255, 255, 0.08);
  --btn-mem-border: rgba(255, 255, 255, 0.12);
  --btn-mem-featured-bg: #fff;
  --btn-mem-featured-text: var(--color-deep-evergreen);

  /* ── CARDS ── */
  --card-bg: var(--surface-card);
  --card-border: var(--border-dark);
  --card-radius: var(--radius-lg);
  --card-padding: 32px 28px;
  --card-padding-lg: 40px 32px;
  --card-hover-transform: translateY(-4px);
  --card-hover-shadow: 0 20px 48px rgba(34, 55, 53, 0.3);
  --card-hover-shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.5);

  --card-light-bg: var(--surface-light);
  --card-light-border: var(--border-light);

  /* ── PHONE MOCKUP ── */
  --phone-width: 290px;
  --phone-height: 608px;
  --phone-radius: 48px;
  --phone-border: 1.5px solid rgba(255, 255, 255, 0.1);
  --phone-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 60px 140px rgba(0, 0, 0, 0.8), 0 0 100px rgba(80, 200, 120, 0.08);
  --phone-notch-width: 96px;
  --phone-notch-height: 26px;
  --phone-notch-radius: 20px;
  --phone-notch-top: 12px;
  --phone-ui-padding: 46px 14px 18px;

  /* ── CURSOR ── */
  --cursor-dot-size: 10px;
  --cursor-dot-size-hover: 18px;
  --cursor-ring-size: 34px;
  --cursor-ring-size-hover: 48px;
  --cursor-ring-border: 1px solid rgba(80, 200, 120, 0.5);
  --cursor-ring-border-hover: 1px solid rgba(80, 200, 120, 0.3);
  --cursor-bg: var(--color-emerald);

  /* ── TRANSITIONS ── */
  --transition-fast: 0.15s;
  --transition: 0.2s;
  --transition-medium: 0.25s;
  --transition-slow: 0.3s;
  --transition-reveal: 0.8s;

  /* ── BACKDROP BLUR ── */
  --blur-nav: 24px;
  --blur-dropdown: 32px;
  --blur-chip: 20px;

  /* ── SCROLL REVEAL ── */
  --reveal-y: 32px;
  --reveal-x: 32px;
  --reveal-duration: 0.85s;
  --reveal-ease: power3.out;

  /* ── ANIMATION DURATIONS ── */
  --anim-marquee: 30s;
  --anim-bio-scroll-1: 38s;
  --anim-bio-scroll-2: 44s;
  --anim-scroll-fill: 2s;

  /* ── SERVICE ROW ── */
  --svc-row-num-font-size: 13px;
  --svc-row-num-color: var(--color-soft-moss);
  --svc-row-name-font-size: 22px;
  --svc-row-name-weight: 500;
  --svc-row-hover-shift: 16px;
  --svc-row-accent-width: 3px;
  --svc-arrow-size: 36px;
  --svc-arrow-icon-size: 14px;

  /* ── TAGS / PILLS ── */
  --tag-font-size: 10px;
  --tag-font-weight: 500;
  --tag-ls: 0.06em;
  --tag-padding: 4px 12px;
  --tag-bg: rgba(10, 15, 13, 0.06);
  --tag-radius: var(--radius-pill);

  --tag-loc-font-size: 9.5px;
  --tag-loc-padding: 3px 11px;
  --tag-loc-bg: rgba(247, 245, 242, 0.07);
  --tag-loc-color: rgba(247, 245, 242, 0.5);

  /* ── MEMBERSHIP CARD ── */
  --mem-price-font-size: 52px;
  --mem-price-weight: 400;
  --mem-title-font-size: 22px;
  --mem-title-weight: 500;
  --mem-badge-font-size: 9px;
  --mem-badge-font-weight: 700;
  --mem-badge-ls: 0.1em;
  --mem-feat-font-size: 12.5px;
  --mem-dot-size: 4px;
  --mem-dot-top: 7px;

  /* ── TESTIMONIAL ── */
  --testi-q-font-size: 15.5px;
  --testi-q-line-height: 1.65;
  --testi-star-size: 12px;
  --testi-ava-size: 38px;
  --testi-ava-font-size: 13px;
  --testi-name-font-size: 12.5px;
  --testi-svc-font-size: 10.5px;

  /* ── BIO CARD ── */
  --bio-card-width: 188px;
  --bio-card-padding: 22px 24px;
  --bio-card-radius: var(--radius-md);
  --bio-val-font-size: 30px;
  --bio-bar-height: 1.5px;
  --bio-bar-radius: 2px;
  --bio-bar-bg: rgba(255, 255, 255, 0.08);

  /* ── APP FEATURE CARD ── */
  --af-card-padding: 40px 32px;
  --af-number-font-size: 34px;
  --af-number-color: rgba(247, 245, 242, 0.06);
  --af-title-font-size: 19px;
  --af-desc-font-size: 13px;

  /* ── STORE BUTTON ── */
  --store-icon-size: 22px;
  --store-sm-font-size: 9px;
  --store-sm-ls: 0.08em;
  --store-lg-font-size: 14px;
  --store-lg-weight: 600;
  --store-bg: rgba(255, 255, 255, 0.06);
  --store-border: rgba(255, 255, 255, 0.1);
  --store-hover-bg: rgba(80, 200, 120, 0.1);
  --store-hover-border: rgba(80, 200, 120, 0.25);
  --store-radius: var(--radius-sm);

  /* ── FOOTER ── */
  --footer-padding: 80px 52px 40px;
  --footer-logo-height: 28px;
  --footer-about-font-size: 12.5px;
  --footer-about-color: var(--color-off-black);
  --footer-col-title-font-size: 10.5px;
  --footer-col-title-weight: 700;
  --footer-col-title-ls: 0.14em;
  --footer-link-font-size: 12.5px;
  --footer-link-color: var(--color-off-black);
  --footer-legal-font-size: 11px;
  --footer-legal-color: var(--color-off-black);
  --footer-social-size: 34px;
  --footer-social-icon-size: 13px;
  --footer-social-bg: rgba(10, 15, 13, 0.05);
  --footer-social-border: rgba(10, 15, 13, 0.08);
  --footer-social-hover-bg: rgba(80, 200, 120, 0.14);

  /* ── HERO ── */
  --hero-min-height: 700px;
  --hero-padding-bottom: 80px;
  --hero-eyebrow-margin-bottom: 32px;
  --hero-desc-max-width: 380px;
  --hero-desc-margin-bottom: 36px;
  --hero-stats-gap: 48px;
  --hero-stat-num-font-size: 32px;
  --hero-stat-label-font-size: 10px;
  --hero-stat-label-color: rgba(247, 245, 242, 0.35);
  --hero-scroll-right: 52px;
  --hero-scroll-bottom: 36px;
  --hero-scroll-track-height: 56px;
  --hero-scroll-label-font-size: 9px;

  /* ── MARQUEE ── */
  --marquee-bg: var(--color-emerald);
  --marquee-padding: 12px 0;
  --marquee-item-padding: 0 28px;
  --marquee-item-font-size: 11px;
  --marquee-item-font-weight: 600;
  --marquee-item-ls: 0.14em;
  --marquee-item-color: rgba(255, 255, 255, 0.9);
  --marquee-sep-size: 4px;
  --marquee-sep-color: rgba(255, 255, 255, 0.4);

  /* ── PHILOSOPHY ── */
  --philosophy-padding: 160px 0 120px;
  --phil-stat-num-font-size: 44px;
  --phil-stat-num-span-font-size: 22px;
  --phil-stat-label-font-size: 12px;

  /* ── CHIP ── */
  --chip-padding: 9px 16px;
  --chip-dot-size: 7px;
  --chip-text-font-size: 11.5px;
  --chip-text-weight: 500;
  --chip-sub-font-size: 10px;
  --chip-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* ── WHEEL ── */
  --wheel-section-height: 600vh;
  --wheel-svg-size: 600px;
  --wheel-canvas-cx: 300;
  --wheel-canvas-cy: 528;
  --wheel-radius: 480;
  --wheel-item-title-font-size: 22px;
  --wheel-item-desc-font-size: 12px;
  --wheel-dot-radius-active: 7;
  --wheel-dot-radius-inactive: 5;
  --wheel-outer-stroke-active: rgba(247, 245, 242, 0.35);
  --wheel-outer-stroke-inactive: rgba(247, 245, 242, 0.1);
  --wheel-dot-color: #C9A85A;
  --wheel-center-width: 200px;

  /* ── APP SECTION ── */
  --app-stage-height: 90vh;
  --app-stage-min-height: 600px;
  --app-pill-padding: 7px 18px;
  --app-pill-margin-bottom: 32px;
  --app-glow-width: 560px;
  --app-glow-height: 560px;

  /* ── POPULAR SERVICES ── */
  --pop-label-font-size: 10px;
  --pop-label-font-weight: 700;
  --pop-label-ls: 0.14em;
  --pop-item-tag-font-size: 9.5px;
  --pop-item-tag-font-weight: 600;
  --pop-item-tag-ls: 0.08em;
  --pop-item-name-font-size: 13px;
  --pop-item-name-weight: 500;
  --pop-item-price-font-size: 11.5px;
  --pop-item-sep-size: 3px;
  --pop-item-sep-color: rgba(10, 15, 13, 0.2);
  --pop-item-padding: 10px 18px;
  --pop-item-bg: rgba(10, 15, 13, 0.04);
  --pop-item-border: rgba(10, 15, 13, 0.08);

  /* ── SECTION UTILITIES ── */
  --section-inner-max-width: var(--max-width);
  --section-inner-padding: 0 var(--padding-x);
  /* ── NAV DROPDOWN ── */
  --nav-dropdown-padding: 20px;
  --nav-dropdown-min-width: 220px;
  --nav-dropdown-wide-min-width: 320px;
  --nav-dropdown-radius: var(--radius-md);
  --nav-dd-link-font-size: 13px;
  --nav-dd-link-padding: 7px 0;
  --nav-dd-dot-size: 4px;
  --nav-dd-pop-label-font-size: 9.5px;
  --nav-dd-pop-link-font-size: 11.5px;
  --nav-dd-pop-link-weight: 600;
  --nav-trigger-font-size: 14px;
  --nav-trigger-weight: 500;
  --nav-trigger-ls: 0.01em;
  --nav-trigger-padding: 8px 16px;
  --nav-trigger-arrow-size: 8px;
  --nav-phone-font-size: 12px;
  --nav-logo-height: 32px;

  /* ── LOADER ── */
  --loader-wordmark-font-size: 13px;
  --loader-wordmark-ls: 0.3em;
  --loader-pct-font-size: 72px;
  --loader-line-height: 80px;
  --loader-gap: 28px;
  --loader-wordmark-color: rgba(247, 245, 242, 0.4);
}

@media (max-width: 768px) {
  :root {
    --wheel-section-height: 200vh;
  }
}

/* ── RESET / BASE ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  font-family: var(--font-sans);
  background: var(--surface-light);
  color: var(--text-light-primary);
  overflow-x: hidden;
  cursor: none;
}

/* ── CURSOR ── */
#cursor {
  width: var(--cursor-dot-size);
  height: var(--cursor-dot-size);
  background: var(--cursor-bg);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width var(--transition-medium), height var(--transition-medium), background var(--transition-medium);
}

#cursor-ring {
  width: var(--cursor-ring-size);
  height: var(--cursor-ring-size);
  border: var(--cursor-ring-border);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width var(--transition-slow), height var(--transition-slow);
}

.cursor-hover #cursor {
  width: var(--cursor-dot-size-hover);
  height: var(--cursor-dot-size-hover);
}

.cursor-hover #cursor-ring {
  width: var(--cursor-ring-size-hover);
  border-color: var(--cursor-ring-border-hover);
}

/* ── LOADER ── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--color-off-black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--loader-gap);
}

.loader-wordmark {
  font-family: var(--font-serif);
  font-size: var(--loader-wordmark-font-size);
  letter-spacing: var(--loader-wordmark-ls);
  text-transform: uppercase;
  color: var(--loader-wordmark-color);
  opacity: 0;
}

.loader-pct {
  font-family: var(--font-serif);
  font-size: var(--loader-pct-font-size);
  font-weight: var(--fw-regular);
  color: var(--color-warm-white);
  line-height: 1;
  opacity: 0;
  min-width: 3ch;
  text-align: center;
}

.loader-line {
  width: 1px;
  height: 0;
  background: var(--color-emerald);
  margin: 0 auto;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 var(--nav-padding-x);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav {
  background: var(--color-warm-white);
}

nav.scrolled {
  background: var(--color-warm-white);
  backdrop-filter: blur(var(--blur-nav));
}

.nav-logo img {
  height: var(--nav-logo-height);
}

.nav-logo img.dark {
  filter: none;
}

.nav-center {
  display: flex;
  gap: 0;
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-trigger {
  font-size: var(--nav-trigger-font-size);
  font-weight: var(--nav-trigger-weight);
  letter-spacing: var(--nav-trigger-ls);
  color: var(--text-light-primary);
  text-decoration: none;
  padding: var(--nav-trigger-padding);
  background: none;
  border: none;
  cursor: none;
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-trigger:hover {
  color: var(--color-deep-evergreen);
}

.nav-trigger-arrow {
  width: 10px;
  height: 10px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  flex-shrink: 0;
}

.nav-item:hover .nav-trigger-arrow {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--surface-dark-solid);
  backdrop-filter: blur(var(--blur-dropdown));
  border: 1px solid var(--border-dark);
  border-radius: var(--nav-dropdown-radius);
  padding: var(--nav-dropdown-padding);
  min-width: var(--nav-dropdown-min-width);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}

.nav-dropdown-wide {
  min-width: var(--nav-dropdown-wide-min-width);
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dd-title {
  font-size: var(--nav-dd-pop-label-font-size);
  font-weight: var(--fw-nav-dropdown-title);
  letter-spacing: var(--ls-nav-dropdown-title);
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-dark-subtle);
}

.nav-dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.nav-dd-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--nav-dd-link-padding);
  text-decoration: none;
  color: var(--text-dark-muted);
  font-size: var(--nav-dd-link-font-size);
  transition: color var(--transition-fast);
  border-bottom: 1px solid var(--border-dark-subtle);
}

.nav-dd-link:last-child {
  border-bottom: none;
}

.nav-dd-link:hover {
  color: var(--text-dark-primary);
}

.nav-dd-link-featured {
  color: rgba(var(--color-warm-gold-rgb), 0.8);
}

.nav-dd-link-featured:hover {
  color: var(--color-warm-gold);
}

.nav-dd-dot {
  width: var(--nav-dd-dot-size);
  height: var(--nav-dd-dot-size);
  border-radius: 50%;
  background: var(--color-emerald);
  flex-shrink: 0;
  opacity: 0.5;
}

.nav-dd-popular {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-dark-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-dd-pop-label {
  font-size: var(--nav-dd-pop-label-font-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark-ultra-faint);
}

.nav-dd-pop-link {
  font-size: var(--nav-dd-pop-link-font-size);
  font-weight: var(--nav-dd-pop-link-weight);
  color: var(--color-emerald);
  text-decoration: none;
  transition: opacity var(--transition);
}

.nav-dd-pop-link:hover {
  opacity: 0.75;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-phone {
  font-size: var(--nav-phone-font-size);
  color: var(--text-light-secondary);
  letter-spacing: 0.03em;
}

.nav-book {
  background: var(--btn-nav-bg);
  color: #fff;
  border: none;
  padding: var(--btn-nav-padding-y) var(--btn-nav-padding-x);
  border-radius: var(--btn-cta-radius);
  font-size: var(--btn-nav-font-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--btn-ls);
  cursor: none;
  transition: background var(--transition), transform var(--transition);
}

.nav-book:hover {
  background: var(--btn-nav-hover);
  transform: scale(1.03);
}

/* ── HERO ── */
#hero {
  height: 100vh;
  min-height: var(--hero-min-height);
  background: #1F4C3B;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  padding-bottom: var(--hero-padding-bottom);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: var(--grid-hero);
  background-size: var(--grid-hero-size);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section-lg);
  align-items: end;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--hero-eyebrow-margin-bottom);
  opacity: 0;
}

.hero-eyebrow-line {
  width: 28px;
  height: 1px;
  background: var(--color-emerald);
}

.hero-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-h1-hero);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h1-hero);
  color: var(--text-dark-primary);
  letter-spacing: var(--ls-heading);
  margin-bottom: 0;
}

.hero-h1 em {
  color: var(--color-emerald);
}

.word {
  display: inline-block;
  overflow: hidden;
}

.word-inner {
  display: inline-block;
  transform: translateY(110%);
}

.hero-right {
  padding-bottom: 8px;
}

.hero-desc {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-dark-muted);
  margin-bottom: var(--hero-desc-margin-bottom);
  font-weight: var(--fw-light);
  opacity: 0;
  max-width: var(--hero-desc-max-width);
}

.hero-actions {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  opacity: 0;
}

.hero-stats {
  position: absolute;
  bottom: var(--hero-padding-bottom);
  left: var(--padding-x);
  display: flex;
  gap: var(--hero-stats-gap);
  opacity: 0;
}

.hero-stat-num {
  font-family: var(--font-serif);
  font-size: var(--hero-stat-num-font-size);
  font-weight: var(--fw-regular);
  color: var(--text-dark-primary);
  line-height: 1;
}

.hero-stat-label {
  font-size: var(--hero-stat-label-font-size);
  color: var(--hero-stat-label-color);
  letter-spacing: 0.08em;
  margin-top: 4px;
  text-transform: uppercase;
}

.hero-scroll {
  position: absolute;
  bottom: var(--hero-scroll-bottom);
  right: var(--hero-scroll-right);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  opacity: 0;
}

.hero-scroll-label {
  font-size: var(--hero-scroll-label-font-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-dark-ultra-faint);
  writing-mode: vertical-rl;
}

.hero-scroll-track {
  width: 1px;
  height: var(--hero-scroll-track-height);
  background: var(--text-dark-ultra-faint);
  position: relative;
  overflow: hidden;
}

.hero-scroll-fill {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-emerald);
  animation: scrollFill var(--anim-scroll-fill) ease-in-out infinite;
}

@keyframes scrollFill {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* ── BUTTONS ── */
.btn-primary {
  background: var(--btn-primary-bg);
  color: #fff;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-cta-radius);
  font-size: var(--btn-cta-font-size);
  font-weight: var(--btn-cta-font-weight);
  letter-spacing: var(--btn-ls);
  text-decoration: none;
  border: none;
  cursor: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-primary-shadow);
}

.btn-outline {
  color: var(--text-dark-nav);
  padding: var(--btn-padding-y) var(--btn-padding-x-sm);
  border-radius: var(--btn-cta-radius);
  font-size: var(--btn-cta-font-size);
  font-weight: var(--btn-font-weight-outline);
  text-decoration: none;
  border: 1px solid var(--border-dark);
  cursor: none;
  transition: border-color var(--transition), color var(--transition);
}

.btn-outline:hover {
  border-color: var(--text-dark-nav);
  color: var(--text-dark-primary);
}

.btn-evergreen {
  background: var(--color-deep-evergreen);
  color: #fff;
  padding: var(--btn-padding-y) var(--btn-padding-x-sm);
  border-radius: var(--btn-cta-radius);
  font-size: var(--btn-cta-font-size);
  font-weight: var(--btn-font-weight-outline);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn-evergreen:hover {
  background: #074d33;
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.btn-dark {
  background: var(--btn-dark-bg);
  color: var(--btn-dark-text);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-cta-radius);
  font-size: var(--btn-cta-font-size);
  font-weight: var(--btn-cta-font-weight);
  text-decoration: none;
  transition: all var(--transition);
  cursor: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.btn-dark:hover {
  background: var(--btn-dark-hover);
  transform: translateY(-2px);
}

.btn-wghost {
  color: #fff;
  padding: var(--btn-padding-y) var(--btn-padding-x-sm);
  border-radius: var(--btn-cta-radius);
  font-size: var(--btn-cta-font-size);
  font-weight: var(--btn-font-weight-outline);
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.35);
  cursor: none;
  transition: all var(--transition);
}

.btn-wghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* ── MARQUEE ── */
.marquee-wrap {
  background: var(--marquee-bg);
  padding: var(--marquee-padding);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  animation: marquee var(--anim-marquee) linear infinite;
  width: max-content;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--marquee-item-padding);
  font-size: var(--marquee-item-font-size);
  font-weight: var(--marquee-item-font-weight);
  letter-spacing: var(--marquee-item-ls);
  text-transform: uppercase;
  color: var(--marquee-item-color);
  white-space: nowrap;
}

.marquee-sep {
  width: var(--marquee-sep-size);
  height: var(--marquee-sep-size);
  border-radius: 50%;
  background: var(--marquee-sep-color);
  flex-shrink: 0;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── SECTION UTILITIES ── */
.section-inner {
  max-width: var(--section-inner-max-width);
  margin: 0 auto;
  padding: var(--section-inner-padding);
}

.h2-serif {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
}



/* ── PHILOSOPHY ── */
#philosophy {
  padding: var(--philosophy-padding);
  background: var(--surface-light);
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap-section-xl);
  align-items: start;
}

.philosophy-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2-philosophy);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2-tight);
  letter-spacing: var(--ls-heading);
  color: var(--text-light-primary);
}

.philosophy-h2 em {
  color: var(--color-deep-evergreen);
}

.philosophy-right {
  padding-top: 8px;
}

.philosophy-desc {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body);
  color: var(--text-light-secondary);
  font-weight: var(--fw-light);
  margin-bottom: var(--space-5xl);
}

.philosophy-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
}

.phil-stat {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--border-light);
}

.phil-stat-num {
  font-family: var(--font-serif);
  font-size: var(--phil-stat-num-font-size);
  font-weight: var(--fw-regular);
  color: var(--text-light-primary);
  line-height: 1;
}

.phil-stat-num span {
  font-size: var(--phil-stat-num-span-font-size);
  color: var(--color-emerald);
}

.phil-stat-label {
  font-size: var(--phil-stat-label-font-size);
  color: var(--text-light-secondary);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── SERVICES ── */
#services {
  padding: 0 0 var(--space-section-lg);
  background: var(--surface-light);
}

.services-head {
  margin-bottom: var(--space-9xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section-lg);
  align-items: end;
}

.services-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2-services);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
  color: var(--text-light-primary);
}

.services-h2 em {
  color: var(--color-deep-evergreen);
}

.services-desc {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-light-secondary);
  font-weight: var(--fw-light);
  align-self: end;
}

.services-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
}

.service-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  gap: var(--space-5xl);
  align-items: center;
  padding: var(--space-3xl) 0;
  border-bottom: 1px solid var(--border-light);
  cursor: none;
  transition: all var(--transition-slow);
  position: relative;
}

.service-row:hover {
  padding-left: var(--svc-row-hover-shift);
}

.service-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--color-emerald);
  border-radius: 0 2px 2px 0;
  transition: width var(--transition-slow);
}

.service-row:hover::before {
  width: var(--svc-row-accent-width);
}

.svc-num {
  font-family: var(--font-serif);
  font-size: var(--svc-row-num-font-size);
  color: var(--svc-row-num-color);
}

.svc-name {
  font-family: var(--font-serif);
  font-size: var(--svc-row-name-font-size);
  font-weight: var(--svc-row-name-weight);
  color: var(--text-light-primary);
  transition: color var(--transition);
}

.service-row:hover .svc-name {
  color: var(--color-deep-evergreen);
}

.svc-tags {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.svc-tag {
  font-size: var(--tag-font-size);
  font-weight: var(--tag-font-weight);
  letter-spacing: var(--tag-ls);
  background: var(--tag-bg);
  color: var(--text-light-secondary);
  border-radius: var(--tag-radius);
  padding: var(--tag-padding);
}

.svc-arrow {
  width: var(--svc-arrow-size);
  height: var(--svc-arrow-size);
  border-radius: 50%;
  border: 1px solid var(--border-light-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.service-row:hover .svc-arrow {
  background: var(--color-emerald);
  border-color: var(--color-emerald);
  transform: translateX(4px);
}

.svc-arrow svg {
  width: var(--svc-arrow-icon-size);
  height: var(--svc-arrow-icon-size);
  stroke: var(--text-light-primary);
  transition: stroke var(--transition);
}

.service-row:hover .svc-arrow svg {
  stroke: #fff;
}

/* ── POPULAR SERVICES ── */
.popular-services {
  margin-top: var(--space-6xl);
  padding-top: var(--space-5xl);
  border-top: 1px solid var(--border-light-subtle);
  display: flex;
  align-items: flex-start;
  gap: var(--space-5xl);
}

.pop-label {
  font-size: var(--pop-label-font-size);
  font-weight: var(--pop-label-font-weight);
  letter-spacing: var(--pop-label-ls);
  text-transform: uppercase;
  color: var(--text-light-secondary);
  white-space: nowrap;
  padding-top: 14px;
  flex-shrink: 0;
}

.pop-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.pop-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--pop-item-bg);
  border: 1px solid var(--pop-item-border);
  border-radius: var(--btn-cta-radius);
  padding: var(--pop-item-padding);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  cursor: none;
}

.pop-item:hover {
  background: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  transform: translateY(-2px);
}

.pop-item:hover .pop-item-tag,
.pop-item:hover .pop-item-name,
.pop-item:hover .pop-item-price {
  color: var(--text-dark-tertiary);
}

.pop-item:hover .pop-item-name {
  color: var(--text-dark-primary);
}

.pop-item-tag {
  font-size: var(--pop-item-tag-font-size);
  font-weight: var(--pop-item-tag-font-weight);
  letter-spacing: var(--pop-item-tag-ls);
  text-transform: uppercase;
  color: var(--color-soft-moss);
  transition: color var(--transition);
}

.pop-item-name {
  font-size: var(--pop-item-name-font-size);
  font-weight: var(--pop-item-name-weight);
  color: var(--text-light-primary);
  transition: color var(--transition);
}

.pop-item-sep {
  width: var(--pop-item-sep-size);
  height: var(--pop-item-sep-size);
  border-radius: 50%;
  background: var(--pop-item-sep-color);
  flex-shrink: 0;
}

.pop-item-price {
  font-size: var(--pop-item-price-font-size);
  color: var(--text-light-secondary);
  transition: color var(--transition);
}

/* ── WHEEL SECTION ── */
#wheel-section {
  height: var(--wheel-section-height);
  position: relative;
  background: #1F4C3B;
}

.wheel-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.wheel-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-x);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section-lg);
  align-items: center;
  height: 100%;
}

.wheel-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wheel-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2-xl);
  color: var(--text-dark-primary);
  letter-spacing: var(--ls-heading);
  margin-bottom: 0;
}

.wheel-h2 em {
  color: var(--color-emerald);
}

.wheel-right {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

.wheel-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.wheel-center-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  width: var(--wheel-center-width);
}

.wheel-item-title {
  font-family: var(--font-serif);
  font-size: var(--wheel-item-title-font-size);
  font-weight: var(--fw-regular);
  color: var(--text-dark-primary);
  line-height: var(--lh-heading-tight);
  margin-bottom: var(--space-sm);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.wheel-item-desc {
  font-size: var(--wheel-item-desc-font-size);
  line-height: var(--lh-caption);
  color: var(--text-dark-muted);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.wheel-center-text.visible .wheel-item-title,
.wheel-center-text.visible .wheel-item-desc {
  opacity: 1;
}

/* ── BIOMARKERS ── */
#biomarkers {
  background: var(--color-deep-forest);
  padding: var(--space-section) 0;
  overflow: hidden;
}

.bio-header {
  max-width: var(--max-width);
  margin: 0 auto var(--space-7xl);
  padding: 0 var(--padding-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section-lg);
  align-items: end;
}

.bio-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2-bio);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2);
  color: var(--text-dark-primary);
  letter-spacing: var(--ls-heading);
}

.bio-h2 em {
  color: var(--color-emerald);
}

.bio-desc {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--text-dark-subtle);
  font-weight: var(--fw-light);
  align-self: end;
}

.bio-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.bio-strip {
  display: flex;
  gap: var(--space-lg);
  animation: bioScroll var(--anim-bio-scroll-1) linear infinite;
  width: max-content;
}

.bio-strip:nth-child(2) {
  animation-direction: reverse;
  animation-duration: var(--anim-bio-scroll-2);
}

@keyframes bioScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.bio-card {
  flex-shrink: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--bio-card-radius);
  padding: var(--bio-card-padding);
  width: var(--bio-card-width);
  transition: background var(--transition-slow), border-color var(--transition-slow);
}

.bio-card:hover {
  background: var(--color-emerald-bg);
  border-color: var(--color-emerald-border);
}

.bio-val {
  font-family: var(--font-serif);
  font-size: var(--bio-val-font-size);
  font-weight: var(--fw-regular);
  color: var(--text-dark-primary);
  line-height: 1;
}

.bio-unit {
  font-size: var(--text-caption-xs);
  color: var(--color-emerald);
  font-weight: var(--fw-medium);
  margin-left: 1px;
}

.bio-name {
  font-size: var(--text-caption-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-dark-secondary);
  margin: var(--space-md) 0 var(--space-xs);
  letter-spacing: 0.03em;
}

.bio-sub {
  font-size: var(--text-label-xs);
  color: var(--text-dark-ultra-faint);
  line-height: var(--lh-micro);
}

.bio-bar {
  height: var(--bio-bar-height);
  background: var(--bio-bar-bg);
  border-radius: var(--bio-bar-radius);
  margin-top: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.bio-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--color-emerald);
  border-radius: var(--bio-bar-radius);
}

/* ── APP SECTION ── */
#app-section {
  background: var(--color-off-black);
  overflow: hidden;
}

.app-intro {
  padding: var(--space-section-lg) var(--padding-x) var(--space-7xl);
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.app-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-emerald-subtle);
  border: 1px solid var(--color-emerald-border);
  border-radius: var(--btn-cta-radius);
  padding: var(--app-pill-padding);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--app-pill-margin-bottom);
}

.app-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2-app);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2-tight);
  color: var(--text-dark-primary);
  letter-spacing: var(--ls-heading-tight);
  margin-bottom: var(--space-3xl);
}

.app-h2 em {
  color: var(--color-emerald);
}

.app-sub {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-tight);
  color: var(--text-dark-subtle);
  max-width: 500px;
  margin: 0 auto 0;
  font-weight: var(--fw-light);
}

.app-stage {
  position: relative;
  height: var(--app-stage-height);
  min-height: var(--app-stage-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.app-glow {
  position: absolute;
  width: var(--app-glow-width);
  height: var(--app-glow-height);
  border-radius: 50%;
  background: var(--glow-app);
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.phone {
  width: var(--phone-width);
  height: var(--phone-height);
  background: var(--surface-phone);
  border-radius: var(--phone-radius);
  border: var(--phone-border);
  box-shadow: var(--phone-shadow);
  position: relative;
  overflow: hidden;
  z-index: 2;
  opacity: 0;
  transform: translateY(70px);
}

.phone-notch {
  position: absolute;
  top: var(--phone-notch-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--phone-notch-width);
  height: var(--phone-notch-height);
  background: var(--surface-phone);
  border-radius: var(--phone-notch-radius);
  z-index: 10;
}

.phone-screen {
  position: absolute;
  inset: 0;
  background: var(--gradient-phone);
}

.phone-ui {
  position: absolute;
  inset: 0;
  padding: var(--phone-ui-padding);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pui-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.pui-greet {
  font-size: var(--text-label-xs);
  color: var(--text-dark-ultra-faint);
}

.pui-name {
  font-size: var(--text-caption-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-dark-primary);
}

.pui-ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(80, 200, 120, 0.25);
  border: 1px solid var(--color-emerald-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-caption-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-emerald);
}

.pui-card {
  background: var(--color-emerald-subtle);
  border: 1px solid var(--color-emerald-border);
  border-radius: var(--radius-xs);
  padding: var(--space-lg);
}

.pui-card-lbl {
  font-size: var(--text-label-3xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--space-sm);
}

.pui-card-val {
  font-family: var(--font-serif);
  font-size: var(--text-caption-xs);
  color: var(--text-dark-primary);
  line-height: 1;
}

.pui-card-sub {
  font-size: var(--text-label-3xs);
  color: var(--text-dark-ultra-faint);
  margin-top: var(--space-xs);
}

.pui-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.pui-metric {
  background: var(--surface-card);
  border-radius: var(--radius-xs);
  padding: var(--space-md);
  border: 1px solid var(--border-dark-faint);
}

.pui-metric-lbl {
  font-size: var(--text-label-4xs);
  color: var(--text-dark-ultra-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

.pui-metric-val {
  font-size: var(--text-caption-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-dark-primary);
}

.pui-metric-unit {
  font-size: var(--text-label-4xs);
  color: var(--color-soft-moss);
}

.pui-appts {
  background: var(--surface-card);
  border-radius: var(--radius-xs);
  padding: var(--space-md);
  border: 1px solid var(--border-dark-faint);
}

.pui-appt-lbl {
  font-size: var(--text-label-4xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark-ultra-faint);
  margin-bottom: var(--space-lg);
}

.pui-appt {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-dark-subtle);
}

.pui-appt:last-child {
  border-bottom: none;
}

.pui-appt-dot {
  width: var(--nav-dd-dot-size);
  height: var(--nav-dd-dot-size);
  border-radius: 50%;
  flex-shrink: 0;
}

.pui-appt-txt {
  font-size: var(--text-label-xs);
  color: var(--text-dark-tertiary);
}

.pui-appt-time {
  font-size: var(--text-ui-micro);
  color: var(--text-dark-ultra-faint);
  margin-left: auto;
}

/* ── CHIPS ── */
.chip {
  position: absolute;
  z-index: 5;
  background: var(--surface-chip);
  backdrop-filter: blur(var(--blur-chip));
  border: 1px solid var(--color-emerald-border);
  border-radius: var(--btn-cta-radius);
  padding: var(--chip-padding);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  white-space: nowrap;
  opacity: 0;
  box-shadow: var(--chip-shadow);
}

.chip-dot {
  width: var(--chip-dot-size);
  height: var(--chip-dot-size);
  border-radius: 50%;
  flex-shrink: 0;
}

.chip-txt {
  font-size: var(--chip-text-font-size);
  font-weight: var(--chip-text-weight);
  color: var(--text-dark-primary);
}

.chip-sub {
  font-size: var(--chip-sub-font-size);
  color: var(--color-emerald);
}

#chip1 { left: -230px; top: 110px; }
#chip2 { right: -240px; top: 190px; }
#chip3 { left: -210px; bottom: 210px; }
#chip4 { right: -210px; bottom: 150px; }

/* ── APP FEATURES ── */
.app-features-wrap {
  padding: var(--space-7xl) var(--padding-x) var(--space-8xl);
  max-width: var(--max-width);
  margin: 0 auto;
}

.app-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-dark-faint);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.af-card {
  background: var(--color-off-black);
  padding: var(--af-card-padding);
  transition: background var(--transition-slow);
}

.af-card:hover {
  background: var(--color-emerald-bg-hover);
}

.af-n {
  font-family: var(--font-serif);
  font-size: var(--af-number-font-size);
  font-weight: var(--fw-regular);
  color: var(--af-number-color);
  line-height: 1;
  margin-bottom: var(--space-4xl);
}

.af-title {
  font-family: var(--font-serif);
  font-size: var(--af-title-font-size);
  color: var(--text-dark-primary);
  margin-bottom: var(--space-md);
  line-height: var(--lh-heading);
}

.af-desc {
  font-size: var(--af-desc-font-size);
  line-height: var(--lh-body);
  color: var(--text-dark-muted);
}

/* ── APP DOWNLOAD ── */
.app-dl {
  text-align: center;
  padding: 0 var(--padding-x) var(--space-section);
}

.app-dl-h3 {
  font-family: var(--font-serif);
  font-size: var(--text-h3-dl);
  font-weight: var(--fw-regular);
  color: var(--text-dark-primary);
  margin-bottom: var(--space-xl);
  letter-spacing: var(--ls-heading);
}

.app-dl-sub {
  font-size: var(--text-body-sm);
  color: var(--text-dark-muted);
  margin-bottom: var(--space-3xl);
}

.app-dl-btns {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--store-bg);
  border: 1px solid var(--store-border);
  border-radius: var(--store-radius);
  padding: var(--space-md) var(--space-3xl);
  cursor: none;
  transition: background var(--transition), border-color var(--transition);
  text-decoration: none;
}

.store-btn:hover {
  background: var(--store-hover-bg);
  border-color: var(--store-hover-border);
}

.store-icon svg {
  width: var(--store-icon-size);
  height: var(--store-icon-size);
  fill: var(--text-dark-primary);
}

.store-sm {
  font-size: var(--store-sm-font-size);
  color: var(--text-dark-ultra-faint);
  text-transform: uppercase;
  letter-spacing: var(--store-sm-ls);
}

.store-lg {
  font-size: var(--store-lg-font-size);
  font-weight: var(--store-lg-weight);
  color: var(--text-dark-primary);
}

/* ── MEMBERSHIP ── */
#membership {
  padding: var(--space-section-lg) 0;
  background: var(--color-deep-forest);
  position: relative;
  overflow: hidden;
}

.mem-bg {
  position: absolute;
  inset: 0;
  background: var(--glow-membership);
  pointer-events: none;
}

.mem-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section-lg);
  align-items: end;
  margin-bottom: var(--space-7xl);
}

.mem-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2-membership);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2-membership);
  color: var(--text-dark-primary);
  letter-spacing: var(--ls-heading);
}

.mem-h2 em {
  color: var(--color-emerald);
}

.mem-desc {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-loose);
  color: var(--text-dark-subtle);
  font-weight: var(--fw-light);
  align-self: end;
}

.mem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.mem-card {
  border-radius: var(--radius-xl);
  padding: var(--card-padding-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-dark);
  cursor: none;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.mem-card:hover {
  transform: var(--card-hover-transform);
  box-shadow: var(--card-hover-shadow-lg);
}

.mem-card.featured {
  background: var(--color-emerald);
  border-color: var(--color-emerald);
}

.mem-badge {
  position: absolute;
  top: var(--space-3xl);
  right: var(--space-3xl);
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--btn-cta-radius);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--mem-badge-font-size);
  font-weight: var(--mem-badge-font-weight);
  letter-spacing: var(--mem-badge-ls);
  text-transform: uppercase;
  color: #fff;
}

.mem-title {
  font-family: var(--font-serif);
  font-size: var(--mem-title-font-size);
  font-weight: var(--mem-title-weight);
  color: var(--text-dark-primary);
  margin-bottom: var(--space-xs);
}

.mem-subtitle {
  font-size: var(--text-caption-xs);
  color: var(--text-dark-muted);
  margin-bottom: var(--space-3xl);
}

.mem-price {
  font-family: var(--font-serif);
  font-size: var(--mem-price-font-size);
  font-weight: var(--mem-price-weight);
  color: var(--text-dark-primary);
  line-height: 1;
}

.mem-per {
  font-size: var(--text-body-sm);
  color: var(--text-dark-muted);
}

.mem-period {
  font-size: var(--text-caption-xs);
  color: var(--text-dark-ultra-faint);
  margin-bottom: var(--space-3xl);
  margin-top: var(--space-xs);
}

.mem-divider {
  height: 1px;
  background: var(--border-dark);
  margin-bottom: var(--space-3xl);
}

.mem-card.featured .mem-divider {
  background: rgba(255, 255, 255, 0.25);
}

.mem-feat {
  font-size: var(--mem-feat-font-size);
  color: var(--text-dark-tertiary);
  margin-bottom: var(--space-sm);
  padding-left: var(--space-lg);
  position: relative;
}

.mem-feat::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--mem-dot-top);
  width: var(--mem-dot-size);
  height: var(--mem-dot-size);
  border-radius: 50%;
  background: var(--color-emerald);
}

.mem-card.featured .mem-feat {
  color: rgba(255, 255, 255, 0.85);
}

.mem-card.featured .mem-feat::before {
  background: #fff;
}

.mem-cta {
  display: block;
  text-align: center;
  margin-top: var(--space-3xl);
  padding: var(--space-md);
  border-radius: var(--btn-cta-radius);
  font-size: var(--btn-nav-font-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--btn-ls);
  text-decoration: none;
  transition: all var(--transition);
  cursor: none;
  background: var(--btn-mem-bg);
  color: var(--text-dark-primary);
  border: 1px solid var(--btn-mem-border);
}

.mem-card.featured .mem-cta {
  background: var(--btn-mem-featured-bg);
  color: var(--btn-mem-featured-text);
  border-color: transparent;
}

.mem-cta:hover {
  transform: scale(1.02);
}

/* ── LOCATIONS ── */
#locations {
  padding: var(--space-section-lg) 0;
  background: var(--surface-light);
}

.loc-head {
  margin-bottom: var(--space-9xl);
}

.loc-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2-locations);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2);
  color: var(--text-light-primary);
  letter-spacing: var(--ls-heading);
  max-width: 560px;
}

.loc-h2 em {
  color: var(--color-deep-evergreen);
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.loc-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-deep-forest);
  cursor: none;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.loc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow);
}

.loc-img {
  height: 170px;
  background: var(--color-deep-evergreen);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loc-ph {
  width: 100%;
  height: 100%;
  background: var(--gradient-loc-ph);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  position: relative;
}

.loc-ph-grid {
  position: absolute;
  inset: 0;
  background-image: var(--grid-loc-ph);
  background-size: var(--grid-loc-ph-size);
}

.loc-ph-lbl {
  font-size: var(--text-label-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav-dropdown-title);
  text-transform: uppercase;
  color: var(--text-dark-ultra-faint);
  font-family: var(--font-mono);
  z-index: 1;
}

.loc-body {
  padding: var(--space-3xl) var(--space-3xl) var(--space-4xl);
}

.loc-name {
  font-family: var(--font-serif);
  font-size: var(--text-caption);
  color: var(--text-dark-primary);
  margin-bottom: var(--space-xs);
}

.loc-area {
  font-size: var(--text-caption-xs);
  color: var(--color-emerald);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-lg);
}

.loc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.loc-tag {
  font-size: var(--tag-loc-font-size);
  font-weight: var(--fw-medium);
  background: var(--tag-loc-bg);
  color: var(--tag-loc-color);
  border-radius: var(--btn-cta-radius);
  padding: var(--tag-loc-padding);
}

/* ── TESTIMONIALS ── */
#testimonials {
  padding: var(--space-section) 0;
  background: #1F4C3B;
  overflow: hidden;
}

.testi-head {
  margin-bottom: var(--space-6xl);
}

.testi-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2-testi);
  font-weight: var(--fw-regular);
  color: var(--text-dark-primary);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-h2-testi);
}

.testi-h2 em {
  color: var(--color-emerald);
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.testi-card {
  background: var(--surface-card);
  border: 1px solid var(--border-dark-subtle);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  transition: background var(--transition-slow);
}

.testi-card:hover {
  background: var(--color-emerald-bg-hover);
}

.testi-stars {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.star {
  width: var(--testi-star-size);
  height: var(--testi-star-size);
  fill: var(--color-warm-gold);
}

.testi-q {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--testi-q-font-size);
  line-height: var(--testi-q-line-height);
  color: var(--text-dark-secondary);
  margin-bottom: var(--space-3xl);
}

.testi-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testi-ava {
  width: var(--testi-ava-size);
  height: var(--testi-ava-size);
  border-radius: 50%;
  background: var(--color-deep-evergreen);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--testi-ava-font-size);
  font-weight: var(--fw-semibold);
  color: var(--color-emerald);
  flex-shrink: 0;
}

.testi-name {
  font-size: var(--testi-name-font-size);
  font-weight: var(--fw-semibold);
  color: var(--text-dark-primary);
}

.testi-svc {
  font-size: var(--testi-svc-font-size);
  color: var(--text-dark-ultra-faint);
}

/* ── CTA ── */
#cta-section {
  background: var(--color-emerald);
  padding: var(--space-section) var(--padding-x);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-bg {
  position: absolute;
  inset: 0;
  background: var(--glow-cta);
  pointer-events: none;
}

.cta-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2-cta);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2-cta);
  color: #fff;
  letter-spacing: var(--ls-heading-tight);
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
}



.cta-sub {
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--space-5xl);
  position: relative;
  z-index: 1;
}

.cta-btns {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* ── FOOTER ── */
footer {
  background: var(--surface-light);
  padding: var(--footer-padding);
}

.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-6xl);
  padding-bottom: var(--space-6xl);
  border-bottom: 1px solid rgba(10, 15, 13, 0.1);
}

.footer-logo img {
  height: var(--footer-logo-height);
  margin-bottom: var(--space-xl);
}

.footer-about {
  font-size: var(--footer-about-font-size);
  line-height: var(--lh-body);
  color: var(--footer-about-color);
  max-width: 260px;
}

.footer-socials {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-3xl);
}

.footer-soc {
  width: var(--footer-social-size);
  height: var(--footer-social-size);
  border-radius: 50%;
  background: var(--footer-social-bg);
  border: 1px solid var(--footer-social-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: background var(--transition), border-color var(--transition);
  text-decoration: none;
}

.footer-soc:hover {
  background: var(--footer-social-hover-bg);
  border-color: var(--color-emerald);
}

.footer-soc svg {
  width: var(--footer-social-icon-size);
  height: var(--footer-social-icon-size);
  fill: var(--color-off-black);
}

.footer-col-title {
  font-size: var(--footer-col-title-font-size);
  font-weight: var(--footer-col-title-weight);
  letter-spacing: var(--footer-col-title-ls);
  text-transform: uppercase;
  color: var(--color-off-black);
  margin-bottom: var(--space-xl);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-links a {
  font-size: var(--footer-link-font-size);
  color: var(--color-off-black);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--color-emerald);
}

.footer-bottom {
  max-width: var(--max-width);
  margin: var(--space-3xl) auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.footer-legal {
  font-size: var(--footer-legal-font-size);
  color: var(--color-off-black);
}

.footer-legal-links {
  display: flex;
  gap: var(--space-3xl);
}

.footer-legal-links a {
  font-size: var(--footer-legal-font-size);
  color: var(--color-off-black);
  text-decoration: none;
}

.footer-legal-links a:hover {
  color: rgba(10, 15, 13, 0.6);
}

/* ── REVEAL UTILITIES ── */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
}

.reveal-l {
  opacity: 0;
  transform: translateX(calc(-1 * var(--reveal-x)));
}

.reveal-r {
  opacity: 0;
  transform: translateX(var(--reveal-x));
}