/* ==========================================================================
   Tech Source GDS — site stylesheet
   Implemented from "TechSource Website.dc.html" (Claude Design canvas).

   The canvas was 30 fixed 1440px artboards. This file keeps the design's
   type scale, colour, rhythm and component rules verbatim where possible,
   and adds the three things a real site needs that an artboard does not:
     1. a fluid gutter/container instead of hard-coded 56px on a 1440px page
     2. breakpoints for every multi-column grid
     3. base rules for .crumbs / .ins-card / .ins-meta, which the design
        used in markup but never styled

   Brand tokens: Tech Source Brand Guideline (palette p.6, type p.5).
   Nexa is licensed; Manrope is the substitute. Swap --font-heading /
   --font-body when the Nexa web font is licensed and loaded.
   ========================================================================== */

/* ---------- tokens ---------------------------------------------------- */
:root {
  --color-accent: #2484c6;
  --color-accent-100: #eaf2f9;
  --color-accent-200: #cfe1ee;
  --color-accent-300: #a8cbe0;
  --color-accent-500: #2484c6;
  --color-accent-600: #1268b3;
  --color-accent-700: #1268b3;
  --color-accent-800: #0b3f74;
  --color-accent-900: #001c54;
  --color-text: #040207;
  --color-bg: #ffffff;
  --color-surface: #f1f2f2;
  --color-divider: #e6e7e8;
  --color-hot: #ff6b1a;
  --color-hot-100: #fff1e8;
  --color-muted: #585858;

  --font-heading: 'Manrope', 'Nexa', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', 'Nexa', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* fluid page gutter — replaces the artboard's fixed 56px */
  --gut: clamp(20px, 4vw, 56px);
  --maxw: 1440px;
}

/* ---------- base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 15px/1.55 var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0 0 8px;
  text-wrap: balance;
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 12px; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent); text-underline-offset: 3px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-hot); outline-offset: 3px; }
::selection { background: rgba(36, 132, 198, 0.28); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-accent-900); color: #fff;
  padding: 12px 18px; font: 600 12px/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- buttons (from the Industry base, retuned to brand) -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border: 1px solid var(--color-divider); border-radius: 0;
  font: 500 13px/1 var(--font-body); letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer; background: transparent;
  color: var(--color-text); transition: background .18s, color .18s, border-color .18s;
}
.btn svg { display: block; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: rgba(4, 2, 7, 0.06); }
.btn-ghost { color: var(--color-accent); border-color: transparent; padding-inline: 6px; }
.btn-ghost:hover { background: rgba(36, 132, 198, 0.1); }

/* ---------- accents --------------------------------------------------- */
.hot-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-hot-100); color: var(--color-hot);
  padding: 6px 10px; border-radius: 2px;
  font: 600 10px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
}
.hot-tag::before { content: ""; width: 6px; height: 6px; background: var(--color-hot); border-radius: 50%; }

.eyebrow {
  font: 500 11px/1 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--color-hot); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--color-hot); }

.section-num { font: 600 11px/1 var(--font-mono); color: #8a8a8d; letter-spacing: 0.14em; }

/* breadcrumbs — used throughout the design, never styled there */
.crumbs {
  font: 500 11px/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a8a8d;
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--color-text); }
.crumbs em { font-style: normal; color: var(--color-hot); }

/* ---------- imagery --------------------------------------------------- */
/* .ph is the design's image slot. Where a real photograph exists it carries
   .has-img and an <img>; where the design called for a portrait of a named
   individual we have no verified likeness for, it keeps the brand gradient. */
.ph {
  position: relative; overflow: hidden; border-radius: 2px; border: none;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, #cfe1ee 0%, transparent 55%),
    linear-gradient(135deg, #2484c6 0%, #1268b3 55%, #001c54 100%);
  color: rgba(255, 255, 255, 0.85);
  font: 500 11px/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center;
}
.ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 90%, rgba(255, 255, 255, 0.18) 0%, transparent 40%);
}
.ph small { opacity: 0.75; padding: 0 12px; position: relative; z-index: 1; }

/* Slots the design reserved for a photograph we do not have — chiefly
   portraits of named individuals. A saturated blue block reads as a broken
   image at this size, so pending slots get a quiet brand surface with the
   mark as a watermark and the subject named underneath. */
.ph--pending {
  background: linear-gradient(160deg, #f4f6f8 0%, #e8edf2 100%);
  color: #7b8a9c;
  flex-direction: column; gap: 10px;
}
.ph--pending::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 46%; max-width: 120px; aspect-ratio: 1; transform: translate(-50%, -62%);
  background: url("../logo-mark.png") center/contain no-repeat;
  opacity: 0.14; pointer-events: none;
}
.ph--pending small {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1;
  opacity: 1; font-size: 10px; letter-spacing: 0.16em; color: #93a2b3;
}
.ph.has-img { background: var(--color-surface); }
.ph.has-img::after { content: none; }
.ph.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Scene slots hold generated consultancy graphics (see build/graphics.js).
   No panel: the visuals are drawn as ink on paper and sit directly on the
   page, so the slot has to shed the base `.ph` gradient and its highlight
   overlay. `contain` keeps one 16/10 artwork correct in slots that run from
   16/9 to 1/1 — the slack around it is simply page. */
.ph.has-graphic { background: none; }
.ph.has-graphic::after { content: none; }
.ph.has-graphic img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}

/* Portrait slots render a monogram rather than a stand-in photograph: the
   subject's initials on the brand navy. The full name is always adjacent in
   the layout — a caption, an <h3> or an attribution — so the tile itself
   carries only the initials, plus an aria-label for anyone who cannot see
   the pairing. Drop real portraits into IMAGES to replace them. */
.ph--mono {
  background:
    radial-gradient(circle at 28% 22%, rgba(36, 132, 198, 0.48) 0%, transparent 62%),
    linear-gradient(155deg, #001c54 0%, #0b3f74 62%, #10467f 100%);
  color: #fff;
}
.ph--mono::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 74%; max-width: 260px; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%;
  background: none; opacity: 1; z-index: 0;
}
.ph--mono::before {
  content: ""; position: absolute; inset: -40% -70%; z-index: 0;
  background: linear-gradient(102deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
  animation: mono-sheen 7.5s ease-in-out infinite;
}
.ph--mono span {
  position: relative; z-index: 2;
  font: 700 clamp(30px, 4.6vw, 60px)/1 var(--font-heading);
  letter-spacing: 0.04em; color: #fff;
}
.leader .ph--mono span { font-size: clamp(24px, 3.2vw, 40px); }
.lead-item .ph--mono span { font-size: clamp(32px, 4.4vw, 58px); }
.svc-quote .ph--mono span { font-size: clamp(40px, 5.6vw, 76px); }
/* the quote band is already navy, so this tile needs an edge and a lift to
   read as a tile rather than a hole in the section */
.svc-quote .ph--mono {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    radial-gradient(circle at 26% 20%, rgba(74, 168, 232, 0.42) 0%, transparent 62%),
    linear-gradient(155deg, #0b3f74 0%, #12518f 58%, #1c67ac 100%);
}
@keyframes mono-sheen {
  0%, 100% { transform: translateX(-26%); }
  50%      { transform: translateX(26%); }
}

/* ---------- header / nav --------------------------------------------- */
.ts-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gut);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
  position: sticky; top: 0; z-index: 60;
}
.ts-logo { display: flex; align-items: center; height: 46px; }
.ts-logo img { height: 100%; width: auto; }
.ts-menu { display: flex; gap: 34px; font: 500 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; }
.ts-menu a { color: var(--color-text); text-decoration: none; padding: 8px 0; position: relative; }
.ts-menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--color-hot); transform: scaleX(0); transform-origin: left; transition: transform .22s;
}
.ts-menu a:hover::after { transform: scaleX(1); }
.ts-menu a.active::after { transform: scaleX(1); height: 3px; }
.ts-nav .cta { display: flex; align-items: center; gap: 14px; font: 500 12px/1 var(--font-body); color: #5d5d60; }
.ts-nav .cta > span:first-child { white-space: nowrap; }
.ts-nav .cta .divider { width: 1px; height: 16px; background: var(--color-divider); }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-divider); cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--color-text); position: relative; transition: background .2s; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--color-text); transition: transform .24s;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- footer ---------------------------------------------------- */
.ts-foot {
  background: var(--color-accent-900); color: #e6e7e8;
  padding: 64px var(--gut) 28px; font: 400 13px/1.6 var(--font-body);
}
.ts-foot h6 { color: #8ba7c3; font-family: var(--font-heading); letter-spacing: 0.14em; margin-bottom: 14px; }
.ts-foot a { color: #dfe6ee; text-decoration: none; display: block; padding: 3px 0; opacity: 0.85; }
.ts-foot a:hover { opacity: 1; color: #fff; }
.ts-foot .grid { display: grid; grid-template-columns: 1.3fr 0.9fr 2.1fr 0.8fr 1.2fr; gap: 44px; }
.ts-foot .brand { margin-bottom: 8px; }
.ts-foot .brand img { height: 54px; width: auto; margin-bottom: 8px; }
.ts-foot .brand { min-height: 54px; }
.ts-foot .brand + p { color: #9fb2c7; font-size: 13px; }
.ts-foot .social { margin-top: 20px; display: flex; gap: 16px; font-size: 12px; }
.ts-foot .social a { display: inline-block; }
.ts-foot .legal {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: #7d95af; font-size: 12px;
}
.ts-foot .legal a { display: inline; color: #7d95af; }

/* ---------- layout utilities ------------------------------------------ */
.rule { height: 1px; background: var(--color-divider); width: 100%; }
.section { padding: 64px var(--gut); }
.section-tight { padding: 44px var(--gut); }

/* ---------- home hero -------------------------------------------------- */
.hero { position: relative; padding: 64px var(--gut) 56px; border-bottom: 1px solid var(--color-divider); }
.hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; }
.hero h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.05; letter-spacing: -0.02em; margin: 20px 0 28px; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--color-hot); }
.hero-sub { font-size: 17px; line-height: 1.5; color: #3a3a3d; max-width: 520px; margin-bottom: 36px; }
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-image { position: relative; height: 420px; }
.hero-image .ph { width: 100%; height: 100%; }
.hero-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--color-divider); margin-top: 64px; border: 1px solid var(--color-divider);
}
.hero-strip > div { background: var(--color-bg); padding: 22px 20px; }
.hero-strip .k { font: 600 10px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-hot); margin-bottom: 8px; }
.hero-strip .v { font: 600 20px/1.15 var(--font-heading); color: var(--color-text); }

/* ---------- capabilities ---------------------------------------------- */
.cap-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; width: 100%; }
.cap-head h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.015em; margin: 0; max-width: 1100px; text-wrap: pretty; }
.cap-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cap-row {
  display: flex; flex-direction: column; gap: 14px; padding: 28px 26px;
  border: 1px solid var(--color-divider); background: #fff; cursor: pointer;
  transition: border-color .18s, transform .18s; text-decoration: none; color: inherit; min-height: 0;
}
.cap-row:hover { border-color: var(--color-accent-900); transform: translateY(-2px); }
.cap-icon {
  width: 48px; height: 48px; color: var(--color-accent-800);
  display: flex; align-items: center; justify-content: center;
  background: #eef3fa; border-radius: 6px; margin-bottom: 6px;
}
.cap-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cap-num { font: 600 11px/1 var(--font-mono); color: var(--color-hot); letter-spacing: 0.12em; }
.cap-name { font: 600 22px/1.15 var(--font-heading); letter-spacing: -0.01em; color: var(--color-accent-900); }
.cap-desc { font-size: 13.5px; color: #4a4a4d; line-height: 1.55; flex: 1; }
.cap-cta { font: 500 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-700); display: flex; align-items: center; gap: 8px; margin-top: auto; }
.cap-cta svg { width: 14px; height: 14px; }
.cap-foot { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cap-foot span { font-size: 13px; color: var(--color-muted); }

/* ---------- why band --------------------------------------------------- */
.why { background: var(--color-accent-900); color: #e6ecf3; padding: 72px var(--gut); }
.why .eyebrow { color: #8ba7c3; }
.why .eyebrow::before { background: #8ba7c3; }
.why h2 { color: #fff; font-size: clamp(30px, 4vw, 52px); line-height: 1; letter-spacing: -0.015em; }
.why .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.why-item {
  padding: 32px 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.why-item:nth-child(3n) { border-right: none; }
.why-item .n { font: 600 11px/1 var(--font-mono); color: var(--color-hot); letter-spacing: 0.14em; margin-bottom: 14px; }
.why-item h4 { color: #fff; font-size: 22px; margin-bottom: 10px; }
.why-item p { color: #9fb2c7; font-size: 14px; line-height: 1.5; margin: 0; }

/* ---------- leadership ------------------------------------------------- */
.leaders-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.leader { position: relative; }
.leader .ph { aspect-ratio: 3/4; width: 100%; }
.leader .meta { padding-top: 14px; border-top: 1px solid var(--color-text); margin-top: 14px; }
.leader .name { font: 600 17px/1.15 var(--font-heading); letter-spacing: -0.005em; }
.leader .role { font-size: 12px; color: var(--color-muted); margin-top: 4px; letter-spacing: 0.02em; }
.row-end { margin-top: 40px; display: flex; justify-content: flex-end; }

.lead-hero { padding: 80px var(--gut) 40px; border-bottom: 1px solid var(--color-divider); }
.lead-hero h1 { font-size: clamp(40px, 6.2vw, 88px); line-height: 0.94; letter-spacing: -0.02em; margin: 16px 0 0; max-width: 1100px; color: var(--color-accent-900); }
.lead-grid {
  padding: 48px 0 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px;
  border-top: 1px solid var(--color-text); margin: 0 var(--gut);
}
.lead-item { display: flex; flex-direction: column; gap: 20px; }
.lead-item .ph { aspect-ratio: 4/5; width: 100%; }
.lead-item .n { font: 600 11px/1 var(--font-mono); color: var(--color-hot); letter-spacing: 0.12em; margin-bottom: 8px; display: block; }
.lead-item h3 { font-size: 26px; line-height: 1.05; letter-spacing: -0.012em; margin: 0 0 6px; color: var(--color-accent-900); }
.lead-item .role { font: 500 11px/1.2 var(--font-body); letter-spacing: 0.08em; color: var(--color-hot); text-transform: uppercase; margin-bottom: 14px; }
.lead-item p { font-size: 13.5px; line-height: 1.6; color: #3a3a3d; margin: 0; }
.lead-item .biolinks { margin-top: 14px; font: 500 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; display: flex; gap: 16px; }
.lead-item .biolinks a { color: var(--color-hot); text-decoration: none; }
.lead-item .biolinks a:hover { text-decoration: underline; }

/* ---------- insights --------------------------------------------------- */
.ins-feature {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
  padding-bottom: 56px; border-bottom: 1px solid var(--color-divider); margin-bottom: 56px;
}
.ins-feature .ph { aspect-ratio: 16/9; }
.ins-feature .body { align-self: end; }
.ins-feature h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.05; margin-bottom: 12px; letter-spacing: -0.01em; }
.ins-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

/* .ins-card / .ins-meta — used in the design's markup but never styled there */
.ins-card { display: block; color: inherit; text-decoration: none; }
.ins-card .ph { aspect-ratio: 16/10; width: 100%; margin-bottom: 16px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.ins-card:hover .ph { transform: translateY(-4px); }
.ins-card h4 { font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--color-accent-900); }
.ins-card:hover h4 { color: var(--color-accent-600); }
.ins-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
  font: 500 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8d;
}
.ins-meta em { font-style: normal; color: var(--color-hot); font-weight: 600; }

.ins-featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; padding: 56px var(--gut); border-bottom: 1px solid var(--color-divider); align-items: center; }
.ins-featured .ph { aspect-ratio: 16/10; }
.ins-featured h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1; letter-spacing: -0.015em; margin: 16px 0 20px; color: var(--color-accent-900); }
.ins-filter { padding: 24px var(--gut); border-bottom: 1px solid var(--color-divider); display: flex; gap: 8px; flex-wrap: wrap; }
.ins-grid { padding: 56px var(--gut); display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }

/* filter chips */
.tag {
  display: inline-flex; align-items: center; padding: 8px 14px;
  border: 1px solid var(--color-divider); border-radius: 0; background: #fff;
  font: 500 12px/1 var(--font-body); letter-spacing: 0.08em; color: var(--color-text);
  text-decoration: none; cursor: pointer; transition: background .18s, border-color .18s, color .18s;
}
.tag:hover { border-color: var(--color-accent-900); }
.tag.active, .tag[aria-current="true"] { background: var(--color-accent-900); border-color: var(--color-accent-900); color: #fff; }

/* ---------- article ---------------------------------------------------- */
.art { padding: 64px var(--gut); display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px; gap: 48px; }
.art .side { font-size: 12px; color: var(--color-muted); }
.art .side .k { font: 600 10px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8d; margin-bottom: 6px; }
.art .side > div { margin-bottom: 24px; }
.art .body { max-width: 720px; }
.art .body h1 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.02em; margin: 12px 0 20px; color: var(--color-accent-900); }
.art .body .lede { font-size: 20px; line-height: 1.5; color: #3a3a3d; margin-bottom: 32px; }
.art .body p { font-size: 16px; line-height: 1.7; color: #242426; }
.art .body h2 { font-size: 28px; margin: 36px 0 12px; color: var(--color-accent-900); }
.art .body .ph { aspect-ratio: 16/9; margin: 32px 0; }
.art .body blockquote { border-left: 3px solid var(--color-hot); padding: 8px 0 8px 20px; margin: 28px 0; font: 500 22px/1.35 var(--font-heading); color: var(--color-accent-900); }

/* ---------- page hero / editorial ------------------------------------- */
.pagehero { padding: 64px var(--gut) 48px; border-bottom: 1px solid var(--color-divider); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.pagehero h1 { font-size: clamp(36px, 5.4vw, 64px); letter-spacing: -0.02em; line-height: 1; margin: 16px 0 0; }
.pagehero .stamp { font: 600 11px/1 var(--font-mono); color: #8a8a8d; letter-spacing: 0.14em; }

.two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 88px; }
.two-col .lede h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.015em; margin-bottom: 24px; }
.two-col p { font-size: 15px; line-height: 1.65; color: #3a3a3d; }

.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); margin-top: 64px; }
.vm-grid > div { background: var(--color-bg); padding: 40px; }
.vm-grid h3 { font-size: 28px; margin-bottom: 16px; }
.vm-grid ul { margin: 0; padding: 0; list-style: none; }
.vm-grid li { padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; display: flex; gap: 12px; }
.vm-grid li::before { content: none; }
.vm-grid li:last-child { border-bottom: none; }

/* ---------- services --------------------------------------------------- */
.svc-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.svc-tile { background: var(--color-bg); padding: 36px 32px 32px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; color: inherit; text-decoration: none; transition: background .18s; }
.svc-tile:hover { background: var(--color-accent-100); }
.svc-tile .n { font: 600 12px/1 var(--font-mono); color: var(--color-hot); letter-spacing: 0.1em; margin-bottom: 24px; }
.svc-tile h3 { font-size: 26px; line-height: 1.1; letter-spacing: -0.005em; margin-bottom: 12px; color: var(--color-accent-900); }
.svc-tile p { font-size: 13px; color: #4a4a4d; line-height: 1.5; margin: 0; }
.svc-tile .arrow { margin-top: 24px; font: 500 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-hot); display: flex; align-items: center; gap: 8px; }
.svc-tile .sublist { list-style: none; padding: 0; margin: 16px 0 0; font-size: 13px; }
.svc-tile .sublist li { padding: 6px 0; border-top: 1px solid var(--color-divider); }

.svc-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; padding: 80px var(--gut); border-bottom: 1px solid var(--color-divider); align-items: center; }
.svc-hero h1 { font-size: clamp(38px, 5.6vw, 72px); line-height: 0.98; letter-spacing: -0.02em; margin: 20px 0 24px; color: var(--color-accent-900); }
.svc-hero p { font-size: 16px; line-height: 1.6; color: #3a3a3d; max-width: 560px; margin-bottom: 32px; }
.svc-hero .ph { height: 500px; width: 100%; }
.svc-hero .btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.svc-offer { padding: 88px var(--gut); display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; border-bottom: 1px solid var(--color-divider); }
.svc-offer h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.015em; color: var(--color-accent-900); }
.svc-offer ul { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--color-text); }
.svc-offer li { padding: 18px 0; border-bottom: 1px solid var(--color-divider); display: grid; grid-template-columns: 36px 1fr; gap: 16px; font-size: 15px; align-items: center; }
.svc-offer li .k { font: 600 11px/1 var(--font-mono); color: var(--color-hot); letter-spacing: 0.08em; }

.svc-diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-divider); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.svc-diff > div { background: var(--color-bg); padding: 56px 32px 40px; }
.svc-diff h4 { font-size: 24px; line-height: 1.1; margin-top: 16px; color: var(--color-accent-900); }
.svc-diff .num { font: 600 32px/1 var(--font-heading); color: var(--color-hot); }
.svc-diff p { font-size: 14px; color: #4a4a4d; margin-top: 12px; }

.svc-solutions { padding: 88px var(--gut); }
.svc-solutions h2 { margin-top: 16px; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.015em; }
.svc-sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); margin-top: 40px; }
.svc-sol-grid > div { background: var(--color-bg); padding: 28px 24px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.svc-sol-grid h5 { font-size: 18px; line-height: 1.15; margin: 0; color: var(--color-accent-900); }
.svc-sol-grid .k { font: 600 11px/1 var(--font-mono); color: var(--color-hot); letter-spacing: 0.1em; }

.svc-quote {
  display: grid; grid-template-columns: 1fr 1.8fr; gap: 64px; padding: 88px var(--gut);
  background: linear-gradient(135deg, #001c54 0%, #0b3f74 100%); color: #fff;
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); align-items: center;
}
.svc-quote .ph { aspect-ratio: 1; width: 100%; }
.svc-quote .eyebrow { color: var(--color-hot); }
.svc-quote .eyebrow::before { background: var(--color-hot); }
.svc-quote blockquote {
  font: 600 clamp(21px, 2.4vw, 30px)/1.25 var(--font-heading); letter-spacing: -0.01em;
  margin: 16px 0 24px; color: #fff; border-left: 3px solid var(--color-hot); padding-left: 20px;
}
.svc-quote .attrib { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 14px; font-size: 13px; color: #c9d5e2; }
.svc-quote .attrib b { font-family: var(--font-heading); font-size: 17px; display: block; margin-bottom: 2px; color: #fff; }

/* ---------- careers ---------------------------------------------------- */
.car-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding: 80px var(--gut); border-bottom: 1px solid var(--color-divider); align-items: end; }
.car-hero h1 { font-size: clamp(38px, 5.6vw, 72px); line-height: 0.98; letter-spacing: -0.02em; margin: 16px 0 24px; color: var(--color-accent-900); }
.car-hero ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 32px; flex-wrap: wrap; font-size: 13px; color: #3a3a3d; }
.car-hero ul li { display: flex; gap: 8px; align-items: center; }
.car-hero ul li::before { content: "+"; color: var(--color-hot); font-weight: 700; }
.car-cats { padding: 56px var(--gut); border-bottom: 1px solid var(--color-divider); }
.car-cats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); margin-top: 24px; }
.car-cats-grid > * { background: var(--color-bg); padding: 24px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; color: inherit; text-decoration: none; }
.car-cats-grid a:hover { background: var(--color-accent-100); }
.car-cats-grid h4 { font-size: 17px; margin: 0; color: var(--color-accent-900); }
.car-cats-grid .c { font: 600 22px/1 var(--font-heading); color: var(--color-hot); }
.car-jobs { padding: 56px var(--gut); }
.car-job {
  display: grid; grid-template-columns: 80px 2fr 1fr 1fr 1fr 180px; gap: 24px; align-items: center;
  padding: 24px 12px; border-bottom: 1px solid var(--color-divider);
  color: inherit; text-decoration: none; transition: background .18s;
}
.car-job:hover { background: var(--color-accent-100); }
.car-job:first-of-type { border-top: 1px solid var(--color-text); }
.car-job .n { font: 600 12px/1 var(--font-mono); color: var(--color-hot); }
.car-job h4 { font-size: 20px; margin: 0; color: var(--color-accent-900); }
.car-job .m { font-size: 12px; color: var(--color-muted); letter-spacing: 0.06em; }

/* ---------- academy ---------------------------------------------------- */
.aca-hero { padding: 96px var(--gut); border-bottom: 1px solid var(--color-divider); background: var(--color-accent-900); color: #fff; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
.aca-hero h1 { color: #fff; font-size: clamp(40px, 6.2vw, 88px); line-height: 0.94; letter-spacing: -0.02em; margin: 16px 0 0; }
.aca-hero p { color: #c9d5e2; font-size: 17px; line-height: 1.55; }
.aca-tracks { padding: 88px var(--gut); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.aca-tracks > div { background: var(--color-bg); padding: 32px 28px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.aca-tracks h4 { font-size: 22px; line-height: 1.15; margin: 0; color: var(--color-accent-900); }
.aca-tracks .k { font: 600 11px/1 var(--font-mono); color: var(--color-hot); letter-spacing: 0.1em; }
.aca-tracks .meta { font-size: 12px; color: var(--color-muted); letter-spacing: 0.04em; margin-top: 12px; }

/* ---------- contact ---------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1.1fr 1fr; gap: 88px; padding: 80px var(--gut); border-bottom: 1px solid var(--color-divider); }
.contact h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.02em; margin: 16px 0 32px; color: var(--color-accent-900); }
.contact-info { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; margin-top: 32px; }
.contact-info .item .k { font: 600 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8d; margin-bottom: 8px; }
.contact-info .item .v { font-family: var(--font-heading); font-size: 20px; line-height: 1.25; color: var(--color-accent-900); }
.contact-info .item .v a { color: inherit; text-decoration: none; }
.contact-info .item .v a:hover { color: var(--color-accent-600); }
.contact-form { border: 1px solid var(--color-divider); padding: 40px; background: var(--color-bg); }
.contact-form .row { margin-bottom: 20px; }
.contact-form label { font: 600 10px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); display: block; margin-bottom: 8px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: 12px 0; background: transparent; border: none;
  border-bottom: 1px solid var(--color-text); font-family: var(--font-body); font-size: 15px;
  color: var(--color-text); outline: none; border-radius: 0;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-bottom-color: var(--color-hot); }
.contact-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .send { margin-top: 16px; }
.form-note { margin-top: 16px; font-size: 12px; color: var(--color-muted); }

/* ---------- final CTA -------------------------------------------------- */
.finalcta { padding: 72px var(--gut); display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: end; border-top: 1px solid var(--color-text); }
.finalcta h2 { font-size: clamp(34px, 5.6vw, 72px); line-height: 0.95; letter-spacing: -0.02em; max-width: 900px; margin: 16px 0 0; }

/* ---------- utility / 404 / search ------------------------------------- */
.simple-body { padding: 64px var(--gut); max-width: 820px; }
.simple-body h2 { font-size: 26px; margin: 36px 0 12px; color: var(--color-accent-900); }
.simple-body p, .simple-body li { font-size: 15px; line-height: 1.7; color: #3a3a3d; }

/* ---------- gallery ---------------------------------------------------
   gallery.html is the one page with no artboard behind it: it gathers the
   office photography that used to sit in the scene slots.
   -------------------------------------------------------------------- */
.gal-hero { padding: 72px var(--gut) 44px; border-bottom: 1px solid var(--color-divider); }
.gal-hero .crumbs { margin-bottom: 18px; }
.gal-hero .eyebrow { display: inline-block; }
.gal-hero h1 {
  font-size: clamp(40px, 6.2vw, 88px); line-height: 0.94; letter-spacing: -0.02em;
  margin: 14px 0 0; color: var(--color-accent-900);
}
.gal-hero p { max-width: 640px; font-size: 16px; line-height: 1.6; color: #3a3a3d; margin: 20px 0 0; }

.gal-filter {
  padding: 22px var(--gut); border-bottom: 1px solid var(--color-divider);
  display: flex; gap: 8px; flex-wrap: wrap; background: var(--color-bg);
}
.gal-filter .tag span { margin-left: 9px; font-size: 10px; letter-spacing: 0.12em; color: var(--color-muted); }
.gal-filter .tag.is-on { background: var(--color-accent-900); border-color: var(--color-accent-900); color: #fff; }
.gal-filter .tag.is-on span { color: rgba(255, 255, 255, 0.62); }

.gal-grid { padding: 44px var(--gut) 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.gal-item {
  display: block; padding: 0; margin: 0; border: 0; background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.gal-item[hidden] { display: none; }
.gal-item .ph {
  display: block; width: 100%; aspect-ratio: 1;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gal-item:hover .ph, .gal-item:focus-visible .ph { transform: translateY(-6px); }
.gal-item .gal-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-text);
}
.gal-item .t { font: 600 16px/1.2 var(--font-heading); color: var(--color-accent-900); }
.gal-item .c { font: 600 10px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-hot); white-space: nowrap; }
.gal-item:hover .t { color: var(--color-accent-600); }
.gal-empty { padding: 0 var(--gut) 64px; margin: 0; color: var(--color-muted); font-size: 15px; }

/* lightbox — opened by site.js, and inert markup without it */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  /* `display:flex` here beats the UA rule for [hidden], so say it again:
     without this the closed overlay swallows every click on the page. */
  padding: clamp(56px, 7vw, 96px) clamp(16px, 6vw, 88px);
  background: rgba(0, 8, 26, 0.975);
  backdrop-filter: blur(6px);
}
.lightbox figure { margin: 0; max-width: min(1240px, 100%); }
.lightbox img {
  display: block; margin: 0 auto; max-width: 100%;
  max-height: calc(100vh - 210px); object-fit: contain;
}
.lightbox figcaption {
  display: flex; gap: 18px; align-items: baseline; justify-content: center;
  margin-top: 18px; color: #fff;
}
.lightbox figcaption .t { font: 600 18px/1.2 var(--font-heading); }
.lightbox figcaption .c { font: 600 10px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-hot); }
.lb-btn {
  position: absolute; width: 48px; height: 48px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font: 400 26px/1 var(--font-body); color: #fff;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.18s, border-color 0.18s;
}
.lb-btn:hover { background: var(--color-hot); border-color: var(--color-hot); }
.lb-close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.lb-prev { left: clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%); }
.lightbox[hidden] { display: none; }
body.lb-open { overflow: hidden; }

/* ---------- services: the capability wheel ----------------------------
   Eleven wedges around a hub, one detail panel beside it. Exactly one
   capability is open at a time — that is the whole point of the shape, and
   what keeps eleven charts from shouting over each other.
   -------------------------------------------------------------------- */
.svc-wheel-sec { padding: 72px var(--gut) 88px; }
.svc-wheel-sec .cap-head { margin-bottom: 8px; }
.svc-wheel-sec .cap-head .eyebrow { margin-left: 14px; }
.svc-wheel-sec .cap-head p { font-size: 16px; line-height: 1.6; color: #3a3a3d; margin: 0; max-width: 700px; }

.wheel-wrap {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.wheel-holder { min-width: 0; }
.wheel { display: block; width: 100%; height: auto; max-width: 660px; margin: 0 auto; }

.wheel-hub { fill: var(--color-bg); stroke: var(--color-divider); stroke-width: 1; }
.wheel .hub-n {
  font: 700 78px/1 var(--font-heading); letter-spacing: -0.03em;
  fill: var(--color-accent-900);
}
.wheel .hub-k {
  font: 600 12px/1 var(--font-body); letter-spacing: 0.24em;
  fill: var(--color-muted); text-transform: uppercase;
}

.wseg { cursor: pointer; text-decoration: none; outline: none; }
.wseg .sect {
  fill: var(--color-bg); stroke: var(--color-divider); stroke-width: 1;
  transition: fill 0.2s, stroke 0.2s;
}
.wseg .marker { fill: var(--color-hot); opacity: 0; transition: opacity 0.2s; }
.wseg .wnum {
  font: 600 21px/1 var(--font-mono); letter-spacing: 0.04em;
  fill: #9aa3ae; transition: fill 0.2s;
}
.wseg .wname {
  font: 600 11.5px/1 var(--font-heading); letter-spacing: 0.03em;
  fill: var(--color-muted); transition: fill 0.2s;
}
.wseg:hover .sect, .wseg:focus-visible .sect, .wseg.is-on .sect {
  fill: var(--color-accent-100); stroke: var(--color-accent-600);
}
.wseg:hover .marker, .wseg:focus-visible .marker, .wseg.is-on .marker { opacity: 1; }
.wseg:hover .wnum, .wseg:focus-visible .wnum, .wseg.is-on .wnum { fill: var(--color-accent-900); }
.wseg:hover .wname, .wseg:focus-visible .wname, .wseg.is-on .wname { fill: var(--color-accent-900); }
.wseg:focus-visible .sect { stroke-width: 2; }

/* the panel: one chart at a time, cross-faded */
.wheel-panel { min-width: 0; border-left: 1px solid var(--color-divider); padding-left: clamp(20px, 3vw, 44px); }
.wp-viz { position: relative; width: 100%; aspect-ratio: 16/10; }
.wp-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 0.28s ease;
}
.wp-img.is-on { opacity: 1; }
.wp-body { margin-top: 20px; }
.wp-body .n { font: 600 11px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--color-hot); display: block; }
.wp-body h3 {
  font-size: clamp(26px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -0.015em;
  margin: 12px 0 14px; color: var(--color-accent-900);
}
.wp-body p { font-size: 15px; line-height: 1.65; color: #3a3a3d; margin: 0 0 24px; max-width: 46ch; }

/* the same eleven links as plain text: the no-JS route, and the phone route */
.wheel-list { list-style: none; margin: 48px 0 0; padding: 0; display: none; }
.wheel-list li { border-bottom: 1px solid var(--color-divider); }
.wheel-list li:first-child { border-top: 1px solid var(--color-text); }
.wheel-list a {
  display: grid; grid-template-columns: 44px 1fr 18px; align-items: center; gap: 12px;
  padding: 18px 0; color: inherit; text-decoration: none;
}
.wheel-list .n { font: 600 11px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--color-hot); }
.wheel-list .h { font: 600 17px/1.2 var(--font-heading); color: var(--color-accent-900); }
.wheel-list svg { width: 18px; height: 18px; color: var(--color-accent-600); }
.wheel-list a:hover .h { color: var(--color-accent-600); }

.wheel-subs {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--color-divider);
  display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap;
}
.wheel-subs .k {
  font: 600 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-hot); white-space: nowrap;
}
.wheel-subs > div { display: flex; gap: 28px; flex-wrap: wrap; }
.wheel-subs a {
  font: 500 14px/1.2 var(--font-body); color: var(--color-accent-900);
  text-decoration: none; border-bottom: 1px solid var(--color-divider); padding-bottom: 3px;
}
.wheel-subs a:hover { color: var(--color-hot); border-color: var(--color-hot); }

/* ---------- insights: the deck ----------------------------------------
   One insight on screen at a time. The base rules are the no-JavaScript
   view — a plain vertical list of every slide — and everything under
   `.deck.is-live` is the slideshow, switched on by site.js. Slides stack
   into a single grid cell rather than a translated track, so the stage is
   as tall as the tallest slide and nothing jumps between them, and
   filtering can simply take a slide out of the flow.
   -------------------------------------------------------------------- */
.deck { padding: 64px var(--gut) 88px; }
.deck .cap-head { margin-bottom: 26px; }
.deck .cap-head .eyebrow { margin-left: 14px; }

.deck-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 44px; border-bottom: 1px solid var(--color-divider);
}
.deck-filter .tag span { margin-left: 9px; font-size: 10px; letter-spacing: 0.12em; color: var(--color-muted); }
.deck-filter .tag.is-on { background: var(--color-accent-900); border-color: var(--color-accent-900); color: #fff; }
.deck-filter .tag.is-on span { color: rgba(255, 255, 255, 0.62); }

.deck-track { display: flex; flex-direction: column; gap: 64px; }
.slide {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.slide[hidden] { display: none; }
.slide-viz { width: 100%; aspect-ratio: 16/10; }
.slide-body h3 {
  font-size: clamp(28px, 3.5vw, 46px); line-height: 1.03; letter-spacing: -0.018em;
  margin: 14px 0 16px; color: var(--color-accent-900); text-wrap: pretty;
}
.slide-body p { font-size: 16px; line-height: 1.65; color: #3a3a3d; margin: 0 0 28px; max-width: 52ch; }

/* the controls and the progress line only mean anything with script */
.deck-bar, .deck-controls { display: none; }

.deck.is-live .deck-track { display: grid; grid-template-columns: minmax(0, 1fr); }
.deck.is-live .slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.deck.is-live .slide.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.deck.is-live .deck-bar { display: block; }
.deck.is-live .deck-controls { display: flex; }

.deck-stage { position: relative; }
.deck-bar { height: 2px; margin-top: 38px; background: var(--color-divider); overflow: hidden; }
.deck-bar span { display: block; height: 100%; background: var(--color-hot); transform: scaleX(0); transform-origin: left; }
.deck-bar.run span { animation: deck-bar var(--deck-dur, 7s) linear forwards; }
@keyframes deck-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.deck-controls { align-items: center; justify-content: space-between; gap: 20px 28px; margin-top: 22px; flex-wrap: wrap; }
.deck-nav { display: flex; gap: 8px; }
.deck-btn {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font: 400 22px/1 var(--font-body); color: var(--color-accent-900);
  background: var(--color-bg); border: 1px solid var(--color-divider);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.deck-btn:hover { background: var(--color-accent-900); border-color: var(--color-accent-900); color: #fff; }
.deck-dots { display: flex; gap: 10px; align-items: center; }
.deck-dot {
  width: 34px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: var(--color-divider); transition: background 0.2s;
}
.deck-dot:hover { background: var(--color-accent-300); }
.deck-dot.is-on { background: var(--color-hot); }
.deck-dot[hidden] { display: none; }
.deck-meta { display: flex; align-items: center; gap: 22px; }
.deck-count { font: 600 12px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--color-muted); }
.deck-count b { color: var(--color-accent-900); font-weight: 700; }
.deck-play {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-600);
}
.deck-play:hover { color: var(--color-hot); }
.deck-empty { margin: 40px 0 0; color: var(--color-muted); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  /* the bar measures an autoplay that does not run */
  .deck-bar { display: none !important; }
}

/* ==========================================================================
   Responsive — the artboards were a fixed 1440px, so every grid needs one.
   ========================================================================== */
@media (min-width: 1041px) {
  .gal-filter { position: sticky; top: 81px; z-index: 40; }
}

@media (max-width: 1200px) {
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
  .cap-list, .svc-index, .ins-list, .ins-grid, .svc-diff, .why .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-item:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, 0.14); }
  .why-item:nth-child(2n) { border-right: none; }
  .leaders-row { grid-template-columns: repeat(3, 1fr); }
  .lead-grid { grid-template-columns: repeat(2, 1fr); }
  .aca-tracks, .svc-sol-grid, .car-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .ts-foot .grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .art { grid-template-columns: 160px minmax(0, 1fr); }
  .art .side.right { display: none; }
  .two-col { gap: 48px; }
  .contact { gap: 48px; }
  .car-job { grid-template-columns: 60px 2fr 1fr 1fr; }
  .car-job .m.hide-md, .car-job .job-cta { display: none; }
}

@media (max-width: 1040px) {
  .ts-nav { position: relative; flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; order: 3; }
  .ts-menu {
    order: 4; display: none; width: 100%; flex-direction: column; gap: 0;
    border-top: 1px solid var(--color-divider); margin-top: 16px; padding-top: 8px;
  }
  .ts-nav.open .ts-menu { display: flex; }
  .ts-menu a { padding: 14px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
  .ts-menu a::after { content: none; }
  .ts-menu a.active { color: var(--color-hot); }
  .ts-nav .cta { order: 2; }
  .ts-nav .cta > span:first-child, .ts-nav .cta .divider { display: none; }
}

@media (max-width: 900px) {
  .hero { padding: 56px var(--gut); }
  .hero-grid, .svc-hero, .svc-offer, .two-col, .contact, .ins-feature,
  .ins-featured, .car-hero, .aca-hero, .finalcta, .pagehero, .svc-quote { grid-template-columns: 1fr; gap: 40px; }
  .hero-image { height: 340px; }
  .svc-hero .ph { height: 320px; }
  .svc-quote .ph { max-width: 320px; }
  .finalcta { padding: 72px var(--gut); align-items: start; }
  .pagehero .stamp { order: -1; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
  .section { padding: 56px var(--gut); }
  .why, .svc-solutions, .aca-tracks { padding: 56px var(--gut); }
  .art { grid-template-columns: 1fr; gap: 32px; }
  .art .side { display: flex; flex-wrap: wrap; gap: 24px; }
  .art .side > div { margin-bottom: 0; }
  .lead-grid { padding-top: 40px; }
  .vm-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .ts-foot .grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .contact-form { padding: 24px; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .lightbox img { max-height: calc(100vh - 240px); }
  .slide { grid-template-columns: 1fr; gap: 28px; }
  .wheel-wrap { grid-template-columns: 1fr; gap: 40px; }
  .wheel-panel { border-left: 0; border-top: 1px solid var(--color-divider); padding: 32px 0 0; }
  .wheel { max-width: 520px; }
}

@media (max-width: 680px) {
  .cap-list, .svc-index, .ins-list, .ins-grid, .svc-diff, .why .why-grid,
  .leaders-row, .lead-grid, .aca-tracks, .svc-sol-grid, .car-cats-grid,
  .contact-info, .contact-form .two, .hero-strip { grid-template-columns: 1fr; }
  .why-item { border-right: none !important; padding: 24px 0; }
  .why .why-grid { margin-top: 40px; }
  .leaders-row { gap: 32px; }
  .leader .ph, .lead-item .ph { aspect-ratio: 4/3; }
  .svc-tile { min-height: 0; padding: 28px 24px; }
  .car-job { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .car-job .n { order: -1; }
  .vm-grid > div, .svc-diff > div { padding: 28px 24px; }
  .ts-foot .grid { grid-template-columns: 1fr; }
  .ts-foot { padding-top: 48px; }
  .lead-grid { margin: 0 var(--gut); }
  .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  /* on a phone a wedge is a small tap target and hovering does not exist,
     so the wheel becomes a diagram and the list does the navigating */
  .wheel-panel { display: none; }
  .wheel-list { display: block; }
  .svc-wheel-sec { padding: 48px var(--gut) 64px; }
  .deck { padding: 48px var(--gut) 64px; }
  .deck-controls { justify-content: flex-start; }
  .deck-dot { width: 22px; }
  .wheel { max-width: 420px; }
  .gal-item .t { font-size: 14px; }
  .gal-item .c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .ts-nav, .ts-foot, .finalcta, .skip-link { display: none; }
  body { background: #fff; }
}

/* the contact map panel — an outbound link, styled as the design's grid panel */
.map-link { text-decoration: none; cursor: pointer; transition: filter .2s; }
.map-link:hover { filter: brightness(0.97); }
.map-link small { color: var(--color-accent-700); opacity: 1; font-weight: 600; }
.ph.has-img.ph--portrait img { object-position: top; }

/* ---------- nav dropdowns ---------------------------------------------
   Services and Insights carry a second level. On a pointer device the
   panel opens on hover and on keyboard focus; the chevron button is what
   makes it work on touch, and it is the only control on the stacked
   mobile menu. `.ts-sub` is hidden with visibility rather than display so
   the links stay in the tab order only while the panel is open. */
.ts-menu .has-sub { position: relative; display: flex; align-items: center; gap: 4px; }
.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent;
  color: inherit; cursor: pointer;
}
.sub-toggle svg { width: 12px; height: 12px; transition: transform .22s; }
.has-sub.open > .sub-toggle svg { transform: rotate(180deg); }

.ts-sub {
  position: absolute; top: calc(100% + 18px); left: -18px; z-index: 70;
  display: grid; grid-auto-flow: column; gap: 0 36px;
  padding: 24px 28px; min-width: 240px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-top: 3px solid var(--color-hot);
  box-shadow: 0 18px 44px rgba(0, 28, 84, 0.13);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.has-sub:hover > .ts-sub,
.has-sub:focus-within > .ts-sub,
.has-sub.open > .ts-sub { opacity: 1; visibility: visible; transform: none; }
.ts-sub .sub-col { display: flex; flex-direction: column; min-width: 190px; }
.ts-sub h6 {
  font: 600 10px/1 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-hot); margin: 0 0 12px;
}
.ts-sub h6:not(:first-child) { margin-top: 22px; }
.ts-sub a {
  padding: 7px 0; font: 500 12px/1.3 var(--font-body);
  letter-spacing: 0.02em; text-transform: none; color: var(--color-text);
}
.ts-sub a::after { content: none; }
.ts-sub a:hover { color: var(--color-hot); }

/* ---------- home hero slider -------------------------------------------
   Without JavaScript every slide is laid out in the normal flow and the
   controls are hidden, so the page is a stack of four complete hero
   statements. `is-live` stacks them into one grid cell and shows the
   controls. */
#hero-slider { padding-bottom: 40px; }
.hero-track { display: block; }
.hero-slide + .hero-slide { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--color-divider); }
.hero-h { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.05; letter-spacing: -0.02em; margin: 20px 0 28px; font-weight: 600; }
.hero-h em { font-style: normal; color: var(--color-hot); }
.hero-eyebrow { margin-left: 14px; }
.hero-viz { width: 100%; height: 100%; }
.hero-controls, .hero-bar { display: none; }

#hero-slider.is-live .hero-track { display: grid; }
#hero-slider.is-live .hero-slide {
  grid-area: 1 / 1; margin: 0; padding: 0; border: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .5s, transform .5s, visibility .5s;
}
#hero-slider.is-live .hero-slide.is-on { opacity: 1; visibility: visible; transform: none; }
#hero-slider.is-live .hero-controls {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 36px;
}
#hero-slider.is-live .hero-bar { display: block; height: 2px; background: var(--color-divider); margin-top: 34px; }
.hero-bar { overflow: hidden; }
.hero-bar span { display: block; height: 100%; background: var(--color-hot); transform: scaleX(0); transform-origin: left; }
.hero-bar.run span { animation: deck-bar var(--deck-dur, 7s) linear forwards; }
.hero-nav { display: flex; gap: 8px; }
.hero-btn {
  width: 42px; height: 42px; padding: 0; font-size: 19px; line-height: 1;
  background: transparent; border: 1px solid var(--color-divider); color: var(--color-text); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.hero-btn:hover { background: var(--color-accent-900); border-color: var(--color-accent-900); color: #fff; }
.hero-dots { display: flex; gap: 10px; margin-right: auto; }
.hero-dot {
  width: 28px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: var(--color-divider); transition: background .2s, width .2s;
}
.hero-dot.is-on { background: var(--color-hot); width: 46px; }
.hero-play {
  background: transparent; border: 0; cursor: pointer; padding: 6px 0;
  font: 500 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: #5d5d60;
}
.hero-play:hover { color: var(--color-hot); }

/* ---------- footer: the full service list ------------------------------ */
.ts-foot .foot-cols { columns: 2; column-gap: 32px; }
.ts-foot .foot-cols a { break-inside: avoid; }
.ts-foot h6.sub { margin-top: 22px; }
.ts-foot h6.sub + .foot-cols { columns: 1; }
.ts-foot .foot-social { margin-top: 20px; display: flex; gap: 16px; font-size: 12px; flex-wrap: wrap; }
.ts-foot .foot-social a { display: inline-block; }

/* ---------- contact: the embedded map ---------------------------------- */
.map-embed { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--color-divider); background: #eef1f5; }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-open {
  display: inline-block; margin-top: 12px;
  font: 600 12px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-hot); text-decoration: none;
}
.map-open:hover { text-decoration: underline; }

/* ---------- insights: the news column ---------------------------------- */
.anchor { display: block; height: 0; scroll-margin-top: 96px; }
.news-sec { scroll-margin-top: 96px; }
.news-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.news-item { border-top: 3px solid var(--color-accent-900); padding-top: 22px; }
.news-item.is-note { border-top-color: var(--color-hot); }
.news-item .k {
  font: 600 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-hot);
}
.news-item h4 { margin: 14px 0 10px; font-size: 20px; line-height: 1.25; }
.news-item p { color: #3a3a3d; font-size: 14px; }
.news-item a {
  display: inline-block; margin-top: 14px; color: var(--color-accent-900);
  font: 600 13px/1 var(--font-body); text-decoration: none;
}
.news-item a:hover { color: var(--color-hot); }

@media (max-width: 1040px) {
  .ts-menu .has-sub { flex-wrap: wrap; justify-content: space-between; width: 100%; }
  .ts-menu .has-sub > a { flex: 1; }
  .sub-toggle { width: 44px; height: 44px; border-left: 1px solid var(--color-divider); }
  .ts-sub {
    position: static; width: 100%; order: 3;
    display: none; grid-auto-flow: row; gap: 0;
    min-width: 0; padding: 4px 0 14px 14px;
    border: 0; border-left: 2px solid var(--color-hot); box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
  }
  /* on the stacked menu the chevron is the only thing that opens a panel:
     hover must not, and the desktop hover rule only touches opacity and
     visibility, so `display` alone decides it here */
  .has-sub.open > .ts-sub { display: grid; }
  .ts-sub a { border-bottom: 0; padding: 9px 0; }
  .ts-sub h6:not(:first-child) { margin-top: 16px; }
  .ts-sub .sub-col + .sub-col { margin-top: 10px; }
}

@media (max-width: 900px) {
  .ts-foot .foot-cols { columns: 1; }
  .news-list { grid-template-columns: 1fr; }
  #hero-slider.is-live .hero-controls { gap: 14px; }
  .hero-dots { order: 3; width: 100%; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #hero-slider.is-live .hero-slide { transition: none; }
  .ts-sub { transition: none; }
  .hero-bar { display: none !important; }
}

/* ---------- home: "Meet Tech Source" ----------------------------------- */
.meet-body { max-width: 62ch; margin-left: auto; }
.meet-body p { color: #3a3a3d; font-size: 16px; line-height: 1.65; }
.meet-body p + p { margin-top: 16px; }
.why-lede { color: #9fb2c7; font-size: 16px; line-height: 1.6; margin-top: 20px; max-width: 68ch; }

@media (max-width: 900px) {
  .meet-body { margin-left: 0; }
}

/* footer: logo, about/contact, social — one row */
.ts-foot .grid { grid-template-columns: 1fr auto auto; align-items: center; }
.ts-foot .foot-links { display: flex; gap: 28px; }
.ts-foot .foot-social { display: flex; gap: 20px; }
@media (max-width: 767px) {
  .ts-foot .grid { grid-template-columns: 1fr; gap: 20px; }
}
/* about: vision & mission sits in its own section under company information */
.section-vm { border-top: 1px solid var(--color-divider); }

/* insights hub: blogs / news / media */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hub-card { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; border-top: 3px solid var(--color-accent); padding-top: 20px; }
.hub-card .ph { aspect-ratio: 16 / 10; }
.hub-card h3 { font-family: var(--font-heading); font-size: 28px; }
.hub-card p { color: var(--color-muted); }
.hub-go { color: var(--color-accent); font-weight: 600; margin-top: auto; }
.hub-card:hover h3 { color: var(--color-accent); }
.deck-soon { color: var(--color-muted); font-size: 14px; }
@media (max-width: 900px) { .hub-grid { grid-template-columns: 1fr; } }

/* hero: named tabs instead of bare dots, so each slide's purpose is plain */
.hero-tabs-k { font: 600 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8d; }
.hero-dots { flex-wrap: wrap; gap: 8px; }
.hero-dot {
  width: auto; height: auto; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--color-divider); background: transparent;
  font: 600 13px/1 var(--font-body); color: var(--color-text);
}
.hero-dot:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hero-dot.is-on { width: auto; background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.meet-go { margin-top: 24px; display: inline-flex; }

/* ==========================================================================
   Capability visuals (light) (build/constellations.js)
     .orbit-sec — home: eleven capabilities on an orbit around a hub
     .cs-sec    — services: icon constellation + detail card
   ========================================================================== */
.orbit-sec, .cs-sec {
  --band-ink: var(--color-accent-900); --band-soft: #4a4a4d; --band-dim: #7b8ba0;
  --band-blue: var(--color-accent); --band-hot: var(--color-hot); --band-line: rgba(36, 132, 198, 0.35);
  position: relative; overflow: hidden; color: var(--band-ink);
  background:
    radial-gradient(ellipse 55% 50% at 50% 58%, rgba(36, 132, 198, 0.08), transparent 70%),
    var(--color-bg);
  padding: 88px var(--gut) 80px;
}
.orbit-head, .cs-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 1100px; }
.orbit-head .eyebrow, .cs-head .eyebrow { margin-left: 14px; }
.orbit-sec .section-num, .cs-sec .section-num { color: var(--band-dim); }
.orbit-head h2, .cs-head h2 {
  color: var(--color-text); margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance;
}
.orbit-head h2 em, .cs-head h2 em { font-style: normal; color: var(--band-blue); }
.orbit-head p, .cs-head p { margin: 0; max-width: 680px; font-size: 16px; line-height: 1.6; color: var(--band-soft); }

/* ---------- home orbit ------------------------------------------------- */
.orbit { position: relative; width: 100%; max-width: 1120px; margin: 28px auto 0; aspect-ratio: 1200 / 860; }
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ob-ring { fill: none; stroke: var(--band-line); stroke-width: 1.3; stroke-dasharray: 2 8; stroke-linecap: round; }
.ob-halo { fill: none; stroke: rgba(36, 132, 198, 0.18); stroke-width: 1.2; }
.ob-hub { fill: url(#ob-hub-g); stroke: var(--color-accent-200); stroke-width: 1.2; filter: drop-shadow(0 12px 28px rgba(0, 28, 84, 0.12)); }
.ob-hub-t { font: 700 30px/1 var(--font-heading); fill: var(--color-accent-900); letter-spacing: -0.01em; }
.ob-hub-k { font: 600 12.5px/1 var(--font-mono); fill: var(--band-dim); letter-spacing: 0.26em; }
.ob-line { fill: none; stroke: rgba(36, 132, 198, 0.32); stroke-width: 1.6; transition: stroke 0.3s; }
.ob-flow {
  fill: none; stroke: var(--color-hot); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(.6, 0, .2, 1);
  filter: drop-shadow(0 0 4px rgba(255, 107, 26, 0.35));
}
.ob-flow.is-on { stroke-dashoffset: 0; }
.ob-line.is-on { stroke: rgba(255, 107, 26, 0.25); }
.ob-dot { fill: var(--band-blue); transform-box: fill-box; transform-origin: center; transition: fill 0.3s, transform 0.3s; }
.ob-dot.is-on { fill: var(--color-hot); transform: scale(1.5); }

.orbit-nodes { position: absolute; inset: 0; }
.ob-node {
  position: absolute; width: max-content; max-width: 10.5em;
  font: 700 clamp(14px, 1.95vw, 25px)/1.12 var(--font-heading); letter-spacing: -0.005em;
  text-decoration: none; transition: color 0.25s, text-shadow 0.25s, opacity 0.25s;
}
.ob-node sup { font: 500 0.46em/1 var(--font-mono); color: var(--band-dim); letter-spacing: 0.08em; margin-right: 0.45em; vertical-align: 0.9em; }
.ob-node.ob-r { transform: translate(16px, -50%); text-align: left; }
.ob-node.ob-l { transform: translate(calc(-100% - 16px), -50%); text-align: right; }
.ob-node.ob-t { transform: translate(-50%, calc(-100% - 12px)); text-align: center; }
.ob-node.ob-b { transform: translate(-50%, 12px); text-align: center; }
.ob-node.ob-l span, .ob-node.ob-r span { display: inline; }
.tone-white { color: var(--color-accent-900); }
.tone-blue { color: var(--band-blue); }
.tone-hot { color: var(--band-hot); }
.ob-node:hover, .ob-node:focus-visible, .ob-node.is-on { text-shadow: 0 0 16px rgba(36, 132, 198, 0.25); }
.ob-node.is-on sup, .ob-node:hover sup { color: var(--color-hot); }
.ob-node:focus-visible { outline: 2px solid var(--band-blue); outline-offset: 6px; border-radius: 4px; }

.orbit-foot {
  margin: 36px auto 0; max-width: 1120px; padding-top: 26px; border-top: 1px solid var(--color-divider);
  display: flex; gap: 24px 40px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.orbit-cap { margin: 0; flex: 1 1 420px; font-size: 15px; line-height: 1.6; color: var(--band-soft); min-height: 3.2em; }
.orbit-cap .n { font: 600 11px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--color-hot); margin-right: 6px; }
.orbit-cap strong { color: var(--color-accent-900); font-weight: 600; margin-right: 6px; }
.orbit-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.orbit-ctas svg, .cs-card-go svg { width: 15px; height: 15px; }
.btn-onDark { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.btn-onDark:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }

/* ---------- services constellation ------------------------------------- */
.cs-wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 44px;
}
.cs-stage { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1; margin: 0 auto 48px; }
.cs-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cs-glow { fill: url(#cs-glow-g); opacity: 0.6; }
.cs-ring { fill: none; stroke: rgba(36, 132, 198, 0.22); stroke-width: 1.2; }
.cs-ring-2 { stroke: rgba(36, 132, 198, 0.35); }
.cs-spoke { stroke-width: 1.3; transition: stroke 0.3s, stroke-width 0.3s; }
.cs-spoke.s-blue { stroke: rgba(36, 132, 198, 0.32); }
.cs-spoke.s-hot { stroke: rgba(255, 107, 26, 0.35); }
.cs-spoke.is-on { stroke-width: 2.4; }
.cs-spoke.s-blue.is-on { stroke: var(--color-accent); }
.cs-spoke.s-hot.is-on { stroke: var(--color-hot); }
.cs-mid.s-blue { fill: var(--color-accent-300); }
.cs-mid.s-hot { fill: #ffb48a; }
.cs-core { fill: url(#cs-core-g); filter: drop-shadow(0 0 16px rgba(36, 132, 198, 0.55)); transform-box: fill-box; transform-origin: center; animation: cs-pulse 3.6s ease-in-out infinite; }
.cs-core-t { font: 600 12px/1 var(--font-mono); fill: var(--band-dim); letter-spacing: 0.3em; }
@keyframes cs-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.cs-node {
  position: absolute; width: 12.5%; aspect-ratio: 1; transform: translate(-50%, -50%);
  text-decoration: none; color: var(--band-ink); z-index: 1;
}
.cs-disc {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f3f7fb 75%);
  border: 1px solid var(--color-accent-200);
  box-shadow: 0 10px 24px rgba(0, 28, 84, 0.08);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.cs-disc > svg { width: 34%; height: 34%; }
.ic-blue { color: var(--band-blue); }
.ic-hot { color: var(--band-hot); }
.cs-badge {
  position: absolute; top: -6%; right: -6%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 1px solid var(--color-accent-200);
  font: 500 clamp(8px, 0.8vw, 10.5px)/1 var(--font-mono); color: var(--band-dim);
}
.cs-label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px;
  width: max-content; white-space: nowrap; text-align: center;
  font: 600 clamp(11px, 1.15vw, 15px)/1.25 var(--font-heading); color: var(--color-accent-900); text-shadow: 0 0 6px #fff, 0 0 10px #fff;
}
.cs-node.is-left .cs-badge { right: auto; left: -6%; }
.cs-label.is-2 { white-space: normal; max-width: 140px; }
.cs-node:hover .cs-disc, .cs-node:focus-visible .cs-disc, .cs-node.is-on .cs-disc {
  transform: scale(1.1); border-color: var(--band-blue);
  box-shadow: 0 0 0 6px rgba(36, 132, 198, 0.12), 0 12px 30px rgba(36, 132, 198, 0.3);
}
.cs-node.is-on .cs-badge { border-color: var(--band-blue); background: var(--color-accent); color: #fff; }
.cs-node.is-on .cs-label { color: var(--color-accent); }
.cs-node:focus-visible { outline: none; }
.cs-node:focus-visible .cs-disc { outline: 2px solid var(--color-accent-900); outline-offset: 4px; }

.cs-panel { min-width: 0; display: grid; }
.cs-card {
  grid-area: 1 / 1; position: relative; color: var(--band-soft);
  padding: clamp(28px, 3.4vw, 52px);
  background: linear-gradient(170deg, #ffffff, #f5f9fd);
  border: 1px solid var(--color-accent-200); border-left: 3px solid var(--color-accent);
  border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 28, 84, 0.08);
}
.cs-card[hidden] { display: none; }
.cs-card.is-on { animation: cs-in 0.35s ease both; }
@keyframes cs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cs-card-top { display: flex; gap: 16px; align-items: center; }
.cs-card-ic { width: 54px; height: 54px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--color-accent-100); }
.cs-card-ic svg { width: 26px; height: 26px; }
.cs-card-n { display: block; font: 500 14px/1 var(--font-mono); color: var(--band-dim); letter-spacing: 0.06em; margin-bottom: 8px; }
.cs-card-name { display: block; font: 600 18px/1.2 var(--font-heading); color: var(--band-blue); }
.cs-card h3 { color: var(--color-accent-900); margin: 28px 0 14px; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; letter-spacing: -0.01em; }
.cs-card p { margin: 0 0 22px; font-size: 16.5px; line-height: 1.65; }
.cs-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.4; color: var(--band-ink); }
.cs-card li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--band-blue); }
.cs-card-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding-bottom: 4px;
  font: 600 14px/1.2 var(--font-body); color: var(--color-accent-900); text-decoration: none; border-bottom: 1px solid var(--color-accent-300);
}
.cs-card-go:hover { color: var(--band-hot); border-color: var(--band-hot); }

.cs-subs { max-width: none; }
.cs-subs a:hover { color: var(--band-hot); border-color: var(--band-hot); }

@media (max-width: 1040px) {
  .cs-wrap { grid-template-columns: 1fr; gap: 12px; }
  .cs-stage { max-width: 580px; }
}
/* a phone: the orbit becomes a numbered list, the constellation drops its labels */
@media (max-width: 820px) {
  .orbit-sec, .cs-sec { padding: 60px var(--gut) 56px; }
  .orbit { aspect-ratio: auto; max-width: none; }
  .orbit-svg { display: none; }
  .orbit-nodes { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; border-top: 1px solid var(--color-divider); }
  .ob-node { position: static; left: auto !important; top: auto !important; transform: none !important; text-align: left !important;
    max-width: none; width: auto; font-size: 17px; padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
  .ob-node sup { vertical-align: 0.5em; }
}
@media (max-width: 560px) {
  .orbit-nodes { grid-template-columns: 1fr; }
  .cs-label { display: none; }
  .cs-node { width: 15%; }
  .cs-stage { margin-bottom: 8px; }
  .cs-core-t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-core { animation: none; }
  .ob-flow { transition: none; }
  .cs-card.is-on { animation: none; }
}

/* ---------- home hero: the consultancy flow (build/constellations.js) --- */
.hero-image--flow { height: auto; align-self: center; }
.hero-flow { position: relative; width: 100%; aspect-ratio: 600 / 470; }
.hf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hf-line { fill: none; stroke-width: 1.5; opacity: 0.55; stroke-dasharray: 700; stroke-dashoffset: 700; animation: hf-draw 1.6s cubic-bezier(.6, 0, .2, 1) forwards; }
.hf-line:nth-of-type(2) { animation-delay: .12s; } .hf-line:nth-of-type(3) { animation-delay: .24s; }
.hf-line:nth-of-type(4) { animation-delay: .36s; } .hf-line:nth-of-type(5) { animation-delay: .48s; }
@keyframes hf-draw { to { stroke-dashoffset: 0; } }
.hf-ring { fill: none; stroke: rgba(36, 132, 198, 0.3); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: hf-breathe 5s ease-in-out infinite; }
.hf-ring-2 { stroke: rgba(36, 132, 198, 0.45); animation-delay: -2.5s; }
.hf-core { filter: drop-shadow(0 0 16px rgba(36, 132, 198, 0.6)); transform-box: fill-box; transform-origin: center; animation: cs-pulse 3.6s ease-in-out infinite; }
@keyframes hf-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.7; } }
.hf-item {
  position: absolute; left: 0; transform: translateY(-50%); display: flex; gap: 14px; align-items: center;
  opacity: 0; animation: hf-in 0.6s ease forwards;
}
.hf-item:nth-of-type(1) { animation-delay: .2s; } .hf-item:nth-of-type(2) { animation-delay: .32s; }
.hf-item:nth-of-type(3) { animation-delay: .44s; } .hf-item:nth-of-type(4) { animation-delay: .56s; }
.hf-item:nth-of-type(5) { animation-delay: .68s; }
@keyframes hf-in { from { opacity: 0; transform: translate(-12px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.hf-ic {
  width: clamp(38px, 4vw, 50px); aspect-ratio: 1; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--color-accent-200); box-shadow: 0 8px 20px rgba(0, 28, 84, 0.08);
}
.hf-ic svg { width: 46%; height: 46%; }
.hf-item.tone-blue .hf-ic { color: var(--color-accent); }
.hf-item.tone-hot .hf-ic { color: var(--color-hot); background: #fff8f3; border-color: #ffd9c2; }
.hf-item.tone-navy .hf-ic { color: var(--color-accent-800); }
.hf-txt { display: flex; flex-direction: column; gap: 3px; }
.hf-txt b { font: 700 clamp(11px, 1vw, 13px)/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-900); }
.hf-txt small { font-size: clamp(12px, 1.05vw, 14.5px); color: var(--color-muted); line-height: 1.3; }
.hf-tag {
  position: absolute; right: 0; bottom: 0; margin: 0; text-align: right;
  font: 700 clamp(14px, 1.5vw, 20px)/1.3 var(--font-heading); color: var(--color-accent-900);
}
.hf-tag::after { content: ""; display: block; width: 44px; height: 3px; background: var(--color-hot); margin: 12px 0 0 auto; }
@media (max-width: 1040px) { .hero-image--flow { height: auto !important; max-width: 620px; } }
@media (max-width: 560px) { .hf-txt small { display: none; } .hf-tag { font-size: 13px; } }

/* ---------- home: scroll interactions (site.js adds .rv / .is-in) ------ */
.scroll-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, var(--color-accent), var(--color-hot)); transform-origin: 0 50%; transform: scaleX(0); }
.rv { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-d, 0s); }
.rv.rv-l { transform: translateX(-32px); }
.rv.rv-r { transform: translateX(32px); }
.rv.rv-z { transform: scale(0.94); }
.rv.is-in { opacity: 1; transform: none; }
/* the orbit node labels are positioned by transform, so reveal them by fading only */
.ob-node.rv { transform: var(--ob-t); }
.ob-node.rv.is-in { transform: var(--ob-t); }
.ob-node.ob-r { --ob-t: translate(16px, -50%); } .ob-node.ob-l { --ob-t: translate(calc(-100% - 16px), -50%); }
.ob-node.ob-t { --ob-t: translate(-50%, calc(-100% - 12px)); } .ob-node.ob-b { --ob-t: translate(-50%, 12px); }
.orbit-sec .ob-line, .orbit-sec .ob-ring { transition: stroke-dashoffset 1.4s cubic-bezier(.6, 0, .2, 1); }
.orbit.is-drawing .ob-line { stroke-dasharray: 900; stroke-dashoffset: 900; }
.orbit.is-drawing.is-in .ob-line { stroke-dashoffset: 0; }
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hf-line { animation: none; stroke-dashoffset: 0; }
  .hf-item { animation: none; opacity: 1; }
  .hf-ring, .hf-core { animation: none; }
  .scroll-bar { display: none; }
}

/* ---------- home hero: per-slide data visuals (build/constellations.js) - */
.hero-viz2 { width: 100%; aspect-ratio: 600 / 470; }
.hx { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--font-body); }
.hx-card { fill: #fff; stroke: var(--color-accent-200); filter: drop-shadow(0 20px 40px rgba(0, 28, 84, 0.08)); }
.hx-eyebrow { font: 600 12px/1 var(--font-mono); letter-spacing: 0.2em; fill: var(--color-hot); }
.hx-ax { font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; fill: #8a94a3; }
.hx-grid { stroke: var(--color-divider); stroke-width: 1; }
.hx-legend text { font: 500 12px/1 var(--font-body); fill: var(--color-muted); }
.lg-a { fill: var(--color-accent-900); } .lg-f { fill: var(--color-accent); } .lg-b { fill: var(--color-hot); }
.hx-kpi rect, .hx-badge rect { fill: #f5f9fd; stroke: var(--color-accent-200); }
.hx-kv { font: 700 26px/1 var(--font-heading); fill: var(--color-accent-900); letter-spacing: -0.01em; }
.hx-kv.is-blue { fill: var(--color-accent); } .hx-kv.is-hot { fill: var(--color-hot); }
.hx-kk { font: 500 12px/1 var(--font-body); fill: var(--color-muted); }
/* forecast */
.hx-area { fill: rgba(0, 28, 84, 0.05); }
.hx-band { fill: rgba(36, 132, 198, 0.14); }
.hx-bud { fill: none; stroke: var(--color-hot); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0.8; }
.hx-act { fill: none; stroke: var(--color-accent-900); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hx-fc { fill: none; stroke: var(--color-accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hx-today { stroke: var(--color-accent-300); stroke-dasharray: 3 4; }
.hx-today-t { fill: var(--color-accent); }
.hx-dot { fill: #fff; stroke: var(--color-accent-900); stroke-width: 2.5; }
.hx-end { fill: var(--color-accent); }
.hx-end-ring { fill: none; stroke: var(--color-accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hx-ping 2.2s ease-out infinite; }
@keyframes hx-ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.2); opacity: 0; } }
/* operations */
.hx-live text { font: 600 11px/1 var(--font-mono); letter-spacing: 0.16em; fill: var(--color-accent); }
.hx-live-d { fill: var(--color-accent); animation: hx-blink 1.4s ease-in-out infinite; }
@keyframes hx-blink { 50% { opacity: 0.25; } }
.hx-gtrack { fill: none; stroke: var(--color-accent-100); stroke-width: 18; }
.hx-garc { fill: none; stroke: var(--color-accent); stroke-width: 18; stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--v); }
.hx-ginner { fill: #f5f9fd; }
.hx-gv { font: 700 38px/1 var(--font-heading); fill: var(--color-accent-900); letter-spacing: -0.02em; }
.hx-gk { font: 600 11px/1 var(--font-mono); letter-spacing: 0.22em; fill: var(--color-hot); }
.hx-ln { font: 600 14px/1 var(--font-heading); fill: var(--color-accent-900); }
.hx-lv { font: 700 14px/1 var(--font-mono); fill: var(--color-accent-900); }
.hx-track { fill: var(--color-accent-100); }
.hx-fill { transform-box: fill-box; transform-origin: 0 50%; }
.hx-fill.t-blue { fill: var(--color-accent); } .hx-fill.t-navy { fill: var(--color-accent-900); } .hx-fill.t-hot { fill: var(--color-hot); }
.hx-spark { fill: var(--color-accent-300); transform-box: fill-box; transform-origin: 50% 100%; }
.hx-spark:last-of-type { fill: var(--color-accent); }
/* roadmap */
.hx-step .hx-block { transform-box: fill-box; transform-origin: 50% 100%; }
.hx-step.s0 .hx-block { fill: var(--color-accent-100); } .hx-step.s1 .hx-block { fill: var(--color-accent-200); }
.hx-step.s2 .hx-block { fill: var(--color-accent); } .hx-step.s3 .hx-block { fill: var(--color-accent-900); }
.hx-sn { font: 600 11px/1 var(--font-mono); letter-spacing: 0.14em; fill: var(--color-hot); }
.hx-st { font: 700 18px/1 var(--font-heading); fill: var(--color-accent-900); }
.hx-sd { font: 500 11px/1 var(--font-body); fill: #4a4a4d; }
.hx-step.s2 .hx-st, .hx-step.s3 .hx-st, .hx-step.s2 .hx-sd, .hx-step.s3 .hx-sd { fill: #fff; }
.hx-step.s2 .hx-sn, .hx-step.s3 .hx-sn { fill: #ffc9a8; }
.hx-rise { fill: none; stroke: var(--color-hot); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; }
.hx-rd { fill: #fff; stroke: var(--color-hot); stroke-width: 2.5; }
.hx-arrow { fill: none; stroke: var(--color-hot); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* play the build-up each time a slide becomes the visible one */
.hero-slide.is-on .hx-act { animation: hx-draw 1.2s cubic-bezier(.6, 0, .2, 1) both; }
.hero-slide.is-on .hx-fc { animation: hx-draw 1.1s 0.9s cubic-bezier(.6, 0, .2, 1) both; }
.hero-slide.is-on .hx-band, .hero-slide.is-on .hx-end { animation: hx-fade 0.6s 1.5s both; }
.hero-slide.is-on .hx-kpi, .hero-slide.is-on .hx-badge, .hero-slide.is-on .hx-lane { animation: hx-rise-in 0.6s var(--d, 0.1s) both; }
.hero-slide.is-on .hx-garc { animation: hx-gauge 1.4s cubic-bezier(.3, 0, .2, 1) both; }
.hero-slide.is-on .hx-fill { animation: hx-grow-x 1s var(--d, 0.2s) cubic-bezier(.3, 0, .2, 1) both; }
.hero-slide.is-on .hx-lane .hx-fill { animation-delay: calc(var(--d) + 0.2s); }
.hero-slide.is-on .hx-spark { animation: hx-grow-y 0.7s var(--d) cubic-bezier(.3, 0, .2, 1) both; }
.hero-slide.is-on .hx-step { animation: hx-fade 0.3s var(--d) both; }
.hero-slide.is-on .hx-step .hx-block { animation: hx-grow-y 0.8s var(--d) cubic-bezier(.3, 0, .2, 1) both; }
.hero-slide.is-on .hx-rise { animation: hx-draw 1.3s 0.8s cubic-bezier(.6, 0, .2, 1) both; }
.hero-slide.is-on .hx-rd, .hero-slide.is-on .hx-arrow { animation: hx-fade 0.4s calc(var(--d, 1.6s) + 0.6s) both; }
@keyframes hx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hx-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hx-gauge { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--v); } }
@keyframes hx-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hx-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-on .hx *, .hx-end-ring, .hx-live-d { animation: none !important; }
}

/* ---------- hero slide 1 alternatives (vizBridge / vizRadar / vizFramework) */
.hx-wf rect { transform-box: fill-box; transform-origin: 50% 100%; }
.wf-base { fill: var(--color-accent-200); } .wf-blue { fill: var(--color-accent); } .wf-hot { fill: var(--color-hot); }
.wf-navy { fill: var(--color-accent-800); } .wf-out { fill: var(--color-accent-900); }
.hx-wv { font: 700 14px/1 var(--font-mono); fill: var(--color-accent-900); } .hx-wv.is-hot { fill: var(--color-hot); font-size: 16px; }
.hx-wn { font: 600 11px/1 var(--font-body); fill: var(--color-muted); letter-spacing: 0.02em; }
.hx-wlink { stroke: var(--color-accent-300); stroke-dasharray: 3 3; }
.rd-ring { fill: none; stroke: var(--color-divider); } .rd-axis { stroke: var(--color-divider); }
.rd-before { fill: rgba(255, 107, 26, 0.12); stroke: var(--color-hot); stroke-width: 1.6; stroke-dasharray: 5 4; }
.rd-after { fill: rgba(36, 132, 198, 0.18); stroke: var(--color-accent); stroke-width: 2.4; stroke-linejoin: round; transform-box: view-box; transform-origin: 212px 262px; }
.rd-dot { fill: #fff; stroke: var(--color-accent); stroke-width: 2.4; }
.rd-l { font-size: 12.5px; fill: var(--color-accent-900); }
.fw-tile polygon { fill: #fff; stroke: var(--color-accent-200); stroke-width: 1.4; filter: drop-shadow(0 8px 16px rgba(0, 28, 84, 0.08)); }
.fw-tile.t-hot polygon { fill: #fff8f3; stroke: #ffd2b6; }
.fw-tile.t-blue { color: var(--color-accent); } .fw-tile.t-hot { color: var(--color-hot); } .fw-tile.t-navy { color: var(--color-accent-800); }
.fw-n { font: 700 9.5px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--color-accent-900); }
.fw-link { stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.6; }
.fw-link.l-blue { stroke: var(--color-accent); } .fw-link.l-hot { stroke: var(--color-hot); } .fw-link.l-navy { stroke: var(--color-accent-800); }
.fw-core polygon { fill: url(#hf-core-g2); fill: var(--color-accent-900); filter: drop-shadow(0 12px 24px rgba(0, 28, 84, 0.25)); }
.fw-ct { font: 700 17px/1 var(--font-heading); fill: #fff; }
.fw-cap { font-size: 12.5px; }
.hero-slide.is-on .hx-wf { animation: hx-fade 0.3s var(--d) both; }
.hero-slide.is-on .hx-wf rect { animation: hx-grow-y 0.7s var(--d) cubic-bezier(.3, 0, .2, 1) both; }
.hero-slide.is-on .rd-after { animation: hx-pop 1s 0.3s cubic-bezier(.3, 1.3, .5, 1) both; }
.hero-slide.is-on .rd-dot { animation: hx-fade 0.4s 1s both; }
.hero-slide.is-on .fw-link { animation: hx-draw 0.8s var(--d) cubic-bezier(.6, 0, .2, 1) both; }
.hero-slide.is-on .fw-tile { animation: hx-rise-in 0.6s var(--d) both; }
@keyframes hx-pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- home hero slide 1: the heartbeat (heroPulse) ---------------- */
.hero-pulse { position: relative; width: 100%; aspect-ratio: 720 / 470; }
#hero-slider .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 24px; align-items: center; }
@media (max-width: 1040px) { #hero-slider .hero-grid { grid-template-columns: 1fr; } #hero-slider .hero-image--flow { max-width: none; } }
.hp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hp-glow { fill: url(#hp-glow-g); transform-box: fill-box; transform-origin: center; }
.hp-ring { fill: none; stroke: rgba(36, 132, 198, 0.2); stroke-width: 1.2; }
.hp-ring-2 { stroke: rgba(36, 132, 198, 0.3); stroke-dasharray: 2 7; stroke-linecap: round; }
.hp-ring-3 { stroke: rgba(36, 132, 198, 0.4); }
.hp-orbit { transform-box: view-box; transform-origin: 360px 235px; animation: hp-spin var(--dur) linear infinite; animation-direction: var(--dir, normal); }
.hp-orbit .d-blue { fill: var(--color-accent); opacity: 0.75; } .hp-orbit .d-hot { fill: var(--color-hot); opacity: 0.85; }
@keyframes hp-spin { to { transform: rotate(360deg); } }
.hp-wave { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

.hp-core {
  position: absolute; left: 50%; top: 50%; width: 21%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: radial-gradient(circle at 50% 35%, #ffffff 0%, #f1f7fd 70%);
  border: 1px solid var(--color-accent-200);
  box-shadow: 0 0 0 10px rgba(36, 132, 198, 0.06), 0 18px 40px rgba(0, 28, 84, 0.12), 0 0 40px rgba(36, 132, 198, 0.25);
}
.hp-core img { width: 36%; height: auto; display: block; filter: drop-shadow(0 4px 10px rgba(36, 132, 198, 0.35)); }

/* one beat: a double thump, light flooding out, two waves leaving the core */
.hero-pulse.is-beat .hp-core { animation: hp-beat 1.1s cubic-bezier(.3, 0, .3, 1); }
.hero-pulse.is-beat .hp-core img { animation: hp-light 1.1s ease-out; }
.hero-pulse.is-beat .hp-glow { animation: hp-glow 1.1s ease-out; }
.hero-pulse.is-beat .hp-wave { animation: hp-wave 1.6s ease-out; }
.hero-pulse.is-beat .hp-wave-2 { animation-delay: 0.22s; }
@keyframes hp-beat {
  0% { transform: translate(-50%, -50%) scale(1); }
  14% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 16px rgba(36, 132, 198, 0.1), 0 18px 40px rgba(0, 28, 84, 0.12), 0 0 90px rgba(36, 132, 198, 0.6); }
  28% { transform: translate(-50%, -50%) scale(0.98); }
  42% { transform: translate(-50%, -50%) scale(1.06); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes hp-light { 0%, 100% { filter: drop-shadow(0 4px 10px rgba(36, 132, 198, 0.35)); } 18% { filter: drop-shadow(0 0 18px rgba(77, 159, 224, 0.95)) brightness(1.15); } }
@keyframes hp-glow { 0%, 100% { transform: scale(1); opacity: 1; } 18% { transform: scale(1.12); opacity: 1; } 60% { opacity: 0.7; } }
@keyframes hp-wave { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.9); opacity: 0; } }

/* chips that flare on the rings */
.hp-chips { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hp-chip {
  position: absolute; transform: translate(-50%, -50%) scale(0.6); opacity: 0; white-space: nowrap;
  padding: 7px 12px 7px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--color-accent-200);
  box-shadow: 0 10px 24px rgba(0, 28, 84, 0.1);
  font: 600 12.5px/1 var(--font-body); color: var(--color-accent-900); display: inline-flex; align-items: center; gap: 8px;
  animation: hp-chip 3.1s cubic-bezier(.2, .8, .2, 1) forwards;
}
.hp-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(36, 132, 198, 0.12); }
.hp-chip.tone-blue::before { background: var(--color-accent); } .hp-chip.tone-hot::before { background: var(--color-hot); box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.14); }
.hp-chip.tone-navy::before { background: var(--color-accent-900); }
.hp-chip small { font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8a94a3; }
@keyframes hp-chip {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  20% { transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -65%) scale(0.96); }
}
@media (max-width: 560px) { .hp-chip { font-size: 11px; padding: 5px 9px; } .hp-chip small { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hp-orbit, .hero-pulse.is-beat * { animation: none !important; }
}

/* ---------- home: Meet Tech Source (meetSection) ----------------------- */
.meet-v2 { background: linear-gradient(180deg, #f6f9fc 0%, #fff 100%); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); padding-top: 88px; padding-bottom: 88px; }
.meet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.meet-copy .eyebrow { margin-left: 14px; }
.meet-copy h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.015em; margin: 18px 0 22px; text-wrap: balance; }
.meet-copy h2 em { font-style: normal; color: var(--color-hot); }
.meet-copy p { font-size: 17px; line-height: 1.7; color: #3a3a3d; margin: 0; max-width: 58ch; }
.meet-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.meet-ctas svg { width: 15px; height: 15px; }
.meet-panel { background: #fff; border: 1px solid var(--color-accent-200); border-radius: 22px; padding: clamp(22px, 2.6vw, 36px); box-shadow: 0 24px 60px rgba(0, 28, 84, 0.07); }
.mt-k { display: block; font: 600 11px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-hot); margin-bottom: 16px; }
.meet-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-tile {
  display: grid; grid-template-columns: 40px 1fr 16px; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: 14px; text-decoration: none;
  color: var(--color-accent-900); background: #fff; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.mt-tile:hover { border-color: var(--color-accent-300); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 28, 84, 0.08); }
.mt-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--color-accent-100); }
.mt-tile.ic-hot .mt-ic { background: #fff3ea; }
.mt-ic svg { width: 21px; height: 21px; }
.mt-n { font: 600 14.5px/1.2 var(--font-heading); }
.mt-tile > svg { width: 16px; height: 16px; color: var(--color-accent-300); transition: color .2s, transform .2s; }
.mt-tile:hover > svg { color: var(--color-accent); transform: translateX(3px); }
.mt-regions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-divider); }
.mt-regions .mt-k { margin: 0 0 4px; flex-basis: 100%; }
.mt-pill { font: 500 13px/1 var(--font-body); padding: 8px 12px; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-900); }
.mt-pill.is-more { background: none; color: var(--color-muted); padding-left: 2px; }
@media (max-width: 1040px) { .meet-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .meet-tiles { grid-template-columns: 1fr; } .meet-v2 { padding-top: 56px; padding-bottom: 56px; } }

/* ---------- leadership biographies (build/bios.js) --------------------- */
.lead-item { scroll-margin-top: 100px; }
.lead-item .bio p { font-size: 15px; line-height: 1.7; color: #3a3a3d; margin: 0 0 12px; max-width: 68ch; }
.bio-more summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font: 600 13px/1 var(--font-body); color: var(--color-accent); letter-spacing: 0.02em;
}
.bio-more summary::-webkit-details-marker { display: none; }
.bio-more summary::after { content: "+"; font: 600 16px/1 var(--font-mono); transition: transform .2s; }
.bio-more[open] summary { margin-bottom: 14px; }
.bio-more[open] summary::after { transform: rotate(45deg); }
.bio-more[open] summary { color: var(--color-accent-900); }
.bio-go { display: inline-block; margin-top: 10px; font: 600 12.5px/1 var(--font-body); color: var(--color-accent); text-decoration: none; }
.bio-go:hover { color: var(--color-hot); }
.lead-item:target .ph { outline: 3px solid var(--color-hot); outline-offset: 4px; }
.bio-full { margin-top: 22px; }
.bio-full p { font-size: 16px; line-height: 1.75; color: #3a3a3d; margin: 0 0 14px; max-width: 70ch; }
.bio-full .bio-tag { font: 600 12px/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-hot); }

/* ---------- home: insights hub, simple (insightsSimple) ---------------- */
.hub-simple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hs-card {
  display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 26px; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 18px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.hs-card:hover { border-color: var(--color-accent-300); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 28, 84, 0.08); }
.hs-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--color-accent-100); margin-bottom: 6px; }
.hs-card.ic-hot .hs-ic { background: #fff3ea; }
.hs-ic svg { width: 26px; height: 26px; }
.hs-card h3 { margin: 0; font-size: 26px; line-height: 1.1; color: var(--color-accent-900); }
.hs-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #4a4a4d; flex: 1; }
.hs-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 14px/1 var(--font-body); color: var(--color-accent); }
.hs-go svg { width: 15px; height: 15px; transition: transform .2s; }
.hs-card:hover .hs-go { color: var(--color-hot); }
.hs-card:hover .hs-go svg { transform: translateX(4px); }
@media (max-width: 860px) { .hub-simple { grid-template-columns: 1fr; } }
.hs-card.ic-blue .hs-ic, .mt-tile.ic-blue .mt-ic { color: var(--color-accent); }
.hs-card.ic-hot .hs-ic, .mt-tile.ic-hot .mt-ic { color: var(--color-hot); }
.hs-card.ic-navy .hs-ic, .mt-tile.ic-navy .mt-ic { color: var(--color-accent-900); }
.meet-tiles .mt-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hub-simple:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .hub-simple:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; } }

/* ---------- About page (aboutMain) ------------------------------------- */
.ab-hero {
  padding: 64px var(--gut) 56px; border-bottom: 1px solid var(--color-divider);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: end;
  background: radial-gradient(ellipse 50% 70% at 85% 30%, rgba(36, 132, 198, 0.08), transparent 70%), var(--color-bg);
}
.ab-hero .eyebrow { margin-top: 18px; display: inline-flex; }
.ab-hero h1 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.025em; line-height: 1; margin: 14px 0 18px; }
.ab-lede { font-size: 19px; line-height: 1.6; color: #3a3a3d; margin: 0; max-width: 48ch; }
.ab-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.ab-facts > div { background: #fff; border: 1px solid var(--color-accent-200); border-radius: 16px; padding: 18px 20px; }
.ab-facts dt { font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-hot); margin-bottom: 10px; }
.ab-facts dd { margin: 0; font: 600 19px/1.2 var(--font-heading); color: var(--color-accent-900); }
.ab-story .cap-head h2 em, .ab-story h2 em { font-style: normal; color: var(--color-hot); }
.ab-story .cap-head .eyebrow, .ab-vm .cap-head .eyebrow, .ab-board .cap-head .eyebrow { margin-left: 14px; }
.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
.ab-card { background: #fff; border: 1px solid var(--color-divider); border-radius: 20px; padding: clamp(24px, 2.8vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.ab-card--accent { background: linear-gradient(160deg, #f4f8fc, #fff); border-color: var(--color-accent-200); }
.ab-n { font: 600 12px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--color-hot); }
.ab-card h3 { margin: 0; font-size: 24px; color: var(--color-accent-900); letter-spacing: -0.01em; }
.ab-card p { margin: 0; font-size: 15.5px; line-height: 1.7; color: #3a3a3d; }
.ab-chips, .ab-pills { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; background: var(--color-accent-100); font: 500 13px/1 var(--font-body); color: var(--color-accent-900); }
.ab-chips li span { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--color-accent); }
.ab-chips li svg { width: 13px; height: 13px; }
.ab-pills li { padding: 8px 12px; border-radius: 999px; background: var(--color-accent-100); font: 500 13px/1 var(--font-body); color: var(--color-accent-900); }
.ab-pills li.is-hq { background: var(--color-accent-900); color: #fff; }
.ab-vm { background: linear-gradient(180deg, #f6f9fc, #fff); border-top: 1px solid var(--color-divider); }
.ab-vm-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; margin-top: 12px; }
.ab-vision { position: relative; overflow: hidden; background: var(--color-accent-900); color: #fff; border-radius: 22px; padding: clamp(28px, 3.4vw, 48px); }
.ab-vision p { font: 600 clamp(20px, 2.2vw, 28px)/1.35 var(--font-heading); letter-spacing: -0.01em; margin: 16px 0 0; position: relative; z-index: 1; }
.ab-vision img { position: absolute; right: -10px; bottom: -24px; width: 120px; height: auto; opacity: 0.16; }
.ab-k { font: 600 11px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-hot); }
.ab-mission { background: #fff; border: 1px solid var(--color-accent-200); border-radius: 22px; padding: clamp(24px, 3vw, 40px); }
.ab-mission ol { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.ab-mission li { display: grid; grid-template-columns: 44px 30px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: 14px; }
.ab-mi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--color-accent-100); color: var(--color-accent); }
.ab-mi svg { width: 22px; height: 22px; }
.ab-mn { font: 600 12px/1 var(--font-mono); color: var(--color-hot); }
.ab-mt { font-size: 15px; line-height: 1.45; color: var(--color-accent-900); }
@media (max-width: 1040px) { .ab-hero, .ab-vm-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ab-grid, .ab-facts { grid-template-columns: 1fr; } .ab-mission li { grid-template-columns: 40px 1fr; } .ab-mn { display: none; } }
.ab-board .pindex-7 { margin-top: 32px; }

/* ---------- 2026-10 revisions ----------------------------------------- */

/* footer: links centred and readable */
.ts-foot .grid { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.ts-foot .foot-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 36px; }
.ts-foot .foot-links a { font: 600 15px/1.4 var(--font-heading); color: #fff; opacity: 1; padding: 4px 0; border-bottom: 1px solid transparent; }
.ts-foot .foot-links a:hover { color: var(--color-hot); border-color: var(--color-hot); }
.ts-foot .legal { justify-content: center; text-align: center; color: #9fb2c7; font-size: 13px; }
@media (max-width: 900px) {
  .ts-foot .grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; }
  .ts-foot .foot-spacer { display: none; }
  .ts-foot .foot-links { gap: 8px 24px; }
}

/* service pages: smaller leadership-perspective band, sharper portrait */
.svc-quote { grid-template-columns: minmax(180px, 260px) minmax(0, 760px); gap: 48px; padding: 56px var(--gut); justify-content: center; }
.svc-quote .ph { aspect-ratio: 4 / 5; width: 100%; }
.svc-quote .ph.has-img img { object-position: 50% 20%; image-rendering: auto; }
.svc-quote .eyebrow::before { content: none; }
.svc-quote .eyebrow { gap: 0; }
.svc-quote blockquote { font-size: clamp(17px, 1.55vw, 21px); line-height: 1.4; margin: 12px 0 18px; padding-left: 18px; }
.svc-quote .attrib b { font-size: 16px; }
.svc-quote .ph--mono span { font-size: clamp(32px, 3.6vw, 52px); }
@media (max-width: 1100px) {
  .svc-quote { grid-template-columns: 1fr; gap: 28px; }
  .svc-quote .ph { max-width: 220px; }
}

/* ---------- team bio viewer (index + about) ---------------------------- */
.bio-x { position: fixed; inset: 0; z-index: 1000; background: #fff; color: var(--color-text);
  display: grid; grid-template-rows: auto 1fr; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.bio-x.is-open { opacity: 1; visibility: visible; }
.bio-x__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gut); border-bottom: 1px solid var(--color-divider); }
.bio-x__bar .eyebrow::before { content: none; }
.bio-x__bar .eyebrow { gap: 0; }
.bio-x__close { appearance: none; border: 1px solid var(--color-divider); background: #fff; border-radius: 50%;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--color-text); }
.bio-x__close:hover { border-color: var(--color-text); }
.bio-x__close svg { width: 18px; height: 18px; }
.bio-x__body { display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
.bio-x__rail { border-right: 1px solid var(--color-divider); overflow-y: auto; padding: 12px 0; }
.bio-x__rail button { appearance: none; background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 12px var(--gut) 12px 24px;
  border-left: 3px solid transparent; color: inherit; font: inherit; transition: background .15s; }
.bio-x__rail button:hover, .bio-x__rail button:focus-visible { background: var(--color-surface); outline: none; }
.bio-x__rail button.is-on { border-left-color: var(--color-hot); background: var(--color-accent-100); }
.bio-x__rail img { width: 52px; height: 52px; object-fit: cover; object-position: 50% 15%; border-radius: 50%; background: var(--color-surface); }
.bio-x__rail b { display: block; font: 600 14px/1.25 var(--font-heading); }
.bio-x__rail small { display: block; font-size: 12px; color: var(--color-muted); margin-top: 3px; }
.bio-x__main { overflow-y: auto; padding: 48px var(--gut) 64px; }
.bio-x__card { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 720px); gap: 48px; align-items: start; }
.bio-x__photo { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; background: var(--color-surface); position: sticky; top: 0; }
.bio-x__n { font: 600 11px/1 var(--font-mono); color: var(--color-hot); letter-spacing: 0.14em; text-transform: uppercase; }
.bio-x__name { font: 700 clamp(28px, 3.2vw, 44px)/1.08 var(--font-heading); letter-spacing: -0.02em; margin: 12px 0 8px; }
.bio-x__role { color: var(--color-muted); font-size: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--color-text); margin-bottom: 24px; }
.bio-x__text p { font-size: 16px; line-height: 1.7; margin: 0 0 16px; }
.bio-x__nav { display: flex; gap: 12px; margin-top: 28px; }
.bio-x__nav button { appearance: none; border: 1px solid var(--color-divider); background: #fff; padding: 10px 16px; cursor: pointer;
  font: 600 13px/1 var(--font-body); color: var(--color-text); }
.bio-x__nav button:hover { border-color: var(--color-text); }
.bio-x__fade { animation: bioFade .25s ease; }
@keyframes bioFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.bio-lock, html.bio-lock body { overflow: hidden; }
@media (max-width: 900px) {
  .bio-x__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .bio-x__rail { display: flex; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--color-divider); padding: 8px; }
  .bio-x__rail button { grid-template-columns: 1fr; justify-items: center; text-align: center; width: auto; min-width: 104px; padding: 10px 8px;
    border-left: 0; border-bottom: 3px solid transparent; }
  .bio-x__rail button.is-on { border-bottom-color: var(--color-hot); }
  .bio-x__rail small { display: none; }
  .bio-x__main { padding-top: 28px; }
  .bio-x__card { grid-template-columns: 1fr; gap: 24px; }
  .bio-x__photo { position: static; max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .bio-x, .bio-x__fade { transition: none; animation: none; } }

/* no decorative dash before labels anywhere */
.eyebrow::before { content: none !important; }
.eyebrow { gap: 0; }

.bio-x__bar { justify-content: flex-start; }
.bio-x__bar .eyebrow { margin-right: auto; }
.bio-x__back { appearance: none; border: 1px solid var(--color-divider); background: #fff; cursor: pointer; color: var(--color-text);
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font: 600 13px/1 var(--font-body); }
.bio-x__back:hover { border-color: var(--color-text); }
.bio-x__back svg { width: 16px; height: 16px; }