/* ported from assets/css/stack-city.css by site/tools/port_kit.py (warm literals → clay.css tokens; every rule scoped to [data-kit] sections) */
/* ==========================================================================
   USAIndiaCFO — v27 · Services "rising city" (/indiacfo/)

   One isometric scene on a clay plate that builds itself as the reader scrolls
   a pinned 100svh stage (site/stack_city.py lays it out, assets/js/stack-city.js
   drives it). Same rules as clay.css: one light, top-left; casts +x +y; matte,
   no glow; everything that moves is transform / opacity / stroke-dashoffset.

   Three layouts share one DOM:
     .city--pin    (≥941px, ≥600px tall, motion allowed)  the pinned stage
     .city--stack  (narrower, shorter, or reduced motion) three stacked scenes,
                   one per phase, each above its text (the JS clones the scene)
     no JS         the finished city, the three texts stacked, nothing pinned
   ========================================================================== */

.city:where([data-kit="preview"], [data-kit="preview"] *) { --sh: 100svh; --lx: 0; --ly: 0; }
.city__track:where([data-kit="preview"], [data-kit="preview"] *) { position: relative; }
.city__stage:where([data-kit="preview"], [data-kit="preview"] *) { position: relative; }

/* ── section head: label → heading → one line ─────────────────────────── */
.city__head .chapter__rule:where([data-kit="preview"], [data-kit="preview"] *) { padding-bottom: 14px; margin-bottom: 22px; }
.city__head-row:where([data-kit="preview"], [data-kit="preview"] *) { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.city__head h2:where([data-kit="preview"], [data-kit="preview"] *) { max-width: 18ch; }
.city__sub:where([data-kit="preview"], [data-kit="preview"] *) { max-width: 34ch; margin-bottom: 8px; text-wrap: pretty; }

/* ── the split: copy left, scene right ────────────────────────────────── */
.city__grid:where([data-kit="preview"], [data-kit="preview"] *) { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(26px, 3.4vw, 44px); }

/* rail — 01 BUILD / 02 NURTURE / 03 GROW, the active one bold */
.city__rail:where([data-kit="preview"], [data-kit="preview"] *) { display: grid; gap: 0; margin-bottom: 20px; border-left: 1px solid var(--line); }
.city__rail-it:where([data-kit="preview"], [data-kit="preview"] *) { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 8px 0 8px 18px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 12px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
  transition: color .4s var(--ease); }
.city__rail-it:where([data-kit="preview"], [data-kit="preview"] *)::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px;
  background: var(--bronze-deep); opacity: 0; transition: opacity .4s var(--ease); }
.city__rail-it:hover:where([data-kit="preview"], [data-kit="preview"] *) { color: var(--ink-muted); }
.city__rail-it[aria-current="true"]:where([data-kit="preview"], [data-kit="preview"] *) { color: var(--ink); font-weight: 700; }
.city__rail-it[aria-current="true"]:where([data-kit="preview"], [data-kit="preview"] *)::before { opacity: 1; }
.city__rail-no:where([data-kit="preview"], [data-kit="preview"] *) { font-weight: 500; color: var(--bronze-deep); font-variant-numeric: tabular-nums; }
.city__rail-it:focus-visible:where([data-kit="preview"], [data-kit="preview"] *) { outline: 2px solid var(--bronze-bright); outline-offset: 2px; }

/* panels — the active phase's title, body, every bullet, the link */
.city__panels:where([data-kit="preview"], [data-kit="preview"] *) { display: grid; }
.city__panel:where([data-kit="preview"], [data-kit="preview"] *) { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0);
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s; }
.city__panel[data-on="true"]:where([data-kit="preview"], [data-kit="preview"] *) { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.city__title:where([data-kit="preview"], [data-kit="preview"] *) { font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.18; }
.city__phase:where([data-kit="preview"], [data-kit="preview"] *) { font: 500 .58em/1 Inter, sans-serif; letter-spacing: .24em; color: var(--bronze-deep); vertical-align: .22em; }
.city__dash:where([data-kit="preview"], [data-kit="preview"] *) { font-weight: 200; color: var(--ink-faint); }
.city__body:where([data-kit="preview"], [data-kit="preview"] *) { margin-top: 12px; font: 400 15px/1.62 Inter, sans-serif; color: var(--ink-muted); max-width: 46ch; }
.city__list:where([data-kit="preview"], [data-kit="preview"] *) { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.city__list li:where([data-kit="preview"], [data-kit="preview"] *) { position: relative; padding-left: 18px; font: 400 14.5px/1.45 Inter, sans-serif; color: var(--ink);
  cursor: default; opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .5s var(--ease) calc(.08s + var(--i, 0) * .045s), transform .6s var(--ease) calc(.08s + var(--i, 0) * .045s),
              color .3s var(--ease); }
.city__panel[data-on="true"] .city__list li:where([data-kit="preview"], [data-kit="preview"] *) { opacity: 1; transform: none; }
.city__list li:where([data-kit="preview"], [data-kit="preview"] *)::before { content: ""; position: absolute; left: 1px; top: 7px; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--bronze-deep); transition: background-color .3s var(--ease); }
.city__list li.is-hl:where([data-kit="preview"], [data-kit="preview"] *) { color: var(--bronze-deep); }
.city__list li.is-hl:where([data-kit="preview"], [data-kit="preview"] *)::before { background: var(--bronze-bright); }
.city[data-hl] .city__panel[data-on="true"] li[data-piece]:not(.is-hl):where([data-kit="preview"], [data-kit="preview"] *) { opacity: .45; }
.city__link:where([data-kit="preview"], [data-kit="preview"] *) { margin-top: 22px; display: inline-flex; }

/* scene column */
.city__scene:where([data-kit="preview"], [data-kit="preview"] *) { position: relative; perspective: 1600px; }
.city__lean:where([data-kit="preview"], [data-kit="preview"] *) { transform: rotateX(calc(var(--ly) * -4deg)) rotateY(calc(var(--lx) * 5deg));
  transform-style: preserve-3d; transition: transform .9s var(--ease); }
.ci-svg:where([data-kit="preview"], [data-kit="preview"] *) { display: block; width: 100%; height: auto; max-height: calc(var(--sh) - var(--head-h) - 236px); }
.city__caps:where([data-kit="preview"], [data-kit="preview"] *) { display: grid; margin-top: 8px; min-height: 2.6em; }
.city__cap:where([data-kit="preview"], [data-kit="preview"] *) { grid-area: 1 / 1; margin: 0; text-align: center; opacity: 0; transition: opacity .5s var(--ease); text-wrap: balance; }
.city__cap[data-on="true"]:where([data-kit="preview"], [data-kit="preview"] *) { opacity: 1; transition-delay: .1s; }

/* ── pin mode ─────────────────────────────────────────────────────────── */
.city--pin:where([data-kit="preview"], [data-kit="preview"] *) { padding: 0; }
.city--pin .city__track:where([data-kit="preview"], [data-kit="preview"] *) { height: calc(var(--sh) * 3.2); }
.city--pin .city__stage:where([data-kit="preview"], [data-kit="preview"] *) { position: sticky; top: 0; height: var(--sh); overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; padding: calc(var(--head-h) + 6px) 0 14px; }
.city--pin .city__head h2:where([data-kit="preview"], [data-kit="preview"] *) { font-size: clamp(1.75rem, 2.9vw, 2.75rem); }
.city--pin .city__stack:where([data-kit="preview"], [data-kit="preview"] *) { display: none; }
@media (max-height: 840px) {
  .city--pin .city__head .chapter__rule:where([data-kit="preview"], [data-kit="preview"] *) { padding-bottom: 10px; margin-bottom: 14px; }
  .city--pin .city__head h2:where([data-kit="preview"], [data-kit="preview"] *) { font-size: clamp(1.5rem, 2.4vw, 2.125rem); }
  .city--pin .city__grid:where([data-kit="preview"], [data-kit="preview"] *) { margin-top: 16px; }
  .city--pin .city__rail-it:where([data-kit="preview"], [data-kit="preview"] *) { padding: 6px 0 6px 16px; }
  .city--pin .city__body:where([data-kit="preview"], [data-kit="preview"] *) { margin-top: 8px; font-size: 14.5px; }
  .city--pin .city__list:where([data-kit="preview"], [data-kit="preview"] *) { margin-top: 12px; gap: 6px 16px; }
  .city--pin .city__list li:where([data-kit="preview"], [data-kit="preview"] *) { font-size: 14px; }
  .city--pin .city__link:where([data-kit="preview"], [data-kit="preview"] *) { margin-top: 14px; }
  .city--pin .ci-svg:where([data-kit="preview"], [data-kit="preview"] *) { max-height: calc(var(--sh) - var(--head-h) - 200px); }
}

/* ── stack mode: one scene per phase, above its text ──────────────────── */
.city__stack:where([data-kit="preview"], [data-kit="preview"] *) { display: none; }
.city--stack .city__stage:where([data-kit="preview"], [data-kit="preview"] *) { position: static; height: auto; padding: 0; }
.city--stack .city__grid:where([data-kit="preview"], [data-kit="preview"] *) { display: none; }
.city--stack .city__stack:where([data-kit="preview"], [data-kit="preview"] *) { display: block; }
.city__ph:where([data-kit="preview"], [data-kit="preview"] *) { margin-top: clamp(44px, 7vw, 72px); }
.city__ph-scene:where([data-kit="preview"], [data-kit="preview"] *) { width: 100%; max-width: min(100%, calc(72svh * 1.28)); aspect-ratio: 640 / 500; margin: 0 auto; }
.city__ph-scene .ci-svg:where([data-kit="preview"], [data-kit="preview"] *) { width: 100%; height: 100%; max-height: none; }
.city__ph .city__cap:where([data-kit="preview"], [data-kit="preview"] *) { text-align: left; margin-top: 14px; opacity: 1; }
.city__ph-panel:where([data-kit="preview"], [data-kit="preview"] *) { margin-top: 18px; }
.city__ph-panel .city__list li:where([data-kit="preview"], [data-kit="preview"] *) { opacity: 1; transform: none; }
.city__ph-panel .city__list:where([data-kit="preview"], [data-kit="preview"] *) { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
  .city__ph-scene:where([data-kit="preview"], [data-kit="preview"] *) { max-width: min(100%, calc(60svh * 1.28)); }
  .city__ph-panel .city__list:where([data-kit="preview"], [data-kit="preview"] *) { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .city__head-row:where([data-kit="preview"], [data-kit="preview"] *) { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── no JS: the finished city, the three texts stacked ────────────────── */
.city:not(.city--js) .city__rail:where([data-kit="preview"], [data-kit="preview"] *), .city:not(.city--js) .city__caps:where([data-kit="preview"], [data-kit="preview"] *), .city:not(.city--js) .city__stack:where([data-kit="preview"], [data-kit="preview"] *) { display: none; }
.city:not(.city--js) .city__panels:where([data-kit="preview"], [data-kit="preview"] *) { display: grid; gap: 40px; }
.city:not(.city--js) .city__panel:where([data-kit="preview"], [data-kit="preview"] *) { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
.city:not(.city--js) .city__panel .city__list li:where([data-kit="preview"], [data-kit="preview"] *) { opacity: 1; transform: none; }
.city:not(.city--js) .city__grid:where([data-kit="preview"], [data-kit="preview"] *) { align-items: start; }
.city:not(.city--js) .ci-svg:where([data-kit="preview"], [data-kit="preview"] *) { max-height: none; position: sticky; top: calc(var(--head-h) + 20px); }

/* ── the drawing ──────────────────────────────────────────────────────── */
.ci-svg text:where([data-kit="preview"], [data-kit="preview"] *) { pointer-events: none; }
.ci-e:where([data-kit="preview"], [data-kit="preview"] *) { stroke: rgba(var(--dark-rgb), .55); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ci-plate:where([data-kit="preview"], [data-kit="preview"] *) { stroke: rgba(var(--dark-rgb), .4); }
.ci-inset:where([data-kit="preview"], [data-kit="preview"] *) { stroke: rgba(255, 255, 255, .6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ci-cast:where([data-kit="preview"], [data-kit="preview"] *) { stroke: none; }
.ci-w:where([data-kit="preview"], [data-kit="preview"] *) { stroke: rgba(var(--dark-rgb), .32); stroke-width: .8; vector-effect: non-scaling-stroke; }
.ci-i:where([data-kit="preview"], [data-kit="preview"] *) { stroke: var(--dark); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ci-s:where([data-kit="preview"], [data-kit="preview"] *) { stroke: rgba(var(--dark-rgb), .45); stroke-width: 1.1; stroke-linecap: round; }
.ci-b:where([data-kit="preview"], [data-kit="preview"] *) { stroke: var(--bronze-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ci-b2:where([data-kit="preview"], [data-kit="preview"] *) { stroke: var(--bronze-deep); stroke-width: 1.8; stroke-linecap: round; }
.ci-r:where([data-kit="preview"], [data-kit="preview"] *) { stroke: #782A37; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ci-b-dash:where([data-kit="preview"], [data-kit="preview"] *) { stroke: var(--bronze-deep); stroke-width: 2; stroke-dasharray: 1.5 3; }
.ci-b-dash-s:where([data-kit="preview"], [data-kit="preview"] *) { stroke: var(--bronze-deep); stroke-width: 1; stroke-dasharray: 2 3; }
.ci-dash:where([data-kit="preview"], [data-kit="preview"] *) { stroke: rgba(var(--bronze-deep-rgb), .85); stroke-width: 1.2; stroke-linecap: round; }
.ci-teal:where([data-kit="preview"], [data-kit="preview"] *) { stroke: #3f6f6a; stroke-width: 1.2; fill: rgba(63, 111, 106, .22); stroke-linejoin: round; }
.ci-dot:where([data-kit="preview"], [data-kit="preview"] *) { fill: var(--bronze-bright); }
.ci-sdot:where([data-kit="preview"], [data-kit="preview"] *) { fill: rgba(var(--dark-rgb), .3); }
.ci-shadow:where([data-kit="preview"], [data-kit="preview"] *) { fill: rgba(var(--shade), .22); }
.ci-cap:where([data-kit="preview"], [data-kit="preview"] *) { font-family: Inter, sans-serif; font-size: 8.5px; font-weight: 500; letter-spacing: 2px; fill: var(--ink-muted); }
.ci-cap--lg:where([data-kit="preview"], [data-kit="preview"] *) { font-size: 11px; letter-spacing: 3.2px; fill: var(--dark); }
.ci-cap--b:where([data-kit="preview"], [data-kit="preview"] *) { fill: var(--bronze-deep); }
.ci-mk:where([data-kit="preview"], [data-kit="preview"] *) { font-family: Inter, sans-serif; font-size: 7px; font-weight: 600; letter-spacing: 1.4px; fill: var(--dark); }
.ci-mk-r:where([data-kit="preview"], [data-kit="preview"] *) { font-family: Inter, sans-serif; font-size: 7px; font-weight: 600; letter-spacing: 1.6px; fill: #782A37; }
.ci-serif:where([data-kit="preview"], [data-kit="preview"] *) { font-family: Newsreader, Georgia, serif; font-weight: 300; fill: var(--dark); }
.ci-land:where([data-kit="preview"], [data-kit="preview"] *) { stroke: rgba(var(--dark-rgb), .62); stroke-width: 1.2; stroke-linejoin: round; }
.ci-land-fill:where([data-kit="preview"], [data-kit="preview"] *) { fill: rgba(233, 214, 175, .55); }
.ci-ops:where([data-kit="preview"], [data-kit="preview"] *), .ci-arc:where([data-kit="preview"], [data-kit="preview"] *) { stroke: var(--bronze-bright); stroke-width: 1.8; stroke-linecap: round; }
.ci-pulse:where([data-kit="preview"], [data-kit="preview"] *) { fill: var(--bronze-bright); }
/* GROW — overseas expansion: the sea band, the corridor arc, the India / Overseas pair */
.ci-sea:where([data-kit="preview"], [data-kit="preview"] *) { stroke: none; }
.ci-swell:where([data-kit="preview"], [data-kit="preview"] *) { stroke: rgba(var(--ink-rgb), .24); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ci-corr:where([data-kit="preview"], [data-kit="preview"] *) { stroke: var(--bronze-bright); stroke-width: 4.2; stroke-linecap: round; fill: none; }
.ci-node:where([data-kit="preview"], [data-kit="preview"] *) { fill: var(--bronze-bright); stroke: var(--cream); stroke-width: 2; }
.ci-tick:where([data-kit="preview"], [data-kit="preview"] *) { stroke: var(--bronze-deep); stroke-width: 1.2; stroke-linecap: round; }
.ci-place:where([data-kit="preview"], [data-kit="preview"] *) { font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 3.6px; fill: var(--ink); }
@media (max-width: 600px) {
  /* phones: the scene draws at ~0.55 of its viewBox — the pair and the arc keep their weight */
  .ci-place:where([data-kit="preview"], [data-kit="preview"] *) { font-size: 19px; letter-spacing: 4.6px; }
  .ci-corr:where([data-kit="preview"], [data-kit="preview"] *) { stroke-width: 6.4; }
}
[data-fx="draw"]:where([data-kit="preview"], [data-kit="preview"] *) { stroke-dasharray: 1 2; }           /* offset written by the JS; 0 = drawn */
.ci-a[data-fx="pop"]:where([data-kit="preview"], [data-kit="preview"] *), .ci-piece:where([data-kit="preview"], [data-kit="preview"] *), .ci-lift:where([data-kit="preview"], [data-kit="preview"] *) { transform-box: fill-box; transform-origin: 50% 100%; }
.ci-a[data-o]:where([data-kit="preview"], [data-kit="preview"] *), [data-fx="draw"][data-o]:where([data-kit="preview"], [data-kit="preview"] *) { opacity: 0; }  /* left the scene by the end (no-JS state) */

/* bullet ↔ piece: hovering a bullet lifts its card; hovering a card lights its bullet */
.ci-piece:where([data-kit="preview"], [data-kit="preview"] *) { pointer-events: bounding-box; }
.ci-piece.is-off:where([data-kit="preview"], [data-kit="preview"] *) { pointer-events: none; }
.ci-lift:where([data-kit="preview"], [data-kit="preview"] *) { transition: transform .45s var(--ease), opacity .3s var(--ease); }
.ci-piece.is-hl .ci-lift:where([data-kit="preview"], [data-kit="preview"] *) { transform: translateY(-8px); }
.ci-piece.is-hl .ci-card:where([data-kit="preview"], [data-kit="preview"] *) { stroke: var(--bronze-deep); stroke-width: 1.6; }
.ci-piece.is-hl .ci-cap:where([data-kit="preview"], [data-kit="preview"] *) { fill: var(--bronze-deep); }
.city[data-hl] .ci-piece:not(.is-hl) .ci-lift:where([data-kit="preview"], [data-kit="preview"] *) { opacity: .42; }
@media (hover: hover) and (pointer: fine) { .ci-piece:where([data-kit="preview"], [data-kit="preview"] *) { cursor: default; } }