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

   This file holds the design system and every shared component.
   Page-specific section CSS lives in pages.css, scoped under body.page-*.
   Never add page rules here.

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


/* ==========================================================================
   01  TOKENS
   ========================================================================== */

:root {
  /* ---- PRIMITIVE: brand ------------------------------------------------ */
  --c-ink-900:    #14162B;
  --c-indigo-900: #17143A;
  --c-indigo-700: #2E2A6B;
  --c-violet:     #5B4FE9;
  --c-violet-600: #4A3FD4;
  --c-violet-300: #A9A2F7;
  --c-violet-50:  #EFEDFE;

  /* ---- PRIMITIVE: signal ----------------------------------------------- *
   * --c-spring is ~1.9:1 on light backgrounds. It is a FILL and an ON-DARK
   * colour only. Any spring-green TEXT on a light surface — including the
   * .h-accent keyword, which appears on every heading on the site — must
   * use --c-spring-ink. Getting this wrong makes the most-repeated brand
   * element on the site illegible. See .h-accent in section 03.           */
  --c-spring:     #22D07A;
  --c-spring-ink: #0B7A45;
  --c-spring-50:  #E6FBF0;

  /* ---- PRIMITIVE: data accents (charts & diagram nodes only) ----------- */
  --c-amber: #FFB020;
  --c-coral: #FF6B5A;
  --c-sky:   #38BDF8;

  /* ---- PRIMITIVE: neutrals (cool, never cream) ------------------------- */
  --c-white:    #FFFFFF;
  --c-mist:     #F7F8FC;
  --c-lavender: #EEF0FB;
  --c-line:     #E3E6F2;
  --c-muted:    #5C6180;

  /* ---- SEMANTIC ALIASES ------------------------------------------------ *
   * Components reference these, never the primitives above.               */
  --bg:            var(--c-mist);
  --bg-alt:        var(--c-lavender);
  --surface:       var(--c-white);
  --surface-tint:  var(--c-violet-50);
  --bg-invert:     var(--c-indigo-900);
  --text:          var(--c-ink-900);
  --text-muted:    var(--c-muted);
  --text-invert:   var(--c-white);
  --text-invert-muted: #B9B5D6;
  --brand:         var(--c-violet);
  --brand-strong:  var(--c-violet-600);
  --accent:        var(--c-spring);
  --accent-ink:    var(--c-spring-ink);
  --line:          var(--c-line);
  --line-invert:   rgba(255,255,255,.14);
  /* Hover border tints. These two values were hand-written at four separate
     call sites before they became tokens; if a hover edge looks wrong
     anywhere, it is one of these. */
  --line-brand:    #D9D5FB;
  --line-accent:   #BDEBD3;
  /* Read off the supplied logo. Used by the brand lockup only — the rest of
     the site still runs on the violet/green palette that predates the logo.
     Retokenising the whole system to these is a separate decision. */
  --c-brand-navy:   #17294D;
  --c-brand-orange: #EF5B15;
  --focus:         var(--c-violet);

  /* ---- STATE ----------------------------------------------------------- */
  --c-error:        #C0392B;
  --c-error-invert: #FF9E92;
  --c-success:      var(--c-spring-ink);
  --field-bg:       var(--c-white);
  --field-border:   #D5D9EA;

  /* ---- TYPOGRAPHY ------------------------------------------------------ */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Fluid scale. Every clamp is rem + vw, never bare vw, so text still
     scales with the user's browser zoom and font-size (WCAG 1.4.4). */
  --fs-eyebrow: 0.75rem;
  --fs-small:   0.875rem;
  --fs-body:    clamp(1rem,     0.96rem + 0.18vw, 1.0625rem);
  --fs-lead:    clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem);
  --fs-h4:      clamp(1.0625rem, 1rem   + 0.30vw, 1.25rem);
  --fs-h3:      clamp(1.25rem,  1.10rem + 0.65vw, 1.625rem);
  --fs-h2:      clamp(1.875rem, 1.40rem + 2.10vw, 3rem);
  --fs-h1:      clamp(2.375rem, 1.60rem + 3.40vw, 4rem);
  --fs-hero:    clamp(2.75rem,  1.75rem + 4.40vw, 4.75rem);

  --lh-tight:   1.06;
  --lh-snug:    1.16;
  --lh-heading: 1.28;
  --lh-body:    1.68;

  --ls-eyebrow: 0.14em;
  --ls-tight:   -0.02em;
  --ls-tighter: -0.035em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- SPACING (8px base) ---------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --gap-grid:  clamp(1.25rem, 0.9rem + 1.5vw, 2rem);

  /* ---- RADII ----------------------------------------------------------- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---- ELEVATION (violet-tinted, never neutral grey) -------------------- */
  --shadow-sm:     0 2px 8px rgba(23,20,58,.05);
  --shadow-md:     0 8px 24px rgba(23,20,58,.07);
  --shadow-lg:     0 20px 48px rgba(23,20,58,.10);
  --shadow-xl:     0 32px 80px rgba(23,20,58,.14);
  --shadow-violet: 0 16px 40px rgba(91,79,233,.22);

  /* ---- GRADIENT WASHES (sections only — never buttons, never text) ------ */
  --grad-hero:   radial-gradient(120% 90% at 50% 0%, #EDEBFF 0%, var(--c-mist) 55%, var(--c-mist) 100%);
  --grad-alt:    radial-gradient(90% 120% at 85% 0%, #E8EAFB 0%, var(--c-lavender) 60%);
  --grad-invert: radial-gradient(100% 120% at 20% 0%, #2A2568 0%, var(--c-indigo-900) 70%);

  /* ---- MOTION ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.16,1,.30,1);
  --t-fast: 160ms var(--ease);
  --t-base: 260ms var(--ease);
  --t-slow: 560ms var(--ease-soft);

  /* ---- LAYOUT ---------------------------------------------------------- */
  --container:        1240px;
  --container-wide:   1440px;
  --container-narrow: 720px;
  --container-pad:    clamp(1.25rem, 4vw, 3rem);
  --header-h:         76px;

  /* ---- Z-INDEX SCALE ---------------------------------------------------- *
   * Never write a raw z-index anywhere in this file or in pages.css.      */
  --z-base: 0;      --z-raised: 10;    --z-sticky: 100;  --z-dropdown: 200;
  --z-backdrop: 290;--z-panel: 300;    --z-overlay: 400; --z-modal: 500;
  --z-toast: 600;   --z-skip: 900;
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* Anchor jumps must clear the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

::selection { background: var(--c-violet-300); color: var(--c-indigo-900); }


/* ==========================================================================
   03  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: var(--container-narrow); }
.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; }

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-invert);
  color: var(--text-invert);
  border-radius: var(--r-sm);
  font-weight: var(--fw-semibold);
  transform: translateY(calc(-100% - var(--sp-5)));
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translateY(0); }

.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. Applied to sample testimonials, illustrative
   case studies and suggested metrics — content the source explicitly flags
   as "replace before launch". These must never read as genuine. */
.is-placeholder { position: relative; }
.is-placeholder::before {
  content: "Illustrative placeholder — not a real client";
  display: block;
  /* The class is applied to the grid container itself, which makes this
     pseudo-element a grid ITEM — without this it takes cell 1 and shunts the
     cards along, orphaning the last one onto a second row. Spanning the row
     turns it back into the caption it was always meant to be. Inert on the
     non-grid uses (partners, growth-digital), since grid-column is ignored
     on anything that is not a grid item. */
  grid-column: 1 / -1;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-error);
}
.is-placeholder--inline::before { display: inline-block; margin: 0 0 var(--sp-2); }


/* ==========================================================================
   05  LAYOUT & GRID
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.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));
}

/* 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); }

/* 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.                          */
.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 loop and linear flows on small screens. Rendered
   as a real list so it degrades to readable content with no SVG at all. */
.flow__stack { display: none; }
.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. */
.stage-list--journey {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp-5);
  scrollbar-width: thin;
}
.stage-list--journey .stage {
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  flex: 0 0 min(18rem, 78vw);
  scroll-snap-align: start;
  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;
}
.testimonial__avatar {
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  object-fit: cover;
  flex: none;
  background: var(--surface-tint);
}
/* 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); }
.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); }
.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);
}
.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); }
.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 {
  max-width: var(--container);
  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); }


/* ==========================================================================
   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);
}
.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; }


@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; }

  /* 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; }
  .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, .skip-link, .inline-prompt { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  .container { max-width: none; padding: 0; }
  .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; }
}