@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. */
@media (min-width: 1025px) {
  body.page-home #framework .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  body.page-home #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,
     not by its own content — which left ~400px of dead white between its
     paragraph and its CTA. Push the slack into the art panel instead: it is a
     centred grid, so the mark just gets more room to breathe. */
  body.page-home .ind-card--lead .ind-card__art { flex: 1; }
  body.page-home .ind-card--lead .ind-card__body { flex: 0 0 auto; }
}

/* ---- 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. */
  --lift-y: -6px;
  --lift-shadow: var(--shadow-xl);
}
/* 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. */
body.page-home .ind-card__art { --figure-pad: clamp(1.25rem, 0.9rem + 1.2vw, 2rem); }
body.page-home .ind-card__mark {
  display: block;
  width: 100%;
  max-width: 17rem;
  height: auto;
}
body.page-home .ind-card--lead .ind-card__mark { max-width: 22rem; }

body.page-home .ind-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}
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; }
  body.page-home .ind-card--wide .ind-card__art {
    flex: 0 0 40%;
    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);
}

/* Unverified figures are visibly marked rather than quietly asserted. Three of
   the four statistics in the brief have nothing behind them, and this site
   already flags unbacked content the same way for testimonials and case
   studies. Replace the figure, delete the flag, delete the modifier. */
body.page-home .tal-stat--unverified {
  border-style: dashed;
  border-color: #E7C9C4;
  background: var(--bg);
  box-shadow: none;
}
body.page-home .tal-stat__flag {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-error);
}

/* ---- 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;
}
/* Faded at both ends so the track reads as continuous rather than cut off. */
body.page-home .tal-marquee__viewport {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
body.page-home .tal-marquee__track {
  display: flex;
  flex: none;
  gap: var(--sp-3);
  padding: 0;
  animation: t7i-tal-marquee 46s linear infinite;
}
body.page-home .tal-marquee__viewport:hover .tal-marquee__track { animation-play-state: paused; }
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);
}
@keyframes t7i-tal-marquee {
  from { transform: translateX(0); }
  /* -100% of the track plus the gap that follows it, so the duplicate lands
     exactly where the original started and the loop has no visible seam. */
  to   { transform: translateX(calc(-100% - var(--sp-3))); }
}

/* ---- 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 is the one piece here that moves on its own. Stopping the
     animation is not enough: the track is `flex: none`, so a stationary track
     stays wider than its viewport and the tail of the list becomes unreachable
     — content hidden with no way to get to it. It has to be released to shrink
     and wrap into an ordinary centred chip list. */
  body.page-home .tal-marquee__viewport {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  body.page-home .tal-marquee__track {
    animation: none;
    flex: 0 1 auto;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  body.page-home .tal-marquee__track--dup { display: none; }
  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. */
}