@charset "utf-8";
/* ==========================================================================
   TEAM7INDIA — FOUNDATION STYLESHEET
   Direction: "Method as Product" — violet + spring green, method-as-interface.

   Shared components only. Design tokens live in global.css
   (bbailey-style --color / --space / --radius rules).
   Page-specific section CSS lives in pages.css, scoped under body.page-*.
   Never add page rules or new raw token values here — use var(--space-*),
   var(--color-*), or the legacy aliases (var(--sp-*), var(--c-*)) instead.

   CONTENTS
   Tokens live in global.css (same rules as the bbailey design system).
   01  TYPOGRAPHY
   02  ACCESSIBILITY
   03  LAYOUT & GRID
   04  BUTTONS
   05  CHIPS, TAGS & BADGES
   06  EYEBROW & SECTION HEAD
   07  FLOW DIAGRAMS  (the methodology visuals)
   08  CARD STACK & KPI CARDS
   09  CARDS
   10  SPEC LISTS & CHECKLISTS
   11  STAGES (numbered sequences)
   12  PRINCIPLES, ATTRIBUTES & SCENARIOS
   13  STATEMENTS, CADENCE & QUESTION PAIRS
   14  COMPARE TABLES
   15  TRUST BAR & LOGO WALL
   16  TESTIMONIALS & PULLQUOTES
   17  INSIGHT CARDS, JOB LIST & RELATED
   18  TABS & DISCLOSURE / FAQ
   19  FORMS
   20  BREADCRUMB & PAGENAV
   21  CTA BAND, STICKY CTA & INLINE PROMPT
   22  SITE HEADER & NAV
   23  SITE FOOTER
   24  CONSENT MANAGER
   25  MOTION & REVEAL
   26  UTILITIES
   27  RESPONSIVE
   28  PRINT
   ========================================================================== */


/* ==========================================================================
   01  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tighter); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tighter); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p { text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

strong, b { font-weight: var(--fw-semibold); }

/* ---- THE SIGNATURE: the accent keyword ---------------------------------
 * One word per heading, set in the signal green. Applied on every page.
 * Light surfaces use --accent-ink (5.9:1). Dark surfaces use --accent
 * (9:1 on --bg-invert). --accent on light would be 1.9:1 and illegible,
 * so the light case is the default and dark is opted into explicitly.  */
.h-accent { color: var(--accent-ink); }

.section--invert .h-accent,
.cta-band .h-accent,
.site-footer .h-accent,
.u-on-dark .h-accent { color: var(--accent); }

/* ---- Multi-line hero headline -------------------------------------------
 * Each sentence is its own block line. Using <br> instead would let a narrow
 * column re-wrap a line and orphan a word, which reads as a mistake rather
 * than a decision. text-wrap: balance is disabled here because the lines are
 * already authored; letting the browser rebalance them fights the intent.  */
.hero__h1 { display: grid; gap: 0.06em; text-wrap: normal; }
.hero__line { display: block; }

/* ---- Lead paragraph ---------------------------------------------------- */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 56ch;
}
.lead--wide { max-width: 68ch; }

/* ---- Long-form prose (legal pages, articles) ---------------------------- */
.prose { max-width: 45rem; }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { margin-top: var(--sp-8); font-size: var(--fs-h3); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-h4); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { list-style: disc; margin-top: var(--sp-2); }
.prose ol li { list-style: decimal; }
.prose a {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.prose a:hover { text-decoration-thickness: 2px; }


/* ==========================================================================
   04  ACCESSIBILITY
   ========================================================================== */

/* Visible focus on every interactive element. Uses --focus (violet), never
   the spring green, which cannot reach 3:1 against light surfaces. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Body scroll lock while an overlay panel is open. The padding compensation
   is set from JS to the measured scrollbar width, so locking does not shift
   the layout sideways. */
body.no-scroll { overflow: hidden; }

/* Placeholder content marker — DELIBERATELY RENDERS NOTHING.

   The class marks sample testimonials, illustrative case studies and suggested
   metrics: content the source flags as "replace before launch". It used to
   print a visible red caption above each block, warning that the content was
   not a real client. That caption was removed on request. (Its wording is not
   repeated here — spelled out, it reads as a live string to every search for
   the label.)

   The class is kept, with no rules attached, because it is the only way to
   FIND this content — one search returns every block on the site. Do not
   delete it while any placeholder remains, and do not attach styling to it.

   Nothing on the rendered page distinguishes this content from genuine content
   any more. The pre-launch checklist in README.md, item 2, is now the only
   safeguard; it carries the full inventory. */


/* ==========================================================================
   05  LAYOUT & GRID
   --------------------------------------------------------------------------
   Content width: Bootstrap .container only (no project overrides).
   ========================================================================== */

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight      { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top  { padding-top: 0; }
.section--flush-btm  { padding-bottom: 0; }

.section--alt {
  background: var(--bg-alt);
  background-image: var(--grad-alt);
}

.section--invert {
  background: var(--bg-invert);
  background-image: var(--grad-invert);
  color: var(--text-invert);
}
.section--invert h1, .section--invert h2,
.section--invert h3, .section--invert h4 { color: var(--text-invert); }
.section--invert .lead,
.section--invert p { color: var(--text-invert-muted); }

.section--hero {
  background-image: var(--grad-hero);
  padding-top: clamp(3rem, 1.5rem + 5vw, 5.5rem);
}

/* Grid */
.grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}
.grid--2 { --cols: 2; }
.grid--3 { --cols: 3; }
.grid--4 { --cols: 4; }
.grid--6 { --cols: 6; }
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
/* FIVE items in a three-column grid. The default leaves a hole where the sixth
   would be, and a ragged final row reads as an accident rather than a
   composition — it is the single most common layout tell on a template site.
   Six columns with 2-2-2 then 3-3 spans closes it: three cards, then two wider
   ones, both rows full width.

   Used by the five-differentiator block that ships on eleven pages and by the
   five principles on About. Add it to any five-in-three grid. */
@media (min-width: 1025px) {
  .grid--5up { --cols: 6; }
  .grid--5up > * { grid-column: span 2; }
  .grid--5up > *:nth-child(4),
  .grid--5up > *:nth-child(5) { grid-column: span 3; }
}

/* Two-column split used by hero and alternating storytelling sections */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
.split--media  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.split--narrow { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split--top    { align-items: start; }

/* A doubled hairline divider */
.rule {
  height: 0;
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--sp-7);
}
.section--invert .rule { border-top-color: var(--line-invert); }

/* ==========================================================================
   06  BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-base),
              transform var(--t-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled {
  opacity: .5; cursor: not-allowed; transform: none;
}

/* The circular arrow the reference sites pair with their pill buttons. */
.btn__arrow {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.18);
  flex: none;
  transition: transform var(--t-base);
}
.btn:hover .btn__arrow { transform: translateX(2px); }
.btn__arrow svg { width: 11px; height: 11px; }

.btn--primary {
  background: var(--brand);
  color: var(--c-white);
  box-shadow: var(--shadow-violet);
}
.btn--primary:hover { background: var(--brand-strong); }

.btn--dark {
  background: var(--bg-invert);
  color: var(--text-invert);
  box-shadow: var(--shadow-md);
}
.btn--dark:hover { background: var(--c-indigo-700); }

.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--outline:hover { border-color: var(--brand); color: var(--brand-strong); }
.btn--outline .btn__arrow { background: var(--surface-tint); color: var(--brand); }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { box-shadow: var(--shadow-md); }
.btn--ghost .btn__arrow { background: var(--surface-tint); color: var(--brand); }

/* Hero pairs only. Ghost is a filled surface with a shadow, which is right in
   a dense card footer but wrong beside a large primary in a hero: two big
   solid pills read as two primary actions and the hierarchy flattens.
   Dropping the fill and the shadow turns the secondary into an outline
   without touching its size, its hit area or its markup.
   26 heroes, one rule, no per-page edits. */
.section--hero .cta-pair .btn--ghost {
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}
/* And it drops back to default size. Two --lg buttons need ~550px; the
   homepage hero copy column is 42% of the wide container, which is 531px, so
   the pair wrapped and left the secondary stranded on its own line under a
   much wider primary. Every other hero has a ~50/50 split and fits, which is
   why only the homepage showed it. Sizing the secondary down fixes the wrap
   and sharpens the hierarchy at the same time — the 48px min-height keeps it
   a comfortable target. */
.section--hero .cta-pair .btn--ghost.btn--lg {
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-small);
}
.section--hero .cta-pair .btn--ghost:hover {
  background: var(--surface);
  border-color: var(--c-violet-300);
  box-shadow: var(--shadow-sm);
}

/* On dark surfaces */
.btn--light {
  background: var(--c-white);
  color: var(--c-indigo-900);
}
.btn--light:hover { background: var(--c-lavender); }
.btn--light .btn__arrow { background: var(--surface-tint); color: var(--brand); }

.btn--outline-light {
  background: transparent;
  color: var(--text-invert);
  border-color: var(--line-invert);
}
.btn--outline-light:hover { border-color: var(--c-white); background: rgba(255,255,255,.06); }

.btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-5); }
.btn--lg { min-height: 56px; padding: var(--sp-4) var(--sp-7); font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }

/* A text link that behaves like a CTA */
.btn--link {
  min-height: 0;
  padding: 0;
  border-radius: 3px;
  color: var(--brand-strong);
  background: none;
}
.btn--link:hover { color: var(--c-indigo-700); transform: none; }
.btn--link .btn__arrow { background: var(--surface-tint); }
.section--invert .btn--link { color: var(--accent); }

/* CTA pairing with supporting microcopy beneath */
.cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.cta-pair__micro {
  width: 100%;
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.section--invert .cta-pair__micro { color: var(--text-invert-muted); }


/* ==========================================================================
   07  CHIPS, TAGS & BADGES
   ========================================================================== */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.chip--accent { background: var(--c-spring-50); border-color: #BDEBD3; color: var(--accent-ink); }
.chip--brand  { background: var(--surface-tint); border-color: #D9D5FB; color: var(--brand-strong); }
.chip--invert { background: rgba(255,255,255,.07); border-color: var(--line-invert); color: var(--text-invert-muted); }

/* Filter buttons above a chip list or card grid */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.filter__btn {
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: all var(--t-fast);
}
.filter__btn:hover { border-color: var(--c-violet-300); color: var(--text); }
.filter__btn[aria-pressed="true"] {
  background: var(--bg-invert);
  border-color: var(--bg-invert);
  color: var(--text-invert);
}
.filter__count {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
}

.filter__search {
  position: relative;
  max-width: 22rem;
  margin-bottom: var(--sp-5);
}

/* Items hidden by an active filter. Hidden visually and from AT, but still
   present in the DOM so crawlers see the full content. */
.is-filtered-out { display: none !important; }


/* ==========================================================================
   08  EYEBROW & SECTION HEAD
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: none;
}
.section--invert .eyebrow { color: var(--accent); }

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--wide { max-width: 60rem; }
.section-head__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
}
.section--invert .section-head__text { color: var(--text-invert-muted); }

/* Head plus a trailing action, e.g. "View all →" */
.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
}
.section-head--split > div { max-width: 44rem; }


/* ==========================================================================
   09  FLOW DIAGRAMS — the methodology visuals
   --------------------------------------------------------------------------
   One engine, five renderings. The content asks for a process visual on
   almost every page — the Workforce Loop, the workforce journey, the design
   process, a marketing funnel, an operational lifecycle, the Capability
   Mapping wheel. They are all labelled nodes joined by connectors, so they
   share one component and differ only by modifier.

   Every node label is real text inside the SVG, so the diagrams are
   readable, translatable and crawlable rather than decorative pictures.
   ========================================================================== */

.flow {
  position: relative;
  width: 100%;
}
.flow svg { width: 100%; height: auto; overflow: visible; }

.flow__track { fill: none; stroke: var(--line); stroke-width: 1.5; }
.flow__pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.flow__node { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.flow__node-dot { fill: var(--brand); }
.flow__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  fill: var(--text);
}
.flow__index {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-muted);
}

/* Active stage — used to turn one hero graphic into a navigational spine
   across the methodology pages, each highlighting its own stage. */
.flow__group.is-active .flow__node { stroke: var(--brand); stroke-width: 2; }
.flow__group.is-active .flow__node-dot { fill: var(--accent); }
.flow__group.is-active .flow__label { fill: var(--brand-strong); }

.section--invert .flow__track { stroke: var(--line-invert); }
.section--invert .flow__node { fill: rgba(255,255,255,.05); stroke: var(--line-invert); }
.section--invert .flow__label { fill: var(--text-invert); }
.section--invert .flow__index { fill: var(--text-invert-muted); }

/* The travelling pulse. It never completes a cycle — the copy argues that a
   workforce "continuously adapts rather than ending after recruitment", so a
   one-shot draw-in that finishes and stops would say the opposite. */
/* The loop path carries pathLength="1000", so the dash maths is independent
   of the actual radius. 70 + 180 = 250 = 1000/4, and the animation travels
   exactly one pattern length — which is what makes the cycle seamless with
   no visible seam where the dash pattern wraps. */
.js .flow--loop .flow__pulse {
  stroke-dasharray: 70 180;
  stroke-dashoffset: 0;
  animation: flow-travel 11s linear infinite;
}
@keyframes flow-travel { to { stroke-dashoffset: -250; } }

.flow--loop.is-paused .flow__pulse { animation-play-state: paused; }

/* ---- --wheel : the Capability Mapping six dimensions ---------------------
 * Same radial geometry as the hero loop, but the segments are the subject
 * rather than the connector. Each dimension is a wedge with its own label,
 * and selecting one raises it. Built from the same inline-SVG pattern so
 * there is no second diagram engine to maintain.                          */
/* The wheel is square, so at width:100% its height equals the column width —
   in the Capability Mapping hero that made the right panel run 130px past the
   bottom of the copy column beside it, the worst hero imbalance on the site.
   Capping the diagram costs nothing legible (every label is still real text)
   and brings the two columns to a shared baseline. */
.flow--wheel { max-width: 26rem; margin-inline: auto; }

.flow--wheel .flow__segment {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1.5;
  transition: fill var(--t-fast), stroke var(--t-fast);
  cursor: default;
}
.flow--wheel .flow__group:hover .flow__segment,
.flow--wheel .flow__group.is-active .flow__segment {
  fill: var(--surface-tint);
  stroke: var(--brand);
}
.flow--wheel .flow__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  fill: var(--brand-strong);
}
.flow--wheel .flow__label { font-size: 10.5px; }
.flow--wheel .flow__hub {
  fill: var(--bg-invert);
  stroke: none;
}
.flow--wheel .flow__hub-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--c-white);
  text-transform: uppercase;
}
.section--invert .flow--wheel .flow__segment { fill: rgba(255,255,255,.05); stroke: var(--line-invert); }
.section--invert .flow--wheel .flow__num { fill: var(--accent); }

/* Legend beneath a diagram */
.flow__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.flow__legend li { display: flex; align-items: center; gap: var(--sp-2); }
.flow__legend li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

/* Vertical fallback for the diagram flows on small screens. Rendered as a real
   list so it degrades to readable content with no SVG at all. */
.flow__stack { display: none; }

/* EXCEPT on the variants that have no SVG at all. --linear and --funnel are
   built from the list alone: it is the diagram, not a fallback for one. With
   the blanket display:none they rendered an EMPTY CARD on desktop — a mono
   label in a white box with nothing beneath it — in the hero of the Solutions
   overview and Talent overview, and mid-page on Growth & Digital. */
.flow--linear .flow__stack,
.flow--funnel .flow__stack { display: block; }
.flow__stack li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  align-items: center;
}
.flow__stack li + li { border-top: 1px solid var(--line); }
.flow__stack .flow__stack-num {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-tint);
  color: var(--brand-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
}


/* ==========================================================================
   10  CARD STACK & KPI CARDS — the hero collage
   --------------------------------------------------------------------------
   The reference sites lead with overlapping product-UI cards. Team7India has
   no product UI, so this collage is built from the methodology instead: the
   animated loop as the anchor, a capability cluster, a stage tile, a metric.
   ========================================================================== */

.stack {
  position: relative;
  display: grid;
  gap: var(--sp-4);
}
.stack__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-lg);
}
.stack__card--lead { box-shadow: var(--shadow-xl); }
.stack__card--tint { background: var(--surface-tint); border-color: #DEDAFB; }
.stack__card--dark {
  background: var(--bg-invert);
  background-image: var(--grad-invert);
  border-color: transparent;
  color: var(--text-invert);
}

.stack__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);
}
.stack__card--dark .stack__label { color: var(--text-invert-muted); }

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-md);
}
.kpi-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
  line-height: 1.1;
}
.kpi-card__suffix { color: var(--accent-ink); }
.kpi-card__label {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.kpi-card__spark { margin-top: var(--sp-3); }
.kpi-card__spark svg { width: 100%; height: 34px; }
.kpi-card__spark path { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; }
.kpi-card__spark .kpi-fill { fill: var(--surface-tint); stroke: none; }

/* Metric row used in-page rather than in the collage */
.metric-row {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
.metric__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
  line-height: 1;
}
.metric__suffix { color: var(--accent-ink); }
.section--invert .metric__suffix { color: var(--accent); }
.metric__label {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.section--invert .metric__label { color: var(--text-invert-muted); }


/* ==========================================================================
   11  CARDS
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: #D9D5FB;
}
.card__media { background: var(--bg-alt); }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); }
.card__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface-tint);
  color: var(--brand);
  margin-bottom: var(--sp-1);
}
.card__icon svg { width: 20px; height: 20px; }
.card__title { font-size: var(--fs-h4); }
.card__text { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: var(--sp-4); }

/* Full-card click target without nesting interactive elements */
.card__link { font-weight: var(--fw-semibold); color: var(--brand-strong); }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }

.card--flat { box-shadow: none; }
.card--flat:hover { box-shadow: var(--shadow-md); }
.card--tint { background: var(--surface-tint); border-color: #DEDAFB; }
.card--dark {
  background: var(--bg-invert);
  background-image: var(--grad-invert);
  border-color: transparent;
  color: var(--text-invert);
}
.card--dark .card__title { color: var(--text-invert); }
.card--dark .card__text { color: var(--text-invert-muted); }
.card--dark .card__icon { background: rgba(255,255,255,.09); color: var(--accent); }
.card--dark .card__link { color: var(--accent); }

/* Solution card — takes N spec blocks, because the slots vary per card.
   Managed Delivery Teams has "Typical Team" where the others have
   "Key Benefits", so a fixed two-slot card would not fit the content. */
.solution-card { padding: var(--sp-6); gap: var(--sp-5); }
.solution-card__overview { color: var(--text-muted); }
.solution-card .spec + .spec { margin-top: var(--sp-4); }
.solution-card__cta { margin-top: auto; padding-top: var(--sp-5); }


/* ==========================================================================
   12  SPEC LISTS & CHECKLISTS
   --------------------------------------------------------------------------
   The workhorse. The source content uses one shape under a dozen headings:
   Best For · Best suited for · Key Benefits · Typical Team · Typical
   Expertise · Typical Responsibilities · Capabilities Include · Includes ·
   Typical Deliverables · Ideal For. One component covers all of them.
   ========================================================================== */

.spec__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.spec__list { display: grid; gap: var(--sp-2); }
.spec__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-small);
  line-height: 1.55;
}
.spec__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--c-violet-300);
}
.spec--cols .spec__list { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }

/* Dot-separated inline variant — "React • Next.js • Angular". The separator
   is a CSS pseudo-element so screen readers do not announce it. */
.spec--inline .spec__list { display: flex; flex-wrap: wrap; gap: 0; }
.spec--inline .spec__list li { padding-left: 0; }
.spec--inline .spec__list li::before { display: none; }
.spec--inline .spec__list li:not(:last-child)::after {
  content: "•";
  margin-inline: var(--sp-3);
  color: var(--c-violet-300);
}

.section--invert .spec__label { color: var(--text-invert-muted); }
.section--invert .spec__list li::before { background: var(--accent); }

/* Checklist — the ✔ benefit lists. The tick is inline SVG, never a text
   glyph: "✔" renders inconsistently across platforms and is announced as
   an emoji by some screen readers. */
.checklist { display: grid; gap: var(--sp-3); }
.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.checklist__tick {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  margin-top: 0.18em;
  border-radius: var(--r-pill);
  background: var(--c-spring-50);
  color: var(--accent-ink);
  flex: none;
}
.checklist__tick svg { width: 11px; height: 11px; }
.section--invert .checklist__tick { background: rgba(34,208,122,.16); color: var(--accent); }
.checklist--2 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }


/* ==========================================================================
   13  STAGES — the numbered sequences
   --------------------------------------------------------------------------
   Every page carries one: the nine-stage Framework, the six Capability
   Mapping steps, five-step client journeys, six- and seven-step processes.
   Some have Outcome blocks, some do not, and the label noun varies between
   Step, Stage and Phase — so none of that is hardcoded.

   Where two sequences appear on one page they must not look alike, or the
   page reads as one endless list. That is what --spine and --journey are for.
   ========================================================================== */

.stage-list { display: grid; gap: var(--sp-6); }

.stage {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
}
.stage__num {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--brand-strong);
  flex: none;
  z-index: var(--z-raised);
}
.stage__title { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.stage__text { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; }

.stage__outcome {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--c-spring-50);
  border-left: 3px solid var(--accent);
}
.stage__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-1);
}
.stage__outcome-text { font-size: var(--fs-small); font-weight: var(--fw-medium); }

/* Vertical spine — the connecting line runs behind the numbers */
.stage-list--spine .stage { padding-bottom: var(--sp-6); }
.stage-list--spine .stage::before {
  content: "";
  position: absolute;
  left: 23px; top: 48px; bottom: -1.5rem;
  width: 2px;
  background: var(--line);
}
.stage-list--spine .stage:last-child { padding-bottom: 0; }
.stage-list--spine .stage:last-child::before { display: none; }

/* Interactive horizontal journey — About and the methodology pages ask for
   the same nine stages rendered as a horizontal run. Same markup, different
   modifier. Horizontal scroll is keyboard-drivable and never traps the page. */
/* A GRID, not a scroller. This was a horizontal rail with a visible thin
   scrollbar that showed three and a bit cards and cut the fourth off mid-word.
   Nine three-word labels do not need paging — they need to be seen at once,
   and 9 divides into 3x3 exactly, so the sequence reads left to right, top to
   bottom with no orphan row and nothing clipped.

   Three columns from 640px and one below. Two columns is deliberately skipped:
   nine items in two columns leaves a stranded ninth. */
.stage-list--journey {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  padding: 0;
}
@media (min-width: 640px) {
  .stage-list--journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stage-list--journey .stage {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.stage-list--compact { gap: var(--sp-4); }
.stage-list--compact .stage { gap: var(--sp-4); align-items: center; }
.stage-list--compact .stage__num { width: 38px; height: 38px; }
.stage-list--compact .stage__title { margin-bottom: 0; font-size: var(--fs-body); }

.section--invert .stage__num {
  background: rgba(255,255,255,.07);
  border-color: var(--line-invert);
  color: var(--accent);
}
.section--invert .stage-list--spine .stage::before { background: var(--line-invert); }
.section--invert .stage__text { color: var(--text-invert-muted); }
.section--invert .stage__outcome { background: rgba(34,208,122,.10); }
.section--invert .stage__outcome-label { color: var(--accent); }


/* ==========================================================================
   14  PRINCIPLES, ATTRIBUTES & SCENARIOS
   ========================================================================== */

/* "Capability BEFORE Headcount" — the pivot word is the design. About has
   five principles but only three take the X-before-Y form, so --plain drops
   the pivot without breaking the grid. */
.principle {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.principle__a, .principle__b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
}
.principle__pivot {
  display: block;
  margin-block: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.principle__text { margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--fs-small); }
.principle--plain .principle__a { font-size: var(--fs-h4); }

/* The repeated "N things that are true" blocks — the six Advantages, five
   Facilitation pillars, six Regenerative attributes, five Trust Centre
   expectations, six values. One component, several column counts. */
.attribute { padding-block: var(--sp-5); border-top: 1px solid var(--line); }
.attribute__title { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.attribute__text { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; }
.attribute__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface-tint);
  color: var(--brand);
  margin-bottom: var(--sp-4);
}
.attribute__icon svg { width: 18px; height: 18px; }
.section--invert .attribute { border-top-color: var(--line-invert); }
.section--invert .attribute__text { color: var(--text-invert-muted); }
.section--invert .attribute__icon { background: rgba(255,255,255,.09); color: var(--accent); }

/* Worked examples on the methodology pages: Challenge → Approach → Outcome */
.scenario {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.scenario__industry {
  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-3);
}
.scenario__title { font-size: var(--fs-h4); margin-bottom: var(--sp-5); }
.scenario__part + .scenario__part { margin-top: var(--sp-4); }
.scenario__label {
  display: block;
  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-1);
}
.scenario__body { font-size: var(--fs-small); line-height: 1.6; }
.scenario__part--outcome {
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--c-spring-50);
}
.scenario__part--outcome .scenario__label { color: var(--accent-ink); }


/* ==========================================================================
   15  STATEMENTS, CADENCE & QUESTION PAIRS
   ========================================================================== */

.statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
  line-height: 1.2;
  text-align: center;
  max-width: 26ch;
  margin-inline: auto;
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.statement--left { text-align: left; margin-inline: 0; }
.statement__text {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 46ch;
  margin-inline: auto;
}
.section--invert .statement { border-color: var(--line-invert); }
.section--invert .statement__text { color: var(--text-invert-muted); }

/* The staccato short-line blocks — "We recruit. We employ. We facilitate."
   A recurring copy pattern across the whole site; giving it a component
   stops it being restyled ad hoc on every page. */
/* Uniform colour, deliberately. An earlier version alternated violet and ink
   line by line, which looked designed but encoded nothing — the reader hunts
   for a meaning that isn't there. The staccato rhythm is the device; the
   colour should stay out of its way. */
.cadence { display: grid; gap: var(--sp-2); }
.cadence li {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.cadence--muted li { color: var(--text-muted); font-weight: var(--fw-medium); }
.section--invert .cadence li { color: var(--text-invert); }

/* The contrasting questions — "Who should we hire?" vs "What capabilities
   are needed?" The second is the answer and is weighted accordingly. */
.question-pair { display: grid; gap: var(--sp-4); }
.question-pair__q {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
  color: var(--text-muted);
  font-size: var(--fs-lead);
  font-style: italic;
}
.question-pair__a {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface-tint);
  border: 1px solid #D9D5FB;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--brand-strong);
}
.question-pair__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-2);
}

/* The pull-quote that closes each major section and hands to the next */
.transition {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.transition__quote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: 1.35;
}
.transition__next {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pullquote {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: 1.3;
  text-align: center;
}
.section--invert .pullquote { border-color: var(--line-invert); }


/* ==========================================================================
   16  COMPARE TABLES
   --------------------------------------------------------------------------
   Shipped as literal content on every solution page. Real <table> with
   <th scope> on both axes; becomes stacked per-model cards at ≤768px rather
   than a horizontally scrolling table, which is unusable on a phone.
   ========================================================================== */

.compare {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.compare table { width: 100%; }
.compare th, .compare td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  font-size: var(--fs-small);
  line-height: 1.55;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  background: var(--bg-alt);
}
.compare thead th:first-child { color: var(--brand-strong); }
.compare tbody th {
  font-weight: var(--fw-semibold);
  color: var(--text);
  width: 30%;
}
.compare td { color: var(--text-muted); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare tbody tr:nth-child(even) { background: #FBFCFE; }

/* Highlighted column — the Team7India side of a vs-competitor table */
.compare .is-highlight { background: var(--c-spring-50); color: var(--text); }
.compare thead .is-highlight { background: #D6F6E5; }

/* ==========================================================================
   17  TRUST BAR & LOGO WALL
   ========================================================================== */

.trust-bar {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.trust-bar__list {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  padding-block: var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.trust-bar__list::-webkit-scrollbar { display: none; }
/* Six long mono labels do not fit one line inside the container at 1440px, so
   above the phone breakpoint they wrap onto a second row rather than being
   silently truncated. Horizontal scrolling is kept for phones only, where a
   two-row wrap would eat too much vertical space above the fold. */
@media (min-width: 769px) {
  .trust-bar__list {
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-x: visible;
    gap: var(--sp-3) var(--sp-5);
  }
}

.trust-bar__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trust-bar__list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: none;
}

.logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.logo-wall img {
  height: 28px;
  width: auto;
  opacity: .55;
  filter: grayscale(1);
  transition: opacity var(--t-base), filter var(--t-base);
}
.logo-wall a:hover img, .logo-wall li:hover img { opacity: 1; filter: none; }
.logo-wall__label {
  width: 100%;
  text-align: center;
  margin-bottom: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Empty state. The wall ships empty until real client permission exists —
   see the pre-launch checklist in README.md. */
.logo-wall__empty {
  width: 100%;
  text-align: center;
  padding: var(--sp-6);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-small);
}


/* ==========================================================================
   18  TESTIMONIALS & AVATARS
   ========================================================================== */

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.testimonial__quote {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
}
.testimonial__quote::before { content: "\201C"; }
.testimonial__quote::after  { content: "\201D"; }
.testimonial__person {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  font-style: normal;
}
/* Sized for either an image or a pair of initials. Initials are the default
   for unapproved quotes: a stock portrait next to a name and a company reads
   as that person, two letters in a circle cannot. The grid centring and the
   type below are inert on an <img>. */
.testimonial__avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  object-fit: cover;
  flex: none;
  background: var(--surface-tint);
  border: 1px solid var(--line-brand);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--brand-strong);
}
/* Both are spans inside a span, so they need blockifying explicitly or the
   name and role run together on one line and wrap mid-phrase. */
.testimonial__name { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.testimonial__role { display: block; font-size: var(--fs-eyebrow); color: var(--text-muted); }
/* A card that carries no attribution. The oversized quotation mark closes the
   composition where the person block would otherwise sit, so an unattributed
   quote reads as an editorial pull-quote rather than a card missing its footer.

   top: 0, NOT a negative offset. A " sits in the upper third of its own em box,
   so pulling the box up by even a quarter of an em clips the glyph against
   overflow:hidden and leaves two faint circles. Learned on the homepage
   carousel; the same value applies here.

   6rem against the carousel's 8rem — these are compact grid cards. */
.testimonial--mark { position: relative; overflow: hidden; }
.testimonial--mark::before {
  content: "\201C";
  position: absolute;
  top: 0;
  right: 0.12em;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--brand);
  opacity: .10;
  pointer-events: none;
}
/* The card carries its own oversized mark, so the quote's inline curly pair
   would be the second set of quotation marks on the same sentence. The homepage
   carousel makes the same call; keeping the two in step matters more than the
   marginal cost of dropping them. */
.testimonial--mark .testimonial__quote::before,
.testimonial--mark .testimonial__quote::after { content: none; }

.testimonial--featured { background: var(--surface-tint); border-color: #D9D5FB; }
.testimonial--dark {
  background: var(--bg-invert);
  background-image: var(--grad-invert);
  border-color: transparent;
  color: var(--text-invert);
}
.testimonial--dark .testimonial__quote { color: var(--text-invert); }
.testimonial--dark .testimonial__role { color: var(--text-invert-muted); }


/* ==========================================================================
   19  INSIGHT CARDS, JOB LIST & RELATED
   ========================================================================== */

.insight-card { padding: var(--sp-5); gap: var(--sp-3); }
.insight-card__meta {
  display: flex;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.insight-card__format {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--surface-tint);
  color: var(--brand-strong);
}

.job-list { display: grid; gap: var(--sp-3); }
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-base);
}
.job:hover { border-color: #D9D5FB; box-shadow: var(--shadow-md); }
.job__title { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.job__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Empty states — Careers may launch with no open roles, and the Resource
   Library ships without downloadable assets. The microcopy is fixed by the
   content brief; never replace it with a dead download button. */
.empty-state {
  padding: clamp(2.5rem, 2rem + 3vw, 4rem);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.empty-state__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.empty-state__text { color: var(--text-muted); max-width: 34rem; margin-inline: auto; }

.related__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.related__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: all var(--t-fast);
}
.related__link:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
  transform: translateY(-1px);
}
.section--invert .related__link {
  background: rgba(255,255,255,.06);
  border-color: var(--line-invert);
  color: var(--text-invert);
}


/* ==========================================================================
   20  TABS & DISCLOSURE / FAQ
   ========================================================================== */

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--sp-7);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] {
  background: var(--c-spring-50);
  color: var(--accent-ink);
  font-weight: var(--fw-semibold);
}
.tabs__panel[hidden] { display: none; }

/* The shared show/hide primitive. FAQ items and every "expandable card" the
   content asks for are variants of this, not separate implementations. */
.disclosure { border-bottom: 1px solid var(--line); }
.disclosure__trigger {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  width: 100%;
  padding: var(--sp-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.disclosure__icon {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-tint);
  color: var(--brand);
  flex: none;
  transition: transform var(--t-base), background var(--t-fast);
}
.disclosure__icon svg { width: 12px; height: 12px; }
.disclosure__trigger[aria-expanded="true"] .disclosure__icon {
  transform: rotate(45deg);
  background: var(--c-spring-50);
  color: var(--accent-ink);
}
.disclosure__panel {
  overflow: hidden;
  transition: max-height var(--t-base);
}
.js .disclosure__panel { max-height: 0; }
.disclosure__inner { padding-bottom: var(--sp-5); color: var(--text-muted); max-width: 62ch; }

/* Boxed variant used for expandable role and deliverable cards */
.disclosure--boxed {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding-inline: var(--sp-5);
  margin-bottom: var(--sp-3);
}
.disclosure--boxed .disclosure__trigger { font-size: var(--fs-body); }

.faq-group + .faq-group { margin-top: var(--sp-8); }
.faq-group__title {
  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-4);
}

.section--invert .disclosure { border-bottom-color: var(--line-invert); }
.section--invert .disclosure__trigger { color: var(--text-invert); }
.section--invert .disclosure__inner { color: var(--text-invert-muted); }
.section--invert .disclosure__icon { background: rgba(255,255,255,.09); color: var(--accent); }


/* ==========================================================================
   21  FORMS
   --------------------------------------------------------------------------
   Four funnels share this component: Workforce Strategy Session, Project
   Discovery Session, Partner enquiry and Careers application. Different
   fields and destinations, one set of styles.
   ========================================================================== */

.form { display: grid; gap: var(--sp-5); }
.form__row {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.form__intro {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

.field { display: grid; gap: var(--sp-2); }
.field__label { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.field__req { color: var(--c-error); margin-left: 2px; }
.field__control {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  min-height: 48px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__control::placeholder { color: #9BA0BC; }
.field__control:hover { border-color: var(--c-violet-300); }
.field__control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(91,79,233,.16);
}
textarea.field__control { min-height: 8rem; resize: vertical; line-height: 1.6; }

.select-wrap { position: relative; }
.select-wrap select {
  appearance: none;
  padding-right: var(--sp-8);
  cursor: pointer;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: var(--sp-4); top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.field__hint { font-size: var(--fs-eyebrow); color: var(--text-muted); }
.field__error {
  display: none;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  color: var(--c-error);
}
.field.is-invalid .field__control { border-color: var(--c-error); }
.field.is-invalid .field__control:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.16); }
.field.is-invalid .field__error { display: block; }

.field--check {
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.field--check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); }
.field--check .field__label { font-weight: var(--fw-regular); font-size: var(--fs-small); color: var(--text-muted); }

.form__status {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.form__status:empty { display: none; }
.form__status.is-success { background: var(--c-spring-50); color: var(--accent-ink); }
.form__status.is-error   { background: #FCEDEB; color: var(--c-error); }

/* Newsletter — the compact inline variant */
.newsletter { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.newsletter .field { flex: 1 1 14rem; }
.newsletter .field__control { min-height: 48px; }
.site-footer .newsletter .field__control {
  background: rgba(255,255,255,.06);
  border-color: var(--line-invert);
  color: var(--text-invert);
}
.site-footer .newsletter .field__control::placeholder { color: var(--text-invert-muted); }


/* ==========================================================================
   22  BREADCRUMB & PAGENAV
   ========================================================================== */

.breadcrumb { 
	padding-block: var(--sp-4);
	padding-bottom: 0;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
}
.breadcrumb__link:hover { color: var(--brand-strong); text-decoration: underline; }
.breadcrumb__sep { opacity: .5; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: var(--fw-medium); }

/* Sticky in-page nav with scrollspy. Serves both the long homepage (15
   sections) and the legal-page tables of contents. */
.pagenav {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-3));
  z-index: var(--z-raised);
}
.pagenav__title {
  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-4);
}
.pagenav__list { display: grid; gap: var(--sp-1); }
.pagenav__link {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  border-left: 2px solid var(--line);
  font-size: var(--fs-small);
  color: var(--text-muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.pagenav__link:hover { color: var(--text); border-left-color: var(--c-violet-300); }
.pagenav__link[aria-current="true"] {
  color: var(--brand-strong);
  border-left-color: var(--brand);
  font-weight: var(--fw-semibold);
}

/* Horizontal rail — used on the homepage where there is no sidebar */
.pagenav--rail {
  top: var(--header-h);
  background: rgba(247,248,252,.9);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .pagenav--rail { backdrop-filter: saturate(150%) blur(10px); }
}
.pagenav--rail .pagenav__list {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--sp-2);
}
.pagenav--rail .pagenav__list::-webkit-scrollbar { display: none; }
.pagenav--rail .pagenav__link {
  border-left: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  white-space: nowrap;
}
.pagenav--rail .pagenav__link[aria-current="true"] { border-bottom-color: var(--brand); }


/* ==========================================================================
   23  CTA BAND, STICKY CTA & INLINE PROMPT
   ========================================================================== */

.cta-band {
  position: relative;
  padding: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  border-radius: var(--r-xl);
  background: var(--bg-invert);
  background-image: var(--grad-invert);
  color: var(--text-invert);
  overflow: hidden;
  text-align: center;
}
.cta-band__inner { position: relative; max-width: 44rem; margin-inline: auto; }
.cta-band__title { color: var(--text-invert); font-size: var(--fs-h2); }
.cta-band__text {
  margin-top: var(--sp-4);
  color: var(--text-invert-muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-6);
}
/* Secondary at default size, matching the hero pairs. This also closes a
   seven-pixel near-miss: at --lg the two buttons measure 427 + 272 + a 12px
   gap = 711px inside a 704px inner, so the row wrapped and the pair stacked on
   all 29 pages that close with this band. It read as a deliberate stack; it
   was an overflow. */
.cta-band__actions .btn--outline-light {
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-small);
}
.cta-band__micro {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-invert-muted);
}
/* Soft accent glow, matching the reference CTA bands */
.cta-band::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -40%;
  width: 70%; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(34,208,122,.20) 0%, transparent 62%);
  pointer-events: none;
}
.cta-band--accent { background-image: linear-gradient(140deg, #3B2FA8 0%, var(--c-indigo-900) 70%); }

/* Desktop-only sticky session panel */
.sticky-cta {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-sticky);
  display: none;
  max-width: 20rem;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  transform: translateY(140%);
  transition: transform var(--t-slow);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.sticky-cta__text { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--sp-4); }
.sticky-cta__close {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--text-muted);
}
.sticky-cta__close:hover { background: var(--bg-alt); color: var(--text); }
@media (min-width: 1025px) { .js .sticky-cta { display: block; } }

/* The contextual cross-sell nudge — an editorial aside, not an ad */
.inline-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.inline-prompt__text { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }


/* ==========================================================================
   24  SITE HEADER & NAV
   --------------------------------------------------------------------------
   Six top-level items, four dropdowns, one three-level branch (Solutions →
   Workforce Transformation → Capability Mapping / Workforce Facilitation).
   Desktop uses a mega-menu panel; mobile uses an accordion inside the
   off-canvas panel. Never a flyout — there is no hover on a phone and no
   room for a third column.

   Everything that HIDES pending JS is scoped to .js, so with JS disabled the
   nav renders as a plain nested list and every link stays crawlable.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.site-header.is-scrolled {
  background: rgba(247,248,252,.86);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { backdrop-filter: saturate(150%) blur(12px); }
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { background: var(--bg); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* ---- Brand ------------------------------------------------------------- */
/* The mark is now real artwork rather than a styled letterform. width/height
   attributes are on the element too, so the header reserves its space before
   the SVG loads and the nav does not jump. */
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand__mark {
  display: block;
  width: var(--brand-mark, 36px);
  height: var(--brand-mark, 36px);
  flex: none;
}
/* Full lockup, for when the supplied artwork replaces the mark-plus-text
   pairing. Set --brand-logo-h and the aspect looks after itself. */
.brand__logo {
  display: block;
  height: var(--brand-logo-h, 40px);
  width: auto;
  flex: none;
}
.brand--lockup .brand__name { display: none; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.brand__name em { font-style: normal; color: var(--c-brand-orange); }
.site-footer .brand__name { color: var(--text-invert); }
.site-footer .brand__name em { color: var(--accent); }

/* ---- Nav shell --------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav__menu { display: flex; align-items: center; gap: var(--sp-1); }
.nav__item { position: relative; }

.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover, .nav__trigger:hover { color: var(--text); background: var(--bg-alt); }
.nav__link[aria-current="page"] { color: var(--brand-strong); font-weight: var(--fw-semibold); }
.nav__item.is-current-section > .nav__link,
.nav__item.is-current-section > .nav__trigger { color: var(--text); }

.nav__caret { width: 9px; height: 9px; transition: transform var(--t-fast); flex: none; }
.nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__cta { margin-left: var(--sp-3); }

/* ---- Desktop mega-menu panel -------------------------------------------- */
.nav__panel {
  position: absolute;
  top: calc(100% + var(--sp-3));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-dropdown);
  min-width: 15rem;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
}
.nav__panel--wide {
  min-width: min(46rem, calc(100vw - 3rem));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.js .nav__panel { display: none; }
.js .nav__trigger[aria-expanded="true"] + .nav__panel { display: grid; }

.nav__group-title {
  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);
}
.nav__sublist { display: grid; gap: 2px; }
.nav__sublink {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__sublink:hover { background: var(--bg-alt); color: var(--brand-strong); }
.nav__sublink[aria-current="page"] { background: var(--surface-tint); color: var(--brand-strong); }
.nav__sublink small { display: block; font-weight: var(--fw-regular); color: var(--text-muted); font-size: var(--fs-eyebrow); margin-top: 2px; }

/* The third level, shown indented beneath its parent rather than in a
   flyout — the whole branch stays visible at once. */
.nav__sublist--nested {
  margin: var(--sp-1) 0 var(--sp-2) var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--line);
}
.nav__sublist--nested .nav__sublink { padding-block: var(--sp-2); color: var(--text-muted); }
.nav__sublist--nested .nav__sublink:hover { color: var(--brand-strong); }

.nav__panel-aside {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--bg-alt);
}

/* ---- Mobile toggle ------------------------------------------------------ */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text);
}
.nav__toggle:hover { background: var(--bg-alt); }
.nav__toggle-bars { display: grid; gap: 5px; width: 20px; }
.nav__toggle-bars span {
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(20,22,43,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.nav__backdrop.is-open { opacity: 1; visibility: visible; }


/* ==========================================================================
   25  SITE FOOTER
   ========================================================================== */

.site-footer {
  background: var(--bg-invert);
  background-image: var(--grad-invert);
  color: var(--text-invert);
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.site-footer__top {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.6fr);
  padding-bottom: var(--sp-8);
}
.site-footer__brand-text {
  margin-top: var(--sp-4);
  color: var(--text-invert-muted);
  font-size: var(--fs-small);
  max-width: 34ch;
}
.site-footer__tagline {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--text-invert);
}
.site-footer__cols {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}
.site-footer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-invert);
  margin-bottom: var(--sp-4);
}
.site-footer__list { display: grid; gap: var(--sp-2); }
.site-footer__list a {
  font-size: var(--fs-small);
  color: var(--text-invert-muted);
  transition: color var(--t-fast);
}
.site-footer__list a:hover { color: var(--accent); }
.site-footer__list a[aria-current="page"] { color: var(--text-invert); font-weight: var(--fw-medium); }

.site-footer address { font-style: normal; color: var(--text-invert-muted); font-size: var(--fs-small); }

/* The two office blocks sit in the auto-fit link grid, which resolves to four
   columns of roughly 157px. "The Wenta Business Centre" sets to about 170px at
   --fs-small, so every address broke mid-line. One step down fits it, and an
   address is secondary detail beside a nav column anyway — the smaller size is
   the right hierarchy, not just the size that happens to fit. */
.site-footer__address p { font-size: var(--fs-eyebrow); line-height: 1.75; }
.site-footer__address a { font-size: var(--fs-eyebrow); }
.site-footer address a:hover { color: var(--accent); }

.site-footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.site-footer__social a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.07);
  color: var(--text-invert);
  transition: background var(--t-fast), transform var(--t-fast);
}
.site-footer__social a:hover { background: var(--brand); transform: translateY(-2px); }
.site-footer__social svg { width: 16px; height: 16px; }

.site-footer__newsletter { margin-top: var(--sp-5); max-width: 22rem; }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line-invert);
  font-size: var(--fs-eyebrow);
  color: var(--text-invert-muted);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.site-footer__legal a:hover { color: var(--accent); }

/* The consent reopen control. Required by the Cookie Policy — preferences
   must be changeable after the first choice. It is a <button>, not a link,
   because it opens a dialog rather than navigating. */
.site-footer__reopen {
  font: inherit;
  color: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.site-footer__reopen:hover { color: var(--accent); }


/* ==========================================================================
   26  CONSENT MANAGER
   --------------------------------------------------------------------------
   Not a banner. The Cookie Policy specifies a preference centre with
   per-category toggles and three banner actions.

   Two ICO requirements are encoded here and must not be "tidied" later:
   1. "Reject Non-Essential" is visually EQUAL to "Accept All" — same size,
      same weight, same visual level. Demoting it to a text link is a
      compliance failure, not a design choice.
   2. No non-essential script runs before a choice is made. Scripts are
      declared type="text/plain" with data-consent-category and activated
      by initConsent only once that category is granted.
   ========================================================================== */

.consent { position: fixed; inset: auto 0 0 0; z-index: var(--z-modal); }
.consent[hidden] { display: none; }

.consent__banner {
  /* Align with Bootstrap .container (xl = 1140px) when the bar is full width */
  max-width: 1140px;
  margin: var(--sp-4) auto;
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.consent__text { font-size: var(--fs-small); color: var(--text-muted); max-width: 60ch; }
.consent__text a { color: var(--brand-strong); text-decoration: underline; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Equal prominence — enforced, not incidental. */
.consent__actions .btn { min-width: 11rem; }

.consent__panel {
  max-width: 34rem;
  margin: var(--sp-4) auto;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  max-height: min(80vh, 44rem);
  overflow-y: auto;
}
.consent__panel[hidden] { display: none; }
.consent__panel-title { font-size: var(--fs-h4); margin-bottom: var(--sp-4); }

.consent__cat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}
.consent__cat-name { font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.consent__cat-text { font-size: var(--fs-eyebrow); color: var(--text-muted); margin-top: var(--sp-1); }
.consent__always {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
}
.consent__toggle { width: 46px; height: 26px; flex: none; position: relative; }
.consent__toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.consent__toggle-ui {
  display: block;
  width: 46px; height: 26px;
  border-radius: var(--r-pill);
  background: #CDD2E4;
  transition: background var(--t-fast);
  pointer-events: none;
}
.consent__toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast);
}
.consent__toggle input:checked + .consent__toggle-ui { background: var(--accent-ink); }
.consent__toggle input:checked + .consent__toggle-ui::after { transform: translateX(20px); }
.consent__toggle input:focus-visible + .consent__toggle-ui { outline: 2px solid var(--focus); outline-offset: 3px; }

.consent__panel-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }


/* ==========================================================================
   26b  LIVE CHAT
   --------------------------------------------------------------------------
   Two entry points, one behaviour. Both are .js-scoped: a control whose only
   job is to open a widget is worse than absent when the widget can never open.

   No new token is introduced here — radius, colour, shadow, spacing, type and
   z-index all come from the existing scales.
   ========================================================================== */

/* ---- Nav item ------------------------------------------------------------
   Quiet on purpose. Muted text and a transparent background against the
   filled pill beside it, so it reads as the secondary action it is. */
.nav__chat { display: none; }
.js .nav__chat { display: block; }

.nav__chat-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__chat-btn:hover { color: var(--text); background: var(--surface-tint); }
.nav__chat-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav__chat-icon { display: grid; place-items: center; flex: none; color: var(--brand); }
.nav__chat-icon svg { width: 16px; height: 16px; }

/* Three bands, all measured rather than assumed. The comment in header.html
   records that six items plus the full CTA phrase already wrapped the button at
   1440; a seventh item re-opened that failure lower down.

   <=1024   off-canvas panel — full label, room to spare
   1025-1099 desktop row cannot take a seventh item at all: the CTA wrapped onto
             two lines at 1025. Hidden here; the floating launcher still puts
             chat on every page, so nothing is actually lost
   1100-1279 icon only — the accessible name is on the button, so assistive
             tech is unaffected
   >=1280    full label */
@media (min-width: 1025px) and (max-width: 1099px) {
  .js .nav__chat { display: none; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav__chat-btn { padding: var(--sp-2); }
  .nav__chat-label { display: none; }
}

/* ---- Floating launcher ---------------------------------------------------
   Sits at --z-sticky, deliberately beneath the consent bar (--z-modal) and the
   mobile nav panel (--z-panel): both must be able to cover it. */
.chat-launcher {
  display: none;
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-sticky);
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition:
    transform var(--t-base), box-shadow var(--t-base), right var(--t-base);
}
/* Needs BOTH: JavaScript running, and the visitor having made a cookie choice.
   Until then the consent bar owns the bottom of the viewport. */
.js.chat-decided .chat-launcher { display: inline-flex; }
.chat-launcher:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
.chat-launcher:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.chat-launcher__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18);
}
.chat-launcher__icon svg { width: 18px; height: 18px; }

/* One quiet entrance, once. animation-fill-mode is BACKWARDS, not both:
   `both` would leave the final keyframe's transform applied for the life of
   the element, and an animated transform beats a declared one — which would
   silently kill the hover lift. */
@keyframes t7i-chat-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.js.chat-decided .chat-launcher { animation: t7i-chat-in 420ms var(--ease-soft) 300ms backwards; }

/* index.html runs a desktop session panel in this exact corner. Shift sideways
   rather than upward: .sticky-cta has a known max-width but no known height. */
@media (min-width: 1025px) {
  body:has(.sticky-cta.is-visible) .chat-launcher {
    right: calc(var(--sp-5) + 20rem + var(--sp-4));
  }
}

/* Phone: icon-only circle, 56px tap target, tighter inset from both edges.
   The accessible name lives on the button's aria-label, so dropping the
   visible label costs nothing. */
@media (max-width: 640px) {
  .chat-launcher {
    right: var(--sp-4);
    bottom: var(--sp-4);
    width: 56px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .chat-launcher__label { display: none; }
  .chat-launcher__icon { width: 26px; height: 26px; background: none; }
  .chat-launcher__icon svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .js.chat-decided .chat-launcher { animation: none; }
  .chat-launcher:hover { transform: none; }
}


/* ==========================================================================
   27  MOTION, REVEAL & PRESENTATION PRIMITIVES
   --------------------------------------------------------------------------
   The shared foundation layer. Everything here is used by more than one
   section, and several of these replaced four hand-written copies of the same
   effect that had accumulated in pages.css.

   Seven primitives:
     [data-reveal]   scroll reveal, four directions
     [data-stagger]  sequenced children
     .lift           hover elevation for any card-like surface
     .deco           layered section background (glow + grid)
     .figure         illustration / image wrapper
     .icon-tile      the small tinted icon square
     .logo-item      grayscale-to-colour, for logos when they exist

   Motion distance is one variable. --reveal-y is 24px rather than a longer
   travel because it applies to 487 elements site-wide, many of them small;
   raise it here and every reveal on every page follows.
   ========================================================================== */

:root {
  --reveal-y: 24px;
  --reveal-x: 28px;
  --reveal-scale: .95;
  --stagger-step: 90ms;
}

/* Valueless [data-reveal] keeps its original fade-up so the 487 existing uses
   are untouched; the variants are opt-in. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.js [data-reveal="left"]  { transform: translateX(calc(var(--reveal-x) * -1)); }
.js [data-reveal="right"] { transform: translateX(var(--reveal-x)); }
.js [data-reveal="scale"] { transform: scale(var(--reveal-scale)); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Sequenced children. The container is revealed by initReveal; the children
   ride its .is-visible with incremental delays, so a grid of cards needs one
   attribute rather than a hand-numbered data-reveal-delay per card. */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.js [data-stagger].is-visible > * { opacity: 1; transform: none; }
.js [data-stagger].is-visible > *:nth-child(1)  { transition-delay: 0ms; }
.js [data-stagger].is-visible > *:nth-child(2)  { transition-delay: calc(var(--stagger-step) * 1); }
.js [data-stagger].is-visible > *:nth-child(3)  { transition-delay: calc(var(--stagger-step) * 2); }
.js [data-stagger].is-visible > *:nth-child(4)  { transition-delay: calc(var(--stagger-step) * 3); }
.js [data-stagger].is-visible > *:nth-child(5)  { transition-delay: calc(var(--stagger-step) * 4); }
.js [data-stagger].is-visible > *:nth-child(6)  { transition-delay: calc(var(--stagger-step) * 5); }
.js [data-stagger].is-visible > *:nth-child(7)  { transition-delay: calc(var(--stagger-step) * 6); }
.js [data-stagger].is-visible > *:nth-child(8)  { transition-delay: calc(var(--stagger-step) * 7); }
.js [data-stagger].is-visible > *:nth-child(n+9) { transition-delay: calc(var(--stagger-step) * 8); }

/* The hero card collage drifts slightly on scroll. Transform-only and
   rAF-throttled; switched off entirely on small screens and under
   reduced-motion, where it is cost without benefit. */
.js [data-parallax] { will-change: transform; }


/* ---- .lift ---------------------------------------------------------------
   Hover elevation for anything card-like. Both the distance and the shadow
   are variables so a dense grid can lift less than a feature card without a
   new class. */
.lift {
  transition:
    transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.lift:hover {
  transform: translateY(var(--lift-y, -4px));
  box-shadow: var(--lift-shadow, var(--shadow-lg));
  border-color: var(--line-accent);
}
.lift:hover .btn__arrow { transform: translateX(3px); }


/* ---- .deco ---------------------------------------------------------------
   Section background decoration. Replaced four near-identical blocks in
   pages.css. Put .has-deco on the section and <div class="deco deco--glow
   deco--grid" aria-hidden="true"> as its first child.

   Glow positions and grid density are custom properties, so a section varies
   its background by setting two variables rather than by declaring another
   background-image. */
.has-deco { position: relative; isolation: isolate; }
.deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.deco--glow {
  background-image:
    radial-gradient(var(--deco-a-size, 52% 42%) at var(--deco-a-pos, 82% 8%),
      rgba(91, 79, 233, var(--deco-a-alpha, .13)) 0%, transparent 62%),
    radial-gradient(var(--deco-b-size, 44% 40%) at var(--deco-b-pos, 12% 88%),
      rgba(34, 208, 122, var(--deco-b-alpha, .10)) 0%, transparent 60%);
}
/* The grid rides its own layer so it can be masked independently of the
   glows, which sit in the corners and a centre-weighted mask would erase. */
.deco--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,
      rgba(23, 20, 58, var(--deco-grid-alpha, .016)) 0 1px, transparent 1px var(--deco-grid-gap, 96px)),
    repeating-linear-gradient(to bottom,
      rgba(23, 20, 58, var(--deco-grid-alpha, .016)) 0 1px, transparent 1px var(--deco-grid-gap, 96px));
  -webkit-mask-image: radial-gradient(130% 78% at 50% 42%, #000 30%, transparent 100%);
          mask-image: radial-gradient(130% 78% at 50% 42%, #000 30%, transparent 100%);
}
/* Short sections want the grid edge to edge; tall ones need it faded or it
   tiles into visible graph paper. The hero is the short case. */
.deco--grid-full::before {
  -webkit-mask-image: none;
          mask-image: none;
}


/* ---- .figure -------------------------------------------------------------
   One wrapper for every illustration and, when they exist, every photograph:
   same tinted gradient bed, same radius, same clipping, same hover scale. */
.figure {
  display: grid;
  place-items: center;
  padding: var(--figure-pad, clamp(1rem, 0.8rem + 1vw, 1.75rem));
  border-radius: var(--figure-radius, var(--r-lg));
  background-image: linear-gradient(158deg, var(--surface-tint) 0%, rgba(34, 208, 122, .07) 100%);
  overflow: hidden;
}
.figure > svg,
.figure > img {
  display: block;
  width: 100%;
  max-width: var(--figure-max, 17rem);
  height: auto;
  transition: transform var(--t-slow);
}
.figure > img {
  border-radius: var(--r-md);
  aspect-ratio: var(--figure-ratio, 3 / 2);
  object-fit: cover;
}
/* Sits flush against the top edge of a card rather than floating inside it,
   so it drops its own radius and gains the card's dividing rule instead. */
.figure--flush {
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
/* Carries a photograph rather than a diagram, so it fills the frame edge to
   edge. Three of the defaults above are sized for a small card diagram and all
   three work against a photo: the 17rem content cap, the padding, and an inner
   radius one step tighter than the wrapper — which leaves four visible slivers
   at the corners once an image fills the box. Set --figure-ratio per slot. */
.figure--photo {
  --figure-pad: 0;
  --figure-max: none;
}
.figure--photo > img { border-radius: inherit; }
.lift:hover .figure > svg,
.lift:hover .figure > img { transform: scale(1.04); }


/* ---- .icon-tile ---------------------------------------------------------- */
.icon-tile {
  display: grid;
  place-items: center;
  width: var(--tile, 36px);
  height: var(--tile, 36px);
  flex: none;
  border-radius: var(--tile-radius, var(--r-sm));
  background: var(--surface-tint);
  color: var(--brand);
  transition:
    transform var(--t-base), background var(--t-fast), color var(--t-fast);
}
.icon-tile svg { width: 55%; height: 55%; }
.icon-tile--accent { background: var(--c-spring-50); color: var(--accent-ink); }
.icon-tile--pill { border-radius: var(--r-pill); }
.lift:hover .icon-tile {
  transform: rotate(-6deg);
  background: var(--c-spring-50);
  color: var(--accent-ink);
}


/* ---- .logo-item ----------------------------------------------------------
   Ready for client logos the day written permission exists — see the
   pre-launch checklist. Until then .logo-wall ships its empty state and this
   rule matches nothing. */
.logo-item {
  filter: grayscale(1);
  opacity: .65;
  transition: filter var(--t-base), opacity var(--t-base);
}
.logo-item:hover { filter: none; opacity: 1; }


/* ---- .marquee ------------------------------------------------------------
   Continuous horizontal scroll, CSS only. Duplicate the track in the markup and
   mark the copy aria-hidden so its contents are announced once.

   The loop is seamless because the animation travels exactly one track width
   PLUS one gap — that lands the duplicate precisely where the original started.
   Get the gap wrong and there is a visible jump every cycle; it is the whole
   trick, and it is why the gap is a variable rather than a literal.

   --marquee-duration  cycle length (default 46s)
   --marquee-gap       spacing between items, and the loop's correction term */
.marquee__viewport {
  display: flex;
  gap: var(--marquee-gap, var(--sp-3));
  overflow: hidden;
  /* Fades the ends so the track reads as continuous rather than cut off. */
  -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);
}
.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--marquee-gap, var(--sp-3));
  padding: 0;
  animation: t7i-marquee var(--marquee-duration, 46s) linear infinite;
}
.marquee__viewport:hover .marquee__track { animation-play-state: paused; }

@keyframes t7i-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--marquee-gap, var(--sp-3)))); }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-stagger] > * { opacity: 1; transform: none; }
  .js [data-stagger].is-visible > * { transition-delay: 0ms; }
  .js [data-parallax] { transform: none !important; }

  .lift:hover,
  .lift:hover .icon-tile,
  .lift:hover .figure > svg,
  .lift:hover .figure > img { transform: none; }

  /* Stopping the marquee is not enough. The track is `flex: none`, so a
     stationary one 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 list. */
  .marquee__viewport {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee__track {
    animation: none;
    flex: 0 1 auto;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee__track--dup { display: none; }

  /* Stop the pulse travelling, but KEEP the dash pattern. Clearing the
     dasharray too would leave a plain solid ring, which loses the "segmented
     flow" reading the diagram depends on. Reduced motion should mean no
     movement, not less information. */
  .js .flow--loop .flow__pulse { animation: none; }
}


/* ==========================================================================
   28  UTILITIES
   ========================================================================== */

.u-text-center { text-align: center; }
.u-center      { margin-inline: auto; }
.u-flex-center { justify-content: center; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-7 { margin-top: var(--sp-7); }
.u-muted { color: var(--text-muted); }
.u-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.u-nowrap { white-space: nowrap; }
.u-full { width: 100%; }


/* ==========================================================================
   29  RESPONSIVE
   ========================================================================== */

@media (min-width: 641px) {
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack__card--lead { grid-column: 1 / -1; }
  /* ...but NOT in a hero. Two columns with only the lead card spanning both
     leaves every following card as a half-width orphan hanging off the left
     edge of the one above it. Compared side by side, that shape was breaking
     seven heroes at once — Staff Augmentation, Managed Delivery, Project
     Delivery, Workforce Operations, Growth & Digital, Solutions and Talent —
     and on the dark KPI cards it read as a fragment rather than a card.
     A hero's supporting column is a stack, so it gets one column. */
  .section--hero .stack { grid-template-columns: 1fr; }
  .question-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

@media (min-width: 769px) {
  .split--media, .split--narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .split--narrow { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .consent__panel { padding: var(--sp-7); }
}

@media (min-width: 1025px) {
  .flow__stack { display: none; }

  /* On desktop the parent link and its disclosure caret must sit on one line.
     Without this the <li> lets them wrap and the caret drops below the label,
     which is what happens by default once six items plus a CTA compete for the
     container width. */
  .nav__item--split { display: flex; align-items: center; }
  .nav__item--split > .nav__link { padding-right: var(--sp-2); }
  .nav__item--split > .nav__trigger { padding: var(--sp-3) var(--sp-2) var(--sp-3) 0; }

  /* Tighten the row so six items and the CTA fit without wrapping. */
  .nav__menu { gap: 0; }
  .nav__link, .nav__trigger { padding-inline: var(--sp-3); }
}

/* ---- Tablet and below --------------------------------------------------- */
@media (max-width: 1024px) {
  /* Mega-menu becomes an off-canvas accordion */
  .nav__toggle { display: grid; }

  .js .nav__menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: var(--z-panel);
    width: min(24rem, 88vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-h) + var(--sp-5)) var(--sp-5) var(--sp-8);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--t-base);
  }
  .js .nav__menu.is-open { transform: translateX(0); }

  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link, .nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-2);
    font-size: var(--fs-body);
    border-radius: 0;
  }
  /* Parent rows split into a link plus a separate expand button, so the
     overview page stays reachable while its children expand. */
  .nav__item--split { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .nav__item--split .nav__trigger { width: auto; padding-inline: var(--sp-3); }

  .nav__panel {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 var(--sp-4) var(--sp-4);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav__panel--wide { grid-template-columns: 1fr; gap: var(--sp-4); }
  .nav__panel-aside { display: none; }
  .nav__cta { margin: var(--sp-5) 0 0; }
  .nav__cta .btn { width: 100%; }

  .site-footer__top { grid-template-columns: 1fr; }
}

/* ---- Phone -------------------------------------------------------------- */
@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4, .grid--6 { --cols: 1; }
  .grid--3.grid--keep-2, .grid--4.grid--keep-2, .grid--6.grid--keep-2 { --cols: 2; }

  .split, .split--media, .split--narrow { grid-template-columns: 1fr; }

  /* SVG diagrams give way to the readable vertical list. The wheel is the
     worst offender at narrow widths — six labelled wedges cannot stay legible
     — so it swaps out with the rest. */
  .flow--loop .flow__svg, .flow--linear .flow__svg, .flow--wheel .flow__svg { display: none; }
  .flow__stack { display: grid; }

  /* Compare tables stack per column rather than scrolling sideways */
  .compare { border: 0; box-shadow: none; background: none; }
  .compare table, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare thead { display: none; }
  .compare tbody tr {
    margin-bottom: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .compare tbody tr:nth-child(even) { background: var(--surface); }
  .compare tbody th { width: 100%; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
  .compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--sp-1);
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .consent__banner { grid-template-columns: 1fr; }
  .consent__actions .btn { flex: 1 1 100%; min-width: 0; }

  .statement { padding-block: var(--sp-6); }
  .cta-band { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg); }
  .job { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .grid--3.grid--keep-2, .grid--4.grid--keep-2, .grid--6.grid--keep-2 { --cols: 1; }
  .btn { width: 100%; }
  .cta-pair .btn, .cta-band__actions .btn { width: 100%; }
  .tabs__list { border-radius: var(--r-md); }
}


/* ==========================================================================
   30  PRINT
   --------------------------------------------------------------------------
   Matters most for the legal pages, which offer "print this page" instead of
   a PDF — a PDF would mean maintaining two copies of a document that must
   not diverge.
   ========================================================================== */

@media print {
  .site-header, .site-footer, .cta-band, .sticky-cta, .consent,
  .nav, .pagenav, .breadcrumb, .related, .inline-prompt { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  .prose { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .disclosure__panel { max-height: none !important; }
  h1, h2, h3 { break-after: avoid; }
  .card, .compare, .scenario { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}