/*
Theme Name: Max Snider, RD
Theme URI: https://maxsniderrd.com
Author: Max Snider, RD
Author URI: https://maxsniderrd.com
Description: Custom theme for Max Snider, RD — registered dietitian and weight-loss coaching practice based in Sudbury, Ontario, serving all of Ontario virtually. Story-driven, warm-editorial design with elegant scroll animations.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: maxsniderrd
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  /* Color — warm premium editorial (terracotta / olive / cream) */
  --color-primary: #A8541F;        /* clay terracotta — CTAs, brand accents */
  --color-primary-dark: #8A4419;
  --color-primary-light: #C97A46;
  --color-secondary: #6E7A4F;      /* olive/sage — secondary accents */
  --color-accent: #3F5D3A;         /* deep forest green — success, highlights */
  --color-gold: #C9902A;           /* warm gold — small accents, badges */

  --color-background: #FBF6EF;     /* warm cream page background */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F3EBDF;    /* deeper cream for alternating sections */

  --color-foreground: #2B2420;     /* warm near-black text */
  --color-muted-foreground: #6B6259;
  --color-border: #E7DCC9;

  --color-ink: #241E1A;            /* darkest neutral — footer, dark CTA sections */
  --color-ink-deep: #1C1712;       /* darkest end of dark-section gradients */

  --color-on-primary: #FFFFFF;
  --color-destructive: #B3261E;

  /* Typography */
  --font-heading: 'Lora', Georgia, serif;
  --font-body: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.75rem;

  /* Spacing scale (8px rhythm) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Layout */
  --container-max: 1200px;
  --header-h: 81px; /* actual rendered height of .site-header, used to size full-viewport sections */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  --shadow-sm: 0 2px 8px rgba(43, 36, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(43, 36, 32, 0.08);
  --shadow-lg: 0 20px 48px rgba(43, 36, 32, 0.12);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

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

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--color-foreground);
}
h1 { font-size: clamp(2.25rem, 5vw, var(--fs-5xl)); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 4vw, var(--fs-4xl)); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.375rem, 2.5vw, var(--fs-2xl)); }
h4 { font-size: var(--fs-xl); font-weight: 500; }

p { margin: 0 0 var(--space-2); max-width: 68ch; }
.lede { font-size: var(--fs-lg); color: var(--color-muted-foreground); }

ul, ol { padding-left: 1.25em; }

/* Accessibility: visible focus ring everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-4); } }

.section { padding-block: var(--space-7); }
.section--alt { background: var(--color-surface-alt); }
.section--spacious { padding-block: var(--space-8); }
/* Mobile gets its own pacing, not the desktop rhythm compressed — shorter
   screens don't need (or want) the same scroll distance between sections. */
@media (max-width: 640px) {
  .section { padding-block: var(--space-5); }
  .section--spacious { padding-block: var(--space-6); }
}
.section--brand {
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary-dark));
  color: #fff;
}
.section--brand h2, .section--brand h3, .section--brand p { color: #fff; }

/* The eyebrow's underline bar is a small recurring signature device — the
   same accent mark under every section label site-wide, not just a label.
   Positioned absolutely (not as a flex child) so its width is never at the
   mercy of flex-basis sizing rules. */
.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  padding-bottom: 0.7em;
}
.eyebrow svg { width: 16px; height: 16px; flex-shrink: 0; }
.eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--color-gold);
  border-radius: 2px;
}
.section-head--center .eyebrow::after { left: 50%; transform: translateX(-50%); }

.section-head { max-width: 640px; margin-bottom: var(--space-5); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid {
  display: grid;
  gap: var(--space-3);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 56px;
  padding: 1em 1.85em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  touch-action: manipulation;
}
.btn svg { width: 18px; height: 18px; transition: transform var(--duration-base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:not(.btn--ghost):hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }

/* 1. Solid — primary call to action */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); }

/* 2. Tinted — secondary call to action, light fill + soft border, same hue as primary */
.btn--outline {
  background: rgba(168, 84, 31, 0.08);
  border-color: rgba(168, 84, 31, 0.22);
  color: var(--color-primary);
}
.btn--outline:hover { background: rgba(168, 84, 31, 0.14); border-color: rgba(168, 84, 31, 0.38); }

/* 3. White — max-contrast option for use on colored/photo backgrounds */
.btn--on-brand {
  background: #fff;
  color: var(--color-primary-dark);
}
.btn--on-brand:hover { background: var(--color-surface-alt); }

/* Tinted variant tuned for dark/photo backgrounds (muted fill, light border) */
.btn--ghost-on-brand {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn--ghost-on-brand:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }

/* 4. Ghost — text-only, lowest-emphasis action (still meets the 44px tap-target minimum via padding, just with no visible chrome) */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary);
  padding: 0.6em 0.35em;
  min-height: 44px;
}
.btn--ghost:hover { color: var(--color-primary-dark); }
.btn--ghost:active { transform: none; }

.btn--block { width: 100%; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: rgba(63, 93, 58, 0.1);
  color: var(--color-accent);
}
.badge--gold { background: rgba(201, 144, 42, 0.14); color: #8A6110; }
.badge--soon { background: rgba(107, 98, 89, 0.12); color: var(--color-muted-foreground); }

/* Reserve space for elements that animate in, avoid layout shift/no-JS invisibility */
[data-animate] { opacity: 1; }
.js [data-animate] { opacity: 0; }
.js [data-animate].is-visible,
.no-js [data-animate] { opacity: 1; }

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 246, 239, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  gap: var(--space-3);
}
.site-branding { display: flex; flex-direction: column; line-height: 1.1; }
.site-branding__name {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-foreground);
}
.site-branding__tagline {
  font-size: var(--fs-xs);
  color: var(--color-muted-foreground);
  letter-spacing: 0.04em;
}

.primary-nav__list {
  list-style: none;
  display: none;
  margin: 0; padding: 0;
  align-items: center;
  gap: var(--space-4);
}
.primary-nav__list a {
  font-weight: 500;
  font-size: var(--fs-sm);
  padding: 0.5em 0;
  position: relative;
}
.primary-nav__list a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-primary);
  transition: width var(--duration-base) var(--ease-out);
}
.primary-nav__list a:hover::after,
.primary-nav__list a[aria-current="page"]::after { width: 100%; }

.header-cta { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.menu-toggle svg { width: 22px; height: 22px; }

@media (min-width: 960px) {
  .primary-nav__list { display: flex; }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-background);
  z-index: 200;
  padding: var(--space-3);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__list { list-style: none; padding: 0; margin: var(--space-5) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-nav__list a { font-family: var(--font-heading); font-size: var(--fs-2xl); }
.mobile-nav__list .megamenu-trigger { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 700; padding: 0; }
.mobile-nav__close { margin-left: auto; display: flex; }

/* ==========================================================================
   Programs mega-menu — a full-width bar under the header (not a floating
   box), airy spacing, outlined icon circles, thin rule above each column
   label. Click-to-open, not hover-only, so it works the same on touch,
   mouse, and keyboard.
   ========================================================================== */
.megamenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: inherit;
  cursor: pointer;
  position: relative;
  padding: 0.5em 0;
}
.megamenu-trigger::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-primary);
  transition: width var(--duration-base) var(--ease-out);
}
.megamenu-trigger:hover::after,
.megamenu-trigger[aria-expanded="true"]::after { width: 100%; }
.megamenu-trigger svg { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-out); }
.megamenu-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.megamenu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100vw;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  z-index: 150;
  text-align: left;
}
.megamenu[hidden] { display: none; }
.megamenu__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding-block: var(--space-5);
}
.megamenu__section--programs { flex: 0 0 300px; }
.megamenu__section--conditions { flex: 1 1 auto; min-width: 0; }
.megamenu__conditions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
}
.megamenu__col-label {
  display: block;
  border-top: 2px solid var(--color-border);
  padding-top: 0.85em;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--color-muted-foreground);
  margin-bottom: var(--space-3);
}
.megamenu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.megamenu__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  padding: 0.55em 0;
}
.megamenu__item:hover .megamenu__item-title { text-decoration: underline; text-underline-offset: 3px; }
.megamenu__item:hover .megamenu__item-icon { border-color: var(--color-primary); color: var(--color-primary); }
.megamenu__item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted-foreground);
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.megamenu__item-icon svg { width: 18px; height: 18px; }
.megamenu__item-text { display: flex; flex-direction: column; min-width: 0; padding-top: 0.3em; }
.megamenu__item-title { font-weight: 600; font-size: var(--fs-sm); color: var(--color-foreground); }
.megamenu__item-title .badge { margin-left: 0.5em; vertical-align: middle; }
.megamenu__item-subtitle { font-size: var(--fs-xs); color: var(--color-muted-foreground); }
.megamenu__cta {
  flex: 0 0 220px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.megamenu__cta-title { font-weight: 700; font-size: var(--fs-sm); margin: 0 0 0.3em; }
.megamenu__cta-text { font-size: var(--fs-xs); color: var(--color-muted-foreground); margin: 0; }
.megamenu__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--space-2);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-primary);
}
.megamenu__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.megamenu__cta-arrow svg { width: 14px; height: 14px; }
.megamenu__cta-link:hover .megamenu__cta-arrow { background: var(--color-primary); color: #fff; }

/* Inside the mobile off-canvas panel the mega-menu is a static stacked
   block under its trigger, not a floating full-width bar. */
.mobile-nav .megamenu {
  position: static;
  width: 100%;
  box-shadow: none;
  border: none;
}
.mobile-nav .megamenu__inner { flex-direction: column; padding-block: 0; padding-inline: 0; gap: var(--space-4); }
.mobile-nav .megamenu__section--programs,
.mobile-nav .megamenu__section--conditions,
.mobile-nav .megamenu__cta { flex: 1 1 auto; width: 100%; }
.mobile-nav .megamenu__conditions-grid { grid-template-columns: 1fr; }
.mobile-nav .megamenu__item-title,
.mobile-nav .megamenu__col-label { font-family: var(--font-body); }

/* ==========================================================================
   Hero — full-bleed, immersive photo with overlaid content
   ========================================================================== */
.hero-full {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: flex-start;
  padding-top: 16vh;
  overflow: hidden;
  color: #fff;
}
/* On a short phone screen, 16vh of empty space above the headline pushes
   the actual message further below the fold than intended on desktop —
   a deliberately smaller offset here, not the desktop hero compressed. */
@media (max-width: 640px) {
  .hero-full { padding-top: 9vh; }
}
.hero-full__media { position: absolute; inset: 0; z-index: 0; }
.hero-full__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-full__scrim {
  position: absolute;
  inset: 0;
  /* Two layers: a left-to-right darken so the text column (which always sits
     left, max-width 700px) has reliable contrast no matter how bright that
     part of the photo is, plus the original top/bottom darkening for the
     eyebrow and the badge bar. */
  background:
    linear-gradient(90deg, rgba(20, 16, 14, 0.72) 0%, rgba(20, 16, 14, 0.5) 45%, rgba(20, 16, 14, 0.08) 80%),
    linear-gradient(180deg, rgba(30, 24, 20, 0.62) 0%, rgba(30, 24, 20, 0.38) 32%, rgba(30, 24, 20, 0.3) 55%, rgba(30, 24, 20, 0.55) 100%);
}
.hero-full__content {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero-full__text { max-width: 700px; }
.hero-full__text h1 { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.hero-full__text .lede { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.eyebrow--on-image { color: var(--color-gold); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }

.hero-full__fineprint {
  margin-top: 0.85em;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.hero-full__badges {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(28, 23, 18, 0.9);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-4);
  padding-bottom: max(var(--space-4), calc(env(safe-area-inset-bottom) + var(--space-3)));
}
.hero-full__badges-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  text-align: center;
}
.hero-full__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-base);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.hero-full__badge svg { width: 20px; height: 20px; color: var(--color-gold); flex-shrink: 0; }
.hero-full__badge-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.2); }
@media (max-width: 640px) {
  .hero-full__badge-divider { display: none; }
  .hero-full__badges-inner { gap: var(--space-3) var(--space-3); }
  .hero-full__badge { font-size: var(--fs-sm); }
}


.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* ==========================================================================
   GLP-1 showcase — bold color-blocked feature rows
   ========================================================================== */
.glp1-showcase__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.glp1-showcase__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  color: #fff;
}
.glp1-showcase__row--1 { background: var(--color-accent); }
.glp1-showcase__row--2 { background: var(--color-secondary); }
.glp1-showcase__row--3 { background: var(--color-accent); }
.glp1-showcase__row--4 { background: var(--color-primary-dark); }
.glp1-showcase__row-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.glp1-showcase__row-icon svg { width: 28px; height: 28px; color: #fff; }
.glp1-showcase__row-title {
  flex: 0 1 220px;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.glp1-showcase__row-text { flex: 1 1 260px; min-width: 0; margin: 0; color: rgba(255, 255, 255, 0.9); max-width: 46ch; }
@media (max-width: 800px) {
  .glp1-showcase__row { flex-wrap: wrap; }
  .glp1-showcase__row-title,
  .glp1-showcase__row-text { flex-basis: 100%; }
}

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
  font-size: var(--fs-sm);
}
.trust-bar__item { display: flex; align-items: center; gap: 0.5em; }
.trust-bar__item svg { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }

/* Free-consult ad landing page — checklist of real concerns, each a link to
   its condition page. */
.concern-check {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.9em 1.1em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-foreground);
  font-weight: 600;
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.concern-check:hover { border-color: var(--color-primary); background: var(--color-surface-alt); }
.concern-check svg { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; }

/* ==========================================================================
   Condition landing pages (Programs mega-menu "areas of support")
   ========================================================================== */
.condition-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--color-accent);
  max-width: 44ch;
  margin-inline: auto;
}
.condition-benefits {
  list-style: none;
  padding: 0;
  margin: var(--space-5) auto 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2) var(--space-4);
}
.condition-benefits li { display: flex; gap: 0.6em; align-items: flex-start; font-size: var(--fs-base); }
.condition-benefits svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }

/* ==========================================================================
   Story section
   ========================================================================== */
.story-split {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) { .story-split { grid-template-columns: 0.9fr 1.1fr; } }
.story-split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }

/* ==========================================================================
   Story pin — scroll-pinned, scrubbed transition from hero into My Story
   (mirrors the Living with IBD pin/scrub pattern: the section locks in
   place while a scroll-driven timeline morphs the image treatment and
   swaps which phrase is underlined in the heading)
   ========================================================================== */
.story-pin-wrapper { background: var(--color-background); position: relative; z-index: 10; }
.story-pin {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  padding-block: var(--space-6);
}
@media (min-width: 900px) { .story-pin { grid-template-columns: 0.9fr 1.1fr; } }
.story-pin__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-alt);
}
.story-pin__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Starting ("before") treatment: muted and slightly dim. The pin timeline
     animates this toward full color as the underline swaps to "Registered
     Dietitian" — standing in for the transformation without fabricating a
     second photo of a different-looking "before" body. */
  filter: grayscale(0.85) brightness(0.82) contrast(0.95);
}
.story-pin__ul { position: relative; display: inline-block; color: var(--color-primary); font-weight: 700; }
.story-pin__ul-bar {
  position: absolute;
  left: 0;
  bottom: -0.06em;
  height: 0.09em;
  width: 0%;
  background: var(--color-gold);
  border-radius: 2px;
}
.story-pin__ul--1 .story-pin__ul-bar { width: 100%; }

.timeline { position: relative; padding-left: var(--space-4); counter-reset: timeline-count; }
.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--color-border);
}
.timeline__item { position: relative; padding-bottom: var(--space-4); counter-increment: timeline-count; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-4) + 2px);
  top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-background);
  box-shadow: 0 0 0 2px var(--color-primary);
}
/* Faint editorial chapter numeral — a quiet recurring signature device
   behind each timeline entry, not just a bulleted list. */
.timeline__item::after {
  content: counter(timeline-count, decimal-leading-zero);
  position: absolute;
  right: 0;
  top: -0.2em;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  color: rgba(168, 84, 31, 0.08);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.timeline__year, .timeline__item h3, .timeline__item p { position: relative; z-index: 1; }
.timeline__year { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); font-weight: 700; }

/* ==========================================================================
   Program cards
   ========================================================================== */
.program-card { display: flex; flex-direction: column; height: 100%; }
.program-card__header { margin-bottom: var(--space-2); }
.program-card__best-for { font-size: var(--fs-sm); color: var(--color-muted-foreground); margin: 0.4em 0 0; }
.program-card__best-for strong { color: var(--color-foreground); }
.program-card__price { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--color-primary); margin: var(--space-1) 0; }
.program-card__price span { font-size: var(--fs-sm); color: var(--color-muted-foreground); font-family: var(--font-body); }
.program-card__list { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-3); flex-grow: 1; }
.program-card__list li { display: flex; gap: 0.6em; align-items: flex-start; margin-bottom: 0.6em; font-size: var(--fs-sm); }
.program-card__list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }
.program-card--featured { border-color: var(--color-primary); border-width: 2px; position: relative; }
.program-card--featured::before {
  content: 'Most Popular';
  position: absolute; top: -14px; left: var(--space-3);
  background: var(--color-primary); color: #fff;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 0.3em 0.9em; border-radius: 999px;
}

/* ==========================================================================
   Resources page
   ========================================================================== */
.resource-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.resource-filters__tab {
  min-height: 44px;
  padding: 0.6em 1.4em;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted-foreground);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.resource-filters__tab:hover { border-color: var(--color-primary-light); }
.resource-filters__tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  background: color-mix(in srgb, var(--accent, var(--color-primary)) 12%, var(--color-surface));
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.resource-card:hover { box-shadow: none; }
.resource-card__icon { width: 40px; height: 40px; color: var(--accent, var(--color-primary)); }
.resource-card__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.resource-card__excerpt { flex-grow: 1; font-size: var(--fs-sm); color: var(--color-muted-foreground); }
.resource-card__excerpt p { margin: 0; }
.resource-card[hidden] { display: none; }

/* ==========================================================================
   Book a Call landing page — VSL placeholder + embedded scheduler
   ========================================================================== */
.vsl-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-ink), #3a2f26);
  box-shadow: var(--shadow-lg);
}
.vsl-frame__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.65);
}
.vsl-frame__icon { width: 56px; height: 56px; opacity: 0.6; }
.vsl-frame__placeholder p { margin: 0; font-weight: 600; }

.booking-embed {
  display: flex;
  justify-content: center;
}
.booking-embed--cta {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4em;
  padding: var(--space-6) var(--space-4);
  width: 100%;
}
.booking-embed__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(168, 84, 31, 0.1);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.booking-embed__icon svg { width: 28px; height: 28px; }

/* Practice Better's own inline booking widget — a script that injects an
   iframe into this div (not a raw iframe pointed at the app URL, which
   Practice Better blocks with frame-ancestors). Class name and the iframe
   positioning rule below are required as-is by their widget script. */
.better-inline-booking-widget {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 550px;
  height: 800px;
  border-radius: var(--radius-lg);
}
.better-inline-booking-widget iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 640px) {
  .better-inline-booking-widget { height: 700px; }
}
.booking-embed--cta h3 { margin-bottom: 0; }
.booking-embed--cta p { color: var(--color-muted-foreground); max-width: 42ch; }
.booking-embed--cta .btn { margin-top: var(--space-3); }

/* ==========================================================================
   How it works — media + tabbed steps showcase
   ========================================================================== */
.steps-showcase {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .steps-showcase { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: center; }
}

.steps-showcase__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 78vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-alt);
}
.steps-showcase__playpause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-foreground);
  cursor: pointer;
  margin-bottom: var(--space-3);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.steps-showcase__playpause svg { width: 18px; height: 18px; }
.steps-showcase__playpause:hover { border-color: var(--color-primary-light); }
.steps-showcase__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.steps-showcase__image.is-active { opacity: 1; }

.steps-showcase__tabs {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.steps-showcase__tab {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6em;
  min-height: 44px;
  background: none;
  border: none;
  padding: 0 0 0.7em;
  cursor: pointer;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--color-border);
  transition: color var(--duration-base) var(--ease-out);
}
.steps-showcase__tab::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--color-border);
  transition: background-color var(--duration-base) var(--ease-out);
}
.steps-showcase__tab:hover { color: var(--color-primary-light); }
.steps-showcase__tab.is-active { color: var(--color-primary); }
.steps-showcase__tab.is-active::after { background: var(--color-primary); }

.steps-showcase__item { display: none; }
.steps-showcase__item.is-active { display: block; animation: steps-fade-in var(--duration-slow) var(--ease-out); }
.steps-showcase__item h3 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.75rem, 3vw, var(--fs-3xl));
  font-weight: 700;
}
.steps-showcase__item h3 em { color: var(--color-primary); font-style: italic; }

@keyframes steps-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .steps-showcase__item.is-active { animation: none; }
}

/* ==========================================================================
   Program showcase (homepage) — one card per program, each with its own
   accent color set via the --accent custom property.
   ========================================================================== */
.program-showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.program-showcase-head h2 { margin-bottom: 0; }
.program-showcase-head .eyebrow { margin-bottom: var(--space-2); }

.program-showcase {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.program-showcase__card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--accent) 10%, var(--color-surface));
  border: none;
  border-radius: var(--radius-lg);
}
.program-showcase__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  margin-bottom: var(--space-3);
}
.program-showcase__icon svg { width: 26px; height: 26px; }
.program-showcase__card h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.program-showcase__tags { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: var(--space-3); }
.program-showcase__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.3em 0.8em;
}
.program-showcase__card p { color: var(--color-muted-foreground); margin-bottom: var(--space-4); flex-grow: 1; }
.program-showcase__best-for {
  font-size: var(--fs-sm);
  flex-grow: 0 !important;
  margin-top: -0.75rem !important;
}
.program-showcase__best-for strong { color: var(--color-foreground); }
.program-showcase__cta {
  background: var(--accent);
  color: #fff;
}
.program-showcase__cta:hover { filter: brightness(0.92); }
.program-showcase__footnote {
  text-align: center;
  margin-top: var(--space-5);
  color: var(--color-muted-foreground);
}

/* ==========================================================================
   Blog cards
   ========================================================================== */
.post-card__media { aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__meta { font-size: var(--fs-xs); color: var(--color-muted-foreground); text-transform: uppercase; letter-spacing: 0.06em; }

/* ==========================================================================
   Blog showcase (homepage carousel)
   ========================================================================== */
.blog-showcase__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}
.blog-showcase__controls { display: flex; align-items: center; gap: var(--space-2); }
.blog-showcase__arrows { display: flex; gap: 0.5rem; }
.blog-showcase__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1.5px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-foreground);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.blog-showcase__arrow svg { width: 20px; height: 20px; }
.blog-showcase__arrow:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.blog-showcase__arrow:active { transform: scale(0.94); }
.blog-showcase__arrow:disabled { opacity: 0.35; cursor: default; }
.blog-showcase__arrow:disabled:hover { background: var(--color-surface); border-color: var(--color-border); color: var(--color-foreground); }

.blog-showcase__track {
	display: flex;
	gap: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--space-2);
	scrollbar-width: none;
	/* Break out of the centered .container so the track runs to the actual
	   right edge of the viewport on wide screens, instead of stopping dead
	   at max-width with empty space beside it. The left edge still lines up
	   with the container/heading above it. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding-left: max(var(--space-3), calc((100vw - var(--container-max)) / 2 + var(--space-3)));
	padding-right: var(--space-3);
}
.blog-showcase__track::-webkit-scrollbar { display: none; }

.blog-card {
	flex: 0 0 auto;
	width: min(340px, 82vw);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-alt); }
.blog-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out);
}
.blog-card:hover .blog-card__media img { transform: scale(1.06); }
.blog-card__media-fallback {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
}
.blog-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.6rem; }
.blog-card__tag { align-self: flex-start; }
.blog-card__title { font-size: var(--fs-lg); margin: 0; }
.blog-card__date { font-size: var(--fs-xs); color: var(--color-muted-foreground); text-transform: uppercase; letter-spacing: 0.06em; }

@media (max-width: 640px) {
	.blog-showcase__head { align-items: flex-start; }
	.blog-showcase__controls { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   Topic carousel (blog page — "Explore by health topic")
   ========================================================================== */
.topic-carousel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.topic-carousel__view-all { font-weight: 600; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-arrow svg { width: 16px; height: 16px; flex-shrink: 0; }

.topic-carousel__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  margin-inline: calc(-1 * var(--space-3));
  padding-inline: var(--space-3);
  scrollbar-width: none;
}
.topic-carousel__track::-webkit-scrollbar { display: none; }

.topic-card {
  flex: 0 0 auto;
  width: min(180px, 38vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.topic-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.topic-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.topic-card:hover .topic-card__media img { transform: scale(1.06); }
.topic-card__tint { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.32; }
.topic-card__label { font-weight: 700; color: var(--color-foreground); }

.topic-carousel__controls { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); }
.topic-carousel__dots { display: flex; gap: 0.4rem; }
.topic-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); border: none; padding: 0; cursor: pointer; }
.topic-carousel__dot.is-active { background: var(--color-primary); width: 20px; border-radius: 4px; transition: width var(--duration-base) var(--ease-out); }
.topic-carousel__arrows { display: flex; gap: 0.5rem; }

/* ==========================================================================
   Article grid (blog page — full article list)
   ========================================================================== */
.article-grid-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.article-grid-head h2 { margin: 0; white-space: nowrap; }
.article-grid-head__rule { flex: 1; height: 3px; background: var(--color-gold); border-radius: 2px; }

.grid--article { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.article-card { display: block; }
.article-card__media { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-2); background: var(--color-surface-alt); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__title {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 800;
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin: 0 0 0.4em;
}
.article-card__meta { font-size: var(--fs-sm); color: var(--color-muted-foreground); }

/* ==========================================================================
   Fee schedule (Programs page — Pay-As-You-Go pricing table)
   ========================================================================== */
.fee-schedule {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.fee-schedule__row {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.6fr;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.fee-schedule__row:last-child { border-bottom: none; }
.fee-schedule__row--head {
  background: var(--color-surface-alt);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-muted-foreground);
}
.fee-schedule__service { font-weight: 600; }
.fee-schedule__duration { color: var(--color-muted-foreground); font-size: var(--fs-sm); }
.fee-schedule__price { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); font-size: var(--fs-lg); text-align: right; }
@media (max-width: 640px) {
  .fee-schedule__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "service price" "duration price";
  }
  .fee-schedule__row--head { display: none; }
  .fee-schedule__service { grid-area: service; }
  .fee-schedule__duration { grid-area: duration; }
  .fee-schedule__price { grid-area: price; align-self: center; }
}

/* ==========================================================================
   FAQ accordion (homepage & Programs page)
   ========================================================================== */
.faq-layout { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
  .faq-layout { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-6); align-items: start; }
}
.faq-layout__intro h2 { margin-bottom: var(--space-3); }

.faq-accordion { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-3) 0;
  min-height: 44px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--color-foreground);
}
.faq-item__question svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform var(--duration-base) var(--ease-out);
}
.faq-item__question[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-item__answer { padding-bottom: var(--space-3); max-width: 60ch; }
.faq-item__answer p { color: var(--color-muted-foreground); margin: 0; }

/* Still used directly by 404.php's simple two-button recovery layout. */
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }

/* ==========================================================================
   CTA showcase — full-bleed dark closer with a lagging cursor-light effect.
   Spans the full viewport width (same as the sections above and below it)
   and sits with zero gap directly above the footer, sharing its exact dark
   color at the seam so the two read as one continuous dark region.
   ========================================================================== */
.cta-showcase {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-ink-deep) 0%, var(--color-ink) 100%);
  text-align: center;
  padding-block: var(--space-7);
}
.cta-showcase__glow {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  margin-left: -70px;
  margin-top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 144, 42, 0.32) 0%, rgba(168, 84, 31, 0.16) 45%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
  will-change: transform;
}
.cta-showcase__glow.is-active { opacity: 1; }
@media (max-width: 640px) {
  .cta-showcase__glow { display: none; } /* no hover/mouse on touch devices */
}
.cta-showcase__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}
.cta-showcase__content h2 { color: #fff; }
.cta-showcase__content p { color: rgba(255, 255, 255, 0.82); margin-inline: auto; }
.cta-showcase__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }

/* ==========================================================================
   Quiz
   ========================================================================== */
.quiz { max-width: 720px; margin-inline: auto; }
.quiz__progress { height: 6px; background: var(--color-border); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-4); }
.quiz__progress-bar { height: 100%; background: var(--color-primary); width: 0%; transition: width var(--duration-slow) var(--ease-out); }
.quiz__step { display: none; }
.quiz__step.is-active { display: block; }
.quiz__options { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.quiz__option {
  display: flex; align-items: center; gap: var(--space-2);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 500;
  min-height: 56px;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.quiz__option:hover { border-color: var(--color-primary-light); transform: translateY(-2px); }
.quiz__option.is-selected { border-color: var(--color-primary); background: rgba(168, 84, 31, 0.06); }
.quiz__nav { display: flex; justify-content: space-between; margin-top: var(--space-4); }
.quiz__result { text-align: center; }
.quiz__result-icon { width: 64px; height: 64px; margin-inline: auto var(--space-2); color: var(--color-primary); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-field { margin-bottom: var(--space-3); }
.form-field label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 0.4em; }
.form-field .required { color: var(--color-destructive); }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.8em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  min-height: 48px;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--color-primary); }
.form-hint { font-size: var(--fs-xs); color: var(--color-muted-foreground); margin-top: 0.35em; }
.form-status { padding: var(--space-2); border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.form-status--success { background: rgba(63,93,58,0.1); color: var(--color-accent); }
.form-status--error { background: rgba(179,38,30,0.1); color: var(--color-destructive); }

/* ==========================================================================
   Newsletter signup (ConvertKit/Kit) — footer (dark) + end-of-post (card)
   ========================================================================== */
.newsletter-signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}
.newsletter-signup__heading { margin: 0 0 0.2em; }
.newsletter-signup__lede { margin: 0; }
.newsletter-signup__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  flex: 0 1 380px;
  position: relative;
}
.newsletter-signup__form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.8em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-foreground);
}
.newsletter-signup__status {
  flex-basis: 100%;
}
.newsletter-signup__status .form-status { margin: 0.6em 0 0; }

.newsletter-signup--card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.newsletter-signup--dark {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.newsletter-signup--dark .newsletter-signup__heading { color: #fff; }
.newsletter-signup--dark .newsletter-signup__lede { color: #C9BFAF; }
.newsletter-signup--dark .newsletter-signup__form input[type="email"] { border-color: transparent; }

@media (max-width: 640px) {
  .newsletter-signup__form { flex-basis: 100%; }
  .newsletter-signup__form button { flex: 1 1 auto; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-ink); color: #E8DFD3; padding-block: var(--space-6) var(--space-4); }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--space-5); }
.site-footer__heading { font-family: var(--font-heading); color: #fff; font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.site-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6em; font-size: var(--fs-sm); color: #C9BFAF; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-xs); color: #9C927F; }

/* ==========================================================================
   Utility & responsive tweaks
   ========================================================================== */
.text-center { text-align: center; }
/* p has a max-width (68ch) for readability, so text-align alone isn't enough
   to center it as a block — without this, a centered paragraph narrower than
   its container just sits flush left with centered text inside, which reads
   as "not actually centered." Scoped to <p> only so .text-center on other
   elements (full-width sections, wrappers) is unaffected. */
p.text-center { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.disclosure-note { font-size: var(--fs-xs); color: var(--color-muted-foreground); font-style: italic; }

/* WordPress core alignment classes used inside post content */
.alignwide { max-width: 1000px; margin-inline: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption-text { font-size: var(--fs-xs); color: var(--color-muted-foreground); }

/* Entry content (blog posts) readability */
.entry-content { max-width: 720px; margin-inline: auto; font-size: var(--fs-lg); }
.entry-content h2, .entry-content h3 { margin-top: var(--space-5); }
.entry-content img { border-radius: var(--radius-md); }
.entry-content blockquote {
  border-left: 4px solid var(--color-primary);
  margin: var(--space-3) 0;
  padding-left: var(--space-3);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-xl);
}