/* ==========================================================================
   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 {
  color: var(--cream); background: rgba(23, 18, 12, .32);
  box-shadow: inset 0 1px 0 rgba(248, 243, 232, .16), 0 6px 18px rgba(0, 0, 0, .25);
  backdrop-filter: blur(8px);
}
.hdr--over-dark .hdr__cta:hover { background: rgba(23, 18, 12, .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(248, 243, 232, .1); }
.drawer__label { display: block; font: 500 10.5px/1 Inter, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(201, 154, 82, .92); margin-bottom: 6px; }
.drawer__link--sub { padding: 9px 0 9px 0; border-bottom: 0; }   /* same size as every other link */

/* ── 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, #f4f0e7 0%, #ebe5d8 100%);
  box-shadow: 0 -1px 0 rgba(21, 21, 19, .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(21, 21, 19, .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; } }

/* ── footer extras ──────────────────────────────────────────────────────── */
.ftr__tag { font: 500 9.5px/1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(248, 243, 232, .38); margin-left: 6px; }
.ftr__hours { margin-top: 14px; color: rgba(248, 243, 232, .4); }
.ftr__legal { display: flex; gap: 26px; flex-wrap: wrap; }

/* ── #schedule ──────────────────────────────────────────────────────────── */
.sched { scroll-margin-top: var(--head-h); }
/* every in-page target clears the fixed band — anchor links (/#services,
   #orbit, #map), the skip link, a form field scrolled into view on focus —
   instead of landing with its head under the bar. :where() keeps it below
   the block-specific values (.sched above, .trio-sec). */
:where(#main, main [id]) { scroll-margin-top: calc(var(--head-h) + 12px); }
.sched__embed { overflow: hidden; background: #f6f2ea; }
.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: #f3f0e8; }
@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, #e9e3d5 0%, #f0ebdf 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; }
@media (max-width: 680px) {
  .teaser__list .entry { grid-template-columns: 1fr; }
  .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%; }
.ftr__disc { margin-top: 8px; font: 400 12px/1.5 Inter, sans-serif; color: rgba(248, 243, 232, .28); max-width: 60ch; }
.ftr__cols { gap: clamp(36px, 4vw, 64px); }

/* ── 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; }

/* testimonials: name and role on their own lines */
.testi__who { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.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); }

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 2 — site clarity
   ══════════════════════════════════════════════════════════════════════════ */

/* ── section heads: the one plain line under a heading (every block) ───── */
.duet__sub { max-width: 52ch; }
.chapter__row > p { max-width: 44ch; }

/* ── the constellation window's head (label / heading / line above the stage) */
.win-sec__head { padding-top: clamp(56px, 7vw, 92px); padding-bottom: clamp(18px, 3vw, 36px); }
.win-sec__head .chapter { 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 — and 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. */
.trio-sec { scroll-margin-top: 24px; padding-top: clamp(56px, 6vw, 80px); }
/* a compact head: the composition, not the heading, is the section */
.trio-sec .chapter { margin-bottom: clamp(24px, 2.6vw, 32px); }
.trio-sec .chapter__rule { margin-bottom: clamp(20px, 2.4vw, 28px); }
.trio-sec .chapter h2 { font-size: clamp(1.9rem, 2.9vw, 2.75rem); line-height: 1.08; max-width: 32ch; }
.trio-sec .chapter__row > p { margin-bottom: 6px; }
.trio {
  --gap: 14px;                 /* the channels */
  --cut: 22px;                 /* 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(24px, 2.4vw, 36px);
  --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: #E9D6AF; --trio-top: #f0e2c4; }
.trio__panel--b { grid-column: 9 / 13; grid-row: 1 / 3; --fx:  72px; --trio-bg: #E7E0D0; --trio-top: #efe9db; }
.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: 52ch; }
.trio__panel--c .trio__body { color: rgba(248, 243, 232, .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(2, 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(248, 243, 232, .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); }
}
/* 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); }
  .trio-sec .chapter { margin-bottom: 22px; }
  .trio-sec .chapter__rule { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .trio__panel { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── section rules carry a label only (Round 2). The client-story modules
   (stories_cubes / stories_drift) still stamp their own index number into
   the rule; it is not shown anywhere. */
.chapter__rule > .chapter__no { display: none; }