/* ============================================================================
   Swami Aditya — site.css
   Design system: Saffron palette (Sandalwood / warm sand / saffron-terracotta + Antique-gold CTA)
   Type: Cormorant Garamond (display) + Inter (body) + Noto Serif Devanagari (sacred accent)
   Owner stamp: v0.2.0 | Claude Opus 4.8 (1M) · effort:high | 2026-06-19 (design-review)
   - warm sand-grey tokens replace leftover cool blue-greys on dark sections (palette: no blue)
   - removed dead .btn min-height:44px (overridden by 48px)
   Prior: v0.1.0 | Claude Opus 4.8 (1M) · effort:high | 2026-06-13 17:09 UTC+3
   Prototype note: fonts via Google Fonts CDN for prototyping; SELF-HOST for production
   (font-display:swap, subset) per mpro-frontend-rules.
   ========================================================================== */

/* CLS fix (Core Web Vitals): a size-adjusted local fallback so the FALLBACK font
   occupies Inter's exact footprint - when Inter swaps in there is no reflow (the nav,
   buttons + consent banner were shifting ~0.06 each on font-load). Metrics = the
   documented Inter/Arial fallback overrides (next/font). Cormorant uses its own below. */
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial");
  ascent-override:90.44%;
  descent-override:22.52%;
  line-gap-override:0%;
  size-adjust:107.12%;
}
/* Cormorant Garamond fallback (Times New Roman local) - metrics derived from the
   capsize data (Cormorant ascent 1.2 / descent .4 / xHeight .412; size-adjust = the
   xHeight ratio vs Times .447 = .921). Stops the logo + headings reflowing on font-load
   (which cascaded into the nav repositioning + the hero ::after + button shifts). */
@font-face{
  font-family:"Cormorant Fallback";
  src:local("Times New Roman");
  ascent-override:130.3%;
  descent-override:43.4%;
  line-gap-override:0%;
  size-adjust:92.1%;
}

/* ---------- tokens ---------- */
:root{
  /* palette: Saffron - the colours of the renunciate's robe + the Vedic tradition (no blue) */
  --bg:#F7F2E8;            /* warm sand / ivory page base */
  --bg-warm:#FBF6EB;       /* warmer card base */
  --ink:#2A2016;           /* deep sepia body text - warm, ~13:1 on sand (AAA) */
  --ink-soft:#5A4A38;      /* muted warm brown / captions - ~8:1 (AAA) */
  --night:#3A2218;         /* deep sandalwood / espresso - hero/footer/headings (AAA) */
  --night-2:#241410;       /* deeper espresso - footers / gradient floor */
  --indigo:#A84B1C;        /* saffron-terracotta (robe) - links / secondary - ~5.3:1 (AA) */
  --gold:#B8923A;          /* sacred gold + PRIMARY CTA - kept */
  --gold-deep:#9A7A2E;     /* gold hover */
  --gold-soft:#E9D9AE;     /* gold tint for fills on dark */
  --dusty:#A9805A;         /* warm clay / sand - large text / UI only */
  --line:#E4DECF;          /* hairline on ivory */
  --line-gold:rgba(184,146,58,.34);
  --ok:#3a8c5d;            /* semantic success (quiz correct) - centralised token */
  --err:#b85c5c;           /* semantic error (quiz wrong) - centralised token */

  /* warm sand-grey for secondary text on the dark sandalwood ground. Replaces
     leftover COOL blue-greys (#CBD2E4 / #AEB8D0 / #C2CADF / #9AA4C0 / #8A93B0)
     carried over from the original "indigo-night" palette - cool-on-warm reads
     muddy/purple against the saffron robe (CEO pref: no blue; palette = no blue).
     Tuned to HOLD or RAISE WCAG-AA on --night (#3A2218) and --night-2 (#241410). */
  --warm-grey:#D9D0BE;     /* lede / strong secondary on dark - ~9.6:1 on night (AAA) */
  --warm-grey-soft:#C3B7A0;/* notes / captions / consent on dark - ~7.5:1 on night (AAA) */
  --warm-grey-dim:#A89C86; /* footer fine print on night-2 - ~6.6:1 (AA) */

  /* type scale (fluid) */
  --f-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --f-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-sacred: "Noto Serif Devanagari", var(--f-display);

  --step--1: clamp(.86rem,.83rem + .15vw,.95rem);
  --step-0:  clamp(1rem,.96rem + .2vw,1.125rem);     /* body 16–18 */
  --step-1:  clamp(1.2rem,1.1rem + .5vw,1.4rem);
  --step-2:  clamp(1.5rem,1.3rem + 1vw,2rem);
  --step-3:  clamp(2rem,1.6rem + 2vw,3rem);
  --step-4:  clamp(2.6rem,1.9rem + 3.4vw,4.6rem);    /* hero display */

  /* spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --radius:12px; --radius-sm:8px; --radius-lg:20px; --radius-pill:999px;

  /* layered natural shadows */
  --sh-1:0 1px 2px rgba(58,34,24,.06);
  --sh-2:0 4px 10px rgba(58,34,24,.07), 0 2px 4px rgba(58,34,24,.05);
  --sh-3:0 18px 40px rgba(36,20,16,.13), 0 6px 14px rgba(36,20,16,.08);

  --maxw:1200px;      /* content column inside full-bleed sections */
  --readw:68ch;       /* long-form reading measure */
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
/* overflow-x:clip (not hidden) prevents horizontal scroll WITHOUT making html/body
   a scroll container, so position:sticky on the header still works (LESSON: an
   ancestor with overflow:hidden silently breaks sticky descendants). */
html,body{ overflow-x:clip }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:var(--step-0); line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block }
/* <picture> wraps <img> for WebP delivery; display:contents makes it generate no
   box, so every existing img/layout rule (incl. absolutely-positioned .scene-img)
   applies to the <img> exactly as before. */
picture{ display:contents }
a{ color:var(--indigo); text-decoration:none; transition:color .15s var(--ease) }
a:hover{ color:var(--gold-deep) }
h1,h2,h3,h4{ font-family:var(--f-display); color:var(--night); line-height:1.12;
  font-weight:600; letter-spacing:.004em; margin:0 0 .4em }
h1{ font-size:var(--step-4) } h2{ font-size:var(--step-3) }
h3{ font-size:var(--step-2) } h4{ font-size:var(--step-1) }
p{ margin:0 0 1.1em } strong{ font-weight:600 }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px }

/* ---------- layout primitives ---------- */
.section{ padding:var(--s9) 0; position:relative }
.section.tight{ padding:var(--s7) 0 }
.container{ width:100%; max-width:var(--maxw); margin:0 auto;
  padding-inline:clamp(18px,4vw,40px) }
.prose{ max-width:var(--readw) }
.prose p,.prose li{ font-size:var(--step-0) }
.lede{ font-size:var(--step-1); color:var(--ink-soft); line-height:1.5 }
.eyebrow{ font-family:var(--f-body); font-size:var(--step--1); font-weight:600;
  /* WCAG-AA: gold-deep #9A7A2E on sand is only ~3.6:1 (fails AA for this 15px
     label). Antique bronze #7A5E1F = ~5.46:1 on sand (passes). Dark sections
     override to gold-soft below. */
  letter-spacing:.16em; text-transform:uppercase; color:#7A5E1F;
  display:inline-flex; align-items:center; gap:.6em; margin:0 0 var(--s4) }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold);
  display:inline-block; opacity:.8 }
.center{ text-align:center }
.center .eyebrow{ justify-content:center }
.om{ font-family:var(--f-sacred); color:var(--gold); line-height:1 }
/* a11y (WCAG 1.4.1 / 2.4.4): links inside running text are distinguished by an
   UNDERLINE, not colour alone (fixes axe link-in-text-block - the gold-on-cream
   consent + satsang in-prose links, and the legal-page in-list links). Scope = text
   paragraphs + PROSE list items only, so nav (nav.nav) + the footer menu (ul>li, not
   in .prose) are never underlined. Button/CTA links opt out (non-colour affordance). */
p a:not([class*="btn"]),
.prose li a:not([class*="btn"]){ text-decoration: underline; text-underline-offset: 2px }

/* full-bleed dark sections */
.section.dark{ background:var(--night); color:#EDE7D8 }
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4{ color:#F4EEDF }
.section.dark a{ color:var(--gold-soft) }
/* a gold CTA button keeps its dark ink in EVERY dark container - the broad
   prose-link rules .section.dark a (0,2,1), .section.dark .card a (0,3,1) and
   .capture a (0,1,1) were washing the button text to cream-on-gold (~2.08:1,
   fails AA + looks washed out). Each selector below out-specifies its washer. */
.section.dark .card .btn-gold,
.section.dark .btn-gold,
.capture .btn-gold{ color:#1c1407 }
.section.dark .eyebrow{ color:var(--gold-soft) }
.section.dark .eyebrow::before{ background:var(--gold-soft) }
.section.dark p,.section.dark li{ color:#EDE7D8 }
/* quote text must stay light on dark sections (the global .quote color is dark) */
.section.dark .quote blockquote{ color:#F4EEDF }
.section.dark .quote .by{ color:var(--warm-grey-soft) }
/* DEFENSIVE: cards rendered inside a dark section (translucent rgba cards) must
   light ALL their text by default - do NOT rely on per-element inline color.
   .card base sets h3/h4 (global dark) + p (var(--ink-soft) dark) = dark-on-dark
   without this. #F4EEDF heading / #D8D2C4 body on the ~rgba(255,255,255,.04)+night
   surface (effective near #3D2A1F) both clear WCAG AA (>=4.5:1 body, >=3:1 large). */
.section.dark .card{ color:#E6DECF }
.section.dark .card h3,.section.dark .card h4,
.section.dark .offer-card .price{ color:#F4EEDF }
.section.dark .card p,.section.dark .card li,
.section.dark .offer-card ul,.section.dark .offer-card ul li{ color:#D8D2C4 }
.section.dark .card a{ color:var(--gold-soft) }
.section.night-gradient{
  background:linear-gradient(165deg,var(--night) 0%,var(--night-2) 100%);
}

/* ---------- buttons ---------- */
.btn{ font-family:var(--f-body); font-weight:600; font-size:var(--step-0);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em; cursor:pointer;
  min-height:48px; /* exceeds WCAG 2.5.5 44px tap-target floor (>90% mobile) */
  padding:.85em 1.6em; border-radius:var(--radius-pill); border:1.5px solid transparent;
  transition:transform .15s var(--ease),box-shadow .2s var(--ease),
  background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
  text-align:center; line-height:1 }
.btn:active{ transform:translateY(1px) }
.btn-gold{ background:var(--gold); color:#1c1407; box-shadow:var(--sh-2) }
.btn-gold:hover{ background:var(--gold-deep); color:#1c1407; box-shadow:var(--sh-3);
  transform:translateY(-1px) }
.btn-ghost{ background:transparent; border-color:var(--indigo); color:var(--indigo) }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-deep) }
.btn-ghost-light{ background:transparent; border-color:rgba(233,217,174,.5);
  color:#EDE7D8 }
.btn-ghost-light:hover{ border-color:var(--gold); color:var(--gold-soft) }
.btn .arr{ transition:transform .2s var(--ease) }
.btn:hover .arr{ transform:translateX(3px) }

/* ---------- header / nav ---------- */
.site-header{ position:sticky; top:0; z-index:50;
  background:rgba(247,245,240,.82); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line); transition:box-shadow .2s var(--ease) }
.site-header.scrolled{ box-shadow:var(--sh-2) }
.nav{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5); min-height:70px }
.brand{ display:flex; align-items:center; gap:.6em; font-family:var(--f-display);
  font-size:1.45rem; font-weight:600; color:var(--night); letter-spacing:.01em }
.brand .om{ font-size:1.5rem }
.brand small{ display:block; font-family:var(--f-body); font-size:.6rem;
  /* WCAG-AA: gold-deep fails on the light header; antique bronze passes. */
  letter-spacing:.22em; text-transform:uppercase; color:#7A5E1F;
  font-weight:600; margin-top:1px }
.site-header .nav-links{ display:flex; align-items:center; gap:var(--s5); list-style:none;
  margin:0; padding:0 }
.site-header .nav-links a{ color:var(--ink); font-size:.98rem; font-weight:500;
  padding:.4em 0; position:relative }
.site-header .nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px;
  width:0; background:var(--gold); transition:width .22s var(--ease) }
.site-header .nav-links a:hover,.site-header .nav-links a[aria-current="page"]{ color:var(--night) }
.site-header .nav-links a:hover::after,.site-header .nav-links a[aria-current="page"]::after{ width:100% }

/* ---------- pagination (search / blog archive / teachings) ----------
   Decoupled from the header .nav-links (WordPress reuses that class name for
   the_posts_pagination, which the mobile header-hide was wrongly catching).
   >=44px tap targets so mobile visitors (>90%) can tap page numbers; one
   consistent style across the_posts_pagination (.pagination .nav-links) and
   the teachings paginate_links (bare .page-numbers in a centred wrapper). */
.pagination .nav-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:var(--s2,.5rem) }
.center > .page-numbers{ margin:.15rem }
.page-numbers{ display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:.35rem .6rem; border-radius:10px;
  color:var(--ink); font-weight:500; line-height:1; text-decoration:none;
  transition:background .15s var(--ease),color .15s var(--ease) }
.page-numbers:hover,.page-numbers:focus-visible{ background:rgba(184,146,58,.14); color:var(--night) }
.page-numbers.current{ background:var(--night); color:var(--bg-warm,#FBF6EB) }
.page-numbers.dots{ min-width:auto; padding:.35rem .15rem; background:none }
.nav-cta{ display:flex; align-items:center; gap:var(--s3) }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px;
  color:var(--night) }
.nav-toggle svg{ width:28px; height:28px }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden;
  background:linear-gradient(168deg,var(--night) 0%,var(--night-2) 100%); color:#EDE7D8 }
.hero::after{ /* faint sacred glyph wash */
  content:"\0950"; position:absolute; right:-2%; top:50%; transform:translateY(-50%);
  font-family:var(--f-sacred); font-size:46vw; color:rgba(184,146,58,.05);
  line-height:1; pointer-events:none; z-index:0;
  /* CLS: a FIXED box so the giant glyph's font-swap (Noto Devanagari) reflow can't move
     the layout - the box stays 46vw regardless of the rendered glyph width; overflow clips. */
  width:46vw; height:46vw; display:flex; align-items:center; justify-content:flex-end; overflow:hidden }
.hero .container{ position:relative; z-index:1 }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s8);
  align-items:center; padding:var(--s10) 0 }
.hero h1{ color:#F6F0E2; margin-bottom:var(--s5); max-width:13ch }
.hero .lede{ color:var(--warm-grey); max-width:46ch; margin-bottom:var(--s6) }
.hero .eyebrow{ color:var(--gold-soft) }
.hero .eyebrow::before{ background:var(--gold-soft) }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center }
.hero-note{ margin-top:var(--s6); font-size:var(--step--1); color:var(--warm-grey-soft);
  display:flex; align-items:center; gap:.6em }
.hero-note .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 4px rgba(184,146,58,.2) }
.hero-portrait{ position:relative }
.hero-portrait .frame{ border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--sh-3); border:1px solid rgba(233,217,174,.22);
  aspect-ratio:4/5; background:
    radial-gradient(120% 90% at 70% 18%, rgba(184,146,58,.30), transparent 55%),
    linear-gradient(155deg,#5A3A24,#241410) }
/* object-position 50% 25% (NOT center) - portrait face sits high; cover-crop with
   default center cuts the head. Per-page focal overridden inline on the <img>. */
.hero-portrait .frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 25% }
.hero-portrait .frame .ph-art{ /* CSS fallback if no photo */
  display:flex; align-items:center; justify-content:center; height:100%;
  font-family:var(--f-sacred); font-size:9rem; color:rgba(233,217,174,.5) }
.hero-portrait .cap{ position:absolute; left:18px; bottom:18px; right:18px;
  background:rgba(36,20,16,.66); backdrop-filter:blur(6px); color:#EDE7D8;
  border:1px solid rgba(233,217,174,.18); border-radius:var(--radius-sm);
  padding:.7em .9em; font-size:var(--step--1) }
.hero-portrait .cap b{ color:var(--gold-soft) }

/* ---------- trust / credibility bar ---------- */
.trustbar{ background:var(--bg-warm); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line) }
.trustbar .row{ display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:var(--s5) var(--s8); padding:var(--s6) 0 }
.trust-item{ display:flex; align-items:center; gap:.7em; font-size:.98rem;
  color:var(--ink); font-weight:500 }
.trust-item svg{ width:22px; height:22px; color:var(--gold-deep); flex:none }

/* ---------- cards / grids ---------- */
.grid{ display:grid; gap:var(--s6) }
.grid.c2{ grid-template-columns:repeat(2,1fr) }
.grid.c3{ grid-template-columns:repeat(3,1fr) }
.grid.c4{ grid-template-columns:repeat(4,1fr) }
.card{ background:var(--bg-warm); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s6); box-shadow:var(--sh-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
  border-color .2s var(--ease) }
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-3);
  border-color:var(--line-gold) }
.card .icon{ width:48px; height:48px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--s4);
  background:rgba(184,146,58,.12); color:var(--gold-deep) }
.card .icon svg{ width:26px; height:26px }
.card h3{ font-size:var(--step-1) } .card h4{ font-size:1.2rem }
/* a11y: small card titles became <h3 class="card-sub"> (was <h4>) to fix the
   h2->h4 heading-skip; this holds their original small size. .card h3.card-sub
   (0,2,1) beats .card h3 (0,1,1); .card-sub covers non-card contexts. */
.card h3.card-sub,.card-sub{ font-size:1.2rem }
.card p{ color:var(--ink-soft); margin-bottom:0 }
.pillar-num{ font-family:var(--f-sacred); font-size:1.4rem; color:var(--gold) }

/* event / offering card */
.offer-card{ display:flex; flex-direction:column; gap:var(--s4);
  border-left:4px solid var(--gold) }
.offer-card .price{ font-family:var(--f-display); font-size:var(--step-2);
  color:var(--night); font-weight:600 }
.offer-card ul{ margin:0; padding-left:1.1em; color:var(--ink-soft) }
.offer-card ul li{ margin-bottom:.4em }
/* precise per-scope tier pricing (replaces a "from" anchor): each scope shows its
   exact price, wraps cleanly on small screens (mobile-first). */
.offer-card .price-tiers{ display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.25em .55em; font-size:var(--step-0); font-weight:500; line-height:1.5 }
.offer-card .price-tiers .tier{ white-space:nowrap; color:var(--ink-soft) }
.offer-card .price-tiers .tier b{ font-family:var(--f-display); color:var(--night);
  font-weight:700; margin-right:.15em }
.offer-card .price-tiers .sep{ color:var(--gold); font-weight:700 }
.offer-card .tier-note{ margin:0; color:var(--ink-soft) }
/* dark-section contrast guard: a night-coloured price/label is invisible on a dark
   card - light every tier text descendant (WCAG AA, web-project-standards). */
.section.dark .offer-card .price-tiers .tier{ color:#cfc6b0 }
.section.dark .offer-card .price-tiers .tier b{ color:#F4EEDF }
.section.dark .offer-card .tier-note{ color:#cfc6b0 }

/* event banner */
.event-banner{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--s6);
  align-items:center; background:var(--night); color:#EDE7D8;
  border-radius:var(--radius-lg); padding:var(--s6) var(--s7); box-shadow:var(--sh-3) }
.event-banner .when{ text-align:center; border-right:1px solid rgba(233,217,174,.2);
  padding-right:var(--s6) }
.event-banner .when .d{ font-family:var(--f-display); font-size:2.6rem; line-height:1;
  color:var(--gold-soft) }
.event-banner .when .m{ font-size:var(--step--1); letter-spacing:.18em;
  text-transform:uppercase; color:var(--warm-grey-soft); margin-top:4px }
.event-banner h3{ color:#F4EEDF; margin-bottom:.2em }
.event-banner .meta{ color:var(--warm-grey); font-size:.96rem }
.event-banner .tz{ font-size:var(--step--1); color:var(--gold-soft) }

/* ---------- testimonial ---------- */
.quote{ max-width:54ch; margin:0 auto; text-align:center }
.quote blockquote{ font-family:var(--f-display); font-size:var(--step-2);
  line-height:1.32; color:var(--night); margin:0 0 var(--s5); font-style:italic }
.quote .by{ font-size:var(--step--1); letter-spacing:.04em; color:var(--ink-soft) }
.quote .mark{ font-family:var(--f-display); font-size:4rem; color:var(--gold);
  line-height:.6; height:.5em; display:block }

/* ---------- lead capture ---------- */
.capture{ background:
   radial-gradient(120% 140% at 0% 0%, rgba(184,146,58,.16), transparent 50%),
   var(--night); color:#EDE7D8; border-radius:var(--radius-lg);
   padding:var(--s8) var(--s7); text-align:center; box-shadow:var(--sh-3) }
/* EVERY heading level + body text must be light on the dark .capture block.
   (Was h2-only: an h1/h3/h4 fell back to the global dark var(--night) =
   invisible dark-on-dark. WCAG AA: #F4EEDF on #3A2218 approx night >= 9:1.) */
.capture h1,.capture h2,.capture h3,.capture h4{ color:#F4EEDF }
.capture p,.capture li{ color:#EFE7D6 }
.capture p{ max-width:48ch; margin-inline:auto }
.capture a{ color:var(--gold-soft) }
.capture strong,.capture b{ color:#F7F1E2 }
.lead-form{ display:flex; gap:var(--s3); max-width:480px; margin:var(--s6) auto 0;
  flex-wrap:wrap; justify-content:center }
.lead-form input[type=email]{ flex:1 1 240px; min-height:48px; font-size:16px;
  padding:0 1em; border-radius:var(--radius-pill); border:1.5px solid rgba(233,217,174,.4);
  background:rgba(255,255,255,.95); color:var(--ink); font-family:var(--f-body) }
.lead-form input::placeholder{ color:#6b7280 }
.consent{ font-size:var(--step--1); color:var(--warm-grey-soft); margin-top:var(--s4);
  display:flex; gap:.5em; align-items:flex-start; justify-content:center;
  max-width:46ch; margin-inline:auto; text-align:left }
.consent input{ margin-top:3px; min-width:18px; min-height:18px; accent-color:var(--gold) }

/* ---------- host-a-satsang form (stacked multi-field variant) ---------- */
/* The bare email form stays a centered pill; message/host forms stack full-width. */
.lead-form--stack{ flex-direction:column; flex-wrap:nowrap; align-items:stretch;
  max-width:560px; gap:var(--s4) }
.lead-form--stack .consent{ justify-content:flex-start; margin-inline:0 }
.lead-form--stack .btn{ align-self:flex-start }
/* two-up field row that collapses on small screens */
.lead-form .lead-row{ display:flex; gap:var(--s3); flex-wrap:wrap }
.lead-form .lead-row > *{ flex:1 1 200px; min-width:0 }
/* shared field look for the text inputs + textarea inside any lead form */
.lead-form input[type=text],
.lead-form textarea{ width:100%; min-height:48px; font-size:16px; padding:.7em 1em;
  border-radius:var(--radius); border:1.5px solid rgba(233,217,174,.4);
  background:rgba(255,255,255,.95); color:var(--ink); font-family:var(--f-body) }
.lead-form textarea{ resize:vertical; line-height:1.5 }
.lead-form input[type=text]::placeholder,
.lead-form textarea::placeholder{ color:#6b7280 }

/* ---------- FAQ accordion ---------- */
.faq{ max-width:var(--readw); margin:0 auto }
.faq details{ border-bottom:1px solid var(--line); padding:var(--s4) 0 }
.faq summary{ font-family:var(--f-display); font-size:var(--step-1); color:var(--night);
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:var(--s4) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--gold); font-size:1.6rem; font-family:var(--f-body);
  transition:transform .2s var(--ease); line-height:1 }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ color:var(--ink-soft); margin:var(--s4) 0 0; max-width:62ch }

/* ---------- teaching grid ---------- */
.teach-card{ background:var(--bg-warm); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease) }
.teach-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-3) }
.teach-card .thumb{ aspect-ratio:16/9; background:
   linear-gradient(150deg,#5A3A24,#241410); position:relative; overflow:hidden }
/* 16/9 thumb crops a portrait hard top+bottom; 50% 30% keeps a face/subject high
   in frame (featured images are author-uploaded and may be portraits). */
.teach-card .thumb img{ width:100%; height:100%; object-fit:cover; object-position:50% 30% }
.teach-card .thumb .om{ position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:3.4rem; color:rgba(233,217,174,.4) }
.teach-card .body{ padding:var(--s5) }
.teach-card .tag{ font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase;
  /* WCAG-AA: gold-deep ~3.75:1 on the light card fails; antique bronze passes. */
  color:#7A5E1F; font-weight:600 }
.teach-card h2,.teach-card h3{ margin:.4em 0 .3em; font-size:1.3rem; font-family:var(--f-display); line-height:1.14 }
.teach-card p{ color:var(--ink-soft); font-size:.96rem; margin:0 }

/* ---------- placeholder marker (SATYA: explicitly flags content needing CEO truth) ---------- */
.ph{ position:relative; outline:1.5px dashed var(--gold); outline-offset:3px;
  border-radius:6px }
.ph::before{ content:"TO REPLACE"; position:absolute; top:-9px; left:10px;
  background:var(--gold); color:#1c1407; font-family:var(--f-body); font-size:9px;
  font-weight:700; letter-spacing:.12em; padding:1px 7px; border-radius:4px; z-index:2 }
.ph-inline{ background:rgba(184,146,58,.14); border-bottom:1.5px dashed var(--gold-deep);
  padding:0 .25em; border-radius:3px; font-style:italic }

/* ---------- footer ---------- */
.site-footer{ background:var(--night-2); color:var(--warm-grey); padding:var(--s8) 0 var(--s6) }
.site-footer a{ color:var(--warm-grey) } .site-footer a:hover{ color:var(--gold-soft) }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s7);
  padding-bottom:var(--s7); border-bottom:1px solid rgba(233,217,174,.14) }
/* footer column headings are <h2> (accessible: no heading-level skip from the
   page's h2 content) but styled as small uppercase labels. */
.foot-grid h2{ font-family:var(--f-body); font-size:var(--step--1); font-weight:600; line-height:1.3;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 var(--s4) }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6em }
.foot-brand .brand{ color:#F4EEDF }
.foot-brand p{ color:var(--warm-grey-soft); font-size:.94rem; max-width:34ch; margin-top:var(--s3) }
.foot-bottom{ display:flex; justify-content:space-between; gap:var(--s5);
  flex-wrap:wrap; padding-top:var(--s5); font-size:var(--step--1); color:var(--warm-grey-dim) }
.disclaimer{ font-size:var(--step--1); color:var(--warm-grey-dim); max-width:80ch; margin-top:var(--s4);
  line-height:1.55 }

/* ---------- scroll reveal (progressive enhancement: hidden ONLY when JS active) ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),
  transform .6s var(--ease) }
.js .reveal.in{ opacity:1; transform:none }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--s7); padding:var(--s8) 0 }
  .hero-portrait{ max-width:420px; margin:0 auto }
  .grid.c4{ grid-template-columns:repeat(2,1fr) }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:var(--s6) }
  .event-banner{ grid-template-columns:1fr; text-align:center; gap:var(--s4) }
  .event-banner .when{ border-right:0; border-bottom:1px solid rgba(233,217,174,.2);
    padding-right:0; padding-bottom:var(--s4) }
}
@media (max-width:760px){
  .site-header .nav-links,.nav-cta .btn{ display:none }
  .nav-toggle{ display:inline-flex }
  /* drawer opens via a direct class on itself - NOT an adjacent-sibling selector:
     .nav (inside .container) and .nav-drawer (sibling of .container) have different
     parents, so .nav.open + .nav-drawer could never match. JS now toggles #drawer.open. */
  .nav-drawer.open{ display:block }
  .grid.c2,.grid.c3{ grid-template-columns:1fr }
  .section{ padding:var(--s8) 0 } .section.tight{ padding:var(--s6) 0 }
  .capture{ padding:var(--s7) var(--s5) }
  /* stop the hero eating the mobile fold - get h1 + one CTA + trust/video into the
     first ~1.5 screens (CEO directive: critical conversion elements near the top). */
  .hero-grid{ padding:var(--s6) 0 }
  .hero h1{ margin-bottom:var(--s4) } .hero .lede{ margin-bottom:var(--s5) }
  /* shrink the decorative hero portrait on mobile so the authority video + trust
     signals rise toward the top instead of being pushed a screen down by a 560px photo. */
  .hero-portrait{ max-width:260px }
  .hero-portrait .frame{ aspect-ratio:4/5 }
}
@media (max-width:420px){
  .grid.c4{ grid-template-columns:1fr 1fr }
  .foot-grid{ grid-template-columns:1fr }
}

/* mobile drawer */
.nav-drawer{ display:none; border-top:1px solid var(--line);
  background:var(--bg-warm); padding:var(--s4) 0 }
.nav-drawer ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.nav-drawer a{ display:block; padding:.85em clamp(18px,4vw,40px); color:var(--ink);
  font-weight:500; min-height:48px }
.nav-drawer a:hover{ background:rgba(184,146,58,.1); color:var(--night) }
.nav-drawer .btn{ margin:var(--s4) clamp(18px,4vw,40px) 0; display:flex }

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

/* ============================================================================
   Additions: Q&A page, quiz page, modern motion, micro-interactions
   GPU-safe animation values per emil-design-eng skill.
   ========================================================================== */

/* ---------- hero compact variant ---------- */
.hero--compact{ min-height:auto }
.hero--compact .hero-grid{ align-items:center }

/* ---------- floating hero glyph (subtle, continuous) ---------- */
.hero::after{
  animation:hero-float 18s ease-in-out infinite;
  will-change:transform
}
@keyframes hero-float{
  0%,100%{ transform:translateY(-50%) translateX(0) scale(1) }
  50%{ transform:translateY(-52%) translateX(1.5%) scale(1.03) }
}

/* ---------- button shimmer ---------- */
.btn-gold{ position:relative; overflow:hidden }
.btn-gold::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:none
}
.btn-gold:hover::before{
  animation:btn-shimmer .9s cubic-bezier(.4,0,.2,1)
}
@keyframes btn-shimmer{
  to{ transform:translateX(100%) }
}

/* ---------- enhanced nav underline (draw from center) ---------- */
.site-header .nav-links a::after{
  left:50%; transform:translateX(-50%);
  transition:width .22s cubic-bezier(.16,1,.3,1)
}
.site-header .nav-links a:hover::after,.site-header .nav-links a[aria-current="page"]::after{ width:100% }

/* ---------- scroll progress bar ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  box-shadow:0 0 12px rgba(184,146,58,.45);
  transition:width .1s linear;
  will-change:width
}

/* ---------- FAQ page ---------- */
.faq-search{ max-width:var(--readw); margin:0 auto var(--s7); position:relative }
.faq-search input{
  width:100%; min-height:56px; padding:0 1.2em;
  font-size:var(--step-0); font-family:var(--f-body);
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
  background:var(--bg-warm); color:var(--ink);
  box-shadow:var(--sh-1); transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.faq-search input:focus{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(184,146,58,.12); outline:none }
.faq-count{ font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3) }

.faq details{
  border-bottom:1px solid var(--line); padding:var(--s4) 0;
  transition:background .2s var(--ease)
}
.faq details[open]{ padding-bottom:var(--s5) }
.faq summary{ font-family:var(--f-display); font-size:var(--step-1); color:var(--night);
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:var(--s4) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; width:14px; height:14px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg); transition:transform .25s cubic-bezier(.34,1.56,.64,1)
}
.faq details[open] summary::after{ transform:rotate(-135deg) }
.faq details p{
  color:var(--ink-soft); margin:var(--s4) 0 0; max-width:62ch;
  animation:faq-open .25s cubic-bezier(.16,1,.3,1)
}
@keyframes faq-open{
  from{ opacity:0; transform:translateY(-6px) }
  to{ opacity:1; transform:none }
}

/* ---------- quiz page ---------- */
.quiz-wrap{ max-width:720px; margin:0 auto }
.quiz-progress{
  position:relative; height:6px; background:rgba(184,146,58,.18);
  border-radius:var(--radius-pill); margin-bottom:var(--s6); overflow:hidden
}
.quiz-progress-bar{
  height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  border-radius:var(--radius-pill); transition:width .35s cubic-bezier(.16,1,.3,1);
  will-change:width
}
.quiz-progress-text{ display:block; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3) }

.quiz-card{
  background:var(--bg-warm); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s6) var(--s7); box-shadow:var(--sh-2)
}
.quiz-question{ font-size:var(--step-2); margin-bottom:var(--s5); color:var(--night) }
.quiz-options{ display:grid; gap:var(--s3) }
.quiz-option{
  display:flex; align-items:flex-start; gap:var(--s3); width:100%; text-align:left;
  padding:var(--s4); border:1.5px solid var(--line); border-radius:var(--radius);
  background:transparent; color:var(--ink); font-family:var(--f-body); font-size:var(--step-0);
  cursor:pointer; transition:border-color .15s var(--ease),background .15s var(--ease),transform .1s var(--ease)
}
.quiz-option:hover{ border-color:var(--gold); background:rgba(184,146,58,.06) }
.quiz-option:active{ transform:scale(.995) }
.quiz-option .letter{
  flex:none; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--line); color:var(--ink-soft); font-weight:600; font-size:.85rem;
  transition:background .2s var(--ease),color .2s var(--ease)
}
.quiz-option.selected .letter{ background:var(--gold); color:#1c1407 }
.quiz-option.correct{ border-color:var(--ok); background:color-mix(in srgb, var(--ok) 8%, transparent) }
.quiz-option.correct .letter{ background:var(--ok); color:#fff }
.quiz-option.wrong{ border-color:var(--err); background:color-mix(in srgb, var(--err) 8%, transparent) }
.quiz-option.wrong .letter{ background:var(--err); color:#fff }
.quiz-option.disabled{ pointer-events:none }

.quiz-feedback{ margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line);
  animation:fade-up .25s cubic-bezier(.16,1,.3,1)
}
.quiz-feedback p{ color:var(--ink-soft); margin-bottom:var(--s4) }

.quiz-result{ text-align:center; padding:var(--s8) var(--s6); background:var(--bg-warm);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--sh-3);
  animation:scale-in .35s cubic-bezier(.16,1,.3,1)
}
.quiz-result-score{
  font-family:var(--f-display); font-size:var(--step-4); color:var(--gold); line-height:1
}
.quiz-result h2{ margin:var(--s4) 0 var(--s3) }
.quiz-result p{ color:var(--ink-soft); max-width:48ch; margin:0 auto var(--s6) }
.quiz-result-actions{ display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center }

/* ---------- motion classes (JS toggles .in) ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1); will-change:transform,opacity }
.js .reveal.in{ opacity:1; transform:none; will-change:auto }

.js .reveal-left{ opacity:0; transform:translateX(-28px); transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1); will-change:transform,opacity }
.js .reveal-left.in{ opacity:1; transform:none; will-change:auto }

.js .reveal-right{ opacity:0; transform:translateX(28px); transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1); will-change:transform,opacity }
.js .reveal-right.in{ opacity:1; transform:none; will-change:auto }

.js .reveal-scale{ opacity:0; transform:scale(.94); transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1); will-change:transform,opacity }
.js .reveal-scale.in{ opacity:1; transform:none; will-change:auto }

@keyframes fade-up{
  from{ opacity:0; transform:translateY(12px) }
  to{ opacity:1; transform:none }
}
@keyframes scale-in{
  from{ opacity:0; transform:scale(.92) }
  to{ opacity:1; transform:scale(1) }
}

/* stagger via custom property */
.reveal,.reveal-left,.reveal-right,.reveal-scale{ transition-delay:calc(var(--stagger,0) * 80ms) }

/* ---------- hero portrait gentle parallax ---------- */
.hero-portrait .frame{ transition:transform .5s cubic-bezier(.4,0,.2,1); will-change:transform }

/* ---------- focus improvements ---------- */
.visually-hidden{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero::after{ animation:none }
  .btn-gold::before{ display:none }
  .quiz-progress-bar{ transition:none }
  .faq details p{ animation:none }
  .quiz-card,.quiz-result,.quiz-feedback{ animation:none }
  .reveal,.reveal-left,.reveal-right,.reveal-scale{ transition:none; opacity:1; transform:none; will-change:auto }
  .hero-portrait .frame{ transition:none }
}

/* =========================================================================
 * CONSILIUM TRUST + CONVERSION COMPONENTS (v1.35.0)
 * service media slot - testimonials - free intro call - service detail.
 * Mobile-first @375; WCAG-AA contrast (dark blocks light EVERY text descendant).
 * ========================================================================= */

/* ---------- service / category media slot ---------- */
.service-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--sh-1);
  background:var(--bg-warm) }
.service-media .media-figure{ border-radius:var(--radius-lg) }
/* branded Om placeholder (shown when no real photo exists yet - never a fake photo) */
.service-media__ph{ display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/10; background:
    radial-gradient(120% 130% at 30% 20%, rgba(184,146,58,.18), transparent 55%),
    linear-gradient(160deg, #F3EAD6 0%, #E9DCC0 100%);
  border:1px solid var(--line-gold) }
.service-media.tall .service-media__ph{ aspect-ratio:4/5 }
.service-media.square .service-media__ph{ aspect-ratio:1/1 }
.service-media.portrait .service-media__ph{ aspect-ratio:3/4 }
.service-media__ph .om{ font-family:var(--f-sacred); font-size:clamp(3rem,12vw,5rem);
  color:var(--gold); opacity:.85; line-height:1 }

/* ---------- testimonials ---------- */
.testimonial-grid{ margin-top:var(--s2) }
.testimonial-card{ display:flex; flex-direction:column; gap:var(--s3); position:relative;
  background:var(--bg-warm); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s6) var(--s5) var(--s5); box-shadow:var(--sh-1) }
.testimonial-card .mark{ font-family:var(--f-display); font-size:2.6rem; color:var(--gold);
  line-height:.5; height:.5em }
.testimonial-card blockquote{ margin:0; font-family:var(--f-display); font-style:italic;
  font-size:var(--step-1); line-height:1.4; color:var(--night) }
.testimonial-card figcaption{ margin-top:auto; font-size:var(--step--1); color:var(--ink-soft) }
.testimonial-card figcaption b{ color:var(--night); display:block }
.testimonial-card .testimonial-detail{ display:block; color:var(--ink-soft) }
/* honest empty state - dignified, never a fabricated quote */
.testimonial-empty{ max-width:60ch; margin:0 auto; text-align:center;
  background:var(--bg-warm); border:1px dashed var(--line-gold); border-radius:var(--radius-lg);
  padding:var(--s7) var(--s5) }
.testimonial-empty .om{ font-family:var(--f-sacred); font-size:2.6rem; color:var(--gold);
  display:block; margin-bottom:var(--s3); opacity:.85 }
.testimonial-empty p{ color:var(--ink-soft); margin:0 auto; max-width:52ch }
.testimonial-empty__cta{ margin-top:var(--s4) !important; font-size:var(--step--1) }

/* ---------- free 15-minute intro call (dark .capture box - light all text) ---------- */
.intro-call__box{ text-align:center; max-width:760px; margin-inline:auto }
.intro-call__points{ list-style:none; padding:0; margin:var(--s5) auto var(--s5);
  max-width:46ch; display:grid; gap:var(--s3); text-align:left }
.intro-call__points li{ position:relative; padding-left:1.7em; color:#EFE7D6 }
.intro-call__points li::before{ content:""; position:absolute; left:0; top:.5em; width:14px;
  height:8px; border-left:2px solid var(--gold-soft); border-bottom:2px solid var(--gold-soft);
  transform:rotate(-45deg) }
.intro-call__form{ margin-top:var(--s5) }
.intro-call__note{ font-size:var(--step--1); color:var(--warm-grey-soft,#cfc6b0);
  margin-top:var(--s4) }

/* ---------- concrete service detail (definition list) ---------- */
.service-detail__lede{ font-size:var(--step-1); color:var(--ink-soft); line-height:1.5;
  margin:.4em 0 0 }
.service-detail__list{ margin:0; display:grid; gap:var(--s4) }
.service-detail__row{ display:grid; grid-template-columns:1fr; gap:var(--s1);
  padding-bottom:var(--s4); border-bottom:1px solid var(--line) }
.service-detail__row:last-child{ border-bottom:0; padding-bottom:0 }
.service-detail__row dt{ font-family:var(--f-display); font-size:var(--step-0,1rem);
  /* WCAG-AA: gold-deep (#9A7A2E) ~3.62:1 on sand fails; antique bronze passes (5.46:1). */
  font-weight:600; color:#7A5E1F; letter-spacing:.01em }
.service-detail__row dd{ margin:0; color:var(--ink-soft); line-height:1.55 }

/* desktop: label left, copy right for the detail list */
@media (min-width:720px){
  .service-detail__row{ grid-template-columns:minmax(8.5em,11em) 1fr; gap:var(--s5);
    align-items:baseline }
  .service-detail__row dt{ text-align:right }
}