/* ==========================================================================
   USAIndiaCFO — v27 · the services book (home "How we work", .bkh--home)

   One piece (site/stack_book.py): ported from the 8087 tree's /indiacfo/ hero
   (whose split-hero rules are kept below); on this site it is a SECTION — the
   section head, the closed USAIndiaCFO book centred under it, opening on
   scroll into BUILD · NURTURE · GROW (the .bkh--home block at the end).

   Modes (classes on .bkh, set by assets/js/stack-book.js):
     (none)          no JS: hero + poster, then all three chapters as stills
     .bkh--static    JS, but reduced motion / no WebGL / very short screen:
                     hero + poster, then ONE open spread with chapter tabs
     .bkh--3d        tall section, pinned stage; the poster shows until the
                     three.js book is ready, the stills cover a fast scroll
     .bkh--gl        the WebGL canvas is live: poster + stills hidden, the
                     page text is placed on the projected pages (px vars)
     .bkh--narrow    the right page's list sits under the book (phones)

   Colours are tokens only (clay.css), so html[data-theme] reaches all of it.
   ========================================================================== */

.bkh { position: relative; }
.bkh__stage { position: relative; }

/* ── the hero half ───────────────────────────────────────────────────────── */
.bkh__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding-top: calc(var(--head-h) + clamp(40px, 5vw, 72px));
  padding-bottom: clamp(40px, 5vw, 64px);
}
.bkh__copy { position: relative; z-index: 2; max-width: 600px; }
.bkh__h1 {
  margin-top: 20px;
  font-size: clamp(2.25rem, 3.9vw, 3.6rem); line-height: 1.06; font-weight: 200;
  max-width: 15ch;
}
.bkh__lede { margin-top: 22px; max-width: 46ch; }
.bkh__acts { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

.bkh__proof {
  list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0;
  max-width: 440px;
}
.bkh__proof li {
  display: block;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  font: 400 14.5px/1.45 Inter, sans-serif; color: var(--ink-muted);
}
.bkh__proof li:last-child { border-bottom: 1px solid var(--line-soft); }
.bkh__pv {
  font: 300 1.45em/1 Newsreader, Georgia, serif; letter-spacing: -.01em;
  color: var(--ink); margin-right: .18em;
}

/* the closed book's place. The poster is the 3D book's hero pose, projected. */
.bkh__slot {
  position: relative; z-index: 1;
  height: min(62svh, 600px);
  min-height: 220px;
}
.bkh__poster { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .5s var(--ease, ease); }
.bkh__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bkh__svg-shadow { fill: rgba(var(--shade), .30); }
.bkh__svg-back, .bkh__svg-front { fill: var(--dark); }
.bkh__svg-spine { fill: var(--dark-2); }
.bkh__svg-cover { fill: var(--dark-3); }
.bkh__svg-block { fill: var(--cream); }
.bkh__svg-lines line { stroke: rgba(var(--shade), .30); stroke-width: .8; }
.bkh__svg-frame { fill: none; stroke: var(--dark); stroke-width: 3; }
.bkh__svg-name { font: 300 128px Newsreader, Georgia, serif; fill: var(--bronze); }
.bkh__svg-eye { font: 500 25px Inter, Arial, sans-serif; letter-spacing: 9px; fill: var(--bronze); }
.bkh__svg-rule { fill: var(--bronze); }

/* ── the open book ───────────────────────────────────────────────────────── */
.bkh__open { position: relative; z-index: 3; }
.bkh__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.bkh__h2 { margin-top: 14px; font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.1; max-width: 22ch; }
.bkh__note { color: var(--ink-soft); margin-bottom: 4px; }

.bkh__area { position: relative; }
.bkh__chs { position: relative; }
.bkh__ch { position: relative; }
.bkh__book { position: relative; aspect-ratio: var(--still-ar); }
.bkh__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* a still whose src the JS has not set yet (and the no-JS copy's twin) draws nothing,
   not even the empty-image hairline */
.bkh__img:not([src]) { visibility: hidden; }
/* the stills' contact shadow runs out at the image's side edges: fade the outer 3%
   (the book itself starts at ~3.7%) so no faint vertical seam shows on the ground */
.bkh--home .bkh__img {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 3.2%, black 96.8%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 3.2%, black 96.8%, transparent);
}

.bkh__pg {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  container-type: size;
}
.bkh__pg--l { left: var(--pl-x); top: var(--pl-y); width: var(--pl-w); height: var(--pl-h); }
.bkh__pg--r { left: var(--pr-x); top: var(--pr-y); width: var(--pr-w); height: var(--pr-h); }
.bkh__pg-in { width: 70%; max-height: 100%; }
/* the 22% of each page next to the gutter stays clear for the floating object
   (book3d.js keeps every object + its contact shadow inside it) */
.bkh__pg--l .bkh__pg-in { margin: 0 22% 0 8%; }
.bkh__pg--r .bkh__pg-in { margin: 0 8% 0 22%; }

.bkh__no, .bkh__under {
  display: block;
  font: 500 clamp(8.5px, 2.5cqw, 11px)/1.3 Inter, sans-serif;
  letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-deep);
}
.bkh__name {
  margin-top: clamp(8px, 4cqh, 22px);
  font: 300 clamp(22px, 10.5cqw, 58px)/1 Newsreader, Georgia, serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.bkh__purpose {
  margin: clamp(8px, 4.5cqh, 24px) auto 0; max-width: 24ch;
  font: 400 clamp(11px, min(3.6cqw, 4.4cqh), 16px)/1.6 Inter, sans-serif; color: var(--ink-muted);
}
.bkh__list {
  list-style: none; padding: 0; margin: clamp(6px, 3cqh, 18px) 0 0;
  font: 400 clamp(11px, min(3.5cqw, 3.9cqh), 15.5px)/1.85 Inter, sans-serif; color: var(--ink);
}
.bkh__link {
  margin-top: clamp(6px, 2.6cqh, 16px);
  font-size: clamp(11px, min(3.2cqw, 3.6cqh), 14px);
}

.bkh__tabs {
  display: flex; justify-content: center; gap: clamp(12px, 3vw, 40px);
  padding: 18px var(--gutter) 0;
}
.bkh__tab {
  appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 10px 4px 9px;
  border-bottom: 1px solid transparent;
  font: 500 11.5px/1 Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .3s, border-color .3s;
}
.bkh__tab .chapter__no { font-size: 10.5px; }
.bkh__tab:hover { color: var(--ink); }
.bkh__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--bronze); }
.bkh__tab:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; border-radius: 4px; }
.bkh__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── no JS: the hero, then the three chapters one after another ─────────── */
.bkh:not(.bkh--js) .bkh__open { padding: 0 0 clamp(56px, 7vw, 96px); }
.bkh:not(.bkh--js) .bkh__area { max-width: 1120px; margin: 24px auto 0; padding: 0 var(--gutter); }
.bkh:not(.bkh--js) .bkh__ch + .bkh__ch { margin-top: 24px; }
.bkh:not(.bkh--js) .bkh__tabs { display: none; }

/* ── static: one spread, tabs switch it ──────────────────────────────────── */
.bkh--static .bkh__open { padding: 0 0 clamp(56px, 7vw, 96px); }
.bkh--static .bkh__area { max-width: 1120px; margin: 20px auto 0; padding: 0 var(--gutter); }
.bkh--static .bkh__ch { display: none; }
.bkh--static .bkh__ch.is-on { display: block; }

/* ── 3D: the pinned stage ────────────────────────────────────────────────── */
.bkh--3d { height: calc(100svh + var(--bkh-run, 430svh)); }
.bkh--3d .bkh__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.bkh--3d .bkh__grid {
  position: absolute; inset: 0; z-index: 2;
  padding-bottom: clamp(24px, 4svh, 48px);
  padding-top: calc(var(--head-h) + clamp(12px, 3svh, 40px));
  pointer-events: none;
}
.bkh--3d .bkh__copy { pointer-events: auto; opacity: var(--bkh-copy, 1); transform: translate3d(calc((1 - var(--bkh-copy, 1)) * -36px), 0, 0); will-change: opacity, transform; }
.bkh--3d .bkh__gl { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bkh__canvas { position: absolute; left: 0; top: 0; display: block; opacity: 0; transition: opacity .45s var(--ease, ease); }
.bkh--gl .bkh__canvas { opacity: 1; }
.bkh--3d .bkh__poster { opacity: var(--bkh-poster, 1); }
.bkh--gl .bkh__poster { opacity: 0; }
/* the poster leaves only once the canvas has faded in over it (no washed-out half-and-half) */
.bkh--home.bkh--gl .bkh__poster { transition: opacity .25s var(--ease, ease) .45s; }

.bkh--3d .bkh__open {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  padding: calc(var(--head-h) + clamp(0px, 1.2svh, 14px)) 0 clamp(14px, 2.6svh, 30px);
  pointer-events: none;
}
.bkh--3d .bkh__head, .bkh--3d .bkh__tabs { opacity: var(--bkh-ui, 0); transform: translate3d(0, calc((1 - var(--bkh-ui, 0)) * 10px), 0); }
.bkh--3d.is-open .bkh__tabs { pointer-events: auto; }
.bkh--3d .bkh__area { flex: 1 1 auto; min-height: 0; width: min(1120px, calc(100% - 2 * var(--gutter))); margin: clamp(6px, 1.4svh, 16px) auto 0; }
.bkh--3d .bkh__chs { position: absolute; inset: 0; container-type: size; display: grid; place-items: center; }
.bkh--3d .bkh__ch {
  grid-area: 1 / 1;
  width: min(100cqw, 100cqh * var(--still-arn, 1.4286));
  opacity: 0; visibility: hidden;
  transition: opacity .38s var(--ease, ease), visibility 0s linear .38s;
}
.bkh--3d .bkh__ch.is-shown { opacity: var(--bkh-text, 1); visibility: visible; transition: opacity .5s var(--ease, ease), visibility 0s; }
.bkh--3d.is-open .bkh__ch.is-on.is-shown { pointer-events: auto; }
/* before the canvas is live the still stands in for a fast scroll */
.bkh--3d:not(.bkh--gl) .bkh__img { opacity: var(--bkh-still, 0); }

/* the canvas is live: the pages are where book3d.js projects them */
.bkh--gl .bkh__chs { display: block; }
.bkh--gl .bkh__ch { position: absolute; inset: 0; width: auto; }
.bkh--gl .bkh__book { position: absolute; inset: 0; aspect-ratio: auto; }
.bkh--gl .bkh__img { display: none; }
.bkh--gl .bkh__pg--l { left: var(--gl-lx); top: var(--gl-ly); width: var(--gl-lw); height: var(--gl-lh); }
.bkh--gl .bkh__pg--r { left: var(--gl-rx); top: var(--gl-ry); width: var(--gl-rw); height: var(--gl-rh); }

/* ── phones: the list leaves the right page and sits under the book ─────── */
.bkh--narrow .bkh__pg--r,
.bkh--gl.bkh--narrow .bkh__pg--r {
  position: absolute; left: 0; width: 100%; height: auto;
  top: var(--gl-below, 100%);
  container-type: inline-size;
}
.bkh--narrow .bkh__pg--r .bkh__pg-in { width: 100%; margin: 0; }
.bkh--narrow .bkh__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0;
  font-size: 12.5px; line-height: 1.7;
}
.bkh--narrow .bkh__list li:not(:last-child)::after { content: "·"; margin: 0 .55em; color: var(--bronze); }
.bkh--narrow .bkh__under { font-size: 9.5px; }
.bkh--narrow .bkh__link { font-size: 12.5px; }

@media (max-width: 899px) {
  .bkh__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
  .bkh__h1 { font-size: clamp(2rem, 7.4vw, 3rem); max-width: 16ch; }
  .bkh__lede { margin-top: 16px; }
  .bkh__acts { margin-top: 20px; }
  .bkh__proof { margin-top: 20px; }
  .bkh__proof li { padding: 7px 0; font-size: 13.5px; }
  .bkh__slot { height: auto; aspect-ratio: 10 / 8; min-height: 0; max-height: 46svh; }
  .bkh--3d .bkh__grid { grid-template-rows: auto minmax(0, 1fr); }
  .bkh--3d .bkh__slot { height: 100%; aspect-ratio: auto; max-height: none; min-height: 150px; }
  .bkh__head { gap: 6px; }
  .bkh__note { display: none; }
}
@media (max-width: 939px) {
  /* the fixed mobile bar (60px + safe area) covers the stage's foot */
  .bkh--3d .bkh__grid { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 14px); }
  .bkh--3d .bkh__open { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 8px); }
}
@media (max-width: 640px) {
  .bkh__lede { font-size: 15px; line-height: 1.6; }
  .bkh__no-n { display: none; }
  .bkh__name { font-size: clamp(16px, 13cqw, 30px); letter-spacing: .04em; }
  .bkh--3d .bkh__area { width: calc(100% - 20px); }
}
@media (max-width: 899px) and (max-height: 760px) {
  .bkh--3d .bkh__lede { display: none; }
}
@media (max-width: 640px) {
  .bkh:not(.bkh--gl) .bkh__pg--r { position: relative; left: auto; top: auto; width: 100%; height: auto; margin-top: 14px; container-type: inline-size; }
  .bkh:not(.bkh--gl) .bkh__pg--r .bkh__pg-in { width: 100%; margin: 0; }
  .bkh:not(.bkh--gl) .bkh__list { display: flex; flex-wrap: wrap; justify-content: center; font-size: 13px; line-height: 1.7; }
  .bkh:not(.bkh--gl) .bkh__list li:not(:last-child)::after { content: "·"; margin: 0 .55em; color: var(--bronze); }
}

@media (prefers-reduced-motion: reduce) {
  .bkh__poster, .bkh__canvas, .bkh__ch, .bkh__tab { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE SECTION (.bkh--home — home "How we work"): no hero copy. The site's
   section head (label → heading → one line) stays at the top of the stage;
   the closed book sits centred in the room under it (.bkh__slot inside
   .bkh__area) and opens, in place, into the spread. Same modes as above.
   ══════════════════════════════════════════════════════════════════════════ */
.bkh--home { --bkh-run: 300svh; }

/* head: the section formula, block layout (the hero head above is a flex row) */
.bkh--home .bkh__head { display: block; position: relative; z-index: 2; }
.bkh--home .bkh__head .chapter__rule { padding-bottom: 14px; margin-bottom: 22px; }
.bkh--home .bkh__head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.bkh--home .bkh__h2 { margin: 0; max-width: 24ch; font-size: clamp(1.75rem, 2.9vw, 2.75rem); line-height: 1.08; }
.bkh--home .bkh__note { display: block; max-width: 34ch; margin: 0 0 6px; text-wrap: pretty; }
.bkh--home.bkh--3d .bkh__head { opacity: 1; transform: none; }
/* the head stays whole: book3d.js keeps the standing cover inside the area below it */

/* the closed book's room: a centred box in the area (3D only) */
.bkh--home .bkh__slot { position: absolute; inset: 3% 21%; z-index: 1; min-height: 0; height: auto; aspect-ratio: auto; max-height: none; }
.bkh--home:not(.bkh--3d) .bkh__slot { display: none; }
.bkh--home.bkh--3d .bkh__chs { z-index: 2; }

/* static + no JS: an ordinary section */
.bkh--home:not(.bkh--3d) { padding: clamp(88px, 11vw, 148px) 0 clamp(56px, 7vw, 96px); }
.bkh--home:not(.bkh--3d) .bkh__open { padding: 0; }
.bkh--home:not(.bkh--js) .bkh__area, .bkh--home.bkh--static .bkh__area { margin-top: clamp(28px, 3.4vw, 44px); }

/* the right page: the two country columns (USA · India) */
.bkh__cols { margin-top: clamp(6px, 3cqh, 18px); }
.bkh__cols .bkh__list { margin-top: 0; }
.bkh__cols--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(8px, 3cqw, 22px); align-items: start; }
.bkh__cap {
  display: block; margin-bottom: clamp(3px, 1.4cqh, 8px);
  font: 500 clamp(8px, 2.3cqw, 10.5px)/1.3 Inter, sans-serif;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint);
}
.bkh__more { margin-top: clamp(4px, 1.8cqh, 10px); font-size: clamp(10px, min(3cqw, 3.4cqh), 13px); }
.bkh__more .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bkh--home .bkh__pg--r .bkh__pg-in { width: 80%; margin: 0 4% 0 16%; }
.bkh--home .bkh__pg--l .bkh__pg-in { width: 74%; margin: 0 20% 0 6%; }
.bkh--home .bkh__list { font-size: clamp(10px, min(3cqw, 3.5cqh), 14px); line-height: 1.7; }
.bkh--home .bkh__purpose { max-width: 30ch; font-size: clamp(10.5px, min(3.3cqw, 3.9cqh), 15px); line-height: 1.58; }

/* phones: the chapter body (moved under the book by the JS) and the columns
   as two short wrapped rows */
.bkh--narrow .bkh__pg--r .bkh__purpose { margin: 0 auto 10px; max-width: 36ch; font-size: 13px; line-height: 1.6; }
.bkh--home.bkh--narrow .bkh__cols--2 { display: grid; grid-template-columns: 1fr; gap: 6px 0; }
.bkh--home.bkh--narrow .bkh__col { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .55em; }
.bkh--home.bkh--narrow .bkh__cap { display: inline; margin: 0; font-size: 9.5px; color: var(--bronze-deep); }
.bkh--home.bkh--narrow .bkh__cols .bkh__list { display: contents; }
.bkh--home.bkh--narrow .bkh__list li { font-size: 12.5px; line-height: 1.7; }
.bkh--home.bkh--narrow .bkh__list li::after { content: "·"; margin-left: .55em; color: var(--bronze); }
.bkh--home.bkh--narrow .bkh__more { margin: 0; font-size: 12.5px; }
@media (max-width: 640px) {
  .bkh--home:not(.bkh--gl) .bkh__cols--2 { display: grid; grid-template-columns: 1fr; gap: 6px 0; }
  .bkh--home:not(.bkh--gl) .bkh__col { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .55em; }
  .bkh--home:not(.bkh--gl) .bkh__cap { display: inline; margin: 0; font-size: 9.5px; color: var(--bronze-deep); }
  .bkh--home:not(.bkh--gl) .bkh__cols .bkh__list { display: contents; }
  .bkh--home:not(.bkh--gl) .bkh__list li { font-size: 13px; line-height: 1.7; }
  .bkh--home:not(.bkh--gl) .bkh__list li::after { content: "·"; margin-left: .55em; color: var(--bronze); }
  .bkh--home:not(.bkh--gl) .bkh__more { margin: 0; font-size: 13px; }
}
@media (max-width: 899px) {
  .bkh--home .bkh__slot { inset: 2% 6%; }
  .bkh--home .bkh__head .chapter__rule { padding-bottom: 10px; margin-bottom: 14px; }
  .bkh--home .bkh__head-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bkh--home .bkh__h2 { font-size: clamp(1.5rem, 5.2vw, 2.25rem); }
  .bkh--home.bkh--3d .bkh__note { display: none; }
}
@media (max-height: 840px) {
  .bkh--home.bkh--3d .bkh__head .chapter__rule { padding-bottom: 10px; margin-bottom: 14px; }
  .bkh--home.bkh--3d .bkh__h2 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); }
}