/* ==========================================================================
   MS Workliva Pvt. Ltd. — Design System
   Style: Minimalism & Swiss  |  Pattern: Trust & Authority + Conversion
   Palette sampled from the official logo. All text pairs verified WCAG AA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled from logo pixels */
  --ink:          #121826;
  --navy-900:     #0A1A2F;
  --navy-850:     #0A2242;
  --navy-800:     #0A2B5C;
  --navy-700:     #0B3C7E;
  --blue-600:     #0E5AAE;
  --blue-500:     #1E6FD9;
  --blue-400:     #4C90E6;
  --blue-300:     #7FB2F0;
  --blue-200:     #A8CBF5;

  /* Neutrals */
  --slate-700:    #334155;
  --slate-600:    #475569;
  --slate-500:    #5B6878;
  --slate-400:    #9AA9BC;
  --slate-300:    #C3CEDC;

  /* Surfaces */
  --white:        #FFFFFF;
  --surface:      #FFFFFF;
  --surface-tint: #F4F7FB;
  --surface-tint-2:#EDF2F9;
  --border:       #E2E8F0;
  --border-strong:#CFDAE8;
  --border-dark:  rgba(255,255,255,.14);

  /* Semantic */
  --text:         var(--ink);
  --text-muted:   var(--slate-600);
  --text-subtle:  var(--slate-500);
  --accent:       var(--blue-600);
  --accent-hover: #0B4C96;
  --on-accent:    #FFFFFF;
  --ring:         var(--blue-500);

  /* Type */
  --font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.35rem, 1.35rem + 3.6vw, 4.1rem);
  --fs-h1:      clamp(2.05rem, 1.35rem + 2.5vw, 3.35rem);
  --fs-h2:      clamp(1.7rem,  1.25rem + 1.6vw, 2.6rem);
  --fs-h3:      clamp(1.25rem, 1.1rem  + 0.55vw, 1.6rem);
  --fs-h4:      clamp(1.06rem, 1rem    + 0.28vw, 1.22rem);
  --fs-lead:    clamp(1.06rem, 1rem    + 0.42vw, 1.28rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.78rem;

  /* Spacing — density 4 (standard) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 40px;  --space-8: 56px;
  --space-9: 72px;  --space-10: 96px; --space-11: 120px;

  --section-y:   clamp(64px, 4.2vw + 40px, 112px);
  --section-y-lg:clamp(80px, 6vw + 44px, 148px);

  --container:   1200px;
  --container-narrow: 860px;
  --gutter:      20px;

  /* Shape & depth — Swiss: sharp, minimal */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(10,26,47,.05);
  --shadow-sm: 0 1px 3px rgba(10,26,47,.07), 0 1px 2px rgba(10,26,47,.04);
  --shadow-md: 0 4px 16px rgba(10,26,47,.08), 0 1px 3px rgba(10,26,47,.05);
  --shadow-lg: 0 14px 40px rgba(10,26,47,.11), 0 3px 10px rgba(10,26,47,.05);

  /* Motion — tier 4 "standard" */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --dur-fast:   140ms;
  --dur:        220ms;
  --dur-slow:   500ms;

  /* Layers */
  --z-base: 1; --z-sticky: 40; --z-drawer: 80; --z-overlay: 70; --z-toast: 100;

  --header-h: 72px;

  /* Brand surfaces. These were hard-coded inside each gradient, which meant the
     token system did not actually control the site's primary brand colour. */
  --surface-dark-1: #0A1A2F;
  --surface-dark-2: #0A2242;
  --surface-dark-3: #0B3058;
  --glow-blue:      rgba(30,111,217,.28);
  --glow-navy:      rgba(11,60,126,.44);
  --on-dark:        #E7EDF5;
  --on-dark-muted:  #C9D6E6;
  --hero-muted:     #A8BCD4;
  --rule-dark:      rgba(255,255,255,.12);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "cv11", "ss01";
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.16;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: var(--fs-h4); line-height: 1.4; letter-spacing: -0.01em; }
p  { text-wrap: pretty; overflow-wrap: anywhere; }

::selection { background: var(--blue-200); color: var(--navy-900); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.on-dark :focus-visible, .site-footer :focus-visible, .utility-bar :focus-visible {
  outline-color: var(--blue-300);
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.container--narrow { max-width: var(--container-narrow); }
@media (min-width: 48em)  { :root { --gutter: 32px; } }
@media (min-width: 80em) { :root { --gutter: 40px; } }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--tint { background: var(--surface-tint); }
.section--tint-2 { background: var(--surface-tint-2); }
.section--dark {
  background: var(--navy-900);
  background-image:
    radial-gradient(1100px 500px at 12% -10%, rgba(30,111,217,.20), transparent 62%),
    radial-gradient(760px 420px at 96% 108%, rgba(11,60,126,.34), transparent 66%);
  color: #E7EDF5;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p:not(.eyebrow) { color: var(--slate-300); }

.section-head { max-width: 760px; margin-bottom: var(--space-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-muted); font-size: var(--fs-lead); margin-top: var(--space-4); }
.section--dark .section-head p { color: var(--slate-300); }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  z-index: var(--z-toast);
  background: var(--navy-900); color: #fff;
  padding: 12px 20px; border-radius: var(--radius);
  font-weight: 600; font-size: var(--fs-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* Fluid card grids.
   These are auto-fit so they stay container-aware (a .grid--2 nested inside a
   narrow .split column must collapse to one column on its own). The track
   minimum is therefore chosen so that one MORE column than the name implies
   cannot fit inside the 1200px container — otherwise `grid--3` silently renders
   four across and a six-item list breaks as 4+2 instead of 3+3.
     gap 24px, container 1200px:
       --2  n=3 needs 3x400+48 = 1248 > 1200  -> caps at 2
       --3  n=4 needs 4x300+72 = 1272 > 1200  -> caps at 3
       --4  n=5 needs 5x230+96 = 1246 > 1200  -> caps at 4  */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* At 1024-1199 the container is 960px, where auto-fit would drop --4 to three
   columns and strand a fourth card on its own row. --4 is only ever used at the
   top level of a section, so pinning it here is safe. */
@media (min-width: 64em) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   4. TYPE HELPERS
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: ""; width: 24px; height: 2px; background: var(--accent); flex: none;
}
/* On dark surfaces the plain eyebrow goes light. Listed explicitly so that the
   blanket paragraph-colour rules on .hero / .page-hero / .cta-band can never
   win the cascade against it (they are `.class p` = higher specificity). */
.section--dark .eyebrow, .on-dark .eyebrow,
.hero .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow { color: var(--blue-300); }
.section--dark .eyebrow::before, .on-dark .eyebrow::before,
.hero .eyebrow::before, .page-hero .eyebrow::before, .cta-band .eyebrow::before { background: var(--blue-300); }

/* The chip variant always sits on its own light surface, light or dark section. */
.eyebrow--chip,
.section--dark .eyebrow--chip, .on-dark .eyebrow--chip,
.hero .eyebrow--chip, .page-hero .eyebrow--chip, .cta-band .eyebrow--chip {
  padding: 7px 16px 7px 14px;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--accent);
  border-radius: var(--radius-pill);
  letter-spacing: .09em;
  box-shadow: var(--shadow-xs);
}
.eyebrow--chip::before,
.section--dark .eyebrow--chip::before, .on-dark .eyebrow--chip::before,
.hero .eyebrow--chip::before, .page-hero .eyebrow--chip::before, .cta-band .eyebrow--chip::before {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

.lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.66; max-width: 68ch; }
.section--dark .lead { color: var(--slate-300); }
.text-accent { color: var(--accent); }
.section--dark .text-accent { color: var(--blue-300); }
.measure { max-width: 68ch; }
.muted { color: var(--text-muted); }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 26px;
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer; text-align: center;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
  touch-action: manipulation;
  /* Never nowrap: a long label ("Submit Your Requirement") forced the whole
     section past the viewport once text was scaled, on 8 of 13 pages. */
  white-space: normal; text-wrap: balance;
}
.btn svg { flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg.icon-arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 10px rgba(14,90,174,.26); }
.btn--primary:hover { background: var(--accent-hover); color: #fff; box-shadow: 0 6px 20px rgba(14,90,174,.32); }

.btn--secondary { background: transparent; color: var(--navy-800); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-tint); border-color: var(--navy-800); color: var(--navy-800); }

.btn--dark { background: var(--navy-900); color: #fff; }
.btn--dark:hover { background: var(--navy-800); color: #fff; }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.btn--light { background: #fff; color: var(--navy-800); }
.btn--light:hover { background: var(--surface-tint); color: var(--navy-800); }

.btn--sm { min-height: 42px; padding: 10px 20px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--fs-sm); color: var(--accent);
  min-height: 24px;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); flex: none; }
.link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow, .on-dark .link-arrow { color: var(--blue-300); }

/* --------------------------------------------------------------------------
   6. HEADER — utility strip + main nav
   -------------------------------------------------------------------------- */
.utility-bar {
  background: var(--navy-900);
  color: var(--slate-300);
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.utility-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); min-height: 38px;
}
.utility-bar__tag { letter-spacing: .04em; color: var(--slate-400); }
.utility-bar__links { display: flex; align-items: center; gap: var(--space-5); }
.utility-bar__links a {
  color: var(--slate-300); font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; transition: color var(--dur) var(--ease);
}
.utility-bar__links a:hover { color: #fff; }
@media (max-width: 47.9375em) { .utility-bar { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 40px; width: auto; }
@media (min-width: 64em) { .brand img { height: 44px; } }

/* Desktop nav */
.nav { display: none; }
@media (min-width: 64em) {
  .nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
}
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; min-height: 44px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--slate-700);
  border-radius: var(--radius); position: relative;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--navy-800); background: var(--surface-tint); }
.nav__link[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.nav__chev { transition: transform var(--dur) var(--ease); }
.nav__item--has-menu[data-open="true"] .nav__chev { transform: rotate(180deg); }

/* Mega menu */
.nav__item { position: relative; }
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(88vw, 660px);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.nav__item--has-menu[data-open="true"] .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mega__link {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease);
  min-height: 44px;
}
.mega__link:hover { background: var(--surface-tint); }
.mega__ico {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--surface-tint-2); color: var(--accent);
}
.mega__link:hover .mega__ico { background: var(--accent); color: #fff; }
.mega__t { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); line-height: 1.35; }
.mega__d { display: block; font-size: var(--fs-xs); color: var(--text-subtle); line-height: 1.5; margin-top: 2px; }
.mega__foot {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--space-5);
}

.header__cta { display: none; }
@media (min-width: 64em) { .header__cta { display: inline-flex; margin-left: var(--space-4); } }

/* Mobile toggle + drawer */
.nav-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-left: auto;
  border-radius: var(--radius); color: var(--navy-800);
  border: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease);
}
.nav-toggle:hover { background: var(--surface-tint); }
@media (min-width: 64em) { .nav-toggle { display: none; } }
.nav-toggle__bar {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bar + .nav-toggle__bar { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-scrim {
  position: fixed; inset: 0; background: rgba(10,26,47,.55);
  z-index: var(--z-overlay); opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.drawer-scrim[data-open="true"] { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(92vw, 380px); z-index: var(--z-drawer);
  background: #fff; border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.drawer[data-open="true"] { transform: translateX(0); visibility: visible; }
/* Closed: translateX alone leaves the panel focusable and hit-testable. This,
   plus the `inert` attribute set in main.js, removes it from the tab order. */
.drawer:not([data-open="true"]) { visibility: hidden; pointer-events: none; }
@media (min-width: 64em) { .drawer, .drawer-scrim { display: none; } }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border); min-height: var(--header-h);
}
.drawer__head img { height: 34px; }
.drawer__close {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--radius); color: var(--slate-600);
  transition: background-color var(--dur) var(--ease);
}
.drawer__close:hover { background: var(--surface-tint); }
.drawer__body { padding: var(--space-4) var(--space-5) var(--space-8); overflow-y: auto; flex: 1; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 14px 4px; min-height: 52px;
  font-size: 1.02rem; font-weight: 500; color: var(--slate-700);
  border-bottom: 1px solid var(--border);
  transition: color var(--dur) var(--ease);
}
.drawer__link:hover { color: var(--accent); }
.drawer__link[aria-current="page"] { color: var(--accent); font-weight: 600; }
.drawer__sub { padding-left: var(--space-4); }
.drawer__sub .drawer__link { font-size: var(--fs-sm); color: var(--text-subtle); min-height: 46px; }
.drawer__group-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-500);
  padding: var(--space-5) 4px var(--space-2);
}
.drawer__cta { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy-900);
  background-image:
    radial-gradient(1200px 620px at 14% -8%, rgba(30,111,217,.28), transparent 60%),
    radial-gradient(900px 520px at 92% 104%, rgba(11,60,126,.44), transparent 64%),
    linear-gradient(168deg, var(--surface-dark-1) 0%, var(--surface-dark-2) 54%, var(--surface-dark-3) 100%);
  color: #fff;
  padding-block: clamp(64px, 6vw + 40px, 128px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(1100px 620px at 68% 34%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(1100px 620px at 68% 34%, #000 0%, transparent 76%);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.028em; }
.hero p:not(.eyebrow) { color: var(--on-dark-muted); }
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 64em) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; gap: var(--space-10); }
}
.hero__copy > * + * { margin-top: var(--space-5); }
.hero__lead { font-size: var(--fs-lead); line-height: 1.62; max-width: 56ch; }
.hero__sub { font-size: var(--fs-sm); color: var(--hero-muted); max-width: 58ch; line-height: 1.7; }
.hero .btn-row { margin-top: var(--space-7); }

/* Hero side panel */
.hero__panel {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.hero__panel h2 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--blue-300); margin-bottom: var(--space-5);
}
.hero__panel-list { display: grid; gap: var(--space-2); }
.hero__panel-item {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* .09 white lightened the surface enough to drop this text to 3.65:1. */
a.hero__panel-item:hover { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.26); }
.hero__panel-item .ico {
  flex: none; width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: rgba(127,178,240,.14); color: var(--blue-300);
}
.hero__panel-item strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: #fff; }
.hero__panel-item span { display: block; font-size: var(--fs-xs); color: var(--hero-muted); line-height: 1.55; margin-top: 2px; }

/* Page banner (interior pages) */
.page-hero {
  background: var(--navy-900);
  background-image:
    radial-gradient(900px 440px at 10% -20%, rgba(30,111,217,.24), transparent 62%),
    radial-gradient(700px 400px at 94% 116%, rgba(11,60,126,.4), transparent 66%),
    linear-gradient(160deg, var(--surface-dark-1) 0%, var(--surface-dark-2) 100%);
  color: #fff;
  padding-block: clamp(52px, 4.4vw + 34px, 92px);
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero p:not(.eyebrow) { color: #B9C8DB; margin-top: var(--space-5); max-width: 62ch; font-size: var(--fs-lead); line-height: 1.62; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); margin-bottom: var(--space-5); }
.breadcrumb a { color: var(--hero-muted); transition: color var(--dur) var(--ease); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span[aria-current] { color: var(--blue-300); font-weight: 500; }
.breadcrumb svg { color: #55688A; flex: none; }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.68; }
.card .link-arrow { margin-top: auto; padding-top: var(--space-5); }
a.card:hover, .card--hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }

.card__ico {
  width: 48px; height: 48px; border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: var(--space-5);
  background: var(--surface-tint-2); color: var(--accent);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.card:hover .card__ico, .card--hover:hover .card__ico { background: var(--accent); color: #fff; }

.card--num { position: relative; }
.card__num {
  font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700;
  line-height: 1; color: var(--blue-200); letter-spacing: -0.04em;
  margin-bottom: var(--space-4);
}

.card--dark {
  background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1);
}
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--slate-300); }
.card--dark .card__ico { background: rgba(127,178,240,.13); color: var(--blue-300); }
a.card--dark:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
a.card--dark:hover .card__ico { background: var(--blue-500); color: #fff; }

/* Feature row cards (left accent rule) */
.feature {
  padding: var(--space-5) 0 var(--space-5) var(--space-6);
  border-left: 2px solid var(--border);
  transition: border-color var(--dur) var(--ease);
}
.feature:hover { border-left-color: var(--accent); }
.feature h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.feature p { color: var(--text-muted); font-size: var(--fs-sm); }
.section--dark .feature { border-left-color: rgba(255,255,255,.14); }
.section--dark .feature:hover { border-left-color: var(--blue-300); }

/* --------------------------------------------------------------------------
   9. LISTS
   -------------------------------------------------------------------------- */
.check-list { display: grid; gap: var(--space-3); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }
.check-list svg { flex: none; margin-top: 3px; color: var(--accent); }
.section--dark .check-list li, .on-dark .check-list li { color: var(--slate-300); }
.section--dark .check-list svg, .on-dark .check-list svg { color: var(--blue-300); }
.check-list--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-3) var(--space-6); }

/* Capability pills */
.pill-set { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; min-height: 44px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 500; color: var(--slate-700);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pill svg { flex: none; color: var(--accent); }
.pill:hover { border-color: var(--navy-800); background: var(--surface-tint); color: var(--navy-800); }
.section--tint .pill, .section--tint-2 .pill { background: #fff; }
.section--dark .pill {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #DCE6F2;
}
.section--dark .pill svg { color: var(--blue-300); }
.section--dark .pill:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26); color: #fff; }

/* --------------------------------------------------------------------------
   10. STATS BAND
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stat { padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6); border-left: 2px solid rgba(255,255,255,.16); }
.stat__n {
  font-family: var(--font-heading); font-size: clamp(2.1rem, 1.5rem + 1.9vw, 3.05rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat__n sup { font-size: .46em; font-weight: 600; top: -0.72em; margin-left: 2px; color: var(--blue-300); }
.stat__l { display: block; margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--slate-300); line-height: 1.55; }
.stats--light .stat { border-left-color: var(--border-strong); }
.stats--light .stat__n { color: var(--navy-800); }
.stats--light .stat__n sup { color: var(--accent); }
.stats--light .stat__l { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   11. PROCESS TIMELINE
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--space-2); counter-reset: step; }
.step {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--space-5);
  padding: var(--space-5) 0; position: relative;
}
.step + .step { border-top: 1px solid var(--border); }
.section--dark .step + .step { border-top-color: rgba(255,255,255,.1); }
.step__n {
  font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 700;
  color: var(--accent); line-height: 1.35; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.section--dark .step__n { color: var(--blue-300); }
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.step p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 62ch; }
@media (min-width: 48em) { .step { grid-template-columns: 74px 1fr; gap: var(--space-6); } }

/* Two-track process comparison */
.track {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.track__head { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-5); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.track__head .ico { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-tint-2); color: var(--accent); }
.track__head h3 { margin: 0; }
.track__head p { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 2px; }

/* --------------------------------------------------------------------------
   12. SPLIT / MEDIA SECTIONS
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 64em) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .split--wide-l { grid-template-columns: 1.15fr .85fr; }
  .split--wide-r { grid-template-columns: .85fr 1.15fr; }
  .split--rev > *:first-child { order: 2; }
}
.split__media {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-tint);
}

/* Audience split (employers / consultants) */
.audience {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.audience__card {
  position: relative;
  border-radius: var(--radius-lg); padding: var(--space-8);
  background: #fff; border: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.audience__card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border-strong); }
.audience__card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--blue-500), var(--navy-800));
}
.audience__card h3 { margin-bottom: var(--space-3); }
.audience__card p { color: var(--text-muted); margin-bottom: var(--space-6); }
.audience__card .btn { align-self: flex-start; margin-top: auto; }
.audience__card--alt::before { background: linear-gradient(180deg, var(--slate-400), var(--navy-800)); }

/* --------------------------------------------------------------------------
   13. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--navy-900);
  background-image:
    radial-gradient(900px 440px at 18% 0%, rgba(30,111,217,.3), transparent 62%),
    radial-gradient(760px 420px at 88% 100%, rgba(11,60,126,.44), transparent 66%),
    linear-gradient(140deg, var(--surface-dark-1), var(--navy-800));
  color: #fff; padding-block: var(--section-y);
  position: relative; overflow: hidden;
}
.cta-band__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 56.25em) {
  .cta-band__inner { grid-template-columns: 1.45fr auto; gap: var(--space-9); }
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p:not(.eyebrow) { color: #B9C8DB; margin-top: var(--space-4); max-width: 60ch; font-size: var(--fs-lead); line-height: 1.6; }
.cta-band .btn-row { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.form-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.field { display: grid; gap: 7px; }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--slate-700); }
.field .req { color: #B42318; margin-left: 2px; }
.field__help { font-size: var(--fs-xs); color: var(--text-subtle); line-height: 1.5; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 15px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: #fff; color: var(--ink); font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.65; padding-top: 13px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate-500); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(30,111,217,.16);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #D92D20; }
.field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(217,45,32,.14); }
.field__err {
  display: none; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 500; color: #B42318;
}
.field__err.is-shown { display: flex; }
.field__err svg { flex: none; }

fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
legend {
  font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 600;
  color: var(--ink); padding: 0; margin-bottom: var(--space-1);
}
.fieldset-note { font-size: var(--fs-sm); color: var(--text-subtle); margin-top: -6px; }

.form-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-tint-2); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: var(--fs-xs);
  color: var(--text-muted); line-height: 1.6;
}
.form-note svg { flex: none; color: var(--accent); margin-top: 2px; }

.form-status {
  display: none; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-5); border-radius: var(--radius);
  font-size: var(--fs-sm); line-height: 1.6;
}
.form-status.is-shown { display: flex; }
.form-status--ok { background: #ECFDF3; border: 1px solid #A6F4C5; color: #05603A; }
.form-status--err { background: #FEF3F2; border: 1px solid #FDA29B; color: #912018; }
.form-status svg { flex: none; margin-top: 2px; }
.form-status a { color: inherit; text-decoration: underline; }
.form-status ul { margin-top: var(--space-2); display: grid; gap: 4px; }
.form-status li a { font-weight: 600; }

.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; cursor: pointer; }
/* 24px, not 20px: WCAG 2.2 SC 2.5.8 wants a 24x24 CSS px target, and the
   "user agent control" exception does not apply once the author sets a size. */
.checkbox input { width: 24px; height: 24px; min-height: 0; flex: none; margin-top: 0; accent-color: var(--accent); cursor: pointer; }

/* --------------------------------------------------------------------------
   15. CONTACT / INFO TILES
   -------------------------------------------------------------------------- */
.info-tile {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5); background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.info-tile .ico { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-tint-2); color: var(--accent); }
.info-tile h3 { font-size: var(--fs-sm); margin-bottom: 4px; }
.info-tile p, .info-tile a { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

/* Placeholder chip — unfinalised client data (never mistake for live data) */
.placeholder {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px; border-radius: var(--radius-pill);
  background: repeating-linear-gradient(135deg, #FFF7E6, #FFF7E6 7px, #FEF0D3 7px, #FEF0D3 14px);
  border: 1px dashed #E0A93C; color: #7A5410;
  font-size: var(--fs-xs); font-weight: 600; font-style: normal;
  letter-spacing: .01em; white-space: nowrap;
}
.placeholder svg { flex: none; color: #B4801F; }
.on-dark .placeholder, .section--dark .placeholder, .site-footer .placeholder {
  background: rgba(224,169,60,.14); border-color: rgba(224,169,60,.5); color: #F2C97A;
}
.on-dark .placeholder svg, .section--dark .placeholder svg, .site-footer .placeholder svg { color: #E0A93C; }

/* --------------------------------------------------------------------------
   16. FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--border); }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-5) 0; min-height: 60px; text-align: left;
  font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 600; color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.acc-btn:hover { color: var(--accent); }
.acc-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); color: var(--accent); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.acc-btn[aria-expanded="true"] .acc-ico { transform: rotate(45deg); background: var(--accent); color: #fff; border-color: var(--accent); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease); }
.acc-panel[data-open="true"] { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { color: var(--text-muted); font-size: var(--fs-sm); padding-bottom: var(--space-5); max-width: 74ch; }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: var(--slate-300); padding-top: var(--section-y); }
.site-footer h2, .site-footer h3 { color: #fff; }
.footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 48em)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: var(--space-7); } }
.footer__brand img { height: 54px; margin-bottom: var(--space-5); }
.footer__brand p { font-size: var(--fs-sm); color: var(--slate-400); line-height: 1.7; max-width: 42ch; }
.footer__title {
  font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: #fff; margin-bottom: var(--space-5);
}
.footer__list { display: grid; gap: 2px; }
.footer__list a, .footer__list span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--slate-400);
  padding: 7px 0; min-height: 32px; line-height: 1.5;
  transition: color var(--dur) var(--ease);
}
.footer__list a:hover { color: #fff; }
.footer__contact { display: grid; gap: var(--space-4); }
.footer__contact li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--slate-400); line-height: 1.55; }
.footer__contact svg { flex: none; color: var(--blue-300); margin-top: 3px; }

.social { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius);
  color: var(--slate-300);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social a:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

.footer__bottom {
  margin-top: var(--section-y); padding: var(--space-6) 0;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--slate-400);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.footer__legal a { color: var(--slate-400); transition: color var(--dur) var(--ease); }
.footer__legal a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   18. MOTION
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(16px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Reduced motion asks for less movement, not for no feedback. Travel and
   scroll-linked reveals are removed; colour/opacity state changes are kept but
   shortened, so hover, focus and open/close still read. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, outline-color, opacity, box-shadow !important;
    transition-duration: 80ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .drawer { transition: none !important; }
}

/* --------------------------------------------------------------------------
   19. UTILITIES
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.divider { height: 1px; background: var(--border); border: 0; }
.section--dark .divider { background: rgba(255,255,255,.12); }

@media print {
  .site-header, .utility-bar, .drawer, .drawer-scrim, .cta-band, .skip-link { display: none !important; }
  body { color: #000; }
  /* .hero h1 is #fff and beats `body` on specificity, so the headline printed
     white-on-white on every page. */
  .hero, .page-hero, .section--dark { background: none !important; }
  .hero h1, .page-hero h1, .section--dark :is(h1,h2,h3,h4,p,li,span,strong) { color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   20. LATE ADDITIONS
   -------------------------------------------------------------------------- */

/* Capability band that sits directly under the hero — flat navy so the two
   read as one continuous dark block, with an intentional hairline seam. */
.section--stats {
  padding-block: clamp(44px, 3vw + 28px, 68px);
  background: var(--navy-900);
  background-image: none;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Centred eyebrow — replaces inline justify-content on .section-head--center */
.section-head--center .eyebrow { justify-content: center; }

/* Unit suffix on a stat that has no numeral to count (e.g. "US") */
.stat__u {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2.1rem, 1.5rem + 1.9vw, 3.05rem); line-height: 1;
  letter-spacing: -0.035em; color: #fff;
}

/* Services parent is a <button>, so it cannot take aria-current="page".
   data-active mirrors the active-link treatment for menu parents. */
.nav__link[data-active="true"] { color: var(--accent); font-weight: 600; }
.nav__link[data-active="true"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.utility-bar__links a[aria-current="page"] { color: #fff; font-weight: 600; }
.mega__link[aria-current="page"] { background: var(--surface-tint); }
.mega__link[aria-current="page"] .mega__ico { background: var(--accent); color: #fff; }
/* Our Process / Technology & Skill Areas live in .mega__foot as .link-arrow,
   not .mega__link, so the current-page treatment has to reach them too. */
.mega__foot .link-arrow[aria-current="page"] { color: var(--accent-hover); font-weight: 700; }
.mega__foot .link-arrow[aria-current="page"]::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-left: 2px; flex: none;
}

/* Between the nav breakpoint and 1200px the brand + 6 nav items + CTA are a tight
   fit inside the container. Tighten the nav rhythm rather than pushing the whole
   navigation into the drawer at a desktop-class width. */
@media (min-width: 64em) and (max-width: 74.9375em) {
  .nav__link { padding-inline: 9px; }
  .nav__link[aria-current="page"]::after,
  .nav__link[data-active="true"]::after { left: 9px; right: 9px; }
  .header__cta { margin-left: var(--space-2); }
  .brand img { height: 40px; }
}

/* The logo lockup is a 1603px-wide raster. As a bare flex item its flex base size
   is that intrinsic width, so flex-shrink redistributes almost all of the overflow
   onto it and starves its siblings (the drawer close button collapsed to 17px).
   Size it by width so the base size is honest, and pin the close button. */
.drawer__head img { width: 184px; height: auto; flex: none; }
.drawer__close { flex: none; }

/* .hero / .page-hero / .cta-band are dark surfaces but are not .section--dark,
   so the accent-on-dark rule did not reach them: an accent-coloured headline
   word rendered at 2.57:1 on the hero. Route them to the on-dark accent. */
.hero .text-accent, .page-hero .text-accent, .cta-band .text-accent { color: var(--blue-300); }

/* .site-header is position:sticky and 72px tall, so an in-page anchor would
   otherwise land its target underneath the header. scroll-padding on the
   scrolling element offsets every anchor jump, including the skip link. */
html { scroll-padding-top: calc(var(--header-h) + 24px); }

/* .cta-band and .site-footer share --navy-900 as their base colour, so without
   a seam the closing CTA bleeds into the footer. Same hairline treatment as
   .section--stats uses under the hero. */
.site-footer { border-top: 1px solid rgba(255,255,255,.09); }

/* --------------------------------------------------------------------------
   21. CONTACT DETAILS (footer + info tiles)
   -------------------------------------------------------------------------- */
.footer__contact strong {
  display: block; color: #fff; font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: 3px;
}
.footer__contact a { color: var(--slate-300); transition: color var(--dur) var(--ease); }
.footer__contact a:hover { color: #fff; }
.footer__contact address { font-style: normal; color: var(--slate-400); }
@media (min-width: 64em) { .footer__grid { grid-template-columns: 1.5fr .9fr .9fr 1.5fr; } }

.info-tile address { font-style: normal; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.info-tile a { color: var(--accent); font-weight: 500; }
.info-tile a:hover { color: var(--accent-hover); text-decoration: underline; }

/* --------------------------------------------------------------------------
   22. LEGAL DOCUMENTS (privacy / terms / accessibility)
   -------------------------------------------------------------------------- */
.legal { display: grid; }
.legal__item {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  padding-block: var(--space-7); border-top: 1px solid var(--border);
}
.legal__item:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 48em) { .legal__item { grid-template-columns: 74px 1fr; gap: var(--space-6); } }
.legal__n {
  font-family: var(--font-heading); font-weight: 700; color: var(--accent);
  font-size: var(--fs-h4); line-height: 1.35; font-variant-numeric: tabular-nums;
}
.legal__item h2 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.legal__item h3 { font-size: var(--fs-h4); margin-top: var(--space-6); margin-bottom: var(--space-2); }
.legal__item p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.75; max-width: 74ch; }
.legal__item p + p { margin-top: var(--space-4); }
.legal__item a { font-weight: 500; }
.legal__item a:hover { text-decoration: underline; }

.legal-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); max-width: 74ch; }
.legal-list li {
  position: relative; padding-left: var(--space-5);
  color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.7;
}
.legal-list li::before {
  content: ""; position: absolute; left: 5px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue-400);
}
.legal-list strong { color: var(--slate-700); font-weight: 600; }

.legal-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  font-size: var(--fs-xs); color: var(--text-subtle);
  padding-bottom: var(--space-7);
}
.legal-meta span { display: inline-flex; align-items: center; gap: 7px; }
.legal-meta svg { flex: none; color: var(--slate-400); }

/* In-page contents list for long legal documents */
.legal-toc { display: grid; gap: 2px; }
.legal-toc a {
  display: flex; gap: var(--space-3); align-items: baseline;
  padding: 9px 12px; border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--slate-700); min-height: 40px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.legal-toc a:hover { background: var(--surface-tint-2); color: var(--accent); }
.legal-toc a span:first-child {
  color: var(--slate-400); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); flex: none;
}

/* --------------------------------------------------------------------------
   23. CORRECTIONS
   -------------------------------------------------------------------------- */

/* Contents-list numerals were --slate-400 on white = 2.39:1. */
.legal-toc a span:first-child { color: var(--slate-500); }

/* Footer contact links are standalone targets (not inline in a sentence), so
   the WCAG 2.2 inline exception does not cover them: give them 24px of height. */
.footer__contact a { display: inline-flex; align-items: center; min-height: 24px; }

/* Hero vertical rhythm.
   The hero carried up to 128px of top padding on top of a four-line display
   headline, which pushed the primary CTA row below the fold at 1440x900 and
   1536x864 — the two most common laptop sizes. Top padding is now roughly half
   the bottom, the doubled chip gap is removed, and the display size is trimmed
   so "Measurable Results." stops wrapping to a fourth line. */
.hero {
  padding-top: clamp(32px, 1.8vw + 20px, 52px);
  padding-bottom: clamp(56px, 4.4vw + 34px, 104px);
}
.hero__copy .eyebrow { margin-bottom: 0; }
.hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.1vw, 3.6rem); }
.hero__copy > * + * { margin-top: var(--space-4); }
.hero__lead { margin-top: var(--space-5) !important; }
.hero .btn-row { margin-top: var(--space-6); }
@media (min-width: 64em) { .hero__grid { grid-template-columns: 1.14fr .86fr; } }

/* The global `img { max-width:100% }` clamps a block image's auto width against
   its container. When a rule also pins an explicit `height`, the ratio is NOT
   restored and the image is silently stretched — the footer lockup was rendering
   at 6.25:1 against artwork that is 5.36:1, a 17% horizontal stretch.
   Wherever a logo is sized, set ONE axis and leave the other auto. */
.footer__brand img { width: 290px; height: auto; }
@media (max-width: 47.9375em) { .footer__brand img { width: 250px; } }

/* Contact links in the info tiles are standalone targets, like the footer ones. */
.info-tile a { display: inline-flex; align-items: center; min-height: 24px; }

/* The supplied logo is navy + slate, drawn for light backgrounds. Recolouring it
   to survive a navy footer alters the brand mark, which is not ours to do — so
   the footer gives the ORIGINAL artwork its own light surface instead. */
.footer__plate {
  position: relative;
  display: flex; width: fit-content; max-width: 100%;
  align-items: center; justify-content: center;
  padding: 16px 18px;
  margin: 0 0 var(--space-5) -18px;
}
/* A soft white bloom rather than a hard plate: the logo gets the light surface
   it needs, but its edge dissolves into the navy instead of sitting on a card.
   A blurred rounded rectangle, NOT a pill or an ellipse — on a 5.36:1 lockup a
   curved end pulls the tip of the "M" and the right of the wordmark onto grey.
   The img's margin MUST be zeroed here: .footer__brand img carries a 24px
   margin-bottom from when the logo sat directly in the column, and inside the
   plate that margin inflated the box downward, putting 11px of light above the
   logo and 58px below it. That lopsidedness was the "proportions" problem. */
.footer__plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #fff; border-radius: 18px;
  filter: blur(11px); opacity: .95;
}
.footer__plate img { position: relative; width: 292px; height: auto; margin: 0; }
@media (max-width: 47.9375em) {
  .footer__plate { padding: 13px 15px; margin-left: -15px; }
  .footer__plate img { width: 244px; }
}
/* The brand column is at its narrowest between the tablet and desktop footer
   grids, so the lockup steps down there rather than overflowing. */
@media (min-width: 48em) and (max-width: 74.9375em) {
  .footer__plate { padding: 13px 15px; margin-left: -15px; }
  .footer__plate img { width: 226px; }
}

/* Hero CTA placement.
   The hero stacked five blocks before the action (chip, headline, lead,
   a second paragraph, then the buttons), which pushed the CTA to the fold on a
   ~880px-tall viewport. The third paragraph now lives in "Who We Are", and the
   remaining rhythm is tightened so the buttons land in the upper two-thirds. */
.hero__lead { max-width: 52ch; }
.hero .btn-row { margin-top: var(--space-7); }

/* The side panel is taller than the copy column, so centring the grid pushed the
   headline and CTA down by half the difference. Top-align them: the headline
   now starts level with the panel and the CTA rises with it. */
@media (min-width: 64em) { .hero__grid { align-items: start; } }

/* --------------------------------------------------------------------------
   24. MOBILE & BROWSER SURFACES
   -------------------------------------------------------------------------- */

/* iOS Safari force-zooms the viewport when a focused control is under 16px.
   Every field used --fs-sm (15px), so tapping any input jumped the page. */
@media (max-width: 47.9375em) {
  .field input, .field select, .field textarea { font-size: 1rem; }
}

/* Notched and gesture-bar devices: keep fixed chrome out of the unsafe edges. */
@supports (padding: max(0px)) {
  .utility-bar__inner,
  .site-header__inner { padding-left: max(0px, env(safe-area-inset-left));
                        padding-right: max(0px, env(safe-area-inset-right)); }
  .drawer { padding-right: env(safe-area-inset-right); }
  .drawer__body { padding-bottom: max(var(--space-8), env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* Grey flash on tap is a browser default that belongs to no design system. */
a, button, .btn, summary, [role="button"] { -webkit-tap-highlight-color: rgba(14,90,174,.14); }

/* Landscape phones: the drawer must still scroll to its CTAs. */
@media (max-height: 30em) and (max-width: 63.9375em) {
  .drawer__head { min-height: 56px; }
  .drawer__link { min-height: 44px; padding-block: 10px; }
  .drawer__body { padding-top: var(--space-2); }
}

/* Reduce gradient cost on small screens, where the hero is tall and scrolled. */
@media (max-width: 47.9375em) {
  .hero { background-attachment: scroll; }
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.98); }
}

/* Browser surfaces: the parts we did not draw still carry the design. */
:root { color-scheme: light; accent-color: var(--accent); }
html { caret-color: var(--accent); }
a:not(.btn):not(.nav__link):not(.footer__list a):hover { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.stat__n, .step__n, .legal__n, .field input[type="tel"] { font-variant-numeric: tabular-nums; }
@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* Media-query `em` tracks the browser's text-size setting but NOT a root
   font-size override, so the em breakpoints alone cannot guarantee the header
   fits. Let the bars wrap instead of pushing the CTA past the viewport, where
   overflow-x:hidden made it unreachable. */
.site-header__inner, .utility-bar__inner, .nav { flex-wrap: wrap; }
.site-header__inner { row-gap: var(--space-2); padding-block: 6px; }
.footer__bottom, .footer__legal, .btn-row, .breadcrumb, .pill-set { flex-wrap: wrap; }
/* Long unbroken strings (emails, URLs) must never set a minimum width. */
.field input, .field textarea, .legal__item, .info-tile, .footer__contact { min-width: 0; }
.form-grid, .grid, .split, .audience, .stats { min-width: 0; }
.form-grid > *, .grid > *, .split > *, .audience > * { min-width: 0; }
/* At very large text these were the last two elements able to exceed their
   container: a button sized by its label, and the hero side panel. */
.btn { max-width: 100%; }
.hero__panel, .hero__copy, .card, .audience__card, .info-tile, .track { max-width: 100%; }
/* Grid and flex items default to min-content, so max-width:100% alone cannot
   make them shrink. These are the containers that still overran at 200% text. */
.hero__grid > *, .cta-band__inner > *, .btn-row > *, .steps > *, .legal__item > * { min-width: 0; }
.btn { overflow-wrap: anywhere; }
/* A single long word at display size cannot fit a phone at 200% text; let
   headings break only when they otherwise would not fit. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
/* The global `a:hover { color: var(--accent-hover) }` leaked onto dark surfaces,
   where #0B4C96 on navy is 2.07:1. Buttons keep their own hover treatment. */
.hero a:not(.btn):hover,
.page-hero a:not(.btn):hover,
.section--dark a:not(.btn):hover,
.cta-band a:not(.btn):hover,
.site-footer a:not(.btn):hover { color: #fff; }

/* --------------------------------------------------------------------------
   25. LARGE SCREENS
   A hard 1200px cap used only 62% of a 1920px display and 47% of a 2560px one,
   and the display type stopped growing at 1190px — so the page sat marooned in
   the middle of a big screen at a size chosen for a laptop. Step the container,
   gutter and display type up together. Prose stays readable because measure is
   capped per element (.lead, .section-head, .legal__item p), not by the container.
   -------------------------------------------------------------------------- */
@media (min-width: 90em) {            /* 1440px */
  :root { --container: 1320px; --gutter: 48px; }
}
@media (min-width: 110em) {           /* 1760px */
  :root { --container: 1440px; --gutter: 64px; --section-y: clamp(96px, 5vw, 132px); }
  .hero h1 { font-size: clamp(3.6rem, 1.3rem + 3.1vw, 4.4rem); }
  .hero__lead { font-size: 1.36rem; max-width: 54ch; }
  .section-head { max-width: 860px; }
}
@media (min-width: 131em) {           /* 2096px */
  :root { --container: 1560px; --gutter: 80px; }
  .hero h1 { font-size: 4.6rem; }
}
/* The hero panel should not stretch indefinitely beside a very wide copy column. */
@media (min-width: 110em) {
  .hero__grid { grid-template-columns: 1.2fr minmax(0, 560px); gap: var(--space-11); }
}
@media (min-width: 150em) {           /* 2400px */
  :root { --container: 1680px; --gutter: 96px; }
}
/* With a wider container these were the only text blocks with no measure cap,
   and they ran to 88-96ch at 2560px. Body copy stays in the 65-75ch band. */
.field__help, .field__err { max-width: 68ch; }
.form-note { max-width: 78ch; }
.card p, .card--dark p, .audience__card p, .info-tile p { max-width: 62ch; }

/* --------------------------------------------------------------------------
   26. FULL-HEIGHT HERO
   The hero stopped 110-499px short of the fold, so the stats band always peeked
   into the first screen. It now fills it.

   min-height, never height: at 1366x768 the hero content is already 18px TALLER
   than the space available, and a fixed height would clip it.
   svh, not vh or dvh: vh ignores mobile browser chrome (content hides behind the
   URL bar), dvh reflows as that bar shows and hides. svh is the stable smallest.

   Gated to >=48em. Below that the header wraps to two rows, so --chrome-h (73px)
   understates the real chrome (measured 107px at 320px wide) - and phone hero
   content exceeds the viewport anyway, so the floor would never apply.

   grid 1fr/auto/2fr, NOT flex + align-items:center. Centring splits the new free
   space 50/50, which cancels the authored 1:2 top:bottom padding ratio and sinks
   the CTA: measured 63.5% -> 76.9% of the fold at 1920x1080, and 370-460px of
   dead navy above the headline on tall displays. The 1:2 rows keep the content
   high in the frame at any height.
   -------------------------------------------------------------------------- */
:root { --chrome-h: 73px; }
@media (min-width: 48em) {
  :root { --chrome-h: 112px; }
  .hero {
    min-height: calc(100vh - var(--chrome-h));
    min-height: calc(100svh - var(--chrome-h));
    display: grid;
    grid-template-rows: 1fr auto 2fr;
  }
  .hero > .container {
    grid-row: 2;
    width: min(100% - (var(--gutter) * 2), var(--container));
  }
  /* A short landscape viewport should scroll, not stretch the hero. */
  @media (max-height: 34em) { .hero { min-height: 0; } }
}

/* The grid texture's mask was sized in fixed px against a box that is now much
   taller, so it rode up and left the lower third bare. Percentages track the box. */
.hero::after {
  mask-image: radial-gradient(120% 78% at 68% 42%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 78% at 68% 42%, #000 0%, transparent 78%);
}

/* Printing must not inherit a viewport-height floor. */
@media print {
  .hero { min-height: 0 !important; display: block !important; }
}