/* ==========================================================
   IT Staffing Landing Page — staffing-landing.css  v4.2
   Figma node: 1892:1670
   Scope: .intone-staffing-page

   SHARED from intone-design-system.css (NOT duplicated here):
     .svc-hero, .is-clip-text             — §1 hero (matches home page hero)
     .svc-hero-tagline, __bold, __body    — §1b hero lead + CTA
     .home-intro, .home-intro__*          — §5 dark core-competency section
     .reveal
   ========================================================== */

/* ── Page tokens ── */
.intone-staffing-page {
  --its-dark: #141414;
  --its-card: #202022;
  --its-black: #000000;
  --its-white: #ffffff;
  --its-navy: #09101d;
  --its-gold: #f6b43f;
  --its-rule: rgba(255, 255, 255, 0.15);
  --its-muted: rgba(255, 255, 255, 0.6);
}

.intone-staffing-page *,
.intone-staffing-page *::before,
.intone-staffing-page *::after {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 3 — Gap Statement
   (Figma: Frame 276, y=1331 — light bg, huge italic statement)
   Standalone section — does NOT extend svc-hero-tagline.
   ═══════════════════════════════════════════════════════ */
.its-gap {
  background: #f5f5f5;
  padding: clamp(72px, 9vw, 128px) 0;
}

.its-gap__inner {
  /* max-width: 1352px; */
  margin: 0 auto;
  padding: 0 80px;
}

/* Huge italic statement — Figma shows ~80-120px italic bold */
.its-gap__statement {
  font-family: var(--ds-font-heading);
  font-size: clamp(40px, 7vw, 74px);
  font-weight: 200;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #09101d;
  margin: 0;
}

/* Responsive line break — visible only on wider screens */
.its-gap__br {
  display: inline;
}

@media (max-width: 960px) {
  .its-gap__inner {
    padding: 0 44px;
  }
}

@media (max-width: 640px) {
  .its-gap__inner {
    padding: 0 24px;
  }

  .its-gap__statement {
    font-size: clamp(32px, 10vw, 64px);
  }

  .its-gap__br {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════
   SECTION 5 — Core Competency modifiers on .home-intro
   Figma (node 1892:1674) names this frame "DarkBackground" but its
   actual fill is light (#F4F6F9, black text) — a stale layer name
   left over from an earlier dark-theme version of the component,
   same gotcha as the stale "DarkBackground" name on every other
   page's equivalent section. The class name here (.its-core-dark)
   is kept as-is to avoid touching the shared .home-intro markup/JS
   hooks, but every color below inverts the shared component's
   dark-theme default to match what Figma actually renders.
   ═══════════════════════════════════════════════════════ */
.its-core-dark {
  background: #f4f6f9;
}

/* Section label — "01 Core Competency" with top border */
.its-section-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 20, 20, 0.5);
  color: #141414;
  margin-bottom: 0;
}

.its-section-label__num {
  font-family: var(--ds-font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.its-section-label__text {
  font-family: var(--ds-font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Large heading override */
.its-core-heading {
  font-family: var(--ds-font-heading);
  font-size: clamp(48px, 8vw, 112px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #141414;
  margin: 0;
}

/* Spacing adjustments within core section */
.its-core-dark .home-intro__text-block {
  gap: 40px;
}

.its-core-dark .home-intro__body {
  gap: 60px;
}

.its-core-dark .home-intro__lead {
  color: #374151;
}

.its-core-dark .home-intro__lead strong {
  color: #141414;
  font-weight: 700;
}

.its-core-dark .home-intro__divider {
  background: rgba(20, 20, 20, 0.15);
}

/* CTA buttons: the shared .btn-hero-fill/.btn-hero-outline defaults
   are white-fill/white-outline, built for a dark page background —
   invisible against this section's light #f4f6f9 bg. Invert to the
   dark-fill primary / dark-outline secondary pair Figma shows
   (same pattern as Legacy Modernization's .lm-intro-row override). */
.its-core-dark .btn-hero-fill {
  background: #141414;
  border-color: #141414;
  color: #ffffff;
}

.its-core-dark .btn-hero-fill:hover {
  background: var(--its-gold);
  border-color: var(--its-gold);
  color: #000000;
}

.its-core-dark .btn-hero-outline {
  background: transparent;
  border-color: #141414;
  color: #141414;
}

.its-core-dark .btn-hero-outline:hover {
  background: #141414;
  color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════
   SECTION 6 — Full-width buildings image strip
   (Figma: HeroBackgroundImages, y=514 within dark section)
   ═══════════════════════════════════════════════════════ */
.its-core-image {
  background: #f4f6f9;
  /* image-load fallback only — cover-fit image fully hides it once loaded */
  width: 100%;
  height: clamp(220px, 30vw, 436px);
  overflow: hidden;
}

.its-core-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center 40%;
}


/* ═══════════════════════════════════════════════════════════
   SECTION 7 — Stack Grid (Figma: "Border" node)
   Figma shows this as part of the SAME light #F4F6F9 wrapper as
   Section 5 (not a separate dark section) with two WHITE panels
   side-by-side — updated from the old dark #202022/black-pill
   treatment to match. Left: ERP | Right: Microsoft Ecosystem
   ═══════════════════════════════════════════════════════ */
.its-stacks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f4f6f9;
}

.its-stack-panel {
  background: #ffffff;
  padding: clamp(32px, 4vw, 48px) clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Vertical border between panels */
.its-stack-panel:first-child {
  border-right: 1px solid #818994;
}

/* Header row: name bold + tag, separated by top border */
.its-stack-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #141414;
}

.its-stack-panel__name {
  font-family: var(--ds-font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #141414;
  text-transform: uppercase;
}

.its-stack-panel__tag {
  font-family: var(--ds-font-heading);
  font-size: 15px;
  font-weight: 400;
  color: #141414;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Platform pill badges */
.its-stack-panel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.its-stack-pill {
  display: inline-block;
  background: #f4f6f9;
  border: 1px solid #f4f6f9;
  color: #141414;
  font-family: var(--ds-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Role list — gold 5×5 dot + text */
.its-stack-roles {
  list-style: none;
  margin: 0;
  padding: 0;
}

.its-stack-roles li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 13px 0 13px 16px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
  font-family: var(--ds-font-heading);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  color: #000000;
  line-height: 1.3;
}

.its-stack-roles li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: var(--its-gold);
}

.its-stack-roles li:last-child {
  border-bottom: none;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

/* Large tablet (1024px) */
@media (max-width: 1024px) {
  .its-stacks {
    grid-template-columns: 1fr;
  }

  .its-stack-panel:first-child {
    border-right: none;
    border-bottom: 1px solid #818994;
  }
}

/* Tablet (768px) */
@media (max-width: 768px) {
  .its-gap-meta {
    grid-template-columns: 1fr;
  }

  .its-core-heading {
    font-size: clamp(40px, 12vw, 72px);
  }

  .its-core-image {
    height: clamp(180px, 45vw, 320px);
  }
}


/* Hero title — increase mobile size (design-system default clamp(36px,8vw,108px)
   is too small on small phones for "IT Staff Augmentation"). */
@media (max-width: 640px) {
  .intone-staffing-page .svc-hero__title {
    font-size: clamp(36px, 10vw, 56px);
  }
}


/* ── Dark mode overrides ─────────────────────────────────── */

/* Gap Statement section */
[data-theme="dark"] .its-gap {
  background: var(--t-surface);
}

[data-theme="dark"] .its-gap__statement {
  color: var(--t-text);
}

/* Core Competency section ("Two stacks...") — now light by default
   (see SECTION 5 above), so it needs the same dark-mode treatment
   as every other light section on this page. */
[data-theme="dark"] .its-core-dark {
  background: var(--t-bg);
}

[data-theme="dark"] .its-section-label {
  color: var(--t-text);
  border-top-color: var(--t-border);
}

[data-theme="dark"] .its-core-heading {
  color: var(--t-text);
}

[data-theme="dark"] .its-core-dark .home-intro__lead {
  color: var(--t-text-muted);
}

[data-theme="dark"] .its-core-dark .home-intro__lead strong {
  color: var(--t-text);
}

[data-theme="dark"] .its-core-dark .home-intro__divider {
  background: var(--t-border);
}

[data-theme="dark"] .its-core-dark .btn-hero-fill {
  background: var(--t-text);
  border-color: var(--t-text);
  color: var(--t-bg);
}

[data-theme="dark"] .its-core-dark .btn-hero-outline {
  border-color: var(--t-text);
  color: var(--t-text);
}

[data-theme="dark"] .its-core-dark .btn-hero-outline:hover {
  background: var(--t-text);
  color: var(--t-bg);
}

[data-theme="dark"] .its-core-image {
  background: var(--t-surface);
}

/* Stack Grid — ERP / Microsoft Ecosystem panels, also light by default now */
[data-theme="dark"] .its-stacks {
  background: var(--t-bg);
}

[data-theme="dark"] .its-stack-panel {
  background: var(--t-surface);
}

[data-theme="dark"] .its-stack-panel__header {
  border-top-color: var(--t-text);
}

[data-theme="dark"] .its-stack-panel__name,
[data-theme="dark"] .its-stack-panel__tag {
  color: var(--t-text);
}

[data-theme="dark"] .its-stack-pill {
  background: var(--t-bg);
  border-color: var(--t-bg);
  color: var(--t-text);
}

[data-theme="dark"] .its-stack-roles li {
  border-bottom-color: var(--t-border);
  color: var(--t-text);
}

/* ═══════════════════════════════════════════════════════════
   REVAMP 2026-07-28 — sections rebuilt from
   uploads/2026/07/Revamped-IT-Staffing-Webpage.docx
   Shared atoms (.its-kicker/.its-h2/.its-body/.its-list-label/.its-subbtn)
   + the new §2/§4/§6/§7/§8/§9 components. Fully fluid, no max-width cap
   (per the house responsive rule).
   ═══════════════════════════════════════════════════════ */

/* ── Shared atoms ───────────────────────────────────────── */
.its-kicker {
  font-family: var(--ds-font-heading);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 14px;
}

.its-h2 {
  font-family: var(--ds-font-heading);
  font-size: clamp(26px, 3.1vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--its-navy);
  margin: 0 0 22px;
}

.its-body {
  font-family: var(--ds-font-heading);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.68;
  color: #3c434d;
  margin: 0 0 16px;
}

.its-body:last-child { margin-bottom: 0; }

.its-list-label {
  font-family: var(--ds-font-heading);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--its-navy);
  margin: 26px 0 14px;
}

/* Visible sub-page button. The whole point of this treatment is that the
   two sub-pages read as destinations, not as inline prose links. */
.its-subbtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 17px 30px;
  background: var(--its-navy);
  border: 2px solid var(--its-navy);
  color: #fff;
  font-family: var(--ds-font-heading);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.its-subbtn svg { flex: 0 0 auto; }

.its-subbtn:hover,
.its-subbtn:focus-visible {
  background: var(--its-gold);
  border-color: var(--its-gold);
  color: #141414;
  text-decoration: none;
}

/* Primary conversion CTA (hero). Gold outranks the navy sub-page buttons so
   the "talk to us" action reads as the page's main action, not as one more
   navigation link. */
.its-subbtn--primary {
  background: var(--its-gold);
  border-color: var(--its-gold);
  color: #141414;
  margin-top: 0;
}

.its-subbtn--primary:hover,
.its-subbtn--primary:focus-visible {
  background: var(--its-navy);
  border-color: var(--its-navy);
  color: #fff;
}

/* Hero CTA row (inside the shared .svc-hero-tagline) */
.its-herocta { margin-top: 32px; }


/* ── §2 Engagement models ───────────────────────────────── */
.its-models {
  background: #f4f6f9;
  padding: clamp(56px, 6.5vw, 104px) 0;
}

.its-models__inner { padding: 0 var(--gutter); }

/* No max-width caps on the head/lead any more: they now live inside the
   .its-split two-column row, so the grid column IS the measure. The old
   62ch/92ch caps left 632px and 338px of dead space beside a full-width
   card grid. Readability cap moved into the stacked (<=900px) state. */

/* 5 cards tile gap-free only as 5x1, 3+2, or a single column. A plain
   auto-fit grid gives 4+1 and strands the fifth card across the full width
   (measured: 4 cards at 337px, then one at 1421px). A 6-column track with
   span-2 / span-3 forces a deliberate 3+2 instead: row 1 = 2+2+2, row 2 =
   3+3, both flush. */
.its-models__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  margin-top: clamp(34px, 3.6vw, 52px);
}

.its-model-card { grid-column: span 2; }

.its-model-card:nth-child(4),
.its-model-card:nth-child(5) { grid-column: span 3; }

.its-model-card {
  background: #fff;
  border-top: 3px solid var(--its-gold);
  padding: clamp(24px, 2.2vw, 34px) clamp(20px, 1.9vw, 28px);
  display: flex;
  flex-direction: column;
}

.its-model-card__num {
  font-family: var(--ds-font-heading);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--its-gold);
  margin-bottom: 14px;
}

.its-model-card__title {
  font-family: var(--ds-font-heading);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--its-navy);
  margin: 0 0 10px;
}

.its-model-card__body {
  font-family: var(--ds-font-heading);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}


/* ── §3 Gap explanation (sits under the big italic statement) ──
   `columns: 2` came off here: these four paragraphs are 58/104/167/107
   chars, so no equal-size 2-up split can balance them and the browser
   stranded 89px against 148px (a ~59px hole under column 1). The element
   now carries .its-split as well and splits by argument instead. The
   border-top deliberately stays on THIS element so the existing
   [data-theme="dark"] .its-gap__body rule below needs no edit. */
.its-gap__body {
  margin-top: clamp(34px, 3.6vw, 56px);
  padding-top: clamp(26px, 2.6vw, 40px);
  border-top: 1px solid rgba(20, 20, 20, 0.14);
}


/* ── §4/§6/§7 Image + text panel ────────────────────────── */
.its-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--its-white);
}

.its-panel--surface { background: #f4f6f9; }

/* §4 was originally a dark band; converted to light so it reads as part of
   the light theme and matches the §6/§7 panels instead of special-casing. */
.its-panel--tech { background: var(--its-white); }

.its-panel__media {
  min-height: clamp(340px, 42vw, 620px);
  overflow: hidden;
}

.its-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image right instead of left */
.its-panel--reverse .its-panel__media { order: 2; }

.its-panel__text {
  padding: clamp(44px, 5vw, 86px) clamp(28px, 4vw, 74px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* This photo's left third is solid black, which reads as dead space when
   centred. Bias the crop right so the lit cable detail fills the frame. */
.its-panel--tech .its-panel__media img { object-position: 72% center; }


/* ── §4 Expertise-area tags ─────────────────────────────── */
.its-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.its-tag {
  font-family: var(--ds-font-heading);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  line-height: 1.2;
  padding: 11px 18px;
  border: 1px solid rgba(9, 16, 29, 0.14);
  background: #f4f6f9;
  color: var(--its-navy);
}


/* ── §6/§7 Checklist (gold CSS marker — no emoji/glyph icons) ── */
.its-checklist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.its-checklist li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
  font-family: var(--ds-font-heading);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--its-navy);
}

.its-checklist li:last-child { border-bottom: none; }

/* Marker: a small gold chevron drawn with borders, not a character. */
.its-checklist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 7px;
  height: 11px;
  border-right: 2.5px solid var(--its-gold);
  border-bottom: 2.5px solid var(--its-gold);
  transform: translateY(-60%) rotate(45deg);
}

.its-checklist--2col {
  columns: 2;
  column-gap: clamp(24px, 2.6vw, 44px);
}

.its-checklist--2col li { break-inside: avoid; }


/* ── §8 Regulated & complex industries ──────────────────── */
.its-industries {
  background: var(--its-white);
  padding: clamp(56px, 6.5vw, 104px) 0;
}

.its-industries__inner { padding: 0 var(--gutter); }

/* .its-industries__head's 88ch cap removed — same reason as §2: it now
   uses the .its-split row, so the column is the measure. */

.its-industries__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.its-industry-pill {
  flex: 0 1 auto;
  font-family: var(--ds-font-heading);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 600;
  line-height: 1.2;
  padding: 14px 22px;
  background: #f4f6f9;
  border-left: 3px solid var(--its-gold);
  color: var(--its-navy);
}

.its-industries__outro {
  margin-top: clamp(28px, 3vw, 44px);
  max-width: 92ch;
}


/* ── §9 Volume vs context (light closing band) ──────────── */
/* Was a dark band; converted to light for theme consistency. It sits between
   the white §8 and the #f4f6f9 form, so the hairline rules (not a tone flip)
   are what delimit it from the form below — same tone, visible seam. */
.its-context {
  background: #f4f6f9;
  border-top: 1px solid rgba(9, 16, 29, 0.10);
  border-bottom: 1px solid rgba(9, 16, 29, 0.10);
  padding: clamp(56px, 6.5vw, 104px) 0;
}

.its-context__inner { padding: 0 var(--gutter); }

.its-context__title {
  font-family: var(--ds-font-heading);
  font-size: clamp(28px, 4vw, 62px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--its-navy);
  margin: 0 0 clamp(26px, 2.8vw, 44px);
}

/* .its-context__body removed entirely (class dropped from the markup too,
   so no dead hook is left). It was the page's second `columns: 2` text
   balancer; §9 now uses the .its-split row like §2/§3/§8. */

/* Stat-weighted outcome tiles — each phrase splits at its natural pivot
   (the amplifier word already at the front of the string: More / Faster /
   Reduced / Better / Stronger) into a headline-weight word plus a
   caption-weight fragment, so every tile reads as a punch instead of a
   sentence. 5 items risk a 4+1 grid stranding (already solved once in this
   file for .its-models__grid below); the same 6-col span-2/span-3 track
   forces a deliberate 3+2 instead of leaving the browser to guess. */
.its-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.its-results__item { grid-column: span 2; }

.its-results__item:nth-child(4),
.its-results__item:nth-child(5) { grid-column: span 3; }

.its-results__item {
  display: flex;
  flex-direction: column;
  background: var(--its-white);
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 1.8vw, 24px);
}

/* The impact word: large, heavy, underlined in gold only under its own
   width (not the full tile) so the accent reads as belonging to the WORD,
   not the box. */
.its-results__stat {
  font-family: var(--ds-font-heading);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--its-navy);
  width: max-content;
  padding-bottom: clamp(9px, 1vw, 12px);
  margin-bottom: clamp(11px, 1.3vw, 16px);
  border-bottom: 3px solid var(--its-gold);
}

/* The supporting fragment: deliberately smaller and lighter than the old
   uniform list text, so it reads as caption, not headline. */
.its-results__desc {
  font-family: var(--ds-font-heading);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  line-height: 1.4;
  color: #4b5563;
}


/* ── Reusable two-column split (§2 / §3 / §8 / §9) ─────────
   Same device as .aisol-split-head / .grc-split-head / .staffsol-split-head
   on the sibling service pages, widened to carry a multi-paragraph lead.
   (Theirs pins a one-line lead right with justify-self:end + text-align:
   right, which is wrong for real prose, so that part is not copied.)

   Replaces two failing patterns on this page:
   (a) a ch-capped single-column text stack above a full-width grid — §2's
       head measured 607px and lead 901px inside a 1139px row, i.e. 632px
       of dead space; §8 had the same shape at 88ch;
   (b) `columns: 2` used as a text balancer (§3, §9).
   The ROW is always full width, so nothing is capped and the house fluid
   rule holds: the grid column is the measure (~65ch at 1254px).

   Left cell = display voice, right cell = body voice. The divider lives on
   the right cell and is deliberately NOT align-self:start, so it stretches
   the full row height while the left cell pins to the top. Any residual
   difference between the column bottoms then reads as column white space
   rather than a hole — which is what lets ONE component serve four cells
   that will never be exactly equal (§8 leans left-heavy, §9 right-heavy). */
.its-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 3.6vw, 72px);
  row-gap: clamp(14px, 1.8vw, 24px);
}

/* Full-width eyebrow row (§2's kicker). Spanning both cells is what puts
   the h2 and the lead's first line on the same baseline; left inside the
   h2 cell it would push the title ~30px down and the row would read as
   misaligned. Beats .its-kicker's 14px bottom margin on source order
   (both are (0,1,0)); row-gap supplies the space instead. */
.its-split__eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* Left cell: either the section h2 itself (§2, §8) or a wrapper for the
   sections whose heading sits ABOVE the row (§3's italic statement,
   §9's title). */
.its-split > .its-h2,
.its-split__lede {
  grid-column: 1;
  align-self: start;
  margin: 0;
}

/* At half width the title owns its column, so it carries more scale than
   the full-width stacked default. Same 26px floor as .its-h2 so nothing
   grows on phones. NOTE: only targets a DIRECT h2 child of .its-split —
   an h2 nested in a .its-split__lede keeps the stacked size. */
.its-split > .its-h2 {
  font-size: clamp(26px, 3.5vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Promoted opening sentence: the display voice inside a __lede. Written
   standalone rather than as an .its-body modifier so it never has to win
   a specificity fight with a section-level descendant rule. */
.its-split__pull {
  font-family: var(--ds-font-heading);
  font-size: clamp(21px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--its-navy);
  text-wrap: balance;
  margin: 0 0 18px;
}

.its-split__pull:last-child { margin-bottom: 0; }

/* Right cell. Hairline reuses the alpha already on .its-tag rather than
   introducing a fourth value. No trailing-margin reset needed: with the
   two section-level .its-body overrides deleted, .its-body:last-child
   above covers it. */
.its-split__body {
  grid-column: 2;
  border-left: 1px solid rgba(9, 16, 29, 0.14);
  padding-left: clamp(24px, 3vw, 56px);
}


/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .its-panel__media { min-height: clamp(300px, 40vw, 460px); }
}

/* Panels stack to one column; image always goes ABOVE the copy, including
   on the --reverse variant (whose `order:2` must be undone or the photo
   would land under the text and orphan the button). */
@media (max-width: 900px) {
  .its-panel {
    grid-template-columns: 1fr;
  }

  .its-panel__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .its-panel--reverse .its-panel__media { order: 0; }

  /* .its-gap__body / .its-context__body dropped from this group: neither
     uses `columns` any more (both now use .its-split, handled below).
     Only .its-checklist--2col still needs the collapse. */
  .its-checklist--2col { columns: 1; }

  .its-split { grid-template-columns: minmax(0, 1fr); }

  .its-split > .its-h2,
  .its-split__lede,
  .its-split__body { grid-column: 1; }

  /* Divider rotates from vertical to horizontal once the cells stack, and
     the readability cap that lived on the desktop rules moves here, where
     the lead genuinely spans the full row width. Constraining an inner
     text block is fine; the SECTION itself stays uncapped. */
  .its-split__body {
    max-width: 92ch;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(9, 16, 29, 0.14);
    padding-top: clamp(16px, 2vw, 24px);
  }
}

/* Below the 3+2 grid's comfortable width, drop to a single column rather
   than 2+2+1 (which would strand the fifth card full-width again). */
@media (max-width: 760px) {
  .its-models__grid { grid-template-columns: 1fr; }

  .its-model-card,
  .its-model-card:nth-child(4),
  .its-model-card:nth-child(5) { grid-column: auto; }
}

/* 3+2 results grid gets cramped before the site's 860px breakpoint; drop to
   2-up. Final (5th) tile spans both columns instead of stranding alone. */
@media (max-width: 860px) {
  .its-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .its-results__item { grid-column: span 1; }

  .its-results__item:nth-child(5) { grid-column: span 2; }
}

@media (max-width: 640px) {
  .its-results { grid-template-columns: minmax(0, 1fr); }

  .its-results__item,
  .its-results__item:nth-child(5) { grid-column: 1; }

  .its-results__stat { font-size: clamp(28px, 8vw, 34px); }

  .its-subbtn {
    width: 100%;
    justify-content: space-between;
  }
}

/* ── Dark mode ──────────────────────────────────────────── */
[data-theme="dark"] .its-models,
[data-theme="dark"] .its-industries,
[data-theme="dark"] .its-context {
  background: var(--t-surface);
}

[data-theme="dark"] .its-context {
  border-top-color: var(--t-border, rgba(255, 255, 255, 0.12));
  border-bottom-color: var(--t-border, rgba(255, 255, 255, 0.12));
}

[data-theme="dark"] .its-results__item { background: var(--t-bg); }

[data-theme="dark"] .its-results__stat { color: var(--t-text); }

[data-theme="dark"] .its-results__desc { color: var(--t-text-muted); }

[data-theme="dark"] .its-panel,
[data-theme="dark"] .its-panel--surface {
  background: var(--t-surface);
}

[data-theme="dark"] .its-h2,
[data-theme="dark"] .its-list-label,
[data-theme="dark"] .its-checklist li,
[data-theme="dark"] .its-industry-pill,
[data-theme="dark"] .its-model-card__title {
  color: var(--t-text);
}

[data-theme="dark"] .its-body,
[data-theme="dark"] .its-model-card__body {
  color: var(--t-text-muted);
}

[data-theme="dark"] .its-kicker { color: var(--t-text-muted); }

[data-theme="dark"] .its-model-card { background: var(--t-bg); }

[data-theme="dark"] .its-industry-pill { background: var(--t-bg); }

[data-theme="dark"] .its-checklist li {
  border-bottom-color: var(--t-border, rgba(255, 255, 255, 0.12));
}

[data-theme="dark"] .its-gap__body {
  border-top-color: var(--t-border, rgba(255, 255, 255, 0.14));
}

[data-theme="dark"] .its-subbtn {
  background: var(--t-text);
  border-color: var(--t-text);
  color: var(--t-bg);
}

[data-theme="dark"] .its-subbtn:hover {
  background: var(--its-gold);
  border-color: var(--its-gold);
  color: #141414;
}

/* .its-split__pull sets its own color (var(--its-navy)), unlike .its-h2/
   .its-body which inherit page defaults, so it needs its own dark-mode
   override. .its-split > .its-h2 sets no color, so the existing
   [data-theme="dark"] .its-h2 rule above still applies to it unchanged. */
[data-theme="dark"] .its-split__pull { color: var(--t-text); }

/* border-color (not border-left-color) so this also covers the divider
   after it rotates to border-top inside the 900px query. */
[data-theme="dark"] .its-split__body {
  border-color: var(--t-border, rgba(255, 255, 255, 0.14));
}

/* No dark-mode edit needed for .its-gap__body: its border-top-color
   override above still applies unchanged, since the seam stayed on that
   element rather than moving onto .its-split. */