/* ============================================
   Shrimad Rajchandra Ashram, USA — Homepage
   ============================================ */

:root {
  /* === Colors (from Figma design-tokens.md) === */
  --brand:        #5E2A29;          /* primary maroon — 28 uses */
  --brand-soft:   #5E2A29B2;        /* maroon @ 70% — stroke */
  --brand-2:      #62302F;          /* secondary maroon */
  --cream:        #F7F5EF;          /* nav background */
  --cream-bg:     #FDFBF3;          /* register button bg */
  --cream-tint:   #F0EADE80;        /* tinted section background */
  --cream-strong: #F0EADE;
  --bg:           #FAFAFA;          /* page bg + light text */
  --ink:          #282828;          /* primary body text */
  --ink-70:       #282828B2;        /* secondary text @ 70% */
  --ink-80:       #282828CC;        /* secondary text @ 80% */
  --brown:        #4A3B2E;          /* display headlines */
  --accent:       #5A381C;          /* button label / activity titles */
  --accent-strong:#62302F;
  --gold-soft:    rgba(190,168,132,0.5);  /* #BEA88480 — pillar rule */
  --gold:         rgb(190,168,132);
  --border-soft:  #EDE8D9;
  --white-80:     rgba(255,255,255,0.8);  /* #FFFFFFCC */
  --white-70:     rgba(255,255,255,0.7);  /* #FFFFFFB2 */
  --white-60:     rgba(255,255,255,0.6);  /* #FFFFFF99 */
  --white-40:     rgba(255,255,255,0.4);  /* #FFFFFF66 */
  --gray-mid:     #A6A6A6;
  --bronze-stroke:#A67C5233;
  --nav-active:   #E26326;          /* orange — Figma nav hover/active (nav component Variant6) */

  /* === Typography === */
  --serif:  "STIX Two Text", "Source Serif Pro", Georgia, serif;
  --sans:   "Inter", "Helvetica Neue", Arial, sans-serif;

  /* === Typography scale (per viewport.png) ===
     Each token is `<font-size>px / <line-height>px`. Base values are for
     767-and-below; @media rules raise them at each breakpoint. */
  --fs-h1: 32px;   --lh-h1: 40px;   /* Hero Heading */
  --fs-h2: 24px;   --lh-h2: 32px;   /* Section Heading */
  --fs-pq: 24px;   --lh-pq: 32px;   /* Pull Quote */
  --fs-h4: 18px;   --lh-h4: 26px;   /* Title */
  --fs-h5: 14px;   --lh-h5: 22px;   /* Card Title */
  --fs-sub: 12px;  --lh-sub: 18px;  /* Section Sub-Heading Labels */
  --fs-body: 12px; --lh-body: 18px; /* Body */
  /* Nav / CTAs — Figma node 4098:1220 was 18px; QC Nav-r13 reduces nav
     items to 16px. Scaled proportionally so it caps at 16 at 1920+ and
     scales down with viewport. Line-height kept proportional (16*24/18≈21). */
  --fs-nav: min(16px, calc(16 / 1920 * 100vw));
  --lh-nav: min(21px, calc(21 / 1920 * 100vw));
  --fs-meta: 12px; --lh-meta: 18px; /* Meta / Tags */

  /* === Layout === */
  --container-max: 1440px;
  --gutter: clamp(20px, 4vw, 80px);

  /* === Design scale (proportional rendering for desktop viewports) ===
     Diagnosis (Anita Loom 2026-05-27): the 1920 Figma designs render
     too "zoomed in" at smaller desktops — section padding, inner-hero
     heights, band-image heights, and inter-element spacing feel
     oversized because they were authored at 1920 with hard or near-hard
     floors. The fix is a single multiplier `--ds` that steps with
     viewport width via the breakpoints below, then feeds into the
     spacing/sizing tokens beneath it.

     Steps mirror the viewport.png typography breakpoints so spacing
     and type scale in lockstep. Anita's "80% browser zoom looks right"
     observation ≈ --ds 0.80 at the same viewport she tested.

       <=1023 : 0.55  (mobile floor; mobile.css usually wins anyway)
       1024   : 0.65
       1200   : 0.72
       1440   : 0.78  (Anita's 1440 Figma reference)
       1500   : 0.84
       1700   : 0.92
       1920   : 1.00  (Figma reference)

     NB: tried fluid `clamp(0.55, calc(100vw/1920), 1)` first but
     vw/number = length, not number, so clamp() rejected it and the
     dependent tokens collapsed to 0. Stepped form is reliable and
     matches the existing typography scale's structure. */
  --ds: 0.55;

  /* Scaled vertical spacing — "Figma 1920 value × --ds" with a max()
     floor so the layout never fully pancakes at narrow viewports.
     Base values calibrated against Anita's 1440 Figma reference (Frame
     "Step Into Sacred Grounds" node 2009:541) which shows ~72px top
     padding at 1440 → 96 × 0.78 = 75 at 1440. */
  --sp-section-y:    max(40px, calc(96px  * var(--ds)));  /* .section padding-block */
  --sp-section-y-lg: max(56px, calc(128px * var(--ds)));  /* extra-tall sections */
  --sp-narrative-y:  max(28px, calc(56px  * var(--ds)));  /* .narrative padding-block */
  --sp-stack-lg:     max(24px, calc(56px  * var(--ds)));
  --sp-stack-md:     max(16px, calc(36px  * var(--ds)));
  --sp-stack-sm:     max(10px, calc(20px  * var(--ds)));

  /* Hero heights.
     --hero-min-h: scaled inner-hero default. Base 702px = Anita's
                   Global Movement hero at 1920 (Figma "Global Movement
                   Subpage" mask group, w 1920 h 702). At 1440 ds=0.78
                   → 547. At 1280 ds=0.72 → 506. Floor 420 protects
                   narrow widths.
     --hero-fold-min-h: opt-in full-fold (home page only).
     --band-image-h:    unused after Round 60b revert; kept as a hook. */
  --hero-min-h:       max(420px, calc(702px * var(--ds)));
  --hero-fold-min-h:  clamp(420px, 80vh, 920px);
  --band-image-h:     max(280px, calc(560px * var(--ds)));

  --shadow-card: 0 10px 30px -10px rgba(94, 42, 41, 0.15),
                 0 20px 60px -15px rgba(94, 42, 41, 0.2);
  --shadow-soft: 0 8px 24px -12px rgba(40, 40, 40, 0.18);
  --radius:  16px;
  --radius-sm: 8px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Figma node 4148:1815: Primary Nav 110, Secondary Nav 66. Scaled
     proportionally so the bars don't dominate at narrower viewports
     while the rest of the page (which also scales) gets smaller. */
  --nav-h: min(110px, calc(110 / 1920 * 100vw));
  --announce-h: min(66px, calc(66 / 1920 * 100vw));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Typography scale media queries (viewport.png table) */
@media (min-width: 880px) {
  :root {
    --fs-h1: 36px; --lh-h1: 44px;
    --fs-h2: 28px; --lh-h2: 36px;
    --fs-pq: 28px; --lh-pq: 36px;
    --fs-h4: 22px; --lh-h4: 28px;
    --fs-h5: 16px; --lh-h5: 24px;
    --fs-sub: 12px; --lh-sub: 18px;
    --fs-body: 12px; --lh-body: 18px;
    /* design scale */ --ds: 0.55;
  }
}
@media (min-width: 1024px) {
  :root {
    --fs-h1: 40px; --lh-h1: 48px;
    --fs-h2: 32px; --lh-h2: 40px;
    --fs-pq: 32px; --lh-pq: 40px;
    --fs-h4: 24px; --lh-h4: 32px;
    --fs-h5: 18px; --lh-h5: 26px;
    --fs-sub: 12px; --lh-sub: 18px;
    --fs-body: 14px; --lh-body: 20px;
    /* --fs-nav / --lh-nav inherit from :root (proportional scale). */
    --fs-meta: 14px; --lh-meta: 20px;
    /* design scale */ --ds: 0.65;
  }
}
@media (min-width: 1200px) {
  :root {
    --fs-h1: 44px; --lh-h1: 52px;
    --fs-h2: 36px; --lh-h2: 44px;
    --fs-pq: 36px; --lh-pq: 44px;
    --fs-h4: 28px; --lh-h4: 34px;
    --fs-h5: 22px; --lh-h5: 28px;
    --fs-sub: 14px; --lh-sub: 20px;
    --fs-body: 14px; --lh-body: 20px;
    /* --fs-nav / --lh-nav inherit from :root (proportional scale). */
    /* design scale */ --ds: 0.72;
  }
}
@media (min-width: 1440px) {
  :root {
    --fs-h1: 52px; --lh-h1: 60px;
    --fs-h2: 44px; --lh-h2: 52px;
    --fs-pq: 40px; --lh-pq: 52px;
    --fs-h4: 30px; --lh-h4: 38px;
    --fs-h5: 26px; --lh-h5: 34px;
    --fs-sub: 16px; --lh-sub: 22px;
    --fs-body: 16px; --lh-body: 22px;
    /* --fs-nav / --lh-nav inherit from :root (proportional scale). */
    /* design scale — Anita's 1440 Figma reference */ --ds: 0.78;
  }
}
@media (min-width: 1500px) {
  :root {
    --fs-h1: 56px; --lh-h1: 64px;
    --fs-h2: 48px; --lh-h2: 52px;
    --fs-pq: 44px; --lh-pq: 52px;
    --fs-h4: 32px; --lh-h4: 40px;
    --fs-h5: 28px; --lh-h5: 36px;
    --fs-sub: 18px; --lh-sub: 24px;
    --fs-body: 18px; --lh-body: 24px;
    /* --fs-nav / --lh-nav inherit from :root (proportional scale). */
    /* design scale */ --ds: 0.84;
  }
}
@media (min-width: 1700px) {
  /* Inserted between the existing typography breakpoints to step --ds
     more smoothly between 1500 and 1920. No typography deltas — just
     spacing. */
  :root { --ds: 0.92; }
}
@media (min-width: 1920px) {
  :root {
    --fs-h1: 64px; --lh-h1: 72px;
    --fs-h2: 52px; --lh-h2: 60px;
    --fs-pq: 48px; --lh-pq: 52px;
    --fs-h4: 36px; --lh-h4: 44px;
    --fs-h5: 32px; --lh-h5: 40px;
    --fs-sub: 20px; --lh-sub: 26px;
    --fs-body: 20px; --lh-body: 26px;
    /* Figma node 4098:1220: nav links were Inter Medium 18px; QC Nav-r13
       reduces to 16px tracking 0.9px uppercase #5e2a29. Scaled with viewport
       like the nav heights. Line-height proportional (16*24/18≈21). */
    --fs-nav: min(16px, calc(16 / 1920 * 100vw));
    --lh-nav: min(21px, calc(21 / 1920 * 100vw));
    /* design scale — Figma reference */ --ds: 1.00;
  }
}

/* Sitewide line-wrapping baseline — text-wrap: pretty avoids orphan
   words (single word on the last line) and "rivers" of whitespace by
   adjusting line breaks. Browsers that don't support it fall back to
   normal wrapping. Headings get `balance` for more even multi-line
   layout. */
p, li, blockquote { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* Base typography defaults — generic h1..h5 + body inherit from the
   viewport.png scale. Per-page custom classes (.hero__title,
   .if-hero__title, .section-head h2, etc.) continue to win via
   specificity, so this only affects un-overridden headings. */
h1, .t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 500; }
h2, .t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; }
.t-pq    { font-size: var(--fs-pq); line-height: var(--lh-pq); font-weight: 400; }
h3, h4, .t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 500; }
h5, .t-h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 500; }
.t-sub   { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 500; }
.t-body  { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; }
.t-nav, .nav-links button, .nav-links a {
  font-size: var(--fs-nav); line-height: var(--lh-nav); font-weight: 500;
  /* Figma node 4098:1220: tracking 0.9px on 18px = 0.05em. */
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.t-meta  { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 400; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Prevent the layout from compressing below its design width on desktop.
   Browser zoom-out increases the CSS viewport width (page-zoom shrinks each
   CSS pixel), so layouts that depend on a sensible minimum width can look
   broken at extreme zoom levels. A min-width forces a horizontal scrollbar
   instead of letting the layout squeeze, keeping all sections proportional.

   Breakpoint MUST be >= the min-width value (currently 1100), otherwise the
   rule kicks in at the boundary viewport and creates 76px of horizontal
   scroll instead of preventing it. Previously was `min-width: 1024px` which
   broke exactly at iPad-landscape (1024px) — a common real viewport. */
@media (min-width: 1100px) {
  body { min-width: 1100px; }
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

::selection { background: var(--brand); color: #fff; }

/* ============================================
   Typography helpers
   ============================================ */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 24.2px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 700px) {
  .eyebrow { font-size: 16px; }
}

.display {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--brand);
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
.display em { font-style: italic; color: var(--brand); font-weight: 500; }

/* Display scales via viewport.png — h1=Hero, h2=Section, h3=Title */
h1.display { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--bg); }
h2.display { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3.display { font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--brand); }

.lead {
  /* Body / Descriptions per viewport.png */
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--ink);
  max-width: 56ch;
}
.lead strong { color: var(--ink); font-weight: 600; }

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 28px 0 28px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  transition: all 0.3s var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn .btn-icon {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-out);
}
.btn .btn-icon svg { width: 12px; height: 12px; }

.btn:hover { background: var(--accent); color: #fff; }
.btn:hover .btn-icon { background: #fff; color: var(--accent); transform: translateX(3px); }

.btn--secondary { color: var(--brand); border-color: var(--brand); }
.btn--secondary .btn-icon { background: var(--brand); }
.btn--secondary:hover { background: var(--brand); color: #fff; }
.btn--secondary:hover .btn-icon { background: #fff; color: var(--brand); }

.btn--filled {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border-color: transparent;
}
.btn--filled:hover { background: var(--accent); color: #fff; }

.btn--register {
  /* Figma node 4148:1821: 181x37 cream pill, Inter Medium 14px #5e2a29. */
  height: min(37px, calc(37 / 1920 * 100vw));
  padding: 0 min(20px, calc(20 / 1920 * 100vw));
  background: var(--cream-bg);
  color: var(--brand);
  border: 0;
  font-weight: 500;
  font-size: min(14px, calc(14 / 1920 * 100vw));
  line-height: 1;
}
.btn--register:hover {
  /* Per Figma Button Secondary hover: shifted-shade background, maroon
     text stays visible (was inheriting #fff from .btn:hover, making
     text white-on-white). */
  background: #F0EADE;
  color: var(--brand);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* circular carousel arrows */
.carousel-btn {
  width: 54px; height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(94,42,41,0.3);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  transition: all 0.25s var(--ease-out);
}
.carousel-btn:hover:not(:disabled) {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel-btn svg { width: 18px; height: 18px; }

/* ============================================
   Top announcement strip + nav
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--cream);
  transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(40,40,40,0.06); }

/* QC Nav-r11: hide the "Joyous July Registration Now Open" promo bar
   sitewide. The bar lives INSIDE the sticky .site-header (not a separately
   offset element), so display:none just shortens the header — no leftover
   gap, and the nav still sticks correctly to top:0. */
.announce { display: none !important; }

.announce {
  display: grid;
  /* minmax(0, ...) lets the tracks shrink below their content's min-width —
     without this, the long promo text + Register Now button were forcing the
     grid to ~1100px wide at narrow viewports (1024px iPad landscape), pushing
     the entire document horizontally scrollable. overflow: hidden clips any
     remaining sub-pixel overflow so the page width never exceeds the viewport. */
  grid-template-columns: minmax(0, 1.46fr) minmax(0, 1fr);
  height: var(--announce-h);
  background: var(--cream-bg);
  overflow: hidden;
}
.announce__promo {
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
}
.announce__promo p {
  /* Figma node 4148:1819: Inter Medium 16px tracking 0.4px white. */
  margin: 0;
  font-family: var(--sans);
  font-size: min(16px, calc(16 / 1920 * 100vw));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.4px;
}
@media (max-width: 899px) {
  .announce__promo p { font-size: 14px; }
}
.announce__links {
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 24px;
}
.announce__links a {
  /* Figma nodes 4148:1825 + 4148:1827: Inter Semi Bold 14px #5e2a29. */
  font-family: var(--sans);
  font-size: min(14px, calc(14 / 1920 * 100vw));
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand);
  position: relative;
  transition: color 0.2s ease;
}
.announce__links a:hover { color: var(--brand); }
.announce__divider {
  width: 1px; height: 16px; background: rgba(40,40,40,0.25);
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 clamp(20px, 4vw, 80px);
  background: var(--cream);
  transition: height 0.3s var(--ease-out);
}
.site-header.is-scrolled .primary-nav { height: 68px; }

.brand-logo {
  display: flex; align-items: center;
  /* Figma node 4148:1829: SRA Horizontal Color 1 is 294x62 at 1920vp.
     Scaled proportionally. */
  height: min(62px, calc(62 / 1920 * 100vw));
  transition: height 0.3s var(--ease-out);
}
.brand-logo img { height: 100%; width: auto; }
.site-header.is-scrolled .brand-logo { height: min(48px, calc(48 / 1920 * 100vw)); }

.nav-links {
  display: none;
  align-items: center;
  gap: clamp(20px, 3vw, 60px);
  list-style: none;
  margin: 0; padding: 0;
}
@media (min-width: 1080px) { .nav-links { display: flex; } }
/* Anita nav (6/5): Programs Calendar + Contact Us make the 6-item nav too wide
   for the 1080–1199 band (it wrapped/overflowed). Tighten the inter-item gap
   there so it stays on one line; ≥1200 keeps the roomy spacing. */
@media (min-width: 1080px) and (max-width: 1199px) {
  .nav-links { gap: clamp(14px, 1.8vw, 22px); }
}
/* Anita (nav clarifications, 6/5): Programs Calendar is BACK in the top nav
   (per Aarti Aunty) and links to a "Coming Soon" placeholder page. The
   earlier Nav-r10 hide is removed. data-nav="programs" stays for active-state
   mapping. */

.nav-links a, .nav-links button {
  /* Per Figma — default BRAND MAROON (#5E2A29) text, ORANGE (#C95E1A) on
     hover / active / current-page. No underline. Chevron flips up when
     dropdown opens. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  /* QC Nav-r13: nav items reduced 18px → 16px. Line-height + tracking scaled
     proportionally (21.8*16/18≈19.4; 0.9*16/18=0.8). */
  font-size: 16px;
  font-weight: 500;
  line-height: 19.4px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brand);
  padding: 8px 2px;
  position: relative;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
/* QC Nav-r16: "About" and "Visit" are dropdown-only triggers — there's no
   page behind the label itself, so a pointer cursor falsely promises a click
   destination. Default cursor on just those two buttons; every real link
   (Activities main link, Programs Calendar, Social Impact, Contact Us, and
   all dropdown links) keeps the pointer. */
.nav-links > li[data-nav="about"] > button,
.nav-links > li[data-nav="visit"] > button {
  cursor: default;
}
/* Split-button (Activities): the label is a link to the page, the chev
   is a separate button that opens the dropdown. Visually they sit
   together as one nav item with no extra gap; hovering either part
   highlights both. */
.nav-links .nav-split { display: inline-flex; align-items: center; gap: 0; }
.nav-links .nav-split__main { padding-right: 4px; }
.nav-links .nav-split__chev { padding: 8px 4px 8px 0; }
.nav-links .nav-split:hover .nav-split__main,
.nav-links .nav-split:hover .nav-split__chev { color: var(--nav-active); }
/* Nav-r15: do NOT orange-highlight a top-nav item just because the current
   page lives under it (e.g. "About" while on Inspiration & Founder). The parent
   section-highlight is removed; only true hover + an open dropdown light up. */
.nav-links a:hover,
.nav-links button:hover,
.nav-links button[aria-expanded="true"] {
  color: var(--nav-active);
}

.nav-links .chev {
  width: 10px; height: 10px;
  transition: transform 0.2s ease;
}
.nav-links button:hover .chev,
.nav-links button[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav-search {
  /* Figma node 4148:1831: search vector 18x18 at top=46. Tap-target wrapper a
     bit larger than the icon. Floored with clamp() so it doesn't shrink below
     the fixed 16px nav tabs on the 1080-1199 nav band (iPad Air/Pro landscape)
     — was pure vw-scaling that collapsed the icon to ~11px next to 16px tabs. */
  width: clamp(22px, calc(24 / 1920 * 100vw), 24px);
  height: clamp(22px, calc(24 / 1920 * 100vw), 24px);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.nav-search:hover { transform: scale(1.1); }
.nav-search svg {
  width: clamp(16px, calc(18 / 1920 * 100vw), 18px);
  height: clamp(16px, calc(18 / 1920 * 100vw), 18px);
}

.nav-hamburger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 6px;
  cursor: pointer;
}
.nav-hamburger span {
  width: 24px; height: 2px; background: var(--brand);
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
@media (min-width: 1080px) { .nav-hamburger { display: none; } }

.nav-controls { display: flex; align-items: center; gap: 18px; }

/* ============================================
   Mobile menu drawer
   ============================================ */
.menu-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 100%);
  height: 100vh;
  background: var(--cream);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);
  display: flex; flex-direction: column;
  padding: 32px 32px 48px;
  overflow-y: auto;
}
.menu-drawer.is-open { transform: translateX(0); }
.menu-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 32px;
}
.menu-drawer__close {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--brand);
}
.menu-drawer__close svg { width: 22px; height: 22px; }
.menu-drawer ul { list-style: none; margin: 0; padding: 0; }
.menu-drawer ul li a {
  display: block;
  padding: 14px 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--brand);
  border-bottom: 1px solid rgba(94,42,41,0.1);
}
.menu-drawer__foot {
  margin-top: auto;
  padding-top: 32px;
  font-size: 14px;
  color: var(--ink-70);
}
.menu-drawer__foot a { display: block; margin-top: 8px; color: var(--brand); font-weight: 500; }

.backdrop {
  position: fixed; inset: 0;
  background: rgba(40,40,40,0.4);
  z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.backdrop.is-on { opacity: 1; pointer-events: auto; }

/* ============================================
   Search overlay
   ============================================ */
/* Sticky-header-friendly scroll offset for anchor jumps so the target
   heading doesn't slide under the sticky nav when arriving via a # link
   (search results, footer nav, etc.) */
html { scroll-padding-top: 140px; }
[id] { scroll-margin-top: 140px; }

/* ============================================
   Placeholder pages (Contact Us, Terms, Privacy,
   Accessibility, Sitemap). Match the site theme
   and mark each with a small badge.
   ============================================ */
.placeholder-page { background: #FAF7EF; }
.placeholder-hero {
  position: relative;
  padding: clamp(120px, 14vw, 200px) 0 clamp(36px, 5vw, 64px);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(94,42,41,0.06) 0%, rgba(94,42,41,0) 60%),
    linear-gradient(180deg, #F0EADE 0%, #FAF7EF 100%);
}
.placeholder-hero__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.placeholder-hero__kicker {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.placeholder-hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--brand);
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.placeholder-hero__lead {
  max-width: 56ch;
  margin: clamp(16px, 2vw, 28px) auto 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.placeholder-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(94,42,41,0.35);
  background: #FDFBF3;
  color: var(--brand);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  vertical-align: middle;
}
.placeholder-body {
  padding: clamp(40px, 5vw, 80px) 0 clamp(64px, 8vw, 120px);
  background: #FAF7EF;
}
.placeholder-body__inner {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 36px);
}
.placeholder-card {
  background: #FDFBF3;
  border: 1px solid rgba(94,42,41,0.10);
  border-radius: 14px;
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 36px);
}
.placeholder-card h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--brand);
}
.placeholder-card p {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.placeholder-card p:last-child { margin-bottom: 0; }
.placeholder-card a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.placeholder-card a:hover { color: var(--accent); }
.placeholder-link {
  color: var(--brand);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.placeholder-link:hover { color: var(--accent); border-color: var(--accent); }
.placeholder-doc h2 {
  margin: clamp(24px, 2.4vw, 36px) 0 8px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--brand);
}
.placeholder-doc h2:first-child { margin-top: 0; }
.placeholder-doc p {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.placeholder-doc ul {
  margin: 0 0 14px;
  padding-left: 22px;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.placeholder-doc li { margin-bottom: 6px; }
.placeholder-doc a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.placeholder-doc a:hover { color: var(--accent); }
.placeholder-note {
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--brand);
  background: rgba(94,42,41,0.05);
  font-family: var(--sans);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-70);
}
/* On the legal pages the draft notice sits at the TOP of the doc (the default
   .placeholder-note is a bottom footnote with a top margin) — flush it up. */
.placeholder-doc > .placeholder-note:first-child { margin-top: 0; }
.sitemap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 720px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sitemap-grid { grid-template-columns: repeat(3, 1fr); } }
.sitemap-col h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(94,42,41,0.18);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.sitemap-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sitemap-col a {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  text-decoration: none;
}
.sitemap-col a:hover { color: var(--brand); }

.search-overlay {
  position: fixed; inset: 0;
  /* QC r40: fully opaque — at 0.97 the page behind showed through like a watermark */
  background: var(--cream);
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 18vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; }
.search-overlay__close {
  position: absolute;
  top: 32px; right: 32px;
  width: 44px; height: 44px;
  color: var(--brand);
}
.search-overlay__close svg { width: 28px; height: 28px; }
.search-form {
  width: min(720px, 88%);
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--brand);
  padding-bottom: 14px;
}
.search-form svg { width: 28px; height: 28px; color: var(--brand); flex-shrink: 0; }
.search-form input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 36px);
  color: var(--brand);
  outline: none;
  padding: 8px 0;
}
.search-form input::placeholder { color: rgba(94,42,41,0.4); }
.search-suggest {
  margin-top: 28px;
  width: min(720px, 88%);
  display: flex; flex-wrap: wrap; gap: 12px;
}
.search-suggest span {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin-right: 8px;
  align-self: center;
}
/* Live search results list — populated by the search JS in chrome.js / app.js. */
.search-results {
  margin: 24px auto 0;
  padding: 0;
  list-style: none;
  width: min(720px, 88%);
  max-height: 56vh;
  overflow-y: auto;
  display: none;
}
.search-results li { margin: 0; padding: 0; }
.search-results a {
  display: block;
  padding: 14px 4px;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(94,42,41,0.10);
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.search-results a:hover, .search-results a:focus {
  background: rgba(94,42,41,0.04);
  padding-left: 12px;
  outline: none;
}
.search-results strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
}
.search-results__kicker {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  opacity: 0.7;
}
.search-results__empty {
  padding: 24px 4px;
  text-align: center;
  color: var(--ink);
  opacity: 0.6;
  font-style: italic;
}
.search-suggest a {
  padding: 8px 16px;
  border: 1px solid rgba(94,42,41,0.25);
  border-radius: 999px;
  font-size: 14px;
  color: var(--brand);
  transition: all 0.2s ease;
}
.search-suggest a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  height: clamp(560px, 86vh, 920px);
  overflow: hidden;
  /* Fallback shown before the poster/video paints. Was #361110 (oxblood) which
     flashed as a "red box" on cold refresh; use a dark blue-gray sampled from
     the hero photo's upper third so the pre-paint frame blends with the image
     and keeps white hero text legible. */
  background: #33454f;
}
.hero__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  background-image: url("assets/hero-ashram.jpg");
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: scale(1.04);
  pointer-events: none;
}
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(12,12,12,0) 100%);
}
.hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px 80px;
  color: #fff;
}
.hero__kicker {
  /* Sub-heading label per viewport.png */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  color: var(--bg);
  margin-bottom: 32px;
  font-family: var(--sans);
}
.hero__title {
  /* Hero Heading / H1 per viewport.png */
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: 0;
  margin: 0;
  color: var(--bg);
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
  color: rgba(250,250,250,0.95);
}
.hero__scroll span {
  font-size: 16px;
  letter-spacing: 0.15em;
  font-weight: 500;
  color: var(--bg);
}
.hero__scroll-line {
  width: 1px; height: 64px;
  background: rgba(250,250,250,0.4);
  overflow: hidden;
  position: relative;
}
.hero__scroll-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: top;
  animation: scrollHint 2.4s var(--ease-out) infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================
   Section scaffolding
   ============================================ */
.section {
  position: relative;
  /* Was clamp(64px, 8vw, 128px) — too tall at <1920 per Anita Loom
     2026-05-27. Now scales with --ds. */
  padding: var(--sp-section-y) 0;
}
.section--cream { background: rgba(240,234,222,0.5); } /* QC r46 */
.container {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-head { display: flex; flex-direction: column; gap: var(--sp-stack-sm); max-width: 720px; }
.section-head .eyebrow { color: var(--ink); }

/* ============================================
   The Inspiration
   ============================================ */
.inspiration {
  padding: 0;
}
.inspiration__card {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  border-radius: 0;
  overflow: hidden;
  /* Aspect 2:1 is a compromise between Figma's compact 2.4 (where Bapa got too
     cropped) and image's 1.78 (where the section was too tall). At 1920 viewport
     section is 960px tall — image overflows by only ~120px which crops just the
     lower edge of the robe (matching Figma's intent of partial-bottom). The
     min-height 820 ensures the body content always fits with the new larger text. */
  aspect-ratio: 2 / 1;
  min-height: 820px;
  /* Warmer cream-to-peach gradient (was cool gray-to-cream) to match Figma tone. */
  background: linear-gradient(155deg, #efe1cf, #f3d9c4);
  isolation: isolate;
}
.inspiration__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Vertically center so both Shrimad's head and Bapa's body sit balanced in
     the frame, instead of top-anchoring which dropped Bapa's head too low. */
  object-fit: cover;
  object-position: center center;
  background-image: url("assets/inspiration-still.jpg");
  background-size: cover;
  background-position: center center;
  z-index: 0;
  pointer-events: none;
}
.inspiration__veil {
  position: absolute; inset: 0;
  /* Warm peach overlay sits ABOVE the video (z-index 1) and BELOW the body
     content (z-index 2). soft-light blends with the cool source so the section
     reads warmer overall — matches Figma's peach/cream tonal range. */
  background: linear-gradient(155deg, rgba(245,210,175,0.45) 0%, rgba(248,225,200,0.30) 50%, rgba(250,235,215,0.15) 100%);
  z-index: 1;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.inspiration__body {
  /* Vertically center the body content in the now-taller (16:9) card. */
  position: relative;
  z-index: 2;
  padding: clamp(48px, 6vw, 100px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-content: center;
  /* Wider column to match the larger container at wide viewports. */
  max-width: 720px;
  min-height: 100%;
}
.inspiration__body .eyebrow {
  margin-bottom: 4px;
  font-size: clamp(14px, 1vw, 18px);
  letter-spacing: 0.18em;
}
.inspiration__body h2 {
  margin-bottom: 6px;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1.1;
}

/* About Our Guides button — compact inline pill (NOT block).
   width: fit-content + justify-self: start so it hugs the content rather than
   stretching to fill the grid column. */
.inspiration__body .btn--filled {
  display: inline-flex;
  width: fit-content;
  justify-self: start;
  height: clamp(48px, 3.4vw, 56px);
  padding: 0 clamp(24px, 1.8vw, 30px);
  font-size: clamp(13px, 0.95vw, 15px);
}
.inspiration__body h2 { color: var(--brand); }
.inspiration__quote {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
  padding: clamp(20px, 1.8vw, 28px) clamp(24px, 2vw, 32px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  letter-spacing: -0.2px;
  color: #282828;
}
.inspiration__quote strong { font-weight: 600; color: #282828; }

@media (min-width: 768px) {
  .inspiration__card { min-height: 820px; }
  .inspiration__body { padding-top: 88px; }
}

/* ============================================
   The Vision
   ============================================ */
.vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) {
  .vision-grid { grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; }
}

.pillars {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 32px;
}
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.pillar { display: flex; flex-direction: column; gap: 0; padding-top: 16px; position: relative; }
.pillar__rule {
  width: 48px; height: 4px;
  background: rgba(190,168,132,0.5);
  margin-bottom: 32px;
}
.pillar h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -0.17px;
  color: var(--ink);
  margin: 0 0 8px;
}
.pillar p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 22.4px;
  letter-spacing: -0.01px;
  color: var(--ink-70);
}

/* ============================================
   Full-bleed image break
   ============================================ */
.fullbleed-image {
  display: block;
  width: 100%;
  height: clamp(320px, 46vw, 720px);
  object-fit: cover;
  object-position: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.fullbleed-image--lake { background-image: url("assets/vision-lake.jpg"); }

/* ============================================
   The Practice — Activity carousel
   ============================================ */
.practice-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
  margin-bottom: 60px;
}
@media (min-width: 900px) {
  .practice-head { grid-template-columns: 1fr auto; }
}

.carousel {
  position: relative;
  overflow: hidden;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.carousel__track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
  touch-action: pan-y; /* QC r14: let horizontal finger-swipe drag the carousel (vertical still scrolls the page) */
}
.carousel__controls {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.activity-card {
  flex: 0 0 calc((100% - 24px) / 1);
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) { .activity-card { flex-basis: calc((100% - 24px) / 2); } }
@media (min-width: 900px) { .activity-card { flex-basis: calc((100% - 48px) / 3); } }
@media (min-width: 1200px) { .activity-card { flex-basis: calc((100% - 72px) / 4); } }

.activity-card__image {
  aspect-ratio: 5 / 4;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s var(--ease-out);
}
.activity-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.activity-card:hover .activity-card__image { transform: scale(1.06); }
.activity-card__body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; }
.activity-card__body h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.17px;
  color: var(--accent);
}
.activity-card__body p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.234px;
  color: var(--ink);
}
.activity-card__link {
  margin-top: auto; /* QC r49/r13: align Learn More to card bottom */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  color: var(--accent);
  transition: gap 0.2s ease;
}
.activity-card__link:hover { gap: 12px; }
.activity-card__link svg { width: 14px; height: 14px; }

/* ============================================
   The Programs — Event carousel (centered featured)
   ============================================ */
.programs { background: var(--cream-tint); padding: clamp(64px, 8vw, 128px) 0; }
.programs-head { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; }
@media (min-width: 900px) { .programs-head { grid-template-columns: 1fr auto; } }

.event-stage {
  margin-top: 64px;
  position: relative;
  overflow: hidden;
}
.event-stage__viewport {
  display: flex;
  gap: 32px;
  transition: transform 0.6s var(--ease-out);
  touch-action: pan-y; /* QC r14: finger-swipe drags the events carousel */
}

.event-card {
  flex: 0 0 min(1080px, 86%);
  background: rgb(249,246,241);
  border: 1px solid rgba(166,124,82,0.2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 540px;
  opacity: 0.45;
  transform: scale(0.94);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
@media (min-width: 800px) { .event-card { grid-template-columns: 1fr 1.15fr; } }

.event-card.is-active { opacity: 1; transform: scale(1); }

.event-card__image {
  background-size: cover;
  background-position: center;
  min-height: 280px;
}
.event-card__body {
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}
.event-card__tags { display: flex; gap: 10px; flex-wrap: wrap; }
.event-card__tag {
  padding: 7px 22px;
  border: 0.75px solid var(--brand-soft);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--brand);
}
.event-card__tag--featured { background: var(--brand); color: #fff; border-color: var(--brand); }

.event-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: 0.086px;
  color: var(--ink);
}
.event-card__lead { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 25.5px; letter-spacing: -0.234px; color: var(--ink-70); max-width: 44ch; }
.event-card__meta { display: grid; grid-template-columns: 64px 1fr; row-gap: 12px; column-gap: 16px; }
.event-card__meta dt { font-family: var(--sans); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0.6px; color: var(--ink-70); margin: 0; text-transform: uppercase; }
.event-card__meta dd { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.15px; color: var(--ink); }

.event-card__cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 12px 26px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand);
  letter-spacing: 0.02em;
  transition: all 0.3s var(--ease-out);
}
.event-card__cta:hover { background: var(--brand); color: #fff; }

.event-stage__nav {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.event-stage__dots { display: flex; gap: 10px; padding: 0 10px; }
.event-stage__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(94,42,41,0.25);
  transition: all 0.3s ease;
}
.event-stage__dot.is-active { background: var(--brand); width: 22px; border-radius: 4px; }

/* ============================================
   Quote / golden break
   ============================================ */
.quote-break {
  position: relative;
  background: url("assets/quote-bg.jpg") center / cover no-repeat;
  padding: clamp(80px, 12vw, 180px) 24px;
  text-align: center;
  color: var(--accent-strong);
  overflow: hidden;
}
.quote-break::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,238,221,0.6) 0%, rgba(247,238,221,0.2) 100%);
}
.quote-break__inner { position: relative; max-width: 920px; margin: 0 auto; }
.quote-break blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 60px;
  color: var(--accent);
  letter-spacing: 0;
  text-align: center;
}
.quote-break cite {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 33.9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}

/* ============================================
   The Impact
   ============================================ */
.impact {
  padding: clamp(80px, 9vw, 140px) 0;
  background: #fff;
}
.impact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .impact-grid { grid-template-columns: 1fr 1.25fr; gap: 80px; }
}

.impact__copy { display: flex; flex-direction: column; gap: 24px; max-width: 520px; }
.impact__lead { font-family: var(--sans); font-weight: 400; font-size: clamp(16px, 1.3vw, 20px); line-height: 38px; letter-spacing: -0.31px; color: var(--ink); }
.impact__lead strong { color: var(--ink); font-weight: 600; }

.impact-list { list-style: none; margin: 24px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.impact-list li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -0.17px;
  color: var(--ink);
  cursor: default;
}
.impact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 48px;
  background: rgba(190,168,132,0.5);
  transition: background 0.3s ease, height 0.3s ease;
}
.impact-list li:hover::before { background: var(--brand); height: 60px; }

.impact__image {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: url("assets/impact-service.jpg") center / cover no-repeat,
              linear-gradient(rgba(166,148,122,0), rgba(166,148,122,0.4));
  box-shadow: 0 30px 80px -30px rgba(94,42,41,0.35);
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  /* Figma 4148:4000: 1920×724 bar #5e2a29. Headline at relative y=97 from
     bar top. Columns row at relative y=219. Bottom row at relative y=562.
     Scales proportionally below 1920 via min(Xpx, calc(X / 1920 * 100vw)). */
  background: var(--brand);
  color: #fafafa;
  padding: min(97px, calc(97 / 1920 * 100vw)) 0 min(82px, calc(82 / 1920 * 100vw));
}
.site-footer__brand {
  text-align: center;
  /* Figma: brand y=11131 (97 from bar top), col header y=11252.67 → 70px gap from brand bottom */
  margin-bottom: min(70px, calc(70 / 1920 * 100vw));
}
.site-footer__brand h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  /* Figma 4148:4003: STIX Two Text Regular 40px, tracking 4.8px, uppercase */
  font-size: min(40px, calc(40 / 1920 * 100vw));
  line-height: 1.292;
  letter-spacing: min(4.8px, calc(4.8 / 1920 * 100vw));
  text-transform: uppercase;
  color: var(--bg);
}
.footer-grid {
  /* Figma columns at x=222/548/932/1195/1502, all left-aligned, 125px
     gaps between, content widths vary. Use flex with min content. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(48px, calc(48 / 1920 * 100vw)) min(24px, calc(24 / 1920 * 100vw));
  /* Figma: links section ends y≈11451, bottom row y=11595 → ~112px gap below grid (plus ~32 from footer-bottom border-top padding = 144 total) */
  margin-bottom: min(112px, calc(112 / 1920 * 100vw));
  padding: 0 min(222px, calc(222 / 1920 * 100vw)) 0 min(222px, calc(222 / 1920 * 100vw));
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) {
  .footer-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: min(125px, calc(125 / 1920 * 100vw));
    align-items: flex-start;
    justify-content: center; /* QC: center the footer columns across all pages (was left-heavy) */
  }
  .footer-grid .footer-col {
    flex: 0 0 auto;
    min-width: 0;
  }
  .footer-grid .footer-col h5,
  .footer-grid .footer-col a { white-space: nowrap; }
}

.footer-col__head {
  /* Desktop: invisible button wrapping the h5 — chevron hidden. */
  background: none; border: 0; padding: 0;
  /* Figma: col header y=11252.67, links y=11301.67 → 25px gap header→links */
  margin: 0 0 min(25px, calc(25 / 1920 * 100vw));
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; color: var(--bg); cursor: default;
}
.footer-col h5 {
  margin: 0;
  font-family: var(--sans);
  /* Figma 4148:4018: Inter SemiBold 20px uppercase */
  font-size: min(20px, calc(20 / 1920 * 100vw));
  font-weight: 600;
  line-height: 1.46;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--bg);
}
.footer-col__chev {
  display: none;
  width: 14px; height: 14px;
  color: var(--bg);
  transition: transform 0.25s ease;
}
.footer-col__chev svg { width: 100%; height: 100%; }
.footer-col__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.footer-col a {
  font-family: var(--sans);
  /* Figma 4148:4019: Inter Regular 20px, line 50px, capitalize. */
  font-size: min(20px, calc(20 / 1920 * 100vw));
  font-weight: 400;
  line-height: min(50px, calc(50 / 1920 * 100vw));
  color: var(--bg);
  text-transform: capitalize;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-col a:hover { color: #fff; padding-left: 4px; }

/* Programs column has no children — the header itself is the link. Skips
   the underline-on-hover that .footer-col a has, since this IS the head. */
.footer-col__head--link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.footer-col__head--link h5 { transition: color 0.2s ease; }
.footer-col__head--link:hover h5 { color: #fff; }
.footer-col--single .footer-col__head--link { padding: 0; margin: 0 0 16px; }
@media (max-width: 768px) {
  .footer-col--single .footer-col__head--link {
    padding: 16px 0;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    width: 100%;
  }
}

/* Mobile accordion: each column collapses to just its header, with a
   chevron that rotates when open. Tap the header to toggle. */
@media (max-width: 768px) {
  .footer-col__head {
    cursor: pointer;
    padding: 16px 0;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-col__chev { display: block; }
  .footer-col[aria-expanded="true"] > .footer-col__head .footer-col__chev,
  .footer-col__head[aria-expanded="true"] .footer-col__chev { transform: rotate(180deg); }
  .footer-col__list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .footer-col__head[aria-expanded="true"] + .footer-col__list { max-height: 400px; padding: 8px 0 16px; }
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: min(32px, calc(32 / 1920 * 100vw));
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  font-family: var(--sans);
  /* Figma 4148:4005/4015: Inter Regular 16px. */
  font-size: min(16px, calc(16 / 1920 * 100vw));
  font-weight: 400;
  line-height: 1.46;
  color: var(--bg);
  /* Default (stacked, single column) is centered — used below 1280 incl. iPad
     landscape, where the 3-col row can't fit the address + legal + copy. */
  text-align: center;
}
/* The 3-column row needs ~1020px of content; only enable it at >=1280 (was
   >=900, which crushed the address into many lines on iPad landscape 1080-1279
   and narrow desktops). Trimmed the 222px side inset to 80px so the three
   columns actually fit at 1280-1680. */
@media (min-width: 1280px) {
  .footer-bottom {
    grid-template-columns: 1fr 1.5fr 0.8fr; /* QC r17/r33: Sitemap fits on one line */
    align-items: center;
    text-align: left;
    padding-left: min(80px, calc(80 / 1920 * 100vw));
    padding-right: min(80px, calc(80 / 1920 * 100vw));
  }
  .footer-bottom__copy { text-align: right; }
}
.footer-bottom__legal { display: flex; flex-wrap: nowrap; gap: 14px; justify-content: center; white-space: nowrap; }
@media (max-width: 600px) { .footer-bottom__legal { flex-wrap: wrap; gap: 8px 12px; } }
.footer-bottom__legal a { transition: color 0.2s; }
.footer-bottom__legal a:hover { color: #fff; }
.footer-bottom__legal span { opacity: 0.5; }
.footer-bottom__copy { text-align: center; }
/* QC Footer-r11: keep "© 2026 Shrimad Rajchandra Ashram, USA" on one line
   on desktop/iPad (the bottom row is a fixed 0.8fr grid track ≥900px and the
   copy was wrapping). Not applied below 900px where the row stacks/centers. */
@media (min-width: 1280px) { .footer-bottom__copy { white-space: nowrap; } }
@media (max-width: 899px) { .footer-bottom__copy { text-align: center; } }

.address {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  /* Figma 4148:4015: Inter Medium 16px, line 1.73, capitalize. */
  font-size: min(16px, calc(16 / 1920 * 100vw));
  line-height: 1.73;
  color: var(--bg);
  text-transform: capitalize;
}
/* Simple/placeholder pages (privacy, terms, accessibility, sitemap, contact,
   program calendar, 404) kept the 1440 default container, so their footer was
   narrower than the figma pages' (1680) and the address wrapped at wide desktop.
   Match the 1680 container so the footer behaves identically site-wide. */
body.placeholder-page,
body[data-page="contact-us"],
body[data-page="program-calendar"],
body[data-page="not-found"] {
  --container-max: 1680px;
}

/* ============================================
   Scroll-reveal
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }

/* ============================================
   INSPIRATION & FOUNDER page
   ============================================ */
.if-hero {
  /* Round 40 — architectural rewrite. Previous single-PNG approach (gradient
     bg + figures baked into one image at 60% alpha) caused unkillable bugs:
     pale strip from compound alpha, cropped figures, color step at wide
     viewports. Now: pure CSS gradient bg + figures-only PNG as a real <img>
     in a CSS Grid. Figures size independently of section aspect → no crop,
     no compound alpha, no aspect-ratio gymnastics. Title scales up to 88px
     on wide monitors (was 56) per modern editorial-site convention. */
  position: relative;
  width: 100%;
  /* Per Figma — light cream→tan gradient (60%-over-white precompute of
     #efeadf → #bea884). Figures PNG sits on top with true transparency. */
  background: linear-gradient(90deg, #f5f2ec 0%, #d8cbb5 100%);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, auto);
  align-items: center;
  gap: clamp(16px, 3vw, 56px);
  /* Round 42 — bottom padding = 0 so the section's lower edge sits at Bapa's
     robe. Horizontal padding uses `max(gutter, (100% - 1600) / 2)` so at
     viewports >1600 the content centers within a 1600-wide column and the
     bg gradient continues full-bleed past it — this stops the text-figures
     gap from blowing up on 2000+ monitors without touching narrower views. */
  padding: clamp(28px, 3.5vw, 64px) max(var(--gutter), calc((100% - 1600px) / 2)) 0;
}
.if-hero__figures {
  display: block;
  height: clamp(320px, 42vw, 720px);
  width: auto;
  object-fit: contain;
  justify-self: end;
  /* Anchor figures to the BOTTOM of the row so they touch the section's bottom
     edge (section has padding-bottom: 0). Text in the other column stays
     vertically centered via the grid's align-items: center default. */
  align-self: end;
  /* Pull slightly past the right edge so the composition reads full-bleed
     (Figma group extends ~7% past the section). */
  margin-right: clamp(-32px, -1.5vw, -4px);
  pointer-events: none;
  user-select: none;
}
.if-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 100%;
}
.if-hero__kicker {
  /* Sub-heading label per viewport.png (Figma node 4098:2610 — Inter 500) */
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #685432;
  margin: 0 0 16px;
  max-width: 24em;
}
.if-hero__title {
  /* Hero Heading / H1 per viewport.png (Figma node 4098:2609 — STIX Two Text
     with gradient clip). */
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: 0;
  font-style: normal;
  background: linear-gradient(90deg, #9d7d4a 0%, #6e431e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
/* Narrative — centered article block. Vertical spacing tightened (Round 35
   pass-2 feedback): top/bottom padding was 56-100px which left too much
   air between sections — pulled to 36-72px. Round 60: migrated to
   --sp-narrative-y so it scales with --ds across all desktop widths. */
.narrative {
  padding: var(--sp-narrative-y) 0;
}
.narrative__head {
  max-width: 720px;
  /* Round 60 — was margin 0 auto 32px + gap 18px. Now scales with --ds. */
  margin: 0 auto var(--sp-stack-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-stack-sm);
}
.narrative__head .eyebrow {
  /* Per Figma 4098:2659 — Inter 500 20px ls 0.06em UPPER color #272727
     (matches the homepage "THE INSPIRATION" eyebrow node 4098:2349). */
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 20px);
  letter-spacing: 0.06em;
  color: #272727;
}
.narrative__head h2 {
  /* Per Figma 4098:2660 — STIX Two Text 500 52px lh 58px color #5a381c (warm
     brown / --accent). Matches homepage "Guided by Wisdom" (4098:2350) which
     uses 52/58 — same scale per user's "use homepage font size" instruction. */
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.115;
  letter-spacing: 0;
  font-style: normal;
  color: #5a381c;
}
.narrative__body {
  max-width: 1145px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.9;
  color: var(--ink);
  text-wrap: pretty;
}
.narrative__body p { margin: 0; }

/* Inline narrative with kicker on left — used by Inner Awakening section.
   Per Figma node 4098:2697 the h2 is single-line at 52px in a 1032px column
   (was clamped to 16ch which forced 3-4-line wrap). textCase: TITLE means
   each word is capitalized via text-transform. */
.narrative--left .narrative__head { text-align: left; margin: 0 0 32px; max-width: 1050px; }
.narrative--left .narrative__head h2 {
  max-width: 1050px;
  text-transform: capitalize;
}
.narrative--left .narrative__body { margin-left: 0; max-width: 1050px; }

/* Two-column row: image + text. Padding tightened to 32-64 in line with
   narrative + section--stack — keeps the founder block (Legacy / Steady
   Force / Spearheading) reading as one cohesive group instead of three
   widely-spaced sections. */
.two-col {
  padding: clamp(32px, 4vw, 64px) 0;
}
.two-col__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
  width: min(100%, calc(var(--container-max) - 60px));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 900px) {
  .two-col__grid { grid-template-columns: 1.05fr 1fr; }
  .two-col--reverse .two-col__grid > :first-child { order: 2; }
}
.two-col__image {
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  aspect-ratio: 620 / 581;
  min-height: 320px;
}
.two-col__copy { display: flex; flex-direction: column; gap: 22px; }
.two-col__copy h3 {
  /* Per Figma nodes 4098:2674 (Legacy of Wisdom) / 4098:2683 (Steady Force) —
     Inter 500, 34px, ls 0.02em (0.68px), lh 1.45, color #4a3b2e (--brown),
     NOT italic. Sub-headings use SANS not serif — distinct from .narrative h2. */
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  font-style: normal;
  color: var(--brown);
}
.two-col__copy p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.9;
  color: var(--ink);
}

/* Single section with eyebrow + heading above an image block. Padding
   tightened (was 48-96, now 32-64) — Legacy of Wisdom / Spearheading sat
   in too much vertical air on 1250px viewports. */
.section--stack {
  padding: clamp(32px, 4vw, 64px) 0;
}
.section--stack .container {
  display: flex;
  flex-direction: column;
  /* Figma: paragraph -> image gap is substantial vertical air, while
     head -> paragraph is tight. Bumped well above the prior 24-44
     clamp; ~100px at 1920 reads as the right amount of breathing room
     before the photo lands. */
  gap: clamp(56px, 5.5vw, 100px);
}
.section--stack__head {
  max-width: 980px;
  /* head gap: tighten heading -> paragraph (was 16, Figma is closer to 8). */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section--stack__head h3 {
  /* Per Figma 4098:2687 (Spearheading a Global Movement) — Inter 500 34px,
     ls 0.02em (0.68px), lh 1.45, color #4a3b2e (--brown). Matches .two-col__copy h3. */
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  font-style: normal;
  color: var(--brown);
}
.section--stack__head p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.7;
  color: var(--ink);
  max-width: 800px;
}

/* Full-width hero band image — sized to occupy ~94vw at wide viewports so it
   reads as a generous full-width visual instead of being constrained inside the
   1440 container. Bottom margin pulled tight (was 56-110, now 24-56) to fix
   "weird white space before our inspiration" gap reported by user. */
.band-image {
  width: min(94vw, 1800px);
  margin: 0 auto clamp(24px, 3vw, 56px);
  padding: 0;
}
.band-image > div {
  width: 100%;
  aspect-ratio: 1619 / 913;
  /* Round 60 attempt 1 reverted: --band-image-h capped this to 437 at
     1440, which combined with aspect-ratio: 16/9 cropped the Mahavir
     temple base + Inner-Awakening figure (CLAUDE.md gotcha #4 — aspect-
     ratio + max-height fight, browser favours width and flattens the
     aspect, so cover-fit then crops from the wrong axis). Going back to
     the original height cap. */
  max-height: clamp(560px, 72vh, 1000px);
  border-radius: 10px;
  background-size: cover;
  /* center top: when the max-height clamp forces cover-cropping on smaller
     monitors (image's natural aspect-ratio height > max-height), the crop
     happens from the BOTTOM, not center — so subjects' heads (top of frame)
     are never cut. Fixes "Pujya Gurudevshri's forehead getting cropped on
     smaller laptops" reported by user. */
  background-position: center top;
}
/* Aspect-ratio modifiers — pick by content shape:
   --landscape ~16:9 for wide environment photos (temple, philosophy bg);
   --portrait ~1:1 for portrait-anchored figures (Shrimad relief,
   Bapa standing, Bapa back-view). Mobile overrides further below. */
.band-image--landscape > div { aspect-ratio: 16 / 9; }
.band-image--portrait > div {
  aspect-ratio: 1 / 1;
  /* Portrait images on smaller monitors hit the max-height cap harder than
     landscape ones (1:1 wants to be very tall at 94vw). Cap their height
     lower so they don't dominate the page, and keep top-anchor for heads. */
  max-height: clamp(520px, 70vh, 900px);
}

/* === Per-image overrides from Figma audit (audit_image_dims.py) === */
/* Mahavir relief — Figma 4148:1758: 1619 wide × 913 tall (aspect 1.773).
   Was capped at 1800 wide → 1800×1012, taller than Figma. */
.band-image--mahavir { width: min(94vw, 1619px); }
.band-image--mahavir > div { aspect-ratio: 1619 / 913; }

/* if-philosophy.jpg — Figma 4148:1801: 1619 × 846 (aspect 1.914). The
   site uses a 16/9 .band-image--landscape; this overrides for the
   specific image. */
.band-image:has(> div[style*="if-philosophy"]) { width: min(94vw, 1619px); }
.band-image:has(> div[style*="if-philosophy"]) > div { aspect-ratio: 1619 / 846; }

/* IF-page Figma-spec overrides moved to a single block at the END of
   this file (search "INSPIRATION & FOUNDER — 1:1 Figma rebuild"). */

/* Image-first variant of section--stack — used by Legacy / Spearheading where
   Figma has the photo above the heading. The default .section--stack has its
   container as a column-flex, so this is just an opt-in semantic marker for
   future targeting (CSS doesn't need to change order). */
.section--stack--image-first .container { /* placeholder hook */ }

/* When a band-image is a CHILD of section--stack, kill its own bottom margin
   — the parent container's `gap` already handles inter-child spacing and the
   section's padding-bottom handles the gap to the next section. Without this,
   the band-image's margin-bottom + section padding-bottom stack and create
   ~64-96px of visible white space below Spearheading's photo before the
   gold-quote band (user: "white space between that and the quote that
   should not be there"). */
.section--stack .container > .band-image { margin-bottom: 0; }

/* Gold quote band */
.gold-quote {
  position: relative;
  background: url("assets/quote-bg.jpg") center / cover no-repeat;
  /* IF image #20: vertical padding was 72-140px which made the gold band
     read taller than Figma. Figma node 4148:1770 is 542px tall for a
     ~190px text stack, ~85-90px top + 85-90px bottom. Tighten. */
  padding: clamp(40px, 4.5vw, 80px) 24px;
  text-align: center;
  overflow: hidden;
}
.gold-quote::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,238,221,0.45) 0%, rgba(247,238,221,0.15) 100%);
}
.gold-quote__inner {
  position: relative;
  /* IF image #9: Figma gold band runs edge-to-edge (1921 wide) and the
     inner text-column is 1086 wide. Old 980 cap made it look pinched. */
  max-width: 1147px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.gold-quote__primary {
  /* Per Figma node 4098:2665 — STIX Two Text 400, NOT italic. Was italic. */
  margin: 0;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.5;
  color: var(--brown);
}
.gold-quote__attribution {
  /* Per Figma node 4098:2670 — Inter SemiBold 600, 34px, ls 3.4 (=0.1em),
     lh 55 (=1.617), color #5E2A29 (--brand), textCase UPPER. */
  margin: 0;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 34px);
  line-height: 1.617;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Continue band */
.continue-band {
  /* Per user — bottom CTA bands across the site use cream #F0EADE (was
     --gold tan #BEA884). Text shifts to maroon since bg is light. */
  background: #F0EADE;
  /* IF image #14: the band sat too tall and the heading ran too large
     vs Figma. Reduced top/bottom padding, smaller heading + tighter
     button gap so the box reads as the compact CTA Figma shows. */
  padding: clamp(32px, 3.5vw, 56px) 24px;
  text-align: center;
}
.continue-band h3 {
  margin: 0 auto 22px;
  max-width: 980px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.25;
  color: var(--brand);
}
.continue-band__buttons {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}
.continue-band__buttons .btn {
  /* Outlined pill per Figma — border + transparent bg on the cream band. */
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  min-width: 244px;
  justify-content: center;
  outline: none;
}
.continue-band__buttons .btn:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.continue-band__buttons .btn:focus,
.continue-band__buttons .btn:focus-visible,
.continue-band__buttons .btn:hover { outline: none; box-shadow: none; }

/* Testimonial card (Dalai Lama) */
.testimonial {
  padding: clamp(72px, 9vw, 140px) 0 clamp(48px, 6vw, 96px);
}
.testimonial__inner {
  width: min(100%, calc(var(--container-max) - 60px));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.testimonial__head {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.testimonial__head h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  color: var(--accent);
}
.testimonial__head p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.6;
  color: var(--ink);
}
.testimonial__card {
  position: relative;
  background: var(--cream-bg);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 420px;
}
@media (min-width: 800px) {
  .testimonial__card { grid-template-columns: 1.1fr 1fr; }
}
.testimonial__card-image {
  background: url("assets/if-dalai-llama.jpg") center / cover no-repeat;
  min-height: 320px;
}
.testimonial__card-text {
  padding: clamp(36px, 4vw, 64px);
  display: flex;
  align-items: center;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.45;
  color: rgb(52,52,52);
}

/* ============================================
   INNER PAGES — Wisdom / Meditation / Yoga / Sound Healing / Courses
   ============================================ */

/* HERO — image background, title bottom-left.
   min-height is the FALLBACK for mobile / pages without a source-aspect
   override. Pages with a known hero source aspect (yoga, wisdom, courses,
   meditation, sound-healing) set `.inner-hero { aspect-ratio: ... }` to
   render the full image without cover-fit cropping on desktop. */
.inner-hero {
  position: relative;
  width: 100%;
  /* Round 60c: --hero-min-h re-derived from Anita's Global Movement
     1920 frame (702px hero) so the base value matches her design.
     At 1440 ds=0.78 → 547. Crop margin vs original 720: ~24% shorter,
     small enough that cover-fit on panoramic sources only loses 50-70
     px per side (vs the 220+ that Round 60-attempt-1 caused at 421). */
  min-height: var(--hero-min-h);
  overflow: hidden;
  background: #2c2c2c;
}
/* Round 60c — per-page hero policy.
   Anita Loom 2026-05-27: "Only the home page hero should take up the
   whole fold. Other ones are not." So every inner-page hero inherits
   --hero-min-h from :root (no aspect-ratio overrides, no 80vh). The
   --hero-min-h base of 702px is taken directly from Anita's Global
   Movement Subpage hero at 1920, so 1920 viewports get the original
   702 and smaller viewports get 702 * --ds (e.g. 547 at 1440).

   Per-page __image rules keep their transform: none + page-specific
   background-position so each photo's subject stays in frame after
   cover-fit cropping. */
body[data-page="courses"] .inner-hero,
body[data-page="wisdom"] .inner-hero,
body[data-page="explore-the-space"] .inner-hero,
body[data-page="our-story"] .inner-hero,
body[data-page="host-your-event"] .inner-hero,
body[data-page="global-movement"] .inner-hero,
body[data-page="getting-here"] .inner-hero,
body[data-page="meditation"] .inner-hero,
body[data-page="yoga"] .inner-hero {
  aspect-ratio: auto;
  min-height: var(--hero-min-h);
  max-height: none;
}
body[data-page="courses"] .inner-hero__inner,
body[data-page="wisdom"] .inner-hero__inner,
body[data-page="explore-the-space"] .inner-hero__inner,
body[data-page="our-story"] .inner-hero__inner,
body[data-page="host-your-event"] .inner-hero__inner,
body[data-page="global-movement"] .inner-hero__inner,
body[data-page="getting-here"] .inner-hero__inner,
body[data-page="meditation"] .inner-hero__inner,
body[data-page="yoga"] .inner-hero__inner {
  min-height: var(--hero-min-h);
  height: auto;
}
/* Defeat the default parallax transform: scale(1.04) on per-page heros
   that ship a known background-image. Without this the photo is
   slightly over-zoomed and cover-fit crops more than necessary. */
body[data-page="explore-the-space"] .inner-hero__image,
body[data-page="our-story"] .inner-hero__image,
body[data-page="host-your-event"] .inner-hero__image,
body[data-page="global-movement"] .inner-hero__image,
body[data-page="getting-here"] .inner-hero__image,
body[data-page="meditation"] .inner-hero__image {
  transform: none;
}
/* Per-page background-position anchors: cover-fit at the new shorter
   hero height crops vertically on tall-aspect sources. Each rule
   anchors the photo so its subject remains visible. */
body[data-page="explore-the-space"] .inner-hero__image { background-position: center; }
body[data-page="global-movement"] .inner-hero__image { background-position: center; }
.inner-hero__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  will-change: transform;
}
.inner-hero__veil {
  position: absolute; inset: 0;
  /* Lighter than before: was rgba(40,40,40,0.18)→rgba(20,20,20,0.65).
     Figma shows the hero photos almost veil-less — only a subtle bottom
     fade is needed so the white title text stays readable. */
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.40) 100%);
}
.inner-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(48px, 7vw, 88px);
  /* Round 60c — see .inner-hero comment above. */
  min-height: var(--hero-min-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
}
.inner-hero__kicker {
  /* Sub-heading label per viewport.png */
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fafafa;
  margin: 0;
}
.inner-hero__title {
  /* Hero Heading / H1 per viewport.png */
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: #fafafa;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.inner-hero__cta {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(48px, 7vw, 88px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 8px 0 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--brand);
  transition: all 0.25s var(--ease-out);
}
.inner-hero__cta:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}
.inner-hero__cta::after {
  content: "→";
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.inner-hero__cta:hover::after {
  background: #fff;
  color: var(--brand);
  transform: translateX(3px);
}
@media (max-width: 720px) {
  .inner-hero__cta { position: static; margin: 24px 0 0; align-self: flex-start; }
}

/* INTRO — image left + title/body right (on cream band) */
.intro-band {
  background: rgba(240,234,222,0.5);
  padding: clamp(64px, 7vw, 120px) 0;
}
.intro-band__grid {
  /* Per design feedback: section needs more white space on the LEFT than
     other bands. Bump the horizontal padding via a roomier inner clamp
     while keeping the same max-width as the global container. */
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 clamp(20px, 6vw, 120px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
}
@media (min-width: 900px) {
  .intro-band__grid { grid-template-columns: 1.1fr 1fr; }
}
.intro-band__media {
  position: relative;
  display: block;                           /* works as both <div> and <a> */
  aspect-ratio: 5 / 3;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 20px 60px -28px rgba(94,42,41,0.35);
  cursor: pointer;
}
/* Hover state for the video-link variant — subtle lift + brighten the play
   button so the user knows it goes somewhere. As <button> element it inherits
   default button styles which we strip here. */
.intro-band__media--video {
  /* Strip ALL <button> defaults + force block + 100% width so the base
     .intro-band__media aspect-ratio + background-image render. Without
     these the button collapses to the intrinsic size of its content
     (just the .play span) and the thumbnail never shows. */
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-appearance: none;
          appearance: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.intro-band__media--video:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 70px -28px rgba(94,42,41,0.45);
}
.intro-band__media--video:hover .play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }

/* Video modal — opens when Move Into Alignment play button is clicked. */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15,15,15,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 80px);
}
.video-modal[hidden] { display: none; }
.video-modal__close {
  position: absolute;
  top: clamp(16px, 2vw, 32px);
  right: clamp(16px, 2vw, 32px);
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.video-modal__close:hover { background: #fff; transform: scale(1.05); }
.video-modal__close svg { width: 22px; height: 22px; }
.video-modal__frame {
  width: min(100%, 1280px);
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.video-modal__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.intro-band__media .play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease-out);
}
.intro-band__media .play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent var(--brand);
}
.intro-band__media:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.intro-band__copy { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.intro-band__copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  color: var(--brand);
}
.intro-band__copy p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  color: var(--ink);
}
.intro-band__bullets {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.intro-band__bullets li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 36px;
  color: var(--ink);
}
.intro-band__bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 32px;
  background: var(--gold);
  transition: background 0.3s ease, height 0.3s ease;
}
.intro-band__bullets li:hover::before { background: var(--brand); height: 40px; }

/* Sat-sang style frosted definition card (Wisdom) */
.frosted-def {
  position: relative;
  margin: clamp(60px, 7vw, 100px) auto;
  width: min(100%, calc(var(--container-max) - 120px));
  padding: 0 var(--gutter);
}
.frosted-def__inner {
  position: relative;
  max-width: 950px;
  margin: 0 auto;
  border-radius: 8px;
  background:
    linear-gradient(rgba(248,248,248,0.35), rgba(248,248,248,0.5)),
    url("assets/wisdom-satsang.jpg") center / cover no-repeat;
  backdrop-filter: blur(0);
  padding: clamp(36px, 5vw, 70px);
  overflow: hidden;
}
.frosted-def__inner::before {
  content: "";
  position: absolute; inset: 0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(247,245,239,0.45);
}
.frosted-def__content { position: relative; max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.frosted-def__content h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 34px);
  color: var(--brand);
}
.frosted-def__content p {
  margin: 0;
  font-family: var(--sans);
  font-style: italic;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  color: var(--ink);
}
.frosted-def__content hr {
  margin: 20px 0 8px;
  border: 0;
  border-top: 1px solid rgba(70,71,75,0.45);
}

/* OFFERINGS — section title + 3 cream cards */
.offerings {
  /* Trim the BOTTOM padding so the Quote by Bapa band that follows reads
     as a continuous flow (design feedback: no gap between sections). */
  padding: clamp(64px, 8vw, 128px) 0 clamp(32px, 4vw, 56px);
  background: #fafafa;
}
.offerings__head {
  width: min(100%, var(--container-max));
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
}
@media (min-width: 900px) {
  .offerings__head { grid-template-columns: 1fr 1.1fr; gap: 60px; }
}
.offerings__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: var(--brand);
}
.offerings__intro {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  color: var(--ink);
  max-width: 56ch;
}
.offerings__grid {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 720px) {
  .offerings__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .offerings__grid { grid-template-columns: repeat(3, 1fr); }
}

.offer-card {
  position: relative;
  background: rgba(240,234,222,0.55);
  border-radius: 12px;
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 360px;
  transition: transform 0.3s var(--ease-out), background 0.3s ease, box-shadow 0.3s ease;
}
.offer-card:hover {
  transform: translateY(-4px);
  background: rgba(240,234,222,0.85);
  box-shadow: 0 20px 50px -25px rgba(94,42,41,0.3);
}
.offer-card__icon {
  width: 70px; height: 70px;
  margin-bottom: 16px;
  /* Use the PNG as an alpha mask so we can recolor the icon to brand maroon
     (Figma renders these icons in #5E2A29). The url comes from --icon-url
     set inline on each card so we don't need a class per icon. */
  background-color: var(--brand);
  background-image: none;
  -webkit-mask-image: var(--icon-url);
          mask-image: var(--icon-url);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.offer-card h3 {
  /* Per Figma 1164:1803 — Inter SemiBold 600, 24px, color #5E2A29 (brand). */
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.3;
  color: var(--brand);
}
.offer-card__kicker {
  /* Per Figma 1164:1804 — Inter Medium 500, 16px, sentence case, color
     #272727 (ink). Was 12px UPPERCASE brand-color — Figma is NOT uppercase
     and uses a sentence-case ink-color subheading instead. */
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #272727;
}
.offer-card p {
  /* Per Figma 1164:1806 — Inter Regular 400, 20px, color #272727. Was
     clamp(14-16) which read as caption-sized; Figma uses body-text scale. */
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.6;
  color: #272727;
}
.offer-card__tags {
  /* Per Figma 1164:1807 — Inter Regular 400, 20px, color #5E2A29 (brand).
     Was italic + accent color — Figma is NOT italic. */
  margin-top: auto;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.55;
  color: var(--brand);
}

/* TTC card — dark image with chips + accreditation (Yoga / Sound Healing) */
.ttc-card {
  position: relative;
  padding: clamp(56px, 7vw, 100px) 0;
  color: #fafafa;
  overflow: hidden;
}
.ttc-card__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.ttc-card__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.15) 100%);
}
.ttc-card__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 28px);
  max-width: 900px;
}
.ttc-card h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: #fafafa;
  max-width: 18ch;
}
.ttc-card__kicker {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.85);
}
.ttc-card p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: rgba(250,250,250,0.92);
  max-width: 68ch;
}
.ttc-card p em { font-style: italic; }
.ttc-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.ttc-card__chip {
  padding: 9px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  transition: background 0.2s ease;
}
.ttc-card__chip:hover { background: #fff; }
.ttc-card__creds {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ttc-card__creds h5 {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(250,250,250,0.85);
}
.ttc-card__badges {
  display: flex; gap: 16px;
  align-items: center;
}
.ttc-card__badge {
  width: 72px; height: 72px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--brand);
  border: 1px solid rgba(94,42,41,0.18);
}
.ttc-card__explore {
  align-self: flex-start;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 8px 0 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--brand);
  transition: transform 0.25s var(--ease-out);
}
.ttc-card__explore:hover { transform: translateY(-2px); }
.ttc-card__explore::after {
  content: "→";
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: transform 0.25s var(--ease-out);
}

/* Maroon quote band (Wisdom-style). Vertical padding trimmed so the band
   reads as flowing immediately out of the preceding offerings (per design
   feedback: "Quote by Bapa section needs to start immediately after
   previous section. On webpage, there's a gap."). */
.maroon-quote {
  position: relative;
  background: var(--brand);
  overflow: hidden;
  padding: clamp(56px, 6vw, 96px) 24px;
  text-align: center;
}
.maroon-quote__veil {
  position: absolute; inset: 0;
  background: url("assets/quote-leaves-bg.jpg") center / cover no-repeat;
  opacity: 0.18;
  mix-blend-mode: screen;
}
.maroon-quote__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.maroon-quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.25;
  color: #fafafa;
  text-wrap: balance;
}
.maroon-quote cite {
  display: block;
  margin-top: 32px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fafafa;
}

/* Inside the Experience — testimonial */
.testimonial-section {
  padding: clamp(64px, 8vw, 120px) 0;
  background: #fafafa;
}
.testimonial-section__title {
  text-align: center;
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--brand);
}
.testimonial-card-wrap {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.testimonial-card {
  background: rgba(240,234,222,0.5);
  border-radius: 12px;
  padding: clamp(48px, 7vw, 100px) clamp(24px, 5vw, 80px);
  /* Per design feedback: testimonial body is LEFT-aligned, not centered. */
  text-align: left;
}
.testimonial-card blockquote {
  margin: 0;
  max-width: 720px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.testimonial-card cite {
  display: block;
  margin-top: 32px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--brand);
}
.testimonial-nav {
  margin: 28px auto 0;
  display: flex; gap: 12px; justify-content: center;
}

/* Upcoming events — 3 wide cards. Top padding trimmed to keep the spacing
   from testimonial → upcoming consistent with the rest of the page (per
   design feedback: the gap before was "really long"). */
.upcoming {
  padding: clamp(32px, 4vw, 64px) 0 clamp(64px, 8vw, 120px);
  background: #fafafa;
}
.upcoming__title {
  text-align: center;
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--brand);
}
.upcoming__grid {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 720px) {
  .upcoming__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .upcoming__grid { grid-template-columns: repeat(3, 1fr); }
}
.upcoming-card {
  background: rgba(240,234,222,0.5);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.upcoming-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -25px rgba(94,42,41,0.3);
}
.upcoming-card__image {
  position: relative;
  aspect-ratio: 530 / 369;
  background-size: cover;
  background-position: center;
}
.upcoming-card__chips {
  position: absolute;
  left: 24px; bottom: 24px;
  display: flex; gap: 8px;
}
.upcoming-card__chip {
  padding: 6px 18px;
  border-radius: 999px;
  background: #fff;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.upcoming-card__body {
  padding: 28px 32px 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.upcoming-card__date {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.upcoming-card__date::before {
  content: "";
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 11h2v2H7v-2zm14-5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h1V2h2v2h8V2h2v2h1a2 2 0 0 1 2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 11h2v2H7v-2zm14-5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h1V2h2v2h8V2h2v2h1a2 2 0 0 1 2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z'/></svg>") center/contain no-repeat;
}
.upcoming-card__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35;
  color: var(--brand);
}
.upcoming-card p {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.upcoming-card__cta {
  margin-top: 16px;
  width: 100%;
  padding: 14px 0;
  border-radius: 24px;
  background: var(--brand);
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.upcoming-card__cta:hover { background: #4a201f; }

.upcoming__nav {
  margin: 36px auto 0;
  display: flex; gap: 12px; justify-content: center;
}

/* WELLNESS PILLAR LIST (Courses page) */
.wellness {
  position: relative;
  padding: clamp(72px, 8vw, 120px) 0;
  overflow: hidden;
  color: #fafafa;
}
.wellness__bg {
  position: absolute; inset: 0;
  /* Per Figma — wood-grain texture stays the dominant bg. Lighter, warmer wash
     than before so the amber tones of the texture come through and the section
     reads less "muddy brown" and more golden-amber. */
  background:
    linear-gradient(rgba(120,82,40,0.32), rgba(105,70,32,0.42)),
    url("assets/courses-wellness-bg.jpg") center / cover no-repeat;
}
.wellness__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
@media (min-width: 900px) {
  .wellness__inner { grid-template-columns: 1fr 1.2fr; }
}
.wellness__copy { display: flex; flex-direction: column; gap: 18px; }
.wellness__copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  color: #fafafa;
}
.wellness__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  color: rgba(255,255,255,0.92);
  max-width: 56ch;
}
.wellness__copy p em { font-style: italic; color: #fff; }

.pillar-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.pillar-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px 28px;
  border-radius: 12px;
  background: rgba(247,238,221,0.92);
  transition: transform 0.25s var(--ease-out), background 0.25s ease;
}
.pillar-row:hover { transform: translateX(4px); background: rgba(247,238,221,1); }
.pillar-row__icon {
  width: 56px; height: 56px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.pillar-row__copy h4 {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--brand);
}
.pillar-row__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  max-width: none;
}

/* VIDEO duo (wisdom satsangs) */
.video-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}
@media (min-width: 720px) {
  .video-duo { grid-template-columns: 1fr 1fr; }
}
.video-thumb {
  /* Reset default button chrome — .video-thumb can be <a> or <button>. */
  appearance: none;
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 690 / 388;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out);
}
.video-thumb:hover { transform: scale(1.02); }
.video-thumb::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 999px;
  background: rgba(157,55,55,0.92);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
  background-size: 24px;
  background-position: 56% center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease;
}
.video-thumb:hover::after { transform: translate(-50%, -50%) scale(1.08); }

/* Wisdom card stack — two stacked offering cards (icon + heading + body + media) */
.wisdom-stack {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.wisdom-stack__title {
  text-align: center;
  margin: 0 0 24px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--brand);
}
.wisdom-block {
  background: rgba(240,234,222,0.55);
  border-radius: 8px;
  padding: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
@media (min-width: 900px) {
  .wisdom-block { grid-template-columns: 1fr 1.05fr; align-items: center; }
  .wisdom-block--reverse > :first-child { order: 2; }
  /* `--stacked` keeps copy + media single-column on desktop too — Satsangs
     block: 2 video thumbs sit BELOW the title/body, not beside (per design). */
  .wisdom-block--stacked { grid-template-columns: 1fr; gap: clamp(28px, 3vw, 40px); }
  .wisdom-block--stacked .video-duo { grid-template-columns: 1fr 1fr; }
}
.wisdom-block__copy { display: flex; flex-direction: column; gap: 16px; }
.wisdom-block__copy .icon {
  width: 80px; height: 80px;
  margin-bottom: 4px;
  /* Use the PNG as an alpha mask so we can recolor the icon to the same
     #892D00 rust used on .offer-card__icon (meditation / sound-healing
     / yoga / courses offerings). The url comes from --icon-url set inline
     on each block. Raw icon PNG color (orange) bled through before. */
  background-color: #892D00;
  -webkit-mask-image: var(--icon-url);
          mask-image: var(--icon-url);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.wisdom-block__copy h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 24px);
  color: var(--brand);
}
.wisdom-block__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  color: var(--ink);
}

/* Press-to-begin meditation circle */
.meditation-breath {
  position: relative;
  background: var(--brand);
  color: #fff;
  padding: clamp(72px, 9vw, 130px) 0;
  overflow: hidden;
}
.meditation-breath__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .meditation-breath__inner { grid-template-columns: 1fr 1fr; }
}
.meditation-breath__copy { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.meditation-breath__copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  color: #fafafa;
}
.meditation-breath__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: rgba(250,250,250,0.85);
}
.breath-circle-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: min(440px, 100%);
  margin: 0 auto;
}
.breath-orbit {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
}
.breath-orbit::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 999px;
  background: #fff;
  animation: orbitDot 12s linear infinite;
  transform-origin: 50% calc(50% + 6px);
}
@keyframes orbitDot {
  to { transform: translateX(-50%) rotate(360deg); }
}
.breath-disk {
  width: 64%; height: 64%;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: breathPulse 8s ease-in-out infinite;
}
.breath-disk__btn {
  width: 56%; height: 56%;
  border-radius: 999px;
  background: #fdfbf3;
  color: var(--brand);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.breath-disk__btn:hover { transform: scale(1.05); }
@keyframes breathPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* Sound healing intro section uses ttc-card pattern but variant */

/* Page top spacing fix */
.inner-page main { padding-bottom: 0; }

/* ============================================
   MOBILE FINE-TUNING (≤700px)
   Aligns to the dedicated mobile frames in Figma
   ============================================ */
@media (max-width: 700px) {
  :root { --nav-h: 64px; --announce-h: auto; }

  /* Announcement collapses to single column with a tighter promo strip */
  .announce {
    grid-template-columns: 1fr;
    height: auto;
  }
  .announce__promo {
    padding: 10px 16px;
    flex-direction: column;
    gap: 10px;
  }
  .announce__promo p { font-size: 13px; text-align: center; }
  .announce__links { display: none; }

  .primary-nav { padding: 0 16px; height: 64px; }
  .brand-logo { height: 44px; }
  .nav-search svg { width: 16px; height: 16px; }
  .nav-hamburger { padding: 8px; }

  /* Hero — narrower and bottom-aligned. Font sizes inherit from
     :root --fs-h1/--fs-sub (viewport.png). */
  .inner-hero { min-height: 540px; }
  .inner-hero__inner { padding-bottom: 40px; gap: 8px; min-height: 540px; }
  .inner-hero__kicker { letter-spacing: 0.08em; }
  .inner-hero__cta {
    position: static;
    margin: 24px 0 0;
    align-self: flex-start;
  }

  /* Intro band single column */
  .intro-band { padding: 56px 0; }
  .intro-band__grid { gap: 32px; }
  .intro-band__copy h2 { font-size: 30px; }

  /* Offerings — single column, smaller cards */
  .offerings { padding: 56px 0; }
  .offerings__title { font-size: 30px; }
  .offer-card { padding: 28px 24px; min-height: 0; }
  .offer-card__icon { width: 56px; height: 56px; }

  /* TTC card stacks vertically */
  .ttc-card { padding: 56px 0; }
  .ttc-card h2 { font-size: 30px; }
  .ttc-card__creds { gap: 24px; }
  .ttc-card__badge { width: 56px; height: 56px; font-size: 11px; }

  /* Quotes */
  .maroon-quote { padding: 64px 20px; }
  .maroon-quote blockquote { font-size: 24px; line-height: 1.3; }

  /* Testimonial */
  .testimonial-section { padding: 56px 0; }
  .testimonial-section__title { font-size: 28px; }
  .testimonial-card { padding: 40px 24px; }
  .testimonial-card blockquote { font-size: 20px; line-height: 1.4; }

  /* Upcoming events */
  .upcoming { padding: 56px 0; }
  .upcoming__title { font-size: 28px; }

  /* Wellness pillars stack */
  .wellness { padding: 56px 0; }
  .wellness__copy h2 { font-size: 30px; }
  .pillar-row { padding: 16px 18px; gap: 14px; grid-template-columns: 44px 1fr; }
  .pillar-row__icon { width: 44px; height: 44px; }

  /* Frosted definition */
  .frosted-def { margin: 40px auto; padding: 0 16px; }
  .frosted-def__inner { padding: 28px 22px; }
  .frosted-def__content h3 { font-size: 24px; }

  /* Breath/meditation circle */
  .meditation-breath { padding: 56px 0; }
  .meditation-breath__inner { gap: 32px; }
  .meditation-breath__copy h2 { font-size: 28px; }
  .breath-circle-wrap { width: min(320px, 80%); }

  /* Wisdom stack tighten */
  .wisdom-block { padding: 32px 24px; gap: 28px; }
  .video-duo { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Footer */
  .site-footer { padding: 56px 0 24px; }
  .site-footer__brand h2 { font-size: 22px; letter-spacing: 0.25em; line-height: 1.4; }
  .site-footer__brand { margin-bottom: 48px; }
  .footer-grid { gap: 32px 16px; margin-bottom: 48px; }
  .footer-col h5 { font-size: 16px; margin-bottom: 12px; }
  .footer-col a { font-size: 16px; line-height: 36px; }
  .footer-bottom { font-size: 14px; gap: 14px; }
  .footer-bottom__copy { text-align: center; }
}

/* ============================================
   EXPLORE THE SPACE — page-specific
   ============================================ */

/* Hero variant: image with bottom-aligned title block (matches the rest) */

/* Step Into Sacred Grounds — left text, right image w/ inset card stack */
.space-grounds {
  background: rgba(240,234,222,0.5);
  padding: clamp(72px, 9vw, 130px) 0;
}
.space-grounds__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
@media (min-width: 1000px) {
  .space-grounds__inner { grid-template-columns: 1fr 1.55fr; }
}
.space-grounds__copy { display: flex; flex-direction: column; gap: 18px; max-width: 460px; }
.space-grounds__copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: var(--accent);
}
.space-grounds__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  color: var(--ink);
}
.space-grounds__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1385 / 889;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(94,42,41,0.35);
}

/* Spaces to Discover — large image right, list of feature pills left */
.spaces-discover {
  padding: clamp(72px, 9vw, 130px) 0;
  background: #fafafa;
}
.spaces-discover__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
}
.spaces-discover__head {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 600px;
}
.spaces-discover__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: var(--accent);
}
.spaces-discover__head p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  color: var(--ink);
}
.spaces-discover__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
@media (min-width: 1000px) {
  .spaces-discover__grid { grid-template-columns: 1fr 1.5fr; }
}

.feature-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.feature-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: center;
  padding: 18px 28px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  transition: transform 0.25s var(--ease-out), background 0.25s ease, color 0.25s ease;
}
.feature-row:hover {
  background: var(--accent);
  color: #fff;
  transform: translateX(4px);
}
.feature-row.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.feature-row__icon {
  width: 58px; height: 58px;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.feature-row__icon svg {
  width: 28px; height: 28px;
  stroke: currentColor; fill: none;
  stroke-width: 1.4;
}
.feature-row__copy h4 {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.45;
}
.feature-row__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}

.spaces-discover__media {
  position: relative;
  width: 100%;
  aspect-ratio: 795 / 540;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(94,42,41,0.35);
}

/* Your Time at the Ashram — big banner image w/ stat tiles overlay */
.time-section {
  padding: clamp(72px, 9vw, 130px) 0;
  background: rgba(240,234,222,0.5);
}
.time-section__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.time-section h2 {
  margin: 0 0 36px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--accent);
}
.time-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  aspect-ratio: 1722 / 880;
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 4vw, 56px);
}
.time-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20,20,20,0.6) 100%);
}
.time-banner__tiles {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .time-banner__tiles { grid-template-columns: repeat(3, 1fr); }
}
.time-tile {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.time-tile h5 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--brand);
}
.time-tile p {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* Ready to Visit? gold CTA strip */
.visit-cta {
  background: var(--gold);
  padding: clamp(56px, 7vw, 90px) 24px;
  text-align: center;
  color: #fff;
}
.visit-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.visit-cta h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  color: #fff;
}
.visit-cta p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.45;
  color: #fff;
  max-width: 640px;
  text-wrap: pretty;
}
.visit-cta .btn {
  background: #fafafa;
  color: var(--accent);
  border-color: #fafafa;
}
.visit-cta .btn:hover { background: var(--accent); color: #fafafa; }
.visit-cta .btn .btn-icon { background: var(--accent); color: #fff; }
.visit-cta .btn:hover .btn-icon { background: #fafafa; color: var(--accent); }

/* Closing quote band — wide leaves background */
.peace-quote {
  position: relative;
  padding: clamp(72px, 9vw, 130px) 24px;
  text-align: center;
  color: var(--accent);
  background: var(--cream-bg);
  overflow: hidden;
}
.peace-quote::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/quote-leaves-wide.jpg") center / cover no-repeat;
  opacity: 1; /* was 0.55 — Figma shows the gold leaves at full strength */
}
.peace-quote__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.4;
  color: var(--accent);
  text-wrap: balance;
}

@media (max-width: 700px) {
  .feature-row { padding: 14px 18px; grid-template-columns: 44px 1fr; gap: 14px; }
  .feature-row__icon { width: 44px; height: 44px; }
  .feature-row__icon svg { width: 22px; height: 22px; }
  .time-tile { padding: 16px 18px; }
}

/* Tiny screens — keep things tappable. Hero title size comes from
   :root --fs-h1 (32px at <880). */
@media (max-width: 380px) {
  .offerings__title { font-size: 26px; }
  .ttc-card h2 { font-size: 26px; }
  .upcoming-card__body { padding: 22px 20px 24px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .hero__image { transform: none !important; }
}

/* ===========================================================
   Nav dropdowns — desktop only (mobile uses hamburger drawer)
   =========================================================== */
.nav-links > li { position: relative; }

.nav-dropdown {
  /* Per Figma — white panel, soft shadow, items have light-gray hover bg
     (not maroon-tinted). Item text stays ink-colored, not brand. */
  position: absolute;
  top: calc(100% + 8px);
  left: -16px;
  min-width: 280px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.04);
  padding: 12px 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 10px 16px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 150ms ease;
  white-space: nowrap;
}
.nav-dropdown a::after { display: none !important; }
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
  outline: none;
}
.nav-links button[aria-expanded="true"] .chev { transform: rotate(180deg); }

@media (max-width: 1079px) {
  .nav-dropdown { display: none !important; }
}

/* ===========================================================
   MOBILE RESPONSIVE OVERHAUL (≤1079px / ≤768px / ≤480px)
   Layered on top of existing rules; only fires below 1080px so
   desktop appearance is untouched.
   =========================================================== */

/* ---------- TABLET & BELOW (≤1079px): collapse to single column ---------- */
@media (max-width: 1079px) {
  :root {
    --gutter: clamp(18px, 4vw, 40px);
  }

  /* Tighten section padding so two-column desktop spacing doesn't dwarf stacked content */
  .section { padding: clamp(48px, 7vw, 96px) 0; }

  /* Inspiration on tablet/mobile: convert from absolute-positioned overlay
     into a vertical stack matching Figma order:
       eyebrow → heading → video → quote 1 → quote 2 → button
     Trick: `display: contents` on .inspiration__body promotes its children
     (eyebrow, h2, quotes, button) into direct children of .inspiration__card.
     Card becomes a flex column with all 6 elements; each gets an explicit
     `order` to match the Figma sequence. */
  .inspiration { padding: 56px 0; }
  .inspiration__card {
    aspect-ratio: auto;
    min-height: 0;
    width: min(100%, calc(100% - 32px));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Cool bluish-gray like the Figma — NOT cream/peach. */
    background: #D8E0E3;
    border-radius: 20px;
    overflow: hidden;
    isolation: auto;
    padding: 28px 22px 32px;
  }
  .inspiration__veil { display: none; }
  .inspiration__body {
    /* CRITICAL: lets the body's children participate in the card's flex layout
       so we can re-order eyebrow / heading / quotes / button around the video. */
    display: contents;
  }
  .inspiration__card .eyebrow { order: 1; margin: 0; }
  .inspiration__card h2 {
    order: 2;
    font-size: clamp(28px, 5vw, 36px);
    line-height: 1.15;
    margin: 0;
    color: var(--brand);
  }
  .inspiration__image {
    order: 3;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    /* 4:5 portrait aspect crops the wide 16:9 source to a more square frame
       so Bapa (who sits in the right portion of the source) ends up CENTERED
       in the visible mobile crop. */
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    object-fit: cover;
    /* Show the right side of the source video (where Bapa lives). With the
       narrower 4:5 frame this puts Bapa near the center of the visible crop. */
    object-position: 78% center;
    background-position: 78% center;
    background-size: cover;
    z-index: 0;
    /* NO warm filter — keeping the cool lake tones per Figma. */
    filter: none;
  }
  .inspiration__quote {
    order: 4;
    padding: 18px 20px;
    line-height: 1.65;
    font-size: 15px;
    letter-spacing: 0;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
  }
  .inspiration__quote:nth-of-type(2) { order: 5; }
  .inspiration__card .btn--filled {
    order: 6;
    display: inline-flex;
    width: fit-content;
    align-self: flex-start;
    height: 48px;
    padding: 0 24px;
    font-size: 14px;
  }

  /* Vision — single-column with looser stacking */
  .vision-grid { gap: 40px; }

  /* Practice + Programs heads stack */
  .practice-head,
  .programs-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .practice-head .carousel-btn-group,
  .programs-head .carousel-btn-group { justify-self: flex-start; }

  /* Event carousel — featured card centered on tablet too */
  .event-card { min-height: 0; }
  .event-card__image { min-height: 240px; aspect-ratio: 16 / 10; }

  /* Impact image stops being square-massive */
  .impact { padding: 64px 0; }
  .impact-grid { gap: 40px; }
  .impact__image { max-width: 560px; margin: 0 auto; }

  /* Inner hero — CTA goes inline (already covered below for phone, add tablet) */
  .inner-hero { min-height: clamp(420px, 60vw, 560px); }
  .inner-hero__inner { min-height: clamp(420px, 60vw, 560px); padding-bottom: 56px; }

  /* If hero — Round 38 final pass. Under 1080 the horizontal layout cannot
     fit both the title and the figures without overlap (Figma allots only
     ~27% of section width for the text block, and at 1080 that's ~290px —
     too narrow for the title at any readable size). Collapse to the stacked
     layout (image on top, text below) — matches user's explicit direction
     to "switch it to that mobile view that's already there" once the design
     gets close to where it breaks. */
  /* Round 40 — stacked layout for the two-layer hero (figures <img> + CSS
     gradient bg). Grid collapses to single column; figures stack on top,
     text below, both centered. */
  .if-hero {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 36px);
    /* Padding-bottom 0 so the section ends at the text block's last line on
       mobile/tablet too. align-items reset to center for the stacked layout. */
    padding: 32px var(--gutter) 0;
    min-height: 0;
    text-align: center;
    align-items: center;
  }
  .if-hero__figures {
    justify-self: center;
    align-self: center;
    margin-right: 0;
    height: clamp(260px, 60vw, 480px);
    order: 1;
  }
  .if-hero__inner {
    order: 2;
    padding-bottom: 28px;
  }
  .if-hero__kicker {
    margin-left: auto;
    margin-right: auto;
  }

  /* Testimonial card — let it stack & image keep its aspect */
  .testimonial__card { grid-template-columns: 1fr; min-height: 0; }
  .testimonial__card-image { aspect-ratio: 16 / 10; min-height: 0; }

  /* Two-col rows stack */
  .two-col__grid { grid-template-columns: 1fr; gap: 32px; }
  .two-col--reverse .two-col__grid > :first-child { order: 0; }
  .two-col__image { min-height: 0; aspect-ratio: 5 / 4; }

  /* Intro band stacks */
  .intro-band__grid { grid-template-columns: 1fr; gap: 32px; }
  .intro-band__media { aspect-ratio: 16 / 10; }

  /* Wisdom stack */
  .wisdom-block { grid-template-columns: 1fr; gap: 28px; padding: 40px 28px; }
  .wisdom-block--reverse > :first-child { order: 0; }
  .wisdom-block__media,
  .wisdom-block__image { aspect-ratio: 16 / 10; min-height: 0; }

  /* Wellness pillars */
  .wellness__inner { grid-template-columns: 1fr; gap: 40px; }

  /* Meditation breath */
  .meditation-breath__inner { grid-template-columns: 1fr; gap: 40px; }
  .meditation-breath__copy { max-width: none; text-align: center; align-items: center; }

  /* Offerings — 2 columns instead of 3 */
  .offerings__head { grid-template-columns: 1fr; gap: 16px; }
  .offerings__grid { grid-template-columns: repeat(2, 1fr); }

  /* Upcoming events 2-col */
  .upcoming__grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer collapses to 3 then stays */
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .footer-bottom { grid-template-columns: 1fr; text-align: center; }
  .footer-bottom__legal { justify-content: center; }
  .footer-bottom__copy { text-align: center; }

  /* Space pages */
  .space-grounds__inner { grid-template-columns: 1fr; gap: 32px; }
  .spaces-discover__grid { grid-template-columns: 1fr; gap: 32px; }
  .space-grounds__media,
  .spaces-discover__media { aspect-ratio: 16 / 10; }
}

/* ---------- PHONE LANDSCAPE / SMALL TABLET (≤768px) ---------- */
@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --nav-h: 72px;
  }

  /* Belt-and-suspenders: kill any horizontal scroll the JS-driven
     carousels (Practice / Programs) might leak past the viewport edge
     on iPhone Pro Max (430w). overflow-x: clip on html+body prevents
     scrollbars; sections individually clip too (rules further down). */
  html, body { overflow-x: clip; max-width: 100vw; }

  /* Type scale handled by :root vars + media queries now; the legacy
     per-media overrides are removed so h1/h2/h3.display + .hero__title
     + .lead inherit the viewport.png scale directly. */

  .section { padding: 48px 0; }
  .container { padding: 0 20px; }

  /* Hero (home) */
  .hero { height: clamp(480px, 80vh, 720px); }
  .hero__inner { padding: 0 20px 64px; }
  .hero__scroll span { font-size: 13px; }
  .hero__scroll-line { height: 48px; }

  /* Inspiration card on phone */
  .inspiration__card { border-radius: 12px; }
  .inspiration__body { padding: 40px 22px 36px; gap: 20px; }
  .inspiration__body h2 { font-size: 28px; line-height: 1.2; }
  .inspiration__quote {
    padding: 20px 22px;
    font-size: 15px;
    line-height: 1.75;
    border-radius: 8px;
  }
  .inspiration__veil {
    background: linear-gradient(180deg, rgba(5,50,80,0.28) 0%, rgba(255,255,255,0) 70%);
  }

  /* Vision pillars — 2-up on phone (existing 2-col rule works) */
  .pillars { margin-top: 40px; gap: 32px 20px; }
  .pillar h4 { font-size: 20px; line-height: 1.4; }
  .pillar p { font-size: 16px; line-height: 1.55; }

  /* Full-bleed image break — capped height */
  .fullbleed-image { height: clamp(220px, 56vw, 360px); }

  /* Practice carousel — full-width card.
     overflow-x: clip on the carousel + section guards against the
     translateX track spilling card neighbors past the viewport edge
     on iPhone Pro Max (430w). */
  .section#practice { overflow-x: clip; }
  .carousel { overflow-x: clip; }
  .activity-card {
    /* Same reasoning as .event-card — must fit inside the carousel's
       inner padded area, not the raw viewport width. */
    flex-basis: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    min-width: 0;
  }
  .carousel__track { gap: 16px; }
  .activity-card__body { padding: 22px 22px 26px; min-width: 0; }
  .activity-card__body h3 { font-size: 22px; line-height: 1.3; max-width: 100%; }
  .activity-card__body p {
    font-size: 16px;
    line-height: 1.55;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Programs event carousel — full-bleed featured */
  .event-stage { margin-top: 40px; overflow: hidden; }
  .event-stage__viewport { gap: 16px; }
  /* Card sized to fit cleanly inside the viewport with explicit margin.
     The container around the stage has padding (var(--gutter) = 20px),
     so the visible stage area = viewport - 40. Card must be LESS than
     that or its right edge clips past the stage on iPhone Pro Max.
     Round 46: switched to calc(100vw - 60px) so the card is ~370px at
     430vw, giving 10px breathing room each side AFTER stage padding. */
  .event-card {
    flex-basis: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    min-width: 0;
  }
  .event-card__image { min-height: 200px; aspect-ratio: 4 / 3; }
  .event-card__body { padding: 24px 22px; gap: 18px; min-width: 0; max-width: 100%; }
  .event-card h3 { font-size: 22px; line-height: 1.3; max-width: 100%; }
  .event-card__lead {
    font-size: 15px;
    line-height: 1.7;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .event-card__meta { grid-template-columns: 80px 1fr; row-gap: 8px; max-width: 100%; }
  .event-card__meta dd { overflow-wrap: anywhere; }

  /* Programs head intro + section clip so nothing bleeds past viewport.
     Critical: .programs-head is display: grid with `1fr`, which defaults
     to minmax(auto, 1fr) — `auto` means min-content, and the grid column
     expands to fit the widest unbreakable line of the .lead inside.
     Force minmax(0, 1fr) so the column actually shrinks to container. */
  .section#programs,
  .programs { overflow-x: clip; }
  .programs-head {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .programs-head .section-head {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .programs-head h2,
  .programs-head .lead,
  .programs-head .section-head .lead {
    max-width: 100% !important;
    width: auto !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
    min-width: 0 !important;
  }

  /* Quote break */
  .quote-break { padding: 72px 20px; }
  .quote-break blockquote { font-size: clamp(22px, 5.5vw, 28px); line-height: 1.4; }
  .quote-break cite { font-size: 16px; margin-top: 20px; }

  /* Impact */
  .impact-list li { font-size: 19px; line-height: 1.45; padding: 8px 0 8px 20px; }
  .impact-list li::before { width: 3px; height: 36px; }
  .impact-list li:hover::before { height: 44px; }
  .impact__image { max-width: 100%; aspect-ratio: 4 / 3; }

  /* If-hero phone-specific overrides — section + statue layout lives in the
     ≤1079 block above; here we only need typography tweaks for narrow phones.
     Was previously duplicating `.if-hero { background: var(--cream-bg) }` and
     `.if-hero__statue { 185% auto }` which OVERRODE the 1079 block at narrow
     widths and re-introduced the Mahavir-cropped-off-left bug. */
  .if-hero__inner {
    padding: 16px 20px 40px;
  }
  .if-hero__kicker {
    /* Size inherits from :root --fs-sub. */
    letter-spacing: 0.16em;
    color: var(--brown);
    margin: 0 auto 14px;
    max-width: 28ch;
  }
  .if-hero__title {
    /* Size inherits from :root --fs-h1. Wrap behavior only here. */
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* Narrative — left-aligned on mobile (matches Figma Our Roots / Our
     Inspiration / Our Founder sections), serif gold-brown heading. */
  .narrative { padding: 48px 0; }
  .narrative__head {
    margin-bottom: 28px;
    gap: 14px;
    text-align: left;
    padding: 0 22px;
  }
  .narrative__head h2 {
    font-size: clamp(28px, 7vw, 38px);
    line-height: 1.1;
    text-align: left;
    overflow-wrap: anywhere;
    /* Reset the desktop narrative--left clamp (max-width: 16ch) so titles
       like "Inner Awakening and Compassionate Action" wrap to ~2 lines
       instead of being squeezed to 4 narrow lines on phone widths. */
    max-width: 100%;
  }
  .narrative--left .narrative__head h2 { max-width: 100%; }
  .narrative__body {
    gap: 18px;
    font-size: 16px;
    line-height: 1.75;
    padding: 0 22px;
    max-width: 100%;
  }
  .narrative--left .narrative__body { margin-left: 0; max-width: 100%; }

  /* Two-col — stacked on mobile, serif accent h3 */
  .two-col { padding: 40px 0; }
  .two-col__grid { padding: 0 22px; gap: 24px; }
  .two-col__copy { gap: 14px; }
  .two-col__copy h3 {
    font-size: clamp(26px, 6.4vw, 34px);
    line-height: 1.15;
  }
  .two-col__copy p { font-size: 16px; line-height: 1.75; }

  /* Section--stack — image-first sections (Legacy / Spearheading). Bottom
     padding pulled to 8px so the photo sits close to whatever section
     follows (gold quote, etc.). */
  .section--stack { padding: 28px 0 8px; }
  .section--stack .container { gap: 22px; padding: 0; }
  /* Mobile reverses the desktop "text → photo" order for Spearheading so
     the photo of Bapa appears ABOVE the heading — per user direction. The
     `section--stack--image-first` variant (Legacy of Wisdom) already has
     image-first in HTML so its `order` is left at default. */
  .section--stack:not(.section--stack--image-first) .container > .section--stack__head { order: 2; }
  .section--stack:not(.section--stack--image-first) .container > .band-image { order: 1; }
  .section--stack__head { padding: 0 22px; gap: 14px; max-width: 100%; }
  .section--stack__head h3 {
    font-size: clamp(26px, 6.4vw, 34px);
    line-height: 1.15;
  }
  .section--stack__head p { font-size: 16px; line-height: 1.75; }

  /* Testimonial (Dalai) */
  .testimonial { padding: 56px 0; }
  .testimonial__inner { padding: 0 20px; gap: 28px; }
  .testimonial__head h3 { font-size: 26px; line-height: 1.25; }
  .testimonial__head p { font-size: 16px; line-height: 1.6; }
  .testimonial__card-text { padding: 32px 24px; font-size: 18px; line-height: 1.5; }

  /* Continue band — see consolidated row rule further down in this same
     @media block. Padding + h3 size live here. */
  .continue-band { padding: 48px 20px; }
  .continue-band h3 { font-size: 22px; line-height: 1.3; }

  /* Inner hero overrides (smaller phone variant) */
  .inner-hero { min-height: 440px; }
  .inner-hero__inner { min-height: 440px; padding: 0 20px 40px; }
  .inner-hero__title { font-size: 36px; line-height: 1.1; }
  .inner-hero__cta { position: static; margin: 24px 0 0; align-self: flex-start; }

  /* Intro band */
  .intro-band { padding: 48px 0; }
  .intro-band__grid { padding: 0 20px; }
  .intro-band__copy h2 { font-size: 26px; line-height: 1.2; }
  .intro-band__copy p { font-size: 16px; line-height: 1.7; }
  .intro-band__bullets li { font-size: 16px; line-height: 1.6; padding: 6px 0 6px 20px; }
  .intro-band__bullets li::before { height: 28px; }

  /* Frosted def */
  .frosted-def { margin: 32px auto; padding: 0 16px; }
  .frosted-def__inner { padding: 28px 22px; border-radius: 8px; }
  .frosted-def__content h3 { font-size: 22px; line-height: 1.25; }
  .frosted-def__content p { font-size: 14px; line-height: 1.7; }

  /* Offerings */
  /* M6: tighten mobile padding on info pages — wisdom/meditation/yoga/
     sound-healing/courses were 12-18% taller than Figma. */
  .offerings { padding: 36px 0; }
  .offerings__head { padding: 0 20px; gap: 14px; margin-bottom: 24px; }
  .offerings__grid { gap: 14px; }
  .come-home { padding: 36px 0; }
  .experience { padding: 36px 0; }
  body[data-page="wisdom"] .section,
  body[data-page="meditation"] .section,
  body[data-page="yoga"] .section,
  body[data-page="sound-healing"] .section,
  body[data-page="courses"] .section { padding: 36px 0; }
  .offerings__title { font-size: 28px; line-height: 1.15; }
  .offerings__intro { font-size: 16px; line-height: 1.7; }
  .offerings__grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 20px;
  }
  .offer-card { padding: 24px 22px; min-height: 0; }
  .offer-card__icon { width: 56px; height: 56px; }
  .offer-card h3 { font-size: 20px; line-height: 1.3; }
  .offer-card p { font-size: 15px; line-height: 1.65; }

  /* TTC card */
  .ttc-card { padding: 48px 0; }
  .ttc-card__inner { padding: 0 20px; gap: 18px; }
  .ttc-card h2 { font-size: 28px; line-height: 1.15; max-width: 100%; }
  .ttc-card p { font-size: 15px; line-height: 1.65; }
  .ttc-card__chips { gap: 10px; }
  .ttc-card__chip { padding: 8px 16px; font-size: 13px; }
  .ttc-card__creds { gap: 24px; }
  .ttc-card__badges { gap: 12px; }
  .ttc-card__badge { width: 60px; height: 60px; font-size: 11px; }

  /* Maroon quote */
  .maroon-quote { padding: 64px 20px; }
  .maroon-quote blockquote { font-size: 24px; line-height: 1.3; }
  .maroon-quote cite { font-size: 13px; letter-spacing: 0.16em; margin-top: 24px; }

  /* Wisdom stack */
  .wisdom-stack { padding: 0 20px; gap: 24px; }
  .wisdom-stack__title { font-size: 28px; line-height: 1.15; }
  .wisdom-block { padding: 32px 24px; gap: 24px; }
  .wisdom-block__copy h3 { font-size: 20px; line-height: 1.3; }
  .wisdom-block__copy p { font-size: 16px; line-height: 1.7; }
  .wisdom-block__copy .icon { width: 64px; height: 64px; }

  /* Wellness */
  .wellness { padding: 48px 0; }
  .wellness__inner { padding: 0 20px; gap: 32px; }
  .wellness__copy h2 { font-size: 28px; line-height: 1.15; }
  .wellness__copy p { font-size: 15px; line-height: 1.7; }
  .pillar-row { padding: 16px 18px; gap: 14px; grid-template-columns: 44px 1fr; }
  .pillar-row__icon { width: 44px; height: 44px; }
  .pillar-row__copy h4 { font-size: 17px; }
  .pillar-row__copy p { font-size: 14px; line-height: 1.55; }

  /* Meditation breath */
  .meditation-breath { padding: 56px 0; }
  .meditation-breath__inner { padding: 0 20px; gap: 32px; }
  .meditation-breath__copy h2 { font-size: 28px; line-height: 1.15; }
  .meditation-breath__copy p { font-size: 15px; line-height: 1.7; }
  .breath-circle-wrap { width: min(320px, 78vw); }
  .breath-disk__btn { font-size: 13px; }

  /* Video duo on phone — stack */
  .video-duo { grid-template-columns: 1fr; gap: 14px; }

  /* Upcoming */
  .upcoming { padding: 48px 0; }
  .upcoming__title { font-size: 28px; line-height: 1.15; }
  .upcoming__grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 20px;
  }
  .upcoming-card__image { aspect-ratio: 16 / 10; }
  .upcoming-card__chips { left: 16px; bottom: 16px; }
  .upcoming-card__body { padding: 22px 22px 24px; gap: 10px; }
  .upcoming-card__title { font-size: 20px; line-height: 1.3; }
  .upcoming-card p { font-size: 14px; line-height: 1.55; }

  /* Testimonial section (Wisdom) */
  .testimonial-section { padding: 48px 0; }
  .testimonial-section__title { font-size: 26px; line-height: 1.2; margin-bottom: 32px; }
  .testimonial-card-wrap { padding: 0 20px; }
  .testimonial-card { padding: 36px 22px; border-radius: 10px; }
  .testimonial-card blockquote { font-size: 19px; line-height: 1.45; }
  .testimonial-card cite { font-size: 14px; margin-top: 24px; }

  /* Footer */
  .site-footer { padding: 48px 0 24px; }
  .site-footer__brand { margin-bottom: 40px; }
  .site-footer__brand h2 { font-size: 20px; letter-spacing: 0.24em; line-height: 1.4; }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 18px;
    margin-bottom: 40px;
  }
  .footer-col h5 { font-size: 15px; line-height: 1.4; margin-bottom: 10px; }
  .footer-col a { font-size: 15px; line-height: 32px; }
  .footer-bottom { font-size: 13px; gap: 12px; padding-top: 24px; }
  .address { font-size: 14px; line-height: 1.6; }

  /* Explore-the-space page */
  .space-grounds { padding: 48px 0; }
  .space-grounds__inner { padding: 0 20px; gap: 28px; }
  .space-grounds__copy h2 { font-size: 28px; line-height: 1.15; }
  .space-grounds__copy p { font-size: 16px; line-height: 1.7; }
  .spaces-discover { padding: 48px 0; }
  .spaces-discover__inner { padding: 0 20px; gap: 28px; }
  .spaces-discover__head h2 { font-size: 28px; line-height: 1.15; }
  .spaces-discover__head p { font-size: 16px; line-height: 1.7; }
  .feature-row { padding: 14px 16px; grid-template-columns: 44px 1fr; gap: 14px; }
  .feature-row__icon { width: 44px; height: 44px; }
  .feature-row__icon svg { width: 22px; height: 22px; }
  .feature-row__copy h4 { font-size: 17px; }
  .feature-row__copy p { font-size: 13px; line-height: 1.5; }
  .time-section { padding: 48px 0; }
  .time-section h2 { font-size: 28px; line-height: 1.15; margin-bottom: 24px; }
  .time-banner {
    aspect-ratio: auto;
    min-height: 380px;
    padding: 24px;
  }
  .time-banner__tiles { grid-template-columns: 1fr; gap: 12px; }
  .time-tile { padding: 16px 18px; }
  .time-tile h5 { font-size: 18px; }
  .time-tile p { font-size: 13px; line-height: 1.55; }
  .visit-cta { padding: 56px 20px; }
  .visit-cta h3 { font-size: 28px; line-height: 1.15; }
  .visit-cta p { font-size: 16px; line-height: 1.55; }
  .peace-quote { padding: 56px 20px; font-size: 22px; line-height: 1.45; }
  .peace-quote__inner { font-size: 22px; line-height: 1.45; }

  /* Gold quote band — italic serif primary, brand maroon caps attribution.
     The desktop markup uses hardcoded <br/> for poetic line breaks; on phone
     widths those forced breaks fight the natural wrap, so we disable them. */
  .gold-quote { padding: 48px 24px; }
  .gold-quote__inner { gap: 18px; max-width: 100%; }
  .gold-quote__primary { font-size: 17px; line-height: 1.55; }
  .gold-quote__primary br { display: none; }
  .gold-quote__attribution { font-size: 14px; letter-spacing: 0.12em; }

  /* Band image — FULL-BLEED on mobile (matches Figma edge-to-edge photos).
     Aspect chosen per modifier; default falls back to landscape.
     --landscape uses 4/3 on mobile (was 16/10) so wide environment photos
     like the Mahavir temple read as a generous, immersive band instead of a
     short strip — matches Figma m_1 where the temple takes ~half the screen. */
  .band-image,
  .band-image[style*="padding"] { padding: 0 !important; width: 100% !important; margin: 0 auto !important; }
  .band-image > div { aspect-ratio: 4 / 3; border-radius: 0; }
  .band-image--landscape > div { aspect-ratio: 4 / 3; }
  .band-image--portrait > div { aspect-ratio: 4 / 5; }
  /* Right-anchored portrait — for shots where the subject lives on the right
     half of the source frame (Spearheading: Bapa back-view + arms raised is
     center-right; default center-crop loses his torso). */
  .band-image--right > div { background-position: right top; }

  /* Continue band — side-by-side buttons (matches Figma m_8 layout) */
  .continue-band__buttons { flex-direction: row; gap: 16px; align-items: center; flex-wrap: nowrap; }
  .continue-band__buttons .btn { min-width: 0; width: auto; flex: 1 1 auto; }

  /* Buttons reasonable height */
  .btn { height: 52px; padding: 0 22px; font-size: 14px; }
}

/* ---------- SMALL PHONE (≤480px): final tightening ---------- */
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .container { padding: 0 16px; }

  h1.display { font-size: 30px; }
  h2.display { font-size: 26px; }

  .hero__title { font-size: 30px; }
  .hero__kicker { font-size: 12px; letter-spacing: 0.08em; }

  /* Inspiration */
  .inspiration { padding: 40px 0; }
  .inspiration__card { width: 100%; border-radius: 10px; }
  .inspiration__body { padding: 32px 18px 32px; gap: 18px; }
  .inspiration__body h2 { font-size: 24px; }
  .inspiration__quote { padding: 18px 18px; font-size: 14px; line-height: 1.7; }

  /* Section padding */
  .section { padding: 40px 0; }

  /* Pillars — single column on tiny screens */
  .pillars { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .pillar h4 { font-size: 19px; }

  /* Practice/programs heads tighter */
  .practice-head, .programs-head { margin-bottom: 28px; }

  /* Event card */
  .event-card { flex-basis: 92%; }
  .event-card__body { padding: 24px 20px; }
  .event-card h3 { font-size: 20px; }
  .event-card__meta { grid-template-columns: 1fr; row-gap: 6px; }
  .event-card__meta dt { padding-top: 8px; }

  /* Impact */
  .impact { padding: 48px 0; }
  .impact-list li { font-size: 17px; }

  /* Inner heroes */
  .inner-hero { min-height: 400px; }
  .inner-hero__inner { min-height: 400px; }
  .inner-hero__title { font-size: 32px; }
  .inner-hero__kicker { font-size: 12px; }

  /* If-hero — handled by the ≤768 mobile rebuild block above (composite on
     top, centered text below). Only title size shrinks slightly at iPhone SE. */
  .if-hero__title { font-size: 32px; }
  .if-hero__inner { padding: 32px 20px 48px; gap: 16px; }

  /* Offerings/upcoming cards */
  .offer-card { padding: 22px 18px; }
  .upcoming-card__body { padding: 20px 18px 22px; }

  /* TTC */
  .ttc-card h2 { font-size: 26px; }

  /* Maroon / gold quote */
  .maroon-quote { padding: 48px 18px; }
  .maroon-quote blockquote { font-size: 21px; }
  .gold-quote { padding: 48px 18px; }
  .gold-quote__primary { font-size: 17px; }

  /* Wisdom */
  .wisdom-block { padding: 26px 18px; }

  /* Wellness pillar rows */
  .pillar-row { padding: 14px 14px; }

  /* Footer */
  .site-footer { padding: 40px 0 20px; }
  .site-footer__brand h2 { font-size: 18px; letter-spacing: 0.2em; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-bottom: 32px; }
  .footer-col h5 { font-size: 14px; }
  .footer-col a { font-size: 14px; line-height: 28px; }

  /* Continue band buttons */
  .continue-band h3 { font-size: 20px; }

  /* Search overlay form */
  .search-form input { font-size: 22px; }

  /* Menu drawer headings smaller */
  .menu-drawer ul li a { font-size: 22px; padding: 12px 0; }
}


/* ===========================================================
   MOBILE FIXES — ROUND 2 (surgical pattern overrides)
   Addresses concrete failures in the first mobile pass:
   1. .inspiration__card — absolute photo overlay → vertical stack
   2. .pillars — restore 2×2 grid at small phone sizes (was forced to 1-col)
   3. .impact__copy — tighten vertical rhythm, ensure image renders
   4. .time-banner — photo visible on top, tiles at bottom (not overlaid)
   5. General rhythm tightening
   =========================================================== */

@media (max-width: 768px) {

  /* ---------- INSPIRATION CARD: restructure absolute overlay → vertical stack ----------
     Desktop pattern (image as absolute background, text overlaid) fails on portrait
     viewports because the wide photo can't crop sanely. Mobile pattern: photo block on
     top as its own visible element, then text card below on solid cream. ---------- */
  .inspiration__card {
    display: flex;
    flex-direction: column;
    /* Cool bluish-gray per Figma — NOT cream. */
    background: #D8E0E3;
    border-radius: 14px;
    overflow: hidden;
    isolation: auto;
    min-height: 0;
    width: 100%;
  }
  .inspiration__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    /* 4:5 portrait — crops wide source so Bapa (right of center in source)
       ends up CENTERED in the visible mobile frame. */
    aspect-ratio: 4 / 5;
    object-position: 78% center;
    background-position: 78% center;
    background-size: cover;
    z-index: 0;
  }
  .inspiration__veil { display: none; }
  .inspiration__body {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 32px 22px 36px;
    max-width: 100%;
    gap: 20px;
  }
  .inspiration__body h2 {
    color: #6B3322;
    font-size: clamp(26px, 6.8vw, 32px);
    line-height: 1.18;
    margin: 0;
  }
  .inspiration__quote {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    border: 1px solid rgba(40, 40, 40, 0.06);
    padding: 20px 22px;
    font-size: 15px;
    line-height: 1.7;
    border-radius: 10px;
    letter-spacing: 0;
    color: #282828;
  }
  .inspiration__quote strong { color: #282828; }

  /* ---------- PILLARS: keep 2×2 grid on phone (Mind / Body / Soul / Service) ---------- */
  .pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 18px;
    margin-top: 36px;
  }
  .pillar { padding-top: 12px; }
  .pillar__rule { margin-bottom: 18px; width: 36px; height: 3px; }
  .pillar h4 { font-size: 19px; line-height: 1.25; margin: 0 0 6px; }
  .pillar p { font-size: 14px; line-height: 1.5; color: rgba(40, 40, 40, 0.7); }

  /* ---------- IMPACT: tighten copy rhythm + ensure image renders ---------- */
  .impact__copy { display: flex; flex-direction: column; gap: 18px; }
  .impact__copy h2 { margin: 0; }
  .impact__copy .impact__lead { margin: 0; font-size: 16px; line-height: 1.7; }
  .impact-list { margin: 8px 0 0; }
  .impact__image {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 0;
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    margin-top: 8px;
  }

  /* ---------- TIME BANNER: photo as visible hero band, tiles anchored at bottom ----------
     Desktop pattern (photo + overlaid tiles) on phone: tiles eat the photo. Fix: stretch
     the banner taller so ~180-240px of photo shows above the tiles, which sit at the bottom
     with an opaque-ish cream backdrop so they read cleanly. ---------- */
  .time-banner {
    aspect-ratio: auto;
    min-height: 560px;
    padding: 0;
    background-size: cover;
    background-position: center top;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  .time-banner__tiles {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
    background: linear-gradient(to bottom, rgba(244, 236, 221, 0), rgba(244, 236, 221, 0.96) 24%);
  }
  .time-tile {
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 8px;
  }
  .time-tile h5 { font-size: 17px; margin: 0 0 4px; color: #6B3322; }
  .time-tile p { font-size: 13.5px; line-height: 1.5; margin: 0; color: rgba(40, 40, 40, 0.78); }

  /* ---------- GENERAL RHYTHM: tighten oversized vertical padding ---------- */
  .section { padding: 40px 0; }
  .inspiration { padding: 28px 0; }
  .impact { padding: 40px 0; }
}

@media (max-width: 480px) {
  /* Override the round-1 single-column pillars rule — keep them as 2×2 even at iPhone SE width */
  .pillars { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 14px; margin-top: 28px; }
  .pillar h4 { font-size: 18px; }
  .pillar p { font-size: 13px; line-height: 1.5; }

  .inspiration__image { aspect-ratio: 4 / 3; }
  .inspiration__body { padding: 28px 18px 32px; gap: 16px; }
  .inspiration__body h2 { font-size: 26px; }

  .time-banner { min-height: 520px; }
  .time-banner__tiles { padding: 14px; }
}

/* ===========================================================
   ROUND-3 FIXES (2026-05-15 from team feedback)
   1. Tablet-range (769–1199px) inspiration + programs/practice
      stacking — the mobile pass extended only to ≤1079, leaving
      a 1080–1199 band where desktop overlays still broke.
   2. Impact image: explicit min-height + always-visible (.reveal
      was leaving it at opacity 0 in some scroll sequences).
   3. Nav dropdowns: open on hover too, not click-only.
   =========================================================== */

/* ---------- TABLET BAND (769–1199px) — extend stack patterns ---------- */
@media (min-width: 769px) and (max-width: 1199px) {

  /* Inspiration: photo block on top, body card below on cream */
  .inspiration__card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    background: none;
    isolation: auto;
    overflow: hidden;
  }
  .inspiration__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }
  .inspiration__veil { display: none; }
  .inspiration__body {
    position: relative;
    z-index: 1;
    background: #F4ECDD;
    padding: 56px 48px 48px;
    max-width: 100%;
    gap: 24px;
  }
  .inspiration__quote {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    color: #282828;
    line-height: 1.7;
  }
  .inspiration__quote strong { color: #282828; }

  /* Practice + Programs heads: stack title above the carousel buttons
     so the headlines don't crash into the controls at this width */
  .practice-head,
  .programs-head {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
    align-items: flex-start;
  }
  .practice-head > :last-child,
  .programs-head > :last-child {
    justify-self: flex-start;
  }

  /* QC Footer-r12: in iPad portrait/landscape the footer used the 1920-based
     proportional scale, which collapses to ~7-9px here and reads as tiny.
     Pin legible fixed sizes (brand h2, column heads/links, bottom row). */
  .site-footer__brand h2 {
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: 2.4px;
  }
  .footer-col h5 { font-size: 16px; line-height: 1.4; }
  .footer-col__head { margin: 0 0 14px; }
  .footer-col a { font-size: 16px; line-height: 32px; }
  .footer-bottom { font-size: 15px; }
  .footer-bottom .address { font-size: 15px; }
}

/* ---------- IMPACT IMAGE — guarantee visibility at desktop widths ---------- */
@media (min-width: 900px) {
  .impact__image {
    min-height: 460px;
    width: 100%;
  }
  /* Force-show even if the IntersectionObserver doesn't fire (was leaving
     .reveal--delay-1 stuck at opacity 0 in some scroll sequences). */
  .impact__image.reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- NAV DROPDOWN — open on hover for desktop ---------- */
@media (hover: hover) and (min-width: 1080px) {
  .nav-links > li:hover > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links > li:hover > button[aria-haspopup="true"] .chev {
    transform: rotate(180deg);
  }
  /* Make the bridge between button and dropdown hoverable so the
     dropdown doesn't close when moving the cursor down to it. */
  .nav-links > li:hover > .nav-dropdown::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
  }
}


/* ===========================================================
   EXPLORE THE SPACE — Phase 2 components (Video B feedback)
   ===========================================================
   These replace .space-grounds / .spaces-discover / .time-section
   from the original layout. New classes:
     .sacred-grounds     — 4-card selector + photo swap
     .spaces-discover-v2 — aerial campus + 7 hotspot dots
     .peace-quote (extended) — 3 paragraphs + uppercase center line
     .ashram-time        — 5-phase animated timeline with sun-arc
   =========================================================== */

/* ===== Step Into Sacred Grounds ===== */
.sacred-grounds {
  background: rgba(240,234,222,0.5);
  padding: clamp(72px, 9vw, 130px) 0;
}
.sacred-grounds__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}
.sacred-grounds__copy { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.sacred-grounds__copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: var(--brand);
}
.sacred-grounds__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  color: var(--ink);
  max-width: 56ch;
}

/* Cards + photo as siblings in a 2-col grid below the heading. On
   desktop both columns stretch to the same height (Figma intent).
   On mobile, single column — cards then photo underneath. */
.sacred-grounds__stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
@media (min-width: 900px) {
  .sacred-grounds__stage { grid-template-columns: 1fr 1.6fr; align-items: stretch; }
}

.ground-cards {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.ground-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 10px;
  border: 1px solid rgba(94,42,41,0.25);
  color: var(--brand);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out), border-color 0.25s ease;
}
.ground-card:hover { background: rgba(94,42,41,0.06); }
.ground-card.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #FDFBF3;
}
.ground-card__icon {
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ground-card__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.ground-card__copy h4 {
  margin: 0 0 2px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
}
.ground-card__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.92;
}

.sacred-grounds__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 360px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 30px 80px -30px rgba(94,42,41,0.35);
  transition: background-image 0.6s var(--ease-out);
}

/* ===== Spaces to Discover v2 — aerial + hotspots ===== */
.spaces-discover-v2 {
  /* Top padding only — the aerial sits flush against the next section (peace
     quote) so there's no white horizontal gap between them. */
  padding: clamp(72px, 9vw, 130px) 0 0;
  background: #fafafa;
}
.spaces-discover-v2__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.spaces-discover-v2__head { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.spaces-discover-v2__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: var(--brand);
}
.spaces-discover-v2__head p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  color: var(--ink);
  max-width: 56ch;
}

/* Aerial photo is the full-width stage; the room-detail card is OVERLAID on
   top of it (absolute-positioned to the top-right corner) — NOT a sibling
   column. Matches Figma. */
.aerial-stage {
  position: relative;
  width: 100%;
}

.aerial-stage__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(94,42,41,0.35);
}

.hotspot {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 2px solid var(--brand);
  cursor: pointer;
  padding: 0;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.4);
  z-index: 2;
}
.hotspot:hover { transform: translate(-50%, -50%) scale(1.15); }
.hotspot.is-active {
  /* Exact yellow stroke color #F1BF18 pulled from Figma Component 82
     (active hotspot ellipse stroke). */
  background: #F1BF18;
  border-color: var(--brand);
  box-shadow: 0 0 0 6px rgba(241,191,24,0.40), 0 0 0 12px rgba(241,191,24,0.18);
  transform: translate(-50%, -50%) scale(1.15);
}

/* Detail-card container is absolutely anchored to the top-right corner of the
   aerial-stage. Cards stack inside via absolute so the active one shows.
   Sized to match Figma proportions — card is a substantial element, not a tooltip. */
.space-detail {
  position: absolute;
  top: clamp(28px, 4vw, 64px);
  right: clamp(28px, 4vw, 64px);
  width: clamp(340px, 28%, 460px);
  z-index: 3;
}
.space-detail__card {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 50px -16px rgba(0,0,0,0.30);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.space-detail__card.is-active { opacity: 1; pointer-events: auto; }

/* Photo dominates the card — top ~60%. Text block tight at the bottom. */
.space-detail__photo {
  width: 100%;
  aspect-ratio: 16 / 11;
  background-size: cover;
  background-position: center;
}
.space-detail__body {
  padding: 18px 22px 22px;
}
.space-detail__card h4 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  font-style: normal;
  color: var(--brand);
}
.space-detail__card p {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* Mobile carousel nav arrows — hidden on desktop, shown on <=700px */
.space-detail__nav { display: none; }
.space-arrow {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(94,42,41,0.15);
  background: #fff;
  color: var(--brand);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px -4px rgba(94,42,41,0.2);
}
.space-arrow:hover { background: #FBF7EE; }
.space-arrow svg { width: 18px; height: 18px; }

/* ===== Peace Quote — 3 paragraphs, uppercase center line ===== */
.peace-quote__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.5;
  color: var(--accent);
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}
.peace-quote__inner p { margin: 0; }
.peace-quote__lead { font-style: italic; }
.peace-quote__lead strong {
  font-weight: 500;
  color: var(--brand);
}
.peace-quote__center {
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
  font-size: clamp(24px, 2.8vw, 38px);
}

/* ===== Your Time at the Ashram — 5-phase animated timeline ===== */
.ashram-time {
  padding: clamp(72px, 9vw, 130px) 0 clamp(48px, 6vw, 96px);
  background: rgba(240,234,222,0.5);
}
.ashram-time__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ashram-time h2 {
  margin: 0 0 36px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--brand);
}

/* Photo fills the entire stage. Source assets are ~1.66–1.90 ratio so we use
   16:9 to keep the lady's full sitting pose visible without the tall 4:3
   crop the old rule produced. Less tall = closer to the Figma proportions. */
.ashram-time__stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  max-height: 720px;
  box-shadow: 0 30px 80px -30px rgba(94,42,41,0.35);
}
/* Two stacked photo layers crossfade between phases. Whichever has .is-front
   shows; the other is fully transparent and ready to receive the next bg-image. */
.ashram-time__photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #2c2620; /* dark fallback prevents white flash if image is slow */
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
}
.ashram-time__photo.is-front { opacity: 1; }

/* Cream card overlay on the right-middle of the photo. Title (italic serif)
   sits on top, smaller italic eyebrow below it, body next, arrows at the bottom. */
.time-card {
  position: absolute;
  right: clamp(20px, 3vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 28%, 380px);
  background: #FBF7EE;
  border-radius: 6px;
  padding: clamp(22px, 2.2vw, 30px) clamp(24px, 2.4vw, 32px);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.25);
  z-index: 2;
  transition: opacity 0.3s var(--ease-out);
}
.time-card.is-swapping { opacity: 0.4; }
.time-card__eyebrow {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #B8924A; /* amber/gold per Figma target */
}
.time-card__title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--brand);
  line-height: 1.15;
}
.time-card__body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.55;
  color: var(--ink);
}
/* Single forward-only CTA aligned to the bottom-right of the card. */
.time-card__nav {
  margin-top: clamp(18px, 1.8vw, 26px);
  display: flex;
  justify-content: flex-end;
}
.time-arrow {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(94,42,41,0.25);
  background: transparent;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.time-arrow:hover { background: rgba(94,42,41,0.06); border-color: var(--brand); }
.time-arrow svg { width: 16px; height: 16px; }

/* Mobile-only stacked cards: hidden on desktop. Mobile rules below show + style. */
.time-mstack { display: none; }

/* Bottom timeline strip overlaid on the photo. Per figma.png the line
   passes THROUGH the centers of the sun and moon icons (icons sit half
   above / half below the line). Sun + moon are absolutely positioned
   over the track so the line's y-coordinate runs through their centers. */
.time-strip {
  position: absolute;
  left: clamp(20px, 3vw, 48px);
  right: clamp(20px, 3vw, 48px);
  bottom: clamp(22px, 2.6vw, 36px);
  display: block;
  z-index: 1;
  pointer-events: none;
}
.time-strip__icon {
  position: absolute;
  display: block;
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  /* Center vertically on the LINE (which sits at y=89/90 of the SVG
     viewBox, rendered at 89/90 of the track height). */
  top: 98.9%;
  transform: translateY(-50%);
}
.time-strip__icon--sun { width: 30px; height: 30px; left: 0; }
.time-strip__icon--moon { width: 36px; height: 36px; right: 0; }
.time-strip__track {
  position: relative;
  /* Margin reserves horizontal space for the absolutely-positioned
     sun (30 wide + 16 gap) and moon (36 wide + 16 gap) icons. */
  margin: 0 52px 0 46px;
  /* Track is tall so the arc has room to peak; line baseline at
     y=89/90 renders near the bottom edge. */
  height: 70px;
}
/* Sun-arc line: a single bump peaking at the active dot's x position.
   Path d is updated by JS in setPhase(); CSS transitions d for smooth
   animation between states. */
.time-strip__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.time-strip__arc path { transition: d 0.55s var(--ease-out); }
.time-strip__dot {
  position: absolute;
  /* Dot sits on the baseline (y=56 of 60 = 93%). JS positions it
     along x via left%. */
  top: 93%;
  left: 8%;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: #F1BF18;
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(241,191,24,0.30), 0 4px 12px rgba(0,0,0,0.25);
  transform: translate(-50%, -50%);
  transition: left 0.55s var(--ease-out), top 0.55s var(--ease-out);
  z-index: 1;
}
.time-strip__label {
  position: absolute;
  /* bottom is set by JS to sit just above the arc apex. */
  bottom: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  transition: left 0.55s var(--ease-out), bottom 0.55s var(--ease-out);
}

/* ===== Visit CTA closing line ===== */
.visit-cta__closing {
  margin-top: clamp(20px, 2vw, 32px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.2vw, 20px);
  color: var(--brand);
  opacity: 0.85;
}

/* ===== Mobile tweaks for the new components ===== */
@media (max-width: 900px) {
  .sacred-grounds__media { aspect-ratio: 16 / 10; min-height: 280px; }
  .aerial-stage__image { aspect-ratio: 4 / 3; }
  /* Card narrower on smaller desktops so it doesn't crowd the photo. */
  .time-card { width: clamp(260px, 36%, 340px); right: clamp(16px, 2vw, 28px); }
}
@media (max-width: 700px) {
  .ground-card { padding: 14px 16px; grid-template-columns: 44px 1fr; gap: 14px; }
  .ground-card__icon { width: 40px; height: 40px; }
  .ground-card__icon svg { width: 18px; height: 18px; }
  .ground-card__copy h4 { font-size: 16px; }
  .ground-card__copy p { font-size: 12.5px; }

  .peace-quote__inner { font-size: 19px; }
  .peace-quote__center { font-size: 22px; }
}

/* Hide the old .space-grounds / .spaces-discover / .time-section if anything
   ever re-renders them. They're replaced by the new components above. */
.space-grounds, .spaces-discover, .time-section { display: none; }


/* ===========================================================
   INSPIRATION & FOUNDER — Phase 3 components (Video C feedback)
   =========================================================== */

/* Voices of Respect — testimonial carousel (replaces single static card) */
.testimonial-v2 {
  /* IF image #13: top gap between if-philosophy image and the
     "VOICES OF RESPECT" eyebrow was too tall. Tightened top padding
     (Figma sits the eyebrow close to the band image). */
  padding: clamp(24px, 3vw, 56px) 0 clamp(40px, 5vw, 80px);
}
.testimonial-v2__inner {
  width: min(100%, calc(var(--container-max) - 60px));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
/* LEFT-aligned heading per Figma reference. Eyebrow + h3 colors match the
   home-page section-head style (eyebrow #272727 ink, h3 #5A381C accent brown)
   so the voice of this section reads consistent with "The Inspiration" /
   "Our Practice" on home. */
.testimonial-v2__head {
  /* Was 900 — clipped "A Movement of Interfaith and International
     Harmony" into two lines. Widened so it fits as a single line at
     desktop while still wrapping naturally below ~1200. */
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial-v2__head .eyebrow {
  color: #272727;
  letter-spacing: 0.06em;
  font-size: clamp(15px, 1.2vw, 20px);
}
.testimonial-v2__head h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  /* User: "A Movement of Interfaith and International Harmony" needs
     to be on one line. The container head was capped at 900 which
     forced a wrap. Allow this heading to stretch out to fit. */
  max-width: none;
  text-wrap: balance;
  color: var(--accent);
}
.testimonial-v2__head p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.6;
  color: var(--ink);
}

.testimonial-v2__stage {
  position: relative;
  min-height: 420px;
  /* Stack slides on top of one another via grid 1/1 so they crossfade. */
  display: grid;
}
.testimonial-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--cream-bg);
  border-radius: 16px;
  overflow: hidden;
  min-height: 420px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}
.testimonial-slide.is-active { opacity: 1; pointer-events: auto; }
@media (min-width: 800px) {
  .testimonial-slide { grid-template-columns: 1.05fr 1fr; }
}
.testimonial-slide__image {
  background-size: cover;
  background-position: center;
  min-height: 320px;
}
/* Empty-side treatment for testimonials with no portrait (e.g. Honorable
   David John Clarke) — per Figma testimonial component variant. The left
   half is simply the same cream as the card background so it reads as
   intentional empty space, with the quote occupying the right column. */
.testimonial-slide__image--empty {
  background: var(--cream-bg);
}
.testimonial-slide__copy {
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.testimonial-slide__quote {
  /* Per Figma node 558:1140 — STIX Two Text Italic 400, 28px, lh 38 (=1.36),
     ls 0.56 (=0.02em), color #282828 (--ink). */
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.36;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.testimonial-slide__name {
  /* Per Figma node 558:1142 — Inter Medium 500, 22px, lh 34, ls 0.02em,
     color #4A3B2E (--brown). NOT underlined, NOT maroon (was both before). */
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--brown);
  text-decoration: none;
}
.testimonial-slide__role {
  /* Per Figma node 558:1143 — Inter Italic 400, 22px, lh 34, ls 0.02em,
     color #282828 (--ink). Was 14px non-italic. */
  margin: 0;
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 22px);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 1;
}

.testimonial-v2__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-top: 8px;
}
.testimonial-v2__indicator {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--brand);
}
.testimonial-v2__buttons { display: flex; gap: 10px; }
/* Reuse .time-arrow (defined for Explore timeline). Override sizing + colors
   for the light-bg testimonial context — smaller per user feedback. */
.testimonial-v2__buttons .time-arrow {
  width: 38px;
  height: 38px;
  border-color: rgba(94,42,41,0.35);
  background: transparent;
  color: var(--brand);
}
.testimonial-v2__buttons .time-arrow svg { width: 14px; height: 14px; }
.testimonial-v2__buttons .time-arrow:hover {
  background: var(--brand);
  color: #FDFBF3;
  border-color: var(--brand);
}

/* Mobile testimonial */
@media (max-width: 700px) {
  .testimonial-v2__stage, .testimonial-slide { min-height: 0; }
  .testimonial-slide__image { aspect-ratio: 4 / 3; min-height: 0; }
}


/* ===========================================================
   MEDITATION PAGE — Round 36 / 37 polish (Figma 1164:1746)
   ===========================================================
   User flagged: too much whitespace on Come Home / Offerings,
   maroon bg on the breath circle should be blurred nature, the
   Inside-the-Experience card felt cramped vs Figma, hero crop
   cut the canna flower, and every section had too much side
   gutter making content read narrow.
   =========================================================== */

/* Round 37 — wider content area + tighter side gutter so the
   meditation page actually fills the viewport like Figma's 1920
   reference (the rest of the site keeps the 1440 cap). */
body[data-page="meditation"] {
  --container-max: 1680px;
  --gutter: clamp(20px, 2.4vw, 56px);
}

/* Hero — fold-height per user direction ("hero should just take up the fold
   of the page, like how we did it on Explore the Space"). 80vh, clamped at
   the top so the hero never feels tiny on short laptops and never gets
   ridiculously tall on a 1440-tall monitor. No fixed aspect — let cover-fit
   crop the wide source image (4096x2731) to fill the section. */
body[data-page="meditation"] .inner-hero {
  aspect-ratio: auto;
  min-height: var(--hero-min-h);
  max-height: none;
}
body[data-page="meditation"] .inner-hero__inner {
  min-height: var(--hero-min-h);
  height: auto;
}
body[data-page="meditation"] .inner-hero__image {
  background-position: center;
}

/* Come Home — compact variant: tighter padding + drops the bullet/play
   chrome. Body now reads as one continuous paragraph (markup-side fix).
   Round 37: image is much larger (5/4 aspect ~portrait), heading +
   body bumped a tier, copy column widens to balance. */
.intro-band--compact { padding: clamp(56px, 6vw, 96px) 0; }
.intro-band--compact .intro-band__grid { gap: clamp(40px, 5vw, 88px); }
@media (min-width: 900px) {
  /* Image column gets MORE weight (1.25 vs 1) so the photo reads big. */
  .intro-band--compact .intro-band__grid { grid-template-columns: 1.25fr 1fr; }
}
.intro-band--compact .intro-band__copy { gap: 24px; max-width: 620px; }
.intro-band--compact .intro-band__copy h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.1;
}
.intro-band--compact .intro-band__copy p {
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.7;
}
.intro-band--compact .intro-band__copy p strong {
  font-style: italic;
  font-weight: 500;
}
.intro-band--compact .intro-band__media {
  /* 5/4 (taller than 4/3) lets the photo read as a generous block,
     not a header strip. */
  aspect-ratio: 5 / 4;
  border-radius: 12px;
}

/* Meditation Offerings — tighten section rhythm + bump the head copy. */
body[data-page="meditation"] .offerings { padding: clamp(56px, 6.5vw, 110px) 0; }
body[data-page="meditation"] .offerings__head {
  margin-bottom: clamp(36px, 4.5vw, 60px);
  align-items: start;
  gap: clamp(40px, 5vw, 80px);
}
body[data-page="meditation"] .offerings__title {
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.1;
}
body[data-page="meditation"] .offerings__intro {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
  max-width: 64ch;
}
body[data-page="meditation"] .offerings__grid { gap: clamp(24px, 2.4vw, 36px); }
body[data-page="meditation"] .offer-card {
  padding: clamp(32px, 3.4vw, 52px);
  min-height: 420px;
}
/* Meditation cards inherit the base offer-card typography (matches Figma:
   h3 = Inter 600 24px, p = Inter 400 20px). Removed the size bumps that
   were inflating beyond Figma values. */

/* "Your Moment of Stillness" — Figma uses a BLURRED nature backdrop, not
   a solid maroon block. Layer the mountain-meadow photo behind a soft warm
   wash so the white text + cream button still read clearly. */
body[data-page="meditation"] .meditation-breath {
  background:
    linear-gradient(120deg, rgba(40,30,20,0.55) 0%, rgba(70,50,30,0.35) 55%, rgba(40,55,40,0.55) 100%),
    url("assets/meditation-breath.jpg") center / cover no-repeat;
  isolation: isolate;
}
body[data-page="meditation"] .meditation-breath::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
body[data-page="meditation"] .meditation-breath__inner { z-index: 1; }

/* Adjust the breath disk so it pops against the nature backdrop. */
body[data-page="meditation"] .breath-disk {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-page="meditation"] .breath-orbit {
  border-color: rgba(255,255,255,0.7);
}

/* Inside the Experience — Figma card is a tall, generously-padded cream
   rectangle (~240-280px tall body area, quote centered). Round 37:
   widen the card so it spans the meditation page's wider container, and
   bump min-height a tier so the card breathes like the reference. */
body[data-page="meditation"] .testimonial-section {
  padding: clamp(56px, 6.5vw, 110px) 0;
}
body[data-page="meditation"] .testimonial-section__title {
  font-size: clamp(32px, 3.8vw, 48px);
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
body[data-page="meditation"] .testimonial-card-wrap {
  /* Wider than the default container-max so the cream card extends
     further toward the viewport edges. */
  width: min(100%, 1560px);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
body[data-page="meditation"] .testimonial-card {
  min-height: clamp(320px, 32vw, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(72px, 9vw, 140px) clamp(32px, 6vw, 96px);
}
body[data-page="meditation"] .testimonial-card blockquote {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.4;
  max-width: 720px;
}
body[data-page="meditation"] .testimonial-card cite {
  margin-top: 40px;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.7;
}

/* Upcoming Meditation Experiences — match the wider container. */
body[data-page="meditation"] .upcoming { padding: clamp(56px, 6.5vw, 110px) 0; }
body[data-page="meditation"] .upcoming__title {
  font-size: clamp(32px, 3.8vw, 48px);
  margin-bottom: clamp(36px, 4.5vw, 60px);
}


/* ===========================================================
   MEDITATION PAGE — Round 38 mobile polish
   ===========================================================
   Mobile Figma (Document/Mobile/Meditation 1004:2345, 390x5104):
   - Hero is stacked + centered (eyebrow → title → CTA button), all
     overlaid on the photo
   - Upcoming Meditation Events is a 1-up swipe carousel (not stacked)
   =========================================================== */

@media (max-width: 768px) {
  /* Centered mobile hero — kicker + title + CTA all stacked + centered
     over the photo. CTA is now a sibling INSIDE .inner-hero__inner so
     it flows in the column. */
  body[data-page="meditation"] .inner-hero,
  body[data-page="courses"] .inner-hero,
  body[data-page="yoga"] .inner-hero,
  body[data-page="wisdom"] .inner-hero {
    min-height: clamp(560px, 110vw, 760px);
  }
  body[data-page="meditation"] .inner-hero__inner,
  body[data-page="courses"] .inner-hero__inner,
  body[data-page="yoga"] .inner-hero__inner,
  body[data-page="wisdom"] .inner-hero__inner {
    min-height: clamp(560px, 110vw, 760px);
    align-items: center;
    text-align: center;
    justify-content: flex-end;
    gap: 16px;
    padding-bottom: clamp(40px, 7vw, 64px);
  }
  body[data-page="meditation"] .inner-hero__kicker,
  body[data-page="courses"] .inner-hero__kicker,
  body[data-page="yoga"] .inner-hero__kicker,
  body[data-page="wisdom"] .inner-hero__kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
    max-width: 26ch;
  }
  body[data-page="meditation"] .inner-hero__title,
  body[data-page="courses"] .inner-hero__title,
  body[data-page="yoga"] .inner-hero__title,
  body[data-page="wisdom"] .inner-hero__title {
    font-size: clamp(40px, 11vw, 60px);
    line-height: 1.05;
  }
  /* CTA: switch from absolute (desktop) to in-flow centered pill. */
  body[data-page="meditation"] .inner-hero__cta,
  body[data-page="courses"] .inner-hero__cta,
  body[data-page="yoga"] .inner-hero__cta,
  body[data-page="wisdom"] .inner-hero__cta {
    position: static;
    right: auto; bottom: auto;
    margin: 12px 0 0;
    align-self: center;
    height: 48px;
    padding: 0 8px 0 22px;
  }

  /* Inside the Experience — mobile sizing (less aggressive padding) */
  body[data-page="meditation"] .testimonial-card {
    min-height: 280px;
    padding: 40px 22px;
  }
  body[data-page="meditation"] .testimonial-card blockquote {
    font-size: 18px;
    line-height: 1.5;
  }

  /* Upcoming — convert from grid stack to 1-up swipe carousel.
     scroll-snap-x mandatory: each card snaps to viewport center as the
     user swipes; prev/next buttons scroll programmatically (JS in
     meditation.html / sound-healing.html). Apply to ANY page that opts
     in via .upcoming--carousel-mobile. */
  .upcoming--carousel-mobile .upcoming__grid {
    grid-template-columns: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    /* No negative margin — the track is just the section's own padded
       area, and each card snaps to the start of that area. This avoids
       the off-center first-paint where scroll-snap-align:center on a
       card wider than the viewport content area would land the card at
       an offset that didn't match what the user sees. */
    padding: 4px 22px 16px;
    margin: 0;
    scroll-padding-inline: 22px;
    scrollbar-width: none;
  }
  .upcoming--carousel-mobile .upcoming__grid::-webkit-scrollbar {
    display: none;
  }
  .upcoming--carousel-mobile .upcoming-card {
    /* Round 44: card = viewport width minus the section padding (22 + 22
       = 44), and snap-align: start so the card's left edge lines up with
       the section's left padding edge. No more drift on first paint. */
    flex: 0 0 calc(100vw - 44px);
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  body[data-page="meditation"] .upcoming__nav,
  body[data-page="sound-healing"] .upcoming__nav,
  body[data-page="yoga"] .upcoming__nav {
    margin-top: 20px;
    display: flex;
    gap: 14px;
    justify-content: center;
  }
}


/* ===========================================================
   YOGA PAGE — apply the meditation pattern per user direction
   ("apply the same fixes we made to the meditation page")
   =========================================================== */
body[data-page="yoga"] {
  --container-max: 1680px;
  --gutter: clamp(20px, 2.4vw, 56px);
}

/* Maroon quote — Figma uses DARK OLIVE BROWN tint (rgb(104,84,50) = #685432),
   NOT brand maroon. Override the base maroon-quote bg for yoga page. */
body[data-page="yoga"] .maroon-quote {
  background:
    linear-gradient(rgba(104,84,50,0.78), rgba(104,84,50,0.78)),
    url("assets/yoga-quote-bg.jpg") center / cover no-repeat;
}
body[data-page="yoga"] .maroon-quote__veil { display: none; }
body[data-page="yoga"] .maroon-quote blockquote {
  /* Per user: NOT italicized. */
  font-style: normal;
  font-weight: 400;
}
body[data-page="yoga"] .maroon-quote cite {
  /* User: "Pujya Guru should look a little bigger". Bumped from default. */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 22px);
  margin-top: 20px;
  display: block;
}

/* Yoga Offerings — same rhythm as meditation. Cards inherit base offer-card
   typography (which we updated to match Figma exactly). Icons use the
   maroon CSS-mask pattern from --icon-url. */
body[data-page="yoga"] .offerings { padding: clamp(56px, 6.5vw, 110px) 0; }
body[data-page="yoga"] .offerings__head {
  margin-bottom: clamp(36px, 4.5vw, 60px);
  align-items: start;
  gap: clamp(40px, 5vw, 80px);
}
body[data-page="yoga"] .offerings__title {
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.1;
}
body[data-page="yoga"] .offerings__intro {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
  max-width: 64ch;
}
body[data-page="yoga"] .offerings__grid { gap: clamp(24px, 2.4vw, 36px); }
body[data-page="yoga"] .offer-card {
  padding: clamp(32px, 3.4vw, 52px);
  min-height: 420px;
}

/* TTC card — proper Figma styling. Title is serif STIX 500 52px, kicker
   Inter 500 16px (not 12 uppercase), chips are Inter 500 16px maroon on
   white, real RYS-200 + CMA badge images instead of text. Bg uses a
   subtle left-anchored dim so the title side stays readable. */
body[data-page="yoga"] .ttc-card {
  padding: clamp(72px, 7vw, 110px) 0;
}
body[data-page="yoga"] .ttc-card__bg::after {
  background: linear-gradient(95deg, rgba(20,18,15,0.72) 0%, rgba(20,18,15,0.45) 55%, rgba(20,18,15,0.18) 100%);
}
body[data-page="yoga"] .ttc-card__inner {
  /* User: content should be LEFT-aligned in the left half of the section,
     not centered. Pin the inner block to the section's left edge inside the
     container width, cap at 760px so it sits in the left ~half. */
  max-width: 760px;
  margin: 0;
  margin-right: auto;
  padding-left: clamp(24px, 4vw, 80px);
  gap: clamp(20px, 2vw, 28px);
}
body[data-page="yoga"] .ttc-card {
  /* Provide horizontal container so the inner can sit left-aligned WITHIN
     a max-width 1680 viewport area (matches the container-max pattern). */
}
body[data-page="yoga"] .ttc-card h2 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.1;
  max-width: none;
}
body[data-page="yoga"] .ttc-card__kicker {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(250,250,250,0.92);
}
body[data-page="yoga"] .ttc-card p {
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.6;
  color: rgba(250,250,250,0.94);
}
body[data-page="yoga"] .ttc-card__chip {
  padding: 10px 20px;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  color: var(--brand);
  background: #fafafa;
}
body[data-page="yoga"] .ttc-card__creds {
  gap: clamp(32px, 3vw, 56px);
}
body[data-page="yoga"] .ttc-card__creds h5 {
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(250,250,250,0.92);
}
/* Real PNG badges (replaces the "YA" / "CMA" text circles) */
.ttc-card__badge-img {
  width: 80px; height: 80px;
  border-radius: 999px;
  background: #fff;
  padding: 6px;
  object-fit: contain;
  object-position: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

/* Upcoming Yoga — same padding rhythm as meditation. */
body[data-page="yoga"] .upcoming { padding: clamp(56px, 6.5vw, 110px) 0; }
body[data-page="yoga"] .upcoming__title {
  font-size: clamp(32px, 3.8vw, 48px);
  margin-bottom: clamp(36px, 4.5vw, 60px);
}


/* ===========================================================
   SOUND HEALING PAGE — Round 39 polish (Figma 1164:1936 + 1004:2509)
   ===========================================================
   Mirrors the meditation page polish: wider container so cards fill
   the viewport, taller hero so the full sound-bowl photo shows, TTC
   gradient anchored LEFT instead of full-bleed dim, real YACEP / CMA
   logos, and mobile centered hero stack + TTC image-on-top + carousel.
   =========================================================== */

body[data-page="sound-healing"] {
  --container-max: 1680px;
  --gutter: clamp(20px, 2.4vw, 56px);
}

/* Hero — Round 62: fold-height to match meditation page per user direction
   "look at the meditation page". Was aspect-ratio 1.844 / 1 (matching source
   photo) but at wide viewports the hero felt short because aspect-ratio
   scales with width, leaving the page below the hero visible on first load.
   Now min-height clamp(560, 80vh, 860) — same as meditation — so the hero
   always takes up the fold regardless of viewport aspect. The 2866×1554
   source still cover-fits cleanly because most cropping happens vertically. */
body[data-page="sound-healing"] .inner-hero {
  aspect-ratio: auto;
  min-height: var(--hero-min-h);
  max-height: none;
}
body[data-page="sound-healing"] .inner-hero__inner {
  min-height: var(--hero-min-h);
  height: auto;
}
body[data-page="sound-healing"] .inner-hero__image {
  background-position: center;
}

/* Tune Into Harmony — same intro-band--compact styling as Come Home, but
   media on the LEFT (intro-band--media-reverse keeps the natural order).
   Slightly tighter padding above since the hero is generous. */
body[data-page="sound-healing"] .intro-band--compact { padding: clamp(48px, 5.5vw, 88px) 0; }

/* Sound Healing Offerings — Round 40 bigger heading, larger cards,
   tighter top/bottom padding so the section reads as a generous tile row. */
body[data-page="sound-healing"] .offerings { padding: clamp(48px, 5.5vw, 96px) 0; }
body[data-page="sound-healing"] .offerings__head {
  margin-bottom: clamp(36px, 4.5vw, 60px);
  align-items: start;
  gap: clamp(40px, 5vw, 80px);
}
body[data-page="sound-healing"] .offerings__title {
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.08;
}
body[data-page="sound-healing"] .offerings__intro {
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.65;
  max-width: 64ch;
}
body[data-page="sound-healing"] .offerings__grid { gap: clamp(28px, 2.6vw, 40px); }
body[data-page="sound-healing"] .offer-card {
  padding: clamp(36px, 3.8vw, 58px);
  min-height: 460px;
}
body[data-page="sound-healing"] .offer-card h3 {
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.25;
}
body[data-page="sound-healing"] .offer-card p {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
}

/* Round 62 (final): icons in #892D00 — exact hex Rishi eye-dropped from
   the Figma frame. Was brand-maroon (same as h3) → gold #B8924A → sienna
   #A0522D → rust #8B3F22 → THIS. Applied to .offer-card__icon globally so
   meditation / sound-healing / yoga / courses share the same icon color
   without per-page repetition. */
.offer-card__icon {
  background-color: #892D00;
}

/* TTC card on Sound Healing — image needs to read on the RIGHT half
   (woman teaching), text overlay on the LEFT with a LEFT-HEAVY gradient
   instead of the previous full-bleed dim that washed out the photo.
   Round 42: lock section aspect to 3:2 (matching the source 4096x2732)
   so cover-fit doesn't crop ANY part of the image — neither the woman's
   head at top nor the front row of bowls at bottom. At 1920 wide that
   makes the section 1280 tall; at 1280 wide it's 853 tall — both
   generous and matched to the source. */
.ttc-card--sound {
  aspect-ratio: 3 / 2;
  min-height: 0;
  display: flex;
  align-items: center;
}
.ttc-card--sound .ttc-card__bg {
  background-position: center;
  background-size: cover;
}
.ttc-card--sound .ttc-card__bg::after {
  /* Left-heavy gradient: opaque maroon-tinted dark on the far left,
     fading to fully transparent past the 60% mark so the photo on the
     right reads cleanly. */
  background: linear-gradient(90deg,
    rgba(40,25,22,0.88) 0%,
    rgba(40,25,22,0.72) 28%,
    rgba(40,25,22,0.45) 50%,
    rgba(40,25,22,0.10) 70%,
    rgba(40,25,22,0) 100%);
}
.ttc-card--sound .ttc-card__inner {
  max-width: 720px;
  margin-left: 0;
  margin-right: auto;
  padding-left: clamp(40px, 6vw, 96px);
  gap: clamp(20px, 2vw, 28px);
}
.ttc-card--sound h2 { max-width: 22ch; font-size: clamp(34px, 4vw, 54px); }
.ttc-card--sound .ttc-card__chips { gap: 10px; }
.ttc-card--sound .ttc-card__chip {
  /* White pill with maroon text — explicit, since the global rule uses
     var(--ink) (dark grey) which reads slightly off in this context. */
  background: #fff;
  color: var(--brand);
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 999px;
}
.ttc-card--sound .ttc-card__creds { gap: 40px; margin-top: 12px; }
/* Real circular logo images — replace the old text-letter badges. */
.ttc-card--sound .ttc-card__badge--logo {
  width: 84px; height: 84px;
  border-radius: 999px;
  background: #fff;
  padding: 6px;
  object-fit: contain;
  display: block;
}
.ttc-card--sound .ttc-card__explore {
  align-self: flex-start;
  background: #fff;
  color: var(--brand);
}
.ttc-card--sound .ttc-card__explore::after {
  background: var(--brand);
  color: #fff;
}

/* Inside the Experience — Round 40 bigger card, tighter section padding. */
body[data-page="sound-healing"] .testimonial-section { padding: clamp(48px, 5.5vw, 96px) 0; }
body[data-page="sound-healing"] .testimonial-section__title {
  font-size: clamp(34px, 4vw, 52px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
body[data-page="sound-healing"] .testimonial-card-wrap {
  /* Even wider — only 60px gutter total */
  width: min(100%, 1620px);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
body[data-page="sound-healing"] .testimonial-card {
  min-height: clamp(360px, 36vw, 500px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(80px, 10vw, 160px) clamp(32px, 6vw, 96px);
}
body[data-page="sound-healing"] .testimonial-card blockquote {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.4;
  max-width: 780px;
}
body[data-page="sound-healing"] .testimonial-card cite {
  margin-top: 44px;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.7;
}

/* Upcoming Sound Healing Experiences — match the wider container. */
body[data-page="sound-healing"] .upcoming { padding: clamp(56px, 6.5vw, 110px) 0; }
body[data-page="sound-healing"] .upcoming__title {
  font-size: clamp(32px, 3.8vw, 48px);
  margin-bottom: clamp(36px, 4.5vw, 60px);
}


/* ===========================================================
   SOUND HEALING — Mobile (Round 39)
   =========================================================== */
@media (max-width: 768px) {
  /* Centered hero stack (kicker + title + CTA) — same pattern as meditation */
  body[data-page="sound-healing"] .inner-hero {
    min-height: clamp(560px, 110vw, 760px);
  }
  body[data-page="sound-healing"] .inner-hero__inner {
    min-height: clamp(560px, 110vw, 760px);
    align-items: center;
    text-align: center;
    justify-content: flex-end;
    gap: 16px;
    padding-bottom: clamp(40px, 7vw, 64px);
  }
  body[data-page="sound-healing"] .inner-hero__kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
    max-width: 26ch;
  }
  body[data-page="sound-healing"] .inner-hero__title {
    font-size: clamp(40px, 11vw, 60px);
    line-height: 1.05;
  }
  body[data-page="sound-healing"] .inner-hero__cta {
    position: static;
    right: auto; bottom: auto;
    margin: 12px 0 0;
    align-self: center;
    height: 48px;
    padding: 0 8px 0 22px;
  }

  /* Tune Into Harmony — Figma mobile shows TITLE + body ABOVE the video.
     Reverse the natural stack order so copy comes first, media second.
     Also override .reveal opacity for these children because IntersectionObserver
     doesn't always fire on flex children whose visual position was changed
     by `order:` after initial paint. */
  body[data-page="sound-healing"] .intro-band--compact .intro-band__grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  body[data-page="sound-healing"] .intro-band--compact .intro-band__grid > :first-child { order: 2; }
  body[data-page="sound-healing"] .intro-band--compact .intro-band__grid > :last-child { order: 1; }
  body[data-page="sound-healing"] .intro-band--compact .intro-band__grid > .reveal {
    opacity: 1;
    transform: none;
  }
  /* Make sure the video block has actual rendered height on mobile.
     min-height as backstop because the .reveal wrapper has no intrinsic
     dimensions and aspect-ratio alone can collapse in flex contexts. */
  body[data-page="sound-healing"] .intro-band--compact .intro-band__media {
    width: 100%;
    aspect-ratio: 16 / 11;
    min-height: 240px;
    border-radius: 12px;
    background-color: rgba(94,42,41,0.06);
  }
  body[data-page="sound-healing"] .intro-band--compact .intro-band__grid > .reveal {
    width: 100%;
    display: block;
  }

  /* TTC mobile — Figma shows IMAGE on top + text block below on white,
     no overlay gradient on the photo. Convert the absolute-bg layout to
     a stacked card: media area first, copy second on cream/white. */
  .ttc-card--sound {
    /* Reset the desktop aspect-ratio 3:2 — on mobile the section is a
       stacked block (image + text below) and must size to content
       height, not viewport-width × 2/3 (which clipped everything below
       the photo). */
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    display: block;
    padding: 0;
    color: var(--ink);
    background: var(--bg);
  }
  .ttc-card--sound .ttc-card__bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(260px, 56vw, 360px);
    background-position: center;
  }
  .ttc-card--sound .ttc-card__bg::after { display: none; }
  .ttc-card--sound .ttc-card__inner {
    max-width: 100%;
    padding: 32px 22px 40px;
    gap: 18px;
  }
  .ttc-card--sound h2 {
    color: var(--brand);
    font-size: clamp(28px, 7vw, 36px);
    line-height: 1.15;
    max-width: 100%;
  }
  .ttc-card--sound .ttc-card__kicker { color: var(--brand); opacity: 0.85; }
  .ttc-card--sound p { color: var(--ink); max-width: 100%; }
  .ttc-card--sound .ttc-card__chip {
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    padding: 7px 14px;
  }
  /* Force Recognized By + Accredited By to sit on a single row on mobile.
     The desktop rule uses flex-wrap: wrap which lets them break to two
     rows on narrow widths; pin them to nowrap and shrink the logo a
     touch so both blocks always fit side-by-side. */
  .ttc-card--sound .ttc-card__creds {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 28px;
    align-items: flex-start;
  }
  .ttc-card--sound .ttc-card__creds > div { flex: 0 0 auto; }
  .ttc-card--sound .ttc-card__creds h5 {
    color: var(--ink);
    opacity: 0.7;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }
  .ttc-card--sound .ttc-card__badge--logo {
    width: 60px; height: 60px;
    background: #fff;
    border: 1px solid rgba(40,40,40,0.08);
  }
  .ttc-card--sound .ttc-card__explore {
    background: var(--brand);
    color: #fff;
    align-self: stretch;
    justify-content: center;
    padding: 0 22px;
  }
  .ttc-card--sound .ttc-card__explore::after { background: #fff; color: var(--brand); }

  /* Inside the Experience — tighter mobile sizing */
  body[data-page="sound-healing"] .testimonial-card {
    min-height: 280px;
    padding: 40px 22px;
  }
  body[data-page="sound-healing"] .testimonial-card blockquote {
    font-size: 18px;
    line-height: 1.5;
  }
}


/* ===========================================================
   HOME PAGE — Figma 1:1 typography alignment (Round 47)
   ===========================================================
   Extracted from Figma node 4098:2323 (Desktop / Homepage 1.1).
   The Figma uses three section-title colors:
   - #4a3b2e (brown) — Inspiration ("Guided by Wisdom…")
   - #5a381c (accent) — Vision, Impact
   - #5e2a29 (brand maroon) — Practice, Programs
   Each section's secondary button matches its title's color family.
   Eyebrows: Inter 500 20 #272727 UPPER.
   Body leads: Inter 400 20 #272727.
   Pillar / impact-list items: STIX Two Text 24 w=400 #272727.
   Cite ("- Pujya Gurudevshri Rakeshji"): user override → 20px.
   =========================================================== */

/* Home only — scope everything to body:not([data-page]) since the home
   page (index.html) has no data-page attribute (inner pages have one). */
body:not([data-page]) {
  /* Inspiration: warm brown title #4a3b2e */
  --home-inspiration-title: #5a381c; /* QC r41 */
  /* Vision + Impact: gold-brown title #5a381c */
  --home-vision-title: #5a381c;
  /* Practice + Programs: maroon title #5e2a29 */
  --home-maroon-title: #5e2a29;
}

/* Inspiration title — "Guided by Wisdom, Rooted in Compassion" */
body:not([data-page]) #inspirationHeading,
body:not([data-page]) .inspiration__body h2 {
  color: var(--home-inspiration-title) !important;
}
body:not([data-page]) #inspirationHeading em,
body:not([data-page]) .inspiration__body h2 em {
  color: var(--home-inspiration-title) !important;
}

/* Vision title — "A Home for the Soul in the Heart of Nature" */
body:not([data-page]) #visionHeading {
  color: var(--home-vision-title) !important;
}
body:not([data-page]) #visionHeading em {
  color: var(--home-vision-title) !important;
}

/* Impact title — "A Movement Fueled by Selfless Service" */
body:not([data-page]) #impactHeading {
  color: var(--home-vision-title) !important;
}
body:not([data-page]) #impactHeading em {
  color: var(--home-vision-title) !important;
}

/* Practice + Programs titles stay brand maroon (already default via .display) */
body:not([data-page]) #practiceHeading,
body:not([data-page]) #programsHeading {
  color: var(--home-maroon-title);
}

/* Body lead paragraphs — Inter 20 w=400 #272727 (Figma spec).
   .lead default is clamp(16,1.3vw,20) which is OK at top end, but
   ensure color matches and line-height is generous. */
body:not([data-page]) .vision-grid .lead,
body:not([data-page]) .impact__lead,
body:not([data-page]) .practice-head .lead,
body:not([data-page]) .programs-head .lead {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
  color: #272727;
  letter-spacing: 0;
}

/* Pillar headings (Mind/Body/Soul/Service) — STIX Two Text 24 w=400 */
body:not([data-page]) .pillar h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.17px;
  color: #272727;
  margin: 0 0 8px;
}
body:not([data-page]) .pillar p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: #272727;
}

/* Impact list items (Healthcare/Education/Sustainability/Community
   Development) — STIX Two Text 24 w=400 #272727 (already serif but
   ensure color matches Figma). */
body:not([data-page]) .impact-list li {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -0.17px;
  color: #272727;
}

/* Secondary button color follows section title color.
   Default .btn--secondary is brand-maroon; override for Vision +
   Impact sections where the title is brown. */
body:not([data-page]) .vision-grid .btn--secondary,
body:not([data-page]) .impact .btn--secondary {
  color: var(--home-vision-title);
  border-color: var(--home-vision-title);
}
body:not([data-page]) .vision-grid .btn--secondary .btn-icon,
body:not([data-page]) .impact .btn--secondary .btn-icon {
  background: var(--home-vision-title);
}
body:not([data-page]) .vision-grid .btn--secondary:hover,
body:not([data-page]) .impact .btn--secondary:hover {
  background: var(--home-vision-title);
  color: #fff;
}
body:not([data-page]) .vision-grid .btn--secondary:hover .btn-icon,
body:not([data-page]) .impact .btn--secondary:hover .btn-icon {
  background: #fff;
  color: var(--home-vision-title);
}

/* Quote-break cite "- Pujya Gurudevshri Rakeshji" — user override to
   ~20px (Figma says 28; Anita wants smaller). */
body:not([data-page]) .quote-break cite {
  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: 0.14em;
  margin-top: 24px;
}

/* Unified section-head typography across all home sections. The
   Inspiration head (eyebrow + h2) is the visual benchmark per user
   feedback — Vision, Practice, Programs, and Impact should match its
   font size, weight, line-height, eyebrow size, and eyebrow→h2 spacing
   so the page reads as one consistent system. */

/* H2 — same fluid clamp for every section title. */
body:not([data-page]) #inspirationHeading,
body:not([data-page]) .inspiration__body h2,
body:not([data-page]) #visionHeading,
body:not([data-page]) #practiceHeading,
body:not([data-page]) #programsHeading,
body:not([data-page]) #impactHeading {
  font-size: clamp(40px, 3.6vw, 60px);
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
}

/* Eyebrow — match the Inspiration eyebrow's tighter scale + spacing
   on every section head. Default global .eyebrow is 20px / 0.18em;
   the Inspiration variant is clamp(14, 1vw, 18) / 0.18em. Bring all
   home-page eyebrows to that smaller, tighter style. */
body:not([data-page]) .section-head .eyebrow,
body:not([data-page]) .practice-head .eyebrow,
body:not([data-page]) .programs-head .eyebrow,
body:not([data-page]) .impact__copy .eyebrow {
  font-size: clamp(14px, 1vw, 18px);
  letter-spacing: 0.18em;
  margin: 0 0 4px;
  color: #272727;
}

/* Eyebrow → h2 spacing should be tight (6-8px) like Inspiration.
   The default .section-head { gap: 18px } overshoots — pull the h2
   closer to its eyebrow so each head reads as one tightly-coupled
   block. */
body:not([data-page]) .section-head,
body:not([data-page]) .practice-head .section-head,
body:not([data-page]) .programs-head .section-head,
body:not([data-page]) .impact__copy {
  gap: 8px;
}

/* Body lead spacing — push the descriptive paragraph below the h2
   with a bit more breathing room, matching how Inspiration's quote
   cards sit below its h2 with ~22px gap. */
body:not([data-page]) .vision-grid .lead,
body:not([data-page]) .impact__lead,
body:not([data-page]) .practice-head .lead,
body:not([data-page]) .programs-head .lead {
  margin-top: 22px;
}


/* ===========================================================
   HOME PAGE — Round 48 fix for inspiration card at 1080-1280
   ===========================================================
   The .inspiration__card desktop rule uses `aspect-ratio: 2 / 1` +
   `min-height: 820px`. On viewports between 1080 and 1280, the
   aspect-derived height (~519 at 1128w) wins over min-height in the
   render path, leaving the card too short and clipping all the body
   content (eyebrow / heading / quotes / button) below the visible
   video. The mobile/tablet stacked layout only fires at ≤1079.
   Fix: apply the stacked card layout up to 1279 too, so this
   in-between viewport range gets the same working vertical stack
   as mobile/tablet. =========================================================== */

@media (min-width: 1080px) and (max-width: 1279px) {
  body:not([data-page]) .inspiration__card {
    aspect-ratio: auto;
    min-height: 0;
    width: min(100%, calc(100% - 32px));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: #D8E0E3;
    border-radius: 20px;
    overflow: hidden;
    isolation: auto;
    padding: 36px 32px 40px;
  }
  body:not([data-page]) .inspiration__veil { display: none; }
  body:not([data-page]) .inspiration__body {
    display: contents;
  }
  body:not([data-page]) .inspiration__card .eyebrow { order: 1; margin: 0; }
  body:not([data-page]) .inspiration__card h2 {
    order: 2;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.1;
    margin: 0;
  }
  body:not([data-page]) .inspiration__image {
    order: 3;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
  }
  body:not([data-page]) .inspiration__quote {
    order: 4;
    padding: 22px 26px;
    line-height: 1.65;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
  }
  body:not([data-page]) .inspiration__quote:nth-of-type(2) { order: 5; }
  body:not([data-page]) .inspiration__card .btn--filled {
    order: 6;
    display: inline-flex;
    width: fit-content;
    align-self: flex-start;
  }
}


/* ===========================================================
   EXPLORE THE SPACE — Figma 1:1 polish (Round 50)
   ===========================================================
   Extracted from Figma frame 4098:2727. Section titles are
   #5a381c brown (NOT brand maroon). Sacred-ground cards + their
   icons are #734b1f deeper brown. Time card eyebrow is #734b1f.
   Scoped under body[data-page="explore-the-space"].
   =========================================================== */

/* Section titles — all brown #5a381c per Figma */
body[data-page="explore-the-space"] .sacred-grounds__copy h2,
body[data-page="explore-the-space"] .spaces-discover-v2__head h2,
body[data-page="explore-the-space"] .ashram-time h2 {
  color: #5a381c;
}

/* Sacred-ground cards: brown active state, brown text on inactive,
   icons match the deeper brown #734b1f from the Figma render. */
body[data-page="explore-the-space"] .ground-card {
  border-color: rgba(115, 75, 31, 0.32);
  color: #734b1f;
}
body[data-page="explore-the-space"] .ground-card:hover {
  background: rgba(115, 75, 31, 0.06);
}
body[data-page="explore-the-space"] .ground-card.is-active {
  background: #734b1f;
  border-color: #734b1f;
  color: #fff;
}

/* Sacred grounds — text column + photo same height so the row
   doesn't have a ragged bottom edge.
   Two-column grid: cards on left grow to match the photo on right. */
@media (min-width: 900px) {
  body[data-page="explore-the-space"] .sacred-grounds__stage {
    align-items: stretch;
  }
  body[data-page="explore-the-space"] .ground-cards {
    height: 100%;
    justify-content: space-between;
  }
  body[data-page="explore-the-space"] .ground-card {
    flex: 1;
    min-height: 0;
  }
  body[data-page="explore-the-space"] .sacred-grounds__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
}

/* Spaces to Discover — pull the aerial up so it fits in the fold
   on standard 1440x900 monitors (was leaving the image below scroll). */
body[data-page="explore-the-space"] .spaces-discover-v2 {
  padding-top: clamp(48px, 5vw, 80px);
}
body[data-page="explore-the-space"] .spaces-discover-v2__inner {
  margin-bottom: clamp(24px, 3vw, 40px);
}
body[data-page="explore-the-space"] .aerial-stage__image {
  aspect-ratio: 16 / 8;
}

/* Time card eyebrow brown per Figma (was amber #B8924A) */
body[data-page="explore-the-space"] .time-card__eyebrow {
  color: #734b1f;
  font-weight: 600;
}

/* Visit CTA "Join a Program" button matches the brown title family */
body[data-page="explore-the-space"] .visit-cta .btn {
  color: #5a381c;
  border-color: #5a381c;
}
body[data-page="explore-the-space"] .visit-cta .btn .btn-icon {
  background: #5a381c;
}
body[data-page="explore-the-space"] .visit-cta .btn:hover {
  background: #5a381c;
  color: #fafafa;
}

/* Time photo positioning — pull the Nutrition + Bapa photos out of
   the deep zoom they had. Use cover with center top so subjects
   aren't cropped at the top. */
body[data-page="explore-the-space"] .ashram-time__photo {
  background-size: cover;
  background-position: center 35%;
}

/* Mobile (≤768) — sacred-ground cards become 2x2 grid, no shadow,
   matching Figma mobile pattern. */
@media (max-width: 768px) {
  body[data-page="explore-the-space"] .ground-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  body[data-page="explore-the-space"] .ground-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    text-align: center;
    padding: 18px 14px;
    box-shadow: none;
    justify-items: center;
  }
  body[data-page="explore-the-space"] .ground-card__icon {
    margin: 0 auto 8px;
  }
  body[data-page="explore-the-space"] .ground-card__copy {
    text-align: center;
  }
  body[data-page="explore-the-space"] .ground-card__copy h4 {
    font-size: 16px;
  }
  body[data-page="explore-the-space"] .ground-card__copy p {
    font-size: 12.5px;
    line-height: 1.4;
  }
  body[data-page="explore-the-space"] .sacred-grounds__media {
    box-shadow: none;
    min-height: 280px;
  }
}

/* Time carousel responsive — at wide viewports the card was pinning
   to a fixed position; let it scale with the section width. */
@media (min-width: 1280px) {
  body[data-page="explore-the-space"] .time-card {
    width: clamp(360px, 28vw, 480px);
    padding: 36px 40px;
  }
  body[data-page="explore-the-space"] .time-card__title {
    font-size: clamp(28px, 2.6vw, 40px);
  }
  body[data-page="explore-the-space"] .time-card__body {
    font-size: clamp(15px, 1.1vw, 18px);
  }
}


/* ===========================================================
   EXPLORE THE SPACE — Round 51 polish (Anita feedback pt.2)
   =========================================================== */

/* Peace quote — Figma uses ROMAN (non-italic) serif STIX for the top
   and bottom lines; only the center caps line stays uppercase roman.
   (Anita pointed out Round 51 mis-italicized the leads.) */
body[data-page="explore-the-space"] .peace-quote__lead {
  font-style: normal;
  font-family: var(--serif);
}
body[data-page="explore-the-space"] .peace-quote__lead strong {
  font-style: normal;
  font-weight: 500;
}

/* Time card — Figma title is #272727 dark gray-black, not maroon. */
body[data-page="explore-the-space"] .time-card__title,
body[data-page="explore-the-space"] .time-mcard__title {
  color: #272727;
}

/* Time card prev/next arrows were touching — add proper spacing. */
body[data-page="explore-the-space"] .time-card__nav {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

/* Time carousel responsive at wide viewports — stage scales with
   the container, card width clamps so it doesn't grow infinitely.
   Round 54: at viewports > --container-max (1440), the stage was
   centered inside __inner leaving cream gutters on left+right that
   read as a "white bar" on the right at 1552. Break the stage out
   to full viewport width by neutralizing __inner's container cap. */
@media (min-width: 1280px) {
  body[data-page="explore-the-space"] .ashram-time__stage {
    /* 16/9 (was 16/10) so the section fits the viewport fold per Anita's
       round-46 feedback, even at 1700px-wide viewports. Kill the base 820
       max-height since aspect-ratio now governs height. */
    aspect-ratio: 16 / 9;
    max-height: none;
  }
  body[data-page="explore-the-space"] .time-card {
    width: clamp(340px, 26vw, 420px);
    right: clamp(28px, 3vw, 56px);
  }
}

/* explore-the-space Your Time section — match the previous (good) size:
   inner caps at 1820px, with small symmetric side padding. */
body[data-page="explore-the-space"] .ashram-time__inner {
  width: min(100%, 1820px);
  padding: 0 clamp(20px, 2vw, 40px);
}


/* ===========================================================
   EXPLORE — Round 53 polish: peace quote spacing + curly quotes.
   Round 54 dropped the Lakes/Seasonal-Shifts italic override —
   was a misread of the Figma (all 4 cards use sans-serif titles).
   =========================================================== */

/* Peace quote — tighter, generous gap between the 3 blocks to match
   Figma's vertical rhythm. */
body[data-page="explore-the-space"] .peace-quote__inner {
  gap: clamp(28px, 3vw, 44px);
}


/* ===========================================================
   WISDOM PAGE — Round 63 polish
   ===========================================================
   - Container 1680 + gutter clamp (matches meditation / sound-healing).
   - Pujya Gurudevshri quote on warm yellow #E8C766 instead of brand
     maroon (Anita's Figma callout). Yoga still uses the maroon variant.
   - Sat·sang frosted-def gets a slightly stronger warm gradient so the
     "slight gradient" Anita flagged is actually visible.
   =========================================================== */

body[data-page="wisdom"] {
  --container-max: 1680px;
  --gutter: clamp(20px, 2.4vw, 56px);
}

/* Pujya Gurudevshri quote — Figma frame 2147224187 → "image 582" child
   rect. Exact asset pulled from the Figma archive (imageRef
   54bf63157bea05d7cbc22fb4af4a0ac02939238b → assets/quote-bg-wisdom.jpg).
   Palm frond on dark olive — already carries the directional shimmer,
   no CSS gradient needed. Iterated yellow → gold → faked olive-sheen
   → THIS exact-asset solution once the figma-reference dump was found. */
body[data-page="wisdom"] .maroon-quote {
  background:
    url("assets/quote-bg-wisdom.jpg") center / cover no-repeat,
    #5E4220;
}
body[data-page="wisdom"] .maroon-quote__veil {
  /* The new bg image already carries the leaf texture — hide the
     redundant overlay veil. */
  display: none;
}
body[data-page="wisdom"] .maroon-quote blockquote,
body[data-page="wisdom"] .maroon-quote cite {
  color: #fafafa;
}

/* Sat·sang box — Anita's Figma (image 157) shows a frosted-glass card
   that's almost white with a CLEAR diagonal sheen running across — the
   "gradient of weight" she described. Round 2 was a flat cream tile,
   round 3 had cream that was too dark + sheen too subtle. This pass:
   near-white base + sharper diagonal light bands. */
body[data-page="wisdom"] .frosted-def__inner {
  background:
    /* Strong diagonal sheen — three bright bands separated by slightly
       cooler troughs so the card reads as polished/frosted glass, not
       a flat tile. The 115deg axis matches the Figma direction. */
    linear-gradient(115deg,
      #FFFFFF 0%,
      #ECEAE2 22%,
      #FBF9F4 40%,
      #E8E5DC 58%,
      #FBF9F4 75%,
      #ECEAE2 92%,
      #FFFFFF 100%);
}
body[data-page="wisdom"] .frosted-def__inner::before {
  /* No image behind = no blur target. */
  display: none;
}


/* ===========================================================
   ACTIVITIES SUBPAGE — Figma 4101:1572
   Hero: LEFT-aligned content on desktop (title + kicker + 3 italic
   quotes + scroll chevron), image bg fills the section. On mobile the
   hero recentres + the quotes move into a separate cream-bg band below.
   Activity rows: title sits ABOVE the image on mobile, beside it on
   desktop. CTA is a text-link with underline (not a pill).
   =========================================================== */
body[data-page="activities"] {
  --container-max: 1680px;
  --gutter: clamp(20px, 2.4vw, 56px);
}

.activities-hero {
  position: relative;
  width: 100%;
  /* Round 60c — uses --hero-min-h (scaled by --ds) instead of 88vh. */
  min-height: var(--hero-min-h);
  overflow: hidden;
  background: #1c1815;
  color: #fafafa;
  display: flex;
  align-items: center;
}
.activities-hero__image {
  position: absolute; inset: 0;
  background-size: cover;
  /* Shift focal point DOWN-RIGHT so figures' bodies/feet are visible
     and they sit on the RIGHT side of the frame per Figma. */
  background-position: 75% 75%;
  transform: scale(1.04);
  will-change: transform;
}
.activities-hero__veil {
  position: absolute; inset: 0;
  /* Heavy dim on the LEFT (where the text sits), fading to 0 by ~78%
     so the figures on the right stay fully visible. Per user feedback
     "Figma has a gradient on the image on the left-hand side and they
     place the text on the left-hand side on the gradient". */
  background: linear-gradient(90deg,
    rgba(15,12,10,0.82) 0%,
    rgba(15,12,10,0.78) 28%,
    rgba(15,12,10,0.5) 48%,
    rgba(15,12,10,0.2) 65%,
    rgba(15,12,10,0)    80%);
}
.activities-hero__inner {
  position: relative;
  z-index: 1;
  /* Anchor the text block to the LEFT edge of the page's container-max
     box (so it lines up with body content at wide viewports, not floats
     in the middle of the section). At narrow viewports the gutter is the
     dominant left offset; at wide ones, the container-side gutter wins. */
  margin-left: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
  margin-right: var(--gutter);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(16px, 1.6vw, 24px);
  max-width: 600px;
}
.activities-hero__title {
  /* Per Figma 4101:1660 — STIX Two Text Medium 500, 64px, white. */
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 5.5vw, 88px);
  line-height: 1.05;
  letter-spacing: 0;
  color: #fafafa;
}
.activities-hero__kicker {
  /* Per Figma 4101:1659 — Inter Medium 500, 20px UPPERCASE, white,
     single-line "Every journey begins with a question. What is yours?". */
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 18px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.95);
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .activities-hero__kicker { white-space: normal; }
}
.activities-hero__quotes {
  /* Per Figma 4101:1663/1664/1665 — STIX Two Text Italic 400, 22px, white. */
  list-style: none;
  margin: clamp(16px, 2vw, 28px) 0 clamp(20px, 3vw, 40px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 14px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
}
.activities-hero__quotes li { margin: 0; }
.activities-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 18px);
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.activities-hero__scroll:hover { transform: translateY(2px); color: #fff; }
.activities-hero__scroll svg { width: 18px; height: 18px; opacity: 0.9; }
@keyframes activitiesScrollBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
.activities-hero__scroll svg { animation: activitiesScrollBob 2.4s ease-in-out infinite; }

/* Mobile quotes band — hidden on desktop; shown ONLY when the hero
   quotes inside the hero are hidden (≤768). */
.activities-mobile-quotes {
  display: none;
}

/* ACTIVITY ROWS — CSS Grid with named areas so the title sits BESIDE
   the image on desktop and ABOVE the image on mobile. */
.activities-list {
  width: 100%;
  padding: clamp(56px, 6vw, 110px) 0;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 96px);
}
.activity-row {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "image"
    "body";
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: clamp(16px, 1.6vw, 24px);
  align-items: start;
}
.activity-row__title  { grid-area: title; }
.activity-row__image  { grid-area: image; }
.activity-row__copy   { grid-area: body; }

@media (min-width: 900px) {
  .activity-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title image"
      "body  image";
    /* Rows auto-size to CONTENT so the image doesn't push the title and
       body apart. Was row-gap 20-24 with image stretching to min-height
       360, which created ~100px of empty space between title and body. */
    grid-template-rows: auto auto;
    column-gap: clamp(40px, 4vw, 72px);
    row-gap: clamp(10px, 1vw, 16px);
    align-content: start;
  }
  .activity-row--reverse {
    grid-template-areas:
      "image title"
      "image body";
  }
  /* Image is sized by its own aspect-ratio (16/11) — does NOT stretch to
     fill the row. align-self: start parks it at the top of its column;
     title/body sit close together in the other column. */
  .activity-row__image { align-self: start; }
  .activity-row__title { align-self: end; }
  .activity-row__copy  { align-self: start; padding-top: 4px; }
}

.activity-row__title {
  /* Per Figma 4101:1619 — STIX Two Text Medium 500, 52px, #5E2A29.
     The leading subject word is wrapped in <em> and rendered italic.
     white-space: nowrap keeps each title on a single line at desktop
     (Figma shows them on one line); mobile (≤768) wraps normally so
     long titles don't overflow narrow screens. */
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.15;
  color: var(--brand);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .activity-row__title { white-space: normal; }
}
.activity-row__title em {
  font-style: italic;
  font-weight: 500;
}
.activity-row__image {
  display: block;
  aspect-ratio: 16 / 11;
  /* Lighter rounding to match Figma (was 14px — too pronounced). */
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Hover lift/shadow removed per user direction — gave the wrong
   "this whole tile is clickable" affordance. The Explore CTA below is
   the click target. */
.activity-row__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 24px);
  max-width: 56ch;
}
.activity-row__copy p {
  /* Per Figma 4101:1620 — Inter Regular 400, 20px, #272727. */
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.6;
  color: #272727;
  max-width: 56ch;
}
/* CTA — text link with underline + arrow (NOT a pill button). Per Figma
   4101:1622 — Inter Medium 500, 20px, brand maroon, underlined. */
.activity-row__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: gap 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.activity-row__cta svg { width: 16px; height: 16px; }
.activity-row__cta:hover {
  gap: 12px;
  opacity: 0.85;
}

/* BEGIN YOUR JOURNEY — warm tan panel with 3 secondary buttons */
.begin-journey {
  /* Per Figma 4101:1688 — solid #bea884 (warm tan) rectangle. */
  background: #bea884;
  padding: clamp(64px, 7vw, 120px) 0;
  color: #fafafa;
}
.begin-journey__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
}
.begin-journey h2 {
  /* Per user: title color is #F0EADE (light cream), not the off-white
     I had before. Single line on desktop; wraps on mobile. */
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.1;
  color: #F0EADE;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .begin-journey h2 { white-space: normal; max-width: 16ch; }
}
.begin-journey__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 24px);
}
.begin-journey__btn {
  /* Per Figma button instances — white pill, 16px Inter Medium label,
     accent-brown text (#5A381C), chevron icon. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  background: #fafafa;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--accent);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.begin-journey__btn svg { width: 16px; height: 16px; transition: color 0.2s ease; }
.begin-journey__btn:hover {
  /* Per Figma button hover — colors flip: bg → accent (brown), label
     and icon → white. Slight lift + shadow for affordance. */
  background: var(--accent);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.3);
}
.begin-journey__btn { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.2s ease, color 0.2s ease; }

/* MOBILE/TABLET (≤ 899) — bumped from 768 per user direction so the
   quotes move into the cream band by the time the viewport hits 900.
   Hero recentres + image fills the section with the title and kicker
   at the BOTTOM CENTER, quotes move to a separate cream-bg band
   immediately below the hero (per Figma 1004:2691 mobile pattern).
   Activity rows collapse to single column with title above the image. */
@media (max-width: 899px) {
  .activities-hero {
    min-height: clamp(540px, 100vw, 720px);
    align-items: flex-end;
  }
  .activities-hero__veil {
    /* On mobile a bottom-up dim so the centered title at the bottom
       stays readable. */
    background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.55) 60%, rgba(20,18,15,0.85) 100%);
  }
  .activities-hero__inner {
    /* Re-center on mobile — desktop anchors LEFT via margin-left calc;
       on mobile we want the title/kicker BLOCK centered under the photo.
       margin: 0 auto centers the box; max-width: none lets it span. */
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(32px, 6vw, 56px);
    align-items: center;
    text-align: center;
    max-width: none;
    gap: 12px;
  }
  .activities-hero__title { font-size: clamp(40px, 11vw, 64px); }
  .activities-hero__kicker { font-size: 12px; max-width: 28ch; }
  .activities-hero__quotes { display: none; }
  .activities-hero__scroll { display: none; }

  /* Cream quotes band — only visible on mobile, sits right under the
     hero with 3 italic centered quotes per Figma mobile (1004:2691). */
  .activities-mobile-quotes {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: clamp(40px, 8vw, 64px) 22px;
    background: var(--cream-bg, #FDFBF3);
  }
  .activities-mobile-quotes p {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.45;
    color: rgba(40,40,40,0.85);
  }

  .activities-list {
    padding: 48px 0;
    gap: 56px;
  }
  .activity-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "image"
      "body";
    column-gap: 0;
    row-gap: 18px;
  }
  /* Reverse variants also stack title → image → body on mobile. */
  .activity-row--reverse {
    grid-template-areas:
      "title"
      "image"
      "body";
  }
  .activity-row__image { aspect-ratio: 4 / 3; border-radius: 6px; min-height: 0; }
  .activity-row__copy { gap: 14px; max-width: 100%; }
  .activity-row__title { font-size: clamp(26px, 7vw, 36px); }
  .activity-row__copy p { font-size: 16px; line-height: 1.6; }
  .activity-row__cta { font-size: 15px; }

  .begin-journey { padding: 56px 0 64px; }
  .begin-journey__buttons { flex-direction: column; width: 100%; max-width: 360px; }
  .begin-journey__btn { justify-content: center; }
}



/* ===========================================================
   HOST YOUR EVENT page (Figma 4101:1695) — round 2
   =========================================================== */

/* Hero — fold-height + NO dark overlay (Figma hero is bright, image
   stands on its own). The shared .inner-hero__veil is hidden here. */
body[data-page="host"] .inner-hero {
  aspect-ratio: auto;
  min-height: var(--hero-min-h);
  max-height: none;
}
body[data-page="host"] .inner-hero__inner {
  min-height: var(--hero-min-h);
  height: auto;
}
/* Hide the heavy darkening veil (Figma hero is bright) but keep a subtle
   bottom-only gradient on the SECTION (not on .inner-hero__image, which has
   position:absolute and we don't want to override). */
body[data-page="host"] .inner-hero__veil { display: none; }
body[data-page="host"] .inner-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.32) 100%);
  pointer-events: none;
  z-index: 0;
}
body[data-page="host"] .inner-hero__inner { z-index: 1; }

/* EXPERIENCE THE ASHRAM DIFFERENCE — title centered, 6 icon cards on cream.
   Bottom padding pulled tight (was 64-120, now 32-64) so the Spaces section
   below sits close — user feedback on the gap. */
.host-experience {
  padding: clamp(64px, 7vw, 120px) 0 clamp(32px, 3.5vw, 56px);
  background: var(--bg);
  text-align: center;
}
.host-experience__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.host-experience__head {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.host-experience__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: var(--brand);
  text-align: center;
}
.host-experience__head p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.65;
  color: var(--ink);
  text-align: center;
}
.host-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2vw, 32px);
  width: 100%;
}
@media (min-width: 720px) {
  .host-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .host-features { grid-template-columns: repeat(3, 1fr); }
}
.host-features li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 36px);
  background: #F0EADE;
  border-radius: 10px;
}
.host-features__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  margin-bottom: 4px;
}
.host-features__icon svg { width: 100%; height: 100%; }
.host-features h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.host-features p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 36ch;
}

/* SPACES FOR GATHERING — title + description, centered, on light bg.
   Top padding tight too (closes the gap with Experience above). */
.host-spaces {
  padding: clamp(20px, 2.5vw, 40px) 0 clamp(32px, 4vw, 56px);
  background: var(--bg);
  text-align: center;
}
.host-spaces__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.host-spaces__head { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.host-spaces__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: var(--brand);
}
.host-spaces__head p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.7;
  color: var(--ink);
}

/* INDOOR + OUTDOOR — cream-tinted section per Figma (different from
   the light bg of "Spaces for Gathering" above). */
.host-spaces-detail {
  background: #F0EADE;
  padding: clamp(56px, 6vw, 96px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
}
.host-spaces-detail__group { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.host-spaces-detail__group-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 var(--gutter);
}
.host-spaces-detail__group-head h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.2;
  color: var(--brand);
}
.host-spaces-detail__group-head p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ink);
}
.host-spaces-detail__grid {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}
@media (min-width: 720px) { .host-spaces-detail__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .host-spaces-detail__grid { grid-template-columns: repeat(4, 1fr); } }

.host-space-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 24px;
}
.host-space-card__image {
  /* Per Figma — taller image (4/3 instead of 506/403=1.26) so the photo
     reads as the dominant element of the card. */
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.host-space-card h4 {
  margin: 18px 22px 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2;
  color: var(--accent);
}
.host-space-card__meta {
  margin: 8px 22px 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(70, 71, 75);
}
.host-space-card p:not(.host-space-card__meta) {
  margin: 14px 22px 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.5;
  color: rgb(70, 71, 75);
}

/* FEATURE blocks (Accommodations + Elevate) — image + text two-column */
.host-feature {
  padding: clamp(56px, 7vw, 110px) 0;
  background: var(--bg);
}
.host-feature__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .host-feature__inner { grid-template-columns: 1fr 1fr; }
}
.host-feature__image {
  width: 100%;
  aspect-ratio: 779 / 584;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}
.host-feature__copy { display: flex; flex-direction: column; gap: 20px; }
.host-feature__copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: var(--brand);
}
.host-feature__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
  color: var(--ink);
}

/* START THE CONVERSATION — tan #BEA884 section per Figma */
.host-contact {
  padding: clamp(72px, 8vw, 130px) 0;
  background: #BEA884;
  color: #ffffff;
}
.host-contact__inner {
  width: min(100%, calc(var(--container-max) - 60px));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4.5vw, 56px);
}
.host-contact__head {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.host-contact__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: #ffffff;
}
.host-contact__head p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
}
.host-contact__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) {
  .host-contact__form { grid-template-columns: 1fr 1fr; }
}
.host-field { display: flex; flex-direction: column; gap: 0; }
.host-field--full { grid-column: 1 / -1; }
.host-field label {
  /* Figma uses placeholder-as-label; we keep the label for a11y but hide it. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.host-field input,
.host-field textarea {
  background: #ffffff;
  border: 0;
  border-radius: 8px;
  padding: 18px 22px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  transition: box-shadow 0.2s ease;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.host-field input::placeholder,
.host-field textarea::placeholder { color: #666; opacity: 1; }
.host-field input:focus,
.host-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.host-field textarea { resize: vertical; min-height: 160px; }
.host-contact__submit {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: var(--brand);
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  margin: clamp(8px, 1.5vw, 18px) auto 0;
}
.host-contact__submit::after {
  content: "";
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6h8M7 3l3 3-3 3'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}
.host-contact__submit:hover { transform: translateY(-2px); }

/* MOBILE OVERRIDES */
@media (max-width: 768px) {
  body[data-page="host"] .inner-hero,
  body[data-page="host"] .inner-hero__inner {
    min-height: clamp(560px, 110vw, 760px);
  }
  body[data-page="host"] .inner-hero__inner {
    align-items: center;
    text-align: center;
    justify-content: flex-end;
    gap: 16px;
    padding-bottom: clamp(40px, 7vw, 64px);
  }
  body[data-page="host"] .inner-hero__kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
    max-width: 26ch;
  }
  body[data-page="host"] .inner-hero__title {
    font-size: clamp(40px, 11vw, 60px);
    line-height: 1.05;
  }

  .host-experience { padding: 48px 0 56px; }
  .host-experience__head h2 { font-size: 32px; }
  .host-experience__head p { font-size: 16px; }
  .host-features { gap: 16px; }
  .host-features li { padding: 28px 24px; }
  .host-features h3 { font-size: 15px; }
  .host-features p { font-size: 14px; }

  .host-spaces { padding: 48px 0 24px; }
  .host-spaces__head h2 { font-size: 32px; }
  .host-spaces__head p { font-size: 15px; }

  .host-spaces-detail { padding: 40px 0 56px; gap: 40px; }
  .host-spaces-detail__group-head h3 { font-size: 22px; }
  .host-spaces-detail__group-head p { font-size: 15px; }

  /* Mobile: convert .host-spaces-detail__grid into a swipe carousel */
  .host-spaces-detail__grid {
    grid-template-columns: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 0 22px 4px;
  }
  .host-spaces-detail__grid::-webkit-scrollbar { display: none; }
  .host-spaces-detail__grid .host-space-card {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: center;
  }
  .host-space-card h4 { font-size: 19px; }
  .host-space-card__meta { font-size: 12.5px; }
  .host-space-card p:not(.host-space-card__meta) { font-size: 14px; }

  .host-feature { padding: 48px 0 56px; }
  .host-feature__inner { gap: 24px; }
  .host-feature__copy h2 { font-size: 30px; }
  .host-feature__copy p { font-size: 16px; }
  .host-feature--left .host-feature__copy { order: 2; }
  .host-feature--left .host-feature__image { order: 1; }

  .host-contact { padding: 56px 0 72px; }
  .host-contact__head h2 { font-size: 30px; }
  .host-contact__head p { font-size: 15px; }
  .host-contact__form { gap: 14px; }
  .host-field input,
  .host-field textarea { padding: 14px 18px; font-size: 15px; }
  .host-contact__submit { width: auto; padding: 12px 24px; font-size: 15px; }
}


/* ===========================================================
   GETTING HERE PAGE — Round 1
   ===========================================================
   New page. Layout follows the meditation/sound-healing pattern:
   wider container (1680), fold-height hero, then a series of
   sections with the same warm-cream / brand-maroon palette.

   New components introduced here:
     .find-us            — white card overlapping the hero photo
     .travel-glance      — 3-col table → 3 stacked cards on mobile
     .travel-detail      — heading + tabbed panel
       .travel-tabs        — desktop tab strip (hidden on mobile)
       .travel-accordion__head — mobile accordion toggle (hidden on desktop)
       .travel-panel       — 5 modes (car/air/bus/rental/local)
     .rental-card        — bordered card with reserve CTA
     .local-card         — bordered card for local transport providers
   =========================================================== */

body[data-page="getting-here"] {
  --container-max: 1680px;
  --gutter: clamp(20px, 2.4vw, 56px);
}

/* Hero fold-height (same as meditation / sound-healing / wisdom). */
body[data-page="getting-here"] .inner-hero {
  aspect-ratio: auto;
  min-height: var(--hero-min-h);
  max-height: none;
}
body[data-page="getting-here"] .inner-hero__inner {
  min-height: var(--hero-min-h);
  height: auto;
  /* User: "the text on the hero is blocked by the card and now put that
     towards the top". Base .inner-hero__inner uses justify-content:
     flex-end (text anchored bottom-left); override to flex-start with
     padding-top so the title sits in the upper third of the hero and
     never collides with the Find Us card that pulls up into the hero
     via negative margin. */
  justify-content: flex-start;
  padding-top: clamp(80px, 11vw, 160px);
  padding-bottom: 0;
}
body[data-page="getting-here"] .inner-hero__image {
  background-position: center;
}

/* ===== FIND US — white card that overlaps the hero photo above ==== */
.find-us {
  position: relative;
  /* Negative margin so the card pulls up into the hero. The hero has
     position: relative + overflow: hidden but the card is OUTSIDE
     the hero — z-index lifts it above the page bg. */
  margin-top: clamp(-160px, -12vw, -100px);
  z-index: 2;
  /* Bottom padding tightened (was 48-96) — combined with Travel-at-a-Glance's
     top padding above it the gap was 112-206px, too airy. Now ~56-104px. */
  padding: 0 var(--gutter) clamp(24px, 3vw, 48px);
}
.find-us__card {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 30px 80px -30px rgba(40,30,20,0.25);
  overflow: hidden;
}
.find-us__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(36px, 4.5vw, 64px);
}
@media (min-width: 900px) {
  .find-us__grid { grid-template-columns: 1fr 1.2fr; align-items: center; }
}
.find-us__copy { display: flex; flex-direction: column; gap: 18px; }
.find-us__copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  color: var(--brand);
}
.find-us__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.75;
  color: var(--ink);
}
.find-us__address {
  font-style: normal;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin-top: 4px;
}
.find-us__address strong { font-weight: 600; }
.find-us__address a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.find-us__address a:hover { color: var(--brand); }
.find-us__directions {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
  margin-top: 8px;
  display: none; /* desktop hides the link — the address is clickable. */
}
.find-us__map {
  border-radius: 6px;
  overflow: hidden;
  background: #E8F0E0;
}
.find-us__map a { display: block; }
.find-us__map img { display: block; width: 100%; height: auto; }
.find-us__notice {
  /* Per user: "It shouldn't be a bottom bar. It should be actually a
     box within the white box that is centered at the bottom." Was a
     full-width strip flush with the card edges; now INSET with side
     margins so it reads as a contained pill inside the white card. */
  background: #F0EADE;
  border-radius: 6px;
  padding: clamp(14px, 1.4vw, 18px) clamp(24px, 3vw, 40px);
  margin: 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
  text-align: center;
}
.find-us__notice p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(14px, 1vw, 16px);
  color: var(--ink);
  line-height: 1.55;
}
.find-us__notice a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* ===== TRAVEL AT A GLANCE ======================================== */
.travel-glance {
  /* Top padding tightened (was 64-110) to close the gap with the Find Us
     card above. Bottom padding unchanged so the rest of the page rhythm
     stays the same. */
  padding: clamp(32px, 3.5vw, 56px) 0 clamp(40px, 5vw, 72px);
  background: #fafafa;
}
.travel-glance__head {
  width: min(100%, var(--container-max));
  margin: 0 auto clamp(40px, 4.5vw, 60px);
  padding: 0 var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.travel-glance__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  color: var(--brand);
  line-height: 1.1;
}
.travel-glance__head p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--ink);
  max-width: 620px;
}
/* Wrap holds the container-width + gutter so the table itself can be a
   clean grid that goes edge-to-edge of the cream block. User feedback:
   "boxes are overflowing… two bars on the sides" — those were the
   padding strips between the cream bg and the white header cells. */
.travel-glance__table-wrap {
  width: min(100%, calc(var(--container-max) - 120px));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.travel-glance__table {
  display: grid;
  grid-template-columns: 1.4fr 1.5fr 1.1fr;
  background: #F0EADE;
  border-radius: 6px;
  overflow: hidden;
}
/* Alternating column shade — col 2 (Best Option) gets the lighter cream
   F5F2EC so the 3 columns read distinctly. Header row stays pure white
   regardless of column. */
.travel-glance__cell:nth-child(3n+2) {
  background: #F5F2EC;
}
.travel-glance__row--head .travel-glance__cell:nth-child(3n+2) {
  background: #FFFFFF;
}
.travel-glance__row {
  display: contents;
}
.travel-glance__cell {
  /* Tightened from clamp(16-22) → clamp(11-14) so rows are ~32px tall like
     the Figma instead of ~50px. User: "It still doesn't look like how the
     travel at a glance looks in the Figma" — diff was overstuffed rows. */
  padding: clamp(11px, 1.1vw, 14px) clamp(20px, 2vw, 28px);
  font-family: var(--sans);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.4;
  color: var(--ink);
  border-bottom: 1px solid rgba(94,42,41,0.08);
}
.travel-glance__row:last-child .travel-glance__cell { border-bottom: 0; }
.travel-glance__row--head .travel-glance__cell {
  background: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12.5px;
  font-weight: 600;
  /* Figma uses a darker ink color for header labels, not maroon brand. */
  color: var(--ink);
  /* Header row gets slightly more breathing room than data rows so the
     uppercase labels read as a header band. */
  padding-top: 14px;
  padding-bottom: 14px;
}

/* ===== DETAIL TRAVEL OPTIONS ===================================== */
.travel-detail {
  padding: clamp(48px, 5.5vw, 96px) 0 clamp(72px, 8vw, 130px);
  background: #fafafa;
}
.travel-detail__title {
  margin: 0 auto clamp(36px, 4vw, 56px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 52px);
  color: var(--brand);
  line-height: 1.1;
  text-align: center;
}
/* Same wrap pattern as Travel at a Glance — wrap holds the gutter so
   the tab strip itself is clean and the active white tab can sit flush
   with the edges of the cream band. Was leaving cream "bars" left/right
   of CAR / LOCAL TRANSPORT (user feedback). */
.travel-tabs-wrap,
.travel-panels-wrap {
  width: min(100%, calc(var(--container-max) - 120px));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.travel-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #F0EADE;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  box-sizing: border-box;
}
.travel-tab {
  background: transparent;
  border: 0;
  /* Tightened from clamp(14, 1.4vw, 20) so the tab strip reads as a thinner
     header band, not a thick toolbar (user feedback: "extending too much
     too high"). */
  padding: 12px clamp(8px, 1vw, 16px);
  font-family: var(--sans);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  cursor: pointer;
  transition: background 0.2s ease;
}
.travel-tab:hover { background: rgba(255,255,255,0.4); }
.travel-tab.is-active {
  background: #FFFFFF;
  border-radius: 4px;
  margin: 4px;
  padding: clamp(10px, 1.2vw, 16px) clamp(8px, 1vw, 16px);
}

.travel-panels {
  /* Wrapped in .travel-panels-wrap which carries the gutter — see above. */
  box-sizing: border-box;
}
.travel-panel { display: none; }
.travel-panel.is-active { display: block; }

/* Mobile-only accordion head — hidden on desktop */
.travel-accordion__head { display: none; }

.travel-panel__inner {
  background: #FFFFFF;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}
.travel-panel__banner {
  /* Exact Figma brown #734B1F (was #6B4A24 — too dark). Padding tightened
     so the banner reads as a thin strip, not a thick bar (user feedback:
     "the bars for the detailed travel options are extending too much too
     high"). */
  background: #734B1F;
  color: #FFFFFF;
  text-align: center;
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 1em;
}
.travel-panel__grid {
  padding: clamp(28px, 3vw, 44px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}
@media (min-width: 720px) {
  .travel-panel__grid--2col {
    grid-template-columns: 1fr 1px 1fr;
    column-gap: clamp(20px, 2.4vw, 32px);
  }
  .travel-panel__grid--2col::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    width: 1px;
    justify-self: center;
    background: rgba(0, 0, 0, 0.18);
  }
  .travel-panel__grid--2col > .travel-panel__col:nth-of-type(1) { grid-column: 1; }
  .travel-panel__grid--2col > .travel-panel__col:nth-of-type(2) { grid-column: 3; }
}
.travel-panel__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.travel-panel__col-label {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8B6914;
}
.travel-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.travel-rows li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 1.4vw, 18px) clamp(16px, 1.8vw, 22px);
  background: #F0EADE;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: clamp(14px, 1vw, 16px);
  color: var(--ink);
}
.travel-rows--stacked li { flex-direction: column; align-items: flex-start; gap: 4px; }
.travel-rows__name {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
a.travel-rows__name { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a.travel-rows__name:hover { color: var(--brand); }
.travel-rows__sub {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(40,40,40,0.7);
  line-height: 1.4;
}
.travel-rows__value {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

/* Air: hubs displayed in a small 2×2 tile grid */
.travel-hubs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.travel-hub {
  background: #F0EADE;
  border-radius: 6px;
  padding: clamp(14px, 1.4vw, 18px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.travel-hub strong {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--brand);
}
.travel-hub span {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
}

.travel-panel__col--info { gap: 10px; }
.travel-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 1.4vw, 18px);
  background: #F1F1F1;
  border-radius: 6px;
}
.travel-info__icon {
  width: 22px; height: 22px;
  color: var(--brand);
  flex-shrink: 0;
}
.travel-info p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(13px, 0.95vw, 15px);
  color: var(--ink);
  line-height: 1.5;
}
.travel-panel__footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px);
  padding: clamp(14px, 1.4vw, 18px);
  background: #F1F1F1;
  border-radius: 6px;
}
.travel-panel__footnote svg {
  width: 20px; height: 20px;
  color: var(--ink);
  flex-shrink: 0;
}
.travel-panel__footnote p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(13px, 0.9vw, 14px);
  color: var(--ink);
  line-height: 1.5;
  text-align: left;
}

/* Rental car cards */
.rental-card {
  border: 1px solid rgba(94,42,41,0.18);
  border-radius: 8px;
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rental-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.rental-card__name {
  font-family: var(--sans);
  font-size: clamp(13px, 0.95vw, 14px);
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--brand);
}
.rental-card__pill {
  background: #FBF7EE;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.rental-card__addr {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
.rental-card__phone {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rental-card__cta {
  align-self: stretch;
  margin-top: 8px;
  padding: 12px 16px 12px 24px;
  border: 1px solid rgba(94,42,41,0.3);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand);
  transition: all 0.2s ease;
}
.rental-card__cta:hover { background: var(--brand); color: #fff; }
.rental-card__arrow {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.rental-card__cta:hover .rental-card__arrow { background: #fff; color: var(--brand); }

/* Local transport cards */
.local-card {
  border: 1px solid rgba(94,42,41,0.18);
  border-radius: 8px;
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.local-card h4 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(13px, 0.95vw, 14px);
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--brand);
}
.local-card p {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}
.local-card a {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ===========================================================
   OUR STORY page (Figma 2152:2252)
   =========================================================== */

/* Hero — same fold-height pattern as Host/Meditation */
body[data-page="our-story"] .inner-hero {
  aspect-ratio: auto;
  min-height: var(--hero-min-h);
  max-height: none;
}
body[data-page="our-story"] .inner-hero__inner {
  min-height: var(--hero-min-h);
  height: auto;
}

/* A HOME CLOSER TO HOME — carousel TOP with peek of prev/next, title +
   copy CENTERED below, then nav buttons. Per Figma 2152:2253. */
.story-home {
  padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 6vw, 96px);
  background: rgba(240, 234, 222, 0.5); /* #F0EADE at 50% per QC r17 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3vw, 44px);
  overflow: hidden;
}
.story-home__carousel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.story-home__viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.story-home__track {
  display: flex;
  gap: clamp(20px, 2.5vw, 44px);
  /* Padding centers slide 0 (DOM idx 1, after the left clone) within
     viewport when translateX = -(slide_w + gap). The padding equals
     half the leftover viewport width. */
  padding: 0 calc(50% - clamp(220px, 27vw, 420px));
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
}
.story-home__track.is-dragging { cursor: grabbing; transition: none; }
.story-home__slide {
  /* Active slide is ~54vw so prev + next fit fully on screen. */
  flex: 0 0 clamp(440px, 54vw, 840px);
  aspect-ratio: 1086 / 520;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.35s ease, opacity 0.35s ease;
  user-select: none;
}
.story-home__slide.is-active {
  filter: none;
  opacity: 1;
}

/* Progress indicator — ONE centered maroon dot, hairlines extending to
   either side, small faded "tick" dots at each end (Figma 2152:2253).
   Full width with side gutters so the hairlines run nearly edge-to-edge
   of the page at every viewport, no max-cap (was capped at 1280 which
   made the lines look stub-y past 1300px viewports). */
.story-home__progress {
  width: 100%;
  padding: 0 clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.story-home__progress-line {
  height: 1px;
  background: rgba(94, 42, 41, 0.22);
}
.story-home__progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #744B20;
}
.story-home__progress-tick {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(94, 42, 41, 0.22);
}
.story-home__indicator {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
}

/* Title is centered (italic STIX), body PARAGRAPHS are LEFT-aligned
   within a centered column. Per user: "text should be left-heavy like
   a paragraph, not centered." */
.story-home__copy {
  width: min(100%, 760px);
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.story-home__copy h2 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.15;
  color: var(--brown);
  text-align: center;
}
.story-home__copy p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--ink);
  text-align: left;
}
.story-home__close em {
  font-style: italic;
  font-family: var(--serif);
  font-weight: 500;
}

.story-home__nav {
  display: flex;
  gap: 12px;
}
.story-home__nav .carousel-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(94, 42, 41, 0.3);
  background: transparent;
  color: var(--brand);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.story-home__nav .carousel-btn:hover {
  background: var(--brand);
  color: #fff;
}
.story-home__nav .carousel-btn svg { width: 14px; height: 14px; }

/* THE MAKING OF THE ASHRAM — title above, full-width hero image */
.story-making {
  padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 7vw, 110px);
  background: var(--bg);
}
.story-making__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 48px);
  align-items: center;
  text-align: center;
}
.story-making__head { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }
.story-making__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: var(--brown);
}
.story-making__head p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--ink);
}
.story-making__image {
  width: 100%;
  aspect-ratio: 1622 / 913;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-making__play {
  width: 69px;
  height: 69px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.story-making__play svg {
  width: 32px;
  height: 32px;
  margin-left: 3px;
}

/* CONTINUE THE JOURNEY — CREAM #F0EADE band per Figma (user-specified
   color, was tan #BEA884). Text shifts to maroon since bg is light. */
.story-continue {
  padding: clamp(64px, 7vw, 110px) 0;
  background: #F0EADE;
  color: var(--brand);
  text-align: center;
}
.story-continue__inner {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
}
.story-continue__inner h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: var(--brand);
}
.story-continue__inner > p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 720px;
}
.story-continue__buttons {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.story-continue__btn {
  /* Filled white pill per Figma default state on the tan band. */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--bg);
  color: #5A381C;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease,
              color 0.2s ease, border-color 0.2s ease;
}
.story-continue__btn:hover {
  /* Figma hover: fill the pill brown, flip text to white. */
  transform: translateY(-2px);
  background: #5A381C;
  border-color: #5A381C;
  color: #ffffff;
}
/* Invert the filled-circle arrow icon on hover so it stays legible on
   the now-brown bg: circle becomes white, arrow becomes brown. */
.story-continue__btn:hover svg rect { fill: #FAFAFA; }
.story-continue__btn:hover svg path { stroke: #5A381C; }
.story-continue__arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.story-continue__arrow svg { width: 12px; height: 12px; }

/* MOBILE */
@media (max-width: 768px) {
  body[data-page="our-story"] .inner-hero,
  body[data-page="our-story"] .inner-hero__inner {
    min-height: clamp(560px, 110vw, 760px);
  }
  body[data-page="our-story"] .inner-hero__inner {
    align-items: center;
    text-align: center;
    justify-content: flex-end;
    gap: 16px;
    padding-bottom: clamp(40px, 7vw, 64px);
  }
  body[data-page="our-story"] .inner-hero__kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
    max-width: 26ch;
  }
  body[data-page="our-story"] .inner-hero__title {
    font-size: clamp(40px, 11vw, 60px);
    line-height: 1.05;
  }

  .story-home { padding: 32px 0 56px; gap: 24px; }
  /* M5: Mobile = single-slide mode per Figma. The slide takes the full
     viewport minus a small inset; no peek of next/prev. Padding lives
     on the track (the flex container after the carousel rewrite). */
  .story-home__track {
    padding: 0 22px;
    gap: 22px;
  }
  .story-home__slide {
    flex: 0 0 calc(100% - 44px);
    aspect-ratio: 4 / 3;
    filter: none;
    opacity: 1;
  }
  /* Tighter progress on mobile — same single-dot pattern but shorter
     lines so it doesn't dwarf the slide. */
  .story-home__progress { width: 60%; max-width: 280px; }
  .story-home__copy h2 { font-size: 26px; }
  .story-home__copy p { font-size: 15px; }

  .story-making { padding: 32px 0 56px; }
  .story-making__inner { gap: 24px; }
  .story-making__head h2 { font-size: 30px; }
  .story-making__head p { font-size: 16px; }

  .story-continue { padding: 56px 0 64px; }
  .story-continue__inner h2 { font-size: 30px; }
  .story-continue__inner > p { font-size: 17px; }
  .story-continue__btn { padding: 12px 22px; font-size: 15px; }
  .story-continue__buttons { width: 100%; flex-direction: column; max-width: 320px; }
  .story-continue__btn { justify-content: center; }
}


/* ===========================================================
   GLOBAL MOVEMENT PAGE — Round 1
   ===========================================================
   New page. Follows the meditation/sound-healing/wisdom/getting-here
   pattern: container 1680, fold-height hero, sections in the warm
   palette family. Page-specific components:

     .gm-intro         — centered heading + body
     .gm-mission-band  — maroon #912E34 strip with lead + quote
     .gm-mission-card  — cream EFEADF panel: quote + photo (2-col)
     .gm-network       — cream EFEADF section: copy + 2x2 cards grid
     .gm-network-card  — brown #734B1F card with photo + label
     .gm-usa           — split: photo collage + copy + CTA button
     .gm-dharampur     — heading + body + featured photo w/ caption
     .gm-follow        — gold #BEA884 band, two social-icon columns
   =========================================================== */

body[data-page="global-movement"] {
  --container-max: 1680px;
  --gutter: clamp(20px, 2.4vw, 56px);
}

/* Hero fold height (same family as other inner pages). */
body[data-page="global-movement"] .inner-hero {
  aspect-ratio: auto;
  min-height: var(--hero-min-h);
  max-height: none;
}
body[data-page="global-movement"] .inner-hero__inner {
  min-height: var(--hero-min-h);
  height: auto;
}
body[data-page="global-movement"] .inner-hero__image {
  background-position: center;
}

/* ===== From Mission to Movement — LEFT-aligned per user direction ===== */
.gm-intro {
  padding: clamp(64px, 7vw, 110px) 0;
  background: #FAFAFA;
}
.gm-intro__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
}
.gm-intro h2 {
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
  color: #5E2A29;
}
.gm-intro p {
  margin: 0 auto;
  text-align: left;
  font-family: var(--sans);
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.75;
  color: #272727;
  max-width: 900px;
}

/* ===== Maroon mission statement band (Figma #912E34) ===== */
.gm-mission-band {
  background: #912E34;
  color: #FFFFFF;
  /* Reduced from clamp(56, 6vw, 96) so the band proportion matches
     Figma (1920 × 279 ≈ 14.5% height-to-width ratio). Was leaving
     too much red space above and below the text at every viewport. */
  padding: clamp(20px, 4vw, 72px) var(--gutter);
}
.gm-mission-band__inner {
  width: min(100%, 1200px);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.8vw, 28px);
}
.gm-mission-band__lead {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 18px);
  letter-spacing: 0.04em;
  color: #FFFFFF;
}
.gm-mission-band__quote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.25;
  color: #FFFFFF;
  text-wrap: balance;
}

/* ===== Maroon quote band #2 — "There is a mighty mission within us..."
   Same #912E34 as the first band; this one is below the From Mission
   to Movement section per Figma order. */
.gm-quote-band {
  background: #912E34;
  color: #FFFFFF;
  /* Per Figma 4148:4066: 1920×361. Quote group 996×197 at y=82. So
     padding ≈ 82 top + 82 bottom = 164, content 197 → total 361. */
  padding: 82px var(--gutter);
}
.gm-quote-band__inner {
  width: min(100%, 1100px);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 32px);
}
.gm-quote-band blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.4;
  color: #FFFFFF;
  text-wrap: balance;
}
.gm-quote-band cite {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(12px, 0.95vw, 14px);
  letter-spacing: 0.16em;
  color: #FFFFFF;
}

/* ===== Mission Card (cream #EFEADF) — 2x2 grid:
       Top-Left:  "Realize One's True Self..." + body + Learn SRMD →
       Top-Right: stats 2x2 white cards
       Bot-Left:  "...And Serve Others Selflessly" + body + Learn SRLC →
       Bot-Right: photo of Pujya blessing child
   ===== */
.gm-mission-card {
  background: #EFEADF;
  /* Per Figma 4148:4071: section 1920×1054. Content frame 1245×888
     at y=84. So top + bottom padding ≈ 84 each, content area 888 tall. */
  padding: 84px var(--gutter);
}
.gm-mission-card__inner {
  /* Per Figma 4148:4073 content frame: 1245 wide. Horizontal gutter
     at 1920 = (1920-1245)/2 = 337.5 each. */
  width: min(1245px, calc(100% - clamp(60px, 9vw, 360px)));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Vertical gap between Realize row and Serve Others row — Figma
     shows substantial whitespace between the rows. */
  gap: clamp(40px, 4.5vw, 88px);
}
.gm-mission-card__row {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 40px);
  align-items: stretch;
}
@media (min-width: 900px) {
  /* Per Figma layout (each row is 1245 wide, fixed heights):
     Row 1: text 574 + 265 gap + stats 406, row height 366
     Row 2: photo 592 + 120 gap + text 533, row height 422
     Both use space-between so the gap naturally fills the middle. */
  .gm-mission-card__row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
  }
  .gm-mission-card__row:nth-of-type(1) { min-height: 366px; }
  .gm-mission-card__row:nth-of-type(1) .gm-mission-card__block { max-width: 574px; flex: 0 1 574px; }
  .gm-mission-card__row:nth-of-type(1) .gm-stats { flex: 0 0 405px; padding-top: 26px; }
  .gm-mission-card__row:nth-of-type(2) { min-height: 422px; }
  .gm-mission-card__row:nth-of-type(2) .gm-mission-card__photo { flex: 0 0 592px; }
  .gm-mission-card__row:nth-of-type(2) .gm-mission-card__block { max-width: 533px; flex: 0 1 533px; padding-top: 32px; }
}
.gm-mission-card__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gm-mission-card__block h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  /* Exact Figma color #5E2A29 brand maroon for both headings. */
  color: #5E2A29;
}
.gm-mission-card__block p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  color: #272727;
}
.gm-mission-card__link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: #5E2A29;
  text-decoration: underline;
  text-underline-offset: 4px;
  align-self: flex-start;
  margin-top: 6px;
}
.gm-mission-card__link span { margin-left: 6px; }
.gm-mission-card__link:hover { color: #3F1C1B; }

/* Stats 2x2 grid — per Figma each card is 188×132 with 20px H / 10px V
   padding. Grid is 405 wide total (2 cards × 188 + 17 gap × 2... = 405).
   Numbers are ~44px in Figma. */
.gm-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 188px);
  gap: 17px;
  justify-self: end;
}
.gm-stats li {
  background: #FAFAFA;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 132px;
  box-sizing: border-box;
}
.gm-stats__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: #E26326;
}
.gm-stats__label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #5A381C;
}
@media (max-width: 1023px) {
  .gm-stats { grid-template-columns: repeat(2, 1fr); justify-self: stretch; }
  .gm-stats__num { font-size: clamp(28px, 3.5vw, 44px); }
}

.gm-mission-card__photo {
  width: 100%;
  /* Per Figma 4148:4097: photo is 592×422 → ratio 592/422 ≈ 1.40. */
  max-width: 592px;
  aspect-ratio: 592 / 422;
  border-radius: 8px;
  background: url("assets/gm-mission-photo.jpg") center / cover no-repeat;
  box-shadow: 0 30px 80px -30px rgba(40,30,20,0.35);
}

/* ===== Our Global Network (cream #EFEADF, 2x2 cards) ===== */
.gm-network {
  background: #EFEADF;
  padding: clamp(56px, 6vw, 100px) var(--gutter);
}
.gm-network__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
}
.gm-network__copy { display: flex; flex-direction: column; gap: 22px; }
.gm-network__copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  color: #5E2A29;
}
.gm-network__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.75;
  color: #272727;
}
.gm-network__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 4 across on desktop per Figma (was 2x2). 2 across on tablet, 1 on phone. */
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.8vw, 24px);
}
@media (min-width: 700px) {
  .gm-network__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .gm-network__grid { grid-template-columns: repeat(4, 1fr); }
}
.gm-network-card {
  /* Default brown shade. Alternating darker shade on the 2nd + 4th card
     below — Anita's Figma callout: "Notice that there's a different
     shade of white for each of these cards." */
  background: #734B1F;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gm-network-card:nth-child(2n) {
  background: #5E3D17;
}
.gm-network-card__photo {
  width: 100%;
  /* Taller portrait aspect since the cards are 4-across narrow columns
     on desktop (matches the Figma reference image 190). */
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
}
.gm-network-card__label {
  margin: 0;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.4;
  color: #FAFAFA;
}
.gm-network-card__label span {
  display: block;
  font-weight: 400;
  opacity: 0.85;
  font-size: 0.92em;
  margin-top: 2px;
}

/* Carousel arrows — desktop hides them (grid shows all 4 cards at once).
   mobile.css below 768 reveals them and turns .gm-network__grid into a
   horizontal-scroll snap carousel. */
.gm-network__nav { display: none; }
.gm-network__btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(94,42,41,0.32);
  background: transparent;
  color: #5E2A29;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.gm-network__btn:hover { background: #5E2A29; color: #fff; }
.gm-network__btn svg { width: 18px; height: 18px; }

/* ===== A Spiritual Home in the US ===== */
.gm-usa {
  /* Per Figma 4148:4117: section 1583 × 593. Photo (left mask group)
     814 × 593, text (right) 656 × 539. Tight vertical padding so the
     section reads compact. */
  padding: 40px var(--gutter);
  background: #FAFAFA;
}
.gm-usa__inner {
  width: min(100%, 1583px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .gm-usa__inner { grid-template-columns: 1.1fr 1fr; }
}
/* Per Figma 4148:4118: photo 814 × 593 → ratio 814/593 ≈ 1.373 (closer
   to 4:3 than 16:9 but slightly wider). */
.gm-usa__media {
  width: 100%;
  max-width: 814px;
  aspect-ratio: 814 / 593;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}
.gm-usa__copy { display: flex; flex-direction: column; gap: 22px; }
.gm-usa__copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  color: #5E2A29;
}
.gm-usa__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.75;
  color: #272727;
}
.gm-usa__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(94,42,41,0.32);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: #5A381C;
  transition: all 0.2s ease;
}
.gm-usa__btn:hover {
  background: #5A381C;
  color: #fff;
  border-color: #5A381C;
}
/* Invert the filled-circle arrow icon on hover so it stays legible on
   the filled-brown background (Figma hover state: white circle, brown
   arrow). */
.gm-usa__btn:hover svg rect { fill: #FAFAFA; }
.gm-usa__btn:hover svg path { stroke: #5A381C; }
.gm-usa__btn span { font-size: 16px; }

/* ===== Dharampur featured section ===== */
.gm-dharampur {
  /* Per Figma 4148:4127: section 1721 wide × 1095 tall. Inner content
     header (249) + gap (70) + photo (776) = 1095. Tight top/bottom
     padding so the whole section hits the target. */
  padding: 24px var(--gutter);
  background: #FAFAFA;
}
.gm-dharampur__inner {
  /* Per Figma the section content is 1721 wide. */
  width: min(100%, 1721px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.5vw, 56px);
}
.gm-dharampur__copy {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
  align-items: center;
}
.gm-dharampur__copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  color: #5E2A29;
}
.gm-dharampur__copy p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.75;
  color: #272727;
}
.gm-dharampur__feature {
  /* Per Figma 4148:4131: viewport 1721×566 + 26px gap + caption + 26px gap +
     button row (54px). Vertical stack centered. */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.gm-dharampur__carousel {
  width: 100%;
}
.gm-dharampur__viewport {
  position: relative;
  width: 100%;
  /* Figma viewport: 1721 × 566 → ratio 1721/566 ≈ 3.041. */
  aspect-ratio: 1721 / 566;
  overflow: hidden;
}
.gm-dharampur__track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.gm-dharampur__slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gm-dharampur__caption {
  font-family: var(--sans);
  text-align: center;
  color: #282828;
  /* Figma: title 22/36 medium, body 20/36 regular. Scales to 1920 base. */
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: clamp(28px, 1.875vw, 36px);
  max-width: 1080px;
  margin: 0;
}
.gm-dharampur__caption strong {
  display: block;
  font-weight: 500;
  color: #282828;
  font-size: clamp(17px, 1.146vw, 22px);
}
.gm-dharampur__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma component 79: total 142×54, two ~53×54 buttons with ~36px gap.
     Each button is a 1px-border circle housing a 42×42 chevron. */
  gap: clamp(24px, 1.875vw, 36px);
}
.gm-dharampur__btn {
  width: clamp(44px, 2.76vw, 53px);
  height: clamp(44px, 2.81vw, 54px);
  padding: 0;
  border: 1px solid #5E2A29;
  border-radius: 100px;
  background: transparent;
  color: #5E2A29;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.gm-dharampur__btn:hover {
  /* Figma hover variant fills the circle maroon with a white arrow. */
  background: #5e2a29;
  color: #fafafa;
  border-color: #5e2a29;
}
.gm-dharampur__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.gm-dharampur__btn svg {
  /* Figma's chevron asset is drawn inside a 42x42 viewBox; rendering at
     42 inside the 54 button matches the Figma proportion (was 24 which
     under-sized the arrow). */
  width: clamp(34px, 2.19vw, 42px);
  height: clamp(34px, 2.19vw, 42px);
  display: block;
}

/* ===== Follow SRMD / SRLC (gold #BEA884 band) ===== */
.gm-follow {
  background: #BEA884;
  /* Per Figma 4148:4132: 1920×207. Labels at y=59, icons at y=104.
     Total content 89, padding ≈ 59 each side. */
  padding: 59px var(--gutter);
}
.gm-follow__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 48px);
  text-align: center;
}
@media (min-width: 700px) {
  .gm-follow__inner { grid-template-columns: 1fr 1fr; }
}
.gm-follow__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.gm-follow__label {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  color: #5E2A29;
}
.gm-follow__icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  align-items: center;
}
.gm-follow__icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: transparent;
  color: #5E2A29;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.gm-follow__icons a:hover { transform: translateY(-2px); opacity: 0.7; }
/* Figma renders each icon inside a 44x44 frame: Instagram glyph fills a
   24x24 inner; Facebook + LinkedIn fill 22x22; X is the smallest at
   ~13x13. The SVGs we ship from Figma have matching viewBoxes (Insta
   is 0 0 24 24, others 0 0 44 44), so rendering each at its viewBox's
   nominal size reproduces Figma's relative sizing. */
.gm-follow__icons svg { width: 44px; height: 44px; }
.gm-follow__icons li:nth-child(1) svg { width: 24px; height: 24px; }


/* ===========================================================
   SOCIAL IMPACT page — Figma frame 4156:931 (1920x9914)
   Built 1:1 from extracted text positions / font specs / hex
   colors / box dimensions. 8 sections top-to-bottom:
   1. HERO         (y=195-906, school-children full-bleed)
   2. INTRO        (y=915-1691, cream #F0EADE band, video+copy)
   3. POCONOS      (y=1761-3650, big cream card holding 3 subsections)
   4. USA          (y=3797-4500, title-left + chapters-card-right)
   5. MOTION+UNIS  (y=4415-5713, single cream wrapper card)
   6. WORLD        (y=5839-7492, stats + 27M pill + globe cards)
   7. CARE 10      (y=7562-8763, 5x2 dark photo tiles)
   8. CTA          (y=8871-9190, #BEA884 tan band)
   =========================================================== */
body[data-page="social-impact"] {
  --container-max: 1640px;     /* Figma content area 140px gutter both sides */
  --gutter: clamp(20px, 2.4vw, 56px);
  --si-cream: #F0EADE;
  --si-cream-soft: #FBF5E8;
  --si-tan: #BEA884;
  --si-orange: #E26326;
  --si-section-title: #46474B; /* gray ink used for section labels */
  --si-brand: #5E2A29;
  --si-ink: #272727;
  --si-accent-brown: #5A381C;
  background: #fafafa;
}

/* Shared inner container — every section uses this for the 1640px content
   column with responsive gutter. */
body[data-page="social-impact"] .si-section__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Shared big section title + intro body (the maroon serif titles used by
   "In the Poconos Region", "Across the United States", "Around the World",
   "Offering service…") — STIX Two Text 500 52px #5E2A29. */
body[data-page="social-impact"] .si-section__head h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.1;
  color: var(--si-brand);
}
body[data-page="social-impact"] .si-section__head p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.55;
  color: var(--si-ink);
  max-width: 78ch;
}

/* Shared small section/block label — Inter 500 28px #46474B (the gray
   labels: "Community Initiatives at a Glance", "Service in Motion",
   "University Partnerships", "Initiatives Across the Globe",
   "Our Unique Global Approach"). */
body[data-page="social-impact"] .si-block__title {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.25;
  color: var(--si-section-title);
}
body[data-page="social-impact"] .si-block__body {
  margin: 0 0 24px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.55;
  color: var(--si-ink);
}

/* Shared maroon outlined pill (Learn More buttons / Donate / Partner / CTA) */
body[data-page="social-impact"] .si-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 8px 11px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--si-brand);
  background: transparent;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 16px);
  color: var(--si-brand);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
body[data-page="social-impact"] .si-pill:hover { background: var(--si-brand); color: #fff; }
body[data-page="social-impact"] .si-pill__arrow {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--si-brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background 0.2s, color 0.2s;
}
body[data-page="social-impact"] .si-pill:hover .si-pill__arrow { background: #fff; color: var(--si-brand); }

/* =========================================================
   1. HERO — Figma 4156:1320 (full-bleed image 1920x711)
   ========================================================= */
.si-hero {
  position: relative;
  width: 100%;
  min-height: clamp(440px, 56vh, 711px);
  overflow: hidden;
  background: #1c1815;
  display: flex;
  align-items: flex-end;
}
.si-hero__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.si-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 25%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, rgba(20,18,15,0) 50%, rgba(20,18,15,0.45) 100%);
}
.si-hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(32px, 4vw, 56px);
  color: #fafafa;
}
.si-hero__quote {
  /* Figma 4156:984 — Inter 500 20px UPPERCASE white */
  margin: 0 0 6px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fafafa;
}
.si-hero__cite {
  /* Figma 4156:985 — Inter 500 16px italic UPPERCASE white */
  margin: 0 0 clamp(14px, 1.8vw, 26px);
  font-family: var(--sans);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.si-hero__title {
  /* Figma 4156:987 — STIX Two Text 500 64px white */
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: #fafafa;
}

/* =========================================================
   2. INTRO — Figma 4156:988 (#F0EADE band y=915-1691) with video left
   ========================================================= */
.si-intro {
  background: var(--si-cream);
  padding: clamp(40px, 5vw, 80px) 0;
}
.si-intro__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .si-intro__inner { grid-template-columns: 0.95fr 1fr; }
}
.si-intro__video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  background-color: #1c1815;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
  overflow: hidden;
  -webkit-appearance: none; appearance: none;
}
.si-intro__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  border: 2.5px solid rgba(255,255,255,0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s, background 0.25s;
}
.si-intro__play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 6px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #fff;
}
.si-intro__video:hover .si-intro__play { transform: translate(-50%, -50%) scale(1.06); background: rgba(255,255,255,0.32); }
.si-intro__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 28px);
}
.si-intro__copy h2 {
  /* Figma 4156:1004 — STIX Two Text 500 52px #5E2A29 */
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 52px);
  line-height: 1.15;
  color: var(--si-brand);
}
.si-intro__copy h2 em { font-style: italic; font-weight: 500; }
.si-intro__copy p {
  /* Figma 4156:1006/1008 — Inter 400 20px #272727 */
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.65;
  color: var(--si-ink);
}
.si-intro__cta { align-self: flex-start; margin-top: 4px; }

/* =========================================================
   3. POCONOS — Figma y=1761-3650 (cream wrapper + 3 subsections)
   ========================================================= */
.si-poconos {
  background: #fafafa;
  padding: clamp(48px, 6vw, 96px) 0 clamp(24px, 3vw, 48px);
}
.si-poconos .si-section__head { margin-bottom: clamp(24px, 3vw, 48px); }
/* Big cream-tan parent panel that wraps all 3 Poconos subsections per
   Figma 4156:933 (1640x1765 #F0EADE rectangle). */
.si-poconos__panel {
  background: var(--si-cream);
  padding: clamp(28px, 3.4vw, 56px) clamp(20px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 48px);
}
/* Per user (image 164): 3 photos TOUCH each other (no gaps) at top, then
   ONE shared white card spans the full width below with 3 text columns
   aligned to the photos above. Photos and card form a single visual unit. */
.si-initiatives {
  display: flex;
  flex-direction: column;
}
.si-initiatives__images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 760px) { .si-initiatives__images { grid-template-columns: repeat(3, 1fr); } }
.si-initiatives__image {
  width: 100%;
  aspect-ratio: 515 / 400;
  background-size: cover;
  background-position: center;
  background-color: #d9cfb8;
}
.si-initiatives__textcard {
  background: #fff;
  padding: clamp(20px, 2.4vw, 40px) clamp(20px, 2.4vw, 40px) clamp(24px, 2.6vw, 44px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 2.4vw, 40px);
}
@media (min-width: 760px) {
  .si-initiatives__textcard { grid-template-columns: repeat(3, 1fr); }
}
.si-initiatives__col h4 {
  /* Figma 4156:1023 — Inter 500 20px #5E2A29 */
  margin: 0 0 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(16px, 1.15vw, 20px);
  color: var(--si-brand);
}
.si-initiatives__col p {
  /* Inter 400 20px #272727 */
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.55;
  color: var(--si-ink);
}
.si-initiative__more {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 500;
  color: var(--si-ink);
  text-decoration: underline;
  font-style: italic;
}

/* Per user (image 166): ONE shared white card with 3 logo+body columns;
   logos sit on the same horizontal row centered, bodies aligned below. */
.si-partners-major {
  background: #fff;
  border-radius: 4px;
  padding: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 48px);
}
@media (min-width: 760px) { .si-partners-major { grid-template-columns: repeat(3, 1fr); } }
.si-partner-major__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.2vw, 36px);
  text-align: center;
}
.si-partner-major__logo {
  height: clamp(72px, 7vw, 110px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.si-partner-major__logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
.si-partner-major__col p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.55;
  color: var(--si-ink);
}

/* 8 additional partner cells — 4-col grid of small white-bg logo cards.
   Figma uses 8 cards in 2 rows of 4 (382x150 each). */
.si-partners-grid {
  background: #fff;
  border-radius: 4px;
  padding: clamp(20px, 2vw, 32px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  align-items: center;
  justify-items: center;
}
@media (min-width: 760px) { .si-partners-grid { grid-template-columns: repeat(4, 1fr); } }
.si-partner-cell {
  width: 100%;
  height: clamp(80px, 9vw, 130px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.si-partner-cell img {
  max-height: 100%;
  max-width: 90%;
  object-fit: contain;
}

/* =========================================================
   4. ACROSS THE UNITED STATES — Figma y=3797-4500
   Two-col layout: title+body left, #F0EADE chapters card right
   ========================================================= */
.si-usa {
  background: #fafafa;
  padding: clamp(40px, 5vw, 80px) 0;
}
.si-usa__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
@media (min-width: 900px) {
  .si-usa__inner { grid-template-columns: 0.85fr 1.15fr; }
}
.si-usa__copy h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.1;
  color: var(--si-brand);
}
.si-usa__copy p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.55;
  color: var(--si-ink);
  max-width: 56ch;
}
/* Chapters & locations card — Figma 4156:1042 (#F0EADE, 897x548) */
.si-cities {
  background: var(--si-cream);
  padding: clamp(24px, 2.4vw, 40px) clamp(28px, 3vw, 48px);
}
.si-cities__label {
  /* Figma 4156:1043 — Inter 600 16px UPPER ORANGE #E26326 */
  margin: 0 0 16px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--si-orange);
  border-bottom: 1px solid rgba(226,99,38,0.3);
  padding-bottom: 14px;
}
.si-cities__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.2vw, 20px) clamp(16px, 1.6vw, 28px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(13px, 1vw, 18px);
  color: var(--si-ink);
}
@media (min-width: 700px) { .si-cities__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .si-cities__grid { grid-template-columns: repeat(5, 1fr); } }

/* =========================================================
   5. SERVICE IN MOTION + UNIVERSITY — Figma y=4415-5713
   One big #F0EADE wrapper card containing both subsections
   ========================================================= */
.si-motion {
  background: #fafafa;
  padding: clamp(40px, 5vw, 80px) 0;
}
.si-motion__panel {
  background: var(--si-cream);
  padding: clamp(28px, 3.4vw, 56px) clamp(20px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 48px);
}
/* Service in Motion collage — 3 cols × 2 rows, tight 4px gaps */
.si-motion__collage {
  /* Per user (image 167): tiles touch each other (no gaps) + bigger */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(220px, 28vw));
  gap: 0;
}
@media (min-width: 760px) {
  .si-motion__collage { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(240px, 22vw)); }
}
.si-motion__tile {
  background-size: cover;
  background-position: center;
  background-color: #c8b890;
}
.si-motion__caption { display: none; }
.si-motion__nav { display: none; }

/* University Partnerships — outer F5F2EC wrapping box (extending the cream
   tone of the Service in Motion panel above) with 5 individual #F0EAD0
   cards inside it. */
.si-unis-wrap {
  background: #F5F2EC;
  padding: clamp(28px, 3.4vw, 56px) clamp(20px, 2.4vw, 40px);
}
.si-unis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
@media (min-width: 760px) { .si-unis { grid-template-columns: repeat(5, 1fr); } }
.si-uni {
  background: #F0EADE;
  padding: clamp(20px, 2vw, 28px) clamp(18px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.si-uni__logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.si-uni__logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.si-uni p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(12px, 0.85vw, 14px);
  line-height: 1.55;
  color: var(--si-ink);
}
.si-uni__more {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--sans);
  font-style: italic;
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 400;
  color: var(--si-ink);
  text-decoration: underline;
}

/* =========================================================
   6. AROUND THE WORLD — Figma y=5839-7492
   Centered title, 5-stat row (orange), #F0EADE 27M pill,
   "Initiatives Across the Globe" 3x2 white card grid.
   ========================================================= */
.si-world {
  background: #fafafa;
  padding: clamp(48px, 6vw, 96px) 0;
}
.si-world__title {
  margin: 0 0 clamp(32px, 4vw, 56px);
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.1;
  color: var(--si-brand);
}
.si-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 32px) clamp(16px, 1.6vw, 24px);
  margin-bottom: clamp(20px, 2vw, 32px);
}
@media (min-width: 760px) { .si-stats { grid-template-columns: repeat(5, 1fr); } }
.si-stat__num {
  /* Figma 4156:1067-1071 — Inter 500 36px ORANGE #E26326 */
  margin: 0 0 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1;
  color: var(--si-orange);
  letter-spacing: -0.02em;
}
.si-stat__label {
  /* Figma 4156:1072-1076 — Inter 400 16px #5E2A29 */
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.4;
  color: var(--si-brand);
}
/* 27M lives touched pill — Figma 4156:1106 (#F0EADE 1640x180) */
.si-total {
  background: var(--si-cream);
  border-radius: 8px;
  padding: clamp(24px, 2.6vw, 36px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.si-total__num {
  /* Inter 500 52px ORANGE — Figma 4156:1108 */
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--si-orange);
  letter-spacing: -0.02em;
}
.si-total__label {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 28px);
  color: var(--si-brand);
}
/* Initiatives Across the Globe — 3x2 white card grid */
.si-globe__title { margin-top: 0; }
.si-globe {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2vw, 32px);
}
@media (min-width: 760px) { .si-globe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .si-globe { grid-template-columns: repeat(3, 1fr); } }
.si-globe-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.si-globe-card__image {
  width: 100%;
  aspect-ratio: 503 / 268;
  background-size: cover;
  background-position: center;
  background-color: #d9cfb8;
  position: relative;
}
.si-globe-card__chip {
  position: absolute;
  top: 0; right: 0;
  background: #8F2B31;
  color: var(--si-cream-soft);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 18px;
}
.si-globe-card h4 {
  /* Figma 4156:1117 — Inter 500 24px #5E2A29 */
  margin: 0;
  padding: clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px) 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 24px);
  line-height: 1.25;
  color: var(--si-brand);
}
.si-globe-card p {
  margin: 0;
  padding: 0 clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 18px);
  line-height: 1.55;
  color: var(--si-ink);
}

/* =========================================================
   7. CARE 10 — Figma y=7562-8763 (5x2 dark photo tiles)
   Each tile has a full-bleed photo with a #F0EADE label badge
   bottom-left containing number (34px) + name (20px).
   ========================================================= */
.si-care10 {
  background: #fafafa;
  padding: clamp(48px, 5vw, 80px) 0;
}
.si-care10__head {
  margin-bottom: clamp(28px, 3vw, 48px);
}
.si-care10__head p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.55;
  color: var(--si-ink);
}
.si-care10__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
@media (min-width: 720px) { .si-care10__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .si-care10__grid { grid-template-columns: repeat(5, 1fr); } }
.si-care-tile {
  position: relative;
  aspect-ratio: 333 / 500;
  background-size: cover;
  background-position: center;
  background-color: #2c2c2c;
  overflow: hidden;
}
.si-care-tile__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--si-cream);
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
}
.si-care-tile__num {
  /* Figma — Inter 400 34px #5E2A29 */
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1;
  color: var(--si-brand);
}
.si-care-tile__name {
  /* Figma — Inter 400 20px #5E2A29 */
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(13px, 1vw, 18px);
  line-height: 1.2;
  color: var(--si-brand);
}
.si-care10__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3vw, 48px);
}

/* =========================================================
   8. CTA — Figma 4156:932 (#BEA884 tan, 1920x319)
   Two-column white-pill CTAs above a single-line links row.
   ========================================================= */
.si-cta {
  background: var(--si-tan);
  padding: clamp(40px, 4vw, 72px) 0;
  color: #fafafa;
}
.si-cta__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 48px);
  align-items: center;
}
.si-cta__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 80px);
  width: 100%;
  max-width: 880px;
}
@media (min-width: 720px) { .si-cta__cols { grid-template-columns: 1fr 1fr; } }
.si-cta__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.si-cta__col p {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 24px);
  line-height: 1.4;
  color: #fafafa;
  max-width: 32ch;
}
/* CTA button on tan panel — desktop default: OUTLINED (white border, white
   text, transparent fill on tan). Hover fills WHITE with accent-brown text.
   Bumped specificity to win against the `.si-pill` base rule. */
body[data-page="social-impact"] .si-cta__btn {
  background: transparent;
  border-color: #fafafa;
  color: #fafafa;
}
body[data-page="social-impact"] .si-cta__btn:hover { background: #fafafa; color: var(--si-accent-brown); }
body[data-page="social-impact"] .si-cta__btn .si-pill__arrow { background: #fafafa; color: var(--si-accent-brown); }
body[data-page="social-impact"] .si-cta__btn:hover .si-pill__arrow { background: var(--si-accent-brown); color: #fafafa; }
.si-cta__links {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 20px);
  color: #fafafa;
}
.si-cta__links a { color: #fafafa; text-decoration: underline; }

/* =========================================================
   MOBILE — port the Figma "Social Impact - Mobile" frame (390x11912)
   - Hero centers
   - Intro stacks (video over copy)
   - Initiatives interleave image+text per card
   - Service in Motion stacks photos in a single column
   - University Partnerships stack in shared cream panel, centered
   - World stats stack + 27M pill below
   - 10-Care turns into single-column accordion rows
   - CTA stacks
   ========================================================= */
@media (max-width: 760px) {
  /* HERO — text centered at bottom */
  .si-hero { min-height: clamp(440px, 78vw, 580px); }
  .si-hero__inner { text-align: center; }
  .si-hero__title { font-size: clamp(36px, 10vw, 52px); }
  .si-hero__quote { font-size: 11px; letter-spacing: 0.08em; }
  .si-hero__cite { font-size: 11px; margin-bottom: 16px; }

  /* INTRO — copy FIRST then video (Figma mobile order). Flex column reverse
     keeps the desktop HTML order (video, copy) but visually puts copy above
     video on mobile. */
  .si-intro { padding: 36px 0 48px; }
  .si-intro__inner {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column-reverse;
    gap: 28px;
    padding: 0 22px;
  }
  .si-intro__video { aspect-ratio: 16 / 10; border-radius: 0; }
  .si-intro__play { width: 64px; height: 64px; }
  .si-intro__play::after { border-width: 10px 0 10px 16px; }
  .si-intro__copy h2 { font-size: clamp(24px, 7.5vw, 34px); color: var(--si-brand); }
  .si-intro__copy p { font-size: 15px; }

  /* SECTION HEADS scale down. Per user: on mobile, the block sub-titles
     ("Community Initiatives at a Glance", "Service in Motion", etc.) take
     the same brand maroon color as the section headings so they read as a
     unified treatment instead of muted gray. */
  .si-poconos { padding: 32px 0 48px; }
  .si-poconos__panel { padding: 22px 16px; gap: 28px; }
  body[data-page="social-impact"] .si-section__head h2,
  body[data-page="social-impact"] .si-usa__copy h2,
  body[data-page="social-impact"] .si-world__title { font-size: clamp(26px, 7vw, 36px); }
  body[data-page="social-impact"] .si-block__title {
    font-size: clamp(18px, 5vw, 22px);
    color: var(--si-brand);
  }

  /* INITIATIVES — interleave images + text into per-card stacks */
  .si-initiatives { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .si-initiatives__images { display: contents; }
  .si-initiatives__textcard { display: contents; }
  .si-initiatives__image { aspect-ratio: 16 / 10; }
  .si-initiatives__col {
    background: #fff;
    padding: 14px 18px 20px;
  }
  .si-initiatives__images > :nth-child(1) { order: 1; }
  .si-initiatives__textcard > :nth-child(1) { order: 2; }
  .si-initiatives__images > :nth-child(2) { order: 3; }
  .si-initiatives__textcard > :nth-child(2) { order: 4; }
  .si-initiatives__images > :nth-child(3) { order: 5; }
  .si-initiatives__textcard > :nth-child(3) { order: 6; }

  /* PARTNERS MAJOR — already single-col by default; soften padding */
  .si-partners-major { padding: 24px 18px; gap: 28px; }
  .si-partners-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; padding: 16px; }
  .si-partner-cell { height: 70px; }

  /* USA + CITIES — Figma mobile shows a single cream chapter box hugged
     by side margins, with a centered orange label + divider and a 4-col
     grid of city names below. */
  .si-usa { padding: 40px 0 24px; }
  .si-usa__inner { grid-template-columns: 1fr !important; gap: 24px; padding: 0 22px; }
  /* User: 'top of the active chapters box needs to be larger or the
     text needs to be brought down away from the edge of the box.'
     The mobile override was zeroing the top padding; restoring ~32px
     so the orange label sits clear of the top edge. */
  .si-cities { padding: 32px 22px 40px; }
  body[data-page="social-impact"] .si-cities__label {
    text-align: center;
    margin: 0 12px 22px;
    padding-bottom: 14px;
    font-size: 12px;
  }
  .si-cities__grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px 12px;
    padding: 26px 18px 28px;
  }
  body[data-page="social-impact"] .si-cities__grid li {
    font-size: 13px;
    line-height: 1.35;
  }

  /* SERVICE IN MOTION — horizontal scroll-snap carousel, white/page bg,
     caption + arrow nav below. Per user (mobile only): the panel sheds its
     cream tint so the carousel sits on the page bg, while University
     Partnerships keeps its cream box below. */
  .si-motion { padding: 32px 0; background: #fafafa; }
  .si-motion__panel {
    background: transparent;
    padding: 0 22px;
    gap: 20px;
  }
  .si-motion__collage {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    border-radius: 4px;
  }
  .si-motion__collage::-webkit-scrollbar { display: none; }
  .si-motion__tile {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }
  .si-motion__caption {
    display: block;
    margin: 0;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    color: var(--si-ink);
  }
  .si-motion__nav {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: center;
    /* User: arrows too close to the next "University Partnerships"
       heading. Bumped from 4px → 20px top, added 32px bottom so there's
       breathing room before the next section starts. */
    margin-top: 20px;
    margin-bottom: 32px;
  }
  .si-motion__navbtn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1.5px solid var(--si-brand);
    background: transparent;
    color: var(--si-brand);
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .si-motion__navbtn:active { background: var(--si-brand); color: #fff; }

  /* UNIVERSITY PARTNERSHIPS — on mobile the title sits OUTSIDE the cream
     box (as a header above it), and the cream box hugs the uni cards
     tightly. The wrapper uses `display: contents` so the title and grid
     flow as direct children of `.si-section__inner` and only the inner
     grid gets the cream bg. */
  .si-unis-wrap { display: contents; }
  .si-unis-wrap > .si-block__title {
    padding: 0 22px;
    margin-top: 36px;
    margin-bottom: 14px;
  }
  .si-unis {
    grid-template-columns: 1fr !important;
    gap: 22px;
    background: var(--si-cream);
    border-radius: 4px;
    padding: 22px 18px 26px;
    margin: 0 22px;
  }
  .si-uni {
    background: transparent;
    text-align: center;
    align-items: center;
    padding: 0;
    gap: 10px;
  }
  .si-uni__logo { justify-content: center; }
  .si-uni__logo img { object-position: center; }
  .si-uni p { text-align: center; max-width: 32ch; }
  .si-uni__more { align-self: center; }

  /* WORLD — stats single column on the LEFT, 27M tall pill on the RIGHT */
  .si-world { padding: 40px 0 32px; }
  .si-world__title { text-align: left; margin-bottom: 24px; }
  .si-world__statsblock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }
  .si-stats { grid-template-columns: 1fr !important; gap: 22px; margin-bottom: 0; }
  .si-total {
    margin-bottom: 0;
    align-self: stretch;
    justify-content: center;
  }
  .si-total__num { font-size: 44px; }
  .si-total__label { font-size: 17px; }
  .si-globe__title { margin-bottom: 16px; }
  .si-globe { grid-template-columns: 1fr !important; gap: 18px; }
  .si-globe-card h4 { text-align: center; padding: 18px 20px 10px; font-size: 18px; }
  .si-globe-card p { text-align: center; padding: 0 20px 22px; font-size: 14px; }

  /* 10 CARE PROGRAM — turn dark photo tiles into single-column accordion rows */
  .si-care10 { padding: 36px 0; }
  .si-care10__head { padding: 0 22px; }
  .si-care10__grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 0 22px;
  }
  .si-care-tile {
    aspect-ratio: auto;
    height: 60px;
    background-image: none !important;
    background-color: var(--si-cream);
    border-radius: 4px;
  }
  .si-care-tile__badge {
    position: static;
    background: transparent;
    padding: 0 20px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: 100%;
    min-width: 0;
    width: 100%;
  }
  .si-care-tile__num { font-size: 16px; font-weight: 400; }
  .si-care-tile__name { font-size: 16px; }
  .si-care-tile::after {
    content: "\203A";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--si-brand);
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
  }

  /* CTA — stacked single column. Per user (mobile): the Donate Now /
     Partner With Us pills are SOLID WHITE with maroon text + maroon arrow
     chip, not the outlined desktop style. */
  .si-cta { padding: 40px 0 48px; }
  .si-cta__cols { grid-template-columns: 1fr !important; gap: 28px; }
  .si-cta__col p { font-size: 18px; max-width: 26ch; }
  .si-cta__links { padding: 0 22px; line-height: 1.5; }
  body[data-page="social-impact"] .si-cta__btn {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--si-brand);
  }
  body[data-page="social-impact"] .si-cta__btn .si-pill__arrow {
    background: var(--si-brand);
    color: #ffffff;
  }
  body[data-page="social-impact"] .si-cta__btn:hover {
    background: #ffffff;
    color: var(--si-brand);
  }
  body[data-page="social-impact"] .si-cta__btn:hover .si-pill__arrow {
    background: var(--si-brand);
    color: #ffffff;
  }
}

@media (max-width: 480px) {
  .si-hero { min-height: 540px; }
  .si-hero__inner { padding-left: 20px; padding-right: 20px; padding-bottom: 36px; }
  .si-hero__title { font-size: 38px; }
  .si-intro__copy h2 { font-size: 26px; }
  .si-section__head h2,
  .si-usa__copy h2,
  .si-world__title { font-size: 28px; }
}

/* ===========================================================
   ROUND-46 EXPLORE + INSPIRATION FEEDBACK
   =========================================================== */

/* --- Explore the Space — hero punch (Anita: photo too dull vs Figma) */
body[data-page="explore-the-space"] .inner-hero__image {
  /* Boost saturation + contrast + brightness so the photo punches the way
     it does in the Figma-graded version. */
  filter: none; /* QC r20: removed boost — wasn't translating well */
}
body[data-page="explore-the-space"] .inner-hero__veil {
  /* Replace the flat dark wash with a warm-gradient overlay that lifts the
     top of the image and only darkens the bottom — matches the Figma. */
  background:
    linear-gradient(180deg,
      rgba(60, 30, 18, 0.10) 0%,
      rgba(20, 12, 8, 0.00) 30%,
      rgba(20, 12, 8, 0.00) 55%,
      rgba(20, 12, 8, 0.60) 100%);
}

/* --- Explore: sacred-grounds main photo — fill container, anchor toward
   the horizon/foreground so the field+trees show (not just sky). */
body[data-page="explore-the-space"] .sacred-grounds__media {
  background-size: cover !important;
  background-position: center 65% !important;
}

/* --- Explore: "If you want peace…" + "And such a place is an Ashram." quote.
   Figma uses STIX Two Text Italic for the lead/closing serif lines and
   Inter SemiBold for the CAPS centre — keep them differentiated. The
   per-page explore-figma.css fully styles these so no overrides here. */
body[data-page="explore-the-space"] .peace-quote__center {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 600;
}

/* --- Explore: "Your Time at the Ashram" — fits inside the viewport fold.
   Section was too tall; shrink display title + card height + padding so
   the whole block sits roughly within 1 viewport height. */
body[data-page="explore-the-space"] .ashram-time {
  padding: clamp(32px, 4vw, 64px) 0 clamp(48px, 5vw, 72px);
}
body[data-page="explore-the-space"] .ashram-time h2 {
  font-size: clamp(28px, 3vw, 40px);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
body[data-page="explore-the-space"] .time-card,
body[data-page="explore-the-space"] .time-mcard {
  min-height: 0;
}
body[data-page="explore-the-space"] .time-card__photo,
body[data-page="explore-the-space"] .time-mcard__photo {
  aspect-ratio: 5 / 4;
}
/* The stage's base 4/3 + 820px cap was making the photo ~820px tall at
   intermediate desktop widths (e.g. 1221px) so the section overflowed the
   fold. Use a flatter 16/9 from 901px (was 1280px) and cap height to leave
   room for the h2 above. min(70vh, 660px) keeps the section in one fold
   from 1221 all the way up to 1700+, and the aspect-ratio lets the photo
   shrink-to-fit horizontally rather than gutter at the sides. */
@media (min-width: 901px) {
  body[data-page="explore-the-space"] .ashram-time__stage {
    aspect-ratio: 16 / 9;
    max-height: none;
    min-height: 0;
  }
}

/* --- Explore: the main "Plan a Visit" CTA button should be brown, matching
   the Figma. Actual markup uses .visit-cta .btn; time-mcard learn-more CTA
   is .time-mcard__cta. */
body[data-page="explore-the-space"] .visit-cta .btn {
  /* Figma 4148:1931 default: bg #FAFAFA, label #5A381C, radius 40. */
  background: #FAFAFA !important;
  color: #5A381C !important;
  border-color: #FAFAFA !important;
}
body[data-page="explore-the-space"] .visit-cta .btn:hover {
  background: #5A381C !important;
  border-color: #5A381C !important;
  color: #FAFAFA !important;
}
body[data-page="explore-the-space"] .time-mcard__cta {
  background: var(--brand) !important;
  color: #ffffff !important;
  border-color: var(--brand) !important;
}
body[data-page="explore-the-space"] .time-mcard__cta:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

/* --- Inspiration: hero kicker on one line at all viewports.
   Previous max-width was clamp(260, 26vw, 480) which forced wrap on most
   widths. Allow the kicker to use up the available text column. */
.if-hero__kicker {
  max-width: 100%;
  white-space: nowrap;
}
@media (max-width: 1079px) {
  .if-hero__kicker {
    white-space: normal;  /* on stacked mobile let it wrap if truly narrow */
  }
}

/* --- Inspiration: Mahavir image (Our Roots band) — push position up so
   the chin/figure doesn't get cut at the bottom. Sky cropping OK.
   Scoped tightly via the .band-image--mahavir modifier (inline-style on
   the element wins, this is a fallback if inline gets stripped). */
.band-image--mahavir > div {
  background-position: center 30% !important;
}

/* --- Inspiration: Our Philosophy / Inner Awakening photo.
   Round 60d/e: any combination of (a) the parent's --landscape
   aspect-ratio 16/9 with (b) a max-height that's shorter than the
   natural cover-fit height cropped Bapa somewhere — bottom (lap +
   table, attempt 60d-1) or top (turban + forehead, attempt 60d-2).
   Real fix: match the container aspect to the source (4096:2730 =
   ~1.5:1) so cover-fit has nothing to crop. Trade aggressive max-
   height shrinking for a tighter width cap so the image still doesn't
   dominate the page. */
.narrative--left + .band-image--landscape > div {
  aspect-ratio: 4096 / 2730;  /* matches source, no vertical crop */
  max-height: none;
  background-position: center;
}
.narrative--left + .band-image--landscape {
  /* Was min(85vw, 1280) — paired with 520px cap that cropped Bapa.
     Now narrower so the un-cropped 1.5:1 image stays modest. */
  width: min(72vw, 1000px);
}

/* --- Inspiration: Voices of Respect testimonial nav buttons.
   Figma Page 3 button "Property 1=Left" (1164:3300): 54px outline circle,
   1px #5e2a29 border, 42x42 chevron inside, brown stroke. Hover state
   fills #5e2a29 with #fafafa chevron. */
.testimonial-v2__buttons .time-arrow {
  width: 54px !important;
  height: 54px !important;
  border-radius: 100px !important;
  border: 1px solid #5e2a29 !important;
  background: transparent !important;
  color: #5e2a29 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.testimonial-v2__buttons .time-arrow svg { width: 42px !important; height: 42px !important; }
.testimonial-v2__buttons .time-arrow:hover {
  background: #5A381C !important; /* QC r21 */
  color: #fafafa !important;
  border-color: #5A381C !important; /* QC r21 */
}

/* --- Inspiration: David Clarke no-photo testimonial — center the quote
   block in the card when there is no portrait. */
.testimonial-slide--no-photo {
  grid-template-columns: 1fr !important;
}
.testimonial-slide--no-photo .testimonial-slide__image,
.testimonial-slide--no-photo .testimonial-slide__image--empty {
  display: none;
}
.testimonial-slide--no-photo .testimonial-slide__copy {
  text-align: center;
  align-items: center;
  padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 96px);
}
.testimonial-slide--no-photo .testimonial-slide__quote {
  max-width: 60ch;
  text-align: center;
}