/*
 * CSS Reset
 * Carried forward from reference site exactly — no changes needed.
 * Normalizes browser defaults for consistent baseline.
 */

/* Box sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins and padding */
* {
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  /* overflow-x:hidden removed — it breaks position:fixed on mobile */
}

/* Remove default list styling */
ul,
ol {
  list-style: none;
}

/* Core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x:hidden removed from body — breaks position:fixed on mobile.
     Horizontal overflow is clipped per-section via .section wrappers instead. */
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove button styling */
button {
  border: none;
  background: none;
  cursor: pointer;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Improve link defaults */
a {
  text-decoration: none;
  color: inherit;
}

/* Remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * EPOH Design Tokens — variables.css
 * Light palette — aligned with DRC colour language (Dr. Soumya / Dr. Adil brand family)
 * Backgrounds: warm white & beige  |  Text: charcoal & slate  |  Accents: ember, gold, sage
 */

:root {

  /* ============================================================
     COLOUR PALETTE — LIGHT SYSTEM
     ============================================================ */

  /* --- Light Background Scale --- */
  --color-void:        #FDFCFA;   /* Near-white warm. Hero bg, primary page bg. */
  --color-obsidian:    #F5F3EF;   /* Warm beige. Alternate section bg (was deep dark). */
  --color-midnight:    #FFFFFF;   /* Pure white. Card backgrounds, elevated surfaces. */

  /* --- Accent: The EPOH Ember (retained — matches DRC sienna) --- */
  --color-ember:       #C4622D;   /* Warm terracotta-sienna. CTAs, phase labels, active nav. */
  --color-ember-light: #D9784A;   /* Lighter ember. Hover states on ember elements. */
  --color-ember-muted: rgba(196, 98, 45, 0.10); /* Tinted background behind ember elements. */

  /* --- Secondary Accent: Gold (retained for Ayurvedic labels) --- */
  --color-gold:        #A07840;   /* Deeper muted gold — readable on light bg. */
  --color-gold-light:  #B8935A;   /* Standard gold. Ayurvedic accents, pull quote borders. */

  /* --- Healing Greens — DRC sage alignment --- */
  --color-sage:        #4A6741;   /* Deep forest sage. Positive markers, Phase 2. */
  --color-sage-light:  #5C6F5C;   /* DRC sage — mid sage icons, subtle accents. */

  /* --- Phase-Specific Accents (unchanged — work on light) --- */
  --color-phase-1:     #C4622D;   /* L — Lowering Load: ember */
  --color-phase-2:     #4A6741;   /* I — Internal Healing: sage */
  --color-phase-3:     #A07840;   /* F — Functional Detox: gold */
  --color-phase-4:     #4A5F7A;   /* E — External Care: slate blue (DRC) */
  --color-phase-5:     #7A5A8A;   /* S — Sustaining: muted violet */

  /* --- Neutral System — warm, readable on light --- */
  --color-parchment:   #2C2C2C;   /* DRC charcoal. Primary text on light backgrounds. */
  --color-linen:       #E8E6E1;   /* Warm light border. Section dividers, card borders. */
  --color-stone:       #5C5550;   /* Warm mid-grey. Secondary text on light bg. */
  --color-ash:         #4A5F7A;   /* DRC slate blue. Meta, captions, labels. */

  /* --- Semantic Colour Assignments --- */
  --color-text-primary:      #2C2C2C;   /* Charcoal — primary text on light backgrounds */
  --color-text-secondary:    #4A5F7A;   /* Slate blue — subdued text, captions */
  --color-text-on-light:     #2C2C2C;   /* Same as primary — on light bg */
  --color-text-muted-light:  #5C5550;   /* Warm mid-grey — secondary on light */

  --color-bg-dark:    var(--color-obsidian);   /* Beige sections */
  --color-bg-darker:  #EDE9E2;                  /* Slightly deeper beige for contrast */
  --color-bg-light:   var(--color-void);        /* Near-white */
  --color-bg-card:    var(--color-midnight);    /* White cards */

  --color-border-dark:   #E0DDD6;               /* Warm light border (replaces dark rgba) */
  --color-border-light:  var(--color-linen);    /* Border on beige/parchment bg */

  --color-cta:        var(--color-ember);
  --color-cta-hover:  var(--color-ember-light);


  /* ============================================================
     TYPOGRAPHY (unchanged)
     ============================================================ */

  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-accent:  'Cormorant Garamond', 'Garamond', serif;

  --font-size-hero:    clamp(2.5rem, 5vw, 4.5rem);
  --font-size-h1:      clamp(2rem, 4vw, 3.25rem);
  --font-size-h2:      clamp(1.6rem, 3vw, 2.5rem);
  --font-size-h3:      clamp(1.2rem, 2vw, 1.75rem);
  --font-size-h4:      1.125rem;

  --font-size-body-lg: 1.125rem;
  --font-size-body:    1rem;
  --font-size-small:   0.875rem;
  --font-size-xs:      0.75rem;
  --font-size-phase:   0.6875rem;

  --line-height-tight:   1.15;
  --line-height-heading: 1.25;
  --line-height-body:    1.75;
  --line-height-loose:   1.9;

  --tracking-tight:    -0.03em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-widest:    0.15em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;


  /* ============================================================
     SPACING SYSTEM (unchanged)
     ============================================================ */

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  --section-padding-desktop: clamp(4rem, 8vw, 7rem);
  --section-padding-mobile:  3rem;


  /* ============================================================
     LAYOUT (unchanged)
     ============================================================ */

  --container-max:    1320px;
  --container-wide:   1080px;
  --container-prose:  720px;
  --container-narrow: 600px;

  --bp-xs:  480px;
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;


  /* ============================================================
     INTERACTION & ANIMATION (unchanged)
     ============================================================ */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   450ms ease;
  --transition-reveal: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  --radius-subtle: 2px;
  --radius-small:  4px;
  --radius-medium: 8px;


  /* ============================================================
     Z-INDEX SCALE (unchanged)
     ============================================================ */

  --z-base:   0;
  --z-above:  10;
  --z-sticky: 100;
  --z-modal:  200;
  --z-toast:  300;


  /* ============================================================
     ACCESSIBILITY (unchanged)
     ============================================================ */

  --focus-ring-color:  var(--color-ember);
  --focus-ring-width:  2px;
  --focus-ring-offset: 3px;

  --color-whatsapp:       #25D366;
  --color-whatsapp-hover: #20BA5A;
}


/* ============================================================
   RESPONSIVE TOKEN OVERRIDES (unchanged)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --font-size-hero: clamp(2.25rem, 4vw, 3.5rem);
    --font-size-h1:   clamp(1.75rem, 3.5vw, 2.75rem);
    --font-size-h2:   clamp(1.4rem, 2.5vw, 2rem);
    --font-size-h3:   clamp(1.1rem, 1.8vw, 1.5rem);
  }
}

@media (max-width: 767px) {
  :root {
    --font-size-hero:    clamp(2rem, 7vw, 2.75rem);
    --font-size-h1:      clamp(1.75rem, 6vw, 2.25rem);
    --font-size-h2:      clamp(1.4rem, 5vw, 1.875rem);
    --font-size-h3:      clamp(1.1rem, 4vw, 1.375rem);
    --font-size-body-lg: 1.0625rem;
    --section-padding-desktop: var(--section-padding-mobile);
  }
}

@media (max-width: 479px) {
  :root {
    --font-size-hero: 2rem;
    --font-size-h1:   1.75rem;
    --font-size-h2:   1.4rem;
  }
}

/*
 * EPOH Typography System — typography.css
 * Three-font system: Playfair Display (display) + Inter (body) + Cormorant Garamond (accent)
 * Source: EPOH_STYLE_ANCHOR.md §3
 *
 * Load order: 3rd (after variables.css)
 */


/* ============================================================
   BASE BODY TYPOGRAPHY
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-obsidian);
  letter-spacing: -0.01em;
}


/* ============================================================
   HEADING HIERARCHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-parchment);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--font-size-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
}

/* Italic heading variant — sparingly for emphasis */
.heading-italic {
  font-style: italic;
}


/* ============================================================
   BODY TEXT
   ============================================================ */

p {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 70ch;
}

p:last-child {
  margin-bottom: 0;
}

/* Large body — article text, long-form reading */
.text-body-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-loose);
}

/* Small — meta, captions */
.text-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

/* Extra small — footnotes, legal */
.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-body);
}

/* On-light-bg text override */
.on-light p,
.section--light p {
  color: var(--color-text-on-light);
}

.on-light .text-secondary,
.section--light .text-secondary {
  color: var(--color-text-muted-light);
}


/* ============================================================
   LINKS
   ============================================================ */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-subtle);
}

/* Inline content links */
.inline-link {
  color: var(--color-gold-light);
  border-bottom: 1px solid rgba(212, 174, 122, 0.35);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.inline-link:hover {
  color: var(--color-parchment);
  border-bottom-color: var(--color-parchment);
}

/* Inline links on light sections */
.section--light .inline-link {
  color: var(--color-ember);
  border-bottom-color: rgba(196, 98, 45, 0.4);
}

.section--light .inline-link:hover {
  color: #8A3A15;
  border-bottom-color: #8A3A15;
}


/* ============================================================
   EYEBROW / LABEL STYLES
   Phase labels, category markers, section eyebrows
   ============================================================ */

/* Primary eyebrow — ember, mono, all-caps */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ember);
  display: block;
  margin-bottom: var(--space-4);
}

/* Gold eyebrow — Ayurvedic sections */
.eyebrow--gold {
  color: var(--color-gold);
}

/* Parchment eyebrow — subtle on very dark sections */
.eyebrow--muted {
  color: var(--color-text-secondary);
}


/* ============================================================
   PULL QUOTES / CORMORANT ACCENT TEXT
   The "repeatable core lines" from anchor docs
   ============================================================ */

.pull-quote {
  border-left: 3px solid var(--color-gold);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-12) 0;
  background: rgba(184, 147, 90, 0.05);
}

.pull-quote__text {
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-gold-light);
  margin-bottom: 0;
  max-width: none;
}

/* Pull quote on light section */
.section--light .pull-quote {
  background: rgba(184, 147, 90, 0.08);
}

.section--light .pull-quote__text {
  color: #7A6030;
}


/* ============================================================
   AYURVEDIC CONCEPT LABELS
   e.g. [Ayurveda] Ama ≡ Inflammatory Toxin Load
   ============================================================ */

.ayurveda-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: rgba(184, 147, 90, 0.10);
  border: 1px solid rgba(184, 147, 90, 0.30);
  border-radius: var(--radius-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin: var(--space-4) 0;
}


/* ============================================================
   HURLEY STAGE BADGES
   ============================================================ */

.stage-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.stage-badge--epoh-1 {
  background: rgba(44, 44, 44, 0.06);
  color: var(--color-sage-light);
  border: 1px solid rgba(44, 44, 44, 0.12);
}

.stage-badge--epoh-2 {
  background: rgba(184, 147, 90, 0.15);
  color: var(--color-gold-light);
  border: 1px solid rgba(184, 147, 90, 0.35);
}

.stage-badge--epoh-3 {
  background: rgba(196, 98, 45, 0.15);
  color: var(--color-ember-light);
  border: 1px solid rgba(196, 98, 45, 0.35);
}


/* ============================================================
   ARTICLE CONTENT TYPOGRAPHY
   Long-form reading experience
   ============================================================ */

.article-content h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  color: var(--color-parchment);
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);
  letter-spacing: var(--tracking-tight);
}

.article-content h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  color: var(--color-parchment);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.article-content p {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-loose);
  color: var(--color-text-secondary);
  max-width: 68ch;
  margin-bottom: var(--space-6);
}

.article-content strong {
  font-weight: var(--weight-semibold);
  color: var(--color-parchment);
}

.article-content em {
  font-style: italic;
  color: var(--color-gold-light);
}

/* Phase callout within article */
.article-content .phase-callout {
  border-left: 3px solid var(--color-ember);
  padding: var(--space-4) var(--space-6);
  background: var(--color-ember-muted);
  margin: var(--space-8) 0;
  font-style: italic;
  color: var(--color-parchment);
  font-size: var(--font-size-body);
}

/* Article disclaimer */
.article-disclaimer {
  border-left: 3px solid var(--color-stone);
  padding: var(--space-4) var(--space-6);
  background: rgba(44, 44, 44, 0.03);
  margin-top: var(--space-12);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

.article-disclaimer strong {
  color: var(--color-parchment);
  font-weight: var(--weight-semibold);
}


/* ============================================================
   LISTS — Content lists (not nav/reset)
   ============================================================ */

.content-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
}

.content-list li {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: var(--space-4);
}

/* Positive list — sage check mark */
.content-list--positive li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-sage-light);
  font-weight: var(--weight-semibold);
}

/* Negative list — ember cross */
.content-list--negative li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: var(--color-ember);
  font-weight: var(--weight-semibold);
}

/* Neutral list — gold dot */
.content-list--neutral li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: var(--weight-medium);
}


/* ============================================================
   DIAGRAM CAPTIONS
   ============================================================ */

.diagram-caption {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-ash);
  text-align: center;
  margin-top: var(--space-4);
  font-style: italic;
}


/* ============================================================
   MISCELLANEOUS TEXT UTILITIES
   ============================================================ */

strong {
  font-weight: var(--weight-semibold);
}

em {
  font-style: italic;
}

.text-ember   { color: var(--color-ember); }
.text-gold    { color: var(--color-gold); }
.text-sage    { color: var(--color-sage-light); }
.text-muted   { color: var(--color-text-secondary); }
.text-center  { text-align: center; }
.text-upper   {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--font-size-small);
}


/* ============================================================
   RESPONSIVE TYPOGRAPHY ADJUSTMENTS
   ============================================================ */

@media (max-width: 767px) {
  .article-content p {
    font-size: var(--font-size-body);
    max-width: 100%;
  }

  .pull-quote {
    padding: var(--space-4) var(--space-6);
    margin: var(--space-8) 0;
  }

  .pull-quote__text {
    font-size: 1.25rem;
  }

  h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
  }
}

@media (max-width: 479px) {
  .article-content h2 {
    margin-top: var(--space-12);
  }

  .article-content h3 {
    margin-top: var(--space-8);
  }
}


/* ============================================================
   MOBILE TYPOGRAPHY RHYTHM — v13
   ============================================================ */

@media (max-width: 767px) {
  /* Prose paragraphs — better line length on mobile */
  .article-body p,
  .understanding-prose p,
  .phase-deep-card__body p {
    font-size: var(--font-size-body);
    line-height: 1.75;
    max-width: 100%;
  }

  /* Pull quote — scale down gracefully */
  .pull-quote {
    margin-block: var(--space-8);
  }

  /* Eyebrow — normal letter-spacing on mobile to prevent wrapping */
  .eyebrow {
    letter-spacing: 0.08em;
    font-size: 0.65rem;
  }

  /* Content lists — more readable spacing */
  .content-list li {
    padding-block: var(--space-2);
    line-height: 1.65;
  }

  /* Section headline — tighter tracking on small screens */
  .section__headline {
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  /* Hero headline — prevent orphan words */
  .hero__headline {
    word-break: break-word;
    hyphens: auto;
  }
}

@media (max-width: 479px) {
  /* Disclaimer strip text */
  .disclaimer-strip__text {
    font-size: var(--font-size-xs);
    line-height: 1.65;
  }

  /* Stage badges — wrap gracefully */
  .stage-badge {
    white-space: normal;
    line-height: 1.4;
  }
}

/*
 * EPOH Layout System — layout.css
 * Dark section architecture, container widths, grid system, section modifiers.
 * Evolved from reference site's layout.css — dark-first, explicit section modifiers.
 * Source: EPOH_STYLE_ANCHOR.md §5, §10
 *
 * Load order: 4th (after typography.css)
 */


/* ============================================================
   SKIP TO CONTENT (Accessibility)
   ============================================================ */

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: var(--z-toast);
  padding: var(--space-4) var(--space-8);
  background: var(--color-ember);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-small);
  text-decoration: none;
}

.skip-to-content:focus {
  left: var(--space-4);
  top: var(--space-4);
  outline: var(--focus-ring-width) solid var(--color-parchment);
  outline-offset: var(--focus-ring-offset);
}


/* ============================================================
   CONTAINER SYSTEM
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.container--wide {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.container--prose {
  max-width: var(--container-prose);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.container--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}


/* ============================================================
   SECTION SYSTEM
   Unlike reference site's nth-child alternation —
   EPOH uses explicit section modifiers.
   ============================================================ */

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* Dark sections — majority of site */
.section--dark {
  background: var(--color-obsidian);
  color: var(--color-text-primary);
}

/* Deepest dark — hero alternates, void-level sections */
.section--darker {
  background: var(--color-void);
  color: var(--color-text-primary);
}

/* Card bg — slightly lighter than obsidian */
.section--card {
  background: var(--color-midnight);
  color: var(--color-text-primary);
}

/* Light sections — sparingly, breaks rhythm intentionally */
.section--light {
  background: var(--color-parchment);
  color: var(--color-text-on-light);
}

.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4 {
  color: var(--color-text-on-light);
}

/* Bordered top divider between sections */
.section--bordered-top {
  border-top: 1px solid var(--color-border-dark);
}

.section--light.section--bordered-top {
  border-top-color: var(--color-border-light);
}


/* ============================================================
   SECTION INNER ARCHITECTURE
   Every section follows this layered pattern:
   eyebrow → headline → intro → body → cta
   ============================================================ */

.section__eyebrow {
  /* Uses .eyebrow class from typography.css */
  margin-bottom: var(--space-4);
}

.section__headline {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  color: var(--color-parchment);
  margin-bottom: var(--space-6);
  max-width: 20ch;
}

.section--light .section__headline {
  color: var(--color-text-on-light);
}

.section__intro {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: 65ch;
  margin-bottom: var(--space-12);
}

.section--light .section__intro {
  color: var(--color-text-muted-light);
}

/* Centred variant for CTA and symmetrical sections */
.section__headline--center,
.section__intro--center {
  text-align: center;
  margin-inline: auto;
}

.section__body {
  /* Content flows naturally — grid or prose */
}

.section__cta {
  margin-top: var(--space-12);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

.section__cta--center {
  justify-content: center;
}

/* Soft CTA link (no button) */
.section__cta-link {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-medium);
  color: var(--color-ember);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.section__cta-link:hover {
  color: var(--color-ember-light);
  gap: var(--space-3);
}

.section__cta-link::after {
  content: "→";
}


/* ============================================================
   GRID SYSTEM
   ============================================================ */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

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

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

/* Auto-fill grid for cards */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-8);
}

/* Asymmetric: 55/45 split — prose + diagram */
.grid-prose-diagram {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Asymmetric: 40/60 — contact methods + form */
.grid-contact {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-16);
}


/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
  min-height: auto;
  display: grid;
  place-items: center;
  background: var(--color-void);
  position: relative;
  overflow: hidden;
  padding-top: clamp(5.5rem, 8vw, 7rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* Ember glow — bottom left */
.hero::before {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(196, 98, 45, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: var(--z-base);
}

/* Secondary gold glow — top right */
.hero::after {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 40%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(184, 147, 90, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: var(--z-base);
}

.hero__container {
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: stretch;
  position: relative;
  z-index: var(--z-above);
}

/* 3-column hero variant */
.hero__container--3col {
  grid-template-columns: 1.05fr 1fr 0.75fr;
  gap: var(--space-8);
  align-items: start;
}

.hero__content {
  max-width: 640px;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ember);
  display: block;
  margin-bottom: var(--space-6);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--font-size-hero);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-parchment);
  margin-bottom: var(--space-6);
}

.hero__subheadline {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: rgba(44, 44, 44, 0.40);
  margin-bottom: var(--space-8);
  max-width: 55ch;
}

.hero__trust {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-stone);
  margin-top: var(--space-8);
  letter-spacing: var(--tracking-wide);
}

.hero__cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-10);
}

.hero__visual {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 420px;
}

/* SVG pushed to very top of its column */
.hero__visual--top {
  align-self: start;
  min-height: unset;
  padding-top: var(--space-4);
}
.hero__visual--top svg {
  height: auto;
}

.hero__visual svg,
.hero__visual img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.hero-network-placeholder {
  filter: drop-shadow(0 8px 40px rgba(196,98,45,0.12));
}


/* Hero trust strip — full-width bar below 2-col hero grid */
.hero__trust-strip {
  grid-column: 1 / -1;  /* span both columns */
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-6);
  margin-top: var(--space-4);
}

.hero__trust-strip__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.hero__trust-strip__inner > div:nth-child(2) {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 767px) {
  .hero__trust-strip {
    display: none; /* hidden on mobile — doctor info appears in about/index */
  }
}

/* Page hero — smaller than home, no full-viewport height */
.hero--page {
  min-height: auto;
  padding-block: clamp(5rem, 10vw, 8rem);
  border-bottom: 1px solid var(--color-border-dark);
}

.hero--page .hero__container {
  grid-template-columns: 1fr;
  max-width: var(--container-wide);
}

.hero--page .hero__headline {
  font-size: var(--font-size-h1);
}


/* ============================================================
   FILTERING GRID (For / Not For sections)
   Carried from reference site, evolved for EPOH palette
   ============================================================ */

.filtering-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  max-width: var(--container-wide);
  margin-inline: auto;
}

.filtering-card {
  background: var(--color-midnight);
  border: 1px solid var(--color-border-dark);
  padding: var(--space-10);
  border-radius: var(--radius-small);
}

.filtering-card--positive {
  border-left: 3px solid var(--color-sage);
}

.filtering-card--negative {
  border-left: 3px solid var(--color-ember);
}

.filtering-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  color: var(--color-parchment);
  margin-bottom: var(--space-6);
}

.filtering-card--positive .filtering-card__title {
  color: var(--color-sage-light);
}

.filtering-card--negative .filtering-card__title {
  color: var(--color-ember-light);
}


/* ============================================================
   SITE FOOTER LAYOUT
   ============================================================ */

.site-footer {
  background: var(--color-void);
  color: var(--color-text-secondary);
  padding-top: var(--space-20);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-border-dark);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.footer-bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-disclaimer {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: 75ch;
}

.footer-disclaimer strong {
  color: var(--color-parchment);
  font-weight: var(--weight-semibold);
}

.footer-legal {
  font-size: var(--font-size-xs);
  color: var(--color-ash);
  line-height: var(--line-height-body);
}

.footer-brand p {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: 30ch;
  margin-bottom: var(--space-3);
}

.footer-clinic-note {
  color: var(--color-ash) !important;
  font-size: var(--font-size-xs) !important;
}

.footer-nav h4 {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-6);
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-nav a {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--color-parchment);
}

.footer-contact h4 {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-6);
}

.footer-contact-link {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  transition: color var(--transition-fast);
}

.footer-contact-link:hover {
  color: var(--color-parchment);
}

.footer-whatsapp {
  color: var(--color-whatsapp) !important;
}

.footer-whatsapp:hover {
  color: var(--color-whatsapp-hover) !important;
}


/* ============================================================
   ARTICLE PAGE LAYOUT
   Evolved from reference site's blog.css article layout
   ============================================================ */

.article-main {
  background: var(--color-obsidian);
  padding-bottom: var(--space-20);
}

.article-header {
  background: var(--color-void);
  border-bottom: 1px solid var(--color-border-dark);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.article-category {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ember);
  display: block;
  margin-bottom: var(--space-4);
}

.article-title {
  font-family: var(--font-display);
  font-size: var(--font-size-h1);
  color: var(--color-parchment);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
  max-width: 20ch;
}

.article-meta {
  font-size: var(--font-size-small);
  color: var(--color-ash);
  letter-spacing: var(--tracking-wide);
}

.article-content {
  padding-block: var(--space-16);
}

.related-articles {
  background: var(--color-midnight);
  border-top: 1px solid var(--color-border-dark);
  padding-block: var(--space-12);
}

.related-articles h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  color: var(--color-parchment);
  margin-bottom: var(--space-8);
}

.related-articles-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.related-articles-list a {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  padding-left: var(--space-6);
  position: relative;
}

.related-articles-list a::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-ember);
  transition: transform var(--transition-fast);
}

.related-articles-list a:hover {
  color: var(--color-parchment);
}

.related-articles-list a:hover::before {
  transform: translateX(4px);
}

/* Article CTA section */
.article-cta {
  padding-block: var(--space-20);
  text-align: center;
}

.article-cta h2 {
  font-size: var(--font-size-h2);
  margin-bottom: var(--space-6);
  max-width: 24ch;
  margin-inline: auto;
}

.article-cta p {
  font-size: var(--font-size-body-lg);
  max-width: 55ch;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.article-cta .cta-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   BLOG INDEX LAYOUT
   ============================================================ */

.blog-intro-section {
  background: var(--color-void);
  padding-block: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--color-border-dark);
}

.blog-title {
  font-family: var(--font-display);
  font-size: var(--font-size-h1);
  color: var(--color-parchment);
  margin-bottom: var(--space-6);
  max-width: 20ch;
}

.blog-subtitle {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: 65ch;
  margin-bottom: var(--space-4);
}

.blog-note {
  font-size: var(--font-size-small);
  color: var(--color-ash);
  font-style: italic;
  max-width: 60ch;
}

.blog-tier {
  padding-block: var(--space-20);
  border-bottom: 1px solid var(--color-border-dark);
}

.blog-tier:last-of-type {
  border-bottom: none;
}

.tier-header {
  margin-bottom: var(--space-12);
}

.tier-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-4);
}

.tier-title {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  color: var(--color-parchment);
  margin-bottom: var(--space-4);
}

.tier-description {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  max-width: 60ch;
}


/* ============================================================
   RESPONSIVE LAYOUT ADJUSTMENTS
   ============================================================ */

/* Tablet */
@media (max-width: 1023px) {
  .hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    text-align: center;
  }

  .hero__cta {
    justify-content: center;
  }

  .hero__subheadline {
    margin-inline: auto;
  }

  .hero__visual {
    order: -1;
  }

  .hero__visual svg,
  .hero__visual img {
    max-width: 400px;
    margin-inline: auto;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-prose-diagram {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .grid-contact {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .filtering-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding-top: clamp(6rem, 10vw, 8rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
  }

  .hero__container {
    text-align: left;
  }

  .hero__cta {
    justify-content: flex-start;
    flex-direction: column;
  }

  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .section__cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .section--light .section__cta,
  .section__cta--center {
    align-items: center;
  }

  .article-cta .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .article-cta .cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Small mobile */
@media (max-width: 479px) {
  .hero {
    min-height: auto;
  }

  .filtering-card {
    padding: var(--space-6);
  }
}


/* ── Hero sidebar (3-col right column) ──────────────────── */
.hero__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: start;
  padding-top: var(--space-2);
}

.hero__sidebar-block {
  padding: var(--space-4) var(--space-5);
  background: rgba(44,44,44,0.04);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
}

.hero__sidebar-block--authority {
  border-left: 2px solid var(--color-gold);
  background: rgba(184,147,90,0.05);
}

.hero__sidebar-block--framing {
  border-left: 2px solid rgba(184,147,90,0.5);
  background: rgba(184,147,90,0.04);
}

/* Stat rows inside sidebar */
.hero-stat-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border-dark);
}

.hero-stat-num {
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1.2;
}

.hero-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* LIFES phase pills */
.hero-phase-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-3);
  background: rgba(44,44,44,0.03);
  border-radius: var(--radius-subtle);
  line-height: 1.5;
}

/* Responsive: collapse to 2-col then 1-col */
@media (max-width: 1199px) {
  .hero__container--3col {
    grid-template-columns: 1fr 1fr;
  }
  .hero__sidebar {
    display: none; /* hide sidebar at tablet — shows merged in mobile */
  }
}

@media (max-width: 767px) {
  .hero__container--3col {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .hero__visual--top {
    display: none; /* hide SVG on mobile — space is too small */
  }
}

/* ============================================================
   MOBILE READING DENSITY IMPROVEMENTS — v13
   ============================================================ */

@media (max-width: 767px) {
  /* Section padding — tighter on mobile for better content density */
  .section {
    padding-block: clamp(2.5rem, 8vw, 4rem);
  }

  /* Grid: prose+diagram always stacks */
  .grid-prose-diagram {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Section headline max-width — let it breathe */
  .section__headline {
    max-width: 100%;
    font-size: var(--font-size-h2);
  }

  /* Section intro — single column, readable line length */
  .section__intro {
    max-width: 100%;
    margin-bottom: var(--space-8);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  /* Hero min-height — avoid excessive blank space on mobile */
  .hero {
    min-height: auto;
    padding-top: clamp(5rem, 20vw, 7rem);
    padding-bottom: var(--space-16);
  }

  /* Hero container — single col, left-aligned */
  .hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: left;
  }

  .hero__cta {
    justify-content: flex-start;
  }

  /* Hero visual — hide on very small screens if it pushes content too far */
  @media (max-width: 479px) {
    .hero__visual {
      display: none;
    }
  }

  /* Contact grid */
  .grid-contact {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Footer — always single column on mobile */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 479px) {
  .container,
  .container--wide,
  .container--prose,
  .container--narrow {
    padding-inline: clamp(1rem, 5vw, 1.25rem);
  }

  .section {
    padding-block: clamp(2rem, 6vw, 3rem);
  }

  .hero {
    padding-top: 5.5rem; /* clear fixed nav */
    padding-bottom: var(--space-12);
  }
}

/*
 * EPOH Components — components.css
 * Header, navigation, buttons, phase cards, article cards,
 * pull quotes, Ayurveda labels, stage badges, footer, misc UI.
 * Source: EPOH_STYLE_ANCHOR.md, Anchor docs 1–13
 *
 * Load order: 5th (after layout.css)
 */


/* ============================================================
   SITE HEADER
   Transparent → obsidian on scroll (JS adds .header--scrolled)
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding-block: var(--space-5);
  padding-inline: clamp(1rem, 4vw, 3rem);
  background: transparent;
  transition:
    background var(--transition-slow),
    border-color var(--transition-slow),
    padding var(--transition-normal);
  border-bottom: 1px solid transparent;
}

/* When mobile nav is open, raise header above the overlay */
.site-header.nav-open-header {
  z-index: calc(var(--z-modal) + 5);
}

/* Scrolled state — JS adds this class at 80px */
.site-header.header--scrolled {
  background: rgba(245, 243, 239, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--color-border-dark);
  padding-block: var(--space-4);
}

.header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.header__logo-mark {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(196, 98, 45, 0.5);
  border-radius: var(--radius-subtle);
  transition: border-color var(--transition-fast);
}

.header__logo:hover .header__logo-mark {
  border-color: var(--color-ember);
}

.header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.header__logo-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-parchment);
  transition: color var(--transition-fast);
}

.header__logo:hover .header__logo-name {
  color: var(--color-ember-light);
}

.header__logo-tagline {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-stone);
  margin-top: 2px;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

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

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav__link {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  text-decoration: none;
  position: relative;
  padding-block: var(--space-2);
  transition: color var(--transition-fast);
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
}

.site-nav__link:hover {
  color: var(--color-ember);
}

.site-nav__link:hover::after {
  transform: scaleX(1);
}

.site-nav__link[aria-current="page"] {
  color: var(--color-ember);
}

.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-ember);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-subtle);
}

/* Nav CTA button */
.site-nav__cta {
  flex-shrink: 0;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-parchment);
  border-radius: 1px;
  transition: transform var(--transition-normal), opacity var(--transition-fast);
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* ============================================================
   BUTTONS
   3-level CTA system: ghost → secondary → primary (ember)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-subtle);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Primary: ember fill (hard CTA, treatment pages) ── */
.btn-primary {
  background: var(--color-ember);
  color: #FFFFFF;
  border-color: var(--color-ember);
}

.btn-primary:hover {
  background: var(--color-ember-light);
  border-color: var(--color-ember-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(196, 98, 45, 0.30);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ── Secondary: ember outline (medium CTA) ── */
.btn-secondary {
  background: transparent;
  color: var(--color-ember);
  border-color: rgba(196, 98, 45, 0.60);
}

.btn-secondary:hover {
  background: rgba(196, 98, 45, 0.08);
  border-color: var(--color-ember);
  color: var(--color-ember-light);
}

/* ── Ghost: dark outline on light bg ── */
.btn-ghost {
  background: transparent;
  color: var(--color-parchment);
  border-color: rgba(44, 44, 44, 0.35);
}

.btn-ghost:hover {
  background: rgba(44, 44, 44, 0.06);
  border-color: rgba(44, 44, 44, 0.55);
  color: var(--color-ember);
}

/* ── Ghost on light section ── */
.btn-ghost--light {
  color: var(--color-text-on-light);
  border-color: rgba(44, 44, 44, 0.08);
}

.btn-ghost--light:hover {
  background: rgba(44, 44, 44, 0.04);
  border-color: rgba(44, 44, 44, 0.20);
}

/* ── WhatsApp ── */
.btn-whatsapp {
  background: var(--color-whatsapp);
  color: #fff;
  border-color: var(--color-whatsapp);
}

.btn-whatsapp:hover {
  background: var(--color-whatsapp-hover);
  border-color: var(--color-whatsapp-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
}

/* ── Sizes ── */
.btn--sm {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-xs);
}

.btn--lg {
  padding: var(--space-5) var(--space-10);
  font-size: var(--font-size-body);
  letter-spacing: var(--tracking-normal);
}


/* ============================================================
   PHASE CARDS — LIFES Protocol
   5 phases: L I F E S
   ============================================================ */

.phase-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.phase-card {
  background: var(--color-midnight);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  transition: background var(--transition-normal);
  min-width: 0;
  overflow: hidden;
}

.phase-card:hover {
  background: rgba(245, 243, 239, 0.97);
}

/* Phase accent line at top */
.phase-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.phase-card--l::before { background: var(--color-phase-1); }
.phase-card--i::before { background: var(--color-phase-2); }
.phase-card--f::before { background: var(--color-phase-3); }
.phase-card--e::before { background: var(--color-phase-4); }
.phase-card--s::before { background: var(--color-phase-5); }

.phase-card__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.phase-card--l .phase-card__label { color: var(--color-phase-1); }
.phase-card--i .phase-card__label { color: var(--color-phase-2); }
.phase-card--f .phase-card__label { color: var(--color-phase-3); }
.phase-card--e .phase-card__label { color: var(--color-phase-4); }
.phase-card--s .phase-card__label { color: var(--color-phase-5); }

.phase-card__letter {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-parchment);
}

.phase-card__name {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--weight-semibold);
  color: var(--color-parchment);
  letter-spacing: var(--tracking-normal);
}

.phase-card__desc {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  margin-bottom: 0;
  max-width: none;
}

.phase-card__duration {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ash);
  text-transform: uppercase;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
}


/* ============================================================
   ARTICLE CARDS — Hub & listing pages
   ============================================================ */

.article-card {
  background: var(--color-midnight);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  transition:
    border-color var(--transition-normal),
    background var(--transition-normal),
    transform var(--transition-normal);
  position: relative;
  overflow: hidden;
}

/* Left border accent on hover */
.article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-ember);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--transition-normal);
}

.article-card:hover {
  border-color: rgba(196, 98, 45, 0.30);
  background: rgba(245, 243, 239, 0.95);
  transform: translateY(-2px);
}

.article-card:hover::before {
  transform: scaleY(1);
}

.article-card:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-ember);
  outline-offset: var(--focus-ring-offset);
}

.article-card__category {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ember);
}

.article-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-parchment);
  letter-spacing: var(--tracking-tight);
  transition: color var(--transition-fast);
}

.article-card:hover .article-card__title {
  color: var(--color-gold-light);
}

.article-card__excerpt {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  flex-grow: 1;
  max-width: none;
  margin-bottom: 0;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
}

.article-card__read-time {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-ash);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.article-card__arrow {
  margin-left: auto;
  color: var(--color-ember);
  font-size: 1rem;
  transition: transform var(--transition-fast);
}

.article-card:hover .article-card__arrow {
  transform: translateX(4px);
}

/* Article card — light section variant */
.article-card--light {
  background: #fff;
  border-color: var(--color-border-light);
}

.article-card--light .article-card__title {
  color: var(--color-text-on-light);
}

.article-card--light .article-card__excerpt {
  color: var(--color-text-muted-light);
}

.article-card--light .article-card__meta {
  border-top-color: var(--color-border-light);
}

.article-card--light:hover {
  border-color: rgba(196, 98, 45, 0.40);
  background: #fff;
}


/* ============================================================
   SUBTYPE CARDS — HS subtypes grid
   ============================================================ */

.subtype-card {
  background: var(--color-midnight);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  transition:
    border-color var(--transition-normal),
    background var(--transition-normal);
}

.subtype-card:hover {
  border-color: rgba(184, 147, 90, 0.30);
  background: rgba(245, 243, 239, 0.95);
}

.subtype-card__location {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.subtype-card__name {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-parchment);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-tight);
}

.subtype-card__desc {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: none;
  margin-bottom: 0;
}

.subtype-card__link {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ember);
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.subtype-card:hover .subtype-card__link {
  gap: var(--space-3);
  color: var(--color-ember-light);
}


/* ============================================================
   TRUST / CREDENTIAL CARDS
   Dr. Adil trust section — 3 column
   ============================================================ */

.trust-card {
  padding: var(--space-8);
  border-top: 1px solid var(--color-border-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.trust-card__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: var(--weight-bold);
  color: var(--color-ember);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.trust-card__label {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-semibold);
  color: var(--color-parchment);
}

.trust-card__desc {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: none;
  margin-bottom: 0;
}


/* ============================================================
   CASE PATTERN CARDS
   Anonymised patient vignettes
   ============================================================ */

.case-card {
  background: var(--color-midnight);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
}

.case-card::after {
  content: '"';
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  font-family: var(--font-display);
  font-size: 5rem;
  color: rgba(196, 98, 45, 0.08);
  line-height: 1;
  pointer-events: none;
}

.case-card__tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.case-card__summary {
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-gold-light);
  max-width: none;
  margin-bottom: 0;
}

.case-card__detail {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: none;
  margin-bottom: 0;
}

.case-card__outcome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-sage-light);
}

.case-card__outcome::before {
  content: '↗';
  font-size: 0.875rem;
}


/* ============================================================
   HURLEY STAGE PROGRESSION CARDS
   ============================================================ */

.stage-card {
  padding: var(--space-8) var(--space-6);
  border-left: 2px solid transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-normal);
}

.stage-card--1 { border-left-color: var(--color-sage); }
.stage-card--2 { border-left-color: var(--color-gold); }
.stage-card--3 { border-left-color: var(--color-ember); }

.stage-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.stage-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  color: var(--color-parchment);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.stage-card__desc {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: none;
  margin-bottom: 0;
}


/* ============================================================
   FORMULATION CARDS
   Personalised herbal formulation section — mandatory per anchor
   ============================================================ */

.formulation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.formulation-card {
  background: rgba(184, 147, 90, 0.05);
  border: 1px solid rgba(184, 147, 90, 0.15);
  border-radius: var(--radius-small);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-normal), background var(--transition-normal);
}

.formulation-card:hover {
  border-color: rgba(184, 147, 90, 0.35);
  background: rgba(184, 147, 90, 0.08);
}

.formulation-card__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.formulation-card__name {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--weight-semibold);
  color: var(--color-gold-light);
  letter-spacing: var(--tracking-normal);
}

.formulation-card__function {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: none;
  margin-bottom: 0;
}

/* Formulation section header note */
.formulation-note {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ash);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-subtle);
  margin-top: var(--space-8);
  text-align: center;
}


/* ============================================================
   DOCTOR / AUTHORITY BLOCK
   ============================================================ */

.doctor-block {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  padding: var(--space-10);
  background: var(--color-midnight);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
}

.doctor-block__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-border-dark);
  object-fit: cover;
  flex-shrink: 0;
}

.doctor-block__avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-small);
  border: 1px solid rgba(196, 98, 45, 0.30);
  background: var(--color-ember-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-ember);
}

.doctor-block__info {
  flex: 1;
}

.doctor-block__name {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  color: var(--color-parchment);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}

.doctor-block__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ember);
  display: block;
  margin-bottom: var(--space-4);
}

.doctor-block__bio {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin-bottom: 0;
}


/* ============================================================
   DIVIDERS & SEPARATORS
   ============================================================ */

.divider {
  border: none;
  border-top: 1px solid var(--color-border-dark);
  margin: 0;
}

.divider--light {
  border-top-color: var(--color-border-light);
}

.divider--gold {
  border-top-color: rgba(184, 147, 90, 0.25);
}

/* Vertical spacer */
.spacer-lg { height: var(--space-16); }
.spacer-md { height: var(--space-12); }
.spacer-sm { height: var(--space-8); }


/* ============================================================
   CONTACT METHODS BLOCK
   ============================================================ */

.contact-method {
  display: flex;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border-dark);
  align-items: flex-start;
}

.contact-method:last-child {
  border-bottom: none;
}

.contact-method__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-small);
  background: var(--color-ember-muted);
  border: 1px solid rgba(196, 98, 45, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-ember);
  font-size: 1rem;
}

.contact-method__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ash);
  display: block;
  margin-bottom: var(--space-2);
}

.contact-method__value {
  font-size: var(--font-size-body-lg);
  font-weight: var(--weight-medium);
  color: var(--color-parchment);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-method__value:hover {
  color: var(--color-ember-light);
}

.contact-method__value--whatsapp:hover {
  color: var(--color-whatsapp);
}

.contact-method__note {
  font-size: var(--font-size-xs);
  color: var(--color-ash);
  margin-top: var(--space-1);
  display: block;
  max-width: none;
  margin-bottom: 0;
}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.breadcrumb__item {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ash);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__item:hover {
  color: var(--color-ember);
}

.breadcrumb__item[aria-current="page"] {
  color: var(--color-parchment);
  pointer-events: none;
}

.breadcrumb__separator {
  color: var(--color-stone);
  font-size: var(--font-size-xs);
  opacity: 0.5;
}


/* ============================================================
   TAGS / BADGES (general)
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: rgba(44, 44, 44, 0.05);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.tag--ember {
  background: var(--color-ember-muted);
  border-color: rgba(196, 98, 45, 0.30);
  color: var(--color-ember-light);
}

.tag--gold {
  background: rgba(184, 147, 90, 0.08);
  border-color: rgba(184, 147, 90, 0.25);
  color: var(--color-gold-light);
}

.tag--sage {
  background: rgba(44, 44, 44, 0.04);
  border-color: rgba(44, 44, 44, 0.10);
  color: var(--color-sage-light);
}


/* ============================================================
   NOTIFICATION / DISCLAIMER STRIP
   ============================================================ */

.disclaimer-strip {
  background: rgba(196, 98, 45, 0.06);
  border: 1px solid rgba(196, 98, 45, 0.15);
  border-radius: var(--radius-small);
  padding: var(--space-5) var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.disclaimer-strip__icon {
  color: var(--color-ember);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.disclaimer-strip__text {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: none;
  margin-bottom: 0;
}

.disclaimer-strip__text strong {
  color: var(--color-parchment);
  font-weight: var(--weight-semibold);
}


/* ============================================================
   RESPONSIVE — COMPONENTS
   ============================================================ */

/* Phase grid collapses to 2+3 on tablet, 1 on mobile */
@media (max-width: 1199px) {
  .phase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
  }

  .phase-card {
    flex: unset;
    min-width: unset;
  }
}

@media (max-width: 1023px) {
  .doctor-block {
    flex-direction: column;
    gap: var(--space-6);
  }

  .doctor-block__bio {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .phase-grid {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    flex-wrap: unset;
  }

  .phase-card {
    flex: unset;
    min-width: unset;
  }
}

@media (max-width: 767px) {
  .site-nav__links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-void);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-6);
    z-index: var(--z-modal);
  }

  .site-nav__links.nav-open {
    display: flex;
  }

  .site-nav__link {
    font-size: var(--font-size-h3);
    letter-spacing: var(--tracking-normal);
    color: var(--color-parchment);
  }

  .site-nav__cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
    position: fixed;                       /* escape header stacking context */
    top: 18px;                             /* vertically centered in fixed header (~60px tall) */
    right: clamp(1rem, 4vw, 3rem);        /* match header inline padding */
    z-index: calc(var(--z-modal) + 10);   /* always above overlay */
  }

  .phase-card {
    padding: var(--space-6) var(--space-5);
  }

  .formulation-grid {
    grid-template-columns: 1fr;
  }

  .contact-method__value {
    font-size: var(--font-size-body);
  }
}

@media (max-width: 479px) {
  .phase-grid {
    grid-template-columns: 1fr;
    gap: 1px;
    display: grid;
    overflow: hidden;
  }

  .phase-card {
    flex: unset;
    min-width: unset;
  }

  .btn {
    padding: var(--space-4) var(--space-6);
  }

  .btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-small);
  }

  .article-card {
    padding: var(--space-6);
  }

  .case-card {
    padding: var(--space-6);
  }
}

/* ============================================================
   AYURVEDIC CONCEPT LABEL
   Used inline: [Ayurveda] Ama ≡ Inflammatory Toxin Load
   ============================================================ */
.ayurveda-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem;
  background: rgba(184, 147, 90, 0.10);
  border: 1px solid rgba(184, 147, 90, 0.28);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  vertical-align: middle;
  margin: 0 0.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.ayurveda-label__prefix {
  opacity: 0.6;
  font-size: 0.65rem;
  white-space: nowrap;   /* AYURVEDA never breaks mid-word */
  flex-shrink: 0;
}

/* Standalone block version — for section intros */
.ayurveda-label--block {
  display: flex;
  margin-bottom: 0.75rem;
}

/* ============================================================
   PULL QUOTE — Cormorant Garamond, gold border
   Used for repeatable anchor lines and Ayurvedic insights
   ============================================================ */
.pull-quote {
  border-left: 3px solid var(--color-gold);
  padding: 1.25rem 1.75rem;
  margin: 2.5rem 0;
  background: rgba(184, 147, 90, 0.05);
  border-radius: 0 4px 4px 0;
}

.pull-quote__text {
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--color-gold-light);
  margin: 0;
}

.pull-quote__source {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--color-gold);
  opacity: 0.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   AYURVEDIC MAPPING TABLE
   Used in HS overview / protocol pages
   ============================================================ */
.ayurveda-mapping {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.875rem;
}

.ayurveda-mapping thead tr {
  border-bottom: 1px solid rgba(184, 147, 90, 0.3);
}

.ayurveda-mapping th {
  padding: 0.6rem 1rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 500;
}

.ayurveda-mapping td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(44, 44, 44, 0.05);
  color: var(--color-text-secondary);
  vertical-align: top;
}

.ayurveda-mapping td:first-child {
  color: var(--color-text-primary);
  font-weight: 500;
}

.ayurveda-mapping td:last-child {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--color-gold-light);
}

.ayurveda-mapping tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   TRIDOSHIC INDICATOR — small inline dosha tags
   ============================================================ */
.dosha-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  font-weight: 500;
  margin: 0 0.1rem;
}

.dosha-tag--pitta {
  background: rgba(196, 98, 45, 0.15);
  color: var(--color-ember-light);
  border: 1px solid rgba(196, 98, 45, 0.25);
}

.dosha-tag--vata {
  background: rgba(90, 122, 138, 0.15);
  color: #8AAAB8;
  border: 1px solid rgba(90, 122, 138, 0.25);
}

.dosha-tag--kapha {
  background: rgba(44, 44, 44, 0.05);
  color: var(--color-sage-light);
  border: 1px solid rgba(44, 44, 44, 0.08);
}

/* ============================================================
   SVG DIAGRAM BLOCK
   Full-width diagrams — readable at all viewport sizes
   ============================================================ */
.svg-diagram-block {
  width: 100%;
  max-width: var(--container-max);   /* 1320px — allow full content width */
  margin: 4rem auto;
  padding-inline: clamp(0.5rem, 2vw, 1.5rem);
  box-sizing: border-box;
  text-align: center;
}

.svg-diagram-block img {
  display: block;
  width: 100%;
  max-width: 1080px;        /* Up from 760px — SVGs have viewBox so scale crisply */
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-small);
}

.svg-diagram-caption {
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-family: var(--font-body);
  font-style: italic;
  margin-top: 0.75rem;
  line-height: 1.5;
  max-width: 800px;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .svg-diagram-block {
    margin: 2rem auto;
    padding-inline: 0.5rem;
  }

  .svg-diagram-block img {
    max-width: 100%;
  }
}

/* ============================================================
   UNDERSTANDING HS — NAV DROPDOWN MEGA MENU
   ============================================================ */

/* The parent <li> that holds the dropdown */
.nav-item--has-dropdown {
  position: relative;
}

/* Invisible bridge that fills the gap between the nav link and the dropdown panel.
   Without this, moving the cursor from the link into the panel crosses a dead zone
   where neither element is hovered, causing the dropdown to flicker/close. */
.nav-item--has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 18px; /* must be >= the gap between link bottom and panel top */
  background: transparent;
}

/* Dropdown trigger link gets a subtle caret */
.nav-item--has-dropdown > .site-nav__link::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 4px;
  height: 4px;
  border-right: 1px solid var(--color-ember);
  border-bottom: 1px solid var(--color-ember);
  rotate: 45deg;
  transition: opacity var(--transition-fast), transform var(--transition-normal);
  opacity: 0;
}

.nav-item--has-dropdown.is-open > .site-nav__link::before,
.nav-item--has-dropdown:focus-within > .site-nav__link::before {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/* The dropdown panel itself */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px); /* smaller gap — bridge pseudo covers it */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 680px;
  background: var(--color-obsidian);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
  box-shadow: 0 8px 32px rgba(44,44,44,0.12), 0 0 0 1px rgba(196,98,45,0.10);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  z-index: var(--z-sticky);
}

/* Arrow pointer at top of dropdown */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: var(--color-obsidian);
  border-top: 1px solid var(--color-border-dark);
  border-left: 1px solid var(--color-border-dark);
}

/* Open state — driven entirely by JS adding .is-open (avoids CSS hover dead-zone issues) */
.nav-item--has-dropdown.is-open .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown section label */
.nav-dropdown__section-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-dark);
  display: block;
}

/* Individual dropdown link */
.nav-dropdown__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-subtle);
  text-decoration: none;
  transition: background var(--transition-fast);
  margin-bottom: var(--space-1);
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
  background: rgba(196,98,45,0.08);
  outline: none;
}

.nav-dropdown__link:focus-visible {
  outline: 2px solid var(--color-ember);
  outline-offset: 1px;
}

.nav-dropdown__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
  margin-top: 1px;
}

.nav-dropdown__icon--ember  { background: var(--color-ember-muted); }
.nav-dropdown__icon--gold   { background: rgba(184,147,90,0.10); }
.nav-dropdown__icon--sage   { background: rgba(44,44,44,0.04); }
.nav-dropdown__icon--slate  { background: rgba(90,122,138,0.12); }

.nav-dropdown__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown__title {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--weight-medium);
  color: var(--color-parchment);
  line-height: 1.3;
}

.nav-dropdown__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.45;
}

/* "Overview" link spanning full width at bottom */
.nav-dropdown__footer {
  grid-column: 1 / -1;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-dropdown__footer-link {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ember);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--transition-fast), color var(--transition-fast);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-subtle);
}

.nav-dropdown__footer-link:hover {
  gap: var(--space-3);
  color: var(--color-ember-light);
}

.nav-dropdown__footer-link:focus-visible {
  outline: 2px solid var(--color-ember);
  outline-offset: 2px;
}

/* Hide dropdown on mobile — it becomes part of the full-screen nav */
@media (max-width: 767px) {
  .nav-dropdown {
    display: none;
  }

  /* Mobile: sub-links hidden — main links only */
  .nav-mobile-sub {
    display: none;
  }
}

@media (min-width: 768px) {
  .nav-mobile-sub {
    display: none;
  }
}

/* Single-column narrow dropdown variant (Protocol, Treatment, Resources) */
.nav-dropdown--narrow {
  width: 360px;
  grid-template-columns: 1fr;
}

.nav-dropdown--narrow::before {
  left: 50%;
}

/* Articles dropdown — 2 col, no icons, section-label driven layout */
.nav-dropdown--articles {
  width: 720px;
}

/* Articles dropdown links: no icon, tighter padding */
.nav-dropdown--articles .nav-dropdown__link {
  padding: var(--space-2) var(--space-3);
}

.nav-dropdown--articles .nav-dropdown__title {
  font-size: 0.8125rem; /* 13px — slightly tighter for denser listing */
}

.nav-dropdown--articles .nav-dropdown__desc {
  font-size: var(--font-size-xs);
}

/* Footer inside col-2 of articles dropdown */
.nav-dropdown--articles .nav-dropdown__footer {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-4);
  grid-column: unset; /* inside a column, not spanning */
}


/* ============================================================
   MOBILE UX IMPROVEMENTS — v13
   ============================================================ */

/* Phase card outcome block — already added inline, ensure it's styled */
.phase-card__outcome {
  margin-top: auto;
}

/* Pull-quote — tighten on small screens */
@media (max-width: 767px) {
  .pull-quote {
    padding: var(--space-5) var(--space-6);
    margin-block: var(--space-8);
  }

  .pull-quote__text {
    font-size: clamp(1rem, 4vw, 1.25rem);
  }

  /* Section CTAs — full-width buttons on mobile */
  .section__cta .btn,
  .section__cta--center .btn {
    width: 100%;
    justify-content: center;
  }

  /* Filtering cards — tighter padding */
  .filtering-card {
    padding: var(--space-6) var(--space-5);
  }

  /* Failure cards */
  .failure-card {
    padding: var(--space-6) var(--space-5);
  }

  /* Doctor block portrait */
  .doctor-block__avatar {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  /* Article cards — ensure full bleed on mobile */
  .article-card {
    border-left: none;
    border-top: 2px solid var(--color-ember);
  }

  /* Disclaimer strip — wrap text cleanly */
  .disclaimer-strip {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
  }

  /* Mobile nav overlay — make links bigger and add CTA at bottom */
  .site-nav__links {
    padding-top: clamp(5rem, 15vw, 7rem);
    justify-content: flex-start;
    overflow-y: auto;
  }

  .site-nav__link {
    font-size: var(--font-size-h3);
    padding-block: var(--space-3);
  }

  /* Honest framing callout — ensure no overflow */
  .honest-framing-callout {
    padding: var(--space-5);
  }
}

@media (max-width: 479px) {
  /* Hero CTA buttons — full width, stacked */
  .hero__cta {
    flex-direction: column;
    gap: var(--space-3);
  }

  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Eyebrow text — prevent overflow */
  .eyebrow {
    white-space: normal;
    line-height: 1.4;
  }

  /* Section intro text — slightly smaller on tiny screens */
  .section__intro {
    font-size: var(--font-size-body);
  }

  /* Phase card — compact */
  .phase-card {
    padding: var(--space-5) var(--space-4);
  }

  /* Pull-quote — minimal padding */
  .pull-quote {
    padding: var(--space-4) var(--space-5);
  }

  /* Stats grid items */
  .pain-stat {
    padding: var(--space-5);
  }

  .risk-stat {
    padding: var(--space-5) var(--space-6);
  }
}


/* ============================================================
   MOBILE HORIZONTAL SCROLL CAROUSELS — v13
   Native scroll-snap, no JS, no arrows needed.
   Shows 1.15 cards to signal scrollability.
   Applied only at ≤767px where stacking causes scroll debt.
   ============================================================ */

/* ── Shared carousel shell ── */
.carousel-mobile {
  display: grid; /* desktop: remains grid */
}

@media (max-width: 767px) {
  /* Turn any .carousel-mobile container into a horizontal scroll lane */
  .carousel-mobile {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-4);
    /* Negative margin to bleed to viewport edge while keeping internal padding */
    /* Hide scrollbar but keep functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .carousel-mobile::-webkit-scrollbar {
    display: none;
  }

  /* Every direct child becomes a fixed-width card */
  .carousel-mobile > * {
    flex: 0 0 calc(85vw - 2rem);   /* show ~1.15 cards */
    max-width: 340px;
    min-width: 260px;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  /* Scroll hint label above carousel */
  .carousel-mobile-wrap {
    position: relative;
  }

  .carousel-mobile-wrap::after {
    content: 'scroll →';
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ash);
    margin-top: var(--space-2);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
  }
}

@media (max-width: 479px) {
  .carousel-mobile > * {
    flex: 0 0 calc(88vw - 1.5rem);
    max-width: 300px;
  }
}


/* ── Case cards carousel ── */
@media (max-width: 767px) {
  .cases-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-5);
    scroll-padding-inline: clamp(1rem, 5vw, 1.5rem);
    scrollbar-width: none;
    -ms-overflow-style: none;
    grid-template-columns: unset; /* override index inline grid */
  }

  .cases-grid::-webkit-scrollbar { display: none; }

  .cases-grid .case-card {
    flex: 0 0 calc(85vw - 2rem);
    max-width: 340px;
    min-width: 260px;
    scroll-snap-align: start;
  }
}


/* ── Trust / credibility cards carousel ── */
@media (max-width: 767px) {
  .trust-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    grid-template-columns: unset;
  }

  .trust-grid::-webkit-scrollbar { display: none; }

  .trust-grid .trust-card,
  .trust-grid > div {
    flex: 0 0 calc(78vw - 2rem);
    max-width: 300px;
    min-width: 220px;
    scroll-snap-align: start;
  }
}


/* ── Article preview cards carousel ── */
@media (max-width: 767px) {
  .articles-preview-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    grid-template-columns: unset;
  }

  .articles-preview-grid::-webkit-scrollbar { display: none; }

  .articles-preview-grid .article-card,
  .articles-preview-grid > article {
    flex: 0 0 calc(82vw - 2rem);
    max-width: 320px;
    min-width: 250px;
    scroll-snap-align: start;
  }
}


/* ── Subtype cards carousel (hs page) ── */
@media (max-width: 767px) {
  .subtypes-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    grid-template-columns: unset;
  }

  .subtypes-grid::-webkit-scrollbar { display: none; }

  .subtypes-grid .subtype-card,
  .subtypes-grid > a,
  .subtypes-grid > div {
    flex: 0 0 calc(72vw - 1.5rem);
    max-width: 280px;
    min-width: 220px;
    scroll-snap-align: start;
  }
}


/* ── Formulation cards carousel (hs + treatment pages) ── */
@media (max-width: 767px) {
  .formulation-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-5);
    scrollbar-width: none;
    grid-template-columns: unset;
  }

  .formulation-grid::-webkit-scrollbar { display: none; }

  .formulation-grid .formulation-card,
  .formulation-grid > div {
    flex: 0 0 calc(80vw - 2rem);
    max-width: 310px;
    min-width: 240px;
    scroll-snap-align: start;
  }
}


/* ── Failure cards carousel (treatment page) ── */
@media (max-width: 767px) {
  .failure-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    grid-template-columns: unset;
  }

  .failure-grid::-webkit-scrollbar { display: none; }

  .failure-grid .failure-card,
  .failure-grid > div {
    flex: 0 0 calc(83vw - 2rem);
    max-width: 330px;
    min-width: 260px;
    scroll-snap-align: start;
  }
}


/* ── Resources cards carousel (tracker + fabric) ── */
@media (max-width: 767px) {
  .tracker-grid,
  .fabric-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    grid-template-columns: unset;
  }

  .tracker-grid::-webkit-scrollbar,
  .fabric-grid::-webkit-scrollbar { display: none; }

  .tracker-card,
  .fabric-card {
    flex: 0 0 calc(80vw - 2rem);
    max-width: 300px;
    scroll-snap-align: start;
  }
}


/* Scroll hint removed — overflow-x:clip on .section handles containment */



/* ============================================================
   EXPECT ITEMS — compact timeline on mobile
   4 timeline entries stack too tall; collapse body by default,
   expand on tap. No JS needed — uses <details> pattern in CSS.
   ============================================================ */

@media (max-width: 767px) {
  /* Expectation timeline — show period + title, hide body */
  .expectation-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-small);
    overflow: hidden;
  }

  .expect-item {
    flex-direction: row;
    gap: 0;
    border-bottom: 1px solid var(--color-border-dark);
    padding: 0;
    cursor: pointer;
  }

  .expect-item:last-child {
    border-bottom: none;
  }

  .expect-item__dot {
    display: none; /* hide vertical dot on mobile — replaced by colored left border */
  }

  .expect-item__content {
    flex: 1;
    padding: var(--space-5) var(--space-5);
    border-left: 3px solid transparent;
  }

  .expect-item:nth-child(1) .expect-item__content { border-left-color: var(--color-ember); }
  .expect-item:nth-child(2) .expect-item__content { border-left-color: var(--color-gold); }
  .expect-item:nth-child(3) .expect-item__content { border-left-color: var(--color-sage-light); }
  .expect-item:nth-child(4) .expect-item__content { border-left-color: var(--color-sage); }

  /* Collapse body text — show only period + title */
  .expect-item__body,
  .expect-item__content > div[style] { /* inline plateau callout */
    display: none;
  }

  /* Period + title form a compact row */
  .expect-item__period {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-xs);
  }

  .expect-item__title {
    font-size: var(--font-size-body);
    margin-bottom: 0;
  }

  /* Expand on :focus-within (keyboard) or :target — 
     for tap: use the JS accordion already on protocol page */
  .expect-item:focus-within .expect-item__body,
  .expect-item.is-open .expect-item__body {
    display: block;
    margin-top: var(--space-3);
  }

  .expect-item:focus-within .expect-item__content > div[style],
  .expect-item.is-open .expect-item__content > div[style] {
    display: block;
  }
}


/* ============================================================
   PHASE CARDS — compact 2-col grid on tablet, carousel on mobile
   Already stacks to 1-col but 5 cards is still very long
   ============================================================ */

@media (max-width: 767px) {
  /* Override existing 1-col stacking — make horizontal carousel instead */
  .phase-grid {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1px;
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    background: var(--color-border-dark);
    border-radius: var(--radius-small);
    overflow-y: visible;
    border: none;
  }

  .phase-grid::-webkit-scrollbar { display: none; }

  .phase-grid .phase-card {
    flex: 0 0 calc(78vw - 2rem) !important;
    max-width: 300px;
    min-width: 240px;
    scroll-snap-align: start;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-small);
  }
}

@media (max-width: 1199px) and (min-width: 768px) {
  /* Tablet: 3-col already set, but phase cards are cramped — show 2+partial */
  .phase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ============================================================
   PAIN STATS — 2-col on mobile instead of 1-col stack
   4 stat cards; 2×2 grid is much more compact than 4×1
   ============================================================ */

@media (max-width: 767px) {
  .pain-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3);
  }

  .pain-stat {
    padding: var(--space-4) var(--space-4);
  }

  .pain-stat__number {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
}

@media (max-width: 479px) {
  .pain-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2);
  }

  .pain-stat {
    padding: var(--space-3) var(--space-3);
  }
}


/* ============================================================
   RISK STATS (hs page) — 2-col grid on mobile
   4 stat blocks; 2×2 is far more compact than 4×1 stack
   ============================================================ */

@media (max-width: 767px) {
  .risk-stat-row {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3);
  }

  .risk-stat {
    padding: var(--space-4) var(--space-4);
  }

  .risk-stat__value {
    font-size: clamp(1.3rem, 5vw, 2rem);
  }

  .risk-stat__label {
    font-size: var(--font-size-xs);
    line-height: 1.5;
  }
}

@media (max-width: 479px) {
  .risk-stat-row {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2);
  }

  .risk-stat {
    padding: var(--space-3);
  }
}


/* ============================================================
   ARTICLES INDEX TIERS — compact article card on mobile
   Each article card has title, meta, desc. On mobile,
   hide the description to reduce height significantly.
   ============================================================ */

@media (max-width: 767px) {
  /* Article index page cards — show only title + meta */
  .blog-tier .article-card__excerpt {
    display: none;
  }

  .blog-tier .article-card {
    padding: var(--space-5) var(--space-5);
  }

  /* Article grid on index page — horizontal carousel (already handled above) */
  
  /* Blog tier grids on articles/index — 1-col but compact */
  .blog-tier .grid-auto {
    gap: var(--space-3);
  }
}


/* ============================================================
   FILTERING CARDS — compact on mobile
   The For/Not-For cards are important for decision-making,
   so keep stacked but make them more compact with tighter padding.
   These should NOT be carouselled — user must compare them.
   ============================================================ */

@media (max-width: 767px) {
  .filtering-card {
    padding: var(--space-5) var(--space-5) !important;
  }

  .filtering-card .content-list li {
    padding-block: var(--space-1);
    font-size: var(--font-size-small);
  }
}


/* ============================================================
   SECTION INTRO — compact on mobile
   Remove excessive margin-bottom from section intro text
   ============================================================ */

@media (max-width: 767px) {
  .section__intro {
    margin-bottom: var(--space-6) !important;
  }

  /* Section padding — more aggressive compaction */
  .section {
    padding-block: clamp(2rem, 6vw, 3.5rem) !important;
  }
}



/* ============================================================
   VISUAL DENSITY & SPACE IMPROVEMENTS — v13.1
   ============================================================ */

/* System node icons — replace emoji feel with SVG-icon boxes */
.system-node__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.system-node__icon--gold  { background: rgba(184,147,90,0.12); border-color: rgba(184,147,90,0.3); }
.system-node__icon--ember { background: rgba(196,98,45,0.10); border-color: rgba(196,98,45,0.25); }
.system-node__icon--sage  { background: rgba(74,103,65,0.10); border-color: rgba(74,103,65,0.25); }
.system-node__icon--slate { background: rgba(74,95,122,0.10); border-color: rgba(74,95,122,0.25); }

/* Hero visual — centre-align in its column, prevent overflow */
.hero__visual {
  align-self: center;
}

/* Phase card outcome block — remove double occurrence (inline + class) */
.phase-card__outcome ~ .phase-card__outcome {
  display: none;
}

/* Pain stats — bolder numbers */
.pain-stat__number {
  font-weight: 700;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-2);
}

/* Risk stat — bolder numbers */
.risk-stat__value {
  font-weight: 700;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-2);
}

/* Section bordered top — remove excessive top padding when eyebrow is first child */
.section--bordered-top > .container > [data-reveal]:first-child,
.section--bordered-top > .container--wide > [data-reveal]:first-child {
  margin-bottom: var(--space-10);
}

/* Pull quote — tighter, more visual */
.pull-quote {
  position: relative;
}
.pull-quote::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: var(--space-5);
  font-family: var(--font-accent);
  font-size: 4rem;
  color: var(--color-ember);
  opacity: 0.2;
  line-height: 1;
  pointer-events: none;
}

/* Article cards on article index — tighter compact layout */
@media (min-width: 768px) {
  .articles-preview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

/* Phase cards — taller minimum to prevent awkward short cards */
.phase-card {
  display: flex;
  flex-direction: column;
}
.phase-card__body {
  flex: 1;
}

/* Understanding grid — balanced columns */
.understanding-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 1023px) {
  .understanding-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* Cases grid — more even spacing */
.cases-grid {
  gap: var(--space-5);
}

/* Filtering grid — full width, centered */
.filtering-grid {
  max-width: 860px;
  margin-inline: auto;
}


/* ============================================================
   ADDITIONAL MOBILE CAROUSELS — v13.1
   ============================================================ */

/* ── Protocol: phase accordion cards on mobile ── */
@media (max-width: 767px) {
  .phase-deep-grid,
  .phase-cards-row {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
  }
  .phase-deep-grid::-webkit-scrollbar,
  .phase-cards-row::-webkit-scrollbar { display: none; }

  .phase-deep-card,
  .phase-cards-row > * {
    flex: 0 0 calc(88vw - 2rem);
    max-width: 360px;
    min-width: 280px;
    scroll-snap-align: start;
  }
}

/* ── Articles index: article tier grids ── */
@media (max-width: 767px) {
  .article-tier__grid,
  .blog-tier .grid-auto,
  .article-grid {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    grid-template-columns: unset !important;
  }
  .article-tier__grid::-webkit-scrollbar,
  .blog-tier .grid-auto::-webkit-scrollbar,
  .article-grid::-webkit-scrollbar { display: none; }

  .article-tier__grid > *,
  .blog-tier .grid-auto > *,
  .article-grid > * {
    flex: 0 0 calc(82vw - 2rem);
    max-width: 320px;
    min-width: 250px;
    scroll-snap-align: start;
  }
}

/* ── Credential strip on about page ── */
@media (max-width: 767px) {
  .credential-strip {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-5);
    padding-bottom: var(--space-3);
    scrollbar-width: none;
    flex-wrap: nowrap;
    align-items: center;
  }
  .credential-strip::-webkit-scrollbar { display: none; }
  .credential-strip > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .credential-divider {
    display: none;
  }
}

/* ── Subtype pages: related detail grids ── */
@media (max-width: 767px) {
  .detail-grid,
  .pattern-grid,
  .timeline-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-3);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-3);
    scrollbar-width: none;
    grid-template-columns: unset !important;
  }
  .detail-grid::-webkit-scrollbar,
  .pattern-grid::-webkit-scrollbar,
  .timeline-grid::-webkit-scrollbar { display: none; }

  .detail-grid > *,
  .pattern-grid > *,
  .timeline-grid > * {
    flex: 0 0 calc(78vw - 1.5rem);
    max-width: 300px;
    min-width: 220px;
    scroll-snap-align: start;
  }
}

/* ── Resources: all card grids ── */
@media (max-width: 767px) {
  .resources-grid,
  .resource-cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    grid-template-columns: unset !important;
  }
  .resources-grid::-webkit-scrollbar,
  .resource-cards::-webkit-scrollbar { display: none; }
  .resources-grid > *,
  .resource-cards > * {
    flex: 0 0 calc(82vw - 2rem);
    max-width: 320px;
    scroll-snap-align: start;
  }
}

/* ── Global: Any grid-stagger section with 3+ children ── */
@media (max-width: 767px) {
  /* Compact stat grids — 2×N instead of 1×N */
  .epoh-dss-progression {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3);
  }
}

/* ── Scroll hint label — consistent across all carousels ── */
@media (max-width: 767px) {
  .cases-grid::after,
  .formulation-grid::after,
  .subtypes-grid::after,
  .failure-grid::after,
  .phase-grid::after {
    content: '';
    flex: 0 0 clamp(0.5rem, 2vw, 1rem);
    /* Trailing padding item so last card doesn't touch edge */
  }
}



/* Contain carousel horizontal bleed within each section */
.section {
  overflow-x: clip;
}
/* ============================================================
   COMPACTION CSS — v13.2
   Removes dead space from section headers, reduces margin bloat
   ============================================================ */

/* Section headline — reduce bottom margin globally */
.section__headline {
  margin-bottom: var(--space-4);
}

/* Section intro — reduce bottom margin */
.section__intro {
  margin-bottom: var(--space-6);
}

/* Eyebrow — reduce bottom margin */
.eyebrow {
  margin-bottom: var(--space-3);
}

/* Doctor authority bar compact layout */
.doctor-bar {
  transition: background var(--transition-normal);
}

/* Check items — compact recognition list */
.check-item {
  line-height: 1.45;
}

/* Stat rows — compact stat display */
.stat-row {
  transition: border-color var(--transition-normal);
}

/* Case cards — tighten body text on desktop too */
.case-card__body {
  font-size: var(--font-size-small);
  line-height: 1.6;
}

/* Phase card descriptions — slightly tighter */
.phase-card__desc {
  font-size: var(--font-size-small);
  line-height: 1.6;
}

/* Trust card desc — compact */
.trust-card__desc {
  font-size: var(--font-size-small);
  line-height: 1.6;
}

/* Filtering card list items — compact */
.filtering-card .content-list li {
  font-size: var(--font-size-small);
  line-height: 1.5;
}

/* Section bordered-top — reduce default padding-block */
.section--bordered-top {
  /* Already handled in layout.css but reinforce here */
  border-top: 1px solid var(--color-border-dark);
}

/* Sections that follow hero — first one gets less top padding */
.hero + .section,
.hero + section {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* Remove excessive top margin on data-reveal elements */
[data-reveal] + [data-reveal] {
  /* handled by gap on grid, not margin */
}

/* Articles preview grid — compact header */
.section:has(.articles-preview-grid) .section__headline {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

/* Mobile: doctor bar stacks neatly */
@media (max-width: 767px) {
  .s2-grid {
    grid-template-columns: 1fr !important;
  }
  .doctor-bar > div:last-child {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-8);
  }
  .stat-row {
    padding: var(--space-2) var(--space-3);
  }
  .stat-row__num {
    min-width: 4ch;
    font-size: clamp(1rem, 4vw, 1.3rem);
  }
}


/* ============================================================
   IMAGE LIGHTBOX — tap/click to enlarge
   Pure CSS backdrop + JS to toggle. No dependencies.
   ============================================================ */

/* Lightbox overlay */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 18, 16, 0.95);
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  cursor: zoom-out;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox-overlay.is-open {
  display: flex;
}

.lightbox-overlay__img {
  max-width: 95vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-small);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  cursor: zoom-out;
}

.lightbox-overlay__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-normal);
}

.lightbox-overlay__close:hover {
  background: rgba(255,255,255,0.16);
}

.lightbox-overlay__caption {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.5);
  font-style: italic;
  text-align: center;
  max-width: 80ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Make diagram images show pointer + zoom hint */
.svg-diagram-block img,
.img-zoomable {
  cursor: zoom-in;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.svg-diagram-block img:hover,
.img-zoomable:hover {
  opacity: 0.9;
  transform: scale(1.01);
}

/* Tap hint on mobile */
@media (max-width: 767px) {
  .svg-diagram-block {
    position: relative;
  }

  .svg-diagram-block::after {
    content: 'Tap to enlarge';
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ash);
    text-align: center;
    margin-top: var(--space-2);
  }
}

/*
 * EPOH Animations — animations.css
 * data-reveal scroll system, stagger delays, header scroll transition CSS,
 * phase card micro-interactions, reduced-motion overrides.
 * Source: EPOH_STYLE_ANCHOR.md §8, Anchor 4 (calm authority — no theatrics)
 *
 * Load order: 6th (after components.css)
 * JS partner: scroll-reveal.js (S3)
 */


/* ============================================================
   SCROLL REVEAL SYSTEM
   Uses data-reveal attribute set via JS IntersectionObserver.
   Variants: fade-up (default), fade-in, slide-left, slide-right, scale-up
   ============================================================ */

/* Base state — hidden */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

/* ── fade-up (default) ── */
[data-reveal],
[data-reveal="fade-up"] {
  transform: translateY(24px);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

/* ── fade-in (no movement) ── */
[data-reveal="fade-in"] {
  transform: none;
  transition: opacity var(--transition-reveal);
}

/* ── slide-left ── */
[data-reveal="slide-left"] {
  transform: translateX(-28px);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

/* ── slide-right ── */
[data-reveal="slide-right"] {
  transform: translateX(28px);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

/* ── scale-up (phase cards, trust numbers) ── */
[data-reveal="scale-up"] {
  transform: scale(0.96);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

/* ── Revealed state (JS adds .is-revealed) ── */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}


/* ============================================================
   STAGGER DELAYS
   Apply data-delay="1" through data-delay="8" on child elements.
   JS sets these or they can be set inline via HTML.
   ============================================================ */

[data-delay="1"] { transition-delay: 0.05s; }
[data-delay="2"] { transition-delay: 0.10s; }
[data-delay="3"] { transition-delay: 0.15s; }
[data-delay="4"] { transition-delay: 0.20s; }
[data-delay="5"] { transition-delay: 0.25s; }
[data-delay="6"] { transition-delay: 0.30s; }
[data-delay="7"] { transition-delay: 0.40s; }
[data-delay="8"] { transition-delay: 0.50s; }

/* Already-revealed elements ignore the delay */
[data-reveal].is-revealed {
  transition-delay: 0s !important;
}

/*
 * NOTE: The is-revealed class overrides transition-delay above.
 * This rule intentionally uses !important to ensure a smooth
 * re-trigger doesn't leave items stuck in delayed state.
 * JS should not re-trigger once revealed.
 */


/* ============================================================
   HERO ENTRANCE SEQUENCE
   Runs once on page load (no JS required).
   Cascading delays on .hero__* children.
   ============================================================ */

.hero__eyebrow {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.1s;
}

.hero__headline {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.22s;
}

.hero__subheadline {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.36s;
}

.hero__cta {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.50s;
}

.hero__trust {
  animation: heroFadeIn 0.7s ease both;
  animation-delay: 0.70s;
}

.hero__visual {
  animation: heroFadeIn 1s ease both;
  animation-delay: 0.30s;
}

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

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================================
   EMBER GLOW PULSE
   Subtle ambient animation on hero::before glow.
   Very slow — not distracting. Stops on reduced-motion.
   ============================================================ */

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.hero::before {
  animation: glowPulse 8s ease-in-out infinite;
}


/* ============================================================
   PHASE CARD HOVER MICRO-INTERACTION
   Letter scales up slightly; handled in CSS only.
   ============================================================ */

.phase-card__letter {
  transition: transform var(--transition-normal), color var(--transition-normal);
}

.phase-card:hover .phase-card__letter {
  transform: scale(1.05);
}

.phase-card--l:hover .phase-card__letter { color: var(--color-phase-1); }
.phase-card--i:hover .phase-card__letter { color: var(--color-phase-2); }
.phase-card--f:hover .phase-card__letter { color: var(--color-phase-3); }
.phase-card--e:hover .phase-card__letter { color: var(--color-phase-4); }
.phase-card--s:hover .phase-card__letter { color: var(--color-phase-5); }


/* ============================================================
   UNDERLINE DRAW ANIMATION
   Used on section headlines — optional enhancement.
   Apply .headline--underline to activate.
   ============================================================ */

.headline--underline {
  position: relative;
  display: inline-block;
}

.headline--underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.headline--underline.is-revealed::after {
  transform: scaleX(1);
}


/* ============================================================
   COUNTER ANIMATION
   Used on trust-card__number — JS handles counting,
   CSS handles the entrance.
   ============================================================ */

.trust-card__number[data-count] {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-card__number[data-count].is-counting {
  opacity: 1;
  transform: none;
}


/* ============================================================
   SMOOTH PAGE TRANSITIONS
   Fade body in on load — prevents FOUC on dark pages.
   ============================================================ */

body {
  animation: bodyReveal 0.4s ease both;
}

@keyframes bodyReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================================
   FOCUS RING ANIMATION
   Subtle ring expansion on keyboard focus.
   ============================================================ */

@keyframes focusRing {
  0% {
    outline-offset: 0px;
    outline-color: transparent;
  }
  100% {
    outline-offset: var(--focus-ring-offset);
    outline-color: var(--focus-ring-color);
  }
}

:focus-visible {
  animation: focusRing 0.15s ease both;
}


/* ============================================================
   LOADING STATE — Skeleton shimmer
   For async content placeholders if needed.
   ============================================================ */

@keyframes shimmer {
  0% {
    background-position: -600px 0;
  }
  100% {
    background-position: 600px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-midnight) 25%,
    rgba(44, 44, 44, 0.04) 50%,
    var(--color-midnight) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-subtle);
}


/* ============================================================
   REDUCED MOTION OVERRIDES
   Respect user system preference — all animations cancelled.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Hero sequence */
  .hero__eyebrow,
  .hero__headline,
  .hero__subheadline,
  .hero__cta,
  .hero__trust,
  .hero__visual {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Glow pulse */
  .hero::before {
    animation: none;
  }

  /* Body reveal */
  body {
    animation: none;
  }

  /* Scroll reveal — show immediately */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Phase letter */
  .phase-card__letter {
    transition: none;
  }

  /* Headline underline */
  .headline--underline::after {
    transition: none;
    transform: scaleX(1);
  }

  /* Skeleton */
  .skeleton {
    animation: none;
    background: var(--color-midnight);
  }

  /* Counter */
  .trust-card__number[data-count] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * EPOH Forms — form.css
 * Intake form, contact form — dark (default) and light variants.
 * Validation states, custom select, textarea, submit button.
 * Evolved from reference site's form.css — EPOH palette and tokens.
 *
 * Load order: 7th (after animations.css)
 * JS partner: form.js (S3)
 */


/* ============================================================
   FORM WRAPPER
   ============================================================ */

.form-wrapper {
  background: var(--color-midnight);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
  padding: var(--space-10);
}

.form-wrapper--light {
  background: #fff;
  border-color: var(--color-border-light);
}

.form-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border-dark);
}

.form-wrapper--light .form-header {
  border-bottom-color: var(--color-border-light);
}

.form-header__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ember);
  display: block;
  margin-bottom: var(--space-4);
}

.form-header__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-parchment);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.form-wrapper--light .form-header__title {
  color: var(--color-text-on-light);
}

.form-header__subtitle {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: none;
  margin-bottom: 0;
}

.form-wrapper--light .form-header__subtitle {
  color: var(--color-text-muted-light);
}


/* ============================================================
   FORM LAYOUT
   ============================================================ */

.contact-form,
.intake-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Two-column row */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}


/* ============================================================
   FORM GROUP
   ============================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Label */
.form-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-parchment);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-wrapper--light .form-label {
  color: var(--color-text-on-light);
}

/* Required star */
.form-label__required {
  color: var(--color-ember);
  font-size: 0.7rem;
  line-height: 1;
}


/* ============================================================
   INPUTS, SELECTS, TEXTAREAS
   ============================================================ */

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-regular);
  color: var(--color-parchment);
  background: rgba(44, 44, 44, 0.03);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-subtle);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  line-height: var(--line-height-body);
}

/* Light variant */
.form-wrapper--light .form-input,
.form-wrapper--light .form-select,
.form-wrapper--light .form-textarea {
  color: var(--color-text-on-light);
  background: #fff;
  border-color: var(--color-border-light);
}

/* Placeholder */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-ash);
  font-weight: var(--weight-regular);
}

.form-wrapper--light .form-input::placeholder,
.form-wrapper--light .form-textarea::placeholder {
  color: var(--color-stone);
}

/* Focus state */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-ember);
  background: rgba(196, 98, 45, 0.04);
  box-shadow: 0 0 0 3px rgba(196, 98, 45, 0.12);
}

.form-wrapper--light .form-input:focus,
.form-wrapper--light .form-select:focus,
.form-wrapper--light .form-textarea:focus {
  background: rgba(196, 98, 45, 0.03);
  box-shadow: 0 0 0 3px rgba(196, 98, 45, 0.10);
}

/* Hover state (not focused) */
.form-input:not(:focus):hover,
.form-select:not(:focus):hover,
.form-textarea:not(:focus):hover {
  border-color: rgba(44, 44, 44, 0.10);
}

.form-wrapper--light .form-input:not(:focus):hover,
.form-wrapper--light .form-select:not(:focus):hover,
.form-wrapper--light .form-textarea:not(:focus):hover {
  border-color: var(--color-stone);
}


/* ============================================================
   SELECT — Custom arrow
   ============================================================ */

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6560' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-5) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.form-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C4622D' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Select options styling (limited browser support) */
.form-select option {
  background: var(--color-midnight);
  color: var(--color-parchment);
}

.form-wrapper--light .form-select option {
  background: #fff;
  color: var(--color-text-on-light);
}


/* ============================================================
   TEXTAREA
   ============================================================ */

.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--line-height-body);
}


/* ============================================================
   VALIDATION STATES
   JS adds .is-valid / .is-invalid to .form-group
   ============================================================ */

/* Invalid */
.form-group.is-invalid .form-input,
.form-group.is-invalid .form-select,
.form-group.is-invalid .form-textarea {
  border-color: rgba(196, 98, 45, 0.70);
  background: rgba(196, 98, 45, 0.05);
}

.form-group.is-invalid .form-input:focus,
.form-group.is-invalid .form-select:focus,
.form-group.is-invalid .form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(196, 98, 45, 0.15);
}

/* Valid */
.form-group.is-valid .form-input,
.form-group.is-valid .form-select,
.form-group.is-valid .form-textarea {
  border-color: rgba(44, 44, 44, 0.20);
  background: rgba(74, 103, 65, 0.04);
}

.form-group.is-valid .form-input:focus,
.form-group.is-valid .form-select:focus,
.form-group.is-valid .form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(44, 44, 44, 0.04);
}

/* Error message */
.form-error {
  display: none;
  font-size: var(--font-size-xs);
  color: var(--color-ember-light);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-normal);
  padding-top: var(--space-1);
}

.form-group.is-invalid .form-error {
  display: block;
}

/* Hint text */
.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-ash);
  line-height: var(--line-height-body);
  max-width: none;
  margin-bottom: 0;
}

.form-wrapper--light .form-hint {
  color: var(--color-stone);
}


/* ============================================================
   CHECKBOX & RADIO (custom)
   ============================================================ */

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.form-check__input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-subtle);
  background: transparent;
  margin-top: 2px;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
  position: relative;
  flex-shrink: 0;
}

.form-check__input:checked {
  background: var(--color-ember);
  border-color: var(--color-ember);
}

.form-check__input:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.form-check__input:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-ember);
  outline-offset: var(--focus-ring-offset);
}

.form-check__label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  cursor: pointer;
  max-width: none;
  margin-bottom: 0;
}

.form-wrapper--light .form-check__input {
  border-color: var(--color-border-light);
}

.form-wrapper--light .form-check__label {
  color: var(--color-text-muted-light);
}

/* Radio variant */
.form-check__input[type="radio"] {
  border-radius: 50%;
}

.form-check__input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  border: none;
}


/* ============================================================
   FORM DISCLAIMER
   ============================================================ */

.form-disclaimer {
  background: rgba(44, 44, 44, 0.03);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-subtle);
  padding: var(--space-4) var(--space-5);
}

.form-wrapper--light .form-disclaimer {
  background: var(--color-parchment);
  border-color: var(--color-border-light);
}

.form-disclaimer p {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-body);
  color: var(--color-ash);
  max-width: none;
  margin-bottom: 0;
}

.form-wrapper--light .form-disclaimer p {
  color: var(--color-stone);
}

.form-disclaimer strong {
  color: var(--color-parchment);
  font-weight: var(--weight-semibold);
}

.form-wrapper--light .form-disclaimer strong {
  color: var(--color-text-on-light);
}


/* ============================================================
   SUBMIT BUTTON
   Full-width in form context
   ============================================================ */

.form-submit {
  width: 100%;
  padding: var(--space-5) var(--space-8);
  background: var(--color-ember);
  color: var(--color-parchment);
  border: 1px solid var(--color-ember);
  border-radius: var(--radius-subtle);
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.form-submit:hover {
  background: var(--color-ember-light);
  border-color: var(--color-ember-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(196, 98, 45, 0.30);
}

.form-submit:active {
  transform: translateY(0);
  box-shadow: none;
}

.form-submit:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Loading state */
.form-submit.is-loading {
  pointer-events: none;
  opacity: 0.7;
  cursor: not-allowed;
}

.form-submit.is-loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(44, 44, 44, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Success state */
.form-submit.is-success {
  background: var(--color-sage);
  border-color: var(--color-sage);
  pointer-events: none;
}


/* ============================================================
   FORM SUCCESS MESSAGE
   Shown after successful submission (JS toggles visibility)
   ============================================================ */

.form-success {
  display: none;
  text-align: center;
  padding: var(--space-12) var(--space-8);
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.form-success.is-visible {
  display: flex;
}

.form-success__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(44, 44, 44, 0.05);
  border: 1px solid rgba(44, 44, 44, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-sage-light);
}

.form-success__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  color: var(--color-parchment);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  margin-bottom: 0;
}

.form-wrapper--light .form-success__title {
  color: var(--color-text-on-light);
}

.form-success__message {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: 40ch;
  text-align: center;
  margin-bottom: 0;
}


/* ============================================================
   INTAKE FORM — Specific fields
   Multi-step intake for condition assessment
   ============================================================ */

.intake-form__section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-dark);
  margin-bottom: var(--space-2);
}

/* HS-specific condition select options */
.form-select optgroup {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--color-ash);
  font-size: var(--font-size-xs);
}


/* ============================================================
   RESPONSIVE — FORMS
   ============================================================ */

@media (max-width: 767px) {
  .form-wrapper {
    padding: var(--space-8) var(--space-6);
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 479px) {
  .form-wrapper {
    padding: var(--space-6) var(--space-5);
  }

  .form-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: var(--font-size-small);
    padding: var(--space-3) var(--space-4);
  }

  .form-submit {
    padding: var(--space-4) var(--space-6);
  }
}


/* ============================================================
   REDUCED MOTION — FORMS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .form-input,
  .form-select,
  .form-textarea,
  .form-submit,
  .form-check__input {
    transition: none;
  }

  .form-submit.is-loading::after {
    animation: none;
    border-top-color: rgba(44, 44, 44, 0.25);
  }
}