/* ==========================================================================
   Jnaneshwari Ayush Foundation's (R) — Sanatana Bharat Holistic Healing Solutions
   Main Stylesheet
   --------------------------------------------------------------------------
   01. Design Tokens
   02. Reset & Base
   03. Typography
   04. Layout Helpers
   05. Buttons
   06. Decorative Elements (leaves, blobs, waves, dividers)
   07. Preloader & Scroll Progress
   08. Header / Navigation
   09. Page Hero (inner pages)
   10. Home Hero
   11. Section: About Preview
   12. Section: Philosophy
   13. Section: Services
   14. Section: Conditions
   15. Section: Guided Meditation
   16. Section: Healing Process (timeline)
   17. Section: Why Choose Us + Counters
   18. Section: Testimonials Slider
   19. Section: Events
   20. Section: Courses
   21. Section: Gallery + Lightbox
   22. Section: FAQ Accordion
   23. Section: Contact + Forms
   24. Footer
   25. Utility Pages (404 / Thank You)
   26. Reveal Animations
   27. Back To Top / Floating Actions
   28. Reference-Aligned Components
   29. Header & Footer — reference alignment
   30. Accreditation Marquee
   31. Lifestyle Rows (alternating narrative blocks)
   32. Video Band
   33. Header & Footer — brand redesign (logo palette)
   ========================================================================== */

/* ==========================================================================
   01. Design Tokens
   ========================================================================== */
:root {
  /* --- Brand ramps, sampled from the logo -----------------------------------
     Four colours were measured off assets/images/logo.png:

       #261E3A  navy-plum   the interlaced symbol and the SANATANA wordmark
       #DA4526  vermillion  the outer ring
       #37713E  leaf green  the leaf crown
       #B92235  crimson     the centre disc

     Navy-plum carries the dark weight of the site, vermillion is the accent
     and CTA colour, leaf green supports, and crimson is kept for small
     highlights. The warm cream neutrals are unchanged — the logo is drawn on
     a warm white ground and the pairing is what makes the navy read as ink
     rather than as corporate blue. */

  --navy-950: #16112A;
  --navy-900: #241B38;
  --navy-800: #2F2447;
  --navy-700: #3D3059;
  --navy-600: #4C3C6D;
  --navy-500: #61508A;
  --navy-300: #A79DC0;
  --navy-200: #CCC6DA;
  --navy-100: #E9E5F0;

  --vermillion-700: #A82F16;
  --vermillion-600: #C43B1E;
  --vermillion-500: #DA4526;
  --vermillion-400: #F0805F;
  --vermillion-200: #F9D2C4;

  --leaf-700: #24592C;
  --leaf-600: #37713E;
  --leaf-500: #4C8A54;
  --leaf-300: #9CC4A1;
  --leaf-100: #E9EFE7;

  --crimson-600: #B92235;
  --crimson-500: #D33B4C;

  /* --- Legacy ramp names ---------------------------------------------------
     The stylesheet below was written against a green-and-gold palette. Rather
     than rewrite ~4,700 lines of references, each old name now points at its
     counterpart in the logo ramps above. Read "forest" as navy-plum and
     "gold" as vermillion; the names are historical, the values are current. */
  --forest-950: var(--navy-950);
  --forest-900: var(--navy-900);
  --forest-800: var(--navy-800);
  --forest-700: var(--navy-700);
  --forest-600: var(--navy-600);
  --green-500: var(--leaf-600);
  --green-400: var(--leaf-500);
  --sage-300: var(--leaf-300);
  --sage-200: #D3E0D2;
  --sage-100: var(--leaf-100);

  /* Third stop of the dark gradient — a plum that keeps the band from going
     flat without dragging a second hue into it. */
  --olive-700: #3A2A52;
  --olive-600: #4A3866;
  --olive-500: #5B477C;

  /* --- Brand: Secondary neutrals --- */
  --warm-white: #FDFBF6;
  --cream: #F8F2E7;
  --beige: #EFE4D2;
  --sand: #E1D2B7;
  --sand-deep: #CDB894;

  /* --- Brand: Accents --- */
  --gold-600: var(--vermillion-600);
  --gold-500: var(--vermillion-500);
  --gold-400: var(--vermillion-400);
  --gold-200: var(--vermillion-200);
  --earth-700: var(--crimson-600);
  --earth-500: var(--crimson-500);

  /* --- Text --- */
  --ink: #241E33;
  --ink-soft: #4C4560;
  --ink-muted: #6E6782;
  --on-dark: #F4F1E9;
  --on-dark-soft: #CBC6D6;

  /* --- Surfaces ---
     The reference sites sit on a warm off-white base rather than pure white,
     with the deep brand colour reserved for accent bands and the footer.
     Neither uses pure #FFF anywhere — card surfaces carry a trace of the
     cream base so nothing reads as clinical white. */
  --surface: #FEFCF8;
  --surface-alt: var(--warm-white);
  --surface-tint: var(--cream);
  --page-base: #FAF6EE;
  --line: rgba(36, 30, 51, 0.10);
  --line-strong: rgba(36, 30, 51, 0.18);

  /* --- Gradients --- */
  --grad-forest: linear-gradient(135deg, var(--forest-900) 0%, var(--forest-700) 55%, var(--olive-700) 100%);
  --grad-gold: linear-gradient(120deg, var(--vermillion-700) 0%, var(--vermillion-600) 50%, var(--vermillion-700) 100%);
  --grad-cream: linear-gradient(180deg, var(--warm-white) 0%, var(--cream) 100%);
  --grad-sage: linear-gradient(140deg, var(--sage-100) 0%, var(--cream) 60%, var(--beige) 100%);
  --grad-glass: linear-gradient(140deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.38) 100%);

  /* --- Typography --- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Type scale ----------------------------------------------------------
     Retuned against measured targets rather than by eye. The old h2 resolved
     to 51.8px at 1440 — oversized, and a large part of why the page ran to
     23,000px. Each step below is written as `min + vw` so the middle of the
     range lands on the target at real breakpoints, not just at the extremes:

       h2   390 -> 26px   768 -> 31px   1024 -> 36px   1440 -> 44px   cap 48px
       body 390 -> 15px                 1024 -> 16px   1440 -> 17px   cap 17px

     Hero is capped at 3.6rem (57.6px): large enough to lead the page, small
     enough that the first screen still shows the CTAs. */
  --fs-hero: clamp(2rem, 1.5rem + 2.5vw, 3.6rem);
  --fs-h1: clamp(1.875rem, 1.35rem + 2.2vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.1rem + 1.8vw, 3rem);
  --fs-h3: clamp(1.18rem, 1rem + 0.6vw, 1.6rem);
  --fs-h4: clamp(1.02rem, 0.95rem + 0.28vw, 1.2rem);
  /* Raised one step on request: 16px on phones -> ~18px on desktop
     (was 15 -> 17). Line-height stays in the 1.5–1.7 band below. */
  --fs-body: clamp(1rem, 0.94rem + 0.2vw, 1.125rem);
  --fs-small: 0.86rem;
  --fs-eyebrow: 0.72rem;

  /* --- Spacing scale -------------------------------------------------------
     One 8px-based ramp for the whole site. Every gap in the homepage comes
     from this list — no ad-hoc 100px/120px/150px values anywhere. */
  --sp-1: 0.5rem;    /*  8 */
  --sp-2: 0.75rem;   /* 12 */
  --sp-3: 1rem;      /* 16 */
  --sp-4: 1.25rem;   /* 20 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 2.5rem;    /* 40 */
  --sp-8: 3rem;      /* 48 */
  --sp-9: 4rem;      /* 64 */

  /* Legacy names, mapped onto the ramp so the ~5,000 lines written against
     them land on the scale instead of near it. */
  --space-3xs: 0.35rem;
  --space-2xs: var(--sp-2);
  --space-xs: var(--sp-3);
  --space-sm: var(--sp-4);
  --space-md: var(--sp-6);
  --space-lg: var(--sp-7);
  --space-xl: var(--sp-8);
  --space-2xl: var(--sp-9);

  /* Section rhythm. Was clamp(5rem, 9vw, 10rem) — 129.6px top AND bottom at
     1440, so 259px of dead space between every section across eighteen of
     them. Now 40px (mobile) -> 50px (768) -> 57px (1024) -> 67px (1440),
     capped at 80px. */
  /* Solved against the brief's three tiers rather than eyeballed:
     480px -> 45px, 768px -> 54px, 1280px and up -> 70px (capped).

     Tightened again on review: the tiers above still read as too airy once
     every section carried them top and bottom. Now 36px (480) -> 42px (768)
     -> 54px (1280 and up), roughly a fifth off each edge — so about 32px
     less between any two sections. */
  --section-y: clamp(2.25rem, 1.65rem + 1.95vw, 3.4rem);

  --container: 1240px;
  --container-wide: 1400px;
  --container-narrow: 860px;
  /* 40px desktop / 24px tablet / 15px phone, per the brief. Stepped rather
     than fluid so each tier lands on its exact value; steps in responsive.css. */
  --gutter: 2.5rem;

  /* --- Radii ---
     --r-card is the single value every card, panel and media frame uses, so
     nothing on the page rounds by a different amount than its neighbour. */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-card: 18px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-organic: 62% 38% 46% 54% / 52% 44% 56% 48%;
  --r-pill: 999px;
  /* Signature shapes of the reference templates */
  --r-arch: 50% 50% 14px 14px / 32% 32% 14px 14px;
  --r-arch-deep: 50% 50% 6px 6px / 40% 40% 6px 6px;
  --r-leaf: 46% 4% 46% 4% / 46% 4% 46% 4%;

  /* --- Shadows ---
     Tinted with the navy-plum rather than neutral black, so shadows sit in
     the same hue family as the brand instead of greying the cream base. */
  --sh-xs: 0 2px 8px rgba(28, 21, 46, 0.05);
  --sh-sm: 0 8px 25px rgba(28, 21, 46, 0.06);
  --sh-md: 0 15px 35px rgba(28, 21, 46, 0.10);
  --sh-lg: 0 28px 60px -28px rgba(28, 21, 46, 0.30);
  --sh-gold: 0 14px 32px -16px rgba(196, 59, 30, 0.42);

  /* Card border — one hairline value shared by every card on the page */
  --card-border: 1px solid rgba(28, 21, 46, 0.08);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 0.85, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.25s var(--ease-soft);
  --t-base: 0.45s var(--ease-out);
  --t-slow: 0.9s var(--ease-out);

  --header-h: 86px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  /* The closed mobile drawer is parked off-screen to the right. `clip` stops
     that creating a horizontal scrollbar — unlike `hidden`, it does not
     break `position: sticky` on the header. */
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--page-base);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Must be `clip`, not `hidden`, for the same reason as `html` above:
     `overflow-x: hidden` turns <body> into a scroll container, and a sticky
     child then sticks to *that* box instead of the viewport — which stops
     the header sticking at all in Chrome and Safari. `clip` still contains
     the off-screen drawer but creates no scroll container. */
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

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

a {
  color: var(--forest-700);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover { color: var(--gold-600); }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

button { background: none; border: 0; cursor: pointer; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-md) 0;
}

::selection {
  background: var(--gold-200);
  color: var(--forest-900);
}

/* Accessible focus ring */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Screen-reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 2000;
  padding: 0.8rem 1.4rem;
  background: var(--forest-800);
  color: var(--on-dark);
  border-radius: var(--r-xs);
  transition: top var(--t-fast);
}

.skip-link:focus { top: 16px; color: var(--on-dark); }

/* Custom scrollbar (progressive enhancement) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: var(--sage-300);
  border-radius: var(--r-pill);
  border: 2px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--green-500); }

/* ==========================================================================
   03. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--forest-900);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--forest-800); }

.lead {
  font-family: var(--font-serif);
  font-size: clamp(1.04rem, 1.45vw, 1.24rem);
  line-height: 1.85;
  color: var(--ink-soft);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--grad-gold);
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--grad-gold);
}

.eyebrow--light { color: var(--gold-400); }

/* Gold accented word inside headings */
.accent {
  font-style: italic;
  color: var(--gold-600);
}

.accent--light { color: var(--gold-400); }

/* Decorative sanskrit-flavoured quote */
.quote-block {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.5rem, 4vw, 3.4rem);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--forest-800);
  border-left: 3px solid var(--gold-400);
  background: var(--grad-glass);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Quote on a dark / forest background */
.quote-block--light,
.section--forest .quote-block,
.utility .quote-block {
  color: var(--warm-white);
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--gold-400);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.quote-block--light cite,
.section--forest .quote-block cite,
.utility .quote-block cite { color: var(--on-dark-soft); }

.quote-block cite {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   04. Layout Helpers
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
  overflow: clip;
}

.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.section--cream { background: var(--grad-cream); }
.section--sage { background: var(--grad-sage); }
.section--beige { background: linear-gradient(180deg, var(--cream) 0%, var(--beige) 100%); }

.section--forest {
  background: var(--grad-forest);
  color: var(--on-dark-soft);
}

.section--forest h1,
.section--forest h2,
.section--forest h3,
.section--forest h4 { color: var(--warm-white); }

.section--forest .lead { color: var(--on-dark-soft); }

.section-head {
  max-width: 760px;
  margin-bottom: clamp(1.6rem, 2.6vw, 2.4rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p { color: var(--ink-soft); }
.section--forest .section-head p { color: var(--on-dark-soft); }

/* Two-column split with sticky option */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
.split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
.split--top { align-items: start; }

.sticky-col { position: sticky; top: calc(var(--header-h) + 30px); }

/* Generic responsive grids */
.grid { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.text-center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-0 { margin-bottom: 0; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

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

/* Bullet list with leaf markers */
.leaf-list { display: grid; gap: 0.75rem; }

.leaf-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.leaf-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 12px;
  background: var(--grad-gold);
  border-radius: 62% 38% 46% 54% / 52% 44% 56% 48%;
  transform: rotate(-18deg);
}

.section--forest .leaf-list li { color: var(--on-dark-soft); }

/* Chip / tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-700);
  background: var(--sage-100);
  border: 1px solid rgba(76, 60, 109, 0.16);
  border-radius: var(--r-pill);
}

.chip--gold {
  color: var(--gold-600);
  background: var(--gold-200);
  border-color: rgba(196, 59, 30, 0.22);
}

.chip--dark {
  color: var(--gold-400);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(240, 128, 95, 0.3);
}

/* Media frames */
.media-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--sage-100);
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.media-frame:hover img { transform: scale(1.06); }

.media-frame--organic { border-radius: var(--r-organic); }
.media-frame--tall { aspect-ratio: 3 / 4; }
.media-frame--square { aspect-ratio: 1 / 1; }
.media-frame--wide { aspect-ratio: 16 / 10; }

/* For a finished poster rather than a photograph. guided-meditation.jpeg is
   a 1080x629 collage whose headings and bullet copy run right out to its
   edges, so the frame takes the artwork's own ratio and contains it: in the
   16:10 frame, cover was trimming roughly 7% off either side and taking the
   lettering with it. Ratio in equals ratio out, so nothing crops and no band
   is left to fill. The zoom-on-hover comes off too — that is a photographic
   gesture, and on set type it only softens the lettering.

   Sized off the file: swap the artwork and this ratio has to follow. */
.media-frame--poster {
  aspect-ratio: 1080 / 629;
  background: var(--cream);
}

.media-frame--poster img {
  object-fit: contain;
  transform: none !important;
}

/* Layered image composition used in About/Hero areas */
.media-stack {
  position: relative;
  padding: 0 clamp(0.5rem, 3vw, 2.4rem) clamp(2.6rem, 6vw, 4rem) 0;
}

.media-stack__main { aspect-ratio: 4 / 5; }

.media-stack__sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 8px solid var(--warm-white);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.media-stack__sub img { width: 100%; height: 100%; object-fit: cover; }

/* Floating stat badge */
.stat-badge {
  position: absolute;
  left: -6%;
  bottom: 16%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.4rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  animation: floatY 6s ease-in-out infinite;
}

.stat-badge__num {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--forest-800);
}

.stat-badge__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* ==========================================================================
   05. Buttons
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.98rem 2.05rem;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-fast), box-shadow var(--t-base),
              background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}

.btn svg { width: 17px; height: 17px; flex: none; transition: transform var(--t-base); }
.btn:hover svg { transform: translateX(4px); }

/* Liquid fill on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-gold);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-out);
}

.btn:hover::before { transform: translateY(0); }

/* Primary CTA: vermillion field, white type, inverting to navy-plum on hover.
   The old gold field was light enough to carry dark text; vermillion is not
   (3.1:1), so the type is inverted and the gradient runs 700 -> 600 -> 700 so
   white clears 4.5:1 across the whole sweep rather than only at the ends. */
.btn--primary,
.btn--gold {
  background: var(--grad-gold);
  color: var(--warm-white);
  box-shadow: var(--sh-gold);
}

.btn--primary::before,
.btn--gold::before { background: var(--forest-800); }

.btn--primary:hover,
.btn--gold:hover {
  color: var(--gold-200);
  transform: translateY(-3px);
}

/* Navy-plum CTA, used where vermillion would compete with a vermillion field */
.btn--dark {
  background: var(--forest-800);
  color: var(--warm-white);
  box-shadow: var(--sh-sm);
}

.btn--dark:hover {
  color: var(--warm-white);
  transform: translateY(-3px);
  box-shadow: var(--sh-gold);
}

.btn--ghost {
  background: transparent;
  color: var(--forest-800);
  border-color: rgba(47, 36, 71, 0.28);
}

.btn--ghost:hover { color: var(--warm-white); border-color: transparent; transform: translateY(-3px); }

.btn--light {
  background: rgba(255, 255, 255, 0.10);
  color: var(--warm-white);
  border-color: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn--light:hover { color: var(--warm-white); border-color: transparent; transform: translateY(-3px); }

.btn--sm { padding: 0.7rem 1.5rem; font-size: 0.74rem; }
.btn--lg { padding: 1.15rem 2.6rem; font-size: 0.88rem; }
.btn--block { width: 100%; }

/* Text link with animated underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest-700);
}

.link-arrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: width var(--t-base);
}

.link-arrow:hover { color: var(--gold-600); }
.link-arrow:hover::after { width: 42px; }

/* ==========================================================================
   06. Decorative Elements
   ========================================================================== */
/* Soft organic blobs used as section backdrops */
.blob {
  position: absolute;
  z-index: 0;
  border-radius: var(--r-organic);
  filter: blur(46px);
  opacity: 0.5;
  pointer-events: none;
  animation: morph 18s ease-in-out infinite alternate;
}

.blob--sage { background: radial-gradient(circle at 30% 30%, var(--sage-200), transparent 70%); }
.blob--gold { background: radial-gradient(circle at 30% 30%, var(--gold-200), transparent 70%); }
.blob--tl { top: -120px; left: -140px; width: 420px; height: 420px; }
.blob--br { right: -160px; bottom: -180px; width: 480px; height: 480px; }
.blob--tr { top: -100px; right: -120px; width: 360px; height: 360px; }


/* Wave / curve divider */
.divider {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}

.divider--bottom { bottom: -1px; }
.divider--top { top: -1px; transform: rotate(180deg); }
.divider svg { width: 100%; height: clamp(48px, 6vw, 108px); display: block; }
.divider--warm svg path { fill: var(--warm-white); }
.divider--cream svg path { fill: var(--cream); }
.divider--beige svg path { fill: var(--beige); }
.divider--forest svg path { fill: var(--forest-900); }

/* Small ornament used under headings */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: var(--space-sm) 0;
}

.ornament span {
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400));
}

.ornament span:last-child { background: linear-gradient(90deg, var(--gold-400), transparent); }
.ornament svg { width: 22px; height: 22px; color: var(--gold-500); }

/* ==========================================================================
   07. Preloader & Scroll Progress
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  gap: 1.2rem;
  background: var(--grad-forest);
  transition: opacity 0.7s var(--ease-soft), visibility 0.7s;
}

.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__mark {
  width: 78px;
  height: 78px;
  display: block;
  object-fit: contain;
  border-radius: 50%;
  animation: breathe 2.6s var(--ease-soft) infinite;
}

.preloader__text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  letter-spacing: 0.24em;
  color: var(--on-dark-soft);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 0;
  height: 3px;
  background: var(--grad-gold);
  transition: width 0.1s linear;
}

/* ==========================================================================
   08. Header / Navigation
   ========================================================================== */
.topbar {
  position: relative;
  z-index: 1101;
  background: var(--forest-900);
  color: var(--on-dark-soft);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 42px;
  padding-block: 0.3rem;
}

.topbar__list { display: flex; flex-wrap: wrap; gap: 1.6rem; }

.topbar__list a,
.topbar__list span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--on-dark-soft);
}

.topbar__list a:hover { color: var(--gold-400); }
.topbar__list svg { width: 14px; height: 14px; color: var(--gold-400); }

.topbar__socials { display: flex; gap: 0.9rem; }
.topbar__socials a { color: var(--on-dark-soft); }
.topbar__socials svg { width: 15px; height: 15px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(253, 251, 246, 0.86);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-base), box-shadow var(--t-base),
              border-color var(--t-base), transform var(--t-base);
}

.site-header.is-stuck {
  background: rgba(253, 251, 246, 0.97);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}

/* The brand emblem is a raster PNG cropped to the circular seal, so it is
   sized as a square and never rotated — a real logo reads as broken when
   tilted, unlike the abstract mark it replaced. */
.logo__mark {
  width: 50px;
  height: 50px;
  flex: none;
  display: block;
  object-fit: contain;
  transition: transform var(--t-base);
}

.logo:hover .logo__mark { transform: scale(1.06); }


/* --- Menu --- */
/* Nine top-level items (per the requirement doc) plus the booking CTA is a
   lot to fit beside the logo lock-up, so the desktop nav runs tighter than
   a typical 5–7 item bar. Below 1500px it becomes the drawer — see
   responsive.css; there is genuinely not enough room before that. */
.nav__menu { display: flex; align-items: center; gap: 0.1rem; }

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.6rem 0.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--ink-soft);
  border-radius: var(--r-xs);
  white-space: nowrap;
  transition: color var(--t-fast);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold);
  transform: translateX(-50%);
  transition: width var(--t-base);
}

.nav__link:hover,
.nav__link.is-active { color: var(--forest-900); }

.nav__link:hover::after,
.nav__link.is-active::after { width: calc(100% - 1.6rem); }

/* The CTA duplicated inside the menu list is only for the mobile drawer */
.nav__menu .btn { display: none; }

.nav__actions { display: flex; align-items: center; gap: 0.7rem; flex: none; }

/* --- Mobile toggle --- */
.nav__toggle {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--forest-800);
}

.nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 3px 0;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}

.nav__toggle.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(22, 17, 42, 0.5);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}

.nav-backdrop.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   09. Page Hero (inner pages)
   ========================================================================== */
.page-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(340px, 44vw, 480px);
  padding-block: clamp(3.4rem, 7vw, 6rem);
  background: var(--grad-forest);
  color: var(--on-dark-soft);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.34;
  transform: scale(1.08);
}

/* Per-page banner artwork — photographic layer with SVG fallback beneath.
   Keeping these in the stylesheet avoids any inline CSS in the markup. */
.page-hero__bg--about {
  background-image:
    url("../images/sec-morning-sadhana.jpg"),
    url("../images/bg-page.svg");
}

.page-hero__bg--services {
  background-image:
    url("../images/service-advanced-ayurvedic-healing.jpg"),
    url("../images/bg-page.svg");
}

.page-hero__bg--conditions {
  background-image:
    url("../images/sec-shirodhara.jpg"),
    url("../images/bg-page.svg");
}

.page-hero__bg--meditation {
  background-image:
    url("../images/service-mind-body-healing-programs.jpg"),
    url("../images/bg-page.svg");
}

.page-hero__bg--testimonials {
  background-image:
    url("../images/sec-group-practice.jpg"),
    url("../images/bg-page.svg");
}

.page-hero__bg--events {
  background-image:
    url("../images/sec-retreat-riverside.jpg"),
    url("../images/bg-page.svg");
}

.page-hero__bg--courses {
  background-image:
    url("../images/sec-classical-texts.jpg"),
    url("../images/bg-page.svg");
}

.page-hero__bg--contact {
  background-image:
    url("../images/service-online-consultation-desk.jpg"),
    url("../images/bg-page.svg");
}

.page-hero__bg--articles {
  background-image:
    url("../images/sec-classical-texts.jpg"),
    url("../images/bg-page.svg");
}

.page-hero__bg--gallery {
  background-image:
    url("../images/sec-oil-lamp.jpg"),
    url("../images/bg-page.svg");
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(22, 17, 42, 0.94) 8%, rgba(28, 21, 46, 0.72) 55%, rgba(58, 42, 82, 0.5) 100%);
}

/* The element carries .container as well, so this rule and that one both set
   max-width at the same specificity — and this one, being later, used to win
   with 780px while .container's `margin-inline: auto` stayed in force. The
   result was a 780px column centred in the viewport with its text ranged
   left inside, so the hero copy started ~230px to the right of where every
   other section on the page begins and left a lopsided gap either side.

   Handing the width back to .container puts the eyebrow, heading, lead and
   breadcrumb on the same left edge as the rest of the page. Measure is then
   capped on the text itself, which is where it belongs — a cap on the block
   controls where the line breaks; it should not decide where the block sits.
   ========================================================================== */
.page-hero__inner { position: relative; z-index: 2; max-width: var(--container); }
.page-hero h1 { color: var(--warm-white); margin-bottom: var(--space-sm); max-width: 20ch; }
.page-hero p { color: var(--on-dark-soft); max-width: 620px; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: var(--space-sm);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--on-dark-soft);
}

.breadcrumb a { color: var(--gold-400); }
.breadcrumb a:hover { color: var(--warm-white); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.55rem; }
.breadcrumb li + li::before { content: "/"; color: rgba(255, 255, 255, 0.35); }

/* ==========================================================================
   10. Home Hero
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(620px, 92vh, 940px);
  padding-block: clamp(4rem, 9vw, 7rem) clamp(6rem, 11vw, 9rem);
  background: var(--forest-950);
  overflow: hidden;
  isolation: isolate;
}

/* Two stacked background layers: a photographic layer first, and an on-brand
   SVG artwork underneath. If the photograph cannot be fetched (offline demo,
   or the client swaps assets later) the SVG keeps the hero looking finished. */
.hero__bg {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -3;
  background-image:
    url("../images/sec-meditation-nature.jpg"),
    url("../images/bg-hero.svg");
  background-size: cover, cover;
  background-position: center 42%, center;
  background-repeat: no-repeat, no-repeat;
  will-change: transform;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 12% 40%, rgba(22, 17, 42, 0.93) 0%, rgba(22, 17, 42, 0.66) 46%, rgba(22, 17, 42, 0.30) 78%),
    linear-gradient(180deg, rgba(22, 17, 42, 0.62) 0%, rgba(22, 17, 42, 0.20) 40%, rgba(22, 17, 42, 0.85) 100%);
}

/* Soft glow orbs behind the copy */
.hero__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: glowPulse 9s ease-in-out infinite;
}

.hero__glow--gold {
  top: 12%;
  left: 4%;
  width: 420px;
  height: 420px;
  background: rgba(218, 69, 38, 0.28);
}

.hero__glow--green {
  right: 6%;
  bottom: 6%;
  width: 500px;
  height: 500px;
  background: rgba(111, 168, 118, 0.30);
  animation-delay: -4s;
}

.hero__inner { position: relative; z-index: 4; max-width: 830px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.1rem 0.5rem 0.55rem;
  margin-bottom: var(--space-sm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-200);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(240, 128, 95, 0.34);
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__badge svg { width: 26px; height: 26px; color: var(--gold-400); }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.04;
  color: var(--warm-white);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
  margin-bottom: var(--space-sm);
}

.hero__title .accent { display: block; }

.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.3vw, 1.85rem);
  font-style: italic;
  color: var(--gold-400);
  margin-bottom: var(--space-sm);
}

.hero__copy {
  max-width: 620px;
  font-family: var(--font-serif);
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
  line-height: 1.85;
  color: rgba(242, 239, 231, 0.86);
}

.hero .actions { margin-top: var(--space-md); }

/* Trust strip under hero copy */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero__meta div { display: grid; gap: 0.15rem; }

.hero__meta b {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1;
}

.hero__meta span {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 239, 231, 0.7);
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(5rem, 8vw, 7rem);
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 239, 231, 0.62);
}

.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 54px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-400);
  animation: scrollLine 2.2s var(--ease-soft) infinite;
}

/* ==========================================================================
   11. Section: About Preview
   --------------------------------------------------------------------------
   An editorial two-column block: a layered arch/square image composition with
   floating gold badge and shloka card on the left, and a copy column on the
   right whose long modality list is broken into four glass "pillar" tiles.
   ========================================================================== */
.section--about {
  background:
    radial-gradient(120% 70% at 88% 0%, rgba(196, 214, 198, 0.30) 0%, transparent 58%),
    linear-gradient(180deg, var(--surface) 0%, var(--page-base) 46%, var(--cream) 100%);
}

.about-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(3.4rem, 5.5vw, 5.5rem);
  /* Both columns share the row height. The picture is not what stretches --
     it is flex: 0 0 auto and keeps its own ratio -- the shloka panel between
     the picture and the founder strip absorbs the difference. */
  align-items: stretch;
}

/* --- 11.1 Layered image composition ------------------------------------- */
.about-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px clamp(1rem, 3vw, 2.4rem) 14px clamp(0.6rem, 2vw, 1.6rem);
}

.about-visual__main {
  position: relative;
  flex: 0 0 auto;
  /* The artwork's intrinsic 1079x848, so it renders at its true proportions
     and object-fit: cover has nothing to crop. */
  aspect-ratio: 1079 / 848;
  background: var(--sage-100);
  box-shadow: var(--sh-lg);
}

/* Inner clip layer: the arch mask lives here so the offset gold keyline drawn
   by .frame-outline::after on the parent is not cropped away. */
.about-visual__clip {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
}

.about-visual__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.about-visual:hover .about-visual__main img { transform: scale(1.06); }

/* Soft forest veil so the floating cards keep contrast over the photo */
.about-visual__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 17, 42, 0.18) 0%, transparent 34%, rgba(22, 17, 42, 0.30) 100%);
  pointer-events: none;
}

/* Glass shloka panel sitting under the key visual. It takes the height the
   picture leaves over, so the visual column finishes level with the copy. */
.about-visual__shloka {
  position: static;
  flex: 1 1 auto;
  display: grid;
  gap: 0.7rem;
  place-content: center;
  justify-items: center;
  min-height: clamp(96px, 10vw, 116px);
  /* Capped, so the panel stays compact instead of swelling to swallow every
     pixel the picture and the founder strip leave over. */
  max-height: clamp(150px, 17vw, 200px);
  max-width: none;
  /* Clears the gold keyline, which .frame-outline::after draws 14px outside
     the picture -- a smaller margin lets the panel touch it. */
  margin: clamp(2.1rem, 3vw, 2.8rem) 0 0;
  padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.3rem, 2vw, 1.8rem);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.74) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(196, 59, 30, 0.16);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm, var(--sh-md));
}

.about-visual__shloka svg {
  width: 22px;
  height: 22px;
  color: var(--gold-500);
  opacity: 0.9;
}

.about-visual__shloka blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1.5vw, 1.42rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--forest-800);
}


/* --- 11.2 Copy column ---------------------------------------------------- */
.about-copy { position: relative; z-index: 1; }



/* Founding belief pull-quote */
.about-belief {
  position: relative;
  margin: var(--space-md) 0 0;
  padding: 1.05rem 1.3rem 1.05rem 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.34rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--forest-800);
  background: var(--grad-glass);
  border-left: 3px solid var(--gold-400);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.about-belief::after {
  content: "”";
  position: absolute;
  right: 0.6rem;
  bottom: -0.35em;
  font-family: var(--font-display);
  font-size: 4.2rem;
  line-height: 1;
  color: rgba(196, 59, 30, 0.18);
  pointer-events: none;
}

/* Founder identity + actions footer */
.about-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

.about-author__id { display: flex; align-items: center; gap: 1rem; }
.about-author__actions { margin-top: 0; flex: 1 1 100%; justify-content: center; }

.signature {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

.signature__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--forest-800);
  line-height: 1.2;
}

.signature__role {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.signature__mark { width: 46px; height: 46px; color: var(--sage-300); flex: none; }


/* ==========================================================================
   12. Section: Philosophy
   ========================================================================== */
/* Three across, not five. Five columns inside a 1240 container gave each card
   about 230px — narrow enough that "Neuro Mind Reprogramming" broke across
   four lines, and narrower still once the content type stepped up. The brief
   asks for 3–4 per row on desktop; the five cards run 3 + 2. */
.philosophy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }

.phil-card {
  position: relative;
  display: grid;
  gap: 0.8rem;
  padding: clamp(1.6rem, 2.4vw, 2.2rem) 1.4rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
}

.phil-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--grad-gold);
  transform: translateX(-50%);
  transition: width var(--t-base);
}

.phil-card:hover {
  transform: translateY(-10px);
  background: var(--surface);
  box-shadow: var(--sh-md);
}

.phil-card:hover::after { width: 70%; }

.phil-card__icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-inline: auto;
  color: var(--forest-700);
  background: var(--sage-100);
  border-radius: var(--r-organic);
  transition: transform var(--t-base), background-color var(--t-base), color var(--t-base);
}

.phil-card__icon svg { width: 32px; height: 32px; }

.phil-card:hover .phil-card__icon {
  background: var(--grad-gold);
  color: var(--warm-white);
  transform: rotate(8deg) scale(1.08);
}

.phil-card h3 { font-size: 1.16rem; margin: 0; }
.phil-card p { font-size: 0.86rem; color: var(--ink-muted); line-height: 1.65; margin: 0; }

.phil-card__step {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: rgba(33, 30, 51, 0.05);
  line-height: 1;
}

/* ==========================================================================
   13. Section: Services
   ========================================================================== */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.service-card:hover {
  transform: translateY(-12px);
  border-color: rgba(218, 69, 38, 0.4);
  box-shadow: var(--sh-lg);
}

.service-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--sage-100);
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter var(--t-base);
}

.service-card:hover .service-card__media img { transform: scale(1.09); }

.service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 17, 42, 0) 40%, rgba(22, 17, 42, 0.72) 100%);
  opacity: 0.85;
}

/* bottom sits inside the frame, not below it. The icon is a child of
   .service-card__media, which must stay overflow:hidden so the image zoom
   stays clipped — so a negative offset here was being cut in half rather
   than straddling the edge as intended. */
.service-card__icon {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  color: var(--warm-white);
  background: var(--grad-gold);
  border: 0;
  border-radius: var(--r-organic);
  box-shadow: 0 8px 20px -8px rgba(22, 17, 42, 0.6);
  transition: transform var(--t-base);
}

.service-card__icon svg { width: 26px; height: 26px; }
.service-card:hover .service-card__icon { transform: rotate(-10deg) scale(1.06); }

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.8rem 1.6rem 1.6rem;
  flex: 1;
}

.service-card__body h3 { font-size: 1.35rem; margin: 0; }
.service-card__body p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.7; margin: 0; }
.service-card__body .link-arrow { margin-top: auto; padding-top: 0.6rem; }

.service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--ink-muted);
}

.service-card__tags span::after { content: " ·"; color: var(--gold-500); }
.service-card__tags span:last-child::after { content: ""; }


/* Detailed service block used on the Services inner page */
.service-block {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.service-block + .service-block { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.service-block:nth-child(even) .service-block__media { order: 2; }
.service-block__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; }
.service-block__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.service-block:hover .service-block__media img { transform: scale(1.05); }

.service-block__no {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--gold-600);
}

.pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-xs); }

.pill-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
  color: var(--forest-700);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.pill-list li:hover {
  background: var(--forest-800);
  color: var(--warm-white);
  transform: translateY(-2px);
}

.pill-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-500);
  flex: none;
}

/* When a pill wraps a link (e.g. the Services quick-index) */
.pill-list li a { color: inherit; }
.pill-list li:hover a { color: var(--warm-white); }

/* Pills used inside a card body sit tighter */
.course-card__body .pill-list li,
.program-card .pill-list li { font-size: 0.74rem; padding: 0.3rem 0.7rem; }

/* ==========================================================================
   14. Section: Conditions
   ========================================================================== */
.condition-card {
  position: relative;
  display: grid;
  gap: 0.7rem;
  padding: 1.7rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), color var(--t-base);
}

.condition-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--grad-forest);
  opacity: 0;
  transition: opacity var(--t-base);
}

.condition-card > * { position: relative; z-index: 1; }

.condition-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-md);
}

.condition-card:hover::before { opacity: 1; }
.condition-card:hover h3 { color: var(--warm-white); }
.condition-card:hover p { color: var(--on-dark-soft); }

.condition-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--forest-700);
  background: var(--sage-100);
  border-radius: var(--r-sm);
  transition: background-color var(--t-base), color var(--t-base), transform var(--t-base);
}

.condition-card__icon svg { width: 27px; height: 27px; }

.condition-card:hover .condition-card__icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--gold-400);
  transform: scale(1.06);
}

.condition-card h3 { font-size: 1.12rem; margin: 0; transition: color var(--t-base); }
.condition-card p { font-size: 0.84rem; color: var(--ink-muted); margin: 0; line-height: 1.6; transition: color var(--t-base); }

/* Disclaimer panel */
.disclaimer {
  position: relative;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold-500);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.disclaimer h3 { display: flex; align-items: center; gap: 0.7rem; }
.disclaimer h3 svg { width: 26px; height: 26px; color: var(--gold-600); flex: none; }
.disclaimer p { color: var(--ink-soft); font-size: 0.95rem; }

/* ==========================================================================
   15. Section: Guided Meditation
   ========================================================================== */
.program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--on-dark-soft);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), background-color var(--t-base);
}

.program-card::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -30%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(240, 128, 95, 0.30), transparent 68%);
  opacity: 0;
  transition: opacity var(--t-base);
}

.program-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(240, 128, 95, 0.42);
}

.program-card:hover::before { opacity: 1; }
.program-card > * { position: relative; z-index: 1; }

.program-card__no {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--gold-400);
}

.program-card h3 { font-size: 1.5rem; color: var(--warm-white); margin: 0; }
.program-card p { font-size: 0.89rem; line-height: 1.7; margin: 0; }

.program-card__meta {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.8rem;
}

.program-card__meta div { display: flex; align-items: center; gap: 0.55rem; }
.program-card__meta svg { width: 15px; height: 15px; color: var(--gold-400); flex: none; }

.program-card__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--gold-400);
  background: rgba(240, 128, 95, 0.12);
  border: 1px solid rgba(240, 128, 95, 0.3);
  border-radius: var(--r-organic);
}

.program-card__icon svg { width: 27px; height: 27px; }

/* Enrolment / payment flow illustration */
.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: flow;
}

.flow__step {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: 1.5rem 1.2rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.flow__step:hover { transform: translateY(-7px); box-shadow: var(--sh-md); }

.flow__step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.72rem;
  width: 0.9rem;
  height: 2px;
  background: var(--sand);
}

.flow__step:last-child::after { display: none; }

.flow__num {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--warm-white);
  background: var(--forest-800);
  border-radius: 50%;
}

.flow__step:hover .flow__num { background: var(--grad-gold); color: var(--warm-white); }
.flow__step h4 { font-size: 0.95rem; margin: 0; }
.flow__step p { font-size: 0.8rem; color: var(--ink-muted); margin: 0; line-height: 1.55; }

/* ==========================================================================
   16. Section: Healing Process (timeline)
   ========================================================================== */
.timeline { position: relative; display: grid; gap: clamp(0.8rem, 1.4vw, 1.3rem); }

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--sand) 8%, var(--sand) 92%, transparent);
  transform: translateX(-50%);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  align-items: center;
}

.timeline__card {
  padding: clamp(1.05rem, 1.7vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.timeline__card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.timeline__card h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.timeline__card p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

.timeline__item:nth-child(odd) .timeline__card { grid-column: 1; text-align: right; }
.timeline__item:nth-child(even) .timeline__card { grid-column: 3; }

.timeline__dot {
  grid-column: 2;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: var(--warm-white);
  background: var(--forest-800);
  border: 5px solid var(--warm-white);
  border-radius: 50%;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), background var(--t-base), color var(--t-base);
}

.timeline__dot svg { width: 25px; height: 25px; }
.timeline__item:hover .timeline__dot { background: var(--grad-gold); color: var(--warm-white); transform: scale(1.1); }

.section--forest .timeline__card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.section--forest .timeline__card p { color: var(--on-dark-soft); }
.section--forest .timeline__dot { border-color: var(--forest-800); }
.section--forest .timeline::before { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent); }

/* Vertical (left-aligned) timeline variant — used on About & Program pages */
/* Six items at a 1.6rem gap made this column the tallest thing on the About
   page — taller than the image it sits beside, so the section was sized by
   the list rather than by the pair. */
.vtimeline { position: relative; display: grid; gap: 0.95rem; padding-left: 3.2rem; }

.vtimeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-400), var(--sand) 60%, transparent);
}

.vtimeline__item { position: relative; }

.vtimeline__item::before {
  content: "";
  position: absolute;
  left: -3.2rem;
  top: 5px;
  width: 32px;
  height: 32px;
  background: var(--warm-white);
  border: 2px solid var(--gold-400);
  border-radius: 50%;
  transition: background var(--t-base), transform var(--t-base);
}

.vtimeline__item::after {
  content: "";
  position: absolute;
  left: calc(-3.2rem + 11px);
  top: 16px;
  width: 10px;
  height: 10px;
  background: var(--gold-500);
  border-radius: 50%;
}

.vtimeline__item:hover::before { transform: scale(1.15); background: var(--gold-200); }

.vtimeline__year {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.vtimeline__item h3 { font-size: 1.12rem; line-height: 1.3; margin: 0.1rem 0 0.25rem; }
.vtimeline__item p { font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }

.section--forest .vtimeline__item::before { background: var(--forest-800); }
.section--forest .vtimeline__item p { color: var(--on-dark-soft); }

/* ==========================================================================
   17. Section: Why Choose Us + Counters
   ========================================================================== */
.feature-card {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  background: var(--grad-glass);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.feature-card::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(218, 69, 38, 0.20), transparent 70%);
  transition: transform var(--t-slow);
}

.feature-card:hover { transform: translateY(-9px); box-shadow: var(--sh-md); }
.feature-card:hover::before { transform: scale(1.5); }
.feature-card > * { position: relative; }

.feature-card__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--forest-700);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-xs);
  transition: color var(--t-base), background var(--t-base), transform var(--t-base);
}

.feature-card__icon svg { width: 27px; height: 27px; }
.feature-card:hover .feature-card__icon { background: var(--forest-800); color: var(--gold-400); transform: rotate(-6deg); }
.feature-card h3 { font-size: 1.16rem; margin: 0; }
.feature-card p { font-size: 0.87rem; color: var(--ink-soft); margin: 0; line-height: 1.68; }

/* Counters */
.counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.counter { text-align: center; position: relative; padding: 0.6rem 0.4rem; }

.counter + .counter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.counter__icon { width: 34px; height: 34px; margin: 0 auto 0.7rem; color: var(--gold-400); }

.counter__num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--warm-white);
}

.counter__num span { font-size: 0.55em; color: var(--gold-400); }

.counter__label {
  margin-top: 0.55rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* ==========================================================================
   18. Section: Testimonials Slider
   ========================================================================== */
.slider { position: relative; }

.slider__viewport { overflow: hidden; padding-block: 0.6rem; }

.slider {
  --slider-gap: clamp(1rem, 2vw, 1.7rem);
}

.slider__track {
  display: flex;
  gap: var(--slider-gap);
  transition: transform 0.65s var(--ease-out);
  will-change: transform;
}

.slider__slide { flex: 0 0 calc((100% - 2 * var(--slider-gap)) / 3); }

/* Slide width follows the slider's declared slides-per-view */
.slider[data-per-view="2"] .slider__slide { flex-basis: calc((100% - var(--slider-gap)) / 2); }
.slider[data-per-view="1"] .slider__slide { flex-basis: 100%; }

.t-card {
  position: relative;
  display: grid;
  gap: 0.7rem;
  height: 100%;
  padding: clamp(1.25rem, 1.8vw, 1.65rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.t-card:hover { transform: translateY(-8px); box-shadow: var(--sh-md); }

.t-card__quote {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  width: 46px;
  height: 46px;
  color: var(--sage-100);
}

.t-card__stars { display: flex; gap: 0.2rem; color: var(--gold-500); }
.t-card__stars svg { width: 17px; height: 17px; }

/* 1.85 leading on a 0.96rem serif set five lines of quote nearly 150px tall,
   and the card grid equalises height, so the tallest quote drove the whole
   band. 1.62 is still comfortable at this measure and takes roughly 25px off
   every card. */
.t-card__text {
  position: relative;
  font-family: var(--font-serif);
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
}

.t-card__person {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.t-card__avatar {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-200);
  background: var(--sage-100);
}

.t-card__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--forest-800); line-height: 1.2; }
.t-card__role { font-size: 0.76rem; letter-spacing: 0.08em; color: var(--ink-muted); }

/* Slider controls */
.slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: var(--space-xs);
}

.slider__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--forest-800);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base), border-color var(--t-base);
}

.slider__btn svg { width: 19px; height: 19px; }
.slider__btn:hover { background: var(--forest-800); color: var(--gold-400); border-color: transparent; transform: scale(1.06); }
.slider__btn[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }

.slider__dots { display: flex; align-items: center; gap: 0.45rem; margin-inline: 0.6rem; }

.slider__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sand);
  transition: width var(--t-base), background var(--t-base);
}

.slider__dot.is-active { width: 30px; border-radius: var(--r-pill); background: var(--grad-gold); }

/* ==========================================================================
   19. Section: Events
   ========================================================================== */
.event-card {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.event-card:hover { transform: translateY(-7px); box-shadow: var(--sh-md); border-color: rgba(218, 69, 38, 0.4); }

.event-card__date {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.1rem;
  padding: 1rem 0.6rem;
  color: var(--warm-white);
  background: var(--grad-forest);
  border-radius: var(--r-sm);
  text-align: center;
}

.event-card__day { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; line-height: 1; }
.event-card__mon { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-400); }
.event-card__yr { font-size: 0.68rem; color: var(--on-dark-soft); letter-spacing: 0.12em; }

/* Schedules are not published yet, so the tile carries a notify mark instead
   of a day/month/year. It keeps the same 104px column, ground and radius as
   the dated tile — the card's anchor does not move — so putting a real date
   back is a markup change with no layout consequences. */
.event-card__date--notify { gap: 0.45rem; padding: 1rem 0.5rem; }

.event-card__bell {
  display: grid;
  place-items: center;
  color: var(--gold-400);
}

.event-card__bell svg { width: 26px; height: 26px; }

.event-card__tba {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

.event-card__body { display: grid; gap: 0.5rem; }
.event-card__body h3 { font-size: 1.22rem; margin: 0; }
.event-card__body p { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.event-card__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.event-card__meta svg { width: 14px; height: 14px; color: var(--gold-600); }

/* The meta row is plain muted text, so a link in it needs to declare itself —
   the global link colour alone is too close to the surrounding copy to read
   as clickable at this size. */
.event-card__meta a {
  color: var(--gold-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.event-card__meta a:hover { color: var(--forest-700); }

/* Featured event with image.

   The card's height comes from the copy column, not the picture — the media
   is stretched by the grid to whatever the body ends up being. So the levers
   that shorten it are all on the text side: a wider column so the summary
   wraps over fewer lines, and less padding around it. Even columns plus
   clamp(1.8rem, 4vw, 3.2rem) of padding put it near 670px on a wide screen,
   which is more than a preview card should take. */
.event-feature {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

/* min-height only has to cover the stacked case; beside the copy the grid
   stretches this to the row height anyway, and cover handles the crop. */
.event-feature__media { position: relative; min-height: 260px; overflow: hidden; background: var(--sage-100); }
.event-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.event-feature:hover .event-feature__media img { transform: scale(1.06); }

.event-feature__body {
  display: grid;
  align-content: center;
  gap: 0.65rem;
  padding: clamp(1.5rem, 2.8vw, 2.4rem);
}

/* The summary is the tallest element in the card. Held to a comfortable
   measure and a tighter leading than body copy elsewhere, since it is a
   preview rather than something to be read at length. */
.event-feature__body p {
  max-width: 62ch;
  font-size: 0.97rem;
  line-height: 1.6;
}

/* ==========================================================================
   20. Section: Courses
   ========================================================================== */
.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.course-card:hover { transform: translateY(-11px); box-shadow: var(--sh-lg); }

.course-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sage-100); }
.course-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.course-card:hover .course-card__media img { transform: scale(1.08) rotate(1deg); }

.course-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.35rem 0.85rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-white);
  background: var(--grad-gold);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-xs);
}

.course-card__body { display: grid; gap: 0.6rem; padding: 1.5rem; flex: 1; align-content: start; }
.course-card__body h3 { font-size: 1.24rem; margin: 0; }
.course-card__body p { font-size: 0.87rem; color: var(--ink-soft); margin: 0; }

.course-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--warm-white);
}

.course-card__info { display: flex; gap: 1rem; font-size: 0.77rem; color: var(--ink-muted); }
.course-card__info span { display: inline-flex; align-items: center; gap: 0.35rem; }
.course-card__info svg { width: 14px; height: 14px; color: var(--gold-600); }

/* ==========================================================================
   21. Section: Gallery + Lightbox
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: 1rem;
}

.gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--sage-100);
  cursor: zoom-in;
}

.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), filter var(--t-base); }

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 17, 42, 0) 42%, rgba(22, 17, 42, 0.82) 100%);
  opacity: 0;
  transition: opacity var(--t-base);
}

.gallery__cap {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 0.9rem;
  z-index: 2;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--warm-white);
  transform: translateY(14px);
  opacity: 0;
  transition: transform var(--t-base), opacity var(--t-base);
}

.gallery__item:hover img { transform: scale(1.09); }
.gallery__item:hover::after,
.gallery__item:hover .gallery__cap { opacity: 1; }
.gallery__item:hover .gallery__cap { transform: translateY(0); }

.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(14, 10, 27, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__img {
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  transform: scale(0.94);
  transition: transform var(--t-base);
}

.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__cap {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  color: var(--on-dark-soft);
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--warm-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  transition: background var(--t-fast), transform var(--t-fast);
}

.lightbox__btn:hover { background: var(--gold-500); color: var(--warm-white); transform: scale(1.07); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: 1.4rem; right: 1.4rem; }
.lightbox__prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.07); }

/* ==========================================================================
   22. Section: FAQ Accordion
   ========================================================================== */
.accordion { display: grid; gap: 0.85rem; }

.acc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.acc.is-open { border-color: rgba(218, 69, 38, 0.45); box-shadow: var(--sh-sm); }

.acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.4rem;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--forest-900);
  transition: color var(--t-fast), background var(--t-fast);
}

.acc__head:hover { color: var(--gold-600); }

.acc__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}

.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}

.acc__icon::before { width: 12px; height: 2px; }
.acc__icon::after { width: 2px; height: 12px; }

.acc.is-open .acc__icon { background: var(--forest-800); border-color: transparent; color: var(--gold-400); transform: rotate(180deg); }
.acc.is-open .acc__icon::after { opacity: 0; transform: rotate(90deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}

.acc.is-open .acc__panel { grid-template-rows: 1fr; }

.acc__panel > div { overflow: hidden; }

.acc__panel p {
  padding: 0 1.4rem 1.3rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ==========================================================================
   23. Section: Contact + Forms
   ========================================================================== */
.info-card {
  display: flex;
  gap: 1rem;
  padding: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.info-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }

.info-card__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  color: var(--forest-700);
  background: var(--sage-100);
  border-radius: var(--r-sm);
}

.info-card__icon svg { width: 23px; height: 23px; }

/* Four across, the icon beside the text leaves the copy under 200px — narrow
   enough that "Digestive capacity assessed and restored…" broke to one or two
   words a line. Stacked, the same card gives the text its full width. The
   two- and three-up uses keep the horizontal arrangement, where there is room
   for it. */
.grid--4 .info-card {
  flex-direction: column;
  gap: 0.85rem;
}
.info-card h4 { margin: 0 0 0.25rem; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.info-card p, .info-card a { margin: 0; font-size: 0.95rem; color: var(--forest-800); font-weight: 500; line-height: 1.6; }
.info-card a:hover { color: var(--gold-600); }

/* Form */
.form-panel {
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field label .req { color: var(--gold-600); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.86rem 1.05rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--warm-white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

/* 132px was four blank lines before anyone typed — the single tallest thing
   in the form. Three is enough to read as a multi-line field, and it still
   drags taller from the corner. */
.field textarea { min-height: 96px; resize: vertical; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A4C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.6rem;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-muted); opacity: 0.75; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(218, 69, 38, 0.13);
}

/* The focus ring above is now vermillion, so the error state moves to the
   logo's crimson — otherwise "focused" and "invalid" were the same red. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--crimson-600); box-shadow: 0 0 0 4px rgba(185, 34, 53, 0.12); }

.field__error {
  display: none;
  font-size: 0.76rem;
  color: var(--crimson-600);
  letter-spacing: 0.02em;
}

.field.has-error .field__error { display: block; }

.form-note {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 0.79rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

.form-note svg { width: 16px; height: 16px; flex: none; color: var(--gold-600); margin-top: 3px; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.83rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--forest-700); flex: none; }

.form-status {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.86rem;
  border-radius: var(--r-xs);
  background: var(--sage-100);
  color: var(--forest-800);
  border: 1px solid rgba(76, 60, 109, 0.2);
}

.form-status.is-visible { display: flex; }
.form-status svg { width: 18px; height: 18px; flex: none; }

/* Map placeholder */
.map-frame {
  position: relative;
  min-height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(157, 187, 164, 0.14) 0 12px, transparent 12px 24px),
    var(--grad-sage);
  box-shadow: var(--sh-sm);
}

.map-frame iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

.map-frame__note {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: 2rem;
}

.map-frame__note svg { width: 46px; height: 46px; color: var(--forest-700); }
.map-frame__note strong { font-family: var(--font-display); font-size: 1.35rem; }
.map-frame__note span { font-size: 0.84rem; color: var(--ink-muted); max-width: 320px; }

/* Branch list */
.branch-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}

.branch-card:hover { transform: translateX(6px); border-color: var(--gold-400); background: var(--cream); }
.branch-card svg { width: 20px; height: 20px; color: var(--gold-600); flex: none; }
.branch-card b { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--forest-800); line-height: 1.25; }
.branch-card span { font-size: 0.78rem; color: var(--ink-muted); }

/* CTA band */
.cta-band {
  position: relative;
  padding: clamp(2.6rem, 5vw, 4.4rem) clamp(1.6rem, 4vw, 4rem);
  background: var(--grad-forest);
  border-radius: var(--r-lg);
  color: var(--on-dark-soft);
  overflow: hidden;
  isolation: isolate;
}

.cta-band h2 { color: var(--warm-white); }
.cta-band p { color: var(--on-dark-soft); max-width: 620px; }

/* ==========================================================================
   24. Footer
   ========================================================================== */
.site-footer {
  position: relative;
  padding-top: clamp(3.4rem, 6vw, 5.4rem);
  background: var(--forest-950);
  /* White rather than the muted --on-dark-soft: on this depth of ground the
     soft lilac reads as greyed-out instead of quiet. Hover states stay gold,
     so links still respond. */
  color: var(--on-dark);
  overflow: hidden;
}

.site-footer h4 {
  margin-bottom: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: clamp(1.8rem, 3.5vw, 3.2rem);
  padding-bottom: clamp(2.4rem, 4vw, 3.4rem);
}

/* The footer brand column renders the complete mark as a single image now
   (assets/images/logo-light.png — see 33.3b), so the cropped-seal treatment
   that used to live here has no target and has been removed. */
.footer-brand p { margin-top: var(--space-sm); font-size: 0.88rem; line-height: 1.8; }

.footer-links { display: grid; gap: 0.6rem; }
.footer-links a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--on-dark); }
.footer-links a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); opacity: 0.55; transition: transform var(--t-fast), opacity var(--t-fast); }
.footer-links a:hover { color: var(--gold-400); }
.footer-links a:hover::before { transform: scale(1.5); opacity: 1; }

.footer-contact { display: grid; gap: 0.9rem; font-size: 0.88rem; }
.footer-contact li { display: flex; gap: 0.7rem; }
.footer-contact svg { width: 17px; height: 17px; flex: none; color: var(--gold-400); margin-top: 4px; }
.footer-contact a { color: var(--on-dark); }
.footer-contact a:hover { color: var(--gold-400); }

/* Newsletter */
.newsletter { margin-top: var(--space-sm); }

.newsletter__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  transition: border-color var(--t-base);
}

.newsletter__form:focus-within { border-color: rgba(240, 128, 95, 0.5); }

.newsletter__form input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 1.05rem;
  font-size: 0.86rem;
  color: var(--warm-white);
  background: transparent;
  border: 0;
}

.newsletter__form input::placeholder { color: rgba(203, 198, 214, 0.6); }
.newsletter__form input:focus { outline: none; }

.newsletter__form button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  color: var(--warm-white);
  background: var(--grad-gold);
  border-radius: 50%;
  transition: transform var(--t-fast), filter var(--t-fast);
}

.newsletter__form button:hover { transform: scale(1.07); filter: brightness(1.08); }
.newsletter__form button svg { width: 18px; height: 18px; }

.newsletter__msg { display: none; margin-top: 0.7rem; font-size: 0.8rem; color: var(--gold-400); }
.newsletter__msg.is-visible { display: block; }

/* Socials */
.socials { display: flex; gap: 0.6rem; margin-top: var(--space-sm); }

.socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--on-dark-soft);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}

.socials a:hover { background: var(--grad-gold); color: var(--warm-white); transform: translateY(-4px); }
.socials svg { width: 17px; height: 17px; }

/* Footer bottom bar */
.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  /* Extra floor clearance so the fixed WhatsApp / back-to-top buttons
     never sit on top of the copyright line. */
  padding-block: 1.4rem 4.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.79rem;
  color: var(--on-dark);
}

.footer-bottom a { color: var(--on-dark); }
.footer-bottom a:hover { color: var(--gold-400); }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ==========================================================================
   25. Utility Pages (404 / Thank You)
   ========================================================================== */
.utility {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: clamp(3rem, 8vw, 6rem) 0;
  text-align: center;
  background: var(--grad-forest);
  color: var(--on-dark-soft);
  overflow: hidden;
}

.utility__inner { position: relative; z-index: 2; max-width: 720px; }

.utility__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 13rem);
  font-weight: 700;
  line-height: 0.9;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-sm);
}

.utility h1 { color: var(--warm-white); }
.utility p { color: var(--on-dark-soft); }

.utility__mark {
  width: clamp(96px, 16vw, 140px);
  margin: 0 auto var(--space-md);
  color: var(--gold-400);
  animation: breathe 3.4s var(--ease-soft) infinite;
}

.utility__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.83rem;
}

.utility__links a { color: var(--on-dark-soft); }
.utility__links a:hover { color: var(--gold-400); }

/* Confirmation summary card (Thank You page) */
.summary-card {
  display: grid;
  gap: 0.9rem;
  margin-top: var(--space-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.summary-card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.9rem;
}

.summary-card__row svg { width: 20px; height: 20px; flex: none; color: var(--gold-400); margin-top: 3px; }
.summary-card__row b { display: block; color: var(--warm-white); font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; }

/* ==========================================================================
   26. Reveal Animations
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal="up"] { transform: translateY(46px); }
[data-reveal="down"] { transform: translateY(-40px); }
[data-reveal="left"] { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="zoom"] { transform: scale(0.9); }
[data-reveal="flip"] { transform: perspective(900px) rotateX(14deg) translateY(30px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Keyframes */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes morph {
  0% { border-radius: 62% 38% 46% 54% / 52% 44% 56% 48%; }
  50% { border-radius: 38% 62% 58% 42% / 46% 58% 42% 54%; }
  100% { border-radius: 52% 48% 38% 62% / 60% 40% 60% 40%; }
}

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

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.14); }
}

@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes leafFall {
  0% { transform: translate3d(0, -14vh, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.55; }
  50% { transform: translate3d(46px, 45vh, 0) rotate(180deg); }
  90% { opacity: 0.4; }
  100% { transform: translate3d(-30px, 108vh, 0) rotate(360deg); opacity: 0; }
}

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

/* ==========================================================================
   27. Back To Top / Floating Actions
   ========================================================================== */
.to-top {
  position: fixed;
  right: clamp(1rem, 2.4vw, 1.9rem);
  bottom: clamp(1rem, 2.4vw, 1.9rem);
  z-index: 1050;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--warm-white);
  background: var(--forest-800);
  border-radius: 50%;
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base), background var(--t-base), color var(--t-base);
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--grad-gold); color: var(--warm-white); }
.to-top svg { width: 19px; height: 19px; }

/* Floating WhatsApp / call action */
.float-call {
  position: fixed;
  left: clamp(1rem, 2.4vw, 1.9rem);
  bottom: clamp(1rem, 2.4vw, 1.9rem);
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.15rem 0.7rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-white);
  background: var(--grad-gold);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-gold);
  transition: transform var(--t-base), filter var(--t-base);
}

.float-call:hover { transform: translateY(-4px); color: var(--warm-white); filter: brightness(1.05); }
.float-call svg { width: 22px; height: 22px; }

/* ==========================================================================
   28. Reference-Aligned Components
   --------------------------------------------------------------------------
   Visual devices drawn from the client's two reference sites:
   arch/leaf image masks, watermark section headings, a credential trust
   strip, icon-tile category grids, a practitioner band, journal cards,
   an overlapping booking band and dotted-leader lists.
   ========================================================================== */

/* --- 28.1 Arch & leaf image masks --------------------------------------- */
/* The arch mask is retired in favour of the shared card radius. It was the
   last shape on the site that rounded by a different amount than its
   neighbours — every other media frame now uses --r-card — and on the
   taller service and programme images the dome read as a cropped photo
   rather than a deliberate frame. The class names stay so the 26 usages
   across 14 pages keep working; only the value changes. */
.frame-arch,
.frame-arch-deep { border-radius: var(--r-card); }
.frame-leaf { border-radius: var(--r-leaf); }

/* Thin gold keyline tracing the mask, offset like a mount */
.frame-outline { position: relative; }

.frame-outline::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border: 1px solid rgba(196, 59, 30, 0.42);
  border-radius: inherit;
  pointer-events: none;
}

/* The About/founder portrait takes the arch treatment */
.media-stack__main.frame-arch,
.media-stack__main.frame-arch img { border-radius: var(--r-arch); }

/* --- 28.2 Watermark heading -------------------------------------------- */
/* A large, very faint word sitting behind the section title. */
.section-head { position: relative; }


/* --- 28.3 Credential / trust strip -------------------------------------- */
.trust-strip {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

/* Pulls the strip up so it straddles the hero and the section below it */
.trust-strip--overlap { margin-top: clamp(-5.5rem, -6vw, -3rem); }

/* On the home page the strip follows the full-bleed banner rail instead. The
   banner itself keeps no padding, but this card has a border and a shadow, so
   it needs a little clearance or it reads as colliding with the artwork. */
.trust-strip--after-banner { margin-top: clamp(1.4rem, 2.6vw, 2.4rem); }

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.35rem 1.2rem;
  background: var(--surface);
  transition: background var(--t-base), transform var(--t-base);
}

.trust-item:hover { background: var(--cream); }

.trust-item__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  color: var(--forest-700);
  background: var(--sage-100);
  border-radius: 50%;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}

.trust-item__icon svg { width: 22px; height: 22px; }
.trust-item:hover .trust-item__icon { background: var(--grad-gold); color: var(--warm-white); transform: rotate(-8deg); }

.trust-item b {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--forest-900);
  line-height: 1.3;
}

.trust-item span {
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* --- 28.4 Category tile grid (icon + label + arrow) --------------------- */
/* Column counts are pinned per breakpoint in responsive.css (5 → 4 → 3 → 2),
   so the base stays an explicit repeat() rather than auto-fit. */
.cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; }

.cat-tile {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  padding: 1.7rem 0.95rem 1.35rem;
  text-align: center;
  /* Tiles sit a shade off the section behind them rather than on flat white —
     the tinted-on-tinted layering both references use for category grids. */
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.cat-tile::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  background: var(--grad-sage);
  border-radius: 50%;
  transform: translate(-50%, -100%);
  transition: transform 0.6s var(--ease-out);
}

.cat-tile:hover {
  transform: translateY(-9px);
  border-color: rgba(218, 69, 38, 0.42);
  box-shadow: var(--sh-md);
}

.cat-tile:hover::before { transform: translate(-50%, -62%); }
.cat-tile > * { position: relative; z-index: 1; }

.cat-tile__icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  color: var(--forest-700);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-leaf);
  transition: background var(--t-base), color var(--t-base), transform var(--t-base), border-radius var(--t-base);
}

.cat-tile__icon svg { width: 33px; height: 33px; }

.cat-tile:hover .cat-tile__icon {
  background: var(--grad-gold);
  color: var(--warm-white);
  border-color: transparent;
  border-radius: 50%;
  transform: scale(1.06);
}

.cat-tile h3 {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}

.cat-tile p { font-size: 0.79rem; color: var(--ink-muted); margin: 0; line-height: 1.55; }

/* --- Closing note tile ----------------------------------------------------
   The nine categories leave one slot over in the 5-across grid. This fills it
   with what they have in common rather than a tenth category. It keeps the
   category tiles' own ground and icon treatment so the row reads as one set;
   what marks it out is only that it does not respond to the pointer, because
   it is not a link and goes nowhere. Its copy runs longer than a category
   caption, so the type steps down and the content centres against the taller
   row. */
.cat-tile--note {
  align-content: center;
  cursor: default;
}

/* Every hover response off: the lift, the border, the shadow, the sweep, and
   the icon's gold fill. Without this last one the leaf lights up vermillion
   under the pointer as though the tile were about to navigate somewhere. */
.cat-tile--note:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.cat-tile--note:hover::before { transform: translate(-50%, 0); }

.cat-tile--note:hover .cat-tile__icon {
  background: var(--cream);
  color: var(--forest-700);
  border-color: var(--line);
  border-radius: var(--r-leaf);
  transform: none;
}

.cat-tile--note p { font-size: 0.74rem; line-height: 1.6; }

.cat-tile__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 0.2rem;
  color: var(--gold-600);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

.cat-tile__arrow svg { width: 14px; height: 14px; }
.cat-tile:hover .cat-tile__arrow { background: var(--forest-800); color: var(--gold-400); border-color: transparent; }

/* --- 28.5 Practitioner / doctor band ------------------------------------ */
.doc-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
}

.doc-card { text-align: center; }

.doc-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  margin-bottom: 1.1rem;
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--sage-100);
  box-shadow: var(--sh-sm);
}

.doc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.doc-card:hover .doc-card__media img { transform: scale(1.06); }

.doc-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 17, 42, 0) 55%, rgba(22, 17, 42, 0.6) 100%);
  opacity: 0;
  transition: opacity var(--t-base);
}

.doc-card:hover .doc-card__media::after { opacity: 1; }

.doc-card__socials {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
  transform: translate(-50%, 18px);
  opacity: 0;
  transition: transform var(--t-base), opacity var(--t-base);
}

.doc-card:hover .doc-card__socials { transform: translate(-50%, 0); opacity: 1; }

.doc-card__socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--warm-white);
  background: var(--grad-gold);
  border-radius: 50%;
}

.doc-card__socials svg { width: 15px; height: 15px; }
.doc-card h3 { font-size: 1.3rem; margin: 0 0 0.2rem; }

.doc-card p { margin-top: 0.6rem; font-size: 0.86rem; color: var(--ink-soft); }

/* --- 28.6 Journal / insight cards --------------------------------------- */
.journal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.journal-card:hover { transform: translateY(-10px); box-shadow: var(--sh-lg); }

.journal-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sage-100); }
.journal-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.journal-card:hover .journal-card__media img { transform: scale(1.07); }

.journal-card__date {
  position: absolute;
  left: 1.1rem;
  bottom: -22px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 62px;
  padding: 0.55rem 0;
  color: var(--warm-white);
  background: var(--grad-forest);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
  line-height: 1.1;
}

.journal-card__date b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: inherit; }
.journal-card__date span { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-400); }

.journal-card__body { display: grid; gap: 0.6rem; padding: 2.2rem 1.5rem 1.5rem; flex: 1; align-content: start; }

.journal-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.journal-card__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.journal-card__meta svg { width: 13px; height: 13px; color: var(--gold-600); }
.journal-card__body h3 { font-size: 1.22rem; margin: 0; }
.journal-card__body p { font-size: 0.87rem; color: var(--ink-soft); margin: 0; }
.journal-card__body .link-arrow { margin-top: 0.4rem; }

/* --- 28.7 Overlapping booking band -------------------------------------- */
/* A card that straddles the boundary between two sections. */
.float-band {
  position: relative;
  z-index: 6;
  margin-bottom: calc(var(--section-y) * -0.55);
  padding: clamp(1.8rem, 3.6vw, 3rem);
  background: var(--grad-forest);
  border-radius: var(--r-lg);
  color: var(--on-dark-soft);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.float-band h2 { color: var(--warm-white); margin-bottom: 0.5rem; }
.float-band p { color: var(--on-dark-soft); }

.float-band__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
}

.float-band .actions { margin-top: 0; justify-content: flex-end; }

/* Section that receives an overlapping band needs headroom */
.section--has-band { padding-top: calc(var(--section-y) + 3.5rem); }

/* --- 28.8 Dotted-leader list -------------------------------------------- */
.leader-list { display: grid; gap: 0.1rem; }

.leader-list li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--line-strong);
}

.leader-list li:last-child { border-bottom: 0; }

.leader-list__name {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--forest-900);
  white-space: nowrap;
}

.leader-list__dots {
  flex: 1;
  height: 1px;
  min-width: 20px;
  background-image: radial-gradient(circle, var(--sand-deep) 1px, transparent 1px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: 0 bottom;
}

.leader-list__meta { font-size: 0.84rem; color: var(--ink-muted); white-space: nowrap; }

/* --- 28.9 Section header refinements ------------------------------------ */
/* Leaf glyph flanking a centred eyebrow, as used on both reference sites */
.eyebrow--leaf::before,
.eyebrow--leaf::after {
  width: 16px;
  height: 16px;
  background: var(--grad-gold);
  border-radius: 62% 38% 46% 54% / 52% 44% 56% 48%;
  transform: rotate(-18deg);
}

/* --- 28.10 Split feature row (image / copy, alternating) ---------------- */
.feature-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
}

.feature-row + .feature-row { margin-top: clamp(2.6rem, 6vw, 5rem); }
.feature-row:nth-child(even) .feature-row__media { order: 2; }

.feature-row__media {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--sage-100);
  box-shadow: var(--sh-md);
}

.feature-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.feature-row:hover .feature-row__media img { transform: scale(1.05); }

/* Circular badge that overlaps the image corner */
.feature-row__badge {
  position: absolute;
  right: -14px;
  bottom: -14px;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  width: 118px;
  height: 118px;
  text-align: center;
  color: var(--warm-white);
  background: var(--grad-gold);
  border: 6px solid var(--page-base);
  border-radius: 50%;
  box-shadow: var(--sh-md);
  animation: floatY 6s ease-in-out infinite;
}

.feature-row__badge b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.feature-row__badge span { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* ==========================================================================
   29. Header & Footer — reference alignment
   --------------------------------------------------------------------------
   Header: logo left · menu truly centred · utility cluster right
   (search, call block, CTA) — the arrangement used by both reference sites.
   Footer: a newsletter band across the top, then the link columns.
   ========================================================================== */

/* --- 29.1 Top bar ------------------------------------------------------- */
.topbar__tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--gold-400);
  white-space: nowrap;
}

.topbar__tagline svg { width: 15px; height: 15px; flex: none; }

/* --- 29.2 Main navigation ----------------------------------------------
   Nine top-level items plus a logo and a utility cluster cannot fit on one
   row, so the menu is seven items with two dropdowns — the same count the
   reference sites carry. The header also gets a wider container than the
   page content so the row has room to breathe. */
.site-header > .nav { max-width: var(--container-wide); }

.nav__actions { gap: 0.5rem; }

/* The call block only appears when there is genuinely room for it */
.nav__call { display: none; }

@media (min-width: 1201px) {
  /* Three tracks so the menu is optically centred regardless of logo width */
  .nav {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
  }

  .nav__menu { justify-content: center; flex-wrap: nowrap; }

  /* Measured, not guessed: nine links at the old 0.62rem inline padding made
     the row 1696px wide inside a 1440px container, which clipped the booking
     CTA off the right edge. These values bring the menu back inside it. */
  .nav__link { padding: 0.6rem 0.5rem; font-size: 0.92rem; }

  /* The trailing CTA list item belongs to the drawer only */
  .nav__menu > .nav__item:last-child { display: none; }
}

/* The call block stays out of the header row at every width. It is 220px
   wide, and even at the container's 1560px ceiling the row still needs 1597px
   with it in — so it overhung the container edge on the widest screens and
   clipped the booking CTA on everything narrower. The same number is already
   in the top bar above, the footer, and the floating call button, so nothing
   is lost by keeping the row inside its container. */

/* --- 29.2a Dropdown menus ----------------------------------------------
   Mobile-first: the submenu is a collapsed block inside the drawer.
   From 1201px up it becomes an absolutely-positioned panel on hover/focus. */
.nav__item { position: relative; }
.nav__item--drop { display: flex; align-items: center; flex-wrap: wrap; }

.nav__caret {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform var(--t-base), color var(--t-base), background var(--t-base);
}

.nav__caret svg { width: 12px; height: 12px; }

.nav__drop {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s var(--ease-out);
}

.nav__item.is-open > .nav__drop { max-height: 520px; }

.nav__drop a {
  display: block;
  padding: 0.6rem 0.9rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  border-radius: var(--r-xs);
  transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
}

.nav__drop a:hover {
  background: var(--cream);
  color: var(--forest-900);
  padding-left: 1.2rem;
}

/* Must match the drawer breakpoint in responsive.css (1500px). If this opened
   at 1201px the flyout would render as an absolutely-positioned panel *inside*
   the drawer for every width between the two. */
@media (min-width: 1501px) {
  .nav__item--drop { flex-wrap: nowrap; gap: 0; }

  .nav__caret {
    width: 16px;
    height: 16px;
    margin-left: -0.42rem;
    border: 0;
    background: none;
    pointer-events: none;
  }

  .nav__caret svg { width: 10px; height: 10px; }

  .nav__drop {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 30;
    width: max-content;
    min-width: 236px;
    max-height: none;
    padding: 0.55rem;
    overflow: visible;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
  }

  /* Gold cap on the panel, echoing the button treatment */
  .nav__drop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-gold);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
  }

  .nav__item--drop:hover > .nav__drop,
  .nav__item--drop:focus-within > .nav__drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__item--drop:hover > .nav__caret,
  .nav__item--drop:focus-within > .nav__caret { transform: rotate(180deg); color: var(--gold-600); }

  /* The chip treatment belongs to the drawer only. Without this the (0,2,0)
     is-open rule repaints a background and border over the bare desktop
     chevron, which reads as a filled circle rather than an arrow. */
  .nav__item.is-open > .nav__caret {
    background: none;
    border: 0;
    color: var(--vermillion-600);
  }

  /* Keep the last dropdown inside the viewport */
  .nav__item--drop:nth-last-child(-n + 3) .nav__drop { left: auto; right: 0; }
}

/* Icon-only utility button (search) */
.nav__icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  color: var(--forest-800);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}

.nav__icon-btn svg { width: 18px; height: 18px; }

.nav__icon-btn:hover {
  color: var(--warm-white);
  background: var(--grad-gold);
  border-color: transparent;
  transform: rotate(-6deg);
}

/* Call-for-appointment block.
   `display` is deliberately not set here — visibility is owned by the
   media queries in 29.2 so the block only appears when there is room. */
.nav__call {
  align-items: center;
  gap: 0.6rem;
  padding-inline: 0.4rem 0.9rem;
  margin-inline: 0.15rem;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}

.nav__call-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--forest-800);
  background: var(--sage-100);
  border-radius: var(--r-leaf);
  transition: background var(--t-base), color var(--t-base), border-radius var(--t-base);
}

.nav__call-icon svg { width: 18px; height: 18px; }

.nav__call:hover .nav__call-icon {
  background: var(--grad-gold);
  color: var(--warm-white);
  border-radius: 50%;
}

.nav__call-text { display: grid; line-height: 1.25; }

.nav__call-text span {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav__call-text b {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--forest-900);
}

/* --- 29.3 Search overlay ------------------------------------------------ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.1rem;
  padding: var(--gutter);
  background: rgba(22, 17, 42, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}

.search-overlay.is-open { opacity: 1; visibility: visible; }

.search-overlay__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--warm-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.search-overlay__close svg { width: 20px; height: 20px; }
.search-overlay__close:hover { background: var(--gold-500); color: var(--warm-white); transform: rotate(90deg); }

.search-overlay__form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(720px, 100%);
  padding: 0.45rem 0.45rem 0.45rem 1.4rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(240, 128, 95, 0.4);
  border-radius: var(--r-pill);
  transform: translateY(16px);
  transition: transform var(--t-base), border-color var(--t-base);
}

.search-overlay.is-open .search-overlay__form { transform: translateY(0); }
.search-overlay__form:focus-within { border-color: var(--gold-400); }

.search-overlay__form input {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--warm-white);
  background: transparent;
  border: 0;
}

.search-overlay__form input::placeholder { color: rgba(203, 198, 214, 0.55); }
.search-overlay__form input:focus { outline: none; }

.search-overlay__form button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  color: var(--warm-white);
  background: var(--grad-gold);
  border-radius: 50%;
  transition: transform var(--t-fast);
}

.search-overlay__form button:hover { transform: scale(1.06); }
.search-overlay__form button svg { width: 19px; height: 19px; }

.search-overlay__hint {
  margin: 0;
  font-size: 0.83rem;
  letter-spacing: 0.04em;
  color: rgba(203, 198, 214, 0.66);
  text-align: center;
}

.search-overlay__results {
  display: grid;
  gap: 0.4rem;
  width: min(720px, 100%);
  max-height: 44vh;
  padding: 0;
  overflow-y: auto;
}

.search-overlay__results li { margin: 0; }

.search-overlay__results a {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 1.2rem;
  color: var(--on-dark-soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.search-overlay__results a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(240, 128, 95, 0.4);
  transform: translateX(4px);
}

.search-overlay__results b { font-family: var(--font-sans); font-size: 0.94rem; color: var(--warm-white); }
.search-overlay__results span { font-size: 0.78rem; color: rgba(203, 198, 214, 0.7); }
.search-overlay__results .is-empty { padding: 0.8rem 0; text-align: center; color: rgba(203, 198, 214, 0.6); font-size: 0.86rem; }

/* --- 29.4 Footer newsletter band ---------------------------------------- */
.footer-top {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(2.4rem, 4vw, 3.6rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(120% 180% at 12% 50%, rgba(218, 69, 38, 0.16) 0%, transparent 62%);
}

.footer-top__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
}

.footer-top__copy { display: flex; align-items: center; gap: 1.1rem; }

.footer-top__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  color: var(--warm-white);
  background: var(--grad-gold);
  border-radius: var(--r-leaf);
  animation: floatY 6s ease-in-out infinite;
}

.footer-top__icon svg { width: 25px; height: 25px; }
.footer-top__copy h4 { margin: 0 0 0.15rem; }
.footer-top__copy p { margin: 0; font-size: 0.86rem; line-height: 1.65; }

/* --- 29.5 Footer opening hours ------------------------------------------ */
.footer-hours {
  display: grid;
  gap: 0.45rem;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-hours li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.84rem;
}

.footer-hours span { color: var(--on-dark); }

.footer-hours i {
  flex: 1;
  height: 1px;
  min-width: 14px;
  background-image: radial-gradient(circle, rgba(203, 198, 214, 0.4) 1px, transparent 1px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: 0 bottom;
}

.footer-hours b { font-family: var(--font-sans); font-weight: 500; color: var(--gold-400); white-space: nowrap; }

/* --- 29.6 Botanical band across the footer top -------------------------- */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-gold);
  opacity: 0.5;
}

/* ==========================================================================
   30. Accreditation Marquee
   --------------------------------------------------------------------------
   Sitaram runs its certifications as a continuously scrolling badge rail
   rather than a static row. The track holds the badge list twice; the
   animation translates exactly -50%, so the second copy lands where the
   first began and the loop is seamless. `aria-hidden` on the duplicate
   keeps screen readers from announcing every badge twice.
   ========================================================================== */
.badge-band {
  padding-block: clamp(1.6rem, 3.5vw, 2.6rem);
  background: var(--surface);
  border-block: 1px solid var(--line);
  overflow: hidden;
}

.badge-band__label {
  margin: 0 0 1.15rem;
  text-align: center;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Fades the rail into the page at both ends instead of cutting it hard */
.badge-marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.badge-marquee__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  gap: clamp(1rem, 2.4vw, 2rem);
}

/* Only animates once initMarquee() has duplicated the badges — a -50% shift
   is only seamless when the track holds exactly two copies. Without JS the
   rail stays a static row rather than sliding into empty space. */
.badge-marquee.is-ready .badge-marquee__track { animation: badgeScroll 42s linear infinite; }

.badge-marquee:hover .badge-marquee__track,
.badge-marquee:focus-within .badge-marquee__track { animation-play-state: paused; }

/* Without JS the single copy may overflow, so let it scroll by hand */
.badge-marquee:not(.is-ready) .badge-marquee__track {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

@keyframes badgeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.badge-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  padding: 0.7rem 1.35rem 0.7rem 0.75rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}

.badge-chip:hover {
  background: var(--cream);
  border-color: var(--gold-400);
  transform: translateY(-3px);
}

.badge-chip__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  color: var(--forest-700);
  background: var(--sage-100);
  border-radius: 50%;
}

.badge-chip__icon svg { width: 19px; height: 19px; }
.badge-chip:hover .badge-chip__icon { background: var(--grad-gold); color: var(--warm-white); }

/* Scoped to __text rather than a bare `.badge-chip span`: that would also
   match .badge-chip__icon — and at higher specificity — replacing its
   `display: grid` with `block` and knocking the icon off-centre. */
.badge-chip__text b {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}

.badge-chip__text > span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ==========================================================================
   31. Lifestyle Rows (alternating narrative blocks)
   --------------------------------------------------------------------------
   Sitaram's image/copy rows that flip side each row. Built on the existing
   `.feature-row` grid — this adds the stacked rhythm, the step index and
   the check list used on the copy side.
   ========================================================================== */
.lifestyle-stack { display: grid; gap: clamp(1.3rem, 2.4vw, 2.2rem); }

/* Each row carries both .feature-row and .lifestyle-row, so the standalone
   rule `.feature-row + .feature-row { margin-top: clamp(2.6rem, 6vw, 5rem) }`
   was firing on top of this grid's own gap — about 125px between rows once
   both landed. The stack owns the vertical rhythm here; the margin is for
   feature rows used outside one. */
.lifestyle-stack > .feature-row + .feature-row { margin-top: 0; }

/* `.feature-row` alternates on nth-child(even), but each row here is wrapped
   for its own reveal timing, so the flip is set explicitly per row instead. */
.lifestyle-row--flip .feature-row__media { order: 2; }

.lifestyle-row__index {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--forest-800);
  background: var(--sage-100);
  border: 1px solid var(--sage-200);
  border-radius: 50%;
}

.lifestyle-row h3 {
  margin: 0 0 0.75rem;
  font-size: var(--fs-h3);
  line-height: 1.22;
}

.lifestyle-row__list {
  margin: 1.4rem 0 1.8rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.lifestyle-row__list li {
  position: relative;
  padding-left: 2rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.lifestyle-row__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 20px;
  height: 20px;
  background: var(--sage-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D3059' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-radius: 50%;
}

/* Media side: soft arch frame with a floating leaf watermark behind it */
.lifestyle-row .feature-row__media { aspect-ratio: 4 / 3.6; }

.lifestyle-row__tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 0.5rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-950);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}

/* ==========================================================================
   32. Statement Band
   --------------------------------------------------------------------------
   A type-only band between the credentials rail and the About preview. No
   photograph, no film, no wordmark and no buttons. Centred on one narrow
   column it left deep empty margins either side, so it runs as two columns
   instead: the statement on the left, the sentence and the signature on the
   right, divided by a hairline. Both halves fill the container width.
   ========================================================================== */
/* Tighter than the standard --section-y: the band holds three short blocks,
   and at full section rhythm it read as a mostly empty screen. */
.statement-band {
  position: relative;
  padding-block: clamp(1.9rem, 1.2rem + 1.8vw, 3rem);
  background: var(--grad-cream);
  border-block: 1px solid var(--line);
}

/* Column and row gaps are set separately. A single `gap` put the full 4.5rem
   between the top row and the signature card as well as between the two
   columns, which — stacked on the card's own margin and padding — opened a
   ~110px void down the middle of the band. */
.statement-band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.8rem, 4vw, 3.6rem);
  row-gap: 0;
  align-items: center;
}

.statement-band h2 { margin: 0; }

/* The rule divides the two halves; it sits on the right column so it hugs
   the copy rather than the middle of the gap. */
.statement-band__aside {
  padding-left: clamp(1.6rem, 3.5vw, 3rem);
  border-left: 1px solid var(--line-strong);
}

.statement-band__aside > p {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

/* Signature card. It spans both columns rather than sitting inside the right
   one: at display size the full name needs the container's whole width to
   stay on a single line, and half of it would force a wrap. */
.statement-band__brand {
  grid-column: 1 / -1;
  /* Shrink-to-fit rather than full-bleed: stretched across the container the
     card left a wide empty margin either side of a short name. */
  width: fit-content;
  max-width: 100%;
  margin: clamp(1.2rem, 2.4vw, 1.7rem) auto 0;
  display: grid;
  justify-items: center;
  gap: 0.22rem;
  padding: clamp(0.95rem, 1.8vw, 1.35rem) clamp(1.6rem, 4vw, 3rem);
  text-align: center;
  background: linear-gradient(180deg, var(--surface) 0%, var(--warm-white) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 44px -30px rgba(28, 21, 46, 0.4),
              0 2px 6px -3px rgba(28, 21, 46, 0.08);
}

.statement-band__brand span {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* The name is the point of the signature, so it is set at heading scale and
   inked in a navy-to-vermillion sweep rather than flat ink. The flat colour
   is declared first as the fallback: background-clip: text has no effect
   without it in browsers that do not support the property, and the text
   would render transparent. */
.statement-band__brand b {
  position: relative;
  padding-bottom: 0.62rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1rem + 1.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.004em;
  color: var(--forest-900);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .statement-band__brand b {
    background: linear-gradient(96deg, var(--navy-900) 0%, var(--navy-700) 38%, var(--vermillion-600) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Short capsule under the name — the same marker the nav links use, so the
   emphasis reads as part of the system rather than a one-off flourish. */
.statement-band__brand b::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 72px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  transform: translateX(-50%);
}

/* One line, but only where there is room for it. Measured at the smallest
   width this applies to — 861px, giving a ~717px inner card — the name sets
   to about 510px, so it clears comfortably. Below that it is allowed to wrap
   rather than overflow the card. */
@media (min-width: 861px) {
  .statement-band__brand b { white-space: nowrap; }
}

.statement-band__brand i {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--gold-600);
}

/* ==========================================================================
   33. Video Player (play control + modal)
   ========================================================================== */
.play-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(76px, 9vw, 104px);
  height: clamp(76px, 9vw, 104px);
  margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  padding: 0;
  color: var(--forest-900);
  background: var(--warm-white);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--sh-lg);
  transition: transform var(--t-base), background var(--t-base), color var(--t-base);
}

.play-btn svg {
  width: 30%;
  height: 30%;
  margin-left: 8%; /* optical centring — the triangle's mass sits left */
  fill: currentColor;
}

.play-btn:hover,
.play-btn:focus-visible {
  transform: scale(1.08);
  background: var(--grad-gold);
  color: var(--warm-white);
}

/* Two offset expanding rings, radiating outward from behind the button */
.play-btn::before,
.play-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(253, 251, 246, 0.55);
  border-radius: 50%;
  animation: playPulse 2.8s var(--ease-out) infinite;
}

.play-btn::after { animation-delay: 1.4s; }

@keyframes playPulse {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* --- Modal player ------------------------------------------------------- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(22, 17, 42, 0.9);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}

.video-modal.is-open { opacity: 1; visibility: visible; }

.video-modal__frame {
  position: relative;
  width: min(1040px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  transform: scale(0.94);
  transition: transform var(--t-base);
}

.video-modal.is-open .video-modal__frame { transform: scale(1); }
.video-modal__frame iframe { width: 100%; height: 100%; border: 0; }

.video-modal__close {
  position: absolute;
  top: -52px;
  right: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-base);
}

.video-modal__close:hover { background: var(--gold-500); color: var(--warm-white); transform: rotate(90deg); }
.video-modal__close svg { width: 18px; height: 18px; }


/* "Full details" link under each block on the Services overview page */
.service-block__more { margin: 1.1rem 0 0; }

/* ==========================================================================
   34. Brand Banners (b1 / b2 key artwork)
   --------------------------------------------------------------------------
   The supplied banners are finished 2560×800 compositions with their own
   headline, body copy and icon rails baked into the artwork. So they are
   presented as images, never as background layers with markup text on top —
   any overlay would collide with type that is already in the picture. The
   copy inside them is mirrored into each image's alt text so the message
   still reaches screen readers and search engines.
   ========================================================================== */
/* Full-bleed: no container, no gutter, no vertical padding. The artwork meets
   the header above it and whatever follows below with no seam. */
.banner-rail {
  position: relative;
  padding-block: 0;
  background: var(--sage-100);
}

.banner-rail__inner { width: 100%; }

.banner-rail .slider__viewport { padding-block: 0; }

.banner-rail .slider__slide { flex-basis: 100%; }

.banner {
  display: block;
  overflow: hidden;
  background: var(--sage-100);
}

.banner img {
  display: block;
  width: 100%;
  height: auto;
  /* Held at the artwork's native 32:10 so nothing in the composition is
     cropped and the slide height never jumps between the two banners. */
  aspect-ratio: 32 / 10;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

a.banner:hover img { transform: scale(1.02); }

/* Slides butt straight up against each other. The inherited gap would flash a
   strip of background between them mid-transition now that the viewport is
   the full width of the screen. */
.banner-rail .slider { --slider-gap: 0px; }

/* With no band under the artwork left to sit in, the dots move onto it — in
   the bottom-right corner, clear of the centred pull-quote both banners close
   with. */
.banner-rail .slider__nav {
  position: absolute;
  right: clamp(0.9rem, 2.2vw, 2.2rem);
  bottom: clamp(0.7rem, 1.6vw, 1.5rem);
  z-index: 2;
  margin-top: 0;
  pointer-events: none;
}

.banner-rail .slider__dots {
  pointer-events: auto;
  margin-inline: 0;
  padding: 0.4rem 0.62rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.banner-rail .slider__dot { background: var(--forest-800); opacity: 0.35; }
.banner-rail .slider__dot.is-active { opacity: 1; background: var(--grad-gold); }

/* Single banner used on the service detail pages — no slider, no controls */

/* ==========================================================================
   Reduced motion — respect user preference
   ========================================================================== */
@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;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__glow { display: none; }

  /* The blanket rule above ends every animation at its final keyframe. For
     the marquee that is translate(-50%), which would park half the badges
     off-screen — so it is stopped outright and the rail becomes a plain
     horizontally-scrollable row instead. */
  .badge-marquee__track {
    animation: none !important;
    transform: none !important;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .badge-marquee__track::-webkit-scrollbar { display: none; }
  .badge-marquee { -webkit-mask-image: none; mask-image: none; }
  .badge-marquee__track > [aria-hidden="true"] { display: none; }

  /* Likewise the play button's rings would freeze fully expanded. */
  .play-btn::before,
  .play-btn::after { display: none; }
}

/* ==========================================================================
   33. Header & Footer — brand redesign
   --------------------------------------------------------------------------
   The four colours measured off assets/images/logo.png now drive the two
   chrome bands instead of only sitting in the token list:

     #261E3A  navy-plum   ground for the top bar and the footer
     #DA4526  vermillion  primary accent — CTAs, underlines, icon fills
     #37713E  leaf green  supporting accent — link bullets, hover washes
     #B92235  crimson     closing note of the brand rule, small highlights

   The header and footer markup is duplicated across seventeen pages, so this
   is deliberately CSS-only: restyling here is what stops the two bands from
   drifting apart page to page. Rules are grouped last so they win over the
   earlier passes in sections 08 and 29 at equal specificity.
   ========================================================================== */
:root {
  /* The brand rule. The three chromatic logo colours read left to right in
     the order the eye meets them on the seal — leaf crown, outer ring, centre
     disc. Used as a cap or a floor wherever a band needs signing. */
  --grad-brand: linear-gradient(90deg,
                var(--leaf-600) 0%,
                var(--leaf-500) 20%,
                var(--vermillion-500) 56%,
                var(--crimson-600) 100%);

  --chrome-hair: rgba(255, 255, 255, 0.10);
  --chrome-hair-soft: rgba(255, 255, 255, 0.06);
  --chrome-fill: rgba(255, 255, 255, 0.045);

  --header-h: 88px;
}

/* --- 33.1 Top bar --------------------------------------------------------
   The first band above the logo, so it carries the brand rather than sitting
   quiet: a lit plum ground, a brand rule top and bottom, the phone number set
   as a pill so it reads as the bar's one action, and social chips in their
   own platform colours. */
.topbar {
  background:
    radial-gradient(130% 320% at 0% 50%, rgba(218, 69, 38, 0.34) 0%, transparent 58%),
    radial-gradient(130% 320% at 100% 50%, rgba(55, 113, 62, 0.32) 0%, transparent 58%),
    linear-gradient(90deg, var(--navy-950) 0%, var(--navy-700) 50%, var(--navy-950) 100%);
  color: var(--on-dark);
  font-size: 0.92rem;
  letter-spacing: 0.015em;
}

/* Brand rule on both edges — the strip reads as a deliberate band rather
   than as dead space above the header. */
.topbar::before,
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--grad-brand);
}

.topbar::before { top: 0; height: 2px; opacity: 0.55; }
.topbar::after  { bottom: 0; height: 3px; opacity: 1; }

.topbar__inner { min-height: 52px; padding-block: 0.45rem; }

.topbar__tagline {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--vermillion-200);
}

/* The tagline glyph is a leaf, so it takes the leaf colour rather than the
   ring colour the rest of the bar uses. */
.topbar__tagline svg { color: var(--leaf-300); }

.topbar__list { align-items: center; gap: 1.2rem; }

.topbar__list a,
.topbar__list span { color: rgba(240, 238, 246, 0.9); }

/* One logo colour per utility item — the whole palette appears in the strip
   without any of it having to carry text-level contrast on its own. */
.topbar__list svg { width: 14px; height: 14px; }
.topbar__list li:nth-child(2) svg { color: var(--leaf-300); }
.topbar__list li:nth-child(3) svg { color: var(--crimson-500); }

/* The phone is the only thing a visitor is meant to act on up here, so it is
   given a pill instead of being one more grey line of text. */
.topbar__list li:nth-child(1) a {
  gap: 0.55rem;
  padding: 0.36rem 1rem 0.36rem 0.85rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--warm-white);
  background: rgba(218, 69, 38, 0.18);
  border: 1px solid rgba(240, 128, 95, 0.42);
  border-radius: var(--r-pill);
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}

.topbar__list li:nth-child(1) svg { width: 15px; height: 15px; color: var(--vermillion-400); }

.topbar__list li:nth-child(1) a:hover {
  color: var(--warm-white);
  background: var(--grad-gold);
  border-color: transparent;
  transform: translateY(-1px);
}

.topbar__list li:nth-child(1) a:hover svg { color: var(--warm-white); }

/* --- Social chips (top bar + footer) -------------------------------------
   One treatment, both bands: each chip is filled with its own platform
   colour and carries a white glyph, so the row is recognisable at a glance
   rather than only on hover. Hovering lifts the chip and lights the shadow
   in the same hue. Platforms are matched on aria-label, which every icon
   already carries for screen readers.

   Official brand values, not approximations:
     Facebook  #1877F2   Instagram  gradient (fallback #E4405F)
     YouTube   #FF0000   WhatsApp   #25D366                          */
.topbar__socials { gap: 0.5rem; }

.topbar__socials a,
.site-footer .socials a {
  display: grid;
  place-items: center;
  color: #FFFFFF;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.6);
  transition: background var(--t-fast), color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}

.topbar__socials a { width: 32px; height: 32px; }
.topbar__socials svg { width: 15px; height: 15px; }
.site-footer .socials svg { width: 19px; height: 19px; }

.topbar__socials a[aria-label="Facebook"],
.site-footer .socials a[aria-label="Facebook"]  { background: #1877F2; }
/* Instagram publishes a gradient rather than one flat colour, so the chip
   carries the gradient itself — the same stops Meta's brand assets use,
   corner to corner. #E4405F is its single-colour fallback. */
.topbar__socials a[aria-label="Instagram"],
.site-footer .socials a[aria-label="Instagram"] {
  background: #E4405F;
  background: linear-gradient(45deg,
              #FFDC80 0%, #FCAF45 10%, #F77737 20%, #F56040 28%,
              #FD1D1D 42%, #E1306C 56%, #C13584 70%, #833AB4 82%,
              #5851DB 92%, #405DE6 100%);
}
.topbar__socials a[aria-label="YouTube"],
.site-footer .socials a[aria-label="YouTube"]   { background: #FF0000; }
.topbar__socials a[aria-label="WhatsApp"],
.site-footer .socials a[aria-label="WhatsApp"]  { background: #25D366; }
.topbar__socials a[aria-label="LinkedIn"],
.site-footer .socials a[aria-label="LinkedIn"]  { background: #0A66C2; }
/* X publishes no colour of its own — the mark is black on white or white on
   black. Near-black rather than #000 so the chip does not punch a hole in
   the row beside four saturated ones. */
.topbar__socials a[aria-label^="X"],
.site-footer .socials a[aria-label^="X"]         { background: #14171A; }

.topbar__socials a:hover,
.site-footer .socials a:hover {
  color: #FFFFFF;
  transform: translateY(-3px) scale(1.07);
}

.topbar__socials a[aria-label="Facebook"]:hover,
.site-footer .socials a[aria-label="Facebook"]:hover {
  background: #1877F2;
  box-shadow: 0 10px 22px -8px rgba(24, 119, 242, 0.95);
}

.topbar__socials a[aria-label="YouTube"]:hover,
.site-footer .socials a[aria-label="YouTube"]:hover {
  background: #FF0000;
  box-shadow: 0 10px 22px -8px rgba(255, 0, 0, 0.9);
}

.topbar__socials a[aria-label="WhatsApp"]:hover,
.site-footer .socials a[aria-label="WhatsApp"]:hover {
  background: #25D366;
  box-shadow: 0 10px 22px -8px rgba(37, 211, 102, 0.95);
}

.topbar__socials a[aria-label="Instagram"]:hover,
.site-footer .socials a[aria-label="Instagram"]:hover {
  box-shadow: 0 10px 22px -8px rgba(225, 48, 108, 0.95);
}

.topbar__socials a[aria-label="LinkedIn"]:hover,
.site-footer .socials a[aria-label="LinkedIn"]:hover {
  background: #0A66C2;
  box-shadow: 0 10px 22px -8px rgba(10, 102, 194, 0.95);
}

.topbar__socials a[aria-label^="X"]:hover,
.site-footer .socials a[aria-label^="X"]:hover {
  background: #14171A;
  box-shadow: 0 10px 22px -8px rgba(20, 23, 26, 0.9);
}

/* --- 33.2 Header bar ------------------------------------------------------
   A hairline border read as a generic template edge. The header is now
   signed with the brand rule instead: quiet while the page sits at the top,
   full strength once the bar detaches and starts overlapping content. */
.site-header {
  background: rgba(253, 251, 246, 0.90);
  border-bottom: 0;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad-brand);
  opacity: 0.5;
  transition: opacity var(--t-base);
}

.site-header.is-stuck {
  background: rgba(253, 251, 246, 0.985);
  border-bottom-color: transparent;
  box-shadow: 0 14px 34px -22px rgba(38, 30, 58, 0.55);
}

.site-header.is-stuck::after { opacity: 1; }

/* --- 33.3 Logo lock-up ---------------------------------------------------- */
.logo { gap: 0.8rem; }

/* The header carries the complete mark, not the bare seal:
   assets/images/logo-lockup.png is logo.png re-arranged horizontally — the
   seal (with its curved JNANESHWARI AYUSH FOUNDATION'S ring text) on the
   left, SANATANA and HOLISTIC HEALING SOLUTIONS beside it. Nothing is
   redrawn; the three bands are cropped from the original artwork and set
   side by side.

   The square logo.png cannot be used here for a measured reason: its tagline
   occupies 4.4% of a 954px canvas, so at header height that line renders
   under 3px. Laid out horizontally the same words clear ~7px. */
.logo__lockup {
  height: 56px;
  width: auto;
  max-width: none;
  display: block;
  transition: transform var(--t-base), filter var(--t-base);
}

.logo:hover .logo__lockup { transform: scale(1.02); }

/* Still used by the preloader */
.logo__mark { border-radius: 50%; }


/* --- 33.3b Complete logo (footer) ----------------------------------------
   assets/images/logo-light.png is logo.png with one change: every navy pixel
   OUTSIDE the seal disc — the curved foundation text and the SANATANA
   wordmark — recoloured to --on-dark. The seal itself is untouched, so the
   navy knot keeps its white ground. The recolour swaps RGB only and leaves
   the alpha channel alone, which is where the artwork's antialiasing lives,
   so every soft edge survives intact.

   It exists because the wordmark in logo.png is navy on transparency: drop
   the original onto the navy footer and the entire lower half of the mark
   disappears. A reversed logo is the standard answer to that; a white plate
   behind the original was the alternative and reads as a sticker. */
.logo--full { display: inline-block; flex: none; }

/* The floor is set by legibility, not by taste: "HOLISTIC HEALING SOLUTIONS"
   is 4.4% of the artwork's height, so 170px puts that line at roughly 7.5px
   — about as small as it can go and still be read. */
.logo__full {
  display: block;
  width: clamp(170px, 15vw, 200px);
  height: auto;
}

/* --- 33.4 Primary navigation ---------------------------------------------- */
.nav__link { color: var(--navy-700); }

.nav__link:hover { color: var(--vermillion-600); }
.nav__link.is-active { color: var(--navy-900); font-weight: 600; }

/* Active-page marker: a fixed 32x3 pill rather than the old full-width 2px
   rule, which stretched to the label and so drew a different length under
   "Home" than under "Guided Meditation Program". A fixed pill reads as one
   consistent marker across every page.

   The link carries 0.6rem of bottom padding, so the bar sits at bottom: 2px
   to land roughly 10px under the text — the offset the brief asks for —
   without pushing outside the header and colliding with the brand rule.
   initActiveMenu() in script.js sets .is-active from the filename, so
   exactly one item is ever marked. */
.nav__link::after {
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 3px;
  border-radius: 10px;
  background: var(--grad-gold);
  transform: translateX(-50%);
  transition: width var(--t-fast), opacity var(--t-fast);
}

.nav__link:hover::after { width: 20px; opacity: 0.55; }

.nav__link.is-active::after,
.nav__link.is-active:hover::after { width: 32px; opacity: 1; }

.nav__caret { color: var(--navy-500); }

/* Drawer only. This rule is (0,2,0) and lives later in the sheet than the
   min-width:1501px block, so unscoped it repainted a filled chip over the
   bare desktop chevron — on every service page, where initActiveMenu marks
   the Services parent is-open. That is what rendered as a peach dot. */
@media (max-width: 1500px) {
  .nav__item.is-open > .nav__caret {
    color: var(--vermillion-600);
    background: var(--vermillion-200);
    border-color: transparent;
  }
}

/* The chevron was computing to 4x10px. .nav__caret is a <button>, so it
   carries the UA's default ~6px inline padding; with border-box and a 16px
   width that leaves a 4px content box, and the global `svg { max-width:100% }`
   in the reset then clamps the declared 10px chevron down to 4px. Zeroing the
   button padding restores the full content box. */
.nav__caret { padding: 0; }
.nav__caret svg { flex: none; max-width: none; }

/* Dropdown items take a leaf-green wash and a green bullet on hover, so the
   flyout is the one place green leads rather than supports. */
.nav__drop a { position: relative; }

.nav__drop a::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--leaf-600);
  transform: translateY(-50%) scale(0);
  transition: transform var(--t-fast);
}

.nav__drop a:hover {
  background: var(--leaf-100);
  color: var(--navy-900);
  padding-left: 1.35rem;
}

.nav__drop a:hover::before { transform: translateY(-50%) scale(1); }

@media (min-width: 1501px) {
  .nav__drop {
    padding: 0.6rem;
    border-radius: var(--r-md);
    border-color: rgba(38, 30, 58, 0.08);
    box-shadow: var(--sh-lg);
  }

  /* Full brand rule across the panel cap, not just the vermillion sweep */
  .nav__drop::before {
    height: 3px;
    background: var(--grad-brand);
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
}

/* Search toggle: the old rotate-on-hover fought the circular shape. */
.nav__icon-btn {
  color: var(--navy-800);
  border-color: rgba(38, 30, 58, 0.16);
}

.nav__icon-btn:hover {
  color: var(--warm-white);
  background: var(--grad-gold);
  border-color: transparent;
  transform: scale(1.06);
  box-shadow: var(--sh-gold);
}

.nav__call-icon { background: var(--leaf-100); color: var(--leaf-700); }
.nav__call-text b { color: var(--navy-900); }

/* --- 33.5 Mobile drawer ---------------------------------------------------
   The drawer is the header on a phone, so it gets the same brand rule the
   desktop bar carries — capping the panel rather than underlining it. */
@media (max-width: 1500px) {
  .nav__menu {
    border-left: 0;
    box-shadow: -30px 0 70px -34px rgba(22, 17, 42, 0.55);
  }

  .nav__menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-brand);
  }

  .nav__menu .nav__link { color: var(--navy-800); border-bottom-color: rgba(38, 30, 58, 0.08); }
  .nav__menu .nav__link:hover { color: var(--vermillion-600); }
  .nav__item--drop { border-bottom-color: rgba(38, 30, 58, 0.08); }
  .nav__menu .btn { width: 100%; }
}

/* --- 33.6 Footer ground ---------------------------------------------------
   Flat navy-950 gave the footer no depth. Two corner washes now light it —
   green at the top left, vermillion at the top right — over a navy gradient
   that darkens downward so the copyright line sits at the deepest point.

   The alphas are deliberately low and crimson is kept out of the ground
   entirely: at the 0.22 first tried, the warm washes tipped the whole band
   from navy-plum to wine and the navy stopped reading as the logo's navy.
   Crimson stays where the token list puts it — the brand rule and small
   highlights.

   padding-top was zero here so the newsletter band could sit flush under the
   brand rule as a masthead. That band has since been removed; section 49
   restores the clearance the link columns now need. */
.site-footer {
  padding-top: 0;
  background:
    radial-gradient(72% 88% at 0% 0%, rgba(55, 113, 62, 0.26) 0%, transparent 60%),
    radial-gradient(66% 84% at 100% 0%, rgba(218, 69, 38, 0.17) 0%, transparent 62%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 55%, #100C1E 100%);
  /* Pure white in the footer, not the cream --on-dark used elsewhere: the
     token is redefined here so every rule inside that reads var(--on-dark)
     resolves to #FFF without each one needing its own override. */
  --on-dark: #FFFFFF;
  color: var(--on-dark);
}

/* Replaces the half-opacity vermillion bar with the full brand rule.
   z-index is required, not decorative: .footer-top is the footer's first
   child and carries z-index 1, so at the default stacking order its fill
   painted straight over the rule and the footer lost its cap. */
.site-footer::before {
  z-index: 2;
  height: 4px;
  background: var(--grad-brand);
  opacity: 1;
}


/* Column headings: white type with the brand rule beneath, rather than four
   identical vermillion labels. */
.site-footer h4 {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
  padding-bottom: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--warm-white);
}

/* 46px, not 38: the rule is the full brand gradient, and below about 44px
   the green leg compresses to a couple of pixels and stops reading. */
.site-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}

/* --- 33.7 Newsletter band -------------------------------------------------
   Kept full-bleed rather than boxed: .footer-top__inner is also the
   .container, so a border on it would paint out to the viewport edge.

   The fill is a flat white wash rather than its own pair of coloured glows —
   two gradient systems stacked on the footer's ground turned the strip
   muddy, and the band only needs to separate, not to re-state the palette. */
.footer-top {
  margin-bottom: clamp(2.6rem, 4.5vw, 3.8rem);
  padding-block: clamp(2rem, 3.5vw, 3.1rem);
  border-bottom: 1px solid var(--chrome-hair);
  background: rgba(255, 255, 255, 0.05);
}

/* The band's heading is a real title, not a column label — it opts out of
   the rule-underneath treatment above. */
.footer-top__copy h4 {
  margin-bottom: 0.2rem;
  padding-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--warm-white);
}

.footer-top__copy h4::after { display: none; }
.footer-top__copy p { color: var(--on-dark); }

.footer-top__icon {
  box-shadow: 0 0 0 1px rgba(240, 128, 95, 0.28),
              0 16px 34px -18px rgba(218, 69, 38, 0.7);
}

.newsletter__form {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.newsletter__form:focus-within {
  border-color: var(--vermillion-400);
  box-shadow: 0 0 0 4px rgba(218, 69, 38, 0.14);
}

/* --- 33.8 Footer brand column ---------------------------------------------
   The footer now renders the complete mark (see 33.3b), so the white-disc
   treatment that section 24 applied to the cropped seal no longer has a
   target — .footer-brand .logo__mark is gone from the markup. */
.footer-brand .logo--full { margin-bottom: 0.35rem; }
.footer-brand p { max-width: 44ch; color: var(--on-dark); }

/* --- 33.9 Footer links, contact and hours --------------------------------- */
.footer-links { gap: 0.72rem; }

.footer-links a {
  color: var(--on-dark);
  transition: color var(--t-fast), transform var(--t-fast);
}

/* Bullets rest green and warm to vermillion on hover — the same leaf-to-ring
   move the dropdown makes, so the two navigations behave alike. */
.footer-links a::before { background: var(--leaf-500); opacity: 0.85; }
.footer-links a:hover { color: var(--vermillion-400); transform: translateX(4px); }
.footer-links a:hover::before { background: var(--vermillion-500); transform: scale(1.6); opacity: 1; }

.footer-contact { gap: 1rem; }
.footer-contact li { align-items: flex-start; gap: 0.8rem; }

/* The icon is a bare child of the li, so the chip is drawn on the svg itself
   — 32px box, 7px padding, leaving the glyph at about 16px. */
.footer-contact svg {
  width: 32px;
  height: 32px;
  padding: 7px;
  margin-top: 0;
  color: var(--vermillion-400);
  background: rgba(240, 128, 95, 0.12);
  border: 1px solid rgba(240, 128, 95, 0.24);
  border-radius: 50%;
}

.footer-contact a:hover { color: var(--vermillion-400); }

.footer-hours {
  margin-top: 1.4rem;
  padding: 0.95rem 1.1rem;
  gap: 0.55rem;
  background: var(--chrome-fill);
  border: 1px solid var(--chrome-hair);
  border-radius: var(--r-sm);
}

.footer-hours span { color: var(--on-dark); }
.footer-hours i { background-image: radial-gradient(circle, rgba(156, 196, 161, 0.5) 1px, transparent 1px); }
.footer-hours b { color: var(--vermillion-200); font-weight: 600; }

/* --- 33.10 Socials --------------------------------------------------------
   Each channel takes a different logo colour on hover so the palette is
   spelled out once, in full, at the foot of every page. WhatsApp landing on
   leaf green is a happy accident of ordering, not a brand exception. */
.socials { gap: 0.55rem; }

.socials a {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--on-dark);
}

.socials a:hover,
.topbar__socials a:hover { color: var(--warm-white); }

.socials a:nth-child(1):hover,
.topbar__socials a:nth-child(1):hover { background: var(--vermillion-500); }

.socials a:nth-child(2):hover,
.topbar__socials a:nth-child(2):hover { background: var(--crimson-600); }

.socials a:nth-child(3):hover,
.topbar__socials a:nth-child(3):hover { background: var(--vermillion-700); }

.socials a:nth-child(4):hover,
.topbar__socials a:nth-child(4):hover { background: var(--leaf-600); }

.socials a:hover { transform: translateY(-4px); box-shadow: var(--sh-sm); }

/* --- 33.11 Bottom bar ----------------------------------------------------- */
.footer-bottom {
  border-top-color: var(--chrome-hair-soft);
  color: var(--on-dark);
}

.footer-bottom a { color: var(--on-dark); }
.footer-bottom a:hover { color: var(--vermillion-400); }

/* Hairline between the bottom links; the 1.2rem gap puts the divider on the
   midpoint at -0.6rem. */
.footer-bottom__links a { position: relative; }

.footer-bottom__links a + a::before {
  content: "";
  position: absolute;
  left: -0.6rem;
  top: 50%;
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-50%);
}

/* ==========================================================================
   34. Homepage design system — cards, media, rhythm
   --------------------------------------------------------------------------
   The homepage grew section by section, so each block had drifted into its
   own radius, border, shadow and hover distance. This section pulls all of
   them onto one system. It sets only the shared shell — radius, border,
   shadow, hover, media fitting — and leaves each component's own padding and
   internal layout alone, because their content genuinely differs.
   ========================================================================== */

/* --- 34.1 Section heading rhythm ----------------------------------------
   Eyebrow -> heading -> supporting line, with the same three gaps every
   time, so no section starts closer to its content than its neighbour. */
.section-head { margin-bottom: var(--sp-7); }
.section-head .eyebrow { margin-bottom: var(--sp-2); }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head p { margin: 0; max-width: 64ch; }
.section-head--center p { margin-inline: auto; }
.section-head .ornament { margin-block: var(--sp-2) var(--sp-3); }

/* --- 34.2 The card shell -------------------------------------------------
   One radius, one hairline, one resting shadow, one hover distance. The
   hover lift is 5px: the old cards ranged from 4px to 12px, and a 12px jump
   on a 600px card reads as the layout twitching rather than responding. */
.service-card,
.phil-card,
.condition-card,
.program-card,
.t-card,
.event-card,
.course-card,
.info-card,
.feature-card,
.doc-card,
.journal-card,
.branch-card,
.cat-tile {
  border-radius: var(--r-card);
  border: var(--card-border);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              border-color var(--t-fast);
}

.service-card:hover,
.phil-card:hover,
.condition-card:hover,
.program-card:hover,
.t-card:hover,
.event-card:hover,
.course-card:hover,
.info-card:hover,
.feature-card:hover,
.doc-card:hover,
.journal-card:hover,
.branch-card:hover,
.cat-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
  border-color: rgba(218, 69, 38, 0.28);
}

/* --- 34.3 Equal card heights --------------------------------------------
   Grid stretches items within a row already, but rows sized to their own
   tallest card left the grid looking ragged down the page. 1fr rows make
   every row match, so all cards in a grid share one height. */
.grid--auto,
.grid--auto-sm,
.grid--2,
.grid--3,
.grid--4,
.philosophy-grid { grid-auto-rows: 1fr; }

.grid--auto > *,
.grid--auto-sm > *,
.grid--2 > *,
.grid--3 > *,
.grid--4 > *,
.philosophy-grid > * { height: 100%; }

/* --- 34.4 Media fitting --------------------------------------------------
   Every card image sits in a fixed-ratio frame and covers it, so no card
   can stretch, letterbox or leave an empty well. The ratio is declared on
   the frame rather than the image: the image then has a box to fill even
   before it loads, which also stops the grid reflowing as images arrive. */
.service-card__media,
.course-card__media,
.doc-card__media,
.journal-card__media,
.program-card__media,
.feature-row__media {
  position: relative;
  overflow: hidden;
  background: var(--sage-100);
}

.service-card__media,
.course-card__media,
.journal-card__media { aspect-ratio: 16 / 10; }

/* Course cards, article cards and the past-event cards all share
   .course-card__media, and the artwork in them is now exported at 3:2
   (1080x720). Against a 16:10 frame every one of those lost a band off the
   top and bottom to cover; at 3:2 they fill the frame exactly, nothing
   cropped. Two of the set are squarer collages (1080x865) and still lose a
   little — re-export those at 3:2 and the whole set is flush.

   Only the course frame moves: .service-card__media has its own poster ratio
   and .journal-card__media its own artwork. */
.course-card__media { aspect-ratio: 3 / 2; }

.service-card__media > img,
.course-card__media > img,
.doc-card__media > img,
.journal-card__media > img,
.program-card__media > img,
.feature-row__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Course / article / past-event artwork: show the whole picture
   --------------------------------------------------------------------------
   These are not photographs. Each is a finished composition — several of them
   multi-panel collages — whose subject runs right out to the edges, so cover
   does not "crop unimportant border": it removes panels. The set is also not
   one shape (most are 3:2 at 1080x720, two are 1080x865), and no single
   covering frame can suit both.

   So the frame contains instead. The 3:2 exports fill it exactly, edge to
   edge with no band at all; the two squarer collages sit centred with a
   narrow cream mount either side. Every card in a row keeps the same height,
   which is what a shared ratio is for, and nothing is cut off.

   Cover stays the default everywhere else on the site — it is right for
   photographs, which lose nothing at the edges.
   ========================================================================== */
.course-card__media { background: var(--cream); }

.course-card__media > img,
.course-card__media img {
  object-fit: contain;
}

/* The zoom-and-tilt on hover is a photographic gesture. On a contained
   composition it pushes the artwork past its own frame, so it comes off. */
.course-card:hover .course-card__media img {
  transform: none;
}

/* Faces sit in the upper part of a portrait crop, so a centred crop cuts
   foreheads. Team and testimonial photography anchors to the top instead. */
.team-card__media > img,
.t-card__avatar > img,
.practitioner__media > img { object-fit: cover; object-position: center top; }

/* Nothing may exceed its column, whatever the source dimensions */
main img { max-width: 100%; }

/* --- 34.6 Buttons --------------------------------------------------------
   Sized to the brief: 44px minimum target, 10px radius, never oversized. */
.btn {
  min-height: 44px;
  padding: 0.75rem 1.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  border-radius: 10px;
}

.btn--sm { min-height: 40px; padding: 0.6rem 1.1rem; font-size: 0.72rem; }
.btn--lg { min-height: 52px; padding: 0.95rem 1.9rem; font-size: 0.84rem; }
.btn:hover { transform: translateY(-2px); }

/* The pill CTA in the header stays a pill — it reads as the one action on
   the bar, and a 10px radius there would blend into the search circle. */
.nav__actions .btn,
.nav__menu .btn { border-radius: var(--r-pill); }

/* ==========================================================================
   36. Closing CTA band
   --------------------------------------------------------------------------
   The page already ended on a booking band, so this refines that component
   rather than adding a second CTA below it — a duplicate would repeat the
   same action twice in one screen and add length the brief asks us to cut.
   ========================================================================== */
.float-band {
  padding: clamp(1.6rem, 1rem + 2.2vw, 2.75rem);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* The band's heading is a call to action inside a card, not a section title,
   so it steps down off the h2 scale — at the full 48px it overpowered the
   buttons sitting beside it. */
.float-band h2 {
  margin-bottom: var(--sp-2);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem);
  line-height: 1.2;
}

.float-band p { margin: 0; font-size: 0.94rem; line-height: 1.65; }
.float-band .actions { gap: var(--sp-2); justify-content: flex-end; }

/* Brand rule along the top edge, tying the band to the header and footer */
.float-band::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-brand);
  z-index: 3;
}

/* ==========================================================================
   37. Icon badges — brand fill by default
   --------------------------------------------------------------------------
   These badges used to rest muted (navy glyph on pale sage) and only take
   the vermillion fill on hover, which meant the brand colour was invisible
   until you moused over — and never appeared at all on touch devices, where
   there is no hover. They are now filled by default, everywhere, on every
   page; hover deepens and lifts instead of introducing the colour.

   Shapes are left alone on purpose: the organic, leaf and pill silhouettes
   each component already had are what keep the page from looking like a row
   of identical circles.
   ========================================================================== */
.trust-item__icon,
.badge-chip__icon,
.phil-card__icon,
.condition-card__icon,
.info-card__icon,
.feature-card__icon,
.cat-tile__icon,
.program-card__icon,
.service-card__icon,
.footer-top__icon {
  color: var(--warm-white);
  background: var(--grad-gold);
  border-color: transparent;
  box-shadow: 0 6px 16px -9px rgba(196, 59, 30, 0.55);
}

.trust-item__icon svg,
.badge-chip__icon svg,
.phil-card__icon svg,
.condition-card__icon svg,
.info-card__icon svg,
.feature-card__icon svg,
.cat-tile__icon svg,
.program-card__icon svg { color: currentColor; }

/* Scoped one level deeper than the bare class. `.trust-item span` is (0,1,1)
   and .trust-item__icon is itself a <span>, so the bare (0,1,0) rule lost
   `color` to it — the glyph was rendering in --ink-muted navy on the
   vermillion disc instead of white. Same specificity trap as .doc-card__role. */
.trust-item .trust-item__icon,
.trust-item .trust-item__icon svg { color: var(--warm-white); }

/* Hover now deepens what is already there rather than switching colour on */
.trust-item:hover .trust-item__icon,
.badge-chip:hover .badge-chip__icon,
.phil-card:hover .phil-card__icon,
.condition-card:hover .condition-card__icon,
.info-card:hover .info-card__icon,
.feature-card:hover .feature-card__icon,
.cat-tile:hover .cat-tile__icon {
  color: var(--warm-white);
  background: var(--grad-gold);
  border-color: transparent;
  filter: brightness(1.08);
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 10px 22px -10px rgba(196, 59, 30, 0.7);
}

/* The header call badge takes the same vermillion fill as every other icon
   on the site. It sits beside the booking CTA, so the two read as a pair. */
.nav__call-icon {
  color: var(--warm-white);
  background: var(--grad-gold);
  border-color: transparent;
}

.nav__call:hover .nav__call-icon {
  background: var(--grad-gold);
  color: var(--warm-white);
  filter: brightness(1.08);
}

/* ==========================================================================
   38. Content typography — Poppins everywhere, one step larger
   --------------------------------------------------------------------------
   Poppins was already the body default, but three content blocks still ran
   in the Lora serif — the lead paragraphs, the dark hero copy and the
   testimonial quotes. They now match everything else.

   Display headings stay in Cormorant Garamond: that serif is the wordmark's
   own letterform (SANATANA is set in a serif), so it is doing brand work
   rather than decoration. Say the word and I'll move those to Poppins too.

   Sizes step up roughly one notch. Card copy was sitting at 0.88–0.90rem
   (~14px) which is below the 16px the brief asks for as a comfortable read;
   it now lands at ~15.4–16px, with line-height held in the 1.5–1.7 band.
   ========================================================================== */
.lead,
.hero__copy,
.t-card__text,
.quote-block,
.about-belief { font-family: var(--font-sans); }

/* Pull quotes are read as prose, so they follow the content face. What stays
   in Cormorant is display only, and deliberately: the big step numerals
   (.phil-card__step, .flow__num, .event-card__day and friends), the section
   watermarks, and .accent — which is not a standalone element but the
   highlighted words *inside* an h2, so it has to match its own heading. */
.quote-block,
.about-belief {
  font-size: clamp(1.04rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.7;
}

.lead {
  font-size: clamp(1.06rem, 1rem + 0.32vw, 1.24rem);
  line-height: 1.7;
}

.hero__copy { font-size: clamp(1rem, 0.95rem + 0.28vw, 1.14rem); line-height: 1.7; }
.t-card__text { font-size: 1rem; line-height: 1.7; }

/* Card and block copy — the bulk of the page's reading text */
.service-card__body p,
.phil-card p,
.condition-card p,
.feature-card p,
.info-card p,
.course-card p,
.event-card p,
.program-card p,
.doc-card p,
.journal-card p,
.branch-card p,
.cat-tile p,
.flow__step p,
.timeline__card p,
.counter__label,
.section-head p {
  font-size: 0.96rem;
  line-height: 1.68;
}

/* List text inside cards and content blocks */
.lifestyle-row__list li,
.acc__panel p,
.footer-links a,
.footer-contact,
.footer-hours li { font-size: 0.94rem; }

/* Card titles lift with the body so the hierarchy holds its proportions */
.service-card__body h3,
.phil-card h3,
.condition-card h3,
.feature-card h3,
.info-card h3,
.course-card h3,
.event-card h3 { font-size: clamp(1.12rem, 1.02rem + 0.4vw, 1.34rem); }

/* Body line-height comes down slightly as the type grows — 1.78 at 18px
   reads loose and stretches every card. */
body { line-height: 1.68; }

/* ==========================================================================
   39. About page — layout patterns
   --------------------------------------------------------------------------
   Three sections on About were leaving large holes rather than being too
   crowded, so the fix is structural, not more padding:

     Founder        the portrait ran ~500px shorter than the copy beside it
     Vision/Mission Vision ran ~600px shorter than Mission
     Special Focus  four long paragraphs in two bare columns

   All three now use the global card system, so About matches every other
   page rather than reading as its own template.
   ========================================================================== */

/* --- 39.1 Founder at-a-glance stack -------------------------------------- */
.fact-stack {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --band: the four facts as a summary row under the bio rather than a rail
   beside it. 2x2 and not 1x4 — at this width four tracks would break
   "Nearly 25 years across healthcare, higher education, research & policy"
   over four lines while "AYUSH, Government of India" took one, and the row
   would sit on a ragged baseline. */
.fact-stack--band {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

@media (max-width: 640px) {
  .fact-stack--band { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* --- 39.1a Founder body ---------------------------------------------------
   The right column of the founder split. No width cap of its own: the column
   is already near the ideal measure, and capping it again would reopen the
   gap on the right that the two-column layout exists to close.
   ========================================================================== */
.founder-body .actions { margin-top: var(--sp-5); }

.fact-stack li {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: var(--card-border);
  border-left: 3px solid var(--vermillion-500);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.fact-stack li:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.fact-stack__k {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vermillion-600);
}

.fact-stack__v { font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }

/* --- 39.1b Founder key visuals --------------------------------------------
   The left column of the founder split: the two posters stacked, each at the
   column's full width. Side by side they had to be pinned to matching heights
   with aspect-ratio-weighted tracks; stacked, each simply takes the width it
   is given and there is nothing to reconcile.

   align-self: start is what lets .sticky-col work here. The grid area is the
   full height of the row either way, so the column has room to scroll within
   — this just parks the stack at the top of it to begin with.
   ========================================================================== */
.founder-visuals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  gap: var(--sp-4);
}

/* Each poster at its own height, edge to edge — no crop, no mat, no band.

   The pair is "founder's profile" (1080x720, 1.500) and "Co-founder,
   Managing Director" (1080x783, 1.379). Both are finished posters carrying
   their own set type, so neither cover nor contain is wanted here: cover
   would cut the lettering, contain would band it. They are exported at the
   same 1080 width, so at one column width they render a shade under 9%
   apart in height — close enough that the pair reads as one stack sharing a
   left and a right edge, which is the whole job. */
.founder-visuals figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.founder-visuals img {
  display: block;
  width: 100%;
  height: auto;
}

/* Credentials under the co-founder poster. The founder's own name and roles
   are set in the bio column opposite; this poster has no such column beside
   it, so it carries its own line. */
.founder-visuals__cap {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 0.2rem 0;
  text-align: center;
}

.founder-visuals__cap b {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--forest-800);
}

.founder-visuals__cap span {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--gold-600);
}

@media (max-width: 860px) {
  .founder-visuals { gap: var(--sp-3); }
}

/* --- 39.2 Vision & Mission ------------------------------------------------
   Two gradient statement panels, stacked. The panels take the logo's two
   strongest colours — crimson-to-vermillion for Vision, navy-plum for
   Mission — so the pair reads as brand rather than as stock blue-and-orange.
   Headings here are set in the content face, not the display serif: at this
   size and weight the serif looked like a pull quote rather than a statement.

   They ran side by side until Mission took its six commitments inline. Two
   equal columns then forced Vision — a single paragraph — to stretch to
   Mission's height, leaving roughly 300px of empty gradient under it. Full
   width apiece removes the coupling: each panel is only as tall as its own
   content, and the extra measure lets Mission's list run two-up so it does
   not become one long ladder.
   ========================================================================== */
.vm-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.vm-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  border-radius: var(--r-xl);
  color: var(--warm-white);
  box-shadow: var(--sh-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.vm-panel:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }

.vm-panel--vision {
  background: linear-gradient(118deg, var(--crimson-600) 0%, var(--vermillion-500) 52%, var(--vermillion-400) 100%);
}

.vm-panel--mission {
  background: linear-gradient(118deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--navy-600) 100%);
}

/* Concentric rings in the corner, drawn with a thick border plus a spread
   shadow — no extra asset needed, and it scales with the card. */
.vm-panel::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 34px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.vm-panel > * { position: relative; z-index: 1; }

.vm-panel__label {
  margin: 0 0 var(--sp-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
}

/* A step up from the side-by-side size: at full width the old clamp read as a
   sub-head rather than the panel's statement. */
.vm-panel h2 {
  margin: 0 0 var(--sp-3);
  max-width: 26ch;
  font-family: var(--font-sans);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.95rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--warm-white);
}

/* Measure cap, not a layout cap. The panel is full-bleed inside the container
   now, and prose set across ~1100px is unreadable however good the type is. */
.vm-panel p {
  margin: 0;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 860px) {
  .vm-panels { gap: var(--sp-4); margin-bottom: var(--sp-7); }
}

/* The six mission commitments, set inside the Mission panel. Markers are
   drawn as pseudo-elements: a default list bullet all but disappears against
   the navy gradient at this size.

   Two columns because six stacked items in a full-width panel is a very tall
   ladder against a very short heading; paired up, the panel reads as a block
   the same way Vision does. */
.vm-panel__list {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem var(--sp-6);
}

@media (max-width: 780px) {
  .vm-panel__list { grid-template-columns: 1fr; gap: 0.8rem; }
}

.vm-panel__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.94rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.88);
}

.vm-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sand);
}

/* ==========================================================================
   40. Practitioner cards — redesign
   --------------------------------------------------------------------------
   The old card was an arch-cropped 3:4 portrait with everything centred and
   no padding: at 1240 the image alone ran ~500px tall, so three of them
   dominated the section, and the text sat flush against the card edge
   because .doc-card only ever set `text-align: center`.

   Now a proper profile card — square-ish portrait in the shared card radius,
   left-aligned copy, and the role as a coloured label rather than another
   line of centred grey caps.
   ========================================================================== */
.doc-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
  text-align: left;
  background: var(--surface);
  overflow: hidden;
}

/* 4:5 rather than 3:4 — the portrait keeps its shape but gives back roughly
   90px of height per card, and object-position pins the crop to the top so
   no one loses their forehead. */
.doc-card__media {
  aspect-ratio: 4 / 5;
  margin-bottom: var(--sp-4);
  border-radius: calc(var(--r-card) - 6px);
  box-shadow: none;
}

.doc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.9s var(--ease-out);
}

.doc-card:hover .doc-card__media img { transform: scale(1.05); }

/* Scrim behind the social row so the icons read against any photograph */
.doc-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(22, 17, 42, 0.62));
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}

.doc-card:hover .doc-card__media::after { opacity: 1; }

.doc-card h3 {
  margin: 0 0 0.35rem;
  padding-inline: var(--sp-2);
  font-size: 1.16rem;
  line-height: 1.25;
  color: var(--navy-900);
}

/* Scoped to .doc-card, not left bare. `.doc-card p` is (0,1,1) and this is a
   <p>, so a bare .doc-card__role at (0,1,0) lost every declaration it shared
   with it — the label had been rendering at body size in --ink-soft rather
   than as a small vermillion role line. Pre-existing; the duplicate rule
   further up the sheet had the same problem and has been removed. */
.doc-card .doc-card__role {
  margin: 0 0 var(--sp-2);
  padding-inline: var(--sp-2);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermillion-600);
}

.doc-card > p:last-child {
  margin: 0;
  padding: 0 var(--sp-2) var(--sp-2);
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* Service card CTA — a real button rather than a bare arrow link. The label
   is fixed at "Explore" so it never wraps to two lines; the service name it
   points at is already the card's own h3 directly above it. */
.service-card__cta { align-self: flex-start; margin-top: auto; }

/* ==========================================================================
   41. Service detail pages — shared layout
   --------------------------------------------------------------------------
   All eight service pages already run the same markup, so everything here is
   CSS and lands on every one of them identically. Two things were wrong:

     - the media column held a 4:3 arch crop while the copy beside it ran far
       taller, so each page opened with ~200px of empty column
     - "What this includes" was a single ladder of bullets, which on the
       longer services pushed the fold well down the page

   The media now sits in a taller frame and sticks while the copy scrolls,
   and the inclusion list runs two-up in a bordered panel so it reads as a
   spec sheet rather than loose bullets.
   ========================================================================== */
/* Scoped to .split--wide-right, which is the detail pages' own layout, NOT to
   `.section .service-block__media`. That earlier selector also matched every
   block on services.html — those sit inside a .section too — so the listing
   page was rendering nine sticky 4:4.6 portraits, which is what made its rows
   so tall. The listing's own sizing is in section 52. */
.service-detail__media,
.split--wide-right .service-block__media {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  aspect-ratio: 4 / 4.6;
  border-radius: var(--r-card);
  box-shadow: var(--sh-md);
}

/* Portrait crops on these pages are people and hands — anchoring the crop to
   the top keeps the subject in frame as the ratio gets taller. */
.split--wide-right .service-block__media img { object-position: center top; }

/* Full-width scope panel: the same list, now in its own section under the
   split, so it can run three or four across instead of two. */
.leaf-list--wide {
  columns: 3;
  column-gap: var(--sp-6);
  margin-top: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.leaf-list--wide li { break-inside: avoid; }

@media (max-width: 900px) { .leaf-list--wide { columns: 2; } }
@media (max-width: 600px) { .leaf-list--wide { columns: auto; } }

/* The inclusion list, as a panel rather than bare bullets */
.section .split--wide-right .leaf-list {
  display: block;
  columns: 2;
  column-gap: var(--sp-6);
  margin-top: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
}

.section .split--wide-right .leaf-list li {
  break-inside: avoid;
  margin-bottom: 0.6rem;
  font-size: 0.94rem;
}

.section .split--wide-right .leaf-list li:last-child { margin-bottom: 0; }

/* The "What this includes" label sits on the panel, so it loses the default
   heading gap and picks up the eyebrow treatment instead. */
.section .split--wide-right h3 {
  margin-bottom: 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vermillion-600);
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .site-header, .topbar, .site-footer, .to-top, .float-call,
  .preloader, .scroll-progress, .leaves, .divider { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}
/* ==========================================================================
   34. Card Height Tightening
   --------------------------------------------------------------------------
   Requested reduction in the height of the service and programme cards.
   Appended last so it wins over the earlier rules (including the 16/10 media
   override further up) without editing them — delete this whole block to
   restore the original proportions.

   Spacing only. Font sizes are deliberately untouched: they are now driven
   from Admin > Settings > Typography.
   ========================================================================== */

/* --- Service cards ------------------------------------------------------- */
.service-card__media { aspect-ratio: 16 / 9; }

.service-card__body {
  gap: 0.5rem;
  padding: 1.25rem 1.35rem 1.3rem;
}

.service-card__body p { line-height: 1.55; }
.service-card__body .link-arrow { padding-top: 0.35rem; }

/* --- Programme cards ----------------------------------------------------- */
.program-card {
  gap: 0.55rem;
  padding: clamp(1.15rem, 1.8vw, 1.5rem);
}

.program-card p { line-height: 1.55; }

.program-card__icon { width: 46px; height: 46px; }
.program-card__icon svg { width: 22px; height: 22px; }

.program-card__meta {
  gap: 0.35rem;
  padding-top: 0.7rem;
}
/* --- Practitioner cards --------------------------------------------------
   The portrait was 4/5, i.e. 1.25x its own width — the single biggest
   contributor to the card's height. A square crop gives back about a fifth
   of it, and object-position: center top (set earlier) still protects heads. */
.doc-card__media {
  aspect-ratio: 1 / 1;
  margin-bottom: var(--sp-3);
}

.doc-card { padding: var(--sp-2); }
.doc-card p { line-height: 1.55; }

/* --- Bullet lists inside programme cards ---------------------------------
   Scoped to .program-card so leaf lists elsewhere on the site keep their
   original, roomier rhythm. */
.program-card .leaf-list { gap: 0.4rem; }

.program-card .leaf-list li {
  padding-left: 1.6rem;
  line-height: 1.5;
}

.program-card .leaf-list li::before {
  top: 0.42em;
  width: 10px;
  height: 10px;
}

.program-card .actions { margin-top: 0.15rem; }
/* ==========================================================================
   35. Global Section Height Tightening
   --------------------------------------------------------------------------
   Requested across-the-board reduction in vertical space. Everything here is
   spacing; no font sizes, colours or layout structure change.

   The single biggest lever is --section-y, which sets the top AND bottom
   padding of every .section — so a 22px cut there removes ~44px per section,
   across ~94 sections.

   Delete this block to restore the original rhythm.
   ========================================================================== */

/* Was clamp(2.8125rem, 1.875rem + 3.125vw, 4.375rem) -> 45px .. 70px.
   Now roughly 30px .. 48px. Still fluid, still stepped by viewport. */
:root {
  --section-y: clamp(1.9rem, 1.25rem + 2.1vw, 3rem);
}

.section--tight { padding-block: clamp(1.9rem, 3.2vw, 3.2rem); }

/* The band overlaps the section above it, so its extra top padding comes down
   in step with --section-y rather than staying at a fixed 3.5rem. */
.section--has-band { padding-top: calc(var(--section-y) + 2.2rem); }

/* Space between a section's heading block and its content. */
.section-head { margin-bottom: var(--sp-5); }

/* --- Forms ---------------------------------------------------------------
   Seven stacked fields at 0.86rem of vertical padding each added up fast. */
.form-grid { gap: 0.8rem; }
.field { gap: 0.28rem; }

.field input,
.field select,
.field textarea {
  padding: 0.62rem 0.9rem;
}

/* --- Bullet lists --------------------------------------------------------
   Now applied site-wide, not just inside .program-card. */
.leaf-list { gap: 0.5rem; }
.leaf-list li { line-height: 1.55; }
/* --- About section --------------------------------------------------------
   The visual column drove this section's height: the framed portrait was
   aspect-ratio 4/5, i.e. 1.25x its own width, sitting inside ~109px of
   wrapper padding. A square crop plus tighter padding takes roughly 180px
   off the column.

   The bottom padding is only trimmed part-way on purpose — the years seal
   hangs low in the frame and needs the room beneath it. (The small
   overlapping square that used to sit here has been removed.) */
.about-visual {
  padding: 14px
           clamp(0.8rem, 2.4vw, 1.9rem)
           14px
           clamp(0.5rem, 1.6vw, 1.2rem);
}

.about-grid { gap: clamp(2.4rem, 4vw, 3.8rem); }

/* Text column: the pull-quote, credential chips and author strip each carried
   a 2rem block margin. */
.about-belief {
  margin-top: var(--sp-5);
  padding: 0.85rem 1.15rem 0.85rem 1.3rem;
}

.about-author {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
}

/* In the visual column the founder strip is the last item, so it pins to the
   foot of the column and the shloka panel above it takes up the slack. */
.about-visual > .about-author { margin-top: auto; }

/* ==========================================================================
   36. Divider clearance
   --------------------------------------------------------------------------
   `.divider` is absolutely positioned over the top/bottom edge of its section
   and stands clamp(48px, 6vw, 108px) tall. With --section-y cut to 30-48px in
   section 35, the wave crowds — and on wide screens overlaps — the first and
   last rows of content. Any section carrying a divider gets that clearance
   added back as padding, so the copy starts below the curve.
   ========================================================================== */
.section:has(> .divider--top) {
  padding-top: calc(var(--section-y) + clamp(1.6rem, 3.4vw, 3.4rem));
}

.section:has(> .divider--bottom) {
  padding-bottom: calc(var(--section-y) + clamp(1.6rem, 3.4vw, 3.4rem));
}

/* ==========================================================================
   37. Page hero rhythm
   --------------------------------------------------------------------------
   The section-35 tightening pass moved every .section onto --section-y but
   never touched .page-hero, which kept a 96px block padding and a 480px
   min-height. On a wide screen that left the eyebrow sitting ~107px down from
   the top of the banner, with the copy reading as bottom-heavy.

   Padding is deliberately asymmetric: the breadcrumb is the last line and wants
   a little more room beneath it than the eyebrow needs above.
   ========================================================================== */
.page-hero {
  min-height: clamp(240px, 26vw, 360px);
  padding-block: clamp(2rem, 3.4vw, 3rem) clamp(2.4rem, 4vw, 3.5rem);
}

/* On About, .trust-strip--overlap is pulled up over the last 88px of the banner,
   so the visible dark band is 88px shorter than the element. Adding bottom
   padding cannot fix that — the card's negative margin is measured from the
   hero's bottom edge, so it follows any padding down. The balance has to be
   shifted instead: less above, more below, for the same overall height.
   Scoped to above 1200px, which is where responsive.css releases the overlap. */
@media (min-width: 1201px) {
  .page-hero:has(+ .container > .trust-strip--overlap) {
    padding-block: clamp(1.6rem, 2.4vw, 2.2rem) calc(clamp(2.4rem, 4vw, 3.5rem) + 3.6rem);
  }
}

/* ==========================================================================
   42. Ambient icon motion
   --------------------------------------------------------------------------
   Icons now carry a slow idle movement rather than sitting still until they
   are hovered — a page at rest still reads as alive.

   Two rules govern all of it:

   1. The motion is on the <svg>, never on the badge that holds it. Every icon
      badge on the site already animates `transform` on hover (rotate + scale
      in section 33.6, .service-card__icon in section 13, and so on), and an
      infinite animation on the same property would win over that hover state
      permanently. Animating the glyph inside leaves the badge free.

   2. Amplitudes stay small — 2-3px of travel, 4-6 degrees of tilt, 8% of
      scale — and the periods are long and mutually prime, so a grid of eight
      icons never falls into a visible pulse together.

   All of it is disabled by the prefers-reduced-motion block in section 34.
   ========================================================================== */
@keyframes iconBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}

@keyframes iconTilt {
  0%, 100% { transform: rotate(-4.5deg); }
  50%      { transform: rotate(4.5deg); }
}

@keyframes iconThrob {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

/* Long rest, then a short shake — a phone that rings every few seconds
   rather than one that wobbles continuously. */
@keyframes iconRing {
  0%, 70%, 100% { transform: rotate(0deg); }
  73% { transform: rotate(-13deg); }
  76% { transform: rotate(11deg); }
  79% { transform: rotate(-8deg); }
  82% { transform: rotate(6deg); }
  85% { transform: rotate(-3deg); }
  88% { transform: rotate(0deg); }
}

/* --- 42.1 Badge glyphs ---------------------------------------------------- */
.service-card__icon svg,
.condition-card__icon svg,
.program-card__icon svg,
.trust-item__icon svg,
.footer-contact svg {
  animation: iconBob 4.2s var(--ease-soft) infinite;
  transform-origin: 50% 50%;
}

.phil-card__icon svg,
.feature-card__icon svg,
.info-card__icon svg {
  animation: iconTilt 5.6s var(--ease-soft) infinite;
  transform-origin: 50% 60%;
}

.cat-tile__icon svg,
.badge-chip__icon svg,
.counter__icon,
.footer-top__icon svg {
  animation: iconThrob 3.8s var(--ease-soft) infinite;
  transform-origin: 50% 50%;
}

/* --- 42.2 Call glyphs ----------------------------------------------------- */
.topbar__list li:nth-child(1) svg,
.nav__call-icon svg,
.float-call svg {
  animation: iconRing 6s var(--ease-out) infinite;
  transform-origin: 50% 55%;
}

/* --- 42.3 Social chips ---------------------------------------------------- */
.topbar__socials svg,
.site-footer .socials svg {
  animation: iconBob 3.6s var(--ease-soft) infinite;
}

/* --- 42.4 Stagger --------------------------------------------------------
   Without this a row of cards moves as one block, which reads as the whole
   section drifting rather than as individual icons breathing. Delays are
   negative so every icon is already mid-cycle on first paint — nothing waits
   its turn before starting. */
.grid > *:nth-child(4n + 2) [class*="__icon"] svg,
.cat-grid > *:nth-child(4n + 2) .cat-tile__icon svg,
.trust-strip > *:nth-child(4n + 2) .trust-item__icon svg,
.badge-marquee__track > *:nth-child(4n + 2) .badge-chip__icon svg,
.footer-contact > li:nth-child(2) svg,
.topbar__socials a:nth-child(2) svg,
.site-footer .socials a:nth-child(2) svg,
.topbar__socials a:nth-child(6) svg,
.site-footer .socials a:nth-child(6) svg { animation-delay: -0.9s; }

.grid > *:nth-child(4n + 3) [class*="__icon"] svg,
.cat-grid > *:nth-child(4n + 3) .cat-tile__icon svg,
.trust-strip > *:nth-child(4n + 3) .trust-item__icon svg,
.badge-marquee__track > *:nth-child(4n + 3) .badge-chip__icon svg,
.footer-contact > li:nth-child(3) svg,
.topbar__socials a:nth-child(3) svg,
.site-footer .socials a:nth-child(3) svg { animation-delay: -1.8s; }

.grid > *:nth-child(4n) [class*="__icon"] svg,
.cat-grid > *:nth-child(4n) .cat-tile__icon svg,
.trust-strip > *:nth-child(4n) .trust-item__icon svg,
.badge-marquee__track > *:nth-child(4n) .badge-chip__icon svg,
.footer-contact > li:nth-child(4) svg,
.topbar__socials a:nth-child(4) svg,
.site-footer .socials a:nth-child(4) svg { animation-delay: -2.7s; }

/* --- 42.5 Hover hand-off -------------------------------------------------
   While a card is hovered its badge takes over the movement, so the glyph
   inside holds still instead of fighting it. */
.service-card:hover .service-card__icon svg,
.condition-card:hover .condition-card__icon svg,
.phil-card:hover .phil-card__icon svg,
.feature-card:hover .feature-card__icon svg,
.info-card:hover .info-card__icon svg,
.cat-tile:hover .cat-tile__icon svg,
.trust-item:hover .trust-item__icon svg,
.badge-chip:hover .badge-chip__icon svg,
.topbar__socials a:hover svg,
.site-footer .socials a:hover svg { animation-play-state: paused; }

/* ==========================================================================
   43. Header & Services dropdown — restyle
   --------------------------------------------------------------------------
   The bar read as a plain list of links with one red underline under the
   active item. It now works as a set of pills: hovering tints a rounded
   chip behind the label, the active item keeps that chip in brand colour,
   and the underline shrinks to a short capsule that grows out of the centre
   rather than spanning the whole word.

   The Services flyout stays a single vertical column, restyled as a card:
   wider rows, a larger radius, a layered shadow, and an accent bar that
   slides in per row.
   ========================================================================== */

/* --- 43.1 The bar --------------------------------------------------------- */
.site-header {
  background: linear-gradient(180deg, rgba(253, 251, 246, 0.94) 0%, rgba(248, 242, 231, 0.88) 100%);
}

.site-header.is-stuck {
  background: linear-gradient(180deg, rgba(253, 251, 246, 0.99) 0%, rgba(250, 246, 238, 0.99) 100%);
}

/* Three clusters — lock-up, menu, booking button — sat almost touching, so
   the bar read as one continuous run of text. Each edge now gets its own
   breathing room, and the values are clamped rather than fixed: at 1501px
   there is barely room for the eleven items, at 1900px there is plenty. */
.nav > .logo { margin-right: clamp(0.6rem, 1.4vw, 1.2rem); }

@media (min-width: 1501px) {
  /* The booking button is the one thing on the bar a visitor is meant to
     press, so it is separated from the last link rather than continuing the
     rhythm of the menu. Both margins are capped at 1.2rem: they sit on top
     of the grid's existing 1rem gap, which gives roughly 35px of clear space
     each side without pushing the row past its container. */
  .nav__actions { margin-left: clamp(0.6rem, 1.4vw, 1.2rem); }
}

/* --- 43.2 Top-level links ------------------------------------------------- */
.nav__menu { gap: 0.12rem; }

/* Horizontal padding stays at the 0.5rem measured in section 29: .nav is
   capped at --container-wide, so the row has the same ~1320px to work with
   at every width above 1400px, and eleven links plus the lock-up and the
   booking button already fill it. The pill reads from the tint and the
   radius, not from extra width. */
.nav__link {
  padding: 0.52rem 0.5rem;
  border-radius: var(--r-pill);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

/* The capsule grows from the centre and stays short — a marker under the
   label rather than a rule as wide as the word. */
.nav__link::after {
  bottom: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  transition: width var(--t-base), opacity var(--t-base);
}

.nav__link:hover {
  color: var(--forest-900);
  background: rgba(218, 69, 38, 0.07);
  transform: translateY(-1px);
}

.nav__link:hover::after { width: 16px; }

.nav__link.is-active {
  color: var(--vermillion-600);
  background: rgba(218, 69, 38, 0.11);
}

.nav__link.is-active::after,
.nav__link.is-active:hover::after { width: 22px; }

/* --- 43.3 Services flyout ------------------------------------------------- */
@media (min-width: 1501px) {
  .nav__drop {
    display: grid;
    grid-template-columns: minmax(248px, 1fr);
    gap: 0.12rem;
    left: -0.6rem;
    top: calc(100% + 6px);
    padding: 0.85rem;
    background: var(--surface);
    border-color: rgba(36, 30, 51, 0.07);
    border-radius: var(--r-md);
    box-shadow: 0 26px 50px -26px rgba(28, 21, 46, 0.42),
                0 2px 8px -4px rgba(28, 21, 46, 0.16);
    transform: translateY(14px) scale(0.985);
    transform-origin: 20% 0;
  }

  .nav__item--drop:hover > .nav__drop,
  .nav__item--drop:focus-within > .nav__drop { transform: translateY(0) scale(1); }

  /* The cap is inset so it reads as part of the rounded card rather than a
     line laid across its corners. */
  .nav__drop::before {
    left: 0.85rem;
    right: 0.85rem;
    top: 0.4rem;
    height: 3px;
    border-radius: var(--r-pill);
    opacity: 0.85;
  }

  .nav__drop li:first-child { margin-top: 0.5rem; }
}

/* --- 43.4 Flyout rows ----------------------------------------------------- */
/* An accent bar replaces the green bullet: it sits flush left at zero width
   and slides out as the row lights up, so the eye is led along the row
   instead of stopped by a dot. */
.nav__drop a {
  padding: 0.62rem 0.85rem 0.62rem 0.95rem;
  font-size: 0.86rem;
  font-weight: 500;
  border-radius: var(--r-sm);
}

.nav__drop a::before {
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  margin: 0;
  background: var(--grad-gold);
  border-radius: var(--r-pill);
  transform: translateY(-50%);
  transition: height var(--t-base);
}

.nav__drop a:hover,
.nav__drop a:focus-visible {
  padding-left: 1.15rem;
  color: var(--forest-900);
  background: linear-gradient(90deg, rgba(218, 69, 38, 0.09) 0%, rgba(233, 239, 231, 0.55) 100%);
}

.nav__drop a:hover::before,
.nav__drop a:focus-visible::before { height: 62%; }

/* --- 43.5 Drawer flyout --------------------------------------------------- */
/* Stacked in the drawer, the same rows need a spine to sit against so they
   read as children of Services rather than as more top-level items. */
@media (max-width: 1500px) {
  .nav__item.is-open > .nav__drop {
    margin: 0.3rem 0 0.5rem 0.55rem;
    padding-left: 0.85rem;
    border-left: 2px solid rgba(218, 69, 38, 0.22);
  }

  .nav__drop a { font-size: 0.9rem; }
}

/* ==========================================================================
   44. Credential strip — restyle
   --------------------------------------------------------------------------
   The strip was pinned to five columns. With four credentials it left a dead
   cell on the right, and any future change to the list would strand another
   one. It now sizes to its contents: auto-fit drops unused tracks, so four
   items make four columns, six make six, and the breakpoint overrides in
   responsive.css are no longer needed — the track minimum reflows on its own.

   The 1px gap over a tinted ground is kept deliberately. It draws a divider
   only where two real cells meet, so a wrapped row never shows a rule hanging
   off its leading edge the way per-item borders would.
   ========================================================================== */
.trust-strip {
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  background: rgba(36, 30, 51, 0.085);
  border: 1px solid rgba(36, 30, 51, 0.07);
  border-radius: var(--r-lg);
  box-shadow: 0 22px 46px -28px rgba(28, 21, 46, 0.4),
              0 2px 6px -3px rgba(28, 21, 46, 0.1);
}

/* Absolute, so the pseudo-element is taken out of flow — a static one would
   become a grid item and open a cell of its own.

   Inset to -1px on three sides rather than 0. An absolutely positioned box is
   placed against the padding box, so at top:0 the card's own 1px border still
   showed above the gradient as a pale hairline — the bar looked detached from
   the edge instead of capping it. */
.trust-strip::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  z-index: 2;
  height: 3px;
  background: var(--grad-brand);
  opacity: 0.9;
}

/* The strip cleared the banner above it but sat hard against the credentials
   band below, whose own top border then read as the card's underline. The
   clearance is now the same on both edges. */
.trust-strip--after-banner { margin-bottom: clamp(1.4rem, 2.6vw, 2.4rem); }

.trust-item {
  justify-content: center;
  gap: 0.9rem;
  padding: 1.5rem 1.15rem;
  background: linear-gradient(180deg, var(--surface) 0%, var(--warm-white) 100%);
}

.trust-item:hover {
  background: linear-gradient(180deg, var(--warm-white) 0%, var(--cream) 100%);
}

/* The label carried more letter-spacing than its 0.73rem size could hold, so
   the second line drifted away from the first. */
.trust-item span { letter-spacing: 0.02em; line-height: 1.45; }

/* --- Six-item variant (About) --------------------------------------------
   auto-fit sizes tracks to the space available, not to the item count, so a
   six-item strip lands as 5 + 1 with four dead cells showing the grid's own
   background. Pinning the count keeps every row full: 3 x 2, then 2 x 3,
   then one per row.

   Items go left-aligned here too. Centring works at five narrow tracks, but
   across three wide ones each icon starts at a different x depending on how
   long its label is, and the column reads as ragged. */
.trust-strip--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.trust-strip--3up .trust-item {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.4rem 1.5rem;
}

/* Optical, not geometric: the icon is a 46px disc against two short lines of
   text, so aligning its box to the text box leaves it sitting visibly high. */
.trust-strip--3up .trust-item__icon { margin-top: 0.1rem; }

@media (max-width: 1000px) {
  .trust-strip--3up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .trust-strip--3up { grid-template-columns: 1fr; }
  .trust-strip--3up .trust-item { padding: 1.2rem 1.1rem; }
}

@media (max-width: 640px) {
  /* One per row: centring a short icon-and-label pair in a full-width cell
     leaves it floating, so it goes back to a left-aligned list. */
  .trust-item { justify-content: flex-start; padding: 1.2rem 1.1rem; }
}

/* ==========================================================================
   45. Header fit — logo / menu / button on one row
   --------------------------------------------------------------------------
   The booking button was being clipped on the right, and the cause is
   arithmetic rather than styling.

   .nav is a three-track grid of `auto auto auto`, so every track sizes to its
   content and none of them can shrink. Measured at the previous settings the
   three clusters need about:

     lock-up  188px  +  menu  ~990px  +  button  ~190px  +  gaps ~40px  =  1408px

   but the row was capped at --container-wide (1400px) minus two 40px gutters,
   leaving 1320px — roughly 90px short, which is exactly what ran off the
   edge. The menu grew when Articles and Gallery took it from nine items to
   eleven; the cap had been set back when nine still fitted.

   Two changes close the gap: the header row alone is widened to 1560px, and
   the link type scales with the viewport instead of sitting at a fixed size.
   Page content is untouched — this raises the ceiling for the header only.
   ========================================================================== */
/* 1560 was set for eleven links. Twelve need more, and on a 1920 screen the
   old ceiling was leaving ~360px of usable width unused on either side while
   the row inside it overflowed and painted the lock-up under Home and the
   booking button over Contact Us. The cap still exists — the row must not run
   the full width of an ultra-wide display — it is just set where the content
   actually needs it. */
.site-header > .nav { max-width: min(1760px, 100%); }

@media (min-width: 1501px) {
  /* minmax(0, auto) lets the menu track fall below its min-content width if a
     narrow window ever demands it, so the overflow is absorbed inside the
     menu rather than pushing the button past the container edge. */
  .nav { grid-template-columns: auto minmax(0, auto) auto; }
  .nav__menu { min-width: 0; }

  /* 0.78rem just above the drawer breakpoint, easing up to 0.86rem. The cap
     matters: the row stops widening at 1560px but the type would not, so an
     uncapped size would put the widest screens back into overflow — the one
     case a fluid size gets wrong here.

     Stepped down from 0.8/0.88rem with 0.46rem of side padding when the menu
     took a twelfth item (Notifications, which moved in from the bell icon in
     .nav__actions). Twelve links at the old metrics ran about 60px wider than
     eleven; losing 0.08rem of padding either side of each recovers roughly
     that, and the smaller cap covers the rest. Dropping the bell gives back
     another ~50px from the actions cluster. */
  .nav__link {
    padding: 0.52rem 0.38rem;
    font-size: clamp(0.78rem, 0.4rem + 0.34vw, 0.86rem);
  }
}

/* ==========================================================================
   46. Secondary buttons — filled at rest
   --------------------------------------------------------------------------
   .btn--ghost was an outline that only became red when the liquid fill rose
   on hover, so a button sitting untouched read as inactive. It now carries
   the brand colour from the start.

   It is set in flat vermillion rather than the primary's gradient: the two
   still need to be told apart where they sit side by side ("Book a
   Consultation" beside "All Services"), and a flat field against a graded
   one keeps that difference without taking the colour away. Hover inverts to
   navy-plum exactly as the primary does, so the interaction is unchanged.
   ========================================================================== */
.btn--ghost {
  background: var(--vermillion-600);
  color: var(--warm-white);
  border-color: transparent;
  box-shadow: var(--sh-gold);
}

/* The rising fill was vermillion, which would now be invisible against a
   vermillion button — it takes the navy the primary uses. */
.btn--ghost::before { background: var(--forest-800); }

.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--gold-200);
  border-color: transparent;
  transform: translateY(-3px);
}

/* ==========================================================================
   47. Why Choose Us — numbered editorial rows
   --------------------------------------------------------------------------
   Eight glass cards in a four-across grid gave the section the same texture
   as every other card grid on the page, and at that column count each card
   held two words per line. It becomes an editorial list: two columns of
   horizontal rows divided by hairlines, each opening with a large serif
   numeral in place of an icon.

   The numerals are generated with a CSS counter rather than typed into the
   markup, so the sequence stays correct if a reason is added, removed or
   reordered — and, being decorative, they are not announced by screen
   readers the way a hard-coded "01" in the text would be.

   The icons are hidden rather than deleted from the HTML: they are accurate
   markup that a later design may want back, and removing eight inline SVGs
   to change a visual treatment is not a trade worth making.

   Scoped to #why. .feature-card is also used on services, courses and the
   meditation page, where the boxed treatment still suits its context.
   ========================================================================== */
#why .grid {
  counter-reset: why;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: transparent;
}

#why .feature-card {
  counter-increment: why;
  display: grid;
  /* Widened with the numeral: at 3.5rem an "08" needs about 4.6rem before the
     headings beside it stop aligning down the column. */
  grid-template-columns: 4.7rem minmax(0, 1fr);
  align-items: start;
  /* Row gap zeroed: a single `gap` also separated the heading from its own
     paragraph, which opened ~23px between them and broke the pair apart. */
  column-gap: 1.15rem;
  row-gap: 0;
  padding: 1.5rem 1.7rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: background var(--t-base), box-shadow var(--t-base);
}

/* The numeral. `content` counters take a fixed-width style, so 01–08 all set
   to the same width and the headings beside them align down the column. */
#why .feature-card::after {
  content: counter(why, decimal-leading-zero);
  grid-row: 1 / span 3;
  grid-column: 1;
  align-self: start;
  margin-top: -0.3rem;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 1.9rem + 1.25vw, 3.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--vermillion-600);
  transition: filter var(--t-base), transform var(--t-base);
}

/* Flat vermillion at that size read as a solid slab, so the numeral is inked
   with the same navy-to-vermillion sweep as the brand signature — strongest
   at the base, fading at the top. Declared behind @supports so the flat
   colour above survives where background-clip: text does not. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  #why .feature-card::after {
    background: linear-gradient(160deg, var(--vermillion-400) 0%, var(--vermillion-600) 55%, var(--navy-800) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

#why .feature-card:hover::after {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 10px rgba(196, 59, 30, 0.28));
}

/* The icons stay in the markup but step out of this layout. */
#why .feature-card__icon { display: none; }

/* Both text elements move into the right-hand track, since the numeral now
   occupies the first one for the full height of the row. */
#why .feature-card h3,
#why .feature-card p { grid-column: 2; }

/* Hairline grid drawn per cell: bottom rule on every row but the last, right
   rule on the left-hand column only. Borders rather than a gap-and-ground
   fill, because the section sits on the sage band and a filled gap would read
   as a second panel behind the list. */
#why .feature-card { border-bottom: 1px solid rgba(36, 30, 51, 0.11); }
#why .feature-card:nth-child(odd) { border-right: 1px solid rgba(36, 30, 51, 0.11); }
#why .feature-card:nth-last-child(-n + 2) { border-bottom: 0; }

/* The corner glow and the lift belonged to the card; the row uses a wash and
   a vermillion edge. The edge is an inset box-shadow rather than a border, so
   it can appear on hover without the 3px shifting the text sideways. */
#why .feature-card::before { display: none; }
#why .feature-card:hover {
  transform: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.3) 100%);
  box-shadow: inset 3px 0 0 var(--vermillion-500);
}

#why .feature-card h3 {
  position: relative;
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  font-size: clamp(1.2rem, 1.02rem + 0.42vw, 1.42rem);
  font-weight: 600;
  line-height: 1.28;
  color: var(--forest-900);
}

/* Short rule under each heading, extending on hover — the same capsule the
   nav links and the brand signature use. */
#why .feature-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  opacity: 0.55;
  transition: width var(--t-base), opacity var(--t-base);
}

#why .feature-card:hover h3::after { width: 46px; opacity: 1; }

#why .feature-card p {
  font-size: clamp(0.95rem, 0.88rem + 0.16vw, 1.03rem);
  line-height: 1.66;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  /* One per row: the column rule has nothing to divide, and the last item is
     then the only one that should lose its bottom rule. */
  #why .grid { grid-template-columns: 1fr; }
  #why .feature-card { padding: 1.15rem 0.2rem; }
  #why .feature-card:nth-child(odd) { border-right: 0; }
  #why .feature-card:nth-last-child(2) { border-bottom: 1px solid rgba(36, 30, 51, 0.11); }
  #why .feature-card:last-child { border-bottom: 0; }
}

/* ==========================================================================
   48. Disclaimer panel — restyle
   --------------------------------------------------------------------------
   It was a white card with a gold rule down its left edge — the same shape as
   every other panel on the page, which is the wrong signal for the one block
   a visitor is actually asked to read. It becomes a dark statement card: the
   navy-plum ground makes it the only inverted block in a light section, so it
   separates itself from the surrounding copy without needing a warning colour
   or a heavier border.

   Used on eleven pages — the full statement on Home and Conditions, and the
   short "Please note" on all nine service pages — so the treatment is applied
   to .disclaimer itself rather than scoped to one section.
   ========================================================================== */
.disclaimer {
  overflow: hidden;
  padding: clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.5rem, 3vw, 2.8rem);
  color: var(--on-dark-soft);
  background: var(--grad-forest);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: 0 26px 54px -30px rgba(28, 21, 46, 0.6);
}

/* Brand rule across the head of the card, in place of the old left edge. */
.disclaimer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--grad-brand);
}

.disclaimer h3 {
  gap: 0.85rem;
  margin: 0 0 1.1rem;
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.55rem);
  color: var(--on-dark);
}

/* The icon gets a disc so it reads as a mark rather than a loose glyph. */
.disclaimer h3 svg {
  width: 44px;
  height: 44px;
  padding: 0.6rem;
  color: var(--warm-white);
  background: var(--grad-gold);
  border-radius: 50%;
  box-shadow: var(--sh-gold);
}

.disclaimer p {
  font-size: clamp(0.92rem, 0.86rem + 0.14vw, 1rem);
  line-height: 1.75;
  color: var(--on-dark-soft);
}

.disclaimer p strong { color: var(--on-dark); }

/* Links inside the card sit on navy, where the body link colour disappears. */
.disclaimer a {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.disclaimer a:hover { color: var(--warm-white); }

/* The list markers are drawn in --grad-gold, which holds against navy; only
   the text colour needs lifting out of --ink-soft. */
.disclaimer .leaf-list li { color: var(--on-dark-soft); }

/* The button is a filled vermillion pill as of section 46, which would sit
   flat against this ground — on the dark card it goes to a light outline. */
.disclaimer .btn--ghost {
  color: var(--warm-white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: none;
}

.disclaimer .btn--ghost:hover {
  color: var(--forest-900);
  background: var(--warm-white);
  border-color: transparent;
}

.disclaimer .btn--ghost::before { display: none; }

/* ==========================================================================
   49. Footer bottom bar
   --------------------------------------------------------------------------
   The copyright sat a few pixels above the credit beside it. The cause is the
   base rule `p { margin: 0 0 var(--space-sm) }`: the copyright is not the
   last child of the bar, so it kept a 20px bottom margin, and flexbox centres
   items on their margin box — which lifted the visible text by half of that
   while the link beside it stayed put. Zeroing the margin is the fix; nudging
   with align-self would only have hidden it.

   With the Disclaimer and Contact links gone the bar carries two items, so it
   is set as a clean pair: statement left, credit right, centred and stacked
   once there is no longer room for both on one line.
   ========================================================================== */
/* The newsletter band used to be the footer's first child and carried the
   clearance under the brand rule, which is why section 33 zeroed the footer's
   own padding-top. With the band gone the link columns started hard against
   that rule, so the padding comes back here. */
.site-footer { padding-top: clamp(2.6rem, 4.5vw, 4rem); }

.footer-bottom {
  gap: 0.5rem 1.6rem;
  padding-block: 1.15rem 4.4rem;
}

.footer-bottom p { margin: 0; }

/* The credit is a third party's name, not the Foundation's — it sits a shade
   quieter than the copyright it shares the row with. */
.footer-bottom__links a { transition: opacity var(--t-fast), color var(--t-fast); }
.footer-bottom__links a:hover { opacity: 1; }

@media (max-width: 640px) {
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom__links { justify-content: center; }
}

/* ==========================================================================
   50. Article detail page
   --------------------------------------------------------------------------
   The page ran as one narrow column: hero, prose, related. Everything a
   reader might act on — the contents, the share links, the consultation
   prompt — waited at the very bottom, which on an 8-minute read is the one
   place most people never reach.

   It is now prose plus a sticky rail. The measure is unchanged (the prose
   column is still capped near 68ch, which is what makes long text readable);
   the rail simply uses the width that was empty margin before.
   ========================================================================== */

/* --- 50.1 Byline ---------------------------------------------------------- */
.page-hero--article .chip { margin-bottom: 1rem; }

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.4rem;
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
}

.byline__avatar {
  width: 52px;
  height: 52px;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(240, 128, 95, 0.55);
}

.byline__who { display: grid; gap: 0.1rem; }
.byline__who b { font-size: 0.98rem; color: var(--on-dark); }
.byline__who span { font-size: 0.78rem; color: var(--on-dark-soft); }

.byline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--on-dark-soft);
}

.byline__meta li { display: inline-flex; align-items: center; gap: 0.45rem; }
.byline__meta svg { width: 15px; height: 15px; color: var(--gold-400); }

/* --- 50.2 Layout ---------------------------------------------------------- */
.article-layout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: start;
}

.article-body { max-width: 68ch; }

/* --- 50.3 Prose ----------------------------------------------------------- */
/* Headings get a short capsule above rather than a larger size alone, so the
   sections are scannable without the type having to shout. */
.article-body h2 {
  position: relative;
  margin: clamp(1.9rem, 3.4vw, 2.6rem) 0 0.7rem;
  padding-top: 1.1rem;
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
  /* Cleared by the sticky header when jumped to from the contents list. */
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.article-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
}

.article-body > p { margin-bottom: 1.1rem; line-height: 1.85; }
.article-body .lead { margin-bottom: 1.4rem; }
.article-body .leaf-list { margin: 1.2rem 0 1.6rem; }
.article-body .quote-block { margin: 1.8rem 0; }

.article-body figure { margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); }

/* .media-frame carries no aspect-ratio of its own, so `height: 100%` on the
   image resolved to auto and the lead photo rendered at its natural height —
   a portrait source ran taller than the viewport before a word was read.

   The ratio goes on the image rather than the figure: the figure also holds
   the caption, and constraining the figure would push that text outside its
   own box and over the paragraph below. The frame's own chrome moves to the
   image with it. */
.article-body figure.media-frame {
  overflow: visible;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.article-body figure.media-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

/* The frame's zoom-on-hover has nothing to be clipped by now that overflow is
   visible, so the image would grow past its own corners. */
.article-body figure.media-frame:hover img { transform: none; }

.article-body figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-muted);
  text-align: center;
}

.article-body__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}

.article-body__foot .pill-list { margin-top: 0; }

/* --- 50.4 Sticky rail ----------------------------------------------------- */
.article-rail .sticky-col { display: grid; gap: 0.9rem; }

.rail-card {
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}

.rail-card__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.rail-toc { display: grid; gap: 0.15rem; counter-reset: toc; list-style: none; }

.rail-toc a {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.3rem;
  padding: 0.42rem 0.5rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
  border-radius: var(--r-xs);
  transition: background var(--t-fast), color var(--t-fast);
}

.rail-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--vermillion-500);
}

.rail-toc a:hover { background: var(--cream); color: var(--forest-900); }

.rail-share { display: flex; gap: 0.5rem; }

.rail-share a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--warm-white);
  border-radius: 50%;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.rail-share a:nth-child(1) { background: #25D366; }
.rail-share a:nth-child(2) { background: #1877F2; }
.rail-share a:nth-child(3) { background: var(--forest-800); }
.rail-share a:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.rail-share svg { width: 17px; height: 17px; }

.rail-card--cta {
  color: var(--on-dark-soft);
  background: var(--grad-forest);
  border-color: transparent;
}

.rail-card--cta .rail-card__title { color: var(--gold-400); }
.rail-card--cta p { font-size: 0.86rem; line-height: 1.6; margin-bottom: 1rem; }

@media (max-width: 1024px) {
  /* The rail moves under the article rather than shrinking: below this width
     a 300px column leaves the prose too narrow to read comfortably. */
  .article-layout__grid { grid-template-columns: minmax(0, 1fr); }
  .article-body { max-width: none; }
  .article-rail .sticky-col {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* ==========================================================================
   52. Service blocks — height
   --------------------------------------------------------------------------
   The rows on services.html ran very tall. The cause is the copy column, not
   the image: block 03 carries ten pills and block 04 ten more, and at the
   previous pill size those wrapped to four rows each. With align-items:center
   the image then sat in the middle of a column far taller than its own 4:3.

   Three passes, in order of what they save: the pills lose about a third of
   their footprint, the media goes to a shallower ratio so short blocks stop
   being sized by the picture, and the block's own padding comes in.
   ========================================================================== */
.service-block {
  gap: clamp(1.4rem, 2.8vw, 2.6rem);
  padding: clamp(1.2rem, 2vw, 1.8rem);
}

.service-block + .service-block { margin-top: clamp(1.1rem, 2vw, 1.7rem); }

/* 16:9 rather than 4:3, and capped as well as ratioed. The ratio alone still
   scaled with the column, so on a wide screen a 600px-wide media box was
   340px tall and became the tallest thing in the row again. The cap holds it
   at 260px however wide the column gets; object-fit keeps the crop centred
   rather than squashing the photograph.

   Scoped to the media INSIDE a .service-block, which is the listing page's
   own structure. The detail pages reuse the same class outside that wrapper
   and set no max-height of their own, so an unscoped cap applied there too:
   with their 4:4.6 ratio, a 260px ceiling resolved the width to about 226px
   and the portrait shrank to a thumbnail in a 527px column. */
.service-block .service-block__media {
  aspect-ratio: 16 / 9;
  max-height: 260px;
}

.service-block .service-block__media img { object-position: center; }

.service-block h2 {
  margin: 0.1rem 0 0.5rem;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
}

.service-block > div > p { margin-bottom: 0.6rem; line-height: 1.7; }
.service-block__more { margin: 0.85rem 0 0; }

/* Scoped to the service blocks: the same pills are used on the services quick
   index and the article topics, where they are the section's own content and
   carry their full size. */
.service-block .pill-list { gap: 0.38rem; margin-top: 0.55rem; }

.service-block .pill-list li {
  gap: 0.32rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.74rem;
}

.service-block .pill-list li::before { width: 5px; height: 5px; }

/* ==========================================================================
   53. Gallery — tabs, uniform grid, video tiles
   --------------------------------------------------------------------------
   The page ran as three headed sections, each with its own masonry grid. It
   is now one header, one tablist and one grid.

   The grid drops the tall/wide masonry modifiers here on purpose: those
   spans are authored per tile, and once a filter hides two thirds of the set
   the surviving spans leave holes the remaining tiles cannot fill. A uniform
   grid tiles cleanly at any subset size.
   ========================================================================== */
.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem);
}

.gallery-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}

.gallery-tab svg { width: 14px; height: 14px; }

.gallery-tab__count {
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--cream);
  border-radius: var(--r-pill);
  transition: color var(--t-fast), background var(--t-fast);
}

.gallery-tab:hover {
  color: var(--forest-900);
  border-color: rgba(218, 69, 38, 0.4);
  transform: translateY(-1px);
}

.gallery-tab.is-active {
  color: var(--warm-white);
  background: var(--grad-gold);
  border-color: transparent;
  box-shadow: var(--sh-gold);
}

.gallery-tab.is-active .gallery-tab__count {
  color: var(--warm-white);
  background: rgba(255, 255, 255, 0.22);
}

/* --- Uniform grid --------------------------------------------------------- */
.gallery--filtered {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  grid-auto-rows: auto;
  gap: 0.85rem;
}

.gallery--filtered .gallery__item {
  aspect-ratio: 4 / 3;
  /* The tiles are <a> and <button> both — the button needs the reset. */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* --- Video tiles ---------------------------------------------------------- */
.gallery__item--video .gallery__cap { opacity: 1; transform: none; }
.gallery__item--video .gallery__cap b { display: block; font-weight: 600; opacity: 0.8; }

.gallery__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--forest-900);
  background: rgba(253, 251, 246, 0.94);
  border-radius: 50%;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%);
  transition: transform var(--t-base), background var(--t-base), color var(--t-base);
}

.gallery__play svg { width: 20px; height: 20px; margin-left: 3px; }

.gallery__item--video:hover .gallery__play {
  color: var(--warm-white);
  background: var(--grad-gold);
  transform: translate(-50%, -50%) scale(1.1);
}

/* A hidden tile must not keep its grid cell. `hidden` alone loses to the
   grid's own display value, so it is restated here. */
.gallery__item[hidden] { display: none; }

/* ==========================================================================
   54. Whole-artwork images
   --------------------------------------------------------------------------
   Every media frame on the site crops with object-fit: cover, which is right
   for photographs — a photograph loses nothing when its edges go. It is wrong
   for a finished illustration: "Advanced Ayurvedic Healing.jpeg" is 930x836,
   a near-square composition inside its own painted border, and the frames it
   sits in are 16:11 on the home card, 16:9 on the services listing and 4:4.6
   on the detail page. Cover cut the seer's head on one and the vessels on
   another.

   .media--fit switches that frame to contain and fills the leftover band with
   the artwork's own dark ground, so the letterboxing reads as a mount rather
   than as a gap. Use it only for images that are complete artworks; leave
   photographs on cover.
   ========================================================================== */
/* No aspect-ratio here on purpose. The frame keeps whatever shape its own
   component gives it — 16:11 on a service card, 16:9 on the services listing
   — so a card holding an illustration is exactly as tall as the photograph
   cards beside it. Letting the artwork set the height instead made the
   middle card in a row taller than its neighbours. The band that contain
   leaves is filled with the artwork's own dark ground, so it reads as a
   mount. */
.media--fit { background: var(--navy-950); }

/* The one exception: the service DETAIL page frame is a 4:4.6 portrait, and
   a near-square illustration inside it would be mostly band. There is a
   single image on that page with no siblings to line up against, so it takes
   the artwork's own ratio instead. */
/* Service detail pages: one layout for all nine
   --------------------------------------------------------------------------
   The split now carries only the picture and the pitch — headline, lead and
   the two buttons. "What this includes" and the process steps have moved to
   full-width sections below it.

   That is what makes the nine pages consistent. While the list sat in the
   split, the taller column swapped sides from page to page depending on how
   long that page's lead ran and how many items it listed, and the leftover
   height pooled as a hole on whichever side was shorter. With both columns
   holding a short, fixed kind of content they come out close on every page,
   and the picture is capped so it can never tower over the copy. */
.split--wide-right:has(.service-block__media) { align-items: start; }

.split--wide-right .service-block__media.media--fit {
  aspect-ratio: 930 / 836;
  max-height: none;
  /* Not sticky. The poster pages already opt out (section 53.1); this is the
     one detail page whose media is .media--fit, and it was left pinned — so
     the illustration parked under the header and rode down the page while
     the copy scrolled past it, ending up over "What this includes". Static,
     so it stays where flow puts it like every other image on the page. */
  position: static;
}

.media--fit img {
  object-fit: contain;
  /* The zoom-on-hover is a photographic gesture; on a bordered illustration
     it just pushes the painted border out of frame. */
  transform: none !important;
}

/* ==========================================================================
   53. Service posters
   --------------------------------------------------------------------------
   The eight service images are finished artworks, not photographs: each
   carries a heading, labelled icons and bullet copy set right out to its
   edges. Cover — the default for every media frame on the site — cuts that
   type off, and the detail pages' frame is a 4:4.6 portrait, which would
   take roughly half of a 1.52 landscape away.

   So the frame contains rather than crops. The current set does not share a
   single ratio the way the old 959x630 one did — the eight run from 1.136
   (Online consultation, 1080x951) to 1.371 (Lifestyle Disorders, 1079x787),
   with the bulk sitting on 4:3. So the frame takes 4:3: it is the set's
   middle, it matches .service-block__media on the listing page, and it keeps
   every card in a row the same height. The widest and narrowest posters get
   a shallow cream band; nothing is cropped. Replace the set again and this
   number has to be re-checked.

   Written as one grouped selector on purpose. Each host frame sets its own
   aspect-ratio at two-class specificity, so a bare .media--poster could not
   override any of them.
   ========================================================================== */
.service-card__media.media--poster,
.service-block .service-block__media.media--poster,
.split--wide-right .service-block__media.media--poster {
  aspect-ratio: 4 / 3;
  max-height: none;
  background: var(--cream);
}

/* The Advanced Ayurvedic Healing card is the one service image that is not a
   poster — it is a near-square illustration on .media--fit, so it kept the
   card's own 16:9 while the eight posters moved to 1.522. Two ratios in one
   row means two media heights, and the odd card out sits visibly shallower
   than its neighbours. It takes the same ratio so the row lines up; being
   --fit, it still contains rather than crops, and its mount just becomes a
   little wider. */
.service-card__media.media--fit,
.service-block .service-block__media.media--fit {
  aspect-ratio: 4 / 3;
}

.media--poster img,
.split--wide-right .service-block__media.media--poster img {
  object-fit: contain;
  object-position: center;
  /* Zoom-on-hover is a photographic gesture. On set type it only softens the
     lettering and pushes the outer labels past the frame. */
  transform: none !important;
}

/* --- 53.1 Service detail pages: give the poster the column -----------------
   The detail layout is .split--wide-right — 0.85fr media, 1.15fr copy — which
   was right when the media was a photograph. A poster is not a photograph:
   the whole point of it is the type it carries, and at 0.85 of the split it
   rendered about 575px wide, where the labels ("PSYCHO-NEURO-IMMUNOLOGICAL
   DISORDERS" and friends) are barely legible.

   Even columns take it to roughly 673px on a 1440 container — 17% taller,
   the same on all eight pages since the posters share a ratio.

   It deliberately stops there. The source files are ~1080px wide, so anything
   past that is upscaling, which is exactly what makes set type look soft. If
   these need to run larger, they need re-exporting at a higher resolution;
   CSS cannot add detail that is not in the file.
   ========================================================================== */
.split--wide-right:has(.service-block__media.media--poster) {
  grid-template-columns: 1fr 1fr;
}

/* Sticky comes off the media. It was never working here in any case:
   .section sets `overflow: clip`, and any ancestor with overflow other than
   visible becomes the sticky element's scrollport. Pinning the picture while
   the copy beside it scrolled away would be wrong regardless. */
/* One frame shape and one ceiling for all nine detail pages, so the picture
   is the same size whichever service you open. 4:3 suits the set; the cap
   stops it running taller than the copy beside it on a wide screen. Has to
   sit after .media--poster's 4:3 and .media--fit's 930:836 — those weigh the
   same (0,3,0), so only source order settles it. The artwork stays
   `contain`, centred on the cream ground, never cropped. */
.split--wide-right:has(.service-block__media) .service-block__media.media--poster,
.split--wide-right:has(.service-block__media) .service-block__media.media--fit {
  aspect-ratio: 4 / 3;
  max-height: clamp(280px, 30vw, 420px);
}

.split--wide-right:has(.service-block__media.media--poster) .service-block__media {
  position: static;
}

/* ==========================================================================
   54. Contact panel — details beside the form
   --------------------------------------------------------------------------
   One card holding both halves, rather than a four-across details strip in
   its own section above a separate form split. Two gains: the details column
   is given a job — filling the height the form sets, which is what the old
   layout had nothing to do with — and the two stop reading as unrelated
   blocks stacked down the page.

   The aside carries the dark ground so the form half stays plain white and
   the eye lands on the fields, which is the one thing this page is for.
   ========================================================================== */
.contact-panel {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.contact-aside {
  position: relative;
  isolation: isolate;
  padding: clamp(1.7rem, 2.6vw, 2.6rem);
  color: var(--warm-white);
  background: var(--grad-forest);
}

/* Photograph held right back — it is a texture behind the cards, not a
   picture. Anything brighter and the translucent cards stop separating from
   it, which is the whole reason they are translucent. */
.contact-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--aside-image, url("../images/sec-abhyanga.jpg")) center / cover no-repeat;
  opacity: 0.13;
}

.contact-aside__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

/* The rule after the label, drawn rather than added as an element */
.contact-aside__label::after {
  content: "";
  flex: none;
  width: 42px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

.contact-aside__title {
  margin: 0 0 var(--sp-4);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.25;
  color: var(--warm-white);
}

.contact-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-md);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.contact-list__item:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.24);
}

/* --grad-gold, not --grad-brand. The brand gradient runs leaf green through
   vermillion to crimson across its full length — it is meant to sign the edge
   of a band, and squeezed into a 40px tile it just reads as a green-to-red
   smear. This is the same vermillion badge every other icon on the site uses. */
.contact-list__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  color: var(--warm-white);
  background: var(--grad-gold);
}

.contact-list__icon svg { width: 19px; height: 19px; }

.contact-list__k {
  margin: 0 0 0.2rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.contact-list__v {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--warm-white);
}

.contact-list__v a { color: inherit; text-decoration: none; }
.contact-list__v a:hover { text-decoration: underline; }

.contact-list__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  text-decoration: none;
}

.contact-list__link svg { width: 13px; height: 13px; }
.contact-list__link:hover { color: var(--warm-white); }

.contact-form { padding: clamp(1.7rem, 2.6vw, 2.8rem); }

.contact-form h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.25;
}

.contact-form__intro {
  margin: 0 0 var(--sp-4);
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* One column below this. The aside goes first in source order and stays
   first here — the address and phone are what a visitor on a phone most
   often wants, and they should not sit behind a nine-field form. */
@media (max-width: 980px) {
  .contact-panel { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Gallery: photo wall
   Every tile is the same size AND every photograph is shown whole. The
   folder mixes portrait, square and wide shots, so the image is fitted
   inside the tile instead of filling it — a fixed tile that a photo must
   cover is what was slicing heads and banners off. The spare space is a
   flat warm panel, matching the page rather than announcing itself.
   Doubled class beats the plain `.gallery` rules responsive.css sets later
   in the cascade.
   ========================================================================== */
.gallery.gallery--photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  grid-auto-rows: auto;
  gap: 0.85rem;
}

.gallery--photos .gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--warm-white);
  cursor: zoom-in;
}

.gallery--photos .gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Nothing to zoom into on a fitted photo — the stock hover scale would
   push it past the tile edge and crop it again. */
.gallery--photos .gallery__item:hover img { transform: none; }

@media (max-width: 640px) {
  .gallery.gallery--photos { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* ==========================================================================
   28. CMS page template
   --------------------------------------------------------------------------
   Used only by resources/views/page.blade.php, which renders a page built in
   the admin from whatever blocks it holds. Everything else on the site is laid
   out by its own template; these are the few shapes that template needs and
   the rest of the stylesheet had no reason to define.
   ========================================================================== */

/* Free prose from the section body editor. Descendant selectors rather than
   classes, because the markup comes from a rich-text field and carries no
   classes of its own. */
.prose > * + * { margin-top: var(--space-xs); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--space-md); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.35rem; display: grid; gap: 0.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md, 14px); }
.prose a { text-decoration: underline; text-underline-offset: 0.18em; }
.prose blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-xs) var(--space-sm);
  border-left: 3px solid var(--c-primary, #c43b1e);
  font-family: var(--f-serif, Georgia, serif);
  font-size: 1.1rem;
}

/* Copy beside its photograph. Collapses to one column on narrow screens via
   the auto-fit track rather than a breakpoint, so it reflows with the
   container instead of at a fixed width. */
.split {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: center;
}
.split__media { margin: 0; }
.split__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg, 18px);
}
.split--media-left .split__media { order: -1; }

/* A section whose only visual is one image. */
.section__media { margin: var(--space-md) 0 0; }
.section__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg, 18px);
}

/* Card extras the built-in pages never needed: a subtitle line, and a
   photograph where those pages use an icon. */
.feature-card__sub {
  margin-top: 0.15rem;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.feature-card__media {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-md, 14px);
}

/* The honeypot on the enquiry forms. Positioned away rather than display:none,
   because some bots skip fields that are explicitly hidden and the field only
   works if they fill it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}