/* ==========================================================================
   USAIndiaCFO — v27 · Service-page hero: headline + 3D scene
   (/usacfo/, /indiacfo/, /familyoffice/ — site/svc_hero.py, js/svc-hero.js)

   Ivory ground, like every inner page (no chrome inversion). Left: the
   page's copy; right: an isometric scene that assembles on load and then
   idles — a slow breath (≤4px, transform only) and a pointer lean (≤5°).
   The scene shares its drawing classes (.ci-*) with stack-city.css, so they
   are repeated here: a page may load either file without the other.
   ========================================================================== */

.svch { --lx: 0; --ly: 0; position: relative; overflow: hidden;
  padding: calc(var(--head-h) + clamp(28px, 4vw, 56px)) 0 clamp(36px, 4.5vw, 64px); }
.svch::after {
  content: ""; position: absolute; z-index: 0; width: 780px; height: 780px; right: -220px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 162, 74, .14) 0%, rgba(216, 162, 74, .05) 46%, rgba(216, 162, 74, 0) 70%);
  pointer-events: none; }
.svch[data-accent="gold"]::after { background: radial-gradient(circle, rgba(216, 162, 74, .22) 0%, rgba(216, 162, 74, .07) 46%, rgba(216, 162, 74, 0) 70%); }
.svch__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; min-height: calc(88svh - var(--head-h) - clamp(28px, 4vw, 56px)); }
.svch__copy { max-width: 560px; }
.svch h1.display-lg { font-size: clamp(2.25rem, 4.2vw, 4.25rem); max-width: 16ch; }
.svch .eyebrow { margin-bottom: 22px; }
.svch__lede { margin-top: 24px; max-width: 46ch; }
.svch__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.svch__ghost { display: inline-flex; align-items: center; gap: 9px; min-height: 54px;
  font: 500 14px/1 Inter, sans-serif; color: var(--ink-muted); transition: color .3s var(--ease); }
.svch__ghost svg { transition: transform .3s var(--ease); }
.svch__ghost:hover { color: var(--bronze-deep); }
.svch__ghost:hover svg { transform: translateY(3px); }

/* the scene: perspective → lean → float → the drawing */
.svch__scene { position: relative; perspective: 1600px; }
.svch__lean { transform: rotateX(calc(var(--ly) * -4deg)) rotateY(calc(var(--lx) * 5deg));
  transform-style: preserve-3d; transition: transform .9s var(--ease); }
.svch__svg { display: block; width: 100%; height: auto; max-height: calc(88svh - var(--head-h) - 80px); }
@keyframes svch-breathe { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } }
.svch--idle .svch__float { animation: svch-breathe 7s ease-in-out infinite; }

@media (max-width: 940px) {
  .svch__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 24px; }
  .svch__copy { max-width: 620px; }
  .svch__scene { max-width: 520px; margin: 0 auto; width: 100%; }
  .svch__svg { max-height: 54svh; }
}
@media (max-width: 600px) {
  .svch__scene { max-width: 100%; }
  .svch__svg { max-height: 40svh; }
  .svch__acts .btn { width: 100%; }
  .svch__ghost { min-height: 40px; }
}

/* ── the drawing (same vocabulary as stack-city.css) ─────────────────── */
.ci-svg text { pointer-events: none; }
.ci-e { stroke: rgba(23, 18, 12, .55); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ci-plate { stroke: rgba(23, 18, 12, .4); }
.ci-inset { stroke: rgba(255, 255, 255, .6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ci-cast { stroke: none; }
.ci-w { stroke: rgba(23, 18, 12, .32); stroke-width: .8; vector-effect: non-scaling-stroke; }
.ci-i { stroke: #17120c; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ci-s { stroke: rgba(23, 18, 12, .45); stroke-width: 1.1; stroke-linecap: round; }
.ci-b { stroke: #a8762f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ci-b2 { stroke: #a8762f; stroke-width: 1.8; stroke-linecap: round; }
.ci-r { stroke: #782A37; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ci-b-dash { stroke: #a8762f; stroke-width: 2; stroke-dasharray: 1.5 3; }
.ci-b-dash-s { stroke: #a8762f; stroke-width: 1; stroke-dasharray: 2 3; }
.ci-dash { stroke: rgba(168, 118, 47, .85); stroke-width: 1.2; stroke-linecap: round; }
.ci-teal { stroke: #3f6f6a; stroke-width: 1.2; fill: rgba(63, 111, 106, .22); stroke-linejoin: round; }
.ci-dot { fill: #d8a24a; }
.ci-sdot { fill: rgba(23, 18, 12, .3); }
.ci-shadow { fill: rgba(104, 90, 66, .22); }
.ci-cap { font-family: Inter, sans-serif; font-size: 8.5px; font-weight: 500; letter-spacing: 2px; fill: #5d5850; }
.ci-cap--lg { font-size: 11px; letter-spacing: 3.2px; fill: #17120c; }
.ci-cap--b { fill: #a8762f; }
.ci-mk { font-family: Inter, sans-serif; font-size: 7px; font-weight: 600; letter-spacing: 1.4px; fill: #17120c; }
.ci-mk-r { font-family: Inter, sans-serif; font-size: 7px; font-weight: 600; letter-spacing: 1.6px; fill: #782A37; }
.ci-serif { font-family: Newsreader, Georgia, serif; font-weight: 300; fill: #17120c; }
.ci-land { stroke: rgba(23, 18, 12, .62); stroke-width: 1.2; stroke-linejoin: round; }
.ci-land-fill { fill: rgba(233, 214, 175, .55); }
.ci-ops, .ci-arc { stroke: #d8a24a; stroke-width: 1.8; stroke-linecap: round; }
.ci-pulse { fill: #d8a24a; }
[data-fx="draw"] { stroke-dasharray: 1 2; }
.ci-a[data-fx="pop"], .ci-piece, .ci-lift { transform-box: fill-box; transform-origin: 50% 100%; }
.ci-piece { pointer-events: bounding-box; }
.ci-lift { transition: transform .45s var(--ease); }
.ci-piece:hover .ci-lift { transform: translateY(-8px); }
.ci-piece:hover .ci-card { stroke: #a8762f; stroke-width: 1.6; }
.ci-piece:hover .ci-cap { fill: #a8762f; }
/* the gold accent: warmer paper on the cards and the plates */
.svch[data-accent="gold"] .ci-card[fill="#faf7f0"] { fill: #f6ecd6; }
.svch[data-accent="gold"] .ci-land-fill { fill: rgba(216, 162, 74, .38); }