/* =============================================================
   RapidData 2026 — Design System
   Light theme, premium consulting-grade
   ============================================================= */

/* ---------- 0. Brand preloader (loads before everything) ---------- */
#rd-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, #FFFFFF 0%, #EBF1FF 60%, #DDE6F7 100%);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 420ms;
}
/* Pointer-events:none even while visible so the user can click through to the
   page underneath if the loader is still fading. */
#rd-preloader { pointer-events: none; }
#rd-preloader.is-done { opacity: 0; visibility: hidden; }
#rd-preloader .rd-preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
}
#rd-preloader .rd-preloader-logo {
  width: clamp(180px, 36vw, 240px);
  height: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  animation: rd-pre-logo 600ms 80ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#rd-preloader .rd-preloader-bar {
  width: 240px; max-width: 80%;
  height: 4px;
  background: rgba(11, 31, 58, 0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
#rd-preloader .rd-preloader-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background:
    linear-gradient(90deg, #1E3A8A 0%, #1E5DFF 35%, #DC2626 70%, #F97316 100%);
  border-radius: 4px;
  /* Animated by JS — but still progresses if JS hasn't run */
  animation: rd-pre-fill 1.6s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}
#rd-preloader .rd-preloader-meta {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #475569;
}
#rd-preloader .rd-preloader-logo {
  filter: drop-shadow(0 2px 4px rgba(11, 31, 58, 0.06));
}
@keyframes rd-pre-logo {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rd-pre-fill {
  0%   { width: 0%;   opacity: 1; }
  60%  { width: 75%;  opacity: 1; }
  90%  { width: 95%;  opacity: 1; }
  100% { width: 100%; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #rd-preloader .rd-preloader-logo,
  #rd-preloader .rd-preloader-fill { animation-duration: 1ms !important; }
}
/* Preloader is non-blocking — the user can scroll/click underneath it the
   moment the DOM is ready. No body-overflow lock. */


/* ---------- 1. Tokens ---------- */
:root {
  /* Brand palette */
  --rd-ink:          #0B1F3A;
  --rd-navy-700:     #13315C;
  --rd-navy-500:     #1E3A6B;
  --rd-slate-700:    #334155;
  --rd-slate-500:    #4A5568;
  --rd-slate-400:    #64748B;
  --rd-slate-300:    #94A3B8;
  --rd-cloud-200:    #CBD5E1;
  --rd-cloud-100:    #E5E8EE;
  --rd-cloud-50:     #EEF1F6;
  --rd-mist-50:      #F7F8FB;
  --rd-white:        #FFFFFF;

  --rd-signal:       #1E3A8A;
  --rd-signal-700:   #1E40AF;
  --rd-signal-500:   #2D5BD9;
  --rd-signal-50:    #EBF2FF;
  --rd-quantum:      #00C2A8;
  --rd-quantum-50:   #E6FAF6;
  --rd-pulse:        #DC2626;
  --rd-pulse-50:     #FEEAEA;
  --rd-amber:        #F97316;
  --rd-amber-50:     #FFF1E0;
  --rd-violet:       #7C3AED;
  --rd-violet-50:    #F1EBFF;
  --rd-rose:         #E11D7E;
  --rd-rose-50:      #FFE8F2;
  --rd-success:      #15803D;
  --rd-warning:      #B45309;
  --rd-brand-red:    #DC2626;
  --rd-brand-orange: #F97316;

  /* Semantic */
  --bg:              var(--rd-white);
  --bg-alt:          var(--rd-mist-50);
  --bg-tint:         var(--rd-signal-50);
  --fg:              var(--rd-ink);
  --fg-muted:        var(--rd-slate-500);
  --fg-soft:         var(--rd-slate-400);
  --border:          var(--rd-cloud-100);
  --border-strong:   var(--rd-cloud-200);

  /* Typography */
  --ff-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ff-serif:   'Instrument Serif', Georgia, serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-display-xl: clamp(3rem, 4.5vw + 1rem, 5.25rem);
  --fs-display-l:  clamp(2.25rem, 3vw + 1rem, 3.5rem);
  --fs-display-m:  clamp(1.875rem, 2vw + 1rem, 2.75rem);
  --fs-h1:         clamp(1.875rem, 2vw + 1rem, 2.5rem);
  --fs-h2:         clamp(1.5rem, 1.25vw + 0.875rem, 2rem);
  --fs-h3:         1.25rem;
  --fs-body-lg:    1.125rem;
  --fs-body:       1rem;
  --fs-caption:    0.875rem;
  --fs-eyebrow:    0.75rem;

  --lh-display:    1.06;
  --lh-heading:    1.18;
  --lh-body:       1.65;

  /* Spacing (8pt) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;
  --sp-13: 128px; --sp-14: 160px;

  /* Layout */
  --container:    1280px;
  --container-narrow: 880px;
  --gutter:       24px;

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

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.04);
  --shadow-sm: 0 2px 6px rgba(11, 31, 58, 0.06), 0 1px 2px rgba(11, 31, 58, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 31, 58, 0.08), 0 2px 6px rgba(11, 31, 58, 0.04);
  --shadow-lg: 0 24px 48px rgba(11, 31, 58, 0.10), 0 4px 12px rgba(11, 31, 58, 0.06);
  --shadow-glow: 0 0 0 4px rgba(30, 93, 255, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 160ms;
  --d-base: 240ms;
  --d-slow: 400ms;

  --header-h: 76px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Belt + braces: `hidden` is the universally-supported fallback;
     `clip` (modern Chrome 90+, Firefox 81+, Safari 16+) wins via cascade
     order and avoids creating a new scroll container so `position: sticky`
     keeps working everywhere it should. */
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Mirror the html-level guard. `width: 100%` + `overflow-x: clip/hidden`
     on body is what older iOS Safari (≤15) actually responds to — it ignores
     the html-level rule in some scroll-container scenarios. */
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
}
/* Extra defence: <main> and any direct body child cannot exceed the viewport.
   Catches stray full-bleed sections that escaped their container. */
main { width: 100%; max-width: 100vw; overflow-x: clip; }

/* ---------- Gradient browser scrollbar ----------
   Bright brand-rainbow thumb. The base brand-signal token is a deep navy
   (#1E3A8A) which reads as dim on a 12px-wide rail, so the scrollbar uses a
   dedicated set of vivid mid-tones picked to stay on-brand while reading
   bright at every screen size. Firefox falls back to a flat bright-blue
   thumb because `scrollbar-color` doesn't accept gradients yet. */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: rgba(11, 31, 58, 0.05);
  border-left: 1px solid rgba(11, 31, 58, 0.05);
}
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  /* Vivid brand spectrum — bright blue → cyan → teal → amber → orange → red.
     Using direct hex values (not the dark --rd-signal token) so every stop
     is high-luminance. Five stops give smooth fading without muddy mid-zones. */
  background:
    linear-gradient(
      180deg,
      #3B82F6  0%,    /* sky blue */
      #06B6D4 22%,   /* cyan */
      #14B8A6 44%,   /* teal */
      #F59E0B 66%,   /* amber */
      #F97316 82%,   /* orange */
      #EF4444 100%   /* red */
    );
  border-radius: 999px;
  /* Thin inset glow keeps the thumb crisp against the track without eating
     pixels off the gradient — replaces the previous transparent-border trick
     that was shrinking the visible color band. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 6px rgba(59, 130, 246, 0.25);
}
::-webkit-scrollbar-thumb:hover {
  /* Brighter, slightly saturated reverse on hover so the thumb "lights up". */
  background:
    linear-gradient(
      180deg,
      #60A5FA  0%,   /* lighter sky blue */
      #22D3EE 22%,   /* lighter cyan */
      #2DD4BF 44%,   /* lighter teal */
      #FBBF24 66%,   /* lighter amber */
      #FB923C 82%,   /* lighter orange */
      #F87171 100%   /* lighter red */
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 10px rgba(59, 130, 246, 0.40);
}
::-webkit-scrollbar-thumb:active {
  /* Fully saturated when grabbed — gives clear feedback. */
  background:
    linear-gradient(
      180deg,
      #2563EB  0%,
      #0891B2 30%,
      #059669 55%,
      #D97706 78%,
      #DC2626 100%
    );
}
/* Horizontal scrollbar: same gradient rotated 90° (only inside opt-in scroll
   containers — careers table, sandbox table, etc.). */
::-webkit-scrollbar-thumb:horizontal {
  background:
    linear-gradient(
      90deg,
      #3B82F6  0%,
      #06B6D4 22%,
      #14B8A6 44%,
      #F59E0B 66%,
      #F97316 82%,
      #EF4444 100%
    );
}

/* Firefox / Gecko — `scrollbar-color` only takes solid colours, so we use a
   bright brand-blue (#3B82F6, not the dark #1E3A8A signal token). `thin`
   keeps the rail unobtrusive on narrow viewports without losing visibility. */
html {
  scrollbar-width: auto;
  scrollbar-color: #3B82F6 rgba(11, 31, 58, 0.06);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-9) 0; }

/* Selection */
::selection { background: var(--rd-ink); color: white; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--rd-signal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-family: var(--ff-display); font-size: var(--fs-display-l); line-height: var(--lh-display); }
h2 { font-family: var(--ff-display); font-size: var(--fs-display-m); line-height: var(--lh-heading); }
h3 { font-family: var(--ff-display); font-size: var(--fs-h2); line-height: var(--lh-heading); }
h4 { font-family: var(--ff-display); font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: -0.01em; }
p  { margin: 0 0 var(--sp-4); color: var(--fg-muted); }

.display-xl { font-family: var(--ff-display); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: -0.025em; font-weight: 600; }
.display-l  { font-family: var(--ff-display); font-size: var(--fs-display-l);  line-height: var(--lh-display); letter-spacing: -0.022em; font-weight: 600; }
.display-m  { font-family: var(--ff-display); font-size: var(--fs-display-m);  line-height: var(--lh-heading); letter-spacing: -0.02em;  font-weight: 600; }

.serif { font-family: var(--ff-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.mono  { font-family: var(--ff-mono); font-feature-settings: 'tnum'; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-signal);
}
.eyebrow-muted { color: var(--fg-soft); }

.lede { font-size: var(--fs-body-lg); color: var(--fg-muted); max-width: 62ch; }
.fg-ink { color: var(--fg); }
.fg-muted { color: var(--fg-muted); }
.fg-soft { color: var(--fg-soft); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.section-sm { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.section-lg { padding-top: var(--sp-11); padding-bottom: var(--sp-11); }
.section-tint  { background: var(--bg-alt); }
.section-blue  { background: #F0F5FF; }
.section-teal  { background: #E8FAF6; }
.section-amber { background: #FFF6EA; }
.section-rose  { background: #FFF0F2; }
.section-violet { background: #F4EFFE; }
.section-mist  { background: #F5F7FB; }
.section-ink { background: var(--rd-ink); color: white; }
.section-ink p, .section-ink .fg-muted { color: rgba(255,255,255,0.72); }
.section-ink .eyebrow { color: var(--rd-quantum); }

@media (max-width: 768px) {
  .section    { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
  .section-sm { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
  .section-lg { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
}

.grid { display: grid; gap: var(--sp-7); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center; }
.split-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-10); align-items: start; }
@media (max-width: 900px) { .split, .split-7-5 { grid-template-columns: 1fr; gap: var(--sp-8); } }

.section-head {
  max-width: 760px;
  margin-bottom: var(--sp-10);
}
.section-head .eyebrow { margin-bottom: var(--sp-3); }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head .lede { color: var(--fg-muted); }

.section-head-flex {
  display: flex; justify-content: space-between; align-items: end; gap: var(--sp-7);
  margin-bottom: var(--sp-10); flex-wrap: wrap;
}
.section-head-flex > div:first-child { max-width: 720px; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  transition: transform var(--d-fast) var(--ease-out), background var(--d-fast), color var(--d-fast), box-shadow var(--d-fast);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary,
.btn-signal {
  position: relative;
  background-image: linear-gradient(95deg, #1E5DFF 0%, #7C3AED 32%, #DC2626 62%, #00C2A8 100%);
  background-color: #1E3A8A;
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: #fff;
  border: none;
  overflow: hidden;
  transition: background-position 600ms var(--ease-out), transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast);
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 6px 18px rgba(11,31,58,0.18);
}
.btn-primary::after,
.btn-signal::after {
  /* white shimmer that sweeps across on hover */
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 35%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  transition: left 700ms var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover,
.btn-signal:hover {
  background-position: 100% 50%;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 10px 26px rgba(11,31,58,0.30);
}
.btn-primary:hover::after,
.btn-signal:hover::after { left: 130%; }

.btn-pulse {
  background: var(--rd-pulse);
  color: white;
}
.btn-pulse:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-alt); border-color: var(--rd-slate-400); }

.btn-ghost-light {
  background: transparent; color: white; border-color: rgba(255,255,255,0.3);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }

.btn-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--rd-signal); font-weight: 600;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: gap var(--d-fast) var(--ease-out), color var(--d-fast);
}
.btn-link::after { content: '→'; transition: transform var(--d-fast) var(--ease-out); }
.btn-link:hover { color: var(--rd-signal-700); }
.btn-link:hover::after { transform: translateX(3px); }

.btn-sm { padding: 10px 18px; font-size: 0.875rem; }

.btn-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base), color var(--d-base);
}
/* Soft white separator line below the menu — visible on both states */
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.site-header.is-scrolled::after { background: rgba(11, 31, 58, 0.10); }
/* Default (over the dark video hero): transparent + light text */
.site-header.is-over-hero {
  background: linear-gradient(180deg, rgba(11, 31, 58, 0.40) 0%, rgba(11, 31, 58, 0.10) 60%, transparent 100%);
}
.site-header.is-over-hero .nav-link,
.site-header.is-over-hero .menu-toggle .bar { color: rgba(255, 255, 255, 0.92); }
.site-header.is-over-hero .nav-link { color: rgba(255, 255, 255, 0.92); }
.site-header.is-over-hero .nav-link:hover { background: rgba(255, 255, 255, 0.10); }
.site-header.is-over-hero .nav-link[aria-current="page"] { color: var(--rd-amber); }
.site-header.is-over-hero .btn-ghost {
  color: white;
  border-color: rgba(255, 255, 255, 0.30);
  background: transparent;
}
.site-header.is-over-hero .btn-ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.55); }
/* Gradient buttons keep their own background — only adjust shadow over the hero */
.site-header.is-over-hero .btn-signal { box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 22px rgba(0,0,0,0.40); }
.site-header.is-over-hero .menu-toggle .bar { background: white; }
/* Scrolled: solid white + dark text (the original look) */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--border);
}
.site-header.is-scrolled.is-over-hero { background: rgba(255, 255, 255, 0.92); }
.site-header.is-scrolled.is-over-hero .nav-link { color: var(--fg); }
.site-header.is-scrolled.is-over-hero .nav-link:hover { background: var(--bg-alt); }
.site-header.is-scrolled.is-over-hero .menu-toggle .bar { background: var(--fg); }
.site-header.is-scrolled.is-over-hero .btn-ghost { color: var(--fg); border-color: var(--border-strong); background: transparent; }

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
  /* Anchor mega panels to the full header container so the leftmost menus
     (Services / Industries) can't push the panel off-screen. */
  position: relative;
}

.logo {
  display: inline-flex; align-items: center;
  height: 40px;
  position: relative;
}
.logo img { height: 100%; width: auto; }
/* Default (over the dark hero): white logo. Scrolled (white header): coloured logo. */
.logo .logo-img-dark  { display: block; }
.logo .logo-img-light { display: none; }
.site-header.is-scrolled .logo .logo-img-dark  { display: none; }
.site-header.is-scrolled .logo .logo-img-light { display: block; }
/* Footer is dark — keep white logo */
.site-footer .logo .logo-img-light { display: none; }

/* Nav */
.primary-nav { display: flex; align-items: center; gap: var(--sp-1); }
/* Each nav-item is a pure flex child; the mega panel is positioned against
   .header-inner (the full container) so it never clips off the viewport. */
.nav-item { position: static; }
.nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);
  border-radius: var(--r-md);
  transition: background var(--d-fast), color var(--d-fast);
}
.nav-link:hover { background: var(--bg-alt); }
.nav-link[aria-current="page"] { color: var(--rd-signal); }
.nav-link .caret {
  width: 10px; height: 10px; opacity: 0.5;
  transition: transform var(--d-fast);
}
.nav-item:hover .caret, .nav-item:focus-within .caret { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Mega menu panel */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  /* Default width — used when the menu has a feature panel (Industries, Products). */
  width: min(1140px, calc(100vw - 48px));
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8) var(--sp-9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), visibility var(--d-base);
  z-index: 50;
}
/* Invisible bridge that fills the gap between the nav-link and the panel —
   keeps :hover/:focus-within active so submenu links stay clickable. */
.mega::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-item:hover > .mega,
.nav-item:focus-within > .mega,
.nav-item.is-open > .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-grid {
  display: grid;
  /* When the menu has a feature panel (e.g. Industries, Products) the
     columns sit on the left and the feature panel on the right.
     When there is no feature panel (e.g. Services), the cols claim the
     full panel width — see the .mega-no-feature override below. */
  grid-template-columns: 2.2fr 1fr;
  gap: var(--sp-9);
}
.mega-no-feature {
  /* No feature panel → wider panel, more room for 3-4 category columns. */
  width: min(1240px, calc(100vw - 48px));
}
.mega-no-feature .mega-grid {
  /* No feature panel → single full-width column for the category list. */
  grid-template-columns: 1fr;
}
.mega-cols {
  display: grid;
  /* The header sets `grid-template-columns: repeat(<n>, minmax(0, 1fr))`
     inline via a style attribute so any number of category columns line up
     in a single row. This declaration is a fallback only. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);
}
.mega-section .label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: var(--sp-4);
}
.mega-section ul { display: grid; gap: 4px; }
.mega-section a {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: var(--r-sm);
  color: var(--fg);
  font-weight: 500;
  font-size: 0.93rem;
  transition: background var(--d-fast), color var(--d-fast);
}
.mega-section a:hover { background: var(--bg-tint); color: var(--rd-signal); }
.mega-section a small { display: block; font-weight: 400; color: var(--fg-soft); margin-top: 2px; font-size: 0.8rem; }

/* Mega link with icon tile — each item gets a different accent colour */
.mega-link {
  display: grid !important;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
  padding: 12px 14px !important;
  margin: 0 -14px !important;
  border-radius: var(--r-md) !important;
}
.mega-link .mega-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-bg, var(--rd-signal-50));
  color: var(--accent, var(--rd-signal));
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1 / span 2;
}
.mega-link .mega-icon svg { width: 22px; height: 22px; }
/* Force the text container to be a block so the description sits under the
   name, both starting at column 2's left edge (not under the icon). */
.mega-link .mega-text {
  display: block;
  min-width: 0;
  line-height: 1.35;
  grid-column: 2;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--fg);
}
.mega-link .mega-text small {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--fg-soft);
  margin-top: 4px !important;
  line-height: 1.4;
}
.mega-link:hover { background: var(--bg-alt) !important; color: var(--rd-ink) !important; }
.mega-link:hover .mega-icon { filter: saturate(1.15); }

.mega-feature {
  background: linear-gradient(135deg, var(--rd-mist-50) 0%, var(--rd-signal-50) 100%);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  border: 1px solid var(--border);
}
.mega-feature .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 8px; background: white; border-radius: var(--r-pill); color: var(--rd-signal); margin-bottom: var(--sp-3); }
.mega-feature h5 { font-size: 1rem; margin-bottom: var(--sp-2); color: var(--fg); }
.mega-feature p { font-size: 0.875rem; margin-bottom: var(--sp-3); }

/* Mobile menu */
.menu-toggle { display: none; padding: 10px; border-radius: var(--r-md); }
.menu-toggle:hover { background: var(--bg-alt); }
.menu-toggle .bar { display: block; width: 22px; height: 2px; background: var(--fg); margin: 5px 0; transition: transform var(--d-fast), opacity var(--d-fast); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .menu-toggle { display: block; }
  .primary-nav {
    position: fixed;
    /* Anchor to the dynamic viewport so iOS URL-bar shrink/grow doesn't crop
       the bottom of the menu. Falls back to inset for browsers without dvh. */
    inset: var(--header-h) 0 0 0;
    height: calc(100dvh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    background: white;
    flex-direction: column;
    align-items: stretch;
    /* Generous bottom padding so the last menu item never sits flush to the
       URL bar or the iOS home indicator. env() respects notched devices. */
    padding: var(--sp-6) var(--gutter) calc(var(--sp-10) + env(safe-area-inset-bottom, 16px));
    gap: var(--sp-2);
    /* Smooth, momentum scroll on iOS / Android with a contained scroll chain
       so the page underneath doesn't scroll behind the menu. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform var(--d-base) var(--ease-out);
    border-top: 1px solid var(--border);
  }
  .primary-nav.is-open { transform: translateX(0); }
  .nav-link { padding: 14px 16px; font-size: 1rem; justify-content: space-between; }
  .mega {
    position: static; transform: none; width: 100%;
    box-shadow: none; border: none; padding: 0 16px var(--sp-4); border-radius: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none; margin-top: 0;
  }
  .nav-item.is-open > .mega { display: block; }
  .mega-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .mega-cols { grid-template-columns: 1fr; gap: var(--sp-3); }
  .header-actions .btn:not(.btn-signal):not(.btn-primary) { display: none; }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  padding-top: var(--sp-11);
  padding-bottom: var(--sp-11);
  overflow: hidden;
  isolation: isolate;
}
/* Home hero is shorter — vertical padding and image height reduced ~40% */
.hero-home {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}
.hero-home .display-l { font-size: clamp(2rem, 2.4vw + 1rem, 3rem); }
.hero-home .hero-split .hero-media {
  aspect-ratio: 4 / 3;
  max-height: 360px;
}
.hero-home .ticker { margin-top: var(--sp-6); }
@media (max-width: 960px) {
  .hero-home .hero-split .hero-media { aspect-ratio: 16 / 10; max-height: 260px; }
}

/* ---------- Video hero (full-bleed background) ---------- */
.hero-video {
  /* Pull the hero up under the sticky header so the video covers it */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--sp-8) + var(--header-h));
  padding-bottom: var(--sp-9);
}
.hero-video .container { position: relative; z-index: 2; }
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Brand-coloured fill behind the video stream so the brief moment before
     the first frame is decoded is on-brand navy, not the SVG portrait. */
  background: linear-gradient(160deg, #0F2557 0%, #0B1F3A 55%, #060D1F 100%);
}
/* Lighter overlay — keeps the video vivid while preserving text legibility on the left */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11, 31, 58, 0.55) 0%, rgba(11, 31, 58, 0.25) 38%, rgba(11, 31, 58, 0.05) 70%, rgba(11, 31, 58, 0.00) 100%);
}
.hero-video .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-9);
  align-items: center;
}
.hero-video .hero-content { text-align: left; }
.hero-video .hero-content .lede { max-width: 56ch; }
.hero-video .hero-content .btn-row { justify-content: flex-start; }
.hero-video .hero-content h1 { margin-left: 0; }
.hero-video .hero-aside {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  background: rgba(11, 31, 58, 0.55);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.hero-video .hero-aside img { display: block; width: 100%; height: auto; }
@media (max-width: 960px) {
  .hero-video .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero-video .hero-aside { max-width: 480px; margin-left: auto; margin-right: auto; }
}
.hero-video .ticker {
  position: relative;
  z-index: 2;
  border-color: rgba(255, 255, 255, 0.18);
  margin-top: var(--sp-7);
}
.hero-video .ticker::before { background: linear-gradient(90deg, rgba(11, 31, 58, 0.85) 30%, transparent 100%); }
.hero-video .ticker::after  { background: linear-gradient(270deg, rgba(11, 31, 58, 0.85) 30%, transparent 100%); }
@media (max-width: 768px) {
  .hero-video-overlay {
    background:
      linear-gradient(180deg, rgba(11, 31, 58, 0.70) 0%, rgba(11, 31, 58, 0.55) 60%, rgba(11, 31, 58, 0.85) 100%);
  }
  .hero-video .hero-content { max-width: 100%; }
}

/* Dark hero — blue / red / green gradient orbs over a navy base.
   Pulled up under the sticky header so there is no white strip above the gradient. */
.hero-dark {
  background:
    radial-gradient(ellipse 45% 55% at 18% 22%, rgba(30, 93, 255, 0.32), transparent 60%),   /* blue, top-left */
    radial-gradient(ellipse 42% 50% at 86% 18%, rgba(220, 38, 38, 0.26),  transparent 60%),  /* red,  top-right */
    radial-gradient(ellipse 55% 50% at 50% 100%, rgba(0, 194, 168, 0.30), transparent 60%),  /* green, bottom */
    radial-gradient(ellipse 32% 38% at 78% 78%, rgba(124, 58, 237, 0.18), transparent 60%),  /* violet hint, bottom-right */
    linear-gradient(160deg, #0F2557 0%, #0B1F3A 55%, #060D1F 100%);
  color: #fff;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--sp-11) + var(--header-h));
}
.hero-dark.hero-home { padding-top: calc(var(--sp-8) + var(--header-h)); }
.hero-dark.page-header { padding-top: calc(var(--sp-10) + var(--header-h) + var(--sp-3)); }
.hero-dark.page-header .breadcrumb { margin-bottom: var(--sp-4); }
.hero-dark .hero-bg, .hero-dark .hero-mesh { display: none; }
.hero-dark .eyebrow { color: var(--rd-amber); }
.hero-dark h1, .hero-dark .display-l, .hero-dark .display-m { color: #fff; }
.hero-dark .lede { color: rgba(255, 255, 255, 0.78); }
.hero-dark .breadcrumb { color: rgba(255, 255, 255, 0.5); }
.hero-dark .breadcrumb a { color: rgba(255, 255, 255, 0.65); }
.hero-dark .breadcrumb a:hover { color: #fff; }
.hero-dark .breadcrumb .current { color: #fff; }
.hero-dark .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: transparent;
}
.hero-dark .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
}
/* Hero CTA keeps the rainbow gradient — slightly stronger shadow over the dark hero */
.hero-dark .btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 28px rgba(0,0,0,0.40); }

/* Subtle mesh on dark hero */
.hero-dark::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
  pointer-events: none;
}

/* Split layout: text left, image right */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-10);
  align-items: center;
}
.hero-split .hero-content { text-align: left; }
.hero-split .hero-content h1 { margin-left: 0; max-width: 18ch; text-wrap: balance; }
.hero-split .hero-content .lede { margin-left: 0; max-width: 52ch; }
.hero-split .hero-content .breadcrumb { justify-content: flex-start; }
.hero-split .hero-content .btn-row { justify-content: flex-start; }
.hero-split .hero-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  max-height: 600px;
  box-shadow: 0 30px 60px rgba(11, 31, 58, 0.45), 0 10px 20px rgba(11, 31, 58, 0.25);
  background: #0B1F3A;
}
.hero-split .hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-split .hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11, 31, 58, 0.45) 100%);
  pointer-events: none;
}
.hero-split.compact .hero-media { aspect-ratio: 5 / 4; max-height: 380px; }
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero-split .hero-media { aspect-ratio: 16 / 10; max-height: 420px; }
  .hero-split.compact .hero-media { aspect-ratio: 16 / 9; max-height: 280px; }
}

/* (legacy override removed — the page-header padding is set above in
   `.hero-dark.page-header` and includes header-h compensation so the
   breadcrumb does not collide with the sticky header bottom-border.) */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(30, 93, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 70% 40% at 20% 100%, rgba(0, 194, 168, 0.06), transparent 60%),
    linear-gradient(180deg, var(--rd-mist-50) 0%, var(--rd-white) 60%);
}
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(11, 31, 58, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 31, 58, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%);
}
.hero h1 {
  margin-bottom: var(--sp-5);
  max-width: 22ch;
  text-wrap: balance;
}
.hero .lede { margin-bottom: var(--sp-7); max-width: 56ch; }
.hero .eyebrow { margin-bottom: var(--sp-5); }
.hero-actions { margin-bottom: var(--sp-9); }

.hero-home h1 { max-width: 16ch; }
.hero-home .lede { max-width: 60ch; font-size: 1.2rem; }

/* KPI ticker */
.ticker {
  display: flex;
  gap: var(--sp-7);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  margin-top: var(--sp-9);
}
.ticker::before, .ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg) 30%, transparent 100%); }
.ticker::after  { right: 0; background: linear-gradient(270deg, var(--bg) 30%, transparent 100%); }
/* Dark-hero variant */
.hero-dark .ticker {
  border-top-color: rgba(255, 255, 255, 0.10);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
.hero-dark .ticker::before { background: linear-gradient(90deg, #0B1F3A 30%, transparent 100%); }
.hero-dark .ticker::after  { background: linear-gradient(270deg, #0B1F3A 30%, transparent 100%); }
.hero-dark .ticker-item { color: rgba(255, 255, 255, 0.72); }
.hero-dark .ticker-item strong { color: #fff; }
.ticker-track {
  display: flex; gap: var(--sp-9);
  animation: marquee 60s linear infinite;
  flex-shrink: 0;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: 0.95rem;
  white-space: nowrap;
  color: var(--fg-muted);
}
.ticker-item strong {
  font-family: var(--ff-display);
  color: var(--fg);
  font-weight: 600;
  font-size: 1.05rem;
}
.ticker-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-quantum); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 8. Stat block ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  background: var(--bg);
  padding: var(--sp-9) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.stat .num {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rd-ink);
  display: flex; align-items: baseline; gap: 2px;
}
.stat .num .suffix { font-size: 0.6em; color: var(--rd-signal); margin-left: 2px; }
.stat .label {
  color: var(--fg-muted);
  font-size: 0.95rem;
  max-width: 32ch;
}
.stat .bar {
  width: 32px; height: 3px; background: var(--rd-quantum); margin-bottom: var(--sp-2);
}
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } }

.stat-inline { display: flex; gap: var(--sp-9); flex-wrap: wrap; }
.stat-inline .stat { padding: 0; background: transparent; }
.stat-inline .stat .num { font-size: 2.25rem; }

/* ---------- 9. Cards ---------- */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-base), border-color var(--d-fast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.card .icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-signal-50);
  color: var(--rd-signal);
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.card .icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.25rem; }
.card h4 { font-size: 1.1rem; }
.card p { margin-bottom: 0; font-size: 0.95rem; }
.card .meta { font-size: 0.85rem; color: var(--fg-soft); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.card .outcome {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--rd-ink);
  font-size: 1.05rem;
}
.card .outcome .num { color: var(--rd-signal); }

.card-link {
  margin-top: auto; padding-top: var(--sp-3);
}

a.card { color: inherit; }

/* Pillar card — curved colour bar across the top with rounded ends */
.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: calc(var(--sp-6) + 6px) var(--sp-2) var(--sp-6);
  position: relative;
  border: 0;
}
.pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 4px;
  border-radius: 999px;
  background: var(--rd-ink);
  box-shadow: 0 1px 6px rgba(11, 31, 58, 0.10);
}
.pillar .num {
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  color: var(--fg-soft);
  letter-spacing: 0.08em;
}
.pillar h3 { font-size: 1.35rem; }
.pillar p { font-size: 0.95rem; margin: 0; }
.pillar .metric {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  color: var(--rd-signal);
  font-weight: 600;
}

/* Service card (bigger, more visual) */
.service-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base);
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, var(--rd-signal-50) 100%);
  opacity: 0;
  transition: opacity var(--d-base);
  z-index: -1;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.service-card:hover::before { opacity: 1; }
.service-card h3 { font-size: 1.5rem; }
.service-card .arrow {
  margin-top: auto;
  align-self: flex-start;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--rd-mist-50);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--d-fast), transform var(--d-fast);
}
.service-card:hover .arrow { background: var(--rd-ink); color: white; transform: rotate(-45deg); }

/* Industry rail — carousel with arrows + slow auto-scroll */
.rail-wrap {
  position: relative;
  padding: 0 var(--sp-9);
}
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  grid-template-columns: repeat(6, minmax(280px, 1fr));
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px var(--sp-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  cursor: pointer;
  color: var(--rd-ink);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast), background var(--d-fast);
}
.rail-nav svg { width: 20px; height: 20px; }
.rail-nav:hover { transform: translateY(-50%) scale(1.06); box-shadow: var(--shadow-lg); }
.rail-nav:disabled { opacity: 0.35; cursor: not-allowed; transform: translateY(-50%); }
.rail-prev { left: 0; }
.rail-next { right: 0; }
@media (max-width: 768px) {
  .rail-wrap { padding: 0 var(--sp-7); }
  .rail-nav { width: 40px; height: 40px; }
}
.rail-item {
  scroll-snap-align: start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 240px;
  transition: transform var(--d-fast), box-shadow var(--d-fast), border-color var(--d-fast);
}
.rail-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--rd-signal); }
.rail-item .industry-tag {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-signal);
}
.rail-item h4 { font-size: 1.15rem; line-height: 1.3; }
.rail-item .anchor {
  margin-top: auto;
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--rd-ink);
  font-size: 1rem;
}

/* Case study card */
.case {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  height: 100%;
  transition: transform var(--d-fast), box-shadow var(--d-base);
}
.case:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.case-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.case .tag {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.case-logo {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--rd-mist-50);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--rd-ink);
  border: 1px solid var(--border);
}
.case h3 { font-size: 1.2rem; line-height: 1.3; }
.case-rows { display: grid; gap: var(--sp-4); }
.case-row { display: grid; grid-template-columns: 90px 1fr; gap: var(--sp-4); font-size: 0.9rem; }
.case-row .k {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--fg-soft);
  text-transform: uppercase;
  padding-top: 2px;
}
.case-row .v { color: var(--fg); line-height: 1.55; }
.case .impact-row .v { color: var(--rd-ink); font-weight: 600; }

/* Logo wall */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.logo-wall .lw-cell {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-3);
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter var(--d-base), opacity var(--d-base);
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rd-navy-700);
  font-size: 0.85rem;
  text-align: center;
  min-height: 80px;
  line-height: 1.2;
}
.logo-wall .lw-cell:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }

/* (Partner-card gradient styles live in section 30 below — shared with the
   Partnerships page, so we don't duplicate the rules here.) */

/* ---------- Full-bleed company photo (Company Overview) ----------
   The photo touches the viewport edges (no .container wrap). A 6px brand-
   gradient ribbon sits above and below the image as a "frame" treatment;
   the image itself ships unmodified — no border-radius, no filter, no crop.
   A subtle ambient backdrop tints the section so the photo sits on a
   matted ground rather than floating against the page. */
.company-photo {
  position: relative;
  display: block;
  margin: var(--sp-12) 0;
  background: linear-gradient(180deg, rgba(11, 31, 58, 0.04) 0%, rgba(11, 31, 58, 0.0) 50%, rgba(11, 31, 58, 0.04) 100%);
}
.company-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Image content untouched: no border-radius, no filter, no overlay. */
}
/* Top + bottom brand-rainbow ribbons act as the frame. */
.company-photo::before,
.company-photo::after {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--rd-signal)  0%,
    var(--rd-quantum) 25%,
    var(--rd-amber)   50%,
    var(--rd-pulse)   75%,
    var(--rd-violet)  100%
  );
}
/* Bottom ribbon mirrors the colour order so the framing reads symmetrically. */
.company-photo::after {
  background: linear-gradient(
    90deg,
    var(--rd-violet)  0%,
    var(--rd-pulse)   25%,
    var(--rd-amber)   50%,
    var(--rd-quantum) 75%,
    var(--rd-signal)  100%
  );
}
@media (max-width: 768px) {
  .company-photo { margin: var(--sp-9) 0; }
  .company-photo::before,
  .company-photo::after { height: 4px; }
}

/* Pull quote */
.pullquote {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: var(--sp-9) var(--sp-7);
}
.pullquote .quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2.4rem);
  line-height: 1.3;
  color: var(--fg);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-7);
  text-wrap: balance;
}
.pullquote .quote::before { content: '“'; font-size: 1.4em; line-height: 0; vertical-align: -0.3em; color: var(--rd-quantum); margin-right: 4px; }
.pullquote .quote::after  { content: '”'; font-size: 1.4em; line-height: 0; vertical-align: -0.3em; color: var(--rd-quantum); margin-left: 4px; }
.pullquote .attr {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: 0.95rem;
  color: var(--fg-muted);
}
.pullquote .attr .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rd-navy-700), var(--rd-signal));
  color: white; display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-weight: 600;
}
.pullquote .attr .name { color: var(--fg); font-weight: 600; }

/* Process stepper */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-1);
  counter-reset: step;
}
.step {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative;
  counter-increment: step;
}
.step::before {
  content: '0' counter(step);
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--accent, var(--rd-signal));
  font-weight: 600;
  letter-spacing: 0.08em;
}
.step.accent-1, .step.accent-2, .step.accent-3,
.step.accent-4, .step.accent-5, .step.accent-6 {
  border-top: 3px solid var(--accent);
}
.step h4 { font-size: 1.05rem; }
.step .meta { font-size: 0.8rem; color: var(--fg-soft); }
.step p { font-size: 0.9rem; margin: 0; }
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .steps { grid-template-columns: 1fr; } }

/* Capability/feature block */
.feature-list { display: grid; gap: var(--sp-1); }
.feature-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.feature-row:first-child { border-top: 1px solid var(--border); }
.feature-row .num {
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  color: var(--fg-soft);
  letter-spacing: 0.08em;
  padding-top: 4px;
}
.feature-row h4 { margin-bottom: 6px; }
.feature-row p { margin: 0; font-size: 0.95rem; }

/* CTA Band */
.cta-band {
  position: relative;
  padding: var(--sp-9) var(--sp-9);
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, #0F2557 0%, #1E3A8A 25%, #6B1F4D 60%, #0E7C70 100%);
  color: white;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 60% at 12% 18%, rgba(30, 93, 255, 0.55), transparent 60%),
    radial-gradient(ellipse 40% 50% at 88% 22%, rgba(220, 38, 38, 0.42), transparent 60%),
    radial-gradient(ellipse 55% 45% at 50% 100%, rgba(0, 194, 168, 0.40), transparent 60%);
  z-index: -1;
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 100% 32px;
  mask-image: linear-gradient(180deg, transparent, black 40%, black 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 40%, black 60%, transparent);
  z-index: -1;
}
.cta-band-wrap {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}
.cta-band .eyebrow { color: var(--rd-quantum); }
.cta-band h2 {
  font-size: clamp(1.875rem, 3vw + 1rem, 3.25rem);
  margin: var(--sp-3) 0 var(--sp-4);
  max-width: 22ch;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.cta-band p { color: rgba(255,255,255,0.72); max-width: 56ch; margin: 0 auto var(--sp-7); font-size: 1.05rem; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn-ghost-light { color: white; }

/* ---------- 10. Forms ---------- */
.form-grid { display: grid; gap: var(--sp-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
}
.field label .req { color: var(--rd-pulse); margin-left: 2px; }
.field input, .field select, .field textarea {
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: white;
  font-size: 0.95rem;
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rd-signal);
  box-shadow: var(--shadow-glow);
}
.field textarea { min-height: 130px; resize: vertical; }
.field .hint { font-size: 0.8rem; color: var(--fg-soft); }
.checkbox-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5;
}
.checkbox-row input { margin-top: 3px; flex-shrink: 0; }
.checkbox-row a { color: var(--rd-signal); text-decoration: underline; }

/* ---------- 11. Office card / map placeholder ---------- */
.map-placeholder {
  position: relative;
  height: 380px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, var(--rd-mist-50), var(--rd-cloud-50));
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
.map-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(11, 31, 58, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 31, 58, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.map-pin {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--rd-pulse);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 92, 57, 0.2), 0 0 0 12px rgba(255, 92, 57, 0.08);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform var(--d-fast);
}
.map-pin:hover { transform: translate(-50%, -50%) scale(1.2); }
.map-pin .label {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--rd-ink); color: white;
  padding: 4px 8px; border-radius: var(--r-sm); font-size: 0.75rem;
  white-space: nowrap; opacity: 0; transition: opacity var(--d-fast);
  pointer-events: none;
}
.map-pin:hover .label { opacity: 1; }

.office-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.office-card:hover { border-color: var(--rd-signal); box-shadow: var(--shadow-sm); }
.office-card .city { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.office-card h4 { font-size: 1.1rem; }
.office-card .tag { font-size: 0.7rem; padding: 3px 8px; background: var(--rd-signal-50); color: var(--rd-signal); border-radius: var(--r-pill); font-weight: 600; letter-spacing: 0.04em; }
.office-card address { font-style: normal; font-size: 0.9rem; color: var(--fg-muted); line-height: 1.5; }
.office-card .meta { font-size: 0.85rem; color: var(--fg-soft); }

/* ---------- 12. Breadcrumb ---------- */
.breadcrumb {
  display: flex; gap: var(--sp-2); align-items: center;
  font-size: 0.875rem;
  color: var(--fg-soft);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--fg-muted); transition: color var(--d-fast); }
.breadcrumb a:hover { color: var(--rd-signal); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--fg); }

/* ---------- 13. Tags / pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--rd-signal-50);
  color: var(--rd-signal);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--r-pill);
}
.pill-quantum { background: var(--rd-quantum-50); color: var(--rd-quantum); }
.pill-soft { background: var(--bg-alt); color: var(--fg-muted); }

/* ---------- 14. Insight card ---------- */
.insight {
  background: var(--bg);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--d-fast), box-shadow var(--d-base);
  height: 100%;
}
.insight:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.insight-art {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--rd-navy-700), var(--rd-signal));
  position: relative;
  overflow: hidden;
}
.insight-art.art-2 { background: linear-gradient(135deg, var(--rd-ink), var(--rd-quantum)); }
.insight-art.art-3 { background: linear-gradient(135deg, var(--rd-signal-700), var(--rd-pulse)); }
.insight-art.art-4 { background: linear-gradient(135deg, var(--rd-quantum), var(--rd-signal)); }
.insight-art::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.08) 75%, transparent 75%);
  background-size: 14px 14px;
  opacity: 0.3;
}
.insight-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.insight-body .meta { display: flex; gap: var(--sp-3); font-size: 0.8rem; color: var(--fg-soft); }
.insight-body h4 { font-size: 1.1rem; line-height: 1.35; }
.insight-body .read-more { margin-top: auto; }

/* ---------- 15. Comparison / table ---------- */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.compare th, .compare td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare th {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-alt);
}
.compare th:first-child { border-top-left-radius: var(--r-md); }
.compare th:last-child  { border-top-right-radius: var(--r-md); }
.compare td.good { color: var(--rd-success); font-weight: 600; }
.compare td.muted { color: var(--fg-soft); }

/* ---------- 16. Footer (wave top edge) ---------- */
.site-footer {
  background: var(--rd-ink);
  color: rgba(255,255,255,0.72);
  padding: var(--sp-12) 0 var(--sp-7);
  position: relative;
  /* Push the footer down so its ::before wave can sit above without overlap. */
  margin-top: 120px;
}
@media (max-width: 768px) {
  .site-footer { margin-top: 80px; }
}
/* Override generic .logo height for the footer logo — white wordmark with red arrow
   accent reads cleanly on the dark footer ground. */
.site-footer .footer-logo { height: auto; display: inline-block; }
.site-footer .footer-logo img {
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 240px;
  display: block;
  filter: none !important;
  opacity: 1 !important;
}
@media (max-width: 768px) {
  .site-footer .footer-logo img { max-height: 38px; max-width: 200px; }
}
/* Layered wave silhouette — three navy waves at different heights and opacities,
   matching the reference design. The lightest (back) wave peaks highest;
   the most-opaque (front) wave covers the bottom and meets the footer body.
   - 120px tall SVG sits above the footer rectangle (top: -120px; height: 120px).
   - Same hue (#0B1F3A) on every path; only fill-opacity differs.
   - preserveAspectRatio='none' lets the wave stretch to any container width. */
.site-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -120px;
  height: 120px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0,68 C240,18 540,18 800,42 C1040,64 1240,72 1440,58 L1440,120 L0,120 Z' fill='%230B1F3A' fill-opacity='0.35'/><path d='M0,82 C240,38 540,38 800,58 C1040,76 1240,86 1440,74 L1440,120 L0,120 Z' fill='%230B1F3A' fill-opacity='0.6'/><path d='M0,92 C240,58 540,58 800,72 C1040,86 1240,96 1440,86 L1440,120 L0,120 Z' fill='%230B1F3A'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
@media (max-width: 768px) {
  /* Shorter wave on mobile — keeps the shape recognisable without eating vertical space. */
  .site-footer::before { top: -80px; height: 80px; }
}
.footer-grid {
  display: grid;
  /* Six grid tracks: brand (2fr) + 5 nav cells (1fr each).
     The "Services" column claims two of those cells via .footer-col-wide,
     so the visible columns are: Brand · Services(×2) · Industries · Products · Company. */
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-9);
  margin-bottom: var(--sp-10);
}
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 600px)  { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }

/* ---- Wide footer column (e.g. Services with 15 items) ----
   Spans 2 grid tracks on desktop; its inner <ul> becomes a 2-column grid so
   the list is roughly half the height of a single-column flow. */
.footer-col-wide { grid-column: span 2; }
.footer-col-wide ul {
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-5);
}
@media (max-width: 600px) {
  /* On the narrowest breakpoint the grid is only 2 columns — let the wide
     column take the full row so its 2-up list still has room to breathe. */
  .footer-col-wide { grid-column: 1 / -1; }
}
.footer-brand .logo { color: white; margin-bottom: var(--sp-4); }
.footer-brand .logo-mark::after { background: var(--rd-ink); }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.9rem; max-width: 36ch; }
.footer-col h5 {
  font-family: var(--ff-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: white;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--d-fast);
}
.footer-col a:hover { color: white; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding-top: var(--sp-7);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.55);
}
.footer-bottom .legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer-bottom .legal a:hover { color: white; }
.footer-cert {
  display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
}
.footer-cert .badge {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
}

/* ---------- 17. Reveal (preloaded) ---------- */
/* Content is visible immediately. Optional one-time fade-in on the very
   first load only — purely cosmetic, and skipped if reduced-motion. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  body.is-fresh .reveal {
    animation: rd-fade-in 600ms var(--ease-out) both;
  }
  body.is-fresh .reveal[data-stagger="1"] { animation-delay: 60ms; }
  body.is-fresh .reveal[data-stagger="2"] { animation-delay: 120ms; }
  body.is-fresh .reveal[data-stagger="3"] { animation-delay: 180ms; }
  body.is-fresh .reveal[data-stagger="4"] { animation-delay: 240ms; }
  body.is-fresh .reveal[data-stagger="5"] { animation-delay: 300ms; }
  body.is-fresh .reveal[data-stagger="6"] { animation-delay: 360ms; }
}
@keyframes rd-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 18. Utilities ---------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-7 { gap: var(--sp-7); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-7 { margin-bottom: var(--sp-7); }
.mb-9 { margin-bottom: var(--sp-9); }
.mt-auto { margin-top: auto; }
.w-full { width: 100%; }
.tabular { font-variant-numeric: tabular-nums; }
.divider { border-top: 1px solid var(--border); margin: var(--sp-7) 0; }
.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;
}

/* ---------- 19. Colour rotation ---------- */
/* Rotates accent colours on pillars / features / stat bars / icons.
   Apply class .accent-cycle to a parent — its direct children with .accent
   take colour from the rotation cycle. Or apply .accent-{n} directly. */
.accent-1 { --accent: var(--rd-signal);  --accent-bg: var(--rd-signal-50); }
.accent-2 { --accent: var(--rd-quantum); --accent-bg: var(--rd-quantum-50); }
.accent-3 { --accent: var(--rd-amber);   --accent-bg: var(--rd-amber-50); }
.accent-4 { --accent: var(--rd-pulse);   --accent-bg: var(--rd-pulse-50); }
.accent-5 { --accent: var(--rd-violet);  --accent-bg: var(--rd-violet-50); }
.accent-6 { --accent: var(--rd-rose);    --accent-bg: var(--rd-rose-50); }

.pillar.accent-1::before,
.pillar.accent-2::before,
.pillar.accent-3::before,
.pillar.accent-4::before,
.pillar.accent-5::before,
.pillar.accent-6::before {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0,0,0,0), 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.pillar.accent-1 .metric, .pillar.accent-2 .metric, .pillar.accent-3 .metric,
.pillar.accent-4 .metric, .pillar.accent-5 .metric, .pillar.accent-6 .metric {
  color: var(--accent);
}
.pillar .icon-tile {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-bg, var(--rd-signal-50));
  color: var(--accent, var(--rd-signal));
  margin-bottom: var(--sp-2);
}
.pillar .icon-tile svg { width: 22px; height: 22px; }

/* Feature row coloured number tiles */
.feature-row.accent-1 .num,
.feature-row.accent-2 .num,
.feature-row.accent-3 .num,
.feature-row.accent-4 .num,
.feature-row.accent-5 .num,
.feature-row.accent-6 .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 0;
  font-weight: 700;
}

/* Stat tile coloured top bar */
.stat.accent-1 .bar,
.stat.accent-2 .bar,
.stat.accent-3 .bar,
.stat.accent-4 .bar,
.stat.accent-5 .bar,
.stat.accent-6 .bar { background: var(--accent); }
.stat.accent-1 .num .suffix,
.stat.accent-2 .num .suffix,
.stat.accent-3 .num .suffix,
.stat.accent-4 .num .suffix,
.stat.accent-5 .num .suffix,
.stat.accent-6 .num .suffix { color: var(--accent); }

/* Service card icon tinted */
.service-card .icon-tile {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-bg, var(--rd-signal-50));
  color: var(--accent, var(--rd-signal));
  margin-bottom: var(--sp-3);
}
.service-card .icon-tile svg { width: 26px; height: 26px; }

/* Industry rail coloured tags */
.rail-item.accent-1 .industry-tag { color: var(--accent); }
.rail-item.accent-2 .industry-tag { color: var(--accent); }
.rail-item.accent-3 .industry-tag { color: var(--accent); }
.rail-item.accent-4 .industry-tag { color: var(--accent); }
.rail-item.accent-5 .industry-tag { color: var(--accent); }
.rail-item.accent-6 .industry-tag { color: var(--accent); }
.rail-item.accent-1, .rail-item.accent-2, .rail-item.accent-3,
.rail-item.accent-4, .rail-item.accent-5, .rail-item.accent-6 {
  border-left: 3px solid var(--accent);
}

/* Insight art colour variants */
.insight-art.art-blue   { background: linear-gradient(135deg, #1E3A8A, #2D5BD9); }
.insight-art.art-teal   { background: linear-gradient(135deg, #0E7C70, #00C2A8); }
.insight-art.art-amber  { background: linear-gradient(135deg, #C2410C, #F97316); }
.insight-art.art-rose   { background: linear-gradient(135deg, #B91C5C, #E11D7E); }
.insight-art.art-violet { background: linear-gradient(135deg, #5B21B6, #7C3AED); }

/* Center page-header content */
.hero h1 em.serif { color: var(--rd-amber); font-style: italic; font-weight: 400; }

/* ---------- 20. Client logo wall (image + text fallback) ---------- */
.lw-cell { position: relative; }
.lw-cell img.lw-logo {
  max-width: 80%;
  max-height: 50px;
  width: auto;
  height: auto;
  display: block;
  opacity: 0.92;
  transition: opacity var(--d-base), transform var(--d-base);
}
.lw-cell:hover img.lw-logo { opacity: 1; transform: scale(1.04); }
/* When the image fails to load, JS sets data-fallback and the text shows */
.lw-cell .lw-name { display: none; }
.lw-cell.is-fallback img.lw-logo { display: none; }
.lw-cell.is-fallback .lw-name { display: block; }

/* ---------- 21. Testimonials (auto-scroll marquee) ---------- */
.testimonials-marquee {
  position: relative;
  overflow: hidden;
  margin-top: var(--sp-7);
  padding: var(--sp-3) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.testimonials-track {
  display: flex;
  gap: var(--sp-5);
  width: max-content;
  animation: rd-marquee 90s linear infinite;
}
.testimonials-marquee:hover .testimonials-track { animation-play-state: paused; }
@keyframes rd-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.t-card {
  flex-shrink: 0;
  width: 400px;
  padding: var(--sp-8) var(--sp-7) var(--sp-6);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 28px rgba(11, 31, 58, 0.06);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-base);
}
.t-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 40px rgba(11, 31, 58, 0.10); }
/* Top accent ribbon — gradient, with curved ends */
.t-card::before {
  content: '';
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(95deg, var(--rd-signal), var(--rd-quantum), var(--rd-amber), var(--rd-pulse));
}
/* Soft glow tint matched to the accent */
.t-card::after {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-bg, var(--rd-signal-50)) 0%, transparent 60%);
  z-index: -1;
  opacity: 0.5;
}
/* Decorative serif quote mark in the top-right of every card */
.t-card .t-quote-mark {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  font-family: var(--ff-serif);
  font-size: 5rem;
  font-style: italic;
  font-weight: 400;
  line-height: 0.6;
  color: var(--accent, var(--rd-signal));
  opacity: 0.18;
  pointer-events: none;
}
.t-card.accent-1 .t-quote-mark { color: var(--rd-signal); }
.t-card.accent-2 .t-quote-mark { color: var(--rd-quantum); }
.t-card.accent-3 .t-quote-mark { color: var(--rd-amber); }
.t-card.accent-4 .t-quote-mark { color: var(--rd-pulse); }
.t-card.accent-5 .t-quote-mark { color: var(--rd-violet); }
.t-card.accent-6 .t-quote-mark { color: var(--rd-rose); }
.t-card .t-quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--fg);
  letter-spacing: -0.005em;
  font-weight: 400;
  margin: 0;
  position: relative;
  z-index: 1;
}
.t-card .t-attr {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.t-card .t-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rd-navy-700), var(--rd-signal));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid white;
  box-shadow: 0 0 0 2px var(--accent, var(--rd-signal));
}
.t-card.accent-1 .t-avatar { background: linear-gradient(135deg, #1E40AF, var(--rd-signal)); }
.t-card.accent-2 .t-avatar { background: linear-gradient(135deg, #0E7C70, var(--rd-quantum)); }
.t-card.accent-3 .t-avatar { background: linear-gradient(135deg, #C2410C, var(--rd-amber)); }
.t-card.accent-4 .t-avatar { background: linear-gradient(135deg, #B91C1C, var(--rd-pulse)); }
.t-card.accent-5 .t-avatar { background: linear-gradient(135deg, #5B21B6, var(--rd-violet)); }
.t-card.accent-6 .t-avatar { background: linear-gradient(135deg, #BE185D, var(--rd-rose)); }
.t-card .t-meta { line-height: 1.35; font-size: 0.875rem; }
.t-card .t-meta .t-name { color: var(--fg); font-weight: 600; display: block; font-family: var(--ff-display); }
.t-card .t-meta .t-role { color: var(--fg-soft); font-size: 0.82rem; }

/* ---------- 22. Insight art (richer content inside the gradient band) ---------- */
.insight-art {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-5);
  color: white;
  isolation: isolate;
  overflow: hidden;
}
/* Compatibility aliases for legacy class names */
.insight-art.art-1 { background: linear-gradient(135deg, #1E3A8A, #2D5BD9); }
.insight-art.art-2 { background: linear-gradient(135deg, #0E7C70, #00C2A8); }
.insight-art.art-3 { background: linear-gradient(135deg, #C2410C, #F97316); }
.insight-art.art-4 { background: linear-gradient(135deg, #B91C5C, #E11D7E); }
.insight-art .ia-tag {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.insight-art .ia-icon {
  position: absolute;
  right: 16px; bottom: 12px;
  width: 64px; height: 64px;
  color: rgba(255, 255, 255, 0.35);
  z-index: 1;
}
.insight-art .ia-icon svg { width: 100%; height: 100%; }
.insight-art .ia-headline {
  position: relative;
  z-index: 2;
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.22;
  color: white;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 84%;
  text-wrap: balance;
}
.insight-art .ia-stat {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.insight-art::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.10), transparent 50%),
    linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.04) 75%, transparent 75%);
  background-size: 100% 100%, 12px 12px;
  z-index: 0;
}

/* ---------- 23. Bento pillars (asymmetric "what makes us different") ---------- */
.bento-pillars {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "hero hero feat"
    "a    b    c"
    "wide wide wide";
}
.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(11, 31, 58, 0.08);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  isolation: isolate;
  min-height: 220px;
}
.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(11, 31, 58, 0.12), 0 4px 12px rgba(11, 31, 58, 0.06);
}
.bento-card .bento-glow {
  position: absolute;
  top: -25%; right: -25%;
  width: 65%; height: 75%;
  background: radial-gradient(circle, var(--accent, var(--rd-signal)) 0%, transparent 65%);
  opacity: 0.22;
  z-index: -1;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
}
.bento-card:hover .bento-glow { opacity: 0.32; }
.bento-card .bento-num {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
}
.bento-card .bento-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-bg, var(--rd-signal-50));
  color: var(--accent, var(--rd-signal));
  flex-shrink: 0;
}
.bento-card .bento-icon svg { width: 24px; height: 24px; }
.bento-card .bento-title {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  margin: 0;
}
.bento-card .bento-body {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.bento-card .bento-metric {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin-top: auto;
  padding-top: 8px;
}
/* HERO card — large, the headline metric front-and-centre */
.bento-hero { grid-area: hero; min-height: 320px; padding: 36px 40px; }
.bento-hero { background: linear-gradient(135deg, var(--rd-signal-50) 0%, #fff 70%); }
.bento-hero .bento-title { font-size: 1.85rem; max-width: 22ch; }
.bento-hero .bento-body  { font-size: 1.05rem; max-width: 44ch; }
.bento-hero .bento-metric-big {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--rd-signal);
  letter-spacing: -0.04em;
  margin-top: auto;
}
/* FEATURE card — vertical metric panel */
.bento-feat { grid-area: feat; min-height: 320px; background: linear-gradient(150deg, var(--rd-quantum-50) 0%, #fff 75%); }
.bento-feat .bento-metric-big {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--rd-quantum);
  letter-spacing: -0.035em;
  margin-top: auto;
}
/* Three small cards a / b / c */
.bento-a { grid-area: a; background: linear-gradient(150deg, var(--rd-amber-50) 0%, #fff 80%); }
.bento-b { grid-area: b; background: linear-gradient(150deg, var(--rd-pulse-50)  0%, #fff 80%); }
.bento-c { grid-area: c; background: linear-gradient(150deg, var(--rd-violet-50) 0%, #fff 80%); }
.bento-a .bento-num, .bento-a .bento-metric, .bento-a .bento-icon { --accent: var(--rd-amber);   --accent-bg: var(--rd-amber-50); }
.bento-b .bento-num, .bento-b .bento-metric, .bento-b .bento-icon { --accent: var(--rd-pulse);   --accent-bg: var(--rd-pulse-50); }
.bento-c .bento-num, .bento-c .bento-metric, .bento-c .bento-icon { --accent: var(--rd-violet);  --accent-bg: var(--rd-violet-50); }
.bento-feat .bento-num, .bento-feat .bento-metric, .bento-feat .bento-icon { --accent: var(--rd-quantum); --accent-bg: var(--rd-quantum-50); }
.bento-hero .bento-num, .bento-hero .bento-metric, .bento-hero .bento-icon { --accent: var(--rd-signal);  --accent-bg: var(--rd-signal-50); }
.bento-wide .bento-num, .bento-wide .bento-metric, .bento-wide .bento-icon { --accent: var(--rd-rose);    --accent-bg: var(--rd-rose-50); }
/* WIDE card — horizontal closer */
.bento-wide {
  grid-area: wide;
  min-height: 140px;
  padding: 28px 36px;
  background: linear-gradient(110deg, var(--rd-rose-50) 0%, #fff 60%);
}
.bento-wide-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  width: 100%;
}
.bento-wide .bento-icon { width: 56px; height: 56px; border-radius: 14px; }
.bento-wide .bento-icon svg { width: 28px; height: 28px; }
.bento-wide .bento-title { font-size: 1.5rem; margin: 0; }
.bento-wide .bento-body  { margin: 4px 0 0; }
.bento-wide .bento-metric-big {
  font-family: var(--ff-display);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--rd-rose);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .bento-pillars {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "feat feat"
      "a    b"
      "c    c"
      "wide wide";
  }
}
@media (max-width: 640px) {
  .bento-pillars {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "feat" "a" "b" "c" "wide";
  }
  .bento-wide-inner { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .bento-wide .bento-metric-big { font-size: 1.5rem; }
}

/* ---------- 24. Stat-led pillars (chessboard) ---------- */
/* Alternative to the bento — symmetric grid, alternating navy/white cards,
   each dominated by a giant brand-coloured metric. Editorial / Bloomberg feel. */
.pillars-stat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--rd-cloud-100);
  border: 1px solid var(--rd-cloud-100);
  box-shadow: 0 24px 48px rgba(11, 31, 58, 0.08), 0 4px 12px rgba(11, 31, 58, 0.04);
}
.pillar-stat {
  position: relative;
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 340px;
  background: white;
  isolation: isolate;
  transition: transform 280ms var(--ease-out);
}
.pillar-stat:hover { transform: translateY(-2px); }
.pillar-stat.is-dark {
  background: var(--rd-ink);
  color: white;
}
.pillar-stat .ps-num {
  font-family: var(--ff-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.pillar-stat.is-dark .ps-num { color: rgba(255, 255, 255, 0.55); }
.pillar-stat .ps-metric {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 4.5vw, 5rem);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}
.pillar-stat .ps-metric .ps-unit {
  font-size: 0.32em;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--fg-soft);
  text-transform: lowercase;
}
.pillar-stat.is-dark .ps-metric .ps-unit { color: rgba(255, 255, 255, 0.55); }
.pillar-stat .ps-divider {
  width: 36px; height: 3px;
  background: var(--accent);
  margin-top: var(--sp-2);
}
.pillar-stat .ps-title {
  font-family: var(--ff-display);
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  margin-top: auto;
}
.pillar-stat .ps-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-muted);
}
.pillar-stat.is-dark .ps-body { color: rgba(255, 255, 255, 0.74); }
/* Watermark number — extremely subtle decorative giant numeral */
.pillar-stat::before {
  content: attr(data-mark);
  position: absolute;
  top: -16px; right: -8px;
  font-family: var(--ff-display);
  font-size: 12rem;
  font-weight: 700;
  line-height: 1;
  color: currentColor;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 1024px) {
  .pillars-stat { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pillars-stat { grid-template-columns: 1fr; }
  .pillar-stat { min-height: 240px; padding: 36px 28px; }
}

/* ---------- 25. Editorial testimonial slider ---------- */
.testimonials-pro {
  position: relative;
}
.testimonials-pro .container { position: relative; }
.t-pro-head { text-align: center; margin-bottom: var(--sp-9); }
.t-pro-stage {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 24px 24px;
  text-align: center;
  isolation: isolate;
  min-height: 340px;
}
/* Decorative quote mark behind the text */
.t-pro-mark {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 14rem;
  line-height: 1;
  color: var(--rd-amber);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.t-pro-slides {
  position: relative;
  z-index: 1;
}
.t-pro-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
  pointer-events: none;
}
.t-pro-slide.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.t-pro-quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1.4vw + 0.9rem, 2.05rem);
  line-height: 1.4;
  color: var(--rd-ink);
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 60ch;
  text-wrap: balance;
}
.t-pro-attr {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.t-pro-attr .t-pro-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rd-navy-700), var(--rd-pulse));
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.1rem;
}
.t-pro-attr .t-pro-meta {
  text-align: left;
  line-height: 1.35;
}
.t-pro-attr .t-pro-meta .t-pro-name {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--rd-ink);
  display: block;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
.t-pro-attr .t-pro-meta .t-pro-role {
  color: var(--fg-soft);
  font-size: 0.88rem;
}

/* Controls */
.t-pro-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}
.t-pro-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--rd-ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out), background var(--d-fast), border-color var(--d-fast);
}
.t-pro-arrow:hover {
  transform: translateY(-1px);
  background: var(--rd-ink);
  color: white;
  border-color: var(--rd-ink);
}
.t-pro-arrow svg { width: 18px; height: 18px; }
.t-pro-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.t-pro-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  background: var(--rd-cloud-200);
  cursor: pointer;
  padding: 0;
  transition: background var(--d-fast), width var(--d-fast), transform var(--d-fast);
}
.t-pro-dot:hover { background: var(--rd-slate-400); }
.t-pro-dot.is-active {
  background: var(--rd-pulse);
  width: 28px;
  border-radius: 6px;
}
/* Progress ring/timer (subtle auto-advance indicator) */
.t-pro-progress {
  width: 100%;
  height: 2px;
  background: var(--rd-cloud-100);
  border-radius: 2px;
  margin-top: 24px;
  overflow: hidden;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.t-pro-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--rd-signal), var(--rd-amber), var(--rd-pulse));
  transition: width 60ms linear;
}

/* ---------- 26. Feature pull-quote card ---------- */
.pullquote-feat {
  position: relative;
  border-radius: 28px;
  padding: 64px 56px 56px;
  background:
    radial-gradient(ellipse 60% 60% at 92% 12%, rgba(220, 38, 38, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 60% at 12% 88%, rgba(0, 194, 168, 0.10), transparent 60%),
    linear-gradient(135deg, #F2F6FF 0%, #FFFFFF 55%, #FFF6EE 100%);
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 60px rgba(11, 31, 58, 0.06), 0 4px 12px rgba(11, 31, 58, 0.04);
}
.pullquote-feat::before {
  /* huge decorative quote mark sitting behind the text */
  content: '\201C';
  position: absolute;
  top: -32px;
  left: 28px;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 18rem;
  line-height: 1;
  color: var(--rd-pulse);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.pullquote-feat .pf-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 56px;
  align-items: stretch;
}
.pullquote-feat .pf-main {
  display: flex;
  flex-direction: column;
}
.pullquote-feat .pf-quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.45rem, 1.4vw + 0.95rem, 2rem);
  line-height: 1.4;
  color: var(--rd-ink);
  letter-spacing: -0.012em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.pullquote-feat .pf-quote::after {
  content: '\201D';
  font-family: var(--ff-serif);
  color: var(--rd-pulse);
  font-size: 1em;
  margin-left: 6px;
  font-style: italic;
}
.pullquote-feat .pf-divider {
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--rd-signal) 0%, var(--rd-pulse) 60%, var(--rd-amber) 100%);
  border-radius: 2px;
  margin-bottom: 22px;
}
.pullquote-feat .pf-attr {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.pullquote-feat .pf-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rd-navy-700), var(--rd-pulse));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(11, 31, 58, 0.18);
}
.pullquote-feat .pf-meta { line-height: 1.4; }
.pullquote-feat .pf-name {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--rd-ink);
  font-size: 1.05rem;
  display: block;
  letter-spacing: -0.01em;
}
.pullquote-feat .pf-role {
  color: var(--fg-muted);
  font-size: 0.92rem;
}
.pullquote-feat .pf-cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Right column — outcome stats */
.pullquote-feat .pf-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  align-self: center;
}
.pullquote-feat .pf-stat {
  background: rgba(255, 255, 255, 0.85);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.pullquote-feat .pf-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
}
.pullquote-feat .pf-stat .num {
  font-family: var(--ff-display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.pullquote-feat .pf-stat .label {
  color: var(--fg-muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}
/* Accent variants for stats */
.pullquote-feat .pf-stat.pf-acc-signal  { --accent: var(--rd-signal); }
.pullquote-feat .pf-stat.pf-acc-quantum { --accent: var(--rd-quantum); }
.pullquote-feat .pf-stat.pf-acc-amber   { --accent: var(--rd-amber); }
.pullquote-feat .pf-stat.pf-acc-pulse   { --accent: var(--rd-pulse); }
.pullquote-feat .pf-stat.pf-acc-violet  { --accent: var(--rd-violet); }
.pullquote-feat .pf-stat.pf-acc-rose    { --accent: var(--rd-rose); }

@media (max-width: 900px) {
  .pullquote-feat { padding: 48px 32px 40px; }
  .pullquote-feat::before { font-size: 12rem; top: -24px; left: 16px; }
  .pullquote-feat .pf-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .pullquote-feat .pf-stats { grid-template-columns: 1fr; }
}

/* ---------- 27. Floating social rail (right edge of every page) ----------
   Green pill tabs flush against the right edge — half-rounded so they look
   "attached" to the page, with a vertical brand-green track behind them. */
.social-rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 90;
  background: linear-gradient(180deg, #0E7C70 0%, #047857 100%);
  border-radius: 14px 0 0 14px;
  padding: 6px 0;
  box-shadow: -2px 6px 20px rgba(11, 31, 58, 0.18);
}
.social-rail a {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: transparent;
  border: 0;
  position: relative;
  transition: transform 220ms var(--ease-out), background 220ms;
}
.social-rail a::before {
  /* white circular dot behind the icon for the "icon-on-circle" look */
  content: '';
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  z-index: 0;
  transition: background 220ms, transform 220ms var(--ease-out);
}
.social-rail a > svg {
  position: relative;
  z-index: 1;
  width: 18px; height: 18px;
}
.social-rail a:hover { transform: translateX(-2px); }
.social-rail a:hover::before {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.08);
}
.social-rail .sr-li:hover::before { background: #0A66C2; border-color: #0A66C2; }
.social-rail .sr-fb:hover::before { background: #1877F2; border-color: #1877F2; }
.social-rail .sr-x:hover::before  { background: #0F172A; border-color: #0F172A; }
.social-rail .sr-yt:hover::before { background: #FF0000; border-color: #FF0000; }
@media (max-width: 768px) {
  .social-rail { padding: 4px 0; }
  .social-rail a { width: 38px; height: 38px; }
  .social-rail a::before { width: 28px; height: 28px; }
  .social-rail a > svg { width: 16px; height: 16px; }
}

/* ---------- 28. Office cards (gradient + bigger) ---------- */
.office-card {
  background: var(--card-grad, linear-gradient(135deg, var(--rd-signal-50) 0%, #fff 80%));
  border: 1px solid var(--border);
  border-top: 3px solid var(--card-accent, var(--rd-signal));
  border-radius: 18px;
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 200px;
}
.office-card:hover { transform: translateY(-3px); box-shadow: 0 24px 40px rgba(11, 31, 58, 0.10); }
.office-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 60%; height: 70%;
  background: radial-gradient(circle, var(--card-accent), transparent 65%);
  opacity: 0.16;
  z-index: -1;
}
.office-card .city {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.office-card h4 { font-size: 1.4rem; letter-spacing: -0.02em; }
.office-card .tag {
  font-size: 0.7rem;
  padding: 5px 10px;
  background: var(--card-accent);
  color: white;
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.office-card address {
  font-style: normal;
  font-size: 0.96rem;
  color: var(--fg);
  line-height: 1.55;
}
.office-card .meta {
  font-size: 0.95rem;
  color: var(--card-accent);
  font-weight: 600;
  font-family: var(--ff-mono);
  margin-top: auto;
}
.office-card.acc-1 { --card-grad: linear-gradient(135deg, var(--rd-signal-50)  0%, #fff 80%); --card-accent: var(--rd-signal); }
.office-card.acc-2 { --card-grad: linear-gradient(135deg, var(--rd-quantum-50) 0%, #fff 80%); --card-accent: var(--rd-quantum); }
.office-card.acc-3 { --card-grad: linear-gradient(135deg, var(--rd-amber-50)   0%, #fff 80%); --card-accent: var(--rd-amber); }
.office-card.acc-4 { --card-grad: linear-gradient(135deg, var(--rd-pulse-50)   0%, #fff 80%); --card-accent: var(--rd-pulse); }
.office-card.acc-5 { --card-grad: linear-gradient(135deg, var(--rd-violet-50)  0%, #fff 80%); --card-accent: var(--rd-violet); }
.office-card.acc-6 { --card-grad: linear-gradient(135deg, var(--rd-rose-50)    0%, #fff 80%); --card-accent: var(--rd-rose); }
.office-card.acc-7 { --card-grad: linear-gradient(135deg, var(--rd-signal-50)  0%, #fff 80%); --card-accent: var(--rd-signal); }

/* World map — proper SVG ground */
.world-map {
  position: relative;
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(30, 93, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(0, 194, 168, 0.12), transparent 60%),
    linear-gradient(180deg, #F2F6FF 0%, #FFF 70%);
  border: 1px solid var(--border);
}
.world-map svg.world-map-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.world-map svg.world-map-bg path { fill: rgba(11, 31, 58, 0.08); stroke: rgba(11, 31, 58, 0.18); stroke-width: 0.4; }
.world-map .map-pin { position: absolute; transform: translate(-50%, -50%); }

/* ---------- 29. Leadership team cards (gradient) ---------- */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .lead-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .lead-grid { grid-template-columns: 1fr; } }

.lead-card {
  position: relative;
  border-radius: 22px;
  padding: 36px 28px 32px;
  background: var(--card-grad, linear-gradient(155deg, var(--rd-signal-50), #fff 80%));
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  isolation: isolate;
  min-height: 360px;
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base);
  border: 1px solid rgba(11, 31, 58, 0.06);
  border-top: 3px solid var(--card-accent, var(--rd-signal));
}
.lead-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px rgba(11, 31, 58, 0.10); }
.lead-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, var(--card-accent, var(--rd-signal)), transparent 70%);
  opacity: 0.18;
  z-index: -1;
}
.lead-card .lead-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--card-accent, var(--rd-signal));
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(11, 31, 58, 0.18);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.lead-card .lead-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  margin: 0;
}
.lead-card .lead-role {
  display: inline-block;
  padding: 6px 12px;
  background: var(--card-accent, var(--rd-signal));
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  align-self: flex-start;
  box-shadow: 0 4px 10px rgba(11, 31, 58, 0.10);
}
.lead-card .lead-bio {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Nine soft pastel gradient presets — vibrant accent colour, light card body */
.lead-card.g-1 { --card-grad: linear-gradient(135deg, var(--rd-signal-50)  0%, #fff 80%); --card-accent: var(--rd-signal); }
.lead-card.g-2 { --card-grad: linear-gradient(135deg, var(--rd-violet-50)  0%, #fff 80%); --card-accent: var(--rd-violet); }
.lead-card.g-3 { --card-grad: linear-gradient(135deg, var(--rd-quantum-50) 0%, #fff 80%); --card-accent: var(--rd-quantum); }
.lead-card.g-4 { --card-grad: linear-gradient(135deg, var(--rd-pulse-50)   0%, #fff 80%); --card-accent: var(--rd-pulse); }
.lead-card.g-5 { --card-grad: linear-gradient(135deg, #EBF1FF              0%, #fff 80%); --card-accent: var(--rd-navy-700); }
.lead-card.g-6 { --card-grad: linear-gradient(135deg, var(--rd-amber-50)   0%, #fff 80%); --card-accent: var(--rd-amber); }
.lead-card.g-7 { --card-grad: linear-gradient(135deg, var(--rd-rose-50)    0%, #fff 80%); --card-accent: var(--rd-rose); }
.lead-card.g-8 { --card-grad: linear-gradient(135deg, #FEEAEA              0%, #fff 80%); --card-accent: #B91C1C; }
.lead-card.g-9 { --card-grad: linear-gradient(135deg, #E6F7F0              0%, #fff 80%); --card-accent: #047857; }

/* ---------- 30. Partnerships gradient cards ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .partner-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .partner-grid { grid-template-columns: 1fr; } }
.partner-card {
  position: relative;
  border-radius: 18px;
  padding: 28px 24px;
  background: var(--card-grad, linear-gradient(135deg, var(--rd-signal-50), white));
  border: 1px solid rgba(11, 31, 58, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base);
  isolation: isolate;
  overflow: hidden;
}
.partner-card:hover { transform: translateY(-3px); box-shadow: 0 20px 36px rgba(11, 31, 58, 0.10); }
.partner-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 60%; height: 65%;
  background: radial-gradient(circle, var(--card-accent, var(--rd-signal)), transparent 70%);
  opacity: 0.20;
  z-index: -1;
}
.partner-card .partner-logo {
  font-family: var(--ff-display);
  font-weight: 700;
  /* Larger company name — matches the reference design. */
  font-size: 1.65rem;
  line-height: 1.15;
  color: var(--card-accent, var(--rd-ink));
  letter-spacing: -0.025em;
}
@media (max-width: 600px) {
  .partner-card .partner-logo { font-size: 1.45rem; }
}
.partner-card .partner-tier {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--card-accent, var(--rd-signal));
  border: 1px solid var(--card-accent, var(--rd-signal));
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  align-self: flex-start;
  text-transform: uppercase;
}
.partner-card .partner-desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--fg-muted);
  line-height: 1.5;
}
.partner-card.acc-1 { --card-grad: linear-gradient(135deg, var(--rd-signal-50)  0%, #fff 85%); --card-accent: var(--rd-signal); }
.partner-card.acc-2 { --card-grad: linear-gradient(135deg, var(--rd-quantum-50) 0%, #fff 85%); --card-accent: var(--rd-quantum); }
.partner-card.acc-3 { --card-grad: linear-gradient(135deg, var(--rd-amber-50)   0%, #fff 85%); --card-accent: var(--rd-amber); }
.partner-card.acc-4 { --card-grad: linear-gradient(135deg, var(--rd-pulse-50)   0%, #fff 85%); --card-accent: var(--rd-pulse); }
.partner-card.acc-5 { --card-grad: linear-gradient(135deg, var(--rd-violet-50)  0%, #fff 85%); --card-accent: var(--rd-violet); }
.partner-card.acc-6 { --card-grad: linear-gradient(135deg, var(--rd-rose-50)    0%, #fff 85%); --card-accent: var(--rd-rose); }

.partner-section-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: var(--sp-6);
}
.partner-section-head .num {
  font-family: var(--ff-mono);
  font-size: 0.9rem;
  color: var(--fg-soft);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.partner-section-head h3 {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  margin: 0;
}

/* ---------- 31. Modal ---------- */
.rd-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
}
/* Native [hidden] must beat the display:flex above, otherwise the
   invisible modal blocks every click on the page. */
.rd-modal[hidden] { display: none !important; }
.rd-modal.is-open { opacity: 1; pointer-events: auto; }
.rd-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 31, 58, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rd-modal-card {
  position: relative;
  background: white;
  border-radius: 24px;
  padding: 48px 44px 40px;
  max-width: 480px;
  width: calc(100vw - 40px);
  text-align: center;
  box-shadow: 0 30px 60px rgba(11, 31, 58, 0.30);
  transform: translateY(8px) scale(0.98);
  transition: transform 280ms var(--ease-out);
}
.rd-modal.is-open .rd-modal-card { transform: none; }
.rd-modal-close {
  position: absolute; top: 14px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: white;
  color: var(--fg-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
.rd-modal-close:hover { background: var(--bg-alt); color: var(--rd-ink); }
.rd-modal-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rd-quantum), #047857);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
  box-shadow: 0 12px 24px rgba(0, 194, 168, 0.30);
}
.rd-modal-icon svg { width: 32px; height: 32px; }
.rd-modal-title {
  font-family: var(--ff-display);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-3);
  color: var(--rd-ink);
}
.rd-modal-body {
  font-size: 1.05rem;
  color: var(--fg);
  line-height: 1.55;
  margin: 0 0 var(--sp-3);
}
.rd-modal-meta {
  font-size: 0.9rem;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-7);
}

/* ---------- 32. Real Leaflet map ---------- */
.leaflet-map {
  height: 460px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(11, 31, 58, 0.08);
}
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  font-family: var(--ff-body);
}
.leaflet-popup-content {
  margin: 12px 16px;
}
.leaflet-popup-content strong {
  font-family: var(--ff-display);
  color: var(--rd-ink);
}

/* ---------- 33. Gradient quote (vision / overview) ---------- */
.rd-quote-grad {
  position: relative;
  border-radius: 28px;
  padding: 60px 56px;
  background:
    radial-gradient(ellipse 60% 50% at 92% 12%, rgba(220, 38, 38, 0.20), transparent 60%),
    radial-gradient(ellipse 70% 60% at 12% 88%, rgba(0, 194, 168, 0.20), transparent 60%),
    linear-gradient(135deg, #0F2557 0%, #1E3A8A 50%, #6B1F4D 100%);
  color: white;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  box-shadow: 0 30px 60px rgba(11, 31, 58, 0.25);
}
.rd-quote-grad::before {
  content: '\201C';
  position: absolute;
  top: -32px; left: 32px;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 14rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 0;
}
.rd-quote-grad .rqg-text {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 1.4vw + 0.95rem, 2rem);
  line-height: 1.45;
  color: white;
  letter-spacing: -0.012em;
  margin: 0 auto var(--sp-7);
  max-width: 60ch;
  position: relative;
  z-index: 1;
  text-wrap: balance;
}
.rd-quote-grad .rqg-attr {
  display: inline-flex; align-items: center; gap: 14px;
  position: relative;
  z-index: 1;
}
.rd-quote-grad .rqg-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00C2A8, #1E5DFF);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.05rem;
  border: 2px solid rgba(255, 255, 255, 0.30);
}
.rd-quote-grad .rqg-meta { text-align: left; line-height: 1.35; }
.rd-quote-grad .rqg-name { font-family: var(--ff-display); font-weight: 600; color: white; display: block; }
.rd-quote-grad .rqg-role { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; }

/* ---------- 34. Coloured client logo grid (overview) ---------- */
.client-grid-deluxe {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) { .client-grid-deluxe { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .client-grid-deluxe { grid-template-columns: repeat(2, 1fr); } }
.client-grid-deluxe .cgd-cell {
  position: relative;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 14px;
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base), border-color var(--d-base);
  overflow: hidden;
}
.client-grid-deluxe .cgd-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(11, 31, 58, 0.08);
  border-color: var(--rd-cloud-200);
}
.client-grid-deluxe .cgd-cell img {
  max-width: 92%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--d-base) var(--ease-out);
}
.client-grid-deluxe .cgd-cell:hover img { transform: scale(1.04); }
/* Accent classes are kept for backward-compat but no longer apply backgrounds */
.client-grid-deluxe .cgd-cell.acc-1,
.client-grid-deluxe .cgd-cell.acc-2,
.client-grid-deluxe .cgd-cell.acc-3,
.client-grid-deluxe .cgd-cell.acc-4,
.client-grid-deluxe .cgd-cell.acc-5,
.client-grid-deluxe .cgd-cell.acc-6 { background: transparent; }

/* ============================================================
   35. Responsive polish — mobile, tablet, large desktops
   ============================================================ */

/* ---- Tiny phones (320–479) and standard phones (480–639) ---- */
@media (max-width: 640px) {
  :root { --header-h: 64px; }

  /* Container gets tighter on small screens, social rail can encroach */
  .container, .container-narrow { padding-left: 16px; padding-right: 16px; }

  /* Headings — clamp already handles most, but ensure no overflow */
  h1, .display-l, .display-xl { word-break: break-word; }

  /* Hero — give content room and shrink the video aspect */
  .hero-home { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
  .hero-video .hero-aside { aspect-ratio: 16 / 11; max-height: 240px; }
  .hero-video .ticker { margin-top: var(--sp-5); }
  .ticker-item { font-size: 0.85rem; }
  .ticker-track { gap: var(--sp-7); }

  /* Buttons stack on tiny screens */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { justify-content: center; width: 100%; }
  .hero-actions .btn { padding: 12px 18px; font-size: 0.92rem; }

  /* Stat tiles */
  .stat { padding: var(--sp-7) var(--sp-5); }
  .stat .num { font-size: 2.4rem; }

  /* Pillars / Bento — already collapse, just tighten padding */
  .bento-card { padding: 24px 22px; min-height: 180px; }
  .bento-hero { padding: 28px 24px; min-height: auto; }
  .bento-feat { min-height: auto; }
  .bento-card .bento-title { font-size: 1.2rem; }
  .bento-hero .bento-title { font-size: 1.5rem; }
  .bento-hero .bento-metric-big { font-size: clamp(2.25rem, 8vw, 3rem); }

  /* Service / industry / solution cards */
  .service-card { padding: 24px 22px; }
  .service-card h3 { font-size: 1.25rem; }
  .case { padding: 22px 20px; }
  .case-row { grid-template-columns: 80px 1fr; gap: 12px; }

  /* Featured pull-quote stacks fully */
  .pullquote-feat { padding: 36px 24px 32px; }
  .pullquote-feat::before { font-size: 9rem; top: -16px; left: 8px; }
  .pullquote-feat .pf-quote { font-size: 1.05rem; }

  /* Office cards */
  .office-card { padding: 22px 20px; min-height: auto; }
  .office-card h4 { font-size: 1.1rem; }

  /* Leaflet map — shorter on tiny screens */
  .leaflet-map { height: 320px; }

  /* CTA band */
  .cta-band { padding: var(--sp-8) var(--sp-7); border-radius: 18px; }
  .cta-band h2 { font-size: clamp(1.45rem, 6vw, 1.85rem); }
  .cta-band-wrap { padding-left: 16px; padding-right: 16px; }

  /* Footer */
  .site-footer { padding: var(--sp-9) 0 var(--sp-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

  /* Logo wall — 2 cols on the smallest, larger logos */
  .logo-wall { grid-template-columns: repeat(2, 1fr); }

  /* Insight cards */
  .insight-art { padding: var(--sp-4); }
  .insight-art .ia-headline { font-size: 1.1rem; }
  .insight-art .ia-icon { width: 48px; height: 48px; right: 12px; bottom: 10px; }
  .insight-body { padding: var(--sp-5); }

  /* Mega panel padding */
  .mega { padding: var(--sp-5) var(--sp-6); }

  /* Modal — full-width minus margin */
  .rd-modal-card { padding: 36px 24px 28px; }
}

/* ---- Tablets / small laptops (641–960) ---- */
@media (min-width: 641px) and (max-width: 960px) {
  /* Hero split → single col handled in components but tighten spacing */
  .hero-home { padding-top: var(--sp-10); padding-bottom: var(--sp-9); }

  /* Career role cards — stack metadata under title */
  [data-careers] a.card {
    grid-template-columns: 1fr 100px !important;
    grid-template-areas: "title level" "fn fn" "loc loc" !important;
    gap: 6px var(--sp-4) !important;
  }
  [data-careers] a.card h4 { grid-area: title; }
  [data-careers] a.card .pill-soft { grid-area: level; justify-self: end !important; }
  [data-careers] a.card span:last-of-type { display: none; }

  /* Stat grid — 2 cols */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Bento — 2 cols overrides at this range already, just tighten padding */
  .bento-card { padding: 26px 24px; }
}

/* Career role cards stack fully on phones — separate rule because the
   parent stylesheet had `2fr 1fr 1fr 1fr auto` inline on each card */
@media (max-width: 640px) {
  [data-careers] a.card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: var(--sp-5) var(--sp-5) !important;
  }
  [data-careers] a.card > h4 { font-size: 1.05rem; margin-bottom: 4px; }
  [data-careers] a.card > div { font-size: 0.85rem !important; }
  [data-careers] a.card > span:last-child { display: none; }
  /* Filter buttons wrap nicely */
  [data-careers-filters] { gap: 6px !important; }
  [data-careers-filters] .btn { padding: 6px 12px; font-size: 0.8rem; }
}

/* ---- Mid laptops (961–1279) ---- */
@media (min-width: 961px) and (max-width: 1279px) {
  /* Hero media a touch smaller so headline has room */
  .hero-video .hero-aside { max-width: 460px; margin-left: auto; }

  /* Career row cleaner on mid screens */
  [data-careers] a.card { grid-template-columns: 2.2fr 1fr 1.2fr 0.8fr auto !important; }
}

/* ---- Standard laptops (1280–1599) — default look ---- */

/* ---- Large desktops (1600+) ---- */
@media (min-width: 1600px) {
  :root { --container: 1360px; --container-narrow: 920px; }
  .cta-band-wrap { max-width: 1560px; }
  /* Hero a touch more generous */
  .hero-home .display-l { font-size: clamp(2.4rem, 2vw + 1rem, 3.2rem); }
  .hero-video .hero-aside { max-height: 420px; }
}

/* ---- 20"+ (1920+) ---- */
@media (min-width: 1920px) {
  :root { --container: 1480px; --container-narrow: 1000px; }
  body { font-size: 17px; }
  .cta-band-wrap { max-width: 1680px; }
  .hero-home .display-l { font-size: clamp(2.75rem, 2vw + 1rem, 3.5rem); }
  .leaflet-map { height: 540px; }
}

/* ---- Social rail responsive treatment ---- */
@media (max-width: 480px) {
  .social-rail { padding: 4px 0; gap: 4px; }
  .social-rail a { width: 34px; height: 34px; }
  .social-rail a::before { width: 26px; height: 26px; }
  .social-rail a > svg { width: 14px; height: 14px; }
}
@media (max-width: 360px) {
  .social-rail { display: none; } /* let content breathe on the smallest devices */
}

/* ---- Touch-friendly tap targets across nav + buttons ---- */
@media (hover: none) and (pointer: coarse) {
  .nav-link, .btn, .btn-link, .menu-toggle, .pill, .filter button {
    min-height: 44px; /* WCAG-aligned target size */
  }
}

/* ---- Print ---- */
@media print {
  .site-header, .site-footer, .social-rail, .cta-band, .hero-actions,
  .filter, .insight-art .ia-icon, .testimonials-marquee { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .card, .case, .stat { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ---------- 36. Careers table ---------- */
.careers-table-wrap {
  width: 100%;
  overflow-x: auto;             /* horizontal scroll on tiny screens */
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.careers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 720px;             /* triggers x-scroll < 720px */
}
.careers-table thead th {
  text-align: left;
  padding: 14px 18px;
  background: var(--bg-alt);
  font-family: var(--ff-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-soft);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.careers-table tbody tr {
  transition: background var(--d-fast);
}
.careers-table tbody tr:hover { background: var(--bg-alt); }
.careers-table tbody tr + tr { border-top: 1px solid var(--border); }
.careers-table th[scope="row"],
.careers-table td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: middle;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--fg);
}
.careers-table th[scope="row"] {
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1rem;
  color: var(--rd-ink);
}
.careers-table td:nth-child(2),
.careers-table td:nth-child(3) { color: var(--fg-muted); }
.careers-table .careers-apply-col { text-align: right; white-space: nowrap; }
.careers-table .careers-apply-col .btn-link { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--rd-signal); }
.careers-table .careers-apply-col .btn-link::after { display: none; }
.careers-table .careers-apply-col .btn-link:hover { background: var(--rd-signal); color: white; }

/* On phones the table scrolls horizontally; we don't try to flatten it.
   Visual cue that it's scrollable. */
@media (max-width: 720px) {
  .careers-table-wrap {
    background:
      linear-gradient(to right, var(--bg) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(11,31,58,0.06), var(--bg) 70%) right,
      var(--bg);
    background-size: 30px 100%, 30px 100%, 100% 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, local;
  }
}

/* ---------- 37. Menu responsiveness fixes ----------
   The original mega menu was tuned for desktop. These rules ensure the
   drawer behaviour is robust at every viewport. */
@media (max-width: 1024px) {
  /* Make the mobile drawer fully visible above any sticky content */
  .primary-nav {
    z-index: 99;
    background: white;
    box-shadow: 0 12px 24px rgba(11, 31, 58, 0.10);
  }
  .site-header.is-over-hero .primary-nav { color: var(--fg); }
  .site-header.is-over-hero .primary-nav .nav-link { color: var(--fg); }
  .site-header.is-over-hero .primary-nav .btn-ghost { color: var(--fg); border-color: var(--border-strong); }
  /* Ensure the menu-toggle inverts properly on dark hero */
  .site-header.is-over-hero:not(.is-scrolled) .menu-toggle .bar { background: white; }
  .site-header.is-scrolled .menu-toggle .bar,
  .site-header:not(.is-over-hero) .menu-toggle .bar { background: var(--fg); }
  /* Mega panel inside the drawer renders as a stacked list, not a centred panel.
     Strip the desktop translateX(-50%) which would shift it off-screen on mobile. */
  .nav-item .mega,
  .nav-item:hover > .mega,
  .nav-item:focus-within > .mega,
  .nav-item.is-open > .mega {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    transition: none !important;
    box-shadow: none;
    border: 0;
  }
  /* Caret rotates when panel is open */
  .nav-item.is-open > .nav-link .caret { transform: rotate(180deg); }
  /* Tap targets bigger inside the drawer */
  .primary-nav .nav-link { padding: 14px 16px; }
  .primary-nav .mega-link {
    padding: 10px 12px !important;
    margin: 0 !important;
    grid-template-columns: 36px 1fr !important;
    gap: 12px !important;
    width: auto !important;
  }
  .primary-nav .mega-link .mega-text { font-size: 0.95rem; }
  .primary-nav .mega-link .mega-text small { font-size: 0.8rem; }
  .primary-nav .mega-feature { display: none; }
  /* Drawer cleans negative margins on EVERY anchor in the mega so links
     stop clipping on narrow screens. */
  .primary-nav .mega a { margin: 0 !important; padding: 10px 12px !important; }
  /* Body lock when drawer is open */
  body.has-drawer-open { overflow: hidden; }
}

/* Phones: ensure the drawer fits and scrolls if content overflows.
   - 100dvh tracks the visible viewport as iOS Safari shrinks/grows the URL bar.
   - safe-area-inset-bottom keeps the last menu item clear of the home indicator.
   - overscroll-behavior contains scroll so the page underneath doesn't move. */
@media (max-width: 640px) {
  .primary-nav {
    inset: var(--header-h) 0 0 0 !important;
    height: calc(100dvh - var(--header-h)) !important;
    max-height: calc(100dvh - var(--header-h)) !important;
    padding: 16px 16px calc(48px + env(safe-area-inset-bottom, 0)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav .nav-link { font-size: 1rem; }
  .primary-nav .mega { padding: 0 !important; }
  .primary-nav .mega-cols { gap: 8px !important; }
  .primary-nav .mega-section .label { margin-bottom: 8px; font-size: 0.7rem; }
  /* Hide the old desktop ghost buttons inside the drawer; the Book Briefing
     primary button stays in the top bar. */
  .primary-nav + .header-actions .btn-ghost { display: none; }
}

/* ---------- Legal pages (Privacy, Terms, Cookie Policy, Accessibility) ----------
   Clean, scannable reading column. Each <section.legal-block> sits above a
   subtle separator so the long-form copy is easy to navigate. */
.legal-article {
  font-family: var(--ff-body);
  color: var(--fg);
}
.legal-block {
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--border);
}
.legal-block:first-child { border-top: 0; padding-top: 0; }
.legal-block h2 {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  color: var(--rd-ink);
  margin: 0 0 var(--sp-4);
  line-height: 1.25;
}
.legal-body p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 var(--sp-4);
}
.legal-body p:last-child { margin-bottom: 0; }
.legal-body code {
  font-family: var(--ff-mono);
  font-size: 0.88em;
  padding: 1px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--rd-ink);
}
.legal-body strong { color: var(--rd-ink); }
.legal-body a {
  color: var(--rd-signal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:hover { color: var(--rd-ink); }
.legal-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--fg);
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rd-signal);
}
.legal-list li strong { color: var(--rd-ink); }
.legal-table-wrap {
  overflow-x: auto;
  margin: var(--sp-4) 0 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: white;
}
.legal-table {
  width: 100%;
  min-width: 560px; /* triggers x-scroll inside the wrap on narrow screens */
  border-collapse: collapse;
  font-size: 0.92rem;
}
.legal-table thead th {
  background: var(--bg-alt);
  text-align: left;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rd-ink);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.legal-table tbody td {
  padding: 14px;
  vertical-align: top;
  border-top: 1px solid var(--border);
  line-height: 1.55;
  color: var(--fg);
}
.legal-table tbody td strong { color: var(--rd-ink); }
.legal-contact {
  margin-top: var(--sp-7);
  padding: var(--sp-7);
  border-radius: var(--r-md);
  border-top: 0;
  background: linear-gradient(135deg, var(--rd-signal-50) 0%, #fff 75%);
  border: 1px solid rgba(11, 102, 255, 0.16);
}
.legal-contact h2 { font-size: 1.2rem; }
@media (max-width: 600px) {
  .legal-block { padding: var(--sp-6) 0; }
  .legal-block h2 { font-size: 1.2rem; }
  .legal-body p, .legal-list li { font-size: 0.95rem; }
}

/* ---------- 38. WhatsApp floating button + region picker ---------- */
.rd-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 95;
}
.rd-whatsapp-btn {
  /* Transparent button — the SVG icon ships its own colour, shape, and shadow. */
  background: transparent;
  padding: 0;
  border: 0;
  display: inline-flex;
  cursor: pointer;
  transition: transform 220ms var(--ease-out);
  position: relative;
}
.rd-whatsapp-btn:hover { transform: scale(1.05); }
.rd-whatsapp-btn img {
  /* Sizing is controlled via HTML width/height attributes on the <img>.
     CSS only ensures the icon ships unmodified — no clipping, no filters. */
  display: block;
}
.rd-whatsapp-btn svg { width: 28px; height: 28px; }
.rd-whatsapp-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 320px;
  max-width: calc(100vw - 36px);
  background: white;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(11, 31, 58, 0.22), 0 4px 12px rgba(11, 31, 58, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.rd-whatsapp-menu[hidden] { display: none !important; }
.rd-whatsapp.is-open .rd-whatsapp-menu { opacity: 1; transform: none; }
.rd-whatsapp-menu-head {
  padding: 10px 12px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rd-whatsapp-menu-head strong {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  color: var(--rd-ink);
  letter-spacing: -0.01em;
}
.rd-whatsapp-menu-head span {
  font-size: 0.78rem;
  color: var(--fg-soft);
}
.rd-whatsapp-region {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg);
  transition: background 160ms;
}
.rd-whatsapp-region:hover { background: var(--bg-alt); }
.rd-whatsapp-region.is-suggested {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.10), rgba(37, 211, 102, 0.02));
  outline: 1px solid rgba(37, 211, 102, 0.30);
}
.rd-wa-flag { font-size: 1.4rem; line-height: 1; }
.rd-wa-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.rd-wa-meta strong {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--rd-ink);
  font-size: 0.95rem;
}
.rd-wa-meta small {
  font-family: var(--ff-mono);
  color: var(--fg-soft);
  font-size: 0.78rem;
}
@media (max-width: 480px) {
  .rd-whatsapp { right: 12px; bottom: 12px; }
  .rd-whatsapp-btn svg { width: 24px; height: 24px; }
  .rd-whatsapp-menu { width: calc(100vw - 24px); }
}

/* Pull the social rail above the WhatsApp button so they don't collide */
.social-rail { bottom: auto; top: 50%; transform: translateY(-50%); }

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px; left: 8px;
  background: var(--rd-ink); color: white;
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  z-index: 200;
  transition: top var(--d-fast);
}
.skip-link:focus { top: 8px; }