/* ==========================================================================
   USAIndiaCFO — v27 · Family Office "The family orbit" (stack variant: orbit)

   A pinned stage. Centre: a clay disc, the family. Around it one concentric
   orbit ring per phase, each carrying its services as clay satellites.
   Scroll rotates the rings (inner faster, opposite directions) and brings
   each phase into focus; the panel on the left shows that phase's title,
   body and full list. Between phases the whole orbit dollies — scales and
   tilts slightly under perspective — so the rings read as a gyroscope.

   Same light as clay.css: top-left, every cast shadow +x +y, matte, no glow.
   Geometry (ring radii, satellite positions, tilt) is written by
   stack-orbit.js as transforms only; `--os` is the scene scale the script
   fits so no satellite ever overlaps a label at the current viewport.

     ≥1100   panel | orbit, side by side, pinned
     760–1099 orbit above, panel below, pinned when it fits
     <760 / reduced motion / short tablets   static cards, not pinned
   ========================================================================== */

.orbit { --os: 1; overflow-x: clip; padding-bottom: 0; }
.orbit .orbit__head { margin-bottom: clamp(28px, 4vw, 52px); }
.orbit__head h2 { max-width: 16ch; margin-top: 14px; }

/* ── the stage ──────────────────────────────────────────────────────────── */
.orbit__track { position: relative; height: calc(var(--n, 2) * 130svh); }
.orbit__stage {
  position: sticky; top: 0; height: 100svh;
  padding: calc(var(--head-h) + 10px) 0 18px;
  box-sizing: border-box; outline: none;
}
.orbit__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--bronze-bright); }
.orbit__grid {
  height: 100%; display: grid; align-items: center;
  grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px);
}
/* the panel keeps the shell's left edge; the orbit runs out to the viewport's
   right edge so the rings get the room their labels need */
.orbit__grid.shell {
  max-width: none; width: auto; padding: 0 clamp(16px, 2vw, 36px) 0 0;
  margin: 0 0 0 max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
}

/* ── panel ──────────────────────────────────────────────────────────────── */
.orbit__panel { position: relative; min-width: 0; }
.orbit__phases { display: grid; }
.orbit__phase {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; transform: translate3d(0, 16px, 0); visibility: hidden; pointer-events: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s linear .55s;
}
.orbit__phase.is-on {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .6s var(--ease) .12s, transform .6s var(--ease) .12s, visibility 0s;
}
.orbit__meta { display: flex; align-items: center; gap: 12px; }
.orbit__swatch { width: 14px; height: 14px; border-radius: 4px; box-shadow: var(--clay-sm); }
.orbit__of { font: 500 12px/1 Inter, sans-serif; letter-spacing: .22em; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; }
.orbit__title { margin-top: 16px; max-width: 17ch; }
.orbit__body { margin-top: 12px; max-width: 44ch; }

.orbit__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; justify-items: start; }
.orbit__bul {
  appearance: none; -webkit-appearance: none; border: 0; background: none; margin: 0;
  position: relative; display: inline-block; max-width: 100%; text-align: left;
  padding: 6px 14px 6px 22px; border-radius: 10px; cursor: pointer;
  font: 400 14px/1.5 Inter, sans-serif; color: var(--ink-muted);
  transition: color .3s var(--ease), transform .4s var(--ease), background-color .3s var(--ease);
}
.orbit__bul::before {
  content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bronze); opacity: .75;
  transition: transform .4s var(--ease), background-color .3s var(--ease), opacity .3s;
}
.orbit__bul:hover, .orbit__bul.is-hi, .orbit__bul:focus-visible {
  color: var(--ink); transform: translate3d(4px, 0, 0); background: rgba(255, 255, 255, .42);
}
.orbit__bul:hover::before, .orbit__bul.is-hi::before, .orbit__bul:focus-visible::before {
  transform: scale(1.35); background: var(--bronze-bright); opacity: 1;
}
.orbit__bul:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 0; }
.orbit__link { display: inline-flex; margin-top: 20px; }

.orbit__nav { display: flex; align-items: center; gap: 6px; margin-top: 30px; }
.orbit__dot {
  appearance: none; -webkit-appearance: none; border: 0; margin: 0; cursor: pointer;
  min-width: 40px; height: 30px; padding: 0 11px; border-radius: var(--r-pill);
  background: linear-gradient(178deg, #e9e3d5 0%, #f0ebdf 100%); box-shadow: var(--clay-in);
  font: 500 11.5px/1 Inter, sans-serif; letter-spacing: .18em; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.orbit__dot.is-on {
  color: var(--bronze-deep); background: linear-gradient(178deg, #fbf8f2 0%, #f1ece1 100%);
  box-shadow: var(--clay-sm);
}
.orbit__dot:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 2px; }
.orbit__bar { position: relative; flex: 0 1 120px; height: 1px; margin-left: 10px; background: var(--line); }
.orbit__bar i { position: absolute; inset: 0; background: var(--bronze-deep);
  transform-origin: 0 50%; transform: scaleX(0); }
.orbit__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── scene ──────────────────────────────────────────────────────────────── */
.orbit__scene {
  position: relative; height: 100%; min-height: 0; min-width: 0;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.orbit__scene.is-drag { cursor: grabbing; }
.orbit__gyro {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: perspective(1400px) rotateX(4deg);
  will-change: transform;
}

/* a faint outermost sweep, as on the corridor diagram — depth, nothing on it */
.orbit__halo { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(21, 21, 19, .07); }

/* a ring: its box is the ellipse the satellites travel; the hairline and the
   bronze arc fill it, satellites are placed by the script */
.orbit__ring { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; }
.orbit__ring.is-focus { z-index: 2; }
.orbit__halo, .orbit__hair, .orbit__arc { pointer-events: none; }
.orbit__hair {
  position: absolute; inset: 0; border-radius: 50%; display: block;
  border: 1px solid rgba(21, 21, 19, .15);
  transition: border-color .7s var(--ease), opacity .7s var(--ease);
  will-change: transform;
}
.orbit__ring.is-focus .orbit__hair { border-color: rgba(21, 21, 19, .34); }
.orbit__arc {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  will-change: transform;
}
.orbit__arc ellipse {
  fill: none; stroke: var(--bronze-bright); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 0 1; stroke-dashoffset: 0; opacity: 0;
  transition: stroke-dasharray 1.6s var(--ease), opacity .5s var(--ease);
}
.orbit__ring.is-focus .orbit__arc ellipse { stroke-dasharray: .22 1; opacity: 1; }

.orbit__sat {
  appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0; background: none;
  position: absolute; left: 50%; top: 50%; cursor: pointer; outline: none;
  will-change: transform; pointer-events: auto;
}
.orbit__sat-in {
  display: inline-flex; align-items: center; gap: calc(7px * var(--os));
  padding: calc(7px * var(--os)) calc(13px * var(--os)) calc(7px * var(--os)) calc(12px * var(--os));
  border-radius: var(--r-pill);
  background: linear-gradient(178deg, #fbf8f2 0%, #f1ece1 100%);
  box-shadow: var(--clay-sm);
  font: 500 calc(12.5px * var(--os))/1.25 Inter, sans-serif; letter-spacing: .005em;
  color: var(--ink); white-space: nowrap;
  transform-origin: 50% 50%;
  transition: transform .7s var(--ease), opacity .7s var(--ease), box-shadow .4s var(--ease),
              background-color .4s var(--ease);
}
.orbit__g { display: inline-flex; width: calc(15px * var(--os)); height: calc(15px * var(--os));
  color: var(--bronze-deep); flex: 0 0 auto; }
.orbit__g svg { width: 100%; height: 100%; display: block; }
/* the receded ring: its satellites are compact pills — transform only */
.orbit__ring:not(.is-focus) .orbit__sat-in { transform: scale(.8); opacity: .56; box-shadow:
   1px 2px 3px rgba(var(--shade), .05), 3px 5px 9px rgba(var(--shade), .07),
   inset 0 -2px 4px rgba(var(--shade), .07), inset 0 1px 1px rgba(255, 255, 255, .5); }
.orbit__ring:not(.is-focus) .orbit__g { opacity: .55; }
.orbit__ring.is-focus .orbit__sat { z-index: 2; }
.orbit__sat.is-hi .orbit__sat-in, .orbit__sat:hover .orbit__sat-in {
  transform: translate3d(-1px, -4px, 0) scale(1.05); box-shadow: var(--clay-md);
  background: linear-gradient(178deg, #fdfbf6 0%, #f4efe4 100%);
  transition-duration: .35s;
}
.orbit__ring:not(.is-focus) .orbit__sat.is-hi .orbit__sat-in,
.orbit__ring:not(.is-focus) .orbit__sat:hover .orbit__sat-in { transform: translate3d(-1px, -3px, 0) scale(.9); opacity: .9; }
.orbit__sat.is-hi .orbit__lab, .orbit__sat:hover .orbit__lab { color: var(--bronze-deep); }
.orbit__lab { transition: color .3s var(--ease); }

/* the family */
.orbit__core {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: calc(118px * var(--os)); height: calc(118px * var(--os));
  transform: translate(-50%, -50%); border-radius: 50%;
  background: linear-gradient(170deg, #fcfaf5 0%, #efe9dc 100%);
  box-shadow: var(--clay-md);
}
.orbit__core::before {  /* the node's outer hairline, as on the corridor diagram */
  content: ""; position: absolute; inset: calc(-12px * var(--os)); border-radius: 50%;
  border: 1px solid rgba(21, 21, 19, .13);
}
.orbit__core::after {
  content: ""; position: absolute; inset: calc(7px * var(--os)); border-radius: 50%;
  border: 1px solid rgba(201, 154, 82, .55);
}
.orbit__mark { position: absolute; left: 50%; top: 12%; width: 58%; height: auto;
  transform: translateX(-50%); display: block; }
.orbit__core-cap {
  position: absolute; left: 0; right: 0; bottom: 17%; text-align: center;
  font: 500 calc(8.5px * var(--os))/1 Inter, sans-serif; letter-spacing: .24em;
  text-transform: uppercase; color: var(--bronze-deep);
}

/* ── static cards (mobile / reduced motion) ─────────────────────────────── */
.orbit__cards { display: none; gap: 22px; padding-bottom: clamp(64px, 8vw, 120px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.orbit__card { overflow: hidden; }
.orbit__card-art { padding: 10px 18px 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.orbit__card-svg { display: block; width: 100%; height: auto; max-height: 230px; }
.orbit__card-body { padding: 26px clamp(22px, 5vw, 36px) clamp(26px, 5vw, 36px); }
.orbit__card .card__list { margin-top: 18px; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .orbit__stage { padding-bottom: 14px; }
  .orbit__grid.shell { max-width: var(--shell); width: 100%; padding: 0 var(--gutter); margin: 0 auto; }
  .orbit__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch; gap: 10px; }
  .orbit__scene { order: -1; min-height: 300px; }
  .orbit__panel { align-self: end; padding-bottom: 6px; }
  .orbit__title { max-width: none; }
  .orbit__body { max-width: 62ch; }
  .orbit__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .orbit__bul { font-size: 13.5px; padding-top: 4px; padding-bottom: 4px; }
  .orbit__bul::before { top: 11px; }
  .orbit__nav { margin-top: 18px; }
}
/* the stage would not fit: use the cards */
@media (max-width: 759px), (max-width: 1099px) and (max-height: 760px),
       (min-width: 1100px) and (max-height: 620px) {
  .orbit__track { display: none; }
  .orbit__cards { display: grid; }
  .orbit .orbit__head { margin-bottom: clamp(28px, 5vw, 44px); }
}
@media (max-width: 940px) { .orbit__stage { padding-bottom: 76px; } }   /* clear the mobile bar */
@media (max-width: 759px) {
  .orbit__card-art { padding: 8px 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit__track { display: none; }
  .orbit__cards { display: grid; }
  .orbit .orbit__head { margin-bottom: clamp(28px, 5vw, 44px); }
}

.orbit__sub { max-width: 44ch; margin-top: 16px; }