@charset "utf-8";
/* ==========================================================================
   TEAM7INDIA — PAGE SECTIONS

   Loaded after style.css, so rules here win ties at equal specificity without
   needing !important.

   ONE RULE, NO EXCEPTIONS:
   Every selector in this file must begin with `body.page-*`.

   That constraint is not stylistic. The reference project this system is
   modelled on used flat, generic class names and ended up needing about forty
   `.page-x .generic-thing` override rules to stop pages colliding with each
   other. Scoping every page rule to its own body class makes that class of
   bug structurally impossible, and it keeps this file safe to grow across
   thirty-plus pages without ever destabilising style.css.

   If a rule belongs to more than one page, it is a component — move it to
   style.css instead of repeating it here.

   CONTENTS
   HOME          body.page-home
   ------------------------------------------------------------------
   (further pages appended below as their content is built, each with its
    own banner comment and its own entry in this list)
   ========================================================================== */


/* ==========================================================================
   HOME  —  body.page-home
   ========================================================================== */

/* ==========================================================================
   HOME — HERO
   --------------------------------------------------------------------------
   A 42/58 composition: copy left, the Workforce Loop and floating glass
   cards right, over layered radial washes and a grid texture.

   Everything here is scoped to body.page-home. The hero is a homepage-only
   composition, so none of it belongs in style.css — and keeping it here means
   the blast radius on the other 31 pages is exactly zero.
   ========================================================================== */

/* ---- Section shell ------------------------------------------------------
   position/isolation now come from .has-deco in style.css; only the padding
   is hero-specific. */
body.page-home .section--hero {
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem) clamp(4rem, 2rem + 6vw, 7rem);
}
/* Deliberately NOT overflow:hidden. The glass cards sit at negative offsets so
   they overlap the frame edges — that overlap is the whole layered effect, and
   clipping the section cuts the top-right card in half. The background layer
   cannot overflow anyway: it is inset:0, so gradients paint within its own
   bounds. Anything that did escape is caught by body{overflow-x:hidden}. */

/* The background is the shared .deco primitive; the hero only supplies its
   own values. Denser, stronger grid than the other sections and unmasked
   (deco--grid-full) because the hero is short enough to carry it edge to
   edge — the tall sections would tile it into graph paper. */
body.page-home .section--hero .deco {
  --deco-a-size: 60% 55%; --deco-a-pos: 78% 18%; --deco-a-alpha: .16;
  --deco-b-size: 45% 45%; --deco-b-pos: 12% 4%;  --deco-b-alpha: .10;
  --deco-grid-gap: 72px;  --deco-grid-alpha: .032;
}
/* Fade the whole layer out toward the bottom so it doesn't collide with the
   next section's edge. Progressive — without it the wash simply runs to the
   section boundary, which is acceptable rather than broken. */
@supports (mask-image: linear-gradient(#000, transparent)) {
  body.page-home .section--hero .deco {
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }
}

/* ---- Grid --------------------------------------------------------------- */
body.page-home .hero-grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) {
  body.page-home .hero-grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
}

/* ---- Trust badge -------------------------------------------------------- */
body.page-home .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.page-home .hero-badge__dot {
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,208,122,.18);
  flex: none;
}

/* ---- Headline -----------------------------------------------------------
 * THE constraint on this layout. "Facilitate Performance." is 23 characters
 * and measures ~462px at 44px. The left column is 42% of the container, so
 * the line only fits at full size from about 1370px up. Below that the font
 * has to track the column or the line re-wraps and orphans "Facilitate" —
 * which reads as a bug, not a decision.
 *
 * The preferred term is therefore steep (2.8vw) with a low base, so at 1025px
 * — the narrowest two-column width — it resolves to ~34px against a ~397px
 * column, and it reaches the 44px cap at ~1371px, just before the container
 * stops growing. Measured at 1025 / 1280 / 1440 / 1680, not estimated.
 * If you change the column ratio or the headline copy, re-check this first. */
body.page-home .hero-copy h1 {
  font-size: clamp(2rem, 0.35rem + 2.8vw, 2.75rem);
  letter-spacing: var(--ls-tighter);
}
body.page-home .hero-copy .lead { max-width: 42ch; }
body.page-home .hero-copy .cta-pair__micro { margin-top: var(--sp-4); }

/* ---- Trusted-by strip --------------------------------------------------- */
body.page-home .hero-trust {
  margin-top: clamp(2rem, 1rem + 2vw, 3rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
body.page-home .hero-trust__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
body.page-home .hero-trust__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
body.page-home .hero-trust__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
body.page-home .hero-trust__list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--c-violet-300);
  flex: none;
}

/* ---- Visual column ------------------------------------------------------ */
body.page-home .hero-visual { position: relative; }

body.page-home .hero-visual__frame {
  position: relative;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
}
body.page-home .hero-visual__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.page-home .hero-visual .flow--loop { margin-inline: auto; max-width: 30rem; }

/* ---- Glass cards -------------------------------------------------------- */
body.page-home .glass {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow-lg);
  /* ≥88% opaque so --text stays above 4.5:1 over the violet wash behind. */
  background: rgba(255,255,255,.88);
}
@supports (backdrop-filter: blur(1px)) {
  body.page-home .glass {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(14px) saturate(150%);
  }
}
body.page-home .glass__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
body.page-home .glass__suffix { color: var(--accent-ink); }
body.page-home .glass__label {
  margin-top: var(--sp-1);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Below the desktop breakpoint the cards sit in a plain row under the frame.
   Absolute positioning only kicks in where there is room for it. */
body.page-home .hero-visual__cards,
body.page-home .glass { position: relative; }

@media (max-width: 1024px) {
  body.page-home .hero-visual {
    display: grid;
    gap: var(--sp-4);
  }
  body.page-home .hero-visual__frame { order: -1; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  body.page-home .hero-visual {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.page-home .hero-visual__frame { grid-column: 1 / -1; }
}

/* 1025-1199 is two-column, but the visual column is too narrow for the frame
   to hold its labels clear of an overlapping card: at 1025 the "9" card lands
   directly on the loop's "Workforce Facilitation™" label. So the cards stay in
   a row here and only float over the frame from 1200px, where there is room.
   flex rather than the 3-up grid used below 1025 — at this width thirds are
   narrower than the longest card label, and content sizing avoids that. */
@media (min-width: 1025px) and (max-width: 1199px) {
  body.page-home .hero-visual {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
  }
  body.page-home .hero-visual__frame { flex: 1 1 100%; }
  body.page-home .glass { flex: 1 1 auto; }
}

/* Card placement is constrained by the loop's own labels, not by taste. The
   diagram carries two labels down its left flank — "06 Continuous Evolution"
   at ~48% of frame height and "05 Workforce Facilitation™" at ~72% — so the
   left-hand card has to sit outside that band. It was at bottom:16%, which
   landed straight on the 05 label once the frame narrowed. Anchored to the
   bottom edge it clears the band at every width, because the gap below the
   last label is the one part of the frame that does not compress. */
@media (min-width: 1200px) {
  body.page-home .glass { position: absolute; }
  body.page-home .glass--1 { top: 8%;  right: -3%; }
  body.page-home .glass--2 { bottom: 0;  left: -6%; }
  body.page-home .glass--3 { bottom: -5%; right: 8%; }
}

/* ==========================================================================
   HOME — HERO MOTION
   --------------------------------------------------------------------------
   Entrance is pure CSS and gated on .js, so a JavaScript failure shows the
   hero immediately rather than leaving it at opacity 0.

   Every entrance rule uses `animation-fill-mode: both`. That matters more
   than it looks: the global prefers-reduced-motion block in style.css
   collapses all durations to 0.001ms, and `both` means each element snaps to
   its END state instead of being stranded invisible. Without it, reduced
   motion would hide the entire hero.
   ========================================================================== */

@keyframes t7i-hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes t7i-hero-pop {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes t7i-hero-scale {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: none; }
}
/* Returns to translateY(0) at both ends, so a truncated run lands neutral. */
@keyframes t7i-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.js body.page-home [data-hero] {
  animation: t7i-hero-rise 620ms var(--ease-soft) both;
}
.js body.page-home [data-hero="visual"] { animation-name: t7i-hero-scale; }
.js body.page-home [data-hero="cta"]    { animation-name: t7i-hero-pop; }

/* The <h1> is the LCP element. Anything starting at opacity 0 defers LCP
   until it paints, so the first line starts at 60ms — not 400ms — and the
   whole sequence finishes inside 700ms. Choreography must not cost a Core
   Web Vital. */
.js body.page-home [data-hero="badge"]   { animation-delay: 0ms; }
.js body.page-home [data-hero="line-1"]  { animation-delay: 60ms; }
.js body.page-home [data-hero="line-2"]  { animation-delay: 120ms; }
.js body.page-home [data-hero="line-3"]  { animation-delay: 180ms; }
.js body.page-home [data-hero="visual"]  { animation-delay: 120ms; animation-duration: 760ms; }
.js body.page-home [data-hero="lead"]    { animation-delay: 240ms; }
.js body.page-home [data-hero="cta"]     { animation-delay: 300ms; }
.js body.page-home [data-hero="trust"]   { animation-delay: 360ms; }
.js body.page-home [data-hero^="glass-"] { animation-delay: 420ms; }
.js body.page-home [data-hero="glass-2"] { animation-delay: 500ms; }
.js body.page-home [data-hero="glass-3"] { animation-delay: 580ms; }

/* The headline lines animate individually, so they must be block-level. */
body.page-home .hero-copy .hero__line { display: block; }

/* Continuous float, desktop only. Three different durations so the cards
   never sync into a single pulsing block. Runs as a second animation after
   the entrance completes. */
/* 1200px, matching the breakpoint where the cards start floating over the
   frame. In the in-flow row below that width a drifting card would push
   against its neighbours rather than reading as depth. */
@media (min-width: 1200px) {
  .js body.page-home .glass--1 { animation: t7i-hero-rise 620ms var(--ease-soft) 420ms both, t7i-hero-float  9s ease-in-out 1.2s infinite; }
  .js body.page-home .glass--2 { animation: t7i-hero-rise 620ms var(--ease-soft) 500ms both, t7i-hero-float 11s ease-in-out 1.6s infinite; }
  .js body.page-home .glass--3 { animation: t7i-hero-rise 620ms var(--ease-soft) 580ms both, t7i-hero-float  7s ease-in-out 0.9s infinite; }
}

/* Secondary CTA arrow travels a little further than the global 2px. */
body.page-home .hero-copy .btn:hover { transform: translateY(-2px); }
body.page-home .hero-copy .btn--ghost:hover .btn__arrow { transform: translateX(4px); }

/* Navbar floats transparent over the hero wash until scrolled. Scoped to the
   homepage — the header is a shared partial across all 32 pages, and the
   scrolled state (blur + hairline) is already handled in style.css. */
body.page-home .site-header:not(.is-scrolled) {
  background: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .js body.page-home .glass--1,
  .js body.page-home .glass--2,
  .js body.page-home .glass--3 { animation: none; opacity: 1; transform: none; }
}

/* Framework spine and its sidebar note. The note is sticky so it stays with
   the reader through nine stages rather than scrolling away at stage two.
   Moved from body.page-home when the nine-stage spine left the homepage for
   How We Work — .split is a single column until something widens it, so
   without this the spine runs full-bleed and the note drops beneath it. */
@media (min-width: 1025px) {
  body.page-how-we-work #framework .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  body.page-how-we-work #framework .split > div:last-child {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}

/* Capability tabs: the chip cluster balances the copy column rather than
   filling the row edge to edge. */
@media (min-width: 769px) {
  body.page-home #capability .chip-list { align-content: start; }
}

/* Pods sit on the inverted band, where the card borders would otherwise
   disappear against the gradient. */
body.page-home #pods .card--dark { border: 1px solid var(--line-invert); }

/* The metric row is the only place counters run on this page. Tabular
   figures stop the numbers jittering horizontally as they count up. */
body.page-home .metric__value { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   HOME — SOLUTIONS, interactive model selector
   --------------------------------------------------------------------------
   Replaces the six-card grid. Selection is handled entirely by the existing
   initTabs (role=tab / role=tabpanel), so there is no JavaScript here.

   Deliberately NOT built on .tabs__list: the Capability section immediately
   below already uses that centred pill group, and two consecutive sections
   sharing one component reads as a mistake. This is an icon rail instead —
   different shape, different density, and a hover treatment the pill strip
   does not have.
   ========================================================================== */

/* ---- Nav rail ------------------------------------------------------------
   Mobile first: a swipeable single row, same overflow pattern .tabs__list
   already uses. It becomes a real grid once there is room. */
body.page-home .sol-nav {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-2);
  margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
}
body.page-home .sol-nav::-webkit-scrollbar { display: none; }
body.page-home .sol-nav__item { flex: 0 0 13rem; }

@media (min-width: 641px) {
  body.page-home .sol-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
  body.page-home .sol-nav__item { flex: none; }
}
@media (min-width: 1025px) {
  body.page-home .sol-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

body.page-home .sol-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    background var(--t-fast), border-color var(--t-fast), color var(--t-fast),
    box-shadow var(--t-base), transform var(--t-base);
}

/* The accent border the brief asks for, as a bar that draws in from the left
   rather than a colour swap — a 2px edge appearing on hover shifts nothing,
   where a border-width change would reflow the label. */
body.page-home .sol-nav__item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
body.page-home .sol-nav__item:hover {
  background: var(--surface-tint);
  border-color: var(--line-brand);
  color: var(--text);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
body.page-home .sol-nav__item:hover::after,
body.page-home .sol-nav__item[aria-selected="true"]::after { transform: scaleX(1); }
body.page-home .sol-nav__item:hover .sol-nav__icon { transform: translateY(-2px); }
body.page-home .sol-nav__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

body.page-home .sol-nav__item[aria-selected="true"] {
  background: var(--c-spring-50);
  border-color: var(--line-accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-md);
}
body.page-home .sol-nav__item[aria-selected="true"] .sol-nav__icon {
  background: rgba(255, 255, 255, .78);
  color: var(--accent-ink);
}

body.page-home .sol-nav__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-tint);
  color: var(--brand);
  transition: transform var(--t-base), background var(--t-fast), color var(--t-fast);
}
body.page-home .sol-nav__icon svg { width: 18px; height: 18px; }
body.page-home .sol-nav__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}

/* ---- Panel --------------------------------------------------------------
   .sol-panel sets display:grid, which would beat the UA [hidden] rule, so the
   hidden case has to be restated or every panel renders at once. */
body.page-home .sol-panel {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
body.page-home .sol-panel[hidden] { display: none; }

@media (min-width: 1025px) {
  body.page-home .sol-panel { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
}

body.page-home .sol-panel__index {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-strong);
}
body.page-home .sol-panel__title { margin-top: var(--sp-2); }
body.page-home .sol-panel__text {
  margin-top: var(--sp-4);
  color: var(--text-muted);
  max-width: 46ch;
}

body.page-home .sol-features {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  padding: 0;
}
body.page-home .sol-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
}
body.page-home .sol-feature__tick {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: var(--r-pill);
  background: var(--c-spring-50);
  color: var(--accent-ink);
}
body.page-home .sol-feature__tick svg { width: 11px; height: 11px; }

body.page-home .sol-trust {
  margin-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
}
body.page-home .sol-panel__cta { margin-top: var(--sp-6); }

/* ---- Visual -------------------------------------------------------------
   Frame borrows the hero's language — same radius, same elevation, same wash
   — so the two sections read as siblings rather than two separate ideas. */
body.page-home .sol-panel__visual {
  position: relative;
  isolation: isolate;
}
body.page-home .sol-panel__visual::before {
  content: "";
  position: absolute;
  inset: -10% -8%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(58% 55% at 72% 20%, rgba(91, 79, 233, .16) 0%, transparent 62%),
    radial-gradient(46% 46% at 16% 84%, rgba(34, 208, 122, .12) 0%, transparent 60%);
}
body.page-home .sol-frame {
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
}
body.page-home .sol-frame__label {
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Capped rather than fluid. The diagram text is sized in viewBox units, so
   letting the SVG stretch to the full column would scale the labels up past
   the body copy on wide screens and shrink them below legibility on narrow
   ones. A fixed ceiling keeps the rendered label size stable. */
body.page-home .sol-diagram {
  display: block;
  width: 100%;
  max-width: 33rem;
  height: auto;
  margin-inline: auto;
}

/* ---- Diagram primitives -------------------------------------------------- */
body.page-home .sd-box { fill: var(--surface-tint); stroke: var(--line-brand); stroke-width: 1.5; }
body.page-home .sd-box--accent { fill: var(--c-spring-50); stroke: var(--line-accent); }
body.page-home .sd-ring { fill: none; stroke: var(--line-brand); stroke-width: 1.5; stroke-dasharray: 7 7; }
body.page-home .sd-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; }
body.page-home .sd-dot--accent { fill: var(--accent); stroke: none; }
body.page-home .sd-link { fill: none; stroke: var(--c-violet-300); stroke-width: 1.5; stroke-linecap: round; }
body.page-home .sd-link--accent { stroke: var(--accent); }
body.page-home .sd-track { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
body.page-home .sd-track--accent { stroke: var(--accent); }
body.page-home .sd-t {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  fill: var(--text-muted);
  text-anchor: middle;
}
body.page-home .sd-t--accent { fill: var(--accent-ink); }
body.page-home .sd-t--left { text-anchor: start; }

/* Phone: the SVG is scaled down hard, so the label size has to be scaled up
   in viewBox units to survive it. 17 rather than 19 — the longest in-box
   label, "EMBEDDED TEAM", runs to the edges of its 168-unit box above that. */
@media (max-width: 640px) {
  body.page-home .sd-t { font-size: 17px; }
}

/* ---- Entrance ------------------------------------------------------------
   Keyed on :not([hidden]) rather than a class. Un-hiding a panel takes it from
   display:none to rendered, which restarts its CSS animations — so this fires
   on first paint AND on every tab switch, with no JavaScript involved.

   animation-fill-mode: both throughout. The global prefers-reduced-motion
   block collapses durations to 0.001ms, and `both` makes each element snap to
   its end state instead of being stranded at opacity 0. */
@keyframes t7i-sol-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes t7i-sol-visual-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

body.page-home .sol-panel:not([hidden]) .sol-panel__index,
body.page-home .sol-panel:not([hidden]) .sol-panel__title,
body.page-home .sol-panel:not([hidden]) .sol-panel__text,
body.page-home .sol-panel:not([hidden]) .sol-feature,
body.page-home .sol-panel:not([hidden]) .sol-trust,
body.page-home .sol-panel:not([hidden]) .sol-panel__cta {
  animation: t7i-sol-in 440ms var(--ease-soft) both;
}
body.page-home .sol-panel:not([hidden]) .sol-panel__title { animation-delay: 40ms; }
body.page-home .sol-panel:not([hidden]) .sol-panel__text  { animation-delay: 80ms; }
body.page-home .sol-panel:not([hidden]) .sol-feature:nth-child(1) { animation-delay: 140ms; }
body.page-home .sol-panel:not([hidden]) .sol-feature:nth-child(2) { animation-delay: 195ms; }
body.page-home .sol-panel:not([hidden]) .sol-feature:nth-child(3) { animation-delay: 250ms; }
body.page-home .sol-panel:not([hidden]) .sol-feature:nth-child(4) { animation-delay: 305ms; }
body.page-home .sol-panel:not([hidden]) .sol-feature:nth-child(5) { animation-delay: 360ms; }
body.page-home .sol-panel:not([hidden]) .sol-trust      { animation-delay: 400ms; }
body.page-home .sol-panel:not([hidden]) .sol-panel__cta { animation-delay: 450ms; }
body.page-home .sol-panel:not([hidden]) .sol-panel__visual {
  animation: t7i-sol-visual-in 560ms var(--ease-soft) 100ms both;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .sol-panel:not([hidden]) .sol-panel__index,
  body.page-home .sol-panel:not([hidden]) .sol-panel__title,
  body.page-home .sol-panel:not([hidden]) .sol-panel__text,
  body.page-home .sol-panel:not([hidden]) .sol-feature,
  body.page-home .sol-panel:not([hidden]) .sol-trust,
  body.page-home .sol-panel:not([hidden]) .sol-panel__cta,
  body.page-home .sol-panel:not([hidden]) .sol-panel__visual {
    animation: none;
    opacity: 1;
    transform: none;
  }
  body.page-home .sol-nav__item::after { transition: none; }
}


/* ==========================================================================
   HOME — INDUSTRIES, asymmetric two-tier grid
   --------------------------------------------------------------------------
   Card size is information, not decoration: large = a sector with its own
   content and its own destination on industries.html, small = one that page
   files under future expansion. Reveal and hover are the shared primitives
   (data-reveal + initReveal); nothing new runs on the main thread.
   ========================================================================== */

body.page-home .section--industries { background: var(--bg); }
body.page-home .section--industries .deco {
  --deco-a-size: 52% 42%; --deco-a-pos: 82% 8%;  --deco-a-alpha: .13;
  --deco-b-size: 42% 38%; --deco-b-pos: 10% 92%; --deco-b-alpha: .10;
}



/* ---- Grids --------------------------------------------------------------
   Mobile first, single column. The asymmetry is a desktop-only affordance —
   below 1025 there is not enough width for a span-4 card to read as featured
   rather than merely wide. */
body.page-home .ind-grid {
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  padding: 0;
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
}

@media (min-width: 641px) {
  body.page-home .ind-grid--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-home .ind-grid--next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-home .ind-card--lead,
  body.page-home .ind-card--wide { grid-column: 1 / -1; }
}

@media (min-width: 1025px) {
  body.page-home .ind-grid--lead { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.page-home .ind-grid--next { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* One tall hero card, two stacked beside it, one full-width banner. Four
     cards, three different shapes — which is the point.
     The two middle cards need an explicit column or auto-placement drops them
     into single columns side by side, ~150px wide each, instead of stacking
     them in the 2-column gutter the lead card leaves. */
  body.page-home .ind-card--lead { grid-column: 1 / 5; grid-row: span 2; }
  body.page-home .ind-grid--lead > .ind-card:not(.ind-card--lead):not(.ind-card--wide) {
    grid-column: 5 / -1;
  }
  body.page-home .ind-card--wide { grid-column: 1 / -1; }

  /* The lead spans two rows, so its height is set by the two cards beside it
     rather than by its own content. That slack has to go somewhere and both
     extremes are wrong: all of it in the body left ~400px of dead white above
     the CTA, and all of it in the art (which is what shipped) inflated the
     panel to 755px around a 205px mark — 73% of a 1000px card was empty
     decoration.

     Split it, but weight the split towards the art AND scale the lead mark up
     to match. Capping the art at 300px was the first attempt and it was
     wrong: it left ~300px of stark white between the paragraph and the CTA,
     which reads worse than the panel did. A void in a tinted panel with a
     260px illustration in it is proportionate padding; the same void in flat
     white body copy is obviously a mistake.

     Final answer: the art takes ALL of it and the mark scales to 300px. A
     capped art panel still left ~100px of flat white between the paragraph
     and the CTA, and at full page scale that gulf was the thing the eye
     caught — a lone link marooned at the bottom of a card. Uncapped, the CTA
     sits directly under its paragraph where the eye finishes reading, and the
     slack becomes generous padding inside a tinted panel that already holds a
     300px illustration. Empty space in a bed reads as composition; empty
     space under body copy reads as a mistake. */
  body.page-home .ind-card--lead .ind-card__art { flex: 1 1 auto; }
  /* 0 0 auto, not 1 1 auto. With both children flexible they SHARE the slack,
     which is why uncapping the art alone changed nothing — the body kept its
     ~115px gulf. The body has to be rigid for the art to absorb all of it. */
  body.page-home .ind-card--lead .ind-card__body { flex: 0 0 auto; }
  /* Featured card, so the description carries body size rather than the
     small size the compact cards use. Adds weight where the hierarchy wants
     it and takes another line out of the slack. */
  body.page-home .ind-card--lead .ind-card__text { font-size: var(--fs-body); }
}

/* ---- Card ---------------------------------------------------------------- */
body.page-home .ind-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* .lift supplies the transition and the hover; these two values are the
     only things this card does differently from the default. -6px with an
     xl shadow was a Dribbble lift on a ten-card grid — every hover felt like
     the card jumped. -3px and one shadow step is the enterprise register. */
  --lift-y: -3px;
  --lift-shadow: var(--shadow-lg);
}
/* Matches the focus treatment .card already uses, so a keyboard user gets the
   same ring here as everywhere else on the site. */
body.page-home .ind-card:has(.ind-card__link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Bed, radius, clipping and hover scale all come from .figure/.figure--flush.

   HEIGHT drives the mark, not width. Every viewBox here is 240x140 but the
   artwork inside sits at a different scale in each one, so width-driven
   sizing rendered ten marks at ten different optical weights. A fixed height
   makes them consistent, and it is what lets the band be shallow: the panel
   is now mark + padding rather than a square-ish block waiting to be filled.

   223px of art became 132px. That is the 40% reduction, and it comes out of
   empty space rather than the illustration. */
body.page-home .ind-card__art { --figure-pad: clamp(0.9rem, 0.75rem + 0.5vw, 1.15rem); }
body.page-home .ind-card__mark {
  display: block;
  width: auto;
  max-width: 100%;
  height: 96px;
}
/* 300px is the desktop value, where the lead card is 4 of 6 columns and the
   mark's 514px width fits comfortably. Below 1025 the card goes full width but
   the viewport is narrower, so max-width clamps the WIDTH while the explicit
   height holds — the SVG letterboxes inside a 336px panel with dead margins
   either side. Height has to come down with the viewport, not just width. */
body.page-home .ind-card--lead .ind-card__mark { height: 200px; }
@media (min-width: 1025px) {
  body.page-home .ind-card--lead .ind-card__mark { height: 300px; }
}
/* The wide card's art is a side panel whose height is set by the body beside
   it, not by the mark. At the shared 96px the mark sat in a 245px panel and
   left 61% of it empty — the one card the height rule made worse, not
   better. */
body.page-home .ind-card--wide .ind-card__mark { height: 150px; }

/* Stroke width has to be corrected PER SCALE, because the viewBox is fixed at
   240x140 and the rendered height is not. A compact mark at 96px draws at
   0.69x, so an authored 3.0 lands at ~2.1px on screen. The lead mark at 280px
   draws at 2.0x, where the same 3.0 would land at 6px — a different, much
   heavier illustration style on the same grid.

   Authored values are chosen so every mark resolves to ~2.1-2.6px on screen:
   the ten illustrations should read as one set, whatever size they run at. */
body.page-home .ind-card__mark .im-line,
body.page-home .ind-card__mark .im-out,
body.page-home .ind-card__mark .im-shape { stroke-width: 3; }
body.page-home .ind-card__mark .im-node { stroke-width: 2.8; }
body.page-home .ind-card__mark .im-accl { stroke-width: 3.4; }

body.page-home .ind-card--lead .ind-card__mark .im-line,
body.page-home .ind-card--lead .ind-card__mark .im-out,
body.page-home .ind-card--lead .ind-card__mark .im-shape { stroke-width: 1.2; }
body.page-home .ind-card--lead .ind-card__mark .im-node { stroke-width: 1.2; }
body.page-home .ind-card--lead .ind-card__mark .im-accl { stroke-width: 1.5; }

body.page-home .ind-card--wide .ind-card__mark .im-line,
body.page-home .ind-card--wide .ind-card__mark .im-out,
body.page-home .ind-card--wide .ind-card__mark .im-shape { stroke-width: 2; }
body.page-home .ind-card--wide .ind-card__mark .im-node { stroke-width: 1.9; }
body.page-home .ind-card--wide .ind-card__mark .im-accl { stroke-width: 2.3; }

/* Tighter than the default card inset, and the gap is uneven on purpose: the
   eyebrow belongs to the title, so it sits close to it, while the paragraph
   gets its own air. Even gaps made four elements read as four separate items
   rather than one heading with support. */
body.page-home .ind-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-2);
  padding: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem);
}
body.page-home .ind-card__text { margin-top: var(--sp-1); }
body.page-home .ind-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.page-home .ind-card__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-tint);
  color: var(--brand);
  transition: transform var(--t-base), background var(--t-fast), color var(--t-fast);
}
body.page-home .ind-card__icon svg { width: 17px; height: 17px; }
body.page-home .ind-card:hover .ind-card__icon {
  transform: rotate(-8deg);
  background: var(--c-spring-50);
  color: var(--accent-ink);
}

body.page-home .ind-card__title { font-size: var(--fs-h4); }
body.page-home .ind-card--lead .ind-card__title { font-size: var(--fs-h3); }
body.page-home .ind-card__text {
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 46ch;
}

body.page-home .ind-card__cta { margin-top: auto; padding-top: var(--sp-3); }
body.page-home .ind-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--brand-strong);
}
/* Stretched link. The ::after is absolute against .ind-card, so the whole card
   is the hit target while the accessible name stays on the real anchor. The
   link itself must NOT be positioned or this would only cover the text. */
body.page-home .ind-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
body.page-home .ind-card:hover .btn__arrow { transform: translateX(4px); }

/* The wide banner card turns horizontal where there is room for it. */
@media (min-width: 1025px) {
  body.page-home .ind-card--wide { flex-direction: row; }
  /* 36%, not 40%. The banner reads as content with a mark beside it rather
     than two equal halves, which is what the extra four points bought. */
  body.page-home .ind-card--wide .ind-card__art {
    flex: 0 0 36%;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  body.page-home .ind-card--wide .ind-card__body { justify-content: center; }
}

/* ---- Tier divider -------------------------------------------------------- */
body.page-home .ind-divide {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: clamp(3rem, 2rem + 2.5vw, 4.5rem);
}
body.page-home .ind-divide::before,
body.page-home .ind-divide::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
body.page-home .ind-divide__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---- Capability strip ---------------------------------------------------- */
body.page-home .ind-strip {
  margin-top: clamp(3rem, 2rem + 2.5vw, 4.5rem);
  padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
body.page-home .ind-strip__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.page-home .ind-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0;
  margin-top: var(--sp-5);
}
body.page-home .ind-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition:
    transform var(--t-base), box-shadow var(--t-base),
    border-color var(--t-fast), color var(--t-fast);
}
body.page-home .ind-strip__icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--surface-tint);
  color: var(--brand);
  transition: transform var(--t-base), background var(--t-fast), color var(--t-fast);
}
body.page-home .ind-strip__icon svg { width: 16px; height: 16px; }
body.page-home .ind-strip__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-accent);
  color: var(--text);
}
body.page-home .ind-strip__item:hover .ind-strip__icon {
  transform: rotate(-8deg);
  background: var(--c-spring-50);
  color: var(--accent-ink);
}

/* ---- Diagram primitives -------------------------------------------------
   Six of them, shared by all ten marks. This is the whole reason ten separate
   illustrations hold one visual style — no mark introduces its own colour,
   weight or fill. */
body.page-home .im-shape { fill: var(--surface); stroke: var(--line-brand); stroke-width: 2; }
body.page-home .im-out   { fill: none; stroke: var(--line-brand); stroke-width: 2; }
body.page-home .im-line  { fill: none; stroke: var(--c-violet-300); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.page-home .im-node  { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
body.page-home .im-acc   { fill: var(--accent); }
body.page-home .im-accl  { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Reveal and hover on the mark ---------------------------------------
   Two transforms want the same element, so specificity decides: the reveal
   rule sits at .is-visible, and hover adds one more class on top of it so it
   always wins. The reveal state is .js-scoped — without JavaScript the mark
   is simply never scaled down, and the plain hover rule below still applies. */
.js body.page-home .ind-card .ind-card__mark {
  transform: scale(.94);
  transition: transform var(--t-slow);
}
.js body.page-home .ind-card.is-visible .ind-card__mark { transform: none; }
.js body.page-home .ind-card.is-visible:hover .ind-card__mark { transform: scale(1.05); }

body.page-home .ind-card__mark { transition: transform var(--t-slow); }
body.page-home .ind-card:hover .ind-card__mark { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .js body.page-home .ind-card .ind-card__mark,
  .js body.page-home .ind-card.is-visible .ind-card__mark { transform: none; }
  body.page-home .ind-card:hover .ind-card__icon,
  body.page-home .ind-strip__item:hover .ind-strip__icon { transform: none; }
}


/* ==========================================================================
   HOME — TALENT, split intro + featured centrepiece + category grid
   --------------------------------------------------------------------------
   Replaces the Capability Ecosystem tabs. Counters are the existing
   initCounters (data-count-to, already IntersectionObserver-driven and already
   reduced-motion aware); reveals are the existing data-reveal. No new JS.

   The .im-* diagram primitives from the Industries block are reused verbatim
   for the featured mark — that is deliberate, and is what makes "one
   consistent visual language" true across the two sections rather than
   asserted.
   ========================================================================== */

body.page-home .section--talent { background: var(--bg); }
body.page-home .section--talent .deco {
  --deco-a-size: 50% 40%; --deco-a-pos: 14% 6%;  --deco-a-alpha: .14;
  --deco-b-size: 44% 40%; --deco-b-pos: 88% 88%; --deco-b-alpha: .11;
}

/* ---- Split top ----------------------------------------------------------- */
body.page-home .tal-top {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) {
  body.page-home .tal-top { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); }
}
body.page-home .tal-intro .lead { max-width: 46ch; }

/* ---- Statistics ---------------------------------------------------------- */
body.page-home .tal-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: 0;
  margin-top: var(--sp-7);
}
body.page-home .tal-stat {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
body.page-home .tal-stat__value {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
  line-height: 1.05;
  /* The counter rewrites this node every frame; tabular figures stop the
     number jittering sideways as it counts. */
  font-variant-numeric: tabular-nums;
}
body.page-home .tal-stat__suffix { color: var(--accent-ink); }
body.page-home .tal-stat__label {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Three of these four figures used to ship with a dashed border and a visible
   "to be confirmed" line, because they have nothing behind them. Both were
   removed on request, so all four now render identically. The figures are
   unchanged and still unsubstantiated — that is recorded in the pre-launch
   checklist in README.md, item 2, which is the only place it is recorded. */

/* ---- Featured card ------------------------------------------------------- */
body.page-home .tal-feature__card {
  position: relative;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
}
body.page-home .tal-feature__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
body.page-home .tal-feature__art { margin-top: var(--sp-4); --figure-pad: var(--sp-5); }
body.page-home .tal-feature__mark {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
}
body.page-home .tal-feature__title { margin-top: var(--sp-5); font-size: var(--fs-h3); }
body.page-home .tal-feature__text {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
}
body.page-home .tal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
  margin-top: var(--sp-4);
}
body.page-home .tal-feature__cta { margin-top: var(--sp-5); }

/* Skill tags lift in sequence on card hover — "animate gently", not a wave. */
body.page-home .tal-tags .chip { transition: transform var(--t-base), border-color var(--t-fast); }
body.page-home .tal-feature__card:hover .tal-tags .chip,
body.page-home .tal-card:hover .tal-tags .chip { transform: translateY(-2px); }
body.page-home .tal-tags .chip:nth-child(2) { transition-delay: 40ms; }
body.page-home .tal-tags .chip:nth-child(3) { transition-delay: 80ms; }
body.page-home .tal-tags .chip:nth-child(4) { transition-delay: 120ms; }
body.page-home .tal-tags .chip:nth-child(5) { transition-delay: 160ms; }

/* ---- Category grid ------------------------------------------------------- */
body.page-home .tal-grid {
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
  grid-template-columns: 1fr;
  padding: 0;
  margin-top: clamp(3rem, 2rem + 2.5vw, 4.5rem);
}
@media (min-width: 641px)  { body.page-home .tal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { body.page-home .tal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

body.page-home .tal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  /* Hover is the .lift default — nothing to declare. */
}
body.page-home .tal-card:has(.tal-card__link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
body.page-home .tal-card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--surface-tint);
  color: var(--brand);
  transition: transform var(--t-base), background var(--t-fast), color var(--t-fast);
}
body.page-home .tal-card__icon svg { width: 24px; height: 24px; }
body.page-home .tal-card:hover .tal-card__icon {
  transform: scale(1.06) rotate(-6deg);
  background: var(--c-spring-50);
  color: var(--accent-ink);
}
body.page-home .tal-card__title { font-size: var(--fs-h4); }
body.page-home .tal-card__text {
  color: var(--text-muted);
  font-size: var(--fs-small);
}
body.page-home .tal-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--brand-strong);
}
/* Stretched over the whole card. Must not be positioned itself or the ::after
   would only cover the link text. */
body.page-home .tal-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
body.page-home .tal-card:hover .btn__arrow { transform: translateX(4px); }

/* ---- Skill marquee ------------------------------------------------------- */
body.page-home .tal-marquee {
  margin-top: clamp(3rem, 2rem + 2.5vw, 4.5rem);
  padding-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  border-top: 1px solid var(--line);
}
body.page-home .tal-marquee__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
/* Viewport, track, seam maths and the reduced-motion fallback all come from the
   shared .marquee primitive in style.css. Only the spacing is local. */
body.page-home .tal-marquee .marquee__viewport { margin-top: var(--sp-5); }
body.page-home .tal-marquee .chip { transition: transform var(--t-fast), border-color var(--t-fast); }
body.page-home .tal-marquee .chip:hover {
  transform: translateY(-3px);
  border-color: var(--line-accent);
}

/* ---- Bottom CTA ---------------------------------------------------------- */
body.page-home .tal-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: clamp(3rem, 2rem + 2.5vw, 4.5rem);
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--surface);
  background-image: linear-gradient(140deg, var(--surface) 0%, var(--surface-tint) 100%);
  box-shadow: var(--shadow-lg);
}
body.page-home .tal-cta__copy { flex: 1 1 22rem; }
body.page-home .tal-cta__title { font-size: var(--fs-h3); }
body.page-home .tal-cta__text {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  max-width: 46ch;
}
body.page-home .tal-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
  /* The marquee's reduced-motion fallback now lives with the primitive in
     style.css, so both marquees on this page inherit it. */
  body.page-home .tal-card:hover,
  body.page-home .tal-marquee .chip:hover { transform: none; }
  body.page-home .tal-card:hover .tal-card__icon,
  body.page-home .tal-feature__card:hover .tal-tags .chip,
  body.page-home .tal-card:hover .tal-tags .chip { transform: none; }
}


/* ==========================================================================
   HOME — HOW WE WORK, the engagement journey
   --------------------------------------------------------------------------
   Replaces the nine-stage Framework spine. The scroll-filling progress line
   needs no JavaScript: initReveal already adds .is-visible per step, so each
   step's fill segment transitions scaleY 0 -> 1 and its number badge turns
   accent at that moment. Steps have no gap between them — the spacing is
   padding INSIDE each step — because a gap would cut the line into pieces.
   ========================================================================== */

body.page-home .section--journey { background: var(--bg); }
body.page-home .section--journey .deco {
  --deco-a-size: 48% 38%; --deco-a-pos: 84% 10%; --deco-a-alpha: .13;
  --deco-b-size: 42% 38%; --deco-b-pos: 12% 86%; --deco-b-alpha: .10;
}

/* ---- Journey opener ------------------------------------------------------ */
body.page-home .jr-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.page-home .jr-start__dot {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: none;
}

/* ---- Journey grid -------------------------------------------------------- */
body.page-home .jr {
  --jr-gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  display: grid;
  gap: 0;
  padding: 0;
  margin-top: var(--sp-6);
}

/* Mobile and tablet: one spine down the left, every card to its right. The
   brief asks for alternation at tablet too, but at that width a card gets
   under 300px per side — the alternation stops reading as rhythm and starts
   reading as cramped. Single-sided is the simplified version. */
/* The spacing between steps lives on the CARD as a margin, not on the step as
   padding. Padding sits outside the grid rows, so a stretched spine stops at
   the content edge and the line breaks between every step. A margin on a grid
   item grows the row itself, and the spine stretches through it. */
body.page-home .jr-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--sp-5);
  align-items: start;
}
body.page-home .jr-card { margin-bottom: var(--jr-gap); }
body.page-home .jr-step__spine {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: stretch;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
/* Last leg tapers out rather than stopping dead. */
body.page-home .jr-step__spine--last {
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
body.page-home .jr-step__fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: top;
  transition: transform 900ms var(--ease-soft);
}
body.page-home .jr-step__num {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transition:
    color var(--t-base), border-color var(--t-base),
    background var(--t-base), transform var(--t-base);
}
body.page-home .jr-card { grid-column: 2; grid-row: 1; }

/* Desktop: alternate sides around a centre spine. */
@media (min-width: 1025px) {
  body.page-home .jr-step {
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    column-gap: 0;
  }
  body.page-home .jr-step__spine,
  body.page-home .jr-step__num { grid-column: 2; }
  body.page-home .jr-card { grid-column: 1; margin-right: var(--sp-6); }
  /* Explicit rather than :nth-of-type — the trust strip is also an <li>, so
     type counting would flip the wrong steps and put two cards side by side. */
  body.page-home .jr-step--right .jr-card {
    grid-column: 3;
    margin-right: 0;
    margin-left: var(--sp-6);
  }
}

/* The fill is drawn by default so a JS failure leaves a complete line; only
   the .js path starts it collapsed and lets the reveal draw it. */
.js body.page-home .jr-step .jr-step__fill { transform: scaleY(0); }
.js body.page-home .jr-step.is-visible .jr-step__fill { transform: scaleY(1); }
.js body.page-home .jr-step.is-visible .jr-step__num {
  border-color: var(--accent);
  background: var(--c-spring-50);
  color: var(--accent-ink);
}

/* ---- Card ---------------------------------------------------------------- */
body.page-home .jr-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* Hover is the .lift default — nothing to declare. */
}
body.page-home .jr-card__art { --figure-pad: clamp(1rem, 0.8rem + 1vw, 1.75rem); }
body.page-home .jr-card__mark {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
  transition: transform var(--t-slow);
}
body.page-home .jr-card:hover .jr-card__mark { transform: scale(1.04); }

body.page-home .jr-card__body { padding: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); }
body.page-home .jr-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-strong);
}
body.page-home .jr-card__title { margin-top: var(--sp-2); font-size: var(--fs-h4); }
body.page-home .jr-card__lead {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* The real Framework stages inside each phase. */
body.page-home .jr-stages {
  display: grid;
  gap: var(--sp-3);
  padding: 0;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
body.page-home .jr-stages > li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
body.page-home .jr-stages__num {
  display: grid;
  place-items: center;
  width: 30px; height: 22px;
  border-radius: var(--r-sm);
  background: var(--surface-tint);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--brand);
}
body.page-home .jr-stages b { color: var(--text); font-weight: var(--fw-semibold); }

body.page-home .jr-card__outcome {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-spring-50);
  font-size: var(--fs-small);
  color: var(--text);
}
body.page-home .jr-card__outcome-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--sp-2);
}

/* ---- Trust strip --------------------------------------------------------- */
/* The strip is a station on the line, not a break in it: step 03's spine
   already reaches its top edge, and this ::after carries the line on down to
   step 04's badge so the journey never looks severed. */
body.page-home .jr-trust {
  position: relative;
  margin-bottom: var(--jr-gap);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
body.page-home .jr-trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  padding: 0;
}
body.page-home .jr-trust__list > li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
body.page-home .jr-trust__tick {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--c-spring-50);
  color: var(--accent-ink);
}
body.page-home .jr-trust__tick svg { width: 12px; height: 12px; }

body.page-home .jr-trust::after {
  content: "";
  position: absolute;
  left: 28px;                 /* centre of the 56px spine column */
  bottom: calc(var(--jr-gap) * -1);
  width: 2px;
  height: var(--jr-gap);
  margin-left: -1px;
  border-radius: 2px;
  background: var(--accent);
}
@media (min-width: 1025px) {
  body.page-home .jr-trust::after { left: 50%; }
}

/* ---- Framework statement + CTA ------------------------------------------- */
body.page-home .jr-statement,
body.page-home .jr-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
}
body.page-home .jr-statement {
  margin-top: var(--sp-4);
  background: var(--surface);
}
body.page-home .jr-statement > div { flex: 1 1 20rem; }
body.page-home .jr-statement__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
body.page-home .jr-cta {
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
  background-image: linear-gradient(140deg, var(--surface) 0%, var(--surface-tint) 100%);
  box-shadow: var(--shadow-lg);
}
body.page-home .jr-cta__copy { flex: 1 1 24rem; }
body.page-home .jr-cta__title { font-size: var(--fs-h3); }
body.page-home .jr-cta__text {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  max-width: 48ch;
}
body.page-home .jr-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
  /* initReveal marks everything visible immediately under reduced motion, so
     the line is fully drawn and the numbers are already accent — the journey
     reads complete rather than half-finished. Only the movement stops. */
}


/* ==========================================================================
   HOME — WHY TEAM7INDIA, editorial trust section
   --------------------------------------------------------------------------
   Geometry only. Background is .deco, hover is .lift, illustration framing is
   .figure, glyphs are .icon-tile and the card cascade is [data-stagger] — all
   from the foundations layer in style.css. Nothing about motion, elevation,
   background or art framing is declared here, and if it ever needs to be, the
   primitive is wrong and should be fixed there instead.
   ========================================================================== */

/* ---- Split ---------------------------------------------------------------
   The rail sticks so the heading and CTA stay with the reader through six
   cards; align-items:start is what lets it, since a stretched grid item has
   no room to move within. */
body.page-home .why-split {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) {
  body.page-home .why-split {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: start;
  }
  body.page-home .why-rail__inner {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}
body.page-home .why-rail .lead { max-width: 42ch; }

/* ---- Section photography -------------------------------------------------
   The two photographs on this page. Everything about filling the frame comes
   from the shared .figure--photo modifier; only the ratio is set here. */
body.page-home .why-rail__photo,
body.page-home .cs-head__photo { --figure-ratio: 16 / 10; }

body.page-home .why-rail__photo { margin-top: var(--sp-6); }

/* ---- Card composition ----------------------------------------------------
   Wide / 2-up / 2-up / wide. The rhythm comes from two cards spanning the
   full row, not from six cards of arbitrary heights. */
body.page-home .why-cards {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  grid-template-columns: 1fr;
  padding: 0;
}
@media (min-width: 641px) {
  body.page-home .why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-home .why-card--wide { grid-column: 1 / -1; }
}

body.page-home .why-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
body.page-home .why-card__icon { --tile: 44px; --tile-radius: var(--r-md); }
body.page-home .why-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  color: var(--brand-strong);
}
body.page-home .why-card__title { font-size: var(--fs-h4); }
body.page-home .why-card__text {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* The two wide cards run art-beside-copy once there is room, and stack under
   it when there is not. Padding moves to the body so the art sits flush. */
body.page-home .why-card--wide {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
body.page-home .why-card--wide .why-card__art {
  --figure-radius: 0;
  --figure-max: 15rem;
  border-bottom: 1px solid var(--line);
}
body.page-home .why-card--wide .why-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}
@media (min-width: 641px) {
  body.page-home .why-card--wide { flex-direction: row; align-items: stretch; }
  body.page-home .why-card--wide .why-card__art {
    flex: 0 0 40%;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  body.page-home .why-card--wide .why-card__body { flex: 1; justify-content: center; }
}

/* ---- Bottom callout ------------------------------------------------------ */
body.page-home .why-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-6);
  margin-top: clamp(3rem, 2rem + 2.5vw, 4.5rem);
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background-image: linear-gradient(140deg, var(--surface) 0%, var(--surface-tint) 100%);
  box-shadow: var(--shadow-lg);
}
body.page-home .why-callout__text {
  flex: 1 1 32rem;
  max-width: 64ch;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.45;
}
body.page-home .why-callout__cta { flex: none; }


/* ==========================================================================
   HOME — CLIENT SUCCESS
   --------------------------------------------------------------------------
   Geometry only, again. The cards are the shared .testimonial component (and
   its existing --featured skin), hover is .lift, the logo tiles use the
   .logo-item grayscale-to-colour primitive, the background is .deco and the
   cascades are [data-stagger]. Only the composition is declared here.
   ========================================================================== */

/* Featured beside a stacked pair. The two side cards are naturally shorter
   than the featured one, which is the editorial variation asked for — it comes
   from the content, so nothing needs forcing. */
/* The head is a split rather than a centred block, so the photograph has
   somewhere to sit that is not inside the placeholder quote grid below it. */
body.page-home .cs-head {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
/* Copy takes the larger share. At an even split the headline is forced to three
   lines and breaks mid-word; this is the same ratio the quote grid below uses,
   so the two rows share an edge. */
@media (min-width: 1025px) {
  body.page-home .cs-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
/* .section-head is capped for centred use; across half a row it needs the width. */
body.page-home .cs-head .section-head { max-width: none; }

/* The quote grid that used to sit here moved to the Testimonials carousel
   below, and its three layout rules plus the featured-quote treatment went
   with it. Deleted rather than left dormant. The oversized quote mark
   survives on the carousel card, including the hard-won note about its
   vertical offset. (Class names kept out of this prose: written literally they
   read as live selectors to every dead-CSS audit.) */

/* ---- Client logo strip --------------------------------------------------
   A trust strip, not a logo gallery: one row, ~112px tall, everything else
   handled by the shared .marquee primitive in style.css.

   Dark because all 54 supplied logos are white knockouts. The files are
   pre-trimmed to their content box, so a single CSS height now sizes the LOGO
   rather than the canvas — that was the readability bug. */
body.page-home .cs-logos { margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }

body.page-home .cs-logos__band {
  width: 100%;
  margin-top: var(--sp-5);
  min-height: 112px;
  display: flex;
  align-items: center;
  /* Breathing room inside the rounded edge, so the fade begins before a logo
     reaches the corner rather than at it. */
  padding-inline: 32px;
  border-radius: var(--r-xl);
  background: var(--bg-invert);
  background-image: var(--grad-invert);
  overflow: hidden;
  /* Long cycle: the track is ~14,000px with 54 logos, so 90s gives a calm
     ~155px/s. The gap is also the loop's correction term. */
  --marquee-gap: 4.5rem;
  --marquee-duration: 90s;
}
body.page-home .cs-logos__band .marquee__viewport {
  width: 100%;
  /* A long, gentle ramp rather than a hard edge: nothing is ever cut off,
     logos dissolve as they arrive and leave. Wider than the primitive default
     because this band is full-width and can afford the runway. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 6%, #000 18%, #000 82%, rgba(0,0,0,.45) 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 6%, #000 18%, #000 82%, rgba(0,0,0,.45) 94%, transparent 100%);
}

/* Height drives the size. max-width only catches the two extreme wordmarks
   (16.7:1 and 11:1) which would otherwise run ~800px wide; everything else is
   free to take its natural width, which is what keeps optical weight even. */
body.page-home .cs-logo { display: grid; place-items: center; flex: none; }
body.page-home .cs-logo img {
  display: block;
  height: 46px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  opacity: .8;
  transition: opacity var(--t-base);
}
body.page-home .cs-logo img:hover { opacity: 1; }

@media (max-width: 640px) {
  body.page-home .cs-logos__band {
    min-height: 92px;
    padding-inline: 20px;
    --marquee-gap: 3rem;
  }
  body.page-home .cs-logo img { height: 36px; max-width: 220px; }
}

/* REDUCED MOTION. No scrolling anywhere — this strip is never manually
   scrollable, in either mode.

   The primitive's fallback wraps into a grid, which suits the Talent chips but
   would stack 54 logos into six rows. Here the row simply stops moving: same
   single row, same clipping, same fades, no animation, no scrollbar.

   The trade-off, stated plainly: a sighted visitor with reduce-motion on sees
   roughly the first eight logos rather than all 54. That is acceptable here
   because the strip is reinforcement rather than content — and every one of the
   54 stays in the DOM carrying its real company name, so assistive technology
   still reaches all of them. Nothing is hidden from anyone who was relying on
   it; it is only visually shorter. */
@media (prefers-reduced-motion: reduce) {
  body.page-home .cs-logos__band .marquee__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  body.page-home .cs-logos__band .marquee__track {
    flex: none;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}
/* ---- Metric strip -------------------------------------------------------- */
body.page-home #proof .metric-row { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

/* ---- Trust panel --------------------------------------------------------- */
body.page-home .cs-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-6);
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background-image: linear-gradient(140deg, var(--surface) 0%, var(--surface-tint) 100%);
  box-shadow: var(--shadow-lg);
}
body.page-home .cs-trust__text {
  flex: 1 1 30rem;
  max-width: 56ch;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.45;
}
body.page-home .cs-trust__cta { flex: none; }


/* ==========================================================================
   HOME — TESTIMONIALS, a scroll-snap carousel
   --------------------------------------------------------------------------
   Native scroll-snap rather than a transform track. overflow-x IS the
   mechanism: it buys touch swipe, momentum, trackpad and keyboard scrolling
   without a line of event code, and it degrades to an ordinary scrollable row
   when the script is absent. JavaScript only drives the arrows, the dots and
   the autoplay — the parts that genuinely need it.

   Two cards from 641px, one below it. Six cards therefore make exactly three
   pages on desktop and six on mobile; the dot count is computed at runtime, so
   adding or removing a testimonial needs no change here.
   ========================================================================== */

body.page-home .tst { margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }

/* The scrollbar is hidden because the arrows and dots are the affordance and a
   native bar under a row of premium cards reads as a gallery. The row stays
   fully scrollable by swipe, trackpad and keyboard — nothing is made
   unreachable. .tabs__list and .pagenav__list do the same. */
body.page-home .tst__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Negative margin cancels the padding, which exists only so the hover lift
     and the card shadow are not clipped by the scroll container. */
  padding: 8px 8px 14px;
  margin: -8px -8px -14px;
}
body.page-home .tst__viewport::-webkit-scrollbar { display: none; }
body.page-home .tst__viewport:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-lg);
}

body.page-home .tst__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--tst-gap);
  align-items: stretch;
  padding: 0;
  --tst-gap: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
}
@media (min-width: 641px) {
  body.page-home .tst__track { grid-auto-columns: calc(50% - var(--tst-gap) / 2); }
}
body.page-home .tst__slide {
  scroll-snap-align: start;
  display: flex;
}

/* ---- Card ---------------------------------------------------------------
   Extends the shared .testimonial: same surface, same person block, same
   equal-height behaviour. Only the inset, the brand hairline and the quote
   mark are specific to the carousel. */
body.page-home .tst-card {
  position: relative;
  width: 100%;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  overflow: hidden;
  border-color: var(--line-brand);
  box-shadow: var(--shadow-md);
}
/* Reads as glass only because .has-deco puts a wash behind it; over flat white
   a translucent card is indistinguishable from an opaque one. */
@supports (backdrop-filter: blur(1px)) {
  body.page-home .tst-card {
    background: rgba(255, 255, 255, .74);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

/* top:0, not a negative offset. The card clips its overflow, and a " sits in
   the upper third of its own em box — pulling the box up by a quarter of an em
   cuts the glyph in half and leaves two faint circles. Learned once already on
   the quote this replaced. */
body.page-home .tst-card::before {
  content: "\201C";
  position: absolute;
  top: 0;
  right: 0.12em;
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 1;
  color: var(--brand);
  opacity: .10;
  pointer-events: none;
  transform-origin: top right;
  transition: transform var(--t-base), opacity var(--t-base);
}
body.page-home .tst-card:hover::before { transform: scale(1.06); opacity: .16; }
/* One card fills the row below 641, so the mark is proportionally much larger
   and starts sitting on the first line of the quote. */
@media (max-width: 640px) {
  body.page-home .tst-card::before { font-size: 5.5rem; }
}

body.page-home .tst-card .testimonial__quote {
  position: relative;
  font-size: var(--fs-lead);
  line-height: 1.55;
}
/* The card carries its own oversized mark, so the inline curly quotes would
   be the second pair on the same sentence. */
body.page-home .tst-card .testimonial__quote::before,
body.page-home .tst-card .testimonial__quote::after { content: none; }

/* The divider takes the auto margin instead of the person block, so rule and
   attribution travel to the base of the card together rather than the rule
   floating directly under a short quote.

   margin-inline is the whole reason this needs its own rule. Browsers ship
   `margin-inline: auto` on <hr> in the UA sheet, and an auto margin on the
   cross axis of a flex container beats align-self: stretch — so the divider
   resolved to 1px tall and ZERO wide and painted nothing. It read as a styling
   subtlety; it was a collapsed box. Measured, not guessed.

   Drawn as a background on a 1px box rather than the shared rule's border-top,
   which under border-box sizing has no room to paint at zero height either. */
body.page-home .tst-card__rule {
  flex: none;
  align-self: stretch;
  height: 1px;
  margin: auto 0 0;
  border: 0;
  background: var(--line);
}
body.page-home .tst-card .testimonial__person { margin-top: 0; }

/* ---- Controls -----------------------------------------------------------
   Hidden until the script confirms it is running: an arrow that does nothing
   is worse than no arrow. The row above stays swipeable either way. */
body.page-home .tst__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.js body.page-home .tst__controls { display: flex; }

body.page-home .tst__arrow {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--brand-strong);
  cursor: pointer;
  transition:
    border-color var(--t-fast), color var(--t-fast),
    transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
body.page-home .tst__arrow svg { width: 16px; height: 16px; }
body.page-home .tst__arrow:hover {
  border-color: var(--c-violet-300);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
body.page-home .tst__arrow:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

body.page-home .tst__dots { display: flex; align-items: center; gap: var(--sp-2); }
body.page-home .tst__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-violet-300);
  cursor: pointer;
  transition: width var(--t-base), background var(--t-base);
}
body.page-home .tst__dot[aria-current="true"] { width: 26px; background: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  body.page-home .tst__viewport { scroll-behavior: auto; }
  body.page-home .tst-card:hover::before { transform: none; }
}


/* ==========================================================================
   HOME — INSIGHTS & RESOURCES
   --------------------------------------------------------------------------
   Geometry only. .lift, .figure, .icon-tile, .deco, .chip and [data-stagger]
   do the rest.
   ========================================================================== */

body.page-home .ins-grid {
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
}
@media (min-width: 1025px) {
  /* Featured runs wider than the rail so it reads as the lead item rather
     than as the first of four equals. */
  body.page-home .ins-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* ---- Featured ------------------------------------------------------------ */
body.page-home .ins-feature {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  --lift-y: -6px;
  --lift-shadow: var(--shadow-xl);
}
body.page-home .ins-feature__art {
  --figure-radius: 0;
  --figure-max: 20rem;
  --figure-pad: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
body.page-home .ins-feature__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
}
body.page-home .ins-feature__title { font-size: var(--fs-h3); }
body.page-home .ins-feature__text { color: var(--text-muted); }
body.page-home .ins-feature__cta { margin-top: auto; padding-top: var(--sp-4); }

/* ---- Meta row ------------------------------------------------------------ */
body.page-home .ins-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
body.page-home .ins-meta__time {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
body.page-home .ins-meta .chip { transition: transform var(--t-base), border-color var(--t-fast); }
body.page-home .lift:hover .ins-meta .chip {
  transform: translateY(-2px);
  border-color: var(--line-accent);
}

/* ---- Side rail ----------------------------------------------------------- */
body.page-home .ins-side {
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
  align-content: stretch;
  padding: 0;
}
body.page-home .ins-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
body.page-home .ins-card__icon { --tile: 44px; --tile-radius: var(--r-md); }
body.page-home .ins-card__title { margin-top: var(--sp-2); font-size: var(--fs-h4); }
body.page-home .ins-card__text {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-small);
}
body.page-home .ins-card__cta { margin-top: var(--sp-3); }
body.page-home .ins-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--brand-strong);
}
/* Stretched over the whole card; .ins-card is the positioning context. */
body.page-home .ins-card { position: relative; }
body.page-home .ins-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
body.page-home .ins-card:has(.ins-card__link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ---- Category row -------------------------------------------------------- */
body.page-home .ins-cats { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); text-align: center; }
body.page-home .ins-cats__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.page-home .ins-cats__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  padding: 0;
  margin-top: var(--sp-4);
}
/* The underline is a pseudo-element that scales rather than a border, so
   nothing shifts by a pixel when it appears. */
body.page-home .ins-cat {
  position: relative;
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
body.page-home .ins-cat::after {
  content: "";
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
body.page-home .ins-cat:hover {
  background: var(--surface);
  color: var(--text);
}
body.page-home .ins-cat:hover::after { transform: scaleX(1); }

/* ---- Newsletter ---------------------------------------------------------- */
body.page-home .ins-news {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-6);
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background-image: linear-gradient(140deg, var(--surface) 0%, var(--surface-tint) 100%);
  box-shadow: var(--shadow-lg);
}
body.page-home .ins-news__copy { flex: 1 1 26rem; }
body.page-home .ins-news__title { font-size: var(--fs-h3); }
body.page-home .ins-news__text {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  max-width: 52ch;
}
body.page-home .ins-news__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  flex: 1 1 22rem;
}
body.page-home .ins-news__form .field { flex: 1 1 14rem; }

body.page-home .ins-all {
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  text-align: center;
}


/* ==========================================================================
   HOME — FINAL CTA, the conversion climax
   --------------------------------------------------------------------------
   Geometry only. The glass surface is the hero's .glass primitive, the frame
   matches .hero-visual__frame, the diagram parts are .im-*/.sd-t, the
   background is .deco with its alphas turned up, and reveal/stagger/parallax
   are the shared utilities.

   Deliberately LIGHT. The footer directly below is on the inverted indigo, so
   a dark CTA would merge the two into one unreadable slab; the light panel
   gives the close its own edge.
   ========================================================================== */

body.page-home .section--cta {
  background: var(--bg);
  padding-block: clamp(4rem, 2.5rem + 5vw, 7rem);
}

body.page-home .cta-split {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) {
  body.page-home .cta-split { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
}
body.page-home .cta-copy .lead { max-width: 46ch; }

/* ---- Trust checks -------------------------------------------------------- */
body.page-home .cta-checks {
  display: grid;
  gap: var(--sp-3) var(--sp-5);
  grid-template-columns: 1fr;
  padding: 0;
  margin-top: var(--sp-6);
}
@media (min-width: 561px) {
  body.page-home .cta-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.page-home .cta-checks > li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
}
body.page-home .cta-checks__tick {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: var(--r-pill);
  background: var(--c-spring-50);
  color: var(--accent-ink);
}
body.page-home .cta-checks__tick svg { width: 11px; height: 11px; }

/* ---- Contact strip ------------------------------------------------------- */
body.page-home .cta-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  padding: 0;
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
body.page-home .cta-contact > li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
body.page-home .cta-contact__icon { --tile: 30px; }
body.page-home .cta-contact a { color: var(--text-muted); }
body.page-home .cta-contact a:hover { color: var(--brand-strong); }

/* ---- Visual panel -------------------------------------------------------- */
body.page-home .cta-visual { position: relative; }
body.page-home .cta-visual__frame {
  position: relative;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
}
body.page-home .cta-visual__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.page-home .cta-visual__mark {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin: var(--sp-5) auto 0;
}

/* The floating cards reuse .glass for their surface. Below 1025 they sit in
   flow beneath the frame; above it they overlap its edges, which is the whole
   layered effect — so the section must not clip its overflow. */
body.page-home .cta-float {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-align: center;
}
@media (max-width: 1024px) {
  body.page-home .cta-visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--sp-4);
  }
  body.page-home .cta-visual__frame { grid-column: 1 / -1; }
}
@media (min-width: 1025px) {
  body.page-home .cta-float { position: absolute; }
  body.page-home .cta-float--1 { top: 4%;    right: -5%; }
  body.page-home .cta-float--2 { bottom: 18%; left: -8%; }
  body.page-home .cta-float--3 { bottom: -4%; right: 4%; }
}

/* Continuous drift, desktop only, three durations so they never sync. Reuses
   the hero's float keyframes rather than declaring another set. */
@media (min-width: 1025px) {
  .js body.page-home .cta-float--1 { animation: t7i-hero-float  9s ease-in-out 1.1s infinite; }
  .js body.page-home .cta-float--2 { animation: t7i-hero-float 11s ease-in-out 1.5s infinite; }
  .js body.page-home .cta-float--3 { animation: t7i-hero-float  7s ease-in-out 0.8s infinite; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .cta-float { animation: none; transform: none; }
}


/* ==========================================================================
   COMPANY PAGES — PHOTOGRAPHY
   --------------------------------------------------------------------------
   About, Careers, Contact and Partners. Geometry only: filling the frame is
   handled by the shared .figure--photo modifier in style.css, so all that is
   left per slot is the aspect ratio, and only where it differs from the
   .figure default of 3:2.

   Every hero photograph sits inside the page's existing .stack, which already
   carries the parallax and supplies the gap — the image needs no spacing of
   its own.
   ========================================================================== */

body.page-about   .about-hero__photo,
body.page-careers .careers-hero__photo,
body.page-partners .partners-hero__photo { --figure-ratio: 16 / 10; }

/* .stack turns into a TWO-column grid from 641px, and only .stack__card--lead
   is given the whole row. Anything else dropped into it — a photograph, or the
   card beside the India shot — lands in a half-width column and renders at
   roughly 266px against a 548px column. Every one of these has to claim the
   full row explicitly. */
body.page-about    .about-hero__photo,
body.page-careers  .careers-hero__photo,
body.page-partners .partners-hero__photo,
body.page-about    .about-clients__stack > * { grid-column: 1 / -1; }

/* A letterbox strip. Wide enough that it reads as a break in the page rather
   than another card, which is the whole reason it is not 3:2 like the rest. */
body.page-contact .contact-band { --figure-ratio: 21 / 9; }
@media (max-width: 640px) {
  body.page-contact .contact-band { --figure-ratio: 3 / 2; }
}

/* Sits above the placeholder quotes, so it needs the gap the quote grid would
   otherwise have taken from the section head. */
body.page-careers .careers-life { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }


/* ==========================================================================
   SOLUTIONS OVERVIEW — the comparison block
   --------------------------------------------------------------------------
   Four cells on ONE grid. Previously two grids stacked with a large gap: the
   question pair at 1:1 and a split at 1.15:1, so the two rows shared no
   column edge and the block read as four unrelated pieces.

   Row 1 keeps the shared .question-pair styling — dashed and muted on the
   left, tinted and brand-weighted on the right. Row 2 is two calm panels that
   inherit the same inset and radius, so the rows read as one grid.
   ========================================================================== */

body.page-solutions .sol-compare {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 769px) {
  body.page-solutions .sol-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The head's default bottom margin is sized for a section opening onto a full
   grid of cards. Above a two-line comparison it leaves a hole. */
body.page-solutions .sol-compare-head { margin-bottom: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); }

/* Shallower than the primitive's default -4px. These are large panels sitting
   side by side; a 4px jump on something this wide reads as a wobble rather
   than a lift. */
body.page-solutions .sol-compare .lift {
  --lift-y: -2px;
  --lift-shadow: var(--shadow-md);
}
/* The primitive turns the border accent-green on hover. That suits the three
   cards that carry our side of the argument; on the dashed card quoting what
   other providers ask it would put a Team7India accent on someone else's
   question. It keeps its own muted border and lifts on shadow alone. */
body.page-solutions .sol-compare__ask-q:hover { border-color: var(--line); }
body.page-solutions .sol-compare__ask:hover { border-color: var(--brand); }

/* ---- The "We ask" card --------------------------------------------------
   Given the weight, since it carries the argument. More inset than its
   opposite number, a doubled border and a soft shadow — the two cards stretch
   to the same row height either way, so the extra padding becomes breathing
   room rather than extra height. */
body.page-solutions .sol-compare__ask {
  padding: var(--sp-6);
  border-width: 2px;
  border-color: var(--c-violet-300);
  box-shadow: var(--shadow-sm);
}

/* ---- Row 2 panels ------------------------------------------------------- */
body.page-solutions .sol-compare__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
body.page-solutions .sol-compare__lead {
  font-size: var(--fs-body);
  line-height: 1.55;
}

/* Marked, not ticked. A dot states "here is an item"; a checkmark states "you
   get this", which is true of the benefits on the left and false of the
   situations on the right. Same list component, two dot colours. */
body.page-solutions .sol-compare__list { display: grid; gap: var(--sp-3); }
body.page-solutions .sol-compare__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted);
}
body.page-solutions .sol-compare__list li::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 0.55em;
  border-radius: var(--r-pill);
  background: var(--c-violet-300);
}
body.page-solutions .sol-compare__points .sol-compare__list li::before { background: var(--accent); }

/* Pinned to the base so the two panels close on the same line. The four case
   lines used to run at display-face --fs-h4 inside a card with a full section
   rule under them, which is what made this side tower over the left. */
body.page-solutions .sol-compare__note {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--text-muted);
}


/* ==========================================================================
   DEDICATED WORKFORCE — the hero growth panel
   --------------------------------------------------------------------------
   Replaces two stacked cards with one composition. The four team models are
   drawn as a growth sequence and the capability domains live inside the same
   frame, so the hero reads as a single visual rather than a list beside a
   chip card.

   The people are CSS dots rather than SVG. A fixed viewBox cannot grow with
   the column, and these clusters have to stay legible from 320px to 1440px.
   ========================================================================== */

body.page-dedicated-workforce .dw-visual {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  /* --r-lg, not --r-xl. The audit found this panel was the only 32px corner
     among nineteen 24px cards on this page — one radius out of step reads as
     a different component, which is exactly what it is not. */
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
body.page-dedicated-workforce .dw-visual__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- The growth sequence ------------------------------------------------
   A spine behind the stage numbers, stopping at the first and last so it
   reads as a connector rather than a rule down the whole column. Same
   treatment as the journey steps on the homepage. */
body.page-dedicated-workforce .dw-growth {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding: 0;
}
body.page-dedicated-workforce .dw-growth::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--line-brand);
}
body.page-dedicated-workforce .dw-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
/* The ring in the surface colour punches the spine out behind each number
   without needing a second element. */
body.page-dedicated-workforce .dw-step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--surface-tint);
  box-shadow: 0 0 0 5px var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--brand-strong);
}
body.page-dedicated-workforce .dw-step__body { display: grid; gap: var(--sp-3); }
body.page-dedicated-workforce .dw-step__name {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 1.3;
}

/* FOUR dots per row: 12px each with a 6px gap is exactly 66px. The counts
   1 / 3 / 6 / 12 then resolve to one, one, two and three rows with no orphan
   — at five per row the six-dot cluster left a single dot stranded on its own
   line, which reads as a mistake rather than a team. The rows getting taller
   IS the growth signal. */
body.page-dedicated-workforce .dw-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 66px;
}
body.page-dedicated-workforce .dw-cluster > span {
  width: 12px; height: 12px;
  border-radius: var(--r-pill);
  background: var(--c-violet-300);
}
/* The specialist you started with, still in the team at every stage. */
body.page-dedicated-workforce .dw-cluster > span:first-child { background: var(--accent); }

/* Stage four is a department, so its cluster is enclosed. */
body.page-dedicated-workforce .dw-step--centre .dw-cluster {
  padding: 8px;
  margin: -8px;
  border: 1px solid var(--line-brand);
  border-radius: var(--r-sm);
  max-width: 82px;
}

body.page-dedicated-workforce .dw-visual__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ---- Capability domains -------------------------------------------------
   Inside the panel, on one line with its label, so it reads as a footnote to
   the sequence above rather than the separate card it used to be. */
body.page-dedicated-workforce .dw-visual__domains {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
}
body.page-dedicated-workforce .dw-visual__domains-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: none;
}
body.page-dedicated-workforce .dw-visual__domains .chip { padding: 0.25rem 0.6rem; }

@media (max-width: 560px) {
  body.page-dedicated-workforce .dw-step { gap: var(--sp-3); }
  body.page-dedicated-workforce .dw-step__num { width: 28px; height: 28px; }
  body.page-dedicated-workforce .dw-growth::before { left: 13px; }
}


/* ==========================================================================
   INDUSTRIES — the four sector sections
   --------------------------------------------------------------------------
   These four are a SERIES, not four standalone sections, and they were not
   being treated as one. Each carried full section padding around a heading,
   three lines and a button — roughly 250px of content inside a 505px band,
   four times running, on alternating background tints. The effect was a page
   that reads as sparse and unresolved rather than calm.

   Two changes, both about rhythm rather than measurement:

   1. Tighter block padding. A repeating series earns a closer rhythm than a
      standalone section; keeping them at full height made four related
      sectors read as four unrelated pages stacked up.

   2. The split stops top-aligning. The capabilities card is shorter than the
      copy beside it, so top-alignment stranded it against the ceiling with a
      void underneath. Centring lets the two columns read as one composition —
      the same treatment the About clients section uses, which is the
      strongest version of this pattern on the site.
   ========================================================================== */
body.page-industries #saas-software,
body.page-industries #ai-technology,
body.page-industries #digital-agencies,
body.page-industries #professional-services {
  padding-block: calc(var(--section-y) * 0.62);
}
body.page-industries #saas-software .split,
body.page-industries #ai-technology .split,
body.page-industries #digital-agencies .split,
body.page-industries #professional-services .split {
  align-items: center;
}


/* ==========================================================================
   CONTACT — the two office addresses
   --------------------------------------------------------------------------
   Side by side from 561px so the UK and India offices read as a pair rather
   than a list with one buried under the other. Below that they stack, which
   is the only honest option in a single narrow column.
   ========================================================================== */
body.page-contact .contact-offices {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 561px) {
  body.page-contact .contact-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.page-contact .contact-offices__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-strong);
  margin-bottom: var(--sp-2);
}