/* Home · Our consultants: the stage, the rail, the plates (STORYBOARD-home-consultants.html, direction A).
   Loads after styles.css and docs-home.css and takes over their consultant rules. */

/* ── the rail: eleven centres on one line with real head counts; the pill slides; the active chip scrolls into view ── */
.chips { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px 24px; scroll-snap-type: x proximity; scroll-padding-inline: 2px;
  -webkit-mask: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent); mask: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent); }
[dir="rtl"] .chips { -webkit-mask: linear-gradient(-90deg, #000 0, #000 calc(100% - 56px), transparent); mask: linear-gradient(-90deg, #000 0, #000 calc(100% - 56px), transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 7px; }
.chip small { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .55; transition: opacity 250ms; }
.chip[aria-pressed="true"] small { opacity: .75; }
.chips .slide { top: 2px; }

/* ── the stage ── */
.feat { min-height: 620px; background: var(--tint); overflow: hidden; }
.feat .ph img { inset: 0; width: 100%; height: 100%; object-position: 68% 6%; transition: clip-path 640ms var(--ease-surface), scale 1600ms var(--ease-out); }
[dir="rtl"] .feat .ph img { object-position: 32% 6%; }
.js .feat[data-reveal]:not(.in) .ph img { scale: 1.08; }
.feat.lift .ph img { clip-path: inset(0 0 100% 0); }
/* the facade's hexes frame the top corner; they draw as the stage arrives */
.feat .hexbg { position: absolute; inset-inline-start: -46px; top: -46px; width: 320px; height: 320px; pointer-events: none; z-index: 0; }
[dir="rtl"] .feat .hexbg { transform: scaleX(-1); }
.feat .hexbg path { fill: none; stroke: rgba(44,107,176,.26); stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1200ms var(--ease-out); transition-delay: calc(300ms + var(--k) * 40ms); }
.feat.in .hexbg path { stroke-dashoffset: 0; }
.feat .txt { position: relative; z-index: 1; padding: 34px 36px 30px; padding-top: 170px; max-width: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23E8EBF0'/%3E%3Cstop offset='0.55' stop-color='%23E8EBF0'/%3E%3Cstop offset='1' stop-color='%23E8EBF0' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.feat h3 { font-size: clamp(34px, 3.8vw, 56px); letter-spacing: -.025em; margin: 10px 0 8px; }
[dir="rtl"] .feat h3 { letter-spacing: 0; }
.feat .role { font-size: 15px; max-width: 52ch; }
.feat blockquote { font-size: 20px; max-width: 44ch; }
.feat blockquote .w > span { transition-duration: 600ms; transition-delay: calc(var(--i) * 25ms + var(--wd, 0ms)); }
/* the filament: the dwell before the next consultant takes the stage, and a text pill to hold it */
.feat .fil { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--navy-3); }
[dir="rtl"] .feat .fil { letter-spacing: 0; font-size: 12.5px; }
.feat .fl-bar { flex: 1; max-width: 220px; height: 2px; border-radius: 2px; background: rgba(11,36,67,.14); position: relative; overflow: hidden; }
.feat .fl-bar b { position: absolute; inset: 0; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
[dir="rtl"] .feat .fl-bar b { transform-origin: 100% 50%; }
.feat .fl-pz { border: 1px solid var(--line); background: transparent; color: var(--navy); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; transition: transform 150ms var(--ease-out), border-color 250ms, background 250ms; }
[dir="rtl"] .feat .fl-pz { letter-spacing: 0; font-size: 12.5px; }
.feat .fl-pz:hover { border-color: var(--navy); }
.feat .fl-pz:active { transform: scale(.95); }
.feat.paused .fl-pz { background: var(--navy); color: #fff; border-color: var(--navy); }
.feat.paused .fl-bar { opacity: .4; }
@media (hover: none) { .feat .fil { margin-top: 18px; } }

/* ── the plates: portraits with depth ── */
.dcard { min-height: 291px; }
.dcard img { object-position: 50% 6%; transition: transform 700ms var(--ease-out), translate 160ms linear; }
.dcard.tilting img { translate: calc((50% - var(--gx, 50%)) * .08) calc((50% - var(--gy, 50%)) * .08); }
.dcard .gl { position: absolute; z-index: 3; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.85); border: 1px solid var(--line); display: grid; place-items: center; transition: background 300ms, transform 400ms var(--ease-out); }
.dcard .gl i { width: 18px; height: 18px; background: var(--navy); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; transition: background 300ms; }
.dcard:hover .gl { background: var(--navy); transform: translateY(-2px); }
.dcard:hover .gl i { background: #fff; }
.dcard.rim:hover { box-shadow: 0 24px 40px -24px rgba(7,26,51,.45); }
.grid4.undealt .dcard { opacity: 0; }
.fly.down { z-index: 59; }

/* ── phones ── */
@media (max-width: 680px) {
  .feat { min-height: 520px; }
  .feat .ph img { width: 100%; height: 100%; inset: 0; object-position: 50% 0; }
  .feat .txt { padding: 24px 22px 22px; padding-top: 150px; }
  .feat .hexbg { width: 220px; height: 220px; }
  .feat .fl-bar { max-width: none; }
  .dcard .gl { width: 30px; height: 30px; top: 10px; inset-inline-end: 10px; }
  .dcard .gl i { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .feat .fil { display: none; } .grid4.undealt .dcard { opacity: 1; } .dcard.tilting img { translate: none; } }
html.rm .feat .fil { display: none; } html.rm .grid4.undealt .dcard { opacity: 1; }