/* ==========================================================================
   USAIndiaCFO — v27 on the PHP web root · site.css

   Everything the live site needs that the v27 mockup did not have, layered
   on clay.css (which stays byte-identical to the design source so it can be
   re-imported with site/import_design.py). Same tokens, same radii, same
   clay shadows — nothing here introduces a new colour or font.

     · header CTA + drawer groups (Services → USA / India / Family Office)
     · mobile sticky bar (< 940px): Call · WhatsApp · Schedule a Call
     · #schedule scheduler: Calendly embed frame + the fallback rows
     · live contact form states (error box, checkbox, honeypot)
     · blog teaser list (entries fed by /insights/api/latest.php)
     · scroll stack (`stack` block), statement grid, pay links, prose lists
   ========================================================================== */

/* ── header CTA ─────────────────────────────────────────────────────────── */
.hdr__acts { display: flex; align-items: center; gap: 18px; }
.hdr__cta { min-height: 42px; padding: 0 18px; font-size: 13px; white-space: nowrap; }
.hdr--over-dark .hdr__cta, .hdr--drawer .hdr__cta {
  color: var(--cream); background: rgba(var(--dark-rgb), .32);
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .16), 0 6px 18px rgba(0, 0, 0, .25);
  backdrop-filter: blur(8px);
}
.hdr--over-dark .hdr__cta:hover, .hdr--drawer .hdr__cta:hover { background: rgba(var(--dark-rgb), .5); color: var(--cream); }
@media (max-width: 940px) { .hdr__cta { display: none; } }   /* the sticky bar carries it */

/* ── drawer groups ──────────────────────────────────────────────────────── */
.drawer__group { padding: 17px 0 6px; border-bottom: 1px solid rgba(var(--cream-rgb), .1); }
.drawer__label { display: block; font: 500 10.5px/1 Inter, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(var(--bronze-rgb), .92); margin-bottom: 6px; }
.drawer__link--sub { padding: 9px 0 9px 0; border-bottom: 0;
  font-size: clamp(1.25rem, 3.4vw, 1.5rem); }

/* ── mobile sticky bar ──────────────────────────────────────────────────── */
.mbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
  padding: 0 0 env(safe-area-inset-bottom, 0); }
.mbar__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 60px;
  margin: 0; background: linear-gradient(178deg, var(--sand-956) 0%, var(--ground-sink) 100%);
  box-shadow: 0 -1px 0 rgba(var(--ink-rgb), .08), 0 -14px 34px rgba(var(--shade), .22); }
.mbar__a { display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; transition: color .25s var(--ease), background-color .25s var(--ease); }
.mbar__a + .mbar__a { border-left: 1px solid rgba(var(--ink-rgb), .08); }
.mbar__a svg { color: var(--bronze-deep); }
.mbar__a:hover, .mbar__a:active { color: var(--bronze-deep); background: rgba(255, 255, 255, .4); }
@media (max-width: 940px) {
  .mbar { display: block; }
  /* never cover the last section */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }
  .drawer { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0) + 24px); }
}
@media print { .mbar, .hdr__cta { display: none !important; } }

/* ── drawer foot (footer rules live with the rest of the footer in clay.css) */
.drawer__cta { color: var(--bronze); }
.drawer__meta { margin-top: 16px; color: rgba(var(--cream-rgb), .44); }

/* ── #schedule ──────────────────────────────────────────────────────────── */
.sched { scroll-margin-top: var(--head-h); }
.sched__embed { overflow: hidden; background: var(--sand-962); }
.sched__embed .calendly-inline-widget { border-radius: inherit; }
.sched__cal-wait { display: grid; justify-items: center; align-content: center; gap: 14px;
  min-height: 320px; padding: 32px 24px; text-align: center; }
.sched__frame { display: block; width: 100%; height: 700px; border: 0; background: var(--ground-flat); }
/* P10: after "Show the calendar here" a clay calendar skeleton + "Loading calendar…" sits over the
   iframe until it fires load, then fades; a cookie-consent note under the embed once it is shown. */
.sched__cal { position: relative; }
.sched__loading { position: absolute; inset: 0; z-index: 1; display: grid; align-content: start; gap: 22px;
  padding: clamp(24px, 3.2vw, 40px); background: var(--sand-962);
  transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.sched__cal[data-state="ready"] .sched__loading { opacity: 0; visibility: hidden; }
.sched__skel { display: grid; gap: 14px; }
.sched__skel-bar { display: block; height: 13px; border-radius: 999px; background: rgba(var(--ink-rgb), .07); }
.sched__skel-bar--t { width: 42%; height: 20px; }
.sched__skel-bar--s { width: 26%; }
.sched__skel-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; max-width: 420px; margin-top: 8px; }
.sched__skel-grid i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--ground-sink);
  box-shadow: inset 1px 1px 2px rgba(var(--shade), .16), inset -1px -1px 2px rgba(var(--cream-rgb), .7); }
.sched__skel-grid i:nth-child(7n+3), .sched__skel-grid i:nth-child(7n+5) { background: rgba(var(--bronze-rgb), .24); }
.sched__loading .small { color: var(--ink-soft); }
.sched__wait { display: inline-flex; align-items: center; gap: 10px; }
.sched__wait::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--bronze-deep); border-right-color: transparent; animation: sched-spin .9s linear infinite; }
@keyframes sched-spin { to { transform: rotate(360deg); } }
.sched__hint:not([hidden]) { display: block; max-width: 40ch; }   /* after 15 s: the new-tab way out */
.sched__consent { margin: 0; padding: 0 24px 20px; color: var(--ink-faint); }
.sched__embed:has(.sched__cal:not([data-loaded])) .sched__consent { display: none; }
@media (prefers-reduced-motion: reduce) { .sched__loading .sched__wait::before { animation: none; } }
@media (max-width: 600px) { .sched__frame { height: 760px; } }
.sched__rows { display: grid; border-top: 1px solid var(--line); }
.sched__row { display: grid; grid-template-columns: 44px 92px 1fr 22px; align-items: center; gap: 16px;
  padding: 16px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: padding-left .3s var(--ease), background-color .3s var(--ease); }
.sched__row:hover { padding-left: 10px; background: rgba(255, 255, 255, .4); }
.sched__ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(178deg, var(--sand-917b) 0%, var(--sand-941) 100%); box-shadow: var(--clay-in); color: var(--bronze-deep); }
.sched__k { font: 500 10.5px/1.7 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.sched__v { font: 350 clamp(1.0625rem, 1.4vw, 1.25rem)/1.35 Newsreader, Georgia, serif; color: var(--ink); min-width: 0; }
.sched__v small { display: block; font: 400 12.5px/1.6 Inter, sans-serif; color: var(--ink-soft); }
.sched__arrow { color: var(--bronze-deep); opacity: .55; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.sched__row:hover .sched__arrow { opacity: 1; transform: translateX(3px); }
@media (max-width: 680px) {
  .sched__row { grid-template-columns: 40px 1fr 22px; }
  .sched__k { display: none; }
}

/* ── contact form, live ─────────────────────────────────────────────────── */
.form__err {
  padding: 18px 22px; border-radius: var(--r); margin-bottom: 22px;
  background: linear-gradient(178deg, #f7eeeb 0%, #efe0da 100%);
  box-shadow: var(--clay-sm); font: 400 14.5px/1.65 Inter, sans-serif; color: #7a3024;
}
.form__err:focus { outline: none; }
.form__ok:focus { outline: none; }
.field__opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); margin-left: 6px; }
.field[data-invalid="true"] select { box-shadow: var(--clay-in), 0 0 0 3px rgba(157, 58, 42, .12); }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font: 400 13.5px/1.6 Inter, sans-serif; color: var(--ink-muted); }
.check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--bronze-deep); flex: 0 0 auto; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
form[data-busy="true"] [data-submit] { opacity: .6; pointer-events: none; }

/* ── blog teaser ────────────────────────────────────────────────────────── */
.teaser__list .entry { display: grid; grid-template-columns: 112px 1fr; gap: 6px 32px; align-items: baseline; }
.teaser__list .entry__cat { grid-row: 1; }
.teaser__list .entry__title, .teaser__list .entry__blurb { grid-column: 2; margin-top: 0; }
.teaser__list .entry__date { grid-column: 1; grid-row: 2; font: 400 12.5px/1.6 Inter, sans-serif; color: var(--ink-faint); }
.teaser__list .entry__blurb { max-width: 64ch; }
/* B2: every row is the SAME height from the first paint — title ≤ 2 lines, blurb ≤ 3 lines, and
   the row's min-height is exactly that maximum — so the three skeleton rows the page ships with
   and the fetched entries occupy identical space: nothing below the teaser (#schedule) moves
   when the posts arrive. Extra space stays at the bottom of a row (align-content: start). */
.teaser__list .entry { align-content: start;
  min-height: calc(117.825px + 2 * 1.3 * clamp(1.125rem, 1.6vw, 1.4375rem)); }   /* 44 pad + 6 gap + 1 line + 2 title lines + 3 blurb lines */
.teaser__list .entry__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.teaser__list .entry__blurb { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.entry--skel { pointer-events: none; }
.entry--skel .entry__title, .entry--skel .entry__blurb { display: block; }
.entry--skel > span::before, .entry--skel > span::after { content: ""; display: block; border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--ink-rgb), .07) 0%, rgba(var(--ink-rgb), .12) 45%, rgba(var(--ink-rgb), .07) 90%);
  background-size: 220% 100%; animation: teaser-sheen 1.8s linear infinite; }
.entry--skel .entry__cat::before { width: 64px; height: 9px; }
.entry--skel .entry__date::before { width: 78px; height: 10px; margin-top: 5px; }
.entry--skel .entry__title::before { width: 58%; height: .78em; margin-top: .22em; }
.entry--skel .entry__title::after { width: 34%; height: .78em; margin-top: .5em; }
.entry--skel .entry__blurb::before { width: 92%; height: .68em; margin-top: .45em; }
.entry--skel .entry__blurb::after { width: 70%; height: .68em; margin-top: .6em; }
@keyframes teaser-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .entry--skel > span::before, .entry--skel > span::after { animation: none; } }
@media (max-width: 680px) {
  .teaser__list .entry { grid-template-columns: 1fr;
    min-height: calc(160.325px + 2 * 1.3 * clamp(1.125rem, 1.6vw, 1.4375rem)); }   /* + cat 10.5 + date 20 + two more 6px gaps */
  .teaser__list .entry__title, .teaser__list .entry__blurb, .teaser__list .entry__date { grid-column: 1; }
  .teaser__list .entry__date { grid-row: auto; }
}

/* ── scroll stack (`stack` block) ───────────────────────────────────────── */
.stk { display: grid; gap: 20px; }
.stk__card { position: sticky; top: calc(var(--head-h) + 20px + var(--i, 0) * 12px); }
.stk__card .card__list { margin-top: 20px; }
.stk__card .link-arrow { display: inline-flex; }
@media (max-width: 940px) { .stk__card { position: static; } }

/* ── statement band grid (about) ────────────────────────────────────────── */
.statement-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 6vw, 110px); align-items: end; }
@media (max-width: 940px) { .statement-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── pay links, prose lists ─────────────────────────────────────────────── */
.pay__row .index-row__body small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); }
.prose__list { display: grid; gap: 10px; padding-left: 20px; max-width: 70ch;
  font: 400 15px/1.72 Inter, sans-serif; color: var(--ink-muted); }
.prose__list li::marker { color: var(--bronze-deep); }

/* ── safety: nothing may scroll sideways ────────────────────────────────── */
html, body { overflow-x: clip; }
.ticker { max-width: 100%; }

/* ── team mobile timeline: keep each stop inside its grid column ────────── */
/* clay.css caps the stops at 190px but lets a 156px portrait spill 4px past
   a 390px viewport (the design source does the same). Percentage max-width
   resolves against the grid area, so the stop can never exceed its column. */
@media (max-width: 940px) {
  .seq-m__stop { max-width: min(190px, 100%); min-width: 0; }
  .seq-m__stop .figure, .seq-m__stop .figure__frame { max-width: 100%; }
}
@media (max-width: 480px) {
  .mbar__a { font-size: 10px; letter-spacing: .08em; gap: 6px; white-space: nowrap; }
  .mbar__a svg { width: 15px; height: 15px; }
}
/* on phones the right-hand stops rise vertically: the 28px sideways slide
   they wait in before reveal pushed the page 4px wide at 390px */
@media (max-width: 480px) {
  .seq-m__stop[data-rise="left"]:not([data-shown="true"]),
  .seq-m__stop[data-rise="right"]:not([data-shown="true"]) { transform: translate3d(0, 22px, 0); }
}

/* ── fit fixes (real-content pass) ─────────────────────────────────────── */
/* the real hero eyebrow is a full sentence: give it line-height and room so
   a 2–3 line wrap on phones never collides with the headline */
.hero__eye { display: block; line-height: 1.7; max-width: 46ch; margin: 0 auto 22px; }
@media (max-width: 600px) { .hero__eye { font-size: 9.5px; letter-spacing: .2em; margin-bottom: 18px; } }
/* "Open in Calendly" sits inside the slab's padding, never under its corner */
.sched__open { margin: 0; padding: 14px 24px 20px; }
/* the phone bar: three equal cells, the long label never touches the edge */
@media (max-width: 420px) {
  .mbar__a { letter-spacing: .04em; font-size: 9.5px; gap: 5px; padding: 0 4px; }
  .mbar__a svg { width: 14px; height: 14px; }
}
/* phones: the real hero copy is taller than v27's — start it below the header
   instead of centring it under the fixed band */
@media (max-width: 600px) {
  .hero { align-items: flex-start; padding: calc(var(--head-h) + 28px) 0 96px; }
}
/* one "Open in Calendly" at a time: the slab's own button until the calendar is shown */
.sched__embed:has(.sched__cal:not([data-loaded])) .sched__open { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — eight sections (2026-10-12)
   hero · services trio · phase track · why + numbers · clients · faq · insights · book
   ══════════════════════════════════════════════════════════════════════════ */

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

/* ── one head system: .head-row (eyebrow / h2 left, the one line right) ─── */
.head-row h2 { max-width: 22ch; }
.head-row > p { max-width: 34ch; }
@media (max-width: 680px) {
  .head-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .head-row > p { margin-bottom: 0; }
}

/* ── services trio (home `trio` block) ─────────────────────────────────────
   Three matte clay panels in one viewport: wide top-left (A), tall right (B),
   wide bottom-left (C). Thin ground-coloured channels between them; the
   channel between A and C runs on a slant. Corners are swept — one big
   organic radius per panel — drawn with clip-path: shape(); browsers without
   shape() get the same panels with asymmetric border-radius and a straight
   channel. Entrance: the panels slide in from three directions (site.js
   trio()) with a stagger; hover lifts a panel on the clay cast. */
/* #services lands with the label just under the fixed header and the three panels still inside the viewport */
.trio-sec { scroll-margin-top: 64px; padding-top: calc(clamp(48px, 5vw, 64px) + 24px);   /* +24: the label clears the 82px stuck header (A14) */
  padding-bottom: clamp(48px, 5.5vw, 72px); }
/* panel B waits 72px to the right before its entrance (--fx): clip it so the page never gets wider (convert, 17 Oct) */
.trio-sec { overflow-x: clip; }
.trio-sec .head-row { margin-bottom: clamp(22px, 2.6vw, 32px); }
.trio-sec .head-row h2 { font-size: clamp(1.9rem, 2.9vw, 2.75rem); line-height: 1.08; max-width: 30ch; }
.trio {
  --gap: 14px;                 /* the channels */
  --cut: 16px;                 /* half the slant's drop; A and C overlap by this much */
  --slant: calc(2 * var(--cut));
  --r: 26px;                   /* the ordinary corner */
  --R: 112px;                  /* the swept corner */
  --pad-y: clamp(22px, 2.2vw, 30px);
  --pad-x: clamp(26px, 2.8vw, 44px);
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}
.trio__panel {
  position: relative; min-width: 0;
  --fx: 0px; --fy: 0px;
  opacity: 0; transform: translate3d(var(--fx), var(--fy), 0);
  filter: drop-shadow(2px 4px 6px rgba(var(--shade), .09)) drop-shadow(10px 18px 28px rgba(var(--shade), .14));
}
.trio__panel--a { grid-column: 1 / 9;  grid-row: 1;     --fx: -72px; --trio-bg: var(--sand-882); --trio-top: var(--sand-916); }
.trio__panel--b { grid-column: 9 / 13; grid-row: 1 / 3; --fx:  72px; --trio-bg: var(--sand-908); --trio-top: var(--sand-935); }
.trio__panel--c { grid-column: 1 / 9;  grid-row: 2;     --fy:  72px; --trio-bg: #31404A; --trio-top: #3a4a55; }
.trio[data-shown="true"] .trio__panel {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s);
}
.trio[data-settled="true"] .trio__panel { transition: transform .45s var(--ease), filter .45s var(--ease); }
.trio[data-settled="true"] .trio__panel:hover {
  transform: translate3d(-1px, -6px, 0);
  filter: drop-shadow(4px 7px 11px rgba(var(--shade), .10)) drop-shadow(18px 30px 44px rgba(var(--shade), .18));
}
.trio__skin {
  position: relative; height: 100%; isolation: isolate;
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--pad-y) var(--pad-x);
  background: linear-gradient(176deg, var(--trio-top) 0%, var(--trio-bg) 38%);
  color: var(--ink);
}
.trio__panel--a .trio__skin { border-radius: var(--R) var(--r) var(--r) var(--r); padding-top: calc(var(--pad-y) + 12px); }
.trio__panel--b .trio__skin { border-radius: var(--r) var(--R) var(--R) var(--r); }
.trio__panel--c .trio__skin { border-radius: var(--r) var(--r) var(--R) var(--r); color: var(--cream); }
.trio__title { font: 300 clamp(1.5rem, 1.9vw, 1.875rem)/1.12 Newsreader, Georgia, serif; letter-spacing: -.016em; color: inherit; max-width: 16ch; }
.trio__body { font: 400 14.5px/1.62 Inter, sans-serif; color: var(--ink-muted); max-width: 56ch; }
.trio__panel--c .trio__body { color: rgba(var(--cream-rgb), .7); }
.trio__list { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 7px 22px; }
.trio__panel--a .trio__list, .trio__panel--c .trio__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trio__list li { position: relative; padding-left: 15px; font: 400 13px/1.5 Inter, sans-serif; color: var(--ink-muted); }
.trio__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--bronze-deep); }
.trio__panel--c .trio__list li { color: rgba(var(--cream-rgb), .72); }
.trio__panel--c .trio__list li::before { background: var(--bronze-bright); }
.trio__more { margin-top: auto; padding-top: 10px; align-self: flex-start; }
.trio__panel--c .trio__more { color: var(--bronze-bright); }
.trio__more::after { content: ""; position: absolute; inset: 0; }    /* the whole panel is the link's target */
.trio__more:focus-visible { outline: none; }
.trio__panel:has(.trio__more:focus-visible) .trio__skin { outline: 2px solid var(--bronze-bright); outline-offset: 3px; }
/* the slanted channel: A and C overlap by --cut and are cut on the slant */
@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {
  .trio__panel--a { margin-bottom: calc(-1 * var(--cut)); }
  .trio__panel--c { margin-top: calc(-1 * var(--cut)); }
  .trio__panel--a .trio__skin { padding-bottom: calc(var(--pad-y) + var(--slant)); padding-top: calc(var(--pad-y) + 12px); border-radius: 0;
    clip-path: shape(from 0 var(--R), arc to var(--R) 0 of var(--R) cw,
      line to calc(100% - var(--r)) 0, arc to 100% var(--r) of var(--r) cw,
      line to 100% calc(100% - var(--slant) - var(--r)), arc to calc(100% - var(--r)) calc(100% - var(--slant)) of var(--r) cw,
      line to var(--r) 100%, arc to 0 calc(100% - var(--r)) of var(--r) cw, close); }
  .trio__panel--b .trio__skin { border-radius: 0;
    clip-path: shape(from 0 var(--r), arc to var(--r) 0 of var(--r) cw,
      line to calc(100% - var(--R)) 0, arc to 100% var(--R) of var(--R) cw,
      line to 100% calc(100% - var(--R)), arc to calc(100% - var(--R)) 100% of var(--R) cw,
      line to var(--r) 100%, arc to 0 calc(100% - var(--r)) of var(--r) cw, close); }
  .trio__panel--c .trio__skin { padding-top: calc(var(--pad-y) + var(--slant)); border-radius: 0;
    clip-path: shape(from 0 calc(var(--slant) + var(--r)), arc to var(--r) var(--slant) of var(--r) cw,
      line to calc(100% - var(--r)) 0, arc to 100% var(--r) of var(--r) cw,
      line to 100% calc(100% - var(--R)), arc to calc(100% - var(--R)) 100% of var(--R) cw,
      line to var(--r) 100%, arc to 0 calc(100% - var(--r)) of var(--r) cw, close); }
}
/* 760–1100: a two-column fit — A | B, then C across; straight channels */
@media (max-width: 1100px) {
  .trio { --cut: 0px; --R: 84px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .trio__panel--a { grid-column: 1; grid-row: 1; }
  .trio__panel--b { grid-column: 2; grid-row: 1; }
  .trio__panel--c { grid-column: 1 / 3; grid-row: 2; }
  .trio__panel--a .trio__list { grid-template-columns: minmax(0, 1fr); }
  .trio__panel--c .trio__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: stacked, the corners still swept */
@media (max-width: 760px) {
  .trio { --R: 64px; --gap: 12px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .trio__panel--a, .trio__panel--b, .trio__panel--c { grid-column: 1; grid-row: auto; --fx: 0px; --fy: 40px; }
  .trio__panel--c .trio__list { grid-template-columns: minmax(0, 1fr); }
}
/* short desktop viewports (1366×768 and the like): tighter panels so the
   three sit under the condensed header in one screen */
@media (min-width: 1101px) and (max-height: 860px) {
  .trio { --cut: 10px; --R: 84px; --pad-y: 22px; --pad-x: clamp(24px, 2.4vw, 36px); --gap: 12px; }
  .trio__skin { gap: 10px; }
  .trio__title { font-size: clamp(1.375rem, 1.6vw, 1.625rem); }
  .trio__body { font-size: 13.5px; line-height: 1.55; max-width: 66ch; }
  .trio__list { gap: 5px 18px; }
  .trio__panel--a .trio__list, .trio__panel--c .trio__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trio__list li { font-size: 12.5px; }
  .trio__more { padding-top: 6px; }
  .trio-sec { padding-top: clamp(44px, 5vw, 64px); padding-bottom: clamp(44px, 5vw, 64px); }
  .trio-sec .head-row { margin-bottom: 22px; }
  .trio-sec .head-row h2 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
}
@media (prefers-reduced-motion: reduce) {
  .trio__panel { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── the phase track (home `flow` block) ───────────────────────────────────
   One bronze line across the shell that draws itself with scroll (a scaleX
   on the fill — transform only; site.js flow() sets --p), three concentric
   nodes on it that light in turn, and under each node the phase copy and its
   real services as hairline rows per country. The three columns share one
   row grid (subgrid) so titles, copy and the USA / India lists sit on the
   same lines across the track. Hover or focus a node: the line fills to it
   and its column brightens. Below 940px the phases stack on a vertical line. */
.flow-sec .head-row { margin-bottom: clamp(44px, 5vw, 68px); }
.flow { position: relative; --node: 34px; }
.flow-sec .flow__rail { display: block; position: absolute; left: 0; right: 0; top: calc(var(--node) / 2); height: 1px; margin: 0; }   /* clay.css hides the v23 rail < 1180px */
.flow-sec .flow__rail-line, .flow-sec .flow__rail-fill { position: absolute; inset: 0; display: block; width: auto; height: auto; }
.flow-sec .flow__rail-line { background: var(--line); }
.flow-sec .flow__rail-fill { background: var(--bronze-deep); transform-origin: 0 50%;
  transform: scaleX(var(--p, 0)); transition: transform .9s var(--ease); will-change: transform; }
.flow__stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto; column-gap: clamp(28px, 4vw, 56px); row-gap: 0; }
.flow__stop { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid;
  align-content: start; padding-top: calc(var(--node) + 26px); min-width: 0;
  opacity: 1; transition: opacity .6s var(--ease); }   /* full opacity before the line reaches it (imp-home 17 Oct: GROW read as disabled) */
.flow__stop[data-on="true"] { opacity: 1; }
.flow[data-hover="true"] .flow__stop { opacity: .42; }
.flow[data-hover="true"] .flow__stop[data-focus="true"] { opacity: 1; }
.flow__node { position: absolute; left: 0; top: 0; width: var(--node); height: var(--node); margin: 0; padding: 0;
  border: 0; background: none; border-radius: 50%; cursor: pointer; display: block; }
.flow__node:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 4px; }
.flow__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line);
  transform: scale(.72); opacity: .7;
  transition: border-color .5s var(--ease), transform .7s var(--ease), opacity .5s var(--ease); }
.flow__ring--in { inset: 8px; }
.flow-sec .flow__dot { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--line); box-shadow: none; border: 0;
  transition: background-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); }
.flow__stop[data-on="true"] .flow__ring { transform: none; opacity: 1; border-color: rgba(var(--bronze-deep-rgb), .42); }
.flow__stop[data-on="true"] .flow__ring--in { border-color: var(--bronze); }
.flow__stop[data-on="true"] .flow__dot { background: var(--bronze-bright); transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(var(--bronze-bright-rgb), .16), 1px 2px 4px rgba(var(--gold-shade-rgb), .3); }
.flow__stop[data-focus="true"] .flow__ring--in { border-color: var(--bronze-bright); }
.flow__num { display: block; font: 500 10.5px/1 Inter, sans-serif; letter-spacing: .2em;
  color: var(--bronze-deep); font-variant-numeric: tabular-nums; }
.flow__title { margin-top: 12px; font: 300 clamp(1.75rem, 2.4vw, 2.375rem)/1.08 Newsreader, Georgia, serif;
  letter-spacing: .02em; color: var(--ink); }
.flow__body { margin: 14px 0 0; font: 400 14.5px/1.7 Inter, sans-serif; color: var(--ink-muted); max-width: 38ch;
  padding-bottom: 26px; }
.flow__svc { display: contents; }
.flow__col { padding-top: 6px; }
.flow__col + .flow__col { padding-top: 22px; }
.flow__cap { display: block; font: 500 10.5px/1 Inter, sans-serif; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 10px; }
.flow__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.flow__list li { padding: 9px 2px; border-bottom: 1px solid var(--line);
  font: 400 13.5px/1.5 Inter, sans-serif; color: var(--ink); }
.flow__more { margin-top: 12px; font-size: 12.5px; }
.flow__more svg { width: 13px; height: 13px; }
/* short / narrow desktops: the copy and the rows stay readable at 3-up */
@media (max-width: 1180px) {
  .flow__title { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
  .flow__body { font-size: 14px; }
}
/* tablets and phones: the phases stack; the line runs down the left */
@media (max-width: 940px) {
  .flow { --node: 30px; }
  .flow-sec .flow__rail { left: calc(var(--node) / 2); right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .flow-sec .flow__rail-fill { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .flow__stops { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: clamp(40px, 6vw, 56px); }
  .flow__stop { grid-row: auto; grid-template-rows: none; display: block; padding-top: 0;
    padding-left: calc(var(--node) + 22px); }
  .flow__stop:last-child { padding-bottom: 8px; }
  .flow__num { line-height: var(--node); }
  .flow__title { margin-top: 6px; }
  .flow__body { padding-bottom: 20px; max-width: 52ch; }
  .flow__svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 4vw, 40px); }
  .flow__col, .flow__col + .flow__col { padding-top: 4px; }
}
@media (max-width: 600px) {
  .flow__svc { grid-template-columns: minmax(0, 1fr); }
  .flow__col + .flow__col { padding-top: 22px; }
  .flow__stop { padding-left: calc(var(--node) + 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-sec .flow__rail-fill { transform: none !important; transition: none; }
  .flow__stop { opacity: 1 !important; transition: none; }
  .flow__ring, .flow-sec .flow__dot { transition: none; }
}

/* ── why + the numbers: one section, the figures row under the duet ─────── */
.duet__figures { margin-top: clamp(56px, 7vw, 96px); }
/* the four points under the copy: a two-up hairline grid (clay.css has no .point) */
.duet__copy .duet__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px;
  margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.point__t { font: 400 1.125rem/1.3 Newsreader, Georgia, serif; color: var(--ink); margin: 0; }
.point__b { margin-top: 6px; }
@media (max-width: 600px) { .duet__copy .duet__points { grid-template-columns: minmax(0, 1fr); } }

/* ── what clients say: label, the lead quote, the other voices as rows ───── */
.quote__col { display: grid; gap: 30px; align-content: start; }
/* led by a label, the quote takes its column: 30ch of the quote's own face, not of the body face */
.quote__eyebrow + .quote { max-width: none; }
.quote__eyebrow + .quote .quote__text { max-width: 30ch; }
.quote__eyebrow + .quote .quote__who { max-width: 44ch; }
.quote__side { min-width: 0; }
/* P6: on wide screens the opening mark hangs .55em (≈48px) into the gutter. At 1180 and below
   the gutter is narrower than that and the mark was cut at the viewport edge, so there it sits
   inside the shell, on its own line above the quote, aligned with the text. */
@media (max-width: 1180px) {
  .quote__mark { position: relative; left: -.03em; top: 0; display: block; height: .46em; margin: 0 0 .06em;
    font-size: 4.25rem; }
}
.testi { border-top: 1px solid rgba(var(--ink-rgb), .14); }
.testi__row { padding: 20px 2px; border-bottom: 1px solid rgba(var(--ink-rgb), .14); }
.testi__q { font: 400 14.5px/1.7 Inter, sans-serif; color: var(--ink-muted); max-width: 58ch; }
.testi__who { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }
.testi__who b { font: 500 13.5px/1.4 Inter, sans-serif; color: var(--ink); }
.testi__who span { font: 400 12.5px/1.5 Inter, sans-serif; color: var(--ink-soft); }
@media (min-width: 941px) {
  .quote__duet .quote__col { position: sticky; top: calc(var(--head-h) + 28px); }
}

/* ── faq, split: head left, the questions right ─────────────────────────── */
.faq__duet { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.faq__head h2 { max-width: 14ch; }
@media (min-width: 941px) {
  .faq__head { position: sticky; top: calc(var(--head-h) + 28px); }
}
@media (max-width: 940px) { .faq__duet { grid-template-columns: minmax(0, 1fr); } }

/* ── insights teaser ────────────────────────────────────────────────────── */
.teaser__foot { margin-top: clamp(28px, 4vw, 44px); }

/* ══════════════════════════════════════════════════════════════════════════
   nav-a11y (17 Oct 2026): menu option c (visible menu + Services mega-menu),
   header search + WhatsApp/call, breadcrumbs, footer sitemap, focus + skip
   link, contrast and mobile-size fixes. Markup: site/nav_a11y.py; behaviour:
   assets/js/site.js (megaNav, reach, search). Menu c is shown unless
   html[data-v-menu] is "a" or "b", so a production PHP page with no
   data-v-* attribute gets it too.
   ══════════════════════════════════════════════════════════════════════════ */
.hdr__in { position: relative; }
.mnav { display: none; }
.hdr__reach { display: none; }
:root:not([data-v-menu="a"]) .hdr__acts > .theme-tog { display: none; }   /* the toggle lives in the drawer + footer */
.hdr__acts { gap: 10px; }
.hdr__acts .hdr__cta { margin-left: 8px; }

/* icon buttons (search, WhatsApp, call): 44px targets, clay like the CTA */
.hdr__ic { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-943) 100%);
  box-shadow: var(--clay-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease); }
.hdr__ic:hover { transform: translate3d(-1px, -2px, 0); box-shadow: var(--clay-md); color: var(--bronze-deep); }
.hdr__ic svg { display: block; }
.hdr--over-dark .hdr__ic, .hdr--drawer .hdr__ic {
  color: var(--cream); background: rgba(var(--dark-rgb), .32);
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .16), 0 6px 18px rgba(0, 0, 0, .25); }
.hdr--over-dark .hdr__ic:hover, .hdr--drawer .hdr__ic:hover { color: var(--bronze-bright); }
.hdr__reach { align-items: center; gap: 10px; }
.reach { position: relative; }
.reach__pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 6; min-width: 248px;
  padding: 10px; border-radius: var(--r); background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-943) 100%);
  box-shadow: var(--clay-lg); opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; }
.reach__pop[data-open="true"] { opacity: 1; visibility: visible; transform: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s; }
.reach__t { margin: 4px 10px 6px; font: 500 12px/1.4 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.reach__row { display: grid; grid-template-columns: 52px 1fr; gap: 2px 10px; align-items: baseline;
  min-height: 44px; padding: 9px 10px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.reach__row:hover, .reach__row:focus-visible { background: rgba(255, 255, 255, .6); box-shadow: var(--clay-in); }
.reach__k { font: 500 12px/1.4 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-deep); }
.reach__v { font: 500 15px/1.35 Inter, sans-serif; }
.reach__h { grid-column: 2; font: 400 12.5px/1.4 Inter, sans-serif; color: var(--ink-soft); }

/* the visible menu (option c) */
.mnav__bar { display: flex; align-items: center; gap: clamp(18px, 2.1vw, 36px); margin: 0; padding: 0; list-style: none; }
.mnav__item { position: relative; }
.mnav__item--mega { position: static; }
.mnav__link { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: 500 14px/1 Inter, sans-serif; letter-spacing: .04em; color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: color .28s var(--ease); }
.mnav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor;
  opacity: .75; transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); }
.mnav__link:hover::after, .mnav__link[aria-expanded="true"]::after, .mnav__link[aria-current="page"]::after,
.mnav__item[data-current="true"] > .mnav__link::after { transform: scaleX(1); }
.mnav__chev { opacity: .6; transition: transform .3s var(--ease); }
.mnav__link[aria-expanded="true"] .mnav__chev { transform: rotate(180deg); }
.hdr--over-dark .mnav__link { color: rgba(var(--cream-rgb), .9); }
.hdr--over-dark .mnav__link:hover, .hdr--over-dark .mnav__link[aria-expanded="true"] { color: var(--cream); }
.mnav__panel { position: absolute; left: -18px; top: calc(100% + 6px); z-index: 5; min-width: 236px;
  padding: 10px 8px; border-radius: var(--r); background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-943) 100%);
  box-shadow: var(--clay-lg); opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s; }
.mnav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.mnav__panel[data-open="true"] { opacity: 1; visibility: visible; transform: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s; }
.mnav__panel > .mnav__sub { display: block; min-height: 44px; padding: 13px 16px; border-radius: 14px; white-space: nowrap; }
.mnav__sub { font: 500 14.5px/1.3 Inter, sans-serif; color: var(--ink-muted); text-decoration: none;
  transition: color .22s var(--ease), background-color .22s var(--ease), box-shadow .22s var(--ease); }
.mnav__sub:hover, .mnav__sub:focus-visible, .mnav__svc:hover, .mnav__svc:focus-visible, .mnav__lead:hover {
  color: var(--ink); background: rgba(255, 255, 255, .6); box-shadow: var(--clay-in); }
.mnav__sub[aria-current="page"], .mnav__svc[aria-current="page"] b { color: var(--bronze-deep); }
/* the Services mega panel: persona columns + an aside, centred under the header */
.mnav__panel--mega { left: 50%; top: calc(100% + 14px); width: min(1060px, calc(100vw - 64px));
  transform: translate3d(-50%, -8px, 0); padding: clamp(22px, 2.2vw, 32px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 236px); gap: clamp(20px, 2.4vw, 36px); }
.mnav__panel--mega[data-open="true"] { transform: translate3d(-50%, 0, 0); }
.mnav__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.mnav__eyebrow { margin: 0 0 10px; padding: 0 12px; font: 500 12px/1.4 Inter, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bronze-deep); }
.mnav__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mnav__svc { display: grid; gap: 5px; padding: 12px; border-radius: 14px; text-decoration: none; color: var(--ink);
  transition: background-color .22s var(--ease), box-shadow .22s var(--ease); }
.mnav__svc b { font: 400 1.25rem/1.15 Newsreader, Georgia, serif; letter-spacing: -.01em; font-weight: 400; }
.mnav__svc span { font: 400 13.5px/1.5 Inter, sans-serif; color: var(--ink-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.mnav__list .mnav__sub { display: flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: 12px; font-size: 14px; }
.mnav__all { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 12px;
  font: 500 13.5px/1.3 Inter, sans-serif; color: var(--bronze-deep); text-decoration: none; }
.mnav__all:hover { background: rgba(255, 255, 255, .6); box-shadow: var(--clay-in); }
.mnav__n { color: var(--ink-soft); font-weight: 400; }
.mnav__lead { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 10px 12px; border-radius: 12px;
  font: 500 14px/1.3 Inter, sans-serif; color: var(--bronze-deep); text-decoration: none; }
.mnav__aside { display: flex; flex-direction: column; justify-content: flex-start; align-self: start; gap: 14px;
  padding: clamp(18px, 2vw, 24px); border-radius: calc(var(--r) - 6px);
  background: linear-gradient(178deg, var(--sand-917b) 0%, var(--sand-941) 100%); box-shadow: var(--clay-in); }
.mnav__cta { min-height: 48px; padding: 0 20px; font-size: 14px; }
.mnav__more { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1.3 Inter, sans-serif; color: var(--ink-muted);
  text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb), .3); text-underline-offset: 3px; }
.mnav__more:hover { color: var(--ink); }
@media (min-width: 1180px) {
  :root:not([data-v-menu="a"]):not([data-v-menu="b"]) .mnav { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; }
  :root:not([data-v-menu="a"]):not([data-v-menu="b"]) .hdr__acts > .burger { display: none; }
}
@media (min-width: 941px) {
  :root:not([data-v-menu="a"]) .hdr__reach { display: flex; }
}
@media (min-width: 941px) and (max-width: 1279px) {
  .hdr__acts .hdr__cta { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mnav__panel, .mnav__panel--mega, .reach__pop, .hdr__ic, .mnav__link::after, .mnav__chev { transition: none; }
}
@media print { .mnav, .hdr__reach, .hdr__search { display: none !important; } }

/* ── site search dialog ─────────────────────────────────────────────────── */
.srch[hidden] { display: none; }
.srch { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(72px, 12vh, 140px) 16px 24px; }
.srch__veil { position: absolute; inset: 0; background: rgba(9, 9, 8, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.srch__box { position: relative; width: min(680px, 100%); max-height: calc(100vh - 120px); overflow: auto;
  border-radius: var(--r); background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-943) 100%);
  box-shadow: var(--clay-lg); padding: 8px; }
.srch__form { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 18px; color: var(--ink-soft); }
.srch__input { flex: 1 1 auto; min-width: 0; height: 52px; border: 0; background: transparent; outline: none;
  font: 400 18px/1.3 Inter, sans-serif; color: var(--ink); }
.srch__input::placeholder { color: var(--ink-soft); }
.srch__input::-webkit-search-cancel-button { display: none; }
.srch__form:focus-within { box-shadow: inset 0 -2px 0 var(--bronze-deep); }
.srch__x { flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 500 12px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
  background: rgba(var(--ink-rgb), .05); }
.srch__x:hover { color: var(--ink); background: rgba(var(--ink-rgb), .09); }
.srch__res:empty { display: none; }
.srch__res { border-top: 1px solid var(--line); padding: 8px 0 4px; }
.srch__grp { margin: 10px 18px 4px; font: 500 12px/1.4 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep); }
.srch__list { margin: 0; padding: 0; list-style: none; }
.srch__hit { display: block; padding: 11px 18px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.srch__hit:hover, .srch__hit:focus-visible, .srch__hit[aria-selected="true"] { background: rgba(255, 255, 255, .65); box-shadow: var(--clay-in); outline: none; }
.srch__hit b { display: block; font: 500 15.5px/1.35 Inter, sans-serif; }
.srch__hit span { display: block; margin-top: 3px; font: 400 13.5px/1.5 Inter, sans-serif; color: var(--ink-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.srch__all { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 10px 4px; padding: 0 8px;
  font: 500 14px/1.3 Inter, sans-serif; color: var(--bronze-deep); }
.srch__empty { margin: 12px 18px; font: 400 14.5px/1.6 Inter, sans-serif; color: var(--ink-muted); }
.srch__hint { margin: 4px 18px 10px; font: 400 13px/1.5 Inter, sans-serif; color: var(--ink-soft); }
body.srch-open { overflow: hidden; }
@media (max-width: 600px) {
  .srch { padding: 12px 10px; }
  .srch__box { max-height: calc(100vh - 24px); }
  .srch__input { font-size: 16px; }
}

/* ── breadcrumbs (generated pages): one line under the header, over the
   first section's top padding; trail = the BreadcrumbList JSON-LD ─────── */
main:has(> .crumbs) { position: relative; }
.crumbs { position: absolute; left: 0; right: 0; top: calc(var(--head-h) + 6px); z-index: 3; pointer-events: none; }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 0; padding: 0; list-style: none;
  font: 400 13px/1.4 Inter, sans-serif; color: var(--ink-soft); }
.crumbs__list li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs__list li + li::before { content: "/"; margin: 0 8px; color: var(--ink-faint); }
.crumbs__list a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-muted); pointer-events: auto;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.crumbs__list a:hover { color: var(--ink); text-decoration-color: currentColor; }
.crumbs__list [aria-current="page"] { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
/* a dark first section (leadership roll call): light text */
main:has(> .crumbs ~ div[data-vg="leadership"][data-vv="a"]) .crumbs__list,
main:has(> .crumbs ~ div[data-vg="leadership"][data-vv="a"]) .crumbs__list a { color: rgba(var(--cream-rgb), .78); }
main:has(> .crumbs ~ div[data-vg="leadership"][data-vv="a"]) .crumbs__list li + li::before { color: rgba(var(--cream-rgb), .45); }
/* the trail replaces a hero's own crumb line (kit heroes) */
main:has(> .crumbs) .phero__crumb { display: none; }
@media (max-width: 940px) { .crumbs { top: calc(var(--head-h) + 2px); } .crumbs__list { font-size: 13px; } }
@media print { .crumbs { position: static; } }

/* PHP pages' crumb line: an ordered list, same look as before */
.phero__crumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.phero__crumb ol li + li::before { content: "/"; margin: 0 8px; color: var(--ink-faint); }
.phero__crumb [aria-current="page"] { color: var(--ink-soft); display: inline-block; max-width: min(46ch, 60vw);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ── footer: sitemap columns (Services · Company · Resources · Legal) +
   contacts; the theme switch in the bottom bar ─────────────────────────── */
.ftr__top { grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, .85fr)) minmax(0, 1.25fr);
  gap: 44px clamp(22px, 2.4vw, 44px); }
@media (max-width: 1280px) {
  .ftr__top { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); }
  .ftr__brand { grid-column: 1 / -1; max-width: 560px; }
}
@media (max-width: 940px) {
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .ftr__col--touch { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  /* clay.css spans the second-last column (the old third link column); with Legal there it stays one cell */
  .ftr__top > .ftr__col:nth-last-child(2) { grid-column: auto; display: block; }
}
.ftr__theme { display: inline-flex; align-items: center; gap: 12px; margin-left: 18px; }
.ftr__theme-k { font: 500 12px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--cream-rgb), .66); }
.ftr .theme-tog { height: 44px; color: rgba(var(--cream-rgb), .88); background: rgba(var(--cream-rgb), .07);
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .12); }
.ftr .theme-tog:hover { color: var(--cream); }
@media (max-width: 680px) { .ftr__theme { margin-left: 0; } }
/* contrast (WCAG 1.4.3): the footer's quiet text was .28–.40 cream on --dark-2 (≈ 2.3–3.6 : 1) */
.ftr__h { color: rgba(var(--cream-rgb), .66); }
.ftr__tag { color: rgba(var(--cream-rgb), .62); }
.ftr__hours { color: rgba(var(--cream-rgb), .66); }
.ftr__hours b { color: rgba(var(--cream-rgb), .8); }
.ftr__copy, .ftr__links a { color: rgba(var(--cream-rgb), .66); }
.ftr__disc { color: rgba(var(--cream-rgb), .6); }
.ftr__brand p { color: rgba(var(--cream-rgb), .7); }
.ftr__links a:hover { color: var(--cream); }

/* ── focus + skip link (WCAG 2.4.1, 2.4.7, 1.4.11) ───────────────────────── */
:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 3px; }
:is(.section--dark, .section--slate, .clay--dark, .drawer, .ftr, .hero, [data-chrome-dark], .hdr--over-dark, .hdr--drawer) :focus-visible,
.drawer:focus-visible { outline-color: var(--bronze-bright); }
a.skip-link { position: fixed; left: 12px; top: 12px; z-index: 200; transform: translateY(-160%); transition: none; }
a.skip-link:focus, a.skip-link:focus-visible { left: 12px; transform: none; }

/* ── contrast tokens (WCAG 1.4.3 AA, 4.5:1 for small text) ──────────────────
   --bronze-deep carries most small accent text (eyebrows, chapter numbers,
   link arrows): #a8762f measured 3.1–3.5:1 on the ivory ground; #875a1f is
   ≥ 4.7:1 on every light ground stop and stays the same bronze hue.
   --ink-faint (dates, hints, optional labels) #8a8478 measured 2.9–3.3:1 → #625e55 (≥ 4.8:1).
   Dark bands keep the lighter bronze (it reads 4.5:1+ on --dark-2). The blue
   theme's accent already passes (#335f96 ≥ 5.1:1); only its faint ink moves. */
:root { --bronze-deep: #875a1f; --bronze-deep-rgb: 135, 90, 31; --ink-faint: #625e55; }
html[data-theme="blue"] { --ink-faint: #5b616b; }
:root:not([data-theme="blue"]) :is(.section--dark, .section--slate, .clay--dark, .drawer, .ftr, .hero, [data-chrome-dark]) {
  --bronze-deep: #a8762f; --bronze-deep-rgb: 168, 118, 47; }

/* ── phones + tablets (≤ 940px, where the sticky bar shows): labels ≥ 12px,
   body text ≥ 16px, tap targets ≥ 44px (roadmap §8). Layout is unchanged:
   hit areas grow through padding + equal negative margin or ::after. ───── */
@media (max-width: 940px) {
  /* labels */
  .eyebrow, .chapter__label, .chapter__no, .flow__num, .flow__cap, .entry__cat, .mini__k, .office__tag,
  .amap__key, .drift__no, .dept__n, .ppl__role, .lead__role, .quote__who span, .tag-new, .post-meta, .post-meta b,
  .author__cred, .lf__progress, .lf__progress span, .ftr__h, .ftr__tag, .pill, .reach__k { font-size: 12px; }
  .ppl__ghead span, .hh__pno, .lg__role, p.quote__who > span { font-size: 12px; }
  :root .tag-new, :root .post-meta, :root .post-meta b, :root .author__cred { font-size: 12px; }
  .lg__sum, .lg__bio p { font-size: 16px; }
  .theme-tog { height: 44px; font-size: 12px; }
  .mbar__a { font-size: 12px; letter-spacing: .08em; }
  /* body text */
  .body, .lede, .prose__body p, .prose__list li, .acc__panel p, .ftr__brand p, .flow__body, .tools__text,
  .drift__text p, .jr__list li, .lead__sum, .author__bio, .office__v, .duet__copy p, .head-row > p,
  .head-split > p, .orbit__card-body p, .stk__card p, .sched__note { font-size: 16px; }
  .ftr__disc, .ftr__copy { font-size: 13px; }
  input, select, textarea { font-size: 16px; }
  /* tap targets */
  .hdr__logo { display: flex; align-items: center; min-height: 44px; }
  .link-arrow::after { top: -16px; bottom: -16px; }
  html:not([data-v-testimonials="a"],[data-v-testimonials="b"]) [data-t3d] .t3d-who span { font-size: 12px; }
  :root p.quote__who > span, .sp__no, .sp__lab, .svc-glance__k { font-size: 12px; }
  .sp__text, .svc-glance__v { font-size: 16px; }
  .bkh__tab { min-height: 44px; }
  .ftr__a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; padding: 0; }
  .ftr__c { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .ftr__soc { width: 44px; height: 44px; }
  .crumbs__list a, .phero__crumb a { position: relative; }
  .crumbs__list a::after, .phero__crumb a::after { content: ""; position: absolute; inset: -12px -6px; }
  .pill { min-height: 44px; }
  .isearch__go { min-width: 44px; min-height: 44px; }
  .drift__toggle, .t3d-mode { min-height: 44px; }
  .ppl__in { min-width: 44px; min-height: 44px; }
  .flow__node::after { content: ""; position: absolute; inset: -7px; }
  .author__name a, .post-author a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 420px) {
  .mbar__a { gap: 6px; letter-spacing: .04em; }
  /* 20 Oct: three equal cells clipped "Schedule a Call" and hid its icon at 360–390px —
     the long label gets the wider cell (Call / WhatsApp still fit with room to spare) */
  .mbar__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr); }
  .mbar__a { padding: 0 4px; }
}
@media (max-width: 350px) {
  .mbar__a svg { display: none; }
}

/* ── /search/ results page ──────────────────────────────────────────────── */
.sres__form { display: flex; gap: 12px; align-items: center; max-width: 720px; margin-top: clamp(24px, 3vw, 36px); }
.sres__input { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 22px; border: 0; border-radius: var(--r-pill);
  font: 400 16px/1.3 Inter, sans-serif; color: var(--ink); background: linear-gradient(178deg, var(--sand-917b) 0%, var(--sand-941) 100%);
  box-shadow: var(--clay-in); }
.sres__input:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 2px; }
.sres__go { flex: 0 0 auto; }
.sres { max-width: 880px; }
.sres__count { font: 400 15px/1.6 Inter, sans-serif; color: var(--ink-muted); margin-bottom: 18px; }
.sres__h { margin: clamp(28px, 4vw, 44px) 0 12px; font: 500 12px/1.4 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-deep); }
.sres__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sres__list li { border-bottom: 1px solid var(--line); }
.sres__hit { display: grid; gap: 6px; padding: 18px 4px; color: var(--ink); text-decoration: none; transition: background-color .2s var(--ease); }
.sres__hit:hover { background: rgba(255, 255, 255, .45); }
.sres__hit b { font: 400 clamp(1.2rem, 1.6vw, 1.4rem)/1.25 Newsreader, Georgia, serif; }
.sres__hit span { font: 400 15px/1.65 Inter, sans-serif; color: var(--ink-muted); }
.sres__hit small { font: 400 13px/1.5 Inter, sans-serif; color: var(--ink-soft); }
.sres__hit mark { background: rgba(var(--bronze-rgb), .22); color: inherit; border-radius: 3px; padding: 0 2px; }
.sres__pop { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sres__pop .btn { min-height: 44px; padding: 0 20px; font-size: 14px; }
@media (max-width: 600px) { .sres__form { flex-direction: column; align-items: stretch; } .sres__hit span { font-size: 16px; } }

/* ── helpful 404 (404.php + static 404.html): search · popular pages · contact */
main:has(> .nf) > .phero { min-height: 0 !important; padding-bottom: clamp(8px, 2vw, 24px); }
.nf { padding-top: clamp(8px, 2vw, 24px); }
.nf__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.nf__col { display: grid; gap: 16px; align-content: start; }
.nf__form { margin-top: 0; }
.nf__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.nf__list li { border-bottom: 1px solid var(--line); }
.nf__a { display: flex; align-items: center; min-height: 44px; font: 400 16px/1.4 Inter, sans-serif; color: var(--ink); }
.nf__a:hover { color: var(--bronze-deep); }
.nf__chips { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 940px) { .nf__grid { grid-template-columns: minmax(0, 1fr); } }
/* the contact chips (content.css loads only on /contact/) */
.nf__chips .chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px;
  border-radius: var(--r-pill); font: 500 14px/1.2 Inter, sans-serif; color: var(--ink);
  background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-943) 100%); box-shadow: var(--clay-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.nf__chips .chip svg { color: var(--bronze-deep); flex: 0 0 auto; }
.nf__chips .chip:hover { transform: translate3d(-1px, -3px, 0); box-shadow: var(--clay-md); }
@media (prefers-reduced-motion: reduce) { .nf__chips .chip { transition: none; } }
@media (min-width: 941px) { .nf__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); } }   /* perf-build: was unscoped and beat the 940px one-column rule (404 overflowed at 390) */
.nf__form { flex-wrap: wrap; }
.nf__form .sres__input { flex: 1 1 220px; }
/* phones: the form is a column, where that 220px basis became the input's HEIGHT (a 120px oval) — imp-pages */
@media (max-width: 600px) { .nf__form .sres__input { flex: 0 0 auto; } }

/* ── reduced motion, site-wide safety net (WCAG 2.3.3 / owner rule): every
   component already has its own static version; this stops any CSS
   transition or animation that a component forgot, and smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
.office__tag { background: rgba(var(--bronze-rgb), .07); }   /* 4.47 → ≥ 4.6:1 for the "HQ" tag text */

/* ── responsive images (perf-build, 17 Oct): site/perf_img.py wraps listed images in
   <picture class="pimg"> (WebP srcset + JPEG/PNG fallback). The picture drops its own box, so
   the <img> lays out exactly as a bare one; child-combinator rules are mirrored for it. */
picture.pimg { display: contents; }
.figure__frame > picture.pimg > img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82) sepia(.14) contrast(.97) brightness(.99);
}
.figure__frame--duo > picture.pimg > img { filter: saturate(.25) sepia(.42) contrast(1.02) brightness(1.02); }
.figure__frame--plain > picture.pimg > img { filter: none; }
.collage__item .figure__frame > picture.pimg > img { height: 100%; }
.collage__item .figure__frame > picture.pimg > img.fit-contain { object-fit: contain; padding: 8px; }

/* ── first screen at first paint (perf-build, 17 Oct; compare group "first-paint", b = default):
   the page's first section rises in with a CSS animation from the first paint instead of waiting
   for site.js's observer (clay.css hides [data-rise] until then) — the hero heading is usually the
   LCP element, so on a slow phone it painted 1-2 s late. Same motion, same delays (approx.).
   Option a (html[data-v-first-paint="a"], Compare only) keeps the script-driven reveal. Reduced
   motion: clay.css already shows everything at once, and no animation runs here. */
@keyframes uic-first-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-v-first-paint="a"]) main > section:first-of-type [data-rise],
  html:not([data-v-first-paint="a"]) main > section:first-of-type[data-rise],
  html:not([data-v-first-paint="a"]) main > section:first-of-type [data-rise-scale],
  html:not([data-v-first-paint="a"]) main > section:first-of-type [data-stagger] > * {
    animation: uic-first-rise .8s var(--ease, cubic-bezier(.2, .7, .2, 1)) both;
  }
  html:not([data-v-first-paint="a"]) main > section:first-of-type [data-rise^="0.0"]:not([data-rise="0.00"]) { animation-delay: .06s; }
  html:not([data-v-first-paint="a"]) main > section:first-of-type [data-rise^="0.1"] { animation-delay: .12s; }
  html:not([data-v-first-paint="a"]) main > section:first-of-type [data-rise^="0.2"] { animation-delay: .22s; }
  html:not([data-v-first-paint="a"]) main > section:first-of-type [data-stagger] > * { animation-delay: calc(var(--i, 0) * 70ms); }
}

/* ══════════════════════════════════════════════════════════════════════════
   imp-home (17 Oct 2026) — homepage polish
   ══════════════════════════════════════════════════════════════════════════ */
/* content that is already in view when the reveal observer first sees it (a page
   loaded or restored mid-way, an anchor jump, a fast scroll) is shown at once:
   site.js reveal() adds .is-instant for two frames */
.is-instant, .is-instant > *, .is-instant .trio__panel { transition: none !important; }

/* services trio: the India card's closing line fills the tall panel (hidden when the panels stack) */
.trio__foot { margin: auto 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--ink-rgb), .12);
  font: italic 400 clamp(1.02rem, 1.2vw, 1.14rem)/1.55 Newsreader, Georgia, serif; color: var(--ink-muted); max-width: 34ch; }
.trio__foot + .trio__more { margin-top: 0; }
@media (max-width: 760px) { .trio__foot { display: none; } }

/* Build · Nurture · Grow, lean stages: the phase copy + one link, no service lists.
   Wide: the same three-column track (the panel is display:contents on the subgrid).
   <= 940px: each stage an accordion — the title is the toggle (site.js flow()). */
.flow__tog { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin: 0; border: 0;
  background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; }
.flow__panel { display: contents; }
.flow__stop--lean .flow__body { padding-bottom: 16px; }
.flow__link { justify-self: start; align-self: start; font-size: 14px; }
@media (max-width: 940px) {
  .flow__panel { display: block; }
  .flow__stops:has(.flow__stop--lean) { row-gap: 0; }
  .flow__stop--lean { padding-bottom: 0; border-bottom: 1px solid var(--line); }
  .flow__stop--lean:last-child { padding-bottom: 0; }
  .flow__stop--lean .flow__num { position: absolute; left: calc(var(--node) + 22px); top: 14px; line-height: 1; }
  .flow__stop--lean .flow__node { top: 22px; }
  .flow__stop--lean .flow__title { margin: 0; }
  .flow__stop--lean .flow__title { padding: 30px 0 16px; }
  .flow__stop--lean .flow__title:has(.flow__tog) { padding: 0; }
  .flow__tog { min-height: 48px; padding: 30px 0 16px; }
  .flow__tog:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 2px; border-radius: 6px; }
  .flow__sign { display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    color: var(--bronze-deep); box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s var(--ease); }
  .flow__tog[aria-expanded="true"] .flow__sign { transform: rotate(45deg); }
  .flow__stop--lean[data-open="false"] .flow__panel { display: none; }
  .flow__stop--lean .flow__panel { padding-bottom: 22px; }
  .flow__stop--lean .flow__body { padding-bottom: 12px; }
}
@media (max-width: 600px) { .flow__stop--lean .flow__num { left: calc(var(--node) + 16px); } }
@media (prefers-reduced-motion: reduce) { .flow__sign { transition: none; } }

/* #schedule: one primary action — "Open calendar"; the new-tab Calendly link under it, quiet */
.sched__ext { margin-top: 2px; }

/* homepage length (judge-home: 10.6 screens at 1440, 15.9 at 390): the home sections
   breathe a little less than the inner pages, the insights head runs on two lines,
   the services lists pair up on phones. Scoped to the home page (main holds the
   testimonials band only there). */
main:has(> [data-t3d]) > .section:not(.section--tight):not(.hh) { padding: clamp(56px, 6.4vw, 92px) 0; }
main:has(> [data-t3d]) .duet__figures { margin-top: clamp(40px, 4.6vw, 64px); }
.teaser-sec .head-row h2 { font-size: clamp(1.9rem, 2.9vw, 2.75rem); line-height: 1.08; max-width: 30ch; }
/* one head size for every home section (the services head's): two lines, not three */
main:has(> [data-t3d]) > .section .head-row h2,
main:has(> [data-t3d]) > .section .duet__copy > h2,
main:has(> [data-t3d]) > .section .faq__head h2 { font-size: clamp(1.9rem, 2.9vw, 2.75rem); line-height: 1.08; }
main:has(> [data-t3d]) > .section .head-row h2 { max-width: 30ch; }
/* insights teaser, wide screens: the three latest posts side by side (same entries, same
   order; rows again <= 940px). Every column is the same height from the first paint
   (title <= 3 lines, blurb <= 3 lines), so nothing below moves when the posts arrive. */
@media (min-width: 941px) {
  .teaser__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); border-top: 0; }
  .teaser__list .entry { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 10px 14px; align-content: start;
    padding: 22px 0 6px; border-top: 1px solid var(--line); border-bottom: 0;
    min-height: calc(130px + 3 * 1.3 * clamp(1.125rem, 1.6vw, 1.4375rem)); }   /* 22+6 pad, 12px cat line, 2 gaps, 3 title lines, 3 blurb lines (13.5/1.65) */
  .teaser__list .entry__cat { grid-column: 1; grid-row: 1; }
  .teaser__list .entry__date { grid-column: 2; grid-row: 1; justify-self: end; }
  .teaser__list .entry__title, .teaser__list .entry__blurb { grid-column: 1 / -1; }
  .teaser__list .entry__title { grid-row: 2; -webkit-line-clamp: 3; }
  .teaser__list .entry__blurb { grid-row: 3; }
}

/* ── imp-tech (17 Oct): accessibility fixes in shared CSS ──────────────────
   1. Heading levels are renumbered so they never skip (includes/a11y-html.php); a moved heading keeps
      its old look through class hl-<old level>. Tag-qualified, zero-class specificity: any class rule
      that sizes a heading (.prose__h, .display-lg, .lg__name …) still wins, exactly as before. */
h2:where(.hl-3), h3:where(.hl-3) { font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.18; }
h2:where(.hl-4), h3:where(.hl-4) { font-size: 1.3125rem; line-height: 1.25; font-weight: 400; }
h2:where(.hl-5, .hl-6), h3:where(.hl-5, .hl-6), h4:where(.hl-5, .hl-6) { font-size: 1.125rem; line-height: 1.3; font-weight: 400; }
.clay--dark h2:where(.hl-3, .hl-4) { color: var(--cream); }
.post-body .hl-3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; margin-top: 1.7em; }
.post-body .hl-4 { font-size: 1.25rem; line-height: 1.3; margin-top: 1.5em; }
.post-body .hl-5, .post-body .hl-6 { font-size: 1.125rem; line-height: 1.35; margin-top: 1.4em; }
/* 2. Scroll-in reveals never hide a focused control: keyboard focus inside shows the block at once. */
[data-rise]:focus-within, [data-rise-scale]:focus-within, [data-stagger] > :focus-within,
.trio__panel:focus-within { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; }
/* the home trio: the panel's skin is clipped to its swept shape on phones/tablets, which hid the
   skin's focus outline — the link itself shows the ring too (outline is never clipped there) */
.trio__more:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 4px; border-radius: 4px; }
/* 3. Post tables scroll sideways on phones and are focusable (tabindex, a11y-html.php): show it. */
.post-body table:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 3px; }
/* 4. Tap targets ≥ 24px that move nothing: the box grows by padding, a matching negative margin
      keeps every line where it was (the India services book, hub service bullets). 44px on touch
      for the book page's single action link. */
.svc-link { display: inline-block; padding-block: 4px; margin-block: -4px; }
.bkh__link { padding-block: 6px; margin-bottom: -6px; margin-top: calc(clamp(6px, 2.6cqh, 16px) - 6px); }
@media (pointer: coarse) {
  .bkh__link { padding-block: 15px; margin-bottom: -15px; margin-top: calc(clamp(6px, 2.6cqh, 16px) - 15px); }
}
/* 5. LCP without site.js (imp-tech): on pages that open with a compact text hero (.phero — /about/,
      /team/, the legal and contact pages …) the next section's heading is on the first screen of a
      phone and was the LCP element, painted only after site.js revealed it (~4 s on a slow phone).
      That section now rises in from the first paint too — the same CSS animation as the first-paint
      b option above (option a in Compare keeps the script-driven reveal; reduced motion: no animation). */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-v-first-paint="a"]) main > section.phero:first-of-type + section [data-rise],
  html:not([data-v-first-paint="a"]) main > section.phero:first-of-type + section[data-rise],
  html:not([data-v-first-paint="a"]) main > section.phero:first-of-type + section [data-rise-scale],
  html:not([data-v-first-paint="a"]) main > section.phero:first-of-type + section [data-stagger] > * {
    animation: uic-first-rise .8s var(--ease, cubic-bezier(.2, .7, .2, 1)) .12s both;
  }
}
main:has(> [data-t3d]) .flow-sec .head-row { margin-bottom: clamp(32px, 3.4vw, 48px); }
/* 6. Footer "Cookie settings" (site.json footer.legal → #cookie-settings; php-assets/analytics.js reopens
      the consent banner). Shown only when the banner has something to ask about: hidden without
      JavaScript and while no tag is configured (analytics.js sets data-uic-consent="none"). */
html:not([data-uic-consent]) a[href="#cookie-settings"], html[data-uic-consent="none"] a[href="#cookie-settings"] { display: none; }
main:has(> [data-t3d]) .teaser__foot { margin-top: clamp(24px, 2.6vw, 32px); }
/* filled on the server (cms_render_teaser: data-state="ready"): nothing will arrive later, so the
   rows take their own height instead of the reserved skeleton height */
.teaser-sec[data-state="ready"] .teaser__list .entry { min-height: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   consistency (17 Oct 2026; owner: "menu links are messy"): the Services mega panel
   (site/nav_a11y.py mega_d) and the drawer's Services group (drawer_services) share one
   structure — three hub groups (hub name = heading + link, its services, "All … Services (n)"),
   persona pages as a secondary line. Menu d is the default; menu c (the persona-labelled
   columns) stays selectable in the Compare panel (site/variants.json "menu").
   ══════════════════════════════════════════════════════════════════════════ */
.mnav__panel--mega { display: block; }
.mnav__mega { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 236px); gap: clamp(20px, 2.4vw, 36px); }
:root[data-v-menu="c"] .mnav__mega--d, :root:not([data-v-menu="c"]) .mnav__mega--c { display: none; }
/* tech-fixes 17 Oct: menu d's panel 60px wider (1060 → 1120, still 32px clear of each viewport edge), so each hub
   column fits "All Family Office Services (13) →" on one line at every width the menu shows (≥ 1180px) */
:root:not([data-v-menu="c"]) .mnav__panel--mega { width: min(1120px, calc(100vw - 64px)); }
.mnav__cols--hub { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.mnav__col--hub { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mnav__hub { display: block; padding: 2px 12px 12px; border-bottom: 1px solid var(--line);
  font: 400 1.25rem/1.2 Newsreader, Georgia, serif; letter-spacing: -.01em; color: var(--ink); text-decoration: none;
  transition: color .22s var(--ease); }
.mnav__hub:hover, .mnav__hub:focus-visible, .mnav__hub[aria-current="page"] { color: var(--bronze-deep); }
.mnav__col--hub .mnav__all { display: block; margin-top: 4px; align-self: stretch; }
.mnav__nw { white-space: nowrap; }
.mnav__col--hub .mnav__all svg { display: inline-block; vertical-align: -1px; margin-left: 2px; }
.mnav__mega--d .mnav__aside { align-self: start; }
.mnav__pers { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
  margin-top: 2px; padding: 12px 12px 0; border-top: 1px solid var(--line); }
.mnav__pk { font: 500 12px/1.4 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.mnav__plist { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.mnav__per { display: inline-flex; align-items: center; min-height: 34px; font: 400 13.5px/1.3 Inter, sans-serif;
  color: var(--ink-muted); text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb), .25);
  text-underline-offset: 3px; transition: color .22s var(--ease), text-decoration-color .22s var(--ease); }
.mnav__per:hover, .mnav__per:focus-visible, .mnav__per[aria-current="page"] { color: var(--bronze-deep); text-decoration-color: currentColor; }

/* drawer: Services as three hub groups (each ≥ 44px tall row; list collapsible) */
.drawer__group--svc { padding-bottom: 10px; }
.drawer__hub + .drawer__hub { border-top: 1px solid rgba(var(--cream-rgb), .07); }
.drawer__hubrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer__hubrow .drawer__link--hub { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 48px; }
.drawer__x { flex: 0 0 auto; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--cream); background: rgba(var(--cream-rgb), .07);
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .1); transition: background-color .25s var(--ease); }
.drawer__x:hover { background: rgba(var(--cream-rgb), .13); }
.drawer__chev { opacity: .85; transition: transform .3s var(--ease); }
.drawer__x[aria-expanded="true"] .drawer__chev { transform: rotate(180deg); }
.drawer .drawer__link--per { display: flex; align-items: center; min-height: 44px; margin: -4px 0 4px; padding: 0 0 0 14px;
  border-bottom: 0; border-left: 1px solid rgba(var(--bronze-rgb), .6);
  font: 400 14px/1.35 Inter, sans-serif; letter-spacing: 0; color: rgba(var(--cream-rgb), .7); }
.drawer__svcs { margin: 0 0 8px; padding: 0 0 0 14px; list-style: none; }
.drawer__svcs[hidden] { display: none; }
.drawer .drawer__link--svc { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border-bottom: 0;
  font: 400 15px/1.3 Inter, sans-serif; letter-spacing: 0; color: rgba(var(--cream-rgb), .86); }
.drawer .drawer__link--all { color: var(--bronze-bright); font-weight: 500; }
.drawer__n { color: rgba(var(--cream-rgb), .55); font-weight: 400; }
.drawer .drawer__link--per:hover, .drawer .drawer__link--svc:hover,
.drawer .drawer__link--per[aria-current="page"], .drawer .drawer__link--svc[aria-current="page"] { color: var(--bronze-bright); padding-left: 0; }
.drawer .drawer__link--per:hover, .drawer .drawer__link--per[aria-current="page"] { padding-left: 14px; }
@media (prefers-reduced-motion: reduce) { .drawer__chev, .drawer__x, .mnav__hub, .mnav__per { transition: none; } }
/* tap targets ≥ 44px in the drawer (owner item 5): the About links and the foot "Schedule a Call" */
.drawer__group .drawer__link--sub { display: flex; align-items: center; min-height: 44px; }
.drawer__foot .drawer__cta { display: inline-flex; align-items: center; min-height: 44px; }

/* ── drawer structure (owner 19 Oct 2026: "the navigation links are not looking structured") ──
   One row style for every destination (hub rows, About links, Insights / FAQ / Contact): the same
   height, type and hairline under each; three evenly spaced blocks; hub toggles as small outlined
   circles inside the row; each hub's services indented under a bronze rule. Full width on phones
   (the 40 px strip of page beside it read as a mistake). CSS only: markup = site/nav_a11y.py. */
.drawer { --dr-line: rgba(var(--cream-rgb), .1); }
@media (max-width: 600px) { .drawer { width: 100vw; padding-left: 24px; padding-right: 24px; } }
.drawer__group { padding: 30px 0 0; border-bottom: 0; }
.drawer__group:first-of-type { padding-top: 6px; }
.drawer__label { margin-bottom: 10px; }
.drawer__group > .drawer__link, .drawer > .drawer__link, .drawer__hubrow > .drawer__link {
  display: flex; align-items: center; min-height: 54px; padding: 0;
  font: 300 1.3125rem/1.2 Newsreader, Georgia, serif; letter-spacing: -.01em;
  border-bottom: 1px solid var(--dr-line); }
.drawer__hubrow { border-bottom: 1px solid var(--dr-line); }
.drawer__hubrow > .drawer__link { border-bottom: 0; }
.drawer__hub + .drawer__hub { border-top: 0; }
/* the loose links: their own block, the same rhythm as the groups */
.drawer__group + .drawer__link { margin-top: 30px; }
.drawer__theme { margin-top: 30px; padding: 14px 0; border-bottom: 1px solid var(--dr-line); }
/* hub toggles: a 44 px target, a 30 px outlined circle */
.drawer__x { position: relative; width: 44px; height: 44px; margin-right: -7px; background: none; box-shadow: none; }
.drawer__x::before { content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 1px solid rgba(var(--cream-rgb), .22); transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.drawer__x:hover { background: none; }
.drawer__x:hover::before { background: rgba(var(--cream-rgb), .08); }
.drawer__x[aria-expanded="true"]::before { border-color: rgba(var(--bronze-rgb), .75); background: rgba(var(--bronze-rgb), .16); }
.drawer__chev { position: relative; }
/* a hub's services: indented under one bronze rule */
.drawer__svcs { margin: 8px 0 14px 2px; padding: 2px 0 2px 16px; border-left: 1px solid rgba(var(--bronze-rgb), .45); }
.drawer .drawer__link--svc { min-height: 40px; font: 400 15px/1.3 Inter, sans-serif; }
.drawer .drawer__link--all { margin-top: 2px; }
.drawer__foot { padding-top: 28px; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .drawer__x::before { transition: none; } }

/* ── phones: hero copy centred in the visible area (owner 19 Oct 2026: "too upper") ──
   between the fixed header (top) and the sticky call bar + Scroll cue (bottom); replaces the
   start-below-the-header rule above, written when the hero copy was taller */
@media (max-width: 600px) {
  .hero { align-items: center; padding: var(--head-h) 0 calc(60px + 56px + env(safe-area-inset-bottom, 0)); }
  .hero__body { padding-bottom: 0; }
}
/* phones, menu open: the header gets the drawer's own colour, so a long menu scrolls UNDER it
   instead of showing through behind the logo and close button */
@media (max-width: 600px) { .hdr.hdr--drawer { background: var(--dark-2); box-shadow: 0 1px 0 rgba(var(--cream-rgb), .08); } }

/* ── home hero options d / e / f (owner 19 Oct 2026): a video per option, graded to the theme ──
   A cinematic grade, not a wash: the footage keeps its own light and part of its colour (the warm
   city lights stay warm), a light colour layer pulls the rest toward the theme (navy in blue, umber
   in bronze), and the darkening sits only where it is needed — the top band (menu), a soft veil
   behind the headline, the edges (vignette) and the bottom, where the hero meets the next section.
   Per clip (pages.json hero.tone): the bright day sky gets more cover behind the text than night. */
.hero--tint .hero__media video { filter: saturate(1.08) contrast(1.07) brightness(.96); }
.hero__tint { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgb(var(--hero-tint-rgb, 86, 60, 30)); mix-blend-mode: color; opacity: var(--hero-tint-a, .22); }
html[data-theme="blue"] .hero__tint { --hero-tint-rgb: 40, 76, 146; }
.hero--tint .hero__scrim-a { background: linear-gradient(180deg,
  rgba(var(--umber-173-rgb), .62) 0%, rgba(var(--umber-193-rgb), .16) 20%, rgba(var(--umber-193-rgb), .06) 52%,
  rgba(var(--umber-167-rgb), .5) 80%, rgba(var(--umber-167-rgb), .97) 100%); }
.hero--tint .hero__scrim-b { background:
  radial-gradient(58% 42% at 50% 48%, rgba(var(--umber-187-rgb), var(--hero-veil, .45)) 0%,
    rgba(var(--umber-187-rgb), calc(var(--hero-veil, .45) * .45)) 55%, rgba(var(--umber-187-rgb), 0) 100%),
  radial-gradient(125% 95% at 50% 42%, rgba(var(--umber-167-rgb), 0) 58%, rgba(var(--umber-167-rgb), .55) 100%); }
.hero--tint .hero__body h1, .hero--tint .hero__sub {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 44px rgba(var(--umber-167-rgb), .5); }
.hero--tone-night { --hero-tint-a: .16; --hero-veil: .34; }
.hero--tone-dusk  { --hero-tint-a: .22; --hero-veil: .42; }
.hero--tone-day   { --hero-tint-a: .17; --hero-veil: .66; }   /* owner 20 Oct: a little less blue */
@media (max-width: 600px) {   /* phones: the clip is cropped to the statue's middle — a fuller veil behind the copy */
  .hero--tint .hero__scrim-b { background:
    radial-gradient(90% 46% at 50% 46%, rgba(var(--umber-187-rgb), calc(var(--hero-veil, .45) + .1)) 0%,
      rgba(var(--umber-187-rgb), calc(var(--hero-veil, .45) * .5)) 60%, rgba(var(--umber-187-rgb), 0) 100%),
    radial-gradient(140% 95% at 50% 42%, rgba(var(--umber-167-rgb), 0) 55%, rgba(var(--umber-167-rgb), .5) 100%); }
}
/* "First screen buttons" (Compare group hero-cta): the video hero's optional two buttons, shown only for b */
html:not([data-v-hero-cta="b"]) .hero__acts--opt { display: none; }
.hero__acts--opt { margin-top: clamp(32px, 4vw, 44px); }

/* ── no-photo placeholder (owner 20 Oct 2026) ──────────────────────────────────
   Anyone without a photo (team roster, roster list, leaders, profile figures, a photo that fails
   to load) gets a person silhouette instead of initials. Drawn with theme tokens, so it is blue on
   the blue themes and bronze on bronze. The initials stay in the markup (screen readers keep the
   name via the surrounding aria-label); they are only hidden visually. */
:root .ppl__tini, :root .ppl__bini, :root .ppl__ini, :root .rf__tini, :root .rf__ini,
:root .lg__ini, :root .lead__ini, :root .figure__initials {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  font-size: 0; line-height: 0; letter-spacing: 0; color: transparent;
  background: radial-gradient(120% 95% at 50% 12%, var(--sand-985) 0%, var(--sand-944) 58%, var(--sand-929) 100%);
}
:root .ppl__ini, :root .rf__ini, :root .figure__initials { position: absolute; inset: 0; }
:root .ppl__ini[hidden], :root .rf__ini[hidden] { display: none; }
:root .ppl__tini::before, :root .ppl__bini::before, :root .ppl__ini::before, :root .rf__tini::before, :root .rf__ini::before,
:root .lg__ini::before, :root .lead__ini::before, :root .figure__initials::before {
  content: ""; position: absolute; inset: 16% 8% 0;
  background: linear-gradient(180deg, rgba(var(--bronze-rgb), .62) 0%, rgba(var(--bronze-rgb), .38) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='18'/%3E%3Cpath d='M10 100C10 75 28 59 50 59S90 75 90 100Z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='18'/%3E%3Cpath d='M10 100C10 75 28 59 50 59S90 75 90 100Z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
/* the 40px roster thumbs: the figure a touch larger so it reads at that size */
:root .ppl__tini::before, :root .rf__tini::before { inset: 20% 4% 0; }