/* =============================================================================
   lod.css — Lady of Destiny design system v1
   One shared foundation for EVERY page (homepage included).
   Quiet luxury: warm ivory, charcoal ink, muted antique gold, sage & stone.
   Load order:  lod.css  →  page/section stylesheet  →  page-specific overrides
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:            #faf6ee;   /* page background — warm ivory       */
  --bg-2:          #f3ece0;   /* alternating band                   */
  --surface:       #fffdf8;   /* cards                              */
  --surface-muted: #f6f0e4;   /* quiet cards / wells                */
  --overlay:       rgba(32,28,24,.55);

  /* Ink */
  --ink:           #221f1b;   /* headings                           */
  --ink-2:         #4a443c;   /* body                               */
  --ink-3:         #6f675c;   /* secondary                          */
  --ink-muted:     #736a5f;   /* captions, meta — 4.52:1 on --bg-2  */

  /* Line & accent
     The gold values are pinned to WCAG AA, not to taste: --gold is used as a
     TEXT colour in ~200 rules across the stylesheets, so it has to clear 4.5:1
     on every surface token (worst case --bg-2 #f3ece0 → 4.62:1) and also carry
     near-white text when it is a button fill (5.33:1). --gold-bright is the
     hover/emphasis gold: on an ivory palette "brighter" means deeper, since a
     lighter gold cannot pass on these backgrounds. */
  --line:          #e2d8c6;   /* decorative rules & card edges       */
  --line-strong:   #cdbfa6;   /* decorative, heavier                 */
  --line-field:    #8f8064;   /* form-control borders — 3.29:1 (1.4.11) */
  --gold:          #87641f;   /* accent — used sparingly            */
  --gold-bright:   #6d5019;
  --gold-soft:     rgba(135,100,31,.10);
  --sage:          #7f8a76;
  --clay:          #a9694c;

  /* Feedback */
  --success:       #4c7a52;
  --warning:       #a97b25;
  --error:         #a2453c;

  /* Type */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script:  'Great Vibes', cursive;

  /* Type scale (fluid, 320 → 1600) */
  --t-display-xl: clamp(2.9rem, 1.6rem + 5.6vw, 6rem);
  --t-display-l:  clamp(2.4rem, 1.4rem + 4.2vw, 4.5rem);
  --t-h1:         clamp(2.1rem, 1.4rem + 3vw,  3.4rem);
  --t-h2:         clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem);
  --t-h3:         clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  --t-h4:         clamp(1.05rem, .98rem + .35vw, 1.2rem);
  --t-body-l:     clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --t-body:       1rem;
  --t-small:      .9rem;
  --t-caption:    .8rem;
  --t-eyebrow:    .72rem;
  --t-button:     .8rem;
  --t-nav:        .78rem;

  /* Spacing scale */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 5vw, 7rem);

  /* Radius */
  --r-sm: 4px;  --r-md: 10px;  --r-lg: 18px;  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(46,38,26,.05), 0 2px 6px rgba(46,38,26,.04);
  --shadow-md: 0 6px 18px rgba(46,38,26,.07), 0 2px 6px rgba(46,38,26,.04);
  --shadow-lg: 0 18px 44px rgba(46,38,26,.12), 0 4px 12px rgba(46,38,26,.05);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.3,1);
  --t-fast: .18s;  --t-std: .32s;  --t-slow: .6s;

  /* Containers */
  /* Container caps raised so 27"/32" monitors stop sitting in a letterbox.
     Deliberately plain px, NOT min(vw, …): a vw cap also bites on phones and
     would make mobile narrower, which is the opposite of what we want.
     Side breathing room is handled entirely by --pad-x, which scales with the
     viewport — so small screens get a tight 16px and large ones get 80px. */
  --w-shell: 1680px;   /* THE one lever. Every page wrapper on the site reads
                          this — .container (lod.css), .wrap (site.css),
                          .svc-viewport, and the compiled-Tailwind
                          max-w-* used by the crystal and tarot tools. Change
                          this number and the whole site changes together.
                          Nothing else should ever hardcode a page width. */
  --w-narrow: 860px;  --w-text: 1060px;  --w-page: var(--w-shell);  --w-wide: 1880px;
  /* The crystal and tarot readings are documents, not dashboards — one column,
     read top to bottom. Every section of those reports uses this ONE width so
     their edges line up. Do not give the hero and the body different widths:
     they sit directly on top of each other and any difference reads as a
     broken, ragged step down the middle of the page. */
  --w-report: 1180px;
  /* The single side-padding scale. Every wrapper uses this, so no page type
     can end up with different breathing room from another.
     NOTE the spaces around the "+": clamp(1rem,.4rem+2vw,2.25rem) is invalid
     CSS and the browser drops the whole declaration silently, which once left
     content touching the screen edges. Never remove these spaces. */
  --pad-x: clamp(1rem, .4rem + 2vw, 2.25rem);
}

/* ---------- 2. RESET ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
.lod * { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
.lod img, .lod svg, .lod video { display: block; max-width: 100%; }
.lod img { height: auto; }

/* ---------- 3. BASE TYPE ------------------------------------------------- */
.lod {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.lod h1, .lod h2, .lod h3, .lod h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.01em;
}
.lod h1 { font-size: var(--t-h1); }
.lod h2 { font-size: var(--t-h2); }
.lod h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.25; }
.lod h4 { font-size: var(--t-h4); font-weight: 600; font-family: var(--font-body); letter-spacing: 0; }
.lod p  { color: var(--ink-2); }
/* :where() so this contributes ZERO specificity (it resolves to a bare `a`,
   0-0-1). As `.lod a` it was 0-1-1 and quietly outranked every single-class
   rule that gave a link its own colour — `.btn`, `.skip-link`, `.lod-skip` —
   so anchor-based buttons inherited body ink instead of their own foreground.
   Any component rule must win over this default, never lose to it. */
:where(.lod) a { color: inherit; }

.display-xl { font-family: var(--font-display); font-size: var(--t-display-xl); line-height: 1.02; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.display-l  { font-family: var(--font-display); font-size: var(--t-display-l);  line-height: 1.06; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.lede       { font-size: var(--t-body-l); line-height: 1.75; color: var(--ink-3); }
.small      { font-size: var(--t-small); }
.caption    { font-size: var(--t-caption); color: var(--ink-muted); }
.eyebrow {
  font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  display: inline-block;
}
.script { font-family: var(--font-script); font-weight: 400; }
.accent { color: var(--gold); }
.ink-3  { color: var(--ink-3); }

/* Long-form prose */
.prose { max-width: var(--w-text); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: var(--s-2); }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--gold-bright); }

/* ---------- 4. LAYOUT ---------------------------------------------------- */
.container       { width: 100%; max-width: var(--w-shell); margin-inline: auto; padding-inline: var(--pad-x); }
.container-wide  { max-width: var(--w-wide); }
.container-text  { max-width: var(--w-text); }
.container-narrow{ max-width: var(--w-narrow); }
.section         { padding-block: var(--section-y); }
.section-tight   { padding-block: calc(var(--section-y) * .6); }
.section-alt     { background: var(--bg-2); }
.section-head    { max-width: var(--w-text); margin-bottom: var(--s-6); }
.section-head .eyebrow + h2 { margin-top: var(--s-3); }
.section-head .lede { margin-top: var(--s-4); }
.center { text-align: center; }
.center .section-head { margin-inline: auto; }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split  { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.stack  { display: flex; flex-direction: column; gap: var(--s-4); }
.row    { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } }

/* ---------- 5. BUTTONS --------------------------------------------------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-size: var(--t-button); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 1.9rem; border: 1px solid var(--btn-bd); background: var(--btn-bg);
  color: var(--btn-fg); border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-std) var(--ease), color var(--t-std) var(--ease),
              border-color var(--t-std) var(--ease), transform var(--t-fast) var(--ease);
}
/* `.lod a { color: inherit }` is specificity 0-1-1 and outranks `.btn` (0-1-0),
   so every anchor styled as a button silently dropped its foreground and
   inherited the surrounding ink — the primary CTA was rendering #4a443c on gold
   at 2.27:1 instead of the intended near-white. Restate it higher. */
.lod a.btn { color: var(--btn-fg); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { --btn-bg: var(--gold); --btn-fg: #fffdf6; --btn-bd: var(--gold); }
.btn-primary:hover { --btn-bg: var(--gold-bright); --btn-bd: var(--gold-bright); }
.btn-secondary { --btn-fg: var(--ink); --btn-bd: var(--line-field); }
.btn-secondary:hover { --btn-bd: var(--gold); --btn-fg: var(--gold); }
.btn-ghost { --btn-bd: transparent; --btn-fg: var(--gold); padding-inline: .4rem; }
.btn-ghost:hover { --btn-fg: var(--gold-bright); }
.btn-sm { padding: .7rem 1.25rem; font-size: .74rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-caption); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform var(--t-std) var(--ease); }
.link-arrow:hover::after, a:hover > .link-arrow::after { transform: translateX(4px); }

/* ---------- 6. CARDS ----------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1vw, 2rem); display: flex; flex-direction: column; gap: var(--s-3);
  text-decoration: none; transition: border-color var(--t-std) var(--ease),
    box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease);
}
a.card:hover, .card-hover:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card-muted { background: var(--surface-muted); }
.card-feature { border-color: var(--gold); background: linear-gradient(160deg, var(--gold-soft), transparent 60%), var(--surface); }
.card h3 { margin: 0; }
.card p  { color: var(--ink-3); font-size: var(--t-small); line-height: 1.6; }
.card .eyebrow { margin-bottom: -.2rem; }
.card-media { aspect-ratio: 4/5; border-radius: var(--r-md); overflow: hidden; background: var(--surface-muted); }
.card-media img, .card-media svg { width: 100%; height: 100%; object-fit: cover; }

/* Numbered process steps */
.step { border-top: 1px solid var(--line-strong); padding-top: var(--s-4); }
.step-num { font-family: var(--font-display); font-size: 2rem; color: var(--gold); line-height: 1; }
.step h3 { margin: var(--s-3) 0 var(--s-2); }
.step p { color: var(--ink-3); font-size: var(--t-small); }

/* Stat / trust strip */
.stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 4rem); justify-content: center; }
.stat-num { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); color: var(--gold); line-height: 1; }
.stat-label { font-size: var(--t-caption); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-top: .45rem; }

/* Quote */
.quote { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.5; color: var(--ink); font-style: italic; }
.quote-by { font-size: var(--t-caption); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-top: var(--s-4); }

/* Divider */
.rule { height: 1px; background: var(--line); border: 0; margin-block: var(--s-6); }
.rule-ornament { display: flex; align-items: center; justify-content: center; gap: .8rem; color: var(--gold); }
.rule-ornament::before, .rule-ornament::after { content: ""; height: 1px; width: min(90px, 12vw); background: var(--line-strong); }

/* ---------- 7. FORMS ----------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .45rem; }
.label { font-size: var(--t-caption); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.input, .select, .textarea {
  font-family: var(--font-body); font-size: var(--t-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-field); border-radius: var(--r-sm);
  padding: .85rem 1rem; width: 100%; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}
.textarea { min-height: 8rem; resize: vertical; }
.field-error { color: var(--error); font-size: var(--t-caption); }
.input[aria-invalid="true"] { border-color: var(--error); }
.help { font-size: var(--t-caption); color: var(--ink-muted); }

/* Choice chips */
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.1rem;
  border: 1px solid var(--line-field); border-radius: var(--r-pill); background: var(--surface);
  font-size: var(--t-small); color: var(--ink-2); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--gold); border-color: var(--gold); color: #fffdf6; }

/* ---------- 8. ACCORDION ------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-4); padding: var(--s-4) 0; font-family: var(--font-display);
  font-size: var(--t-h4); color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--gold); font-family: var(--font-body); font-size: 1.3rem; transition: transform var(--t-std) var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .acc-body { padding-bottom: var(--s-5); color: var(--ink-3); max-width: var(--w-text); }

/* ---------- 9. BADGES / NOTES -------------------------------------------- */
.badge { display: inline-block; font-size: var(--t-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .3rem .8rem; }
.note { border-left: 2px solid var(--gold); background: var(--gold-soft); padding: var(--s-4) var(--s-5); border-radius: 0 var(--r-md) var(--r-md) 0; }
.note p { color: var(--ink-2); font-size: var(--t-small); }

/* ---------- 10. MOTION --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; }

/* ---------- 11. ACCESSIBILITY -------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--gold); color: #fffdf6; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-md) 0; text-decoration: none; }
.skip-link:focus { left: 0; }
:where(.lod) :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

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

/* =============================================================================
   13. SITE CHROME — topbar · sticky header · mega-menus · drawer · footer
   Markup is generated by /assets/lod-chrome.js (the single source of truth for
   build-lib.js, build-services.js, build-store.js, index.html, router.js,
   /find-your-crystal/ and /tarot/). Everything here is deliberately written
   with explicit values so the homepage's own inline stylesheet — which loads
   AFTER this file and contains bare `footer {}` / broad `a {}` rules — cannot
   change the chrome. Tokens only; no new colour literals.
   ========================================================================== */
:root {
  --lod-topbar-h: 40px;      /* fixed → text hydration can never shift layout */
  --lod-logo-w:   264px;     /* reserved box → late web font can never reflow */
  --lod-logo-h:   46px;
  --lod-head-y:   14px;
  --lod-head-y-sm: 8px;
  --lod-z-head:   900;
}

/* ---------- 13.1 Announcement strip -------------------------------------- */
.lod-topbar {
  height: var(--lod-topbar-h); min-height: var(--lod-topbar-h); max-height: var(--lod-topbar-h);
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  overflow: hidden; position: relative; z-index: calc(var(--lod-z-head) + 1);
  display: flex; align-items: center;
}
.lod-topbar-inner {
  width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--pad-x);
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  font-family: var(--font-body); font-size: var(--t-caption); line-height: 1;
  letter-spacing: .02em; color: var(--ink-3); white-space: nowrap;
}
.lod-topbar-text { overflow: hidden; text-overflow: ellipsis; }
.lod-topbar-link {
  color: var(--gold); text-decoration: none; font-weight: 600; letter-spacing: .04em;
  border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease);
  /* the bar is only ~14px of text — pad the target out to 24px without
     changing the bar's height (the padding eats the bar's own y-padding) */
  display: inline-flex; align-items: center; min-height: 24px;
}
.lod-topbar-link:hover { border-bottom-color: var(--gold); }
@media (max-width: 720px) { .lod-topbar-text { display: none; } }

/* ---------- 13.2 Header shell -------------------------------------------- */
.lod-header {
  position: sticky; top: 0; z-index: var(--lod-z-head);
  background: var(--bg); border-bottom: 1px solid transparent;
  transition: background var(--t-std) var(--ease), border-color var(--t-std) var(--ease),
              box-shadow var(--t-std) var(--ease), padding var(--t-std) var(--ease);
  padding-block: var(--lod-head-y);
}
.lod-header.is-scrolled {
  background: var(--surface); border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm); padding-block: var(--lod-head-y-sm);
}
.lod-header-inner {
  width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--pad-x);
  display: grid; grid-template-columns: var(--lod-logo-w) 1fr auto;
  align-items: center; column-gap: var(--s-4);
  min-height: var(--lod-logo-h);  /* height is set by the reserved logo box only */
}

/* Logo — fixed box; the script face may arrive late, the box never moves. */
.lod-logo {
  width: var(--lod-logo-w); min-width: var(--lod-logo-w); max-width: var(--lod-logo-w);
  height: var(--lod-logo-h); min-height: var(--lod-logo-h);
  display: flex; align-items: center; overflow: hidden;
  font-family: var(--font-script); font-size: 2.15rem; line-height: 1;
  letter-spacing: .01em; text-transform: none; text-decoration: none;
  color: var(--gold); white-space: nowrap; padding: 0; margin: 0;
}
.lod-logo span { display: block; }

/* ---------- 13.3 Top-level nav ------------------------------------------- */
.lod-nav { justify-self: center; }
.lod-nav-list {
  display: flex; align-items: center; gap: clamp(1rem, .2rem + 1.5vw, 2.1rem);
  list-style: none; margin: 0; padding: 0;
}
.lod-nav-item { position: static; margin: 0; padding: 0; }
.lod-nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-body); font-size: var(--t-nav); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-2); white-space: nowrap; padding: .55rem 0; position: relative;
  line-height: 1.2;  /* keeps every top-level item on one 33px row */
  transition: color var(--t-fast) var(--ease);
}
.lod-nav-link > span { position: relative; display: inline-block; }
.lod-nav-link > span::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -5px; height: 1px;
  background: var(--gold); transition: left var(--t-std) var(--ease), right var(--t-std) var(--ease);
}
.lod-nav-item:hover > .lod-nav-link, .lod-nav-item.is-open > .lod-nav-link,
.lod-nav-item.is-active > .lod-nav-link { color: var(--gold); }
.lod-nav-item:hover > .lod-nav-link > span::after,
.lod-nav-item.is-open > .lod-nav-link > span::after,
.lod-nav-item.is-active > .lod-nav-link > span::after,
.lod-nav-link:focus-visible > span::after { left: 0; right: 0; }
.lod-caret {
  width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: .55; margin-top: 1px;
  transition: transform var(--t-std) var(--ease);
}
.lod-nav-item:hover > .lod-nav-link .lod-caret,
.lod-nav-item.is-open > .lod-nav-link .lod-caret { transform: rotate(180deg); opacity: 1; }

/* ---------- 13.4 Actions -------------------------------------------------- */
.lod-actions { display: flex; align-items: center; gap: var(--s-3); justify-self: end; }
/* Scoped to the header actions on purpose: ".lod-book" is a component class, not
   a global one, and an unscoped rule once bled into anything else that used the
   name (the booking wizard's overlay root). */
.lod-actions .lod-book {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: var(--t-button); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  padding: .72rem 1.3rem; border: 1px solid var(--gold); border-radius: var(--r-sm);
  background: var(--gold); color: #fffdf6; white-space: nowrap; cursor: pointer;
  line-height: 1.2;  /* explicit: the header must be the same height on every page */
  transition: background var(--t-std) var(--ease), border-color var(--t-std) var(--ease);
}
.lod-actions .lod-book:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #fffdf6; }
.lod-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 9px; margin: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.lod-burger span { display: block; width: 100%; height: 1px; background: var(--ink); transition: transform var(--t-std) var(--ease), opacity var(--t-std) var(--ease); }

/* ---------- 13.5 Mega-menus ---------------------------------------------- */
/* Anchored to the header (position:sticky is a containing block), never to the
   item — so a panel can never hang off the edge of the viewport.            */
.lod-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease), visibility var(--t-std);
}
.lod-nav-item:hover > .lod-mega,
.lod-nav-item.is-open > .lod-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.lod-mega-inner {
  width: 100%; max-width: var(--w-page); margin-inline: auto; padding: var(--s-6) var(--pad-x) var(--s-6);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
}
.lod-mega-inner.is-wide { grid-template-columns: minmax(0, 1fr); }
.lod-mega-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.6rem); }
.lod-mega-inner.is-wide .lod-mega-cols { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lod-mega-col { min-width: 0; }
.lod-mega-head {
  display: block;   /* it is a <span> — see lod-chrome.js */
  font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line);
}
.lod-mega-list { list-style: none; margin: 0; padding: 0; }
.lod-mega-list.is-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
.lod-mega-list li { margin: 0; padding: 0; }
.lod-mega-list a {
  display: block; padding: .34rem 0; font-family: var(--font-body); font-size: var(--t-small);
  line-height: 1.45; color: var(--ink-2); text-decoration: none;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lod-mega-list a:hover { color: var(--gold); transform: translateX(3px); }
.lod-mega-aside { display: flex; flex-direction: column; gap: var(--s-3); }
.lod-mega-feature {
  display: block; text-decoration: none; padding: var(--s-5);
  border: 1px solid var(--gold); border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--gold-soft), transparent 62%), var(--surface);
  transition: box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease);
}
.lod-mega-feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lod-feature-ico { width: 40px; height: 40px; color: var(--gold); margin-bottom: var(--s-3); }
.lod-mega-feature-eyebrow {
  display: block; font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-2);
}
.lod-mega-feature strong {
  display: block; font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500;
  line-height: 1.2; color: var(--ink); margin-bottom: var(--s-2);
}
.lod-mega-feature > span:not([class]) { display: block; font-size: var(--t-small); line-height: 1.55; color: var(--ink-3); }
.lod-mega-feature-cta {
  display: inline-block; margin-top: var(--s-3); font-size: var(--t-caption); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.lod-mega-feature-cta::after { content: " →"; }
.lod-mega-all {
  display: inline-block; font-size: var(--t-caption); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); text-decoration: none; padding: .3rem 0;
}
.lod-mega-all::after { content: " →"; }
.lod-mega-all:hover { color: var(--gold); }

/* ---------- 13.6 Mobile drawer ------------------------------------------- */
.lod-drawer { position: fixed; inset: 0; z-index: 1200; }
.lod-drawer[hidden] { display: none; }
.lod-drawer-scrim {
  position: absolute; inset: 0; background: var(--overlay);
  opacity: 0; transition: opacity var(--t-std) var(--ease);
}
.lod-drawer.is-open .lod-drawer-scrim { opacity: 1; }
.lod-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw); background: var(--bg); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform var(--t-std) var(--ease);
}
.lod-drawer.is-open .lod-drawer-panel { transform: translateX(0); }
.lod-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.lod-drawer-mark { font-family: var(--font-script); font-size: 1.9rem; line-height: 1.1; color: var(--gold); }
.lod-drawer-close {
  width: 40px; height: 40px; font-size: 1.6rem; line-height: 1; color: var(--ink-3);
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.lod-drawer-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s-2) var(--s-5) var(--s-5); }
.lod-drawer-group { border-bottom: 1px solid var(--line); }
.lod-drawer-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--s-4) 0; margin: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500;
  color: var(--ink); text-align: left; text-decoration: none;
}
.lod-drawer-head.is-link { display: block; }
.lod-drawer-plus { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.lod-drawer-plus::before, .lod-drawer-plus::after {
  content: ""; position: absolute; background: var(--gold);
  transition: transform var(--t-std) var(--ease), opacity var(--t-std) var(--ease);
}
.lod-drawer-plus::before { left: 0; right: 0; top: 6px; height: 1px; }
.lod-drawer-plus::after { top: 0; bottom: 0; left: 6px; width: 1px; }
.lod-drawer-head[aria-expanded="true"] .lod-drawer-plus::after { transform: rotate(90deg); opacity: 0; }
.lod-drawer-sub { padding-bottom: var(--s-4); }
.lod-drawer-sub[hidden] { display: none; }
.lod-drawer-overview {
  display: block; font-size: var(--t-caption); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); text-decoration: none; padding-bottom: var(--s-3);
}
.lod-drawer-set + .lod-drawer-set { margin-top: var(--s-4); }
.lod-drawer-set-head {
  display: block; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s-2);
}
.lod-drawer-sub ul { list-style: none; margin: 0; padding: 0; }
.lod-drawer-sub li { margin: 0; }
.lod-drawer-sub a { display: block; padding: .42rem 0; font-size: var(--t-small); color: var(--ink-2); text-decoration: none; }
.lod-drawer-sub a:hover { color: var(--gold); }
.lod-drawer-extra { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.lod-drawer-extra a { color: var(--gold); font-weight: 500; }
.lod-drawer-foot {
  flex: 0 0 auto; padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.lod-drawer-book {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 1rem 1.4rem; border: 1px solid var(--gold); border-radius: var(--r-sm);
  background: var(--gold); color: #fffdf6; text-decoration: none;
  font-family: var(--font-body); font-size: var(--t-button); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.lod-drawer-wa {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: var(--t-caption); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
}
.lod-drawer-wa svg { width: 17px; height: 17px; }
html.lod-scroll-lock, body.lod-scroll-lock { overflow: hidden; }

/* ---------- 13.7 Breakpoints --------------------------------------------- */
@media (max-width: 1240px) {
  :root { --lod-logo-w: 218px; }
  .lod-logo { font-size: 1.8rem; }
  .lod-nav-list { gap: 1.05rem; }
  .lod-nav-link { font-size: .72rem; letter-spacing: .09em; }
}
@media (max-width: 1080px) {
  .lod-header-inner { grid-template-columns: 1fr auto; }
  .lod-nav { display: none; }
  .lod-actions .lod-book { display: none; }
  .lod-burger { display: flex; }
}
@media (min-width: 1081px) { .lod-drawer { display: none; } }
@media (max-width: 420px) {
  :root { --lod-logo-w: 176px; --lod-logo-h: 40px; }
  .lod-logo { font-size: 1.5rem; }
}

/* ---------- 13.8 Footer --------------------------------------------------- */
.lod-footer {
  background: var(--bg-2); border-top: 1px solid var(--line);
  color: var(--ink-2); text-align: left; padding: 0; position: relative; z-index: 2;
  font-family: var(--font-body);
}
.lod-footer-inner {
  width: 100%; max-width: var(--w-page); margin-inline: auto;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--pad-x);
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.lod-foot-mark { display: block; font-family: var(--font-script); font-size: 2.6rem; line-height: 1.15; color: var(--gold); }
.lod-foot-brand p { margin: var(--s-3) 0 0; font-size: var(--t-small); line-height: 1.65; color: var(--ink-3); max-width: 34ch; }
.lod-foot-social { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.lod-foot-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink-3);
  text-decoration: none; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lod-foot-social a:hover { color: var(--gold); border-color: var(--gold); }
.lod-foot-social svg { width: 18px; height: 18px; }
.lod-foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.2rem, 2vw, 2rem); }
.lod-foot-col { min-width: 0; }
.lod-foot-col h2 {
  font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s-3);
}
.lod-foot-col ul { list-style: none; margin: 0; padding: 0; }
.lod-foot-col li { margin: 0; }
.lod-foot-col a {
  display: block; padding: .26rem 0; font-size: var(--t-small); line-height: 1.45;
  color: var(--ink-3); text-decoration: none; transition: color var(--t-fast) var(--ease);
}
.lod-foot-col a:hover { color: var(--gold); }
.lod-foot-bar { border-top: 1px solid var(--line); background: var(--bg-2); }
.lod-foot-bar-inner {
  width: 100%; max-width: var(--w-page); margin-inline: auto;
  padding: var(--s-4) var(--pad-x) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5);
  font-size: var(--t-caption); line-height: 1.6; color: var(--ink-muted);
}
.lod-foot-note { flex: 1 1 340px; min-width: 0; }
.lod-foot-cookie {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 24px;
  font-family: var(--font-body); font-size: var(--t-caption); color: var(--ink-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.lod-foot-cookie:hover { color: var(--gold); }
@media (max-width: 1080px) { .lod-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-6); } }
@media (max-width: 860px)  { .lod-footer-inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px)  { .lod-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lod-foot-mark { font-size: 2.2rem; } }

/* ---------- 12. UTILITIES ------------------------------------------------ */
.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}
.mb-4{margin-bottom:var(--s-4)}.mb-6{margin-bottom:var(--s-6)}
.no-wrap{white-space:nowrap}.full{width:100%}

/* =============================================================================
   14. HOMEPAGE — components used only by public/index.html
   Everything below is built from the tokens above. No new colour literals.
   The class names that content.js queries (.hero-eyebrow, .hero-tagline,
   .hero-trust-item, .about-portrait*, .services-grid, .signature-grid,
   .booking-grid, .tier-*, #testimonialTrack, .case-list, .insights-grid,
   .contact-channel, #thePath …) are kept exactly — the markup around them is new.
   ========================================================================== */

/* ---------- 14.0 Reveal compatibility ------------------------------------ */
/* content.js and the homepage observer both mark revealed nodes; accept either
   class so nothing can ever be left at opacity 0. */
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- 14.1 Celestial layer (restrained) ---------------------------- */
.hm-sky {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  color: var(--gold); opacity: .3;
}
.hm-sky svg { width: 100%; height: 100%; display: block; }
.hm-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: radial-gradient(var(--line-strong) .5px, transparent .5px);
  background-size: 4px 4px;
}
.hm-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 72% 30%, var(--gold-soft), transparent 70%);
}
@media (prefers-reduced-motion: reduce) { .hm-sky { opacity: .22; } }

/* ---------- 14.2 Hero ---------------------------------------------------- */
.hm-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.5rem, 1.4rem + 4vw, 5rem) clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
.hm-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center;
}
.hm-hero h1 {
  font-size: var(--t-display-l); line-height: 1.04; letter-spacing: -.015em;
  margin-top: var(--s-4);
}
.hm-hero h1 em { font-style: italic; color: var(--gold); }
.hero-eyebrow {
  font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: block;
}
.hero-tagline {
  font-size: var(--t-body-l); line-height: 1.75; color: var(--ink-3);
  margin-top: var(--s-5); max-width: 46ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Portrait — reserved aspect box, so a late image can never shift the page. */
.hm-portrait { position: relative; width: 100%; max-width: 430px; margin-inline: auto; }

/* Both columns paint above the wheel. Document order already achieves this, but
   saying it out loud means someone reordering the markup later cannot bury the
   headline under the rim — a failure that looks like a rendering bug, not like
   a markup mistake, and so gets debugged in the wrong file. */
.hm-hero-copy, .hm-portrait { position: relative; z-index: 1; }

/* Two text colours nudged one step darker, because the wheel now runs BEHIND
   these words at .31 rather than behind the photograph.

   Contrast is measured against whatever is actually behind a letter, not
   against the page colour. Where a gold stroke crosses, the local background
   becomes #d6c9ae — and on that:
       tagline  --ink-3  3.40:1   FAILS  (body text needs 4.5)
       eyebrow  --gold   3.31:1   FAILS
   One step darker on each clears it without any visible change in character:
       tagline  --ink-2  5.87:1   (8.92:1 on the plain page)
       eyebrow  --gold-bright 4.56:1  (6.93:1 on the plain page)

   Worth noting the OLD .16 setting also failed the tagline, at 4.21:1 — this
   was already wrong before the wheel moved, just less obviously.

   Scoped to .hm-hero because both classes are used only here; if either is ever
   reused elsewhere, that page gets the original tokens and its own judgement. */
.hm-hero .hero-tagline { color: var(--ink-2); }
.hm-hero .hero-eyebrow { color: var(--gold-bright); }

/* ---- the slowly turning zodiac wheel, behind the WORDS ------------------
   It used to sit inside .hm-portrait, ringed around the photograph, where its
   rim collided with her name caption and its dense hub sat directly behind her
   face. It is now a child of .hm-hero-inner and is anchored to the copy column
   instead: the hub falls off the left edge of the page and what shows behind
   the headline is a broad arc and the band of signs.

   THREE THINGS HERE ARE LOAD-BEARING.

   1. It must be the FIRST child of .hm-hero-inner. Neither .hm-hero-copy nor
      .hm-portrait sets a z-index, so they stack in document order — put the
      wheel last and it paints on top of the headline.
   2. left:0 resolves to the padding edge of .hm-hero-inner, which is the same
      line the headline starts on. The negative X translate is therefore
      measured from the text, not from the viewport, and the composition holds
      at every width without a single breakpoint.
   3. The numbers below were chosen on screen, not derived — opacity .31, width
      75%, pulled 25% left. They are the settings signed off from the preview,
      so treat them as decisions rather than as defaults, and change them only
      on purpose. The constellation layer that used to sit behind this section
      was removed at the same time; these values were judged without it, and
      putting it back would make the pair read as noise again.

   The signs themselves are SVG paths, not the characters ♈ ♉ ♊. Those code
   points have no monochrome glyph in this font on macOS or iOS, so the system
   substituted Apple Color Emoji and drew twelve purple squares. A colour-emoji
   font ignores fill and currentColor, so no stylesheet could have fixed it.
   See scripts/apply-wheel-glyphs.js — do not put <text> signs back.

   The turn is 150s for a full revolution — slow enough to read as a living
   background rather than something spinning for attention. */
.hm-zodiac {
  position: absolute;
  top: 50%; left: 0;
  width: min(52rem, 75%); aspect-ratio: 1;
  transform: translate(-25%, -50%);
  z-index: 0;
  pointer-events: none;
  color: var(--gold);
  opacity: .31;
}
.hm-zodiac svg {
  width: 100%; height: 100%; display: block;
  transform-origin: 50% 50%;
  animation: lod-zodiac-turn 150s linear infinite;
}
@keyframes lod-zodiac-turn { to { transform: rotate(360deg); } }

/* Motion is decoration here, so it is the first thing to go. The wheel stays,
   it simply stops turning. */
@media (prefers-reduced-motion: reduce) {
  .hm-zodiac svg { animation: none; }
}

/* Single column below 900px: the copy runs full width, so the wheel centres on
   it and pulls back rather than hanging off one side. */
/* Single column below 900px: the copy runs full width and the wheel centres on
   it, so every line of text crosses the densest part of the drawing rather than
   its outer arc. Held at .20 for that reason — the desktop .31 measured 3.40:1
   under a stroke, and here there is far more stroke to land under. */
@media (max-width: 900px) {
  .hm-zodiac { width: min(34rem, 96%); left: 50%; top: 42%;
               transform: translate(-50%, -50%); opacity: .20; }
}

.hm-portrait-frame {
  z-index: 1;
  position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(165deg, var(--surface-muted), var(--bg-2));
  box-shadow: var(--shadow-md);
}
.hm-portrait-frame .about-portrait-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}
.hm-portrait-frame .about-portrait-photo[hidden] { display: none; }
.about-portrait-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(190deg, transparent 55%, var(--gold-soft));
}
.about-portrait-veil[hidden] { display: none; }
.hm-portrait-mark {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold);
}
.hm-portrait-mark svg { width: 62%; height: auto; opacity: .55; }
.hm-portrait-frame.has-photo .hm-portrait-mark { display: none; }
.about-portrait-name {
  display: block; margin-top: var(--s-3); text-align: center;
  font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted);
}
.about-portrait-name span {
  display: block; margin-top: .4rem; font-family: var(--font-display);
  font-size: var(--t-h3); letter-spacing: 0; text-transform: none; color: var(--ink);
}

/* ---- homepage hero: the nameplate sits ON the photograph -----------------
   The frame grows to fill the column and the caption moves onto the image, so
   the empty space under the portrait is removed by enlarging what is already
   there rather than by adding anything new.

   THE SAME ELEMENT IS REPOSITIONED, NOT DUPLICATED. content.js fills
   .about-portrait-name from the CMS (portrait_label + portrait_name), so a new
   hard-coded nameplate would silently stop Dr. Nidhi's admin edits from ever
   reaching the page, and would put the same name in the document twice for a
   screen reader. This is pure CSS — public/index.html is unchanged.

   THE BAND BEHIND THE TEXT IS FLAT, NOT A GRADIENT, FOR THE BOTTOM 3.6rem.
   A single fading gradient looked better and could not be relied on: contrast
   then depends on exactly where a line of text happens to land inside the fade,
   which changes with font size and wrapping. Measured over a WHITE photo — and
   her portrait ends on pale marble, so that is the case that matters —
       .62 alpha → role text 4.06:1   FAILS (needs 4.5)
       .84 alpha → role text 8.35:1, name 9.83:1
   The gradient above the band only softens the edge; no text sits in it. */
.hm-portrait .about-portrait-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: 1.15rem 1.2rem 1.2rem; text-align: center;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  color: #f3e6cb; text-shadow: 0 1px 10px rgba(20,14,4,.55);
  background:
    linear-gradient(to top, rgba(24,18,6,.84) 0, rgba(24,18,6,.84) 3.6rem,
                            rgba(24,18,6,.42) 5.6rem, transparent 8.4rem);
}
.hm-hero .hm-portrait .about-portrait-name span { color: #fff9ec; }

/* SCOPED TO .hm-hero ON PURPOSE — and it was not, at first.
   The About section (#about) reuses .hm-portrait and .hm-portrait-frame, so the
   two rules below silently resized that section's photograph as well the first
   time they shipped. Nothing looked broken, which is exactly why it went
   unnoticed: a shared class name is a shared decision, and "the hero portrait"
   is not a thing .hm-portrait can express on its own. */
.hm-hero .hm-portrait { max-width: 520px; }
.hm-hero .hm-portrait .hm-portrait-frame { aspect-ratio: 3 / 4; }

/* ---- the About section's own portrait -----------------------------------
   Deliberately the same 3:4 box, because the Diwali photograph is cropped to
   exactly 3:4 — so object-fit:cover shows the whole composition and crops
   nothing. That is why object-position is neutral here rather than the 22%
   used elsewhere: there is nothing to pan to. */
#about .hm-portrait { max-width: 520px; }
#about .hm-portrait-frame { aspect-ratio: 3 / 4; }
#about .hm-portrait-frame .about-portrait-photo { object-position: 50% 50%; }

/* ---------- 14.3 Trust strip --------------------------------------------- */
.hm-trust { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.hm-trust .stats { gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); }
.hero-trust-item { text-align: center; min-width: 0; }

/* ---------- 14.4 Intent cards -------------------------------------------- */
.hm-intent-card { gap: var(--s-3); }
.hm-intent-card p { flex: 1; font-style: italic; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.6; }
.hm-intent-ico { width: 30px; height: 30px; color: var(--gold); }

/* ---------- 14.5 About split --------------------------------------------- */
.about-content > * + * { margin-top: var(--s-4); }
.about-content h2 em { font-style: italic; color: var(--gold); }
.about-content p { color: var(--ink-2); line-height: 1.75; }
.about-quote {
  display: block; border-left: 2px solid var(--gold); padding: var(--s-3) 0 var(--s-3) var(--s-5);
  font-family: var(--font-display); font-style: italic; font-size: var(--t-h3);
  line-height: 1.5; color: var(--ink);
}
.about-quote-attr {
  display: block; margin-top: var(--s-3); font-family: var(--font-body); font-style: normal;
  font-size: var(--t-caption); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted);
}

/* ---------- 14.6 The practice (pillars) ---------------------------------- */
.signature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.pillar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1vw, 2rem); display: flex; flex-direction: column; gap: var(--s-3);
}
.pillar-num { font-size: var(--t-eyebrow); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.pillar h3 { font-size: var(--t-h3); }
.pillar h3 em { font-style: italic; color: var(--gold); }
.pillar p { color: var(--ink-3); font-size: var(--t-small); line-height: 1.7; }
@media (max-width: 760px) { .signature-grid { grid-template-columns: 1fr; } }

/* ---------- 14.7 Services explorer --------------------------------------- */
.services-grid { display: grid; gap: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.svc-group { min-width: 0; }
.svc-group-head {
  display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-5);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line);
}
.svc-group-head h3 {
  font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0;
}
.svc-group-head span { font-size: var(--t-caption); color: var(--ink-muted); }
/* Four across on a wide shell. Three columns on a 1680px page gave each card
   ~540px of width, which is what made them letterboxes; four brings each to
   ~380px, and with the 4:5 card ratio that reads as a vertical card. */
.svc-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 1400px) { .svc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service-card {
  display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + .7vw, 1.7rem); text-decoration: none;
  transition: border-color var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease);
}
.service-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-icon { width: 32px; height: 32px; color: var(--gold); margin-bottom: var(--s-2); }
.service-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
.service-for { font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.service-card h3 { font-size: var(--t-h4); font-family: var(--font-display); font-weight: 500; }
.service-price { font-size: var(--t-caption); letter-spacing: .06em; color: var(--gold); }
.service-card p {
  color: var(--ink-3); font-size: var(--t-small); line-height: 1.6; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.service-link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--s-2);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
}
.service-link svg { width: 13px; height: 13px; transition: transform var(--t-std) var(--ease); }
.service-card:hover .service-link svg { transform: translateX(4px); }
@media (max-width: 1024px) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .svc-list { grid-template-columns: 1fr; } }

/* ---------- 14.8 Consultations (tiers) ------------------------------------ */
.booking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.tier-card {
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
}
/* The featured consultation is one wide editorial panel: full-width card, the
   price sitting beside the title, and what's included in two calm columns. */
.tier-card.featured {
  grid-column: 1 / -1;
  border-color: var(--gold);
  background: linear-gradient(160deg, var(--gold-soft), transparent 55%), var(--surface);
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
}
.tier-card.featured .tier-title { font-size: var(--t-h1); }
.tier-card.featured > p { max-width: 62ch; font-size: var(--t-body); }
.tier-card.featured .tier-price { margin-top: var(--s-2); }
.tier-card.featured ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.tier-name { font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.tier-title { font-size: var(--t-h2); margin: 0; }
.tier-title em { font-style: italic; color: var(--gold); }
.tier-card > p { color: var(--ink-3); font-size: var(--t-small); line-height: 1.7; }
.tier-card.featured > p { grid-column: 1; }
.tier-modes { font-size: var(--t-caption); letter-spacing: .1em; color: var(--ink-muted); }
.tier-price {
  display: flex; align-items: baseline; gap: .35rem; font-family: var(--font-display);
  color: var(--ink); line-height: 1;
}
.tier-price .currency { font-size: 1.15rem; color: var(--gold); }
.tier-price .amount { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); }
.tier-price .duration {
  font-family: var(--font-body); font-size: var(--t-caption); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted); margin-left: .35rem;
}
.tier-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.tier-card li {
  position: relative; padding-left: 1.35rem; font-size: var(--t-small);
  line-height: 1.6; color: var(--ink-2);
}
.tier-card li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--gold); font-size: .8em; }
.tier-card .btn { align-self: start; margin-top: var(--s-2); }
@media (max-width: 760px) {
  .booking-grid { grid-template-columns: 1fr; }
  .tier-card.featured ul { grid-template-columns: 1fr; }
}

/* Currency switch */
#currencySwitch { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
#currencySwitch:empty { display: none; }
#currencySwitch button {
  font-family: var(--font-body); font-size: var(--t-caption); letter-spacing: .12em;
  padding: .5rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-3); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
#currencySwitch button:hover { border-color: var(--gold); color: var(--gold); }
#currencySwitch button.active { background: var(--gold); border-color: var(--gold); color: #fffdf6; }

/* Consultation picker */
.bf-pick { display: grid; gap: var(--s-3); max-width: var(--w-text); }
.bf-pick label { font-size: var(--t-caption); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.bf-pick .req { color: var(--gold); }
.bf-pick-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: stretch; }
.bf-pick-row select { flex: 1 1 260px; min-width: 0; }
.bf-pick-row .btn { flex: 0 0 auto; }
.bf-pick-note { font-size: var(--t-caption); color: var(--ink-muted); }

/* ---------- 14.9 Journey (uses .step) ------------------------------------- */
.the-path-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.path-step-title { font-family: var(--font-display); font-size: var(--t-h3); color: var(--ink); margin-bottom: var(--s-2); }
.path-step-body { font-size: var(--t-small); line-height: 1.7; color: var(--ink-3); }
@media (max-width: 760px) { .the-path-steps { grid-template-columns: 1fr; } }

/* ---------- 14.10 First glimpse ------------------------------------------ */
.hm-glimpse {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center; border-radius: var(--r-lg); border: 1px solid var(--gold);
  background: linear-gradient(150deg, var(--gold-soft), transparent 60%), var(--surface);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); text-decoration: none;
  transition: box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease);
}
.hm-glimpse:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.hm-glimpse-art { width: clamp(90px, 12vw, 140px); height: auto; color: var(--gold); }
@media (max-width: 760px) { .hm-glimpse { grid-template-columns: 1fr; } .hm-glimpse-art { order: -1; } }

/* ---------- 14.11 Testimonials carousel ---------------------------------- */
.hm-carousel { position: relative; max-width: var(--w-text); margin-inline: auto; }
.hm-carousel-view { overflow: hidden; }
.testimonial-track { display: flex; transition: transform var(--t-slow) var(--ease); will-change: transform; }
.testimonial-card {
  flex: 0 0 100%; min-width: 0; padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  display: flex; flex-direction: column; gap: var(--s-4); text-align: center; align-items: center;
}
.testimonial-stars { color: var(--gold); letter-spacing: .35em; font-size: .8rem; }
.testimonial-card blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); line-height: 1.55; color: var(--ink);
}
.testimonial-meta { display: flex; align-items: center; gap: var(--s-3); }
.testimonial-avatar {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--r-pill);
  display: grid; place-items: center; border: 1px solid var(--line-strong);
  background: var(--surface-muted); color: var(--gold);
  font-size: var(--t-caption); letter-spacing: .08em;
}
.testimonial-name { font-size: var(--t-small); color: var(--ink); text-align: left; }
.testimonial-title { font-size: var(--t-caption); color: var(--ink-muted); text-align: left; }
.testimonial-nav { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-5); }
.testimonial-nav button {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-3);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.testimonial-nav button:hover { color: var(--gold); border-color: var(--gold); }
.hm-dots { display: flex; gap: .25rem; margin-inline-start: -10px; }
/* The dot stays 8px, but the BUTTON is 28×28: the visible mark is drawn with a
   pseudo-element so the touch target is a real target rather than a speck.
   (A bare 8px control is under even WCAG 2.2's 24×24 minimum.) */
.hm-dots button {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.hm-dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line-field); background: transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hm-dots button[aria-current="true"]::before { background: var(--gold); border-color: var(--gold); }

/* ---------- 14.12 Case stories ------------------------------------------- */
.case-list { display: grid; gap: var(--s-5); }
.case-card {
  display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(1.25rem, 1rem + 2vw, 3rem);
  border-top: 1px solid var(--line-strong); padding-top: var(--s-5);
}
.case-num { font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.case-tag { margin-top: var(--s-2); font-size: var(--t-caption); color: var(--ink-muted); }
.case-outcome { margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.6; color: var(--ink-3); }
.case-outcome strong { display: block; font-family: var(--font-display); font-size: var(--t-h4); color: var(--ink); font-weight: 500; }
.case-body h3 { font-size: var(--t-h3); }
.case-body h3 em { font-style: italic; color: var(--gold); }
.case-body p { margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.75; color: var(--ink-3); }
.case-quote {
  margin-top: var(--s-4); padding-left: var(--s-4); border-left: 2px solid var(--gold);
  font-family: var(--font-display); font-style: italic; font-size: var(--t-h4); color: var(--ink);
}
@media (max-width: 760px) { .case-card { grid-template-columns: 1fr; } }

/* ---------- 14.13 Insights ------------------------------------------------ */
.insights-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-5); align-items: stretch; }
.insight-card {
  display: flex; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1vw, 2rem); text-decoration: none;
  transition: border-color var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease);
}
.insight-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.insight-card > div { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.insight-card.featured { grid-row: span 2; background: linear-gradient(160deg, var(--gold-soft), transparent 55%), var(--surface); border-color: var(--line-strong); }
.insight-card.featured h4 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 500; line-height: 1.15; }
.insight-tag { font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.insight-card h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; line-height: 1.3; color: var(--ink); }
.insight-card p { font-size: var(--t-small); line-height: 1.7; color: var(--ink-3); flex: 1; }
.insight-meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--t-caption); color: var(--ink-muted); margin-top: auto; }
@media (max-width: 860px) { .insights-grid { grid-template-columns: 1fr; } .insight-card.featured { grid-row: auto; } }

/* ---------- 14.14 Office / contact --------------------------------------- */
.hm-office-art { width: 100%; height: auto; color: var(--gold); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-muted); }
.contact-channels { display: grid; gap: var(--s-3); }
.contact-channel {
  display: flex; align-items: center; gap: var(--s-4); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-4); transition: border-color var(--t-fast) var(--ease);
}
.contact-channel:hover { border-color: var(--gold); }
.contact-channel-icon { width: 26px; height: 26px; flex: 0 0 26px; color: var(--gold); }
.contact-channel-label { font-size: var(--t-caption); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.contact-channel-value { font-size: var(--t-body); color: var(--ink); margin-top: .2rem; }

/* ---------- 14.15 Newsletter --------------------------------------------- */
.newsletter-card {
  max-width: var(--w-narrow); margin-inline: auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.newsletter-card h2 { margin-top: var(--s-3); }
.newsletter-card h2 em { font-style: italic; color: var(--gold); }
.nl-sub { margin-top: var(--s-4); color: var(--ink-3); font-size: var(--t-small); line-height: 1.7; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); justify-content: center; }
.newsletter-form input { flex: 1 1 260px; min-width: 0; }
.newsletter-msg { margin-top: var(--s-3); font-size: var(--t-caption); color: var(--gold); min-height: 1.2em; }

/* ---------- 14.16 Instagram reels ---------------------------------------- */
.reels-wrap { max-width: var(--w-text); margin-inline: auto; }
.reels-embed { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-muted); overflow: hidden; }
.reels-placeholder { display: grid; place-items: center; gap: var(--s-4); padding: clamp(2rem, 1.5rem + 3vw, 4rem) var(--s-5); text-align: center; }
.reels-ig { width: 40px; height: 40px; color: var(--gold); }
.reels-placeholder p { max-width: 46ch; font-size: var(--t-small); color: var(--ink-3); }
.reels-cta { display: flex; justify-content: center; margin-top: var(--s-5); }

/* ---------- 14.17 Closing band ------------------------------------------- */
.hm-close { position: relative; isolation: isolate; overflow: hidden; text-align: center; }
.hm-close .container { position: relative; z-index: 1; }

/* ---------- 14.18 Homepage-only chrome (dock, progress, back-to-top, WA) -- */
#scrollProgress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--gold); z-index: 1000; }
#backTop {
  position: fixed; bottom: 1.6rem; left: 1.6rem; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--gold);
  cursor: pointer; opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease);
}
#backTop.show { opacity: 1; pointer-events: auto; }
#backTop:hover { transform: translateY(-3px); }
.floating-wa {
  position: fixed; right: 1.5rem; bottom: 1.5rem; width: 56px; height: 56px; z-index: 90;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--gold); color: #fffdf6; text-decoration: none; box-shadow: var(--shadow-lg);
}
.floating-wa svg { width: 26px; height: 26px; }
.lod-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; display: none;
  grid-template-columns: 1.5fr 1fr; gap: 1px; background: var(--line-strong);
  border-top: 1px solid var(--line-strong); padding-bottom: env(safe-area-inset-bottom, 0);
}
.lod-dock a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: var(--t-button); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: .95rem .5rem;
}
.lod-dock .dock-book { background: var(--gold); color: #fffdf6; }
.lod-dock .dock-wa { background: var(--surface); color: var(--ink-2); }
.lod-dock .dock-wa svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .lod-dock { display: grid; }
  body { padding-bottom: 58px; }
  .floating-wa { display: none; }
  #backTop { bottom: 4.6rem; left: 1rem; width: 40px; height: 40px; }
}

/* ---------- 14.19 Hero responsive ---------------------------------------- */
@media (max-width: 960px) {
  /* Words first on a phone; the portrait follows and is deliberately smaller so
     the headline and both CTAs are reachable without scrolling past a photo. */
  .hm-hero-inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .hm-portrait { max-width: 300px; }
  .hero-tagline { max-width: none; }
  .hm-hero h1 { font-size: var(--t-h1); }
}
@media (max-width: 520px) {
  .hero-ctas .btn { width: 100%; }
  .bf-pick-row .btn { width: 100%; }
}

/* ---------- 16. TARGET SIZE (WCAG 2.2 §2.5.8, 24×24 minimum) --------------
   Breadcrumb links are ~16px tall standalone text — not "inline in a sentence",
   so the inline exception does not cover them. Padding the line box out to 24px
   costs nothing visually (the crumb bar has its own vertical rhythm) and makes
   every crumb a real target. Declared once, after the section stylesheets'
   selectors, so it applies to .ed-page / .sv-page / .st-page / .tl-page alike. */
.crumb a, .lod-crumbs a { display: inline-flex; align-items: center; min-height: 24px; }

/* ==========================================================================
   17. CELESTIAL ART  (art-lib.js)
   194 of the site's pages had no image at all. Rather than buy stock
   photography, every page family gets line art generated from its own slug by
   art-lib.js. These rules are the only place that art is sized or veiled.

   Three presentations:
     .art-overlay  — the card fills with art, copy sits over it behind a veil
                     (services hub, homepage service cards)     [Style I]
     .art-band     — a wide art strip at the top of a content page
                     (nakshatras, planets, houses, remedies, journal…)
     .art-mark     — a small square art tile beside a heading or in a list row

   The veil is what keeps this accessible: every overlay lays a near-opaque
   ivory gradient between the art and the text, so body copy keeps its full
   contrast against --surface rather than against a drawing.
   ========================================================================== */

svg.lod-art { display: block; width: 100%; height: 100%; }
@media print { svg.lod-art { display: none; } }

/* ---------- 17.1 Overlay card (Style I) ---------------------------------- */
.art-overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--bg-2), var(--surface) 72%);
  text-decoration: none;
  /* Stated, not inherited. The card is an <a>, and its colour was coming from
     `:where(.lod) a { color: inherit }` — which only applies inside a .lod
     wrapper. Every page that uses these cards happens to have body.lod, so it
     looked right; render one card outside that wrapper and every heading turns
     the browser's default link blue. text-decoration was already reset here,
     so colour was the half of the reset that was missing. */
  color: var(--ink);
  isolation: isolate;
  transition: border-color var(--t-std) var(--ease),
              box-shadow var(--t-std) var(--ease),
              transform var(--t-std) var(--ease);
}
/* The drawing takes the TOP of the card, not the whole of it. Full-bleed art
   centres its subject behind the copy, where the veil then has to hide it to
   keep text readable — the drawing ends up invisible and the card looks like a
   plain box with a smudge on top. Confining the svg to the upper band lets the
   art centre in space that carries no type, so it is properly legible, while
   its lower edge still runs under the eyebrow — which is what makes this
   "copy sitting on the artwork" rather than a picture with a caption. */
/* THE CURTAIN. The drawing gets the whole card and 10px of air at the top so
   its upper edge is never clipped by the border radius. At rest a visitor sees
   the art, the name and the price; the description arrives with the pointer.

   Card height is FIXED. The description is taken out of flow when hidden, so
   without this the cards would collapse to the height of the name and then
   every card in the row would jump as the pointer crossed it. */
/* PORTRAIT, not landscape. A fixed pixel height made the card whatever shape
   the column happened to be — at three across on a 1680px shell that is a
   580×340 letterbox. aspect-ratio ties the height to the width instead, so the
   card is vertical at every column count and on every screen, and it still
   cannot change height when the description expands (the width does not). */
.art-overlay { aspect-ratio: 4 / 5; height: auto; min-height: 380px; }
/* THE BOX IS THE SHAPE OF THE DRAWING, and it is pinned to the top.
   Do not set a height here. An <svg> with a viewBox defaults to
   preserveAspectRatio="xMidYMid" — it CENTRES its contents in whatever box it
   is given. Setting height:calc(100% - 10px) made the box the full card, so the
   art scaled to the width and then floated to the vertical middle, sitting
   behind the copy exactly as before. Letting the intrinsic 320:200 ratio decide
   the height keeps the drawing at the top where it can be seen.

   aspect-ratio is stated as well as implied: an absolutely-positioned element
   with left+right set has a definite width, and older engines will not always
   resolve height:auto from the viewBox alone. */
.art-overlay > svg.lod-art {
  position: absolute; inset: 10px 0 auto 0;
  height: auto; aspect-ratio: 320 / 200; z-index: 0;
  transition: transform 1.1s var(--ease);
}
/* The footing under the name is permanent — the name has to stay legible on the
   artwork at rest. Above it the card is clear, which is the whole point. */
.art-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
              var(--surface) 0%,
              var(--surface) 18%,
              rgba(255, 253, 248, .88) 30%,
              rgba(255, 253, 248, .22) 44%,
              transparent 58%);
  transition: opacity var(--t-std) var(--ease);
}
/* The card-wide veil above fades out by the top third, which is right for the
   art but NOT enough for a card whose copy runs tall: measured, the gold eyebrow
   and the gold price were landing on the art's own gold linework at 1.73:1 and
   2.82:1. Dimming the art far enough to fix that would erase the drawing, so the
   copy block carries its own ivory ground instead — opaque under the text,
   fading out at its top edge so the art still reads across the upper half of the
   card. Measured after: worst ratio 5.06:1, 0 failures. */
/* The copy block is anchored to the foot of the card and is only as tall as its
   visible content. Its ivory ground is drawn to its own box and fades out just
   above it — so the ground rises WITH the text as the description expands.
   That is the curtain: one gradient, no transform, nothing to keep in sync. */
.art-overlay-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.5rem 1.7rem 1.6rem;
}
.art-overlay-body::before {
  content: ""; position: absolute; inset: -1.6rem 0 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top,
              var(--surface) 0%,
              var(--surface) 68%,
              rgba(255, 253, 248, .88) 86%,
              transparent 100%);
}

/* ---- the reveal — ONLY where a real pointer exists -----------------------
   Everything above is what a touch device gets: art, name, price, description,
   all visible. The block below is the only place anything is hidden, and it
   cannot apply on a phone — a hover-only description would be permanently
   unreachable on mobile, which is most of this site's traffic.

   THE DESCRIPTION COLLAPSES, it does not merely fade. An earlier version faded
   it with opacity alone: the text kept its space, so the copy block stayed full
   height, the name sat two-thirds up the card, and at that height the ivory
   ground had already faded to nothing — the name ended up on bare artwork.
   Collapsing max-height lets the block shrink to the name, which then sits on
   solid ground at the foot of the card. The card height is fixed, so nothing
   outside the card moves either way.

   Still hidden with max-height + opacity, never display:none — the copy stays
   in the DOM, so Google indexes it and a screen reader reads it. Neither hovers.
   :focus-within is not optional: without it this is unreachable by keyboard. */
@media (hover: hover) and (pointer: fine) {
  .art-overlay p {
    max-height: 0; margin-top: 0; opacity: 0; overflow: hidden;
    transition: max-height .4s var(--ease), opacity .3s var(--ease), margin-top .4s var(--ease);
  }
  .art-overlay .art-go {
    max-height: 0; margin-top: 0; opacity: 0; overflow: hidden;
    transition: max-height .4s var(--ease), opacity .3s var(--ease) .06s, margin-top .4s var(--ease);
  }
  .art-overlay:hover p,
  .art-overlay:focus-within p { max-height: 11em; margin-top: .65rem; opacity: 1; }
  .art-overlay:hover .art-go,
  .art-overlay:focus-within .art-go { max-height: 3em; margin-top: 1.05rem; opacity: 1; }
}
.art-overlay h3 { font-size: var(--t-h3); margin: .35rem 0 0; }
.art-overlay .art-price { color: var(--gold); font-family: var(--font-display); font-size: 1.15rem; margin-top: .3rem; display: block; }
.art-overlay p { font-size: var(--t-small); line-height: 1.7; color: var(--ink-3); margin: .65rem 0 0; }
.art-overlay .art-go {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 24px;
  margin-top: 1.05rem; font-size: var(--t-caption); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.art-overlay .art-go::after { content: "→"; transition: transform var(--t-std) var(--ease); }
.art-overlay:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.art-overlay:hover > svg.lod-art { transform: scale(1.045); }
.art-overlay:hover .art-go::after { transform: translateX(4px); }
.art-overlay:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Twelve overlay cards in a row would be heavy, so the motif is varied per
   service group by the generator. These modifiers only tint the ground. */
.art-overlay.is-business { background: linear-gradient(165deg, #efe9dd, var(--surface) 72%); }
.art-overlay.is-ongoing  { background: linear-gradient(165deg, #ece9e0, var(--surface) 74%); }

/* On a phone the card is single-column and the copy block is as tall as it is
   on desktop, so shrinking the card is what makes the drawing disappear. Keep
   enough height for the art band to still read above the eyebrow. */
@media (max-width: 640px) { .art-overlay { min-height: 330px; } }

/* ---------- 17.2 Page art band ------------------------------------------- */
.art-band {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(170deg, var(--bg-2), var(--bg) 76%);
  aspect-ratio: 1200 / 260;
  min-height: 150px; max-height: 300px;
}
.art-band > svg.lod-art { position: absolute; inset: 0; opacity: .9; }
.art-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, var(--bg) 100%);
}
@media (max-width: 640px) { .art-band { aspect-ratio: 3 / 1; min-height: 118px; } }

/* An art band sitting directly behind an editorial hero, rather than above it. */
.art-hero { position: relative; overflow: hidden; isolation: isolate; }
.art-hero > svg.lod-art { position: absolute; inset: 0; z-index: 0; opacity: .55; }
.art-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, var(--bg) 34%, rgba(250,246,238,.72) 58%, rgba(250,246,238,.28) 100%);
}
.art-hero > *:not(svg) { position: relative; z-index: 2; }
@media (max-width: 860px) {
  .art-hero::before { background: linear-gradient(to bottom, rgba(250,246,238,.88), var(--bg) 62%); }
}

/* ---------- 17.3 Small art mark ------------------------------------------ */
.art-mark {
  position: relative; overflow: hidden; flex: none;
  width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(158deg, var(--bg-2), var(--surface) 70%);
}
.art-mark > svg.lod-art { position: absolute; inset: 0; }
.art-mark-sm { width: 64px; height: 64px; aspect-ratio: 1; border-radius: 50%; }

/* ---------- 17.4 Motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .art-overlay, .art-overlay > svg.lod-art, .art-overlay .art-go::after { transition: none; }
  .art-overlay:hover { transform: none; }
  .art-overlay:hover > svg.lod-art { transform: none; }
}

/* ---------------------------------------------------------------------------
   FAQ → full question bank
   Every page that carries an FAQ block ends with a contextual route to /faq/.
   Deliberately unscoped (no page-family prefix) because the FAQ block is shared
   by the editorial, services, store and tools templates alike — one rule rather
   than four near-identical ones.
--------------------------------------------------------------------------- */
.faq-more {
  margin: 1.25rem 0 0;
  font-size: .95rem;
}
.faq-more a {
  color: var(--gold, #9a7526);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.faq-more a:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------------------
   Homepage · Instagram reel cards (#reels)
   Click-to-play façades for the five best-performing reels. Sized to the 9:16
   shape of a reel so the card and the player that replaces it occupy exactly
   the same box — clicking one must not shift the rest of the page.
--------------------------------------------------------------------------- */
.reel-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.reel-card { margin: 0; min-width: 0; }

.reel-card .reel-open,
.reel-card .reel-frame {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  border: 1px solid rgba(154, 117, 38, .28);
  background: linear-gradient(160deg, rgba(154,117,38,.10), rgba(154,117,38,.02) 55%, transparent);
}
.reel-card .reel-open {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem .9rem;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.reel-card .reel-open:hover,
.reel-card .reel-open:focus-visible {
  border-color: rgba(154, 117, 38, .65);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(90, 66, 16, .13);
}

/* Play glyph — a gold ring with a triangle, drawn rather than loaded. */
.reel-card .reel-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -46px 0 0 -23px;              /* sits above the caption block */
  border: 1px solid rgba(154, 117, 38, .55);
  border-radius: 50%;
  transition: background-color .25s ease;
}
.reel-card .reel-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  margin: -7px 0 0 -4px;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent rgba(154, 117, 38, .85);
}
.reel-card .reel-open:hover .reel-play { background: rgba(154, 117, 38, .12); }

.reel-card .reel-tag {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(154, 117, 38, .95);
  margin-bottom: .4rem;
}
.reel-card .reel-title {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.28;
  margin-bottom: .35rem;
}
.reel-card .reel-meta {
  font-size: .74rem;
  opacity: .68;
  font-variant-numeric: tabular-nums;
}
.reel-card .reel-frame { border: 0; background: transparent; }

/* Five across is right on a desktop; below that the cards get too narrow to
   read, so step down rather than let the type collapse. */
@media (max-width: 1100px) { .reel-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .reel-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }
@media (max-width: 420px)  { .reel-grid { grid-template-columns: 1fr 1fr; } .reel-card .reel-title { font-size: .92rem; } }