@charset "UTF-8";
/* ==========================================================================
   Karma Yoga by Ritika Khandelwal — Design System
   assets/css/style.css

   Hand-written. No frameworks, no build step, no preprocessor.
   Mobile-first. Every component the site needs lives in this one file.

   HOW TO USE THIS FILE
   -------------------
   1.  Never invent new class names in a page. If a component is missing,
       add it HERE first, then document it in STYLEGUIDE.html.
   2.  Never hard-code a colour, radius, shadow or spacing value in a page.
       Use the custom properties in section 1.
   3.  Open /STYLEGUIDE.html to see every class in this file rendered with
       real content. That page is the contract.

   TABLE OF CONTENTS
   -----------------
    1. Design tokens (custom properties)
    2. Modern reset
    3. Base elements & typography
    4. Accessibility helpers (skip link, focus, reduced motion)
    5. Layout: container, section, grid
    6. Header, primary nav, dropdowns
    7. Mobile nav drawer + hamburger
    8. Hero
    9. Section headers & eyebrows
   10. Buttons
   11. Badges, pills, tags, star rating
   12. Media boxes & image placeholder (.img-ph)
   13. Cards (class / condition / blog / testimonial / stat / teacher)
   14. Filterable card grid + filter pills
   15. Accordion (details/summary) + FAQ block
   16. Tabs
   17. Timetable
   18. Pricing table + pricing cards
   19. Testimonial slider
   20. Gallery grid + lightbox
   21. Forms
   22. Breadcrumbs
   23. Floating WhatsApp button
   24. Back-to-top button
   25. Footer + NAP
   26. Callouts (info / tip / warning / medical disclaimer)
   27. CTA band
   28. Stat counter row
   29. Prose / article typography
   30. Author byline
   31. Related posts strip
   32. Pagination
   33. 404 layout
   34. Scroll reveal
   35. Utilities
   36. Print
   ========================================================================== */

/* Google Fonts — Martel (warm humanist serif, Latin + Devanagari) for
   headings, Hind (clean humanist sans, Latin + Devanagari) for body.
   Both are Indian type-foundry faces, which is exactly the
   "Indian-contemporary, not Western-boho" register the brief asks for.
   `subset=latin,latin-ext,devanagari` is required — Hindi copy appears on the
   health pages (e.g. "कमर दर्द के लिए योग").
   NOTE: the same families are ALSO preconnected + <link>ed in
   _partials/head-template.html. Keep both in sync. */
@import url('https://fonts.googleapis.com/css2?family=Martel:wght@400;600;700;800&family=Hind:wght@300;400;500;600;700&display=swap&subset=latin,latin-ext,devanagari');

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Brand: deep forest / sage green -------------------------------- */
  --color-primary-950: #0E1F19;
  --color-primary-900: #12261F; /* darkest — footer ground */
  --color-primary-800: #1B3A2F; /* header on scroll, dark sections */
  --color-primary-700: #24503F;
  --color-primary-600: #2F6650; /* MAIN BRAND GREEN — white text passes AA (6.7:1) */
  --color-primary-500: #3E8168; /* sage mid — large text / icons only */
  --color-primary-400: #63A088;
  --color-primary-300: #8FB3A2;
  --color-primary-200: #BCD4C6;
  --color-primary-100: #DCE8E1;
  --color-primary-50:  #EEF4F0;

  /* ---- Accent: warm terracotta / saffron ------------------------------ */
  --color-accent-900: #6E2F11;
  --color-accent-800: #8A3D16;
  --color-accent-700: #A34A1E; /* ACCENT TEXT + BUTTON FILL — AA on cream (5.6:1), white on it 5.9:1 */
  --color-accent-600: #B45725;
  --color-accent-500: #C2622D; /* decorative fills, large text, icon strokes */
  --color-accent-400: #D98A50;
  --color-accent-300: #E8A66F;
  --color-accent-200: #F2C79E;
  --color-accent-100: #F8E2CD;
  --color-accent-50:  #FAEDE1;

  /* ---- Saffron/turmeric highlight — star glyphs, badge fills ----------
     #A9720A is a deliberately darkened turmeric: 3.9:1 on cream and 4.1:1
     on white, comfortably past the 3:1 WCAG requirement for graphical
     objects. Star ratings ALWAYS carry a text alternative as well
     (aria-label + the numeric score), so they are never colour-only.
     On dark grounds use --color-saffron-on-dark (6.6:1 on primary-800). */
  --color-saffron: #A9720A;
  --color-saffron-on-dark: #E8B54A;
  --color-saffron-soft: #F4D89A;

  /* ---- Cream ground --------------------------------------------------- */
  --color-cream: #FBF7F0;      /* page background */
  --color-cream-200: #F5EEE3;  /* tinted section */
  --color-cream-300: #EDE3D4;  /* hairlines on cream */
  --color-surface: #FFFFFF;    /* cards */
  --color-surface-2: #FCFAF6;

  /* ---- Ink (warm charcoal) -------------------------------------------- */
  --color-ink: #22201D;        /* body + headings — 15.1:1 on cream */
  --color-ink-soft: #4A4540;   /* secondary copy — 8.9:1 on cream */
  --color-ink-muted: #6B655E;  /* meta, captions — 5.4:1 on cream (AA body OK) */
  --color-ink-faint: #9A938A;  /* decorative only — DO NOT use for body text */
  --color-on-dark: #F7F3EC;    /* text on primary-800/900 */
  --color-on-dark-muted: #C7D3CB;

  /* ---- Feedback ------------------------------------------------------- */
  --color-success: #2F6650;
  --color-success-bg: #E7F1EB;
  --color-warning: #8A5A0B;
  --color-warning-bg: #FBF0D8;
  --color-danger: #A32222;
  --color-danger-bg: #FBE9E9;
  --color-info: #1F5670;
  --color-info-bg: #E4F0F5;
  /* WhatsApp brand green darkened until white 0.94rem label passes AA
     (5.0:1). The icon keeps the shape people recognise. */
  --color-whatsapp: #128040;
  --color-whatsapp-dark: #0E6B35;

  /* ---- Semantic aliases (prefer these in component rules) ------------- */
  --bg-body: var(--color-cream);
  --bg-tint: var(--color-cream-200);
  --bg-surface: var(--color-surface);
  --bg-dark: var(--color-primary-800);
  --text-body: var(--color-ink-soft);
  --text-heading: var(--color-ink);
  --text-muted: var(--color-ink-muted);
  --border-color: var(--color-cream-300);
  --border-color-strong: #DCCFBB;
  --link-color: var(--color-primary-700);
  --link-hover: var(--color-accent-700);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: 'Martel', 'Iowan Old Style', 'Palatino Linotype', Georgia,
                  'Times New Roman', serif;
  --font-body: 'Hind', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  /* Fluid type scale — 1.200 minor third mobile → 1.250 major third desktop */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);  /* 11.5–12.5px */
  --step--1: clamp(0.84rem, 0.81rem + 0.16vw, 0.94rem);  /* 13.4–15px   */
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.125rem);    /* 16–18px body */
  --step-1:  clamp(1.18rem, 1.10rem + 0.38vw, 1.42rem);  /* 19–23px      */
  --step-2:  clamp(1.38rem, 1.25rem + 0.66vw, 1.80rem);  /* 22–29px  h3  */
  --step-3:  clamp(1.62rem, 1.40rem + 1.05vw, 2.28rem);  /* 26–36px  h2  */
  --step-4:  clamp(1.90rem, 1.56rem + 1.65vw, 2.88rem);  /* 30–46px  h1  */
  --step-5:  clamp(2.24rem, 1.72rem + 2.55vw, 3.65rem);  /* 36–58px hero */
  --step-6:  clamp(2.62rem, 1.85rem + 3.85vw, 4.60rem);  /* 42–74px 404  */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;   /* long-form prose */
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-eyebrow: 0.14em;

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

  /* ---- Spacing — strict 8px scale (space-1 is the 4px half-step) ------ */
  --space-1: 0.25rem;  /*   4px */
  --space-2: 0.5rem;   /*   8px */
  --space-3: 0.75rem;  /*  12px */
  --space-4: 1rem;     /*  16px */
  --space-5: 1.5rem;   /*  24px */
  --space-6: 2rem;     /*  32px */
  --space-7: 2.5rem;   /*  40px */
  --space-8: 3rem;     /*  48px */
  --space-9: 4rem;     /*  64px */
  --space-10: 5rem;    /*  80px */
  --space-11: 6rem;    /*  96px */
  --space-12: 8rem;    /* 128px */

  /* Vertical rhythm for <section> — fluid */
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);
  --section-y-lg: clamp(4rem, 2.5rem + 7vw, 8rem);

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1140px;      /* brief §8 */
  --container-narrow: 760px;    /* long-form prose measure */
  --container-wide: 1320px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-h: 68px;             /* used for scroll-margin + drawer offset */
  --header-h-scrolled: 60px;

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Shadows — warm-tinted, never neutral grey ----------------------- */
  --shadow-xs: 0 1px 2px rgba(34, 32, 29, 0.05);
  --shadow-sm: 0 2px 6px rgba(34, 32, 29, 0.06);
  --shadow-md: 0 6px 18px rgba(34, 32, 29, 0.08);
  --shadow-lg: 0 14px 38px rgba(34, 32, 29, 0.11);
  --shadow-xl: 0 26px 60px rgba(18, 38, 31, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-focus: 0 0 0 3px var(--color-cream), 0 0 0 6px var(--color-primary-500);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --transition-fast: 140ms var(--ease-out);
  --transition-base: 240ms var(--ease-out);
  --transition-slow: 420ms var(--ease-out);
  --reveal-duration: 620ms;

  /* ---- Z-index layers — never write a raw z-index in a component ------- */
  --z-below: -1;
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;      /* sticky header */
  --z-dropdown: 200;    /* nav dropdowns */
  --z-backdrop: 800;    /* drawer / lightbox scrim */
  --z-drawer: 900;      /* mobile nav panel */
  --z-float: 950;       /* WhatsApp + back-to-top */
  --z-modal: 1000;      /* lightbox */
  --z-skiplink: 1100;   /* must beat everything */
}

/* ==========================================================================
   2. MODERN RESET
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--bg-body);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg, iframe {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

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

button { background: none; border: none; }

p, h1, h2, h3, h4, h5, h6, li, figcaption {
  overflow-wrap: break-word;
}

ul[role='list'], ol[role='list'] {
  list-style: none;
  padding: 0;
}

table { border-collapse: collapse; border-spacing: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin-block: var(--space-6);
}

:target { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }

/* ==========================================================================
   3. BASE ELEMENTS & TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); line-height: var(--leading-snug); }
h3 { font-size: var(--step-2); line-height: var(--leading-snug); font-weight: var(--weight-semibold); }
h4 { font-size: var(--step-1); line-height: var(--leading-snug); font-weight: var(--weight-semibold); }
h5 { font-size: var(--step-0); font-weight: var(--weight-semibold); font-family: var(--font-body); }
h6 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

p { text-wrap: pretty; }

a {
  color: var(--link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transition-fast);
}
a:hover { color: var(--link-hover); }

strong, b { font-weight: var(--weight-semibold); color: var(--color-ink); }
em, i { font-style: italic; }

small { font-size: var(--step--1); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.35em;
}

::selection {
  background: var(--color-accent-200);
  color: var(--color-ink);
}

/* Devanagari runs a little small next to Latin at the same size — nudge it.
   Usage: <span lang="hi">कमर दर्द के लिए योग</span> or <h2 lang="hi">…</h2> */
[lang='hi'], .lang-hi {
  font-size: 1.06em;
  line-height: 1.75;
  letter-spacing: 0;
}

/* Lead paragraph — the 2–3 sentence direct answer under a question H2 */
.lead {
  font-size: var(--step-1);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
  font-weight: var(--weight-light);
}

.text-muted { color: var(--text-muted); }
.text-accent { color: var(--color-accent-700); }
.text-primary { color: var(--color-primary-700); }

/* ==========================================================================
   4. ACCESSIBILITY HELPERS
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-4);
  z-index: var(--z-skiplink);
  transform: translateY(-140%);
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary-800);
  color: var(--color-on-dark);
  font-weight: var(--weight-semibold);
  font-size: var(--step--1);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-on-dark);
  outline: 3px solid var(--color-accent-400);
  outline-offset: 2px;
}

/* Visible focus rings everywhere. Never remove this. */
:focus-visible {
  outline: 3px solid var(--color-accent-600);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* On dark grounds the terracotta ring is low-contrast — swap it. */
.site-footer :focus-visible,
.section--dark :focus-visible,
.cta-band :focus-visible,
.hero__inner :focus-visible,
.mobile-nav :focus-visible {
  outline-color: var(--color-accent-300);
}

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.visually-hidden:focus-within { clip: auto; clip-path: none; }

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

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.container--flush { padding-inline: 0; }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--sm { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-6); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

.section--tint { background: var(--bg-tint); }
.section--surface { background: var(--color-surface); }
.section--sage { background: var(--color-primary-50); }
.section--accent { background: var(--color-accent-50); }

.section--dark {
  background: var(--bg-dark);
  color: var(--color-on-dark-muted);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5 { color: var(--color-on-dark); }
.section--dark a { color: var(--color-accent-300); }
.section--dark a:hover { color: var(--color-accent-200); }
.section--dark .eyebrow { color: var(--color-accent-300); }
.section--dark .section-sub { color: var(--color-on-dark-muted); }

/* ---------------------------------------------------------------------------
 * Emphasis on dark grounds.
 *
 * The base rule is `strong, b { color: var(--color-ink); }` — #22201D, very
 * nearly black. That is right on cream and wrong everywhere the ground is
 * dark: on primary-800 (#1B3A2F) it lands at about 1.2:1 and the text simply
 * disappears. It bit the homepage hero, where "4.9 stars across 109 Google
 * reviews" — the single strongest piece of social proof on the site — was
 * invisible inside its own sentence.
 *
 * Fixed at the rule rather than the instance, because the failure is silent:
 * anyone bolding a phrase in a dark section, the footer or a CTA band would
 * hit it again with no obvious cause.
 *
 * on-dark (#F7F3EC) is also a step brighter than the on-dark-muted body text
 * these sections use, so emphasis actually reads as emphasis instead of
 * merely being legible. ~11:1 on primary-800.
 *
 * Deliberately NOT included: .section--sage and .section--tint. Despite the
 * names those grounds are light (primary-50 / cream-200) and the near-black
 * ink is correct there.
 * ------------------------------------------------------------------------ */
.hero strong, .hero b,
.section--dark strong, .section--dark b,
.cta-band strong, .cta-band b,
.card--dark strong, .card--dark b,
.site-footer strong, .site-footer b,
.mobile-nav strong, .mobile-nav b,
.lightbox strong, .lightbox b {
  color: var(--color-on-dark);
}

/* Subtle woven-mat texture for tinted bands — pure CSS, no image request. */
.section--texture {
  background-color: var(--bg-tint);
  background-image:
    repeating-linear-gradient(45deg, rgba(47, 102, 80, 0.035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(194, 98, 45, 0.03) 0 2px, transparent 2px 9px);
}

/* Grid ---------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.grid--gap-sm { gap: var(--space-4); }
.grid--gap-lg { gap: var(--space-6) var(--space-5); }

@media (min-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Auto-fitting grid — good default for card decks of unknown length */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* Two-column split: text beside media. Stacks under 900px. */
.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .split--media-first > :first-child { order: 2; }
  .split--media-first > :last-child { order: 1; }
  .split--wide-text { grid-template-columns: 1.25fr 1fr; }
  .split--wide-media { grid-template-columns: 1fr 1.25fr; }
}

/* Vertical flow — adds rhythm between siblings without margin fights */
.flow > * + * { margin-block-start: var(--space-4); }
.flow--lg > * + * { margin-block-start: var(--space-6); }
.flow--sm > * + * { margin-block-start: var(--space-2); }

/* Horizontal cluster — buttons, meta chips, tag rows */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
.cluster--tight { gap: var(--space-2); }

/* ==========================================================================
   6. HEADER, PRIMARY NAV, DROPDOWNS
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(251, 247, 240, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition-base), box-shadow var(--transition-base),
              border-color var(--transition-base);
}
/* JS adds .is-scrolled past ~40px. Everything still works without it. */
.site-header.is-scrolled {
  background: rgba(251, 247, 240, 0.98);
  border-bottom-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-block: var(--space-2);
}
.site-header.is-scrolled .header-inner { min-height: var(--header-h-scrolled); }

/* Brand / wordmark ----------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
  min-width: 0;            /* allow it to give way before the header overflows */
}
.brand:hover { color: var(--color-ink); }
/* The mark is now the watercolour lotus from the logo, on transparency.
   No gradient disc and no shadow behind it — the artwork has its own soft
   edges, and a solid green circle underneath fought the teal in the painting.
   Sized in CSS; the file itself is 144px so it stays sharp on a 3x screen. */
.brand__mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
}
.brand__mark img,
.brand__mark svg { width: 100%; height: 100%; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-800);
  white-space: nowrap;
}
.brand__tagline {
  font-size: 0.68rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
/* Narrow screens: the tagline stays — it carries the "by Ritika Khandelwal"
   identity, which is the point of the wordmark — but it has to be made to fit
   rather than left to shove the hamburger off the screen.

   The saving comes mostly from the letter-spacing, not the font size. At
   0.14em, twenty characters spend ~30px on tracking alone; dropping to 0.05em
   returns most of that while costing far less legibility than shrinking the
   type further would. The mark and the gap give up a few pixels too.

   Header budget at the tightest common width (320px):
     available 288  =  mark 36 + gap 8 + text ~137 + gap 16 + toggle 44  (241)
   which leaves ~47px of headroom. */
@media (max-width: 479px) {
  .brand { gap: var(--space-2); }
  .brand__mark { width: 36px; height: 36px; flex: 0 0 36px; }
  .brand__name { font-size: 0.98rem; }
  .brand__tagline { font-size: 0.64rem; letter-spacing: 0.05em; }
}

/* Below ~360px, buy a little more room the same way rather than dropping it. */
@media (max-width: 359px) {
  .brand__mark { width: 32px; height: 32px; flex: 0 0 32px; }
  .brand__name { font-size: 0.92rem; }
  .brand__tagline { font-size: 0.6rem; letter-spacing: 0.03em; }
}

/* Last-resort safety net: if the wordmark is ever lengthened, both lines
   truncate rather than shoving the hamburger off the screen again. */
.brand__text { min-width: 0; }
.brand__name,
.brand__tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Desktop nav ---------------------------------------------------------- */
.nav { display: none; }
@media (min-width: 1040px) {
  .nav { display: block; }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--color-primary-700);
  background: var(--color-primary-50);
}

/* ACTIVE STATE — devs: put aria-current="page" on the current page's link.
   The class .is-active is the styling hook; aria-current is the a11y hook.
   Set BOTH on the current item (JS also sets them as a fallback). */
.nav__link.is-active,
.nav__link[aria-current='page'] {
  color: var(--color-primary-800);
  font-weight: var(--weight-semibold);
}
.nav__link.is-active::after,
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-600);
}

.nav__caret {
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transition-fast);
  opacity: 0.7;
  margin-bottom: 5px;
  margin-left: 1px
}
.nav__item:hover > .nav__link .nav__caret,
.nav__item:focus-within > .nav__link .nav__caret {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Dropdown — CSS-only (hover + focus-within). Works with JS disabled. */
.nav__item--has-dropdown > .nav__link { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 264px;
  padding: var(--space-2);
  margin: 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
              visibility var(--transition-fast);
}
/* Invisible bridge so the pointer can travel from link to panel */
.dropdown::before {
  content: '';
  position: absolute;
  inset: -10px 0 100% 0;
}
.nav__item--has-dropdown:hover > .dropdown,
.nav__item--has-dropdown:focus-within > .dropdown,
.dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown--right { left: auto; right: 0; }

.dropdown__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dropdown__link:hover,
.dropdown__link:focus-visible {
  background: var(--color-primary-50);
  color: var(--color-primary-800);
}
.dropdown__link[aria-current='page'] {
  color: var(--color-primary-800);
  font-weight: var(--weight-semibold);
  background: var(--color-primary-50);
}
.dropdown__note {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.dropdown__divider {
  display: block;
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--border-color);
}

/* Header actions ------------------------------------------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;              /* at every width, not just >=1040px */
}

.header-tel {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.92rem;
  font-weight: var(--weight-semibold);
  color: var(--color-primary-800);
  text-decoration: none;
  white-space: nowrap;
}
.header-tel:hover { color: var(--color-accent-700); }
.header-tel svg { width: 17px; height: 17px; flex: none; }
/* Visible on tablet (where the full nav is hidden) and again on wide desktop.
   Between 1040 and 1239 the nav itself needs the room, so the number moves
   into the drawer + the floating WhatsApp button. */
@media (min-width: 700px) { .header-tel { display: inline-flex; } }
@media (min-width: 1040px) and (max-width: 1239px) { .header-tel { display: none; } }

.header-cta { display: none; }
@media (min-width: 860px) { .header-cta { display: inline-flex; } }

/* ---------------------------------------------------------------------------
 * Desktop header width budget.
 *
 * The container is capped at 1140px, so a wider viewport gives the header no
 * extra room — the crowding is permanent, not something that resolves at some
 * larger breakpoint. Measured at the default nav size:
 *
 *   brand 200 + nav 636 + phone 150 + CTA 167 + gaps 48  =  1201px   (-61px)
 *
 * The original rule only tightened the nav between 1040 and 1179px, so from
 * 1240px up — where the phone number reappears — the row was over budget with
 * nothing left to give but the button, which wrapped "Book a Free Trial" onto
 * four lines and turned it into a circle.
 *
 * Fix: tighten the nav at every width where it is visible, not just in one
 * band. That recovers ~95px (8px per link of padding, plus a slightly smaller
 * label), which is enough to keep the full nav, the phone number and the
 * uncut "Book a Free Trial" all on one line. Nothing had to be dropped.
 * ------------------------------------------------------------------------ */
@media (min-width: 1040px) {
  .nav__link { padding-inline: var(--space-2); font-size: 0.9rem; }
  .header-cta { padding-inline: 1.15rem; font-size: 0.9rem; }
  /* Keep the wordmark from expanding into the space we just recovered. */
  .brand { flex: none; }
  .header-actions { flex: none; }
}

/* ==========================================================================
   7. MOBILE NAV DRAWER + HAMBURGER
   ========================================================================== */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  /* flex:none is load-bearing. As a shrinkable flex child this button was the
     only thing in the header row that could give way on a narrow screen, so
     between roughly 381px and 424px — where .brand is still at full width
     because the tagline only hides below 380px — it collapsed to nothing and
     the hamburger disappeared. 44px is also the minimum comfortable tap
     target, so it must not shrink under any circumstances. */
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-primary-800);
  transition: background var(--transition-fast);
}
.nav-toggle:hover { background: var(--color-primary-50); }
@media (min-width: 1040px) { .nav-toggle { display: none; } }

.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: var(--radius-pill);
  background: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(18, 38, 31, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* Drawer panel. Hidden off-canvas by default; NO `display:none`, so the links
   remain in the DOM and crawlable with JS off. */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--color-primary-900);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-xl);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform var(--transition-base), visibility var(--transition-base);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
@media (min-width: 1040px) { .mobile-nav, .nav-backdrop { display: none; } }

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(247, 243, 236, 0.14);
}
.mobile-nav__title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-on-dark);
  font-weight: var(--weight-semibold);
}
.mobile-nav__close {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-circle);
  background: rgba(247, 243, 236, 0.1);
  color: var(--color-on-dark);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.mobile-nav__close:hover { background: rgba(247, 243, 236, 0.2); }

.mobile-nav__body { padding: var(--space-4) var(--space-5) var(--space-8); }

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav__item + .mobile-nav__item { border-top: 1px solid rgba(247, 243, 236, 0.1); }

.mobile-nav__link {
  display: block;
  padding: var(--space-3) 0;
  font-size: 1.06rem;
  font-weight: var(--weight-medium);
  color: var(--color-on-dark);
  text-decoration: none;
}
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible { color: var(--color-accent-300); }
.mobile-nav__link[aria-current='page'],
.mobile-nav__link.is-active {
  color: var(--color-accent-300);
  font-weight: var(--weight-semibold);
}

/* Nested group uses <details> so it opens with JS disabled. */
.mobile-nav__group { border-top: 1px solid rgba(247, 243, 236, 0.1); }
.mobile-nav__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: 1.06rem;
  font-weight: var(--weight-medium);
  color: var(--color-on-dark);
  cursor: pointer;
  list-style: none;
}
.mobile-nav__group > summary::-webkit-details-marker { display: none; }
.mobile-nav__group > summary::after {
  content: '';
  width: 0.55em; height: 0.55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition-fast);
  flex: none;
}
.mobile-nav__group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.mobile-nav__sub {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0 0 0 var(--space-4);
  border-left: 2px solid rgba(217, 138, 80, 0.5);
}
.mobile-nav__sub .mobile-nav__link {
  padding: var(--space-2) 0;
  font-size: 0.96rem;
  color: var(--color-on-dark-muted);
}
.mobile-nav__sub .mobile-nav__link:hover { color: var(--color-accent-300); }

.mobile-nav__footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(247, 243, 236, 0.14);
  display: grid;
  gap: var(--space-3);
}
.mobile-nav__meta {
  font-size: var(--step--1);
  color: var(--color-on-dark-muted);
  line-height: var(--leading-normal);
}

/* Body scroll lock — JS toggles this on <body>. */
body.nav-open { overflow: hidden; }

/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(460px, 72vh, 680px);
  padding-block: var(--space-10) var(--space-9);
  background: var(--color-primary-800);
  color: var(--color-on-dark);
  overflow: hidden;
}
.hero--compact {
  min-height: 0;
  padding-block: var(--space-8) var(--space-7);
}
.hero--tall { min-height: clamp(560px, 86vh, 800px); }

/* Plain cream/sage hero for interior pages that have no photo yet */
.hero--plain {
  background: linear-gradient(160deg, var(--color-primary-50) 0%, var(--color-cream) 60%, var(--color-accent-50) 100%);
  color: var(--text-body);
  min-height: 0;
  padding-block: var(--space-8);
}
.hero--plain .hero__title { color: var(--color-primary-900); }
.hero--plain .hero__lede { color: var(--color-ink-soft); }
.hero--plain .hero__eyebrow { color: var(--color-accent-700); }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  overflow: hidden;            /* contains the hero__img settle animation */
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* Overlay — dual gradient keeps white text ≥ 4.5:1 over any photograph. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(14, 31, 25, 0.90) 0%, rgba(14, 31, 25, 0.72) 42%, rgba(14, 31, 25, 0.42) 100%),
    linear-gradient(to top, rgba(14, 31, 25, 0.72) 0%, rgba(14, 31, 25, 0) 55%);
}
.hero__overlay--soft {
  background: linear-gradient(100deg, rgba(14, 31, 25, 0.82) 0%, rgba(14, 31, 25, 0.5) 100%);
}

/* ---------------------------------------------------------------------------
 * Hero photo placeholder.
 *
 * When the hero photo file is missing, main.js swaps the <img> for an .img-ph
 * block. The default .img-ph is built for content images: light background,
 * dark caption, 3:2 aspect ratio. Inside a hero that is wrong three times over
 * — the 3:2 box overflows the hero and gets clipped at an arbitrary point, and
 * its dark caption reads straight through the semi-transparent overlay and
 * collides with the H1.
 *
 * So in a hero the placeholder becomes what it should be: a calm dark-green
 * wash that fills the box exactly and says nothing. The hero already carries
 * the headline; it does not need a caption telling the owner a photo is
 * missing. assets/images/README.md is where that belongs.
 * ------------------------------------------------------------------------ */
.hero__media .img-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;          /* kill the 3:2 box — the hero sets the height */
  padding: 0;
  border-radius: 0;
  background-color: var(--color-primary-800);
  background-image:
    radial-gradient(120% 90% at 78% 18%, rgba(99, 160, 136, 0.30) 0%, rgba(99, 160, 136, 0) 60%),
    radial-gradient(90% 80% at 12% 92%, rgba(217, 138, 80, 0.20) 0%, rgba(217, 138, 80, 0) 62%),
    linear-gradient(150deg, var(--color-primary-700) 0%, var(--color-primary-900) 100%);
}
/* The caption is for the site owner, not the visitor — and in a hero it fights
   the headline. Hide it from sight but leave it for screen readers. */
.hero__media .img-ph > * {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero__inner {
  position: relative;
  z-index: var(--z-base);
  max-width: 40rem;
}
.hero--center .hero__inner { max-width: 48rem; margin-inline: auto; text-align: center; }
.hero--center .hero__actions { justify-content: center; }
.hero--center .hero__meta { justify-content: center; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.hero__eyebrow::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--color-accent-400);
  border-radius: var(--radius-pill);
}

.hero__title {
  font-size: var(--step-5);
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
}
.hero__title em {
  font-style: italic;
  color: var(--color-accent-300);
}

.hero__lede {
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
  color: var(--color-on-dark-muted);
  max-width: 34rem;
  margin-bottom: var(--space-6);
}
.hero--center .hero__lede { margin-inline: auto; }

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

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-size: var(--step--1);
  color: var(--color-on-dark-muted);
}
.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__meta-item svg { width: 16px; height: 16px; flex: none; color: var(--color-accent-300); }

/* Trust badges under the hero CTA pair */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(247, 243, 236, 0.12);
  border: 1px solid rgba(247, 243, 236, 0.22);
  font-size: var(--step--1);
  color: var(--color-on-dark);
}

/* ==========================================================================
   9. SECTION HEADERS & EYEBROWS
   ========================================================================== */

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-7);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.section-head--split .section-head__text { max-width: 46rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.eyebrow::before {
  content: '';
  width: 24px; height: 2px;
  background: var(--color-accent-500);
  border-radius: var(--radius-pill);
  flex: none;
}
.section-head--center .eyebrow { justify-content: center; }
.eyebrow--plain::before { display: none; }

.section-title {
  font-size: var(--step-3);
  margin-bottom: var(--space-3);
}
.section-title--lg { font-size: var(--step-4); }

.section-sub {
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
}

/* Decorative lotus/leaf rule */
.rule-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block: var(--space-6);
  color: var(--color-accent-400);
}
.rule-ornament::before,
.rule-ornament::after {
  content: '';
  height: 1px;
  width: min(120px, 22vw);
  background: linear-gradient(to right, transparent, var(--color-accent-300), transparent);
}

/* ==========================================================================
   10. BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--color-primary-600);
  --btn-fg: #FFFFFF;
  --btn-border: var(--color-primary-600);
  --btn-bg-hover: var(--color-primary-700);
  --btn-border-hover: var(--color-primary-700);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  min-height: 46px;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-pill);

  /* A button must never wrap or be squeezed. Both matter here because the
     radius is a pill: the moment a label breaks onto a second line the
     radius follows the taller box and the button renders as a blob rather
     than looking merely cramped. And as a flex child (in .header-actions,
     .hero__actions, .btn-group) the default flex-shrink:1 lets a crowded
     row compress the button below its text width, which is what causes the
     wrap in the first place. Belt and braces, deliberately. */
  white-space: nowrap;
  flex: none;
  max-width: 100%;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn__icon { display: inline-grid; place-items: center; flex: none; }

/* Variants */
.btn--primary {
  --btn-bg: var(--color-primary-600);
  --btn-border: var(--color-primary-600);
  --btn-bg-hover: var(--color-primary-800);
  --btn-border-hover: var(--color-primary-800);
}
.btn--accent {
  --btn-bg: var(--color-accent-700);
  --btn-border: var(--color-accent-700);
  --btn-bg-hover: var(--color-accent-800);
  --btn-border-hover: var(--color-accent-800);
}
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary-800);
  --btn-border: var(--color-primary-600);
  --btn-bg-hover: var(--color-primary-600);
  --btn-border-hover: var(--color-primary-600);
}
.btn--secondary:hover { color: #FFFFFF; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary-800);
  --btn-border: transparent;
  --btn-bg-hover: var(--color-primary-50);
  --btn-border-hover: transparent;
  padding-inline: var(--space-4);
}
.btn--ghost:hover { color: var(--color-primary-800); box-shadow: none; }

.btn--whatsapp {
  --btn-bg: var(--color-whatsapp);
  --btn-border: var(--color-whatsapp);
  --btn-bg-hover: var(--color-whatsapp-dark);
  --btn-border-hover: var(--color-whatsapp-dark);
}

/* On dark grounds (hero, CTA band, footer) */
.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--color-on-dark);
  --btn-border: rgba(247, 243, 236, 0.55);
  --btn-bg-hover: rgba(247, 243, 236, 0.14);
  --btn-border-hover: var(--color-on-dark);
}
.btn--on-dark:hover { color: var(--color-on-dark); }

.btn--light {
  --btn-bg: var(--color-cream);
  --btn-fg: var(--color-primary-900);
  --btn-border: var(--color-cream);
  --btn-bg-hover: #FFFFFF;
  --btn-border-hover: #FFFFFF;
}
.btn--light:hover { color: var(--color-primary-900); }

/* Sizes */
.btn--sm {
  padding: 0.4rem 1rem;
  min-height: 36px;
  font-size: 0.86rem;
}
.btn--sm svg { width: 15px; height: 15px; }
.btn--lg {
  padding: 0.95rem 2rem;
  min-height: 54px;
  font-size: 1.04rem;
}
.btn--full { display: flex; width: 100%; }

/* Small screens: wrapping beats horizontal overflow.
 *
 * The nowrap above protects the desktop header, where a wrapped label turns
 * the pill button into a blob. On a phone that trade-off inverts: a long
 * label like "Yoga for PCOS & PCOD in Jaipur" is ~258px, which overflows a
 * card on a 320px screen and makes the whole page scroll sideways — the one
 * layout failure the brief rules out outright.
 *
 * Safe to relax here precisely because .header-cta is display:none below
 * 860px, so the blob case cannot occur on mobile. And a button wrapped at
 * this width is a wide box, where the pill radius still reads as a pill.
 */
@media (max-width: 599px) {
  .btn { white-space: normal; }
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.btn-group--center { justify-content: center; }
@media (max-width: 420px) {
  .btn-group--stack-mobile { flex-direction: column; }
  .btn-group--stack-mobile .btn { width: 100%; }
}

/* Plain text link with arrow — used at the foot of cards */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: 0.92rem;
  color: var(--color-primary-700);
  text-decoration: none;
}
.link-arrow::after {
  content: '→';
  transition: transform var(--transition-fast);
}
.link-arrow:hover { color: var(--color-accent-700); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ==========================================================================
   11. BADGES, PILLS, TAGS, STAR RATING
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  font-size: 0.76rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  line-height: 1.5;
  white-space: nowrap;
}
.badge--accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.badge--saffron { background: var(--color-saffron-soft); color: #6A4708; }
.badge--outline {
  background: transparent;
  border: 1px solid var(--border-color-strong);
  color: var(--color-ink-soft);
}
.badge--dark { background: var(--color-primary-800); color: var(--color-on-dark); }
.badge--ladies { background: var(--color-accent-100); color: var(--color-accent-800); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color-strong);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: 0.8rem;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
a.tag:hover { background: var(--color-primary-50); border-color: var(--color-primary-300); color: var(--color-primary-800); }

.stars {
  display: inline-flex;
  gap: 1px;
  color: var(--color-saffron);
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.06em;
}
/* Lighter turmeric on dark grounds — 6.6:1 on primary-800 */
.hero .stars,
.section--dark .stars,
.cta-band .stars,
.site-footer .stars,
.stars--on-dark { color: var(--color-saffron-on-dark); }
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.rating__score {
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  font-size: 1rem;
}

/* ==========================================================================
   12. MEDIA BOXES & IMAGE PLACEHOLDER
   ========================================================================== */

/* Aspect-ratio wrapper — put the <img> (or .img-ph) inside it. */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-cream-200);
}
.media > img,
.media > .img-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--3x4  { aspect-ratio: 3 / 4; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--round { border-radius: var(--radius-circle); }
.media--soft { border-radius: var(--radius-xl); }

/* Frame treatment: warm offset border, feels handmade not corporate */
.media--framed {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.media-frame {
  position: relative;
  display: inline-block;
}
.media-frame::after {
  content: '';
  position: absolute;
  inset: var(--space-4) calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
  border: 1.5px solid var(--color-accent-300);
  border-radius: var(--radius-xl);
  z-index: var(--z-below);
  pointer-events: none;
}

/* ---- .img-ph : image placeholder fallback ---------------------------
   Used two ways:
   (a) Statically, when we know there is no photo yet:
       <div class="img-ph" data-label="Hatha class, Mansarovar studio"></div>
   (b) Automatically, when a real <img> 404s. main.js listens for `error`
       on every <img data-ph="Label text"> and swaps in this markup.
       Always give images: onerror="this.dataset.failed='1'" is NOT needed —
       just add data-ph="Descriptive label" and main.js handles it.
   Keep explicit width/height on the <img> so the box never shifts. */
.img-ph {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: var(--space-5);
  border-radius: inherit;
  text-align: center;
  color: var(--color-primary-800);
  background-color: var(--color-primary-50);
  background-image:
    linear-gradient(145deg, var(--color-primary-100) 0%, var(--color-cream-200) 48%, var(--color-accent-100) 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Faint concentric-ring motif — mandala-ish, no image file needed */
.img-ph::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: var(--z-below);
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(47, 102, 80, 0.07) 22% 22.6%, transparent 22.6%),
    radial-gradient(circle at 50% 50%, transparent 0 33%, rgba(163, 74, 30, 0.07) 33% 33.6%, transparent 33.6%),
    radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(47, 102, 80, 0.06) 44% 44.6%, transparent 44.6%);
}
.img-ph__label,
.img-ph::after {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: 0.02em;
  max-width: 22rem;
}
/* When used with data-label and no inner element */
.img-ph[data-label]:not(:has(.img-ph__label))::after {
  content: attr(data-label);
}
.img-ph__label { display: block; }
.img-ph__icon {
  display: block;
  margin-inline: auto;
  margin-bottom: var(--space-2);
  width: 34px; height: 34px;
  color: var(--color-primary-500);
  opacity: 0.75;
}
.img-ph__note {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.72rem;
  color: var(--color-ink-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.img-ph--16x9 { aspect-ratio: 16 / 9; }
.img-ph--1x1  { aspect-ratio: 1 / 1; }
.img-ph--3x4  { aspect-ratio: 3 / 4; }
.img-ph--4x3  { aspect-ratio: 4 / 3; }
.img-ph--fill { aspect-ratio: auto; height: 100%; }
.img-ph--round { border-radius: var(--radius-circle); }

/* ==========================================================================
   13. CARDS
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              border-color var(--transition-base);
}
.card--hover:hover,
.card:has(.card__link:hover),
.card:has(.card__link:focus-visible) {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-200);
}
.card--flat { border-radius: var(--radius-md); box-shadow: none; }
.card--raised { box-shadow: var(--shadow-sm); }
.card--tint { background: var(--color-cream-200); }
.card--sage { background: var(--color-primary-50); border-color: var(--color-primary-100); }
.card--dark {
  background: var(--color-primary-800);
  border-color: var(--color-primary-700);
  color: var(--color-on-dark-muted);
}
.card--dark .card__title { color: var(--color-on-dark); }

.card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-cream-200);
}
.card__media--square { aspect-ratio: 1 / 1; }
.card__media--tall { aspect-ratio: 4 / 5; }
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.card--hover:hover .card__img,
.card:has(.card__link:hover) .card__img { transform: scale(1.04); }

.card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-base);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-3);
  padding: var(--space-5);
}
.card__body--tight { padding: var(--space-4); }

.card__eyebrow {
  font-size: 0.74rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.card__title {
  font-size: var(--step-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin: 0;
}
.card__title--sm { font-size: var(--step-1); }

/* Stretched link — makes the whole card clickable while keeping ONE
   real link in the DOM for crawlers and screen readers. */
.card__link {
  color: inherit;
  text-decoration: none;
}
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}
.card__link:hover { color: var(--color-primary-800); }

.card__text {
  font-size: 0.96rem;
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
  margin: 0;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.card__meta-item { display: inline-flex; align-items: center; gap: var(--space-1); }

.card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: 0.93rem;
}
.card__list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-ink-soft);
}
.card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: var(--radius-circle);
  background: var(--color-accent-400);
}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: 1px solid var(--border-color);
  position: relative;
  z-index: var(--z-raised);
}
.card__footer--plain { border-top: 0; padding-top: 0; }
.card__price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  color: var(--color-primary-800);
}
.card__price small { font-size: 0.6em; font-weight: var(--weight-regular); color: var(--text-muted); }

/* ---- Class card ------------------------------------------------------ */
.card--class .card__body { gap: var(--space-3); }
.card--class .card__title { font-size: var(--step-2); }

/* ---- Condition card (yoga-for-health hub) ---------------------------- */
.card--condition {
  border-left: 4px solid var(--color-accent-400);
}
.card--condition .card__body { padding-block: var(--space-5); }
.card--condition .card__title {
  font-size: var(--step-1);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.card--condition .card__icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-circle);
  background: var(--color-accent-50);
  color: var(--color-accent-700);
}
.card--condition .card__hi {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ---- Blog card ------------------------------------------------------- */
.card--blog .card__body { gap: var(--space-2); }
.card--blog .card__title { font-size: var(--step-1); font-weight: var(--weight-bold); }
.card--blog .card__meta { margin-top: var(--space-1); }

/* ---- Teacher card ---------------------------------------------------- */
.card--teacher { text-align: center; }
.card--teacher .card__media {
  aspect-ratio: 1 / 1;
  width: 132px;
  margin: var(--space-6) auto 0;
  border-radius: var(--radius-circle);
  overflow: hidden;
}
.card--teacher .card__body { align-items: center; padding-top: var(--space-4); }
.card--teacher .card__title { font-size: var(--step-1); }
.card--teacher .card__role {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-weight: var(--weight-semibold);
}
.card--teacher .card__socials {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* ---- Stat card ------------------------------------------------------- */
.card--stat {
  text-align: center;
  align-items: center;
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
}
.card--stat .stat__num { margin-bottom: var(--space-1); }

/* ---- Testimonial card ------------------------------------------------ */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  position: relative;
}
.testimonial--tint { background: var(--color-cream-200); }
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: var(--space-2);
  right: var(--space-5);
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-accent-200);
  pointer-events: none;
}
.testimonial__stars { color: var(--color-saffron); font-size: 1rem; letter-spacing: 0.08em; }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-regular);
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--color-ink);
  margin: 0;
}
.testimonial__quote--sm { font-size: var(--step-0); }
.testimonial__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.testimonial__avatar {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-circle);
  display: grid; place-items: center;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  font-weight: var(--weight-bold);
  font-family: var(--font-display);
  overflow: hidden;
}
.testimonial__author {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  font-size: 0.95rem;
  line-height: 1.3;
}
.testimonial__role {
  font-size: var(--step--1);
  color: var(--text-muted);
}
/* Mandatory label on placeholder testimonials — brief §7: never present an
   unverified quote as a real named person's words. */
.testimonial__note {
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-top: 1px dashed var(--border-color-strong);
  padding-top: var(--space-2);
}

/* ==========================================================================
   14. FILTERABLE CARD GRID + FILTER PILLS
   ========================================================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-6);
}
.filter-bar__label {
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--space-2);
}
/* Horizontal scroll on very small screens rather than wrapping to 4 rows */
@media (max-width: 520px) {
  .filter-bar--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .filter-bar--scroll .filter-pill { flex: none; }
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.42rem 1rem;
  min-height: 38px;
  border: 1.5px solid var(--border-color-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}
.filter-pill:hover {
  border-color: var(--color-primary-400);
  color: var(--color-primary-800);
  background: var(--color-primary-50);
}
.filter-pill.is-active,
.filter-pill[aria-pressed='true'] {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #FFFFFF;
}
.filter-pill__count {
  font-size: 0.76rem;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* JS sets .is-hidden on non-matching cards. With JS off nothing is hidden
   and the full grid is shown — which is the correct no-JS behaviour. */
.is-hidden { display: none !important; }

.filter-empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   15. ACCORDION (details/summary) + FAQ BLOCK
   ========================================================================== */

.accordion {
  display: grid;
  gap: var(--space-3);
}
.accordion--flush { gap: 0; }

.accordion__item {
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.accordion__item[open] {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow-sm);
}
.accordion--flush .accordion__item {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  box-shadow: none;
  background: transparent;
}

.accordion__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ''; }
.accordion__summary:hover { color: var(--color-primary-700); background: var(--color-primary-50); }
.accordion__item[open] .accordion__summary { color: var(--color-primary-800); }

.accordion__icon {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  position: relative;
  transition: background var(--transition-fast), transform var(--transition-base);
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}
.accordion__icon::before { width: 11px; height: 2px; }
.accordion__icon::after { width: 2px; height: 11px; }
.accordion__item[open] .accordion__icon {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}
.accordion__item[open] .accordion__icon::after { transform: scaleY(0); opacity: 0; }

.accordion__content {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  line-height: var(--leading-relaxed);
}
.accordion__content > * + * { margin-top: var(--space-3); }
.accordion__content ul,
.accordion__content ol { padding-left: 1.25rem; }
.accordion__content li + li { margin-top: var(--space-2); }

/* Gentle open animation, suppressed under reduced-motion by section 4. */
.accordion__item[open] .accordion__content {
  animation: acc-open var(--transition-base) both;
}
@keyframes acc-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- FAQ block (accordion + schema-friendly wrapper) ------------------ */
.faq { display: grid; gap: var(--space-3); }
.faq__intro { margin-bottom: var(--space-5); }
.faq__item { /* same as .accordion__item — apply both classes */ }
.faq__q { /* apply alongside .accordion__summary */ }
.faq__a { /* apply alongside .accordion__content */ }
.faq--hindi .accordion__summary { font-size: var(--step-1); }
.faq__footer {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  font-size: 0.96rem;
}

/* ==========================================================================
   16. TABS
   ========================================================================== */

.tabs { display: grid; gap: var(--space-5); }

.tabs__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  overflow-x: auto;
  padding: var(--space-1);
  background: var(--color-cream-200);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__list--stretch .tabs__tab { flex: 1 1 0; }

.tabs__tab {
  flex: none;
  padding: 0.55rem 1.15rem;
  min-height: 42px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tabs__tab:hover { color: var(--color-primary-800); background: rgba(255, 255, 255, 0.6); }
.tabs__tab.is-active,
.tabs__tab[aria-selected='true'] {
  background: var(--color-surface);
  color: var(--color-primary-800);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}

/* Underline variant for content-page tabs */
.tabs--underline .tabs__list {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  padding: 0;
  gap: var(--space-4);
}
.tabs--underline .tabs__tab {
  border-radius: 0;
  padding-inline: 0;
  border-bottom: 2px solid transparent;
}
.tabs--underline .tabs__tab.is-active,
.tabs--underline .tabs__tab[aria-selected='true'] {
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--color-accent-600);
}

/* Panels. With JS off ALL panels are visible (progressive enhancement):
   main.js adds `hidden` to the inactive ones on load. */
.tabs__panel { animation: tab-in var(--transition-base) both; }
.tabs__panel[hidden] { display: none; }
.tabs__panel-title {
  font-size: var(--step-1);
  margin-bottom: var(--space-4);
}
/* Visible only when JS is off, as a heading for each stacked panel */
.js-on .tabs__panel-title--nojs { display: none; }
@keyframes tab-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   17. TIMETABLE
   ========================================================================== */

/* REQUIRED WRAPPER. A wide table must scroll inside its own box, never
   push the page sideways.
   <div class="table-scroll" tabindex="0" role="region"
        aria-label="Weekly yoga class timetable"> <table class="timetable"> … */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-300) var(--color-cream-200);
  /* fade hint at the right edge on mobile */
  background-image: linear-gradient(to left, rgba(34, 32, 29, 0.07), transparent 28px);
  background-repeat: no-repeat;
  background-size: 28px 100%;
  background-position: right center;
}
.table-scroll:focus-visible { outline-offset: 0; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: var(--color-cream-200); }
.table-scroll::-webkit-scrollbar-thumb {
  background: var(--color-primary-300);
  border-radius: var(--radius-pill);
}
.table-scroll__hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-muted);
}
@media (min-width: 800px) { .table-scroll__hint { display: none; } }

.timetable {
  width: 100%;
  min-width: 680px;
  font-size: 0.93rem;
  text-align: left;
}
.timetable caption {
  caption-side: top;
  padding: var(--space-4) var(--space-5) var(--space-2);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.timetable thead th {
  position: sticky;
  top: 0;
  background: var(--color-primary-800);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.84rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
}
.timetable tbody th {
  font-weight: var(--weight-semibold);
  color: var(--color-primary-800);
  font-family: var(--font-body);
  white-space: nowrap;
  background: var(--color-primary-50);
}
.timetable th,
.timetable td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}
.timetable tbody tr:last-child th,
.timetable tbody tr:last-child td { border-bottom: 0; }
.timetable tbody tr:nth-child(even) td { background: var(--color-surface-2); }
.timetable tbody tr:hover td { background: var(--color-primary-50); }

.timetable__time {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  white-space: nowrap;
}
.timetable__batch {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  display: block;
}
.timetable__detail {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.timetable__cell--empty { color: var(--color-ink-faint); }
.timetable__cell--highlight { background: var(--color-accent-50) !important; }

/* Generic data table for fees / asana lists — AI engines extract tables. */
.data-table {
  width: 100%;
  font-size: 0.95rem;
  text-align: left;
}
.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}
.data-table thead th {
  background: var(--color-primary-50);
  color: var(--color-primary-800);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table--zebra tbody tr:nth-child(even) { background: var(--color-surface-2); }

/* ==========================================================================
   18. PRICING TABLE + PRICING CARDS
   ========================================================================== */

.pricing-table { width: 100%; min-width: 560px; text-align: left; }
.pricing-table thead th {
  background: var(--color-primary-800);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
}
.pricing-table th,
.pricing-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
.pricing-table tbody th {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td { border-bottom: 0; }
.pricing-table__amount {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  color: var(--color-primary-800);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pricing-table__save { color: var(--color-accent-700); font-weight: var(--weight-semibold); font-size: 0.88rem; }

.pricing-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 720px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pricing-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.price-card:hover { box-shadow: var(--shadow-md); }

/* "Most popular" variant — the one we want people to pick. */
.price-card--popular {
  border: 2px solid var(--color-primary-600);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-surface) 34%);
}
@media (min-width: 1000px) {
  .price-card--popular { transform: translateY(-10px); }
  .price-card--popular:hover { transform: translateY(-13px); }
}

.price-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-700);
  color: #FFFFFF;
  font-size: 0.74rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.price-card__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.price-card__desc { font-size: 0.94rem; color: var(--text-muted); margin-top: calc(var(--space-2) * -1); }

.price-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.price-card__amount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: var(--weight-heavy);
  line-height: 1;
  color: var(--color-primary-800);
  font-variant-numeric: tabular-nums;
}
.price-card__period { font-size: 0.95rem; color: var(--text-muted); }
.price-card__strike {
  text-decoration: line-through;
  color: var(--color-ink-faint);
  font-size: 1rem;
}

.price-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}
.price-card__list li {
  position: relative;
  padding-left: 1.65rem;
  line-height: var(--leading-normal);
}
.price-card__list li::before {
  content: '';
  position: absolute;
  left: 0.15rem; top: 0.42em;
  width: 0.42rem; height: 0.75rem;
  border-right: 2.5px solid var(--color-primary-600);
  border-bottom: 2.5px solid var(--color-primary-600);
  transform: rotate(45deg);
}
.price-card__list li.is-excluded { color: var(--color-ink-faint); }
.price-card__list li.is-excluded::before {
  border: 0;
  content: '—';
  color: var(--color-ink-faint);
  transform: none;
  top: 0;
  height: auto;
  width: auto;
  font-weight: var(--weight-bold);
}

.price-card__cta { margin-top: auto; }
.price-card__note {
  font-size: var(--step--1);
  color: var(--text-muted);
  text-align: center;
  line-height: var(--leading-normal);
}

.pricing-note {
  margin-top: var(--space-5);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* ==========================================================================
   19. TESTIMONIAL SLIDER
   ========================================================================== */

/* Structure:
   .slider > .slider__viewport > .slider__track > .slider__slide *n
   plus .slider__controls (prev/next) and .slider__dots.
   With JS off the viewport is a native horizontal scroller with snap —
   fully usable by touch and keyboard. */
.slider { position: relative; }

.slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: var(--space-1) var(--space-3);
  margin-inline: calc(var(--space-1) * -1);
}
.slider__viewport::-webkit-scrollbar { display: none; }

.slider__track {
  display: flex;
  gap: var(--space-5);
  padding-inline: var(--space-1);
  list-style: none;
  margin: 0;
}

.slider__slide {
  flex: 0 0 min(100%, 420px);
  scroll-snap-align: start;
  display: flex;
}
.slider__slide > * { width: 100%; }
@media (min-width: 760px) { .slider__slide { flex-basis: calc((100% - var(--space-5)) / 2); } }
@media (min-width: 1080px) { .slider__slide { flex-basis: calc((100% - var(--space-5) * 2) / 3); } }
.slider--single .slider__slide { flex-basis: 100%; }
@media (min-width: 760px) { .slider--single .slider__slide { flex-basis: 100%; } }

.slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.slider__btn {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border-color-strong);
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  color: var(--color-primary-800);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}
.slider__btn:hover {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #FFFFFF;
}
.slider__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.slider__btn svg { width: 18px; height: 18px; }

.slider__dots {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.slider__dot {
  width: 9px; height: 9px;
  padding: 0;
  border-radius: var(--radius-circle);
  background: var(--color-primary-200);
  border: 0;
  cursor: pointer;
  transition: background var(--transition-fast), width var(--transition-base);
}
.slider__dot:hover { background: var(--color-primary-400); }
.slider__dot.is-active,
.slider__dot[aria-current='true'] {
  width: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-600);
}

/* JS hides these when it can't enhance; keep them out of the a11y tree
   until wired up by adding hidden in the markup and letting JS reveal. */
.slider__controls[hidden] { display: none; }

/* ==========================================================================
   20. GALLERY GRID + LIGHTBOX
   ========================================================================== */

.gallery {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1000px) { .gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Editorial mosaic — every 6th tile spans two columns/rows on desktop */
@media (min-width: 700px) {
  .gallery--mosaic .gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
}

.gallery__item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-cream-200);
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.gallery--mosaic .gallery__item:nth-child(6n + 1) { aspect-ratio: auto; }
.gallery__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.gallery__item:hover .gallery__img { transform: scale(1.05); }
.gallery__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-3) var(--space-3);
  background: linear-gradient(to top, rgba(14, 31, 25, 0.82), transparent);
  color: #FFFFFF;
  font-size: var(--step--1);
  text-align: left;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption { opacity: 1; }

/* ---- Lightbox --------------------------------------------------------
   Hidden by default with [hidden]; JS removes it. Without JS the gallery
   tiles are ordinary links to the full-size image — still works. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-4);
  background: rgba(14, 31, 25, 0.94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-on-dark-muted);
  font-size: var(--step--1);
}
.lightbox__counter { font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-wide); }

.lightbox__figure {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  margin: 0;
  min-height: 0;
}
.lightbox__img {
  max-width: min(100%, 1100px);
  max-height: calc(100vh - 190px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}
.lightbox__caption {
  color: var(--color-on-dark-muted);
  font-size: var(--step--1);
  text-align: center;
  max-width: 46rem;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: rgba(247, 243, 236, 0.14);
  color: var(--color-on-dark);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(247, 243, 236, 0.3); }

.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding-top: var(--space-3);
}
@media (min-width: 900px) {
  .lightbox__prev,
  .lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px; height: 54px;
  }
  .lightbox__prev { left: var(--space-5); }
  .lightbox__next { right: var(--space-5); }
}

/* ==========================================================================
   21. FORMS
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-5);
}
.form--card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 560px) { .form--card { padding: var(--space-7); } }

.form__row {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 620px) {
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.form__group {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.form__label {
  font-size: 0.92rem;
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  line-height: var(--leading-snug);
}
.form__required {
  color: var(--color-accent-700);
  margin-left: 2px;
  font-weight: var(--weight-bold);
}
.form__optional {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  font-size: 0.86em;
  margin-left: var(--space-1);
}

.form__hint {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  min-height: 46px;
  background: var(--color-surface);
  border: 1.5px solid var(--border-color-strong);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: 1rem;
  line-height: var(--leading-normal);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--color-ink-faint); }

.form__input:hover,
.form__select:hover,
.form__textarea:hover { border-color: var(--color-primary-300); }

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-primary-600);
  box-shadow: 0 0 0 3px rgba(47, 102, 80, 0.16);
  background: var(--color-surface);
}
.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible { outline: 2px solid transparent; }

.form__textarea { min-height: 130px; resize: vertical; }

.form__select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-primary-700) 50%),
    linear-gradient(135deg, var(--color-primary-700) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Error state — set aria-invalid="true" AND .is-invalid on the control,
   and point aria-describedby at the .form__error id. */
.form__input.is-invalid,
.form__select.is-invalid,
.form__textarea.is-invalid,
.form__input[aria-invalid='true'],
.form__select[aria-invalid='true'],
.form__textarea[aria-invalid='true'] {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}
.form__input.is-invalid:focus,
.form__input[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgba(163, 34, 34, 0.16);
}

.form__error {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--color-danger);
  line-height: var(--leading-snug);
}
.form__error.is-visible { display: flex; }
.form__error::before { content: '⚠'; flex: none; }

.form__group.has-error .form__label { color: var(--color-danger); }

/* Checkbox / radio */
.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.94rem;
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
  cursor: pointer;
}
.form__check input[type='checkbox'],
.form__check input[type='radio'] {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--color-primary-600);
  cursor: pointer;
}
.form__check-group { display: grid; gap: var(--space-3); }

/* Success / failure banners.
   The success banner is hidden until JS or Formspree's redirect shows it. */
.form-success,
.form-error-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.96rem;
  line-height: var(--leading-normal);
}
.form-success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-primary-200);
  color: var(--color-primary-900);
}
.form-error-summary {
  background: var(--color-danger-bg);
  border: 1px solid #E9C4C4;
  color: #6E1717;
}
.form-success[hidden],
.form-error-summary[hidden] { display: none; }
.form-success__icon,
.form-error-summary__icon { flex: none; font-size: 1.2rem; line-height: 1.3; }
.form-success__title,
.form-error-summary__title {
  display: block;
  font-weight: var(--weight-semibold);
  margin-bottom: 2px;
}
.form-error-summary ul { margin: var(--space-2) 0 0; padding-left: 1.2rem; }

/* Honeypot — must be invisible to humans AND left empty. Never use
   display:none (some bots skip those); this keeps it in the layout tree
   but off-screen. Field name in markup: name="_gotcha" (Formspree). */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.form__consent { font-size: var(--step--1); color: var(--text-muted); }

/* ==========================================================================
   22. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
  padding-block: var(--space-4);
  font-size: var(--step--1);
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}
.breadcrumbs__link {
  color: var(--color-primary-700);
  text-decoration: none;
}
.breadcrumbs__link:hover { color: var(--color-accent-700); text-decoration: underline; }
.breadcrumbs__item[aria-current='page'],
.breadcrumbs__current { color: var(--text-muted); }
.breadcrumbs__sep {
  color: var(--color-ink-faint);
  user-select: none;
}
.breadcrumbs--on-dark .breadcrumbs__link { color: var(--color-accent-300); }
.breadcrumbs--on-dark .breadcrumbs__item,
.breadcrumbs--on-dark .breadcrumbs__sep { color: var(--color-on-dark-muted); }

/* ==========================================================================
   23. FLOATING WHATSAPP BUTTON
   ========================================================================== */

.wa-float {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-whatsapp);
  color: #FFFFFF;
  font-size: 0.94rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), background var(--transition-fast),
              box-shadow var(--transition-fast);
}
.wa-float:hover,
.wa-float:focus-visible {
  background: var(--color-whatsapp-dark);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.wa-float__icon {
  width: 26px; height: 26px;
  flex: none;
}
.wa-float__label { white-space: nowrap; }

/* Gentle attention pulse; killed by prefers-reduced-motion in section 4. */
.wa-float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(18, 128, 64, 0.55);
  animation: wa-pulse 3.4s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(18, 128, 64, 0.5); }
  60%  { box-shadow: 0 0 0 16px rgba(18, 128, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 128, 64, 0); }
}

/* On small screens collapse to a circle so it never covers footer links
   or body copy. Brief §7.1. */
@media (max-width: 640px) {
  .wa-float {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    right: var(--space-3);
    bottom: var(--space-3);
  }
  .wa-float__label {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* When the back-to-top button is showing, stack it above WhatsApp. */
.to-top { bottom: calc(var(--space-4) + 62px); }
@media (max-width: 640px) { .to-top { bottom: calc(var(--space-3) + 66px); } }

/* Give the footer breathing room so the float never sits on the last link */
.site-footer { padding-bottom: calc(var(--space-8) + 40px); }
@media (min-width: 641px) { .site-footer { padding-bottom: var(--space-8); } }

/* ==========================================================================
   24. BACK-TO-TOP BUTTON
   ========================================================================== */

.to-top {
  position: fixed;
  right: var(--space-4);
  z-index: var(--z-float);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--color-primary-800);
  color: var(--color-on-dark);
  border: 1px solid rgba(247, 243, 236, 0.2);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-base), visibility var(--transition-base),
              transform var(--transition-base), background var(--transition-fast);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--color-primary-900); color: var(--color-on-dark); }
.to-top svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .to-top { right: var(--space-3); width: 42px; height: 42px; } }

/* ==========================================================================
   25. FOOTER + NAP
   ========================================================================== */

.site-footer {
  background: var(--color-primary-900);
  color: var(--color-on-dark-muted);
  padding-top: var(--space-9);
  font-size: 0.95rem;
  line-height: var(--leading-normal);
}
.site-footer a { color: var(--color-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-300); text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: var(--space-7) var(--space-5);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-8);
}
@media (min-width: 620px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }

.footer-col { display: grid; gap: var(--space-4); align-content: start; }

.footer-title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin: 0;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.footer-link { display: inline-block; }

/* NAP — Name / Address / Phone. Must match the JSON-LD and the Google
   Business Profile CHARACTER FOR CHARACTER. Do not reformat. */
.nap { display: grid; gap: var(--space-3); font-style: normal; }
.nap__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: var(--weight-semibold);
  color: var(--color-on-dark);
  line-height: var(--leading-snug);
}
.nap__line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.nap__line svg {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 3px;
  color: var(--color-accent-400);
}
.nap__address { font-style: normal; line-height: var(--leading-normal); }
.nap__phone { font-weight: var(--weight-medium); color: var(--color-on-dark); }
.nap__phone:hover { color: var(--color-accent-300); }

/* Secondary contact address in the footer. Deliberately quieter than the NAP
   block above it: smaller, muted, and with a hairline separating the two, so
   a reader can see at a glance which address is the studio. */
.footer-alt {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.88rem;
  line-height: var(--leading-normal);
  color: var(--color-on-dark-muted);
}
.footer-alt__label,
.footer-alt__note { display: block; }
.footer-alt__label {
  margin-bottom: var(--space-1);
  font-size: 0.76rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.footer-alt__note {
  margin-top: var(--space-2);
  font-size: 0.82rem;
  color: var(--color-on-dark-muted);
}

.footer-hours { display: grid; gap: var(--space-1); font-size: 0.92rem; }
.footer-hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 22rem;
}
.footer-hours__day { color: var(--color-on-dark-muted); }
.footer-hours__time { color: var(--color-on-dark); font-variant-numeric: tabular-nums; }

.footer-social { display: flex; gap: var(--space-3); }
.social-link {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: rgba(247, 243, 236, 0.09);
  border: 1px solid rgba(247, 243, 236, 0.16);
  color: var(--color-on-dark);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.social-link:hover {
  background: var(--color-accent-700);
  color: #FFFFFF;
  transform: translateY(-2px);
  text-decoration: none;
}
.social-link svg { width: 18px; height: 18px; }

.footer-areas {
  padding-block: var(--space-5);
  border-top: 1px solid rgba(247, 243, 236, 0.12);
  font-size: 0.9rem;
  color: var(--color-on-dark-muted);
  line-height: var(--leading-relaxed);
}
.footer-areas__label {
  color: var(--color-on-dark);
  font-weight: var(--weight-semibold);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(247, 243, 236, 0.12);
  font-size: 0.86rem;
  color: var(--color-on-dark-muted);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   26. CALLOUTS
   ========================================================================== */

.callout {
  --callout-accent: var(--color-primary-600);
  --callout-bg: var(--color-primary-50);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--callout-accent);
  background: var(--callout-bg);
  color: var(--color-ink-soft);
  font-size: 0.96rem;
  line-height: var(--leading-normal);
}
.callout > * + * { margin-top: 0; }
.callout__icon {
  flex: none;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--callout-accent);
}
.callout__icon svg { width: 22px; height: 22px; }
.callout__body > * + * { margin-top: var(--space-2); }
.callout__title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}
.callout ul, .callout ol { margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.callout li + li { margin-top: var(--space-1); }

.callout--info    { --callout-accent: var(--color-info);    --callout-bg: var(--color-info-bg); }
.callout--tip     { --callout-accent: var(--color-primary-600); --callout-bg: var(--color-primary-50); }
.callout--warning { --callout-accent: var(--color-warning); --callout-bg: var(--color-warning-bg); }
.callout--accent  { --callout-accent: var(--color-accent-600); --callout-bg: var(--color-accent-50); }

/* ---- Medical disclaimer ---------------------------------------------
   MANDATORY on every /health/ page and every blog post about a condition.
   Brief §2 YMYL rules. Use .callout .callout--medical together, or the
   standalone .medical-disclaimer which carries the same styling. */
.callout--medical,
.medical-disclaimer {
  --callout-accent: var(--color-warning);
  --callout-bg: var(--color-warning-bg);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid #E7D3A5;
  border-left: 4px solid var(--color-warning);
  background: var(--color-warning-bg);
  color: #4A3A14;
  font-size: 0.93rem;
  line-height: var(--leading-normal);
}
.medical-disclaimer .callout__title,
.callout--medical .callout__title { color: #4A3A14; }
.medical-disclaimer strong { color: #3B2E0F; }

/* ==========================================================================
   27. CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-y);
  background: var(--color-primary-800);
  color: var(--color-on-dark-muted);
}
/* Soft radial warmth so the band doesn't read as a corporate slab */
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(194, 98, 45, 0.30), transparent 62%),
    radial-gradient(70% 110% at 100% 100%, rgba(62, 129, 104, 0.42), transparent 60%);
}
.cta-band--accent { background: var(--color-accent-800); }
.cta-band--accent::before {
  background: radial-gradient(90% 130% at 10% 0%, rgba(47, 102, 80, 0.42), transparent 62%);
}
.cta-band--cream {
  background: var(--color-cream-200);
  color: var(--color-ink-soft);
}
.cta-band--cream::before {
  background: radial-gradient(80% 120% at 10% 0%, rgba(47, 102, 80, 0.09), transparent 60%);
}
.cta-band--cream .cta-band__title { color: var(--color-primary-900); }
.cta-band--cream .cta-band__text { color: var(--color-ink-soft); }

.cta-band__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
}
@media (min-width: 880px) {
  .cta-band__inner--split {
    grid-template-columns: 1.4fr auto;
    text-align: left;
    gap: var(--space-8);
  }
  .cta-band__inner--split .cta-band__actions { justify-content: flex-end; }
}

.cta-band__eyebrow {
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.cta-band__title {
  font-size: var(--step-3);
  color: var(--color-on-dark);
  margin-bottom: var(--space-3);
}
.cta-band__text {
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  color: var(--color-on-dark-muted);
  max-width: 44rem;
  margin-inline: auto;
}
.cta-band__inner--split .cta-band__text { margin-inline: 0; }
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ==========================================================================
   28. STAT COUNTER ROW
   ========================================================================== */

.stat-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}
@media (min-width: 800px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .stat-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stat-row--bordered .stat + .stat { border-left: 1px solid var(--border-color); }
@media (max-width: 799px) {
  .stat-row--bordered .stat:nth-child(odd) { border-left: 0; }
}

.stat { padding: var(--space-4) var(--space-2); }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  font-weight: var(--weight-heavy);
  line-height: 1;
  color: var(--color-primary-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat__num--accent { color: var(--color-accent-700); }
.stat__suffix { font-size: 0.6em; }

/* ---------------------------------------------------------------------------
 * .stat__num--todo — a stat whose number the owner hasn't supplied yet.
 *
 * A stat slot renders its value in ~50px display type. A placeholder token
 * like STUDENTS_PLACEHOLDER is 20 unbreakable characters, so at that size it
 * blows straight out of its grid column and lands on top of its neighbour.
 * Shrinking it isn't enough on its own — the point is that an unfilled stat
 * should *look* unfilled, so it reads as a to-do rather than a broken layout.
 *
 * Renders as a small dashed chip. Delete the modifier once the real number
 * is in; nothing else needs changing.
 * ------------------------------------------------------------------------ */
.stat__num--todo {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
  display: inline-block;
  max-width: 100%;
  padding: 0.35em 0.6em;
  border: 1px dashed var(--color-primary-300);
  border-radius: var(--radius-sm);
  background: var(--color-primary-50);
}
/* Safety net: no stat value, whatever the client types in, may ever spill
   over the one beside it. */
.stat__num { overflow-wrap: anywhere; min-width: 0; }
.stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: 0.03em;
  color: var(--text-muted);
  line-height: var(--leading-snug);
}
.section--dark .stat__num,
.cta-band .stat__num { color: var(--color-accent-300); }
.section--dark .stat__label,
.cta-band .stat__label { color: var(--color-on-dark-muted); }

/* ==========================================================================
   29. PROSE / ARTICLE TYPOGRAPHY
   ========================================================================== */

/* Wrap long-form body copy in <div class="prose"> (blog posts, health
   pages, about). Everything inside gets sensible defaults so writers
   never need a class on a paragraph. */
.prose {
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  max-width: var(--container-narrow);
}
.prose--wide { max-width: 68ch; }
.prose--full { max-width: none; }

.prose > * + * { margin-block-start: var(--space-5); }

.prose h2 {
  font-size: var(--step-3);
  margin-block-start: var(--space-9);
  margin-block-end: var(--space-4);
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}
.prose h2:first-child { margin-block-start: 0; }
.prose h3 {
  font-size: var(--step-2);
  margin-block-start: var(--space-7);
  margin-block-end: var(--space-3);
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}
.prose h4 {
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  margin-block-start: var(--space-6);
  margin-block-end: var(--space-2);
}
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-block-start: 0; }

.prose p { margin-block: 0; }
.prose a { color: var(--link-color); text-decoration: underline; }
.prose a:hover { color: var(--link-hover); }

.prose ul,
.prose ol {
  padding-left: 1.4rem;
  display: grid;
  gap: var(--space-2);
}
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
  position: relative;
  padding-left: 1.6rem;
}
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.68em;
  width: 7px; height: 7px;
  border-radius: var(--radius-circle);
  background: var(--color-accent-400);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker {
  color: var(--color-primary-700);
  font-weight: var(--weight-semibold);
}
.prose li > ul,
.prose li > ol { margin-top: var(--space-2); }

.prose blockquote {
  margin-inline: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-accent-400);
  background: var(--color-accent-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--color-ink);
  line-height: var(--leading-normal);
}
.prose blockquote p + p { margin-top: var(--space-3); }
.prose blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Tables inside prose get the .data-table look automatically, and always
   scroll rather than overflowing. Wrap in .table-scroll for wide tables. */
.prose table {
  width: 100%;
  font-size: 0.95rem;
  text-align: left;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.prose thead th {
  background: var(--color-primary-50);
  color: var(--color-primary-800);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.prose th,
.prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) td { background: var(--color-surface-2); }

.prose figure { margin-inline: 0; }
.prose figure img { border-radius: var(--radius-lg); width: 100%; }
.prose figcaption {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  text-align: center;
}

.prose hr {
  margin-block: var(--space-8);
  border-top: 1px solid var(--border-color);
}

.prose dl { display: grid; gap: var(--space-3); }
.prose dt { font-weight: var(--weight-semibold); color: var(--color-ink); }
.prose dd { margin: 0 0 0 var(--space-4); }

.prose .lead:first-of-type { color: var(--color-ink); }

/* Table of contents for long health/blog pages */
.toc {
  padding: var(--space-5);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-md);
}
.toc__title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary-800);
  margin-bottom: var(--space-3);
}
.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: 0.94rem;
}
.toc__list a { color: var(--color-primary-700); text-decoration: none; }
.toc__list a:hover { color: var(--color-accent-700); text-decoration: underline; }

/* ==========================================================================
   30. AUTHOR BYLINE
   ========================================================================== */

/* Brief §2: every health page carries Ritika's credential byline inline.
   Compact form goes under the H1; the full card goes at the article foot. */
.byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step--1);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.byline__avatar {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-circle);
  overflow: hidden;
  background: var(--color-primary-100);
  display: grid;
  place-items: center;
  color: var(--color-primary-800);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}
.byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline__body { display: grid; gap: 1px; }
.byline__name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.byline__name a { color: inherit; text-decoration: none; }
.byline__name a:hover { color: var(--color-accent-700); text-decoration: underline; }
.byline__cred { color: var(--text-muted); font-size: var(--step--1); }
.byline__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.byline__sep { color: var(--color-ink-faint); }

/* Full author card */
.byline--card {
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-lg);
  font-size: 0.96rem;
  color: var(--color-ink-soft);
}
.byline--card .byline__avatar { width: 84px; height: 84px; font-size: 1.5rem; }
.byline--card .byline__body { gap: var(--space-2); flex: 1 1 260px; }
.byline--card .byline__name { font-family: var(--font-display); font-size: var(--step-1); }
.byline--card .byline__bio { line-height: var(--leading-normal); }

/* ==========================================================================
   31. RELATED POSTS STRIP
   ========================================================================== */

.related {
  padding-block: var(--space-8);
  border-top: 1px solid var(--border-color);
}
.related__title {
  font-size: var(--step-2);
  margin-bottom: var(--space-5);
}
.related__strip {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 700px) { .related__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Scrolling variant on mobile */
@media (max-width: 699px) {
  .related__strip--scroll {
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 300px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    -webkit-overflow-scrolling: touch;
  }
  .related__strip--scroll > * { scroll-snap-align: start; }
}

.related-card {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.related-card:hover {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.related-card__kicker {
  font-size: 0.72rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.related-card__title {
  font-size: var(--step-0);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}
.related-card__title a { color: inherit; text-decoration: none; }
.related-card__title a::after { content: ''; position: absolute; inset: 0; }
.related-card__title a:hover { color: var(--color-primary-700); }
.related-card__meta { font-size: var(--step--1); color: var(--text-muted); }

/* ==========================================================================
   32. PAGINATION
   ========================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}
.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 42px;
  height: 42px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: 0.94rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}
.pagination__link:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-800);
}
.pagination__link.is-current,
.pagination__link[aria-current='page'] {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #FFFFFF;
  font-weight: var(--weight-semibold);
}
.pagination__link.is-disabled,
.pagination__link[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
}
.pagination__ellipsis {
  padding-inline: var(--space-2);
  color: var(--text-muted);
}
.pagination__prev, .pagination__next { font-weight: var(--weight-semibold); }

/* ==========================================================================
   33. 404 LAYOUT
   ========================================================================== */

.error-page {
  display: grid;
  place-items: center;
  min-height: clamp(460px, 66vh, 720px);
  padding-block: var(--section-y);
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 0%, var(--color-primary-50), transparent 70%),
    var(--color-cream);
}
.error-page__inner { max-width: 44rem; }
.error-code {
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: var(--weight-heavy);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-primary-200);
  margin-bottom: var(--space-4);
}
.error-title {
  font-size: var(--step-3);
  margin-bottom: var(--space-4);
}
.error-text {
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-6);
}
.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-7);
}
.error-suggestions {
  display: grid;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.error-suggestions__title {
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   34. SCROLL REVEAL
   ========================================================================== */

/* Add .reveal to any block you want to fade up on scroll. main.js adds
   .is-visible via IntersectionObserver. If JS is off OR the observer is
   unsupported, main.js reveals everything immediately — and the
   prefers-reduced-motion block in section 4 forces full opacity too.
   NEVER put content in .reveal that must be visible before JS loads
   above the fold; the CSS below only dims it once .js-on is present. */
.js-on .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--reveal-duration) var(--ease-out),
              transform var(--reveal-duration) var(--ease-out);
  will-change: opacity, transform;
}
.js-on .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.js-on .reveal--left { transform: translateX(-22px); }
.js-on .reveal--right { transform: translateX(22px); }
.js-on .reveal--scale { transform: scale(0.97); }
.js-on .reveal--left.is-visible,
.js-on .reveal--right.is-visible,
.js-on .reveal--scale.is-visible { transform: none; }

/* Stagger children: add .reveal-stagger to the parent, .reveal to each child */
.js-on .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.js-on .reveal-stagger > .reveal:nth-child(2) { transition-delay: 70ms; }
.js-on .reveal-stagger > .reveal:nth-child(3) { transition-delay: 140ms; }
.js-on .reveal-stagger > .reveal:nth-child(4) { transition-delay: 210ms; }
.js-on .reveal-stagger > .reveal:nth-child(5) { transition-delay: 280ms; }
.js-on .reveal-stagger > .reveal:nth-child(6) { transition-delay: 350ms; }
.js-on .reveal-stagger > .reveal:nth-child(7) { transition-delay: 420ms; }
.js-on .reveal-stagger > .reveal:nth-child(8) { transition-delay: 490ms; }

/* Long grids (the 16-item gallery) cycle the delay every four children, so a
   tile never waits a full second to appear the way a linear stagger would. */
.js-on .reveal-stagger--cycle > .reveal { transition-delay: 0ms; }
.js-on .reveal-stagger--cycle > .reveal:nth-child(4n+2) { transition-delay: 60ms; }
.js-on .reveal-stagger--cycle > .reveal:nth-child(4n+3) { transition-delay: 120ms; }
.js-on .reveal-stagger--cycle > .reveal:nth-child(4n+4) { transition-delay: 180ms; }

/* ==========================================================================
   35. UTILITIES
   ========================================================================== */

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
@media (min-width: 900px) {
  .md\:text-left   { text-align: left; }
  .md\:text-center { text-align: center; }
}

/* Font size helpers */
.text-sm { font-size: var(--step--1); }
.text-xs { font-size: var(--step--2); }
.text-lg { font-size: var(--step-1); }
.text-balance { text-wrap: balance; }

/* Weight */
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }
.font-display  { font-family: var(--font-display); }
.font-body     { font-family: var(--font-body); }

/* Margin — top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }

/* Margin — bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-9 { margin-bottom: var(--space-9); }

/* Margin inline auto */
.mx-auto { margin-inline: auto; }

/* Padding — block */
.py-0 { padding-block: 0; }
.py-4 { padding-block: var(--space-4); }
.py-5 { padding-block: var(--space-5); }
.py-6 { padding-block: var(--space-6); }
.py-7 { padding-block: var(--space-7); }
.py-8 { padding-block: var(--space-8); }
.py-9 { padding-block: var(--space-9); }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

/* Grid column utilities — pair with .grid */
.cols-1 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols-md-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.col-span-2 { grid-column: span 2; }
.col-span-full { grid-column: 1 / -1; }

/* Display */
.hide { display: none !important; }
@media (max-width: 699px) { .hide-mobile { display: none !important; } }
@media (min-width: 700px) { .hide-desktop { display: none !important; } }

/* Max width */
.measure { max-width: 62ch; }
.measure-narrow { max-width: 46ch; }

/* Colour helpers on backgrounds */
.bg-tint { background: var(--bg-tint); }
.bg-surface { background: var(--color-surface); }
.bg-sage { background: var(--color-primary-50); }

/* Rounded / shadow helpers */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }

/* Map embed wrapper — keeps the Google iframe responsive + no CLS */
.map-embed {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--color-cream-200);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (min-width: 700px) { .map-embed { aspect-ratio: 16 / 8; } }

/* Reviews widget drop zone (Elfsight / Trustindex) */
.reviews-widget {
  min-height: 320px;
  padding: var(--space-5);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}

/* ==========================================================================
   36. PRINT
   ========================================================================== */

@media print {
  :root {
    --bg-body: #FFFFFF;
    --text-body: #000000;
    --text-heading: #000000;
  }

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    animation: none !important;
  }

  body {
    font-size: 11.5pt;
    line-height: 1.45;
    background: #FFFFFF;
  }

  /* Chrome that has no meaning on paper */
  .site-header,
  .nav,
  .nav-toggle,
  .mobile-nav,
  .nav-backdrop,
  .wa-float,
  .to-top,
  .skip-link,
  .slider__controls,
  .slider__dots,
  .filter-bar,
  .lightbox,
  .tabs__list,
  .breadcrumbs,
  .cta-band,
  .related,
  .pagination,
  .hero__actions,
  .reviews-widget,
  .map-embed,
  .form,
  .gallery { display: none !important; }

  /* Reveal-on-scroll must never hide printed content */
  .reveal,
  .js-on .reveal { opacity: 1 !important; transform: none !important; }

  /* Nor may the hero entrance animation, if printing starts mid-animation */
  .hero__eyebrow,
  .hero__title,
  .hero__lede,
  .hero__badges,
  .hero__img { animation: none !important; opacity: 1 !important; transform: none !important; }

  /* Tabs: print every panel */
  .tabs__panel[hidden] { display: block !important; }
  .tabs__panel-title--nojs { display: block !important; }

  /* Accordions: print every answer */
  .accordion__item .accordion__content { display: block !important; }
  .accordion__icon { display: none !important; }

  a { text-decoration: underline; }
  /* Print the destination of content links, not of nav chrome */
  .prose a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
  .prose a[href^='#']::after { content: ''; }

  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid-page; }
  p, li, blockquote, figure, table { page-break-inside: avoid; break-inside: avoid; }
  img { max-width: 100% !important; page-break-inside: avoid; }

  .table-scroll { overflow: visible !important; border: 1px solid #999 !important; }
  .timetable, .pricing-table { min-width: 0 !important; }
  .timetable th, .timetable td,
  .data-table th, .data-table td,
  .prose th, .prose td { border: 1px solid #999 !important; }

  .callout,
  .medical-disclaimer,
  .callout--medical { border: 1px solid #666 !important; }

  .site-footer { border-top: 1px solid #999; padding: 12pt 0 0; }
  .footer-social, .footer-legal { display: none !important; }

  @page { margin: 16mm; }
}

/* ==========================================================================
   HERO ENTRANCE
   Pure CSS, no JavaScript, so it runs even with JS disabled — and because the
   elements animate *from* transparent rather than being parked at opacity 0,
   a browser that cannot run the animation simply shows them. The
   reduced-motion block below removes the animation outright rather than
   relying on the global duration clamp in section 4, which does not reset
   animation-delay and would otherwise leave a hero blank for ~0.4s.
   ========================================================================== */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* A single slow settle on load. Deliberately not a looping ken-burns: endless
   drift is restless on a page about being still, and it costs battery. */
@keyframes hero-settle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.hero__eyebrow,
.hero__title,
.hero__lede,
.hero__actions,
.hero__badges {
  animation: hero-rise 700ms var(--ease-out) both;
}
.hero__eyebrow { animation-delay: 60ms; }
.hero__title   { animation-delay: 140ms; }
.hero__lede    { animation-delay: 240ms; }
.hero__actions { animation-delay: 340ms; }
.hero__badges  { animation-delay: 430ms; }

.hero__img { animation: hero-settle 1800ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__title,
  .hero__lede,
  .hero__actions,
  .hero__badges,
  .hero__img {
    animation: none !important;
  }
}

/* ==========================================================================
   CURVES
   Three shape treatments, added after the review of 9 Sep 2026. All of them
   reuse the radius tokens already in section 3 — no new hard-coded values.

   The radii are deliberately larger on wide screens and smaller on phones:
   a 56px corner on a 360px-wide panel eats the content, so every large
   radius below is set inside a min-width query.
   ========================================================================== */

/* ── 2. Asymmetric corners ─────────────────────────────────────────────
   One corner pair heavily rounded, the other pair nearly square. Reads as
   deliberate rather than as a default rounded box. The diagonal runs
   top-left / bottom-right so a grid of cards leans the same way. */
.card,
.price-card,
.testimonial {
  border-radius: var(--radius-2xl) var(--radius-sm) var(--radius-2xl) var(--radius-sm);
}
.related-card {
  border-radius: var(--radius-xl) var(--radius-xs) var(--radius-xl) var(--radius-xs);
}
.media--soft {
  border-radius: var(--radius-2xl) var(--radius-sm) var(--radius-2xl) var(--radius-sm);
}
/* Round images and full-bleed card media must not poke out of the corner. */
.card { overflow: hidden; }

/* .card--flat keeps its quiet, even corners — it is used inside other
   cards, where a second asymmetric shape would fight the parent. */
.card--flat { border-radius: var(--radius-md); }

/* ── 4. Floating panels instead of full-bleed tinted bands ─────────────
   Every .section--tint and .section--sage on the site contains exactly one
   .container, so the tint can move from the section to that container and
   become a rounded panel sitting on the cream page. Pure CSS: no markup
   changed on any of the 124 sections.

   The panel inherits the container's own max-width, so wide pages get wide
   panels and long-form prose pages get narrow ones — consistent within any
   single page, which is where it is noticed. */
.section--tint,
.section--sage {
  background: transparent;
  padding-block: var(--space-5);
}
.section--tint > .container,
.section--sage > .container {
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
  border-radius: var(--radius-2xl);
  border: 1px solid transparent;
}
/* The hairline is doing real work, not decoration. The tint sits at only
   1.08:1 against the cream page — plenty for a full-bleed band, where the
   eye reads the edge across the whole width, but far too little for a
   rounded panel, where the corner is the whole point. Without the border
   the curve is invisible. */
.section--tint > .container {
  background: var(--bg-tint);
  border-color: var(--color-cream-300);
}
.section--sage > .container {
  background: var(--color-primary-50);
  border-color: var(--color-primary-100);
}

/* On a phone the container is the full viewport width, so a panel would run
   edge to edge and the screen would slice its corners off. Pull it in and
   drop the radius to something proportionate to a 360px-wide panel. */
@media (max-width: 699px) {
  .section--tint > .container,
  .section--sage > .container {
    width: auto;
    margin-inline: var(--space-3);
    border-radius: var(--radius-xl);
  }
}

@media (min-width: 700px) {
  .section--tint > .container,
  .section--sage > .container {
    border-radius: 48px;
    padding-inline: clamp(2rem, 1rem + 4vw, 4rem);
  }
}

/* A panel immediately following another gets a tighter gap, so a run of
   them reads as a stack rather than as scattered slabs. */
.section--tint + .section--tint,
.section--tint + .section--sage,
.section--sage + .section--tint,
.section--sage + .section--sage { padding-block-start: 0; }

/* Wide content — timetables, asana tables — is allowed to reach closer to
   the panel edge on small screens, where padding is scarcest. */
@media (max-width: 699px) {
  .section--tint > .container > .table-scroll,
  .section--sage > .container > .table-scroll {
    margin-inline: calc(var(--gutter) * -0.5);
  }
}

/* ── 5. Curved caps on the dark bands ──────────────────────────────────
   The CTA band and the footer end the page on a curve. .cta-band already
   sets overflow:hidden for its radial wash, so the radius clips correctly. */
.cta-band { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.site-footer { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }

/* Where a CTA band ends the page, only that band curves. Two stacked curves
   in the same green family read as a mistake rather than a flourish.
   Note the :has() — the band lives inside <main>, so it is NOT an adjacent
   sibling of the footer and a `.cta-band + .site-footer` rule never matches.
   Deliberately not `:last-child`: on the gallery the lightbox <div> is the
   final child of <main>, so the band is second-to-last there while still
   being the last thing visible. On 404 and privacy, which have no closing
   band, the footer keeps its own curve because there it sits on cream. */
main:has(> .cta-band) + .site-footer { border-radius: 0; }

@media (min-width: 700px) {
  .cta-band,
  .site-footer { border-radius: 48px 48px 0 0; }
  main:has(> .cta-band) + .site-footer { border-radius: 0; }
}

/* ── 3. Organic photo shape ────────────────────────────────────────────
   Opt-in only, via .media--organic on the wrapper. Not applied to every
   image: the mask crops the corners of the frame, so it suits a portrait
   where the subject sits well inside the edges and nothing else.
   Falls back to a plain soft rectangle below 700px, where the shape is too
   small to read as intentional. */
.media--organic { border-radius: var(--radius-2xl); overflow: hidden; }
@media (min-width: 700px) {
  .media--organic {
    border-radius: 58% 42% 52% 48% / 48% 54% 46% 52%;
  }
  .media--organic.media--organic-alt {
    border-radius: 46% 54% 43% 57% / 55% 45% 55% 45%;
  }
}

/* ── 6. Journey router ─────────────────────────────────────────────────
   Three doors under the homepage hero. Each card is one <a>, so the whole
   tile is the hit target rather than a small link inside it. */
.router__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-cream-300);
  border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-2xl) var(--radius-sm);
  text-decoration: none;
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.router__card:hover,
.router__card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-primary-400);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.router__kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.router__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-primary-900);
}
.router__text {
  flex: 1;
  font-size: 0.94rem;
  color: var(--color-ink-soft);
}
.router__go {
  font-size: 0.92rem;
  font-weight: var(--weight-semibold);
  color: var(--color-primary-600);
}
.router__go::after {
  content: ' \2192';
  display: inline-block;
  transition: transform var(--transition-fast);
}
.router__card:hover .router__go::after { transform: translateX(4px); }

@media (min-width: 700px) {
  .router__card { border-radius: 40px 40px 40px var(--radius-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .router__card:hover,
  .router__card:focus-visible { transform: none; }
  .router__card:hover .router__go::after { transform: none; }
}

/* Print: curves cost ink and mean nothing on paper. */
@media print {
  .card,
  .price-card,
  .testimonial,
  .related-card,
  .media--soft,
  .media--organic,
  .cta-band,
  .site-footer,
  .section--tint > .container,
  .section--sage > .container,
  .router__card { border-radius: 0 !important; }
}