/* ============================================================
   Cellebration — Website Wireframe Styles
   Four theme variants driven by CSS variables.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  transition: background 0.3s ease, color 0.3s ease;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

/* ============================================================
   THEME VARIABLES
   ============================================================ */

/* Common tokens */
:root {
  /* Type system — Zalando (display) + Inter (everything else)
     Zalando Sans isn't free-licensed so we use Archivo as the closest
     public match: wide geometric sans with clean full-width letterforms
     (no notched / flag-cut middle arms), weights 500-900 available.
     If/when Zalando font files are available, swap --font-display to
     'Zalando Sans' and the rest of the system picks it up automatically. */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
  --container-w: 1200px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Theme WIRE · Grayscale wireframe (DEFAULT on load) ----------
   Structural preview only — dashed borders, placeholder boxes, no color.
   Use this to walk the client through layout/content BEFORE showing colorways. */
.theme-wire {
  --bg:          #F6F6F8;
  --bg-alt:      #ECECEF;
  --bg-section:  #FFFFFF;
  --bg-elevated: #FFFFFF;
  --text:        #2A2A2E;
  --text-soft:   #8E8E93;
  --heading:     #1C1C1E;
  --brand:       #48484A;
  --brand-soft:  #636366;
  --accent:      #3A3A3C;
  --accent-hover:#1C1C1E;
  --border:      #C7C7CC;
  --border-soft: #E5E5EA;
  --nav-bg:      rgba(246, 246, 248, 0.92);
  --nav-border:  rgba(0, 0, 0, 0.1);
  --pillar-bg:   #E5E5EA;
  --pillar-text: #636366;
  --hero-bg:     #F6F6F8;
  --orb-bg:      transparent;
  --cta-text:    #FFFFFF;
}

/* ---------- Theme A1 · REGENERATIVE · DAYLIGHT ----------
   Purple-led story, white canvas, charcoal body. Dark Purple carries
   headings AND primary CTAs (high contrast). Light Purple lives in the
   pillar gradient, hero glow, and hover states where it glows decoratively.
   Palette: White / #7F368A Dark Purple / #DC8EEB Light Purple / #474747 Charcoal. */
.theme-a1 {
  --bg:          #FFFFFF;
  --bg-alt:      #FAF5FD;
  --bg-section:  #FFFFFF;
  --bg-elevated: #FFFFFF;
  --text:        #474747;
  --text-soft:   #7F6B87;
  --heading:     #7F368A;
  --brand:       #7F368A;
  --brand-soft:  #A64FAD;
  --accent:      #7F368A;       /* Dark Purple — passes AA on white for eyebrows + CTAs */
  --accent-hover:#651F70;
  --highlight:   #DC8EEB;        /* Light Purple — reserved for hover glow + gradient */
  --border:      #EBDDF0;
  --border-soft: #F5ECF9;
  --nav-bg:      rgba(255, 255, 255, 0.94);
  --nav-border:  rgba(127, 54, 138, 0.14);
  --pillar-bg:   linear-gradient(135deg, #7F368A 0%, #DC8EEB 100%);
  --pillar-text: #FFFFFF;
  --hero-bg:     linear-gradient(180deg, #FFFFFF 0%, #FAF5FD 100%);
  --orb-bg:      radial-gradient(circle, rgba(220, 142, 235, 0.35), rgba(127, 54, 138, 0) 60%);
  --cta-text:    #FFFFFF;
}

/* ---------- Theme A2 · REGENERATIVE · MIDNIGHT ----------
   Deep aubergine canvas derived from the Purple Gradient — NOT Dark Navy.
   Light Purple headings + CTAs pop like neon. Body is warm cream.
   Palette: #231028 deep aubergine / #7F368A Dark Purple / #DC8EEB Light Purple. */
.theme-a2 {
  --bg:          #231028;
  --bg-alt:      #2E1738;
  --bg-section:  #281332;
  --bg-elevated: #3B2148;
  --text:        #F0E8F5;
  --text-soft:   #A890B8;
  --heading:     #DC8EEB;
  --brand:       #DC8EEB;
  --brand-soft:  #C76ED5;
  --accent:      #DC8EEB;
  --accent-hover:#C76ED5;
  --border:      #3F2250;
  --border-soft: #321B3E;
  --nav-bg:      rgba(35, 16, 40, 0.90);
  --nav-border:  rgba(220, 142, 235, 0.18);
  --pillar-bg:   linear-gradient(135deg, #7F368A 0%, #DC8EEB 100%);
  --pillar-text: #FFFFFF;
  --hero-bg:     radial-gradient(ellipse at top, #3B2148 0%, #231028 65%);
  --orb-bg:      radial-gradient(circle, rgba(220, 142, 235, 0.40), rgba(35, 16, 40, 0) 55%);
  --cta-text:    #231028;
}

/* ---------- Theme B1 · EDITORIAL · DAYLIGHT ----------
   White canvas, neutral-first. Headings are near-black. Body is darker
   charcoal than A1 for editorial feel. Purple appears ONLY on CTAs,
   eyebrows, and the pillar gradient — focal accent, not hero voice.
   Palette: White / #1A1A1A near-black / #7F368A Dark Purple / Lilac hints. */
.theme-b1 {
  --bg:          #FFFFFF;
  --bg-alt:      #FAF8FC;
  --bg-section:  #FFFFFF;
  --bg-elevated: #FFFFFF;
  --text:        #2A2A2A;
  --text-soft:   #7A7380;
  --heading:     #1A1A1A;
  --brand:       #7F368A;
  --brand-soft:  #A64FAD;
  --accent:      #7F368A;
  --accent-hover:#651F70;
  --border:      #ECE8F0;
  --border-soft: #F5F2F9;
  --nav-bg:      rgba(255, 255, 255, 0.94);
  --nav-border:  rgba(26, 26, 26, 0.08);
  --pillar-bg:   linear-gradient(135deg, #7F368A 0%, #DC8EEB 100%);
  --pillar-text: #FFFFFF;
  --hero-bg:     linear-gradient(180deg, #FFFFFF 0%, #FAF8FC 100%);
  --orb-bg:      radial-gradient(circle, rgba(168, 148, 212, 0.16), rgba(127, 54, 138, 0) 65%);
  --cta-text:    #FFFFFF;
}

/* ---------- Theme B2 · EDITORIAL · MIDNIGHT ----------
   Near-black canvas with subtle warmth. Near-white heading (NOT purple).
   Cream body. Light Purple shows up only on CTAs and pillar gradient.
   The reserved, text-first dark mode.
   Palette: #1A1A1F near-black / #F8F4FA near-white / #DC8EEB Light Purple. */
.theme-b2 {
  --bg:          #1A1A1F;
  --bg-alt:      #222228;
  --bg-section:  #1E1E24;
  --bg-elevated: #2B2B32;
  --text:        #E8E4EC;
  --text-soft:   #8E8A92;
  --heading:     #F8F4FA;
  --brand:       #DC8EEB;
  --brand-soft:  #C76ED5;
  --accent:      #DC8EEB;
  --accent-hover:#C76ED5;
  --border:      #33333B;
  --border-soft: #27272E;
  --nav-bg:      rgba(26, 26, 31, 0.90);
  --nav-border:  rgba(220, 142, 235, 0.14);
  --pillar-bg:   linear-gradient(135deg, #7F368A 0%, #DC8EEB 100%);
  --pillar-text: #FFFFFF;
  --hero-bg:     radial-gradient(ellipse at top, #2B2B32 0%, #1A1A1F 65%);
  --orb-bg:      radial-gradient(circle, rgba(220, 142, 235, 0.22), rgba(26, 26, 31, 0) 55%);
  --cta-text:    #1A1A1F;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
}

section { padding: 96px 0; }
@media (max-width: 768px) {
  section { padding: 64px 0; }
}

/* ============================================================
   TYPOGRAPHY
   Mapped directly from the brand guide:
     · Zalando (display)  → H1 + callouts, uppercase, Black weight
     · Inter (system)     → H2 Semibold Italic, body, subheadings, UI
   Substituting Archivo for Zalando until font files are available.
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--heading);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* DISPLAY H1 — hero, page titles.
   Zalando Black, UPPERCASE, tight line-height. This is the loudest type
   moment on the page. One per section. */
.hero-title,
.page-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: var(--heading);
}
.hero-title {
  font-size: clamp(2.75rem, 6.5vw, 5.25rem);
}
.page-title {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1;
}

/* EDITORIAL H2 — section-titles.
   Inter Semibold ITALIC, mixed case. Counterpoint to the loud display H1.
   Feels like a pull quote or an editorial subhead. Distinctive. */
.section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--heading);
}

h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }
h5 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
p { margin: 0; color: var(--text); }
.section-sub {
  font-size: 1.125rem;
  color: var(--text-soft);
  max-width: 62ch;
  line-height: 1.55;
  text-wrap: balance;
}

/* EYEBROW — small uppercase label (eg "CORE FOUNDATION"). Inter 600. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow.centered { display: block; text-align: center; }

/* CALLOUT — Zalando Bold uppercase in accent color.
   For inline service labels like "HYPERBARIC OXYGEN THERAPY (HBOT):". */
.callout {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--accent);
  line-height: 1.2;
}

.section-header {
  max-width: 760px;
  margin: 0 auto 64px auto;
  text-align: center;
}
.section-header .section-title { margin-bottom: 16px; }
.section-header .eyebrow { display: block; }
/* Inside a centered section-header, physically center the block so
   max-width + text-align actually line up. Also balance the wrap. */
.section-header .section-sub {
  margin: 0 auto;
  max-width: 60ch;
  text-wrap: balance;
}
.section-cta {
  text-align: center;
  margin-top: 56px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: all 0.22s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--cta-text);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: var(--brand);
  color: var(--cta-text);
}
.btn-secondary:hover {
  background: var(--brand-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--bg-alt);
  border-color: var(--brand);
}
.btn-pill {
  background: var(--accent);
  color: var(--cta-text);
  padding: 11px 22px;
  font-size: 0.875rem;
}
.btn-pill:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.btn-sm {
  padding: 10px 18px;
  font-size: 0.85rem;
}
.btn-wide { width: 100%; }

/* ============================================================
   THEME SWITCHER — bottom-right stoplight pill
   Tiny horizontal row of 5 colored dots. No labels on the face;
   hover tooltips via native title attribute handle naming.
   ============================================================ */
.theme-switcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background: rgba(18, 18, 22, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Kill all the old label/divider/wrapper styles — pill is flat */
.switcher-label,
.switcher-divider,
.swatch-label {
  display: none !important;
}
.switcher-wire {
  /* revert previous full-width treatment — it's just another dot now */
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  justify-content: initial !important;
}
.switcher-buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Add a subtle visual separator between the wireframe dot and the 4 colorways */
.switcher-wire + .switcher-divider {
  display: inline-block !important;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 3px;
  padding: 0;
  font-size: 0;
  letter-spacing: 0;
}

/* Dot buttons */
.theme-switcher button {
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: transform 0.18s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.theme-switcher button:hover {
  transform: scale(1.18);
}
.theme-switcher button.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* The swatch fills the button */
.swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.swatch-wire {
  background: repeating-linear-gradient(
    45deg,
    #D1D1D6 0 3px,
    #8E8E93 3px 6px
  );
}
/* Swatches mirror each theme's defining color pair.
   A = Regenerative (purple-forward — color is the hero voice)
   B = Editorial (neutral-first — purple is the focal accent)    */
.swatch-a1 { background: linear-gradient(135deg, #FFFFFF 0%, #7F368A 60%, #DC8EEB 100%); }
.swatch-a2 { background: linear-gradient(135deg, #231028 0%, #7F368A 55%, #DC8EEB 100%); }
.swatch-b1 { background: linear-gradient(135deg, #FFFFFF 0%, #F5F2F9 40%, #1A1A1A 70%, #7F368A 100%); }
.swatch-b2 { background: linear-gradient(135deg, #1A1A1F 0%, #2B2B32 60%, #DC8EEB 100%); }

/* Mobile — same bottom-right pill, slightly inset */
@media (max-width: 560px) {
  .theme-switcher {
    bottom: 16px;
    right: 16px;
    padding: 6px 9px;
    gap: 7px;
  }
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, padding 0.3s ease;
}
.site-nav.scrolled {
  border-bottom-color: var(--nav-border);
}
.nav-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: padding 0.3s ease;
}
.site-nav.scrolled .nav-inner {
  padding: 14px 32px;
}
@media (max-width: 640px) {
  .nav-inner { padding: 16px 20px; gap: 16px; }
  .site-nav.scrolled .nav-inner { padding: 12px 20px; }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--heading);
  letter-spacing: 0.14em;
  font-size: 0.95rem;
}
.logo-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}
.logo-mark::after {
  content: '';
  position: absolute;
  inset: 5px;
  background: var(--bg);
  border-radius: 50%;
}
.logo-wordmark { font-size: 0.95rem; }

.primary-nav {
  display: flex;
  gap: 32px;
  align-items: center;
  position: relative; /* positioning ancestor for mega-menu + dropdown */
}
.nav-item {
  display: flex;
  align-items: center;
  padding: 30px 0; /* vertical hover area — keeps menu open between trigger and panel */
  margin: -30px 0;
}
/* Dropdown stays anchored under its own trigger (narrow menu, per-item position).
   The mega-menu anchors to .primary-nav (wider parent) so it centers across
   the full nav and never overflows the viewport edge. */
.nav-item.has-dropdown {
  position: relative;
}
.nav-link {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  padding: 4px 0;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-link:hover,
.nav-item:hover .nav-link,
.nav-item:focus-within .nav-link {
  color: var(--accent);
}
.caret {
  font-size: 0.7rem;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
.nav-item:hover .caret,
.nav-item:focus-within .caret {
  transform: translateY(1px);
  opacity: 1;
}

/* ---------- Mega-menu (Services) ---------- */
.has-mega .mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(820px, calc(100vw - 80px));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 100;
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu,
.has-mega.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.mega-header .eyebrow {
  margin: 0 0 6px 0;
  display: block;
}
.mega-header h3 {
  font-size: 1.25rem;
  margin: 0;
  color: var(--heading);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mega-card {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  transition: background 0.18s ease;
  align-items: flex-start;
}
.mega-card:hover {
  background: var(--bg-alt);
}
.mega-thumb {
  width: 64px;
  height: 48px;
  flex-shrink: 0;
  background: var(--pillar-bg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.mega-thumb em {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--pillar-text);
  opacity: 0.75;
}
.mega-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mega-copy strong {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: -0.01em;
}
.mega-copy > span {
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.4;
}
.mega-footer-link {
  display: block;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: gap 0.2s ease;
}
.mega-footer-link:hover {
  color: var(--accent-hover);
}

/* ---------- Dropdown (Memberships) ---------- */
.has-dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 100;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  transition: background 0.18s ease;
}
.dropdown-item:hover {
  background: var(--bg-alt);
}
.dropdown-item strong {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading);
}
.dropdown-item span {
  font-size: 0.78rem;
  color: var(--text-soft);
}

/* ---------- Membership 3-Column Comparison Mega-Menu ---------- */
.membership-mega .mega-menu-inner { max-width: 840px; }
.membership-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .membership-compare-grid { grid-template-columns: 1fr; gap: 12px; }
}
.membership-col {
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  transition: border-color 0.2s ease, transform 0.2s var(--ease);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.membership-col:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.membership-col--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.membership-col-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--cta-text);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.membership-col-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.membership-col-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--heading);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.membership-col-price {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 16px;
}
.membership-col-features {
  list-style: none;
  padding: 0;
  margin: 0 0 auto 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.membership-col-features li {
  font-size: 0.78rem;
  color: var(--text-soft);
  padding-left: 14px;
  position: relative;
  line-height: 1.35;
}
.membership-col-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
}
.membership-col-cta {
  display: block;
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* ---------- Services List (inside mega-menu footer) ---------- */
.mega-services-list {
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.mega-services-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.mega-services-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.mega-services-links a {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  border: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.mega-services-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-elevated);
}

/* Wireframe overrides for new mega-menu elements */
.theme-wire .membership-col { border-style: dashed; }
.theme-wire .membership-col--featured { box-shadow: none; border-width: 2px; }
.theme-wire .membership-col-badge { background: #3A3A3C; }
.theme-wire .mega-services-list { border-top-style: dashed; }
.theme-wire .mega-services-links a { border: 1px dashed #C7C7CC; background: transparent; }

/* ---------- Mobile toggle (hamburger) ---------- */
.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  position: relative;
}
.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  margin: 0 auto;
  transition: transform 0.24s var(--ease), opacity 0.16s ease;
  border-radius: 2px;
}
.mobile-toggle span + span { margin-top: 5px; }
.mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile drawer ---------- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.open {
  visibility: visible;
  opacity: 1;
}
.mobile-drawer-inner {
  background: var(--bg);
  min-height: 100%;
  max-width: 420px;
  margin: 0 0 0 auto;
  padding: 24px 28px 40px 28px;
  transform: translateX(100%);
  transition: transform 0.32s var(--ease);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
}
.mobile-drawer.open .mobile-drawer-inner {
  transform: translateX(0);
}
.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.mobile-close {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.mobile-close:hover { background: var(--bg-alt); }
.mobile-nav { padding-top: 8px; }
.mobile-section {
  border-bottom: 1px solid var(--border-soft);
}
.mobile-section summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--heading);
}
.mobile-section summary::-webkit-details-marker { display: none; }
.mobile-caret {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--text-soft);
  transition: transform 0.24s var(--ease);
  display: inline-block;
}
.mobile-section[open] .mobile-caret { transform: rotate(45deg); }
.mobile-sublist {
  padding: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-sublist a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  transition: background 0.18s ease;
}
.mobile-sublist a:hover { background: var(--bg-alt); }
.mobile-sublist a strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
}
.mobile-sublist a span {
  font-size: 0.82rem;
  color: var(--text-soft);
}
.mobile-sub-all {
  color: var(--accent) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem !important;
}
.mobile-link {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--heading);
  transition: color 0.2s ease;
}
.mobile-link:hover { color: var(--accent); }
.mobile-cta {
  margin-top: 32px;
  width: 100%;
  justify-content: center;
}
.mobile-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}
.mobile-footer p {
  color: var(--text-soft);
  font-size: 0.88rem;
  margin: 4px 0;
}

/* ---------- Responsive breakpoints for nav ---------- */
@media (max-width: 880px) {
  .primary-nav { display: none; }
  .mobile-toggle { display: flex; flex-direction: column; justify-content: center; }
  .nav-cta { display: none; } /* Book Now moves into the drawer */
}

/* ============================================================
   HERO  ·  FULL-BLEED MASTHEAD with overlaid copy.
   The <section.hero> no longer holds its own padding — the
   hero-masthead is the hero. It stretches 100vw edge to edge,
   clamps to a tall aspect ratio, and the copy sits centered
   on top of it over a gradient scrim.
   ============================================================ */
.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
}

/* The masthead itself — full-bleed, tall, gradient-backed */
.hero-masthead {
  position: relative;
  width: 100%;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--hero-bg);
  isolation: isolate;
}
@media (max-width: 900px) {
  .hero-masthead { min-height: 620px; }
}
@media (max-width: 640px) {
  .hero-masthead { min-height: 560px; }
}

/* Subtle "texture" animation — two large, slowly-drifting conic
   gradients that feel like refracted light on glass. The whole
   thing lives behind the hero copy so it never steals focus. */
.hero-masthead-texture {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 55% 45% at 80% 70%, rgba(255,255,255,0.12), rgba(255,255,255,0) 55%),
    conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.05), rgba(255,255,255,0.14), rgba(255,255,255,0.02), rgba(255,255,255,0.09), rgba(255,255,255,0.05));
  filter: blur(40px);
  animation: masthead-drift 28s ease-in-out infinite alternate;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}
@keyframes masthead-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(2%, -1.2%, 0) rotate(4deg) scale(1.04); }
  100% { transform: translate3d(-1.8%, 1.4%, 0) rotate(-3deg) scale(1.02); }
}

/* Secondary grain layer — an offset conic for just enough motion
   that the composition never feels flat. */
.hero-masthead-grain {
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(from 180deg at 60% 40%, rgba(255,255,255,0.06), rgba(255,255,255,0) 30%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0) 100%);
  filter: blur(60px);
  animation: masthead-grain 38s linear infinite;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
@keyframes masthead-grain {
  from { transform: rotate(0deg) scale(1.05); }
  to   { transform: rotate(360deg) scale(1.05); }
}

/* Accessibility — honor users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-masthead-texture,
  .hero-masthead-grain { animation: none; }
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-orb {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 900px;
  height: 900px;
  background: var(--orb-bg);
  filter: blur(40px);
}

/* Hero copy — sits on top of the masthead, centered */
.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 940px;
  padding: 160px 32px 140px 32px;
}
@media (max-width: 640px) {
  .hero-inner { padding: 140px 24px 120px 24px; }
}
.hero-title {
  color: var(--heading);
  margin: 0 0 18px 0;
}
.hero-attribution {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--text-soft);
  font-style: italic;
  margin: 0 0 28px 0;
  letter-spacing: 0.02em;
}
.hero-sub {
  font-size: clamp(1.1rem, 1.6vw, 1.375rem);
  color: var(--text-soft);
  max-width: 44ch;
  margin: 0 auto 40px auto;
  line-height: 1.55;
}
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Pending-sign-off flag in the corner of the masthead — replaces
   the old center-stack play button. Compact, unobtrusive. */
.hero-masthead-flag {
  position: absolute;
  left: 32px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: calc(100% - 64px);
}
@media (max-width: 640px) {
  .hero-masthead-flag {
    left: 20px;
    right: 20px;
    bottom: 20px;
    max-width: calc(100% - 40px);
  }
}
.hero-masthead-flag .hero-masthead-play {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #fff;
  padding-left: 2px;
  flex-shrink: 0;
}
.hero-masthead-flag .hero-masthead-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-masthead-flag .hero-masthead-sub {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  padding-left: 12px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero-masthead-flag .hero-masthead-sub { display: none; }
}

/* As Seen In pending-legal flag */
.seen-in-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-soft);
  margin: 24px 0 0 0;
  letter-spacing: 0.02em;
}
.seen-in-note em { opacity: 0.85; }

/* Wireframe-mode overrides for the masthead — grayscale, dashed,
   and very subtle drifting striped placeholder that reads as
   "media slot" in grayscale. */
.theme-wire .hero-masthead {
  background: #EDEDF0;
  border-top: 1.5px dashed #AEAEB2;
  border-bottom: 1.5px dashed #AEAEB2;
}
.theme-wire .hero-masthead-texture {
  background:
    repeating-linear-gradient(135deg, rgba(142,142,147,0.10) 0 1px, transparent 1px 28px),
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(142,142,147,0.18), rgba(142,142,147,0) 60%),
    radial-gradient(ellipse 55% 45% at 80% 70%, rgba(142,142,147,0.14), rgba(142,142,147,0) 55%);
  mix-blend-mode: normal;
  opacity: 0.9;
  filter: none;
}
.theme-wire .hero-masthead-grain { opacity: 0; }
.theme-wire .hero-masthead-flag {
  background: rgba(255, 255, 255, 0.92);
  border-color: #8E8E93;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.theme-wire .hero-masthead-flag .hero-masthead-play {
  background: transparent;
  border-color: #8E8E93;
  color: #636366;
}
.theme-wire .hero-masthead-flag .hero-masthead-label {
  color: #3A3A3C;
  font-family: 'Courier New', monospace;
}
.theme-wire .hero-masthead-flag .hero-masthead-sub {
  color: #636366;
  font-family: 'Courier New', monospace;
  border-color: #C7C7CC;
}
.theme-wire .seen-in-note { color: #8E8E93; }

/* ============================================================
   ECOSYSTEM · PILLAR GRID
   ============================================================ */
.ecosystem {
  background: var(--bg-section);
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}
@media (max-width: 960px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pillar-grid { grid-template-columns: 1fr; }
}
.pillar-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s ease;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.pillar-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.pillar-image {
  aspect-ratio: 4 / 3;
  background: var(--pillar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.pillar-image::before {
  content: '';
  position: absolute;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 50%);
  top: -40%;
  left: -40%;
}
.pillar-image span {
  position: relative;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--pillar-text);
  opacity: 0.75;
}
.pillar-card h3 {
  padding: 22px 24px 4px 24px;
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 1.35rem;
  line-height: 1.1;
}
.pillar-card p {
  padding: 0 24px 14px 24px;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.card-link {
  padding: 0 24px 22px 24px;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: gap 0.2s ease;
}
.pillar-card:hover .card-link { opacity: 0.9; }

/* ============================================================
   CLUB
   ============================================================ */
.club {
  background: var(--bg-alt);
}
.club-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 900px) {
  .club-inner { grid-template-columns: 1fr; gap: 48px; }
}
.club-copy .section-title { margin-bottom: 20px; }
.club-cta {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.club-pricing {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  box-shadow: var(--shadow-sm);
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  gap: 20px;
}
.price-row:last-child { border-bottom: none; }
.price-row .service {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--heading);
  font-size: 0.98rem;
}
.price-row .price strong {
  font-size: 1.1rem;
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 700;
}
.price-row .price em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-left: 8px;
}

/* ============================================================
   EBOO
   ============================================================ */
.eboo {
  background: var(--bg-section);
  position: relative;
  overflow: hidden;
}
.eboo-inner {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .eboo-inner { grid-template-columns: 1fr; gap: 48px; }
}
.eboo-visual {
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eboo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0.5;
  animation: ebooPulse 4s ease-in-out infinite;
}
.eboo-ring::before {
  content: '';
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.6;
}
.eboo-ring::after {
  content: '';
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  background: var(--pillar-bg);
}
.eboo-label {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--pillar-text);
  z-index: 1;
}
@keyframes ebooPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.02); opacity: 0.75; }
}
.eboo-copy .section-title { margin-bottom: 20px; }
.eboo-keystone {
  font-size: 1.1rem;
  color: var(--heading);
  margin: 24px 0 32px 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   FEATURED SERVICES (horizontal rail)
   ============================================================ */
.featured {
  background: var(--bg-alt);
  padding-bottom: 72px;
}
.featured-rail {
  display: flex;
  gap: 20px;
  padding: 0 max(32px, calc((100vw - var(--container-w)) / 2 + 32px)) 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 32px;
  margin-top: 16px;
}
.featured-rail::-webkit-scrollbar {
  height: 8px;
}
.featured-rail::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.service-card {
  flex: 0 0 300px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  scroll-snap-align: start;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  min-height: 180px;
}
.service-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.service-card h4 {
  color: var(--heading);
  margin-bottom: 10px;
  font-size: 1.15rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.1;
}
.service-card p {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.55;
  flex: 1;
}
.service-card-link {
  display: block;
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* ============================================================
   AS SEEN IN  ·  Seamless marquee loop
   The track holds 2x the logos and translates by -50% so the
   second copy lines up perfectly with the first — no visible
   reset, no gap. Pause on hover. Honors reduced motion.
   ============================================================ */
.seen-in {
  background: var(--bg-section);
  padding: 72px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.logo-marquee {
  position: relative;
  margin: 32px 0 0 0;
  overflow: hidden;
  width: 100%;
  /* Fade the edges so logos ease in/out of the viewport */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  padding: 8px 36px;
  animation: logo-marquee 40s linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
@keyframes logo-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}
.logo-ph {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-soft);
  font-size: 0.95rem;
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.logo-ph:hover { opacity: 1; }

/* ============================================================
   PARTNERSHIPS
   ============================================================ */
.partners {
  background: var(--bg-section);
}
.partners-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 56px;
}
@media (max-width: 900px) {
  .partners-inner { grid-template-columns: 1fr; gap: 40px; }
}
.partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 560px) {
  .partners-grid { grid-template-columns: 1fr; }
}
.partner-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  transition: border-color 0.2s ease, transform 0.22s var(--ease);
}
.partner-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.partner-card h4 {
  color: var(--heading);
  margin-bottom: 10px;
}
.partner-card p {
  color: var(--text-soft);
  font-size: 0.95rem;
}
.video-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--pillar-bg);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1), transparent 60%);
}
.play-icon {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--pillar-text);
  padding-left: 6px;
}
.video-label {
  position: relative;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--pillar-text);
  opacity: 0.8;
  text-transform: uppercase;
}

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
.social-proof {
  background: var(--bg-alt);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
@media (max-width: 860px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
.review-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
}
.stars {
  color: #FFB400;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.review-card p {
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 16px;
  line-height: 1.55;
}
.review-name {
  color: var(--text-soft);
  font-size: 0.85rem;
  font-style: italic;
}
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 860px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}
.ig-tile {
  aspect-ratio: 1 / 1;
  background: var(--pillar-bg);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.ig-tile span {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--pillar-text);
  opacity: 0.7;
}

/* ============================================================
   LEAD-GEN FORM (persistent, above footer)
   ============================================================ */
.lead-gen {
  background: var(--brand);
  padding: 88px 0;
  color: #FFF;
}
.theme-b2 .lead-gen { background: var(--bg-elevated); }
.lead-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .lead-inner { grid-template-columns: 1fr; gap: 40px; }
}
.lead-copy .eyebrow {
  color: var(--accent);
}
.lead-copy .section-title {
  color: #FFF;
  margin-bottom: 16px;
}
.theme-a1 .lead-copy .section-title { color: #FFF; }
.theme-a2 .lead-copy .section-title { color: #FFF; }
.theme-b1 .lead-copy .section-title { color: #FFF; }
.theme-b2 .lead-copy .section-title { color: var(--heading); }
.theme-b2 .lead-copy .section-sub { color: var(--text-soft); }
.lead-copy .section-sub {
  color: rgba(255, 255, 255, 0.75);
}
.lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
@media (max-width: 560px) {
  .lead-form { grid-template-columns: 1fr; }
}
.lead-form .btn-wide { grid-column: 1 / -1; }
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.theme-b2 .field label { color: var(--text-soft); }
.field input,
.field select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFF;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.theme-b2 .field input,
.theme-b2 .field select {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.field input::placeholder { color: rgba(255, 255, 255, 0.45); }
.theme-b2 .field input::placeholder { color: var(--text-soft); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
}
.theme-b2 .field input:focus,
.theme-b2 .field select:focus { background: var(--bg-alt); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-section);
  border-top: 1px solid var(--border);
  padding: 80px 0 40px 0;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 48px;
}
@media (max-width: 700px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 24px; }
}
.logo-footer { font-size: 0.95rem; }
.newsletter {
  max-width: 340px;
  flex-shrink: 0;
}
.newsletter label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.newsletter-row {
  display: flex;
  gap: 10px;
}
.newsletter-row input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.newsletter-row input::placeholder { color: var(--text-soft); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
.footer-col h5 {
  color: var(--heading);
  margin-bottom: 16px;
}
.footer-col li {
  margin-bottom: 10px;
}
.footer-col a {
  color: var(--text-soft);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--accent); }

.footer-contact {
  text-align: center;
  padding: 24px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 32px;
}
.footer-contact p {
  color: var(--text-soft);
  margin: 4px 0;
  font-size: 0.92rem;
}
.footer-contact strong { color: var(--text); }
.footer-contact em { font-style: italic; opacity: 0.7; }

.footer-disclaimer {
  max-width: 820px;
  margin: 0 auto 32px auto;
  text-align: center;
}
.footer-disclaimer p {
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}
.footer-disclaimer strong {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer-legal {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}
.footer-legal p {
  color: var(--text-soft);
  font-size: 0.8rem;
}

/* ============================================================
   PAGE-WIDE CONSIDERATIONS
   ============================================================ */
html { scroll-behavior: smooth; }

::selection {
  background: var(--accent);
  color: #FFF;
}

/* Theme switcher now lives bottom-right, so the nav no longer needs
   to reserve right-side space for it. */

/* ============================================================
   WIREFRAME MODE OVERRIDES
   These rules fire only when .theme-wire is active on <html>.
   They strip color, add dashed borders, replace imagery with
   placeholder boxes, and generally make the page read as a
   structural preview rather than a finished design.
   ============================================================ */

/* Logo mark: dashed ring, no magenta */
.theme-wire .logo-mark {
  background: transparent;
  border: 2px dashed #636366;
  box-shadow: none;
}
.theme-wire .logo-mark::after { display: none; }

/* Hero: remove the glow orb, keep layout */
.theme-wire .hero-orb { display: none; }
.theme-wire .hero {
  border-bottom: 1px dashed #D1D1D6;
}

/* Buttons: grayscale, outlined where possible */
.theme-wire .btn-primary {
  background: #1C1C1E;
  color: #FFFFFF;
  border-color: #1C1C1E;
}
.theme-wire .btn-primary:hover {
  background: #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.theme-wire .btn-secondary {
  background: #48484A;
  color: #FFFFFF;
  border-color: #48484A;
}
.theme-wire .btn-secondary:hover { background: #2C2C2E; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.theme-wire .btn-pill {
  background: #1C1C1E;
  color: #FFFFFF;
}
.theme-wire .btn-pill:hover { background: #000000; }
.theme-wire .btn-ghost {
  color: #48484A;
  border: 1.5px dashed #C7C7CC;
  background: transparent;
}
.theme-wire .btn-ghost:hover {
  border-color: #636366;
  border-style: dashed;
  background: #F6F6F8;
}

/* Eyebrow: neutral gray instead of accent */
.theme-wire .eyebrow {
  color: #8E8E93;
}

/* Pillar cards: dashed borders, placeholder image block */
.theme-wire .pillar-card {
  border: 1.5px dashed #C7C7CC;
  box-shadow: none;
}
.theme-wire .pillar-card:hover {
  transform: none;
  box-shadow: none;
  border-color: #636366;
}
.theme-wire .pillar-image {
  background: #E5E5EA;
  border-bottom: 1.5px dashed #C7C7CC;
}
.theme-wire .pillar-image::before { display: none; }
.theme-wire .pillar-image::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed #8E8E93;
  opacity: 0.6;
  background-image:
    linear-gradient(45deg, transparent 49%, #8E8E93 49%, #8E8E93 51%, transparent 51%);
  background-size: 100% 100%;
  opacity: 0.18;
}
.theme-wire .pillar-image span {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: #636366;
  opacity: 1;
}
.theme-wire .pillar-image span::before {
  content: 'IMAGE · ';
  opacity: 0.55;
}
.theme-wire .card-link {
  color: #48484A;
}

/* Club pricing table: dashed border */
.theme-wire .club-pricing {
  border: 1.5px dashed #C7C7CC;
  box-shadow: none;
}
.theme-wire .price-row {
  border-bottom: 1px dashed #E5E5EA;
}
.theme-wire .price-row .price strong {
  color: #1C1C1E;
}

/* EBOO ring: static, dashed, grayscale */
.theme-wire .eboo-ring {
  animation: none;
  border: 1.5px dashed #8E8E93;
  opacity: 1;
}
.theme-wire .eboo-ring::before {
  border: 1px dashed #AEAEB2;
  opacity: 1;
}
.theme-wire .eboo-ring::after {
  background: #E5E5EA;
  border: 1.5px dashed #8E8E93;
}
.theme-wire .eboo-label {
  color: #636366;
}
.theme-wire .eboo-keystone {
  border-top: 1.5px dashed #C7C7CC;
  border-bottom: 1.5px dashed #C7C7CC;
}

/* Featured service cards: dashed */
.theme-wire .service-card {
  border: 1.5px dashed #C7C7CC;
  box-shadow: none;
}
.theme-wire .service-card:hover {
  transform: none;
  box-shadow: none;
  border-color: #636366;
}

/* As Seen In: boxed placeholder logos */
.theme-wire .logo-ph {
  color: #8E8E93;
  padding: 10px 18px;
  border: 1.5px dashed #C7C7CC;
  border-radius: 4px;
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
  opacity: 1;
}
.theme-wire .logo-ph:hover { opacity: 1; border-color: #8E8E93; }

/* Partnership cards + video placeholder */
.theme-wire .partner-card {
  border: 1.5px dashed #C7C7CC;
  box-shadow: none;
}
.theme-wire .partner-card:hover {
  transform: none;
  border-color: #636366;
}
.theme-wire .video-placeholder {
  background: #E5E5EA;
  border: 1.5px dashed #AEAEB2;
}
.theme-wire .video-placeholder::before { display: none; }
.theme-wire .play-icon {
  background: transparent;
  border: 1.5px dashed #8E8E93;
  color: #636366;
}
.theme-wire .video-label {
  color: #636366;
  opacity: 1;
  font-family: 'Courier New', monospace;
}

/* Reviews + IG grid: dashed */
.theme-wire .review-card {
  border: 1.5px dashed #C7C7CC;
  box-shadow: none;
}
.theme-wire .stars { color: #AEAEB2; }
.theme-wire .ig-tile {
  background: #E5E5EA;
  border: 1.5px dashed #C7C7CC;
  border-radius: 2px;
}
.theme-wire .ig-tile::before {
  content: 'IMG';
  font-family: 'Courier New', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: #8E8E93;
  position: absolute;
}
.theme-wire .ig-tile span {
  display: none;
}

/* Lead-gen form: neutral gray block, not brand color */
.theme-wire .lead-gen {
  background: #ECECEF;
  border-top: 1.5px dashed #C7C7CC;
  border-bottom: 1.5px dashed #C7C7CC;
}
.theme-wire .lead-copy .eyebrow {
  color: #8E8E93;
}
.theme-wire .lead-copy .section-title {
  color: #1C1C1E;
}
.theme-wire .lead-copy .section-sub {
  color: #636366;
}
.theme-wire .field label {
  color: #636366;
}
.theme-wire .field input,
.theme-wire .field select {
  background: #FFFFFF;
  border: 1.5px dashed #C7C7CC;
  color: #2A2A2E;
}
.theme-wire .field input::placeholder {
  color: #AEAEB2;
}
.theme-wire .field input:focus,
.theme-wire .field select:focus {
  border-style: solid;
  border-color: #636366;
  background: #F6F6F8;
}

/* Footer */
.theme-wire .site-footer {
  border-top: 1.5px dashed #C7C7CC;
}
.theme-wire .footer-top,
.theme-wire .footer-contact,
.theme-wire .footer-legal {
  border-color: #E5E5EA;
  border-style: dashed;
}
.theme-wire .newsletter-row input {
  border: 1.5px dashed #C7C7CC;
}

/* ============================================================
   SERVICE INDEX PAGE (services-all.html)
   ============================================================ */
.page-hero {
  padding: 128px 0 72px 0;
  background: var(--hero-bg);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: var(--orb-bg);
  filter: blur(40px);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.breadcrumb a {
  color: var(--text-soft);
  transition: color 0.2s ease;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-current="page"] {
  color: var(--heading);
  font-weight: 600;
}
.breadcrumb span[aria-hidden="true"] {
  color: var(--text-soft);
  opacity: 0.5;
}
.page-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--heading);
  margin: 10px 0 20px 0;
  max-width: 16ch;
}
.page-sub {
  font-size: 1.125rem;
  color: var(--text-soft);
  max-width: 58ch;
  line-height: 1.55;
}

/* Service index body */
.service-index {
  padding: 96px 0 96px 0;
  background: var(--bg-section);
}
.index-category {
  padding: 48px 0;
  border-bottom: 1px solid var(--border-soft);
}
.index-category:first-child { padding-top: 0; }
.index-category:last-of-type { border-bottom: none; padding-bottom: 48px; }
.index-category-header {
  display: block;
  max-width: 780px;
  margin-bottom: 32px;
}
.index-category-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--heading);
  margin: 0 0 12px 0;
}
.index-category-header p {
  color: var(--text-soft);
  font-size: 1rem;
  max-width: 58ch;
  margin: 0;
  line-height: 1.55;
}
.index-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.index-item {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2fr;
  gap: 24px 40px;
  padding: 22px 0;
  border-top: 1px solid var(--border-soft);
  align-items: baseline;
}
.index-item:first-child { border-top: none; padding-top: 0; }
@media (max-width: 720px) {
  .index-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.item-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.item-head strong {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: -0.01em;
}
.pillars {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.item-desc {
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.55;
}

.index-footer-cta {
  margin-top: 56px;
  padding: 56px 48px;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  text-align: center;
}
.index-footer-cta > p:first-child {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px 0;
}
.index-footer-cta h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--heading);
  margin: 0 0 16px 0;
}
.index-footer-cta .section-sub {
  margin: 0 auto 32px auto;
  text-align: center;
}
.index-footer-cta .hero-cta {
  justify-content: center;
}

/* Wireframe mode: service index overrides */
.theme-wire .page-hero::before { display: none; }
.theme-wire .page-hero {
  border-bottom-style: dashed;
}
.theme-wire .index-category {
  border-bottom-style: dashed;
}
.theme-wire .index-item {
  border-top-style: dashed;
}
.theme-wire .index-footer-cta {
  border: 1.5px dashed var(--border);
  background: var(--bg-alt);
}
.theme-wire .pillars {
  color: #8E8E93;
}

/* ============================================================
   TEAM PAGE
   ============================================================ */
.founder-section {
  padding: 96px 0;
  background: var(--bg-section);
}
.founder-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .founder-card { grid-template-columns: 1fr; gap: 32px; }
}
.founder-photo {
  aspect-ratio: 4 / 5;
  background: var(--pillar-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.founder-photo span {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--pillar-text);
  opacity: 0.75;
}
.founder-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  color: var(--heading);
  margin: 10px 0 24px 0;
}
.founder-bio {
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 20px 0;
  max-width: 60ch;
}
.founder-role {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  margin: 0;
}

.team-grid-section {
  padding: 96px 0;
  background: var(--bg-alt);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s var(--ease), border-color 0.22s ease;
}
.team-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.team-photo {
  aspect-ratio: 1 / 1;
  background: var(--pillar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-photo span {
  font-family: 'Courier New', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--pillar-text);
  opacity: 0.8;
}
.team-card strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--heading);
  padding: 16px 18px 4px 18px;
  display: block;
}
.team-card > span {
  font-size: 0.8rem;
  color: var(--text-soft);
  padding: 0 18px 18px 18px;
  display: block;
  line-height: 1.4;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.clinics-section {
  padding: 96px 0;
  background: var(--bg-section);
}
.clinic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
}
@media (max-width: 860px) { .clinic-grid { grid-template-columns: 1fr; } }
.clinic-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 44px 40px 40px 40px;
  position: relative;
}
.clinic-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.clinic-card h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-style: normal;
  color: var(--heading);
  margin: 0 0 16px 0;
  line-height: 1.05;
}
.clinic-address {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 24px 0;
}
.clinic-meta {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 16px;
  margin: 0 0 28px 0;
}
.clinic-meta dt {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding-top: 3px;
}
.clinic-meta dd {
  font-size: 0.95rem;
  color: var(--text);
  margin: 0;
}
.clinic-meta dd em { color: var(--text-soft); font-style: italic; }
.clinic-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.map-placeholder {
  aspect-ratio: 21 / 9;
  background: var(--pillar-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}
.map-label {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--pillar-text);
  opacity: 0.85;
}

.contact-form-section {
  padding: 96px 0;
  background: var(--bg-alt);
}
.contact-form {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px;
}
@media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; padding: 28px; } }
.contact-form .field-full { grid-column: 1 / -1; }
.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form .field label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.contact-form .field .optional { text-transform: none; letter-spacing: 0; opacity: 0.7; font-size: 0.72rem; }
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
}
.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form .btn-wide {
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* ============================================================
   MEMBERSHIPS COMPARISON PAGE
   ============================================================ */
.membership-compare-section {
  padding: 96px 0;
  background: var(--bg-section);
}
.membership-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 80px;
}
@media (max-width: 1000px) { .membership-compare { grid-template-columns: 1fr; gap: 20px; } }
.membership-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.22s var(--ease), border-color 0.22s ease;
}
.membership-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.membership-card--featured {
  border-color: var(--accent);
  border-width: 2px;
}
.membership-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--cta-text);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
}
.membership-header .eyebrow { display: block; }
.membership-header h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-style: normal;
  color: var(--heading);
  margin: 6px 0 10px 0;
  line-height: 1.1;
}
.membership-positioning {
  font-size: 0.95rem;
  color: var(--text-soft);
  margin: 0 0 24px 0;
  line-height: 1.5;
}
.membership-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 24px;
}
.membership-price strong {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
}
.membership-price span {
  color: var(--text-soft);
  font-size: 0.95rem;
}
.membership-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  flex: 1;
}
.membership-includes li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.9rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.membership-includes li:last-child { border-bottom: none; }
.membership-includes li em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}
.membership-includes li em span {
  color: var(--text-soft);
  font-weight: 400;
  font-size: 0.78rem;
}
.membership-terms {
  font-size: 0.8rem;
  color: var(--text-soft);
  margin: 0 0 20px 0;
  font-style: italic;
}
.membership-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.membership-cta .btn { width: 100%; }

.membership-compare-footer {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 32px;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
}
.membership-compare-footer h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--heading);
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}
.membership-compare-footer p {
  color: var(--text-soft);
  margin: 0 0 16px 0;
  line-height: 1.55;
}
.membership-compare-footer strong { color: var(--heading); }
.membership-footer-note { font-size: 0.9rem; margin-bottom: 24px !important; }

/* ============================================================
   CLUB LANDING PAGE
   ============================================================ */
.club-landing-intro {
  padding: 88px 0;
  background: var(--bg-section);
}
.club-intro-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.club-intro-lead {
  font-size: 1.375rem;
  color: var(--heading);
  line-height: 1.45;
  margin: 0 0 20px 0;
  font-weight: 500;
}
.club-intro-inner p { color: var(--text); line-height: 1.6; }
.club-intro-cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.club-intro-cta .btn { min-width: 260px; }
.club-intro-note {
  font-size: 0.85rem !important;
  color: var(--text-soft) !important;
  font-style: italic;
}

.club-pricing-table-section {
  padding: 96px 0;
  background: var(--bg-alt);
}
.club-pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 860px;
  margin: 0 auto;
}
.club-pricing-table th,
.club-pricing-table td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.98rem;
}
.club-pricing-table th {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--bg-alt);
}
.club-pricing-table tbody tr:last-child td { border-bottom: none; }
.club-pricing-table td:nth-child(2) { color: var(--text-soft); text-decoration: line-through; }
.club-pricing-table td:nth-child(3) strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--accent);
}
.club-pricing-table td em { color: var(--text-soft); font-style: italic; font-size: 0.85rem; }

.member-experience {
  padding: 96px 0;
  background: var(--bg-section);
}
.member-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 780px) { .member-steps { grid-template-columns: 1fr; } }
.member-steps li {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  position: relative;
}
.step-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 10px;
}
.member-steps h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--heading);
  margin: 0 0 10px 0;
  letter-spacing: -0.015em;
}
.member-steps p {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

.birthday-block {
  padding: 72px 0;
  background: var(--bg-alt);
}
.birthday-card {
  background: var(--brand);
  color: #FFF;
  padding: 56px 48px;
  border-radius: var(--radius-lg);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.birthday-card .eyebrow { color: var(--accent); display: block; margin-bottom: 12px; }
.birthday-card h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: #FFF;
  margin: 0 0 16px 0;
  letter-spacing: -0.025em;
}
.birthday-card p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto;
  max-width: 48ch;
  line-height: 1.55;
}

.why-twelve-months {
  padding: 96px 0;
  background: var(--bg-section);
}
.two-col {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }
.two-col .eyebrow { display: block; margin-bottom: 8px; }
.two-col .section-title { margin-bottom: 0; }
.two-col p { color: var(--text-soft); line-height: 1.65; margin: 0 0 20px 0; font-size: 1.05rem; }

.club-faq {
  padding: 96px 0;
  background: var(--bg-alt);
}
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 26px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--heading);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-soft);
  transition: transform 0.24s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  padding: 0 26px 22px 26px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   UNLIMITED + HYPER PAGES
   ============================================================ */
.unlimited-includes {
  padding: 96px 0;
  background: var(--bg-section);
}
.unlimited-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 780px) { .unlimited-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .unlimited-grid { grid-template-columns: 1fr; } }
.unlimited-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.22s ease;
}
.unlimited-item:hover { border-color: var(--accent); }
.unlimited-item strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--heading);
}
.unlimited-item span {
  font-size: 0.82rem;
  color: var(--text-soft);
}

.unlimited-value,
.hyper-why {
  padding: 96px 0;
  background: var(--bg-alt);
}

.hyper-tiers {
  padding: 96px 0;
  background: var(--bg-section);
}
.hyper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1000px) { .hyper-grid { grid-template-columns: 1fr; } }
.hyper-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.hyper-card--featured {
  border-color: var(--accent);
  border-width: 2px;
}
.hyper-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--cta-text);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
}
.hyper-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.hyper-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--heading);
  margin: 0 0 14px 0;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.hyper-card p {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 24px 0;
}
.hyper-price {
  padding: 20px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hyper-price strong {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
}
.hyper-price span { color: var(--text-soft); font-size: 0.95rem; }
.hyper-plan {
  font-size: 0.82rem !important;
  color: var(--text-soft) !important;
  line-height: 1.5 !important;
  flex: 1;
}
.hyper-plan strong { color: var(--heading); }
.hyper-card .btn { margin-top: auto; }

/* ============================================================
   PILLAR PAGES
   ============================================================ */
.pillar-body {
  padding: 96px 0;
  background: var(--bg-section);
}
.pillar-layout {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 72px;
}
@media (max-width: 980px) { .pillar-layout { grid-template-columns: 1fr; gap: 40px; } }
.pillar-block {
  padding: 36px 0;
  border-top: 1px solid var(--border-soft);
}
.pillar-block:first-child { border-top: none; padding-top: 0; }
.block-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.pillar-address-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.pillar-address-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
}
.pillar-address-list strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--heading);
}
.pillar-address-list span {
  font-size: 0.92rem;
  color: var(--text-soft);
}
.pillar-strategy {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  max-width: 60ch;
}
.pillar-tools {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--heading);
  margin: 0;
  line-height: 2;
}
.pillar-tools .tool {
  display: inline-block;
  padding: 4px 12px;
  margin: 2px 4px 2px 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 500;
}
.pillar-disclaimer {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

.pillar-upsell {
  background: var(--brand);
  color: #FFF;
  padding: 40px 36px;
  border-radius: var(--radius-lg);
  position: sticky;
  top: 112px;
}
.pillar-upsell .eyebrow { color: var(--accent); display: block; margin-bottom: 8px; }
.pillar-upsell h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #FFF;
  margin: 0 0 16px 0;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.pillar-upsell p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 24px 0;
}
.pillar-upsell .btn { margin-bottom: 10px; width: 100%; }
.pillar-upsell .btn-ghost {
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.35);
}
.pillar-upsell .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #FFF;
}

.pillar-cta-block {
  text-align: center;
  padding: 72px 32px;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
}
.pillar-cta-block h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--heading);
  margin: 0 0 32px 0;
}
.pillar-cta-block .hero-cta { justify-content: center; }

.related-pillars-section {
  padding: 96px 0;
  background: var(--bg-alt);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.22s var(--ease), border-color 0.22s ease;
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.related-num {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.related-card strong {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: -0.015em;
}
.related-desc {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.5;
  flex: 1;
}
.related-go {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-top: 8px;
}

/* ============================================================
   WIREFRAME MODE OVERRIDES FOR NEW PAGES
   ============================================================ */
.theme-wire .founder-photo,
.theme-wire .team-photo,
.theme-wire .map-placeholder {
  background: #E5E5EA;
  border: 1.5px dashed #AEAEB2;
}
.theme-wire .founder-photo span,
.theme-wire .team-photo span,
.theme-wire .map-label {
  color: #636366;
  font-family: 'Courier New', monospace;
}
.theme-wire .team-card,
.theme-wire .clinic-card,
.theme-wire .membership-card,
.theme-wire .hyper-card,
.theme-wire .unlimited-item,
.theme-wire .member-steps li,
.theme-wire .faq-item,
.theme-wire .related-card,
.theme-wire .contact-form {
  border: 1.5px dashed #C7C7CC;
  box-shadow: none;
}
.theme-wire .team-card:hover,
.theme-wire .clinic-card:hover,
.theme-wire .membership-card:hover,
.theme-wire .related-card:hover,
.theme-wire .unlimited-item:hover {
  transform: none;
  border-color: #636366;
}
.theme-wire .pillar-block,
.theme-wire .membership-includes li,
.theme-wire .pillar-address-list li {
  border-color: #E5E5EA;
}
.theme-wire .pillar-address-list li { border-left: 2px dashed #8E8E93; }
.theme-wire .birthday-card,
.theme-wire .pillar-upsell {
  background: #1C1C1E;
}
.theme-wire .pillar-tools .tool {
  background: #FFFFFF;
  border: 1.5px dashed #C7C7CC;
  color: #1C1C1E;
}
.theme-wire .club-pricing-table {
  border: 1.5px dashed #C7C7CC;
}
.theme-wire .club-pricing-table td:nth-child(3) strong { color: #1C1C1E; }
.theme-wire .membership-includes li em { color: #1C1C1E; }
.theme-wire .step-num,
.theme-wire .hyper-label,
.theme-wire .related-num,
.theme-wire .clinic-badge,
.theme-wire .block-label {
  color: #48484A;
}
.theme-wire .membership-badge,
.theme-wire .hyper-badge {
  background: #1C1C1E;
  color: #FFFFFF;
}
.theme-wire .membership-card--featured,
.theme-wire .hyper-card--featured {
  border: 2px dashed #636366;
}

/* Wireframe mode: mega-menu + dropdown overrides */
.theme-wire .mega-menu,
.theme-wire .dropdown-menu {
  border: 1.5px dashed #C7C7CC;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
.theme-wire .mega-thumb {
  background: #E5E5EA;
  border: 1px dashed #AEAEB2;
}
.theme-wire .mega-thumb em {
  font-family: 'Courier New', monospace;
  font-size: 0.5rem;
  color: #636366;
  opacity: 1;
}
.theme-wire .mega-thumb em::before {
  content: 'IMG · ';
  opacity: 0.55;
}
.theme-wire .mega-footer-link {
  color: #48484A;
}
.theme-wire .mega-card:hover {
  background: #F6F6F8;
  border: 1px dashed #C7C7CC;
  padding: 11px;
}
.theme-wire .dropdown-item:hover {
  background: #F6F6F8;
}

/* Wireframe mode: mobile drawer */
.theme-wire .mobile-drawer-inner {
  border-left: 1.5px dashed #C7C7CC;
}
.theme-wire .mobile-section summary,
.theme-wire .mobile-link,
.theme-wire .mobile-sublist a strong {
  color: #1C1C1E;
}
.theme-wire .mobile-section,
.theme-wire .mobile-link,
.theme-wire .mobile-footer {
  border-color: #E5E5EA;
}

/* ============================================================
   PROMO NANO BAR — scrolling carousel of offers
   Sticks to the top of the viewport. Slides crossfade.
   Prev/next arrows live on each end. Auto-rotates every 6.5s.
   ============================================================ */
.promo-bar {
  position: sticky;
  top: 0;
  z-index: 950;
  background: var(--heading);
  color: var(--bg);
  display: flex;
  align-items: stretch;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  min-height: 36px;
}
.promo-track {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 9px 8px;
}
.promo-slide {
  position: absolute;
  inset: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease);
  pointer-events: none;
  text-align: center;
}
.promo-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.promo-slide p { margin: 0; color: inherit; }
.promo-slide strong { font-weight: 700; }
.promo-slide a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  margin-left: 6px;
  white-space: nowrap;
}
.promo-slide a:hover { opacity: 0.8; }

.promo-arrow {
  background: transparent;
  border: none;
  color: inherit;
  padding: 0 14px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.promo-arrow:hover {
  opacity: 1;
  background: rgba(255,255,255,0.08);
}

/* Wireframe override — keep it clean and monochrome */
.theme-wire .promo-bar {
  background: #2A2A2E;
  color: #FFF;
  border-bottom: 1px solid #000;
}
.theme-wire .promo-bar a { color: #FFF; }

/* Nav offset — push nav below the promo bar */
.site-nav { top: 36px; }
.theme-wire .site-nav { top: 36px; }

/* ============================================================
   LIGHT/DARK MODE TOGGLE — lives in the top-right nav
   Shows sun icon in dark modes (click → go light).
   Shows moon icon in light modes (click → go dark).
   ============================================================ */
.mode-toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-right: 8px;
}
.mode-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.mode-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Light themes (a1, b1, wire) — show moon icon (means "go dark") */
.theme-a1 .mode-toggle-sun,
.theme-b1 .mode-toggle-sun,
.theme-wire .mode-toggle-sun { opacity: 0; transform: rotate(-40deg) scale(0.7); }
.theme-a1 .mode-toggle-moon,
.theme-b1 .mode-toggle-moon,
.theme-wire .mode-toggle-moon { opacity: 1; transform: rotate(0) scale(1); }
/* Dark themes (a2, b2) — show sun icon (means "go light") */
.theme-a2 .mode-toggle-moon,
.theme-b2 .mode-toggle-moon { opacity: 0; transform: rotate(40deg) scale(0.7); }
.theme-a2 .mode-toggle-sun,
.theme-b2 .mode-toggle-sun { opacity: 1; transform: rotate(0) scale(1); }

@media (max-width: 768px) {
  .mode-toggle { width: 36px; height: 36px; margin-right: 4px; }
}

/* ============================================================
   $99 PEPTIDES PROMO LANDING PAGE
   ============================================================ */
.promo-hero {
  position: relative;
  padding: 120px 0 100px 0;
  background: var(--bg-alt);
  overflow: hidden;
}
.promo-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(127, 54, 138, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 80%, rgba(220, 142, 235, 0.08), transparent 55%);
  pointer-events: none;
}
.promo-hero-inner {
  position: relative;
  text-align: center;
  max-width: 880px;
}
.promo-headline {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 5.8vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--heading);
  margin: 14px 0 24px 0;
}
.promo-headline-price {
  color: var(--accent);
  display: inline-block;
}
.promo-subhead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--text-soft);
  max-width: 62ch;
  margin: 0 auto 40px auto;
  line-height: 1.55;
}
.promo-hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.promo-micro {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-soft);
  margin: 0;
}
.promo-micro.centered { text-align: center; margin-top: 40px; }

.promo-value { background: var(--bg-section); }
.promo-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .promo-steps { grid-template-columns: 1fr; } }
.promo-step {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  transition: border-color 0.2s ease, transform 0.22s var(--ease);
}
.promo-step:hover { border-color: var(--accent); transform: translateY(-3px); }
.promo-step-num {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
}
.promo-step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.promo-step p { color: var(--text-soft); font-size: 0.96rem; line-height: 1.55; }

.promo-peptides { background: var(--bg-alt); }
.promo-peptides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .promo-peptides-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .promo-peptides-grid { grid-template-columns: 1fr; } }
.promo-peptide-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  transition: border-color 0.2s ease, transform 0.22s var(--ease);
}
.promo-peptide-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.promo-peptide-pillar {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-alt);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.promo-peptide-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--heading);
}
.promo-peptide-card p { color: var(--text-soft); font-size: 0.92rem; line-height: 1.5; }

.promo-value-prop { background: var(--bg-section); }
.promo-value-prop-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) { .promo-value-prop-inner { grid-template-columns: 1fr; gap: 40px; } }
.promo-value-prop-copy .section-title { margin-bottom: 22px; }
.promo-value-prop-table {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 0;
  box-shadow: var(--shadow-sm);
}
.promo-table-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 26px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-heading);
}
.promo-table-row:last-child { border-bottom: none; }
.promo-table-label { color: var(--text); font-size: 0.98rem; font-weight: 500; }
.promo-table-val { color: var(--text-soft); font-size: 1.1rem; font-weight: 600; }
.promo-table-row--highlight {
  background: linear-gradient(90deg, rgba(127, 54, 138, 0.04), rgba(127, 54, 138, 0.01));
}
.promo-table-row--highlight .promo-table-label { color: var(--heading); font-weight: 700; }
.promo-table-row--highlight .promo-table-val {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-display);
}

.promo-faq { background: var(--bg-alt); }
.promo-faq .faq-list { max-width: 760px; margin: 0 auto; }

.promo-closing {
  background: var(--heading);
  color: var(--bg);
  padding: 80px 0;
}
.promo-closing-inner { text-align: center; max-width: 820px; margin: 0 auto; }
.promo-closing .section-title { color: var(--bg); margin-bottom: 32px; }
.promo-closing-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.promo-closing .btn-ghost {
  color: var(--bg);
  border-color: rgba(255,255,255,0.3);
}
.promo-closing .btn-ghost:hover { border-color: var(--bg); }

/* Wireframe overrides for promo landing */
.theme-wire .promo-hero-bg,
.theme-wire .promo-table-row--highlight { background: transparent; }
.theme-wire .promo-step,
.theme-wire .promo-peptide-card,
.theme-wire .promo-value-prop-table { border-style: dashed; }
.theme-wire .promo-peptide-pillar { border: 1px dashed var(--border); background: transparent; }
.theme-wire .promo-closing { background: #1C1C1E; }

/* ============================================================
   LOCATIONS HUB (locations.html)
   ============================================================ */
.locations-hub { background: var(--bg-section); }
.locations-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .locations-hub-grid { grid-template-columns: 1fr; } }
.location-hub-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.22s var(--ease), box-shadow 0.22s ease;
}
.location-hub-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.location-hub-media {
  aspect-ratio: 16 / 9;
  background: var(--pillar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.location-hub-media-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pillar-text);
  opacity: 0.82;
}
.location-hub-body { padding: 32px 28px; }
.location-hub-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.location-hub-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--heading);
}
.location-hub-address {
  color: var(--text);
  font-size: 0.98rem;
  margin-bottom: 20px;
  line-height: 1.55;
}
.location-hub-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin-bottom: 24px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
}
.location-hub-meta dt {
  color: var(--text-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  align-self: baseline;
}
.location-hub-meta dd { color: var(--text); margin: 0; }
.location-hub-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.theme-wire .location-hub-card { border-style: dashed; }
.theme-wire .location-hub-media { background: #E5E5EA; border-bottom: 1.5px dashed #AEAEB2; }
.theme-wire .location-hub-media-label { color: #636366; font-family: 'Courier New', monospace; }

/* ============================================================
   VISITOR GUIDE PAGES (sunny-isles, sunset-harbour)
   ============================================================ */
.visitor-hero { background: var(--bg-alt); }

.visitor-quick { background: var(--bg-section); padding: 72px 0; }
.visitor-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .visitor-quick-grid { grid-template-columns: 1fr; } }
.visitor-quick-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 22px;
}
.visitor-quick-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.visitor-quick-value {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--heading);
  margin: 0 0 14px 0;
  line-height: 1.5;
  font-weight: 500;
}
.visitor-quick-link {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.visitor-parking { background: var(--bg-alt); padding: 96px 0; }
.visitor-video-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--pillar-bg);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  margin-bottom: 48px;
  overflow: hidden;
}
.visitor-video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1), transparent 60%);
}
.visitor-video-placeholder .play-icon {
  position: relative;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 2px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--pillar-text);
  padding-left: 7px;
}
.visitor-video-label {
  position: relative;
  font-family: var(--font-heading);
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pillar-text);
  opacity: 0.9;
}
.visitor-video-sub {
  position: relative;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pillar-text);
  opacity: 0.6;
}
.visitor-parking-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) { .visitor-parking-details { grid-template-columns: 1fr; } }
.visitor-parking-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}
.visitor-parking-item h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: italic;
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--heading);
}
.visitor-parking-item p { color: var(--text-soft); line-height: 1.55; font-size: 0.95rem; }

.visitor-arriving { background: var(--bg-section); padding: 96px 0; }
.visitor-arriving-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) { .visitor-arriving-grid { grid-template-columns: 1fr; } }
.visitor-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.visitor-steps li {
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  line-height: 1.55;
  color: var(--text);
  font-size: 0.98rem;
}
.visitor-steps strong {
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-right: 6px;
}
.visitor-arriving-media { display: flex; flex-direction: column; gap: 16px; }
.visitor-photo-placeholder {
  aspect-ratio: 4 / 3;
  background: var(--pillar-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.visitor-photo-placeholder span {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pillar-text);
  opacity: 0.82;
}

.visitor-concierge { background: var(--bg-alt); padding: 96px 0; }
.visitor-concierge-list {
  list-style: none;
  padding: 0;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.visitor-concierge-list li {
  padding: 18px 24px 18px 56px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  color: var(--text);
  line-height: 1.55;
  font-size: 0.96rem;
  position: relative;
}
.visitor-concierge-list li::before {
  content: '✓';
  position: absolute;
  left: 22px;
  top: 18px;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1rem;
}

.visitor-switch { background: var(--bg-section); padding: 72px 0; }
.visitor-switch-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 36px 40px;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
@media (max-width: 720px) {
  .visitor-switch-inner { grid-template-columns: 1fr; padding: 28px 24px; }
}
.visitor-switch-inner h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.4rem;
  margin: 8px 0;
  color: var(--heading);
}
.visitor-switch-inner p { color: var(--text-soft); font-size: 0.96rem; margin: 0; }

.visitor-closing { background: var(--heading); color: var(--bg); padding: 96px 0; }
.visitor-closing-inner { text-align: center; max-width: 820px; margin: 0 auto; }
.visitor-closing .section-title { color: var(--bg); margin-bottom: 32px; }
.visitor-closing-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.visitor-closing .btn-ghost { color: var(--bg); border-color: rgba(255,255,255,0.3); }
.visitor-closing .btn-ghost:hover { border-color: var(--bg); }

.theme-wire .visitor-quick-card,
.theme-wire .visitor-parking-item,
.theme-wire .visitor-steps li,
.theme-wire .visitor-concierge-list li,
.theme-wire .visitor-switch-inner { border-style: dashed; }
.theme-wire .visitor-video-placeholder,
.theme-wire .visitor-photo-placeholder {
  background: #E5E5EA;
  border: 1.5px dashed #AEAEB2;
}
.theme-wire .visitor-video-placeholder .play-icon {
  background: transparent;
  border-color: #8E8E93;
  color: #636366;
}
.theme-wire .visitor-video-label,
.theme-wire .visitor-video-sub,
.theme-wire .visitor-photo-placeholder span {
  color: #636366;
  opacity: 1;
  font-family: 'Courier New', monospace;
}
.theme-wire .visitor-closing { background: #1C1C1E; }